w

src/assets/json/ying31.json

@@ -462,6 +462,79 @@
                 "adeg_e": "-0.000012",
                 "adeg_b": "0.000000"
             },
+            {
+                "sBeg": "PD102000011333527",
+                "Time": "-",
+                "Date": "-",
+                "sec_id": "SBID000000C09851AC198043C9B008AB0ACA1DECF9",
+                "Qci": "0.0",
+                "Flow_Direction_Flag": "1",
+                "Qi": "0.253131",
+                "V_b": "10.550000",
+                "Pi": "0.956303",
+                "Qj": "-0.253131",
+                "Qcj": "0.0",
+                "Pj": "-0.956303",
+                "sEnd": "PD102000001333526",
+                "V_e": "10.499998",
+                "adeg_e": "-0.000012",
+                "adeg_b": "0.000000"
+            },
+            {
+                "sBeg": "PD102000011333527",
+                "Time": "-",
+                "Date": "-",
+                "sec_id": "SBID0000005D9109D2D9DC4CF0A019E5325DC690AB",
+                "Qci": "0.0",
+                "Flow_Direction_Flag": "1",
+                "Qi": "0.283131",
+                "V_b": "10.600000",
+                "Pi": "0.966303",
+                "Qj": "-0.283131",
+                "Qcj": "0.0",
+                "Pj": "-0.966303",
+                "sEnd": "PD102000001333526",
+                "V_e": "10.499998",
+                "adeg_e": "-0.000012",
+                "adeg_b": "0.000000"
+            },
+            {
+                "sBeg": "PD102000011333527",
+                "Time": "-",
+                "Date": "-",
+                "sec_id": "SBID000000F05BC542CC9242519159F33D0562C2AC",
+                "Qci": "0.0",
+                "Flow_Direction_Flag": "1",
+                "Qi": "0.293131",
+                "V_b": "10.600000",
+                "Pi": "0.976303",
+                "Qj": "-0.293131",
+                "Qcj": "0.0",
+                "Pj": "-0.976303",
+                "sEnd": "PD102000001333526",
+                "V_e": "10.499998",
+                "adeg_e": "-0.000012",
+                "adeg_b": "0.000000"
+            },
+            {
+                "sBeg": "PD102000011333527",
+                "Time": "-",
+                "Date": "-",
+                "sec_id": "SBID000000D87EE2A0923446238309C685B12CA67C",
+                "Qci": "0.0",
+                "Flow_Direction_Flag": "1",
+                "Qi": "0.303131",
+                "V_b": "10.600000",
+                "Pi": "0.996303",
+                "Qj": "-0.303131",
+                "Qcj": "0.0",
+                "Pj": "-0.986303",
+                "sEnd": "PD102000001333526",
+                "V_e": "10.499998",
+                "adeg_e": "-0.000012",
+                "adeg_b": "0.000000"
+            },
+            
             {
                 "sBeg": "PD102000001332807",
                 "Time": "-",

src/views/commonPage/3DPie.vue

@@ -71,7 +71,7 @@ let handelColumnEcharts = () => {
                 },
 
                 //设置饼图在容器中的位置(目前没发现啥用)
-                //   center: ['50%', '100%']
+                //   center: ['20%', '100%']
             };
 
             //曲面的颜色、不透明度等样式。
@@ -152,31 +152,31 @@ let handelColumnEcharts = () => {
         // });
         let option = {
             //图例组件
-            legend: {
+            // legend: {
-                //图例列表的布局朝向。
+            //     //图例列表的布局朝向。
-                orient: props.threeDPieData.legend.orient,
+            //     orient: props.threeDPieData.legend.orient,
-                right: props.threeDPieData.legend.right,
+            //     right: props.threeDPieData.legend.right,
-                top: props.threeDPieData.legend.top,
+            //     top: props.threeDPieData.legend.top,
-                //图例文字每项之间的间隔
+            //     //图例文字每项之间的间隔
-                itemGap: props.threeDPieData.legend.itemGap,
+            //     itemGap: props.threeDPieData.legend.itemGap,
-                show: true,
+            //     show: false,
-                icon: "rect",
+            //     icon: "rect",
-                itemHeight: 10,
+            //     itemHeight: 10,
-                itemWidth: 10,
+            //     itemWidth: 10,
-                textStyle: {
+            //     textStyle: {
-                    //图例字体大小
+            //         //图例字体大小
-                    fontSize: transformFontSize(15),
+            //         fontSize: transformFontSize(15),
-                    color: "#FFFFFF",
+            //         color: "#FFFFFF",
-                    lineHeight: 20,
+            //         lineHeight: 20,
-                },
+            //     },
-                formatter: function (params) {
+            //     formatter: function (params) {
-                    for (let i = 0; i < pieData.length; i++) {
+            //         for (let i = 0; i < pieData.length; i++) {
-                        if (pieData[i].name === params) {
+            //             if (pieData[i].name === params) {
-                            return `${pieData[i].name} ${(pieData[i].value / props.threeDPieData.total*100).toFixed(0)}%`
+            //                 return `${pieData[i].name} ${(pieData[i].value / props.threeDPieData.total*100).toFixed(0)}%`
-                        }
+            //             }
-                    }
+            //         }
-                }
+            //     }
-            },
+            // },
             //移动上去提示的文本内容
             tooltip: {
                 backgroundColor: "rgba(18, 55, 85, 0.8);",

src/views/pages/OpticalStoragePage/index.vue

@@ -136,7 +136,7 @@
                 </div>
               </div> -->
               <div class="info2_content">
-                <div class="linepic"></div>
+                <div class="linepic" @click="handleEnter2"></div>
               </div>
             </div>
           </div>
@@ -740,6 +740,20 @@ let handleEnter = () => {
     });
   });
 };
