Browse Source

新增公司首页和区域首页

baiyanting 2 years ago
parent
commit
43cd0cc300

+ 51 - 19
src/router/index.js

@@ -1,4 +1,8 @@
-import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from "vue-router";
 
 export const asyncRoutes = [
   {
@@ -370,6 +374,28 @@ export const asyncRoutes = [
         },
       },
       {
+        path: "comphomepage",
+        component: () =>
+          import("@/views/layout/economicsOperation/companyHomepage/index.vue"),
+        name: "comphomepage",
+        meta: {
+          title: "首页",
+          icon: "icon-Simple-matrix",
+        },
+      },
+      {
+        path: "comphomepageGf",
+        component: () =>
+          import(
+            "@/views/layout/economicsOperation/companyHomepage/indexGf.vue"
+          ),
+        name: "comphomepageGf",
+        meta: {
+          title: "首页",
+          icon: "icon-Simple-matrix",
+        },
+      },
+      {
         path: "benchmarkingManagement",
         redirect: "benchmarkingManagement/performanceRankingList",
         component: () =>
@@ -879,24 +905,30 @@ export const asyncRoutes = [
   },
 ];
 
-export const constantRoutes=[{
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
-}, {
-    path: '/logout',
-    component: () => import('@/views/logout'),
-    hidden: true
-}];
+export const constantRoutes = [
+  {
+    path: "/login",
+    component: () => import("@/views/login"),
+    hidden: true,
+  },
+  {
+    path: "/logout",
+    component: () => import("@/views/logout"),
+    hidden: true,
+  },
+];
 
 const router = createRouter({
-    history: createWebHashHistory(),
-    routes: [...constantRoutes,{
-        path: '/',
-        component: () => import('@/views/layout'),
-        hidden: true,
-        children:[...asyncRoutes],
-    }],
-})
+  history: createWebHashHistory(),
+  routes: [
+    ...constantRoutes,
+    {
+      path: "/",
+      component: () => import("@/views/layout"),
+      hidden: true,
+      children: [...asyncRoutes],
+    },
+  ],
+});
 
-export default router
+export default router;

File diff suppressed because it is too large
+ 1425 - 0
src/views/layout/economicsOperation/companyHomepage/index.vue


File diff suppressed because it is too large
+ 1425 - 0
src/views/layout/economicsOperation/companyHomepage/indexGf.vue


+ 701 - 0
src/views/layout/economicsOperation/homePage/components/card.vue

