实时监控显示、历史监测进度条

src/api/bridgeInfo.js

// 监测信息
export function getMonitorByDay(params) {
  return request({
    url: '/ajax/collect/wave/server/day',
    url: '/ajax/collect/wave/server/dayTime',
    method: 'get',
    params
  })

src/views/bridgesConsole/bridgeDetail/index.vue

        <el-card class="box-card block-group">
          <div slot="header" class="block-title">
            <span>实时监测</span>
            <el-button v-if="serverSeqArr.length" type="text" @click="updateDataList">刷新</el-button>
          </div>
          <el-row class="line-chart-box" v-if="monitorList.length">
            <el-col :xs="24" :sm="24" :lg="24" v-for="item in monitorShowList" :key="item.index">
    if (this.bridgeId) {
      this.serverSeqArr = queryInfo.queryServers(this.bridgeId, true)
      if (this.serverSeqArr.length) {
        this.getSysTime()
        this.getDangerList()
        this.updateDataList()
      }
    }
  },
  methods: {
    updateDataList() {
      this.monitorList = []
      this.monitorCache = []
      this.getSysTime()
      this.getDangerList()
    },
    getDangerList() {
      var arr = this.serverSeqArr
      const param = {
        if (res.success && res.data && res.data.length > 0) {
          // that.sysTime = res.data + that.eastEightDistrict - (5 * 60 * 1000)
          const nowt = parseTime(res.data[0].ctime, true, true)
          that.sysTime = (new Date(nowt)).getTime() + that.eastEightDistrict - 2 * 60 * 1000
          that.sysTime = (new Date(nowt)).getTime() + that.eastEightDistrict - 10 * 1000
          const localTime = new Date().getTime() + that.eastEightDistrict
          that.localTimeiv = localTime - that.sysTime
          that.first_Q = true

src/views/bridgesConsole/bridgeMonitor/index.vue

    <el-card class="box-card block-group">
      <div slot="header" class="block-title">
          <el-date-picker
            style="width: 200px;margin-right:15px"
            v-model="valueDate"
            :editable="false"
            type="date"
            value-format="yyyyMMdd"
            :picker-options="pickerOptions0"
            @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-select v-model="TimeVal">
            <el-option
              v-for="item in optionsTime"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @change="changeTimeRange">
            </el-option>
          </el-select>
          <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">
      <el-row class="line-chart-box">
        <el-col :xs="24" :sm="24" :lg="24" v-for="item in alarmShowList" :key="item.index" v-if="alarmList.length">
          <lineChart :chartData="item" :historyM="historyM"></lineChart>
        </el-col>
        <div class="progress-box" v-if="progressShow">
          <span>正在加载 {{proBar}}%</span>
          <el-progress :text-inside="true" :stroke-width="18" :percentage="proBar"></el-progress>
        </div>
      </el-row>
      <DefaultPage v-if="!alarmList.length"></DefaultPage>
      <DefaultPage v-if="!alarmList.length && !progressShow"></DefaultPage>
      <div class="pagination-container">
        <el-pagination
          background
import lineChart from '../lineChart/LineChart'
import DefaultPage from '@/components/DefaultPage'
import NProgress from 'nprogress'
export default {
  data() {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      valueDate: this.formatTime((new Date()).getTime() + ((8 - 24) * 60 * 60 * 1000)),
      dateRange: '',
      valueDate: this.formatTime(Date.now() - 8.64e7).substring(0, 8),
      TimeVal: '000000',
      optionsTime: [],
      serverSeqArr: [],
      alarmList: [],
      monitorCache: [],
      pageSize: 2,
      pageNo: 1
      pageNo: 1,
      progressShow: false,
      proBar: 0
    }
  },
  components: {
  },
  created() {
    this.bridgeId = Cookies.get('bridgeId')
    this.optionsCreat()
    this.serverSeqArr = queryInfo.queryServers(this.bridgeId, true)
    if (this.serverSeqArr.length) {
      this.getMonitorByDay()
    }
  },
  methods: {
    optionsCreat() {
      for (let i = 0; i < 24; i++) {
        var num = (i < 10 ? ('0' + i) : i)
        var oPt = {
          value: `${num}0000`,
          label: `${num}:00:00 - ${num}:59:59`
        }
        this.optionsTime.push(oPt)
      }
    },
    formatTime(time) {
      var d = new Date()
      d.setTime(time)
      d = JSON.stringify(d).replace(/[^\d]/g, '').substring(0, 8)
      d = JSON.stringify(d).replace(/[^\d]/g, '')
      return d
    },
    changeProgress() {
      var that = this
      var clearInt = setInterval(function() {
        that.proBar = that.proBar + parseInt((Math.random() * 10), 10)
        if (that.proBar >= 84) {
          that.proBar = 84
          clearInterval(clearInt)
        }
      }, 1000 * Math.random())
    },
    getMonitorByDay() {
      this.progressShow = true
      NProgress.start()
      var that = this
      var date = that.valueDate
      that.proBar = 0
      that.alarmList = []
      that.changeProgress()
      var sDate = that.valueDate + that.TimeVal
      var sDateForm = (new Date(parseTime(sDate, true, true))).getTime()
      var eDate = that.formatTime(sDateForm + 8 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000).substring(0, 14)
      var arr = this.serverSeqArr
      getMonitorByDay({ seq: arr, day: date }).then(res => {
      getMonitorByDay({ seq: arr, begin: sDate, end: eDate }).then(res => {
        NProgress.inc()
        if (res.success && res.data) {
          this.progressShow = false
          var monitorList = []
          for (let i = 0; i < res.data.length; i++) {
            var str = res.data[i].cid
    },
    changeDate(val) {
      this.valueDate = val
      if (this.serverSeqArr.length) {
        this.getMonitorByDay()
      }
    },
    changeTimeRange(val) {
      this.TimeVal = val
    },
    handleCurrentChange(val) {
      this.pageNo = val
    margin-left: 15px;
  }
}
.progress-box{
  width: 400px;
  padding: 80px;
  margin: auto;
  text-align: center;
  line-height: 40px;
  color:#999;
  font-size:13px;
}
</style>

src/views/bridgesConsole/lineChart/LineChart.vue

        },
        yAxis: {
          type: 'value',
          max: 8191,
          min: -8192
          max: 9000,
          min: -9000
        },
        legend: {
          data: ['信号值']
          dataZoom: [
            {
              type: 'slider',
              xAxisIndex: 0,
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              xAxisIndex: 0,
              xAxisIndex: [0],
              start: 0,
              end: 100
            },
            {
              type: 'slider',
              yAxisIndex: 0,
              show: true,
              yAxisIndex: [0],
              start: 0,
              end: 100
            },
            {
              type: 'inside',
              yAxisIndex: 0,
              yAxisIndex: [0],
              start: 0,
              end: 100
            }