fix:bug修复

quanyawei

2024-02-05 379ab2ceed662c2e38b7ad134189bdd4c6116ba1

 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,12 @@
              label="离线时长"
              align="center"
              label-class-name="itemSpan"
            />
            >
              <template slot-scope="scope">
                <span v-if="scope.row.mun!=='-'">{{ scope.row.mun }}{{ time }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
@@ -117,6 +123,7 @@
  data () {
    return {
      title: '详情',
      sum: '',
      formInline: {},
      macOnlineDetailData: {},
      time: '小时',
@@ -132,6 +139,42 @@
      // 重点

      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            const end = dayjs()
            const start = new Date(dayjs().startOf('day'))
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
        }, {
          text: '近1天',
          onClick (picker) {
            const end = dayjs()
            const start = dayjs().subtract(1, 'day')
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
        }, {
          text: '近3天',
          onClick (picker) {
            const end = dayjs()
            const start = dayjs().subtract(3, 'day')
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
        }, {
          text: '近5天',
          onClick (picker) {
            const end = dayjs()
            const start = dayjs().subtract(5, 'day')
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
        }, {
          text: '近7天',
          onClick (picker) {
            const end = dayjs()
            const start = dayjs().subtract(7, 'day')
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
        }],
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime()
@@ -161,12 +204,19 @@
      }
    }
  },
  computed: {
    onlineRate () {
      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.type = 'minute'
      }
@@ -174,8 +224,8 @@
  },
  mounted () {
    this.title = `${this.macDate.name}详情`
    this.startTime = this.macDate.startTime
    this.endTime = this.macDate.endTime
    this.startTime = dayjs(this.macDate.startTime).format('YYYY-MM-DD  HH:mm')
    this.endTime = dayjs(this.macDate.endTime).format('YYYY-MM-DD  HH:mm')
    this.$set(this.selectTime, 0, new Date(this.macDate.startTime))
    this.$set(this.selectTime, 1, new Date(this.macDate.endTime))
    this.getLineData()
@@ -195,28 +245,43 @@
      this.startTime = !this.selectTime ? '' : dayjs(this.selectTime[0]).format('YYYY-MM-DD  HH:mm')
      this.endTime = !this.selectTime ? '' : dayjs(this.selectTime[1]).format('YYYY-MM-DD  HH:mm')
      this.getMacDetail()
      if (this.type !== 'minute') {
        this.getLineData()
      if (this.type === 'minute') {
        this.lineType = 'hour'
        this.getLineData(this.startTime, this.endTime, 'hour')
      } else {
        this.lineType = this.type
        this.getLineData(this.startTime, this.endTime, this.type)
      }
    },
    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,29 +302,32 @@
        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)
          let starTiem = params.data[0]
          console.log('starTiem', dayjs(starTiem).format('YYYY.MM.DD  HH:mm:ss'))
          let endTiem = dayjs(starTiem).add(1, 'hour')
          let data = dayjs(starTiem).add(1, 'hour')
          let endTiem = dayjs(data).isAfter(dayjs()) ? dayjs() : data
          console.log('.isAfter(now)', dayjs(endTiem).isAfter(dayjs()))
          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)
        })
      }
        }
      })
    },
    renderBack () {
      this.lineType = 'hour'
@@ -278,13 +346,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', // 左侧内边距
@@ -306,9 +371,8 @@
        tooltip: {
          trigger: 'item',
          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
          },
        },
@@ -339,7 +403,7 @@
            height: 20, // 时间滚动条的高度
            type: 'slider', // type的作用是指定数据缩放的类型，slider表示使用滑动条进行缩放，inside表示使用鼠标滚轮进行缩放。
            xAxisIndex: 0, // 作用在x轴的下标（因为x轴可以有多个）
            filterMode: 'filter', // 间滚动条的过滤模式,'filter'表示滑动时间条时会直接过滤掉不在时间范围内的数据，'weakFilter'表示滑动时间条时会逐渐过滤掉不在时间范围内的数据。
            filterMode: 'weakFilter', // 间滚动条的过滤模式,'filter'表示滑动时间条时会直接过滤掉不在时间范围内的数据，'weakFilter'表示滑动时间条时会逐渐过滤掉不在时间范围内的数据。
            start: 0, // 默认开始位置（百分比）
            end: 100, // 默认结束位置（百分比）
          },
@@ -379,7 +443,6 @@
          this.sData = data.map((item, index) => {
            return [ this.xData[index], item ]
          })
          console.log(this.sData)
          this.$nextTick(() => {
            this.renderLine()
          })
@@ -401,6 +464,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 +500,7 @@
}
  #myPieChart {
    height: 120px;
    width: 400px!important;
    width: 600px!important;
    canvas {
      width: 100%!important;
    }
@@ -459,4 +523,10 @@
    top: -40px;
  }
}
.redClor{
  color: red;
}
.greenClor{
  color:#67c23a;
}
</style>