| | |
| | | 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> |
| | |
| | | <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"> |
| | |
| | | _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); |
| | | }); |
| | | }); |
| | |
| | | _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); |
| | | }); |
| | | }); |
| | |
| | | }); |
| | | }); |
| | | }); |
| | | }, |
| | | 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"); |
| | |
| | | .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; |
| | |
| | | } |
| | | .flex-box { |
| | | display: flex; |
| | | height: 18px; |
| | | line-height: 18px; |
| | | } |
| | | .filter-area { |
| | | background: #fff; |
| | |
| | | .config { |
| | | display: flex; |
| | | flex-wrap: no-wrap; |
| | | cursor: pointer; |
| | | border-bottom: 1px solid #d7dce8; |
| | | .title { |
| | | padding: 10px 20px; |
| | |
| | | .more { |
| | | margin-top: 7px; |
| | | padding: 0px 6px; |
| | | |
| | | cursor: pointer; |
| | | margin-right: 10px; |
| | | width: 46px; |
| | | height: 25px; |
| | |
| | | .multCheck { |
| | | margin-top: 7px; |
| | | width: 44px; |
| | | cursor: pointer; |
| | | height: 23px; |
| | | line-height: 23px; |
| | | padding: 0px 12px; |
| | |
| | | span { |
| | | color: #ee4e6e; |
| | | } |
| | | // &:hover { |
| | | // color: #7695ec; |
| | | // border-color: #7695ec; |
| | | // } |
| | | // &.checked { |
| | | // color: #409eff; |
| | | // border-color: #409eff; |
| | | // } |
| | | } |
| | | } |
| | | .el-menu.el-menu--horizontal { |
| | |
| | | font-size: 18px; |
| | | padding: 2px 4px 0px 4px; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | &.menu { |
| | | margin-right: 10px; |
| | | span { |
| | |
| | | .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%; |
| | |
| | | } |
| | | } |
| | | .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; |
| | |
| | | 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 { |
| | |
| | | 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; |
| | |
| | | .el-dialog__header { |
| | | padding: 0px; |
| | | .el-dialog__headerbtn { |
| | | top: 6px; |
| | | top: 10px; |
| | | font-size: 20px; |
| | | } |
| | | } |
| | | .title-partment { |
| | |
| | | } |
| | | .dialog-event { |
| | | z-index: 2096 !important; |
| | | |
| | | .el-dialog { |
| | | width: 1000px; |
| | | height: 800px; |