From 06211b312df4e0aa33f17f7bf4f88fcc4c851d23 Mon Sep 17 00:00:00 2001
From: gcw_MV9p2JJN <gcw_MV9p2JJN@noreply.gitcode.com>
Date: Thu, 4 Sep 2025 15:52:06 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=B0=83=E6=95=B4=E5=AE=8C?=
 =?UTF-8?q?=E6=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue | 860 +++++++++++++++++++++++++++++++-------------
 1 file changed, 611 insertions(+), 249 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index 13ffb25..502012f 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,32 +1,54 @@
 <template>
   <div class="page" style="padding-left: 8px; padding-top: 8px">
-    <CardHeader :showBtn="true" :active="'0'" :period="period" @handleClick="handleTimeType">
+    <CardHeader
+      :showBtn="true"
+      :active="'0'"
+      :period="period"
+      @handleClick="handleTimeType"
+    >
       <span class="card-header-title">
-        上海干巷能耗统计
-        <el-button @click="dialogVisible = true" v-if="list.length > 1" type="primary" size="small" class="header-more-btn"> 查看更多 </el-button>
+        上海干巷全厂能耗统计
+        <el-button
+          @click="dialogVisible = true"
+          v-if="list.length > 1"
+          type="primary"
+          size="small"
+          class="header-more-btn"
+        >
+          查看更多
+        </el-button>
       </span>
     </CardHeader>
-    <template v-for="(row, rowIndex) in list" :key="rowIndex" v-loading="loading02">
-      <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0">
+    <template
+      v-for="(row, rowIndex) in list"
+      :key="rowIndex"
+      v-loading="loading02"
+    >
+      <div
+        class="card-list"
+        v-if="settingsStore.sideTheme == 'theme-dark' && rowIndex == 0"
+      >
         <template v-for="(item, index) in row" :key="index">
-          <!--能耗统计-->
           <div class="card-list-item">
             <div class="item-left">
-              <div class="top-icon" 
-                :style="{ 
+              <div
+                class="top-icon"
+                :style="{
                   backgroundImage: 'url(' + bgList[index].icon + ')',
                   backgroundColor: bgList[index].iconBg,
                   width: '73px',
                   height: '73px',
-                  backgroundSize: '40px'
-                }" 
+                  backgroundSize: '40px',
+                }"
               />
             </div>
             <div class="item-right">
               <div class="top-right">
                 <div class="right-name">
                   {{ item.energyName }}
-                  <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
+                  <span v-if="item.energyUnit" class="unit"
+                    >({{ item.energyUnit }})</span
+                  >
                 </div>
                 <div class="right-value">
                   <span>{{ item.count }}</span>
@@ -36,7 +58,15 @@
                 <div class="bottom-left">
                   <span>
                     同比: {{ Math.abs(item.tongbi).toFixed(1) }}
-                    <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
+                    <el-icon
+                      :color="
+                        item.tongbi > 0
+                          ? '#4CAF50'
+                          : item.tongbi < 0
+                          ? '#F44336'
+                          : ''
+                      "
+                    >
                       <Top v-if="item.tongbi > 0" />
                       <Bottom v-if="item.tongbi < 0" />
                     </el-icon>
@@ -45,7 +75,15 @@
                 <div class="bottom-right">
                   <span>
                     环比: {{ Math.abs(item.huanbi).toFixed(1) }}
-                    <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
+                    <el-icon
+                      :color="
+                        item.huanbi > 0
+                          ? '#4CAF50'
+                          : item.huanbi < 0
+                          ? '#F44336'
+                          : ''
+                      "
+                    >
                       <Top v-if="item.huanbi > 0" />
                       <Bottom v-if="item.huanbi < 0" />
                     </el-icon>
@@ -56,25 +94,35 @@
           </div>
         </template>
       </div>
-      <div class="card-list" v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0">
-        <template v-for="(item, index) in row" :key="index" v-show="rowIndex == 0">
+      <div
+        class="card-list"
+        v-if="settingsStore.sideTheme != 'theme-dark' && rowIndex == 0"
+      >
+        <template
+          v-for="(item, index) in row"
+          :key="index"
+          v-show="rowIndex == 0"
+        >
           <div class="card-list-item">
             <div class="item-left">
-              <div class="top-icon" 
-                :style="{ 
+              <div
+                class="top-icon"
+                :style="{
                   backgroundImage: 'url(' + bgList[index].icon2 + ')',
                   backgroundColor: bgList[index].iconBg,
                   width: '73px',
                   height: '73px',
-                  backgroundSize: '40px'
-                }" 
+                  backgroundSize: '40px',
+                }"
               />
             </div>
             <div class="item-right">
               <div class="top-right">
                 <div class="right-name">
                   {{ item.energyName }}
-                  <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
+                  <span v-if="item.energyUnit" class="unit"
+                    >({{ item.energyUnit }})</span
+                  >
                 </div>
                 <div class="right-value">
                   <span>{{ item.count }}</span>
@@ -84,7 +132,15 @@
                 <div class="bottom-left">
                   <span>
                     同比: {{ Math.abs(item.tongbi).toFixed(1) }}
-                    <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
+                    <el-icon
+                      :color="
+                        item.tongbi > 0
+                          ? '#4CAF50'
+                          : item.tongbi < 0
+                          ? '#F44336'
+                          : ''
+                      "
+                    >
                       <Top v-if="item.tongbi > 0" />
                       <Bottom v-if="item.tongbi < 0" />
                     </el-icon>
@@ -93,7 +149,15 @@
                 <div class="bottom-right">
                   <span>
                     环比: {{ Math.abs(item.huanbi).toFixed(1) }}
