历史监控

src/views/bridgesConsole/bridgeMonitor/index.vue

@@ -8,11 +8,19 @@
            value-format="yyyyMMdd"
            @change="changeDate">
          </el-date-picker>
          <!-- <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            align="right"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00', '08:00:00']">
          </el-date-picker> -->
          <el-button type="primary" @click="getMonitorByDay">查询</el-button>
      </div>
      <el-row class="line-chart-box" v-if="alarmList.length">
        <el-col :xs="24" :sm="24" :lg="24" v-for="item in alarmShowList" :key="item.index">
          <lineChart2 :chartData="item"></lineChart2>
          <lineChart2 :chartData="item" :historyM="historyM"></lineChart2>
        </el-col>
      </el-row>
      <DefaultPage v-if="!alarmList.length"></DefaultPage>
@@ -44,8 +52,10 @@ import DefaultPage from '@/components/DefaultPage'
export default {
  data() {
    return {
      historyM: true,
      bridgeId: '',
      valueDate: new Date().toISOString().substring(0, 10).replace(/-/g, ''),
      dateRange: '',
      serverSeqArr: [],
      alarmList: [],
      pageSize: 2,
@@ -105,6 +115,7 @@ export default {
            monitorData.seData.min.push(res.data[i].lvalue)
          }
          that.alarmList = monitorList
          console.log(that.alarmList)
        }
      })
    },

src/views/bridgesConsole/lineChart/LineChart2.vue

@@ -30,6 +30,9 @@ export default {
    },
    maxXcount: {
      type: Number
    },
    historyM: { // 判断是否需要坐标轴上的滚动条
      type: Boolean
    }
  },
  data() {
@@ -82,7 +85,7 @@ export default {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          top: 50,
          containLabel: true
        },
        tooltip: {
@@ -144,6 +147,35 @@ export default {
          animationEasing: 'cubicInOut'
        }]
      })
      if (this.historyM) {
        this.chart.setOption({
          dataZoom: [
            {
              type: 'slider',
              show: true,
              start: 94,
              end: 100,
              handleSize: 8
            },
            {
              type: 'inside',
              start: 94,
              end: 100
            },
            {
              type: 'slider',
              show: true,
              yAxisIndex: 0,
              filterMode: 'empty',
              width: 12,
              height: '70%',
              handleSize: 8,
              showDataShadow: false,
              left: '98%'
            }
          ]
        })
      }
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')