From 1540e950926f82fda52b52237103fed3e93d5ee3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=93=B6=E4=B8=AD=E6=B2=99?= <464652163@qq.com>
Date: Wed, 26 Jun 2024 15:51:33 +0800
Subject: [PATCH] 123

---
 src/components/AddData.vue |   6 +-
 src/components/Details.vue |  79 +++++----
 src/components/Header.vue  |   2 +-
 src/components/PzSet.vue   | 337 ++++++++++++++++++-------------------
 src/css/index.scss         |  61 ++++++-
 src/views/Home.vue         |  42 ++---
 src/views/Level.vue        |  24 +--
 src/views/Page.vue         |  30 +++-
 8 files changed, 334 insertions(+), 247 deletions(-)

diff --git a/src/components/AddData.vue b/src/components/AddData.vue
index 87aed7d..ab34d44 100644
--- a/src/components/AddData.vue
+++ b/src/components/AddData.vue
@@ -15,8 +15,9 @@
       <el-form-item label="通讯名称:" prop="name">
         <el-input
           v-model="addForm.name"
-          placeholder="请输入驱动名称"
+          placeholder="请输入（不超过10）"
           clearable
+          maxlength="10"
           :disabled="type == '1'"
         />
       </el-form-item>
@@ -35,8 +36,9 @@
       <el-form-item label="驱动描述:" prop="description">
         <el-input
           v-model="addForm.description"
-          placeholder="请输入描述"
+          placeholder="请输入描述（不超过50）"
           clearable
+          maxlength="50"
         ></el-input>
       </el-form-item>
       <!-- 驱动1 -->
diff --git a/src/components/Details.vue b/src/components/Details.vue
index 008e826..f58d841 100644
--- a/src/components/Details.vue
+++ b/src/components/Details.vue
@@ -1,39 +1,50 @@
 <template>
-  <el-drawer v-model="visible" title= "详情" direction="rtl" :before-close="closeDialog">
-    <el-form label-width="130px">
-      <el-form-item label="驱动名称:">
-         {{ name  }}
-      </el-form-item>
-      <el-form-item label="健康状态">
-        <el-input disabled v-model="health[healthObj.status]"></el-input>
-      </el-form-item>
-      <el-form-item label="最后一次成功时间">
-        <el-input disabled v-model="healthObj.last_success_time"></el-input>
-      </el-form-item>
-      <el-form-item label="最后一次失败时间">
-        <el-input disabled v-model="healthObj.last_failure_ctime"></el-input>
-      </el-form-item>
-      <el-form-item label="最后一次失败原因">
-        <el-input disabled v-model="healthObj.last_failure_cause"></el-input>
-      </el-form-item>
-    </el-form>
-
-    <el-form label-width="130px">
-      <el-form-item label="总计数">
-        <el-input disabled v-model="countObj.total_count"></el-input>
-      </el-form-item>
-      <el-form-item label="失败计数">
-        <el-input disabled v-model="countObj.failure_count"></el-input>
-      </el-form-item>
-      <el-form-item label="成功计数">
-        <el-input disabled v-model="countObj.success_count"></el-input>
-      </el-form-item>
-    </el-form>
-    <div class="btns">
-      <el-button type="primary" @click="resetCount">重置计数</el-button>
-      <el-button @click="closeDialog">取消</el-button>
-    </div>
+  <el-drawer v-model="visible" title= "驱动详情" direction="rtl" :before-close="closeDialog">
     
