From 891419172a1d6e2480cf756056c2705d34753de1 Mon Sep 17 00:00:00 2001 From: Joe <1712833832@qq.com> Date: Wed, 31 Jan 2024 17:44:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E8=83=BD=E8=AE=BE=E5=A4=87=E7=AE=B1?= =?UTF-8?q?=E8=81=94=E8=B0=83=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Dialog/index.vue | 6 +- .../JiHeExpressway/components/Dialog/utils.js | 23 +++ .../components/Dialogs/SmartDevice/index.vue | 143 ++++++++++-------- .../components/Switcher.vue | 17 ++- 4 files changed, 126 insertions(+), 63 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue index f6d8e21f..64c6bda2 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue @@ -30,7 +30,7 @@ <script> import Teleport from '../Teleport.vue'; import BackgroundClip from "@screen/components/Decorations/BackgroundClip.vue"; -import { moveable } from "./utils" +import { moveable, stopPropagation } from "./utils" export default { components: { @@ -63,6 +63,8 @@ export default { this.destroyMoveable = moveable(container, { target: container.querySelector(".dialog-title") }); + stopPropagation(container.querySelector(".dialog-title").lastChild) + this.$once("hook:beforeDestroy", () => this.destroyMoveable?.()); }) } @@ -159,7 +161,7 @@ export default { } .dialog-content { - padding: 9px 21px 21px 21px; + padding: 9px 21px 27px 21px; max-height: 96vh; } diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js index c5140130..f2ab44e6 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js +++ b/ruoyi-ui/src/views/JiHeExpressway/components/Dialog/utils.js @@ -41,3 +41,26 @@ export function moveable(container, { target } = {}) { return () => target.removeEventListener("pointerdown", down); } + +/** + * + * @param {HTMLElement} dom + */ +export function stopPropagation(dom) { + + function stopCallback(e) { + e.stopPropagation(); + e.preventDefault(); + e.stopImmediatePropagation(); + } + + dom.addEventListener("pointermove", stopCallback); + dom.addEventListener("pointerdown", stopCallback); + dom.addEventListener("pointerup", stopCallback); + + return () => { + dom.removeEventListener("pointermove", stopCallback); + dom.removeEventListener("pointerdown", stopCallback); + dom.removeEventListener("pointerup", stopCallback); + }; +} diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue index 57623b5f..e2c968c9 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue @@ -3,18 +3,16 @@ <Video class="video-stream" :pileNum="dialogData.stakeMark" /> <div class="SmartDevice"> - <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs"> + <ElTabs v-model="activeName" class="tabs"> <ElTabPane label="详细设计" name="first"> <Descriptions :list="list" :data="data" style="gap: 18px" /> </ElTabPane> <ElTabPane label="设备参数" name="second"> - <Descriptions :list="devicesList" style="gap: 18px"> - <template #content-electricity> - <span>1000mA</span> - <Switcher class="switcher" :activeOption="activeOption" /> - </template> - <template #content-voltage> - <Switcher class="switcher" :activeOption="activeOption" /> + <Descriptions :list="devicesList" style="gap: 18px;" column="5"> + <template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }"> + <span>{{ data.text }}</span> + <Switcher class="switcher" :activeOption="activeOption" :value="data.state" + @change="(value) => handleSwitcherChange(value, data)" /> </template> </Descriptions> </ElTabPane> @@ -37,6 +35,7 @@ import Switcher from '@screen/pages/service/PublishingChannelManagement/componen import { getRoadInfoByStakeMark, getOrganizationName, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" import { dialogDelayVisible } from "./../mixin" import request from "@/utils/request"; +import { Message } from 'element-ui'; // 广播发布 export default { @@ -99,51 +98,16 @@ export default { text: "关" } }, - devicesList: [ - { - label: '支路1(220v) 电压', - key: "deviceName1", - text: "120v" - }, - { - label: '电流', - key: "electricity", - text: "1000mA" - }, - { - label: '支路2(220v) 电压', - key: "deviceName11", - text: "120v" - }, - { - label: '电流', - key: "electricity", - text: "1000mA" - }, - { - label: '支路3(220v) 电压', - key: "deviceName1", - text: "120v" - }, - { - label: '电流', - key: "electricity", - text: "1000mA" - }, - { - label: '电压', - key: "voltage", - text: "1000mA" - }, - ] + devicesList: [] } }, async created() { + // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883'; + this.data = { ...this.dialogData, roadName: null } console.log("%c [ dialogData ]-103-「index.vue」", "font-size:15px; background:#36347c; color:#7a78c0;", this.dialogData); - getProduct(this.dialogData.productId) .then(data => { this.dialogData.brand = data.brand; @@ -157,26 +121,87 @@ export default { const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark); if (roadInfo) this.data.roadName = roadInfo.roadName; + + // https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc= + // 获取设备参数 + request({ + url: `/business/device/properties/latest/${this.dialogData.iotDeviceId}`, + method: "get", + params: {} + }).then(result => { + if (result.code != 200) return; + const [deviceInfo] = result.data; + + const typeMap = { + ac: '220v', + dc: '12v', + } + + for (const key in deviceInfo.formatValue) { + // electricity 电流 + // voltage 电压 + if (key.includes('electricity')) { + const args = key.match(/[a-z]+|[0-9]+$/g); + + const type = args[0], num = args.slice(-1)[0], prefix = args.slice(0, 2).join('_'); + this.devicesList.push( + { + label: `支路${num} (${typeMap[type]}) 电压`, + key: `${prefix}_voltage_${num}`, + text: deviceInfo.formatValue[`${prefix}_voltage_${num}`], + gridColumn: 3 + }, + { + label: '电流', + key: `${prefix}_electricity_${num}`, + text: deviceInfo.formatValue[key], + gridColumn: 2, + state: deviceInfo.value[key] > 0 + } + ); + } + } + this.devicesList.push({ + label: '风扇', + key: `fan_status`, + text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-', + gridColumn: 5 + }) + // this.data = result.rows; + // this.total = result.total; + }).finally(() => { + // closeLoading(); + }) }, methods: { - handleClickTabs() { }, - deviceFunEnable() { + handleSwitcherChange(value, data) { + data.state = value; + + // https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc= request({ url: `/business/device/functions/${this.dialogData.iotDeviceId}/${102}`, - method: "get", - params: { - // https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc= - deviceName: "", + method: "POST", + data: { + deviceName: data.key.match(/^[a-z]+_out|[0-9]+/g).join("_") + "_en", // 开关:1=打开,0=关闭 - value: "" + value: value ? 1 : 0 } - }).then(result => { - if (result.code != 200) return; - this.data = result.rows; - this.total = result.total; - }).finally(() => { - closeLoading(); }) + .then(result => { + if (result.code != 200) { + Message.error("操作失败"); + data.state = !value; + return; + }; + Message.success("操作成功"); + }) + .catch(() => { + data.state = !value; + Message.error("操作失败"); + }) + }, + getSlotKey(key) { + return key.includes('electricity') ? key : '' } } } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/PublishingChannelManagement/components/Switcher.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/PublishingChannelManagement/components/Switcher.vue index e8a16397..5af19bd6 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/PublishingChannelManagement/components/Switcher.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/PublishingChannelManagement/components/Switcher.vue @@ -20,8 +20,13 @@ export default { activeOption: { type: Object, default: () => null - } + }, + value: { + type: Boolean, + default: false + }, }, + emit: ['change'], data() { return { active: true @@ -45,9 +50,17 @@ export default { } } }, + watch: { + value: { + handler(value) { + this.active = value; + }, + immediate: true + } + }, methods: { toggle() { - this.active = !this.active + this.$emit("change", this.active = !this.active) } }, }