|
@@ -52,7 +52,7 @@
|
|
|
<div class="number">
|
|
|
<span
|
|
|
v-for="(item, index) in windGearArr"
|
|
|
- :class="airData.gear===item?'number-active':''"
|
|
|
+ :class="airData.gear === item ? 'number-active' : ''"
|
|
|
:key="'volume' + index"
|
|
|
>{{ item }}</span
|
|
|
>
|
|
@@ -60,14 +60,15 @@
|
|
|
<div class="text">风量调节</div>
|
|
|
</div>
|
|
|
<div class="volume-icon">
|
|
|
- <div class="icon-item">
|
|
|
+ <div class="icon-item" @click="changeZongAir('gear', 'windLow')">
|
|
|
<img :src="parseImgUrl('ipdImages', 'wind_small.png')" />
|
|
|
</div>
|
|
|
- <div class="icon-item">
|
|
|
+ <div class="icon-item" @click="changeZongAir('gear', 'windUp')">
|
|
|
<img :src="parseImgUrl('ipdImages', 'wind_big.png')" />
|
|
|
</div>
|
|
|
<div
|
|
|
class="icon-item"
|
|
|
+ @click="changeZongAir('gear', 'auto')"
|
|
|
:class="airData.isAutoGear ? 'active-color' : ''"
|
|
|
>
|
|
|
<span> AUTO</span>
|
|
@@ -78,18 +79,56 @@
|
|
|
<div class="air-control">
|
|
|
<div class="control-box">
|
|
|
<div class="volume-box">
|
|
|
- <div class="model">制冷</div>
|
|
|
+ <div class="model">
|
|
|
+ {{
|
|
|
+ airData.workMode == 1
|
|
|
+ ? "制冷"
|
|
|
+ : airData.workMode == 2
|
|
|
+ ? "制热"
|
|
|
+ : "通风"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
<div class="text">模式设定</div>
|
|
|
</div>
|
|
|
<div class="volume-icon">
|
|
|
- <div class="icon-item">
|
|
|
- <img :src="parseImgUrl('ipdImages', 'airsunblack.svg')" />
|
|
|
+ <div
|
|
|
+ class="icon-item"
|
|
|
+ :class="airData.workMode === 2 ? 'active-color' : ''"
|
|
|
+ @click="changeZongAir('mode', 2)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ airData.workMode === 2
|
|
|
+ ? parseImgUrl('ipdImages', 'airsunred.svg')
|
|
|
+ : parseImgUrl('ipdImages', 'airsunblack.svg')
|
|
|
+ "
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="icon-item">
|
|
|
- <img :src="parseImgUrl('ipdImages', 'aircoldblack.svg')" />
|
|
|
+ <div
|
|
|
+ class="icon-item"
|
|
|
+ :class="airData.workMode === 1 ? 'active-color' : ''"
|
|
|
+ @click="changeZongAir('mode', 1)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ airData.workMode === 1
|
|
|
+ ? parseImgUrl('ipdImages', 'aircoldblue.svg')
|
|
|
+ : parseImgUrl('ipdImages', 'aircoldblack.svg')
|
|
|
+ "
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="icon-item">
|
|
|
- <img :src="parseImgUrl('ipdImages', 'aircloudblack.svg')" />
|
|
|
+ <div
|
|
|
+ class="icon-item"
|
|
|
+ :class="airData.workMode === 3 ? 'active-color' : ''"
|
|
|
+ @click="changeZongAir('mode', 3)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ airData.workMode === 3
|
|
|
+ ? parseImgUrl('ipdImages', 'aircloudgreen.svg')
|
|
|
+ : parseImgUrl('ipdImages', 'aircloudblack.svg')
|
|
|
+ "
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -98,36 +137,13 @@
|
|
|
|
|
|
<!--子设备-->
|
|
|
<div class="air-child" v-if="showChild">
|
|
|
- <div class="child-control-box">
|
|
|
- <div class="open-title">
|
|
|
- <span>右侧空调</span>
|
|
|
- <Switch
|
|
|
- class="child-switch"
|
|
|
- inactive-color="rgba(196, 196, 196, 0.4)"
|
|
|
- size="25px"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="adjust-box">
|
|
|
- <div class="adjust-item">
|
|
|
- <van-icon name="arrow-up" class="adjust-icon" />
|
|
|
- <span class="adjust-text">24.5</span>
|
|
|
- <van-icon name="arrow-down" class="adjust-icon" />
|
|
|
- </div>
|
|
|
- <div class="adjust-item">
|
|
|
- <van-icon name="arrow-up" class="adjust-icon" />
|
|
|
- <span class="adjust-text">24.5</span>
|
|
|
- <van-icon name="arrow-down" class="adjust-icon" />
|
|
|
- </div>
|
|
|
- <div class="adjust-item">
|
|
|
- <van-icon name="arrow-up" class="adjust-icon" />
|
|
|
- <span class="adjust-text">24.5</span>
|
|
|
- <van-icon name="arrow-down" class="adjust-icon" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="child-control-box">
|
|
|
+ <div
|
|
|
+ class="child-control-box"
|
|
|
+ :key="'child' + index"
|
|
|
+ v-for="(childItem, index) in equipList"
|
|
|
+ >
|
|
|
<div class="open-title">
|
|
|
- <span>右侧空调右侧空调</span>
|
|
|
+ <span>{{ childItem.localName }}</span>
|
|
|
<Switch
|
|
|
class="child-switch"
|
|
|
inactive-color="rgba(196, 196, 196, 0.4)"
|
|
@@ -136,23 +152,42 @@
|
|
|
</div>
|
|
|
<div class="adjust-box">
|
|
|
<div class="adjust-item">
|
|
|
- <van-icon name="arrow-up" class="adjust-icon" />
|
|
|
- <span class="adjust-text">24.5</span>
|
|
|
+ <van-icon
|
|
|
+ name="arrow-up"
|
|
|
+ @click="changeItemAir('temp', childItem)"
|
|
|
+ class="adjust-icon"
|
|
|
+ />
|
|
|
+ <span class="adjust-text">{{ childItem.tempSet }}</span>
|
|
|
<van-icon name="arrow-down" class="adjust-icon" />
|
|
|
+ <span class="adjust-title">温度</span>
|
|
|
</div>
|
|
|
<div class="adjust-item">
|
|
|
<van-icon name="arrow-up" class="adjust-icon" />
|
|
|
- <span class="adjust-text">24.5</span>
|
|
|
+ <span class="adjust-text">{{ childItem.gear }}</span>
|
|
|
<van-icon name="arrow-down" class="adjust-icon" />
|
|
|
+ <span class="adjust-title">档位</span>
|
|
|
</div>
|
|
|
<div class="adjust-item">
|
|
|
<van-icon name="arrow-up" class="adjust-icon" />
|
|
|
- <span class="adjust-text">24.5</span>
|
|
|
+ <span class="adjust-text">
|
|
|
+ {{
|
|
|
+ childItem.workMode == 1
|
|
|
+ ? "制冷"
|
|
|
+ : childItem.workMode == 2
|
|
|
+ ? "制热"
|
|
|
+ : "通风"
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
<van-icon name="arrow-down" class="adjust-icon" />
|
|
|
+ <span class="adjust-title">模式</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- v-if="cotrolLoading" -->
|
|
|
+ <!-- <div class="loading-box" v-if="cotrolLoading">
|
|
|
+ <van-loading style="padding-top: 20px" />
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -169,9 +204,9 @@ import {
|
|
|
onBeforeUnmount,
|
|
|
nextTick,
|
|
|
} from "vue";
|
|
|
-import { Switch, Dialog, Loading, Toast } from "vant";
|
|
|
+import { Switch, Dialog, Toast } from "vant";
|
|
|
import { swiper } from "@/utils/swiper";
|
|
|
-import { querySpaceConditioners } from "@/apis/envmonitor";
|
|
|
+import { querySpaceConditioners, setSpaceCondtioners } from "@/apis/envmonitor";
|
|
|
import { parseImgUrl, setQueryConfig } from "@/utils";
|
|
|
import any = jasmine.any;
|
|
|
|
|
@@ -212,7 +247,6 @@ export default defineComponent({
|
|
|
components: {
|
|
|
Switch,
|
|
|
[Dialog.Component.name]: Dialog.Component,
|
|
|
- Loading,
|
|
|
},
|
|
|
setup(props, contx) {
|
|
|
const propsVal = props;
|
|
@@ -226,6 +260,8 @@ export default defineComponent({
|
|
|
maxTempSet: 32,
|
|
|
minTempSet: 16,
|
|
|
isAutoGear: 0,
|
|
|
+ workMode: 0, //1=cold(制冷);2=hot(制热);3=wind(通风)
|
|
|
+ gear: 0, // 风量
|
|
|
isOpen: false, // 空调开关 true 是开
|
|
|
};
|
|
|
const feedbackTimer: any = null;
|
|
@@ -233,7 +269,11 @@ export default defineComponent({
|
|
|
const domAirOpeen: any = false;
|
|
|
let realTemp: any = 16;
|
|
|
let windGearArr: any = [0, 1, 2, 3];
|
|
|
+ let equipList: any = [];
|
|
|
const proxyData = reactive({
|
|
|
+ equipList: equipList,
|
|
|
+ cotrolLoading: false,
|
|
|
+ loadingTimer: 0,
|
|
|
airTemp: 0, // 设备真实温度
|
|
|
loadingAir: false,
|
|
|
windGearArr: windGearArr, // 风量3/5个档位
|
|
@@ -299,7 +339,9 @@ export default defineComponent({
|
|
|
: parseInt(barBox.style.left);
|
|
|
isMove = false;
|
|
|
});
|
|
|
- handBox.addEventListener("touchend", function (e: any) {});
|
|
|
+ handBox.addEventListener("touchend", function (e: any) {
|
|
|
+ proxyData.changeZongAir("temp", proxyData.realTemp);
|
|
|
+ });
|
|
|
swiper(handBox, {
|
|
|
swipeLeft: function (e: any) {
|
|
|
barLeft = Math.abs(barLeft);
|
|
@@ -351,14 +393,143 @@ export default defineComponent({
|
|
|
proxyData.getAirInfo();
|
|
|
}, timerLong);
|
|
|
},
|
|
|
+ // 计算loading时间
|
|
|
+ setLoadingNumber() {
|
|
|
+ let timer: any = setInterval(() => {
|
|
|
+ proxyData.loadingTimer++;
|
|
|
+ if (proxyData.loadingTimer > 15) {
|
|
|
+ clearInterval(timer);
|
|
|
+ proxyData.loadingAir = false;
|
|
|
+ proxyData.getAirInfoToTimer(3000);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ // 格式化空调数据
|
|
|
+ formatAirData(btnType: any, text: any) {
|
|
|
+ let obj: any = {};
|
|
|
+ if (btnType == "temp") {
|
|
|
+ obj.codeKey = "tempSetCode";
|
|
|
+ obj.value = text;
|
|
|
+ }
|
|
|
+ if (btnType == "gear" && text == "windLow") {
|
|
|
+ //降挡
|
|
|
+ if (proxyData.airData.gear > 1) {
|
|
|
+ proxyData.airData.gear--;
|
|
|
+ proxyData.airData.isAutoGear = 0;
|
|
|
+ obj.value = proxyData.airData.gear;
|
|
|
+ obj.codeKey = "gearCode";
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (btnType == "gear" && text == "windUp") {
|
|
|
+ //升档
|
|
|
+ if (proxyData.airData.gear < 3) {
|
|
|
+ proxyData.airData.gear++;
|
|
|
+ proxyData.airData.isAutoGear = 0;
|
|
|
+ obj.value = proxyData.airData.gear;
|
|
|
+ obj.codeKey = "gearCode";
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (btnType == "gear" && text == "auto") {
|
|
|
+ proxyData.airData.isAutoGear == 1 ? 0 : 1;
|
|
|
+ obj.value = proxyData.airData.isAutoGear ? 4 : proxyData.airData.gear;
|
|
|
+ obj.codeKey = "gearCode";
|
|
|
+ }
|
|
|
+ if (btnType == "mode") {
|
|
|
+ proxyData.airData.workMode = text;
|
|
|
+ obj.codeKey = "modeSetCode";
|
|
|
+ obj.value = text;
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 加载loading
|
|
|
+ */
|
|
|
+ loadingStart() {
|
|
|
+ proxyData.cotrolLoading = true;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 结束
|
|
|
+ */
|
|
|
+ loadinngEnd() {
|
|
|
+ proxyData.cotrolLoading = false;
|
|
|
+ },
|
|
|
+ // 子设备降低温度
|
|
|
+ changeItemAir(btnType: any, childItem: any) {
|
|
|
+ proxyData.loadingStart();
|
|
|
+ if (btnType === "temp") {
|
|
|
+ if (childItem.tempSet <= proxyData.airData.minTempSet) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ childItem.tempSet = childItem.tempSet - 0.5;
|
|
|
+ let obj: any = {
|
|
|
+ id: childItem.id, //类型:String 必有字段 备注:设备id
|
|
|
+ code: childItem.tempSetCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
|
|
|
+ value: childItem.tempSet, //类型:String 必有字段 备注:值 0
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (!proxyData.cotrolLoading) {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 改变设备状态
|
|
|
+ setSpaceCondtioners(data: any) {
|
|
|
+ setSpaceCondtioners(data)
|
|
|
+ .then((res) => {
|
|
|
+ // proxyData.setLoadingNumber();
|
|
|
+ proxyData.loadinngEnd();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // proxyData.setLoadingNumber();
|
|
|
+ proxyData.loadinngEnd();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 改变空调状态
|
|
|
+ changeZongAir(btnType: any, text: any) {
|
|
|
+ if (!this.airData.isOpen) return;
|
|
|
+ let equpObj: any = proxyData.formatAirData(btnType, text);
|
|
|
+ if (equpObj.value) {
|
|
|
+ let data: any = [];
|
|
|
+ proxyData.equipList.map((item: any) => {
|
|
|
+ let obj: any = {
|
|
|
+ id: item.id, //类型:String 必有字段 备注:设备id
|
|
|
+ code: item[equpObj.codeKey], //类型:String 必有字段 备注:编码 EquipSwtichSet
|
|
|
+ value: equpObj.value, //类型:String 必有字段 备注:值 0
|
|
|
+ };
|
|
|
+ data.push(obj);
|
|
|
+ });
|
|
|
+ console.log("设备数据处理---");
|
|
|
+ console.log(data);
|
|
|
+ if (!proxyData.cotrolLoading) {
|
|
|
+ proxyData.loadingStart();
|
|
|
+ // 调整设备状态
|
|
|
+ proxyData.setSpaceCondtioners(data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
// 总控制改变空调状态
|
|
|
airChange() {
|
|
|
// 先不更新状态等确认框弹出后再更新状
|
|
|
- if (proxyData.userIsControl) {
|
|
|
- } else {
|
|
|
- Toast("您没有当前空间的控制权限!");
|
|
|
- }
|
|
|
+ proxyData.airData.isOpen = !proxyData.airData.isOpen;
|
|
|
+ proxyData.loadingAir = true;
|
|
|
+ proxyData.loadingTimer = 0;
|
|
|
+ let data: any = [];
|
|
|
+ proxyData.equipList.map((item: any) => {
|
|
|
+ let obj: any = {
|
|
|
+ id: item.id, //类型:String 必有字段 备注:设备id
|
|
|
+ code: item.switchCode, //类型:String 必有字段 备注:编码 EquipSwtichSet
|
|
|
+ value: proxyData.airData.isOpen ? "1" : "0", //类型:String 必有字段 备注:值 0
|
|
|
+ };
|
|
|
+ data.push(obj);
|
|
|
+ });
|
|
|
+ clearTimeout(proxyData.airTimer);
|
|
|
+ proxyData.setLoadingNumber();
|
|
|
+ // 设备状态处理
|
|
|
+ proxyData.setSpaceCondtioners(data);
|
|
|
},
|
|
|
+
|
|
|
// 空调信息airTemp
|
|
|
getAirInfo() {
|
|
|
const paramObj = {
|
|
@@ -379,6 +550,9 @@ export default defineComponent({
|
|
|
proxyData.airData.minTempSet = data.minTempSet;
|
|
|
proxyData.airData.isOpen = data.runStatus ? true : false;
|
|
|
proxyData.airData.isAutoGear = data.isAutoGear;
|
|
|
+ proxyData.airData.gear = data.gear;
|
|
|
+ proxyData.airData.workMode = data.workMode;
|
|
|
+ proxyData.equipList = data.equipList;
|
|
|
// 设置当前温度的位置
|
|
|
proxyData.setBarNowPerstion();
|
|
|
if (proxyData.airData.isOpen) {
|
|
@@ -432,11 +606,26 @@ export default defineComponent({
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.air {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
|
|
|
border-radius: 25px;
|
|
|
margin: 15px 0px;
|
|
|
+ .loading-box {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(#000000, 0.3);
|
|
|
+ box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07),
|
|
|
+ 0px 4px 10px rgba(0, 0, 0, 0.05);
|
|
|
+ text-align: center;
|
|
|
+ z-index: 999;
|
|
|
+ // line-height: 50px;
|
|
|
+ }
|
|
|
.active-color {
|
|
|
background: $elActiveColor !important;
|
|
|
span {
|
|
@@ -484,7 +673,7 @@ export default defineComponent({
|
|
|
font-size: 19px;
|
|
|
.adjust-item {
|
|
|
// flex: 1;
|
|
|
- width: 30px;
|
|
|
+ width: 40px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
@@ -497,6 +686,10 @@ export default defineComponent({
|
|
|
flex: 1;
|
|
|
padding: 20px 0;
|
|
|
}
|
|
|
+ .adjust-title {
|
|
|
+ padding-top: 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -608,9 +801,18 @@ export default defineComponent({
|
|
|
.number {
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
color: #c4c4c4;
|
|
|
padding-right: 5px;
|
|
|
}
|
|
|
+ .number-active {
|
|
|
+ font-family: "Montserrat";
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 22px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #4d5262 !important;
|
|
|
+ }
|
|
|
}
|
|
|
.model {
|
|
|
font-size: 14px;
|
|
@@ -725,6 +927,14 @@ export default defineComponent({
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.air {
|
|
|
+ .loading-box {
|
|
|
+ .van-loading {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
.van-loading__spinner {
|
|
|
color: $elActiveColor !important;
|
|
|
}
|