update 完成时序图模块

This commit is contained in:
lb 2023-09-06 10:39:32 +08:00
parent a505f34abc
commit e42b7035fe
2 changed files with 128 additions and 8 deletions

View File

@ -16,13 +16,36 @@
<div class="main-area">
<div class="graphs" v-if="graphList.length">
<div class="graph" v-for="eq,index in graphList" :key="eq.key">
<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)" />
<LineChart
:key="eq.key + '__linechart'"
:config="getRealConfig(index)" />
</div>
</div>
<h2 v-else>请添加设备</h2>
</div>
<!-- 对话框(添加 / 修改) -->
<base-dialog
dialogTitle="添加设备"
:dialogVisible="open"
width="500px"
@close="open = false"
@cancel="open = false"
@confirm="submitForm">
<el-select
v-if="open"
style="width: 100%"
v-model="queryParams.equipmentId"
placeholder="请选择一个设备">
<el-option
v-for="eq in eqList"
:key="eq.id"
:value="eq.id"
:label="eq.name"></el-option>
</el-select>
</base-dialog>
</div>
</template>
@ -88,6 +111,8 @@ export default {
equipmentId: null,
recordTime: [],
},
open: false,
eqList: [],
graphList: [],
templateConfig: {
grid: {
@ -141,6 +166,7 @@ export default {
created() {
this.initProductline();
this.initWorksection();
this.initEquipment();
this.getList();
},
methods: {
@ -154,7 +180,7 @@ export default {
this.getList();
break;
case 'compare':
this.$message.info('暂未实现该接口');
this.open = true;
break;
}
},
@ -215,7 +241,9 @@ export default {
/** 获得设备产量的时间 */
getTimeinfo(equipmentArr) {
return equipmentArr.map((item) => new Date(item.startTime).toLocaleTimeString());
return equipmentArr.map((item) =>
new Date(item.startTime).toLocaleTimeString()
);
},
getRealConfig(index) {
@ -224,11 +252,29 @@ export default {
// 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.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({
url: '/base/equipment/listAll',
method: 'get',
});
if (code == 0) {
this.eqList = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
},
/** 准备产线数据 */
async initProductline() {
const { code, data } = await this.$axios({
@ -260,6 +306,23 @@ export default {
});
}
},
async submitForm() {
const { code, data } = await this.$axios({
url: '/analysis/equipment-analysis/quantity',
method: 'get',
params: this.queryParams,
});
if (code == 0) {
const newEqlist = this.objectToArray(data);
if (!newEqlist || newEqlist.length == 0) {
this.$message.error('该设备没有产量数据');
return;
}
this.graphList.push(newEqlist[0]);
}
this.open = false;
}
},
};
</script>

View File

@ -113,6 +113,27 @@
</div>
<h2 v-else>请添加设备</h2>
</div>
<!-- 对话框(添加 / 修改) -->
<base-dialog
dialogTitle="添加设备"
:dialogVisible="open"
width="500px"
@close="open = false"
@cancel="open = false"
@confirm="submitForm">
<el-select
v-if="open"
style="width: 100%"
v-model="queryParams.equipmentId"
placeholder="请选择一个设备">
<el-option
v-for="eq in eqList"
:key="eq.id"
:value="eq.id"
:label="eq.name"></el-option>
</el-select>
</base-dialog>
</div>
</template>
@ -177,6 +198,8 @@ export default {
recordTime: [],
},
graphList: [],
open: false,
eqList: [],
// demo: [
// [
// {
@ -203,6 +226,7 @@ export default {
created() {
this.initProductline();
this.initWorksection();
this.initEquipment();
this.getList();
},
methods: {
@ -235,6 +259,22 @@ export default {
}
},
/** 准备设备数据 */
async initEquipment() {
const { code, data } = await this.$axios({
url: '/base/equipment/listAll',
method: 'get',
});
if (code == 0) {
this.eqList = data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
}
},
/** 准备产线数据 */
async initProductline() {
const { code, data } = await this.$axios({
@ -276,11 +316,28 @@ export default {
this.queryParams.recordTime = payload.recordTime || null;
this.getList();
break;
case 'compare':
this.$message.info('暂未实现该接口')
break;
case 'compare':
this.open = true;
break;
}
},
async submitForm() {
const { code, data } = await this.$axios({
url: '/analysis/equipment-analysis/status',
method: 'get',
params: this.queryParams,
});
if (code == 0) {
const newEqlist = this.objectToArray(data);
if (!newEqlist || newEqlist.length == 0) {
this.$message.error('该设备没有状态数据');
return;
}
this.graphList.push(newEqlist[0]);
}
this.open = false;
},
},
};
</script>