刘龙龙

package-lock.json

@@ -13,6 +13,7 @@
         "element-ui": "^2.15.14",
         "less": "^4.2.0",
         "less-loader": "^11.1.3",
+        "moment": "^2.29.4",
         "postcss-pxtorem": "^6.0.0",
         "prismjs": "^1.29.0",
         "sass-loader": "^13.3.2",
@@ -7626,6 +7627,14 @@
       "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
       "dev": true
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
@@ -17241,6 +17250,11 @@
       "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
       "dev": true
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "element-ui": "^2.15.14",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
+    "moment": "^2.29.4",
     "postcss-pxtorem": "^6.0.0",
     "prismjs": "^1.29.0",
     "sass-loader": "^13.3.2",

src/components/DataView.vue

@@ -2,7 +2,12 @@
 <template>
   <div>
     <!-- <div> <el-button type="info" plain @click="dialogFormVisible = true">IP设置</el-button></div> -->
-        <el-dialog title="IP设置" :visible.sync="dialogFormVisible" :append-to-body="true" width="894px">
+    <el-dialog
+      title="IP设置"
+      :visible.sync="dialogFormVisible"
+      :append-to-body="true"
+      width="894px"
+    >
       <div class="form_content">
         <div>
           <p class="netWay">网络方式</p>
@@ -12,26 +17,41 @@
         </div>
         <div v-if="ippz_lwfs == 1 ? true : false">
           <h2>有线</h2>
-                    <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wirle" ref="reform">
+          <el-form
+            :label-position="labelPosition"
+            label-width="80px"
+            :rules="rules_ippz_wirle"
+            ref="reform"
+          >
             <div class="wired">
               <el-row>
                 <el-col :span="12">
-                                    <el-form-item label="网口:" :label-width="formLabelWidth" prop="ippz_wangkou">
+                  <el-form-item
-                                        <el-select v-model="ippz_wangkou" placeholder="ETHO"
+                    label="网口:"
-                                            style="width: 200px;height:30px">
+                    :label-width="formLabelWidth"
+                    prop="ippz_wangkou"
+                  >
+                    <el-select
+                      v-model="ippz_wangkou"
+                      placeholder="ETHO"
+                      style="width: 200px; height: 30px"
+                    >
                       <el-option label="ETH0" value="ETH0"></el-option>
                       <el-option label="ETH1" value="ETH1"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                                    <el-form-item label="默认网关:" :label-width="formLabelWidth" prop="ippz_mrwg">
+                  <el-form-item
+                    label="默认网关:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_mrwg"
+                  >
                     <el-row>
                       <el-col :span="5">
                         <el-input v-model="ippz_mrwg1"></el-input>
                       </el-col>
-                                            <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                            </el-col>
                       <el-col :span="5">
                         <el-input v-model="ippz_mrwg2"></el-input>
                       </el-col>
@@ -49,7 +69,11 @@
               </el-row>
               <el-row>
                 <el-col :span="12">
-                                    <el-form-item label="子网掩码:" :label-width="formLabelWidth" prop="ippz_zwym">
+                  <el-form-item
+                    label="子网掩码:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_zwym"
+                  >
                     <el-row>
                       <el-col :span="5">
                         <el-input v-model="ippz_zwym1"></el-input>
@@ -70,13 +94,16 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                                    <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="ippz_ip">
+                  <el-form-item
+                    label="IP地址:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_ip"
+                  >
                     <el-row>
                       <el-col :span="5">
                         <el-input v-model="ippz_ip1"></el-input>
                       </el-col>
-                                            <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                            </el-col>
                       <el-col :span="5">
                         <el-input v-model="ippz_ip2"></el-input>
                       </el-col>
@@ -94,7 +121,11 @@
               </el-row>
               <el-row>
                 <el-col :span="12">
-                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                  <el-form-item
+                    label="首选DNS:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_dns_sx"
+                  >
                     <el-row>
                       <el-col :span="5">
                         <el-input v-model="ippz_dns_sx1"></el-input>
@@ -115,13 +146,16 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                  <el-form-item
+                    label="备选DNS:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_dns_by"
+                  >
                     <el-row>
                       <el-col :span="5">
                         <el-input v-model="ippz_dns_by1"></el-input>
                       </el-col>
