fix:断线监控

quanyawei

2024-02-01 500ddf6571e656f33ef7fe10c570f6345344c989

fix:断线监控

 src/views/onlineRate/detailBox.vue

@@ -35,6 +35,7 @@
              value-format="yyyy-MM-dd HH:mm"
              :default-date="[macDate.startTime, macDate.endTime]"
              :picker-options="pickerOptions"
              align="right"
              @change="changeDay"
            />
          </el-form-item>
@@ -43,7 +44,7 @@
      <div>
        <div class="tit">
          <p style="font-size:16px">
            {{ macOnlineDetailData.code }}%
            共<span class="greenClor">{{ sum }}</span>{{ time }}，在线 <span class="greenClor">{{ macOnlineDetailData.pieChart2 }}</span>{{ time }}，在线率<span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate.toFixed(2) }}%</span>
          </p>
          <div id="myPieChart" />
        </div>
@@ -98,7 +99,11 @@
              label="离线时长"
              align="center"
              label-class-name="itemSpan"
            />
            >
              <template slot-scope="scope">
                <span>{{ scope.row.mun }}</span>{{ time }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
@@ -117,6 +122,7 @@
  data () {
    return {
      title: '详情',
      sum: '',
      formInline: {},
      macOnlineDetailData: {},
      time: '小时',
@@ -132,6 +138,35 @@
      // 重点

      pickerOptions: {
        shortcuts: [{
          text: '近1天',
          onClick (picker) {
            const end = dayjs().subtract(1, 'hour')
            const start = dayjs().subtract(1, 'day')
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
        }, {
          text: '近3天',
          onClick (picker) {
            const end = dayjs().subtract(1, 'hour')
            const start = dayjs().subtract(3, 'day')
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
        }, {
          text: '近5天',
          onClick (picker) {
            const end = dayjs().subtract(1, 'hour')
            const start = dayjs().subtract(5, 'day')
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
        }, {
          text: '近7天',
          onClick (picker) {
            const end = dayjs().subtract(1, 'hour')
            const start = dayjs().subtract(7, 'day')
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
        }],
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime()
@@ -161,13 +196,22 @@
      }
    }
  },
  computed: {
    onlineRate () {
      console.log('///', ((this.macOnlineDetailData.pieChart2) / this.sum))
      return (this.macOnlineDetailData.pieChart2 / this.sum) * 100 || 0
    }
  },
  watch: {
    time (newValue, oldValue) {
      if (newValue === '天') {
        this.type = 'day'
        this.lineType = 'day'
      } else if (newValue === '小时') {
        this.type = 'hour'
        this.lineType = 'hour'
      } else if (newValue === '分钟') {
        this.lineType = 'hour'
        this.type = 'minute'
      }
    }
@@ -200,23 +244,34 @@
      }
    },
    initPieChart (pieChartData) {
      let that = this
      let percent = null
      let labelData = {
        show: false,
      }
      if (pieChartData[0] > 0) {
        labelData = {
          show: true,
          position: 'left',
          normal: {
            formatter: function (params) {
              console.log('params22', params)
              let onlineType = params.dataIndex === 0 ? '离线' : '在线'
              return `${onlineType}: ${params.value}`
            },
            fontSize: 14, // 标签字体大小
            fontStyle: 'italic', // 标签字体斜体
        show: true,
        position: 'right',
        alignTo: 'edge',
        margin: 0,
        normal: {
          formatter: function (params) {
            percent = params.percent
            let onlineType = params.dataIndex === 0 ? '离线' : '在线'
            return `${onlineType}{a|${params.value}}${that.time}:{b|${params.percent}%}`
          },
        }
          fontSize: 14, // 标签字体大小
          fontStyle: 'italic', // 标签字体斜体
          rich: { // 在rich中对两个标识进行样式修改
            a: {
              fontSize: 14,
              fontStyle: 'italic',
              color: '#67c23a'
            },
            b: {
              fontSize: 14,
              fontStyle: 'italic',
              color: percent !== 0 ? '#67c23a' : 'red'
            },
          }
        },
      }
      let dom = document.getElementById('myPieChart')
      let myChart = echarts.init(dom)
@@ -237,19 +292,21 @@
        series: [
          {
            radius: 30,
            center: ['30%', '50%'],
            center: ['50%', '50%'],
            type: 'pie',
            data: pieChartData,
            label: labelData,
            labelLayout: {
              hideOverlap: false
            }
          },
        ],
      }, true)
    },
    initChart (myChart, option, dom) {
      myChart.setOption(option)
      if (this.lineType === 'hour') {
        myChart.on('click', (params) => {
          console.log(params)
      myChart.on('click', (params) => {
        if (this.lineType === 'hour') {
          this.lineType = 'minute'
          echarts.dispose(dom)
          var myChart = echarts.init(dom)
@@ -258,8 +315,9 @@
          let endTiem = dayjs(starTiem).add(1, 'hour')
          this.getLineData(dayjs(starTiem).format('YYYY-MM-DD  HH:mm:ss'), dayjs(endTiem).format('YYYY-MM-DD  HH:mm:ss'), 'minute')
          myChart.setOption(option, true)
        })
      }
        }
        console.log('this.lineType', this.lineType)
      })
    },
    renderBack () {
      this.lineType = 'hour'
@@ -278,13 +336,10 @@
    },
    getOption (xData, sData) {
      let option = null
      let minTime = xData[0]
      let maxTime = xData[xData.length]
      let interval = 3600 * 1000
      if (this.type === 'minute') {
        interval = 60 * 1000
      }
      console.log(minTime, maxTime)
      option = {
        grid: {
          left: '40px', // 左侧内边距
@@ -308,7 +363,7 @@
          formatter: function (params) {
            console.log(params)
            var value = params.data[0]
            let tip = params.value === 1 ? '在线: ' + value : '离线: ' + value
            let tip = params.value[1] === 1 ? '在线: ' + value : '离线: ' + value
            return tip
          },
        },
@@ -401,6 +456,7 @@
      })
        .then(res => {
          this.macOnlineDetailData = res.data
          this.sum = res.data.sum
          this.tableData = res.data.tabulation
          let pieChartData = [this.macOnlineDetailData.pieChart1, this.macOnlineDetailData.pieChart2]
          this.initPieChart(pieChartData)
@@ -436,7 +492,7 @@
}
  #myPieChart {
    height: 120px;
    width: 400px!important;
    width: 600px!important;
    canvas {
      width: 100%!important;
    }
@@ -459,4 +515,10 @@
    top: -40px;
  }
}
.redClor{
  color: red;
}
.greenClor{
  color:#67c23a;
}
</style>

 src/views/onlineRate/index.vue

@@ -19,9 +19,9 @@
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态:">
        <el-form-item label="小时状态:">
          <el-select
            v-model="formInline.state"
            v-model="formInline.hourState"
            clearable
            placeholder="选择状态"
          >
@@ -69,7 +69,7 @@
      </el-form>
    </div>
    <div>
      <p>当前设备共{{ tableData.length }}台，在线 {{ onlineData }}台，在线率 <span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate }}%</span></p>
      <p>实时在线率：共<span class="greenClor">{{ tableData.length }}</span>台，在线<span class="greenClor">{{ onlineData }}</span>台，在线率 <span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate }}%</span></p>
      <div>
        <el-table
          v-loading="loading"
