quanyawei
2024-02-05 379ab2ceed662c2e38b7ad134189bdd4c6116ba1
src/views/onlineRate/detailBox.vue
@@ -101,7 +101,8 @@
              label-class-name="itemSpan"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.mun }}</span>{{ time }}
                <span v-if="scope.row.mun!=='-'">{{ scope.row.mun }}{{ time }}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
          </el-table>
@@ -139,30 +140,37 @@
      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().subtract(1, 'hour')
            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().subtract(1, 'hour')
            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().subtract(1, 'hour')
            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().subtract(1, 'hour')
            const end = dayjs()
            const start = dayjs().subtract(7, 'day')
            picker.$emit('pick', [new Date(start), new Date(end)])
          }
@@ -198,7 +206,6 @@
  },
  computed: {
    onlineRate () {
      console.log('///', ((this.macOnlineDetailData.pieChart2) / this.sum))
      return (this.macOnlineDetailData.pieChart2 / this.sum) * 100 || 0
    }
  },
@@ -211,15 +218,14 @@
        this.type = 'hour'
        this.lineType = 'hour'
      } else if (newValue === '分钟') {
        this.lineType = 'hour'
        this.type = 'minute'
      }
    }
  },
  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()
@@ -239,8 +245,12 @@
      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) {
@@ -311,12 +321,12 @@
          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)
        }
        console.log('this.lineType', this.lineType)
      })
    },
    renderBack () {
@@ -361,7 +371,6 @@
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            console.log(params)
            var value = params.data[0]
            let tip = params.value[1] === 1 ? '在线: ' + value : '离线: ' + value
            return tip
@@ -394,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, // 默认结束位置(百分比)
          },
@@ -434,7 +443,6 @@
          this.sData = data.map((item, index) => {
            return [ this.xData[index], item ]
          })
          console.log(this.sData)
          this.$nextTick(() => {
            this.renderLine()
          })