add:通风系统数据引入/素材样式修改/引入组件改造
This commit is contained in:
chenpingsen
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.6 KiB |
@@ -1,5 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.35638427734375" height="14.547119140625" viewBox="0 0 16.35638427734375 14.547119140625" fill="none">
|
||||
<path d="M12.6691 13.2533L12.1257 14.1938C11.9846 14.4383 11.672 14.522 11.4275 14.3809C11.183 14.2397 11.0993 13.9271 11.2404 13.6827L11.6994 12.8878L10.6976 12.8878C10.4153 12.8878 10.1865 12.659 10.1865 12.3767C10.1865 12.0944 10.4153 11.8656 10.6976 11.8656L11.8681 11.8656L11.2404 10.7789C11.0993 10.5344 11.183 10.2218 11.4275 10.0807C11.672 9.93953 11.9846 10.0233 12.1257 10.2678L12.6691 11.2083L13.2119 10.2678C13.353 10.0233 13.6656 9.93953 13.9101 10.0807C14.1546 10.2218 14.2383 10.5344 14.0972 10.7789L13.47 11.8656L14.6405 11.8656C14.9228 11.8656 15.1517 12.0944 15.1517 12.3767C15.1517 12.659 14.9228 12.8878 14.6405 12.8878L13.6387 12.8878L14.0972 13.6827C14.2384 13.9271 14.1546 14.2397 13.9101 14.3809C13.6656 14.522 13.353 14.4383 13.2119 14.1938L12.6691 13.2533ZM0.511139 1.52588e-05L15.8453 1.52588e-05C16.1276 1.52588e-05 16.3564 0.228851 16.3564 0.511139L16.3564 7.15594C16.3564 8.00282 15.6699 8.68936 14.823 8.68936L1.53341 8.68936C0.686531 8.68936 0 8.00282 0 7.15594L0 0.511139C0 0.228851 0.228844 0 0.511131 0L0.511139 1.52588e-05ZM2.04456 6.13367C1.76225 6.13367 1.53341 6.36252 1.53341 6.64481C1.53341 6.92709 1.76225 7.15594 2.04456 7.15594L14.3119 7.15594C14.5942 7.15594 14.823 6.92709 14.823 6.64481C14.823 6.36252 14.5942 6.13367 14.3119 6.13367L2.04456 6.13367ZM4.65442 10.0761C4.73544 9.80563 5.02035 9.65208 5.29079 9.73311C5.56123 9.81412 5.71478 10.099 5.63376 10.3695L5.43952 11.0171C5.35449 11.301 5.39153 11.6075 5.54175 11.863C5.83617 12.3634 5.90977 12.963 5.7457 13.5196L5.55044 14.1805C5.4706 14.4513 5.18634 14.606 4.91559 14.5261C4.64484 14.4462 4.49013 14.1619 4.57002 13.8912L4.76482 13.2303C4.84916 12.9451 4.81133 12.6374 4.66055 12.3818C4.36599 11.8811 4.29338 11.2802 4.46018 10.7237L4.65442 10.0761ZM7.72125 10.0761C7.80227 9.80563 8.08718 9.65208 8.35762 9.73311C8.62806 9.81412 8.7816 10.099 8.7006 10.3695L8.50636 11.0171C8.42132 11.301 8.45836 11.6075 8.60859 11.863C8.903 12.3634 8.9766 12.963 8.81253 13.5196L8.61728 14.1805C8.53743 14.4513 8.25317 14.606 7.98243 14.5261C7.71167 14.4462 7.55696 14.1619 7.63685 13.8912L7.83165 13.2303C7.916 12.9451 7.87817 12.6374 7.72738 12.3818C7.43282 11.8811 7.36021 11.2802 7.52702 10.7237L7.72125 10.0761ZM1.5876 10.0761C1.66862 9.80563 1.95353 9.65208 2.22397 9.73311C2.49441 9.81412 2.64796 10.099 2.56694 10.3695L2.3727 11.0171C2.28767 11.301 2.32471 11.6075 2.47494 11.863C2.76935 12.3634 2.84296 12.963 2.67888 13.5196L2.48363 14.1805C2.40379 14.4513 2.11952 14.606 1.84877 14.5261C1.57803 14.4462 1.42331 14.1619 1.50321 13.8912L1.69801 13.2303C1.78234 12.9451 1.74452 12.6374 1.59373 12.3818C1.29917 11.8811 1.22656 11.2802 1.39336 10.7237L1.5876 10.0761Z" fill="url(#linear_fill_160_5944)" >
|
||||
<path d="M12.6691 13.2533L12.1257 14.1938C11.9846 14.4383 11.672 14.522 11.4275 14.3809C11.183 14.2397 11.0993 13.9271 11.2404 13.6827L11.6994 12.8878L10.6976 12.8878C10.4153 12.8878 10.1865 12.659 10.1865 12.3767C10.1865 12.0944 10.4153 11.8656 10.6976 11.8656L11.8681 11.8656L11.2404 10.7789C11.0993 10.5344 11.183 10.2218 11.4275 10.0807C11.672 9.93953 11.9846 10.0233 12.1257 10.2678L12.6691 11.2083L13.2119 10.2678C13.353 10.0233 13.6656 9.93953 13.9101 10.0807C14.1546 10.2218 14.2383 10.5344 14.0972 10.7789L13.47 11.8656L14.6405 11.8656C14.9228 11.8656 15.1517 12.0944 15.1517 12.3767C15.1517 12.659 14.9228 12.8878 14.6405 12.8878L13.6387 12.8878L14.0972 13.6827C14.2384 13.9271 14.1546 14.2397 13.9101 14.3809C13.6656 14.522 13.353 14.4383 13.2119 14.1938L12.6691 13.2533ZM0.511139 1.52588e-05L15.8453 1.52588e-05C16.1276 1.52588e-05 16.3564 0.228851 16.3564 0.511139L16.3564 7.15594C16.3564 8.00282 15.6699 8.68936 14.823 8.68936L1.53341 8.68936C0.686531 8.68936 0 8.00282 0 7.15594L0 0.511139C0 0.228851 0.228844 0 0.511131 0L0.511139 1.52588e-05ZM2.04456 6.13367C1.76225 6.13367 1.53341 6.36252 1.53341 6.64481C1.53341 6.92709 1.76225 7.15594 2.04456 7.15594L14.3119 7.15594C14.5942 7.15594 14.823 6.92709 14.823 6.64481C14.823 6.36252 14.5942 6.13367 14.3119 6.13367L2.04456 6.13367ZM4.65442 10.0761C4.73544 9.80563 5.02035 9.65208 5.29079 9.73311C5.56123 9.81412 5.71478 10.099 5.63376 10.3695L5.43952 11.0171C5.35449 11.301 5.39153 11.6075 5.54175 11.863C5.83617 12.3634 5.90977 12.963 5.7457 13.5196L5.55044 14.1805C5.4706 14.4513 5.18634 14.606 4.91559 14.5261C4.64484 14.4462 4.49013 14.1619 4.57002 13.8912L4.76482 13.2303C4.84916 12.9451 4.81133 12.6374 4.66055 12.3818C4.36599 11.8811 4.29338 11.2802 4.46018 10.7237L4.65442 10.0761ZM7.72125 10.0761C7.80227 9.80563 8.08718 9.65208 8.35762 9.73311C8.62806 9.81412 8.7816 10.099 8.7006 10.3695L8.50636 11.0171C8.42132 11.301 8.45836 11.6075 8.60859 11.863C8.903 12.3634 8.9766 12.963 8.81253 13.5196L8.61728 14.1805C8.53743 14.4513 8.25317 14.606 7.98243 14.5261C7.71167 14.4462 7.55696 14.1619 7.63685 13.8912L7.83165 13.2303C7.916 12.9451 7.87817 12.6374 7.72738 12.3818C7.43282 11.8811 7.36021 11.2802 7.52702 10.7237L7.72125 10.0761ZM1.5876 10.0761C1.66862 9.80563 1.95353 9.65208 2.22397 9.73311C2.49441 9.81412 2.64796 10.099 2.56694 10.3695L2.3727 11.0171C2.28767 11.301 2.32471 11.6075 2.47494 11.863C2.76935 12.3634 2.84296 12.963 2.67888 13.5196L2.48363 14.1805C2.40379 14.4513 2.11952 14.606 1.84877 14.5261C1.57803 14.4462 1.42331 14.1619 1.50321 13.8912L1.69801 13.2303C1.78234 12.9451 1.74452 12.6374 1.59373 12.3818C1.29917 11.8811 1.22656 11.2802 1.39336 10.7237L1.5876 10.0761Z" fill="#55D1FF" >
|
||||
</path>
|
||||
<defs>
|
||||
<linearGradient id="linear_fill_160_5944" x1="8.178192138671875" y1="0" x2="8.178192138671875" y2="14.547119140625" gradientUnits="userSpaceOnUse">
|
||||
|
||||
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.1 KiB |
@@ -1,86 +1,106 @@
|
||||
<template>
|
||||
<div class="box-model">
|
||||
<div class="box-model-title title">
|
||||
{{ dataSource.title }}
|
||||
</div>
|
||||
<div class="box-model-bottom">
|
||||
{{ dataSource.deviceGroupName ? dataSource.deviceGroupName : '--' }} </div
|
||||
><div class="box-model-bottom">
|
||||
<div class="box-model-item">
|
||||
<div style="width: 100%; height: 50%">
|
||||
<img width="40" src="../../image/ventilationSystem/state-success.png" />
|
||||
<!-- 正常=0 故障=1 维修=2 告警=3 -->
|
||||
<div>
|
||||
<div class="box-item">
|
||||
<img v-if="runStatus.value == 0" src="../../image/liftState/state-normal.svg" alt="" />
|
||||
<img v-if="runStatus.value == 1" src="../../image/liftState/state-fault.svg" alt="" />
|
||||
<img v-if="runStatus.value == 2" src="../../image/liftState/state-repair.svg" alt="" />
|
||||
<img v-if="runStatus.value == 3" src="../../image/liftState/state-alarm.svg" alt="" />
|
||||
</div>
|
||||
<!--正常 故障 维修 告警 -->
|
||||
<span
|
||||
:style="{
|
||||
color: {
|
||||
'1': '#0dffff',
|
||||
'2': 'rgba(255, 118, 54, 1)',
|
||||
'3': 'rgba(255, 188, 70, 1)',
|
||||
'4': 'rgba(243, 97, 99, 1)',
|
||||
}[1],
|
||||
}">
|
||||
正常
|
||||
</span>
|
||||
</div>
|
||||
<span v-if="runStatus.value == 0" style="color: var(--on)">{{ runStatus.label }}</span>
|
||||
<span v-if="runStatus.value == 1" style="color: var(--fault)">{{ runStatus.label }}</span>
|
||||
<span v-if="runStatus.value == 2" style="color: var(--pause)">{{ runStatus.label }}</span>
|
||||
<span v-if="runStatus.value == 3" style="color: var(--stop)">{{ runStatus.label }}</span>
|
||||
</div>
|
||||
<div v-if="dataSource.type === 'fan'" class="box-model-item">
|
||||
<div style="width: 100%; height: 50%">
|
||||
<img width="40" src="../../image/ventilationSystem/highSpeed.png" />
|
||||
<!-- 关闭=0 低速=1 中速=2 高速=3 -->
|
||||
<div>
|
||||
<div class="box-item">
|
||||
<img v-if="runMode.value == 0" src="../../image/liftState/speed-shut.svg" alt="" />
|
||||
<img v-if="runMode.value == 1" src="../../image/liftState/speed-low.svg" alt="" />
|
||||
<img v-if="runMode.value == 2" src="../../image/liftState/speed-middle.svg" alt="" />
|
||||
<img v-if="runMode.value == 3" src="../../image/liftState/speed-high.svg" alt="" />
|
||||
</div>
|
||||
<!-- 低速 中速 高速 关闭 -->
|
||||
<span
|
||||
:style="{
|
||||
color: [
|
||||
'rgba(85, 209, 255, 1)',
|
||||
'rgba(0, 144, 255, 1)',
|
||||
'rgba(87, 87, 255, 1)',
|
||||
'rgba(191, 205, 226, 1)',
|
||||
][2],
|
||||
fontSize: '12px',
|
||||
}">
|
||||
高速启动</span
|
||||
>
|
||||
</div>
|
||||
<span v-if="runMode.value == 0" style="color: var(--shut)">{{ runMode.label }}</span>
|
||||
<span v-if="runMode.value == 1" style="color: var(--low)">{{ runMode.label }}</span>
|
||||
<span v-if="runMode.value == 2" style="color: var(--middle)">{{ runMode.label }}</span>
|
||||
<span v-if="runMode.value == 3" style="color: var(--high)">{{ runMode.label }}</span>
|
||||
</div>
|
||||
<div v-if="dataSource.type !== 'fan'" class="box-model-item">
|
||||
<div style="width: 100%; height: 50%">
|
||||
<img width="40" src="../../image/ventilationSystem/state-open.png" />
|
||||
<!-- 开启=1 关闭=0 -->
|
||||
<div>
|
||||
<div class="box-item">
|
||||
<img v-if="switchStatus.value == 0" src="../../image/liftState/switch-off.svg" alt="" />
|
||||
<img v-if="switchStatus.value == 1" src="../../image/liftState/switch-on.svg" alt="" />
|
||||
</div>
|
||||
<!-- 开启 关闭 -->
|
||||
<span
|
||||
:style="{
|
||||
color: ['rgba(0, 255, 210, 1)', 'rgba(191, 205, 226, 1)'][0],
|
||||
fontSize: '12px',
|
||||
}">
|
||||
开启</span
|
||||
>
|
||||
</div>
|
||||
<span v-if="switchStatus.value == 0" style="color: var(--shut)">{{
|
||||
switchStatus.label
|
||||
}}</span>
|
||||
<span v-if="switchStatus.value == 1" style="color: var(--low)">{{
|
||||
switchStatus.label
|
||||
}}</span>
|
||||
</div>
|
||||
<div v-if="dataSource.type === 'airCurtain'" class="box-model-item">
|
||||
<div style="width: 100%; height: 50%">
|
||||
<img width="40" src="../../image/ventilationSystem/hotAir.png" />
|
||||
<div>
|
||||
<!-- 关闭=0 冷风性能=1 热风性能=2 冷风节能=3 热风节能=4 -->
|
||||
<div class="box-item">
|
||||
<img
|
||||
v-if="runMode.value == 1 || runMode.value == 3"
|
||||
src="../../image/liftState/wind-cold.svg"
|
||||
alt="" />
|
||||
<img
|
||||
v-if="runMode.value == 2 || runMode.value == 4"
|
||||
src="../../image/liftState/wind-hot.svg"
|
||||
alt="" />
|
||||
<img v-if="runMode.value == 0" src="../../image/liftState/switch-on.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 冷风 热风 -->
|
||||
<span
|
||||
:style="{
|
||||
color: ['rgba(85, 209, 255, 1)', 'rgba(252, 247, 112, 1)'][1],
|
||||
fontSize: '12px',
|
||||
}">
|
||||
热风
|
||||
</span>
|
||||
<span v-if="runMode.value == 1 || runMode.value == 3" style="color: var(--cold)">{{
|
||||
runMode.label
|
||||
}}</span>
|
||||
<span v-if="runMode.value == 2 || runMode.value == 4" style="color: var(--hot)">{{
|
||||
runMode.label
|
||||
}}</span>
|
||||
<span v-if="runMode.value == 0" style="color: var(--shut)">{{ runMode.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, computed } from 'vue';
|
||||
const props = defineProps({
|
||||
dataSource: {
|
||||
type: Object,
|
||||
default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性
|
||||
default: () => ({}), // 假设默认值还包括number属性
|
||||
},
|
||||
});
|
||||
//
|
||||
const runStatus = computed(() => {
|
||||
return props.dataSource.record.runStatus;
|
||||
});
|
||||
const runMode = computed(() => {
|
||||
return props.dataSource.record.runMode;
|
||||
});
|
||||
const switchStatus = computed(() => {
|
||||
return props.dataSource.record.switchStatus;
|
||||
});
|
||||
onMounted(() => {
|
||||
console.log(props.dataSource, 'pppppppppppp');
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box-model {
|
||||
position: relative;
|
||||
min-width: 162px;
|
||||
height: 110px;
|
||||
// height: 100px;
|
||||
background: inherit;
|
||||
background-color: rgba(2, 29, 71, 0.9);
|
||||
box-sizing: border-box;
|
||||
@@ -89,16 +109,18 @@
|
||||
border-color: rgba(13, 255, 255, 1);
|
||||
border-radius: 8px;
|
||||
z-index: 99;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
position: relative;
|
||||
padding-left: 9px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 90%;
|
||||
transform: translateY(-50%);
|
||||
height: 10px;
|
||||
left: 5px;
|
||||
top: 10px;
|
||||
height: 12px;
|
||||
width: 2.5px;
|
||||
border-radius: 1px;
|
||||
background-color: #0dffff;
|
||||
@@ -106,28 +128,43 @@
|
||||
}
|
||||
.box-model-title {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
padding-left: 12px;
|
||||
font-size: 12px;
|
||||
color: #0dffff;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
.box-model-bottom {
|
||||
width: auto;
|
||||
height: 70px;
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
}
|
||||
.box-model-item {
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
width: 70px;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
text-align: center; /* 文字水平居中 */
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
.box-item {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: inline-block;
|
||||
background-image: url(../../image/box.svg);
|
||||
background-size: 125% 125%;
|
||||
background-position: -5px -5px;
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
span {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
<template>
|
||||
<a-spin :spinning="isLoading">
|
||||
<!-- 排风扇 -->
|
||||
<!-- 设备部分 -->
|
||||
<div>
|
||||
<div class="circuit-area">
|
||||
<div class="circuit-tab"></div>
|
||||
<span class="circuit-text">排风扇</span>
|
||||
<span class="circuit-text">{{ props.type }}</span>
|
||||
<div class="btn2">
|
||||
<a-badge :offset="[-10, 2]" :count="lockList.length">
|
||||
<button
|
||||
class="openPlan"
|
||||
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
|
||||
@click="togglePlan2">
|
||||
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
|
||||
</button>
|
||||
</a-badge>
|
||||
<a-switch
|
||||
v-model:checked="selectAllCheckbox"
|
||||
:disabled="singleSelection"
|
||||
@@ -34,10 +35,12 @@
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<stop-outlined v-if="button.ctrlStatus" />
|
||||
<div v-if="button.lockStatus" class="btn-back">
|
||||
<stop-outlined />
|
||||
</div>
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px" v-if="limitedButtons2.length > 0">
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -48,154 +51,717 @@
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<stop-outlined v-if="button.ctrlStatus" />
|
||||
<div v-if="button.lockStatus" class="btn-back">
|
||||
<stop-outlined />
|
||||
</div>
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px" v-if="buttons2.length > 0">
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 控制模式部分 -->
|
||||
<div>
|
||||
<div v-show="thisButton2.dataCode">
|
||||
<div class="control-area">
|
||||
<div class="control-tab"></div>
|
||||
<span class="control-text"> 控制模式 </span>
|
||||
</div>
|
||||
<!-- 控制模式按钮部分 -->
|
||||
<div class="control-mode-btn-area" v-show="thisButton2.code">
|
||||
<div class="control-mode-btn-area">
|
||||
<button
|
||||
v-for="(button3, index) in controlMode"
|
||||
v-for="(button3, index) in thisButton2.childList"
|
||||
:key="index"
|
||||
class="btn"
|
||||
:disabled="button3.value != 3"
|
||||
:class="{ selected: thisButton2.mode.value == button3.value }"
|
||||
:class="{ selected: button3.selectAble }"
|
||||
@click="selectButton3(button3)">
|
||||
{{ button3.label }}
|
||||
{{ button3.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 控制场景 -->
|
||||
<div>
|
||||
<div class="control-area">
|
||||
<div class="control-tab"></div>
|
||||
<span class="control-text"> 控制场景 </span>
|
||||
<!-- 控制场景部分 -->
|
||||
<div v-show="thisButton2.dataCode">
|
||||
<div class="control-scene-area">
|
||||
<div class="control-scene-tab"></div>
|
||||
<span class="control-scene-text"> 控制场景 </span>
|
||||
<div v-if="!singleSelection" style="flex: 1; color: red; text-align: right"
|
||||
>多选模式下会修改当前选中的所有回路</div
|
||||
>
|
||||
</div>
|
||||
<!-- 控制模式按钮部分 -->
|
||||
<div class="control-mode-btn-area" v-show="thisButton2.code">
|
||||
<!-- 控制场景按钮部分 -->
|
||||
<div class="control-scene-btn-area">
|
||||
<button
|
||||
v-for="(button3, index) in controlMode"
|
||||
v-for="(button4, index) in thisButton3.childList"
|
||||
:key="index"
|
||||
class="btn"
|
||||
:disabled="button3.value != 3"
|
||||
:class="{ selected: thisButton2.mode.value == button3.value }"
|
||||
@click="selectButton3(button3)">
|
||||
{{ button3.label }}
|
||||
:class="{ btn: true, selected: button4.executeStatus.value != 0 }"
|
||||
@click="selectButton4(button4)"
|
||||
>{{ button4.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-add">
|
||||
<button class="cancel" @click="addModal">刷新</button>
|
||||
<button class="add" @click="addModal">执行</button>
|
||||
<!-- 底部按钮区 -->
|
||||
<div class="bottom">
|
||||
<a-badge :offset="[-10, 2]" :count="changeList.length">
|
||||
<a-popconfirm
|
||||
title="刷新将会取消已作出的修改"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="refresh(false)"
|
||||
@cancel="changeCancel">
|
||||
<button class="flushed">刷新</button>
|
||||
</a-popconfirm>
|
||||
</a-badge>
|
||||
<button class="execute" @click="showModal">执行</button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
|
||||
const isLoading = ref(false);
|
||||
<!-- 点击执行时的弹出框 -->
|
||||
<div class="out-dialog" v-if="executeVisible">
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="div-operation"></div>
|
||||
<span class="text-operation">变更内容 </span>
|
||||
</div>
|
||||
<div class="j-box" v-for="item in diffList" :key="item.id">
|
||||
<div class="journal" style="margin-top: 20px">
|
||||
<div class="imgText">
|
||||
<div class="zjzm">
|
||||
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />
|
||||
<span
|
||||
class="title-text"
|
||||
style="font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 1)"
|
||||
>{{ item.regionName + ' > ' + item.deviceGroupName }}</span
|
||||
>
|
||||
</div>
|
||||
<a-popconfirm
|
||||
title="此操作将会撤销修改"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="delBtn(item)"
|
||||
@cancel="changeCancel">
|
||||
<button class="cxbtn">撤销</button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<div class="btn-box">
|
||||
<div class="btn-item">
|
||||
<div class="left">控制模式</div>
|
||||
<div class="right">
|
||||
<span>手动</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>自动</span></div
|
||||
>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 亮度 </div>
|
||||
<div class="right">
|
||||
<!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
|
||||
<span>{{
|
||||
item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>{{
|
||||
item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 控制场景 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>{{
|
||||
item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 色温 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>
|
||||
{{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-item">
|
||||
<div class="left"> 启用状态 </div>
|
||||
<div class="right">
|
||||
<span>{{
|
||||
item?.stateBefore?.lockStatus != undefined
|
||||
? item.stateBefore.lockStatus
|
||||
? '禁用'
|
||||
: '启用'
|
||||
: '--'
|
||||
}}</span>
|
||||
<img src="/asset/image/bulbLogo/22406.png" alt="" />
|
||||
<span>
|
||||
{{
|
||||
item?.stateAfter?.lockStatus != undefined
|
||||
? item.stateAfter.lockStatus
|
||||
? '禁用'
|
||||
: '启用'
|
||||
: '--'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; height: 60px"></div>
|
||||
<div class="button-box">
|
||||
<button class="cancel" @click="executeVisible = false">取消</button>
|
||||
<a-popconfirm
|
||||
title="此操作将提交以上修改内容"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="submitChangeList"
|
||||
@cancel="changeCancel">
|
||||
<button class="execute">执行</button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { ventilating } from '/@/api/ventilatingSystem';
|
||||
// 全局变量
|
||||
import { items } from '/@/store/item';
|
||||
|
||||
// 初始化 =========================================================================
|
||||
|
||||
onMounted(() => {
|
||||
// 分区初始化
|
||||
setArea();
|
||||
if (props.type == '排风扇') {
|
||||
url.getList = ventilating.getChangeList1;
|
||||
url.sendList = ventilating.sendChangeList1;
|
||||
} else if (props.type == '风幕机') {
|
||||
url.getList = ventilating.getChangeList2;
|
||||
url.sendList = ventilating.sendChangeList2;
|
||||
} else {
|
||||
url.getList = ventilating.getChangeList3;
|
||||
url.sendList = ventilating.sendChangeList3;
|
||||
}
|
||||
});
|
||||
// 分区初始化，以 1-1 作为默认回路
|
||||
const setArea = () => {
|
||||
const data = props.treeData[0];
|
||||
buttons2.value = data.childList;
|
||||
};
|
||||
// 全局变量
|
||||
const state = items();
|
||||
// 网络请求路径
|
||||
const url = {
|
||||
getList: '',
|
||||
sendList: '',
|
||||
};
|
||||
|
||||
// 与父组件的交互 ===================================================================
|
||||
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
treeData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
[];
|
||||
},
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
/** 向上传递方法
|
||||
* @method changeArea 用于控制俯视图的选中状态
|
||||
* @method reset 用于重置按钮区
|
||||
* @method reload 用于刷新一次页面
|
||||
*/
|
||||
const emit = defineEmits(['reset', 'reload']);
|
||||
|
||||
// 照明回路业务 ======================================================================
|
||||
|
||||
// 开关启用/禁用状态
|
||||
const isPlanEnabled2 = ref(true);
|
||||
// 按钮区展开与收起状态
|
||||
const showAllButtons = ref(false);
|
||||
// 全选状态
|
||||
const selectAllCheckbox = ref(false);
|
||||
// 控制模式枚举
|
||||
const controlMode = ref([]);
|
||||
const isPlanEnabled2 = ref(false);
|
||||
// 开关修改保存数组
|
||||
const lockList = ref<any>([]);
|
||||
// 开关启用/禁用切换事件
|
||||
const togglePlan2 = () => {
|
||||
// 获取选中线路
|
||||
let valid = buttons2.value.filter((item: any) => {
|
||||
return item.selected;
|
||||
});
|
||||
// 未选中线路
|
||||
if (valid.length == 0) {
|
||||
return message.info('请先选择线路');
|
||||
// 选中线路
|
||||
} else {
|
||||
// 按钮切换
|
||||
isPlanEnabled2.value = !isPlanEnabled2.value;
|
||||
// 禁用状态原值
|
||||
let after = +isPlanEnabled2.value;
|
||||
// 当前修改线路
|
||||
valid.forEach((item: any) => {
|
||||
// 按钮与需修改的值一致，无效
|
||||
if (item.lockStatus == after) {
|
||||
return;
|
||||
}
|
||||
// 查看是否已经产生过修改
|
||||
const same = lockList.value.find((v: any) => {
|
||||
return v.deviceGroup == item.dataCode;
|
||||
});
|
||||
// 如果发生过修改
|
||||
if (same) {
|
||||
// 改回原值，则移除
|
||||
if (same.before == after) {
|
||||
lockList.value.forEach((v1: any, index: number) => {
|
||||
if (same.deviceGroup == v1.deviceGroup) {
|
||||
lockList.value.splice(index, 1);
|
||||
}
|
||||
});
|
||||
// 只有true 和 false 的切换，无需继续判断
|
||||
}
|
||||
// 初次修改
|
||||
} else {
|
||||
lockList.value.push({
|
||||
deviceGroup: item.dataCode,
|
||||
deviceGroupName: item.name,
|
||||
region: item.treePid,
|
||||
regionName: '',
|
||||
before: item.lockStatus,
|
||||
lockStatus: after,
|
||||
});
|
||||
}
|
||||
// 修改
|
||||
item.lockStatus = after;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 是否单选，状态
|
||||
let singleSelection = ref(true);
|
||||
// 照明回路所有按钮
|
||||
const buttons2 = ref([]);
|
||||
// 默认最多展示8个按钮
|
||||
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
|
||||
// 开关启用/禁用切换事件
|
||||
const togglePlan2 = () => {};
|
||||
// 内侧弹窗显隐
|
||||
const executeVisible = ref<boolean>(false);
|
||||
|
||||
const submitChangeList = () => {};
|
||||
// 多选与单选切换事件
|
||||
const selectAll = () => {
|
||||
selectAllCheckbox.value = false;
|
||||
// 切换时清空当前所有选项
|
||||
buttons2.value.forEach((button: any) => {
|
||||
button.selected = false;
|
||||
});
|
||||
singleSelection.value = !singleSelection.value;
|
||||
// 当前选中回路 - 置空
|
||||
resetMode();
|
||||
};
|
||||
|
||||
// 全选状态
|
||||
const selectAllCheckbox = ref(false);
|
||||
// 全选切换事件（switch）
|
||||
const toggleAllSelection = () => {
|
||||
let arr = [];
|
||||
// 全选
|
||||
if (selectAllCheckbox.value) {
|
||||
buttons2.value.forEach((item: any, index: number) => {
|
||||
// 全选时，默认展示第一条回路的模式-场景按钮
|
||||
if (index == 0) {
|
||||
thisButton2.value = item;
|
||||
}
|
||||
item.selected = true;
|
||||
arr.push(item.id);
|
||||
});
|
||||
// 全不选
|
||||
} else {
|
||||
buttons2.value.forEach((item: any) => {
|
||||
item.selected = false;
|
||||
});
|
||||
// 全不选时，隐藏 模式 与 场景 按钮
|
||||
resetMode();
|
||||
}
|
||||
};
|
||||
|
||||
// 储存当前选中的回路
|
||||
const thisButton2 = ref({
|
||||
code: '',
|
||||
dataCode: '',
|
||||
name: '',
|
||||
pcode: '',
|
||||
mode: {
|
||||
value: -1,
|
||||
},
|
||||
scene: {
|
||||
value: -1,
|
||||
},
|
||||
treePid: '',
|
||||
childList: [],
|
||||
});
|
||||
// 照明回路的按钮切换
|
||||
const changeLine = (button: any) => {
|
||||
// 根据按钮状态，展示禁用/启用按钮文本
|
||||
if (button.ctrlStatus) {
|
||||
isPlanEnabled2.value = true;
|
||||
} else {
|
||||
isPlanEnabled2.value = false;
|
||||
}
|
||||
// 单选模式，需将所有其他回路设为false
|
||||
if (singleSelection.value) {
|
||||
buttons2.value.forEach((item: any) => {
|
||||
item.selected = false;
|
||||
});
|
||||
button.selected = !button.selected;
|
||||
} else {
|
||||
// 多选模式传值
|
||||
button.selected = !button.selected;
|
||||
const arr = [];
|
||||
buttons2.value.forEach((item: any) => {
|
||||
if (item.selected) {
|
||||
arr.push(item.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 用于展示控制模式
|
||||
if (button.selected) {
|
||||
// 发生了选中事件
|
||||
thisButton2.value = button;
|
||||
// 获得启动模式
|
||||
if (button.childList) {
|
||||
thisButton3.value = button.childList.find((item: any) => {
|
||||
if (item.selectAble) {
|
||||
return item.childList ? item.childList : [];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
thisButton3.value = { childList: [] };
|
||||
}
|
||||
} else {
|
||||
// 未发生选中 或 多选的其中一个按钮被取消
|
||||
resetMode();
|
||||
}
|
||||
console.log(thisButton2, 'button');
|
||||
};
|
||||
|
||||
// 照明回路所有按钮
|
||||
const buttons2 = ref([]);
|
||||
// 按钮区展开与收起状态
|
||||
const showAllButtons = ref(false);
|
||||
// 默认最多展示8个按钮
|
||||
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
|
||||
|
||||
// 控制模式业务 ====================================================================
|
||||
|
||||
const thisButton3 = ref({
|
||||
childList: [],
|
||||
});
|
||||
// 控制模式 - 按钮切换
|
||||
const selectButton3 = (button3: any) => {
|
||||
let checked = thisButton2.value.mode;
|
||||
console.log(button3.value, '---', checked.value);
|
||||
// 如果点击了相同的按钮，则未作出修改
|
||||
if (checked.value === button3.value) {
|
||||
return;
|
||||
console.log(button3);
|
||||
if (!button3.selectAble) {
|
||||
return message.warning(`${button3.name} 暂不支持`);
|
||||
}
|
||||
checked.value = button3.value;
|
||||
thisButton3.value = button3;
|
||||
};
|
||||
|
||||
// 全选切换事件（switch）
|
||||
const toggleAllSelection = () => {};
|
||||
onMounted(() => {});
|
||||
// 控制场景业务 =====================================================================
|
||||
|
||||
// 控制场景 - 按钮切换
|
||||
const selectButton4 = (button4: any) => {
|
||||
const after = button4.dataCode;
|
||||
let before = '';
|
||||
// 如果是多选模式
|
||||
if (!singleSelection.value) {
|
||||
// 操作线路总数
|
||||
let sum = 0;
|
||||
// 没有这个选项的线路
|
||||
// let nofind = 0;
|
||||
// 修改无效的数量
|
||||
let checked = 0;
|
||||
// 可修改的数量
|
||||
let changed = 0;
|
||||
buttons2.value.forEach((item: any) => {
|
||||
// 取出当前选中的值 before
|
||||
if (item.childList) {
|
||||
let mode = item.childList.find((lv3: any) => {
|
||||
return lv3.selectAble;
|
||||
});
|
||||
if (mode.childList) {
|
||||
mode.childList.forEach((mode: any) => {
|
||||
// 取出当前选中的模式
|
||||
if (mode.executeStatus.value == 1) {
|
||||
before = mode.dataCode;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 查看当前回路，哪些被选中
|
||||
if (item.selected) {
|
||||
item.childList.forEach((v: any) => {
|
||||
if (v.childList) {
|
||||
v.childList.forEach((v1: any) => {
|
||||
// 查看是否包含当前要修改的值
|
||||
if (v1.dataCode == after) {
|
||||
sum += 1;
|
||||
// 已经被选中，无需修改的内容
|
||||
if (before == after) {
|
||||
return (checked += 1);
|
||||
// 修改
|
||||
} else {
|
||||
changed += 1;
|
||||
changeScene(v1, before, after, item);
|
||||
v1.executeStatus.value = 1;
|
||||
}
|
||||
// 不符合条件的全部重置
|
||||
} else {
|
||||
v1.executeStatus.value = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
message.info(`共修改${sum}条数据，其中${checked}条无需修改，${changed}条修改有效`);
|
||||
// 如果是单选模式
|
||||
} else {
|
||||
// 如果按钮已经被选择
|
||||
if (button4.executeStatus.value == 1) {
|
||||
return message.info('未产生实际修改');
|
||||
} else {
|
||||
// 获得线路当前的场景
|
||||
let before;
|
||||
thisButton2.value.childList.find((item: any) => {
|
||||
if (item.childList) {
|
||||
item.childList.forEach((i: any) => {
|
||||
if (i.executeStatus.value == 1) {
|
||||
return (before = i.dataCode);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// 移除选中场景
|
||||
resetScene(thisButton2.value.childList);
|
||||
changeScene(button4, before, after);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 切换场景前，需要把其他场景移除
|
||||
const resetScene = (list: any) => {
|
||||
list.forEach((item: any) => {
|
||||
if (item.childList) {
|
||||
item.childList.forEach((i: any) => {
|
||||
i.executeStatus.value = 0;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 控制场景 - 按钮切换通用方法（单选 & 多选）
|
||||
* @param button 当前被选中的回路（单选 & 多选）
|
||||
* @param before 回路场景的初始值（撤回时需使用）
|
||||
* @param after 回路场景被修改后的值
|
||||
* @param anyButton 多选时使用
|
||||
*/
|
||||
const changeScene = (button: any, before: string | undefined, after: string, line = null) => {
|
||||
// 通过分组ID，查询之前是否修改过
|
||||
const result = changeList.value.find((item: any, index: number) => {
|
||||
item.index = index;
|
||||
return item.deviceGroup == button.treePid.split('_')[0];
|
||||
});
|
||||
// 如果已产生过修改
|
||||
if (result) {
|
||||
// 改回了原有的值，则从数组中移除
|
||||
if (after == result.before) {
|
||||
changeList.value.splice(result.index, 1);
|
||||
// 修改为新值，则只修改场景
|
||||
} else {
|
||||
result.scene = after;
|
||||
// 临时flag，用后移除
|
||||
delete result.index;
|
||||
}
|
||||
// 如果未产生过修改
|
||||
} else {
|
||||
let nowButton;
|
||||
// 多选，则使用第四个参数
|
||||
if (line) {
|
||||
nowButton = line;
|
||||
// 如果是单选，则使用thisbotton2
|
||||
} else {
|
||||
nowButton = thisButton2.value;
|
||||
}
|
||||
changeList.value.push({
|
||||
// 回路
|
||||
deviceGroup: nowButton.dataCode,
|
||||
deviceGroupName: nowButton.name,
|
||||
// 分区
|
||||
region: nowButton.treePid,
|
||||
regionName: '',
|
||||
// 修改前
|
||||
before,
|
||||
scene: after,
|
||||
});
|
||||
}
|
||||
button.executeStatus.value = 1;
|
||||
};
|
||||
|
||||
// 底部按钮区 ======================================================================
|
||||
|
||||
// 刷新
|
||||
const refresh = (reload = false) => {
|
||||
// 关闭执行弹窗
|
||||
executeVisible.value = false;
|
||||
// 重置选中样式 和 按钮选中状态
|
||||
emit('reset');
|
||||
// 如果是中途刷新，需要将所有修改改回
|
||||
if (!reload) {
|
||||
changeList.value.forEach((item: any) => {
|
||||
resetChangeList(item);
|
||||
});
|
||||
}
|
||||
changeList.value = [];
|
||||
if (!reload) {
|
||||
lockList.value.forEach((item: any) => {
|
||||
resetLockList(item);
|
||||
});
|
||||
}
|
||||
lockList.value = [];
|
||||
// 默认选择第一个楼层
|
||||
let data = props.treeData[0];
|
||||
// 默认选中
|
||||
data.selected = true;
|
||||
// 默认选中 1-1 分区 回路
|
||||
buttons2.value = data.childList;
|
||||
resetMode();
|
||||
};
|
||||
// 将已修改的禁用/启用状态改回
|
||||
const resetLockList = (item: any) => {
|
||||
props.treeData.find((v: any) => {
|
||||
if (item.region == v.dataCode) {
|
||||
v.childList.find((v1: any) => {
|
||||
if (item.deviceGroup == v1.dataCode) {
|
||||
v1.lockStatus = item.before;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 将已修改的线路场景改回
|
||||
const resetChangeList = (item: any) => {
|
||||
props.treeData.find((v: any) => {
|
||||
if (item.region == v.dataCode) {
|
||||
v.childList.find((v1: any) => {
|
||||
// 找到被修改过的线路
|
||||
if (item.deviceGroup == v1.dataCode) {
|
||||
v1.childList.forEach((v2: any) => {
|
||||
if (v2.childList) {
|
||||
v2.childList.forEach((v3: any) => {
|
||||
// 将新值移除
|
||||
if (item.scene == v3.dataCode) {
|
||||
v3.executeStatus.value = 0;
|
||||
}
|
||||
if (!item.before) {
|
||||
console.log(item, '没有这个选项---');
|
||||
v3.executeStatus.value = 0;
|
||||
}
|
||||
// 旧值选中
|
||||
if (item.before == v3.dataCode) {
|
||||
v3.executeStatus.value = 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 右下角的执行事件
|
||||
const showModal = () => {
|
||||
if (!changeList.value.length && !lockList.value.length) {
|
||||
return message.info('未产生任何修改');
|
||||
}
|
||||
http
|
||||
.post(url.getList, {
|
||||
sceneList: changeList.value,
|
||||
lockList: lockList.value,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
diffList.value = res.data;
|
||||
executeVisible.value = true;
|
||||
} else {
|
||||
message.warning('获取修改内容失败');
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 通用取消
|
||||
const changeCancel = () => {};
|
||||
|
||||
// 内侧弹窗 ========================================================================
|
||||
|
||||
// 内侧弹窗显隐
|
||||
const executeVisible = ref<boolean>(false);
|
||||
// 修改模式 需要向后端提交的内容
|
||||
const changeList: any = ref([]);
|
||||
// 展示修改前后差异的内容
|
||||
const diffList = ref([]);
|
||||
// 撤销
|
||||
const delBtn = (obj: any) => {
|
||||
console.log(obj, '当前选择的修改内容');
|
||||
// 将treeData对应回路的数据改回，数据以后端为准
|
||||
obj.scene = obj?.stateAfter?.scene?.value;
|
||||
obj.before = obj?.stateBefore?.scene?.value;
|
||||
resetChangeList(obj);
|
||||
resetLockList(obj);
|
||||
// 将 changeList lockList 与 diffList 中记录的修改移除 (排除极端情况)
|
||||
changeList.value = changeList.value.filter((item: any) => {
|
||||
return item.deviceGroup !== obj.deviceGroup;
|
||||
});
|
||||
lockList.value = lockList.value.filter((item: any) => {
|
||||
return item.deviceGroup !== obj.deviceGroup;
|
||||
});
|
||||
diffList.value = diffList.value.filter((item: any) => {
|
||||
return item.deviceGroup !== obj.deviceGroup;
|
||||
});
|
||||
// 如果移除后不再有修改内容，则隐藏弹出框
|
||||
if (changeList.value.length == 0 && lockList.value.length == 0) {
|
||||
executeVisible.value = false;
|
||||
}
|
||||
};
|
||||
// 提交本次修改
|
||||
const submitChangeList = () => {
|
||||
http
|
||||
.post(url.sendList, {
|
||||
sceneList: changeList.value,
|
||||
lockList: lockList.value,
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
})
|
||||
.then(() => {
|
||||
emit('reload');
|
||||
refresh(true);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 其他业务 ========================================================================
|
||||
|
||||
// 将当前选择的回路置空
|
||||
const resetMode = () => {
|
||||
thisButton2.value = {
|
||||
dataCode: '',
|
||||
name: '',
|
||||
treePid: '',
|
||||
childList: [],
|
||||
};
|
||||
};
|
||||
|
||||
// 向外暴露方法
|
||||
defineExpose({
|
||||
// 回路切换
|
||||
changeLine,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './dialogStyle.less';
|
||||
@import './tabs1.less';
|
||||
.div-add {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid #606879;
|
||||
width: 496px;
|
||||
.add {
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: #2778ff;
|
||||
border: #2778ff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.cancel {
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
border: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
<template>
|
||||
<div class="div-add">
|
||||
<button class="add" @click="addModal">添加</button>
|
||||
<a-popconfirm title="是否提交以上修改？" ok-text="确定" cancel-text="取消" @confirm="sendTable">
|
||||
<button class="add" style="margin-left: 20px">执行</button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<span style="color: red; padding-top: 20px">*以下修改需执行后生效</span>
|
||||
<div class="plans">
|
||||
<button class="plan enabled" style="margin-right: 10px" @click="togglePlan(1)">
|
||||
计划启用
|
||||
</button>
|
||||
<button class="plan disabled" @click="togglePlan(3)"> 计划禁用 </button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="custom-table table1">
|
||||
<thead>
|
||||
@@ -17,35 +29,25 @@
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ row.startTime }}</td>
|
||||
<td>{{ row.planName }}</td>
|
||||
<td v-if="row.planStatus == '2'">
|
||||
<td>
|
||||
<button
|
||||
style="
|
||||
font-size: 12px;
|
||||
background: rgba(57, 215, 187, 0.1);
|
||||
color: rgb(57, 215, 187);
|
||||
border: 1px solid rgb(57, 215, 187);
|
||||
">
|
||||
已执行
|
||||
</button>
|
||||
</td>
|
||||
<td v-if="row.planStatus == '1'">
|
||||
<button
|
||||
style="
|
||||
font-size: 12px;
|
||||
background: rgba(243, 97, 99, 0.1);
|
||||
border: 1px solid rgba(243, 97, 99);
|
||||
color: rgba(243, 97, 99);
|
||||
">
|
||||
待执行
|
||||
:style="{
|
||||
'font-size': '12px',
|
||||
width: '5em',
|
||||
background: 'rgb(47, 47, 47)',
|
||||
color: setStateColor(row.executeStatus.value),
|
||||
border: '1px solid',
|
||||
}">
|
||||
{{ setStateText(row.executeStatus.value) }}
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="tabReboot" @click="restartPlan(row.id)">重启</div>
|
||||
<div class="tabReboot" @click="startPlan(row)">启用</div>
|
||||
<a-popconfirm
|
||||
title="此操作将永久删除该条数据"
|
||||
title="此操作将移除该数据"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="deletePlan(row.id)">
|
||||
@confirm="deletePlan(row)">
|
||||
<div class="tabDelete">删除</div>
|
||||
</a-popconfirm>
|
||||
</td>
|
||||
@@ -82,39 +84,95 @@
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { lightingManage } from '/@/api/IlluminationInfo';
|
||||
import { planManage } from '/@/api/planManage';
|
||||
import { message } from 'ant-design-vue';
|
||||
// 全局变量
|
||||
import { items } from '/@/store/item';
|
||||
|
||||
// 初始化 ===========================================================
|
||||
|
||||
const props = defineProps({
|
||||
// 分区结构（照明区域 > 照明回路）
|
||||
status: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
[];
|
||||
},
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 计划表格
|
||||
getTable();
|
||||
// 穿梭框原始数据
|
||||
getLeftPlan();
|
||||
});
|
||||
// 全局变量
|
||||
const state = items();
|
||||
|
||||
// tab页部分 ========================================================
|
||||
|
||||
// 设置枚举的颜色 与 文本
|
||||
const setStateColor = (state: number) => {
|
||||
if (state == 0) {
|
||||
return '#ccc';
|
||||
} else if (state == 1) {
|
||||
return 'orange';
|
||||
} else if (state == 2) {
|
||||
return 'rgb(57, 215, 187)';
|
||||
} else if (state == 3) {
|
||||
return 'rgb(255, 0, 0)';
|
||||
}
|
||||
};
|
||||
// 设置枚举的文本
|
||||
const setStateText = (state: number) => {
|
||||
const res = props.status.find((item: any) => {
|
||||
return item.value == state;
|
||||
});
|
||||
return res.label;
|
||||
};
|
||||
// 计划启用/禁用事件
|
||||
const togglePlan = (state: number) => {
|
||||
dataSource.value.forEach((item: any) => {
|
||||
item.executeStatus.value = state;
|
||||
});
|
||||
};
|
||||
|
||||
// 表格数据
|
||||
const dataSource = ref([]);
|
||||
// 获得表格数据
|
||||
const getTable = () => {
|
||||
http.get(lightingManage.getPlanTable, {}).then((res) => {
|
||||
http
|
||||
.get(planManage.getTableData, {
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
|
||||
deviceType: props.type,
|
||||
})
|
||||
.then((res) => {
|
||||
dataSource.value = res.data;
|
||||
});
|
||||
};
|
||||
// 删除表格中的计划
|
||||
const deletePlan = (id: String) => {
|
||||
http.delete(lightingManage.deletePlan, [id]).then(() => {
|
||||
message.success('操作成功');
|
||||
getTable();
|
||||
});
|
||||
// 删除表格中的计划（将当前任意状态，修改为未启用 =0）
|
||||
const deletePlan = (row: any) => {
|
||||
row.executeStatus.value = 0;
|
||||
};
|
||||
// 重启表格中的计划
|
||||
const restartPlan = (id: String) => {
|
||||
http.post(lightingManage.restartPlan, { planId: id }).then(() => {
|
||||
// 重启表格中的计划（将当前任意状态，修改为待执行 = 1）
|
||||
const startPlan = (row: any) => {
|
||||
if (row.executeStatus.value == 1) {
|
||||
return message.info('该数据已是待执行状态，无需再次修改');
|
||||
}
|
||||
row.executeStatus.value = 1;
|
||||
};
|
||||
// 将对表格的修改统一发送
|
||||
const sendTable = () => {
|
||||
http.post(lightingManage.submitTableData, dataSource.value).then(() => {
|
||||
message.success('操作成功');
|
||||
getTable();
|
||||
getLeftPlan();
|
||||
});
|
||||
};
|
||||
|
||||
@@ -133,8 +191,15 @@
|
||||
const transferData = ref([]) as any;
|
||||
// 获得穿梭框原始数据
|
||||
const getLeftPlan = () => {
|
||||
http.get(lightingManage.getLeftPlan, {}).then((res) => {
|
||||
let arr = [];
|
||||
http
|
||||
.get(planManage.getTransData, {
|
||||
projectId: state.projectId,
|
||||
siteId: state.siteId,
|
||||
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
|
||||
deviceType: props.type,
|
||||
})
|
||||
.then((res) => {
|
||||
let arr: Array<Object> = [];
|
||||
res.data.forEach((item: any) => {
|
||||
arr.push({
|
||||
key: item.id,
|
||||
@@ -158,7 +223,7 @@
|
||||
if (targetKeys.value.length < 1) {
|
||||
return message.info('没有选择任何计划');
|
||||
}
|
||||
http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
|
||||
http.post(planManage.submitTransData, targetKeys.value).then(() => {
|
||||
message.success('添加成功');
|
||||
// 如果发送成功，则刷新表格
|
||||
getTable();
|
||||
@@ -172,7 +237,31 @@
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import './dialogStyle.less';
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.plan {
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border-radius: 5px;
|
||||
width: 88px;
|
||||
height: 32px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
margin: 15px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.plan.enabled {
|
||||
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
|
||||
}
|
||||
.plan.disabled {
|
||||
background-color: red;
|
||||
}
|
||||
.plan:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
// 右下角添加按钮
|
||||
.div-add {
|
||||
height: 64px;
|
||||
@@ -182,7 +271,7 @@
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin-right: 20px;
|
||||
margin-right: 10px;
|
||||
.add {
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
@@ -200,7 +289,7 @@
|
||||
.custom-table {
|
||||
border-collapse: collapse;
|
||||
width: 416px;
|
||||
height: 60px;
|
||||
height: 40px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.custom-table th,
|
||||
@@ -211,7 +300,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
.table1 {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255, 255, 255);
|
||||
border-radius: 5px;
|
||||
|
||||
@@ -80,16 +80,16 @@
|
||||
<div
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 10.6%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 12.6%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
}">
|
||||
<boxModel :dataSource="item" />
|
||||
</div>
|
||||
<img
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 2%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 3%)',
|
||||
transform: 'rotateY(180deg)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
@@ -100,7 +100,7 @@
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' + 4.3%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
}">
|
||||
<boxModel :dataSource="item" />
|
||||
</div>
|
||||
@@ -108,23 +108,22 @@
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' + 1.5%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
transform: 'rotate(90deg,180deg)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 3%)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
</template>
|
||||
<img
|
||||
style="width: 42px; height: 42px; position: absolute"
|
||||
style="width: 38px; height: 38px; position: absolute; cursor: pointer; z-index: 9"
|
||||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
|
||||
src="../image/ventilationSystem/fan.png" />
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 弹窗操控 -->
|
||||
<!-- 排风扇 - 弹窗 -->
|
||||
<a-drawer
|
||||
v-if="selectIndex === 4 && visible"
|
||||
:visible="selectIndex === 4"
|
||||
class="drawer-fan"
|
||||
class="drawer-fan drawer-item"
|
||||
:width="496"
|
||||
:forceRender="preload"
|
||||
placement="right"
|
||||
@@ -133,16 +132,15 @@
|
||||
id="drawer"
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div
|
||||
class="drawer-box-out"
|
||||
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
||||
@click="toggleDrawer">
|
||||
<div class="drawer-box-out" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板"> <fanControl /> </a-tab-pane>
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<fanControl :treeData="treeData" :type="`排风扇`" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<fanPlant />
|
||||
<fanPlant :status="stateList" :type="3" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
||||
</a-tabs>
|
||||
@@ -154,7 +152,7 @@
|
||||
<div
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 15.1%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 16.1%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
||||
}">
|
||||
<boxModel :dataSource="item" />
|
||||
@@ -162,24 +160,24 @@
|
||||
<img
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 2%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
transform: 'rotateY(180deg)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
|
||||
<img
|
||||
style="width: 42px; height: 42px; position: absolute"
|
||||
style="width: 38px; height: 38px; position: absolute; z-index: 9"
|
||||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
|
||||
src="../image/ventilationSystem/airCurtain.png" />
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 弹窗操控 -->
|
||||
<!-- 风幕机 - 弹窗 -->
|
||||
<a-drawer
|
||||
v-if="selectIndex === 5 && visible"
|
||||
:visible="selectIndex === 5"
|
||||
class="drawer-fan"
|
||||
class="drawer-fan drawer-item"
|
||||
:width="496"
|
||||
:forceRender="preload"
|
||||
placement="right"
|
||||
@@ -189,15 +187,16 @@
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
|
||||
:mask="false">
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div
|
||||
class="drawer-box-out"
|
||||
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
||||
@click="toggleDrawer">
|
||||
<div class="drawer-box-out" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板"> 风幕机 </a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<fanControl :treeData="treeData" :type="`风幕机`" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<fanPlant :status="stateList" :type="4" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
@@ -207,7 +206,7 @@
|
||||
<div
|
||||
style="position: absolute"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 10.6%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 11%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
||||
}">
|
||||
<boxModel :dataSource="item" />
|
||||
@@ -215,24 +214,24 @@
|
||||
<img
|
||||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||||
:style="{
|
||||
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
||||
left: 'calc(' + item.styleText.left + ' - 2%)',
|
||||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||||
transform: 'rotateY(180deg)',
|
||||
}"
|
||||
src="../image/liftState/lift/line.png" />
|
||||
|
||||
<img
|
||||
style="width: 42px; height: 42px; position: absolute"
|
||||
style="width: 38px; height: 38px; position: absolute; z-index: 9"
|
||||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
|
||||
src="../image/ventilationSystem/windowIcon.png" />
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 弹窗操控 -->
|
||||
<!-- 电动窗 - 弹窗 -->
|
||||
<a-drawer
|
||||
v-if="selectIndex === 6 && visible"
|
||||
:visible="selectIndex === 6"
|
||||
class="drawer-fan"
|
||||
class="drawer-fan drawer-item"
|
||||
:width="496"
|
||||
:forceRender="preload"
|
||||
placement="right"
|
||||
@@ -242,15 +241,16 @@
|
||||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
|
||||
:mask="false">
|
||||
<!-- 左侧抽屉的关闭按钮 -->
|
||||
<div
|
||||
class="drawer-box-out"
|
||||
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
||||
@click="toggleDrawer">
|
||||
<div class="drawer-box-out" @click="toggleDrawer">
|
||||
<double-right-outlined class="drawer-icon" style="color: white" />
|
||||
</div>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="控制面板"> 电动窗 </a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
|
||||
<a-tab-pane key="1" tab="控制面板">
|
||||
<fanControl :treeData="treeData" :type="`电动窗`" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<fanPlant :status="stateList" :type="5" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-drawer>
|
||||
@@ -276,8 +276,30 @@
|
||||
import fanControl from './components/fanControl.vue';
|
||||
import fanPlant from './components/fanPlant.vue';
|
||||
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
||||
// 请求
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { getEnum } from '/@/api';
|
||||
import { ventilating } from '/@/api/ventilatingSystem';
|
||||
// 全局变量
|
||||
import { items } from '/@/store/item';
|
||||
// 定位数据
|
||||
import { devicePosition1, devicePosition2, devicePosition3 } from './devicePosition';
|
||||
|
||||
//图例
|
||||
// 父子组件交互 =======================================================================
|
||||
|
||||
// 全局变量
|
||||
const state = items();
|
||||
// 状态枚举
|
||||
const stateList = ref([]);
|
||||
// 获得状态枚举
|
||||
const getStateEnum = async () => {
|
||||
let enumData = await getEnum({ params: { enumType: 'PlanExecuteStatus' } });
|
||||
stateList.value = enumData.data;
|
||||
};
|
||||
|
||||
// 左侧侧边栏及交互 ====================================================================
|
||||
|
||||
// 图例
|
||||
const legend = ref([
|
||||
{ url: temperature, name: '温度' },
|
||||
{ url: humidity, name: '湿度' },
|
||||
@@ -289,24 +311,102 @@
|
||||
]);
|
||||
// 选择的图例
|
||||
const selectIndex = ref(0);
|
||||
//选择table
|
||||
// 图例切换事件
|
||||
const selectLegend = (item: any, index: any) => {
|
||||
const name = item.name;
|
||||
if (selectIndex.value === index) {
|
||||
return;
|
||||
} else if (name == '排风扇') {
|
||||
// 获得树形结构
|
||||
getTree(1, index);
|
||||
// 获得设备图例
|
||||
getDevice(1);
|
||||
} else if (name == '风幕机') {
|
||||
getTree(2, index);
|
||||
getDevice(2);
|
||||
} else if (name == '电动窗') {
|
||||
getTree(3, index);
|
||||
getDevice(3);
|
||||
// 修改
|
||||
} else {
|
||||
selectIndex.value = index;
|
||||
}
|
||||
};
|
||||
|
||||
// 抽屉相关（排风扇 / 风幕机 / 电动窗） ==================================================
|
||||
|
||||
// 选择table
|
||||
const activeKey = ref('1');
|
||||
// 展示
|
||||
// 抽屉的展示状态
|
||||
const visible = ref(true);
|
||||
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
|
||||
const preload = ref(true);
|
||||
// 抽屉 - 开关事件
|
||||
const toggleDrawer = () => {
|
||||
console.log('xxxx');
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
//选择方法
|
||||
const selectLegend = (item: any, index: any) => {
|
||||
if (selectIndex.value !== index) {
|
||||
selectIndex.value = index;
|
||||
|
||||
// 抽屉中tab1 - 控制面板 =================================================================
|
||||
|
||||
const treeData = ref([]);
|
||||
// 获取tab1的树形结构
|
||||
const getTree = async (type: number, index: number) => {
|
||||
// 切换时默认选择tab1
|
||||
activeKey.value = '1';
|
||||
let url;
|
||||
if (type == 1) {
|
||||
url = ventilating.getTree1;
|
||||
} else if (type == 2) {
|
||||
url = ventilating.getTree2;
|
||||
} else {
|
||||
url = ventilating.getTree3;
|
||||
}
|
||||
http.get(url, { projectId: state.projectId, siteId: state.siteId }).then((res) => {
|
||||
const data = res.data;
|
||||
treeData.value = data[0].childList;
|
||||
selectIndex.value = index;
|
||||
});
|
||||
};
|
||||
//温度数组
|
||||
const getDevice = async (type: number) => {
|
||||
// 切换时默认选择tab1
|
||||
activeKey.value = '1';
|
||||
let arr: Array<Object> = [];
|
||||
let url = '';
|
||||
let deviceType = '';
|
||||
if (type == 1) {
|
||||
// 设备类型
|
||||
deviceType = 'fan';
|
||||
// 位置数据
|
||||
arr = devicePosition1;
|
||||
// 请求地址
|
||||
url = ventilating.getDevice1;
|
||||
} else if (type == 2) {
|
||||
deviceType = 'airCurtain';
|
||||
arr = devicePosition2;
|
||||
url = ventilating.getDevice2;
|
||||
} else if (type == 3) {
|
||||
deviceType = 'window';
|
||||
arr = devicePosition3;
|
||||
url = ventilating.getDevice3;
|
||||
}
|
||||
http.get(url, { projectId: state.projectId, siteId: state.siteId, floor: 1 }).then((res) => {
|
||||
const data = res.data;
|
||||
data.forEach((item: any, index: number) => {
|
||||
let obj = arr[index];
|
||||
item.styleText = obj.textObject;
|
||||
item.lineType = obj.lineType;
|
||||
item.type = deviceType;
|
||||
});
|
||||
if (type == 1) {
|
||||
fanData.value = data;
|
||||
} else if (type == 2) {
|
||||
airCurtainData.value = data;
|
||||
} else if (type == 3) {
|
||||
windowData.value = data;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 温度数组
|
||||
const sensorData = ref([
|
||||
{
|
||||
title: '多功能传感器A',
|
||||
@@ -325,7 +425,7 @@
|
||||
url: sunYellow,
|
||||
},
|
||||
]);
|
||||
//湿度数组
|
||||
// 湿度数组
|
||||
const humidityData = ref([
|
||||
{
|
||||
title: '多功能传感器A',
|
||||
@@ -344,7 +444,7 @@
|
||||
url: humidity,
|
||||
},
|
||||
]);
|
||||
//PM2.5数组
|
||||
// PM2.5数组
|
||||
const pmData = ref([
|
||||
{
|
||||
title: '多功能传感器A',
|
||||
@@ -363,7 +463,7 @@
|
||||
url: PM25,
|
||||
},
|
||||
]);
|
||||
//二氧化碳 浓度
|
||||
// 二氧化碳 浓度
|
||||
const CO2Data = ref([
|
||||
{
|
||||
title: '多功能传感器A',
|
||||
@@ -382,98 +482,102 @@
|
||||
url: CO2,
|
||||
},
|
||||
]);
|
||||
//排风扇
|
||||
// 排风扇
|
||||
const fanData = ref([
|
||||
{
|
||||
title: '排风扇',
|
||||
styleText: { left: '43.2%', bottom: '77.8%' },
|
||||
type: 'fan',
|
||||
lineType: '1',
|
||||
},
|
||||
{
|
||||
title: '排风扇',
|
||||
styleText: { left: '50%', bottom: '77.8%' },
|
||||
type: 'fan',
|
||||
lineType: '2',
|
||||
},
|
||||
{
|
||||
title: '排风扇',
|
||||
styleText: { left: '41.2%', bottom: '27.8%' },
|
||||
type: 'fan',
|
||||
lineType: '1',
|
||||
},
|
||||
{
|
||||
title: '排风扇',
|
||||
styleText: { left: '51.2%', bottom: '27.8%' },
|
||||
type: 'fan',
|
||||
lineType: '2',
|
||||
},
|
||||
// {
|
||||
// title: '排风扇',
|
||||
// styleText: { left: '43.2%', bottom: '77.8%' },
|
||||
// type: 'fan',
|
||||
// lineType: '1',
|
||||
// },
|
||||
// {
|
||||
// title: '排风扇',
|
||||
// styleText: { left: '50%', bottom: '77.8%' },
|
||||
// type: 'fan',
|
||||
// lineType: '2',
|
||||
// },
|
||||
// {
|
||||
// title: '排风扇',
|
||||
// styleText: { left: '41.2%', bottom: '27.8%' },
|
||||
// type: 'fan',
|
||||
// lineType: '1',
|
||||
// },
|
||||
// {
|
||||
// title: '排风扇',
|
||||
// styleText: { left: '51.2%', bottom: '27.8%' },
|
||||
// type: 'fan',
|
||||
// lineType: '2',
|
||||
// },
|
||||
]);
|
||||
// 风幕机
|
||||
const airCurtainData = ref([
|
||||
{
|
||||
title: '风幕机',
|
||||
styleText: { left: '38%', bottom: '57.8%' },
|
||||
type: 'airCurtain',
|
||||
},
|
||||
{
|
||||
title: '风幕机',
|
||||
styleText: { left: '58.5%', bottom: '57.3%' },
|
||||
type: 'airCurtain',
|
||||
},
|
||||
{
|
||||
title: '风幕机',
|
||||
styleText: { left: '64.2%', bottom: '22.8%' },
|
||||
type: 'airCurtain',
|
||||
},
|
||||
// {
|
||||
// title: '风幕机',
|
||||
// styleText: { left: '38%', bottom: '57.8%' },
|
||||
// type: 'airCurtain',
|
||||
// },
|
||||
// {
|
||||
// title: '风幕机',
|
||||
// styleText: { left: '58.5%', bottom: '57.3%' },
|
||||
// type: 'airCurtain',
|
||||
// },
|
||||
// {
|
||||
// title: '风幕机',
|
||||
// styleText: { left: '64.2%', bottom: '22.8%' },
|
||||
// type: 'airCurtain',
|
||||
// },
|
||||
]);
|
||||
// 电动窗
|
||||
const windowData = ref([
|
||||
{
|
||||
title: '电动窗1',
|
||||
styleText: { left: '32%', bottom: '28%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗2',
|
||||
styleText: { left: '33.5%', bottom: '42.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗3',
|
||||
styleText: { left: '35%', bottom: '57.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗4',
|
||||
styleText: { left: '36.5%', bottom: '72.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗5',
|
||||
styleText: { left: '66%', bottom: '28%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗6',
|
||||
styleText: { left: '64%', bottom: '42.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗7',
|
||||
styleText: { left: '62%', bottom: '57.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
{
|
||||
title: '电动窗8',
|
||||
styleText: { left: '60%', bottom: '72.8%' },
|
||||
type: 'window',
|
||||
},
|
||||
// {
|
||||
// title: '电动窗1',
|
||||
// styleText: { left: '32%', bottom: '28%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗2',
|
||||
// styleText: { left: '33.5%', bottom: '42.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗3',
|
||||
// styleText: { left: '35%', bottom: '57.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗4',
|
||||
// styleText: { left: '36.5%', bottom: '72.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗5',
|
||||
// styleText: { left: '66%', bottom: '28%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗6',
|
||||
// styleText: { left: '64%', bottom: '42.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗7',
|
||||
// styleText: { left: '62%', bottom: '57.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
// {
|
||||
// title: '电动窗8',
|
||||
// styleText: { left: '60%', bottom: '72.8%' },
|
||||
// type: 'window',
|
||||
// },
|
||||
]);
|
||||
onMounted(() => {});
|
||||
onMounted(() => {
|
||||
// 获得枚举
|
||||
getStateEnum();
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import url('../style/color.less');
|
||||
.legend-box {
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
@@ -562,7 +666,7 @@
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
position: fixed;
|
||||
right: 466px;
|
||||
right: 495px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
|
||||
Reference in New Issue
Block a user