From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 135 ++++++++++++++++++++++++++++++++------------ 1 files changed, 97 insertions(+), 38 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue index 464e7ea..ead0f1a 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>鏈夊紓甯�</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"> @@ -601,7 +608,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); }); }); @@ -658,7 +665,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 +712,13 @@ }); }); }); + }, + hasError(data) { + if (!data.EventLst || data.EventLst.length == 0) { + 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 +899,11 @@ .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 +911,8 @@ } .flex-box { display: flex; + height: 18px; + line-height: 18px; } .filter-area { background: #fff; @@ -976,7 +995,6 @@ .config { display: flex; flex-wrap: no-wrap; - cursor: pointer; border-bottom: 1px solid #d7dce8; .title { padding: 10px 20px; @@ -1052,7 +1070,7 @@ .more { margin-top: 7px; padding: 0px 6px; - + cursor: pointer; margin-right: 10px; width: 46px; height: 25px; @@ -1066,6 +1084,7 @@ .multCheck { margin-top: 7px; width: 44px; + cursor: pointer; height: 23px; line-height: 23px; padding: 0px 12px; @@ -1077,14 +1096,6 @@ span { color: #ee4e6e; } - // &:hover { - // color: #7695ec; - // border-color: #7695ec; - // } - // &.checked { - // color: #409eff; - // border-color: #409eff; - // } } } .el-menu.el-menu--horizontal { @@ -1157,6 +1168,7 @@ font-size: 18px; padding: 2px 4px 0px 4px; border-radius: 4px; + cursor: pointer; &.menu { margin-right: 10px; span { @@ -1178,22 +1190,26 @@ .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%; @@ -1208,27 +1224,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 +1303,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 +1332,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 +1358,8 @@ .el-dialog__header { padding: 0px; .el-dialog__headerbtn { - top: 6px; + top: 10px; + font-size: 20px; } } .title-partment { @@ -1342,6 +1400,7 @@ } .dialog-event { z-index: 2096 !important; + .el-dialog { width: 1000px; height: 800px; -- Gitblit v1.8.0