123 lines
3.3 KiB
Vue
123 lines
3.3 KiB
Vue
<template>
|
||
<div class="h-full" style="width: 100%; background-color: #00061a">
|
||
<header class="h-[70px] text-white text-center bgheader">
|
||
<hgroup class="pt-4" style="line-height: 16px;">
|
||
<h3 class="mb-2">磐石市供热信息化平台</h3>
|
||
<h4>室内温度实时监测</h4>
|
||
</hgroup>
|
||
</header>
|
||
<a-row class="w-full" justify="center" style="width: 100%; background-color: #00061a;height: calc(1005 - 70px)">
|
||
<a-col :span="24">
|
||
<div class="w-full h-full flex items-center">
|
||
<div class="p-2 w-full text-white font-bold fontTime text-4xl text-center">
|
||
{{ reportTime }}
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<div class="gaugecard">
|
||
<Gauge :chartData="gaugeData"></Gauge>
|
||
</div>
|
||
<div class="chcard">
|
||
<LineBar :chartData="lineData"></LineBar>
|
||
</div>
|
||
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {onMounted, ref} from 'vue';
|
||
import LineBar from './Line.vue';
|
||
import Gauge from './Gauge.vue';
|
||
import { findOne,tempList } from './index.api';
|
||
|
||
let currentDate = ref('');
|
||
let reportTime = ref('');
|
||
let tempDate = ref('');
|
||
let gaugeData = ref({});
|
||
const lineData = ref([]);
|
||
|
||
const TimeFun = () => {
|
||
setInterval(() => {
|
||
let change = new Date();
|
||
let Y = change.getFullYear() + '-';
|
||
let M =
|
||
(change.getMonth() + 1 < 10 ? '0' + (change.getMonth() + 1) : change.getMonth() + 1) + '-';
|
||
let D = (change.getDate() < 10 ? '0' + change.getDate() : change.getDate()) + ' ';
|
||
let h = (change.getHours() < 10 ? '0' + change.getHours() : change.getHours()) + ':';
|
||
let m = (change.getMinutes() < 10 ? '0' + change.getMinutes() : change.getMinutes()) + ':';
|
||
let s = change.getSeconds() < 10 ? '0' + change.getSeconds() : change.getSeconds();
|
||
currentDate.value = `${Y}${M}${D} ${h}${m}${s}`;
|
||
}, 1000);
|
||
};
|
||
|
||
const getTempDataFn = async () => {
|
||
const resData = await findOne({"SDate": currentDate.value,"code": "867896071477072"});
|
||
gaugeData.value["name"] = "实时温度";
|
||
gaugeData.value["value"] = resData.roomTemp;
|
||
tempDate.value = resData.roomTemp;
|
||
reportTime.value = resData.reportTime;
|
||
};
|
||
|
||
const getTempLineFn = async () => {
|
||
lineData.value = [];
|
||
const resData = await tempList({"SDate": currentDate.value,"code": "867896071477072"});
|
||
// console.log('列表', resData);
|
||
lineData.value = resData;
|
||
};
|
||
|
||
//定时30秒，地表震动
|
||
setInterval(() => {
|
||
getTempDataFn();
|
||
}, 1000 * 30);
|
||
|
||
//定时30秒，地表震动
|
||
setInterval(() => {
|
||
getTempLineFn();
|
||
}, 1000 * 30);
|
||
|
||
onMounted(() => {
|
||
TimeFun();
|
||
getTempDataFn();
|
||
getTempLineFn();
|
||
});
|
||
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@font-face {
|
||
font-family: "DS-Digital";//这个是定义字体的名称
|
||
src: url("@/assets/fonts/DS-DIGII-3.ttf");
|
||
}
|
||
.fontTime{
|
||
background: linear-gradient(to right, #47f0ff, #0899ff);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
font-family: DS-Digital;
|
||
}
|
||
.chcard{
|
||
width: 96%;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 10px auto;
|
||
padding: 5px;
|
||
border-radius: 10px;
|
||
background: #2e303e;
|
||
}
|
||
.gaugecard{
|
||
width: 96%;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 10px auto;
|
||
border-radius: 10px;
|
||
background: #2e303e;
|
||
}
|
||
.bgheader{
|
||
background: url("@/assets/images/background_app.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
//background: #2e303e;
|
||
}
|
||
</style>
|