+      <fieldset class="box2">
+        <legend class="box-ht">驱动名称</legend>
+        <el-form label-width="130px">
+          <el-form-item>
+            {{ name  }}
+          </el-form-item>
+        </el-form>
+      </fieldset>
+
+      <fieldset class="box2">
+          <legend class="box-ht">通讯状态</legend>
+          <el-form label-width="130px">
+            <el-form-item label="健康状态">
+              <el-input disabled v-model="health[healthObj.status]"></el-input>
+            </el-form-item>
+            <el-form-item label="最后一次成功时间">
+              <el-input disabled v-model="healthObj.last_success_time"></el-input>
+            </el-form-item>
+            <el-form-item label="最后一次失败时间">
+              <el-input disabled v-model="healthObj.last_failure_ctime"></el-input>
+            </el-form-item>
+            <el-form-item label="最后一次失败原因">
+              <el-input disabled v-model="healthObj.last_failure_cause"></el-input>
+            </el-form-item>
+          </el-form>
+      </fieldset>
+      <fieldset class="box2">
+        <legend class="box-ht">通讯计数</legend>
+        <el-form label-width="130px">
+          <el-form-item label="总计数">
+            <el-input disabled v-model="countObj.total_count"></el-input>
+          </el-form-item>
+          <el-form-item label="失败计数">
+            <el-input disabled v-model="countObj.failure_count"></el-input>
+          </el-form-item>
+          <el-form-item label="成功计数">
+            <el-input disabled v-model="countObj.success_count"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="btns">
+          <el-button type="primary" @click="resetCount">重置计数</el-button>
+          <!-- <el-button @click="closeDialog">取消</el-button> -->
+        </div>
+      </fieldset>
   </el-drawer>
 </template>
 <script>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 53d0eeb..48134d6 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="background: rgb(2, 87, 2);color:#fff;">
     <div class="header">
       <div class="left">
         <i v-if="hasBack" class="el-icon-back" @click="back"></i>
diff --git a/src/components/PzSet.vue b/src/components/PzSet.vue
index e1efa94..b3b6623 100644
--- a/src/components/PzSet.vue
+++ b/src/components/PzSet.vue
@@ -1,114 +1,105 @@
 <template>
-  <el-drawer v-model="visible" :title= "pztype + '类型 配置管理'" direction="rtl" :before-close="closeDialog">
+  <el-drawer v-model="visible" title="驱动配置" direction="rtl" :before-close="closeDialog">
+    <fieldset class="box2">
+      <legend class="box-ht">驱动名称</legend>
+      <el-form label-width="130px">
+        <el-form-item>
+          {{ props.formData.name  }}
+        </el-form-item>
+      </el-form>
+    </fieldset>
     <!-- 1 modbus_tcp -->
     <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef" v-if="pztypecode === 1">
-      <el-form-item label="轮询时间" prop="polling_time">
-        <el-input-number v-model="form.polling_time"  :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
-      </el-form-item>
-      <el-form-item label="失败重试时间" prop="faile_retry_time">
-        <el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
-      </el-form-item>
-      <el-form-item label="主机地址" prop="host">
-        <el-input v-model="form.host" clearable/>
-      </el-form-item>
-      <el-form-item label="端口号" prop="port">
-        <el-input-number v-model="form.port" :min="1" clearable />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">保存</el-button>
-        <el-button @click="closeDialog">取消</el-button>
-      </el-form-item>
+      <fieldset class="box2">
+        <legend class="box-ht">通用配置</legend>
+        <el-form-item label="轮询时间" prop="polling_time">
+          <el-input-number v-model="form.polling_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
+        </el-form-item>
+        <el-form-item label="失败重试时间" prop="faile_retry_time">
+          <el-input-number v-model="form.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
+        </el-form-item>
+      </fieldset>
+      <fieldset class="box2">
+        <legend class="box-ht">专属配置</legend>
+        <el-form-item label="主机地址" prop="host">
+          <el-input v-model="form.host" clearable />
+        </el-form-item>
+        <el-form-item label="端口号" prop="port">
+          <el-input-number v-model="form.port" :min="1" clearable />
+        </el-form-item>
+      </fieldset>
     </el-form>
     <!-- 2: 'modbus_rtu'  -->
     <el-form :model="form2" label-width="120px" :rules="rules2" ref="ruleFormRef2" v-if="pztypecode === 2">
