Merge branch 'main' of http://47.107.152.87:3000/liubiao/dyf-vue-ui
This commit is contained in:
liub
@ -3,130 +3,178 @@
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'
|
||||
import { getMonthlyAlarmStatistics } from '@/api/homeIndex';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
getMonthlyAlarmStatistics({}).then((res) => {
|
||||
const monthlyData = res.data.monthlyStatistics || {};
|
||||
// 提取1-12月数据并转为数字
|
||||
const alarmData = [
|
||||
monthlyData.m1,
|
||||
monthlyData.m2,
|
||||
monthlyData.m3,
|
||||
monthlyData.m4,
|
||||
monthlyData.m5,
|
||||
monthlyData.m6,
|
||||
monthlyData.m7,
|
||||
monthlyData.m8,
|
||||
monthlyData.m9,
|
||||
monthlyData.m10,
|
||||
monthlyData.m11,
|
||||
monthlyData.m12
|
||||
].map(Number);
|
||||
let myChart: echarts.ECharts | null = null;
|
||||
let dataTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
const maxValue = Math.max(...alarmData);
|
||||
const maxIndex = alarmData.indexOf(maxValue);
|
||||
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
myChart = echarts.init(chartRef.value);
|
||||
updateChartData();
|
||||
window.addEventListener('resize', handleResize);
|
||||
};
|
||||
// 更新图表数据
|
||||
const updateChartData = () => {
|
||||
if (!myChart) return;
|
||||
getMonthlyAlarmStatistics({}).then((res) => {
|
||||
const monthlyData = res.data.monthlyStatistics || {};
|
||||
// 提取1-12月数据并转为数字
|
||||
const alarmData = [
|
||||
monthlyData.m1,
|
||||
monthlyData.m2,
|
||||
monthlyData.m3,
|
||||
monthlyData.m4,
|
||||
monthlyData.m5,
|
||||
monthlyData.m6,
|
||||
monthlyData.m7,
|
||||
monthlyData.m8,
|
||||
monthlyData.m9,
|
||||
monthlyData.m10,
|
||||
monthlyData.m11,
|
||||
monthlyData.m12
|
||||
].map(Number);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: months,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
const maxValue = Math.max(...alarmData);
|
||||
const maxIndex = alarmData.indexOf(maxValue);
|
||||
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: months,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12,
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
boundaryGap: [0, '30%']
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: alarmData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
emphasis: {
|
||||
showSymbol: true,
|
||||
symbolSize: 8
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#22E1DB',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(34,225,219, 0.6)' },
|
||||
{ offset: 1, color: 'rgba(34,225,219, 0)' }
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
if (params.dataIndex === maxIndex) {
|
||||
return '#fff'; // 最大值的点标为白色
|
||||
}
|
||||
return '#22E1DB';
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12,
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
boundaryGap: [0, '30%']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: alarmData,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
emphasis: {
|
||||
showSymbol: true,
|
||||
symbolSize: 8
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#22E1DB',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(34,225,219, 0.6)' },
|
||||
{ offset: 1, color: 'rgba(34,225,219, 0)' }
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
color: (params: any) => {
|
||||
if (params.dataIndex === maxIndex) {
|
||||
return '#fff'; // 最大值的点标为白色
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: (params) => params.dataIndex === maxIndex,
|
||||
position: 'top',
|
||||
color: '#22E1DB',
|
||||
formatter: '{c}', // 显示当前数据值
|
||||
fontSize: 12,
|
||||
return '#22E1DB';
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: (params: any) => params.dataIndex === maxIndex,
|
||||
position: 'top',
|
||||
color: '#22E1DB',
|
||||
formatter: '{c}', // 显示当前数据值
|
||||
fontSize: 12,
|
||||
}
|
||||
],
|
||||
};
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
});
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
console.error('获取月度报警统计数据失败:', err);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
// 开始数据定时器
|
||||
const startDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
}
|
||||
// 每300秒（5分钟
|
||||
dataTimer = setInterval(updateChartData, 300000);
|
||||
};
|
||||
|
||||
// 清除数据定时器
|
||||
const clearDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
dataTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
startDataTimer();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清除定时器
|
||||
clearDataTimer();
|
||||
// 移除事件监听
|
||||
window.removeEventListener('resize', handleResize);
|
||||
// 销毁图表
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.4vh;
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
import * as echarts from 'echarts'; // 引入 ECharts
|
||||
const chartRef = ref<HTMLDivElement | null>(null); // 图表容器的 ref
|
||||
const echartData = ref<any>({});
|
||||
let myChart: echarts.ECharts | null = null; // 保存图表实例
|
||||
const props = defineProps({
|
||||
alarmOverview: {
|
||||
type: Object,
|
||||
@ -33,7 +34,7 @@ onMounted(() => {
|
||||
geoFenceAlarms
|
||||
} = echartData.value;
|
||||
// 初始化 ECharts 实例
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
myChart = echarts.init(chartRef.value);
|
||||
// 配置图表参数
|
||||
const option = {
|
||||
tooltip: {
|
||||
@ -113,24 +114,29 @@ onMounted(() => {
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 将配置项设置到图表实例
|
||||
myChart.setOption(option);
|
||||
|
||||
// 窗口resize时，图表自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
window.addEventListener('resize', handleResize);
|
||||
}
|
||||
}, 200)
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top:4.8vh;
|
||||
margin-top: 4.8vh;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
|
||||
@ -3,111 +3,162 @@
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getDeviceCommunicationModeStatistics } from '@/api/homeIndex/index';
|
||||
import * as echarts from 'echarts';
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
|
||||
getDeviceCommunicationModeStatistics().then((res) => {
|
||||
console.log(res, '接口数据');
|
||||
const dataList = res.data || [];
|
||||
// 1.（通信方式名称）
|
||||
const xAxisData = dataList.map(item => item.communicationModeName);
|
||||
// 2. 总数数据
|
||||
const totalData = dataList.map(item => item.totalDevices);
|
||||
// 3. 异常数数据
|
||||
const abnormalData = dataList.map(item => item.abnormalDevices);
|
||||
// 图表配置）
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
legend: {
|
||||
data: ['总数', '异常'],
|
||||
right: '20px',
|
||||
textStyle: { color: '#DEEFFF' },
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
lineStyle: { color: 'rgba(255,255,255,0.1)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '总数',
|
||||
type: 'bar',
|
||||
data: totalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(0,166,255,1)' },
|
||||
{ offset: 1, color: 'rgba(0,125,221, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
type: 'bar',
|
||||
data: abnormalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(232,69,37,1)' },
|
||||
{ offset: 1, color: 'rgba(240,12,12, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
console.log('获取数据失败', err);
|
||||
});
|
||||
// 窗口 resize 时自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
let myChart: echarts.ECharts | null = null; // 保存图表实例
|
||||
let dataTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
// 更新图表数据
|
||||
const updateChartData = () => {
|
||||
if (!myChart) return;
|
||||
|
||||
getDeviceCommunicationModeStatistics().then((res) => {
|
||||
console.log(res, '接口数据');
|
||||
const dataList = res.data || [];
|
||||
// 1.（通信方式名称）
|
||||
const xAxisData = dataList.map(item => item.communicationModeName);
|
||||
// 2. 总数数据
|
||||
const totalData = dataList.map(item => item.totalDevices);
|
||||
// 3. 异常数数据
|
||||
const abnormalData = dataList.map(item => item.abnormalDevices);
|
||||
// 图表配置）
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
legend: {
|
||||
data: ['总数', '异常'],
|
||||
right: '20px',
|
||||
textStyle: { color: '#DEEFFF' },
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
lineStyle: { color: 'rgba(255,255,255,0.1)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '总数',
|
||||
type: 'bar',
|
||||
data: totalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(0,166,255,1)' },
|
||||
{ offset: 1, color: 'rgba(0,125,221, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
},
|
||||
{
|
||||
name: '异常',
|
||||
type: 'bar',
|
||||
data: abnormalData,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(232,69,37,1)' },
|
||||
{ offset: 1, color: 'rgba(240,12,12, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
console.log('获取数据失败', err);
|
||||
});
|
||||
};
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 开始数据定时器
|
||||
const startDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
}
|
||||
// 每800秒（8分钟
|
||||
dataTimer = setInterval(updateChartData, 800000);
|
||||
};
|
||||
|
||||
// 清除数据定时器
|
||||
const clearDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
dataTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
myChart = echarts.init(chartRef.value);
|
||||
// 初始加载数据
|
||||
updateChartData();
|
||||
// 启动定时器
|
||||
startDataTimer();
|
||||
// 窗口 resize 时自适应
|
||||
window.addEventListener('resize', handleResize);
|
||||
};
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 清除定时器
|
||||
clearDataTimer();
|
||||
// 移除事件监听
|
||||
window.removeEventListener('resize', handleResize);
|
||||
// 销毁图表实例
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 5.8vh;
|
||||
|
||||
@ -3,20 +3,20 @@
|
||||
<div class="deviceOvery">
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.totalDevices || '0'}} <span>个</span></div>
|
||||
<div class="deviceNum">{{ DataOverview.totalDevices || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="deviceText">设备总数</div>
|
||||
</div>
|
||||
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.onlineDevices || '0'}} <span>个</span></div>
|
||||
<div class="deviceNum">{{ DataOverview.onlineDevices || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="deviceText">在线数量</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.deviceTypes || '0'}} <span>种</span></div>
|
||||
<div class="deviceNum">{{ DataOverview.deviceTypes || '0' }} <span>种</span></div>
|
||||
</div>
|
||||
<div class="deviceText">设备型号</div>
|
||||
</div>
|
||||
@ -26,15 +26,24 @@
|
||||
<script setup lang="ts">
|
||||
import { getDeviceOverview } from '@/api/homeIndex'
|
||||
const DataOverview = ref<any>({})
|
||||
const getData = () => {
|
||||
getDeviceOverview({}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
DataOverview.value = res.data
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
getDeviceOverview({}).then((res) => {
|
||||
if (res.code==200) {
|
||||
DataOverview.value = res.data
|
||||
}
|
||||
|
||||
})
|
||||
getData();
|
||||
})
|
||||
|
||||
const timerAlarm = setInterval(() => {
|
||||
getData();
|
||||
}, 300000);
|
||||
onUnmounted(() => {
|
||||
clearInterval(timerAlarm);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.deviceOvery {
|
||||
@ -44,7 +53,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
margin-top: 7.5vh;
|
||||
text-align: center;
|
||||
font-size:0.7vw;
|
||||
font-size: 0.7vw;
|
||||
color: #DEEFFF;
|
||||
padding: 1.5vw;
|
||||
}
|
||||
@ -57,14 +66,15 @@ onMounted(() => {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.deviceText{
|
||||
|
||||
.deviceText {
|
||||
padding-top: 1.5vh;
|
||||
}
|
||||
|
||||
.deviceNum{
|
||||
.deviceNum {
|
||||
line-height: 12vh;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
position: relative;
|
||||
background: radial-gradient(circle at center, #00FCFF 0%, #FFFFFF 49%);
|
||||
/* 兼容写法 */
|
||||
-webkit-background-clip: text;
|
||||
@ -75,7 +85,8 @@ onMounted(() => {
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
.deviceNum span{
|
||||
|
||||
.deviceNum span {
|
||||
font-size: 0.6vw;
|
||||
}
|
||||
</style>
|
||||
@ -12,9 +12,11 @@
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const activeTab = ref('month');
|
||||
let myChart: echarts.ECharts | null = null; // 保存图表实例
|
||||
let dataTimer: NodeJS.Timeout | null = null; // 数据更新定时器
|
||||
|
||||
// 根据天数获取数据并更新图表
|
||||
const fetchDataAndUpdate = (days: number) => {
|
||||
@ -43,78 +45,126 @@ const fetchDataAndUpdate = (days: number) => {
|
||||
// 切换标签逻辑
|
||||
const switchTab = (tab: string) => {
|
||||
activeTab.value = tab;
|
||||
// 根据标签切换天数（近半月=15天，近半年=180天，按实际需求调整）
|
||||
// 根据标签切换天数（近一月=30天，近半年=180天）
|
||||
const days = tab === 'month' ? 30 : 180;
|
||||
fetchDataAndUpdate(days);
|
||||
|
||||
// 切换标签后重新启动定时器
|
||||
startDataTimer();
|
||||
};
|
||||
|
||||
// 开始数据定时器
|
||||
const startDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
}
|
||||
// 每300秒（5分钟）更新一次数据
|
||||
dataTimer = setInterval(() => {
|
||||
const days = activeTab.value === 'month' ? 30 : 180;
|
||||
fetchDataAndUpdate(days);
|
||||
}, 300000);
|
||||
};
|
||||
|
||||
// 清除数据定时器
|
||||
const clearDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
dataTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
|
||||
myChart = echarts.init(chartRef.value);
|
||||
|
||||
// 初始图表配置（空数据占位）
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '10%',
|
||||
bottom: '3%',
|
||||
top: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [], // 初始空数据
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1e3a8a',
|
||||
show: false
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
series: [{
|
||||
name: '使用频次',
|
||||
type: 'bar',
|
||||
data: [], // 初始空数据
|
||||
barWidth: '14px',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
valueAnimation: true,
|
||||
color: '#DEEFFF'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 1, 0,
|
||||
[
|
||||
{ offset: 0, color: '#0768D4' },
|
||||
{ offset: 1, color: '#0EC4DF' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
}
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
||||
// 初始化数据
|
||||
fetchDataAndUpdate(30);
|
||||
|
||||
// 启动定时器
|
||||
startDataTimer();
|
||||
};
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
// 初始化图表实例
|
||||
myChart = echarts.init(chartRef.value);
|
||||
|
||||
// 初始图表配置（空数据占位）
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '10%',
|
||||
bottom: '3%',
|
||||
top: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [], // 初始空数据
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1e3a8a',
|
||||
show: false
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
series: [{
|
||||
name: '使用频次',
|
||||
type: 'bar',
|
||||
data: [], // 初始空数据
|
||||
barWidth: '14px',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
valueAnimation: true,
|
||||
color: '#DEEFFF'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 1, 0,
|
||||
[
|
||||
{ offset: 0, color: '#0768D4' },
|
||||
{ offset: 1, color: '#0EC4DF' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
}
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
fetchDataAndUpdate(30);
|
||||
// 窗口resize自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart?.resize();
|
||||
});
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清除定时器
|
||||
clearDataTimer();
|
||||
// 移除事件监听
|
||||
window.removeEventListener('resize', handleResize);
|
||||
// 销毁图表实例
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -122,7 +172,7 @@ onMounted(() => {
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 4.8vh;
|
||||
position: relative; // 新增：确保按钮定位正确
|
||||
position: relative; // 确保按钮定位正确
|
||||
}
|
||||
|
||||
.btn_mounth_box {
|
||||
@ -143,7 +193,7 @@ onMounted(() => {
|
||||
color: #fff;
|
||||
font-size: 0.8vw;
|
||||
cursor: pointer;
|
||||
margin-left: 0.5vw; // 新增：按钮间距
|
||||
margin-left: 0.5vw; // 按钮间距
|
||||
}
|
||||
|
||||
.cur {
|
||||
|
||||
@ -5,66 +5,171 @@
|
||||
<div class="header-item">设备类型</div>
|
||||
<div class="header-item">设备IMEI</div>
|
||||
<div class="header-item">报警事件</div>
|
||||
<div class="header-item ">报警位置</div>
|
||||
<div class="header-item">报警位置</div>
|
||||
</div>
|
||||
<div class="alarm-table-body" ref="tableBody"
|
||||
:style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
|
||||
<div v-for="(item, index) in alarmData" :key="index" class="alarm-item">
|
||||
<div class="item-cell">{{ item.startTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceTypeName }}</div>
|
||||
<div class="item-cell">{{ item.deviceImei }}</div>
|
||||
<div class="item-cell alarm-event">
|
||||
{{ {
|
||||
0: '强制报警',
|
||||
1: '撞击闯入',
|
||||
2: '自动报警',
|
||||
3: '电子围栏告警'
|
||||
}[item.deviceAction] }}
|
||||
|
||||
<div class="alarm-table-body">
|
||||
<div ref="tableBody" class="alarm-table-body-inner">
|
||||
<!-- 第一份数据 -->
|
||||
<div v-for="(item, index) in displayData" :key="`first-${getKey(item, index)}`" class="alarm-item">
|
||||
<div class="item-cell">{{ item.startTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceTypeName }}</div>
|
||||
<div class="item-cell">{{ item.deviceImei }}</div>
|
||||
<div class="item-cell alarm-event">
|
||||
{{ getEventName(item.deviceAction) }}
|
||||
</div>
|
||||
<div class="item-cell loaction">{{ item.location }}</div>
|
||||
</div>
|
||||
<!-- 第二份数据（用于无缝滚动） -->
|
||||
<div v-for="(item, index) in displayData" :key="`second-${getKey(item, index)}`" class="alarm-item">
|
||||
<div class="item-cell">{{ item.startTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceTypeName }}</div>
|
||||
<div class="item-cell">{{ item.deviceImei }}</div>
|
||||
<div class="item-cell alarm-event">
|
||||
{{ getEventName(item.deviceAction) }}
|
||||
</div>
|
||||
<div class="item-cell loaction">{{ item.location }}</div>
|
||||
</div>
|
||||
<div class="item-cell loaction">{{ item.location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getRealtimeAlarm } from '@/api/homeIndex/index';
|
||||
|
||||
let alarmTimer = null;
|
||||
// 模拟报警数据
|
||||
const alarmData = ref([
|
||||
]);
|
||||
const alarmData = ref([]);
|
||||
const displayData = ref([]); // 显示的数据（复制一份用于无缝滚动）
|
||||
const tableBody = ref(null);
|
||||
const isScrolling = ref(true);
|
||||
const animationId = ref(null);
|
||||
const scrollPosition = ref(0);
|
||||
const itemHeight = ref(0); // 动态计算每个条目的高度
|
||||
|
||||
// 获取报警事件名称
|
||||
const getEventName = (action) => {
|
||||
const eventMap = {
|
||||
0: '强制报警',
|
||||
1: '撞击闯入',
|
||||
2: '自动报警',
|
||||
3: '电子围栏告警'
|
||||
};
|
||||
return eventMap[action] || '未知报警';
|
||||
};
|
||||
|
||||
// 获取实时报警数据
|
||||
const getRealtimeAlarmData = () => {
|
||||
getRealtimeAlarm().then((res) => {
|
||||
alarmData.value = res.data;
|
||||
if (res.data && res.data.length > 0) {
|
||||
// 新数据插入到最前面
|
||||
alarmData.value = [...res.data, ...alarmData.value];
|
||||
|
||||
// 限制数据量，避免性能问题
|
||||
if (alarmData.value.length > 10) {
|
||||
alarmData.value = alarmData.value.slice(0, 10);
|
||||
}
|
||||
// 更新显示数据
|
||||
updateDisplayData();
|
||||
// 新数据插入时重置滚动位置
|
||||
scrollPosition.value = 0;
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.transform = `translateY(0)`;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 更新显示数据（复制一份用于无缝滚动）
|
||||
const updateDisplayData = () => {
|
||||
displayData.value = [...alarmData.value];
|
||||
// 计算每个条目的实际高度
|
||||
nextTick(() => {
|
||||
const items = document.querySelectorAll('.alarm-item');
|
||||
if (items.length > 0) {
|
||||
itemHeight.value = items[0].offsetHeight;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 生成唯一的key
|
||||
const getKey = (item, index) => {
|
||||
return `${item.deviceImei}_${item.startTime}_${index}`;
|
||||
};
|
||||
|
||||
// 开始滚动动画
|
||||
const startScroll = () => {
|
||||
if (!tableBody.value || displayData.value.length === 0) return;
|
||||
stopScroll(); // 先停止之前的动画
|
||||
const scrollSpeed = 0.3; // 滚动速度
|
||||
const animate = () => {
|
||||
if (!isScrolling.value) {
|
||||
animationId.value = requestAnimationFrame(animate);
|
||||
return;
|
||||
}
|
||||
|
||||
scrollPosition.value += scrollSpeed;
|
||||
|
||||
// 当滚动超过一份数据的高度时，重置位置
|
||||
if (itemHeight.value > 0 && scrollPosition.value >= itemHeight.value * displayData.value.length) {
|
||||
scrollPosition.value = 0;
|
||||
}
|
||||
|
||||
// 应用滚动效果
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.transform = `translateY(-${scrollPosition.value}px)`;
|
||||
}
|
||||
|
||||
animationId.value = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animationId.value = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
// 停止滚动动画
|
||||
const stopScroll = () => {
|
||||
if (animationId.value) {
|
||||
cancelAnimationFrame(animationId.value);
|
||||
animationId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 开始报警定时器
|
||||
const startAlarmTimer = () => {
|
||||
if (alarmTimer) {
|
||||
clearInterval(alarmTimer);
|
||||
}
|
||||
getRealtimeAlarmData();
|
||||
alarmTimer = setInterval(getRealtimeAlarmData, 60 * 1000);
|
||||
alarmTimer = setInterval(getRealtimeAlarmData, 30 * 10000);
|
||||
};
|
||||
|
||||
// 清除报警定时器
|
||||
const clearAlarmTimer = () => {
|
||||
if (alarmTimer) {
|
||||
clearInterval(alarmTimer);
|
||||
alarmTimer = null;
|
||||
}
|
||||
};
|
||||
const tableBody = ref(null);
|
||||
|
||||
// 监听数据变化
|
||||
watch(displayData, (newData) => {
|
||||
if (newData.length > 0) {
|
||||
// 延迟一点确保DOM已更新
|
||||
setTimeout(() => {
|
||||
startScroll();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
startAlarmTimer();
|
||||
// 启动滚动动画
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.animationName = 'scroll';
|
||||
tableBody.value.style.animationIterationCount = 'infinite';
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearAlarmTimer(); // 组件销毁时清除定时器
|
||||
})
|
||||
clearAlarmTimer();
|
||||
stopScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.alarm-table-container {
|
||||
width: 100%;
|
||||
@ -90,28 +195,13 @@ onUnmounted(() => {
|
||||
|
||||
.alarm-table-body {
|
||||
height: 18vh;
|
||||
/* 可根据需求调整高度 */
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Webkit浏览器滚动条样式 */
|
||||
.alarm-table-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.alarm-table-body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.alarm-table-body::-webkit-scrollbar-thumb {
|
||||
background: #267AD0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.alarm-table-body::-webkit-scrollbar-thumb:hover {
|
||||
background: #267AD0;
|
||||
.alarm-table-body-inner {
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
.alarm-item {
|
||||
@ -120,6 +210,8 @@ onUnmounted(() => {
|
||||
font-size: 0.6vw;
|
||||
align-items: center;
|
||||
padding: 0.8vw;
|
||||
height: 7vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-cell {
|
||||
@ -127,22 +219,17 @@ onUnmounted(() => {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// .item-cell.loaction{
|
||||
// color: #267AD0;
|
||||
// }
|
||||
.alarm-event {
|
||||
color: #ff5252;
|
||||
/* 报警事件红色显示 */
|
||||
}
|
||||
|
||||
/* 滚动动画 */
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* 隐藏滚动条 */
|
||||
.alarm-table-body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.alarm-table-body {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
@ -105,6 +105,7 @@ const timer = setInterval(() => {
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
clearInterval(timerAlarm);
|
||||
});
|
||||
|
||||
// 格式化时间
|
||||
@ -119,6 +120,11 @@ const getData = async () => {
|
||||
alarmOverview.value = res.data
|
||||
}
|
||||
}
|
||||
|
||||
const timerAlarm = setInterval(() => {
|
||||
getData();
|
||||
}, 300000);
|
||||
|
||||
getData()
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user