@@ -0,0 +1,701 @@
+<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 class="card-list">
+            <div class="border-corner">
+              <div class="border-top"></div>
+              <div class="border-right"></div>
+              <div class="border-bottom"></div>
+              <div class="border-left"></div>
+            </div>
+            <div class="card-status" v-if="isStation" @click="showCurve(item)">
+              <img
+                :src="
+                  item.CZZT?.value == 0
+                    ? require('@assets/img/images/state_normal.png')
+                    : item.CZZT?.value == 1
+                    ? require('@assets/img/images/state_fault.png')
+                    : require('@assets/img/images/state_broken-chain.png')
+                "
+              />
+            </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'
+                  ? require('@assets/img/images/level-one_company.png')
+                  : require('@assets/img/images/level-two_power-plant.png')
+              "
+              class="card-img"
+              @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"
+                  @click="jumpLevelTwo(item)"
+                >
+                  <i
+                    :class="
+                      isStation ? 'icon-Photovoltaic-pv' : 'icon-enterprise'
+                    "
+                  ></i>
+                  {{ item.anames }}
+                </div>
+                <div class="company-address" :title="item.address">
+                  <i class="icon-positioning"></i>
+                  {{ item.address }}
+                </div>
+              </div>
+              <ul class="data-list" v-show="theme === 'operate'">
+                <li>
+                  <div class="data-prop">接入容量</div>
+                  <div class="data-num">
+                    <span>{{ item.jrrl || 0 }}</span> kWp
+                  </div>
+                </li>
+                <li>
+                  <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>
+                </li>
+                <li>
+                  <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>
+                </li>
+                <li>
+                  <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>
+                </li>
+                <li>
+                  <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>
+                </li>
+                <li>
+                  <div class="data-prop">
+                    {{ !isStation ? "总发电量" : "总辐射量" }}
+                  </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>
+                </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)
+                      }}</span>
+                      {{
+                        calcPercentage(
+                          [
+                            item.TXZDTS?.value,
+                            item.SBTJTS?.value,
+                            item.DZYXTS?.value,
+                            item.ZCYXTS?.value,
+                          ],
+                          0
+                        )
+                      }}
+                    </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>
+                  </el-tooltip>
+                </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
+                        )
+                      }}
+                    </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>
+                  </el-tooltip>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </el-col>
+      </div>
+      <div v-else class="empty-data">
+        <el-col :span="24">暂无数据</el-col>
+      </div>
+    </el-row>
+
+    <qushi-dialog ref="child" :chartName="'对比曲线'"></qushi-dialog>
+  </div>
+</template>
+
+<script>
+import qushiDialog from "@/views/layout/stateMonitor/factoryMonitor/components/qushiDialog";
+export default {
+  name: "photovoltaicCard", // 公司首页-卡片
+  components: {
+    qushiDialog,
+  },
+  props: {
+    dataSource: {
+      type: Array,
+      required: true,
+    },
+    chooseCom: {
+      type: Boolean,
+      default: false,
+    },
+    isStation: {
+      type: Boolean,
+      default: false,
+    },
+    theme: {
+      type: String,
+      default: "operate",
+    },
+    typeStr: {
+      type: String,
+      default: "-1",
+    },
+  },
+  data() {
+    return {
+      dataSourceList: [],
+      page: {
+        pagesize: 8,
+        currentPage: 2,
+        total: 0,
+      },
+    };
+  },
+
+  methods: {
+    //转换时间
+    getchangeTime(data) {
+      if (data != undefined && data != "") {
+        var date = new Date(data);
+        var y = date.getFullYear();
+        var m = date.getMonth() + 1;
+        var d = date.getDate();
+        var h = date.getHours();
+        var f = date.getMinutes();
+        var s = date.getSeconds();
+        m = m < 10 ? "0" + m : m;
+        d = d < 10 ? "0" + d : d;
+        h = h < 10 ? "0" + h : h;
+        f = f < 10 ? "0" + f : f;
+        s = s < 10 ? "0" + s : s;
+        return y + "-" + m + "-" + d + " " + h + ":" + f + ":" + s;
+      } else {
+        return "--";
+      }
+    },
+    // 点击状态 打开对比曲线图
+    showCurve(item) {
+      const param = [
+        {
+          statiomName: "场站状态",
+          stse: item.NAME,
+          sts: item.curveData.curveCZZT,
+        },
+      ];
+      // const param = [
+      //   {statiomName: '实时功率', stse: item.NAME, sts: item.curveData.curveSSZGL},
+      //   {statiomName: '日发电量', stse: item.NAME, sts: item.curveData.curveRFDL},
+      //   {statiomName: '月发电量', stse: item.NAME, sts: item.curveData.curveYFDL},
+      //   {statiomName: '总辐射量', stse: item.NAME, sts: item.curveData.curveZFSL},
+      //   {statiomName: '日等效小时', stse: item.NAME, sts: item.curveData.curveRLYXS},
+      // ]
+      this.$refs.child.openCurvDatas(param);
+    },
+    calcPercentage(arr, index) {
+      let total = 0;
+      arr.forEach((num) => {
+        if (typeof num == "number") {
+          total += num;
+        }
+      });
+      if (typeof arr[index] == "number") {
+        return ((arr[index] / total) * 100).toFixed(2) + "%";
+      } else {
+        return arr[index];
+      }
+    },
+    jumpLevelTwo(param) {
+      if (param.orgType == "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},
+        });
+      } else {
+        // 公司跳转场站
+        this.$router.push({
+          path: "/stateMonitor/photovoltaicLevelTwoStation",
+          query: { companyCode: param.code},
+        });
+      }
+    },
+    dataFix(num) {
+      let str = typeof num == "number" ? Number(num).toFixed(0) : num;
+      return str;
+    },
+    deepClone(ob) {
+      var obj = JSON.stringify(ob);
+      var objClone = JSON.parse(obj);
+      return objClone;
+    },
+    addRollListener() {
+      const dom = document.getElementById("photovoltaicCard");
+      dom.addEventListener("scroll", () => {
+        const scrollTop = dom.scrollTop;
+        const offsetHeight = dom.offsetHeight;
+        const clientHeight = dom.clientHeight;
+        const scrollHeight = dom.scrollHeight;
+
+        if (clientHeight + scrollTop + 1 > scrollHeight) {
+          if (
+            this.page.total + this.page.currentPage <
+            this.page.pagesize * this.page.currentPage
+          ) {
+            return;
+          }
+          this.page.currentPage = this.page.currentPage + 1;
+          let arr = this.deepClone(this.dataSource);
+          this.dataSourceList = arr.splice(
+            0,
+            this.page.pagesize * this.page.currentPage
+          );
+        }
+      });
+    },
+  },
+  mounted() {},
+  unmounted() {},
+  computed: {},
+  watch: {
+    dataSource() {
+      this.page.total = this.dataSource.length;
+      let arr = this.deepClone(this.dataSource);
+      this.dataSourceList = arr.splice(
+        0,
+        this.page.pagesize * this.page.currentPage
+      );
+
+      // const dom = document.getElementById('photovoltaicCard')
+      // dom.scrollTop=0;
+      // this.page.currentPage=2;
+
+      this.$nextTick(() => this.addRollListener());
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+::v-deep .el-input--mini .el-input__inner {
+  background: #212933 !important;
+}
+
+.photovoltaicCard {
+  display: flex;
+  flex-wrap: wrap;
+  height: calc(100vh - 414px);
+  overflow: auto;
+  padding-bottom: 50px;
+
+  .el-row {
+    width: 100%;
+
+    .card-hover {
+      cursor: pointer;
+    }
+
+    .card-list {
+      position: relative;
+      display: flex;
+      width: 100%;
+      height: 250px;
+      background: rgba(11, 11, 11, 0.45);
+      padding: 25px;
+      overflow: hidden;
+      margin-bottom: 15px;
+
+      .card-status {
+        position: absolute;
+        width: 66px;
+        top: 0px;
+        right: 0px;
+        z-index: 5;
+        cursor: pointer;
+      }
+
+      .border-corner {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+        z-index: 0;
+
+        div {
+          position: absolute;
+          width: 6px;
+          height: 6px;
+          border-color: #fff;
+        }
+
+        .border-top {
+          border-top: 1px solid;
+          border-left: 1px solid;
+        }
+
+        .border-right {
+          right: 0;
+          border-top: 1px solid;
+          border-right: 1px solid;
+        }
+
+        .border-bottom {
+          right: 0;
+          bottom: 0;
+          border-bottom: 1px solid;
+          border-right: 1px solid;
+        }
+
+        .border-left {
+          bottom: 0;
+          border-bottom: 1px solid;
+          border-left: 1px solid;
+        }
+      }
+
+      .card-img {
+        position: relative;
+        z-index: 1;
+        width: 158px;
+        height: 100%;
+        margin-right: 25px;
+        cursor: pointer;
+      }
+
+      .leftData {
+        width: 158px;
+        height: 100%;
+        margin-right: 25px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .data-num {
+          font-size: 16px;
+          color: #1b99ff;
+          > div > span {
+            font-family: "Bicubik";
+            font-size: 22px;
+          }
+          > div:last-child {
+            margin-top: 15px;
+          }
+        }
+        .data-prop {
+          font-font: 14px;
+        }
+      }
+
+      .card-data {
+        position: relative;
+        z-index: 1;
+        flex: 1;
+        width: 50%;
+
+        .card-company {
+          padding-bottom: 10px;
+          border-bottom: 1px solid #3c3f43;
+
+          .company-name {
+            font-size: 16px;
+            color: #fff;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .company-address {
+            margin-top: 5px;
+            color: #b3b3b3;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+        .data-list {
+          margin-top: 15px;
+          display: flex;
+          flex-wrap: wrap;
+
+          li {
+            width: 50%;
+            margin-bottom: 8px;
+
+            .data-prop {
+              margin-bottom: 4px;
+            }
+
+            .data-num {
+              span {
+                display: inline-block;
+                min-width: 50px;
+                color: rgb(27, 147, 244);
+              }
+            }
+          }
+        }
+        .data-maintenance {
+          margin-top: 15px;
+          li {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            font-size: 14px;
+            .service-label {
+              display: flex;
+              align-items: center;
+            }
+            .service-label::before {
+              content: "";
+              display: inline-block;
+              width: 5px;
+              height: 5px;
+              background: #a7a7a7;
+              margin-right: 5px;
+            }
+            .service-data {
+              margin-right: 10px;
+            }
+          }
+          .child-interrupt {
+            .service-label::before {
+              background: #a7a7a7;
+            }
+            .box-item {
+              color: #fff;
+              .service-data {
+                color: #a7a7a7;
+              }
+            }
+          }
+          .child-halt {
+            .service-label::before {
+              background: #ba3237;
+            }
+            .service-data {
+              color: #ba3237;
+            }
+          }
+          .child-fault {
+            .service-label::before {
+              background: #e17d24;
+            }
+            .service-data {
+              color: #e17d24;
+            }
+          }
+          .child-normal {
+            .service-label::before {
+              background: #1986e0;
+            }
+            .service-data {
+              color: #1986e0;
+            }
+          }
+        }
+      }
+    }
+
+    .data-cards {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .empty-data {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+  }
+}
+</style>

+ 267 - 0
src/views/layout/economicsOperation/homePage/components/headerBtn.vue

@@ -0,0 +1,267 @@
+<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>

+ 285 - 284
src/views/layout/economicsOperation/homePage/components/lineCharts.vue

@@ -1,303 +1,304 @@
 <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";
-  import dayjs from "dayjs";
-  export default {
-    name: "double-line-chart",
-    componentName: "double-line-chart",
-    props: {
-      width: {
-        type: String,
-        default: "100%",
-      },
-      height: {
-        type: String,
-        default: "13.889vh",
-      },
-      // 传入数据
-      list: {
-        type: Array,
-        default: () => [
-          {
-            title: "绿线",
-            smooth: true,
-            value: [
-              {
-                text: "",
-                value: 0,
-              },
-              {
-                text: "0:00",
-                value: 20,
-              },
-              {
-                text: "10:00",
-                value: 1,
-              },
-              {
-                text: "11:00",
-                value: 40,
-              },
-              {
-                text: "12:00",
-                value: 10,
-              },
-              {
-                text: "13:00",
-                value: 15,
-              },
-              {
-                text: "14:00",
-                value: 30,
-              },
-              {
-                text: "15:00",
-                value: 40,
-              },
-              {
-                text: "",
-                value: 10,
-              },
-            ],
-          },
-          {
-            title: "黄线",
-            smooth: true,
-            value: [
-              {
-                text: "",
-                value: 0,
-              },
-              {
-                text: "0:00",
-                value: 40,
-              },
-              {
-                text: "10:00",
-                value: 20,
-              },
-              {
-                text: "11:00",
-                value: 20,
-              },
-              {
-                text: "12:00",
-                value: 10,
-              },
-              {
-                text: "13:00",
-                value: 40,
-              },
-              {
-                text: "14:00",
-                value: 50,
-              },
-              {
-                text: "15:00",
-                value: 40,
-              },
-              {
-                text: "",
-                value: 10,
-              },
-            ],
-          },
-        ],
-      },
-      // 单位
-      unit: {
-        type: String,
-        default: "",
-      },
-      showLegend: {
-        type: Boolean,
-        default: false,
-      },
+  <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";
+import dayjs from "dayjs";
+export default {
+  name: "double-line-chart",
+  componentName: "double-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
     },
-    data() {
-      return {
-        id: "",
-        chart: null,
-        color: ["#1C99FF", "#FF8700", "#3D54BE", "#fa8c16", "#1DA0D7", "#DD5044"],
-        newlist: null,
-      };
+    height: {
+      type: String,
+      default: "13.889vh",
     },
-    watch: {
-      list: {
-        handler(newValue, oldValue) {
-          this.newlist = newValue;
-          this.$nextTick(() => {
-            this.newlist = this.list;
-            this.initChart();
-          });
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "绿线",
+          smooth: true,
+          value: [
+            {
+              text: "",
+              value: 0,
+            },
+            {
+              text: "0:00",
+              value: 20,
+            },
+            {
+              text: "10:00",
+              value: 1,
+            },
+            {
+              text: "11:00",
+              value: 40,
+            },
+            {
+              text: "12:00",
+              value: 10,
+            },
+            {
+              text: "13:00",
+              value: 15,
+            },
+            {
+              text: "14:00",
+              value: 30,
+            },
+            {
+              text: "15:00",
+              value: 40,
+            },
+            {
+              text: "",
+              value: 10,
+            },
+          ],
         },
-        deep: true,
-      },
-      "$store.state.themeName"() {
-        this.initChart();
-      },
-    },
-    computed: {
-      colorValue() {
-        return partten.getColor(this.color);
-      },
-      datas() {
-        return this.newlist.map((t) => {
-          return t.value;
-        });
-      },
-      legend() {
-        if (this.newlist) {
-          return this.newlist.map((t) => {
-            return t.title;
-          });
-        }
-      },
-      xdata() {
-        let result = [];
-            if (this.list && this.list.length > 0) {
-                result = this.list[0].date.map((t) => {
-                    return dayjs(t).format("MM-DD"); 
-                });
-            }
-            return result;
-      },
-      series() {
-        let result = [];
-        this.list.forEach((value, index) => {
-          result.push({
-            name: value.name || value.title,
-            type: "line",
-            smooth: value.smooth,
-            showSymbol: true,
-            zlevel: index,
-            lineStyle: {
-              normal: {
-                color: this.color[index],
-                width: 1,
-              },
+        {
+          title: "黄线",
+          smooth: true,
+          value: [
+            {
+              text: "",
+              value: 0,
             },
-            yAxisIndex: value.yAxisIndex ||0,
-            data: value.children,
-          });
-        });
-        return result;
-      },
-      yAxis() {
-        let result = [];
-        result.push({
-          type: "value",
-          name: this.unit,
-          axisLabel: {
-            formatter: "{value}",
-            fontSize: util.vh(14),
-          },
-          boundaryGap: false,
-          //分格线
-          splitLine: {
-            show: false,
-          },
-        });
-        return result;
-      },
-    },
-    methods: {
-      resize() {},
-      initChart() {
-        const chart = echarts.init(this.$el);
-  
-        let option = {
-          color: this.color,
-          tooltip: {
-            trigger: "axis",
-            backgroundColor: "rgba(0,0,0,0.4)",
-            borderColor: partten.getColor("gray"),
-            textStyle: {
-              color: "#fff",
-              fontSize: util.vh(16),
+            {
+              text: "0:00",
+              value: 40,
             },
-          },
-          legend: {
-            show: this.showLegend,
-            data: this.legend,
-            padding: [10,10],
-            right: 56,
-            icon: "circle",
-            itemWidth: 6,
-            inactiveColor:partten.getColor("gray"),
-            textStyle: {
-              color:partten.getColor("grayl"),
-              fontSize: 12,
+            {
+              text: "10:00",
+              value: 20,
             },
-          },
-          grid: {
-            top: 56,
-            left: 40,
-            right: 15,
-            bottom: 24,
-          },
-          xAxis: [
             {
-              type: "category",
-              boundaryGap: false,
-              axisLabel: {
-                formatter: "{value}",
-                textStyle: {
-                  color:partten.getColor("gray"),
-                  fontSize: util.vh(10),
-                },
-              },
-              data: this.xdata,
+              text: "11:00",
+              value: 20,
+            },
+            {
+              text: "12:00",
+              value: 10,
+            },
+            {
+              text: "13:00",
+              value: 40,
+            },
+            {
+              text: "14:00",
+              value: 50,
+            },
+            {
+              text: "15:00",
+              value: 40,
+            },
+            {
+              text: "",
+              value: 10,
             },
           ],
-          yAxis: this.yAxis,
-          series: this.series,
-        };
-  
-        chart.clear();
-        chart.setOption(option);
-  
-        this.resize = function () {
-          chart.resize();
-        };
-  
-        window.addEventListener("resize", this.resize);
+        },
+      ],
+    },
+    // 单位
+    unit: {
+      type: String,
+      default: "",
+    },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#1C99FF", "#FF8700", "#3D54BE", "#fa8c16", "#1DA0D7", "#DD5044"],
+      newlist: null,
+    };
+  },
+  watch: {
+    list: {
+      handler(newValue, oldValue) {
+        this.newlist = newValue;
+        this.$nextTick(() => {
+          this.newlist = this.list;
+          this.initChart();
+        });
       },
+      deep: true,
+    },
+    "$store.state.themeName"() {
+      this.initChart();
     },
-    created() {
-      this.$nextTick(() => {
-        this.id = "pie-chart-" + util.newGUID();
+  },
+  computed: {
+    colorValue() {
+      return partten.getColor(this.color);
+    },
+    datas() {
+      return this.newlist.map((t) => {
+        return t.value;
       });
-      this.newlist = this.list;
     },
-    mounted() {
-      this.$nextTick(() => {
-        this.$el.style.width = this.width;
-        this.$el.style.height = this.height;
-        this.initChart();
+    legend() {
+      if (this.newlist) {
+        return this.newlist.map((t) => {
+          return t.title;
+        });
+      } else {
+        return [];
+      }
+    },
+    xdata() {
+      let result = [];
+      if (this.list && this.list.length > 0) {
+        result = this.list[0].date.map((t) => {
+          return dayjs(t).format("MM-DD");
+        });
+      }
+      return result;
+    },
+    series() {
+      let result = [];
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.name || value.title,
+          type: "line",
+          smooth: value.smooth,
+          showSymbol: true,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1,
+            },
+          },
+          yAxisIndex: value.yAxisIndex || 0,
+          data: value.children,
+        });
       });
+      return result;
     },
-    updated() {
-      this.$nextTick(() => {
-        this.initChart();
+    yAxis() {
+      let result = [];
+      result.push({
+        type: "value",
+        name: this.unit,
+        axisLabel: {
+          formatter: "{value}",
+          fontSize: util.vh(14),
+        },
+        boundaryGap: false,
+        //分格线
+        splitLine: {
+          show: false,
+        },
       });
+      return result;
     },
-    unmounted() {
-      window.removeEventListener("resize", this.resize);
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      const chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          padding: [10, 10],
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: 56,
+          left: 40,
+          right: 15,
+          bottom: 24,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: partten.getColor("gray"),
+                fontSize: util.vh(10),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
     },
-  };
-  </script>
-  
-  <style lang="less">
-  .chart {
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-  }
-  </style>
-  
+  },
+  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>

+ 428 - 0
src/views/layout/economicsOperation/homePage/components/list.vue

@@ -0,0 +1,428 @@
+<template>
+  <div class="photovoltaicList">
+    <el-table
+      :data="dataSource"
+      style="width: 100%"
+      height="calc(100vh - 464px)"
+      stripe
+    >
+      <el-table-column type="index" label="序号" align="center" width="70">
+      </el-table-column>
+      <el-table-column
+        prop="companyName"
+        :label="!isStation ? '公司名称' : '场站名称'"
+        :align="'center'"
+        width="230"
+      >
+        <template v-slot="scope">
+          <div
+            class="detail_Lasts"
+            @click="jumpLevelTwo(scope.row)"
+            :class="isStation && 'hover-data'"
+          >
+            <div
+              v-if="scope.row.CZZT?.value || scope.row.CZZT?.value == 0"
+              :class="
+                scope.row.CZZT?.value == 0
+                  ? 'state-normal'
+                  : scope.row.CZZT?.value == 1
+                  ? 'state-fault'
+                  : 'state-broke'
+              "
+              class="station-state"
+            >
+              <div class="point"></div>
+            </div>
+            {{ scope.row.anames }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" label="地址" :align="'center'">
+        <template v-slot="scope">
+          <div :class="isStation && 'hover-data'" :title="scope.row.address">
+            {{ scope.row.address || "--" }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="SSZGL"
+        label="实际功率(kW)"
+        width="165"
+        :align="'center'"
+        v-if="theme === 'operate'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.SSZGL.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{ scope.row.SSZGL.value }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="RLYXS"
+        label="日等效小时(h)"
+        width="165"
+        :align="'center'"
+        v-if="theme === 'operate'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.RLYXS.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{ scope.row.RLYXS.value }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="jrrl"
+        label="接入容量(kWp)"
+        width="165"
+        :align="'center'"
+        v-if="theme === 'operate'"
+      >
+        <template v-slot="scope">
+          <div class="row-blue">
+            {{ scope.row.JRRL }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="RFDL"
+        label="日发电量(kWh)"
+        width="165"
+        :align="'center'"
+        v-if="theme === 'operate'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.RFDL.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{ scope.row.RFDL.value }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="YFDL"
+        label="月发电量(万kWh)"
+        width="165"
+        :align="'center'"
+        v-if="theme === 'operate'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.YFDL.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{ scope.row.YFDL.value }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="ZFDL"
+        label="总发电量(万kWh)"
+        width="165"
+        :align="'center'"
+        v-if="theme === 'operate'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.ZFDL.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{ scope.row.ZFDL.value }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="ZFSL"
+        label="总辐射量(MJ/㎡)"
+        width="165"
+        :align="'center'"
+        v-if="isStation && theme === 'operate'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.ZFSL.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{ scope.row.ZFSL.value }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="TXZDTS"
+        label="通讯中断(台)"
+        :align="'center'"
+        v-if="theme === 'maintenance'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.TXZDTS.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{
+                typeof scope.row.TXZDTS.value == "number"
+                  ? scope.row.TXZDTS.value.toFixed(0)
+                  : scope.row.TXZDTS.value
+              }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="SBTJTS"
+        label="设备停机(台)"
+        :align="'center'"
+        v-if="theme === 'maintenance'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.SBTJTS.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{
+                typeof scope.row.SBTJTS.value == "number"
+                  ? scope.row.SBTJTS.value.toFixed(0)
+                  : scope.row.SBTJTS.value
+              }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="DZYXTS"
+        label="带障运行(台)"
+        :align="'center'"
+        v-if="theme === 'maintenance'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.DZYXTS.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{
+                typeof scope.row.DZYXTS.value == "number"
+                  ? scope.row.DZYXTS.value.toFixed(0)
+                  : scope.row.DZYXTS.value
+              }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="ZCYXTS"
+        label="正常运行(台)"
+        :align="'center'"
+        v-if="theme === 'maintenance'"
+      >
+        <template v-slot="scope">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="
+              moment(scope.row.ZCYXTS.dateTime).format('YYYY-MM-DD HH:mm:ss')
+            "
+            placement="top"
+          >
+            <div class="row-blue">
+              {{
+                typeof scope.row.ZCYXTS.value == "number"
+                  ? scope.row.ZCYXTS.value.toFixed(0)
+                  : scope.row.ZCYXTS.value
+              }}
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="SBZXL"
+        label="设备在线率(台)"
+        :align="'center'"
+        v-if="theme === 'maintenance'"
+      >
+        <template v-slot="scope">
+          <div class="row-blue">
+            {{ calcOnlinePercentage(scope.row) }}
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import moment from "moment";
+export default {
+  name: "photovoltaicList", // 公司首页-列表
+  components: {},
+  props: {
+    dataSource: {
+      type: Array,
+      required: true,
+    },
+    isStation: {
+      type: Boolean,
+      default: false,
+    },
+    theme: {
+      type: String,
+      default: "operate",
+    },
+  },
+  data() {
+    return {};
+  },
+
+  methods: {
+    moment,
+    calcOnlinePercentage(row) {
+      const online =
+        (Number(row.SBTJTS.value) || 0) +
+        (Number(row.DZYXTS.value) || 0) +
+        (Number(row.ZCYXTS.value) || 0);
+      const total = online + (Number(row.TXZDTS.value) || 0);
+      return online / total && online / total !== Infinity
+        ? ((online / total) * 100).toFixed(2) + "%"
+        : "--";
+      // totalPercentage % 1 === 0 ? totalPercentage.toFixed(0) : totalPercentage.toFixed(2)
+    },
+    jumpLevelTwo(param) {
+      if (!this.isStation) {
+        this.$router.push({
+          path: "/stateMonitor/photovoltaicLevelTwoStation",
+          query: { companyCode: param.code },
+        });
+      } else {
+        this.$router.push({
+          name: "lighthome",
+          query: { companyCode: param.parentCode, stationCode: param.code },
+        });
+      }
+    },
+  },
+  created() {},
+  mounted() {},
+  unmounted() {},
+  computed: {},
+};
+</script>
+
+<style lang="less" scoped>
+:deep(.el-table) {
+  color: #b3b3b3 !important;
+}
+.photovoltaicList {
+  padding: 30px 20px;
+  background: rgba(0, 0, 0, 0.45);
+
+  .detail_Lasts {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    .station-state {
+      width: 10px;
+      height: 10px;
+      margin-right: 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .point {
+        width: 6px;
+        height: 6px;
+      }
+    }
+
+    .state-normal {
+      background: rgba(27, 153, 255, 0.25);
+      .point {
+        background: rgba(27, 153, 255, 1);
+      }
+    }
+
+    .state-fault {
+      background: rgba(185, 49, 55, 0.25);
+      .point {
+        background: rgba(185, 49, 55, 1);
+      }
+    }
+
+    .state-broke {
+      background: rgba(167, 167, 167, 0.25);
+      .point {
+        background: rgba(167, 167, 167, 1);
+      }
+    }
+  }
+  .hover-data {
+    text-align: left;
+    justify-content: start;
+    padding-left: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .row-blue {
+    color: #1b99ff;
+  }
+  .row-white {
+    color: #fff;
+  }
+}
+</style>

+ 160 - 0
src/views/layout/economicsOperation/homePage/components/pieChartComp.vue

@@ -0,0 +1,160 @@
+<template>
+  <div v-cloak class="chart" style="width:160px;height: 160px"  :id="id"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "dsah-pie",
+  componentName: "dsah-pie",
+  props: {
+    pieData:{
+      type: Object,
+      required:true,
+    },
+    id:{
+      required:true,
+    }
+  },
+  data() {
+    return {
+      // id: "",
+      chart: null,
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      // let that = this;
+      var chartDom = document.getElementById(this.id);
+      var myChart = echarts.init(chartDom);        // 绘制图表
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          selectedMode: false  //取消图例上的点击事件
+        },
+        series: {
+          type: 'sunburst',
+          silent:true,
+          data: [
+            {
+              itemStyle: {
+                color: '#a7a7a7',
+              },
+              children: [
+                {
+                  value: this.pieData?.TXZDTS || 0,
+                  itemStyle: {
+                    color: '#606164'
+                  }
+                }
+              ]
+            },
+            {
+              itemStyle: {
+                color: '#ba3237',
+              },
+              children: [
+                {
+                  value: this.pieData?.SBTJTS || 0,
+                  itemStyle: {
+                    color: '#6a282e'
+                  }
+                }
+              ]
+            },
+            {
+              itemStyle: {
+                color: '#E17D23',
+              },
+              children: [
+                {
+                  value: this.pieData?.DZYXTS || 0,
+                  itemStyle: {
+                    color: '#7f4e24'
+                  }
+                }
+              ]
+            },
+            {
+              itemStyle: {
+                color: '#1c99ff',
+              },
+              children: [
+                {
+                  value: this.pieData?.ZCYXTS || 0,
+                  itemStyle: {
+                    color: '#1b5c92'
+                  }
+                }
+              ]
+            }
+          ],
+          radius: [0, '95%'],
+          sort: undefined,
+          emphasis: {
+            focus: 'ancestor'
+          },
+          itemStyle: {
+            // borderColor: '#A0A0A0'
+          },
+          levels: [
+            {},
+            {
+              r0: '55%',
+              r: '80%',
+              itemStyle: {
+                borderWidth: 0
+              },
+              label: {
+                rotate: 'tangential'
+              },
+            },
+            {
+              r0: '80%',
+              r: '70%',
+              label: {
+                // align: 'right'
+                position: 'top',
+                rotate: 'tangential'
+              },
+              itemStyle: {
+                borderWidth: 0
+              },
+            },
+            {
+              r0: '55%',
+              r: '55%',
+              label: {
+                position: 'outside',
+                // padding: 10,
+              },
+              itemStyle: {
+                borderWidth: 0
+                // borderWidth: 1
+              }
+            }
+          ]
+        },
+      }
+      myChart.setOption(option);
+    },
+  },
+  created() {
+  },
+  mounted() {
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+  margin: auto;
+}
+</style>

+ 2 - 2
src/views/layout/economicsOperation/homePage/components/sdSvg.vue

@@ -35,14 +35,14 @@
             <!-- <image v-else style="overflow: visible" width="800" height="440" class="map-base" :xlink:href="'img/images/' + foreignKeyId +'Svg.png'"
                 transform="matrix(1 0 0 1 0 -24)"></image> -->
             <g>
-                <g class="item-hover" v-for="(item, index) in stationinfo" :key="index">
+                <g class="item-hover" v-for="(item, index) in stationinfo" :key="index" @click="handleClick(item)">
                     <use xlink:href="#nx-map-circle-1" :x="item.xPoint"
                         :y="item.yPoint" />
                         <line 
                         :x1="item.xPoint + 25"
                         :y1="item.yPoint + 80 - 40*item.value/100"
                         :x2="item.xPoint + 25"
-                        :y2="item.yPoint + 80" stroke="#ffffff" stroke-width="3" @click="handleClick(item)"/>
+                        :y2="item.yPoint + 80" stroke="#ffffff" stroke-width="3"/>
                     <g class="isshow">
 
                         <rect :x="item.xPoint - 25"

File diff suppressed because it is too large
+ 1358 - 1618
src/views/layout/economicsOperation/homePage/index.vue


File diff suppressed because it is too large
+ 1366 - 1531
src/views/layout/economicsOperation/homePage/indexGF.vue


+ 11 - 0
src/views/layout/economicsOperation/index.vue

@@ -25,6 +25,17 @@ export default {
       showMenu: false,
       secondLevelTitle: [
         {
+          titleName: "区域首页",
+          icon: "icon-dimension-new",
+          path: "/economicsOperation/homePageGf",
+        },
+        {
+          titleName: "公司首页",
+          icon: "icon-power-curve",
+          path: "/economicsOperation/comphomepage",
+        },
+        
+        {
           titleName: "对标管理",
           icon: "icon-dbgl",
           path: "/economicsOperation/benchmarkingManagement",