数据管理静态页面上传

src/router/index.js

@@ -234,6 +234,11 @@ const routes = [
     component: () => import('../views/warningRank/index.vue'),
   },
   {
+    path: '/realSearch', // 报警排行
+    name: 'realSearch',
+    component: () => import('../views/realSearch/index.vue'),
+  },
+  {
     path: '/knowledge',   //故障知识列表
     name: 'knowledge1',
     component: () => import('../views/Knowledge/Knowledge1.vue'),

src/views/layout/Menu.vue

@@ -90,7 +90,25 @@ export default {
         {
           id: "datacenter",
           text: "数据管理",
-          data: [],
+          data: [
+            {
+              text: "原始数据查询",
+              icon: "svg-wind-site",
+              path: "/yssjcx",
+              children: [
+                {
+                  text: "测点数据查询",
+                  icon: "svg-wind-site",
+                  path: "/realSearch"
+                },
+                {
+                  text: "测点历史数据查询",
+                  icon: "svg-wind-site",
+                  path: "/historySearch"
+                }
+              ]
+            }
+          ],
         },
         {
           id: "statistic",

src/views/realSearch/index.vue

@@ -0,0 +1,433 @@
+<template>
+  <div class="searchPage">
+    <div style="width:200px">
+      <CollapseList :list="menus" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Message } from 'element-plus';
+import CollapseList from "@com/coms/collapse/collapse-list.vue";
+import * as echarts from "echarts";
+
+export default {
+  data () {
+    return {
+      menus:[],
+      tableid: "",
+      pointId: "",
+      form: {
+        pointId: "",
+        pointName: "",
+        autoReq: false,
+        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,
+
+      currentPage: 1,
+      pagesize: 10,
+      pagesizereal: 100,
+      currentPageTotal: 0,
+      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]);
+          }
+        }]
+      }
+    }
+  },
+
+  components:{
+    CollapseList
+  },
+
+  mounted () {
+    let that = this;
+    that.$nextTick(() => {
+      that.tableid = that.$route.query.tableid;
+      // that.getTableData();
+      that.getMenuList();
+    });
+  },
+
+  unmounted () {
+    clearInterval(this.autoReqTimmer);
+    this.autoReqTimmer = null;
+  },
+
+  created () {
+    let that = this
+    that.tableid = "JSFW";
+    // that.getTableData();
+  },
+
+  methods: {
+
+    // 获取左侧菜单
+    getMenuList(){
+      let that=this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:8031/",
+        subUrl: "datacenter/tables",
+        success(res){
+          let JSFW = {
+            text: '计算服务',
+            children: []
+          };
+          let MHS_FDC = {
+            text: "麻黄山",
+            children: []
+          };
+          let NSS_FDC = {
+            text: "牛首山",
+            children: []
+          };
+          let QS_FDC = {
+            text: "青山",
+            children: []
+          };
+          let SBQ_FDC = {
+            text: "石板泉",
+            children: []
+          };
+          let XS_FDC = {
+            text: "香山",
+            children: []
+          };
+          let DWK_GDC = {
+            text: "大武口",
+            children: []
+          };
+          let PL_GDC = {
+            name: "平罗",
+            children: []
+          };
+          let XH_GDC = {
+            text: "宣和",
+            children: []
+          };
+          let MCH_GDC = {
+            text: "马场湖",
+            children: []
+          };
+          res.data.forEach(ele => {
+            ele.text=ele.tablename;
+            if (ele.windpowerstationid === 'MHS_FDC') {
+              MHS_FDC.children.push(ele);
+            } else if (ele.windpowerstationid === 'NSS_FDC') {
+              NSS_FDC.children.push(ele);
+            } else if (ele.windpowerstationid === 'QS_FDC') {
+              QS_FDC.children.push(ele);
+            } else if (ele.windpowerstationid === 'SBQ_FDC') {
+              SBQ_FDC.children.push(ele);
+            } else if (ele.windpowerstationid === 'XS_FDC') {
+              XS_FDC.children.push(ele);
+            } else if (ele.windpowerstationid === 'DWK_GDC') {
+              DWK_GDC.children.push(ele);
+            } else if (ele.windpowerstationid === 'PL_GDC') {
+              PL_GDC.children.push(ele);
+            } else if (ele.windpowerstationid === 'XH_GDC') {
+              XH_GDC.children.push(ele);
+            } else if (ele.windpowerstationid === 'MCH_GDC') {
+              MCH_GDC.children.push(ele);
+            } else {
+              JSFW.children.push(ele);
+            }
+          });
+          that.menus.push(JSFW, MHS_FDC, NSS_FDC, QS_FDC, SBQ_FDC, XS_FDC, DWK_GDC, PL_GDC, XH_GDC, MCH_GDC);
+        }
+      });
+    },
+    // 获取表格数据
+    getTableData () {
+      let that=this;
+      that.API.requestData({
+        baseURL:"http://10.155.32.4:8031/",
+        subUrl:"datacenter/realtimeData",
+        method:"GET",
+        data:{
+          tableid:that.tableid,
+          pointId:that.pointId,
+          pointName:that.pointName,
+          pageNum:that.currentPage,
+          currentPage:that.pagesizereal,
+        },
+        success(res){
+          res.data.forEach(ele => {
+            ele.timeDate = that.fmtDate(new Date(ele.time));
+            if (ele.value > 0) {
+              ele.value = parseFloat(ele.value).toFixed(4);
+            }
+          });
+          that.tableData = res.data || [];
+          that.currentPageTotal = res.count || [];
+        }
+      });
+    },
+
+    // index渲染函数
+    indexMethod (index) {
+      return index + 1;
+    },
+
+    // 查看详情按钮被点击
+    goDetails (row) {
+      this.pointId = row.pointId;
+      this.showDialog = true;
+    },
+
+    // 获取详情
+    getDetails () {
+      if (!this.form.dateArea || !this.form.dateArea.length) {
+        Message.error("请先选择要查询的日期区间后再试");
+      } else {
+        this.$store.commit("loadingStore", true);
+        let begin = (this.form.dateArea.length ? this.form.dateArea[0] : '');
+        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) => {
+          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;
+    },
+    handleSizerealChange: function (size) {
+      this.currentPage = 1;
+      this.pagesizereal = size;
+      this.getTableData();
+    },
+    handleCurrentChange: function (currentPage) {
+      this.currentPage = currentPage;
+    },
+
+    // 导出excel
+    // exportExcel (tableDataName) {
+    //   if (tableDataName === 'tableData') {
+    //     let tableid = this.tableid;
+    //     let pointId = this.form.pointId || '';
+    //     let pointName = this.form.pointName || '';
+    //     this.API.get("datacenter/realtimeExport?tableid=" + tableid + "&pointId=" + pointId + "&pointName=" + pointName).then(res => {
+    //       const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
+    //       const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题       
+    //       const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值   
+    //       const list = res.data; //把要导出的数据tableData存到list 
+    //       const data = this.formatJson(filterVal, list);
+    //       export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
+    //     });
+    //   } else {
+    //     const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
+    //     const tHeader = ['点名', '描述', '时间戳', '值']; // 上面设置Excel的表格第一行的标题       
+    //     const filterVal = ['pointId', 'pointName', 'timeDate', 'value']; // 上面的index、nickName、name是tableData里对象的属性key值   
+    //     const list = this[tableDataName]; //把要导出的数据tableData存到list 
+    //     const data = this.formatJson(filterVal, list);
+    //     export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
+    //   }
+    // },
+
+    // formatJson (filterVal, jsonData) {
+    //   return jsonData.map(v => filterVal.map(j => v[j]));
+    // },
+
+    // 刷新开关
+    reReqAjax () {
+      clearInterval(this.autoReqTimmer);
+      this.autoReqTimmer = null;
+      if (this.form.autoReq) {
+        Message.success("已开启自动刷新数据，每间隔 1 秒自动刷新一次数据");
+        this.autoReqTimmer = setInterval(() => {
+          this.getTableData(true);
+        }, 1000);
+      } else {
+        Message.warning("已关闭自动刷新数据");
+      }
+    },
+
+    // 分页器每页数量修改
+    getPaginationSize (value) {
+      this.currentPageSize = value;
+      this.getDetails();
+    },
+
+    // 分页器页数修改
+    getPaginationCurrent (value) {
+      this.currentPage = value;
+      this.getTableData();
+    },
+
+    // 获取选中的时间
+    getDatePickerChange (value) {
+      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) {
+      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: {
+    $route (value) {
+      this.tableid = value.query.tableid;
+      this.form.pointName = "";
+      this.form.autoReq = false;
+      clearInterval(this.autoReqTimmer);
+      this.autoReqTimmer = null;
+      this.getTableData();
+    }
+  }
+}
+</script>
+  
+<style lang="scss" scoped>
+.searchBox {
+  width: 80%;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  position: relative;
+
+  .btnBox {
+    position: absolute;
+    left: calc(100% + 20px);
+    top: 0;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+  }
+
+  .el-input {
+    width: 150px;
+  }
+}
+
+.tableBox {
+  margin-top: 10px;
+}
+
+.paginationBox {
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>
+<style lang="scss">
+.tableBox {
+  .cell {
+    text-align: center;
+  }
+}
+.searchPage {
+  .el-dialog__body {
+    padding: 10px 20px;
+    max-height: 570px;
+    overflow: hidden;
+  }
+}
+</style>