-      <el-form-item label="轮询时间" prop="polling_time">
-        <el-input-number v-model="form2.polling_time"  :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
-      </el-form-item>
-      <el-form-item label="失败重试时间" prop="faile_retry_time">
-        <el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
-      </el-form-item>
-      <el-form-item label="COM" prop="com_name">
-      <el-select v-model="form2.com_name" clearable>
-        <el-option
-          v-for="item in comArr"
-          :label="item.name"
-          :value="item.name" 
-          :key="item.name"
-          ></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="数据位" prop="dataBits" clearable>
-      <el-select v-model="form2.dataBits">
-        <el-option  
-          v-for="item in dataBitsArr"
-          :label="item.name"
-          :value="item.value" 
-          :key="item.value"
-          clearable
-          ></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="波特率" prop="baudRate" clearable>
-      <el-select v-model="form2.baudRate">
-        <el-option  
-          v-for="item in baudRateArr"
-          :label="item.name"
-          :value="item.value" 
-          :key="item.value"
-          clearable
-          ></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="停止位" prop="stopBits" clearable>
-      <el-select v-model="form2.stopBits">
-        <el-option  
-          v-for="item in stopBitsArr"
-          :label="item.name"
-          :value="item.value" 
-          :key="item.value"
-          clearable
-          ></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="校验类型" prop="parity" clearable>
-      <el-select v-model="form2.parity">
-        <el-option  
-          v-for="item in parityArr"
-          :label="item.name"
-          :value="item.value" 
-          :key="item.value"
-          clearable
-          ></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="onSubmit">保存</el-button>
-      <el-button @click="closeDialog">取消</el-button>
-    </el-form-item>
-  </el-form>
+      <fieldset class="box2">
+        <legend class="box-ht">通用配置</legend>
+        <el-form-item label="轮询时间" prop="polling_time">
+          <el-input-number v-model="form2.polling_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
+        </el-form-item>
+        <el-form-item label="失败重试时间" prop="faile_retry_time">
+          <el-input-number v-model="form2.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable /><span>秒</span>
+        </el-form-item>
+      </fieldset>
+      <fieldset class="box2">
+        <legend class="box-ht">专属配置</legend>
+        <el-form-item label="COM" prop="com_name">
+          <el-select v-model="form2.com_name" clearable>
+            <el-option v-for="item in comArr" :label="item.name" :value="item.name" :key="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据位" prop="dataBits" clearable>
+          <el-select v-model="form2.dataBits">
+            <el-option v-for="item in dataBitsArr" :label="item.name" :value="item.value" :key="item.value"
+              clearable></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="波特率" prop="baudRate" clearable>
+          <el-select v-model="form2.baudRate">
+            <el-option v-for="item in baudRateArr" :label="item.name" :value="item.value" :key="item.value"
+              clearable></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="停止位" prop="stopBits" clearable>
+          <el-select v-model="form2.stopBits">
+            <el-option v-for="item in stopBitsArr" :label="item.name" :value="item.value" :key="item.value"
+              clearable></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="校验类型" prop="parity" clearable>
+          <el-select v-model="form2.parity">
+            <el-option v-for="item in parityArr" :label="item.name" :value="item.value" :key="item.value"
+              clearable></el-option>
+          </el-select>
+        </el-form-item>
+      </fieldset>
+    </el-form>
     <!-- 3: 'plc_s7' -->
     <!-- <el-form :model="form3" label-width="120px" :rules="rules3" ref="ruleFormRef3" v-if="pztypecode === 3">
