刘龙龙

2023-11-02 11:04:27 +08:00 · 2023-11-02 11:04:27 +08:00 · 0597b4ad28
parent 278643b965
commit 0597b4ad28
10 changed files with 756 additions and 528 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/assets/image/head.png
+++ b/src/assets/image/head.png
--- a/src/components/DataView.vue
+++ b/src/components/DataView.vue
--- a/src/components/GatewayMaintenance.vue
+++ b/src/components/GatewayMaintenance.vue
@ -1,7 +1,11 @@
 <template>
  <div>
-    <el-button @click="dialogVisible = true">网关维护</el-button>
-    <el-dialog title="网关维护" :visible.sync="dialogVisible">
+    <!-- <el-button @click="dialogVisible = true">网关维护</el-button> -->
+    <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 }) {
--- a/src/main.js
+++ b/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,
--- a/src/util/chartConfig.js
+++ b/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: [
--- a/src/views/Cockpit.vue
+++ b/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) {
-      //   console.log(option.xAxis.axisLabel.textStyle);
-      //   option.xAxis.axisLabel.textStyle.fontSize =
-      //     this.$fontSize.fontSize(0.1);
-      //   option.yAxis.axisLabel.textStyle.fontSize =
-      //     this.$fontSize.fontSize(0.1);
-      // }
+      option.xAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
+      option.yAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
      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/工业互联网驾驶舱文字_03.png");
+    background-image: url("../assets/image/head.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%);
--- a/src/views/Index.vue
+++ b/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>
--- a/src/views/NtMaintenance.vue
+++ b/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>