温度监测

2024-12-16 15:40:13 +08:00 · 2024-12-16 15:40:13 +08:00 · 894d54502c
parent 87ad8b6e78
commit 894d54502c
10 changed files with 479 additions and 4 deletions
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@ -80,7 +80,7 @@ export const tempRoute: AppRouteRecordRaw = {
  path: '/tempIndex',
  name: 'tempIndex',
  //新版后台登录，如果想要使用旧版登录放开即可
-  component: () => import('/@/views/temperature/index.vue'),
+  component: () => import('/@/views/temperature/app/index.vue'),
  meta: {
    title: t('室内温度'),
  },
--- a/src/views/heating/extract/DataExtractConfigList.vue
+++ b/src/views/heating/extract/DataExtractConfigList.vue
@ -171,7 +171,7 @@
        fixed: 'right',
      },
      beforeFetch: async (params) => {
-        return Object.assign(params, queryParam);
+        return Object.assign(params, queryParam.value);
      },
    },
    exportConfig: {
--- a/src/views/temperature/app/Gauge.vue
+++ b/src/views/temperature/app/Gauge.vue
--- a/src/views/temperature/app/Line.vue
+++ b/src/views/temperature/app/Line.vue
--- a/src/views/temperature/app/index.api.ts
+++ b/src/views/temperature/app/index.api.ts
--- a/src/views/temperature/app/index.vue
+++ b/src/views/temperature/app/index.vue
@ -54,7 +54,7 @@ const TimeFun = () => {
 };

 const getTempDataFn = async () => {
-  const resData = await findOne({"SDate": currentDate.value});
+  const resData = await findOne({"SDate": currentDate.value,"code": "867896071477072"});
  gaugeData.value["name"] = "实时温度";
  gaugeData.value["value"] = resData.roomTemp;
  tempDate.value = resData.roomTemp;
@ -63,7 +63,7 @@ const getTempDataFn = async () => {

 const getTempLineFn = async () => {
  lineData.value = [];
-  const resData = await tempList({"SDate": currentDate.value});
+  const resData = await tempList({"SDate": currentDate.value,"code": "867896071477072"});
  // console.log('列表', resData);
  lineData.value = resData;
 };
--- a/src/views/temperature/report/Gauge.vue
+++ b/src/views/temperature/report/Gauge.vue
@ -0,0 +1,143 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { GaugeChart } from 'echarts/charts';
+  import { cloneDeep } from 'lodash-es';
+  export default defineComponent({
+    name: 'Gauge',
+    props: {
+      chartData: {
+        type: Object as PropType<Object>,
+        default: () => [],
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      minValue: {
+        type: Number as PropType<number>,
+        default: 0,
+      },
+      maxValue: {
+        type: Number as PropType<number>,
+        default: 50,
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(50vh - 80px)',
+      },
+      // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
+      seriesColor: {
+        type: String,
+        default: '#1890ff',
+      },
+      // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        //backgroundColor: '#2e303e',
+        title: {
+          text : "",
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            fontWeight : 'normal'
+          },
+          top : '10',
+          right : '10',
+        },
+        series: [
+          {
+            type: 'gauge',
+            min: props.minValue, // 设置y轴最小值为数据最小值
+            max: props.maxValue, // 设置y轴最大值为数据最大值
+            // startAngle: 180,
+            // endAngle: 0,
+            // splitNumber: 10,
+            progress: {
+              show: true,
+              width: 7,
+            },
+            itemStyle: {
+              borderRadius: [30,30,30,30] // 分别设置左上、右上、右下、左下的圆角
+            },
+            axisLine: {
+              lineStyle: {
+                width: 8,
+              },
+            },
+            // axisTick: {
+            //   show: false,
+            // },
+            splitLine: {
+              length: 12,
+              lineStyle: {
+                width: 1,
+                color: '#fff',
+              },
+            },
+            axisLabel: {
+              distance: 12,
+              color: '#fff',
+              fontSize: 14,
+            },
+            anchor: {
+              show: true,
+              showAbove: true,
+              size: 5,
+              itemStyle: {
+                borderWidth: 1,
+                color: '#fff',
+              },
+            },
+            title: {
+              color: '#fff',
+              fontSize: 13,
+            },
+            detail: {
+              valueAnimation: true,
+              fontSize: 18,
+              color:'#fff',
+              formatter: '{value}℃',
+              // offsetCenter: [0, '60%'],
+            },
+            data: [
+              {
+                value: 0,
+                name: '',
+              },
+            ],
+          },
+        ],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        echarts.use(GaugeChart);
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+        option.title.text = props.chartData.title;
+        option.series[0].data[0].name = props.chartData.name;
+        option.series[0].data[0].value = props.chartData.value;
+        // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
+        option.series[0].color = props.seriesColor;
+        // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
+        setOptions(option);
+      }
+      return { chartRef };
+    },
+  });
+</script>
--- a/src/views/temperature/report/Line.vue
+++ b/src/views/temperature/report/Line.vue
@ -0,0 +1,159 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script lang="ts">
+  import {defineComponent, PropType, ref, Ref, reactive, watchEffect} from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import {cloneDeep} from "lodash-es";
+
+  export default defineComponent({
+    props: {
+      chartData: {
+        type: Array,
+        default: () => [],
+        required: true,
+      },
+      dateData: {
+        type: Array,
+        default: () => [],
+        required: true,
+      },
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+      minValue: {
+        type: Number as PropType<number>,
+        default: 15,
+      },
+      maxValue: {
+        type: Number as PropType<number>,
+        default: 30,
+      },
+      width: {
+        type: String as PropType<string>,
+        default: '100%',
+      },
+      height: {
+        type: String as PropType<string>,
+        default: 'calc(50vh - 68px)',
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const option = reactive({
+        backgroundColor: '#2e303e',
+        borderRadius: 100,
+        title: {
+          text : "今日温度",
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            fontWeight : 'normal'
+          },
+          top : '10',
+          right : '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          // axisPointer: {
+          //   type: 'shadow',
+          //   label: {
+          //     show: true,
+          //     backgroundColor: '#333',
+          //   },
+          // },
+          // formatter: '{b} <br/><span style="width: 10px;height: 10px;border-radius: 50%;background-color: #1890ff;display: inline-block;"></span>&nbsp;{a}&nbsp;&nbsp;&nbsp;&nbsp;{c}℃'
+        },
+        legend: {
+          top: 30,
+          textStyle: {
+            color: "rgba(255, 255, 255, 1)"
+          }
+        },
+        grid: {
+          top: 60,
+        },
+        xAxis: {
+          name: '时',
+          data: [],
+          boundaryGap: false,
+          axisLine: {
+            onZero: false,
+            lineStyle: {
+              color: '#ccc',
+            },
+          },
+        },
+        yAxis: {
+          name: '摄氏度℃',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'gray',
+              type: 'dashed',
+            }
+          },
+          axisLine: {
+            show : true,
+            lineStyle: {
+              color: '#ccc',
+            },
+          },
+          min: props.minValue, // 设置y轴最小值为数据最小值
+          max: props.maxValue, // 设置y轴最大值为数据最大值
+
+        },
+        series: [],
+      });
+
+      watchEffect(() => {
+        props.chartData && initCharts();
+      });
+
+      function initCharts() {
+        if (props.option) {
+          Object.assign(option, cloneDeep(props.option));
+        }
+
+        //图例类型
+        let typeArr = Array.from(new Set(props.chartData.map((item) => item.code)));
+        //轴数据
+        let xAxisData = Array.from(new Set(props.chartData.map((item) => item.reportHour+":00")));
+        console.log(xAxisData);
+        let seriesData = [];
+        typeArr.forEach((type) => {
+          console.log(type);
+          let obj: any = { name: type,type: 'line', smooth: true };
+          const findItem: any = props.chartData.find((item: any) => item.code == type);
+          if (findItem && findItem.color) {
+            obj.color = findItem.color;
+          }
+          // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
+          // update-begin-author:liusq date:2023-7-12 for: [issues/613] LineMulti 在数据不对齐时，横坐标计算错误
+          let data = [];
+          xAxisData.forEach((x) => {
+            let dataArr = props.chartData.filter((item) => type === item.code && item.reportHour+":00" === x);
+            if (dataArr && dataArr.length > 0) {
+              data.push(dataArr[0].roomTemp);
+            } else {
+              data.push(null);
+            }
+          });
+          // update-end-author:liusq date:2023-7-12 for: [issues/613] LineMulti 在数据不对齐时，横坐标计算错误
+          //data数据
+          obj['data'] = data;
+          seriesData.push(obj);
+        });
+
+        option.series = seriesData;
+        option.xAxis.data = xAxisData;
+        console.log('option', option);
+        setOptions(option);
+      }
+
+      return { chartRef };
+    },
+  });
+</script>
--- a/src/views/temperature/report/Temperature.api.ts
+++ b/src/views/temperature/report/Temperature.api.ts
@ -0,0 +1,16 @@
+import {defHttp} from '/@/utils/http/axios';
+
+enum Api {
+  findOne = '/temp/temperature/findOne',
+  tempList = '/temp/temperature/list',
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const findOne = (params) =>
+  defHttp.get({url: Api.findOne, params});
+
+export const tempList = (params) =>
+  defHttp.get({url: Api.tempList, params});
--- a/src/views/temperature/report/TemperatureList.vue
+++ b/src/views/temperature/report/TemperatureList.vue
@ -0,0 +1,157 @@
+<template>
+  <div class="index-body2">
+<!--    <div class="index_header">-->
+<!--      <span class="index_header-word">室内温度实时监测</span>-->
+<!--    </div>-->
+    <div class="index-central">
+      <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">
+            <a-row>
+              <a-col :span="6">
+                <Gauge :chartData="gaugeData"></Gauge>
+              </a-col>
+              <a-col :span="6">
+                <Gauge2 :chartData="gaugeData2"></Gauge2>
+              </a-col>
+              <a-col :span="6">
+                <Gauge3 :chartData="gaugeData3"></Gauge3>
+              </a-col>
+              <a-col :span="6">
+                <Gauge4 :chartData="gaugeData4"></Gauge4>
+              </a-col>
+            </a-row>
+          </div>
+          <div class="chcard">
+            <LineBar :chartData="lineData"></LineBar>
+          </div>
+
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+
+<!--  <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>
+      </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 Gauge2 from './Gauge.vue';
+import Gauge3 from './Gauge.vue';
+import Gauge4 from './Gauge.vue';
+import { findOne,tempList } from './Temperature.api';
+
+let currentDate = ref('');
+let reportTime = ref('');
+let tempDate = ref('');
+let gaugeData = ref({});
+let gaugeData2 = ref({});
+let gaugeData3 = ref({});
+let gaugeData4 = 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["title"] = "";
+  gaugeData.value["name"] = resData.code;
+  gaugeData.value["value"] = resData.roomTemp;
+  tempDate.value = resData.roomTemp;
+  reportTime.value = resData.reportTime;
+  const resData2 = await findOne({"SDate": currentDate.value,"code": "867896075324312"});
+  gaugeData2.value["name"] = resData2.code;
+  gaugeData2.value["value"] = resData2.roomTemp;
+  const resData3 = await findOne({"SDate": currentDate.value,"code": "867896075536782"});
+  gaugeData3.value["name"] = resData3.code;
+  gaugeData3.value["value"] = resData3.roomTemp;
+  const resData4 = await findOne({"SDate": currentDate.value,"code": "867896075562028"});
+  gaugeData4.value["name"] = resData4.code;
+  gaugeData4.value["value"] = resData4.roomTemp;
+  gaugeData4.value["title"] = "实时温度";
+};
+
+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>
+@import '/@/assets/loginmini/style/screen.less';
+@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;
+}
+
+</style>