-      <el-form-item label="轮询时间" prop="polling_time">
-        <el-input-number v-model="form3.polling_time"  :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
-      </el-form-item>
-      <el-form-item label="失败重试时间" prop="faile_retry_time">
-        <el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
-      </el-form-item>
-      <el-form-item label="主机地址" prop="host">
-        <el-input v-model="form3.host" clearable/>
-      </el-form-item>
-      <el-form-item label="机架号" prop="rack">
-        <el-input-number v-model="form3.rack" :min="1" :max="20" clearable />
-      </el-form-item>
-      <el-form-item label="插槽号" prop="slot">
-        <el-input-number v-model="form3.slot" :min="1" :max="20" clearable />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">保存</el-button>
-        <el-button @click="closeDialog">取消</el-button>
-      </el-form-item>
+      <fieldset class="box2">
+        <legend class="box-ht">通用配置</legend>
+        <el-form-item label="轮询时间" prop="polling_time">
+          <el-input-number v-model="form3.polling_time"  :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
+        </el-form-item>
+        <el-form-item label="失败重试时间" prop="faile_retry_time">
+          <el-input-number v-model="form3.faile_retry_time" :min="1" placeholder="(单位:秒)" clearable/><span>秒</span>
+        </el-form-item>
+      </fieldset>
+      <fieldset class="box2">
+        <legend class="box-ht">专属配置</legend>
+        <el-form-item label="主机地址" prop="host">
+          <el-input v-model="form3.host" clearable/>
+        </el-form-item>
+        <el-form-item label="机架号" prop="rack">
+          <el-input-number v-model="form3.rack" :min="1" :max="20" clearable />
+        </el-form-item>
+        <el-form-item label="插槽号" prop="slot">
+          <el-input-number v-model="form3.slot" :min="1" :max="20" clearable />
+        </el-form-item>
+      </fieldset>
     </el-form> -->
-
+    <div class="btns">
+      <el-button type="primary" @click="onSubmit">保存</el-button>
+    </div>
 
   </el-drawer>
 </template>
