yangjun
/
panshi_vue_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
曹磊 2024-11-27 15:02:12 +08:00
parent 51834b3734
commit 8ff1914579
9 changed files with 268 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/fonts/DS-DIGI-1.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/DS-DIGIB-2.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/DS-DIGII-3.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/DS-DIGIT-4.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/images/background_app.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 130 KiB

5
src/views/demo/charts/Line.vue
View File

@ -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: {

143
src/views/temperature/Gauge.vue Normal file
View File

@ -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>

85
src/views/temperature/Line.vue
View File

@ -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: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333',
},
},
// 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}℃'
},
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',
symbol: 'emptyCircle',
symbolSize: 15};
// showSymbol: false,
// lineStyle: {
// 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);

67
src/views/temperature/index.vue
View File

@ -1,20 +1,27 @@
<template>
<div style="width: 100%">
<a-row class="w-full h-[90px]" justify="center">
<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">
<div class="flex m-auto justify-center items-center">
<p class="mt-4 text-xl w-1/2">
最新上报时间：<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 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">
<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>