故障信息

package-lock.json

         "postcss-pxtorem": "^6.1.0",
         "px2rem-loader": "^0.1.9",
         "sass": "^1.71.1",
+        "sass-loader": "^16.0.2",
         "typescript": "~5.3.0",
         "vite": "^5.0.11",
         "vite-plugin-mock": "^3.0.1",
       "integrity": "sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA==",
       "deprecated": "This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x."
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
         "node": ">=14.0.0"
       }
     },
+    "node_modules/sass-loader": {
+      "version": "16.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.2.tgz",
+      "integrity": "sha512-Ll6iXZ1EYwYT19SqW4mSBb76vSSi8JgzElmzIerhEGgzB5hRjDQIWsPmuk1UrAXkR16KJHqVY0eH+5/uw9Tmfw==",
+      "dev": true,
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/semver": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",

package.json

     "postcss-pxtorem": "^6.1.0",
     "px2rem-loader": "^0.1.9",
     "sass": "^1.71.1",
+    "sass-loader": "^16.0.2",
     "typescript": "~5.3.0",
     "vite": "^5.0.11",
     "vite-plugin-mock": "^3.0.1",

src/json/100000/710000.geoJson

-{"type":"FeatureCollection","features":[]}
+{"type":"FeatureCollection","features":[
+    
+]}

src/views/nationwide.vue

           <div class="left_top1img">
             <div class="left_top1img1 TiF_font">累计收益</div>
             <div class="left_top1img2 custom-font">
-              {{ formatAmount1(characteristic.money) }}<span class="left_top21img1">亿元</span>
+              {{ formatAmount10000(characteristic.totalProfit) }}<span class="left_top21img1">万元</span>
             </div>
           </div>
           <div class="left_top1img">
             <div class="left_top1img1 TiF_font">今日收益</div>
             <div class="left_top1img2 custom-font">
-              {{ formatAmounts2(characteristic.moneyDaily) }}<span class="left_top21img1">万元</span>
+              {{ formatAmounts2(characteristic.todayProfit) }}<span class="left_top21img1">元</span>
             </div>
           </div>
         </div>
           <div class="left_top21">
             <div class="left_top21img">
               <div class="left_top21imgfont custom-font18">
-                {{formatAmount1(characteristic.chargeEnergyDaily)
-                }}<span class="left_top21img1">GWh</span>
+                {{formatAmount1000(characteristic.dayImportKwh)
+                }}<span class="left_top21img1">MWh</span>
               </div>
             </div>
             <div class="left_top21name TiF_font">今日总充电量</div>
           <div class="left_top21">
             <div class="left_top21img">
               <div class="left_top21imgfont custom-font18">
-                {{formatAmount1(characteristic.chargeEnergy) }}<span class="left_top21img1">GWh</span>
+                {{formatAmount1000(characteristic.accumulativeImportKwh) }}<span class="left_top21img1">MWh</span>
               </div>
             </div>
             <div class="left_top21name TiF_font">累计总充电量</div>
           <div class="left_top21">
             <div class="left_top21img">
               <div class="left_top21imgfont custom-font18">
-                {{formatAmount1(characteristic.disChargeEnergyDaily)
-                }}<span class="left_top21img1">GWh</span>
+                {{formatAmount1000(characteristic.dayExportKwh)
+                }}<span class="left_top21img1">MWh</span>
               </div>
             </div>
             <div class="left_top21name TiF_font">今日总放电量</div>
           <div class="left_top21">
             <div class="left_top21img">
               <div class="left_top21imgfont custom-font18">
-                {{formatAmount1(characteristic.disChargeEnergy)
-                }}<span class="left_top21img1">GWh</span>
+                {{formatAmount1000(characteristic.accumulativeExportKwh)
+                }}<span class="left_top21img1">MWh</span>
               </div>
             </div>
             <div class="left_top21name TiF_font">累计总放电量</div>
         <div class="left_eltable TiF_font">
           <div class="left_eltabledivtitle">
             <div class="left_eltabledivtitles"></div>
-            <div>站点</div>
-            <div>告警内容</div>
-            <div>事件</div>
-            <div>状态</div>
+            <div class="scrolladdress">站点</div>
+            <div class="scrollcontent">告警内容</div>
+            <div class="scrollevent">事件</div>
+            <div class="left_eltabnormal1">状态</div>
           </div>
           <div class="execdata">
             <div class="execInfo">
                 <div class="left_eltabnormal">{{item.state}}</div>
               </div> -->
               <vue3-seamless-scroll
-          :list="tableData"
+          :list="AlarmStatistics"
           :step="1"
           class="seamless-warp2"
           >
           <div class="left_eltablediv"
-              v-for="item in tableData"
-              :key="item.num"
+              v-for="(item,index) in AlarmStatistics"
+              :key="index"
           >
-          <div class="scrolladdress">{{item.address}}</div>
-          <div class="scrollcontent">{{item.content}}</div>
-          <div class="scrollevent">{{item.event}}</div>
-          <div class="left_eltabnormal">{{item.state}}</div>
+          <div class="scrolladdress">{{item.powerName}}</div>
+          <div class="scrollcontent">{{item.title}}</div>
+          <div class="scrollevent">{{item.alarmname}}</div>
+          <div class="left_eltabnormal" v-if="item.todayname==1">已恢复</div>
+          <div class="left_eltabnormal" v-else>未恢复</div>
           </div>
       </vue3-seamless-scroll> 
             </div>
         <div class="center_top1img11">
           <div class="center_top1img1 TiF_font">电站总数</div>
           <div class="center_top1img2 custom-font">
-            {{ characteristic.cooperativeEnterprises }}
+            {{powerclassify.power}}
           </div>
         </div>
         <div class="center_top1img22">
           <img class="center_top1img22img" src="../assets/svg/center.svg" alt="" />
           <div class="center_top1img1 TiF_font">总装机容量</div>
           <div class="center_top1img2 custom-font">
-            {{formatAmount1(characteristic.ratedCap)}}<span class="left_top21img2">GWh</span>
+            {{formatAmount1(characteristic.installedCap)}}<span class="left_top21img2">kWh</span>
           </div>
         </div>
         <div class="center_top1img33">
           <div class="center_top1img1 TiF_font">总装机功率</div>
           <div class="center_top1img2 custom-font">
-            {{formatAmount1(characteristic.ratedPower) }}<span class="left_top21img2">GW</span>
+            {{formatAmount1(characteristic.installedPower) }}<span class="left_top21img2">kW</span>
           </div>
         </div>
       </div>
               />
               <div class="left_cooperativename">
                 <div class="cooperative_title TiF_font">合作企业（家）</div>
-                <div class="cooperative_title1 custom-font">80</div>
+                <div class="cooperative_title1 custom-font">{{powerclassify.tenant}}</div>
               </div>
             </div>
           </div>
               />
               <div class="left_cooperativename">
                 <div class="cooperative_title TiF_font">运营总数（个）</div>
-                <div class="cooperative_title1 custom-font">11</div>
+                <div class="cooperative_title1 custom-font">{{powerclassify.power}}</div>
               </div>
             </div>
           </div>
                   :key="index"
                 >
                   {{ char }}
+                   <!-- //safetysky -->
                 </div>
                 <!-- <div class="right_centersecurity2 custom-fonts">8</div>
               <div class="right_centersecurity2 custom-fonts">8</div>
       <div class="right_bottom">
         <div class="left_toptitle TiF_font">收益排行</div>
         <div class="right_bottomrevenue">
-          <div class="right_bottomprogress">
+
+          <div class="right_bottomprogress" v-for="(item,index) in RevenueRanking" :key="index">
             <div class="bottomprogress">
               <div class="bottomprogress2">
-                <div class="bottomprogress1 TiF_font">TOP01</div>
-                <span>新疆双河</span>
+                <div class="bottomprogress1 TiF_font">TOP0{{index+1}}</div>
+                <span>{{item.stationName}}</span>
               </div>
-              <div>95%</div>
+              <div>{{item.profit}}</div>
             </div>
-            <!-- <el-progress
-              color="#30B4FF"
-              :text-inside="true"
-              :stroke-width="8"
-              :percentage="80"
-              class="custom-progress"
-             
-            ></el-progress> -->
             <div class="custom-progress">
-              <div class="progress" style="width: 95%"></div>
+              <div class="progress" :style="{ width: item.profit }"></div>
             </div>
           </div>
-
+<!-- 
           <div class="right_bottomprogress">
             <div class="bottomprogress">
               <div class="bottomprogress2">
             <div class="custom-progress">
               <div class="progress" style="width: 70%"></div>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
 </template>
 
 <script setup>
-//--||--//
+//--http://127.0.0.1:8888/platform/login--//
 import { onMounted, ref, onUnmounted,markRaw  } from "vue";
 import { useRouter } from "vue-router";
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 const currentTime = ref("");
 const showOverlay = inject("showOverlay"); // 通过 inject 访问显示遮罩层方法
 const domImg = ref("");
-const characteristic = ref({});
+const characteristic = ref({}); // 电站指标
+const powerclassify = ref({}); // 电站分类
+const ChargeDischargeTendency = ref([]); // 充放电趋势
+const AlarmStatistics = ref([]); // 告警统计
+const safetyEvaluation = ref([]); // 安全评价
+const RevenueRanking = ref([]); // 收益排行
+const sysCountries = ref([]); // 地理位置
+const sysCount = ref([]); // 运营总数
 const daysandtime = ref("");
 const clickTimeout = ref(null);
 function updateTime() {
 const convertImageToBase64 = async () => {
   // 登录接口
   try {
-    let postData = {
-      username: "dexnui",
-      password: "dexn1001",
-      rememberMe: 1,
-    };
-    if (localStorage.getItem("Authorization") == null) {
-      let { data: res } = await axios.post(`https://www.bjdexn.cn:8443/auth/login`, postData);
-
-      localStorage.setItem("Authorization", res.msg);
-    }
+    // let postData = {
+    //   username: "dexnui",
+    //   password: "dexn1001",
+    //   rememberMe: 1,
+    // };
+    // if (localStorage.getItem("Authorization") == null) {
+    //   let { data: res } = await axios.post(`https://www.bjdexn.cn:8443/auth/login`, postData);
+
+    //   localStorage.setItem("Authorization", res.msg);
+    // }
     if (fontSize(1) < 1.3) {
       domImg.value = imgDara;
     } else if (fontSize(1) < 1.7) {
       
       domImg.value = imgDara2;
     }
-    // await gatstations(0, 100000);  // 获取全国站点数据
+    await gatstations(100000);  // 获取全国站点数据
     await chartMap();
   } catch (err) {}
 };
-// 标记数据
-const gatstations = async (level, provinceAdcode) => {
+// 全国接口
+const gatstations = async (unm) => {
   geoCoordMap.value = [];
   toolTipData.value = [];
   try {
-    let accessToken = localStorage.getItem("Authorization");
-    let { data: resdata } = await axios.get(
-      `https://esos-iot.bjdexn.cn/api/v1/stations/1/${provinceAdcode}?level=${level}&page=1&rows=100000`,
-      {
-        headers: {
-          Authorization: `JWT ${accessToken}`,
-        },
-      }
-    );
-    characteristic.value = resdata.data.characteristic;
-    let res = resdata.data.list;
-//100000  // 100000
-//110000  //430000
-//110111  //430700 
-        
-    for (let index = 0; index < res.length; index++) {
-      if (res[index].location) {
-        res[index].name = res[index].name.substring(0, 2);
-        const firstCommaIndex = res[index].location.indexOf(",");
-        const secondCommaIndex = res[index].location.indexOf(",", firstCommaIndex + 1);
-        res[index].location = res[index].location.substring(0, secondCommaIndex);
-        res[index].location = res[index].location.split(",");
-        for (let i = 0; i < res[index].location.length; i++) {
-          res[index].location[i] = res[index].location[i] * 1;
-        }
-        geoCoordMap.value[res[index].name] = res[index].location;
-        // for (let j = 0; j < china.features.length; j++) {
-        //   if (res[index].name == china.features[j].properties.name.substr(0, 2)) {
+    // let { data: resdata } = await axios.post(`/api/screen/screenoverview`);
+     let { data: resdata } = await axios.post(`/screen/screenoverview`);
+    console.log(resdata);
+    
+    characteristic.value = resdata.data.PowerStationIndex;
+    powerclassify.value = resdata.data.powerclassify;
+let ymd = resdata.data.ChargeDischargeTendency.map(item => item.ymd.slice(-2));
+   let chargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.chargeTotal);
+   let dischargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.dischargeTotal);
+   ChargeDischargeTendency.value[0]= ymd
+   ChargeDischargeTendency.value[1]= chargeTotal
+   ChargeDischargeTendency.value[2]= dischargeTotal
+   AlarmStatistics.value = resdata.data.AlarmStatistics
+  //  for(let i = 0; i < ['#2F3230','#2D4C54','#0E4A59','#1A425D']; i++){
+    
+   safetyEvaluation.value = resdata.data.safetyEvaluation
+
+    console.log(safetyEvaluation.value);
+   RevenueRanking.value = resdata.data.RevenueRanking
+   sysCount.value = resdata.data.sysCount
+  daysandtime.value = Number(resdata.data.PowerStationIndex.safetysky)+1;
+  console.log(daysandtime.value);
+    for (let index = 0; index < resdata.data.sysCountries.length; index++) {
             let obj = {
-              name: res[index].name,
-              value: 1,
-              adcode:res[index].adcode,
+              name: resdata.data.sysCountries[index].cname,
+              value: resdata.data.sysCountries[index].count,
+              adcode:resdata.data.sysCountries[index].areaId,
+              provinceCode:resdata.data.sysCountries[index].provinceCode,
+              location:[resdata.data.sysCountries[index].longitude,resdata.data.sysCountries[index].latitude]
             };
             toolTipData.value.push(obj);
-        //   }
-        // }
-      }
     }
+ 
   } catch (error) {
-    localStorage.removeItem("Authorization");
-    convertImageToBase64();
+    // convertImageToBase64();
 
     console.error("请求出错：", error);
   }
 };
+ // 省级接口
+const gatprovincial = async (unm) => {
+  geoCoordMap.value = [];
+  toolTipData.value = [];
+  try {
+      // let { data: resdata } = await axios.post(`/api/screen/screeneconomize?statId=${unm}`);
+   let { data: resdata } = await axios.post(`/screen/screeneconomize?statId=${unm}`);
+    console.log(resdata);
+    
+    characteristic.value = resdata.data.PowerStationIndex;
+    powerclassify.value = resdata.data.powerclassify;
+let ymd = resdata.data.ChargeDischargeTendency.map(item => item.ymd.slice(-2));
+   let chargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.chargeTotal);
+   let dischargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.dischargeTotal);
+   ChargeDischargeTendency.value[0]= ymd
+   ChargeDischargeTendency.value[1]= chargeTotal
+   ChargeDischargeTendency.value[2]= dischargeTotal
+   AlarmStatistics.value = resdata.data.AlarmStatistics
+  
+   safetyEvaluation.value = resdata.data.safetyEvaluation
+   RevenueRanking.value = resdata.data.RevenueRanking
+  //  sysCountries.value = resdata.data.sysCountries
+  sysCount.value = resdata.data.sysCount
+
+  daysandtime.value = Number(resdata.data.PowerStationIndex.safetysky)+1;
+  console.log(daysandtime.value);
+    for (let index = 0; index < resdata.data.sysCountries.length; index++) {
+            let obj = {
+              name: resdata.data.sysCountries[index].cname,
+              value: resdata.data.sysCountries[index].count,
+              adcode:resdata.data.sysCountries[index].code,
+              provinceCode:resdata.data.sysCountries[index].cityCode,
+              location:[resdata.data.sysCountries[index].longitude,resdata.data.sysCountries[index].latitude]
+            };
+            toolTipData.value.push(obj);
+    }
+ 
+  } catch (error) {
+    // convertImageToBase64();
+    console.error("请求出错：", error);
+  }
+};
+ // 市级接口
+ const gitCitylevel = async (unm) => {
+  geoCoordMap.value = [];
+  toolTipData.value = [];
+  try {
+   let { data: resdata } = await axios.post(`/screen/screenmarket?statId=${unm}`);
+    //  let { data: resdata } = await axios.post(`/api/screen/screenmarket?statId=${unm}`);
+    console.log(resdata);
+    
+    characteristic.value = resdata.data.PowerStationIndex;
+    powerclassify.value = resdata.data.powerclassify;
+let ymd = resdata.data.ChargeDischargeTendency.map(item => item.ymd.slice(-2));
+   let chargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.chargeTotal);
+   let dischargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.dischargeTotal);
+   ChargeDischargeTendency.value[0]= ymd
+   ChargeDischargeTendency.value[1]= chargeTotal
+   ChargeDischargeTendency.value[2]= dischargeTotal
+   AlarmStatistics.value = resdata.data.AlarmStatistics
+  
+   safetyEvaluation.value = resdata.data.safetyEvaluation
+   RevenueRanking.value = resdata.data.RevenueRanking
+  //  sysCountries.value = resdata.data.sysCountries
+  sysCount.value = resdata.data.sysCount
+
+  daysandtime.value = Number(resdata.data.PowerStationIndex.safetysky)+1;
+  console.log(daysandtime.value);
+    for (let index = 0; index < resdata.data.sysCountries.length; index++) {
+            let obj = {
+              name: resdata.data.sysCountries[index].cname,
+              value: resdata.data.sysCountries[index].count,
+              adcode:resdata.data.sysCountries[index].code,
+              provinceCode:resdata.data.sysCountries[index].cityCode,
+              location:[resdata.data.sysCountries[index].longitude,resdata.data.sysCountries[index].latitude]
+            };
+            toolTipData.value.push(obj);
+    }
  