@@ -121,7 +112,7 @@ export default {
   emits: ["dialogClose", "dialogSuccess"],
   setup(props, ctx) {
     const ruleFormRef = ref(null);
-    const ruleFormRef2= ref(null);
+    const ruleFormRef2 = ref(null);
     const ruleFormRef3 = ref(null);
     const state = reactive({
       form: {
@@ -132,7 +123,7 @@ export default {
         id: 1,
       },
       form2: {
-        polling_time: "", 
+        polling_time: "",
         faile_retry_time: "",
         com_name: '',
         dataBits: 5,
@@ -153,59 +144,59 @@ export default {
       baudRateArr: [{
         name: 2400,
         value: 2400
-      },{
+      }, {
         name: 4800,
-        value: 4800 
+        value: 4800
       },
       {
-        name:9600,
+        name: 9600,
         value: 9600
       },
       {
-        name:19200,
+        name: 19200,
         value: 19200
       },
       {
-        name:38400,
+        name: 38400,
         value: 38400
       },
       {
-        name:76800,
+        name: 76800,
         value: 76800
       },
       {
-        name:115200,
+        name: 115200,
         value: 115200
       }],
-      dataBitsArr:[{
+      dataBitsArr: [{
         name: 5,
         value: 5
-      },{
+      }, {
         name: 6,
-        value: 6 
+        value: 6
       },
       {
-        name:7,
+        name: 7,
         value: 7
       },
       {
-        name:8,
+        name: 8,
         value: 8
       }],
       stopBitsArr: [{
         name: 1,
         value: 1
-      },{
+      }, {
         name: 2,
-        value: 2 
+        value: 2
       }],
       parityArr: [{
         name: "N",
         value: "N"
-      },{
+      }, {
         name: "E",
         value: "E",
-      },{
+      }, {
         name: "O",
         value: "O",
       }],
@@ -213,14 +204,17 @@ export default {
       rules: {
         polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
         faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
-        host: [{ required: true, validator: (rule, value, callback) => {
-        // 只能输入英文字母
-        var reg =  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
-        if (value && reg.test(value) ) {
-        callback();
-        } else {
-        callback(new Error("请输入正确的ip地址"));
-        }}, trigger: 'blur' }],
+        host: [{
+          required: true, validator: (rule, value, callback) => {
+            // 只能输入英文字母
+            var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+            if (value && reg.test(value)) {
+              callback();
+            } else {
+              callback(new Error("请输入正确的ip地址"));
+            }
+          }, trigger: 'blur'
+        }],
         port: [{ required: true, message: "请输入端口号", trigger: "blur" }]
       },
       rules2: {
@@ -235,43 +229,45 @@ export default {
       rules3: {
         polling_time: [{ required: true, message: "请输入轮询时间", trigger: "blur" }],
         faile_retry_time: [{ required: true, message: "请输入失败重试时间", trigger: "blur" }],
-        host: [{ required: true, validator: (rule, value, callback) => {
-            // 只能输入英文字母
-            var reg =  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
-            if (value && reg.test(value) ) {
-              callback();
-            } else {
-              callback(new Error("请输入正确的ip地址"));
-            }}, trigger: 'blur' }],
+        host: [{
+          required: true, validator: (rule, value, callback) => {
+            // 只能输入英文字母
+            var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+            if (value && reg.test(value)) {
+              callback();
+            } else {
+              callback(new Error("请输入正确的ip地址"));
+            }
+          }, trigger: 'blur'
+        }],
         rack: [{ required: true, message: "请输入机架号", trigger: "blur" }],
         slot: [{ required: true, message: "请输入插槽号", trigger: "blur" }]
       },
     });
     const onSubmit = async () => {
-      (555, props.formData.name);
       var header = {
         driver_name: props.formData.name
       }
       if (props.pztypecode === 1) {
         await ruleFormRef.value.validate(async (valid) => {
-        if (valid) {
-          var param = {
-            polling_time:Number(state.form.polling_time),
-            faile_retry_time: Number(state.form.faile_retry_time),
-            host: state.form.host,
-            port: Number(state.form.port),
-            id: Number(state.form.id)
-          }
-          const res = await infoApi.addPz(param, header);
-          if (res.code == 0) {
-            ElMessage.success(res.message || "请求成功");
-            ctx.emit("dialogClose");
+          if (valid) {
+            var param = {
+              polling_time: Number(state.form.polling_time),
+              faile_retry_time: Number(state.form.faile_retry_time),
+              host: state.form.host,
+              port: Number(state.form.port),
+              id: Number(state.form.id)
+            }
+            const res = await infoApi.addPz(param, header);
+            if (res.code == 0) {
+              ElMessage.success(res.message || "请求成功");
+              ctx.emit("dialogClose");
+            } else {
+              ElMessage.error(res.message);
+            }
           } else {
-            ElMessage.error(res.message);
           }
-        } else {
-        }
-      });
+        });
       } else if (props.pztypecode === 2) {
         await ruleFormRef2.value.validate(async (valid) => {
           if (valid) {
@@ -285,18 +281,18 @@ export default {
             //     parity: state.form2.parity,
             //     id: Number(state.form2.id)
             //   }
-              var param = {
-                    name: props.formData.name,
-                    polling_time: Number(state.form2.polling_time),
-                    faile_retry_time: Number(state.form2.faile_retry_time),
-                    com: {
-                        name: state.form2.com_name,
-                        dataBits: Number(state.form2.dataBits),
-                        baudRate: Number(state.form2.baudRate),
-                        stopBits: Number(state.form2.stopBits),
-                        parity: state.form2.parity
-                    }
-                }
+            var param = {
+              name: props.formData.name,
+              polling_time: Number(state.form2.polling_time),
+              faile_retry_time: Number(state.form2.faile_retry_time),
+              com: {
+                name: state.form2.com_name,
+                dataBits: Number(state.form2.dataBits),
+                baudRate: Number(state.form2.baudRate),
+                stopBits: Number(state.form2.stopBits),
+                parity: state.form2.parity
+              }
+            }
             const res = await infoApi.addPz(param, header);
             if (res.code == 0) {
               ElMessage.success(res.message || "请求成功");
@@ -311,7 +307,7 @@ export default {
         await ruleFormRef3.value.validate(async (valid) => {
           if (valid) {
             var param = {
-              polling_time:Number(state.form3.polling_time),
+              polling_time: Number(state.form3.polling_time),
               faile_retry_time: Number(state.form3.faile_retry_time),
               host: state.form3.host,
               rack: Number(state.form3.rack),
@@ -329,7 +325,7 @@ export default {
           }
         });
       }
-      
+
     }
     const visible = computed(() => {
       return props.dialogVisible;
@@ -340,11 +336,11 @@ export default {
     });
     const getCom = async () => {
       const parm = {
-          name: props.formData.name
+        name: props.formData.name
       }
       const res = await infoApi.getCom(parm);
       if (res.code == 0) {
-        state.comArr = res.data.sort((a,b) => {
+        state.comArr = res.data.sort((a, b) => {
           return (a.name > b.name ? 1 : -1)
         });
         state.form2.com_name = state.comArr[0].name;
@@ -362,7 +358,7 @@ export default {
       visible,
       closeDialog,
       importData,
-      exportData, 
+      exportData,
       onSubmit,
       ruleFormRef,
       ruleFormRef2,
@@ -376,6 +372,7 @@ export default {
 ::v-deep .el-form-item__content {
   display: flex;
   flex-wrap: nowrap;
+
   >span {
     margin-left: 10px;
   }
diff --git a/src/css/index.scss b/src/css/index.scss
index f55f4f5..cb1fe9f 100644
--- a/src/css/index.scss
+++ b/src/css/index.scss
@@ -44,6 +44,7 @@ s {
 }
 .el-button--primary {
   border: 0 !important;
+  background: #00AAA3 !important;
 }
 .mb {
   margin-bottom: 10px;
@@ -139,7 +140,7 @@ s {
 }
 .turn {
   background: rgba(15, 179, 251, 0.2);
-  color: #00ffff !important;
+  color: rgb(2, 87, 2) !important;
   animation: turn 1s linear infinite;
 }
 @keyframes turn {
@@ -218,12 +219,12 @@ s {
 ::-webkit-scrollbar-thumb {
   /*滚动条里面小方块*/
   border-radius: 5px;
-  -webkit-box-shadow: inset 0 0 5px #00ffff;
+  -webkit-box-shadow: inset 0 0 5px #2B5451;
   background: rgba(0, 0, 0, 0.2);
 }
 ::-webkit-scrollbar-track {
   /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 0  20px #2B5451;
   border-radius: 0;
   background: rgba(0, 0, 0, 0.1);
 }
@@ -239,4 +240,58 @@ s {
 .btns {
   width: 100%;
   text-align: center;
+}
+.green {
+  background: #2b545158 !important;
+  color: #000000;
+}
+.red {
+  background: rgba(243, 94, 94, 0.774) !important;
+  color: #000000;
+}
+.el-table tr {
+  &:hover > td {
+    // 悬停颜色 上面的不用管
+    background-color: #2b54515b !important;
+    color: #000000;
+  }
+}
+.el-table th, .aside {
+  background: #2B5451 !important;
+  color: #fff;
+}
+.el-menu-item:hover {
+  background: #2B5451 !important;
+  color: #fff;
+}
+.el-sub-menu.is-active, .el-menu-item.is-active {
+  background: #2B5451 !important;
+}
+
+.el-sub-menu__title, .el-menu  {
+  background: transparent !important;
+}
+.el-menu-item.is-active {
+  color: #07d6c4;
+}
+ 
+.el-form-item--large {
+  margin-bottom: 0px !important;
+}
+.el-form-item {
+  margin-top: 20px !important;
+}
+.box2 {
+  border: 1px solid #2B5451; 
+}
+
+.box2 .box-ht {
+  margin: 0 24px;
+  padding: 0 16px;
+  font-size: 18px;
+  font-weight: bold;
+  background: -webkit-gradient(linear, left top, left bottom, from(#a7fcff), to(#08ced0));
+  background: linear-gradient(180deg, #a7fcff, #08ced0);
+  -webkit-background-clip: text;
+  color: transparent;
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e691c3c..259ac23 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -8,8 +8,8 @@
 
       </div>
       <div class="top-div">
-        <div class="left-div">
-          <h3>设备信息</h3>
+        <fieldset class="left-div  box2">
+          <legend class="box-ht">设备信息</legend>
           <div>
             <span class="name">型号</span>
             <span class="value">{{ deviceData.basicinfo.model }}</span>
@@ -26,23 +26,24 @@
             <span class="name">运行时长</span>
             <span class="value">{{ deviceData.hostinfo.uptime }}</span>
           </div>
-        </div>
-        <div class="right-div">
-          <h3>内存信息</h3>
+        </fieldset>
+        <fieldset class="right-div box2">
+            <legend class="box-ht">内存信息</legend>
           <div id="echartDiv" class="echartDiv"></div>
-        </div>
+        </fieldset>
       </div>
       <div class="bottom-div">
-        <div class="left-div">
-          <h3>磁盘信息</h3>
+          <fieldset class="left-div box2">
+            <legend class="box-ht">磁盘信息</legend>
           <div class="process-div">
             <div v-for="(item, index) in deviceData.diskinfo" :key="index">
               <div :id="'echartDiv' + index" class="echartDiv"></div>
             </div>
           </div>
-        </div>
-        <div class="right-div">
-          <h3>网卡信息</h3>
+        </fieldset>
+ 
+          <fieldset class="right-div box2">
+            <legend class="box-ht">网卡信息</legend>
           <div v-for="(item, index) of deviceData.netinfo" :key="index">
             <p>网卡{{ item.name }}的使用情况</p>
             <div class="data">
@@ -62,7 +63,7 @@
               </span>
             </div>
           </div>
-        </div>
+        </fieldset>
       </div>
     </div>
   </el-card>
@@ -191,8 +192,8 @@ export default {
 .time-div {
   height: 8%;
   width: 100%;
-  border-radius: 20px;
-  border: 1px solid #c3c3c3;
+  border-radius: 10px;
+  border: 1px solid #006b3b;
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -216,15 +217,15 @@ export default {
 .left-div {
   height: 100%;
   width: 65%;
-  border: 1px solid #c3c3c3;
-  border-radius: 20px;
+  border: 1px solid #006b3b;
+  border-radius: 10px;
   flex-direction: column;
   justify-content: space-around;
   display: flex;
   padding: 20px;
   > div {
-    height: 50px;
-    line-height: 50px;
+    height: 40px;
+    line-height: 40px;
     display: flex;
     justify-content: space-between;
     text-align: center;
@@ -255,10 +256,10 @@ export default {
 .right-div {
   height: 100%;
   width: 34%;
-  border: 1px solid #c3c3c3;
+  border: 1px solid #006b3b;
   flex-direction: column;
   justify-content: space-around;
-  border-radius: 20px;
+  border-radius: 10px;
   display: flex;
   padding: 25px;
   > div {
@@ -309,4 +310,5 @@ export default {
   height: 100% !important;
   margin: 0 auto;
 }
+
 </style>
diff --git a/src/views/Level.vue b/src/views/Level.vue
index 4cbd5c0..c17e80e 100644
--- a/src/views/Level.vue
+++ b/src/views/Level.vue
@@ -93,7 +93,7 @@
           </div>
         </div>
       </el-form>
-      <el-button @click="saveData" type="primary">保存</el-button>
+      <el-button @click="saveData" size="large" type="primary">保存</el-button>
     </div>
   </el-card>
 </template>
@@ -221,23 +221,25 @@ export default {
   justify-content: flex-start;
   align-items: center;
   overflow: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
   > div {
-    border: 1px solid #ddd;
+    border: 1px solid #006b3b;
     border-radius: 8px;
-    width: 50%;
+    width: 48%;
     margin-bottom: 10px;
     p {
       text-align: center;
       margin: 10px 0;
     }
     .info-div {
-      width: 80%;
-      height: 90%;
-      overflow: auto;
+      width: 98%;
+      height: 70%;
       margin: 0 auto;
       > div {
-        line-height: 60px;
-        height: 60px;
+        line-height: 50px;
+        height: 50px;
       }
     }
   }
@@ -245,10 +247,12 @@ export default {
     height: 60%;
   }
   .moreipDiv {
-    height: 35%;
+    height: 48%;
+    overflow: auto;
   }
   .dnsDiv {
-    height: 25%;
+    height: 45%;
+    overflow: auto;
   }
 }
 .el-button {
diff --git a/src/views/Page.vue b/src/views/Page.vue
index 81d01ab..e6ce0a2 100644
--- a/src/views/Page.vue
+++ b/src/views/Page.vue
@@ -4,7 +4,7 @@
       <div class="top-div">
         <el-button type="primary" @click="addData">新增</el-button>
       </div>
-      <el-table :data="tableData" height="760" border stripe
+      <el-table :data="tableData" height="760" border :row-class-name="tableRowClassName"
         :header-cell-style="{ background: '#F6F7FC' }">
         <el-table-column type="index" label="序号" width="80" align="center" />
         <el-table-column prop="name" label="通讯名称" width="200" align="center" show-overflow-tooltip />
@@ -14,14 +14,15 @@
             <span>{{ qudongOptions[scope.row.type] }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="status" label="通讯状态" width="200" align="center">
+        <el-table-column prop="status" label="驱动状态" width="200" align="center">
           <template #default="scope">
-            <span :style="{'color': getTextColor(scope.row.status)}"> {{ txStatus[scope.row.status] }}  </span>
+            <!-- <span :style="{'color': getTextColor(scope.row.status)}"> {{ txStatus[scope.row.status] }}  </span> -->
+            <span> {{ txStatus[scope.row.status] }}  </span>
           </template>
         </el-table-column>
-        <el-table-column prop="enable" label="启用状态" width="350" align="center">
+        <el-table-column prop="enable" label="启停控制" width="350" align="center">
           <template #default="scope">
-            现在是 <el-tag :class="!scope.row.enable? 'stop':'start'">{{!scope.row.enable? '停用状态' : '启用状态'}} </el-tag> 您可以点击
+            <!-- 现在是 <el-tag :class="!scope.row.enable? 'stop':'start'">{{!scope.row.enable? '停用状态' : '启用状态'}} </el-tag> 您可以点击 -->
             <el-button type="primary" size="mini" @click="changeStatus(scope.row)" v-if="!scope.row.enable">
               启用
             </el-button>
@@ -278,6 +279,19 @@ export default {
         return 'red'
       }
     }
+    const tableRowClassName = ({ row, rowIndex }) => {
+      if(row.status == 1) {
+        return 'green'
+      }
+      if(row.status == 2) {
+        return 'green'
+      }
+      if(row.status == 3) {
+        return 'red'
+      }
+ 
+    }
+
     return {
       ...toRefs(state),
       addData,
@@ -296,7 +310,8 @@ export default {
       openPz,
       openDetails,
       viewData,
-      getTextColor
+      getTextColor,
+      tableRowClassName
     };
   },
 };
@@ -309,7 +324,7 @@ export default {
 
 .top-div {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
 }
 
 .txStatusDiv {
@@ -323,4 +338,5 @@ export default {
 .start {
   color: #009fa4;
 }
+
 </style>