完成公司分析和区域分析页面功能

.env.development

@@ -1,7 +1,7 @@
 # VUE_APP_BASE_API = http://192.168.11.250:18600
 # VUE_APP_Economy = http://192.168.11.250:6060
 # VUE_APP_BASE_API = http://192.168.1.101:6060
-VUE_APP_Economy = http://192.168.1.103:6060
+VUE_APP_Economy = http://192.168.1.104:6060
 # 服务名，调用后台微服务
 VUE_APP_SERVER_NAME = /nem-api
 

src/api/headerNav.js

@@ -12,7 +12,7 @@ export function GetOrganization(data) {
 export function GetStationByCompany(data) {
   return request({
     baseURL: process.env.VUE_APP_Economy,
-    url: `benchmarking/wpByCplist?companyids=${data.companyids}&type=${data.type}`,
+    url: `benchmarking/wpBylist?companyids=${data.companyids}&type=${data.type}`,
     method: "get",
   });
 }

src/api/economy-homepage.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+//获取
+export const homePage = (data) => {
+  return request({
+    baseURL: process.env.VUE_APP_Economy,
+    url: `/economy/home?companyId=${data.companyId}&type=${data.type}&statype=${data.statype}`,
+    method: "get",
+  });
+};

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

@@ -0,0 +1,218 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "pie-chart",
+  componentName: "pie-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 传入数据
+    lossPower: {
+      type: Object,
+      default: () => {},
+    },
+    // 单位
+    unit: {
+      type: String,
+      default: "",
+    },
+    //倍率
+    ratio: {
+      type: Number,
+      default: 1,
+    },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => [
+        "#005bd9",
+        "#019f2e",
+        "#db6200",
+        "#a10f0f",
+        "#850894",
+        "#9fa0a2",
+      ],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      newlist: null,
+    };
+  },
+  watch: {
+    list: {
+      handler(newValue, oldValue) {
+        this.newlist = newValue;
+        this.$nextTick(() => {
+          this.newlist = this.list;
+          this.initChart();
+        });
+      },
+      deep: true,
+    },
+  },
+  computed: {},
+  methods: {
+    resize() {},
+    initChart() {
+      const chart = echarts.init(this.$el);
+      let option = {
+        color: this.color,
+        radar: [
+          {
+            indicator: [{ text: "" }],
+            center: ["47%", "50%"],
+            radius: [0, 79],
+            startAngle: 60,
+            splitNumber: 5,
+            shape: "circle",
+            name: {
+              formatter: "",
+              textStyle: {
+                color: "#0000FF",
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#0a389c",
+                shadowColor: "#0a389c",
+                shadowBlur: 10,
+              },
+            },
+          },
+        ],
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [0, 80],
+            center: ["47%", "50%"],
+            roseType: "area",
+            label: {
+              formatter: "{d}%",
+              position: "outer",
+              alignTo: "edge",
+              margin: 10,
+            },
+            itemStyle: {
+              normal: {
+                // 阴影的大小
+                shadowBlur: 20,
+                // 阴影水平方向上的偏移
+                shadowOffsetX: 0,
+                // 阴影垂直方向上的偏移
+                shadowOffsetY: 0,
+                // 阴影颜色
+                shadowColor: "rgba(0,70,199, 0.8)",
+              },
+              borderRadius: 2,
+            },
+            data: [
+              {
+                value: this.lossPower.XNSS
+                  ? this.lossPower?.XNSS?.toFixed(2)
+                  : 0,
+                name: "性能损失",
+              },
+              {
+                value: this.lossPower.WHSS
+                  ? this.lossPower?.WHSS?.toFixed(2)
+                  : 0,
+                name: "维护损失",
+              },
+              {
+                value: this.lossPower.GZSS
+                  ? this.lossPower?.GZSS?.toFixed(2)
+                  : 0,
+                name: "故障损失",
+              },
+              {
+                value: this.lossPower.XDSS
+                  ? this.lossPower?.XDSS?.toFixed(2)
+                  : 0,
+                name: "限电损失",
+              },
+              {
+                value: this.lossPower.SLSS
+                  ? this.lossPower?.SLSS?.toFixed(2)
+                  : 0,
+                name: "受累损失",
+              },
+            ],
+          },
+        ],
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
+    this.newlist = this.list;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/pie/pie-station-top5.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "pie-chart",
+  componentName: "pie-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [{ value: 0, name: "" }],
+    },
+
+    // 颜色
+    color: {
+      type: Array,
+      default: () => [
+        "#005bd9",
+        "#019f2e",
+        "#db6200",
+        "#a10f0f",
+        "#850894",
+        "#9fa0a2",
+      ],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      newlist: null,
+    };
+  },
+  watch: {
+    list: {
+      handler(newValue, oldValue) {
+        this.newlist = newValue;
+        this.$nextTick(() => {
+          this.newlist = this.list;
+          this.initChart();
+        });
+      },
+      deep: true,
+    },
+  },
+  computed: {},
+  methods: {
+    resize() {},
+    initChart() {
+      const chart = echarts.init(this.$el);
+      let option = {
+        color: this.color,
+        radar: [
+          {
+            indicator: [{ text: "" }],
+            center: ["47%", "50%"],
+            radius: [0, 79],
+            startAngle: 60,
+            splitNumber: 5,
+            shape: "circle",
+            name: {
+              formatter: "",
+              textStyle: {
+                color: "#0000FF",
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#0a389c",
+                shadowColor: "#0a389c",
+                shadowBlur: 10,
+              },
+            },
+          },
+        ],
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [0, 80],
+            center: ["47%", "50%"],
+            roseType: "area",
+            label: {
+              formatter: "{d}%",
+              //   position: "outer",
+              //   alignTo: "edge",
+              //   margin: 10,
+              padding: [-20, -25, 10, 5],
+            },
+            itemStyle: {
+              normal: {
+                // 阴影的大小
+                shadowBlur: 20,
+                // 阴影水平方向上的偏移
+                shadowOffsetX: 0,
+                // 阴影垂直方向上的偏移
+                shadowOffsetY: 0,
+                // 阴影颜色
+                shadowColor: "rgba(0,70,199, 0.8)",
+              },
+              borderRadius: 2,
+            },
+            data: this.list.length
+              ? this.list
+              : Array(5).fill({ value: 0, name: "" }),
+          },
+        ],
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
+    this.newlist = this.list;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/router/index.js

@@ -359,7 +359,7 @@ export const asyncRoutes = [
           import("@/views/layout/economicsOperation/homePage/index.vue"),
         name: "homePage",
         meta: {
-          title: "首页",
+          title: "区域分析",
           icon: "icon-Simple-matrix",
         },
       },
@@ -369,7 +369,7 @@ export const asyncRoutes = [
           import("@/views/layout/economicsOperation/homePage/indexGF.vue"),
         name: "homePageGf",
         meta: {
-          title: "首页",
+          title: "区域分析(光伏)",
           icon: "icon-Simple-matrix",
         },
       },
@@ -379,7 +379,7 @@ export const asyncRoutes = [
           import("@/views/layout/economicsOperation/companyHomepage/index.vue"),
         name: "comphomepage",
         meta: {
-          title: "首页",
+          title: "公司分析",
           icon: "icon-Simple-matrix",
         },
       },
@@ -391,7 +391,7 @@ export const asyncRoutes = [
           ),
         name: "comphomepageGf",
         meta: {
-          title: "首页",
+          title: "公司分析(光伏)",
           icon: "icon-Simple-matrix",
         },
       },

