mitsuhaV/WetlandGuard-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.ddmt.top/mitsuhaV/WetlandGuard-Admin

Browse Source
This commit is contained in:
Xiaoyu 2025-03-13 10:14:00 +08:00
commit 0d5d1e6072
5 changed files with 196 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/views/dashboard/index.vue
View File

@ -397,7 +397,7 @@ const initTrendChart = () => {
xAxis: {
type: "category",
boundaryGap: false,
data: ["3-14", "3-15", "3-16", "3-17", "3-18", "3-19", "3-20"],
data: ["2-14", "2-15", "2-16", "2-17", "2-18", "2-19", "2-20"],
axisLine: {
lineStyle: {
color: "#DCDFE6",
@ -719,66 +719,6 @@ onUnmounted(() => {
<div ref="protectionChartRef" class="chart-content"></div>
</div>
</div>
<div class="bottom-stats-grid">
<div class="stat-card">
<div class="stat-header">
<span class="stat-title">实时监测数据</span>
</div>
<div class="stat-content">
<div class="stat-item">
<span class="label">水质指标</span>
<span class="value good">优</span>
</div>
<div class="stat-item">
<span class="label">空气质量</span>
<span class="value normal">良</span>
</div>
<div class="stat-item">
<span class="label">土壤湿度</span>
<span class="value">42%</span>
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<span class="stat-title">今日巡护概况</span>
</div>
<div class="stat-content">
<div class="stat-item">
<span class="label">巡护人员</span>
<span class="value">8人</span>
</div>
<div class="stat-item">
<span class="label">巡护里程</span>
<span class="value">12.5km</span>
</div>
<div class="stat-item">
<span class="label">记录上报</span>
<span class="value">26条</span>
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<span class="stat-title">物种活动</span>
</div>
<div class="stat-content">
<div class="stat-item">
<span class="label">活动区域</span>
<span class="value">A3、B5区</span>
</div>
<div class="stat-item">
<span class="label">活跃物种</span>
<span class="value">15种</span>
</div>
<div class="stat-item">
<span class="label">监测频次</span>
<span class="value">4次/天</span>
</div>
</div>
</div>
</div>
</div>
</template>
@ -959,64 +899,5 @@ 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;
}
}
}
}
}
}
}
</style>

122
src/views/dashboard/screen/components/LeftPanel/MiddleCard.vue
View File

@ -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%;

31
src/views/dashboard/screen/components/RightPanel/BottomCard.vue
View File

@ -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]
}
]
})

120
src/views/dashboard/screen/components/RightPanel/MiddleCard.vue
View File

@ -34,9 +34,9 @@ const initChart = async () => {
}
},
grid: {
top: '3%',
right: '5%',
bottom: '3%',
top: '8%',
right: '15%',
bottom: '15%',
left: '15%',
containLabel: true
},
@ -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: []
@ -115,7 +124,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 +137,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 +187,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)' }
])
}

2
src/views/dashboard/screen/components/RightPanel/TopCard.vue
View File

@ -40,7 +40,7 @@ const initChart = async () => {
fontSize: 12
},
top: 0,
right: '5%',
right: '0%',
itemWidth: 12,
itemHeight: 12
},