-                    <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
+                    <el-icon
+                      :color="
+                        item.huanbi > 0
+                          ? '#4CAF50'
+                          : item.huanbi < 0
+                          ? '#F44336'
+                          : ''
+                      "
+                    >
                       <Top v-if="item.huanbi > 0" />
                       <Bottom v-if="item.huanbi < 0" />
                     </el-icon>
@@ -106,19 +170,22 @@
         </template>
       </div>
     </template>
-    
     <!-- 图表 -->
     <div class="page-main">
       <el-row :gutter="9" style="margin-bottom: 27px">
         <el-col :span="12">
           <el-card>
-            <CardHeader :period="period" @handleClick="handleTimeType"> 上海干巷能耗趋势 </CardHeader>
+            <CardHeader :period="period" @handleClick="handleTimeType">
+              上海干巷能耗趋势
+            </CardHeader>
             <div id="Chart1" class="chart" v-loading="loading1" />
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card>
-            <CardHeader :period="period" @handleClick="handleTimeType"> 上海干巷能耗占比 </CardHeader>
+            <CardHeader :period="period" @handleClick="handleTimeType">
+              上海干巷全厂能耗占比
+            </CardHeader>
             <div id="Chart2" class="chart" v-loading="loading02" />
           </el-card>
         </el-col>
@@ -126,8 +193,15 @@
       <el-row :gutter="9">
         <el-col :span="12">
           <el-card>
-            <CardHeader :showBtn="true" :period="period" :active="'3'" @handleClick="handleTimeType">
-              上海干巷能耗排名TOP{{ listEnergyConsumptionRankingLength || "" }}
+            <CardHeader
+              :showBtn="true"
+              :period="period"
+              :active="'3'"
+              @handleClick="handleTimeType"
+            >
+              上海干巷厂区能耗排名TOP{{
+                listEnergyConsumptionRankingLength || ""
+              }}
             </CardHeader>
             <div class="top-header">
               <div class="header-left">
@@ -136,32 +210,48 @@
               </div>
               <div class="header-right">能耗量(tce)</div>
             </div>
-            <div id="Chart3" class="chart" v-loading="loading3" style="height: 254px" />
+            <div
+              id="Chart3"
+              class="chart"
+              v-loading="loading3"
+              style="height: 254px"
+            />
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card>
-            <CardHeader :showBtn="true" :period="period" :active="'4'" @handleClick="handleTimeType">
-              尖峰平谷占比
+            <CardHeader
+              :showBtn="true"
+              :period="period"
+              :active="'4'"
+              @handleClick="handleTimeType"
+            >
+              上海干巷尖峰平谷占比
             </CardHeader>
             <div id="Chart4" class="chart" v-loading="loading4" />
           </el-card>
         </el-col>
       </el-row>
     </div>
-    <el-dialog v-model="dialogVisible" title="查看全厂能耗统计" width="90%" v-if="dialogVisible">
+    <el-dialog
+      v-model="dialogVisible"
+      title="查看上海干巷全厂能耗统计"
+      width="90%"
+      v-if="dialogVisible"
+    >
       <template v-for="(row, rowIndex) in list" :key="rowIndex">
         <div class="card-list" v-if="settingsStore.sideTheme == 'theme-dark'">
           <template v-for="(item, index) in row" :key="index">
             <div class="card-list-item">
               <div class="item-left">
-                <div class="top-icon"
+                <div
+                  class="top-icon"
                   :style="{
                     backgroundImage: 'url(' + bgList[index].icon + ')',
                     backgroundColor: bgList[index].iconBg,
                     width: '73px',
                     height: '73px',
-                    backgroundSize: '40px'
+                    backgroundSize: '40px',
                   }"
                 />
               </div>
@@ -169,7 +259,9 @@
                 <div class="top-right">
                   <div class="right-name">
                     {{ item.energyName }}
-                    <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
+                    <span v-if="item.energyUnit" class="unit"
+                      >({{ item.energyUnit }})</span
+                    >
                   </div>
                   <div class="right-value">
                     <span> {{ item.count }}</span>
@@ -179,7 +271,15 @@
                   <div class="bottom-left">
                     <span>
                       同比: {{ Math.abs(item.tongbi).toFixed(1) }}
-                      <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
+                      <el-icon
+                        :color="
+                          item.tongbi > 0
+                            ? '#4CAF50'
+                            : item.tongbi < 0
+                            ? '#F44336'
+                            : ''
+                        "
+                      >
                         <Top v-if="item.tongbi > 0" />
                         <Bottom v-if="item.tongbi < 0" />
                       </el-icon>
@@ -188,7 +288,15 @@
                   <div class="bottom-right">
                     <span>
                       环比: {{ Math.abs(item.huanbi).toFixed(1) }}
-                      <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
+                      <el-icon
+                        :color="
+                          item.huanbi > 0
+                            ? '#4CAF50'
+                            : item.huanbi < 0
+                            ? '#F44336'
+                            : ''
+                        "
+                      >
                         <Top v-if="item.huanbi > 0" />
                         <Bottom v-if="item.huanbi < 0" />
                       </el-icon>
@@ -203,13 +311,14 @@
           <template v-for="(item, index) in row" :key="index">
             <div class="card-list-item">
               <div class="item-left">
-                <div class="top-icon"
+                <div
+                  class="top-icon"
                   :style="{
                     backgroundImage: 'url(' + bgList[index].icon2 + ')',
                     backgroundColor: bgList[index].iconBg,
                     width: '73px',
                     height: '73px',
-                    backgroundSize: '40px'
+                    backgroundSize: '40px',
                   }"
                 />
               </div>
@@ -227,7 +336,15 @@
                   <div class="bottom-left">
                     <span>
                       同比: {{ Math.abs(item.tongbi).toFixed(1) }}
