src/assets/font/font.css

@@ -4,11 +4,4 @@
     src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf'); 
     font-weight: normal; 
     font-style: normal;
-}
-/*yaHei*/
-@font-face {
-    font-family: "Microsoft YaHei";
-    src: url('./msyhl.ttc');
-    font-weight: normal;
-    font-style: normal;
 }

src/components/mainHeader/index.vue

@@ -10,7 +10,7 @@ import carbonEmission from '@/views/carbonEmission/index.vue' //碳排放
 
 import screen from '@/views/screen/index.vue' //显示屏
 import energyMonitoring from '@/views/energyMonitoring/index.vue'
-import getPath from "@/utils/getPath.js";
+
 // import getImageUrl from '@/utils/getPath.js'
 const nowDate = ref('')
 const nowWeek = ref('')
@@ -27,15 +27,15 @@ timer.value = setInterval(()=>{
   getNowDate()
 },1000)
 const menuList = ref([
-  {name:shallowRef(overview),default:getPath.overview,select:getPath.overviewselect},
+  {name:shallowRef(overview),default:'../../assets/images/menu/overview.png',select:'../../assets/images/menu/overview-select.png'},
   {name:shallowRef(energyMonitoring),
-    default:getPath.energy,select:getPath.energyselect},
+    default:'../../assets/images/menu/energy.png',select:'../../assets/images/menu/energy-select.png'},
-  {name:shallowRef(energyEfficiency),default:getPath.energyefficiency,select:getPath.energyefficiencyselect},
+  {name:shallowRef(energyEfficiency),default:'../../assets/images/menu/energy-efficiency.png',select:'../../assets/images/menu/energy-efficiency-select.png'},
-  {name:shallowRef(drainage),default:getPath.drainage,select:getPath.drainageselect},
+  {name:shallowRef(drainage),default:'../../assets/images/menu/drainage.png',select:'../../assets/images/menu/drainage-select.png'},
-  {name:shallowRef(airConditioning),default:getPath.airconditioning,select:getPath.airconditioningselect},
+  {name:shallowRef(airConditioning),default:'../../assets/images/menu/air-conditioning.png',select:'../../assets/images/menu/air-conditioning-select.png'},
-  {name:shallowRef(lighting),default:getPath.lighting,select:getPath.lightingselect},
+  {name:shallowRef(lighting),default:'../../assets/images/menu/lighting.png',select:'../../assets/images/menu/lighting-select.png'},
-  {name:shallowRef(carbonEmission),default:getPath.carbon,select:getPath.carbonselect},
+  {name:shallowRef(carbonEmission),default:'../../assets/images/menu/carbon.png',select:'../../assets/images/menu/carbon-select.png'},
-  {name:shallowRef(screen),default:getPath.screen,select:getPath.screenselect}
+  {name:shallowRef(screen),default:'../../assets/images/menu/screen.png',select:'../../assets/images/menu/screen-select.png'}
 ])
 const menuIndex = ref(0)
 // 菜单切换方法

src/style.scss

@@ -6,7 +6,6 @@
   padding: 0;
   overflow: hidden;
   color: rgba(221, 255, 253, 1);
