From bea366e36aea99910eb6d643061cd5e1b5c3f66a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com> Date: Tue, 12 Mar 2024 14:09:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4=5F3=5F12?= =?UTF-8?q?=5F=E7=85=A7=E6=98=8E=E6=A8=A1=E5=9D=97=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lighting.js | 78 +++++++ src/views/lighting/components/dialog.vue | 217 ++++++++++++------- src/views/lighting/index.vue | 261 +++++++++++++++++------ 3 files changed, 405 insertions(+), 151 deletions(-) create mode 100644 src/api/lighting.js diff --git a/src/api/lighting.js b/src/api/lighting.js new file mode 100644 index 0000000..8ccf13c --- /dev/null +++ b/src/api/lighting.js @@ -0,0 +1,78 @@ +import http from '@/utils/http' + + +//照明监测 +export function getLightingMonitoring() { + return http({ + url: '/api/GetLightingMonitoring', + method: 'get', + }) +} +//照明回路详情 +export function getLightingDetail() { + return http({ + url: '/api/GetLightingDetail', + method: 'get', + }) +} +//照明负荷 +export function getLightingLoad(params) { + return http({ + url: '/api/GetLightingLoad', + method: 'get', + params + }) +} +//展馆照明 +export function getPavilionLighting() { + return http({ + url: '/api/GetPavilionLighting', + method: 'get', + }) +} +//照明控制 +export function getLightingControl() { + return http({ + url: '/api/GetLightingControl', + method: 'get', + }) +} +//故障情况 +export function getFaultCondition() { + return http({ + url: '/api/GetFaultCondition', + method: 'get', + }) +} +//照明单控 +export function getSingleControl(params) { + return http({ + url: '/api/GetSingleControl', + method: 'get', + params + }) +} +//控制照明 +export function setLighting(params) { + return http({ + url: '/api/SetLighting', + method: 'get', + params + }) +} +//照明单控 +export function setSingleSwitch(params) { + return http({ + url: '/api/SetSingleSwitch', + method: 'get', + params + }) +} +//照明全控 +export function setFullSwitch(params) { + return http({ + url: '/api/SetFullSwitch', + method: 'get', + params + }) +} \ No newline at end of file diff --git a/src/views/lighting/components/dialog.vue b/src/views/lighting/components/dialog.vue index 2791725..37540a7 100644 --- a/src/views/lighting/components/dialog.vue +++ b/src/views/lighting/components/dialog.vue @@ -1,72 +1,123 @@ \ No newline at end of file + diff --git a/src/views/lighting/index.vue b/src/views/lighting/index.vue index 5318372..4b08ee1 100644 --- a/src/views/lighting/index.vue +++ b/src/views/lighting/index.vue @@ -3,76 +3,45 @@ import { onMounted, ref } from "vue"; import getPath from "@/utils/getPath.js"; import * as echarts from "echarts"; import dialogBox from "./components/dialog.vue"; +import { + getLightingMonitoring, + getLightingDetail, + getLightingLoad, + getPavilionLighting, + getLightingControl, + getFaultCondition, + getSingleControl, + setFullSwitch, +} from "@/api/lighting"; // 照明监测 const lightingNumList = ref([ { name: "照明四路数量", - num: 1130, + num: 0, pic: getPath.lightTotal, }, { name: "照明四路灭灯数量", - num: 1130, + num: 0, pic: getPath.noLightNum, }, { name: "照明四路亮灯数量", - num: 1130, + num: 0, pic: getPath.lightingNum, }, { name: "离线数量", - num: 1130, + num: 0, pic: getPath.offlineNum, }, ]); // 照明回路详情 -const lightDetail = ref([ - { - name: "照明1", - address: "西大厅", - state: false, - }, - { - name: "照明2", - address: "西大厅", - state: false, - }, - { - name: "照明3", - address: "西大厅", - state: false, - }, - { - name: "照明4", - address: "西大厅", - state: true, - }, - { - name: "照明5", - address: "西大厅", - state: true, - }, -]); +const lightDetail = ref([]); // 照明控制 -const lightControl = ref([ - { - name: "控制箱名称1", - }, - { - name: "控制箱名称2", - }, - { - name: "控制箱名称3", - }, - { - name: "控制箱名称4", - }, - { - name: "控制箱名称5", - }, -]); +const lightControl = ref([]); +const tableData = ref([]); // 照明负荷的时间切换 const lightLoadDate = ref("day"); @@ -110,11 +79,18 @@ const toggleFloor = (item, index) => { const toggleLightLoad = (event) => { lightLoadDate.value = event.srcElement.className; + lightingLoad(); }; // 照明控制 -const controlBtn = ref("on"); +const controlBtn = ref(""); const toggleControl = (event) => { - controlBtn.value = event.srcElement.className; + if (event.srcElement.className == "on") { + controlBtn.value = "on"; + fullControl("全开"); + } else if (event.srcElement.className == "off") { + controlBtn.value = "off"; + fullControl("全关"); + } }; // 弹窗 const dialogShow = ref(false); @@ -126,20 +102,26 @@ const openDialog = (name) => { dialogTitle.value = name; dialogShow.value = true; + singleControl(name); }; const closeDialog = (val) => { dialogShow.value = val; }; +function closeAll(params) { + if (params == false) { + controlBtn.value = ""; + } +} // 故障情况 -const drawFaultConditionsChart = () => { +const drawFaultConditionsChart = (params) => { let trafficWay = [ { name: "正常", - value: 1260, + value: params[0].Normality, }, { name: "故障", - value: 80, + value: params[0].Malfunction, }, ]; var total = 0; @@ -317,7 +299,9 @@ const drawFaultConditionsChart = () => { }); }; // 展馆照明 -const drawHallLightingChart = () => { +const drawHallLightingChart = (params) => { + // let dataList = [params[0].Indoor,params[0].Outdoor] + const offsetX = 10; //bar宽 const offsetY = 5; //倾斜角度 // 绘制左侧面 @@ -351,7 +335,7 @@ const drawHallLightingChart = () => { const xAxisPoint = shape.xAxisPoint; const c1 = [shape.x + 7, shape.y]; const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]; - const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10]; + const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 5]; const c4 = [shape.x + 7 + 7, shape.y - 5]; ctx .moveTo(c1[0], c1[1]) @@ -387,7 +371,7 @@ const drawHallLightingChart = () => { echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeTop", CubeTop); let intAxisData = ["室内", "户外"]; - let intSeriesData = [100, 200]; + let intSeriesData = [params[0].Indoor, params[0].Outdoor]; // 绿色渐变 // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]] let colorArr; @@ -597,9 +581,16 @@ const drawHallLightingChart = () => { }); }; // 照明负荷 -const drawLightLoadChart = () => { +const drawLightLoadChart = (params) => { + let xData = []; + let toDay = []; + let lastDay = []; + params.forEach((item) => { + xData.push(item.time); + toDay.push(item.TP); + lastDay.push(item.YP); + }); let myChart = echarts.init(document.getElementById("lightLoad")); - let option = { grid: { top: "18%", @@ -635,7 +626,7 @@ const drawLightLoadChart = () => { ], xAxis: { type: "category", - data: ["13:00", "14:00", "15:00", "16:00", "17:00"], + data: xData, axisLine: { //坐标轴轴线相关设置。数学上的x轴 show: true, @@ -701,7 +692,7 @@ const drawLightLoadChart = () => { lineStyle: { color: "rgba(91, 250, 241, 1)", }, - data: [400, 320, 100, 320, 100], + data: lastDay, }, { name: "今日", @@ -719,7 +710,7 @@ const drawLightLoadChart = () => { lineStyle: { color: "#91cc75", }, - data: [100, 320, 400, 420, 500], + data: toDay, }, ], }; @@ -729,14 +720,144 @@ const drawLightLoadChart = () => { myChart.resize(); // 调用 resize 函数进行自适应大小调整 }); }; +//照明监测 +function lightingMonitoring() { + getLightingMonitoring() + .then((res) => { + if (res.code == 200) { + lightingNumList.value[0].num = res.data[0].Amount; + lightingNumList.value[1].num = res.data[0].Blackout; + lightingNumList.value[2].num = res.data[0].Connection; + lightingNumList.value[3].num = res.data[0].Offline; + } else { + return false; + } + }) + .catch((err) => { + console.log(err); + }); +} +//照明回路详情 +function lightingCircuit() { + getLightingDetail() + .then((res) => { + if (res.code == 200) { + res.data.forEach((item) => { + item.state = item.state == "0" ? false : true; + }); + lightDetail.value = res.data; + } else { + return false; + } + }) + .catch((err) => { + console.log(err); + }); +} +//照明负荷 +function lightingLoad() { + let date = + lightLoadDate.value == "year" + ? "年" + : lightLoadDate.value == "month" + ? "月" + : "日"; + getLightingLoad({ date }) + .then((res) => { + if (res.code == 200) { + drawLightLoadChart(res.data); + } else { + return false; + } + }) + .catch((err) => { + console.log(err); + }); +} +//展馆照明 +function exhibitionHall() { + getPavilionLighting() + .then((res) => { + if (res.code == 200) { + drawHallLightingChart(res.data); + } else { + return false; + } + }) + .catch((err) => { + console.log(err); + }); +} +//照明控制 +function lightingControl() { + getLightingControl() + .then((res) => { + if (res.code == 200) { + lightControl.value = res.data; + } else { + return false; + } + }) + .catch((err) => { + console.log(err); + }); +} +//故障情况 +function fault() { + getFaultCondition() + .then((res) => { + if (res.code == 200) { + drawFaultConditionsChart(res.data); + } else { + return false; + } + }) + .catch((err) => { + console.log(err); + }); +} +//照明单控 +function singleControl(name) { + getSingleControl({ name }) + .then((res) => { + if (res.code == 200) { + tableData.value = res.data; + } else { + return false; + } + }) + .catch((err) => { + console.log(err); + }); +} +//照明全控 +function fullControl(params) { + let name = params; + setFullSwitch({ name }) + .then((res) => { + if (res.code == 200) { + } else { + return false; + } + }) + .catch((err) => { + console.log(err); + }); +} onMounted(() => { window.openBox = openDialog; // 故障情况 - drawFaultConditionsChart(); + fault(); // 展馆照明 - drawHallLightingChart(); + exhibitionHall(); // 照明负荷 - drawLightLoadChart(); + lightingLoad(); + //照明检测 + lightingMonitoring(); + //照明回路详情 + lightingCircuit(); + //照明控制 + lightingControl(); }); @@ -756,7 +877,9 @@ onMounted(() => { ref="box" :name="dialogTitle" :show="dialogShow" + :tableData="tableData" @update="closeDialog" + @closeAll="closeAll" />
@@ -783,14 +906,14 @@ onMounted(() => { 位置 状态
-
+
{{ item.name }} - {{ item.address }} + {{ item.location }}
@@ -853,15 +976,15 @@ onMounted(() => { 控制箱名称 操作
-
+
- {{ item.name }} + {{ item.TypeName }} - 照明控制