磐石供热项目新版vue室内温度

src/views/demo/charts/Line.vue

@@ -15,7 +15,7 @@
       },
       height: {
         type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
+        default: 'calc(50vh - 200px)',
       },
     },
     setup() {
@@ -24,7 +24,7 @@
       const { barData, lineData, category } = getLineData;
       onMounted(() => {
         setOptions({
-          backgroundColor: '#0f375f',
+         // backgroundColor: '#0f375f',
           tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -35,6 +35,7 @@
               },
             },
           },
+
           legend: {
             data: ['line', 'bar'],
             textStyle: {

src/views/temperature/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.name;
+        // 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>

src/views/temperature/Line.vue

@@ -25,11 +25,11 @@ import {cloneDeep} from "lodash-es";
       },
       minValue: {
         type: Number as PropType<number>,
-        default: 0,
+        default: 15,
       },
       maxValue: {
         type: Number as PropType<number>,
-        default: 40,
+        default: 30,
       },
       width: {
         type: String as PropType<string>,
@@ -37,41 +37,65 @@ import {cloneDeep} from "lodash-es";
       },
       height: {
         type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
+        default: 'calc(50vh - 68px)',
       },
     },
     setup(props) {
       const chartRef = ref<HTMLDivElement | null>(null);
       const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
       const option = reactive({
-        backgroundColor: '#0f375f',
+        backgroundColor: '#2e303e',
+        borderRadius: 100,
+        title: {
+          text : "今日温度",
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            fontWeight : 'normal'
+          },
+          top : '10',
+          right : '10',
+        },
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
+          // axisPointer: {
-            type: 'shadow',
+          //   type: 'shadow',
-            label: {
+          //   label: {
-              show: true,
+          //     show: true,
-              backgroundColor: '#333',
+          //     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}℃'
         },
         xAxis: {
+          name: '时',
           data: [],
+          boundaryGap: false,
           axisLine: {
+            onZero: false,
             lineStyle: {
               color: '#ccc',
             },
           },
         },
         yAxis: {
-          splitLine: { show: false },
+          name: '摄氏度℃',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'gray',
+              type: 'dashed',
+            }
+          },
           axisLine: {
+            show : true,
             lineStyle: {
               color: '#ccc',
             },
           },
           min: props.minValue, // 设置y轴最小值为数据最小值
           max: props.maxValue, // 设置y轴最大值为数据最大值
+
         },
         series: [
           // {
@@ -81,6 +105,7 @@ import {cloneDeep} from "lodash-es";
           //   showAllSymbol: 'auto',
           //   symbol: 'emptyCircle',
           //   symbolSize: 15,
+          //
           //   data: [],
           // },
           // {
@@ -112,21 +137,45 @@ import {cloneDeep} from "lodash-es";
         //轴数据
         let xAxisData = [];
         let yAxisData = [];
+        let titleData = [];
 
         props.chartData.forEach((item) => {
-          xAxisData.push(item.reportTime);
+          titleData.push(item.reportTime);
+          xAxisData.push(item.reportHour+":00");
           yAxisData.push(item.roomTemp);
         });
 
         // console.log(xAxisData);
         // console.log(yAxisData);
         let line: any = {
-          name: '折线',
+          // name: '折线',
+          // type: 'line',
+          // smooth: true,
+          // showAllSymbol: 'auto',
+          // symbol: 'emptyCircle',
+          name: '温度',
           type: 'line',
+          // stack: 'Total',
           smooth: true,
-          showAllSymbol: 'auto',
+          // showSymbol: false,
-          symbol: 'emptyCircle',
+          // lineStyle: {
-          symbolSize: 15};
+          //   width: 0
+          // },
+          // areaStyle: {
+          //   opacity: 0.8,
+          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //     {
+          //       offset: 0,
+          //       color: '#1890ff'
+          //     },
+          //     {
+          //       offset: 1,
+          //       color: '#14c8d4'
+          //     }
+          //   ])
+          // },
+          symbolSize: 3
+        };
         let bar: any = {
           name: '柱图',
           type: 'bar',
@@ -143,7 +192,7 @@ import {cloneDeep} from "lodash-es";
         bar['data'] = yAxisData;
         let seriesData = [];
         seriesData.push(line);
-        seriesData.push(bar);
+        // seriesData.push(bar);
         option.xAxis.data = xAxisData;
         option.series = seriesData;
         console.log('option', option);

src/views/temperature/index.vue

@@ -1,20 +1,27 @@
 <template>
-  <div style="width: 100%">
+  <div class="h-full" style="width: 100%;  background-color: #00061a">
-    <a-row class="w-full h-[90px]" justify="center">
+    <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">
+        <div class="w-full h-full flex items-center">
-          <div class="flex m-auto justify-center items-center">
+          <div class="p-2 w-full text-white font-bold fontTime text-4xl text-center">
-            <p class="mt-4 text-xl w-1/2">
+            {{ reportTime }}
-              最新上报时间：<span class="font-bold text-lime-500">{{ reportTime }}</span></p
-            >
-            <p class="mt-4 text-xl w-1/2">
-              最新上报温度：<span class="font-bold text-lime-500">{{ tempDate }}</span><span>℃</span></p
-            >
           </div>
         </div>
       </a-col>
       <a-col :span="24">
-        <LineBar :chartData="lineData"></LineBar>
+        <div class="gaugecard">
+          <Gauge :chartData="gaugeData"></Gauge>
+        </div>
+        <div class="chcard">
+          <LineBar :chartData="lineData"></LineBar>
+        </div>
+
       </a-col>
     </a-row>
   </div>
@@ -23,11 +30,13 @@
 <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 = () => {
@@ -46,6 +55,8 @@ const TimeFun = () => {
 
 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;
 };
@@ -53,7 +64,7 @@ const getTempDataFn = async () => {
 const getTempLineFn = async () => {
   lineData.value = [];
   const resData = await tempList({"SDate": currentDate.value});
-  console.log('列表', resData);
+  // console.log('列表', resData);
   lineData.value = resData;
 };
 
@@ -76,4 +87,36 @@ onMounted(() => {
 </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>