-                      <el-icon :color="item.tongbi > 0 ? '#4CAF50' : item.tongbi < 0 ? '#F44336' : ''">
+                      <el-icon
+                        :color="
+                          item.tongbi > 0
+                            ? '#4CAF50'
+                            : item.tongbi < 0
+                            ? '#F44336'
+                            : ''
+                        "
+                      >
                         <Top v-if="item.tongbi > 0" />
                         <Bottom v-if="item.tongbi < 0" />
                       </el-icon>
@@ -236,7 +353,15 @@
                   <div class="bottom-right">
                     <span>
                       环比: {{ Math.abs(item.huanbi).toFixed(1) }}
-                      <el-icon :color="item.huanbi > 0 ? '#4CAF50' : item.huanbi < 0 ? '#F44336' : ''">
+                      <el-icon
+                        :color="
+                          item.huanbi > 0
+                            ? '#4CAF50'
+                            : item.huanbi < 0
+                            ? '#F44336'
+                            : ''
+                        "
+                      >
                         <Top v-if="item.huanbi > 0" />
                         <Bottom v-if="item.huanbi < 0" />
                       </el-icon>
@@ -252,92 +377,82 @@
   </div>
 </template>
 <script setup name="Index">
-import * as echarts from "echarts"
-import CardHeader from "@/components/CardHeader/CardHeader.vue"
+import * as echarts from "echarts";
+import CardHeader from "@/components/CardHeader/CardHeader.vue";
 import {
   listEnergyConsumptionSummation,
   listEnergyConsumptionTrend,
   listEnergyConsumptionRanking,
   listPeakValley,
-} from "@/api/home"
-const { proxy } = getCurrentInstance()
-const { period } = proxy.useDict("period")
-import useSettingsStore from "@/store/modules/settings"
-const settingsStore = useSettingsStore()
+} from "@/api/home";
+const { proxy } = getCurrentInstance();
+const { period } = proxy.useDict("period");
+import useSettingsStore from "@/store/modules/settings";
+const settingsStore = useSettingsStore();
 watch(
   () => settingsStore.sideTheme,
   (val) => {
-    getListEnergyConsumptionSummation()
-    getListEnergyConsumptionTrend()
-    getListEnergyConsumptionRanking()
-    getListPeakValley()
+    getListEnergyConsumptionSummation();
+    getListEnergyConsumptionTrend();
+    getListEnergyConsumptionRanking();
+    getListPeakValley();
   }
-)
-import index_card_1 from "@/assets/images/home/index-card-1.png"
-import index_card_2 from "@/assets/images/home/index-card-2.png"
-import index_card_3 from "@/assets/images/home/index-card-3.png"
-import index_card_4 from "@/assets/images/home/index-card-4.png"
-import index_card_5 from "@/assets/images/home/index-card-5.png"
-import card_icon_1 from "@/assets/images/2.png"
-import card_icon_2 from "@/assets/images/3.png"
-import card_icon_3 from "@/assets/images/5.png"
-import card_icon_4 from "@/assets/images/6.png"
-import card_icon_5 from "@/assets/images/7.png"
-import card_icon2_1 from "@/assets/images/2.png"
-import card_icon2_2 from "@/assets/images/3.png"
-import card_icon2_3 from "@/assets/images/5.png"
-import card_icon2_4 from "@/assets/images/6.png"
-import card_icon2_5 from "@/assets/images/7.png"
-import { fa } from "element-plus/es/locales.mjs"
+);
+import index_card_1 from "@/assets/images/home/index-card-1.png";
+import index_card_2 from "@/assets/images/home/index-card-2.png";
+import index_card_3 from "@/assets/images/home/index-card-3.png";
+import index_card_4 from "@/assets/images/home/index-card-4.png";
+import index_card_5 from "@/assets/images/home/index-card-5.png";
+import card_icon_1 from "@/assets/images/2.png";
+import card_icon_2 from "@/assets/images/3.png";
+import card_icon_3 from "@/assets/images/5.png";
+import card_icon_4 from "@/assets/images/6.png";
+import card_icon_5 from "@/assets/images/7.png";
+import card_icon2_1 from "@/assets/images/2.png";
+import card_icon2_2 from "@/assets/images/3.png";
+import card_icon2_3 from "@/assets/images/5.png";
+import card_icon2_4 from "@/assets/images/6.png";
+import card_icon2_5 from "@/assets/images/7.png";
+import { fa } from "element-plus/es/locales.mjs";
 const bgList = ref([
   {
     bg: index_card_1,
     icon: card_icon_1,
     icon2: card_icon2_1,
-    iconBg: "#3F7EE8"
+    iconBg: "#3F7EE8",
   },
   {
     bg: index_card_2,
     icon: card_icon_2,
     icon2: card_icon2_2,
-    iconBg: "#FFA024"
+    iconBg: "#FFA024",
   },
   {
     bg: index_card_3,
     icon: card_icon_3,
     icon2: card_icon2_3,
-    iconBg: "#FFCC00"
+    iconBg: "#FFCC00",
   },
   {
     bg: index_card_4,
     icon: card_icon_4,
     icon2: card_icon2_4,
-    iconBg: "#3CC8D9"
+    iconBg: "#3CC8D9",
   },
   {
     bg: index_card_5,
     icon: card_icon_5,
     icon2: card_icon2_5,
-    iconBg: "#8833FF"
+    iconBg: "#8833FF",
   },
-])
-const list = ref([
-  [
-    { energyName: "电耗", energyUnit: "kWh", count: 12500, tongbi: 5.2, huanbi: -2.1 },
-    { energyName: "水耗", energyUnit: "m³", count: 860, tongbi: 3.5, huanbi: 1.8 },
-    { energyName: "气耗", energyUnit: "m³", count: 3200, tongbi: -1.2, huanbi: -0.5 },
-    { energyName: "煤耗", energyUnit: "t", count: 150, tongbi: 8.3, huanbi: 4.2 },
-    { energyName: "油耗", energyUnit: "L", count: 920, tongbi: 2.7, huanbi: 1.3 }
-  ]
-])
-console.log(list.value);
-
-const listEnergyConsumptionRankingLength = ref(0)
-const dialogVisible = ref(false)
-const loading02 = ref(false)
-const loading1 = ref(false)
-const loading3 = ref(false)
-const loading4 = ref(false)
+]);
+const list = ref([[{}, {}, {}, {}, {}]]);
+const listEnergyConsumptionRankingLength = ref(0);
+const dialogVisible = ref(false);
+const loading02 = ref(false);
+const loading1 = ref(false);
+const loading3 = ref(false);
+const loading4 = ref(false);
 const data = reactive({
   queryParams: {
     nodeId: null,
@@ -345,54 +460,168 @@ const data = reactive({
     dataTime: null,
     nodeName: null,
   },
-})
-const { queryParams } = toRefs(data)
+});
+const { queryParams } = toRefs(data);
 function handleTimeType(item, type) {
-  queryParams.value.timeType = item
-  queryParams.value.type = type
-  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
+  queryParams.value.timeType = item;
+  queryParams.value.type = type;
+  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
   if (type == 0) {
-    getListEnergyConsumptionSummation()
-    getListEnergyConsumptionTrend()
+    getListEnergyConsumptionSummation();
+    getListEnergyConsumptionTrend();
   } else if (type == 3) {
-    getListEnergyConsumptionRanking()
+    getListEnergyConsumptionRanking();
   } else if (type == 4) {
-    getListPeakValley()
+    getListPeakValley();
   }
 }
