代码提交12/20

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "echarts": "^5.4.3",
+        "echarts-gl": "^2.0.9",
         "element-plus": "^2.4.3",
         "moment": "^2.29.4",
         "sass": "^1.69.5",
@@ -1029,6 +1030,11 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
@@ -1063,6 +1069,18 @@
         "zrender": "5.4.4"
       }
     },
+    "node_modules/echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "dependencies": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      },
+      "peerDependencies": {
+        "echarts": "^5.1.2"
+      }
+    },
     "node_modules/echarts/node_modules/tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
@@ -2826,6 +2844,11 @@
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
       "peer": true
     },
+    "claygl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
+    },
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
@@ -2867,6 +2890,15 @@
         }
       }
     },
+    "echarts-gl": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
+      "requires": {
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
+      }
+    },
     "electron-to-chromium": {
       "version": "1.4.609",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz",

src/components/mainHeader/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import moment from "moment"
-import {ref, shallowRef} from "vue";
+import {onMounted, 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' //排水
@@ -40,6 +40,7 @@ const menuList = ref([
   {name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
 ])
 const menuIndex = ref(0)
+// const animationShow = ref(false)
 // 菜单切换方法
 const toggleClick = (item, index) => {
   tabName.value = item?.name
@@ -47,9 +48,9 @@ const toggleClick = (item, index) => {
 
 }
 const tabName = shallowRef(overview)
-const getImageUrl = (name) => {
+onMounted(() => {
-  return `url(${new URL(name, import.meta.url).href})`
+
-}
+})
 
 </script>
 
@@ -81,19 +82,45 @@ const getImageUrl = (name) => {
     <div class="menu">
       <ul>
         <li v-for="(item,index) in menuList" :class="'menu-icon'+index"
-            :style="'background-image:'+ getImageUrl(menuIndex===index?item.select:item.default)"
+            :style="menuIndex===index?'background-image:url('+ item.select + ')':'background-image:url('+ item.default + ')'"
             @click="toggleClick(item,index)"></li>
       </ul>
     </div>
     <!--    <overview></overview>-->
     <!--    <router-view />-->
-    <keep-alive>
+    <transition appear mode="out-in">
-        <component :is="tabName" ></component>
+      <keep-alive>
-    </keep-alive>
+          <component :is="tabName"></component>
+      </keep-alive>
+    </transition>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.v-enter-from {
+  opacity: 0;
+}
+
+.v-enter-active {
+  transition: opacity 1s ease-in;
+}
+
+.v-enter-to {
+  opacity: 1;
+}
+
+.v-leave-from {
+  opacity: 1;
+}
+
+.v-leave-active {
+  transition: opacity 1s ease-in
+}
+
+.v-leave-to {
+  opacity: 0;
+}
+
 .header {
   height: vh(136);
   width: 100%;
@@ -103,6 +130,7 @@ const getImageUrl = (name) => {
   background-image: url('@/assets/images/mask/top.png');
   background-size: 100% 100%;
   z-index: -1 !important;
+
 }
 
 .left-mask {

src/style.scss

@@ -50,14 +50,37 @@ p,ul,li{
 
   &-right-box {
     padding-right: 2.375rem;
-    //transform: translateX(100%);
+
   }
 
   &-left-box {
     padding-left: 2.375rem;
+
     //transform: translateX(-100%);
   }
 }
+@keyframes slide-out {
+  //0%{
+  //  transform: translateX(0%);
+  //}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+//@keyframes slide-in {
+//  //0%{
+//  //  transform: translateX(0%);
+//  //}
+// from{
+//   opacity: 0;
+//  }
+//  to {
+//    opacity: 1;
+//  }
+//}
 .m100{
   position: relative;
   top:2rem;
@@ -93,6 +116,7 @@ p,ul,li{
     span{
       font-size: 14px;
       font-weight: normal;
+      font-family: normal;
     }
     .year,.month,.day{
       padding: 0 0.8rem;
@@ -102,6 +126,9 @@ p,ul,li{
       background-size: 100% 100%;
       cursor: pointer;
     }
+    .selectMonth,.selectYear,.selectDay{
+      background-image: url('@/assets/images/small-icon-select.png');
+    }
     .day{
       margin-left: .5rem;
     }
@@ -172,4 +199,39 @@ p,ul,li{
   ::-webkit-scrollbar {
     display: none; /* Chrome Safari */
   }
+}
+
+//弹窗
+.dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  width: vw(506);
+  height: vh(317);
+  background-image: url('@/assets/images/lighting/dialog.png');
+  background-size: 100% 100%;
+
+  &-title {
+    padding-left: 2.5rem;
+    padding-top: .2rem;
+    box-sizing: border-box;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1);
+    font-size: 1.4rem;
+    font-family: title;
+  }
+  .close-btn {
+    background-image: url('@/assets/images/lighting/dialog-close.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 5%;
+    height: 8.5%;
+    position: absolute;
+    right: 0;
+    top: 3%;
+    cursor: pointer;
+  }
 }

src/views/air-conditioning/components/dialogBox.vue

@@ -0,0 +1,185 @@
+<script setup>
+import {ref} from 'vue'
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+// 父组件传值
+const props = defineProps({
+  dialogName:{
+    type:String,
+    default:''
+  }
+})
+const emit = defineEmits(['update'])
+const closeDialog = () =>{
+  // 关闭弹窗
+  emit('update',false)
+}
+// 选中设备
+const checkedSystem = ref(['2号机窗'])
+const systems = ['1号机窗', '2号机窗', '3号机窗', '4号机窗']
+
+const handleCheckAllChange = (val) => {
+  checkedSystem.value = val ? systems : []
+  isIndeterminate.value = false
+}
+const handleCheckedCitiesChange = (value) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === systems.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < systems.length
+}
+
+// 关闭设备的按钮
+const toggleClose = (index) =>{
+  checkedSystem.value.splice(index,1)
+  const checkedCount = checkedSystem.value.length
+  checkAll.value = checkedCount === systems.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < systems.length
+}
+</script>
+
+<template>
+<div class="dialog">
+  <div class="close-btn" @click="closeDialog"></div>
+  <div class="dialog-title">策略编辑</div>
+  <div class="dialog-box">
+    <div class="dialog-box-name">
+      <el-form-item label="策略名称:">
+        <el-input v-model="props.dialogName"></el-input>
+      </el-form-item>
+    </div>
+    <div class="dialog-box-content">
+      <div class="dialog-box-content-item">
+          <el-checkbox
+              v-model="checkAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAllChange"
+          >全部设备</el-checkbox
+          >
+          <el-checkbox-group
+
+              v-model="checkedSystem"
+              @change="handleCheckedCitiesChange"
+          >
+            <el-checkbox  v-for="city in systems" :key="city" :label="city">{{
+                city
+              }}</el-checkbox>
+          </el-checkbox-group>
+      </div>
+      <div class="dialog-box-content-item">
+        <div class="on-device">开机设备</div>
+        <div class="system">
+          <div class="select-system" v-for="(item,index) in checkedSystem">
+            <span>{{item}}</span>
+            <span class="close" @click="toggleClose(index)"></span>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+.dialog-box{
+  width: 100%;
+  height: 90%;
+  padding: 1rem;
+  box-sizing: border-box;
+
+  &-content{
+    //background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 86%;
+    &-item{
+      font-size: .875rem;
+      padding: 2%;
+      box-sizing: border-box;
+      width: 47%;
+      height: 90%;
+      background-image: url('@/assets/images/air-conditioning/dialog-item-bg.png');
+      background-size: 100% 100%;
+      .on-device{
+        height: 20%;
+        display: flex;
+        align-items: center;
+        margin-bottom: 2%;
+      }
+      .system{
+        height: 80%;
+        .select-system{
+          margin-bottom: 2%;
+          width: 60%;
+          padding-left: 1rem;
+          padding-right: .5rem;
+          box-sizing: border-box;
+          height: 20%;
+          display: flex;
+          justify-content: space-between;
+          background-image: url("@/assets/images/air-conditioning/system-border.png");
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          align-items: center;
+          .close{
+            width: 8%;
+            cursor: pointer;
+            height: 40%;
+            background-image: url("@/assets/images/air-conditioning/close-btn.png");
+            background-size: 100% 100%;
+          }
+        }
+      }
+
+    }
+  }
+}
+:deep(.el-input__inner){
+  color:rgba(255, 255, 255, 1);
+}
+:deep(.el-input__wrapper){
+  background-color: transparent !important;
+}
+:deep(.el-form-item__label){
+  color:rgba(255, 255, 255, 1);
+  font-size: .875rem;
+}
+:deep(.el-input){
+  width: 50%;
+  height: 65%;
+}
+:deep(.el-input__wrapper){
+  border-radius: 0;
+}
+:deep(.el-form-item){
+  margin-bottom: 1%;
+}
+:deep(.el-checkbox){
+  height: 20%;
+  width: 100%;
+  margin-bottom: 2%;
+  color:rgba(221, 255, 253, 1);
+}
+:deep(.el-checkbox-group){
+  height: 80%;
+
+}
+:deep(.el-checkbox__input.is-checked+.el-checkbox__label){
+  color:rgba(221, 255, 253, 1);
+}
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after){
+  border-color:#000;
+}
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner){
+  background-color: rgba(255, 221, 0, 1);
+  border-color: rgba(255, 221, 0, 1);
+}
+:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before){
+  background-color: #000;
+}
+:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner){
+  background-color: rgba(221, 255, 253, 1);
+
+}
+</style>

src/views/air-conditioning/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {ref, reactive} from "vue";
 import getPath from "@/utils/getPath.js";
-
+import dialogBox from './components/dialogBox.vue'
 const systemNumList = ref([
   {
     name: '运行设备数量',
@@ -153,10 +153,23 @@ const maintenanceList = ref([
     date: '09',
   }
 ])
+
+// 弹窗
+const dialogBoxShow = ref(false)
+const dialogName = ref('')
+const openDialog = (name) =>{
+  dialogBoxShow.value = true
+  dialogName.value = name
+}
+const closeDialog = (val) =>{
+  dialogBoxShow.value = val
+}
 </script>
 
 <template>
   <div class="page m100">
+<!--    弹窗-->
+    <dialogBox v-show="dialogBoxShow" @update="closeDialog" :dialogName="dialogName"/>
     <div class="page-left-box">
       <!--  概况-->
       <div class="title">
@@ -236,7 +249,7 @@ const maintenanceList = ref([
             >
               <span class="name">{{ item.name }}</span>
               <el-switch v-model="item.value" style="left: 8px" />
-              <span>编辑</span>
+              <span @click="openDialog(item.name)" style="cursor: pointer">编辑</span>
             </div>
           </div>
         </div>

src/views/carbonEmission/index.vue

@@ -8,7 +8,7 @@
           <div
             v-for="(item, index) in overviewDate"
             :key="index"
-            :class="[activeDate == index ? 'dateAc' : 'date']"
+            :class="[activeDate === index ? 'dateAc' : 'date']"
             @click="switchDate(index)"
           >
             {{ item.name }}
@@ -40,7 +40,7 @@
       <div class="title margin10">
         <span>碳流图</span>
       </div>
-      <div class="margin10 box-bg" id=""></div>
+      <div class="margin10 box-bg" id="energyFlow"></div>
       <!--  碳排放趋势-->
       <div class="title margin10">
         <span>碳排放趋势</span>
@@ -48,7 +48,7 @@
           <div
             v-for="(item, index) in trendDate"
             :key="index"
-            :class="[trendActiveDate == index ? 'dateAc' : 'date']"
+            :class="[trendActiveDate === index ? 'dateAc' : 'date']"
             @click="trandSwitchDate(index)"
           >
             {{ item.name }}
@@ -89,9 +89,6 @@ import * as echarts from "echarts";
 import "echarts-gl";
 import { getPie3D, getParametricEquation } from "@/utils/carbonNeutrality";
 
-const getImageUrl = (name) => {
-  return new URL(name, import.meta.url).href;
-};
 const overviewDate = ref([
   {
     name: "年",
@@ -239,7 +236,7 @@ function getCarbonTrends() {
   myChart.setOption(option);
 }
 //碳排放强度
-function getCarbonIntensity() {
+const getCarbonIntensity=()=> {
   const offsetX = 10; //bar宽
   const offsetY = 5; //倾斜角度
   // 绘制左侧面
@@ -365,7 +362,7 @@ function getCarbonIntensity() {
       },
       axisLabel: {
         color: "rgba(221, 255, 253, 1)",
-        fontSize: 14,
+        fontSize: 12,
         interval: 0,
         // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
         // formatter: function (value) {
@@ -408,7 +405,7 @@ function getCarbonIntensity() {
       },
       // y轴文字
       axisLabel: {
-        fontSize: 14,
+        fontSize: 12,
         color: "#DDFFFD",
       },
     },
@@ -540,7 +537,7 @@ function getCarbonIntensity() {
   myChart.setOption(option);
 }
 //各系统碳排放量统计
-function getCarbonEmissionStatistics() {
+const getCarbonEmissionStatistics = ()=> {
   let myChart = echarts.init(
     document.getElementById("carbonEmissionStatistics")
   );
@@ -684,7 +681,7 @@ const color = [
   "rgba(1, 225, 242, 1)",
   "rgba(27, 255, 118, 1)",
 ];
-function setLabel() {
+const setLabel = ()=> {
   optionData.value.forEach((item, index) => {
     item.itemStyle = {
       color: color[index],
@@ -739,7 +736,7 @@ function setLabel() {
   });
 }
 //碳中和
-function getCarbonNeutrality() {
+const getCarbonNeutrality = () => {
   setLabel();
   let myChart = echarts.init(document.getElementById("carbonNeutrality"));
   let option = getPie3D(optionData.value, 0, 270, 26, 40, 1);
@@ -767,6 +764,160 @@ function getCarbonNeutrality() {
   myChart.setOption(option);
   // bindListen(myChart);
 }
+// 碳流图
+const drawEnergyFlow = () => {
+  let myChart = echarts.init(document.getElementById("energyFlow"));
+  let sourceData = [
+    {
+      name: "电",
+      nameValue: 1562,
+      valueUnit: "KWh",
+    },
+    {
+      name: "空调",
+      nameValue: 562,
+      valueUnit: "kWh",
+    },
+    {
+      name: "照明",
+      nameValue: 490,
+      valueUnit: "kWh",
+    },
+    {
+      name: "电梯",
+      nameValue: 510,
+      valueUnit: "kWh",
+    },
+    {
+      name: "其他",
+      nameValue:320,
+      valueUnit: "kWh",
+    },
+  ];
+  let sangjiColor = [
+    "rgba(91, 250, 241, 1)",
+    "rgba(91, 250, 241, 1)",
+    "rgba(91, 250, 241, 1)",
+    "rgba(91, 250, 241, 1)",
+    "rgba(91, 250, 241, 1)",
+  ];
+  let itemStyleSource = [];
+  for (let d = 0; d < sourceData.length; d++) {
+    if (sourceData[d].name === "电") {
+      sourceData[d].label = {
+        position: "right",
+      };
+    }
+    sourceData[d].itemStyle = {
+      color: sangjiColor[d],
+    };
+    itemStyleSource.push(sourceData[d]);
+  }
+
+  let option = {
+    series: [
+      {
+        // select:{
+        //   disabled:true
+        // },
+        type: "sankey",
+        layout: "none",
+        top: "5%",
+        bottom: "4%",
+        left: "6%",
+        right: "5%",
+        nodeAlign:'right',
+        nodeWidth: "13",
+        // nodeAlign:'right',
+        focusNodeAdjacency: "allEdges",
+        data: itemStyleSource,
+        links: [
+          {
+            source: "电",
+            target: "空调",
+            value: 8,
+          },
+          {
+            source: "电",
+            target: "照明",
+            value: 8,
+          },
+          {
+            source: "电",
+            target: "电梯",
+            value: 8,
+          },
+          {
+            source: "电",
+            target: "其他",
+            value: 8,
+          },
+        ],
+        label: {
+          position: "left",
+          color: "#fff",
+          fontSize: 14,
+          formatter: function (params) {
+
+            if (params.dataIndex === 0) {
+              return (
+                  "{a|" +
+                  params.data.name +
+                  "}\n" +
+                  "{b|" +
+                  params.data.nameValue +
+                  "}" +
+                  " " +
+                  params.data.valueUnit
+              );
+            } else {
+              return (
+                  "{name|" +
+                  params.data.name +
+                  "}" +
+                  "{value|" +
+                  params.data.nameValue +
+                  "}" +
+                  // " " +
+                  params.data.valueUnit
+              );
+            }
+          },
+          rich: {
+            a: {
+              padding: [0, 15, 10, 0],
+              fontSize: "14",
+            },
+            b: {
+              color: "rgba(91, 250, 241, 1)",
+              fontWeight: "600",
+              fontSize: "16",
+            },
+            name: {
+              fontSize: 14,
+              // padding: [10, 0, 0, 0],
+            },
+            value: {
+              color: "rgba(91, 250, 241, 1)",
+              fontWeight: "600",
+              fontSize: "16",
+              padding: [0, 10, 0, 10],
+            },
+          },
+        },
+        lineStyle: {
+          color: "source",
+          // curveness: 0.5,
+        },
+        itemStyle: {
+          borderWidth: 1,
+          borderColor: "transparent",
+        },
+      },
+    ],
+  };
+  myChart.setOption(option);
+};
 //加载完dom执行
 onMounted(() => {
   //碳趋势图表
@@ -777,6 +928,8 @@ onMounted(() => {
   getCarbonEmissionStatistics();
   //碳中和
   getCarbonNeutrality();
+//   碳流图
+  drawEnergyFlow()
 });
 </script>
 

src/views/energyEfficiency/index.vue

@@ -73,6 +73,23 @@ const systemRightList = ref([
     }
   ]//年
 ])
+
+// 能耗总量时间点击事件
+const totalEnergyDate = ref('month')
+const toggleTotalEnergy = (event) =>{
+  totalEnergyDate.value = event.srcElement.className
+}
+// 能效对标时间点击时间
+const managementDate = ref('month')
+
+const toggleManagement = (event) => {
+  managementDate.value = event.srcElement.className
+}
+// 复费率的时间点击事件
+const exhibitionLoadDate = ref('month')
+const toggleExhibitionLoad = (event) =>{
+  exhibitionLoadDate.value = event.srcElement.className
+}
 const selectSystemTab = (index) => {
   systemTabIndex.value = index;
 };
@@ -909,6 +926,7 @@ const drawElectricityPrice = () => {
   };
   myChart.setOption(option)
 }
+
 // dom加载
 onMounted(() => {
   // 能耗总量
@@ -933,8 +951,8 @@ onMounted(() => {
       <div class="title">
         <span>能耗总量</span>
         <p>
-          <span class="month">月</span>
+          <span class="month" :class="totalEnergyDate === 'month'?'selectMonth':''" @click="toggleTotalEnergy">月</span>
-          <span class="day">日</span>
+          <span class="day" :class="totalEnergyDate === 'day'?'selectDay':''" @click="toggleTotalEnergy">日</span>
         </p>
       </div>
       <div id="totalEnergy" class="margin10 box-bg"></div>
@@ -942,8 +960,8 @@ onMounted(() => {
       <div class="title margin10">
         <span>能效对标（定额管理）</span>
         <p>
-          <span class="year">年</span>
+          <span class="year" :class="managementDate === 'year'?'selectYear':''" @click="toggleManagement">年</span>
-          <span class="month">月</span>
+          <span class="month" :class="managementDate === 'month'?'selectMonth':''" @click="toggleManagement">月</span>
         </p>
       </div>
       <div id="management" class="margin10 box-bg"></div>
@@ -996,9 +1014,9 @@ onMounted(() => {
       <div class="title margin10">
         <span>复费率</span>
         <p>
-          <span class="year">年</span>
+          <span class="year" :class="exhibitionLoadDate === 'year'?'selectYear':''" @click="toggleExhibitionLoad">年</span>
-          <span class="month">月</span>
+          <span class="month" :class="exhibitionLoadDate === 'month'?'selectMonth':''" @click="toggleExhibitionLoad">月</span>
-          <span class="day">日</span>
+          <span class="day" :class="exhibitionLoadDate === 'day'?'selectDay':''" @click="toggleExhibitionLoad">日</span>
         </p>
       </div>
       <div id="exhibitionLoad" class="margin10 box-bg"></div>

src/views/energyMonitoring/index.vue

@@ -44,8 +44,9 @@ const getImageUrl = (name) => {
   return new URL(name, import.meta.url).href;
 };
 //实时负荷
-function getRealTimeLoad() {
+const getRealTimeLoad = ()=> {
-  let myChart = echarts.init(document.getElementById("realTimeLoad"));
+  let myChart
+   myChart = echarts.init(document.getElementById("realTimeLoad"));
   const option = {
     // backgroundColor: "#05224d",
     tooltip: {},
@@ -125,7 +126,7 @@ function getRealTimeLoad() {
   myChart.setOption(option);
 }
 //当日累计用电量
-function getDailyElectricityConsumption() {
+const getDailyElectricityConsumption = () => {
   const offsetX = 10; //bar宽
   const offsetY = 5; //倾斜角度
   // 绘制左侧面
@@ -252,7 +253,7 @@ function getDailyElectricityConsumption() {
       },
       axisLabel: {
         color: "rgba(221, 255, 253, 1)",
-        fontSize: 14,
+        fontSize: 12,
         interval: 1,
         // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
         // formatter: function (value) {
@@ -293,7 +294,7 @@ function getDailyElectricityConsumption() {
       },
       // y轴文字
       axisLabel: {
-        fontSize: 14,
+        fontSize: 12,
         color: "#DDFFFD",
       },
     },
@@ -408,7 +409,7 @@ function getDailyElectricityConsumption() {
 }
 
 //空调负荷
-function drawAirConditioningLoad() {
+const drawAirConditioningLoad = ()=> {
   let myChart = echarts.init(document.getElementById("airConditioningLoad"));
   const option = {
     // backgroundColor: "#05224d",
@@ -508,7 +509,7 @@ function drawAirConditioningLoad() {
   myChart.setOption(option);
 }
 // 展陈负荷
-function drawExhibitionLoad() {
+const drawExhibitionLoad =()=> {
   let myChart = echarts.init(document.getElementById("exhibitionLoad"));
   const option = {
     // backgroundColor: "#05224d",
@@ -608,7 +609,7 @@ function drawExhibitionLoad() {
   myChart.setOption(option);
 }
 //   配电回路排名
-function drawRanking() {
+const drawRanking = ()=> {
   let myChart = echarts.init(document.getElementById("ranking"));
   let option = {
     grid: {
@@ -744,7 +745,7 @@ function drawRanking() {
   myChart.setOption(option);
 }
 //负荷分类
-function getLoadClassification() {
+const getLoadClassification=()=> {
   var trafficWay = [
     {
       name: "一级",
@@ -942,19 +943,19 @@ function getLoadClassification() {
 }
 //加载完dom执行
 onMounted(() => {
-  //实时负荷
+    //实时负荷
-  getRealTimeLoad();
+    getRealTimeLoad();
-  //当日累计用电量
+    //当日累计用电量
-  getDailyElectricityConsumption();
+    getDailyElectricityConsumption();
-  // 空调负荷
+    // 空调负荷
-  drawAirConditioningLoad();
+    drawAirConditioningLoad();
-  // 展陈负荷
+    // 展陈负荷
-  drawExhibitionLoad();
+    drawExhibitionLoad();
-  // 配电回路排名
+    // 配电回路排名
-  drawRanking();
+    drawRanking();
-  //负荷分类
+    //负荷分类
-  getLoadClassification();
+    getLoadClassification();
-});
+})
 </script>
 
 <style lang="scss" scoped></style>

src/views/lighting/components/dialog.vue

@@ -0,0 +1,144 @@
+<script setup>
+import {ref} from 'vue'
+
+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 toggleControl = (event) =>{
+  controlBtn.value = event.srcElement.className
+  if(event.srcElement.className==="off"){
+    lightControl.value.forEach(ele=>{
+      ele.state = false
+    })
+  }else if(event.srcElement.className==="on"){
+    lightControl.value.forEach(ele=>{
+      ele.state = true
+    })
+  }
+}
+const props = defineProps(
+    {
+      show:{
+        type:Boolean,
+        default:false,
+      },
+      name:{
+        type:String,
+        default:"",
+      }
+    }
+)
+const emit = defineEmits(['update'])
+const closeDialog = () => {
+  // 向父组件传值
+  emit('update',false)
+}
+
+</script>
+
+<template>
+  <div class="dialog" v-if="props.show">
+    <div class="close-btn" @click="closeDialog"></div>
+    <div class="dialog-title">
+      <span>{{props.name}}</span>
+    </div>
+    <div class="control-btn">
+      <span class="on" :class="controlBtn==='on'?'select':''" @click="toggleControl">全开</span>
+      <span style="margin-left: .7rem" class="off" :class="controlBtn==='off'?'select':''" @click="toggleControl">全关</span>
+    </div>
+    <div class="dialog-content">
+      <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><el-switch v-model="item.state" style="left: 8px" /></span>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+.dialog-content{
+  width: 100%;
+  height: 74%;
+  box-sizing: border-box;
+  //padding: 1rem .5rem 0 1rem;
+}
+  .control-btn{
+    padding-left: 1rem;
+    padding-top: .8rem;
+    box-sizing: border-box;
+    display: flex;
+    .select{
+      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;
+    }
+  }
+
+
+
+:deep(.el-switch__core) {
+  border-radius: 0;
+  background: transparent;
+  border: 1px solid rgba(223, 94, 94, 1);
+}
+
+:deep(.el-switch.is-checked .el-switch__core) {
+  background: transparent;
+  border: 1px solid rgba(80, 233, 83, 1);
+}
+:deep(.el-switch__core .el-switch__action) {
+  border-radius: 0;
+  height: 13px;
+  width: 13px;
+  background: rgba(223, 94, 94, 1);
+}
+:deep(.el-switch.is-checked .el-switch__action) {
+  border-radius: 0;
+  height: 13px;
+  width: 13px;
+  background: rgba(80, 233, 83, 1);
+}
+</style>

src/views/lighting/index.vue

@@ -2,6 +2,7 @@
 import {onMounted, ref} from "vue"
 import getPath from "@/utils/getPath.js";
 import * as echarts from "echarts";
+import dialogBox from './components/dialog.vue'
 // 照明监测
 const lightingNumList = ref([
   {
@@ -73,6 +74,27 @@ const lightControl = ref([
   }
 
 ])
+// 照明负荷的时间切换
+const lightLoadDate = ref('day')
+const toggleLightLoad = (event) =>{
+  lightLoadDate.value = event.srcElement.className
+}
+// 照明控制
+const controlBtn = ref('')
+const toggleControl = (event) =>{
+  controlBtn.value = event.srcElement.className
+}
+// 弹窗
+const dialogShow = ref(false)
+const box = ref("")
+const dialogTitle = ref("")
+const openDialog = (name) =>{
+    dialogShow.value = true
+  dialogTitle.value = name
+}
+const closeDialog = (val) =>{
+  dialogShow.value = val
+}
 // 故障情况
 const drawFaultConditionsChart = () =>{
   let trafficWay = [
@@ -535,7 +557,6 @@ const drawHallLightingChart =()=>{
   };
   myChart.setOption(option);
 }
-
 // 照明负荷
 const drawLightLoadChart = () =>{
   let myChart = echarts.init(document.getElementById("lightLoad"));
@@ -679,6 +700,7 @@ onMounted(()=>{
 
 <template>
   <div class="page m100">
+    <dialogBox ref="box" :show="dialogShow" @update="closeDialog" :name="dialogTitle"/>
     <div class="page-left-box">
       <!--  照明监测-->
       <div class="title">
@@ -721,9 +743,9 @@ onMounted(()=>{
       <div class="title margin10">
         <span>照明负荷</span>
         <p>
-          <span class="year">年</span>
+          <span class="year" :class="lightLoadDate === 'year'?'selectYear':''" @click="toggleLightLoad">年</span>
-          <span class="month">月</span>
+          <span class="month" :class="lightLoadDate === 'month'?'selectMonth':''" @click="toggleLightLoad">月</span>
-          <span class="day">日</span>
+          <span class="day" :class="lightLoadDate === 'day'?'selectDay':''" @click="toggleLightLoad">日</span>
         </p>
       </div>
       <div class="margin10 box-bg" id="lightLoad"></div>
@@ -737,6 +759,10 @@ onMounted(()=>{
       <!--  照明控制-->
       <div class="title margin10">
         <span>照明控制</span>
+        <p class="control-btn">
+          <span class="on" :class="controlBtn==='on'?'select':''" @click="toggleControl">全开</span>
+          <span style="margin-left: .7rem" class="off" :class="controlBtn==='off'?'select':''" @click="toggleControl">全关</span>
+        </p>
       </div>
       <div class="margin10 box-bg" >
         <div class="runningState">
@@ -751,7 +777,7 @@ onMounted(()=>{
             >
               <span class="name">{{ item.name }}</span>
 
-              <span class="control">照明控制</span>
+              <span class="control" @click="openDialog(item.name)">照明控制</span>
             </div>
           </div>
         </div>
@@ -820,5 +846,25 @@ width: 1.1rem;
 //照明控制
 .control{
   color:rgba(61, 255, 244, 1);
+  cursor: pointer;
+}
+.control-btn{
+  display: flex;
+  .select{
+    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;
+  }
+}
+//弹窗
+.dialog{
+
 }
 </style>

src/views/overview/index.vue

@@ -30,7 +30,17 @@ onMounted(()=>{
   //碳排放
   getCarbonEmission()
 })
+// 用电量时间切换
+const powerDate = ref('year')
 
+const togglePower = (event) =>{
+  powerDate.value = event.srcElement.className
+}
+// 碳排放时间切换
+const carbonEmissionDate = ref('month')
+const toggleCarbonEmission = (event) =>{
+  carbonEmissionDate.value = event.srcElement.className
+}
 const drawPowerEcharts = () =>{
   let myChart = echarts.init(document.getElementById('power'))
   const option = {
@@ -386,7 +396,7 @@ function getCarbonEmission() {
       },
       axisLabel: {
         color: "rgba(221, 255, 253, 1)",
-        fontSize: 14,
+        fontSize: 12,
         interval: 0,
         // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
         // formatter: function (value) {
@@ -427,7 +437,7 @@ function getCarbonEmission() {
       },
       // y轴文字
       axisLabel: {
-        fontSize: 14,
+        fontSize: 12,
         color: "#DDFFFD",
       },
     },
@@ -551,8 +561,8 @@ function getCarbonEmission() {
       <div class="title">
         <span>用电量</span>
         <p>
-          <span class="year">年</span>
+          <span class="year" :class="powerDate === 'year'?'selectYear':''" @click="togglePower">年</span>
-          <span class="month">月</span>
+          <span class="month" :class="powerDate === 'month'?'selectMonth':''" @click="togglePower">月</span>
         </p>
       </div>
       <div class="margin10 box-bg" id="power">
@@ -572,8 +582,8 @@ function getCarbonEmission() {
       <div class="title margin10">
         <span>碳排放</span>
         <p>
-          <span class="year">年</span>
+          <span class="year" :class="carbonEmissionDate === 'year'?'selectYear':''" @click="toggleCarbonEmission">年</span>
-          <span class="month">月</span>
+          <span class="month" :class="carbonEmissionDate === 'month'?'selectMonth':''" @click="toggleCarbonEmission">月</span>
         </p>
       </div>
       <div class="margin10 box-bg" id="carbonEmission">

src/views/screen/index.vue

@@ -110,7 +110,86 @@ const runTimeList = ref([
     name: "西大厅4",
     value: true,
   },
-
+  {
+    name: "西大厅5",
+    value: false,
+  },
+  {
+    name: "西大厅6",
+    value: true,
+  },
+  {
+    name: "西大厅7",
+    value: true,
+  },
+  {
+    name: "西大厅8",
+    value: true,
+  },
+  {
+    name: "西大厅9",
+    value: false,
+  },
+  {
+    name: "西大厅10",
+    value: true,
+  },
+  {
+    name: "西大厅11",
+    value: true,
+  },
+  {
+    name: "西大厅12",
+    value: true,
+  },
+  {
+    name: "西大厅13",
+    value: false,
+  },
+  {
+    name: "西大厅14",
+    value: true,
+  },
+  {
+    name: "西大厅15",
+    value: true,
+  },
+  {
+    name: "西大厅16",
+    value: true,
+  },
+  {
+    name: "西大厅17",
+    value: false,
+  },
+  {
+    name: "西大厅18",
+    value: true,
+  },
+  {
+    name: "西大厅19",
+    value: true,
+  },
+  {
+    name: "西大厅20",
+    value: true,
+  },
+  {
+    name: "西大厅21",
+    value: false,
+  },
+  {
+    name: "西大厅22",
+    value: true,
+  },
+  {
+    name: "西大厅23",
+    value: true,
+  },
+  {
+    name: "西大厅24",
+    value: true,
+  },
 ]);
 </script>