331 lines
7.6 KiB
Vue
331 lines
7.6 KiB
Vue
<!--
|
|
filename: index.vue
|
|
author: liubin
|
|
date: 2023-09-04 09:34:52
|
|
description: 设备产量时序图
|
|
-->
|
|
|
|
<template>
|
|
<div class="app-container">
|
|
<h1>设备产量时序图</h1>
|
|
<!-- 搜索工作栏 -->
|
|
<SearchBar
|
|
:formConfigs="searchBarFormConfig"
|
|
ref="search-bar"
|
|
@headBtnClick="handleSearchBarBtnClick" />
|
|
|
|
<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>
|
|
</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>
|
|
|
|
<script>
|
|
import LineChart from './components/lineChart.vue';
|
|
|
|
export default {
|
|
name: 'SGProduction',
|
|
components: { LineChart },
|
|
props: {},
|
|
data() {
|
|
return {
|
|
searchBarFormConfig: [
|
|
{
|
|
type: 'select',
|
|
label: '产线',
|
|
placeholder: '请选择产线',
|
|
selectOptions: [],
|
|
param: 'lineId',
|
|
},
|
|
{
|
|
type: 'select',
|
|
label: '工段',
|
|
placeholder: '请选择工段',
|
|
selectOptions: [],
|
|
param: 'sectionId',
|
|
},
|
|
// 时间段
|
|
{
|
|
type: 'datePicker',
|
|
label: '时间段',
|
|
dateType: 'daterange', // 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'],
|
|
param: 'recordTime',
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary',
|
|
},
|
|
{
|
|
type: 'separate',
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '设备对比',
|
|
name: 'compare',
|
|
color: 'warning',
|
|
plain: true,
|
|
},
|
|
],
|
|
queryParams: {
|
|
lineId: null,
|
|
sectionId: null,
|
|
equipmentId: null,
|
|
recordTime: [],
|
|
},
|
|
open: false,
|
|
eqList: [],
|
|
graphList: [],
|
|
templateConfig: {
|
|
grid: {
|
|
top: 88,
|
|
left: 56,
|
|
right: 56,
|
|
bottom: 56,
|
|
},
|
|
legend: {
|
|
top: 0,
|
|
left: 0,
|
|
padding: 5,
|
|
icon: 'roundRect',
|
|
itemWidth: 12,
|
|
itemHeight: 12,
|
|
itemGap: 20,
|
|
textStyle: {
|
|
fontSize: 14,
|
|
lineHeight: 14,
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: Array(24)
|
|
.fill(1)
|
|
.map((item, index) => `${index}:00`),
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '产量',
|
|
nameLocation: 'end',
|
|
nameTextStyle: {
|
|
fontSize: 14,
|
|
align: 'right',
|
|
},
|
|
nameGap: 26,
|
|
},
|
|
series: [
|
|
{
|
|
name: '产线1',
|
|
data: Array(24)
|
|
.fill(1)
|
|
.map(() => Math.random() * 100),
|
|
type: 'line',
|
|
smooth: true,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.initProductline();
|
|
this.initWorksection();
|
|
this.initEquipment();
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
handleSearchBarBtnClick({ btnName, ...payload }) {
|
|
switch (btnName) {
|
|
case 'search':
|
|
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.getList();
|
|
break;
|
|
case 'compare':
|
|
this.open = true;
|
|
break;
|
|
}
|
|
},
|
|
|
|
/** 重置查询条件 */
|
|
initQuery() {
|
|
this.queryParams.lineId = null;
|
|
this.queryParams.sectionId = null;
|
|
this.queryParams.equipmentId = null;
|
|
this.queryParams.recordTime = [];
|
|
},
|
|
|
|
/** 对象到数组的转换 */
|
|
objectToArray(obj) {
|
|
return Object.keys(obj).map((key) => {
|
|
obj[key].sort((a, b) => a.startTime - b.startTime);
|
|
obj[key].key = key;
|
|
return obj[key];
|
|
});
|
|
},
|
|
|
|
async getList() {
|
|
const { code, data } = await this.$axios({
|
|
url: '/analysis/equipment-analysis/quantity',
|
|
method: 'get',
|
|
params: this.queryParams,
|
|
});
|
|
if (code == 0) {
|
|
this.graphList = this.objectToArray(data);
|
|
// const eq1 = [
|
|
// { totalQuantity: 20, startTime: 1693964578000 },
|
|
// { totalQuantity: 43, startTime: 1693964678000 },
|
|
// { totalQuantity: 12, startTime: 1693964778000 },
|
|
// { totalQuantity: 11, startTime: 1693964878000 },
|
|
// { totalQuantity: 98, startTime: 1693965478000 },
|
|
// { totalQuantity: 87, startTime: 1693965578000 },
|
|
// ];
|
|
// eq1.key = 'SS1';
|
|
// const eq2 = [
|
|
// { totalQuantity: 23, startTime: 1693961578000 },
|
|
// { totalQuantity: 42, startTime: 1693964578000 },
|
|
// { totalQuantity: 51, startTime: 1693965578000 },
|
|
// { totalQuantity: 18, startTime: 1693966578000 },
|
|
// { totalQuantity: 77, startTime: 1693966778000 },
|
|
// { totalQuantity: 38, startTime: 1693967578000 },
|
|
// { totalQuantity: 57, startTime: 1693969578000 },
|
|
// ];
|
|
// eq2.key = 'SS2';
|
|
// this.graphList = [eq1, eq2];
|
|
console.log('graph list', this.graphList);
|
|
}
|
|
},
|
|
|
|
/** 获得设备产量 */
|
|
getEquipmentQuantity(equipmentArr) {
|
|
return equipmentArr.map((item) => item.totalQuantity);
|
|
},
|
|
|
|
/** 获得设备产量的时间 */
|
|
getTimeinfo(equipmentArr) {
|
|
return equipmentArr.map((item) =>
|
|
new Date(item.startTime).toLocaleTimeString()
|
|
);
|
|
},
|
|
|
|
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({
|
|
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({
|
|
url: '/base/production-line/listAll',
|
|
method: 'get',
|
|
});
|
|
if (code == 0) {
|
|
this.searchBarFormConfig[0].selectOptions = data.map((item) => {
|
|
return {
|
|
name: item.name,
|
|
id: item.id,
|
|
};
|
|
});
|
|
}
|
|
},
|
|
|
|
/** 准备工段数据 */
|
|
async initWorksection() {
|
|
const { code, data } = await this.$axios({
|
|
url: '/base/workshop-section/listAll',
|
|
method: 'get',
|
|
});
|
|
if (code == 0) {
|
|
this.searchBarFormConfig[1].selectOptions = data.map((item) => {
|
|
return {
|
|
name: item.name,
|
|
id: item.id,
|
|
};
|
|
});
|
|
}
|
|
},
|
|
|
|
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>
|
|
|
|
<style scoped lang="scss"></style>
|