src/views/layout/economicsOperation/homePage/components/card.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="photovoltaicCard" id="photovoltaicCard">
     <el-row :gutter="20">
-      <div v-if="dataSourceList.length > 0" class="data-cards">
-        <el-col :span="6" v-for="item in dataSourceList" :key="item.code">
+      <div v-if="dataSourceList?.length > 0" class="data-cards">
+        <el-col :span="6" v-for="item in dataSourceList" :key="item?.id">
           <div class="card-list">
             <div class="border-corner">
               <div class="border-top"></div>
@@ -10,24 +10,23 @@
               <div class="border-bottom"></div>
               <div class="border-left"></div>
             </div>
-            <div class="card-status" v-if="isStation" @click="showCurve(item)">
+            <!-- <div class="card-status" v-if="isStation" @click="showCurve(item)">
               <img
                 :src="
-                  item.CZZT?.value == 0
+                  item?.CZZT?.value == 0
                     ? require('@assets/img/images/state_normal.png')
-                    : item.CZZT?.value == 1
+                    : item?.CZZT?.value == 1
                     ? require('@assets/img/images/state_fault.png')
                     : require('@assets/img/images/state_broken-chain.png')
                 "
               />
-            </div>
+            </div> -->
             <!--            <img :src="item.image ? item.image : !isStation ? require('@assets/img/images/level-one_company.png') : require('@assets/img/images/level-two_power-plant.png')" class="card-img" @click="jumpLevelTwo(item)">-->
             <img
