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 |
@ -54,7 +54,7 @@
|
||||
lineHeight: '18px',
|
||||
fontSize: '0.85vw'
|
||||
}"
|
||||
>
|
||||
>
|
||||
各产线稼动率
|
||||
</h2> -->
|
||||
<span class="pl-jdl__title">各产线稼动率</span>
|
||||
@ -358,7 +358,7 @@ export default {
|
||||
.grid-2-3 {
|
||||
grid-template-columns: repeat(3, 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 {
|
||||
|
||||
@ -145,7 +145,7 @@ export default {
|
||||
width: 24px; */
|
||||
font-size: calc(12px * var(--beilv));
|
||||
line-height: calc(14px * var(--beilv));
|
||||
width: 15%;
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
.param-list::before {
|
||||
|
||||
@ -71,22 +71,29 @@ const LifeRemainComponent = {
|
||||
injectData: Object
|
||||
},
|
||||
computed: {
|
||||
remainLeftPercentage() {
|
||||
return this.injectData.remain / 300
|
||||
},
|
||||
statusColor() {
|
||||
const colors = [
|
||||
'rgba(255,84,76,0.6)', // red < 10%
|
||||
'#FFBD43', // yellow < 20%
|
||||
'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) {
|
||||
return h('span', {
|
||||
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 = [
|
||||
{ prop: 'name', label: '部件名称', align: 'center' },
|
||||
{ prop: 'eq', label: '所属设备', align: 'center' },
|
||||
{ prop: 'pl', label: '所属产线', align: 'center' },
|
||||
{ prop: 'update_time', label: '更换时间', align: 'center' },
|
||||
{ prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
|
||||
{ prop: 'stock', label: '备件库存量', align: 'center' },
|
||||
{ prop: 'location', label: '库位', align: 'center' }
|
||||
{ prop: 'name', label: '部件名称', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'eq', label: '所属设备', align: 'center', 'min-width': 60 },
|
||||
{ prop: 'pl', label: '所属产线', align: 'center', 'min-width': 60 },
|
||||
{ prop: 'update_time', label: '更换时间', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent, 'min-width': 100 },
|
||||
{ prop: 'stock', label: '备件库存量', align: 'center', 'min-width': 50 },
|
||||
{ prop: 'location', label: '库位', align: 'center', 'min-width': 100 },
|
||||
]
|
||||
|
||||
|
||||
// TODO: 2022.11.17 修改数据和剩余寿命组件
|
||||
export const sparepartsDatalist = [
|
||||
{ 'name': '激光打孔', 'eq': 'A2一次固化机', 'pl': 'C线', 'update_time': '2007-08-31 09:15:24', 'remain': -32, 'stock': 457, 'location': '库位74' },
|
||||
{ 'name': '磨边单元', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '2016-10-02 22:23:09', 'remain': -95, 'stock': 5600, 'location': '库位10' },
|
||||
{ 'name': '激光打孔', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '1996-09-17 08:57:52', 'remain': 46, 'stock': 6069, 'location': '库位87' },
|
||||
{ 'name': '磨边单元', 'eq': 'A2一次固化机', 'pl': 'D线', 'update_time': '2018-07-18 13:15:01', 'remain': 86, 'stock': 2342, 'location': '库位83' },
|
||||
{ 'name': '上片机器人', 'eq': 'A2一次固化机', 'pl': 'E线', 'update_time': '1998-06-11 09:01:10', 'remain': 84, 'stock': 4359, 'location': '库位12' },
|
||||
{ 'name': '丝印', 'eq': 'A1一次固化机', 'pl': 'E线', 'update_time': '2016-02-13 16:20:01', 'remain': -23, 'stock': 888, 'location': '库位69' },
|
||||
{ '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': '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' }
|
||||
{ "pl": "B", "name": "油墨、刮胶", "eq": "丝印机", "update_time": "2022-09-12 13:05:54", "remain": 104, "stock": 2, "location": "备件库-A-3" },
|
||||
{ "pl": "A", "name": "镀膜液、异丙醇", "eq": "镀膜机", "update_time": "2022-09-24 08:34:36", "remain": 152, "stock": 10, "location": "备件库-D-1" },
|
||||
{ "pl": "B", "name": "磨轮", "eq": "磨边机", "update_time": "2022-10-09 09:15:08", "remain": 169, "stock": 9, "location": "备件库-A-3" },
|
||||
{ "pl": "B", "name": "镀膜辊", "eq": "镀膜机", "update_time": "2022-10-02 12:26:07", "remain": 33, "stock": 12, "location": "备件库-C-3" },
|
||||
{ "pl": "A", "name": "磨轮", "eq": "磨边机", "update_time": "2022-11-14 04:43:21", "remain": 20, "stock": 11, "location": "备件库-E-9" },
|
||||
{ "pl": "A", "name": "镀膜辊", "eq": "镀膜机", "update_time": "2022-10-25 15:19:57", "remain": 192, "stock": 8, "location": "备件库-D-9" },
|
||||
{ "pl": "A", "name": "油墨、刮胶", "eq": "丝印机", "update_time": "2022-10-31 03:21:29", "remain": 96, "stock": 19, "location": "备件库-E-10" },
|
||||
{ "pl": "B", "name": "网板", "eq": "丝印机", "update_time": "2022-09-01 15:49:08", "remain": 127, "stock": 8, "location": "备件库-E-10" },
|
||||
{ "pl": "A", "name": "网板", "eq": "丝印机", "update_time": "2022-09-25 04:47:04", "remain": 83, "stock": 8, "location": "备件库-C-6" },
|
||||
]
|
||||
|
||||
import { default as blue } from './blue.png'
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<section class="techy-body">
|
||||
<div class="part-1">
|
||||
<div>
|
||||
<techy-container :title="'质量异常上报'" icon="质量1">
|
||||
<techy-container :title="'离线异常上报'" icon="质量1">
|
||||
<div class="table-wrapper fix-table-exception-report">
|
||||
<techy-table
|
||||
:page="1"
|
||||
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
|
||||
<div class=" fix-table-exception-alert">
|
||||
<techy-container :title="'质量异常报警'" icon="质量2">
|
||||
<techy-container :title="'在线异常上报'" icon="质量2">
|
||||
<div class="table-wrapper">
|
||||
<techy-table
|
||||
:page="1"
|
||||
@ -41,51 +41,59 @@
|
||||
<div class="grow-8 flex gap-16">
|
||||
<div class="grow">
|
||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||
<techy-analysis-header>缺陷分类分析</techy-analysis-header>
|
||||
<new-bar
|
||||
:xlabel-font-size="10"
|
||||
:xlabel-rotate="30"
|
||||
: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-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="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
||||
:data-list="[
|
||||
{
|
||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||
bottomColor: '#49FBD6',
|
||||
name: '产线A',
|
||||
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>
|
||||
<new-bar
|
||||
chart-name="process-fault"
|
||||
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
|
||||
:data-list="[
|
||||
{
|
||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||
bottomColor: '#49FBD6',
|
||||
name: '库存',
|
||||
data: [64, 91, 55, 65, 37, 77]
|
||||
}
|
||||
]"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -178,19 +186,7 @@
|
||||
<!-- 第二行 -->
|
||||
<div class="quality-analysis__body__row-2">
|
||||
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
|
||||
<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>
|
||||
<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"
|
||||
@ -202,10 +198,22 @@
|
||||
</div>
|
||||
</techy-box>
|
||||
<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">
|
||||
<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"
|
||||
:name="item.name"
|
||||
:amount="item.amount"
|
||||
@ -214,14 +222,14 @@
|
||||
</div>
|
||||
</techy-box>
|
||||
<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">
|
||||
<techy-analysis-bar
|
||||
v-for="(item, index) in qualityAnalysisDatalist"
|
||||
v-for="(item, index) in qualityAnalysisDatalistMonthB"
|
||||
:key="index"
|
||||
:name="item.name"
|
||||
:amount="item.amount"
|
||||
color="pink"
|
||||
color="orange"
|
||||
/>
|
||||
</div>
|
||||
</techy-box>
|
||||
@ -266,36 +274,36 @@ export default {
|
||||
data() {
|
||||
const quexianDatalist = [
|
||||
[
|
||||
{ value: 107, name: '破片' },
|
||||
{ value: 146, name: '崩边' },
|
||||
{ value: 43, name: '脏污' },
|
||||
{ value: 83, name: '划擦伤' },
|
||||
{ value: 20, name: '崩孔' },
|
||||
{ value: 21, name: '其他' }
|
||||
{ value: 4.34, name: '破片' },
|
||||
{ value: 3.4, name: '崩边' },
|
||||
{ value: 4.1, name: '脏污' },
|
||||
{ value: 2.4, name: '划擦伤' },
|
||||
{ value: 0.23, name: '崩孔' },
|
||||
{ value: 2.14, name: '其他' }
|
||||
],
|
||||
[
|
||||
{ value: 117, name: '破片' },
|
||||
{ value: 106, name: '崩边' },
|
||||
{ value: 40, name: '脏污' },
|
||||
{ value: 82, name: '划擦伤' },
|
||||
{ value: 22, name: '崩孔' },
|
||||
{ value: 19, name: '其他' }
|
||||
{ value: 4.17, name: '破片' },
|
||||
{ value: 3.6, name: '崩边' },
|
||||
{ value: 4, name: '脏污' },
|
||||
{ value: 2.2, name: '划擦伤' },
|
||||
{ value: 0.2, name: '崩孔' },
|
||||
{ value: 1.9, name: '其他' }
|
||||
],
|
||||
[
|
||||
{ value: 97, name: '破片' },
|
||||
{ value: 96, name: '崩边' },
|
||||
{ value: 33, name: '脏污' },
|
||||
{ value: 43, name: '划擦伤' },
|
||||
{ value: 10, name: '崩孔' },
|
||||
{ value: 18, name: '其他' }
|
||||
{ value: 3.33, name: '破片' },
|
||||
{ value: 3, name: '崩边' },
|
||||
{ value: 4.3, name: '脏污' },
|
||||
{ value: 2.1, name: '划擦伤' },
|
||||
{ value: 1, name: '崩孔' },
|
||||
{ value: 1.8, name: '其他' }
|
||||
],
|
||||
[
|
||||
{ value: 127, name: '破片' },
|
||||
{ value: 156, name: '崩边' },
|
||||
{ value: 53, name: '脏污' },
|
||||
{ value: 93, name: '划擦伤' },
|
||||
{ value: 25, name: '崩孔' },
|
||||
{ value: 22, name: '其他' }
|
||||
{ value: 2.7, name: '破片' },
|
||||
{ value: 1.56, name: '崩边' },
|
||||
{ value: 2.3, name: '脏污' },
|
||||
{ value: 1.2, name: '划擦伤' },
|
||||
{ value: 0.23, name: '崩孔' },
|
||||
{ value: 2, name: '其他' }
|
||||
]
|
||||
]
|
||||
|
||||
@ -309,16 +317,52 @@ export default {
|
||||
qualityExceptionDatalist,
|
||||
qualityExceptionTableProps,
|
||||
qualityAnalysisDatalist: [
|
||||
{ name: '热端', amount: 20233 },
|
||||
{ name: '丝印', amount: 20233328 },
|
||||
{ name: '原片', amount: 20 },
|
||||
{ name: '钢化', amount: 2000 },
|
||||
{ name: '上片磨边', amount: 20 },
|
||||
{ name: '下片铺纸', amount: 202423 },
|
||||
{ name: '镀膜', amount: 20 },
|
||||
{ name: '包装', amount: 20 },
|
||||
{ name: '清晰', amount: 20 },
|
||||
{ name: '物流仓储', amount: 233920 }
|
||||
{ name: '上片', amount: 22 },
|
||||
{ name: '钢化', amount: 2 },
|
||||
{ name: '磨边', amount: 221 },
|
||||
{ name: '下片', amount: 27 },
|
||||
{ name: '丝印', amount: 93 },
|
||||
{ name: '包装', amount: 3 },
|
||||
{ name: '打孔', amount: 31 },
|
||||
{ name: '清洗', amount: 2 },
|
||||
{ name: '镀膜', amount: 95 },
|
||||
{ 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,
|
||||
chosenDatalist: quexianDatalist[0]
|
||||
|
||||
@ -42,15 +42,15 @@ export default {
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#DDB11200', offset: 0.1 },
|
||||
{ color: '#DDB112', offset: 1 } // 黄
|
||||
{ color: '#DDB112', offset: 0 }, // 黄
|
||||
{ color: '#DDB112b0', offset: 0.2 },
|
||||
{ color: '#FFFFFF00', offset: 1 }
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
@ -117,7 +117,7 @@ export default {
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
itemGap: 5,
|
||||
subtext: '总数',
|
||||
subtext: '总数/片',
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
@ -125,12 +125,12 @@ export default {
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '10%',
|
||||
top: '12%',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
orient: 'vertical',
|
||||
icon: 'none',
|
||||
itemGap: 5,
|
||||
itemGap: 8,
|
||||
itemWidth: 10,
|
||||
formatter: name => {
|
||||
const testData = this.dataList
|
||||
@ -298,18 +298,19 @@ export default {
|
||||
|
||||
applyChartOption(datalist) {
|
||||
const fs5 = this.calcFontsize(5 /** px*/)
|
||||
const fs8 = this.calcFontsize(8 /** px*/)
|
||||
const fs10 = this.calcFontsize(10 /** px*/)
|
||||
const fs14 = this.calcFontsize(14 /** 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.subtextStyle.fontSize = fs14
|
||||
|
||||
this.configs.legend.top = legendTopRate + '%'
|
||||
this.configs.legend.left = 0 + '%'
|
||||
this.configs.legend.itemGap = fs5
|
||||
this.configs.legend.itemGap = fs8
|
||||
this.configs.legend.itemWidth = fs10
|
||||
|
||||
this.configs.legend.textStyle.rich.a.fontSize = fs10
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
ref="chartContainer"
|
||||
class="chartContainer"
|
||||
:class="bindClass"
|
||||
style="position: relative; width: 100%; height: calc(100% - 36px)"
|
||||
style="position: relative; width: 100%; height:100%"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -15,6 +15,10 @@ export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
unitName: {
|
||||
type: String,
|
||||
default: '单位: 片'
|
||||
},
|
||||
chartName: {
|
||||
type: String,
|
||||
default: ''
|
||||
@ -46,19 +50,19 @@ export default {
|
||||
bindClass() {
|
||||
return {
|
||||
'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() {
|
||||
if (this.dataList.length > 1) {
|
||||
const barWidth = 400 / 2 / this.dataList[0].data.length
|
||||
this.series = [
|
||||
{
|
||||
// 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
barWidth,
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
@ -71,23 +75,40 @@ export default {
|
||||
// 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth,
|
||||
symbol: 'diamond',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [30, 12],
|
||||
symbolOffset: ['-70%', '-50%'],
|
||||
symbolSize: [20, 6],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: this.dataList[0].topColor },
|
||||
data: this.dataList[0].data
|
||||
itemStyle: {
|
||||
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,
|
||||
type: 'pictorialBar',
|
||||
barWidth,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [30, 15],
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
symbolOffset: ['-62%', '50%'],
|
||||
symbolSize: [20, 6],
|
||||
itemStyle: { color: this.dataList[0].bottomColor },
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
@ -95,7 +116,7 @@ export default {
|
||||
// 柱体
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
barWidth,
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
@ -108,56 +129,64 @@ export default {
|
||||
// 柱顶
|
||||
name: this.dataList[1].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth,
|
||||
symbol: 'diamond',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [30, 12],
|
||||
symbolOffset: ['66%', '-50%'],
|
||||
symbolSize: [20, 6],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: this.dataList[1].topColor },
|
||||
data: this.dataList[1].data
|
||||
itemStyle: {
|
||||
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,
|
||||
type: 'pictorialBar',
|
||||
barWidth,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [30, 15],
|
||||
itemStyle: { color: this.dataList[1].topColor },
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
symbolOffset: ['66%', '50%'],
|
||||
symbolSize: [20, 6],
|
||||
itemStyle: { color: this.dataList[1].bottomColor },
|
||||
data: this.dataList[1].data
|
||||
}
|
||||
]
|
||||
} else {
|
||||
const barWidth = 320 / 2 / this.dataList[0].data.length
|
||||
const barWidth = 400 / 2 / this.dataList[0].data.length
|
||||
this.series = [
|
||||
{
|
||||
// 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
])
|
||||
// borderWidth: 1,
|
||||
// borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
// backgroundStyle: {
|
||||
// // borderColor: this.dataList[0].bottomColor,
|
||||
// borderColor: '#ff0000',
|
||||
// borderWidth: 1
|
||||
// }
|
||||
},
|
||||
{
|
||||
// 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
@ -167,11 +196,16 @@ export default {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
{ offset: 1, color: '#2c6e7d' }
|
||||
])
|
||||
},
|
||||
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,
|
||||
offset: [0, 10],
|
||||
position: 'top',
|
||||
@ -183,12 +217,11 @@ export default {
|
||||
// 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [barWidth, 6],
|
||||
itemStyle: { color: this.dataList[0].bottomColor + '9f' },
|
||||
itemStyle: { color: '#2c6e7d' },
|
||||
data: this.dataList[0].data
|
||||
}
|
||||
]
|
||||
@ -210,12 +243,23 @@ export default {
|
||||
this.chart = echarts.init(this.$refs.chartContainer)
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
top: '24%',
|
||||
left: '8%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
selectedMode: false,
|
||||
top: '7%',
|
||||
right: '2%',
|
||||
textStyle: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
@ -225,40 +269,77 @@ export default {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 16,
|
||||
textStyle: {
|
||||
fontSize: this.xlabelFontSize,
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
},
|
||||
margin: 20,
|
||||
rotate: this.xlabelRotate
|
||||
},
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: this.dataList[0].bottomColor,
|
||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(119, 255, 242, 0.2)'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
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: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: this.dataList[0].bottomColor,
|
||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(119, 255, 242, 0.2)'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
}
|
||||
// {
|
||||
// name: '能耗kw/h',
|
||||
// nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||
// type: 'value',
|
||||
// splitNumber: 3,
|
||||
// axisTick: { show: false },
|
||||
// onZero: true,
|
||||
// position: 'left',
|
||||
// offset: 48,
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// type: 'solid',
|
||||
// color: this.dataList[1].bottomColor,
|
||||
// width: '1' // 坐标线的宽度
|
||||
// }
|
||||
// },
|
||||
// axisLabel: {
|
||||
// textStyle: {
|
||||
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
// }
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: false
|
||||
// // lineStyle: {
|
||||
// // type: 'dotted',
|
||||
// // color: 'rgba(119, 255, 242, 0.2)'
|
||||
// // }
|
||||
// },
|
||||
// type: 'value'
|
||||
// }
|
||||
],
|
||||
series: this.series
|
||||
})
|
||||
}
|
||||
@ -276,27 +357,40 @@ export default {
|
||||
/* .fault-category-chart::before { */
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: calc(36px * var(--beilv));
|
||||
/* top: 63%; */
|
||||
/* bottom: calc(100vh/1920 * 80);
|
||||
left: calc(100vw/1920 * 48); */
|
||||
/* bottom: calc(10% + 100vh/1920 * 28); */
|
||||
bottom: 25px;
|
||||
left: 9%;
|
||||
height: calc(32px * var(--beilv));
|
||||
height: 52px;
|
||||
width: 90%;
|
||||
background: linear-gradient(to top, #31a2ff6d, transparent);
|
||||
transform: skew(-35deg);
|
||||
transform: skew(-45deg);
|
||||
z-index: 0;
|
||||
}
|
||||
.process-fault-chart >>> div::before {
|
||||
/* .process-fault-chart::before { */
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 65%;
|
||||
left: 8%;
|
||||
height: calc(32px * var(--beilv));
|
||||
/* bottom: calc(20px * var(--beilv));
|
||||
left: calc(36px * var(--beilv));
|
||||
height: calc(32px * var(--beilv)); */
|
||||
bottom: 26px;
|
||||
left: 10%;
|
||||
height: 48px;
|
||||
width: 90%;
|
||||
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);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
top: '18%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
|
||||
@ -30,42 +30,43 @@ const PriorityComponent = {
|
||||
console.log(this.injectData.priority)
|
||||
},
|
||||
methods: {},
|
||||
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)
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
console.log('is component?', PriorityComponent)
|
||||
|
||||
export const qualityTableProps = [
|
||||
{ label: '工序名称', width: 130, prop: 'wsName', align: 'center' },
|
||||
{ label: '所属产线', width: 130, prop: 'pl', align: 'center' },
|
||||
{ label: '异常内容', align: 'center', prop: 'content' },
|
||||
{ label: '报告人', width: 120, prop: 'creator', align: 'center' },
|
||||
{ label: '工序名称', width: 130, prop: 'wsName', align: 'center', 'min-width': 55 },
|
||||
{ label: '所属产线', width: 130, prop: 'pl', align: 'center', 'min-width': 55 },
|
||||
{ label: '异常内容', align: 'center', prop: 'content', 'min-width': 55 },
|
||||
{ label: '班组', width: 120, prop: 'team', align: 'center', 'min-width': 55 },
|
||||
{ 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 = [
|
||||
{ 'wsName': '工序0', 'pl': '产线1', 'content': '争近才百子', 'creator': '毛刚', 'time': '1995-03-10 22:06:23', 'priority': 3 },
|
||||
{ 'wsName': '工序1', 'pl': '产线10', 'content': '确规面这又间级', 'creator': '毛勇', 'time': '1997-11-26 16:27:32', 'priority': 1 },
|
||||
{ 'wsName': '工序2', 'pl': '产线8', 'content': '成思体高原法厂清', 'creator': '林平', 'time': '1990-09-18 03:16:44', 'priority': 2 },
|
||||
{ 'wsName': '工序3', 'pl': '产线6', 'content': '社色增设长放统展', 'creator': '叶静', 'time': '1970-12-02 09:44:01', 'priority': 4 },
|
||||
{ 'wsName': '工序4', 'pl': '产线10', 'content': '今西', 'creator': '罗磊', 'time': '2017-10-21 00:00:27', 'priority': 2 },
|
||||
{ 'wsName': '工序5', 'pl': '产线4', 'content': '却称老节再始', 'creator': '郝秀兰', 'time': '2018-06-04 20:34:53', 'priority': 1 },
|
||||
{ 'wsName': '工序6', 'pl': '产线4', 'content': '志矿正算片大料水断特', 'creator': '熊磊', 'time': '1999-07-20 19:13:32', 'priority': 3 },
|
||||
{ 'wsName': '工序7', 'pl': '产线3', 'content': '目式却属采精国', 'creator': '马磊', 'time': '2001-07-16 03:50:54', 'priority': 4 },
|
||||
{ 'wsName': '工序8', 'pl': '产线7', 'content': '做较代你', 'creator': '曾敏', 'time': '1986-01-07 03:20:21', 'priority': 3 },
|
||||
{ 'wsName': '工序9', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 },
|
||||
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 },
|
||||
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 4 },
|
||||
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 },
|
||||
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
|
||||
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
|
||||
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 1 },
|
||||
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 3 },
|
||||
{ 'wsName': '工序11', 'pl': '产线3', 'content': '与子专前求农说', 'creator': '谭艳', 'time': '1978-07-29 22:49:11', 'priority': 2 }
|
||||
]
|
||||
{ 'wsName': '原片', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:36:26', 'priority': 3 },
|
||||
{ 'wsName': '下片铺纸', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 11:35:02', 'priority': 4 },
|
||||
{ 'wsName': '镀膜', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:10:02', 'priority': 1 },
|
||||
{ 'wsName': '丝印', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 02:16:20', 'priority': 4 },
|
||||
{ 'wsName': '上片磨边', 'pl': 'A', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 4 },
|
||||
{ 'wsName': '丝印', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 4 },
|
||||
{ 'wsName': '上片磨边', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:54:45', 'priority': 3 },
|
||||
{ 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:47:23', 'priority': 1 },
|
||||
{ 'wsName': '包装', 'pl': 'B', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 02:46:21', 'priority': 1 },
|
||||
{ 'wsName': '上片磨边', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:31:10', 'priority': 1 },
|
||||
{ 'wsName': '下片铺纸', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:22:55', 'priority': 3 },
|
||||
{ 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:29:08', 'priority': 2 },
|
||||
{ 'wsName': '丝印', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 09:47:06', 'priority': 1 },
|
||||
{ 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 06:17:27', 'priority': 1 },
|
||||
{ 'wsName': '原片', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 00:29:26', 'priority': 2 },
|
||||
{ 'wsName': '清洗', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 10:14:27', 'priority': 2 },
|
||||
{ 'wsName': '包装', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:50:39', 'priority': 3 },
|
||||
{ '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]
|
||||
}
|
||||
},
|
||||
render: function (h) {
|
||||
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' } }, ''),
|
||||
render: function(h) {
|
||||
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', this.statusText)
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
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: 'content', align: 'center' },
|
||||
{ label: '发现人', prop: 'creator', align: 'center', width: 100 },
|
||||
{ label: '异常内容', prop: 'content', align: 'center', 'min-width': 55 },
|
||||
{ label: '设备', prop: 'eq', align: 'center', width: 100 },
|
||||
{ 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: 'status', align: 'center', subcomponent: StatusComponent, width: 150 }
|
||||
]
|
||||
|
||||
export const qualityExceptionDatalist = [
|
||||
{ 'wsName': '工序0', 'pl': '产线1', 'content': '说红要称或各眼华家书', 'creator': '罗霞', 'time': '2013-04-08 15:23:55', 'priority': 1, 'charger': '冯敏', 'status': 4 },
|
||||
{ 'wsName': '工序1', 'pl': '产线9', 'content': '积已反老支人后条办', 'creator': '龚芳', 'time': '1984-06-22 09:44:24', 'priority': 2, 'charger': '万静', 'status': 2 },
|
||||
{ 'wsName': '工序2', 'pl': '产线10', 'content': '铁收王', 'creator': '黎艳', 'time': '2006-10-25 19:20:41', 'priority': 2, 'charger': '徐秀兰', 'status': 1 },
|
||||
{ 'wsName': '工序3', 'pl': '产线10', 'content': '过又条政理质系', 'creator': '郝强', 'time': '2020-03-06 12:11:52', 'priority': 3, 'charger': '白秀兰', 'status': 2 },
|
||||
{ 'wsName': '工序4', 'pl': '产线3', 'content': '特适院', 'creator': '魏超', 'time': '1982-12-26 16:19:57', 'priority': 1, 'charger': '姚静', 'status': 3 },
|
||||
{ 'wsName': '工序5', 'pl': '产线1', 'content': '快准很问无', 'creator': '于桂英', 'time': '1976-09-26 21:53:11', 'priority': 4, 'charger': '白刚', 'status': 2 },
|
||||
{ 'wsName': '工序6', 'pl': '产线7', 'content': '研开', 'creator': '何桂英', 'time': '1977-04-23 05:34:45', 'priority': 3, 'charger': '秦涛', 'status': 4 },
|
||||
{ 'wsName': '工序7', 'pl': '产线2', 'content': '四取各广水儿强想华', 'creator': '唐军', 'time': '1988-03-11 22:40:42', 'priority': 2, 'charger': '龙艳', 'status': 1 },
|
||||
{ 'wsName': '工序8', 'pl': '产线7', 'content': '样无商口', 'creator': '高娟', 'time': '2012-03-14 06:40:16', 'priority': 3, 'charger': '沈涛', 'status': 1 },
|
||||
{ 'wsName': '工序9', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 4, 'charger': '侯磊', 'status': 4 },
|
||||
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 2, 'charger': '侯磊', 'status': 3 },
|
||||
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 1, 'charger': '侯磊', 'status': 1 },
|
||||
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 1, 'charger': '侯磊', 'status': 2 },
|
||||
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 2, 'charger': '侯磊', 'status': 3 },
|
||||
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 3, 'charger': '侯磊', 'status': 2 },
|
||||
{ 'wsName': '工序10', 'pl': '产线4', 'content': '克质问般集却片土', 'creator': '谭敏', 'time': '2016-04-14 00:41:46', 'priority': 3, 'charger': '侯磊', 'status': 1 },
|
||||
{ 'wsName': '工序10', '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:30:01', 'priority': 4 },
|
||||
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透过率', 'time': '2022-11-18 07:20:35', 'priority': 4 },
|
||||
{ 'pl': 'B', 'eq': '钢后清洗机', 'wsName': '钢后清洗机', 'content': '透过率', 'time': '2022-11-18 09:16:21', 'priority': 2 },
|
||||
{ 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 04:57:10', 'priority': 4 },
|
||||
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 08:26:43', 'priority': 2 },
|
||||
{ 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 04:09:39', 'priority': 2 },
|
||||
{ 'pl': 'B', 'eq': '下片', 'wsName': '下片', 'content': '透过率', 'time': '2022-11-18 01:06:05', 'priority': 2 },
|
||||
{ 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 05:06:36', 'priority': 1 },
|
||||
{ 'pl': 'B', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 07:11:45', 'priority': 3 },
|
||||
{ 'pl': 'A', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 11:40:37', 'priority': 3 },
|
||||
{ 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '完整性', 'time': '2022-11-18 10:41:54', 'priority': 1 },
|
||||
{ 'pl': 'B', 'eq': '预热', 'wsName': '预热', 'content': '透过率', 'time': '2022-11-18 04:10:00', 'priority': 1 },
|
||||
{ 'pl': 'B', 'eq': '钢化', 'wsName': '钢化', 'content': '完整性', 'time': '2022-11-18 09:23:40', 'priority': 1 },
|
||||
{ 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '透过率', 'time': '2022-11-18 05:28:05', 'priority': 2 },
|
||||
{ 'pl': 'B', 'eq': '上片', 'wsName': '上片', 'content': '完整性', 'time': '2022-11-18 06:24:57', 'priority': 3 },
|
||||
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 02:48:28', 'priority': 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
|
||||
-->
|
||||
<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 line-vertical" />
|
||||
<div class="line line-right" />
|
||||
@ -75,6 +75,7 @@ export default {
|
||||
.base-container {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
||||
position: relative;
|
||||
border: 2px solid;
|
||||
@ -138,8 +139,11 @@ export default {
|
||||
font-size: 1.5em;
|
||||
padding: .67em;
|
||||
}
|
||||
// .bar-content{
|
||||
// padding: 1em;
|
||||
// }
|
||||
.bar-item {
|
||||
height: 100%;
|
||||
}
|
||||
.bar-content{
|
||||
height: calc(100% - 4em);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,26 +7,29 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="visual-base-table-container">
|
||||
<el-table
|
||||
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 v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
|
||||
<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"
|
||||
:show-overflow-tooltip="showOverflow"
|
||||
v-bind="item"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
|
||||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
|
||||
<component
|
||||
: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>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<slot name="content" />
|
||||
@ -36,7 +39,7 @@
|
||||
<script>
|
||||
import { isObject, isString } from 'lodash'
|
||||
export default {
|
||||
name: 'BaseTable',
|
||||
name: 'TechyTable',
|
||||
filters: {
|
||||
commonFilter: (source, filterType = a => a) => {
|
||||
return filterType(source)
|
||||
@ -107,70 +110,103 @@ export default {
|
||||
methods: {
|
||||
emitData(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>
|
||||
<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 {
|
||||
.el-table {
|
||||
border: 0;
|
||||
}
|
||||
.el-table::before,.el-table--border::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-table th,td{
|
||||
border-color: #0D1728 !important;
|
||||
padding: 0;
|
||||
}
|
||||
.el-table tr {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
.setting {
|
||||
text-align: right;
|
||||
padding: 15px;
|
||||
.setting-box {
|
||||
width: 100px;
|
||||
}
|
||||
i {
|
||||
color: #aaa;
|
||||
@extend .pointer;
|
||||
}
|
||||
/* .visual-base-table-container >>> .el-table {
|
||||
min-width: 120%;
|
||||
} */
|
||||
/* 清除默认样式 */
|
||||
.visual-base-table-container >>> th.gutter {
|
||||
display: none;
|
||||
}
|
||||
.visual-base-table-container >>> table {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table,
|
||||
.visual-base-table-container >>> th,
|
||||
.visual-base-table-container >>> tr {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
/* 设置设计稿样式 */
|
||||
.visual-base-table-container >>> .el-table::before,
|
||||
.visual-base-table-container >>> .el-table--group::after,
|
||||
.visual-base-table-container >>> .el-table--border::after,
|
||||
.visual-base-table-container >>> .el-table--border::after {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> table * {
|
||||
border-color: #0d1728;
|
||||
border-width: calc(1px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> td {
|
||||
padding: calc(5px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> td span {
|
||||
color: #ffffffb3;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
line-height: calc(14px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> thead th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> thead th .cell {
|
||||
color: #fff;
|
||||
font-size: calc(14px * var(--beilv));
|
||||
line-height: calc(14px * var(--beilv));
|
||||
padding: calc(6px * var(--beilv));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table__body tr:hover > td {
|
||||
background-color: #42537130;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
|
||||
background-color: #0e203e;
|
||||
/* background-color: #0e203e90; */
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
|
||||
.visual-base-table-container >>> .el-table thead {
|
||||
background-color: #203760;
|
||||
/* background-color: #20376090; */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
<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'}">
|
||||
<img src="./../../../../assets/img/cockpit/bom.png" alt="" :width="355 * beilv + 'px'" :height="280 * beilv + 'px'">
|
||||
<p class="bom-name" :style="{ bottom: 10 * beilv + 'px', fontSize: 16 * beilv + 'px'}">
|
||||
<span class="leftTriangle" />
|
||||
<img src="./../../../../assets/img/cockpit/bom.png" alt="" width="100%" height="97%"/>
|
||||
<p class="bom-name" :style="{ fontSize: 16 * beilv + 'px'}">
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="rightTriangle" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -28,29 +26,19 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
.bom-box {
|
||||
position: relative;
|
||||
width: 48%;
|
||||
.bom-name {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.leftTriangle,
|
||||
.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;
|
||||
}
|
||||
bottom: 6%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,32 +29,15 @@
|
||||
<bom-list :beilv="beilv" :bom-msg="bomMsg" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-col :span="14" :style="{ margin: 16 * beilv + 'px' + ' 0' }">
|
||||
<!-- 右上 -->
|
||||
<el-row>
|
||||
<el-col :style="{ marginTop: 16 * beilv + 'px' }">
|
||||
<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' }">
|
||||
<div class="right-box">
|
||||
<div class="right-top">
|
||||
<base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
|
||||
<div class="box-padding specil-table1">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="14"
|
||||
:limit="15"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="material"
|
||||
@ -62,8 +45,22 @@
|
||||
/>
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<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-row>
|
||||
</div>
|
||||
@ -114,7 +111,7 @@ const material = [
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '辅料规格',
|
||||
label: '辅料名称',
|
||||
minWidth: 32.4
|
||||
},
|
||||
{
|
||||
@ -178,37 +175,44 @@ export default {
|
||||
getMsg() {
|
||||
const arr = []
|
||||
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++) {
|
||||
const obj = {}
|
||||
const sj = parseInt(Math.random() * 200)
|
||||
obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
|
||||
obj.productLine = '产线A'
|
||||
obj.spec = '光伏玻璃2.0'
|
||||
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
|
||||
obj.num = parseInt(Math.random() * 800 + 100)
|
||||
const sj = parseInt(Math.random() * 15)
|
||||
obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
|
||||
obj.productLine = sj % 2 ? 'A' : 'B'
|
||||
obj.spec = productList[parseInt(Math.random() * (productList.length))]
|
||||
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD')
|
||||
obj.num = parseInt(Math.random() * 800 + 100) + ' (片)'
|
||||
arr.push(obj)
|
||||
}
|
||||
this.originalFilmList = arr
|
||||
const eqList = ['清洗机', 'A1一次冷却机', 'A1下片机', 'A1一次固化机', 'A1一次镀膜机', 'A1二次固化机', 'A1二次镀膜机', 'A1磨边机', 'A1磨边清洗机', 'A1预热机', 'A2一次冷却机', 'A2一次固化机', 'A2一次镀膜机', 'A2下片机', 'A2二次固化机', 'A2磨边机', 'A2磨边清洗机', 'A储片机206']
|
||||
const spcList = ['200*231*0.5', '100*120*0.2', '70*80', '100*100']
|
||||
const eqList = [
|
||||
{name: '磨边机', fc: ''},
|
||||
{name: '丝印机', fc: ['油墨', '刮胶']},
|
||||
{name: '镀膜机', fc: ['镀膜液', '异丙醇']},
|
||||
{name: '包装机', fc: ['隔离纸', '包装辅材']}
|
||||
]
|
||||
for (let i = 0; i < 20; i++) {
|
||||
const obj = {}
|
||||
const sj = parseInt(Math.random() * 200)
|
||||
obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
|
||||
obj.eqName = eqList[parseInt(Math.random() * eqList.length)]
|
||||
obj.spec = spcList[parseInt(Math.random() * spcList.length)]
|
||||
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
|
||||
const sj = parseInt(Math.random() * 15)
|
||||
const sj2 = parseInt(Math.random() * eqList.length)
|
||||
const sj3 = sj % 2 ? 1 : 0
|
||||
obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
|
||||
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)
|
||||
temp.push(obj)
|
||||
}
|
||||
this.materialList = temp
|
||||
this.bomMsg = [
|
||||
{ name: '隔离纸' },
|
||||
{ name: '异丙醇' },
|
||||
{ name: '镀膜液' },
|
||||
{ name: '磨轮' },
|
||||
{ name: '包装辅材' },
|
||||
{ name: '网板' }
|
||||
{ name: '2.0-1128*1716' },
|
||||
{ name: '2.0-1128*2251' },
|
||||
{ name: '2.0-1128*2272' },
|
||||
{ name: '3.2-1128*1716' },
|
||||
{ name: '3.2-1128*1718' },
|
||||
{ name: '3.2-1032*1747' }
|
||||
]
|
||||
},
|
||||
change() {
|
||||
@ -256,12 +260,31 @@ export default {
|
||||
}
|
||||
}
|
||||
.box-padding {
|
||||
padding: 0 16px;
|
||||
padding: 0 16px 16px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.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 {
|
||||
.el-table .cell {
|
||||
padding-left: 40px;
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</el-row>
|
||||
<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">
|
||||
<base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'">
|
||||
<work-order :beilv="beilv" :order-msg="orderList" />
|
||||
@ -46,13 +46,13 @@
|
||||
</el-col>
|
||||
</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">
|
||||
<base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
|
||||
<div class="box-padding specil-table2">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="16"
|
||||
:limit="17"
|
||||
:show-index="false"
|
||||
:beilv="beilv"
|
||||
:table-config="orderMonitiring"
|
||||
@ -76,17 +76,17 @@ const orderPool = [
|
||||
{
|
||||
prop: 'customerName',
|
||||
label: '客户名称',
|
||||
minWidth: 35.2
|
||||
minWidth: 38
|
||||
},
|
||||
{
|
||||
prop: 'orderCode',
|
||||
label: '订单编号',
|
||||
minWidth: 32
|
||||
minWidth: 36
|
||||
},
|
||||
{
|
||||
prop: 'productName',
|
||||
label: '产品名称',
|
||||
minWidth: 32
|
||||
minWidth: 30
|
||||
},
|
||||
{
|
||||
prop: 'planNum',
|
||||
@ -96,31 +96,31 @@ const orderPool = [
|
||||
{
|
||||
prop: 'planDelivery',
|
||||
label: '计划交货期',
|
||||
minWidth: 28.8
|
||||
minWidth: 25
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '订单状态',
|
||||
subcomponent: orderStatus,
|
||||
minWidth: 19
|
||||
minWidth: 21
|
||||
}
|
||||
]
|
||||
const orderMonitiring = [
|
||||
{
|
||||
prop: 'customerName',
|
||||
label: '客户名称',
|
||||
minWidth: 35.2
|
||||
minWidth: 40
|
||||
},
|
||||
{
|
||||
prop: 'orderCode',
|
||||
label: '订单编号',
|
||||
minWidth: 33.2
|
||||
minWidth: 38
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '订单状态',
|
||||
subcomponent: orderStatus,
|
||||
minWidth: 27
|
||||
minWidth: 28
|
||||
},
|
||||
{
|
||||
prop: 'completion',
|
||||
@ -206,40 +206,55 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getMsg() {
|
||||
this.orderList = [
|
||||
{ code: 'ZGD20221024000110', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221024000110', percentage: '100%' },
|
||||
{ code: 'ZGD20221028000157', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221028000157', percentage: '85%' },
|
||||
{ code: 'ZGD20221030000142', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000142', percentage: '72%' },
|
||||
{ code: 'ZGD20221030000098', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000098', percentage: '46%' }
|
||||
]
|
||||
const compList = ['SHABO沙玻', 'KIBING旗滨', '金晶玻璃', '济南金昊', '东莞佳美特', '汇中矿产', '文盛新材料', '西点化学', '开源塑胶', '奥驰商贸', '竹中科技', '程龙玻璃']
|
||||
const arr = []
|
||||
const compList = ['隆基绿能科技股份有限公司', '天合光能股份有限公司', '晶澳太阳能科技股份有限公司', '晶科能源股份有限公司', '阿特斯阳光电力集团', '东方日升新能源股份有限公司', '尚德集团', '浙江正泰新能源开发有限公司', '环晟光伏(江苏)有限公司', '江苏赛拉弗光伏系统有限公司', '唐山海泰新能科技股份有限公司', '阳光能源控股有限公司', '横店集团东磁股份有限公司', '常州亿晶光电科技有限公司', '协鑫集成科技股份有限公司', '苏州中来光伏新材股份有限公司', '中节能太阳能科技(镇江)有限公司', '苏州腾晖光伏技术有限公司', '英利绿色能源控股有限公司', '湖南红太阳新能源科技有限公司']
|
||||
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']
|
||||
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%'}]
|
||||
const arr1 = []
|
||||
const arr2 = []
|
||||
const temp = []
|
||||
for (let i = 0; i < 20; i++) {
|
||||
const obj = {}
|
||||
for(let i = 0; i < 4; i++) {
|
||||
const sj = parseInt(Math.random() * 200)
|
||||
obj.customerName = compList[parseInt(Math.random() * (compList.length))]
|
||||
obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
|
||||
obj.productName = '光伏玻璃2.0'
|
||||
obj.planNum = parseInt(Math.random() * 800 + 100)
|
||||
obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
|
||||
obj.status = parseInt(Math.random() * 3 + 1)
|
||||
arr.push(obj)
|
||||
const obj = {}
|
||||
obj.code = 'WOD' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
|
||||
obj.state = '激活'
|
||||
obj.name = daping[i].name
|
||||
obj.line = sj % 2 ? 'A' : 'B'
|
||||
obj.workCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
|
||||
obj.percentage = daping[i].percentage
|
||||
arr1.push(obj)
|
||||
}
|
||||
this.orderPoolList = arr
|
||||
this.orderList = arr1
|
||||
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 = 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.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
|
||||
obj.yield = parseInt(Math.random() * 50 + 50) + '%'
|
||||
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.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.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).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.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.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)
|
||||
}
|
||||
this.orderMonitiringList = temp
|
||||
@ -290,9 +305,20 @@ export default {
|
||||
}
|
||||
.container-main {
|
||||
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 {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -310,11 +336,11 @@ export default {
|
||||
}
|
||||
.specil-table2 {
|
||||
.el-table .cell {
|
||||
padding-left: 50px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
.el-table--border th: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
|
||||
-->
|
||||
<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 line-vertical" />
|
||||
<div class="line line-right" />
|
||||
@ -75,6 +75,7 @@ export default {
|
||||
.base-container {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
||||
position: relative;
|
||||
border: 2px solid;
|
||||
@ -138,8 +139,11 @@ export default {
|
||||
font-size: 1.5em;
|
||||
padding: .67em;
|
||||
}
|
||||
// .bar-content{
|
||||
// padding: 1em;
|
||||
// }
|
||||
.bar-item {
|
||||
height: 100%;
|
||||
}
|
||||
.bar-content{
|
||||
height: calc(100% - 6em);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,26 +7,29 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="visual-base-table-container">
|
||||
<el-table
|
||||
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 v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
|
||||
<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"
|
||||
:show-overflow-tooltip="showOverflow"
|
||||
v-bind="item"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
|
||||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
|
||||
<component
|
||||
: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>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<slot name="content" />
|
||||
@ -36,7 +39,7 @@
|
||||
<script>
|
||||
import { isObject, isString } from 'lodash'
|
||||
export default {
|
||||
name: 'BaseTable',
|
||||
name: 'TechyTable',
|
||||
filters: {
|
||||
commonFilter: (source, filterType = a => a) => {
|
||||
return filterType(source)
|
||||
@ -107,70 +110,103 @@ export default {
|
||||
methods: {
|
||||
emitData(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>
|
||||
<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 {
|
||||
.el-table {
|
||||
border: 0;
|
||||
}
|
||||
.el-table::before,.el-table--border::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-table th,td{
|
||||
border-color: #0D1728 !important;
|
||||
padding: 0;
|
||||
}
|
||||
.el-table tr {
|
||||
background: transparent;
|
||||
}
|
||||
.el-table__row:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
|
||||
.el-table__row--striped:hover > td {
|
||||
background-color: rgba(79,114,136,0.29) !important;
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
.setting {
|
||||
text-align: right;
|
||||
padding: 15px;
|
||||
.setting-box {
|
||||
width: 100px;
|
||||
}
|
||||
i {
|
||||
color: #aaa;
|
||||
@extend .pointer;
|
||||
}
|
||||
/* .visual-base-table-container >>> .el-table {
|
||||
min-width: 120%;
|
||||
} */
|
||||
/* 清除默认样式 */
|
||||
.visual-base-table-container >>> th.gutter {
|
||||
display: none;
|
||||
}
|
||||
.visual-base-table-container >>> table {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table,
|
||||
.visual-base-table-container >>> th,
|
||||
.visual-base-table-container >>> tr {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
/* 设置设计稿样式 */
|
||||
.visual-base-table-container >>> .el-table::before,
|
||||
.visual-base-table-container >>> .el-table--group::after,
|
||||
.visual-base-table-container >>> .el-table--border::after,
|
||||
.visual-base-table-container >>> .el-table--border::after {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> table * {
|
||||
border-color: #0d1728;
|
||||
border-width: calc(1px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> td {
|
||||
padding: calc(5px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> td span {
|
||||
color: #ffffffb3;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
line-height: calc(14px * var(--beilv));
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> thead th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> thead th .cell {
|
||||
color: #fff;
|
||||
font-size: calc(14px * var(--beilv));
|
||||
line-height: calc(14px * var(--beilv));
|
||||
padding: calc(6px * var(--beilv));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table__body tr:hover > td {
|
||||
background-color: #42537130;
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
|
||||
background-color: #0e203e;
|
||||
/* background-color: #0e203e90; */
|
||||
}
|
||||
|
||||
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
|
||||
.visual-base-table-container >>> .el-table thead {
|
||||
background-color: #203760;
|
||||
/* background-color: #20376090; */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<div :style="{ height: 15 * beilv + 'px' }">
|
||||
<span v-if="this.injectData.status === 3">
|
||||
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
|
||||
已完成
|
||||
</span>
|
||||
<div class="state-box">
|
||||
<span v-if="this.injectData.status === 1">
|
||||
<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" />
|
||||
已下发
|
||||
</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>
|
||||
</template>
|
||||
<script>
|
||||
@ -40,3 +44,8 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.state-box {
|
||||
height: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
v-for="(item,index) in orderMsg"
|
||||
:key="index"
|
||||
:style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv
|
||||
+ 'px', height: 168 * beilv + 'px'}"
|
||||
+ 'px'}"
|
||||
class="box"
|
||||
>
|
||||
<p class="line1">
|
||||
@ -57,6 +57,8 @@ export default {
|
||||
<style lang='scss' scoped>
|
||||
.order-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
.box {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user