mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: mt-fe-group:6b031d6e066f7c00168bec4606a0896182229093
Branches Tags
mt-fe-group:master
mt-fe-group:lb
mt-fe-group:zjl
mt-fe-group:gtz
...
compare: mt-fe-group:f09c048cf05d8f00b18c338092c1243a6f6ac1e3
Branches Tags
mt-fe-group:lb
mt-fe-group:master
mt-fe-group:zjl
mt-fe-group:gtz

11 Commits
6b031d6e06 ... f09c048cf0

Author SHA1 Message Date
lb
f09c048cf0 Merge branch 'master' into lb 2022-11-18 13:25:42 +08:00
lb
b072de6cb3 update 2022-11-18 13:24:37 +08:00
lb
ef59b5a358 update 质量管理工序质量分析 2022-11-18 11:35:02 +08:00
lb
df6cdf8f13 update 质量管理，产线缺陷月对比 2022-11-18 10:15:57 +08:00
lb
d89eb46f58 update 质量管理，产线缺陷日对比 2022-11-18 10:05:57 +08:00
lb
3a882ba735 update 设备管理 2022-11-18 09:44:19 +08:00
juzi
480a545544 Merge pull request '物料大屏' (#11) from zjl into master 
Reviewed-on: #11
 2022-11-17 17:00:07 +08:00
juzi
722f87df4d 物料大屏 2022-11-17 16:57:36 +08:00
juzi
a0b70cbd59 Merge pull request '工单&物料' (#10) from zjl into master 
Reviewed-on: #10
 2022-11-17 08:57:53 +08:00
juzi
d39bb981ec 工单&物料 2022-11-17 08:55:51 +08:00
高天泽
f01052d96f Merge pull request 'lb' (#9) from lb into master 
Reviewed-on: #9
 2022-11-16 08:54:20 +08:00
18 changed files with 822 additions and 527 deletions
Show Stats Expand all files Collapse all files

27
src/icons/svg/orange_dot.svg Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 25</title>
<defs>
<rect id="path-1" x="0" y="234" width="6" height="6" rx="3"></rect>
<filter x="-100.0%" y="-100.0%" width="300.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.301960784 0 0 0 0 0.0666666667 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-2工单管理" transform="translate(-1784.000000, -561.000000)">
<g id="编组-16备份-6" transform="translate(1016.000000, 229.000000)">
<g id="编组-19" transform="translate(32.000000, 64.000000)">
<g id="编组-28备份-4" transform="translate(736.000000, 8.000000)">
<g id="矩形备份-25" transform="translate(4.000000, 30.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FF4D11" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

4
src/views/EquipmentManager/HomePage.vue
View File

@ -54,7 +54,7 @@
lineHeight: '18px', lineHeight: '18px',
fontSize: '0.85vw' fontSize: '0.85vw'
}" }"
> >
各产线稼动率 各产线稼动率
</h2> --> </h2> -->
<span class="pl-jdl__title">各产线稼动率</span> <span class="pl-jdl__title">各产线稼动率</span>
@ -358,7 +358,7 @@ export default {
.grid-2-3 { .grid-2-3 {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: calc(8px * var(--beilv)) calc(4px * var(--beilv)); gap: calc(8px * var(--beilv)) calc(8px * var(--beilv));
} }
.product-line-selection { .product-line-selection {

2
src/views/EquipmentManager/components/EquipmentAnalysisBox.vue
View File

@ -145,7 +145,7 @@ export default {
width: 24px; */ width: 24px; */
font-size: calc(12px * var(--beilv)); font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv)); line-height: calc(14px * var(--beilv));
width: 15%; width: 18%;
} }
.param-list::before { .param-list::before {

54
src/views/EquipmentManager/mockData.js
View File

@ -71,22 +71,29 @@ const LifeRemainComponent = {
injectData: Object injectData: Object
}, },
computed: { computed: {
remainLeftPercentage() {
return this.injectData.remain / 300
},
statusColor() { statusColor() {
const colors = [ const colors = [
'rgba(255,84,76,0.6)', // red < 10% 'rgba(255,84,76,0.6)', // red < 10%
'#FFBD43', // yellow < 20% '#FFBD43', // yellow < 20%
'rgba(142,254,83,0.6)' // green 'rgba(142,254,83,0.6)' // green
] ]
return this.injectData.remain < 0 ? colors[0] : this.injectData.remain < 10 ? colors[1] : colors[2] return this.remainLeftPercentage < 0.1 ? colors[0] : this.remainLeftPercentage < 0.2 ? colors[1] : colors[2]
} }
}, },
render: function (h) { render: function (h) {
return h('span', { return h('span', {
style: style:
{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' } { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }
// { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' }
}, },
this.injectData.remain) [
h('span', { style: { color: this.remainLeftPercentage < 0.1 ? 'rgba(255,84,76,0.6)' : this.remainLeftPercentage < 0.2 ? '#FFBD43' : '#ffffffee' } }, this.injectData.remain),
h('span', { style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: this.remainLeftPercentage * 100 + '%', opacity: 0.8, backgroundColor: this.statusColor, } })
])
} }
} }
@ -151,34 +158,25 @@ export const equipmentAnalysisData = [
] ]
export const sparepartsProps = [ export const sparepartsProps = [
{ prop: 'name', label: '部件名称', align: 'center' }, { prop: 'name', label: '部件名称', align: 'center', 'min-width': 100 },
{ prop: 'eq', label: '所属设备', align: 'center' }, { prop: 'eq', label: '所属设备', align: 'center', 'min-width': 60 },
{ prop: 'pl', label: '所属产线', align: 'center' }, { prop: 'pl', label: '所属产线', align: 'center', 'min-width': 60 },
{ prop: 'update_time', label: '更换时间', align: 'center' }, { prop: 'update_time', label: '更换时间', align: 'center', 'min-width': 100 },
{ prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent }, { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent, 'min-width': 100 },
{ prop: 'stock', label: '备件库存量', align: 'center' }, { prop: 'stock', label: '备件库存量', align: 'center', 'min-width': 50 },
{ prop: 'location', label: '库位', align: 'center' } { prop: 'location', label: '库位', align: 'center', 'min-width': 100 },
] ]
// TODO: 2022.11.17 修改数据和剩余寿命组件
export const sparepartsDatalist = [ export const sparepartsDatalist = [
{ 'name': '激光打孔', 'eq': 'A2一次固化机', 'pl': 'C线', 'update_time': '2007-08-31 09:15:24', 'remain': -32, 'stock': 457, 'location': '库位74' }, { "pl": "B", "name": "油墨、刮胶", "eq": "丝印机", "update_time": "2022-09-12 13:05:54", "remain": 104, "stock": 2, "location": "备件库-A-3" },
{ 'name': '磨边单元', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '2016-10-02 22:23:09', 'remain': -95, 'stock': 5600, 'location': '库位10' }, { "pl": "A", "name": "镀膜液、异丙醇", "eq": "镀膜机", "update_time": "2022-09-24 08:34:36", "remain": 152, "stock": 10, "location": "备件库-D-1" },
{ 'name': '激光打孔', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '1996-09-17 08:57:52', 'remain': 46, 'stock': 6069, 'location': '库位87' }, { "pl": "B", "name": "磨轮", "eq": "磨边机", "update_time": "2022-10-09 09:15:08", "remain": 169, "stock": 9, "location": "备件库-A-3" },
{ 'name': '磨边单元', 'eq': 'A2一次固化机', 'pl': 'D线', 'update_time': '2018-07-18 13:15:01', 'remain': 86, 'stock': 2342, 'location': '库位83' }, { "pl": "B", "name": "镀膜辊", "eq": "镀膜机", "update_time": "2022-10-02 12:26:07", "remain": 33, "stock": 12, "location": "备件库-C-3" },
{ 'name': '上片机器人', 'eq': 'A2一次固化机', 'pl': 'E线', 'update_time': '1998-06-11 09:01:10', 'remain': 84, 'stock': 4359, 'location': '库位12' }, { "pl": "A", "name": "磨轮", "eq": "磨边机", "update_time": "2022-11-14 04:43:21", "remain": 20, "stock": 11, "location": "备件库-E-9" },
{ 'name': '丝印', 'eq': 'A1一次固化机', 'pl': 'E线', 'update_time': '2016-02-13 16:20:01', 'remain': -23, 'stock': 888, 'location': '库位69' }, { "pl": "A", "name": "镀膜辊", "eq": "镀膜机", "update_time": "2022-10-25 15:19:57", "remain": 192, "stock": 8, "location": "备件库-D-9" },
{ 'name': '激光打孔', 'eq': 'A1磨边清洗机', 'pl': 'B线', 'update_time': '2002-04-07 19:13:29', 'remain': 62, 'stock': 4366, 'location': '库位99' }, { "pl": "A", "name": "油墨、刮胶", "eq": "丝印机", "update_time": "2022-10-31 03:21:29", "remain": 96, "stock": 19, "location": "备件库-E-10" },
{ 'name': '丝印', 'eq': 'A1一次固化机', 'update_time': '1980-01-17 04:29:56', 'remain': 73, 'stock': 305, 'location': '库位68' }, { "pl": "B", "name": "网板", "eq": "丝印机", "update_time": "2022-09-01 15:49:08", "remain": 127, "stock": 8, "location": "备件库-E-10" },
{ 'name': '激光打孔', 'eq': 'A2一次冷却机', 'pl': 'B线', 'update_time': '2014-02-25 17:19:43', 'remain': 36, 'stock': 199, 'location': '库位86' }, { "pl": "A", "name": "网板", "eq": "丝印机", "update_time": "2022-09-25 04:47:04", "remain": 83, "stock": 8, "location": "备件库-C-6" },
{ 'name': '上片机器人', 'eq': 'A2一次冷却机', 'pl': 'C线', 'update_time': '2017-01-23 17:01:29', 'remain': -3, 'stock': 146, 'location': '库位79' },
{ 'name': '激光打孔', 'eq': 'A1磨边清洗机', 'pl': 'B线', 'update_time': '2002-04-07 19:13:29', 'remain': 62, 'stock': 4366, 'location': '库位99' },
{ 'name': '丝印', 'eq': 'A1一次固化机', 'update_time': '1980-01-17 04:29:56', 'remain': 73, 'stock': 305, 'location': '库位68' },
{ 'name': '激光打孔', 'eq': 'A2一次冷却机', 'pl': 'B线', 'update_time': '2014-02-25 17:19:43', 'remain': 36, 'stock': 199, 'location': '库位86' },
{ 'name': '上片机器人', 'eq': 'A2一次冷却机', 'pl': 'C线', 'update_time': '2017-01-23 17:01:29', 'remain': -3, 'stock': 146, 'location': '库位79' },
{ 'name': '镀膜', 'eq': 'A2一次固化机', 'pl': 'D线', 'update_time': '2013-02-19 01:29:19', 'remain': 37, 'stock': 6977, 'location': '库位85' },
{ 'name': '激光打孔', 'eq': 'A1预热机', 'pl': 'B线', 'update_time': '1972-04-26 06:54:43', 'remain': -82, 'stock': 5039, 'location': '库位38' }
] ]
import { default as blue } from './blue.png' import { default as blue } from './blue.png'

