趋势图前台代码提交

tzipc-server/tzipc-admin/src/main/java/com/inspur/web/controller/ipc/IpcDataReceiveController.java

@@ -1,10 +1,7 @@
 package com.inspur.web.controller.ipc;
 
-import com.inspur.common.constant.CacheConstants;
 import com.inspur.common.core.domain.AjaxResult;
 import com.inspur.common.core.redis.RedisCache;
-import com.inspur.ipc.domain.IpcAlarmRecord;
-import com.inspur.ipc.domain.IpcMonitorField;
 import com.inspur.ipc.service.IIpcMonitorFieldService;
 import com.inspur.ipc.utils.IpcConstant;
 import com.serotonin.modbus4j.BatchRead;
@@ -24,7 +21,6 @@ import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
-import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 

tzipc-server/tzipc-system/src/main/java/com/inspur/ipc/service/impl/IpcDataLogServiceImpl.java

@@ -113,7 +113,6 @@ public class IpcDataLogServiceImpl implements IIpcDataLogService {
      */
     private List<Map<String, Object>> selectDataByParamNameandDate(String tableName, String part, String param, String startTime, String endTime) {
         String sql = "select time," + param + " from " + tableName + " where part = '" + part + "' and time >= '" + startTime + "' and time <= '" + endTime + "'";
-        System.out.println(sql);
         return influxDBService.queryResultProcess(influxDBService.query(sql));
     }
 
@@ -124,7 +123,6 @@ public class IpcDataLogServiceImpl implements IIpcDataLogService {
      */
     private List<Map<String, Object>> selectLongTimeDataByParamNameandDate(String tableName, String part, String param, String startTime, String endTime, String interval) {
         String sql = "select time, mean(" + param + ") from " + tableName + " where  part = '" + part + "' and time >= '" + startTime + "' and time <= '" + endTime + "' group by time(" + interval + ")";
-        System.out.println(sql);
         return influxDBService.queryResultProcess(influxDBService.query(sql));
     }
 

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

@@ -17,3 +17,12 @@ export function getSensorDataLog(query) {
     params: query,
   });
 }
+
+// 查询趋势图谱数据
+export function getTendencyData(query) {
+  return request({
+    url: "/ipc/dataLog/getTendencyData",
+    method: "get",
+    params: query,
+  });
+}

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

@@ -64,11 +64,13 @@
           @click="handleQuery"
         >搜索</el-button>
         <el-button
+          type="primary"
           icon="el-icon-refresh"
           size="mini"
           @click="resetQuery"
         >重置</el-button>
         <el-button
+          type="primary"
           icon="el-icon-download"
           size="mini"
           @click="exportData"

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

@@ -453,6 +453,30 @@ export default {
                 data: vz,
               },
             ],
+            dataZoom: [
+              {
+                show: true,
+                type: "slider",
+                xAxisIndex: 0,
+                filterMode: "none",
+                start: 0,
+                end: xAxis.length,
+                bottom: "1%",
+                fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
+                borderColor: "#3C506B",
+              },
+              {
+                show: true,
+                type: "inside",
+                xAxisIndex: 0,
+                filterMode: "none",
+                start: 0,
+                end: 10,
+                bottom: "1%",
+                fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
+                borderColor: "#E0E6F3",
+              },
+            ],
           }),
           true,
           true

tzipc-ui/src/views/zf/bigscreen/index.vue

@@ -4,11 +4,21 @@
       <div class="grid-item-wrapper">
         <div class="card-item-wrapper">
           <div class="card-big-title">{{ title1 }}数据监控</div>
-                    <div class="card-sub-title">油膜轴承振动监测</div>
+          <div
-                    <div class="card-main-item-wrapper" id="chart1" style="height:calc(100% - 6.4rem);"></div>
+            class="card-sub-title"
+            @click="jumpSensorDataLog"
+          >油膜轴承振动监测</div>
+          <div
+            class="card-main-item-wrapper"
+            id="chart1"
+            style="height:calc(100% - 6.4rem);"
+          ></div>
         </div>
       </div>
