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

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isLogined" class="main">
+  <div v-if="!showSisView && isLogined" class="main">
     <div class="header-body">
       <div class="header-title">
         <svg
@@ -248,7 +248,8 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
       <router-view />
     </div>
   </div>
-  <login-page v-if="!isLogined" @onLogin="login" />
+  <login-page v-if="!showSisView && !isLogined" @onLogin="login" />
+  <sisView v-if="showSisView" />
 </template>
 
 <script>
@@ -259,11 +260,13 @@ import Header from "@/views/layout/Header.vue";
 import { mapMutations } from "vuex";
 
 import LoginPage from "./views/layout/login-page.vue";
+import sisView from "./views/sisView/index.vue";
 export default {
   components: {
     Menu,
     Header,
     LoginPage,
+    sisView,
   },
 
   data() {
@@ -272,6 +275,7 @@ export default {
       // 当前子系统
       root: "",
       isLogined: true,
+      showSisView: false,
       memuCloseTimeout: null,
     };
   },
@@ -326,6 +330,12 @@ export default {
       if (params.username && params.password) this.isLogined = true;
     },
   },
+
+  watch: {
+    $route(res) {
+      this.showSisView = res.fullPath === "/sisView";
+    },
+  },
 };
 </script>
 

src/components/chart/bar/multiple-bar-chart.vue