-  font-family: "Microsoft YaHei";
 }
 p,ul,li{
   margin: 0;
@@ -35,13 +34,7 @@ p,ul,li{
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
-  //排水
+
-  .page-big-box{
-    width: 100%;
-    height: vh(892);
-    background-size: 100% 100%;
-    background-image: url("@/assets/images/page-big-box.png");
-  }
   &-right-box, &-left-box {
     height: 100%;
     width: vw(450);

src/untils/getPath.js

@@ -0,0 +1,5 @@
+const getImageUrl = (name)=>{
+    return `url(${new URL(name, import.meta.url).href})`
+}
+
+export default getImageUrl

src/utils/getPath.js

@@ -1,20 +0,0 @@
-// 将所有图片导入进来
-
-const req1 = import.meta.glob("../assets/images/**", {eager: true});
-
-const req = {...req1};
-
-const imagesMap = {};
-
-// 循环所有图片，将图片名设置成键，值为导入该图片的地址
-for (const key in req) {
-    // let name = key.replace(/(\.\/images\/|\..*)/g, '')
-    let name = key.split("/").slice(-1)[0].split(".")[0].replace(/-/g, "");
-
-    // 抛出图片大对象后，文件页面直接引入后将图片的具体名称作为属性就能导入该图片
-    imagesMap[name] = req[key].default;
-}
-export default imagesMap
-
-
-

src/views/air-conditioning/index.vue

@@ -1,306 +1,13 @@
 <script setup>
-import {ref, reactive} from "vue";
-import getPath from "@/utils/getPath.js";
 
-const systemNumList = ref([
-  {
-    name: '运行设备数量',
-    num: '1130',
-  },
-  {
-    name: '停机设备数量',
-    num: '1130',
-  }
-])
-const img = ref([getPath.defaultsystemnum, getPath.stopsystemnum])
-const overviewList = ref([
-  {
-    name: "展馆面积",
-    num: 83,
-    unit: '万m²'
-  },
-  {
-    name: "设备总量",
-    num: 83,
-    unit: '台'
-  }
-])
-// 用电情况
-const electricityContent = ref([
-  {
-    name:'今日用电量',
-    value:66,
-    unit:"kWh",
-  },
-  {
-    name:'今日用电费用',
-    value:66,
-    unit:"万元",
-  },
-  {
-    name:'本月用电量',
-    value:66,
-    unit:"kWh",
-  },
-  {
-    name:'本月用电费用',
-    value:66,
-    unit:"万元",
-  },
-  {
-    name:'本年用电量',
-    value:66,
-    unit:"kWh",
-  },
-  {
-    name:'本月用电费用',
-    value:66,
-    unit:"万元",
-  },
-])
-
-// 故障报警
-const faultList = ref([
-  {
-    name:'1号机组的XX模块故障',
-    date:'2023-11-28 16:58:02'
-  },
-  {
-    name:'1号机组的XX模块故障',
-    date:'2023-11-28 16:58:02'
-  },
-  {
-    name:'1号机组的XX模块故障',
-    date:'2023-11-28 16:58:02'
-  },
-])
 </script>
 
 <template>
-  <div class="page m100">
+<div>
-    <div class="page-left-box">
+  空调
-      <!--  概况-->
+</div>
-      <div class="title">
-        <span>概况</span>
-      </div>
-      <div id="overview" class="margin10 box-bg overview">
-        <div class="overview-system">
-          <div v-for="(item,index) in systemNumList" class="overview-system-item">
-            <img :src="img[index]" alt="" srcset="">
-            <p>
-              <span class="name">{{ item.name }}</span>
-              <span class="num">{{ item.num }}</span>
-              <span>台</span>
-            </p>
-          </div>
-        </div>
-        <div v-for="(item,index) in overviewList" :class="'overview-item' + index">
-          <span class="unit">{{ item.name }}</span>
-          <p>
-            <span class="value">{{ item.num }}</span>
-            <span class="unit">{{ item.unit }}</span>
-          </p>
-        </div>
-      </div>
-      <!--  用电情况-->
-      <div class="title margin10">
-        <span>用电情况</span>
-      </div>
-      <div id="electricity" class="margin10 box-bg">
-        <div class="electricity-left">
-            <span>
-
-            </span>
-          <span>
-
-          </span>
-          <span></span>
-        </div>
-        <div class="electricity-right">
-            <ul>
-              <li v-for="(item,index) in electricityContent">
-                <span>{{item.name}}</span>
-                <span><span class="value" style="font-size: 1rem">{{item.value}}</span><span class="unit">{{item.unit}}</span></span>
-
-              </li>
-            </ul>
-        </div>
-      </div>
-      <!--  故障报警-->
-      <div class="title margin10">
-        <span>故障报警</span>
-      </div>
-      <div id="fault" class="margin10 box-bg">
-        <p v-for="s in faultList">
-          <span class="name">{{s.name}}</span>
-          <span class="date">时间：{{s.date}}</span>
-        </p>
-      </div>
-    </div>
-    <div class="page-right-box">
-      <!--  开机策略 -->
-      <div class="title">
-        <span>开机策略</span>
-      </div>
-      <div id="airConditioningLoad" class="margin10 box-bg"></div>
-      <!--  维护提醒-->
-      <div class="title margin10">
-        <span>维护提醒</span>
-      </div>
-      <div id="reminder" class="margin10 box-bg"></div>
-
-    </div>
-  </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
-#reminder {
-  height: vh(576);
-  background-image: url('@/assets/images/air-conditioning/reminder-bg.png');
-}
 
-#overview > div {
-  width: 24.125rem;
-  height: 27%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 4.75rem;
-  padding-right: 1.3rem;
-  box-sizing: border-box;
-}
-
-.overview {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  align-content: space-evenly;
-
-  &-system {
-    padding: 0 !important;
-    display: flex;
-    justify-content: space-around !important;
-
-    &-item {
-      display: flex;
-
-      img {
-        margin-right: 1rem;
-      }
-
-      .name {
-        font-size: .8rem;
-        margin-bottom: .5rem;
-        display: block;
-      }
-
-      .num {
-        color: rgba(61, 255, 244, 1);
-        font-weight: 600;
-        font-size: 1.1rem;
-        margin-right: .2rem;
-      }
-
-    }
-  }
-
-  &-item0 {
-    background-size: 100% 100%;
-    background-image: url("@/assets/images/air-conditioning/area.png");
-  }
-
-  &-item1 {
-    background-size: 100% 100%;
-    background-image: url("@/assets/images/air-conditioning/system-total.png");
-  }
-
-}
-
-.unit {
-  font-size: .8rem;
-  color: rgba(221, 255, 253, 1)
-}
-
-.value {
-  margin-right: .7rem;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: rgba(91, 250, 241, 1);
-}
-
-//用电
-#electricity {
-  display: flex;
-  justify-content: space-around;
-}
-
-.electricity-left {
-  width: 12.6%;
-  height: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: space-around;
-
-  span {
-    display: block;
-    width: 100%;
-    height: 21.5%;
-    background-size: 100% 100%;
-    background-image: url("@/assets/images/air-conditioning/electricity.png");
-  }
-}
-.electricity-right{
-  width: 69%;
-  height: 100%;
-  ul{
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    align-content: space-evenly;
-    //background-color: #fff;
-    li{
-      height: 11%;
-      width:100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: .875rem;
-      padding:0 .5rem;
-      background-size: 100% 100%;
-      background-image: url("@/assets/images/air-conditioning/electricityBg.png");
-    }
-  }
-}
-//故障
-#fault{
-  padding: 0 1rem;
-  box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: space-evenly;
-  p{
-    width: 100%;
-    height: 20%;
-    background-image: url("@/assets/images/air-conditioning/fault.png");
-    background-size: 100% 100%;
-    padding-left: 3.75rem;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    span{
-      display: block;
-      width: 100%;
-    }
-    .name{
-      font-weight: 600;
-    color:rgba(91, 250, 241, 1)
-    }
-    .date{
-      color:rgba(202, 202, 202, 1);
-      font-size: .8rem;
-    }
-  }
-}
 </style>

