|  | @@ -0,0 +1,191 @@
 | 
											
												
													
														|  | 
 |  | +<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></org-tree>
 | 
											
												
													
														|  | 
 |  | +      </van-col>
 | 
											
												
													
														|  | 
 |  | +      <van-col span="24">
 | 
											
												
													
														|  | 
 |  | +        <span v-for="opt in deviceTypeOptions" :key="opt.value" class="search-devicetype">
 | 
											
												
													
														|  | 
 |  | +          <van-button
 | 
											
												
													
														|  | 
 |  | +            style="width: 20vw"
 | 
											
												
													
														|  | 
 |  | +            size="small"
 | 
											
												
													
														|  | 
 |  | +            :type="search.deviceType == opt.value ? 'info' : 'default'"
 | 
											
												
													
														|  | 
 |  | +            @click="onDeviceTypeClick(opt.value)"
 | 
											
												
													
														|  | 
 |  | +          >
 | 
											
												
													
														|  | 
 |  | +            {{ opt.text }}</van-button
 | 
											
												
													
														|  | 
 |  | +          >
 | 
											
												
													
														|  | 
 |  | +        </span>
 | 
											
												
													
														|  | 
 |  | +      </van-col>
 | 
											
												
													
														|  | 
 |  | +      <van-col span="24" class="search-state">
 | 
											
												
													
														|  | 
 |  | +        <span @click="onStateChanged(1)" :class="`${search.state === 1 ? 'alarm_state_selected' : ''}`">{{
 | 
											
												
													
														|  | 
 |  | +          alarmButtonText
 | 
											
												
													
														|  | 
 |  | +        }}</span>
 | 
											
												
													
														|  | 
 |  | +        <span @click="onStateChanged(0)" :class="`${search.state === 0 ? 'alarm_state_selected' : ''}`">{{
 | 
											
												
													
														|  | 
 |  | +          normalButtonText
 | 
											
												
													
														|  | 
 |  | +        }}</span>
 | 
											
												
													
														|  | 
 |  | +      </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'
 | 
											
												
													
														|  | 
 |  | +export default {
 | 
											
												
													
														|  | 
 |  | +  components: { NavBar, KList, Item, OrgTree },
 | 
											
												
													
														|  | 
 |  | +  data() {
 | 
											
												
													
														|  | 
 |  | +    return {
 | 
											
												
													
														|  | 
 |  | +      alarmButtonText: '告警设备',
 | 
											
												
													
														|  | 
 |  | +      normalButtonText: '正常设备',
 | 
											
												
													
														|  | 
 |  | +      search: {
 | 
											
												
													
														|  | 
 |  | +        orgId: this.orgId,
 | 
											
												
													
														|  | 
 |  | +        checkSub: false,
 | 
											
												
													
														|  | 
 |  | +        deviceType: null,
 | 
											
												
													
														|  | 
 |  | +        state: null,
 | 
											
												
													
														|  | 
 |  | +        pageNum: 1,
 | 
											
												
													
														|  | 
 |  | +        pageSize: 10
 | 
											
												
													
														|  | 
 |  | +      },
 | 
											
												
													
														|  | 
 |  | +      dicts: ['app_sensor_device_type', 'sensor_alarm_status']
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +  },
 | 
											
												
													
														|  | 
 |  | +  watch: {},
 | 
											
												
													
														|  | 
 |  | +  created() {},
 | 
											
												
													
														|  | 
 |  | +  mounted() {
 | 
											
												
													
														|  | 
 |  | +    this.getTreeList()
 | 
											
												
													
														|  | 
 |  | +    this.search.orgId = this.orgId
 | 
											
												
													
														|  | 
 |  | +    this.selectedOrgName = this.orgName
 | 
											
												
													
														|  | 
 |  | +    this.stateStatistic()
 | 
											
												
													
														|  | 
 |  | +  },
 | 
											
												
													
														|  | 
 |  | +  computed: {
 | 
											
												
													
														|  | 
 |  | +    ...mapGetters(['orgName', 'orgId', 'dictionary']),
 | 
											
												
													
														|  | 
 |  | +    deviceTypeOptions() {
 | 
											
												
													
														|  | 
 |  | +      let r = [{ value:null, text: '全部' }]
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +      let dict = this.getDictItem('app_sensor_device_type')
 | 
											
												
													
														|  | 
 |  | +      if (dict) {
 | 
											
												
													
														|  | 
 |  | +        dict.forEach(element => {
 | 
											
												
													
														|  | 
 |  | +          r.push({ value: element.dictValue, text: element.dictLabel })
 | 
											
												
													
														|  | 
 |  | +        })
 | 
											
												
													
														|  | 
 |  | +      }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +      return r
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +  },
 | 
											
												
													
														|  | 
 |  | +  methods: {
 | 
											
												
													
														|  | 
 |  | +    list,
 | 
											
												
													
														|  | 
 |  | +    //获取机构树
 | 
											
												
													
														|  | 
 |  | +    getTreeList() {
 | 
											
												
													
														|  | 
 |  | +      deptTreeList(this.orgId).then(res => {
 | 
											
												
													
														|  | 
 |  | +        this.options = res.data
 | 
											
												
													
														|  | 
 |  | +        // this.orgInfo.orgId = this.orgId;
 | 
											
												
													
														|  | 
 |  | +        // this.orgInfo.orgName = this.orgName;
 | 
											
												
													
														|  | 
 |  | +        // console.log(res,'3333')
 | 
											
												
													
														|  | 
 |  | +      })
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    stateStatistic() {
 | 
											
												
													
														|  | 
 |  | +      stateStatistic(this.search).then(r => {
 | 
											
												
													
														|  | 
 |  | +        if (r.data) {
 | 
											
												
													
														|  | 
 |  | +          this.alarmButtonText = `告警设备(${r.data.alarm}台)`
 | 
											
												
													
														|  | 
 |  | +          this.normalButtonText = `正常设备(${r.data.normal}台)`
 | 
											
												
													
														|  | 
 |  | +        } else {
 | 
											
												
													
														|  | 
 |  | +          this.alarmButtonText = `告警设备`
 | 
											
												
													
														|  | 
 |  | +          this.normalButtonText = `正常设备`
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +      })
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    onStateChanged(state) {
 | 
											
												
													
														|  | 
 |  | +      if (this.search.state === state) {
 | 
											
												
													
														|  | 
 |  | +        this.search.state = null
 | 
											
												
													
														|  | 
 |  | +      } else {
 | 
											
												
													
														|  | 
 |  | +        this.search.state = state
 | 
											
												
													
														|  | 
 |  | +      }
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    onDeviceTypeClick(deviceType) {
 | 
											
												
													
														|  | 
 |  | +      if (this.search.deviceType === deviceType) {
 | 
											
												
													
														|  | 
 |  | +        this.search.deviceType = null
 | 
											
												
													
														|  | 
 |  | +      } else {
 | 
											
												
													
														|  | 
 |  | +        this.search.deviceType = deviceType
 | 
											
												
													
														|  | 
 |  | +      }
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    //改变机构后将重新发起请求
 | 
											
												
													
														|  | 
 |  | +    changeTree(node) {
 | 
											
												
													
														|  | 
 |  | +      // console.log(selectedOptions,'aaaaaa')
 | 
											
												
													
														|  | 
 |  | +      // this.search.orgId = selectedOptions[selectedOptions.length-1].id;
 | 
											
												
													
														|  | 
 |  | +      // let option = selectedOptions[selectedOptions.length - 1]
 | 
											
												
													
														|  | 
 |  | +      this.search.orgId = node.id
 | 
											
												
													
														|  | 
 |  | +      this.selectedOrgName = node.shortName
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +      this.stateStatistic()
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +    orgCheckChanged(v) {
 | 
											
												
													
														|  | 
 |  | +      this.search.checkSub = v
 | 
											
												
													
														|  | 
 |  | +      this.stateStatistic()
 | 
											
												
													
														|  | 
 |  | +    },
 | 
											
												
													
														|  | 
 |  | +    onFinish({ selectedOptions }) {
 | 
											
												
													
														|  | 
 |  | +      this.showOrg = false
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +  }
 | 
											
												
													
														|  | 
 |  | +}
 | 
											
												
													
														|  | 
 |  | +</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>
 |