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

Merge branch 'projects/mesxc-test' of git.picaiba.com:mt-fe-group/yudao-dev into projects/mesxc-test

Browse Source
This commit is contained in:
gtz
2024-01-18 14:13:45 +08:00
parent ec3b6100b3 ac3957e0c7
commit 60dd76f165
34 changed files with 1129 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-08 16:07:58
* @LastEditTime: 2024-01-18 14:06:05
* @Description:
-->
<template>
@@ -46,13 +46,15 @@
<!-- <el-row style="margin-bottom: 1em">
<p class="now-team-title">加工工单进度</p>
</el-row> -->
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
<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-row>
<!-- <el-row>
<el-progress :percentage="100" class="custom-progress-bar" />
@@ -403,13 +405,13 @@ const locationTableProps = [
prop: 'level',
label: '存放位置',
// subcomponent: alarmLevel,
align: 'center'
// align: 'center'
},
{
prop: 'unit',
label: '单位',
// subcomponent: alarmLevel,
align: 'center'
// align: 'center'
},
{
prop: 'product',
@@ -465,13 +467,13 @@ const inventoryTableProps = [
prop: 'level',
label: '规格',
// subcomponent: alarmLevel,
align: 'center'
// align: 'center'
},
{
prop: 'unit',
label: '单位',
// subcomponent: alarmLevel,
align: 'center'
// align: 'center'
},
{
prop: 'product',
@@ -517,7 +519,7 @@ const qualityYearTableProps = [
prop: 'level',
label: '库位',
// subcomponent: alarmLevel,
align: 'center'
// align: 'center'
},
{
prop: 'product',

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

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-11 15:54:50
* @LastEditTime: 2024-01-18 14:01:09
* @Description:
-->
<template>
@@ -29,14 +29,16 @@
<el-row class="container-main flex-col" type="flex">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
:table-data="cutTableDataList" />
<base-container :title="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
:table-data="cutTableDataList" /> -->
<dv-scroll-board :config="cutConfig" style="width:100%;height:350px" ref='cutScrollBoard' />
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'产量及良率统计'" :size="'small'" :title-icon="'energyMonitoring'">
<base-container :no-content-padding="true" :title="'产量及良率统计'" :size="'small'"
:title-icon="'energyMonitoring'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
@@ -48,15 +50,17 @@
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
:table-data="ISRAList" />
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
:table-data="ISRAList" /> -->
<dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' />
</base-container>
</el-col>
</el-row>
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="256" :title="'废片 缺陷数据'" :size="'middle'" :title-icon="'scrap'">
<base-container :no-content-padding="true" :height="256" :title="'废片 缺陷数据'" :size="'middle'"
:title-icon="'scrap'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
@@ -78,25 +82,30 @@
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
<base-container :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'" :title-icon="'eqMonitoring'">
<base-container :no-content-padding="true" :no-padding="true" :height="318 + 338 + 16" :size="'eqStatus'"
:title="'设备状态监控'" :title-icon="'eqMonitoring'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<el-col :span="6" style="">
<div style="font-size:20px;margin: 5px 0 10px 0">融化风机</div>
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="funList" />
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="funList" /> -->
<dv-scroll-board :config="funConfig" style="width:100%;height:350px" ref='funScrollBoard' />
</el-col>
<el-col :span="6">
<div style="font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="annealFunList" />
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="annealFunList" /> -->
<dv-scroll-board :config="annealFunConfig" style="width:100%;height:350px" ref='annealFunScrollBoard' />
</el-col>
<el-col :span="12" style="float: right;">
<div style="font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
:table-data="realEqList" />
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
:table-data="realEqList" /> -->
<dv-scroll-board :config="realEqConfig" style="width:100%;height:350px" ref='realEqScrollBoard' />
</el-col>
<!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
:show-legend="true" /> -->
@@ -136,11 +145,12 @@ import pileBarChart from './components/pileBarChart'
import colorDiv from './components/colorDiv'
// import axios from '@/utils/request'
import doubleYChart from './components/doubleYChart '
import doubleYChart from './components/coldDoubleYChart'
// import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例
// let resizeFun = null
import { parseTime } from '../core/mixins/code-filter';
import { formatDate } from '@/utils'
import LinearBarChart from './components/linearBarChart'
@@ -264,6 +274,61 @@ export default {
ISRATableProps,
orderList: [],
times: '',
cutConfig: {
header: ['序号', '产线', '时间', '规格', '良品面积', '废品面积', '良品率'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [70,70, 130, 150, 110,110,90],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
funConfig: {
header: ['序号', '设备名称', '运行状态'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60, 90, 90],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
realEqConfig: {
header: ['序号', '产线', '设备名称', '设备编码', '运行状态','故障状态'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60, 80, 90,90,90,90],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
annealFunConfig: {
header: ['序号', '设备名称', '运行状态'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60, 90, 90],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
ISRAConfig: {
header: ['序号', '产线', '时间', '缺陷类型', '缺陷数量', '占比'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [70, 70, 130, 150, 110, 110,],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
ISRAList:[],
EnergyMonitoringNameList: [],
equipmentList: [],
@@ -484,22 +549,47 @@ export default {
if (this.funWsData.type === 'AnnealFanInfo') {
let arr = []
for (let i in this.funWsData.data.annealFanInfo) {
arr.push({
equipmentName: i,
status: this.funWsData.data.annealFanInfo[i]
})
// arr.push({
// equipmentName: i,
// status: this.funWsData.data.annealFanInfo[i]
// })
arr.push([
// console.log(item)
`
<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${i || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
])
}
this.annealFunList = arr
this.annealFanConfig.data = arr
this.$refs['annealFanScrollBoard'].updateRows(arr)
}
if (this.funWsData.type === 'FanInfo') {
let arr = []
for (let i in this.funWsData.data.fanInfo) {
arr.push({
equipmentName: i,
status: this.funWsData.data.fanInfo[i]
})
// arr.push({
// equipmentName: i,
// status: this.funWsData.data.fanInfo[i]
// })
arr.push([
// console.log(item)
`
<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${i || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
])
}
this.funList = arr
this.funConfig.data = arr
this.$refs['funScrollBoard'].updateRows(arr)
// this.funList = arr
}
},
cutWebsocketOnOpen() {
@@ -511,30 +601,49 @@ export default {
this.CutInitWebSocket()
},
getSize(str) {
console.log(str.match(/\d+(\.\d+)?/g))
// console.log(str.match(/\d+(\.\d+)?/g))
let size = str.match(/\d+(\.\d+)?/g).map(ele => {
return parseFloat(ele)
})
console.log(size[0] + '*' + size[1] + '*' + size[2]);
// console.log(size[0] + '*' + size[1] + '*' + size[2]);
return size[0] + '*' + size[1] + '*' + size[2]
},
// 数据接收
cutWebsocketOnMessage(e) {
this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
// if (ele.progressRate != 1) {
return {
id: ele.id,
lineName: ele.lineName,
time: ele.time,
size: this.getSize(ele.size),
productArea: ele.productArea + '㎡',
wasteArea: ele.wasteArea + '㎡',
product: (ele.product * 100).toFixed(2)
}
// }
});
// this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
// // if (ele.progressRate != 1) {
// return {
// id: ele.id,
// lineName: ele.lineName,
// time: ele.time,
// size: this.getSize(ele.size),
// productArea: ele.productArea + '㎡',
// wasteArea: ele.wasteArea + '㎡',
// product: (ele.product * 100).toFixed(2)
// }
// // }
// });
let cutArr = this.cutWsData.productHourData.map((item, index) => [
// console.log(item)
`
<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.lineName || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${formatDate(item.time) || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${this.getSize(item.size) || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.productArea + '㎡' || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.wasteArea + '㎡' || ''}</span>`,
`<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:rgba(255,255,255,0.5)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>
<div style = "${(item.product * 100).toFixed(2) < 91 ? 'display:block; color:rgba(255, 209, 96, 1)' : 'display:none;'}">${(item.product * 100).toFixed(2) + '%' || ''}</div>`
])
this.cutConfig.data = cutArr
this.$refs['cutScrollBoard'].updateRows(cutArr)
} else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
let nameList = []
let nameWasteList = []
@@ -571,33 +680,51 @@ export default {
// let obj = JSON.parse(data.data)
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
if (this.SJGWsData.type === 'isra') {
this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) {
return {
id: ele.id,
linename: ele.linename,
type: ele.type,
num: ele.num,
time:ele.time,
percent: ele.percent
}
// }
});
// this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
// // if (ele.progressRate != 1) {
// return {
// id: ele.id,
// linename: ele.linename,
// type: ele.type,
// num: ele.num,
// time:ele.time,
// percent: ele.percent
// }
// // }
// });
console.log(this.SJGWsData.detData);
let ISRAArr = this.SJGWsData.detData.map((item, index) => [
// console.log(item)
`<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.linename || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.type || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.num || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${(item.percent * 100).toFixed(2) || ''}</span>`,
])
this.ISRAConfig.data = ISRAArr
this.$refs['ISRAScrollBoard'].updateRows(ISRAArr)
} else if (this.SJGWsData.type === 'equipment') {
this.realEqList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) {
return {
line: ele.line,
name: ele.name,
code: ele.code,
run: ele.run,
error: ele.error,
// percent: ele.percent
}
// }
});
this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
// console.log(item)
`<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.line || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.run || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
]);
}
this.realEqConfig.data = this.realEqList
this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
},
windowWidth(value) {
this.clientWidth = value
@@ -818,4 +945,44 @@ export default {
/* .container-main {
min-height: calc(100vh - 10em);
} */
.orange {
color: rgba(255, 209, 96, 1)
}
.white {
color: rgba(255, 255, 255, 0.5)
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>

47
src/views/OperationalOverview/components/baseContainer/index.vue
View File

@@ -2,7 +2,7 @@
* @Author: gtz
* @Date: 2022-01-19 15:58:17
* @LastEditors: zhp
* @LastEditTime: 2024-01-11 15:54:37
* @LastEditTime: 2024-01-18 13:59:40
* @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
-->
@@ -22,12 +22,21 @@
</template>
<div class="bar-item">
<div v-if="title" class="bar-title">
<div v-if="title" class="bar-title" ds>
<span>
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
{{ title }}
</span>
<!-- <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
{{ time +'-'+ time2 }}
</span> -->
</div>
<!-- <div v-if="true" class="bar-title">
<span>
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
{{ title }}
</span>
</div> -->
<div class="bar-content" :class="{ 'p-0': noContentPadding }">
<slot />
</div>
@@ -83,21 +92,39 @@ export default {
data() {
return {
curIndex: 0,
time: null,
time2:null
// imgUrl: require(`../../../../assets/img/${this.back}.png`),
}
},
created() {
// console.log(this.back);
// this.$nextTick(() => {
// this.$refs.baseContainer.style = `background:url('../../../../assets/img/${this.back}.png') no-repeat;)`
// })
// console.log(this.$refs.baseContainer.style)
},
mounted () {
this.time = this.format(new Date().setHours(7,0,0));
// console.log(time);
//前一天时间
this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1);
console.log(new Date().setHours(7, 0, 0) - 86400000 * 1);
},
methods: {
add0(m) {
return m < 10 ? '0' + m : m
},
format(shijianchuo) {
//shijianchuo是整数，否则要parseInt转换
var time = new Date(shijianchuo);
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时'
},
changeTab(num) {
this.curIndex = num
this.$emit('tabSelect', num)
}
},
}
}
</script>
@@ -198,11 +225,13 @@ export default {
color: #ffffff;
font-size: 24px;
padding: 0.67em;
display: flex;
}
.bar-content {
// padding: 1em;
padding: 1em;
flex: 1 auto;
position: relative;
}
.no-padding {

8
src/views/OperationalOverview/components/baseTable.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zhp
* @LastEditTime: 2024-01-08 14:09:05
* @LastEditTime: 2024-01-12 14:30:46
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
@@ -110,12 +110,12 @@ export default {
},
classOption() {
return {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 10, // 开始无缝滚动的数据量 this.list
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleHeight: 0/1, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};

292
src/views/OperationalOverview/components/coldDoubleYChart.vue Normal file
View File

@@ -0,0 +1,292 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-01-17 15:26:04
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
</div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'linearBarChart'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
borderRadius: {
type: Array,
default: () => [9, 9, 0, 0]
},
beilv: {
type: Number,
default: 1
},
height: {
type: Number,
default: 200
},
showLegend: {
type: Boolean,
default: false
},
nameList: {
type: Array,
default: () => []
},
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
series: [{
type: 'bar',
data: [],
barWidth: 6
}]
}
},
mounted() {
console.log('mounted')
console.log('borderRadius: ', this.borderRadius)
// this.$nextTick(() => {
// this.initChart()
// })
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart(nameList, passRateList, outputNumList) {
console.log(nameList, passRateList)
let series= [
{
name: '产线产量',
type: 'bar',
yAxisIndex: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#9DD5FF' },
{ offset: 0.3, color: '#1295FF' }
]),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#ced1d5',
fontSize: 12
}
},
}
// barBorderRadius: this.borderRadius
},
barWidth: 12,
data: outputNumList
},
{
name: '产线良品率',
symbol: 'circle', //变为实心圆
type: 'line',
yAxisIndex: 0,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 209, 96, 0.18)'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
lineStyle: {
color: 'rgba(255, 209, 96, 1)' //改变折线颜色
}
}
},
data: passRateList
}
]
// const colors = ['#5470C6', '#91CC75', '#EE6666']
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
// color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true
},
legend: {
itemWidth: 10,
itemHeight: 10,
top: '1%',
right: '20px',
data: ['产线产量', '产线良品率'],
textStyle: {
fontSize: 12 * this.beilv,
color: '#ced1d5'
}
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
},
data: nameList
},
// yAxis: {
// },
yAxis: [
{
min: function() { // 取最小值向下取整为最小刻度
return 0
},
max: function(value) { // 取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
scale: true,
type: 'value',
name: '良品率/%',
nameTextStyle: {// y轴上方单位的颜色
color: '#fff',
align: "left",
},
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#ced1d5', // 坐标值得具体的颜色
formatter: '{value}%'
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
},
{
min: function() { // 取最小值向下取整为最小刻度
return 0
},
max: function(value) { // 取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
scale: true,
type: 'value',
name: '产量/㎡', // y轴上方的单位
nameTextStyle: {
color: "#fff",
// fontSize: 10,
align: "right",
},
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
formatter: '{value} 片'
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[1]
// }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
// },
}
],
series: series
})
}
}
}
</script>
<style>
.productChart{
top: -40px;
}
</style>

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

@@ -1,13 +1,13 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-01-11 15:52:09
* @LastEditTime: 2024-01-17 13:56:46
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
<div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
</div>
</template>
@@ -70,9 +70,9 @@ export default {
mounted() {
console.log('mounted')
console.log('borderRadius: ', this.borderRadius)
this.$nextTick(() => {
this.initChart()
})
// this.$nextTick(() => {
// this.initChart()
// })
},
beforeDestroy() {
if (!this.chart) {
@@ -83,6 +83,7 @@ export default {
},
methods: {
initChart(nameList, passRateList, outputNumList) {
console.log(nameList, passRateList)
let series= [
{
name: '产线产量',
@@ -151,11 +152,12 @@ export default {
left: "3%",
right: "5%",
bottom: "3%",
width: 'auto',
height: "auto",
containLabel: true
},
legend: {
itemWidth: 10,
itemHeight: 10,
right: '20px',
data: ['产线产量', '产线良品率'],
textStyle: {
fontSize: 12 * this.beilv,
@@ -281,3 +283,8 @@ export default {
}
}
</script>
<style>
.productChart{
top: -40px;
}
</style>

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

@@ -173,3 +173,4 @@ export default {
}
}
</script>

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

@@ -1,13 +1,13 @@
<!--
* @Author: zhp
* @Date: 2023-12-27 13:54:52
* @LastEditTime: 2023-12-29 16:28:26
* @LastEditTime: 2024-01-17 10:09:36
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
<div :id="id" class="productChart" :style="{ height: height + 'px', width: width }" />
</div>
</template>
@@ -133,14 +133,17 @@ export default {
// }
this.chart.setOption({
legend: {
// top: '2.5%',
// right: '20px',
textStyle: {
color: '#ffffff'
}
},
grid: {
top:'80',
left: '3%',
right: '4%',
bottom: '3%',
// bottom: '3%',
width: 'auto',
height: 'auto',
containLabel: true
@@ -213,3 +216,7 @@ export default {
}
}
</script>
<style scoped lang="scss">
</style>

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

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-12 09:59:58
* @LastEditTime: 2024-01-18 13:57:38
* @Description:
-->
<template>
@@ -32,22 +32,25 @@
<base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
:table-data="equipmentList" /> -->
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
:table-data="qualityYearList" />
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
:table-data="qualityYearList" /> -->
<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'">
<base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" />
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" /> -->
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
:table-data="qualityMonthList" /> -->
<dv-scroll-board :config="processConfig" style="width:100%;height:350px" ref='processScrollBoard' />
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'order'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
@@ -60,37 +63,15 @@
</el-row> -->
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
<!-- <el-col :span="12"> -->
<el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
<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" />
<!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
{{ op.name }}
</p> -->
<p class="now-secondary-title">{{ op.name }}</p>
<!-- </el-col> -->
</el-row>
<!-- <el-row>
<el-progress :percentage="100" class="custom-progress-bar" />
<p class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
成都碲化镉5000一期订单
</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">成都碲化镉二订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">长利订单1000</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">国际工程20号订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
</el-row> -->
</div>
<!-- </div> -->
</base-container>
@@ -99,7 +80,8 @@
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="256" :size="'middle'" :title="'能源监控'" :title-icon="'energyMonitoring'">
<base-container :no-content-padding="true" :height="256" :size="'middle'" :title="'能源监控'"
:title-icon="'energyMonitoring'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
@@ -121,13 +103,13 @@
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :height="318 + 338 + 16" :size="'middle'" :title="'产线产量及良品率'" :title-icon="'productLine'">
<base-container :no-content-padding="true" :height="318 + 338 + 16" :size="'middle'" :title="'产线产量及良品率'"
:title-icon="'productLine'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :name-list="cxNameList"
:data-list="cxDataList" :height="359" :show-legend="true" />
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :height="359" :show-legend="true" />
</base-container>
</el-col>
</el-row>
@@ -422,21 +404,26 @@ const qualityYearTableProps = [
]
const qualityYearList = [
{ name: '钢化炉', code: '21321312', status: '运行', error: '否' },
{ name: '磨边机', code: '32323232', status: '运行', error: '否' },
{ name: '镀膜机', code: '32213213', status: '运行', error: '否' },
{ name: '钢化清洗机', code: '21321323', status: '运行', error: '否' },
{ name: '固化机', code: '21321321', status: '运行', error: '否' },
{ name: '磨边清洗机', code: '21321321', status: '运行', error: '否' },
{ name: '预热机', code: '21321321', status: '故障', error: '是' },
{ name: '下片机', code: '21321321', status: '运行', error: '否' },
{
name: '冷却机', code: '21321321', status: '运行', error: '否' },
name: '翻转机', code: 'EQ20240110112358000235', status: '运行', error: '否' },
{
name: 'A储片机106', code: '21321321', status: '运行', error: '否' },
{ name: '二次清洗机', code: '21321321', status: '运行', error: '否' },
{ name: '二次磨边机', code: '21321321', status: '故障', error: '是' },
{ name: '测试设备', code: '21321321', status: '运行', error: '否' }
name: '烘干炉', code: 'EQ20240110112537000241', status: '运行', error: '否' },
{
name: '清洗机', code: ' EQ20240110112310000232', status: '运行', error: '否' },
{ name: '钢化清洗机', code: 'EQ20240110111700000208', status: '运行', error: '否' },
{ name: '固化机', code: 'EQ20240110111700000201', status: '运行', error: '否' },
{
name: '磨边清洗机', code: ' EQ20240110111700000208', status: '运行', error: '否' },
{ name: '预热机', code: 'EQ20240110111700000205', status: '故障', error: '是' },
{ name: '下片机', code: 'EQ20240115151435000279', status: '运行', error: '否' },
{
name: '冷却机', code: 'EQ20240110111700000203', status: '运行', error: '否' },
{
name: 'A储片机106', code: 'EQ20240110111700000202', status: '运行', error: '否' },
{ name: '二次清洗机', code: 'EQ20240110111700000209', status: '运行', error: '否' },
{
name: '二次磨边机', code: ' EQ20240110110927000181', status: '故障', error: '是' },
{ name: '测试设备', code: 'EQ20240110111700000201', status: '运行', error: '否' }
]
const qualityMonthTableProps = [
@@ -461,43 +448,43 @@ const qualityMonthList = [
{
productionLineName: 'Y61',
sectionName: '成型',
count: '199片',
count: '3片',
inspectionTypeName: '细长泡'
},
{
productionLineName: 'Y62',
sectionName: '组合落板',
count: '123片',
count: '4片',
inspectionTypeName: '细长泡'
},
{
productionLineName: 'Y61',
sectionName: '磨边',
count: '212片',
count: '6片',
inspectionTypeName: '开口泡'
},
{
productionLineName: 'Y63',
sectionName: '清洗',
count: '33片',
count: '5片',
inspectionTypeName: '结石'
},
{
productionLineName: 'Y64',
sectionName: '打孔',
count: '332片',
count: '2片',
inspectionTypeName: '结石'
},
{
productionLineName: 'Y63',
sectionName: '成型',
count: '432片',
count: '7片',
inspectionTypeName: '开口泡'
},
{
productionLineName: 'Y61',
sectionName: '上片',
count: '200片',
count: '8片',
inspectionTypeName: '结石'
}
]
@@ -547,6 +534,28 @@ export default {
// offsetWidth: null,
qualityYearTableProps,
cxNameList,
eqConfig: {
header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [70, 100, 200, 90, 90,],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
processConfig: {
header: ['序号', '产线名称', '工序', '损耗片数', '缺陷类型'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [70, 130, 100, 120, 110,],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
cxDataList,
productLineList:[],
qualityYearList,
@@ -607,8 +616,7 @@ export default {
this.SJGInitWebSocket()
this.getTimes()
this.$refs.EnergyMonitoringChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [3134, 2323, 3232, 3233, 2321])
this.$refs.productLineChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], ['98', '97', '98.7', '98.5', '98.3',], ['4532', '1223', '3442', '4343', '2232'])
this.$refs.productLineChart.initChart(['Y61', 'Y62', 'Y63', 'Y64', 'Y65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321])
const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
window.onresize = () => {
@@ -651,13 +659,43 @@ export default {
// console.log('11111', res);
this.productLineList = res.data
})
// this.$axios.get(
// 'base/quality-inspection-record/dayStatistics',
// 'get',
// ).then((res) => {
// // console.log('11111', res);
// this.qualityMonthList = res.data ? res.data : []
// })
this.$axios.get(
'base/quality-inspection-record/dayStatistics',
'get',
).then((res) => {
// console.log('11111', res);
if (res.data.length !==0) {
let processArr = res.data.map((item, index) => [
// console.log(item)
`<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.productionLineName || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
])
this.processConfig.data = processArr
this.$refs['processScrollBoard'].updateRows(processArr)
} else {
let processArr = qualityMonthList.map((item, index) => [
// console.log(item)
`<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.productionLineName || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.sectionName || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.count || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.inspectionTypeName || ''}</span>`,
])
this.processConfig.data = processArr
this.$refs['processScrollBoard'].updateRows(processArr)
}
})
},
getTimes() {
setInterval(this.getTimesInterval, 1000);
@@ -752,17 +790,31 @@ export default {
});
console.log(this.orderList)
} else if (this.SJGWsData.type === 'equipment') {
this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) {
return {
id: ele.id,
name: ele.name,
code: ele.code,
status: ele.status,
error: ele.error=== true ? '是' : '否'
}
// }
});
// this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
// // if (ele.progressRate != 1) {
// return {
// id: ele.id,
// name: ele.name,
// code: ele.code,
// status: ele.status,
// error: ele.error=== true ? '是' : '否'
// }
// // }
// });
let eqArr = this.SJGWsData.detData.map((item, index) => [
// console.log(item)
`<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.name || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
])
this.eqConfig.data = eqArr
this.$refs['eqScrollBoard'].updateRows(eqArr)
// console.log(SJGWsData.orderList)
} else if (this.SJGWsData.type === 'productline') {
// console.log(this.wsData.detData);
@@ -792,6 +844,22 @@ export default {
// console.log(this.EnergyMonitoringList)
// this.$nextTick(() => {
// this.$refs.productLineChart.initChart(Array.from(new Set(nameList)), passRateList, outputNumList)
} else {
console.log(this.qualityYearList);
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.name || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
])
this.eqConfig.data = eqArr
this.$refs['eqScrollBoard'].updateRows(eqArr)
}
},
// 数据发送
@@ -976,10 +1044,6 @@ export default {
background-color: unset;
background-image: linear-gradient(to right, #4573fe, #47f8dc);
}
// ::v-deep .el-progress-bar__outer {
// background-color:rgba(71, 248, 220, 1);
// // background-image: rgba(71, 248, 220, 1))
// }
.visual-select {
position: absolute;
right: 1em;
@@ -1049,7 +1113,6 @@ export default {
margin-left: 3em;
}
}
</style>
<style scoped>
@@ -1061,9 +1124,12 @@ export default {
flex: 1 1;
}
.h-full {
height: calc(100vh - 150px);
height: calc(100vh);
}
/* .container-main {
min-height: calc(100vh - 10em);
} */
.eqTable{
overflow: hidden;
}
</style>