Merge branch 'master' of http://58.87.70.254/zhaoqiang/v3tianjin

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>

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">
+                              <div class="rkw">{{ loadchargingPilecount }}</div>
-                                {{ loadchargingPileratedS }}
+                              <div class="rnumber">&nbsp;台</div>
-                              </div>
-                              <div class="rnumber">&nbsp;kW</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>
-                    <div class="cen"><div class="namebg">主网</div></div>
+                    <div class="name">
-                  </div>
+                      <div class="cen">
-                  <div class="name_box">
+                        <div class="namebg">
-                    <img src="@/assets/images/mainPage/icon3_main.png" alt="" />
+                          配网（
-                    <div class="photovoltaic">
+                          <div class="fs25">线路总数：111条</div>
-                      <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>
-                        <div class="photovoltaic_key1">
+                    <div class="name_box">
-                          <img
+                      <img
-                            src="@/assets/images/mainPage/icon1_lefti.png"
+                        src="@/assets/images/mainPage/icon3_feeder.png"
-                            alt=""
+                        alt=""
-                          />
+                      />
-                          <div class="r"><span>35kV</span></div>
+                      <div class="photovoltaic">
-                          <img
+                        <div class="rowbox">
-                            src="@/assets/images/mainPage/icon1_righti.png"
+                          <div class="photovoltaic_key1">
-                            alt=""
+                            <img
-                          />
+                              src="@/assets/images/mainPage/icon1_lefti.png"
-                        </div>
+                              alt=""
-                        <div class="photovoltaic_value1">
+                            />
-                          <div class="kw">
+                            <div class="r"><span>光伏负荷线路</span></div>
-                            {{ Number(networkLine35RatedS).toFixed(2) }}
+                            <img
-                            <span>km</span>
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
                           </div>
-                          <div class="hu">
+                          <div class="photovoltaic_value1">
-                            {{ networkLine35Count }} <span>条</span>
+                            <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>
-                <div class="content_info" v-if="networkFlag === '1'">
+                    <div class="name">
-                  <div class="name">
+                      <div class="cen">
-                    <div class="cen"><div class="namebg">配网</div></div>
+                        <div class="namebg">
-                  </div>
+                          台区（
-                  <div class="name_box">
+                          <div class="fs25">线路总数：111条</div>
-                    <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>
-                        <div class="photovoltaic_key1">
+                    <div class="name_box">
-                          <img
+                      <img
-                            src="@/assets/images/mainPage/icon1_lefti.png"
+                        src="@/assets/images/mainPage/icon4_xixiao.png"
-                            alt=""
+                        alt=""
-                          />
+                      />
-                          <div class="r"><span>380V</span></div>
+                      <div class="photovoltaic">
-                          <img
+                        <div class="rowbox">
-                            src="@/assets/images/mainPage/icon1_righti.png"
+                          <div class="photovoltaic_key1">
-                            alt=""
+                            <img
-                          />
+                              src="@/assets/images/mainPage/icon1_lefti.png"
-                        </div>
+                              alt=""
-                        <div class="photovoltaic_value1">
+                            />
-                          <div class="kw">
+                            <div class="r"><span>光伏负荷台区</span></div>
-                            {{ Number(networkFeer380RatedS).toFixed(2) }}
+                            <img
-                            <span>km</span>
+                              src="@/assets/images/mainPage/icon1_righti.png"
+                              alt=""
+                            />
                           </div>
-                          <div class="hu">
+                          <div class="photovoltaic_value1">
-                            {{ networkFeer380Count }} <span>条</span>
+                            <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
+                    <img src="@/assets/images/mainPage/icon4_user.png" alt="" />
-                      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="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 handleThree_out = () => {
-  const list = {
+  // 隐藏城南边界线
-    location: "(X=18705617.163,Y=1826842.166,Z=4299675.505)",
+  const datadispaly = {
-    rotation: "Pitch=-89.9,Yaw=-90.542,Roll=0",
+    CityID: "12010",
+    status: "0", //0隐藏1显示
   };
-  api_send("CameraMove", list, () => {
+  api_send("ShowCityEdge", datadispaly, () => {
-    console.log("CameraMove");
+    console.log("ShowCityEdge隐藏城南边界线");
-  });
-  let _list = {
-    CityID: val,
-    status: "1",
-  };
-  api_send("ShowCityEdge", _list, () => {
-    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);
+                }
+              }
+            }
           }
         }
       }