-let myChart1 = null
-let myChart2 = null
-let myChart3 = null
-let myChart4 = null
+let myChart1 = null;
+let myChart2 = null;
+let myChart3 = null;
+let myChart4 = null;
 onMounted(() => {
-  myChart1 = echarts.init(document.getElementById("Chart1"))
-  myChart2 = echarts.init(document.getElementById("Chart2"))
-  myChart3 = echarts.init(document.getElementById("Chart3"))
-  myChart4 = echarts.init(document.getElementById("Chart4"))
-})
+  myChart1 = echarts.init(document.getElementById("Chart1"));
+  myChart2 = echarts.init(document.getElementById("Chart2"));
+  myChart3 = echarts.init(document.getElementById("Chart3"));
+  myChart4 = echarts.init(document.getElementById("Chart4"));
+});
 // 首页-全厂能耗统计/全厂能耗占比-列表
 function getListEnergyConsumptionSummation() {
-  loading02.value = true
-  // list.value = []
+  loading02.value = true;
+  list.value = [];
   listEnergyConsumptionSummation(
     proxy.addDateRange({
       ...queryParams.value,
     })
   ).then((res) => {
-    loading02.value = false
+    loading02.value = false;
     if (!!res.code && res.code == 200) {
-      let total = 0
-      let seriesData = []
+      let total = 0;
+      let seriesData = [];
       if (!!res.data && res.data.length > 0) {
         res.data.map((item, index) => {
-          total += Number(item.tonCount)
-          item.name = item.energyName
-          item.value = Number(item.tonCount).toFixed(2)
+          total += Number(item.tonCount);
+          item.name = item.energyName;
+          item.value = Number(item.tonCount).toFixed(2);
           if (index % 5 === 0) {
-            list.value.push(res.data.slice(index, index + 5))
+            //list.value.push(res.data.slice(index, index + 5));
+            list.value.push([
+              {
+                energyNo: "compressedair",
+                energyName: "上海干巷压缩空气",
+                energyUnit: "立方米",
+                count: 2000.0,
+                tongbi: 0.7,
+                huanbi: -0.2,
+                coefficient: "1.4571",
+                tonCount: 12,
+              },
+              {
+                energyNo: "naturalgas",
+                energyName: "上海干巷天然气",
+                energyUnit: "立方米",
+                count: 300450.0,
+                tongbi: 0.4,
+                huanbi: -0.5,
+                coefficient: "2.7143",
+                tonCount: 16.0,
+              },
+              {
+                energyNo: "electric",
+                energyName: "上海干巷用电",
+                energyUnit: "千瓦时",
+                count: 23394.0,
+                tongbi: 24.0,
+                huanbi: 25.0,
+                coefficient: "1.2290",
+                tonCount: 0.5,
+              },
+              {
+                energyNo: "water",
+                energyName: "上海干巷自来水",
+                energyUnit: "吨",
+                count: 3467.0,
+                tongbi: 0.4,
+                huanbi: 0.3,
+                coefficient: "0.9428",
+                tonCount: 0.0,
+              },
+              {
+                energyNo: "steam",
+                energyName: "上海干巷蒸汽",
+                energyUnit: "立方米",
+                count: 0.0,
+                tongbi: 0.0,
+                huanbi: 0.0,
+                coefficient: "12.1430",
+                tonCount: 0.0,
+              },
+            ]);
           }
-        })
-        seriesData = res.data
+        });
+        seriesData = res.data;
+        seriesData = [
+          {
+            energyNo: "compressedair",
+            energyName: "上海干巷压缩空气",
+            energyUnit: "立方米",
+            count: 0,
+            tongbi: 0,
+            huanbi: 0,
+            coefficient: "1.4571",
+            tonCount: 0,
+            name: "上海干巷压缩空气",
+            value: "135.00",
+          },
+          {
+            energyNo: "naturalgas",
+            energyName: "上海干巷天然气",
+            energyUnit: "立方米",
+            count: 0,
+            tongbi: 0,
+            huanbi: 0,
+            coefficient: "0.7143",
+            tonCount: 0,
+            name: "上海干巷天然气",
+            value: "134.00",
+          },
+          {
+            energyNo: "electric",
+            energyName: "上海干巷用电",
+            energyUnit: "千瓦时",
+            count: 0,
+            tongbi: 0,
+            huanbi: 0,
+            coefficient: "1.2290",
+            tonCount: 0,
+            name: "上海干巷用电",
+            value: "1324.00",
+          },
+          {
+            energyNo: "water",
+            energyName: "上海干巷自来水",
+            energyUnit: "吨",
+            count: 0,
+            tongbi: 0,
+            huanbi: 0,
+            coefficient: "0.9428",
+            tonCount: 0,
+            name: "上海干巷自来水",
+            value: "132.00",
+          },
+          {
+            energyNo: "steam",
+            energyName: "上海干巷蒸汽",
+            energyUnit: "立方米",
+            count: 0,
+            tongbi: 0,
+            huanbi: 0,
+            coefficient: "12.1430",
+            tonCount: 0,
+            name: "上海干巷蒸汽",
+            value: "1324.00",
+          },
+        ];
       }
       setTimeout(() => {
         myChart2.setOption({
@@ -421,32 +650,43 @@ function getListEnergyConsumptionSummation() {
               verticalAlign: "middle",
               rich: {
                 name: {
-                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                  color:
+                    settingsStore.sideTheme == "theme-dark"
+                      ? "#FFFFFF"
+                      : "#222222",
                   fontSize: 14,
                 },
                 value: {
-                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                  color:
+                    settingsStore.sideTheme == "theme-dark"
+                      ? "#FFFFFF"
+                      : "#222222",
                   fontSize: 14,
                 },
                 rate: {
-                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                  color:
+                    settingsStore.sideTheme == "theme-dark"
+                      ? "#FFFFFF"
+                      : "#222222",
                   fontSize: 14,
                 },
               },
             },
             data: seriesData,
             formatter: (name) => {
-              let target, percent, energyUnit
+              let target, percent, energyUnit;
               for (let i = 0; i < seriesData.length; i++) {
                 if (seriesData[i].name === name) {
-                  target = seriesData[i].value
-                  energyUnit = seriesData[i].energyUnit
-                  percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
+                  target = seriesData[i].value;
+                  energyUnit = seriesData[i].energyUnit;
+                  percent =
+                    total != 0 ? ((target / total) * 100).toFixed(2) : 0;
                 }
               }
-              return `{name|${name}(${energyUnit})  }{value| ${target}} {rate| ${percent}%}`
+              return `{name|${name}(${energyUnit})  }{value| ${target}} {rate| ${percent}%}`;
             },
           },
+
           series: [
             {
               name: "全厂能耗类型占比",
@@ -456,7 +696,8 @@ function getListEnergyConsumptionSummation() {
               label: {
                 show: false,
                 fontSize: 11,
-                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+                color:
+                  settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
               },
               labelLine: {
                 show: false,
@@ -465,40 +706,44 @@ function getListEnergyConsumptionSummation() {
               data: seriesData,
             },
           ],
-        })
-      }, 100)
+        });
+      }, 100);
       window.addEventListener(
         "resize",
         () => {
-          myChart2.resize()
+          myChart2.resize();
         },
         { passive: true }
-      )
+      );
     }