-            <div class="grid-item-wrapper" style="grid-row: span 2;grid-column: span 2;padding: 2rem;">
+      <div
+        class="grid-item-wrapper"
+        style="grid-row: span 2;grid-column: span 2;padding: 2rem;"
+      >
         <div class="device-image">
           <div @click="handleTypeChange(['rtd', 'rto'])"></div>
           <div @click="handleTypeChange(['rbd', 'rbo'])"></div>
@@ -19,122 +29,309 @@
       <div class="grid-item-wrapper">
         <div class="card-item-wrapper">
           <div class="card-big-title">{{ title2 }}数据监控</div>
-                    <div class="card-sub-title">油膜轴承振动监测</div>
+          <div
-                    <div class="card-main-item-wrapper" id="chart2" style="height:calc(100% - 6.4rem);"></div>
+            class="card-sub-title"
+            @click="jumpSensorDataLog"
+          >油膜轴承振动监测</div>
+          <div
+            class="card-main-item-wrapper"
+            id="chart2"
+            style="height:calc(100% - 6.4rem);"
+          ></div>
         </div>
       </div>
       <div class="grid-item-wrapper">
         <div class="card-item-wrapper">
-                    <div class="card-sub-title">油液颗粒度特性</div>
+          <div
-                    <div class="card-main-item-wrapper" id="chart3" style="height:calc(100% - 2.8rem);"></div>
+            class="card-sub-title"
+            @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'pz4', '油液颗粒度特性', 'μm')"
+          >油液颗粒度特性</div>
+          <div
+            class="card-main-item-wrapper"
+            id="chart3"
+            style="height:calc(100% - 2.8rem);"
+          ></div>
         </div>
       </div>
       <div class="grid-item-wrapper">
         <div class="card-item-wrapper">
-                    <div class="card-sub-title">油液颗粒度特性</div>
+          <div
-                    <div class="card-main-item-wrapper" id="chart4" style="height:calc(100% - 2.8rem);"></div>
+            class="card-sub-title"
+            @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'pz4', '油液颗粒度特性', 'μm')"
+          >油液颗粒度特性</div>
+          <div
+            class="card-main-item-wrapper"
+            id="chart4"
+            style="height:calc(100% - 2.8rem);"
+          ></div>
         </div>
       </div>
-            <div class="grid-item-wrapper" style="grid-column: span 2;">
+      <div
+        class="grid-item-wrapper"
+        style="grid-column: span 2;"
+      >
         <div class="card-item-wrapper">
           <div class="big-car-title-bg">油膜轴承系统油品特性</div>
-                    <div class="card-main-item-wrapper" style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);">
+          <div
+            class="card-main-item-wrapper"
+            style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);"
+          >
             <div class="bottom-grid-wrapper">
               <div class="bottom-grid-item">
-                                <div id="bottomL1" style="width: 100%;aspect-ratio: 1;"></div>
+                <div
-                                <div style="font-family: 'BiaoTi';">油水含量</div>
+                  id="bottomL1"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'owc', '油水含量', '%')"
+                >油水含量</div>
               </div>
               <div class="bottom-grid-item">
-                                <div id="bottomL2" style="width: 100%;aspect-ratio: 1;"></div>
+                <div
-                                <div style="font-family: 'BiaoTi';">油品粘度</div>
+                  id="bottomL2"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'ov', '油品粘度', 'Cp')"
+                >油品粘度</div>
               </div>
               <div class="bottom-grid-item">
-                                <div id="bottomL3" style="width: 100%;aspect-ratio: 1;"></div>
+                <div
-                                <div style="font-family: 'BiaoTi';">进油压力</div>
+                  id="bottomL3"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'oip', '进油压力', 'Bar')"
+                >进油压力</div>
               </div>
               <div class="bottom-grid-item">
                 <div
                   style="width: 100%;aspect-ratio: 1;"
                   class="extra-bar-wrapper"
                 >
