界面调整

src/router/router.config.js

@@ -175,13 +175,13 @@ export let routers = [
         path: '/iot/donghuan',
         name: 'iot_donghuan',
         component: () => import('@/views/menu/iot/donghuan/index'),
-        meta: { title: '动环诊断信息', keepAlive: false }
+        meta: { title: '动环诊断信息', keepAlive: true , deep: 1}
       },
       {
         path: '/iot/donghuan/detail',
         name: 'iot_donghuan_detail',
         component: () => import('@/views/menu/iot/donghuan/detail'),
-        meta: { title: '动环设备详情', keepAlive: false }
+        meta: { title: '动环设备详情', keepAlive: false,  deep: 2 }
       },
       {
         path: '/iot/board',

src/views/menu/iot/donghuan/detail.vue

@@ -9,7 +9,7 @@
       </van-cell>
       <van-cell title="诊断时间" :value="stateUpdateTimeText" />
       <van-cell title="持续时长" :value="durationText" />
-      <van-cell title="设备采集值" :value="gatherText" :value-class="info.state==1?'cell-gather-alarm-value':''"/>
+      <van-cell title="设备采集值" :value="gatherText" title-style="max-width:100px" :value-class="info.state==1?'cell-gather-alarm-value':''"/>
       <van-cell title="动环类型" :value="info.deviceTypeText" />
       <van-cell title="所属机构" :value="info.orgName" />
     </van-cell-group>

src/views/menu/iot/donghuan/index.vue

@@ -5,6 +5,7 @@
       <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
@@ -16,14 +17,50 @@
             {{ opt.text }}</van-button
           >
         </span>
-      </van-col>
-      <van-col span="24" class="search-state">
+      </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>
+    <van-row>
+      <van-col span="12">
+        <van-cell
+          title="设备类型"
+          @click="showDeviceType = true"
+          is-link
+          arrow-direction="down"
+          :value="defaultDeviceType"
+        />
+        <van-popup v-model="showDeviceType" round position="bottom">
+          <van-picker
+            title="设备类型"
+            show-toolbar
+            :columns="deviceTypeOptions"
+            @confirm="onDeviceTypeConfirm"
+            @cancel="onCancel"
+            default-index="0"
+            :close-on-click-overlay="false"
+          />
+        </van-popup>
+      </van-col>
+      <van-col span="12">
+        <van-cell title="状态" @click="showStatus = true" is-link arrow-direction="down" :value="defaultStatus" />
+        <van-popup v-model="showStatus" round position="bottom">
+          <van-picker
+            title="状态"
+            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">
@@ -47,10 +84,11 @@ import Item from './components/item.vue'
 import OrgTree from '@/components/orgTree'
 export default {
   components: { NavBar, KList, Item, OrgTree },
+  name: 'iot_donghuan',
   data() {
     return {
-      alarmButtonText: '告警设备',
-      normalButtonText: '正常设备',
+      // alarmButtonText: '告警设备',
+      // normalButtonText: '正常设备',
       search: {
         orgId: this.orgId,
         checkSub: false,
@@ -59,6 +97,11 @@ export default {
         pageNum: 1,
         pageSize: 10
       },
+      statusStatistic: null,
+      showDeviceType: false,
+      defaultDeviceType: '全部',
+      showStatus: false,
+      defaultStatus: '全部',
       dicts: ['app_sensor_device_type', 'sensor_alarm_status']
     }
   },
@@ -73,7 +116,7 @@ export default {
   computed: {
     ...mapGetters(['orgName', 'orgId', 'dictionary']),
     deviceTypeOptions() {
-      let r = [{ value:null, text: '全部' }]
+      let r = [{ value: null, text: '全部' }]
 
       let dict = this.getDictItem('app_sensor_device_type')
       if (dict) {
@@ -83,6 +126,25 @@ export default {
       }
 
       return r
+    },
+    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: {
@@ -96,31 +158,39 @@ export default {
         // console.log(res,'3333')
       })
     },
-    stateStatistic() {
+    statisticState() {
       stateStatistic(this.search).then(r => {
-        if (r.data) {
-          this.alarmButtonText = `告警设备(${r.data.alarm}台)`
-          this.normalButtonText = `正常设备(${r.data.normal}台)`
-        } else {
-          this.alarmButtonText = `告警设备`
-          this.normalButtonText = `正常设备`
-        }
+        this.statusStatistic = r.data
       })
     },
-    onStateChanged(state) {
-      if (this.search.state === state) {
-        this.search.state = null
-      } else {
-        this.search.state = state
-      }
+    onDeviceTypeConfirm(opt) {
+      this.defaultDeviceType = opt.text
+      this.search.deviceType = opt.value
+      this.showDeviceType = false
     },
-    onDeviceTypeClick(deviceType) {
-      if (this.search.deviceType === deviceType) {
-        this.search.deviceType = null
-      } else {
-        this.search.deviceType = deviceType
-      }
+    onStatusConfirm(opt) {
+      this.defaultStatus = opt.text
+      this.search.state = opt.value
+      this.showStatus = false
     },
+    onCancel() {
+      this.showDeviceType = false
+      this.defaultStatus = false
+    },
+    // 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')
@@ -129,12 +199,12 @@ export default {
       this.search.orgId = node.id
       this.selectedOrgName = node.shortName
 
-      this.stateStatistic()
+      this.statisticState()
     },
 
     orgCheckChanged(v) {
       this.search.checkSub = v
-      this.stateStatistic()
+      this.statisticState()
     },
     onFinish({ selectedOptions }) {
       this.showOrg = false
@@ -160,16 +230,15 @@ export default {
   }
 }
 
-.search-devicetype{
+.search-devicetype {
   width: 25%;
-  display:inline-block;
+  display: inline-block;
   text-align: center;
-  margin-top:10px;
-
+  margin-top: 10px;
 }
 .search-state {
   width: 100%;
-  margin-top:10px;
+  margin-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
   > span {

src/views/menu/iot/dvrRecorder/components/item.vue

@@ -1,13 +1,13 @@
 <template>
   <card style="font-size: 15px">
     <van-cell-group>
-      <van-cell :title="data.equipmentName" @click="onTitleClicked">
+      <van-cell :title="data.equipmentName">
         <template #default>
           <span v-if="data.diskInfos && data.diskInfos.length > 0">
             <van-tag v-if="data.state == 0" type="success">正常</van-tag>
             <van-tag v-else-if="data.state == 1" type="warning">异常</van-tag>
             <van-tag v-else type="primary">未知</van-tag>
-            <van-icon style="margin-left: 10px" :name="expanded ? 'arrow-up' : 'arrow-down'"></van-icon>
+            <van-icon style="margin-left: 10px" :name="expanded ? 'arrow-up' : 'arrow-down'"  @click="onTitleClicked"></van-icon>
           </span>
           <van-tag v-else type="primary">无硬盘</van-tag>
         </template>

src/views/menu/iot/dvrRecorder/index.vue

@@ -5,10 +5,26 @@
       <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">
+      <!-- <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>
+    <van-row>
+      <van-col span="24">      
+        <van-cell title="硬盘状态" @click="showStatus = true" is-link arrow-direction="down" :value="defaultStatus" />
+        <van-popup v-model="showStatus" round position="bottom">
+          <van-picker
+            title="硬盘状态"
+            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">
@@ -41,30 +57,35 @@ export default {
         pageNum: 1,
         pageSize: 10
       },
-
-      dicts: []
+      showStatus:false,
+      defaultStatus:'全部',
+      dicts: ["app_dvr_recorder_status"]
     }
   },
   watch: {},
   created() {},
   mounted() {
-    this.getTreeList()
     this.search.orgId = this.orgId
   },
   computed: {
-    ...mapGetters(['orgName', 'orgId', 'dictionary'])
+    ...mapGetters(['orgName', 'orgId', 'dictionary']),
+    statusOptions() {
+      let r = [
+        { value: null, text: '全部' }
+      ]
+
+      let dict = this.getDictItem('app_dvr_recorder_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')
-      })
-    },
     //改变机构后将重新发起请求
     changeTree(node) {
       // console.log(selectedOptions,'aaaaaa')
@@ -75,12 +96,13 @@ export default {
     orgCheckChanged(v) {
       this.search.checkSub = v
     },
-    onStatusChanged(state) {
-      if(this.search.state===state){
-        this.search.state=null;
-      }else{
-        this.search.state = state
-      }      
+    onStatusConfirm(opt) {
+      this.defaultStatus=opt.text;
+      this.search.state = opt.value
+      this.showStatus = false
+    },
+    onCancel(){
+      this.showStatus=false;
     }
   }
 }

src/views/menu/iot/subsystem/index.vue

@@ -8,18 +8,7 @@
     </van-row>
     <van-row>
       <van-col span="10">
-        <!-- <van-field
-            v-model="fieldValue"
-            label-width="3em"
-            clearable
-            :disabled="showStatus"
-            label="状态"
-            placeholder=""
-            @click="showStatus = true"
-            ><van-icon name="arrow-down" slot="button"
-          /></van-field> -->
         <van-cell title="状态" @click="showStatus = true" is-link arrow-direction="down" :value="defaultStatus" />
-
         <van-popup v-model="showStatus" round position="bottom">
           <van-picker
             title="状态"
@@ -33,13 +22,12 @@
         </van-popup>
       </van-col>
       <van-col span="14">
-        <van-cell title="上报时间" @click="showHour = true" is-link arrow-direction="down" :value="defaultHour"/>
-
+        <van-cell title="布撤防时间" @click="showHour = true" is-link arrow-direction="down" :value="defaultHour" />
         <van-popup v-model="showHour" round position="bottom">
           <van-picker
-            title="上报时间"
+            title="布撤防时间"
             show-toolbar
-            :columns="hourOptions.map(o => o.text)"
+            :columns="hourOptions"
             @confirm="onTimeConfirm"
             @cancel="onCancel"
             :close-on-click-overlay="false"
@@ -150,25 +138,17 @@ export default {
   computed: {
     ...mapGetters(['orgName', 'orgId', 'dictionary']),
     statusOptions() {
-      let r = ['全部']
-      let dict = this.getDictItem('protection_status')
+      let r = [
+        { value: null, text: '全部' }
+      ]
+
+      let dict = this.getDictItem('protection_status');
       if (dict) {
         dict.forEach(element => {
-          r.push(element.dictLabel)
-        })
+          r.push({ value: element.dictValue, text: element.dictLabel })
+        });
       }
 
-      // 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
     }
   },
@@ -183,23 +163,16 @@ export default {
         // console.log(res,'3333')
       })
     },
-    onStatusConfirm(text) {
-      let dict = this.getDictItem('protection_status')
-      for (let item of dict) {
-        if (item.dictLabel === text) {
-          this.search.status = item.dictValue
-        }
-      }
-      this.showStatus=false;
+    onStatusConfirm(opt) {
+      this.defaultStatus = opt.text
+      this.search.status = opt.value
+      this.showStatus = false
     },
 
-    onTimeConfirm(text) {
-      for (let item of this.hourOptions) {
-        if (item.text === text) {
-          this.search.hour = item.value
-        }
-      }
-      this.showHour=false;
+    onTimeConfirm(opt) {
+      this.defaultHour = opt.text
+      this.search.hour = opt.value
+      this.showHour = false
     },
     // onItemClick() {
     //   this.showOrg = true

src/views/menu/iot/videoDiagnosis/components/calender.vue

@@ -93,7 +93,7 @@ export default {
               customData: v,
               highlight: {
                 color: legend.color,
-                fillMode: 'outline'
+                fillMode: 'solid'
               },
               dot: dayjs(v).format('YYYY-MM-DD') === dayjs(new Date()).format('YYYY-MM-DD'),
               dates: dayjs(v).format('YYYY-MM-DD')

src/views/menu/iot/videoDiagnosis/components/item.vue

@@ -1,15 +1,7 @@
 <template>
   <card style="font-size: 15px">
     <van-cell-group>
-      <van-cell :title="data.hostName">
-        <template #default>
-          <span v-if="data.channels && data.channels.length > 0">
-            <van-tag v-if="data.state == 0" type="success">正常</van-tag>
-            <van-tag v-else-if="data.state == 1" type="warning">异常</van-tag>
-            <van-tag v-else type="primary">未知</van-tag></span
-          >
-          <van-tag v-else type="primary">无通道</van-tag>
-        </template>
+      <van-cell :title="data.orgName">
         <template #right-icon v-if="data.channels && data.channels.length > 0">
           <van-icon
             style="margin-left: 10px"
@@ -18,36 +10,47 @@
           ></van-icon>
         </template>
       </van-cell>
-      <van-cell title="所属机构" :value="data.orgName"></van-cell>
+      <van-cell title="硬盘录像机" :value="data.hostName">
+        <!-- <template #default>
+          <span v-if="data.channels && data.channels.length > 0">
+            <van-tag v-if="data.state == 0" type="success">正常</van-tag>
+            <van-tag v-else-if="data.state == 1" type="warning">异常</van-tag>
+            <van-tag v-else type="primary">未知</van-tag></span
+          >
+          <van-tag v-else type="primary">无通道</van-tag>
+        </template>
+         -->
+      </van-cell>
+     
       <van-cell title-style="display:none" value-class="cell-channel-list">
         <template #default>
           <span v-show="expanded" class="cell-channel-item" v-for="channel in data.channels" :key="channel.channelCode">
             <van-button
-              style="width: 20vw"
+              style="width: 80%"
               size="small"
               v-if="channel.state == 0"
               type="primary"
               @click="itemClick(data.hostCode, channel.channelCode)"
             >
-              {{ '通道' + channel.channelCode }}</van-button
+              {{  channel.channelName }}</van-button
             >
             <van-button
-              style="width: 20vw"
+              style="width: 80%"
               size="small"
               v-else-if="channel.state == 1"
               type="warning"
               @click="itemClick(data.hostCode, channel.channelCode)"
             >
-              {{ '通道' + channel.channelCode }}</van-button
+              {{  channel.channelName}}</van-button
             >
             <van-button
-              style="width: 20vw"
+              style="width:80%"
               size="small"
               v-else-if="channel.state == 2 || channel.state == null"
               type="default"
               @click="itemClick(data.hostCode, channel.channelCode)"
             >
-              {{ '通道' + channel.channelCode }}</van-button
+              {{  channel.channelName }}</van-button
             >
           </span>
         </template>
@@ -62,7 +65,7 @@ export default {
   components: { Card },
   data() {
     return {
-      expanded: false
+      expanded: this.defaultExpanded
     }
   },
   computed: {
@@ -70,7 +73,11 @@ export default {
   },
   watch: {},
   props: {
-    data: {}
+    data: {},
+    defaultExpanded:{
+      type:Boolean,
+      default:false
+    }
   },
   methods: {
     itemClick(hostCode, channelCode) {
@@ -92,7 +99,7 @@ export default {
   width: 100%;
 }
 .cell-channel-item {
-  width: 25%;
+  width: 50%;
   display: inline-block;
   margin-bottom: 10px;
   text-align: center;

src/views/menu/iot/videoDiagnosis/detail.vue

@@ -7,13 +7,9 @@
     <card>
       <van-cell-group>
         <van-cell
-          title="视频质量"
+          title="实时视频质量"
           :value="info.quality ? getDictLabel(info.quality.quality, 'video_diagnosis_state', '未上报') : '未上报'"
-          
-        />
-        <van-cell
-          title="检测日期"
-          :value="dayjs().format('YYYY年M月D日')"
+          title-style="font-weight:700"
         />
         <van-cell
           v-if="info.quality != null && info.quality.quality != null"

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

@@ -4,17 +4,28 @@
     <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>
+    <van-row>
+      <van-col span="24">      
+        <van-cell title="通道状态" @click="showStatus = true" is-link arrow-direction="down" :value="defaultStatus" />
+        <van-popup v-model="showStatus" round position="bottom">
+          <van-picker
+            title="通道状态"
+            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"></item>
+          <item :data="data" :defaultExpanded="!search.checkSub"></item>
         </template>
       </k-list>
     </div>
@@ -34,74 +45,69 @@ export default {
   name:'iot_videoDiagnosis',
   data() {
     return {
-      options: [],
       search: {
         orgId: this.orgId,
         checkSub: true,
         state: null,
-
         pageNum: 1,
         pageSize: 10
       },
-      showOrg: false,
-      dicts: []
+      showStatus:false,
+      defaultStatus:'全部',
+      dicts: ["app_video_diagnosis_status"]
     }
   },
   watch: {},
   created() {},
   mounted() {
-    this.getTreeList()
     this.search.orgId = this.orgId
   },
   
   computed: {
-    ...mapGetters(['orgName', 'orgId', 'dictionary'])
-    // statusOptions() {
-    //   let r = [
-    //     { value: null, text: '布撤防状态' }
-    //   ]
+    ...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 })
-    //     });
-    //   }
+      let dict = this.getDictItem('app_video_diagnosis_status');
+      if (dict) {
+        dict.forEach(element => {
+          r.push({ value: element.dictValue, text: element.dictLabel })
+        });
+      }
 
-    //   return r;
-    // }
+      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
-      }      
+    onStatusConfirm(opt) {
+      this.defaultStatus=opt.text;
+      this.search.state = opt.value
+      this.showStatus = false
+    },
+    onCancel(){
+      this.showStatus=false;
     }
+    // onStatusChanged(state) {
+    //   if(this.search.state===state){
+    //     this.search.state=null;
+    //   }else{
+    //     this.search.state = state
+    //   }      
+    // }
   }
 }
 </script>
@@ -122,23 +128,23 @@ export default {
     }
   }
 }
-.search-state {
-  width: 100%;
+// .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;
-  }
-}
+//   > 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;
-}
+// .alarm_state_selected {
+//   background-color: #409eff;
+//   border-color: #409eff;
+//   color: white;
+//   font-weight: 700;
+// }
 </style>