修改部分样式、新增图表查看

src/App.vue

@@ -14,7 +14,7 @@
                 v-for="cItem in pItem.children" :key="cItem.tableid">{{cItem.tablename}}</el-menu-item>
             </el-menu-item-group>
           </el-submenu>
-          <el-submenu index="menu-fjcsdb">
+          <!-- <el-submenu index="menu-fjcsdb">
             <template slot="title">
               <i class="el-icon-location"></i>
               <span>参数对比</span>
@@ -22,7 +22,7 @@
             <el-menu-item-group>
               <el-menu-item :route="{ path: '/lineChart' }" index="/lineChart">风机参数对比</el-menu-item>
             </el-menu-item-group>
-          </el-submenu>
+          </el-submenu> -->
         </el-menu>
       </el-aside>
       <el-container>

src/pages/lineChart/index.vue

@@ -59,12 +59,15 @@
         <div slot="header" class="clearfix">
           <span>关键参数</span>
         </div>
-        <div class="selectBox">
-          <el-select style="width:100%;" v-model="form.gjcs" filterable clearable :multiple="!treeIsMultiple"
+        <div class="selectBox treeBox">
+          <el-input size="small" placeholder="输入以检索" :disabled="!gjcsOptions.length" v-model="filterText1"></el-input>
+          <el-tree ref="treeRef1" node-key="code" :data="gjcsOptions" :props="{children: null, label: 'description'}"
+            :show-checkbox="true" :highlight-current="true" :filter-node-method="filterNode1" @check-change="getTreeChecked1"></el-tree>
+          <!-- <el-select style="width:100%;" v-model="form.gjcs" filterable clearable :multiple="!treeIsMultiple"
             placeholder="输入以检索" @change="(res) => { this.$forceUpdate(); }">
             <el-option v-for="item in gjcsOptions" :key="item.id" :label="item.description" :value="item.code">
             </el-option>
-          </el-select>
+          </el-select> -->
         </div>
       </el-card>
     </div>
