菜单调整、新增部分指标页面

public/static/config/modeConfig.js

@@ -8,15 +8,15 @@ let baseURL = null;
 let websocketUrl = null;
 
 if (localTest) {
-    baseURL = "http://192.168.10.12:8082/" // 联机调试 - 石林
-        // baseURL = "http://10.155.32.33:9001/" // 联机调试 - 谢生杰
+  baseURL = "http://192.168.10.12:8082/" // 联机调试 - 石林
+  // baseURL = "http://10.155.32.33:9001/" // 联机调试 - 谢生杰
 } else {
-    baseURL = "http://10.155.32.4:8082/" // 正式环境
+  baseURL = "http://10.155.32.4:8082/" // 正式环境
 }
 
 websocketUrl = (baseURL.replace(/http:\/\/|https:\/\//g, "")) + "gyee-websocket";
 
 window.__MODE__ = {
-    baseURL,
-    websocketUrl
+  baseURL,
+  websocketUrl
 };

src/components/chart/scatter/normal-scatter-chart.vue

@@ -545,7 +545,7 @@ export default {
       default: true,
     },
   },
-  data() {
+  data () {
     return {
       id: "",
       chart: null,
@@ -553,9 +553,10 @@ export default {
     };
   },
   computed: {
-    series() {
+    series () {
       let result = [];
       this.data.forEach((element, index) => {
+        console.log(index, element)
         result.push({
           name: element.title,
           type: "scatter",
@@ -573,15 +574,15 @@ export default {
       });
       return result;
     },
-    legend() {
+    legend () {
       return this.data.map((t) => {
         return t.title;
       });
     },
   },
   methods: {
-    resize() {},
-    initChart() {
+    resize () { },
+    initChart () {
       const chart = echarts.init(this.$el);
 
       let option = {
@@ -652,29 +653,29 @@ export default {
       chart.clear();
       chart.setOption(option);
 
-      this.resize = function() {
+      this.resize = function () {
         chart.resize();
       };
 
       window.addEventListener("resize", this.resize);
     },
   },
-  created() {
+  created () {
     this.id = "pie-chart-" + util.newGUID();
   },
-  mounted() {
+  mounted () {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
       this.initChart();
     });
   },
-  updated() {
+  updated () {
     this.$nextTick(() => {
       this.initChart();
     });
   },
-  unmounted() {
+  unmounted () {
     window.removeEventListener("resize", this.resize);
   },
 };

src/components/coms/collapse/collapse-list.vue

@@ -108,7 +108,7 @@ export default {
   },
   computed: {},
   // 数据
-  data() {
+  data () {
     return {
       menuIndex: 0,
       itemIndex: 0,
@@ -116,7 +116,7 @@ export default {
   },
   // 函数
   methods: {
-    menuClick(index) {
+    menuClick (index) {
       if (this.menuIndex == index) {
         this.menuIndex = -1;
       } else {
@@ -124,22 +124,24 @@ export default {
       }
       this.itemIndex = -1;
     },
-    itemClick(item, index) {
+    itemClick (item, index) {
       this.itemIndex = index;
+      this.wpId = item.wpId;
+      this.wtId = item.id;
       this.$emit("click", item);
     },
-    setDefaultActiveMenu(menu){
-      menu.forEach((pEle,pIndex)=>{
+    setDefaultActiveMenu (menu) {
+      menu.forEach((pEle, pIndex) => {
 
-        let findResult=pEle.children.find(cEle=>{
+        let findResult = pEle.children.find(cEle => {
           return cEle.wpId === this.wpId;
         });
 
-        if (findResult) this.menuIndex=pIndex;
+        if (findResult) this.menuIndex = pIndex;
 
-        pEle.children.forEach((cEle,cIndex)=>{
-          if(cEle.id === this.wtId){
-            this.itemIndex=cIndex
+        pEle.children.forEach((cEle, cIndex) => {
+          if (cEle.id === this.wtId) {
+            this.itemIndex = cIndex
           }
         });
 
@@ -148,29 +150,29 @@ export default {
     }
   },
   // 生命周期钩子
-  beforeCreate() {
+  beforeCreate () {
     // 创建前
   },
-  created() {
+  created () {
     // 创建后
   },
-  beforeMount() {
+  beforeMount () {
     // 渲染前
   },
-  mounted() {
+  mounted () {
     this.wpId = this.$route.params.wpId || "";
     this.wtId = this.$route.params.wtId || "";
     this.setDefaultActiveMenu(this.list);
   },
-  beforeUpdate() {
+  beforeUpdate () {
     // 数据更新前
   },
-  updated() {
+  updated () {
     // 数据更新后
   },
 
-  watch:{
-    list(res){
+  watch: {
+    list (res) {
       this.setDefaultActiveMenu(res)
     }
   }

src/router/index.js

@@ -394,12 +394,72 @@ const routes = [{
 {
   path: '/new/ztfx', // 专题分析
   name: 'ztfx',
-  component: () => import( /* webpackChunkName: "ztfx" */ '../views/NewPages/ztfx.vue'),
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/ztfx.vue'),
 },
 {
-  path: '/new/fdlyl', // 风能利用率
-  name: 'fdlyl',
-  component: () => import( /* webpackChunkName: "ztfx" */ '../views/NewPages/fdlyl.vue'),
+  path: '/new/fnlyl', // 风能利用率
+  name: 'fnlyl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/fnlyl.vue'),
+},
+{
+  path: '/new/whssl', // 维护损失率
+  name: 'whssl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/whssl.vue'),
+},
+{
+  path: '/new/gzssl', // 故障损失率
+  name: 'gzssl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/gzssl.vue'),
+},
+{
+  path: '/new/xdssl', // 限电损失率
+  name: 'xdssl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/xdssl.vue'),
+},
+{
+  path: '/new/xnssl', // 性能损失率
+  name: 'xnssl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/xnssl.vue'),
+},
+{
+  path: '/new/slssl', // 受累损失率
+  name: 'slssl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/slssl.vue'),
+},
+{
+  path: '/new/mtbf', // mtbf
+  name: 'mtbf',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/mtbf.vue'),
+},
+{
+  path: '/new/mttr', // mttr
+  name: 'mttr',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/mttr.vue'),
+},
+{
+  path: '/new/zfwjsl', // 复位及时率
+  name: 'zfwjsl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/fwjsl.vue'),
+},
+{
+  path: '/new/zztzhl', // 状态转换率
+  name: 'zztzhl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/ztzhl.vue'),
+},
+{
+  path: '/new/zxqjsl', // 消缺及时率
+  name: 'zxqjsl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/xqjsl.vue'),
+},
+{
+  path: '/new/zfdl', // 发电量分析
+  name: 'zfdl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/fdl.vue'),
+},
+{
+  path: '/new/zzhcydl', // 综合场用电量
+  name: 'zzhcydl',
+  component: () => import( /* webpackChunkName: "ztfx" */ '../views/specific/zhcydl.vue'),
 },
 {
   path: '/new/intelligentalarmcenter',

src/views/HealthControl/infotrack2.vue

@@ -197,7 +197,7 @@
       :close-on-click-modal="true">
       <video class="videoPlayer" id="videoPlayer" muted autoplay webkit-playsinline playsinline></video>
     </el-dialog>
-    <el-dialog title="GIS地貌" v-model="gisBoxShow" width="80%" custom-class="modal gisBox" :close-on-click-modal="true">
+    <el-dialog title="GIS地貌" v-model="gisBoxShow" top="100px" width="95%" custom-class="modal gisBox" :close-on-click-modal="true">
       <iframe width="100%" height="100%" src="http://10.155.32.4:8070/gisweb/ditujiankang.html?LAT=106.23507&LNG=38.48989&userid=1500" sryle="width:100%;height:100%;"></iframe>
     </el-dialog>
   </div>
@@ -784,7 +784,7 @@ export default {
 
 .gisBox {
   .el-dialog__body {
-    height: 600px;
+    height: 800px;
   }
 }
 </style>

src/views/Home/components/power-plan.vue

@@ -3,10 +3,12 @@
     <tab @select="selectionItemClick" :data="currTabs" class="power-plan-tab" />
     <row @click="openDialog('计划电量完成详情', 'genreset/findProjectPlanPower', 'doneLineChart')">
       <Col :span="12">
-        <percent-card-2 :title="'月完成率' + parseInt((planData.yfdl / planData.yfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" />
+        <!-- <percent-card-2 :title="'月完成率' + parseInt((planData.yfdl / planData.yfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" /> -->
+        <percent-card-2 :title="''" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" />
       </Col>
       <Col :span="12">
-        <percent-card-2 :title="'年完成率' + parseInt((planData.nfdl / planData.nfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl" :ActualValue="planData.nfdljh" :percent="planData.nwcl" />
+        <!-- <percent-card-2 :title="'年完成率' + parseInt((planData.nfdl / planData.nfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl" :ActualValue="planData.nfdljh" :percent="planData.nwcl" /> -->
+        <percent-card-2 :title="''" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl" :ActualValue="planData.nfdljh" :percent="planData.nwcl" />
       </Col>
     </row>
   </div>

src/views/WindSite/pages/Info/Info.vue

@@ -1,4 +1,5 @@
 <template>
+<div>
   <div class="mg-b-8">
     <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
   </div>
@@ -6,7 +7,7 @@
     <div class="wind-site-menu">
       <div class="wind-site-title">选择风机</div>
       <div class="wind-site-body">
-        <collapse-list :list="WindSites" :allowScroll="true" scrollHeight="calc(100vh - 175px)" />
+        <collapse-list :list="WindSites" :allowScroll="true" scrollHeight="calc(100vh - 175px)" @click="clickMenu" />
       </div>
     </div>
     <div class="wind-site-info-body">
@@ -30,6 +31,9 @@
       </el-row>
     </div>
   </div>
+</div>
+  
+  
 </template>
 
 <script>
@@ -222,6 +226,7 @@ export default {
     // 点击左侧菜单
     clickMenu(res) {
       this.wtId = res.id;
+      this.$router.replace(`/monitor/windsite/info/${this.wpId}/${res.id}`);
       this.getWtInfo();
     },
   },
@@ -241,6 +246,18 @@ export default {
     clearInterval(this.timmer);
     this.timmer = null;
   },
+
+  watch:{
+    // "$route"(res){
+    //   clearInterval(this.timmer);
+    //   this.timmer = null;
+    //   this.wpId = res.params.wpId;
+    //   this.requestData(false);
+    //   this.timmer = setInterval(() => {
+    //     this.requestData(false);
+    //   }, this.$store.state.websocketTimeSec);
+    // }
+  }
 };
 </script>
 

src/views/layout/Menu.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="menu">
     <ul class="menu-list">
-      <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
+      <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }"
+        @mouseenter="subMenuShow(menu.children, index)">
         <router-link v-if="!menu.children" :to="menu.path">
           <el-tooltip class="item" effect="dark" :content="menu.text" placement="right" :show-after="500">
             <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
@@ -37,7 +38,7 @@ export default {
     SvgIcon,
   },
   props: {},
-  data() {
+  data () {
     return {
       currRoot: "monitor",
       menuData: [
@@ -180,6 +181,83 @@ export default {
                 },
               ],
             },
+            {
+              text: "专题分析",
+              icon: "svg-wind-site",
+              path: "/fgzyfx",
+              children: [
+                {
+                  text: "综合分析",
+                  icon: "svg-wind-site",
+                  path: "/new/ztfx",
+                },
+                {
+                  text: "风能利用率",
+                  icon: "svg-wind-site",
+                  path: "/new/fnlyl",
+                },
+                {
+                  text: "维护损失率",
+                  icon: "svg-wind-site",
+                  path: "/new/whssl",
+                },
+                {
+                  text: "故障损失率",
+                  icon: "svg-wind-site",
+                  path: "/new/gzssl",
+                },
+                {
+                  text: "限电损失率",
+                  icon: "svg-wind-site",
+                  path: "/new/xdssl",
+                },
+                {
+                  text: "性能损失率",
+                  icon: "svg-wind-site",
+                  path: "/new/xnssl",
+                },
+                {
+                  text: "受累损失率",
+                  icon: "svg-wind-site",
+                  path: "/new/slssl",
+                },
+                {
+                  text: "MTBF分析",
+                  icon: "svg-wind-site",
+                  path: "/new/mtbf",
+                },
+                {
+                  text: "MTTR分析",
+                  icon: "svg-wind-site",
+                  path: "/new/mttr",
+                },
+                {
+                  text: "复位及时率",
+                  icon: "svg-wind-site",
+                  path: "/new/zfwjsl",
+                },
+                {
+                  text: "状态转换率",
+                  icon: "svg-wind-site",
+                  path: "/new/zztzhl",
+                },
+                {
+                  text: "消缺及时率",
+                  icon: "svg-wind-site",
+                  path: "/new/zxqjsl",
+                },
+                {
+                  text: "发电量分析",
+                  icon: "svg-wind-site",
+                  path: "/new/zfdl",
+                },
+                {
+                  text: "综合场用电量",
+                  icon: "svg-wind-site",
+                  path: "/new/zzhcydl",
+                },
+              ]
+            },
             // {
             //   text: "单机分析",
             //   icon: "svg-wind-site",
@@ -281,16 +359,16 @@ export default {
               icon: "svg-matrix",
               path: "/decision/decision2Xldb",
             },
-            // {
-            //   text: "决策支持3",
-            //   icon: "svg-matrix",
-            //   path: "/decision/decision3",
-            // },
-            // {
-            //   text: "决策支持4",
-            //   icon: "svg-matrix",
-            //   path: "/decision/decision4",
-            // },
+            {
+              text: "性能对标",
+              icon: "svg-matrix",
+              path: "/decision/decision3",
+            },
+            {
+              text: "值际对标",
+              icon: "svg-matrix",
+              path: "/decision/decision4",
+            },
             {
               text: "排行榜",
               icon: "svg-matrix",
@@ -393,11 +471,11 @@ export default {
     };
   },
   methods: {
-    click(index) {
+    click (index) {
       this.activeIndex = index;
       this.subIndex = null;
     },
-    subMenuShow(children, index) {
+    subMenuShow (children, index) {
       if (children) {
         this.isShowSubMenu = true;
         this.parentIndex = index;
@@ -407,18 +485,18 @@ export default {
       }
       this.subMenu = children;
     },
-    subMenuHide() {
+    subMenuHide () {
       this.isShowSubMenu = false;
       this.parentIndex = null;
       this.subMenu = [];
     },
-    subclick(index) {
+    subclick (index) {
       this.activeIndex = this.parentIndex;
       this.subIndex = index;
     },
   },
   computed: {
-    currentMenu() {
+    currentMenu () {
       let data = this.menuData.filter((t) => {
         return t.id == this.currRoot;
       })[0].data;
@@ -428,7 +506,7 @@ export default {
   watch: {
     // 监听路由
     $route: {
-      handler: function(val, oldVal) {
+      handler: function (val, oldVal) {
         this.menuData.some((element, index) => {
           if (val.path.includes(element.id)) {
             this.currRoot = element.id;

src/views/specific/fdl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司发电量分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "发电量");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/fdlList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/fnlyl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司可利用率分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "风能利用率");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/fnlylList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/fwjsl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司复位及时率分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "复位及时率");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/fwjslList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/gzssl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司故障损失率分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "故障损失率");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/gzsslList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/mtbf.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司MTBF分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "MTBF");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/mtbfList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/mttr.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司MTTR分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "MTTR");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/mttrList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/slssl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司受累损失率分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "受累损失率");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/slsslList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/whssl.vue

@@ -0,0 +1,549 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司维护损失率分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "维护损失率");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/whsslList",
+          data:{
+            year: year
+          },
+          success(res) {
+            console.log(res)
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/xdssl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司限电损失率分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "限电损失率");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/xdsslList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/xnssl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司性能损失率分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "性能损失率");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/xnsslList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/xqjsl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司消缺及时率分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "消缺及时率");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/xqjslList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/zhcydl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司综合场用电量分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "综合场用电量");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/zhcydlList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/specific/ztzhl.vue

@@ -0,0 +1,548 @@
+<template>
+  <div class="ztfx" >
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="monthValue"
+                type="year"
+                placeholder="选择年份"
+                popper-class="date-select"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <button class="btn green" @click="onClickSearch">搜索</button>
+            </div>
+            <div class="search-input select-btn">
+              <button class="btn green" @click="exportPDF">导出</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel pdfDom">
+      <el-col :span="24">
+        <!-- <panel :title="'月度'" :showLine="false"> -->
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:4vh;"></th>
+                  <template v-for="m of monthData" :key="m">
+                    <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
+                  </template>
+                </tr>
+                
+              </thead>
+            </table>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:4vh;"></td>
+                      <template v-for="(x ,i) of MhsLists" :key="i">
+                        <td style="width:3vh;">本期</td>
+                        <td style="width:3vh;">同期</td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">麻黄山</td>
+                      <template v-for="(item, index) of MhsLists" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">牛首山</td>
+                      <template v-for="(item, index) of NshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">青山</td>
+                      <template v-for="(item, index) of QshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">石板泉</td>
+                      <template v-for="(item, index) of SbaqList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">香山</td>
+                      <template v-for="(item, index) of XshList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                    <tr>
+                      <td class="td-item" style="width:4vh;">公司</td>
+                      <template v-for="(item, index) of GsList" :key="index">
+                        <td style="width:3vh;">
+                          {{ item.current }}
+                          <template v-if="item.compare === -1">
+                            <span class="svg-icon svg-icon-yellow">
+                              <svg-icon svgid="svg-arrow-dpwn-1" />
+                            </span>
+                          </template>
+                          <template v-if="item.compare === 1">
+                            <span class="svg-icon svg-icon-green">
+                              <svg-icon svgid="svg-arrow-up-1" />
+                            </span>
+                          </template>
+                        </td>
+                        <td style="width:3vh;">
+                          {{ item.sameperiod }}
+                        </td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            <!-- </el-scrollbar> -->
+          </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="24">
+        <panel title="公司状态转换率分析" :showLine="false">
+          <!-- <vertival-bar-line-chart
+            :height="'360px'"
+            :units="units"
+            :bardata="bardata"
+            :lineData="lineData"
+          /> -->
+
+          <MultipleLineChart  
+            :list="DayPower.value" 
+            :units="DayPower.units" 
+            height="40vh" :showLegend="true" 
+          />
+           <!-- :units="units"
+            :bardata="bardata"
+            :lineData="lineData" -->
+        </panel>
+      </el-col>
+    </el-row>
+      
+  </div>
+</template>
+
+<script>
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+    // VertivalBarLineChart,
+    MultipleLineChart
+  },
+  data() {
+    return {
+      monthData: [],
+      MhsLists: [],
+      NshList: [],
+      QshList: [],
+      SbaqList: [],
+      XshList: [],
+      GsList: [],
+      units: [],
+      nowCurrent: 1,
+      months: new Date().getMonth() + 1,
+      pickerOptions: {},
+      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
+      lineData: [],
+      timmer: null,
+      monthValue: this.getmonthValue(),
+      list: [],
+      DayPower: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    let _this = this
+    // _this.$nextTick(() => {
+      _this.getLists(false);
+    //   _this.timmer = setInterval(() => {
+    //     _this.getLists(false)
+    //   }, _this.$store.state.websocketTimeSec);
+    // });
+  },
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
+  mounted() {},
+  methods: {
+    exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "状态转换率");
+    },
+    getmonthValue(){
+      let year = new Date().getFullYear().toString()
+      return year
+    },
+    onClickSearch() {
+      this.getLists(false)
+    },
+    monthChange(data){
+      let year = data.getFullYear().toString();
+      return year
+    },
+
+    isNumber(val) {
+      return typeof val === 'number' && !isNaN(val)
+    },
+    getLists(showLoading) {
+      let MhsLists = []
+      let NshList= []
+      let QshList= []
+      let SbaqList= []
+      let XshList= []
+      let GsList= []
+      let _this = this
+      let year = ''
+      if (typeof(this.monthValue) === 'string') {
+        year = this.monthValue
+      } else {
+        year = this.monthChange(this.monthValue)
+      }
+      const site = ['compare', 'year', 'month']
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          baseURL: 'http://10.155.32.4:8034',
+          subUrl: "/specific/ztzhlList",
+          data:{
+            year: year
+          },
+          success(res) {
+            _this.list = res.data.map(item => {
+              for (let key in item) {
+                if (!site.includes(key)) {
+                  if(_this.isNumber(item[key])) {
+                    item[key] = item[key].toFixed(2)
+                  } else if (!item[key]){
+                    item[key] = 0
+                    item[key] = item[key].toFixed(2)
+                  }
+                }
+                
+              }
+              if (item.wpid === 'MHS_FDC') {
+                MhsLists.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'QS_FDC') {
+                QshList.push(item)
+              } else if (item.wpid === 'NSS_FDC') {
+                NshList.push(item)
+              } else if (item.wpid === 'SBQ_FDC') {
+                SbaqList.push(item)
+              } else if (item.wpid === 'XS_FDC') {
+                XshList.push(item)
+              } else {
+                GsList.push(item)
+              }
+            })
+
+            _this.MhsLists = MhsLists.sort(_this.compare('month'))
+            _this.NshList= NshList.sort(_this.compare('month'))
+            _this.QshList= QshList.sort(_this.compare('month'))
+            _this.SbaqList= SbaqList.sort(_this.compare('month'))
+            _this.XshList= XshList.sort(_this.compare('month'))
+            _this.GsList= GsList.sort(_this.compare('month'))
+
+            let nowCureent = []
+            let sameCureent = []
+            let monthData = []
+            let monthsAll = []
+            _this.GsList.map(item => {
+              let objs = {}
+              let obj = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+                obj.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+                obj.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  obj.value = item.sameperiod
+                  sameCureent.push(obj)
+                }
+                
+              }
+            })
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            // _this.DayPower = {
+            //   // 图表所用单位
+            //   units: [""],
+            //   value: [
+            //     {
+            //       title: "本期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //     {
+            //       title: "同期",
+            //       yAxisIndex: 0, // 使用单位
+            //       value: [],
+            //     },
+            //   ],
+            // },
+            // _this.bardata.legend = ["本期", "同期"]
+            // _this.lineData = [];
+            // _this.bardata.area = monthData;
+            // _this.bardata.data[0] = sameCureent;
+            // _this.bardata.data[1] = nowCureent;
+          }
+      })
+    },
+    compare(property) {
+      return (a, b) => {
+        let val1 = a[property]
+        let val2 = b[property]
+        return val1 - val2
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        // &.item {
+        //   width: 100px;
+        // }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 46px;
+        line-height: 46px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/windAnalysis/tab1.vue

@@ -11,31 +11,31 @@
           </div>
         </div>
         <div class="query-item">
-					<div class="lable">日期：</div>
-					<div class="search-input">
-						<el-date-picker v-model="recorddate" type="date"
-							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
-						</el-date-picker>
-					</div>
-				</div>
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker v-model="recorddate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
+            </el-date-picker>
+          </div>
+        </div>
       </div>
       <div class="query-actions">
         <button class="btn green" @click="search">搜索</button>
       </div>
     </div>
-    <Mlc height="650px" :list="chartData" :units="chartUnit" :showLegend="true" />
+    <NormalScatterChart height="650px" :data="chartData" :showLegend="true" />
   </div>
 </template>
 
 <script>
 import Mlc from "@com/chart/line/multiple-line-chart.vue";
+import NormalScatterChart from "@com/chart/scatter/normal-scatter-chart.vue";
 export default {
   // 名称
   name: "cutAnalyse",
 
   // 使用组件
   components: {
-    Mlc
+    NormalScatterChart
   },
 
   // 数据
@@ -46,13 +46,11 @@ export default {
       wtArray: [],
       wpId: "",
       wtId: "MG01_01",
-      recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
       chartData: [{
-        title: "",
-        yAxisIndex: 0,
+        title: "风资源分析",
         value: []
-      }],
-      chartUnit: ["功率(万kw)"]
+      }]
     };
   },
 
@@ -77,33 +75,21 @@ export default {
       let that = this;
       that.API.requestData({
         method: "POST",
-        subUrl: "powersaturation/powersaturationamonutchart",
+        subUrl: "scatter/scatterAjax",
         data: {
-          wtId: that.wtId
+          wpId: that.wpId,
+          pjId: "",
+          lnId: "",
+          year: (that.recorddate ? new Date(that.recorddate).getFullYear() : ""),
+          month: (that.recorddate ? (new Date(that.recorddate).getMonth() + 1) : ""),
         },
         success (res) {
-
-          const keyArray = [{
-            key: "value1",
-            title: "功率"
+          let ChartData = [{
+            title: "风资源分析",
+            value: (res.data || [])
           }];
-
-          let chartData = [{
-            title: "功率",
-            yAxisIndex: 0,
-            value: []
-          }];
-
-          keyArray.forEach((keyEle, keyIndex) => {
-            res.data.forEach(ele => {
-              chartData[keyIndex].value.push({
-                text: "",
-                value: ele[keyEle.key]
-              });
-            });
-          });
-
-          that.chartData = chartData;
+          that.ChartData = ChartData;
+          console.log(123123, ChartData);
         }
       });
     },