From 3dba29c85bcdb5914a78977aec4df9dbcc58f5ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyu=E2=80=9D?= <“winebunny@163.com”>
Date: Tue, 16 Jul 2024 17:13:59 +0800
Subject: [PATCH] u

---
 src/views/pages/homePage/3Dechart2.vue |  362 +++
 src/views/pages/homePage/index.vue     |  622 +++---
 src/views/pages/homePage/index_v1.vue  | 2781 ++++++++++++++++++++++++
 3 files changed, 3472 insertions(+), 293 deletions(-)
 create mode 100644 src/views/pages/homePage/3Dechart2.vue
 create mode 100644 src/views/pages/homePage/index_v1.vue

diff --git a/src/views/pages/homePage/3Dechart2.vue b/src/views/pages/homePage/3Dechart2.vue
new file mode 100644
index 0000000..d14535a
--- /dev/null
+++ b/src/views/pages/homePage/3Dechart2.vue
@@ -0,0 +1,362 @@
+<template>
+  <div id="gongqiPie"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import transformFontSize from "@/hooks/transFormSize.ts";
+import "echarts-gl";
+export default {
+  name: "供气占比",
+  data() {
+    return {};
+  },
+  mounted() {
+    this.renderBarChart();
+  },
+  methods: {
+    renderBarChart() {
+      let myChart = echarts.init(document.getElementById("gongqiPie"));
+      let colorList = ["#00B3FF", "#abb0b3", "#FFCC26"];
+
+      function getParametricEquation(
+        startRatio,
+        endRatio,
+        isSelected,
+        isHovered,
+        k,
+        height
+      ) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false;
+        }
+
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== "undefined" ? k : 1 / 3;
+
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+
+          x: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetX +
+                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetX +
+                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          y: function (u, v) {
+            if (u < startRadian) {
+              return (
+                offsetY +
+                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            if (u > endRadian) {
+              return (
+                offsetY +
+                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+              );
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+          },
+
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u);
+            }
+            return Math.sin(v) > 0 ? 1 * height : -1;
+          },
+        };
+      }
+      // 生成模拟 3D 饼图的配置项
+      function getPie3D(pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k =
+          typeof internalDiameterRatio !== "undefined"
+            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+            : 1 / 3;
+
+        // 为每一个饼图数据，生成一个 series-surface 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value;
+
+          let seriesItem = {
+            name:
+              typeof pieData[i].name === "undefined"
+                ? `series${i}`
+                : pieData[i].name,
+            type: "surface",
+            parametric: true,
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          };
+
+          if (typeof pieData[i].itemStyle != "undefined") {
+            let itemStyle = {};
+
+            typeof pieData[i].itemStyle.color != "undefined"
+              ? (itemStyle.color = pieData[i].itemStyle.color)
+              : null;
+            typeof pieData[i].itemStyle.opacity != "undefined"
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
+
+            seriesItem.itemStyle = itemStyle;
+          }
+          series.push(seriesItem);
+        }
+
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value;
+          // console.log(series[i]);
+          series[i].pieData.startRatio = startValue / sumValue;
+          series[i].pieData.endRatio = endValue / sumValue;
+          series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          );
+
+          startValue = endValue;
+
+          legendData.push(series[i].name);
+        }
+        return series;
+      }
+      // 传入数据生成 option
+      const optionsData = [
+        {
+          name: "充电桩",
+          value: 4256,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "rgba(102, 235, 287, 1)",
+          },
+        },
+        {
+          name: "空调",
+          value: 2356,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "rgba(250, 179, 109, 1)",
+          },
+        },
+        {
+          name: "微网",
+          value: 2018,
+          itemStyle: {
+            //   opacity: 0.5,
+            color: "rgba(1, 164,242, 1)",
+          },
+        },
+      ];
+      const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: transformFontSize(16),
+          lineHeight: transformFontSize(20),
+          textStyle: {
+            fontSize: transformFontSize(18),
+            color: "#fff",
+          },
+        },
+        // 设置值域的那指向线
+        labelLine: {
+          normal: {
+            show: false, //show设置线是否显示，默认为true，可选值：true ¦ false
+          },
+          length: transformFontSize(30),
+          length2: transformFontSize(30),
+        },
+        // 设置值域的标签
+        label: {
+          normal: {
+            position: "inner", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
+            // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
+            // {a}指series.name  {b}指series.data的name
+            // {c}指series.data的value  {d}%指这一部分占总数的百分比
+            formatter: "{c}",
+          },
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["40%", "60%"], //内环圆 外环圆的宽度
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        legend: {
+          show: false, //工具栏不展示
+          tooltip: {
+            show: true,
+          },
+          orient: "vertical",
+          data: ["充电桩", "空调", "微网"],
+          top: "center",
+          itemGap: transformFontSize(14),
+          itemHeight: transformFontSize(8),
+          itemWidth: transformFontSize(17),
+          right: "8%",
+          textStyle: {
+            color: "#fff",
+            fontSize: transformFontSize(12),
+          },
+        },
+        animation: true,
+        tooltip: {
+          textStyle: {
+            color: "red",
+          },
+          //   backgroundColor: "rgba(250, 179, 109, 0.8)", //设置自定义背景
+          //   borderColor: "rgba(250, 179, 109, 0.8)",
+          formatter: (params) => {
+            if (
+              params.seriesName !== "mouseoutSeries" &&
+              params.seriesName !== "pie2d"
+            ) {
+              return `${
+                params.seriesName
+              }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                params.color
+              };"></span>${
+                option.series[params.seriesIndex].pieData.value + "台"
+              }`;
+            }
+          },
+          textStyle: {
+            fontSize: transformFontSize(14),
+          },
+        },
+        title: {
+          x: "center",
+          top: "20",
+          textStyle: {
+            color: "#fff",
+            fontSize: transformFontSize(22),
+          },
+        },
+        //   backgroundColor: "#0E3567",//背景颜色不展示
+        labelLine: {
+          //指示线条不展示
+          show: false,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+          normal: {
+            show: false,
+            length: 10,
+            length2: 10,
+          },
+        },
+        label: {
+          show: false,
+          position: "outside",
+          formatter: "{b} \n{d}%",
+          textStyle: {
+            color: "#fff",
+            fontSize: "14px",
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 0.01,
+          // top: '30%',
+          bottom: "50%",
+          // left:"-20%",
+          // environment: "rgba(255,255,255,0)",
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 60,
+            // autoRotate: true, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+#gongqiPie {
+  // width: 100%;
+  // height: 300px;
+  width: 150%;
+  height: 150%;;
+}
+</style>
diff --git a/src/views/pages/homePage/index.vue b/src/views/pages/homePage/index.vue
index 56bc5b3..7818378 100644
--- a/src/views/pages/homePage/index.vue
+++ b/src/views/pages/homePage/index.vue
@@ -4,7 +4,7 @@
   <div class="homepage_container" :style="styleVar">
     <div class="content_center">
       <div class="tab">
-        <div
+        <!-- <div
           :class="[
             tabPageFlag === item.id ? 'tabPage_active' : '',
             '',
@@ -14,7 +14,7 @@
           @click="handleTabPage(item.id)"
         >
           {{ item.pageName }}
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="sourcePage" v-if="tabPageFlag === 1">
@@ -38,6 +38,23 @@
                 </div>
                 <div class="content">
                   <div class="title_info margin1">资源概况</div>
+                  <div class="source_load">
+                    <div class="total_load_key">
+                      <div class="area_kw">
+                        <span>{{ sumLoadrateds }}</span>
+                        <div class="r">&nbsp;kW</div>
+                      </div>
+                      <p>可调负荷</p>
+                    </div>
+                    <div class="total_load_3dEchart">
+                      <div class="title_load fs40">负荷户数比例</div>
+                      <div class="echarts">
+                        <threeEchart2></threeEchart2>
+                      </div>
+
+                      <!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
+                    </div>
+                  </div>
                   <div class="content_info">
                     <div class="name">
                       <div class="cen"><div class="namebg">光伏</div></div>
@@ -115,47 +132,6 @@
                       </div>
                     </div>
                   </div>
-                  <div class="content_info">
-                    <div class="name">
-                      <div class="cen">
-                        <div class="namebg">新能源厂站</div>
-                      </div>
-                    </div>
-
-                    <div class="name_box">
-                      <img
-                        src="@/assets/images/mainPage/icon1_newengery.png"
-                        alt=""
-                      />
-                      <div class="new_energy">
-                        <div
-                          class="rowbox"
-                          v-for="(item, index) in SourcePvstation"
-                          :key="index"
-                        >
-                          <div class="photovoltaic_key1 long">
-                            <img
-                              src="@/assets/images/mainPage/icon1_lefti.png"
-                              alt=""
-                            />
-                            <div class="r">
-                              <span>{{ item.name }}</span>
-                            </div>
-
-                            <img
-                              src="@/assets/images/mainPage/icon1_righti.png"
-                              alt=""
-                            />
-                          </div>
-                          <div class="photovoltaic_value1 short">
-                            <div class="kw">
-                              {{ item.ratedS }} <span>kW</span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
                 </div>
               </div>
               <!-- 左展开箭头 -->
@@ -189,34 +165,41 @@
                           <span>{{ sumLoadrateds }}</span>
                           <div class="r">&nbsp;kW</div>
                         </div>
-                        <p>地区总额定负荷</p>
+                        <p>可调负荷</p>
                       </div>
                       <div class="total_load_3dEchart">
                         <div class="title_load fs40">负荷户数比例</div>
                         <div class="echarts">
-                          <threeEchart ></threeEchart>
+                          <threeEchart></threeEchart>
                         </div>
 
                         <!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
                       </div>
                     </div>
+                    <div class="posimg">
+                      <img
+                        src="@/assets/images/mainPage/icon2_chongdianzhuang.png"
+                        alt=""
+                      />
+                    </div>
                     <div class="list_info">
                       <div class="rowlist">
-                        <img
-                          src="@/assets/images/mainPage/icon2_chongdianzhuang.png"
-                          alt=""
-                        />
                         <div class="rbox">
                           <div class="key bshadow">
-                            <div class="namebg">充电桩</div>
+                            <div class="namebg">居民充电桩</div>
                           </div>
-                          <div class="danwei">
+                          <div class="danwei centerpos">
                             <div class="v1">
-                              <div class="rkw">
-                                {{ loadchargingPileratedS }}
-                              </div>
-                              <div class="rnumber">&nbsp;kW</div>
+                              <div class="rkw">{{ loadchargingPilecount }}</div>
+                              <div class="rnumber">&nbsp;台</div>
                             </div>
+                          </div>
+                        </div>
+                        <div class="rbox">
+                          <div class="key bshadow">
+                            <div class="namebg">商业充电桩</div>
+                          </div>
+                          <div class="danwei centerpos">
                             <div class="v1">
                               <div class="rkw">{{ loadchargingPilecount }}</div>
                               <div class="rnumber">&nbsp;台</div>
@@ -225,21 +208,24 @@
                         </div>
                       </div>
                       <div class="rowlist">
-                        <img
-                          src="@/assets/images/mainPage/icon2_kongtiao.png"
-                          alt=""
-                        />
                         <div class="rbox">
                           <div class="key bshadow">
-                            <div class="namebg">空调</div>
+                            <div class="namebg">V2G充电桩</div>
                           </div>
-                          <div class="danwei">
+                          <div class="danwei centerpos">
                             <div class="v1">
                               <div class="rkw">
-                                {{ loadAirconditionerratedS }}
+                                {{ loadAirconditionercount }}
                               </div>
-                              <div class="rnumber">&nbsp;kW</div>
+                              <div class="rnumber">&nbsp;台</div>
                             </div>
+                          </div>
+                        </div>
+                        <div class="rbox">
+                          <div class="key bshadow">
+                            <div class="namebg">在途充电桩</div>
+                          </div>
+                          <div class="danwei centerpos">
                             <div class="v1">
                               <div class="rkw">
                                 {{ loadAirconditionercount }}
@@ -249,27 +235,6 @@
                           </div>
                         </div>
                       </div>
-                      <!-- <div class="rowlist">
-                        <img
-                          src="@/assets/images/mainPage/icon2_weiwang.png"
-                          alt=""
-                        />
-                        <div class="rbox">
-                          <div class="key bshadow">
-                            <div class="namebg">微网</div>
-                          </div>
-                          <div class="danwei">
-                            <div class="v1">
-                              <div class="rkw">{{ loadMicrogridrratedS }}</div>
-                              <div class="rnumber">&nbsp;kW</div>
-                            </div>
-                            <div class="v1">
-                              <div class="rkw">{{ loadMicrogridcount }}</div>
-                              <div class="rnumber">&nbsp;台</div>
-                            </div>
-                          </div>
-                        </div>
-                      </div> -->
                     </div>
                   </div>
                 </div>
@@ -283,8 +248,6 @@
                 </div>
               </div>
             </div>
-           
-         
           </div>
         </div>
       </div>
@@ -330,111 +293,147 @@
                 </div>
 
                 <div class="content_info" v-if="networkFlag === '1'">
-                  <div class="name">
-                    <div class="cen"><div class="namebg">主网</div></div>
-                  </div>
-                  <div class="name_box">
-                    <img src="@/assets/images/mainPage/icon3_main.png" alt="" />
-                    <div class="photovoltaic">
-                      <div class="rowbox">
-                        <div class="photovoltaic_key1">
-                          <img
-                            src="@/assets/images/mainPage/icon1_lefti.png"
-                            alt=""
-                          />
-                          <div class="r"><span>110kV</span></div>
-                          <img
-                            src="@/assets/images/mainPage/icon1_righti.png"
-                            alt=""
-                          />
-                        </div>
-                        <div class="photovoltaic_value1">
-                          <div class="kw">
-                            {{ Number(networkLine110RatedS).toFixed(2) }}
-                            <span>km</span>
-                          </div>
-                          <div class="hu">
-                            {{ networkLine110Count }} <span>条</span>
-                          </div>
+                  <div>
+                    <div class="name">
+                      <div class="cen">
+                        <div class="namebg">
+                          配网（
+                          <div class="fs25">线路总数：111条</div>
+                          ）
                         </div>
                       </div>
-                      <div class="rowbox">
-                        <div class="photovoltaic_key1">
-                          <img
-                            src="@/assets/images/mainPage/icon1_lefti.png"
-                            alt=""
-                          />
-                          <div class="r"><span>35kV</span></div>
-                          <img
-                            src="@/assets/images/mainPage/icon1_righti.png"
-                            alt=""
-                          />
-                        </div>
-                        <div class="photovoltaic_value1">
-                          <div class="kw">
-                            {{ Number(networkLine35RatedS).toFixed(2) }}
-                            <span>km</span>
+                    </div>
+                    <div class="name_box">
+                      <img
+                        src="@/assets/images/mainPage/icon3_feeder.png"
+                        alt=""
+                      />
+                      <div class="photovoltaic">
+                        <div class="rowbox">
+                          <div class="photovoltaic_key1">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r"><span>光伏负荷线路</span></div>
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
                           </div>
-                          <div class="hu">
-                            {{ networkLine35Count }} <span>条</span>
+                          <div class="photovoltaic_value1">
+                            <div class="hu">
+                              {{ networkFeer10Count }} <span>条</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="rowbox">
+                          <div class="photovoltaic_key1">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r"><span>充电桩负荷线路</span></div>
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
+                          </div>
+                          <div class="photovoltaic_value1">
+                            <div class="hu">
+                              {{ networkFeer380Count }} <span>条</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="rowbox">
+                          <div class="photovoltaic_key1">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r"><span>储能负荷线路</span></div>
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
+                          </div>
+                          <div class="photovoltaic_value1">
+                            <div class="hu">
+                              {{ networkFeer380Count }} <span>条</span>
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <div class="content_info" v-if="networkFlag === '1'">
-                  <div class="name">
-                    <div class="cen"><div class="namebg">配网</div></div>
-                  </div>
-                  <div class="name_box">
-                    <img
-                      src="@/assets/images/mainPage/icon3_feeder.png"
-                      alt=""
-                    />
-                    <div class="photovoltaic">
-                      
-                      <div class="rowbox">
-                        <div class="photovoltaic_key1">
-                          <img
-                            src="@/assets/images/mainPage/icon1_lefti.png"
-                            alt=""
-                          />
-                          <div class="r"><span>10kV</span></div>
-                          <img
-                            src="@/assets/images/mainPage/icon1_righti.png"
-                            alt=""
-                          />
-                        </div>
-                        <div class="photovoltaic_value1">
-                          <div class="kw">
-                            {{ Number(networkFeer10RatedS).toFixed(2) }}
-                            <span>km</span>
-                          </div>
-                          <div class="hu">
-                            {{ networkFeer10Count }} <span>条</span>
-                          </div>
+                  <div>
+                    <div class="name">
+                      <div class="cen">
+                        <div class="namebg">
+                          台区（
+                          <div class="fs25">线路总数：111条</div>
+                          ）
                         </div>
                       </div>
-                      <div class="rowbox">
-                        <div class="photovoltaic_key1">
-                          <img
-                            src="@/assets/images/mainPage/icon1_lefti.png"
-                            alt=""
-                          />
-                          <div class="r"><span>380V</span></div>
-                          <img
-                            src="@/assets/images/mainPage/icon1_righti.png"
-                            alt=""
-                          />
-                        </div>
-                        <div class="photovoltaic_value1">
-                          <div class="kw">
-                            {{ Number(networkFeer380RatedS).toFixed(2) }}
-                            <span>km</span>
+                    </div>
+                    <div class="name_box">
+                      <img
+                        src="@/assets/images/mainPage/icon4_xixiao.png"
+                        alt=""
+                      />
+                      <div class="photovoltaic">
+                        <div class="rowbox">
+                          <div class="photovoltaic_key1">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r"><span>光伏负荷台区</span></div>
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
                           </div>
-                          <div class="hu">
-                            {{ networkFeer380Count }} <span>条</span>
+                          <div class="photovoltaic_value1">
+                            <div class="hu">
+                              {{ networkFeer10Count }} <span>条</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="rowbox">
+                          <div class="photovoltaic_key1">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r"><span>充电桩负荷台区</span></div>
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
+                          </div>
+                          <div class="photovoltaic_value1">
+                            <div class="hu">
+                              {{ networkFeer380Count }} <span>条</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="rowbox">
+                          <div class="photovoltaic_key1">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r"><span>储能负荷台区</span></div>
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
+                          </div>
+                          <div class="photovoltaic_value1">
+                            <div class="hu">
+                              {{ networkFeer380Count }} <span>条</span>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -506,72 +505,6 @@
                     </div>
                   </div>
                 </div>
-                <!-- <div class="content_info" v-if="networkFlag === '2'">
-                  <div class="name">
-                    <div class="cen"><div class="namebg">津门湖</div></div>
-                  </div>
-                  <div class="name_box">
-                    <img
-                      src="@/assets/images/mainPage/icon3_weiwang.png"
-                      alt=""
-                    />
-                    <div class="photovoltaic">
-                      <div class="rowbox">
-                        <div class="photovoltaic_key1">
-                          <img
-                            src="@/assets/images/mainPage/icon1_lefti.png"
-                            alt=""
-                          />
-                          <div class="r"><span>光伏</span></div>
-                          <img
-                            src="@/assets/images/mainPage/icon1_righti.png"
-                            alt=""
-                          />
-                        </div>
-                        <div class="photovoltaic_value1">
-                          <div class="kw">9999 <span>个</span></div>
-                          <div class="hu">1010 <span>kW</span></div>
-                        </div>
-                      </div>
-                      <div class="rowbox">
-                        <div class="photovoltaic_key1">
-                          <img
-                            src="@/assets/images/mainPage/icon1_lefti.png"
-                            alt=""
-                          />
-                          <div class="r"><span>充电桩</span></div>
-
-                          <img
-                            src="@/assets/images/mainPage/icon1_righti.png"
-                            alt=""
-                          />
-                        </div>
-                        <div class="photovoltaic_value1">
-                          <div class="kw">1010 <span>个</span></div>
-                          <div class="hu">9999 <span>kW</span></div>
-                        </div>
-                      </div>
-                      <div class="rowbox">
-                        <div class="photovoltaic_key1">
-                          <img
-                            src="@/assets/images/mainPage/icon1_lefti.png"
-                            alt=""
-                          />
-                          <div class="r"><span>储能</span></div>
-
-                          <img
-                            src="@/assets/images/mainPage/icon1_righti.png"
-                            alt=""
-                          />
-                        </div>
-                        <div class="photovoltaic_value1">
-                          <div class="kw">1010 <span>个</span></div>
-                          <div class="hu">9999 <span>kW</span></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div> -->
               </div>
             </div>
             <div class="networkContent" v-else>
@@ -599,40 +532,26 @@
                 <div class="title_info margin2">资源概况</div>
                 <div class="content_info">
                   <div class="rowlist">
-                    <img
-                      src="@/assets/images/mainPage/icon4_xixiao.png"
-                      alt=""
-                    />
+                    <img src="@/assets/images/mainPage/icon4_user.png" alt="" />
                     <div class="rbox">
                       <div class="key bshadow">
                         <div class="namebg">西小站</div>
                       </div>
-                      <div class="danwei">
+                      <div class="colpos">
                         <div class="v1">
+                          负荷功率
+                          <div class="r_chu">
                           <div class="rkw">{{ storedUserPartAreaRatedS }}</div>
                           <div class="rnumber">&nbsp;kW</div>
                         </div>
+                        </div>
+
                         <div class="v1">
+                          数量
+                          <div class="r_chu">
                           <div class="rkw">{{ storedUserPartAreaCount }}</div>
                           <div class="rnumber">&nbsp;台</div>
                         </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="rowlist">
-                    <img src="@/assets/images/mainPage/icon4_user.png" alt="" />
-                    <div class="rbox">
-                      <div class="key bshadow">
-                        <div class="namebg">用户侧</div>
-                      </div>
-                      <div class="danwei">
-                        <div class="v1">
-                          <div class="rkw">{{ storedUserPartuserRatedS }}</div>
-                          <div class="rnumber">&nbsp;kW</div>
-                        </div>
-                        <div class="v1">
-                          <div class="rkw">{{ storedUserPartuserCount }}</div>
-                          <div class="rnumber">&nbsp;台</div>
                         </div>
                       </div>
                     </div>
@@ -761,6 +680,8 @@ import source_factoryStation_echart from "./twoLine.vue";
 import load_echart from "./oneLine.vue";
 import storage_echart from "./oneLine.vue";
 import threeEchart from "./3Dechart.vue";
+import threeEchart2 from "./3Dechart2.vue";
+
 import runListenPage from "./runListenPage.vue";
 
 import { statInfo_api } from "@/api/homePage/SoureceApi.ts";
@@ -1378,23 +1299,18 @@ const hideRight = ref<boolean>(true); //默认页面显示  右边
 onUnmounted(() => {
   hideLeft.value = false;
   hideRight.value = false;
+  handleThree_out(); //清楚边界线和字体
 });
 
 // 跳转三维
-const handleThree = (val) => {
-  const list = {
-    location: "(X=18705617.163,Y=1826842.166,Z=4299675.505)",
-    rotation: "Pitch=-89.9,Yaw=-90.542,Roll=0",
+const handleThree_out = () => {
+  // 隐藏城南边界线
+  const datadispaly = {
+    CityID: "12010",
+    status: "0", //0隐藏1显示
   };
-  api_send("CameraMove", list, () => {
-    console.log("CameraMove");
-  });
-  let _list = {
-    CityID: val,
-    status: "1",
-  };
-  api_send("ShowCityEdge", _list, () => {
-    console.log("ShowCityEdge");
+  api_send("ShowCityEdge", datadispaly, () => {
+    console.log("ShowCityEdge隐藏城南边界线");
   });
 };
 
@@ -1525,6 +1441,10 @@ const styleVar = computed(() => {
     }
   }
 }
+
+.centerpos {
+  justify-content: center;
+}
 .infotitle_short {
   top: 6%;
   left: 4%;
@@ -1687,7 +1607,6 @@ const styleVar = computed(() => {
     }
     .source {
       position: relative;
-
       height: changeHeight(807.84);
       .icon_panel_left_on {
         position: absolute;
@@ -1809,6 +1728,81 @@ const styleVar = computed(() => {
           }
         }
       }
+      .source_load {
+        margin-left: 10%;
+        width: 80%;
+        height: changeHeight(263);
+        // background-color: pink;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .total_load_key {
+          width: changeWidth(455.82);
+          height: changeHeight(166.67);
+          background: url("@/assets/images/mainPage/icon2_kwbg.png") no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding-left: changeWidth(90);
+          .area_kw {
+            font-size: changeHeight(50);
+
+            font-weight: 600;
+
+            color: #ffffff;
+            display: flex;
+
+            height: changeHeight(75);
+            text-shadow: 0px 0px 10px rgba(65, 171, 168, 0.6);
+            .r {
+              font-size: changeHeight(40);
+              color: #86fffc;
+              font-weight: 400;
+              line-height: changeHeight(78);
+            }
+          }
+          p {
+            display: flex;
+            font-size: changeHeight(30);
+            /* 文字 */
+
+            font-weight: 400;
+
+            color: #cccccc;
+
+            opacity: 0.8;
+          }
+        }
+        .total_load_3dEchart {
+          box-sizing: border-box;
+          // width: changeHeight(236.97);
+          // height: changeHeight(135.41);
+
+          width: changeWidth(506.97);
+          height: changeHeight(325.41);
+          display: flex;
+          margin-bottom: changeHeight(80);
+          padding-left: changeWidth(120);
+          // border: 1px solid red;
+          position: relative;
+          .title_load {
+            position: absolute;
+            top: changeHeight(160);
+            right: changeWidth(75);
+            font-weight: 600;
+            z-index: 4;
+          }
+          .echarts {
+            position: absolute;
+            left: changeHeight(-100);
+            top: changeHeight(-20);
+            width: changeWidth(506.97);
+            height: changeHeight(325.41);
+          }
+        }
+      }
     }
     .loadContent {
       margin-top: changeHeight(77.75);
@@ -1835,7 +1829,6 @@ const styleVar = computed(() => {
     }
     .load {
       position: relative;
-
       margin-top: changeHeight(77.75);
 
       height: changeHeight(1014.74);
@@ -1856,7 +1849,17 @@ const styleVar = computed(() => {
         flex-direction: column;
         width: 80%;
         margin-left: 10%;
+        position: relative;
+        .posimg {
+          position: absolute;
 
+          top: 50%;
+          left: 35%;
+          img {
+            width: changeWidth(270.97);
+            height: changeHeight(239.38);
+          }
+        }
         .total_load {
           height: changeHeight(263);
           // background-color: pink;
@@ -1933,27 +1936,27 @@ const styleVar = computed(() => {
         .list_info {
           flex: 1;
           padding-right: 10%;
+          margin-left: -10%;
           display: flex;
           flex-direction: column;
           justify-content: space-evenly;
+
           .rowlist {
-            width: 100%;
+            width: 120%;
             display: flex;
             justify-content: space-between;
-
             align-items: center;
-            img {
-              width: changeWidth(170.97);
-              height: changeHeight(139.38);
-            }
             .rbox {
-              width: 65%;
+              width: 40%;
               height: 100%;
+              height: changeHeight(200);
+              // border: 1px solid red;
 
               // padding: 0 changeHeight(10);
 
               display: flex;
               flex-direction: column;
+
               .key {
                 flex: 1;
                 position: relative;
@@ -2047,8 +2050,8 @@ const styleVar = computed(() => {
         .content_info {
           // border: 1px saddlebrown solid;
           display: flex;
-
           height: changeHeight(319);
+          justify-content: space-evenly;
           flex-direction: column;
           width: 100%;
           // padding-left: changeHeight(20);
@@ -2106,7 +2109,7 @@ const styleVar = computed(() => {
                 height: changeHeight(60);
                 line-height: changeHeight(60);
                 .photovoltaic_key1 {
-                  width: changeWidth(309.23);
+                  width: changeWidth(409.23);
 
                   justify-content: space-between;
                   display: flex;
@@ -2133,7 +2136,8 @@ const styleVar = computed(() => {
                   // background-color: red;
                   // margin-left: changeHeight(43.5);
                   // border: 1px solid red;
-                  margin-left: changeWidth(25.5);
+
+                  margin-left: changeWidth(125.5);
 
                   display: flex;
                   flex: 1;
@@ -2212,13 +2216,17 @@ const styleVar = computed(() => {
         margin-left: changeWidth(60);
         .rowlist {
           width: 100%;
+          height: changeHeight(400);
           display: flex;
+          // border: 1px solid red;
+          
           justify-content: space-between;
 
           align-items: center;
           img {
             width: changeWidth(227.77);
             // height: changeHeight(130.17);
+            margin-top: 8%;
           }
           .rbox {
             width: 65%;
@@ -2247,6 +2255,34 @@ const styleVar = computed(() => {
                 line-height: changeHeight(38);
               }
             }
+            .colpos {
+              display: flex;
+              flex-direction: column;
+              height: changeHeight(300);
+              justify-content: space-between;
+              .v1 {
+                justify-content: space-around;
+                display: flex;
+                font-size: changeHeight(35);
+                font-weight: 600;
+                // font-size: changeHeight(35);
+                width: changeHeight(640.16);
+                height: changeHeight(80.31);
+                
+                background: url("@/assets/images/homePage/bgdanwei.png") no-repeat;
+                background-size: 100% 100%;
+                .r_chu{
+                  display: flex;
+                }
+                .rnumber {
+                  font-size: changeHeight(30);
+                  color: #86fffc;
+                  font-weight: 400;
+
+                  line-height: changeHeight(50);
+                }
+              }
+            }
           }
         }
       }
diff --git a/src/views/pages/homePage/index_v1.vue b/src/views/pages/homePage/index_v1.vue
new file mode 100644
index 0000000..56bc5b3
--- /dev/null
+++ b/src/views/pages/homePage/index_v1.vue
@@ -0,0 +1,2781 @@
+<!-- 首页 -->
+
+<template>
+  <div class="homepage_container" :style="styleVar">
+    <div class="content_center">
+      <div class="tab">
+        <div
+          :class="[
+            tabPageFlag === item.id ? 'tabPage_active' : '',
+            '',
+            'tabPage',
+          ]"
+          v-for="item in tabPage"
+          @click="handleTabPage(item.id)"
+        >
+          {{ item.pageName }}
+        </div>
+      </div>
+    </div>
+    <div class="sourcePage" v-if="tabPageFlag === 1">
+      <div class="content_left">
+        <div
+          :class="`animated ${hideLeft ? 'fadeInLeftBig' : 'fadeOutLeftBig'}`"
+          :style="{ opacity: hideLeft ? '1' : '0' }"
+        >
+          <div class="left_box">
+            <!-- 源 -->
+            <div>
+              <div class="source common_box" v-if="sourceFlag">
+                <!-- 左收缩箭头 -->
+                <div
+                  class="icon_panel_left_on"
+                  @click="sourceFlag = false"
+                ></div>
+                <div class="title">
+                  <img src="@/assets/images/mainPage/icon_title1.png" alt="" />
+                  <span>源</span>
+                </div>
+                <div class="content">
+                  <div class="title_info margin1">资源概况</div>
+                  <div class="content_info">
+                    <div class="name">
+                      <div class="cen"><div class="namebg">光伏</div></div>
+                    </div>
+                    <div class="name_box">
+                      <img
+                        src="@/assets/images/mainPage/icon1_guangfu.png"
+                        alt=""
+                        @click="alert_pvFlag = true"
+                      />
+                      <div class="photovoltaic">
+                        <div class="rowbox">
+                          <div class="photovoltaic_key1">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r"><span>35kV</span></div>
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
+                          </div>
+                          <div class="photovoltaic_value1">
+                            <div class="kw">
+                              {{ unit35?.length }} <span>kW</span>
+                            </div>
+                            <div class="hu">
+                              {{ unit35?.count }} <span>座</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="rowbox">
+                          <div class="photovoltaic_key1">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r"><span>10kV</span></div>
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
+                          </div>
+                          <div class="photovoltaic_value1">
+                            <div class="kw">
+                              {{ unit10?.length }} <span>kW</span>
+                            </div>
+                            <div class="hu">
+                              {{ unit10?.count }} <span>座</span>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="rowbox">
+                          <div class="photovoltaic_key1">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r"><span>380V</span>及以下</div>
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
+                          </div>
+                          <div class="photovoltaic_value1">
+                            <div class="kw">
+                              {{ unit380lowarrLength }}<span> kW</span>
+                            </div>
+                            <div class="hu">
+                              {{ unit380lowarrCount }} <span>户</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="content_info">
+                    <div class="name">
+                      <div class="cen">
+                        <div class="namebg">新能源厂站</div>
+                      </div>
+                    </div>
+
+                    <div class="name_box">
+                      <img
+                        src="@/assets/images/mainPage/icon1_newengery.png"
+                        alt=""
+                      />
+                      <div class="new_energy">
+                        <div
+                          class="rowbox"
+                          v-for="(item, index) in SourcePvstation"
+                          :key="index"
+                        >
+                          <div class="photovoltaic_key1 long">
+                            <img
+                              src="@/assets/images/mainPage/icon1_lefti.png"
+                              alt=""
+                            />
+                            <div class="r">
+                              <span>{{ item.name }}</span>
+                            </div>
+
+                            <img
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
+                          </div>
+                          <div class="photovoltaic_value1 short">
+                            <div class="kw">
+                              {{ item.ratedS }} <span>kW</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- 左展开箭头 -->
+              <div class="sourceContent" v-else>
+                <div class="showPanel">
+                  <div
+                    class="icon_panel_left_off"
+                    @click="sourceFlag = true"
+                  ></div>
+                </div>
+              </div>
+              <!-- 左展开箭头 -->
+            </div>
+            <!-- 源 -->
+            <!-- 荷 -->
+            <div>
+              <div class="load common_box" v-if="loadFlag">
+                <!-- 左收缩箭头 -->
+                <div class="icon_panel_left_on" @click="loadFlag = false"></div>
+                <div class="title">
+                  <img src="@/assets/images/mainPage/icon_title2.png" alt="" />
+
+                  <span>荷</span>
+                </div>
+                <div class="content">
+                  <div class="title_info margin2">资源概况</div>
+                  <div class="content_info">
+                    <div class="total_load">
+                      <div class="total_load_key">
+                        <div class="area_kw">
+                          <span>{{ sumLoadrateds }}</span>
+                          <div class="r">&nbsp;kW</div>
+                        </div>
+                        <p>地区总额定负荷</p>
+                      </div>
+                      <div class="total_load_3dEchart">
+                        <div class="title_load fs40">负荷户数比例</div>
+                        <div class="echarts">
+                          <threeEchart ></threeEchart>
+                        </div>
+
+                        <!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
+                      </div>
+                    </div>
+                    <div class="list_info">
+                      <div class="rowlist">
+                        <img
+                          src="@/assets/images/mainPage/icon2_chongdianzhuang.png"
+                          alt=""
+                        />
+                        <div class="rbox">
+                          <div class="key bshadow">
+                            <div class="namebg">充电桩</div>
+                          </div>
+                          <div class="danwei">
+                            <div class="v1">
+                              <div class="rkw">
+                                {{ loadchargingPileratedS }}
+                              </div>
+                              <div class="rnumber">&nbsp;kW</div>
+                            </div>
+                            <div class="v1">
+                              <div class="rkw">{{ loadchargingPilecount }}</div>
+                              <div class="rnumber">&nbsp;台</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="rowlist">
+                        <img
+                          src="@/assets/images/mainPage/icon2_kongtiao.png"
+                          alt=""
+                        />
+                        <div class="rbox">
+                          <div class="key bshadow">
+                            <div class="namebg">空调</div>
+                          </div>
+                          <div class="danwei">
+                            <div class="v1">
+                              <div class="rkw">
+                                {{ loadAirconditionerratedS }}
+                              </div>
+                              <div class="rnumber">&nbsp;kW</div>
+                            </div>
+                            <div class="v1">
+                              <div class="rkw">
+                                {{ loadAirconditionercount }}
+                              </div>
+                              <div class="rnumber">&nbsp;台</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- <div class="rowlist">
+                        <img
+                          src="@/assets/images/mainPage/icon2_weiwang.png"
+                          alt=""
+                        />
+                        <div class="rbox">
+                          <div class="key bshadow">
+                            <div class="namebg">微网</div>
+                          </div>
+                          <div class="danwei">
+                            <div class="v1">
+                              <div class="rkw">{{ loadMicrogridrratedS }}</div>
+                              <div class="rnumber">&nbsp;kW</div>
+                            </div>
+                            <div class="v1">
+                              <div class="rkw">{{ loadMicrogridcount }}</div>
+                              <div class="rnumber">&nbsp;台</div>
+                            </div>
+                          </div>
+                        </div>
+                      </div> -->
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="loadContent" v-else>
+                <div class="showPanel">
+                  <div
+                    class="icon_panel_left_off"
+                    @click="loadFlag = true"
+                  ></div>
+                </div>
+              </div>
+            </div>
+           
+         
+          </div>
+        </div>
+      </div>
+
+      <div class="content_right">
+        <div
+          :class="` animated ${
+            hideRight ? 'fadeInRightBig' : 'fadeOutRightBig'
+          }`"
+          :style="{ opacity: hideRight ? '1' : '0' }"
+        >
+          <!-- 网 -->
+          <div>
+            <div class="network common_box" v-if="networkContentFlag">
+              <!-- 左收缩箭头 -->
+              <div
+                class="icon_panel_left_on"
+                @click="networkContentFlag = false"
+              ></div>
+              <div class="title">
+                <img src="@/assets/images/mainPage/icon_title3.png" alt="" />
+                <span>网</span>
+              </div>
+              <div class="content network_box">
+                <div class="tab_newwork">
+                  <div
+                    :class="[
+                      networkFlag === '1' ? 'tab_active' : 'tab_default',
+                    ]"
+                    @click="changeNetWorkTab('1')"
+                  >
+                    主配网信息
+                  </div>
+                  <div
+                    :class="[
+                      networkFlag === '2' ? 'tab_active' : 'tab_default',
+                      'tab_padding',
+                    ]"
+                    @click="changeNetWorkTab('2')"
+                  >
+                    微网信息
+                  </div>
+                </div>
+
+                <div class="content_info" v-if="networkFlag === '1'">
+                  <div class="name">
+                    <div class="cen"><div class="namebg">主网</div></div>
+                  </div>
+                  <div class="name_box">
+                    <img src="@/assets/images/mainPage/icon3_main.png" alt="" />
+                    <div class="photovoltaic">
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>110kV</span></div>
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">
+                            {{ Number(networkLine110RatedS).toFixed(2) }}
+                            <span>km</span>
+                          </div>
+                          <div class="hu">
+                            {{ networkLine110Count }} <span>条</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>35kV</span></div>
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">
+                            {{ Number(networkLine35RatedS).toFixed(2) }}
+                            <span>km</span>
+                          </div>
+                          <div class="hu">
+                            {{ networkLine35Count }} <span>条</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="content_info" v-if="networkFlag === '1'">
+                  <div class="name">
+                    <div class="cen"><div class="namebg">配网</div></div>
+                  </div>
+                  <div class="name_box">
+                    <img
+                      src="@/assets/images/mainPage/icon3_feeder.png"
+                      alt=""
+                    />
+                    <div class="photovoltaic">
+                      
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>10kV</span></div>
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">
+                            {{ Number(networkFeer10RatedS).toFixed(2) }}
+                            <span>km</span>
+                          </div>
+                          <div class="hu">
+                            {{ networkFeer10Count }} <span>条</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>380V</span></div>
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">
+                            {{ Number(networkFeer380RatedS).toFixed(2) }}
+                            <span>km</span>
+                          </div>
+                          <div class="hu">
+                            {{ networkFeer380Count }} <span>条</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="content_info xixiao" v-if="networkFlag === '2'">
+                  <div class="name">
+                    <div class="cen"><div class="namebg">西小站</div></div>
+                  </div>
+                  <div class="name_box">
+                    <img
+                      src="@/assets/images/mainPage/icon3_weiwang.png"
+                      alt=""
+                    />
+                    <div class="photovoltaic">
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>光伏</span></div>
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">0 <span>个</span></div>
+                          <div class="hu">0 <span>kW</span></div>
+                        </div>
+                      </div>
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>充电桩</span></div>
+
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">0 <span>个</span></div>
+                          <div class="hu">0 <span>kW</span></div>
+                        </div>
+                      </div>
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>储能</span></div>
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">0 <span>个</span></div>
+                          <div class="hu">0 <span>kW</span></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- <div class="content_info" v-if="networkFlag === '2'">
+                  <div class="name">
+                    <div class="cen"><div class="namebg">津门湖</div></div>
+                  </div>
+                  <div class="name_box">
+                    <img
+                      src="@/assets/images/mainPage/icon3_weiwang.png"
+                      alt=""
+                    />
+                    <div class="photovoltaic">
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>光伏</span></div>
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">9999 <span>个</span></div>
+                          <div class="hu">1010 <span>kW</span></div>
+                        </div>
+                      </div>
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>充电桩</span></div>
+
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">1010 <span>个</span></div>
+                          <div class="hu">9999 <span>kW</span></div>
+                        </div>
+                      </div>
+                      <div class="rowbox">
+                        <div class="photovoltaic_key1">
+                          <img
+                            src="@/assets/images/mainPage/icon1_lefti.png"
+                            alt=""
+                          />
+                          <div class="r"><span>储能</span></div>
+
+                          <img
+                            src="@/assets/images/mainPage/icon1_righti.png"
+                            alt=""
+                          />
+                        </div>
+                        <div class="photovoltaic_value1">
+                          <div class="kw">1010 <span>个</span></div>
+                          <div class="hu">9999 <span>kW</span></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div> -->
+              </div>
+            </div>
+            <div class="networkContent" v-else>
+              <div class="showPanel">
+                <div
+                  class="icon_panel_left_off"
+                  @click="networkContentFlag = true"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <!-- 储 -->
+          <div>
+            <div class="storage common_box" v-if="stroedContentFlag">
+              <!-- 左收缩箭头 -->
+              <div
+                class="icon_panel_left_on"
+                @click="stroedContentFlag = false"
+              ></div>
+              <div class="title">
+                <img src="@/assets/images/mainPage/icon_title4.png" alt="" />
+                <span>储</span>
+              </div>
+              <div class="content">
+                <div class="title_info margin2">资源概况</div>
+                <div class="content_info">
+                  <div class="rowlist">
+                    <img
+                      src="@/assets/images/mainPage/icon4_xixiao.png"
+                      alt=""
+                    />
+                    <div class="rbox">
+                      <div class="key bshadow">
+                        <div class="namebg">西小站</div>
+                      </div>
+                      <div class="danwei">
+                        <div class="v1">
+                          <div class="rkw">{{ storedUserPartAreaRatedS }}</div>
+                          <div class="rnumber">&nbsp;kW</div>
+                        </div>
+                        <div class="v1">
+                          <div class="rkw">{{ storedUserPartAreaCount }}</div>
+                          <div class="rnumber">&nbsp;台</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="rowlist">
+                    <img src="@/assets/images/mainPage/icon4_user.png" alt="" />
+                    <div class="rbox">
+                      <div class="key bshadow">
+                        <div class="namebg">用户侧</div>
+                      </div>
+                      <div class="danwei">
+                        <div class="v1">
+                          <div class="rkw">{{ storedUserPartuserRatedS }}</div>
+                          <div class="rnumber">&nbsp;kW</div>
+                        </div>
+                        <div class="v1">
+                          <div class="rkw">{{ storedUserPartuserCount }}</div>
+                          <div class="rnumber">&nbsp;台</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="storageContent" v-else>
+              <div class="showPanel">
+                <div
+                  class="icon_panel_left_off"
+                  @click="stroedContentFlag = true"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="runLisenPage_box" v-else>
+      <runListenPage></runListenPage>
+    </div>
+
+    <div class="content_center_alert" v-if="alert_pvFlag">
+      <!-- <div class="run_detail" v-if="runDetailFlage"> -->
+      <div class="run_detail" v-if="true">
+        <div class="tip">
+          <img src="@/assets/images/mainPage/icon_alert_pv.png" alt="" />
+          <span class="jianbian">光伏信息</span>
+          <div class="closebtn" @click="alert_pvFlag = false"></div>
+        </div>
+        <div class="title">
+          <div class="titlebg">
+            <span>详情列表</span>
+            <div class="select_box">
+              <!-- 下拉菜单 -->
+              <el-select
+                popper-class="customSelect"
+                v-model="infovalue"
+                placeholder="选择光伏等级"
+                :popper-append-to-body="false"
+              >
+                <el-option
+                  v-for="(item, index) in infokeys"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="index"
+                />
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="table_box">
+            <el-table
+              :data="
+                tableData.slice(
+                  (currentPage - 1) * pageSize,
+                  currentPage * pageSize
+                )
+              "
+              style="width: 100%; height: 100%"
+            >
+              <el-table-column label="35kV" width="175" align="center">
+                <template #default="scope">
+                  <span style="margin-left: 10px">{{ scope.row.name }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="" align="center">
+                <template #default="scope">
+                  <span style="margin-left: 10px">{{
+                    scope.row.number + "kW"
+                  }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="全部显示" align="center">
+                <template #default="scope">
+                  <span style="margin-left: 10px">{{ scope.row.pos }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <div class="bottom">
+          <el-pagination
+            background
+            layout="prev,pager,next"
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
+      </div>
+    </div>
+    <div class="black_box" v-if="alert_pvFlag"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElCheckbox } from "element-plus";
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  reactive,
+  onUnmounted,
+  nextTick,
+  Ref,
+  toRef,
+  getCurrentInstance,
+  inject,
+} from "vue";
+
+import { ArrowDown } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+import { getColorFun } from "@/hooks/getColorFun/index";
+import { app_load, api_send, api_register } from "@/ue4Player/app";
+import threeDPie from "@/views/commonPage/3DPie.vue";
+import { id } from "element-plus/es/locale/index.mjs";
+import { ITEM_RENDER_EVT } from "element-plus/es/components/virtual-list/src/defaults.mjs";
+import source_Photovoltaic_echart from "./threeLine.vue";
+import source_factoryStation_echart from "./twoLine.vue";
+import load_echart from "./oneLine.vue";
+import storage_echart from "./oneLine.vue";
+import threeEchart from "./3Dechart.vue";
+import runListenPage from "./runListenPage.vue";
+
+import { statInfo_api } from "@/api/homePage/SoureceApi.ts";
+import { count } from "console";
+onMounted(() => {
+  getStatInfo();
+  // 定时获取接口数据
+  // setInterval(() => {
+  //   getStatInfo();
+  // }, 3000);
+  handeleTable();
+  send3D();
+});
+const send3D = () => {
+  //  显示城南位置
+  const list = {
+    location: "(X=117.327,Y=39.001,Z=44242.927)",
+    rotation: "Pitch=-83.545,Yaw=-91.394,Roll=0",
+  };
+  api_send("CameraMove", list, () => {
+    console.log("CameraMove");
+  });
+  // 显示城南边界线
+  const datadispaly = {
+    CityID: "12010",
+    status: "1", //0隐藏1显示
+  };
+  api_send("ShowCityEdge", datadispaly, () => {
+    console.log("ShowCityEdge显示城南边界线");
+  });
+  // 显示全部的变电站
+  const datadel = { type: "ALL", Voltage_Level: "0", region: "0", status: "1" };
+  api_send("SwitchStationstatus", datadel, () => {
+    console.log("SwitchStationstatus,显示全部的变电站");
+  });
+};
+// 源页面标识
+let sourceFlag = ref(true);
+// 荷页面标识
+let loadFlag = ref(true);
+// tabPage  页面默认显示资源总览
+let tabPageFlag = ref(1);
+
+const tabPage = reactive([
+  {
+    id: 1,
+    pageName: "资源汇聚",
+  },
+  {
+    id: 2,
+    pageName: "运行监视",
+  },
+]);
+const handleTabPage = (val: number) => {
+  tabPageFlag.value = val;
+
+  // 当前页面为不显示的时候
+  // hideLeft.value = false;
+  // hideRight.value = false;
+};
+
+// lengendDate
+let lengendDate = reactive([
+  {
+    id: 1,
+    lengendName: "源",
+    checkFlag: false,
+  },
+  {
+    id: 2,
+    lengendName: "网",
+    checkFlag: false,
+  },
+  {
+    id: 3,
+    lengendName: "荷",
+    checkFlag: false,
+  },
+  {
+    id: 4,
+    lengendName: "储",
+    checkFlag: false,
+  },
+]);
+// const handleLegend = (val: number) => {
+//   lengendFlag.value = val + 1;
+//   val = 0;
+// };
+// 右下角三维选中和取消勾选
+let handleSelectCheck = (datas: any) => {
+  // 让选中的项样式发生变化
+  datas.checkFlag = !datas.checkFlag;
+  // if (data.lengendName === "中压光伏" || data.lengendName === "低压光伏" || data.lengendName === "充电站" || data.lengendName === "储能站") {
+  //     // bottomconterListtest.includes(props.gettreeprovidecityname)
+  //     bottomconterListtest.forEach(item => {
+  //         if (item.name === props.gettreeprovidecityname) {
+  //             let _list = {
+  //                 type: data.value,
+  //                 status: data.checkFlag ? '2' : '0',//
+  //                 CityID: item.id,
+  //             };
+  //             api_send("showCityElement", _list, () => {
+  //                 console.log("showCityElement", "Switchstationstatus");
+  //             });
+  //         }
+  //     })
+  // } else {
+  //     let _list = {
+  //         type: "BD", //类型 BD:变电站 PD:配电站 KG:开关站
+  //         Voltage_Level: data.value, //电压等级:0:全电压等级 22:10KV  24:20kV 32:110kV 33:220kV 35:500kV
+  //         region: "315800", //区域id:城市ID(邮政编码)315000:宁波全市 315001:宁波市区(显示江北区、海曙区、镇海区边界) 315800:宁波北仑区 315100:宁波鄞州区 315500:宁波奉化区 315700:宁波象山县 //315600:宁波宁海县 315400:宁波余姚市315300:宁波
+  //         status: data.checkFlag ? '1' : '0',// 是否显示0:不显示1:显示
+  //     };
+  //     api_send("SwitchStationstatus", _list, () => {
+  //         console.log("SwitchStationstatus", "Switchstationstatus");
+  //     });
+  // }
+};
+// 左-源 -光伏
+interface lenCoutInfoItem {
+  length?: number;
+  count?: number;
+}
+interface lenCoutInfo {
+  [key: string]: lenCoutInfoItem;
+}
+let SourcePv_unit: Ref<lenCoutInfo | null> = ref(null); // 使用 ref 来创建一个响应式引用
+let unit10: Ref<lenCoutInfoItem | null> = ref({ length: 0, count: 0 }); //10kv光伏
+let unit35: Ref<lenCoutInfoItem | null> = ref({ length: 0, count: 0 }); //35kv光伏
+let unit380lowarr = reactive<any>([]); //380v一下光伏
+let unit380lowarrLength = ref(0); //380v一下光伏的长度
+let unit380lowarrCount = ref(0); //380v一下光伏的户数
+// 左-源-充电站
+interface InfoItem {
+  name?: string;
+  ratedS?: number | undefined;
+  length?: number | undefined;
+  count?: number;
+}
+interface Info {
+  [key: string]: InfoItem;
+}
+// let SourcePvstation: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
+let SourcePvstation: Ref<Info | null> = ref([
+  {
+    name: "**厂站",
+    ratedS: 0,
+  },
+  {
+    name: "**厂站",
+    ratedS: 0,
+  },
+]); // 使用 ref 来创建一个响应式引用
+
+// 左 -荷-充电桩
+let sumLoadrateds = ref<any>(0); //额定电压总功率
+let loadchargingPile: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
+let loadchargingPileratedS = ref<any>(0); //充电桩功率
+let loadchargingPilecount = ref<any>(0); //充电桩户数
+
+// 左-荷-空调
+let loadAirconditioner: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
+let loadAirconditionerratedS = ref<any>(0); //空调得功率
+let loadAirconditionercount = ref<any>(0); //空调得户数
+// 左-荷-微网
+// let loadMicrogrid: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
+let loadMicrogridrratedS = ref<any>(0); //空调得功率
+let loadMicrogridcount = ref<any>(0); //空调得户数
+
+// 右-储-用户侧
+let storedUserPart: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
+let storedUserPartAreaRatedS = ref<any>(0); //西小站得功率
+let storedUserPartAreaCount = ref<any>(0); //西小站得户数
+
+let storedUserPartuserRatedS = ref<any>(0); //用户侧得功率
+let storedUserPartuserCount = ref<any>(0); //用户侧得户数
+
+// 右 网 主配网
+//  主网
+let networkLine: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
+let networkLine110RatedS = ref<any>(0); //主网110得功率
+let networkLine110Count = ref<any>(0); //主网110得条数
+let networkLine35RatedS = ref<any>(0); //主网110功率
+let networkLine35Count = ref<any>(0); //主网110条数
+
+//  配网
+let networkFeer: Ref<Info | null> = ref(null); // 使用 ref 来创建一个响应式引用
+let networkFeer10RatedS = ref<any>(0); //配网10得功率
+let networkFeer10Count = ref<any>(0); //配网10得条数
+let networkFeer35RatedS = ref<any>(0); //配网35得功率
+let networkFeer35Count = ref<any>(0); //配网35得条数
+
+let networkFeer380RatedS = ref<any>(0); //配网380得功率
+let networkFeer380Count = ref<any>(0); //配网380得条数
+
+// getStatInfo接口数据
+const getStatInfo = async () => {
+  try {
+    let resPonse = await statInfo_api({
+      orgID: "8af8470a47aad8e20147aad92e400335",
+    });
+
+    nextTick(() => {
+      if (resPonse) {
+        // 成功获取到数据，进行后续处理
+        console.log("接口数据：", resPonse);
+        let statInfo: any = JSON.parse(JSON.stringify(resPonse.data?.data));
+        // SourcePvstation  光伏电站-------- 源 新能源厂站
+        if (statInfo.photoVoltaicStation === null) {
+          console.log("meishuyjumeishuju ");
+        }
+        let SourcePvstations = [];
+        SourcePvstations = statInfo.photoVoltaicStation as any;
+        SourcePvstation.value = [
+          // {
+          //   name: "**厂站",
+          //   ratedS: 0,
+          // },
+          // {
+          //   name: "**厂站",
+          //   ratedS: 0,
+          // },
+        ];
+        // 遍历photoVoltaicStation对象
+        for (let key in SourcePvstations) {
+          if (SourcePvstations.hasOwnProperty(key)) {
+            // 将每个区域的数据添加到stations数组中
+            SourcePvstation.value.push(SourcePvstations[key]);
+          }
+        }
+        // SourcePvstation  光伏电站--------
+
+        //储  storedUserPart----------   西小站  用户侧
+        let storedUserParts: any = [];
+        storedUserParts = statInfo.battery_unit as Info;
+        storedUserPartAreaRatedS.value = 0;
+        storedUserPartAreaCount.value = 0;
+        storedUserPartuserRatedS.value = 0;
+        storedUserPartuserCount.value = 0;
+        for (const key in storedUserParts) {
+          if (storedUserParts.hasOwnProperty(key)) {
+            const item = storedUserParts[key];
+            if (key === "area_109283") {
+              console.log(item.ratedS, "??kkkkkk?");
+
+              storedUserPartAreaRatedS.value = item.ratedS; //西小站储能功率
+              storedUserPartAreaCount.value = item.count; //西小站储能户数
+            } else if (key === "user_part") {
+              storedUserPartuserRatedS.value = item.ratedS; //西小站储能功率
+              storedUserPartuserCount.value = item.count; //西小站储能户数
+            }
+          }
+        }
+        //储 西小站  用户侧 storedUserPart----------
+
+        // SourcePv_unit  源  分布式光伏数据-----
+        let SourcePv_units: any = [];
+
+        SourcePv_units = statInfo.photoVoltaicUnit as any;
+        unit10.value = { length: 0, count: 0 };
+        unit35.value = { length: 0, count: 0 };
+        unit380lowarrLength.value = 0;
+        unit380lowarrCount.value = 0;
+        for (const key in SourcePv_units) {
+          if (SourcePv_units.hasOwnProperty(key)) {
+            const item = SourcePv_units[key];
+            if (key === "BV-AC00101") {
+              unit10.value = item; //10kv数据
+              // console.log(key,item,'10');
+            } else if (key === "BV-AC00351") {
+              unit35.value = item; //35kv数据
+            } else if (key === "BV-AC03802") {
+              unit380lowarr.push(item); //380v数据
+            } else if (key === "BV-AC02202") {
+              unit380lowarr.push(item); //220v数据
+            }
+            unit380lowarrLength.value =
+              unit380lowarr[0]?.ratedS + unit380lowarr[1]?.ratedS; //380v及其以下kw
+            unit380lowarrCount.value =
+              unit380lowarr[0]?.count + unit380lowarr[1]?.count; //380v及其以下户数
+          }
+        }
+        // SourcePv_unit  源  分布式光伏数据-----
+        //  荷 空调 air_conditioner-----------
+        let loadAirconditioners: any = [];
+        loadAirconditioners = statInfo.air_conditioner as Info;
+        for (const key in loadAirconditioners) {
+          if (loadAirconditioners.hasOwnProperty(key)) {
+            const item = loadAirconditioners[key];
+            if (key === "BV-AC02202") {
+              loadAirconditionerratedS.value = item.ratedS; //空调功率
+              loadAirconditionercount.value = item.count; //空调户数
+            }
+          }
+        }
+        //  荷 空调  air_conditioner-----------
+
+        // 网 主配网信息
+        // networkLine 主网 line-----
+        let networkLines: any = [];
+        networkLines = statInfo.line as Info;
+        for (const key in networkLines) {
+          if (networkLines.hasOwnProperty(key)) {
+            const item = networkLines[key];
+            if (key === "BV-AC01101") {
+              networkLine110RatedS.value = item.length; //主网110得功率
+              networkLine110Count.value = item.count; //主网110得条数
+            } else if (key === "BV-AC00351") {
+              networkLine35RatedS.value = item.length; //主网110功率
+              networkLine35Count.value = item.count; //主网110条数
+            }
+          }
+        }
+        // networkFeer 配网
+        let networkFeers: any = [];
+        networkFeers = statInfo.feeder as Info;
+        for (const key in networkFeers) {
+          if (networkFeers.hasOwnProperty(key)) {
+            const item = networkFeers[key];
+            if (key === "BV-AC00101") {
+              networkFeer10RatedS.value = item.length; //主网110得功率
+              networkFeer10Count.value = item.count; //主网110得条数
+            } else if (key === "BV-AC00351") {
+              networkFeer35RatedS.value = item.length; //主网110功率
+              networkFeer35Count.value = item.count; //主网110条数
+            } else if (key === "BV-AC03802") {
+              networkFeer380RatedS.value = item.length; //主网110功率
+              networkFeer380Count.value = item.count; //主网110条数
+            }
+          }
+        }
+
+        // 荷 loadchargingPile 充电桩-------
+        let loadchargingPiles: any = [];
+        loadchargingPiles = statInfo.charging_pile as Info;
+
+        //  荷 充电桩  功率
+        loadchargingPileratedS.value = Object.values(loadchargingPiles).reduce(
+          (sum, ite) => sum + ite.ratedS,
+          0
+        );
+        //  荷 充电桩  户数
+        loadchargingPilecount.value = Object.values(loadchargingPiles).reduce(
+          (sum, ite) => sum + ite.count,
+          0
+        );
+
+        //  荷 充电桩  户数
+        sumLoadrateds.value =
+          loadMicrogridrratedS.value +
+          loadAirconditionerratedS.value +
+          loadchargingPileratedS.value;
+        // 荷 loadchargingPile 充电桩-------
+
+        //荷  micro_grid  微网------
+        let micro_grids: any = [];
+        micro_grids = statInfo.micro_grid as Info;
+        console.log(micro_grids);
+        loadMicrogridrratedS.value = micro_grids?.ratedS || 0; //空调功率
+        loadMicrogridcount.value = micro_grids.count; //空调户数
+        //荷  micro_grid  微网------
+      } else {
+        // 获取数据失败，进行相应处理
+        console.log("无法获取接口数据");
+      }
+    });
+  } catch (error) {
+    // 处理错误
+    console.error("An error occurred in statInfo_api:", error);
+  }
+};
+// 资源总览
+// 荷
+let leftData = reactive({
+  PVGenerationData: [
+    {
+      name: "总发电量：",
+      value: "10728.8",
+      unit: "kWh",
+    },
+    {
+      name: "月发电量：",
+      value: "1629.3",
+      unit: "kWh",
+    },
+    {
+      name: "周发电量：",
+      value: "409.2",
+      unit: "kWh",
+    },
+    {
+      name: "日发电量：",
+      value: "62.5",
+      unit: "kWh",
+    },
+  ],
+  carbonEmissionData: [
+    {
+      name: "总碳排放：",
+      value: "34071.2",
+      unit: "kg",
+    },
+    {
+      name: "月碳排放：",
+      value: "5162.3",
+      unit: "kg",
+    },
+    {
+      name: "周碳排放：",
+      value: "1304.1",
+      unit: "kg",
+    },
+    {
+      name: "日碳排放：",
+      value: "183.5",
+      unit: "kg",
+    },
+  ],
+  threeDPieData: {
+    pieData: [
+      {
+        name: "可再生能源", //名称
+        value: 78, //值
+        itemStyle: {
+          color: "#6BFF82", //半透明
+        },
+      },
+      {
+        name: "其他能源",
+        value: 22,
+        itemStyle: {
+          color: "#00AAF3",
+        },
+      },
+    ],
+    total: 100,
+    center: 0,
+    legend: {
+      orient: "horizontal",
+      right: "center",
+      top: "2%",
+      itemGap: 30,
+    },
+    grid3D: {
+      viewControl: {
+        distance: 500,
+        alpha: 35,
+      },
+    },
+    getHeight3D: 60,
+  },
+});
+// 网
+// 网盒子得标识
+let networkContentFlag = ref(true);
+let networkFlag = ref("1");
+const changeNetWorkTab = (val: string) => {
+  networkFlag.value = val;
+};
+// 运行监测
+// 源运行检测的标识
+let run_sourceContentFlag = ref(true);
+// 荷运行检测标识
+let run_loadContentFlag = ref(true);
+// 网运行检测标识
+let runNetworkFlag = ref(true);
+// 储能运行检测标识
+let runStorageFlag = ref(true);
+// 源
+// 切换tabDate
+let sourcetabDateFlag = ref(1);
+let sourceEchart = reactive([
+  {
+    id: 1,
+    name: "光伏",
+  },
+  {
+    id: 2,
+    name: "厂站",
+  },
+]);
+const sourcehandleTabDate = (val: any) => {
+  sourcetabDateFlag.value = val.id;
+};
+// 荷
+let loadtabDateFlag = ref(1);
+let loadEchart = reactive([
+  {
+    id: 1,
+    name: "充电桩",
+  },
+  {
+    id: 2,
+    name: "空调",
+  },
+  {
+    id: 3,
+    name: "区域总负荷",
+  },
+]);
+const handleloadTabDate = (val: any) => {
+  loadtabDateFlag.value = val.id;
+};
+// 左
+// 右
+// 储
+// 储能盒子得标识
+let stroedContentFlag = ref(true);
+let storagetabDateFlag = ref(1);
+let storageEchart = reactive([
+  {
+    id: 1,
+    name: "充电",
+  },
+  {
+    id: 2,
+    name: "放电",
+  },
+]);
+const handlestorageTabDate = (val: any) => {
+  storagetabDateFlag.value = val.id;
+};
+// 充放点量时间选择器
+let selectDateObj = ref(null);
+// 向线型图传参数
+
+// 中1
+// 执行明细
+// 表格
+let alert_pvFlag = ref(false);
+interface TableDate {
+  name: string;
+  number: string;
+  pos: string;
+}
+let tableData = reactive<TableDate[]>([
+  {
+    name: "**光伏",
+    number: "9999",
+    pos: "定位",
+  },
+  {
+    name: "**光伏",
+    number: "9999",
+    pos: "定位",
+  },
+  {
+    name: "**光伏",
+    number: "9999",
+    pos: "定位",
+  },
+  {
+    name: "**光伏",
+    number: "9999",
+    pos: "定位",
+  },
+  {
+    name: "**光伏",
+    number: "9999",
+    pos: "定位",
+  },
+  {
+    name: "**光伏",
+    number: "9999",
+    pos: "定位",
+  },
+  {
+    name: "**光伏",
+    number: "9999",
+    pos: "定位",
+  },
+]);
+const handeleTable = () => {
+  // tableHeaderColor ({row, column, rowIndex, columnIndex}) {
+  // 		return 'text-align: center;'
+  // 	}
+};
+
+// 分页
+let currentPage = ref<number>(1);
+let pageSize = ref<number>(6); //每页显示的个数
+let total = ref<number>(40);
+
+const handleSizeChange = (size: number) => {
+  // console.log(`${size} items per page`);
+  pageSize.value = size;
+};
+const handleCurrentChange = (page: number) => {
+  currentPage.value = page;
+};
+//选择器
+interface Infokey3 {
+  id: string;
+  label: string;
+}
+const infovalue = ref("");
+let infokeys = reactive<Infokey3[]>([
+  {
+    id: "35kV",
+    label: "35kV",
+  },
+  {
+    id: "10kV",
+    label: "10kV",
+  },
+  {
+    id: "380V及以下",
+    label: "380V及以下",
+  },
+]);
+
+const hideLeft = ref<boolean>(true); //默认页面显示
+const hideRight = ref<boolean>(true); //默认页面显示  右边
+// 组件卸载调用
+onUnmounted(() => {
+  hideLeft.value = false;
+  hideRight.value = false;
+});
+
+// 跳转三维
+const handleThree = (val) => {
+  const list = {
+    location: "(X=18705617.163,Y=1826842.166,Z=4299675.505)",
+    rotation: "Pitch=-89.9,Yaw=-90.542,Roll=0",
+  };
+  api_send("CameraMove", list, () => {
+    console.log("CameraMove");
+  });
+  let _list = {
+    CityID: val,
+    status: "1",
+  };
+  api_send("ShowCityEdge", _list, () => {
+    console.log("ShowCityEdge");
+  });
+};
+
+// 根据不同的屏幕宽度换算字体大小
+const transformFontSize = (fontsize: number) => {
+  // 获取屏幕宽度
+  const width = window.screen.width;
+  const height = window.screen.height;
+  let ratio: any = 0;
+  if (width > 3000) {
+    ratio = width / 4240;
+  } else {
+    ratio = width / 2220;
+  }
+  // 取下整
+  return parseInt(fontsize * ratio);
+};
+// 动态获取宽高
+let ctwh = ref();
+let ctht = ref();
+const updateCtw = () => {
+  if (window.screen.width > 1900) {
+    ctwh.value = Number(window.screen.width);
+    ctht.value = Number(window.screen.height);
+  } else {
+    ctwh.value = Number(1920);
+    ctht.value = Number(1080);
+  }
+};
+// 使用watch来监听$route的变化
+watch(
+  () => window.location.pathname,
+  (newPath) => {
+    updateCtw();
+  },
+  { immediate: true }
+);
+const styleVar = computed(() => {
+  return {
+    "--box-width": ctwh.value + "px",
+    "--box-height": ctht.value + "px",
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@function changeWidth($width) {
+  @return calc(var(--box-width) * ($width / 3840));
+}
+
+// 根据盒子高度百分比计算
+@function changeHeight($height) {
+  @return calc(var(--box-height) * ($height / 2160));
+}
+
+// 黄色阴影
+.yshadow {
+  text-shadow: 0px 0px 0.625rem #ffca74;
+}
+
+.yshadow1 {
+  text-shadow: 0px 0px 0.325rem #ffca74;
+}
+.fs20 {
+  font-size: changeHeight(20);
+}
+.fs25 {
+  font-size: changeHeight(25);
+}
+.fs35 {
+  font-size: changeHeight(35);
+}
+.fs30 {
+  font-size: changeHeight(30);
+}
+.fs40 {
+  font-size: changeHeight(40);
+}
+* {
+  box-sizing: border-box;
+}
+.bshadow {
+  /* 充电桩 */
+  font-weight: 600;
+  font-size: changeHeight(45);
+
+  color: #ffffff;
+  text-shadow: 0px 0px 10px #00f0ff;
+}
+// 关闭按钮
+.closebtn {
+  position: absolute;
+  right: changeHeight(16.98);
+  top: changeHeight(25);
+  width: changeHeight(26.51);
+  height: changeHeight(26.51);
+  background-image: url("@/assets/images/common/closebtn.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  z-index: 6;
+  cursor: pointer;
+}
+.jianbian {
+  background: linear-gradient(to bottom, #ffffff, #6ffbf7);
+  /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+
+  -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
+
+  -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+}
+// danwei
+.danwei {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  .v1 {
+    display: flex;
+    font-size: changeHeight(35);
+    font-weight: 600;
+    // font-size: changeHeight(35);
+
+    .rnumber {
+      font-size: changeHeight(30);
+      color: #86fffc;
+      font-weight: 400;
+
+      line-height: changeHeight(50);
+    }
+  }
+}
+.infotitle_short {
+  top: 6%;
+  left: 4%;
+  position: absolute;
+  display: flex;
+  padding-left: changeWidth(30);
+  .yuan {
+    width: changeHeight(38);
+    height: changeHeight(38);
+
+    background: url("@/assets/images/common/title_yuanicon.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  // background: url("@/assets/images/common/common_title.png") no-repeat;
+  // background-size: 100% 100%;
+
+  // background-color: red;
+  span {
+    margin-left: changeHeight(10);
+  }
+  .line {
+    margin-top: changeHeight(5);
+    width: changeHeight(580);
+    height: changeHeight(20);
+    background: url("@/assets/images/common/title_lineicon.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+// 公共盒子
+
+.common_box {
+  display: flex;
+  flex-direction: column;
+  .title {
+    height: changeHeight(112.72);
+    background: url("@/assets/images/mainPage/common_titlebg.png") no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: changeHeight(21);
+    display: flex;
+    align-items: center;
+    padding-left: changeHeight(50);
+    img {
+      height: changeHeight(77);
+      width: changeHeight(77);
+    }
+    span {
+      font-weight: 500;
+      margin-left: changeHeight(15);
+      font-size: changeHeight(60);
+      line-height: changeHeight(71);
+      color: #ffffff;
+      text-shadow: 0px 0px 4px #52aff3;
+    }
+  }
+  .content {
+    flex: 1;
+    background: url("@/assets/images/mainPage/common_contentbg.png") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+
+    .title_info {
+      display: flex;
+      align-items: center;
+      margin-left: changeWidth(51);
+      width: changeHeight(744.74);
+      height: changeHeight(26);
+      width: changeWidth(1069.5);
+      height: changeHeight(50.11);
+      font-size: changeHeight(40);
+      padding-left: changeWidth(77);
+      background: url("@/assets/images/mainPage/bg_title.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .content_info {
+      flex: 1;
+    }
+    .margin1 {
+      margin-top: changeHeight(33);
+    }
+    .margin2 {
+      margin-top: changeHeight(28);
+    }
+  }
+}
+.homepage_container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  margin-top: changeHeight(17);
+  font-family: "PingFang SC";
+  font-style: normal;
+  font-weight: 400;
+  color: #ffffff;
+
+  .animated {
+    -webkit-animation-fill-mode: initial;
+    animation-fill-mode: initial;
+  }
+  .content_center {
+    z-index: 5;
+    position: absolute;
+    top: 12%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .tab {
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      width: changeWidth(820);
+      .tabPage {
+        font-size: changeHeight(45);
+        width: changeWidth(401.09);
+        color: #259fc5;
+        height: changeHeight(82.5);
+        line-height: changeHeight(82.5);
+        background: url("@/assets/images/mainPage/tab_default.png") no-repeat;
+        background-size: 100% 100%;
+      }
+      .tabPage_active {
+        background: url("@/assets/images/mainPage/tab_active.png") no-repeat;
+        background-size: 100% 100%;
+        color: #ffffff;
+      }
+    }
+  }
+  .content_left {
+    width: changeWidth(1146);
+    position: absolute;
+    left: 0;
+    // margin-left: 1%;
+    .left_box {
+      position: relative;
+      .left_demo {
+        position: absolute;
+      }
+    }
+    z-index: 5;
+    .sourceContent {
+      position: relative;
+      height: changeHeight(807.84);
+
+      // 左 箭头收
+      .showPanel {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        .icon_panel_left_off {
+          position: absolute;
+          background: url("@/assets/images/btnType/icon_panel_right.png")
+            no-repeat;
+          background-size: 100% 100%;
+          width: changeWidth(42.28);
+          height: changeHeight(52.02);
+          left: 0;
+          z-index: 4;
+          cursor: pointer;
+        }
+      }
+    }
+    .source {
+      position: relative;
+
+      height: changeHeight(807.84);
+      .icon_panel_left_on {
+        position: absolute;
+        background: url("@/assets/images/btnType/icon_panel_left.png") no-repeat;
+        background-size: 100% 100%;
+        width: changeWidth(42.28);
+        height: changeHeight(52.02);
+        top: 50%;
+        right: 0;
+        z-index: 4;
+        cursor: pointer;
+      }
+      .content_info {
+        display: flex;
+        flex-direction: column;
+        width: 89%;
+        margin-left: changeWidth(59);
+        .name {
+          display: flex;
+          margin-bottom: changeHeight(20);
+          font-size: changeHeight(45);
+          justify-content: flex-end;
+          /* 新能源厂站 */
+          font-weight: 600;
+          color: #ffffff;
+          text-shadow: 0px 0px 10px #00f0ff;
+          height: changeHeight(40);
+
+          .cen {
+            width: 80%;
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            position: relative;
+            .namebg {
+              position: absolute;
+              top: changeHeight(0.5);
+              box-sizing: content-box;
+              display: flex;
+              background: url("@/assets/images/btnType/fontbg.png") no-repeat;
+              background-size: 100% 100%;
+              padding-left: changeWidth(82);
+              padding-right: changeWidth(82);
+              align-items: flex-end;
+              padding-bottom: changeHeight(42);
+              line-height: changeHeight(38);
+            }
+          }
+        }
+        .name_box {
+          display: flex;
+
+          // align-items: center;
+          img {
+            width: changeWidth(228.25);
+            height: changeHeight(201.6);
+          }
+          .photovoltaic,
+          .new_energy {
+            margin-left: changeWidth(49);
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            justify-content: space-evenly;
+            .rowbox {
+              display: flex;
+              height: changeHeight(60);
+              .photovoltaic_key1 {
+                width: changeWidth(309.89);
+                justify-content: space-between;
+                display: flex;
+                align-items: center;
+                .r {
+                  font-size: changeHeight(35);
+                  color: #6ffbf7;
+                }
+
+                img {
+                  width: changeWidth(39.56);
+                  height: changeHeight(30.45);
+                }
+                span {
+                  /* 35kV */
+
+                  font-weight: 600;
+
+                  color: #6ffbf7;
+                }
+              }
+              .long {
+                width: changeWidth(559.89);
+              }
+
+              .photovoltaic_value1 {
+                margin-left: changeWidth(83.5);
+                display: flex;
+                flex: 1;
+                justify-content: space-between;
+                line-height: changeHeight(80);
+                .kw,
+                .hu {
+                  font-size: changeHeight(35);
+                  font-weight: 600;
+                  span {
+                    font-size: changeHeight(30);
+                    color: #86fffc;
+                    font-weight: 400;
+                  }
+                }
+                // span {
+                //   font-size: changeHeight(25);
+                //   color: #6ffbf7;
+                // }
+              }
+              .short {
+                margin-left: 2%;
+              }
+            }
+          }
+        }
+      }
+    }
+    .loadContent {
+      margin-top: changeHeight(77.75);
+
+      height: changeHeight(1014.74);
+      position: relative;
+      // 左 箭头收
+      .showPanel {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        .icon_panel_left_off {
+          position: absolute;
+          background: url("@/assets/images/btnType/icon_panel_right.png")
+            no-repeat;
+          background-size: 100% 100%;
+          width: changeWidth(42.28);
+          height: changeHeight(52.02);
+          left: 0;
+          z-index: 4;
+          cursor: pointer;
+        }
+      }
+    }
+    .load {
+      position: relative;
+
+      margin-top: changeHeight(77.75);
+
+      height: changeHeight(1014.74);
+
+      .icon_panel_left_on {
+        position: absolute;
+        background: url("@/assets/images/btnType/icon_panel_left.png") no-repeat;
+        background-size: 100% 100%;
+        width: changeWidth(42.28);
+        height: changeHeight(52.02);
+        top: 50%;
+        right: 0;
+        z-index: 4;
+        cursor: pointer;
+      }
+      .content_info {
+        display: flex;
+        flex-direction: column;
+        width: 80%;
+        margin-left: 10%;
+
+        .total_load {
+          height: changeHeight(263);
+          // background-color: pink;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .total_load_key {
+            width: changeWidth(455.82);
+            height: changeHeight(166.67);
+            background: url("@/assets/images/mainPage/icon2_kwbg.png") no-repeat;
+            background-size: 100% 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding-left: changeWidth(90);
+            .area_kw {
+              font-size: changeHeight(50);
+
+              font-weight: 600;
+
+              color: #ffffff;
+              display: flex;
+
+              height: changeHeight(75);
+              text-shadow: 0px 0px 10px rgba(65, 171, 168, 0.6);
+              .r {
+                font-size: changeHeight(40);
+                color: #86fffc;
+                font-weight: 400;
+                line-height: changeHeight(78);
+              }
+            }
+            p {
+              display: flex;
+              font-size: changeHeight(30);
+              /* 文字 */
+
+              font-weight: 400;
+
+              color: #cccccc;
+
+              opacity: 0.8;
+            }
+          }
+          .total_load_3dEchart {
+            box-sizing: border-box;
+            // width: changeHeight(236.97);
+            // height: changeHeight(135.41);
+
+            width: changeWidth(506.97);
+            height: changeHeight(325.41);
+            display: flex;
+            margin-bottom: changeHeight(80);
+            padding-left: changeWidth(120);
+            // border: 1px solid red;
+            position: relative;
+            .title_load {
+              position: absolute;
+              top: changeHeight(160);
+              right: changeWidth(75);
+              font-weight: 600;
+              z-index: 4;
+            }
+            .echarts {
+              position: absolute;
+              left: changeHeight(-100);
+              top: changeHeight(-20);
+              width: changeWidth(506.97);
+              height: changeHeight(325.41);
+            }
+          }
+        }
+        .list_info {
+          flex: 1;
+          padding-right: 10%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+          .rowlist {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+
+            align-items: center;
+            img {
+              width: changeWidth(170.97);
+              height: changeHeight(139.38);
+            }
+            .rbox {
+              width: 65%;
+              height: 100%;
+
+              // padding: 0 changeHeight(10);
+
+              display: flex;
+              flex-direction: column;
+              .key {
+                flex: 1;
+                position: relative;
+                display: flex;
+                justify-content: center;
+                .namebg {
+                  position: absolute;
+                  top: changeHeight(0.5);
+                  box-sizing: content-box;
+                  display: flex;
+                  background: url("@/assets/images/btnType/fontbg.png")
+                    no-repeat;
+                  background-size: 100% 100%;
+                  padding-left: changeWidth(82);
+                  padding-right: changeWidth(82);
+                  align-items: flex-end;
+                  padding-bottom: changeHeight(42);
+                  line-height: changeHeight(38);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .content_right {
+    position: absolute;
+    right: 0;
+    // margin-right: 1%;
+    z-index: 5;
+    width: changeWidth(1146.18);
+    display: flex;
+    flex-direction: column;
+    .network {
+      position: relative;
+      height: changeHeight(1010.86);
+      .icon_panel_left_on {
+        position: absolute;
+        background: url("@/assets/images/btnType/icon_panel_right.png")
+          no-repeat;
+        background-size: 100% 100%;
+        width: changeWidth(42.28);
+        height: changeHeight(52.02);
+        top: 50%;
+        left: 0;
+        z-index: 4;
+        cursor: pointer;
+      }
+      .network_box {
+        display: flex;
+        padding-left: changeWidth(58);
+
+        .tab_newwork {
+          margin-bottom: changeHeight(30);
+          cursor: pointer;
+          margin-left: changeWidth(40);
+          margin-top: changeHeight(32);
+          height: changeHeight(75.54);
+          line-height: changeHeight(75.54);
+          width: changeWidth(569.09);
+          font-size: changeHeight(35);
+          background: url("@/assets/images/mainPage/icon3_tabbg_default.png")
+            no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+
+          .tab_default {
+            color: #4866a6;
+            width: changeWidth(300.21);
+          }
+          .tab_active {
+            height: 110%;
+            width: changeWidth(300.21);
+
+            background: url("@/assets/images/mainPage/icon3_tabbg_active.png")
+              no-repeat;
+
+            background-size: 100% 100%;
+            color: #ffffff;
+          }
+          .tab_padding {
+            // margin-left: changeWidth(5);
+          }
+        }
+        // .box_network{
+        //   height: 100%;
+        //   width: 100%;
+        // }
+        .content_info {
+          // border: 1px saddlebrown solid;
+          display: flex;
+
+          height: changeHeight(319);
+          flex-direction: column;
+          width: 100%;
+          // padding-left: changeHeight(20);
+          .name {
+            display: flex;
+
+            font-size: changeHeight(45);
+            justify-content: flex-end;
+            /* 新能源厂站 */
+            font-weight: 600;
+            color: #ffffff;
+            text-shadow: 0px 0px 10px #00f0ff;
+            height: changeHeight(80);
+
+            .cen {
+              width: 92%;
+              display: flex;
+              justify-content: center;
+              align-items: flex-end;
+              // border: 1px solid red;
+              position: relative;
+              .namebg {
+                position: absolute;
+                top: changeHeight(0.5);
+                box-sizing: content-box;
+                display: flex;
+                background: url("@/assets/images/btnType/fontbg.png") no-repeat;
+                background-size: 100% 100%;
+                padding-left: changeWidth(82);
+                padding-right: changeWidth(82);
+                align-items: flex-end;
+                padding-bottom: changeHeight(42);
+                line-height: changeHeight(38);
+              }
+            }
+          }
+          .name_box {
+            display: flex;
+
+            // align-items: center;
+            img {
+              width: changeWidth(227.77);
+              height: changeHeight(193.42);
+            }
+            .photovoltaic,
+            .new_energy {
+              margin-left: changeWidth(20);
+              display: flex;
+              flex-direction: column;
+              flex: 1;
+              justify-content: space-evenly;
+              .rowbox {
+                display: flex;
+
+                height: changeHeight(60);
+                line-height: changeHeight(60);
+                .photovoltaic_key1 {
+                  width: changeWidth(309.23);
+
+                  justify-content: space-between;
+                  display: flex;
+                  align-items: center;
+                  .r {
+                    font-size: changeHeight(35);
+
+                    color: #6ffbf7;
+                    span {
+                      /* 35kV */
+
+                      font-weight: 600;
+
+                      color: #6ffbf7;
+                    }
+                  }
+
+                  img {
+                    width: changeWidth(39.47);
+                    height: changeHeight(30.39);
+                  }
+                }
+                .photovoltaic_value1 {
+                  // background-color: red;
+                  // margin-left: changeHeight(43.5);
+                  // border: 1px solid red;
+                  margin-left: changeWidth(25.5);
+
+                  display: flex;
+                  flex: 1;
+                  justify-content: space-between;
+                  line-height: changeHeight(60);
+                  font-size: changeHeight(35);
+                  span {
+                    font-size: changeHeight(30);
+                    font-weight: 400;
+                    color: #6ffbf7;
+                  }
+                  .kw {
+                    // background-color: #00f0ff;
+                    flex: 3;
+                    text-align: left;
+                  }
+                  .hu {
+                    flex: 2;
+                    text-align: left;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .xixiao {
+          margin-top: 10%;
+        }
+      }
+    }
+    .networkContent {
+      height: changeHeight(1010.86);
+
+      position: relative;
+      // 左 箭头收
+      .showPanel {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        .icon_panel_left_off {
+          position: absolute;
+          background: url("@/assets/images/btnType/icon_panel_left.png")
+            no-repeat;
+          background-size: 100% 100%;
+          width: changeWidth(42.28);
+          height: changeHeight(52.02);
+          right: 0;
+          z-index: 4;
+          cursor: pointer;
+        }
+      }
+    }
+    .storage {
+      margin-top: changeHeight(77.4);
+      height: changeWidth(812.06);
+      position: relative;
+      .icon_panel_left_on {
+        position: absolute;
+        background: url("@/assets/images/btnType/icon_panel_right.png")
+          no-repeat;
+        background-size: 100% 100%;
+        width: changeWidth(42.28);
+        height: changeHeight(52.02);
+        top: 50%;
+        left: 0;
+        z-index: 4;
+        cursor: pointer;
+      }
+      .content_info {
+        // background-color: red;
+        display: flex;
+        // background-color: red;
+        flex-direction: column;
+        width: 70%;
+        justify-content: space-evenly;
+        margin-left: changeWidth(60);
+        .rowlist {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+
+          align-items: center;
+          img {
+            width: changeWidth(227.77);
+            // height: changeHeight(130.17);
+          }
+          .rbox {
+            width: 65%;
+            height: 100%;
+            // padding: 0 changeHeight(10);
+
+            display: flex;
+            flex-direction: column;
+            .key {
+              flex: 1;
+              // border: 1px solid red;
+              position: relative;
+              display: flex;
+              justify-content: center;
+              .namebg {
+                position: absolute;
+                top: changeHeight(0.5);
+                box-sizing: content-box;
+                display: flex;
+                background: url("@/assets/images/btnType/fontbg.png") no-repeat;
+                background-size: 100% 100%;
+                padding-left: changeWidth(82);
+                padding-right: changeWidth(82);
+                align-items: flex-end;
+                padding-bottom: changeHeight(42);
+                line-height: changeHeight(38);
+              }
+            }
+          }
+        }
+      }
+    }
+    .storageContent {
+      margin-top: changeHeight(77.4);
+      height: changeWidth(812.06);
+      position: relative;
+      // 左 箭头收
+      .showPanel {
+        position: absolute;
+        right: 0;
+        top: 55%;
+        .icon_panel_left_off {
+          position: absolute;
+          background: url("@/assets/images/btnType/icon_panel_left.png")
+            no-repeat;
+          background-size: 100% 100%;
+          width: changeWidth(42.28);
+          height: changeHeight(52.02);
+          right: 0;
+          z-index: 4;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .legend_cus {
+    position: absolute;
+    z-index: 5;
+    left: changeWidth(1170);
+    bottom: changeHeight(0);
+    //left: 38%;
+    // transform: translate(-50%, -50%);
+    bottom: 0;
+    height: auto;
+    width: changeHeight(369.76);
+    height: changeHeight(496.39);
+    // padding: changeHeight(25) changeHeight(5) changeHeight(0) changeHeight(10);
+    background: url("@/assets/images/legend/legend_bg.png") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    //  justify-content: space-evenly;
+    .name {
+      /* 地图显示元素 */
+
+      font-weight: 400;
+      font-size: changeHeight(35);
+      /* or 140% */
+      color: #6ffbf7;
+      text-shadow: 0px 0px 5px #00c2ff;
+
+      writing-mode: vertical-lr;
+      text-orientation: upright;
+      letter-spacing: changeHeight(12);
+      margin-left: 5%;
+    }
+    .legendlist {
+      margin-left: 8%;
+
+      width: changeHeight(150);
+      height: 90%;
+
+      justify-content: space-evenly;
+      display: flex;
+      flex-direction: column;
+      // align-items: space-evenly;
+      .legendRow {
+        cursor: pointer;
+        display: flex;
+
+        .legend_l {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: space-evenly;
+          font-size: changeHeight(50);
+          color: #ffffff;
+        }
+        .selectbox {
+          width: changeHeight(24);
+          height: changeHeight(24);
+        }
+        .select_default {
+          background-color: #52aff3;
+        }
+        .select_active {
+          background-color: #fcff78;
+        }
+        :v-deep(.el-checkbox__inner) {
+          display: none !important;
+
+          // margin-top: changeHeight(40);
+        }
+      }
+    }
+  }
+
+  // 运行检测
+  .runLisenPage_box {
+    // border: 1px solid red;
+    // height: 100%;
+    // width: 100%;
+  }
+
+  .content_center_alert {
+    z-index: 1001;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .run_detail {
+      box-sizing: border-box;
+      width: changeWidth(1182.56);
+      height: changeHeight(1072.51);
+      background: url("@/assets/images/osPage/run_detail_bg.png") no-repeat;
+      background-size: 100% 100%;
+      padding-top: 1%;
+      padding-left: changeHeight(27);
+      .tip {
+        height: 7%;
+        display: flex;
+        align-items: center;
+
+        img {
+          height: changeHeight(45);
+          margin-right: changeHeight(14);
+        }
+
+        /* 精品可视化素材店 */
+
+        font-weight: 600;
+        font-size: changeHeight(35);
+      }
+      .title {
+        height: changeHeight(157);
+        display: flex;
+        align-items: center;
+        .titlebg {
+          width: changeHeight(1118.79);
+          height: changeHeight(72.6);
+          background: url("@/assets/images/osPage/run_detail_titlebg.png")
+            no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          position: relative;
+          span {
+            margin-left: changeHeight(30);
+            font-weight: 400;
+          }
+          :deep(.select_box) {
+            position: absolute;
+
+            // top: 15%;
+            right: 2%;
+
+            .el-select {
+              width: changeHeight(260);
+            }
+
+            // 背景白色去除
+            .el-select__wrapper {
+              background-color: transparent !important;
+              height: changeHeight(60);
+              line-height: changeHeight(60);
+            }
+            // 字体颜色
+            .el-select__placeholder {
+              color: #6ffbf7 !important;
+              // border: 1px solid red;
+              font-size: changeHeight(35);
+            }
+            // 去除边框
+            .el-select__wrapper.is-focused,
+            .el-select__wrapper.is-hovering:not(.is-focused),
+            .el-select__wrapper .el-tooltip__trigger,
+            .el-select__wrapper {
+              box-shadow: none !important;
+            }
+          }
+        }
+      }
+      .content {
+        height: 65%;
+        margin-top: 1%;
+
+        :deep(.table_box) {
+          width: changeHeight(1104);
+          height: changeHeight(635);
+          font-size: changeHeight(40) !important;
+          // 表格样式
+          .el-table,
+          tr,
+          th,
+          td {
+            background-color: transparent !important;
+          }
+          .el-table__empty-text {
+            font-size: changeHeight(35) !important;
+          }
+          .el-table__body-wrapper {
+            color: #ffffff;
+          }
+
+          // 设置header的字体和高度
+          .el-table__header-wrapper {
+            .cell {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: changeHeight(40);
+              font-weight: 400;
+              height: changeHeight(68);
+              line-height: changeHeight(68);
+            }
+          }
+
+          // 设置行的字体和高度
+          .el-table__body-wrapper {
+            td {
+              // border-top: 1px solid rgba(255, 255, 255, 0.5);
+              // border-bottom: none;
+            }
+            //  控制每行的高度
+            .cell {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: changeHeight(75);
+              line-height: changeHeight(30);
+              font-size: changeHeight(35);
+              // font-weight: 400;
+            }
+          }
+
+          // el-table出现小白线 伪类
+          .el-table__inner-wrapper:before {
+            height: 0;
+          }
+
+          // 设置第一列单独样式
+          .el-table td:nth-child(1) {
+            color: #6ffbf7;
+            span {
+              font-size: changeHeight(40) !important;
+            }
+          }
+
+          // 设置第2列的字体大小
+          .el-table td:nth-child(2) {
+            span {
+              font-size: changeHeight(45) !important;
+            }
+          }
+          // 设置第3列单独样式
+          .el-table td:nth-child(3) {
+            color: #fcff81;
+
+            span {
+              height: changeHeight(52.57) !important;
+              line-height: changeHeight(52.57) !important;
+              width: changeHeight(138.54) !important;
+              background: url("@/assets/images/btnType/send_btn.png") no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+          // 去除表格得所有边框
+          .el-table thead tr > th {
+            width: 90% !important;
+            background-color: rgba(0, 100, 156, 0.8) !important;
+            border: 0px 0px 10px #50ffff !important;
+            color: #fff;
+          }
+          // 表头的第三个元素的颜色修改
+          .el-table thead tr th:nth-child(3) {
+            color: #86fffc !important;
+          }
+          // 更改表格每行背景颜色
+          .el-table tbody tr > td {
+            // background-color: rgb(26,28,119);
+            color: #fff;
+            border: transparent !important;
+          }
+          // 鼠标滑过每行的颜色
+          .el-table--enable-row-hover .el-table__body tr:hover > td {
+            background-color: rgba(145, 245, 255, 0.1) !important;
+          }
+          // 去除表格上边框
+          .el-table th.el-table__cell.is-leaf {
+            border: transparent !important;
+          }
+          //  去除表格下边框
+          .el-table::before,
+          .el-table--group::after,
+          .el-table--border::after {
+            background-color: unset !important;
+            border: transparent !important;
+          }
+
+          .el-table {
+            border: transparent !important;
+
+            background: linear-gradient(
+              180deg,
+              #01233c 0%,
+              rgba(8, 150, 255, 0.42) 100%
+            );
+          }
+        }
+      }
+
+      // 分页样式
+      :deep(.bottom) {
+        // border: 1px solid red;
+        margin-right: changeHeight(27);
+        height: 8%;
+        display: flex;
+        justify-content: center;
+        // align-items: flex-start;
+        // 分页
+        .el-pagination {
+          .el-pagination__total {
+            border: 1px solid #fff;
+            border-radius: changeHeight(4);
+            padding: changeHeight(5) changeHeight(10);
+            color: rgba(255, 255, 255, 0.6);
+          }
+
+          .btn-prev,
+          .btn-next,
+          .el-pager li {
+            height: changeHeight(52);
+            width: changeHeight(52);
+            font-size: changeHeight(30);
+            background-color: transparent;
+            color: rgba(87, 223, 242, 0.6);
+            border: 1px solid #57dff2;
+            border-radius: changeHeight(4);
+            margin: 0 changeHeight(5);
+          }
+
+          .el-pager {
+            .is-active {
+              color: #6ffbf7;
+            }
+          }
+
+          .el-pagination__sizes {
+            margin-left: changeHeight(15);
+
+            .el-input {
+              width: changeHeight(100);
+              border: 1px solid #fff;
+              border-radius: changeHeight(4);
+
+              .el-input__wrapper {
+                background-color: transparent;
+                box-shadow: none !important;
+
+                .el-input__inner {
+                  color: rgba(255, 255, 255, 0.6);
+                }
+              }
+            }
+          }
+
+          .el-pagination__jump {
+            .el-input {
+              border: 1px solid #fff;
+              border-radius: changeHeight(4);
+
+              .el-input__wrapper {
+                box-shadow: none;
+                background-color: transparent;
+
+                .el-input__inner {
+                  color: rgba(255, 255, 255, 0.6);
+                }
+              }
+            }
+
+            span {
+              color: rgba(255, 255, 255, 0.6);
+            }
+          }
+        }
+      }
+    }
+    .area_load {
+      width: changeHeight(1156.86);
+      height: changeHeight(620.62);
+      box-sizing: border-box;
+      background: url("@/assets/images/osPage/area_load_bg.png") no-repeat;
+      background-size: 100% 100%;
+      padding-top: 1%;
+      padding-left: changeHeight(27);
+      .tip {
+        height: 7%;
+        display: flex;
+        align-items: center;
+
+        img {
+          height: changeHeight(32.46);
+          margin-right: changeHeight(14);
+        }
+
+        /* 精品可视化素材店 */
+
+        font-weight: 600;
+        font-size: changeHeight(35);
+      }
+      .title {
+        height: changeHeight(105.88);
+        display: flex;
+        align-items: center;
+        .titlebg {
+          width: changeHeight(842.04);
+          height: changeHeight(57.23);
+          background: url("@/assets/images/osPage/run_detail_titlebg.png")
+            no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          position: relative;
+          span {
+            margin-left: changeHeight(24);
+            font-weight: 400;
+          }
+          // 下拉菜单
+          :deep(.selectbox) {
+            position: absolute;
+            .example-showcase .el-dropdown-link {
+              cursor: pointer;
+              color: red !important;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+      }
+      .content {
+        height: 75%;
+        display: flex;
+
+        .left,
+        .right {
+          flex: 1;
+          .number {
+            height: changeHeight(50);
+            display: flex;
+            justify-content: center;
+          }
+          .rate {
+            display: flex;
+            align-items: center;
+
+            .box {
+              display: flex;
+              align-items: center;
+
+              .yuan {
+                background: #50ffff;
+                width: changeHeight(8);
+                height: changeHeight(8);
+                border-radius: changeHeight(8);
+              }
+              .key {
+                font-size: changeHeight(18);
+              }
+            }
+            .val {
+              display: flex;
+              align-items: center;
+
+              .ratekw {
+                /* 9999 */
+                font-weight: 600;
+                font-size: changeHeight(25);
+
+                // color: #12e7e3;
+              }
+              span {
+                margin-top: changeHeight(5);
+                font-size: changeHeight(18);
+                // background-color: #00f0ff;
+                margin-left: changeHeight(5);
+              }
+            }
+          }
+          .numberBefore {
+            position: relative;
+            .Btn1 {
+              position: absolute;
+              height: changeHeight(39.59);
+              line-height: changeHeight(39.59);
+
+              width: changeHeight(100.8);
+            }
+            .bg1 {
+              background: url("@/assets/images/btnType/btnblue.png") no-repeat;
+              background-size: 100% 100%;
+            }
+            .bg2 {
+              background: url("@/assets/images/btnType/btngreen.png") no-repeat;
+              background-size: 100% 100%;
+            }
+            .beforeEchart {
+              height: changeHeight(400);
+              width: changeHeight(550);
+            }
+          }
+        }
+        .right {
+        }
+      }
+    }
+  }
+  .black_box {
+    position: absolute;
+    top: -20%;
+    width: 100%;
+    height: 120%;
+    z-index: 1000;
+
+    background-color: rgba(0, 0, 0, 0.6); /* 黑色透明度20% */
+  }
+}
+</style>