-                                    <div class="extra-bar-item" :style="`height: ${parseInt(l1 * 100)}%;background-color:#6581f0;`"></div>
+                  <div
-                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(l1 * 100)}%);`">
+                    class="extra-bar-item"
+                    :style="`height: ${parseInt(l1 * 100)}%;background-color:#6581f0;`"
+                  ></div>
+                  <div
+                    class="extra-bar-text"
+                    :style="`height: calc(100% - ${parseInt(l1 * 100)}%);`"
+                  >
                     {{ parseInt(l1 * 100) }}
                   </div>
                 </div>
-                                <div style="font-family: 'BiaoTi';">回油温度</div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[0], titleMap[queryParams[0]], 'rot', '回油温度', '℃')"
+                >回油温度</div>
               </div>
               <div class="bottom-grid-item">
                 <div
                   style="width: 100%;aspect-ratio: 1;"
                   class="extra-bar-wrapper"
                 >
-                                    <div class="extra-bar-item" :style="`height: ${parseInt(l2 * 100)}%;background-color:#19ca88;`"></div>
+                  <div
-                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(l2 * 100)}%);`">
+                    class="extra-bar-item"
+                    :style="`height: ${parseInt(l2 * 100)}%;background-color:#19ca88;`"
+                  ></div>
+                  <div
+                    class="extra-bar-text"
+                    :style="`height: calc(100% - ${parseInt(l2 * 100)}%);`"
+                  >
                     {{ parseInt(l2 * 100) }}
                   </div>
                 </div>
-                                <div style="font-family: 'BiaoTi';">轴套区温度</div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="jumpSensorDataLog"
+                >轴套区温度</div>
               </div>
             </div>
           </div>
         </div>
       </div>
-            <div class="grid-item-wrapper" style="grid-column: span 2;">
+      <div
+        class="grid-item-wrapper"
+        style="grid-column: span 2;"
+      >
         <div class="card-item-wrapper">
           <div class="big-car-title-bg">油膜轴承系统油品特性</div>
-                    <div class="card-main-item-wrapper" style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);">
+          <div
+            class="card-main-item-wrapper"
+            style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);"
+          >
             <div class="bottom-grid-wrapper">
               <div class="bottom-grid-item">
                 <div
                   style="width: 100%;aspect-ratio: 1;"
                   class="extra-bar-wrapper"
                 >
-                                    <div class="extra-bar-item" :style="`height: ${parseInt(r1 * 100)}%;background-color:#19ca88;`"></div>
+                  <div
-                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(r1 * 100)}%);`">
+                    class="extra-bar-item"
+                    :style="`height: ${parseInt(r1 * 100)}%;background-color:#19ca88;`"
+                  ></div>
+                  <div
+                    class="extra-bar-text"
+                    :style="`height: calc(100% - ${parseInt(r1 * 100)}%);`"
+                  >
                     {{ parseInt(r1 * 100) }}
                   </div>
                 </div>
-                                <div style="font-family: 'BiaoTi';">轴套区温度</div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="jumpSensorDataLog"
+                >轴套区温度</div>
               </div>
               <div class="bottom-grid-item">
                 <div
                   style="width: 100%;aspect-ratio: 1;"
                   class="extra-bar-wrapper"
                 >
-                                    <div class="extra-bar-item" :style="`height: ${parseInt(r2 * 100)}%;background-color:#6581f0;`"></div>
+                  <div
-                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(r2 * 100)}%);`">
+                    class="extra-bar-item"
+                    :style="`height: ${parseInt(r2 * 100)}%;background-color:#6581f0;`"
+                  ></div>
+                  <div
+                    class="extra-bar-text"
+                    :style="`height: calc(100% - ${parseInt(r2 * 100)}%);`"
+                  >
                     {{ parseInt(r2 * 100) }}
                   </div>
                 </div>
-                                <div style="font-family: 'BiaoTi';">回油温度</div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'rot', '回油温度', '℃')"
+                >回油温度</div>
               </div>
               <div class="bottom-grid-item">
