12/18代码

src/components/mainHeader/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import moment from "moment"
-import  {ref,shallowRef} from "vue";
+import {ref, shallowRef} from "vue";
 import overview from '@/views/overview/index.vue' //总览
 import energyEfficiency from '@/views/energyEfficiency/index.vue' //能效
 import drainage from '@/views/drainage/index.vue' //排水
@@ -17,35 +17,37 @@ const nowWeek = ref('')
 const nowMin = ref('')
 
 const timer = ref(0)
-const getNowDate = () =>{
+const getNowDate = () => {
   nowDate.value = moment().format('YYYY年MM月DD日')
   nowWeek.value = moment().format('dddd')
   nowMin.value = moment().format('HH:mm:ss')
 }
 getNowDate()
-timer.value = setInterval(()=>{
+timer.value = setInterval(() => {
   getNowDate()
-},1000)
+}, 1000)
 const menuList = ref([
-  {name:shallowRef(overview),default:getPath.overview,select:getPath.overviewselect},
+  {name: shallowRef(overview), default: getPath.overview, select: getPath.overviewselect},
-  {name:shallowRef(energyMonitoring),
+  {
-    default:getPath.energy,select:getPath.energyselect},
+    name: shallowRef(energyMonitoring),
-  {name:shallowRef(energyEfficiency),default:getPath.energyefficiency,select:getPath.energyefficiencyselect},
+    default: getPath.energy, select: getPath.energyselect
-  {name:shallowRef(drainage),default:getPath.drainage,select:getPath.drainageselect},
+  },
-  {name:shallowRef(airConditioning),default:getPath.airconditioning,select:getPath.airconditioningselect},
+  {name: shallowRef(energyEfficiency), default: getPath.energyefficiency, select: getPath.energyefficiencyselect},
-  {name:shallowRef(lighting),default:getPath.lighting,select:getPath.lightingselect},
+  {name: shallowRef(drainage), default: getPath.drainage, select: getPath.drainageselect},
-  {name:shallowRef(carbonEmission),default:getPath.carbon,select:getPath.carbonselect},
+  {name: shallowRef(airConditioning), default: getPath.airconditioning, select: getPath.airconditioningselect},
-  {name:shallowRef(screen),default:getPath.screen,select:getPath.screenselect}
+  {name: shallowRef(lighting), default: getPath.lighting, select: getPath.lightingselect},
+  {name: shallowRef(carbonEmission), default: getPath.carbon, select: getPath.carbonselect},
+  {name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
 ])
 const menuIndex = ref(0)
 // 菜单切换方法
-const toggleClick = (item,index) =>{
+const toggleClick = (item, index) => {
   tabName.value = item?.name
   menuIndex.value = index
 
 }
 const tabName = shallowRef(overview)
-const getImageUrl=(name)=>{
+const getImageUrl = (name) => {
   return `url(${new URL(name, import.meta.url).href})`
 }
 
@@ -66,9 +68,9 @@ const getImageUrl=(name)=>{
   <div class="container">
     <div class="date">
       <p>
-        <span class="m10">{{nowDate}}</span>
+        <span class="m10">{{ nowDate }}</span>
-        <span class="m10">{{nowWeek}}</span>
+        <span class="m10">{{ nowWeek }}</span>
-        <span>{{nowMin}}</span>
+        <span>{{ nowMin }}</span>
       </p>
       <p>
         <span class="m10 weaIcon">晴</span>
@@ -78,13 +80,15 @@ const getImageUrl=(name)=>{
     </div>
     <div class="menu">
       <ul>
-        <li @click="toggleClick(item,index)" v-for="(item,index) in menuList"  :style="'background-image:'+ getImageUrl(menuIndex==index?item.select:item.default)" :class="'menu-icon'+index"></li>
+        <li v-for="(item,index) in menuList" :class="'menu-icon'+index"
+            :style="'background-image:'+ getImageUrl(menuIndex===index?item.select:item.default)"
+            @click="toggleClick(item,index)"></li>
       </ul>
     </div>
-<!--    <overview></overview>-->
+    <!--    <overview></overview>-->
-<!--    <router-view />-->
+    <!--    <router-view />-->
     <keep-alive>
-      <component :is="tabName"></component>
+        <component :is="tabName" ></component>
     </keep-alive>
   </div>
 </template>
@@ -100,6 +104,7 @@ const getImageUrl=(name)=>{
   background-size: 100% 100%;
   z-index: -1 !important;
 }
+
 .left-mask {
   width: vw(600);
   left: 0;
@@ -120,38 +125,45 @@ const getImageUrl=(name)=>{
   background-image: url('@/assets/images/mask/right.png');
   background-size: 100% 100%;
 }
-.date{
+
+.date {
   display: flex;
-  color:#fff;
+  color: #fff;
   margin: 2.5rem 2.2rem 0 2.2rem;
   justify-content: space-between;
 }
-.m10{
+
+.m10 {
   margin-right: 1.3rem;
 }
-.weaIcon{
+
+.weaIcon {
 
 }
-.menu{
+
+.menu {
   position: fixed;
   bottom: vh(24);
-  z-index:999;
+  z-index: 999;
-  left:29.15%;
+  left: 29.15%;
   width: vw(800);
   height: vh(100);
-  ul{
+
+  ul {
     //width: 100%;
     width: 100%;
     height: 100%;
     display: flex;
-  li{
+
-    list-style: none;
+    li {
-    cursor: pointer;
+      list-style: none;
-    width:12.5%;
+      cursor: pointer;
-    height: 100%;
+      width: 12.5%;
-    background-size: 100% 100%;
+      height: 100%;
-  }
+      background-size: 100% 100%;
+    }
   }
 
 }
+
 </style>

src/style.scss

@@ -50,10 +50,12 @@ p,ul,li{
 
   &-right-box {
     padding-right: 2.375rem;
+    //transform: translateX(100%);
   }
 
   &-left-box {
     padding-left: 2.375rem;
+    //transform: translateX(-100%);
   }
 }
 .m100{
@@ -108,3 +110,66 @@ p,ul,li{
     }
   }
 }
+
+//table的css
+.tableBoby>span{
+  //width: 4rem;
+  text-align: center;
+  flex-basis: 33%;
+  display: block;
+}
+.tableBoby .date{
+  font-weight: 600;
+  color: rgba(61, 255, 244, 1);
+  span{
+    font-weight: normal;
+    color: rgba(221, 255, 253, 1);
+  }
+}
+:deep(.el-switch){
+  //width: 4rem;
+  flex-basis: 33%;
+  justify-content: center;
+}
+.runningState {
+  height: 98%;
+  width: 100%;
+  padding: 2% 2%;
+  box-sizing: border-box;
+  .tableTitle {
+    background: url("@/assets/images/overview/runTime.png") no-repeat;
+    background-size: 100% 100%;
+    width: 100%;
+    height: 15.5%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 16px;
+    span{
+      flex-basis: 33%;
+      text-align: center;
+    }
+
+  }
+  .tableContent {
+    width: 100%;
+    height: calc(100% - 4.5%);
+    overflow: auto;
+    scrollbar-width: none; /* firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    .tableBoby {
+      background: url("@/assets/images/air-conditioning/table-item.png") no-repeat;
+      background-size: 100% 100%;
+      width: 100%;
+      height: 15.5%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      font-size: 14px;
+      margin-top: .3rem;
+    }
+  }
+  ::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+}

src/views/air-conditioning/index.vue

@@ -222,6 +222,7 @@ const maintenanceList = ref([
         <span>开机策略</span>
       </div>
       <div  class="margin10 box-bg">
+  <!--   tbale -->
         <div class="runningState">
           <div class="tableTitle">
             <span>策略名称</span>

src/views/energyEfficiency/index.vue

@@ -962,7 +962,7 @@ onMounted(() => {
         <ul class="system-tab">
           <li
             v-for="(item, index) in systemTab"
-            :class="index == systemTabIndex ? 'tab-select' : ''"
+            :class="index === systemTabIndex ? 'tab-select' : ''"
             @click="selectSystemTab(index)"
           >
             <span>{{ item.name }}</span>

src/views/energyMonitoring/index.vue

@@ -927,7 +927,6 @@ function getLoadClassification() {
               },
             },
             labelLine: {
-              length: 60,
               length: 60,
               length2: 60,
               show: true,

src/views/lighting/index.vue

@@ -1,6 +1,7 @@
 <script setup>
-import {ref} from "vue"
+import {onMounted, ref} from "vue"
 import getPath from "@/utils/getPath.js";
+import * as echarts from "echarts";
 // 照明监测
 const lightingNumList = ref([
   {
@@ -24,6 +25,656 @@ const lightingNumList = ref([
     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 lightControl = ref([
+  {
+    name:'控制箱名称1'
+  },
+  {
+    name:'控制箱名称2'
+  },
+  {
+    name:'控制箱名称3'
+  },
+  {
+    name:'控制箱名称4'
+  },
+  {
+    name:'控制箱名称5'
+  }
+
+])
+// 故障情况
+const drawFaultConditionsChart = () =>{
+  let trafficWay = [
+    {
+      name: "正常",
+      value: 1260,
+    },
+    {
+      name: "故障",
+      value: 80,
+    },
+
+  ];
+  var total = 0;
+  for (var i = 0; i < trafficWay.length; i++) {
+    total += trafficWay[i].value;
+  }
+
+  var data = [];
+  var color = [
+    'rgba(1, 246, 139, 1)',
+      'rgba(255, 221, 0, 1)'
+  ];
+  for (var i = 0; i < trafficWay.length; i++) {
+    data.push(
+        {
+          value: trafficWay[i].value,
+          name: trafficWay[i].name,
+          itemStyle: {
+              borderWidth: 5,
+              // shadowBlur: 20,
+              borderRadius: 10,
+              borderColor: color[i],
+              shadowColor: color[i],
+            },
+        },
+        {
+          value: total * 0.04,
+          name: "",
+          itemStyle: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              color: "rgba(0, 0, 0, 0)",
+              borderWidth: 0,
+            },
+          },
+    );
+  }
+  var img = "/src/assets/images/energyMonitoring/loadClassification.png";
+  let myChart = echarts.init(document.getElementById("faultConditions"));
+  let option = {
+    graphic: {
+      elements: [
+        {
+          type: "image",
+          z: 3,
+          style: {
+            image: img,
+            width: 175,
+            height: 175,
+          },
+          left: "center",
+          top: "center",
+        },
+      ],
+    },
+
+    color: color,
+    title: [
+      {
+        text: total,
+        x: "47%",
+        y: "42%",
+        textAlign: "center",
+        textStyle: {
+          fontFamily: "Verdana-Bold",
+          fontSize: "20",
+          fontWeight: "bold",
+          color: "#FFF",
+        },
+      },
+      {
+        text: "个",
+        x: "58%",
+        y: "45%",
+        textAlign: "center",
+        textStyle: {
+          fontSize: "13",
+          fontWeight: "100",
+          color: "#FFF",
+        },
+      },
+      {
+        text: "照明四路数量",
+        left: "49%",
+        top: "55%",
+        textAlign: "center",
+        textStyle: {
+          fontFamily: "MicrosoftYaHei",
+          fontSize: "12",
+          fontWeight: "100",
+          color: "#fff",
+        },
+      },
+    ],
+    tooltip: {
+      show: true,
+    },
+    series: [
+      {
+        name: "",
+        type: "pie",
+        clockWise: true,
+        radius: [50, 56],
+        hoverAnimation: false,
+        itemStyle: {
+          normal: {
+            label: {
+              show: true,
+              position: "outside",
+              color: "#FFFFFF",
+              fontSize: 13,
+              formatter: function (params) {
+                var percent = 0;
+                // var total = 0
+                // for (var i = 0; i < trafficWay.length; i++) {
+                //   total += trafficWay[i].value
+                // }
+                percent = params.percent;
+                let unit = "个";
+                // percent = ((params.value / total) * 100).toFixed(0)
+                if (params.name !== "") {
+                  return (
+                      `{a${params.dataIndex / 2}|` +
+                      params.value +
+                      "}" +
+                      `{s0|` +
+                      unit +
+                      "}" +
+                      "\n" +
+                      params.name
+                  );
+                } else {
+                  return "";
+                }
+              },
+              padding: [60, -50],
+              textStyle: {
+                rich: {
+                  a0: {
+                    color: "rgba(1, 246, 139, 1)",
+                    padding: [0, 0, 10, 0],
+                    fontSize: 15,
+                  },
+                  a1: {
+                    color: color[1],
+                    padding: [0, 0, 10, 0],
+                    fontSize: 15,
+                  },
+                  s0: {
+                    color: "#fff",
+                    padding: [0, 0, 10, 5],
+                    fontSize: 12,
+                  },
+                },
+              },
+            },
+            labelLine: {
+              length: 20,
+              length2: 100,
+              show: true,
+              showAbove:true,
+              color: "#00ffff",
+            },
+          },
+        },
+        data: data,
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+// 展馆照明
+const drawHallLightingChart =()=>{
+  const offsetX = 10; //bar宽
+  const offsetY = 5; //倾斜角度
+  // 绘制左侧面
+  const CubeLeft = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const xAxisPoint = shape.xAxisPoint;
+      const c0 = [shape.x - 7, shape.y];
+      const c1 = [shape.x + 7, shape.y];
+      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
+      const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
+      ctx
+          .moveTo(c0[0], c0[1])
+          .lineTo(c1[0], c1[1])
+          .lineTo(c2[0], c2[1])
+          .lineTo(c3[0], c3[1])
+          .closePath();
+      ctx.stroke();
+    },
+  });
+  // 绘制右侧面
+  const CubeRight = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      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 c4 = [shape.x + 7 + 7, shape.y - 5];
+      ctx
+          .moveTo(c1[0], c1[1])
+          .lineTo(c2[0], c2[1])
+          .lineTo(c3[0], c3[1])
+          .lineTo(c4[0], c4[1])
+          .closePath();
+      ctx.stroke();
+    },
+  });
+  // 绘制顶面
+  const CubeTop = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const c1 = [shape.x - 7, shape.y];
+      const c2 = [shape.x + 8, shape.y];
+      const c3 = [shape.x + 15, shape.y - 5];
+      const c4 = [shape.x - 2, shape.y - 5];
+      ctx
+          .moveTo(c1[0], c1[1])
+          .lineTo(c2[0], c2[1])
+          .lineTo(c3[0], c3[1])
+          .lineTo(c4[0], c4[1])
+          .closePath();
+      ctx.stroke();
+    },
+  });
+  // 注册三个面图形
+  echarts.graphic.registerShape("CubeLeft", CubeLeft);
+  echarts.graphic.registerShape("CubeRight", CubeRight);
+  echarts.graphic.registerShape("CubeTop", CubeTop);
+  let intAxisData = ['室内','户外'];
+  let intSeriesData = [100,200];
+  // 绿色渐变
+  // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
+  let colorArr;
+  let myChart = echarts.init(
+      document.getElementById("hallLighting")
+  );
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      formatter: function (params, ticket, callback) {
+        const item = params[1];
+        return item.name + " : " + item.value;
+      },
+    },
+    grid: {
+      left: "4%",
+      right: "5%",
+      top: "18%",
+      bottom: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: intAxisData,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          type: "solid",
+          color: "rgba(255, 255, 255, 0.20)",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "rgba(221, 255, 253, 1)",
+        fontSize: 14,
+        interval: 0,
+        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
+        // formatter: function (value) {
+        //   const length = value.length;
+        //   if (length > 3) {
+        //     const start = Math.floor(length / 2);
+        //     const str =
+        //       value.slice(0, start) + "\n" + value.slice(start, length);
+        //     return str;
+        //   }
+        //   return value;
+        // },
+      },
+    },
+    yAxis: {
+      type: "value",
+      name: "单位:kW",
+      nameTextStyle: {
+        color: "#DDFFFD",
+        padding:[0,20,0,0]
+      },
+      //   minInterval: 1,
+      // y轴（竖直线）
+      axisLine: {
+        show: false,
+      },
+      // y轴横向 标线
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(1, 39, 37, 0.30)",
+        },
+      },
+      // y轴刻度线
+      axisTick: {
+        show: false,
+      },
+      // y轴文字
+      axisLabel: {
+        fontSize: 14,
+        color: "#DDFFFD",
+      },
+    },
+    series: [
+      {
+        type: "custom",
+        renderItem: (params, api) => {
+          const location = api.coord([api.value(0), api.value(1)]);
+          colorArr = params.dataIndex===0?[
+            //   蓝色渐变
+            ["rgba(0, 170, 193, 1)"],
+            ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
+          ]:[
+            //   绿色渐变
+            ["rgba(0, 193, 113, 1)"],
+            ["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
+          ]
+          return {
+            type: "group",
+            children: [
+              // 左侧面
+              {
+                type: "CubeLeft",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: colorArr[1][0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[1][1],
+                    },
+                  ]),
+                },
+              },
+              // 右侧面
+              {
+                type: "CubeRight",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: colorArr[1][0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[1][1],
+                    },
+                  ]),
+                },
+              },
+              // 顶部
+              {
+                type: "CubeTop",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: colorArr[0][0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[0][0],
+                    },
+                  ]),
+                },
+              },
+            ],
+          };
+        },
+        data: intSeriesData,
+      },
+      {
+        type: "bar",
+        label: {
+          normal: {
+            show: false,
+            position: "top",
+            formatter: (e) => {
+              return e.value;
+            },
+            fontSize: 16,
+            color: "#43C4F1",
+            offset: [0, -5],
+          },
+        },
+        itemStyle: {
+          color: "transparent",
+        },
+        tooltip: {},
+        data: intSeriesData,
+      },
+
+    ],
+  };
+  myChart.setOption(option);
+}
+
+// 照明负荷
+const drawLightLoadChart = () =>{
+  let myChart = echarts.init(document.getElementById("lightLoad"));
+
+  let option = {
+    grid: {
+      top: '18%',
+      left: '3%',
+      right: '5%',
+      bottom: '7%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      borderWidth: 1,
+      // axisPointer: {
+      //   type: 'shadow'
+      // },
+      // extraCssText: 'z-index:2'
+
+    },
+    legend: [{
+      icon: 'rect',
+      top: 5,
+      left: 'right',
+      orient: 'horizontal',
+      // data: ['进水量', '出水量'],
+      borderRadius: 20,
+      itemHeight:10,
+      itemWidth:15,
+      textStyle: {
+        color: '#DDFFFD',
+        fontSize: 12,
+        // fontWeight: 400
+      }
+    }],
+    xAxis: {
+      type: 'category',
+      data: ['13:00', '14:00', '15:00', '16:00', '17:00'],
+      axisLine: {
+        //坐标轴轴线相关设置。数学上的x轴
+        show: true,
+        lineStyle: {
+          // type:'dashed',
+          color: "#557775"
+          // color: "#233e64",
+        },
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#DDFFFD",//X轴文字颜色
+        }
+      }
+    },
+    yAxis: [
+      {
+        min:0,
+        max:500,
+        type: 'value',
+        name: '单位/kW',
+        nameTextStyle: {
+          color: "#DDFFFD",
+          fontSize: 12,
+          padding: [0, 10, 0, 0], // 四个数字分别为上右下左与原位置距离
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          color: "#DDFFFD",
+          fontSize: 12
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type:'dashed',
+            color: "rgba(1, 39, 37, 0.30)",
+          },
+        }
+
+      }
+
+    ],
+    series: [
+      {
+        name: '昨日',
+        type: 'line',
+        //显示所有图形。
+        //标记的图形为实心圆
+        symbol: "none",
+        itemStyle: {
+          //折线拐点标志的样式
+          color: 'white',
+          borderWidth: '2',
+          borderColor: 'rgba(91, 250, 241, 1)',
+          normal: {
+            color: 'rgba(91, 250, 241, 1)'//拐点颜色
+          }
+        },
+        lineStyle: {
+          color: 'rgba(91, 250, 241, 1)'
+        },
+        data: [400, 320, 100, 320, 100]
+      },
+      {
+        name: '今日',
+        type: 'line',
+        symbol: "none",
+        itemStyle: {
+          //折线拐点标志的样式
+          color: 'white',
+          borderWidth: '2',
+          borderColor: '#91cc75',
+          normal: {
+            color: '#91cc75'//拐点颜色
+          }
+        },
+        lineStyle: {
+          color: '#91cc75'
+        },
+        data: [100, 320, 400,420, 500]
+      }
+    ]
+
+  }
+  myChart.setOption(option)
+}
+onMounted(()=>{
+  // 故障情况
+  drawFaultConditionsChart()
+//   展馆照明
+  drawHallLightingChart()
+//   照明负荷
+  drawLightLoadChart()
+})
 </script>
 
 <template>
@@ -47,29 +698,69 @@ const lightingNumList = ref([
       <div class="title margin10">
         <span>照明回路详情</span>
       </div>
-      <div class="margin10 box-bg"></div>
+      <div class="margin10 box-bg">
+        <div class="runningState">
+          <div class="tableTitle">
+            <span>名称</span>
+            <span>位置</span>
+            <span>状态</span>
+          </div>
+          <div class="tableContent">
+            <div class="tableBoby"
+                 v-for="(item, index) in lightDetail"
+                 :key="index"
+            >
+              <span class="name">{{ item.name }}</span>
+              <span>{{item.address}}</span>
+              <span ><i :class="item.state?'state1':'state0'"></i></span>
+            </div>
+          </div>
+        </div>
+      </div>
       <!--  照明负荷-->
       <div class="title margin10">
         <span>照明负荷</span>
+        <p>
+          <span class="year">年</span>
+          <span class="month">月</span>
+          <span class="day">日</span>
+        </p>
       </div>
-      <div class="margin10 box-bg"></div>
+      <div class="margin10 box-bg" id="lightLoad"></div>
     </div>
     <div class="page-right-box">
       <!--  展馆照明 -->
       <div class="title">
         <span>展馆照明</span>
       </div>
-      <div class="margin10 box-bg" id="airConditioningLoad"></div>
+      <div class="margin10 box-bg" id="hallLighting"></div>
       <!--  照明控制-->
       <div class="title margin10">
         <span>照明控制</span>
       </div>
-      <div class="margin10 box-bg" id="exhibitionLoad"></div>
+      <div class="margin10 box-bg" >
+        <div class="runningState">
+          <div class="tableTitle">
+            <span>控制箱名称</span>
+            <span>操作</span>
+          </div>
+          <div class="tableContent">
+            <div class="tableBoby"
+                 v-for="(item, index) in lightControl"
+                 :key="index"
+            >
+              <span class="name">{{ item.name }}</span>
+
+              <span class="control">照明控制</span>
+            </div>
+          </div>
+        </div>
+      </div>
       <!--  故障情况-->
       <div class="title margin10">
         <span>故障情况</span>
       </div>
-      <div class="margin10 box-bg" id="ranking"></div>
+      <div class="margin10 box-bg" id="faultConditions"></div>
     </div>
   </div>
 </template>
@@ -112,4 +803,22 @@ const lightingNumList = ref([
     }
   }
 }
+//照明回路详情
+.state0,.state1{
+width: 1.1rem;
+  height: 1.1rem;
+  display: block;
+  background-size: 100% 100%;
+  margin: 0 auto;
+}
+.state0{
+  background-image: url('@/assets/images/lighting/state0.png');
+}
+.state1{
+  background-image: url('@/assets/images/lighting/state1.png');
+}
+//照明控制
+.control{
+  color:rgba(61, 255, 244, 1);
+}
 </style>