diff --git a/src/components/headerBox/header2.vue b/src/components/headerBox/header2.vue
index 616495b..1b00108 100644
--- a/src/components/headerBox/header2.vue
+++ b/src/components/headerBox/header2.vue
@@ -502,6 +502,7 @@ h1 {
left: 1.5rem;
font-size: 3rem;
color: #fff;
+ cursor: pointer;
}
.comeBack > i {
font-size: 3rem;
diff --git a/src/http/Trend/index.ts b/src/http/Trend/index.ts
new file mode 100644
index 0000000..cec1269
--- /dev/null
+++ b/src/http/Trend/index.ts
@@ -0,0 +1,15 @@
+/*
+ * @FilePath: \wwwd:\code\screenFront\src\http\realtimeSecurity\index.ts
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-14 08:45:45
+ * @Description:
+ *
+ * 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
+ */
+import {get,post} from "@/utils/http"
+
+//气压
+export function getCurrent24Trend(id:string){
+ return get('/dataTrend/getCurrent24Trend',{id})
+}
\ No newline at end of file
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index e679f15..4a12262 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -272,5 +272,6 @@ export default {
'危废暂存间':'dangerous waste temporary storage room',
'历史数据':'Historical Data',
'环境 实时监测系统':'环境 实时监测系统',
+ '传感器监测走势图':'传感器监测走势图',
}
}
\ No newline at end of file
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 8caca04..88f954e 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -272,5 +272,6 @@ export default {
'危废暂存间':'危废暂存间',
'历史数据':'历史数据',
'环境 实时监测系统':'环境 实时监测系统',
+ '传感器监测走势图':'传感器监测走势图',
}
}
\ No newline at end of file
diff --git a/src/views/TrendChart/index.vue b/src/views/TrendChart/index.vue
index 6aef3b0..8d912eb 100644
--- a/src/views/TrendChart/index.vue
+++ b/src/views/TrendChart/index.vue
@@ -2,12 +2,13 @@
@@ -17,61 +18,108 @@
import { ref, reactive, onMounted, onUnmounted } from "vue"
import Header2 from "@/components/headerBox/header2.vue"
import lineChart from "./lineChart.vue";
+import { getCurrent24Trend } from '@/http/Trend/index'
+import { useRoute } from "vue-router";
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+let route = useRoute()
+let ids = route.query.ids as string
+let unit = route.query.unit as string
+let timer = null
type calcType = {
name: string,
- type: string,
- max: number,
- min: number,
- avg: number,
+ math: {
+ key: string,
+ value: {
+ max: number,
+ min: number,
+ avg: number,
+ data: any[]
+ }
+ }[],
data: any[]
}
let calcArr = ref()
let width = ref(1500)
let height = ref(700)
-function ajax() {
- setTimeout(() => {
- let data = []
- let length = 2
- let element = {
- name: '甲醛',
- type: 'CH2O',
- max: 0.1,
- min: 0.01,
- avg: 0.05,
- data: [
- ['2021-06-01 00:00:00', 10],
- ['2021-06-01 00:00:10', 20],
- ['2021-06-01 00:00:40', 50],
- ['2021-06-01 00:01:20', 90],
- ['2021-06-01 00:01:30', 100],
- ['2021-06-01 00:01:40', 110],
- ['2021-06-01 00:01:50', 120],
- ['2021-06-01 00:02:30', 160],
- ['2021-06-01 00:02:40', 170],
- ['2021-06-01 00:03:10', 200],
- ['2021-06-01 00:03:20', 210],
- ['2021-06-01 00:03:30', 220],
- ['2021-06-01 00:04:20', 270]
- ]
+async function ajax() {
+ const res: any = await getCurrent24Trend(ids);
+ let data = []
+ if (res.code == 200) {
+ // data = res.data.map((item: any) => {
+ // if (unit) {
+ // item.name = item.name + '(' + unit + ')'
+ // }
+ // return {
+ // name: item.name,
+ // type: item.type,
+ // max: item.max,
+ // min: item.min,
+ // avg: item.avg,
+ // data: item.date.map((key, value) => [key, item.value[value]])
+ // }
+ // })
+
+ let tempData = {}
+ res.data.forEach((item: any) => {
+ if (tempData.hasOwnProperty(item.id)) {
+ tempData[item.id].data.push({
+ name: item.type,
+ type: 'line',
+ showSymbol: false,
+ data: item.date.map((key, value) => [key, item.value[value]]),
+ smooth: true,
+ })
+ tempData[item.id].math.push({
+ key: item.type,
+ value: {
+ max: item.max,
+ min: item.min,
+ avg: item.avg
+ }
+ })
+ } else {
+ tempData[item.id] = {
+ name: item.name,
+ data: [{
+ name: item.type,
+ type: 'line',
+ showSymbol: false,
+ data: item.date.map((key, value) => [key, item.value[value]]),
+ smooth: true,
+ }],
+ math: [{
+ key: item.type,
+ value: {
+ max: item.max,
+ min: item.min,
+ avg: item.avg
+ }
+ }]
+ }
}
- for (let index = 0; index < length; index++) {
- data.push(element)
-
- }
+ })
+ data = Object.values(tempData)
calcArr.value = data
- if (data.length<=4) {
- width.value = 1900 / data.length-(data.length-1)*20;
- } else if (data.length>4&&data.length<=8) {
- width.value = width.value / 4-3*20;
- height.value = 950 / 2-40;
+ if (data.length <= 4) {
+ width.value = 1900 / data.length - (data.length - 1) * 20;
+ } else if (data.length > 4 && data.length <= 8) {
+ width.value = width.value / 4 - 3 * 20;
+ height.value = 950 / 2 - 40;
} else {
- width.value = width.value / 4-3*20;
- height.value = 950 / 3-60;
+ width.value = width.value / 4 - 3 * 20;
+ height.value = 950 / 3 - 60;
}
- })
+ }
}
onMounted(() => {
ajax()
+ timer = setInterval(() => {
+ ajax()
+ }, 1000 * 60 * 10)
+})
+onUnmounted(() => {
+ clearInterval(timer)
})
+.topTip {
+ width: 100%;
+ height: 150px;
+}