diff --git a/package.json b/package.json index 20aa508..4ced819 100644 --- a/package.json +++ b/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", diff --git a/public/assets/imgs/show/clean_cleaning.png b/public/assets/imgs/show/clean_cleaning.png new file mode 100644 index 0000000..bd76d6f Binary files /dev/null and b/public/assets/imgs/show/clean_cleaning.png differ diff --git a/public/assets/imgs/show/clean_hint1.png b/public/assets/imgs/show/clean_hint1.png new file mode 100644 index 0000000..1b67f40 Binary files /dev/null and b/public/assets/imgs/show/clean_hint1.png differ diff --git a/public/assets/imgs/show/clean_hint2.png b/public/assets/imgs/show/clean_hint2.png new file mode 100644 index 0000000..7d57f93 Binary files /dev/null and b/public/assets/imgs/show/clean_hint2.png differ diff --git a/public/assets/imgs/show/clean_hint3.png b/public/assets/imgs/show/clean_hint3.png new file mode 100644 index 0000000..25ed98d Binary files /dev/null and b/public/assets/imgs/show/clean_hint3.png differ diff --git a/public/assets/imgs/show/clean_start.png b/public/assets/imgs/show/clean_start.png new file mode 100644 index 0000000..902d446 Binary files /dev/null and b/public/assets/imgs/show/clean_start.png differ diff --git a/public/assets/imgs/show/datacenter-dtjn.png b/public/assets/imgs/show/datacenter-dtjn.png new file mode 100644 index 0000000..77c14f4 Binary files /dev/null and b/public/assets/imgs/show/datacenter-dtjn.png differ diff --git a/public/assets/imgs/show/datacenter-kqzl.png b/public/assets/imgs/show/datacenter-kqzl.png new file mode 100644 index 0000000..95b7122 Binary files /dev/null and b/public/assets/imgs/show/datacenter-kqzl.png differ diff --git a/public/assets/imgs/show/datacenter-wdqx.png b/public/assets/imgs/show/datacenter-wdqx.png new file mode 100644 index 0000000..c6e8eba Binary files /dev/null and b/public/assets/imgs/show/datacenter-wdqx.png differ diff --git a/public/assets/imgs/show/datacenter-yzzt.png b/public/assets/imgs/show/datacenter-yzzt.png new file mode 100644 index 0000000..7240a79 Binary files /dev/null and b/public/assets/imgs/show/datacenter-yzzt.png differ diff --git a/public/assets/imgs/show/datacenter_tb_kqzl.png b/public/assets/imgs/show/datacenter_tb_kqzl.png new file mode 100644 index 0000000..a4ff9db Binary files /dev/null and b/public/assets/imgs/show/datacenter_tb_kqzl.png differ diff --git a/public/assets/imgs/show/datacenter_tb_nhtj.png b/public/assets/imgs/show/datacenter_tb_nhtj.png new file mode 100644 index 0000000..10bced3 Binary files /dev/null and b/public/assets/imgs/show/datacenter_tb_nhtj.png differ diff --git a/public/assets/imgs/show/datacenter_tb_wdbh.png b/public/assets/imgs/show/datacenter_tb_wdbh.png new file mode 100644 index 0000000..9c094dd Binary files /dev/null and b/public/assets/imgs/show/datacenter_tb_wdbh.png differ diff --git a/public/assets/imgs/show/datacenter_tb_yxkg.png b/public/assets/imgs/show/datacenter_tb_yxkg.png new file mode 100644 index 0000000..592bf41 Binary files /dev/null and b/public/assets/imgs/show/datacenter_tb_yxkg.png differ diff --git a/public/assets/imgs/show/down.png b/public/assets/imgs/show/down.png new file mode 100644 index 0000000..ac0ded9 Binary files /dev/null and b/public/assets/imgs/show/down.png differ diff --git a/src/assets/imgs/show/datacenter_tb_kqzl.png b/src/assets/imgs/show/datacenter_tb_kqzl.png new file mode 100644 index 0000000..a4ff9db Binary files /dev/null and b/src/assets/imgs/show/datacenter_tb_kqzl.png differ diff --git a/src/assets/imgs/show/datacenter_tb_nhtj.png b/src/assets/imgs/show/datacenter_tb_nhtj.png new file mode 100644 index 0000000..10bced3 Binary files /dev/null and b/src/assets/imgs/show/datacenter_tb_nhtj.png differ diff --git a/src/assets/imgs/show/datacenter_tb_wdbh.png b/src/assets/imgs/show/datacenter_tb_wdbh.png new file mode 100644 index 0000000..9c094dd Binary files /dev/null and b/src/assets/imgs/show/datacenter_tb_wdbh.png differ diff --git a/src/assets/imgs/show/datacenter_tb_yxkg.png b/src/assets/imgs/show/datacenter_tb_yxkg.png new file mode 100644 index 0000000..592bf41 Binary files /dev/null and b/src/assets/imgs/show/datacenter_tb_yxkg.png differ diff --git a/src/assets/imgs/show/icon_dh.png b/src/assets/imgs/show/icon_dh.png new file mode 100644 index 0000000..7b0ba02 Binary files /dev/null and b/src/assets/imgs/show/icon_dh.png differ diff --git a/src/dto/scene-dto.ts b/src/dto/scene-dto.ts index b331261..5841776 100644 --- a/src/dto/scene-dto.ts +++ b/src/dto/scene-dto.ts @@ -18,4 +18,13 @@ export type SceneDto = { * 进度 */ progress: number; + /** + * 图片透明度 + */ + imgAlpha: number; + + /** + * 进度背景透明度 + */ + opacity: number; }; diff --git a/src/router.ts b/src/router.ts index b3ffdf9..1268d06 100644 --- a/src/router.ts +++ b/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", diff --git a/src/styles/framework/base/flexbox.scss b/src/styles/framework/base/flexbox.scss index 01705db..8c8a44c 100644 --- a/src/styles/framework/base/flexbox.scss +++ b/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; diff --git a/src/view/data-center/data-center-show.vue b/src/view/data-center/data-center-show.vue index 410e6fd..5475026 100644 --- a/src/view/data-center/data-center-show.vue +++ b/src/view/data-center/data-center-show.vue @@ -51,6 +51,5 @@ onActivated(() => { .show-img { width: 100vw; - height: 100vh; } diff --git a/src/view/data-center/data-center.vue b/src/view/data-center/data-center.vue index b40776f..942aba2 100644 --- a/src/view/data-center/data-center.vue +++ b/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" } }); } diff --git a/src/view/demo/base-components-demo.vue b/src/view/demo/base-components-demo.vue index 68dcf2b..dace0f7 100644 --- a/src/view/demo/base-components-demo.vue +++ b/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", }, diff --git a/src/view/drop-down-menu/drop-down-menu.vue b/src/view/drop-down-menu/drop-down-menu.vue index 26373b6..a2c8804 100644 --- a/src/view/drop-down-menu/drop-down-menu.vue +++ b/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", diff --git a/src/view/message/message.vue b/src/view/message/message.vue new file mode 100644 index 0000000..be20cb0 --- /dev/null +++ b/src/view/message/message.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/src/view/message/messageDetail.vue b/src/view/message/messageDetail.vue new file mode 100644 index 0000000..23c6e25 --- /dev/null +++ b/src/view/message/messageDetail.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/src/view/tabs/fixed-time.vue b/src/view/tabs/fixed-time.vue index 4e862e9..dedd5ca 100644 --- a/src/view/tabs/fixed-time.vue +++ b/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; } diff --git a/src/view/tabs/scene.vue b/src/view/tabs/scene.vue index fb5739b..2efd0ad 100644 --- a/src/view/tabs/scene.vue +++ b/src/view/tabs/scene.vue @@ -5,10 +5,24 @@
-
- -
- {{ item.name }} +
+
+
+ +
+ {{ item.name }} +
+
+
+ +
@@ -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 } ]);