Merge branch 'zjw'

imt-ui/src/views/system/data/monitordatadashboard/index.vue

@@ -44,34 +44,53 @@
         </div>
       </div>
     </div>
-    <div
+    <div class="select">
-      class="block"
+      <div class="block">
-      style="text-align:right;"
+        <el-cascader
-    >
+          v-model="paramsData"
-      <el-date-picker
+          :options="options"
-        v-model="datetimeRange"
+          :props="props"
-        type="datetimerange"
+          collapse-tags
-        range-separator="至"
+          @visible-change="paramsSelectChange"
-        start-placeholder="开始日期"
+          placeholder="请选择参数"
-        end-placeholder="结束日期"
+        ></el-cascader>
-        align="right"
+      </div>
-        style="margin-right:10px"
+      <div
+        class="block"
+        style="text-align:right;"
       >
-      </el-date-picker>
+        <el-date-picker
-      <el-button
+          v-model="datetimeRange"
-        type="primary"
+          type="datetimerange"
-        icon="el-icon-search"
+          range-separator="至"
-        size="mini"
+          start-placeholder="开始日期"
-        @click="handleAlarmDataQuery"
+          end-placeholder="结束日期"
-      >查 询</el-button>
+          align="right"
-      <el-button
+          style="margin-right:10px"
-        icon="el-icon-refresh"
+        >
-        size="mini"
+        </el-date-picker>
-        @click="resetAlarmDataQuery"
+        <el-button
-      >重 置</el-button>
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleAlarmDataQuery"
+        >查 询</el-button>
+        <el-button
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetAlarmDataQuery"
+        >重 置</el-button>
+      </div>
     </div>
+    <el-empty
+      v-if="!this.selectCardNames || this.selectCardNames.length == 0"
+      description="暂无数据，请先选择参数来查看监控数据"
+    ></el-empty>
     <div class="chart-1">
-      <el-card class="box-card">
+      <el-card
+        v-show="this.selectCardNames.includes('gateway_current_data')"
+        class="box-card"
+      >
         <div
           slot="header"
           class="chart-title"
@@ -84,11 +103,14 @@
           <div
             v-loading="loading1"
             ref="chart1"
-            style="height:500px"
+            style="height:500px;width:100%"
           ></div>
         </div>
       </el-card>
-      <el-card class="box-card">
+      <el-card
+        v-show="this.selectCardNames.includes('gateway_hy_data')"
+        class="box-card"
+      >
         <div
           slot="header"
           class="chart-title"
@@ -105,10 +127,53 @@
           ></div>
         </div>
       </el-card>
+      <el-card
+        v-show="this.selectCardNames.includes('gateway_aclr_data')"
+        class="box-card"
+      >
+        <div
+          slot="header"
+          class="chart-title"
+        >
+          <div class="equ-info">
+            <span class="chart-name">机床RMS趋势图</span>
+          </div>
+        </div>
+        <div class="content">
+          <div
+            v-loading="loading4"
+            ref="chart4"
+            style="height:500px"
+          ></div>
+        </div>
+      </el-card>
+      <el-card
+        v-show="this.selectCardNames.includes('gateway_aclr_data')"
+        class="box-card"
+      >
+        <div
+          slot="header"
+          class="chart-title"
+        >
+          <div class="equ-info">
+            <span class="chart-name">机床峰值趋势图</span>
+          </div>
+        </div>
+        <div class="content">
+          <div
+            v-loading="loading5"
+            ref="chart5"
+            style="height:500px"
+          ></div>
+        </div>
+      </el-card>
     </div>
 
     <div class="chart-2">
-      <el-card class="box-card">
+      <el-card
+        v-show="this.selectCardNames.includes('gateway_temp_data')"
+        class="box-card"
+      >
         <div
           slot="header"
           class="chart-title"
@@ -127,7 +192,10 @@
       </el-card>
     </div>
     <div class="chart-1">
-      <el-card class="box-card">
+      <!-- <el-card
+        v-show="this.selectCardNames.includes('gateway_aclr_data')"
+        class="box-card"
+      >
         <div
           slot="header"
           class="chart-title"
@@ -144,7 +212,10 @@
           ></div>
         </div>
       </el-card>
-      <el-card class="box-card">
+      <el-card
+        v-show="this.selectCardNames.includes('gateway_aclr_data')"
+        class="box-card"
+      >
         <div
           slot="header"
           class="chart-title"
@@ -160,10 +231,13 @@
             style="height:500px"
           ></div>
         </div>
