From 8c7d1ed32b7653e9e0bf72544a28f99144e92d04 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期四, 25 二月 2021 10:02:04 +0800 Subject: [PATCH] 增加事件标签和label去重 --- src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 524 ++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 350 insertions(+), 174 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue index d312194..23901ef 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue @@ -21,14 +21,20 @@ <el-button size="small" type="primary" @click="init">鎼滅储</el-button> </div> <div class="checked-config"> - <span style="margin-top:3px;">宸查�夋潯浠�:</span> + <span style="margin-top: 3px">宸查�夋潯浠�:</span> <span v-show="!checkedConfigs.length" class="tip" - style="padding-left: 5px;margin-top:3px;" - >杩樻湭閫夋嫨绛涢�夋潯浠�</span> - <div class="config-item" v-for="(config,index) in checkedConfigs" :key="index"> - <span class="title">{{config.title}}</span> : + style="padding-left: 5px; margin-top: 3px" + >杩樻湭閫夋嫨绛涢�夋潯浠�</span + > + <div + class="config-item" + v-for="(config, index) in checkedConfigs" + :key="index" + > + <span class="title">{{ config.title }}</span + > : <span class="val" v-for="option in config.data" :key="option.id"> <!-- <template> <div> @@ -36,51 +42,83 @@ </div> </template>--> <span v-if="option.isChecked" class="val-show"> - {{option.name}} + {{ option.name }} <i>銆�</i> </span> </span> - <i class="el-icon-close remove" @click="removeCheckedConfig(config)"></i> + <i + class="el-icon-close remove" + @click="removeCheckedConfig(config)" + ></i> </div> <el-button class="clear-config-btn" v-if="checkedConfigs.length" size="mini" @click="clearCheckedConfigs" - >鍙栨秷閫夋嫨</el-button> + >鍙栨秷閫夋嫨</el-button + > </div> <div class="optional-config"> - <div class="config" v-for="(config,index) in optionalConfigs" :key="index"> + <div + class="config" + v-for="(config, index) in optionalConfigs" + :key="index" + > <template v-if="config.isShow"> - <div class="title">{{config.title}}</div> + <div class="title">{{ config.title }}</div> <div class="options-wrap"> <div class="options" - :ref="'options'+config.id" - :style="{height:fixedOneLineHeight+'px'}" + :ref="'options' + config.id" + :style="{ height: fixedOneLineHeight + 'px' }" > - <div class="option" v-for="(option,index) in config.data" :key="index"> + <div + class="option" + v-for="(option, index) in config.data" + :key="index" + > <div v-show="config.isMultCheck"> <el-checkbox v-model="option.isChecked"></el-checkbox> - <span>{{option.name}}</span> + <span>{{ option.name }}</span> </div> - <div v-show="!config.isMultCheck" @click="checkOption(config,option)"> - <span>{{option.name}}</span> + <div + v-show="!config.isMultCheck" + @click="checkOption(config, option)" + > + <span>{{ option.name }}</span> </div> </div> </div> <div class="btns text-center" v-show="config.isMultCheck"> - <el-button size="mini" @click="cancleMultCheck(config)">鍙栨秷</el-button> - <el-button size="mini" type="primary" @click="checkOption(config)">纭畾</el-button> + <el-button size="mini" @click="cancleMultCheck(config)" + >鍙栨秷</el-button + > + <el-button + size="mini" + type="primary" + @click="checkOption(config)" + >纭畾</el-button + > </div> </div> <div class="right-btns"> - <div class="more" v-if="config.showMore" @click="showMore(config)"> + <div + class="more" + v-if="config.showMore" + @click="showMore(config)" + > <span>鏇村</span> - <i :class="config.isShowMore?'el-icon-arrow-up':'el-icon-arrow-down'"></i> + <i + :class=" + config.isShowMore + ? 'el-icon-arrow-up' + : 'el-icon-arrow-down' + " + ></i> </div> <div - :class="[{'checked':config.isMultCheck},'multCheck']" + :class="[{ checked: config.isMultCheck }, 'multCheck']" @click="toggleMultCheck(config)" > <i class="el-icon-plus"></i> @@ -92,21 +130,26 @@ <div class="config" v-if="showAdvance"> <div class="title">楂樼骇閫夐」</div> <div> - <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"> + <el-menu + class="el-menu-demo" + mode="horizontal" + @select="handleSelect" + > <el-submenu class="config-submenu" :popper-append-to-body="false" - v-for="(config,index) in highLevelConfigs" + v-for="(config, index) in highLevelConfigs" :key="index" - :index="index+''" + :index="index + ''" > - <template slot="title">{{config.title}}</template> + <template slot="title">{{ config.title }}</template> <el-menu-item - v-for="(option,ind) in config.data" + v-for="(option, ind) in config.data" :key="ind" - :index="index+'-'+ind" - @click="checkOption(config,option)" - >{{option.name}}</el-menu-item> + :index="index + '-' + ind" + @click="checkOption(config, option)" + >{{ option.name }}</el-menu-item + > </el-submenu> </el-menu> </div> @@ -117,14 +160,22 @@ <div class="header-bar clearfix"> <div class="left"> <div> - <el-select v-model="IsFollow" size="mini" @change="filterSearchData"> + <el-select + v-model="IsFollow" + size="mini" + @change="filterSearchData" + > <el-option value label="鍏ㄩ儴"></el-option> <el-option :value="false" label="鏈叧娉�"></el-option> <el-option :value="true" label="宸插叧娉�"></el-option> </el-select> </div> <div> - <el-select v-model="IsOperate" size="mini" @change="filterSearchData"> + <el-select + v-model="IsOperate" + size="mini" + @change="filterSearchData" + > <el-option value label="鍏ㄩ儴"></el-option> <el-option value="0" label="鏈鐞�"></el-option> <el-option value="1" label="宸插鐞�"></el-option> @@ -133,18 +184,33 @@ </div> <div class="right"> <div class="show-type"> - <div class="type menu" :class="{'current':showType=='menu'}" @click="checkType('menu')"> + <div + class="type menu" + :class="{ current: showType == 'menu' }" + @click="checkType('menu')" + > <i class="el-icon-menu"></i> </div> - <div class="type" :class="{'current':showType=='list'}" @click="checkType('list')"> + <div + class="type" + :class="{ current: showType == 'list' }" + @click="checkType('list')" + > <i class="el-icon-s-operation"></i> </div> </div> </div> </div> - <div class="content" v-show="showType=='menu'"> + <div class="content" v-show="showType == 'menu'"> <el-row :gutter="20"> - <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in tabData" :key="data.id"> + <el-col + :xs="8" + :sm="6" + :md="6" + :lg="6" + v-for="data in tabData" + :key="data.id" + > <div class="card"> <div class="video-wrap" @click="checkVideoDetail(data)"> <img :src="data.VideoCover" alt /> @@ -153,35 +219,63 @@ <div class="base-info"> <div class="flex-box"> <label>杞﹀彿:</label> - <span>{{data.CarNumber}}</span> + <span>{{ data.CarNumber }}</span> </div> <div class="flex-box"> <label>杞︽:</label> - <span>{{data.TrainNumber}}</span> + <span>{{ data.TrainNumber }}</span> </div> <div class="flex-box"> <label>鏃堕棿:</label> - <span>{{data.VideoDate}}</span> + <span>{{ data.VideoDate }}</span> </div> <div class="flex-box"> - <label>鍙告満|鍓徃鏈�:</label> - <span>{{data.Driver1}}|{{data.Driver2}}</span> + <label>鍙告満 | 鍓徃鏈�:</label> + <span>{{ data.Driver1 }} | {{ data.Driver2 }}</span> </div> </div> <div class="mark-info"> - <div class="abnormal" v-if="data.LableLst&&data.LableLst.length"> - <span v-for="(label,index) in data.LableLst" :key="index">{{label.Desc}}</span> + <div + class="abnormal" + v-if="data.LableLst && data.LableLst.length" + > + <span + v-for="(label, index) in data.LableLst" + :key="index" + >{{ label.Desc +(index==data.LableLst.length-1?"":"锛�")}}</span + > </div> - <div v-else> + <div v-else > <span>鏃犲紓甯�</span> + </div> + <div + class="event-tag" + v-if="data.EventLst && data.EventLst.length" + > + <el-tag + size="mini" + type="info" + v-for="(label, index) in data.EventLst" + :key="index" + style="margin-right:5px;margin-bottom:5px" + >{{ label.Event }}</el-tag + > </div> </div> <div class="tag-info"> - <div class="tag" v-for="(tag,index) in data.tags" :key="index">{{tag}}</div> + <div + class="tag" + v-for="(tag, index) in data.tags" + :key="index" + > + {{ tag }} + </div> </div> </div> <div class="star" @click="toggleFollow(data)"> - <i :class="[data.IsFollow?'follow':'','el-icon-star-off']"></i> + <i + :class="[data.IsFollow ? 'follow' : '', 'el-icon-star-off']" + ></i> </div> </div> </el-col> @@ -198,20 +292,37 @@ :total="tabTotal" ></el-pagination> </div> - <div class="content" v-show="showType=='list'"> + <div class="content" v-show="showType == 'list'"> <el-table :data="tableData" fit ref="elTable"> <el-table-column label="鍚嶇О" prop="VideoName" sortable width="500"> <template slot-scope="scope"> - <div style="cursor:pointer;" @click="checkVideoDetail(scope.row)">{{scope.row.VideoName}}</div> + <div style="cursor: pointer" @click="checkVideoDetail(scope.row)"> + {{ scope.row.VideoName }} + </div> </template> </el-table-column> - <el-table-column label="澶у皬" prop="VideoSize" sortable></el-table-column> - <el-table-column label="淇敼鏃ユ湡" prop="UpdatedAt" sortable></el-table-column> - <el-table-column label="鍒涘缓鏃ユ湡" prop="CreatedAt" sortable></el-table-column> + <el-table-column + label="澶у皬" + prop="VideoSize" + sortable + ></el-table-column> + <el-table-column + label="淇敼鏃ユ湡" + prop="UpdatedAt" + sortable + ></el-table-column> + <el-table-column + label="鍒涘缓鏃ユ湡" + prop="CreatedAt" + sortable + ></el-table-column> <el-table-column label="鎿嶄綔"> <template slot-scope="scope"> <div class="operation"> - <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i> + <i + class="el-icon-star-off" + @click="toggleFollow(scope.row)" + ></i> </div> </template> </el-table-column> @@ -230,7 +341,7 @@ <el-dialog class="dialog-video" :visible="videoDialogVisible" - @close="videoDialogVisible=false" + @close="videoDialogVisible = false" > <div slot="title" class="title"> <div class="center"> @@ -245,21 +356,32 @@ </template> <script> -import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang'; -import VideoAnalyze from "./videoAnalyze" +import { + getlstInit, + updateVideoAnalyze, + getlst, + getRelatedVideoInfo, + getLabelMap, + delLabel, + editLabel, +} from "@/api/shuohuang"; +import VideoAnalyze from "./videoAnalyze"; export default { name: "SearchMain", components: { - VideoAnalyze + VideoAnalyze, }, data() { return { - CLIP: 'http://', - keyword: '', - IsFollow: '', + CLIP: "http://", + keyword: "", + IsFollow: "", //searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 5).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")], - searchTime: [new Date(2020,0,1,0,0,0),new Date(2020,11,31,23,59,59)], + searchTime: [ + new Date(2020, 0, 1, 0, 0, 0), + new Date(2020, 11, 31, 23, 59, 59), + ], curTabPage: 1, curTablePage: 1, tabPageSize: 8, @@ -269,73 +391,108 @@ tableTotal: 0, currentPage: 1, pickerOptions: { - shortcuts: [{ - text: '浠婂ぉ', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setHours(0, 0, 0); - picker.$emit('pick', [start, end]); - } - }, { - text: '鏄ㄥぉ', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24); - start.setHours(0, 0, 0); - end.setTime(end.getTime() - 3600 * 1000 * 24); - end.setHours(23, 59, 59); - picker.$emit('pick', [start, end]); - } - }, { - text: '杩戜笁澶�', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 3); - picker.$emit('pick', [start, end]); - } - }, { - text: '杩戜竴鍛�', - onClick(picker) { - 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]); - } - }] + shortcuts: [ + { + text: "浠婂ぉ", + onClick(picker) { + const end = new Date(); + const start = new Date(); + start.setHours(0, 0, 0); + picker.$emit("pick", [start, end]); + }, + }, + { + text: "鏄ㄥぉ", + onClick(picker) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24); + start.setHours(0, 0, 0); + end.setTime(end.getTime() - 3600 * 1000 * 24); + end.setHours(23, 59, 59); + picker.$emit("pick", [start, end]); + }, + }, + { + text: "杩戜笁澶�", + onClick(picker) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 3); + picker.$emit("pick", [start, end]); + }, + }, + { + text: "杩戜竴鍛�", + onClick(picker) { + 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]); + }, + }, + ], }, checkedConfigs: [], optionalConfigs: [], highLevelConfigs: [], showAdvance: true, fixedOneLineHeight: 40, - settle: '', - IsOperate: '', - showType: 'menu', + settle: "", + IsOperate: "", + showType: "menu", tableData: [ - { name: 'SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4', size: '17.66M', updateTime: '2020-11-04 15:41', createTime: '2020-11-04 15:41' }, - { name: 'SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091700.mp4', size: '17.76M', updateTime: '2020-11-04 15:41', createTime: '2020-11-07 17:41' } + { + name: "SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4", + size: "17.66M", + updateTime: "2020-11-04 15:41", + createTime: "2020-11-04 15:41", + }, + { + name: "SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091700.mp4", + size: "17.76M", + updateTime: "2020-11-04 15:41", + createTime: "2020-11-07 17:41", + }, ], tabData: [ - { id: 'ss1', no: 'SS4B115', frequency: '8084', time: '2020-09-21 20:45:08', driver: '寮犱笁', marks: ['鏈懠鍞ゃ�佸懠鍞や笉鏍囧噯', '瀛︿範鍙告満鏈簲绛�'], markType: 1, tags: ['杩涘嚭绔�', '鍙告満绂诲矖'], follow: true }, - { id: 'ss2', no: 'SS4B115', frequency: '8084', time: '2020-09-21 20:45:08', driver: '寮犱笁', marks: [], markType: 0, tags: ['杩涘嚭绔�', '鍙告満绂诲矖'], follow: false } + { + id: "ss1", + no: "SS4B115", + frequency: "8084", + time: "2020-09-21 20:45:08", + driver: "寮犱笁", + marks: ["鏈懠鍞ゃ�佸懠鍞や笉鏍囧噯", "瀛︿範鍙告満鏈簲绛�"], + markType: 1, + tags: ["杩涘嚭绔�", "鍙告満绂诲矖"], + follow: true, + }, + { + id: "ss2", + no: "SS4B115", + frequency: "8084", + time: "2020-09-21 20:45:08", + driver: "寮犱笁", + marks: [], + markType: 0, + tags: ["杩涘嚭绔�", "鍙告満绂诲矖"], + follow: false, + }, ], videoDialogVisible: false, hiddenDanger: 1, labelDialogVisible: false, - selectedVideo: {} - } + selectedVideo: {}, + }; }, watch: { checkedConfigs: { handler(n, o) { - this.filterSearchData() + this.filterSearchData(); }, - deep: true - } + deep: true, + }, }, mounted() { this.init(); @@ -343,58 +500,61 @@ methods: { handleTabSizeChange(size) { this.tabPageSize = size; - this.filterSearchData() + this.filterSearchData(); }, handleTableSizeChange(size) { this.tablePageSize = size; - this.filterSearchData() + this.filterSearchData(); }, handleCurrentChange() { - this.filterSearchData() + this.filterSearchData(); }, //浜岀骇鏌ヨ filterSearchData() { let _this = this; - let isFollow = ''; - if (this.IsFollow === '') { - isFollow = '' + let isFollow = ""; + if (this.IsFollow === "") { + isFollow = ""; } else if (!!this.IsFollow) { - isFollow = '1' + isFollow = "1"; } else { - isFollow = '0' + isFollow = "0"; } let query = { KeyWord: this.keyword, StartDate: this.searchTime[0], EndDate: this.searchTime[1], - PageIndex: this.showType == 'list' ? this.curTablePage : this.curTabPage, - PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize, - IsDetail: this.showType == 'list', + PageIndex: + this.showType == "list" ? this.curTablePage : this.curTabPage, + PageSize: + this.showType == "list" ? this.tablePageSize : this.tabPageSize, + IsDetail: this.showType == "list", IsFollow: isFollow, - IsOperate: this.IsOperate + IsOperate: this.IsOperate, }; let filterQuerys = []; - this.checkedConfigs.forEach(config => { - let checkedOpts = config.data.filter(option => option.isChecked); + this.checkedConfigs.forEach((config) => { + let checkedOpts = config.data.filter((option) => option.isChecked); if (checkedOpts.length) { - var linkOpts = checkedOpts.map(opt => opt.name); - linkOpts = linkOpts.join(','); + var linkOpts = checkedOpts.map((opt) => opt.name); + linkOpts = linkOpts.join(","); let obj = {}; obj[config.NameEn] = linkOpts; filterQuerys.push(obj); } - }) + }); Object.assign(query, ...filterQuerys); - getlst(query).then(res => { - if (_this.showType == 'list') { + getlst(query).then((res) => { + if (_this.showType == "list") { _this.tableTotal = res.total; _this.tableData = res.data; } else { _this.tabTotal = res.total; _this.tabData = res.data; + } - }) + }); }, //涓�绾ф煡璇� init() { @@ -403,25 +563,42 @@ KeyWord: this.keyword, StartDate: this.searchTime[0], EndDate: this.searchTime[1], - PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list', - PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize, - IsDetail: this.showType == 'list', + PageIndex: + this.showType == "list" ? this.curTablePage : this.showType == "list", + PageSize: + this.showType == "list" ? this.tablePageSize : this.tabPageSize, + IsDetail: this.showType == "list", IsFollow: this.IsFollow, IsOperate: this.IsOperate, }; this.optionalConfigs = []; this.highLevelConfigs = []; - getlstInit(query).then(res => { - if (_this.showType == 'list') { + getlstInit(query).then((res) => { + if (_this.showType == "list") { _this.tableTotal = res.total; _this.tableData = res.data; } else { _this.tabTotal = res.total; _this.tabData = res.data; + // debugger + _this.tabData = _this.tabData.map(function (item) { + const set =new Set() + item.LableLst.forEach(function (label) { + label.Desc.split("锛�").forEach(function (d) { + set.add(d) + }) + }) + const lblst = [] + set.forEach(function (d) { + lblst.push({Desc:d}) + }) + item.LableLst=lblst + return item + }) } - res.filterlst.forEach(config => { - this.$set(config, 'isShow', true); + res.filterlst.forEach((config) => { + this.$set(config, "isShow", true); // config.data = Object.keys(config.Node).map(key => { // let obj = {}; // obj.name = key; @@ -436,44 +613,46 @@ }); config.id = config.ID; config.title = config.NameZn; - config.data.forEach(item => { - this.$set(item, 'isChecked', false); + config.data.forEach((item) => { + this.$set(item, "isChecked", false); }); if (config.IsAdvanced) { this.highLevelConfigs.push(config); } else { - this.$set(config, 'isMultCheck', false); - this.$set(config, 'showMore', false); - this.optionalConfigs.push(config) + this.$set(config, "isMultCheck", false); + this.$set(config, "showMore", false); + this.optionalConfigs.push(config); } }); this.$nextTick(() => { - this.optionalConfigs.forEach(config => { - if (this.$refs[`options${config.id}`][0].scrollHeight > this.fixedOneLineHeight) { + this.optionalConfigs.forEach((config) => { + if ( + this.$refs[`options${config.id}`][0].scrollHeight > + this.fixedOneLineHeight + ) { config.showMore = true; - this.$set(config, 'isShowMore', false); + this.$set(config, "isShowMore", false); } else { config.showMore = false; } }); console.log(this.optionalConfigs); }); - - }) + }); }, toggleFollow(data) { data.IsFollow = !data.IsFollow; this.updataVideo(data); if (data.IsFollow) { this.$notify({ - type: 'success', - message: '宸叉坊鍔犲叧娉�!' + type: "success", + message: "宸叉坊鍔犲叧娉�!", }); } }, updataVideo(data) { let _this = this; - updateVideoAnalyze(data).then(res => { + updateVideoAnalyze(data).then((res) => { //浜岀骇鏌ヨ }); }, @@ -482,20 +661,17 @@ let _this = this; _this.selectedVideo = data; _this.videoDialogVisible = true; - }, - checkFollow() { - - }, + checkFollow() {}, checkType(type) { this.showType = type; - this.filterSearchData() + this.filterSearchData(); }, clearCheckedConfigs() { - this.checkedConfigs.forEach(config => { + this.checkedConfigs.forEach((config) => { config.isShow = true; - config.data.forEach(d => { - d.isChecked = false + config.data.forEach((d) => { + d.isChecked = false; }); }); this.checkedConfigs = []; @@ -506,10 +682,10 @@ if (config.IsAdvanced) { this.showAdvance = true; } - config.data.forEach(d => { + config.data.forEach((d) => { d.isChecked = false; }); - let index = this.checkedConfigs.findIndex(one => one.id == config.id); + let index = this.checkedConfigs.findIndex((one) => one.id == config.id); this.checkedConfigs.splice(index, 1); }, checkOption(config, option) { @@ -526,38 +702,36 @@ // this.$nextTick(() => { // this.$set(config, 'isShow', false) // }) - }, cancleMultCheck(config) { config.isMultCheck = false; - config.data.forEach(opt => { + config.data.forEach((opt) => { opt.isChecked = false; }); }, - handleSelect(key, keyPath) { - - }, + handleSelect(key, keyPath) {}, showMore(config) { config.isShowMore = !config.isShowMore; - this.$refs[`options${config.id}`][0].style.height = config.isShowMore ? this.$refs[`options${config.id}`][0].scrollHeight + 'px' : this.fixedOneLineHeight + 'px'; + this.$refs[`options${config.id}`][0].style.height = config.isShowMore + ? this.$refs[`options${config.id}`][0].scrollHeight + "px" + : this.fixedOneLineHeight + "px"; }, toggleMultCheck(config) { config.isMultCheck = !config.isMultCheck; - this.optionalConfigs.forEach(conf => { + this.optionalConfigs.forEach((conf) => { if (conf.id == config.id) { return; } conf.isMultCheck = false; - }) + }); }, dataSearch() { console.log(this.checkedConfigs); this.$forceUpdate(); }, - - } -} + }, +}; </script> <style lang="scss"> @@ -685,14 +859,13 @@ } .el-menu.el-menu--horizontal { border: none; - } .config-submenu { - .el-menu--horizontal{ + .el-menu--horizontal { //max-width: 700px; //overflow-x: auto; - left: 20px!important; - &>ul{ + left: 20px !important; + & > ul { flex-wrap: wrap; } } @@ -798,6 +971,9 @@ .abnormal { color: red; } + .event-tag{ + margin-top: 10px; + } } .tag-info { color: #999; @@ -831,7 +1007,7 @@ cursor: pointer; } } - .pagination-center{ + .pagination-center { text-align: center; margin: 10px auto; } -- Gitblit v1.8.0