234
src/views/QualityManager/HomePage.vue
View File

@ -4,7 +4,7 @@
<section class="techy-body"> <section class="techy-body">
<div class="part-1"> <div class="part-1">
<div> <div>
<techy-container :title="'质量异常上报'" icon="质量1"> <techy-container :title="'离线异常上报'" icon="质量1">
<div class="table-wrapper fix-table-exception-report"> <div class="table-wrapper fix-table-exception-report">
<techy-table <techy-table
:page="1" :page="1"
@ -18,7 +18,7 @@
</div> </div>
<div class=" fix-table-exception-alert"> <div class=" fix-table-exception-alert">
<techy-container :title="'质量异常报警'" icon="质量2"> <techy-container :title="'在线异常上报'" icon="质量2">
<div class="table-wrapper"> <div class="table-wrapper">
<techy-table <techy-table
:page="1" :page="1"
@ -41,51 +41,59 @@
<div class="grow-8 flex gap-16"> <div class="grow-8 flex gap-16">
<div class="grow"> <div class="grow">
<techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>缺陷分类分析</techy-analysis-header> <techy-analysis-header>产线缺陷日对比</techy-analysis-header>
<new-bar <div
:xlabel-font-size="10" class="absolute top-0 left-0"
:xlabel-rotate="30" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
:name-list="[ >
'擦划伤1', <new-bar
'擦划伤2', chart-name="realtime-cost-production"
'擦划伤3', :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
'擦划伤4', :data-list="[
'擦划伤5', {
'擦划伤6', topColor: 'rgba(59, 76, 118, 0.2)',
'擦划伤7', bottomColor: '#49FBD6',
'擦划伤8', name: '产线A',
'擦划伤9', data: [163, 184, 110, 22, 96, 74]
'擦划伤0', },
'擦划伤11', {
'擦划伤12' topColor: 'rgba(59, 76, 118, 0.2)',
]" bottomColor: '#31A2FF',
chart-name="fault-category" name: '产线B',
:data-list="[ data: [162, 172, 122, 15, 82, 74]
{ }
topColor: 'rgba(59, 76, 118, 0.2)', ]"
bottomColor: '#31A2FF', />
name: '库存', </div>
data: [32, 65, 65, 54, 40, 60, 64, 91, 55, 65, 37, 77]
}
]"
/>
</techy-box> </techy-box>
</div> </div>
<div class="grow"> <div class="grow">
<techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>工序缺陷分析</techy-analysis-header> <techy-analysis-header>产线缺陷月对比</techy-analysis-header>
<new-bar <div
chart-name="process-fault" class="absolute top-0 left-0"
:name-list="['A', 'B', 'C', 'D', 'E', 'F']" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
:data-list="[ >
{ <new-bar
topColor: 'rgba(59, 76, 118, 0.2)', chart-name="realtime-cost-production"
bottomColor: '#49FBD6', :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
name: '库存', unit-name="单位: 千片"
data: [64, 91, 55, 65, 37, 77] :data-list="[
} {
]" topColor: 'rgba(59, 76, 118, 0.2)',
/> bottomColor: '#49FBD6',
name: '产线A',
data: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
},
{
topColor: 'rgba(59, 76, 118, 0.2)',
bottomColor: '#31A2FF',
name: '产线B',
data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
}
]"
/>
</div>
</techy-box> </techy-box>
</div> </div>
</div> </div>
@ -178,19 +186,7 @@
<!-- 第二行 --> <!-- 第二行 -->
<div class="quality-analysis__body__row-2"> <div class="quality-analysis__body__row-2">
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col"> <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线A工序质量分析(数量)</techy-analysis-header> <techy-analysis-header>产线A工序质量分析(日)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
v-for="(item, index) in qualityAnalysisDatalist"
:key="index"
:name="item.name"
:amount="item.amount"
color="green"
/>
</div>
</techy-box>
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线B工序质量分析(数量)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5"> <div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar <techy-analysis-bar
v-for="(item, index) in qualityAnalysisDatalist" v-for="(item, index) in qualityAnalysisDatalist"
@ -202,10 +198,22 @@
</div> </div>
</techy-box> </techy-box>
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col"> <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线C工序质量分析(数量)</techy-analysis-header> <techy-analysis-header>产线A工序质量分析(月)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5"> <div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar <techy-analysis-bar
v-for="(item, index) in qualityAnalysisDatalist" v-for="(item, index) in qualityAnalysisDatalistMonth"
:key="index"
:name="item.name"
:amount="item.amount"
color="blue"
/>
</div>
</techy-box>
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线B工序质量分析(日)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
v-for="(item, index) in qualityAnalysisDatalistB"
:key="index" :key="index"
:name="item.name" :name="item.name"
:amount="item.amount" :amount="item.amount"
@ -214,14 +222,14 @@
</div> </div>
</techy-box> </techy-box>
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col"> <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线D工序质量分析(数量)</techy-analysis-header> <techy-analysis-header>产线B工序质量分析(月)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5"> <div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar <techy-analysis-bar
v-for="(item, index) in qualityAnalysisDatalist" v-for="(item, index) in qualityAnalysisDatalistMonthB"
:key="index" :key="index"
:name="item.name" :name="item.name"
:amount="item.amount" :amount="item.amount"
color="pink" color="orange"
/> />
</div> </div>
</techy-box> </techy-box>
@ -266,36 +274,36 @@ export default {
data() { data() {
const quexianDatalist = [ const quexianDatalist = [
[ [
{ value: 107, name: '破片' }, { value: 4.34, name: '破片' },
{ value: 146, name: '崩边' }, { value: 3.4, name: '崩边' },
{ value: 43, name: '脏污' }, { value: 4.1, name: '脏污' },
{ value: 83, name: '划擦伤' }, { value: 2.4, name: '划擦伤' },
{ value: 20, name: '崩孔' }, { value: 0.23, name: '崩孔' },
{ value: 21, name: '其他' } { value: 2.14, name: '其他' }
], ],
[ [
{ value: 117, name: '破片' }, { value: 4.17, name: '破片' },
{ value: 106, name: '崩边' }, { value: 3.6, name: '崩边' },
{ value: 40, name: '脏污' }, { value: 4, name: '脏污' },
{ value: 82, name: '划擦伤' }, { value: 2.2, name: '划擦伤' },
{ value: 22, name: '崩孔' }, { value: 0.2, name: '崩孔' },
{ value: 19, name: '其他' } { value: 1.9, name: '其他' }
], ],
[ [
{ value: 97, name: '破片' }, { value: 3.33, name: '破片' },
{ value: 96, name: '崩边' }, { value: 3, name: '崩边' },
{ value: 33, name: '脏污' }, { value: 4.3, name: '脏污' },
{ value: 43, name: '划擦伤' }, { value: 2.1, name: '划擦伤' },
{ value: 10, name: '崩孔' }, { value: 1, name: '崩孔' },
{ value: 18, name: '其他' } { value: 1.8, name: '其他' }
], ],
[ [
{ value: 127, name: '破片' }, { value: 2.7, name: '破片' },
{ value: 156, name: '崩边' }, { value: 1.56, name: '崩边' },
{ value: 53, name: '脏污' }, { value: 2.3, name: '脏污' },
{ value: 93, name: '划擦伤' }, { value: 1.2, name: '划擦伤' },
{ value: 25, name: '崩孔' }, { value: 0.23, name: '崩孔' },
{ value: 22, name: '其他' } { value: 2, name: '其他' }
] ]
] ]
@ -309,16 +317,52 @@ export default {
qualityExceptionDatalist, qualityExceptionDatalist,
qualityExceptionTableProps, qualityExceptionTableProps,
qualityAnalysisDatalist: [ qualityAnalysisDatalist: [
{ name: '热端', amount: 20233 }, { name: '上片', amount: 22 },
{ name: '丝印', amount: 20233328 }, { name: '钢化', amount: 2 },
{ name: '原片', amount: 20 }, { name: '磨边', amount: 221 },
{ name: '钢化', amount: 2000 }, { name: '下片', amount: 27 },
{ name: '上片磨边', amount: 20 }, { name: '丝印', amount: 93 },
{ name: '下片铺纸', amount: 202423 }, { name: '包装', amount: 3 },
{ name: '镀膜', amount: 20 }, { name: '打孔', amount: 31 },
{ name: '包装', amount: 20 }, { name: '清洗', amount: 2 },
{ name: '清晰', amount: 20 }, { name: '镀膜', amount: 95 },
{ name: '物流仓储', amount: 233920 } { name: '其他', amount: 171 }
],
qualityAnalysisDatalistMonth: [
{ name: '上片', amount: 665 },
{ name: '钢化', amount: 56 },
{ name: '磨边', amount: 6541 },
{ name: '下片', amount: 820 },
{ name: '丝印', amount: 2790 },
{ name: '包装', amount: 83 },
{ name: '打孔', amount: 964 },
{ name: '清洗', amount: 61 },
{ name: '镀膜', amount: 2470 },
{ name: '其他', amount: 4959 }
],
qualityAnalysisDatalistB: [
{ name: '上片', amount: 16 },
{ name: '钢化', amount: 4 },
{ name: '磨边', amount: 201 },
{ name: '下片', amount: 21 },
{ name: '丝印', amount: 100 },
{ name: '包装', amount: 1 },
{ name: '打孔', amount: 27 },
{ name: '清洗', amount: 2 },
{ name: '镀膜', amount: 93 },
{ name: '其他', amount: 163 }
],
qualityAnalysisDatalistMonthB: [
{ name: '上片', amount: 698 },
{ name: '钢化', amount: 49 },
{ name: '磨边', amount: 6321 },
{ name: '下片', amount: 799 },
{ name: '丝印', amount: 2782 },
{ name: '包装', amount: 72 },
{ name: '打孔', amount: 992 },
{ name: '清洗', amount: 63 },
{ name: '镀膜', amount: 2510 },
{ name: '其他', amount: 4920 }
], ],
quexianDatalist, quexianDatalist,
chosenDatalist: quexianDatalist[0] chosenDatalist: quexianDatalist[0]

21
src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue
View File

@ -42,15 +42,15 @@ export default {
x2: 1, x2: 1,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ color: '#FFFFFF00', offset: 0 }, { color: '#DDB112', offset: 0 }, // 黄
{ color: '#DDB11200', offset: 0.1 }, { color: '#DDB112b0', offset: 0.2 },
{ color: '#DDB112', offset: 1 } // 黄 { color: '#FFFFFF00', offset: 1 }
], ],
global: false global: false
}, },
{ {
type: 'linear', type: 'linear',
x: 0, x: 1,
y: 1, y: 1,
x2: 0, x2: 0,
y2: 0, y2: 0,
@ -117,7 +117,7 @@ export default {
fontWeight: 'normal' fontWeight: 'normal'
}, },
itemGap: 5, itemGap: 5,
subtext: '总数', subtext: '总数/片',
subtextStyle: { subtextStyle: {
color: '#fff', color: '#fff',
fontSize: 12, fontSize: 12,
@ -125,12 +125,12 @@ export default {
} }
}, },
legend: { legend: {
top: '10%', top: '12%',
bottom: 0, bottom: 0,
left: 0, left: 0,
orient: 'vertical', orient: 'vertical',
icon: 'none', icon: 'none',
itemGap: 5, itemGap: 8,
itemWidth: 10, itemWidth: 10,
formatter: name => { formatter: name => {
const testData = this.dataList const testData = this.dataList
@ -298,18 +298,19 @@ export default {
applyChartOption(datalist) { applyChartOption(datalist) {
const fs5 = this.calcFontsize(5 /** px*/) const fs5 = this.calcFontsize(5 /** px*/)
const fs8 = this.calcFontsize(8 /** px*/)
const fs10 = this.calcFontsize(10 /** px*/) const fs10 = this.calcFontsize(10 /** px*/)
const fs14 = this.calcFontsize(14 /** px*/) const fs14 = this.calcFontsize(14 /** px*/)
const fs18 = this.calcFontsize(18 /** px*/) const fs18 = this.calcFontsize(18 /** px*/)
const legendTopRate = this.calcFontsize(28 /** % */) const legendTopRate = this.calcFontsize(30 /** % */)
this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value, 0) this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
this.configs.title.textStyle.fontSize = fs18 this.configs.title.textStyle.fontSize = fs18
this.configs.title.subtextStyle.fontSize = fs14 this.configs.title.subtextStyle.fontSize = fs14
this.configs.legend.top = legendTopRate + '%' this.configs.legend.top = legendTopRate + '%'
this.configs.legend.left = 0 + '%' this.configs.legend.left = 0 + '%'
this.configs.legend.itemGap = fs5 this.configs.legend.itemGap = fs8
this.configs.legend.itemWidth = fs10 this.configs.legend.itemWidth = fs10
this.configs.legend.textStyle.rich.a.fontSize = fs10 this.configs.legend.textStyle.rich.a.fontSize = fs10

254
src/views/QualityManager/components/charts/newBar.vue
View File

@ -3,7 +3,7 @@
ref="chartContainer" ref="chartContainer"
class="chartContainer" class="chartContainer"
:class="bindClass" :class="bindClass"
style="position: relative; width: 100%; height: calc(100% - 36px)" style="position: relative; width: 100%; height:100%"
/> />
</template> </template>
@ -15,6 +15,10 @@ export default {
name: 'OverviewBar', name: 'OverviewBar',
mixins: [resize], mixins: [resize],
props: { props: {
unitName: {
type: String,
default: '单位: 片'
},
chartName: { chartName: {
type: String, type: String,
default: '' default: ''
@ -46,19 +50,19 @@ export default {
bindClass() { bindClass() {
return { return {
'fault-category-chart': this.chartName === 'fault-category', 'fault-category-chart': this.chartName === 'fault-category',
'process-fault-chart': this.chartName === 'process-fault' 'process-fault-chart': this.chartName === 'process-fault',
'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
} }
} }
}, },
mounted() { mounted() {
if (this.dataList.length > 1) { if (this.dataList.length > 1) {
const barWidth = 400 / 2 / this.dataList[0].data.length
this.series = [ this.series = [
{ {
// 柱体 // 柱体
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'bar', type: 'bar',
barWidth, barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor }, { offset: 0, color: this.dataList[0].topColor },
@ -71,23 +75,40 @@ export default {
// 柱顶 // 柱顶
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
barWidth, barWidth: 20,
symbol: 'diamond', symbol: 'circle',
symbolPosition: 'end', symbolPosition: 'end',
symbolOffset: [0, '-50%'], symbolOffset: ['-70%', '-50%'],
symbolSize: [30, 12], symbolSize: [20, 6],
zlevel: 2, zlevel: 2,
itemStyle: { color: this.dataList[0].topColor }, itemStyle: {
data: this.dataList[0].data color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: '#2c6e7d' }
])
},
data: this.dataList[0].data,
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [-12, 10],
position: 'top',
vertialAlign: 'bottom'
}
}, },
{ {
// 柱底 // 柱底
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
barWidth, barWidth: 20,
symbol: 'diamond', symbol: 'circle',
symbolOffset: [0, '50%'], symbolOffset: ['-62%', '50%'],
symbolSize: [30, 15], symbolSize: [20, 6],
itemStyle: { color: this.dataList[0].bottomColor }, itemStyle: { color: this.dataList[0].bottomColor },
data: this.dataList[0].data data: this.dataList[0].data
}, },
@ -95,7 +116,7 @@ export default {
// 柱体 // 柱体
name: this.dataList[1].name, name: this.dataList[1].name,
type: 'bar', type: 'bar',
barWidth, barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor }, { offset: 0, color: this.dataList[1].topColor },
@ -108,56 +129,64 @@ export default {
// 柱顶 // 柱顶
name: this.dataList[1].name, name: this.dataList[1].name,
type: 'pictorialBar', type: 'pictorialBar',
barWidth, barWidth: 20,
symbol: 'diamond', symbol: 'circle',
symbolPosition: 'end', symbolPosition: 'end',
symbolOffset: [0, '-50%'], symbolOffset: ['66%', '-50%'],
symbolSize: [30, 12], symbolSize: [20, 6],
zlevel: 2, zlevel: 2,
itemStyle: { color: this.dataList[1].topColor }, itemStyle: {
data: this.dataList[1].data color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
])
},
data: this.dataList[1].data,
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [12, 10],
position: 'top',
vertialAlign: 'bottom'
}
}, },
{ {
// 柱底 // 柱底
name: this.dataList[1].name, name: this.dataList[1].name,
type: 'pictorialBar', type: 'pictorialBar',
barWidth, barWidth: 20,
symbol: 'diamond', symbol: 'circle',
symbolOffset: [0, '50%'], symbolOffset: ['66%', '50%'],
symbolSize: [30, 15], symbolSize: [20, 6],
itemStyle: { color: this.dataList[1].topColor }, itemStyle: { color: this.dataList[1].bottomColor },
data: this.dataList[1].data data: this.dataList[1].data
} }
] ]
} else { } else {
const barWidth = 320 / 2 / this.dataList[0].data.length const barWidth = 400 / 2 / this.dataList[0].data.length
this.series = [ this.series = [
{ {
// 柱体 // 柱体
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'bar', type: 'bar',
// barWidth: 26,
barWidth: barWidth, barWidth: barWidth,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor }, { offset: 0, color: this.dataList[0].topColor },
{ offset: 1, color: this.dataList[0].bottomColor } { offset: 1, color: this.dataList[0].bottomColor }
]) ])
// borderWidth: 1,
// borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度
}, },
data: this.dataList[0].data data: this.dataList[0].data
// backgroundStyle: {
// // borderColor: this.dataList[0].bottomColor,
// borderColor: '#ff0000',
// borderWidth: 1
// }
}, },
{ {
// 柱顶 // 柱顶
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth, barWidth: barWidth,
symbol: 'circle', symbol: 'circle',
symbolPosition: 'end', symbolPosition: 'end',
@ -167,11 +196,16 @@ export default {
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' }, { offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: this.dataList[0].bottomColor } { offset: 1, color: '#2c6e7d' }
]) ])
}, },
label: { label: {
color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff', color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true, show: true,
offset: [0, 10], offset: [0, 10],
position: 'top', position: 'top',
@ -183,12 +217,11 @@ export default {
// 柱底 // 柱底
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth, barWidth: barWidth,
symbol: 'circle', symbol: 'circle',
symbolOffset: [0, '50%'], symbolOffset: [0, '50%'],
symbolSize: [barWidth, 6], symbolSize: [barWidth, 6],
itemStyle: { color: this.dataList[0].bottomColor + '9f' }, itemStyle: { color: '#2c6e7d' },
data: this.dataList[0].data data: this.dataList[0].data
} }
] ]
@ -210,12 +243,23 @@ export default {
this.chart = echarts.init(this.$refs.chartContainer) this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption({ this.chart.setOption({
grid: { grid: {
top: 10, top: '24%',
left: '2%', left: '8%',
right: '2%', right: '5%',
bottom: '3%', bottom: '5%',
containLabel: true containLabel: true
}, },
legend: {
itemWidth: 8,
itemHeight: 8,
selectedMode: false,
top: '7%',
right: '2%',
textStyle: {
color: '#fff9',
fontSize: 10
}
},
xAxis: { xAxis: {
type: 'category', type: 'category',
axisLine: { axisLine: {
@ -225,40 +269,77 @@ export default {
show: false show: false
}, },
axisLabel: { axisLabel: {
margin: 16,
textStyle: { textStyle: {
fontSize: this.xlabelFontSize, fontSize: this.xlabelFontSize,
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}, },
margin: 20,
rotate: this.xlabelRotate rotate: this.xlabelRotate
}, },
data: this.nameList data: this.nameList
}, },
yAxis: { yAxis: [
axisLine: { {
lineStyle: { name: this.unitName, // '单位: 片',
type: 'solid', nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
color: this.dataList[0].bottomColor, type: 'value',
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色 splitNumber: 3,
width: '1' // 坐标线的宽度 axisTick: { show: false },
} onZero: true,
}, position: 'left',
axisTick: { offset: 10,
show: false axisLine: {
}, lineStyle: {
axisLabel: { type: 'solid',
textStyle: { color: this.dataList[0].bottomColor,
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
} width: '1' // 坐标线的宽度
}, }
splitLine: { },
lineStyle: { axisLabel: {
type: 'dotted', textStyle: {
color: 'rgba(119, 255, 242, 0.2)' color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
} }
}, },
type: 'value' splitLine: {
}, lineStyle: {
type: 'dotted',
color: 'rgba(119, 255, 242, 0.2)'
}
},
type: 'value'
}
// {
// name: '能耗kw/h',
// nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
// type: 'value',
// splitNumber: 3,
// axisTick: { show: false },
// onZero: true,
// position: 'left',
// offset: 48,
// axisLine: {
// lineStyle: {
// type: 'solid',
// color: this.dataList[1].bottomColor,
// width: '1' // 坐标线的宽度
// }
// },
// axisLabel: {
// textStyle: {
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
// }
// },
// splitLine: {
// show: false
// // lineStyle: {
// // type: 'dotted',
// // color: 'rgba(119, 255, 242, 0.2)'
// // }
// },
// type: 'value'
// }
],
series: this.series series: this.series
}) })
} }
@ -276,27 +357,40 @@ export default {
/* .fault-category-chart::before { */ /* .fault-category-chart::before { */
content: ''; content: '';
position: absolute; position: absolute;
bottom: calc(36px * var(--beilv)); /* bottom: calc(100vh/1920 * 80);
/* top: 63%; */ left: calc(100vw/1920 * 48); */
/* bottom: calc(10% + 100vh/1920 * 28); */
bottom: 25px;
left: 9%; left: 9%;
height: calc(32px * var(--beilv)); height: 52px;
width: 90%; width: 90%;
background: linear-gradient(to top, #31a2ff6d, transparent); background: linear-gradient(to top, #31a2ff6d, transparent);
transform: skew(-35deg); transform: skew(-45deg);
z-index: 0; z-index: 0;
} }
.process-fault-chart >>> div::before { .process-fault-chart >>> div::before {
/* .process-fault-chart::before { */ /* .process-fault-chart::before { */
content: ''; content: '';
position: absolute; position: absolute;
top: 65%; bottom: 26px;
left: 8%; left: 10%;
height: calc(32px * var(--beilv)); height: 48px;
/* bottom: calc(20px * var(--beilv));
left: calc(36px * var(--beilv));
height: calc(32px * var(--beilv)); */
width: 90%; width: 90%;
background: linear-gradient(to top, #49fbd789, transparent); background: linear-gradient(to top, #49fbd789, transparent);
transform: skew(-45deg);
z-index: 0;
}
.realtime-production-cost-chart >>> div::before {
/* .fault-category-chart::before { */
content: '';
position: absolute;
bottom: 12%;
left: 6%;
height: 30px;
width: 90%;
border-radius: 3px;
/* border: 1px solid #49fbd7; */
background: linear-gradient(to top, #49fbd789 5%, transparent);
transform: skew(-35deg); transform: skew(-35deg);
z-index: 0; z-index: 0;
} }

2
src/views/QualityManager/components/charts/newLineStack.vue
View File

@ -31,7 +31,7 @@ export default {
} }
}, },
grid: { grid: {
top: '15%', top: '18%',
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',

105
src/views/QualityManager/mockData.js
View File

@ -30,42 +30,43 @@ const PriorityComponent = {
console.log(this.injectData.priority) console.log(this.injectData.priority)
}, },
methods: {}, methods: {},
render: function (h) { render: function(h) {
return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText) return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText)
} }
} }
console.log('is component?', PriorityComponent) console.log('is component?', PriorityComponent)
export const qualityTableProps = [ export const qualityTableProps = [
{ label: '工序名称', width: 130, prop: 'wsName', align: 'center' }, { label: '工序名称', width: 130, prop: 'wsName', align: 'center', 'min-width': 55 },
{ label: '所属产线', width: 130, prop: 'pl', align: 'center' }, { label: '所属产线', width: 130, prop: 'pl', align: 'center', 'min-width': 55 },
{ label: '异常内容', align: 'center', prop: 'content' }, { label: '异常内容', align: 'center', prop: 'content', 'min-width': 55 },
{ label: '报告人', width: 120, prop: 'creator', align: 'center' }, { label: '班组', width: 120, prop: 'team', align: 'center', 'min-width': 55 },
{ label: '时间', prop: 'time', align: 'center' }, { label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent } { label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 }
] ]
export const qualityDatalist = [ export const qualityDatalist = [
{ 'wsName': '工序0', 'pl': '产线1', 'content': '争近才百子', 'creator': '毛刚', 'time': '1995-03-10 22:06:23', 'priority': 3 }, { 'wsName': '原片', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:36:26', 'priority': 3 },
{ 'wsName': '工序1', 'pl': '产线10', 'content': '确规面这又间级', 'creator': '毛勇', 'time': '1997-11-26 16:27:32', 'priority': 1 }, { 'wsName': '下片铺纸', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 11:35:02', 'priority': 4 },
{ 'wsName': '工序2', 'pl': '产线8', 'content': '成思体高原法厂清', 'creator': '林平', 'time': '1990-09-18 03:16:44', 'priority': 2 }, { 'wsName': '镀膜', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:10:02', 'priority': 1 },
{ 'wsName': '工序3', 'pl': '产线6', 'content': '社色增设长放统展', 'creator': '叶静', 'time': '1970-12-02 09:44:01', 'priority': 4 }, { 'wsName': '丝印', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 02:16:20', 'priority': 4 },
{ 'wsName': '工序4', 'pl': '产线10', 'content': '今西', 'creator': '罗磊', 'time': '2017-10-21 00:00:27', 'priority': 2 }, { 'wsName': '上片磨边', 'pl': 'A', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 4 },
{ 'wsName': '工序5', 'pl': '产线4', 'content': '却称老节再始', 'creator': '郝秀兰', 'time': '2018-06-04 20:34:53', 'priority': 1 }, { 'wsName': '丝印', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 4 },
{ 'wsName': '工序6', 'pl': '产线4', 'content': '志矿正算片大料水断特', 'creator': '熊磊', 'time': '1999-07-20 19:13:32', 'priority': 3 }, { 'wsName': '上片磨边', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:54:45', 'priority': 3 },
{ 'wsName': '工序7', 'pl': '产线3', 'content': '目式却属采精国', 'creator': '马磊', 'time': '2001-07-16 03:50:54', 'priority': 4 }, { 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:47:23', 'priority': 1 },
{ 'wsName': '工序8', 'pl': '产线7', 'content': '做较代你', 'creator': '曾敏', 'time': '1986-01-07 03:20:21', 'priority': 3 }, { 'wsName': '包装', 'pl': 'B', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 02:46:21', 'priority': 1 },
{ 'wsName': '工序9', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 }, { 'wsName': '上片磨边', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:31:10', 'priority': 1 },
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 }, { 'wsName': '下片铺纸', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:22:55', 'priority': 3 },
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 4 }, { 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:29:08', 'priority': 2 },
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 }, { 'wsName': '丝印', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 09:47:06', 'priority': 1 },
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 }, { 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:17:27', 'priority': 1 },
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 }, { 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 00:29:26', 'priority': 2 },
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 }, { 'wsName': '清洗', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:14:27', 'priority': 2 },
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 }, { 'wsName': '包装', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:50:39', 'priority': 3 },
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 } { 'wsName': ' 物流仓储', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:37:44', 'priority': 2 },
] { 'wsName': '清洗', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 03:53:47', 'priority': 2 },
{ 'wsName': '原片', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 08:01:02', 'priority': 3 }]
/** 质量异常报警 */ /** 质量异常报警 */
@ -95,41 +96,43 @@ const StatusComponent = {
][this.injectData.status - 1] ][this.injectData.status - 1]
} }
}, },
render: function (h) { render: function(h) {
return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [ return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [
h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' } }, ''), h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' }}, ''),
h('span', this.statusText) h('span', this.statusText)
]) ])
} }
} }
export const qualityExceptionTableProps = [ export const qualityExceptionTableProps = [
{ label: '工序名称', prop: 'wsName', align: 'center', width: 120 }, { label: '工序名称', prop: 'wsName', align: 'center', width: 128 },
{ label: '所属产线', prop: 'pl', align: 'center', width: 120 }, { label: '所属产线', prop: 'pl', align: 'center', width: 120 },
{ label: '异常内容', prop: 'content', align: 'center' }, { label: '异常内容', prop: 'content', align: 'center', 'min-width': 55 },
{ label: '发现人', prop: 'creator', align: 'center', width: 100 }, { label: '设备', prop: 'eq', align: 'center', width: 100 },
{ label: '时间', prop: 'time', align: 'center' }, { label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 }, { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 }
// { label: '处理人', prop: 'charger', align: 'center', width: 100 }, // { label: '处理人', prop: 'charger', align: 'center', width: 100 },
// { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 150 } // { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 150 }
] ]
export const qualityExceptionDatalist = [ export const qualityExceptionDatalist = [
{ 'wsName': '工序0', 'pl': '产线1', 'content': '说红要称或各眼华家书', 'creator': '罗霞', 'time': '2013-04-08 15:23:55', 'priority': 1, 'charger': '冯敏', 'status': 4 }, { 'pl': 'A', 'eq': '打孔', 'wsName': '打孔', 'content': '完整性', 'time': '2022-11-18 11:30:01', 'priority': 4 },
{ 'wsName': '工序1', 'pl': '产线9', 'content': '积已反老支人后条办', 'creator': '龚芳', 'time': '1984-06-22 09:44:24', 'priority': 2, 'charger': '万静', 'status': 2 }, { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透过率', 'time': '2022-11-18 07:20:35', 'priority': 4 },
{ 'wsName': '工序2', 'pl': '产线10', 'content': '铁收王', 'creator': '黎艳', 'time': '2006-10-25 19:20:41', 'priority': 2, 'charger': '徐秀兰', 'status': 1 }, { 'pl': 'B', 'eq': '钢后清洗机', 'wsName': '钢后清洗机', 'content': '透过率', 'time': '2022-11-18 09:16:21', 'priority': 2 },
{ 'wsName': '工序3', 'pl': '产线10', 'content': '过又条政理质系', 'creator': '郝强', 'time': '2020-03-06 12:11:52', 'priority': 3, 'charger': '白秀兰', 'status': 2 }, { 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 04:57:10', 'priority': 4 },
{ 'wsName': '工序4', 'pl': '产线3', 'content': '特适院', 'creator': '魏超', 'time': '1982-12-26 16:19:57', 'priority': 1, 'charger': '姚静', 'status': 3 }, { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 08:26:43', 'priority': 2 },
{ 'wsName': '工序5', 'pl': '产线1', 'content': '快准很问无', 'creator': '于桂英', 'time': '1976-09-26 21:53:11', 'priority': 4, 'charger': '白刚', 'status': 2 }, { 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 04:09:39', 'priority': 2 },
{ 'wsName': '工序6', 'pl': '产线7', 'content': '研开', 'creator': '何桂英', 'time': '1977-04-23 05:34:45', 'priority': 3, 'charger': '秦涛', 'status': 4 }, { 'pl': 'B', 'eq': '下片', 'wsName': '下片', 'content': '透过率', 'time': '2022-11-18 01:06:05', 'priority': 2 },
{ 'wsName': '工序7', 'pl': '产线2', 'content': '四取各广水儿强想华', 'creator': '唐军', 'time': '1988-03-11 22:40:42', 'priority': 2, 'charger': '龙艳', 'status': 1 }, { 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 05:06:36', 'priority': 1 },
{ 'wsName': '工序8', 'pl': '产线7', 'content': '样无商口', 'creator': '高娟', 'time': '2012-03-14 06:40:16', 'priority': 3, 'charger': '沈涛', 'status': 1 }, { 'pl': 'B', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 07:11:45', 'priority': 3 },
{ 'wsName': '工序9', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 }, { 'pl': 'A', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 11:40:37', 'priority': 3 },
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 2, 'charger': '侯磊', 'status': 3 }, { 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 10:41:54', 'priority': 1 },
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 1, 'charger': '侯磊', 'status': 1 }, { 'pl': 'B', 'eq': '预热', 'wsName': '预热', 'content': '透过率', 'time': '2022-11-18 04:10:00', 'priority': 1 },
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 1, 'charger': '侯磊', 'status': 2 }, { 'pl': 'B', 'eq': '钢化', 'wsName': '钢化', 'content': '完整性', 'time': '2022-11-18 09:23:40', 'priority': 1 },
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 2, 'charger': '侯磊', 'status': 3 }, { 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '透过率', 'time': '2022-11-18 05:28:05', 'priority': 2 },
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 3, 'charger': '侯磊', 'status': 2 }, { 'pl': 'B', 'eq': '上片', 'wsName': '上片', 'content': '完整性', 'time': '2022-11-18 06:24:57', 'priority': 3 },
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 3, 'charger': '侯磊', 'status': 1 }, { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 02:48:28', 'priority': 4 },
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 } { 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 13:06:35', 'priority': 1 },
] { 'pl': 'B', 'eq': '打孔', 'wsName': '打孔', 'content': '透过率', 'time': '2022-11-18 11:49:59', 'priority': 1 },
{ 'pl': 'B', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 12:32:20', 'priority': 2 },
{ 'pl': 'B', 'eq': '丝印', 'wsName': '丝印', 'content': '完整性', 'time': '2022-11-18 12:45:49', 'priority': 3 }]

12
src/views/material-manage/cockpit/components/baseContainer/index.vue
View File

@ -7,7 +7,7 @@
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
--> -->
<template> <template>
<div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}"> <div class="base-container" :style="{fontSize: 12 * beilv + 'px'}">
<div class="line" /> <div class="line" />
<div class="line line-vertical" /> <div class="line line-vertical" />
<div class="line line-right" /> <div class="line line-right" />
@ -75,6 +75,7 @@ export default {
.base-container { .base-container {
color: #fff; color: #fff;
width: 100%; width: 100%;
height: 100%;
background-color: rgba($color: #061027, $alpha: 0.15); background-color: rgba($color: #061027, $alpha: 0.15);
position: relative; position: relative;
border: 2px solid; border: 2px solid;
@ -138,8 +139,11 @@ export default {
font-size: 1.5em; font-size: 1.5em;
padding: .67em; padding: .67em;
} }
// .bar-content{ .bar-item {
// padding: 1em; height: 100%;
// } }
.bar-content{
height: calc(100% - 4em);
}
} }
</style> </style>

180
src/views/material-manage/cockpit/components/baseTable.vue
View File

@ -7,26 +7,29 @@
--> -->
<template> <template>
<div class="visual-base-table-container"> <div class="visual-base-table-container">
<el-table <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
v-loading="isLoading"
:header-cell-style="{background:'rgba(32, 55, 96, 0.8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
<el-table-column <el-table-column
v-for="item in renderTableHeadList" v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
:width="70 * beilv"
align="center"
/>
<el-table-column
v-for="(item, index) in renderTableHeadList"
:key="item.prop" :key="item.prop"
:show-overflow-tooltip="showOverflow" :show-overflow-tooltip="showOverflow"
v-bind="item" v-bind="item"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<component
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" /> :is="item.subcomponent"
v-if="item.subcomponent"
:key="index"
:inject-data="{ ...scope.row, ...item }"
@emitData="emitData"
/>
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<slot name="content" /> <slot name="content" />
@ -36,7 +39,7 @@
<script> <script>
import { isObject, isString } from 'lodash' import { isObject, isString } from 'lodash'
export default { export default {
name: 'BaseTable', name: 'TechyTable',
filters: { filters: {
commonFilter: (source, filterType = a => a) => { commonFilter: (source, filterType = a => a) => {
return filterType(source) return filterType(source)
@ -107,70 +110,103 @@ export default {
methods: { methods: {
emitData(val) { emitData(val) {
this.$emit('emitFun', val) this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(14, 32, 62, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
} else {
return {
background: 'rgba(32, 55, 96, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
}
} }
} }
} }
</script> </script>
<style lang="scss">
@import "~@/styles/index.scss"; <style scoped>
.visual-base-table-container >>> ::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
.visual-base-table-container >>> ::-webkit-scrollbar-track {
background-color: #14243f;
border-radius: 0;
}
.visual-base-table-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #5bc4bf9f;
position: relative;
}
.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
/* .visual-base-table-container {
min-width: 30vw;
} */
.visual-base-table-container { .visual-base-table-container {
.el-table { height: 100%;
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
} }
.setting { /* .visual-base-table-container >>> .el-table {
text-align: right; min-width: 120%;
padding: 15px; } */
.setting-box { /* 清除默认样式 */
width: 100px; .visual-base-table-container >>> th.gutter {
} display: none;
i { }
color: #aaa; .visual-base-table-container >>> table {
@extend .pointer; background: transparent;
}
} }
.visual-base-table-container >>> .el-table,
.visual-base-table-container >>> th,
.visual-base-table-container >>> tr {
background: unset;
}
/* 设置设计稿样式 */
.visual-base-table-container >>> .el-table::before,
.visual-base-table-container >>> .el-table--group::after,
.visual-base-table-container >>> .el-table--border::after,
.visual-base-table-container >>> .el-table--border::after {
background: unset;
}
.visual-base-table-container >>> table * {
border-color: #0d1728;
border-width: calc(1px * var(--beilv));
}
.visual-base-table-container >>> td {
padding: calc(5px * var(--beilv));
}
.visual-base-table-container >>> td span {
color: #ffffffb3;
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
}
.visual-base-table-container >>> thead th {
padding: 0;
}
.visual-base-table-container >>> thead th .cell {
color: #fff;
font-size: calc(14px * var(--beilv));
line-height: calc(14px * var(--beilv));
padding: calc(6px * var(--beilv));
white-space: nowrap;
}
.visual-base-table-container >>> .el-table__body tr:hover > td {
background-color: #42537130;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e;
/* background-color: #0e203e90; */
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #203760;
/* background-color: #20376090; */
}
</style> </style>

28
src/views/material-manage/cockpit/components/bomList.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<div :style="{ padding: 8 * beilv + 'px ' + 24 * beilv + 'px '+ 24 * beilv + 'px' }" class="box"> <div :style="{ padding: 8 * beilv + 'px ' + 24 * beilv + 'px 0'}" class="box">
<div v-for="(item, i) in bomMsg" :key="i" class="bom-box" :style="{ marginBottom: 11 * beilv + 'px'}"> <div v-for="(item, i) in bomMsg" :key="i" class="bom-box" :style="{ marginBottom: 11 * beilv + 'px'}">
<img src="./../../../../assets/img/cockpit/bom.png" alt="" :width="355 * beilv + 'px'" :height="280 * beilv + 'px'"> <img src="./../../../../assets/img/cockpit/bom.png" alt="" width="100%" height="97%"/>
<p class="bom-name" :style="{ bottom: 10 * beilv + 'px', fontSize: 16 * beilv + 'px'}"> <p class="bom-name" :style="{ fontSize: 16 * beilv + 'px'}">
<span class="leftTriangle" />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<span class="rightTriangle" />
</p> </p>
</div> </div>
</div> </div>
@ -28,29 +26,19 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
display: flex; display: flex;
flex: 1;
height: 100%;
width: 100%;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
.bom-box { .bom-box {
position: relative; position: relative;
width: 48%;
.bom-name { .bom-name {
position: absolute; position: absolute;
width: 100%; width: 100%;
text-align: center; text-align: center;
.leftTriangle, bottom: 6%;
.rightTriangle {
display: inline-block;
width: 0px;
height: 0px;
border: 5px solid transparent;
}
.leftTriangle {
border-right-color: #fff;
margin-right: 10px;
}
.rightTriangle {
border-left-color: #fff;
margin-left: 10px;
}
} }
} }
} }

111
src/views/material-manage/cockpit/index.vue
View File

@ -29,32 +29,15 @@
<bom-list :beilv="beilv" :bom-msg="bomMsg" /> <bom-list :beilv="beilv" :bom-msg="bomMsg" />
</base-container> </base-container>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14" :style="{ margin: 16 * beilv + 'px' + ' 0' }">
<!-- 右上 --> <!-- 右上 -->
<el-row> <div class="right-box">
<el-col :style="{ marginTop: 16 * beilv + 'px' }"> <div class="right-top">
<base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
<div class="box-padding specil-table1">
<base-table
:page="1"
:limit="14"
:show-index="false"
:beilv="beilv"
:table-config="originalFilm"
:table-data="originalFilmList"
/>
</div>
</base-container>
</el-col>
</el-row>
<!-- 右下 -->
<el-row>
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
<base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'"> <base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
<div class="box-padding specil-table1"> <div class="box-padding specil-table1">
<base-table <base-table
:page="1" :page="1"
:limit="14" :limit="15"
:show-index="false" :show-index="false"
:beilv="beilv" :beilv="beilv"
:table-config="material" :table-config="material"
@ -62,8 +45,22 @@
/> />
</div> </div>
</base-container> </base-container>
</el-col> </div>
</el-row> <div class="right-bottom">
<base-container :beilv="beilv" :height="470" :title="'深加工再制品'" :title-icon="'cockpit_2_2'">
<div class="box-padding specil-table1">
<base-table
:page="1"
:limit="15"
:show-index="false"
:beilv="beilv"
:table-config="originalFilm"
:table-data="originalFilmList"
/>
</div>
</base-container>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -114,7 +111,7 @@ const material = [
}, },
{ {
prop: 'spec', prop: 'spec',
label: '辅料规格', label: '辅料名称',
minWidth: 32.4 minWidth: 32.4
}, },
{ {
@ -178,37 +175,44 @@ export default {
getMsg() { getMsg() {
const arr = [] const arr = []
const temp = [] const temp = []
const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
const obj = {} const obj = {}
const sj = parseInt(Math.random() * 200) const sj = parseInt(Math.random() * 15)
obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss') obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
obj.productLine = '产线A' obj.productLine = sj % 2 ? 'A' : 'B'
obj.spec = '光伏玻璃2.0' obj.spec = productList[parseInt(Math.random() * (productList.length))]
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD')
obj.num = parseInt(Math.random() * 800 + 100) obj.num = parseInt(Math.random() * 800 + 100) + ' (片)'
arr.push(obj) arr.push(obj)
} }
this.originalFilmList = arr this.originalFilmList = arr
const eqList = ['清洗机', 'A1一次冷却机', 'A1下片机', 'A1一次固化机', 'A1一次镀膜机', 'A1二次固化机', 'A1二次镀膜机', 'A1磨边机', 'A1磨边清洗机', 'A1预热机', 'A2一次冷却机', 'A2一次固化机', 'A2一次镀膜机', 'A2下片机', 'A2二次固化机', 'A2磨边机', 'A2磨边清洗机', 'A储片机206'] const eqList = [
const spcList = ['200*231*0.5', '100*120*0.2', '70*80', '100*100'] {name: '磨边机', fc: ''},
{name: '丝印机', fc: ['油墨', '刮胶']},
{name: '镀膜机', fc: ['镀膜液', '异丙醇']},
{name: '包装机', fc: ['隔离纸', '包装辅材']}
]
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
const obj = {} const obj = {}
const sj = parseInt(Math.random() * 200) const sj = parseInt(Math.random() * 15)
obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss') const sj2 = parseInt(Math.random() * eqList.length)
obj.eqName = eqList[parseInt(Math.random() * eqList.length)] const sj3 = sj % 2 ? 1 : 0
obj.spec = spcList[parseInt(Math.random() * spcList.length)] obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) obj.eqName = eqList[sj2].name
obj.spec = eqList[sj2].fc ? (eqList[sj2].fc[sj3]) : ''
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD')
obj.num = parseInt(Math.random() * 800 + 100) obj.num = parseInt(Math.random() * 800 + 100)
temp.push(obj) temp.push(obj)
} }
this.materialList = temp this.materialList = temp
this.bomMsg = [ this.bomMsg = [
{ name: '隔离纸' }, { name: '2.0-1128*1716' },
{ name: '异丙醇' }, { name: '2.0-1128*2251' },
{ name: '镀膜液' }, { name: '2.0-1128*2272' },
{ name: '磨轮' }, { name: '3.2-1128*1716' },
{ name: '包装辅材' }, { name: '3.2-1128*1718' },
{ name: '网板' } { name: '3.2-1032*1747' }
] ]
}, },
change() { change() {
@ -256,12 +260,31 @@ export default {
} }
} }
.box-padding { .box-padding {
padding: 0 16px; padding: 0 16px 16px;
height: 100%;
} }
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.material-cockpit { .material-cockpit {
.container-main {
height: calc(100vh - 100px * var(--beilv));
display: flex;
flex: 1;
}
.right-box {
height: 100%;
display: flex;
// flex: 1;
flex-direction: column-reverse;
justify-content: space-between;
}
.right-top {
height: 49.4%;
}
.right-bottom {
height: 49.4%;
}
.specil-table1 { .specil-table1 {
.el-table .cell { .el-table .cell {
padding-left: 40px; padding-left: 40px;

100
src/views/orderManage/orderManagerCockpit/cockpit.vue
View File

@ -24,7 +24,7 @@
</el-row> </el-row>
<el-row class="container-main"> <el-row class="container-main">
<!-- 上 --> <!-- 上 -->
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv"> <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv" class="top-container">
<el-col :span="10"> <el-col :span="10">
<base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'"> <base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'">
<work-order :beilv="beilv" :order-msg="orderList" /> <work-order :beilv="beilv" :order-msg="orderList" />
@ -46,13 +46,13 @@
</el-col> </el-col>
</el-row> </el-row>
<!-- 下 --> <!-- 下 -->
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }"> <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" class="bottom-container">
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24"> <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'"> <base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
<div class="box-padding specil-table2"> <div class="box-padding specil-table2">
<base-table <base-table
:page="1" :page="1"
:limit="16" :limit="17"
:show-index="false" :show-index="false"
:beilv="beilv" :beilv="beilv"
:table-config="orderMonitiring" :table-config="orderMonitiring"
@ -76,17 +76,17 @@ const orderPool = [
{ {
prop: 'customerName', prop: 'customerName',
label: '客户名称', label: '客户名称',
minWidth: 35.2 minWidth: 38
}, },
{ {
prop: 'orderCode', prop: 'orderCode',
label: '订单编号', label: '订单编号',
minWidth: 32 minWidth: 36
}, },
{ {
prop: 'productName', prop: 'productName',
label: '产品名称', label: '产品名称',
minWidth: 32 minWidth: 30
}, },
{ {
prop: 'planNum', prop: 'planNum',
@ -96,31 +96,31 @@ const orderPool = [
{ {
prop: 'planDelivery', prop: 'planDelivery',
label: '计划交货期', label: '计划交货期',
minWidth: 28.8 minWidth: 25
}, },
{ {
prop: 'status', prop: 'status',
label: '订单状态', label: '订单状态',
subcomponent: orderStatus, subcomponent: orderStatus,
minWidth: 19 minWidth: 21
} }
] ]
const orderMonitiring = [ const orderMonitiring = [
{ {
prop: 'customerName', prop: 'customerName',
label: '客户名称', label: '客户名称',
minWidth: 35.2 minWidth: 40
}, },
{ {
prop: 'orderCode', prop: 'orderCode',
label: '订单编号', label: '订单编号',
minWidth: 33.2 minWidth: 38
}, },
{ {
prop: 'status', prop: 'status',
label: '订单状态', label: '订单状态',
subcomponent: orderStatus, subcomponent: orderStatus,
minWidth: 27 minWidth: 28
}, },
{ {
prop: 'completion', prop: 'completion',
@ -206,40 +206,55 @@ export default {
}, },
methods: { methods: {
getMsg() { getMsg() {
this.orderList = [ const compList = ['隆基绿能科技股份有限公司', '天合光能股份有限公司', '晶澳太阳能科技股份有限公司', '晶科能源股份有限公司', '阿特斯阳光电力集团', '东方日升新能源股份有限公司', '尚德集团', '浙江正泰新能源开发有限公司', '环晟光伏(江苏)有限公司', '江苏赛拉弗光伏系统有限公司', '唐山海泰新能科技股份有限公司', '阳光能源控股有限公司', '横店集团东磁股份有限公司', '常州亿晶光电科技有限公司', '协鑫集成科技股份有限公司', '苏州中来光伏新材股份有限公司', '中节能太阳能科技(镇江)有限公司', '苏州腾晖光伏技术有限公司', '英利绿色能源控股有限公司', '湖南红太阳新能源科技有限公司']
{ code: 'ZGD20221024000110', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221024000110', percentage: '100%' }, const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
{ code: 'ZGD20221028000157', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221028000157', percentage: '85%' }, const daping = [{name: '3.2-1032*1747', percentage: '72%'},{name: '2.0-1128*1716', percentage: '67%'},{name: '3.2-1128*1716', percentage: '46%'},{name: '2.0-1128*2251', percentage: '89%'}]
{ code: 'ZGD20221030000142', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000142', percentage: '72%' }, const arr1 = []
{ code: 'ZGD20221030000098', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000098', percentage: '46%' } const arr2 = []
]
const compList = ['SHABO沙玻', 'KIBING旗滨', '金晶玻璃', '济南金昊', '东莞佳美特', '汇中矿产', '文盛新材料', '西点化学', '开源塑胶', '奥驰商贸', '竹中科技', '程龙玻璃']
const arr = []
const temp = [] const temp = []
for (let i = 0; i < 20; i++) { for(let i = 0; i < 4; i++) {
const obj = {}
const sj = parseInt(Math.random() * 200) const sj = parseInt(Math.random() * 200)
obj.customerName = compList[parseInt(Math.random() * (compList.length))] const obj = {}
obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) obj.code = 'WOD' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
obj.productName = '光伏玻璃2.0' obj.state = '激活'
obj.planNum = parseInt(Math.random() * 800 + 100) obj.name = daping[i].name
obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD') obj.line = sj % 2 ? 'A' : 'B'
obj.status = parseInt(Math.random() * 3 + 1) obj.workCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
arr.push(obj) obj.percentage = daping[i].percentage
arr1.push(obj)
} }
this.orderPoolList = arr this.orderList = arr1
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
const obj = {} const obj = {}
const sj = parseInt(Math.random() * 200) const sj = parseInt(Math.random() * 200)
obj.customerName = compList[parseInt(Math.random() * (compList.length))] obj.customerName = compList[parseInt(Math.random() * (compList.length))]
obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
obj.productName = productList[parseInt(Math.random() * (productList.length))]
obj.planNum = parseInt(Math.random() * 800 + 100) + '(m²)'
obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
// obj.status = parseInt(Math.random() * 3 + 1)
obj.status = 4
arr2.push(obj)
}
this.orderPoolList = arr2
for (let i = 0; i < 20; i++) {
const obj = {}
const sj = parseInt(Math.random() * 200)
obj.customerName = compList[parseInt(Math.random() * (compList.length))]
obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
obj.status = parseInt(Math.random() * 3 + 1) obj.status = parseInt(Math.random() * 3 + 1)
obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%') obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
obj.yield = parseInt(Math.random() * 50 + 50) + '%' obj.yield = parseInt(Math.random() * 50 + 50) + '%'
obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2) // obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2) // obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2) // obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2) // obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2) // obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
obj.shiftCosts = '0'
obj.energyCosts = '0'
obj.equipmentCost = '0'
obj.materialCost = '0'
obj.totalCost = '0'
temp.push(obj) temp.push(obj)
} }
this.orderMonitiringList = temp this.orderMonitiringList = temp
@ -290,9 +305,20 @@ export default {
} }
.container-main { .container-main {
padding: 16px 8px; padding: 16px 8px;
.top-container {
height: calc((100vh - 100px * var(--beilv)) * 0.42);
display: flex;
flex: 1;
}
.bottom-container {
height: calc((100vh - 100px * var(--beilv)) * 0.56);
display: flex;
flex: 1;
}
} }
.box-padding { .box-padding {
padding: 0 16px; padding: 0 16px;
height: 100%;
} }
} }
</style> </style>
@ -310,11 +336,11 @@ export default {
} }
.specil-table2 { .specil-table2 {
.el-table .cell { .el-table .cell {
padding-left: 50px; padding-left: 25px;
} }
.el-table--border th:first-child .cell, .el-table--border th:first-child .cell,
.el-table--border td:first-child .cell { .el-table--border td:first-child .cell {
padding-left: 50px; padding-left: 25px;
} }
} }
} }

12
src/views/orderManage/orderManagerCockpit/components/baseContainer/index.vue
View File

@ -7,7 +7,7 @@
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
--> -->
<template> <template>
<div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}"> <div class="base-container" :style="{fontSize: 12 * beilv + 'px'}">
<div class="line" /> <div class="line" />
<div class="line line-vertical" /> <div class="line line-vertical" />
<div class="line line-right" /> <div class="line line-right" />
@ -75,6 +75,7 @@ export default {
.base-container { .base-container {
color: #fff; color: #fff;
width: 100%; width: 100%;
height: 100%;
background-color: rgba($color: #061027, $alpha: 0.15); background-color: rgba($color: #061027, $alpha: 0.15);
position: relative; position: relative;
border: 2px solid; border: 2px solid;
@ -138,8 +139,11 @@ export default {
font-size: 1.5em; font-size: 1.5em;
padding: .67em; padding: .67em;
} }
// .bar-content{ .bar-item {
// padding: 1em; height: 100%;
// } }
.bar-content{
height: calc(100% - 6em);
}
} }
</style> </style>

180
src/views/orderManage/orderManagerCockpit/components/baseTable.vue
View File

@ -7,26 +7,29 @@
--> -->
<template> <template>
<div class="visual-base-table-container"> <div class="visual-base-table-container">
<el-table <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
v-loading="isLoading"
:header-cell-style="{background:'rgba(32, 55, 96, 0.8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
<el-table-column <el-table-column
v-for="item in renderTableHeadList" v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
:width="70 * beilv"
align="center"
/>
<el-table-column
v-for="(item, index) in renderTableHeadList"
:key="item.prop" :key="item.prop"
:show-overflow-tooltip="showOverflow" :show-overflow-tooltip="showOverflow"
v-bind="item" v-bind="item"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<component
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" /> :is="item.subcomponent"
v-if="item.subcomponent"
:key="index"
:inject-data="{ ...scope.row, ...item }"
@emitData="emitData"
/>
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<slot name="content" /> <slot name="content" />
@ -36,7 +39,7 @@
<script> <script>
import { isObject, isString } from 'lodash' import { isObject, isString } from 'lodash'
export default { export default {
name: 'BaseTable', name: 'TechyTable',
filters: { filters: {
commonFilter: (source, filterType = a => a) => { commonFilter: (source, filterType = a => a) => {
return filterType(source) return filterType(source)
@ -107,70 +110,103 @@ export default {
methods: { methods: {
emitData(val) { emitData(val) {
this.$emit('emitFun', val) this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(14, 32, 62, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
} else {
return {
background: 'rgba(32, 55, 96, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
}
} }
} }
} }
</script> </script>
<style lang="scss">
@import "~@/styles/index.scss"; <style scoped>
.visual-base-table-container >>> ::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
.visual-base-table-container >>> ::-webkit-scrollbar-track {
background-color: #14243f;
border-radius: 0;
}
.visual-base-table-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #5bc4bf9f;
position: relative;
}
.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
/* .visual-base-table-container {
min-width: 30vw;
} */
.visual-base-table-container { .visual-base-table-container {
.el-table { height: 100%;
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
} }
.setting { /* .visual-base-table-container >>> .el-table {
text-align: right; min-width: 120%;
padding: 15px; } */
.setting-box { /* 清除默认样式 */
width: 100px; .visual-base-table-container >>> th.gutter {
} display: none;
i { }
color: #aaa; .visual-base-table-container >>> table {
@extend .pointer; background: transparent;
}
} }
.visual-base-table-container >>> .el-table,
.visual-base-table-container >>> th,
.visual-base-table-container >>> tr {
background: unset;
}
/* 设置设计稿样式 */
.visual-base-table-container >>> .el-table::before,
.visual-base-table-container >>> .el-table--group::after,
.visual-base-table-container >>> .el-table--border::after,
.visual-base-table-container >>> .el-table--border::after {
background: unset;
}
.visual-base-table-container >>> table * {
border-color: #0d1728;
border-width: calc(1px * var(--beilv));
}
.visual-base-table-container >>> td {
padding: calc(5px * var(--beilv));
}
.visual-base-table-container >>> td span {
color: #ffffffb3;
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
}
.visual-base-table-container >>> thead th {
padding: 0;
}
.visual-base-table-container >>> thead th .cell {
color: #fff;
font-size: calc(14px * var(--beilv));
line-height: calc(14px * var(--beilv));
padding: calc(6px * var(--beilv));
white-space: nowrap;
}
.visual-base-table-container >>> .el-table__body tr:hover > td {
background-color: #42537130;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e;
/* background-color: #0e203e90; */
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #203760;
/* background-color: #20376090; */
}
</style> </style>

19
src/views/orderManage/orderManagerCockpit/components/orderStatus.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div :style="{ height: 15 * beilv + 'px' }"> <div class="state-box">
<span v-if="this.injectData.status === 3">
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
已完成
</span>
<span v-if="this.injectData.status === 1"> <span v-if="this.injectData.status === 1">
<svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" /> <svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" />
在途 在途
@ -12,6 +8,14 @@
<svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" /> <svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" />
已下发 已下发
</span> </span>
<span v-if="this.injectData.status === 3">
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
已完成
</span>
<span v-if="this.injectData.status === 4">
<svg-icon icon-class="orange_dot" style="font-size: 14px; position: relative; top: .08em" />
待下发
</span>
</div> </div>
</template> </template>
<script> <script>
@ -40,3 +44,8 @@ export default {
} }
} }
</script> </script>
<style scoped>
.state-box {
height: 15px;
}
</style>

4
src/views/orderManage/orderManagerCockpit/components/workOrder.vue
View File

@ -5,7 +5,7 @@
v-for="(item,index) in orderMsg" v-for="(item,index) in orderMsg"
:key="index" :key="index"
:style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv :style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv
+ 'px', height: 168 * beilv + 'px'}" + 'px'}"
class="box" class="box"
> >
<p class="line1"> <p class="line1">
@ -57,6 +57,8 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.order-box { .order-box {
display: flex; display: flex;
flex: 1;
height: 100%;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
.box { .box {