src/views/carbonEmission/index.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-<div >
+<div>
   碳排放
 </div>
 </template>

src/views/drainage/index.vue

@@ -1,291 +1,13 @@
 <script setup>
-import {ref} from "vue";
 
-const operationLeftList = ref([
-  {
-    name: '1号排水点',
-    children: [
-      {
-        name: '1#泵',
-        state: 1
-      },
-      {
-        name: '2#泵',
-        state: 0
-      }
-    ]
-  },
-  {
-    name: '2号排水点',
-    children: [
-      {
-        name: '3#泵',
-        state: 1
-      },
-      {
-        name: '4#泵',
-        state:0
-      }
-    ]
-  },
-  {
-    name: '3号排水点',
-    children: [
-      {
-        name: '5#泵',
-        state: 1
-      },
-      {
-        name: '6#泵',
-        state: 0
-      }
-    ]
-  }
-  , {
-    name: '4号排水点',
-    children: [
-      {
-        name: '7#泵',
-        state: 1
-      },
-      {
-        name: '8#泵',
-        state: 0
-      }
-    ]
-  },
-  {
-    name: '5号排水点',
-    children: [
-      {
-        name: '9#泵',
-        state: 1
-      },
-      {
-        name: '10#泵',
-        state: 0
-      }
-    ]
-  },
-  {
-    name: '6号排水点',
-    children: [
-      {
-        name: '11#泵',
-        state: 1
-      },
-      {
-        name: '12#泵',
-        state: 0
-      }
-    ]
-  },
-  {
-    name: '7号排水点',
-    children: [
-      {
-        name: '13#泵',
-        state: 1
-      },
-      {
-        name: '14#泵',
-        state: 0
-      }
-    ]
-  },
-])
-const operationRightList = ref([
-  {
-    name: '8号排水点',
-    children: [
-      {
-        name: '15#泵',
-        state: 1
-      },
-      {
-        name: '16#泵',
-        state: 0
-      }
-    ]
-  },
-  {
-    name: '9号排水点',
-    children: [
-      {
-        name: '17#泵',
-        state: 1
-      },
-      {
-        name: '18#泵',
-        state: 0
-      }
-    ]
-  },
-  {
-    name: '10号排水点',
-    children: [
-      {
-        name: '19#泵',
-        state: 1
-      },
-      {
-        name: '20#泵',
-        state: 0
-      }
-    ]
-  }
-  , {
-    name: '11号排水点',
-    children: [
-      {
-        name: '21#泵',
-        state: 1
-      },
-      {
-        name: '22#泵',
-        state: 0
-      }
-    ]
-  },
-  {
-    name: '12号排水点',
-    children: [
-      {
-        name: '23#泵',
-        state: 1
-      },
-      {
-        name: '24#泵',
-        state: 0
-      }
-    ]
-  },
-  {
-    name: '13号排水点',
-    children: [
-      {
-        name: '25#泵',
-        state: 1
-      },
-      {
-        name: '26#泵',
-        state: 0
-      }
-    ]
-  },
-  {
-    name: '14号排水点',
-    children: [
-      {
-        name: '27#泵',
-        state: 1
-      },
-      {
-        name: '28#泵',
-        state: 0
-      }
-    ]
-  },
-])
 </script>
 
 <template>
