fix:手持设备

quanyawei

2024-03-01 50bf2b134dff8f56d72e4ffe934540d8b1b2f519

fix:手持设备

 src/components/formTypeComponets/dialog/index.vue

New file
@@ -0,0 +1,91 @@
<template>
  <el-dialog
    :title="title"
    top="10vh"
    center
    :visible.sync="visible"
    :width="width"
    :destroy-on-close="true"
    @close="close()"
  >
    <div>
      <slot
        class="body"
        name="body"
      >
        我是默认body
      </slot>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        v-if="isShowCloseBut"
        @click="close()"
      >
        关闭
      </el-button>
      <el-button
        v-if="isShowSumbitBut"
        type="primary"
        @click="close()"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    width: {
      type: String,
      default: '30%'
    },
    title: {
      type: String,
      default: 'title'
    },
    isShowCloseBut: {
      type: Boolean,
      default: true
    },
    isShowSumbitBut: {
      type: Boolean,
      default: true
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false
    }
  },
  computed: {},
  watch: {},
  created () {
    console.log('this.dialogVisible', this.dialogVisible)
    this.visible = this.dialogVisible
  },
  mounted () {

  },
  methods: {
    close () {
      this.visible = false
      this.$emit('update:dialogVisible', false)
    },
    handleClose () {

    }
  }
}
</script>
<style scoped lang="scss">
</style>

 src/components/formTypeComponets/radioGroupCompones/index.vue

New file
@@ -0,0 +1,79 @@
<template>
  <el-radio-group
    v-model="radio"
    :size="size"
    @input="changeRadio"
  >
    <el-radio-button
      v-for="(item,index) in radioData"
      :key="index"
      :label="item.label"
    />
  </el-radio-group>
</template>