+  } catch (error) {
+    // convertImageToBase64();
+
+    console.error("请求出错：", error);
+  }
+};
     const formattedDateTime = async () =>  {
        let datetime= new Date();
         const year = datetime.getFullYear();
     const addLeadingZero = async (number) =>  {
         return number < 10 ? '0' + number : number;
     }
- 
-// 天气
+
+
 const gatstationstest = async () => {
   const result = await formattedDateTime();
   currentDateyear.value.year = result.year
     clickTimeout.value = setTimeout(async () => {
       let provinceName = "";
       let provinceAdcode = "";
+      console.log(e);
+      
       if (e.componentSubType == "scatter") {
 
-        if (level.value >= 2) {
-          level.value--;
-          return;
-        }
+        // if (level.value >= 1) {
+        //   level.value--;
+        //   return;
+        // }
         provinceName = e.data[2].name;
         provinceAdcode = e.data[2].adcode;
-        level.value=2;
+        level.value++
+        if(level.value==1){
+
+          await gatprovincial(e.data[2].provinceCode);
+        }else if(level.value==0){
+        await gatstations(e.data[2].provinceCode);
+      }else{
+        await gitCitylevel(e.data[2].provinceCode);
+
+      }
 
       } else {
         provinceName = e.name;
         provinceAdcode = e.data.value.adcode;
       level.value++;
+      if (level.value==1) {
+        await gatprovincial(e.data.value.provinceCode);
+      }else if(level.value==0){
+        await gatstations(e.data.value.provinceCode);
+
+      }else{
+        await gitCitylevel(e.data.value.provinceCode);
+
+      }
 
       }
       if (provinceAdcode !== "100000") {
         isDeep.value = true;
       }
 
-      await gatstations(level.value, provinceAdcode);
+      console.log(provinceName, provinceAdcode);
+      console.log(e);
+      
       await initMap(myChart, provinceName, provinceAdcode, true);
       // setTimeout(() => {
       // },200)
 // 调用函数并传入JSON文件的URL
 // 柱状体的顶部
 function scatterData() {
-  return toolTipData.value
-    .map((item) => {
-      if (geoCoordMap.value[item.name]) {
-        return [geoCoordMap.value[item.name][0], geoCoordMap.value[item.name][1], item];
-        // return {name:item.name,value:[geoCoordMap.value[item.name][0], geoCoordMap.value[item.name][1]],adcode:''};
-      } else {
-        console.error("未找到坐标数据：" + item.name);
-        return null;
-      }
+  return toolTipData.value.map((item) => {
+      return [item.location[0], item.location[1], item];
     })
     .filter((item) => item !== null); // 过滤掉无效数据项
+  // return toolTipData.value
+  //   .map((item) => {
+  //     if (geoCoordMap.value[item.name]) {
+        
+  //       return [geoCoordMap.value[item.name][0], geoCoordMap.value[item.name][1], item];
+  //       // return {name:item.name,value:[geoCoordMap.value[item.name][0], geoCoordMap.value[item.name][1]],adcode:''};
+  //     } else {
+  //       console.error("未找到坐标数据：" + item.name);
+  //       return null;
+  //     }
+  //   })
+  //   .filter((item) => item !== null); // 过滤掉无效数据项
 }
 // 底部光圈
 var convertData = function (data) {
   level.value = unm;
 
 
-  await gatstations(level.value, adcode);
+  await gatstations(adcode);
   await initMap(myChart, geoName, adcode);
 };
 // 返回上一级
       level.value=0;
      let geoName = "china";
      let adcode = "100000";
-await gatstations(level.value, adcode);
+await gatstations(adcode);
 await initMap(myChart, geoName, adcode);
 }else{
   level.value--;
  const lastMapData = historyMapData.value[historyMapData.value.length - 1];
  const { geoName, adcode } = lastMapData;
  
-await gatstations(level.value, adcode);
+await gatstations(adcode);
 await initMap(myChart, geoName, adcode);
 }
   }
 };
 // 充放电趋势图
 const population = () => {
+  console.log(ChargeDischargeTendency.value);
+
   column.value = markRaw(echarts.init(document.getElementById("column")));
  
   const option2 = {
     title: {
-      subtext: "GWh",
+      subtext: "kWh",
       subtextStyle: {
         fontSize: fontSize(14),
 
         },
       },
 
-      data: [" 03", " 04", " 05", " 06", " 07", "08"],
+      data: ChargeDischargeTendency.value[0],
     },
     yAxis: {
       type: "value",
     },
     series: [
       {
-        data: [223, 234, 290, 109, 131, 630],
+        data: ChargeDischargeTendency.value[1],
 
         name: "充电",
         type: "bar",
             global: false,
           },
         },
-        data: [125, 238, 310, 121, 134, 681],
+        data: ChargeDischargeTendency.value[2],
       },
     ],
   };
 
       formatter: function (value) {
         if (value == "电站在线") {
-          return `${value + " " + " " + " " + " "} {a|90.00%}`;
+          return `${value + " " + " " + " " + " "} {a|${sysCount.value.stationOnlineCount}%}`;
         } else if (value == "电站离线") {
-          return `${value + " " + " " + " " + " "} {b|10.00%}`;
+          return `${value + " " + " " + " " + " "} {b|${sysCount.value.stationOfflineCount}%}`;
         } else if (value == "工商业储能") {
-          return `${value + " " + " " + " " + " "} {c|40.00%}`;
+          return `${value + " " + " " + " " + " "} {c|${sysCount.value.industryCommerce}%}`;
         } else if (value == "电网侧储能") {
-          return `${value + " " + " " + " " + " "} {d|40.00%}`;
+          return `${value + " " + " " + " " + " "} {d|${sysCount.value.gridSide}%}`;
         } else if (value == "电源侧储能") {
-          return `${value + " " + " " + " " + " "} {e|20.00%}`;
+          return `${value + " " + " " + " " + " "} {e|${sysCount.value.mainsSide}%}`;
         } else if (value == "户用储能") {
-          return `${value + " " + " " + " " + " "} {f|0.00%}`;
+          return `${value + " " + " " + " " + " "} {f|${sysCount.value.household}%}`;
         }
       },
     },
         },
 
         data: [
-          { value:3, name: "电站离线", itemStyle: { color: "#6DACB8" } },
-          { value: 7, name: "电站在线", itemStyle: { color: "#CCFCFF" } },
+          { value:sysCount.value.stationOfflineCount, name: "电站离线", itemStyle: { color: "#6DACB8" } },
+          { value: sysCount.value.stationOnlineCount, name: "电站在线", itemStyle: { color: "#CCFCFF" } },
         ],
       },
       {
         },
 
         data: [
-          { value: 2, name: "工商业储能", itemStyle: { color: "#30DCFF" } },
-          { value: 3, name: "户用储能", itemStyle: { color: "#59FFFF" } },
-          { value: 3, name: "电源侧储能", itemStyle: { color: "#F5E74F" } },
-          { value: 2, name: "电网侧储能", itemStyle: { color: "#FFFFFF" } },
+          { value: sysCount.value.industryCommerce, name: "工商业储能", itemStyle: { color: "#30DCFF" } },
+          { value: sysCount.value.household, name: "户用储能", itemStyle: { color: "#59FFFF" } },
+          { value: sysCount.value.mainsSide, name: "电源侧储能", itemStyle: { color: "#F5E74F" } },
+          { value: sysCount.value.gridSide, name: "电网侧储能", itemStyle: { color: "#FFFFFF" } },
         ],
       },
     ],
 };
 // 安全评价
 const safetychart = () => {
+  console.log(safetyEvaluation.value);
+  for (let index = 0; index < safetyEvaluation.value.length; index++) {
+      safetyEvaluation.value[index].value =safetyEvaluation.value[index].cnt
+
+      if (index==0) {
+        safetyEvaluation.value[index].itemStyle = { color: '#FF5858' }
+        
+      }else if(index==1){
+        safetyEvaluation.value[index].itemStyle = { color: '#FFFFFF' }
+
+      }else if(index==2){
+        safetyEvaluation.value[index].itemStyle = { color: '#FFFFFF' }
+
+        }else if(index==3){
+          safetyEvaluation.value[index].itemStyle = { color: '#FFD130' }
+
+       }
+      }
   safety.value = echarts.init(document.getElementById("safety"));
  
   let angle = 0; //角度，用来做简单的动画效果的
           {
             value: 0, // 将 cnt 键修改为 value
             code: 1,
-            name: "普通"
+            name: "事件"
           },
           {
             value: 0, // 将 cnt 键修改为 value
             code: 2,
-            name: "告警"
-          }
-        ],
-        formatter: function (name) {
-          if (name == "普通" || name == "告警") {
-            return `${name}`;
-           
-          }
-        }
-    }, {
-      bottom: fontSize(14)*1,
-      left:fontSize(14)*2,
-
-      itemHeight: 8,
-      itemWidth: 8,
-      textStyle: {
-        fontSize: fontSize(14),
-        color: "#ffffff",
-      },
-      data: [
-          {
-            value: 0, // 将 cnt 键修改为 value
-            code: 1,
             name: "故障"
-          },
-          {
-            value: 0, // 将 cnt 键修改为 value
-            code: 2,
-            name: "严重故障"
           }
         ],
         formatter: function (name) {
-          if (name == "故障" || name == "严重故障") {
             return `${name}`;
            
-          }
         }
     }
     ],
         labelLine: {
           show: false,
         },
