add:通风系统数据引入/素材样式修改/引入组件改造
This commit is contained in:
chenpingsen
@@ -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>
|
||||
</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>
|
||||
<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>
|
||||
</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
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<!-- 开启 关闭 -->
|
||||
<span
|
||||
:style="{
|
||||
color: ['rgba(0, 255, 210, 1)', 'rgba(191, 205, 226, 1)'][0],
|
||||
fontSize: '12px',
|
||||
}">
|
||||
开启</span
|
||||
>
|
||||
<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%;
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
text-align: center; /* 文字水平居中 */
|
||||
flex-wrap: wrap;
|
||||
.box-model-item {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
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,201 +1,767 @@
|
||||
<template>
|
||||
<a-spin :spinning="isLoading">
|
||||
<!-- 排风扇 -->
|
||||
<div>
|
||||
<div class="circuit-area">
|
||||
<div class="circuit-tab"></div>
|
||||
<span class="circuit-text">排风扇</span>
|
||||
<div class="btn2">
|
||||
<!-- 设备部分 -->
|
||||
<div>
|
||||
<div class="circuit-area">
|
||||
<div class="circuit-tab"></div>
|
||||
<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-switch
|
||||
v-model:checked="selectAllCheckbox"
|
||||
:disabled="singleSelection"
|
||||
:class="{
|
||||
'blue-background': selectAllCheckbox,
|
||||
'grey-background': !selectAllCheckbox,
|
||||
}"
|
||||
@change="toggleAllSelection" />
|
||||
<button class="allBtn">全选</button>
|
||||
<button class="both" @click="selectAll">
|
||||
{{ singleSelection ? '多选' : '单选' }}
|
||||
</button>
|
||||
</a-badge>
|
||||
<a-switch
|
||||
v-model:checked="selectAllCheckbox"
|
||||
:disabled="singleSelection"
|
||||
:class="{
|
||||
'blue-background': selectAllCheckbox,
|
||||
'grey-background': !selectAllCheckbox,
|
||||
}"
|
||||
@change="toggleAllSelection" />
|
||||
<button class="allBtn">全选</button>
|
||||
<button class="both" @click="selectAll">
|
||||
{{ singleSelection ? '多选' : '单选' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnArea">
|
||||
<template v-if="!showAllButtons">
|
||||
<button
|
||||
v-for="(button, index) in limitedButtons2"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<div v-if="button.lockStatus" class="btn-back">
|
||||
<stop-outlined />
|
||||
</div>
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="(button, index) in buttons2"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<div v-if="button.lockStatus" class="btn-back">
|
||||
<stop-outlined />
|
||||
</div>
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px">
|
||||
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
|
||||
</div>
|
||||
</template>
|
||||
</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">
|
||||
<button
|
||||
v-for="(button3, index) in thisButton2.childList"
|
||||
:key="index"
|
||||
class="btn"
|
||||
:class="{ selected: button3.selectAble }"
|
||||
@click="selectButton3(button3)">
|
||||
{{ button3.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 控制场景部分 -->
|
||||
<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-scene-btn-area">
|
||||
<button
|
||||
v-for="(button4, index) in thisButton3.childList"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button4.executeStatus.value != 0 }"
|
||||
@click="selectButton4(button4)"
|
||||
>{{ button4.name }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部按钮区 -->
|
||||
<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>
|
||||
|
||||
<!-- 点击执行时的弹出框 -->
|
||||
<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 class="btnArea">
|
||||
<template v-if="!showAllButtons">
|
||||
<button
|
||||
v-for="(button, index) in limitedButtons2"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<stop-outlined v-if="button.ctrlStatus" />
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px" v-if="limitedButtons2.length > 0">
|
||||
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
v-for="(button, index) in buttons2"
|
||||
:key="index"
|
||||
:class="{ btn: true, selected: button.selected }"
|
||||
class="zmhlbtn"
|
||||
@click="changeLine(button)">
|
||||
<stop-outlined v-if="button.ctrlStatus" />
|
||||
{{ button.name }}
|
||||
</button>
|
||||
<div style="margin-top: 10px" v-if="buttons2.length > 0">
|
||||
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 控制模式部分 -->
|
||||
<div>
|
||||
<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">
|
||||
<button
|
||||
v-for="(button3, index) in controlMode"
|
||||
:key="index"
|
||||
class="btn"
|
||||
:disabled="button3.value != 3"
|
||||
:class="{ selected: thisButton2.mode.value == button3.value }"
|
||||
@click="selectButton3(button3)">
|
||||
{{ button3.label }}
|
||||
</button>
|
||||
</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>
|
||||
<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">
|
||||
<button
|
||||
v-for="(button3, index) in controlMode"
|
||||
:key="index"
|
||||
class="btn"
|
||||
:disabled="button3.value != 3"
|
||||
:class="{ selected: thisButton2.mode.value == button3.value }"
|
||||
@click="selectButton3(button3)">
|
||||
{{ button3.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-add">
|
||||
<button class="cancel" @click="addModal">刷新</button>
|
||||
<button class="add" @click="addModal">执行</button>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
|
||||
const isLoading = ref(false);
|
||||
<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) => {
|
||||
dataSource.value = res.data;
|
||||
});
|
||||
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();
|
||||
});
|
||||
};
|
||||
// 重启表格中的计划
|
||||
const restartPlan = (id: String) => {
|
||||
http.post(lightingManage.restartPlan, { planId: id }).then(() => {
|
||||
// 删除表格中的计划（将当前任意状态，修改为未启用 =0）
|
||||
const deletePlan = (row: any) => {
|
||||
row.executeStatus.value = 0;
|
||||
};
|
||||
// 重启表格中的计划（将当前任意状态，修改为待执行 = 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,16 +191,23 @@
|
||||
const transferData = ref([]) as any;
|
||||
// 获得穿梭框原始数据
|
||||
const getLeftPlan = () => {
|
||||
http.get(lightingManage.getLeftPlan, {}).then((res) => {
|
||||
let arr = [];
|
||||
res.data.forEach((item: any) => {
|
||||
arr.push({
|
||||
key: item.id,
|
||||
title: item.planName,
|
||||
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,
|
||||
title: item.planName,
|
||||
});
|
||||
});
|
||||
transferData.value = arr;
|
||||
});
|
||||
transferData.value = arr;
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user