99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div :class="$style['container']">
|
||
|
|
<div class="header">
|
||
|
|
<div class="title">
|
||
|
|
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'传感器24H趋势图'" :titleTip="[]" :typeFun="['time']"
|
||
|
|
:alarmType="[]"></header2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content">
|
||
|
|
<lineChart v-for="(calc, index) in calcArr" :style="{width:width+'px',height:height+'px','min-width':'calc(25% - 20px)'}" :calc="calc">
|
||
|
|
</lineChart>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { ref, reactive, onMounted, onUnmounted } from "vue"
|
||
|
|
import Header2 from "@/components/headerBox/header2.vue"
|
||
|
|
import lineChart from "./lineChart.vue";
|
||
|
|
type calcType = {
|
||
|
|
name: string,
|
||
|
|
type: string,
|
||
|
|
max: number,
|
||
|
|
min: number,
|
||
|
|
avg: number,
|
||
|
|
data: any[]
|
||
|
|
}
|
||
|
|
let calcArr = ref<calcType[]>()
|
||
|
|
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]
|
||
|
|
]
|
||
|
|
}
|
||
|
|
for (let index = 0; index < length; index++) {
|
||
|
|
data.push(element)
|
||
|
|
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
} else {
|
||
|
|
width.value = width.value / 4-3*20;
|
||
|
|
height.value = 950 / 3-60;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
ajax()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style module>
|
||
|
|
.container {
|
||
|
|
height: 1080px;
|
||
|
|
width: 1920px;
|
||
|
|
color: #20aec5;
|
||
|
|
background-color: #100c2a;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style scoped>
|
||
|
|
.content {
|
||
|
|
height: 980px;
|
||
|
|
width: 1920px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|