-                                <div id="bottomR1" style="width: 100%;aspect-ratio: 1;"></div>
+                <div
-                                <div style="font-family: 'BiaoTi';">进油压力</div>
+                  id="bottomR1"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'oip', '进油压力', 'Bar')"
+                >进油压力</div>
               </div>
               <div class="bottom-grid-item">
-                                <div id="bottomR2" style="width: 100%;aspect-ratio: 1;"></div>
+                <div
-                                <div style="font-family: 'BiaoTi';">油品粘度</div>
+                  id="bottomR2"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'ov', '油品粘度', 'Cp')"
+                >油品粘度</div>
               </div>
               <div class="bottom-grid-item">
-                                <div id="bottomR3" style="width: 100%;aspect-ratio: 1;"></div>
+                <div
-                                <div style="font-family: 'BiaoTi';">油水含量</div>
+                  id="bottomR3"
+                  style="width: 100%;aspect-ratio: 1;"
+                ></div>
+                <div
+                  style="font-family: 'BiaoTi';"
+                  @click="handleViewTendency(queryParams[1], titleMap[queryParams[1]], 'owc', '油水含量', '%')"
+                >油水含量</div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <!-- 添加或修改报警记录对话框 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="1000px"
+      append-to-body
+    >
+      <div>
+        <el-form
+          :inline="true"
+          size="small"
+        >
+          <el-form-item
+            label="油液颗粒度"
+            v-if="isPz"
+          >
+            <el-radio
+              v-model="nameKey"
+              label="pz4"
+              @change="getData"
+            >4μm</el-radio>
+            <el-radio
+              v-model="nameKey"
+              label="pz6"
+              @change="getData"
+            >6μm</el-radio>
+            <el-radio
+              v-model="nameKey"
+              label="pz14"
+              @change="getData"
+            >14μm</el-radio>
+            <el-radio
+              v-model="nameKey"
+              label="pz21"
+              @change="getData"
+            >21μm</el-radio>
+          </el-form-item>
+          <el-form-item label="时间范围">
+            <el-date-picker
+              @change="getData"
+              class="picker"
+              v-model="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="getData"
+            >搜索</el-button>
+            <el-button
+              type="primary"
+              icon="el-icon-refresh"
+              size="mini"
+              @click="resetQuery"
+            >重置</el-button>
+          </el-form-item> -->
+        </el-form>
+      </div>
+      <div
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        ref="tendencyChart"
+        style="height:500px;"
+      ></div>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="cancel">关 闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import * as echarts from "echarts";
 import { isArray, merge } from "lodash";
 import request from "@/utils/request";
