刘龙龙

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/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>