驾驶舱模块上传

src/assets/icon/svg/风机.svg

@@ -23,6 +23,6 @@
 		c-0.615,0.271-1.052,0.836-1.158,1.5c-0.886,5.22-3.695,9.918-7.875,13.166c-0.533,0.42-0.823,1.074-0.775,1.75
 		c0.05,0.668,0.45,1.275,1.041,1.634c26.25,14.267,57.268,29.524,66.15,29.75c0.967-0.024,2.283-0.158,3.233-1.476
 		c0.267-0.469,0.407-1,0.408-1.541C182.537,133.341,174.862,127.999,163.604,119.332L163.604,119.332z" />
-		<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="0 99 90" to="360 99 90" repeatCount="indefinite" />
+		<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur=".5s" type="rotate" from="0 99 90" to="360 99 90" repeatCount="indefinite" />
 	</g>
 </svg>

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

@@ -395,7 +395,9 @@ export default {
     },
   },
   created() {
-    this.id = "pie-chart-" + util.newGUID();
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
   },
   mounted() {
     this.$nextTick(() => {
@@ -405,7 +407,9 @@ export default {
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
   unmounted() {
     window.removeEventListener("resize", this.resize);

src/views/Home/Home.vue

@@ -19,7 +19,7 @@
       <Row type="flex">
         <Col :span="24">
         <com-panel title="功率复核" sub-title="（单位：万KW）">
-          <power-review :data="powerData" />
+          <power-review :data="powerData" :id="wpId" @chartClick="showPowerChart" />
         </com-panel>
         </Col>
       </Row>
@@ -38,7 +38,7 @@
         <Row type="flex">
           <Col :span="24">
             <com-panel title="计划电量完成情况" sub-title="（单位：万KWh）">
-              <power-plan :data="planData" :showSingle="powerplanShowSingle" />
+              <power-plan :data="planData" :showSingle="powerplanShowSingle" :id="wpId" @chartClick="showDownChart" />
             </com-panel>
           </Col>
         </Row>
@@ -116,17 +116,17 @@
               <td class="value green">{{jczbmap.zjts}}</td>
               <td class="unit gray">台</td>
             </tr>
-            <tr class="" @click="openDialog('日发电量详情', 'genreset/findDayInfo', 'rfdl')">
+            <tr class="" @click="openDialog('日发电量详情', 'genreset/findDayInfo', 'rfdl', 'table')">
               <td class="text gray">日发电量</td>
               <td class="value green">{{jczbmap.rfdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('月发电量详情', 'genreset/findMonthInfo', 'yfdl')">
+            <tr class="" @click="openDialog('月发电量详情', 'genreset/findMonthInfo', 'yfdl', 'table')">
               <td class="text gray">月发电量</td>
               <td class="value green">{{jczbmap.yfdl}}</td>
               <td class="unit gray gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('年发电量详情', 'genreset/findYearInfo', 'nfdl')">
+            <tr class="" @click="openDialog('年发电量详情', 'genreset/findYearInfo', 'nfdl', 'table')">
               <td class="text gray">年发电量</td>
               <td class="value green">{{jczbmap.nfdl}}</td>
               <td class="unit gray">万kwh</td>
@@ -178,27 +178,27 @@
         <Col>
         <com-panel>
           <table class="table-card">
-            <tr class="" @click="openDialog('日性能损失详情', 'genreset/findDayInfo', 'rxnssdl')">
+            <tr class="" @click="openDialog('日性能损失详情', 'genreset/findDayInfo', 'rxnssdl', 'table')">
               <td class="text gray">日性能损失</td>
               <td class="value green">{{wxssmap.rqfssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('日故障损失详情', 'genreset/findDayInfo', 'rgzssdl')">
+            <tr class="" @click="openDialog('日故障损失详情', 'genreset/findDayInfo', 'rgzssdl', 'table')">
               <td class="text gray">日故障损失</td>
               <td class="value green">{{wxssmap.rgzssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('日检修损失详情', 'genreset/findDayInfo', 'rjxssdl')">
+            <tr class="" @click="openDialog('日检修损失详情', 'genreset/findDayInfo', 'rjxssdl', 'table')">
               <td class="text gray">日检修损失</td>
               <td class="value green">{{wxssmap.rjxssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('日限电损失详情', 'genreset/findDayInfo', 'rxdssdl')">
+            <tr class="" @click="openDialog('日限电损失详情', 'genreset/findDayInfo', 'rxdssdl', 'table')">
               <td class="text gray">日限电损失</td>
               <td class="value green">{{wxssmap.rxdssdl}}</td>
               <td class="unit gray gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('日受累损失详情', 'genreset/findDayInfo', 'rslssdl')">
+            <tr class="" @click="openDialog('日受累损失详情', 'genreset/findDayInfo', 'rslssdl', 'table')">
               <td class="text gray">日受累损失</td>
               <td class="value green">{{wxssmap.rslssdl}}</td>
               <td class="unit gray">万kwh</td>
@@ -214,27 +214,27 @@
         <Col>
         <com-panel>
           <table class="table-card">
-            <tr class="" @click="openDialog('月性能损失详情', 'genreset/findMonthInfo', 'yxnssdl')">
+            <tr class="" @click="openDialog('月性能损失详情', 'genreset/findMonthInfo', 'yxnssdl', 'table')">
               <td class="text gray">月性能损失</td>
               <td class="value green">{{wxssmap.yqfssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('月故障损失详情', 'genreset/findMonthInfo', 'ygzssdl')">
+            <tr class="" @click="openDialog('月故障损失详情', 'genreset/findMonthInfo', 'ygzssdl', 'table')">
               <td class="text gray">月故障损失</td>
               <td class="value green">{{wxssmap.ygzssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('月检修损失详情', 'genreset/findMonthInfo', 'yjxssdl')">
+            <tr class="" @click="openDialog('月检修损失详情', 'genreset/findMonthInfo', 'yjxssdl', 'table')">
               <td class="text gray">月检修损失</td>
               <td class="value green">{{wxssmap.yjxssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('月限电损失详情', 'genreset/findMonthInfo', 'yxdssdl')">
+            <tr class="" @click="openDialog('月限电损失详情', 'genreset/findMonthInfo', 'yxdssdl', 'table')">
               <td class="text gray">月限电损失</td>
               <td class="value green">{{wxssmap.yxdssdl}}</td>
               <td class="unit gray gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('月受累损失详情', 'genreset/findMonthInfo', 'yslssdl')">
+            <tr class="" @click="openDialog('月受累损失详情', 'genreset/findMonthInfo', 'yslssdl', 'table')">
               <td class="text gray">月受累损失</td>
               <td class="value green">{{wxssmap.yslssdl}}</td>
               <td class="unit gray">万kwh</td>
@@ -250,27 +250,27 @@
         <Col>
         <com-panel>
           <table class="table-card">
-            <tr class="" @click="openDialog('年性能损失详情', 'genreset/findYearInfo', 'nxnssdl')">
+            <tr class="" @click="openDialog('年性能损失详情', 'genreset/findYearInfo', 'nxnssdl', 'table')">
               <td class="text gray">年性能损失</td>
               <td class="value green">{{wxssmap.nqfssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('年故障损失详情', 'genreset/findYearInfo', 'ngzssdl')">
+            <tr class="" @click="openDialog('年故障损失详情', 'genreset/findYearInfo', 'ngzssdl', 'table')">
               <td class="text gray">年故障损失</td>
               <td class="value green">{{wxssmap.ngzssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('年检修损失详情', 'genreset/findYearInfo', 'njxssdl')">
+            <tr class="" @click="openDialog('年检修损失详情', 'genreset/findYearInfo', 'njxssdl', 'table')">
               <td class="text gray">年检修损失</td>
               <td class="value green">{{wxssmap.njxssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('年限电损失详情', 'genreset/findYearInfo', 'nxdssdl')">
+            <tr class="" @click="openDialog('年限电损失详情', 'genreset/findYearInfo', 'nxdssdl', 'table')">
               <td class="text gray">年限电损失</td>
               <td class="value green">{{wxssmap.nxdssdl}}</td>
               <td class="unit gray gray">万kwh</td>
             </tr>
-            <tr class="" @click="openDialog('年受累损失详情', 'genreset/findYearInfo', 'nslssdl')">
+            <tr class="" @click="openDialog('年受累损失详情', 'genreset/findYearInfo', 'nslssdl', 'table')">
               <td class="text gray">年受累损失</td>
               <td class="value green">{{wxssmap.nslssdl}}</td>
               <td class="unit gray">万kwh</td>
@@ -418,8 +418,10 @@
       </panel-3>
       </Col>
     </Row>
-    <el-dialog :title="dialogTitle" v-model="dialogShow" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="true">
-      <Table :data="dialogData" />
+    <el-dialog :title="dialogTitle" v-model="dialogShow" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="dialogType = ''">
+      <Table :data="dialogData" v-if="dialogType === 'table'" />
+      <MultipleLineChart height="500px" :units="powerLineChartData.units" :list="powerLineChartData.value" :showLegend="true" v-if="dialogType === 'powerLineChart'" />
+      <multiple-bar-chart height="500px" :list="doneLineChartData.value" :units="doneLineChartData.units" v-if="dialogType === 'doneLineChart'" />
     </el-dialog>
   </div>
 </template>
@@ -473,6 +475,29 @@ export default {
       mxztmap: {},
       planData: {},
       powerData: {},
+      powerLineChartData: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+      doneLineChartData: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+      dialogType: null,
       wpId: "0",
       fcmap:{},
       dialogShow: false,
@@ -520,7 +545,6 @@ export default {
           id: that.wpId,
         },
         success (res) {
-          // console.log(123123,res);
           let glvos = [];
 
           let rdlKey = ["value1", "value2", "value3"];
@@ -593,16 +617,32 @@ export default {
 
           that.powerData = [{
             title: "风速",
-            value: res.data.jczbmap.ssfs
+            value: res.data.jczbmap.ssfs,
+            dialogTitle: "风速详情",
+            subUrl: "genreset/findGLDetail",
+            targetName: "ssfs",
+            dialogType: "powerLineChart"
           }, {
             title: "保证功率",
-            value: res.data.jczbmap.bzgl
+            value: res.data.jczbmap.bzgl,
+            dialogTitle: "保证功率详情",
+            subUrl: "genreset/findGLDetail",
+            targetName: "bzgl",
+            dialogType: "powerLineChart"
           }, {
             title: "应发功率",
-            value: res.data.jczbmap.yfgl
+            value: res.data.jczbmap.yfgl,
+            dialogTitle: "应发功率详情",
+            subUrl: "genreset/findGLDetail",
+            targetName: "yfgl",
+            dialogType: "powerLineChart"
           }, {
             title: "实际功率",
-            value: res.data.jczbmap.sjgl
+            value: res.data.jczbmap.sjgl,
+            dialogTitle: "实际功率详情",
+            subUrl: "genreset/findGLDetail",
+            targetName: "sjgl",
+            dialogType: "powerLineChart"
           }];
 
           that.DayPower = DayPower;
@@ -655,7 +695,7 @@ export default {
     },
 
     // 打开弹窗
-    openDialog(dialogTitle, subUrl, targetName){
+    openDialog(dialogTitle, subUrl, targetName, dialogType){
       this.dialogTitle = dialogTitle;
       let that = this;
       that.API.requestData({
@@ -666,12 +706,51 @@ export default {
           targetName
         },
         success (res) {
-          that.dialogData = res.data;
           that.dialogShow = true;
+          that.dialogType = dialogType;
         }
       });
     },
 
+    // 显示功率复核图表
+    showPowerChart(res){
+      this.dialogTitle = res.dialogTitle;
+      this.dialogType = res.dialogType;
+
+      let powerLineChartData = {
+        // 图表所用单位
+        units: [""],
+        value: [],
+      };
+
+      res.data.forEach((pEle,pIndex)=>{
+        powerLineChartData.value.push({
+          title: pEle[0].name,
+          yAxisIndex: 0,
+          value: [],
+        });
+
+        pEle.forEach(cEle=>{
+          powerLineChartData.value[pIndex].value.push({
+            text: new Date(cEle.time).formatDate("hh:mm:ss"),
+            value: cEle.value1
+          });
+        });
+      });
+
+      this.powerLineChartData = powerLineChartData;
+      this.dialogShow = true;
+    },
+
+    // 显示计划电量完成情况图表
+    showDownChart(res){
+      this.dialogTitle = res.dialogTitle;
+      this.dialogType = res.dialogType;
+
+      this.doneLineChartData = res.data;
+      this.dialogShow = true;
+    },
+
     // 地图进入事件
     onEnter() {
       this.powerplanShowSingle = true;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="power-plan">
     <tab @select="selectionItemClick" :data="currTabs" class="power-plan-tab" />
-    <row>
+    <row @click="openDialog('计划电量完成详情', 'genreset/findProjectPlanPower', 'doneLineChart')">
       <Col :span="12">
         <percent-card-2 :title="'月完成率' + parseInt((planData.yfdl / planData.yfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" />
       </Col>
@@ -22,6 +22,7 @@ export default {
   data () {
     return {
       planData: {},
+      wpId: "",
       // tab项
       tabs: [
         {
@@ -49,6 +50,10 @@ export default {
     data: {
       type: Object,
       default: () => { }
+    },
+    id:{
+      type: String,
+      default: ""
     }
   },
   computed: {
@@ -65,6 +70,7 @@ export default {
   },
   mounted() {
     this.planData = this.data;
+    this.wpId = this.id;
   },
   methods: {
     selectionItemClick (item) {
@@ -79,11 +85,66 @@ export default {
         actual: 45,
       };
     },
+
+    openDialog(dialogTitle, subUrl, dialogType){
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl,
+        data: {
+          id:that.wpId
+        },
+        success (res) {
+          
+          let key = [{
+            key:"value1",
+            title:"月计划发电量"
+          }, {
+            key:"value2",
+            title:"年计划发电量"
+          }, {
+            key:"value3",
+            title:"月发电量"
+          }, {
+            key:"value4",
+            title:"年发电量"
+          }];
+
+          let doneLineChartData = {
+            // 图表所用单位
+            units: [""],
+            value: [],
+          };
+
+          key.forEach((keyEle, keyIndex)=>{
+
+            doneLineChartData.value.push({
+              title: keyEle.title,
+              yAxisIndex: 0, // 使用单位
+              value: []
+            });
+
+            res.data.forEach(ele => {
+              doneLineChartData.value[keyIndex].value.push({
+                text: ele.name,
+                value: ele[keyEle.key]
+              });
+            });
+          });
+
+          that.$emit("chartClick", { dialogTitle, dialogType, data: doneLineChartData });
+
+        }
+      });
+    },
   },
 
   watch: {
     data (res) {
       this.planData = res;
+    },
+    id(res){
+      this.wpId = res;
     }
   }
 };

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

@@ -3,7 +3,7 @@
     <Row type="flex" justify="center" :align="'middle'">
       <!-- 功率复核 PowerLoad -->
       <Col v-for="item in PowerLoad" :key="item" :span="6">
-        <dash-pie-chart :title="item.title" :value="item.value" height="9.722vh" />
+        <dash-pie-chart :title="item.title" :value="item.value" height="9.722vh" @click="openDialog(item.dialogTitle, item.subUrl, item.targetName, item.dialogType)" />
       </Col>
     </Row>
   </div>
@@ -25,6 +25,7 @@ export default {
     return {
       // 功率复核数据
       PowerLoad: [],
+      wpId:""
     };
   },
 
@@ -32,16 +33,41 @@ export default {
     data: {
       type: Array,
       default: () => []
+    },
+    id:{
+      type:String,
+      defaylt:""
     }
   },
 
   mounted () {
     this.PowerLoad = this.data;
+    this.wpId = this.id;
+  },
+
+  methods:{
+    openDialog(dialogTitle, subUrl, targetName, dialogType){
+      let that = this;
+      that.API.requestData({
+          method: "POST",
+          subUrl,
+          data: {
+            id:that.wpId,
+            targetName
+          },
+          success (res) {
+            that.$emit("chartClick", { dialogTitle, dialogType, data: res.data });
+          }
+        });
+    }
   },
 
   watch: {
     data (res) {
       this.PowerLoad = res;
+    },
+    id(){
+      this.wpId = res;
     }
   }
 };