lb #12
@ -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'
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -25,6 +25,7 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.left-content-monitoring {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 32px);
|
||||
display: flex;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<div class="content-part">
|
||||
<div class="row">
|
||||
<span class="name">纯 水</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">氧 气</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);
|
||||
}
|
||||
|
||||
@ -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,19 +52,46 @@ 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 {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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% 处的颜色
|
||||
.map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 80) {
|
||||
v = Math.floor(Math.random() * 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))
|
||||
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%;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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'
|
||||
return {}
|
||||
}
|
||||
},
|
||||
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: {}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 |
@ -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',
|
||||
@ -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',
|
||||
@ -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,7 +282,16 @@ export default {
|
||||
},
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
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',
|
||||
@ -290,9 +300,6 @@ export default {
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
@ -306,6 +313,37 @@ export default {
|
||||
},
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
73
src/views/3DOverview/v3dApp/data.js
Normal file
73
src/views/3DOverview/v3dApp/data.js
Normal 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: '生产中' },
|
||||
]
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -1,17 +1,29 @@
|
||||
<template>
|
||||
<div class="techy-analysis-header">
|
||||
<span v-html="titleLeftSVG" />
|
||||
<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 v-html="titleRightSVG" />
|
||||
<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 }
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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" },
|
||||
]
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
<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
|
||||
:xlabel-font-size="10"
|
||||
:xlabel-rotate="30"
|
||||
:name-list="[
|
||||
'擦划伤1',
|
||||
'擦划伤2',
|
||||
'擦划伤3',
|
||||
'擦划伤4',
|
||||
'擦划伤5',
|
||||
'擦划伤6',
|
||||
'擦划伤7',
|
||||
'擦划伤8',
|
||||
'擦划伤9',
|
||||
'擦划伤0',
|
||||
'擦划伤11',
|
||||
'擦划伤12'
|
||||
]"
|
||||
chart-name="fault-category"
|
||||
:data-list="[
|
||||
{
|
||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||
bottomColor: '#31A2FF',
|
||||
name: '库存',
|
||||
data: [32, 65, 65, 54, 40, 60, 64, 91, 55, 65, 37, 77]
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</techy-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']"
|
||||
chart-name="realtime-cost-production"
|
||||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
||||
:data-list="[
|
||||
{
|
||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||
bottomColor: '#49FBD6',
|
||||
name: '库存',
|
||||
data: [64, 91, 55, 65, 37, 77]
|
||||
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" 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;
|
||||
}
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<div class="techy-analysis-header">
|
||||
<template v-if="type === 'special'">
|
||||
<div
|
||||
style="background: #ccc0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
|
||||
>
|
||||
<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%"
|
||||
@ -100,11 +107,131 @@
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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,16 +270,25 @@ 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: {
|
||||
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',
|
||||
@ -243,9 +297,6 @@ export default {
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
@ -258,7 +309,38 @@ export default {
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 }]
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user