波形图随需求修改完善+

src/api/bridgeInfo.js

    params
  })
}
export function getSysTime(params) {
  return request({
    url: '/ajax/sys/serviceTime',
    method: 'get',
    params
  })
}
export function getMonitorByTime(params) {
  return request({
    url: '/ajax/collect/wave/server/time',
    method: 'get',
    params
  })
}
export function getTimingMonitor(params) {
  return request({
    url: '/ajax/collect/wave/curr',

src/utils/index.js

export function parseTime(startTime, flag, fa) {
  if (flag) {
    if (!fa) {
      return startTime.substring(0, 4) + '年' + startTime.substring(4, 6) + '月' + startTime.substring(6, 8) + '日 ' + startTime.substring(8, 10) + ':' + startTime.substring(10, 12)
      return startTime.substring(0, 4) + '年' + startTime.substring(4, 6) + '月' + startTime.substring(6, 8) + '日 ' + startTime.substring(8, 10) + ':' + startTime.substring(10, 12) + ':' + startTime.substring(12, 14)
    } else {
      return startTime.substring(0, 4) + '/' + startTime.substring(4, 6) + '/' + startTime.substring(6, 8) + ' ' + startTime.substring(8, 10) + ':' + startTime.substring(10, 12) + ':' + startTime.substring(12, 14)
    }

src/utils/timingConstruct.js

/**
 * Created by luyanan on 18/9/4.
 * construct monitor
 */
/* eslint-disable one-var */
import { parseTime } from '@/utils/index'
var monitorModel = {
  construct: function(mCache, $data) {
    for (let i = 0; i < $data.length; ++i) {
      if ($data[i].ctime === $data[0].ctime) {
        mCache.push({
          cid: $data[i].cid,
          cd: {
            tit: '',
            xData: [],
            seData: []
          }
        })
      }
    }
  },
  fixData: function(item, ftbegin, ftend, $daI) {
    if ($daI) {
      item.xData.push(parseTime(ftbegin, true, true))
      item.xData.push(parseTime(ftend, true, true))
      item.seData.push($daI.hvalue)
      item.seData.push($daI.lvalue)
      item.tit = $daI.cid
    } else {
      item.xData.push(parseTime(ftbegin, true, true))
      item.xData.push(parseTime(ftend, true, true))
      item.seData.push(0)
      item.seData.push(0)
    }
  },
  shiftData: function(item) {
    item.xData.shift()
    item.xData.shift()
    item.seData.shift()
    item.seData.shift()
  },
  setData: function(mCache, $data, ftbegin, ftend, maxNum) {
    if ($data.length) {
      for (let n = 0; n < mCache.length; ++n) {
        let found_c = false
        for (let m = 0; m < $data.length; ++m) {
          var tj = ($data[m].cid === mCache[n].cid && (ftbegin === $data[m].ctime))
          if (maxNum) {
            tj = ($data[m].cid === mCache[n].cid)
          }
          if (tj) {
            found_c = true
            this.fixData(mCache[n].cd, ftbegin, ftend, $data[m])
            break
          }
        }
        if (!found_c) {
          this.fixData(mCache[n].cd, ftbegin, ftend)
        }
        if (maxNum && mCache[n].cd.xData.length > maxNum) {
          this.shiftData(mCache[n].cd)
        }
      }
    } else {
      for (let k = 0; k < mCache.length; ++k) {
        this.fixData(mCache[k].cd, ftbegin, ftend)
        if (maxNum && mCache[k].cd.xData.length > maxNum) {
          this.shiftData(mCache[k].cd)
        }
      }
    }
  }
}
export default monitorModel

src/views/bridgesConsole/bridgeDanger/dangerDetail.vue

      </div>
      <el-row class="line-chart-box">
        <el-col :xs="24" :sm="24" :lg="24" v-for="(item, index) in alarmShowList" :key="item.index">
          <lineChart :chartData="item.data" :startTime="item.stime" :legendName="'传感器' + item.seq" :lineColor="index" :intervalTime="intervalTime"></lineChart>
          <lineChart :chartData="item" :lineColor="index"></lineChart>
        </el-col>
      </el-row>
      <div class="pagination-container">
</template>
<script>
import { urlParse, parseTime } from '@/utils'
import { urlParse, parseTime, turnTime } from '@/utils'
import { getDangerDetail, setUnreadToRead } from '@/api/bridgeInfo'
import lineChart from '../lineChart/LineChart'
      alarmList: [],
      pageSize: 6,
      pageNo: 1,
      intervalTime: 3 * 1000
      intervalTime: (3 * 1000) / 300
    }
  },
  components: {
    this.alarmId = urlParse('aid')
    this.alarmTit = urlParse('msg')
    this.alarmRead = urlParse('flag')
    this.alarmTime = urlParse('_t')
    this.getDangerDetail()
    if (this.alarmRead === 'false') {
      this.setUnreadToRead()
    }
  },
  computed: {
    alarmTime() {
      const alramM = this.alarmId.split('_')
      return parseTime(alramM[ alramM.length - 1], true)
    },
    alarmShowList() {
      return this.alarmList.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    }
  },
  methods: {
    getDangerDetail() {
      var that = this
      const param = {
        aid: this.alarmId
      }
      getDangerDetail(param).then(res => {
        if (res.success && res.data) {
          var rList = []
          var startTime = ''
          for (let i = 0; i < res.data.length; i++) {
            const arr = JSON.parse('[' + String(res.data[i].data.split(',')) + ']')
            res.data[i].data = arr
            startTime = parseTime(res.data[0].stime, true, true)
            var str = res.data[i].seq
            var rData = {
              tit: '',
              xData: [],
              seData: []
            }
            rList.push(rData)
            rData.tit = str
            var dataArr = JSON.parse('[' + String(res.data[i].data.split(',')) + ']')
            var timeArr = []
            for (var j = 0; j < dataArr.length; j++) {
              startTime = turnTime(new Date(+new Date(startTime) + that.intervalTime), 'time', true)
              timeArr.push(startTime)
            }
            rData.xData = timeArr
            rData.seData = dataArr
          }
          this.alarmList = res.data
          that.alarmList = rList
        }
      })
    },

src/views/bridgesConsole/bridgeDanger/dangerList.vue

        <span>报警信息</span>
      </div>
      <ul class="item-ul" v-if="dangerList.length">
        <li :class="!item.readed ? 'readed-li' : ''" v-for="item in dangerShowList" :key="item.index" @click="alarmShow(item.aid, item.readed, item.device)">
        <li :class="!item.readed ? 'readed-li' : ''" v-for="item in dangerShowList" :key="item.index" @click="alarmShow(item.aid, item.readed, item.alarmTime, item.device)">
          <span>{{item.alarmTime}}</span>
          <span>{{item.device}}，请点击查看。</span>
          <span class="svg-container" v-if="!item.readed">
        }
      })
    },
    alarmShow(id, flag, msg) {
    alarmShow(id, flag, time, msg) {
      this.$router.replace({
        name: 'dangerDetail',
        query: { aid: id, msg: msg, flag: flag }
        query: { aid: id, msg: msg, _t: time, flag: flag }
      })
    },
    handleCurrentChange(val) {

src/views/bridgesConsole/bridgeDetail/index.vue

            <el-button type="text" @click="queryDangerInfo">查看全部</el-button>
          </div>
          <ul class="item-ul" v-if="dangerList.length">
            <li :class="!item.readed ? 'readed-li' : ''" v-for="item in dangerList" :key="item.index" @click="alarmShow(item.aid, item.readed, item.device)">
            <li :class="!item.readed ? 'readed-li' : ''" v-for="item in dangerList" :key="item.index" @click="alarmShow(item.aid, item.readed, item.alarmTime, item.device)">
              <span>{{item.alarmTime}}</span>
              <span>{{item.device}}，请点击查看。</span>
              <span class="svg-container" v-if="!item.readed">
          </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">
              <lineChart2 :chartData="item" :maxXcount="maxShowLength"></lineChart2>
              <lineChart :chartData="item" :maxXcount="maxShowLength"></lineChart>
            </el-col>
          </el-row>
          <DefaultPage v-if="!monitorList.length"></DefaultPage>
import Cookies from 'js-cookie'
import queryInfo from '@/utils/queryInfo'
import queryDict from '@/utils/queryDict'
import { urlParse, parseTime, turnTime } from '@/utils'
import { getDangerList, getTimingMonitor } from '@/api/bridgeInfo'
import monModel from '@/utils/timingConstruct'
import { urlParse, parseTime } from '@/utils'
import { getDangerList, getSysTime, getMonitorByTime } from '@/api/bridgeInfo'
import lineChart2 from '../lineChart/LineChart2'
import lineChart from '../lineChart/LineChart'
import BInfoDialog01 from './components/BInfoDialog01'
import BInfoDialog02 from './components/BInfoDialog02'
import BInfoDialog03 from './components/BInfoDialog03'
export default {
  name: 'dashboard-other',
  components: {
    lineChart2,
    lineChart,
    BInfoDialog01,
    BInfoDialog02,
    BInfoDialog03,
      monitorList: [],
      currentNo: 1,
      currentSize: 4,
      currentTime: turnTime(new Date(), 'time', true),
      currentTime: '',
      sysTime: '',
      setTime: null,
      maxShowLength: 300,
      monitorCache: []
    if (this.bridgeId) {
      this.serverSeqArr = queryInfo.queryServers(this.bridgeId, true)
      if (this.serverSeqArr.length) {
        this.getTimingMonitor(this.serverSeqArr)
        this.getDangerList(this.serverSeqArr)
        this.setTime = setInterval(() => {
          this.getTimingMonitor(this.serverSeqArr)
        }, 1000)
        this.getSysTime()
        this.getDangerList()
      }
    }
  },
  methods: {
    getDangerList(arr) {
    getDangerList() {
      var arr = this.serverSeqArr
      const param = {
        seq: arr,
        pageSize: 5,
        }
      })
    },
    addData() {
      this.currentTime = turnTime(new Date(+new Date(this.currentTime) + 1000), 'time', true)
    getSysTime() {
      getSysTime().then(res => {
        if (res.success) {
          this.sysTime = 1536028430317 + (8 * 60 * 60 * 1000) + 160000
          this.first_Q = true
          this.getTimingMonitor()
        }
      })
    },
    formatTime(time) {
      var d = new Date()
      d.setTime(time)
      d = JSON.stringify(d).replace(/[^\d]/g, '').substring(0, 14)
      return d
    },
    getTimingMonitor(arr) {
    getTimingMonitor() {
      var that = this
      getTimingMonitor({ seq: arr }).then(res => {
      var preTime = 10 * 1000
      var arr = this.serverSeqArr
      var startTime = this.formatTime(this.first_Q ? (this.sysTime - preTime) : this.sysTime)
      var endTime = this.formatTime(this.sysTime)
      getMonitorByTime({ seq: arr, begin: startTime, end: endTime }).then(res => {
        var mCache = that.monitorCache
        var mList = []
        if (res.success && res.data) {
          that.addData()
          var monitorList = []
          var monitorCache = that.monitorCache
          if (monitorCache.length) {
            for (let j = 0; j < monitorCache.length; ++j) {
              let channel_found = false
              var xData = monitorCache[j].cd.xData
              var max = monitorCache[j].cd.seData.max
              var min = monitorCache[j].cd.seData.min
              for (let i = 0; i < res.data.length; i++) {
                if (monitorCache[j].cid === res.data[i].cid) {
                  channel_found = true
                  xData.push(that.currentTime)
                  max.push(res.data[i].hvalue)
                  min.push(res.data[i].lvalue)
          if (that.first_Q) {
            if (res.data.length) {
              that.first_Q = false
              var ftime = res.data[0].ctime
              monModel.construct(mCache, res.data)
              var f_q_t = that.sysTime - preTime
              for (;;) {
                var fts = that.formatTime(f_q_t)
                var ftsE = that.formatTime(f_q_t + 500)
                if (fts >= ftime) {
                  if (fts > that.sysTime) {
                    monModel.setData(mCache, res.data, fts, ftsE, null)
                  }
                }
                f_q_t += 1000
                if (f_q_t > that.sysTime) {
                  break
                }
              }
              if (!channel_found) {
                xData.push(that.currentTime)
                max.push(max[max.length - 1])
                min.push(min[min.length - 1])
              }
              if (xData.length > that.maxShowLength) {
                xData.shift()
                max.shift()
                min.shift()
              for (let l = 0; l < mCache.length; ++l) {
                mList.push(mCache[l].cd)
              }
              monitorList.push(monitorCache[j].cd)
            }
          } else {
            for (let i = 0; i < res.data.length; i++) {
              var mi = {
                cid: res.data[i].cid,
                cd: {
                  xData: [],
                  seData: {
                    max: [],
                    min: []
                  }
                }
              }
              mi.cd.xData.push(that.currentTime)
              mi.cd.seData.max.push(res.data[i].hvalue)
              mi.cd.seData.min.push(res.data[i].lvalue)
              mi.cd.tit = res.data[i].cid
              monitorCache.push(mi)
              monitorList.push(mi.cd)
            var xtime = that.formatTime(that.sysTime)
            var xtimeE = that.formatTime(that.sysTime + 500)
            monModel.setData(mCache, res.data, xtime, xtimeE, that.maxShowLength)
            for (let l = 0; l < mCache.length; ++l) {
              mList.push(mCache[l].cd)
            }
          }
          that.monitorList = monitorList
          that.monitorList = mList
          that.sysTime += 1000
          that.setTime = setTimeout(function() {
            that.getTimingMonitor()
          }, 1000)
        }
      })
    },
    handleCurrentChange(val) {
      this.currentNo = val
    },
    alarmShow(id, flag, msg) {
    alarmShow(id, flag, time, msg) {
      this.$router.replace({
        name: 'dangerDetail',
        query: { aid: id, msg: msg, flag: flag }
        query: { aid: id, msg: msg, _t: time, flag: flag }
      })
    },
    queryDangerInfo() {
    }
  },
  beforeDestroy() {
    clearInterval(this.setTime)
    clearTimeout(this.setTime)
    // clearInterval(this.setTime)
  }
}
</script>

src/views/bridgesConsole/bridgeMonitor/index.vue

            v-model="valueDate"
            type="date"
            value-format="yyyyMMdd"
            :picker-options="pickerOptions0"
            @change="changeDate">
          </el-date-picker>
          <!-- <el-date-picker
      </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" :historyM="historyM"></lineChart2>
          <lineChart :chartData="item" :historyM="historyM"></lineChart>
        </el-col>
      </el-row>
      <DefaultPage v-if="!alarmList.length"></DefaultPage>
import '@/styles/roleuser.scss'
import Cookies from 'js-cookie'
import queryInfo from '@/utils/queryInfo'
import { parseTime } from '@/utils'
import { getMonitorByDay } from '@/api/bridgeInfo'
import lineChart2 from '../lineChart/LineChart2'
import { parseTime } from '@/utils'
import lineChart from '../lineChart/LineChart'
import DefaultPage from '@/components/DefaultPage'
    return {
      historyM: true,
      bridgeId: '',
      valueDate: new Date().toISOString().substring(0, 10).replace(/-/g, ''),
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      valueDate: this.formatTime((new Date()).getTime() + ((8 - 24) * 60 * 60 * 1000)),
      dateRange: '',
      serverSeqArr: [],
      alarmList: [],
      monitorCache: [],
      pageSize: 2,
      pageNo: 1
    }
  },
  components: {
    lineChart2,
    lineChart,
    DefaultPage
  },
  computed: {
    }
  },
  methods: {
    formatTime(time) {
      var d = new Date()
      d.setTime(time)
      d = JSON.stringify(d).replace(/[^\d]/g, '').substring(0, 8)
      return d
    },
    getMonitorByDay() {
      var that = this
      var date = that.valueDate
      var arr = this.serverSeqArr
      var param = {
        seq: arr,
        day: date
      }
      getMonitorByDay(param).then(res => {
      getMonitorByDay({ seq: arr, day: date }).then(res => {
        if (res.success && res.data) {
          var monitorList = []
          for (let i = 0; i < res.data.length; i++) {
            }
            if (!monitorData) {
              monitorData = {
                tit: '',
                xData: [],
                seData: {
                  max: [],
                  min: []
                }
                seData: []
              }
              monitorList.push(monitorData)
              monitorData.tit = str
            }
            monitorData.xData.push(parseTime(res.data[i].ctime, true, true))
            monitorData.seData.max.push(res.data[i].hvalue)
            monitorData.seData.min.push(res.data[i].lvalue)
            monitorData.xData.push(parseTime(res.data[i].ctime, true, true).substring(11, 19))
            monitorData.xData.push(parseTime(res.data[i].ctime, true, true).substring(11, 19))
            monitorData.seData.push(res.data[i].hvalue)
            monitorData.seData.push(res.data[i].lvalue)
          }
          that.alarmList = monitorList
          console.log(that.alarmList)
        }
      })
    },
    changeDate(val) {
      this.valueDate = val
      this.getMonitorByDay()
      if (this.serverSeqArr.length) {
        this.getMonitorByDay()
      }
    },
    handleCurrentChange(val) {
      this.pageNo = val

src/views/bridgesConsole/lineChart/LineChart.vue

<script>
import echarts from 'echarts'
import { parseTime, turnTime } from '@/utils'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
    },
    height: {
      type: String,
      default: '260px'
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array
      type: Object
    },
    legendName: {
      type: String
    },
    startTime: {
      type: String
    },
    intervalTime: {
    maxXcount: {
      type: Number
    },
    historyM: { // 判断是否需要坐标轴上的滚动条
      type: Boolean
    }
  },
  data() {
    return {
      lineColorNow: this.lineColor % 2 === 0 ? '#FF005A' : '#3888fa',
      Ydate: [],
      nowTime: parseTime(this.startTime, true, true),
      chart: null
    }
  },
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    }
    // 监听侧边栏的变化
    // const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    // sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      window.removeEventListener('resize', this.__resizeHanlder)
    }
    // const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    // sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
    }
  },
  methods: {
    addData() {
      this.Ydate.push(this.nowTime)
      this.nowTime = turnTime(new Date(+new Date(this.nowTime) + this.intervalTime), 'time', true)
    },
    setOptions(datastr) {
      this.chart.setOption({
        xAxis: {
          data: this.Ydate,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        title: {
          text: '传感器' + datastr.tit,
          textStyle: {
            color: '#333',
            fontSize: 14
          },
          top: '0'
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          top: 60,
          containLabel: true
        },
        tooltip: {
          },
          padding: [5, 10]
        },
        xAxis: {
          data: datastr.xData,
          max: this.maxXcount // x轴最多显示个数
        },
        yAxis: {
          // name: '豪伏(-8192-8192)',
          axisTick: {
            show: false
          }
          name: '毫伏(mv)',
          type: 'value'
        },
        legend: {
          data: [this.legendName]
          data: ['波动值']
        },
        series: [{
          name: this.legendName, itemStyle: {
          name: '波动值', itemStyle: {
            normal: {
              color: this.lineColorNow,
              lineStyle: {
          },
          smooth: true,
          type: 'line',
          data: datastr,
          data: datastr.seData,
          animationDuration: 2800,
          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() {
      for (var i = 1; i < this.chartData.length; i++) {
        this.addData()
      }
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
      var that = this
      setTimeout(function() {
        that.setOptions(that.chartData)
      }, 1)
    }
  }
}

src/views/bridgesConsole/lineChart/LineChart2.vue

<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
    },
    maxXcount: {
      type: Number
    },
    historyM: { // 判断是否需要坐标轴上的滚动条
      type: Boolean
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHanlder)
    }
    this.chart.dispose()
    this.chart = null
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  methods: {
    setOptions(datastr) {
      this.chart.setOption({
        title: {
          text: '传感器' + datastr.tit,
          textStyle: {
            color: '#333',
            fontSize: 14
          },
          left: 16
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 50,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        xAxis: {
          data: datastr.xData,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          max: this.maxXcount // x轴最多显示个数
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} mv'
          },
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['最大值', '最小值']
        },
        series: [{
          name: '最大值', itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: datastr.seData.max,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }, {
          name: '最小值', itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: datastr.seData.min,
          animationDuration: 2800,
          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')
      this.setOptions(this.chartData)
    }
  }
}
</script>