package-lock.json

@@ -9,7 +9,6 @@
       "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",
@@ -1030,11 +1029,6 @@
         "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",
@@ -1069,18 +1063,6 @@
         "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",
@@ -2844,11 +2826,6 @@
       "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",
@@ -2890,15 +2867,6 @@
         }
       }
     },
-    "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 {onMounted, 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,40 +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),
-    name: shallowRef(energyMonitoring),
+    default:getPath.energy,select:getPath.energyselect},
-    default: getPath.energy, select: getPath.energyselect
+  {name:shallowRef(energyEfficiency),default:getPath.energyefficiency,select:getPath.energyefficiencyselect},
-  },
+  {name:shallowRef(drainage),default:getPath.drainage,select:getPath.drainageselect},
-  {name: shallowRef(energyEfficiency), default: getPath.energyefficiency, select: getPath.energyefficiencyselect},
+  {name:shallowRef(airConditioning),default:getPath.airconditioning,select:getPath.airconditioningselect},
-  {name: shallowRef(drainage), default: getPath.drainage, select: getPath.drainageselect},
+  {name:shallowRef(lighting),default:getPath.lighting,select:getPath.lightingselect},
-  {name: shallowRef(airConditioning), default: getPath.airconditioning, select: getPath.airconditioningselect},
+  {name:shallowRef(carbonEmission),default:getPath.carbon,select:getPath.carbonselect},
-  {name: shallowRef(lighting), default: getPath.lighting, select: getPath.lightingselect},
+  {name:shallowRef(screen),default:getPath.screen,select:getPath.screenselect}
-  {name: shallowRef(carbonEmission), default: getPath.carbon, select: getPath.carbonselect},
-  {name: shallowRef(screen), default: getPath.screen, select: getPath.screenselect}
 ])
 const menuIndex = ref(0)
-// const animationShow = ref(false)
 // 菜单切换方法