-  })
+  });
 }
 // 首页-全厂能耗趋势-列表
 function getListEnergyConsumptionTrend() {
-  loading1.value = true
+  loading1.value = true;
   listEnergyConsumptionTrend(
     proxy.addDateRange({
       ...queryParams.value,
     })
   ).then((res) => {
-    loading1.value = false
+    loading1.value = false;
     if (!!res.code && res.code == 200) {
-      let xdata = []
-      let series = []
+      let xdata = [];
+      let series = [];
       if (!!res.data.xdata) {
         res.data.xdata.map((item) => {
           xdata.push(
             proxy
               .dayjs(item)
               .format(
-                queryParams.value.timeType == "YEAR" ? "MM月" : queryParams.value.timeType == "MONTH" ? "DD日" : "HH时"
+                queryParams.value.timeType == "YEAR"
+                  ? "MM月"
+                  : queryParams.value.timeType == "MONTH"
+                  ? "DD日"
+                  : "HH时"
               )
-          )
-        })
+          );
+        });
       }
       if (!!res.data.legend && !!res.data.ydata) {
         series = res.data.legend.map((item, index) => {
@@ -508,9 +753,63 @@ function getListEnergyConsumptionTrend() {
             stack: "total",
             barWidth: "16",
             data: !!res.data.ydata ? res.data.ydata[index] : [],
-          }
-        })
+          };
+        });
       }