-                                            <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                            </el-col>
                       <el-col :span="5">
                         <el-input v-model="ippz_dns_by2"></el-input>
                       </el-col>
@@ -139,12 +173,18 @@
               </el-row>
               <el-row>
                 <el-col :span="24">
-                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                  <el-form-item
+                    label="MAC地址:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_mac"
+                  >
                     <el-row>
                       <el-col :span="24" class="mac">
-                                                <el-input style="width: 200px;height:30px"
+                        <el-input
-                                                    v-model="ippz_mac"></el-input><el-button
+                          style="width: 200px; height: 30px"
-                                                    v-copy="ippz_mac">复制</el-button>
+                          v-model="ippz_mac"
+                        ></el-input
+                        ><el-button v-copy="ippz_mac">复制</el-button>
                       </el-col>
                     </el-row>
                   </el-form-item>
@@ -156,18 +196,37 @@
 
         <div v-if="ippz_lwfs == 2 ? true : false">
           <h2>WIFI</h2>
-                    <el-form :label-position="labelPosition" label-width="80px" :rules="rules_ippz_wifi" ref="reform">
+          <el-form
+            :label-position="labelPosition"
+            label-width="80px"
+            :rules="rules_ippz_wifi"
+            ref="reform"
+          >
             <div class="wifi">
               <el-row>
                 <el-col :span="12">
-                                    <el-form-item label="SSID:" :label-width="formLabelWidth" prop="ippz_wifi_ssid">
+                  <el-form-item
-                                        <el-input v-model="ippz_wifi_ssid" placeholder="请输入SSID"></el-input>
+                    label="SSID:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_wifi_ssid"
+                  >
+                    <el-input
+                      v-model="ippz_wifi_ssid"
+                      placeholder="请输入SSID"
+                    ></el-input>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                                    <el-form-item label="密码:" :label-width="formLabelWidth" prop="ippz_wifi_mm">
+                  <el-form-item
-                                        <el-input v-model="ippz_wifi_mm" placeholder=""
+                    label="密码:"
-                                            style="width: 200px;height:30px"></el-input>
+                    :label-width="formLabelWidth"
+                    prop="ippz_wifi_mm"
+                  >
+                    <el-input
+                      v-model="ippz_wifi_mm"
+                      placeholder=""
+                      style="width: 200px; height: 30px"
+                    ></el-input>
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -178,8 +237,7 @@
                       <el-col :span="5">
                         <el-input v-model.number="ippz_ip1" disabled></el-input>
                       </el-col>
-                                            <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                            </el-col>
                       <el-col :span="5">
                         <el-input v-model.number="ippz_ip2" disabled></el-input>
                       </el-col>
@@ -223,8 +281,7 @@
                       <el-col :span="5">
                         <el-input v-model="ippz_mrwg1" disabled></el-input>
                       </el-col>
-                                            <el-col :span="1">.
+                      <el-col :span="1">. </el-col>
-                                            </el-col>
                       <el-col :span="5">
                         <el-input v-model="ippz_mrwg1" disabled></el-input>
                       </el-col>
@@ -240,7 +297,11 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                                    <el-form-item label="首选DNS:" :label-width="formLabelWidth" prop="ippz_dns_sx">
+                  <el-form-item
+                    label="首选DNS:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_dns_sx"
+                  >
                     <el-row>
                       <el-col :span="5">
                         <el-input v-model="ippz_dns_sx1"></el-input>
@@ -263,7 +324,11 @@
               </el-row>
               <el-row>
                 <el-col :span="12">
-                                    <el-form-item label="备选DNS:" :label-width="formLabelWidth" prop="ippz_dns_by">
+                  <el-form-item
+                    label="备选DNS:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_dns_by"
+                  >
                     <el-row>
                       <el-col :span="5">
                         <el-input v-model="ippz_dns_by1"></el-input>
@@ -284,11 +349,17 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                                    <el-form-item label="MAC地址:" :label-width="formLabelWidth" prop="ippz_mac">
+                  <el-form-item
+                    label="MAC地址:"
+                    :label-width="formLabelWidth"
+                    prop="ippz_mac"
+                  >
                     <el-row>
                       <el-col :span="24" class="mac">