-        data: [
-          { value: 4, itemStyle: { color: "#2F3230" } },
-          { value: 3, itemStyle: { color: "#2D4C54" } },
-
-          { value: 3, itemStyle: { color: "#0E4A59" } },
-          { value: 3, itemStyle: { color: "#1A425D" } },
-        ],
+        // data: [
+        //   { value: safetyEvaluation.value[1].cnt, itemStyle: { color: "#2F3230" } },
+        //   { value: safetyEvaluation.value[3].cnt, itemStyle: { color: "#2D4C54" } },
+
+        //   { value: safetyEvaluation.value[2].cnt, itemStyle: { color: "#0E4A59" } },
+        //   { value: safetyEvaluation.value[1].cnt, itemStyle: { color: "#1A425D" } },
+        // ],
+        data:safetyEvaluation.value
       },
       {
         type: "pie",
         labelLine: {
           show: false,
         },
-        data: [
-          { value: 4, name: "普通", itemStyle: { color: "#FFFFFF" } },
-          { value: 3, name: "告警", itemStyle: { color: "#FFD130" } },
-          { value: 3, name: "故障", itemStyle: { color: "#DD7D4D" } },
-          { value: 3, name: "严重故障", itemStyle: { color: "#FF5858" } },
-        ],
+        data:safetyEvaluation.value
+
+        // data: [
+        //   { value: safetyEvaluation.value[0].cnt, name: "故障", itemStyle: { color: "#FFFFFF" } },
+        //   { value: safetyEvaluation.value[1].cnt, name:"事件", itemStyle: { color: "#FF5858" } },
+        //   { value: safetyEvaluation.value[2].cnt, name: "预警", itemStyle: { color: "#DD7D4D" } },
+        //   { value: safetyEvaluation.value[3].cnt, name: "告警", itemStyle: { color: "#FFD130" } },
+        // ],
       },
     ],
   };
   if (amount == undefined||amount == null) {
     return "0";
   }else{
-    return (amount / 1000).toFixed(2);
+    return amount.toFixed(0);
+    // return amount
+  }
+ 
+};
+const formatAmount1000 = (amount) => {
+  if (amount == undefined||amount == null) {
+    return "0";
+  }else{
+    return (amount/1000).toFixed(1);
+    // return amount
+  }
+ 
+};
+const formatAmount10000 = (amount) => {
+  if (amount == undefined||amount == null) {
+    return "0";
+  }else{
+    return (amount/10000).toFixed(2);
+    // return amount
   }
  
 };
     return amount.toFixed(2);
   }
 };