-              v-show="theme === 'operate'"
               :src="
-                item.image
-                  ? item.image
-                  : item.orgType != 'STA'
+                item?.image
+                  ? item?.image
+                  : item?.orgType != 'STA'
                   ? require('@assets/img/images/level-one_company.png')
                   : require('@assets/img/images/level-two_power-plant.png')
               "
@@ -35,44 +34,11 @@
               @click="jumpLevelTwo(item)"
             />
 
-            <div v-show="theme === 'maintenance'" class="leftData">
-              <div>
-                <div class="data-num">
-                  <el-tooltip
-                    class="box-item"
-                    effect="dark"
-                    :content="getchangeTime(item.RFDL.dateTime)"
-                    placement="top"
-                  >
-                    <div>
-                      <span>{{ item.RFDL.value }}</span> kWh
-                    </div>
-                  </el-tooltip>
-                </div>
-                <div class="data-prop">日发电量</div>
-              </div>
-              <div>
-                <div class="data-num">
-                  <el-tooltip
-                    class="box-item"
-                    effect="dark"
-                    :content="getchangeTime(item.RLYXS.dateTime)"
-                    placement="top"
-                  >
-                    <div>
-                      <span>{{ item.RLYXS.value }}</span> h
-                    </div>
-                  </el-tooltip>
-                </div>
-                <div class="data-prop">日等效小时</div>
-              </div>
-            </div>
-
             <div class="card-data">
               <div class="card-company">
                 <div
                   class="company-name card-hover"
-                  :title="item.anames"
+                  :title="item?.name"
                   @click="jumpLevelTwo(item)"
                 >
                   <i
@@ -80,210 +46,104 @@
                       isStation ? 'icon-Photovoltaic-pv' : 'icon-enterprise'
                     "
                   ></i>
-                  {{ item.anames }}
-                </div>
-                <div class="company-address" :title="item.address">
-                  <i class="icon-positioning"></i>
-                  {{ item.address }}
+                  {{ item?.name }}
                 </div>
               </div>
               <ul class="data-list" v-show="theme === 'operate'">
-                <li>
-                  <div class="data-prop">接入容量</div>
+                <!-- <li>
+                  <div class="data-prop">发电量</div>
                   <div class="data-num">
-                    <span>{{ item.jrrl || 0 }}</span> kWp
+                    <span>{{ item?.fdl?.toFixed(2) || 0 }}</span> 万kWh
                   </div>
-                </li>
+                </li> -->
                 <li>
