页面

wps-ui/src/views/dataQuery/realTimeQuery/realTP/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div class="block">
+        <div class="conOne">
+          <span class="demonstration">时间：</span>
+          <el-date-picker
+            v-model="dataTime"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']">
+          </el-date-picker>
+        </div>
+        <div class="conOne">
+          <span>设备：</span>
+          <el-select v-model="eqNo" placeholder="请选择">
+            <el-option
+              v-for="item in equipmentAllInfo"
+              :key="item.no"
+              :label="item.name"
+              :value="item.no">
+            </el-option>
+          </el-select>
+        </div>
+        <el-button :loading="btuLoading" class="myButton" type="primary" icon="el-icon-search">搜索
+        </el-button>
+      </div>
+      <div id="tpCharts"/>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {infoList} from "@/api/biz/dataQuery/weatherLook";
+
+export default {
+  name: "index",
+  data() {
+    return {
+      loading: false,
+      btuLoading: false,
+      //时间控件
+      dataTime: [new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000, new Date(new Date().toLocaleDateString()).getTime()],
+      eqNo: '',
+      equipmentAllInfo: []
+    }
+  },
+  mounted() {
+    this.getWeatherLook()
+  },
+  methods: {
+    getWeatherLook() {
+      infoList().then(res => {
+        this.equipmentAllInfo = res.data
+        this.eqNo = this.equipmentAllInfo[0].weatherLookNo
+        let time = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
+        this.draw(time,[],[])
+      }).catch(err => {
+        console.log('获取环境检测仪异常' + err)
+      })
+    },
+    draw(time,t,pa) {
+      let myChart = this.$echarts.init(document.getElementById('tpCharts'));
+      let option = {
+        title: {
+          text: '温度和气压时间折线图',
+        },
+        legend: [{
+          top: "0%",
+          left: "45%",
+          data: [{name: "温度"}]
+        }, {
+          top: "0%",
+          left: "50%",
+          data: [{name: "压强"}]
+        }],
+        grid: {
+          // top: '17%',
+          left: '3%',
+          right: '2%',
+          // bottom: '8%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        dataZoom: [
+          {
+            show: true,
+          },
+          {
+            type: 'inside',
+            realtime: true
+          }
+        ],
+        xAxis: {
+          name: '时间',
+          type: 'category',
+          axisTick: {alignWithLabel: true},
+          nameLocation: 'center',
+          nameGap: 25,
+          data: time
+        },
+        yAxis: [{
+          type: 'value',
+          name: '温度(°C)',
+          alignTicks: true,
+          axisLine: {
+            show: true
+          }
+          // max: 50,
+          // interval: 10,
+          // max: value => {
+          //   this.max = value.max;
+          //   return (value.max * 1.5).toFixed(0); // 乘的目的是不想让图表顶到最顶部
+          // },
+          // min: value => {
+          //   this.min = value.min;
+          //   let min = value.min < 0 ? value.min * 1.2 : value.min * 0.8
+          //   return min.toFixed(0);
+          // },
+        }, {
+          type: 'value',
+          alignTicks: true,
+          name: '压强(hpa)',
+          axisLine: {
+            show: true
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dotted'
+            }
+          },
+          // max: value => (value.max * 1.001).toFixed(0),
+          // min: value => (value.min * 0.998).toFixed(0),
+        }],
+        series: [{
+          name: "温度",
+          type: "line",
+          color: ["#eb9f0d"],
+          symbol: "none",
+          smooth: true,
+          data: t
+        },
+          {
+            name: "压强",
+            type: "line",
+            color: ["#969ac7"],
+            symbol: "none",
+            smooth: true,
+            yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
+            data: pa
+          }
+        ]
+      }
+      option && myChart.setOption(option);
+    },
+  }
+}
+</script>
+
+<style scoped>
+.block {
+  display: flex;
+}
+
+.conOne, .myButton {
+  margin-left: .5%;
+}
+
+#tpCharts{
+  margin-top: 1%;
+  width: 100%;
+  height: calc(70vh);
+}
+</style>