74a066dd80
- 添加Three.js基础场景配置和核心功能模块 - 实现模型加载器、动画循环和交互选择器 - 添加温度、压力等仪表盘组件 - 配置Vite构建工具和ESLint规范 - 添加基础UI组件和布局系统 - 实现数据可视化图表组件 - 配置Nginx部署文件 - 添加钢铁厂设备数据模型
131 lines
2.4 KiB
Vue
131 lines
2.4 KiB
Vue
<template>
|
|
<BaseChart class="guage-chart" :option="option"></BaseChart>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import BaseChart from '@/components/charts/BaseChart.vue';
|
|
const props = defineProps<{
|
|
value: number;
|
|
title?: string;
|
|
min?: number;
|
|
max?: number;
|
|
}>();
|
|
const option = computed(() => {
|
|
const value = props.value;
|
|
return {
|
|
textStyle: {
|
|
fontSize: 10,
|
|
},
|
|
title: {
|
|
show: false,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'gauge',
|
|
startAngle: 200,
|
|
endAngle: -20,
|
|
min: props.min || 0,
|
|
max: props.max || 90,
|
|
center: ['50%', '60%'],
|
|
radius: '90%',
|
|
itemStyle: {
|
|
color: '#FFAB91',
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
fontSize: 8,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 4,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
distance: 1,
|
|
length: 3,
|
|
lineStyle: {
|
|
width: 1,
|
|
},
|
|
},
|
|
progress: {
|
|
show: true,
|
|
width: 4,
|
|
},
|
|
detail: {
|
|
offsetCenter: [0, '20%'],
|
|
formatter: '{value} °C',
|
|
color: 'inherit',
|
|
fontSize: 12,
|
|
valueAnimation: true,
|
|
},
|
|
title: {
|
|
offsetCenter: [0, '-20%'],
|
|
fontSize: 12,
|
|
color: '#fefefe',
|
|
},
|
|
data: [
|
|
{
|
|
value,
|
|
name: '温度',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'gauge',
|
|
center: ['50%', '60%'],
|
|
radius: '90%',
|
|
startAngle: 200,
|
|
endAngle: -20,
|
|
min: props.min || 0,
|
|
max: props.max || 90,
|
|
itemStyle: {
|
|
color: '#FD7347',
|
|
},
|
|
progress: {
|
|
show: true,
|
|
width: 1,
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
detail: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.guage-chart {
|
|
min-height: 80px;
|
|
}
|
|
</style>
|