-                  <div class="data-prop">实际功率</div>
+                  <div class="data-prop">故障损失</div>
                   <div class="data-num">
-                    <el-tooltip
-                      class="box-item"
-                      effect="dark"
-                      :content="getchangeTime(item.SSZGL.dateTime)"
-                      placement="top"
-                    >
-                      <div>
-                        <span>{{ item.SSZGL.value }}</span> kW
-                      </div>
-                    </el-tooltip>
+                    <div>
+                      <span>{{ item?.gzssdl?.toFixed(2) || 0 }}</span> 万kWh
+                    </div>
                   </div>
                 </li>
                 <li>
-                  <div class="data-prop">日发电量</div>
+                  <div class="data-prop">维护损失</div>
                   <div class="data-num">
-                    <el-tooltip
-                      class="box-item"
-                      effect="dark"
-                      :content="getchangeTime(item.RFDL.dateTime)"
-                      placement="top"
-                    >
-                      <div>
-                        <span>{{ item.RFDL.value }}</span> kWh
-                      </div>
-                    </el-tooltip>
+                    <div>
+                      <span>{{ item?.whssdl?.toFixed(2) || 0 }}</span> 万kWh
+                    </div>
                   </div>
                 </li>
                 <li>
-                  <div class="data-prop">月发电量</div>
+                  <div class="data-prop">限电损失</div>
                   <div class="data-num">
-                    <el-tooltip
-                      class="box-item"
-                      effect="dark"
-                      :content="getchangeTime(item.YFDL.dateTime)"
-                      placement="top"
-                    >
-                      <div>
-                        <span>{{ item.YFDL.value }}</span> 万kWh
-                      </div>
-                    </el-tooltip>
+                    <div>
+                      <span>{{ item?.xdssdl?.toFixed(2) || 0 }}</span> 万kWh
+                    </div>
                   </div>
                 </li>
                 <li>
-                  <div class="data-prop">日等效小时</div>
+                  <div class="data-prop">性能损失</div>
                   <div class="data-num">
-                    <el-tooltip
-                      class="box-item"
-                      effect="dark"
-                      :content="getchangeTime(item.RLYXS.dateTime)"
-                      placement="top"
-                    >
-                      <div>
-                        <span>{{ item.RLYXS.value }}</span> h
-                      </div>
-                    </el-tooltip>
+                    <div>
+                      <span>{{ item?.xnssdl?.toFixed(2) || 0 }}</span> 万kWh
+                    </div>
                   </div>
                 </li>
                 <li>
-                  <div class="data-prop">
-                    {{ !isStation ? "总发电量" : "总辐射量" }}
-                  </div>
+                  <div class="data-prop">受累损失</div>
                   <div class="data-num">
-                    <el-tooltip
-                      class="box-item"
-                      effect="dark"
-                      :content="
-                        getchangeTime(
-                          !isStation ? item.ZFDL.dateTime : item.ZFSL.dateTime
-                        )
-                      "
-                      placement="top"
-                    >
-                      <div>
-                        <span>{{
-                          !isStation ? item.ZFDL.value : item.ZFSL.value
-                        }}</span>
-                        {{ !isStation ? "万kWh" : "MJ/㎡" }}
-                      </div>
-                    </el-tooltip>
+                    <div>
+                      <span>{{ item?.slssdl?.toFixed(2) || 0 }}</span>
+                      万kWh
+                    </div>
                   </div>
                 </li>
               </ul>
               <ul class="data-maintenance" v-show="theme === 'maintenance'">
