|
|
@@ -7,12 +7,15 @@
|
|
|
border
|
|
|
:label-style="labelStyle"
|
|
|
:contentStyle="content_style"
|
|
|
- ><el-descriptions-item label="监控主机">{{
|
|
|
- data.hostName
|
|
|
- }}</el-descriptions-item>
|
|
|
+ >
|
|
|
+ <el-descriptions-item label="监控主机">{{
|
|
|
+ data.hostName
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
<el-descriptions-item label="通道名称">{{
|
|
|
- data.channelName
|
|
|
- }}</el-descriptions-item>
|
|
|
+ data.channelName
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
|
|
|
<!-- <el-descriptions-item label="IP地址">{{
|
|
|
data.channelIp
|
|
|
@@ -20,71 +23,71 @@
|
|
|
</el-descriptions>
|
|
|
<el-tabs type="border-card">
|
|
|
<el-tab-pane label="录像存储情况">
|
|
|
-<!-- <el-descriptions
|
|
|
- title="录像存储天数"
|
|
|
- :column="3"
|
|
|
- border
|
|
|
- :label-style="labelStyle"
|
|
|
- :contentStyle="content_style"
|
|
|
- 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"
|
|
|
- border
|
|
|
- :label-style="labelStyle"
|
|
|
- :contentStyle="content_style"
|
|
|
- >
|
|
|
- <el-descriptions-item label="计划存储"
|
|
|
- >{{ data.storage.planDays }}天</el-descriptions-item
|
|
|
- >
|
|
|
- <el-descriptions-item label="实际存储"
|
|
|
- >{{ data.storage.realDays }}天</el-descriptions-item
|
|
|
- >
|
|
|
- <el-descriptions-item label="最早录像存储日期">{{
|
|
|
- data.storage.earliestTime
|
|
|
- ? 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>
|
|
|
+ <!-- <el-descriptions
|
|
|
+ title="录像存储天数"
|
|
|
+ :column="3"
|
|
|
+ border
|
|
|
+ :label-style="labelStyle"
|
|
|
+ :contentStyle="content_style"
|
|
|
+ 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"
|
|
|
+ border
|
|
|
+ :label-style="labelStyle"
|
|
|
+ :contentStyle="content_style"
|
|
|
+ >
|
|
|
+ <el-descriptions-item label="计划存储"
|
|
|
+ >{{ data.storage.planDays }}天</el-descriptions-item
|
|
|
+ >
|
|
|
+ <el-descriptions-item label="实际存储"
|
|
|
+ >{{ data.storage.realDays }}天</el-descriptions-item
|
|
|
+ >
|
|
|
+ <el-descriptions-item label="最早录像存储日期">{{
|
|
|
+ data.storage.earliestTime
|
|
|
+ ? 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="calenderStartDate"
|
|
|
- :endDate="data.storage.lastTime"
|
|
|
- :full="data.storage.fullDates"
|
|
|
- :paritialLoss="data.storage.partialLossDates"
|
|
|
- :allLoss="data.storage.allLostDates"
|
|
|
- @select="onSelectDate"
|
|
|
- ></Calendar>
|
|
|
- </div>
|
|
|
- </div>-->
|
|
|
+ <div class="calendar-box">
|
|
|
+ <Calendar
|
|
|
+ :startDate="calenderStartDate"
|
|
|
+ :endDate="data.storage.lastTime"
|
|
|
+ :full="data.storage.fullDates"
|
|
|
+ :paritialLoss="data.storage.partialLossDates"
|
|
|
+ :allLoss="data.storage.allLostDates"
|
|
|
+ @select="onSelectDate"
|
|
|
+ ></Calendar>
|
|
|
+ </div>
|
|
|
+ </div>-->
|
|
|
<div style="height: 10px"></div>
|
|
|
<el-descriptions
|
|
|
title="录像完整性"
|
|
|
@@ -94,7 +97,7 @@
|
|
|
:contentStyle="content_style"
|
|
|
v-if="integrity == null || integrity.state == null"
|
|
|
>
|
|
|
- <el-descriptions-item label="检测结果"> 未知 </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="检测结果"> 未知</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<div v-else>
|
|
|
<el-descriptions
|
|
|
@@ -105,17 +108,21 @@
|
|
|
:contentStyle="content_style"
|
|
|
>
|
|
|
<el-descriptions-item label="检测结果">{{
|
|
|
- getLabel(videoIntegrityState, integrity.state)
|
|
|
- }}</el-descriptions-item>
|
|
|
+ getLabel(videoIntegrityState, integrity.state)
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
<el-descriptions-item label="录像日期">{{
|
|
|
- dayjs(integrity.recordDate).format("YYYY年M月D日")
|
|
|
- }}</el-descriptions-item>
|
|
|
+ dayjs(integrity.recordDate).format("YYYY年M月D日")
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
<el-descriptions-item label="丢失时长">{{
|
|
|
- lostDurationText(integrity.loseDuration)
|
|
|
- }}</el-descriptions-item>
|
|
|
+ lostDurationText(integrity.loseDuration)
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
<el-descriptions-item label="更新时间">{{
|
|
|
- dayjs(integrity.updateTime).format("YYYY年M月D日H时m分")
|
|
|
- }}</el-descriptions-item>
|
|
|
+ dayjs(integrity.updateTime).format("YYYY年M月D日H时m分")
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<el-descriptions :column="1">
|
|
|
<el-descriptions-item label="丢失时段">
|
|
|
@@ -159,7 +166,7 @@
|
|
|
:contentStyle="content_style"
|
|
|
v-if="data.quality == null || data.quality.quality == null"
|
|
|
>
|
|
|
- <el-descriptions-item label="检测结果"> 未知 </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="检测结果"> 未知</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<div v-else>
|
|
|
<el-descriptions
|
|
|
@@ -170,11 +177,13 @@
|
|
|
:contentStyle="content_style"
|
|
|
>
|
|
|
<el-descriptions-item label="检测结果">{{
|
|
|
- getLabel(videoDiagnosisState, data.quality.quality)
|
|
|
- }}</el-descriptions-item>
|
|
|
+ getLabel(videoDiagnosisState, data.quality.quality)
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
<el-descriptions-item label="更新时间">{{
|
|
|
- dayjs(data.quality.updateTime).format("YYYY年M月D日H时m分")
|
|
|
- }}</el-descriptions-item>
|
|
|
+ dayjs(data.quality.updateTime).format("YYYY年M月D日H时m分")
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
<el-descriptions-item
|
|
|
label="诊断截图"
|
|
|
v-if="data.quality.quality == 1"
|
|
|
@@ -186,7 +195,8 @@
|
|
|
size="small"
|
|
|
type="danger"
|
|
|
v-if="data.quality.signalLost"
|
|
|
- >视频信号</el-tag
|
|
|
+ >视频信号
|
|
|
+ </el-tag
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
@@ -194,7 +204,8 @@
|
|
|
size="small"
|
|
|
type="danger"
|
|
|
v-if="data.quality.occlude"
|
|
|
- >遮挡</el-tag
|
|
|
+ >遮挡
|
|
|
+ </el-tag
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
@@ -202,7 +213,8 @@
|
|
|
size="small"
|
|
|
type="danger"
|
|
|
v-if="data.quality.blurry"
|
|
|
- >模糊</el-tag
|
|
|
+ >模糊
|
|
|
+ </el-tag
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
@@ -210,7 +222,8 @@
|
|
|
size="small"
|
|
|
type="danger"
|
|
|
v-if="data.quality.colorCast"
|
|
|
- >偏色</el-tag
|
|
|
+ >偏色
|
|
|
+ </el-tag
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
@@ -218,7 +231,8 @@
|
|
|
size="small"
|
|
|
type="danger"
|
|
|
v-if="data.quality.snowflake"
|
|
|
- >雪花</el-tag
|
|
|
+ >雪花
|
|
|
+ </el-tag
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
@@ -226,7 +240,8 @@
|
|
|
size="small"
|
|
|
type="danger"
|
|
|
v-if="data.quality.stripe"
|
|
|
- >条纹</el-tag
|
|
|
+ >条纹
|
|
|
+ </el-tag
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
@@ -234,7 +249,8 @@
|
|
|
size="small"
|
|
|
type="danger"
|
|
|
v-if="data.quality.contrast"
|
|
|
- >对比度</el-tag
|
|
|
+ >对比度
|
|
|
+ </el-tag
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
@@ -242,7 +258,8 @@
|
|
|
size="small"
|
|
|
type="danger"
|
|
|
v-if="data.quality.brightness"
|
|
|
- >亮度</el-tag
|
|
|
+ >亮度
|
|
|
+ </el-tag
|
|
|
>
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -280,12 +297,12 @@
|
|
|
import ProgressBar from "./ProgressBar";
|
|
|
import Calendar from "./Calendar.vue";
|
|
|
import dayjs from "dayjs";
|
|
|
-import { detail } from "@/api/iot/videoDiagnosis.js";
|
|
|
-import { getLabel } from "@/views/commonOption.js";
|
|
|
-import { integrity } from "@/api/iot/videoDiagnosis";
|
|
|
+import {detail} from "@/api/iot/videoDiagnosis.js";
|
|
|
+import {getLabel} from "@/views/commonOption.js";
|
|
|
+import {integrity} from "@/api/iot/videoDiagnosis";
|
|
|
|
|
|
export default {
|
|
|
- components: { ProgressBar, Calendar },
|
|
|
+ components: {ProgressBar, Calendar},
|
|
|
data() {
|
|
|
return {
|
|
|
isShow: false,
|
|
|
@@ -331,6 +348,7 @@ export default {
|
|
|
dayjs,
|
|
|
getLabel,
|
|
|
async show(hostCode, channelCode) {
|
|
|
+ this.reset();
|
|
|
detail(hostCode, channelCode).then((r) => {
|
|
|
let data = r.data;
|
|
|
data.hostCode = hostCode;
|
|
|
@@ -382,6 +400,13 @@ export default {
|
|
|
(this.timeCells = []), //录像时间块
|
|
|
(this.lostData = []);
|
|
|
},
|
|
|
+ reset() {
|
|
|
+ this.id = null;
|
|
|
+ this.integrity = {};
|
|
|
+ this.data = {};
|
|
|
+ this.timeCells = [];
|
|
|
+ this.lostData = [];
|
|
|
+ },
|
|
|
onSelectDate(date) {
|
|
|
this.getIntegrity(this.data.hostCode, this.data.channelCode, date);
|
|
|
},
|
|
|
@@ -494,12 +519,14 @@ export default {
|
|
|
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;
|
|
|
}
|
|
|
@@ -511,10 +538,12 @@ export default {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.time-line-box {
|
|
|
width: 100%;
|
|
|
padding: 0 80px 50px 80px;
|
|
|
}
|
|
|
+
|
|
|
.calendar-box {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
@@ -524,13 +553,16 @@ export default {
|
|
|
// width: 30%;
|
|
|
//}
|
|
|
}
|
|
|
+
|
|
|
.el-calendar-table .el-calendar-day {
|
|
|
padding: 5px;
|
|
|
height: auto;
|
|
|
}
|
|
|
+
|
|
|
.el-calendar__button-group {
|
|
|
display: none;
|
|
|
}
|
|
|
+
|
|
|
.legend {
|
|
|
display: block;
|
|
|
width: 14px;
|