mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

projects/mesxc-lb #289

Merged
juzi merged 3 commits from projects/mesxc-lb into projects/mesxc-test 2024-03-28 16:00:19 +08:00
Conversation 0 Commits 3 Files Changed 13 +434 -245
9 changed files with 434 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fa746ab9b0 - Show all commits

BIN
src/assets/img/1.png Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 75 KiB

BIN
src/assets/img/OperationalOverview/AGV.png Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 126 KiB

After

Width:  |  Height:  |  Size: 126 KiB

BIN
src/assets/img/large.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

20
src/views/OperationalOverview/AGVBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-03-27 10:25:15
* @LastEditTime: 2024-03-27 15:42:39
* @Description:
-->
<template>
@ -16,7 +16,7 @@
许昌安彩AGV原片周转看板
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3>
<!-- <el-button
<el-button
type="text"
class="title-button"
:style="{ right: 33 + 'px', top: 37 + 'px' }"
@ -24,7 +24,7 @@
>
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
</el-button> -->
</el-button>
</el-row>
<el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
@ -383,18 +383,18 @@ export default {
this.isFullScreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
if (screenfull.isEnabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
if (screenfull.isEnabled) {
screenfull.off('change', this.change)
}
},
changeFullScreen() {
console.log(this.beilv);
if (!screenfull.enabled) {
if (!screenfull.isEnabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
@ -421,16 +421,16 @@ export default {
// opacity: .8;
.container-title {
width: 100%;
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
background: url('../../assets/img/OperationalOverview/AGV.png') no-repeat;
background-size: 100% 100%;
color: #00fff0;
text-align: center;
letter-spacing: 8px;
word-spacing: 8px;
// word-spacing: 8px;
position: relative;
.unit{
position: absolute;
left: 290px;
left: 240px;
top:25px;
color: rgba($color: #ffffff, $alpha: 8);
font-size: 20px;
@ -438,7 +438,7 @@ export default {
}
.time{
position: absolute;
left: 1360px;
left: 1400px;
top:25px;
color: rgba($color: #ffffff, $alpha: 8);
font-size: 20px;

143
src/views/OperationalOverview/coldBoard.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-01-29 16:50:26
* @LastEditTime: 2024-03-27 10:58:39
* @LastEditTime: 2024-03-27 17:02:27
* @LastEditors: zhp
* @Description:
-->
@ -17,15 +17,11 @@
许昌安彩冷端看板
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3>
<!-- <el-button
type="text"
class="title-button"
:style="{ right: 33 + 'px', top: 37 + 'px' }"
@click="changeFullScreen"
>
<el-button type="text" class="title-button" :style="{ right: 33 + 'px', top: 37 + 'px' }"
@click="changeFullScreen">
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
</el-button> -->
</el-button>
</el-row>
<el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
@ -68,8 +64,19 @@
</div> -->
<!-- <el-row :gutter="9"> -->
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
<pile-bar-chart ref="pileChart" :name-list="EnergyMonitoringNameList" :data-list="EnergyMonitoringList"
:height="359" />
<pile-bar-chart style="margin-bottom: -15px" ref="firstPileChart" :height="90" />
<second-pile-bar-chart style="margin-bottom: -15px" id=" 'second' " ref="secondPileChart" :height="90" />
<third-pile-bar-chart style="margin-bottom: -15px" id=" 'third' " ref="thirdPileChart" :height="90" />
<fourth-pile-bar-chart style="margin-bottom: -15px" id=" 'fourth' " ref="fourthPileChart" :height="90" />
<fifth-pile-bar-chart style="margin-bottom: -15px" id=" 'fifth' " ref="fifthPileChart" :height="100" />
<!-- <pile-bar-chart ref="secondPileChart"
:height="90" />
<pile-bar-chart ref="thirdPileChart"
:height="90" />
<pile-bar-chart ref="fourthPileChart"
:height="90" />
<pile-bar-chart ref="fifthPileChart"
:height="90" /> -->
<!-- </el-col> -->
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-table3
@ -136,6 +143,11 @@ import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable'
import screenfull from 'screenfull'
import pileBarChart from './components/pileBarChart'
import secondPileBarChart from './components/pileBarChart'
import thirdPileBarChart from './components/pileBarChart'
import fourthPileBarChart from './components/pileBarChart'
import fifthPileBarChart from './components/pileBarChart'
import colorDiv from './components/colorDiv'
import moment from "moment";
import doubleYChart from './components/coldDoubleYChart'
@ -152,7 +164,11 @@ export default {
pileBarChart,
doubleYChart,
LinearBarChart,
ISRAChart
ISRAChart,
secondPileBarChart,
thirdPileBarChart ,
fourthPileBarChart,
fifthPileBarChart ,
},
data() {
return {
@ -256,6 +272,13 @@ export default {
},
watch: {
isFullScreen: function (val) {
if (val) {
this.beilv = document.body.offsetWidth / 1920
} else {
this.beilv = document.getElementById('container').offsetWidth / 1920
}
},
clientWidth(val) {
if (!this.timer) {
this.clientWidth = val
@ -287,21 +310,92 @@ export default {
}
},
mounted() {
console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
// let nameList = []
// let nameWasteList = []
// let topNameList = []
// let productList = []
// let wasteList = []
// // 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,
// "waste": 0.1166
// },
// {
// "first": 0.847,
// "lineName": "Y62",
// "product": 0.847,
// "productArea": 26765.46,
// "second": 0,
// 'sumArea': 1111111,
// 'wastArea': 22222,
// "waste": 0.153
// },
// {
// "first": 0.8668,
// "lineName": "Y63",
// "product": 0.8668,
// "productArea": 26448.46,
// "second": 0,
// 'sumArea': 1111111,
// 'wastArea': 22222,
// "waste": 0.1332
// },
// {
// "first": 0.9064,
// "lineName": "Y64",
// "product": 0.9064,
// "productArea": 26667.32,
// "second": 0,
// 'sumArea': 1111111,
// 'wastArea': 22222,
// "waste": 0.0936
// },
// {
// "first": 0.8838,
// "lineName": "Y65",
// "product": 0.8838,
// "productArea": 26554.32,
// "second": 0,
// 'sumArea': 1111111,
// 'wastArea': 22222,
// "waste": 0.1162
// }
// ]
// 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)
// // sumAreaList.push(ele.sumArea)
// // yieldList.push((ele.yield * 100).toFixed(3))
// })
// 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[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
// this.$refs.fourthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
// this.$refs.fifthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
// this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
this.getTimes()
// console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
this.funInitWebSocket()
// if (num > 0) {
if (!this.wsIsOpen) {
getDcsMsg()
this.wsIsOpen = true
console.log('开启websocket==========')
}
// } else {
// }
this.CutInitWebSocket()
this.SJGInitWebSocket()
// this.getList()
this.getTimes()
const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
window.onresize = () => {
@ -453,7 +547,11 @@ export default {
sumAreaList.push(ele.sumArea)
yieldList.push((ele.yield * 100).toFixed(3))
})
this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
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[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
this.$refs.fourthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
this.$refs.fifthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]])
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
}
};
@ -674,21 +772,22 @@ export default {
this.beilv2 = this.clientWidth / 1920
},
change() {
console.log(this.isFullScreen);
this.isFullScreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
if (screenfull.isEnabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
if (screenfull.isEnabled) {
screenfull.off('change', this.change)
}
},
changeFullScreen() {
this.containerWidth = 223223223
if (!screenfull.enabled) {
if (!screenfull.isEnabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'

32
src/views/OperationalOverview/components/doubleYChart .vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-03-26 16:16:50
* @LastEditTime: 2024-03-27 14:37:35
* @LastEditors: zhp
* @Description:
-->
@ -147,6 +147,17 @@ export default {
]
// const colors = ['#5470C6', '#91CC75', '#EE6666']
this.chart = echarts.init(document.getElementById(this.id))
if (!nameList && !passRateList && !outputNumList) {
// 隐藏echarts图表
this.chart.clear(); // 清空图表
this.chart.setOption({ // 设置空的option
title: {
show: false
},
series: []
});
} else {
// 显示echarts图表
this.chart.setOption({
// color: colors,
tooltip: {
@ -155,7 +166,7 @@ export default {
type: 'cross'
}
},
grid: { top: 90, right: 60, bottom: 20, left: 90 },
grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
legend: {
itemWidth: 10,
itemHeight: 10,
@ -214,9 +225,9 @@ export default {
axisLine: {
show: true,
lineStyle: {
type: 'solid',
// type: 'solid',
color: '#25528f',
width: '1' // 坐标线的宽度
// width: '1' // 坐标线的宽度
}
},
axisLabel: {
@ -259,18 +270,19 @@ export default {
axisLine: {
show: true,
lineStyle: {
type: 'solid',
// type: 'solid',
color: '#25528f', // 左边线的颜色
width: '1' // 坐标线的宽度
// width: '1' // 坐标线的宽度
}
},
axisLabel: {
// textStyle: {
// color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
color: "#fff",
fontSize: 12,
// formatter: '{value}'
formatter: '{value} 片'
// show: true,
lineStyle: {
color: "#25528f",
},
// }
},
splitLine: {
@ -290,6 +302,8 @@ export default {
series: series
})
}
}
}
}
</script>

19
src/views/OperationalOverview/components/linearBarChart.vue
View File

@ -87,8 +87,17 @@ export default {
// console.log('1111', dataList);
// console.log(1)
this.chart = echarts.init(document.getElementById(this.id))
// if (dataList.length !== 0) {
// this.$set(this.series, "data", dataList);
if (!nameList && !dataList) {
// 隐藏echarts图表
this.chart.clear(); // 清空图表
this.chart.setOption({ // 设置空的option
title: {
show: false
},
series: []
});
} else {
// 显示echarts图表
this.series = [{
type: 'bar',
data: dataList,
@ -123,7 +132,7 @@ export default {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: { top: 90, right: 60, bottom: 20, left: 90 },
grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
// legend: {
// itemWidth: 10,
// itemHeight: 10,
@ -196,6 +205,10 @@ export default {
series: this.series
})
}
// if (dataList.length !== 0) {
// this.$set(this.series, "data", dataList);
}
}
}
</script>

26
src/views/OperationalOverview/components/pileBarChart.vue
View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-12-27 13:54:52
* @LastEditTime: 2024-03-26 10:50:30
* @LastEditTime: 2024-03-27 16:50:04
* @LastEditors: zhp
* @Description:
-->
@ -42,7 +42,7 @@ export default {
},
height: {
type: Number,
default: 200
default: 100
},
showLegend: {
type: Boolean,
@ -127,23 +127,31 @@ export default {
) : []
};
});
// this.charts.resize({
// //width: width,
// //height: height,
// // es6解构
// width,
// height
// })
this.chart.setOption({
legend: {
itemWidth: 12,
itemHeight: 12,
top:'10',
bottom: '20',
left: '20',
icon: 'rect',
textStyle: {
color: '#ffffff'
}
},
grid: {
top:'80',
top:'0',
left: '3%',
right: '4%',
// bottom: '3%',
width: 'auto',
height: '300',
height: '95',
containLabel: true
},
yAxis: [
@ -170,7 +178,7 @@ export default {
verticalAlign: 'bottom',
fontSize: 12,
align: 'left',
padding: [0, 0, 15, -5]
padding: [0, 0, 10, -5]
}
},
data: topNameList
@ -198,7 +206,7 @@ export default {
verticalAlign: 'bottom',
fontSize: 12,
align: 'right',
padding: [0, 0, 15, -5]
padding: [0, 0, 10, -5]
}
},
data: nameWasteList
@ -210,6 +218,10 @@ export default {
},
series:series
})
this.chart.resize({
width: 'auto',
height: 90
});;
}
}
}

63
src/views/OperationalOverview/processingBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-03-27 11:08:13
* @LastEditTime: 2024-03-27 16:13:14
* @Description:
-->
<template>
@ -16,6 +16,11 @@
许昌安彩深加工看板
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3>
<el-button type="text" class="title-button" :style="{ right: 33 + 'px', top: 37 + 'px' }"
@click="changeFullScreen">
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
</el-button>
</el-row>
<el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;">
@ -39,7 +44,7 @@
<!-- <el-col :span="12"> -->
<p class="now-secondary-title">{{ op.name }}</p>
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white"
:percentage="op.progressRate * 100" class="custom-progress-bar" />
:percentage="op.progressRate" class="custom-progress-bar" />
</el-row>
</div>
<!-- </div> -->
@ -271,6 +276,52 @@ export default {
this.SJGWebsocketClose()
},
mounted() {
let detData = [
{
id:'1',
name: '测试工单',
progressRate:0.933333
},
{
id: '2',
name: '测试工单2',
progressRate: 0.932323
}, {
id: '3',
name: '测试工单3',
progressRate: 0.23232
}, {
id: '4',
name: '测试工单4',
progressRate: 0.32323
}, {
id: '5',
name: '测试工单',
progressRate: 0.5555
}, {
id: '6',
name: '测试工单',
progressRate: 0.66564
},
]
this.orderList = detData.map((ele, index) => {
if (ele.progressRate && ele.progressRate != 1) {
return {
id: ele.id,
name: ele.name,
progressRate: parseFloat((ele.progressRate * 100).toFixed(3))
}
}
});
let EnergyNameList = ['Y61', 'Y62', 'Y63', 'Y64', 'Y65',]
this.EnergyMonitoringNameList = EnergyNameList
let EnergyDataList = [1, 2, 3, 4, 5]
// this.wsData.data.forEach((ele) => {
// EnergyDataList.push(ele.useQuantity)
// })
this.EnergyMonitoringList = EnergyDataList
// console.log(EnergyDataList)
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
let eqArr = this.qualityYearList.map((item, index) => [
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
@ -452,7 +503,7 @@ export default {
return {
id: ele.id,
name: ele.name,
progressRate: ele.progressRate.toFixed(3)
progressRate: parseFloat((ele.progressRate * 100).toFixed(3))
}
}
});
@ -616,18 +667,18 @@ export default {
this.isFullScreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
if (screenfull.isEnabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
if (screenfull.isEnabled) {
screenfull.off('change', this.change)
}
},
changeFullScreen() {
this.containerWidth = 223223223
if (!screenfull.enabled) {
if (!screenfull.isEnabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'