Reviewed-on: http://git.picaiba.com/mt-fe-group/11-mes-new/pulls/14pull/15/head
@@ -84,6 +84,15 @@ export default { | |||
left: 64, | |||
bottom: 28 | |||
}, | |||
tooltip: { | |||
show: true, | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'line', | |||
axis: 'x' | |||
}, | |||
extraCssText: 'width: 152px !important; height: 100px !important;' | |||
}, | |||
xAxis: [ | |||
{ | |||
type: 'category', | |||
@@ -121,10 +130,11 @@ export default { | |||
fontSize: 10 | |||
}, | |||
splitLine: { | |||
show: false | |||
// lineStyle: { | |||
// color: '#fff3' | |||
// } | |||
show: true, | |||
lineStyle: { | |||
color: '#fff1', | |||
type: 'dotted' | |||
} | |||
} | |||
}, | |||
{ | |||
@@ -148,10 +158,11 @@ export default { | |||
fontSize: 10 | |||
}, | |||
splitLine: { | |||
show: false | |||
// lineStyle: { | |||
// color: '#fff3' | |||
// } | |||
show: true, | |||
lineStyle: { | |||
color: '#fff1', | |||
type: 'dotted' | |||
} | |||
} | |||
}, | |||
{ | |||
@@ -168,8 +179,10 @@ export default { | |||
type: 'value', | |||
splitNumber: 3, | |||
splitLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#fff3' | |||
color: '#fff1', | |||
type: 'dotted' | |||
} | |||
}, | |||
axisLabel: { | |||
@@ -51,6 +51,15 @@ export default { | |||
bottom: 0, | |||
containLabel: true | |||
}, | |||
tooltip: { | |||
show: true, | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'line', | |||
axis: 'x' | |||
}, | |||
extraCssText: 'width: 152px !important; height: 100px !important;' | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
boundaryGap: false, | |||
@@ -89,8 +98,10 @@ export default { | |||
}, | |||
axisTick: { show: false }, | |||
splitLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#fff3' | |||
color: '#fff1', | |||
type: 'dotted' | |||
} | |||
} | |||
}, | |||
@@ -58,7 +58,7 @@ const tableProps = [ | |||
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 } | |||
] | |||
const tableData = [ | |||
{ eqName: '钢化', pl: 'A', priority: 4, checkContent: '表面检测光源和相机的卫生' }, | |||
{ eqName: '钢化', pl: 'A', priority: 1, checkContent: '表面检测光源和相机的卫生' }, | |||
{ eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' }, | |||
{ eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' }, | |||
{ eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' }, | |||
@@ -66,7 +66,7 @@ const tableData = [ | |||
{ 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: 1, checkContent: '辊道下方的碎玻璃清理' }, | |||
{ eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' }, | |||
{ eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' }, | |||
@@ -74,7 +74,7 @@ const tableData = [ | |||
{ 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: 'B', priority: 3, checkContent: '水冷机内水量充足并且清洁' }, | |||
{ eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' }, | |||
{ eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' }, | |||
{ eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' } | |||
@@ -130,7 +130,7 @@ export default { | |||
color: #fff9; | |||
border: 0; | |||
height: 100%; | |||
overflow-y: auto; | |||
/* overflow-y: auto; */ | |||
} | |||
.el-table-wrapper >>> .el-table th.is-leaf, | |||
@@ -67,7 +67,7 @@ | |||
</TechyBox> | |||
</div> | |||
<div style="min-height: calc(110px * var(--beilv)); flex: 1;"> | |||
<div style="min-height: calc(144px * var(--beilv)); flex: 1;"> | |||
<TechyBox class="dian-consume"> | |||
<div class="header-part"> | |||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" /> | |||
@@ -79,7 +79,7 @@ | |||
</TechyBox> | |||
</div> | |||
<div style="min-height: calc(110px * var(--beilv)); flex: 1;"> | |||
<div style="min-height: calc(144px * var(--beilv)); flex: 1;"> | |||
<TechyBox class="elec-consume"> | |||
<div class="header-part"> | |||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" /> | |||
@@ -153,6 +153,7 @@ export default { | |||
.header-part > span { | |||
color: #fffc; | |||
font-size: calc(12px * var(--beilv)); | |||
white-space: nowrap; | |||
} | |||
.content-part { | |||
@@ -60,13 +60,13 @@ const tableProps = [ | |||
] | |||
const tableData = [ | |||
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 4, duration: '30 min' }, | |||
{ eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 4, duration: '1 min' }, | |||
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 1, duration: '30 min' }, | |||
{ eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 3, 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: 'A', content: '检查每日不良是否存在误检', priority: 2, duration: '23 min' }, | |||
{ eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' }, | |||
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' }, | |||
{ | |||
@@ -78,8 +78,8 @@ const tableData = [ | |||
}, | |||
{ 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: 3, duration: '29 min' }, | |||
{ eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 1, 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' }, | |||
@@ -144,7 +144,7 @@ export default { | |||
color: #fff9; | |||
border: 0; | |||
height: 100%; | |||
overflow-y: auto; | |||
/* overflow-y: auto; */ | |||
} | |||
.el-table-wrapper >>> .el-table th.is-leaf, | |||
@@ -1,6 +1,11 @@ | |||
<template> | |||
<div class="right-content-quality-analysis"> | |||
<div :id="id" ref="fault-pie-chart" class="fault-pie-chart" /> | |||
<div | |||
:id="id" | |||
ref="fault-pie-chart" | |||
class="right-content-quality-analysis" | |||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" | |||
> | |||
<!-- <div :id="id" ref="fault-pie-chart" class="fault-pie-chart" /> --> | |||
</div> | |||
</template> | |||
@@ -101,8 +106,8 @@ export default { | |||
configs: { | |||
title: { | |||
textAlign: 'center', | |||
left: '63%', | |||
top: '35%', | |||
left: '64%', | |||
top: '48%', | |||
text: demoData.reduce((prev, curr) => prev + curr.value, 0), | |||
textStyle: { | |||
color: '#fff', | |||
@@ -117,10 +122,11 @@ export default { | |||
fontWeight: 'lighter' | |||
} | |||
}, | |||
legend: { | |||
top: 0, | |||
bottom: 0, | |||
left: -15, | |||
left: 0, | |||
orient: 'vertical', | |||
icon: 'none', | |||
itemGap: 8, | |||
@@ -204,8 +210,8 @@ export default { | |||
{ | |||
name: 'PieForm', | |||
type: 'pie', | |||
center: ['65%', '50%'], | |||
radius: ['60%', '80%'], | |||
center: ['65%', '60%'], | |||
radius: ['42%', '60%'], | |||
avoidLabelOverlap: true, | |||
label: { | |||
formatter: params => { | |||
@@ -287,19 +293,21 @@ export default { | |||
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 fs12 = this.calcFontsize(12 /** px*/) | |||
const fs16 = this.calcFontsize(16 /** px*/) | |||
const titleSize = this.calcFontsize(22 /** px*/) | |||
const subtitleSize = this.calcFontsize(14 /** px*/) | |||
this.configs.title.textStyle.fontSize = fs14 | |||
this.configs.title.subtextStyle.fontSize = fs10 | |||
this.configs.title.textStyle.fontSize = titleSize | |||
this.configs.title.subtextStyle.fontSize = subtitleSize | |||
this.configs.legend.top = '10%' | |||
this.configs.legend.itemGap = 0 | |||
this.configs.legend.top = '24%' | |||
this.configs.legend.itemGap = fs8 | |||
this.configs.legend.itemWidth = fs8 | |||
this.configs.legend.textStyle.rich.a.fontSize = fs10 | |||
this.configs.legend.textStyle.rich.a.fontSize = fs12 | |||
this.configs.legend.textStyle.rich.a.lineHeight = fs16 | |||
this.configs.legend.textStyle.rich.b.fontSize = fs10 | |||
this.configs.legend.textStyle.rich.b.fontSize = fs12 | |||
// this.configs.legend.textStyle.rich.b.lineHeight = fs16 | |||
this.configs.legend.textStyle.rich.c.width = fs8 | |||
this.configs.legend.textStyle.rich.c.height = fs8 | |||
@@ -317,11 +325,11 @@ export default { | |||
this.configs.legend.textStyle.rich.g.height = fs8 | |||
this.configs.legend.textStyle.rich.g.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.chart.setOption(this.configs) | |||
} | |||
@@ -330,9 +338,9 @@ export default { | |||
</script> | |||
<style scoped> | |||
.right-content-quality-analysis { | |||
/* .right-content-quality-analysis { | |||
height: calc(100% - 32px); | |||
} | |||
} */ | |||
.fault-pie-chart { | |||
height: 100%; | |||
@@ -1,7 +1,5 @@ | |||
<template> | |||
<div style="height: calc(100% - 36px); width: 100%; position: relative;"> | |||
<div :id="id" ref="techy-line-chart" class="techy-chart" /> | |||
</div> | |||
<div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " /> | |||
</template> | |||
<script> | |||
@@ -33,18 +31,26 @@ export default { | |||
return { | |||
chart: null, | |||
option: { | |||
color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'], | |||
color: ['#59CBE8', '#FF7345', '#E93CAC', '#9452FF', '#6A6E87', '#52FFF1'], | |||
grid: { | |||
top: '45%', | |||
left: 0, | |||
right: 12, | |||
bottom: '5%', | |||
top: '40%', | |||
left: '5%', | |||
right: '6%', | |||
bottom: '10%', | |||
containLabel: true | |||
}, | |||
tooltip: { | |||
show: true, | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'cross' | |||
}, | |||
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%' | |||
}, | |||
legend: { | |||
width: '72%', | |||
top: '20%', | |||
right: 12, | |||
right: '6%', | |||
itemWidth: 12, | |||
itemHeight: 8, | |||
textStyle: { | |||
@@ -62,7 +68,7 @@ export default { | |||
show: false | |||
}, | |||
axisLabel: { | |||
fontSize: 8, | |||
fontSize: 10, | |||
color: '#fffa' | |||
}, | |||
axisLine: { | |||
@@ -73,19 +79,20 @@ export default { | |||
}, | |||
yAxis: { | |||
type: 'value', | |||
name: '成品率', | |||
name: '成品率 ', | |||
min: 'dataMin', | |||
splitNumber: 2, | |||
splitNumber: 3, | |||
nameTextStyle: { | |||
color: '#fffc', | |||
align: 'right', | |||
fontSize: 8 | |||
verticalAlign: 'bottom', | |||
fontSize: 12 | |||
}, | |||
axisLine: { | |||
show: false | |||
}, | |||
axisLabel: { | |||
fontSize: 10, | |||
fontSize: 11, | |||
color: '#fffa', | |||
formatter: '{value} %' | |||
}, | |||
@@ -270,7 +277,7 @@ export default { | |||
.techy-chart { | |||
/* background: #cccc; */ | |||
position: absolute; | |||
top: -36%; | |||
height: 150%; | |||
width: 100%; | |||
} | |||
@@ -55,7 +55,7 @@ export default { | |||
grid-auto-rows: min-content; | |||
gap: calc(4px * var(--beilv)) calc(6px * var(--beilv)); | |||
justify-content: end; | |||
align-content: center; | |||
align-content: flex-start; | |||
} | |||
.analysis-item { | |||
@@ -1,43 +1,240 @@ | |||
<template> | |||
<techy-box style="width: 100%; height: calc(100% - 36px);"> | |||
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> --> | |||
<new-bar | |||
chart-name="realtime-cost-production" | |||
:name-list="['A', 'B', 'C', 'D', 'E', 'F']" | |||
:data-list="[ | |||
<!-- <techy-bar :extra-space-between-zero="16" :datainfo="[ | |||
{ | |||
topColor: 'rgba(59, 76, 118, 0.2)', | |||
bottomColor: '#49FBD6', | |||
name: '产量', | |||
data: [64, 91, 55, 65, 37, 77] | |||
list: [64, 91, 55, 65, 37, 77] | |||
}, | |||
{ | |||
topColor: 'rgba(59, 76, 118, 0.2)', | |||
bottomColor: '#31A2FF', | |||
name: '能耗', | |||
data: [32, 65, 65, 54, 37, 77] | |||
list: [32, 65, 65, 54, 37, 77] | |||
} | |||
]" | |||
/> | |||
</techy-box> | |||
]" /> --> | |||
<div class="techy-chart" ref="realtimeLineChart"></div> | |||
</template> | |||
<script> | |||
import TechyBox from './TechyBox.vue' | |||
import newBar from './newBar.vue' | |||
import echarts from 'echarts' | |||
import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
export default { | |||
name: 'RealtimeProductionHorizontalBarChart', | |||
components: { TechyBox, newBar }, | |||
props: {}, | |||
name: 'RealtimeLineChart', | |||
mixins: [resize], | |||
/** Fn.1: 保证全屏切换时也刷新图表 ,应该在每个父组件为flex:1的echarts组件里都加上,以确保能正确地伸缩 */ | |||
inject: ['resizeStatus'], | |||
/** End Fn.1 */ | |||
props: { | |||
id: { | |||
type: String, | |||
default: 'default-dian-id' | |||
}, | |||
title: { | |||
type: String, | |||
default: 'default-title' | |||
}, | |||
xData: { | |||
type: Array, | |||
default: () => [] | |||
}, | |||
seriesData: { | |||
type: Array, | |||
default: () => [] | |||
} | |||
}, | |||
data() { | |||
return {} | |||
} | |||
const colors = ['#1A99FF', '#F0D63C', '#E02094'] | |||
// 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].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].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].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] | |||
let dianya = data[2] | |||
return { | |||
chart: null, | |||
option: { | |||
color: colors, | |||
legend: { | |||
top: 28, | |||
right: 40, | |||
itemWidth: 10, | |||
itemHeight: 10, | |||
textStyle: { | |||
color: '#fff9', | |||
fontSize: 10 | |||
} | |||
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度'] | |||
}, | |||
grid: { | |||
top: 80, | |||
left: 88, | |||
right: 24, | |||
bottom: 32 | |||
}, | |||
tooltip: { | |||
show: true, | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'line', | |||
axis: 'x' | |||
}, | |||
extraCssText: 'width: 100px !important;' | |||
}, | |||
xAxis: [ | |||
{ | |||
type: 'category', | |||
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'], | |||
axisTick: { show: false }, | |||
axisLabel: { | |||
color: '#fff9' | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
color: '#fff3' | |||
} | |||
} | |||
} | |||
], | |||
yAxis: [ | |||
{ | |||
name: '能耗 ', | |||
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' }, | |||
type: 'value', | |||
splitNumber: 4, | |||
onZero: true, | |||
position: 'left', | |||
offset: 40, | |||
axisTick: { show: false }, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#5982B2', | |||
width: 1 | |||
} | |||
}, | |||
axisLabel: { | |||
color: '#fff9', | |||
fontSize: 10 | |||
}, | |||
splitLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#fff1', | |||
type: 'dotted' | |||
} | |||
} | |||
}, | |||
{ | |||
name: '产量 ', | |||
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' }, | |||
type: 'value', | |||
splitNumber: 4, | |||
axisTick: { show: false }, | |||
onZero: true, | |||
position: 'left', | |||
offset: 0, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#5982B2', | |||
width: 1 | |||
} | |||
}, | |||
axisLabel: { | |||
color: '#fff9', | |||
fontSize: 10 | |||
}, | |||
splitLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#fff1', | |||
type: 'dotted' | |||
} | |||
} | |||
} | |||
], | |||
series: [ | |||
{ | |||
name: '产线1', | |||
type: 'line', | |||
yAxisIndex: 0, | |||
// smooth: true, | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
data: dianliu, | |||
symbol: 'none' | |||
}, | |||
{ | |||
name: '产线2', | |||
type: 'line', | |||
yAxisIndex: 1, | |||
// smooth: true, | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
data: dianya, | |||
symbol: 'none' | |||
} | |||
] | |||
} | |||
} | |||
}, | |||
computed: { | |||
shouldResize() { | |||
return this.resizeStatus() | |||
} | |||
}, | |||
watch: { | |||
shouldResize(val, oldVal) { | |||
setTimeout(() => { | |||
this.chart.resize() | |||
}, 250) | |||
} | |||
}, | |||
mounted() { | |||
this.$nextTick(() => { | |||
if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart']) | |||
this.chart.setOption(this.option) | |||
}) | |||
}, | |||
beforeDestroy() { | |||
if (this.chart) this.chart.dispose() | |||
this.chart = null | |||
}, | |||
methods: {} | |||
} | |||
</script> | |||
<style scoped> | |||
.techy-chart { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
height: 100%; | |||
width: 100%; | |||
} | |||
@@ -0,0 +1,286 @@ | |||
<template> | |||
<div ref="techyBar" class="techy-bar"></div> | |||
</template> | |||
<script> | |||
import echarts from 'echarts' // echarts theme | |||
import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
import * as BottomPic from './bottom.png' | |||
export default { | |||
name: 'TechyBarFor3DPage', | |||
props: { | |||
datainfo: { | |||
type: Array, | |||
default: () => [ | |||
{ | |||
name: '产线A', | |||
list: [100, 102, 104, 105, 100, 117] | |||
}, | |||
{ | |||
name: '产线B', | |||
list: [110, 92, 124, 85, 100, 120] | |||
} | |||
] | |||
}, | |||
unitName: { | |||
type: String, | |||
default: '' | |||
}, | |||
extraSpaceBetweenZero: { | |||
type: Number, | |||
default: 25 | |||
} | |||
}, | |||
mixins: [resize], | |||
data() { | |||
const color_gradients = [ | |||
/** 蓝 */ | |||
{ | |||
direction: 'to top', | |||
from: '#49B2FF', // * 0.6 是底部颜色和顶部颜色 | |||
to: '#49B2FF00', | |||
topAndBottom: '#49B2FF9F' | |||
}, | |||
/** 绿 */ | |||
{ | |||
direction: 'to top', | |||
from: '#49FBD6', // * 0.6 是底部颜色和顶部颜色 | |||
to: '#49FBD600', | |||
topAndBottom: '#49FBD69F' | |||
} | |||
] | |||
let result = [] | |||
this.datainfo.map((pl, index) => { | |||
let topCircle = { | |||
__position: 'top', | |||
name: pl.name, | |||
barGap: '10%', | |||
barCategoryGap: '48%', | |||
type: 'pictorialBar', | |||
symbol: 'circle', | |||
symbolPosition: 'end', | |||
symbolOffset: ['25%', '-50%'], | |||
// symbolSize: ['100%', 6], | |||
symbolSize: ['200%', 6], | |||
data: pl.list, | |||
z: 10, | |||
itemStyle: { | |||
// color: color_gradients[index].topAndBottom | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 1, | |||
x2: 0, | |||
y2: 0, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: color_gradients[index].topAndBottom | |||
}, | |||
{ | |||
offset: 1, | |||
color: color_gradients[index].to | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
} | |||
} | |||
let bottomCircle = { | |||
__position: 'top', | |||
name: pl.name, | |||
barGap: '10%', | |||
barCategoryGap: '48%', | |||
type: 'pictorialBar', | |||
symbol: 'circle', | |||
symbolOffset: ['-25%', '50%'], | |||
symbolSize: ['200%', 6], | |||
data: pl.list, | |||
z: 10, | |||
itemStyle: { | |||
color: color_gradients[index].from | |||
} | |||
} | |||
let mainBar = { | |||
__position: 'main', | |||
type: 'bar', | |||
name: pl.name, | |||
// barWidth: 20, // 不需要设置 barWidth | |||
barGap: '10%', | |||
barCategoryGap: '48%', | |||
data: pl.list, | |||
z: 0, | |||
itemStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 1, | |||
x2: 0, | |||
y2: 0, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: color_gradients[index].from | |||
}, | |||
{ | |||
offset: 0.15, | |||
color: color_gradients[index].topAndBottom | |||
}, | |||
{ | |||
offset: 1, | |||
color: color_gradients[index].to | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
}, | |||
label: { | |||
show: true, | |||
position: 'top', | |||
color: '#fff8', | |||
fontSize: 8, | |||
offset: [0, 6] | |||
} | |||
} | |||
result.push(topCircle) | |||
result.push(mainBar) | |||
result.push(bottomCircle) | |||
}) | |||
return { | |||
BottomPic, | |||
width: 0, | |||
chart: null, | |||
option: { | |||
legend: { | |||
icon: 'rect', | |||
itemWidth: 8, | |||
itemHeight: 8, | |||
top: '2%', | |||
right: '10%', | |||
textStyle: { | |||
color: '#fff8' | |||
}, | |||
data: this.datainfo.map(item => item.name) | |||
}, | |||
grid: { | |||
top: 24, | |||
left: '8%', | |||
bottom: 24 | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
axisTick: { | |||
show: false | |||
}, | |||
axisLine: { | |||
onZero: false, | |||
show: false, | |||
lineStyle: {} | |||
}, | |||
axisLabel: { | |||
color: '#fff8', | |||
fontSize: 10 | |||
}, | |||
data: ['产线A', '产线B', '产线C', '产线D', '产线E', '产线F'] | |||
}, | |||
yAxis: { | |||
type: 'value', | |||
// min: -25, | |||
min: this.extraSpaceBetweenZero * -1, | |||
name: this.unitName, | |||
nameTextStyle: { | |||
color: '#fff8', | |||
fontSize: 8, | |||
verticalAlign: 'top', | |||
align: 'right' | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#31A2FF' | |||
} | |||
}, | |||
axisLabel: { | |||
color: '#fff8', | |||
fontSize: 10, | |||
/** y轴不从0开始,也可以用 xAxis 向下 offset 的方式模拟 **/ | |||
formatter: function(value, index) { | |||
if (value < 0) { | |||
return '' | |||
} | |||
return value | |||
} | |||
}, | |||
axisTick: { show: false }, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#569acd', | |||
type: 'dotted', | |||
opacity: 0.2 | |||
} | |||
} | |||
}, | |||
series: result, | |||
graphic: [ | |||
{ | |||
type: 'image', | |||
left: 0, | |||
bottom: 0, | |||
style: { | |||
image: 'image url', | |||
height: 0, | |||
width: 0 | |||
} | |||
} | |||
] | |||
} | |||
} | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', this.refreshOption) | |||
if (!this.chart) this.chart = echarts.init(this.$refs.techyBar) | |||
this.$nextTick(() => { | |||
this.updateOption(this.option) | |||
this.chart.setOption(this.option) | |||
}) | |||
}, | |||
methods: { | |||
updateOption(option) { | |||
// console.log('option', this.BottomPic.default) | |||
let width = this.$refs.techyBar.querySelector('div').clientWidth | |||
let height = this.$refs.techyBar.querySelector('div').clientHeight | |||
option.graphic[0].style.width = width * 0.88 | |||
option.graphic[0].style.height = height * 0.3 | |||
option.graphic[0].style.image = this.BottomPic.default | |||
option.graphic[0].left = '8%' | |||
option.graphic[0].bottom = 24 | |||
}, | |||
refreshOption() { | |||
this.updateOption(this.option) | |||
this.chart.setOption(this.option) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.techy-bar { | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.techy-bar >>> div { | |||
width: 100% !important; | |||
height: 100% !important; | |||
} | |||
</style> |
@@ -78,7 +78,7 @@ export default { | |||
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2; | |||
display: inline-block; | |||
position: relative; | |||
padding: calc(24px * var(--beilv)); | |||
padding: calc(20px * var(--beilv)); | |||
width: 100%; | |||
height: 100%; | |||
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15); | |||
@@ -3,8 +3,8 @@ | |||
<img class="logo-img" src="./logo.png" alt="cnbm" /> | |||
<span class="techy-header__title">{{ headTitle }}</span> | |||
<div class="date">2022.10.14</div> | |||
<div class="time">20:12:24</div> | |||
<div class="date">{{ now.format('yyyy.MM.DD') }}</div> | |||
<div class="time">{{ now.format('HH:mm:ss') }}</div> | |||
<div class="fullscreen-btn"> | |||
<span @click="handleClick('home')" v-html="homeSvg" /> | |||
@@ -16,6 +16,7 @@ | |||
<script> | |||
import Cookie from 'js-cookie' | |||
import moment from 'moment' | |||
// const homeSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
const homeSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
@@ -63,7 +64,20 @@ export default { | |||
fullScreenSvg, | |||
homeSvg, | |||
unfullScreenSvg, | |||
isFullScreen: false | |||
isFullScreen: false, | |||
now: moment(), | |||
interval: null | |||
} | |||
}, | |||
mounted() { | |||
this.interval = setInterval(() => { | |||
this.now = moment() | |||
}, 1000) | |||
}, | |||
beforeDestroy() { | |||
if (this.interval) { | |||
clearInterval(this.interval) | |||
this.interval = null | |||
} | |||
}, | |||
methods: { | |||
@@ -37,13 +37,15 @@ | |||
</p> | |||
<p> | |||
<b>通信状态 :</b> | |||
<span | |||
class="round-dot" | |||
:class="{ | |||
'danger-dot': currentEquipment.status === '故障', | |||
'warning-dot': currentEquipment.status === '调试中' | |||
}" | |||
> | |||
<span class="round-dot"> | |||
<span | |||
class="dot-icon" | |||
:class="{ | |||
'green-dot': currentEquipment.status === '生产中', | |||
'red-dot': currentEquipment.status === '故障', | |||
'yellow-dot': currentEquipment.status === '调试中' | |||
}" | |||
></span> | |||
{{ currentEquipment.status }} | |||
</span> | |||
</p> | |||
@@ -259,12 +261,14 @@ export default { | |||
} | |||
/* 工序质量分析 */ | |||
.ws-quality { | |||
height: calc(228px * var(--beilv)); | |||
/* height: calc(228px * var(--beilv)); */ | |||
min-height: calc(136px * var(--beilv)); | |||
flex: 1; | |||
} | |||
/* 产线成品率 */ | |||
.production { | |||
height: calc(195px * var(--beilv)); | |||
height: calc(256px * var(--beilv)); | |||
position: relative; | |||
} | |||
.bottom-part { | |||
@@ -328,8 +332,8 @@ export default { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
height: calc(136px * var(--beilv)); | |||
width: calc(176px * var(--beilv)); | |||
height: calc(128px * var(--beilv)); | |||
width: calc(188px * var(--beilv)); | |||
} | |||
.techy-body-part__middle__inner { | |||
@@ -338,6 +342,7 @@ export default { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: space-between; | |||
/* gap: calc(6px * var(--beilv)); */ | |||
} | |||
.techy-body-part__middle__inner p { | |||
@@ -346,6 +351,7 @@ export default { | |||
font-size: calc(12px * var(--beilv)); | |||
line-height: 1.5; | |||
color: #fff; | |||
display: flex; | |||
} | |||
.techy-body-part__middle__inner p > span { | |||
@@ -354,19 +360,40 @@ export default { | |||
} | |||
.techy-body-part__middle__inner p > span.round-dot { | |||
padding-left: calc(28px * var(--beilv)); | |||
/* padding-left: calc(28px * var(--beilv)); */ | |||
display: flex; | |||
align-items: center; | |||
gap: calc(4px * var(--beilv)); | |||
} | |||
.round-dot::before { | |||
content: ''; | |||
position: absolute; | |||
.dot-icon { | |||
height: calc(16px * var(--beilv)); | |||
width: calc(16px * var(--beilv)); | |||
} | |||
.red-dot { | |||
background: url(./components/assets/red.png) 20% center / 100% no-repeat; | |||
} | |||
.green-dot { | |||
background: url(./components/assets/green.png) 20% center / 100% no-repeat; | |||
} | |||
.yellow-dot { | |||
background: url(./components/assets/orange.png) 20% center / 100% no-repeat; | |||
} | |||
.blue-dot { | |||
background: url(./components/assets/blue.png) 20% center / 100% no-repeat; | |||
} | |||
/* .round-dot::before { | |||
content: ''; */ | |||
/* position: absolute; | |||
top: calc(4px * var(--beilv)); | |||
left: calc(16px * var(--beilv)); | |||
width: calc(8px * var(--beilv)); | |||
left: calc(16px * var(--beilv)); */ | |||
/* width: calc(8px * var(--beilv)); | |||
height: calc(8px * var(--beilv)); | |||
background-color: rgb(82, 231, 82); | |||
border-radius: calc(4px * var(--beilv)); | |||
} | |||
} */ | |||
.danger-dot::before { | |||
background-color: #e71837; | |||
@@ -37,11 +37,27 @@ | |||
<div class="row-2"> | |||
<!-- 设备分析 --> | |||
<techy-container :title="'设备分析'" icon="趋势搜索"> | |||
<select id="productLine" name="productLine" class="product-line-selection"> | |||
<!-- <select id="productLine" name="productLine" class="product-line-selection"> | |||
<option value="1">产线一</option> | |||
<option value="2">产线二</option> | |||
<option value="3">产线三</option> | |||
</select> | |||
</select> --> | |||
<template v-slot:titleSelect> | |||
<el-select | |||
v-model="plSelect" | |||
size="mini" | |||
:popper-append-to-body="false" | |||
clearable | |||
placeholder="请选择产线" | |||
class="pl-select" | |||
style="width: 140px; height: 100%; margin-left: 12px;" | |||
> | |||
<el-option label="产线A" value="1" /> | |||
<el-option label="产线B" value="2" /> | |||
</el-select> | |||
</template> | |||
<div class="equipment-analysis__inner"> | |||
<div> | |||
<TechyBox class="pl-jdl"> | |||
@@ -169,6 +185,7 @@ export default { | |||
props: {}, | |||
data() { | |||
return { | |||
plSelect: null, | |||
equipmentExceptionProps, | |||
equipmentExceptionDatalist, | |||
equipmentAlarmProps, | |||
@@ -376,4 +393,16 @@ export default { | |||
top: calc(24px * var(--beilv)); | |||
left: calc(140px * var(--beilv)); | |||
} | |||
.pl-select { | |||
/* height: calc(18px * var(--beilv)); */ | |||
} | |||
.pl-select >>> input { | |||
/* height: 100%; */ | |||
outline: none; | |||
border: none; | |||
background: #31878c45; | |||
color: white; | |||
} | |||
</style> |
@@ -14,6 +14,8 @@ | |||
<div class="container-title-wrapper"> | |||
<span class="container-icon" v-html="computeIcon" /> | |||
<span class="container-title">{{ title }}</span> | |||
<slot name="titleSelect" /> | |||
</div> | |||
<slot /> | |||
@@ -29,7 +29,7 @@ | |||
:inject-data="{ ...scope.row, ...item }" | |||
@emitData="emitData" | |||
/> | |||
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> | |||
<span v-else :title="scope.row[item.prop]">{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> | |||
</template> | |||
</el-table-column> | |||
<slot name="content" /> | |||
@@ -2,7 +2,7 @@ | |||
<div class="techy-vertical-table"> | |||
<div v-for="(row, index) in tableProps" :key="'row' + index" class="trow"> | |||
<span class="thead">{{ row.label }}</span> | |||
<span v-for="(item, idx) in dataList" :key="'item_' + index + idx" class="tbody"> | |||
<span v-for="(item, idx) in dataList" :key="'item_' + index + idx" class="tbody" :title="item[row.prop]"> | |||
<template v-if="!row.subcomponent"> | |||
{{ item[row.prop] }} | |||
</template> | |||
@@ -25,23 +25,26 @@ export default { | |||
bottom: 0, | |||
containLabel: true | |||
}, | |||
xAxis: [ | |||
{ | |||
type: 'category', | |||
data: ['A', 'B', 'C', 'D', 'E'], | |||
axisTick: { | |||
alignWithLabel: true | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
color: '#5982B233' | |||
} | |||
}, | |||
axisLabel: { | |||
color: '#fff' | |||
tooltip: { | |||
show: true, | |||
type: 'shadow', | |||
trigger: 'item' | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
data: ['A', 'B', 'C', 'D', 'E'], | |||
axisTick: { | |||
alignWithLabel: true | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
color: '#5982B233' | |||
} | |||
}, | |||
axisLabel: { | |||
color: '#fff' | |||
} | |||
], | |||
}, | |||
yAxis: [ | |||
{ | |||
type: 'value', | |||
@@ -58,7 +61,7 @@ export default { | |||
axisLabel: { | |||
color: '#ffffff9d' | |||
}, | |||
axisTick: { show : false } | |||
axisTick: { show: false } | |||
} | |||
], | |||
series: [ | |||
@@ -42,26 +42,26 @@ export const equipmentExceptionProps = [ | |||
] | |||
export const equipmentExceptionDatalist = [ | |||
{ "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 }, | |||
{ "eqName": "丝印机", "pl": "A", "content": "网版推出异常", "creator": "马磊", "time": "2022-11-20 22:00:34", "priority": 3 }, | |||
{ "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "贺刚", "time": "2022-11-20 06:30:01", "priority": 2 }, | |||
{ "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "冯丽", "time": "2022-11-20 07:09:16", "priority": 2 }, | |||
{ "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "梁秀兰", "time": "2022-11-20 08:21:36", "priority": 3 }, | |||
{ "eqName": "丝印机", "pl": "B", "content": "印刷轴异常", "creator": "卢敏", "time": "2022-11-20 04:45:00", "priority": 2 }, | |||
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "方勇", "time": "2022-11-20 06:41:06", "priority": 2 }, | |||
{ "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "赵静", "time": "2022-11-20 03:36:47", "priority": 2 }, | |||
{ "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "姜洋", "time": "2022-11-20 07:56:26", "priority": 3 }, | |||
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "赖艳", "time": "2022-11-20 12:01:14", "priority": 1 }, | |||
{ "eqName": "丝印机", "pl": "A", "content": "进气压力过低", "creator": "熊静", "time": "2022-11-20 03:24:33", "priority": 1 }, | |||
{ "eqName": "清洗机", "pl": "B", "content": "进料检测异常", "creator": "龚明", "time": "2022-11-21 16:26:11", "priority": 2 }, | |||
{ "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "万娟", "time": "2022-11-21 08:44:41", "priority": 2 }, | |||
{ "eqName": "丝印机", "pl": "B", "content": "进气压力过低", "creator": "徐丽", "time": "2022-11-21 21:15:10", "priority": 2 }, | |||
{ "eqName": "镀膜", "pl": "A", "content": "固化变频异常", "creator": "叶娜", "time": "2022-11-21 22:45:13", "priority": 1 }, | |||
{ "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "田磊", "time": "2022-11-21 07:24:59", "priority": 2 }, | |||
{ "eqName": "钢化炉", "pl": "A", "content": "加热炉体超温报警", "creator": "邱平", "time": "2022-11-21 17:53:18", "priority": 2 }, | |||
{ "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "赵艳", "time": "2022-11-21 18:10:32", "priority": 2 }, | |||
{ "eqName": "钢化炉", "pl": "B", "content": "传动变频器故障", "creator": "江伟", "time": "2022-11-21 17:29:44", "priority": 2 }, | |||
{ "eqName": "清洗机", "pl": "B", "content": "输送变频报警", "creator": "周洋", "time": "2022-11-21 02:49:09", "priority": 3 }, | |||
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "邱超", "time": "2022-11-21 20:41:53", "priority": 1 }, | |||
] | |||
/** 设备异常报警 */ | |||
@@ -107,35 +107,35 @@ export const equipmentAlarmProps = [ | |||
export const equipmentAlarmDatalist = [ | |||
{ | |||
"pl": "B", "eqName": "丝印", "eqCode": "B5SP20200109025453", "content": "常下命般里究千么间龙该海战据运更。", "priority": 3 | |||
"pl": "B", "eqName": "丝印机", "eqCode": "B5SP20200109025453", "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 }, | |||
{ "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A2CAE20210605043851", "content": "输送变频报警", "priority": 2 }, | |||
{ "pl": "B", "eqName": "磨边机", "eqCode": "B4ED20200328154356", "content": "磨轮过载", "priority": 1 }, | |||
{ "pl": "B", "eqName": "镀膜", "eqCode": "B5FC20220307070115", "content": "胶辊变频异常", "priority": 2 }, | |||
{ "pl": "B", "eqName": "丝印机", "eqCode": "B7SP20190927110003", "content": "印刷轴异常", "priority": 2 }, | |||
{ | |||
"pl": "A", "eqName": "打孔后清洗机", "eqCode": "A3CAP20200727075125", "content": "员因江单话况质己家小展矿指到之组她。", "priority": 3 | |||
"pl": "A", "eqName": "清洗机", "eqCode": "A3CAP20200727075125", "content": "进料检测异常", "priority": 3 | |||
}, | |||
{ "pl": "A", "eqName": "磨边", "eqCode": "A7ED20200512213432", "content": "观长因带至成为也越效飞约况面的。", "priority": 3 }, | |||
{ "pl": "A", "eqName": "丝印机", "eqCode": "A7SP20200512213432", "content": "进气压力过低", "priority": 3 }, | |||
{ | |||
"pl": "A", "eqName": "固化", "eqCode": "A4CO20220608145053", "content": "回状边及族值强第手听存派治严农象江。", "priority": 2 | |||
"pl": "A", "eqName": "磨边机", "eqCode": "A4ED20220608145053", "content": "磨轮过载", "priority": 2 | |||
}, | |||
{ "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200526045602", "content": "采料这百他打体拉素但即面之。", "priority": 1 }, | |||
{ "pl": "B", "eqName": "钢化炉", "eqCode": "B4CO20200526045602", "content": "传动变频器故障", "priority": 1 }, | |||
{ | |||
"pl": "B", "eqName": "打孔", "eqCode": "B6LP20220326162041", "content": "列保己问向九青保自济习后长而类月段斗。", "priority": 2 | |||
"pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20220326162041", "content": "毛刷过载", "priority": 2 | |||
}, | |||
{ "pl": "A", "eqName": "磨边", "eqCode": "A4ED20200325081934", "content": "产矿身断通者和意层价前就知头。", "priority": 2 }, | |||
{ "pl": "A", "eqName": "磨边机", "eqCode": "A4ED20200325081934", "content": "磨轮过载", "priority": 2 }, | |||
{ | |||
"pl": "B", "eqName": "预热", "eqCode": "B1PR20201220183649", "content": "志收一支习于何况支于自原地书飞感。", "priority": 2 | |||
"pl": "B", "eqName": "丝印机", "eqCode": "B1SP20201220183649", "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 }, | |||
{ "pl": "A", "eqName": "镀膜", "eqCode": "A3SC20220414054819", "content": "固化变频异常", "priority": 2 }, | |||
{ "pl": "A", "eqName": "磨边机", "eqCode": "A8ED20200704010549", "content": "磨轮过载", "priority": 2 }, | |||
{ "pl": "B", "eqName": "清洗机", "eqCode": "B1CAT20200323134700", "content": "进料检测异常", "priority": 3 }, | |||
{ "pl": "A", "eqName": "丝印机", "eqCode": "A1SP20200513020427", "content": "网版推出异常", "priority": 1 }, | |||
{ "pl": "A", "eqName": "钢化炉", "eqCode": "A7CO20210928172616", "content": "加热炉体超温报警", "priority": 2 }, | |||
{ "pl": "A", "eqName": "镀膜", "eqCode": "A5SC20210104132647", "content": "固化变频异常", "priority": 1 }, | |||
{ "pl": "A", "eqName": "钢化炉", "eqCode": "A4ED20210225140150", "content": "加热炉体超温报警", "priority": 1 }, | |||
{ "pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20200831083210", "content": "进料检测异常", "priority": 2 }, | |||
] | |||
/** 设备分析 */ | |||
@@ -46,7 +46,7 @@ | |||
class="absolute top-0 left-0" | |||
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" | |||
> | |||
<new-bar | |||
<!-- <new-bar | |||
chart-name="realtime-cost-production" | |||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']" | |||
:data-list="[ | |||
@@ -63,6 +63,19 @@ | |||
data: [162, 172, 122, 15, 82, 74] | |||
} | |||
]" | |||
/> --> | |||
<techy-bar | |||
unit-name="单位/片" | |||
:datainfo="[ | |||
{ | |||
name: '产线A', | |||
list: [163, 184, 110, 22, 96, 74] | |||
}, | |||
{ | |||
name: '产线B', | |||
list: [162, 172, 122, 15, 82, 74] | |||
} | |||
]" | |||
/> | |||
</div> | |||
</techy-box> | |||
@@ -74,7 +87,7 @@ | |||
class="absolute top-0 left-0" | |||
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" | |||
> | |||
<new-bar | |||
<!-- <new-bar | |||
chart-name="realtime-cost-production" | |||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']" | |||
unit-name="单位: 千片" | |||
@@ -92,6 +105,20 @@ | |||
data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14] | |||
} | |||
]" | |||
/> --> | |||
<techy-bar | |||
unit-name="单位/千片" | |||
:extra-space-between-zero="0.8" | |||
:datainfo="[ | |||
{ | |||
name: '产线A', | |||
list: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2] | |||
}, | |||
{ | |||
name: '产线B', | |||
list: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14] | |||
} | |||
]" | |||
/> | |||
</div> | |||
</techy-box> | |||
@@ -102,7 +129,51 @@ | |||
<div class="grow flex gap-16"> | |||
<div class="width-222"> | |||
<techy-box class="" style="padding: calc(16px * var(--beilv));"> | |||
<techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header> | |||
<techy-analysis-header :show-top-icon="false"> | |||
产线缺陷分析 | |||
<template v-slot:dateSelect> | |||
<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' | |||
chosenDatalist = quexianDatalist[2] | |||
" | |||
> | |||
日 | |||
</span> | |||
<span | |||
:class="{ 'date-select__active': dateMode === 'month' }" | |||
@click=" | |||
dateMode = 'month' | |||
chosenDatalist = quexianDatalist[3] | |||
" | |||
> | |||
月 | |||
</span> | |||
</div> | |||
</template> | |||
</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));" | |||
@@ -111,73 +182,37 @@ | |||
</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' | |||
chosenDatalist = quexianDatalist[2] | |||
" | |||
> | |||
日 | |||
</span> | |||
<span | |||
:class="{ 'date-select__active': dateMode === 'month' }" | |||
@click=" | |||
dateMode = 'month' | |||
chosenDatalist = quexianDatalist[3] | |||
" | |||
> | |||
月 | |||
</span> | |||
</div> | |||
</techy-box> | |||
</div> | |||
<div class="grow"> | |||
<techy-box class="" style="padding: calc(16px * var(--beilv));"> | |||
<techy-analysis-header>产品成品率</techy-analysis-header> | |||
<techy-analysis-header class="production-rate"> | |||
产品成品率 | |||
<template v-slot:dateSelect> | |||
<div class="date-select"> | |||
<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> | |||
</template> | |||
</techy-analysis-header> | |||
<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' | |||
dataUpdateToken = '' + Math.random() | |||
" | |||
> | |||
日 | |||
</span> | |||
<span | |||
:class="{ 'date-select__active': dateMode2 === 'month' }" | |||
@click=" | |||
dateMode2 = 'month' | |||
dataUpdateToken = '' + Math.random() | |||
" | |||
> | |||
月 | |||
</span> | |||
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" /> | |||
</div> | |||
</techy-box> | |||
</div> | |||
@@ -254,7 +289,8 @@ import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue' | |||
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue' | |||
import { mapGetters } from 'vuex' | |||
import screenfull from 'screenfull' | |||
import NewBar from './components/charts/newBar.vue' | |||
import TechyBar from './components/charts/TechyBar.vue' | |||
import NewLineStack from './components/charts/newLineStack.vue' | |||
import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData' | |||
@@ -270,7 +306,7 @@ export default { | |||
TechyTable, | |||
// FaultCategoryChart, | |||
PlFaultAnalysisPieChart, | |||
NewBar, | |||
TechyBar, | |||
NewLineStack | |||
}, | |||
data() { | |||
@@ -553,17 +589,22 @@ export default { | |||
.pl-select, | |||
.date-select { | |||
position: absolute; | |||
top: calc(16px * var(--beilv)); | |||
right: calc(22px * var(--beilv)); | |||
top: 0; | |||
right: 0; | |||
/* top: calc(16px * var(--beilv)); */ | |||
/* right: calc(22px * var(--beilv)); */ | |||
border-radius: calc(2px * var(--beilv)); | |||
overflow: hidden; | |||
display: flex; | |||
align-items: center; | |||
height: 100%; | |||
cursor: pointer; | |||
} | |||
.pl-select { | |||
right: unset; | |||
left: calc(10px * var(--beilv)); | |||
left: 0; | |||
/* left: calc(10px * var(--beilv)); */ | |||
} | |||
.pl-select span, | |||
@@ -585,4 +626,14 @@ export default { | |||
.width-222 { | |||
width: calc(375px * var(--beilv)); | |||
} | |||
@media all and (max-width: 2040px) { | |||
.production-rate { | |||
/* text-align: left; */ | |||
} | |||
.production-rate >>> .top-icon:last-of-type { | |||
display: none; | |||
} | |||
} | |||
</style> |
@@ -2,12 +2,12 @@ | |||
<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;" | |||
style="transform: skewX(32deg); background: #fff0; 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"> | |||
<span class="top-icon" style="transform: skewX(-32deg); "> | |||
<svg | |||
width="100%" | |||
height="100%" | |||
@@ -55,10 +55,10 @@ | |||
</g> | |||
</svg> | |||
</span> | |||
<span class="techy-analysis-header__title"> | |||
<span class="techy-analysis-header__title" style="display: inline-block; transform: translateX(-4px) skewX(-32deg); "> | |||
<slot /> | |||
</span> | |||
<span class="top-icon"> | |||
<span class="top-icon" style="transform: skewX(-32deg); "> | |||
<svg | |||
width="100%" | |||
height="100%" | |||
@@ -108,9 +108,12 @@ | |||
</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 | |||
class="legend legend-right" | |||
style="transform: skewX(-32deg); 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" style=" ">产线B</div> | |||
</div> | |||
</div> | |||
</template> | |||
@@ -216,6 +219,8 @@ | |||
</svg> | |||
</span> | |||
</template> | |||
<slot name="dateSelect" /> | |||
</div> | |||
</template> | |||
@@ -242,6 +247,9 @@ export default { | |||
.techy-analysis-header { | |||
text-align: center; | |||
margin-bottom: calc(16px * var(--beilv)); | |||
position: relative; | |||
white-space: nowrap; | |||
z-index: 1; | |||
} | |||
.techy-analysis-header__title { | |||
@@ -257,11 +265,19 @@ export default { | |||
margin-bottom: calc(2px * var(--beilv)); | |||
} | |||
.legend-right { | |||
display: flex; | |||
gap: calc(8px * var(--beilv)); | |||
white-space: nowrap; | |||
overflow: hidden; | |||
} | |||
.legend-item { | |||
font-size: calc(10px * var(--beilv)); | |||
line-height: 1.5; | |||
color: #dff1fe; | |||
display: inline-block; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.legend-item::before { | |||
@@ -0,0 +1,289 @@ | |||
<template> | |||
<div ref="techyBar" class="techy-bar"></div> | |||
</template> | |||
<script> | |||
import echarts from 'echarts' // echarts theme | |||
import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
import * as BottomPic from './bottom.png' | |||
export default { | |||
name: 'TechyBar', | |||
props: { | |||
datainfo: { | |||
type: Array, | |||
default: () => [ | |||
{ | |||
name: '产线A', | |||
list: [100, 102, 104, 105, 100, 117] | |||
}, | |||
{ | |||
name: '产线B', | |||
list: [110, 92, 124, 85, 100, 120] | |||
} | |||
] | |||
}, | |||
unitName: { | |||
type: String, | |||
default: '' | |||
}, | |||
extraSpaceBetweenZero: { | |||
type: Number, | |||
default: 25 | |||
} | |||
}, | |||
mixins: [resize], | |||
data() { | |||
const color_gradients = [ | |||
/** 蓝 */ | |||
{ | |||
direction: 'to top', | |||
from: '#49B2FF', // * 0.6 是底部颜色和顶部颜色 | |||
to: '#49B2FF00', | |||
topAndBottom: '#49B2FF9F' | |||
}, | |||
/** 绿 */ | |||
{ | |||
direction: 'to top', | |||
from: '#49FBD6', // * 0.6 是底部颜色和顶部颜色 | |||
to: '#49FBD600', | |||
topAndBottom: '#49FBD69F' | |||
} | |||
] | |||
let result = [] | |||
this.datainfo.map((pl, index) => { | |||
let topCircle = { | |||
__position: 'top', | |||
name: pl.name, | |||
barGap: '10%', | |||
barCategoryGap: '48%', | |||
type: 'pictorialBar', | |||
symbol: 'circle', | |||
symbolPosition: 'end', | |||
symbolOffset: ['25%', '-50%'], | |||
// symbolSize: ['100%', 6], | |||
symbolSize: ['200%', 6], | |||
data: pl.list, | |||
z: 10, | |||
itemStyle: { | |||
// color: color_gradients[index].topAndBottom | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 1, | |||
x2: 0, | |||
y2: 0, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: color_gradients[index].topAndBottom | |||
}, | |||
{ | |||
offset: 1, | |||
color: color_gradients[index].to | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
} | |||
} | |||
let bottomCircle = { | |||
__position: 'top', | |||
name: pl.name, | |||
barGap: '10%', | |||
barCategoryGap: '48%', | |||
type: 'pictorialBar', | |||
symbol: 'circle', | |||
symbolOffset: ['-25%', '50%'], | |||
symbolSize: ['200%', 6], | |||
data: pl.list, | |||
z: 10, | |||
itemStyle: { | |||
color: color_gradients[index].from | |||
} | |||
} | |||
let mainBar = { | |||
__position: 'main', | |||
type: 'bar', | |||
name: pl.name, | |||
// barWidth: 20, // 不需要设置 barWidth | |||
barGap: '10%', | |||
barCategoryGap: '48%', | |||
data: pl.list, | |||
z: 0, | |||
itemStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 1, | |||
x2: 0, | |||
y2: 0, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: color_gradients[index].from | |||
}, | |||
{ | |||
offset: 0.15, | |||
color: color_gradients[index].topAndBottom | |||
}, | |||
{ | |||
offset: 1, | |||
color: color_gradients[index].to | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
}, | |||
label: { | |||
show: true, | |||
position: 'top', | |||
color: '#fff8', | |||
fontSize: 10, | |||
offset: [0, 6] | |||
} | |||
} | |||
result.push(topCircle) | |||
result.push(mainBar) | |||
result.push(bottomCircle) | |||
}) | |||
return { | |||
BottomPic, | |||
width: 0, | |||
chart: null, | |||
option: { | |||
grid: { | |||
left: '10%', | |||
top: 48, | |||
bottom: 28 | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
axisTick: { | |||
show: false | |||
}, | |||
axisLine: { | |||
onZero: false, | |||
show: false, | |||
lineStyle: {} | |||
}, | |||
axisLabel: { | |||
color: '#fff8', | |||
fontSize: 12 | |||
}, | |||
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'], | |||
axisPointer: { | |||
show: true, | |||
type: 'shadow', | |||
label: { | |||
show: true, | |||
formatter: params => { | |||
let info_arr = params.seriesData.filter(item => item.seriesType === 'bar') | |||
let v = [`<${info_arr[0].name}>详细数据: \n`] | |||
info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) }) | |||
return v.join('\n') | |||
} | |||
} | |||
} | |||
}, | |||
yAxis: { | |||
type: 'value', | |||
// min: -25, | |||
min: this.extraSpaceBetweenZero * -1, | |||
name: this.unitName, | |||
nameTextStyle: { | |||
color: '#fff8', | |||
fontSize: 8, | |||
verticalAlign: 'top', | |||
align: 'right' | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#31A2FF' | |||
} | |||
}, | |||
axisLabel: { | |||
color: '#fff8', | |||
fontSize: 10, | |||
/** y轴不从0开始,也可以用 xAxis 向下 offset 的方式模拟 **/ | |||
formatter: function(value, index) { | |||
if (value < 0) { | |||
return '' | |||
} | |||
return value | |||
} | |||
}, | |||
axisTick: { show: false }, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#569acd', | |||
type: 'dotted', | |||
opacity: 0.2 | |||
} | |||
} | |||
}, | |||
series: result, | |||
graphic: [ | |||
{ | |||
type: 'image', | |||
left: 0, | |||
bottom: 0, | |||
scaleX: 0.8, | |||
style: { | |||
image: 'image url', | |||
height: 0, | |||
width: 0 | |||
} | |||
} | |||
] | |||
} | |||
} | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', this.refreshOption) | |||
if (!this.chart) this.chart = echarts.init(this.$refs.techyBar) | |||
this.$nextTick(() => { | |||
this.updateOption(this.option) | |||
this.chart.setOption(this.option) | |||
}) | |||
}, | |||
methods: { | |||
updateOption(option) { | |||
// console.log('option', this.BottomPic.default) | |||
let width = this.$refs.techyBar.querySelector('div').clientWidth | |||
let height = this.$refs.techyBar.querySelector('div').clientHeight | |||
option.graphic[0].style.width = width * 0.85 | |||
option.graphic[0].style.height = height * 0.25 | |||
option.graphic[0].style.image = this.BottomPic.default | |||
option.graphic[0].left = '10%' | |||
option.graphic[0].bottom = 28 | |||
}, | |||
refreshOption() { | |||
this.updateOption(this.option) | |||
this.chart.setOption(this.option) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.techy-bar { | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.techy-bar >>> div { | |||
width: 100% !important; | |||
height: 100% !important; | |||
} | |||
</style> |
@@ -1,398 +0,0 @@ | |||
<template> | |||
<div | |||
ref="chartContainer" | |||
class="chartContainer" | |||
:class="bindClass" | |||
style="position: relative; width: 100%; height:100%" | |||
/> | |||
</template> | |||
<script> | |||
import echarts from 'echarts' // echarts theme | |||
import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
export default { | |||
name: 'OverviewBar', | |||
mixins: [resize], | |||
props: { | |||
unitName: { | |||
type: String, | |||
default: '单位: 片' | |||
}, | |||
chartName: { | |||
type: String, | |||
default: '' | |||
}, | |||
xlabelFontSize: { | |||
type: Number, | |||
default: 12 | |||
}, | |||
xlabelRotate: { | |||
type: Number, | |||
default: 0 | |||
}, | |||
nameList: { | |||
type: Array, | |||
default: () => [] | |||
}, | |||
dataList: { | |||
type: Array, | |||
default: () => [] | |||
} | |||
}, | |||
data() { | |||
return { | |||
chart: null, | |||
series: [] | |||
} | |||
}, | |||
computed: { | |||
bindClass() { | |||
return { | |||
'fault-category-chart': this.chartName === 'fault-category', | |||
'process-fault-chart': this.chartName === 'process-fault', | |||
'realtime-production-cost-chart': this.chartName === 'realtime-cost-production' | |||
} | |||
} | |||
}, | |||
mounted() { | |||
if (this.dataList.length > 1) { | |||
this.series = [ | |||
{ | |||
// 柱体 | |||
name: this.dataList[0].name, | |||
type: 'bar', | |||
barWidth: 20, | |||
itemStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: this.dataList[0].topColor }, | |||
{ offset: 1, color: this.dataList[0].bottomColor } | |||
]) | |||
}, | |||
data: this.dataList[0].data | |||
}, | |||
{ | |||
// 柱顶 | |||
name: this.dataList[0].name, | |||
type: 'pictorialBar', | |||
barWidth: 20, | |||
symbol: 'circle', | |||
symbolPosition: 'end', | |||
symbolOffset: ['-70%', '-50%'], | |||
symbolSize: [20, 6], | |||
zlevel: 2, | |||
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: 20, | |||
symbol: 'circle', | |||
symbolOffset: ['-62%', '50%'], | |||
symbolSize: [20, 6], | |||
itemStyle: { color: this.dataList[0].bottomColor }, | |||
data: this.dataList[0].data | |||
}, | |||
{ | |||
// 柱体 | |||
name: this.dataList[1].name, | |||
type: 'bar', | |||
barWidth: 20, | |||
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 | |||
}, | |||
{ | |||
// 柱顶 | |||
name: this.dataList[1].name, | |||
type: 'pictorialBar', | |||
barWidth: 20, | |||
symbol: 'circle', | |||
symbolPosition: 'end', | |||
symbolOffset: ['66%', '-50%'], | |||
symbolSize: [20, 6], | |||
zlevel: 2, | |||
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: 20, | |||
symbol: 'circle', | |||
symbolOffset: ['66%', '50%'], | |||
symbolSize: [20, 6], | |||
itemStyle: { color: this.dataList[1].bottomColor }, | |||
data: this.dataList[1].data | |||
} | |||
] | |||
} else { | |||
const barWidth = 400 / 2 / this.dataList[0].data.length | |||
this.series = [ | |||
{ | |||
// 柱体 | |||
name: this.dataList[0].name, | |||
type: 'bar', | |||
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 } | |||
]) | |||
}, | |||
data: this.dataList[0].data | |||
}, | |||
{ | |||
// 柱顶 | |||
name: this.dataList[0].name, | |||
type: 'pictorialBar', | |||
barWidth: barWidth, | |||
symbol: 'circle', | |||
symbolPosition: 'end', | |||
symbolOffset: [0, '-50%'], | |||
symbolSize: [barWidth, 6], | |||
zlevel: 2, | |||
itemStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: 'rgba(59, 76, 118, 0)' }, | |||
{ offset: 1, color: '#2c6e7d' } | |||
]) | |||
}, | |||
label: { | |||
color: | |||
this.chartName === 'process-fault' | |||
? 'rgba(119, 255, 242, 1)' | |||
: this.chartName === 'fault-category' | |||
? '#31a2ff' | |||
: '#fff9', | |||
show: true, | |||
offset: [0, 10], | |||
position: 'top', | |||
vertialAlign: 'bottom' | |||
}, | |||
data: this.dataList[0].data | |||
}, | |||
{ | |||
// 柱底 | |||
name: this.dataList[0].name, | |||
type: 'pictorialBar', | |||
barWidth: barWidth, | |||
symbol: 'circle', | |||
symbolOffset: [0, '50%'], | |||
symbolSize: [barWidth, 6], | |||
itemStyle: { color: '#2c6e7d' }, | |||
data: this.dataList[0].data | |||
} | |||
] | |||
} | |||
this.$nextTick(() => { | |||
console.log('on Mounted(): ') | |||
this.initChart() | |||
}) | |||
}, | |||
beforeDestroy() { | |||
if (!this.chart) { | |||
return | |||
} | |||
this.chart.dispose() | |||
this.chart = null | |||
}, | |||
methods: { | |||
initChart() { | |||
this.chart = echarts.init(this.$refs.chartContainer) | |||
this.chart.setOption({ | |||
grid: { | |||
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: { | |||
show: false | |||
}, | |||
axisTick: { | |||
show: false | |||
}, | |||
axisLabel: { | |||
margin: 16, | |||
textStyle: { | |||
fontSize: this.xlabelFontSize, | |||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 | |||
}, | |||
rotate: this.xlabelRotate | |||
}, | |||
data: this.nameList | |||
}, | |||
yAxis: [ | |||
{ | |||
name: this.unitName, // '单位: 片', | |||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, | |||
type: 'value', | |||
splitNumber: 3, | |||
axisTick: { show: false }, | |||
onZero: true, | |||
position: 'left', | |||
offset: 10, | |||
axisLine: { | |||
lineStyle: { | |||
type: 'solid', | |||
color: this.dataList[0].bottomColor, | |||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色 | |||
width: '1' // 坐标线的宽度 | |||
} | |||
}, | |||
axisLabel: { | |||
textStyle: { | |||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 | |||
} | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
type: 'dotted', | |||
color: 'rgba(119, 255, 242, 0.2)' | |||
} | |||
}, | |||
type: 'value' | |||
} | |||
// { | |||
// name: '能耗kw/h', | |||
// nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' }, | |||
// type: 'value', | |||
// splitNumber: 3, | |||
// axisTick: { show: false }, | |||
// onZero: true, | |||
// position: 'left', | |||
// offset: 48, | |||
// axisLine: { | |||
// lineStyle: { | |||
// type: 'solid', | |||
// color: this.dataList[1].bottomColor, | |||
// width: '1' // 坐标线的宽度 | |||
// } | |||
// }, | |||
// axisLabel: { | |||
// textStyle: { | |||
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 | |||
// } | |||
// }, | |||
// splitLine: { | |||
// show: false | |||
// // lineStyle: { | |||
// // type: 'dotted', | |||
// // color: 'rgba(119, 255, 242, 0.2)' | |||
// // } | |||
// }, | |||
// type: 'value' | |||
// } | |||
], | |||
series: this.series | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.chartContainer >>> div { | |||
width: 100% !important; | |||
height: 100% !important; | |||
/* position: relative !important; */ | |||
} | |||
.fault-category-chart >>> div::before { | |||
/* .fault-category-chart::before { */ | |||
content: ''; | |||
position: absolute; | |||
/* bottom: calc(100vh/1920 * 80); | |||
left: calc(100vw/1920 * 48); */ | |||
/* bottom: calc(10% + 100vh/1920 * 28); */ | |||
bottom: 25px; | |||
left: 9%; | |||
height: 52px; | |||
width: 90%; | |||
background: linear-gradient(to top, #31a2ff6d, transparent); | |||
transform: skew(-45deg); | |||
z-index: 0; | |||
} | |||
.process-fault-chart >>> div::before { | |||
/* .process-fault-chart::before { */ | |||
content: ''; | |||
position: absolute; | |||
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; | |||
} | |||
</style> |
@@ -10,6 +10,11 @@ export default { | |||
name: 'PlFaultAnalysisPieChart', | |||
mixins: [resize], | |||
props: { | |||
mode: { | |||
type: String, | |||
default: '', | |||
validator: val => ['month', 'day'].indexOf(val) !== -1 | |||
}, | |||
dataUpdateToken: { | |||
type: String, | |||
default: 'default-token' | |||
@@ -19,7 +24,7 @@ export default { | |||
return { | |||
chart: null, | |||
configs: { | |||
color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'], | |||
color: ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'], | |||
tooltip: { | |||
trigger: 'axis', | |||
extraCssText: 'width: 180px !important; ', | |||
@@ -31,41 +36,45 @@ export default { | |||
} | |||
}, | |||
grid: { | |||
top: '25%', | |||
top: 56, | |||
left: '2%', | |||
right: '5%', | |||
bottom: '5%', | |||
containLabel: true | |||
}, | |||
xAxis: [ | |||
{ | |||
type: 'category', | |||
boundaryGap: false, | |||
axisLine: { | |||
lineStyle: { | |||
color: '#ffffff66' | |||
} | |||
}, | |||
axisTick: { show: false }, | |||
axisLabel: { | |||
textStyle: { | |||
color: 'rgba(255,255,255,1)' // | |||
}, | |||
margin: 12 | |||
xAxis: { | |||
type: 'category', | |||
boundaryGap: false, | |||
axisLine: { | |||
lineStyle: { | |||
color: '#ffffff66' | |||
} | |||
}, | |||
axisTick: { show: false }, | |||
axisLabel: { | |||
textStyle: { | |||
fontSize: 10, | |||
color: '#fff8' // | |||
}, | |||
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] | |||
} | |||
], | |||
margin: 12 | |||
}, | |||
data: | |||
this.mode === 'month' | |||
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] | |||
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] | |||
}, | |||
yAxis: [ | |||
{ | |||
name: '成品率', | |||
name: '成品率 ', | |||
type: 'value', | |||
min: 'dataMin', | |||
splitNumber: 4, | |||
nameTextStyle: { | |||
color: 'rgba(255,255,255,0.7)', | |||
fontSize: 12, | |||
align: 'right' | |||
fontSize: 10, | |||
align: 'left', | |||
verticalAlign: 'bottom' | |||
}, | |||
axisLine: { | |||
lineStyle: { | |||
@@ -120,13 +129,24 @@ export default { | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
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 | |||
}) | |||
data: | |||
this.mode === 'month' | |||
? Array(30) | |||
.fill(1) | |||
.map(_ => { | |||
let v = Math.floor(Math.random() * 100) | |||
while (v < 80) { | |||
v = Math.floor(Math.random() * 100) | |||
} | |||
return v | |||
}) | |||
: [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: '磨边机', | |||
@@ -157,129 +177,173 @@ export default { | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
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: '镀膜机', | |||
type: 'line', | |||
symbol: 'none', | |||
data: | |||
this.mode === 'month' | |||
? Array(30) | |||
.fill(1) | |||
.map(_ => { | |||
let v = Math.floor(Math.random() * 100) | |||
while (v < 80) { | |||
v = Math.floor(Math.random() * 100) | |||
} | |||
return v | |||
}) | |||
: [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: '镀膜机', | |||
// 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: '#1A99FF66' // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: 'transparent' // 100% 处的颜色 | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
}, | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
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: '包装纸', | |||
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: '#1A99FF66' // 0% 处的颜色 | |||
// }, | |||
// { | |||
// offset: 1, | |||
// color: 'transparent' // 100% 处的颜色 | |||
// } | |||
// ], | |||
// global: false // 缺省为 false | |||
// } | |||
// }, | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
// data: | |||
// this.mode === 'month' | |||
// ? Array(30) | |||
// .fill(1) | |||
// .map(_ => { | |||
// let v = Math.floor(Math.random() * 100) | |||
// while (v < 80) { | |||
// v = Math.floor(Math.random() * 100) | |||
// } | |||
// return v | |||
// }) | |||
// : [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: '包装纸', | |||
// 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: '#A691FF66' // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: 'transparent' // 100% 处的颜色 | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
}, | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
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: '丝印', | |||
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: '#A691FF66' // 0% 处的颜色 | |||
// }, | |||
// { | |||
// offset: 1, | |||
// color: 'transparent' // 100% 处的颜色 | |||
// } | |||
// ], | |||
// global: false // 缺省为 false | |||
// } | |||
// }, | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
// data: | |||
// this.mode === 'month' | |||
// ? Array(30) | |||
// .fill(1) | |||
// .map(_ => { | |||
// let v = Math.floor(Math.random() * 100) | |||
// while (v < 80) { | |||
// v = Math.floor(Math.random() * 100) | |||
// } | |||
// return v | |||
// }) | |||
// : [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: '丝印', | |||
// type: 'line', | |||
// symbol: 'none', | |||
label: { | |||
show: true, | |||
position: 'top' | |||
}, | |||
areaStyle: { | |||
// color: 'rgba(50,145,152,0.5)' | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 0, | |||
x2: 0, | |||
y2: 1, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: '#49FBD666' // 0% 处的颜色 | |||
}, | |||
{ | |||
offset: 1, | |||
color: 'transparent' // 100% 处的颜色 | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
}, | |||
emphasis: { | |||
focus: 'series' | |||
}, | |||
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 | |||
}) | |||
} | |||
// label: { | |||
// show: true, | |||
// position: 'top' | |||
// }, | |||
// areaStyle: { | |||
// // color: 'rgba(50,145,152,0.5)' | |||
// color: { | |||
// type: 'linear', | |||
// x: 0, | |||
// y: 0, | |||
// x2: 0, | |||
// y2: 1, | |||
// colorStops: [ | |||
// { | |||
// offset: 0, | |||
// color: '#49FBD666' // 0% 处的颜色 | |||
// }, | |||
// { | |||
// offset: 1, | |||
// color: 'transparent' // 100% 处的颜色 | |||
// } | |||
// ], | |||
// global: false // 缺省为 false | |||
// } | |||
// }, | |||
// emphasis: { | |||
// focus: 'series' | |||
// }, | |||
// data: | |||
// this.mode === 'month' | |||
// ? Array(30) | |||
// .fill(1) | |||
// .map(_ => { | |||
// let v = Math.floor(Math.random() * 100) | |||
// while (v < 80) { | |||
// v = Math.floor(Math.random() * 100) | |||
// } | |||
// return v | |||
// }) | |||
// : [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 | |||
// }) | |||
// } | |||
] | |||
} | |||
} | |||
@@ -308,15 +372,34 @@ export default { | |||
}, | |||
methods: { | |||
refreshData() { | |||
// update xaxis | |||
this.configs.xAxis.data = | |||
this.mode === 'month' | |||
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] | |||
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] | |||
// update series | |||
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 | |||
}) | |||
item.data = | |||
this.mode === 'month' | |||
? Array(30) | |||
.fill(1) | |||
.map(_ => { | |||
let v = Math.floor(Math.random() * 100) | |||
while (v < 80) { | |||
v = Math.floor(Math.random() * 100) | |||
} | |||
return v | |||
}) | |||
: [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 | |||
}) | |||
}) | |||
if (this.chart) this.chart.setOption(this.configs) | |||
} | |||
} | |||
@@ -1,19 +1,47 @@ | |||
<template> | |||
<div class="custom-container"> | |||
<el-row :gutter="20" style="height: calc(100vh - 150px)"> | |||
<el-row :gutter="8" style="height: calc(100vh - 150px)"> | |||
<el-col :span="4"> | |||
<aside class="custom-container__common left-side-container"> | |||
<section class="left-side-container__title"> | |||
<!-- <section class="left-side-container__title"> | |||
<span v-if="logoUrl" class="logo"> | |||
<img :src="logoUrl" alt="side container logo"> | |||
</span> | |||
<span class="text-content"> | |||
{{ factoryName }} | |||
</span> | |||
</section> --> | |||
<section class="title-area"> | |||
<span class="title-icon"> | |||
<svg | |||
width="100%" | |||
height="100%" | |||
viewBox="0 0 24 24" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
xmlns:xlink="http://www.w3.org/1999/xlink" | |||
> | |||
<title>工厂</title> | |||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -152.000000)" fill-rule="nonzero"> | |||
<g id="工厂" transform="translate(376.000000, 152.000000)"> | |||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24" /> | |||
<path | |||
id="形状" | |||
d="M12.25,6.75 L12.25,10.25 L20.75,10.25 L20.75,21.25 L3.25000001,21.25 L3.25000001,6.75 L12.25,6.75 L12.25,6.75 Z M10.75,8.25 L4.75000001,8.25 L4.75000001,19.75 L19.25,19.75 L19.25,11.75 L10.75,11.75 L10.75,8.25 Z M17.5,16.5 L17.5,18 L16,18 L16,16.5 L17.5,16.5 Z M14,16.5 L14,18 L12.5,18 L12.5,16.5 L14,16.5 Z M17.5,13.5 L17.5,15 L16,15 L16,13.5 L17.5,13.5 Z M14,13.5 L14,15 L12.5,15 L12.5,13.5 L14,13.5 Z M8.99999999,10.256 L8.99999999,11.756 L6.49999999,11.756 L6.49999999,10.256 L8.99999999,10.256 Z M9.4755,2.82499999 C10.4715,2.63649998 11.0695,2.739 12.1845,3.291 L12.581,3.49000001 L12.7945,3.58999999 C13.2545,3.79899998 13.532,3.85899998 13.887,3.82849999 L13.9855,3.81850001 L14.1545,3.79249999 L14.2455,3.77650001 C14.8380746,3.66404309 15.3698683,3.34077505 15.7425,2.8665 L15.8205,2.763 L17.0405,3.636 L16.9485,3.76000001 C16.3504031,4.53742507 15.4872916,5.06774928 14.5235,5.25 C13.5275,5.43799999 12.9285,5.3355 11.814,4.7835 L11.4175,4.58500001 C10.781,4.27450001 10.4765,4.20100001 10.024,4.25599999 L9.9315,4.26850001 L9.7545,4.299 C9.16166181,4.41148918 8.62956287,4.73472685 8.25649999,5.20900001 L8.17849999,5.31199999 L6.95899999,4.43800001 L7.0515,4.31449999 C7.64947141,3.53774907 8.51191259,3.00768671 9.47500001,2.82499999 L9.4755,2.82499999 Z" | |||
fill="#0B58FF" | |||
/> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</span> | |||
<span class="title-content">合肥新能源工厂</span> | |||
</section> | |||
<section class="left-side-container__content"> | |||
<!-- 导航栏 --> | |||
<!-- 导航栏 --> | |||
<!-- <section class="left-side-container__content"> | |||
<el-tree | |||
class="custom-tree" | |||
:icon-class="'el-icon-document-copy'" | |||
@@ -21,6 +49,15 @@ | |||
:props="defaultProps" | |||
@node-click="handleNodeClick" | |||
/> | |||
</section> --> | |||
<section class="routes-area" v-if="showList"> | |||
<el-menu @select="handleSelect"> | |||
<!-- 此处假设了只有一个根节点 --> | |||
<template v-for="(menuItem, index) in treeData"> | |||
<TestMenuItem :level="1" :key="index" :menuItem="menuItem" /> | |||
</template> | |||
</el-menu> | |||
</section> | |||
</aside> | |||
</el-col> | |||
@@ -53,12 +90,15 @@ import HeadForm from '@/components/basicData/HeadForm' | |||
import testData from './parameter.test.data.js' | |||
import moment from 'moment' | |||
import writeXlsxFile from 'write-excel-file' | |||
import TestMenuItem from './parameter/components/TestMenuItem.vue' | |||
export default { | |||
name: 'EquipmentRetrospectParameter', | |||
components: { BaseTable, HeadForm }, | |||
components: { BaseTable, HeadForm, TestMenuItem }, | |||
data() { | |||
return { | |||
showList: false, | |||
menuListTrue: [], | |||
factoryName: 'xxx工厂', | |||
logoUrl: require('../../../../assets/img/cnbm.png'), | |||
treeData: null, | |||
@@ -117,46 +157,59 @@ export default { | |||
} | |||
}, | |||
created() { | |||
this.showList = false | |||
this.init() | |||
this.fetchList('eq-tree').then(res => { | |||
if (res.data) { | |||
const eqTree = res.data[0] // 只会返回一条工厂数据 | |||
this.factoryName = eqTree.name | |||
// 构造tree展示的结构 | |||
eqTree.pdlList.forEach(item => { | |||
const treeItem = {} | |||
treeItem.label = item.name | |||
if (item.wsList.length) { | |||
treeItem.children = [] | |||
item.wsList.forEach(workSection => { | |||
const wsItem = {} | |||
wsItem.label = workSection.name | |||
if (workSection.eqList.length) { | |||
wsItem.children = [] | |||
workSection.eqList.forEach(eq => { | |||
const eqItem = {} | |||
eqItem.label = eq.eqName | |||
eqItem.id = eq.eqId | |||
wsItem.children.push(eqItem) | |||
}) | |||
} | |||
treeItem.children.push(wsItem) | |||
}) | |||
} | |||
// 产线 | |||
this.productLineList.push(treeItem) | |||
}) | |||
this.treeData = this.productLineList | |||
this.treeData = this.preHandleList(eqTree) | |||
this.showList = true | |||
} | |||
}) | |||
this.fetchList('work-order').then(res => { | |||
if (res.data.records) { | |||
this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name })) | |||
} | |||
}) | |||
}, | |||
methods: { | |||
preHandleList(list) { | |||
let result = [] | |||
list.pdlList.forEach(item => { | |||
const treeItem = {} | |||
treeItem.name = item.name | |||
// 整理产线 | |||
if (item.wsList.length) { | |||
treeItem.children = [] | |||
item.wsList.forEach(workSection => { | |||
const wsItem = {} | |||
wsItem.name = workSection.name | |||
// 整理设备 | |||
if (workSection.eqList.length) { | |||
wsItem.children = [] | |||
workSection.eqList.forEach(eq => { | |||
const eqItem = {} | |||
eqItem.name = eq.eqName | |||
eqItem.id = eq.eqId | |||
wsItem.children.push(eqItem) | |||
}) | |||
} | |||
treeItem.children.push(wsItem) | |||
}) | |||
} | |||
// 产线 | |||
result.push(treeItem) | |||
}) | |||
return result | |||
}, | |||
init() { | |||
this.productLineList.splice(0) | |||
this.headFormConfig[0].selectOptions.splice(0) | |||
@@ -281,6 +334,10 @@ export default { | |||
if (data.id) { | |||
this.selectedEquipmentId = data.id | |||
} | |||
}, | |||
handleSelect(index, indexPath) { | |||
const [id, name] = index.split('$--$') | |||
this.selectedEquipmentId = id | |||
} | |||
} | |||
} | |||
@@ -295,14 +352,13 @@ export default { | |||
.custom-container__common { | |||
background-color: #fff; | |||
padding: 0; | |||
border-radius: 4px; | |||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); | |||
border-radius: 8px; | |||
} | |||
.left-side-container { | |||
height: calc(100vh - 147px); | |||
padding: 0; | |||
background: #fafafa; | |||
// background: #fafafa; | |||
display: flex; | |||
flex-direction: column; | |||
@@ -320,7 +376,7 @@ export default { | |||
.left-side-container__content { | |||
flex: 1 1; | |||
overflow-y: scroll; | |||
overflow-y: auto; | |||
} | |||
} | |||
@@ -356,4 +412,25 @@ export default { | |||
.custom-tree >>> .is-current .el-tree-node__content { | |||
background: #fafafa; | |||
} | |||
.title-area { | |||
height: 72px; | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
padding: 0 24px; | |||
} | |||
.routes-area { | |||
flex: 1; | |||
height: 1px; | |||
background-color: #fff; | |||
overflow: hidden; | |||
overflow-y: auto; | |||
} | |||
.title-icon { | |||
height: 24px; | |||
width: 24px; | |||
} | |||
</style> |
@@ -0,0 +1,135 @@ | |||
<template> | |||
<el-submenu v-if="menuItem.children" :index="constructIndex(menuItem)"> | |||
<!-- 标题 --> | |||
<template slot="title"> | |||
<!-- <i class="el-icon-menu"></i> --> | |||
<i style="line-height: 1;"> | |||
<svg | |||
width="16px" | |||
height="16px" | |||
viewBox="0 0 16 16" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
xmlns:xlink="http://www.w3.org/1999/xlink" | |||
> | |||
<title>菜单</title> | |||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero"> | |||
<g id="编组-7" transform="translate(376.000000, 200.000000)"> | |||
<g id="菜单" transform="translate(0.000000, 2.000000)"> | |||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect> | |||
<path | |||
d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" | |||
id="形状" | |||
fill="currentColor" | |||
></path> | |||
</g> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</i> | |||
<span>{{ menuItem.name }}</span> | |||
</template> | |||
<!-- 主体 --> | |||
<template v-for="(submenuItem, idx) in menuItem.children"> | |||
<TestMenuItem :menuItem="submenuItem" :level="level + 1" /> | |||
</template> | |||
</el-submenu> | |||
<!-- 一级菜单 --> | |||
<el-menu-item v-else :index="constructIndex(menuItem)"> | |||
<!-- <i v-if="level !== 1" class="el-icon-aim"></i> | |||
<i v-else class="el-icon-menu"></i> --> | |||
<i style="line-height: 1px" v-if="level !== 1"> | |||
<svg | |||
width="8px" | |||
height="8px" | |||
viewBox="0 0 8 8" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
xmlns:xlink="http://www.w3.org/1999/xlink" | |||
> | |||
<title>椭圆形</title> | |||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g | |||
id="质量追溯_设备参数追溯" | |||
transform="translate(-396.000000, -246.000000)" | |||
fill="currentColor" | |||
fill-rule="nonzero" | |||
> | |||
<g id="编组-3" transform="translate(396.000000, 240.000000)"> | |||
<path | |||
d="M4,6 C6.209139,6 8,7.790861 8,10 C8,12.209139 6.209139,14 4,14 C1.790861,14 0,12.209139 0,10 C0,7.790861 1.790861,6 4,6 Z M4,7 C2.34314575,7 1,8.34314575 1,10 C1,11.6568542 2.34314575,13 4,13 C5.65685425,13 7,11.6568542 7,10 C7,8.34314575 5.65685425,7 4,7 Z" | |||
id="椭圆形" | |||
></path> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</i> | |||
<i style="line-height: 1;" v-else> | |||
<svg | |||
width="16px" | |||
height="16px" | |||
viewBox="0 0 16 16" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
xmlns:xlink="http://www.w3.org/1999/xlink" | |||
> | |||
<title>菜单</title> | |||
<g id="系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="质量追溯_设备参数追溯" transform="translate(-376.000000, -202.000000)" fill-rule="nonzero"> | |||
<g id="编组-7" transform="translate(376.000000, 200.000000)"> | |||
<g id="菜单" transform="translate(0.000000, 2.000000)"> | |||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect> | |||
<path | |||
d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" | |||
id="形状" | |||
fill="currentColor" | |||
></path> | |||
</g> | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</i> | |||
<span slot="title">{{ menuItem.name }}</span> | |||
</el-menu-item> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'TestMenuItem', | |||
props: { | |||
level: { | |||
type: Number, | |||
default: 1 | |||
}, | |||
index: { | |||
type: String, | |||
default: '' | |||
}, | |||
menuItem: { | |||
default: () => ({}) | |||
}, | |||
defaultActive: { | |||
type: Number, | |||
default: 0 | |||
} | |||
}, | |||
data() { | |||
return {} | |||
}, | |||
created() {}, | |||
mounted() {}, | |||
methods: { | |||
constructIndex(menuItem) { | |||
return menuItem.id + '$--$' + menuItem.name | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped></style> |
@@ -30,8 +30,8 @@ | |||
<section class="routes-area" v-if="showList"> | |||
<el-menu @select="handleSelect"> | |||
<!-- 此处假设了只有一个根节点 --> | |||
<template v-for="(menuItem, index) in menuListTrue[0].children"> | |||
<TestMenuItem :level="1" :menuItem="menuItem" /> | |||
<template v-for="(menuItem, index) in menuListTrue[0].children" > | |||
<TestMenuItem :level="1" :key="index" :menuItem="menuItem" /> | |||
</template> | |||
</el-menu> | |||
</section> | |||