update 设备产量时序图
This commit is contained in:
parent
8ad84a4d61
commit
c600d14f8f
@ -21,7 +21,14 @@ export default {
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
config: {
|
||||
handler(value) {
|
||||
if (value != null) this.setOption(value);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
@ -32,9 +39,11 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
console.log('thsi el', 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);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -32,21 +32,16 @@
|
||||
style="
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 32px;
|
||||
padding: 16px 16px 24px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<div class="blue-title">设备产量时序图</div>
|
||||
|
||||
<div class="main-area">
|
||||
<div class="graphs" v-if="graphList.length">
|
||||
<div class="graph" v-for="(eq, index) in graphList" :key="eq.key">
|
||||
<h2 class="graph-title">{{ eq.key }}</h2>
|
||||
<LineChart
|
||||
:key="eq.key + '__linechart'"
|
||||
:config="getRealConfig(index)" />
|
||||
</div>
|
||||
<LineChart :config="templateConfig" />
|
||||
</div>
|
||||
<h2 v-else>请添加设备</h2>
|
||||
<div class="no-data-bg" v-else></div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
@ -82,6 +77,7 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
accumulators: new Map(),
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
@ -101,15 +97,16 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
dateType: 'daterange', // datetimerange
|
||||
dateType: 'date', // datetimerange
|
||||
// format: 'yyyy-MM-dd HH:mm:ss',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'timestamp',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
defaultTime: ['00:00:00', '23:59:59'],
|
||||
// rangeSeparator: '-',
|
||||
// startPlaceholder: '开始日期',
|
||||
// endPlaceholder: '结束日期',
|
||||
// defaultTime: ['00:00:00', '23:59:59'],
|
||||
placeholder: '选择日期',
|
||||
param: 'recordTime',
|
||||
},
|
||||
{
|
||||
@ -139,30 +136,47 @@ export default {
|
||||
eqList: [],
|
||||
graphList: [],
|
||||
templateConfig: {
|
||||
color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
|
||||
grid: {
|
||||
top: 88,
|
||||
left: 56,
|
||||
right: 56,
|
||||
bottom: 56,
|
||||
top: 48,
|
||||
left: 48,
|
||||
right: 24,
|
||||
bottom: 24,
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
padding: 5,
|
||||
icon: 'roundRect',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
right: 12,
|
||||
padding: 6,
|
||||
itemWidth: 16,
|
||||
itemHeight: 8,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
lineHeight: 14,
|
||||
fontSize: 12,
|
||||
lineHeight: 12,
|
||||
color: '#0007',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map((item, index) => `${index}:00`),
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
// show: false,
|
||||
alignWithLabel: true,
|
||||
lineStyle: {
|
||||
color: '#0003',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#0007',
|
||||
},
|
||||
data: [],
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map((item, index) => `${index}:00`),
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@ -170,19 +184,41 @@ export default {
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
align: 'right',
|
||||
align: 'center',
|
||||
},
|
||||
nameGap: 26,
|
||||
max: function (value) {
|
||||
return value.max + Math.floor(value.max / 5);
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '产线1',
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map(() => Math.random() * 100),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
},
|
||||
// {
|
||||
// name: '产线1',
|
||||
// data: Array(24)
|
||||
// .fill(1)
|
||||
// .map(() => Math.random() * 100),
|
||||
// type: 'line',
|
||||
// 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.sectionId = payload.sectionId || 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();
|
||||
break;
|
||||
case 'compare':
|
||||
@ -254,10 +295,41 @@ export default {
|
||||
// ];
|
||||
// eq2.key = 'SS2';
|
||||
// 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) {
|
||||
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() {
|
||||
const { code, data } = await this.$axios({
|
||||
@ -337,13 +396,16 @@ export default {
|
||||
method: 'get',
|
||||
params: this.queryParams,
|
||||
});
|
||||
|
||||
this.queryParams.equipmentId = null; // 清空一下
|
||||
if (code == 0) {
|
||||
const newEqlist = this.objectToArray(data);
|
||||
if (!newEqlist || newEqlist.length == 0) {
|
||||
this.$message.error('该设备没有产量数据');
|
||||
return;
|
||||
}
|
||||
this.graphList.push(newEqlist[0]);
|
||||
this.graphList.push(...newEqlist);
|
||||
newEqlist.forEach(this.setSeries);
|
||||
}
|
||||
this.open = false;
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user