Compare commits
No commits in common. "aa1461c29883ad67c9d35cf4915a84e04d47ec63" and "d056f545b6af600ed148ba1f2d59dca5bde290d1" have entirely different histories.
aa1461c298
...
d056f545b6
@ -84,15 +84,6 @@ export default {
|
|||||||
left: 64,
|
left: 64,
|
||||||
bottom: 28
|
bottom: 28
|
||||||
},
|
},
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'line',
|
|
||||||
axis: 'x'
|
|
||||||
},
|
|
||||||
extraCssText: 'width: 152px !important; height: 100px !important;'
|
|
||||||
},
|
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
@ -130,11 +121,10 @@ export default {
|
|||||||
fontSize: 10
|
fontSize: 10
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: false
|
||||||
lineStyle: {
|
// lineStyle: {
|
||||||
color: '#fff1',
|
// color: '#fff3'
|
||||||
type: 'dotted'
|
// }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -158,11 +148,10 @@ export default {
|
|||||||
fontSize: 10
|
fontSize: 10
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: false
|
||||||
lineStyle: {
|
// lineStyle: {
|
||||||
color: '#fff1',
|
// color: '#fff3'
|
||||||
type: 'dotted'
|
// }
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -179,10 +168,8 @@ export default {
|
|||||||
type: 'value',
|
type: 'value',
|
||||||
splitNumber: 3,
|
splitNumber: 3,
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#fff1',
|
color: '#fff3'
|
||||||
type: 'dotted'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
|||||||
@ -51,15 +51,6 @@ export default {
|
|||||||
bottom: 0,
|
bottom: 0,
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'line',
|
|
||||||
axis: 'x'
|
|
||||||
},
|
|
||||||
extraCssText: 'width: 152px !important; height: 100px !important;'
|
|
||||||
},
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
@ -98,10 +89,8 @@ export default {
|
|||||||
},
|
},
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#fff1',
|
color: '#fff3'
|
||||||
type: 'dotted'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -58,7 +58,7 @@ const tableProps = [
|
|||||||
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
|
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
|
||||||
]
|
]
|
||||||
const tableData = [
|
const tableData = [
|
||||||
{ eqName: '钢化', pl: 'A', priority: 1, checkContent: '表面检测光源和相机的卫生' },
|
{ 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: 3, checkContent: '边角检测设备水平的校正' },
|
||||||
{ eqName: '冷却', pl: 'B', priority: 2, 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: 3, checkContent: '设备表面的卫生' },
|
{ eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
|
||||||
{ eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
|
{ eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
|
||||||
{ eqName: '磨边后清洗机', pl: 'B', priority: 1, 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: 'B', priority: 3, checkContent: '操作台保持整洁' },
|
||||||
{ eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
|
{ eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
|
||||||
@ -74,7 +74,7 @@ const tableData = [
|
|||||||
{ eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
|
{ eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
|
||||||
{ eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
|
{ eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
|
||||||
{ eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
|
{ eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
|
||||||
{ eqName: '预热', pl: 'B', priority: 3, checkContent: '水冷机内水量充足并且清洁' },
|
{ eqName: '预热', pl: 'B', priority: 4, checkContent: '水冷机内水量充足并且清洁' },
|
||||||
{ eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
|
{ eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
|
||||||
{ eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
|
{ eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
|
||||||
{ eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }
|
{ eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }
|
||||||
@ -130,7 +130,7 @@ export default {
|
|||||||
color: #fff9;
|
color: #fff9;
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/* overflow-y: auto; */
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table-wrapper >>> .el-table th.is-leaf,
|
.el-table-wrapper >>> .el-table th.is-leaf,
|
||||||
|
|||||||
@ -67,7 +67,7 @@
|
|||||||
</TechyBox>
|
</TechyBox>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="min-height: calc(144px * var(--beilv)); flex: 1;">
|
<div style="min-height: calc(110px * var(--beilv)); flex: 1;">
|
||||||
<TechyBox class="dian-consume">
|
<TechyBox class="dian-consume">
|
||||||
<div class="header-part">
|
<div class="header-part">
|
||||||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
|
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
|
||||||
@ -79,7 +79,7 @@
|
|||||||
</TechyBox>
|
</TechyBox>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="min-height: calc(144px * var(--beilv)); flex: 1;">
|
<div style="min-height: calc(110px * var(--beilv)); flex: 1;">
|
||||||
<TechyBox class="elec-consume">
|
<TechyBox class="elec-consume">
|
||||||
<div class="header-part">
|
<div class="header-part">
|
||||||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
|
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
|
||||||
@ -153,7 +153,6 @@ export default {
|
|||||||
.header-part > span {
|
.header-part > span {
|
||||||
color: #fffc;
|
color: #fffc;
|
||||||
font-size: calc(12px * var(--beilv));
|
font-size: calc(12px * var(--beilv));
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-part {
|
.content-part {
|
||||||
|
|||||||
@ -60,13 +60,13 @@ const tableProps = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
const tableData = [
|
const tableData = [
|
||||||
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 1, duration: '30 min' },
|
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 4, duration: '30 min' },
|
||||||
{ eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 3, duration: '1 min' },
|
{ eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 4, duration: '1 min' },
|
||||||
{ eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
|
{ eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
|
||||||
{ eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
|
{ eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
|
||||||
{ eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
|
{ eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
|
||||||
{ eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
|
{ eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
|
||||||
{ eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 2, duration: '23 min' },
|
{ eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 4, duration: '23 min' },
|
||||||
{ eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
|
{ eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
|
||||||
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 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: 'B', content: '米织类劳约相查个而美五千老。', priority: 3, duration: '24 min' },
|
||||||
{ eqName: '打孔后清洗机', plName: 'A', content: '历红群色务口史验话备必工少光。', priority: 1, duration: '48 min' },
|
{ eqName: '打孔后清洗机', plName: 'A', content: '历红群色务口史验话备必工少光。', priority: 1, duration: '48 min' },
|
||||||
{ eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 3, duration: '29 min' },
|
{ eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 4, duration: '29 min' },
|
||||||
{ eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 1, duration: '47 min' },
|
{ eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 4, duration: '47 min' },
|
||||||
{ eqName: '下片', plName: 'A', content: '花公建了办间话个做直志利更在于。', priority: 2, duration: '49 min' },
|
{ eqName: '下片', plName: 'A', content: '花公建了办间话个做直志利更在于。', priority: 2, duration: '49 min' },
|
||||||
{ eqName: '一镀', plName: 'B', content: '术任该石代并战面广西处面住王规从他算。', priority: 3, duration: '42 min' },
|
{ eqName: '一镀', plName: 'B', content: '术任该石代并战面广西处面住王规从他算。', priority: 3, duration: '42 min' },
|
||||||
{ eqName: '二镀', plName: 'A', content: '体才眼自造统六识进后历定因受国。', priority: 2, duration: '42 min' },
|
{ eqName: '二镀', plName: 'A', content: '体才眼自造统六识进后历定因受国。', priority: 2, duration: '42 min' },
|
||||||
@ -144,7 +144,7 @@ export default {
|
|||||||
color: #fff9;
|
color: #fff9;
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
/* overflow-y: auto; */
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table-wrapper >>> .el-table th.is-leaf,
|
.el-table-wrapper >>> .el-table th.is-leaf,
|
||||||
|
|||||||
@ -1,11 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="right-content-quality-analysis">
|
||||||
:id="id"
|
<div :id="id" ref="fault-pie-chart" class="fault-pie-chart" />
|
||||||
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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -106,8 +101,8 @@ export default {
|
|||||||
configs: {
|
configs: {
|
||||||
title: {
|
title: {
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
left: '64%',
|
left: '63%',
|
||||||
top: '48%',
|
top: '35%',
|
||||||
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
@ -122,11 +117,10 @@ export default {
|
|||||||
fontWeight: 'lighter'
|
fontWeight: 'lighter'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
top: 0,
|
top: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
left: 0,
|
left: -15,
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
itemGap: 8,
|
itemGap: 8,
|
||||||
@ -210,8 +204,8 @@ export default {
|
|||||||
{
|
{
|
||||||
name: 'PieForm',
|
name: 'PieForm',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
center: ['65%', '60%'],
|
center: ['65%', '50%'],
|
||||||
radius: ['42%', '60%'],
|
radius: ['60%', '80%'],
|
||||||
avoidLabelOverlap: true,
|
avoidLabelOverlap: true,
|
||||||
label: {
|
label: {
|
||||||
formatter: params => {
|
formatter: params => {
|
||||||
@ -293,21 +287,19 @@ export default {
|
|||||||
const fs5 = this.calcFontsize(5 /** px*/)
|
const fs5 = this.calcFontsize(5 /** px*/)
|
||||||
const fs8 = this.calcFontsize(8 /** px*/)
|
const fs8 = this.calcFontsize(8 /** px*/)
|
||||||
const fs10 = this.calcFontsize(10 /** px*/)
|
const fs10 = this.calcFontsize(10 /** px*/)
|
||||||
const fs12 = this.calcFontsize(12 /** px*/)
|
const fs14 = this.calcFontsize(14 /** px*/)
|
||||||
const fs16 = this.calcFontsize(16 /** px*/)
|
const fs16 = this.calcFontsize(16 /** px*/)
|
||||||
const titleSize = this.calcFontsize(22 /** px*/)
|
|
||||||
const subtitleSize = this.calcFontsize(14 /** px*/)
|
|
||||||
|
|
||||||
this.configs.title.textStyle.fontSize = titleSize
|
this.configs.title.textStyle.fontSize = fs14
|
||||||
this.configs.title.subtextStyle.fontSize = subtitleSize
|
this.configs.title.subtextStyle.fontSize = fs10
|
||||||
|
|
||||||
this.configs.legend.top = '24%'
|
this.configs.legend.top = '10%'
|
||||||
this.configs.legend.itemGap = fs8
|
this.configs.legend.itemGap = 0
|
||||||
this.configs.legend.itemWidth = fs8
|
this.configs.legend.itemWidth = fs8
|
||||||
|
|
||||||
this.configs.legend.textStyle.rich.a.fontSize = fs12
|
this.configs.legend.textStyle.rich.a.fontSize = fs10
|
||||||
this.configs.legend.textStyle.rich.a.lineHeight = fs16
|
this.configs.legend.textStyle.rich.a.lineHeight = fs16
|
||||||
this.configs.legend.textStyle.rich.b.fontSize = fs12
|
this.configs.legend.textStyle.rich.b.fontSize = fs10
|
||||||
// this.configs.legend.textStyle.rich.b.lineHeight = fs16
|
// this.configs.legend.textStyle.rich.b.lineHeight = fs16
|
||||||
this.configs.legend.textStyle.rich.c.width = fs8
|
this.configs.legend.textStyle.rich.c.width = fs8
|
||||||
this.configs.legend.textStyle.rich.c.height = fs8
|
this.configs.legend.textStyle.rich.c.height = fs8
|
||||||
@ -325,11 +317,11 @@ export default {
|
|||||||
this.configs.legend.textStyle.rich.g.height = fs8
|
this.configs.legend.textStyle.rich.g.height = fs8
|
||||||
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
||||||
|
|
||||||
this.configs.series[0].label.rich.first.fontSize = fs12
|
this.configs.series[0].label.rich.first.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.second.fontSize = fs12
|
this.configs.series[0].label.rich.second.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.third.fontSize = fs12
|
this.configs.series[0].label.rich.third.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.fourth.fontSize = fs12
|
this.configs.series[0].label.rich.fourth.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.fifth.fontSize = fs12
|
this.configs.series[0].label.rich.fifth.fontSize = fs10
|
||||||
|
|
||||||
this.chart.setOption(this.configs)
|
this.chart.setOption(this.configs)
|
||||||
}
|
}
|
||||||
@ -338,9 +330,9 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* .right-content-quality-analysis {
|
.right-content-quality-analysis {
|
||||||
height: calc(100% - 32px);
|
height: calc(100% - 32px);
|
||||||
} */
|
}
|
||||||
|
|
||||||
.fault-pie-chart {
|
.fault-pie-chart {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -1,5 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
|
<div style="height: calc(100% - 36px); width: 100%; position: relative;">
|
||||||
|
<div :id="id" ref="techy-line-chart" class="techy-chart" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -31,26 +33,18 @@ export default {
|
|||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
option: {
|
||||||
color: ['#59CBE8', '#FF7345', '#E93CAC', '#9452FF', '#6A6E87', '#52FFF1'],
|
color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
|
||||||
grid: {
|
grid: {
|
||||||
top: '40%',
|
top: '45%',
|
||||||
left: '5%',
|
left: 0,
|
||||||
right: '6%',
|
right: 12,
|
||||||
bottom: '10%',
|
bottom: '5%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross'
|
|
||||||
},
|
|
||||||
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
|
|
||||||
},
|
|
||||||
legend: {
|
legend: {
|
||||||
width: '72%',
|
width: '72%',
|
||||||
top: '20%',
|
top: '20%',
|
||||||
right: '6%',
|
right: 12,
|
||||||
itemWidth: 12,
|
itemWidth: 12,
|
||||||
itemHeight: 8,
|
itemHeight: 8,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
@ -68,7 +62,7 @@ export default {
|
|||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 10,
|
fontSize: 8,
|
||||||
color: '#fffa'
|
color: '#fffa'
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
@ -79,20 +73,19 @@ export default {
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '成品率 ',
|
name: '成品率',
|
||||||
min: 'dataMin',
|
min: 'dataMin',
|
||||||
splitNumber: 3,
|
splitNumber: 2,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#fffc',
|
color: '#fffc',
|
||||||
align: 'right',
|
align: 'right',
|
||||||
verticalAlign: 'bottom',
|
fontSize: 8
|
||||||
fontSize: 12
|
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 11,
|
fontSize: 10,
|
||||||
color: '#fffa',
|
color: '#fffa',
|
||||||
formatter: '{value} %'
|
formatter: '{value} %'
|
||||||
},
|
},
|
||||||
@ -277,7 +270,7 @@ export default {
|
|||||||
.techy-chart {
|
.techy-chart {
|
||||||
/* background: #cccc; */
|
/* background: #cccc; */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: -36%;
|
||||||
height: 150%;
|
height: 150%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -55,7 +55,7 @@ export default {
|
|||||||
grid-auto-rows: min-content;
|
grid-auto-rows: min-content;
|
||||||
gap: calc(4px * var(--beilv)) calc(6px * var(--beilv));
|
gap: calc(4px * var(--beilv)) calc(6px * var(--beilv));
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
align-content: flex-start;
|
align-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.analysis-item {
|
.analysis-item {
|
||||||
|
|||||||
@ -1,240 +1,43 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <techy-bar :extra-space-between-zero="16" :datainfo="[
|
<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="[
|
||||||
{
|
{
|
||||||
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||||
|
bottomColor: '#49FBD6',
|
||||||
name: '产量',
|
name: '产量',
|
||||||
list: [64, 91, 55, 65, 37, 77]
|
data: [64, 91, 55, 65, 37, 77]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||||
|
bottomColor: '#31A2FF',
|
||||||
name: '能耗',
|
name: '能耗',
|
||||||
list: [32, 65, 65, 54, 37, 77]
|
data: [32, 65, 65, 54, 37, 77]
|
||||||
}
|
}
|
||||||
]" /> -->
|
]"
|
||||||
<div class="techy-chart" ref="realtimeLineChart"></div>
|
/>
|
||||||
|
</techy-box>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import echarts from 'echarts'
|
import TechyBox from './TechyBox.vue'
|
||||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
import newBar from './newBar.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RealtimeLineChart',
|
name: 'RealtimeProductionHorizontalBarChart',
|
||||||
mixins: [resize],
|
components: { TechyBox, newBar },
|
||||||
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
|
props: {},
|
||||||
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() {
|
data() {
|
||||||
const colors = ['#1A99FF', '#F0D63C', '#E02094']
|
return {}
|
||||||
|
}
|
||||||
// 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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.techy-chart {
|
.techy-chart {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,286 +0,0 @@
|
|||||||
<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;
|
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;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: calc(20px * var(--beilv));
|
padding: calc(24px * var(--beilv));
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
|
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" />
|
<img class="logo-img" src="./logo.png" alt="cnbm" />
|
||||||
<span class="techy-header__title">{{ headTitle }}</span>
|
<span class="techy-header__title">{{ headTitle }}</span>
|
||||||
|
|
||||||
<div class="date">{{ now.format('yyyy.MM.DD') }}</div>
|
<div class="date">2022.10.14</div>
|
||||||
<div class="time">{{ now.format('HH:mm:ss') }}</div>
|
<div class="time">20:12:24</div>
|
||||||
|
|
||||||
<div class="fullscreen-btn">
|
<div class="fullscreen-btn">
|
||||||
<span @click="handleClick('home')" v-html="homeSvg" />
|
<span @click="handleClick('home')" v-html="homeSvg" />
|
||||||
@ -16,7 +16,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Cookie from 'js-cookie'
|
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 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">
|
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">
|
||||||
@ -64,20 +63,7 @@ export default {
|
|||||||
fullScreenSvg,
|
fullScreenSvg,
|
||||||
homeSvg,
|
homeSvg,
|
||||||
unfullScreenSvg,
|
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: {
|
methods: {
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
@ -37,15 +37,13 @@
|
|||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<b>通信状态 :</b>
|
<b>通信状态 :</b>
|
||||||
<span class="round-dot">
|
<span
|
||||||
<span
|
class="round-dot"
|
||||||
class="dot-icon"
|
:class="{
|
||||||
:class="{
|
'danger-dot': currentEquipment.status === '故障',
|
||||||
'green-dot': currentEquipment.status === '生产中',
|
'warning-dot': currentEquipment.status === '调试中'
|
||||||
'red-dot': currentEquipment.status === '故障',
|
}"
|
||||||
'yellow-dot': currentEquipment.status === '调试中'
|
>
|
||||||
}"
|
|
||||||
></span>
|
|
||||||
{{ currentEquipment.status }}
|
{{ currentEquipment.status }}
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
@ -261,14 +259,12 @@ export default {
|
|||||||
}
|
}
|
||||||
/* 工序质量分析 */
|
/* 工序质量分析 */
|
||||||
.ws-quality {
|
.ws-quality {
|
||||||
/* height: calc(228px * var(--beilv)); */
|
height: calc(228px * var(--beilv));
|
||||||
min-height: calc(136px * var(--beilv));
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
/* 产线成品率 */
|
/* 产线成品率 */
|
||||||
.production {
|
.production {
|
||||||
height: calc(256px * var(--beilv));
|
height: calc(195px * var(--beilv));
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-part {
|
.bottom-part {
|
||||||
@ -332,8 +328,8 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: calc(128px * var(--beilv));
|
height: calc(136px * var(--beilv));
|
||||||
width: calc(188px * var(--beilv));
|
width: calc(176px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
.techy-body-part__middle__inner {
|
.techy-body-part__middle__inner {
|
||||||
@ -342,7 +338,6 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
/* gap: calc(6px * var(--beilv)); */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.techy-body-part__middle__inner p {
|
.techy-body-part__middle__inner p {
|
||||||
@ -351,7 +346,6 @@ export default {
|
|||||||
font-size: calc(12px * var(--beilv));
|
font-size: calc(12px * var(--beilv));
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.techy-body-part__middle__inner p > span {
|
.techy-body-part__middle__inner p > span {
|
||||||
@ -360,40 +354,19 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.techy-body-part__middle__inner p > span.round-dot {
|
.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));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot-icon {
|
.round-dot::before {
|
||||||
height: calc(16px * var(--beilv));
|
content: '';
|
||||||
width: calc(16px * var(--beilv));
|
position: absolute;
|
||||||
}
|
|
||||||
|
|
||||||
.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));
|
top: calc(4px * var(--beilv));
|
||||||
left: calc(16px * var(--beilv)); */
|
left: calc(16px * var(--beilv));
|
||||||
/* width: calc(8px * var(--beilv));
|
width: calc(8px * var(--beilv));
|
||||||
height: calc(8px * var(--beilv));
|
height: calc(8px * var(--beilv));
|
||||||
background-color: rgb(82, 231, 82);
|
background-color: rgb(82, 231, 82);
|
||||||
border-radius: calc(4px * var(--beilv));
|
border-radius: calc(4px * var(--beilv));
|
||||||
} */
|
}
|
||||||
|
|
||||||
.danger-dot::before {
|
.danger-dot::before {
|
||||||
background-color: #e71837;
|
background-color: #e71837;
|
||||||
|
|||||||
@ -37,27 +37,11 @@
|
|||||||
<div class="row-2">
|
<div class="row-2">
|
||||||
<!-- 设备分析 -->
|
<!-- 设备分析 -->
|
||||||
<techy-container :title="'设备分析'" icon="趋势搜索">
|
<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="1">产线一</option>
|
||||||
<option value="2">产线二</option>
|
<option value="2">产线二</option>
|
||||||
<option value="3">产线三</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 class="equipment-analysis__inner">
|
||||||
<div>
|
<div>
|
||||||
<TechyBox class="pl-jdl">
|
<TechyBox class="pl-jdl">
|
||||||
@ -185,7 +169,6 @@ export default {
|
|||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
plSelect: null,
|
|
||||||
equipmentExceptionProps,
|
equipmentExceptionProps,
|
||||||
equipmentExceptionDatalist,
|
equipmentExceptionDatalist,
|
||||||
equipmentAlarmProps,
|
equipmentAlarmProps,
|
||||||
@ -393,16 +376,4 @@ export default {
|
|||||||
top: calc(24px * var(--beilv));
|
top: calc(24px * var(--beilv));
|
||||||
left: calc(140px * 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>
|
</style>
|
||||||
|
|||||||
@ -14,8 +14,6 @@
|
|||||||
<div class="container-title-wrapper">
|
<div class="container-title-wrapper">
|
||||||
<span class="container-icon" v-html="computeIcon" />
|
<span class="container-icon" v-html="computeIcon" />
|
||||||
<span class="container-title">{{ title }}</span>
|
<span class="container-title">{{ title }}</span>
|
||||||
|
|
||||||
<slot name="titleSelect" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<slot />
|
<slot />
|
||||||
|
|||||||
@ -29,7 +29,7 @@
|
|||||||
:inject-data="{ ...scope.row, ...item }"
|
:inject-data="{ ...scope.row, ...item }"
|
||||||
@emitData="emitData"
|
@emitData="emitData"
|
||||||
/>
|
/>
|
||||||
<span v-else :title="scope.row[item.prop]">{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<slot name="content" />
|
<slot name="content" />
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="techy-vertical-table">
|
<div class="techy-vertical-table">
|
||||||
<div v-for="(row, index) in tableProps" :key="'row' + index" class="trow">
|
<div v-for="(row, index) in tableProps" :key="'row' + index" class="trow">
|
||||||
<span class="thead">{{ row.label }}</span>
|
<span class="thead">{{ row.label }}</span>
|
||||||
<span v-for="(item, idx) in dataList" :key="'item_' + index + idx" class="tbody" :title="item[row.prop]">
|
<span v-for="(item, idx) in dataList" :key="'item_' + index + idx" class="tbody">
|
||||||
<template v-if="!row.subcomponent">
|
<template v-if="!row.subcomponent">
|
||||||
{{ item[row.prop] }}
|
{{ item[row.prop] }}
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -25,26 +25,23 @@ export default {
|
|||||||
bottom: 0,
|
bottom: 0,
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
tooltip: {
|
xAxis: [
|
||||||
show: true,
|
{
|
||||||
type: 'shadow',
|
type: 'category',
|
||||||
trigger: 'item'
|
data: ['A', 'B', 'C', 'D', 'E'],
|
||||||
},
|
axisTick: {
|
||||||
xAxis: {
|
alignWithLabel: true
|
||||||
type: 'category',
|
},
|
||||||
data: ['A', 'B', 'C', 'D', 'E'],
|
axisLine: {
|
||||||
axisTick: {
|
lineStyle: {
|
||||||
alignWithLabel: true
|
color: '#5982B233'
|
||||||
},
|
}
|
||||||
axisLine: {
|
},
|
||||||
lineStyle: {
|
axisLabel: {
|
||||||
color: '#5982B233'
|
color: '#fff'
|
||||||
}
|
}
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
color: '#fff'
|
|
||||||
}
|
}
|
||||||
},
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
@ -61,7 +58,7 @@ export default {
|
|||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#ffffff9d'
|
color: '#ffffff9d'
|
||||||
},
|
},
|
||||||
axisTick: { show: false }
|
axisTick: { show : false }
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
|
|||||||
@ -42,26 +42,26 @@ export const equipmentExceptionProps = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
export const equipmentExceptionDatalist = [
|
export const equipmentExceptionDatalist = [
|
||||||
{ "eqName": "丝印机", "pl": "A", "content": "网版推出异常", "creator": "马磊", "time": "2022-11-20 22:00:34", "priority": 3 },
|
{ "eqName": "冷却", "pl": "A", "content": "路因同义价带本知生联矿列。", "creator": "马磊", "time": "2021-04-15 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": "2021-03-15 06:30:01", "priority": 2 },
|
||||||
{ "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "冯丽", "time": "2022-11-20 07:09:16", "priority": 2 },
|
{ "eqName": "固化", "pl": "B", "content": "形管始会回从观且明确意主照根受步究。", "creator": "冯丽", "time": "2020-11-21 07:09:16", "priority": 2 },
|
||||||
{ "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "梁秀兰", "time": "2022-11-20 08:21:36", "priority": 3 },
|
{ "eqName": "磨边", "pl": "A", "content": "己由九保先造线后还单省于手。", "creator": "梁秀兰", "time": "2020-03-21 08:21:36", "priority": 3 },
|
||||||
{ "eqName": "丝印机", "pl": "B", "content": "印刷轴异常", "creator": "卢敏", "time": "2022-11-20 04:45:00", "priority": 2 },
|
{ "eqName": "一镀", "pl": "B", "content": "变西列场展越备线活酸被究他压建院家。", "creator": "卢敏", "time": "2022-10-23 04:45:00", "priority": 2 },
|
||||||
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "方勇", "time": "2022-11-20 06:41:06", "priority": 2 },
|
{ "eqName": "钢化", "pl": "A", "content": "解听共将取色照品起族西全日色。", "creator": "方勇", "time": "2020-12-11 06:41:06", "priority": 2 },
|
||||||
{ "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "赵静", "time": "2022-11-20 03:36:47", "priority": 2 },
|
{ "eqName": "打孔", "pl": "B", "content": "际从定接花她变人周而导总流西更观史。", "creator": "赵静", "time": "2021-01-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": "2021-11-30 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-10-10 12:01:14", "priority": 1 },
|
||||||
{ "eqName": "丝印机", "pl": "A", "content": "进气压力过低", "creator": "熊静", "time": "2022-11-20 03:24:33", "priority": 1 },
|
{ "eqName": "磨边", "pl": "A", "content": "极满具究极力入矿电适花军系象。", "creator": "熊静", "time": "2021-01-27 03:24:33", "priority": 1 },
|
||||||
{ "eqName": "清洗机", "pl": "B", "content": "进料检测异常", "creator": "龚明", "time": "2022-11-21 16:26:11", "priority": 2 },
|
{ "eqName": "二镀", "pl": "B", "content": "科传军正战没题许青生面发用矿科。", "creator": "龚明", "time": "2022-02-28 16:26:11", "priority": 2 },
|
||||||
{ "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "万娟", "time": "2022-11-21 08:44:41", "priority": 2 },
|
{ "eqName": "磨边", "pl": "A", "content": "入以品切中算极同三那性当。", "creator": "万娟", "time": "2022-08-23 08:44:41", "priority": 2 },
|
||||||
{ "eqName": "丝印机", "pl": "B", "content": "进气压力过低", "creator": "徐丽", "time": "2022-11-21 21:15:10", "priority": 2 },
|
{ "eqName": "固化", "pl": "B", "content": "火音红建活先以它法对所重间量马斗将。", "creator": "徐丽", "time": "2021-07-30 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-05-05 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": "2021-12-01 07:24:59", "priority": 2 },
|
||||||
{ "eqName": "钢化炉", "pl": "A", "content": "加热炉体超温报警", "creator": "邱平", "time": "2022-11-21 17:53:18", "priority": 2 },
|
{ "eqName": "打孔后清洗机", "pl": "A", "content": "查的分口眼约三委斯该的品通身式子听。", "creator": "邱平", "time": "2020-01-31 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": "2021-09-20 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-08-05 17:29:44", "priority": 2 },
|
||||||
{ "eqName": "清洗机", "pl": "B", "content": "输送变频报警", "creator": "周洋", "time": "2022-11-21 02:49:09", "priority": 3 },
|
{ "eqName": "钢后清洗机", "pl": "B", "content": "委且到示为位要强等住整县值八。", "creator": "周洋", "time": "2021-01-26 02:49:09", "priority": 3 },
|
||||||
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "邱超", "time": "2022-11-21 20:41:53", "priority": 1 },
|
{ "eqName": "上片", "pl": "A", "content": "报据深广一统南车步约果龙值区识车深。", "creator": "邱超", "time": "2021-12-21 20:41:53", "priority": 1 },
|
||||||
]
|
]
|
||||||
|
|
||||||
/** 设备异常报警 */
|
/** 设备异常报警 */
|
||||||
@ -107,35 +107,35 @@ export const equipmentAlarmProps = [
|
|||||||
|
|
||||||
export const equipmentAlarmDatalist = [
|
export const equipmentAlarmDatalist = [
|
||||||
{
|
{
|
||||||
"pl": "B", "eqName": "丝印机", "eqCode": "B5SP20200109025453", "content": "网版推出异常", "priority": 3
|
"pl": "B", "eqName": "丝印", "eqCode": "B5SP20200109025453", "content": "常下命般里究千么间龙该海战据运更。", "priority": 3
|
||||||
},
|
},
|
||||||
{ "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A2CAE20210605043851", "content": "输送变频报警", "priority": 2 },
|
{ "pl": "A", "eqName": "下片", "eqCode": "A2UL20210605043851", "content": "而至收选查万众家除候包要意集。", "priority": 2 },
|
||||||
{ "pl": "B", "eqName": "磨边机", "eqCode": "B4ED20200328154356", "content": "磨轮过载", "priority": 1 },
|
{ "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200328154356", "content": "石十求四指么放与程到置身技红。", "priority": 1 },
|
||||||
{ "pl": "B", "eqName": "镀膜", "eqCode": "B5FC20220307070115", "content": "胶辊变频异常", "priority": 2 },
|
{ "pl": "B", "eqName": "一镀", "eqCode": "B5FC20220307070115", "content": "即计报做切除听见济共金然维走。", "priority": 2 },
|
||||||
{ "pl": "B", "eqName": "丝印机", "eqCode": "B7SP20190927110003", "content": "印刷轴异常", "priority": 2 },
|
{ "pl": "B", "eqName": "固化", "eqCode": "B7CO20190927110003", "content": "应其得候解北运样价可强先们速。", "priority": 2 },
|
||||||
{
|
{
|
||||||
"pl": "A", "eqName": "清洗机", "eqCode": "A3CAP20200727075125", "content": "进料检测异常", "priority": 3
|
"pl": "A", "eqName": "打孔后清洗机", "eqCode": "A3CAP20200727075125", "content": "员因江单话况质己家小展矿指到之组她。", "priority": 3
|
||||||
},
|
},
|
||||||
{ "pl": "A", "eqName": "丝印机", "eqCode": "A7SP20200512213432", "content": "进气压力过低", "priority": 3 },
|
{ "pl": "A", "eqName": "磨边", "eqCode": "A7ED20200512213432", "content": "观长因带至成为也越效飞约况面的。", "priority": 3 },
|
||||||
{
|
{
|
||||||
"pl": "A", "eqName": "磨边机", "eqCode": "A4ED20220608145053", "content": "磨轮过载", "priority": 2
|
"pl": "A", "eqName": "固化", "eqCode": "A4CO20220608145053", "content": "回状边及族值强第手听存派治严农象江。", "priority": 2
|
||||||
},
|
},
|
||||||
{ "pl": "B", "eqName": "钢化炉", "eqCode": "B4CO20200526045602", "content": "传动变频器故障", "priority": 1 },
|
{ "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200526045602", "content": "采料这百他打体拉素但即面之。", "priority": 1 },
|
||||||
{
|
{
|
||||||
"pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20220326162041", "content": "毛刷过载", "priority": 2
|
"pl": "B", "eqName": "打孔", "eqCode": "B6LP20220326162041", "content": "列保己问向九青保自济习后长而类月段斗。", "priority": 2
|
||||||
},
|
},
|
||||||
{ "pl": "A", "eqName": "磨边机", "eqCode": "A4ED20200325081934", "content": "磨轮过载", "priority": 2 },
|
{ "pl": "A", "eqName": "磨边", "eqCode": "A4ED20200325081934", "content": "产矿身断通者和意层价前就知头。", "priority": 2 },
|
||||||
{
|
{
|
||||||
"pl": "B", "eqName": "丝印机", "eqCode": "B1SP20201220183649", "content": "印刷轴异常", "priority": 2
|
"pl": "B", "eqName": "预热", "eqCode": "B1PR20201220183649", "content": "志收一支习于何况支于自原地书飞感。", "priority": 2
|
||||||
},
|
},
|
||||||
{ "pl": "A", "eqName": "镀膜", "eqCode": "A3SC20220414054819", "content": "固化变频异常", "priority": 2 },
|
{ "pl": "A", "eqName": "二镀", "eqCode": "A3SC20220414054819", "content": "义点做产往新以速结工情最六素难强干。", "priority": 2 },
|
||||||
{ "pl": "A", "eqName": "磨边机", "eqCode": "A8ED20200704010549", "content": "磨轮过载", "priority": 2 },
|
{ "pl": "A", "eqName": "固化", "eqCode": "A8CO20200704010549", "content": "例强起取南然任都来因山该收次代相。", "priority": 2 },
|
||||||
{ "pl": "B", "eqName": "清洗机", "eqCode": "B1CAT20200323134700", "content": "进料检测异常", "priority": 3 },
|
{ "pl": "B", "eqName": "预热", "eqCode": "B1PR20200323134700", "content": "消选们度周料革理观构平活组事件。", "priority": 3 },
|
||||||
{ "pl": "A", "eqName": "丝印机", "eqCode": "A1SP20200513020427", "content": "网版推出异常", "priority": 1 },
|
{ "pl": "A", "eqName": "打孔", "eqCode": "A1LP20200513020427", "content": "华家是可路议自商取半也五。", "priority": 1 },
|
||||||
{ "pl": "A", "eqName": "钢化炉", "eqCode": "A7CO20210928172616", "content": "加热炉体超温报警", "priority": 2 },
|
{ "pl": "A", "eqName": "钢化", "eqCode": "A7TF20210928172616", "content": "点量都酸较此结同去写群论被千。", "priority": 2 },
|
||||||
{ "pl": "A", "eqName": "镀膜", "eqCode": "A5SC20210104132647", "content": "固化变频异常", "priority": 1 },
|
{ "pl": "A", "eqName": "二镀", "eqCode": "A5SC20210104132647", "content": "切提个水铁外步油好连身相争外群儿此。", "priority": 1 },
|
||||||
{ "pl": "A", "eqName": "钢化炉", "eqCode": "A4ED20210225140150", "content": "加热炉体超温报警", "priority": 1 },
|
{ "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A4CAE20210225140150", "content": "学七直以半去江内后上知往值质值。", "priority": 1 },
|
||||||
{ "pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20200831083210", "content": "进料检测异常", "priority": 2 },
|
{ "pl": "B", "eqName": "打孔后清洗机", "eqCode": "B6CAP20200831083210", "content": "活小着许今取图国步成流海分就适转院容。", "priority": 2 },
|
||||||
]
|
]
|
||||||
|
|
||||||
/** 设备分析 */
|
/** 设备分析 */
|
||||||
|
|||||||
@ -46,7 +46,7 @@
|
|||||||
class="absolute top-0 left-0"
|
class="absolute top-0 left-0"
|
||||||
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
||||||
>
|
>
|
||||||
<!-- <new-bar
|
<new-bar
|
||||||
chart-name="realtime-cost-production"
|
chart-name="realtime-cost-production"
|
||||||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
||||||
:data-list="[
|
:data-list="[
|
||||||
@ -63,19 +63,6 @@
|
|||||||
data: [162, 172, 122, 15, 82, 74]
|
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>
|
</div>
|
||||||
</techy-box>
|
</techy-box>
|
||||||
@ -87,7 +74,7 @@
|
|||||||
class="absolute top-0 left-0"
|
class="absolute top-0 left-0"
|
||||||
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
|
||||||
>
|
>
|
||||||
<!-- <new-bar
|
<new-bar
|
||||||
chart-name="realtime-cost-production"
|
chart-name="realtime-cost-production"
|
||||||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
|
||||||
unit-name="单位: 千片"
|
unit-name="单位: 千片"
|
||||||
@ -105,20 +92,6 @@
|
|||||||
data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
|
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>
|
</div>
|
||||||
</techy-box>
|
</techy-box>
|
||||||
@ -129,51 +102,7 @@
|
|||||||
<div class="grow flex gap-16">
|
<div class="grow flex gap-16">
|
||||||
<div class="width-222">
|
<div class="width-222">
|
||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<techy-analysis-header :show-top-icon="false">
|
<techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
|
||||||
产线缺陷分析
|
|
||||||
<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%;">
|
<div style="position: absolute; top: 0; left:0; width: 100%; height: 100%;">
|
||||||
<span
|
<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));"
|
style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(16px * var(--beilv));"
|
||||||
@ -182,37 +111,73 @@
|
|||||||
</span>
|
</span>
|
||||||
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
|
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
|
||||||
</div>
|
</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>
|
</techy-box>
|
||||||
</div>
|
</div>
|
||||||
<div class="grow">
|
<div class="grow">
|
||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<techy-analysis-header class="production-rate">
|
<techy-analysis-header>产品成品率</techy-analysis-header>
|
||||||
产品成品率
|
|
||||||
<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%;">
|
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
||||||
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</techy-box>
|
</techy-box>
|
||||||
</div>
|
</div>
|
||||||
@ -289,8 +254,7 @@ import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
|
|||||||
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
|
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
import screenfull from 'screenfull'
|
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 NewLineStack from './components/charts/newLineStack.vue'
|
||||||
|
|
||||||
import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData'
|
import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData'
|
||||||
@ -306,7 +270,7 @@ export default {
|
|||||||
TechyTable,
|
TechyTable,
|
||||||
// FaultCategoryChart,
|
// FaultCategoryChart,
|
||||||
PlFaultAnalysisPieChart,
|
PlFaultAnalysisPieChart,
|
||||||
TechyBar,
|
NewBar,
|
||||||
NewLineStack
|
NewLineStack
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@ -589,22 +553,17 @@ export default {
|
|||||||
.pl-select,
|
.pl-select,
|
||||||
.date-select {
|
.date-select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: calc(16px * var(--beilv));
|
||||||
right: 0;
|
right: calc(22px * var(--beilv));
|
||||||
/* top: calc(16px * var(--beilv)); */
|
|
||||||
/* right: calc(22px * var(--beilv)); */
|
|
||||||
border-radius: calc(2px * var(--beilv));
|
border-radius: calc(2px * var(--beilv));
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl-select {
|
.pl-select {
|
||||||
right: unset;
|
right: unset;
|
||||||
left: 0;
|
left: calc(10px * var(--beilv));
|
||||||
/* left: calc(10px * var(--beilv)); */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl-select span,
|
.pl-select span,
|
||||||
@ -626,14 +585,4 @@ export default {
|
|||||||
.width-222 {
|
.width-222 {
|
||||||
width: calc(375px * var(--beilv));
|
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>
|
</style>
|
||||||
|
|||||||
@ -2,12 +2,12 @@
|
|||||||
<div class="techy-analysis-header">
|
<div class="techy-analysis-header">
|
||||||
<template v-if="type === 'special'">
|
<template v-if="type === 'special'">
|
||||||
<div
|
<div
|
||||||
style="transform: skewX(32deg); background: #fff0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
|
style="background: #ccc0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
|
||||||
>
|
>
|
||||||
<div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>
|
<div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>
|
||||||
|
|
||||||
<div style="flex: 1; white-space: nowrap; overflow: hidden;">
|
<div style="flex: 1; white-space: nowrap; overflow: hidden;">
|
||||||
<span class="top-icon" style="transform: skewX(-32deg); ">
|
<span class="top-icon">
|
||||||
<svg
|
<svg
|
||||||
width="100%"
|
width="100%"
|
||||||
height="100%"
|
height="100%"
|
||||||
@ -55,10 +55,10 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<span class="techy-analysis-header__title" style="display: inline-block; transform: translateX(-4px) skewX(-32deg); ">
|
<span class="techy-analysis-header__title">
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
<span class="top-icon" style="transform: skewX(-32deg); ">
|
<span class="top-icon">
|
||||||
<svg
|
<svg
|
||||||
width="100%"
|
width="100%"
|
||||||
height="100%"
|
height="100%"
|
||||||
@ -108,12 +108,9 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="legend" style="background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));">
|
||||||
class="legend legend-right"
|
<div class="legend-item pla" style="margin-right: calc(8px * var(--beilv));">产线A</div>
|
||||||
style="transform: skewX(-32deg); background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));"
|
<div class="legend-item plb">产线B</div>
|
||||||
>
|
|
||||||
<div class="legend-item pla" style=" margin-right: calc(8px * var(--beilv));">产线A</div>
|
|
||||||
<div class="legend-item plb" style=" ">产线B</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -219,8 +216,6 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<slot name="dateSelect" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -247,9 +242,6 @@ export default {
|
|||||||
.techy-analysis-header {
|
.techy-analysis-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: calc(16px * var(--beilv));
|
margin-bottom: calc(16px * var(--beilv));
|
||||||
position: relative;
|
|
||||||
white-space: nowrap;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.techy-analysis-header__title {
|
.techy-analysis-header__title {
|
||||||
@ -265,19 +257,11 @@ export default {
|
|||||||
margin-bottom: calc(2px * var(--beilv));
|
margin-bottom: calc(2px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-right {
|
|
||||||
display: flex;
|
|
||||||
gap: calc(8px * var(--beilv));
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend-item {
|
.legend-item {
|
||||||
font-size: calc(10px * var(--beilv));
|
font-size: calc(10px * var(--beilv));
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #dff1fe;
|
color: #dff1fe;
|
||||||
display: flex;
|
display: inline-block;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-item::before {
|
.legend-item::before {
|
||||||
|
|||||||
@ -1,289 +0,0 @@
|
|||||||
<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>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
398
src/views/QualityManager/components/charts/newBar.vue
Normal file
398
src/views/QualityManager/components/charts/newBar.vue
Normal file
@ -0,0 +1,398 @@
|
|||||||
|
<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,11 +10,6 @@ export default {
|
|||||||
name: 'PlFaultAnalysisPieChart',
|
name: 'PlFaultAnalysisPieChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
props: {
|
props: {
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
validator: val => ['month', 'day'].indexOf(val) !== -1
|
|
||||||
},
|
|
||||||
dataUpdateToken: {
|
dataUpdateToken: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'default-token'
|
default: 'default-token'
|
||||||
@ -24,7 +19,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
configs: {
|
configs: {
|
||||||
color: ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'],
|
color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
extraCssText: 'width: 180px !important; ',
|
extraCssText: 'width: 180px !important; ',
|
||||||
@ -36,45 +31,41 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: 56,
|
top: '25%',
|
||||||
left: '2%',
|
left: '2%',
|
||||||
right: '5%',
|
right: '5%',
|
||||||
bottom: '5%',
|
bottom: '5%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: [
|
||||||
type: 'category',
|
{
|
||||||
boundaryGap: false,
|
type: 'category',
|
||||||
axisLine: {
|
boundaryGap: false,
|
||||||
lineStyle: {
|
axisLine: {
|
||||||
color: '#ffffff66'
|
lineStyle: {
|
||||||
}
|
color: '#ffffff66'
|
||||||
},
|
}
|
||||||
axisTick: { show: false },
|
|
||||||
axisLabel: {
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 10,
|
|
||||||
color: '#fff8' //
|
|
||||||
},
|
},
|
||||||
margin: 12
|
axisTick: { show: false },
|
||||||
},
|
axisLabel: {
|
||||||
data:
|
textStyle: {
|
||||||
this.mode === 'month'
|
color: 'rgba(255,255,255,1)' //
|
||||||
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
},
|
||||||
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
margin: 12
|
||||||
},
|
},
|
||||||
|
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
|
||||||
|
}
|
||||||
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
name: '成品率 ',
|
name: '成品率',
|
||||||
type: 'value',
|
type: 'value',
|
||||||
min: 'dataMin',
|
min: 'dataMin',
|
||||||
splitNumber: 4,
|
splitNumber: 4,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(255,255,255,0.7)',
|
color: 'rgba(255,255,255,0.7)',
|
||||||
fontSize: 10,
|
fontSize: 12,
|
||||||
align: 'left',
|
align: 'right'
|
||||||
verticalAlign: 'bottom'
|
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
@ -129,24 +120,13 @@ export default {
|
|||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
},
|
},
|
||||||
data:
|
data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
||||||
this.mode === 'month'
|
let v = Math.floor(Math.random() * 100)
|
||||||
? Array(30)
|
while (v < 80) {
|
||||||
.fill(1)
|
v = Math.floor(Math.random() * 100)
|
||||||
.map(_ => {
|
}
|
||||||
let v = Math.floor(Math.random() * 100)
|
return v
|
||||||
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: '磨边机',
|
name: '磨边机',
|
||||||
@ -177,173 +157,129 @@ export default {
|
|||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
},
|
},
|
||||||
data:
|
data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
|
||||||
this.mode === 'month'
|
let v = Math.floor(Math.random() * 100)
|
||||||
? Array(30)
|
while (v < 80) {
|
||||||
.fill(1)
|
v = Math.floor(Math.random() * 100)
|
||||||
.map(_ => {
|
}
|
||||||
let v = Math.floor(Math.random() * 100)
|
return v
|
||||||
while (v < 80) {
|
})
|
||||||
v = Math.floor(Math.random() * 100)
|
},
|
||||||
}
|
{
|
||||||
return v
|
name: '镀膜机',
|
||||||
})
|
type: 'line',
|
||||||
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
symbol: 'none',
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 80) {
|
areaStyle: {
|
||||||
v = Math.floor(Math.random() * 100)
|
// color: 'rgba(50,145,152,0.5)'
|
||||||
}
|
color: {
|
||||||
return v
|
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: '#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',
|
||||||
|
|
||||||
|
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
|
||||||
|
})
|
||||||
}
|
}
|
||||||
// {
|
|
||||||
// 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:
|
|
||||||
// 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:
|
|
||||||
// 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
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -372,34 +308,15 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
refreshData() {
|
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 => {
|
this.configs.series.forEach(item => {
|
||||||
item.data =
|
item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
|
||||||
this.mode === 'month'
|
let v = Math.floor(Math.random() * 100)
|
||||||
? Array(30)
|
while (v < 80) {
|
||||||
.fill(1)
|
v = Math.floor(Math.random() * 100)
|
||||||
.map(_ => {
|
}
|
||||||
let v = Math.floor(Math.random() * 100)
|
return v
|
||||||
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)
|
if (this.chart) this.chart.setOption(this.configs)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,47 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom-container">
|
<div class="custom-container">
|
||||||
<el-row :gutter="8" style="height: calc(100vh - 150px)">
|
<el-row :gutter="20" style="height: calc(100vh - 150px)">
|
||||||
<el-col :span="4">
|
<el-col :span="4">
|
||||||
<aside class="custom-container__common left-side-container">
|
<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">
|
<span v-if="logoUrl" class="logo">
|
||||||
<img :src="logoUrl" alt="side container logo">
|
<img :src="logoUrl" alt="side container logo">
|
||||||
</span>
|
</span>
|
||||||
<span class="text-content">
|
<span class="text-content">
|
||||||
{{ factoryName }}
|
{{ factoryName }}
|
||||||
</span>
|
</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>
|
||||||
|
|
||||||
<!-- 导航栏 -->
|
<section class="left-side-container__content">
|
||||||
<!-- <section class="left-side-container__content">
|
<!-- 导航栏 -->
|
||||||
<el-tree
|
<el-tree
|
||||||
class="custom-tree"
|
class="custom-tree"
|
||||||
:icon-class="'el-icon-document-copy'"
|
:icon-class="'el-icon-document-copy'"
|
||||||
@ -49,15 +21,6 @@
|
|||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
@node-click="handleNodeClick"
|
@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>
|
</section>
|
||||||
</aside>
|
</aside>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -90,15 +53,12 @@ import HeadForm from '@/components/basicData/HeadForm'
|
|||||||
import testData from './parameter.test.data.js'
|
import testData from './parameter.test.data.js'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import writeXlsxFile from 'write-excel-file'
|
import writeXlsxFile from 'write-excel-file'
|
||||||
import TestMenuItem from './parameter/components/TestMenuItem.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EquipmentRetrospectParameter',
|
name: 'EquipmentRetrospectParameter',
|
||||||
components: { BaseTable, HeadForm, TestMenuItem },
|
components: { BaseTable, HeadForm },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showList: false,
|
|
||||||
menuListTrue: [],
|
|
||||||
factoryName: 'xxx工厂',
|
factoryName: 'xxx工厂',
|
||||||
logoUrl: require('../../../../assets/img/cnbm.png'),
|
logoUrl: require('../../../../assets/img/cnbm.png'),
|
||||||
treeData: null,
|
treeData: null,
|
||||||
@ -157,59 +117,46 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.showList = false
|
|
||||||
|
|
||||||
this.init()
|
this.init()
|
||||||
|
|
||||||
this.fetchList('eq-tree').then(res => {
|
this.fetchList('eq-tree').then(res => {
|
||||||
if (res.data) {
|
if (res.data) {
|
||||||
const eqTree = res.data[0] // 只会返回一条工厂数据
|
const eqTree = res.data[0] // 只会返回一条工厂数据
|
||||||
this.factoryName = eqTree.name
|
this.factoryName = eqTree.name
|
||||||
this.treeData = this.preHandleList(eqTree)
|
// 构造tree展示的结构
|
||||||
this.showList = true
|
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.fetchList('work-order').then(res => {
|
this.fetchList('work-order').then(res => {
|
||||||
if (res.data.records) {
|
if (res.data.records) {
|
||||||
this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name }))
|
this.headFormConfig[0].selectOptions = res.data.records.map(item => ({ id: item.id, name: item.name }))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
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() {
|
init() {
|
||||||
this.productLineList.splice(0)
|
this.productLineList.splice(0)
|
||||||
this.headFormConfig[0].selectOptions.splice(0)
|
this.headFormConfig[0].selectOptions.splice(0)
|
||||||
@ -334,10 +281,6 @@ export default {
|
|||||||
if (data.id) {
|
if (data.id) {
|
||||||
this.selectedEquipmentId = data.id
|
this.selectedEquipmentId = data.id
|
||||||
}
|
}
|
||||||
},
|
|
||||||
handleSelect(index, indexPath) {
|
|
||||||
const [id, name] = index.split('$--$')
|
|
||||||
this.selectedEquipmentId = id
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -352,13 +295,14 @@ export default {
|
|||||||
.custom-container__common {
|
.custom-container__common {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 8px;
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-side-container {
|
.left-side-container {
|
||||||
height: calc(100vh - 147px);
|
height: calc(100vh - 147px);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
// background: #fafafa;
|
background: #fafafa;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@ -376,7 +320,7 @@ export default {
|
|||||||
|
|
||||||
.left-side-container__content {
|
.left-side-container__content {
|
||||||
flex: 1 1;
|
flex: 1 1;
|
||||||
overflow-y: auto;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -412,25 +356,4 @@ export default {
|
|||||||
.custom-tree >>> .is-current .el-tree-node__content {
|
.custom-tree >>> .is-current .el-tree-node__content {
|
||||||
background: #fafafa;
|
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>
|
</style>
|
||||||
|
|||||||
@ -1,135 +0,0 @@
|
|||||||
<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">
|
<section class="routes-area" v-if="showList">
|
||||||
<el-menu @select="handleSelect">
|
<el-menu @select="handleSelect">
|
||||||
<!-- 此处假设了只有一个根节点 -->
|
<!-- 此处假设了只有一个根节点 -->
|
||||||
<template v-for="(menuItem, index) in menuListTrue[0].children" >
|
<template v-for="(menuItem, index) in menuListTrue[0].children">
|
||||||
<TestMenuItem :level="1" :key="index" :menuItem="menuItem" />
|
<TestMenuItem :level="1" :menuItem="menuItem" />
|
||||||
</template>
|
</template>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user