From d770ca905d659e50cb3efb7290043a35dd2ea379 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期三, 08 一月 2025 11:52:37 +0800 Subject: [PATCH] 运行监控报表导出超时时间配置 --- src/views/system/monitor/video/index.vue | 290 +++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 249 insertions(+), 41 deletions(-) diff --git a/src/views/system/monitor/video/index.vue b/src/views/system/monitor/video/index.vue index 35c544a..7cf8ee8 100644 --- a/src/views/system/monitor/video/index.vue +++ b/src/views/system/monitor/video/index.vue @@ -2,13 +2,17 @@ <div class="app-container"> <div - style="display: flex;flex-direction: row;min-width: 158px;max-width: 158px;margin-bottom: 5px;border-radius: 1px; user-select: none" + style="display: flex;flex-direction: row;min-width: 300px;max-width: 300px;margin-bottom: 5px;border-radius: 1px; user-select: none" > <div @click="clickTab(null)" class="tab" - :class="{tabActive: null == queryParams.provinceTag, tabInactive: null != queryParams.provinceTag}">鍏ㄩ儴 + :class="{tabActive: !queryParams.provinceTag && !queryParams.deptTag, tabInactive: queryParams.provinceTag || queryParams.deptTag}"> + 鍏ㄩ儴 </div> <div @click="clickTab(0)" class="tab" - :class="{tabActive: 0 === queryParams.provinceTag, tabInactive: 0 !== queryParams.provinceTag}">鐪佸巺鑰冩牳 + :class="{tabActive: queryParams.provinceTag, tabInactive: !queryParams.provinceTag}">鐪佸巺鑰冩牳 + </div> + <div @click="clickTab(1)" class="tab" + :class="{tabActive: queryParams.deptTag, tabInactive: !queryParams.deptTag}">鍏畨閮ㄨ�冩牳 </div> </div> <el-card class="box-card"> @@ -33,6 +37,10 @@ <p>寮傚父鏁�</p> </div> <div class="dashboard-item"> + <h3 style="color: #4f4f4f">{{ count.unknownNumbers }}</h3> + <p>鏈煡鏁�</p> + </div> + <div class="dashboard-item"> <h3>{{ count.viewsPercentage }}%</h3> <p>璁惧杩愯鐜�</p> </div> @@ -46,9 +54,10 @@ <el-form-item label="鍏抽敭瀛�" prop="name"> <el-input v-model="queryParams.name" - placeholder="璇疯緭鍏ュ叧閿瓧" + placeholder="璁惧鍚�/璁惧缂栫爜/IP/鍗曚綅鍚�" clearable @keyup.enter.native="handleQuery" + @clear="handleQuery" /> </el-form-item> <el-form-item label="鍖哄煙" prop="onState"> @@ -71,6 +80,7 @@ v-model="queryParams.onState" placeholder="璁惧鐘舵��" clearable + @change="handleQuery" style="width: 100px" > <el-option @@ -85,19 +95,90 @@ <el-form-item> <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">鎼滅储</el-button> <el-button icon="el-icon-refresh" size="small" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> </el-form> + <!-- 瀵煎嚭鎸夐挳 --> + <div v-hasPermi="['system:monitor:export']"> + <el-button style="margin-right: 10px" slot="reference" type="primary" size="mini" @click="handleExport" plain >瀵煎嚭</el-button> + <el-popover + placement="left" + width="300px" + trigger="click"> + <span style="font-weight: bold;font-size: 16px">瀵煎嚭鎶ヨ〃</span> + <el-form ref="exportForm" :model="exportForm" :rules="exportRules" label-width="100px"> + <el-form-item label="鑰冩牳鏃堕棿" prop="month" required> + <el-date-picker + v-model="exportForm.month" + format="yyyy-MM" + value-format="yyyy-MM" + type="month" + placeholder="閫夋嫨鏈�"> + </el-date-picker> + </el-form-item> + <el-form-item label="鍖哄幙" prop="deptIds"> + <el-select v-model="exportForm.deptIds" multiple clearable> + <el-option + v-for="dept in deptList" + :key="dept.deptId" + :label="dept.area" + :value="dept.deptId" + /> + </el-select> + </el-form-item> + <el-form-item label="鏍囩" prop="tags"> + <el-checkbox-group v-model="exportForm.tags"> + <el-checkbox + v-for="item in tagOptions" + :key="item.value" + :label="item.value" + >{{ item.label }} + </el-checkbox> + </el-checkbox-group> + </el-form-item> + <el-form-item label="鏁版嵁绫诲瀷" prop="dataType" required> + <el-radio-group v-model="exportForm.dataType"> + <!-- <div style="display: flex;margin-bottom: 10px;">--> + <!-- <div style="width: 48%">--> + <el-radio :label="0">鎬婚噺鏁版嵁</el-radio> + <!-- </div>--> + <!-- <div style="width: 48%">--> + <el-radio :label="1">姣忔棩鍦ㄧ嚎鎯呭喌</el-radio> + <!-- </div>--> + <!-- </div>--> + <!-- <div style="display: flex;">--> + <!-- <div style="width: 48%">--> + <el-radio :label="2">姣忔棩褰曞儚鎯呭喌</el-radio> + <!-- </div>--> + <!-- <div style="width: 48%">--> + <el-radio :label="3">姣忔棩褰曞儚缂哄け鏃堕暱</el-radio> + <!-- </div>--> + <!-- </div>--> + </el-radio-group> + </el-form-item> + <el-button type="primary" size="small" style="width: 100%" @click="handleFormExport">瀵煎嚭</el-button> + </el-form> + <el-button slot="reference" type="primary" size="mini" plain>瀵煎嚭鎶ヨ〃</el-button> + </el-popover> + </div> </el-col> - <el-col span="4"> + <el-col :span="4"> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> </el-col> </el-row> <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange"> <el-table-column label="璁惧鍚嶇О" align="center" prop="name" width="280" fixed show-overflow-tooltip/> <el-table-column label="璁惧缂栫爜" align="center" prop="serialNumber" width="180"/> + <el-table-column label="ip" align="center" prop="ip" width="180"/> <el-table-column label="鏍囩" align="center" width="180" v-if="columns[0].visible"> <template slot-scope="scope"> - <div>{{ scope.row.provinceTag == 0 ? "鐪佸巺" : "甯傚眬" }}</div> + <div> + {{ + ( + (scope.row.provinceTagVideo ? '鐪佸巺銆�' : '') + + (scope.row.deptTag ? '鍏畨閮ㄣ��' : '')).replace(/銆�$/, '') + }} + </div> </template> </el-table-column> <el-table-column label="鍖哄煙" align="center" prop="area" width="180" v-if="columns[1].visible"/> @@ -107,11 +188,44 @@ </template> </el-table-column> <el-table-column label="鏄惁鐢熸垚寮傚父宸ュ崟" align="center" prop="error" width="180" v-if="columns[3].visible"/> - <el-table-column label="绠$悊鍗曚綅" align="center" prop="unitName" width="180" v-if="columns[5].visible"/> - <el-table-column label="鏁版嵁鏃堕棿" align="center" prop="mongoCreateTime" width="180" v-if="columns[4].visible"/> - <el-table-column label="淇′护鏃跺欢(ms)" align="center" prop="sipDelay" width="180" v-if="columns[6].visible"/> - <el-table-column label="瑙嗛鏃跺欢(ms)" align="center" prop="videoDelay" width="180" v-if="columns[7].visible"/> - <el-table-column label="鍏抽敭甯ф椂寤�(ms)" align="center" prop="ifmDelay" width="180" v-if="columns[8].visible"/> + <el-table-column label="绠$悊鍗曚綅" align="center" prop="unitName" width="180" v-if="columns[4].visible"/> + <el-table-column label="鏁版嵁鏃堕棿" align="center" prop="mongoCreateTime" width="180" v-if="columns[5].visible"/> + <el-table-column label="涓�鏈轰竴妗g姸鎬�" align="center" prop="monitorQualify" width="180" v-if="columns[6].visible"> + <template slot-scope="scope"> + <div>{{ scope.row.monitorQualify ? "姝e父" : "寮傚父" }}</div> + </template> + </el-table-column> + <el-table-column label="鏄惁涓烘湭娉ㄥ唽璁惧" align="center" prop="newMonitor" width="180" v-if="columns[7].visible"> + <template slot-scope="scope"> + <div>{{ scope.row.newMonitor ? "鏄�" : "鍚�" }}</div> + </template> + </el-table-column> + <el-table-column label="褰曞儚瀹屾暣鐘舵��" align="center" prop="videoComplete" width="180" v-if="columns[8].visible"> + <template slot-scope="scope"> + <div v-if="scope.row.videoComplete === 1">瀹屾暣</div> + <div v-else-if="scope.row.videoComplete === 0">闂存瓏</div> + <div v-else-if="scope.row.videoComplete === -1">寮傚父</div> + </template> + </el-table-column> + <el-table-column label="褰曞儚缂哄け鏃堕暱" align="center" prop="videoLoseTime" width="180" v-if="columns[9].visible"> + <template slot-scope="scope"> + <div>{{ (scope.row.videoLoseTime * 60).toFixed(2) + '鍒嗛挓' }}</div> + </template> + </el-table-column> + <el-table-column label="OSD鏍囨敞" align="center" prop="osd" width="180" v-if="columns[10].visible"> + <template slot-scope="scope"> + <div v-if="scope.row.osd ==true">姝e父</div> + <div v-else-if="scope.row.osd == false">寮傚父</div> + <div v-else-if="scope.row.osd == null">鏈煡</div> + </template> + </el-table-column> + <el-table-column label="OSD鏃堕棿" align="center" prop="osdtime" width="180" v-if="columns[11].visible"> + <template slot-scope="scope"> + <div v-if="scope.row.osdtime ==true">姝e父</div> + <div v-else-if="scope.row.osdtime == false">寮傚父</div> + <div v-else-if="scope.row.osdtime == null">鏈煡</div> + </template> + </el-table-column> <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" fixed="right"> <template slot-scope="scope"> <el-button @@ -134,40 +248,69 @@ /> <!-- 璁惧璧勪骇璇︽儏 --> - <el-dialog title="鎿嶄綔鏃ュ織璇︾粏" :visible.sync="open" width="800px" append-to-body> + <el-dialog title="瑙嗛鐩戞帶璇︽儏" :visible.sync="open" width="800px" append-to-body> <el-form ref="form" :model="form" label-width="150px" size="mini"> <el-row> + <el-form-item label="璁惧鍚嶇О锛�">{{ form.name }}</el-form-item> <el-col :span="12"> <el-form-item label="璁惧缂栫爜锛�">{{ form.serialNumber }}</el-form-item> - <el-form-item label="璁惧鍚嶇О锛�">{{ form.name }}</el-form-item> - <el-form-item label="鍦板尯锛�">{{ form.address }}</el-form-item> - <el-form-item label="涓婃姤閮ㄩ棬锛�">{{ form.deptName }}</el-form-item> + <el-form-item label="鏍囩锛�"> + {{ + ((form.provinceTagVideo ? '鐪佸巺銆�' : '') + + (form.deptTag ? '鍏畨閮ㄣ��' : '')).replace(/銆�$/, '') + }} + </el-form-item> <el-form-item label="璁惧鐘舵�侊細"> - <div v-if="form.onState === 1">鍙敤</div> - <div v-else-if="form.onState === 2">涓嶅彲鐢�</div> + <div v-if="form.onState === 0">鏈煡</div> + <div v-else-if="form.onState === 1">鍦ㄧ嚎</div> + <div v-else-if="form.onState === -1">绂荤嚎</div> </el-form-item> + <el-form-item label="绠$悊鍗曚綅锛�">{{ form.unitName }}</el-form-item> </el-col> - <el-col :span="24"> - <el-form-item label="鍦板潃锛�">{{ form.address }}</el-form-item> + <el-col :span="12"> + <el-form-item label="ip锛�">{{ form.ip }}</el-form-item> + <el-form-item label="鍦板尯锛�">{{ form.area }}</el-form-item> <el-form-item label="鏄惁鐢熸垚寮傚父宸ュ崟锛�"> - <div v-if="form.defaultOrder === 1">鏄�</div> - <div v-else-if="form.defaultOrder === 2">鍚�</div> + {{ form.error }} + </el-form-item> + <el-form-item label="杩愮淮鏃堕棿锛�">{{ form.startTime + '鑷�' + form.endTime }}</el-form-item> + </el-col> + </el-row> + <!-- 杩愯鏁版嵁鐨勫垎闅旂寮�濮嬫柊鐨勮 --> + <el-row> + <el-col :span="24"> + <el-divider content-position="left">杩愯鏁版嵁</el-divider> + </el-col> + </el-row> + <el-row> + <el-col :span="24"> + <el-form-item label="鏁版嵁鏃堕棿锛�">{{ form.mongoCreateTime }}</el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="涓�鏈轰竴妗g姸鎬侊細"> + {{ form.monitorQualify ? '姝e父' : '寮傚父' }} + </el-form-item> + <el-form-item label="褰曞儚瀹屾暣鐘舵�侊細"> + <div v-if="form.videoComplete === 1">瀹屾暣</div> + <div v-else-if="form.videoComplete === 0">闂存瓏</div> + <div v-else-if="form.videoComplete === -1">寮傚父</div> + </el-form-item> + <el-form-item label="OSD鏍囨敞锛�"> + <div v-if="form.osd ==true">姝e父</div> + <div v-else-if="form.osd ==false">寮傚父</div> + <div v-else-if="form.osd ==null">鏈煡</div> </el-form-item> </el-col> - <el-col :span="24"> - <el-form-item label="瀹夎鏃堕棿锛�">{{ form.installedTime }}</el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="绠$悊鍗曚綅锛�">{{ form.managementUnit }}</el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="淇′护鏃跺欢(ms)锛�"></el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="瑙嗛鏃跺欢(ms)锛�"></el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="鍏抽敭甯ф椂寤�(ms)锛�"></el-form-item> + <el-col :span="12"> + <el-form-item label="鏄惁涓烘湭娉ㄥ唽璁惧锛�"> + {{ form.newMonitor ? '鏄�' : '鍚�' }} + </el-form-item> + <el-form-item label="褰曞儚缂哄け鏃堕暱锛�">{{ (form.videoLoseTime * 60).toFixed(2) + '鍒嗛挓' }}</el-form-item> + <el-form-item label="OSD鏃堕棿锛�"> + <div v-if="form.osdtime ==true">姝e父</div> + <div v-else-if="form.osdtime ==false">寮傚父</div> + <div v-else-if="form.osdtime ==null">鏈煡</div> + </el-form-item> </el-col> </el-row> </el-form> @@ -194,21 +337,31 @@ {key: 1, label: `鍖哄煙`, visible: true}, {key: 2, label: `璁惧鐘舵�乣, visible: true}, {key: 3, label: `鏄惁鐢熸垚寮傚父宸ュ崟`, visible: true}, - {key: 4, label: `鏁版嵁鏃堕棿`, visible: true}, - {key: 5, label: `绠$悊鍗曚綅`, visible: true}, - {key: 6, label: `淇′护鏃跺欢`, visible: true}, - {key: 7, label: `瑙嗛鏃跺欢`, visible: true}, - {key: 8, label: `鍏抽敭甯ф椂寤禶, visible: true} + {key: 4, label: `绠$悊鍗曚綅`, visible: true}, + {key: 5, label: `鏁版嵁鏃堕棿`, visible: false}, + {key: 6, label: `涓�鏈轰竴妗g姸鎬乣, visible: false}, + {key: 7, label: `鏄惁涓烘湭娉ㄥ唽璁惧`, visible: false}, + {key: 8, label: `褰曞儚瀹屾暣鐘舵�乣, visible: false}, + {key: 9, label: `褰曞儚缂哄け鏃堕暱`, visible: false}, + {key: 10, label: `OSD鏍囨敞`, visible: false}, + {key: 11, label: `OSD鏃堕棿`, visible: false} ], count: { totalPosts: 0, totalMembers: 0, postsPercentage: 0, + unknownNumbers: 0, totalViews: 0, noStore: 0, partStore: 0, viewsPercentage: 0 }, + tagOptions: [ + {value: 0, label: '鐪佸巺'}, + {value: 1, label: '閲嶇偣鐐逛綅'}, + {value: 2, label: '閲嶇偣鎸囨尌鍥惧儚'}, + {value: 3, label: '閮ㄧ骇'} + ], // 閬僵灞� loading: true, // 閫変腑鏁扮粍 @@ -242,6 +395,20 @@ }, // 琛ㄥ崟鍙傛暟 form: {}, + exportForm: { + deptIds: [], + month: '', + dataType: null, + tags: [] + }, + exportRules: { + month: [ + {required: true, message: "鏃堕棿涓嶈兘涓虹┖", trigger: "blur"} + ], + dataType: [ + {required: true, message: "鏁版嵁绫诲瀷涓嶈兘涓虹┖", trigger: "blur"} + ] + }, // 琛ㄥ崟鏍¢獙 rules: { serialNumber: [ @@ -268,7 +435,16 @@ }, methods: { clickTab(active) { - this.queryParams.provinceTag = active + if (active === 0) { + this.queryParams.provinceTag = true + this.queryParams.deptTag = null + } else if (active === 1) { + this.queryParams.provinceTag = null + this.queryParams.deptTag = true + } else { + this.queryParams.provinceTag = null + this.queryParams.deptTag = null + } this.getList() this.getVideoCount() }, @@ -383,11 +559,43 @@ this.download('system/monitor/export', { ...this.queryParams }, `monitor_${new Date().getTime()}.xlsx`) + }, + handleFormExport() { + this.$refs["exportForm"].validate(valid => { + if (valid) { + if (this.exportForm.dataType === 0) { + this.download('system/monitor/export/video/total', { + ...this.exportForm, + }, `鎬婚噺鎯呭喌_${new Date().getTime()}.xlsx`, { + timeout: 60000 + }) + } else if (this.exportForm.dataType === 1) { + this.download('system/monitor/export/video/online', { + ...this.exportForm, + }, `鐐逛綅鍦ㄧ嚎_${new Date().getTime()}.xlsx`, { + timeout: 60000 + }) + } else if (this.exportForm.dataType === 2) { + this.download('system/monitor/export/video/record', { + ...this.exportForm, + }, `褰曞儚鎯呭喌_${new Date().getTime()}.xlsx`, { + timeout: 60000 + }) + } else if (this.exportForm.dataType === 3) { + this.download('system/monitor/export/video/loseTime', { + ...this.exportForm, + }, `褰曞儚缂哄け鏃堕暱_${new Date().getTime()}.xlsx`, { + timeout: 60000 + }) + } + } + }); } } }; </script> <style lang="scss" scoped> + .tab { padding: 5px 15px; } -- Gitblit v1.8.0