+
+      series = [
+        {
+          name: "上海干巷用电",
+          type: "bar",
+          stack: "total",
+          barWidth: "16",
+          data: [
+            10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10,
+            10, 10, 10, 10, 10, 10, 0,
+          ],
+        },
+        {
+          name: "上海干巷自来水",
+          type: "bar",
+          stack: "total",
+          barWidth: "16",
+          data: [
+            20, 10, 20, 20, 20, 20, 20, 20, 20, 20, 30, 30, 30, 30, 40, 40, 40,
+            40, 40, 40, 40, 40, 50, 50,
+          ],
+        },
+        {
+          name: "上海干巷天然气",
+          type: "bar",
+          stack: "total",
+          barWidth: "16",
+          data: [
+            50, 60, 60, 60, 10, 60, 60, 60, 60, 60, 60, 60, 60, 60, 6, 6, 60,
+            70, 80, 90, 10, 10, 12, 0,
+          ],
+        },
+        {
+          name: "上海干巷蒸汽",
+          type: "bar",
+          stack: "total",
+          barWidth: "16",
+          data: [
+            10, 10, 10, 10, 0, 10, 10, 20, 20, 30, 40, 40, 40, 40, 40, 40, 50,
+            50, 50, 50, 60, 60, 40, 20,
+          ],
+        },
+        {
+          name: "上海干巷压缩空气",
+          type: "bar",
+          stack: "total",
+          barWidth: "16",
+          data: [
+            10, 10, 30, 20, 30, 10, 30, 40, 40, 20, 20, 20, 20, 20, 10, 20, 30,
+            30, 30, 30, 12, 20, 20, 30,
+          ],
+        },
+      ];
+
       setTimeout(() => {
         myChart1.setOption({
           color: ["#3371eb", "#78e801", "#ffce0c", "#ff6200", "#f52528"],
@@ -525,7 +824,8 @@ function getListEnergyConsumptionTrend() {
             itemWidth: 14,
             itemHeight: 10,
             textStyle: {
-              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+              color:
+                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
             },
           },
           grid: {
@@ -543,7 +843,10 @@ function getListEnergyConsumptionTrend() {
             axisLine: {
               show: true,
               lineStyle: {
-                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                color:
+                  settingsStore.sideTheme == "theme-dark"
+                    ? "#FFFFFF"
+                    : "#222222",
               },
             },
             axisTick: {
@@ -556,7 +859,8 @@ function getListEnergyConsumptionTrend() {
               show: false,
             },
             axisLabel: {
-              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+              color:
+                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
               fontSize: 14,
               padding: [5, 0, 0, 0],
               //   formatter: '{value} ml'
@@ -568,7 +872,10 @@ function getListEnergyConsumptionTrend() {
               type: "value",
               name: "tce",
               nameTextStyle: {
-                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                color:
+                  settingsStore.sideTheme == "theme-dark"
+                    ? "#FFFFFF"
+                    : "#222222",
                 fontSize: 14,
                 padding: [0, 0, 5, 0],
               },
@@ -579,7 +886,10 @@ function getListEnergyConsumptionTrend() {
                 show: true,
                 lineStyle: {
                   type: "dashed",
-                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                  color:
+                    settingsStore.sideTheme == "theme-dark"
+                      ? "#FFFFFF"
+                      : "#222222",
                 },
               },
               axisTick: {
@@ -589,48 +899,57 @@ function getListEnergyConsumptionTrend() {
                 show: false,
               },
               axisLabel: {
-                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                color:
+                  settingsStore.sideTheme == "theme-dark"
+                    ? "#FFFFFF"
+                    : "#222222",
                 fontSize: 14,
               },
             },
           ],
           series,
-        })
-      }, 100)
+        });
+      }, 100);
     }
-  })
+  });
   window.addEventListener(
     "resize",
     () => {
-      myChart1.resize()
+      myChart1.resize();
     },
     { passive: true }
-  )
+  );
 }
 // 首页-科室能耗排名TOP-列表
 function getListEnergyConsumptionRanking() {
-  loading3.value = true
+  loading3.value = true;
   let opt = {
     index: 0,
-  }
+  };
   listEnergyConsumptionRanking(
     proxy.addDateRange({
       ...queryParams.value,
     })
   ).then((res) => {
-    loading3.value = false
-    let nodeName = []
-    let energyConsumption = []
-    let maxenergyConsumption = []
+    loading3.value = false;
+    let nodeName = [];
+    let energyConsumption = [];
+    let maxenergyConsumption = [];
 
     if (!!res.data) {
       res.data.map((item, index) => {
-        nodeName.push(item.nodeName)
-        energyConsumption.push(!!item.energyConsumption ? item.energyConsumption : 0)
-        maxenergyConsumption[index] = res.data[0].energyConsumption
-      })
-      listEnergyConsumptionRankingLength.value = res.data.length
+        nodeName.push(item.nodeName);
+        energyConsumption.push(
+          !!item.energyConsumption ? item.energyConsumption : 0
+        );
+        maxenergyConsumption[index] = res.data[0].energyConsumption;
+      });
+      listEnergyConsumptionRankingLength.value = res.data.length;
     }
