新增 智能运维页面

src/api/iot/videoDiagnosis.js

@@ -38,3 +38,43 @@ export function integrity(hostCode, channelCode,date) {
     hideLoading:true
   });
 }
+
+
+  /**
+ * 获取角标
+ * @param {} orgId 
+ * @returns 
+ */
+   export function getSmartOprationBadge(orgId){
+    return request({
+      url: `/iot/smartopration/app/badge/${orgId}`,
+      method: 'get',
+      hideLoading:true
+    });
+  }
+
+  // 查询【请填写功能名称】列表
+export function smartOprationlist(query) {
+  if(query.activeTab == "videoCheck"){
+    return request({
+      url: '/iot/smartopration/app/videocheck/page',
+      method: 'post',
+      data: query
+    })
+  }
+  if(query.activeTab == "videoDiagnosis"){
+    return request({
+      url: '/iot/smartopration/app/videodiagnosis/page',
+      method: 'post',
+      data: query
+    })
+  }
+  if(query.activeTab == "dvrDisk"){
+    return request({
+      url: '/iot/smartopration/app/disk/page',
+      method: 'post',
+      data: query
+    })
+  }
+  
+}

src/views/menu/iot/smartOpration/components/diskItem.vue

@@ -0,0 +1,187 @@
+<template>
+  <card style="font-size: 15px">
+    <van-cell-group>
+      <van-cell>
+        <!-- :title="data.equipmentName" -->
+      <template #title>
+          <span>{{data.equipmentName}}</span>
+          <van-tag type="primary" v-if="getDiskTotalCount>0" @click="showNormalChannel()" class="custom-title-tag">正常硬盘：{{getDiskTotalCount}}</van-tag>
+          <van-tag type="danger" v-if="getExceptionDiskCount>0" @click="showExceptionChannel()"  class="custom-title-tag">异常硬盘：{{getExceptionDiskCount}}</van-tag>
+      </template>
+      
+        <template #right-icon>
+          <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 color="#969799">未知</van-tag>
+            <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>
+      </van-cell>
+      <van-cell title="所属机构" :value="data.orgName" />
+      <van-cell
+        title="诊断时间"
+        :value="dayjs(data.stateUpdateTime).format('YYYY年M月D日H时m分')"
+        v-if="data.stateUpdateTime"
+      />
+      <van-cell value-class="cell-disklist" v-if="expanded">
+        <template #default>
+          <div v-for="(disk, index) in data.diskInfos" :key="disk.id" class="diskInfo">
+            <div>
+              {{ renderDiskDesc(disk, index) }}
+            </div>
+            <van-progress pivot-text="" :percentage="diskProgress(disk)" :color="progressColor(disk)"> </van-progress>
+          </div>
+        </template>
+      </van-cell>
+    </van-cell-group>
+
+    <!-- <van-row>
+      <van-col span="24">
+        <span v-show="expanded" class="cell-channel-item" v-for="channel in data.channels" :key="channel.channelCode">
+          <van-button
+            style="width: 20vw"
+            size="small"
+            v-if="channel.state == 0"
+            type="primary"
+            @click="itemClick(data.hostCode, channel.channelCode)"
+          >
+            {{ '通道' + channel.channelCode }}</van-button
+          >
+          <van-button
+            style="width: 20vw"
+            size="small"
+            v-else-if="channel.state == 1"
+            type="warning"
+            @click="itemClick(data.hostCode, channel.channelCode)"
+          >
+            {{ '通道' + channel.channelCode }}</van-button
+          >
+          <van-button
+            style="width: 20vw"
+            size="small"
+            v-else-if="channel.state == 2 || channel.state == null"
+            type="default"
+            @click="itemClick(data.hostCode, channel.channelCode)"
+          >
+            {{ '通道' + channel.channelCode }}</van-button
+          >
+        </span>
+      </van-col>
+    </van-row> -->
+  </card>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import Card from '@/components/card/index.vue'
+import dayjs from 'dayjs'
+export default {
+  components: { Card },
+  data() {
+    return {
+      expanded: this.defaultExpanded
+    }
+  },
+  computed: {
+    ...mapGetters(['orgName', 'orgId', 'dictionary']),
+    getDiskTotalCount() {
+      if(this.data && this.data.diskInfos)
+      {
+        let temp= this.data.diskInfos.filter(x=> x.state!=1);
+        // console.log("getNormalChannelCount",temp);
+        return temp.length;
+      }
+      return 0;
+    },
+    getExceptionDiskCount() {
+      if(this.data && this.data.channels)
+      {
+        let temp= this.data.diskInfos.filter(x=> x.state===1);
+        // console.log("getExceptionChannelCount",temp);
+        return temp.length;
+      }
+      return 0;
+    }
+  },
+  watch: {
+    defaultExpanded: {
+      immediate: true,
+      handler: function (v) {
+        this.expanded = v
+      }
+    }
+  },
+  props: {
+    data: {},
+    defaultExpanded: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    dayjs,
+    // itemClick(hostCode, channelCode) {
+    //   this.$router.push(`/iot/videoDiagnosis/detail?hostCode=${hostCode}&channelCode=${channelCode}`)
+    // },
+
+    onTitleClicked() {
+      this.expanded = !this.expanded
+    },
+    renderDiskDesc(disk, index) {
+      return `(${index + 1})${(disk.available / 1024).toFixed(0)}G剩余/(共${(disk.total / 1024).toFixed(0)}G)`
+    },
+    diskProgress(disk) {
+      if (!disk.total) {
+        return 0
+      }
+
+      return (((disk.total - disk.available) / disk.total) * 100).toFixed(2)
+    },
+    progressColor(disk) {
+      if (!disk.total) {
+        return 'success'
+      }
+
+      let rate = this.diskProgress(disk)
+      if (rate > 90) {
+        return 'rgb(245,108,108)'
+      } else if (rate > 70) {
+        return 'rgb(230,162,60)'
+      } else {
+        return 'rgb(103,194,58)'
+      }
+    }
+  },
+  async created() {},
+  async mounted() {}
+}
+</script>
+<style lang="scss" scoped>
+.row {
+  height: 8vw;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.cell-disklist {
+  width: 100%;
+
+  > div {
+    width: 50%;
+    display: inline-block;
+    margin-bottom: 3vw;
+  }
+
+  > div:nth-child(odd) {
+    padding-right: 3vw;
+  }
+  > div:nth-child(even) {
+    padding-left: 3vw;
+  }
+}
+.custom-title-tag{
+  margin-left: 50px;
+  margin-right: 10px;
+}
+</style>

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

@@ -25,25 +25,32 @@
     <van-row>
         <van-col span="24">
           <van-tabs v-model="activeTab" @click="tabActiveHandler">
-            <van-tab name="0" title="录像检测" badge="10"></van-tab>
-            <van-tab name="1" title="视频质量诊断"></van-tab>
-            <van-tab name="3" title="磁盘空间"></van-tab>            
+            <van-tab name="videoCheck" title="录像检测" :badge="videoCheckBadge"></van-tab>
+            <van-tab name="videoDiagnosis" title="视频质量诊断" :badge="videoDiagnosisBadge"></van-tab>
+            <van-tab name="dvrDisk" title="磁盘空间" :badge="dvrDiskBadge"></van-tab>
           </van-tabs>
         </van-col>
-        <van-col span="8" class="customVanCell">
-          <van-cell title="录像机总数：" value="3" />
+        <van-col v-if="activeTab!='dvrDisk'" span="8" class="customVanCell">
+          <van-cell title="录像机总数：" :value="dvrTotalCount" />
         </van-col>     
-        <van-col span="8" class="customVanCell">
-          <van-cell title="通道总数：" value="80" />
+        <van-col v-if="activeTab!='dvrDisk'" span="8" class="customVanCell">
+          <van-cell title="通道总数：" :value="channelTotalCount" />
         </van-col>
-        <van-col span="8" class="customVanCell">
-          <van-cell title="异常总数：" value="2" />
+        <van-col v-if="activeTab!='dvrDisk'" span="8" class="customVanCell">
+          <van-cell title="异常总数：" :value="exChannelCount" />
+        </van-col> 
+        <van-col v-if="activeTab =='dvrDisk'" span="12" class="customVanCell">
+          <van-cell title="硬盘总数：" :value="dvrDiskTotalCount" />
+        </van-col> 
+        <van-col v-if="activeTab =='dvrDisk'" span="12" class="customVanCell">
+          <van-cell title="异常总数：" :value="exDiskCount" />
         </van-col> 
     </van-row>
     <div class="container">
-      <k-list :list="list" :params="search" :auto="false" ref="list" @load="reLoadData">
+      <k-list :list="smartOprationlist" :params="search" :auto="false" ref="list" @load="reLoadData">
         <template slot-scope="{ data }">
-          <item :data="data" :defaultExpanded="!search.checkSub"></item>
+          <disk-item v-if="activeTab =='dvrDisk'" :data="data" :defaultExpanded="!search.checkSub"></disk-item>      
+          <item v-else :data="data" :defaultExpanded="!search.checkSub"></item>
         </template>
       </k-list>
     </div>
@@ -54,23 +61,36 @@
 import NavBar from '@/components/NavBar'
 import { mapGetters } from 'vuex'
 import { deptTreeList } from '@/api/public'
-import { list } from '@/api/iot/videoDiagnosis.js'
+import { list,smartOprationlist,getSmartOprationBadge } from '@/api/iot/videoDiagnosis.js'
 import KList from '@/components/list/index.vue'
 import Item from './components/item.vue'
+import DiskItem from './components/diskItem.vue'
 import OrgTree from '@/components/orgTree'
 export default {
-  components: { NavBar, KList, Item, OrgTree },
+  components: { NavBar, KList, Item, OrgTree,DiskItem },
   name:'iot_smartOpration',
   data() {
     return {
-      activeTab:"0",
+      activeTab:"videoCheck",
       search: {
         orgId: this.orgId,
         checkSub: true,
         state: null,
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
+        activeTab:"videoCheck",
       },
+      videoCheckBadge:null,
+      videoDiagnosisBadge:null,
+      dvrDiskBadge:null,
+
+      dvrTotalCount:null,
+      channelTotalCount:null,
+      exChannelCount:null,
+
+      dvrDiskTotalCount:null,
+      exDiskCount:null,
+
       showStatus:false,
       defaultStatus:'全部',
       dicts: ["app_video_diagnosis_status"]
@@ -80,8 +100,8 @@ export default {
   created() {},
   mounted() {
     this.search.orgId = this.orgId
-  },
-  
+    this.getBadge();
+  },  
   computed: {
     ...mapGetters(['orgName', 'orgId', 'dictionary']),
     statusOptions() {
@@ -101,8 +121,9 @@ export default {
   },
   methods: {
     list,
+    smartOprationlist,
     tabActiveHandler(){
-
+      this.search.activeTab=this.activeTab;
     },
     // refreshData(){
     //   this.search.pageNum=0;
@@ -124,7 +145,66 @@ export default {
     },
     reLoadData(data)
     {
-      console.log("reLoadData",data)
+       console.log("reLoadData",data)
+       if(this.activeTab=="dvrDisk"){
+          // this.dvrDiskTotalCount =data.length;
+          let template =0;
+          let templateEx =0;
+          data.forEach(x=>{ 
+            let ex= x.diskInfos.filter(x=> x.state===1);
+            templateEx=templateEx+ex.length;
+            template=template+x.diskInfos.length;
+          })
+          this.dvrDiskTotalCount =template;
+          this.exDiskCount=templateEx;
+       }
+       else{
+        this.dvrTotalCount=data.length;
+        if(data.length>0){
+          let template =0;
+          let templateEx =0;
+          data.forEach(x=>{ 
+            let ex= x.channels.filter(x=> x.state===1);
+            templateEx=templateEx+ex.length;
+            template=template+x.channels.length;
+          })
+          this.channelTotalCount =template;
+          this.exChannelCount=templateEx;
+        }
+        else
+        {
+          this.channelTotalCount =0;
+          this.exChannelCount=0;
+        }
+      
+       }
+       console.log("reLoadData1", this.dvrTotalCount)
+       this.$forceUpdate()
+    },
+    getBadge()
+    {
+      getSmartOprationBadge(this.orgId).then(r => {
+        console.log("getSmartOprationBadge",r)
+          if (r.videoCheckBadge) {            
+            this.videoCheckBadge=r.videoCheckBadge> 99 ? '99+' : r.videoCheckBadge;          
+          } else {
+            this.videoCheckBadge=null;           
+          }
+
+          if (r.videoDiagnosisBadge) {
+            this.videoDiagnosisBadge=r.videoDiagnosisBadge> 99 ? '99+' : r.videoDiagnosisBadge;
+          
+          } else {
+            this.videoDiagnosisBadge=null;            
+          }
+
+          if (r.dvrDiskBadge) {
+              this.dvrDiskBadge=r.dvrDiskBadge> 99 ? '99+' : r.dvrDiskBadge;
+          } else {
+            this.dvrDiskBadge=null;
+          }
+          this.$forceUpdate()
+        })
     }
     // onStatusChanged(state) {
     //   if(this.search.state===state){