-onMounted(() => {
+const id = ref('')
+onMounted( async () => {
+      const url = window.location.href; // 获取当前页面的 URL
+      const match = url.match(/[?&]id=([^&#]*)/);
+
+ id.value = match ? match[1] : null; // 提取 id 参数
+
+console.log(id.value); // 输出: 2eec4706-3690-40fd-9e26-f2917b795367
+if (id.value) {
+    // 存储到 cookies，设置过期时间为 7 天
+    const daysToExpire = 7;
+    const date = new Date();
+    date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
+    const expires = "expires=" + date.toUTCString();
+    
+    document.cookie = `JSESSIONID=${id.value}; ${expires}; path=/`; // 设置 cookie
+    console.log(`Cookie set: JSESSIONID=${id.value}`);
+} else {
+    console.log('没有找到 ID');
+}
   // const loading = inject('loading'); // 通过 inject 访问 layoutTitle 变量
   // loading.close();
   gatstationstest(); // 天气
 
   showOverlay(false);
-  convertImageToBase64(); // 登录
-  let times = daysDifference() + "";
-  daysandtime.value = times.split("");
+ await convertImageToBase64(); // 全国数据
+  // let times = daysDifference() + "";
+  // daysandtime.value = times.split("");
   updateTime(); // 初始更新时间
   const intervalId = setInterval(updateTime, 1000); // 每秒更新一次时间
   onUnmounted(() => clearInterval(intervalId)); // 清除定时器
   // 全国地图
 
-  // 充放电趋势图
-  population();
-  // 电站分类统计
-  incomechart();
+      // 充放电趋势图
+      await population();
+    // 电站分类统计
+    await incomechart();
   // 安全评价
-  safetychart();
+  await safetychart();
+
  
   window.addEventListener(
     "resize",
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
   display: flex;
   align-items: center;
-  justify-content: space-around;
 }
 .left_eltablediv:nth-child(odd) {
   width: 372px;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
   display: flex;
   align-items: center;
-  justify-content: space-around;
 }
  
 .scrolladdress{
-  width: 70px;
+  width: 90px;
+  margin-right: 10px;
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
+  padding-left: 10px;
 }
 .scrollcontent{
-  width: 60px;
-
+  width: 160px;
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
   box-sizing: border-box;
 }
 .scrollevent{
   width: 44px;
 }
 .left_eltabnormal{
-  width: 40px;
+  width: 50px;
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
+}
+.left_eltabnormal1{
+  width: 50px;
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
 }
 .left_eltabledivtitle {
   width: 100%;
   color: #ffffff;
   display: flex;
   align-items: center;
-  justify-content: space-around;
   position: relative;
   overflow: hidden;
 }
   height: 8px;
   background: linear-gradient(280deg, rgba(70, 206, 182, 0.62) 0%, #30b4ff 100%);
 }
+.left_boxt{
+  width: 20px;
+  border: #1fffff;
+}
 </style>
 <!--  -->

src/views/singlestation.vue

     <div class="left">
       <div class="left_logo">
         <img class="left_logo1" src="../assets/svg/logo.svg" alt="logo">
+      
+
       </div>
       <div class="left_top">
         <div class="left_toptitle TiF_font">电站指标</div>
         <div class="left_top1">
           <div class="left_top21">
             <div class="left_top21img">
-              <div class="custom-font18 left_top21imgfont">2.67<span class="left_top21img1">GWh</span></div> </div>
-            <div class="left_top21name TiF_font">总装机容量</div>
+              <div class="custom-font18 left_top21imgfont">{{characteristic.installedCap}}<span class="left_top21img1">kWh</span></div> </div>
+            <div class="left_top21name TiF_font">装机容量</div>
           </div>
           <div class="left_top21">
             <div class="left_top21img">
-              <div class="left_top21imgfont custom-font18">1.304<span class="left_top21img1">GW</span></div> </div>
-            <div class="left_top21name TiF_font">总装机功率</div>
+              <div class="left_top21imgfont custom-font18">{{characteristic.installedPower}}<span class="left_top21img1">kW</span></div> </div>
+            <div class="left_top21name TiF_font">装机功率</div>
           </div>
         </div>
        <div class="left_top2img">
         <div class="left_top21">
           <div class="left_top21img">
-            <div class="left_top21imgfont custom-font18">2.6<span class="left_top21img1">GWh</span></div> </div>
+            <div class="left_top21imgfont custom-font18">{{characteristic.dayImportKwh}}<span class="left_top21img1">kWh</span></div> </div>
           <div class="left_top21name TiF_font">今日总充电量</div>
         </div>
         <div class="left_top21">
-          <div class="left_top21img"> <div class="left_top21imgfont custom-font18">2.2<span class="left_top21img1">GWh</span></div> </div>
+          <div class="left_top21img"> <div class="left_top21imgfont custom-font18">{{formatAmount1000(characteristic.accumulativeImportKwh)}}<span class="left_top21img1">MWh</span></div> </div>
           <div class="left_top21name TiF_font">累计总充电量</div>
         </div>
         <div class="left_top21">
-          <div class="left_top21img"> <div class="left_top21imgfont custom-font18">949.8<span class="left_top21img1">GWh</span></div> </div>
+          <div class="left_top21img"> <div class="left_top21imgfont custom-font18">{{characteristic.dayExportKwh}}<span class="left_top21img1">kWh</span></div> </div>
           <div class="left_top21name TiF_font">今日总放电量</div>
         </div>
         <div class="left_top21">
-          <div class="left_top21img"> <div class="left_top21imgfont custom-font18">835.1<span class="left_top21img1">GWh</span></div> </div>
+          <div class="left_top21img"> <div class="left_top21imgfont custom-font18">{{formatAmount1000(characteristic.accumulativeExportKwh)}}<span class="left_top21img1">MWh</span></div> </div>
           <div class="left_top21name TiF_font">累计总放电量</div>
         </div>
        </div>
       <div class="left_eltable TiF_font">
          <div class="left_eltabledivtitle">
           <div class="left_eltabledivtitles"></div>
-          <div>站点</div>
-          <div>告警内容</div>
-          <div>事件</div>
-          <div>状态</div>
+          <div class="scrolladdress">站点</div>
+          <div class="scrollcontent">告警内容</div>
+          <div class="scrollevent">事件</div>
+          <div class="left_eltabnormal1">状态</div>
          </div>
-         
-         <div class="left_eltablediv">  <div>电站1</div>
-         <div>告警内容</div>
-         <div>事件</div>
-         <div class="left_eltabnormal">正常</div></div>
-         <div class="left_eltabledivs">  <div>电站2</div>
-         <div>告警内容</div>
-         <div>事件</div>
-         <div class="left_eltabnormal">正常</div></div>
-         <div class="left_eltablediv">  <div>电站3</div>
-         <div>告警内容</div>
-         <div>事件</div>
-         <div class="left_eltabnormals">故障</div></div>
-         <div class="left_eltabledivs">  <div>电站4</div>
-         <div>告警内容</div>
-         <div>事件</div>
-         <div class="left_eltabnormal">正常</div></div>
-         <div class="left_eltablediv">  <div>电站5</div>
-         <div>告警内容</div>
-         <div>事件</div>
-         <div class="left_eltabnormals">故障</div></div>
+         <div class="execdata">
+          <div class="execInfo">
+            <!-- <div class="left_eltablediv" v-for="(item,index) in tableData" :key="index">
+              <div>{{item.address}}</div>
+              <div>{{item.content}}</div>
+              <div>{{item.event}}</div>
+              <div class="left_eltabnormal">{{item.state}}</div>
+            </div> -->
+            <vue3-seamless-scroll
+        :list="AlarmStatistics"
+        :step="1"
+        class="seamless-warp2"
+        >
+        <div class="left_eltablediv"
+            v-for="(item,index) in AlarmStatistics"
+            :key="index"
+        >
+        <div class="scrolladdress">{{item.deviceName}}</div>
+        <div class="scrollcontent">{{item.title}}</div>
+        <div class="scrollevent">{{item.alarmname}}</div>
+        <div class="left_eltabnormal" v-if="item.todayname==1">已恢复</div>
+        <div class="left_eltabnormal" v-else>未恢复</div>
+        </div>
+    </vue3-seamless-scroll> 
+          </div>
+        
+        </div>
 
       </div>
 
       <div class="center_top">
         <div class="center_top1img11">
           <div class="center_top1img1 TiF_font">实时功率</div>
-          <div class="center_top1img2 custom-font30">4368<span class="left_top21img2">kw</span></div>
+          <div class="center_top1img2 custom-font30">{{formatAmount(sysBatterystack.totalActivePower*1)}}<span class="left_top21img2">kW</span></div>
         </div>
         <div class="center_top1img22">
           <div class="center_top1img1 TiF_font">状态</div>
-          <div class="center_top1img21 TiF_font">充电</div>
+          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==0">空闲</div>
+          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==1">充电</div>
+          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==2">放电</div>
+          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==3">充满</div>
+          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==4">放空</div>
+          <div class="center_top1img21 TiF_font" v-if="sysBatterystack.batteryStatus==5">故障</div>
         </div>
         <div class="center_top1img33">
           <div class="center_top1img1 TiF_font">SOC</div>
-          <div class="center_top1img2 custom-font30">20<span class="left_top21img2">%</span></div>
+          <div class="center_top1img2 custom-font30">{{formatAmount(sysBatterystack.soc*1)}}<span class="left_top21img2">%</span></div>
         </div>
         <div class="center_top1img44">
           <div class="center_top1img1 TiF_font">系统功率</div> 
-          <div class="center_top1img2 custom-font30">20<span class="left_top21img2">%</span></div>
+          <div class="center_top1img2 custom-font30">{{sysBatterystack.systemPower}}<span class="left_top21img2">%</span></div>
         </div>
+        
+      </div>
+      <div class="left_boxt">
+        <div></div>
+        <!-- <div class="left_boxt1">
+          浙江临安鹏达
+          <img class="left_boxopen" src="../assets/open.png" alt="">
+          <img class="left_boxopen" src="../assets/Putaway.png" alt="">
+        </div> -->
+        <div class="left_boxt1">
+          <el-select
+          v-model="Singlevalue"
+          collapse-tags
+          placeholder="选择电站"
+          popper-class="custom_header"
+          :max-collapse-tags="1"
+          class="Space_content"
+          size="large"
+          :popper-append-to-body="false"
+          @change="postemsDevice"
+        >
+          <el-option v-for="(item, index) in cities" :key="index" :label="item.stationName" :value="item.id" />
+          <template #prefix>
+            {{ (cities.find(s => s.id === Singlevalue) || {}).stationName }}
+          </template>
+        </el-select>
+ 
+        </div>
+       
       </div>
       <!-- 单站模型 -->
       <div id="main"></div>  
         <div class="left_toptitle TiF_font">收益指标</div>
           <div class="left_topdiv">
             <div class="left_topdivname custom-font30">累计收益</div>
-            <div class="left_topdivpay custom-font30">3432432432万元</div>
+            <div class="left_topdivpay custom-font30">{{formatAmount10000(characteristic.totalProfit)}}万元</div>
           </div>
           <div class="left_Alarm">
             <div class="left_topdivname1 custom-fonts">今日收益</div>
-            <div class="left_topdivpay1 custom-fonts">3432432432万元</div>
+            <div class="left_topdivpay1 custom-fonts">{{formatAmount(characteristic.todayProfit)}}元</div>
           </div>
       </div>
       <div class="right_center">
             <img class="right_bottomrevenueimg" src="../assets/svg/voltage.svg" alt="">
             <div class="right_bottomrevenuediv">
              <div class="right_bottomrevenuedivd custom-font">单体最低电压</div>
-             <div class="right_bottomrevenuev custom-fonts">46<span class="left_top21img1">V</span></div>
+             <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.maxCellVoltage*1)}}<span class="left_top21img1">V</span></div>
             </div>
          </div>
          <div class="right_bottomrevenue">
           <img class="right_bottomrevenueimg" src="../assets/svg/voltage.svg" alt="">
           <div class="right_bottomrevenuediv">
            <div class="right_bottomrevenuedivd custom-font">单体最高电压</div>
-           <div class="right_bottomrevenuev custom-fonts">46<span class="left_top21img1">V</span></div>
+           <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.minCellVoltage*1)}}<span class="left_top21img1">V</span></div>
           </div>
        </div>
         </div>
             <img class="right_bottomrevenueimg" src="../assets/svg/temperature.svg" alt="">
             <div class="right_bottomrevenuediv">
              <div class="right_bottomrevenuedivd custom-font">单体最低温度</div>
-             <div class="right_bottomrevenuev custom-fonts">46<span class="left_top21img1">℃</span></div>
+             <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.minCellTempr*1)}}<span class="left_top21img1">℃</span></div>
             </div>
          </div>
          <div class="right_bottomrevenue">
           <img class="right_bottomrevenueimg" src="../assets/svg/temperature.svg" alt="">
           <div class="right_bottomrevenuediv">
            <div class="right_bottomrevenuedivd custom-font">单体最高温度</div>