@@ -226,7 +226,8 @@ export default {
           result.push({
             name: value.title,
             type: "bar",
-            barWidth: "10%",
+            barWidth: "8%",
+            // barWidth: "10%",
             animation: this.firstAnimation && this.showAnimation,
             yAxisIndex: value.yAxisIndex,
             data: value.value.map((t) => {

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

@@ -292,6 +292,7 @@ export default {
       );
     },
     initChart () {
+      console.log("units:",this.units)
       let that = this;
       let chart = echarts.init(this.$el);
 

src/components/other/clock/index.vue

@@ -0,0 +1,214 @@
+<template>
+  <div id="_C-ColckBox">
+    <canvas id="_C-Colck" :width="clockWidth" :height="clockHeight"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "clock",
+
+  // 数据
+  data() {
+    return {
+      L: 0, //基础半径
+      timer: null,
+      clockWidth: 0,
+      clockHeight: 0,
+    };
+  },
+
+  props: {
+    width: {
+      type: Number,
+      default: 430,
+    },
+    height: {
+      type: Number,
+      default: 430,
+    },
+  },
+
+  created() {
+    this.clockWidth = this.width;
+    this.clockHeight = this.height;
+  },
+
+  mounted() {
+    this.drawCoolClock();
+    this.timer = setInterval(() => {
+      this.drawCoolClock();
+    }, 30);
+  },
+
+  unmounted() {
+    clearInterval(this.timer);
+    this.timer = null;
+  },
+
+  // 函数
+  methods: {
+    drawCoolClock() {
+      const fixNum = 20;
+      let canvas = document.getElementById("_C-Colck");
+      let ctx = canvas.getContext("2d");
+      let [x0, y0] = [this.clockWidth / 2, this.clockHeight / 2]; //获取圆心x,y
+      this.L = this.clockWidth / 2 - 10 - fixNum; //设置圆半径
+      let [hourMaxL, hourMinL] = [this.L, this.L - 28]; //获取时刻度首位距离x0,y0位置
+      let [minMaxL, minMinL] = [this.L - 2, this.L - 15];
+      let centerL = 15;
+      let oDate = new Date(); //绑定当前时间
+      let oHours = oDate.getHours();
+      let oMin = oDate.getMinutes();
+      let oSen = oDate.getSeconds();
+      let oHoursValue = -90 + oHours * 30 + oMin / 2; //获取小时的角度
+      let oMinValue = -90 + oMin * 6;
+      let oSenValue = -90 + oSen * 6;
+      ctx.clearRect(0, 0, canvas.width, canvas.height); //清除画布
+      //   this.drawHoursScale(ctx, x0, y0, 12, 9, hourMaxL, hourMinL); //绘制表盘的时钟刻度scale
+      //   this.drawHoursScale(ctx, x0, y0, 60, 3, minMaxL, minMinL); //绘制表盘分钟刻度
+      //   this.drawScaleNum(ctx, hourMinL - 25, x0, y0); //绘制12个表盘数字
+      //   this.drawTimeNeedle(ctx, x0, y0, 15, 135, oHoursValue); //绘制时针
+      //   this.drawTimeNeedle(ctx, x0, y0, 8, minMaxL - 15, oMinValue); //绘制分针
+      //   this.drawTimeNeedle(ctx, x0, y0, 3, minMaxL - 2, oSenValue, "#f3a829"); //绘制秒针
+      //   this.drawSenDotted(ctx, "#f3a829", x0, y0, oSenValue - 180, centerL); //绘制秒针尾部
+      this.drawHoursScale(ctx, x0, y0, 12, 4, hourMaxL, hourMinL); //绘制表盘的时钟刻度scale
+      this.drawHoursScale(ctx, x0, y0, 60, 2, minMaxL, minMinL); //绘制表盘分钟刻度
+      this.drawScaleNum(ctx, hourMinL - 18, x0, y0); //绘制12个表盘数字
+      this.drawTimeNeedle(
+        ctx,
+        x0,
+        y0,
+        5,
+        (minMaxL - 15 - fixNum) / 1.5,
+        oHoursValue
+      ); //绘制时针
+      this.drawTimeNeedle(ctx, x0, y0, 5, minMaxL - 15 - fixNum, oMinValue); //绘制分针
+      this.drawTimeNeedle(ctx, x0, y0, 2, minMaxL - 2, oSenValue, "#f3a829"); //绘制秒针
+      this.drawSenDotted(ctx, "#f3a829", x0, y0, oSenValue - 180, 12); //绘制秒针尾部
+      this.drawCircleCenter(ctx, x0, y0, "#f3a829", 10); //绘制圆心
+    },
+    drawHoursScale(ctx, x0, y0, scaleNum, scaleW, maxL, minL) {
+      for (let i = 0; i < scaleNum; i++) {
+        let angel = -90 + i * (360 / scaleNum); //角度
+        let [x1, y1] = [
+          x0 + Math.cos((angel * Math.PI) / 180) * maxL,
+          y0 + Math.sin((angel * Math.PI) / 180) * maxL,
+        ];
+        let [x2, y2] = [
+          x0 + Math.cos((angel * Math.PI) / 180) * minL,
+          y0 + Math.sin((angel * Math.PI) / 180) * minL,
+        ];
+        ctx.save();
+        ctx.beginPath();
+        ctx.lineWidth = scaleW;
+        ctx.lineCap = "round";
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+        ctx.closePath();
+        ctx.restore();
+      }
+    },
+    drawScaleNum(ctx, L, x0, y0) {
+      for (let i = 0; i < 12; i++) {
+        let angel = -90 + i * (360 / 12); //角度
+        let [x, y] = [
+          x0 + Math.cos((angel * Math.PI) / 180) * L,
+          y0 + Math.sin((angel * Math.PI) / 180) * L,
+        ];
+        let num = i == 0 ? 12 : i;
+        ctx.strokeStyle = "rgb(229,228,227)";
+        ctx.save();
+        ctx.beginPath();
+        // ctx.font = "30px Arial";
+        ctx.font = "27px Arial";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+
+        ctx.fillText(num, x, y);
+        ctx.closePath();
+        ctx.restore();
+      }
+
+      const baseDate = new Date();
+
+      const weekDay = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+
+      ctx.fillStyle = "rgb(229,228,227)";
+
+      ctx.save();
+      ctx.beginPath();
+      ctx.font = "15px Arial";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(baseDate.formatDate("yyyy-MM-dd"), 285, 10);
+      ctx.fillText(baseDate.formatDate("hh:mm:ss"), 293, 30);
+      ctx.fillText(weekDay[baseDate.getDay()], 300, 50);
+      ctx.closePath();
+      ctx.restore();
+    },
+    drawTimeNeedle(ctx, x0, y0, lineW, L, angel, color = "rgb(229,228,227)") {
+      let [x, y] = [
+        x0 + Math.cos((angel * Math.PI) / 180) * L,
+        y0 + Math.sin((angel * Math.PI) / 180) * L,
+      ];
+      ctx.save();
+      ctx.beginPath();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = lineW;
+      ctx.lineCap = "round";
+      ctx.moveTo(x0, y0);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+      ctx.closePath();
+      ctx.restore();
+    },
+    drawCircleCenter(ctx, x0, y0, color, L) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.shadowBlur = 4;
+      ctx.shadowColor = "#000";
+      ctx.fillStyle = color;
+      ctx.arc(x0, y0, L, 0, (360 * Math.PI) / 180);
+      ctx.fill();
+      ctx.closePath();
+      ctx.restore();
+    },
+    drawSenDotted(ctx, color, x0, y0, angel, L) {
+      let [x, y] = [
+        x0 + Math.cos((angel * Math.PI) / 180) * L,
+        y0 + Math.sin((angel * Math.PI) / 180) * L,
+      ];
+      ctx.save();
+      ctx.beginPath();
+      ctx.fillStyle = color;
+      ctx.arc(x, y, 4, 0, (360 * Math.PI) / 180);
+      ctx.fill();
+      ctx.closePath();
+      ctx.restore();
+    },
+  },
+
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+#_C-ColckBox {
+  height: 100%;
+  //   background: radial-gradient(#f8f6f5, #f7f5f4, #e4e3e2, #b9b8b7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/router/index.js

@@ -25,6 +25,12 @@ const routes = [{
 	component: () =>
 		import( /* webpackChunkName: "Demo" */ "../views/Demo.vue"),
 },
+// {
+// 	path: "/sisView",
+// 	name: "sisView",
+// 	component: () =>
+// 		import( /* webpackChunkName: "sisView" */ "../views/sisView/index.vue"),
+// },
 {
 	path: "/monitor/status", // 状态监视
 	name: "Status",

src/views/About.vue

@@ -17,6 +17,7 @@
       <FJ id="fj-3" speed="2s" width="80px" height="82px" />
       <FJ />
       <FJ :speed="1" />
+      <clock style="display: inline-block" />
     </div>
     <el-table
       :data="tableData"
@@ -43,6 +44,7 @@
 // import ListBarChart from "../components/chart/bar/list-bar-chart.vue";
 import HealthReport from "@com/other/healthReport/index.vue";
 import FJ from "@com/other/fj/index.vue";
+import clock from "@com/other/clock/index.vue";
 // 导入header.vue文件
 export default {
   data() {
@@ -56,6 +58,7 @@ export default {
     // ListBarChart,
     HealthReport,
     FJ,
+    clock,
   },
 
   created() {

src/views/Decision/Decision1Mx.vue

@@ -55,7 +55,7 @@
 			</div>
 			<div class="query-actions">
 				<button class="btn" @click="mxClick()">搜索</button>
-				<button class="btn green">明细信息</button>
+				<button class="btn green" >明细信息</button>
 				<button class="btn" @click="exportExcel()">导出</button>
 			</div>
 		</div>

src/views/Decision/Decision2Cjdb.vue

@@ -104,6 +104,8 @@
 		data() {
 			let that = this;
 			return {
+				detailId:'', //详情id
+				idArr:[],
 				tableIdArr: [], //放checkbox的id数组
 				tableId: [],
 				checkLength: 0, //对标分析只能选择2个
@@ -323,7 +325,11 @@
 								return "<a class='action'>详情</a>";
 							},
 							click: function(event, data) {
+								console.log('DetailData:',data)
 								var dataId = that.tableIdArr[data.index - 1];
+								console.log('dataIndex:',data.index)
+				console.log('that.tableIdArr:',that.tableIdArr)
+				console.log('dataId:',dataId)
 								that.clearDb();
 								that.detailShow = 2;
 								that.API.requestData({
@@ -331,7 +337,8 @@
 									baseURL: "http://10.155.32.4:9001/",
 									subUrl: "benchmarking/details",
 									data: {
-										id: dataId,
+										// id: dataId,
+										id:that.idArr.length==1?that.detailId:dataId,
 										beginDate: that.value4,
 										endDate: that.value5,
 										target: '',
@@ -642,6 +649,12 @@
 					},
 					success(res) {
 						that.ajaxData = res.data;
+							that.idArr = res.data
+							console.log('idArr:',that.idArr)
+						if(res.data.length==1){
+							that.detailId = res.data[0].id
+							console.log('detailId:',that.detailId)
+						}
 						var dataTab = [], //表格
 							fdl = [],
 							cz = [],
@@ -654,6 +667,7 @@
 							slssdl = [];
 						res.data.forEach((item, index) => {
 							that.tableIdArr.push(item.id);
+							console.log('ajaxTable:',that.tableIdArr)
 							dataTab.push({ //表格
 								index: index + 1,
 								fdl: item.fdl,

src/views/Decision/Decision2Cndb.vue

@@ -94,6 +94,8 @@
 		data() {
 			let that = this;
 			return {
+				detailId:'',
+				idArr:[],
 				tableIdArr: [], //放checkbox的id数组
 				tableId: [],
 				checkLength: 0, //对标分析只能选择2个
@@ -307,6 +309,8 @@
 							},
 							click: function(event, data) {
 								var dataId = that.tableIdArr[data.index - 1];
+								console.log('detailData:',data)
+								console.log('tableArr:',that.tableIdArr)
 								that.clearDb();
 								that.detailShow = 2;
 								// var that = this;
@@ -322,9 +326,11 @@
 										sort: ''
 									},
 									success(res) {
+										console.log('details:',res)
 										var dataTab = [];
 										res.data.forEach((item, index) => {
-											that.tableIdArr.push(item.date);
+											// that.tableIdArr.push(item.date);
+											that.tableIdArr.push(item.id);
 
 											dataTab.push({ //表格
 												index: index + 1,
@@ -621,8 +627,14 @@
 						sort: ''
 					},
 					success(res) {
-						console.log(JSON.stringify(res))
+						// console.log(JSON.stringify(res))
 						that.ajaxData = res.data;
+							that.idArr = res.data
+							console.log('idarr:',that.idArr)
+						// if(res.data.length==1){
+						// 	that.detailId = res.data[0].id
+						// 	console.log('detailId:',that.detailId)
+						// }
 						var dataTab = [], //表格
 							analyis = [],
 							gzssdl = [],
@@ -846,6 +858,7 @@
 			},
 			dbfx() {
 				var that = this;
+				console.log('dbid:',that.tableId)
 				if (that.tableId.length == 2) {
 					that.dialogVisible = true;
 					this.AjaxDbfx();

src/views/Decision/Decision3.vue

@@ -135,6 +135,8 @@
 		data() {
 			let that = this;
 			return {
+				detailId:'', //详情id
+				idArr:[],
 				tableIdArr: [], //放checkbox的id数组
 				tableId: [],
 				checkLength: 0, //对标分析只能选择2个
@@ -744,6 +746,12 @@
 					},
 					success(res) {
 						that.ajaxData = res.data;
+						that.idArr = res.data
+						if(res.data.length==1){
+							that.detailId = res.data[0].id
+							console.log('detailId:',that.detailId)
+						}
+						// console.log('ajaxCommon:',res.data)
 						var analyis = [],
 							gzssdl = [],
 							jxssdl = [],
@@ -753,6 +761,7 @@
 
 						that.ajaxData.forEach((item, index) => {
 							that.tableIdArr.push(item.id);
+							// console.log('ajaxTable:',that.tableIdArr)
 							gzssdl.push({
 								text: item.name,
 								value: item.gzssdl
@@ -949,7 +958,11 @@
 			},
 			detailClick(data) {
 				var that = this;
+				// console.log('DetailData:',data)
 				var dataId = that.tableIdArr[data.index - 1];
+				console.log('dataIndex:',data.index)
+				console.log('that.tableIdArr:',that.tableIdArr)
+				console.log('dataId:',dataId)
 				that.clearDb();
 				that.detailShow = 2;
 				that.API.requestData({
@@ -957,13 +970,15 @@
 					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/details",
 					data: {
-						id: dataId,
+						// id: dataId,
+						id:that.idArr.length==1?that.detailId:dataId,
 						beginDate: that.value4,
 						endDate: that.value5,
 						target: '',
 						sort: ''
 					},
 					success(res) {
+						console.log('resDetail:',res)
 						var dataTab = [];
 						res.data.forEach((item, index) => {
 							that.tableIdArr.push(item.id);

src/views/Decision/Decision3Db.vue

@@ -193,11 +193,13 @@
 						wpid: val
 					},
 					success(res) {
+						console.log('resXiangmu:',res.data)
 						that.XiangMu = res.data;
 					}
 				});
 			},
 			XiangMuChange(val) {
+				console.log('XiangmuVal:',val)
 				var that = this;
 				that.value2 = val;
 				that.AjaxCommon();

src/views/HealthControl/Health2.vue

@@ -20,7 +20,8 @@
         </div> -->
       </div>
       <div class="info-chart">
-        <panel class="info-chart-panel" :title="'损失电量分析'">
+        <!-- <panel class="info-chart-panel" :title="'损失电量分析'"> -->
+           <panel class="info-chart-panel" :title="'健康趋势'">
           <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'250px'" />
         </panel>
       </div>

src/views/HealthControl/Health3.vue

@@ -20,7 +20,8 @@
         </div> -->
       </div>
       <div class="info-chart">
-        <panel class="info-chart-panel" :title="'损失电量分析'">
+        <!-- <panel class="info-chart-panel" :title="'损失电量分析'"> -->
+           <panel class="info-chart-panel" :title="'健康趋势'">
           <vertival-bar-line-chart :bardata="bardata" :lineData="lineData" :height="'250px'" />
         </panel>
       </div>
@@ -207,6 +208,7 @@ export default {
           wpId: that.wpId
         },
         success (res) {
+          console.log('resMap:',res)
           that.listBarData1= [
             { name: "未来 {c1|15分钟} 预测电量", value: res.data.ycdl15minute },
             { name: "未来 {c1|4小时} 预测电量", value: res.data.ycdl1hour },

src/views/Home/Home.vue

@@ -1057,22 +1057,26 @@ export default {
             {
               name: "当日预测电量",
               value: res.data.jczbmap.rycfdl,
-              total: res.data.jczbmap.rfdlsx,
+              // total: res.data.jczbmap.rfdlsx,
+              total: res.data.jczbmap.rycfdl >= res.data.jczbmap.rfdl ? res.data.jczbmap.rycfdl + 100 : res.data.jczbmap.rfdl + 100,
             },
             {
               name: "实际发电量",
               value: res.data.jczbmap.rfdl,
-              total: res.data.jczbmap.rfdlsx,
+              // total: res.data.jczbmap.rfdlsx,
+              total: res.data.jczbmap.rycfdl >= res.data.jczbmap.rfdl ? res.data.jczbmap.rycfdl + 100 : res.data.jczbmap.rfdl + 100,
             },
             {
               name: "当月预测电量",
               value: res.data.jczbmap.yycfdl,
-              total: res.data.jczbmap.yfdlsx,
+              // total: res.data.jczbmap.yfdlsx,
+              total: res.data.jczbmap.yycfdl >= res.data.jczbmap.yfdl ? res.data.jczbmap.yycfdl + 200 : res.data.jczbmap.yfdl + 200,
             },
             {
               name: "实际发电量",
               value: res.data.jczbmap.yfdl,
-              total: res.data.jczbmap.yfdlsx,
+              // total: res.data.jczbmap.yfdlsx,
+              total: res.data.jczbmap.yycfdl >= res.data.jczbmap.yfdl ? res.data.jczbmap.yycfdl + 200 : res.data.jczbmap.yfdl + 200,
             },
           ];
 

src/views/NewPages/area-line-chart.vue

@@ -0,0 +1,487 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "800px",
+    },
+    lineData: {
+      type: Array,
+      default: () => [
+        {
+          text: "日发电量",
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 3,
+            },
+            {
+              text: "6",
+              value: 3,
+            },
+            {
+              text: "7",
+              value: 3,
+            },
+            {
+              text: "8",
+              value: 3,
+            },
+            {
+              text: "9",
+              value: 3,
+            },
+            {
+              text: "10",
+              value: 3,
+            },
+            {
+              text: "11",
+              value: 3,
+            },
+            {
+              text: "12",
+              value: 3,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 3,
+            },
+            {
+              text: "15",
+              value: 3,
+            },
+            {
+              text: "16",
+              value: 3,
+            },
+          ],
+        },
+        {
+          text: "上网电量",
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 4,
+            },
+            {
+              text: "6",
+              value: 5,
+            },
+            {
+              text: "7",
+              value: 6,
+            },
+            {
+              text: "8",
+              value: 7,
+            },
+            {
+              text: "9",
+              value: 8,
+            },
+            {
+              text: "10",
+              value: 7,
+            },
+            {
+              text: "11",
+              value: 9,
+            },
+            {
+              text: "12",
+              value: 2,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 5,
+            },
+            {
+              text: "15",
+              value: 12,
+            },
+            {
+              text: "16",
+              value: 11,
+            },
+          ],
+        },
+      ],
+    },
+    areaData: {
+      type: Array,
+      default: () => [
+        {
+          name: "1",
+          start: 0,
+          end: 100,
+          state: "green",
+        },
+        {
+          name: "1",
+          start: 100,
+          end: 200,
+          state: "red",
+        },
+        {
+          name: "1",
+          start: 200,
+          end: 300,
+          state: "yellow",
+        },
+        {
+          name: "2",
+          start: 300,
+          end: 800,
+          state: "green",
+        },
+        {
+          name: "3",
+          start: 800,
+          end: 9000,
+          state: "green",
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      // default: () => ["健康趋势", "风机健康状态数量"],
+       default: () => ["(实时功率)", "(风速)"],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+    },
+  },
+  data () {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    legend () {
+      let data = [];
+      this.lineData.forEach((value, index) => {
+        data.push(value.text);
+      });
+      return data;
+    },
+    xAxisData () {
+      let data = [];
+      if (this.lineData.length > 0)
+        this.lineData[0].value.forEach((value, index) => {
+          data.push(value.text);
+        });
+      return data;
+    },
+    areaChartData () {
+      let data = [];
+      for (var i = 0; i < this.areaData.length; i++) {
+        let item = this.areaData[i];
+        var color = item.color || item.state;
+        data.push({
+          name: item.name,
+          value: [item.start, item.end, item.end - item.start],
+          itemStyle: {
+            normal: {
+              color: color,
+            },
+          },
+          exData: item,
+        });
+      }
+      return data;
+    },
+    areaMax () {
+      let max = 0;
+      this.areaData.forEach((value) => {
+        if (max < value.end) max = value.end;
+      });
+      return max;
+    },
+  },
+  methods: {
+    renderItem (params, api) {
+      var start = api.coord([api.value(0)]);
+      var end = api.coord([api.value(1)]);
+      var height = api.size([0, 1])[1];
+
+      var rectShape = echarts.graphic.clipRectByRect(
+        {
+          x: start[0],
+          y: start[1] - height / 2,
+          width: end[0] - start[0],
+          height: height,
+        },
+        {
+          x: params.coordSys.x,
+          y: params.coordSys.y,
+          width: params.coordSys.width,
+          height: params.coordSys.height,
+        }
+      );
+
+      return (
+        rectShape && {
+          type: "rect",
+          transition: ["shape"],
+          shape: rectShape,
+          style: api.style(),
+        }
+      );
+    },
+    initChart () {
+      console.log("units:",this.units)
+      console.log("areaData:",this.areaData)
+      let that = this;
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        grid: {
+          left: 40,
+          right: 40,
+          bottom: 40,
+          top: 32,
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+          },
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 120,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+             name: this.units[2],
+            axisLabel: {
+              
+              color: partten.getColor("gray"),
+            },
+            // axisLine: {
+            //   show: false,
+            // },
+               axisLine: {
+              type: "dashed",
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+              width: 5,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: this.xAxisData,
+          },
+          {
+            show: false,
+            min: 0,
+            max: this.areaMax,
+            axisLabel: {
+              show: false,
+              formatter: function (val) {
+                return Math.max(0, val - 0) + " ms";
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: this.units[0],
+            axisLabel: {
+              formatter: "{value} ",
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              type: "dashed",
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+              width: 5,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                dashOffset: 10,
+                color: partten.getColor("gray") + 80,
+              },
+            },
+          },
+          {
+            data: [this.areaData[0].name],
+            axisLabel: { show: false },
+          },
+        ],
+        series: [],
+      };
+
+      // line data
+      if (this.lineData.length > 0) {
+        this.lineData.forEach((value, index) => {
+          console.log('valueTEXT:',value)
+          option.series.push({
+            name: value.text,
+            type: "line",
+            data: value.value,
+            smooth: true, //平滑展示
+            yAxisIndex: 0,
+            // lineStyle: {
+            //   color: partten.getColor("green"),
+            // },
+            // itemStyle: {
+            //   color: partten.getColor("green"),
+            // },
+          });
+        });
+      }
+
+      // 区域
+      if (this.areaData && this.areaData.length > 0) {
+        option.series.push({
+          type: "custom",
+          renderItem: this.renderItem,
+          yAxisIndex: 1,
+          xAxisIndex: 1,
+          itemStyle: {
+            opacity: 0.2,
+          },
+          tooltip: {
+            show: false,
+            formatter: function (params) {
+              return params.marker + params.name + ": " + params.value[2] + "s";
+            },
+          },
+          encode: {
+            x: [1, 2],
+            y: 0,
+          },
+          data: this.areaChartData,
+        });
+      }
+
+      chart.setOption(option);
+
+      return chart;
+    },
+  },
+  emits: {
+    areaClick: null,
+  },
+  created () {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      let that = this;
+      let chart = this.initChart();
+      chart.on("click", function(e, p) {
+        if (e.seriesType == "custom") {
+          that.$emit("areaClick", { data: e.data.exData });
+        }
+      });
+    });
+  },
+  updated () {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/views/NewPages/dj1.vue

@@ -108,6 +108,14 @@
           @areaClick="areaBarChartClick"
           :showLegend="true"
         />
+        <!-- <multiple-bar-line-chart1
+          :height="'16.6667vh'"
+          :barData="powerChartData"
+          :lineData="powerChartLineData"
+          :units="['(kWh)']"
+          :showLegend="true"
+        /> -->
+        
       </panel>
       <panel :title="'电量'" class="mg-b-16">
         <multiple-bar-line-chart
@@ -718,6 +726,7 @@
 
 <script>
 import AreaLineChart from "../../components/chart/combination/area-line-chart.vue";
+// import MultipleBarLineChart1 from "./multiple-bar-line-chart.vue";
 import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
 import MarkerLineChart from "../../components/chart/line/multiple-line-chart.vue";
 import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
@@ -729,6 +738,7 @@ export default {
   components: {
     panel,
     AreaLineChart,
+    // MultipleBarLineChart1,
     MultipleBarLineChart,
     Table,
     MarkerLineChart,
@@ -1054,6 +1064,7 @@ export default {
           recorddate: that.recorddate,
         },
         success(res) {
+          console.log('resLostChart:',res)
           const keyArray = ["value1", "value2", "value3"];
 
           let lostChartData = [
@@ -1360,6 +1371,7 @@ export default {
           recorddate: that.recorddate,
         },
         success(res) {
+          console.log('windRes:',res)
           that.jfplStr = res.data.jfpl || "";
 
           let windResourcesData = {
@@ -1392,6 +1404,7 @@ export default {
         subUrl,
         data,
         success(res) {
+          console.log('resMGT:',res)
           that[dataKey.split("Data")[0] + "Str"] = res.data.jfpl || "";
 
           let mgtData = {
@@ -1638,6 +1651,7 @@ export default {
       display: flex;
 
       .legend {
+        white-space: nowrap;
         font-size: 12px;
         flex: 0 0 80px;
         height: 20px;

src/views/NewPages/multiple-bar-line-chart.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 传入数据
+    barData: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+      ],
+    },
+    lineData: {
+      type: Object,
+      default: () => {
+        return {
+          name: "风速",
+          unit: "km",
+          data: [200, 800, 400, 500, 800, 700, 800, 900, 200],
+        };
+      },
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(万KWh)", "(风速)"],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => [
+        "#05bb4c",
+        "#4b55ae",
+        "#fa8c16",
+        "#f8de5b",
+        "#1a93cf",
+        "#c531c7",
+        "#bd3338",
+      ],
+    },
+    showAnimation: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      firstAnimation: true,
+      newbarData: null,
+    };
+  },
+  watch: {
+    barData: {
+      handler(newValue, oldValue) {
+        this.newbarData = newValue;
+        this.initChart();
+      },
+      deep: true,
+    },
+    lineData : {
+      handler(newValue, oldValue) {
+        this.newlineData = newValue;
+        this.initChart();
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    legend() {
+      return this.newbarData.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      let result = [];
+      if (
+        this.newbarData &&
+        this.newbarData.length > 0 &&
+        this.newbarData[0].value.length > 0
+      ) {
+        result = this.newbarData[0].value.map((t) => {
+          return t.text;
+        });
+      }
+      return result;
+    },
+    ydata() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        let data = null;
+        if (index == 0) {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value} ",
+              fontSize: 12,
+            },
+            //分格线
+            splitLine: {
+              lineStyle: {
+                color: "#5a6162",
+                type: "dashed",
+              },
+            },
+          };
+        } else {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 12,
+            },
+            //分格线
+            splitLine: {
+              show: false,
+            },
+          };
+        }
+
+        result.push(data);
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+      if (this.newbarData && this.newbarData.length > 0) {
+        this.newbarData.forEach((value, index) => {
+          result.push({
+            name: value.title,
+            type: "bar",
+            barWidth: "10%",
+            animation: this.firstAnimation && this.showAnimation,
+            yAxisIndex: value.yAxisIndex,
+            data: value.value.map((t) => {
+              return t.value;
+            }),
+          });
+        });
+      }
+      return result;
+    },
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: 32,
+          left: 40,
+          right: this.ydata.length > 1 ? 40 : 14,
+          bottom: 24,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.xdata,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              fontSize: 12,
+            },
+          },
+        ],
+        yAxis: this.ydata,
+        series: this.series,
+      };
+
+      // line data
+      if (this.newlineData && this.newlineData.data.length > 0) {
+        option.yAxis.push({
+          type: "value",
+          name: this.newlineData.name,
+          axisLabel: {
+            formatter: "{value} ",
+            color: partten.getColor("gray"),
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dashed",
+              dashOffset: 10,
+              color: partten.getColor("gray") + 80,
+            },
+          },
+        });
+
+        option.series.push({
+          name: this.newlineData.name,
+          type: "line",
+          data: this.newlineData.data,
+          smooth: true, //平滑展示
+          yAxisIndex: option.yAxis.length - 1,
+          lineStyle: {
+            color: partten.getColor("yellow"),
+          },
+          itemStyle: {
+            color: partten.getColor("yellow"),
+          },
+        });
+      }
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+    this.newbarData = this.barData;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+      this.firstAnimation = false;
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/views/WindSite/pages/Home/Home.vue

@@ -7,7 +7,7 @@
       <div class="mg-b-16">
         <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
       </div>
-      <row>
+      <row v-if="paramsId.includes('FDC')">
         <wind-site-weather :time="nowTime" :data="tqmap" />
         <panel-3 class="wind-site-info">
           <row align="middle">
@@ -156,6 +156,156 @@
           </row>
         </panel-3>
       </row>
+       <row v-if="paramsId.includes('GDC')">
+        <wind-site-weather :time="nowTime" :data="tqmap" />
+        <panel-3 class="wind-site-info">
+          <row align="middle">
+            <div class="info-item">
+              <div class="value">{{ jczbmap.zjrl }}</div>
+              <div class="text">装机容量</div>
+            </div>
+            <div class="info-item">
+              <div class="value">{{ jczbmap.rfdl }}</div>
+              <div class="text">日发电量</div>
+            </div>
+            <div class="info-item">
+              <div class="value">{{ jczbmap.yfdl }}</div>
+              <div class="text">月发电量</div>
+            </div>
+            <div class="info-item">
+              <div class="value">{{ jczbmap.nfdl }}</div>
+              <div class="text">年发电量</div>
+            </div>
+            <div class="info-item">
+              <div class="value">{{ jczbmap.ylyxs }}</div>
+              <div class="text">月利用小时</div>
+            </div>
+            <div class="info-item">
+              <div class="value">{{ jczbmap.nlyxs }}</div>
+              <div class="text">年利用小时</div>
+            </div>
+            <div class="info-item">
+              <div class="value">{{ jczbmap.ssfs }}</div>
+              <!-- <div class="text">实时风速</div> -->
+              <div class="text">平均功率</div>
+            </div>
+            <div class="info-item">
+              <div class="value">{{ jczbmap.sjgl }}</div>
+              <div class="text">实时功率</div>
+            </div>
+          </row>
+        </panel-3>
+        <panel-3 class="wind-running-info">
+          <row align="middle">
+            <div class="fengji">
+              <div class="fengji-icon svg-icon svg-icon-white">
+                <svg-icon class="" svgid="svg-风机" />
+              </div>
+              <div class="info">
+                <div class="text green">接入光伏</div>
+                <div class="value">{{ jczbmap.jrts }}</div>
+              </div>
+            </div>
+            <div class="situation">
+              <row class="icon-status">
+                <div class="status">
+                  <span class="svg-icon svg-icon-green">
+                    <svg-icon svgid="svg-standby" />
+                  </span>
+                  <span class="text green"> 
+                    待机
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="svg-icon svg-icon-purple">
+                    <svg-icon svgid="svg-normal-power" />
+                  </span>
+                  <span class="text purple">
+                    运行
+                  </span>
+                </div>
+                <div class="status ">
+                  <span class="svg-icon svg-icon-pink">
+                    <svg-icon svgid="svg-limit-power" style="margin:3px 0.3704vh -3px 0;" />
+                  </span>
+                  <span class="text pink">
+                    限电
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="svg-icon svg-icon-red">
+                    <svg-icon svgid="svg-gz-downtime" />
+                  </span>
+                  <span class="text red">
+                    故障
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="svg-icon svg-icon-orange">
+                    <svg-icon svgid="svg-jx-downtime" />
+                  </span>
+                  <span class="text orange">
+                    检修
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="svg-icon svg-icon-gray">
+                    <svg-icon svgid="svg-offline" />
+                  </span>
+                  <span class="text gray">
+                    离线
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="svg-icon svg-icon-white">
+                    <svg-icon svgid="svg-intranet-involvement" />
+                  </span>
+                  <span class="text white">
+                    受累
+                  </span>
+                </div>
+              </row>
+              <row>
+                <div class="status">
+                  <span class="value">
+                    {{ jczbmap.djnum }}
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="value">
+                    {{ jczbmap.zcfdnum }}
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="value">
+                    {{ jczbmap.xdjclnum }}
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="value">
+                    {{ jczbmap.gztjnum }}
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="value">
+                    {{ jczbmap.jxtjnum }}
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="value">
+                    {{ jczbmap.dwslnum }}
+                  </span>
+                </div>
+                <div class="status">
+                  <span class="value">
+                    {{ jczbmap.lxnum }}
+                  </span>
+                </div>
+              </row>
+            </div>
+          </row>
+        </panel-3>
+      </row>
       <div class="first-info mg-t-16 mg-b-16">
         <div style="flex:0 1 450px;">
           <panel title="场站">
@@ -163,10 +313,14 @@
           </panel>
         </div>
         <div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
-          <panel title="4小时功率曲线图">
+          <panel title="4小时功率曲线图" v-if="paramsId.includes('FDC')">
             <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units"
               :showLegend="true" />
           </panel>
+           <panel title="4小时功率曲线图" v-if="paramsId.includes('GDC')">
+            <multiple-line-chart height="18.519vh" v-if="Powertrend1" :list="Powertrend1.value" :units="Powertrend1.units"
+              :showLegend="true" />
+          </panel>
         </div>
         <div class="mg-l-16" style="flex:0 0 400px;">
           <panel class="light-matrix-panel">
@@ -228,7 +382,6 @@ import Panel3 from "../../../../components/coms/panel/panel3.vue";
 import LightMatrix from "./light-matrix.vue";
 import Station from "./Station.vue";
 import WindSiteWeather from "./wind-site-weather.vue";
-
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 
 export default {
@@ -241,6 +394,8 @@ export default {
     return {
       timmer: null, // 计时器
       timmer2: null,
+      paramsId:"",
+      resCode:"",
       nowTime: "", // 时间
       fjmap: [], // 分机矩阵
       tqmap: {}, // 天气数据
@@ -290,7 +445,7 @@ export default {
         units: ["", ""],
       },
 
-      // 4小时功率曲线图
+      // 4小时功率曲线图(风电场)
       Powertrend: {
         value: [
           {
@@ -299,6 +454,15 @@ export default {
           },
         ],
       },
+      // 4小时功率曲线图(光电场)
+      Powertrend1: {
+        value: [
+          {
+            title: "",
+            value: [],
+          },
+        ],
+      },
 
       // 月发电量对比
       MonthCompare: {
@@ -381,9 +545,12 @@ export default {
     },
 
     select (res) {
+      let that = this;
       this.$router.replace({
         path: `/monitor/windsite/home/${res.code}`,
       });
+      that.resCode = res.code;
+      console.log('resCode:',res)
     },
     // 根据风机状态码返回对应 class
     getColor (fjzt) {
@@ -422,7 +589,10 @@ export default {
         },
         success (res) {
           if (res.data) {
+            console.log('resWpinfo:',res.data)
             that.tqmap = res.data.tqmap;
+            that.tqmap.name = res.data.jczbmap.name
+            that.tqmap.resCode = that.resCode
             let fjmap = [];
             let keys = ["value1", "value2", "value3", "value4", "value5", "value6", "value7", "value9"];
             let Powertrend = {
@@ -471,6 +641,52 @@ export default {
                 },
               ],
             };
+             let Powertrend1 = {
+              // 图表所用单位
+              units: ["(万KWh)", "(风速)"],
+              value: [
+                {
+                  title: "应发功率",
+                  smooth: true, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "实发功率",
+                  smooth: true, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "理论功率",
+                  smooth: true, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "预测功率",
+                  smooth: true, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "保证功率",
+                  smooth: true, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "平均功率",
+                  smooth: true, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "小时预测功率",
+                  smooth: true, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "最有功率律",
+                  smooth: true, // 使用单位
+                  value: [],
+                },
+              ],
+            };
 
             let dayPieChartKey = [
               {
@@ -519,6 +735,10 @@ export default {
                   text: new Date(ele.time).formatDate("hh:mm"),
                   value: ele[key],
                 });
+                    Powertrend1.value[keyIndex].value.push({
+                  text: new Date(ele.time).formatDate("hh:mm"),
+                  value: ele[key],
+                });
               });
             });
 
@@ -544,6 +764,7 @@ export default {
 
             that.fjmap = fjmap;
             that.Powertrend = Powertrend;
+            that.Powertrend1 = Powertrend1;
             that.jczbmap = res.data.jczbmap;
             that.pieChartData = {
               dayData,
@@ -553,6 +774,7 @@ export default {
           } else {
             that.fjmap = [];
             that.Powertrend = {};
+            that.Powertrend1 = {};
             that.jczbmap = {};
             that.pieChartData = {
               dayData: [],
@@ -671,6 +893,7 @@ export default {
   created () {
     let that = this;
     that.wpId = that.$route.params.wpId;
+    that.paramsId = that.$route.params.wpId;
     that.$nextTick(() => {
       that.getWp();
       that.requestData(false);

src/views/WindSite/pages/Home/wind-site-weather.vue

@@ -1,7 +1,9 @@
 // 天气分析
 <template>
   <div class="wind-site-weather">
-    <div class="title">风场 {{ nowTime }} 实况</div>
+    <!-- <div class="title">风场 {{ nowTime }} 实况</div> -->
+        <div class="title" v-if="paramsId.includes('FDC')">风场 {{ nowTime }} 实况</div>
+        <div class="title" v-else-if="paramsId.includes('GDC')">光电场 {{ nowTime }} 实况</div>
     <div class="weather">
       <div class="weather-info">
         <span class="svg-icon">
@@ -60,12 +62,13 @@
 </template>
 
 <script>
+import Home from "./Home.vue"
 import Col from "@/components/coms/grid/col.vue";
 import Row from "@/components/coms/grid/row.vue";
 import SvgIcon from "@/components/coms/icon/svg-icon.vue";
 
 export default {
-  components: { Row, Col, SvgIcon },
+  components: { Home,Row, Col, SvgIcon },
   props:{
     time: String,
     data:{
@@ -75,6 +78,7 @@ export default {
   },
   data() {
     return {
+      // paramsId:"",
       sourceMap: {},
       nowTime: "",
       weather: "阴", // 气象法
@@ -88,14 +92,20 @@ export default {
       sunset: "18:50", // 日落
     };
   },
-  created(){},
+  created(){
+    let that = this;
+    that.paramsId = that.$route.params.wpId
+    console.log("paramsId:",that.$route.params.wpId)
+  },
   mounted(){
     this.sourceMap=this.data;
+   
   },
 
   watch:{
     data(res){
       this.sourceMap=res;
+       console.log('map:',this.sourceMap)
     },
     time(value){
       this.nowTime = value

src/views/performanceAnalysis/index.vue

@@ -26,7 +26,7 @@
     <div class="df-table">
       <ComTable height="78vh" :data="tableData"></ComTable>
     </div>
-    <el-dialog title="切入切出风速整合历史" v-model="dialogShow" width="85%" top="10vh" custom-class="modal"
+    <el-dialog title="单机历史性能分析" v-model="dialogShow" width="85%" top="10vh" custom-class="modal"
       :close-on-click-modal="true" @closed="dialogType = ''">
       <div class="query mg-b-8">
         <div class="query-items">

src/views/sisView/index.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="sisViewBox">
+    <div class="viewItem">
+      <clock :width="330" :height="300" />
+      <div class="viewTitle">综<br /><br />合<br /><br />参<br /><br />数</div>
+      <div class="contentBox">
+        <div class="contentItem">
+          <div class="itemName">装机容量</div>
+          <div class="itemNum">123</div>
+          <div class="itemUnit">MW</div>
+          <div class="itemName">安全天数</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">天</div>
+          <div class="itemName">总功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">日发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">年利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时</div>
+          <div class="itemName">年发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">上网电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">月利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时</div>
+          <div class="itemName">月发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">复位及时率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName">年计划电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">完成率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">转换及时率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName">月计划电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">完成率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">消缺及时率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName noPd">综合厂用电率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName">月M&nbsp;T&nbsp;B&nbsp;F</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">风能利用率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName noPd">设备可利用率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName">月可靠性</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+        </div>
+      </div>
+    </div>
+    <div class="viewItem">
+      <div class="viewTitle">风<br /><br />电<br /><br />参<br /><br />数</div>
+      <div class="contentBox">
+        <div class="contentItem">
+          <div class="itemName">装机容量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+          <div class="itemName">实时风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">月发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">年发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">日发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">实时功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+          <div class="itemName">利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时(月)</div>
+          <div class="itemName">利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时(年)</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">上网电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">总欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">牛发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">牛欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">牛风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">牛功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">麻发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">麻欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">麻风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">麻功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">青发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">青欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">青风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">青功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">石发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">石欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">石风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">石功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">香发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">香欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">香风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">香功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+      </div>
+    </div>
+    <div class="viewItem">
+      <div class="viewTitle">光<br /><br />伏<br /><br />参<br /><br />数</div>
+      <div class="contentBox">
+        <div class="contentItem">
+          <div class="itemName">装机容量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+          <div class="itemName">日照强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">实时功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">日发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">月发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">年发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">上网电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时(月)</div>
+           <div class="itemName">利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时(年)</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">武发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">武日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">武功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">平发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">平日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">平功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">宣发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">宣日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">宣功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">马发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">马日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">马功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">海发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">海日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">海功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import $ from "jquery";
+import clock from "@com/other/clock/index.vue";
+export default {
+  // 名称
+  name: "sisView",
+
+  // 使用组件
+  components: {
+    clock,
+  },
+
+  // 数据
+  data() {
+    return {};
+  },
+
+  // 函数
+  methods: {
+    resetViewTitleHeight() {
+      let viewTitle = $(".viewTitle");
+      for (let i = 0; i < viewTitle.length; i++) {
+        viewTitle
+          .eq(i)
+          .css("height", viewTitle.eq(i).parent(".viewItem").css("height"));
+      }
+    },
+  },
+
+  created() {},
+
+  mounted() {
+    this.resetViewTitleHeight();
+  },
+
+  unmounted() {},
+};
+</script>
+
+<style lang="less" scoped>
+.sisViewBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: start;
+  align-items: flex-start;
+  flex-direction: column;
+
+  .viewItem {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    margin: 10px 0;
+
+    &:first-child {
+      margin: 0 0 10px 0;
+    }
+
+    .viewTitle {
+      font-family: Arial, Helvetica, sans-serif;
+      width: 30px;
+      padding: 10px 40px;
+      font-size: 30px;
+      font-weight: 700;
+      color: #ff0;
+      text-decoration: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+      background-color: rgb(0, 52, 102);
+      margin-right: 10px;
+    }
+
+    .contentBox {
+      display: flex;
+      justify-content: start;
+      align-items: flex-start;
+      flex-direction: column;
+      font-family: Georgia, "Times New Roman", Times, serif;
+      font-size: 30px;
+
+      .contentItem {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        padding: 2px 0;
+
+        .itemName {
+          width: 220px;
+          padding: 0 10px;
+          text-align: justify;
+          text-align-last: justify;
+
+          &.noPd {
+            width: 220px;
+            padding: 0 0 0 10px;
+          }
+        }
+
+        .itemNum {
+          font-family: Arial, Helvetica, sans-serif;
+          color: #f25656;
+          width: 110px;
+          text-align: center;
+        }
+
+        .itemUnit {
+          font-family: Arial, Helvetica, sans-serif;
+          font-size: 18px;
+          color: #0f0;
+          width: 110px;
+          text-align: left;
+          height: 100%;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/specific/fnlyl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司可利用率分析" :showLine="false">
+        <!-- <panel title="公司可利用率分析" :showLine="false"> -->
+            <panel title="风能利用率分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/fwjsl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司复位及时率分析" :showLine="false">
+        <!-- <panel title="公司复位及时率分析" :showLine="false"> -->
+          <panel title="复位及时率分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/gzssl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司故障损失率分析" :showLine="false">
+        <!-- <panel title="公司故障损失率分析" :showLine="false"> -->
+            <panel title="故障损失率分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/mtbf.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司MTBF分析" :showLine="false">
+        <!-- <panel title="公司MTBF分析" :showLine="false"> -->
+             <panel title="MTBF分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/mttr.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司MTTR分析" :showLine="false">
+        <!-- <panel title="公司MTTR分析" :showLine="false"> -->
+           <panel title="MTTR分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/slssl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司受累损失率分析" :showLine="false">
+        <!-- <panel title="公司受累损失率分析" :showLine="false"> -->
+           <panel title="受累损失率分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/whssl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司维护损失率分析" :showLine="false">
+        <!-- <panel title="公司维护损失率分析" :showLine="false"> -->
+          <panel title="维护损失率分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/xdssl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司限电损失率分析" :showLine="false">
+        <!-- <panel title="公司限电损失率分析" :showLine="false"> -->
+           <panel title="限电损失率分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/xnssl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司性能损失率分析" :showLine="false">
+        <!-- <panel title="公司性能损失率分析" :showLine="false"> -->
+           <panel title="性能损失率分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/xqjsl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司消缺及时率分析" :showLine="false">
+        <!-- <panel title="公司消缺及时率分析" :showLine="false"> -->
+           <panel title="消缺及时率分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/zhcydl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司综合场用电量分析" :showLine="false">
+        <!-- <panel title="公司综合场用电量分析" :showLine="false"> -->
+           <panel title="综合场用电量分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/specific/ztfx.vue

@@ -1679,6 +1679,7 @@ export default {
             month: months
           },
           success(res) {
+            console.log('resSecord:',res)
             let currentMonth = {}
             let currentYear = {}
             res.data['当月'].map(item => {
@@ -1741,6 +1742,7 @@ export default {
             month: months
           },
           success(res) {
+            console.log('resMonth:',res)
             res.data.map(item => {
               for (let key in item) {
                 if(_this.isNumber(item[key]) && item.type !== '比较') {

src/views/specific/ztzhl.vue

@@ -191,7 +191,8 @@
     </el-row>
     <el-row :gutter="20" class="table-panel">
       <el-col :span="24">
-        <panel title="公司状态转换率分析" :showLine="false">
+        <!-- <panel title="公司状态转换率分析" :showLine="false"> -->
+             <panel title="状态转换率分析" :showLine="false">
           <!-- <vertival-bar-line-chart
             :height="'360px'"
             :units="units"

src/views/warningRank/index.vue

@@ -130,6 +130,7 @@ export default {
             orderByColumn:"",
           },
           success(res) {
+            console.log('res:',res)
             let chartData = [];
 
             res.data.forEach((ele, index) => {