soc_app/src/views/menu/iot/ups/index.vue

<template>
  <div class="page_list">
    <nav-bar></nav-bar>
    <van-row>
      <van-col span="24">
        <org-tree
          v-model="search.orgId"
          @changeItem="changeTree"
          @checked="orgCheckChanged"
          showChecked
          defaultChecked
        ></org-tree>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell title="UPS状态" @click="showStatus = true" is-link arrow-direction="down" :value="defaultStatus" />
        <van-popup v-model="showStatus" round position="bottom">
          <van-picker
            title="UPS状态"
            show-toolbar
            :columns="statusOptions"
            @confirm="onStatusConfirm"
            @cancel="onCancel"
            default-index="0"
            :close-on-click-overlay="false"
          />
        </van-popup>
      </van-col>
    </van-row>
    <div class="container">
      <k-list :list="list" :params="search" :auto="false" ref="list">
        <template slot-scope="{ data }">
          <item :data="data" :statusOptions="deviceTypeOptions"></item>
        </template>
      </k-list>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
// import Calendar from '@/components/Calendar';
import { mapGetters } from 'vuex'
import { deptTreeList } from '@/api/public'
// import { list, stateStatistic } from '@/api/iot/donghuan.js'
import KList from '@/components/list/index.vue'
import Item from './components/item.vue'
import OrgTree from '@/components/orgTree'
import dayjs from 'dayjs'
export default {
  components: { NavBar, KList, Item, OrgTree },
  name: 'iot_ups',
  data() {
    return {
      search: {
        orgId: this.orgId,
        checkSub: true,
        deviceType: null,
        state: null,
        pageNum: 1,
        pageSize: 10
      },
      statusStatistic: null,
      showDeviceType: false,
      defaultDeviceType: '全部',
      showStatus: false,
      defaultStatus: '全部',
      dicts: ['sensor_alarm_status']
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.search.orgId = this.orgId
  },
  computed: {
    ...mapGetters(['orgName', 'orgId', 'dictionary']),
    statusOptions() {
      let r = [{ value: null, text: '全部' }]

      let dict = this.getDictItem('sensor_alarm_status')
      if (dict) {
        dict.forEach(element => {
          let label = element.dictLabel

          if (element.dictValue == 0 && this.statusStatistic) {
            label += `(${this.statusStatistic.normal})`
          } else if (element.dictValue == 1 && this.statusStatistic) {
            label += `(${this.statusStatistic.alarm})`
          }
          r.push({ value: element.dictValue, text: label })
        })
      }

      return r
    }
  },
  methods: {
    list() {
      return {
        total: 3,
        rows: [
          {
            orgName: '六一分理处',
            deviceName: '监控主机Ups',
            state: 0,
            stateText: '正常',
            stateUpdateTime:dayjs().add(-1000,'second').format('YYYY-MM-DD HH:mm:ss')
          },
          {
            orgName: '六一分理处',
            deviceName: '现金区Ups',
            state: 0,
            stateText: '正常',
            stateUpdateTime:dayjs().add(-100,'second').format('YYYY-MM-DD HH:mm:ss')
          },
          {
            orgName: '六一分理处',
            deviceName: '大厅Ups',
            state: 0,
            stateText: '正常',
            stateUpdateTime:dayjs().add(-300,'second').format('YYYY-MM-DD HH:mm:ss')
          }
        ]
      }
    },
    onStatusConfirm(opt) {
      this.defaultState = opt.text
      this.search.state = opt.value
      this.showStatus = false
    },
    onCancel() {
      this.showAlarmType = false
      this.showStatus = false
    },
    //改变机构后将重新发起请求
    changeTree(node) {
      this.search.orgId = node.id
    },

    orgCheckChanged(v) {
      this.search.checkSub = v
    }
  }
}
</script>

<style lang="scss" scoped>
.page_list {
  background-color: transparent;
  display: block;

  .container {
    // overflow: auto;
    // height: calc(100vh - 11rem);
    .k-content-repair {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }
  }
}

.search-devicetype {
  width: 25%;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
}
.search-state {
  width: 100%;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  > span {
    width: 50%;
    border: solid 1px rgb(196, 196, 196);
    display: inline-block;
    text-align: center;
    padding-top: 1.2vw;
    padding-bottom: 1.2vw;
  }
}

.alarm_state_selected {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-weight: 700;
}
</style>