-           <div class="right_bottomrevenuev custom-fonts">46<span class="left_top21img1">℃</span></div>
+           <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.maxCellTempr*1)}}<span class="left_top21img1">℃</span></div>
           </div>
        </div>
         </div>
             <img class="right_bottomrevenueimg" src="../assets/svg/water.svg" alt="">
             <div class="right_bottomrevenuediv">
              <div class="right_bottomrevenuedivd custom-font">液冷回水温度</div>
-             <div class="right_bottomrevenuev custom-fonts">46<span class="left_top21img1">℃</span></div>
+             <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.airInTempr*1)}}<span class="left_top21img1">℃</span></div>
             </div>
          </div>
          <div class="right_bottomrevenue">
           <img class="right_bottomrevenueimg" src="../assets/svg/water.svg" alt="">
           <div class="right_bottomrevenuediv">
            <div class="right_bottomrevenuedivd custom-font">液冷出水温度</div>
-           <div class="right_bottomrevenuev custom-fonts">46<span class="left_top21img1">V</span></div>
+           <div class="right_bottomrevenuev custom-fonts">{{formatAmount(sysBatterystack.airOutTempr*1)}}<span class="left_top21img1">V</span></div>
           </div>
        </div>
         </div>
 </template>
  
 <script setup>
-//--------//
+//---- ----//
 import { onMounted, ref,onUnmounted,markRaw  } from "vue";
