代码提交==

src/assets/font/font.css

@@ -4,4 +4,11 @@
     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:'../../assets/images/menu/overview.png',select:'../../assets/images/menu/overview-select.png'},
+  {name:shallowRef(overview),default:getPath.overview,select:getPath.overviewselect},
   {name:shallowRef(energyMonitoring),
-    default:'../../assets/images/menu/energy.png',select:'../../assets/images/menu/energy-select.png'},
+    default:getPath.energy,select:getPath.energyselect},
-  {name:shallowRef(energyEfficiency),default:'../../assets/images/menu/energy-efficiency.png',select:'../../assets/images/menu/energy-efficiency-select.png'},
+  {name:shallowRef(energyEfficiency),default:getPath.energyefficiency,select:getPath.energyefficiencyselect},
-  {name:shallowRef(drainage),default:'../../assets/images/menu/drainage.png',select:'../../assets/images/menu/drainage-select.png'},
+  {name:shallowRef(drainage),default:getPath.drainage,select:getPath.drainageselect},
-  {name:shallowRef(airConditioning),default:'../../assets/images/menu/air-conditioning.png',select:'../../assets/images/menu/air-conditioning-select.png'},
+  {name:shallowRef(airConditioning),default:getPath.airconditioning,select:getPath.airconditioningselect},
-  {name:shallowRef(lighting),default:'../../assets/images/menu/lighting.png',select:'../../assets/images/menu/lighting-select.png'},
+  {name:shallowRef(lighting),default:getPath.lighting,select:getPath.lightingselect},
-  {name:shallowRef(carbonEmission),default:'../../assets/images/menu/carbon.png',select:'../../assets/images/menu/carbon-select.png'},
+  {name:shallowRef(carbonEmission),default:getPath.carbon,select:getPath.carbonselect},
-  {name:shallowRef(screen),default:'../../assets/images/menu/screen.png',select:'../../assets/images/menu/screen-select.png'}
+  {name:shallowRef(screen),default:getPath.screen,select:getPath.screenselect}
 ])
 const menuIndex = ref(0)
 // 菜单切换方法

src/style.scss

@@ -6,6 +6,7 @@
   padding: 0;
   overflow: hidden;
   color: rgba(221, 255, 253, 1);
+  font-family: "Microsoft YaHei";
 }
 p,ul,li{
   margin: 0;
@@ -34,7 +35,13 @@ 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/views/air-conditioning/index.vue

@@ -1,13 +1,306 @@
 <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>
+  <div class="page m100">
-  空调
+    <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 scoped lang="scss">
+<style lang="scss" scoped>
+#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,13 +1,291 @@
 <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>
+  <div class="page m100">
-  排水
+    <div class="page-left-box">
-</div>
+      <div class="title ">
+        <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 scoped lang="scss">
+<style lang="scss" scoped>
+.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

@@ -19,51 +19,51 @@ const systemRightList = ref([
     {
       name: '今日',
       value: '3122',
-      unit:'kWh'
+      unit: 'kWh'
     },
     {
       name: '昨日',
       value: '9400',
-      unit:'kWh'
+      unit: 'kWh'
     },
     {
-      name:'同比',
+      name: '同比',
-      value:'-201',
+      value: '-201',
-      unit:'%'
+      unit: '%'
     }
   ],//日
   [
     {
       name: '本月',
       value: '3122',
-      unit:'kWh'
+      unit: 'kWh'
     },
     {
       name: '上月',
       value: '9400',
-      unit:'kWh'
+      unit: 'kWh'
     },
     {
-      name:'同比',
+      name: '同比',
-      value:'-201',
+      value: '-201',
-      unit:'%'
+      unit: '%'
     }
   ],//月
   [
     {
       name: '今年',
       value: '3122',
-      unit:'kWh'
+      unit: 'kWh'
     },
     {
       name: '去年',
       value: '9400',
-      unit:'kWh'
+      unit: 'kWh'
     },
     {
-      name:'同比',
+      name: '同比',
-      value:'-201',
+      value: '-201',
-      unit:'%'
+      unit: '%'
     }
   ]//年
 ])
