首页饼图更换样式

src/components/chart/pie/dual-pie-chart-econey.vue

@@ -28,53 +28,132 @@ export default {
     return {
       id: "",
       chart: null,
+      colorList: [
+        {
+          name: "",
+          itemStyle: {
+            color: "#1986e0",
+          },
+          children: [
+            {
+              value: 0,
+              name: "",
+              itemStyle: {
+                color: "#195282",
+              },
+            },
+          ],
+        },
+        {
+          name: "",
+          itemStyle: {
+            color: "#ba3237",
+          },
+          children: [
+            {
+              value: 0,
+              name: "",
+              itemStyle: {
+                color: "#69272c",
+              },
+            },
+          ],
+        },
+        {
+          name: "",
+          itemStyle: {
+            color: "#e17d24",
+          },
+          children: [
+            {
+              value: 0,
+              name: "",
+              itemStyle: {
+                color: "#7f4f25",
+              },
+            },
+          ],
+        },
+        {
+          name: "",
+          itemStyle: {
+            color: "#c531cb",
+          },
+          children: [
+            {
+              value: 0,
+              name: "",
+              itemStyle: {
+                color: "#812083",
+              },
+            },
+          ],
+        },
+        {
+          name: "",
+          itemStyle: {
+            color: "#a7a7a7",
+          },
+          children: [
+            {
+              value: 0,
+              name: "",
+              itemStyle: {
+                color: "#5f6163",
+              },
+            },
+          ],
+        },
+      ],
     };
   },
