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

Merge pull request 'projects/mesxc-zhp' (#290) from projects/mesxc-zhp into projects/mesxc-test

Browse Source 
Reviewed-on: #290
This commit is contained in:
朱菊兰
2024-03-28 16:58:39 +08:00
parent 58aaabb6d1 0d118d499f
commit 13c8c2bfbc
11 changed files with 436 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/icons/svg/fullScreenView.svg
View File

@@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="32px" height="32px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54</title>
<g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
<g id="编组-54" transform="translate(1866.000000, 36.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="32" height="32"></rect>
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

2
src/assets/icons/svg/unFullScreenView.svg
View File

@@ -7,4 +7,4 @@
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M9.43538136,11.905569 L9.512257,11.9100096 C9.84008849,11.9481352 10.094431,12.2270701 10.094431,12.5646186 L10.094431,12.5646186 L10.094431,17.4609564 L10.0899283,17.5389459 C10.0512829,17.8716536 9.76881474,18.1312053 9.43419701,18.1245792 C9.08289988,18.1173731 8.79903148,17.828505 8.79903148,17.4768462 L8.79903148,17.4768462 L8.79903148,14.1393887 L5.60185236,17.3365679 L5.54107965,17.3901644 C5.28773557,17.5866851 4.91838364,17.5688196 4.6861319,17.3365679 C4.43452585,17.0849618 4.43452585,16.6724534 4.6861319,16.4208474 L4.6861319,16.4208474 L7.90601077,13.2009685 L4.58217312,13.2009685 L4.50402457,13.1964861 C4.17073404,13.1580095 3.9119308,12.876675 3.91855064,12.540718 C3.92574827,12.1880363 4.21375409,11.905569 4.56628329,11.905569 L4.56628329,11.905569 L9.43538136,11.905569 Z M12.565803,3.8731508 L12.6398736,3.87892442 C12.9562044,3.92194416 13.2009685,4.19434347 13.2009685,4.52088378 L13.2009685,4.52088378 L13.2009685,7.86061126 L16.3981476,4.66343214 L16.4589204,4.60983559 C16.7122644,4.41331488 17.0816164,4.4311804 17.3138681,4.66343214 C17.5654742,4.91503819 17.5654742,5.32754655 17.3138681,5.5791526 L17.3138681,5.5791526 L14.0914951,8.79903148 L17.4155569,8.79903148 L17.4936876,8.80351509 C17.8269523,8.84200281 18.0864105,9.12344101 18.081435,9.46011654 C18.0742517,9.81196375 17.7862459,10.094431 17.4337167,10.094431 L17.4337167,10.094431 L12.5691586,10.094431 L12.4916394,10.0899766 C12.1611316,10.051728 11.905569,9.77181051 11.905569,9.4308414 L11.905569,9.4308414 L11.905569,4.53677361 L11.9100717,4.45878413 C11.9487171,4.12607641 12.2311853,3.86652471 12.565803,3.8731508 L12.565803,3.8731508 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 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: 19 KiB

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" >

311
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 16:35:49
* @LastEditors: zhp
* @Description:
-->
@@ -17,10 +17,10 @@
许昌安彩冷端看板
<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" />
<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">
@@ -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' />
@@ -272,11 +272,14 @@ export default {
},
watch: {
isFullScreen: function (val) {
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) {
@@ -298,6 +301,7 @@ export default {
setTimeout(() => {
window.location.reload()
}, 86400000)
// this.getData()
},
destroyed() {
this.CutWebsocketClose()
@@ -310,81 +314,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()
// console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
@@ -406,6 +414,39 @@ export default {
}
},
methods: {
// getData() {
// let detData = [
// {
// name: '1',
// run: '运行',
// },
// {
// name: '2',
// run: '未运行',
// },
// {
// name: '3',
// run: '运行',
// },
// {
// name: '4',
// run: '未运行',
// },
// {
// name: '1',
// run: '运行',
// },
// ]
// this.realEqList = detData.map((item, index) => [
// // console.log(item)
// `<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)"><div style="${item.run == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.run || ''}</span>`,
// ])
// this.realEqConfig.data = this.realEqList
// this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
// },
CutWebsocketClose(e) {
this.Cutws.ws.onclose = (event) => { console.log(event );}
},
@@ -480,11 +521,14 @@ 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 == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.run || ''}</span>`,
])
}
this.realEqConfig.data = this.realEqList
this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
this.$nextTick(() => {
this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
})
};
// if (typeof (WebSocket) === 'undefined') {
// alert('您的浏览器不支持WebSocket')
@@ -545,7 +589,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,8 +637,8 @@ 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)"> ${this.funWsData.data.annealFanInfo[i] || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.run == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.run || ''}</span>`,
])
}
this.annealFunConfig.data = arr
@@ -608,8 +652,8 @@ 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)">${this.funWsData.data.fanInfo[i] || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.run == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.run || ''}</span>`,
])
}
this.funConfig.data = arr
@@ -694,79 +738,6 @@ export default {
// 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') {
// let cutArr = this.cutWsData.productHourData.map((item, index) => [
// `<span style="color:rgba(255,255,255,0.7)" >${index + 1 || ''}
// </span>`,
// `<span style="color:rgba(255,255,255,0.7)" >${item.lineName || ''}
// </span>`,
// `<span style="color:rgba(255,255,255,0.7)">${this.formatTime(item.time) || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.7)">${this.getSize(item.size) || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.7)">${item.productArea + '㎡' || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.7)">${item.wasteArea + '㎡' || ''}</span>`,
// `<div style = "${(item.product * 100).toFixed(2) > 91 ? 'display:block;color:#00FFF7' : '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 = []
// let topNameList = []
// let productList = []
// let wasteList = []
// let sumAreaList = []
// let yieldList = []
// // this.cutTableDataList =
// this.cutWsData.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.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
// this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
// }
// },
// SJGWebsocketOnOpen() {
// console.log('socket连接成功')
// this.SJGWebsocket.onmessage()
// },
// 连接建立失败重连
// SJGWebsocketOnError(e) {
// this.SJGInitWebSocket()
// },
// 数据接收
// SJGWebsocketOnMessage(e) {
// this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
// if (this.SJGWsData.type === 'isra') {
// console.log('222222', this.SJGWsData.detData)
// console.log(this.SJGWsData.detData);
// let chartData = this.SJGWsData.detData.map((item, index) => {
// return {
// name: item.type,
// num:item.num
// }
// })
// this.$refs['ISRAChart'].updateChart(chartData)
// } else if (this.SJGWsData.type === 'equipment') {
// this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
// // console.log(item)
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
// </span>`,
// `<span style="color:rgba(255,255,255,0.5)">${ele.name || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${ele.run || ''}</span>`,
// ])
// }
// this.realEqConfig.data = this.realEqList
// this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
// },
windowWidth(value) {
this.clientWidth = value
this.beilv2 = this.clientWidth / 1920
@@ -786,7 +757,7 @@ export default {
}
},
changeFullScreen() {
this.containerWidth = 223223223
// this.containerWidth = 223223223
if (!screenfull.isEnabled) {
this.$message({
message: 'you browser can not work',
@@ -794,7 +765,7 @@ export default {
})
return false
}
screenfull.toggle(this.$refs.container)
screenfull.toggle()
}
}
}
@@ -884,6 +855,10 @@ export default {
top: 2em;
}
.screen-btn {
color: #00fff0;
font-size: 32px;
}
// .container-main {
// padding: 5px;
// }
@@ -972,6 +947,7 @@ background: linear-gradient(to bottom,rgba(60,
margin-left: 3em;
}
}
</style>
<style scoped>
@@ -1030,4 +1006,5 @@ background: linear-gradient(to bottom,rgba(60,
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>

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

@@ -1,8 +1,8 @@
<!--
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zwq
* @LastEditTime: 2022-01-24 13:27:41
* @LastEditors: zhp
* @LastEditTime: 2024-03-28 16:30:54
* @Description:
-->
<template>
@@ -61,7 +61,7 @@ export default {
},
mounted() {
this.$nextTick(() => {
this.initChart()
// this.initChart()
})
},
beforeDestroy() {

3
src/views/OperationalOverview/components/PieChart.vue
View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zhp
* @LastEditTime: 2024-01-25 17:41:44
* @LastEditTime: 2024-03-28 16:45:24
* @Description:
-->
<template>
@@ -90,6 +90,7 @@ export default {
bottom: 0,
itemHeight: 10,
itemWidth: 10,
icon:'roundRect',
formatter: function(name) {
let pieLegendVale = {}
lData.filter((item, index) => {

8
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 16:31:20
* @LastEditors: zhp
* @Description:
-->
@@ -78,7 +78,7 @@ export default {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.initChart()
// this.initChart()
},
beforeDestroy() {
if (!this.chart) {
@@ -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,

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

@@ -70,7 +70,7 @@ export default {
// this.dataList.forEach(ele => {
// console.log(ele);
// this.series = []
this.initChart()
// this.initChart()
// this.$nextTick(() => {
// // this.initChart()
// })
@@ -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,

28
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 16:30:14
* @LastEditors: zhp
* @Description:
-->
@@ -15,6 +15,7 @@
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
import { raw } from 'body-parser';
export default {
name: 'OverviewBar',
@@ -77,7 +78,7 @@ export default {
// this.dataList.forEach(ele => {
// console.log(ele);
// this.series = []
this.initChart()
// this.initChart()
// this.$nextTick(() => {
// // this.initChart()
// })
@@ -94,7 +95,8 @@ export default {
let rawData = []
let colors = ['#0fdedb', '#2359ec']
rawData.push(passRateList, wasteList)
const totalData = [];
const totalData = [];
// if (rawData.length != 0 && raw,Data,length != 0) {
for (let i = 0; i < rawData[0].length; ++i) {
let sum = 0;
for (let j = 0; j < rawData.length; ++j) {
@@ -102,7 +104,8 @@ 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 +119,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 +139,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',

284
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 16:10:47
* @Description:
-->
<template>
@@ -16,10 +16,10 @@
许昌安彩深加工看板
<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" />
<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">
@@ -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>
@@ -239,7 +238,6 @@ export default {
}
},
computed: {
// ...mapGetters(['sidebar']),
styles() {
const v = Math.floor(this.value * this.beilv2 * 100) / 10000
return {
@@ -248,8 +246,17 @@ 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
@@ -260,12 +267,10 @@ export default {
_this.timer = false
}, 500)
}
// 这里可以添加修改时的方法
this.windowWidth(val);
}
},
created() {
this.getData()
this.init()
setTimeout(() => {
window.location.reload()
@@ -276,66 +281,67 @@ 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>`,
// 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)
this.$refs.productLineChart.initChart(['D61', 'D62', 'D63', 'D64', 'D65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321])
// 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>`,
// // 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)
// this.$refs.productLineChart.initChart(['D61', 'D62', 'D63', 'D64', 'D65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321])
// this.getList()
this.initWebSocket()
this.SJGInitWebSocket()
@@ -349,7 +355,9 @@ export default {
this.beilv2 = _this.clientWidth / 1920
})()
}
this.getData()
},
// beforeDestroy() {
// //离开页面删除检测器和所有侦听器
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
@@ -540,122 +548,10 @@ export default {
} else if (this.SJGInitWebSocket === 'inspection') {
}
};
// if (typeof (WebSocket) === 'undefined') {
// alert('您的浏览器不支持WebSocket')
// } else {
// let date = new Date().valueOf()
// // console.log(date);
// console.log(process.env);
// const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
// this.SJGWebsocket = new WebSocket(SJGWsUrl)
// // 监听 WebSocket 连接
// this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
// // 监听 WebSocket 错误信息
// this.SJGWebsocket.onerror = this.SJGWebsocketOnError
// // 监听 WebSocket 消息
// this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
// // 监听 webSocket 断开信息
// this.SJGWebsocket.onclose = this.SJGWebsocketClose
// }
},
// SJGWebsocketOnOpen() {
// console.log('socket连接成功')
// // console.log(this.SJGWebsocket.onmessage);
// this.SJGWebsocket.onmessage()
// },
// // 连接建立失败重连
// SJGWebsocketOnError(e) {
// // console.log('11111', e)
// this.SJGInitWebSocket()
// },
// 数据接收
// SJGWebsocketOnMessage(e) {
// console.log(1111, e)
// this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
// // console.log(this.wsData.detData);
// // console.log('22222', this.wsData.data)
// if (this.SJGWsData.type === 'order') {
// this.orderList = this.SJGWsData.detData.map((ele, index) => {
// if (ele.progressRate != 1) {
// return {
// id: ele.id,
// name: ele.name,
// progressRate: ele.progressRate.toFixed(3)
// }
// }
// });
// console.log(this.orderList)
// } else if (this.SJGWsData.type === 'equipment') {
// let eqArr = this.SJGWsData.detData.map((item, index) => [
// `<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.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('aaaaaaaaaaaaaaaaaaa', this.SJGWsData);
// let nameList = []
// let passRateList = []
// let outputNumList = []
// this.SJGWsData.detData.forEach((ele) => {
// // if (item.id == ele.productionLineId) {
// // if (item.name.substr(0, 1) == "D") {
// // console.log(ele)
// nameList.push(ele.lineName)
// outputNumList.push(ele.outputNum)
// passRateList.push(ele.passRate)
// // }
// // }
// })
// this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
// } else if (this.SJGInitWebSocket === 'inspection') {
// }
// },
SJGWebsocketClose(e) {
this.SJGws.ws.onclose = (event) => { console.log(event); }
},
// // 连接建立之后执行send方法发送数据
// websocketOnOpen() {
// console.log('socket连接成功')
// this.websocket.onmessage()
// },
// 连接建立失败重连
// websocketOnError(e) {
// console.log('11111', e)
// this.initWebSocket()
// },
// 数据接收
// websocketOnMessage(e) {
// // console.log(1111, e)
// this.wsData = e?.data ? JSON.parse(e?.data) : {}
// // console.log('22222', this.wsData.data)
// if (this.wsData.type === 'EnergyMonitoring') {
// let EnergyNameList = []
// this.wsData.data.forEach((ele) => {
// EnergyNameList.push(ele.lineName)
// })
// this.EnergyMonitoringNameList = EnergyNameList
// let EnergyDataList = []
// this.wsData.data.forEach((ele) => {
// EnergyDataList.push(ele.useQuantity
// )
// })
// this.EnergyMonitoringList = EnergyDataList
// console.log(EnergyDataList)
// this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
// }
// },
// 数据发送
// websocketSend() {
// this.websocket.send('11111')
// },
// // 关闭
websocketClose(e) {
this.wsHeartbeat.ws.onclose = (event) => { console.log(event); }
},
@@ -664,10 +560,14 @@ export default {
this.beilv2 = this.clientWidth / 1920
},
change() {
console.log(this.isFullScreen);
debugger;
this.isFullScreen = screenfull.isFullscreen
},
init() {
console.log(screenfull.isEnabled);
if (screenfull.isEnabled) {
debugger;
screenfull.on('change', this.change)
}
},
@@ -677,7 +577,7 @@ export default {
}
},
changeFullScreen() {
this.containerWidth = 223223223
// this.containerWidth = 223223223
if (!screenfull.isEnabled) {
this.$message({
message: 'you browser can not work',
@@ -685,7 +585,7 @@ export default {
})
return false
}
screenfull.toggle(this.$refs.container)
screenfull.toggle()
}
}
}
@@ -712,18 +612,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 +735,9 @@ export default {
margin-left: 3em;
}
}
.order::-webkit-scrollbar {
display: none
}
</style>
<style scoped>