xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix:电梯系统/照明系统 代码规范

Browse Source
This commit is contained in:
chenpingsen
2024-07-25 14:14:55 +08:00
parent 261ad9017d
commit a9e6998430
7 changed files with 1229 additions and 1223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue
View File

@@ -1,46 +1,41 @@
<template>
<div class="map-box">
<div class="map">
<liftInfo></liftInfo>
<liftInfo />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import liftInfo from './liftInfo.vue'
import liftInfo from './liftInfo.vue';
// 请求
import { message } from 'ant-design-vue';
// 初始化 ===========================================================
onMounted(() => {
})
onMounted(() => {});
// tab页部分 ========================================================
// 表格数据
const dataSource = ref([]);
</script>
<style lang="less" scoped>
.map-box {
// 颜色变量，用于区别颜色
// 正常 - 开启 - 上行 -下行
--on: #0DFFA4;
--on: #0dffa4;
// 关闭
--off: #BFCDE2;
--off: #bfcde2;
// 暂停 - 维修
--pause: #FFBC46;
--pause: #ffbc46;
// 告警 - 急停
--stop: #F36163;
--stop: #f36163;
// 故障
--fault: #FF7636;
--fault: #ff7636;
// 未知
--unknown: #A742FF;
--unknown: #a742ff;
width: 100%;
height: 100%;
.map {
@@ -49,5 +44,4 @@ const dataSource = ref([]);
background-image: url(../image/bg.jpg);
}
}
</style>

13
hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
View File

@@ -10,7 +10,7 @@
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="">
<img src="../image/liftState/lift-normal.svg" alt="" />
</div>
</div>
</div>
@@ -21,7 +21,7 @@
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="">
<img src="../image/liftState/lift-normal.svg" alt="" />
</div>
</div>
</div>
@@ -32,7 +32,7 @@
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="">
<img src="../image/liftState/lift-normal.svg" alt="" />
</div>
</div>
</div>
@@ -49,9 +49,7 @@ import { ref, onMounted } from 'vue';
// 初始化 ===========================================================
onMounted(() => {
})
onMounted(() => {});
// tab页部分 ========================================================
@@ -59,8 +57,6 @@ onMounted(() => {
const runState = ref('1');
// 电梯状态
const liftState = ref('2');
</script>
<style lang="less" scoped>
// 面板
@@ -147,5 +143,4 @@ const liftState = ref('2');
}
}
}
</style>

166
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
View File