-  computed: {},
+  computed: {
+    seriesData() {
+      if (this.series.length) {
+        let series = [];
+        let list = this.series;
+        let colorList = JSON.parse(JSON.stringify(this.colorList));
+        series = list?.map((item, index) => {
+          let obj = colorList[index];
+          obj.name = item.name;
+          obj.children[0].value = item.value;
+          obj.children[0].name = item.name;
+          return { ...obj };
+        });
+        return series;
+      } else {
+        return [];
+      }
+    },
+  },
   methods: {
     initChart() {
-      if (this.series.length) {
-        let max =
-          Math.max.apply(
-            Math,
-            this.series?.map(function (o) {
-              return o.children[0].value;
-            })
-          ) || 0;
+      if (this.seriesData.length) {
         let total =
-          this.series?.reduce((a, b) => {
+          this.seriesData?.reduce((a, b) => {
             return a + b.children[0].value * 1;
           }, 0) || 0;
-        let titleItem =
-          this.series?.find((item) => item.children[0].value == max) || {};
         let option = {
           animation: true,
           title: {
-            text: `{val|${
-              max && total ? Number((max / total) * 100).toFixed(2) : 0
-            }%}\n\n{name|${titleItem?.name || ""}}`,
-            top: "center",
+            text: `${total ? total.toFixed(2) : 0}`,
+            subtext: "总损失",
+            top: "38%",
             left: "48%",
             textAlign: "center",
             textStyle: {
-              rich: {
-                name: {
-                  fontSize: 13,
-                  fontWeight: "bold",
-                  color: "#b3b3b3",
-                },
-                val: {
-                  fontSize: 15,
-                  fontWeight: "bold",
-                  color: "#b3b3b3",
-                },
-              },
+              fontSize: 16,
+              color: "#fff",
+            },
+            subtextStyle: {
+              fontSize: 15,
+              color: "#b3b3b3",
             },
           },
           series: [
             {
               type: "sunburst",
-              data: this.series,
+              data: this.seriesData,
               radius: [0, "95%"],
               sort: null,
               emphasis: {
@@ -111,53 +190,53 @@ export default {
             },
           ],
         };
-        this.chart.on("mouseover", (event) => {
-          let value = Number((event.value / total) * 100).toFixed(2);
-          option.title.text =
-            "{val|" + value + "%}\n\n{name|" + event?.name + "}";
-          option.animation = false;
-          option.title.textStyle = {
-            rich: {
-              name: {
-                fontSize: 13,
-                fontWeight: "bold",
-                color: "#b3b3b3",
-              },
-              val: {
-                fontSize: 15,
-                fontWeight: "bold",
-                color: "#b3b3b3",
-              },
-            },
-          };
-          this.chart.setOption(option);
-        });
-        this.chart.on("mouseout", (event) => {
-          option.animation = false;
-          option.title = {
-            text: `{val|${
-              max && total ? Number((max / total) * 100).toFixed(2) : 0
-            }%}\n\n{name|${titleItem?.name || ""}}`,
-            top: "center",
-            left: "48%",
-            textAlign: "center",
-            textStyle: {
-              rich: {
-                name: {
-                  fontSize: 13,
-                  fontWeight: "bold",
-                  color: "#b3b3b3",
-                },
-                val: {
-                  fontSize: 15,
-                  fontWeight: "bold",
-                  color: "#b3b3b3",
-                },
-              },
-            },
-          };
-          this.chart.setOption(option);
-        });
+        // this.chart.on("mouseover", (event) => {
+        //   let value = Number((event.value / total) * 100).toFixed(2);
+        //   option.title.text =
+        //     "{val|" + value + "%}\n\n{name|" + event?.name + "}";
+        //   option.animation = false;
+        //   option.title.textStyle = {
+        //     rich: {
+        //       name: {
+        //         fontSize: 13,
+        //         fontWeight: "bold",
+        //         color: "#b3b3b3",
+        //       },
+        //       val: {
+        //         fontSize: 15,
+        //         fontWeight: "bold",
+        //         color: "#b3b3b3",
+        //       },
+        //     },
+        //   };
+        //   this.chart.setOption(option);
+        // });
+        // this.chart.on("mouseout", (event) => {
+        //   option.animation = false;
+        //   option.title = {
+        //     text: `{val|${
+        //       max && total ? Number((max / total) * 100).toFixed(2) : 0
+        //     }%}\n\n{name|${titleItem?.name || ""}}`,
+        //     top: "center",
+        //     left: "48%",
+        //     textAlign: "center",
+        //     textStyle: {
+        //       rich: {
+        //         name: {
+        //           fontSize: 13,
+        //           fontWeight: "bold",
+        //           color: "#b3b3b3",
+        //         },
+        //         val: {
+        //           fontSize: 15,
+        //           fontWeight: "bold",
+        //           color: "#b3b3b3",
+        //         },
+        //       },
+        //     },
+        //   };
+        //   this.chart.setOption(option);
+        // });
 
         this.chart.setOption(option);
       }

src/views/layout/economicsOperation/companyHomepage/index.vue

@@ -108,67 +108,56 @@
         <div class="chart-card-title">五项损失</div>
         <div class="chart-content">
           <div class="chart-pie">
-            <pie-chart width="100%" height="100%" :lossPower="dayWindPieData" />
+            <div class="chart-total"></div>
+            <!-- <pie-chart width="100%" height="100%" :lossPower="dayWindPieData" /> -->
+            <pie-chart width="100%" height="100%" :series="dayWindPieData" />
           </div>
-          <!-- <ul class="chart-list">
-            <li class="state-li state-gz">
-              <span class="station-state">故障</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.gzss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-wh">
-              <span class="station-state">维护</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.whss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-xd">
-              <span class="station-state">限电</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.xdss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-xn">
-              <span class="station-state">性能</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.xnss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-sl">
-              <span class="station-state">受累</span>
+          <ul class="chart-list">
+            <li
+              v-for="item in dayWindPieData"
+              :key="item.name"
+              class="state-li"
+              :class="item.class"
+            >
+              <span class="station-state">{{ item?.name }}</span>
               <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.slss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
+                >{{
+                  item?.value
+                    ? ((item?.value / wxssTotal) * 100)?.toFixed(2)
+                    : 0
+                }}
+                <i class="unit">%</i></span
               >
             </li>
-          </ul> -->
+          </ul>
         </div>
       </div>
       <div class="chart-card">
         <div class="chart-card-title">场站损失(前5)</div>
         <div class="chart-content">
           <div class="chart-online">
-            <PieStationTop5 width="100%" height="100%" :list="stationTop5" />
+            <div class="chart-total"></div>
+            <pie-chart width="100%" height="100%" :series="stationTop5" />
+            <!-- <PieStationTop5 width="100%" height="100%" :list="stationTop5" /> -->
           </div>
-          <!-- <ul class="chart-list">
+          <ul class="chart-list">
             <li
               class="online-li"
               v-for="(item, index) in stationTop5"
-              :key="item.id"
+              :key="item.index"
               :class="'online' + index"
             >
               <span class="online-name">{{ item?.name }}</span>
               <div>
-                <span class="online-data">{{ item?.value?.toFixed(2) }}</span>
-                <span class="online-percent">万kWh</span>
+                <span class="online-data">{{
+                  item?.value
+                    ? ((item?.value / stationTopTotal) * 100)?.toFixed(2)
+                    : 0
+                }}</span>
+                <span class="online-percent">%</span>
               </div>
             </li>
-          </ul> -->
+          </ul>
         </div>
       </div>
     </div>
@@ -231,7 +220,7 @@
               :class="themeType === 'maintenance' && 'active-theme'"
             >
               <i class="icon-operate"></i>
-              <span>运营</span>
+              <span>风能利用率</span>
             </div>
             <div
               class="theme-change"
@@ -239,7 +228,7 @@
               :class="themeType === 'operate' && 'active-theme'"
             >
               <i class="icon-maintenance"></i>
-              <span>运维</span>
+              <span>损失明细</span>
             </div>
           </div>
         </div>
@@ -290,16 +279,11 @@
 <script>
 import Card from "../homePage/components/card.vue";
 import List from "../homePage/components/list.vue";
-import PieChart from "@/components/chart/pie/pie-chart.vue";
-import PieStationTop5 from "@/components/chart/pie/pie-station-top5.vue";
+import PieChart from "@/components/chart/pie/dual-pie-chart-econey.vue";
+// import PieChart from "@/components/chart/pie/pie-chart.vue";
+// import PieStationTop5 from "@/components/chart/pie/pie-station-top5.vue";
 import { homePage } from "@/api/economy-homepage.js";
 import { GetOrganization, GetStationByCompany } from "@/api/econ-headerNav.js";
-import {
-  GetCompanyPowerStationDatas,
-  GetRtValuesByTagName,
-  GetPowerStation,
-} from "@api/photovoltaicStation";
-import { getOrganization, getPowerstationTypeList } from "@api/home";
 
 export default {
   name: "photovoltaicLevelTwoStation", // 公司首页
@@ -307,7 +291,7 @@ export default {
     Card,
     List,
     PieChart,
-    PieStationTop5,
+    // PieStationTop5,
   },
   data() {
     return {
@@ -323,7 +307,7 @@ export default {
       stationLists: [], // 场站列表
       timer: null, // 3秒调一次
       checkNode: "", // 选中区域
-      themeType: "maintenance", // 主题模式  经营类：maintenance， 运维类：operate
+      themeType: "maintenance", // 主题模式  风能利用率类：maintenance， 损失明细类：operate
       stationName: [], //选中场站
       isActive: "card", // 切换卡片或列表
       dayWindPieData: {}, //五项损失图表数据
@@ -343,6 +327,8 @@ export default {
       sortCode: "", //排序条件
       sortType: true, //升序降序
       datetype: "r",
+      wxssTotal: 0,
+      stationTopTotal: 0,
     };
   },
 
@@ -364,39 +350,64 @@ export default {
       let { data: res } = await homePage({
         companyId: this.checkNode,
         type: 0,
-        statype: -1,
+        statype: this.typeNode,
         datetype: this.datetype,
       });
       this.companyPowerStationData = res; //所有页面数据
       this.listData = this.companyPowerStationData?.wxsslb; //列表数据
       this.allListData = this.companyPowerStationData?.wxsslb; //存储备用列表(筛选使用)
       this.cardData = this.getSortList(this.listData, this.sortCode);
-      // 五项损失统计饼图
-      this.dayWindPieData = {
-        GZSS: this.companyPowerStationData?.wxsstb?.gzss,
-        WHSS: this.companyPowerStationData?.wxsstb?.whss,
-        SLSS: this.companyPowerStationData?.wxsstb?.slss,
-        XDSS: this.companyPowerStationData?.wxsstb?.xdss,
-        XNSS: this.companyPowerStationData?.wxsstb?.xnss,
-      };
-      //   场站top5
+      this.dayWindPieData = [
+        {
+          name: "性能损失",
+          value: this.companyPowerStationData?.wxsstb?.xnss,
+          class: "state-xn",
+        },
+        {
+          name: "故障损失",
+          value: this.companyPowerStationData?.wxsstb?.gzss,
+          class: "state-gz",
+        },
+        {
+          name: "维护损失",
+          value: this.companyPowerStationData?.wxsstb?.whss,
+          class: "state-wh",
+        },
+        {
+          name: "限电损失",
+          value: this.companyPowerStationData?.wxsstb?.xdss,
+          class: "state-xd",
+        },
+        {
+          name: "受累损失",
+          value: this.companyPowerStationData?.wxsstb?.slss,
+          class: "state-sl",
+        },
+      ];
+      this.wxssTotal = this.dayWindPieData?.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
       this.stationTop5 = this.companyPowerStationData?.czwxss?.map((item) => {
-        return { value: item.wxss, name: item.name };
+        return { name: item.name, value: item.wxss };
       });
+      this.stationTopTotal = this.stationTop5?.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
     },
     // 获取公司列表
     getOrganizationList() {
-      GetOrganization({ type: -1 }).then(({ data }) => {
+      GetOrganization({ type: this.typeNode }).then(({ data }) => {
         this.OrganizationLists = data;
       });
     },
     // 获取场站列表
     getStationList() {
-      GetStationByCompany({ companyids: this.checkNode, type: -1 }).then(
-        ({ data }) => {
-          this.complyData = data;
-        }
-      );
+      GetStationByCompany({
+        companyids: this.checkNode,
+        type: this.typeNode,
+      }).then(({ data }) => {
+        this.complyData = data;
+      });
     },
     //排序方式改变(升序降序)
     sortTypechange() {
@@ -687,18 +698,18 @@ export default {
         display: flex;
         align-items: center;
         // justify-content: space-around;
-        height: 250px;
+        height: 200px;
 
         .chart-pie {
           position: relative;
           // flex: 1;
-          width: 100%;
+          width: 52%;
           height: 100%;
 
           .chart-total {
             position: absolute;
             text-align: center;
-            z-index: 99;
+            z-index: 0;
             background: url("../../../../assets/img/images/piaBack.png")
               no-repeat;
             width: 80px;
@@ -770,8 +781,35 @@ export default {
         }
 
         .chart-online {
-          width: 100%;
+          position: relative;
+          width: 52%;
           height: 100%;
+          .chart-total {
+            position: absolute;
+            text-align: center;
+            z-index: 0;
+            background: url("../../../../assets/img/images/piaBack.png")
+              no-repeat;
+            width: 80px;
+            height: 80px;
+            background-size: cover;
+            left: 50%;
+            margin-left: -40px;
+            top: 50%;
+            margin-top: -40px;
+
+            .chart-num {
+              font-family: Bicubik;
+              font-size: 22px;
+              color: #fff;
+              margin-top: 16px;
+            }
+
+            .chart-name {
+              color: #b3b3b3;
+              font-size: 14px;
+            }
+          }
         }
 
         .chart-list {
@@ -848,6 +886,15 @@ export default {
             }
           }
 
+          .state-xn {
+            .station-state:before {
+              background: #1986e0;
+            }
+
+            .station-data {
+              color: #1986e0;
+            }
+          }
           .state-gz {
             .station-state:before {
               background: #ba3237;
@@ -859,42 +906,33 @@ export default {
           }
           .state-wh {
             .station-state:before {
-              background: #e17e23;
+              background: #e17d24;
             }
 
             .station-data {
-              color: #e17e23;
+              color: #e17d24;
             }
           }
 
           .state-xd {
             .station-state:before {
-              background: #c531c7;
+              background: #c531cb;
             }
 
             .station-data {
-              color: #c531c7;
+              color: #c531cb;
             }
           }
-          .state-xn {
-            .station-state:before {
-              background: #05bb4c;
-            }
 
-            .station-data {
-              color: #05bb4c;
-            }
-          }
           .state-sl {
             .station-state:before {
-              background: #fff;
+              background: #a7a7a7;
             }
 
             .station-data {
-              color: #fff;
+              color: #a7a7a7;
             }
           }
-
           .online-li {
             display: flex;
             font-size: 15px;
@@ -933,49 +971,49 @@ export default {
             }
             &.online0 {
               .online-name:before {
-                background: red;
+                background: #1986e0;
               }
 
               .online-data {
-                color: red;
+                color: #1986e0;
               }
             }
 
             &.online1 {
               .online-name:before {
-                background: orange;
+                background: #ba3237;
               }
 
               .online-data {
-                color: orange;
+                color: #ba3237;
               }
             }
 
             &.online2 {
               .online-name:before {
-                background: yellow;
+                background: #e17d24;
               }
 
               .online-data {
-                color: yellow;
+                color: #e17d24;
               }
             }
             &.online3 {
               .online-name:before {
-                background: #05bb4c;
+                background: #c531cb;
               }
 
               .online-data {
-                color: #05bb4c;
+                color: #c531cb;
               }
             }
             &.online4 {
               .online-name:before {
-                background: #1b99ff;
+                background: #a7a7a7;
               }
 
               .online-data {
-                color: #1b99ff;
+                color: #a7a7a7;
               }
             }
           }

src/views/layout/economicsOperation/companyHomepage/indexGf.vue

@@ -108,67 +108,56 @@
         <div class="chart-card-title">五项损失</div>
         <div class="chart-content">
           <div class="chart-pie">
-            <pie-chart width="100%" height="100%" :lossPower="dayWindPieData" />
+            <div class="chart-total"></div>
+            <!-- <pie-chart width="100%" height="100%" :lossPower="dayWindPieData" /> -->
+            <pie-chart width="100%" height="100%" :series="dayWindPieData" />
           </div>
-          <!-- <ul class="chart-list">
-            <li class="state-li state-gz">
-              <span class="station-state">故障</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.gzss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-wh">
-              <span class="station-state">维护</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.whss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-xd">
-              <span class="station-state">限电</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.xdss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-xn">
-              <span class="station-state">性能</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.xnss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-sl">
-              <span class="station-state">受累</span>
+          <ul class="chart-list">
+            <li
+              v-for="item in dayWindPieData"
+              :key="item.name"
+              class="state-li"
+              :class="item.class"
+            >
+              <span class="station-state">{{ item?.name }}</span>
               <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.slss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
+                >{{
+                  item?.value
+                    ? ((item?.value / wxssTotal) * 100)?.toFixed(2)
+                    : 0
+                }}
+                <i class="unit">%</i></span
               >
             </li>
-          </ul> -->
+          </ul>
         </div>
       </div>
       <div class="chart-card">
         <div class="chart-card-title">场站损失(前5)</div>
         <div class="chart-content">
           <div class="chart-online">
-            <PieStationTop5 width="100%" height="100%" :list="stationTop5" />
+            <div class="chart-total"></div>
+            <pie-chart width="100%" height="100%" :series="stationTop5" />
+            <!-- <PieStationTop5 width="100%" height="100%" :list="stationTop5" /> -->
           </div>
-          <!-- <ul class="chart-list">
+          <ul class="chart-list">
             <li
               class="online-li"
               v-for="(item, index) in stationTop5"
-              :key="item.id"
+              :key="item.index"
               :class="'online' + index"
             >
               <span class="online-name">{{ item?.name }}</span>
               <div>
-                <span class="online-data">{{ item?.value?.toFixed(2) }}</span>
-                <span class="online-percent">万kWh</span>
+                <span class="online-data">{{
+                  item?.value
+                    ? ((item?.value / stationTopTotal) * 100)?.toFixed(2)
+                    : 0
+                }}</span>
+                <span class="online-percent">%</span>
               </div>
             </li>
-          </ul> -->
+          </ul>
         </div>
       </div>
     </div>
@@ -231,7 +220,7 @@
               :class="themeType === 'maintenance' && 'active-theme'"
             >
               <i class="icon-operate"></i>
-              <span>运营</span>
+              <span>光能利用率</span>
             </div>
             <div
               class="theme-change"
@@ -239,7 +228,7 @@
               :class="themeType === 'operate' && 'active-theme'"
             >
               <i class="icon-maintenance"></i>
-              <span>运维</span>
+              <span>损失明细</span>
             </div>
           </div>
         </div>
@@ -290,16 +279,11 @@
 <script>
 import Card from "../homePage/components/card.vue";
 import List from "../homePage/components/list.vue";
-import PieChart from "@/components/chart/pie/pie-chart.vue";
-import PieStationTop5 from "@/components/chart/pie/pie-station-top5.vue";
+import PieChart from "@/components/chart/pie/dual-pie-chart-econey.vue";
+// import PieChart from "@/components/chart/pie/pie-chart.vue";
+// import PieStationTop5 from "@/components/chart/pie/pie-station-top5.vue";
 import { homePage } from "@/api/economy-homepage.js";
 import { GetOrganization, GetStationByCompany } from "@/api/econ-headerNav.js";
-import {
-  GetCompanyPowerStationDatas,
-  GetRtValuesByTagName,
-  GetPowerStation,
-} from "@api/photovoltaicStation";
-import { getOrganization, getPowerstationTypeList } from "@api/home";
 
 export default {
   name: "photovoltaicLevelTwoStation", // 公司首页
@@ -307,7 +291,7 @@ export default {
     Card,
     List,
     PieChart,
-    PieStationTop5,
+    // PieStationTop5,
   },
   data() {
     return {
@@ -323,7 +307,7 @@ export default {
       stationLists: [], // 场站列表
       timer: null, // 3秒调一次
       checkNode: "", // 选中区域
-      themeType: "maintenance", // 主题模式  经营类：maintenance， 运维类：operate
+      themeType: "maintenance", // 主题模式  光能利用率类：maintenance， 损失明细类：operate
       stationName: [], //选中场站
       isActive: "card", // 切换卡片或列表
       dayWindPieData: {}, //五项损失图表数据
@@ -343,6 +327,8 @@ export default {
       sortCode: "", //排序条件
       sortType: true, //升序降序
       datetype: "r",
+      wxssTotal: 0,
+      stationTopTotal: 0,
     };
   },
 
@@ -371,32 +357,57 @@ export default {
       this.listData = this.companyPowerStationData?.wxsslb; //列表数据
       this.allListData = this.companyPowerStationData?.wxsslb; //存储备用列表(筛选使用)
       this.cardData = this.getSortList(this.listData, this.sortCode);
-      // 五项损失统计饼图
-      this.dayWindPieData = {
-        GZSS: this.companyPowerStationData?.wxsstb?.gzss,
-        WHSS: this.companyPowerStationData?.wxsstb?.whss,
-        SLSS: this.companyPowerStationData?.wxsstb?.slss,
-        XDSS: this.companyPowerStationData?.wxsstb?.xdss,
-        XNSS: this.companyPowerStationData?.wxsstb?.xnss,
-      };
-      //   场站top5
+      this.dayWindPieData = [
+        {
+          name: "性能损失",
+          value: this.companyPowerStationData?.wxsstb?.xnss,
+          class: "state-xn",
+        },
+        {
+          name: "故障损失",
+          value: this.companyPowerStationData?.wxsstb?.gzss,
+          class: "state-gz",
+        },
+        {
+          name: "维护损失",
+          value: this.companyPowerStationData?.wxsstb?.whss,
+          class: "state-wh",
+        },
+        {
+          name: "限电损失",
+          value: this.companyPowerStationData?.wxsstb?.xdss,
+          class: "state-xd",
+        },
+        {
+          name: "受累损失",
+          value: this.companyPowerStationData?.wxsstb?.slss,
+          class: "state-sl",
+        },
+      ];
+      this.wxssTotal = this.dayWindPieData?.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
       this.stationTop5 = this.companyPowerStationData?.czwxss?.map((item) => {
-        return { value: item.wxss, name: item.name };
+        return { name: item.name, value: item.wxss };
       });
+      this.stationTopTotal = this.stationTop5?.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
     },
     // 获取公司列表
     getOrganizationList() {
-      GetOrganization({ type: -2 }).then(({ data }) => {
+      GetOrganization({ type: this.typeNode }).then(({ data }) => {
         this.OrganizationLists = data;
       });
     },
     // 获取场站列表
     getStationList() {
-      GetStationByCompany({ companyids: this.checkNode, type: -2 }).then(
-        ({ data }) => {
-          this.complyData = data;
-        }
-      );
+      GetStationByCompany({
+        companyids: this.checkNode,
+        type: this.typeNode,
+      }).then(({ data }) => {
+        this.complyData = data;
+      });
     },
     //排序方式改变(升序降序)
     sortTypechange() {
@@ -687,18 +698,18 @@ export default {
         display: flex;
         align-items: center;
         // justify-content: space-around;
-        height: 250px;
+        height: 200px;
 
         .chart-pie {
           position: relative;
           // flex: 1;
-          width: 100%;
+          width: 52%;
           height: 100%;
 
           .chart-total {
             position: absolute;
             text-align: center;
-            z-index: 99;
+            z-index: 0;
             background: url("../../../../assets/img/images/piaBack.png")
               no-repeat;
             width: 80px;
@@ -770,8 +781,35 @@ export default {
         }
 
         .chart-online {
-          width: 100%;
+          position: relative;
+          width: 52%;
           height: 100%;
+          .chart-total {
+            position: absolute;
+            text-align: center;
+            z-index: 0;
+            background: url("../../../../assets/img/images/piaBack.png")
+              no-repeat;
+            width: 80px;
+            height: 80px;
+            background-size: cover;
+            left: 50%;
+            margin-left: -40px;
+            top: 50%;
+            margin-top: -40px;
+
+            .chart-num {
+              font-family: Bicubik;
+              font-size: 22px;
+              color: #fff;
+              margin-top: 16px;
+            }
+
+            .chart-name {
+              color: #b3b3b3;
+              font-size: 14px;
+            }
+          }
         }
 
         .chart-list {
@@ -848,6 +886,15 @@ export default {
             }
           }
 
+          .state-xn {
+            .station-state:before {
+              background: #1986e0;
+            }
+
+            .station-data {
+              color: #1986e0;
+            }
+          }
           .state-gz {
             .station-state:before {
               background: #ba3237;
@@ -859,42 +906,33 @@ export default {
           }
           .state-wh {
             .station-state:before {
-              background: #e17e23;
+              background: #e17d24;
             }
 
             .station-data {
-              color: #e17e23;
+              color: #e17d24;
             }
           }
 
           .state-xd {
             .station-state:before {
-              background: #c531c7;
+              background: #c531cb;
             }
 
             .station-data {
-              color: #c531c7;
+              color: #c531cb;
             }
           }
-          .state-xn {
-            .station-state:before {
-              background: #05bb4c;
-            }
 
-            .station-data {
-              color: #05bb4c;
-            }
-          }
           .state-sl {
             .station-state:before {
-              background: #fff;
+              background: #a7a7a7;
             }
 
             .station-data {
-              color: #fff;
+              color: #a7a7a7;
             }
           }
-
           .online-li {
             display: flex;
             font-size: 15px;
@@ -933,49 +971,49 @@ export default {
             }
             &.online0 {
               .online-name:before {
-                background: red;
+                background: #1986e0;
               }
 
               .online-data {
-                color: red;
+                color: #1986e0;
               }
             }
 
             &.online1 {
               .online-name:before {
-                background: orange;
+                background: #ba3237;
               }
 
               .online-data {
-                color: orange;
+                color: #ba3237;
               }
             }
 
             &.online2 {
               .online-name:before {
-                background: yellow;
+                background: #e17d24;
               }
 
               .online-data {
-                color: yellow;
+                color: #e17d24;
               }
             }
             &.online3 {
               .online-name:before {
-                background: #05bb4c;
+                background: #c531cb;
               }
 
               .online-data {
-                color: #05bb4c;
+                color: #c531cb;
               }
             }
             &.online4 {
               .online-name:before {
-                background: #1b99ff;
+                background: #a7a7a7;
               }
 
               .online-data {
-                color: #1b99ff;
+                color: #a7a7a7;
               }
             }
           }

src/views/layout/economicsOperation/homePage/index.vue

@@ -95,67 +95,55 @@
         <div class="chart-card-title">五项损失</div>
         <div class="chart-content">
           <div class="chart-pie">
-            <pie-chart width="100%" height="100%" :lossPower="dayWindPieData" />
+            <div class="chart-total"></div>
+            <!-- <pie-chart width="100%" height="100%" :lossPower="dayWindPieData" /> -->
+            <pie-chart width="100%" height="100%" :series="dayWindPieData" />
           </div>
-          <!-- <ul class="chart-list">
-            <li class="state-li state-gz">
-              <span class="station-state">故障</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.gzss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-wh">
-              <span class="station-state">维护</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.whss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-xd">
-              <span class="station-state">限电</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.xdss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-xn">
-              <span class="station-state">性能</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.xnss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-sl">
-              <span class="station-state">受累</span>
+          <ul class="chart-list">
+            <li
+              v-for="item in dayWindPieData"
+              :key="item.name"
+              class="state-li"
+              :class="item.class"
+            >
+              <span class="station-state">{{ item?.name }}</span>
               <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.slss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
+                >{{
+                  item?.value
+                    ? ((item?.value / wxssTotal) * 100)?.toFixed(2)
+                    : 0
+                }}
+                <i class="unit">%</i></span
               >
             </li>
-          </ul> -->
+          </ul>
         </div>
       </div>
       <div class="chart-card">
         <div class="chart-card-title">场站损失(前5)</div>
         <div class="chart-content">
           <div class="chart-online">
-            <PieStationTop5 width="100%" height="100%" :list="stationTop5" />
+            <div class="chart-total"></div>
+            <pie-chart width="100%" height="100%" :series="stationTop5" />
           </div>
-          <!-- <ul class="chart-list">
+          <ul class="chart-list">
             <li
               class="online-li"
               v-for="(item, index) in stationTop5"
-              :key="item.id"
+              :key="item.index"
               :class="'online' + index"
             >
               <span class="online-name">{{ item?.name }}</span>
               <div>
-                <span class="online-data">{{ item?.value?.toFixed(2) }}</span>
-                <span class="online-percent">万kWh</span>
+                <span class="online-data">{{
+                  item?.value
+                    ? ((item?.value / stationTopTotal) * 100)?.toFixed(2)
+                    : 0
+                }}</span>
+                <span class="online-percent">%</span>
               </div>
             </li>
-          </ul> -->
+          </ul>
         </div>
       </div>
     </div>
@@ -212,19 +200,19 @@
           <div class="form-box">
             <div
               class="theme-change"
-              @click="themeChange('operate')"
-              :class="themeType === 'operate' && 'active-theme'"
+              @click="themeChange('maintenance')"
+              :class="themeType === 'maintenance' && 'active-theme'"
             >
               <i class="icon-operate"></i>
-              <span>运营</span>
+              <span>风能利用率</span>
             </div>
             <div
               class="theme-change"
-              @click="themeChange('maintenance')"
-              :class="themeType === 'maintenance' && 'active-theme'"
+              @click="themeChange('operate')"
+              :class="themeType === 'operate' && 'active-theme'"
             >
               <i class="icon-maintenance"></i>
-              <span>运维</span>
+              <span>损失明细</span>
             </div>
           </div>
         </div>
@@ -275,15 +263,11 @@
 <script>
 import Card from "./components/card.vue";
 import List from "./components/list.vue";
-import PieChart from "@/components/chart/pie/pie-chart.vue";
-import PieStationTop5 from "@/components/chart/pie/pie-station-top5.vue";
+import PieChart from "@/components/chart/pie/dual-pie-chart-econey.vue";
+// import PieChart from "@/components/chart/pie/pie-chart.vue";
+// import PieStationTop5 from "@/components/chart/pie/pie-station-top5.vue";
 import { homePage } from "@/api/economy-homepage.js";
 import { GetOrganization } from "@/api/econ-headerNav.js";
-import {
-  GetCompanyPowerStationDatas,
-  GetRtValuesByTagName,
-} from "@api/photovoltaicStation";
-import { GetRegionInfo, getPowerstationTypeList } from "@api/home";
 
 export default {
   name: "homePageGf", // 公司首页
@@ -291,7 +275,7 @@ export default {
     Card,
     List,
     PieChart,
-    PieStationTop5,
+    // PieStationTop5,
   },
   data() {
     return {
@@ -310,9 +294,9 @@ export default {
       timer: null, // 3秒调一次
       OrganizationLists: null,
       checkNode: [], // 选中区域
-      themeType: "operate", // 主题模式  经营类：operate， 运维类：maintenance
+      themeType: "maintenance", // 主题模式  风能利用率类：maintenance 损失明细类：operate，
       isActive: "card", // 切换卡片或列表
-      dayWindPieData: {},
+      dayWindPieData: [],
       stationTop5: [],
       cardData: [],
       listData: [],
@@ -330,6 +314,8 @@ export default {
       sortCode: "",
       sortType: true,
       datetype: "r",
+      wxssTotal: 0,
+      stationTopTotal: 0,
     };
   },
 
@@ -357,30 +343,62 @@ export default {
 
       let { data: res } = await homePage({
         companyId: this.province.code,
-        type: -1,
+        type: this.typeNode,
         statype: 0,
-        datetype: this.datetype || "r",
+        datetype: this.datetype,
       });
       this.companyPowerStationData = res; //所有页面数据
       this.listData = this.companyPowerStationData?.wxsslb; //列表数据
       this.allListData = this.companyPowerStationData?.wxsslb; //存储备用列表(筛选使用)
       this.cardData = this.getSortList(this.listData, this.sortCode);
       // 五项损失统计饼图
-      this.dayWindPieData = {
-        GZSS: this.companyPowerStationData?.wxsstb?.gzss,
-        WHSS: this.companyPowerStationData?.wxsstb?.whss,
-        SLSS: this.companyPowerStationData?.wxsstb?.slss,
-        XDSS: this.companyPowerStationData?.wxsstb?.xdss,
-        XNSS: this.companyPowerStationData?.wxsstb?.xnss,
-      };
-
+      //   this.dayWindPieData = {
+      //     GZSS: this.companyPowerStationData?.wxsstb?.gzss,
+      //     WHSS: this.companyPowerStationData?.wxsstb?.whss,
+      //     SLSS: this.companyPowerStationData?.wxsstb?.slss,
+      //     XDSS: this.companyPowerStationData?.wxsstb?.xdss,
+      //     XNSS: this.companyPowerStationData?.wxsstb?.xnss,
+      //   };
+      this.dayWindPieData = [
+        {
+          name: "性能损失",
+          value: this.companyPowerStationData?.wxsstb?.xnss,
+          class: "state-xn",
+        },
+        {
+          name: "故障损失",
+          value: this.companyPowerStationData?.wxsstb?.gzss,
+          class: "state-gz",
+        },
+        {
+          name: "维护损失",
+          value: this.companyPowerStationData?.wxsstb?.whss,
+          class: "state-wh",
+        },
+        {
+          name: "限电损失",
+          value: this.companyPowerStationData?.wxsstb?.xdss,
+          class: "state-xd",
+        },
+        {
+          name: "受累损失",
+          value: this.companyPowerStationData?.wxsstb?.slss,
+          class: "state-sl",
+        },
+      ];
+      this.wxssTotal = this.dayWindPieData?.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
       this.stationTop5 = this.companyPowerStationData?.czwxss?.map((item) => {
-        return { value: item.wxss, name: item.name };
+        return { name: item.name, value: item.wxss };
       });
+      this.stationTopTotal = this.stationTop5?.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
     },
     // 获取公司列表
     getOrganizationList() {
-      GetOrganization({ type: -1 }).then(({ data }) => {
+      GetOrganization({ type: this.typeNode }).then(({ data }) => {
         this.OrganizationLists = data.filter((item) => item.id != "JS_RGN");
       });
     },
@@ -620,18 +638,18 @@ export default {
         display: flex;
         align-items: center;
         // justify-content: space-around;
-        height: 250px;
+        height: 200px;
 
         .chart-pie {
           position: relative;
           // flex: 1;
-          width: 100%;
+          width: 52%;
           height: 100%;
 
           .chart-total {
             position: absolute;
             text-align: center;
-            z-index: 99;
+            z-index: 0;
             background: url("../../../../assets/img/images/piaBack.png")
               no-repeat;
             width: 80px;
@@ -699,8 +717,35 @@ export default {
         }
 
         .chart-online {
-          width: 100%;
+          position: relative;
+          width: 52%;
           height: 100%;
+          .chart-total {
+            position: absolute;
+            text-align: center;
+            z-index: 0;
+            background: url("../../../../assets/img/images/piaBack.png")
+              no-repeat;
+            width: 80px;
+            height: 80px;
+            background-size: cover;
+            left: 50%;
+            margin-left: -40px;
+            top: 50%;
+            margin-top: -40px;
+
+            .chart-num {
+              font-family: Bicubik;
+              font-size: 22px;
+              color: #fff;
+              margin-top: 16px;
+            }
+
+            .chart-name {
+              color: #b3b3b3;
+              font-size: 14px;
+            }
+          }
         }
 
         .chart-list {
@@ -775,6 +820,15 @@ export default {
               }
             }
           }
+          .state-xn {
+            .station-state:before {
+              background: #1986e0;
+            }
+
+            .station-data {
+              color: #1986e0;
+            }
+          }
           .state-gz {
             .station-state:before {
               background: #ba3237;
@@ -786,39 +840,31 @@ export default {
           }
           .state-wh {
             .station-state:before {
-              background: #e17e23;
+              background: #e17d24;
             }
 
             .station-data {
-              color: #e17e23;
+              color: #e17d24;
             }
           }
 
           .state-xd {
             .station-state:before {
-              background: #c531c7;
+              background: #c531cb;
             }
 
             .station-data {
-              color: #c531c7;
+              color: #c531cb;
             }
           }
-          .state-xn {
-            .station-state:before {
-              background: #05bb4c;
-            }
 
-            .station-data {
-              color: #05bb4c;
-            }
-          }
           .state-sl {
             .station-state:before {
-              background: #fff;
+              background: #a7a7a7;
             }
 
             .station-data {
-              color: #fff;
+              color: #a7a7a7;
             }
           }
 
@@ -841,70 +887,70 @@ export default {
             .online-name {
               display: flex;
               align-items: center;
-              font-size: 17px;
+              font-size: 16px;
             }
 
             .online-data {
-              font-family: "AgencyFB-Reg";
+              font-family: Bicubik;
               min-width: 67px;
               text-align: right;
               margin-right: 10px;
               color: #a7a7a7;
-              font-size: 19px;
+              font-size: 16px;
             }
 
             .online-percent {
               min-width: 55px;
-              font-size: 14px;
-              color: #fff;
+              font-size: 12px;
+              color: #b3b3b3;
               text-align: left;
               font-family: PingFangSC-Regular, PingFang SC;
             }
             &.online0 {
               .online-name:before {
-                background: red;
+                background: #1986e0;
               }
 
               .online-data {
-                color: red;
+                color: #1986e0;
               }
             }
 
             &.online1 {
               .online-name:before {
-                background: orange;
+                background: #ba3237;
               }
 
               .online-data {
-                color: orange;
+                color: #ba3237;
               }
             }
 
             &.online2 {
               .online-name:before {
-                background: yellow;
+                background: #e17d24;
               }
 
               .online-data {
-                color: yellow;
+                color: #e17d24;
               }
             }
             &.online3 {
               .online-name:before {
-                background: #05bb4c;
+                background: #c531cb;
               }
 
               .online-data {
-                color: #05bb4c;
+                color: #c531cb;
               }
             }
             &.online4 {
               .online-name:before {
-                background: #1b99ff;
+                background: #a7a7a7;
               }
 
               .online-data {
-                color: #1b99ff;
+                color: #a7a7a7;
               }
             }
           }

src/views/layout/economicsOperation/homePage/indexGF.vue

@@ -95,67 +95,55 @@
         <div class="chart-card-title">五项损失</div>
         <div class="chart-content">
           <div class="chart-pie">
-            <pie-chart width="100%" height="100%" :lossPower="dayWindPieData" />
+            <div class="chart-total"></div>
+            <!-- <pie-chart width="100%" height="100%" :lossPower="dayWindPieData" /> -->
+            <pie-chart width="100%" height="100%" :series="dayWindPieData" />
           </div>
-          <!-- <ul class="chart-list">
-            <li class="state-li state-gz">
-              <span class="station-state">故障</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.gzss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-wh">
-              <span class="station-state">维护</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.whss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-xd">
-              <span class="station-state">限电</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.xdss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-xn">
-              <span class="station-state">性能</span>
-              <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.xnss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
-              >
-            </li>
-            <li class="state-li state-sl">
-              <span class="station-state">受累</span>
+          <ul class="chart-list">
+            <li
+              v-for="item in dayWindPieData"
+              :key="item.name"
+              class="state-li"
+              :class="item.class"
+            >
+              <span class="station-state">{{ item?.name }}</span>
               <span class="station-data"
-                >{{ companyPowerStationData?.wxsstb?.slss?.toFixed(2) || 0 }}
-                <i class="unit">万kWh</i></span
+                >{{
+                  item?.value
+                    ? ((item?.value / wxssTotal) * 100)?.toFixed(2)
+                    : 0
+                }}
+                <i class="unit">%</i></span
               >
             </li>
-          </ul> -->
+          </ul>
         </div>
       </div>
       <div class="chart-card">
         <div class="chart-card-title">场站损失(前5)</div>
         <div class="chart-content">
           <div class="chart-online">
-            <PieStationTop5 width="100%" height="100%" :list="stationTop5" />
+            <div class="chart-total"></div>
+            <pie-chart width="100%" height="100%" :series="stationTop5" />
           </div>
-          <!-- <ul class="chart-list">
+          <ul class="chart-list">
             <li
               class="online-li"
               v-for="(item, index) in stationTop5"
-              :key="item.id"
+              :key="item.index"
               :class="'online' + index"
             >
               <span class="online-name">{{ item?.name }}</span>
               <div>
-                <span class="online-data">{{ item?.value?.toFixed(2) }}</span>
-                <span class="online-percent">万kWh</span>
+                <span class="online-data">{{
+                  item?.value
+                    ? ((item?.value / stationTopTotal) * 100)?.toFixed(2)
+                    : 0
+                }}</span>
+                <span class="online-percent">%</span>
               </div>
             </li>
-          </ul> -->
+          </ul>
         </div>
       </div>
     </div>
@@ -216,7 +204,7 @@
               :class="themeType === 'maintenance' && 'active-theme'"
             >
               <i class="icon-operate"></i>
-              <span>运营</span>
+              <span>光能利用率</span>
             </div>
             <div
               class="theme-change"
@@ -224,7 +212,7 @@
               :class="themeType === 'operate' && 'active-theme'"
             >
               <i class="icon-maintenance"></i>
-              <span>运维</span>
+              <span>损失明细</span>
             </div>
           </div>
         </div>
@@ -275,15 +263,11 @@
 <script>
 import Card from "./components/card.vue";
 import List from "./components/list.vue";
-import PieChart from "@/components/chart/pie/pie-chart.vue";
-import PieStationTop5 from "@/components/chart/pie/pie-station-top5.vue";
+import PieChart from "@/components/chart/pie/dual-pie-chart-econey.vue";
+// import PieChart from "@/components/chart/pie/pie-chart.vue";
+// import PieStationTop5 from "@/components/chart/pie/pie-station-top5.vue";
 import { homePage } from "@/api/economy-homepage.js";
 import { GetOrganization } from "@/api/econ-headerNav.js";
-import {
-  GetCompanyPowerStationDatas,
-  GetRtValuesByTagName,
-} from "@api/photovoltaicStation";
-import { GetRegionInfo, getPowerstationTypeList } from "@api/home";
 
 export default {
   name: "homePageGf", // 公司首页
@@ -291,7 +275,7 @@ export default {
     Card,
     List,
     PieChart,
-    PieStationTop5,
+    // PieStationTop5,
   },
   data() {
     return {
@@ -310,9 +294,9 @@ export default {
       timer: null, // 3秒调一次
       OrganizationLists: null,
       checkNode: [], // 选中区域
-      themeType: "maintenance", // 主题模式  经营类：maintenance 运维类：operate，
+      themeType: "maintenance", // 主题模式  光能利用率类：maintenance 损失明细类：operate，
       isActive: "card", // 切换卡片或列表
-      dayWindPieData: {},
+      dayWindPieData: [],
       stationTop5: [],
       cardData: [],
       listData: [],
@@ -330,6 +314,8 @@ export default {
       sortCode: "",
       sortType: true,
       datetype: "r",
+      wxssTotal: 0,
+      stationTopTotal: 0,
     };
   },
 
@@ -357,7 +343,7 @@ export default {
 
       let { data: res } = await homePage({
         companyId: this.province.code,
-        type: -2,
+        type: this.typeNode,
         statype: 0,
         datetype: this.datetype,
       });
@@ -366,21 +352,53 @@ export default {
       this.allListData = this.companyPowerStationData?.wxsslb; //存储备用列表(筛选使用)
       this.cardData = this.getSortList(this.listData, this.sortCode);
       // 五项损失统计饼图
-      this.dayWindPieData = {
-        GZSS: this.companyPowerStationData?.wxsstb?.gzss,
-        WHSS: this.companyPowerStationData?.wxsstb?.whss,
-        SLSS: this.companyPowerStationData?.wxsstb?.slss,
-        XDSS: this.companyPowerStationData?.wxsstb?.xdss,
-        XNSS: this.companyPowerStationData?.wxsstb?.xnss,
-      };
-
+      //   this.dayWindPieData = {
+      //     GZSS: this.companyPowerStationData?.wxsstb?.gzss,
+      //     WHSS: this.companyPowerStationData?.wxsstb?.whss,
+      //     SLSS: this.companyPowerStationData?.wxsstb?.slss,
+      //     XDSS: this.companyPowerStationData?.wxsstb?.xdss,
+      //     XNSS: this.companyPowerStationData?.wxsstb?.xnss,
+      //   };
+      this.dayWindPieData = [
+        {
+          name: "性能损失",
+          value: this.companyPowerStationData?.wxsstb?.xnss,
+          class: "state-xn",
+        },
+        {
+          name: "故障损失",
+          value: this.companyPowerStationData?.wxsstb?.gzss,
+          class: "state-gz",
+        },
+        {
+          name: "维护损失",
+          value: this.companyPowerStationData?.wxsstb?.whss,
+          class: "state-wh",
+        },
+        {
+          name: "限电损失",
+          value: this.companyPowerStationData?.wxsstb?.xdss,
+          class: "state-xd",
+        },
+        {
+          name: "受累损失",
+          value: this.companyPowerStationData?.wxsstb?.slss,
+          class: "state-sl",
+        },
+      ];
+      this.wxssTotal = this.dayWindPieData?.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
       this.stationTop5 = this.companyPowerStationData?.czwxss?.map((item) => {
-        return { value: item.wxss, name: item.name };
+        return { name: item.name, value: item.wxss };
       });
+      this.stationTopTotal = this.stationTop5?.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
     },
     // 获取公司列表
     getOrganizationList() {
-      GetOrganization({ type: -2 }).then(({ data }) => {
+      GetOrganization({ type: this.typeNode }).then(({ data }) => {
         this.OrganizationLists = data.filter((item) => item.id != "JS_RGN");
       });
     },
@@ -620,18 +638,18 @@ export default {
         display: flex;
         align-items: center;
         // justify-content: space-around;
-        height: 250px;
+        height: 200px;
 
         .chart-pie {
           position: relative;
           // flex: 1;
-          width: 100%;
+          width: 52%;
           height: 100%;
 
           .chart-total {
             position: absolute;
             text-align: center;
-            z-index: 99;
+            z-index: 0;
             background: url("../../../../assets/img/images/piaBack.png")
               no-repeat;
             width: 80px;
@@ -699,8 +717,35 @@ export default {
         }
 
         .chart-online {
-          width: 100%;
+          position: relative;
+          width: 52%;
           height: 100%;
+          .chart-total {
+            position: absolute;
+            text-align: center;
+            z-index: 0;
+            background: url("../../../../assets/img/images/piaBack.png")
+              no-repeat;
+            width: 80px;
+            height: 80px;
+            background-size: cover;
+            left: 50%;
+            margin-left: -40px;
+            top: 50%;
+            margin-top: -40px;
+
+            .chart-num {
+              font-family: Bicubik;
+              font-size: 22px;
+              color: #fff;
+              margin-top: 16px;
+            }
+
+            .chart-name {
+              color: #b3b3b3;
+              font-size: 14px;
+            }
+          }
         }
 
         .chart-list {
@@ -775,6 +820,15 @@ export default {
               }
             }
           }
+          .state-xn {
+            .station-state:before {
+              background: #1986e0;
+            }
+
+            .station-data {
+              color: #1986e0;
+            }
+          }
           .state-gz {
             .station-state:before {
               background: #ba3237;
@@ -786,39 +840,31 @@ export default {
           }
           .state-wh {
             .station-state:before {
-              background: #e17e23;
+              background: #e17d24;
             }
 
             .station-data {
-              color: #e17e23;
+              color: #e17d24;
             }
           }
 
           .state-xd {
             .station-state:before {
-              background: #c531c7;
+              background: #c531cb;
             }
 
             .station-data {
-              color: #c531c7;
+              color: #c531cb;
             }
           }
-          .state-xn {
-            .station-state:before {
-              background: #05bb4c;
-            }
 
-            .station-data {
-              color: #05bb4c;
-            }
-          }
           .state-sl {
             .station-state:before {
-              background: #fff;
+              background: #a7a7a7;
             }
 
             .station-data {
-              color: #fff;
+              color: #a7a7a7;
             }
           }
 
@@ -841,70 +887,70 @@ export default {
             .online-name {
               display: flex;
               align-items: center;
-              font-size: 17px;
+              font-size: 16px;
             }
 
             .online-data {
-              font-family: "AgencyFB-Reg";
+              font-family: Bicubik;
               min-width: 67px;
               text-align: right;
               margin-right: 10px;
               color: #a7a7a7;
-              font-size: 19px;
+              font-size: 16px;
             }
 
             .online-percent {
               min-width: 55px;
-              font-size: 14px;
-              color: #fff;
+              font-size: 12px;
+              color: #b3b3b3;
               text-align: left;
               font-family: PingFangSC-Regular, PingFang SC;
             }
             &.online0 {
               .online-name:before {
-                background: red;
+                background: #1986e0;
               }
 
               .online-data {
-                color: red;
+                color: #1986e0;
               }
             }
 
             &.online1 {
               .online-name:before {
-                background: orange;
+                background: #ba3237;
               }
 
               .online-data {
-                color: orange;
+                color: #ba3237;
               }
             }
 
             &.online2 {
               .online-name:before {
-                background: yellow;
+                background: #e17d24;
               }
 
               .online-data {
-                color: yellow;
+                color: #e17d24;
               }
             }
             &.online3 {
               .online-name:before {
-                background: #05bb4c;
+                background: #c531cb;
               }
 
               .online-data {
-                color: #05bb4c;
+                color: #c531cb;
               }
             }
             &.online4 {
               .online-name:before {
-                background: #1b99ff;
+                background: #a7a7a7;
               }
 
               .online-data {
-                color: #1b99ff;
+                color: #a7a7a7;
               }
             }
           }