| | |
| | | <span class="title">{{ config.title }}</span |
| | | > : |
| | | <span class="val" v-for="option in config.data" :key="option.id"> |
| | | <!-- <template> |
| | | <div> |
| | | |
| | | </div> |
| | | </template>--> |
| | | <span v-if="option.isChecked" class="val-show"> |
| | | {{ option.name }} |
| | | <i>、</i> |
| | |
| | | @change="filterSearchData" |
| | | > |
| | | <el-option value label="全部"></el-option> |
| | | <el-option :value="false" label="未关注"></el-option> |
| | | <el-option :value="true" label="已关注"></el-option> |
| | | <el-option :value="'1'" label="未关注"></el-option> |
| | | <el-option :value="'0'" label="已关注"></el-option> |
| | | </el-select> |
| | | </div> |
| | | <div> |
| | |
| | | > |
| | | {{ |
| | | label.Desc + |
| | | (index == data.LableLst.length - 1 ? "" : ",") |
| | | (index == data.LableLst.length - 1 ? "" : ",") |
| | | }} |
| | | </span> |
| | | </div> |
| | | <div v-else-if=" hasError(data)"> |
| | | <span style="color:orangered;">有异常</span> |
| | | </div> |
| | | <div v-else> |
| | | <span>无异常</span> |
| | |
| | | |
| | | <el-table-column label="大小" prop="VideoSize" sortable> |
| | | <template slot-scope="scope" style="cursor: pointer"> |
| | | <div>{{ Math.round((+scope.row.VideoSize) / (1024*1024)) + " MB" }}</div> |
| | | <div> |
| | | {{ Math.round(+scope.row.VideoSize / (1024 * 1024)) + " MB" }} |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="视频时间" prop="StartTime" sortable></el-table-column> |
| | | <el-table-column |
| | | label="视频时间" |
| | | prop="StartTime" |
| | | sortable |
| | | ></el-table-column> |
| | | <!-- <el-table-column label="创建日期" prop="VideoCreateDate" sortable></el-table-column> --> |
| | | |
| | | <el-table-column label="操作"> |
| | |
| | | keyword: "", |
| | | IsFollow: "", |
| | | searchTime: [ |
| | | new Date(2020, 0, 1, 0, 0, 0), |
| | | new Date(2021, 0, 1, 0, 0, 0), |
| | | new Date(2021, 11, 31, 23, 59, 59), |
| | | ], |
| | | curTabPage: 1, |
| | |
| | | const end = new Date(); |
| | | const start = new Date(); |
| | | start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
| | | //start.setHours(0,0,0); |
| | | picker.$emit("pick", [start, end]); |
| | | }, |
| | | }, |
| | |
| | | this.tabPageSize = size; |
| | | this.filterSearchData(); |
| | | }, |
| | | 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" |
| | | }, |
| | | handleTableSizeChange(size) { |
| | | this.tablePageSize = size; |
| | | this.filterSearchData(); |
| | |
| | | //二级查询 |
| | | filterSearchData() { |
| | | let _this = this; |
| | | let isFollow = ""; |
| | | if (this.IsFollow === "") { |
| | | isFollow = ""; |
| | | } else if (!!this.IsFollow) { |
| | | isFollow = "1"; |
| | | } else { |
| | | isFollow = "0"; |
| | | } |
| | | let query = { |
| | | KeyWord: this.keyword, |
| | | StartDate: this.searchTime[0], |
| | |
| | | PageSize: |
| | | this.showType == "list" ? this.tablePageSize : this.tabPageSize, |
| | | IsDetail: this.showType == "list", |
| | | IsFollow: isFollow, |
| | | IsFollow: this.IsFollow , |
| | | IsOperate: this.IsOperate, |
| | | }; |
| | | let filterQuerys = []; |
| | |
| | | _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); |
| | | }); |
| | | }); |
| | |
| | | item.LableLst = lblst; |
| | | return item; |
| | | }); |
| | | _this.tabData |
| | | } |
| | | }); |
| | | }, |
| | | //一级查询 |
| | | init() { |
| | | if (this.checkedConfigs.length) { |
| | | this.filterSearchData() |
| | | return |
| | | } |
| | | let _this = this; |
| | | let query = { |
| | | KeyWord: this.keyword, |
| | |
| | | IsFollow: this.IsFollow, |
| | | IsOperate: this.IsOperate, |
| | | }; |
| | | let filterQuerys = []; |
| | | let filterQuerys = []; |
| | | this.checkedConfigs.forEach((config) => { |
| | | let checkedOpts = config.data.filter((option) => option.isChecked); |
| | | if (checkedOpts.length) { |
| | |
| | | _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); |
| | | }); |
| | | }); |
| | |
| | | return item; |
| | | }); |
| | | } |
| | | |
| | | res.filterlst.forEach((config) => { |
| | | this.$set(config, "isShow", true); |
| | | // config.data = Object.keys(config.Node).map(key => { |
| | | // let obj = {}; |
| | | // obj.name = key; |
| | | // obj.id = config.Node[key] |
| | | // return obj |
| | | // }); |
| | | config.data = config.Node.map((item) => { |
| | | let obj = {}; |
| | | obj.name = item[0]; |
| | |
| | | config.showMore = false; |
| | | } |
| | | }); |
| | | // console.log(this.optionalConfigs); |
| | | }); |
| | | }); |
| | | }, |
| | | toggleFollow(data) { |
| | | data.IsFollow == "0" ? (data.IsFollow = "1") : (data.IsFollow = "0"); |
| | | updateFollow({ |
| | | id : data.id, |
| | | id: data.id, |
| | | IsFollow: data.IsFollow, |
| | | }).then((res) => { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: data.IsFollow == "0"? "已添加关注!":"已取消关注!", |
| | | message: data.IsFollow == "0" ? "已添加关注!" : "已取消关注!", |
| | | }); |
| | | }); |
| | | }, |
| | |
| | | _this.selectedVideo = data; |
| | | _this.videoDialogVisible = true; |
| | | }, |
| | | checkFollow() {}, |
| | | checkType(type) { |
| | | this.showType = type; |
| | | this.filterSearchData(); |
| | |
| | | option.isChecked = true; |
| | | } |
| | | this.checkedConfigs.push(config); |
| | | |
| | | config.isShow = false; |
| | | config.isMultCheck = false; |
| | | if (config.IsAdvanced) { |
| | | this.showAdvance = false; |
| | | } |
| | | // this.$nextTick(() => { |
| | | // this.$set(config, 'isShow', false) |
| | | // }) |
| | | }, |
| | | |
| | | cancleMultCheck(config) { |
| | |
| | | const disY = e.clientY - resizeEl.offsetTop; |
| | | |
| | | document.onmousemove = function (e) { |
| | | e.preventDefault(); // 移动时禁用默认事件 // 通过事件委托,计算移动的距离 |
| | | e.preventDefault(); // 移动时禁用默认事件 通过事件委托,计算移动的距离 |
| | | |
| | | const x = e.clientX - disX + (e.clientX - clientX); //这里 由于elementUI的dialog控制居中的,所以水平拉伸效果是双倍 |
| | | const y = e.clientY - disY; //比较是否小于最小宽高 |
| | |
| | | |
| | | <style lang="scss"> |
| | | .search-for-video-analyze { |
| | | //padding: 20px 30px; |
| | | //出横向滚动条 |
| | | padding: 20px 40px; |
| | | .flex-box { |
| | |
| | | } |
| | | .config-submenu { |
| | | .el-menu--horizontal { |
| | | //max-width: 700px; |
| | | //overflow-x: auto; |
| | | left: 20px !important; |
| | | & > ul { |
| | | flex-wrap: wrap; |
| | |
| | | margin: 0 -30px; |
| | | margin-bottom: -30px; |
| | | padding: 0; |
| | | // .el-row { |
| | | // display: flex; |
| | | // flex-wrap: wrap; |
| | | // } |
| | | .el-table__row { |
| | | cursor: pointer; |
| | | } |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: contain; |
| | | // width: 100%; |
| | | // max-height: 200px; |
| | | // border-radius: 3px; |
| | | } |
| | | } |
| | | .video-info { |
| | |
| | | top: -22px; |
| | | } |
| | | .dialog-video { |
| | | // z-index: 2020 !important; |
| | | .el-dialog { |
| | | width: 1180px; |
| | | // height: 893px; |
| | | } |
| | | .el-dialog__body { |
| | | background: #eaeaea; |
| | | padding: 0; |
| | | // height: 100%; |
| | | height: inherit; |
| | | } |
| | | .el-dialog__header { |
| | |
| | | .window-view { |
| | | width: 100%; |
| | | height: auto; |
| | | // height: 100%; |
| | | // min-height: 684px; |
| | | overflow: auto; |
| | | z-index: 2000; |
| | | } |