Merge branch 'master' of http://172.16.1.12/luoshiwen/long_IslandOcean

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
+    })
+}

src/views/lighting/components/dialog.vue

@@ -1,72 +1,123 @@
 <script setup>
-import {ref} from 'vue'
+import { ref, onMounted, watch } from "vue";
-
+import { setLighting, setSingleSwitch } from "@/api/lighting";
-const lightControl = ref([
+const lightControl = ref([]);
-  {
-    name:'照明1',
-    state:false
-  },
-  {
-    name:'照明1',
-    state:true
-  },
-  {
-    name:'照明1',
-    state:false
-  },
-  {
-    name:'照明1',
-    state:false
-  },
-  {
-    name:'照明1',
-    state:false
-  }
-
-])
 // 照明控制
-const controlBtn = ref('')
+const controlBtn = ref("");
-const toggleControl = (event) =>{
+const toggleControl = (event) => {
-  controlBtn.value = event.srcElement.className
+  if (event.srcElement.className === "off") {
-  if(event.srcElement.className==="off"){
+    controlBtn.value = "off";
-    lightControl.value.forEach(ele=>{
+    let dataMap = {
-      ele.state = false
+      name: props.name,
-    })
+      value: "全关",
-  }else if(event.srcElement.className==="on"){
+    };
-    lightControl.value.forEach(ele=>{
+    lightControl.value.forEach((ele) => {
-      ele.state = true
+      setSingleSwitch(dataMap)
-    })
+        .then((res) => {
+          if (res.code == 200) {
+            ele.State = false;
+          } else {
+            return false;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    });
+  } else if (event.srcElement.className === "on") {
+    controlBtn.value = "on";
+    lightControl.value.forEach((ele) => {
+      let dataMap = {
+        name: props.name,
+        value: "全开",
+      };
+      lightControl.value.forEach((ele) => {
+        setSingleSwitch(dataMap)
+          .then((res) => {
+            if (res.code == 200) {
+              ele.State = true;
+            } else {
+              return false;
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      });
+    });
   }
-}
+};
-const props = defineProps(
+const props = defineProps({
-    {
+  show: {
-      show:{
+    type: Boolean,
-        type:Boolean,
+    default: false,
-        default:false,
+  },
-      },
+  name: {
-      name:{
+    type: String,
-        type:String,
+    default: "",
-        default:"",
+  },
-      }
+  tableData: {
-    }
+    type: Array,
-)
+  },
-const emit = defineEmits(['update'])
+});
+const emit = defineEmits(["update"]);
 const closeDialog = () => {
   // 向父组件传值
-  emit('update',false)
+  emit("update", false);
+};
+//照明控制
+function control(params) {
+  let dataMap = {
+    name: params.Id,
+    value: params.State == true ? "255" : "0",
+  };
+  setLighting(dataMap)
+    .then((res) => {
+      if (res.code == 200) {
+        controlBtn.value = "";
+        emit("closeAll", false);
+      } else {
+        return false;
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    });
 }
-
+// 使用 watch 监听数组的变化
+watch(
+  () => props.tableData,
+  (newVal, oldVal) => {
+    // 当数组变化时，可以在这里执行一些操作
+    newVal.forEach((item) => {
+      item.State = item.State == "255" ? true : false;
+    });
+    lightControl.value = newVal;
+    controlBtn.value = "";
+  }
+);
 </script>
 
 <template>
   <div class="dialog" v-if="props.show">
     <div class="close-btn" @click="closeDialog"></div>
     <div class="dialog-title">
-      <span>{{props.name}}</span>
+      <span>{{ props.name }}</span>
     </div>
     <div class="control-btn">
-      <span class="on" :class="controlBtn==='on'?'select':''" @click="toggleControl">全开</span>
+      <span
-      <span style="margin-left: .7rem" class="off" :class="controlBtn==='off'?'select':''" @click="toggleControl">全关</span>
+        class="on"
+        :class="controlBtn === 'on' ? 'select' : ''"
+        @click="toggleControl"
+        >全开</span
+      >
+      <span
+        style="margin-left: 0.7rem"
+        class="off"
+        :class="controlBtn === 'off' ? 'select' : ''"
+        @click="toggleControl"
+        >全关</span
+      >
     </div>
     <div class="dialog-content">
       <div class="runningState">
@@ -75,14 +126,19 @@ const closeDialog = () => {
           <span>操作</span>
         </div>
         <div class="tableContent">
-          <div class="tableBoby"
+          <div
-               v-for="(item, index) in lightControl"
+            class="tableBoby"
-               :key="index"
+            v-for="(item, index) in lightControl"
+            :key="index"
           >
             <span class="name">{{ item.name }}</span>
 
-            <span><el-switch v-model="item.state" style="left: 8px" /></span>
+            <span
-
+              ><el-switch
+                v-model="item.State"
+                style="left: 8px"
+                @change="control(item)"
+            /></span>
           </div>
         </div>
       </div>
@@ -91,34 +147,31 @@ const closeDialog = () => {
 </template>
 
 <style lang="scss" scoped>
-
+.dialog-content {
-.dialog-content{
   position: relative;
   width: 100%;
   height: 74%;
   box-sizing: border-box;
   //padding: 1rem .5rem 0 1rem;
 }
-  .control-btn{
+.control-btn {
-    padding-left: 1rem;
+  padding-left: 1rem;
-    padding-top: .8rem;
+  padding-top: 0.8rem;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    display: flex;
+  display: flex;
-    .select{
+  .select {
-      background-image: url("@/assets/images/air-tab-select.png") !important;
+    background-image: url("@/assets/images/air-tab-select.png") !important;
-    }
-    span{
-      background-image: url("@/assets/images/air-tab.png");
-      cursor: pointer;
-      font-family: normal;
-      color: rgba(221, 255, 253, 1);
-      background-size: 100% 100%;
-      font-size: 0.8rem;
-      padding: 0.2rem 1.1rem;
-    }
   }
-
+  span {
-
+    background-image: url("@/assets/images/air-tab.png");
+    cursor: pointer;
+    font-family: normal;
+    color: rgba(221, 255, 253, 1);
+    background-size: 100% 100%;
+    font-size: 0.8rem;
+    padding: 0.2rem 1.1rem;
+  }
+}
 
 :deep(.el-switch__core) {
   border-radius: 0;
@@ -142,4 +195,4 @@ const closeDialog = () => {
   width: 13px;
   background: rgba(80, 233, 83, 1);
 }
-</style>
+</style>

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([
+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 lightControl = ref([
+const lightControl = ref([]);
-  {
+const tableData = ref([]);
-    name: "控制箱名称1",
-  },
-  {
-    name: "控制箱名称2",
-  },
-  {
-    name: "控制箱名称3",
-  },
-  {
-    name: "控制箱名称4",
-  },
-  {
-    name: "控制箱名称5",
-  },
-]);
 // 照明负荷的时间切换
 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();
 });
 </script>
 
@@ -756,7 +877,9 @@ onMounted(() => {
       ref="box"
       :name="dialogTitle"
       :show="dialogShow"
+      :tableData="tableData"
       @update="closeDialog"
+      @closeAll="closeAll"
     />
     <div class="page-left-box">
       <!--  照明监测-->
@@ -783,14 +906,14 @@ onMounted(() => {
             <span>位置</span>
             <span>状态</span>
           </div>
-          <div class="tableContent">
+          <div class="tableContent" style="height: 86.5%">
             <div
               v-for="(item, index) in lightDetail"
               :key="index"
               class="tableBoby"
             >
               <span class="name">{{ item.name }}</span>
-              <span>{{ item.address }}</span>
+              <span>{{ item.location }}</span>
               <span><i :class="item.state ? 'state1' : 'state0'"></i></span>
             </div>
           </div>
@@ -853,15 +976,15 @@ onMounted(() => {
             <span>控制箱名称</span>
             <span>操作</span>
           </div>
-          <div class="tableContent">
+          <div class="tableContent" style="height: 86.5%">
             <div
               v-for="(item, index) in lightControl"
               :key="index"
               class="tableBoby"
             >
-              <span class="name">{{ item.name }}</span>
+              <span class="name">{{ item.TypeName }}</span>
 
-              <span class="control" @click="openDialog(item.name)"
+              <span class="control" @click="openDialog(item.TypeName)"
                 >照明控制</span
               >
             </div>