bonus
/
zhly-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
BianLzhaoMin 2025-05-21 08:41:05 +08:00
parent ad67a446e3
commit 5cd462507a
2 changed files with 325 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

319
src/components/Dialog/children/Kongtiao.vue
View File

@ -1,59 +1,64 @@
<template> <template>
<div v-drag :style="{ left: XY[0] + 'px', top: XY[1]+'px' }" class="kongtiao"> <div
<Title title="空调远程控制" v-on="$listeners" style="padding-top: 0.3rem;"/> v-drag
class="kongtiao"
:style="{ left: XY[0], top: XY[1] }"
style="transform: translate(-50%, -50%)"
>
<Title title="空调远程控制" v-on="$listeners" style="padding-top: 0.3rem" />
<div class="close" @click="$emit('close')"></div> <div class="close" @click="$emit('close')"></div>
<ID :id="diviceData.deviceName" style="margin-top: 0.5rem;"/> <ID :id="diviceData.deviceName" style="margin-top: 0.5rem" />
<List :list="temperatureList" :temp="temp" style="padding-top: 0.3rem" />
<List :list="cotrolList" />
<List :list="temperatureList" :temp="temp" style="padding-top: 0.3rem;"/> <div class="radio-box" style="margin-top: 0.1rem">
<div class="txt">位置：</div>
<List :list="cotrolList"/>
<div class="radio-box" style="margin-top: 0.1rem;">
<div class="txt">
位置：
</div>
<div class="box"> <div class="box">
<div class="areaName">{{ areaName }}</div> <div class="areaName">{{ areaName }}</div>
</div> </div>
</div> </div>
<div class="slider-box" @mousedown.stop > <div class="slider-box" @mousedown.stop>
<div class="txt">温度：</div> <div class="txt">温度：</div>
<el-slider style="font-size: 0.4rem;" <el-slider
style="font-size: 0.4rem"
v-model="temp" v-model="temp"
:format-tooltip="formatTooltip" :format-tooltip="formatTooltip"
:marks="marks" :max="30" :min="16" :step="1" class="slider" show-tooltip tooltip-class="cus-tooltip-class"> :marks="marks"
:max="30"
:min="16"
:step="1"
class="slider"
show-tooltip
tooltip-class="cus-tooltip-class"
>
</el-slider> </el-slider>
</div> </div>
<div class="radio-box"> <div class="radio-box">
<div class="txt"> <div class="txt">开关：</div>
开关：
</div>
<div class="box"> <div class="box">
<el-radio v-model="onOff" :label="1" style="color: #fff;">开启</el-radio> <el-radio v-model="onOff" :label="1" style="color: #fff">开启</el-radio>
<el-radio v-model="onOff" :label="0" style="color: #fff">关闭</el-radio> <el-radio v-model="onOff" :label="0" style="color: #fff">关闭</el-radio>
</div> </div>
</div> </div>
<div class="radio-box"> <div class="radio-box">
<div class="txt">模式：</div> <div class="txt">模式：</div>
<div class="box"> <div class="box">
<el-radio v-model="modal" :label="1" style="color: #fff;">制冷</el-radio> <el-radio v-model="modal" :label="1" style="color: #fff">制冷</el-radio>
<el-radio v-model="modal" :label="2" style="color: #fff;">制热</el-radio> <el-radio v-model="modal" :label="2" style="color: #fff">制热</el-radio>
<el-radio v-model="modal" :label="3" style="color: #fff;">除湿</el-radio> <el-radio v-model="modal" :label="3" style="color: #fff">除湿</el-radio>
<el-radio v-model="modal" :label="4" style="color: #fff;">送风</el-radio> <el-radio v-model="modal" :label="4" style="color: #fff">送风</el-radio>
<el-radio v-model="modal" :label="5" style="color: #fff;">自动</el-radio> <el-radio v-model="modal" :label="5" style="color: #fff">自动</el-radio>
</div> </div>
</div> </div>
<div class="radio-box"> <div class="radio-box">
<div class="txt"> <div class="txt">风速：</div>
风速：
</div>
<div class="box"> <div class="box">
<el-radio v-model="feng" :label="1" style="color: #fff">低风</el-radio> <el-radio v-model="feng" :label="1" style="color: #fff">低风</el-radio>
<el-radio v-model="feng" :label="2" style="color: #fff">中风</el-radio> <el-radio v-model="feng" :label="2" style="color: #fff">中风</el-radio>
<el-radio v-model="feng" :label="3" style="color: #fff">高风</el-radio> <el-radio v-model="feng" :label="3" style="color: #fff">高风</el-radio>
<el-radio v-model="feng" :label="4" style="color: #fff;">自动</el-radio> <el-radio v-model="feng" :label="4" style="color: #fff">自动</el-radio>
</div> </div>
</div> </div>
@ -66,8 +71,10 @@
<el-radio v-model="isOn" :label="false" style="color: #fff">关闭</el-radio> <el-radio v-model="isOn" :label="false" style="color: #fff">关闭</el-radio>
</div> </div>
</div> --> </div> -->
<div style="text-align: center;"> <div style="text-align: center">
<el-button class="controlBtn" :loading="loading" @click="control()" round>确认</el-button> <el-button class="controlBtn" :loading="loading" @click="control()" round
>确认</el-button
>
</div> </div>
<!-- <div class="controlBtn" custom-class="videoDialog" @click="control()">确认</div> --> <!-- <div class="controlBtn" custom-class="videoDialog" @click="control()">确认</div> -->
@ -78,33 +85,33 @@
import Title from "./Title.vue"; import Title from "./Title.vue";
import List from "./List"; import List from "./List";
import ID from "./ID.vue"; import ID from "./ID.vue";
import {mapState} from "vuex"; import { mapState } from "vuex";
import _ from 'lodash' import _ from "lodash";
import { getDeviceInfo ,controlAir} from "@/api/echarts" import { getDeviceInfo, controlAir } from "@/api/echarts";
import AES from "@/plugins/cryptoJs/aes"; import AES from "@/plugins/cryptoJs/aes";
export default { export default {
name: "Kongtiao", name: "Kongtiao",
data() { data() {
return { return {
loading:false, loading: false,
diviceData:{}, diviceData: {},
XY: [0, 0], XY: [0, 0],
onOff:0, onOff: 0,
modal: 1, modal: 1,
feng: 1, feng: 1,
isOn: true, isOn: true,
temp: _.random(24, 28), temp: _.random(24, 28),
marks: { marks: {
16: '16°C', 16: "16°C",
26: { 26: {
style: { style: {
color: '#1989FA' color: "#1989FA",
}, },
label: this.$createElement('strong', '26%') label: this.$createElement("strong", "26%"),
}, },
30: '30°C', 30: "30°C",
}, },
areaName:'', areaName: "",
temperatureList: [ temperatureList: [
{ {
key: "室温", key: "室温",
@ -138,99 +145,120 @@ export default {
], ],
}; };
}, },
watch: { watch: {},
},
methods: { methods: {
getData(){ getData() {
console.log(this.$store.state.infoId) console.log(this.$store.state.infoId);
console.log(this.$store.state.infoName) console.log(this.$store.state.infoName);
let obj = { let obj = {
'threeCode': this.$store.state.infoName threeCode: this.$store.state.infoName,
} };
console.log(obj) console.log(obj);
let pram = { let pram = {
encryptedData: AES.encrypt(JSON.stringify(obj)) encryptedData: AES.encrypt(JSON.stringify(obj)),
} };
getDeviceInfo(pram).then(res => { getDeviceInfo(pram)
.then((res) => {
if (res.code == "200") { if (res.code == "200") {
console.log(res) console.log(res);
this.diviceData=res.data; this.diviceData = res.data;
this.areaName = this.diviceData.areaName; this.areaName = this.diviceData.areaName;
//判断设备类型 //判断设备类型
if(this.diviceData.parentTypeName == "空调设备"){ if (this.diviceData.parentTypeName == "空调设备") {
//获取点位信息数组，防止接口报错，天窗内容无法点击 //获取点位信息数组，防止接口报错，天窗内容无法点击
if(this.diviceData.deviceSignalList!=null && this.diviceData.deviceSignalList.length>0){ if (
this.diviceData.deviceSignalList.forEach((item,index)=>{ this.diviceData.deviceSignalList != null &&
console.log(item) this.diviceData.deviceSignalList.length > 0
if(item.signalName=="开关控制"){ ) {
if(item.signalValue=='0'){ this.diviceData.deviceSignalList.forEach((item, index) => {
console.log(item);
if (item.signalName == "开关控制") {
if (item.signalValue == "0") {
this.temperatureList[2].value = "未运行"; this.temperatureList[2].value = "未运行";
this.onOff = 0; this.onOff = 0;
} }
if(item.signalValue=='1'){ if (item.signalValue == "1") {
this.temperatureList[2].value = "运行中"; this.temperatureList[2].value = "运行中";
this.onOff = 1; this.onOff = 1;
} }
} }
if(item.signalName=="温度"){ if (item.signalName == "温度") {
this.temperatureList[0].value =item.signalValue +"°C" this.temperatureList[0].value = item.signalValue + "°C";
} }
if(item.signalName=="设定温度"){ if (item.signalName == "设定温度") {
this.temperatureList[1].value =item.signalValue +"°C" this.temperatureList[1].value = item.signalValue + "°C";
} }
//模式 //模式
if(item.signalName=="运行模式"){ if (item.signalName == "运行模式") {
if(item.signalValue=='1.0'){ if (item.signalValue == "1.0") {
this.cotrolList[0].value = "制冷"; this.cotrolList[0].value = "制冷";
this.modal = 1; this.modal = 1;
}else if(item.signalValue=='2.0'){ } else if (item.signalValue == "2.0") {
this.cotrolList[0].value = "制热" this.cotrolList[0].value = "制热";
this.modal = 2; this.modal = 2;
}else if(item.signalValue=='3.0'){ } else if (item.signalValue == "3.0") {
this.cotrolList[0].value = "除湿" this.cotrolList[0].value = "除湿";
this.modal = 3; this.modal = 3;
}else if(item.signalValue=='4.0'){ } else if (item.signalValue == "4.0") {
this.cotrolList[0].value = "送风" this.cotrolList[0].value = "送风";
this.modal = 4; this.modal = 4;
}else if(item.signalValue=='5.0'){ } else if (item.signalValue == "5.0") {
this.cotrolList[0].value = "自动" this.cotrolList[0].value = "自动";
this.modal = 5; this.modal = 5;
}else{ } else {
this.cotrolList[0].value = "--" this.cotrolList[0].value = "--";
} }
} }
//风速 //风速
if(item.signalName=="运行风速" && item.signalValue=='1.0'){ if (
this.cotrolList[1].value = "低风" item.signalName == "运行风速" &&
item.signalValue == "1.0"
) {
this.cotrolList[1].value = "低风";
this.feng = 1; this.feng = 1;
}else if (item.signalName=="运行风速" && item.signalValue=='2.0'){ } else if (
this.cotrolList[1].value = "中风" item.signalName == "运行风速" &&
item.signalValue == "2.0"
) {
this.cotrolList[1].value = "中风";
this.feng = 2; this.feng = 2;
}else if (item.signalName=="运行风速" && item.signalValue=='3.0'){ } else if (
this.cotrolList[1].value = "高风" item.signalName == "运行风速" &&
item.signalValue == "3.0"
) {
this.cotrolList[1].value = "高风";
this.feng = 3; this.feng = 3;
}else if (item.signalName=="运行风速" && item.signalValue=='4.0'){ } else if (
this.cotrolList[1].value = "自动" item.signalName == "运行风速" &&
item.signalValue == "4.0"
) {
this.cotrolList[1].value = "自动";
this.feng = 4; this.feng = 4;
}else{ } else {
this.cotrolList[1].value = "高风"; this.cotrolList[1].value = "高风";
} }
//控制模式 //控制模式
if(item.signalName=="控制" && item.signalValue=='1.0'){ if (item.signalName == "控制" && item.signalValue == "1.0") {
this.cotrolList[2].value = "无集中" this.cotrolList[2].value = "无集中";
}else if (item.signalName=="控制" && item.signalValue=='2.0'){ } else if (
this.cotrolList[2].value = "后入优先" item.signalName == "控制" &&
}else if (item.signalName=="控制" && item.signalValue=='3.0'){ item.signalValue == "2.0"
this.cotrolList[2].value = "集中" ) {
}else if (item.signalName=="控制" && item.signalValue=='4.0'){ this.cotrolList[2].value = "后入优先";
this.cotrolList[2].value = "强制" } else if (
}else{ item.signalName == "控制" &&
this.cotrolList[2].value = "--" item.signalValue == "3.0"
) {
this.cotrolList[2].value = "集中";
} else if (
item.signalName == "控制" &&
item.signalValue == "4.0"
) {
this.cotrolList[2].value = "强制";
} else {
this.cotrolList[2].value = "--";
} }
});
})
// //室温 // //室温
// this.temperatureList[0].value = this.diviceData.deviceSignalList[1].signalValue +"°C" // this.temperatureList[0].value = this.diviceData.deviceSignalList[1].signalValue +"°C"
// //设定温度 // //设定温度
@ -241,8 +269,7 @@ export default {
// }else{ // }else{
// this.temperatureList[2].value = "运行中" // this.temperatureList[2].value = "运行中"
// } // }
console.log(this.diviceData) console.log(this.diviceData);
// //模式 // //模式
// if(this.diviceData.deviceSignalList[7].signalValue=='1.0'){ // if(this.diviceData.deviceSignalList[7].signalValue=='1.0'){
@ -290,60 +317,62 @@ export default {
// this.$message({message: res.msg,type: "warning"}); // this.$message({message: res.msg,type: "warning"});
} }
}) })
.catch(err => { .catch((err) => {
console.log(err); console.log(err);
// setTimeout(() => {this.clearLoad();}, 300); // setTimeout(() => {this.clearLoad();}, 300);
}); });
}, },
control(){ control() {
console.log("control") this.$emit("close");
if (1 + 1 === 2) return;
console.log("control");
// deviceId // deviceId
console.log(this.onOff,"开关",'type') console.log(this.onOff, "开关", "type");
console.log(this.modal,"模式",'mode') console.log(this.modal, "模式", "mode");
console.log(this.feng,"风速",'speed') console.log(this.feng, "风速", "speed");
console.log(this.temp,"温度",'value') console.log(this.temp, "温度", "value");
let obj = { let obj = {
'deviceId': this.diviceData.deviceId, deviceId: this.diviceData.deviceId || "",
'type': this.onOff+'', type: this.onOff + "",
'mode': this.modal+'', mode: this.modal + "",
'speed': this.feng+'', speed: this.feng + "",
'value': this.temp+'', value: this.temp + "",
} };
console.log(obj) console.log(obj);
let pram = { let pram = {
encryptedData: AES.encrypt(JSON.stringify(obj)) encryptedData: AES.encrypt(JSON.stringify(obj)),
} };
this.loading = true this.loading = true;
controlAir(pram).then(res => { controlAir(pram)
.then((res) => {
if (res.code == "200") { if (res.code == "200") {
console.log(res) console.log(res);
this.loading = false this.loading = false;
this.$emit('close') this.$emit("close");
} else { } else {
this.loading = false; this.loading = false;
this.$message({message: res.msg,type: "warning"}); this.$message({ message: res.msg, type: "warning" });
} }
}) })
.catch(err => { .catch((err) => {
console.log(err); console.log(err);
// setTimeout(() => {this.clearLoad();}, 300); // setTimeout(() => {this.clearLoad();}, 300);
}); });
}, },
formatTooltip(val) { formatTooltip(val) {
return `${val}°C` return `${val}°C`;
} },
}, },
mounted() { mounted() {
this.XY = this.positionPOI|| [0, 0]; // this.XY = this.positionPOI || [300, 300];
this.getData() this.XY = ["50%", "50%"];
this.getData();
}, },
computed: { computed: {
...mapState(["positionPOI","infoId","infoName"]), ...mapState(["positionPOI", "infoId", "infoName"]),
},
beforeDestroy() {
}, },
beforeDestroy() {},
components: { components: {
Title, Title,
ID, ID,
@ -363,8 +392,8 @@ export default {
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
.areaName{ .areaName {
font-size: 0.35rem font-size: 0.35rem;
} }
.slider-box { .slider-box {
font-size: 0.25rem; font-size: 0.25rem;
@ -377,7 +406,6 @@ export default {
.txt { .txt {
@include MarginRight(20); @include MarginRight(20);
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.slider { .slider {
@ -387,7 +415,6 @@ export default {
.slider { .slider {
width: 100%; width: 100%;
&::v-deep .el-slider__runway { &::v-deep .el-slider__runway {
background-color: #666; background-color: #666;
@ -418,7 +445,7 @@ export default {
// padding: 0.1rem 0.3rem; // padding: 0.1rem 0.3rem;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
.txt{ .txt {
line-height: 0.6rem; line-height: 0.6rem;
} }
.box { .box {
@ -428,15 +455,13 @@ export default {
@include MarginLeft(15); @include MarginLeft(15);
margin-top: 0.15rem; margin-top: 0.15rem;
justify-content: space-between; justify-content: space-between;
} }
} }
} }
.el-radio :deep .el-radio__label { .el-radio :deep .el-radio__label {
font-size: 0.35rem; font-size: 0.35rem;
} }
.el-radio :deep .el-radio__inner { .el-radio :deep .el-radio__inner {
width: 0.3rem; width: 0.3rem;
height: 0.3rem; height: 0.3rem;
margin-bottom: 3px; margin-bottom: 3px;
@ -445,7 +470,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
//padding: 0 34px 0 16px; //padding: 0 34px 0 16px;
padding:0 0.3rem; padding: 0 0.3rem;
//margin-top: 13px; //margin-top: 13px;
@include MarginTop(13); @include MarginTop(13);
@ -458,7 +483,6 @@ export default {
} }
> div:last-child { > div:last-child {
@include FontSize(14); @include FontSize(14);
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
line-height: 0.35rem; line-height: 0.35rem;
@ -488,12 +512,12 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.controlBtn{ .controlBtn {
width: 3rem; width: 3rem;
// height: 0.8rem; // height: 0.8rem;
background-color: #00377A; background-color: #00377a;
border: 0; border: 0;
color: #FFF; color: #fff;
// border-radius: 0.5rem; // border-radius: 0.5rem;
// margin: 0.2rem auto; // margin: 0.2rem auto;
// text-align: center; // text-align: center;
@ -510,6 +534,5 @@ export default {
.popper__arrow { .popper__arrow {
display: none !important; display: none !important;
} }
} }
</style> </style>

43
src/components/player/player.vue
View File

@ -48,16 +48,27 @@ export default {
loadingText: "系统正在加载......", loadingText: "系统正在加载......",
reconnectionTimer: null, reconnectionTimer: null,
reconnectionCount: 0, reconnectionCount: 0,
timerNight: null,
}; };
}, },
mounted() { mounted() {
// this.initInterface(); // this.initInterface();
window.addEventListener("message", this.handleIframeMessage); // 监听子页面发送的消息 window.addEventListener("message", this.handleIframeMessage); // 监听子页面发送的消息
if (!this.timerNight) {
this.timerNight = setInterval(() => {
this.checkTime();
}, 1000 * 60 * 5);
}
}, },
// 在组件销毁前移除监听 // 在组件销毁前移除监听
beforeDestroy() { beforeDestroy() {
// 关闭定时器
if (this.timerNight) {
clearInterval(this.timerNight);
this.timerNight = null;
}
window.removeEventListener("message", this.handleIframeMessage); window.removeEventListener("message", this.handleIframeMessage);
}, },
destroyed() { destroyed() {
@ -256,15 +267,31 @@ export default {
// 监听子页面消息 // 监听子页面消息
handleIframeMessage(event) { handleIframeMessage(event) {
console.log(event, "event"); console.log(event, "event");
// if (event.origin !== "http://192.168.0.90:8888/#/fullScreen") { let message = "";
// return; // 如果不是预期的来源，忽略消息 let message2 = "";
// } if (event.data) {
message = JSON.parse(event.data);
message2 = JSON.parse(message);
}
const message = event.data; if (message2 && typeof message2 === "object") {
console.log( this.$store.commit("updateTagId", message2.type);
"Received message from iframe:接收的子页面传递的消息", this.$store.commit("infoNAME", message2.id);
message }
); },
// 添加一个定时器 判断当前时间是早上6点--18点 如果是则为白天模式 否则为夜间模式
checkTime() {
const now = new Date();
const hours = now.getHours();
console.log(hours, "hours");
if (hours >= 6 && hours <= 18) {
this.sendToIframe(false, "关闭夜间模式");
console.log(false, "关闭夜间模式");
} else {
this.sendToIframe(true, "打开夜间模式");
console.log(true, "打开夜间模式");
}
}, },
}, },