292 行
13 KiB
JavaScript
292 行
13 KiB
JavaScript
define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {
|
|
|
|
var CATEGORY_DEFS = {
|
|
core: {
|
|
name: '核心品质',
|
|
keywords: ['水分', '整精米率', '容重', '出糙率', '色泽', '气味', '纯粮率']
|
|
},
|
|
impurity: {
|
|
name: '物理与杂质',
|
|
keywords: ['杂质', '黄粒米', '谷外糙米', '互混', '不完善粒', '生霉粒', '加热损伤粒']
|
|
},
|
|
storage: {
|
|
name: '储存品质',
|
|
keywords: ['脂肪酸值', '面筋吸水量', '品尝评分', '酸价', '过氧化值', '发芽率', '还原糖']
|
|
},
|
|
safety: {
|
|
name: '卫生安全',
|
|
keywords: ['铅', '镉', '总汞', '汞', '无机砷', '砷', '黄曲霉毒素', '黄曲霉毒素B1', '马拉硫磷', '农药']
|
|
}
|
|
};
|
|
|
|
function filterSeriesByCategory(seriesData, categoryKey) {
|
|
if (!seriesData || !Array.isArray(seriesData)) return [];
|
|
if (!categoryKey || categoryKey === 'all') return seriesData;
|
|
var cat = CATEGORY_DEFS[categoryKey];
|
|
if (!cat) return seriesData;
|
|
return seriesData.filter(function (item) {
|
|
var name = item.name || '';
|
|
return cat.keywords.some(function (kw) {
|
|
return name.indexOf(kw) !== -1;
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
var Controller = {
|
|
index: function () {
|
|
var vue = new Vue({
|
|
el: '#data',
|
|
data: {
|
|
lineCharts: [],
|
|
granaryList: [],
|
|
typeList: [],
|
|
selectedCategory: 'core',
|
|
search: {
|
|
gid: '',
|
|
year: '',
|
|
type: 'rapeseed'
|
|
}
|
|
},
|
|
created() {
|
|
this.getInitData();
|
|
},
|
|
methods: {
|
|
categoryChange(cat) {
|
|
this.paramsLineCharts();
|
|
},
|
|
// 仓库切换智能联动其品种并刷新折线图
|
|
granaryChange(gid) {
|
|
let cur = this.granaryList.find(function (item) { return item.id === gid; });
|
|
if (cur && cur.type) {
|
|
this.search.type = cur.type;
|
|
}
|
|
this.getParamsLineCharts();
|
|
},
|
|
// 品种切换自动刷新折线图
|
|
typeChange(type) {
|
|
this.getParamsLineCharts();
|
|
},
|
|
// 获取初始化数据
|
|
getInitData() {
|
|
let loading = this.$loading({
|
|
lock: true,
|
|
text: '数据加载中...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.3)'
|
|
});
|
|
|
|
$.ajax({
|
|
url: 'dashboard/getInitData',
|
|
type: 'GET',
|
|
data: {},
|
|
success: res => {
|
|
loading.close();
|
|
if (res.code === 200) {
|
|
this.granaryList = res.data.granaryList;
|
|
this.typeList = res.data.typeList;
|
|
this.search.year = res.data.year;
|
|
if (res.data.defaultType) {
|
|
this.search.type = res.data.defaultType;
|
|
}
|
|
|
|
if (this.granaryList.length) {
|
|
this.search.gid = this.granaryList[0]['id'];
|
|
if (this.granaryList[0]['type']) {
|
|
this.search.type = this.granaryList[0]['type'];
|
|
}
|
|
}
|
|
|
|
this.lineCharts = res.data.lineCharts;
|
|
this.paramsLineCharts();
|
|
} else {
|
|
this.$message.warning(res.msg);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 获取检测折线图数据
|
|
getParamsLineCharts() {
|
|
let loading = this.$loading({
|
|
lock: true,
|
|
text: '数据加载中...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.3)'
|
|
});
|
|
|
|
$.ajax({
|
|
url: 'dashboard/getParamsLineCharts',
|
|
type: 'GET',
|
|
data: {
|
|
gid: this.search.gid,
|
|
year: this.search.year,
|
|
type: this.search.type
|
|
},
|
|
success: res => {
|
|
loading.close();
|
|
if (res.code === 200) {
|
|
this.lineCharts = res.data.lineCharts;
|
|
this.paramsLineCharts();
|
|
} else {
|
|
this.$message.warning(res.msg);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 折线图 (平滑无遮挡 + 指标分类过滤 + 自适应刻度)
|
|
paramsLineCharts() {
|
|
let series = this.lineCharts || {};
|
|
let lineChart = Echarts.init(document.getElementById('main-chart'));
|
|
let legendData = [];
|
|
let hasData = false;
|
|
|
|
let rawSeriesData = (series.seriesData && Array.isArray(series.seriesData)) ? series.seriesData : [];
|
|
let displaySeries = filterSeriesByCategory(rawSeriesData, this.selectedCategory);
|
|
if (!displaySeries.length && this.selectedCategory !== 'all' && rawSeriesData.length) {
|
|
displaySeries = [];
|
|
}
|
|
|
|
if (displaySeries && displaySeries.length) {
|
|
for (let i = 0; i < displaySeries.length; i++) {
|
|
let item = displaySeries[i];
|
|
item.type = 'line';
|
|
item.smooth = true;
|
|
item.symbol = 'circle';
|
|
item.symbolSize = 7;
|
|
delete item.areaStyle;
|
|
item.lineStyle = {
|
|
width: 2.5
|
|
};
|
|
item.label = {
|
|
show: true,
|
|
position: 'top',
|
|
fontSize: 11,
|
|
color: '#4b5563',
|
|
formatter: function (p) {
|
|
return (p.value !== 0 && p.value !== '0' && p.value !== null && p.value !== undefined) ? p.value : '';
|
|
}
|
|
};
|
|
legendData.push(item.name);
|
|
if (item.data && item.data.length && item.data.some(function (v) { return v !== null && v !== undefined && v !== ''; })) {
|
|
hasData = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
let curGid = this.search.gid;
|
|
let curGranary = this.granaryList.find(function (g) { return g.id === curGid; });
|
|
let granaryName = curGranary ? curGranary.name : '所选仓库';
|
|
let typeName = this.typeList && this.typeList[this.search.type] ? this.typeList[this.search.type].name : this.search.type;
|
|
let yearText = this.search.year || '';
|
|
let currentCatName = (CATEGORY_DEFS[this.selectedCategory] ? CATEGORY_DEFS[this.selectedCategory].name : '指标');
|
|
|
|
let emptySubtext = '';
|
|
if (!rawSeriesData.length) {
|
|
emptySubtext = (yearText ? yearText + '年 ' : '') + granaryName + ' 暂无【' + typeName + '】检测报告，可切换年份或对应品种查看';
|
|
} else {
|
|
emptySubtext = (yearText ? yearText + '年 ' : '') + granaryName + '【' + typeName + '】暂无【' + currentCatName + '】项检测数据，可切换其他分类或全部指标查看';
|
|
}
|
|
|
|
let option = {
|
|
title: !hasData ? {
|
|
text: '暂无检测数据',
|
|
subtext: emptySubtext,
|
|
left: 'center',
|
|
top: 'middle',
|
|
textStyle: {
|
|
color: '#909399',
|
|
fontSize: 16,
|
|
fontWeight: 'normal'
|
|
},
|
|
subtextStyle: {
|
|
color: '#c0c4cc',
|
|
fontSize: 13
|
|
}
|
|
} : {
|
|
text: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.96)',
|
|
borderColor: '#e4e7ed',
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: '#303133',
|
|
fontSize: 12
|
|
},
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: hasData ? legendData : [],
|
|
top: 5,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#606266'
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '4%',
|
|
right: '4%',
|
|
top: 50,
|
|
bottom: 20,
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: hasData ? (series.list || []) : [],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#dcdfe6'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#606266'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
scale: true,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#dcdfe6'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#606266'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#f2f3f5'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: hasData ? displaySeries : []
|
|
};
|
|
|
|
lineChart.setOption(option, true);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
return Controller;
|
|
});
|