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

View File

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

View File

@ -48,16 +48,27 @@ export default {
loadingText: "系统正在加载......",
reconnectionTimer: null,
reconnectionCount: 0,
timerNight: null,
};
},
mounted() {
// this.initInterface();
window.addEventListener("message", this.handleIframeMessage); //
if (!this.timerNight) {
this.timerNight = setInterval(() => {
this.checkTime();
}, 1000 * 60 * 5);
}
},
//
beforeDestroy() {
//
if (this.timerNight) {
clearInterval(this.timerNight);
this.timerNight = null;
}
window.removeEventListener("message", this.handleIframeMessage);
},
destroyed() {
@ -256,15 +267,31 @@ export default {
//
handleIframeMessage(event) {
console.log(event, "event");
// if (event.origin !== "http://192.168.0.90:8888/#/fullScreen") {
// return; //
// }
let message = "";
let message2 = "";
if (event.data) {
message = JSON.parse(event.data);
message2 = JSON.parse(message);
}
const message = event.data;
console.log(
"Received message from iframe:接收的子页面传递的消息",
message
);
if (message2 && typeof message2 === "object") {
this.$store.commit("updateTagId", message2.type);
this.$store.commit("infoNAME", message2.id);
}
},
// 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, "打开夜间模式");
}
},
},