-      </el-card>
+      </el-card> -->
     </div>
     <div class="chart-2">
-      <el-card class="box-card">
+      <el-card
+        v-show="this.selectCardNames.includes('gateway_fanuc_data')"
+        class="box-card"
+      >
         <div
           slot="header"
           class="chart-title"
@@ -186,6 +260,7 @@
   <script>
 import * as echarts from "echarts";
 import * as EquipInfoApi from "@/api/system/equip/equipInfo";
+import { getGatewayCardTree } from "@/api/system/gatewayinfo/card";
 import _ from "lodash";
 import {
   getCurrentData,
@@ -214,16 +289,78 @@ export default {
         equipId: "2e3d0190e63eda526da89d6c751f08f3",
         startTime: this.getDefaultTimeRange()[0],
         endTime: this.getDefaultTimeRange()[1],
+        params: "",
       },
+      props: { multiple: true },
+      options: [
+        // {
+        //   value: 1,
+        //   label: "电流",
+        //   children: [
+        //     {
+        //       value: "current",
+        //       label: "电流",
+        //       children: [
+        //         { value: "chip_removal_1", label: "排屑1电流" },
+        //         { value: "chip_removal_2", label: "排屑2电流" },
+        //       ],
+        //     },
+        //   ],
+        // },
+        // {
+        //   value: 2,
+        //   label: "液压",
+        //   children: [
+        //     {
+        //       value: "hy",
+        //       label: "液压",
+        //       children: [
+        //         { value: "hy1", label: "液压1" },
+        //         { value: "hy2", label: "液压2" },
+        //       ],
+        //     },
+        //     {
+        //       value: 21,
+        //       label: "新疆维吾尔族自治区",
+        //       children: [
+        //         { value: 22, label: "乌鲁木齐" },
+        //         { value: 23, label: "克拉玛依" },
+        //       ],
+        //     },
+        //   ],
+        // },
+      ],
+      paramsData: [],
+      selectCardNames: [],
+      selectParams: [],
     };
   },
   created() {
-    this.getList();
+    this.getParamsTree("2e3d0190e63eda526da89d6c751f08f3");
   },
   methods: {
     /** 查询列表 */
     async getList() {
       try {
+        // this.selectParams.forEach((element) => {
+        //   switch (element.label) {
+        //     case "电流":
+        //       this.loadCurrentChart();
+        //       break;
+        //     case "液压":
+        //       this.loadPressChart();
+        //       break;
+        //     case "温度":
+        //       this.loadTempChart();
+        //       break;
+        //     case "加速度":
+        //       this.loadVibrChart();
+        //       break;
+        //     case "加工数据":
+        //       this.loadWorkChart();
+        //       break;
+        //   }
+        // });
         this.loadCurrentChart();
         this.loadPressChart();
         this.loadTempChart();
@@ -232,6 +369,62 @@ export default {
       } finally {
       }
     },
+    async getParamsTree(equipId) {
+      const cardTree = await getGatewayCardTree(equipId);
+      var treeData = [];
+      this.options = cardTree.data;
+      this.options.forEach((e) => {
+        e.children = null;
+        treeData.push(e);
+      });
+      this.options = treeData;
+    },
+    paramsSelectChange(e) {
+      if (!e) {
+        // console.log("焦点参数：", e);
+        this.selectCardNames = [];
+        this.selectParams = [];
+        if (this.paramsData && this.paramsData.length > 0) {
+          this.paramsData.forEach((e) => {
+            console.log("选择参数：", e);
+            // const optionData = this.options.filter(
+            //   (data) => data.value === e[0]
+            // )[0];
+            this.selectCardNames.push(e[0]);
+            // if (!this.selectCardNames.includes(e[0])) {
+            //   this.selectCardNames.push(e[0]);
+            //   this.selectParams.push({
+            //     label: optionData.label,
+            //     value: optionData.value,
+            //     children: this.getParamsChildData(optionData, e[1]),
+            //   });
+            // } else {
+            //   const index = this.selectParams.findIndex(
+            //     (item) => item.value === e[0]
+            //   );
+            //   this.selectParams[index].children.push(
+            //     this.getParamsChildData(optionData, e[1])[0]
+            //   );
+            // }
+          });
+        }
+        this.getList();
+      }
+    },
+    getParamsChildData(optionData, matchData) {
+      var childrenParamsData = [];
+      const childrenOptionData = optionData.children.filter(
+        (e) => e.value === matchData
+      )[0];
+      // console.log("childdata:", childrenOptionData);
+      childrenParamsData = [
+        {
+          label: childrenOptionData.label,
+          value: childrenOptionData.value,
+        },
+      ];
+      return childrenParamsData;
+    },
     async loadCurrentChart() {
       const res = await getCurrentData(this.queryParams);
       this.getEchartData1(res.data, {
@@ -388,7 +581,9 @@ export default {
         resolve();
       });
       p.then(() => {
-        this.chart1 = echarts.init(this.$refs.chart1);
+        if (!this.chart1) {
+          this.chart1 = echarts.init(this.$refs.chart1);
+        }
         this.chart1.showLoading();
         let option = {
           title: {
@@ -437,6 +632,7 @@ export default {
           },
           legend: {
             data: ["排屑电流1", "排屑电流2"],
+            selectMode: "single",
           },
           xAxis: [
             {
@@ -535,6 +731,9 @@ export default {
           ],
         };
         this.chart1.setOption(option);
+        this.$nextTick(() => {
+          this.chart1.resize();
+        });
         this.chart1.hideLoading();
         // this.loading1 = false;
       });
@@ -545,7 +744,9 @@ export default {
         resolve();
       });
       p.then(() => {
-        this.chart2 = echarts.init(this.$refs.chart2);
+        if (!this.chart2) {
+          this.chart2 = echarts.init(this.$refs.chart2);
+        }
         this.chart2.showLoading();
         let option = {
           title: {
@@ -699,6 +900,9 @@ export default {
           ],
         };
         this.chart2.setOption(option);
+        this.$nextTick(() => {
+          this.chart2.resize();
+        });
         this.chart2.hideLoading();
       });
     },
@@ -709,7 +913,9 @@ export default {
         resolve();
       });
       p.then(() => {
-        this.chart3 = echarts.init(this.$refs.chart3);
+        if (!this.chart3) {
+          this.chart3 = echarts.init(this.$refs.chart3);
+        }
         this.chart3.showLoading();
         let option = {
           title: {
@@ -923,6 +1129,9 @@ export default {
           ],
         };
         this.chart3.setOption(option);
+        this.$nextTick(() => {
+          this.chart3.resize();
+        });
         this.chart3.hideLoading();
       });
     },
@@ -933,7 +1142,9 @@ export default {
         resolve();
       });
       p.then(() => {
-        this.chart4 = echarts.init(this.$refs.chart4);
+        if (!this.chart4) {
+          this.chart4 = echarts.init(this.$refs.chart4);
+        }
         this.chart4.showLoading();
         let option = {
           title: {
@@ -1133,6 +1344,9 @@ export default {
           ],
         };
         this.chart4.setOption(option);
+        this.$nextTick(() => {
+          this.chart4.resize();
+        });
         this.chart4.hideLoading();
       });
     },
@@ -1142,7 +1356,9 @@ export default {
         resolve();
       });
       p.then(() => {
-        this.chart5 = echarts.init(this.$refs.chart5);
+        if (!this.chart5) {
+          this.chart5 = echarts.init(this.$refs.chart5);
+        }
         this.chart5.showLoading();
         let option = {
           title: {
@@ -1355,6 +1571,9 @@ export default {
           ],
         };
         this.chart5.setOption(option);
+        this.$nextTick(() => {
+          this.chart5.resize();
+        });
         this.chart5.hideLoading();
       });
     },
@@ -1364,7 +1583,9 @@ export default {
         resolve();
       });
       p.then(() => {
-        this.chart6 = echarts.init(this.$refs.chart6);
+        if (!this.chart6) {
+          this.chart6 = echarts.init(this.$refs.chart6);
+        }
         this.chart6.showLoading();
         let option = {
           title: {
@@ -1529,6 +1750,9 @@ export default {
           ],
         };
         this.chart6.setOption(option);
+        this.$nextTick(() => {
+          this.chart6.resize();
+        });
         this.chart6.hideLoading();
       });
     },
@@ -1541,6 +1765,12 @@ export default {
   src: url(../../../../assets/biaoti.ttf);
 }
 
+.select {
+  display: flex;
+  margin-left: 2%;
+  justify-content: space-between;
+}
+
 .company-column-info {
   padding-top: 10px;
   border-bottom: 1px solid #0000;
@@ -1559,6 +1789,7 @@ export default {
 }
 .content {
   font-size: 16px;
+  width: 100%;
 }
 .chart-title {
   text-align: center;