实现录像机硬盘

src/api/iot/dvrRecorder.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+// 查询【请填写功能名称】列表
+export function list(query) {
+  return request({
+    url: '/iot/dvrdisk/app/find',
+    method: 'post',
+    data: query
+  })
+}
+
+// // 查询详情
+// export function detail(hostCode, channelCode) {
+//   return request({
+//     url: `/iot/VideoDiagnosis/web/detail/${hostCode}/${channelCode}`,
+//     method: "get",
+//   });
+// }
+
+// // 获取某天的录像完整性
+// export function integrity(hostCode, channelCode,date) {
+//   return request({
+//     url: `/iot/VideoDiagnosis/web/integrity/${hostCode}/${channelCode}/${date}`,
+//     method: "get",
+//   });
+// }
+

src/router/router.config.js

@@ -166,6 +166,12 @@ export let routers = [
         meta: { title: '录像诊断记录', keepAlive: false }
       },
       {
+        path: '/iot/dvrDisk',
+        name: 'iot_dvrRecorder',
+        component: () => import('@/views/menu/iot/dvrRecorder/index'),
+        meta: { title: '硬盘诊断信息', keepAlive: false }
+      },
+      {
         path: '/monitoringCall',
         name: 'monitoringCall',
         component: () => import('@/views/menu/monitoringCall/index'),

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

@@ -0,0 +1,156 @@
+<template>
+  <card style="font-size: 15px">
+    <van-cell-group>
+      <van-cell :title="data.equipmentName" @click="onTitleClicked">
+        <template #default>
+          <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>
+        </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'])
+  },
+  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 > 80) {
+        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;
+  }
+}
+
+</style>

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

@@ -0,0 +1,140 @@
+<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" 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" :defaultExpanded="!search.checkSub"></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/dvrRecorder.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 {
+      options: [],
+      search: {
+        orgId: this.orgId,
+        checkSub: false,
+        state: null,
+        pageNum: 1,
+        pageSize: 10
+      },
+
+      dicts: []
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {
+    this.getTreeList()
+    this.search.orgId = this.orgId
+  },
+  computed: {
+    ...mapGetters(['orgName', 'orgId', 'dictionary'])
+  },
+  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')
+      // 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;
+
+}
+// .form-box {
+//   height: calc(100vh - 180px);
+//   padding: 0 30px 50px 30px;
+//   overflow: auto;
+// }
+// .radio-box {
+//   height: 100px;
+//   padding: 30px;
+// }
+// .org-name {
+//   font-size: 30px;
+//   line-height: 80px;
+//   height: 80px;
+//   text-align: center;
+// }
+</style>

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

@@ -43,7 +43,6 @@ export default {
         pageSize: 10
       },
       showOrg: false,
-      selectedOrgName: null,
       dicts: []
     }
   },
@@ -52,7 +51,6 @@ export default {
   mounted() {
     this.getTreeList()
     this.search.orgId = this.orgId
-    this.selectedOrgName = this.orgName
   },
   computed: {
     ...mapGetters(['orgName', 'orgId', 'dictionary'])
@@ -88,7 +86,6 @@ export default {
       // this.search.orgId = selectedOptions[selectedOptions.length-1].id;
       // let option = selectedOptions[selectedOptions.length - 1]
       this.search.orgId = node.id
-      this.selectedOrgName = node.shortName
     },
     orgCheckChanged(v) {
       this.search.checkSub = v