修改ui
This commit is contained in:
parent
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,6 +320,29 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getProductData()
|
||||
// this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||||
this.getTimes()
|
||||
// console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
|
||||
this.funInitWebSocket()
|
||||
if (!this.wsIsOpen) {
|
||||
getDcsMsg()
|
||||
this.wsIsOpen = true
|
||||
console.log('开启websocket==========')
|
||||
}
|
||||
this.CutInitWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
const _this = this;
|
||||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
||||
this.beilv2 = _this.clientWidth / 1920
|
||||
})()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getProductData() {
|
||||
let nameList = []
|
||||
let nameWasteList = []
|
||||
let topNameList = []
|
||||
@ -396,27 +425,7 @@ export default {
|
||||
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.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
|
||||
this.getTimes()
|
||||
// console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
|
||||
this.funInitWebSocket()
|
||||
if (!this.wsIsOpen) {
|
||||
getDcsMsg()
|
||||
this.wsIsOpen = true
|
||||
console.log('开启websocket==========')
|
||||
}
|
||||
this.CutInitWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
const _this = this;
|
||||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
||||
this.beilv2 = _this.clientWidth / 1920
|
||||
})()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
// });;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user