+import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
+
 import { useRouter } from 'vue-router'
 import axios from "axios";
 import { inject } from 'vue';
 const currentTime = ref('');
 const column = ref(null);// 充放电趋势图
 const income = ref(null);// 充放电趋势图
+const Singlevalue = ref('浙江临安');// 充放电趋势图
+const cities = ref([]);
 const currentDateyear = ref({});
 
 function updateTime() {
     console.error("请求出错：", error);
   }
 }
- 
+const characteristic = ref({}); // 电站指标
+const AlarmStatistics = ref([]); // 告警统计
+const sysBatterystack = ref([]); // 告警统计
+const ChargeDischargeTendency = ref([]); // 告警统计
+const scureenpofit = ref([]); // 收益趋势
+
+ // 电站列表
+ const poststationstationName = async () => {
+  try {
+  //  let { data } = await axios.post(`/api/station/list/stationName`);
+  let { data } = await axios.post(`/station/list/stationName`);
+console.log( data.data[0].id);
+
+  if (data.data.length == 0) {
+    Singlevalue.value = "";
+    return;
+  } else {
+    Singlevalue.value = data.data[0].id;
+  }
+  cities.value = data.data;
+  await gitCitylevel()
+
+} catch (error) {
+    // convertImageToBase64();
+
+    console.error("请求出错：", error);
+  }
+};
+//equipmentID 设备id
+const equipmentID =ref('');
+const postemsDevice = (e) => {
+  Singlevalue.value = e
+   gitCitylevel()
+  
+};
+  // 单站接口
+  const gitCitylevel = async () => {
+  try {
+    // let { data: resdata } = await axios.post(`/api/screen/screenpower?powerId=bf91569e-bedd-4609-80ee-1f8d9bb5a5ed`);
+    let { data: resdata } = await axios.post(`/screen/screenpower?powerId=${Singlevalue.value}`);
+    console.log(resdata);
+    characteristic.value = resdata.data.PowerStationIndex;
+   AlarmStatistics.value = resdata.data.AlarmStatistics
+   sysBatterystack.value = resdata.data.sysBatterystack
+   let ymd = resdata.data.ChargeDischargeTendency.map(item => item.ymd.slice(-2));
+   let chargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.chargeTotal);
+   let dischargeTotal = resdata.data.ChargeDischargeTendency.map(item => item.dischargeTotal);
+   ChargeDischargeTendency.value[0]= ymd
+   ChargeDischargeTendency.value[1]= chargeTotal
+   ChargeDischargeTendency.value[2]= dischargeTotal
+   let ymd1 = resdata.data.scureenpofit.map(item => item.ymd.slice(-2));
+   let profit = resdata.data.scureenpofit.map(item => item.profit);
+   scureenpofit.value[0]= ymd1
+   scureenpofit.value[1]= profit
+
+
+    // 充放电趋势图
+   await population();
+  // 电站分类统计
+  await incomechart();
+  } catch (error) {
+    // convertImageToBase64();
+
+    console.error("请求出错：", error);
+  }
+}; 
+
 // 充放电趋势图
 const population = () => {
   column.value = markRaw(echarts.init(document.getElementById("column")));
   );
   let myoption = {
     title: {
-    subtext: 'GWh',
+    subtext: 'kWh',
     subtextStyle: {
     fontSize:fontSize(14),
 
        
     },
 
-      data: [" 03", " 04", " 05", " 06", " 07", "08"],
+      data:ChargeDischargeTendency.value[0],
     },
     yAxis: {
       type: "value",
     series: [
     
     {
-        data: [223, 234, 290, 109, 131, 630],
+        data:ChargeDischargeTendency.value[1],
 
         name: '充电',
         type: "bar",
         global: false
       }
     },
-        data: [125, 238, 310, 121, 134, 681],
+        data: ChargeDischargeTendency.value[2],
 
       },
     ],
 };
  // 收益趋势
  function incomechart (){
+  console.log(scureenpofit.value);
+  
   income.value = markRaw(echarts.init(document.getElementById("income")));
   window.addEventListener(
     "resize",
 	    },
     },
 