-  <div class="page m100">
+<div>
-    <div class="page-left-box">
+  排水
-      <div class="title ">
+</div>
-        <span>运行情况</span>
-
-      </div>
-      <div class="page-big-box margin10">
-        <div v-for="(item,index) in operationLeftList" class="system-item">
-          <span class="system-item-title">{{ item.name }}</span>
-          <div class="system-item-right">
-            <p v-for="(s,i) in item.children">
-              <span>{{ s.name }}</span>
-              <span :class="'state' + s.state"></span>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="page-right-box">
-      <div class="title ">
-        <span>运行情况</span>
-
-      </div>
-      <div class="page-big-box margin10">
-        <div v-for="(item,index) in operationRightList" class="system-item">
-          <span class="system-item-title">{{ item.name }}</span>
-          <div class="system-item-right">
-            <p v-for="(s,i) in item.children">
-              <span>{{ s.name }}</span>
-              <span :class="'state' + s.state"></span>
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
-.page-big-box {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: space-evenly;
-  padding: 0 .5rem;
-  box-sizing: border-box;
-}
 
-.system-item {
-  height: 12.6%;
-  //background-color: #fff;
-  width: 100%;
-  background-size: 100% 100%;
-  background-image: url("@/assets/images/drainage/drainage-item-bg.png");
-  position: relative;
-
-  &-title {
-    position: absolute;
-    top: 68%;
-    left: 6%;
-    font-family: 'title';
-    font-size: .8rem;
-  }
-
-  &-right {
-    height: 100%;
-    margin-left: 8.275rem;
-    display: flex;
-    flex-wrap: wrap;
-    align-content: space-evenly;
-
-    p {
-      padding-left: 2rem;
-      padding-right: 2rem;
-      box-sizing: border-box;
-      height: 40%;
-      width: 100%;
-      //background-color: #fff;
-      display: flex;
-      align-items: center;
-      font-size: .9rem;
-      justify-content: space-between;
-    }
-  }
-}
-
-.state0, .state1 {
-  width: 1.7rem;
-  height: 1.7rem;
-  background-size: 100% 100%;
-}
-
-.state0 {
-  background-image: url("@/assets/images/drainage/state0.png");
-}
-
-.state1 {
-  background-image: url("@/assets/images/drainage/state1.png");
-}
 </style>

