From 47a9d0b2711203995fd5eeb00df1bebda7d63ad8 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期四, 21 三月 2024 10:27:12 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/system/video/index.vue | 174 ++++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 132 insertions(+), 42 deletions(-) diff --git a/src/views/system/video/index.vue b/src/views/system/video/index.vue index c69255f..d144ed1 100644 --- a/src/views/system/video/index.vue +++ b/src/views/system/video/index.vue @@ -1,13 +1,73 @@ <template> + <div class="app-container"> + + <el-card class="box-card" > + <el-row type="flex" align="middle" justify="space-between"> + <el-col :xl="8" :lg="8" :md="10" :sm="8" :xs="6"> + <div class="icon-container" style="background-color: #5599F7"> + <i class="el-icon-video-camera"></i> + </div> + </el-col> + <el-col :xl="14" :lg="14" :md="12" :sm="14" :xs="16"> + <div class="dashboard"> + <div class="dashboard-item"> + <h3 style="color: #5C9BF8">{{ totalPosts }}</h3> + <p>璁惧鎬绘暟</p > + </div> + <div class="dashboard-item"> + <h3 style="color: #3eba45">{{ totalMembers }}</h3> + <p>姝e父鏁�</p > + </div> + <div class="dashboard-item"> + <h3 style="color: #fe640d">{{ postsPercentage }}</h3> + <p>寮傚父鏁�</p > + </div> + <div class="dashboard-item"> + <h3>{{ totalViews }}</h3> + <p>鐢熸垚寮傚父宸ュ崟鏁�</p > + </div> + <div class="dashboard-item"> + <h3>{{ noStore }}</h3> + <p>鏃犲瓨鍌�</p > + </div> + <div class="dashboard-item"> + <h3>{{ partStore }}</h3> + <p>閮ㄥ垎瀛樺偍</p > + </div> + <div class="dashboard-item"> + <h3>{{ viewsPercentage }}%</h3> + <p>璁惧杩愯鐜�</p > + </div> + </div> + </el-col> + </el-row> + </el-card> + <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> - <el-form-item label="璁惧鍚嶇О" prop="name"> + <el-form-item label="鍏抽敭瀛�" prop="name"> <el-input v-model="queryParams.name" - placeholder="璇疯緭鍏ヨ澶囧悕绉�" + 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 @@ -24,30 +84,6 @@ /> </el-select> </el-form-item> - <el-form-item label="鍦板潃" prop="address"> - <el-input - v-model="queryParams.address" - placeholder="璇疯緭鍏ュ湴鍧�" - clearable - @keyup.enter.native="handleQuery" - /> - </el-form-item> - <el-form-item label="瀹夎鏃堕棿" prop="installedTime"> - <el-date-picker clearable - v-model="queryParams.installedTime" - type="date" - value-format="yyyy-MM-dd" - placeholder="璇烽�夋嫨瀹夎鏃堕棿"> - </el-date-picker> - </el-form-item> - <el-form-item label="绠$悊鍗曚綅" prop="managementUnit"> - <el-input - v-model="queryParams.managementUnit" - placeholder="璇疯緭鍏ョ鐞嗗崟浣�" - clearable - @keyup.enter.native="handleQuery" - /> - </el-form-item> <el-form-item label="鏄惁鐢熸垚寮傚父宸ュ崟" prop="defaultOrder" label-width="130px"> <el-select v-model="queryParams.defaultOrder" @@ -63,6 +99,7 @@ /> </el-select> </el-form-item> + <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> @@ -83,25 +120,27 @@ </el-row> <el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="璁惧缂栫爜" align="center" prop="serialNumber" /> - <el-table-column label="璁惧鍚嶇О" align="center" prop="name" /> - <el-table-column label="涓婃姤閮ㄩ棬" align="center" prop="deptName" /> + <el-table-column type="selection" align="center" /> + <el-table-column label="璁惧鍚嶇О" align="center" prop="name" width="280" fixed/> + <el-table-column label="璁惧缂栫爜" align="center" prop="serialNumber" width="180"/> + <el-table-column label="鏍囩" align="center" prop="tag" width="180"/> + <el-table-column label="鍖哄煙" align="center" prop="region" width="180"/> <el-table-column label="璁惧鐘舵��" align="center" prop="onState"> <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="address" /> - <el-table-column label="鏄惁鐢熸垚寮傚父宸ュ崟" align="center" prop="defaultOrder"> + <el-table-column label="鏄惁鐢熸垚寮傚父宸ュ崟" align="center" prop="defaultOrder" width="180"> <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="reason" /> - <el-table-column label="瀹夎鏃堕棿" align="center" prop="installedTime" width="180"/> - <el-table-column label="绠$悊鍗曚綅" align="center" prop="managementUnit" /> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <el-table-column label="鏁版嵁鏃堕棿" align="center" prop="installedTime" width="180"/> + <el-table-column label="绠$悊鍗曚綅" align="center" prop="managementUnit" width="180"/> + <el-table-column label="淇′护鏃跺欢(ms)" align="center" prop="sipDelay" width="180"/> + <el-table-column label="瑙嗛鏃跺欢(ms)" align="center" prop="videoDelay" width="180"/> + <el-table-column label="鍏抽敭甯ф椂寤�(ms)" align="center" prop="iframeDelay" width="180"/> + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" fixed="right"> <template slot-scope="scope"> <el-button size="mini" @@ -128,14 +167,14 @@ <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.deptName }} </el-form-item> + <el-form-item label="鏍囩锛�">{{ form.tag }} </el-form-item> + <el-form-item label="鍖哄煙锛�">{{ form.region }} </el-form-item> <el-form-item label="璁惧鐘舵�侊細"> <div v-if="form.onState === 1">鍙敤</div> <div v-else-if="form.onState === 2">涓嶅彲鐢�</div> </el-form-item> </el-col> <el-col :span="24"> - <el-form-item label="鍦板潃锛�">{{ form.address }}</el-form-item> <el-form-item label="鏄惁鐢熸垚寮傚父宸ュ崟锛�"> <div v-if="form.defaultOrder === 1">鏄�</div> <div v-else-if="form.defaultOrder === 2">鍚�</div> @@ -150,6 +189,15 @@ <el-col :span="24"> <el-form-item label="绠$悊鍗曚綅锛�">{{ form.managementUnit }}</el-form-item> </el-col> + <el-col :span="24"> + <el-form-item label="淇′护鏃跺欢(ms)锛�">{{ form.sipDelay }}</el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="瑙嗛鏃跺欢(ms)锛�">{{ form.videoDelay }}</el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="鍏抽敭甯ф椂寤�(ms)锛�">{{ form.iframeDelay }}</el-form-item> + </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> @@ -160,13 +208,21 @@ </template> <script> -import { listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/monitor"; - +import { listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/video-monitor"; +import {getCountyList} from "@/api/platform/region"; export default { name: "Monitor", dicts: ['sys_normal_disable', 'platform_yes_no','camera_state'], data() { return { + totalPosts: 6250, + totalMembers: 6008, + postsPercentage: 51, + totalViews: 17, + noStore: 47, + partStore: 56, + viewsPercentage: 96.12, + totalErrors: 0, // 閬僵灞� loading: true, // 閫変腑鏁扮粍 @@ -196,7 +252,6 @@ installedTime: null, managementUnit: null, defaultOrder: null, - cameraFunType: 1, }, // 琛ㄥ崟鍙傛暟 form: {}, @@ -219,6 +274,8 @@ }, created() { this.getList(); + this.getCountyList(); + }, methods: { /** 鏌ヨ璁惧璧勪骇鍒楄〃 */ @@ -245,7 +302,7 @@ address: null, installedTime: null, managementUnit: null, - defaultOrder: "1", + defaultOrder: null, }; this.resetForm("form"); }, @@ -327,3 +384,36 @@ } }; </script> +<style lang="scss" scoped> + +.box-card { + background-color: #F5F9FE; + width: 100%; + margin-bottom: 20px; + height: 120px +} +.icon-container { + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + width: 20%; + height: 80px; + margin-left: 5%; +} +.el-icon-video-camera { + font-size: 50px; + color: #FFFFFF; +} + +.dashboard { + display: flex; + gap: 10%; + align-items: center; + margin-left: -50%; +} + +.dashboard-item { + text-align: center; +} +</style> -- Gitblit v1.8.0