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

projects/mesxc-zhp #290

Merged
juzi merged 4 commits from projects/mesxc-zhp into projects/mesxc-test 2024-03-28 16:58:40 +08:00
Conversation 0 Commits 4 Files Changed 11 +436 -422
11 changed files with 436 additions and 422 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?> <?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> <title>编组 54</title>
<g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)"> <g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
<g id="编组-54" 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> <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> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 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

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

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-07-19 15:18:30 * @Date: 2021-07-19 15:18:30
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-03-27 15:42:39 * @LastEditTime: 2024-03-28 15:28:07
* @Description: * @Description:
--> -->
<template> <template>
@ -16,35 +16,32 @@
许昌安彩AGV原片周转看板 许昌安彩AGV原片周转看板
<h3 class="unit">单位：河南汇融数字科技有限公司</h3> <h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</h3> <h3 class="time">{{ times }}</h3>
<el-button <el-button type="text" class="title-button" :style="{ right: 18 + 'px', top: 26 + 'px', fontSize: '32px' }"
type="text" @click="changeFullScreen">
class="title-button" <svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
:style="{ right: 33 + 'px', top: 37 + 'px' }" <svg-icon width="32" height="32" v-else icon-class="fullScreenView" />
@click="changeFullScreen"
>
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
</el-button> </el-button>
</el-row> </el-row>
<el-row class="container-main flex-col" type="flex"> <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-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :size="'middle'" :title="'搬运任务'" :title-icon="'task'" :back="'energy'"> <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" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
:table-data="qualityYearList" /> :table-data="qualityYearList" /> -->
<dv-scroll-board :config="taskConfig" style="width:100%;height:350px" ref='taskScrollBoard' />
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
<base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'order'" :back="'energy'"> <base-container :beilv="1" :size="'eqStatus'" :title="'周转进度'" :title-icon="'order'" :back="'energy'">
<div style="width:100%; overflow: hidden scroll;"> <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"> <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"> <p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" /> <i class="el-icon-check" />
{{ op.name }} {{ op.name }}
</p> </p>
<p v-else class="now-secondary-title">{{ 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" <el-progress :stroke-width="10" define-back-color="rgba(32, 57, 96, 1)" text-color="white"
class="custom-progress-bar" /> :percentage="op.outRate * 100" class="custom-progress-bar" />
</el-row> </el-row>
</div> </div>
</base-container> </base-container>
@ -53,17 +50,19 @@
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1"> <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <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'"> :back="'energy'">
<base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps" <!-- <base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
:table-data="inventoryList" /> :table-data="inventoryList" /> -->
<dv-scroll-board :config="inventoryConfig" style="width:100%;height:380px" ref='inventoryScrollBoard' />
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> <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'"> :back="'energy'">
<base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps" <!-- <base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
:table-data="locationList" /> :table-data="locationList" /> -->
<dv-scroll-board :config="locationConfig" style="width:100%;height:380px" ref='locationScrollBoard' />
</base-container> </base-container>
</el-col> </el-col>
</el-row> </el-row>
@ -191,6 +190,15 @@ const inventoryList = [
{ {
eqName: ' 螺丝刀', eqCode: '备件库', level: '', product: ' 123', productCode: 'WLXX20220919000147', unit: '个', time: '2023年9月10日' 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日' eqName: ' 清洗剂', eqCode: '备件库', level: '200mm', product: ' 123', productCode: 'WLXX20220919000147', unit: '瓶', time: '2023年9月10日'
} }
@ -267,6 +275,39 @@ export default {
inventoryTableProps, inventoryTableProps,
inventoryList, inventoryList,
locationList, 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, locationTableProps,
qualityYearList, qualityYearList,
isFullScreen: false, isFullScreen: false,
@ -294,6 +335,20 @@ export default {
{ {
name: '作业号RQ20230911', name: '作业号RQ20230911',
outRate: '0.4' outRate: '0.4'
},
{
name: '作业号RQ20230911',
outRate: '0.4'
},
{
name: '作业号RQ20230911',
outRate: '0.4'
}, {
name: '作业号RQ20230911',
outRate: '0.4'
}, {
name: '作业号RQ20230911',
outRate: '0.4'
} }
], ],
// qualityTableProps1, // qualityTableProps1,
@ -316,6 +371,16 @@ export default {
}, },
watch: { 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) { clientWidth(val) {
if (!this.timer) { if (!this.timer) {
this.clientWidth = val this.clientWidth = val
@ -343,6 +408,9 @@ export default {
}, 86400000) }, 86400000)
}, },
mounted() { mounted() {
this.getTask()
this.getInventoryData()
this.getLocationData()
const _this = this; const _this = this;
window.onresize = () => { window.onresize = () => {
return (() => { return (() => {
@ -355,6 +423,60 @@ export default {
getTimes() { getTimes() {
setInterval(this.getTimesInterval, 1000); 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 () { getTimesInterval: function () {
let _this = this; let _this = this;
let year = new Date().getFullYear(); //获取当前时间的年份 let year = new Date().getFullYear(); //获取当前时间的年份
@ -401,7 +523,7 @@ export default {
}) })
return false return false
} }
screenfull.toggle(this.$refs.container) screenfull.toggle()
} }
} }
} }
@ -432,7 +554,7 @@ export default {
position: absolute; position: absolute;
left: 240px; left: 240px;
top: 25px; top: 25px;
color: rgba($color: #ffffff, $alpha: 8); color: rgba(255, 255, 255, 0.80);
font-size: 20px; font-size: 20px;
letter-spacing: 0px; letter-spacing: 0px;
} }
@ -440,7 +562,7 @@ export default {
position: absolute; position: absolute;
left: 1400px; left: 1400px;
top: 25px; top: 25px;
color: rgba($color: #ffffff, $alpha: 8); color: rgba(255, 255, 255, 0.80);
font-size: 20px; font-size: 20px;
letter-spacing: 0px; letter-spacing: 0px;
} }
@ -495,7 +617,9 @@ export default {
// .container-main { // .container-main {
// padding: 5px; // padding: 5px;
// } // }
.order::-webkit-scrollbar{
display: none
}
</style> </style>
<style lang="scss" > <style lang="scss" >

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

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-01-29 16:50:26 * @Date: 2024-01-29 16:50:26
* @LastEditTime: 2024-03-27 17:02:27 * @LastEditTime: 2024-03-28 16:35:49
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -17,10 +17,10 @@
许昌安彩冷端看板 许昌安彩冷端看板
<h3 class="unit">单位：河南汇融数字科技有限公司</h3> <h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</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"> @click="changeFullScreen">
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> <svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" /> <svg-icon width="32" height="32" v-else icon-class="fullScreenView" />
</el-button> </el-button>
</el-row> </el-row>
<el-row class="container-main flex-col" type="flex"> <el-row class="container-main flex-col" type="flex">
@ -97,21 +97,21 @@
</div> --> </div> -->
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 --> <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
<el-col :span="8" style=""> <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" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="funList" /> --> :table-data="funList" /> -->
<dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' /> <dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' />
</el-col> </el-col>
<span class="eqLine"></span> <span class="eqLine"></span>
<el-col :span="8"> <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" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="annealFunList" /> --> :table-data="annealFunList" /> -->
<dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' /> <dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' />
</el-col> </el-col>
<span class="eqLineTwo"></span> <span class="eqLineTwo"></span>
<el-col :span="8" style="float: right;"> <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" <!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
:table-data="realEqList" /> --> :table-data="realEqList" /> -->
<dv-scroll-board :config="realEqConfig" style="width:100%;height:310px" ref='realEqScrollBoard' /> <dv-scroll-board :config="realEqConfig" style="width:100%;height:310px" ref='realEqScrollBoard' />
@ -274,9 +274,12 @@ export default {
watch: { watch: {
isFullScreen:function (val) { isFullScreen:function (val) {
if (val) { if (val) {
this.beilv = document.body.offsetWidth / 1920 const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
console.log(_this.beilv2);
} else { } else {
this.beilv = document.getElementById('container').offsetWidth / 1920 const _this = this;
_this.beilv2 = document.documentElement.clientWidth / 1920
} }
}, },
clientWidth(val) { clientWidth(val) {
@ -298,6 +301,7 @@ export default {
setTimeout(() => { setTimeout(() => {
window.location.reload() window.location.reload()
}, 86400000) }, 86400000)
// this.getData()
}, },
destroyed() { destroyed() {
this.CutWebsocketClose() this.CutWebsocketClose()
@ -310,81 +314,85 @@ export default {
} }
}, },
mounted() { mounted() {
// let nameList = [] let nameList = []
// let nameWasteList = [] let nameWasteList = []
// let topNameList = [] let topNameList = []
// let productList = [] let productList = []
// let wasteList = [] let wasteList = []
// // let sumAreaList = [] let yieldList = []
// // let yieldList = [] // let sumAreaList = []
// // this.cutTableDataList = // let yieldList = []
// let coldDetData = [ // this.cutTableDataList =
// { let coldDetData = [
// "first": 0.8834, {
// "lineName": "Y61", "first": 0.8834,
// "product": 0.8834, "lineName": "Y61",
// "productArea": 35069.28, "product": 0.8834,
// "second": 0, "productArea": 35069.28,
// 'sumArea': 38400, "second": 0,
// 'wastArea': 3330.72, 'sumArea': 38400,
// "waste": 0.1166 'wastArea': 3330.72,
// }, "yield": 0.9133
// { },
// "first": 0.847, {
// "lineName": "Y62", "first": 0.847,
// "product": 0.847, "lineName": "Y62",
// "productArea": 26765.46, "product": 0.847,
// "second": 0, "productArea": 26765.46,
// 'sumArea': 1111111, "second": 0,
// 'wastArea': 22222, 'sumArea': 1111111,
// "waste": 0.153 'wastArea': 22222,
// }, "yield": 0.9133
// { },
// "first": 0.8668, {
// "lineName": "Y63", "first": 0.8668,
// "product": 0.8668, "lineName": "Y63",
// "productArea": 26448.46, "product": 0.8668,
// "second": 0, "productArea": 26448.46,
// 'sumArea': 1111111, "second": 0,
// 'wastArea': 22222, 'sumArea': 1111111,
// "waste": 0.1332 'wastArea': 22222,
// }, "yield": 0.9133
// { },
// "first": 0.9064, {
// "lineName": "Y64", "first": 0.9064,
// "product": 0.9064, "lineName": "Y64",
// "productArea": 26667.32, "product": 0.9064,
// "second": 0, "productArea": 26667.32,
// 'sumArea': 1111111, "second": 0,
// 'wastArea': 22222, 'sumArea': 1111111,
// "waste": 0.0936 'wastArea': 22222,
// }, "yield": 0.9133
// { },
// "first": 0.8838, {
// "lineName": "Y65", "first": 0.8838,
// "product": 0.8838, "lineName": "Y65",
// "productArea": 26554.32, "product": 0.8838,
// "second": 0, "productArea": 26554.32,
// 'sumArea': 1111111, "second": 0,
// 'wastArea': 22222, 'sumArea': 1111111,
// "waste": 0.1162 'wastArea': 22222,
// } "yield": 0.9133
// ] }
// coldDetData.forEach((ele, index) => { ]
// nameList.push(ele.lineName) coldDetData.forEach((ele, index) => {
// topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea) nameList.push(ele.lineName)
// productList.push(ele.productArea) topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea)
// wasteList.push(ele.wastArea) productList.push(ele.productArea)
// nameWasteList.push('缺陷面积:' + ele.wastArea) wasteList.push(ele.wastArea)
// // sumAreaList.push(ele.sumArea) nameWasteList.push('缺陷面积:' + ele.wastArea)
// // yieldList.push((ele.yield * 100).toFixed(3)) yieldList.push({
// }) name: '良品',
// this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) yield:ele.yield
// 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]]) // sumAreaList.push(ele.sumArea)
// this.$refs.fourthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) // yieldList.push((ele.yield * 100).toFixed(3))
// this.$refs.fifthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) })
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.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
this.getTimes() this.getTimes()
// console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss')); // console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss'));
@ -406,6 +414,39 @@ export default {
} }
}, },
methods: { 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) { CutWebsocketClose(e) {
this.Cutws.ws.onclose = (event) => { console.log(event );} 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 style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`, </span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</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.realEqConfig.data = this.realEqList
this.$nextTick(() => {
this.$refs['realEqScrollBoard'].updateRows(this.realEqList) this.$refs['realEqScrollBoard'].updateRows(this.realEqList)
})
}; };
// if (typeof (WebSocket) === 'undefined') { // if (typeof (WebSocket) === 'undefined') {
// alert('您的浏览器不支持WebSocket') // alert('您的浏览器不支持WebSocket')
@ -545,7 +589,7 @@ export default {
wasteList.push(ele.wastArea) wasteList.push(ele.wastArea)
nameWasteList.push('缺陷面积:' + ele.wastArea) nameWasteList.push('缺陷面积:' + ele.wastArea)
sumAreaList.push(ele.sumArea) 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.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.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]])
@ -593,8 +637,8 @@ export default {
</span>`, </span>`,
`<span style="color:rgba(255,255,255,0.5)" >${i || ''} `<span style="color:rgba(255,255,255,0.5)" >${i || ''}
</span>`, </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)">${item.name || ''}</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)"><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 this.annealFunConfig.data = arr
@ -608,8 +652,8 @@ export default {
arr.push([ arr.push([
`<span style="color:rgba(255,255,255,0.5)" >${index || ''}</span>`, `<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)" >${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)">${item.name || ''}</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)"><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 this.funConfig.data = arr
@ -694,79 +738,6 @@ export default {
// console.log(size[0] + '*' + size[1] + '*' + size[2]); // console.log(size[0] + '*' + size[1] + '*' + size[2]);
return 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) { windowWidth(value) {
this.clientWidth = value this.clientWidth = value
this.beilv2 = this.clientWidth / 1920 this.beilv2 = this.clientWidth / 1920
@ -786,7 +757,7 @@ export default {
} }
}, },
changeFullScreen() { changeFullScreen() {
this.containerWidth = 223223223 // this.containerWidth = 223223223
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
this.$message({ this.$message({
message: 'you browser can not work', message: 'you browser can not work',
@ -794,7 +765,7 @@ export default {
}) })
return false return false
} }
screenfull.toggle(this.$refs.container) screenfull.toggle()
} }
} }
} }
@ -884,6 +855,10 @@ export default {
top: 2em; top: 2em;
} }
.screen-btn {
color: #00fff0;
font-size: 32px;
}
// .container-main { // .container-main {
// padding: 5px; // padding: 5px;
// } // }
@ -972,6 +947,7 @@ background: linear-gradient(to bottom,rgba(60,
margin-left: 3em; margin-left: 3em;
} }
} }
</style> </style>
<style scoped> <style scoped>
@ -1030,4 +1006,5 @@ background: linear-gradient(to bottom,rgba(60,
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
visibility: visible; visibility: visible;
} }
</style> </style>

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

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

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

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

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

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-09-21 09:06:28 * @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-03-27 14:37:35 * @LastEditTime: 2024-03-28 16:31:20
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -78,7 +78,7 @@ export default {
this.$el.addEventListener('resize', () => { this.$el.addEventListener('resize', () => {
console.log('resziing.....'); console.log('resziing.....');
}); });
this.initChart() // this.initChart()
}, },
beforeDestroy() { beforeDestroy() {
if (!this.chart) { if (!this.chart) {
@ -112,7 +112,7 @@ export default {
} }
// barBorderRadius: this.borderRadius // barBorderRadius: this.borderRadius
}, },
barWidth: 12, barWidth: 18,
data: outputNumList data: outputNumList
}, },
{ {
@ -166,7 +166,7 @@ export default {
type: 'cross' 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: { legend: {
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,

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

@ -70,7 +70,7 @@ export default {
// this.dataList.forEach(ele => { // this.dataList.forEach(ele => {
// console.log(ele); // console.log(ele);
// this.series = [] // this.series = []
this.initChart() // this.initChart()
// this.$nextTick(() => { // this.$nextTick(() => {
// // this.initChart() // // this.initChart()
// }) // })
@ -118,7 +118,7 @@ export default {
} }
// barBorderRadius: this.borderRadius // barBorderRadius: this.borderRadius
}, },
barWidth: 12, barWidth: 18,
}] }]
// } // }
// if (nameList.length !== 0) { // if (nameList.length !== 0) {
@ -132,7 +132,7 @@ export default {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 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: { // legend: {
// itemWidth: 10, // itemWidth: 10,
// itemHeight: 10, // itemHeight: 10,

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

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2023-12-27 13:54:52 * @Date: 2023-12-27 13:54:52
* @LastEditTime: 2024-03-27 16:50:04 * @LastEditTime: 2024-03-28 16:30:14
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -15,6 +15,7 @@
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize' import resize from './mixins/resize'
import { raw } from 'body-parser';
export default { export default {
name: 'OverviewBar', name: 'OverviewBar',
@ -77,7 +78,7 @@ export default {
// this.dataList.forEach(ele => { // this.dataList.forEach(ele => {
// console.log(ele); // console.log(ele);
// this.series = [] // this.series = []
this.initChart() // this.initChart()
// this.$nextTick(() => { // this.$nextTick(() => {
// // this.initChart() // // this.initChart()
// }) // })
@ -95,6 +96,7 @@ export default {
let colors = ['#0fdedb', '#2359ec'] let colors = ['#0fdedb', '#2359ec']
rawData.push(passRateList, wasteList) 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) { for (let i = 0; i < rawData[0].length; ++i) {
let sum = 0; let sum = 0;
for (let j = 0; j < rawData.length; ++j) { for (let j = 0; j < rawData.length; ++j) {
@ -102,7 +104,8 @@ export default {
} }
totalData.push(sum); totalData.push(sum);
} }
console.log('total', totalData); // }
console.log('total', totalData)
this.chart = echarts.init(document.getElementById(this.id)) this.chart = echarts.init(document.getElementById(this.id))
const series = [ const series = [
'良品', '良品',
@ -116,11 +119,11 @@ export default {
name, name,
type: 'bar', type: 'bar',
stack: 'total', stack: 'total',
barWidth: 10, barWidth: 12,
label: { // label: {
show: true, // show: true,
formatter: (params) => Math.round(params.value * 1000) / 10 + '%' // formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
}, // },
color:colors[sid], color:colors[sid],
data: rawData.length != 0 ? rawData[sid].map((d, did) => data: rawData.length != 0 ? rawData[sid].map((d, did) =>
totalData[did] <= 0 ? 0 : d / totalData[did] totalData[did] <= 0 ? 0 : d / totalData[did]
@ -136,6 +139,13 @@ export default {
// }) // })
this.chart.setOption({ this.chart.setOption({
legend: { 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, itemWidth: 12,
itemHeight: 12, itemHeight: 12,
bottom: '20', bottom: '20',

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

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-07-19 15:18:30 * @Date: 2021-07-19 15:18:30
* @LastEditors: zhp * @LastEditors: zhp
* @LastEditTime: 2024-03-27 16:13:14 * @LastEditTime: 2024-03-28 16:10:47
* @Description: * @Description:
--> -->
<template> <template>
@ -16,10 +16,10 @@
许昌安彩深加工看板 许昌安彩深加工看板
<h3 class="unit">单位：河南汇融数字科技有限公司</h3> <h3 class="unit">单位：河南汇融数字科技有限公司</h3>
<h3 class="time">{{ times }}</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"> @click="changeFullScreen">
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> <svg-icon width="32" height="32" v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" /> <svg-icon width="32" height="32" v-else icon-class="fullScreenView" />
</el-button> </el-button>
</el-row> </el-row>
<el-row class="container-main flex-col" type="flex"> <el-row class="container-main flex-col" type="flex">
@ -27,10 +27,8 @@
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'"> <base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
<dv-scroll-board class="eqTable" :config="eqConfig" style="width:100%;height:350px" ref='eqScrollBoard' /> <dv-scroll-board class="eqTable" :config="eqConfig" style="width:100%;height:350px" ref='eqScrollBoard' />
</base-container> </base-container>
</el-col> </el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'"> <base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
<dv-scroll-board :config="processConfig" style="width:100%;height:350px" ref='processScrollBoard' /> <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%"> <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="'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-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
<!-- <el-col :span="12"> --> <!-- <el-col :span="12"> -->
<p class="now-secondary-title">{{ op.name }}</p> <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" /> :percentage="op.progressRate" class="custom-progress-bar" />
</el-row> </el-row>
</div> </div>
@ -239,7 +238,6 @@ export default {
} }
}, },
computed: { computed: {
// ...mapGetters(['sidebar']),
styles() { styles() {
const v = Math.floor(this.value * this.beilv2 * 100) / 10000 const v = Math.floor(this.value * this.beilv2 * 100) / 10000
return { return {
@ -248,8 +246,17 @@ export default {
} }
} }
}, },
watch: { 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) { clientWidth(val) {
if (!this.timer) { if (!this.timer) {
this.clientWidth = val this.clientWidth = val
@ -260,12 +267,10 @@ export default {
_this.timer = false _this.timer = false
}, 500) }, 500)
} }
// 这里可以添加修改时的方法
this.windowWidth(val); this.windowWidth(val);
} }
}, },
created() { created() {
this.getData()
this.init() this.init()
setTimeout(() => { setTimeout(() => {
window.location.reload() window.location.reload()
@ -276,66 +281,67 @@ export default {
this.SJGWebsocketClose() this.SJGWebsocketClose()
}, },
mounted() { mounted() {
let detData = [ // let detData = [
{ // {
id:'1', // id:'1',
name: '测试工单', // name: '测试工单',
progressRate:0.933333 // progressRate:0.933333
}, // },
{ // {
id: '2', // id: '2',
name: '测试工单2', // name: '测试工单2',
progressRate: 0.932323 // progressRate: 0.932323
}, { // }, {
id: '3', // id: '3',
name: '测试工单3', // name: '测试工单3',
progressRate: 0.23232 // progressRate: 0.23232
}, { // }, {
id: '4', // id: '4',
name: '测试工单4', // name: '测试工单4',
progressRate: 0.32323 // progressRate: 0.32323
}, { // }
id: '5', // // {
name: '测试工单', // // id: '5',
progressRate: 0.5555 // // name: '测试工单',
}, { // // progressRate: 0.5555
id: '6', // // }, {
name: '测试工单', // // id: '6',
progressRate: 0.66564 // // name: '测试工单',
}, // // progressRate: 0.66564
] // // },
this.orderList = detData.map((ele, index) => { // ]
if (ele.progressRate && ele.progressRate != 1) { // this.orderList = detData.map((ele, index) => {
return { // if (ele.progressRate && ele.progressRate != 1) {
id: ele.id, // return {
name: ele.name, // id: ele.id,
progressRate: parseFloat((ele.progressRate * 100).toFixed(3)) // name: ele.name,
} // progressRate: parseFloat((ele.progressRate * 100).toFixed(3))
} // }
}); // }
let EnergyNameList = ['Y61', 'Y62', 'Y63', 'Y64', 'Y65',] // });
this.EnergyMonitoringNameList = EnergyNameList // let EnergyNameList = ['Y61', 'Y62', 'Y63', 'Y64', 'Y65',]
let EnergyDataList = [1, 2, 3, 4, 5] // this.EnergyMonitoringNameList = EnergyNameList
// this.wsData.data.forEach((ele) => { // let EnergyDataList = [1, 2, 3, 4, 5]
// EnergyDataList.push(ele.useQuantity) // // this.wsData.data.forEach((ele) => {
// }) // // EnergyDataList.push(ele.useQuantity)
this.EnergyMonitoringList = EnergyDataList // // })
// console.log(EnergyDataList) // this.EnergyMonitoringList = EnergyDataList
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList) // // console.log(EnergyDataList)
let eqArr = this.qualityYearList.map((item, index) => [ // this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''} // let eqArr = this.qualityYearList.map((item, index) => [
</span>`, // `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
// formatDate(item.planStartTime) || '', // </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.name || ''}
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`, // </span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`, // `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</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.eqConfig.data = eqArr
this.$refs.productLineChart.initChart(['D61', 'D62', 'D63', 'D64', 'D65',], [98, 97, 98.7, 98.5, 98.3,], [3134, 2323, 3232, 3233, 2321]) // 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.getList()
this.initWebSocket() this.initWebSocket()
this.SJGInitWebSocket() this.SJGInitWebSocket()
@ -349,7 +355,9 @@ export default {
this.beilv2 = _this.clientWidth / 1920 this.beilv2 = _this.clientWidth / 1920
})() })()
} }
this.getData()
}, },
// beforeDestroy() { // beforeDestroy() {
// //离开页面删除检测器和所有侦听器 // //离开页面删除检测器和所有侦听器
// // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom // // erd.uninstall(document); //这里用ref是因为vue离开页面后获取不到dom
@ -540,122 +548,10 @@ export default {
} else if (this.SJGInitWebSocket === 'inspection') { } 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) { SJGWebsocketClose(e) {
this.SJGws.ws.onclose = (event) => { console.log(event); } 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) { websocketClose(e) {
this.wsHeartbeat.ws.onclose = (event) => { console.log(event); } this.wsHeartbeat.ws.onclose = (event) => { console.log(event); }
}, },
@ -664,10 +560,14 @@ export default {
this.beilv2 = this.clientWidth / 1920 this.beilv2 = this.clientWidth / 1920
}, },
change() { change() {
console.log(this.isFullScreen);
debugger;
this.isFullScreen = screenfull.isFullscreen this.isFullScreen = screenfull.isFullscreen
}, },
init() { init() {
console.log(screenfull.isEnabled);
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
debugger;
screenfull.on('change', this.change) screenfull.on('change', this.change)
} }
}, },
@ -677,7 +577,7 @@ export default {
} }
}, },
changeFullScreen() { changeFullScreen() {
this.containerWidth = 223223223 // this.containerWidth = 223223223
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
this.$message({ this.$message({
message: 'you browser can not work', message: 'you browser can not work',
@ -685,7 +585,7 @@ export default {
}) })
return false return false
} }
screenfull.toggle(this.$refs.container) screenfull.toggle()
} }
} }
} }
@ -712,18 +612,17 @@ export default {
position: absolute; position: absolute;
left: 290px; left: 290px;
top: 25px; top: 25px;
letter-spacing: 0px; color: rgba(255, 255, 255, 0.80);
color: rgba($color: #ffffff, $alpha: 8);
font-size: 20px; font-size: 20px;
letter-spacing: 0px;
} }
.time { .time {
position: absolute; position: absolute;
left: 1360px; left: 1360px;
color: rgba(255, 255, 255, 0.80);
top: 25px; top: 25px;
letter-spacing: 0px;
color: rgba($color: #ffffff, $alpha: 8);
font-size: 20px; font-size: 20px;
letter-spacing: 0px;
} }
.title-button { .title-button {
color: #00fff0; color: #00fff0;
@ -836,6 +735,9 @@ export default {
margin-left: 3em; margin-left: 3em;
} }
} }
.order::-webkit-scrollbar {
display: none
}
</style> </style>
<style scoped> <style scoped>