@@ -359,14 +359,18 @@ const drawEnergyFlow = () => {
   let option = {
     series: [
       {
+        // select:{
+        //   disabled:true
+        // },
         type: "sankey",
         layout: "none",
         top: "5%",
         bottom: "4%",
         left: "6%",
         right: "5%",
-        nodeWidth: '13',
+        nodeWidth: '12',
-        // nodeAlign:'right',
+
+        nodeAlign:'right',
         focusNodeAdjacency: "allEdges",
         data: itemStyleSource,
         links: [
@@ -393,7 +397,7 @@ const drawEnergyFlow = () => {
           fontSize: 14,
           formatter: function (params) {
 
-            if (params.dataIndex == 0) {
+            if (params.dataIndex === 0) {
               return (
                   "{a|" +
                   params.data.name +
@@ -450,6 +454,166 @@ const drawEnergyFlow = () => {
   };
   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(() => {
   // 能耗总量
@@ -458,6 +622,8 @@ onMounted(() => {
   drawManagement()
   // 能效流向
   drawEnergyFlow()
+//   电费电价
+  drawElectricityPrice()
 })
 </script>
 
@@ -510,12 +676,13 @@ onMounted(() => {
             </div>
           </div>
           <div class="system-content-right">
-            <div class="system-content-right-item" v-for="(item,index) in systemRightList">
+            <div v-for="(item,index) in systemRightList" class="system-content-right-item">
-              <ul  class="system-content-right-item-title">
+              <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 class="unit">{{v.unit}}</span></span>
+                <span v-for="v in item" :class="v.unit==='%'?'yoy':''">{{ v.value }} <span
+                    class="unit">{{ v.unit }}</span></span>
 
               </div>
             </div>
@@ -538,7 +705,7 @@ onMounted(() => {
       <div class="title margin10">
         <span>电费电价</span>
       </div>
-      <div id="ranking" class="margin10 box-bg"></div>
+      <div id="electricity-price" class="margin10 box-bg"></div>
     </div>
   </div>
 </template>
@@ -609,19 +776,21 @@ onMounted(() => {
     display: flex;
     flex-wrap: wrap;
     align-content: space-evenly;
+
     &-item {
       height: 30%;
       //background-color: #000;
       width: 100%;
 
-      &-title{
+      &-title {
         display: flex;
         justify-content: space-between;
         font-size: .8rem;
         padding: 0 .5rem;
         box-sizing: border-box;
       }
-      &-box{
+
+      &-box {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -632,9 +801,10 @@ onMounted(() => {
         background-size: 100% 100%;
         height: 65%;
         width: 100%;
-        color: rgba(255,255,255,1);
+        color: rgba(255, 255, 255, 1);
-        .yoy{
+
-          color:rgba(1, 246, 139, 1);
+        .yoy {
+          color: rgba(1, 246, 139, 1);
         }
 
       }

src/views/overview/index.vue

@@ -2,24 +2,26 @@
 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:"../../assets/images/overview/room-num.png",name:'配电室数量',value:8,unit:'个'},
+  {pic:getPath.roomnum,name:'配电室数量',value:8,unit:'个'},
-  {pic:"../../assets/images/overview/WL.png",name:'实时负荷',value:1465.2,unit:'kW'}, //负荷
+  {pic:getPath.WL,name:'实时负荷',value:1465.2,unit:'kW'}, //负荷
-  {pic:"../../assets/images/overview/E.png",name:'今日电量',value:146,unit:'kW/h'}, //电量
+  {pic:getPath.E,name:'今日电量',value:146,unit:'kW/h'}, //电量
 ])
 // 气象站
 const weatherStation = ref([
-  {pic:"../../assets/images/overview/rain.png",name:'雨量',value:100,unit:'mm'},
+  {pic:getPath.rain,name:'雨量',value:100,unit:'mm'},
-  {pic:"../../assets/images/overview/rain-snow.png",name:'雨雪',value:'实际取值',unit:'kW'},
+  {pic:getPath.rainsnow,name:'雨雪',value:'实际取值',unit:'kW'},
-  {pic:"../../assets/images/overview/wind.png",name:'风向',value:'东南风'},
+  {pic:getPath.wind,name:'风向',value:'东南风'},
-  {pic:"../../assets/images/overview/illuminance.png",name:'光照度',value:101,unit:'lux'},
+  {pic:getPath.illuminance,name:'光照度',value:101,unit:'lux'},
-  {pic:"../../assets/images/overview/wind-speed.png",name:'风速',value:'东南风3级'},
+  {pic:getPath.windspeed,name:'风速',value:'东南风3级'},
-  {pic:"../../assets/images/overview/air.png",name:'今日电量',value:'优'},
+  {pic:getPath.air,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()
@@ -584,7 +586,7 @@ function getCarbonEmission() {
       </div>
       <div class="margin10 box-bg">
           <ul class="real-time-load">
-            <li v-for="(item,index) in realTimeLoad" :style="'background-image:'+ getImageUrl(item.pic)">
+            <li v-for="(item,index) in realTimeLoad" :style="'background-image:url('+item.pic+')'">
               <span class="unit">{{item.name}}</span>
               <p>
                 <span class="value">{{item.value}}</span>
@@ -602,7 +604,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:'+ getImageUrl(item.pic)">
+              <p class="img" :style="'background-image:url('+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,9 +3,26 @@
 </script>
 
 <template>
-<div>
+  <div class="page m100">
-  显示屏
+    <div class="page-left-box">
-</div>
+      <div class="title ">
+        <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">