测点历史数据查询模块完成

src/router/index.js

@@ -247,11 +247,16 @@ const routes = [
     component: () => import('../views/warningRank/index.vue'),
   },
   {
-    path: '/realSearch', // 报警排行
+    path: '/realSearch', // 测点数据查询
     name: 'realSearch',
     component: () => import('../views/realSearch/index.vue'),
   },
   {
+    path: '/historySearch', // 测点历史数据查询
+    name: 'historySearch',
+    component: () => import('../views/historySearch/index.vue'),
+  },
+  {
     path: '/knowledge',   //故障知识列表
     name: 'knowledge1',
     component: () => import('../views/Knowledge/Knowledge1.vue'),

src/views/historySearch/index.vue

@@ -0,0 +1,530 @@
+<template>
+  <div class="searchPage1">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker size="medium" v-model="form.dateArea" type="datetimerange"
+            :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
+          </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">间隔：</div>
+          <div class="search-input">
+            <el-input placeholder="请输入间隔" clearable v-model="form.interval" type="number"></el-input>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable"></div>
+          <div class="search-input">
+            <transition name="el-zoom-in-center">
+              <el-radio-group v-model="form.type" size="small" v-show="form.interval">
+                <el-radio label="0" @click.native.prevent="getRadio('0')">最大</el-radio>
+                <el-radio label="1" @click.native.prevent="getRadio('1')">最小</el-radio>
+                <el-radio label="2" @click.native.prevent="getRadio('2')">平均</el-radio>
+              </el-radio-group>
+            </transition>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green" @click="renderCharts">生成曲线</button>
+      </div>
+    </div>
+    <div class="cardBox">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>类型</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
+        </div>
+        <div>
+          <el-radio-group v-model="form.fjType" size="small" @change="(fjType) => { resetForm(); }">
+            <el-form ref="form" :model="form">
+              <el-form-item style="margin-bottom:5px;">
+                <el-radio border size="medium" label="1">单风机多参数对比</el-radio>
+              </el-form-item>
+              <el-form-item style="margin-bottom:5px;">
+                <el-radio border size="medium" label="2">多风机单参数对比</el-radio>
+              </el-form-item>
+            </el-form>
+          </el-radio-group>
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>设备结构</span>
+        </div>
+        <div>
+          <div class="treeBox">
+            <el-input size="small" placeholder="输入以检索" :disabled="!treeData.length" v-model="filterText"></el-input>
+            <el-tree ref="treeRef" node-key="id" :data="treeData" :props="treeProps" :show-checkbox="true"
+              :highlight-current="true" :filter-node-method="filterNode" @check-change="getTreeChecked"></el-tree>
+          </div>
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>关键参数</span>
+        </div>
+        <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> -->
+        </div>
+      </el-card>
+    </div>
+    <div class="chartsBox">
+      <div id="lineChart" style="width:100%;height:100%;"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  data () {
+    return {
+      form: {
+        pointId: "",
+        pointName: "",
+        autoReq: false,
+        dateArea: [
+          this.fmtDate(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24))),
+          this.fmtDate(new Date())
+        ],
+        interval: "",
+        type: "",
+        fjType: "1",
+        gjcs: ''
+      },
+
+      treeIsMultiple: false,
+      filterText: "",
+      filterText1: "",
+
+      treeData: [],
+      gjcsOptions: [],
+
+      treeProps: {
+        children: 'children',
+        label: 'label'
+      },
+
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一天',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一周',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick (picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      }
+    }
+  },
+
+  mounted () {
+    let that = this;
+    that.$nextTick(() => {
+      that.getEquipmentStructure();
+      that.getEquipmentParams();
+    });
+  },
+
+  methods: {
+    // 获取设备结构
+    getEquipmentStructure () {
+      let that = this;
+      that.API.requestData({
+        baseURL:"http://10.155.32.4:8031/",
+        subUrl: "paramComparison/equipmentStructure",
+        timeout:30000,
+        success (res) {
+          // 请求成功的回调
+          let treeData = [];
+
+          res.data.forEach(ele => {
+            let findRes = treeData.find(findEle => {
+              return ele.windpowerstationid === findEle.label;
+            });
+            if (!findRes) {
+              let treeTemp = {
+                label: ele.windpowerstationid,
+                children: []
+              };
+              treeTemp.children.push({
+                label: ele.name,
+                id: ele.id
+              });
+              treeData.push(treeTemp);
+            } else {
+              findRes.children.push({
+                label: ele.name,
+                id: ele.id
+              });
+            }
+          });
+          that.treeData = treeData;
+        }
+      });
+    },
+
+    // 获取关键节点
+    getEquipmentParams () {
+      let that = this;
+      that.API.requestData({
+        baseURL:"http://10.155.32.4:8031/",
+        subUrl: "paramComparison/equipmentParams",
+        success (res) {
+          that.gjcsOptions = res.data;
+        }
+      });
+    },
+
+    // 获取单选结果
+    getRadio (type) {
+      if (type === this.form.type && this.form.type !== '') {
+        this.form.type = '';
+      } else {
+        this.form.type = type;
+      }
+    },
+
+    // 渲染图表
+    renderCharts () {
+      let that = this;
+      that.$nextTick(() => {
+
+        let begin = that.form.dateArea.length ? new Date(that.form.dateArea[0]).formatDate("yyyy-MM-dd hh:mm:ss") : '';
+        let end = that.form.dateArea.length ? new Date(that.form.dateArea[1]).formatDate("yyyy-MM-dd hh:mm:ss") : '';
+        let interval = that.form.interval;
+        let type = that.form.type;
+        let paramtype = that.form.fjType;
+        let wts = [];
+        let wtsArray = that.$refs.treeRef.getCheckedNodes();
+        let params = [];
+        let paramsArray = that.$refs.treeRef1.getCheckedNodes();
+        // let params = that.form.gjcs;
+
+        wtsArray.forEach(pEle => {
+          if (pEle.id) {
+            wts.push(pEle.id);
+          } else {
+            pEle.children.forEach(cEle => {
+              wts.push(cEle.id);
+            });
+          }
+        });
+
+        paramsArray.forEach(pEle => {
+          params.push(pEle.code);
+        });
+
+        let data = {};
+        data.begin = begin;
+        data.end = end;
+        interval && (data.interval = interval);
+        type && (data.type = type);
+        data.paramtype = paramtype;
+        data.wts = wts.toString();
+        data.params = params.toString();
+
+        if (begin && end && paramtype && wts.length && params.length) {
+          that.API.requestData({
+            baseURL:"http://10.155.32.4:8031/",
+            subUrl: "paramComparison/generatingCurve",
+            timeout:10000,
+            data,
+            success (res) {
+              if (res.data.length) {
+
+                let xAxisData = []; // x轴标题
+                let seriesData = []; // 折线图数据
+
+                let keyArray = [];
+
+                if (that.form.fjType === '1') {
+                  params.forEach(ele => {
+                    let findRes = that.gjcsOptions.find(findEle => {
+                      return ele === findEle.code;
+                    });
+                    keyArray.push(findRes.description);
+                  });
+                } else {
+                  wtsArray.forEach(pEle => {
+                    if (pEle.id) {
+                      keyArray.push(pEle.label);
+                    } else {
+                      pEle.children.forEach(cEle => {
+                        keyArray.push(cEle.label);
+                      });
+                    }
+                  });
+                }
+
+                keyArray.forEach(ele => {
+                  seriesData.push({
+                    data: [],
+                    type: 'line',
+                    smooth: true,
+                    name: ele
+                  });
+                });
+
+                res.data.forEach(pEle => {
+                  xAxisData.push(that.fmtDate(new Date(pEle.time)));
+                  keyArray.forEach((cEle, cIndex) => {
+                    seriesData[cIndex].data.push((pEle[cEle] || null));
+                  });
+                });
+
+                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: seriesData,
+                  tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                      type: 'cross',
+                      label: {
+                        backgroundColor: '#6a7985'
+                      }
+                    }
+                  }
+                };
+                option && myChart.setOption(option);
+
+              } else {
+                that.BASE.showMsg({
+                  type:"warning",
+                  msg:"所选参数暂无数据，请切换参数后再次尝试"
+                });
+              }
+            }
+          });
+        } else {
+          that.BASE.showMsg({
+            msg:"无法生成，请检查 日期、设备结构与关键参数是否已选择"
+          });
+        }
+
+      });
+    },
+
+    // 过滤树形节点
+    filterNode (value, data) {
+      if (!value) return true;
+      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) {
+        if (checked === true) {
+          this.checkedId = data.id;
+          this.$refs.treeRef.setCheckedKeys([data.id]);
+        } else {
+          if (this.checkedId == data.id) {
+            this.$refs.treeRef.setCheckedKeys([]);
+          }
+        }
+      }
+    },
+
+    // 获取树形选中
+    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_");
+      echarts.init(document.getElementById('lineChart'));
+    },
+
+    // 格式化日期
+    fmtDate (date) {
+      let curDate = date || new Date();
+      let year = curDate.getFullYear();
+      let mouth = curDate.getUTCMonth() + 1;
+      let day = curDate.getDate();
+      let hour = curDate.getHours();
+      let minutes = curDate.getMinutes();
+      let seconds = curDate.getSeconds();
+      return year + '-' + (mouth < 10 ? '0' + mouth : mouth) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
+    }
+  },
+
+  watch: {
+    filterText (val) {
+      this.$refs.treeRef.filter(val);
+    },
+
+    filterText1 (val) {
+      this.$refs.treeRef1.filter(val);
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+.searchBox1 {
+  width: 80%;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  position: relative;
+
+  .btnBox {
+    position: absolute;
+    left: calc(100% + 60px);
+    top: 0;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+  }
+
+  .el-input {
+    width: 150px;
+  }
+}
+
+.cardBox {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+
+  .el-card {
+    width: 32%;
+    height: 255px;
+
+    .treeBox {
+      width: 100%;
+
+      .el-tree {
+        width: 100%;
+        height: 160px;
+        margin-top: 10px;
+        overflow-y: scroll;
+
+        &::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+          background: #fff;
+        }
+
+        &::-webkit-scrollbar-track {
+          border-radius: 5px;
+          background: #fff;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 10px;
+          background: rgba(144, 147, 153, 0.3);
+        }
+      }
+    }
+  }
+}
+
+.selectBox {
+  .el-select {
+    max-height: 150px;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+      background: #fff;
+    }
+
+    &::-webkit-scrollbar-track {
+      border-radius: 5px;
+      background: #fff;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background: rgba(144, 147, 153, 0.3);
+    }
+  }
+}
+
+.chartsBox {
+  width: 100%;
+  height: 400px;
+}
+</style>
+<style lang="less">
+.cardBox {
+  .el-card__header {
+    padding: 5px 20px;
+  }
+
+  .el-card__body {
+    padding: 10px 20px;
+  }
+}
+</style>