页面修改

yangyin

2023-07-13 d0d5fc83dac059b5ce7c1d45ccded212ab5a18b2

页面修改

 package-lock.json

@@ -8,6 +8,7 @@
      "name": "mobiletest",
      "version": "0.1.0",
      "dependencies": {
        "axios": "^1.4.0",
        "core-js": "^3.8.3",
        "echarts": "^5.4.2",
        "moment": "^2.29.4",
@@ -3477,6 +3478,11 @@
        "lodash": "^4.17.14"
      }
    },
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "node_modules/at-least-node": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3507,6 +3513,16 @@
      },
      "peerDependencies": {
        "postcss": "^8.1.0"
      }
    },
    "node_modules/axios": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
      "dependencies": {
        "follow-redirects": "^1.15.0",
        "form-data": "^4.0.0",
        "proxy-from-env": "^1.1.0"
      }
    },
    "node_modules/babel-loader": {
@@ -4093,6 +4109,17 @@
      "resolved": "https://registry.npmmirror.com/colorette/-/colorette-2.0.20.tgz",
      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
      "dev": true
    },
    "node_modules/combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
      "dependencies": {
        "delayed-stream": "~1.0.0"
      },
      "engines": {
        "node": ">= 0.8"
      }
    },
    "node_modules/commander": {
      "version": "8.3.0",
@@ -4687,6 +4714,14 @@
      },
      "engines": {
        "node": ">= 0.4"
      }
    },
    "node_modules/delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
      "engines": {
        "node": ">=0.4.0"
      }
    },
    "node_modules/depd": {
@@ -5810,7 +5845,6 @@
      "version": "1.15.2",
      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
      "dev": true,
      "engines": {
        "node": ">=4.0"
      },
@@ -5818,6 +5852,19 @@
        "debug": {
          "optional": true
        }
      }
    },
    "node_modules/form-data": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
      "dependencies": {
        "asynckit": "^0.4.0",
        "combined-stream": "^1.0.8",
        "mime-types": "^2.1.12"
      },
      "engines": {
        "node": ">= 6"
      }
    },
    "node_modules/forwarded": {
@@ -7216,7 +7263,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@@ -7225,7 +7271,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
      "dev": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@@ -8610,6 +8655,11 @@
        "node": ">= 0.10"
      }
    },
    "node_modules/proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
    },
    "node_modules/pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",

 package.json

@@ -8,6 +8,7 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "echarts": "^5.4.2",
    "moment": "^2.29.4",

 src/views/HomeView.vue

@@ -122,14 +122,14 @@
</template>

<script setup>
import { reactive, onMounted, ref, shallowRef } from "vue";
import { reactive, onMounted, ref, shallowRef, onBeforeUnmount } from "vue";
import moment from "moment";
import * as echarts from "echarts"; //引入echarts
const pointName = ref("电流");
const pointUnit = ref("A");
const myChart = shallowRef(null);
let g_refreshTime = 120;
const lastRefreshTime = ref(g_refreshTime);
const lastRefreshTime = ref(120);
let times = ref(null);
let state = reactive({
  currentRecordParas: {
    RecordValue: "23",
@@ -147,12 +147,41 @@
    },
    {
      DataStatus: [],
      DataTime: "2023-07-12 06:06:46",
      DataValue: "8.23",
      DataTime: "2023-07-12 06:07:46",
      DataValue: "4.23",
      MonitorPointID: "1595655566146015232",
      SignalID: "1595655566154403840",
    },
    {
      DataStatus: [],
      DataTime: "2023-07-12 06:08:46",
      DataValue: "5.23",
      MonitorPointID: "1595655566146015232",
      SignalID: "1595655566154403840",
    },
    {
      DataStatus: [],
      DataTime: "2023-07-12 06:09:46",
      DataValue: "6.23",
      MonitorPointID: "1595655566146015232",
      SignalID: "1595655566154403840",
    },
    {
      DataStatus: [],
      DataTime: "2023-07-12 06:10:46",
      DataValue: "7.23",
      MonitorPointID: "1595655566146015232",
      SignalID: "1595655566154403840",
    },
    {
      DataStatus: [],
      DataTime: "2023-07-12 06:12:46",
      DataValue: "9.23",
      MonitorPointID: "1595655566146015232",
      SignalID: "1595655566154403840",
    },
  ],
  x_yData: [],
  activeNames: [""],
  checked: false, //是否显示报警点
  loading: false, //加载状态
@@ -301,8 +330,23 @@
onMounted(() => {
  setTimeout(() => {
    drawBar();
  });
  }, 200);
});
const countdown = () => {
  if (lastRefreshTime.value === 0) {
    onTapRefresh();
    lastRefreshTime.value = 120;
    return;
  } else {
    lastRefreshTime.value--;
  }
};
onBeforeUnmount(() => {
  console.log("mounted!", 307);
  clearInterval(times.value);
  times.value = null;
});

//刷新
const onTapRefresh = () => {};
//监控图标间隔
@@ -328,23 +372,6 @@
    return;
  }
};
const now = new Date();
const minDate = new Date(
  now.getFullYear(),
  now.getMonth(),
  now.getDate(),
  0,
  0,
  0
);
const maxDate = new Date(
  now.getFullYear(),
  now.getMonth(),
  now.getDate(),
  23,
  59,
  59
);
//  初始化echarts折线图
const drawBar = () => {
  //先获取Dom上的实例
@@ -360,7 +387,6 @@
  });
  state.x_yData = x_yData;
  let series_arr = [];

  series_arr.push({
    type: "line",
    showSymbol: false,
@@ -370,7 +396,6 @@
      color: "#4169E1",
    },
  });

  let option = {
    tooltip: {
      trigger: "axis",
@@ -381,7 +406,7 @@
      color: "#7e8390",
    },
    grid: {
      left: "3%",
      left: "5%",
      right: "5%",
      bottom: "10%",
      top: "12%",
@@ -390,8 +415,6 @@
    xAxis: {
      type: "time",
      boundaryGap: false,
      min: minDate,
      max: maxDate,
      axisLabel: {
        showMaxLabel: true,
        formatter: function (value) {
@@ -462,20 +485,8 @@
  };
  myChart.value.clear();
  myChart.value.setOption(option, true);
  // var drawRefreshTimeText = lastRefreshTime.value + "s后刷新";
  // //定时器
  // var intervalRefreshTime = setInterval(function () {
  //   var lastRefreshTime = lastRefreshTime.value;
  //   lastRefreshTime.value = lastRefreshTime.value - 1;
  //   if (lastRefreshTime.value <= 0) {
  //     var drawRefreshTimeText = "刷新中";
  //     lastRefreshTime.value = g_refreshTime;
  //     //更新数据
  //     console.log("马上刷新");
  //     // that.refreshRealTimeValue();
  //   }
  // });
  window.addEventListener("resize", selfAdaption);
  times.value = setInterval(countdown, 1000);
};
//  自适应
const selfAdaption = () => {