@@ -97,6 +100,7 @@ export default {
 
       treeIsMultiple: false,
       filterText: "",
+      filterText1: "",
 
       treeData: [],
       gjcsOptions: [],
@@ -153,7 +157,7 @@ export default {
   },
 
   methods: {
-    // 获取风机列表并包装成树形结构
+    // 获取设备结构
     getEquipmentStructure () {
       let that = this;
       that.API.requestData({
@@ -220,7 +224,9 @@ export default {
         let paramtype = that.form.fjType;
         let wts = [];
         let wtsArray = that.$refs.treeRef.getCheckedNodes();
-        let params = that.form.gjcs;
+        let params = [];
+        let paramsArray = that.$refs.treeRef1.getCheckedNodes();
+        // let params = that.form.gjcs;
 
         wtsArray.forEach(pEle => {
           if (pEle.id) {
@@ -232,6 +238,10 @@ export default {
           }
         });
 
+        paramsArray.forEach(pEle => {
+          params.push(pEle.code);
+        });
+
         let data = {};
         data.begin = begin;
         data.end = end;
@@ -333,6 +343,12 @@ export default {
       return data.label.indexOf(value) !== -1;
     },
 
+    // 过滤树形节点
+    filterNode1 (value, data) {
+      if (!value) return true;
+      return data.description.indexOf(value) !== -1;
+    },
+
     // 获取树形选中
     getTreeChecked (data, checked, node) {
       if (!this.treeIsMultiple) {
@@ -347,10 +363,25 @@ export default {
       }
     },
 
+    // 获取树形选中
+    getTreeChecked1 (data, checked, node) {
+      if (this.treeIsMultiple) {
+        if (checked === true) {
+          this.checkedId = data.code;
+          this.$refs.treeRef1.setCheckedKeys([data.code]);
+        } else {
+          if (this.checkedId == data.code) {
+            this.$refs.treeRef1.setCheckedKeys([]);
+          }
+        }
+      }
+    },
+
     // 重置表单
     resetForm () {
       this.form.fjType === '1' ? this.treeIsMultiple = false : this.treeIsMultiple = true;
       this.$refs.treeRef.setCheckedKeys([]);
+      this.$refs.treeRef1.setCheckedKeys([]);
       this.form.gjcs = '';
       this.$forceUpdate();
       document.getElementById("lineChart").removeAttribute("_echarts_instance_");
@@ -373,6 +404,10 @@ export default {
   watch: {
     filterText (val) {
       this.$refs.treeRef.filter(val);
+    },
+
+    filterText1 (val) {
+      this.$refs.treeRef1.filter(val);
     }
   },
 }
@@ -414,7 +449,7 @@ export default {
 
       .el-tree {
         width: 100%;
-        height: 110px;
+        height: 160px;
         margin-top: 10px;
         overflow-y: scroll;
 
@@ -466,3 +501,14 @@ export default {
   height: 400px;
 }
 </style>
+<style lang="scss">
+.cardBox {
+  .el-card__header {
+    padding: 5px 20px;
+  }
+
+  .el-card__body {
+    padding: 10px 20px;
+  }
+}
+</style>

src/pages/search/index.vue

@@ -33,16 +33,11 @@
       </el-table>
     </div>
     <div class="block" style="margin-top:5px;" align="right">
-        <el-pagination
-          @size-change="handleSizerealChange"
-          @current-change="getPaginationCurrent"
-          :current-page="currentPage"
-          :page-sizes="[100, 200, 300, 400]"
-          :page-size="pagesizereal"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="currentPageTotal">
-        </el-pagination>
-        <!-- <el-pagination
+      <el-pagination @size-change="handleSizerealChange" @current-change="getPaginationCurrent" :current-page="currentPage"
+        :page-sizes="[100, 200, 300, 400]" :page-size="pagesizereal" layout="total, sizes, prev, pager, next, jumper"
+        :total="currentPageTotal">
+      </el-pagination>
+      <!-- <el-pagination
           background
           layout="prev, pager, next"
           :page-size="pagesize"
@@ -50,8 +45,8 @@
           @current-change="getPaginationCurrent"
           :total="currentPageTotal">
         </el-pagination> -->
-      </div>
-    <el-dialog title="查看详情" top="50px" :visible.sync="showDialog" width="95%" @closed="(res) =>{ this.form.dateArea=[];this.detailsTableData=[]; }">
+    </div>
+    <el-dialog title="查看详情" top="50px" :visible.sync="showDialog" width="95%" @closed="(res) =>{ this.form.dateArea=[this.fmtDate(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24))), this.fmtDate(new Date()) ];this.detailsTableData=[]; }">
       <div class="searchBox">
         <el-form ref="form" :model="form" inline label-width="80px">
           <el-form-item label="点名：">
@@ -70,17 +65,19 @@
         <div class="btnBox">
           <el-button type="primary" size="middle" @click="getDetails">查询</el-button>
           <el-button type="warning" size="middle" @click="exportExcel('detailsTableData')" v-if="detailsTableData.length">导出</el-button>
+          <el-button type="success" size="middle" @click="renderCharts" v-if="detailsTableData.length">查看折线图</el-button>
         </div>
       </div>
       <div class="tableBox" style="margin-top:0;">
         <el-table :data="detailsTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" align="center"
           header-align="center" style="width: 100%" max-height="450" height="450" :fit="true">
           <el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
-          <el-table-column prop="pointId" label="点名" :show-overflow-tooltip="true"></el-table-column>
+          <!-- <el-table-column prop="pointId" label="点名" :show-overflow-tooltip="true"></el-table-column>
           <el-table-column prop="pointName" label="描述" width="400" :show-overflow-tooltip="true"></el-table-column>
           <el-table-column prop="timeDate" label="时间戳" width="260"></el-table-column>
-          <el-table-column prop="value" label="值" width="300"></el-table-column>
-          
+          <el-table-column prop="value" label="值" width="300"></el-table-column> -->
+          <el-table-column prop="timeDate" label="时间戳"></el-table-column>
+          <el-table-column prop="value" label="值"></el-table-column>
         </el-table>
       </div>
       <div class="block" style="margin-top:5px;">
@@ -89,11 +86,15 @@
         </el-pagination>
       </div>
     </el-dialog>
+    <el-dialog title="查看折线图" top="100px" :visible.sync="chartDialogShow" width="60%">
+      <div id="lineChart" style="width:100%;height:500px;"></div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { Message } from 'element-ui';
+import * as echarts from "echarts";
 
 export default {
   data () {
@@ -104,10 +105,14 @@ export default {
         pointId: "",
         pointName: "",
         autoReq: false,
-        dateArea: [],
+        dateArea: [
+          this.fmtDate(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24))),
+          this.fmtDate(new Date())
+        ],
         interval: ""
       },
       showDialog: false,
+      chartDialogShow: false,
       tableData: [],
       detailsTableData: [],
       autoReqTimmer: null,
@@ -167,7 +172,7 @@ export default {
     this.autoReqTimmer = null;
   },
 
-  created(){
+  created () {
     let that = this
     that.tableid = "JSFW";
     that.getTableData();
@@ -179,7 +184,7 @@ export default {
       if (!skipLoading) {
         this.$store.commit("loadingStore", true);
       }
-      this.API.get("datacenter/realtimeData?tableid=" + this.tableid + "&pointId=" + this.form.pointId + "&pointName=" + this.form.pointName+ "&pageNum=" + this.currentPage+ "&pageSize=" + this.pagesizereal).then((res) => {
+      this.API.get("datacenter/realtimeData?tableid=" + this.tableid + "&pointId=" + this.form.pointId + "&pointName=" + this.form.pointName + "&pageNum=" + this.currentPage + "&pageSize=" + this.pagesizereal).then((res) => {
         res.data.forEach(ele => {
           ele.timeDate = this.fmtDate(new Date(ele.time));
           if (ele.value > 0) {
@@ -215,18 +220,22 @@ export default {
         let end = (this.form.dateArea.length ? this.form.dateArea[1] : '');
 
         this.API.get("datacenter/historyData?pointId=" + this.pointId + "&begin=" + begin + "&end=" + end + (this.form.interval ? ("&interval=" + this.form.interval) : '')).then((res) => {
-          res.data.forEach(ele => {
-            ele.timeDate = this.fmtDate(new Date(ele.time));
-            if (ele.value > 0) {
-              ele.value = parseFloat(ele.value).toFixed(4);
-            }
-          });
-
-          this.detailsTableData = res.data || [];
+          if (res.data.length) {
+            res.data.forEach(ele => {
+              ele.timeDate = this.fmtDate(new Date(ele.time));
+              if (ele.value > 0) {
+                ele.value = parseFloat(ele.value).toFixed(4);
+              }
+            });
+            this.detailsTableData = res.data || [];
+          } else {
+            Message.warning("所选日期区间之内暂无数据，请重试");
+          }
           this.$store.commit("loadingStore", false);
         });
       }
     },
+
     // 初始页currentPage、初始每页数据数pagesize和数据data
     handleSizeChange: function (size) {
       this.pagesize = size;
@@ -240,7 +249,6 @@ export default {
       this.currentPage = currentPage;
     },
 
-
     // 导出excel
     exportExcel (tableDataName) {
       if (tableDataName === 'tableData') {
@@ -300,6 +308,49 @@ export default {
       this.detailsTableData = [];
     },
 
+    // 渲染折线图
+    renderCharts () {
+      this.chartDialogShow = true;
+      this.$nextTick(() => {
+
+        let xAxisData = [];
+        let seriesData = [];
+
+        this.detailsTableData.forEach(ele => {
+          xAxisData.push(ele.timeDate);
+          seriesData.push(ele.value);
+        });
+        document.getElementById("lineChart").removeAttribute("_echarts_instance_");
+        let chartDom = document.getElementById('lineChart');
+        let myChart = echarts.init(chartDom);
+
+        let option = {
+          xAxis: {
+            type: 'category',
+            data: xAxisData
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: seriesData,
+            type: 'line',
+            smooth: true,
+            name: "值"
+          }],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985'
+              }
+            }
+          }
+        };
+        option && myChart.setOption(option);
+      });
+    },
 
     // 格式化日期
     fmtDate (date) {