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

修改ui

Browse Source
This commit is contained in:
‘937886381’
2024-03-28 15:36:39 +08:00
parent b8c39e8095
commit 04cea7a199
9 changed files with 320 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
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 15:42:39
* @LastEditTime: 2024-03-28 15:28:07
* @Description:
-->
<template>
@@ -16,35 +16,32 @@
许昌安彩AGV原片周转看板
<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 type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px', fontSize: '32px' }"
@click="changeFullScreen">
<svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon width="32" height="32" 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 * beilv" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :size="'middle'" :title="'搬运任务'" :title-icon="'task'" :back="'energy'">
<base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
:table-data="qualityYearList" />
<base-container :beilv="1" :size="'eqStatus'" :title="'搬运任务'" :title-icon="'task'" :back="'energy'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
:table-data="qualityYearList" /> -->
<dv-scroll-board :config="taskConfig" style="width:100%;height:350px" ref='taskScrollBoard' />
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
<div style="width:100%; overflow: hidden scroll;">
<base-container :beilv="1" :size="'eqStatus'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
<div class="order" style="width:100%; overflow: hidden scroll;height: 350px;">
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
{{ op.name }}
</p>
<p v-else class="now-secondary-title">{{ op.name }}</p>
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white" :percentage="op.outRate * 100"
class="custom-progress-bar" />
<el-progress :stroke-width="10" define-back-color="rgba(32, 57, 96, 1)" text-color="white"
:percentage="op.outRate * 100" class="custom-progress-bar" />
</el-row>
</div>
</base-container>
@@ -53,17 +50,19 @@
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :height="256" :size="'middle'" :title="'库存管理'" :title-icon="'productLine'"
<base-container :beilv="1" :height="280" :size="'eqStatus'" :title="'库存管理'" :title-icon="'productLine'"
:back="'energy'">
<base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
:table-data="inventoryList" />
<!-- <base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
:table-data="inventoryList" /> -->
<dv-scroll-board :config="inventoryConfig" style="width:100%;height:380px" ref='inventoryScrollBoard' />
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :height="318 + 338 + 16" :size="'middle'" :title="'库位信息'" :title-icon="'info'"
<base-container :beilv="1" :height="318 + 338 + 16" :size="'eqStatus'" :title="'库位信息'" :title-icon="'info'"
:back="'energy'">
<base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
:table-data="locationList" />
<!-- <base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
:table-data="locationList" /> -->
<dv-scroll-board :config="locationConfig" style="width:100%;height:380px" ref='locationScrollBoard' />
</base-container>
</el-col>
</el-row>
@@ -191,6 +190,15 @@ const inventoryList = [
{
eqName: ' 螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日'
},
{
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
},
{
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
},
{
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
},
{
eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
}
@@ -267,6 +275,39 @@ export default {
inventoryTableProps,
inventoryList,
locationList,
taskConfig: {
header: ['序号', '作业号', '执行叉车', '库位', '成品规格', '成品编码', '时间'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [80, 120, 90, 140, 140, 150,130],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
inventoryConfig: {
header: ['序号', '物件名称', '存放区域', '规格', '数量', '单位', '编码', '入库时间'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [80, 100, 90, 140, 80, 70, 180, 120],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
locationConfig: {
header: ['序号', '库位名称', '存放物件名称', '数量', '存放位置', '编码', '单位', '入库时间'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [80, 100, 120, 80, 100, 180, 70, 120],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
locationTableProps,
qualityYearList,
isFullScreen: false,
@@ -294,6 +335,20 @@ export default {
{
name: '作业号RQ20230911',
outRate: '0.4'
},
{
name: '作业号RQ20230911',
outRate: '0.4'
},
{
name: '作业号RQ20230911',
outRate: '0.4'
}, {
name: '作业号RQ20230911',
outRate: '0.4'
}, {
name: '作业号RQ20230911',
outRate: '0.4'
}
],
// qualityTableProps1,
@@ -316,6 +371,16 @@ export default {
},
watch: {
isFullScreen: function (val) {
if (val) {
const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
console.log(_this.beilv2);
} else {
const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
}
},
clientWidth(val) {
if (!this.timer) {
this.clientWidth = val
@@ -343,6 +408,9 @@ export default {
}, 86400000)
},
mounted() {
this.getTask()
this.getInventoryData()
this.getLocationData()
const _this = this;
window.onresize = () => {
return (() => {
@@ -355,6 +423,60 @@ export default {
getTimes() {
setInterval(this.getTimesInterval, 1000);
},
getTask() {
let eqArr = this.qualityYearList.map((item, index) => [
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${item.eqName || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
])
this.taskConfig.data = eqArr
this.$refs['taskScrollBoard'].updateRows(eqArr)
},
getInventoryData() {
let eqArr = this.inventoryList.map((item, index) => [
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${item.eqName || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.unit || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
])
this.inventoryConfig.data = eqArr
this.$refs['inventoryScrollBoard'].updateRows(eqArr)
},
getLocationData() {
let eqArr = this.locationList.map((item, index) => [
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${item.eqName || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.eqCode || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.product || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.level || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.productCode || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.unit || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
])
this.locationConfig.data = eqArr
this.$refs['locationScrollBoard'].updateRows(eqArr)
},
getTimesInterval: function () {
let _this = this;
let year = new Date().getFullYear(); //获取当前时间的年份
@@ -401,7 +523,7 @@ export default {
})
return false
}
screenfull.toggle(this.$refs.container)
screenfull.toggle()
}
}
}
@@ -428,22 +550,22 @@ export default {
letter-spacing: 8px;
// word-spacing: 8px;
position: relative;
.unit{
position: absolute;
left: 240px;
top:25px;
color: rgba($color: #ffffff, $alpha: 8);
font-size: 20px;
letter-spacing: 0px;
}
.time{
position: absolute;
left: 1400px;
top:25px;
color: rgba($color: #ffffff, $alpha: 8);
font-size: 20px;
letter-spacing: 0px;
}
.unit {
position: absolute;
left: 240px;
top: 25px;
color: rgba(255, 255, 255, 0.80);
font-size: 20px;
letter-spacing: 0px;
}
.time {
position: absolute;
left: 1400px;
top: 25px;
color: rgba(255, 255, 255, 0.80);
font-size: 20px;
letter-spacing: 0px;
}
.title-button {
color: #00fff0;
font-size: 20px;
@@ -495,7 +617,9 @@ export default {
// .container-main {
// padding: 5px;
// }
.order::-webkit-scrollbar{
display: none
}
</style>
<style lang="scss" >

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

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-01-29 16:50:26
* @LastEditTime: 2024-03-27 17:02:27
* @LastEditTime: 2024-03-28 14:44:45
* @LastEditors: zhp
* @Description:
-->
@@ -17,7 +17,7 @@
许昌安彩冷端看板
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3>
<el-button type="text" class="title-button" :style="{ right: 33 + 'px', top: 37 + 'px' }"
<el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px',fontSize:'32px'}"
@click="changeFullScreen">
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
@@ -97,21 +97,21 @@
</div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<el-col :span="8" style="">
<div style="font-size:20px;margin: 5px 0 10px 0">熔化风机</div>
<div style="color:rgba(82, 255, 248, 1);font-size:20px;margin: 5px 0 10px 0">熔化风机</div>
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="funList" /> -->
<dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' />
</el-col>
<span class="eqLine"></span>
<el-col :span="8">
<div style="font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
<div style="color:rgba(82, 255, 248, 1);font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="annealFunList" /> -->
<dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' />
</el-col>
<span class="eqLineTwo"></span>
<el-col :span="8" style="float: right;">
<div style="font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
<div style="color:rgba(82, 255, 248, 1);font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
:table-data="realEqList" /> -->
<dv-scroll-board :config="realEqConfig" style="width:100%;height:310px" ref='realEqScrollBoard' />
@@ -274,9 +274,12 @@ export default {
watch: {
isFullScreen: function (val) {
if (val) {
this.beilv = document.body.offsetWidth / 1920
const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
console.log(_this.beilv2);
} else {
this.beilv = document.getElementById('container').offsetWidth / 1920
const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
}
},
clientWidth(val) {
@@ -310,80 +313,85 @@ export default {
}
},
mounted() {
// 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]])
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.$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.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
this.getTimes()
@@ -480,7 +488,7 @@ export default {
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.run || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.run == '运行' ? 'width:10px;height:10px;border-radius: 50%;backdrop-filter: blur(5px);background-color: blue;float:left;margin:12px 10px 0 0 ' : 'width:10px;height:10px;border-radius: 50%; backdrop-filter: blur(5px); background-color: yellow;float:left;margin:12px 10px 0 0 '}"></div> ${item.run || ''}</span>`,
])
}
this.realEqConfig.data = this.realEqList
@@ -545,7 +553,7 @@ export default {
wasteList.push(ele.wastArea)
nameWasteList.push('缺陷面积:' + ele.wastArea)
sumAreaList.push(ele.sumArea)
yieldList.push((ele.yield * 100).toFixed(3))
yieldList.push(parseFloat((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]])
@@ -593,7 +601,7 @@ export default {
</span>`,
`<span style="color:rgba(255,255,255,0.5)" >${i || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)"><div style="${this.funWsData.data.annealFanInfo[i] == '3片' ? 'width:10px;height:10px;border-radius: 50%; background-color: blue;float:left;margin:12px 10px 0 0 ' : 'width:10px;height:10px;border-radius: 50%; background-color: yellow;float:left;margin:12px 10px 0 0 '}"></div> ${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)"><div style="${this.funWsData.data.annealFanInfo[i] == '运行' ? 'width:10px;height:10px;border-radius: 50%; background-color: blue;float:left;margin:12px 10px 0 0 ' : 'width:10px;height:10px;border-radius: 50%; background-color: yellow;float:left;margin:12px 10px 0 0 '}"></div> ${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)"> ${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
])
}
@@ -608,7 +616,7 @@ export default {
arr.push([
`<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)" >${i || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)"><div style="${this.funWsData.data.fanInfo[i] == '3片' ? 'width:10px;height:10px;border-radius: 50%; background-color: blue;float:left;margin:12px 10px 0 0 ' : 'width:10px;height:10px;border-radius: 50%; background-color: yellow;float:left;margin:12px 10px 0 0 '}"></div> ${this.funWsData.data.fanInfo[i] || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)"><div style="${this.funWsData.data.fanInfo[i] == '运行' ? 'width:10px;height:10px;border-radius: 50%; backdrop-filter: blur(5px);background-color: blue;float:left;margin:12px 10px 0 0 ' : 'width:10px;height:10px;border-radius: 50%; backdrop-filter: blur(5px); background-color: yellow;float:left;margin:12px 10px 0 0 '}"></div> ${this.funWsData.data.fanInfo[i] || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
])
}
@@ -794,7 +802,7 @@ export default {
})
return false
}
screenfull.toggle(this.$refs.container)
screenfull.toggle()
}
}
}
@@ -884,6 +892,10 @@ export default {
top: 2em;
}
.screen-btn {
color: #00fff0;
font-size: 32px;
}
// .container-main {
// padding: 5px;
// }
@@ -972,6 +984,7 @@ background: linear-gradient(to bottom,rgba(60,
margin-left: 3em;
}
}
</style>
<style scoped>
@@ -1030,4 +1043,5 @@ background: linear-gradient(to bottom,rgba(60,
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>

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

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-03-27 14:37:35
* @LastEditTime: 2024-03-28 14:25:51
* @LastEditors: zhp
* @Description:
-->
@@ -112,7 +112,7 @@ export default {
}
// barBorderRadius: this.borderRadius
},
barWidth: 12,
barWidth: 18,
data: outputNumList
},
{
@@ -166,7 +166,7 @@ export default {
type: 'cross'
}
},
grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
grid: { top: 90, right: 60, bottom: 20, left: 20, containLabel: true },
legend: {
itemWidth: 10,
itemHeight: 10,

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

@@ -118,7 +118,7 @@ export default {
}
// barBorderRadius: this.borderRadius
},
barWidth: 12,
barWidth: 18,
}]
// }
// if (nameList.length !== 0) {
@@ -132,7 +132,7 @@ export default {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true },
grid: { top: 90, right: 60, bottom: 20, left: 30, containLabel: true },
// legend: {
// itemWidth: 10,
// itemHeight: 10,

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

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-12-27 13:54:52
* @LastEditTime: 2024-03-27 16:50:04
* @LastEditTime: 2024-03-28 14:21:03
* @LastEditors: zhp
* @Description:
-->
@@ -102,7 +102,7 @@ export default {
}
totalData.push(sum);
}
console.log('total', totalData);
console.log('total', totalData)
this.chart = echarts.init(document.getElementById(this.id))
const series = [
'良品',
@@ -116,11 +116,11 @@ export default {
name,
type: 'bar',
stack: 'total',
barWidth: 10,
label: {
show: true,
formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
},
barWidth: 12,
// label: {
// show: true,
// formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
// },
color:colors[sid],
data: rawData.length != 0 ? rawData[sid].map((d, did) =>
totalData[did] <= 0 ? 0 : d / totalData[did]
@@ -136,6 +136,13 @@ export default {
// })
this.chart.setOption({
legend: {
formatter: function (name) {
//通过name获取到数组对象中的单个对象
let singleData = series.filter(function (item) {
return item.name == name
})
return name + parseFloat((singleData[0].data * 100).toFixed(3)) + '%'
},
itemWidth: 12,
itemHeight: 12,
bottom: '20',

54
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 16:13:14
* @LastEditTime: 2024-03-28 15:31:07
* @Description:
-->
<template>
@@ -16,7 +16,7 @@
许昌安彩深加工看板
<h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3>
<el-button type="text" class="title-button" :style="{ right: 33 + 'px', top: 37 + 'px' }"
<el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px', fontSize: '32px' }"
@click="changeFullScreen">
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
@@ -27,10 +27,8 @@
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
<dv-scroll-board class="eqTable" :config="eqConfig" style="width:100%;height:350px" ref='eqScrollBoard' />
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
<dv-scroll-board :config="processConfig" style="width:100%;height:350px" ref='processScrollBoard' />
@@ -39,11 +37,12 @@
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
<div style="width:100%; overflow: hidden scroll;">
<div class="order" style="width:100%; overflow: hidden scroll;height: 350px;">
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
<!-- <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"
<el-progress :stroke-width="10" define-back-color="rgba(32, 57, 96, 1)" text-color="white"
:percentage="op.progressRate" class="custom-progress-bar" />
</el-row>
</div>
@@ -250,6 +249,16 @@ export default {
},
watch: {
isFullScreen: function (val) {
if (val) {
const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
console.log(_this.beilv2);
} else {
const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
}
},
clientWidth(val) {
if (!this.timer) {
this.clientWidth = val
@@ -294,15 +303,16 @@ export default {
id: '4',
name: '测试工单4',
progressRate: 0.32323
}, {
id: '5',
name: '测试工单',
progressRate: 0.5555
}, {
id: '6',
name: '测试工单',
progressRate: 0.66564
},
}
// {
// id: '5',
// name: '测试工单',
// progressRate: 0.5555
// }, {
// id: '6',
// name: '测试工单',
// progressRate: 0.66564
// },
]
this.orderList = detData.map((ele, index) => {
if (ele.progressRate && ele.progressRate != 1) {
@@ -685,7 +695,7 @@ export default {
})
return false
}
screenfull.toggle(this.$refs.container)
screenfull.toggle()
}
}
}
@@ -712,18 +722,17 @@ export default {
position: absolute;
left: 290px;
top: 25px;
letter-spacing: 0px;
color: rgba($color: #ffffff, $alpha: 8);
color: rgba(255, 255, 255, 0.80);
font-size: 20px;
letter-spacing: 0px;
}
.time {
position: absolute;
left: 1360px;
color: rgba(255, 255, 255, 0.80);
top: 25px;
letter-spacing: 0px;
color: rgba($color: #ffffff, $alpha: 8);
font-size: 20px;
letter-spacing: 0px;
}
.title-button {
color: #00fff0;
@@ -836,6 +845,9 @@ export default {
margin-left: 3em;
}
}
.order::-webkit-scrollbar {
display: none
}
</style>
<style scoped>