src/views/energyEfficiency/index.vue

@@ -23,56 +23,56 @@ const systemLeftList = ref([
 const systemRightList = ref([
   [
     {
-      name: '今日',
+      name: "今日",
-      value: '3122',
+      value: "3122",
-      unit: 'kWh'
+      unit: "kWh",
     },
     {
-      name: '昨日',
+      name: "昨日",
-      value: '9400',
+      value: "9400",
-      unit: 'kWh'
+      unit: "kWh",
     },
     {
-      name: '同比',
+      name: "同比",
-      value: '-201',
+      value: "-201",
-      unit: '%'
+      unit: "%",
-    }
+    },
-  ],//日
+  ], //日
   [
     {
-      name: '本月',
+      name: "本月",
-      value: '3122',
+      value: "3122",
-      unit: 'kWh'
+      unit: "kWh",
     },
     {
-      name: '上月',
+      name: "上月",
-      value: '9400',
+      value: "9400",
-      unit: 'kWh'
+      unit: "kWh",
     },
     {
-      name: '同比',
+      name: "同比",
-      value: '-201',
+      value: "-201",
-      unit: '%'
+      unit: "%",
-    }
+    },
-  ],//月
+  ], //月
   [
     {
-      name: '今年',
+      name: "今年",
-      value: '3122',
+      value: "3122",
-      unit: 'kWh'
+      unit: "kWh",
     },
     {
-      name: '去年',
+      name: "去年",
-      value: '9400',
+      value: "9400",
-      unit: 'kWh'
+      unit: "kWh",
     },
     {
-      name: '同比',
+      name: "同比",
-      value: '-201',
+      value: "-201",
-      unit: '%'
+      unit: "%",
-    }
+    },
-  ]//年
+  ], //年
-])
+]);
 const selectSystemTab = (index) => {
   systemTabIndex.value = index;
 };