-      data: ["03", "04", "05", "06", "07", "08"],
+      data: scureenpofit.value[0],
     },
     yAxis: {
       type: "value",
       {
         name: 'hill',
         type: 'pictorialBar',
-        barWidth: '215%',
+        barWidth: '160%',
         // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
         symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
         itemStyle: {
             opacity: 1
           }
         },
-       
-        data: [{value: 100, symbolSize: [fontSize(80),fontSize(100)]}, // 第一个值表示柱子的宽度，第二个值表示柱子的高度
-      {value: 60, symbolSize: [fontSize(130),fontSize(60)]},
-      {value: 75, symbolSize: [fontSize(130),fontSize(75)]},
-      {value: 58, symbolSize: [fontSize(130),fontSize(58)]},
-      {value: 82, symbolSize: [fontSize(130), fontSize(82)]},
-      {value: 91, symbolSize: [fontSize(80),fontSize(91)]},],
+        data: [{value:  scureenpofit.value[1][0]}, // 第一个值表示柱子的宽度，第二个值表示柱子的高度
+      {value: scureenpofit.value[1][1]},
+      {value: scureenpofit.value[1][2]},
+      {value:scureenpofit.value[1][3]},
+      {value:scureenpofit.value[1][4]},
+      {value: scureenpofit.value[1][5]},],
       }
     ]
   };
    
             return res * fontSize;
 };