<script>
import dayjs from 'dayjs'
import _ from 'lodash'
export default {
  components: {},
  props: {
    type: {
      type: String,
      default: 'timeDate'
    },
    radioSelect: {
      type: String,
      default: ''
    },
    radioData: {
      type: Array,
      default: null
    //   { label: '今天', value: 'today', type: 'day', num: '0' },
    //     { label: '昨天', value: 'yesterday', type: 'day', num: '1', },
    //     { label: '近3天', value: 'week', type: 'day', num: '3', },
    //     { label: '近1个月', value: 'month', type: 'month', num: '1', },
    //     { label: '近3个月', value: 'threeMonth', type: 'month', num: '3', },
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  data () {
    return {
      radio: ''
    }
  },
  computed: {},
  watch: {
    radioSelect (newVal) {
      console.log('newval', newVal)
      this.radio = newVal
    }
  },
  created () {
    this.radio = this.radioSelect
    this.changeRadio(this.radio)
  },
  mounted () {

  },
  methods: {
    changeRadio (e) {
      let data = _.find(this.radioData, ['label', e])
      if (this.type === 'timeDate') {
        const endTime = dayjs().format('YYYY-MM-DD HH:mm')
        const startTime = data.num === '0' ? dayjs().startOf('day').format('YYYY-MM-DD HH:mm') : dayjs().subtract(data.num, data.type).format('YYYY-MM-DD HH:mm')
        data.startTime = startTime
        data.endTime = endTime
      }
      console.log('data', data)
      this.$emit('changeRadio', data)
    }
  }
}
</script>
<style scoped>

</style>

 src/router/dynamicRouter.js

@@ -107,6 +107,12 @@
  component: () => import('@/views/govReport/index'),
  meta: { title: '国控站小时报表显示', icon: 'example' }
}
const hand = {
  path: 'report/hand',
  name: 'hand',
  component: () => import('@/views/hand/index'),
  meta: { title: '手持设备', icon: 'example' }
}
// 空气质量小时播报
const airQualityReportDisplay = {
  path: 'report/airQualityReportDisplay',
@@ -240,6 +246,7 @@
  showMpData: showMpData,
  staffManagement: staffManagement,
  showGovHourData: showGovHourData,
  hand: hand,
  cityAirRank: cityAirRank,
  levelStatistic: levelStatistic,
  onlineRate: onlineRate,
@@ -276,6 +283,7 @@

// 导出路由菜单
export function routerMenus() {
  console.log('user.menus', JSON.parse(store.state.user.menus))
  const routersMenu = JSON.parse(store.state.user.menus)
  // 路由分两块，左侧列表， 最右侧员工下拉菜单
  console.log('routersMenu', routersMenu)

 src/views/hand/index.vue

New file
@@ -0,0 +1,439 @@
<template>
  <div class="contenet">
    <div class="searchBox">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <div>
          <el-form-item label="选择设备:">
            <el-select
              v-model="formInline.mac"
              size="medium"
              placeholder="选择设备"
            >
              <el-option
                v-for="item in handList"
                :key="item.id"
                :label="item.mac"
                :value="item.mac"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称:">
            <el-input
              v-model="formInline.name"
              size="medium"
              placeholder="设备名称"
            />
          </el-form-item>
          <el-form-item>
            <radioGroupComponent
              :radio-data="radioGrouplist"
              :radio-select="radio"
              @changeRadio="changeRadio"
            />
          </el-form-item>
          <el-form-item label="其他时间:">
            <el-date-picker
              v-model="value"
              size="medium"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00']"
              @change="sendPicker"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="medium"
              @click="onSubmit"
            >
              查询
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        size="mini"
        max-height="680"
        style="width: 100%"
        :header-cell-style="{
          color: '#101111', fontSize: '16px'
        }"
        :cell-style="{ color: '#101111', fontSize: '16px'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
        />
        <el-table-column
          prop="mac"
          align="center"
          label="设备号"
          width="180"
        />
        <el-table-column
          prop="name"
          align="center"
          width="200px"
          label="设备名称"
        />
        <el-table-column
          prop="address"
          align="center"
          label="设备位置"
        />
        <el-table-column
          prop="startTime"
          align="center"
          width="200px"
          label="开始时间"
        />
        <el-table-column
          prop="endTime"
          align="center"
          label="结束时间"
          width="200px"
        />
        <el-table-column
          width="60px"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              @click="showDetail(scope.row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagina">
        <el-pagination
          background
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.pageSize"
          :total="pagination.totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div>
      <diaLog
        v-if="isVisible"
        :dialog-visible.sync="isVisible"
        :title="`设备详情`"
        :width="`90%`"
        :is-show-sumbit-but="false"
      >
        <template #body>
          <div>
            <div class="devaiceDetailTitle">
              <p>设备名称：{{ selectRow.name }}</p>
              <p>设备位置：{{ selectRow.address }}</p>
              <p>设备经纬度：{{ selectRow.longitude }},{{ selectRow.latitude }}</p>
            </div>
            <div class="typeBox">
              <div class="tapChart">
                <p
                  :class="{pClick: tapName === 'hour'}"
                  @click="changeTap('hour')"
                >
                  小时
                </p>
                <p
                  :class="{pClick: tapName === 'minutely'}"
                  @click="changeTap('minutely')"
                >
                  5分钟
                </p>
              </div>
              <div>
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleExport"
                >
                  导出
                </el-button>
              </div>
            </div>
            <div>
              <el-table
                :data="rowDetailDate"
                border
                size="mini"
                max-height="480"
                style="width: 100%"
                :header-cell-style="{
                  color: '#101111', fontSize: '16px'
                }"
                :cell-style="{ color: '#101111', fontSize: '16px',padding: '10px 0'}"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="60px"
                  align="center"
                />
                <el-table-column
                  prop="time"
                  align="center"
                  label="时间"
                  width="180"
                >
                  <template slot-scope="scope">
                    {{ scope.row.time | timeFormat }}
                  </template>
                </el-table-column>
                <el-table-column
                  v-for="(item,index) in tableColumnData"
                  :key="index"
                  :prop="item.prop"
                  align="center"
                  :label="item.label + item.unit"
                />
              </el-table>
            </div>
          </div>
        </template>
      </diaLog>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import radioGroupComponent from '@/components/formTypeComponets/radioGroupCompones/index.vue'
import diaLog from '@/components/formTypeComponets/dialog/index.vue'
export default {
  components: {
    radioGroupComponent,
    diaLog
  },
  filters: {
    timeFormat (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data () {
    return {
      formInline: {
        mac: '',
        name: '',
        startTime: '',
        endTime: ''
      },
      tableColumnData: [
        { prop: 'a34004', label: 'PM2.5', unit: 'ug/m³' },
        { prop: 'a34002', label: 'PM10', unit: 'ug/m³' },
        { prop: 'a21004', label: '氮氧化合物', unit: 'ug/m³' },
        { prop: 'a21026', label: '二氧化硫', unit: 'ug/m³' },
        { prop: 'a21005', label: '一氧化碳', unit: 'mg/m³' },
        { prop: 'a01006', label: '气压', unit: 'hpa' },
        { prop: 'a01001', label: '温度', unit: '℃' },
        { prop: 'a01002', label: '湿度', unit: '%' },
        { prop: 'a99054', label: 'TVOC', unit: 'ug/m³' },
        { prop: 'a31001', label: '甲醛', unit: 'mg/m³' },
        { prop: 'a21028', label: '硫化氢', unit: 'ppm' },
        { prop: 'a21001', label: '氨气', unit: 'ug/m³' },
      ],
      handList: [],
      radio: '今天',
      tapName: 'hour',
      value: '',
      radioGrouplist: [
        { label: '今天', value: 'today', type: 'day', num: '0' },
        { label: '昨天', value: 'yesterday', type: 'day', num: '1', },
        { label: '近3天', value: 'week', type: 'day', num: '3', },
        { label: '近1个月', value: 'month', type: 'month', num: '1', },
        { label: '近3个月', value: 'threeMonth', type: 'month', num: '3', },
      ],
      tableData: [],
      rowDetailDate: [],
      pagination: {
        currentPage: 1,
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount: 0,
        // 个数选择器（可修改）
        pageSizes: [10, 30, 60, 100],
        // 默认每页显示的条数（可修改）
        pageSize: 10
      },
      isVisible: false,
      selectRow: {}
    }
  },
  created () {
    this.$request({
      url: '/hand/check',
      method: 'get'
    }).then(res => {
      if (res.code === 0) {
        this.handList = res.data
      } else {
        this.$message.error(res.message)
      }
    })
  },
  methods: {
    handleExport () {
      this.$request({
        url: 'hand/unitExel',
        method: 'get',
        responseType: 'blob',
        params: {
          mac: this.selectRow.mac,
          startTime: this.selectRow.startTime,
          endTime: this.selectRow.endTime,
          type: this.tapName
        }
      }).then(res => {
        this.getOutExcel('列表数据导出.xlsx', res)
      })
    },
    getOutExcel (fileName, res) {
      const blob = new Blob([res], { type: 'application/x-xls' })
      if (window.navigator.msSaveOrOpenBlob) {
        // 兼容 IE & EDGE
        navigator.msSaveBlob(blob, fileName)
      } else {
        var link = document.createElement('a')
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL
        // 创建下载链接
        link.href = url.createObjectURL(blob)
        // 命名下载名称
        link.download = fileName
        // 点击触发下载
        link.click()
        // 下载完成进行释放
        url.revokeObjectURL(link.href)
      }
    },
    changeRadio (e) {
      this.formInline.startTime = e.startTime
      this.formInline.endTime = e.endTime
      this.radio = e.label
      this.value = ''
    },
    sendPicker (e) {
      this.radio = ''
      console.log(' this.radio', this.radio)
      this.formInline.startTime = dayjs(e[0]).format('YYYY-MM-DD HH:mm:ss')
      this.formInline.endTime = dayjs(e[1]).format('YYYY-MM-DD HH:mm:ss')
    },
    showDetail (row) {
      this.selectRow = row
      this.tapName = 'hour'
      console.log('row', row)
      this.changeTimeType()
    },
    changeTimeType () {
      this.$request({
        url: '/hand/details',
        method: 'get',
        params: {
          mac: this.selectRow.mac,
          startTime: this.selectRow.startTime,
          endTime: this.selectRow.endTime,
          type: this.tapName
        }
      }).then(res => {
        if (res.code === 0) {
          console.log('res', res)
          this.isVisible = true
          this.rowDetailDate = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    onSubmit () {
      this.$request({
        url: '/hand/page',
        method: 'post',
        data: {
          ...this.formInline,
          page: this.pagination
        }
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.pagination.totalCount = res.data.page.totalNum
        } else {
          this.$message.error(res.message)
        }
      })
    },
    changeTap (val) {
      this.tapName = val
      this.changeTimeType()
    },
    // 分页
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
      this.onSubmit()
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      this.onSubmit()
    },
  },
}
</script>

<style lang="scss" scoped>
.contenet{
  padding: 10px;
}
.searchBox{
  /deep/.el-form-item{
    margin-bottom: 10px;
  }
}
.pagina{
  margin-top: 10px;
}
.devaiceDetailTitle{
  p{
    display: inline-block;
    margin-right: 10px;
    font-size: 18px;
  }
}
.tapChart{
 p{
   display: inline-block;
   margin-right: 10px;
   cursor: pointer;
   padding-bottom: 5px;
 }
 .pClick{
  color: #409EFF;
  border-bottom: #409EFF 3px solid;
 }
}
.typeBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
</style>