From 6d2f26e4c867c1cfba4ebe86d4162edb01da80a0 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期三, 31 十二月 2025 14:32:07 +0800
Subject: [PATCH] 代码调整8
---
src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue | 630 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 627 insertions(+), 3 deletions(-)
diff --git a/src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue b/src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue
index 40dc0c9..bdd0a7b 100644
--- a/src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue
+++ b/src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue
@@ -1,9 +1,633 @@
<template>
- <div></div>
+ <div class="app-container">
+ <el-form :model="filters" :inline="true">
+ <el-form-item label="璁惧鍚嶇О">
+ <el-input
+ v-model="filters.name"
+ style="width: 240px"
+ placeholder="璇疯緭鍏ヨ澶囧悕绉�"
+ clearable
+ :prefix-icon="Search"
+ @change="getTableData"
+ />
+ </el-form-item>
+ <el-form-item label="璁惧鐘舵��">
+ <el-select
+ v-model="filters.status"
+ style="width: 240px"
+ placeholder="璇烽�夋嫨璁惧鐘舵��"
+ clearable
+ @change="getTableData"
+ >
+ <el-option label="鍦ㄧ嚎" value="1"></el-option>
+ <el-option label="绂荤嚎" value="0"></el-option>
+ <el-option label="鏁呴殰" value="2"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="璁惧绫诲瀷">
+ <el-select
+ v-model="filters.type"
+ style="width: 240px"
+ placeholder="璇烽�夋嫨璁惧绫诲瀷"
+ clearable
+ @change="getTableData"
+ >
+ <el-option label="闂ㄧ璁惧" value="0"></el-option>
+ <el-option label="鐜鐩戞祴璁惧" value="1"></el-option>
+ <el-option label="瑙嗛鐩戞帶璁惧" value="2"></el-option>
+ <el-option label="鏅鸿兘閬撻椄" value="3"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="getTableData">鎼滅储</el-button>
+ <el-button @click="resetFilters">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+
+ <div class="monitor-container">
+ <div class="monitor-stats">
+ <div class="stat-card">
+ <div class="stat-title">鍦ㄧ嚎璁惧</div>
+ <div class="stat-value online">{{ onlineCount }}</div>
+ </div>
+ <div class="stat-card">
+ <div class="stat-title">绂荤嚎璁惧</div>
+ <div class="stat-value offline">{{ offlineCount }}</div>
+ </div>
+ <div class="stat-card">
+ <div class="stat-title">鏁呴殰璁惧</div>
+ <div class="stat-value error">{{ errorCount }}</div>
+ </div>
+ <div class="stat-card">
+ <div class="stat-title">璁惧鎬绘暟</div>
+ <div class="stat-value total">{{ totalCount }}</div>
+ </div>
+ </div>
+
+ <div class="table_list">
+ <PIMTable
+ rowKey="id"
+ :column="columns"
+ :tableData="dataList"
+ :page="{
+ current: pagination.currentPage,
+ size: pagination.pageSize,
+ total: pagination.total,
+ }"
+ @pagination="changePage"
+ >
+ </PIMTable>
+ </div>
+ </div>
+
+ <!-- 璁惧璇︽儏寮圭獥 -->
+ <el-dialog
+ v-model="detailVisible"
+ :title="`璁惧璇︽儏 - ${selectedDevice.name}`"
+ width="800px"
+ >
+ <div v-if="selectedDevice" class="device-detail">
+ <div class="detail-section">
+ <h3>鍩烘湰淇℃伅</h3>
+ <el-descriptions :column="2" border>
+ <el-descriptions-item label="璁惧鍚嶇О">{{
+ selectedDevice.name
+ }}</el-descriptions-item>
+ <el-descriptions-item label="璁惧绫诲瀷">{{
+ typeMap[selectedDevice.type]
+ }}</el-descriptions-item>
+ <el-descriptions-item label="璁惧鐘舵��">{{
+ statusMap[selectedDevice.status]
+ }}</el-descriptions-item>
+ <el-descriptions-item label="璁惧缂栧彿">{{
+ selectedDevice.code
+ }}</el-descriptions-item>
+ <el-descriptions-item label="瀹夎浣嶇疆">{{
+ selectedDevice.location
+ }}</el-descriptions-item>
+ <el-descriptions-item label="瀹夎鏃堕棿">{{
+ selectedDevice.installTime
+ }}</el-descriptions-item>
+ <el-descriptions-item label="鏈�鍚庣淮鎶ゆ椂闂�">{{
+ selectedDevice.maintainTime
+ }}</el-descriptions-item>
+ <el-descriptions-item label="璐ｄ换浜�">{{
+ selectedDevice.responsiblePerson
+ }}</el-descriptions-item>
+ </el-descriptions>
+ </div>
+
+ <div class="detail-section">
+ <h3>瀹炴椂鏁版嵁</h3>
+ <div class="realtime-data">
+ <div
+ v-for="data in selectedDevice.realtimeData"
+ :key="data.name"
+ class="data-item"
+ >
+ <div class="data-name">{{ data.name }}</div>
+ <div class="data-value">{{ data.value }}{{ data.unit }}</div>
+ <div class="data-status" :class="data.status">
+ {{ data.status === "normal" ? "姝ｅ父" : "寮傚父" }}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="detail-section">
+ <h3>鎺у埗鎿嶄綔</h3>
+ <div class="control-buttons">
+ <el-button
+ type="primary"
+ @click="controlDevice('restart')"
+ :disabled="selectedDevice.status !== '1'"
+ >閲嶅惎璁惧</el-button
+ >
+ <el-button
+ type="warning"
+ @click="controlDevice('reset')"
+ :disabled="selectedDevice.status !== '1'"
+ >閲嶇疆璁惧</el-button
+ >
+ <el-button
+ type="danger"
+ @click="controlDevice('shutdown')"
+ :disabled="selectedDevice.status !== '1'"
+ >鍏抽棴璁惧</el-button
+ >
+ <el-button
+ type="success"
+ @click="controlDevice('update')"
+ :disabled="selectedDevice.status !== '1'"
+ >鍥轰欢鏇存柊</el-button
+ >
+ </div>
+ </div>
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="detailVisible = false">鍏抽棴</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
</template>
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
+import {
+ Search
+} from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+
+// 瀹氫箟鍋囨暟鎹�
+const mockDevices = [
+ {
+ id: 1,
+ name: "涓滈棬闂ㄧ鎺у埗鍣�",
+ code: "DEV-20250001",
+ type: "0",
+ status: "1",
+ location: "涓滈棬鍏ュ彛",
+ installTime: "2025-01-15",
+ maintainTime: "2025-12-20",
+ responsiblePerson: "寮犱笁",
+ realtimeData: [
+ { name: "娓╁害", value: 23.5, unit: "鈩�", status: "normal" },
+ { name: "婀垮害", value: 45, unit: "%", status: "normal" },
+ { name: "杩愯鏃堕暱", value: 12560, unit: "h", status: "normal" },
+ { name: "闂ㄧ寮�鍏虫鏁�", value: 234, unit: "娆�/澶�", status: "normal" },
+ ],
+ },
+ {
+ id: 2,
+ name: "瑗块棬瑙嗛鐩戞帶",
+ code: "DEV-20250002",
+ type: "2",
+ status: "1",
+ location: "瑗块棬鍑哄彛",
+ installTime: "2025-02-20",
+ maintainTime: "2025-11-15",
+ responsiblePerson: "鏉庡洓",
+ realtimeData: [
+ { name: "瑙嗛娓呮櫚搴�", value: 1080, unit: "P", status: "normal" },
+ { name: "甯х巼", value: 25, unit: "fps", status: "normal" },
+ { name: "瀛樺偍绌洪棿", value: 78, unit: "%", status: "warning" },
+ { name: "缃戠粶寤惰繜", value: 12, unit: "ms", status: "normal" },
+ ],
+ },
+ {
+ id: 3,
+ name: "鍗楅棬鐜鐩戞祴浠�",
+ code: "DEV-20250003",
+ type: "1",
+ status: "2",
+ location: "鍗楅棬骞垮満",
+ installTime: "2025-03-10",
+ maintainTime: "2025-10-05",
+ responsiblePerson: "鐜嬩簲",
+ realtimeData: [
+ { name: "PM2.5", value: 85, unit: "渭g/m鲁", status: "error" },
+ { name: "PM10", value: 120, unit: "渭g/m鲁", status: "error" },
+ { name: "鍣０", value: 65, unit: "dB", status: "normal" },
+ { name: "椋庨��", value: 1.2, unit: "m/s", status: "normal" },
+ ],
+ },
+ {
+ id: 4,
+ name: "鍖楅棬鏅鸿兘閬撻椄",
+ code: "DEV-20250004",
+ type: "3",
+ status: "0",
+ location: "鍖楅棬鍏ュ彛",
+ installTime: "2025-04-05",
+ maintainTime: "2025-09-20",
+ responsiblePerson: "璧靛叚",
+ realtimeData: [
+ { name: "寮�鍏虫鏁�", value: 156, unit: "娆�/澶�", status: "normal" },
+ { name: "杩愯鐢靛帇", value: 220, unit: "V", status: "normal" },
+ { name: "杩愯鐢垫祦", value: 5.2, unit: "A", status: "normal" },
+ { name: "鏁呴殰浠ｇ爜", value: "E001", unit: "", status: "error" },
+ ],
+ },
+ {
+ id: 5,
+ name: "涓帶瀹ゆ湇鍔″櫒",
+ code: "DEV-20250005",
+ type: "1",
+ status: "1",
+ location: "涓帶瀹�",
+ installTime: "2025-05-15",
+ maintainTime: "2025-12-01",
+ responsiblePerson: "瀛欎竷",
+ realtimeData: [
+ { name: "CPU浣跨敤鐜�", value: 45, unit: "%", status: "normal" },
+ { name: "鍐呭瓨浣跨敤鐜�", value: 68, unit: "%", status: "warning" },
+ { name: "纾佺洏浣跨敤鐜�", value: 82, unit: "%", status: "warning" },
+ { name: "缃戠粶娴侀噺", value: 125, unit: "Mbps", status: "normal" },
+ ],
+ },
+];
+
+// 鍝嶅簲寮忔暟鎹�
+const filters = reactive({
+ name: "",
+ status: "",
+ type: "",
+});
+
+const dataList = ref([]);
+const pagination = reactive({
+ currentPage: 1,
+ pageSize: 10,
+ total: 0,
+});
+
+const detailVisible = ref(false);
+const selectedDevice = ref({});
+
+// 鐘舵�佹槧灏�
+const statusMap = {
+ 0: '<el-tag type="warning">绂荤嚎</el-tag>',
+ 1: '<el-tag type="success">鍦ㄧ嚎</el-tag>',
+ 2: '<el-tag type="danger">鏁呴殰</el-tag>',
+};
+
+// 绫诲瀷鏄犲皠
+const typeMap = {
+ 0: "闂ㄧ璁惧",
+ 1: "鐜鐩戞祴璁惧",
+ 2: "瑙嗛鐩戞帶璁惧",
+ 3: "鏅鸿兘閬撻椄",
+};
+
+// 璁惧鏁伴噺缁熻
+const onlineCount = computed(() => {
+ return mockDevices.filter((device) => device.status === "1").length;
+});
+
+const offlineCount = computed(() => {
+ return mockDevices.filter((device) => device.status === "0").length;
+});
+
+const errorCount = computed(() => {
+ return mockDevices.filter((device) => device.status === "2").length;
+});
+
+const totalCount = computed(() => {
+ return mockDevices.length;
+});
+
+// 琛ㄦ牸鍒楅厤缃�
+const columns = [
+ {
+ label: "璁惧鍚嶇О",
+ align: "center",
+ prop: "name",
+ },
+ {
+ label: "璁惧缂栧彿",
+ align: "center",
+ prop: "code",
+ },
+ {
+ label: "璁惧绫诲瀷",
+ align: "center",
+ prop: "type",
+ formatter: (row) => {
+ return typeMap[row.type];
+ },
+ },
+ {
+ label: "璁惧鐘舵��",
+ align: "center",
+ prop: "status",
+ formatter: (row) => {
+ return statusMap[row.status];
+ },
+ },
+ {
+ label: "瀹夎浣嶇疆",
+ align: "center",
+ prop: "location",
+ },
+ {
+ label: "璐ｄ换浜�",
+ align: "center",
+ prop: "responsiblePerson",
+ },
+ {
+ label: "鏈�鍚庣淮鎶ゆ椂闂�",
+ align: "center",
+ prop: "maintainTime",
+ },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 140,
+ operation: [
+ {
+ name: "鏌ョ湅璇︽儏",
+ type: "text",
+ clickFun: (row) => {
+ viewDetail(row);
+ },
+ },
+ {
+ name: "瀹炴椂鐩戞帶",
+ type: "text",
+ clickFun: (row) => {
+ realtimeMonitor(row);
+ },
+ visible: (row) => {
+ return row.status === "1";
+ },
+ },
+ {
+ name: "閲嶅惎璁惧",
+ type: "text",
+ clickFun: (row) => {
+ controlDevice("restart", row);
+ },
+ visible: (row) => {
+ return row.status === "1";
+ },
+ },
+ ],
+ },
+];
+
+// 杩囨护鍚庣殑鏁版嵁
+const filteredData = computed(() => {
+ return mockDevices.filter((item) => {
+ const nameMatch = !filters.name || item.name.includes(filters.name);
+ const statusMatch = !filters.status || item.status === filters.status;
+ const typeMatch = !filters.type || item.type === filters.type;
+ return nameMatch && statusMatch && typeMatch;
+ });
+});
+
+// 鑾峰彇琛ㄦ牸鏁版嵁
+const getTableData = () => {
+ pagination.total = filteredData.value.length;
+ const start = (pagination.currentPage - 1) * pagination.pageSize;
+ const end = start + pagination.pageSize;
+ dataList.value = filteredData.value.slice(start, end);
+};
+
+// 閲嶇疆杩囨护鍣�
+const resetFilters = () => {
+ filters.name = "";
+ filters.status = "";
+ filters.type = "";
+ pagination.currentPage = 1;
+ getTableData();
+};
+
+// 鍒嗛〉鍙樺寲
+const changePage = ({ page, limit }) => {
+ pagination.currentPage = page;
+ pagination.pageSize = limit;
+ getTableData();
+};
+
+// 鏌ョ湅璁惧璇︽儏
+const viewDetail = (row) => {
+ selectedDevice.value = row;
+ detailVisible.value = true;
+};
+
+// 瀹炴椂鐩戞帶
+const realtimeMonitor = (row) => {
+ ElMessage.info(`姝ｅ湪璺宠浆鍒�${row.name}鐨勫疄鏃剁洃鎺ч〉闈�...`);
+ // 杩欓噷鍙互璺宠浆鍒板疄鏃剁洃鎺ч〉闈㈡垨鎵撳紑鐩戞帶绐楀彛
+};
+
+// 璁惧鎺у埗
+const controlDevice = (action, row = selectedDevice.value) => {
+ const actionMap = {
+ restart: "閲嶅惎",
+ reset: "閲嶇疆",
+ shutdown: "鍏抽棴",
+ update: "鍥轰欢鏇存柊",
+ };
+
+ ElMessageBox.confirm(
+ `纭畾瑕佸璁惧 ${row.name} 鎵ц${actionMap[action]}鎿嶄綔鍚�?`,
+ "鎻愮ず",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }
+ )
+ .then(() => {
+ ElMessage.success(`璁惧${actionMap[action]}鎿嶄綔宸插彂閫乣);
+ // 妯℃嫙璁惧鍝嶅簲
+ setTimeout(() => {
+ ElMessage.success(`璁惧${actionMap[action]}鎿嶄綔鎵ц鎴愬姛`);
+ }, 1000);
+ })
+ .catch(() => {});
+};
+
+// 瀹氭椂鏇存柊璁惧鐘舵�侊紙妯℃嫙瀹炴椂鍙樺寲锛�
+const updateDeviceStatus = () => {
+ // 闅忔満鏇存柊涓�浜涜澶囩殑鐘舵�佸拰瀹炴椂鏁版嵁
+ mockDevices.forEach((device) => {
+ if (Math.random() > 0.8) {
+ // 80%姒傜巼涓嶆洿鏂�
+ return;
+ }
+
+ // 闅忔満鏇存柊鐘舵��
+ const statuses = ["0", "1", "2"];
+ device.status = statuses[Math.floor(Math.random() * statuses.length)];
+
+ // 鏇存柊瀹炴椂鏁版嵁
+ device.realtimeData.forEach((data) => {
+ if (data.name === "娓╁害") {
+ data.value = (20 + Math.random() * 10).toFixed(1);
+ data.status = data.value > 30 ? "error" : "normal";
+ } else if (data.name === "婀垮害") {
+ data.value = Math.floor(30 + Math.random() * 50);
+ data.status = data.value > 80 ? "error" : "normal";
+ } else if (data.name === "CPU浣跨敤鐜�") {
+ data.value = Math.floor(20 + Math.random() * 60);
+ data.status =
+ data.value > 80 ? "error" : data.value > 60 ? "warning" : "normal";
+ }
+ });
+ });
+
+ // 鍒锋柊琛ㄦ牸鏁版嵁
+ getTableData();
+};
+
+// 鍒濆鍖栨暟鎹�
+onMounted(() => {
+ getTableData();
+ // 姣�5绉掓洿鏂颁竴娆¤澶囩姸鎬�
+ const interval = setInterval(updateDeviceStatus, 5000);
+
+ // 娓呯悊瀹氭椂鍣�
+ return () => clearInterval(interval);
+});
</script>
-<style>
+<style lang="scss" scoped>
+.table_list {
+ margin-top: unset;
+}
+
+.monitor-container {
+ .monitor-stats {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
+
+ .stat-card {
+ flex: 1;
+ background: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ text-align: center;
+
+ .stat-title {
+ font-size: 14px;
+ color: #606266;
+ margin-bottom: 10px;
+ }
+
+ .stat-value {
+ font-size: 32px;
+ font-weight: bold;
+
+ &.online {
+ color: #67c23a;
+ }
+
+ &.offline {
+ color: #e6a23c;
+ }
+
+ &.error {
+ color: #f56c6c;
+ }
+
+ &.total {
+ color: #409eff;
+ }
+ }
+ }
+ }
+}
+
+.device-detail {
+ .detail-section {
+ margin-bottom: 20px;
+
+ h3 {
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ color: #303133;
+ }
+ }
+
+ .realtime-data {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px;
+
+ .data-item {
+ background: #f5f7fa;
+ padding: 15px;
+ border-radius: 8px;
+
+ .data-name {
+ font-size: 14px;
+ color: #606266;
+ margin-bottom: 5px;
+ }
+
+ .data-value {
+ font-size: 24px;
+ font-weight: bold;
+ color: #303133;
+ margin-bottom: 5px;
+ }
+
+ .data-status {
+ font-size: 12px;
+ padding: 2px 8px;
+ border-radius: 10px;
+
+ &.normal {
+ background: #f0f9eb;
+ color: #67c23a;
+ }
+
+ &.warning {
+ background: #fdf6ec;
+ color: #e6a23c;
+ }
+
+ &.error {
+ background: #fef0f0;
+ color: #f56c6c;
+ }
+ }
+ }
+ }
+
+ .control-buttons {
+ display: flex;
+ gap: 10px;
+ margin-top: 10px;
+ }
+}
</style>
--
Gitblit v1.9.3