Merge branch 'yx' of http://61.161.152.110:10101/r/electronic-map into yx

src/components/chart/combination/area-bar-chart.vue

@@ -41,7 +41,7 @@ export default {
     },
     lineData: {
       type: Array,
-      default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
+      default: () => [[200, 350, 400, 500, 600, 700, 800, 900, 1200]],
     },
     areaData: {
       type: Array,
@@ -88,23 +88,23 @@ export default {
       default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
     },
   },
-  data() {
+  data () {
     return {
       id: "",
       chart: null,
     };
   },
   computed: {
-    legend() {
+    legend () {
       let data = this.bardata.legend;
       data.push(this.units[0]);
       return data;
     },
-    areaChartData() {
+    areaChartData () {
       let data = [];
       for (var i = 0; i < this.areaData.length; i++) {
         let item = this.areaData[i];
-        var color = partten.getColor(item.state);
+        var color = (item.color ? item.color : partten.getColor(item.state));
         data.push({
           name: item.name,
           value: [item.start, item.end, item.end - item.start],
@@ -120,7 +120,7 @@ export default {
     },
   },
   methods: {
-    renderItem(params, api) {
+    renderItem (params, api) {
       var start = api.coord([api.value(0)]);
       var end = api.coord([api.value(1)]);
       var height = api.size([0, 1])[1];
@@ -149,7 +149,7 @@ export default {
         }
       );
     },
-    initChart() {
+    initChart () {
       let that = this;
       let chart = echarts.init(this.$el);
 
@@ -203,7 +203,7 @@ export default {
             min: 0,
             axisLabel: {
               show: false,
-              formatter: function(val) {
+              formatter: function (val) {
                 return Math.max(0, val - 0) + " ms";
               },
             },
@@ -254,7 +254,7 @@ export default {
             },
           },
           {
-            data: [this.areaData[0].name],
+            data: [(this.areaData && this.areaData[0] && this.areaData[0].name || "")],
             axisLabel: { show: false },
           },
         ],
@@ -262,19 +262,21 @@ export default {
       };
 
       // line data
-      if (this.lineData.length > 0) {
-        option.series.push({
-          name: this.units[0],
-          type: "line",
-          data: this.lineData,
-          smooth: true, //平滑展示
-          yAxisIndex: 0,
-          lineStyle: {
-            color: partten.getColor("green"),
-          },
-          itemStyle: {
-            color: partten.getColor("green"),
-          },
+      if (this.lineData.length) {
+        this.lineData.forEach((ele, index) => {
+          option.series.push({
+            name: this.units[index] || this.units[0] || "",
+            type: "line",
+            data: ele,
+            smooth: true, //平滑展示
+            yAxisIndex: 0,
+            lineStyle: {
+              color: this.color[index]
+            },
+            itemStyle: {
+              color: this.color[index]
+            }
+          });
         });
       }
 
@@ -306,7 +308,7 @@ export default {
           },
           tooltip: {
             show: true,
-            formatter: function(params) {
+            formatter: function (params) {
               return params.marker + params.name + ": " + params.value[2] + "s";
             },
           },
@@ -320,7 +322,7 @@ export default {
 
       chart.setOption(option);
 
-      chart.on("click", function(e, p) {
+      chart.on("click", function (e, p) {
         if (e.seriesType == "custom") {
           that.$emit("areaClick", { data: e.data.exData });
         }
@@ -330,17 +332,17 @@ export default {
   emits: {
     areaClick: null,
   },
-  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();
     });

src/components/chart/line/marker-line-chart.vue

@@ -160,40 +160,40 @@ export default {
               width: 1,
             },
           },
-          markPoint:
-            index == 0
-              ? {
-                  data: [
-                    {
-                      type: "average",
-                      name: "保证功率",
-                      symbolSize: 0,
-                      label: {
-                        offset: [0, -40],
-                        formatter: function(param) {
-                          return `{title|${param.name}}` + "\n" + `{value| ${param.value}${that.unit}}`;
-                        },
-                        backgroundColor: partten.getColor("green") + 33,
-                        borderColor: partten.getColor("green"),
-                        borderWidth: 0.5,
-                        borderRadius: 2,
-                        padding: 8,
-                        rich: {
-                          title: {
-                            color: partten.getColor("green"),
-                            fontSize: 12,
-                          },
-                          value: {
-                            color: "#fff",
-                            fontSize: 16,
-                            padding: [12, 0, 0, -4],
-                          },
-                        },
-                      },
-                    },
-                  ],
-                }
-              : {},
+          markPoint:{},
+            // index == 0
+            //   ? {
+            //       data: [
+            //         {
+            //           type: "average",
+            //           name: "保证功率",
+            //           symbolSize: 0,
+            //           label: {
+            //             offset: [0, -40],
+            //             formatter: function(param) {
+            //               return `{title|${param.name}}` + "\n" + `{value| ${param.value}${that.unit}}`;
+            //             },
+            //             backgroundColor: partten.getColor("green") + 33,
+            //             borderColor: partten.getColor("green"),
+            //             borderWidth: 0.5,
+            //             borderRadius: 2,
+            //             padding: 8,
+            //             rich: {
+            //               title: {
+            //                 color: partten.getColor("green"),
+            //                 fontSize: 12,
+            //               },
+            //               value: {
+            //                 color: "#fff",
+            //                 fontSize: 16,
+            //                 padding: [12, 0, 0, -4],
+            //               },
+            //             },
+            //           },
+            //         },
+            //       ],
+            //     }
+            //   : {},
           yAxisIndex: value.yAxisIndex,
           data: value.value.map((t) => {
             return t.value;

src/components/coms/table/table.vue

@@ -13,7 +13,7 @@
           <td
             v-for="(col, i) of data.column"
             :key="i"
-            :style="{ width: col.width }"
+            :style="{ width: col.width, color: row.color }"
             :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
             @mouseenter="hover(row, col)"
             @mouseleave="leave()"

src/router/index.js

@@ -381,8 +381,8 @@ const routes = [{
             import ( /* webpackChunkName: "sandtable" */ "../views/SandTable/SandTable.vue"),
     },
     {
-        path: "/new/dj1",
-        name: "dj1",
+        path: "/performanceAnalysis", // 单机性能分析
+        name: "performanceAnalysis",
         component: () =>
             import ( /* webpackChunkName: "dj1" */ "../views/NewPages/dj1.vue"),
     },
@@ -399,10 +399,14 @@ const routes = [{
             import ( /* webpackChunkName: "fs" */ "../views/NewPages/forecast-system.vue"),
     },
     {
-        path: '/new/ztfx',
-        name: 'ztfx',
-        component: () =>
-            import ( /* webpackChunkName: "ztfx" */ '../views/NewPages/ztfx.vue'),
+      path: '/new/ztfx',
+      name: 'ztfx',
+      component: () => import( /* webpackChunkName: "ztfx" */ '../views/NewPages/ztfx.vue'),
+    },
+    {
+      path: '/new/fdlyl',
+      name: 'fdlyl',
+      component: () => import( /* webpackChunkName: "ztfx" */ '../views/NewPages/fdlyl.vue'),
     },
     {
         path: '/new/intelligentalarmcenter',

src/views/NewPages/alarm-center.vue

@@ -2,38 +2,49 @@
   <div class="alarm-center">
     <div class="action-bar">
       <div class="selections mg-b-16">
-        <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">发电机</div>
+        <div v-for="(tabItem, tabIndex) in tabLists" :key="tabItem.type" class="item" :class="{ active: tabIndex == cureent }" @click="tabSelect(tabItem.type, tabIndex)" >
+          {{ tabItem.name }}
+        </div>
+        <!-- <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">发电机</div>
         <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">齿轮箱</div>
         <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">变桨系统</div>
         <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">液压站</div>
         <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 4 }">风机震动</div>
-        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 5 }">其他参数</div>
+        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 5 }">其他参数</div> -->
       </div>
       <div class="query mg-b-16">
         <div class="query-items">
           <div class="query-item">
             <div class="lable">风场：</div>
             <div class="search-input">
-              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              <el-select v-model="optSelectValue" clearable placeholder="请选择" popper-class="select" @change="handelSelectChange">
+                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
               </el-select>
             </div>
           </div>
         </div>
         <div class="query-actions">
-          <button class="btn green">搜索</button>
+          <button class="btn green" @click="handelSelectChange">搜索</button>
         </div>
       </div>
     </div>
     <el-scrollbar>
       <div class="fj">
+        <div class="fj-item" v-for="(item, index) in tableLists" :key="index">
+          <div class="fj-title">风机编号:{{item[0].wtId}}</div>
+          <div class="fj-info">
+            <Table :data="handleTable(item)"></Table>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="fj">
         <div class="fj-item" v-for="index in 25" :key="index">
           <div class="fj-title">风机编号:000</div>
           <div class="fj-info">
             <Table :data="tableData"></Table>
           </div>
         </div>
-      </div>
+      </div> -->
     </el-scrollbar>
   </div>
 </template>
@@ -44,7 +55,70 @@ export default {
   components: { Table },
   data() {
     return {
-      tableData: {
+      cureent: 0,
+      optSelectValue: '',
+      tabLists: [
+        {
+          type: 'fdj',
+          name: '发电机'
+        },
+        {
+          type: 'clx',
+          name: '齿轮箱'
+        },
+        {
+          type: 'bj',
+          name: '变桨系统'
+        },
+        {
+          type: 'yyz',
+          name: '液压站'
+        },
+        {
+          type: 'zd',
+          name: '风机震动'
+        },
+        {
+          type: 'qt',
+          name: '其他参数'
+        }
+      ],
+      // tableData: {
+      //   column: [
+      //     {
+      //       name: "",
+      //       field: "name",
+      //       is_num: false,
+      //       is_light: false,
+      //     },
+      //     {
+      //       name: "",
+      //       field: "value",
+      //       is_num: false,
+      //       is_light: false,
+      //     },
+      //   ],
+      //   data: [
+      //     // {
+      //     //   name: "发电机绕组U1温度",
+      //     //   desc: "1234.56",
+      //     // },
+      //   ],
+      // },
+      tableLists: [],
+      options: [],
+      type: '',
+      timmer: null, // 遮罩开关
+    };
+  },
+  methods: {
+    tabSelect(type, index) {
+      this.cureent = index
+      this.type = type
+      this.getList(true)
+    },
+    handleTable(item) {
+      let tableData = {
         column: [
           {
             name: "",
@@ -54,27 +128,69 @@ export default {
           },
           {
             name: "",
-            field: "desc",
+            field: "value",
             is_num: false,
             is_light: false,
           },
         ],
-        data: [
-          {
-            name: "发电机绕组U1温度",
-            desc: "1234.56",
+        data: item
+      }
+      return tableData
+    },
+    handelSelectChange() {
+      this.getList(true)
+    },
+    getList(showLoading) {
+      let _this = this
+      _this.API.requestData({
+          showLoading,
+          method: "POST",
+          subUrl: "/temperature/getTemperatureList",
+          data:{
+            type: this.type,
+            wpId: this.optSelectValue
           },
-        ],
-      },
-    };
-  },
-  methods: {
-    tabSelect(tab) {},
+          success(res) {
+            _this.tableLists = res.data
+            // this.tableData.data = res.data
+            // debugger
+            console.log(res)
+          }
+      })
+    },
+
+    getSelectLists(showLoading) {
+      let _this = this
+      _this.API.requestData({
+          showLoading,
+          method: "GET",
+          subUrl: "/powercompare/windfarmAjax",
+          success(res) {
+            _this.options = res.data
+            _this.optSelectValue = res.data[0].id
+            _this.$nextTick(() => {
+              _this.getList(false);
+              _this.timmer = setInterval(() => {
+                _this.getList(false)
+              }, _this.$store.state.websocketTimeSec);
+            });
+          }
+      })
+    }
   },
   created() {
-    for (let i = 1; i < 7; i++) {
-      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
-    }
+    // for (let i = 1; i < 7; i++) {
+    //   this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+    // }
+    this.type = this.tabLists[0].type
+    this.getSelectLists(false);
+
+    // this.getList()
+  },
+
+  unmounted() {
+    clearInterval(this.timmer);
+    this.timmer = null;
   },
 };
 </script>

src/views/NewPages/dj1.vue

@@ -6,35 +6,37 @@
         <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">风机日详细信息</div>
         <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">风场玫瑰图</div>
         <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">风机玫瑰图</div>
-        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 4 }">风机切入切出分析</div>
+        <div class="item" @click="tabSelect(4)" :class="{ active: tabIndex == 4 }">风机切入切出分析</div>
       </div>
       <div class="query mg-b-16">
         <div class="query-items">
           <div class="query-item">
             <div class="lable">风场：</div>
             <div class="search-input">
-              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="getWtArray">
+                <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
               </el-select>
             </div>
           </div>
           <div class="query-item">
             <div class="lable">风机：</div>
             <div class="search-input">
-              <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              <el-select v-model="wtId" clearable placeholder="请选择" popper-class="select">
+                <el-option v-for="item in wtArray" :key="item.id" :value="item.id" :label="item.name" />
               </el-select>
             </div>
           </div>
           <div class="query-item">
             <div class="lable">日期：</div>
             <div class="search-input">
-              <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+              <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">搜索</button>
+          <button class="btn green" @click="search">搜索</button>
         </div>
       </div>
     </div>
@@ -42,20 +44,21 @@
     <!-- tab1 -->
     <div v-if="tabIndex == 0" class="tab-1">
       <panel :title="'损失电量分析'" class="mg-b-16">
-        <area-bar-chart :height="'23.1481vh'" />
+        <area-bar-chart :height="'23.1481vh'" :bardata="{ legend: [] }" :lineData="lostChartData" :units="lostChartUnit"
+          :areaData="LostChartBgColorData" :showLegend="true" />
       </panel>
       <panel :title="'电量'" class="mg-b-16">
-        <multiple-bar-line-chart :height="'16.6667vh'" />
+        <multiple-bar-line-chart :height="'16.6667vh'" :barData="powerChartData" :lineData="powerChartLineData" :units="['(kWh)']" :showLegend="true" />
       </panel>
       <div class="table-info">
         <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
-          <Table :data="tableData" :canScroll="true" :height="'32.5vh'" />
+          <Table :data="warnTableData" :canScroll="true" :height="'32.5vh'" />
         </panel>
-        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
-          <Table :data="tableData" :canScroll="true" :height="'32.5vh'" />
+        <panel class="table-panel" :title="'当日故障记录'" :showLine="false">
+          <Table :data="stopTableData" :canScroll="true" :height="'32.5vh'" />
         </panel>
-        <panel class="table-panel" :title="'当日报警记录'" :showLine="false">
-          <Table :data="tableData" :canScroll="true" :height="'32.5vh'" />
+        <panel class="table-panel" :title="'当日限电记录'" :showLine="false">
+          <Table :data="xdTableData" :canScroll="true" :height="'32.5vh'" />
         </panel>
       </div>
     </div>
@@ -65,13 +68,89 @@
       <el-row>
         <el-col :span="15">
           <panel :title="'功率曲线'" class="mg-b-16">
-            <marker-line-chart :height="'28vh'" />
+            <marker-line-chart :height="'28vh'" :list="powerLineChartData" :showLegend="true" />
           </panel>
           <panel :title="'日发电量信息'" class="mg-b-16 outline" :showLine="false">
             <div class="power-info">
-              <div class="info-item" v-for="index in 20" :key="index">
+              <div class="info-item">
+                <div class="text">发电量：</div>
+                <div class="value green">{{dayPowerInfo.c1}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">理论发电量：</div>
+                <div class="value green">{{dayPowerInfo.c4}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">平均功率：</div>
+                <div class="value green">{{dayPowerInfo.c7}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">平均风速：</div>
+                <div class="value green">{{dayPowerInfo.c10}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">拟合优度：</div>
+                <div class="value green">{{dayPowerInfo.c55}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">运行小时：</div>
+                <div class="value green">{{dayPowerInfo.c13}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">停机小时：</div>
+                <div class="value green">{{dayPowerInfo.c16}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">故障小时：</div>
+                <div class="value green">{{dayPowerInfo.c19}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">维护小时：</div>
+                <div class="value green">{{dayPowerInfo.c22}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">中断小时：</div>
+                <div class="value green">{{dayPowerInfo.c25}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">有效风时数：</div>
+                <div class="value green">{{dayPowerInfo.c28}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">损失电量：</div>
+                <div class="value green">{{dayPowerInfo.c31}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">报警次数：</div>
+                <div class="value green">{{dayPowerInfo.c34}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">停机次数：</div>
+                <div class="value green">{{dayPowerInfo.c37}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">不饱和次数：</div>
+                <div class="value green">{{dayPowerInfo.c40}}</div>
+              </div>
+              <div class="info-item">
                 <div class="text">设备可利用率：</div>
-                <div class="value green">115.01</div>
+                <div class="value green">{{dayPowerInfo.c43}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">实际/保证偏差率：</div>
+                <div class="value green">{{dayPowerInfo.c58}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">平均温度：</div>
+                <div class="value green">{{dayPowerInfo.c46}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">平均湿度：</div>
+                <div class="value green">{{dayPowerInfo.c49}}</div>
+              </div>
+              <div class="info-item">
+                <div class="text">平均压强：</div>
+                <div class="value green">{{dayPowerInfo.c52}}</div>
               </div>
             </div>
           </panel>
@@ -79,19 +158,79 @@
             <div class="month-info-left">
               <panel :title="'月发电量信息'" class="mg-b-16 outline" :showLine="false">
                 <div class="power-info month-3">
-                  <div class="info-item" v-for="index in 15" :key="index">
+                  <div class="info-item">
+                    <div class="text">月发电量：</div>
+                    <div class="value green">{{dayPowerInfo.c2}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月理论发电量：</div>
+                    <div class="value green">{{dayPowerInfo.c5}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月平均功率：</div>
+                    <div class="value green">{{dayPowerInfo.c8}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月平均风速：</div>
+                    <div class="value green">{{dayPowerInfo.c11}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月拟合优度：</div>
+                    <div class="value green">{{dayPowerInfo.c56}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月运行小时：</div>
+                    <div class="value green">{{dayPowerInfo.c14}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月停机小时：</div>
+                    <div class="value green">{{dayPowerInfo.c17}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月故障小时：</div>
+                    <div class="value green">{{dayPowerInfo.c20}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月维护小时：</div>
+                    <div class="value green">{{dayPowerInfo.c23}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月中断小时：</div>
+                    <div class="value green">{{dayPowerInfo.c26}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月有效风时数：</div>
+                    <div class="value green">{{dayPowerInfo.c29}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月报警次数：</div>
+                    <div class="value green">{{dayPowerInfo.c35}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">月停机次数：</div>
+                    <div class="value green">{{dayPowerInfo.c38}}</div>
+                  </div>
+                  <div class="info-item">
                     <div class="text">月实际/保证：</div>
-                    <div class="value green">115.01</div>
+                    <div class="value green">{{dayPowerInfo.c59}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">设备可利用率：</div>
+                    <div class="value green">{{dayPowerInfo.c44}}</div>
                   </div>
                 </div>
               </panel>
             </div>
             <div class="month-info-right">
-              <panel :title="'月发电量信息'" class="mg-b-16 outline" :showLine="false">
+              <panel :title="'年发电量信息'" class="mg-b-16 outline" :showLine="false">
                 <div class="power-info month-2">
-                  <div class="info-item" v-for="index in 2" :key="index">
-                    <div class="text">月实际/保证：</div>
-                    <div class="value green">115.01</div>
+                  <div class="info-item">
+                    <div class="text">年发电量：</div>
+                    <div class="value green">{{dayPowerInfo.c3}}</div>
+                  </div>
+                  <div class="info-item">
+                    <div class="text">年拟合优度：</div>
+                    <div class="value green">{{dayPowerInfo.c57}}</div>
                   </div>
                 </div>
               </panel>
@@ -99,9 +238,9 @@
                 <div class="wind-info">
                   <div class="legend mg-r-16">
                     <span class="dot"></span>
-                    <span>静风频率为2</span>
+                    <span>{{jfplStr}}</span>
                   </div>
-                  <direction-radar-chart :width="'60%'" :height="'180px'" />
+                  <direction-radar-chart :width="'60%'" :height="'152px'" :value="windResourcesData" :showLegend="true" />
                 </div>
               </panel>
             </div>
@@ -109,13 +248,13 @@
         </el-col>
         <el-col :span="9">
           <panel class="table-panel outline mg-b-16" :title="'当日报警记录'" :showLine="false">
-            <Table :data="tableData" :canScroll="true" :height="'23vh'" />
+            <Table :data="warnTableData" :canScroll="true" :height="'23vh'" />
           </panel>
-          <panel class="table-panel outline mg-b-16" :title="'当日报警记录'" :showLine="false">
-            <Table :data="tableData" :canScroll="true" :height="'23vh'" />
+          <panel class="table-panel outline mg-b-16" :title="'当日故障记录'" :showLine="false">
+            <Table :data="stopTableData" :canScroll="true" :height="'23vh'" />
           </panel>
-          <panel class="table-panel outline" :title="'当日报警记录'" :showLine="false">
-            <Table :data="tableData" :canScroll="true" :height="'23vh'" />
+          <panel class="table-panel outline" :title="'当月报警排行'" :showLine="false">
+            <Table :data="monthWarnRecordData" :canScroll="true" :height="'23vh'" />
           </panel>
         </el-col>
       </el-row>
@@ -129,31 +268,31 @@
             <div class="wind-info">
               <div class="legend mg-r-16">
                 <span class="dot"></span>
-                <span>静风频率为2</span>
+                <span>{{rzdfsStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" />
+              <direction-radar-chart :width="'100%'" :height="'350px'" :value="rzdfsData" />
             </div>
           </panel>
         </el-col>
         <el-col :span="8">
-          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+          <panel :title="'月最大风速'" class="radar-panel" :icon="'svg-wind-site'">
             <div class="wind-info">
               <div class="legend mg-r-16">
                 <span class="dot"></span>
-                <span>静风频率为2</span>
+                <span>{{yzdfsStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" />
+              <direction-radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
             </div>
           </panel>
         </el-col>
         <el-col :span="8">
-          <panel :title="'日最大风速'" class="radar-panel" :icon="'svg-wind-site'">
+          <panel :title="'年最大风速'" class="radar-panel" :icon="'svg-wind-site'">
             <div class="wind-info">
               <div class="legend mg-r-16">
                 <span class="dot"></span>
-                <span>静风频率为2</span>
+                <span>{{nzdfsStr}}</span>
               </div>
-              <direction-radar-chart :width="'100%'" :height="'350px'" />
+              <direction-radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
             </div>
           </panel>
         </el-col>
@@ -240,15 +379,15 @@ import AreaBarChart from "../../components/chart/combination/area-bar-chart.vue"
 import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
 import MarkerLineChart from "../../components/chart/line/marker-line-chart.vue";
 import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
-import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
+import DirectionRadarChart from "@com/chart/radar/radar-chart.vue";
 import panel from "../../components/coms/panel/panel.vue";
 import Table from "../../components/coms/table/table.vue";
 export default {
   components: { panel, AreaBarChart, MultipleBarLineChart, Table, MarkerLineChart, DirectionRadarChart, DualPieChart },
-  setup() {},
-  data() {
+  setup () { },
+  data () {
     return {
-      tabIndex: 0,
+      tabIndex: 1,
       tableData: {
         column: [
           {
@@ -270,36 +409,177 @@ export default {
             is_light: false,
           },
         ],
-        data: [
+        data: []
+      },
+
+      wpArray: [],
+      wpId: "",
+      wtArray: [],
+      wtId: "",
+
+      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+
+      lostChartData: [],
+      lostChartUnit: [],
+      LostChartBgColorData: [],
+
+      powerChartData: [{
+        title: "",
+        yAxisIndex: 0,
+        value: []
+      }],
+
+      powerChartLineData: {
+        name: "",
+        unit: "",
+        data: []
+      },
+
+      warnTableData: {
+        column: [
+          {
+            name: "风机",
+            field: "windturbineid",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "描述",
+            field: "warnDesc",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "报警时间",
+            field: "warningtime",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: []
+      },
+
+      stopTableData: {
+        column: [
+          {
+            name: "风机",
+            field: "windTurbineId",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "停机时间",
+            field: "stopTime",
+            is_num: false,
+            is_light: false,
+          },
           {
-            name: "MG01-01",
-            desc: "描述描述描述描述描述描述描述描述描述描述",
-            date: "2020-01-01",
+            name: "恢复时间",
+            field: "starttime",
+            is_num: false,
+            is_light: false,
           },
         ],
+        data: []
       },
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
+
+      xdTableData: {
+        column: [
+          {
+            name: "风机",
+            field: "windturbineid",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "停机时间",
+            field: "stoptime",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "恢复时间",
+            field: "starttime",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "损失电量",
+            field: "losspower",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "限电时长",
+            field: "stophours",
+            is_num: false,
+            is_light: false,
+          }
+        ],
+        data: []
+      },
+
+      powerLineChartData: [{
+        title: "",
+        value:[]
+      }],
+
+      dayPowerInfo:{},
+
+      monthWarnRecordData: {
+        column: [
+          {
+            name: "名字",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "次数",
+            field: "frequency",
+            is_num: true,
+            is_light: false,
+          }
+        ],
+        data: []
+      },
+
+      jfplStr:"",
+      windResourcesData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+            value: [44200, 14200, 20000, 35000, 50000, 38000],
+            name: ""
+          }]
+      },
+
+      rzdfsStr:"",
+      rzdfsData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+            value: [44200, 14200, 20000, 35000, 50000, 38000],
+            name: ""
+          }]
+      },
+
+      yzdfsStr:"",
+      yzdfsData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+            value: [44200, 14200, 20000, 35000, 50000, 38000],
+            name: ""
+          }]
+      },
+
+      nzdfsStr:"",
+      nzdfsData: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [{
+            value: [44200, 14200, 20000, 35000, 50000, 38000],
+            name: ""
+          }]
+      },
+
       value1: [],
       value2: [],
       value3: [],
@@ -308,15 +588,381 @@ export default {
     };
   },
   methods: {
-    tabSelect(state) {
-      this.tabIndex = state;
+    // 获取风场
+    getWpArray () {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAjax",
+        success (res) {
+          that.wpArray = res.data;
+          that.wpId = res.data[0].id;
+          that.getWtArray(that.wpId, true);
+        }
+      });
     },
-  },
-  created() {
-    for (let i = 1; i < 50; i++) {
-      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+
+    // 获取风机
+    getWtArray (wpId, keepRequest) {
+      let that = this;
+      if (wpId) {
+        that.API.requestData({
+          method: "GET",
+          subUrl: "powercompare/windturbineAjax",
+          data: {
+            wpId
+          },
+          success (res) {
+            that.wtArray = res.data;
+            that.wtId = res.data[0].id;
+            if (keepRequest) {
+              that.search();
+            }
+          }
+        });
+      } else {
+        that.wtArray = [];
+        that.wtId = "";
+      }
+    },
+
+    // tab1 - 获取损失电量分析图表数据
+    getLostChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/findWtRealPowerChar",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          const keyArray = ["value1", "value2", "value3", "value4"];
+
+          let lostChartData = [[], [], [], []];
+          const lostChartUnit = ["实发功率", "保证功率", "风速", "状态"];
+
+
+          keyArray.forEach((key, keyIndex) => {
+            res.data.forEach(ele => {
+              lostChartData[keyIndex].push(ele[key]);
+            });
+          });
+          that.lostChartData = lostChartData;
+          that.lostChartUnit = lostChartUnit;
+          that.getLostChartBgColorData();
+        }
+      });
+    },
+
+    // tab1 - 获取损失电量分析图表背景颜色
+    getLostChartBgColorData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/getplotBands",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          let LostChartBgColorData = [];
+          res.data.forEach((pEle, pIndex) => {
+            LostChartBgColorData.push({
+              name: pEle[0].name,
+              start: (pIndex ? LostChartBgColorData[pIndex - 1].end : 0),
+              end: (pIndex ? LostChartBgColorData[pIndex - 1].end : 0) + ((new Date(pEle[0].time2).getTime() / 1000) - (new Date(pEle[0].time1).getTime() / 1000)),
+              color: pEle[0].itemStyle.color
+            });
+          });
+          that.LostChartBgColorData = LostChartBgColorData;
+        }
+      });
+    },
+
+    // tab1 - 获取电量图表数据
+    getPowerChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/findRealPowerCharBy24",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          const keyArray = ["value1", "value2", "value3", "value4", "value5"];
+
+          let powerChartData = [{
+            title: "scada发电量",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "维护损失",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "故障损失",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "限电损失",
+            yAxisIndex: 0,
+            value: []
+          }, {
+            title: "欠发损失",
+            yAxisIndex: 0,
+            value: []
+          }];
+
+          let powerChartLineData = {
+            name: "风速",
+            unit: "(m/s)",
+            data: []
+          }
+
+          keyArray.forEach((keyEle, keyIndex) => {
+            res.data.forEach(ele => {
+              powerChartData[keyIndex].value.push({
+                text: new Date(ele.time).formatDate("hh:mm"),
+                value: ele[keyEle]
+              });
+              powerChartLineData.data.push(ele.value6);
+            });
+          });
+          that.powerChartData = powerChartData;
+          that.powerChartLineData = powerChartLineData;
+        }
+      });
+    },
+
+    // tab1 - 获取当日报警数据
+    getWarnData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/bjjllist",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          res.data.list.forEach(ele => {
+            ele.warningtime = new Date(ele.warningtime).formatDate("yyyy-MM-dd hh:mm:ss")
+          });
+          that.warnTableData.data = res.data.list;
+        }
+      });
+    },
+
+    // tab1 - 获取当日故障数据
+    getStopData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/gzjllist",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          res.data.list.forEach(ele => {
+            ele.stopTime = new Date(ele.stopTime).formatDate("yyyy-MM-dd hh:mm:ss");
+            ele.starttime = (ele.starttime ? new Date(ele.starttime).formatDate("yyyy-MM-dd hh:mm:ss") : "");
+          });
+          that.stopTableData.data = res.data.list;
+        }
+      });
+    },
+
+    // tab1 - 获取当日限电数据
+    getXdData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/xdjllist",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          res.data.list.forEach(ele => {
+            ele.stopTime = new Date(ele.stopTime).formatDate("yyyy-MM-dd hh:mm:ss");
+            ele.starttime = (ele.starttime ? new Date(ele.starttime).formatDate("yyyy-MM-dd hh:mm:ss") : "");
+
+          });
+          that.xdTableData.data = res.data.list;
+        }
+      });
+    },
+
+    tabSelect (index) {
+      this.tabIndex = index;
+      this.search();
+    },
+
+    // tab2 - 获取日发电量信息
+    getDayPowerInfo () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/wadAjax",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          that.dayPowerInfo = res.data;
+        }
+      });
+    },
+
+    // tab2 - 获取当月报警排行
+    getMonthWarnRecord () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/bjphlist",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          that.monthWarnRecordData.data = res.data;
+        }
+      });
+    },
+
+    // tab2 - 获取当月报警排行
+    getPowerLineChartData () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/glchat",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          const keyArray = ["value1", "value2", "value3"];
+
+          let powerLineChartData = [{
+            title: "实际拟合功率",
+            value:[]
+          },{
+            title: "最优拟合功率",
+            value:[]
+          },{
+            title: "保证功率",
+            value:[]
+          }];
+
+          keyArray.forEach((keyEle,keyIndex) =>{
+            res.data.forEach((ele,index)=>{
+              powerLineChartData[keyIndex].value.push({
+                text: (index + 1),
+                value: ele[keyEle]
+              });
+            });
+          });
+
+          that.powerLineChartData = powerLineChartData;
+        }
+      });
+    },
+
+    // tab2 - 获取当月报警排行
+    getWindResources  () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "goodness/fjfzy",
+        data: {
+          wtId: that.wtId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          that.jfplStr=res.data.jfpl || "";
+
+          let windResourcesData = {
+            indicator: [],
+            data: [{
+              name: "",
+              value: []
+            }]
+          };
+
+          res.data.data.forEach((ele) => {
+            windResourcesData.indicator.push(ele.name);
+            windResourcesData.data[0].value.push(ele.data1);
+          });
+
+          that.windResourcesData = windResourcesData;
+        }
+      });
+    },
+
+    // tab3 - 获取玫瑰图
+    getMgt (subUrl, dataKey) {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl,
+        data: {
+          wpId: that.wpId,
+          recorddate: that.recorddate
+        },
+        success (res) {
+          that[dataKey + "Str"] = res.data.jfpl || "";
+
+          let mgtData = {
+            indicator: [],
+            data: [{
+              name: "",
+              value: []
+            }]
+          };
+
+          if(res.data.data){
+            res.data.data.forEach((ele) => {
+              mgtData.indicator.push(ele.name);
+              mgtData.data[0].value.push(ele.data1);
+            });
+          }
+
+          that[dataKey + "Data"] = mgtData;
+
+          console.log(dataKey,mgtData)
+        }
+      });
+    },
+
+
+    // 搜索
+    search () {
+      if (this.tabIndex === 0) {
+        this.getLostChartData();
+        this.getPowerChartData();
+        this.getWarnData();
+        this.getStopData();
+        this.getXdData();
+      } else if (this.tabIndex === 1) {
+        this.getWarnData();
+        this.getStopData();
+        this.getDayPowerInfo();
+        this.getMonthWarnRecord();
+        this.getPowerLineChartData();
+        this.getWindResources();
+      } else if (this.tabIndex === 2) {
+        this.getMgt("goodness/wprzdfs", "rzdfs");
+        this.getMgt("goodness/wpyzdfs", "yzdfs");
+        this.getMgt("goodness/wpnzdfs", "nzdfs");
+      }
     }
   },
+  created () {
+    this.getWpArray();
+  },
 };
 </script>
 

src/views/NewPages/fdlyl.vue

@@ -0,0 +1,547 @@
+<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 = {}
+              monthsAll.push(item.month)
+              if (item.month > 10) {
+                objs.text = item.month.toString()
+              } else {
+                item.text = '0'+ item.month
+                objs.text = item.text
+              }
+              for (let key in item) {
+                if (key === 'current') {
+                  objs.value = item.current
+                  nowCureent.push(objs)
+                } else if (key === 'sameperiod'){
+                  objs.value = item.sameperiod
+                  sameCureent.push(objs)
+                }
+                
+              }
+            })
+            console.log(nowCureent)
+            _this.monthData = monthsAll
+            _this.DayPower = {
+              // 图表所用单位
+              units: [""],
+              value: [
+                {
+                  title: "本期",
+                  yAxisIndex: 0, // 使用单位
+                  value: nowCureent,
+                  // nowCureent
+                },
+                {
+                  title: "同期",
+                  yAxisIndex: 0, // 使用单位
+                  value: sameCureent,
+                  // sameCureent
+                },
+              ],
+            }
+
+            console.log(111,_this.DayPower)
+            // _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/cutAnalyse/index.vue

