From 34025c307e902f220adf89a2cf62cf425759d7c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AD=A5=E5=B1=A5=E4=B8=8D=E5=81=9C?= <1873501479@qq.com>
Date: Sat, 6 Aug 2022 12:28:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=94=BE=E5=A4=A7=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  8 +-
 src/components/NewsDialog.vue                 | 42 ++++++++++
 src/views/DataManagement/ReminderSettings.vue | 17 ++--
 .../FacilityManagement/FacilityLists.vue      | 17 +++-
 src/views/FacilityManagement/RealTimeDate.vue | 79 ++++++++++++++++++-
 .../NewMainPageComponents/RightMiddle.vue     | 22 ++++--
 6 files changed, 161 insertions(+), 24 deletions(-)
 create mode 100644 src/components/NewsDialog.vue

diff --git a/src/App.vue b/src/App.vue
index 514165b..8f8ff31 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,16 +5,16 @@
   </div>
 </template>
 
-<!--<script>
-// import MainPage from './views/MainPage.vue'
+<script>
+// import NewsDialog from './components/NewsDialog'
 
 export default {
   name: 'App',
   components: {
-    // MainPage
+    // NewsDialog
   }
 }
-</script>-->
+</script>
 
 <style>
 </style>
diff --git a/src/components/NewsDialog.vue b/src/components/NewsDialog.vue
new file mode 100644
index 0000000..416329e
--- /dev/null
+++ b/src/components/NewsDialog.vue
@@ -0,0 +1,42 @@
+<template>
+  <div style="width: 300px;height: 300px">
+    <el-button type="text" style="font-size: 30px;color: #32ff7e" @click="dialogVisible = true">
+      1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
+    </el-button>
+    <el-dialog
+      title="设备离线提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <span>xxx设备离线</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NewsDialog',
+  data() {
+    return {
+      dialogVisible: false
+    }
+  },
+  methods: {
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done()
+        })
+        .catch(_ => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/DataManagement/ReminderSettings.vue b/src/views/DataManagement/ReminderSettings.vue
index 8f845a4..cdd7cec 100644
--- a/src/views/DataManagement/ReminderSettings.vue
+++ b/src/views/DataManagement/ReminderSettings.vue
@@ -8,10 +8,11 @@
           <!--     日报提醒设置     -->
           <el-col :span="8">
             <el-card shadow="hover">
-              <div style="height: auto">
-                <h3 style="color: #20a0ff">
+              <div style="height: auto;min-height:290px">
+                <span style="color: #20a0ff;font-size: 20px;text-align: center;font-weight: bold">
                   日报发送设置
-                </h3>
+                </span>
+                <div style="height: 15px" />
                 <div>
                   <el-form ref="dailyNewspaperForm" :model="dailyNewspaperForm" label-width="110px" class="demo-dynamic" label-position="left">
                     <el-form-item
@@ -70,9 +71,10 @@
           <el-col :span="8">
             <el-card shadow="hover">
               <div style="height: auto">
-                <h3 style="color: #20a0ff">
+                <span style="color: #20a0ff;font-size: 20px;text-align: center;font-weight: bold">
                   报警率设置
-                </h3>
+                </span>
+                <div style="height: 15px" />
                 <el-form ref="policeForm" :model="policeForm" label-width="110px" class="demo-dynamic">
                   <el-form-item
                     prop="police"
@@ -130,9 +132,10 @@
           <el-col :span="8">
             <el-card shadow="hover">
               <div style="height: auto">
-                <h3 style="color: #20a0ff">
+                <span style="color: #20a0ff;font-size: 20px;text-align: center;font-weight: bold">
                   利用率基数设置
-                </h3>
+                </span>
+                <div style="height: 15px" />
                 <el-form ref="utilizationRatioForm" :model="utilizationRatioForm" label-width="110px" class="demo-dynamic">
                   <el-form-item
                     prop="inactivity"
diff --git a/src/views/FacilityManagement/FacilityLists.vue b/src/views/FacilityManagement/FacilityLists.vue
index b801d8a..4f5d3af 100644
--- a/src/views/FacilityManagement/FacilityLists.vue
+++ b/src/views/FacilityManagement/FacilityLists.vue
@@ -2,6 +2,14 @@
 <template>
   <div class>
     <BreadCrumb :inner="inner" />
+    <!--    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">-->
+    <!--      <el-tab-pane label="安检门列表" name="first">-->
+    <!--        安检门列表-->
+    <!--      </el-tab-pane>-->
+    <!--      <el-tab-pane label="ESD列表" name="second">-->
+    <!--        ESD列表-->
+    <!--      </el-tab-pane>-->
+    <!--    </el-tabs>-->
     <EmptyCard>
       <div slot="EmptyCard">
         <!-- 查询模块 -->
@@ -157,12 +165,12 @@
               :rules="modifyInfoRules"
               label-width="100px"
             >
-              <el-form-item label="设备ID" prop="deviceId">
+              <el-form-item label="设备编号" prop="deviceId">
                 <el-input
                   v-model="modifyInfo.deviceId"
                   style="width: 66%"
                   auto-complete="off"
-                  placeholder="请输入ID"
+                  placeholder="请输入设备编号"
                   :disabled="ModifyDialogTitle === '编辑设备信息'"
                 />
               </el-form-item>
@@ -804,6 +812,7 @@ export default {
   },
   data() {
     return {
+      activeName: 'first',
       inner: { title: '设备列表' },
       searchFrom: {
         searchData: ''
@@ -973,13 +982,15 @@ export default {
   computed: {},
   watch: {},
   created() {
-
   },
   mounted() {
     this.getData()
     this.getConfigData()
   },
   methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
     // 单个设备删除
     deleteRow(index, row) {
       this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
diff --git a/src/views/FacilityManagement/RealTimeDate.vue b/src/views/FacilityManagement/RealTimeDate.vue
index eaa8312..8aa02aa 100644
--- a/src/views/FacilityManagement/RealTimeDate.vue
+++ b/src/views/FacilityManagement/RealTimeDate.vue
@@ -2,7 +2,76 @@
 <template>
   <div>
     <BreadCrumb :inner="inner" />
-    <EmptyCard />
+    <EmptyCard>
+      <div slot="EmptyCard">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-card style="height: 270px;width: 100%;display: inline-block;float: left">
+              <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+                <span style="font-size: 20px;text-align: center;font-weight: bold;color: #156e50">服务器信息</span>
+                <div style="height: 15px" />
+                <el-form-item label="IP地址">
+                  <el-input v-model="formLabelAlign.name" />
+                </el-form-item>
+                <el-form-item label="端口号">
+                  <el-input v-model="formLabelAlign.region" />
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </el-col>
+          <el-col :span="8">
+            <el-card style="height: 270px;width: 100%;display: inline-block;float: left">
+              <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+                <span style="font-size: 20px;text-align: center;font-weight: bold;color: #156e50">主交换机信息</span>
+                <div style="height: 15px" />
+                <el-form-item label="型号">
+                  <el-input v-model="formLabelAlign.name" />
+                </el-form-item>
+                <el-form-item label="端口号">
+                  <el-input v-model="formLabelAlign.region" />
+                </el-form-item>
+                <el-form-item label="数量">
+                  <el-input v-model="formLabelAlign.region" />
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </el-col>
+          <el-col :span="8">
+            <el-card style="height: 270px;width: 100%;display: inline-block;float: left">
+              <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+                <span style="font-size: 20px;text-align: center;font-weight: bold;color: #156e50">无线路由器信息</span>
+                <div style="height: 15px" />
+                <el-form-item label="型号">
+                  <el-input v-model="formLabelAlign.name" />
+                </el-form-item>
+                <el-form-item label="端口号">
+                  <el-input v-model="formLabelAlign.region" />
+                </el-form-item>
+                <el-form-item label="数量">
+                  <el-input v-model="formLabelAlign.region" />
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" style="padding-top: 20px">
+          <el-col :span="8">
+            <el-card style="height: 270px;width: 100%;display: inline-block;float: left;">
+              <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+                <span style="font-size: 20px;text-align: center;font-weight: bold;color: #156e50">02区</span>
+                <div style="height: 15px" />
+                <el-form-item label="位置">
+                  <el-input v-model="formLabelAlign.name" />
+                </el-form-item>
+                <el-form-item label="设备台数">
+                  <el-input v-model="formLabelAlign.region" />
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+    </EmptyCard>
   </div>
 </template>
 
@@ -18,8 +87,14 @@ export default {
   },
   data() {
     return {
+      labelPosition: 'left',
+      formLabelAlign: {
+        name: '',
+        region: '',
+        type: ''
+      },
       inner: {
-        title: '实时数据'
+        title: '设备信息'
       },
       searchFrom: {
         deviceId: '',
diff --git a/src/views/NewMainPageComponents/RightMiddle.vue b/src/views/NewMainPageComponents/RightMiddle.vue
index df82900..60f9b91 100644
--- a/src/views/NewMainPageComponents/RightMiddle.vue
+++ b/src/views/NewMainPageComponents/RightMiddle.vue
@@ -21,18 +21,21 @@
     <div style="display: flex;justify-content: space-between;width:100%;height: 80%;">
       <div style="width: 50%;height: 100%">
         <div id="rightMiddle1" class="rightMiddle_echarts" style="width: 100%;height:75%;" />
+        <div style="display: inline-block;width: 31%;" />
         <div
           class="right-center-btn"
-          style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:78px;width: 95px;height: 30px"
+          style="display: inline-block;border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;width: 36%;height: 30px"
         >
           报警率
         </div>
-        <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 67px;width: 130px;height: 32px">
-          <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center">
+        <div style="height: 3%" />
+        <div style="display: flex;font-size: 8px;background-color: #0c1426;width: 100%;height: 32px">
+          <div style="display: inline-block;width:25%;" />
+          <div style="color:#c0ae14;border: 1px solid #083770;width: 25%;text-align: center">
             <span style="font-size: 8px">本周期</span><br>
             <span style="font-size: 10px">{{ currentCycle }}</span>
           </div>
-          <div style="color:#04b464;margin-left: 10px;width: 50px;text-align: center;border: 1px solid #083770">
+          <div style="color:#04b464;margin-left: 10px;width: 25%;text-align: center;border: 1px solid #083770">
             <span style="font-size: 8px">上周期</span><br>
             <span style="font-size: 10px">{{ lastCycle }}</span>
           </div>
@@ -40,18 +43,21 @@
       </div>
       <div style="width: 50%;height: 100%">
         <div id="rightMiddle2" class="rightMiddle_echarts" style="width: 100%;height:75%" />
+        <div style="display: inline-block;width: 32%;" />
         <div
           class="right-center-btn"
-          style="border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;margin-left:78px;width: 95px;height: 30px"
+          style="display: inline-block;border: 0;color: #eeeeee;font-size: 16px;text-align: center;line-height: 30px;width: 36%;height: 30px"
         >
           不活跃度
         </div>
-        <div style="display: flex;font-size: 8px;background-color: #0c1426;margin:6px 0 0 67px;width: 130px;height: 32px">
-          <div style="color:#c0ae14;border: 1px solid #083770;width: 60px;text-align: center;">
+        <div style="height: 3%" />
+        <div style="display: flex;font-size: 8px;background-color: #0c1426;width: 100%;height: 32px">
+          <div style="display: inline-block;width:25%;" />
+          <div style="display: inline-block;color:#c0ae14;border: 1px solid #083770;width: 25%;text-align: center;">
             <span style="font-size: 8px">本周期</span><br>
             <span style="font-size: 10px">{{ currentCycleInactivity }}</span>
           </div>
-          <div style="color:#04b464;margin-left: 10px;width: 50px;text-align: center;border: 1px solid #083770">
+          <div style="color:#04b464;margin-left: 10px;width: 25%;text-align: center;border: 1px solid #083770">
             <span style="font-size: 8px">上周期</span><br>
             <span style="font-size: 10px">{{ lastCycleInactivity }}</span>
           </div>
-- 
Gitee