实现录像诊断页面

src/api/iot/videoDiagnosis.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+
+// 查询列表
+export function list(query) {
+    return request({
+      url: '/iot/VideoDiagnosis/web/page',
+      method: 'post',
+      data: query
+    })
+  }
+
+  // 查询详情
+export function detail(hostCode,channelCode) {
+    return request({
+      url: `/iot/VideoDiagnosis/web/detail/${hostCode}/${channelCode}`,
+      method: 'get',
+    })
+  }

src/views/iot/videoIntegrity/Calendar.vue → src/views/iot/videoDiagnosis/Calendar.vue

@@ -5,8 +5,8 @@
     :rows="layout.rows"
     :is-expanded="layout.isExpanded"
     :attributes="attrs"
-    :min-date='new Date()'
-    :max-date='new Date(2024, 3, 28)'
+    :min-date='start'
+    :max-date='new Date()'
   />
 </template>
 <script>
@@ -33,7 +33,7 @@ export default {
               fillMode: 'outline'
             },
           },
-          dates: { start: new Date(), end: new Date(2024, 3, 28) },
+          dates: { start:this.start , end:new Date() },
         },
         {
           dot:{
@@ -45,36 +45,57 @@ export default {
             },
             contentClass:'italic',
           },
-          dates:[ '2024-01-29','2024-01-31','2024-02-02','2024-02-03','2024-02-04','2024-02-05','2024-02-06','2024-02-07','2024-02-08','2024-02-09','2024-02-10','2024-02-11',],
+          dates:full,
         },
         {
           dot:{
-            color:'red',
+            color:'yellow',
             style:{
+              backgroundColor:'orange',
               width:'16px',
               height:'3px',
               borderRadius:'0'
             },
             contentClass:'italic',
           },
-          dates: '2024-01-30',
+          dates: paritialLoss,
         },
         {
           dot:{
-            color:'yellow',
+            color:'red',
             style:{
-              backgroundColor:'orange',
               width:'16px',
               height:'3px',
               borderRadius:'0'
             },
             contentClass:'italic',
           },
-          dates: '2024-02-01',
-        },
+          dates: allLoss,
+        },        
       ],
     };
   },
+  props:{
+    startDate:{
+      isRequired:true,
+    },
+    endDate:{
+      default:new Date()
+    },
+    full:{
+      isRequired:true,
+      type:Array,
+    },
+    paritialLoss:{
+      isRequired:true,
+      type:Array,
+    },
+    allLoss:{
+      isRequired:true,
+      type:Array,
+    }
+    
+  },
   mounted(){
      this.init();
   },

src/views/iot/videoDiagnosis/detail.vue

