Browse Source

add:照明系统交互

deploy-dev
chenpingsen 4 months ago
parent
commit
429909a712
  1. 20
      hx-ai-intelligent/src/api/IlluminationInfo.ts
  2. 9
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less
  3. 67
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
  4. 161
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
  5. 439
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less
  6. 615
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
  7. 79
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue
  8. 12
      hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue

20
hx-ai-intelligent/src/api/IlluminationInfo.ts

@ -0,0 +1,20 @@
// 照明系统及相关接口
export enum lightingManage {
// 主页 ========================================================
// 获得分区与线路
getArea = '/carbon-smart/IlluminationInfo/region',
// 修改线路的可用/禁用状态
setDisable = '/carbon-smart/IlluminationInfo/revisePanel',
// 计划列表tab页 ================================================
// 获得计划列表tab页的表格数据
getPlanTable = '/carbon-smart/IlluminationPlan/selectPanelPlan',
// 获得计划列表tab页的穿梭框左侧数据
getLeftPlan = '/carbon-smart/IlluminationPlan/getPlan',
// 提交穿梭框被选择的数据
submitLeftPlan = '/carbon-smart/IlluminationPlan/joinPlan',
}

9
hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less

@ -3,6 +3,7 @@
right: 496px; right: 496px;
width: 500px; width: 500px;
height: 100%; height: 100%;
z-index: 99;
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
@ -12,6 +13,7 @@
display: flex; display: flex;
padding: 25px; padding: 25px;
flex-direction: column; flex-direction: column;
transition: all ease 0.5s;
.content { .content {
overflow-y: scroll; overflow-y: scroll;
.div-operation { .div-operation {
@ -139,3 +141,10 @@
} }
} }
} }
.fade-enter-active, .fade-leave-active {
transform: translateX(0px);
}
.fade-enter-from, .fade-leave-to {
transform: translateX(496px);
}

67
hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less

@ -1,7 +1,5 @@
// 页面容器 // 页面容器
.lighting-box { .lighting-box {
// width: 100%;
// height: 100%;
position: relative; position: relative;
// background: linear-gradient(#badaff, #8cabeb, #7095de); // background: linear-gradient(#badaff, #8cabeb, #7095de);
// 照明设备功能总容器 // 照明设备功能总容器
@ -47,32 +45,46 @@
height: 240px; height: 240px;
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg); transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
display: flex; display: flex;
gap: 8px; gap: 5px;
.area1 { .area1 {
width: 170px; width: 70px;
background: rgba(0, 251, 91, 0.3); background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91); border: 2px solid rgb(0, 251, 91);
display: flex; display: flex;
} }
.area2 { .area2 {
width: 240px; width: 200px;
background: rgba(255, 165, 0, 0.3); background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0); border: 2px solid rgb(255, 165, 0);
display: flex; display: flex;
} }
.area3 { .area3 {
width: 110px; width: 120px;
background: rgba(255, 0, 0, 0.3); background: rgba(255, 0, 0, 0.3);
border: 2px solid rgb(255, 0, 0); border: 2px solid rgb(255, 0, 0);
display: flex;
} }
.area4 { .area4 {
flex: 1; width: 70px;
background: rgba(80, 236, 244, 0.3); background: rgba(80, 236, 244, 0.3);
border: 2px solid rgb(80, 236, 244); border: 2px solid rgb(80, 236, 244);
display: flex;
}
.area5 {
flex: 1;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;
}
.area6 {
flex: 1;
background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0);
display: flex;
}
.area-item:hover {
transform: scale(1.05);
} }
// .area-item:hover {
// transform: scale(1.05);
// }
.area-item { .area-item {
cursor: pointer; cursor: pointer;
transition: all ease 0.2s; transition: all ease 0.2s;
@ -82,37 +94,16 @@
display:flex; display:flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.group-shadow1 { box-sizing: border-box;
width: 35px; padding: 10px;
height: 150px; // border: 2px solid red;
border-radius: 20px; .shadow-box {
background: rgba(0, 0, 0, 0.1); width: 30px;
} height: 200px;
.group-shadow2 {
width: 35px;
height: 180px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
}
.group-shadow3 {
width: 40px;
height: 180px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
}
.group-shadow4 {
width: 40px;
height: 160px;
border-radius: 20px; border-radius: 20px;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.2);
} }
} }
// .group-shadow {
// transition: all ease 0.2s;
// }
// .group-shadow:hover {
// transform: scale(1.05);
// }
} }
} }
} }

161
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

