|
|
@@ -15,46 +15,10 @@ |
|
|
|
@headBtnClick="handleSearchBarBtnClick" /> |
|
|
|
|
|
|
|
<div class="main-area"> |
|
|
|
<div class="legend-row"> |
|
|
|
<div class="legend"> |
|
|
|
<div class="icon running"></div> |
|
|
|
<div>运行中</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="legend"> |
|
|
|
<div class="icon waiting"></div> |
|
|
|
<div>待机</div> |
|
|
|
</div> --> |
|
|
|
<div class="legend"> |
|
|
|
<div class="icon fault"></div> |
|
|
|
<div>故障</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="legend"> |
|
|
|
<div class="icon lack"></div> |
|
|
|
<div>缺料</div> |
|
|
|
</div> |
|
|
|
<div class="legend"> |
|
|
|
<div class="icon full"></div> |
|
|
|
<div>满料</div> |
|
|
|
</div> --> |
|
|
|
<div class="legend"> |
|
|
|
<div class="icon stop"></div> |
|
|
|
<div>计划停机</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="graphs" v-if="graphList.length"> |
|
|
|
<div class="graph" v-for="eq in graphList" :key="eq.key"> |
|
|
|
<div class="graph" v-for="eq,index in graphList" :key="eq.key"> |
|
|
|
<h2 class="graph-title">{{ eq.key }}</h2> |
|
|
|
<div |
|
|
|
v-for="blc in eq" |
|
|
|
:key="blc.startTime" |
|
|
|
class="graph-item-fixed tick" |
|
|
|
:class="{ |
|
|
|
running: blc.status == 0, |
|
|
|
fault: blc.status == 2, |
|
|
|
stop: blc.status == 1, |
|
|
|
}" |
|
|
|
:style="{ width: blc.duration * 2 + 'px' }" |
|
|
|
:data-time="new Date(blc.startTime).toLocaleTimeString()"></div> |
|
|
|
<LineChart :key="eq.key + '__linechart'" :config="getRealConfig(index)" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<h2 v-else>请添加设备</h2> |
|
|
@@ -63,9 +27,11 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import LineChart from './components/lineChart.vue'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'SGProduction', |
|
|
|
components: {}, |
|
|
|
components: { LineChart }, |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
@@ -119,9 +85,57 @@ export default { |
|
|
|
queryParams: { |
|
|
|
lineId: null, |
|
|
|
sectionId: null, |
|
|
|
equipmentId: null, |
|
|
|
recordTime: [], |
|
|
|
}, |
|
|
|
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() { |
|
|
@@ -130,25 +144,91 @@ export default { |
|
|
|
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.$message.info('暂未实现该接口'); |
|
|
|
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/status', |
|
|
|
url: '/analysis/equipment-analysis/quantity', |
|
|
|
method: 'get', |
|
|
|
params: this.queryParams, |
|
|
|
}); |
|
|
|
if (code == 0) { |
|
|
|
this.graphList = data; |
|
|
|
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 initProductline() { |
|
|
|
const { code, data } = await this.$axios({ |
|
|
|