修改ui
Dieser Commit ist enthalten in:
‘937886381’
Ursprung
15358fd7e2
Commit
b0f44c2332
6
.env.dev
6
.env.dev
@ -1,7 +1,7 @@
|
||||
###
|
||||
# @Author: Do not edit
|
||||
# @Date: 2023-08-29 09:40:39
|
||||
# @LastEditTime: 2024-03-25 15:59:53
|
||||
# @LastEditTime: 2024-04-01 08:31:57
|
||||
# @LastEditors: zhp
|
||||
# @Description:
|
||||
###
|
||||
@ -13,14 +13,14 @@ VUE_APP_TITLE = MES系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
|
||||
VUE_APP_BASE_API = 'http://10.70.2.2:8080'
|
||||
# VUE_APP_BASE_API = 'http://10.70.2.2:8080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.20:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.47:48082'
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2024-03-29 16:25:59
|
||||
* @LastEditTime: 2024-04-01 09:12:56
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
|
||||
<div :id="id" class="coldProductChart" :style="{ height: '390px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -166,25 +166,25 @@ export default {
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
top: '5',
|
||||
right: '20px',
|
||||
data: [
|
||||
// { icon: 'rect', name: '直接访问' },
|
||||
{ icon: 'roundRect', name: '产线产量' },
|
||||
{
|
||||
icon: 'circle', name: '产线良品率',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
},
|
||||
],
|
||||
textStyle: {
|
||||
fontSize: 12 * this.beilv,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// itemWidth: 10,
|
||||
// itemHeight: 10,
|
||||
// top: '5',
|
||||
// right: '20px',
|
||||
// data: [
|
||||
// // { icon: 'rect', name: '直接访问' },
|
||||
// { icon: 'roundRect', name: '产线产量' },
|
||||
// // {
|
||||
// // icon: 'circle', name: '产线良品率',
|
||||
// // itemWidth: 7,
|
||||
// // itemHeight: 7,
|
||||
// // },
|
||||
// ],
|
||||
// textStyle: {
|
||||
// fontSize: 12 * this.beilv,
|
||||
// color: '#ced1d5'
|
||||
// }
|
||||
// },
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
@ -308,7 +308,8 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.productChart{
|
||||
|
||||
.coldProductChart{
|
||||
top: -10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -173,7 +173,7 @@ export default {
|
||||
itemHeight: 10,
|
||||
top: '0%',
|
||||
right: '20px',
|
||||
data: ['产线产量', '产线良品率'],
|
||||
data: ['产线良品率', '产线产量'],
|
||||
textStyle: {
|
||||
fontSize: 12 * this.beilv,
|
||||
color: '#ced1d5',
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-27 13:54:52
|
||||
* @LastEditTime: 2024-03-29 17:01:16
|
||||
* @LastEditTime: 2024-04-01 09:14:45
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" class="productChart" :style="{ height:'75px', width: width }" />
|
||||
<div :id="id" :style="{ height:'75px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -71,7 +71,10 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
// console.log('mounted')
|
||||
window.addEventListener('resize', () => {
|
||||
this.resize()
|
||||
})
|
||||
// console.log('borderRadius: ', this.borderRadius)
|
||||
// console.log('33333', this.dataList)
|
||||
// let arr = []
|
||||
@ -91,6 +94,12 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
resize() {
|
||||
this.chart.resize({
|
||||
width: 'auto',
|
||||
height: 90
|
||||
});;
|
||||
},
|
||||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
||||
let rawData = []
|
||||
let colors = ['#0fdedb', '#2359ec']
|
||||
@ -239,10 +248,15 @@ export default {
|
||||
},
|
||||
series:series
|
||||
})
|
||||
this.chart.resize({
|
||||
width: 'auto',
|
||||
height: 90
|
||||
});;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.resize()
|
||||
},1000);
|
||||
})
|
||||
// this.chart.resize({
|
||||
// width: 'auto',
|
||||
// height: 90
|
||||
// });;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Laden…
In neuem Issue referenzieren
Einen Benutzer sperren