@@ -1,33 +1,32 @@
 <template>
   <div class="draught-fan-list">
     <div class="query mg-b-8">
-			<div class="query-items">
-				<div class="query-item">
-					<div class="lable">场站：</div>
-					<div class="search-input">
-						<el-select v-model="wpId" clearable placeholder="请选择"
-							popper-class="select">
-							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
-						</el-select>
-					</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>
-			<div class="query-actions">
-				<button class="btn green" @click="search()">查询</button>
-			</div>
-		</div>
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
+            </el-select>
+          </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>
+      <div class="query-actions">
+        <button class="btn green" @click="search()">查询</button>
+      </div>
+    </div>
     <div class="df-table">
       <ComTable height="78vh" :data="tableData"></ComTable>
     </div>
-    <el-dialog title="切入切出风速整合历史" v-model="dialogShow" width="85%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="dialogType = ''">
+    <el-dialog title="切入切出风速整合历史" v-model="dialogShow" width="85%" top="10vh" custom-class="modal"
+      :close-on-click-modal="true" @closed="dialogType = ''">
       <ComTable height="100vh" :data="tableHistoryData"></ComTable>
     </el-dialog>
   </div>
@@ -41,18 +40,18 @@ export default {
 
   // 使用组件
   components: {
-   ComTable
+    ComTable
   },
 
   // 数据
-  data() {
+  data () {
     const that = this;
     return {
-      isAsc:"asc",
-      wpArray:[],
-      wpId:"",
-      recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
-      dialogShow:false,
+      isAsc: "asc",
+      wpArray: [],
+      wpId: "",
+      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
+      dialogShow: false,
       tableData: {
         column: [
           {
@@ -290,10 +289,10 @@ export default {
             field: "",
             is_num: false,
             is_light: false,
-            template() {
-								return "<el-button type='text' style='cursor: pointer;'>历史</el-button>";
-						},
-            click(e, row){
+            template () {
+              return "<el-button type='text' style='cursor: pointer;'>历史</el-button>";
+            },
+            click (e, row) {
               that.getOutputspeedHistoryList(row)
             }
           }
@@ -437,55 +436,55 @@ export default {
   // 函数
   methods: {
     // 请求服务
-    requestData() {
+    requestData () {
       let that = this;
       that.API.requestData({
         method: "GET",
         subUrl: "powercompare/windfarmAjax",
-        success(res) {
-          that.wpArray=res.data;
-          that.wpId=res.data[0].id;
+        success (res) {
+          that.wpArray = res.data;
+          that.wpId = res.data[0].id;
           that.getOutputSpeedList(that.wpId)
         }
       });
     },
 
-    getOutputSpeedList(wpId){
+    getOutputSpeedList (wpId) {
       let that = this;
-      if(!that.wpId || !that.recorddate){
+      if (!that.wpId || !that.recorddate) {
         that.BASE.showMsg({
-          msg:"场站与日期不可为空"
+          msg: "场站与日期不可为空"
         });
-      }else{
+      } else {
         that.API.requestData({
           method: "POST",
           subUrl: "outputspeed/outputSpeedlist",
-          data:{
+          data: {
             wpId,
-            isAsc:that.isAsc,
-            recorddate:that.recorddate
+            isAsc: that.isAsc,
+            recorddate: that.recorddate
           },
-          success(res) {
+          success (res) {
             that.tableData.data = res.data;
           }
         });
       }
-      
+
     },
 
-    getOutputspeedHistoryList (item){
+    getOutputspeedHistoryList (item) {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl: "outputspeed/outputspeedhistorylist",
-        data:{
-          wpId:item.windpowerstationid,
-          wtId:item.windturbineid,
+        data: {
+          wpId: item.windpowerstationid,
+          wtId: item.windturbineid,
           beginDate: (new Date().formatDate("yyyy-MM") + '-01'),
           endDate: new Date().formatDate("yyyy-MM-dd")
         },
-        success(res) {
-          res.data.forEach(ele=>{
+        success (res) {
+          res.data.forEach(ele => {
             ele.time = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
           });
           that.tableHistoryData.data = res.data;
@@ -494,18 +493,18 @@ export default {
       });
     },
 
-    search(){
+    search () {
       this.getOutputSpeedList(this.wpId);
     }
   },
 
-  created() {
+  created () {
     this.requestData();
   },
 
-  mounted() {},
+  mounted () { },
 
-  unmounted() {},
+  unmounted () { },
 };
 </script>
 
@@ -533,7 +532,7 @@ export default {
     margin-top: 1.481vh;
 
     &:before {
-      content: "";
+      content: '';
       width: 0.37vh;
       height: 0.37vh;
       background: @write;

src/views/layout/Menu.vue

@@ -107,6 +107,18 @@ export default {
                   path: "/historySearch"
                 }
               ]
+            },
+            {
+              text: "预警记录",
+              icon: "svg-wind-site",
+              path: "/new",
+              children: [
+                {
+                  text: "预警管理",
+                  icon: "svg-wind-site",
+                  path: "/new/alarmcenter"
+                }
+              ]
             }
           ],
         },

src/views/realSearch/index.vue

@@ -15,7 +15,7 @@
           </div>
         </div>
         <div class="query-item">
-          <div class="lable">描述：</div>
+          <div class="lable"></div>
           <div class="search-input">
             <el-checkbox v-model="form.autoReq" label="刷新" border @change="reReqAjax"></el-checkbox>
           </div>