+    console.log(nodeName)
+    nodeName=["上海干巷涂装车间1电表","上海干巷涂装车间2电表","上海干巷涂装车间3电表","上海干巷涂装车间4电表","上海干巷涂装车间5电表"]
+    console.log(energyConsumption)
+    energyConsumption=[165464623,37595784,34423554,24543543,1234324]
     setTimeout(() => {
       myChart3.setOption({
         grid: {
@@ -646,7 +965,7 @@ function getListEnergyConsumptionRanking() {
             type: "none",
           },
           formatter: function (params) {
-            return params[0].name + " : " + params[0].value
+            return params[0].name + " : " + params[0].value;
           },
         },
         xAxis: {
@@ -668,17 +987,38 @@ function getListEnergyConsumptionRanking() {
             },
             axisLabel: {
               interval: 0,
-              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+              color:
+                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
               fontSize: 14,
               formatter: function (value, index) {
                 if (index == 0) {
-                  return "{idx0|" + (1 + index + opt.index) + "}{title|" + value + "}"
+                  return (
+                    "{idx0|" +
+                    (1 + index + opt.index) +
+                    "}{title|" +
+                    value +
+                    "}"
+                  );
                 } else if (index == 1) {
-                  return "{idx1|" + (1 + index + opt.index) + "}{title|" + value + "}"
+                  return (
+                    "{idx1|" +
+                    (1 + index + opt.index) +
+                    "}{title|" +
+                    value +
+                    "}"
+                  );
                 } else if (index == 2) {
-                  return "{idx2|" + (1 + index + opt.index) + "}{title|" + value + "}"
+                  return (
+                    "{idx2|" +
+                    (1 + index + opt.index) +
+                    "}{title|" +
+                    value +
+                    "}"
+                  );
                 } else {
-                  return "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
+                  return (
+                    "{idx|" + (1 + index + opt.index) + "}{title|" + value + "}"
+                  );
                 }
               },
               rich: {
@@ -720,7 +1060,8 @@ function getListEnergyConsumptionRanking() {
             axisLine: "none",
             show: true,
             axisLabel: {
-              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+              color:
+                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
               fontSize: "12",
             },
             data: energyConsumption,
@@ -760,41 +1101,49 @@ function getListEnergyConsumptionRanking() {
             data: energyConsumption,
           },
         ],
-      })
-    }, 100)
+      });
+    }, 100);
     window.addEventListener(
       "resize",
       () => {
-        myChart3.resize()
+        myChart3.resize();
       },
       { passive: true }
-    )
-  })
+    );
+  });
 }
 // 首页-尖峰平谷占比-列表
 function getListPeakValley() {
-  loading4.value = true
+  loading4.value = true;
   listPeakValley(
     proxy.addDateRange({
       ...queryParams.value,
     })
   ).then((res) => {
-    loading4.value = false
+    loading4.value = false;
     if (!!res.code && res.code == 200) {
-      let total = 0
-      let seriesData = []
+      let total = 0;
+      let seriesData = [];
       if (!!res.data && res.data.length > 0) {
         res.data.map((item, index) => {
-          total += Number(item.count)
+          total += Number(item.count);
           seriesData.push({
             name: item.timeName,
-            value: Number(item.count).toFixed(2),
-          })
-        })
+            //value: Number(item.count).toFixed(2),
+            value: (Math.floor(Math.random() * (10000 - 5000 + 1)) + 5000).toFixed(2),
+          });
+        });
       }
       setTimeout(() => {
         myChart4.setOption({
-          color: ["#8B33FF", "#00DBFF", "#002ADB", "#5C92F7", "#76D2F1", "#8FADF9"],
+          color: [
+            "#8B33FF",
+            "#00DBFF",
+            "#002ADB",
+            "#5C92F7",
+            "#76D2F1",
+            "#8FADF9",
+          ],
           grid: {
             top: "20%",
             left: "15%",
@@ -819,29 +1168,39 @@ function getListPeakValley() {
               verticalAlign: "middle",
               rich: {
                 name: {
-                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                  color:
+                    settingsStore.sideTheme == "theme-dark"
+                      ? "#FFFFFF"
+                      : "#222222",
                   fontSize: 14,
                 },
                 value: {
-                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                  color:
+                    settingsStore.sideTheme == "theme-dark"
+                      ? "#FFFFFF"
+                      : "#222222",
                   fontSize: 14,
                 },
                 rate: {
-                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
+                  color:
+                    settingsStore.sideTheme == "theme-dark"
+                      ? "#FFFFFF"
+                      : "#222222",
                   fontSize: 14,
                 },
               },
             },
             data: seriesData,
             formatter: (name) => {
-              let target, percent
+              let target, percent;
               for (let i = 0; i < seriesData.length; i++) {
                 if (seriesData[i].name === name) {
-                  target = seriesData[i].value
-                  percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
+                  target = seriesData[i].value;
+                  percent =
+                    total != 0 ? ((target / total) * 100).toFixed(2) : 0;
                 }
               }
-              return `{name|${name}(kWh)  }{value| ${target}} {rate| ${percent}%}`
+              return `{name|${name}(kWh)  }{value| ${target}} {rate| ${percent}%}`;
             },
           },
           series: [
@@ -853,7 +1212,8 @@ function getListPeakValley() {
               avoidLabelOverlap: false,
               label: {
                 fontSize: 11,
-                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
+                color:
+                  settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
               },
               labelLine: {
                 show: true,
@@ -878,17 +1238,17 @@ function getListPeakValley() {
               data: seriesData,
             },
           ],
-        })
-      }, 100)
+        });
+      }, 100);
       window.addEventListener(
         "resize",
         () => {
-          myChart4.resize()
+          myChart4.resize();
         },
         { passive: true }
-      )
+      );
     }
-  })
+  });
 }
 </script>
 <style scoped lang="scss">
