diff --git a/src/views/equipment/timing-diagram/output/components/lineChart.vue b/src/views/equipment/timing-diagram/output/components/lineChart.vue
index 1ca240df..614db310 100644
--- a/src/views/equipment/timing-diagram/output/components/lineChart.vue
+++ b/src/views/equipment/timing-diagram/output/components/lineChart.vue
@@ -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);
},
},
};
diff --git a/src/views/equipment/timing-diagram/output/index.vue b/src/views/equipment/timing-diagram/output/index.vue
index da1d3cf9..2c01dffd 100644
--- a/src/views/equipment/timing-diagram/output/index.vue
+++ b/src/views/equipment/timing-diagram/output/index.vue
@@ -32,21 +32,16 @@
style="
margin-bottom: 12px;
background: #fff;
- padding: 16px 16px 32px;
+ padding: 16px 16px 24px;
border-radius: 8px;
">
设备产量时序图
@@ -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;
},