-                                                <el-input style="width: 200px" v-model="ippz_mac" /><el-button
+                        <el-input
-                                                    v-copy="ippz_mac">复制</el-button>
+                          style="width: 200px"
+                          v-model="ippz_mac"
+                        /><el-button v-copy="ippz_mac">复制</el-button>
                       </el-col>
                     </el-row>
                   </el-form-item>
@@ -300,7 +371,6 @@
         <div slot="footer" class="dialog-footer footer">
           <el-button type="primary" @click="saveAll">保 存</el-button>
           <el-button @click="dialogFormVisible = false">取 消</el-button>
-
         </div>
       </div>
     </el-dialog>
@@ -310,7 +380,7 @@
 <script>
 import copy from "../util/v-copy";
 export default {
-    name: 'DataView',
+  name: "DataView",
   data() {
     return {
       formdata: {
@@ -355,49 +425,47 @@ export default {
       ippz_wifi_mm: "",
       ippz_lwfs: "1",
       dialogFormVisible: true,
-            formLabelWidth: '100px',
+      formLabelWidth: "100px",
       // 有线的规则校验
       rules_ippz_wirle: {
         ippz_wangkou: [
-                    { required: true, message: '请输入网口', trigger: 'change' },
+          { required: true, message: "请输入网口", trigger: "change" },
         ],
         ippz_zwym: [
-                    { required: true, message: '请输入子网掩码', trigger: 'blur' },
+          { required: true, message: "请输入子网掩码", trigger: "blur" },
-                ],
-                ippz_ip: [
-                    { required: true, message: '请输入IP地址', trigger: 'blur' },
         ],
+        ippz_ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
         ippz_mrwg: [
-                    { required: true, message: '请输入默认网关', trigger: 'blur' },
+          { required: true, message: "请输入默认网关", trigger: "blur" },
         ],
         ippz_dns_sx: [
-                    { required: true, message: '请输入首选DNS', trigger: 'blur' },
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
         ],
         ippz_dns_by: [
-                    { required: true, message: '请输入备选DNS', trigger: 'blur' },
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
         ],
         ippz_mac: [
-                    { required: true, message: '请输入备选DNS', trigger: 'blur' },
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
         ],
       },
       rules_ippz_wifi: {
         ippz_wifi_ssid: [
-                    { required: true, message: '请输入SSID', trigger: 'blur' },
+          { required: true, message: "请输入SSID", trigger: "blur" },
         ],
         ippz_wifi_mm: [
-                    { required: true, message: '请输入密码', trigger: 'blur' },
+          { required: true, message: "请输入密码", trigger: "blur" },
         ],
         ippz_dns_sx: [
-                    { required: true, message: '请输入首选DNS', trigger: 'blur' },
+          { required: true, message: "请输入首选DNS", trigger: "blur" },
         ],
         ippz_dns_by: [
-                    { required: true, message: '请输入备选DNS', trigger: 'blur' },
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
         ],
         ippz_mac: [
-                    { required: true, message: '请输入备选DNS', trigger: 'blur' },
+          { required: true, message: "请输入备选DNS", trigger: "blur" },
         ],
-            }
+      },
-        }
+    };
   },
   methods: {
     // 封装合并输入框的数据
@@ -409,49 +477,77 @@ export default {
     saveAll() {
       this.dialogFormVisible = false;
       this.formdata.ippz_wangkou = this.ippz_wangkou;
-            this.formdata.ippz_ip = this.Merge(this.ippz_ip, this.ippz_ip1, this.ippz_ip2, this.ippz_ip3, this.ippz_ip4);
+      this.formdata.ippz_ip = this.Merge(
-            this.formdata.ippz_zwym = this.Merge(this.ippz_zwym, this.ippz_zwym1, this.ippz_zwym2, this.ippz_zwym3, this.ippz_zwym4);
+        this.ippz_ip,
-            this.formdata.ippz_mrwg = this.Merge(this.ippz_mrwg, this.ippz_mrwg1, this.ippz_mrwg2, this.ippz_mrwg3, this.ippz_mrwg4);
+        this.ippz_ip1,
-            this.formdata.ippz_dns_sx = this.Merge(this.ippz_dns_sx, this.ippz_dns_sx1, this.ippz_dns_sx2, this.ippz_dns_sx3, this.ippz_dns_sx4);
+        this.ippz_ip2,
-            this.formdata.ippz_dns_by = this.Merge(this.ippz_dns_by, this.ippz_dns_by1, this.ippz_dns_by2, this.ippz_dns_by3, this.ippz_dns_by4);
+        this.ippz_ip3,
+        this.ippz_ip4
+      );
+      this.formdata.ippz_zwym = this.Merge(
+        this.ippz_zwym,
+        this.ippz_zwym1,
+        this.ippz_zwym2,
+        this.ippz_zwym3,
+        this.ippz_zwym4
+      );
+      this.formdata.ippz_mrwg = this.Merge(
+        this.ippz_mrwg,
+        this.ippz_mrwg1,
+        this.ippz_mrwg2,
+        this.ippz_mrwg3,
+        this.ippz_mrwg4
+      );
+      this.formdata.ippz_dns_sx = this.Merge(
+        this.ippz_dns_sx,
+        this.ippz_dns_sx1,
+        this.ippz_dns_sx2,
+        this.ippz_dns_sx3,
+        this.ippz_dns_sx4
+      );
+      this.formdata.ippz_dns_by = this.Merge(
+        this.ippz_dns_by,
+        this.ippz_dns_by1,
+        this.ippz_dns_by2,
+        this.ippz_dns_by3,
+        this.ippz_dns_by4
+      );
       this.formdata.ippz_mac = this.ippz_mac;
       sessionStorage.setItem("all_datas", JSON.stringify(this.formdata));
-        }
     },
-    mounted() {
-
   },
+  mounted() {},
   directives: {
     copy: {
       bind(el, { value }) {
         // 给元素赋值一个$value值,即指令绑定的值
-                el.$value = value
+        el.$value = value;
         el.handler = () => {
           // 如果可复制的值为空的时候，给出提示；
           if (!el.$value) {
-                        console.log('无复制内容')
+            console.log("无复制内容");
-                        return
+            return;
           }
           // 动态创建 textarea 标签
-                    const textarea = document.createElement('textarea');
+          const textarea = document.createElement("textarea");
           // 将该 textarea 设为 readonly 防止 IOS 下自动唤起键盘，同时将 textarea 移除可视区域
-                    textarea.readOnly = 'readonly';
+          textarea.readOnly = "readonly";
-                    textarea.style.position = 'absolute';
+          textarea.style.position = "absolute";
-                    textarea.style.left = '-9999px';
+          textarea.style.left = "-9999px";
           // 将要copy的值赋值给textarea 标签的value属性
           textarea.value = el.$value;
           // 将textarea 插入到body中
           document.body.appendChild(textarea);
           // 选中值并复制
-                    textarea.select()
+          textarea.select();
-                    const result = document.execCommand('Copy');
+          const result = document.execCommand("Copy");
           if (result) {
-                        console.log('复制成功');
+            console.log("复制成功");
           }
           document.body.removeChild(textarea);
-                }
+        };
         // 绑定点击事件，点击的时候copy值
-                el.addEventListener('click', el.handler);
+        el.addEventListener("click", el.handler);
       },
       // 当传递进来的值更新的时候触发
       componentUpdated(el, { value }) {
@@ -459,11 +555,11 @@ export default {
       },
       // 指令与元素解绑的时候，移除事件绑定
       unbind(el) {
-                el.removeEventListener('click', el.handler);
+        el.removeEventListener("click", el.handler);
-            }
+      },
-        }
+    },
-    }
+  },
-}
+};
 </script>
 
 <style lang="less" scoped>

