563 lines
16 KiB
Vue
563 lines
16 KiB
Vue
<script setup lang='ts'>
|
||
import { Download, Search } from '@element-plus/icons-vue';
|
||
import * as echarts from 'echarts';
|
||
import { ElMessage, type FormInstance, type FormRules, type UploadProps } from 'element-plus';
|
||
import { ref } from 'vue';
|
||
import { useI18n } from 'vue-i18n';
|
||
import { getSampleGrade, getStationList, exportData } from '@/utils/axios/sjfx';
|
||
import { exportCharts } from '@/utils/index'; // 下载图表图片
|
||
|
||
const { t } = useI18n();
|
||
const sampleTypeList = ref<any>([
|
||
{ label: '颗粒物', value: 'P' },
|
||
{ label: '惰性气体', value: 'B' },
|
||
]);
|
||
const dataSourceList = ref<any>([
|
||
{ label: 'NDC自动处理', value: '1' },
|
||
{ label: 'NDC交互分析', value: '2' },
|
||
{ label: 'IDC自动处理', value: '3' },
|
||
{ label: 'IDC交互分析', value: '4' },
|
||
]);
|
||
const form = ref<any>({
|
||
// sampleType: 'P',
|
||
// station: 106,
|
||
// dataSource: '1',
|
||
// startDate: '2025-01-01',
|
||
// endDate: '2025-09-15',
|
||
// createTime: ['2025-01-01', '2025-09-15'],
|
||
});
|
||
const stationList = ref<any>([]);
|
||
function getStation() {
|
||
getStationList({ systemType: form.value.sampleType, dataSource: form.value.dataSource }, (res) => {
|
||
const list = res.result;
|
||
stationList.value = list.map((item: { stationCode: any; stationId: any }) => {
|
||
return {
|
||
label: item.stationCode,
|
||
value: item.stationId,
|
||
};
|
||
});
|
||
console.log(res, 'res');
|
||
});
|
||
}
|
||
const barData = ref<any>({
|
||
xAxisData: [],
|
||
seriesData: [
|
||
|
||
],
|
||
});
|
||
function handleSampleTypeChange() {
|
||
if (!form.value.dataSource) {
|
||
ElMessage.warning('请选择数据来源!!!');
|
||
return;
|
||
}
|
||
form.value.station = '';
|
||
getStation();
|
||
}
|
||
const formRef = ref<FormInstance>();
|
||
const rules = {
|
||
sampleType: [{ required: true, message: '请选择样品类型', trigger: 'change' }],
|
||
station: [{ required: true, message: '请选择站点', trigger: 'change' }],
|
||
dataSource: [{ required: true, message: '请选择数据源', trigger: 'change' }],
|
||
createTime: [{
|
||
required: true, message: '请选择创建时间范围', trigger: 'change', validator: (rule, value, callback) => {
|
||
if (!value || value.length === 0) {
|
||
callback(new Error('请选择创建时间范围'));
|
||
}
|
||
else {
|
||
callback();
|
||
}
|
||
}
|
||
}],
|
||
};
|
||
function setTime(val: any[]) {
|
||
form.value.startDate = val[0];
|
||
form.value.endDate = val[1];
|
||
console.log(val);
|
||
}
|
||
function handleSearch() {
|
||
getList();
|
||
}
|
||
function getList() {
|
||
const formEl = formRef.value;
|
||
if (!formEl)
|
||
return;
|
||
formEl.validate((valid, fields) => {
|
||
if (valid) {
|
||
form.value.stationIds = [form.value.station]
|
||
getSampleGrade(form.value, (res) => {
|
||
console.log(res, 'res');
|
||
const list = res.result?.sampleDataList;
|
||
if (!list || list.length === 0) {
|
||
barData.value = {
|
||
xAxisData: [],
|
||
seriesData: [],
|
||
};
|
||
initCharts();
|
||
ElMessage.warning('当前未查询到可用数据');
|
||
return;
|
||
}
|
||
// 固定等级颜色映射
|
||
const levelColorMap = {
|
||
1: '#67C23A',
|
||
2: '#409EFF',
|
||
3: '#ff9933',
|
||
4: '#ff0000',
|
||
5: '#909399',
|
||
default: '#c2c2c2',
|
||
};
|
||
// 1. 提取所有唯一的时间点（包含 category 为 null 的时间）
|
||
// 确保 X 轴的时间顺序是完整的
|
||
const allTimes = Array.from(new Set(list.map((item: { collectStop: any }) => item.collectStop)))
|
||
.sort((a, b) => new Date(a) - new Date(b));
|
||
|
||
// 2. 提取所有【有效】的等级（过滤掉 null）用于图例
|
||
const validCategories = Array.from(new Set(
|
||
list.filter((item: { category: null | undefined }) => item.category !== null && item.category !== undefined)
|
||
.map((item: { category: any }) => item.category),
|
||
)).sort((a, b) => a - b);
|
||
|
||
// 3. 按时间对数据进行分组
|
||
const groupMap = new Map();
|
||
list.forEach((item: { collectStop: any }) => {
|
||
if (!groupMap.has(item.collectStop))
|
||
groupMap.set(item.collectStop, []);
|
||
groupMap.get(item.collectStop).push(item);
|
||
});
|
||
|
||
// 4. 为每个有效等级构建 Series
|
||
const seriesList: any[] = [];
|
||
validCategories.forEach((cat) => {
|
||
// 计算这个等级在单个时间点下出现的最大次数（处理同等级并排）
|
||
let maxCount = 0;
|
||
groupMap.forEach((samples) => {
|
||
const count = samples.filter(s => s.category === cat).length;
|
||
if (count > maxCount)
|
||
maxCount = count;
|
||
});
|
||
|
||
// 为该等级创建 N 个同名系列
|
||
for (let i = 0; i < maxCount; i++) {
|
||
seriesList.push({
|
||
name: `等级 ${cat}`,
|
||
type: 'bar',
|
||
barGap: '15%',
|
||
itemStyle: { color: levelColorMap[cat] || levelColorMap.default },
|
||
emphasis: { focus: 'series' },
|
||
// 遍历 X 轴所有时间点，确保时间轴完整
|
||
data: allTimes.map((time) => {
|
||
const matched = groupMap.get(time).filter(s => s.category === cat);
|
||
if (matched[i]) {
|
||
return {
|
||
value: matched[i].category,
|
||
sampleId: matched[i].sampleId,
|
||
};
|
||
}
|
||
return null; // 这里返回 null，柱子不显示，但占位和时间轴保留
|
||
}),
|
||
});
|
||
}
|
||
});
|
||
|
||
barData.value.xAxisData = allTimes;
|
||
barData.value.seriesData = seriesList;
|
||
barData.value.legendData = validCategories.map(cat => `等级 ${cat}`);
|
||
console.log('处理后的数据:', barData.value);
|
||
renderChart();
|
||
});
|
||
}
|
||
// else {
|
||
// console.log('表单验证失败:', fields);
|
||
// ElMessage.error('搜索信息未填写');
|
||
// }
|
||
});
|
||
}
|
||
function renderChart() {
|
||
if (!barData.value || !barData.value.seriesData || barData.value.seriesData.length === 0) {
|
||
console.warn('数据异常');
|
||
return;
|
||
}
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis', backgroundColor: '#03aa7f', borderColor: '#03aa7f', // 边框颜色
|
||
borderWidth: 1, // 边框宽度
|
||
borderRadius: 4, // 圆角
|
||
textStyle: {
|
||
color: '#fff', // 文字颜色
|
||
fontSize: 12,
|
||
}, formatter(params: any[]) {
|
||
let res = `<b>时间: ${params[0].name}</b><br/>`;
|
||
params.forEach((p) => {
|
||
if (p.data && p.data.sampleId) {
|
||
res += `${p.marker} ID: ${p.data.sampleId} | 等级: <b>${p.data.value}</b><br/>`;
|
||
}
|
||
});
|
||
return res;
|
||
}
|
||
},
|
||
legend: {
|
||
data: barData.value.legendData,
|
||
orient: 'horizontal',
|
||
top: 'top',
|
||
type: 'plain',
|
||
|
||
textStyle: { color: '#9ab1bc' },
|
||
icon: 'circle',
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '10%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
name: '时间',
|
||
nameLocation: 'center',
|
||
nameTextStyle: {
|
||
padding: 40,
|
||
color: '#9ab1bc',
|
||
},
|
||
axisLabel: {
|
||
color: '#9ab1bc',
|
||
rotate: 45,
|
||
fontSize: 10, // 减小字体大小
|
||
margin: 2, // 减小边距
|
||
formatter: (val: string) => val.split(' ')[0], // 轴上仅显示日期
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
alignWithLabel: true, // 刻度线是否与标签对齐
|
||
length: 10,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#406979',
|
||
width: 1,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
data: barData.value.xAxisData || [],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '级别',
|
||
nameLocation: 'center',
|
||
minInterval: 1,
|
||
nameTextStyle: { color: '#9ab1bc' },
|
||
axisLabel: { color: '#9ab1bc' },
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#406979',
|
||
width: 1,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
},
|
||
dataZoom: [
|
||
{ type: 'slider', start: 0, end: 100 },
|
||
{ type: 'inside' },
|
||
],
|
||
series: barData.value.seriesData,
|
||
};
|
||
barChart.setOption(option);
|
||
}
|
||
// 柱状图相关
|
||
const barRef = ref<HTMLDivElement | null>(null);
|
||
let barChart: echarts.ECharts | null = null;
|
||
// 初始化图表
|
||
function initCharts() {
|
||
// 先销毁已存在的图表实例，防止内存泄漏
|
||
if (barChart) {
|
||
barChart.dispose();
|
||
}
|
||
nextTick(() => {
|
||
// 初始化柱状图
|
||
if (barRef.value) {
|
||
barChart = echarts.init(barRef.value);
|
||
barChart.setOption({
|
||
// tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
// legend: { type: 'plain', top: 0, textStyle: { color: '#9ab1bc' }, icon: 'circle' },
|
||
// grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||
// xAxis: {
|
||
// type: 'category',
|
||
// nameTextStyle: { padding: 10, color: '#9ab1bc' },
|
||
// axisLabel: { color: '#9ab1bc' },
|
||
// name: '时间',
|
||
// nameLocation: 'center',
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// color: '#406979', // 线条颜色
|
||
// width: 1, // 线条宽度
|
||
// type: 'solid', // 线条类型: solid, dashed, dotted
|
||
// },
|
||
// },
|
||
// data: barData.value.xAxisData,
|
||
// },
|
||
// yAxis: {
|
||
// type: 'value',
|
||
// name: '级别',
|
||
// nameLocation: 'center',
|
||
// nameTextStyle: { color: '#9ab1bc' },
|
||
// axisLabel: { color: '#9ab1bc' },
|
||
// min: 0, // 最小值
|
||
// max: 5, // 最大值
|
||
// interval: 1, // 刻度间隔
|
||
// splitLine: {
|
||
// lineStyle: {
|
||
// color: '#406979', // 网格线颜色
|
||
// width: 1, // 网格线宽度
|
||
// type: 'solid', // 线条类型: solid, dashed, dotted
|
||
// },
|
||
// },
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: '',
|
||
// type: 'bar',
|
||
// itemStyle: {
|
||
// color: '#1569c7',
|
||
// borderWidth: 1,
|
||
// },
|
||
// // barWidth: '40%',
|
||
// // barGap: '90%',
|
||
// // barCategoryGap: '20%',
|
||
// data: [],
|
||
// },
|
||
// ],
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
const exportChartsData = async () => {
|
||
try {
|
||
console.log('开始下载...');
|
||
form.value.type = 'sampleLevelTime'
|
||
const { filename, blob } = await exportData(form.value);
|
||
// const filename = '模版'
|
||
console.log('文件信息:', {
|
||
filename,
|
||
blob,
|
||
blobType: blob.type,
|
||
blobSize: `${blob.size} bytes`,
|
||
});
|
||
|
||
// 覆盖 Blob 类型为 Excel 标准 MIME 类型（避免后端返回类型错误）
|
||
const excelBlob = new Blob([blob], {
|
||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // xlsx 标准类型
|
||
// 如果是 xls 格式，用：'application/vnd.ms-excel'
|
||
});
|
||
|
||
// 验证 Blob 是否有效
|
||
if (!blob || blob.size === 0) {
|
||
throw new Error('获取到的文件为空');
|
||
}
|
||
|
||
// 创建下载链接
|
||
const url = window.URL.createObjectURL(excelBlob);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = filename; // 使用从响应头获取的文件名
|
||
link.style.display = 'none';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
|
||
console.log('文件下载成功:', filename);
|
||
ElMessage.success('导出成功');
|
||
}
|
||
catch (error) {
|
||
console.error('文件下载失败:', error);
|
||
}
|
||
finally {
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
initCharts();
|
||
window.addEventListener('resize', () => {
|
||
barChart?.resize();
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="sjfx-two-content">
|
||
<div class="head">
|
||
<el-form ref="formRef" :model="form" label-width="80px" class="queryForm" :rules="rules">
|
||
<el-row :gutter="10">
|
||
<el-col :span="4">
|
||
<el-form-item :label="t('dataSource')" prop="dataSource">
|
||
<el-select v-model="form.dataSource" :placeholder="t('pleaseSelect')" style="width: 300px;">
|
||
<el-option v-for="item in dataSourceList" :key="item.value"
|
||
style="background-color: transparent; height: 30px;color: #fff;" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item :label="t('sampleType')" prop="sampleType">
|
||
<el-select v-model="form.sampleType" :placeholder="t('pleaseSelect')" style="width: 100%;"
|
||
popper-style="background-color: transparent;border: solid 1px #0da397;width:100px;overflow: hidden;border-radius: 0;"
|
||
@change="handleSampleTypeChange">
|
||
<el-option v-for="item in sampleTypeList" :key="item.value"
|
||
style="background-color: transparent; height: 30px;color: #fff;" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item :label="t('stationName')" prop="station">
|
||
<el-select-v2 v-model="form.station" :placeholder="t('pleaseSelect')" style="width: 160px;" filterable
|
||
:options="stationList" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- <el-col :span="3">
|
||
<el-form-item :label="t('nuclideName')">
|
||
<el-input v-model="form.nuclideName" style="width: 100%;" />
|
||
</el-form-item>
|
||
</el-col> -->
|
||
|
||
|
||
<el-col :span="7">
|
||
<el-form-item :label="t('createTime')" prop="createTime">
|
||
<el-date-picker v-model="form.createTime" type="daterange" :default-time="new Date()" style="width: 100%;"
|
||
range-separator="--" :start-placeholder="t('startDate')" :end-placeholder="t('endDate')"
|
||
value-format="YYYY-MM-DD" @change="setTime" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<el-form-item>
|
||
<el-button :icon="Search" @click="handleSearch">
|
||
{{ t('refresh') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
<div class="echars">
|
||
<div class="echars-head">
|
||
<h3>{{ t('SampleGradeTimeSeriesAnalysis') }}</h3>
|
||
<div style="flex: 1; text-align: right;">
|
||
<el-button :icon="Download" @click="exportChartsData">
|
||
{{ t('exportData') }}
|
||
</el-button>
|
||
<el-button :icon="Download" @click="exportCharts(barChart, '样品等级时序分析')">
|
||
{{ t('download') }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<div ref="barRef" class="chart-container" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang='less'>
|
||
.head {
|
||
width: 100%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 10px 0 0 0;
|
||
padding-top: 5px;
|
||
|
||
.queryForm {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
:deep(.el-form) {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
:deep(.el-form-item__content) {
|
||
&:nth-last-child(1) {
|
||
margin-left: 0 !important;
|
||
}
|
||
}
|
||
|
||
:deep(.el-range-separator) {
|
||
color: #fff;
|
||
}
|
||
|
||
:deep(.el-select__wrapper),
|
||
:deep(.el-date-editor) {
|
||
background-color: rgba(3, 53, 63, 0.51) !important;
|
||
border-radius: 0%;
|
||
border: solid 1px #0b8c82 !important;
|
||
}
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
width: 90px;
|
||
height: 32px;
|
||
margin: 0 5px;
|
||
background-color: #1397a3;
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
color: #ffffff;
|
||
border-radius: 0;
|
||
border: 1px solid #1397a3;
|
||
}
|
||
}
|
||
|
||
.echars-head {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 42px;
|
||
border-top: 0.5px solid #0cebc9;
|
||
margin-bottom: 6px;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 8px;
|
||
width: 100%;
|
||
transform: scaleY(0.5);
|
||
transform-origin: bottom;
|
||
background: rgba(12, 235, 201, 0.2);
|
||
}
|
||
|
||
h3 {
|
||
height: 40px;
|
||
padding-right: 20px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
line-height: 40px;
|
||
letter-spacing: 1px;
|
||
color: #0cebc9;
|
||
background: rgba(12, 235, 201, 0.05);
|
||
margin-left: 18px;
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
width: 85px;
|
||
height: 26px;
|
||
background-color: #097c42;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
|
||
.chart-card {
|
||
background-color: transparent;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 800px;
|
||
}
|
||
}
|
||
</style>
|