消息，场景

package.json

@@ -28,6 +28,7 @@
     "echarts": "^5.4.1",
     "hammerjs": "^2.0.8",
     "husky": "^8.0.2",
+    "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "node-html-parser": "^6.1.4",
     "postcss-pxtorem": "^6.0.0",
@@ -48,6 +49,7 @@
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.3.0",
     "@types/hammerjs": "^2.0.41",
+    "@types/lodash": "^4.14.194",
     "@types/node": "^18.7.1",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.15.0",

src/dto/scene-dto.ts

@@ -18,4 +18,13 @@ export type SceneDto = {
    * 进度
    */
   progress: number;
+  /**
+   * 图片透明度
+   */
+  imgAlpha: number;
+
+  /**
+   * 进度背景透明度
+   */
+  opacity: number;
 };

src/router.ts

@@ -102,6 +102,18 @@ const projectRoutes = [
     path: "/dataCenterShow",
     component: () => import("@/view/data-center/data-center-show.vue")
   },
+  {
+    //数据中心展示页面
+    name: "message",
+    path: "/message",
+    component: () => import("@/view/message/message.vue")
+  },
+  {
+    //数据中心展示页面
+    name: "messageDetail",
+    path: "/messageDetail",
+    component: () => import("@/view/message/messageDetail.vue")
+  },
   // 非哈希路由暂不启用
   {
     name: "notFound",

src/styles/framework/base/flexbox.scss

@@ -357,7 +357,11 @@ Flex, Grow, & Shrink 待确定
     width: 66px;
     height: 66px;
   }
