liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

设备类型，新增4G&蓝牙通讯方式

Browse Source
This commit is contained in:
fengerli
2025-09-09 14:16:19 +08:00
parent 95b020d389
commit c818e7607a
10 changed files with 643 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/workflow/compontents/AlarmItemsChart.vue
View File

@ -1,55 +0,0 @@
<template>
<div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
let myChart = null;
const initChart = () => {
if (chartRef.value) {
myChart = echarts.init(chartRef.value);
const option = {
xAxis: { type: 'category', data: ['强制报警', '撞击闯入', '手动报警', '电子围栏'] },
yAxis: { type: 'value' },
series: [{
data: [50, 30, 65, 45],
type: 'bar',
itemStyle: {
// 柱状图渐变色
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{ offset: 0, color: '#ff6b6b' }, { offset: 1, color: '#ffcccc' }]
),
},
}],
};
myChart.setOption(option);
}
};
const handleResize = () => {
myChart && myChart.resize();
};
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
myChart && myChart.dispose();
myChart = null;
});
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
}
</style>

53
src/views/workflow/compontents/AlarmOverviewChart.vue
View File

@ -1,53 +0,0 @@
<template>
<div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
let myChart = null;
const initChart = () => {
if (chartRef.value) {
myChart = echarts.init(chartRef.value);
const option = {
series: [{
type: 'pie',
radius: ['50%', '70%'], // 环形内外半径
data: [{ value: 6, name: '今日报警' }, { value: 6, name: '今日处理' }],
color: ['#ff4d4f', '#36cbcb'], // 红、绿配色
label: {
position: 'center',
formatter: '6/6\n今日报警/处理', // 中心文字
textStyle: { align: 'center' },
},
}],
};
myChart.setOption(option);
}
};
const handleResize = () => {
myChart && myChart.resize();
};
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
myChart && myChart.dispose();
myChart = null;
});
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
}
</style>

54
src/views/workflow/compontents/DeviceFrequencyChart.vue
View File

@ -1,54 +0,0 @@
<template>
<!-- 用ref绑定DOM，代替原id选择器 -->
<div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 200px;"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'; // 引入ECharts
const chartRef = ref(null); // 绑定图表容器DOM
let myChart = null; // 存储ECharts实例
// 初始化图表
const initChart = () => {
if (chartRef.value) {
myChart = echarts.init(chartRef.value);
const option = {
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
yAxis: { type: 'value' },
series: [{
data: [30, 20, 40, 32, 45, 48],
type: 'line',
areaStyle: {}, // 开启面积填充
itemStyle: { color: '#409eff' },
}],
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
};
myChart.setOption(option);
}
};
// 窗口resize时，图表自适应
const handleResize = () => {
myChart && myChart.resize();
};
onMounted(() => {
initChart();
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
// 组件销毁时，移除事件 + 销毁图表（防止内存泄漏）
window.removeEventListener('resize', handleResize);
myChart && myChart.dispose();
myChart = null;
});
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
}
</style>