@@ -131,7 +131,11 @@
            label="在线率"
            width="100px"
            align="center"
          />
          >
            <template slot-scope="scope">
              <span :class=" scope.row.onlineRate<90 ?'redClor':'greenClor'">{{ scope.row.onlineRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="onlineTime"
            label-class-name="itemSpan"
@@ -140,15 +144,15 @@
            align="center"
          />
          <el-table-column
            prop="state"
            prop="hourState"
            label-class-name="itemSpan"
            label="状态"
            width="80px"
            label="小时状态"
            width="90px"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.state === '0'"
                v-if="scope.row.hourState === '0'"
                style="color:red;font-size:15px"
                type="text"
              >
@@ -195,6 +199,7 @@
<script>
import dayjs from 'dayjs'
import detailBox from '@/views/onlineRate/detailBox'
import _ from 'lodash'
export default {
  components: {
    detailBox
@@ -203,6 +208,8 @@
    return {
      formInline: {
        organizationId: '',
        hourState: '',
        state: '',
        startTime: dayjs().startOf('day').format('YYYY-MM-DD  HH:mm'),
        endTime: dayjs().subtract(1, 'hour').format('YYYY-MM-DD  HH:mm')
      },
@@ -290,12 +297,16 @@
    handleDetail (row) {
      console.log(row)
      this.handleShow = true
      this.macDate = row
      this.macDate = _.cloneDeep(row)
      this.macDate.startTime = this.formInline.startTime
      this.macDate.endTime = this.formInline.endTime
    },
    handleSearch () {
      if (this.formInline.organizationId !== '') {
        if (this.time === '今天') {
          this.formInline.startTime = dayjs().startOf('day').format('YYYY-MM-DD  HH:mm')
          this.formInline.endTime = dayjs().subtract(1, 'hour').format('YYYY-MM-DD  HH:mm')
        }
        this.loading = true
        this.$request({
          url: '/onlineRate/page',
@@ -305,7 +316,7 @@
          }
        })
          .then(res => {
            this.tableData = res.data
            this.tableData = res.data || []
            this.loading = false
          })
          .catch(err => {