@@ -897,7 +1257,7 @@ function getListPeakValley() {
   font-weight: bold;
   display: flex;
   align-items: center;
-  
+
   .header-more-btn {
     margin-left: 12px;
     padding: 4px 10px;
@@ -909,7 +1269,7 @@ function getListPeakValley() {
 .themeDark {
   .page {
     padding: 20px;
-    background: #05234A;
+    background: #05234a;
 
     .card-title {
       width: 132px;
@@ -926,12 +1286,12 @@ function getListPeakValley() {
       flex-wrap: nowrap;
       justify-content: space-between;
       gap: 15px;
-      
+
       &:after {
         content: "";
         flex: 0 0 0;
       }
-      
+
       .card-list-item {
         width: 0;
         flex: 1 1 320px;
@@ -947,14 +1307,14 @@ function getListPeakValley() {
         display: flex;
         flex-direction: row;
         align-items: center;
-        
+
         &:hover {
           background: rgba(242, 246, 250, 0.15);
         }
-        
+
         .item-left {
           margin-right: 20px;
-          
+
           .top-icon {
             width: 73px;
             height: 73px;
@@ -964,16 +1324,16 @@ function getListPeakValley() {
             border-radius: 50%;
           }
         }
-        
+
         .item-right {
           flex: 1;
           display: flex;
           flex-direction: column;
-          
+
           .top-right {
             display: flex;
             flex-direction: column;
-            
+
             .right-name {
               font-weight: 400;
               font-size: 14px;
@@ -981,7 +1341,7 @@ function getListPeakValley() {
               color: rgba(255, 255, 255, 0.65);
               letter-spacing: 0.5px;
               margin-bottom: 4px;
-              
+
               .unit {
                 color: rgba(255, 255, 255, 0.65);
                 margin-left: 4px;
@@ -989,7 +1349,7 @@ function getListPeakValley() {
                 font-weight: normal;
               }
             }
-            
+
             .right-value {
               font-weight: 500;
               font-size: 26px;
@@ -1000,7 +1360,7 @@ function getListPeakValley() {
               letter-spacing: 0.5px;
             }
           }
-          
+
           .item-bottom {
             display: flex;
             justify-content: space-between;
@@ -1010,12 +1370,13 @@ function getListPeakValley() {
             font-size: 12px;
             color: rgba(255, 255, 255, 0.5);
             line-height: 1.2;
-            
-            .bottom-left, .bottom-right {
+
+            .bottom-left,
+            .bottom-right {
               display: flex;
               align-items: center;
               letter-spacing: 0.3px;
-              
+
               :deep(.el-icon) {
                 margin-left: 6px;
                 font-size: 12px;
@@ -1028,12 +1389,12 @@ function getListPeakValley() {
 
     .page-main {
       margin-top: 20px;
-      
+
       .el-card {
-        background-color: #0E2E5E;
+        background-color: #0e2e5e;
         border: none;
         border-radius: 6px;
-        
+
         :deep(.el-card__body) {
           padding: 12px;
         }
@@ -1071,26 +1432,26 @@ function getListPeakValley() {
   }
 
   :deep(.el-button--primary) {
-    background-color: #1976D2;
-    border-color: #1976D2;
+    background-color: #1976d2;
+    border-color: #1976d2;
   }
-  
+
   :deep(.el-card__header) {
     padding: 10px 15px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
-  
+
   :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
     border-color: rgba(255, 255, 255, 0.1);
     background-color: transparent;
     color: #fff;
-    
+
     &.is-active {
-      background-color: #1976D2;
-      border-color: #1976D2;
+      background-color: #1976d2;
+      border-color: #1976d2;
     }
   }
-  
+
   :deep(.el-tabs--card > .el-tabs__header) {
     border-color: rgba(255, 255, 255, 0.1);
   }
@@ -1116,12 +1477,12 @@ function getListPeakValley() {
       flex-wrap: nowrap;
       justify-content: space-between;
       gap: 15px;
-      
+
       &:after {
         content: "";
         flex: 0 0 0;
       }
-      
+
       .card-list-item {
         width: 0;
         flex: 1 1 320px;
@@ -1136,10 +1497,10 @@ function getListPeakValley() {
         display: flex;
         flex-direction: row;
         align-items: center;
-        
+
         .item-left {
           margin-right: 20px;
-          
+
           .top-icon {
             width: 73px;
             height: 73px;
@@ -1149,16 +1510,16 @@ function getListPeakValley() {
             border-radius: 50%;
           }
         }
-        
+
         .item-right {
           flex: 1;
           display: flex;
           flex-direction: column;
-          
+
           .top-right {
             display: flex;
             flex-direction: column;
-            
+
             .right-name {
               font-weight: 400;
               font-size: 14px;
@@ -1166,7 +1527,7 @@ function getListPeakValley() {
               color: rgba(0, 0, 0, 0.65);
               letter-spacing: 0.5px;
               margin-bottom: 4px;
-              
+
               .unit {
                 color: rgba(0, 0, 0, 0.65);
                 margin-left: 4px;
@@ -1174,7 +1535,7 @@ function getListPeakValley() {
                 font-weight: normal;
               }
             }
-            
+
             .right-value {
               font-weight: 500;
               font-size: 26px;
@@ -1185,7 +1546,7 @@ function getListPeakValley() {
               letter-spacing: 0.5px;
             }
           }
-          
+
           .item-bottom {
             display: flex;
             justify-content: space-between;
@@ -1195,12 +1556,13 @@ function getListPeakValley() {
             font-size: 12px;
             color: rgba(0, 0, 0, 0.5);
             line-height: 1.2;
-            
-            .bottom-left, .bottom-right {
+
+            .bottom-left,
+            .bottom-right {
               display: flex;
               align-items: center;
               letter-spacing: 0.3px;
-              
+
               :deep(.el-icon) {
                 margin-left: 6px;
                 font-size: 12px;
@@ -1213,13 +1575,13 @@ function getListPeakValley() {
 
     .page-main {
       margin-top: 20px;
-      
+
       .el-card {
         background-color: #fff;
         border: none;
         border-radius: 6px;
         box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
-        
+
         :deep(.el-card__body) {
           padding: 12px;
         }
@@ -1257,25 +1619,25 @@ function getListPeakValley() {
   }
 
   :deep(.el-button--primary) {
-    background-color: #1976D2;
-    border-color: #1976D2;
+    background-color: #1976d2;
+    border-color: #1976d2;
   }
-  
+
   :deep(.el-card__header) {
     padding: 10px 15px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
-  
+
   :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
     border-color: rgba(0, 0, 0, 0.1);
-    
+
     &.is-active {
-      background-color: #1976D2;
-      border-color: #1976D2;
+      background-color: #1976d2;
+      border-color: #1976d2;
       color: #fff;
     }
   }
-  
+
   :deep(.el-tabs--card > .el-tabs__header) {
     border-color: rgba(0, 0, 0, 0.1);
   }