Compare commits
11 Commits
6b031d6e06
...
f09c048cf0
| Author | SHA1 | Date | |
|---|---|---|---|
| f09c048cf0 | |||
| b072de6cb3 | |||
| ef59b5a358 | |||
| df6cdf8f13 | |||
| d89eb46f58 | |||
| 3a882ba735 | |||
| 480a545544 | |||
| 722f87df4d | |||
| a0b70cbd59 | |||
| d39bb981ec | |||
| f01052d96f |
27
src/icons/svg/orange_dot.svg
Normal file
27
src/icons/svg/orange_dot.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -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 {
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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'
|
||||||
|
|||||||
@ -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>
|
||||||
|
<div
|
||||||
|
class="absolute top-0 left-0"
|
||||||
|
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
||||||
|
>
|
||||||
<new-bar
|
<new-bar
|
||||||
:xlabel-font-size="10"
|
chart-name="realtime-cost-production"
|
||||||
:xlabel-rotate="30"
|
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
||||||
:name-list="[
|
|
||||||
'擦划伤1',
|
|
||||||
'擦划伤2',
|
|
||||||
'擦划伤3',
|
|
||||||
'擦划伤4',
|
|
||||||
'擦划伤5',
|
|
||||||
'擦划伤6',
|
|
||||||
'擦划伤7',
|
|
||||||
'擦划伤8',
|
|
||||||
'擦划伤9',
|
|
||||||
'擦划伤0',
|
|
||||||
'擦划伤11',
|
|
||||||
'擦划伤12'
|
|
||||||
]"
|
|
||||||
chart-name="fault-category"
|
|
||||||
:data-list="[
|
|
||||||
{
|
|
||||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
|
||||||
bottomColor: '#31A2FF',
|
|
||||||
name: '库存',
|
|
||||||
data: [32, 65, 65, 54, 40, 60, 64, 91, 55, 65, 37, 77]
|
|
||||||
}
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
</techy-box>
|
|
||||||
</div>
|
|
||||||
<div class="grow">
|
|
||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
|
||||||
<techy-analysis-header>工序缺陷分析</techy-analysis-header>
|
|
||||||
<new-bar
|
|
||||||
chart-name="process-fault"
|
|
||||||
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
|
|
||||||
:data-list="[
|
:data-list="[
|
||||||
{
|
{
|
||||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||||
bottomColor: '#49FBD6',
|
bottomColor: '#49FBD6',
|
||||||
name: '库存',
|
name: '产线A',
|
||||||
data: [64, 91, 55, 65, 37, 77]
|
data: [163, 184, 110, 22, 96, 74]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||||
|
bottomColor: '#31A2FF',
|
||||||
|
name: '产线B',
|
||||||
|
data: [162, 172, 122, 15, 82, 74]
|
||||||
}
|
}
|
||||||
]"
|
]"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
</techy-box>
|
||||||
|
</div>
|
||||||
|
<div class="grow">
|
||||||
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
|
<techy-analysis-header>产线缺陷月对比</techy-analysis-header>
|
||||||
|
<div
|
||||||
|
class="absolute top-0 left-0"
|
||||||
|
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
||||||
|
>
|
||||||
|
<new-bar
|
||||||
|
chart-name="realtime-cost-production"
|
||||||
|
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
||||||
|
unit-name="单位: 千片"
|
||||||
|
: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]
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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,16 +269,25 @@ 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: [
|
||||||
|
{
|
||||||
|
name: this.unitName, // '单位: 片',
|
||||||
|
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 3,
|
||||||
|
axisTick: { show: false },
|
||||||
|
onZero: true,
|
||||||
|
position: 'left',
|
||||||
|
offset: 10,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: 'solid',
|
type: 'solid',
|
||||||
@ -243,9 +296,6 @@ export default {
|
|||||||
width: '1' // 坐标线的宽度
|
width: '1' // 坐标线的宽度
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||||
@ -258,7 +308,38 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
type: 'value'
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,7 +31,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: '15%',
|
top: '18%',
|
||||||
left: '2%',
|
left: '2%',
|
||||||
right: '2%',
|
right: '2%',
|
||||||
bottom: '2%',
|
bottom: '2%',
|
||||||
|
|||||||
@ -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 }]
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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;
|
}
|
||||||
}
|
/* .visual-base-table-container >>> .el-table {
|
||||||
.el-table::before,.el-table--border::after {
|
min-width: 120%;
|
||||||
background-color: transparent;
|
} */
|
||||||
}
|
/* 清除默认样式 */
|
||||||
.el-table th,td{
|
.visual-base-table-container >>> th.gutter {
|
||||||
border-color: #0D1728 !important;
|
display: none;
|
||||||
padding: 0;
|
}
|
||||||
}
|
.visual-base-table-container >>> table {
|
||||||
.el-table tr {
|
|
||||||
background: transparent;
|
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 {
|
|
||||||
text-align: right;
|
|
||||||
padding: 15px;
|
|
||||||
.setting-box {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
color: #aaa;
|
|
||||||
@extend .pointer;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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;
|
}
|
||||||
}
|
/* .visual-base-table-container >>> .el-table {
|
||||||
.el-table::before,.el-table--border::after {
|
min-width: 120%;
|
||||||
background-color: transparent;
|
} */
|
||||||
}
|
/* 清除默认样式 */
|
||||||
.el-table th,td{
|
.visual-base-table-container >>> th.gutter {
|
||||||
border-color: #0D1728 !important;
|
display: none;
|
||||||
padding: 0;
|
}
|
||||||
}
|
.visual-base-table-container >>> table {
|
||||||
.el-table tr {
|
|
||||||
background: transparent;
|
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 {
|
|
||||||
text-align: right;
|
|
||||||
padding: 15px;
|
|
||||||
.setting-box {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
i {
|
|
||||||
color: #aaa;
|
|
||||||
@extend .pointer;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user