@@ -375,18 +375,12 @@ const drawEnergyFlow = () => {
   let option = {
     series: [
       {
-        // select:{
-        //   disabled:true
-        // },
         type: "sankey",
         layout: "none",
         top: "5%",
         bottom: "4%",
         left: "6%",
         right: "5%",
-        nodeWidth: '12',
-
-        nodeAlign:'right',
         nodeWidth: "13",
         // nodeAlign:'right',
         focusNodeAdjacency: "allEdges",
@@ -413,8 +407,7 @@ const drawEnergyFlow = () => {
           color: "#fff",
           fontSize: 14,
           formatter: function (params) {
-
+            if (params.dataIndex == 0) {
-            if (params.dataIndex === 0) {
               return (
                 "{a|" +
                 params.data.name +
@@ -751,166 +744,6 @@ function getExhibitionLoad() {
   };
   myChart.setOption(option);
 }
-
-// 电费电价
-const drawElectricityPrice = () => {
-  let myChart = echarts.init(document.getElementById('electricity-price'))
-  let option = {
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: "rgba(1, 13, 19, 0.5)",
-      borderWidth: 0,
-      axisPointer: { // 坐标轴指示器，坐标轴触发有效
-        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-      },
-      textStyle: {
-        color: "rgba(212, 232, 254, 1)",
-        // fontSize: fontChart(0.24),
-      },
-      confine: true
-    },
-    legend: {
-      show: true,
-      data:['电费','销售电价'],
-      selected:{
-        '电费': true,
-        '销售电价': true,
-      },
-      icon: 'rect',
-      itemGap:14,
-      top:"8",
-      layout: 'vertical',
-      itemHeight: '10',
-      // itemWidth:'10',
-      textStyle: {
-        color: "rgba(221, 255, 253, 1)"
-      }
-    },
-    grid: {
-      top: "20%",
-      left: "4%",
-      right: "4%",
-      bottom: "4%",
-      containLabel: true,
-    },
-
-    xAxis: {
-      type: 'category',
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: '#557775'
-        }
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        // interval: 0,
-        // rotate: 40,
-
-        show: true,
-        textStyle: {
-          fontFamily: 'Microsoft YaHei',
-          color: "#DDFFFD",
-        }
-      },
-    },
-
-    yAxis: [{
-      name: '单位:kWh',
-      nameTextStyle: {
-        color: "rgba(221, 255, 253, 1)",
-        padding: [0, 0, 0, 10]
-      },
-      // 表现为上下位置
-      type: 'value',
-      max: '50',
-      splitNumber: 5,
-      axisLine: {
-        show: false,
-        lineStyle: {
-          color: '#666666',
-        }
-      },
-      splitLine: {
-        show: false
-      },
-      axisLabel: {
-        textStyle: {
-          fontFamily: 'Microsoft YaHei',
-          color: "#DDFFFD",
-          fontSize: 12
-        }
-      }
-    },
-      {
-        // splitNumber:
-        name: '单位:元/kWh',
-        position: 'right', // 放在右边
-        nameTextStyle: {
-          padding: [0, 15, 0, 0],
-          color: 'rgba(221, 255, 253, 1)'
-        },
-        axisLabel: {
-          show: true,
-          // fontSize: 18,
-          color: 'rgba(221, 255, 253, 1)',
-          formatter: function (value) {
-            // 在标签后面添加百分号
-            return value.toFixed(1);
-          },
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: "dashed",
-            color: "rgba(1, 39, 37, 0.30)",
-
-            // color: '#eff6ff'
-          }
-        },
-      },
-    ],
-    series: [{
-      name: '电费',
-      type: 'bar',
-      barWidth: '15',
-      itemStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-            offset: 0,
-            color: 'rgba(82, 217, 208, 1)'
-          }, {
-            offset: 1,
-            color: 'rgba(82, 217, 208, 0)'
-          }]),
-
-        },
-      },
-      data: [40, 35, 15, 10, 19, 24, 14]
-    },
-      {
-        name: '销售电价',
-        type: 'line',
-        yAxisIndex: 1, // 与第二个 y 轴关联
-        itemStyle: {
-          color: 'rgba(1, 246, 139, 1)', // 设置折线颜色为黄色
-        },
-        symbol:"none",
-        data: [0.1, 0.2, 0.6, 1, 0.4, 0.8, 0.9], // 折线图的数据
-      },
-    ]
-  };
-  myChart.setOption(option)
-}
 // dom加载
 onMounted(() => {
   // 能耗总量
@@ -918,11 +751,7 @@ onMounted(() => {
   // 定额管理
   drawManagement();
   // 能效流向
-  drawEnergyFlow()
+  drawEnergyFlow();
-//   电费电价
-  drawElectricityPrice()
-// })
-//   drawEnergyFlow();
   //复费率
   getExhibitionLoad();
 });
@@ -981,14 +810,17 @@ onMounted(() => {
             </div>
           </div>
           <div class="system-content-right">
-            <div v-for="(item,index) in systemRightList" class="system-content-right-item">
+            <div
+              class="system-content-right-item"
+              v-for="(item, index) in systemRightList"
+            >
               <ul class="system-content-right-item-title">
-                <li v-for="(s,i) in item">{{ s.name }}</li>
+                <li v-for="(s, i) in item">{{ s.name }}</li>
               </ul>
               <div class="system-content-right-item-box">
-                <span v-for="v in item" :class="v.unit==='%'?'yoy':''">{{ v.value }} <span
+                <span v-for="v in item" :class="v.unit === '%' ? 'yoy' : ''"
-                    class="unit">{{ v.unit }}</span></span>
+                  >{{ v.value }} <span class="unit">{{ v.unit }}</span></span
-
+                >
               </div>
             </div>
           </div>
@@ -1008,7 +840,7 @@ onMounted(() => {
       <div class="title margin10">
         <span>电费电价</span>
       </div>
-      <div id="electricity-price" class="margin10 box-bg"></div>
+      <div id="ranking" class="margin10 box-bg"></div>
     </div>
   </div>
 </template>
@@ -1079,7 +911,6 @@ onMounted(() => {
     display: flex;
     flex-wrap: wrap;
     align-content: space-evenly;
-
     &-item {
       height: 30%;
       //background-color: #000;

src/views/overview/index.vue

@@ -2,26 +2,24 @@
 import calendar from '@/components/calendar/index.vue'
 import * as echarts from 'echarts'
 import {onMounted,ref} from "vue";
-
-import getPath from "@/utils/getPath.js";
 // 实时负荷
 const realTimeLoad = ref([
-  {pic:getPath.roomnum,name:'配电室数量',value:8,unit:'个'},
+  {pic:"../../assets/images/overview/room-num.png",name:'配电室数量',value:8,unit:'个'},
-  {pic:getPath.WL,name:'实时负荷',value:1465.2,unit:'kW'}, //负荷
+  {pic:"../../assets/images/overview/WL.png",name:'实时负荷',value:1465.2,unit:'kW'}, //负荷
-  {pic:getPath.E,name:'今日电量',value:146,unit:'kW/h'}, //电量
+  {pic:"../../assets/images/overview/E.png",name:'今日电量',value:146,unit:'kW/h'}, //电量
 ])
 // 气象站
 const weatherStation = ref([
-  {pic:getPath.rain,name:'雨量',value:100,unit:'mm'},
+  {pic:"../../assets/images/overview/rain.png",name:'雨量',value:100,unit:'mm'},
-  {pic:getPath.rainsnow,name:'雨雪',value:'实际取值',unit:'kW'},
+  {pic:"../../assets/images/overview/rain-snow.png",name:'雨雪',value:'实际取值',unit:'kW'},
-  {pic:getPath.wind,name:'风向',value:'东南风'},
+  {pic:"../../assets/images/overview/wind.png",name:'风向',value:'东南风'},
-  {pic:getPath.illuminance,name:'光照度',value:101,unit:'lux'},
+  {pic:"../../assets/images/overview/illuminance.png",name:'光照度',value:101,unit:'lux'},
-  {pic:getPath.windspeed,name:'风速',value:'东南风3级'},
+  {pic:"../../assets/images/overview/wind-speed.png",name:'风速',value:'东南风3级'},
-  {pic:getPath.air,name:'今日电量',value:'优'},
+  {pic:"../../assets/images/overview/air.png",name:'今日电量',value:'优'},
 ])
-// const getImageUrl=(name)=>{
+const getImageUrl=(name)=>{
-//   return `url(${new URL(name, import.meta.url).href})`
+  return `url(${new URL(name, import.meta.url).href})`
-// }
+}
 onMounted(()=>{
   // 用电量
   drawPowerEcharts()
@@ -586,7 +584,7 @@ function getCarbonEmission() {
       </div>
       <div class="margin10 box-bg">
           <ul class="real-time-load">
-            <li v-for="(item,index) in realTimeLoad" :style="'background-image:url('+item.pic+')'">
+            <li v-for="(item,index) in realTimeLoad" :style="'background-image:'+ getImageUrl(item.pic)">
               <span class="unit">{{item.name}}</span>
               <p>
                 <span class="value">{{item.value}}</span>
@@ -604,7 +602,7 @@ function getCarbonEmission() {
       <div class="margin10 box-bg">
         <ul class="weather-station">
           <li v-for="(item,index) in weatherStation" >
-              <p class="img" :style="'background-image:url('+item.pic+')'">
+              <p class="img" :style="'background-image:'+ getImageUrl(item.pic)">
                 <span>{{item.name}}</span>
               </p>
             <p><span class="wea-value">{{item.value}}</span><span class="unit" v-if="item.unit">{{ item.unit }}</span></p>

src/views/screen/index.vue

@@ -3,26 +3,9 @@
 </script>
 
 <template>
-  <div class="page m100">
+<div>
-    <div class="page-left-box">
+  显示屏
-      <div class="title ">
+</div>
-        <span>故障报警</span>
-
-      </div>
-      <div class="page-big-box margin10">
-
-      </div>
-    </div>
-    <div class="page-right-box">
-      <div class="title ">
-        <span>运行状态</span>
-
-      </div>
-      <div class="page-big-box margin10">
-
-      </div>
-    </div>
-  </div>
 </template>
 
 <style scoped lang="scss">