-
+  .zhp-text-24-white-alpha40 {
+    color: rgba($color:#ffffff,$alpha:0.4);
+    font-size: 24px;
+    font-weight: 400;
+  }
   .zhp-text-28-white {
     color: #fff;
     font-size: 28px;
@@ -375,7 +379,11 @@ Flex, Grow, & Shrink 待确定
     font-size: 32px;
     font-weight: 400;
   }
-
+  .zhp-text-34-white-alpha50 {
+    color: rgba($color:#ffffff,$alpha:0.5);
+    font-size: 34px;
+    font-weight: 400;
+  }
   .rightImg {
     position: absolute;
     width: 48px;

src/view/data-center/data-center-show.vue

@@ -51,6 +51,5 @@ onActivated(() => {
 
 .show-img {
   width: 100vw;
-  height: 100vh;
 }
 </style>

src/view/data-center/data-center.vue

@@ -44,7 +44,7 @@ const centerList = ref([
         path: "/dataCenterShow",
         query: {
           titleText: "低碳节能",
-          showImg: "/assets/imgs/show/bg_btn_blue.png"
+          showImg: "/assets/imgs/show/datacenter_tb_nhtj.png"
         }
       });
     }
@@ -58,7 +58,7 @@ const centerList = ref([
         path: "/dataCenterShow",
         query: {
           titleText: "温度曲线",
-          showImg: "/assets/imgs/show/clean_cleaning.png"
+          showImg: "/assets/imgs/show/datacenter_tb_wdbh.png"
         }
       });
     }
@@ -72,7 +72,7 @@ const centerList = ref([
         path: "/dataCenterShow",
         query: {
           titleText: "空气质量",
-          showImg: "/assets/imgs/show/bg_btn_gray.png"
+          showImg: "/assets/imgs/show/datacenter_tb_kqzl.png"
         }
       });
     }
@@ -86,7 +86,7 @@ const centerList = ref([
         path: "/dataCenterShow",
         query: {
           titleText: "运转状态",
-          showImg: "/assets/imgs/show/bg_item_timing_select.png"
+          showImg: "/assets/imgs/show/datacenter_tb_wdbh.png"
         }
       });
     }

src/view/demo/base-components-demo.vue

@@ -45,7 +45,7 @@ const navList = [
     name: "animation",
     icon: "iconfont icon-chongzhima",
     click: () => {
-      router.push("/demo/base-components-demo/timing");
+      router.push("@/view/demo/animation-demo.vue");
     },
     color: "bg-red",
   },

src/view/drop-down-menu/drop-down-menu.vue

@@ -56,7 +56,10 @@ onMounted(() => {
     },
     {
       img: "/assets/imgs/drop-down-menu/func-jieneng@2x.png",
-      text: "节能"
+      text: "节能",
+      onClick: () => {
+        router.push("/message");
+      }
     },
     {
       img: "/assets/imgs/drop-down-menu/func-set@2x.png",

src/view/message/message.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="base-bg">
+    <div class="zhp-title">
+      <img
+        class="leftImg"
+        src="@/assets/imgs/show/back.png"
+        @click="router.back()"
+      />
+      <div class="zhp-title-text">消息</div>
+    </div>
+    <div class="zhp-horizontal" style="justify-content: center">
+      <div v-for="(item, i) in messageList" :key="i" @click="onItemClick(item)">
+        <div
+          :class="
+            item.selectState
+              ? 'base-card-content-selectBg'
+              : 'base-card-content-unSelectBg'
+          ">
+          <div class="zhp-vertical margin-left-30">
+            <div class="zhp-text-24-white-alpha40">{{ item.time }}</div>
+            <div class="message-content">{{ item.content }}</div>
+          </div>
+          <img
+            src="@/assets/imgs/show/btn_item_timing_delete.png"
+            class="message-delete"
+            @click.stop="onItemDelete(i)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import router from "@/router";
+import { onActivated, ref } from "vue";
+import * as path from "path";
+
+const onItemClick = (item: any) => {
+  router.push({
+    path: "/messageDetail",
+    query: {
+      time: item.time,
+      content: item.content,
+      title: item.title
+    }
+  });
+};
+const onItemDelete = (index: number) => {
+  messageList.value.splice(index, 1);
+};
+onActivated(() => {
+  messageList.value = [
+    {
+      title: "尊敬的用户",
+      time: "2023年 5月12日 12:32",
+      content:
+        "尊敬的用户，天气越来越热了，为了您的健康，建议使用空调前做一次高温除菌",
+      isRead: false,
+      selectState: false
+    }
+  ];
+});
+const messageList = ref([
+  {
+    title: "尊敬的用户",
+    time: "2023年 5月12日 12:32",
+    content:
+      "尊敬的用户，天气越来越热了，为了您的健康，建议使用空调前做一次高温除菌",
+    isRead: false,
+    selectState: false
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.message-delete {
+  position: absolute;
+  right: 30px;
+  width: 60px;
+  height: 60px;
+}
+
+.message-content {
+  color: #fff;
+  font-size: 32px;
+  font-weight: 400;
+  margin-top: 20px;
+  width: 500px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/view/message/messageDetail.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="base-bg">
+    <div class="zhp-title">
+      <img
+        class="rightImg"
+        src="@/assets/imgs/show/close.png"
+        @click="router.back()"
+      />
+    </div>
+    <div class="message-bg">
+      <div class="zhp-text-34-white-alpha50">{{time}}</div>
+      <div class="message-title">{{title}}</div>
+      <div class="zhp-text-28-white">{{content}}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import router from "@/router";
+import { onActivated, ref } from "vue";
+let title=ref("");
+let time=ref("");
+let content=ref("");
+onActivated(()=>{
+  const query:any=router.currentRoute.value.query;
+  if (query){
+    title.value=query.title;
+    time.value=query.time;
+    content.value=query.content;
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.message-bg {
+  background-color: rgba($color: #a1b8e6, $alpha: 0.08);
+  flex-direction: column;
+  border-radius: 8px;
+  background-origin: border-box;
+  display: flex;
+  height: 100vh;
+  padding: 24px 29px 29px 24px;
+  margin-left: 24px;
+  margin-right: 24px;
+}
+.message-title {
+  color: white;
+  font-weight: 500;
+  font-size: 44px;
+  margin-top: 34px;
+  margin-bottom: 34px;
+}
+</style>

src/view/tabs/fixed-time.vue

@@ -199,7 +199,8 @@ const navList = ref([
 }
 
 .delete {
-  margin-left: 77px;
+  position: absolute;
+  right:36px;
   width: 60px;
   height: 60px;
 }

src/view/tabs/scene.vue

@@ -5,10 +5,24 @@
     </div>
     <div class="zhp-item-bg" style="overflow: auto">
       <div v-for="(item, i) in navList" :key="i">
-        <div class="base-scene-card-content-bg" @click="onItemClick(item)">
-          <img class="stateBgf" :src="item.img" />
-          <div class="function">
-            {{ item.name }}
+        <div style="left: 10px">
+          <div class="progress-bg">
+            <div class="base-scene-card-content-bg">
+              <img class="stateBgf" :src="getImgSrc(item.img)" :style="{opacity:(item.imgAlpha)}" />
+              <div class="function">
+                {{ item.name }}
+              </div>
+            </div>
+            <div style="position: absolute; left: 0" @click="onItemClick(item)">
+              <van-progress
+                :style="{ opacity: item.opacity}"
+                class="progress"
+                :percentage="item.progress"
+                track-color="#20252E"
+                :show-pivot="false"
+                color="#B8B8B8"
+              ></van-progress>
+            </div>
           </div>
         </div>
       </div>
@@ -20,77 +34,125 @@
 import { useRouter } from "vue-router";
 import { ref } from "vue";
 import { SceneDto } from "@/dto/scene-dto";
-import { Toast } from "vant";
+import { $commonService } from "@/services/framework/dependency-injection-service";
 
-const router = useRouter();
+const getImgSrc = $commonService.$imgService.getImgSrc;
 
+const router = useRouter();
 /**
  * 切换选中状态
  */
 const onItemClick = (scene: SceneDto) => {
-  navList.value.forEach((t) => {
-    if (t.id === scene.id) {
-      Toast(t.name);
-    }
-  });
+  let curImg = scene.img;
+  scene.opacity = 0.2;
+  scene.progress = 100;
+  scene.imgAlpha = 0.8;
+  setTimeout(() => {
+    scene.opacity = 0.2;
+    scene.imgAlpha = 0.3;
+    setTimeout(() => {
+      scene.img = "/assets/imgs/show/icon_dh.png";
+      scene.opacity = 0.1;
+      scene.imgAlpha = 1;
+      setTimeout(() => {
+        scene.img = curImg;
+        scene.opacity = 0;
+        scene.progress = 0;
+        scene.imgAlpha = 1;
+        setTimeout(() => {
+          scene.img = curImg;
+          scene.opacity = 0;
+          scene.progress = 0;
+          scene.imgAlpha = 1;
+        }, 300);
+      }, 300);
+    }, 300);
+  }, 300);
 };
 
 const navList = ref([
   {
     id: 0,
-    img: "/src/assets/imgs/show/icon_tyzl.png",
+    img: "/assets/imgs/show/icon_tyzl.png",
     name: "统一制冷",
-    progress: 0.5
+    progress: 0,
+    opacity: 0.2,
+    imgAlpha: 1
   },
   {
     id: 1,
-    img: "/src/assets/imgs/show/icon_tyzr.png",
+    img: "/assets/imgs/show/icon_tyzr.png",
     name: "统一制热",
-    progress: 0.8
+    progress: 0,
+    opacity: 0.2,
+    imgAlpha: 1
   },
   {
     id: 2,
-    img: "/src/assets/imgs/show/icon_kszl.png",
+    img: "/assets/imgs/show/icon_kszl.png",
     name: "快速制冷",
-    progress: 0.3
+    progress: 0,
+    opacity: 0.2,
+    imgAlpha: 1
   },
   {
     id: 3,
-    img: "/src/assets/imgs/show/icon_kszr.png",
+    img: "/assets/imgs/show/icon_kszr.png",
     name: "快速制热",
-    progress: 0.5
+    progress: 0,
+    opacity: 0.2,
+    imgAlpha: 1
   },
   {
     id: 4,
-    img: "/src/assets/imgs/show/icon_hwxf.png",
+    img: "/assets/imgs/show/icon_hwxf.png",
     name: "恒温新风",
-    progress: 0.8
+    progress: 0,
+    opacity: 0.2,
+    imgAlpha: 1
   },
   {
     id: 5,
-    img: "/src/assets/imgs/show/icon_zhqg.png",
+    img: "/assets/imgs/show/icon_zhqg.png",
     name: "智慧全感",
-    progress: 0.3
+    progress: 0,
+    opacity: 0.2,
+    imgAlpha: 1
   },
   {
     id: 6,
-    img: "/src/assets/imgs/show/icon_ty.png",
+    img: "/assets/imgs/show/icon_ty.png",
     name: "通用",
-    progress: 0.3
+    progress: 0,
+    opacity: 0.2,
+    imgAlpha: 1
   }
 ]);
 </script>
 
 <style lang="scss" scoped>
-.base-scene-card-content-bg {
-  align-items: center;
-  justify-content: left;
+.progress-bg {
+  position: relative;
   margin-bottom: 20px;
   height: 146px;
-  background-image: url(@/assets/imgs/show/bg_item_scene.png);
-  background-size: contain;
-  background-repeat: no-repeat;
   width: 326px;
+}
+
+.progress {
+  height: 146px;
+  width: 326px;
+  border-radius: 16px;
+}
+
+.base-scene-card-content-bg {
+  background-color: #20252e;
+  border-radius: 16px;
+  position: absolute;
+  height: 146px;
+  width: 326px;
+  left: 0;
+  align-items: center;
+  justify-content: left;
   display: flex;
 }
 
@@ -98,7 +160,7 @@ const navList = ref([
   margin-left: 30px;
   font-weight: 400;
   font-size: 32px;
-  color: #ffffff;
+  color: #fff;
 }
 
 .stateBgf {
@@ -106,5 +168,4 @@ const navList = ref([
   width: 60px;
   height: 60px;
 }
-
 </style>