fix:断线统计修改

quanyawei

2024-03-07 39880bb3cd54d412a0ed8f73f0c82005dbbbee44

 src/views/onlineRate/index.vue

@@ -7,7 +7,7 @@
        class="demo-form-inline"
      >
        <el-form-item label="选择组织:">
          <el-select
          <!-- <el-select
            v-model="formInline.organizationId"
            placeholder="选择组织"
          >
@@ -17,7 +17,16 @@
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          </el-select> -->
          <el-cascader
            ref="cascader"
            :show-all-levels="false"
            :options="orgData"
            collapse-tags
            :props="props"
            clearable
            @change="changeCascader"
          />
        </el-form-item>
        <el-form-item>
          <el-radio-group
@@ -36,10 +45,12 @@
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            :clearable="false"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-date="[selectTime[0], selectTime[1]]"
            :picker-options="pickerOptions"
            @change="changeDay"
            @change="changeDay()"
          />
        </el-form-item>
        <el-form-item label="小时状态:">
@@ -69,7 +80,7 @@
      </el-form>
    </div>
    <div>
      <p>实时在线率：共<span class="greenClor">{{ tableData.length }}</span>台，在线<span class="greenClor">{{ onlineData }}</span>台，在线率 <span :class=" onlineRate<90 ?'redClor':'greenClor'">{{ onlineRate }}%</span></p>
      <p>实时在线率：共<span class="greenClor">{{ macOnlineData.sum }}</span>台，在线<span class="greenClor">{{ macOnlineData.online }}</span>台，在线率 <span :class="Number(macOnlineData.onlineRate)<90 ?'redClor':'greenClor'">{{ macOnlineData.onlineRate }}%</span></p>
      <div>
        <el-table
          v-loading="loading"
@@ -207,16 +218,18 @@
  data () {
    return {
      formInline: {
        organizationId: '',
        macs: [],
        hourState: '',
        state: '',
        startTime: dayjs().startOf('day').format('YYYY-MM-DD  HH:mm'),
        endTime: dayjs().subtract(1, 'hour').format('YYYY-MM-DD  HH:mm')
        startTime: '',
        endTime: ''
      },
      time: '今天',
      selectTime: '',
      selectTime: [],
      macDate: {},
      macOnlineData: {},
      orgData: [],
      props: { multiple: true, label: 'name', value: 'id', children: 'monitorPoint' },
      tableData: [],
      handleShow: false,
      loading: false,
@@ -259,55 +272,88 @@
      return this.tableData.filter(item => item.state !== '0').length || 0
    },
    onlineRate () {
      return Math.floor((this.onlineData / this.tableData.length) * 100) || 0
      return (this.onlineData / this.tableData.length) * 100 || 0
    }
  },
  watch: {
    time (newValue, oldValue) {
      let now = dayjs() // 获取当前时间
      if (newValue === '近1天') {
        this.selectTime = []
        this.$set(this.selectTime, 0, new Date(now.subtract(1, 'day').format('YYYY-MM-DD  HH:mm')))
        this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD  HH:mm')))
        this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD  HH:mm')
        this.formInline.startTime = now.subtract(1, 'day').format('YYYY-MM-DD  HH:mm') // 获取昨天的零点
      } else if (newValue === '近3天') {
        this.selectTime = []
        this.$set(this.selectTime, 0, new Date(now.subtract(3, 'day').format('YYYY-MM-DD  HH:mm')))
        this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD  HH:mm')))
        this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD  HH:mm')
        this.formInline.startTime = now.subtract(3, 'day').format('YYYY-MM-DD  HH:mm') // 获取前天的零点
      } else if (newValue === '近5天') {
        this.selectTime = []
        this.$set(this.selectTime, 0, new Date(now.subtract(5, 'day').format('YYYY-MM-DD  HH:mm')))
        this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD  HH:mm')))
        this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD  HH:mm')
        this.formInline.startTime = now.subtract(5, 'day').format('YYYY-MM-DD  HH:mm') // 获取前天的零点
      } else if (newValue === '近7天') {
        this.selectTime = []
        this.$set(this.selectTime, 0, new Date(now.subtract(7, 'day').format('YYYY-MM-DD  HH:mm')))
        this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD  HH:mm')))
        this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD  HH:mm')
        this.formInline.startTime = now.subtract(7, 'day').format('YYYY-MM-DD  HH:mm') // 获取前天的零点
      } else if (newValue === '今天') {
        this.selectTime = []
        this.$set(this.selectTime, 0, new Date(dayjs().startOf('day').format('YYYY-MM-DD  HH:mm')))
        this.$set(this.selectTime, 1, new Date(now.format('YYYY-MM-DD  HH:mm')))
        this.formInline.endTime = now.subtract(1, 'hour').format('YYYY-MM-DD  HH:mm')
        console.log('000', dayjs().startOf('day').format('YYYY-MM-DD  HH:mm'))
        this.formInline.startTime = dayjs().startOf('day').format('YYYY-MM-DD  HH:mm')
      }
    }
  },
  created () {
  mounted () {
    this.getOrganizationId()
    this.$set(this.selectTime, 0, new Date(dayjs().startOf('day').format('YYYY-MM-DD  HH:mm')))
    this.$set(this.selectTime, 1, new Date(dayjs().format('YYYY-MM-DD  HH:mm')))
  },
  created () {

  },
  methods: {
    changeCascader (val) {
      let nodesInfo = this.$refs['cascader'].getCheckedNodes()
      let macList = nodesInfo.map(({ data: { mac } }) => mac)
      this.formInline.macs = macList.filter(item => item !== undefined)
      console.log(macList)
    },
    changeDay () {
      console.log(this.selectTime)
      this.formInline.startTime = this.selectTime[0]
      this.formInline.endTime = this.selectTime[1]
      console.log('this.selectTime', this.selectTime)
      if (this.selectTime !== null) {
        console.log(this.selectTime)
        this.formInline.startTime = this.selectTime[0]

        if (dayjs(this.selectTime[1]).format('YYYY-MM-DD HH') === dayjs().format('YYYY-MM-DD HH')) {
          this.formInline.endTime = dayjs(this.selectTime[1]).subtract(1, 'hour').format('YYYY-MM-DD  HH:mm')
        } else {
          this.formInline.endTime = dayjs(this.selectTime[1]).startOf('day').format('YYYY-MM-DD  HH:mm')
        }
      }
      console.log('this.formInline12', this.formInline)
      this.time = ''
    },
    handleDetail (row) {
      console.log(row)
      this.handleShow = true
      this.macDate = _.cloneDeep(row)
      this.macDate.startTime = this.formInline.startTime
      this.macDate.endTime = this.formInline.endTime
      this.macDate.startTime = this.selectTime[0]
      this.macDate.endTime = this.selectTime[1]
      console.log(this.macDate)
    },
    handleSearch () {
      if (this.formInline.organizationId !== '') {
      console.log(' this.formInline', this.formInline)
      if (this.formInline.macs.length > 0) {
        if (this.time === '今天') {
          console.log('今天今天')
          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.getOnlineData()
        this.$request({
          url: '/onlineRate/page',
          method: 'post',
@@ -326,9 +372,24 @@
        this.$message.warning('请选择组织或者时间')
      }
    },
    getOnlineData () {
      this.$request({
        url: '/onlineRate/state',
        method: 'post',
        data: {
          macs: this.formInline.macs
        }
      })
        .then(res => {
          this.macOnlineData = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    getOrganizationId () {
      this.$request({
        url: '/organization/getOrganizationId',
        url: '/organization/queryDevices',
        method: 'get'
      })
        .then(res => {