From e80067335467ca48cb94f03de3794ad93a45ad5d Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 13 九月 2024 16:42:38 +0800
Subject: [PATCH] 运行监控
---
src/views/system/monitor/recovery/index.vue | 174 ++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 121 insertions(+), 53 deletions(-)
diff --git a/src/views/system/monitor/recovery/index.vue b/src/views/system/monitor/recovery/index.vue
index 5278610..f4ebf64 100644
--- a/src/views/system/monitor/recovery/index.vue
+++ b/src/views/system/monitor/recovery/index.vue
@@ -1,6 +1,16 @@
<template>
<div class="app-container">
- <el-card class="box-card" >
+ <div
+ style="display: flex;flex-direction: row;min-width: 158px;max-width: 158px;margin-bottom: 5px;border-radius: 1px; user-select: none"
+ >
+ <div @click="clickTab(null)" class="tab"
+ :class="{tabActive: null == queryParams.provinceTag, tabInactive: null != queryParams.provinceTag}">鍏ㄩ儴
+ </div>
+ <div @click="clickTab(0)" class="tab"
+ :class="{tabActive: 0 === queryParams.provinceTag, tabInactive: 0 !== queryParams.provinceTag}">鐪佸巺鑰冩牳
+ </div>
+ </div>
+ <el-card class="box-card">
<el-row type="flex" align="middle" justify="space-between">
<el-col :span="4">
<div class="icon-container" style="background-color: #1890FF">
@@ -11,19 +21,19 @@
<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>姝ｅ父鏁�</p >
+ <p>姝ｅ父鏁�</p>
</div>
<div class="dashboard-item">
<h3 style="color: #fe640d">{{ count.postsPercentage }}</h3>
- <p>寮傚父鏁�</p >
+ <p>寮傚父鏁�</p>
</div>
<div class="dashboard-item">
<h3>{{ count.viewsPercentage }}%</h3>
- <p>璁惧杩愯鐜�</p >
+ <p>璁惧杩愯鐜�</p>
</div>
</div>
</el-col>
@@ -46,7 +56,7 @@
clearable
@change="handleQuery"
>
- <el-option
+ <el-option
v-for="dept in deptList"
:key="dept.deptId"
:label="dept.area"
@@ -54,7 +64,7 @@
/>
</el-select>
</el-form-item>
- <el-form-item label="鐩戞帶绫诲瀷" prop="onState">
+ <el-form-item label="鐩戞帶绫诲瀷" prop="cameraFunType">
<el-select
v-model="queryParams.cameraFunType"
placeholder="璇烽�夋嫨鐩戞帶绫诲瀷"
@@ -70,40 +80,33 @@
<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>
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</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"
- >瀵煎嚭</el-button>
- </el-col> -->
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
- </el-row>
-
<el-table v-loading="loading" :data="monitorList" @selection-change="handleSelectionChange">
- <el-table-column label="璁惧鍚嶇О" align="center" prop="name" />
- <el-table-column label="璁惧缂栫爜" align="center" prop="serialNumber" width="180px" />
- <el-table-column label="鏍囩" align="center" v-if="columns[0].visible">
+ <el-table-column label="璁惧鍚嶇О" align="center" prop="name" width="280" fixed show-overflow-tooltip/>
+ <el-table-column label="璁惧缂栫爜" align="center" prop="serialNumber" width="180px"/>
+ <el-table-column label="璁惧绫诲瀷" align="center" prop="cameraFunType" width="180px">
+ <template slot-scope="scope">
+ {{ translateCameraFunType(scope.row.cameraFunType) }}
+ </template>
+ </el-table-column>
+ <el-table-column label="鏍囩" align="center" width="180px" v-if="columns[0].visible">
<template slot-scope="scope">
<div>{{ scope.row.provinceTag == 0 ? "鐪佸巺" : "甯傚眬" }}</div>
</template>
</el-table-column>
<el-table-column label="鍖哄煙" align="center" prop="area" 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 label="璁惧鐘舵��" align="center" width="180px" prop="onState" v-if="columns[2].visible">
+ <template slot-scope="scope">
+ <dict-tag :options="dict.type.camera_state" width="180px" :value="scope.row.onState"/>
+ </template>
</el-table-column>
- <el-table-column label="鏄惁鐢熸垚寮傚父宸ュ崟" align="center" prop="error" v-if="columns[3].visible" />
- <el-table-column label="寮傚父鍘熷洜" align="center" prop="reason" v-if="columns[4].visible" />
- <el-table-column label="寮傚父鎭㈠鏃堕棿" align="center" prop="recoveryTime" width="180" v-if="columns[5].visible">
+ <el-table-column label="鏄惁鐢熸垚寮傚父宸ュ崟" align="center" prop="error" width="180px" v-if="columns[3].visible"/>
+ <el-table-column label="寮傚父鍘熷洜" align="center" prop="reason" width="180px" v-if="columns[4].visible"/>
+ <el-table-column label="寮傚父鎭㈠鏃堕棿" align="center" prop="recoveryTime" width="180px" v-if="columns[5].visible">
</el-table-column>
- <el-table-column label="绠＄悊鍗曚綅" align="center" prop="unitName" v-if="columns[6].visible" />
+ <el-table-column label="绠＄悊鍗曚綅" align="center" prop="unitName" width="180px" v-if="columns[6].visible"/>
<el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@@ -111,7 +114,8 @@
type="text"
icon="el-icon-view"
@click="handleView(scope.row,scope.index)"
- >璇︾粏</el-button>
+ >璇︾粏
+ </el-button>
</template>
</el-table-column>
</el-table>
@@ -130,8 +134,8 @@
<el-row>
<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.name }}</el-form-item>
+ <el-form-item label="鏍囩锛�">{{ form.deptName }}</el-form-item>
<el-form-item label="璁惧鐘舵�侊細">
<div v-if="form.onState === 1">鍙敤</div>
<div v-else-if="form.onState === 2">涓嶅彲鐢�</div>
@@ -163,23 +167,31 @@
</template>
<script>
-import { recoveryException, listMonitor, getMonitor, delMonitor, addMonitor, updateMonitor } from "@/api/platform/monitor";
-import { listDept } from "@/api/system/dept";
+import {
+ recoveryException,
+ 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: 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},
],
count: {
totalPosts: 0,
@@ -226,16 +238,16 @@
// 琛ㄥ崟鏍￠獙
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"}
],
}
};
@@ -243,11 +255,40 @@
created() {
this.getList();
this.getVideoCount();
- listDept({ status: 0 }).then(response => {
+ listDept({status: 0}).then(response => {
this.deptList = response.data.filter(item => item.area);
});
},
methods: {
+ translateCameraFunType(cameraFunType) {
+ // 鏍￠獙杈撳叆鏄惁涓哄瓧绗︿覆
+ if (typeof cameraFunType !== 'string') {
+ return "";
+ }
+
+ // 鍒嗗壊瀛楃涓蹭负鏁扮粍锛屽苟鍘婚櫎绌哄瓧绗︿覆
+ const types = cameraFunType.split('/').filter(type => type);
+
+ // 鏍￠獙骞惰浆鎹㈡瘡涓被鍨�
+ const translatedTypes = types.map(type => {
+ switch (type) {
+ case '1':
+ return '瑙嗛';
+ case '2':
+ return '杞﹁締';
+ case '3':
+ return '浜鸿劯';
+ default:
+ return ''
+ }
+ });
+ return translatedTypes.join(', ');
+ },
+ clickTab(active) {
+ this.queryParams.provinceTag = active
+ this.getList()
+ this.getVideoCount()
+ },
/** 鏌ヨ璁惧璧勪骇鍒楄〃 */
getList() {
this.loading = true;
@@ -259,7 +300,7 @@
},
/** 鏌ヨ寮傚父鎭㈠璁惧缁熻鏁� */
getVideoCount() {
- recoveryException().then(response => {
+ recoveryException(this.queryParams).then(response => {
this.count = response.data;
});
},
@@ -302,7 +343,7 @@
// 澶氶�夋閫変腑鏁版嵁
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
- this.single = selection.length!==1
+ this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 鏂板鎸夐挳鎿嶄綔 */
@@ -344,12 +385,13 @@
/** 鍒犻櫎鎸夐挳鎿嶄綔 */
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() {
@@ -362,6 +404,30 @@
</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: #ffffff;
@@ -369,6 +435,7 @@
margin-bottom: 20px;
height: 120px
}
+
.icon-container {
display: flex;
justify-content: center;
@@ -378,6 +445,7 @@
height: 80px;
margin-left: 5%;
}
+
.el-icon-refresh-left {
font-size: 50px;
color: #FFFFFF;
--
Gitblit v1.8.0