Browse Source

消息,场景

dev_230517
刘洪超 1 year ago
parent
commit
ee4018e843
  1. 2
      package.json
  2. BIN
      public/assets/imgs/show/clean_cleaning.png
  3. BIN
      public/assets/imgs/show/clean_hint1.png
  4. BIN
      public/assets/imgs/show/clean_hint2.png
  5. BIN
      public/assets/imgs/show/clean_hint3.png
  6. BIN
      public/assets/imgs/show/clean_start.png
  7. BIN
      public/assets/imgs/show/datacenter-dtjn.png
  8. BIN
      public/assets/imgs/show/datacenter-kqzl.png
  9. BIN
      public/assets/imgs/show/datacenter-wdqx.png
  10. BIN
      public/assets/imgs/show/datacenter-yzzt.png
  11. BIN
      public/assets/imgs/show/datacenter_tb_kqzl.png
  12. BIN
      public/assets/imgs/show/datacenter_tb_nhtj.png
  13. BIN
      public/assets/imgs/show/datacenter_tb_wdbh.png
  14. BIN
      public/assets/imgs/show/datacenter_tb_yxkg.png
  15. BIN
      public/assets/imgs/show/down.png
  16. BIN
      src/assets/imgs/show/datacenter_tb_kqzl.png
  17. BIN
      src/assets/imgs/show/datacenter_tb_nhtj.png
  18. BIN
      src/assets/imgs/show/datacenter_tb_wdbh.png
  19. BIN
      src/assets/imgs/show/datacenter_tb_yxkg.png
  20. BIN
      src/assets/imgs/show/icon_dh.png
  21. 9
      src/dto/scene-dto.ts
  22. 12
      src/router.ts
  23. 12
      src/styles/framework/base/flexbox.scss
  24. 1
      src/view/data-center/data-center-show.vue
  25. 8
      src/view/data-center/data-center.vue
  26. 2
      src/view/demo/base-components-demo.vue
  27. 5
      src/view/drop-down-menu/drop-down-menu.vue
  28. 94
      src/view/message/message.vue
  29. 53
      src/view/message/messageDetail.vue
  30. 3
      src/view/tabs/fixed-time.vue
  31. 123
      src/view/tabs/scene.vue

2
package.json

@ -28,6 +28,7 @@ @@ -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 @@ @@ -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",

BIN
public/assets/imgs/show/clean_cleaning.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
public/assets/imgs/show/clean_hint1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
public/assets/imgs/show/clean_hint2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
public/assets/imgs/show/clean_hint3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/assets/imgs/show/clean_start.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
public/assets/imgs/show/datacenter-dtjn.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/assets/imgs/show/datacenter-kqzl.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
public/assets/imgs/show/datacenter-wdqx.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
public/assets/imgs/show/datacenter-yzzt.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/assets/imgs/show/datacenter_tb_kqzl.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

BIN
public/assets/imgs/show/datacenter_tb_nhtj.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

BIN
public/assets/imgs/show/datacenter_tb_wdbh.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

BIN
public/assets/imgs/show/datacenter_tb_yxkg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

BIN
public/assets/imgs/show/down.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 884 B

BIN
src/assets/imgs/show/datacenter_tb_kqzl.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 167 KiB

BIN
src/assets/imgs/show/datacenter_tb_nhtj.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

BIN
src/assets/imgs/show/datacenter_tb_wdbh.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

BIN
src/assets/imgs/show/datacenter_tb_yxkg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

BIN
src/assets/imgs/show/icon_dh.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

9
src/dto/scene-dto.ts

@ -18,4 +18,13 @@ export type SceneDto = { @@ -18,4 +18,13 @@ export type SceneDto = {
*
*/
progress: number;
/**
*
*/
imgAlpha: number;
/**
*
*/
opacity: number;
};

12
src/router.ts

@ -102,6 +102,18 @@ const projectRoutes = [ @@ -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",

12
src/styles/framework/base/flexbox.scss

@ -357,7 +357,11 @@ Flex, Grow, & Shrink 待确定 @@ -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 待确定 @@ -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;

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

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

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

@ -44,7 +44,7 @@ const centerList = ref([ @@ -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([ @@ -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([ @@ -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([ @@ -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"
}
});
}

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

@ -45,7 +45,7 @@ const navList = [ @@ -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",
},

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

@ -56,7 +56,10 @@ onMounted(() => { @@ -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",

94
src/view/message/message.vue

@ -0,0 +1,94 @@ @@ -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>

53
src/view/message/messageDetail.vue

@ -0,0 +1,53 @@ @@ -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>

3
src/view/tabs/fixed-time.vue

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

123
src/view/tabs/scene.vue

@ -5,12 +5,26 @@ @@ -5,12 +5,26 @@
</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 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>
</div>
</div>
@ -20,77 +34,125 @@ @@ -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([ @@ -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([ @@ -106,5 +168,4 @@ const navList = ref([
width: 60px;
height: 60px;
}
</style>

Loading…
Cancel
Save