From 7a98d6724da914d86b6ec2912dba9bfdf2423c39 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期二, 22 二月 2022 15:14:27 +0800 Subject: [PATCH] 添加rtsp用户信息urlencode功能 --- src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 187 ++++++++++++++++++++++++++++++++++------------ 1 files changed, 139 insertions(+), 48 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue index 464e7ea..0449fbb 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue @@ -261,11 +261,11 @@ v-for="(label, index) in data.LableLst" :key="index" > - {{ - label.Desc + - (index == data.LableLst.length - 1 ? "" : "锛�") - }} + {{ label.Desc }} </span> + </div> + <div v-else-if="hasError(data)" class="has-error"> + <span>{{ errWord(data) }}</span> </div> <div v-else class="no-error"> <span>鏃犲紓甯�</span> @@ -319,9 +319,16 @@ <div class="content" v-show="showType == 'list'"> <el-table :data="tableData" + stripe fit ref="elTable" @row-click="checkVideoDetail" + :header-cell-style="{ + background: '#2D52D7', + color: '#fff', + height: '50px', + padding: 0, + }" > <el-table-column label="鍚嶇О" prop="VideoName" sortable width="500"> <template slot-scope="scope" style="cursor: pointer"> @@ -590,7 +597,6 @@ } }); Object.assign(query, ...filterQuerys); - getlst(query).then((res) => { if (_this.showType == "list") { _this.tableTotal = res.total; @@ -601,7 +607,7 @@ _this.tabData = _this.tabData.map(function (item) { const set = new Set(); item.LableLst.forEach(function (label) { - label.Desc.split("锛�").forEach(function (d) { + label.Desc.split(",").forEach(function (d) { set.add(d); }); }); @@ -627,7 +633,7 @@ StartDate: this.searchTime[0], EndDate: this.searchTime[1], PageIndex: - this.showType == "list" ? this.curTablePage : this.showType == "list", + this.showType == "list" ? this.curTablePage : this.curTabPage, PageSize: this.showType == "list" ? this.tablePageSize : this.tabPageSize, IsDetail: this.showType == "list", @@ -658,7 +664,7 @@ _this.tabData = _this.tabData.map(function (item) { const set = new Set(); item.LableLst.forEach(function (label) { - label.Desc.split("锛�").forEach(function (d) { + label.Desc.split(",").forEach(function (d) { set.add(d); }); }); @@ -705,6 +711,43 @@ }); }); }); + }, + errWord(data) { + let text; + data.EventLst.forEach((item, i) => { + if ( + item.state == 0 && + item.Event.indexOf("杩涘嚭绔�") == -1 && + item.Event.indexOf("淇″彿鏈�") == -1 && + item.Event.indexOf("杩囧垎鐩�") == -1 + ) { + text = item.Event; + } + }); + return text || "鏈墜姣�"; + }, + hasError(data) { + let status = true; + if (!data.EventLst || data.EventLst.length == 0) { + return false; + } + + data.EventLst.forEach((item) => { + if ( + item.Event.indexOf("鐬湜") > -1 || + item.Event.indexOf("浜烘暟鍙樺寲") > -1 + ) { + status = false; + false; + } + }); + + if (!status) { + return false; + } + + const t = data.EventLst.some((x) => x.state == 0); + return t && data.IsOperate == "1"; }, toggleFollow(data) { data.IsFollow == "0" ? (data.IsFollow = "1") : (data.IsFollow = "0"); @@ -885,8 +928,10 @@ .search-for-video-analyze { background-color: #f4f6f9; margin: 0 5px; + margin-bottom: 10px; * { box-sizing: content-box; + color: #425277; } .el-input__inner { border: 1px solid #d7dce8; @@ -894,6 +939,8 @@ } .flex-box { display: flex; + height: 18px; + line-height: 18px; } .filter-area { background: #fff; @@ -976,7 +1023,6 @@ .config { display: flex; flex-wrap: no-wrap; - cursor: pointer; border-bottom: 1px solid #d7dce8; .title { padding: 10px 20px; @@ -1011,9 +1057,9 @@ padding: 0 10px; text-align: left; width: fit-content; + cursor: pointer; } &:hover > .option-name { - // outline: 1px solid #a8b7ee; background: #e2e7f9; span { color: #2d52d7; @@ -1052,7 +1098,7 @@ .more { margin-top: 7px; padding: 0px 6px; - + cursor: pointer; margin-right: 10px; width: 46px; height: 25px; @@ -1066,6 +1112,7 @@ .multCheck { margin-top: 7px; width: 44px; + cursor: pointer; height: 23px; line-height: 23px; padding: 0px 12px; @@ -1077,14 +1124,6 @@ span { color: #ee4e6e; } - // &:hover { - // color: #7695ec; - // border-color: #7695ec; - // } - // &.checked { - // color: #409eff; - // border-color: #409eff; - // } } } .el-menu.el-menu--horizontal { @@ -1151,16 +1190,21 @@ .show-type { display: flex; .list span { - font-size: 20px; + font-size: 18px; + line-height: 20px; } .type { - font-size: 18px; - padding: 2px 4px 0px 4px; + font-size: 17px; border-radius: 4px; + cursor: pointer; + height: 20px; + width: 20px; + line-height: 19px; + &.menu { - margin-right: 10px; + margin-right: 5px; span { - font-size: 15px; + font-size: 14px; } } &.current { @@ -1178,26 +1222,30 @@ .el-table__row { cursor: pointer; } + .el-table { + border: none; + margin-bottom: 20px; + } .el-col { margin-bottom: 10px; } .card { - cursor: pointer; position: relative; text-align: left; background: #fff; border-radius: 0 0 5px 5px; - height: 360px; + height: 368px; margin-bottom: 10px; border: 1px solid#CCD9F0; &:hover { box-shadow: 3px 3px 4px #d3def2; } .video-wrap { + cursor: pointer; border-radius: 3px; width: 100%; - padding-top: 56.25%; - height: 0; + // padding-top: 56.25%; + height: 57%; position: relative; img { position: absolute; @@ -1208,27 +1256,58 @@ } } .video-info { - padding: 10px; + padding: 14px; .base-info { > div { margin-bottom: 1px; } label { - color: #999; + color: #808dab; padding-right: 8px; + line-height: 16px; + } + span { + font-weight: bold; + color: #425277; + line-height: 16px; } } .mark-info { margin: 10px 0; color: #3d68e1; .abnormal { - color: red; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + .abnormal-label { + display: inline-block; + border: 1px solid; + border: 1px solid #bf3a3a; + border-radius: 2px; + color: #bf3a3a; + padding: 0 3px; + margin-right: 3px; + } } .event-tag { - margin-top: 10px; + margin-top: 8px; + .el-tag.el-tag--info { + background-color: #96a0b7; + border-color: #96a0b7; + color: #fff; + cursor: pointer; + height: 19px; + padding: 0 5px; + } + } + .has-error { + width: fit-content; + background: #bf3a3a; + padding: 1px 5px; + border-radius: 2px; + span { + color: #fff; + } } .no-error { width: fit-content; @@ -1256,28 +1335,27 @@ font-size: 20px; right: 10px; bottom: 10px; - i { - color: #c7d0e5; - } - .follow { - color: #f90741; - } } } + .el-table--striped + .el-table__body + tr.el-table__row--striped + td.el-table__cell { + background: #f4f6f9; + } .el-table { - border: 1px solid #dedede; th { background: #f5f5f5; color: #333; } - .operation { - cursor: pointer; - .star { - color: #ccc; - } - .follow { - color: #409eff; - } + th.el-table__cell > .cell { + color: #fff; + } + .el-table__row > td { + border: none; + } + th.is-leaf { + border: none; } } .pagination-center { @@ -1286,12 +1364,23 @@ padding: 10px 0 20px; } } + .star { + font-size: 20px; + i { + color: #c7d0e5; + } + .follow { + color: #f90741; + } + } .el-dialog__wrapper { top: -22px; } .dialog-video { .el-dialog { width: 1340px; + top: 70px; + transform: none; } .el-dialog__body { background: #eaeaea; @@ -1301,7 +1390,8 @@ .el-dialog__header { padding: 0px; .el-dialog__headerbtn { - top: 6px; + top: 10px; + font-size: 20px; } } .title-partment { @@ -1342,6 +1432,7 @@ } .dialog-event { z-index: 2096 !important; + .el-dialog { width: 1000px; height: 800px; -- Gitblit v1.8.0