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

<template>
  <div class="page_list">
    <nav-bar :go="{ type: 'push', path: '/menu' }"></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-col span="24" class="search-state">
        <span @click="onStatusChanged(1)" :class="`${search.state === 1 ? 'alarm_state_selected' : ''}`">异常</span>
        <span @click="onStatusChanged(0)" :class="`${search.state === 0 ? 'alarm_state_selected' : ''}`">正常</span>
        <span @click="onStatusChanged(2)" :class="`${search.state === 2 ? 'alarm_state_selected' : ''}`">未知</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"></item>
        </template>
      </k-list>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { mapGetters } from 'vuex'
import { deptTreeList } from '@/api/public'
import { list } from '@/api/iot/videoDiagnosis.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 },
  name:'iot_videoDiagnosis',
  data() {
    return {
      options: [],
      search: {
        orgId: this.orgId,
        checkSub: true,
        state: null,

        pageNum: 1,
        pageSize: 10
      },
      showOrg: false,
      dicts: []
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getTreeList()
    this.search.orgId = this.orgId
  },
  
  computed: {
    ...mapGetters(['orgName', 'orgId', 'dictionary'])
    // statusOptions() {
    //   let r = [
    //     { value: null, text: '布撤防状态' }
    //   ]

    //   let dict = this.getDictItem('protection_status');
    //   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')
      })
    },
    // refreshData(){
    //   this.search.pageNum=0;
    // },
    //改变机构后将重新发起请求
    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
    },
    orgCheckChanged(v) {
      this.search.checkSub = v
    },
    onStatusChanged(state) {
      if(this.search.state===state){
        this.search.state=null;
      }else{
        this.search.state = state
      }      
    }
  }
}
</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-state {
  width: 100%;

  > span {
    width: 33.333333%;
    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>