|
|
@@ -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>
|