From e661974160bdaf9f7b7ea30dd890b6ae90dd163a Mon Sep 17 00:00:00 2001 From: wzclm <2855471171@qq.com> Date: Wed, 12 Mar 2025 21:04:35 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E5=8F=AF?= =?UTF-8?q?=E8=A7=86=E5=8C=96=E5=A4=A7=E5=B1=8F=E7=9A=84=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LeftPanel/MiddleCard.vue | 122 ++++++++++++------ .../components/RightPanel/MiddleCard.vue | 97 ++++++++++---- .../screen/components/RightPanel/TopCard.vue | 2 +- 3 files changed, 156 insertions(+), 65 deletions(-) diff --git a/src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue b/src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue index abe5cd4..d38c3c7 100644 --- a/src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue +++ b/src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue @@ -92,37 +92,25 @@ const initChart = async () => { 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 - } + trigger: 'item', + formatter: '{b}: {c}' }, radar: { - center: ['65%', '50%'], - radius: '60%', + center: ['50%', '50%'], + radius: '65%', indicator: [], shape: 'circle', - splitNumber: 5, + splitNumber: 8, axisName: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 12 }, splitLine: { lineStyle: { - color: 'rgba(255, 255, 255, 0.1)' + color: 'rgba(255, 255, 255, 0.2)', + width: 2, + type: 'dashed', + dashOffset: 0 } }, splitArea: { @@ -132,8 +120,9 @@ const initChart = async () => { } }, axisLine: { + show: true, lineStyle: { - color: 'rgba(255, 255, 255, 0.1)' + color: 'rgba(255, 255, 255, 0.3)' } } }, @@ -142,6 +131,27 @@ const initChart = async () => { chart.setOption(option) + // 添加动画效果 + let angle = 0 + let dashOffset = 0 + const animate = () => { + angle = (angle + 0.5) % 360 + dashOffset = (dashOffset + 1) % 20 + + chart.setOption({ + radar: { + startAngle: angle, + splitLine: { + lineStyle: { + dashOffset: -dashOffset + } + } + } + }) + requestAnimationFrame(animate) + } + animate() + // 确保图表正确渲染 setTimeout(() => { if (chart) { @@ -183,14 +193,18 @@ const updateChart = () => { // 生成系列数据 const series = [{ type: 'radar', + animation: true, + animationDuration: 2000, + animationEasing: 'quadraticInOut', data: points.map(point => { const pointType = point.type const colors = { - water: ['#409EFF', '#36CE9E'], - air: ['#E6A23C', '#F56C6C'], - soil: ['#67C23A', '#95D475'] + water: ['rgba(64, 158, 255, 1)', 'rgba(54, 206, 158, 0.1)'], + air: ['rgba(230, 162, 60, 1)', 'rgba(245, 108, 108, 0.1)'], + soil: ['rgba(103, 194, 58, 1)', 'rgba(149, 212, 117, 0.1)'], + default: ['rgba(64, 158, 255, 1)', 'rgba(54, 206, 158, 0.1)'] } - const colorSet = colors[pointType] || colors.water + const colorSet = colors[pointType] || colors.default return { name: point.point, @@ -198,27 +212,36 @@ const updateChart = () => { const ind = point.indicators.find(i => i.name === indicator.name) return ind ? ind.value : 0 }), + symbol: 'circle', + symbolSize: 6, itemStyle: { - color: colorSet[0] + color: colorSet[0], + borderColor: '#fff', + borderWidth: 2, + shadowColor: colorSet[0], + shadowBlur: 10 + }, + lineStyle: { + color: colorSet[0], + width: 2, + type: [5, 10], + shadowColor: colorSet[0], + shadowBlur: 5 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: colorSet[0] }, { offset: 1, color: colorSet[1] } ]), - opacity: 0.3 + opacity: 0.5 }, - lineStyle: { - width: 2 - }, - symbol: 'circle', - symbolSize: 6, emphasis: { - lineStyle: { - width: 4 + scale: true, + itemStyle: { + shadowBlur: 20 }, areaStyle: { - opacity: 0.5 + opacity: 0.8 } } } @@ -226,14 +249,34 @@ const updateChart = () => { }] chart.setOption({ - legend: { - data: points.map(item => item.point) - }, radar: { indicator: radarIndicators }, series: series }) + + // 添加呼吸动画 + let breatheEffect = 0 + const animate = () => { + breatheEffect = (breatheEffect + 1) % 100 + const opacity = 0.3 + Math.sin(breatheEffect * Math.PI / 50) * 0.2 + + series[0].data.forEach((item, index) => { + chart.setOption({ + series: [{ + data: series[0].data.map((dataItem, i) => ({ + ...dataItem, + areaStyle: { + ...dataItem.areaStyle, + opacity: i === index ? opacity : 0.3 + } + })) + }] + }) + }) + requestAnimationFrame(animate) + } + animate() } // 定时更新数据 @@ -369,6 +412,7 @@ onUnmounted(() => { background: rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 12px; + position: relative; .chart { height: 100%; diff --git a/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue b/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue index 04e1347..80112f8 100644 --- a/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue +++ b/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue @@ -35,9 +35,9 @@ const initChart = async () => { }, grid: { top: '3%', - right: '5%', + right: '15%', bottom: '3%', - left: '15%', + left: '5%', containLabel: true }, xAxis: { @@ -115,7 +115,7 @@ const fetchIndicatorData = async () => { try { const res = await getAlertStatisticsByIndicator() if (res.success && res.data) { - // 将数据转换为图表所需格式 + // 将数据转换为图表所需格式，并限制显示数量为6个 const chartData = res.data .filter(item => item.indicator_name) .map(item => ({ @@ -128,20 +128,45 @@ const fetchIndicatorData = async () => { } })) .sort((a, b) => b.value - a.value) + .slice(0, 6) // 只显示前6个数据 // 更新图表配置 chart.setOption({ + grid: { + top: '8%', + right: '20%', + bottom: '8%', + left: '0%', + containLabel: true + }, yAxis: { - data: chartData.map(item => item.name) + data: chartData.map(item => item.name), + axisLabel: { + margin: 20, + fontSize: 14 + } }, series: [ { data: chartData, + barWidth: 12, + itemStyle: { + borderRadius: [0, 4, 4, 0] + }, + label: { + show: true, + position: 'right', + distance: 15, + color: '#fff', + fontSize: 14, + formatter: '{c}次' + }, markLine: { silent: true, symbol: ['none', 'none'], lineStyle: { - color: 'rgba(255, 255, 255, 0.3)' + color: 'rgba(255, 255, 255, 0.2)', + type: [5, 10] }, data: [ { @@ -153,55 +178,77 @@ const fetchIndicatorData = async () => { } } ] - }, - animationDelay: function(idx) { - return idx * 100 } } ] }) + + // 添加渐变动画效果 + let currentIndex = 0 + const animate = () => { + if (currentIndex >= chartData.length) { + currentIndex = 0 + } + + chart.dispatchAction({ + type: 'highlight', + seriesIndex: 0, + dataIndex: currentIndex + }) + + // 取消上一个高亮 + const lastIndex = (currentIndex - 1 + chartData.length) % chartData.length + chart.dispatchAction({ + type: 'downplay', + seriesIndex: 0, + dataIndex: lastIndex + }) + + currentIndex++ + setTimeout(animate, 2000) + } + animate() } } catch (error) { console.error('获取指标预警统计数据失败:', error) } - } // 获取指标颜色 const getIndicatorColor = (indicatorName) => { const colors = { '水体pH值': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#36CFFF' }, - { offset: 1, color: '#2861F5' } + { offset: 0, color: 'rgba(54, 207, 255, 1)' }, + { offset: 1, color: 'rgba(40, 97, 245, 0.8)' } ]), '溶解氧': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#4EF568' }, - { offset: 1, color: '#2AB256' } + { offset: 0, color: 'rgba(78, 245, 104, 1)' }, + { offset: 1, color: 'rgba(42, 178, 86, 0.8)' } ]), '盐度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#FFB72C' }, - { offset: 1, color: '#F5612A' } + { offset: 0, color: 'rgba(255, 183, 44, 1)' }, + { offset: 1, color: 'rgba(245, 97, 42, 0.8)' } ]), '水温': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#FF36D9' }, - { offset: 1, color: '#C92AF5' } + { offset: 0, color: 'rgba(255, 54, 217, 1)' }, + { offset: 1, color: 'rgba(201, 42, 245, 0.8)' } ]), '浊度': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#36FFB0' }, - { offset: 1, color: '#2AF5A1' } + { offset: 0, color: 'rgba(54, 255, 176, 1)' }, + { offset: 1, color: 'rgba(42, 245, 161, 0.8)' } ]), 'PM2.5': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#7636FF' }, - { offset: 1, color: '#2A3CF5' } + { offset: 0, color: 'rgba(118, 54, 255, 1)' }, + { offset: 1, color: 'rgba(42, 60, 245, 0.8)' } ]), '氮氧化物': new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#FF7636' }, - { offset: 1, color: '#F52A2A' } + { offset: 0, color: 'rgba(255, 118, 54, 1)' }, + { offset: 1, color: 'rgba(245, 42, 42, 0.8)' } ]) } return colors[indicatorName] || new echarts.graphic.LinearGradient(1, 0, 0, 0, [ - { offset: 0, color: '#36CFFF' }, - { offset: 1, color: '#2861F5' } + { offset: 0, color: 'rgba(54, 207, 255, 1)' }, + { offset: 1, color: 'rgba(40, 97, 245, 0.8)' } ]) } diff --git a/src/views/dashboard/screen/components/RightPanel/TopCard.vue b/src/views/dashboard/screen/components/RightPanel/TopCard.vue index 18b0df6..bd200ab 100644 --- a/src/views/dashboard/screen/components/RightPanel/TopCard.vue +++ b/src/views/dashboard/screen/components/RightPanel/TopCard.vue @@ -40,7 +40,7 @@ const initChart = async () => { fontSize: 12 }, top: 0, - right: '5%', + right: '0%', itemWidth: 12, itemHeight: 12 }, From f081d836af56b207ad46ab1b113e83fa79bbfc3a Mon Sep 17 00:00:00 2001 From: wzclm <2855471171@qq.com> Date: Thu, 13 Mar 2025 09:28:23 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E7=9A=84=E4=B8=80=E4=BA=9BBUG?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AIPatrol/sensor/index.vue | 298 ++------ src/views/dashboard/index.vue | 677 +++++++----------- .../components/RightPanel/BottomCard.vue | 31 +- .../components/RightPanel/MiddleCard.vue | 27 +- 4 files changed, 387 insertions(+), 646 deletions(-) diff --git a/src/views/AIPatrol/sensor/index.vue b/src/views/AIPatrol/sensor/index.vue index fe866ba..52d7197 100644 --- a/src/views/AIPatrol/sensor/index.vue +++ b/src/views/AIPatrol/sensor/index.vue @@ -8,23 +8,7 @@ import { getDeviceList, deleteDevice } from "@/api/device"; const loading = ref(false); // 传感器列表数据 -const sensorList = ref([ - { - id: 1, - device_name: "RK500-13-水质传感器-01", - device_code: "RK500-001", - device_type: 0, - status: 0, - install_location: "湿地区域A", - updated_at: new Date().toISOString(), - data: { - temp: null, - ph: null, - conductivity: null, - turbidity: null, - }, - }, -]); +const sensorList = ref([]); // 分页参数 const pagination = ref({ @@ -34,41 +18,41 @@ const pagination = ref({ }); // 获取传感器列表 -// const getSensorList = async () => { -// loading.value = true; -// try { -// const res = await getDeviceList({ -// page: pagination.value.page, -// page_size: pagination.value.page_size, -// device_type: 0, -// }); -// if (res.success) { -// sensorList.value = res.data.list || []; -// if (res.data.pagination) { -// pagination.value.total = res.data.pagination.total; -// } -// } else { -// ElMessage.error(res.message || "获取传感器列表失败"); -// } -// } catch (error) { -// console.error("获取传感器列表失败：", error); -// ElMessage.error("获取传感器列表失败"); -// } finally { -// loading.value = false; -// } -// }; +const getSensorList = async () => { + loading.value = true; + try { + const res = await getDeviceList({ + page: pagination.value.page, + page_size: pagination.value.page_size, + device_type: 0, // 传感器类型为0 + }); + if (res.success) { + sensorList.value = res.data.list || []; + if (res.data.pagination) { + pagination.value.total = res.data.pagination.total; + } + } else { + ElMessage.error(res.message || "获取传感器列表失败"); + } + } catch (error) { + console.error("获取传感器列表失败：", error); + ElMessage.error("获取传感器列表失败"); + } finally { + loading.value = false; + } +}; // 处理页码改变 const handleCurrentChange = (page) => { pagination.value.page = page; - // getSensorList(); + getSensorList(); }; // 处理每页条数改变 const handleSizeChange = (size) => { pagination.value.page_size = size; pagination.value.page = 1; - // getSensorList(); + getSensorList(); }; // 删除传感器 @@ -80,7 +64,7 @@ const handleDelete = async (id) => { const res = await deleteDevice(id); if (res.success) { ElMessage.success("删除成功"); - // getSensorList(); + getSensorList(); } else { ElMessage.error(res.message || "删除失败"); } @@ -130,17 +114,8 @@ const getTypeInfo = (type) => { // 格式化数据显示 const formatValue = (value, unit = "") => { - if (value === "---") return value; if (value === null || value === undefined) return "暂无数据"; - // 根据不同单位设置不同的小数位数 - if (unit === "°C") { - return `${value.toFixed(1)}${unit}`; - } else if (unit === "%") { - return `${value.toFixed(0)}${unit}`; - } else if (unit === "μS/cm") { - return `${value.toFixed(0)}${unit}`; - } - return `${value.toFixed(0)}${unit}`; + return `${value}${unit}`; }; // 获取传感器类型名称 @@ -152,144 +127,54 @@ const getSensorTypeName = (type, name) => { // 获取传感器数据项 const getSensorDataItems = (sensor) => { - // 如果设备离线，所有数据项显示"---" - if (sensor.status === 0) { - return [{ label: "TDS值", value: "---", unit: "" }]; + if (sensor.device_name.includes("CS616")) { + // 土壤传感器数据项 + return [ + { label: "温度", value: sensor.data?.temp, unit: "°C" }, + { label: "湿度", value: sensor.data?.humi, unit: "%" }, + { label: "土壤湿度", value: sensor.data?.soil_adc, unit: "" }, + { label: "光照强度", value: sensor.data?.light_adc, unit: "" }, + ]; + } else if (sensor.device_name.includes("RK500-13")) { + // 水质传感器数据项 + return [ + { label: "温度", value: sensor.data?.temp, unit: "°C" }, + { label: "湿度", value: sensor.data?.humi, unit: "%" }, + { label: "水质电导率", value: sensor.data?.soil_adc, unit: "μS/cm" }, + { label: "光照强度", value: sensor.data?.light_adc, unit: "" }, + ]; } - - // 设备在线时显示正常数据 - return [{ label: "TDS值", value: sensor.data?.tds, unit: "mg/L" }]; + // 默认数据项 + return [ + { label: "温度", value: sensor.data?.temp, unit: "°C" }, + { label: "湿度", value: sensor.data?.humi, unit: "%" }, + { label: "光照强度", value: sensor.data?.light_adc, unit: "" }, + { label: "传感器值", value: sensor.data?.soil_adc, unit: "" }, + ]; }; -// 添加数据刷新定时器引用 -const dataRefreshTimers = ref({ - h: null, - c: null, - f: null, -}); - // 添加键盘事件处理函数 const handleKeyPress = (event) => { - const key = event.key.toLowerCase(); - - // 处理设备激活 - if (key === "l") { - const isOnline = sensorList.value[0].status === 1; - sensorList.value = sensorList.value.map((sensor) => ({ - ...sensor, - status: isOnline ? 0 : 1, - updated_at: new Date().toISOString(), - data: { - tds: null, - }, - })); - - // 清理所有定时器 - Object.entries(dataRefreshTimers.value).forEach(([timerKey, timer]) => { - if (timer) { - clearInterval(timer); - dataRefreshTimers.value[timerKey] = null; - } - }); - + if (event.key.toLowerCase() === "v") { ElNotification({ - title: isOnline ? "设备离线" : "设备上线", - message: isOnline ? "设备已停止工作" : "设备开始工作", - type: isOnline ? "warning" : "success", - duration: 2000, + title: "设备状态更新", + message: "设备已上线", + type: "success", + position: "top-right", + duration: 3000, }); - return; - } - - // 如果设备离线，不处理监测按键 - if (sensorList.value.some((sensor) => sensor.status === 0)) { - return; - } - - // 定义不同物质的数据模板 - const substanceData = { - h: { - // 海水参考值 (1000-1370) - tds: 1185, - }, - c: { - // 茶水参考值 (200-248) - tds: 224, - }, - f: { - // 芬达参考值 (450-490) - tds: 470, - }, - }; - - if (key === "h" || key === "c" || key === "f") { - // 如果当前按键已经在刷新，则停止刷新 - if (dataRefreshTimers.value[key]) { - clearInterval(dataRefreshTimers.value[key]); - dataRefreshTimers.value[key] = null; - // 停止监测时，清空数据显示为--- - sensorList.value = sensorList.value.map((sensor) => ({ - ...sensor, - data: { - tds: null, - }, - })); - return; - } - - // 先停止其他正在运行的监测 - Object.entries(dataRefreshTimers.value).forEach(([timerKey, timer]) => { - if (timer) { - clearInterval(timer); - dataRefreshTimers.value[timerKey] = null; - } - }); - - // 开始新的数据刷新 - const startData = substanceData[key]; - dataRefreshTimers.value[key] = setInterval(() => { - // 生成随机波动值，根据不同液体设置不同的波动范围 - let randomValue; - switch (key) { - case "h": - // 海水范围：1000-1370 - randomValue = 1000 + Math.random() * 370; - break; - case "c": - // 茶水范围：200-248 - randomValue = 200 + Math.random() * 48; - break; - case "f": - // 芬达范围：450-490 - randomValue = 450 + Math.random() * 40; - break; - } - - // 更新传感器数据 - sensorList.value = sensorList.value.map((sensor) => ({ - ...sensor, - status: 1, - updated_at: new Date().toISOString(), - data: { - tds: randomValue, - }, - })); - }, 1000); // 每秒更新一次 } }; // 组件挂载时添加键盘事件监听 onMounted(() => { + getSensorList(); window.addEventListener("keypress", handleKeyPress); }); // 组件卸载时移除键盘事件监听 onUnmounted(() => { window.removeEventListener("keypress", handleKeyPress); - // 清理所有数据刷新定时器 - Object.values(dataRefreshTimers.value).forEach((timer) => { - if (timer) clearInterval(timer); - }); }); @@ -349,28 +234,9 @@ onUnmounted(() => { v-for="(item, index) in getSensorDataItems(sensor)" :key="index" class="data-item" - style=" - grid-column: 1 / -1; - background: #fff; - padding: 20px 40px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - " > -
- {{ formatValue(item.value, item.unit) }} -
-
- {{ item.label }} -
+
{{ formatValue(item.value, item.unit) }}
+
{{ item.label }}
@@ -383,6 +249,12 @@ onUnmounted(() => { : "暂无数据" }} +
+ 编辑 + 删除 +
@@ -452,6 +324,11 @@ onUnmounted(() => { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } + &.offline { + opacity: 0.8; + background: #f5f7fa; + } + .card-header { padding: 16px 20px; border-bottom: 1px solid #f0f2f5; @@ -545,11 +422,6 @@ onUnmounted(() => { padding: 12px; border-radius: 8px; text-align: center; - height: 76px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; .data-value { font-size: 20px; @@ -557,18 +429,11 @@ onUnmounted(() => { color: #409eff; margin-bottom: 4px; font-family: "DIN Alternate", sans-serif; - transition: all 0.3s ease; - min-height: 30px; - line-height: 30px; - width: 100%; } .data-label { font-size: 12px; color: #909399; - min-height: 18px; - line-height: 18px; - width: 100%; } } } @@ -592,25 +457,10 @@ onUnmounted(() => { font-size: 14px; } } - } - } - &.offline { - opacity: 0.8; - background: #f5f7fa; - - .data-section { - .data-grid { - .data-item { - .data-value { - color: #909399 !important; - font-size: 18px !important; - letter-spacing: 2px; - display: flex; - justify-content: center; - align-items: center; - } - } + .actions { + display: flex; + gap: 12px; } } } diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 573ca28..d02d9a3 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,15 +1,15 @@ @@ -959,64 +883,7 @@ onUnmounted(() => { } } } - - .bottom-stats-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 20px; - margin-top: 40px; - padding-bottom: 20px; - - .stat-card { - background: #fff; - border-radius: 8px; - padding: 16px; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); - - .stat-header { - margin-bottom: 16px; - padding-bottom: 12px; - border-bottom: 1px solid #f0f2f5; - - .stat-title { - font-size: 16px; - font-weight: 500; - color: #303133; - } - } - - .stat-content { - .stat-item { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; - - &:last-child { - margin-bottom: 0; - } - - .label { - color: #909399; - font-size: 14px; - } - - .value { - font-size: 14px; - font-weight: 500; - color: #303133; - - &.good { - color: #67c23a; - } - - &.normal { - color: #e6a23c; - } - } - } - } - } - } } + + diff --git a/src/views/dashboard/screen/components/RightPanel/BottomCard.vue b/src/views/dashboard/screen/components/RightPanel/BottomCard.vue index d3e0691..ad71e38 100644 --- a/src/views/dashboard/screen/components/RightPanel/BottomCard.vue +++ b/src/views/dashboard/screen/components/RightPanel/BottomCard.vue @@ -9,6 +9,14 @@ const chartRef = ref(null) // 预警数据 const alertData = ref({ total: 0, + level1: { + name: '低微预警', + total: 0, + color: '#909399', + pending: 0, + processed: 0, + ignored: 0 + }, level2: { name: '中等预警', total: 0, @@ -75,7 +83,7 @@ const initChart = async () => { }, xAxis: { type: 'category', - data: ['严重预警', '中等预警'], + data: ['严重预警', '中等预警', '低微预警'], axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' @@ -135,7 +143,7 @@ const initChart = async () => { ]) } }, - data: [0, 0] + data: [0, 0, 0] }, { name: '已处理', @@ -156,7 +164,7 @@ const initChart = async () => { ]) } }, - data: [0, 0] + data: [0, 0, 0] }, { name: '已忽略', @@ -177,7 +185,7 @@ const initChart = async () => { ]) } }, - data: [0, 0] + data: [0, 0, 0] } ] } @@ -192,6 +200,7 @@ const fetchAlertData = async () => { if (res.success && res.data) { // 更新总数和各级别预警数据 let total = 0 + let level1Data = { pending: 0, processed: 0, ignored: 0 } let level2Data = { pending: 0, processed: 0, ignored: 0 } let level3Data = { pending: 0, processed: 0, ignored: 0 } @@ -199,7 +208,13 @@ const fetchAlertData = async () => { const count = Number(item.total_count) || 0 total += count - if (item.alert_level === 2) { + if (item.alert_level === 1) { + level1Data = { + pending: Number(item.pending_count) || 0, + processed: Number(item.processed_count) || 0, + ignored: Number(item.ignored_count) || 0 + } + } else if (item.alert_level === 2) { level2Data = { pending: Number(item.pending_count) || 0, processed: Number(item.processed_count) || 0, @@ -221,15 +236,15 @@ const fetchAlertData = async () => { series: [ { name: '待处理', - data: [level3Data.pending, level2Data.pending] + data: [level3Data.pending, level2Data.pending, level1Data.pending] }, { name: '已处理', - data: [level3Data.processed, level2Data.processed] + data: [level3Data.processed, level2Data.processed, level1Data.processed] }, { name: '已忽略', - data: [level3Data.ignored, level2Data.ignored] + data: [level3Data.ignored, level2Data.ignored, level1Data.ignored] } ] }) diff --git a/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue b/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue index 80112f8..cb90cfe 100644 --- a/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue +++ b/src/views/dashboard/screen/components/RightPanel/MiddleCard.vue @@ -34,10 +34,10 @@ const initChart = async () => { } }, grid: { - top: '3%', + top: '8%', right: '15%', - bottom: '3%', - left: '5%', + bottom: '15%', + left: '15%', containLabel: true }, xAxis: { @@ -46,7 +46,7 @@ const initChart = async () => { nameTextStyle: { color: 'rgba(255, 255, 255, 0.7)', fontSize: 12, - padding: [0, 0, 0, 20] + padding: [15, 0, 0, 20] }, axisLine: { show: false @@ -62,7 +62,9 @@ const initChart = async () => { }, axisLabel: { color: 'rgba(255, 255, 255, 0.7)', - fontSize: 12 + fontSize: 12, + margin: 12, + padding: [8, 0, 0, 0] } }, yAxis: { @@ -78,15 +80,21 @@ const initChart = async () => { }, axisLabel: { color: '#fff', - fontSize: 12, - margin: 16 + fontSize: 14, + margin: 20, + formatter: function (value) { + if (value.length > 6) { + return value.substring(0, 6) + '...' + } + return value + } } }, series: [ { name: '预警次数', type: 'bar', - barWidth: 16, + barWidth: 12, showBackground: true, backgroundStyle: { color: 'rgba(255, 255, 255, 0.05)', @@ -98,8 +106,9 @@ const initChart = async () => { label: { show: true, position: 'right', + distance: 15, color: '#fff', - fontSize: 12, + fontSize: 14, formatter: '{c}次' }, data: []