src/components/GatewayMaintenance.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
-    <el-button @click="dialogVisible = true">网关维护</el-button>
+    <!-- <el-button @click="dialogVisible = true">网关维护</el-button> -->
-    <el-dialog title="网关维护" :visible.sync="dialogVisible">
+    <el-dialog
+      title="网关维护"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+    >
       <div class="title">
         <div class="left">
           <el-button @click="flag = true">新增参数</el-button>
@@ -172,7 +176,7 @@
 export default {
   data() {
     return {
-      dialogVisible: false,
+      dialogVisible: true,
       labelPosition: "left",
       flag: false,
       tableData: [
@@ -225,6 +229,7 @@ export default {
       },
     };
   },
+  created() {},
   methods: {
     handleSelectionChange() {},
     cellStyle({ row, column }) {

src/main.js

@@ -4,6 +4,15 @@ import ElementUI from "element-ui";
 import router from "./router";
 import "element-ui/lib/theme-chalk/index.css";
 Vue.config.productionTip = false;
+
+import moment from "moment";
+//定义一个全局过滤器实现日期格式化
+Vue.filter("datefmt", function (input, fmtstring) {
+  //当input为时间戳时，需转为Number类型
+  // 使用momentjs这个日期格式化类库实现日期的格式化功能
+  return moment(input).format(fmtstring);
+});
+Vue.prototype.$moment = moment;
 Vue.use(ElementUI);
 new Vue({
   router,

src/util/chartConfig.js

@@ -158,6 +158,11 @@ export let mainshaftChart = {
 };
 //负载电流监控
 export let loadChartChart = {
+  tooltip: {
+    //悬浮框
+    show: true, // 是否显示
+    trigger: "item", //
+  },
   xAxis: {
     type: "category",
     data: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
@@ -226,6 +231,11 @@ export let loadChartChart = {
 };
 //额定电流监控
 export let ratedChart = {
+  tooltip: {
+    //悬浮框
+    show: true, // 是否显示
+    trigger: "item", //
+  },
   xAxis: {
     type: "category",
     data: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
@@ -373,6 +383,11 @@ export let CuttingSpeedChart = {
 };
 //急停状态监控
 export let stopChart = {
+  tooltip: {
+    //悬浮框
+    show: true, // 是否显示
+    trigger: "item", //
+  },
   xAxis: {
     type: "category",
     data: [

src/views/Cockpit.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="container">
-    <div class="title">5G工厂机电智核数字孪生平台</div>
+    <div class="btns">
+      <div class="btnOne">提交</div>
+      <div class="btnTwo">网关配置</div>
+      <div class="btnThree">网关维护</div>
+      <div class="btnFour">网关监控</div>
+    </div>
+    <div class="title">
+      <img src="../assets/image/工业互联网驾驶舱文字_03.png" alt="" />
+      <span class="date">{{ data }}</span>
+      <span class="time">{{ time }}</span>
+    </div>
     <div class="bottom">
       <div class="topBox">
         <div>
@@ -87,9 +97,13 @@ export default {
       ratedChartOption: {},
       CuttingSpeedChartOption: {},
       stopChartOption: {},
+      data: "",
+      time: "",
+      timer: null,
     };
   },
   created() {
+    this.time = this.$moment().format("HH:mm:ss");
     this.productChartOption = productChart;
     this.mainshaftChartOption = mainshaftChart;
     this.loadChartChartOption = loadChartChart;
@@ -98,19 +112,24 @@ export default {
     this.stopChartOption = stopChart;
   },
   methods: {
+    //根据屏幕自适应图表字体
+    fontSize(res) {
+      const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+      if (!clientWidth) return;
+      let fontSize = clientWidth / 1920;
+      return res * fontSize;
+    },
+    //加载图表的方法
     getLoadEcharts(dom, option) {
       var myChart = echarts.init(document.getElementById(dom), null, {
         devicePixelRatio: 10, // 设置为2或更高的值
       });
-      // if (option) {
+      option.xAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
-      //   console.log(option.xAxis.axisLabel.textStyle);
+      option.yAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
-      //   option.xAxis.axisLabel.textStyle.fontSize =
-      //     this.$fontSize.fontSize(0.1);
-      //   option.yAxis.axisLabel.textStyle.fontSize =
-      //     this.$fontSize.fontSize(0.1);
-      // }
       myChart.setOption(option);
-
       window.addEventListener("resize", function () {
         myChart.resize();
       });
@@ -123,6 +142,15 @@ export default {
     this.getLoadEcharts("ratedChart", this.ratedChartOption);
     this.getLoadEcharts("one", this.CuttingSpeedChartOption);
     this.getLoadEcharts("two", this.stopChartOption);
+    //实时更新日期数据
+    this.timer = setInterval(() => {
+      this.time = this.$moment().format("HH:mm:ss");
+      this.data = this.$moment().format("YYYY.MM.DD");
+    }, 100);
+  },
+  beforeDestory() {
+    // 清除定时器以防止内存泄漏
+    clearInterval(this.timer);
   },
   beforeDestoryed() {
     // 组件销毁前移除监听,防止内存泄露
@@ -138,13 +166,45 @@ export default {
 
 .container {
   font-family: "SourceHanSansSC-regular";
+  position: relative;
   width: 100vw;
   height: 100vh;
   background-color: #fff;
-  // background-image: url("../assets/image/图片 2 Copy@1x.png");
+  background-image: url("../assets/image/图片 2 Copy@1x.png");
   background-size: cover; /* 图像大小适应容器 */
   background-repeat: no-repeat; /* 防止图像平铺 */
   background-position: center; /* 图像在容器中居中 */
+  .btns {
+    div {
+      width: 146px;
+      height: 39px;
+      position: absolute;
+      background-image: url("../assets/image/未选中-文字背景_06.png");
+      background-size: cover; /* 图像大小适应容器 */
+      background-repeat: no-repeat; /* 防止图像平铺 */
+      background-position: center; /* 图像在容器中居中 */
+      color: #fff;
+      font-size: 20px;
+      text-align: center;
+      line-height: 39px;
+      right: 10px;
+      font-family: "Microsoft Yahei";
+    }
+    .btnOne {
+      top: 80px;
+    }
+    .btnTwo {
+      top: 129px;
+    }
+    .btnThree {
+      top: 178px;
+    }
+    .btnFour {
+      top: 227px;
+      color: #6b92fd;
+      background-image: url("../assets/image/选中-文字背景_07.png");
+    }
+  }
   .title {
     height: 11%;
     display: flex;
@@ -153,11 +213,29 @@ export default {
     font-size: 48px;
     color: #fff;
     font-family: "SourceHanSansSC-regular";
-    // background-image: url("../assets/image/边框样式2@1x.png");
+    background-image: url("../assets/image/head.png");
-    // background-image: url("../assets/image/工业互联网驾驶舱文字_03.png");
     background-size: cover; /* 图像大小适应容器 */
     background-repeat: no-repeat; /* 防止图像平铺 */
     background-position: center; /* 图像在容器中居中 */
+    img {
+      width: 20vw;
+      margin-top: -15px;
+    }
+    .date {
+      position: absolute;
+      font-size: 15px;
+      font-family: "myFont";
+      left: 10px;
+      top: 10px;
+      color: #5e7dd5;
+    }
+    .time {
+      position: absolute;
+      font-size: 24px;
+      font-family: "myFont";
+      left: 10px;
+      top: 20px;
+    }
   }
   .bottom {
     height: calc(100vh - 11%);

src/views/Index.vue

@@ -58,21 +58,21 @@
 
     <div>
       <!-- //串口及网络协议设置 -->
-      <netConfiguration />
+      <!-- <netConfiguration /> -->
       <!-- 网口配置 -->
-      <NetworkConfiguration />
+      <!-- <NetworkConfiguration /> -->
       <!-- 无线配置 -->
-      <Wireles />
+      <!-- <Wireles /> -->
       <!-- 网络管理 -->
-      <NetworkManagement />
+      <!-- <NetworkManagement /> -->
       <!-- 对象管理 -->
-      <ObjectManagement />
+      <!-- <ObjectManagement /> -->
       <!-- 策略管理 -->
-      <PolicyManagement />
+      <!-- <PolicyManagement /> -->
       <!-- 网关配置 -->
-      <GatewayConfiguration />
+      <!-- <GatewayConfiguration /> -->
       <!-- 网关维护 -->
-      <GatewayMaintenance />
+      <!-- <GatewayMaintenance /> -->
       <div>
         <router-view></router-view>
       </div>

src/views/NtMaintenance.vue

@@ -1,3 +1,13 @@
 <template>
-  <div>网络优化-网关维护</div>
+  <div><GatewayMaintenance /></div>
 </template>
+<script>
+import GatewayMaintenance from "../components/GatewayMaintenance.vue";
+export default {
+  name: "ntmaintenance",
+  data() {},
+  components: {
+    GatewayMaintenance,
+  },
+};
+</script>