From c59b544a65b8c58d9a9fd29e0d4fd87edd6f73a3 Mon Sep 17 00:00:00 2001
From: wu <2468489804@qq.com>
Date: Sat, 13 Aug 2022 16:21:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=9C=8D=E5=8A=A1=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../edgeServer/edgeServerMonitor/index.vue    | 205 ++++++++++++++++++
 1 file changed, 205 insertions(+)

diff --git a/src/views/edgeServer/edgeServerMonitor/index.vue b/src/views/edgeServer/edgeServerMonitor/index.vue
index e69de29..a129d55 100644
--- a/src/views/edgeServer/edgeServerMonitor/index.vue
+++ b/src/views/edgeServer/edgeServerMonitor/index.vue
@@ -0,0 +1,205 @@
+<template>
+    <d2-container>
+        <el-card class="box-card" v-for="(item, index) in serverData" :key="index">
+            <div slot="header" class="device-header">
+                <span>前置服务 {{ item.name }} ({{ item.ip }} )</span>
+            </div>
+
+            <el-row :gutter="12">
+                <el-col :span="6" v-for="i in item.children" :key="i">
+                    <el-popover placement="top" trigger="click">
+
+                        <el-menu @select="(index) => setServeStatus(i.id, index)" :style="{ 'borderRight': 'none' }">
+                            <el-menu-item index="0">
+                                <!-- <i class="el-icon-menu"></i> -->
+                                <span slot="title">暂停</span>
+                            </el-menu-item>
+                            <el-menu-item index="1">
+                                <!-- <i class="el-icon-menu"></i> -->
+                                <span slot="title">重启</span>
+                            </el-menu-item>
+                            <el-menu-item index="2">
+                                <!-- <i class="el-icon-menu"></i> -->
+                                <span slot="title">关闭</span>
+                            </el-menu-item>
+                        </el-menu>
+                        <el-card slot="reference"
+                            :class="{ 'box-card': true, 'online': i.status === 1, 'offline': i.status === 0 }">
+                            <div slot="header" class="header-title">
+                                <span>{{ i.name }}</span>
+                            </div>
+                            <el-row :gutter="24">
+                                <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
+                                    <span>设备类型</span>
+                                </el-col>
+                                <el-col :span="14" style="padding-left:0px;">：{{ i.DeviceType }}</el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
+                                    <span>IP/端口</span>
+                                </el-col>
+                                <el-col :span="14" style="padding-left:0px;">：{{ i.ip + ':' + i.port }}</el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
+                                    <span>活动时间</span>
+                                </el-col>
+                                <el-col :span="14" style="padding-left:0px;">：{{ i.time }}</el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
+                                    <span>采集耗时</span>
+                                </el-col>
+                                <el-col :span="14" style="padding-left:0px;">：{{ i.hs }}</el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
+                                    <span>成功次数</span>
+                                </el-col>
+                                <el-col :span="14" style="padding-left:0px;">：{{ i.success_number }}</el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-col :span="5" style="padding-right:0px;margin-bottom: 5px;">
+                                    <span>失败次数</span>
+                                </el-col>
+                                <el-col :span="14" style="padding-left:0px;">：{{ i.fail_number }}</el-col>
+                            </el-row>
+                            <el-row :gutter="24">
+                                <el-alert v-if="i.error_mesage" :title="i.error_mesage" type="error" :closable="false">
+                                </el-alert>
+                                <div v-else style="height:35px;"></div>
+                            </el-row>
+
+                        </el-card>
+                    </el-popover>
+                </el-col>
+            </el-row>
+
+        </el-card>
+    </d2-container>
+</template>
+<script>
+export default {
+    name: 'ServeMonitoring',
+    data() {
+        return {
+            serverData: [{
+                ip: '192.168.0.31',
+                name: '#001',
+                children: [
+                    {
+                        id: '1',
+                        name: 'DEV_001_001',
+                        DeviceType: '西门子 S1200',
+                        ip: '192.168.0.31',
+                        port: '55667',
+                        time: '2022-01-01 02:32:22',
+                        hs: '537ms',
+                        success_number: '827,732,221',
+                        fail_number: '827,732,221',
+                        error_mesage: 'Connected xxxx:Timeout',
+                        status: 0,
+                    },
+                    {
+                        id: '2',
+                        name: 'DEV_001_001',
+                        DeviceType: '西门子 S1200',
+                        ip: '192.168.0.31',
+                        port: '55667',
+                        time: '2022-01-01 02:32:22',
+                        hs: '537ms',
+                        success_number: '827,732,221',
+                        fail_number: '827,732,221',
+                        error_mesage: '',
+                        status: 1,
+                    },
+                    {
+                        id: '3',
+                        name: 'DEV_001_001',
+                        DeviceType: '西门子 S1200',
+                        ip: '192.168.0.31',
+                        port: '55667',
+                        time: '2022-01-01 02:32:22',
+                        hs: '537ms',
+                        success_number: '827,732,221',
+                        fail_number: '827,732,221',
+                        error_mesage: '',
+                        status: 1,
+                    },
+                    {
+                        id: '4',
+                        name: 'DEV_001_001',
+                        DeviceType: '西门子 S1200',
+                        ip: '192.168.0.31',
+                        port: '55667',
+                        time: '2022-01-01 02:32:22',
+                        hs: '537ms',
+                        success_number: '827,732,221',
+                        fail_number: '827,732,221',
+                        error_mesage: '',
+                        status: 0,
+                    }
+                ]
+            }]
+        }
+    },
+    methods: {
+        async getServe() {
+            try {
+                const res = await this.$api.QUERY_SERVE_MONITORING()
+
+            } catch (e) {
+                console.log(e)
+            }
+        },
+        async setServeStatus(id, status) {
+            try {
+                const data = { id: id, status: status }
+                //await this.$api.SET_SERVE_STATUS(data)
+                this.$message({
+                    message: '操作成功',
+                    type: 'success'
+                })
+            } catch (e) {
+                console.log(e)
+            }
+            this.getServe()
+
+        },
+    }
+}
+</script>
+<style scoped>
+.box-card {
+    margin: 5px 0px;
+    color: #fff;
+    font-weight: bold;
+}
+
+.device-header {
+    color: #000;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.online {
+    background-color: #67c23a;
+}
+
+.offline {
+    background-color: #666;
+}
+
+.text {
+    font-size: 14px;
+}
+
+.item {
+    margin-bottom: 18px;
+}
+
+.header-title {
+
+    font-size: 20px;
+}
+</style>
\ No newline at end of file