panshi_vue_new/src/views/temperature/index.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});
  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});
  // 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>