+const formatAmount1000 = (amount) => {
+  if (amount == undefined||amount == null) {
+    return "0";
+  }else{
+    return (amount/1000).toFixed(1);
+    // return amount
+  }
+ 
+};
+const formatAmount10000 = (amount) => {
+  if (amount == undefined||amount == null) {
+    return "0";
+  }else{
+    return (amount/10000).toFixed(2);
+    // return amount
+  }
+ 
+};
+ // 省略小数点后1位
+ const formatAmount = (amount) => {
+  if (amount == undefined||amount == null) {
+    return "0";
+  }else{
+    // return (amount / 1000).toFixed(2);
+    return amount.toFixed(1);
+  }
+ 
+};
 onMounted(() => {
+  poststationstationName();
   showOverlay(true)
 
 
   const intervalId = setInterval(updateTime, 1000); // 每秒更新一次时间
   onUnmounted(() => clearInterval(intervalId)); // 清除定时器
   gatstationstest()
-  // 充放电趋势图
-  population();
-  // 电站分类统计
-  incomechart();
+ 
   showOverlay(false)
 
 });
   }
 });
 </script>
-<style scoped>
+<style scoped lang="scss">
 *{
   color: #ffffff;
   padding: 0px;
   width: 100%;
   height: 38px;
   margin-top: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 .left_logo1{
   height: 100%;
 }
+.left_boxt{
+  width: 100%;
+  padding: 0px 120px;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+}
+
+
+
+.left_boxopen{
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+}
 .left_top {
   width: 100%;
   height: 280px;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
 display: flex;
 align-items: center;
-justify-content: space-around;
 }
 .left_eltabnormal{
   font-size: 14px;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
 display: flex;
 align-items: center;
-justify-content: space-around;
 }
 el-table{
   color: #222;
 .TiF_font {
   font-family: 'AlimamaFangYuanTiF', sans-serif;
 }
+.execdata{
+  overflow: hidden;
+ }
+.execInfo {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+
+}
+.scrolladdress{
+  width: 90px;
+  margin-left: 10px;
+  margin-right: 10px;
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
+}
+.scrollcontent{
+  width: 160px;
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
+  box-sizing: border-box;
+}
+.scrollevent{
+  width: 44px;
+}
+.left_eltabnormal{
+  width: 50px;
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
+}
+.left_eltabnormal1{
+  width: 50px;
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
+}
+.left_boxt1 {
+
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+ 
+ 
+  :deep(.el-select__wrapper) {
+    .el-select__prefix {
+  background-image: linear-gradient(to bottom, #30CBEB, #FFFFFF); /* 调整颜色渐变位置和数量 */
+  -webkit-background-clip: text !important;
+  background-clip: text !important;
+  color: transparent !important;
+
+    }
+  
+    :deep(.el-select__selected-item) {
+      font-size: 22px;
+    }
+
+    background-color: rgb(0 0 0 / 0%);
+    box-shadow: 0 0 0 0 !important;
+
+    --el-input-transparent-border: 0 0 0 0px;
+    --el-input-hover-border: 0px !important;
+    --el-input-border: 0px;
+
+    // background-color:
+  }
+  :deep(.el-select .el-input__wrapper.is-focus) {
+    box-shadow: 0 0 0 0 !important;
+  }
+  :deep(.el-select .el-input.is-focus .el-input__wrapper) {
+    box-shadow: 0 0 0 0 !important;
+  }
+
+  // 自定义el-select的下拉箭头
+  :deep(.el-select__caret) {
+    /* 为下拉小箭头留出一点位置，避免被文字覆盖 */
+    padding-right: 14px;
+width: 24px;
+height: 24px;
+    /* 很关键：将默认的select选择框样式清除 */
+    appearance: none;
+
+    /* 自定义图片 */
+    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
+
+    /* 自定义图片的大小 */
+    background-size: 100% 100%;
+  }
+
+  /* 将小箭头的样式去去掉 */
+  :deep(.el-select__suffix .el-icon svg) {
+    width: 0;
+  }
+  :deep(.el-icon-arrow-up::before) {
+    content: "";
+  }
+  :deep(.el-select--large .el-select__wrapper) {
+    font-size: 24px;
+    
+  }
+
+}
+ 
+.el-select-dropdown__item{
+  color: #fff;
+  font-size: 16px;
+  padding-left:20px;
+}
+.is-selected{
+  color: #30CBEB;
+  font-size: 16px;
+  padding-left:20px;
+
+}
+
+.el-select-dropdown__item.is-hovering{
+  background-color: rgb(0 0 0 / 0%);
+}
+ 
+
 </style>

vite.config.ts

   base:"./",
 	plugins:[
 		vue(),
-		 
 	],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'https://esos-iot.bjdexn.cn', // 目标服务器
+        changeOrigin: true, // 是否改变原始主机头为目标URL
+        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
+      },
+    },
+  },
   css: {
     postcss: {
       plugins: [