|
|
@@ -1,7 +1,7 @@ |
|
|
|
<!-- |
|
|
|
* @Author: zhp |
|
|
|
* @Date: 2024-01-29 16:50:26 |
|
|
|
* @LastEditTime: 2024-03-29 16:51:53 |
|
|
|
* @LastEditTime: 2024-04-01 09:24:33 |
|
|
|
* @LastEditors: zhp |
|
|
|
* @Description: |
|
|
|
--> |
|
|
@@ -40,6 +40,12 @@ |
|
|
|
<top-radio-group /> |
|
|
|
</div> --> |
|
|
|
<!-- 像下面这样表格里的limit值,也许可以用js动态计算出来 --> |
|
|
|
<div class="myLegend"> |
|
|
|
<div class="barLegend"></div> |
|
|
|
<h4 class="barText">产线产量</h4> |
|
|
|
<div class="barCircle"></div> |
|
|
|
<h4 class="barCircleText">产线良品率</h4> |
|
|
|
</div> |
|
|
|
<double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" |
|
|
|
:height="359" :show-legend="true" /> |
|
|
|
</base-container> |
|
|
@@ -64,11 +70,11 @@ |
|
|
|
</div> --> |
|
|
|
<!-- <el-row :gutter="9"> --> |
|
|
|
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> --> |
|
|
|
<pile-bar-chart style="margin-top: -5px;" ref="firstPileChart" :height="80" /> |
|
|
|
<pile-bar-chart id=" 'one' " style="margin-top: -5px;" ref="firstPileChart" :height="80" /> |
|
|
|
<second-pile-bar-chart id=" 'second' " ref="secondPileChart" :height="90" /> |
|
|
|
<third-pile-bar-chart id=" 'third' " ref="thirdPileChart" :height="90" /> |
|
|
|
<fourth-pile-bar-chart id=" 'fourth' " ref="fourthPileChart" :height="90" /> |
|
|
|
<fifth-pile-bar-chart style="margin-top: -5px;" id=" 'fifth' " ref="fifthPileChart" :height="100" /> |
|
|
|
<fifth-pile-bar-chart style="margin-top: -5px;" id=" 'fifth' " ref="fifthPileChart" :height="90" /> |
|
|
|
<!-- <pile-bar-chart ref="secondPileChart" |
|
|
|
:height="90" /> |
|
|
|
<pile-bar-chart ref="thirdPileChart" |
|
|
@@ -314,88 +320,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
let nameList = [] |
|
|
|
let nameWasteList = [] |
|
|
|
let topNameList = [] |
|
|
|
let productList = [] |
|
|
|
let wasteList = [] |
|
|
|
let yieldList = [] |
|
|
|
let sumAreaList = [] |
|
|
|
// let yieldList = [] |
|
|
|
// this.cutTableDataList = |
|
|
|
let coldDetData = [ |
|
|
|
{ |
|
|
|
"first": 0.8834, |
|
|
|
"lineName": "Y61", |
|
|
|
"product": 0.8834, |
|
|
|
"productArea": 35069.28, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 38400, |
|
|
|
'wastArea': 3330.72, |
|
|
|
"yield": 0.9133 |
|
|
|
}, |
|
|
|
{ |
|
|
|
"first": 0.847, |
|
|
|
"lineName": "Y62", |
|
|
|
"product": 0.847, |
|
|
|
"productArea": 26765.46, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 1111111, |
|
|
|
'wastArea': 22222, |
|
|
|
"yield": 0.9133 |
|
|
|
}, |
|
|
|
{ |
|
|
|
"first": 0.8668, |
|
|
|
"lineName": "Y63", |
|
|
|
"product": 0.8668, |
|
|
|
"productArea": 26448.46, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 1111111, |
|
|
|
'wastArea': 22222, |
|
|
|
"yield": 0.9133 |
|
|
|
}, |
|
|
|
{ |
|
|
|
"first": 0.9064, |
|
|
|
"lineName": "Y64", |
|
|
|
"product": 0.9064, |
|
|
|
"productArea": 26667.32, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 1111111, |
|
|
|
'wastArea': 22222, |
|
|
|
"yield": 0.9133 |
|
|
|
}, |
|
|
|
{ |
|
|
|
"first": 0.8838, |
|
|
|
"lineName": "Y65", |
|
|
|
"product": 0.8838, |
|
|
|
"productArea": 26554.32, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 1111111, |
|
|
|
'wastArea': 22222, |
|
|
|
"yield": 0.9133 |
|
|
|
} |
|
|
|
] |
|
|
|
coldDetData.forEach((ele, index) => { |
|
|
|
nameList.push(ele.lineName) |
|
|
|
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡') |
|
|
|
productList.push(ele.productArea) |
|
|
|
wasteList.push(ele.wastArea) |
|
|
|
nameWasteList.push('缺陷面积:' + ele.wastArea + '㎡') |
|
|
|
// yieldList.push({ |
|
|
|
// name: '良品', |
|
|
|
// yield:ele.yield |
|
|
|
// }) |
|
|
|
sumAreaList.push(ele.sumArea) |
|
|
|
yieldList.push((ele.yield * 100).toFixed(3)) |
|
|
|
}) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList) |
|
|
|
this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) |
|
|
|
this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]]) |
|
|
|
this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]]) |
|
|
|
this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]]) |
|
|
|
this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]]) |
|
|
|
}) |
|
|
|
this.getProductData() |
|
|
|
// this.$refs.productChart.initChart(nameList, yieldList, sumAreaList) |
|
|
|
this.getTimes() |
|
|
|
// console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss')); |
|
|
@@ -417,6 +342,90 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getProductData() { |
|
|
|
let nameList = [] |
|
|
|
let nameWasteList = [] |
|
|
|
let topNameList = [] |
|
|
|
let productList = [] |
|
|
|
let wasteList = [] |
|
|
|
let yieldList = [] |
|
|
|
let sumAreaList = [] |
|
|
|
// let yieldList = [] |
|
|
|
// this.cutTableDataList = |
|
|
|
let coldDetData = [ |
|
|
|
{ |
|
|
|
"first": 0.8834, |
|
|
|
"lineName": "Y61", |
|
|
|
"product": 0.8834, |
|
|
|
"productArea": 35069.28, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 38400, |
|
|
|
'wastArea': 3330.72, |
|
|
|
"yield": 0.9133 |
|
|
|
}, |
|
|
|
{ |
|
|
|
"first": 0.847, |
|
|
|
"lineName": "Y62", |
|
|
|
"product": 0.847, |
|
|
|
"productArea": 26765.46, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 1111111, |
|
|
|
'wastArea': 22222, |
|
|
|
"yield": 0.9133 |
|
|
|
}, |
|
|
|
{ |
|
|
|
"first": 0.8668, |
|
|
|
"lineName": "Y63", |
|
|
|
"product": 0.8668, |
|
|
|
"productArea": 26448.46, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 1111111, |
|
|
|
'wastArea': 22222, |
|
|
|
"yield": 0.9133 |
|
|
|
}, |
|
|
|
{ |
|
|
|
"first": 0.9064, |
|
|
|
"lineName": "Y64", |
|
|
|
"product": 0.9064, |
|
|
|
"productArea": 26667.32, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 1111111, |
|
|
|
'wastArea': 22222, |
|
|
|
"yield": 0.9133 |
|
|
|
}, |
|
|
|
{ |
|
|
|
"first": 0.8838, |
|
|
|
"lineName": "Y65", |
|
|
|
"product": 0.8838, |
|
|
|
"productArea": 26554.32, |
|
|
|
"second": 0, |
|
|
|
'sumArea': 1111111, |
|
|
|
'wastArea': 22222, |
|
|
|
"yield": 0.9133 |
|
|
|
} |
|
|
|
] |
|
|
|
coldDetData.forEach((ele, index) => { |
|
|
|
nameList.push(ele.lineName) |
|
|
|
topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea + '㎡') |
|
|
|
productList.push(ele.productArea) |
|
|
|
wasteList.push(ele.wastArea) |
|
|
|
nameWasteList.push('缺陷面积:' + ele.wastArea + '㎡') |
|
|
|
// yieldList.push({ |
|
|
|
// name: '良品', |
|
|
|
// yield:ele.yield |
|
|
|
// }) |
|
|
|
sumAreaList.push(ele.sumArea) |
|
|
|
yieldList.push((ele.yield * 100).toFixed(3)) |
|
|
|
}) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList) |
|
|
|
this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) |
|
|
|
this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]]) |
|
|
|
this.$refs.thirdPileChart.initChart(nameList, [topNameList[2]], [nameWasteList[2]], [productList[2]], [wasteList[2]]) |
|
|
|
this.$refs.fourthPileChart.initChart(nameList, [topNameList[3]], [nameWasteList[3]], [productList[3]], [wasteList[3]]) |
|
|
|
this.$refs.fifthPileChart.initChart(nameList, [topNameList[4]], [nameWasteList[4]], [productList[4]], [wasteList[4]]) |
|
|
|
}) |
|
|
|
}, |
|
|
|
getData() { |
|
|
|
let detData = [ |
|
|
|
{ |
|
|
@@ -784,7 +793,37 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
.myLegend{ |
|
|
|
position: absolute; |
|
|
|
top: -20px; |
|
|
|
right: 50px; |
|
|
|
font-size: 12px; |
|
|
|
color: rgba(255,255,255,.6); |
|
|
|
.barLegend{ |
|
|
|
// float: left; |
|
|
|
background: linear-gradient(#9DD5FF, #1295FF); |
|
|
|
width: 10px; |
|
|
|
height: 10px; |
|
|
|
display: inline-block; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
.barText{ |
|
|
|
// float: right; |
|
|
|
display: inline-block; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
.barCircle{ |
|
|
|
width: 7px; |
|
|
|
height: 7px; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: rgba(255, 209, 96, 1); |
|
|
|
display: inline-block; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
.barCircleText{ |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
} |
|
|
|
.visual-container { |
|
|
|
width: 1920px; |
|
|
|
height: 1080px; |
|
|
|