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 | 542 ++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 366 insertions(+), 176 deletions(-) diff --git a/src/views/system/monitor/video/index.vue b/src/views/system/monitor/video/index.vue index 31640c3..7cf8ee8 100644 --- a/src/views/system/monitor/video/index.vue +++ b/src/views/system/monitor/video/index.vue @@ -1,183 +1,241 @@ <template> <div class="app-container"> - - <el-card class="box-card" > + <div + 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: !queryParams.provinceTag && !queryParams.deptTag, tabInactive: queryParams.provinceTag || queryParams.deptTag}"> + 鍏ㄩ儴 + </div> + <div @click="clickTab(0)" class="tab" + :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"> <el-row type="flex" align="middle" justify="space-between" style="width: 100%;"> <el-col :span="4"> - <div class="icon-container" style="background-color: #1890FF"> - <i class="el-icon-video-camera"></i> - </div> + <div class="icon-container" style="background-color: #1890FF"> + <i class="el-icon-video-camera"></i> + </div> </el-col> <el-col :span="20"> <div class="dashboard"> <div class="dashboard-item"> <h3 style="color: #5C9BF8">{{ count.totalPosts }}</h3> - <p>璁惧鎬绘暟</p > + <p>璁惧鎬绘暟</p> </div> <div class="dashboard-item"> <h3 style="color: #3eba45">{{ count.totalMembers }}</h3> - <p>姝e父鏁�</p > + <p>姝e父鏁�</p> </div> <div class="dashboard-item"> <h3 style="color: #fe640d">{{ count.postsPercentage }}</h3> - <p>寮傚父鏁�</p > + <p>寮傚父鏁�</p> </div> <div class="dashboard-item"> - <h3>{{ count.totalViews }}</h3> - <p>鐢熸垚寮傚父宸ュ崟鏁�</p > - </div> - <div class="dashboard-item"> - <h3>{{ count.noStore }}</h3> - <p>鏃犲瓨鍌�</p > - </div> - <div class="dashboard-item"> - <h3>{{ count.partStore }}</h3> - <p>閮ㄥ垎瀛樺偍</p > + <h3 style="color: #4f4f4f">{{ count.unknownNumbers }}</h3> + <p>鏈煡鏁�</p> </div> <div class="dashboard-item"> <h3>{{ count.viewsPercentage }}%</h3> - <p>璁惧杩愯鐜�</p > + <p>璁惧杩愯鐜�</p> </div> </div> </el-col> </el-row> </el-card> + <el-row type="flex"> + <el-col :span="20"> + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> + <el-form-item label="鍏抽敭瀛�" prop="name"> + <el-input + v-model="queryParams.name" + placeholder="璁惧鍚�/璁惧缂栫爜/IP/鍗曚綅鍚�" + clearable + @keyup.enter.native="handleQuery" + @clear="handleQuery" + /> + </el-form-item> + <el-form-item label="鍖哄煙" prop="onState"> + <el-select + v-model="queryParams.address" + placeholder="璇烽�夋嫨鍖哄煙" + clearable + @change="handleQuery" + > + <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="onState"> + <el-select + v-model="queryParams.onState" + placeholder="璁惧鐘舵��" + clearable + @change="handleQuery" + style="width: 100px" + > + <el-option + v-for="dict in dict.type.camera_state" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </el-form-item> - <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> - <el-form-item label="鍏抽敭瀛�" prop="name"> - <el-input - v-model="queryParams.name" - placeholder="璇疯緭鍏ュ叧閿瓧" - clearable - @keyup.enter.native="handleQuery" - /> - </el-form-item> - <el-form-item label="鍖哄煙" prop="onState"> - <el-select - v-model="queryParams.address" - placeholder="璇烽�夋嫨鍖哄煙" - clearable - > - <el-option label="鑷础甯�" value="鑷础甯�"/> - <el-option label="娌挎哗鍖�" value="娌挎哗鍖�"/> - <el-option label="澶у畨鍖�" value="澶у畨鍖�"/> - <el-option label="璐′簳鍖�" value="璐′簳鍖�"/> - <el-option label="鑷祦浜曞尯" value="鑷祦浜曞尯"/> - <el-option label="楂樻柊鍖�" value="楂樻柊鍖�"/> - <el-option label="鑽e幙" value="鑽e幙"/> - <el-option label="瀵岄『鍘�" value="瀵岄『鍘�"/> - </el-select> - </el-form-item> - <el-form-item label="璁惧鐘舵��" prop="onState"> - <el-select - v-model="queryParams.onState" - placeholder="璁惧鐘舵��" - clearable - style="width: 100px" - > - <el-option - v-for="dict in dict.type.camera_state" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item label="鏄惁鐢熸垚寮傚父宸ュ崟" prop="defaultOrder" label-width="130px"> - <el-select - v-model="queryParams.defaultOrder" - placeholder="鏄惁鐢熸垚寮傚父宸ュ崟" - clearable - style="width: 170px" - > - <el-option - v-for="dict in dict.type.platform_yes_no" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> + <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-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button> - <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> - </el-form> - - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="el-icon-download" - size="mini" - @click="handleExport" - v-hasPermi="['system:monitor:export']" - >瀵煎嚭</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> - <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> + <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 type="selection" align="center" /> <el-table-column label="璁惧鍚嶇О" align="center" prop="name" width="280" fixed show-overflow-tooltip/> - <el-table-column label="璁惧缂栫爜" align="center" prop="serialNumber" width="180" show-overflow-tooltip/> - <el-table-column label="鏍囩" align="center" prop="publicSecurity" width="180" v-if="columns[0].visible"> + <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>{{"鐪佸巺"}}</div> + <div> + {{ + ( + (scope.row.provinceTagVideo ? '鐪佸巺銆�' : '') + + (scope.row.deptTag ? '鍏畨閮ㄣ��' : '')).replace(/銆�$/, '') + }} + </div> </template> </el-table-column> - <el-table-column label="鍖哄煙" align="center" prop="address" width="180" v-if="columns[1].visible"> - <template slot-scope="scope"> - <div>{{"鑷祦浜曞尯"}}</div> - </template> - </el-table-column> + <el-table-column label="鍖哄煙" align="center" prop="area" width="180" v-if="columns[1].visible"/> <el-table-column label="璁惧鐘舵��" align="center" prop="onState" v-if="columns[2].visible"> - <template slot-scope="scope"> - <dict-tag :options="dict.type.camera_state" :value="scope.row.onState"/> - </template> - </el-table-column> - <el-table-column label="鏄惁鐢熸垚寮傚父宸ュ崟" align="center" prop="defaultOrder" width="180" v-if="columns[3].visible"> - <template slot-scope="scope"> - <dict-tag :options="dict.type.platform_yes_no" :value="scope.row.defaultOrder"/> - </template> - </el-table-column> - <el-table-column label="鏁版嵁鏃堕棿" align="center" prop="installedTime" width="180" v-if="columns[4].visible"> <template slot-scope="scope"> - <div>{{"2023骞�08鏈�03鏃�"}}</div> + <dict-tag :options="dict.type.camera_state" :value="scope.row.onState"/> </template> </el-table-column> - <el-table-column label="绠$悊鍗曚綅" align="center" prop="managementUnit" width="180" v-if="columns[5].visible"> + <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[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>{{"杩愮淮鍏徃鐢�"}}</div> + <div>{{ scope.row.monitorQualify ? "姝e父" : "寮傚父" }}</div> </template> </el-table-column> - <el-table-column label="淇′护鏃跺欢(ms)" align="center" prop="sipDelay" width="180" v-if="columns[6].visible"> + <el-table-column label="鏄惁涓烘湭娉ㄥ唽璁惧" align="center" prop="newMonitor" width="180" v-if="columns[7].visible"> <template slot-scope="scope"> - <div>{{"100"}}</div> + <div>{{ scope.row.newMonitor ? "鏄�" : "鍚�" }}</div> </template> </el-table-column> - <el-table-column label="瑙嗛鏃跺欢(ms)" align="center" prop="videoDelay" width="180" v-if="columns[7].visible"> + <el-table-column label="褰曞儚瀹屾暣鐘舵��" align="center" prop="videoComplete" width="180" v-if="columns[8].visible"> <template slot-scope="scope"> - <div>{{"200"}}</div> + <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="鍏抽敭甯ф椂寤�(ms)" align="center" prop="iframeDelay" width="180" v-if="columns[8].visible"> + <el-table-column label="褰曞儚缂哄け鏃堕暱" align="center" prop="videoLoseTime" width="180" v-if="columns[9].visible"> <template slot-scope="scope"> - <div>{{"300"}}</div> + <div>{{ (scope.row.videoLoseTime * 60).toFixed(2) + '鍒嗛挓' }}</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 - size="mini" - type="text" - icon="el-icon-view" - @click="handleView(scope.row,scope.index)" - >璇︾粏</el-button> - </template> + <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 + size="mini" + type="text" + icon="el-icon-view" + @click="handleView(scope.row,scope.index)" + >璇︾粏 + </el-button> + </template> </el-table-column> </el-table> @@ -190,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> @@ -235,33 +322,46 @@ </template> <script> -import { videoCount, listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/monitor"; +import {videoCount, listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor} from "@/api/platform/monitor"; +import {listDept} from "@/api/system/dept"; + export default { name: "Monitor", - dicts: ['sys_normal_disable', 'platform_yes_no','camera_state'], + dicts: ['sys_normal_disable', 'platform_yes_no', 'camera_state'], data() { return { + deptList: [], // 鍒椾俊鎭� columns: [ - { key: 0, label: `鏍囩`, visible: true }, - { 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: 0, label: `鏍囩`, visible: true}, + {key: 1, label: `鍖哄煙`, visible: true}, + {key: 2, label: `璁惧鐘舵�乣, visible: true}, + {key: 3, 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, // 閫変腑鏁扮粍 @@ -295,19 +395,33 @@ }, // 琛ㄥ崟鍙傛暟 form: {}, + exportForm: { + deptIds: [], + month: '', + dataType: null, + tags: [] + }, + exportRules: { + month: [ + {required: true, message: "鏃堕棿涓嶈兘涓虹┖", trigger: "blur"} + ], + dataType: [ + {required: true, message: "鏁版嵁绫诲瀷涓嶈兘涓虹┖", trigger: "blur"} + ] + }, // 琛ㄥ崟鏍¢獙 rules: { serialNumber: [ - { required: true, message: "璁惧缂栫爜涓嶈兘涓虹┖", trigger: "blur" } + {required: true, message: "璁惧缂栫爜涓嶈兘涓虹┖", trigger: "blur"} ], name: [ - { required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" } + {required: true, message: "璁惧鍚嶇О涓嶈兘涓虹┖", trigger: "blur"} ], onState: [ - { required: true, message: "璁惧鐘舵��", trigger: "blur" } + {required: true, message: "璁惧鐘舵��", trigger: "blur"} ], address: [ - { required: true, message: "鍦板潃涓嶈兘涓虹┖", trigger: "blur" } + {required: true, message: "鍦板潃涓嶈兘涓虹┖", trigger: "blur"} ], } }; @@ -315,9 +429,25 @@ created() { this.getVideoCount(); this.getList(); - this.getCountyList(); + listDept({status: 0}).then(response => { + this.deptList = response.data.filter(item => item.area); + }); }, methods: { + clickTab(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() + }, /** 鏌ヨ璁惧璧勪骇鍒楄〃 */ getList() { this.loading = true; @@ -327,9 +457,9 @@ this.loading = false; }); }, - /** 鏌ヨ璁惧璧勪骇缁熻鏁� */ - getVideoCount() { - videoCount('1').then(response => { + /** 鏌ヨ璁惧璧勪骇缁熻鏁� */ + getVideoCount() { + videoCount(this.queryParams).then(response => { this.count = response.data; }); }, @@ -361,6 +491,7 @@ }, /** 閲嶇疆鎸夐挳鎿嶄綔 */ resetQuery() { + this.queryParams.address = ''; this.resetForm("queryForm"); this.handleQuery(); }, @@ -368,7 +499,7 @@ // 澶氶�夋閫変腑鏁版嵁 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) - this.single = selection.length!==1 + this.single = selection.length !== 1 this.multiple = !selection.length }, /** 鏂板鎸夐挳鎿嶄綔 */ @@ -415,23 +546,80 @@ /** 鍒犻櫎鎸夐挳鎿嶄綔 */ handleDelete(row) { const ids = row.id || this.ids; - this.$modal.confirm('鏄惁纭鍒犻櫎璁惧璧勪骇缂栧彿涓�"' + ids + '"鐨勬暟鎹」锛�').then(function() { + this.$modal.confirm('鏄惁纭鍒犻櫎璁惧璧勪骇缂栧彿涓�"' + ids + '"鐨勬暟鎹」锛�').then(function () { return delMonitor(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + }).catch(() => { + }); }, /** 瀵煎嚭鎸夐挳鎿嶄綔 */ handleExport() { 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; +} + +.tab:hover { + cursor: pointer; + user-select: none; +} + +.tabActive { + color: white; + background-color: #409eff; + border: none; + border-radius: 1px; +} + +.tabInactive { + background-color: #edf2f6; + color: #409eff; +} + +.tabInactive:hover { + background-color: #edf2f6; +} .box-card { background-color: hsl(0, 0%, 100%); @@ -439,15 +627,17 @@ margin-bottom: 20px; height: 120px; } + .icon-container { display: flex; justify-content: center; align-items: center; - border-radius: 4px; + border-radius: 10px; width: 130px; height: 80px; margin-left: 5%; } + .el-icon-video-camera { font-size: 50px; color: #FFFFFF; -- Gitblit v1.8.0