-                <li class="child-interrupt">
-                  <div class="service-label">通讯中断</div>
-                  <el-tooltip
-                    class="box-item"
-                    effect="dark"
-                    :content="getchangeTime(item.TXZDTS?.dateTime)"
-                    placement="top"
-                  >
-                    <div>
-                      <span class="service-data">{{
-                        dataFix(item.TXZDTS?.value)
+                <li>
+                  <div class="maintenance-item">
+                    <div class="text-wrapper">
+                      <span class="name">{{
+                        typeStr == -1 ? "风能利用率" : "光能利用率"
                       }}</span>
-                      {{
-                        calcPercentage(
-                          [
-                            item.TXZDTS?.value,
-                            item.SBTJTS?.value,
-                            item.DZYXTS?.value,
-                            item.ZCYXTS?.value,
-                          ],
-                          0
-                        )
-                      }}
+                      <span class="count" :class="typeStr == -1 ? 'fd' : 'gf'"
+                        >{{ item?.gnlyl }}%
+                        <i class="text">(100%)</i>
+                      </span>
                     </div>
-                  </el-tooltip>
-                </li>
-                <li class="child-halt">
-                  <div class="service-label">设备停机</div>
-                  <el-tooltip
-                    class="box-item"
-                    effect="dark"
-                    :content="getchangeTime(item.SBTJTS?.dateTime)"
-                    placement="top"
-                  >
-                    <div>
-                      <span class="service-data">{{
-                        dataFix(item.SBTJTS?.value)
-                      }}</span>
-                      {{
-                        calcPercentage(
-                          [
-                            item.TXZDTS?.value,
-                            item.SBTJTS?.value,
-                            item.DZYXTS?.value,
-                            item.ZCYXTS?.value,
-                          ],
-                          1
-                        )
-                      }}
+                    <div class="process-wrapper">
+                      <div
+                        class="process-bar"
+                        :style="{ width: item?.gnlyl + '%' }"
+                        :class="typeStr == -1 ? 'fd' : 'gf'"
+                      >
+                        <span class="img"></span>
+                      </div>
                     </div>
-                  </el-tooltip>
+                  </div>
                 </li>
-                <li class="child-fault">
-                  <div class="service-label">带障运行</div>
-                  <el-tooltip
-                    class="box-item"
-                    effect="dark"
-                    :content="getchangeTime(item.DZYXTS?.dateTime)"
-                    placement="top"
-                  >
-                    <div>
-                      <span class="service-data">{{
-                        dataFix(item.DZYXTS?.value)
-                      }}</span>
-                      {{
-                        calcPercentage(
-                          [
-                            item.TXZDTS?.value,
-                            item.SBTJTS?.value,
-                            item.DZYXTS?.value,
-                            item.ZCYXTS?.value,
-                          ],
-                          2
-                        )
-                      }}
+                <li>
+                  <div class="maintenance-data">
+                    <div class="data-prop">发电量</div>
+                    <div class="data-num">
+                      <span>{{ item?.fdl?.toFixed(2) || 0 }}</span> 万kWh
                     </div>
-                  </el-tooltip>
-                </li>
-                <li class="child-normal">
-                  <div class="service-label">正常运行</div>
-                  <el-tooltip
-                    class="box-item"
-                    effect="dark"
-                    :content="getchangeTime(item.ZCYXTS?.dateTime)"
-                    placement="top"
-                  >
-                    <div>
-                      <span class="service-data">{{
-                        dataFix(item.ZCYXTS?.value)
-                      }}</span>
-                      {{
-                        calcPercentage(
-                          [
-                            item.TXZDTS?.value,
-                            item.SBTJTS?.value,
-                            item.DZYXTS?.value,
-                            item.ZCYXTS?.value,
-                          ],
-                          3
-                        )
-                      }}
+                  </div>
+                  <div class="maintenance-data">
+                    <div class="data-prop">理论发电量</div>
+                    <div class="data-num">
+                      <div>
+                        <span>{{ item?.llfdl?.toFixed(2) || 0 }}</span> 万kWh
+                      </div>
                     </div>
-                  </el-tooltip>
+                  </div>
                 </li>
+
+                <!-- <li>
+                  <div class="maintenance-item">
+                    <div class="name">健康状态</div>
+                    <div class="process-bar"></div>
+                  </div>
+                </li> -->
               </ul>
             </div>
           </div>
@@ -391,20 +251,35 @@ export default {
       }
     },
     jumpLevelTwo(param) {
-      if (param.orgType == "STA") {
-        debugger
-        console.log({ companyCode: param.code, stationCode: param.code,type:this.typeStr})
+      if (param.id.includes("STA")) {
+        // debugger;
+        // console.log({
+        //   companyCode: param.code,
+        //   stationCode: param.code,
+        //   type: this.typeStr,
+        // });
         // 场站跳转详情
-        this.$router.push({
-          name: "lighthome",
-          query: { companyCode: param.code, stationCode: param.code,type:this.typeStr},
-        });
+        // this.$router.push({
+        //   name: "lighthome",
+        //   query: {
+        //     companyCode: param.code,
+        //     stationCode: param.code,
+        //     type: this.typeStr,
+        //   },
+        // });
       } else {
         // 公司跳转场站
-        this.$router.push({
-          path: "/stateMonitor/photovoltaicLevelTwoStation",
-          query: { companyCode: param.code},
-        });
+        if (this.typeStr == -1) {
+          this.$router.push({
+            path: "/economicsOperation/comphomepage",
+            query: { companyCode: param.id },
+          });
+        } else {
+          this.$router.push({
+            path: "/economicsOperation/comphomepageGf",
+            query: { companyCode: param.id },
+          });
+        }
       }
     },
     dataFix(num) {
@@ -569,7 +444,7 @@ export default {
           }
         }
         .data-prop {
-          font-font: 14px;
+          font-size: 14px;
         }
       }
 
@@ -622,26 +497,88 @@ export default {
           }
         }
         .data-maintenance {
-          margin-top: 15px;
+          margin-top: 25px;
           li {
             display: flex;
             justify-content: space-between;
-            margin-bottom: 10px;
+            margin-bottom: 18px;
             font-size: 14px;
-            .service-label {
+            width: 100%;
+            .maintenance-item {
               display: flex;
-              align-items: center;
-            }
-            .service-label::before {
-              content: "";
-              display: inline-block;
-              width: 5px;
-              height: 5px;
-              background: #a7a7a7;
-              margin-right: 5px;
+              width: 100%;
+              flex-direction: column;
+              .process-wrapper {
+                height: 4.5px;
+                max-width: 100%;
+                background-color: rgba(142, 176, 255, 0.2);
+              }
+              .process-bar {
+                position: relative;
+                height: 4.5px;
+                max-width: 100%;
+
+                background: linear-gradient(90deg, #561f00, #853000, #f78712);
+                .img {
+                  background: url("../../../../../assets/img/home/generatingCapacityDay.png")
+                    no-repeat;
+                  position: absolute;
+                  display: inline-block;
+                  width: 39px;
+                  height: 39px;
+                  top: -17px;
+                  right: -22px;
+                  transform: scale(0.8);
+                }
+                &.fd {
+                  background: linear-gradient(90deg, #001442, #1c99ff);
+                  .img {
+                    background: url("../../../../../assets/img/home/generatingCapacityMonth.png")
+                      no-repeat;
+                  }
+                }
+                &.gf {
+                  background: linear-gradient(90deg, #561f00, #853000, #f78712);
+                  .img {
+                    background: url("../../../../../assets/img/home/generatingCapacityDay.png")
+                      no-repeat;
+                  }
+                }
+              }
+              .text-wrapper {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 5px;
+                .count {
+                  font-size: 14px;
+                  color: #ff8300;
+                  font-family: "Arial";
+                  font-weight: bolder;
+                  .text {
+                    font-size: 11px;
+                  }
+                  &.fd {
+                    color: #1c99ff;
+                  }
+                  &.gf {
+                    color: #ff8300;
+                  }
+                }
+              }
             }
-            .service-data {
-              margin-right: 10px;
+            .maintenance-data {
+              .data-prop {
+                margin-bottom: 10px;
+              }
+
+              .data-num {
+
+                span {
+                  display: inline-block;
+                  min-width: 50px;
+                  color: rgb(27, 147, 244);
+                }
+              }
             }
           }
           .child-interrupt {

src/views/layout/economicsOperation/homePage/components/headerBtn.vue

@@ -1,267 +0,0 @@
-<template>
-  <el-row class="headerButton">
-<!--      <div class="nav_right headerRight">-->
-<!--          <i class="active_icon icon-enterprise"></i>-->
-<!--          <span>{{region[0]?.aname}}</span>-->
-<!--      </div>-->
-    <el-select v-model="typeNode" style="margin-right: 8px" @change="levels1DataChang">
-      <el-option
-          v-for="(item,index) in levels1Data"
-          :key="index"
-          :label="item.name"
-          :value="item.type">
-      </el-option>
-    </el-select>
-    <el-select v-model="checkNode" style="margin-right: 8px" placeholder="请选择" @change="dataChang">
-      <el-option
-          v-for="item in OrganizationList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-      </el-option>
-    </el-select>
-        <el-select v-model="checkNodes" placeholder="请选择" @change="dataChangs">
-            <el-option
-                    v-for="(item,index) in allPowerStation"
-                    :key="index"
-                    :label="item.CZAMC"
-                    :value="item.CZBM">
-            </el-option>
-        </el-select>
-  </el-row>
-</template>
-<script>
-import {GetPowerStation, getOrganization,getPowerstationTypeList} from '@/api/home'
-
-export default {
-  name:'headerButton',
-  props:{
-    companyCode:{
-      type: String,
-      default: '',
-    },
-    code:{
-      type: String,
-      default: '',
-    },
-    typeStr:{
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      //风光类型
-      levels1Data:[],
-      typeNode:'',
-      OrganizationList: null,
-      checkNode:'',
-      checkNodes:'',
-      leftIndex:this.type,
-      allPowerStation:null,
-        region:[],
-    }
-  },
-  async created() {
-    console.log(this.companyCode,this.code,this.typeStr)
-    if(this.companyCode){
-      this.checkNode=this.companyCode;
-    }
-    if(this.code){
-      this.checkNodes=this.code;
-    }
-    if(this.typeStr){
-      this.typeNode=this.typeStr;
-    }
-    //获取风和光
-    await this.gettypeData();
-    //获取区域公司
-    await this.getOrganizationList();
-    //根据区域公司编码获取场站信息
-    await this.getPowerStation();
-  },
-  methods: {
-    //获取风光类型
-    async gettypeData() {
-      const data = await getPowerstationTypeList({code:'classification'});
-      this.levels1Data=data.filter(obj=>obj.flag==0);
-      if(!this.typeNode){
-        this.typeNode=this.levels1Data[0].type;
-      }
-    },
-    //切换类型
-    levels1DataChang(){
-      this.getOrganizationList();
-    },
-    //获取区域公司
-    async getOrganizationList() {
-      const data = await getOrganization({type:this.typeNode});
-      var arr = [];
-      if(data && data.length>0){
-          this.region=data
-          let data1=data.slice(1);
-     data1.forEach(item => {
-          var obj = {};
-          obj.value = item.code;
-          obj.label = item.aname;
-          arr.push(obj);
-        })
-        if(!this.checkNode){
-          this.checkNode = data1[0].code;
-        }
-        this.OrganizationList = arr;
-      }
-    },
-    //获取场站信息
-    async getPowerStation() {
-      const data = await GetPowerStation({companyCode: this.checkNode, stationType: this.leftIndex})
-       if(data) {
-         this.allPowerStation=data;
-         // this.checkNodes=data[0].CZBM
-       const res= data.find(obj=>{
-           return obj.CZBM==this.checkNodes;
-         })
-         if(!res){
-           this.checkNodes=data[0].CZBM
-         }
-           this.$emit('renderData',this.checkNode,this.checkNodes);
-       }
-    },
-    //区域切换
-    async dataChang() {
-      //根据区域公司编码获取场站信息
-      await this.getPowerStation();
-    },
-    //点击场站切换数据
-      dataChangs() {
-        this.$emit('renderData',this.checkNode,this.checkNodes);
-    }
-  },
-}
-</script>
-<style lang="less" scoped>
-  .headerRight {
-    padding: 0 14px;
-    height: 25px;
-    line-height: 25px;
-    background-color: rgba(0, 70, 199, 0.4) !important;
-    border-radius: 16px;
-    text-align: center;
-    margin-right: 15px;
-    cursor: pointer;
-
-    span {
-      width: 29px;
-      height: 12px;
-      font-size: 14px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #fff ;
-
-    }
-
-    i {
-      font-size: 16px;
-      color: #1c99ff;
-      position: relative;
-      margin-right: 9px;
-      vertical-align: -9%;
-    }
-
-  }
-.headerButton {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 10px 0 15px 0;
-  .active {
-    background-color: rgba(0, 70, 199, 0.4) !important;
-    color: #fff !important;
-  }
-
-  .light {
-    background-color: rgba(255, 131, 0, 0.6)!important;
-    color: #fff !important;
-  }
-
-  .check {
-    width: 100px;
-    height: 25px;
-    line-height: 23px;
-    box-sizing: border-box;
-    background-color: #2A374F;
-    border-radius: 12.5px;
-    border: 1px solid #43516B;
-    color: #B3B3B3;
-    margin-left: 5px;
-
-    > span:first-child {
-      border-top-left-radius: 12.5px;
-      border-bottom-left-radius: 12.5px;
-    }
-
-    > span:last-child {
-      border-top-right-radius: 12.5px;
-      border-bottom-right-radius: 12.5px;
-    }
-
-    > span {
-      display: inline-block;
-      width: 50%;
-      text-align: center;
-    }
-  }
-
-  .icon {
-    font-size: 18px;
-    margin: 0 12px;
-  }
-
-  .icon .icon-wind {
-    color: #1C99FF;
-  }
-
-  .icon .icon-Photovoltaic-pv {
-    color: rgba(255, 131, 0, 1);
-  }
-
-  .childNode {
-    display: flex;
-    width: 85%;
-    >div {
-      padding: 0 20px;
-      height: 25px;
-      line-height: 25px;
-      border-radius: 12.5px;
-      background-color: rgba(0, 70, 199, 0.2);
-      color: #B3B3B3;
-      margin-right: 5px;
-    }
-    .station-name{
-      padding: 0 18px;
-    }
-  }
-  .more{
-    position: absolute;
-    top: 10px;
-    right: -60px;
-    display: flex;
-    .button{
-      width: 25px;
-      height: 25px;
-      line-height: 25px;
-      text-align: center;
-      border-radius: 50%;
-      background-color: rgba(0, 70, 199, 0.2);
-      color: rgba(179, 179, 179, 1);
-    }
-    .button{
-      margin-right: 5px;
-    }
-  }
-  .activeBtn{
-    background-color: rgba(0, 70, 199, 0.4)!important;
-    color: #fff!important;
-  }
-}
-</style>

src/views/layout/economicsOperation/index.vue

@@ -25,14 +25,14 @@ export default {
       showMenu: false,
       secondLevelTitle: [
         {
-          titleName: "区域首页",
+          titleName: "区域分析",
           icon: "icon-dimension-new",
           path: "/economicsOperation/homePageGf",
         },
         {
-          titleName: "公司首页",
+          titleName: "公司分析",
           icon: "icon-power-curve",
-          path: "/economicsOperation/comphomepage",
+          path: "/economicsOperation/comphomepageGf",
         },
         
         {