@@ -0,0 +1,427 @@
+<template>
+  <div class="videoDaysDetail">
+    <el-dialog
+      title="录像详情"
+      :visible.sync="isShow"
+      width="1200px"
+      :destroy-on-close="true"
+    >
+      <el-descriptions title="基础信息" :column="3">
+        <el-descriptions-item label="通道名称">{{
+          data.channelName
+        }}</el-descriptions-item>
+        <el-descriptions-item label="监控主机">{{
+          data.hostName
+        }}</el-descriptions-item>
+        <el-descriptions-item label="IP地址">{{
+          data.channelIp
+        }}</el-descriptions-item>
+        <!--        <el-descriptions-item label="组织机构" >{{data.orgName}}</el-descriptions-item>-->
+        <!--        <el-descriptions-item label="上报时间" >{{data.updateTime}}</el-descriptions-item>-->
+        <!--        <el-descriptions-item label="监控主机" >{{data.equipmentName}}</el-descriptions-item>-->
+        <!--        <el-descriptions-item label="摄像头" >{{data.channelName}}</el-descriptions-item>-->
+        <!--        <el-descriptions-item label="通道号" >{{data.channelCode}}</el-descriptions-item>-->
+        <!--        <el-descriptions-item label="计划存储天数" >{{data.planDays}}</el-descriptions-item>-->
+        <!--        <el-descriptions-item label="实际存储天数" >{{data.realDays}}</el-descriptions-item>-->
+        <!--        <el-descriptions-item label="计划录像开始时间" >{{data.planStartTime}}</el-descriptions-item>-->
+        <!--        <el-descriptions-item label="计划录像结束时间" >{{data.planEndTime}}</el-descriptions-item>-->
+      </el-descriptions>
+      <el-descriptions
+        title="录像质量"
+        :column="3"
+        v-if="data.quality == null || data.quality.state == null"
+      >
+        <el-descriptions-item label="检测结果"> 未知 </el-descriptions-item>
+      </el-descriptions>
+      <div v-else>
+        <el-descriptions title="录像质量" :column="3">
+          <el-descriptions-item label="检测结果">{{
+            data.quality.state == 1 ? "异常" : "正常"
+          }}</el-descriptions-item>
+          <el-descriptions-item label="更新时间">{{
+            dayjs(data.quality.updateTime).format("YYYY年M月D日H时m分")
+          }}</el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions :column="1" v-if="data.quality.quality == 1">
+          <el-descriptions-item label="诊断截图">
+            <div>
+              <ul class="legend-box">
+                <li>
+                  <el-tag
+                    size="small"
+                    type="warning"
+                    v-if="data.quality.signalLost"
+                    >视频信号</el-tag
+                  >
+                </li>
+                <li>
+                  <el-tag
+                    size="small"
+                    type="warning"
+                    v-if="data.quality.occlude"
+                    >遮挡</el-tag
+                  >
+                </li>
+                <li>
+                  <el-tag size="small" type="warning" v-if="data.quality.blurry"
+                    >模糊</el-tag
+                  >
+                </li>
+                <li>
+                  <el-tag
+                    size="small"
+                    type="warning"
+                    v-if="data.quality.colorCast"
+                    >偏色</el-tag
+                  >
+                </li>
+                <li>
+                  <el-tag
+                    size="small"
+                    type="warning"
+                    v-if="data.quality.snowflake"
+                    >雪花</el-tag
+                  >
+                </li>
+                <li>
+                  <el-tag size="small" type="warning" v-if="data.quality.stripe"
+                    >条纹</el-tag
+                  >
+                </li>
+                <li>
+                  <el-tag
+                    size="small"
+                    type="warning"
+                    v-if="data.quality.contrast"
+                    >对比度</el-tag
+                  >
+                </li>
+                <li>
+                  <el-tag
+                    size="small"
+                    type="warning"
+                    v-if="data.quality.brightness"
+                    >亮度</el-tag
+                  >
+                </li>
+              </ul>
+              <div
+                style="
+                  display: block;
+                  width: 300px;
+                  max-height: 300px;
+                  margin-top: 20px;
+                "
+              >
+                -->
+                <el-image
+                  :src="data.quality.image"
+                  :preview-src-list="[data.quality.image]"
+                >
+                  <div slot="error" class="image-slot">
+                    <i class="el-icon-picture-outline"></i>
+                  </div>
+                </el-image>
+              </div>
+            </div>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <el-descriptions
+        title="录像完整性"
+        :column="3"
+        v-if="data.integrity == null || data.integrity.state == null"
+      >
+        <el-descriptions-item label="检测结果"> 未知 </el-descriptions-item>
+      </el-descriptions>
+      <div v-else>
+        <el-descriptions title="录像完整性" :column="3">
+          <el-descriptions-item label="检测结果">{{
+            data.integrity.state == 1 ? "异常" : "正常"
+          }}</el-descriptions-item>
+          <el-descriptions-item label="录像日期">{{
+            dayjs(data.integrity.recordDate).format("YYYY年M月D日")
+          }}</el-descriptions-item>
+          <el-descriptions-item label="丢失时长">{{
+            data.integrity.loseDuration == 0
+              ? "未丢失"
+              : data.integrity.loseDuration + "分钟"
+          }}</el-descriptions-item>
+          <el-descriptions-item label="更新时间">{{
+            dayjs(data.integrity.updateTime).format("YYYY年M月D日H时m分")
+          }}</el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions :column="1">
+          <el-descriptions-item label="丢失时段">
+            <!--          <time-line></time-line>-->
+            <ul class="legend-box">
+              <li>
+                <i class="legend" style="background-color: #00b2ff"></i>
+                <span>计划时长</span>
+              </li>
+              <li>
+                <i class="legend" style="background-color: green"></i>
+                <span>有录像</span>
+              </li>
+              <li>
+                <i class="legend" style="background-color: red"></i>
+                <span>无录像</span>
+              </li>
+              <li>
+                <i class="legend" style="background-color: #aaa"></i>
+                <span>未知</span>
+              </li>
+            </ul>
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <div class="time-line-box">
+          <!--        <div style="width: 100%;height: 20px;background-color: red; "></div>-->
+          <progress-bar
+            :timeCell="timeCells"
+            :videoData="playVideoObj"
+            :startTime="start_timestamp"
+          ></progress-bar>
+        </div>
+        <div class="time-line">
+          <el-timeline :reverse="false">
+            <el-timeline-item
+              v-for="(activity, index) in data.loseDateList"
+              :key="index"
+              color="rgb(208 230 253)"
+              size="large"
+              type="primary"
+            >
+              <div class="time">
+                <div>
+                  <span class="year">
+                    {{ activity.month }}
+                  </span>
+                </div>
+                <!-- <div class="day">{{ activity.time.substring(0, 4) }}年</div> -->
+              </div>
+              <div class="ml10">
+                <el-tag
+                  v-for="(date, number) in activity.lostDates"
+                  :key="number"
+                >
+                  <div>
+                    {{ date }}
+                    <div class="reTip"></div>
+                  </div>
+                </el-tag>
+              </div>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </div>
+      <el-descriptions
+        title="录像存储"
+        :column="3"
+        v-if="data.storage == null || data.storage.planDays == null"
+      >
+        <el-descriptions-item label="存储状态"> 未知 </el-descriptions-item>
+      </el-descriptions>
+      <div v-else>
+        <el-descriptions title="录像存储" :column="3">
+          <el-descriptions-item label="计划存储"
+            >{{ data.storage.planDays }}天</el-descriptions-item
+          >
+          <el-descriptions-item label="实际存储"
+            >{{ data.storage.realDays }}天</el-descriptions-item
+          >
+          <el-descriptions-item label="最早录像存储日期"
+            >dayjs(data.storage.earliestTime).format("YYYY年M月D日")</el-descriptions-item
+          >
+        </el-descriptions>
+        <el-descriptions :column="1">
+          <el-descriptions-item label="存储状态">
+            <!--          <time-line></time-line>-->
+            <ul class="legend-box">
+              <li>
+                <i class="legend" style="background-color: green"></i>
+                <span>录像完整</span>
+              </li>
+              <li>
+                <i class="legend" style="background-color: orange"></i>
+                <span>部分丢失</span>
+              </li>
+              <li>
+                <i class="legend" style="background-color: red"></i>
+                <span>全部丢失</span>
+              </li>
+              <li>
+                <i class="legend" style="background-color: #cbd5e0"></i>
+                <span>计划录像天数</span>
+              </li>
+            </ul>
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <div class="calendar-box">
+          <Calendar
+            :startDate="data.storage.earliestTime"
+            :full="data.storage.fullDates"
+            :paritialLoss="data.storage.partialLossDates"
+            :allLoss="data.storage.allLostDates"
+          ></Calendar>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="onHide">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import TimeLine from "./timeLine.vue";
+import ProgressBar from "./ProgressBar";
+import Calendar from "./Calendar.vue";
+import dayjs from "dayjs";
+import { detail } from "@/api/iot/videoDiagnosis.js";
+
+export default {
+  components: { TimeLine, ProgressBar, Calendar },
+  data() {
+    return {
+      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
+      isShow: false,
+      data: {},
+      id: null,
+      playVideoObj: {}, //选中的正在播放的录像
+      timeCells: [], //录像时间块
+      start_timestamp: new Date().getTime() - 5 * 60 * 60 * 1000, //刻度轴开始时间
+    };
+  },
+  methods: {
+    dayjs,
+    async show(hostCode, channelCode) {
+      this.data = await detail(hostCode, channelCode);
+      this.isShow = true;
+    },
+    onHide() {
+      this.isShow = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.videoDaysDetail {
+  .block {
+    display: block;
+  }
+
+  .time-line {
+    margin-top: 10px;
+    margin-left: 80px;
+  }
+
+  .list-title {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #181b1e;
+  }
+
+  .list-company {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #2991ff;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  .list-desc {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #596878;
+  }
+
+  .el-tag--small {
+    margin-bottom: 10px;
+  }
+
+  .reTip {
+    display: block;
+    background: #f00;
+    border-radius: 50%;
+    width: 4px;
+    height: 4px;
+    top: -21px;
+    right: -26px;
+    position: relative;
+    z-index: 4;
+  }
+
+  //左侧时间
+  .time {
+    color: rgb(181 215 251);
+    position: absolute;
+    left: -35px;
+    top: -1px;
+
+    .year {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #20354a;
+    }
+
+    .day {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #596878;
+      text-align: center;
+      margin-top: 10px;
+    }
+  }
+
+  .legend-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    > li {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-right: 20px;
+      i {
+        margin-right: 5px;
+      }
+    }
+  }
+  .time-line-box {
+    width: 100%;
+    padding: 0 80px 50px 80px;
+  }
+  .calendar-box {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    //>div{
+    //  width: 30%;
+    //}
+  }
+  .el-calendar-table .el-calendar-day {
+    padding: 5px;
+    height: auto;
+  }
+  .el-calendar__button-group {
+    display: none;
+  }
+  .legend {
+    display: block;
+    width: 14px;
+    height: 10px;
+    margin-right: 5px;
+  }
+}
+</style>

src/views/iot/videoDiagnosis/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="app-container">
+    <div class="main-right-box">
+      <div class="main-search-box">
+        <el-form
+          v-show="showSearch"
+          ref="queryForm"
+          :inline="true"
+          :model="queryParams"
+          size="small"
+        >
+          <el-form-item label="机构名称">
+            <org-tree
+              v-model="queryParams.orgId"
+              @defaultKey="getDefaultKey"
+              @checkChange="changeCheckBox"
+              @click="handleNodeClick"
+              ref="orgTree"
+            ></org-tree>
+          </el-form-item>
+          <el-form-item label="监控主机" prop="hostName">
+            <el-input
+              v-model="queryParams.hostName"
+              clearable
+              placeholder="请输入监控主机名称"
+            />
+          </el-form-item>
+          <el-form-item label="摄像头" prop="channelName">
+            <el-input
+              v-model="queryParams.channelName"
+              clearable
+              placeholder="请输入摄像头名称"
+            />
+          </el-form-item>
+          <el-form-item label="录像丢失状态" prop="integrityState">
+            <el-select
+              v-model="queryParams.integrityState"
+              clearable
+              placeholder="请选择状态"
+            >
+              <el-option
+                v-for="dict in dict.type.VideoIntegrityState"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="录像存储状态" prop="daysState">
+            <el-select
+              v-model="queryParams.daysState"
+              clearable
+              placeholder="请选择状态"
+            >
+              <el-option
+                v-for="dict in dict.type.VideoDaysState"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="视频诊断状态" prop="diagnosisState">
+            <el-select
+              v-model="queryParams.diagnosisState"
+              clearable
+              placeholder="请选择状态"
+            >
+              <el-option
+                v-for="dict in dict.type.VideoDiagnosisState"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-button
+              icon="el-icon-search"
+              size="mini"
+              type="primary"
+              @click="handleQuery"
+              >搜索</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              icon="el-icon-refresh"
+              size="mini"
+              type="primary"
+              @click="resetQuery"
+              >重置</el-button
+            >
+          </el-col>
+          <!-- <el-col :span="1.5">
+            <el-button
+              type="primary"
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="['core:letter:add']"
+            >录入介绍信</el-button>
+          </el-col> -->
+          <right-toolbar
+            :showSearch.sync="showSearch"
+            @queryTable="getList"
+          ></right-toolbar>
+        </el-row>
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="dataList"
+        border
+        height="646"
+        size="small"
+      >
+        <el-table-column label="序号" type="index" align="center" width="70">
+          <template slot-scope="scope">
+            {{
+              (queryParams.pageNum - 1) * queryParams.pageSize +
+              scope.$index +
+              1
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          align="center"
+          label="组织机构"
+          prop="orgName"
+          width="200"
+        ></el-table-column>
+        <!--        <el-table-column :show-overflow-tooltip="true" align="center" label="设备名称" prop="reasons"/>-->
+        <el-table-column
+          :show-overflow-tooltip="true"
+          align="center"
+          label="通道名称"
+          prop="channelName"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="IP地址"
+          prop="channelIp"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="录像丢失时长"
+          prop="loseDuration"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="实际/计划存储(天)"
+          prop="planDays"
+        >
+        <template slot="r">
+          {{r.row.realDays}}/{{r.row.planDays}}
+        </template>
+      </el-table-column>
+        <el-table-column
+          align="center"
+          label="无视频信号"
+          prop="signalLost"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="视频遮挡"
+          prop="occlude"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="视频质量"
+          prop="quality"
+        ></el-table-column>
+        <el-table-column label="操作" align="center" width="120">
+          <template slot-scope="r">
+            <el-button type="text" @click="openDetail(r.row.hostCode,r.row.channelC)"
+              >详情</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :limit.sync="queryParams.pageSize"
+        :page.sync="queryParams.pageNum"
+        :total="total"
+        @pagination="getList"
+      />
+    </div>
+    <!--详情页面-->
+    <detail ref="DialogDetail" @success="refresh(true)"></detail>
+  </div>
+</template>
+
+<script>
+import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
+import dayjs from "dayjs";
+import detail from "./detail.vue";
+import {list} from "@/api/iot/videoDiagnosis.js"
+export default {
+  components: { detail, OrgTree },
+  dicts: ["VideoIntegrityState","VideoDaysState","VideoDiagnosisState"],
+
+  data() {
+    return {
+      loading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        hostName: null,
+        channelName: null,
+        integrityState: null,
+        daysState:null,
+        diagnosisState:null,
+        orgId: this.$store.getters.orgId,
+        checkSub:false,
+      },
+      dataList: [],
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    dayjs,
+    openDetail(hostCode,channelCode) {
+      this.$refs.DialogDetail.show(hostCode,channelCode);
+    },
+    getDefaultKey(key) {
+      this.queryParams.orgId = key;
+      this.getList();
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.orgId = data.id;
+      this.handleQuery();
+    },
+    /** 下穿状态改变*/
+    changeCheckBox() {
+      this.queryParams.checkSub = !this.queryParams.checkSub;
+      this.handleQuery();
+    },
+
+    /** 查询介绍信列表 */
+    getList() {
+      this.loading = true;
+      list(this.queryParams).then((response) => {
+        this.dataList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+  },
+};
+</script>

src/views/iot/videoIntegrity/detail.vue

@@ -1,377 +0,0 @@
-<template>
-  <div class="videoDaysDetail">
-    <el-dialog title="录像详情" :visible.sync="isShow" width="1200px" :destroy-on-close="true">
-      <el-descriptions title="基础信息" :column="3">
-        <el-descriptions-item label="通道名称" >测试摄像头001</el-descriptions-item>
-        <el-descriptions-item label="监控主机" >讯美测试部服务主机01</el-descriptions-item>
-        <el-descriptions-item label="IP地址" >192.168.1.1</el-descriptions-item>
-<!--        <el-descriptions-item label="组织机构" >{{data.orgName}}</el-descriptions-item>-->
-<!--        <el-descriptions-item label="上报时间" >{{data.updateTime}}</el-descriptions-item>-->
-<!--        <el-descriptions-item label="监控主机" >{{data.equipmentName}}</el-descriptions-item>-->
-<!--        <el-descriptions-item label="摄像头" >{{data.channelName}}</el-descriptions-item>-->
-<!--        <el-descriptions-item label="通道号" >{{data.channelCode}}</el-descriptions-item>-->
-<!--        <el-descriptions-item label="计划存储天数" >{{data.planDays}}</el-descriptions-item>-->
-<!--        <el-descriptions-item label="实际存储天数" >{{data.realDays}}</el-descriptions-item>-->
-<!--        <el-descriptions-item label="计划录像开始时间" >{{data.planStartTime}}</el-descriptions-item>-->
-<!--        <el-descriptions-item label="计划录像结束时间" >{{data.planEndTime}}</el-descriptions-item>-->
-      </el-descriptions>
-
-      <el-descriptions title="录像质量" :column="3">
-        <el-descriptions-item label="检测结果" >正常</el-descriptions-item>
-<!--        <el-descriptions-item label="原因" >被遮挡</el-descriptions-item>-->
-        <el-descriptions-item label="更新时间" >2024年1月29日 09:00</el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions :column="1">
-        <el-descriptions-item label="诊断截图" >
-          <div>
-<!--            <ul class="legend-box">-->
-<!--              <li>-->
-<!--                <el-tag size="small" type="warning">视频信号</el-tag>-->
-<!--              </li>-->
-<!--              <li>-->
-<!--                <el-tag size="small" type="warning">遮挡</el-tag>-->
-<!--              </li>-->
-<!--              <li>-->
-<!--                <el-tag size="small" type="warning">模糊</el-tag>-->
-<!--              </li>-->
-<!--              <li>-->
-<!--                <el-tag size="small" type="warning">偏色</el-tag>-->
-<!--              </li>-->
-<!--              <li>-->
-<!--                <el-tag size="small" type="warning">雪花</el-tag>-->
-<!--              </li>-->
-<!--              <li>-->
-<!--                <el-tag size="small" type="warning">条纹</el-tag>-->
-<!--              </li>-->
-<!--              <li>-->
-<!--                <el-tag size="small" type="warning">对比度</el-tag>-->
-<!--              </li>-->
-<!--              <li>-->
-<!--                <el-tag size="small" type="warning">亮度</el-tag>-->
-<!--              </li>-->
-<!--            </ul>-->
-<!--            <div style="display: block;width: 300px;max-height: 300px;margin-top: 20px;">-->
-<!--              <el-image :src="src" :preview-src-list="[src]">-->
-<!--                <div slot="error" class="image-slot">-->
-<!--                  <i class="el-icon-picture-outline"></i>-->
-<!--                </div>-->
-<!--              </el-image>-->
-<!--            </div>-->
-          </div>
-        </el-descriptions-item>
-      </el-descriptions>
-
-
-      <el-descriptions title="录像完整性" :column="3">
-        <el-descriptions-item label="录像日期" >2024年1月29日</el-descriptions-item>
-        <el-descriptions-item label="检测结果" >异常</el-descriptions-item>
-        <el-descriptions-item label="原因" >被遮挡</el-descriptions-item>
-        <el-descriptions-item label="丢失时长" >126分钟</el-descriptions-item>
-        <el-descriptions-item label="更新时间" >2024年1月29日 09:00</el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions :column="1">
-        <el-descriptions-item label="丢失时段" >
-          <!--          <time-line></time-line>-->
-          <ul class="legend-box">
-            <li>
-              <i class="legend" style="background-color: #00b2ff"></i>
-              <span>计划时长</span>
-            </li>
-            <li>
-              <i class="legend" style="background-color: green"></i>
-              <span>有录像</span>
-            </li>
-            <li>
-              <i class="legend" style="background-color: red"></i>
-              <span>无录像</span>
-            </li>
-            <li>
-              <i class="legend" style="background-color: #aaa"></i>
-              <span>未知</span>
-            </li>
-          </ul>
-        </el-descriptions-item>
-      </el-descriptions>
-
-      <div class="time-line-box">
-<!--        <div style="width: 100%;height: 20px;background-color: red; "></div>-->
-        <progress-bar :timeCell="timeCells" :videoData="playVideoObj" :startTime="start_timestamp" ></progress-bar>
-      </div>
-      <div class="time-line">
-        <el-timeline :reverse="false">
-          <el-timeline-item
-            v-for="(activity, index) in data.loseDateList"
-            :key="index"
-            color="rgb(208 230 253)"
-            size="large"
-            type="primary">
-            <div class="time">
-              <div>
-                <span class="year">
-                  {{ activity.month }}
-                </span>
-              </div>
-              <!-- <div class="day">{{ activity.time.substring(0, 4) }}年</div> -->
-            </div>
-            <div class="ml10">
-              <el-tag v-for="(date, number) in activity.lostDates" :key="number">
-                <div>{{ date }}
-                  <div class="reTip">
-                  </div>
-                </div>
-              </el-tag>
-            </div>
-          </el-timeline-item>
-        </el-timeline>
-      </div>
-
-      <el-descriptions title="录像存储" :column="3">
-        <el-descriptions-item label="计划存储" >90天</el-descriptions-item>
-        <el-descriptions-item label="实际存储" >12天</el-descriptions-item>
-        <el-descriptions-item label="最早录像存储日期" >2024年1月29日</el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions :column="1">
-        <el-descriptions-item label="存储状态" >
-          <!--          <time-line></time-line>-->
-          <ul class="legend-box">
-            <li>
-              <i class="legend" style="background-color: green"></i>
-              <span>录像完整</span>
-            </li>
-            <li>
-              <i class="legend" style="background-color: orange"></i>
-              <span>部分丢失</span>
-            </li>
-            <li>
-              <i class="legend" style="background-color: red"></i>
-              <span>全部丢失</span>
-            </li>
-            <li>
-              <i class="legend" style="background-color: #cbd5e0"></i>
-              <span>计划录像天数</span>
-            </li>
-          </ul>
-        </el-descriptions-item>
-      </el-descriptions>
-
-      <div  class="calendar-box">
-        <Calendar></Calendar>
-      </div>
-
-<!--      <el-carousel :autoplay="false" indicator-position="outside" trigger="click" >-->
-<!--        <el-carousel-item  key="1">-->
-<!--          <div class="calendar-box">-->
-<!--            <div v-for="(item,i ) in calendarList" :key="item.date">-->
-<!--              <el-calendar v-if="i <= 2" :value="item.date">-->
-<!--                <template-->
-<!--                  slot="dateCell"-->
-<!--                  slot-scope="{date, data}">-->
-<!--                  <div v-if="data.type === 'current-month'" style=" background-color: red;color:#fff;padding: 5px;display: flex;justify-content: center;align-items: center;">-->
-<!--                    {{dayjs(date).format('DD')}}-->
-<!--                  </div>-->
-<!--                  <div v-else style=" background-color: #ccc;color:#fff;padding: 5px;display: flex;justify-content: center;align-items: center;">-->
-<!--                    {{dayjs(date).format('DD')}}-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--              </el-calendar>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </el-carousel-item>-->
-<!--        <el-carousel-item v-if="calendarList.length > 3" key="2">-->
-<!--          <div class="calendar-box">-->
-<!--            <div v-for="(item,i ) in calendarList" :key="item.date">-->
-<!--              <el-calendar v-if="i >= 3" :value="item.date">-->
-<!--                <template-->
-<!--                  slot="dateCell"-->
-<!--                  slot-scope="{date, data}">-->
-<!--                  <div v-if="data.type === 'current-month'" style=" background-color: red;color:#fff;padding: 5px;display: flex;justify-content: center;align-items: center;">-->
-<!--                    {{dayjs(date).format('DD')}}-->
-<!--                  </div>-->
-<!--                  <div v-else style=" background-color: #ccc;color:#fff;padding: 5px;display: flex;justify-content: center;align-items: center;">-->
-<!--                    {{dayjs(date).format('DD')}}-->
-<!--                  </div>-->
-<!--                </template>-->
-<!--              </el-calendar>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </el-carousel-item>-->
-<!--      </el-carousel>-->
-
-
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="onHide">关闭</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-
-import TimeLine from "./timeLine.vue";
-import ProgressBar from './ProgressBar';
-import Calendar from "./Calendar.vue";
-import dayjs from 'dayjs'
-export default {
-  components: {TimeLine,ProgressBar,Calendar},
-  data() {
-    return {
-      src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
-      isShow: false,
-      data: {},
-      id: null,
-      playVideoObj:{},   //选中的正在播放的录像
-      timeCells:[],    //录像时间块
-      start_timestamp:new Date().getTime() - 5*60*60*1000,    //刻度轴开始时间
-      calendarList:[
-        {
-          date:'2024-02'
-        },
-        {
-          date:'2024-03'
-        },
-        {
-          date:'2024-04'
-        },
-        {
-          date:'2024-05'
-        },
-        {
-          date:'2024-06'
-        },
-        {
-          date:'2024-07'
-        }
-      ],
-    };
-  },
-  methods: {
-    dayjs,
-    async show(id) {
-      this.id = id;
-      //this.data = await this.$api.videoDaysCheck.one(id);
-      this.isShow = true;
-    },
-    onHide() {
-      this.isShow = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.videoDaysDetail {
-  .block {
-    display: block;
-  }
-
-  .time-line {
-    margin-top: 10px;
-    margin-left: 80px;
-  }
-
-  .list-title {
-    font-size: 16px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #181b1e;
-  }
-
-  .list-company {
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #2991ff;
-    margin-top: 15px;
-    margin-bottom: 15px;
-  }
-
-  .list-desc {
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #596878;
-  }
-
-  .el-tag--small {
-    margin-bottom: 10px;
-  }
-
-  .reTip {
-    display: block;
-    background: #f00;
-    border-radius: 50%;
-    width: 4px;
-    height: 4px;
-    top: -21px;
-    right: -26px;
-    position: relative;
-    z-index: 4;
-  }
-
-  //左侧时间
-  .time {
-    color: rgb(181 215 251);
-    position: absolute;
-    left: -35px;
-    top: -1px;
-
-    .year {
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #20354a;
-    }
-
-    .day {
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #596878;
-      text-align: center;
-      margin-top: 10px;
-    }
-  }
-
-  .legend-box{
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    >li{
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      margin-right: 20px;
-      i{
-        margin-right: 5px;
-      }
-    }
-  }
-  .time-line-box{
-    width: 100%;
-    padding: 0 80px 50px 80px;
-  }
-  .calendar-box{
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    //>div{
-    //  width: 30%;
-    //}
-  }
-  .el-calendar-table .el-calendar-day{
-    padding:5px;
-    height: auto;
-  }
-  .el-calendar__button-group{
-    display: none;
-  }
-  .legend {
-    display: block;
-    width: 14px;
-    height: 10px;
-    margin-right: 5px;
-  }
-}
-</style>

src/views/iot/videoIntegrity/index.vue

@@ -1,185 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="main-right-box">
-      <div class="main-search-box">
-        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
-          <el-form-item label="机构名称">
-            <org-tree
-              v-model="queryParams.orgId"
-              @defaultKey="getDefaultKey"
-              @checkChange="changeCheckBox"
-              @click="handleNodeClick"
-              :showCheckSub="false"
-              ref="orgTree"
-            ></org-tree>
-          </el-form-item>
-          <el-form-item label="监控主机" prop="reasons">
-            <el-input
-              v-model="queryParams.reasons"
-              clearable
-              placeholder="请输入关键字"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="摄像头" prop="type">
-            <el-select v-model="queryParams.type" clearable placeholder="请选择介绍信类型">
-              <el-option
-                v-for="dict in dict.type.out_in_type"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="状态" prop="approveStatus">
-            <el-select v-model="queryParams.approveStatus" clearable placeholder="请选择状态">
-              <el-option
-                v-for="dict in dict.type.out_in_approve_status"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10">
-          <el-col :span="1.5">
-
-            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button icon="el-icon-refresh" size="mini" type="primary" @click="resetQuery">重置</el-button>
-          </el-col>
-          <!-- <el-col :span="1.5">
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['core:letter:add']"
-            >录入介绍信</el-button>
-          </el-col> -->
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-      </div>
-      <el-table v-loading="loading" :data="dataList" border height="646" size="small">
-        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
-        <el-table-column :show-overflow-tooltip="true" align="center" label="组织机构" prop="type" width="200"></el-table-column>
-<!--        <el-table-column :show-overflow-tooltip="true" align="center" label="设备名称" prop="reasons"/>-->
-        <el-table-column :show-overflow-tooltip="true" align="center" label="通道名称" prop="letterNo" ></el-table-column>
-        <el-table-column align="center" label="IP地址" prop="letterNo" ></el-table-column>
-        <el-table-column align="center" label="录像丢失时长" prop="letterNo" ></el-table-column>
-        <el-table-column align="center" label="实际/计划存储(天)" prop="letterNo" ></el-table-column>
-        <el-table-column align="center" label="无视频信号" prop="letterNo" ></el-table-column>
-        <el-table-column align="center" label="视频遮挡" prop="letterNo" ></el-table-column>
-        <el-table-column align="center" label="视频质量" prop="letterNo" ></el-table-column>
-<!--        <el-table-column align="center" label="更新日期" width="150">-->
-<!--          <template slot-scope="scope">-->
-<!--            <span>{{ scope.row.startTime }}</span>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-        <el-table-column label="操作" align="center"  width="120" >
-          <template slot-scope="r">
-            <el-button type="text" @click="openDetail(r.row.id)">详情</el-button>
-          </template>
-        </el-table-column>
-<!--        <el-table-column label="录像详情" ref="tabs" width="730px">-->
-<!--          <template slot="header">-->
-<!--            <img src="../../../assets/images/header.png" alt="" width="700px" />-->
-<!--          </template>-->
-<!--          <template slot-scope="r">-->
-<!--            <TimeLine :data="r.row" :rems="700" />-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-      </el-table>
-
-      <pagination
-        v-show="total>0"
-        :limit.sync="queryParams.pageSize"
-        :page.sync="queryParams.pageNum"
-        :total="total"
-        @pagination="getList"
-      />
-
-    </div>
-    <!--详情页面-->
-    <detail ref="DialogDetail" @success="refresh(true)"></detail>
-
-  </div>
-</template>
-
-<script>
-import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
-import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
-import TimeLine from "./timeLine.vue";
-import {getLetterApproveList} from "@/api/core/letter";
-import dayjs from 'dayjs';
-import detail from "./detail.vue";
-export default {
-  components: {detail, DataRangePicker, OrgTree,TimeLine },
-  dicts: ['letter_status', 'out_in_type', 'out_in_approve_status'],
-  data() {
-    return {
-      loading:false,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        reasons: null,
-        type: null,
-        approveStatus: null,
-        orgId: this.$store.getters.orgId,
-      },
-      dataList:[],
-    };
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    dayjs,
-    openDetail(id){
-      this.$refs.DialogDetail.show(id);
-    },
-    getDefaultKey(key) {
-      this.queryParams.orgId = key;
-      this.getList();
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.orgId = data.id;
-      this.handleQuery();
-    },
-    /** 下穿状态改变*/
-    changeCheckBox() {
-      this.queryParams.checkSub = !this.queryParams.checkSub;
-      this.getList();
-    },
-
-    /** 查询介绍信列表 */
-    getList() {
-      this.loading = true;
-      getLetterApproveList(this.queryParams).then(response => {
-        this.dataList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-  }
-};
-</script>

src/views/iot/videoRecorder/index.vue

@@ -216,11 +216,11 @@ import DetailDialog from "./detail.dialog.vue";
 import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
 import dayjs from "dayjs";
 import api from "@/api/iot/dvrDisk.js";
-
+import { mapGetters } from "vuex";
 export default {
   components: { OrgTree, DetailDialog, DataRangePicker },
-  name: "Task",
-  dicts: ["sys_access_cycle"],
+  name: "dvrDisk",
+  // dicts: ["sys_access_cycle"],
   data() {
     return {
       // 遮罩层
@@ -255,7 +255,7 @@ export default {
     this.getList();
   },
   computed: {
-    ...mapGetters(["orgId", "orgName"]),
+    ...mapGetters(["orgId", "userId","orgName"]),
   },
   methods: {
     /** 查询监控调阅任务列表 */