From d0d5fc83dac059b5ce7c1d45ccded212ab5a18b2 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期四, 13 七月 2023 10:40:24 +0800
Subject: [PATCH] 页面修改
---
src/views/HomeView.vue | 93 +++++++++++++++++-------------
package-lock.json | 56 +++++++++++++++++-
package.json | 1
3 files changed, 106 insertions(+), 44 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 401fdb2..cef947f 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 978c18a..8427277 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 470a72c..f65334e 100644
--- a/src/views/HomeView.vue
+++ b/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
-);
// 鍒濆鍖杄charts鎶樼嚎鍥�
const drawBar = () => {
//鍏堣幏鍙朌om涓婄殑瀹炰緥
@@ -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 = () => {
--
Gitblit v1.9.3