@@ -3,7 +3,9 @@
<div class="lighting-img-box">
<!-- 左上角，区域切换 -->
<div class="btn-box">
<button v-for="item in floorData" class="btn-item" @click=changeFloor(item.childList)>{{ item.name }}</button>
<button v-for="item in floorData" class="btn-item" @click="changeFloor(item.childList)">{{
item.name
}}</button>
</div>
<!-- 楼层区域 -->
<div class="area">
@@ -21,12 +23,12 @@
</div>
<!-- 照明设备 -->
<div class="lights">
<light v-for="(item, index) in bulbs"
<light
v-for="(item, index) in bulbs"
:key="index"
:styleObject="item.styleText"
:type="item.type"
:visible="item.visible">
</light>
:visible="item.visible" />
</div>
</div>
<!-- 右侧抽屉的触发按钮 -->
@@ -35,7 +37,7 @@
</div>
<!-- 左侧抽屉的关闭按钮 -->
<div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
<double-right-outlined class="drawer-icon" style="color: white;" />
<double-right-outlined class="drawer-icon" style="color: white" />
</div>
<!-- 右侧抽屉 -->
<a-drawer
@@ -50,18 +52,13 @@
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="控制面板">
<tabs1
ref="tabs1Ref"
@changeArea="changeArea"
@reset="reset"
:treeData="treeData"
></tabs1>
<tabs1 ref="tabs1Ref" @changeArea="changeArea" @reset="reset" :treeData="treeData" />
</a-tab-pane>
<a-tab-pane key="2" tab="计划列表" force-render>
<tabs2></tabs2>
<tabs2 />
</a-tab-pane>
<a-tab-pane key="3" tab="日志">
<tabs3></tabs3>
<tabs3 />
</a-tab-pane>
</a-tabs>
</a-drawer>
@@ -69,170 +66,163 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 组件
import light from './light.vue';
import tabs1 from './tabs1.vue'
import tabs2 from './tabs2.vue'
import tabs3 from './tabs3.vue'
import tabs1 from './tabs1.vue';
import tabs2 from './tabs2.vue';
import tabs3 from './tabs3.vue';
// 请求
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
// ICON
import {
DoubleLeftOutlined,
DoubleRightOutlined
} from '@ant-design/icons-vue';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
// 初始化 =======================================================
onMounted(() => {
// 获得分区与线路的结构
getAllArea()
})
getAllArea();
});
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
const preload = ref(false)
const preload = ref(false);
// 分层业务 =====================================================
// 所有楼层的数据
const floorData = ref([])
const floorData = ref([]);
// 左上角分层切换
const changeFloor = (area: any) => {
// 重置数据
reset()
reset();
// 重置视图
changeArea(['1'])
changeArea(['1']);
// 切换楼层数据
treeData.value = area
treeData.value = area;
// 默认选择第一项
treeData.value[0].selected = true
}
treeData.value[0].selected = true;
};
// 分区业务 =====================================================
// 分区结构树
const treeData = ref([])
const treeData = ref([]);
// 当前选中的分区序列 - 用于样式渲染
const area = ref(['1'])
const area = ref(['1']);
// 线路内小灯泡 - 此处位置需前端写死
const bulbs = ref([
{
styleText: { left: '180px', bottom: '200px' },
area: 1,
type: 1,
visible: true
visible: true,
},
{
styleText: { left: '230px', bottom: '125px' },
area: 1,
type: 2,
visible: true
visible: true,
},
{
styleText: { left: '320px', bottom: '140px' },
area: 1,
type: 3,
visible: true
visible: true,
},
{
styleText: { left: '245px', bottom: '230px' },
area: 1,
type: 3,
visible: true
visible: true,
},
{
styleText: { left: '405px', bottom: '230px' },
area: 2,
type: 3,
visible: true
visible: true,
},
{
styleText: { left: '460px', bottom: '180px' },
area: 2,
type: 3,
visible: true
visible: true,
},
{
styleText: { left: '360px', bottom: '275px' },
area: 2,
type: 3,
visible: true
visible: true,
},
{
styleText: { left: '715px', bottom: '320px' },
area: 3,
type: 1,
visible: true
visible: true,
},
])
]);
// 由子组件控制的分区与线路切换
const changeArea = (result: any) => {
console.log(result,'changeArea')
console.log(result, 'changeArea');
// 数组
if (Array.isArray(result)) {
area.value = result
area.value = result;
// 不是数组
} else {
area.value.length = 0
area.value[0] = String(result)
}
area.value.length = 0;
area.value[0] = String(result);
}
};
// 由当前组件控制的分区切换
const changeThisArea = (result: any) => {
console.log(result, 'changeThisArea')
console.log(result, 'changeThisArea');
// 修改前，将所有选项置空
reset()
reset();
let level1 = result[0];
area.value.length = 0
area.value.length = 0;
// 只选择了分区
if (result.length === 1) {
result[0].selected = true
area.value.push(result[0].id)
result[0].selected = true;
area.value.push(result[0].id);
// 控制子组件按钮区
tabs1Ref.value.changeArea(result[0])
tabs1Ref.value.changeArea(result[0]);
// 选择了分区 + 线路
} else if (result.length === 2) {
// 如果没有分区，默认选择第一个
if (!level1) {
level1 = treeData.value[0]
level1 = treeData.value[0];
}
// 选中状态都设为true
level1.selected = result[1].selected = true
area.value.splice(0, 0, level1.id, result[1].id)
level1.selected = result[1].selected = true;
area.value.splice(0, 0, level1.id, result[1].id);
// 控制子组件按钮区
tabs1Ref.value.changeArea(result[0])
tabs1Ref.value.changeLine(result[1])
}
tabs1Ref.value.changeArea(result[0]);
tabs1Ref.value.changeLine(result[1]);
}
};
// 重置分区树所有当前选项
const reset = () => {
treeData.value.forEach((item: any) => {
item.selected = false
item.selected = false;
item.childList.forEach((i: any) => {
i.selected = false
})
})
}
i.selected = false;
});
});
};
// 俯视图分区选中计算函数
const computedClass = (string: string) => {
if (area.value.indexOf(string) != -1) {
return `isActive area-item area${string}`
return `isActive area-item area${string}`;
} else {
return `area-item area${string}`
}
return `area-item area${string}`;
}
};
// 获得所有分区
const getAllArea = () => {
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
const data = res.data
floorData.value = data
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then((res) => {
const data = res.data;
floorData.value = data;
/** 只在前端使用的变量
* @param id 用于判断样式和层级的前端属性
* @param selected 用于表示是否选中的前端属性
@@ -240,23 +230,23 @@ const getAllArea = () => {
data.forEach((floor: any) => {
floor.childList.forEach((item: any, index: number) => {
if (index == 0) {
item.selected = true
item.selected = true;
} else {
item.selected = false
item.selected = false;
}
item.id = String(index + 1)
item.id = String(index + 1);
item.childList.forEach((v: any, i: number) => {
v.selected = false
v.id = (index + 1) + '-' + (i + 1)
})
})
})
v.selected = false;
v.id = index + 1 + '-' + (i + 1);
});
});
});
// 默认展示 线路 1-1
treeData.value = data[0].childList
treeData.value = data[0].childList;
// 开始预加载
preload.value = true
})
}
preload.value = true;
});
};
// 抽屉业务 =====================================================
@@ -269,18 +259,18 @@ const toggleDrawer = () => {
visible.value = !visible.value;
};
// 抽屉tab1组件的引用
const tabs1Ref = ref()
const tabs1Ref = ref();
</script>
<style lang="less" scoped>
@import "./index.less";
@import './index.less';
// 当前选中分区的样式
.isActive {
border: 3px solid white !important;
}
// 抽屉顶部tab按钮样式
:deep(.ant-tabs-tab-btn) {
color: white;
}
</style>

25
hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
View File

@@ -34,9 +34,9 @@
</div>
</template>
<div class="icon-box" :style="styleObject" v-show="visible">
<img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="">
<img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="">
<img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="">
<img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="" />
<img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="" />
<img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="" />
</div>
</a-popover>
</template>
@@ -49,8 +49,8 @@ defineProps({
type: Number,
visible: {
type: Boolean,
default: false
}
default: false,
},
});
const result = ref({
@@ -65,39 +65,44 @@ const result = ref({
brightness3: '4000k',
brightness4: '3800k',
});
</script>
<style lang="less" scoped>
.icon-box {
width: 25px;
height: 25px;
position: absolute;
.icon-item {
width: 25px;
cursor: pointer;
transition: all ease 0.1s;
}
.icon-item:active {
transform: scale(1.2);
}
}
// 悬浮窗外部
.light-tag {
display: flex;
flex-direction: column;
gap: 10px;
// 悬浮窗标题
.light-tag-tit {
display: flex;
justify-content: space-between;
vertical-align: middle;
height: 30px;
.tag-text {
font-size: 16px;
font-weight: 700;
color: white;
padding-left: 10px;
}
.right-button {
width: 50px;
height: 26px;
@@ -108,33 +113,37 @@ const result = ref({
}
}
}
// 悬浮窗底部4格子
.light-tag-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
.tag-box-item {
position: relative;
display: flex;
justify-content: space-between;
img {
width: 120px;
vertical-align: middle;
}
.title {
position: absolute;
left: 60px;
top: 13px;
color: rgba(64, 255, 252, 1);
}
.result {
line-height: 50px;
font-size: 16px;
font-weight: 700;
color: white;
};
}
}
}
</style>

303
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
View File

@@ -5,15 +5,21 @@
<div class="light-area">
<div class="light-area-tab"></div>
<span class="light-area-text"> 照明区域 </span>
<button class="plan" :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }" @click="togglePlan">
<button
class="plan"
:class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
@click="togglePlan">
{{ isPlanEnabled ? '计划启用' : '计划禁用' }}
</button>
</div>
<!-- 照明区域按钮部分 -->
<div class="area">
<template v-if="!showAllButtonsArea">
<button v-for="(button, index) in limitedButtons1" :key="index"
:class="{ btn: true, selected: button.selected }" @click="changeArea(button)">
<button
v-for="(button, index) in limitedButtons1"
:key="index"
:class="{ btn: true, selected: button.selected }"
@click="changeArea(button)">
{{ button.name }}
</button>
<div style="margin-top: 10px">
@@ -21,7 +27,10 @@
</div>
</template>
<template v-else>
<button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
<button
v-for="(button, index) in props.treeData"
:key="index"
:class="{ btn: true, selected: button.selected }"
@click="changeArea(button)">
{{ button.name }}
</button>
@@ -37,13 +46,20 @@
<div class="circuit-tab"></div>
<span class="circuit-text">照明回路</span>
<div class="btn2">
<button class="openPlan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
<button
class="openPlan"
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
@click="togglePlan2">
{{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
</button>
<a-switch v-model:checked="selectAllCheckbox" :disabled="singleSelection" :class="{
<a-switch
v-model:checked="selectAllCheckbox"
:disabled="singleSelection"
:class="{
'blue-background': selectAllCheckbox,
'grey-background': !selectAllCheckbox,
}" @change="toggleAllSelection" />
}"
@change="toggleAllSelection" />
<button class="allBtn">全选</button>
<button class="both" @click="selectAll">
{{ singleSelection ? '多选' : '单选' }}
@@ -52,8 +68,12 @@
</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)">
<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>
@@ -62,8 +82,12 @@
</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)">
<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>
@@ -81,10 +105,13 @@
</div>
<!-- 控制模式按钮部分 -->
<div class="control-mode-btn-area" v-show="thisButton2.code">
<button v-for="(button3, index) in controlMode" :key="index"
<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)">
:class="{ selected: thisButton2.mode.value == button3.value }"
@click="selectButton3(button3)">
{{ button3.label }}
</button>
</div>
@@ -97,8 +124,11 @@
</div>
<!-- 控制场景按钮部分 -->
<div class="control-scene-btn-area" v-show="thisButton2.mode.value == 3">
<button v-for="(button4, index) in controlScene" :key="index"
:class="{ btn: true, selected: thisButton2.scene.value == button4.value }" @click="selectButton4(button4)">
<button
v-for="(button4, index) in controlScene"
:key="index"
:class="{ btn: true, selected: thisButton2.scene.value == button4.value }"
@click="selectButton4(button4)">
{{ button4.label }}
</button>
</div>
@@ -110,8 +140,7 @@
ok-text="确定"
cancel-text="取消"
@confirm="changeConfirm"
@cancel="changeCancel"
>
@cancel="changeCancel">
<button class="flushed">刷新</button>
</a-popconfirm>
<button class="execute" @click="showModal">执行</button>
@@ -129,7 +158,11 @@
<div class="imgText">
<div class="zjzm">
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
<span
class="title-text"
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
>{{ item.name }}</span
>
</div>
<button class="cxbtn" @click="delBtn(item.id)">撤销</button>
</div>
@@ -143,9 +176,7 @@
</div>
</div>
<div class="btn-item">
<div class="left">
亮度
</div>
<div class="left"> 亮度 </div>
<div class="right">
<span>100lux</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -153,9 +184,7 @@
</div>
</div>
<div class="btn-item">
<div class="left">
控制场景
</div>
<div class="left"> 控制场景 </div>
<div class="right">
<span>手动</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -163,9 +192,7 @@
</div>
</div>
<div class="btn-item">
<div class="left">
色温
</div>
<div class="left"> 色温 </div>
<div class="right">
<span>4000k</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -176,7 +203,7 @@
</div>
</div>
</div>
<div style="width: 100%; height: 60px;"></div>
<div style="width: 100%; height: 60px"></div>
<div class="button-box">
<button class="cancel" @click="executeVisible = false">取消</button>
<button class="execute">执行</button>
@@ -187,40 +214,36 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import {
DownOutlined,
UpOutlined,
StopOutlined,
} from '@ant-design/icons-vue';
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
// 请求
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
import { getAllEnum } from '/@/api/index'
import { getAllEnum } from '/@/api/index';
// 初始化 =========================================================================
onMounted(() => {
// 默认选项
setArea()
setArea();
// 获得枚举
getEnum(['IlluminationMode', 'IlluminationScene'])
})
getEnum(['IlluminationMode', 'IlluminationScene']);
});
// 获得枚举
const getEnum = (arr: any) => {
getAllEnum({ params: arr }).then(res => {
const data = res.data
getAllEnum({ params: arr }).then((res) => {
const data = res.data;
// 控制模式
controlMode.value = data.IlluminationMode
controlMode.value = data.IlluminationMode;
// 控制场景
controlScene.value = data.IlluminationScene
})
}
controlScene.value = data.IlluminationScene;
});
};
// 以 1-1 作为默认线路
const setArea = () => {
const data = props.treeData[0]
buttons2.value = data.childList
}
const data = props.treeData[0];
buttons2.value = data.childList;
};
// 与父组件的交互 ===================================================================
@@ -228,8 +251,8 @@ const props = defineProps({
// 分区结构（照明区域 > 照明回路）
treeData: {
type: Array,
default: []
}
default: [],
},
});
// 向上传递修改选择样式
/**
@@ -257,17 +280,17 @@ const changeArea = (button: any) => {
// 当前选中按钮
selectedButton.value = button.id;
// 设置当前选中的线路
buttons2.value = button.childList
buttons2.value = button.childList;
// 重置按钮状态
emit('reset')
emit('reset');
// 设置选中按钮状态
button.selected = true
button.selected = true;
// 改变俯视图样式
emit('changeArea', button.id);
// 当前选中线路 - 置空
resetMode()
resetMode();
// 最近交互过的按钮 - 置空
handleButton.value = ''
handleButton.value = '';
};
// 默认最多展示8个按钮
const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
@@ -286,50 +309,55 @@ const togglePlan2 = () => {
return message.info('请选择照明回路');
}
// 获取最近交互过的按钮
const btn: any = buttons2.value.find((button) => button.id === handleButton.value)
let panel = +(!btn.ctrlStatus)
isLoading.value = true
http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).then(res => {
const btn: any = buttons2.value.find((button) => button.id === handleButton.value);
let panel = +!btn.ctrlStatus;
isLoading.value = true;
http
.get(lightingManage.setDisable, { deviceGroup: btn.code, panel })
.then((res) => {
if (res.msg === 'success') {
// 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
isPlanEnabled2.value = !isPlanEnabled2.value;
btn.ctrlStatus = panel
isLoading.value = false
btn.ctrlStatus = panel;
isLoading.value = false;
} else {
isLoading.value = false
isLoading.value = false;
}
}).catch(() => { isLoading.value = false })
})
.catch(() => {
isLoading.value = false;
});
};
// 是否单选，状态
let singleSelection = ref(true);
// 多选与单选切换事件
const selectAll = () => {
selectAllCheckbox.value = false
selectAllCheckbox.value = false;
buttons2.value.forEach((button) => {
button.selected = false;
});
singleSelection.value = !singleSelection.value;
// 当前选中线路 - 置空
resetMode()
resetMode();
// 改变俯视图样式
emit('changeArea', [selectedButton.value])
emit('changeArea', [selectedButton.value]);
};
// 全选状态
const selectAllCheckbox = ref(false);
// 全选切换事件（switch）
const toggleAllSelection = () => {
let arr = [selectedButton.value]
let arr = [selectedButton.value];
// 全选
if (selectAllCheckbox.value) {
buttons2.value.forEach((item, index) => {
// 全选时，默认展示第一条线路的模式-场景按钮
if (index == 0) {
thisButton2.value = item
thisButton2.value = item;
}
item.selected = true;
arr.push(item.id)
arr.push(item.id);
});
// 全不选
} else {
@@ -337,62 +365,62 @@ const toggleAllSelection = () => {
item.selected = false;
});
// 全不选时，隐藏模式-场景按钮
resetMode()
resetMode();
}
emit('changeArea', arr)
emit('changeArea', arr);
};
// 储存当前选中的线路
const thisButton2 = ref({
code: '',
mode: {
value: -1
value: -1,
},
scene: {
value: -1
}
})
value: -1,
},
});
// 照明回路的按钮切换
const changeLine = (button: any) => {
// 存储一次按钮ID，用于禁用/启用交互
handleButton.value = button.id
handleButton.value = button.id;
// 根据按钮状态，展示禁用/启用按钮文本
if (button.ctrlStatus) {
isPlanEnabled2.value = true
isPlanEnabled2.value = true;
} else {
isPlanEnabled2.value = false
isPlanEnabled2.value = false;
}
// 选择时反控俯视图
let level1 = selectedButton.value
let level2 = button.id
let level1 = selectedButton.value;
let level2 = button.id;
// 单选模式，需将所有其他按钮设为false
if (singleSelection.value) {
buttons2.value.forEach(item => {
buttons2.value.forEach((item) => {
item.selected = false;
});
button.selected = !button.selected;
emit('changeArea', [level1, level2])
emit('changeArea', [level1, level2]);
} else {
// 多选模式传值
button.selected = !button.selected;
const arr = [level1]
buttons2.value.forEach(item => {
const arr = [level1];
buttons2.value.forEach((item) => {
if (item.selected) {
arr.push(item.id)
arr.push(item.id);
}
});
emit('changeArea', arr)
emit('changeArea', arr);
}
// 用于展示控制模式
if (button.selected) {
// 发生了选中事件
thisButton2.value = button
thisButton2.value = button;
} else {
// 未发生选中 或 多选的其中一个按钮被取消
resetMode()
resetMode();
}
console.log(thisButton2,'button')
console.log(thisButton2, 'button');
};
// 照明回路所有按钮
@@ -406,52 +434,52 @@ const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
// 控制模式 - 按钮切换
const selectButton3 = (button3) => {
let checked = thisButton2.value.mode
console.log(button3.value,'---', checked.value)
let checked = thisButton2.value.mode;
console.log(button3.value, '---', checked.value);
// 如果点击了相同的按钮，则未作出修改
if (checked.value === button3.value) {
return
return;
}
checked.value = button3.value
checked.value = button3.value;
};
// 控制场景业务 =====================================================================
// 控制模式枚举
const controlMode = ref([])
const controlMode = ref([]);
// 场景枚举
const controlScene = ref([])
const controlScene = ref([]);
// 控制场景 - 当前选择按钮
const selectedButton4 = ref(null);
// 控制场景 - 按钮切换
const selectButton4 = (button4) => {
// 当前选中的线路数据
const data = thisButton2.value
const data = thisButton2.value;
// 修改前的数据
let before = data.scene.value
let before = data.scene.value;
// 修改后的数据
let after = button4.value
let after = button4.value;
// 如果没有产生实质性的修改（修改前后相同，则跳出）
if (before === after) {
return
return;
// 产生了修改
} else {
thisButton2.value.scene.value = after
thisButton2.value.scene.value = after;
// 查询之前是否修改过
const result = changeList.value.find((item, index) => {
item.index = index
return item.deviceGroup == data.code
})
item.index = index;
return item.deviceGroup == data.code;
});
// 如果已产生过修改
if (result) {
// 改回了原有的值，则从数组中移除
if (after == result.before) {
changeList.value.splice(result.index, 1)
changeList.value.splice(result.index, 1);
// 修改为新值，则只修改after
} else {
result.scene = after
result.scene = after;
// 临时flag，用后移除
delete result.index
delete result.index;
}
// 如果未产生过修改
} else {
@@ -465,23 +493,23 @@ const selectButton4 = (button4) => {
// 修改前
before: before,
// 修改后
scene: after
})
scene: after,
});
}
console.log(changeList.value, 'changeList')
console.log(changeList.value, 'changeList');
}
thisButton2.value.scene.value = after
console.log(thisButton2,'222222')
console.log(button4,'44444')
thisButton2.value.scene.value = after;
console.log(thisButton2, '222222');
console.log(button4, '44444');
};
// 内侧弹窗 ========================================================================
// 需要修改的内容
const changeList: any = ref([])
const changeList: any = ref([]);
// 需要向后端提交的修改内容
const submitList = ref([])
const submitList = ref([]);
const cxList = ref([
{
id: '1',
@@ -532,69 +560,68 @@ const delBtn = () => {
// 其他业务 ========================================================================
const isLoading = ref(false)
const isLoading = ref(false);
// 刷新
const refresh = () => {
// 关闭执行弹窗
executeVisible.value = false
executeVisible.value = false;
// 设置当前选中的序列
selectedButton.value = '1';
emit('changeArea', ['1']);
emit('reset')
let data = props.treeData[0]
emit('reset');
let data = props.treeData[0];
// 默认选中
data.selected = true
buttons2.value = data.childList
data.selected = true;
buttons2.value = data.childList;
selectedButton4.value = null;
resetMode()
resetMode();
};
// 执行确认
const executeVisible = ref<boolean>(false);
const showModal = () => {
http.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' }).then(res => {
http
.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' })
.then((res) => {
if (res.msg === 'success') {
isLoading.value = true
console.log(res)
isLoading.value = true;
console.log(res);
} else {
isLoading.value = false
isLoading.value = false;
}
})
});
executeVisible.value = true;
};
// 确定
const changeConfirm = () => {
refresh()
}
refresh();
};
// 取消
const changeCancel = () => {
}
const changeCancel = () => {};
// 将当前选择的线路置空
const resetMode = () => {
thisButton2.value = {
code: '',
mode: {
value: -1
value: -1,
},
scene: {
value: -1
}
}
}
value: -1,
},
};
};
// 暴露
defineExpose({
// 分区切换
changeArea,
// 线路切换
changeLine
changeLine,
});
</script>
<style lang="less" scoped>
@import "./dialogStyle.less";
@import "./tabs1.less";
@import './dialogStyle.less';
@import './tabs1.less';
</style>

67
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue
View File

@@ -45,8 +45,7 @@
title="此操作将永久删除该条数据"
ok-text="确定"
cancel-text="取消"
@confirm="deletePlan(row.id)"
>
@confirm="deletePlan(row.id)">
<div class="tabDelete">删除</div>
</a-popconfirm>
</td>
@@ -70,7 +69,7 @@
@search="handleSearch"
:listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
</div>
<div style="width: 100%; height: 60px;"></div>
<div style="width: 100%; height: 60px"></div>
<div class="button-box">
<button class="cancel" @click="addVisible = false">取消</button>
<button class="execute" @click="sendPlan">确定</button>
@@ -89,10 +88,10 @@ import { message } from 'ant-design-vue';
onMounted(() => {
// 计划表格
getTable()
getTable();
// 穿梭框原始数据
getLeftPlan()
})
getLeftPlan();
});
// tab页部分 ========================================================
@@ -100,24 +99,24 @@ onMounted(() => {
const dataSource = ref([]);
// 获得表格数据
const getTable = () => {
http.get(lightingManage.getPlanTable, {}).then(res => {
dataSource.value = res.data
})
}
http.get(lightingManage.getPlanTable, {}).then((res) => {
dataSource.value = res.data;
});
};
// 删除表格中的计划
const deletePlan = (id: String) => {
http.delete(lightingManage.deletePlan, [id]).then(() => {
message.success('操作成功')
getTable()
})
}
message.success('操作成功');
getTable();
});
};
// 重启表格中的计划
const restartPlan = (id: String) => {
http.post(lightingManage.restartPlan, { planId: id }).then(() => {
message.success('操作成功')
getTable()
})
}
message.success('操作成功');
getTable();
});
};
// tab页弹窗部分 ====================================================
@@ -134,17 +133,17 @@ const addModal = () => {
const transferData = ref([]) as any;
// 获得穿梭框原始数据
const getLeftPlan = () => {
http.get(lightingManage.getLeftPlan, {}).then(res => {
let arr = []
http.get(lightingManage.getLeftPlan, {}).then((res) => {
let arr = [];
res.data.forEach((item: any) => {
arr.push({
key: item.id,
title: item.planName
})
})
transferData.value = arr
})
}
title: item.planName,
});
});
transferData.value = arr;
});
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
console.log(keys, direction, moveKeys);
@@ -160,21 +159,19 @@ const sendPlan = () => {
return message.info('没有选择任何计划');
}
http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
message.success('添加成功')
message.success('添加成功');
// 如果发送成功，则刷新表格
getTable()
getLeftPlan()
})
}
getTable();
getLeftPlan();
});
};
const filterOption = (inputValue: string, option: any) => {
return option.description.indexOf(inputValue) > -1;
};
</script>
<style lang="less" scoped>
@import "./dialogStyle.less";
@import './dialogStyle.less';
// 右下角添加按钮
.div-add {
@@ -248,6 +245,4 @@ const filterOption = (inputValue: string, option: any) => {
background: black;
}
}
</style>

38
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue
View File

@@ -9,7 +9,10 @@
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.key)"
<tr
v-for="(row, index) in dataSource1"
:key="index"
@click="handleRowClick(row.key)"
:class="row.key === trIndex ? 'isTrIndex' : ''">
<td>{{ row.key }}</td>
<td>{{ row.data }}</td>
@@ -19,7 +22,7 @@
</tbody>
</table>
<div class="out-dialog" :class="{ 'showDialog' : logModalVisible }" v-if="logModalVisible">
<div class="out-dialog" :class="{ showDialog: logModalVisible }" v-if="logModalVisible">
<div class="content" v-if="logModalVisible">
<div>
<div class="div-operation"></div>
@@ -30,7 +33,11 @@
<div class="imgText">
<div class="zjzm">
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
<span
class="title-text"
style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
>{{ item.name }}</span
>
</div>
</div>
<div class="btn-box">
@@ -43,9 +50,7 @@
</div>
</div>
<div class="btn-item">
<div class="left">
亮度
</div>
<div class="left"> 亮度 </div>
<div class="right">
<span>100lux</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -53,9 +58,7 @@
</div>
</div>
<div class="btn-item">
<div class="left">
控制场景
</div>
<div class="left"> 控制场景 </div>
<div class="right">
<span>手动</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -63,9 +66,7 @@
</div>
</div>
<div class="btn-item">
<div class="left">
色温
</div>
<div class="left"> 色温 </div>
<div class="right">
<span>4000k</span>
<img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -76,7 +77,7 @@
</div>
</div>
</div>
<div style="height: 60px;"></div>
<div style="height: 60px"></div>
<div class="button-box">
<button class="cancel" @click="logModalVisible = false">取消</button>
</div>
@@ -90,15 +91,13 @@
import { ref, onMounted } from 'vue';
// 初始化
onMounted(() => {
})
onMounted(() => {});
// 与父组件的交互 ===================================================================
const props = defineProps({
// 分区结构（照明区域 > 照明回路）
treeData: {
type: Array
type: Array,
},
});
const emit = defineEmits(['changeArea']);
@@ -172,11 +171,9 @@ const handleRowClick = (index: any) => {
// 显示模态框
logModalVisible.value = true;
};
</script>
<style lang="less" scoped>
@import "./dialogStyle.less";
@import './dialogStyle.less';
// 右下角添加按钮
.div-add {
@@ -246,7 +243,6 @@ const handleRowClick = (index: any) => {
}
::v-deep(.ant-transfer) {
// 屏蔽自带的hover效果
.ant-transfer-list-content-item:hover {
background: black;