update 设备产量时序图

This commit is contained in:
lb 2023-09-20 15:17:29 +08:00
parent 8ad84a4d61
commit c600d14f8f
2 changed files with 126 additions and 55 deletions

View File

@ -21,7 +21,14 @@ export default {
chart: null, chart: null,
}; };
}, },
computed: {}, watch: {
config: {
handler(value) {
if (value != null) this.setOption(value);
},
deep: true,
},
},
mounted() { mounted() {
this.init(); this.init();
}, },
@ -32,9 +39,11 @@ export default {
}, },
methods: { methods: {
init() { init() {
console.log('thsi el', this.$el);
if (!this.chart) this.chart = echarts.init(this.$el); if (!this.chart) this.chart = echarts.init(this.$el);
this.chart.setOption(this.config); this.setOption(this.config);
},
setOption(option) {
if (this.chart) this.chart.setOption(option);
}, },
}, },
}; };

View File

@ -32,21 +32,16 @@
style=" style="
margin-bottom: 12px; margin-bottom: 12px;
background: #fff; background: #fff;
padding: 16px 16px 32px; padding: 16px 16px 24px;
border-radius: 8px; border-radius: 8px;
"> ">
<div class="blue-title">设备产量时序图</div> <div class="blue-title">设备产量时序图</div>
<div class="main-area"> <div class="main-area">
<div class="graphs" v-if="graphList.length"> <div class="graphs" v-if="graphList.length">
<div class="graph" v-for="(eq, index) in graphList" :key="eq.key"> <LineChart :config="templateConfig" />
<h2 class="graph-title">{{ eq.key }}</h2>
<LineChart
:key="eq.key + '__linechart'"
:config="getRealConfig(index)" />
</div>
</div> </div>
<h2 v-else>请添加设备</h2> <div class="no-data-bg" v-else></div>
</div> </div>
</el-row> </el-row>
@ -82,6 +77,7 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
accumulators: new Map(),
searchBarFormConfig: [ searchBarFormConfig: [
{ {
type: 'select', type: 'select',
@ -101,15 +97,16 @@ export default {
{ {
type: 'datePicker', type: 'datePicker',
label: '时间段', label: '时间段',
dateType: 'daterange', // datetimerange dateType: 'date', // datetimerange
// format: 'yyyy-MM-dd HH:mm:ss', // format: 'yyyy-MM-dd HH:mm:ss',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
// valueFormat: 'timestamp', // valueFormat: 'timestamp',
rangeSeparator: '-', // rangeSeparator: '-',
startPlaceholder: '开始日期', // startPlaceholder: '',
endPlaceholder: '结束日期', // endPlaceholder: '',
defaultTime: ['00:00:00', '23:59:59'], // defaultTime: ['00:00:00', '23:59:59'],
placeholder: '选择日期',
param: 'recordTime', param: 'recordTime',
}, },
{ {
@ -139,30 +136,47 @@ export default {
eqList: [], eqList: [],
graphList: [], graphList: [],
templateConfig: { templateConfig: {
color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
grid: { grid: {
top: 88, top: 48,
left: 56, left: 48,
right: 56, right: 24,
bottom: 56, bottom: 24,
}, },
legend: { legend: {
top: 0, top: 0,
left: 0, right: 12,
padding: 5, padding: 6,
icon: 'roundRect', itemWidth: 16,
itemWidth: 12, itemHeight: 8,
itemHeight: 12,
itemGap: 20, itemGap: 20,
textStyle: { textStyle: {
fontSize: 14, fontSize: 12,
lineHeight: 14, lineHeight: 12,
color: '#0007',
}, },
}, },
tooltip: {
show: true,
trigger: 'axis',
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: Array(24) boundaryGap: true,
.fill(1) axisTick: {
.map((item, index) => `${index}:00`), // show: false,
alignWithLabel: true,
lineStyle: {
color: '#0003',
},
},
axisLabel: {
color: '#0007',
},
data: [],
// data: Array(24)
// .fill(1)
// .map((item, index) => `${index}:00`),
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -170,19 +184,41 @@ export default {
nameLocation: 'end', nameLocation: 'end',
nameTextStyle: { nameTextStyle: {
fontSize: 14, fontSize: 14,
align: 'right', align: 'center',
}, },
nameGap: 26, nameGap: 26,
max: function (value) {
return value.max + Math.floor(value.max / 5);
},
}, },
series: [ series: [
{ // {
name: '产线1', // name: '线1',
data: Array(24) // data: Array(24)
.fill(1) // .fill(1)
.map(() => Math.random() * 100), // .map(() => Math.random() * 100),
type: 'line', // type: 'line',
smooth: true, // symbol: 'circle',
}, // // smooth: true,
// },
// {
// name: '线2',
// data: Array(24)
// .fill(1)
// .map(() => Math.random() * 100),
// type: 'line',
// symbol: 'circle',
// // smooth: true,
// },
// {
// name: '线3',
// data: Array(24)
// .fill(1)
// .map(() => Math.random() * 100),
// type: 'line',
// symbol: 'circle',
// // smooth: true,
// },
], ],
}, },
}; };
@ -200,7 +236,12 @@ export default {
this.queryParams.lineId = payload.lineId || null; this.queryParams.lineId = payload.lineId || null;
this.queryParams.sectionId = payload.sectionId || null; this.queryParams.sectionId = payload.sectionId || null;
this.queryParams.equipmentId = payload.equipmentId || null; this.queryParams.equipmentId = payload.equipmentId || null;
this.queryParams.recordTime = payload.recordTime || null; this.queryParams.recordTime = payload.recordTime
? [
payload.recordTime,
payload.recordTime.replace('00:00:00', '23:59:59'),
]
: null;
this.getList(); this.getList();
break; break;
case 'compare': case 'compare':
@ -254,10 +295,41 @@ export default {
// ]; // ];
// eq2.key = 'SS2'; // eq2.key = 'SS2';
// this.graphList = [eq1, eq2]; // this.graphList = [eq1, eq2];
console.log('graph list', this.graphList);
this.graphList.forEach(this.setSeries);
} else {
this.graphList = [];
this.graphList.forEach(this.setSeries);
} }
}, },
setSeries(eqArr) {
if (eqArr.length == 0) {
this.templateConfig.series = [];
return;
}
let isInit = false;
if (this.accumulators.has(eqArr.key) == false) {
this.accumulators.set(eqArr.key, 0);
isInit = true;
}
let accumulator = this.accumulators.get(eqArr.key);
if ((accumulator && !isInit) || (accumulator == 0 && isInit == false)) {
accumulator++;
this.accumulators.set(eqArr.key, accumulator);
}
this.templateConfig.series.push({
name: eqArr.key + (accumulator == 0 ? '' : '-' + accumulator),
// name: Math.random(),
type: 'line',
symbol: 'circle',
data: this.getEquipmentQuantity(eqArr),
});
},
/** 获得设备产量 */ /** 获得设备产量 */
getEquipmentQuantity(equipmentArr) { getEquipmentQuantity(equipmentArr) {
return equipmentArr.map((item) => item.totalQuantity); return equipmentArr.map((item) => item.totalQuantity);
@ -270,19 +342,6 @@ export default {
); );
}, },
getRealConfig(index) {
// if (!this.graphList || this.graphList.length == 0) return;
const config = JSON.parse(JSON.stringify(this.templateConfig));
// config.legend.data = this.graphList[index].key;
config.series[0].name = this.graphList[index]?.key;
// console.log("this.graphList?.[index]", this.graphList?.[index]);
config.series[0].data = this.getEquipmentQuantity(
this.graphList?.[index] || []
);
config.xAxis.data = this.getTimeinfo(this.graphList?.[index] || []);
return config;
},
/** 准备设备数据 */ /** 准备设备数据 */
async initEquipment() { async initEquipment() {
const { code, data } = await this.$axios({ const { code, data } = await this.$axios({
@ -337,13 +396,16 @@ export default {
method: 'get', method: 'get',
params: this.queryParams, params: this.queryParams,
}); });
this.queryParams.equipmentId = null; //
if (code == 0) { if (code == 0) {
const newEqlist = this.objectToArray(data); const newEqlist = this.objectToArray(data);
if (!newEqlist || newEqlist.length == 0) { if (!newEqlist || newEqlist.length == 0) {
this.$message.error('该设备没有产量数据'); this.$message.error('该设备没有产量数据');
return; return;
} }
this.graphList.push(newEqlist[0]); this.graphList.push(...newEqlist);
newEqlist.forEach(this.setSeries);
} }
this.open = false; this.open = false;
}, },