数据记录查询条件和导出

tzipc-ui/src/api/ipc/dataLog.js

@@ -1,17 +1,19 @@
 import request from "@/utils/request";
 
 // 查询plc数据记录
-export function getPlcDataLog(part) {
+export function getPlcDataLog(query) {
   return request({
-    url: "/ipc/dataLog/plc/" + part,
+    url: "/ipc/dataLog/plc",
     method: "get",
+    params: query,
   });
 }
 
 // 查询传感器温振数据记录
-export function getSensorDataLog(part) {
+export function getSensorDataLog(query) {
   return request({
-    url: "/ipc/dataLog/sensor/" + part,
+    url: "/ipc/dataLog/sensor",
     method: "get",
+    params: query,
   });
 }

tzipc-ui/src/views/ipc/dataLog/sensorDataLog.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="app-container image-background">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item
+        label="监测部位"
+        prop="part"
+      >
         <el-select
-      v-model="part"
+          v-model="queryParams.part"
           placeholder="请选择监测部位"
           @change="getList()"
         >
@@ -12,7 +23,42 @@
             :value="field.fieldValue"
           />
         </el-select>
-    <div class="content-but">
+      </el-form-item>
+      <el-form-item
+        label="时间范围"
+        prop="datetimerange"
+      >
+        <el-date-picker
+          class="picker"
+          v-model="queryParams.datetimerange"
+          type="datetimerange"
+          :picker-options="pickerOptions"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+        >搜索</el-button>
+        <el-button
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
+        >重置</el-button>
+        <el-button
+          icon="el-icon-download"
+          size="mini"
+          @click="exportData"
+        >导出</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- <div class="content-but">
       <div
         v-if="refresh"
         class="button-start"
@@ -23,7 +69,7 @@
         class="button-stop"
         @click="startRefresh"
       >自动刷新</div>
-    </div>
+    </div> -->
     <el-table
       class="tableCss"
       v-loading="loading"
@@ -49,10 +95,17 @@
         show-overflow-tooltip
       />
       <el-table-column
-        label="振动温度"
+        label="振动时间"
         align="center"
-        key="vt"
+        key="stime"
-        prop="vt"
+        prop="stime"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="轴套区温度"
+        align="center"
+        key="ssat"
+        prop="ssat"
         show-overflow-tooltip
       />
       <el-table-column
@@ -76,15 +129,54 @@
         prop="vz"
         show-overflow-tooltip
       />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-data-line"
+            @click="handleView(scope.row)"
+          >图谱展示</el-button>
+        </template>
+      </el-table-column>
     </el-table>
-
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 添加或修改报警记录对话框 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="1000px"
+      append-to-body
+    >
+      <div
+        ref="chart"
+        style="height:500px;"
+      ></div>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="cancel">关 闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
     
-    <script>
+<script>
 import { getSensorDataLog } from "@/api/ipc/dataLog";
 import { getFields } from "@/api/ipc/monitorFields";
-
+import * as echarts from "echarts";
+import { isArray, merge } from "lodash";
 export default {
   name: "sensolrDataLog",
   data() {
@@ -93,28 +185,291 @@ export default {
       loading: true,
       // 总条数
       total: 0,
+      // 是否显示弹出层
+      open: false,
+      title: "图谱展示",
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        part: null,
+        isAlarm: null,
+        datetimerange: [],
+        startTime: null,
+        endTime: null,
       },
       // 监测部位
       monitorPartList: [],
       part: "",
       dataList: [],
       refresh: false,
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            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]);
+            },
+          },
+        ],
+      },
     };
   },
   created() {
     this.getMonitorPartList();
   },
   methods: {
+    /** 导出数据 */
+    exportData() {
+      if (this.total > 10000) {
+        this.$message({
+          showClose: true,
+          message: "数据量过大，请联系管理员进行导出！",
+          type: "warning",
+        });
+      } else {
+        this.download(
+          "/ipc/dataLog/sensorExport",
+          {
+            ...this.queryParams,
+          },
+          `plc温压数据_${new Date().getTime()}.xlsx`
+        );
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.part = this.monitorPartList[0].fieldValue;
+      this.handleQuery();
+    },
+    // 查看图谱
+    handleView(data) {
+      this.open = true;
+      this.initChart(
+        data.stime.split(","),
+        data.vx.split(","),
+        data.vy.split(","),
+        data.vz.split(",")
+      );
+    },
+    generateOptions(option = {}) {
+      return merge(
+        {
+          color: [
+            "#306fff",
+            "#30c9c9",
+            "#f7ad08",
+            "#93beff",
+            "#80FFA5",
+            "#00DDFF",
+            "#37A2FF",
+            "#FF0087",
+            "#FFBF00",
+            "#5470c6",
+            "#91cc75",
+            "#fac858",
+            "#ee6666",
+            "#73c0de",
+            "#3ba272",
+            "#fc8452",
+            "#9a60b4",
+            "#ea7ccc",
+          ],
+          tooltip: {
+            show: true,
+            trigger: "axis",
+          },
+          xAxis: {
+            show: true,
+            name: "",
+            nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#818181",
+            },
+            nameGap: 15, // 坐标轴名称与轴线的距离
+            inverse: false, // 是否反向坐标轴
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#818181",
+            },
+            axisLine: {
+              show: true,
+            },
+            position: "bottom",
+            offset: 0, // 相对正常位置的偏移
+            type: "category", // 类目轴，也可以是time， value， 对数轴log
+            data: [],
+          },
+          yAxis: {
+            name: "",
+            nameTextStyle: {
+              // 坐标轴名称的样式
+              color: "#818181",
+            },
+            axisLabel: {
+              // 刻度标签的样式
+              hideOverlap: true, // 隐藏重叠的标签
+              color: "#818181",
+            },
+            axisLine: {
+              show: false,
+            },
+            minorTick: {
+              // 坐标轴刻度线相关配置
+              show: false,
+            },
+            splitLine: {
+              // 坐标轴在grid区域中的分割线
+              show: true,
+              lineStyle: {
+                type: "dashed",
+                color: "#818181",
+              },
+            },
+          },
+          legend: {
+            show: true,
+            // 图例配置
+            orient: "horizontal", // horizontal水平布局， vertical垂直布局
+            top: "20",
+            right: "30",
+            // backgroundColor: "#000000",
+            // borderColor: "#ccc",
+            // borderWidth: 0,
+            padding: 5,
+            itemGap: 10, // 各个item之间的距离
+            itemWidth: 10, // 图例图形宽度
+            itemHeight: 10, // 图例图形高度
+            borderRadius: 10,
+            textStyle: {
+              color: "#d7d8db",
+              fontSize: 9,
+            },
+            lineStyle: {
+              type: "dotted",
+              opacity: 0,
+            },
+          },
+          grid: {
+            left: "10%",
+            top: "25%",
+            right: "6%",
+            bottom: "12%",
+          },
+        },
+        option,
+        (objVal, srcVal) => {
+          if (isArray(objVal)) return srcVal;
+        }
+      );
+    },
+    initChart(xAxis = [], vx, vy, vz) {
+      let p = new Promise((resolve) => {
+        resolve();
+      });
+      p.then(() => {
+        const chartIns = echarts.init(this.$refs.chart);
+        chartIns.setOption(
+          this.generateOptions({
+            xAxis: {
+              data: xAxis,
+            },
+            yAxis: { name: "单位: ㎛" },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross",
+                label: {
+                  backgroundColor: "#6a7985",
+                },
+              },
+            },
+            series: [
+              {
+                name: "X轴",
+                type: "line",
+                symbol: "none",
+                data: vx,
+              },
+              {
+                name: "Y轴",
+                type: "line",
+                symbol: "none",
+                data: vy,
+              },
+              {
+                name: "Z轴",
+                type: "line",
+                symbol: "none",
+                data: vz,
+              },
+            ],
+          }),
+          true,
+          true
+        );
+        window.addEventListener("resize", () => {
+          chartIns && chartIns.resize();
+        });
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+    },
     /** 查询监测部位列表 */
     getMonitorPartList() {
       getFields("monitor_part")
         .then((res) => {
           this.monitorPartList = res.data;
-          this.part = this.monitorPartList[0].fieldValue;
+          this.queryParams.part = this.monitorPartList[0].fieldValue;
           this.getList();
         })
         .catch((error) => {
@@ -123,12 +478,35 @@ export default {
     },
     /** 查询列表 */
     getList() {
+      if (this.queryParams.datetimerange && this.queryParams.datetimerange[0]) {
+        this.queryParams.startTime = this.dateToStr(
+          this.queryParams.datetimerange[0]
+        );
+        this.queryParams.endTime = this.dateToStr(
+          this.queryParams.datetimerange[1]
+        );
+      }
       this.loading = true;
-      getSensorDataLog(this.part).then((response) => {
+      getSensorDataLog(this.queryParams).then((response) => {
-        this.dataList = response.data;
+        this.dataList = response.data.rows;
+        this.total = response.data.total;
         this.loading = false;
       });
     },
+    dateToStr(date) {
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var minute = date.getMinutes();
+      minute = minute < 10 ? "0" + minute : minute;
+      var second = date.getSeconds();
+      second = second < 10 ? "0" + second : second;
+      return y + "-" + m + "-" + d + "T" + h + ":" + minute + ":" + second;
+    },
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex % 2 === 0) {
         return "color-row";
@@ -149,7 +527,7 @@ export default {
 };
 </script>
 <style lang="scss">
-@import '@/theme/index.scss';
+@import "@/theme/index.scss";
 .color-row {
   @include background_color(tableRowBackgroundColor);
 }