数据大屏图表接口对接
This commit is contained in:
fengerli
@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
|
||||
#VITE_APP_BASE_API = 'http://192.168.2.23:8000'
|
||||
#VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
|
||||
VITE_APP_BASE_API = 'http://192.168.2.23:8000'
|
||||
|
||||
#代永飞接口
|
||||
#VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
|
||||
|
||||
59
src/api/homeIndex/index.ts
Normal file
59
src/api/homeIndex/index.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import request from '@/utils/request';
|
||||
// 获取设备总览 DataOverview
|
||||
export const getDeviceOverview = (params) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getDeviceOverview',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// 报警事件，报警总数统计
|
||||
export const getAlarmStatistics = (params) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getAlarmStatistics',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 报警次数
|
||||
export const getMonthlyAlarmStatistics = (params) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getMonthlyAlarmStatistics',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
// 设备类别
|
||||
export const getDeviceCommunicationModeStatistics = (params = {}) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getDeviceCommunicationModeStatistics',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
// 设备使用频次
|
||||
export const getDeviceUsageFrequency = (params = {}) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getDeviceUsageFrequency',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
// 实时报警
|
||||
export const getRealtimeAlarm = (params = {}) => {
|
||||
return request({
|
||||
url: '/api/largeScreen/getRealtimeAlarm',
|
||||
method: 'get',
|
||||
params: params
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
0
src/api/homeIndex/types.ts
Normal file
0
src/api/homeIndex/types.ts
Normal file
BIN
src/assets/homeIndex/btn.png
Normal file
BIN
src/assets/homeIndex/btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/homeIndex/btn_cur.png
Normal file
BIN
src/assets/homeIndex/btn_cur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 45 KiB |
BIN
src/assets/homeIndex/deviceIMG.png
Normal file
BIN
src/assets/homeIndex/deviceIMG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -1,6 +1,139 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="vchartPage">
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
<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);
|
||||
|
||||
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)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
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) => {
|
||||
if (params.dataIndex === maxIndex) {
|
||||
return '#fff'; // 最大值的点标为白色
|
||||
}
|
||||
return '#22E1DB';
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: (params) => params.dataIndex === maxIndex,
|
||||
position: 'top',
|
||||
color: '#22E1DB',
|
||||
formatter: '{c}', // 显示当前数据值
|
||||
fontSize: 12,
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.4vh;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 24vh;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,140 @@
|
||||
<template>
|
||||
<div></div>
|
||||
|
||||
<!-- 图表容器，设置宽高 -->
|
||||
<div class="vchartPage">
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'; // 引入 ECharts
|
||||
const chartRef = ref<HTMLDivElement | null>(null); // 图表容器的 ref
|
||||
const echartData = ref<any>({});
|
||||
const props = defineProps({
|
||||
alarmOverview: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
watch(() => props.alarmOverview, (newVal) => {
|
||||
echartData.value = newVal;
|
||||
console.log('newVal:', newVal);
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
if (chartRef.value) {
|
||||
const {
|
||||
forcedAlarms,
|
||||
intrusionImpactAlarms,
|
||||
autoAlarms,
|
||||
geoFenceAlarms
|
||||
} = echartData.value;
|
||||
// 初始化 ECharts 实例
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
// 配置图表参数
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发方式：坐标轴触发
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true, // 网格包含坐标轴标签
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['强制报警', '撞击闯入', '自动报警', '电子围栏告警'], // X 轴类目
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)', // X 轴线颜色
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF', // X 轴文字颜色
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1e3a8a', // Y 轴线颜色
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF', // Y 轴标签文字颜色
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)', // Y 轴分割
|
||||
type: 'dashed', // 分割线为虚线
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '报警次数',
|
||||
type: 'bar',
|
||||
data: [forcedAlarms, intrusionImpactAlarms, autoAlarms, geoFenceAlarms],
|
||||
barWidth: '20px', // 柱子宽度
|
||||
// 为不同柱子设置渐变色
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
const colorList = [
|
||||
// 强制报警：蓝色渐变
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#0F3352' },
|
||||
{ offset: 1, color: '#00A8FF' },
|
||||
]),
|
||||
// 撞击闯入：黄色渐变
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#0F3352' },
|
||||
{ offset: 1, color: '#E4B90C' },
|
||||
]),
|
||||
// 自动报警：青蓝渐变
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#0F3352' },
|
||||
{ offset: 1, color: '#15DBCB' },
|
||||
]),
|
||||
// 电子围栏告警：红色渐变
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#0F3352' },
|
||||
{ offset: 1, color: '#F00C0C' },
|
||||
]),
|
||||
];
|
||||
return colorList[params.dataIndex];
|
||||
},
|
||||
borderRadius: 4
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 将配置项设置到图表实例
|
||||
myChart.setOption(option);
|
||||
|
||||
// 窗口resize时，图表自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
}, 200)
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.2vh;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 23vh;
|
||||
}
|
||||
</style>
|
||||
@ -3,20 +3,20 @@
|
||||
<div class="alarmOvery">
|
||||
<div class="alarm">
|
||||
<div class="alarmIMG">
|
||||
<div class="alarmNum">1000 <span>个</span></div>
|
||||
<div class="alarmNum">{{ alarmOverview.activeAlarms || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="alarmText">正在报警</div>
|
||||
</div>
|
||||
|
||||
<div class="alarm">
|
||||
<div class="alarmIMG">
|
||||
<div class="alarmNum">1000 <span>个</span></div>
|
||||
<div class="alarmNum">{{ alarmOverview.totalAlarms || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="alarmText">报警总数</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<div class="alarmIMG">
|
||||
<div class="alarmNum">1000 <span>个</span></div>
|
||||
<div class="alarmNum">{{ alarmOverview.processedAlarms || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="alarmText">已处理</div>
|
||||
</div>
|
||||
@ -24,6 +24,14 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
alarmOverview: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@ -34,7 +42,7 @@
|
||||
align-items: center;
|
||||
margin-top: 7.5vh;
|
||||
text-align: center;
|
||||
font-size:0.8vw;
|
||||
font-size: 0.7vw;
|
||||
color: #DEEFFF;
|
||||
padding: 1.5vw;
|
||||
}
|
||||
@ -47,11 +55,27 @@
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.alarmText{
|
||||
|
||||
.alarmText {
|
||||
padding-top: 1.5vh;
|
||||
}
|
||||
.alarmNum{
|
||||
|
||||
.alarmNum {
|
||||
line-height: 12vh;
|
||||
color: radial-gradient(0deg, #F63838 0%, #FFFFFF 100%);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: radial-gradient(circle at center, #F63838 0%, #FFFFFF 49%);
|
||||
/* 兼容写法 */
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.alarmNum span {
|
||||
font-size: 0.6vw;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,120 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="vchartPage">
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
<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.6)' }
|
||||
]
|
||||
),
|
||||
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.6)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
},
|
||||
barWidth: '20px'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
console.log('获取数据失败', err);
|
||||
});
|
||||
// 窗口 resize 时自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.8vh;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 22vh;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,81 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="deviceOvery">
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<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>
|
||||
<div class="deviceText">在线数量</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.deviceTypes || '0'}} <span>种</span></div>
|
||||
</div>
|
||||
<div class="deviceText">设备型号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { getDeviceOverview } from '@/api/homeIndex'
|
||||
const DataOverview = ref<any>({})
|
||||
onMounted(() => {
|
||||
getDeviceOverview({}).then((res) => {
|
||||
if (res.code==200) {
|
||||
DataOverview.value = res.data
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss">
|
||||
.deviceOvery {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-top: 7.5vh;
|
||||
text-align: center;
|
||||
font-size:0.7vw;
|
||||
color: #DEEFFF;
|
||||
padding: 1.5vw;
|
||||
}
|
||||
|
||||
.deviceIMG {
|
||||
width: 12vh;
|
||||
height: 12vh;
|
||||
background: url(@/assets/homeIndex/deviceIMG.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.deviceText{
|
||||
padding-top: 1.5vh;
|
||||
}
|
||||
|
||||
.deviceNum{
|
||||
line-height: 12vh;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: radial-gradient(circle at center, #00FCFF 0%, #FFFFFF 49%);
|
||||
/* 兼容写法 */
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
.deviceNum span{
|
||||
font-size: 0.6vw;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,158 @@
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="vchartPage">
|
||||
<div class="btn_mounth_box">
|
||||
<div class="btn_mounth" :class="{ cur: activeTab == 'month' }" @click="switchTab('month')">近一月</div>
|
||||
<div class="btn_mounth" :class="{ cur: activeTab === 'halfYear' }" @click="switchTab('halfYear')">近半年</div>
|
||||
</div>
|
||||
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
<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; // 保存图表实例
|
||||
|
||||
// 根据天数获取数据并更新图表
|
||||
const fetchDataAndUpdate = (days: number) => {
|
||||
getDeviceUsageFrequency({ days }).then((res) => {
|
||||
if (res.code === 200 && res.data && myChart) {
|
||||
// 处理接口返回的真实数据（转换为图表所需格式）
|
||||
const chartData = res.data.map(item => ({
|
||||
name: item.deviceName,
|
||||
value: item.frequency
|
||||
}));
|
||||
// 更新图表
|
||||
myChart.setOption({
|
||||
yAxis: {
|
||||
data: chartData.map(item => item.name)
|
||||
},
|
||||
series: [{
|
||||
data: chartData.map(item => item.value)
|
||||
}]
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取数据失败', err);
|
||||
});
|
||||
};
|
||||
|
||||
// 切换标签逻辑
|
||||
const switchTab = (tab: string) => {
|
||||
activeTab.value = tab;
|
||||
// 根据标签切换天数（近半月=15天，近半年=180天，按实际需求调整）
|
||||
const days = tab === 'month' ? 30 : 180;
|
||||
fetchDataAndUpdate(days);
|
||||
};
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.8vh;
|
||||
position: relative; // 新增：确保按钮定位正确
|
||||
}
|
||||
|
||||
.btn_mounth_box {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 1vh;
|
||||
top: 0vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn_mounth {
|
||||
width:4.5vw;
|
||||
height:4.5vh;
|
||||
background: url(@/assets/homeIndex/btn.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
line-height: 4.4vh;
|
||||
color: #fff;
|
||||
font-size: 0.8vw;
|
||||
cursor: pointer;
|
||||
margin-left: 0.5vw; // 新增：按钮间距
|
||||
}
|
||||
|
||||
.cur {
|
||||
background: url(@/assets/homeIndex/btn_cur.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 22vh;
|
||||
}
|
||||
</style>
|
||||
@ -10,54 +10,39 @@
|
||||
<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.alarmTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceType }}</div>
|
||||
<div class="item-cell">{{ item.deviceIMEI }}</div>
|
||||
<div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
|
||||
<div class="item-cell">{{ item.alarmLocation }}</div>
|
||||
</div>
|
||||
<!-- 复制一份数据，实现无缝滚动 -->
|
||||
<div v-for="(item, index) in alarmData" :key="index + 'copy'" class="alarm-item">
|
||||
<div class="item-cell">{{ item.alarmTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceType }}</div>
|
||||
<div class="item-cell">{{ item.deviceIMEI }}</div>
|
||||
<div class="item-cell alarm-event">{{ item.alarmEvent }}</div>
|
||||
<div class="item-cell">{{ item.alarmLocation }}</div>
|
||||
<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>
|
||||
<div class="item-cell">{{ item.location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { getRealtimeAlarm } from '@/api/homeIndex/index';
|
||||
|
||||
// 模拟报警数据
|
||||
const alarmData = ref([
|
||||
{
|
||||
alarmTime: '2025-09-01 20:16:54',
|
||||
deviceType: 'BJQ6170',
|
||||
deviceIMEI: '123456789123456',
|
||||
alarmEvent: '强制报警',
|
||||
alarmLocation: '湖北省武汉市国际企业中心聚星楼'
|
||||
},
|
||||
{
|
||||
alarmTime: '2025-09-01 20:16:54',
|
||||
deviceType: 'BJQ6170',
|
||||
deviceIMEI: '123456789123456',
|
||||
alarmEvent: '强制报警',
|
||||
alarmLocation: '湖北省武汉市国际企业中心聚星楼'
|
||||
},
|
||||
{
|
||||
alarmTime: '2025-09-01 20:16:54',
|
||||
deviceType: 'BJQ6170',
|
||||
deviceIMEI: '123456789123456',
|
||||
alarmEvent: '强制报警',
|
||||
alarmLocation: '湖北省武汉市国际企业中心聚星楼'
|
||||
}
|
||||
]);
|
||||
const getRealtimeAlarmData = () => {
|
||||
getRealtimeAlarm().then((res) => {
|
||||
alarmData.value = res.data;
|
||||
});
|
||||
}
|
||||
|
||||
const tableBody = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
getRealtimeAlarmData()
|
||||
// 启动滚动动画
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.animationName = 'scroll';
|
||||
@ -76,9 +61,9 @@ onMounted(() => {
|
||||
|
||||
.alarm-table-header {
|
||||
display: flex;
|
||||
color: #267AD0;
|
||||
color: #00C0FF;
|
||||
border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
|
||||
font-size: 1vw;
|
||||
font-size: 0.8vw;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<!-- 左侧模块组 -->
|
||||
<div class="left-modules">
|
||||
<div class="module-card overview-card">
|
||||
<div class="module-header">设备概览</div>
|
||||
<div class="module-header">设备总览</div>
|
||||
<div class="module-content">
|
||||
<DeviceOverview />
|
||||
</div>
|
||||
@ -43,14 +43,14 @@
|
||||
<div class="module-card alarm-card">
|
||||
<div class="module-header">报警数据</div>
|
||||
<div class="module-content">
|
||||
<AlarmOverview />
|
||||
<AlarmOverview :alarmOverview="alarmOverview" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">报警事件</div>
|
||||
<div class="module-content">
|
||||
<AlarmEvent />
|
||||
<AlarmEvent :alarmOverview="alarmOverview" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -76,6 +76,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getAlarmStatistics } from '@/api/homeIndex'
|
||||
import DeviceOverview from './components/DeviceOverview.vue';
|
||||
import AlarmOverview from './components/AlarmOverview.vue';
|
||||
import DeviceCategory from './components/DeviceCategory.vue';
|
||||
@ -84,6 +85,7 @@ import AlarmEvent from './components/AlarmEvent.vue';
|
||||
import AlarmCount from './components/AlarmCount.vue';
|
||||
import RealTimeAlarm from './components/RealTimeAlarm.vue';
|
||||
import MapComponent from './components/MapComponent.vue';
|
||||
const alarmOverview = ref<any>({})
|
||||
// 实时时间实现
|
||||
const currentDate = ref(new Date());
|
||||
// 每秒更新时间
|
||||
@ -100,6 +102,19 @@ const currentTime = computed(() => {
|
||||
const now = currentDate.value;
|
||||
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
|
||||
});
|
||||
// 报警事件是同一个接口，在这里调用，两个子组件直接引入
|
||||
const getData = async () => {
|
||||
const res = await getAlarmStatistics({})
|
||||
if (res.code == 200) {
|
||||
alarmOverview.value = res.data
|
||||
}
|
||||
}
|
||||
getData()
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user