From 3598e3d887e4387d2499f9a1669c84716b095640 Mon Sep 17 00:00:00 2001 From: chenpingsen Date: Mon, 15 Jul 2024 15:56:31 +0800 Subject: [PATCH] =?UTF-8?q?add:=E5=A2=9E=E5=8A=A0=E7=85=A7=E6=98=8E?= =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E5=89=8D=E7=AB=AF=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lightingManage/dialogStyle.less | 141 +++ .../equipmentControl/lightingManage/index.less | 1108 +++----------------- .../equipmentControl/lightingManage/indexs.less | 156 --- .../equipmentControl/lightingManage/indexs.vue | 50 +- .../equipmentControl/lightingManage/indexs1.vue | 15 +- .../view/equipmentControl/lightingManage/tabs1.vue | 457 ++++---- .../view/equipmentControl/lightingManage/tabs2.vue | 216 ++++ .../view/equipmentControl/lightingManage/tabs3.vue | 255 +++++ 8 files changed, 995 insertions(+), 1403 deletions(-) create mode 100644 hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less delete mode 100644 hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less create mode 100644 hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue create mode 100644 hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less new file mode 100644 index 0000000..7dee3a5 --- /dev/null +++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less @@ -0,0 +1,141 @@ +.out-dialog { + position: fixed; + right: 496px; + width: 500px; + height: 100%; + top: 0; + bottom: 0; + margin: auto; + box-sizing: border-box; + color: rgb(255, 83, 0); + background: black; + display: flex; + padding: 25px; + flex-direction: column; + .content { + overflow-y: scroll; + .div-operation { + display: inline-block; + width: 3px; + height: 13px; + opacity: 1; + border-radius: 1px; + background: rgba(67, 136, 251, 1); + } + .text-operation { + display: inline-block; + color: rgba(255, 255, 255, 1); + font-size: 16px; + font-weight: 700; + margin-left: 5px; + } + .j-box { + background-color: #000; + opacity: 1; + z-index: 99999; + overflow-y: scroll; + .journal { + padding: 1% 3%; + width: 100%; + height: 150px; + background-color: rgba(0, 0, 0); + border-radius: 12px; + border: 2px solid transparent; + border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1; + } + .imgText { + display: flex; + align-items: center; + justify-content: space-between; + + .ztzm { + display: flex; + align-items: center; + } + + .cxbtn { + color: rgba(255, 255, 255, 1); + border: none; + border-radius: 6px; + 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% + ); + } + } + .btn-box { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-row-gap: 15px; + .btn-item { + text-align: center; + display: flex; + align-content: space-between; + .left { + width: 70px; + height: 35px; + line-height: 35px; + border-radius: 4px; + background: linear-gradient( + 180deg, + rgba(1, 206, 255, 1) 0%, + rgba(0, 150, 229, 1) 100% + ); + color: rgba(255, 255, 255, 1); + font-size: 14px; + font-weight: 400; + } + .right { + width: 140px; + height: 35px; + line-height: 35px; + span { + vertical-align: middle; + } + img { + padding: 0 5px; + } + } + } + } + } + } + + .button-box { + width: 100%; + box-sizing: border-box; + padding: 10px; + height: 60px; + position: absolute; + background-color: transparent; + bottom: 0; + left: 0; + right: 0; + .execute, .cancel { + margin-right: 10px; + width: 74px; + height: 40px; + opacity: 1; + cursor: pointer; + border-radius: 4px; + font-size: 14px; + font-weight: 400; + border: 0; + margin-left: 10px; + } + .execute { + background: rgb(67, 136, 251); + color: white; + } + .cancel { + background: white; + color: black; + } + } +} \ No newline at end of file diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less index 5d707a0..dd02f25 100644 --- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less +++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less @@ -1,952 +1,156 @@ -// \ No newline at end of file +// 页面容器 +.lighting-box { + // width: 100%; + // height: 100%; + position: relative; + // background: linear-gradient(#badaff, #8cabeb, #7095de); + // 照明设备功能总容器 + .lighting-img-box { + position: relative; + width: 1280px; + height: 720px; + user-select: none; + background-image: url(../image/bg.jpg); + // 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性 + perspective: 1000px; + perspective-origin: 850px -160px; + // 左上角区域切换功能 + .btn-box { + width: 120px; + position: sticky; + top: 10px; + left: 10px; + display: flex; + flex-direction: column; + gap: 8px; + .btn-item { + cursor: pointer; + width: 100%; + height: 40px; + border-radius: 4px; + background: rgba(39, 120, 255, 1); + border: 1px solid rgba(51, 199, 255, 1); + box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3); + font-size: 18px; + color: white; + } + .btn-item:hover { + color: black; + } + } + // 大区分区 + .area{ + position: absolute; + bottom: 170px; + left: 240px; + width: 780px; + height: 240px; + transform: rotateX(79deg) rotateZ(-22deg) skew(29deg); + display: flex; + gap: 8px; + .area1 { + width: 170px; + background: rgba(0, 251, 91, 0.3); + border: 2px solid rgb(0, 251, 91); + display: flex; + } + .area2 { + width: 240px; + background: rgba(255, 165, 0, 0.3); + border: 2px solid rgb(255, 165, 0); + display: flex; + } + .area3 { + width: 110px; + background: rgba(255, 0, 0, 0.3); + border: 2px solid rgb(255, 0, 0); + } + .area4 { + flex: 1; + background: rgba(80, 236, 244, 0.3); + border: 2px solid rgb(80, 236, 244); + } + // .area-item:hover { + // transform: scale(1.05); + // } + .area-item { + cursor: pointer; + transition: all ease 0.2s; + >.light-group { + height: 100%; + flex: 1; + display:flex; + justify-content: center; + align-items: center; + .group-shadow1 { + width: 35px; + height: 150px; + border-radius: 20px; + background: rgba(0, 0, 0, 0.1); + } + .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; + background: rgba(0, 0, 0, 0.1); + } + } + // .group-shadow { + // transition: all ease 0.2s; + // } + // .group-shadow:hover { + // transform: scale(1.05); + // } + } + } + } +} +// 总容器与抽屉按钮 +.ns-content-main { + position: relative; + // 抽屉打开按钮 + .drawer-box-in { + width: 30px; + height: 40px; + border-radius: 2px; + position: fixed; + right: 0; + top: 0; + bottom: 0; + margin: auto; + background: rgba(0, 0 ,0 ,0.5); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + // 抽屉关闭按钮 + .drawer-box-out { + width: 30px; + height: 40px; + border-radius: 2px; + position: fixed; + right: 496px; + top: 0; + bottom: 0; + margin: auto; + background: rgba(0, 0 ,0 ,0.5); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + +} diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less deleted file mode 100644 index dd02f25..0000000 --- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less +++ /dev/null @@ -1,156 +0,0 @@ -// 页面容器 -.lighting-box { - // width: 100%; - // height: 100%; - position: relative; - // background: linear-gradient(#badaff, #8cabeb, #7095de); - // 照明设备功能总容器 - .lighting-img-box { - position: relative; - width: 1280px; - height: 720px; - user-select: none; - background-image: url(../image/bg.jpg); - // 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性 - perspective: 1000px; - perspective-origin: 850px -160px; - // 左上角区域切换功能 - .btn-box { - width: 120px; - position: sticky; - top: 10px; - left: 10px; - display: flex; - flex-direction: column; - gap: 8px; - .btn-item { - cursor: pointer; - width: 100%; - height: 40px; - border-radius: 4px; - background: rgba(39, 120, 255, 1); - border: 1px solid rgba(51, 199, 255, 1); - box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3); - font-size: 18px; - color: white; - } - .btn-item:hover { - color: black; - } - } - // 大区分区 - .area{ - position: absolute; - bottom: 170px; - left: 240px; - width: 780px; - height: 240px; - transform: rotateX(79deg) rotateZ(-22deg) skew(29deg); - display: flex; - gap: 8px; - .area1 { - width: 170px; - background: rgba(0, 251, 91, 0.3); - border: 2px solid rgb(0, 251, 91); - display: flex; - } - .area2 { - width: 240px; - background: rgba(255, 165, 0, 0.3); - border: 2px solid rgb(255, 165, 0); - display: flex; - } - .area3 { - width: 110px; - background: rgba(255, 0, 0, 0.3); - border: 2px solid rgb(255, 0, 0); - } - .area4 { - flex: 1; - background: rgba(80, 236, 244, 0.3); - border: 2px solid rgb(80, 236, 244); - } - // .area-item:hover { - // transform: scale(1.05); - // } - .area-item { - cursor: pointer; - transition: all ease 0.2s; - >.light-group { - height: 100%; - flex: 1; - display:flex; - justify-content: center; - align-items: center; - .group-shadow1 { - width: 35px; - height: 150px; - border-radius: 20px; - background: rgba(0, 0, 0, 0.1); - } - .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; - background: rgba(0, 0, 0, 0.1); - } - } - // .group-shadow { - // transition: all ease 0.2s; - // } - // .group-shadow:hover { - // transform: scale(1.05); - // } - } - } - } -} -// 总容器与抽屉按钮 -.ns-content-main { - position: relative; - // 抽屉打开按钮 - .drawer-box-in { - width: 30px; - height: 40px; - border-radius: 2px; - position: fixed; - right: 0; - top: 0; - bottom: 0; - margin: auto; - background: rgba(0, 0 ,0 ,0.5); - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - } - // 抽屉关闭按钮 - .drawer-box-out { - width: 30px; - height: 40px; - border-radius: 2px; - position: fixed; - right: 496px; - top: 0; - bottom: 0; - margin: auto; - background: rgba(0, 0 ,0 ,0.5); - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - } - -} diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue index 7557a9c..a1c1006 100644 --- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue +++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue @@ -3,19 +3,19 @@
- - - + + +
-
+
@@ -40,16 +40,18 @@ placement="right" :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }" :closable="false" - id="Odrawer" + id="drawer" :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"> - + + + + -
@@ -61,15 +63,17 @@ import { ref } from 'vue'; import { treeData } from './treeData' import light from './light.vue'; import tabs1 from './tabs1.vue' +import tabs2 from './tabs2.vue' +import tabs3 from './tabs3.vue' // ICON import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'; -// 分区 - 当前选择的分区 - 默认选择一区 -let area = ref(['1']) -// 分区 - 分区小灯泡 +// 分区 - 当前选择的分区序号 - 默认选择一区 +const area = ref(['1']) +// 分区 - 分区小灯泡 - 此处位置需前端写死 const bulbs = ref([ { styleText: { left: '190px', bottom: '200px' }, @@ -121,6 +125,16 @@ const bulbs = ref([ }, ]) +// 分区 - 左上角分区切换 +const changeArea = (area: number) => { + if (area == 1) { + console.log('1F') + } else if (area == 2) { + console.log('2F') + } else if (area == 3) { + console.log('站台') + } +} // 分区 - 单个分区切换 const getArea = (result: any) => { // 如果传入的值是数组 @@ -132,16 +146,14 @@ const getArea = (result: any) => { area.value[0] = String(result) } } -// 分区 - 多个分区切换，只有照明回路能够触发多个分区 // 分区 - 样式函数 -const computedClass = (number: number) => { - if (area.value.indexOf(number) != -1) { - return `isActive area-item area${number}` +const computedClass = (string: string) => { + if (area.value.indexOf(string) != -1) { + return `isActive area-item area${string}` } else { - return `area-item area${number}` + return `area-item area${string}` } } - // 抽屉 - 当前选择的tab let activeKey = ref('1'); // 抽屉 - 打开状态 @@ -153,7 +165,7 @@ const toggleDrawer = () => { diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue new file mode 100644 index 0000000..96b21d7 --- /dev/null +++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue @@ -0,0 +1,255 @@ + + + +