优化了报告管理的图表
This commit is contained in:
parent
b38c6a7d47
commit
12f41faa40
@ -2,7 +2,7 @@
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { ElMessageBox, ElMessage } from "element-plus";
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
|
||||
interface AnalysisReport {
|
||||
id: number;
|
||||
@ -118,39 +118,125 @@ const initChart = () => {
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: "监测指标趋势分析",
|
||||
text: '近7天报告提交趋势',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
color: '#303133'
|
||||
},
|
||||
padding: [20, 0]
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
borderColor: '#eee',
|
||||
padding: [15, 20],
|
||||
},
|
||||
legend: {
|
||||
data: ["pH值", "溶解氧", "水温"],
|
||||
data: ['巡护报告', '监测报告'],
|
||||
right: 0,
|
||||
top: 0,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
top: '15%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["1月", "2月", "3月", "4月"],
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 8,
|
||||
interval: 2,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "pH值",
|
||||
type: "line",
|
||||
data: [7.1, 7.2, 7.0, 7.3],
|
||||
name: '巡护报告',
|
||||
type: 'line',
|
||||
data: [5, 6, 4, 8, 7, 6, 5],
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#36A2EB'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#36A2EB',
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(54, 162, 235, 0.15)' },
|
||||
{ offset: 1, color: 'rgba(54, 162, 235, 0.02)' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "溶解氧",
|
||||
type: "line",
|
||||
data: [6.5, 6.3, 6.0, 5.8],
|
||||
},
|
||||
{
|
||||
name: "水温",
|
||||
type: "line",
|
||||
data: [15, 16, 18, 21],
|
||||
},
|
||||
],
|
||||
name: '监测报告',
|
||||
type: 'line',
|
||||
data: [3, 4, 3, 5, 4, 5, 4],
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#4BC0C0'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#4BC0C0',
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(75, 192, 192, 0.15)' },
|
||||
{ offset: 1, color: 'rgba(75, 192, 192, 0.02)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
@ -210,7 +296,7 @@ const handleSubmit = () => {
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = () => {
|
||||
ElMessage.success('数据已更新');
|
||||
ElMessage.success("数据已更新");
|
||||
// TODO: 实际刷新数据的逻辑
|
||||
};
|
||||
</script>
|
||||
@ -218,8 +304,8 @@ const handleRefresh = () => {
|
||||
<template>
|
||||
<div class="analysis-report">
|
||||
<!-- 趋势图表 -->
|
||||
<el-card>
|
||||
<div id="trendChart" style="height: 400px"></div>
|
||||
<el-card class="chart-card">
|
||||
<div id="trendChart"></div>
|
||||
</el-card>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
@ -259,7 +345,7 @@ const handleRefresh = () => {
|
||||
<el-table-column prop="type" label="类型" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.type === 'species' ? 'success' : 'primary'">
|
||||
{{ row.type === 'species' ? '物种分析' : '环境分析' }}
|
||||
{{ row.type === "species" ? "物种分析" : "环境分析" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -458,22 +544,34 @@ const handleRefresh = () => {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: $primary-color;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
margin-bottom: 24px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
|
||||
#trendChart {
|
||||
height: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -85,28 +85,143 @@ const initTrendChart = () => {
|
||||
const chartDom = document.getElementById('trendChart');
|
||||
if (!chartDom) return;
|
||||
|
||||
trendChart = echarts.init(chartDom);
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
title: { text: '近7天报告提交趋势' },
|
||||
tooltip: { trigger: 'axis' },
|
||||
xAxis: { type: 'category', data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'] },
|
||||
yAxis: { type: 'value' },
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '近7天报告提交趋势',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
color: '#303133'
|
||||
},
|
||||
padding: [20, 0]
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
borderColor: '#eee',
|
||||
padding: [10, 15],
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#409EFF',
|
||||
opacity: 0.2
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'],
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#E5E7EB'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666',
|
||||
padding: [8, 0]
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#E5E7EB',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '巡护报告',
|
||||
type: 'line',
|
||||
data: [5, 6, 4, 8, 7, 6, 5],
|
||||
smooth: true
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#409EFF'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#409EFF',
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(64, 158, 255, 0.2)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(64, 158, 255, 0.02)'
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '监测报告',
|
||||
type: 'line',
|
||||
data: [3, 4, 3, 5, 4, 5, 4],
|
||||
smooth: true
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#67C23A'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#67C23A',
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(103, 194, 58, 0.2)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(103, 194, 58, 0.02)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
legend: {
|
||||
data: ['巡护报告', '监测报告'],
|
||||
right: 20,
|
||||
top: 20,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
}
|
||||
};
|
||||
trendChart.setOption(option);
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => myChart.resize());
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
@ -479,4 +594,17 @@ const showTrendAnalysis = ref(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 400px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user