@ -3,25 +3,31 @@
<div class="lighting-img-box"> <div class="lighting-img-box">
<!-- 左上角区域切换 --> <!-- 左上角区域切换 -->
<div class="btn-box"> <div class="btn-box">
<button class="btn-item" @click=changeArea(1)>1F</button> <button class="btn-item" @click=changeFloor(1)>1F</button>
<button class="btn-item" @click=changeArea(2)>2F</button> <button class="btn-item" @click=changeFloor(2)>2F</button>
<button class="btn-item" @click=changeArea(3)>站台</button>
</div> </div>
<!-- 楼层区域 --> <!-- 楼层区域 -->
<div class="area"> <div class="area">
<div <div
v-for="(item, index) in treeData" v-for="(item, index) in treeData"
:class="computedClass(String(item.id))" :class="computedClass(item.id)"
@click="getArea(item)" @click="changeThisArea([item])"
:key="index"> :key="index">
<div v-for="(v, i) in item.children" :key="i" class="light-group"> <div v-for="(v, i) in item.children" :key="i" class="light-group">
<div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v)"></div> <div class="group-shadow" @click.stop="changeThisArea([item, v])">
<div :class="computedClass(v.id)" class="shadow-box"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 照明设备 --> <!-- 照明设备 -->
<div class="lights"> <div class="lights">
<light v-for="(item, index) in bulbs" :key="index" :styleObject="item.styleText" :type="item.type" :visible="item.visible"></light> <light v-for="(item, index) in bulbs"
:key="index"
:styleObject="item.styleText"
:type="item.type"
:visible="item.visible">
</light>
</div> </div>
</div> </div>
<!-- 右侧抽屉的触发按钮 --> <!-- 右侧抽屉的触发按钮 -->
@ -44,7 +50,7 @@
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"> :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
<a-tabs v-model:activeKey="activeKey"> <a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="控制面板"> <a-tab-pane key="1" tab="控制面板">
<tabs1 @changeArea="getArea" :treeData="treeData"></tabs1> <tabs1 @changeArea="changeArea" :treeData="treeData" :nowArea="nowArea"></tabs1>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" tab="计划列表" force-render> <a-tab-pane key="2" tab="计划列表" force-render>
<tabs2></tabs2> <tabs2></tabs2>
@ -59,94 +65,170 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref, onMounted } from 'vue';
import { treeData } from './treeData' //
import light from './light.vue'; import light from './light.vue';
import tabs1 from './tabs1.vue' import tabs1 from './tabs1.vue'
import tabs2 from './tabs2.vue' import tabs2 from './tabs2.vue'
import tabs3 from './tabs3.vue' import tabs3 from './tabs3.vue'
//
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
// ICON // ICON
import { import {
DoubleLeftOutlined, DoubleLeftOutlined,
DoubleRightOutlined DoubleRightOutlined
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
// =======================================================
interface items {
id: string,
}
// - - // =======================================================
onMounted(() => {
http.post(lightingManage.getArea, { floor: '1', siteId: '10000001' }).then(res => {
const data = res.data
/** 使
* @param id 用于判断样式和层级的前端属性
* @param selected 用于表示是否选中的前端属性
*/
data.forEach((item, index) => {
if (index == 0) {
item.selected = true
} else {
item.selected = false
}
item.id = String(index + 1)
item.children = []
// deviceGroup
let i = 1;
for (let obj in item.deviceGroup) {
item.deviceGroup[obj].selected = false
item.deviceGroup[obj].id = String((index + 1) + '-' + i++)
item.children.push(item.deviceGroup[obj])
}
})
treeData.value = data
})
})
// =====================================================
//
const changeFloor = (area: number) => {
if (area == 1) {
console.log('1F')
} else if (area == 2) {
console.log('2F')
}
}
// =====================================================
//
const treeData = ref([])
// id
const nowArea = ref('1')
// -
const area = ref(['1']) const area = ref(['1'])
// - - // 线 -
const bulbs = ref([ const bulbs = ref([
{ {
styleText: { left: '190px', bottom: '200px' }, styleText: { left: '180px', bottom: '200px' },
area: 1, area: 1,
type: 1, type: 1,
visible: true visible: true
}, },
{ {
styleText: { left: '245px', bottom: '125px' }, styleText: { left: '230px', bottom: '125px' },
area: 1, area: 1,
type: 2, type: 2,
visible: true visible: true
}, },
{ {
styleText: { left: '355px', bottom: '160px' }, styleText: { left: '320px', bottom: '140px' },
area: 1, area: 1,
type: 3, type: 3,
visible: true visible: true
}, },
{ {
styleText: { left: '295px', bottom: '230px' }, styleText: { left: '245px', bottom: '230px' },
area: 1, area: 1,
type: 3, type: 3,
visible: true visible: true
}, },
{ {
styleText: { left: '425px', bottom: '230px' }, styleText: { left: '405px', bottom: '230px' },
area: 2, area: 2,
type: 3, type: 3,
visible: true visible: true
}, },
{ {
styleText: { left: '470px', bottom: '190px' }, styleText: { left: '460px', bottom: '180px' },
area: 2, area: 2,
type: 3, type: 3,
visible: true visible: true
}, },
{ {
styleText: { left: '380px', bottom: '275px' }, styleText: { left: '360px', bottom: '275px' },
area: 2, area: 2,
type: 3, type: 3,
visible: true visible: true
}, },
{ {
styleText: { left: '700px', bottom: '320px' }, styleText: { left: '715px', bottom: '320px' },
area: 3, area: 3,
type: 1, type: 1,
visible: true visible: true
}, },
]) ])
// 线
// - const changeArea = (result: any) => {
const changeArea = (area: number) => { console.log(result,'changeArea')
if (area == 1) { //
console.log('1F')
} else if (area == 2) {
console.log('2F')
} else if (area == 3) {
console.log('站台')
}
}
// -
const getArea = (result: any) => {
//
if (Array.isArray(result)) { if (Array.isArray(result)) {
area.value = result area.value = result
// //
} else { } else {
area.value.length = 0 area.value.length = 0
area.value[0] = String(result) area.value[0] = String(result)
} }
} }
// - //
const changeThisArea = (result: any) => {
console.log(result, 'changeThisArea')
//
reset()
let level1 = result[0];
area.value.length = 0
if (result.length === 1) {
result[0].selected = true
area.value.push(result[0].id)
} else if (result.length === 2) {
//
if (!level1) {
level1 = treeData.value[0]
}
// true
level1.selected = result[1].selected = true
area.value.splice(0, 0, level1.id, result[1].id)
}
nowArea.value = level1.id
}
//
const reset = () => {
treeData.value.forEach(item => {
item.selected = false
item.children.forEach(i => {
i.selected = false
})
})
}
//
const computedClass = (string: string) => { const computedClass = (string: string) => {
if (area.value.indexOf(string) != -1) { if (area.value.indexOf(string) != -1) {
return `isActive area-item area${string}` return `isActive area-item area${string}`
@ -154,6 +236,9 @@ const computedClass = (string: string) => {
return `area-item area${string}` return `area-item area${string}`
} }
} }
// =====================================================
// - tab // - tab
let activeKey = ref('1'); let activeKey = ref('1');
// - // -
@ -166,9 +251,11 @@ const toggleDrawer = () => {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "./index.less"; @import "./index.less";
//
.isActive { .isActive {
border: 3px solid white !important; border: 3px solid white !important;
} }
// tab
:deep(.ant-tabs-tab-btn) { :deep(.ant-tabs-tab-btn) {
color: white; color: white;
} }

439
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less

@ -0,0 +1,439 @@
// 抽屉
.drawer-item {
.light-area,
.circuit-area,
.control-area,
.control-scene-area,
.light-parameters-area {
width: 100%;
margin-top: 20px;
display: flex;
align-items: center;
}
.light-area-tab,
.circuit-tab,
.control-tab,
.control-scene-tab,
.light-parameters-tab {
width: 5px;
height: 23px;
opacity: 1;
background: rgba(26, 174, 251, 1);
margin-right: 4px;
}
.light-area-text,
.circuit-text,
.control-text,
.control-scene-text,
.light-parameters-text {
font-size: 14px;
color: white;
padding-left: 5px;
line-height: 23px;
width: 110px;
height: 23px;
background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
user-select: none;
}
.light-area-tab,
.light-area-text {
display: inline-block;
justify-content: center;
}
.plan.enabled {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
vertical-align: top;
margin-left: 235px;
width: 88px;
height: 32px;
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
color: white;
}
.plan.disabled {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
margin-left: 235px;
width: 88px;
height: 32px;
background-color: red;
}
.plan:disabled {
cursor: not-allowed;
}
.openPlan.enabled2 {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
width: 88px;
height: 32px;
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
color: white;
}
.openPlan.disabled2 {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
width: 88px;
height: 32px;
background-color: red;
}
.openPlan:disabled {
cursor: not-allowed;
}
.btn2 {
display: flex;
align-items: center;
margin-left: 80px;
}
.openzm {
cursor: pointer;
color: rgba(34, 183, 255, 1);
margin-left: 20px;
font-size: 14px;
}
.custom-checkbox {
width: 13px;
height: 13px;
}
.both {
width: 59.79px;
height: 32px;
opacity: 1;
background: linear-gradient(180deg,
rgba(255, 187, 0, 1) 0%,
rgba(255, 112, 3, 1) 91.21%,
rgba(255, 129, 3, 1) 100%);
margin-left: 8px;
font-size: 12px;
color: white;
border: none;
border-radius: 5px;
}
.btn2 {
button {
margin: 0 5px;
}
}
.allBtn {
border: 0;
width: 40px;
color: white;
background-color: transparent;
}
.blue-background.ant-switch-checked {
background-color: linear-gradient(180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%) !important;
}
.grey-background.ant-switch {
background-color: grey !important;
}
.blue-background.ant-switch-checked .ant-switch-handle {
background-color: linear-gradient(180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%) !important;
}
.grey-background.ant-switch .ant-switch-handle {
background-color: grey !important;
}
p {
color: white;
}
.area,
.btnArea,
.control-mode-btn-area,
.control-scene-btn-area {
margin-left: -17px;
button {
width: 21%;
padding: 0 2%;
}
}
.btn {
width: 92px;
height: 40px;
border-radius: 4px;
opacity: 1;
margin-top: 10px;
margin-left: 17px;
font-size: 14px;
font-weight: 400;
opacity: 1;
border: 1px solid rgba(207, 212, 219, 1);
line-height: 20.27px;
color: white;
text-align: center;
vertical-align: top;
background-color: rgba(255, 255, 255, 0.1);
}
.selected {
background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
color: rgba(0, 61, 90, 1);
border: 1px solid white;
}
.btn:hover {
background-color: rgba(207, 212, 219, 1);
}
.btn:active {
background-color: rgba(102, 102, 102, 1);
color: white;
}
.circuit-area,
.control-scene-area,
.light-parameters-area {
left: 51px;
width: 100%;
margin-top: 20px;
}
.circuit-tab,
.circuit-text {
display: inline-block;
}
.batch {
width: 60px;
height: 32px;
opacity: 1;
border: 1px solid rgba(67, 136, 251, 1);
color: rgba(67, 136, 251, 1);
border-radius: 5px;
background-color: white;
margin-left: 11px;
}
.control-area {
left: 51px;
width: 100%;
margin-top: 20px;
}
.control-tab,
.control-text {
display: inline-block;
}
:deep(.cell) {
text-align: center;
}
:deep(#pane-first) {
height: 100%;
}
.control-scene-tab,
.control-scene-text {
display: inline-block;
}
.light-parameters-tab,
.light-parameters-text {
display: inline-block;
}
.light-parameters-textarea>p {
height: 100%;
display: flex;
border: 1px solid rgba(236, 239, 245, 1);
justify-content: center;
align-items: center;
}
.bottom {
width: 100%;
height: 64px;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0;
right: 0;
}
.execute {
margin-right: 20px;
width: 74px;
height: 40px;
opacity: 1;
cursor: pointer;
border-radius: 4px;
background: rgba(67, 136, 251, 1);
font-size: 14px;
font-weight: 400;
color: white;
border: 0;
margin: 0 10px;
}
.flushed {
width: 74px;
height: 40px;
cursor: pointer;
opacity: 1;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
background: white;
border: 1px solid rgba(193, 197, 204, 1);
margin: 0 10px;
}
:deep(.ant-table-pagination) {
visibility: hidden;
}
.drawer-content {
margin-left: 20px;
}
.arrow-indicator {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
.drawer-title1 {
position: fixed;
width: 33px;
height: 33px;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
z-index: 99999;
}
.drawer-title2 {
position: fixed;
width: 33px;
height: 33px;
top: 0;
bottom: 0;
right: 495px;
margin: auto;
z-index: 99999;
}
.arrowbtn {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 1);
opacity: 0.5;
border: none;
}
:deep(.ant-tabs-tab-btn) {
color: white;
}
:deep(.ant-table) {
background-color: transparent;
}
:deep(.ant-table-bordered) {
background-color: transparent;
}
:deep(.ant-table-thead) {
background-color: transparent;
}
:deep(.ant-table-cell) {
background-color: transparent;
color: #fff;
}
.custom-table {
border-collapse: collapse;
width: 416px;
height: 60px;
color: rgba(255, 255, 255, 1);
}
.custom-table th,
.custom-table td {
border: 1px solid rgba(163, 192, 243, 1);
text-align: left;
padding: 8px;
text-align: center;
}
.table1 {
margin-top: 20px;
width: 100%;
cellspacing: 0;
cellpadding: 0;
border: 1px solid rgba(255, 255, 255);
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
}
.light-area,
.circuit-area,
.control-area,
.control-scene-area,
.light-parameters-area {
width: 100%;
margin-top: 20px;
display: flex;
align-items: center;
}
.zmhlbtn {
position: relative;
}
// 禁用图标
.anticon-stop {
position: absolute;
right: 3px;
bottom: 3px;
}
}

615
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

@ -1,4 +1,5 @@
<template> <template>
<a-spin :spinning="isLoading">
<!-- 照明区域 --> <!-- 照明区域 -->
<div> <div>
<div class="light-area"> <div class="light-area">
@ -13,7 +14,7 @@
<template v-if="!showAllButtonsArea"> <template v-if="!showAllButtonsArea">
<button v-for="(button, index) in limitedButtons1" :key="index" <button v-for="(button, index) in limitedButtons1" :key="index"
:class="{ btn: true, selected: button.selected }" @click="selectButton(button)"> :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
{{ button.label }} {{ button.regionName }}
</button> </button>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span> <span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span>
@ -22,7 +23,7 @@
<template v-else> <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="selectButton(button)"> @click="selectButton(button)">
{{ button.label }} {{ button.regionName }}
</button> </button>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span> <span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
@ -51,19 +52,20 @@
</div> </div>
<div class="btnArea" v-if="selectedButton"> <div class="btnArea" v-if="selectedButton">
<template v-if="!showAllButtons"> <template v-if="!showAllButtons">
<button v-for="(button2, index) in limitedButtons2" :key="index" <button v-for="(button, index) in limitedButtons2" :key="index"
:class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)"> :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
<stop-outlined v-if="button2.stop" /> <stop-outlined v-if="button.panel" />
{{ button2.label }} {{ button.deviceName }}
</button> </button>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span> <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<button v-for="(button2, index) in buttons2" :key="index" :class="{ btn: true, selected: button2.selected }" <button v-for="(button, index) in buttons2" :key="index"
@click="toggleSelection(button2)"> :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
{{ button2.label }} <stop-outlined v-if="button.panel" />
{{ button.deviceName }}
</button> </button>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span> <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
@ -71,7 +73,7 @@
</template> </template>
</div> </div>
</div> </div>
<!-- 控制模式 --> <!-- 控制模式部分 -->
<div> <div>
<div class="control-area" v-show="showControlMode"> <div class="control-area" v-show="showControlMode">
<div class="control-tab"></div> <div class="control-tab"></div>
@ -85,7 +87,7 @@
</button> </button>
</div> </div>
</div> </div>
<!-- 控制场景 --> <!-- 控制场景部分 -->
<div> <div>
<div class="control-scene-area" v-show="showControlScene"> <div class="control-scene-area" v-show="showControlScene">
<div class="control-scene-tab"></div> <div class="control-scene-tab"></div>
@ -99,7 +101,7 @@
</button> </button>
</div> </div>
</div> </div>
<!-- 灯具参数 --> <!-- 灯具参数部分表格 -->
<div> <div>
<div class="light-parameters-area" v-if="selectedButton4"> <div class="light-parameters-area" v-if="selectedButton4">
<div class="light-parameters-tab"></div> <div class="light-parameters-tab"></div>
@ -126,11 +128,21 @@
<div style="margin-bottom: 60px;"></div> <div style="margin-bottom: 60px;"></div>
</div> </div>
</div> </div>
<!-- 底部按钮区 -->
<div class="bottom"> <div class="bottom">
<button class="flushed" @click="refresh">刷新</button> <a-popconfirm
title="刷新将会取消已作出的修改"
ok-text="确定"
cancel-text="取消"
@confirm="changeConfirm"
@cancel="changeCancel"
>
<button class="flushed">刷新</button>
</a-popconfirm>
<button class="execute" @click="showModal">执行</button> <button class="execute" @click="showModal">执行</button>
</div> </div>
<!-- 点击执行时的弹出框 -->
<div class="out-dialog" v-if="executeVisible"> <div class="out-dialog" v-if="executeVisible">
<div class="content" v-if="executeVisible"> <div class="content" v-if="executeVisible">
<div> <div>
@ -195,94 +207,116 @@
<button class="execute">执行</button> <button class="execute">执行</button>
</div> </div>
</div> </div>
</a-spin>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted } from 'vue'; import { ref, computed, onMounted, watch } from 'vue';
import { controlType } from './treeData' import { controlType } from './treeData'
import { import {
DownOutlined, DownOutlined,
UpOutlined, UpOutlined,
StopOutlined, StopOutlined,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
//
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
// =========================================================================
//
onMounted(() => { onMounted(() => {
const data = props.treeData[0] setArea()
})
// 线
const setArea = () => {
const data = props.treeData.find(item => {
return item.id == props.nowArea
})
// //
data.selected = true data.selected = true
// //
selectedButton.value = props.nowArea
//
buttons2.value = data.children buttons2.value = data.children
}) }
// =================================================================== // ===================================================================
const props = defineProps({ const props = defineProps({
// > // >
treeData: { treeData: {
type: Array, type: Array,
default: [] default: []
}, },
line: { // ID
type: Array nowArea: {
type: String,
} }
}); });
//
const emit = defineEmits(['changeArea']); const emit = defineEmits(['changeArea']);
//
watch(() => props.nowArea, () => {
setArea()
})
// ========================================================================== // ==========================================================================
// - //
const isPlanEnabled = ref(false); const isPlanEnabled = ref(false);
// - //
const togglePlan = () => { const togglePlan = () => {
isPlanEnabled.value = !isPlanEnabled.value; isPlanEnabled.value = !isPlanEnabled.value;
}; };
// - //
const showAllButtonsArea = ref(false); const showAllButtonsArea = ref(false);
// - - 1 // 1
const selectedButton = ref('1'); const selectedButton = ref('1');
// - - // -
const selectButton = (button: any) => { const selectButton = (button: any) => {
console.log(button,'button')
// //
selectedButton.value = button; selectedButton.value = button.id;
// //
initMenu(1) initMenu(1)
button.selected = true button.selected = true
buttons2.value = button.children buttons2.value = button.children
// area // area
emit('changeArea', []);
emit('changeArea', button.id); emit('changeArea', button.id);
}; };
// - 8 // 8
const limitedButtons1 = computed(() => props.treeData.slice(0, 8)); const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
// ========================================================================== // ==========================================================================
// - //
const zmhlid = ref(''); const handleButton = ref('');
// -
const selectAllCheckbox = ref(false);
// - / // /
const isPlanEnabled2 = ref(true); const isPlanEnabled2 = ref(true);
// - / // /
const togglePlan2 = () => { const togglePlan2 = () => {
// //
const item = buttons2.value.find((button) => button.id === zmhlid.value) const btn = buttons2.value.find((button) => button.id === handleButton.value)
let panel = +(!btn.panel)
isLoading.value = true
http.get(lightingManage.setDisable, { deviceGroup: btn.deviceGroup, panel }).then(res => {
if (res.msg === 'success') {
isPlanEnabled2.value = !isPlanEnabled2.value; isPlanEnabled2.value = !isPlanEnabled2.value;
// - btn.panel = panel
if (isPlanEnabled2.value) { isLoading.value = false
item.stop = true
// -
} else { } else {
item.stop = false isLoading.value = false
} }
}).catch(() => { isLoading.value = false })
}; };
// - //
let singleSelection = ref(true);
//
const selectAll = () => { const selectAll = () => {
emit('changeArea', [String(selectedButton.value.id)]) emit('changeArea', [selectedButton.value])
selectAllCheckbox.value = false selectAllCheckbox.value = false
buttons2.value.forEach((button) => { buttons2.value.forEach((button) => {
button.selected = false; button.selected = false;
@ -291,11 +325,11 @@ const selectAll = () => {
showControlMode.value = false showControlMode.value = false
}; };
// - //
let singleSelection = ref(true); const selectAllCheckbox = ref(false);
// - switch // switch
const toggleAllSelection = () => { const toggleAllSelection = () => {
let arr = [String(selectedButton.value.id)] let arr = [selectedButton.value]
// //
if (selectAllCheckbox.value) { if (selectAllCheckbox.value) {
buttons2.value.forEach((item) => { buttons2.value.forEach((item) => {
@ -312,19 +346,18 @@ const toggleAllSelection = () => {
emit('changeArea', arr) emit('changeArea', arr)
}; };
// - //
const toggleSelection = (button: any) => { const toggleSelection = (button: any) => {
// ID/ // ID/
zmhlid.value = button.id handleButton.value = button.id
// / // /
if (button.stop) { if (button.panel) {
isPlanEnabled2.value = true isPlanEnabled2.value = true
} else { } else {
isPlanEnabled2.value = false isPlanEnabled2.value = false
} }
// //
let level1 = String(selectedButton.value.id) let level1 = selectedButton.value
let level2 = button.id let level2 = button.id
// false // false
if (singleSelection.value) { if (singleSelection.value) {
@ -359,19 +392,20 @@ const toggleSelection = (button: any) => {
showControlMode.value = false showControlMode.value = false
thisButton.value = { type: '0' } thisButton.value = { type: '0' }
} }
}; };
// -
//
const buttons2 = ref([]);
//
const showAllButtons = ref(false); const showAllButtons = ref(false);
// - 8 // 8
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8)); const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
// -
const buttons2 = ref([]);
// ======================================================================= // =======================================================================
// -
//
const showControlMode = ref(false); const showControlMode = ref(false);
const thisButton = ref({ type: '0' }) const thisButton = ref({ type: 0 })
// - // -
const selectButton3 = (button3) => { const selectButton3 = (button3) => {
thisButton.value.type = button3.type thisButton.value.type = button3.type
@ -380,7 +414,8 @@ const selectButton3 = (button3) => {
}; };
// ======================================================================= // =======================================================================
// -
//
const showControlScene = ref(false); const showControlScene = ref(false);
// - // -
const controlSceneButtons = ref([ const controlSceneButtons = ref([
@ -397,6 +432,7 @@ const selectButton4 = (button4) => {
}; };
// ======================================================================== // ========================================================================
// - // -
const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]); const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
@ -409,6 +445,7 @@ const handleRowClick = (index: any) => {
}; };
// ======================================================================== // ========================================================================
const cxList = ref([ const cxList = ref([
{ {
id: '1', id: '1',
@ -447,10 +484,8 @@ const cxList = ref([
brightness4: '3800k', brightness4: '3800k',
}, },
]); ]);
// const cxList = cxList.value.concat(cxList.value)
// //
const delBtn = (id: any) => { const delBtn = (id: any) => {
console.log(id);
cxList.value.pop(id); cxList.value.pop(id);
console.log(cxList.value.length); console.log(cxList.value.length);
@ -460,6 +495,8 @@ const delBtn = (id: any) => {
}; };
// ======================================================================== // ========================================================================
const isLoading = ref(false)
// 5 // 5
const initMenu = (tier: number) => { const initMenu = (tier: number) => {
// 1 = - // 1 = -
@ -489,8 +526,7 @@ const initMenu = (tier: number) => {
const refresh = () => { const refresh = () => {
executeVisible.value = false executeVisible.value = false
selectedButton.value = '1'; selectedButton.value = '1';
emit('changeArea', []); emit('changeArea', ['1']);
emit('changeArea', [1]);
showControlMode.value = false; showControlMode.value = false;
showControlScene.value = false; showControlScene.value = false;
selectedButton4.value = null; selectedButton4.value = null;
@ -500,446 +536,19 @@ const executeVisible = ref<boolean>(false);
const showModal = () => { const showModal = () => {
executeVisible.value = true; executeVisible.value = true;
}; };
</script>
<style lang="less" scoped>
@import "./dialogStyle.less";
//
.drawer-item {
.light-area,
.circuit-area,
.control-area,
.control-scene-area,
.light-parameters-area {
width: 100%;
margin-top: 20px;
display: flex;
align-items: center;
}
.light-area-tab,
.circuit-tab,
.control-tab,
.control-scene-tab,
.light-parameters-tab {
width: 5px;
height: 23px;
opacity: 1;
background: rgba(26, 174, 251, 1);
margin-right: 4px;
}
.light-area-text,
.circuit-text,
.control-text,
.control-scene-text,
.light-parameters-text {
font-size: 14px;
color: white;
padding-left: 5px;
line-height: 23px;
width: 110px;
height: 23px;
background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
user-select: none;
}
.light-area-tab,
.light-area-text {
display: inline-block;
justify-content: center;
}
.plan.enabled {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
vertical-align: top;
margin-left: 235px;
width: 88px;
height: 32px;
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
color: white;
}
.plan.disabled {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
margin-left: 235px;
width: 88px;
height: 32px;
background-color: red;
}
.plan:disabled {
cursor: not-allowed;
}
.openPlan.enabled2 {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
width: 88px;
height: 32px;
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
color: white;
}
.openPlan.disabled2 {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
width: 88px;
height: 32px;
background-color: red;
}
.openPlan:disabled {
cursor: not-allowed;
}
.btn2 {
display: flex;
align-items: center;
margin-left: 80px;
}
.openzm {
cursor: pointer;
color: rgba(34, 183, 255, 1);
margin-left: 20px;
font-size: 14px;
}
.custom-checkbox {
width: 13px;
height: 13px;
}
.both {
width: 59.79px;
height: 32px;
opacity: 1;
background: linear-gradient(180deg,
rgba(255, 187, 0, 1) 0%,
rgba(255, 112, 3, 1) 91.21%,
rgba(255, 129, 3, 1) 100%);
margin-left: 8px;
font-size: 12px;
color: white;
border: none;
border-radius: 5px;
}
.btn2 {
button {
margin: 0 5px;
}
}
.allBtn {
border: 0;
width: 40px;
color: white;
background-color: transparent;
}
.blue-background.ant-switch-checked {
background-color: linear-gradient(180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%) !important;
}
.grey-background.ant-switch {
background-color: grey !important;
}
.blue-background.ant-switch-checked .ant-switch-handle {
background-color: linear-gradient(180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%) !important;
}
.grey-background.ant-switch .ant-switch-handle {
background-color: grey !important;
}
p {
color: white;
}
.area,
.btnArea,
.control-mode-btn-area,
.control-scene-btn-area {
margin-left: -17px;
button {
width: 21%;
padding: 0 2%;
}
}
.btn {
width: 92px;
height: 40px;
border-radius: 4px;
opacity: 1;
margin-top: 10px;
margin-left: 17px;
font-size: 14px;
font-weight: 400;
opacity: 1;
border: 1px solid rgba(207, 212, 219, 1);
line-height: 20.27px;
color: white;
text-align: center;
vertical-align: top;
background-color: rgba(255, 255, 255, 0.1);
}
.selected {
background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
color: rgba(0, 61, 90, 1);
border: 1px solid white;
}
.btn:hover {
background-color: rgba(207, 212, 219, 1);
}
.btn:active {
background-color: rgba(102, 102, 102, 1);
color: white;
}
.circuit-area,
.control-scene-area,
.light-parameters-area {
left: 51px;
width: 100%;
margin-top: 20px;
}
.circuit-tab,
.circuit-text {
display: inline-block;
}
.batch {
width: 60px;
height: 32px;
opacity: 1;
border: 1px solid rgba(67, 136, 251, 1);
color: rgba(67, 136, 251, 1);
border-radius: 5px;
background-color: white;
margin-left: 11px;
}
.control-area {
left: 51px;
width: 100%;
margin-top: 20px;
}
.control-tab,
.control-text {
display: inline-block;
}
:deep(.cell) {
text-align: center;
}
:deep(#pane-first) {
height: 100%;
}
.control-scene-tab,
.control-scene-text {
display: inline-block;
}
.light-parameters-tab,
.light-parameters-text {
display: inline-block;
}
.light-parameters-textarea>p { //
height: 100%; const changeConfirm = () => {
display: flex; refresh()
border: 1px solid rgba(236, 239, 245, 1); }
justify-content: center;
align-items: center;
}
.bottom {
width: 100%;
height: 64px;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0;
right: 0;
}
.execute {
margin-right: 20px;
width: 74px;
height: 40px;
opacity: 1;
cursor: pointer;
border-radius: 4px;
background: rgba(67, 136, 251, 1);
font-size: 14px;
font-weight: 400;
color: white;
border: 0;
margin-left: 10px;
}
.flushed {
width: 74px;
height: 40px;
cursor: pointer;
opacity: 1;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
background: white;
border: 1px solid rgba(193, 197, 204, 1);
}
:deep(.ant-table-pagination) {
visibility: hidden;
}
.drawer-content {
margin-left: 20px;
}
.arrow-indicator {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
.drawer-title1 {
position: fixed;
width: 33px;
height: 33px;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
z-index: 99999;
}
.drawer-title2 {
position: fixed;
width: 33px;
height: 33px;
top: 0;
bottom: 0;
right: 495px;
margin: auto;
z-index: 99999;
}
.arrowbtn {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 1);
opacity: 0.5;
border: none;
}
:deep(.ant-tabs-tab-btn) {
color: white;
}
:deep(.ant-table) {
background-color: transparent;
}
:deep(.ant-table-bordered) {
background-color: transparent;
}
:deep(.ant-table-thead) {
background-color: transparent;
}
:deep(.ant-table-cell) {
background-color: transparent;
color: #fff;
}
.custom-table {
border-collapse: collapse;
width: 416px;
height: 60px;
color: rgba(255, 255, 255, 1);
}
.custom-table th,
.custom-table td {
border: 1px solid rgba(163, 192, 243, 1);
text-align: left;
padding: 8px;
text-align: center;
}
.table1 {
margin-top: 20px;
width: 100%;
cellspacing: 0;
cellpadding: 0;
border: 1px solid rgba(255, 255, 255);
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
}
.light-area,
.circuit-area,
.control-area,
.control-scene-area,
.light-parameters-area {
width: 100%;
margin-top: 20px;
display: flex;
align-items: center;
}
.zmhlbtn { //
position: relative; const changeCancel = () => {
}
//
.anticon-stop {
position: absolute;
right: 3px;
bottom: 3px;
}
} }
</script>
<style lang="less" scoped>
@import "./dialogStyle.less";
@import "./tabs1.less";
</style> </style>

79
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue

@ -14,10 +14,10 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="(row, index) in dataSource" :key="index"> <tr v-for="(row, index) in dataSource" :key="index">
<td>{{ row.key }}</td> <td>{{ index + 1 }}</td>
<td>{{ row.data }}</td> <td>{{ row.startTime }}</td>
<td>{{ row.planName }}</td> <td>{{ row.planName }}</td>
<td v-if="row.status === '待执行'"> <td v-if="row.planStatus == '2'">
<button <button
style=" style="
font-size: 12px; font-size: 12px;
@ -25,10 +25,10 @@
color: rgb(57, 215, 187); color: rgb(57, 215, 187);
border: 1px solid rgb(57, 215, 187); border: 1px solid rgb(57, 215, 187);
"> ">
{{ row.status }} 已执行
</button> </button>
</td> </td>
<td v-if="row.status !== '待执行'"> <td v-if="row.planStatus == '1'">
<button <button
style=" style="
font-size: 12px; font-size: 12px;
@ -36,7 +36,7 @@
border: 1px solid rgba(243, 97, 99); border: 1px solid rgba(243, 97, 99);
color: rgba(243, 97, 99); color: rgba(243, 97, 99);
"> ">
{{ row.status }} 待执行
</button> </button>
</td> </td>
<td> <td>
@ -73,41 +73,53 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
//
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
// // ===========================================================
onMounted(() => {
onMounted(() => {
getTable()
getLeftPlan()
}) })
// tab ========================================================
// //
const dataSource = ref([ const dataSource = ref([]);
{ //
key: '1', const getTable = () => {
data: '2024-05-01', http.get(lightingManage.getPlanTable, {}).then(res => {
planName: '劳动节', dataSource.value = res.data
status: '暂停中', })
}, }
{
key: '2', // tab ====================================================
data: '2024-05-01',
planName: '国庆节', //
status: '待执行', const addVisible = ref(false);
}, //
{ const addModal = () => {
key: '3', addVisible.value = true;
data: '2024-05-01', };
planName: '元旦',
status: '待执行', // 穿 =======================================================
},
]); // 穿
const addVisible = ref<boolean>(false); const transferData = ref([])
// 穿
const getLeftPlan = () => {
http.get(lightingManage.getLeftPlan, {}).then(res => {
console.log(res)
})
}
// //
const handleRefClick1 = () => { const handleRefClick1 = () => {
alert(111) alert(111)
}; };
const addModal = () => {
addVisible.value = true;
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => { const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
console.log(keys, direction, moveKeys); console.log(keys, direction, moveKeys);
}; };
@ -138,8 +150,6 @@ const mockData = ref([
]); ]);
const targetKeys = ref<string[]>([]); const targetKeys = ref<string[]>([]);
const filterOption = (inputValue: string, option: MockData) => { const filterOption = (inputValue: string, option: MockData) => {
console.log(option.description);
return option.description.indexOf(inputValue) > -1; return option.description.indexOf(inputValue) > -1;
}; };
@ -200,6 +210,7 @@ const filterOption = (inputValue: string, option: MockData) => {
letter-spacing: 0; letter-spacing: 0;
line-height: 20px; line-height: 20px;
color: rgba(67, 136, 251, 1); color: rgba(67, 136, 251, 1);
cursor: pointer;
} }
.tabReboot { .tabReboot {
margin-right: 8px; margin-right: 8px;

12
hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue

@ -18,19 +18,19 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="out-dialog" v-if="logModalVisible">
<div class="out-dialog" :class="{ 'showDialog' : logModalVisible }" v-if="logModalVisible">
<div class="content" v-if="logModalVisible"> <div class="content" v-if="logModalVisible">
<div> <div>
<div class="div-operation"></div> <div class="div-operation"></div>
<span class="text-operation">变更内容 </span> <span class="text-operation">操作日志 </span>
</div> </div>
<div class="jbox" v-for="item in cxList" :key="item.id"> <div class="j-box" v-for="item in cxList" :key="item.id">
<div class="journal" style="margin-top: 20px"> <div class="journal" style="margin-top: 20px">
<div class="imgText"> <div class="imgText">
<div class="zjzm"> <div class="zjzm">
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp; <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)">{{ <span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
item.name }}</span>
</div> </div>
</div> </div>
<div class="btn-box"> <div class="btn-box">
@ -180,7 +180,6 @@ const handleRowClick = (index: any) => {
// //
.div-add { .div-add {
height: 64px; height: 64px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -199,6 +198,7 @@ const handleRowClick = (index: any) => {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
cursor: pointer;
} }
} }

Loading…
Cancel
Save