+import { getTendencyData } from "@/api/ipc/dataLog";
 
 export default {
-    name: 'BigScreen',
+  name: "BigScreen",
   data() {
     return {
       l1: 0,
@@ -143,37 +340,247 @@ export default {
       r1: 0,
       r2: 0,
 
-            title1: '',
+      title1: "",
-            title2: '',
+      title2: "",
 
       timer: null,
-            queryParams: ['rtd', 'rto']
+      queryParams: ["rtd", "rto"],
-        }
+      total: 0,
+      titleMap: {
+        rtd: "R上辊传动侧",
+        rto: "R上辊操作侧",
+        rbd: "R下辊传动侧",
+        rbo: "R下辊操作侧",
+        ftd: "F上辊传动侧",
+        fto: "F上辊操作侧",
+        fbd: "F下辊传动侧",
+        fbo: "F下辊操作侧",
+      },
+      // 是否显示弹出层
+      // 遮罩层
+      loading: true,
+      datetimerange: [],
+      open: false,
+      title: "趋势图",
+      partKey: null,
+      nameKey: null,
+      part: null,
+      name: null,
+      unit: null,
+      isPz: 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]);
+            },
+          },
+        ],
+      },
+    };
   },
   mounted() {
     this.timer = setInterval(() => {
-            this.initData(this.queryParams)
+      this.initData(this.queryParams);
-        }, 1000)
+    }, 1000);
-        this.handleTypeChange(this.queryParams)
+    this.handleTypeChange(this.queryParams);
   },
   beforeDestroy() {
-        clearInterval(this.timer)
+    clearInterval(this.timer);
   },
   methods: {
-        handleTypeChange(params) {
+    // 查看趋势图谱
-            this.queryParams = params
+    handleViewTendency(partKey, part, nameKey, name, unit) {
-            const titleMap = {
+      this.open = true;
-                'rtd': 'R上辊传动侧',
+
-                'rto': 'R上辊操作侧',
+      this.partKey = partKey || this.partKey;
-                'rbd': 'R下辊传动侧',
+      this.nameKey = nameKey || this.nameKey;
-                'rbo': 'R下辊操作侧',
+      this.part = part || this.part;
-                'ftd': 'F上辊传动侧',
+      this.name = name || this.name;
-                'fto': 'F上辊操作侧',
+      this.unit = unit || this.unit;
-                'fbd': 'F下辊传动侧',
+
-                'fbo': 'F下辊操作侧'
+      if (this.name === "油液颗粒度特性") {
+        this.isPz = true;
+      } else {
+        this.isPz = false;
       }
-            this.title1 = titleMap[params[0]]
+      this.title = this.part + "-" + this.name + "趋势图";
-            this.title2 = titleMap[params[1]]
+      // 默认查询最近一小时数据
+      if (!(this.datetimerange && this.datetimerange[0])) {
+        this.datetimerange = [
+          new Date(new Date().getTime() - 3600 * 1000),
+          new Date(),
+        ];
+      }
+      this.initTendencyChart([], [], "", "");
+      this.getData();
+    },
+    getData() {
+      this.loading = true;
+      // 查询参数
+      const tendencyQueryParams = {
+        part: this.partKey,
+        param: this.nameKey,
+        startTime: this.dateToStr(this.datetimerange[0]),
+        endTime: this.dateToStr(this.datetimerange[1]),
+      };
+      getTendencyData(tendencyQueryParams).then((response) => {
+        this.loading = false;
+        this.initTendencyChart(
+          response.data.x,
+          response.data.y,
+          this.name,
+          this.unit
+        );
+      });
+    },
+    resetQuery() {
+      this.datetimerange = [
+        new Date(new Date().getTime() - 3600 * 1000),
+        new Date(),
+      ];
+      this.getData();
+    },
+    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;
+    },
+    initTendencyChart(xData, yData, name, unit) {
+      let p = new Promise((resolve) => {
+        resolve();
+      });
+      p.then(() => {
+        const chartIns = echarts.init(this.$refs.tendencyChart);
+        chartIns.setOption(
+          this.generateOptions({
+            xAxis: {
+              data: xData,
+            },
+            yAxis: { name: "单位: " + unit },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross",
+                label: {
+                  backgroundColor: "#6a7985",
+                },
+              },
+            },
+            series: [
+              {
+                name: name,
+                type: "line",
+                symbol: "none",
+                data: yData,
+              },
+            ],
+            toolbox: {
+              top: 0,
+              itemSize: 13, //工具栏 icon 的大小
+              iconStyle: {
+                color: "transparent",
+                borderColor: "#fff",
+              },
+              feature: {
+                dataZoom: {
+                  yAxisIndex: "none",
+                },
+                restore: { show: false },
+                saveAsImage: { show: false },
+              },
+            },
+            dataZoom: [
+              {
+                show: true,
+                type: "slider",
+                xAxisIndex: 0,
+                filterMode: "none",
+                start: 0,
+                end: xData.length,
+                bottom: "1%",
+                fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
+                borderColor: "#3C506B",
+              },
+              {
+                show: true,
+                type: "inside",
+                xAxisIndex: 0,
+                filterMode: "none",
+                start: 0,
+                end: 10,
+                bottom: "1%",
+                fillerColor: "rgba(167,183,204,0.4)", //选中范围的填充颜色。
+                borderColor: "#E0E6F3",
+              },
+            ],
+          }),
+          true,
+          true
+        );
+        window.addEventListener("resize", () => {
+          chartIns && chartIns.resize();
+        });
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+    },
+    handleTypeChange(params) {
+      this.queryParams = params;
+
+      this.title1 = this.titleMap[params[0]];
+      this.title2 = this.titleMap[params[1]];
     },
     initData(params = []) {
       this.getDataResponse(params).then(({ data }) => {
@@ -181,44 +588,45 @@ export default {
         // 处理传动测数据
         if (drive) {
           const { xSensorData, vx, vy, vz } = drive;
-                    this.initChart2(xSensorData, vx, vy, vz)
+          this.initChart2(xSensorData, vx, vy, vz);
 
-                    const { xPlcData, pz4, pz6, pz14, pz21 } = drive
+          const { xPlcData, pz4, pz6, pz14, pz21 } = drive;
-                    this.initChart4(xPlcData, pz4, pz6, pz14, pz21)
+          this.initChart4(xPlcData, pz4, pz6, pz14, pz21);
 
-                    const { ssat, rot, oip, ov, owc } = drive
+          const { ssat, rot, oip, ov, owc } = drive;
 
-                    this.initBottomR1(oip)
+          this.initBottomR1(oip);
-                    this.initBottomR2(ov)
+          this.initBottomR2(ov);
-                    this.initBottomR3(owc)
+          this.initBottomR3(owc);
 
-                    console.log('ssat', ssat);
+          console.log("ssat", ssat);
-                    this.r1 = ssat
+          this.r1 = ssat;
-                    this.r2 = rot
+          this.r2 = rot;
         }
         // 处理操作侧数据
         if (operation) {
           const { xSensorData, vx, vy, vz } = operation;
-                    this.initChart1(xSensorData, vx, vy, vz)
+          this.initChart1(xSensorData, vx, vy, vz);
 
           const { xPlcData, pz4, pz6, pz14, pz21 } = operation;
-                    this.initChart3(xPlcData, pz4, pz6, pz14, pz21)
+          this.initChart3(xPlcData, pz4, pz6, pz14, pz21);
 
-                    const { owc, ov, oip, rot, ssat } = operation
+          const { owc, ov, oip, rot, ssat } = operation;
-                    this.initBottomL1(owc)
+          this.initBottomL1(owc);
-                    this.initBottomL2(ov)
+          this.initBottomL2(ov);
-                    this.initBottomL3(oip)
+          this.initBottomL3(oip);
 
-                    this.l1 = rot
+          this.l1 = rot;
-                    this.l2 = ssat
+          this.l2 = ssat;
         }
-            })
+      });
     },
     initChart1(xAxis = [], vx, vy, vz) {
       const chartIns = echarts.init(document.getElementById("chart1"));
-            chartIns.setOption(this.generateOptions({
+      chartIns.setOption(
+        this.generateOptions({
           xAxis: {
-                    data: xAxis
+            data: xAxis,
           },
           yAxis: { name: "单位: ㎛" },
           tooltip: {
@@ -250,16 +658,20 @@ export default {
               data: vz,
             },
           ],
-            }), true, true);
+        }),
+        true,
+        true
+      );
       window.addEventListener("resize", () => {
         chartIns && chartIns.resize();
       });
     },
     initChart2(xAxis = [], vx, vy, vz) {
       const chartIns = echarts.init(document.getElementById("chart2"));
-            chartIns.setOption(this.generateOptions({
+      chartIns.setOption(
+        this.generateOptions({
           xAxis: {
-                    data: xAxis
+            data: xAxis,
           },
           yAxis: { name: "单位: ㎛" },
           tooltip: {
@@ -291,16 +703,20 @@ export default {
               data: vz,
             },
           ],
-            }), true, true);
+        }),
+        true,
+        true
+      );
       window.addEventListener("resize", () => {
         chartIns && chartIns.resize();
       });
     },
     initChart3(xAxis = [], pz4, pz6, pz14, pz21) {
       const chartIns = echarts.init(document.getElementById("chart3"));
-            chartIns.setOption(this.generateOptions({
+      chartIns.setOption(
+        this.generateOptions({
           xAxis: {
-                    data: xAxis
+            data: xAxis,
           },
           yAxis: { name: "单位: ㎛" },
           tooltip: {
@@ -338,16 +754,20 @@ export default {
               data: pz21,
             },
           ],
-            }), true, true);
+        }),
+        true,
+        true
+      );
       window.addEventListener("resize", () => {
         chartIns && chartIns.resize();
       });
     },
     initChart4(xAxis = [], pz4, pz6, pz14, pz21) {
       const chartIns = echarts.init(document.getElementById("chart4"));
-            chartIns.setOption(this.generateOptions({
+      chartIns.setOption(
+        this.generateOptions({
           xAxis: {
-                    data: xAxis
+            data: xAxis,
           },
           yAxis: { name: "单位: ㎛" },
           tooltip: {
@@ -385,7 +805,10 @@ export default {
               data: pz21,
             },
           ],
-            }), true, true);
+        }),
+        true,
+        true
+      );
       window.addEventListener("resize", () => {
         chartIns && chartIns.resize();
       });
@@ -728,18 +1151,22 @@ export default {
     },
     getDataResponse(params = []) {
       return request({
-                url: "/ipc/dataShow/byPart/" + params.join(','),
+        url: "/ipc/dataShow/byPart/" + params.join(","),
-                method: "get"
+        method: "get",
       });
-        }
+    },
-    }
+    // 跳转温振数据记录页面
-}
+    jumpSensorDataLog() {
+      this.$router.push("/dataLog/sensor");
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import '@/theme/index.scss';
+@import "@/theme/index.scss";
 
 @font-face {
-    font-family: 'BiaoTi';
+  font-family: "BiaoTi";
   src: url(../../../assets/biaoti.ttf);
 }
 
@@ -749,7 +1176,7 @@ export default {
   @include background_bg(homeBackgroundImage);
   background-size: 100% 100%;
   @include font_color(fontPrimary);
-    padding: .6rem;
+  padding: 0.6rem;
 
   .grid-main-wrapper {
     height: 100%;
@@ -758,7 +1185,7 @@ export default {
     grid-template-columns: repeat(4, 25%);
 
     .grid-item-wrapper {
-            padding: .4rem;
+      padding: 0.4rem;
     }
   }
 }
@@ -772,9 +1199,9 @@ export default {
   .card-big-title {
     width: 100%;
     height: 3.3rem;
-        font-family: 'BiaoTi';
+    font-family: "BiaoTi";
     text-align: center;
-        padding-top: .4rem;
+    padding-top: 0.4rem;
     font-size: 1.3rem;
     background-size: 100% 100%;
     text-shadow: 2px 2px 2px #fff;
@@ -784,11 +1211,11 @@ export default {
   .big-car-title-bg {
     width: 100%;
     height: 2.4rem;
-        margin-top: .1rem;
+    margin-top: 0.1rem;
-        font-family: 'BiaoTi';
+    font-family: "BiaoTi";
     font-size: 1rem;
     padding-left: 3.4rem;
-        padding-top: .6rem;
+    padding-top: 0.6rem;
     background-size: 100% 100%;
     @include background_bg(subBigTitleBackgroundImage);
   }
@@ -796,11 +1223,11 @@ export default {
   .card-sub-title {
     width: 100%;
     height: 2.4rem;
-        margin-top: .1rem;
+    margin-top: 0.1rem;
-        font-family: 'BiaoTi';
+    font-family: "BiaoTi";
     font-size: 1rem;
     padding-left: 3.4rem;
-        padding-top: .6rem;
+    padding-top: 0.6rem;
     background-size: 100% 100%;
     @include background_bg(subTitleBackgroundImage);
   }
@@ -846,7 +1273,7 @@ export default {
     background-color: #c1c1c142;
     width: 2rem;
     color: #eb1616;
-        font-family: 'BiaoTi';
+    font-family: "BiaoTi";
     display: flex;
     align-items: center;
     flex-direction: column-reverse;