From 3ab3a4981809c268f90c075997263cbc6f4f771b Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 20 三月 2024 09:20:35 +0800
Subject: [PATCH] style:修改下拉样式
---
src/views/system/video/index.vue | 138 +++++++++++++++++++++++++++++++++-------------
1 files changed, 99 insertions(+), 39 deletions(-)
diff --git a/src/views/system/video/index.vue b/src/views/system/video/index.vue
index 3f4c426..be733c2 100644
--- a/src/views/system/video/index.vue
+++ b/src/views/system/video/index.vue
@@ -1,5 +1,49 @@
<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>姝ｅ父鏁�</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-input
@@ -23,30 +67,6 @@
:value="dict.value"
/>
</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
@@ -77,38 +97,38 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
- v-hasPermi="['system:monitor:export']"
>瀵煎嚭</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</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 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="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"
type="text"
icon="el-icon-view"
@click="handleView(scope.row,scope.index)"
- v-hasPermi="['system:monitor:query']"
>璇︾粏</el-button>
</template>
</el-table-column>
@@ -129,13 +149,13 @@
<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.tag }} </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>
@@ -160,13 +180,21 @@
</template>
<script>
-import { listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/monitor";
+import { listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/video-monitor";
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 +224,6 @@
installedTime: null,
managementUnit: null,
defaultOrder: null,
- cameraFunType: 1,
},
// 琛ㄥ崟鍙傛暟
form: {},
@@ -245,7 +272,7 @@
address: null,
installedTime: null,
managementUnit: null,
- defaultOrder: "1",
+ defaultOrder: null,
};
this.resetForm("form");
},
@@ -327,3 +354,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