nxdt-uniapp/pages/videoSurveillance/index.vue

<template>
  <view>
    <Navbar title="视频监控" />
    <div class="content">
      <u-input
        v-model="searchValue"
        placeholder="请输入设备名称"
        suffixIcon="search"
        suffixIconStyle="color: #909399"
        shape="circle"
        @blur="handleSearch"
        style="margin-bottom: 20px"
      ></u-input>
      <u-tabs
        :list="tabList"
        @click="clickTab"
        :current="currentIndex"
        :activeStyle="{ fontWeight: 500, fontSize: '14px', color: '#0F274B' }"
        :inactiveStyle="{ fontWeight: 400, fontSize: '12px', color: 'rgba(15, 39, 75, 0.5)' }"
      >
        <view slot="right" style="padding-left: 4px" @tap="handleTap">
          <u-icon name="/static/images/imgs/more.png" size="21" bold></u-icon>
        </view>
      </u-tabs>

      <div>
        <div class="center-btns">
          <u-button :type="btnType1" class="item-btn" size="small" @click="handleStatus(1)">全部{{ all }}</u-button>
          <u-button :type="btnType2" class="item-btn" size="small" @click="handleStatus(2)">在线{{ onLine }}</u-button>
          <u-button :type="btnType3" class="item-btn" size="small" @click="handleStatus(3)">离线{{ offLine }}</u-button>
        </div>
        <TableTitle :tableTitleList="titleList" />
        <div v-for="(item, index) in tableDataList" :key="index" class="list-item" @click="handleListItem(item)">
          <div class="item">{{ item.deviceName }}</div>
          <div class="item">{{ item.deviceCode }}</div>
          <div class="item" :style="{ color: item.deviceStatus == '在线' ? '#26DF0E' : '#E31414' }">
            {{ item.deviceStatus }}
          </div>
          <div class="item">{{ item.proName }}</div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import TableTitle from 'pages/component/TableTitle'
import { getDeviceList, getDeviceStatus, getDeviceTypeList } from '@/api/project'

export default {
  components: { TableTitle },
  data() {
    return {
      searchValue: undefined,
      deviceStatus: undefined,
      currentIndex: 0,
      tabList: [
        // { name: '移动布控球', deviceType: '1' },
        // { name: '智能安全帽', deviceType: '2' },
        // { name: '执法记录仪', deviceType: '3' }
      ],
      all: '',
      onLine: '',
      offLine: '',
      btnType1: 'primary',
      btnType2: 'default',
      btnType3: 'default',
      titleList: [{ title: '设备名称' }, { title: '设备编号' }, { title: '设备状态' }, { title: '绑定工程' }],
      tableDataList: []
    }
  },
  onLoad() {
    console.log('onLoad')
    this.getDeviceTypeList()
  },
  methods: {
    // 获取设备列表
    getDeviceList() {
      const params = {
        deviceName: this.searchValue,
        deviceType: this.tabList[this.currentIndex]?.deviceType,
        deviceStatus: this.deviceStatus
      }
      console.log('🚀 ~ getDeviceList ~ params:', params)
      getDeviceList(params).then(res => {
        console.log('🚀 ~ getDeviceList ~ res:', res)
        this.tableDataList = res.rows
      })
    },
    // 获取设备状态
    getDeviceStatus() {
      const params = {
        deviceName: this.searchValue,
        deviceType: this.tabList[this.currentIndex]?.deviceType
      }
      getDeviceStatus(params).then(res => {
        console.log('🚀 ~ getDeviceStatus ~ res:', res)
        this.all = res.data.total
        this.onLine = res.data.online
        this.offLine = res.data.offline
      })
    },
    // 获取设备类型
    async getDeviceTypeList() {
      try {
        const res = await getDeviceTypeList({})
        console.log('🚀 ~ 设备类型 ~ res:', res)
        this.tabList = res.data
        this.getDeviceStatus()
        this.getDeviceList()
      } catch (error) {
        console.log('🚀 ~ 设备类型 ~ error:', error)
      }
    },
    handleSearch() {
      console.log('searchValue', this.searchValue)
      this.getDeviceList()
      this.getDeviceStatus()
    },
    clickTab(item) {
      console.log('item', item)
      this.currentIndex = item.index
      this.getDeviceList()
      this.getDeviceStatus()
    },
    handleTap() {
      // console.log('handleTap', this.currentIndex)
      if (this.currentIndex + 2 >= this.tabList.length) {
        this.currentIndex = this.tabList.length - 1
      } else {
        this.currentIndex += 2
      }
    },
    handleStatus(type) {
      if (type === 1) {
        this.btnType1 = 'primary'
        this.btnType2 = 'default'
        this.btnType3 = 'default'
        this.deviceStatus = undefined
      } else if (type === 2) {
        this.btnType1 = 'default'
        this.btnType2 = 'primary'
        this.btnType3 = 'default'
        this.deviceStatus = '1'
      } else {
        this.btnType1 = 'default'
        this.btnType2 = 'default'
        this.btnType3 = 'primary'
        this.deviceStatus = '0'
      }
      this.getDeviceList()
      this.getDeviceStatus()
    },
    handleListItem(item) {
      console.log('list-item-->', item)
      if (item.deviceStatus !== '在线') {
        uni.showToast({
          title: '请选择在线设备进行观看!',
          icon: 'none'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/videoSurveillance/videoTest?puid=' + item.puid + '&ballIndex=' + item.ballIndex
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 20px;

  .center-btns {
    display: inline-flex;
    margin-top: 20px;

    .item-btn {
      margin-right: 20px;
      width: 80px;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid rgba(15, 39, 75, 0.2);
    }
  }

  .list-item {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 33px;
      background: #fff;
      font-weight: 400;
      font-size: 12px;
      color: #0f274b;
      word-break: break-all;
      overflow: auto;
    }
  }
}
</style>