Merge pull request 'lb' (#12) from lb into master

Reviewed-on: #12
This commit is contained in:
高天泽 2022-11-18 17:04:50 +08:00
commit 4c700e05e6
33 changed files with 1625 additions and 954 deletions

View File

@ -36,11 +36,29 @@ export default {
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
let data = [
//
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
}),
//
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
}),
//
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
})
]
let wendu = data[0]
let dianliu = data[1]
@ -52,6 +70,7 @@ export default {
color: colors,
legend: {
top: 4,
right: 50,
itemWidth: 8,
itemHeight: 8,
textStyle: {
@ -85,10 +104,10 @@ export default {
name: '电流/A',
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
type: 'value',
splitNumber: 4,
splitNumber: 3,
onZero: true,
position: 'left',
offset: 42,
offset: 40,
axisTick: { show: false },
axisLine: {
show: true,
@ -112,7 +131,7 @@ export default {
name: '电压/V',
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
type: 'value',
splitNumber: 4,
splitNumber: 3,
axisTick: { show: false },
onZero: true,
position: 'left',
@ -147,7 +166,7 @@ export default {
}
},
type: 'value',
splitNumber: 4,
splitNumber: 3,
splitLine: {
lineStyle: {
color: '#fff3'

View File

@ -9,37 +9,6 @@
:table-config="tableProps"
:table-data="tableData"
></TechyTable>
<!-- <el-table
key="LeftContentEquipmentCheck1"
border
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="设备名称" prop="eqName" align="center" />
<el-table-column label="所属产线" prop="pl" align="center" />
<el-table-column label="提示等级" prop="warningLevel" align="center">
<template slot-scope="scope">
<PriorityComponent :injectData="scope.row"></PriorityComponent>
</template>
</el-table-column>
<el-table-column label="巡检内容" prop="checkContent" align="center" />
</el-table>
</div> -->
<!-- <div class="el-table-wrapper">
<el-table
key="LeftContentEquipmentCheck2"
border
:data="tableData2"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="设备名称" prop="eqName" />
<el-table-column label="所属产线" prop="pl" />
<el-table-column label="提示等级" prop="warningLevel" />
<el-table-column label="提示等级" prop="checkContent" />
</el-table>
</div> -->
</div>
</div>
</template>
@ -68,11 +37,6 @@ const PriorityComponent = {
{
style: {
display: 'inline-block',
// borderRadius: '2px',
// padding: '2px 6px',
// color: '#fff',
// opacity: '0.6',
// fontSize: '12px',
borderRadius: 'calc(2px * var(--beilv))',
padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
color: '#fff',
@ -94,15 +58,26 @@ const tableProps = [
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
]
const tableData = [
{ eqName: 'A下片机', pl: '产线1', priority: 1, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 2, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
{ eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' },
{ eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
{ eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
{ eqName: '钢化', pl: 'A', priority: 4, checkContent: '表面检测光源和相机的卫生' },
{ eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
{ eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' },
{ eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' },
{ eqName: '预热', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
{ eqName: '钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' },
{ eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
{ eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
{ eqName: '磨边后清洗机', pl: 'B', priority: 4, checkContent: '边角检测光源和相机的卫生' },
{ eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
{ eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' },
{ eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
{ eqName: '钢化', pl: 'B', priority: 2, checkContent: '检查每日不良是否存在误检' },
{ eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
{ eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
{ eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
{ eqName: '预热', pl: 'B', priority: 4, checkContent: '水冷机内水量充足并且清洁' },
{ eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
{ eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
{ eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }
]
export default {

View File

@ -25,6 +25,7 @@ export default {
<style scoped>
.left-content-monitoring {
flex: 1;
width: 100%;
height: calc(100% - 32px);
display: flex;

View File

@ -45,13 +45,26 @@ const tableProps = [
{ prop: 'finished', label: '完成度', align: 'center', 'min-width': 80, subcomponent: ProcessCircle }
]
const tableData = [
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 },
{ orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
{ orderCode: 'ODFG20210724195124', clientName: '阿特斯阳光电力集团', specs: '3.2-1032*1747', finished: 72 },
{ orderCode: 'ODPG20220712231003', clientName: '阳光能源控股有限公司', specs: '2.0-1128*1716', finished: 67 },
{ orderCode: 'ODFG20210819002810', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1128*1716', finished: 46 },
{ orderCode: 'ODPG20201003193028', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2251', finished: 89 },
{ orderCode: 'ODPG20200113134639', clientName: '协鑫集成科技股份有限公司', specs: '3.2-1128*1718', finished: 54 },
{ orderCode: 'ODFG20211115145712', clientName: '晶科能源股份有限公司', specs: '3.2-1033*2089', finished: 93 },
{ orderCode: 'ODFG20211102234340', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1032*1747', finished: 57 },
{ orderCode: 'ODFG20200303145849', clientName: '晶澳太阳能科技股份有限公司', specs: '2.0-1128*2272', finished: 76 },
{ orderCode: 'ODFG20220208030640', clientName: '苏州中来光伏新材股份有限公司', specs: '2.0-1128*2251', finished: 62 },
{ orderCode: 'ODFG20200916123727', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 23 },
{ orderCode: 'ODFG20200117065400', clientName: '晶澳太阳能科技股份有限公司', specs: '3.2-1033*2089', finished: 75 },
{ orderCode: 'ODPG20211020214146', clientName: '英利绿色能源控股有限公司', specs: '3.2-1128*1716', finished: 44 },
{ orderCode: 'ODPG20221015223506', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2272', finished: 3 },
{ orderCode: 'ODFG20211112131234', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 90 },
{ orderCode: 'ODPG20200411040019', clientName: '阳光能源控股有限公司', specs: '3.2-1033*2089', finished: 4 },
{ orderCode: 'ODPG20220622002234', clientName: '苏州中来光伏新材股份有限公司', specs: '3.2-1128*1718', finished: 43 },
{ orderCode: 'ODPG20220806035106', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 60 },
{ orderCode: 'ODPG20220530081525', clientName: '晶科能源股份有限公司', specs: '2.0-1128*2272', finished: 21 },
{ orderCode: 'ODPG20210228222705', clientName: '阿特斯阳光电力集团', specs: '3.2-1128*1718', finished: 75 },
{ orderCode: 'ODPG20210408102029', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 99 }
]
export default {

View File

@ -9,7 +9,7 @@
<div class="content-part">
<div class="row">
<span class="name"> &nbsp;&nbsp;&nbsp;</span>
<span class="diy-process-bar color-1" />
<span class="diy-process-bar bar-width-1 color-1" />
<span class="amount">
39m
<sup>3</sup>
@ -17,17 +17,17 @@
</div>
<div class="row">
<span class="name">循环水</span>
<span class="diy-process-bar color-2" />
<span class="diy-process-bar bar-width-2 color-2" />
<span class="amount">
239m
23m
<sup>3</sup>
</span>
</div>
<div class="row">
<span class="name">自来水</span>
<span class="diy-process-bar color-3" />
<span class="diy-process-bar bar-width-3 color-3" />
<span class="amount">
23m
239m
<sup>3</sup>
</span>
</div>
@ -44,25 +44,25 @@
<div class="content-part">
<div class="row">
<span class="name">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="diy-process-bar color-1" />
<span class="diy-process-bar bar-width-4 color-1" />
<span class="amount">
23Pa
</span>
</div>
<div class="row">
<span class="name">CDA</span>
<span class="diy-process-bar bar-width-5 color-2" />
<span class="amount">
39Pa
</span>
</div>
<div class="row">
<span class="name">CDA</span>
<span class="diy-process-bar color-2" />
<span class="name">天然气</span>
<span class="diy-process-bar bar-width-6 color-3" />
<span class="amount">
239pa
</span>
</div>
<div class="row">
<span class="name">天然气</span>
<span class="diy-process-bar color-3" />
<span class="amount">
23Pa
</span>
</div>
</div>
</TechyBox>
</div>
@ -85,8 +85,9 @@
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
<span>发电</span>
</div>
<div style="height: 100%; flex: 1; padding: calc(8px * var(--beilv))">
<FadianChart />
<div style="height: 100%; flex: 1; ">
<!-- <FadianChart /> -->
<DianChart />
</div>
</TechyBox>
</div>
@ -199,6 +200,25 @@ export default {
height: 100%;
}
.bar-width-1::after {
width: 60%;
}
.bar-width-2::after {
width: 34%;
}
.bar-width-3::after {
width: 99%;
}
.bar-width-4::after {
width: 20%;
}
.bar-width-5::after {
width: 29%;
}
.bar-width-6::after {
width: 79%;
}
.diy-process-bar.color-1::after {
background: linear-gradient(to right, #178be9, #67b3f2);
}

View File

@ -9,35 +9,6 @@
:table-config="tableProps"
:table-data="tableData"
></TechyTable>
<!--
<el-table
key="RightContentAlertTable"
border
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column
label="设备名称"
prop="eqName"
:show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column
label="所属产线"
prop="plName"
:show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column label="故障等级" prop="priority" :resizable="true" align="center">
<template slot-scope="scope">
<PriorityComponent :injectData="scope.row"></PriorityComponent>
</template>
</el-table-column>
<el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
</el-table> -->
</div>
</div>
</template>
@ -66,11 +37,6 @@ const PriorityComponent = {
{
style: {
display: 'inline-block',
// borderRadius: '2px',
// padding: '2px 6px',
// color: '#fff',
// opacity: '0.6',
// fontSize: '12px',
borderRadius: 'calc(2px * var(--beilv))',
padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
color: '#fff',
@ -86,26 +52,53 @@ const PriorityComponent = {
}
const tableProps = [
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 100 },
{ prop: 'plName', label: '所属产线', align: 'center', 'min-width': 100 },
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
{ prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 90, subcomponent: PriorityComponent },
{ prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 128 }
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }
]
const tableData = [
{ eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: '10min' },
{ eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: '20min' },
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: '30min' },
{ eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: '2min' },
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: '3min' }
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 4, duration: '30 min' },
{ eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 4, duration: '1 min' },
{ eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
{ eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
{ eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
{ eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
{ eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 4, duration: '23 min' },
{ eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' },
{
eqName: '磨边后清洗机',
plName: 'A',
content: '马华部地般平感为转出形就特务把提存。',
priority: 2,
duration: '18 min'
},
{ eqName: '预热', plName: 'B', content: '米织类劳约相查个而美五千老。', priority: 3, duration: '24 min' },
{ eqName: '打孔后清洗机', plName: 'A', content: '历红群色务口史验话备必工少光。', priority: 1, duration: '48 min' },
{ eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 4, duration: '29 min' },
{ eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 4, duration: '47 min' },
{ eqName: '下片', plName: 'A', content: '花公建了办间话个做直志利更在于。', priority: 2, duration: '49 min' },
{ eqName: '一镀', plName: 'B', content: '术任该石代并战面广西处面住王规从他算。', priority: 3, duration: '42 min' },
{ eqName: '二镀', plName: 'A', content: '体才眼自造统六识进后历定因受国。', priority: 2, duration: '42 min' },
{
eqName: '钢后清洗机',
plName: 'A',
content: '就门务程过志率难每维原就快没省为满候。',
priority: 2,
duration: '33 min'
},
{ eqName: '预热', plName: 'A', content: '金单能信较生七族接处人门例图取之。', priority: 2, duration: '34 min' },
{ eqName: '预热', plName: 'B', content: '会带给山气己进相构位节采调而音集。', priority: 3, duration: '6 min' }
]
export default {
name: 'RightContentAlert',
components: { TechyTable },
data() {
return {tableProps, tableData }
return { tableProps, tableData }
},
created() {},
mounted() {},

View File

@ -48,7 +48,7 @@ export default {
},
{
type: 'linear',
x: 1,
x: 0.5,
y: 1,
x2: 0,
y2: 0,
@ -61,7 +61,7 @@ export default {
},
{
type: 'linear',
x: 1,
x: 0.5,
y: 1,
x2: 0,
y2: 0,
@ -75,9 +75,9 @@ export default {
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
y: 0.5,
x2: 1,
y2: 0.5,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#49FBD600', offset: 0.1 },
@ -88,11 +88,11 @@ export default {
]
const demoData = [
{ value: 55, name: 'A' },
{ value: 33, name: 'B' },
{ value: 22, name: 'C' },
{ value: 11, name: 'D' },
{ value: 32, name: 'E' }
{ value: 107, name: '破片' },
{ value: 146, name: '崩边' },
{ value: 43, name: '脏污' },
{ value: 83, name: '划擦伤' },
{ value: 20, name: '崩孔' }
]
return {
@ -103,7 +103,7 @@ export default {
textAlign: 'center',
left: '63%',
top: '35%',
text: '33039',
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
textStyle: {
color: '#fff',
fontSize: 16,
@ -120,10 +120,10 @@ export default {
legend: {
top: 0,
bottom: 0,
left: -10,
left: -15,
orient: 'vertical',
icon: 'none',
itemGap: 5,
itemGap: 8,
itemWidth: 10,
formatter: function(name) {
// test data - dynamic
@ -163,7 +163,6 @@ export default {
borderRadius: 5,
height: 10,
backgroundColor: '#FB418C'
// backgroundColor: '#1A99FF'
},
d: {
// verticalAlign: 'top',
@ -172,7 +171,6 @@ export default {
borderRadius: 5,
height: 10,
backgroundColor: '#DDB112'
// backgroundColor: '#A691FF'
},
e: {
// verticalAlign: 'top',
@ -181,7 +179,6 @@ export default {
borderRadius: 5,
height: 10,
backgroundColor: '#1A99FF'
// backgroundColor: '#FB418C'
},
f: {
// verticalAlign: 'top',
@ -190,7 +187,6 @@ export default {
borderRadius: 5,
height: 10,
backgroundColor: '#A691FF'
// backgroundColor: '#49FBD6'
},
g: {
// verticalAlign: 'top',
@ -199,7 +195,6 @@ export default {
borderRadius: 5,
height: 10,
backgroundColor: '#49FBD6'
// backgroundColor: '#DDB112'
}
}
}
@ -236,7 +231,7 @@ export default {
const colorGradient = colors[dataIndex]
if (totalRate + percent < 25) {
/** 也许这里需要完善,但目前工作良好 */
(() => {})()
;(() => {})()
} else if (totalRate + percent < 50) {
colorGradient.x = 0
colorGradient.y = 0
@ -249,7 +244,7 @@ export default {
colorGradient.y2 = 0
} else if (totalRate + percent < 100) {
/** 也许这里需要完善,但目前工作良好 */
(() => {})()
;(() => {})()
}
totalRate += percent

View File

@ -1,5 +1,5 @@
<template>
<div style="height: calc(100% - 36px); width: 100%;">
<div style="height: calc(100% - 36px); width: 100%; position: relative;">
<div :id="id" ref="techy-line-chart" class="techy-chart" />
</div>
</template>
@ -35,14 +35,15 @@ export default {
option: {
color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
grid: {
top: '20%',
top: '45%',
left: 0,
right: 12,
bottom: 0,
bottom: '5%',
containLabel: true
},
legend: {
width: '72%',
top: '20%',
right: 12,
itemWidth: 12,
itemHeight: 8,
@ -73,6 +74,8 @@ export default {
yAxis: {
type: 'value',
name: '成品率',
min: 'dataMin',
splitNumber: 2,
nameTextStyle: {
color: '#fffc',
align: 'right',
@ -95,11 +98,10 @@ export default {
},
series: [
{
name: '产线1',
name: 'A',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
@ -121,14 +123,19 @@ export default {
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
.map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
},
{
name: '产线2',
name: 'B',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
@ -150,95 +157,98 @@ export default {
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线3',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FF734566' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线4',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#9452FF66' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
},
{
name: '产线5',
type: 'line',
symbol: 'none',
areaStyle: {
// color: 'rgba(50,145,152,0.5)'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#6A6E8766' // 0%
},
{
offset: 1,
color: 'transparent' // 100%
}
],
global: false // false
}
},
data: Array(12)
.fill(0)
.map(_ => Math.floor(Math.random() * 100))
.map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
}
// {
// name: '线3',
// type: 'line',
// symbol: 'none',
// areaStyle: {
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#FF734566' // 0%
// },
// {
// offset: 1,
// color: 'transparent' // 100%
// }
// ],
// global: false // false
// }
// },
// data: Array(12)
// .fill(0)
// .map(_ => Math.floor(Math.random() * 100))
// },
// {
// name: '线4',
// type: 'line',
// symbol: 'none',
// areaStyle: {
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#9452FF66' // 0%
// },
// {
// offset: 1,
// color: 'transparent' // 100%
// }
// ],
// global: false // false
// }
// },
// data: Array(12)
// .fill(0)
// .map(_ => Math.floor(Math.random() * 100))
// },
// {
// name: '线5',
// type: 'line',
// symbol: 'none',
// areaStyle: {
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#6A6E8766' // 0%
// },
// {
// offset: 1,
// color: 'transparent' // 100%
// }
// ],
// global: false // false
// }
// },
// data: Array(12)
// .fill(0)
// .map(_ => Math.floor(Math.random() * 100))
// }
]
}
}
@ -258,7 +268,10 @@ export default {
</script>
<style scoped>
.techy-chart {
height: 100%;
/* background: #cccc; */
position: absolute;
top: -36%;
height: 150%;
width: 100%;
}

View File

@ -26,16 +26,16 @@ export default {
data() {
return {
datalist: [
{ name: '热端', value: 2332039120, color: '#0b88ff' },
{ name: '原片上片', value: 30, color: '#0bffa6' },
{ name: '上片', value: 27, color: '#e3ff0b' },
{ name: '磨边', value: 23, color: '#950bff' },
{ name: '原片磨边', value: 30, color: '#0bffa6' },
{ name: '原片', value: 30, color: '#0bffa6' },
{ name: '上片', value: 27, color: '#e3ff0b' },
{ name: '磨边镀膜膜', value: 23, color: '#950bff' },
{ name: '镀膜', value: 10, color: '#ff0bc2' },
{ name: '清晰', value: 66, color: '#ff7d0b' }
{ name: '热端', value: 2023233, color: '#0b88ff' },
{ name: '丝印', value: 2023233, color: '#0bffa6' },
{ name: '原片', value: 20, color: '#0bffa6' },
{ name: '钢化', value: 20, color: '#e3ff0b' },
{ name: '上片磨边', value: 20, color: '#e3ff0b' },
{ name: '下片铺纸', value: 202324, color: '#950bff' },
{ name: '镀膜', value: 20, color: '#950bff' },
{ name: '物流仓储', value: 202324, color: '#ff7d0b' },
{ name: '清洗', value: 20, color: '#0bffa6' },
{ name: '包装', value: 2, color: '#ff0bc2' }
]
}
},
@ -55,6 +55,7 @@ export default {
grid-auto-rows: min-content;
gap: calc(4px * var(--beilv)) calc(6px * var(--beilv));
justify-content: end;
align-content: center;
}
.analysis-item {

View File

@ -1,5 +1,5 @@
<template>
<techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)">
<techy-box style="width: 100%; height: calc(100% - 36px);">
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
<new-bar
@ -24,116 +24,16 @@
</template>
<script>
import echarts from 'echarts'
import TechyBox from './TechyBox.vue'
import newBar from './newBar.vue'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'RealtimeProductionHorizontalBarChart',
components: { TechyBox, newBar },
mixins: [resize],
props: {
id: {
type: String,
default: 'default-linechart-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
props: {},
data() {
return {
chart: null,
option: {
color: ['#FF7345', '#52FFF1', '#6A6E87', '#9452FFA6'],
grid: {
top: 0,
left: 0,
right: '5%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.001],
axisTick: {
show: false
},
axisLabel: {
fontSize: 8
// rotate: 10
},
axisLine: {
show: false,
lineStyle: {
color: '#fffa'
}
},
splitLine: {
lineStyle: {
color: '#fff3'
}
}
},
yAxis: {
type: 'category',
data: ['产线1', '产线2', '产线3', '产线4', '产线5', '产线6'],
axisLine: {
show: false
},
axisLabel: {
fontSize: 10,
color: '#fffa'
},
axisTick: { show: false },
splitLine: {
lineStyle: {
color: '#fffa'
}
}
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 5,
data: Array(6)
.fill(0)
.map(value => Math.floor(Math.random() * 1000))
},
{
name: '2012',
type: 'bar',
barWidth: 5,
data: Array(6)
.fill(0)
.map(value => Math.floor(Math.random() * 1000))
}
]
}
}
},
mounted() {
this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
return {}
}
}
</script>
<style scoped>

View File

@ -12,7 +12,9 @@
<span class="quality-analysis-bar__name">
{{ name }}
</span>
<span class="quality-analysis-bar__amount" :title="'数量:' + amount">{{ amount | amountFilter }}</span>
<span class="quality-analysis-bar__amount" :title="'数量:' + amount">
{{ amount | amountFilter }}
</span>
</div>
</template>
@ -22,7 +24,7 @@ export default {
filters: {
amountFilter: val => {
const sVal = val.toString()
return sVal.length > 7 ? sVal.slice(0, 6) + '...' : sVal
return sVal.length > 9 ? sVal.slice(0, 8) + '...' : sVal
}
},
props: {
@ -97,17 +99,17 @@ export default {
}
.block-green-5 {
background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.65));
background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.75));
/* margin-left: 4px; */
}
.block-green-4 {
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.65), hsla(181, 53%, 44%, 0.4));
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.75), hsla(181, 53%, 44%, 0.44));
}
.block-green-3 {
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.4), hsla(181, 53%, 44%, 0.2));
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.44), hsla(181, 53%, 44%, 0.15));
}
.block-green-2 {
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0));
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.15), hsla(181, 53%, 44%, 0));
}
.block-green-1 {
/* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
@ -187,10 +189,10 @@ export default {
color: rgba(255, 255, 255, 0.725);
display: inline-block;
/* min-width: 35%; */
width: 35%;
width: 45%;
text-align: left;
padding: calc(3px * var(--beilv)) 0;
font-size: calc(14px * var(--beilv));;
line-height: calc(12px * var(--beilv));;
font-size: calc(14px * var(--beilv));
line-height: calc(12px * var(--beilv));
}
</style>

View File

@ -200,11 +200,11 @@ export default {
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e90;
background-color: #0e203ecc;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #20376090;
background-color: #213961cc;
}
</style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 285 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 491 KiB

View File

@ -89,8 +89,8 @@ export default {
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
? '#31a2ff'
: '#fff9',
show: true,
offset: [-12, 10],
position: 'top',
@ -113,6 +113,7 @@ export default {
name: this.dataList[1].name,
type: 'bar',
barWidth: 20,
yAxisIndex: 1,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
@ -124,6 +125,7 @@ export default {
{
//
name: this.dataList[1].name,
yAxisIndex: 1,
type: 'pictorialBar',
barWidth: 20,
symbol: 'circle',
@ -143,8 +145,8 @@ export default {
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
? '#31a2ff'
: '#fff9',
show: true,
offset: [12, 10],
position: 'top',
@ -154,6 +156,7 @@ export default {
{
//
name: this.dataList[1].name,
yAxisIndex: 1,
type: 'pictorialBar',
barWidth: 20,
symbol: 'circle',
@ -170,7 +173,6 @@ export default {
//
name: this.dataList[0].name,
type: 'bar',
// barWidth: 26,
barWidth: barWidth,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -191,7 +193,6 @@ export default {
//
name: this.dataList[0].name,
type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth,
symbol: 'circle',
symbolPosition: 'end',
@ -209,8 +210,8 @@ export default {
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
? '#31a2ff'
: '#fff9',
show: true,
offset: [0, 10],
position: 'top',
@ -222,7 +223,6 @@ export default {
//
name: this.dataList[0].name,
type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth,
symbol: 'circle',
symbolOffset: [0, '50%'],
@ -249,15 +249,16 @@ export default {
this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption({
grid: {
top: '16%',
left: '2%',
right: '2%',
top: '24%',
left: '8%',
right: '5%',
bottom: '3%',
containLabel: true
},
legend: {
itemWidth: 8,
itemHeight: 8,
top: '2%',
right: '2%',
textStyle: {
color: '#fff9'
@ -281,31 +282,68 @@ export default {
},
data: this.nameList
},
yAxis: {
axisLine: {
lineStyle: {
type: 'solid',
color: this.dataList[0].bottomColor,
// color: 'rgba(119, 255, 242, 0.6)', // 线
width: '1' // 线
}
yAxis: [
{
name: '产量/m²',
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'
},
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'
},
{
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
})
}
@ -354,10 +392,12 @@ export default {
left: calc(100vw/1920 * 48); */
/* bottom: calc(10% + 100vh/1920 * 28); */
bottom: 20px;
left: 9%;
left: 6%;
height: 30px;
width: 90%;
background: linear-gradient(to top, #49fbd789, transparent);
border-radius: 3px;
/* border: 1px solid #49fbd7; */
background: linear-gradient(to top, #49fbd789 5%, transparent);
transform: skew(-35deg);
z-index: 0;
}

View File

@ -1,8 +1,9 @@
<template>
<div id="v3d-outter" ref="v3d-outter">
<!-- <V3DApp @3d-loaded="handle3DLoaded" />
<div v-if="showPage" id="v3d-main-content"> -->
<div v-if="true" id="v3d-main-content">
<div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
<V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
<div v-if="showPage" id="v3d-main-content">
<!-- <div v-if="true" id="v3d-main-content"> -->
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
<section id="techy-body-part">
@ -19,31 +20,38 @@
</techy-container>
</div>
<div class="techy-body-part__middle">
<div class="techy-body-part__middle" v-if="currentEquipment">
<TechyBox>
<div class="techy-body-part__middle__inner">
<p>
<b>产线名称 :</b>
<span>A产线</span>
<span>{{ currentEquipment.pl }}</span>
</p>
<p>
<b>设备名称 :</b>
<span>清洗机</span>
<span>{{ currentEquipment.name }}</span>
</p>
<p>
<b>累计加工 :</b>
<span>20</span>
<span>{{ currentEquipment.amount }}</span>
</p>
<p>
<b>通信状态 :</b>
<span class="round-dot">运行中</span>
<span
class="round-dot"
:class="{
'danger-dot': currentEquipment.status === '故障',
'warning-dot': currentEquipment.status === '调试中'
}"
>
{{ currentEquipment.status }}
</span>
</p>
</div>
</TechyBox>
</div>
</div>
<div class="techy-body-part__right">
<div class="realtime">
<techy-container title="实时产量和能耗" icon="折角的菜单图标">
@ -73,7 +81,7 @@
</techy-container>
</div>
<div class="ft-monitor" style="flex: 1;">
<techy-container title="现场实时监控" icon="安全帽图标">
<techy-container title="现场实时监控" icon="安全帽图标" style="display: flex; flex-direction: column;">
<LeftContentMonitor />
</techy-container>
</div>
@ -110,6 +118,8 @@ import TechyBox from './components/TechyBox.vue'
import screenfull from 'screenfull'
import eqList from './v3dApp/data'
export default {
name: '',
components: {
@ -129,6 +139,8 @@ export default {
},
data() {
return {
eqId: null,
currentEquipment: null,
showPage: false,
toggleResize: 'toggle-1' // <=== no need to worry this
}
@ -153,6 +165,12 @@ export default {
},
handle3DLoaded() {
this.showPage = true
},
handle3DClick() {
this.eqId = document.getElementById('V3DData').rel
if (this.eqId) {
this.currentEquipment = eqList.find(item => item.id === this.eqId)
}
}
}
}
@ -349,4 +367,12 @@ export default {
background-color: rgb(82, 231, 82);
border-radius: calc(4px * var(--beilv));
}
.danger-dot::before {
background-color: #e71837;
}
.warning-dot::before {
background-color: #d6961f;
}
</style>

View File

@ -0,0 +1,73 @@
export default [
{ id: 'C1-0', pl: 'A', name: '上片', amount: 32, status: '生产中' },
{ id: 'C1-1', pl: 'A', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C1-2', pl: 'A', name: '磨边', amount: 32, status: '调试中' },
{ id: 'C1-3', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C1-4', pl: 'A', name: '打孔', amount: 32, status: '生产中' },
{ id: 'C1-5', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C1-6', pl: 'A', name: '丝印', amount: 32, status: '生产中' },
{ id: 'C1-7', pl: 'A', name: '固化', amount: 32, status: '生产中' },
{ id: 'C1-8', pl: 'A', name: '储片', amount: 32, status: '生产中' },
{ id: 'C1-9', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C1-10', pl: 'A', name: '下片', amount: 32, status: '生产中' },
{ id: 'C2-0', pl: 'B', name: '上片', amount: 32, status: '调试中' },
{ id: 'C2-1', pl: 'B', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C2-2', pl: 'B', name: '磨边', amount: 32, status: '调试中' },
{ id: 'C2-3', pl: 'B', name: '清洗', amount: 32, status: '调试中' },
{ id: 'C2-4', pl: 'B', name: '打孔', amount: 32, status: '调试中' },
{ id: 'C2-5', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C2-6', pl: 'B', name: '丝印', amount: 32, status: '生产中' },
{ id: 'C2-7', pl: 'B', name: '固化', amount: 32, status: '生产中' },
{ id: 'C2-8', pl: 'B', name: '储片', amount: 32, status: '生产中' },
{ id: 'C2-9', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C2-10', pl: 'B', name: '下片', amount: 32, status: '生产中' },
{ id: 'C3-0', pl: 'C', name: '上片', amount: 32, status: '生产中' },
{ id: 'C3-1', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C3-2', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C3-3', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C3-4', pl: 'C', name: '打孔', amount: 32, status: '生产中' },
{ id: 'C3-5', pl: 'C', name: '清洗', amount: 32, status: '故障' },
{ id: 'C3-6', pl: 'C', name: '丝印', amount: 32, status: '生产中' },
{ id: 'C3-7', pl: 'C', name: '固化', amount: 32, status: '生产中' },
{ id: 'C3-8', pl: 'C', name: '储片', amount: 32, status: '生产中' },
{ id: 'C3-9', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C3-10', pl: 'C', name: '下片', amount: 32, status: '生产中' },
{ id: 'C4-0', pl: 'D', name: '上片', amount: 32, status: '故障' },
{ id: 'C4-1', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C4-2', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C4-3', pl: 'D', name: '清洗', amount: 32, status: '故障' },
{ id: 'C4-4', pl: 'D', name: '打孔', amount: 32, status: '故障' },
{ id: 'C4-5', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C4-6', pl: 'D', name: '丝印', amount: 32, status: '生产中' },
{ id: 'C4-7', pl: 'D', name: '固化', amount: 32, status: '生产中' },
{ id: 'C4-8', pl: 'D', name: '储片', amount: 32, status: '生产中' },
{ id: 'C4-9', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C4-10', pl: 'D', name: '下片', amount: 32, status: '生产中' },
{ id: 'C5-0', pl: 'E', name: '上片', amount: 32, status: '生产中' },
{ id: 'C5-1', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C5-2', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C5-3', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C5-4', pl: 'E', name: '打孔', amount: 32, status: '生产中' },
{ id: 'C5-5', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C5-6', pl: 'E', name: '丝印', amount: 32, status: '生产中' },
{ id: 'C5-7', pl: 'E', name: '固化', amount: 32, status: '生产中' },
{ id: 'C5-8', pl: 'E', name: '储片', amount: 32, status: '生产中' },
{ id: 'C5-9', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
// { id: 'C5-10', pl: 'E', name: '下片', amount: 32, status: '生产中' },
{ id: 'C6-0', pl: 'F', name: '上片', amount: 32, status: '生产中' },
{ id: 'C6-1', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C6-2', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
{ id: 'C6-3', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C6-4', pl: 'F', name: '打孔', amount: 32, status: '生产中' },
{ id: 'C6-5', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
{ id: 'C6-6', pl: 'F', name: '丝印', amount: 32, status: '生产中' },
{ id: 'C6-7', pl: 'F', name: '固化', amount: 32, status: '故障' },
{ id: 'C6-8', pl: 'F', name: '储片', amount: 32, status: '故障' },
// { id: 'C6-9', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
// { id: 'C6-10', pl: 'F', name: '下片', amount: 32, status: '生产中' },
]

View File

@ -54,7 +54,7 @@
lineHeight: '18px',
fontSize: '0.85vw'
}"
>
>
各产线稼动率
</h2> -->
<span class="pl-jdl__title">各产线稼动率</span>
@ -96,19 +96,19 @@
<div class="techy-container__inner">
<div>
<TechyAnalysisHeader>突发性维护</TechyAnalysisHeader>
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
<TechyVerticalTable key="1" :table-props="suddenMaintainProps" :data-list="rightSideDatalist" />
</div>
<div>
<TechyAnalysisHeader>计划内保养</TechyAnalysisHeader>
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
<TechyVerticalTable key="2" :table-props="inPlanMaintainProps" :data-list="rightSideDatalist2" />
</div>
<div>
<TechyAnalysisHeader>防御性维护</TechyAnalysisHeader>
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
<TechyVerticalTable key="3" :table-props="defenceMaintainProps" :data-list="rightSideDatalist3" />
</div>
<div>
<TechyAnalysisHeader>点检工单</TechyAnalysisHeader>
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" />
<TechyVerticalTable key="4" :table-props="wwwOrderProps" :data-list="rightSideDatalist4" />
</div>
</div>
</techy-container>
@ -136,8 +136,14 @@ import {
equipmentAnalysisData,
sparepartsProps,
sparepartsDatalist,
rightSideProps,
rightSideDatalist
suddenMaintainProps,
inPlanMaintainProps,
defenceMaintainProps,
wwwOrderProps,
rightSideDatalist,
rightSideDatalist2,
rightSideDatalist3,
rightSideDatalist4
} from './mockData'
import { mapGetters } from 'vuex'
@ -171,8 +177,14 @@ export default {
equipmentAnalysisData,
sparepartsProps,
sparepartsDatalist,
rightSideProps,
rightSideDatalist
suddenMaintainProps,
inPlanMaintainProps,
defenceMaintainProps,
wwwOrderProps,
rightSideDatalist,
rightSideDatalist2,
rightSideDatalist3,
rightSideDatalist4
// refreshKey: 0
}
},
@ -268,13 +280,13 @@ export default {
.techy-container__inner {
display: flex;
flex-direction: column;
gap: calc(8px * var(--beilv));
height: calc(100% - 4vh);
gap: calc(32px * var(--beilv));
height: calc(100% - 3vh);
/* overflow-y: scroll; */
overflow-y: auto;
}
.techy-container__inner > div {
flex: 1 1;
flex: 0;
}
.row-1,
@ -346,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 {

View File

@ -14,16 +14,16 @@
<div class="flex items-center gap-8">
<span class="param-name">MTBR</span>
<div class="progress-bar grow">
<ProgreeBar :process="+mtbr * 100" :colors="['#2EC6B4', '#85F6E9']" />
<ProgreeBar :process="+mtbr" :max="30" :colors="['#2EC6B4', '#85F6E9']" />
</div>
<span class="param-value">{{ mtbr | noDecimalFilter }}%</span>
<span class="param-value">{{ mtbr }}min</span>
</div>
<div class="flex items-center gap-8">
<span class="param-name">MTBF</span>
<div class="progress-bar grow">
<ProgreeBar :process="+mtbf * 100" :colors="['#EB46A1', '#FF8BC3']" />
<ProgreeBar :process="+mtbf" :max="99999" :colors="['#EB46A1', '#FF8BC3']" />
</div>
<span class="param-value">{{ mtbf | noDecimalFilter }}%</span>
<span class="param-value">{{ mtbf }}h</span>
</div>
</div>
</TechyBox>
@ -39,6 +39,10 @@ const ProgreeBar = {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
colors: {
type: Array,
default: () => ['#1295FF', '#9DD5FF']
@ -68,7 +72,7 @@ const ProgreeBar = {
position: 'absolute',
left: 0,
top: 0,
width: this.process + '%',
width: this.process / this.max * 100 + '%',
height: '100%',
borderRadius: 'calc(8px * var(--beilv))',
background: `linear-gradient(to right, ${this.colors[0]}, ${this.colors[1]})`
@ -141,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 {

View File

@ -1,17 +1,29 @@
<template>
<div class="techy-analysis-header">
<span v-html="titleLeftSVG" />
<span class="techy-analysis-header__title">
<slot />
</span>
<span v-html="titleRightSVG" />
<template v-if="type === 'special'">
<div style="background: #cccc; width: 200px; height: 20px;"></div>
</template>
<template v-else>
<span
style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));"
v-html="titleLeftSVG"
/>
<span class="techy-analysis-header__title">
<slot />
</span>
<span
style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));"
v-html="titleRightSVG"
/>
</template>
</div>
</template>
<script>
const titleLeftSVG = `<svg
width="56px"
height="13px"
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@ -59,8 +71,8 @@ const titleLeftSVG = `<svg
</g>
</svg>`
const titleRightSVG = `<svg
width="56px"
height="13px"
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
@ -109,6 +121,12 @@ const titleRightSVG = `<svg
export default {
name: 'TechyAnalysisHeader',
props: {
type: {
type: String,
default: 'default-type'
}
},
data() {
return { titleLeftSVG, titleRightSVG }
}

View File

@ -126,14 +126,14 @@ export default {
}
.visual-base-table-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));;
height: calc(8px * var(--beilv));;
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));;
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
@ -200,12 +200,11 @@ export default {
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e;
/* background-color: #0e203e; */
background-color: #0e203ecc;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #203760;
background-color: #213961cc;
}
</style>

View File

@ -49,18 +49,21 @@ export default {
width: 100%;
white-space: nowrap;
display: flex;
justify-content: center;
/* justify-content: center; */
justify-content: stretch;
align-items: stretch;
margin-bottom: 1px;
}
.trow:not(:last-of-type) {
border-bottom: 1px solid #0d1728;
}
.thead,
.tbody {
/* min-width: calc(100vw / 1920 * 96); */
background-color: #20376080;
background-color: rgba(33, 57, 97, 0.8);
white-space: nowrap;
overflow: hidden;
margin-right: 1px;
text-align: left;
padding-left: calc(12px * var(--beilv));
padding-right: calc(12px * var(--beilv));
@ -70,16 +73,20 @@ export default {
}
.thead {
width: 25%;
min-width: 25%;
font-size: calc(14px * var(--beilv));
line-height: 1.8;
/* line-height: 1.8; */
line-height: 2.1;
flex: 0;
}
.tbody {
width: 24%;
color: rgba(255, 255, 255, 0.7);
min-width: 24%;
color: rgba(255, 255, 255, 0.8);
font-size: calc(12px * var(--beilv));
line-height: 2;
/* line-height: 2; */
line-height: 2.3;
flex: 1 0;
}
.tbody:last-child {

View File

@ -33,30 +33,36 @@ const PriorityComponent = {
}
export const equipmentExceptionProps = [
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 60 },
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 60 },
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 55 },
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
{ label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
{ label: '报修/发现人', prop: 'creator', align: 'center', width: 110 },
{ label: '报修/发现人', prop: 'creator', align: 'center', 'min-width': 60 },
{ label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 60 }
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 }
]
export const equipmentExceptionDatalist = [
{ 'eqName': 'A1一次固化机', 'pl': 'E线', 'content': '开化是专品直', 'creator': '郭娜', 'time': '1997-06-08 06:14:37', 'priority': 1 },
{ 'eqName': 'B1一次冷却机', 'pl': 'B线', 'content': '书记因地观同展土军信', 'creator': '薛洋', 'time': '2006-03-15 10:39:30', 'priority': 2 },
{ 'eqName': 'A1预热机', 'pl': 'D线', 'content': '说资把话', 'creator': '曾刚', 'time': '1985-01-29 23:21:53', 'priority': 3 },
{ 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 2 },
{ 'eqName': 'A2一次固化机', 'pl': 'C线', 'content': '向江比把设', 'creator': '夏敏', 'time': '1996-12-22 09:29:57', 'priority': 3 },
{ 'eqName': 'A2一次固化机', 'content': '统山数里们步在', 'creator': '龙洋', 'time': '1989-07-19 05:01:55', 'priority': 3 },
{ 'eqName': 'A钢化炉', 'content': '快制放产口快', 'creator': '金艳', 'time': '1987-02-25 18:45:17', 'priority': 4 },
{ 'eqName': 'A1预热机', 'pl': 'D线', 'content': '说资把话', 'creator': '曾刚', 'time': '1985-01-29 23:21:53', 'priority': 3 },
{ 'eqName': 'A钢化炉', 'content': '即压连识打', 'creator': '张杰', 'time': '1975-05-12 18:54:07', 'priority': 2 },
{ 'eqName': 'A2一次固化机', 'pl': 'C线', 'content': '向江比把设', 'creator': '夏敏', 'time': '1996-12-22 09:29:57', 'priority': 3 },
{ 'eqName': 'A2一次固化机', 'content': '统山数里们步在', 'creator': '龙洋', 'time': '1989-07-19 05:01:55', 'priority': 3 },
{ 'eqName': 'A钢化炉', 'content': '快制放产口快', 'creator': '金艳', 'time': '1987-02-25 18:45:17', 'priority': 4 },
{ 'eqName': 'A1一次固化机', 'content': '住指时化统高线', 'creator': '顾敏', 'time': '1982-05-09 15:28:29', 'priority': 1 },
{ 'eqName': 'B1二次镀膜机', 'pl': 'B线', 'content': '命些种保较会', 'creator': '罗秀英', 'time': '1986-04-02 07:40:03', 'priority': 2 },
{ 'pl': 'B线', 'content': '增元少号安场明去在亲', 'creator': '于丽', 'time': '2004-08-11 11:10:57', 'priority': 4 }]
{ "eqName": "冷却", "pl": "A", "content": "路因同义价带本知生联矿列。", "creator": "马磊", "time": "2021-04-15 22:00:34", "priority": 3 },
{ "eqName": "固化", "pl": "B", "content": "将海构组过重开每活原总价着。", "creator": "贺刚", "time": "2021-03-15 06:30:01", "priority": 2 },
{ "eqName": "固化", "pl": "B", "content": "形管始会回从观且明确意主照根受步究。", "creator": "冯丽", "time": "2020-11-21 07:09:16", "priority": 2 },
{ "eqName": "磨边", "pl": "A", "content": "己由九保先造线后还单省于手。", "creator": "梁秀兰", "time": "2020-03-21 08:21:36", "priority": 3 },
{ "eqName": "一镀", "pl": "B", "content": "变西列场展越备线活酸被究他压建院家。", "creator": "卢敏", "time": "2022-10-23 04:45:00", "priority": 2 },
{ "eqName": "钢化", "pl": "A", "content": "解听共将取色照品起族西全日色。", "creator": "方勇", "time": "2020-12-11 06:41:06", "priority": 2 },
{ "eqName": "打孔", "pl": "B", "content": "际从定接花她变人周而导总流西更观史。", "creator": "赵静", "time": "2021-01-20 03:36:47", "priority": 2 },
{ "eqName": "下片", "pl": "A", "content": "厂积各克性型世型我地得圆与时速。", "creator": "姜洋", "time": "2021-11-30 07:56:26", "priority": 3 },
{ "eqName": "钢化", "pl": "A", "content": "证法作无群只放科可少头生广水。", "creator": "赖艳", "time": "2022-10-10 12:01:14", "priority": 1 },
{ "eqName": "磨边", "pl": "A", "content": "极满具究极力入矿电适花军系象。", "creator": "熊静", "time": "2021-01-27 03:24:33", "priority": 1 },
{ "eqName": "二镀", "pl": "B", "content": "科传军正战没题许青生面发用矿科。", "creator": "龚明", "time": "2022-02-28 16:26:11", "priority": 2 },
{ "eqName": "磨边", "pl": "A", "content": "入以品切中算极同三那性当。", "creator": "万娟", "time": "2022-08-23 08:44:41", "priority": 2 },
{ "eqName": "固化", "pl": "B", "content": "火音红建活先以它法对所重间量马斗将。", "creator": "徐丽", "time": "2021-07-30 21:15:10", "priority": 2 },
{ "eqName": "一镀", "pl": "A", "content": "位构命利整线两计统被约张以导理。", "creator": "叶娜", "time": "2022-05-05 22:45:13", "priority": 1 },
{ "eqName": "冷却", "pl": "A", "content": "东改近装商了整标革并该青外育放般体。", "creator": "田磊", "time": "2021-12-01 07:24:59", "priority": 2 },
{ "eqName": "打孔后清洗机", "pl": "A", "content": "查的分口眼约三委斯该的品通身式子听。", "creator": "邱平", "time": "2020-01-31 17:53:18", "priority": 2 },
{ "eqName": "下片", "pl": "B", "content": "连程复而前置很不团数行三西较响运。", "creator": "赵艳", "time": "2021-09-20 18:10:32", "priority": 2 },
{ "eqName": "冷却", "pl": "B", "content": "育进品石完立行按效安标真。", "creator": "江伟", "time": "2022-08-05 17:29:44", "priority": 2 },
{ "eqName": "钢后清洗机", "pl": "B", "content": "委且到示为位要强等住整县值八。", "creator": "周洋", "time": "2021-01-26 02:49:09", "priority": 3 },
{ "eqName": "上片", "pl": "A", "content": "报据深广一统南车步约果龙值区识车深。", "creator": "邱超", "time": "2021-12-21 20:41:53", "priority": 1 },
]
/** 设备异常报警 */
const LifeRemainComponent = {
@ -65,22 +71,29 @@ const LifeRemainComponent = {
injectData: Object
},
computed: {
remainLeftPercentage() {
return this.injectData.remain / 300
},
statusColor() {
const colors = [
'rgba(255,84,76,0.6)', // red < 0
'#FFBD43', // yellow < 10
'rgba(142,254,83,0.6)' // green >= 10
'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, } })
])
}
}
@ -93,26 +106,36 @@ export const equipmentAlarmProps = [
]
export const equipmentAlarmDatalist = [
{ 'eqName': 'A1预热机', 'eqCode': 'SB501464', 'pl': 'C线', 'content': '使决方不相动', 'priority': 3 },
{ 'eqName': 'A1一次固化机', 'eqCode': 'SB373383', 'pl': 'C线', 'content': '规问示况将料组美联', 'priority': 1 },
{ 'eqName': 'B1二次镀膜机', 'eqCode': 'SB788842', 'pl': 'D线', 'content': '了进改京人表无当市手', 'priority': 2 },
{ 'eqName': 'A1预热机', 'eqCode': 'SB743966', 'pl': 'D线', 'content': '经府极元算进', 'priority': 2 },
{ 'eqName': 'B1一次冷却机', 'eqCode': 'SB138810', 'pl': 'E线', 'content': '代利值才之', 'priority': 1 },
{ 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
{ 'eqName': 'B1二次镀膜机', 'eqCode': 'SB788842', 'pl': 'D线', 'content': '了进改京人表无当市手', 'priority': 2 },
{ 'eqName': 'A1预热机', 'eqCode': 'SB743966', 'pl': 'D线', 'content': '经府极元算进', 'priority': 2 },
{ 'eqName': 'B1一次冷却机', 'eqCode': 'SB138810', 'pl': 'E线', 'content': '代利值才之', 'priority': 1 },
{ 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
{
'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 4
"pl": "B", "eqName": "丝印", "eqCode": "B5SP20200109025453", "content": "常下命般里究千么间龙该海战据运更。", "priority": 3
},
{ 'eqName': 'A2一次冷却机', 'eqCode': 'SB861428', 'pl': 'D线', 'content': '还总速活直', 'priority': 3 },
{ "pl": "A", "eqName": "下片", "eqCode": "A2UL20210605043851", "content": "而至收选查万众家除候包要意集。", "priority": 2 },
{ "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200328154356", "content": "石十求四指么放与程到置身技红。", "priority": 1 },
{ "pl": "B", "eqName": "一镀", "eqCode": "B5FC20220307070115", "content": "即计报做切除听见济共金然维走。", "priority": 2 },
{ "pl": "B", "eqName": "固化", "eqCode": "B7CO20190927110003", "content": "应其得候解北运样价可强先们速。", "priority": 2 },
{
'eqName': 'B1一次冷却机', 'eqCode': 'SB88566', 'content': '么中相育成他', 'priority': 4
"pl": "A", "eqName": "打孔后清洗机", "eqCode": "A3CAP20200727075125", "content": "员因江单话况质己家小展矿指到之组她。", "priority": 3
},
{ 'eqName': 'A2一次固化机', 'eqCode': 'SB955674', 'pl': 'E线', 'content': '并来水报克见克代', 'priority': 2 },
{ 'eqName': 'A1预热机', 'eqCode': 'SB415026', 'pl': 'C线', 'content': '元动增断量争', 'priority': 1 },
{ 'eqName': 'A钢化炉', 'eqCode': 'SB19064', 'pl': 'D线', 'content': '很这置合它里革民', 'priority': 4 }
{ "pl": "A", "eqName": "磨边", "eqCode": "A7ED20200512213432", "content": "观长因带至成为也越效飞约况面的。", "priority": 3 },
{
"pl": "A", "eqName": "固化", "eqCode": "A4CO20220608145053", "content": "回状边及族值强第手听存派治严农象江。", "priority": 2
},
{ "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200526045602", "content": "采料这百他打体拉素但即面之。", "priority": 1 },
{
"pl": "B", "eqName": "打孔", "eqCode": "B6LP20220326162041", "content": "列保己问向九青保自济习后长而类月段斗。", "priority": 2
},
{ "pl": "A", "eqName": "磨边", "eqCode": "A4ED20200325081934", "content": "产矿身断通者和意层价前就知头。", "priority": 2 },
{
"pl": "B", "eqName": "预热", "eqCode": "B1PR20201220183649", "content": "志收一支习于何况支于自原地书飞感。", "priority": 2
},
{ "pl": "A", "eqName": "二镀", "eqCode": "A3SC20220414054819", "content": "义点做产往新以速结工情最六素难强干。", "priority": 2 },
{ "pl": "A", "eqName": "固化", "eqCode": "A8CO20200704010549", "content": "例强起取南然任都来因山该收次代相。", "priority": 2 },
{ "pl": "B", "eqName": "预热", "eqCode": "B1PR20200323134700", "content": "消选们度周料革理观构平活组事件。", "priority": 3 },
{ "pl": "A", "eqName": "打孔", "eqCode": "A1LP20200513020427", "content": "华家是可路议自商取半也五。", "priority": 1 },
{ "pl": "A", "eqName": "钢化", "eqCode": "A7TF20210928172616", "content": "点量都酸较此结同去写群论被千。", "priority": 2 },
{ "pl": "A", "eqName": "二镀", "eqCode": "A5SC20210104132647", "content": "切提个水铁外步油好连身相争外群儿此。", "priority": 1 },
{ "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A4CAE20210225140150", "content": "学七直以半去江内后上知往值质值。", "priority": 1 },
{ "pl": "B", "eqName": "打孔后清洗机", "eqCode": "B6CAP20200831083210", "content": "活小着许今取图国步成流海分就适转院容。", "priority": 2 },
]
/** 设备分析 */
@ -126,41 +149,34 @@ export const OEE_PER_LINE = {
}
export const equipmentAnalysisData = [
{ 'name': '冷端下片单元', 'oee': '0.14', 'mtbr': '0.60', 'mtbf': '0.32' },
{ 'name': '磨边单元', 'oee': '0.51', 'mtbr': '0.85', 'mtbf': '0.22' },
{ 'name': '丝印', 'oee': '0.75', 'mtbr': '0.92', 'mtbf': '0.93' },
{ 'name': '上片机器人', 'oee': '0.89', 'mtbr': '0.25', 'mtbf': '0.26' },
{ 'name': '激光打孔', 'oee': '0.05', 'mtbr': '0.59', 'mtbf': '0.15' },
{ 'name': '镀膜', 'oee': '0.55', 'mtbr': '0.85', 'mtbf': '0.65' }
{ 'name': '冷端下片单元', "oee": 0.62, "mtbr": 25, "mtbf": 54875 },
{ 'name': '磨边单元', "oee": 0.789, "mtbr": 25, "mtbf": 61323 },
{ 'name': '丝印', "oee": 0.83, "mtbr": 19, "mtbf": 89653 },
{ 'name': '上片机器人', "oee": 0.66, "mtbr": 30, "mtbf": 71839 },
{ 'name': '激光打孔', "oee": 0.71, "mtbr": 11, "mtbf": 39362 },
{ 'name': '镀膜', "oee": 0.686, "mtbr": 25, "mtbf": 62901 },
]
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 },
]
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'
@ -198,24 +214,68 @@ const StatusComponent = {
},
render: function (h) {
return h('span', { style: { display: 'flex', /** justifyContent: 'center', */ alignItems: 'center', color: '#ffffffb3' } }, [
h('span', { style: { width: 'calc(16px * var(--beilv))', height: 'calc(16px * var(--beilv))', background: `url(${this.statusColor}) no-repeat`, backgroundPosition: '20%', backgroundSize: '100%', marginRight: 'calc(8px * var(--beilv))' } }, ''),
h('span', { style: { width: 'calc(16px * var(--beilv))', height: 'calc(16px * var(--beilv))', background: `url(${this.statusColor}) no-repeat`, backgroundPosition: '20%', backgroundSize: '100%', marginRight: 'calc(4px * var(--beilv))' } }, ''),
h('span', this.statusText)
])
}
}
export const rightSideProps = [
// 突发性维护
export const suddenMaintainProps = [
{ prop: 'orderId', label: '工单编号' },
{ prop: 'pl', label: '产线名称' },
{ prop: 'time', label: '时间' },
{ prop: 'eq', label: '设备名称' },
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent },
{ prop: 'charger', label: '执行人' },
{ prop: 'team', label: '班组' },
{ prop: 'duration', label: '时长' }
]
export const rightSideDatalist = [
{ 'orderId': 'OD_3719', 'eq': 'A2一次固化机', 'pl': 'E线', 'status': 1, 'charger': '任洋', 'duration': 5 },
{ 'orderId': 'OD_6564', 'eq': 'B1二次镀膜机', 'pl': 'D线', 'status': 1, 'charger': '廖丽', 'duration': 6 },
{ 'orderId': 'OD_125', 'eq': 'A钢化炉', 'pl': 'E线', 'status': 3, 'charger': '赖秀兰', 'duration': 2 }
// { "orderId": "OD_7103", "pl": "C线", "status": 3, "charger": "邱伟", "duration": 7 },
// 计划内保养
export const inPlanMaintainProps = [
{ prop: 'orderId', label: '工单编号' },
{ prop: 'pl', label: '产线名称' },
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent },
{ prop: 'team', label: '班组' },
{ prop: 'duration', label: '时长' }
]
// 防御性维护
export const defenceMaintainProps = [
{ prop: 'orderId', label: '工单编号' },
{ prop: 'eq', label: '设备名称' },
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent },
{ prop: 'team', label: '班组' },
{ prop: 'duration', label: '时长' }
]
// 点检工单
export const wwwOrderProps = [
{ prop: 'orderId', label: '工单编号' },
{ prop: 'pl', label: '产线名称' },
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent },
{ prop: 'team', label: '班组' },
{ prop: 'time', label: '时间' }
]
export const rightSideDatalist = [
{ "orderId": "WOD20200807030135", "time": "2021-02-12 14:08:04", "eq": "磨边", "status": 3, "team": "白班", "duration": "26min" },
{ "orderId": "WOD20200413103728", "time": "2020-11-26 20:11:39", "eq": "固化", "status": 1, "team": "夜班", "duration": "24min" },
{ "orderId": "WOD20210217143647", "time": "2021-08-15 18:48:40", "eq": "预热", "status": 2, "team": "白班", "duration": "27min" },
]
export const rightSideDatalist2 = [
{ "orderId": "WOD20220403013343", "pl": "A", "status": 3, "team": "白班", "duration": "24min" },
{ "orderId": "WOD20211026022742", "pl": "A", "status": 2, "team": "夜班", "duration": "28min" },
{ "orderId": "WOD20210902180855", "pl": "A", "status": 2, "team": "夜班", "duration": "23min" },
]
export const rightSideDatalist3 = [
{ "orderId": "WOD20210829073921", "eq": "钢后清洗机", "status": 2, "team": "白班", "duration": "29min" },
{ "orderId": "WOD20220429180823", "eq": "丝印", "status": 2, "team": "夜班", "duration": "26min" },
{ "orderId": "WOD20220915050149", "eq": "磨边后清洗机", "status": 3, "team": "白班", "duration": "21min" },
]
export const rightSideDatalist4 = [
{ "orderId": "WOD20210522165229", "pl": "A", "status": 2, "team": "夜班", "time": "2021-12-17 13:31:24" },
{ "orderId": "WOD20211205183921", "pl": "B", "status": 1, "team": "白班", "time": "2022-06-27 10:52:19" },
{ "orderId": "WOD20210114183705", "pl": "A", "status": 1, "team": "夜班", "time": "2022-11-22 02:59:50" },
]

View File

@ -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"
@ -38,67 +38,116 @@
<!-- 第一行 -->
<div class="quality-analysis__body__row-1">
<!-- 第一列 -->
<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]
}
]"
/>
<div class="flex gap-16">
<div class="grow" style="max-width: 24vw;">
<techy-box class="" style="padding: calc(8px * var(--beilv));">
<techy-analysis-header type="special">产线缺陷日对比</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]
}
]"
/>
<div class="grow" style="max-width: 24vw;">
<techy-box class="" style="padding: calc(8px * var(--beilv));">
<techy-analysis-header type="special">产线缺陷月对比</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>
<!-- 第二列 -->
<div class="grow-6 flex gap-16">
<div class="grow flex gap-16">
<div class="width-222">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>产线缺陷分析</techy-analysis-header>
<pl-fault-analysis-pie-chart />
<techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
<div style="position: absolute; top: 0; left:0; width: 100%; height: 100%;">
<span
style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(16px * var(--beilv));"
>
单位: 千片
</span>
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
</div>
<div class="pl-select">
<span
:class="{ 'pl-select__active': plMode === 'a' }"
@click="
plMode = 'a'
chosenDatalist = quexianDatalist[0]
"
>
A
</span>
<span
:class="{ 'pl-select__active': plMode === 'b' }"
@click="
plMode = 'b'
chosenDatalist = quexianDatalist[1]
"
>
B
</span>
</div>
<div class="date-select">
<span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'"></span>
<span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
<span
:class="{ 'date-select__active': dateMode === 'day' }"
@click="
dateMode = 'day'
chosenDatalist = quexianDatalist[2]
"
>
</span>
<span
:class="{ 'date-select__active': dateMode === 'month' }"
@click="
dateMode = 'month'
chosenDatalist = quexianDatalist[3]
"
>
</span>
</div>
@ -107,10 +156,26 @@
<div class="grow">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>产品成品率</techy-analysis-header>
<new-line-stack />
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<new-line-stack :data-update-token="dataUpdateToken" />
</div>
<div class="date-select">
<span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'"></span>
<span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'">
<span
:class="{ 'date-select__active': dateMode2 === 'day' }"
@click="
dateMode2 = 'day'
dataUpdateToken = '' + Math.random()
"
>
</span>
<span
:class="{ 'date-select__active': dateMode2 === 'month' }"
@click="
dateMode2 = 'month'
dataUpdateToken = '' + Math.random()
"
>
</span>
</div>
@ -123,19 +188,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"
@ -147,10 +200,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"
@ -159,14 +224,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>
@ -209,7 +274,44 @@ export default {
NewLineStack
},
data() {
const quexianDatalist = [
[
{ 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: 4.17, name: '破片' },
{ value: 3.6, name: '崩边' },
{ value: 4, name: '脏污' },
{ value: 2.2, name: '划擦伤' },
{ value: 0.2, name: '崩孔' },
{ value: 1.9, name: '其他' }
],
[
{ value: 3.33, name: '破片' },
{ value: 3, name: '崩边' },
{ value: 4.3, name: '脏污' },
{ value: 2.1, name: '划擦伤' },
{ value: 1, name: '崩孔' },
{ value: 1.8, name: '其他' }
],
[
{ value: 2.7, name: '破片' },
{ value: 1.56, name: '崩边' },
{ value: 2.3, name: '脏污' },
{ value: 1.2, name: '划擦伤' },
{ value: 0.23, name: '崩孔' },
{ value: 2, name: '其他' }
]
]
return {
dataUpdateToken: 'xx-token',
plMode: 'a',
dateMode: 'month',
dateMode2: 'month',
qualityTableProps,
@ -217,17 +319,55 @@ 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]
}
},
computed: {
@ -349,7 +489,8 @@ export default {
.quality-analysis__body__row-1 {
height: calc(216px * var(--beilv));
overflow: hidden;
/* overflow: hidden; */
overflow: initial;
display: flex;
gap: calc(16px * var(--beilv));
}
@ -409,16 +550,23 @@ export default {
gap: calc(16px * var(--beilv));
}
.pl-select,
.date-select {
position: absolute;
top: calc(16px * var(--beilv));
right: calc(10px * var(--beilv));
right: calc(22px * var(--beilv));
border-radius: calc(2px * var(--beilv));
overflow: hidden;
display: flex;
cursor: pointer;
}
.pl-select {
right: unset;
left: calc(10px * var(--beilv));
}
.pl-select span,
.date-select span {
display: inline-block;
width: calc(40px * var(--beilv));
@ -429,6 +577,7 @@ export default {
background-color: #31878c94;
}
.pl-select span.pl-select__active,
.date-select span.date-select__active {
background-color: #42bbb7;
}

View File

@ -1,110 +1,237 @@
<template>
<div class="techy-analysis-header">
<span class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
<template v-if="type === 'special'">
<div
style="background: #ccc0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
>
<title>left</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份"
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
<div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>
<div style="flex: 1; white-space: nowrap; overflow: hidden;">
<span class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>left</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份"
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
<span class="techy-analysis-header__title">
<slot />
</span>
<span class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>right</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份-2"
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
</div>
<div class="legend" style="background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));">
<div class="legend-item pla" style="margin-right: calc(8px * var(--beilv));">产线A</div>
<div class="legend-item plb">产线B</div>
</div>
</div>
</template>
<template v-else>
<span v-if="showTopIcon" class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>left</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份"
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
<span class="techy-analysis-header__title">
<slot />
</span>
<span class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>right</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份-2"
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</svg>
</span>
<span class="techy-analysis-header__title">
<slot />
</span>
<span v-if="showTopIcon" class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>right</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份-2"
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
</svg>
</span>
</template>
</div>
</template>
<script>
export default {
name: 'TechyAnalysisHeader',
props: {
type: {
type: String,
default: 'dafault-type'
},
showTopIcon: {
type: Boolean,
default: true
}
},
data() {
return {}
}
@ -126,6 +253,30 @@ export default {
.top-icon {
display: inline-block;
width: calc(56px * var(--beilv));
height: calc(13px * var(--beilv));
height: calc(12px * var(--beilv));
margin-bottom: calc(2px * var(--beilv));
}
.legend-item {
font-size: calc(10px * var(--beilv));
line-height: 1.5;
color: #dff1fe;
display: inline-block;
}
.legend-item::before {
content: '';
display: inline-block;
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #fffc;
margin-right: calc(8px * var(--beilv));
}
.pla::before {
background: linear-gradient(to top, #49fbd6, transparent);
}
.plb::before {
background: linear-gradient(to top, #49b2ff, transparent);
}
</style>

View File

@ -200,13 +200,13 @@ export default {
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e;
/* background-color: #0e203e90; */
/* background-color: #0e203e; */
background-color: #0e203ecc;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #203760;
/* background-color: #20376090; */
/* background-color: #203760; */
background-color: #213961cc;
}
</style>

View File

@ -13,6 +13,10 @@ export default {
id: {
type: String,
default: 'default-fault-analysis-id'
},
dataList: {
type: Array,
required: true
}
},
data() {
@ -37,10 +41,23 @@ export default {
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ color: '#DDB112', offset: 0 }, //
{ color: '#DDB112b0', offset: 0.2 },
{ color: '#FFFFFF00', offset: 1 }
],
global: false
},
{
type: 'linear',
x: 1,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#DDB11200', offset: 0.1 },
{ color: '#DDB112', offset: 1 } //
{ color: '#49FBD600', offset: 0.1 },
{ color: '#74DC85', offset: 1 } // 绿
],
global: false
},
@ -59,9 +76,9 @@ export default {
},
{
type: 'linear',
x: 1,
y: 1,
x2: 0,
x: 0,
y: 0.5,
x2: 1,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
@ -73,8 +90,8 @@ export default {
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y: 0.5,
x2: 1,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
@ -85,47 +102,39 @@ export default {
}
]
const demoData = [
{ value: 55, name: 'A' },
{ value: 33, name: 'B' },
{ value: 22, name: 'C' },
{ value: 11, name: 'D' },
{ value: 32, name: 'E' }
]
return {
chart: null,
// default configs
configs: {
title: {
textAlign: 'center',
left: '63%',
top: '35%',
text: '33039',
textVerticalAlign: 'middle',
left: '69%',
top: '46%',
text: '',
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: 'normal'
},
itemGap: 2,
subtext: '总数',
itemGap: 5,
subtext: '总数/片',
subtextStyle: {
color: '#fff',
fontSize: 12,
fontWeight: 'lighter'
fontSize: 12
}
},
legend: {
top: 0,
top: '12%',
bottom: 0,
left: -10,
left: 0,
orient: 'vertical',
icon: 'none',
itemGap: 5,
itemGap: 8,
itemWidth: 10,
formatter: function(name) {
// test data - dynamic
const testData = demoData
//
formatter: name => {
const testData = this.dataList
let pieLegendVale = {}
testData.filter((item, index) => {
@ -133,7 +142,7 @@ export default {
pieLegendVale = item
}
})
const color = ['c', 'd', 'e', 'f', 'g']
const color = ['c', 'd', 'h', 'e', 'f', 'g']
const arr = [
'{' + color[testData.findIndex(item => item.name === name)] + '|}',
'{b|' + pieLegendVale.name + '}',
@ -146,58 +155,51 @@ export default {
a: {
fontSize: 10,
color: 'rgba(255, 255, 255, 0.7)',
lineHeight: 16
lineHeight: 16,
width: 48,
align: 'left'
},
b: {
// verticalAlign: 'top',
// align: 'center',
width: 40,
align: 'left',
fontSize: 10,
color: 'rgba(255, 255, 255)'
},
c: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#FB418C'
// backgroundColor: '#1A99FF'
},
d: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#DDB112'
// backgroundColor: '#A691FF'
},
h: {
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#74DC85'
},
e: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#1A99FF'
// backgroundColor: '#FB418C'
},
f: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#A691FF'
// backgroundColor: '#49FBD6'
},
g: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#49FBD6'
// backgroundColor: '#DDB112'
}
}
}
@ -207,12 +209,12 @@ export default {
{
name: 'PieForm',
type: 'pie',
center: ['65%', '48%'],
radius: ['60%', '85%'],
center: ['70%', '56%'],
radius: ['45%', '65%'],
avoidLabelOverlap: true,
label: {
formatter: params => {
const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
const colorMap = ['first', 'second', 'sixth', 'third', 'fourth', 'fifth']
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
},
rich: {
@ -220,7 +222,8 @@ export default {
second: { color: '#DDB112', fontSize: 8 },
third: { color: '#1A99FF', fontSize: 8 },
fourth: { color: '#A691FF', fontSize: 8 },
fifth: { color: '#49FBD6', fontSize: 8 }
fifth: { color: '#49FBD6', fontSize: 8 },
sixth: { color: '#74DC85', fontSize: 8 }
}
},
labelLine: {
@ -234,7 +237,7 @@ export default {
const colorGradient = colors[dataIndex]
if (totalRate + percent < 25) {
/** 也许这里需要完善,但目前工作良好 */
(() => {})()
;(() => {})()
} else if (totalRate + percent < 50) {
colorGradient.x = 0
colorGradient.y = 0
@ -247,19 +250,28 @@ export default {
colorGradient.y2 = 0
} else if (totalRate + percent < 100) {
/** 也许这里需要完善,但目前工作良好 */
(() => {})()
;(() => {})()
}
totalRate += percent
return colorGradient
}
},
data: demoData
data: this.dataList
}
]
}
}
},
watch: {
dataList: function(val) {
if (val && Array.isArray(val) && val.length) {
this.applyChartOption(val)
}
}
},
mounted() {
window.addEventListener('resize', () => {
if (this.chart) {
@ -284,55 +296,61 @@ export default {
const beilv = document.documentElement.style.getPropertyValue('--beilv')
return beilv * baseSize
},
// calcRate(baseRate) {
// const beilv = document.documentElement.style.getPropertyValue('--beilv')
// return baseRate * beilv
// },
applyChartOption() {
const fs1 = this.calcFontsize(1 /** px*/)
const fs3 = this.calcFontsize(3 /** px*/)
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 fs16 = this.calcFontsize(16 /** px*/)
const rate10 = this.calcFontsize(10 /** % */)
const rate3 = this.calcFontsize(3 /** % */)
const fs12 = this.calcFontsize(12 /** px*/)
const fs13 = this.calcFontsize(13 /** px*/)
const fs18 = this.calcFontsize(18 /** px*/)
const fs20 = this.calcFontsize(20 /** px*/)
const legendTextFixWidth = this.calcFontsize(56 /** px*/)
const legnedTop = this.calcFontsize(64 /** px*/)
const legendTopRate = this.calcFontsize(30 /** % */)
this.configs.title.textStyle.fontSize = fs14
this.configs.title.subtextStyle.fontSize = fs10
this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
this.configs.title.textStyle.fontSize = fs20
this.configs.title.subtextStyle.fontSize = fs13
this.configs.legend.top = rate10 + '%'
this.configs.legend.left = rate3 + '%'
this.configs.legend.itemGap = fs5
this.configs.legend.itemWidth = fs10
// this.configs.legend.top = legendTopRate + '%'
this.configs.legend.top = legnedTop
this.configs.legend.left = 0 + '%'
this.configs.legend.itemGap = fs8
this.configs.legend.itemWidth = fs8
this.configs.legend.textStyle.rich.a.fontSize = fs10
this.configs.legend.textStyle.rich.a.lineHeight = fs10
this.configs.legend.textStyle.rich.b.fontSize = fs10
this.configs.legend.textStyle.rich.a.fontSize = fs12
this.configs.legend.textStyle.rich.a.lineHeight = fs12
this.configs.legend.textStyle.rich.a.width = legendTextFixWidth
this.configs.legend.textStyle.rich.b.fontSize = fs12
this.configs.legend.textStyle.rich.b.width = legendTextFixWidth
// this.configs.legend.textStyle.rich.b.lineHeight = fs16
this.configs.legend.textStyle.rich.c.width = fs10
this.configs.legend.textStyle.rich.c.height = fs10
this.configs.legend.textStyle.rich.c.width = fs8
this.configs.legend.textStyle.rich.c.height = fs8
this.configs.legend.textStyle.rich.c.borderRadius = fs5
this.configs.legend.textStyle.rich.d.width = fs10
this.configs.legend.textStyle.rich.d.height = fs10
this.configs.legend.textStyle.rich.d.width = fs8
this.configs.legend.textStyle.rich.d.height = fs8
this.configs.legend.textStyle.rich.d.borderRadius = fs5
this.configs.legend.textStyle.rich.e.width = fs10
this.configs.legend.textStyle.rich.e.height = fs10
this.configs.legend.textStyle.rich.e.width = fs8
this.configs.legend.textStyle.rich.e.height = fs8
this.configs.legend.textStyle.rich.e.borderRadius = fs5
this.configs.legend.textStyle.rich.f.width = fs10
this.configs.legend.textStyle.rich.f.height = fs10
this.configs.legend.textStyle.rich.f.width = fs8
this.configs.legend.textStyle.rich.f.height = fs8
this.configs.legend.textStyle.rich.f.borderRadius = fs5
this.configs.legend.textStyle.rich.g.width = fs10
this.configs.legend.textStyle.rich.g.height = fs10
this.configs.legend.textStyle.rich.g.width = fs8
this.configs.legend.textStyle.rich.g.height = fs8
this.configs.legend.textStyle.rich.g.borderRadius = fs5
this.configs.legend.textStyle.rich.h.width = fs8
this.configs.legend.textStyle.rich.h.height = fs8
this.configs.legend.textStyle.rich.h.borderRadius = fs5
this.configs.series[0].label.rich.first.fontSize = fs10
this.configs.series[0].label.rich.second.fontSize = fs10
this.configs.series[0].label.rich.third.fontSize = fs10
this.configs.series[0].label.rich.fourth.fontSize = fs10
this.configs.series[0].label.rich.fifth.fontSize = fs10
this.configs.series[0].label.rich.first.fontSize = fs12
this.configs.series[0].label.rich.second.fontSize = fs12
this.configs.series[0].label.rich.third.fontSize = fs12
this.configs.series[0].label.rich.fourth.fontSize = fs12
this.configs.series[0].label.rich.fifth.fontSize = fs12
this.configs.series[0].label.rich.sixth.fontSize = fs12
if (datalist) this.configs.series[0].data = datalist
this.chart.setOption(this.configs)
}
}
@ -341,9 +359,13 @@ export default {
<style scoped>
.chartContainer {
height: calc(100% - (36px * var(--beilv)));
position: relative;
/* height: calc(100% - (36px * var(--beilv))); */
/* position: relative; */
/* position: absolute;
top: 0;
left: 0; */
width: 100%;
height: 100%;
}
.chartContainer > div {

View File

@ -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,24 @@ 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: {
show: false,
itemWidth: 10,
itemHeight: 10,
selectedMode: false,
top: '7%',
right: '2%',
textStyle: {
color: '#fff9',
fontSize: 12
}
},
xAxis: {
type: 'category',
axisLine: {
@ -225,40 +270,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 +358,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;
}

View File

@ -1,5 +1,5 @@
<template>
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: 100%;" />
</template>
<script>
@ -9,7 +9,12 @@ import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'PlFaultAnalysisPieChart',
mixins: [resize],
props: {},
props: {
dataUpdateToken: {
type: String,
default: 'default-token'
}
},
data() {
return {
chart: null,
@ -17,6 +22,7 @@ export default {
color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
tooltip: {
trigger: 'axis',
extraCssText: 'width: 180px !important; ',
axisPointer: {
type: 'cross',
label: {
@ -24,14 +30,11 @@ export default {
}
}
},
// legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
// },
grid: {
top: '15%',
top: '25%',
left: '2%',
right: '2%',
bottom: '2%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis: [
@ -48,7 +51,7 @@ export default {
textStyle: {
color: 'rgba(255,255,255,1)' //
},
margin: 20
margin: 12
},
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
}
@ -57,9 +60,11 @@ export default {
{
name: '成品率',
type: 'value',
min: 'dataMin',
splitNumber: 4,
nameTextStyle: {
color: 'rgba(255,255,255,0.7)',
fontSize: 10,
fontSize: 12,
align: 'right'
},
axisLine: {
@ -73,6 +78,7 @@ export default {
show: false
},
axisLabel: {
formatter: '{value} %',
textStyle: {
color: 'rgba(255,255,255,0.5)' //
}
@ -114,7 +120,13 @@ export default {
emphasis: {
focus: 'series'
},
data: [11, 199, 140, 63, 185, 5, 78]
data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
},
{
name: '磨边机',
@ -145,7 +157,13 @@ export default {
emphasis: {
focus: 'series'
},
data: [151, 57, 31, 7, 77, 88, 119]
data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
},
{
name: '镀膜机',
@ -176,7 +194,13 @@ export default {
emphasis: {
focus: 'series'
},
data: [58, 3, 67, 100, 42, 96, 124]
data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
},
{
name: '包装纸',
@ -207,7 +231,13 @@ export default {
emphasis: {
focus: 'series'
},
data: [92, 88, 122, 169, 108, 130, 147]
data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
},
{
name: '丝印',
@ -242,12 +272,25 @@ export default {
emphasis: {
focus: 'series'
},
data: [44, 40, 118, 197, 123, 95, 96]
data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
}
]
}
}
},
watch: {
dataUpdateToken(val) {
this.refreshData()
}
},
mounted() {
window.addEventListener('resize', function() {
if (this.chart) {
@ -263,7 +306,20 @@ export default {
this.chart.resize()
})
},
methods: {}
methods: {
refreshData() {
this.configs.series.forEach(item => {
item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
})
if (this.chart) this.chart.setOption(this.configs)
}
}
}
</script>
@ -271,4 +327,8 @@ export default {
.chartContainer >>> div {
width: 100% !important;
}
.diy-linestack-tooltip {
color: red;
}
</style>

View File

@ -38,34 +38,35 @@ const PriorityComponent = {
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: '工序名称', prop: 'wsName', align: 'center', 'min-width': 55 },
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
{ label: '异常内容', align: 'center', prop: 'content', 'min-width': 50 },
{ label: '班组', prop: 'team', align: 'center', 'min-width': 45 },
{ label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
{ label: '优先级', 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': 2 },
{ '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': 2 },
{ 'wsName': '上片磨边', 'pl': 'A', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 3 },
{ 'wsName': '丝印', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 1 },
{ '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 }]
/** 质量异常报警 */
@ -104,32 +105,32 @@ const StatusComponent = {
}
export const qualityExceptionTableProps = [
{ label: '工序名称', prop: 'wsName', align: 'center', width: 120 },
{ label: '所属产线', prop: 'pl', align: 'center', width: 120 },
{ label: '异常内容', prop: 'content', align: 'center' },
{ label: '发现人', prop: 'creator', align: 'center', width: 100 },
{ label: '时间', prop: 'time', align: 'center' },
{ 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 }
{ label: '工序名称', prop: 'wsName', align: 'center', 'min-width': 55 },
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 50 },
{ label: '异常内容', prop: 'content', align: 'center', 'min-width': 50 },
{ label: '设备', prop: 'eq', align: 'center', 'min-width': 55 },
{ label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 },
]
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': 3 },
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透过率', 'time': '2022-11-18 07:20:35', 'priority': 1 },
{ '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': 3 },
{ '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': 3 },
{ '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 }]

View File

@ -142,4 +142,8 @@ export default {
.routes-area >>> .el-menu-item span {
}
*/
#app .hideSidebar .routes-area >>> .el-submenu>.el-submenu__title {
padding: 0 20px !important;
}
</style>

View File

@ -27,14 +27,18 @@
<ul class="report-item__list">
<li v-if="!item.quantity">
<span class="icon icon-no-reports" />
<span>暂无报表</span>
<span style="color: #909090;">暂无报表</span>
</li>
<template v-else>
<li v-for="n in item.quantity" :key="n">
<li v-for="n in item.reportNames" :key="n">
<span class="icon" />
<span>{{ n }}</span>
</li>
<!-- <li v-for="n in item.quantity" :key="n">
<span class="icon" />
<span>报表{{ n }}</span>
</li>
</li> -->
</template>
</ul>
</div>
@ -212,7 +216,21 @@ export default {
init() {
list({}).then(res => {
this.allNum = 0
this.sortList = res.data
this.sortList = res.data.map(item => {
if (item.name === '能源') {
return { ...item, reportNames: ['产线电量日能耗统计'] }
} else if (item.name === '订单') {
return { ...item, reportNames: ['订单历史记录', '在线订单进度'] }
} else if (item.name === '设备') {
return { ...item, reportNames: ['设备报警', '设备加工数量统计', '设备OEE'] }
} else if (item.name === '人员') {
return { ...item, reportNames: ['班组加工数量统计'] }
} else if (item.name === '产线') {
return { ...item, reportNames: ['产线日产量统计', '产线历史产量记录'] }
} else {
return item
}
})
res.data.forEach(item => {
this.allNum += item.quantity
})