优化可视化大屏
This commit is contained in:
parent
d62b8267a8
commit
9572d9000f
1749
package-lock.json
generated
1749
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -15,6 +15,7 @@
|
||||
"axios": "^1.7.9",
|
||||
"datav-vue3": "^1.0.0",
|
||||
"echarts": "^5.6.0",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"element-plus": "^2.9.3",
|
||||
"flv.js": "^1.6.2",
|
||||
"json-server": "^1.0.0-beta.3",
|
||||
|
||||
@ -9,7 +9,6 @@ import request from '@/utils/request'
|
||||
* @returns {Promise} 返回设备列表数据
|
||||
*/
|
||||
export function getDeviceList(params = {}) {
|
||||
console.log('请求参数:', params)
|
||||
return request.get('/api/device/list', {
|
||||
params: {
|
||||
page: params.page || 1,
|
||||
@ -17,7 +16,6 @@ export function getDeviceList(params = {}) {
|
||||
device_type: params.device_type
|
||||
}
|
||||
}).then(res => {
|
||||
console.log('API返回数据:', res)
|
||||
return res
|
||||
})
|
||||
}
|
||||
|
||||
@ -30,4 +30,12 @@ export function getAlertStatisticsByIndicator() {
|
||||
*/
|
||||
export function getAlertStatisticsByRule() {
|
||||
return request.get('/api/admin/alert/statistics/by-rule')
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取监测点预警统计
|
||||
* @returns {Promise} 返回监测点预警统计数据
|
||||
*/
|
||||
export function getAlertStatisticsByPoint() {
|
||||
return request.get('/api/admin/alert/statistics/by-point')
|
||||
}
|
||||
@ -14,19 +14,11 @@ export function getMonitoringData(params) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最新数据
|
||||
* @param {Object} params - 查询参数
|
||||
* @param {string} [params.point_id] - 监测点ID
|
||||
* @param {string} [params.indicator_ids] - 指标ID，多个用逗号分隔
|
||||
* @param {string} [params.device_id] - 设备ID
|
||||
* 获取最新数据（无需参数）
|
||||
* @returns {Promise} 返回最新监测数据的Promise对象
|
||||
*/
|
||||
export function getLatestData(params) {
|
||||
// 确保 indicator_ids 是字符串格式
|
||||
const formattedParams = {
|
||||
...params,
|
||||
indicator_ids: Array.isArray(params.indicator_ids) ? params.indicator_ids.join(',') : params.indicator_ids
|
||||
}
|
||||
return request.get('/api/monitoring/data/latest', { params: formattedParams })
|
||||
export function getLatestData() {
|
||||
return request.get('/api/monitoring/data/latest')
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -40,9 +40,7 @@ const getChartData = async () => {
|
||||
const res = await generateChartData({
|
||||
message: "ph柱状图"
|
||||
})
|
||||
console.log('完整的响应数据:', res)
|
||||
if (res.success) {
|
||||
console.log('图表配置数据:', JSON.stringify(res.data.echart_options, null, 2))
|
||||
initChart(res.data)
|
||||
} else {
|
||||
console.error('获取图表数据失败:', res.message)
|
||||
@ -127,7 +125,6 @@ const initChart = (data) => {
|
||||
}]
|
||||
}
|
||||
|
||||
console.log('最终的图表配置:', JSON.stringify(option, null, 2))
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
@ -244,7 +241,6 @@ const getDroneInfo = async () => {
|
||||
page_size: 10,
|
||||
device_type: '10001'
|
||||
})
|
||||
console.log('获取设备列表响应:', res)
|
||||
|
||||
if (res.code === 200) {
|
||||
// 找到第一个在线的设备
|
||||
|
||||
@ -1,15 +1,90 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { getAlertStatisticsTrend } from '@/api/monitor/alert'
|
||||
|
||||
let chart = null
|
||||
const chartRef = ref(null)
|
||||
|
||||
// 获取预警趋势数据
|
||||
const fetchTrendData = async () => {
|
||||
try {
|
||||
const res = await getAlertStatisticsTrend()
|
||||
if (res.success && res.data && res.data.length > 0) {
|
||||
const latestData = res.data[0]
|
||||
|
||||
// 生成时间点（前4个小时到当前）
|
||||
const now = new Date()
|
||||
const timePoints = Array.from({ length: 5 }, (_, i) => {
|
||||
const time = new Date(now)
|
||||
time.setHours(time.getHours() - (4 - i))
|
||||
return time.getHours() + ':00'
|
||||
})
|
||||
|
||||
// 构造趋势数据
|
||||
const severeValue = Number(latestData.severe_alerts) || 0
|
||||
const moderateValue = Number(latestData.moderate_alerts) || 0
|
||||
const minorValue = Number(latestData.minor_alerts) || 0
|
||||
|
||||
// 生成模拟的历史数据（实际项目中应该使用后端返回的历史数据）
|
||||
const severeData = [
|
||||
Math.floor(severeValue * 0.4),
|
||||
Math.floor(severeValue * 0.6),
|
||||
Math.floor(severeValue * 0.8),
|
||||
Math.floor(severeValue * 0.9),
|
||||
severeValue
|
||||
]
|
||||
const moderateData = [
|
||||
Math.floor(moderateValue * 0.3),
|
||||
Math.floor(moderateValue * 0.5),
|
||||
Math.floor(moderateValue * 0.7),
|
||||
Math.floor(moderateValue * 0.9),
|
||||
moderateValue
|
||||
]
|
||||
const minorData = [
|
||||
Math.floor(minorValue * 0.2),
|
||||
Math.floor(minorValue * 0.4),
|
||||
Math.floor(minorValue * 0.6),
|
||||
Math.floor(minorValue * 0.8),
|
||||
minorValue
|
||||
]
|
||||
|
||||
// 更新图表数据
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: timePoints
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '严重',
|
||||
data: severeData
|
||||
},
|
||||
{
|
||||
name: '中等',
|
||||
data: moderateData
|
||||
},
|
||||
{
|
||||
name: '轻微',
|
||||
data: minorData
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取预警趋势数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
const initChart = async () => {
|
||||
await nextTick()
|
||||
if (!chartRef.value) return
|
||||
|
||||
// 如果已存在实例，先销毁
|
||||
if (chart) {
|
||||
chart.dispose()
|
||||
}
|
||||
|
||||
chart = echarts.init(chartRef.value)
|
||||
|
||||
const option = {
|
||||
@ -17,10 +92,17 @@ const initChart = () => {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
type: 'line'
|
||||
},
|
||||
formatter: function(params) {
|
||||
let total = 0
|
||||
let result = `${params[0].axisValue}<br/>`
|
||||
params.forEach(item => {
|
||||
total += item.value
|
||||
result += `${item.marker} ${item.seriesName}：${item.value}次<br/>`
|
||||
})
|
||||
result += `总计：${total}次`
|
||||
return result
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
@ -48,12 +130,12 @@ const initChart = () => {
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
rotate: 30
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '预警数量',
|
||||
name: '数量',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
},
|
||||
@ -75,108 +157,96 @@ const initChart = () => {
|
||||
{
|
||||
name: '严重',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 2,
|
||||
color: '#F56C6C'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F56C6C'
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(245, 108, 108, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(245, 108, 108, 0.1)' }
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(245, 108, 108, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(245, 108, 108, 0.3)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '中等',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 2,
|
||||
color: '#E6A23C'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#E6A23C'
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(230, 162, 60, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(230, 162, 60, 0.1)' }
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(230, 162, 60, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(230, 162, 60, 0.3)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '轻微',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
width: 2,
|
||||
color: '#67C23A'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#67C23A'
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(103, 194, 58, 0.8)' },
|
||||
{ offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(103, 194, 58, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(103, 194, 58, 0.3)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
// 获取预警趋势数据
|
||||
const fetchTrendData = async () => {
|
||||
try {
|
||||
const res = await getAlertStatisticsTrend()
|
||||
if (res.success && res.data) {
|
||||
const { dates, severe, moderate, minor } = res.data
|
||||
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: dates
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '严重',
|
||||
data: severe
|
||||
},
|
||||
{
|
||||
name: '中等',
|
||||
data: moderate
|
||||
},
|
||||
{
|
||||
name: '轻微',
|
||||
data: minor
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取预警趋势数据失败:', error)
|
||||
}
|
||||
return chart
|
||||
}
|
||||
|
||||
// 自动刷新数据
|
||||
let timer = null
|
||||
const startAutoRefresh = () => {
|
||||
fetchTrendData()
|
||||
const startAutoRefresh = async () => {
|
||||
await initChart()
|
||||
await fetchTrendData()
|
||||
timer = setInterval(fetchTrendData, 60000) // 每分钟更新一次
|
||||
}
|
||||
|
||||
@ -186,7 +256,6 @@ const handleResize = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
startAutoRefresh()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { getLatestData } from '@/api/monitoring'
|
||||
|
||||
@ -7,143 +7,225 @@ import { getLatestData } from '@/api/monitoring'
|
||||
let chart = null
|
||||
const chartRef = ref(null)
|
||||
|
||||
// 指标选项
|
||||
const indicatorOptions = [
|
||||
{ label: '水温', unit: '°C', threshold: { min: 15, max: 30 } },
|
||||
{ label: 'pH值', unit: '', threshold: { min: 6.5, max: 8.5 } },
|
||||
{ label: '溶解氧', unit: 'mg/L', threshold: { min: 5, max: 9 } },
|
||||
{ label: '浊度', unit: 'NTU', threshold: { min: 0, max: 10 } }
|
||||
]
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return
|
||||
|
||||
chart = echarts.init(chartRef.value)
|
||||
chart.setOption({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
left: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
interval: 0
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
// 更新图表数据
|
||||
const updateChart = async () => {
|
||||
if (!chart || !chartRef.value) return
|
||||
// 监测数据
|
||||
const monitoringData = ref([])
|
||||
|
||||
// 获取最新数据
|
||||
const fetchLatestData = async () => {
|
||||
try {
|
||||
const res = await getLatestData({
|
||||
point_id: '1',
|
||||
indicator_ids: '1,2,3,4',
|
||||
device_id: '1'
|
||||
})
|
||||
|
||||
const res = await getLatestData()
|
||||
if (res.success && res.data) {
|
||||
const data = res.data.map(item => {
|
||||
const indicator = indicatorOptions[Number(item.indicator_id) - 1]
|
||||
const value = Number(item.value)
|
||||
const isWarning = value < indicator.threshold.min || value > indicator.threshold.max
|
||||
return {
|
||||
name: indicator.label,
|
||||
value: value,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: isWarning ? '#E6A23C' : '#67C23A' },
|
||||
{ offset: 1, color: isWarning ? '#F56C6C' : '#95D475' }
|
||||
])
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
chart.setOption({
|
||||
xAxis: {
|
||||
data: data.map(item => item.name)
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
label: {
|
||||
formatter: (params) => {
|
||||
const indicator = indicatorOptions[params.dataIndex]
|
||||
return params.value + (indicator.unit || '')
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
monitoringData.value = res.data
|
||||
updateChart()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取最新数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理数据
|
||||
const processedData = computed(() => {
|
||||
// 按监测点分组
|
||||
const pointGroups = {}
|
||||
monitoringData.value.forEach(item => {
|
||||
if (!pointGroups[item.point_name]) {
|
||||
pointGroups[item.point_name] = {
|
||||
point: item.point_name,
|
||||
location: item.location_description,
|
||||
type: item.point_type,
|
||||
indicators: []
|
||||
}
|
||||
}
|
||||
pointGroups[item.point_name].indicators.push({
|
||||
name: item.indicator_name,
|
||||
value: Number(item.value),
|
||||
unit: item.indicator_unit,
|
||||
quality: item.quality_level
|
||||
})
|
||||
})
|
||||
return Object.values(pointGroups)
|
||||
})
|
||||
|
||||
// 获取监测类型颜色
|
||||
const getTypeColor = (type) => {
|
||||
const colors = {
|
||||
water: '#409EFF',
|
||||
air: '#E6A23C',
|
||||
soil: '#67C23A'
|
||||
}
|
||||
return colors[type] || '#409EFF'
|
||||
}
|
||||
|
||||
// 获取质量等级颜色
|
||||
const getQualityColor = (quality) => {
|
||||
const colors = {
|
||||
good: '#67C23A',
|
||||
normal: '#E6A23C',
|
||||
bad: '#F56C6C'
|
||||
}
|
||||
return colors[quality] || '#409EFF'
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
const initChart = async () => {
|
||||
if (!chartRef.value) return
|
||||
|
||||
// 如果已存在实例，先销毁
|
||||
if (chart) {
|
||||
chart.dispose()
|
||||
}
|
||||
|
||||
// 创建新实例
|
||||
chart = echarts.init(chartRef.value)
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: '0%',
|
||||
top: 'middle',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
itemGap: 20,
|
||||
icon: 'circle',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
formatter: function(name) {
|
||||
return name
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
center: ['65%', '50%'],
|
||||
radius: '60%',
|
||||
indicator: [],
|
||||
shape: 'circle',
|
||||
splitNumber: 5,
|
||||
axisName: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: ['rgba(255, 255, 255, 0.02)', 'rgba(255, 255, 255, 0.05)']
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: []
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
return chart
|
||||
}
|
||||
|
||||
// 更新图表数据
|
||||
const updateChart = () => {
|
||||
if (!chart) return
|
||||
|
||||
const points = processedData.value
|
||||
if (points.length === 0) return
|
||||
|
||||
// 获取所有指标名称和最大值
|
||||
const indicators = new Set()
|
||||
const maxValues = {}
|
||||
points.forEach(point => {
|
||||
point.indicators.forEach(indicator => {
|
||||
indicators.add(indicator.name)
|
||||
if (!maxValues[indicator.name] || maxValues[indicator.name] < indicator.value) {
|
||||
maxValues[indicator.name] = indicator.value
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 设置雷达图的指示器
|
||||
const radarIndicators = Array.from(indicators).map(name => ({
|
||||
name: name,
|
||||
max: Math.ceil(maxValues[name] * 1.2) // 最大值增加20%的余量
|
||||
}))
|
||||
|
||||
// 生成系列数据
|
||||
const series = [{
|
||||
type: 'radar',
|
||||
data: points.map(point => {
|
||||
const pointType = point.type
|
||||
const colors = {
|
||||
water: ['#409EFF', '#36CE9E'],
|
||||
air: ['#E6A23C', '#F56C6C'],
|
||||
soil: ['#67C23A', '#95D475']
|
||||
}
|
||||
const colorSet = colors[pointType] || colors.water
|
||||
|
||||
return {
|
||||
name: point.point,
|
||||
value: radarIndicators.map(indicator => {
|
||||
const ind = point.indicators.find(i => i.name === indicator.name)
|
||||
return ind ? ind.value : 0
|
||||
}),
|
||||
itemStyle: {
|
||||
color: colorSet[0]
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: colorSet[0] },
|
||||
{ offset: 1, color: colorSet[1] }
|
||||
]),
|
||||
opacity: 0.3
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 4
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}]
|
||||
|
||||
chart.setOption({
|
||||
legend: {
|
||||
data: points.map(item => item.point)
|
||||
},
|
||||
radar: {
|
||||
indicator: radarIndicators
|
||||
},
|
||||
series: series
|
||||
})
|
||||
}
|
||||
|
||||
// 定时更新数据
|
||||
let timer = null
|
||||
const startAutoRefresh = () => {
|
||||
updateChart()
|
||||
timer = setInterval(updateChart, 60000) // 每分钟更新一次
|
||||
const startAutoRefresh = async () => {
|
||||
await fetchLatestData()
|
||||
timer = setInterval(fetchLatestData, 60000) // 每分钟更新一次
|
||||
}
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
chart?.resize()
|
||||
if (chart) {
|
||||
chart.resize()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -156,8 +238,11 @@ onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
if (chart) {
|
||||
chart.dispose()
|
||||
chart = null
|
||||
}
|
||||
window.removeEventListener('resize', handleResize)
|
||||
chart?.dispose()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -182,8 +267,12 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
background: rgba(6, 30, 93, 0.5);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(63, 167, 221, 0.2);
|
||||
|
||||
.card-header {
|
||||
flex: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -221,7 +310,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: calc(100% - 60px);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
.chart-item {
|
||||
height: 100%;
|
||||
|
||||
@ -1,241 +1,113 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { getAlertStatisticsOverview } from '@/api/monitor/alert'
|
||||
import { getAlertStatisticsByPoint } from '@/api/monitor/alert'
|
||||
|
||||
// 预警数据
|
||||
const alertData = ref({
|
||||
water_quality: {
|
||||
name: '水质预警',
|
||||
value: [],
|
||||
level: '正常',
|
||||
color: '#67C23A',
|
||||
count: 0
|
||||
},
|
||||
air_quality: {
|
||||
name: '空气质量预警',
|
||||
value: [],
|
||||
level: '正常',
|
||||
color: '#409EFF',
|
||||
count: 0
|
||||
},
|
||||
ecosystem: {
|
||||
name: '生态系统预警',
|
||||
value: [],
|
||||
level: '正常',
|
||||
color: '#E6A23C',
|
||||
count: 0
|
||||
},
|
||||
weather: {
|
||||
name: '气象预警',
|
||||
value: [],
|
||||
level: '正常',
|
||||
color: '#909399',
|
||||
count: 0
|
||||
const alertData = ref([])
|
||||
|
||||
// 获取监测点类型名称
|
||||
const getPointTypeName = (type) => {
|
||||
const typeMap = {
|
||||
water: '水质',
|
||||
soil: '土壤',
|
||||
air: '空气'
|
||||
}
|
||||
})
|
||||
|
||||
const timeData = ref([])
|
||||
|
||||
let chart = null
|
||||
|
||||
// 初始化时间数据
|
||||
const initTimeData = () => {
|
||||
const now = new Date()
|
||||
const times = []
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
const time = new Date(now - i * 3600 * 1000)
|
||||
times.push(time.getHours() + ':00')
|
||||
}
|
||||
timeData.value = times
|
||||
return typeMap[type] || '未知'
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById('ecoChart')
|
||||
if (!chartDom) return
|
||||
|
||||
chart = echarts.init(chartDom)
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: Object.values(alertData.value).map(item => item.name),
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
top: 0
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '25%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: timeData.value,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '预警次数',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
}
|
||||
},
|
||||
series: Object.values(alertData.value).map(item => ({
|
||||
name: item.name,
|
||||
type: 'line',
|
||||
data: item.value,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: item.color
|
||||
},
|
||||
itemStyle: {
|
||||
color: item.color,
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color },
|
||||
{ offset: 1, color: 'rgba(0,0,0,0.1)' }
|
||||
])
|
||||
}
|
||||
}))
|
||||
// 获取预警等级名称
|
||||
const getAlertLevelName = (level) => {
|
||||
if (!level) return '正常'
|
||||
const levelMap = {
|
||||
1: '轻微',
|
||||
2: '中等',
|
||||
3: '严重'
|
||||
}
|
||||
return levelMap[level] || '未知'
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
// 获取预警等级样式
|
||||
const getAlertLevelStyle = (level) => {
|
||||
const styleMap = {
|
||||
0: '#67C23A',
|
||||
1: '#E6A23C',
|
||||
2: '#F56C6C',
|
||||
3: '#F53F3F'
|
||||
}
|
||||
return styleMap[level] || '#909399'
|
||||
}
|
||||
|
||||
// 获取监测类型样式
|
||||
const getPointTypeStyle = (type) => {
|
||||
const styleMap = {
|
||||
water: '#409EFF',
|
||||
soil: '#67C23A',
|
||||
air: '#909399'
|
||||
}
|
||||
return styleMap[type] || '#909399'
|
||||
}
|
||||
|
||||
// 获取预警统计数据
|
||||
const fetchAlertData = async () => {
|
||||
try {
|
||||
const res = await getAlertStatisticsOverview()
|
||||
const res = await getAlertStatisticsByPoint()
|
||||
if (res.success && res.data) {
|
||||
// 更新各类预警的数量和状态
|
||||
Object.keys(alertData.value).forEach(key => {
|
||||
if (res.data[key]) {
|
||||
alertData.value[key].count = res.data[key].total || 0
|
||||
alertData.value[key].level = getAlertLevel(res.data[key].total || 0)
|
||||
alertData.value[key].color = getAlertColor(res.data[key].total || 0)
|
||||
|
||||
// 更新图表数据
|
||||
alertData.value[key].value = res.data[key].hourly_counts || Array(7).fill(0)
|
||||
}
|
||||
})
|
||||
|
||||
// 更新图表
|
||||
updateChart()
|
||||
alertData.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取预警统计数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取预警等级
|
||||
const getAlertLevel = (count) => {
|
||||
if (count === 0) return '正常'
|
||||
if (count < 3) return '轻微'
|
||||
if (count < 5) return '中等'
|
||||
return '严重'
|
||||
}
|
||||
|
||||
// 获取预警颜色
|
||||
const getAlertColor = (count) => {
|
||||
if (count === 0) return '#67C23A'
|
||||
if (count < 3) return '#E6A23C'
|
||||
if (count < 5) return '#F56C6C'
|
||||
return '#F56C6C'
|
||||
}
|
||||
|
||||
// 更新图表
|
||||
const updateChart = () => {
|
||||
if (!chart) return
|
||||
|
||||
chart.setOption({
|
||||
series: Object.values(alertData.value).map(item => ({
|
||||
name: item.name,
|
||||
data: item.value
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
// 自动刷新数据
|
||||
let timer = null
|
||||
const startAutoRefresh = async () => {
|
||||
await fetchAlertData()
|
||||
timer = setInterval(fetchAlertData, 60000) // 每分钟更新一次
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initTimeData()
|
||||
initChart()
|
||||
fetchAlertData()
|
||||
// 每分钟更新一次数据
|
||||
timer = setInterval(fetchAlertData, 60000)
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', () => {
|
||||
chart && chart.resize()
|
||||
})
|
||||
startAutoRefresh()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
if (chart) {
|
||||
chart.dispose()
|
||||
chart = null
|
||||
}
|
||||
window.removeEventListener('resize', () => {
|
||||
chart && chart.resize()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="top-card">
|
||||
<div class="card-header">
|
||||
<div class="title">预警监测</div>
|
||||
<div class="title">监测点预警统计</div>
|
||||
<div class="update-time">实时监测中</div>
|
||||
</div>
|
||||
|
||||
<div id="ecoChart" class="chart-container"></div>
|
||||
|
||||
<div class="indicators-list">
|
||||
<div
|
||||
v-for="(item, key) in alertData"
|
||||
:key="key"
|
||||
class="indicator-item"
|
||||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="value" :style="{ color: item.color }">{{ item.count }}</span>
|
||||
<span class="level" :style="{ background: item.color }">{{ item.level }}</span>
|
||||
<div class="scroll-container">
|
||||
<div class="header">
|
||||
<div class="point">监测点</div>
|
||||
<div class="location">位置描述</div>
|
||||
<div class="type no-wrap">监测类型</div>
|
||||
<div class="alert no-wrap">预警等级</div>
|
||||
</div>
|
||||
<div class="scroll-body">
|
||||
<div class="scroll-list">
|
||||
<div
|
||||
v-for="(item, index) in [...alertData, ...alertData]"
|
||||
:key="index + Math.random()"
|
||||
class="scroll-item"
|
||||
>
|
||||
<div class="point">{{ item.point_name }}</div>
|
||||
<div class="location">{{ item.location_description }}</div>
|
||||
<div class="type" :style="{ color: getPointTypeStyle(item.point_type) }">
|
||||
{{ getPointTypeName(item.point_type) }}
|
||||
</div>
|
||||
<div class="alert" :style="{ color: getAlertLevelStyle(item.alert_level) }">
|
||||
{{ getAlertLevelName(item.alert_level) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -248,12 +120,16 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
background: rgba(6, 30, 93, 0.5);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(63, 167, 221, 0.2);
|
||||
|
||||
.card-header {
|
||||
flex: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
@ -286,55 +162,134 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 140px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.indicators-list {
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
background: rgba(0, 24, 75, 0.3);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(63, 167, 221, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
flex-direction: column;
|
||||
|
||||
.indicator-item {
|
||||
.header {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(to right, rgba(0, 24, 75, 0.8), rgba(0, 38, 123, 0.5));
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgba(63, 167, 221, 0.2);
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 70%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
.point {
|
||||
flex: 1.5;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-family: 'Monaco', monospace;
|
||||
.location {
|
||||
flex: 2;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.level {
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
.type {
|
||||
flex: 0.8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert {
|
||||
flex: 0.8;
|
||||
text-align: center;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scroll-list {
|
||||
animation: scrollUp 20s linear infinite;
|
||||
|
||||
&:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(63, 167, 221, 0.1);
|
||||
transition: all 0.3s;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
min-height: 48px;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background: rgba(0, 38, 123, 0.4);
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: rgba(0, 24, 75, 0.3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(63, 167, 221, 0.1);
|
||||
}
|
||||
|
||||
.point {
|
||||
flex: 1.5;
|
||||
padding-right: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.location {
|
||||
flex: 2;
|
||||
padding-right: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.type {
|
||||
flex: 0.8;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alert {
|
||||
flex: 0.8;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.point, .location, .type, .alert {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scrollUp {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,18 +2,22 @@
|
||||
import TopCard from './TopCard.vue'
|
||||
import MiddleCard from './MiddleCard.vue'
|
||||
import BottomCard from './BottomCard.vue'
|
||||
import { Decoration5 } from 'datav-vue3'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="left-panel-container">
|
||||
<div class="panel-item">
|
||||
<TopCard />
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<MiddleCard />
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<BottomCard />
|
||||
<Decoration5 class="top-decoration" />
|
||||
<div class="panels-wrapper">
|
||||
<div class="panel-item">
|
||||
<TopCard />
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<MiddleCard />
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<BottomCard />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -21,17 +25,31 @@ import BottomCard from './BottomCard.vue'
|
||||
<style lang="scss" scoped>
|
||||
.left-panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
|
||||
.panel-item {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
.top-decoration {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panels-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.panel-item {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { getAlertStatisticsOverview } from '@/api/monitor/alert'
|
||||
|
||||
@ -9,74 +9,100 @@ const chartRef = ref(null)
|
||||
// 预警数据
|
||||
const alertData = ref({
|
||||
total: 0,
|
||||
water_quality: {
|
||||
name: '水质预警',
|
||||
level2: {
|
||||
name: '中等预警',
|
||||
total: 0,
|
||||
color: '#36CFFF'
|
||||
color: '#E6A23C',
|
||||
pending: 0,
|
||||
processed: 0,
|
||||
ignored: 0
|
||||
},
|
||||
air_quality: {
|
||||
name: '空气质量预警',
|
||||
level3: {
|
||||
name: '严重预警',
|
||||
total: 0,
|
||||
color: '#FFB72C'
|
||||
},
|
||||
ecosystem: {
|
||||
name: '生态系统预警',
|
||||
total: 0,
|
||||
color: '#4EF568'
|
||||
},
|
||||
weather: {
|
||||
name: '气象预警',
|
||||
total: 0,
|
||||
color: '#FF36D9'
|
||||
color: '#F56C6C',
|
||||
pending: 0,
|
||||
processed: 0,
|
||||
ignored: 0
|
||||
}
|
||||
})
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
const initChart = async () => {
|
||||
await nextTick()
|
||||
if (!chartRef.value) return
|
||||
|
||||
chart = echarts.init(chartRef.value)
|
||||
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '15%',
|
||||
top: '10%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
formatter: function(params) {
|
||||
const data = params[0]
|
||||
return `${data.name}<br/>预警次数：${data.value}<br/>占比：${((data.value / alertData.value.total) * 100).toFixed(1)}%`
|
||||
const groupName = params[0].axisValue
|
||||
let result = `${groupName}<br/>`
|
||||
params.forEach(item => {
|
||||
result += `${item.marker} ${item.seriesName}：${item.value}次<br/>`
|
||||
})
|
||||
return result
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['待处理', '已处理', '已忽略'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
icon: 'roundRect',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
top: '5%'
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '8%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
type: 'category',
|
||||
data: ['严重预警', '中等预警'],
|
||||
axisLine: {
|
||||
show: false
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
interval: 0
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
@ -84,27 +110,74 @@ const initChart = () => {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
fontSize: 14
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '待处理',
|
||||
type: 'bar',
|
||||
barWidth: '40%',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
formatter: function(params) {
|
||||
return params.value + '次'
|
||||
barGap: '30%',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#36CFFF' },
|
||||
{ offset: 1, color: 'rgba(54, 207, 255, 0.3)' }
|
||||
]),
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#36CFFF' },
|
||||
{ offset: 1, color: '#36CFFF' }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: [0, 0]
|
||||
},
|
||||
{
|
||||
name: '已处理',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderRadius: [0, 4, 4, 0]
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#67C23A' },
|
||||
{ offset: 1, color: 'rgba(103, 194, 58, 0.3)' }
|
||||
]),
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
data: []
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#67C23A' },
|
||||
{ offset: 1, color: '#67C23A' }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: [0, 0]
|
||||
},
|
||||
{
|
||||
name: '已忽略',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#909399' },
|
||||
{ offset: 1, color: 'rgba(144, 147, 153, 0.3)' }
|
||||
]),
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#909399' },
|
||||
{ offset: 1, color: '#909399' }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: [0, 0]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -117,39 +190,48 @@ const fetchAlertData = async () => {
|
||||
try {
|
||||
const res = await getAlertStatisticsOverview()
|
||||
if (res.success && res.data) {
|
||||
// 更新总数
|
||||
alertData.value.total = Object.values(res.data).reduce((sum, item) => sum + (item.total || 0), 0)
|
||||
// 更新总数和各级别预警数据
|
||||
let total = 0
|
||||
let level2Data = { pending: 0, processed: 0, ignored: 0 }
|
||||
let level3Data = { pending: 0, processed: 0, ignored: 0 }
|
||||
|
||||
// 更新各类预警数据
|
||||
Object.keys(alertData.value).forEach(key => {
|
||||
if (key !== 'total' && res.data[key]) {
|
||||
alertData.value[key].total = res.data[key].total || 0
|
||||
res.data.forEach(item => {
|
||||
const count = Number(item.total_count) || 0
|
||||
total += count
|
||||
|
||||
if (item.alert_level === 2) {
|
||||
level2Data = {
|
||||
pending: Number(item.pending_count) || 0,
|
||||
processed: Number(item.processed_count) || 0,
|
||||
ignored: Number(item.ignored_count) || 0
|
||||
}
|
||||
} else if (item.alert_level === 3) {
|
||||
level3Data = {
|
||||
pending: Number(item.pending_count) || 0,
|
||||
processed: Number(item.processed_count) || 0,
|
||||
ignored: Number(item.ignored_count) || 0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 处理图表数据
|
||||
const sortedData = Object.entries(alertData.value)
|
||||
.filter(([key]) => key !== 'total')
|
||||
.sort((a, b) => b[1].total - a[1].total)
|
||||
|
||||
const chartData = sortedData.map(([_, item]) => ({
|
||||
name: item.name,
|
||||
value: item.total,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: item.color.replace('FF', '40') },
|
||||
{ offset: 1, color: item.color }
|
||||
])
|
||||
}
|
||||
}))
|
||||
alertData.value.total = total
|
||||
|
||||
// 更新图表数据
|
||||
chart.setOption({
|
||||
yAxis: {
|
||||
data: sortedData.map(([_, item]) => item.name)
|
||||
},
|
||||
series: [{
|
||||
data: chartData
|
||||
}]
|
||||
series: [
|
||||
{
|
||||
name: '待处理',
|
||||
data: [level3Data.pending, level2Data.pending]
|
||||
},
|
||||
{
|
||||
name: '已处理',
|
||||
data: [level3Data.processed, level2Data.processed]
|
||||
},
|
||||
{
|
||||
name: '已忽略',
|
||||
data: [level3Data.ignored, level2Data.ignored]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
@ -159,8 +241,9 @@ const fetchAlertData = async () => {
|
||||
|
||||
// 自动刷新数据
|
||||
let timer = null
|
||||
const startAutoRefresh = () => {
|
||||
fetchAlertData()
|
||||
const startAutoRefresh = async () => {
|
||||
await initChart()
|
||||
await fetchAlertData()
|
||||
timer = setInterval(fetchAlertData, 60000) // 每分钟更新一次
|
||||
}
|
||||
|
||||
@ -170,7 +253,6 @@ const handleResize = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
startAutoRefresh()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
@ -207,8 +289,11 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
background: rgba(6, 30, 93, 0.5);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card-header {
|
||||
flex: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -258,7 +343,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 60px);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { getAlertStatisticsByIndicator } from '@/api/monitor/alert'
|
||||
|
||||
@ -7,7 +7,8 @@ let chart = null
|
||||
const chartRef = ref(null)
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
const initChart = async () => {
|
||||
await nextTick()
|
||||
if (!chartRef.value) return
|
||||
|
||||
chart = echarts.init(chartRef.value)
|
||||
@ -15,54 +16,91 @@ const initChart = () => {
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
formatter: function(params) {
|
||||
return `${params.name}<br/>预警次数：${params.value}<br/>占比：${params.percent}%`
|
||||
const item = params[0]
|
||||
return `${item.name}<br/>
|
||||
预警次数：${item.value}次<br/>
|
||||
预警天数：${item.data.days}天<br/>
|
||||
日均预警：${item.data.avg.toFixed(2)}次/天`
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
grid: {
|
||||
top: '3%',
|
||||
right: '5%',
|
||||
top: 'middle',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
bottom: '3%',
|
||||
left: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '预警次数',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 20]
|
||||
},
|
||||
formatter: (name) => {
|
||||
const data = option.series[0].data
|
||||
const item = data.find(v => v.name === name)
|
||||
return `${name} ${item ? item.value : 0}次`
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
margin: 16
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '指标预警',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['40%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
name: '预警次数',
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.05)',
|
||||
borderRadius: [0, 4, 4, 0]
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: 'rgba(0, 0, 0, 0.2)',
|
||||
borderWidth: 2
|
||||
borderRadius: [0, 4, 4, 0]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{b}\n{d}%',
|
||||
position: 'right',
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
labelLine: {
|
||||
length: 15,
|
||||
length2: 0,
|
||||
maxSurfaceAngle: 80,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
fontSize: 12,
|
||||
formatter: '{c}次'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
@ -77,72 +115,118 @@ const fetchIndicatorData = async () => {
|
||||
try {
|
||||
const res = await getAlertStatisticsByIndicator()
|
||||
if (res.success && res.data) {
|
||||
// 将数据转换为饼图所需格式
|
||||
const chartData = Object.entries(res.data).map(([name, value]) => ({
|
||||
name,
|
||||
value,
|
||||
itemStyle: {
|
||||
color: getRandomColor(name)
|
||||
}
|
||||
})).sort((a, b) => b.value - a.value) // 按数值从大到小排序
|
||||
// 将数据转换为图表所需格式
|
||||
const chartData = res.data
|
||||
.filter(item => item.indicator_name)
|
||||
.map(item => ({
|
||||
name: item.indicator_name,
|
||||
value: Number(item.alert_count) || 0,
|
||||
days: Number(item.alert_days) || 0,
|
||||
avg: Number(item.avg_daily_alerts) || 0,
|
||||
itemStyle: {
|
||||
color: getIndicatorColor(item.indicator_name)
|
||||
}
|
||||
}))
|
||||
.sort((a, b) => b.value - a.value)
|
||||
|
||||
// 更新图表配置
|
||||
chart.setOption({
|
||||
series: [{
|
||||
data: chartData
|
||||
}]
|
||||
yAxis: {
|
||||
data: chartData.map(item => item.name)
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: chartData,
|
||||
markLine: {
|
||||
silent: true,
|
||||
symbol: ['none', 'none'],
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: 'average',
|
||||
name: '平均值',
|
||||
label: {
|
||||
color: '#fff',
|
||||
position: 'start'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
animationDelay: function(idx) {
|
||||
return idx * 100
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取指标预警统计数据失败:', error)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 生成固定的渐变色
|
||||
const getRandomColor = (name) => {
|
||||
// 获取指标颜色
|
||||
const getIndicatorColor = (indicatorName) => {
|
||||
const colors = {
|
||||
'溶解氧': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
'水体pH值': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#36CFFF' },
|
||||
{ offset: 1, color: '#2861F5' }
|
||||
]),
|
||||
'pH值': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#FFB72C' },
|
||||
{ offset: 1, color: '#F5612A' }
|
||||
]),
|
||||
'浊度': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
'溶解氧': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#4EF568' },
|
||||
{ offset: 1, color: '#2AB256' }
|
||||
]),
|
||||
'水温': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
'盐度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#FFB72C' },
|
||||
{ offset: 1, color: '#F5612A' }
|
||||
]),
|
||||
'水温': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#FF36D9' },
|
||||
{ offset: 1, color: '#C92AF5' }
|
||||
]),
|
||||
'氨氮': new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
'浊度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#36FFB0' },
|
||||
{ offset: 1, color: '#2AF5A1' }
|
||||
]),
|
||||
'PM2.5': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#7636FF' },
|
||||
{ offset: 1, color: '#2A3CF5' }
|
||||
]),
|
||||
'氮氧化物': new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#FF7636' },
|
||||
{ offset: 1, color: '#F52A2A' }
|
||||
])
|
||||
}
|
||||
|
||||
return colors[name] || new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#7636FF' },
|
||||
{ offset: 1, color: '#2A3CF5' }
|
||||
return colors[indicatorName] || new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||||
{ offset: 0, color: '#36CFFF' },
|
||||
{ offset: 1, color: '#2861F5' }
|
||||
])
|
||||
}
|
||||
|
||||
// 自动刷新数据
|
||||
let timer = null
|
||||
const startAutoRefresh = () => {
|
||||
fetchIndicatorData()
|
||||
timer = setInterval(fetchIndicatorData, 60000) // 每分钟更新一次
|
||||
const startAutoRefresh = async () => {
|
||||
await initChart()
|
||||
if (chart) { // 只有在图表成功初始化后才开始获取数据
|
||||
await fetchIndicatorData()
|
||||
timer = setInterval(fetchIndicatorData, 60000) // 每分钟更新一次
|
||||
}
|
||||
}
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
chart?.resize()
|
||||
if (chart) {
|
||||
chart.resize()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
startAutoRefresh()
|
||||
// 确保在组件挂载后延迟一点时间再初始化
|
||||
setTimeout(() => {
|
||||
startAutoRefresh()
|
||||
}, 100)
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
@ -175,8 +259,11 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
background: rgba(6, 30, 93, 0.5);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card-header {
|
||||
flex: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -214,7 +301,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 60px);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { getAlertStatisticsByRule } from '@/api/monitor/alert'
|
||||
|
||||
@ -10,7 +10,8 @@ const chartRef = ref(null)
|
||||
const ruleAlerts = ref([])
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
const initChart = async () => {
|
||||
await nextTick()
|
||||
if (!chartRef.value) return
|
||||
|
||||
chart = echarts.init(chartRef.value)
|
||||
@ -19,24 +20,62 @@ const initChart = () => {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
formatter: function(params) {
|
||||
let result = `${params[0].name}<br/>`
|
||||
params.forEach(item => {
|
||||
result += `${item.marker} ${item.seriesName}：${item.value}次<br/>`
|
||||
})
|
||||
return result
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '10%',
|
||||
legend: {
|
||||
data: ['已处理', '待处理'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
top: 0,
|
||||
right: '5%',
|
||||
bottom: '10%',
|
||||
left: '15%',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: false
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
interval: 0,
|
||||
rotate: 45,
|
||||
formatter: function(value) {
|
||||
if (value.length > 8) {
|
||||
return value.substring(0, 8) + '...'
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '预警数量',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -44,41 +83,69 @@ const initChart = () => {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.7)'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '预警次数',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
borderRadius: [0, 4, 4, 0]
|
||||
name: '已处理',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#4EF568'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#fff',
|
||||
formatter: '{c}次'
|
||||
}
|
||||
itemStyle: {
|
||||
color: '#4EF568'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(78, 245, 104, 0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(42, 178, 86, 0.1)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '待处理',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#FFB72C'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FFB72C'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 183, 44, 0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(245, 97, 42, 0.1)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -92,29 +159,44 @@ const fetchRuleAlertData = async () => {
|
||||
const res = await getAlertStatisticsByRule()
|
||||
if (res.success && res.data) {
|
||||
// 转换数据格式并排序
|
||||
const sortedData = Object.entries(res.data)
|
||||
.map(([name, value]) => ({ name, value }))
|
||||
.sort((a, b) => b.value - a.value)
|
||||
const sortedData = res.data
|
||||
.sort((a, b) => b.total_alerts - a.total_alerts)
|
||||
.slice(0, 6) // 只显示前6个规则
|
||||
|
||||
// 构建数据
|
||||
const xAxisData = sortedData.map(item => item.rule_name)
|
||||
const processedData = sortedData.map(item => {
|
||||
const total = Number(item.total_alerts) || 0
|
||||
const pending = Number(item.pending_count) || 0
|
||||
return total - pending
|
||||
})
|
||||
const pendingData = sortedData.map(item => Number(item.pending_count) || 0)
|
||||
|
||||
// 更新图表数据
|
||||
chart.setOption({
|
||||
yAxis: {
|
||||
data: sortedData.map(item => item.name)
|
||||
xAxis: {
|
||||
data: xAxisData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: sortedData.map(item => ({
|
||||
value: item.value,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: 'rgba(54, 207, 255, 0.2)' },
|
||||
{ offset: 1, color: '#36CFFF' }
|
||||
])
|
||||
}
|
||||
}))
|
||||
name: '已处理',
|
||||
data: processedData
|
||||
},
|
||||
{
|
||||
name: '待处理',
|
||||
data: pendingData
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 添加动画效果
|
||||
chart.setOption({
|
||||
series: chart.getOption().series.map(series => ({
|
||||
...series,
|
||||
animationDuration: 1000,
|
||||
animationEasing: 'cubicOut'
|
||||
}))
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取规则预警统计数据失败:', error)
|
||||
@ -123,8 +205,9 @@ const fetchRuleAlertData = async () => {
|
||||
|
||||
// 自动刷新数据
|
||||
let timer = null
|
||||
const startAutoRefresh = () => {
|
||||
fetchRuleAlertData()
|
||||
const startAutoRefresh = async () => {
|
||||
await initChart()
|
||||
await fetchRuleAlertData()
|
||||
timer = setInterval(fetchRuleAlertData, 60000) // 每分钟更新一次
|
||||
}
|
||||
|
||||
@ -134,7 +217,6 @@ const handleResize = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
startAutoRefresh()
|
||||
window.addEventListener('resize', handleResize)
|
||||
})
|
||||
@ -168,8 +250,11 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
background: rgba(6, 30, 93, 0.5);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card-header {
|
||||
flex: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -207,7 +292,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 60px);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,18 +2,22 @@
|
||||
import TopCard from './TopCard.vue'
|
||||
import MiddleCard from './MiddleCard.vue'
|
||||
import BottomCard from './BottomCard.vue'
|
||||
import { Decoration5 } from 'datav-vue3'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="right-panel-container">
|
||||
<div class="panel-item">
|
||||
<TopCard />
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<MiddleCard />
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<BottomCard />
|
||||
<Decoration5 class="top-decoration" />
|
||||
<div class="panels-wrapper">
|
||||
<div class="panel-item">
|
||||
<TopCard />
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<MiddleCard />
|
||||
</div>
|
||||
<div class="panel-item">
|
||||
<BottomCard />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -21,17 +25,31 @@ import BottomCard from './BottomCard.vue'
|
||||
<style lang="scss" scoped>
|
||||
.right-panel-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
|
||||
.panel-item {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
.top-decoration {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.panels-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
.panel-item {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +1,10 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import LeftPanel from './components/LeftPanel/index.vue'
|
||||
import CenterPanel from './components/CenterPanel/index.vue'
|
||||
import RightPanel from './components/RightPanel/index.vue'
|
||||
import { BorderBox1, Decoration1 } from 'datav-vue3'
|
||||
import { BorderBox1, Decoration1, Decoration10, Decoration8 } from 'datav-vue3'
|
||||
|
||||
const router = useRouter();
|
||||
const isFullscreen = ref(false);
|
||||
const isPopupWindow = ref(!!window.opener);
|
||||
const currentTime = ref('');
|
||||
|
||||
// 更新时间
|
||||
@ -26,42 +22,13 @@ const updateTime = () => {
|
||||
// 定时器
|
||||
let timer = null;
|
||||
|
||||
const handleFullScreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
isFullscreen.value = true;
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
isFullscreen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (isPopupWindow.value) {
|
||||
window.close();
|
||||
} else {
|
||||
router.push("/dashboard");
|
||||
}
|
||||
};
|
||||
|
||||
// 监听ESC退出全屏
|
||||
const handleFullscreenChange = () => {
|
||||
isFullscreen.value = !!document.fullscreenElement;
|
||||
};
|
||||
|
||||
// 打开新窗口
|
||||
onMounted(() => {
|
||||
document.addEventListener("fullscreenchange", handleFullscreenChange);
|
||||
if (isPopupWindow.value) {
|
||||
handleFullScreen();
|
||||
}
|
||||
// 启动时间更新
|
||||
updateTime();
|
||||
timer = setInterval(updateTime, 1000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
||||
// 清除定时器
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
@ -74,16 +41,8 @@ onUnmounted(() => {
|
||||
<BorderBox1>
|
||||
<div class="screen-header">
|
||||
<Decoration1 class="header-decoration" />
|
||||
<div class="header-title">智慧湿地生态监测大屏</div>
|
||||
<div class="header-title">AI智慧湿地生态监测大屏</div>
|
||||
<div class="header-time">{{ currentTime }}</div>
|
||||
<div class="header-right">
|
||||
<el-button type="default" @click="handleClose" class="mr-10">
|
||||
{{ isPopupWindow ? "关闭窗口" : "返回" }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleFullScreen">
|
||||
{{ isFullscreen ? "退出全屏" : "全屏显示" }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screen-content">
|
||||
@ -156,32 +115,13 @@ onUnmounted(() => {
|
||||
|
||||
.header-time {
|
||||
position: absolute;
|
||||
right: 240px;
|
||||
right: 20px;
|
||||
top: 65%;
|
||||
font-family: 'Monaco', monospace;
|
||||
font-size: 20px;
|
||||
color: #3fa7dd;
|
||||
text-shadow: 0 0 10px rgba(1, 153, 209, .5);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
|
||||
:deep(.el-button) {
|
||||
background: rgba(1, 153, 209, 0.2);
|
||||
border-color: rgba(1, 153, 209, 0.5);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: rgba(1, 153, 209, 0.3);
|
||||
border-color: rgba(1, 153, 209, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screen-content {
|
||||
@ -214,8 +154,4 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user