-const toggleClick = (item, index) => {
+const toggleClick = (item,index) =>{
   tabName.value = item?.name
   menuIndex.value = index
 
 }
 const tabName = shallowRef(overview)
-onMounted(() => {
+const getImageUrl=(name)=>{
-
+  return `url(${new URL(name, import.meta.url).href})`
-})
+}
 
 </script>
 
@@ -69,9 +66,9 @@ onMounted(() => {
   <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>
@@ -81,46 +78,18 @@ onMounted(() => {
     </div>
     <div class="menu">
       <ul>
-        <li v-for="(item,index) in menuList" :class="'menu-icon'+index"
+        <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>
-            :style="menuIndex===index?'background-image:url('+ item.select + ')':'background-image:url('+ item.default + ')'"
-            @click="toggleClick(item,index)"></li>
       </ul>
     </div>
-    <!--    <overview></overview>-->
+<!--    <overview></overview>-->
-    <!--    <router-view />-->
+<!--    <router-view />-->
-    <transition appear mode="out-in">
+    <keep-alive>
-      <keep-alive>
+      <component :is="tabName"></component>
-          <component :is="tabName"></component>
+    </keep-alive>
-      </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%;
@@ -130,9 +99,7 @@ onMounted(() => {
   background-image: url('@/assets/images/mask/top.png');
   background-size: 100% 100%;
   z-index: -1 !important;
-
 }
-
 .left-mask {
   width: vw(600);
   left: 0;
@@ -153,45 +120,38 @@ onMounted(() => {
   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{
-    li {
+    list-style: none;
-      list-style: none;
+    cursor: pointer;
-      cursor: pointer;
+    width:12.5%;
-      width: 12.5%;
+    height: 100%;
-      height: 100%;
+    background-size: 100% 100%;
-      background-size: 100% 100%;
+  }
-    }
   }
 
 }
-
 </style>

src/style.scss

@@ -50,37 +50,12 @@ p,ul,li{
 
   &-right-box {
     padding-right: 2.375rem;
-
   }
 
   &-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;
@@ -116,7 +91,6 @@ p,ul,li{
     span{
       font-size: 14px;
       font-weight: normal;
-      font-family: normal;
     }
     .year,.month,.day{
       padding: 0 0.8rem;
@@ -126,9 +100,6 @@ 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;
     }
@@ -137,101 +108,3 @@ 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 */
-  }
-}
-
-//弹窗
-.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

@@ -1,185 +0,0 @@
-<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,23 +153,10 @@ 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">
@@ -235,7 +222,6 @@ const closeDialog = (val) =>{
         <span>开机策略</span>
       </div>
       <div  class="margin10 box-bg">
-  <!--   tbale -->
         <div class="runningState">
           <div class="tableTitle">
             <span>策略名称</span>
@@ -249,7 +235,7 @@ const closeDialog = (val) =>{
             >
               <span class="name">{{ item.name }}</span>
               <el-switch v-model="item.value" style="left: 8px" />
-              <span @click="openDialog(item.name)" style="cursor: pointer">编辑</span>
+              <span>编辑</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="energyFlow"></div>
+      <div class="margin10 box-bg" id=""></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,6 +89,9 @@ 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: "年",
@@ -236,7 +239,7 @@ function getCarbonTrends() {
   myChart.setOption(option);
 }
 //碳排放强度
-const getCarbonIntensity=()=> {
+function getCarbonIntensity() {
   const offsetX = 10; //bar宽
   const offsetY = 5; //倾斜角度
   // 绘制左侧面
@@ -362,7 +365,7 @@ const getCarbonIntensity=()=> {
       },
       axisLabel: {
         color: "rgba(221, 255, 253, 1)",
-        fontSize: 12,
+        fontSize: 14,
         interval: 0,
         // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
         // formatter: function (value) {
@@ -405,7 +408,7 @@ const getCarbonIntensity=()=> {
       },
       // y轴文字
       axisLabel: {
-        fontSize: 12,
+        fontSize: 14,
         color: "#DDFFFD",
       },
     },
@@ -537,7 +540,7 @@ const getCarbonIntensity=()=> {
   myChart.setOption(option);
 }
 //各系统碳排放量统计
-const getCarbonEmissionStatistics = ()=> {
+function getCarbonEmissionStatistics() {
   let myChart = echarts.init(
     document.getElementById("carbonEmissionStatistics")
   );
@@ -681,7 +684,7 @@ const color = [
   "rgba(1, 225, 242, 1)",
   "rgba(27, 255, 118, 1)",
 ];
-const setLabel = ()=> {
+function setLabel() {
   optionData.value.forEach((item, index) => {
     item.itemStyle = {
       color: color[index],
@@ -736,7 +739,7 @@ const setLabel = ()=> {
   });
 }
 //碳中和
-const getCarbonNeutrality = () => {
+function getCarbonNeutrality() {
   setLabel();
   let myChart = echarts.init(document.getElementById("carbonNeutrality"));
   let option = getPie3D(optionData.value, 0, 270, 26, 40, 1);
@@ -764,160 +767,6 @@ const 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(() => {
   //碳趋势图表
@@ -928,8 +777,6 @@ onMounted(() => {
   getCarbonEmissionStatistics();
   //碳中和
   getCarbonNeutrality();
-//   碳流图
-  drawEnergyFlow()
 });
 </script>
 

src/views/energyEfficiency/index.vue

@@ -73,23 +73,6 @@ 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;
 };
@@ -926,7 +909,6 @@ const drawElectricityPrice = () => {
   };
   myChart.setOption(option)
 }
-
 // dom加载
 onMounted(() => {
   // 能耗总量
@@ -951,8 +933,8 @@ onMounted(() => {
       <div class="title">
         <span>能耗总量</span>
         <p>
-          <span class="month" :class="totalEnergyDate === 'month'?'selectMonth':''" @click="toggleTotalEnergy">月</span>
+          <span class="month">月</span>
-          <span class="day" :class="totalEnergyDate === 'day'?'selectDay':''" @click="toggleTotalEnergy">日</span>
+          <span class="day">日</span>
         </p>
       </div>
       <div id="totalEnergy" class="margin10 box-bg"></div>
@@ -960,8 +942,8 @@ onMounted(() => {
       <div class="title margin10">
         <span>能效对标（定额管理）</span>
         <p>
-          <span class="year" :class="managementDate === 'year'?'selectYear':''" @click="toggleManagement">年</span>
+          <span class="year">年</span>
-          <span class="month" :class="managementDate === 'month'?'selectMonth':''" @click="toggleManagement">月</span>
+          <span class="month">月</span>
         </p>
       </div>
       <div id="management" class="margin10 box-bg"></div>
@@ -980,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>
@@ -1014,9 +996,9 @@ onMounted(() => {
       <div class="title margin10">
         <span>复费率</span>
         <p>
-          <span class="year" :class="exhibitionLoadDate === 'year'?'selectYear':''" @click="toggleExhibitionLoad">年</span>
+          <span class="year">年</span>
-          <span class="month" :class="exhibitionLoadDate === 'month'?'selectMonth':''" @click="toggleExhibitionLoad">月</span>
+          <span class="month">月</span>
-          <span class="day" :class="exhibitionLoadDate === 'day'?'selectDay':''" @click="toggleExhibitionLoad">日</span>
+          <span class="day">日</span>
         </p>
       </div>
       <div id="exhibitionLoad" class="margin10 box-bg"></div>

src/views/energyMonitoring/index.vue

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

@@ -1,144 +0,0 @@
-<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

@@ -1,8 +1,6 @@
 <script setup>
-import {onMounted, ref} from "vue"
+import {ref} from "vue"
 import getPath from "@/utils/getPath.js";
-import * as echarts from "echarts";
-import dialogBox from './components/dialog.vue'
 // 照明监测
 const lightingNumList = ref([
   {
@@ -26,681 +24,10 @@ 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 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 = [
-    {
-      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>
   <div class="page m100">
-    <dialogBox ref="box" :show="dialogShow" @update="closeDialog" :name="dialogTitle"/>
     <div class="page-left-box">
       <!--  照明监测-->
       <div class="title">
@@ -720,73 +47,29 @@ onMounted(()=>{
       <div class="title margin10">
         <span>照明回路详情</span>
       </div>
-      <div class="margin10 box-bg">
+      <div class="margin10 box-bg"></div>
-        <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" :class="lightLoadDate === 'year'?'selectYear':''" @click="toggleLightLoad">年</span>
-          <span class="month" :class="lightLoadDate === 'month'?'selectMonth':''" @click="toggleLightLoad">月</span>
-          <span class="day" :class="lightLoadDate === 'day'?'selectDay':''" @click="toggleLightLoad">日</span>
-        </p>
       </div>
-      <div class="margin10 box-bg" id="lightLoad"></div>
+      <div class="margin10 box-bg"></div>
     </div>
     <div class="page-right-box">
       <!--  展馆照明 -->
       <div class="title">
         <span>展馆照明</span>
       </div>
-      <div class="margin10 box-bg" id="hallLighting"></div>
+      <div class="margin10 box-bg" id="airConditioningLoad"></div>
       <!--  照明控制-->
       <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">
-          <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" @click="openDialog(item.name)">照明控制</span>
-            </div>
-          </div>
-        </div>
       </div>
+      <div class="margin10 box-bg" id="exhibitionLoad"></div>
       <!--  故障情况-->
       <div class="title margin10">
         <span>故障情况</span>
       </div>
-      <div class="margin10 box-bg" id="faultConditions"></div>
+      <div class="margin10 box-bg" id="ranking"></div>
     </div>
   </div>
 </template>
@@ -828,43 +111,5 @@ onMounted(()=>{
       font-size: .75rem;
     }
   }
-}
-//照明回路详情
-.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);
-  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,17 +30,7 @@ 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 = {
@@ -396,7 +386,7 @@ function getCarbonEmission() {
       },
       axisLabel: {
         color: "rgba(221, 255, 253, 1)",
-        fontSize: 12,
+        fontSize: 14,
         interval: 0,
         // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
         // formatter: function (value) {
@@ -437,7 +427,7 @@ function getCarbonEmission() {
       },
       // y轴文字
       axisLabel: {
-        fontSize: 12,
+        fontSize: 14,
         color: "#DDFFFD",
       },
     },
@@ -561,8 +551,8 @@ function getCarbonEmission() {
       <div class="title">
         <span>用电量</span>
         <p>
-          <span class="year" :class="powerDate === 'year'?'selectYear':''" @click="togglePower">年</span>
+          <span class="year">年</span>
-          <span class="month" :class="powerDate === 'month'?'selectMonth':''" @click="togglePower">月</span>
+          <span class="month">月</span>
         </p>
       </div>
       <div class="margin10 box-bg" id="power">
@@ -582,8 +572,8 @@ function getCarbonEmission() {
       <div class="title margin10">
         <span>碳排放</span>
         <p>
-          <span class="year" :class="carbonEmissionDate === 'year'?'selectYear':''" @click="toggleCarbonEmission">年</span>
+          <span class="year">年</span>
-          <span class="month" :class="carbonEmissionDate === 'month'?'selectMonth':''" @click="toggleCarbonEmission">月</span>
+          <span class="month">月</span>
         </p>
       </div>
       <div class="margin10 box-bg" id="carbonEmission">

src/views/screen/index.vue

@@ -110,86 +110,7 @@ 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>