update 设备产量时序图
This commit is contained in:
parent
8ad84a4d61
commit
c600d14f8f
@ -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);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -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;
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user