+// svg入口事件 打开一个svg图
+let handleEnter2 = () => {
+  dialogVisible.value = true;
+  loadingFlag.value = true;
+
+  nextTick(() => {
+    SVGContainer.value.innerHTML = testSvg as any;
+    draw = SVG(SVGContainer.value.getElementsByTagName("svg")[0]);
+    let s = draw.panZoom({ zoomMin: 0.1, zoomMax: 30, zoomFactor: 0.5 });
+    draw.size("100%", "100%");
+    draw.zoom(0.6);
+
+  });
+};
 let handleShowSvg = async (svgIndex: string) => {
   // let setData = { id: svgIndex }
   // svgdApi(setData)
@@ -1100,7 +1114,7 @@ let handleCustomLine = (svgHtml, result) => {
           text = draw
             .text(
               `P: ${(parseFloat(data["Pi"]) * 100).toFixed(4)} kW \nQ: ${(
-                parseFloat(data["Qi"]) * 100
+                parseFloat(data["Qi"]) * 10
               ).toFixed(4)} kVar \nV: ${parseFloat(data["V_b"]).toFixed(
                 4
               )}  kV \nI: ${(
@@ -1142,9 +1156,9 @@ let handleCustomLine = (svgHtml, result) => {
             // 文本
             draw
               .text(
-                `P: ${(parseFloat(data["Pload/phase"]) * 100).toFixed(
+                `P: ${(parseFloat(data["Pload/phase"]) * 8).toFixed(
                   4
-                )} kW\nQ: ${(parseFloat(data["i"]) * 100).toFixed(4)} kVar`
+                )} kW\nQ: ${(parseFloat(data["i"]) * 8).toFixed(4)} kVar`
               )
               .attr({
                 x: centerX - 100,
@@ -1424,7 +1438,7 @@ let handleAnimate = async (result: any) => {
           )}  kV \nI: ${(
             (parseFloat(data["Pi"]) * 100) /
             (parseFloat(data["V_b"]) * 1.732)
-          ).toFixed(4)}  kV`
+          ).toFixed(4)}  A`
         )
         .attr({
           x: x - 10,
@@ -2541,6 +2555,7 @@ const styleVar = computed(() => {
               height: 100%;
               background: url("@/assets/images/osPage/rztp.png") no-repeat;
               background-size: 100% 100%;
+              cursor: pointer;
             }
           }
 

src/views/pages/homePage/3Dechart.vue

@@ -181,7 +181,7 @@ export default {
       const optionsData = [
         {
           name: "充电桩",
-          value: 4256,
+          value: 415,
           itemStyle: {
             //   opacity: 0.5,
             color: "rgba(102, 235, 287, 1)",
@@ -189,7 +189,7 @@ export default {
         },
         {
           name: "空调",
-          value: 2356,
+          value: 4135,
           itemStyle: {
             //   opacity: 0.5,
             color: "rgba(250, 179, 109, 1)",

src/views/pages/homePage/index.vue

@@ -49,16 +49,22 @@
                     <div class="total_load_3dEchart">
                       <div class="title_load fs40">负荷户数比例</div>
                       <div class="echarts">
-                        <!-- <Treepie ></Treepie> -->
+                        <!-- <Threepie
-                        <Treepie v-if="show" :threeDPieData="leftData.threeDPieData"></Treepie>
+                          v-if="show"
+                          :threeDPieData="leftData.threeDPieData"
+                        ></Threepie> -->
                       </div>
-
-                      <!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
                     </div>
                   </div>
                   <div class="content_info">
                     <div class="name">
-                      <div class="cen"><div class="namebg">光伏（<div class="fs35">总装机容量：149.39MW</div>）</div></div>
+                      <div class="cen">
+                        <div class="namebg">
+                          光伏（
+                          <div class="fs35">总装机容量：149.39MW</div>
+                          ）
+                        </div>
+                      </div>
                     </div>
                     <div class="name_box">
                       <img
@@ -159,7 +165,10 @@
                       <div class="total_load_3dEchart">
                         <div class="title_load fs40">负荷户数比例</div>
                         <div class="echarts">
-                          <threeEchart></threeEchart>
+                          <!-- <Threepie
+                          v-if="show"
+                          :threeDPieData="leftData.threeDPieData1"
+                        ></Threepie> -->
                         </div>
 
                         <!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
@@ -537,7 +546,10 @@
                 <div class="title_info margin2">资源概况</div>
                 <div class="content_info">
                   <div class="rowlist">
-                    <img src="@/assets/images/homePage/v2img/c-user.png" alt="" />
+                    <img
+                      src="@/assets/images/homePage/v2img/c-user.png"
+                      alt=""
+                    />
                     <div class="rbox">
                       <div class="key bshadow">
                         <div class="namebg">西小站</div>
@@ -686,8 +698,7 @@ import load_echart from "./oneLine.vue";
 import storage_echart from "./oneLine.vue";
 import threeEchart from "./3Dechart.vue";
 import threeEchart2 from "./3Dechart2.vue";
-import Treepie from "./Treepie.vue";
+import Threepie from "./Treepie.vue";
-
 import runListenPage from "./runListenPage.vue";
 
 import { statInfo_api } from "@/api/homePage/SoureceApi.ts";
@@ -1061,85 +1072,130 @@ const getStatInfo = async () => {
 };
 // 资源总览
 // 荷
-let leftData = reactive({
+interface leftDataInfo {
-  PVGenerationData: [
+  businessValue: string,
-    {
+  residentValue: string,
-      name: "总发电量：",
+  tableData: tableInfo1[][]
-      value: "10728.8",
+  tableData1: tableInfo1[][],
-      unit: "kWh",
+  threeDPieData: any
-    },
+  threeDPieData1:any
-    {
+}
-      name: "月发电量：",
+interface tableInfo1 {
-      value: "1629.3",
+  index: string;
-      unit: "kWh",
+  name: string;
-    },
+  platFromName: string;
-    {
+  pileCount: string;
-      name: "周发电量：",
+  sumP: string;
-      value: "409.2",
+}
-      unit: "kWh",
+let show = ref(true);
-    },
+let leftData = reactive<leftDataInfo>({
-    {
+  businessValue: '0',
-      name: "日发电量：",
+  residentValue: '0',
-      value: "62.5",
+  tableData: [],
-      unit: "kWh",
+  tableData1: [],
-    },
+  // 3d饼图数据
-  ],
-  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: "可再生能源", //名称
+        name: "谷段", //名称
-        value: 78, //值
+        value: 10, //值
         itemStyle: {
-          color: "#6BFF82", //半透明
+          color: "#EE5944",//半透明
         },
       },
       {
-        name: "其他能源",
+        name: "高峰",
-        value: 22,
+        value: 20,
         itemStyle: {
-          color: "#00AAF3",
+          color: "#2E53F5",
         },
       },
+      {
+        name: "尖峰",
+        value: 40,
+        itemStyle: {
+          color: "#F1BA50",
+        },
+      },
+      {
+        name: "平段",
+        value: 40,
+        itemStyle: {
+          color: "#6FFBF7",
+        },
+      }
     ],
-    total: 100,
+    total: 108,
-    center: 0,
+    center: 0.9,   // 是否圆环
     legend: {
-      orient: "horizontal",
+      show:false,
-      right: "center",
+      orient: 'horizontal',
-      top: "2%",
+      left: 'center',
-      itemGap: 30,
+      top: '-3%',
+      itemGap: 20
     },
     grid3D: {
       viewControl: {
-        distance: 500,
+        distance: 350,    // 缩放视角
-        alpha: 35,
+        alpha: 45,        // 角度
+      }
+    },
+    // radius: ["40%", "40%"],
+        // center: ["50%", "50%"],
+    getHeight3D: 40,          // 高度
+  },
+  // 3d饼图数据1
+  threeDPieData1: {
+    pieData: [
+      {
+        name: "谷段", //名称
+        value: 10, //值
+        itemStyle: {
+          color: "#EE5944",//半透明
         },
       },
-    getHeight3D: 60,
+      {
+        name: "高峰",
+        value: 20,
+        itemStyle: {
+          color: "#2E53F5",
         },
-});
+      },
+      {
+        name: "尖峰",
+        value: 40,
+        itemStyle: {
+          color: "#F1BA50",
+        },
+      },
+      {
+        name: "平段",
+        value: 40,
+        itemStyle: {
+          color: "#6FFBF7",
+        },
+      }
+    ],
+    total: 108,
+    center: 0.9,   // 是否圆环
+    legend: {
+
+      orient: 'horizontal',
+      left: 'center',
+      top: '-30%',
+      itemGap: 20
+    },
+    grid3D: {
+      viewControl: {
+        distance: 350,    // 缩放视角
+        alpha: 45,        // 角度
+      }
+    },
+    // radius: ["40%", "40%"],
+        // center: ["50%", "50%"],
+    getHeight3D: 40,          // 高度
+  }
+})
 // 网
 // 网盒子得标识
 let networkContentFlag = ref(true);
@@ -1673,11 +1729,9 @@ const styleVar = computed(() => {
           // align-items: center;
 
           img {
-            
             margin-top: 5%;
             width: changeWidth(228.25);
             height: changeHeight(201.6);
-
           }
           .photovoltaic,
           .new_energy {