Compare commits
14 Commits
4f4453045a
...
6b031d6e06
| Author | SHA1 | Date | |
|---|---|---|---|
| 6b031d6e06 | |||
| 16a335d71f | |||
| 934d308730 | |||
| cb8d705309 | |||
| dcdfcb9f6c | |||
| 8428141a30 | |||
| 2d3d0d4a3a | |||
| 00be50ed95 | |||
| 97901a0278 | |||
| 19f673b45f | |||
| 7f2ee35c29 | |||
| 760342ddbb | |||
| 81a8f5de47 | |||
| e5ed3b092c |
@ -36,11 +36,29 @@ export default {
|
||||
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
|
||||
let data = [
|
||||
// 温度走势
|
||||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
|
||||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 30) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
}),
|
||||
// 电流走势
|
||||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
|
||||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 30) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
}),
|
||||
// 电压走势
|
||||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
|
||||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 30) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
]
|
||||
let wendu = data[0]
|
||||
let dianliu = data[1]
|
||||
@ -52,6 +70,7 @@ export default {
|
||||
color: colors,
|
||||
legend: {
|
||||
top: 4,
|
||||
right: 50,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
@ -85,10 +104,10 @@ export default {
|
||||
name: '电流/A',
|
||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitNumber: 3,
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 42,
|
||||
offset: 40,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -112,7 +131,7 @@ export default {
|
||||
name: '电压/V',
|
||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitNumber: 3,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
@ -147,7 +166,7 @@ export default {
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitNumber: 3,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
|
||||
@ -58,26 +58,26 @@ const tableProps = [
|
||||
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
|
||||
]
|
||||
const tableData = [
|
||||
{ eqName: '磨边', pl: 'B', priority: 3, checkContent: '火中山为华证低军线少真及容南一用别。' },
|
||||
{ eqName: '固化', pl: 'A', priority: 3, checkContent: '油报往目亲没己话构这题家感。' },
|
||||
{ eqName: '下片', pl: 'B', priority: 1, checkContent: '不决系入几切斗回史亲和全自管。' },
|
||||
{ eqName: '冷却', pl: 'B', priority: 2, checkContent: '近温志用建将面连机次些民石变分教集加。' },
|
||||
{ eqName: '钢化', pl: 'B', priority: 4, checkContent: '家地派众几又斯管把来资活听是强。' },
|
||||
{ eqName: '二镀', pl: 'B', priority: 1, checkContent: '全是治群况布这越新划回路一量根步到料。' },
|
||||
{ eqName: '打孔', pl: 'B', priority: 3, checkContent: '西心往各产有矿及红构更往术路外光参因。' },
|
||||
{ eqName: '磨边', pl: 'A', priority: 1, checkContent: '严音五今通住包作世不如半志。' },
|
||||
{ eqName: '一镀', pl: 'A', priority: 3, checkContent: '相史亲运界工按越清引具产。' },
|
||||
{ eqName: '钢后清洗机', pl: 'A', priority: 1, checkContent: '合题基则关大大边听律安来革号其干。' },
|
||||
{ eqName: '丝印', pl: 'A', priority: 1, checkContent: '身米识可见报求起放之过影。' },
|
||||
{ eqName: '磨边后清洗机', pl: 'B', priority: 4, checkContent: '始单方实度构斯手研习任压识。' },
|
||||
{ eqName: '打孔', pl: 'B', priority: 3, checkContent: '共特场新收关式往劳极段前步产角至高。' },
|
||||
{ eqName: '钢后清洗机', pl: 'A', priority: 3, checkContent: '消理几包山教满得五期那改计。' },
|
||||
{ eqName: '一镀', pl: 'B', priority: 4, checkContent: '而能研区有关点回劳之直近际她处而基步。' },
|
||||
{ eqName: '二镀', pl: 'A', priority: 3, checkContent: '状复思式样要热间王才整金确。' },
|
||||
{ eqName: '打孔', pl: 'B', priority: 2, checkContent: '即组明对省队内难军领把完六论技。' },
|
||||
{ eqName: '打孔后清洗机', pl: 'A', priority: 2, checkContent: '度些心万则它书专干又分因直政论九。' },
|
||||
{ eqName: '丝印', pl: 'A', priority: 1, checkContent: '加示队酸得如生改及效车流王西高阶面。' },
|
||||
{ eqName: '打孔后清洗机', pl: 'B', priority: 2, checkContent: '期十参比边题完选油导将程安走以样。' }
|
||||
{ eqName: '钢化', pl: 'A', priority: 4, checkContent: '表面检测光源和相机的卫生' },
|
||||
{ eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
|
||||
{ eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' },
|
||||
{ eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' },
|
||||
{ eqName: '预热', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
|
||||
{ eqName: '钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' },
|
||||
{ eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
|
||||
{ eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
|
||||
{ eqName: '磨边后清洗机', pl: 'B', priority: 4, checkContent: '边角检测光源和相机的卫生' },
|
||||
{ eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
|
||||
{ eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' },
|
||||
{ eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
|
||||
{ eqName: '钢化', pl: 'B', priority: 2, checkContent: '检查每日不良是否存在误检' },
|
||||
{ eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
|
||||
{ eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
|
||||
{ eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
|
||||
{ eqName: '预热', pl: 'B', priority: 4, checkContent: '水冷机内水量充足并且清洁' },
|
||||
{ eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
|
||||
{ eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
|
||||
{ eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }
|
||||
]
|
||||
|
||||
export default {
|
||||
|
||||
@ -25,6 +25,7 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.left-content-monitoring {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 32px);
|
||||
display: flex;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<div class="content-part">
|
||||
<div class="row">
|
||||
<span class="name">纯 水</span>
|
||||
<span class="diy-process-bar color-1" />
|
||||
<span class="diy-process-bar bar-width-1 color-1" />
|
||||
<span class="amount">
|
||||
39m
|
||||
<sup>3</sup>
|
||||
@ -17,17 +17,17 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="name">循环水</span>
|
||||
<span class="diy-process-bar color-2" />
|
||||
<span class="diy-process-bar bar-width-2 color-2" />
|
||||
<span class="amount">
|
||||
239m
|
||||
23m
|
||||
<sup>3</sup>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="name">自来水</span>
|
||||
<span class="diy-process-bar color-3" />
|
||||
<span class="diy-process-bar bar-width-3 color-3" />
|
||||
<span class="amount">
|
||||
23m
|
||||
239m
|
||||
<sup>3</sup>
|
||||
</span>
|
||||
</div>
|
||||
@ -44,25 +44,25 @@
|
||||
<div class="content-part">
|
||||
<div class="row">
|
||||
<span class="name">氧 气</span>
|
||||
<span class="diy-process-bar color-1" />
|
||||
<span class="diy-process-bar bar-width-4 color-1" />
|
||||
<span class="amount">
|
||||
23Pa
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="name">CDA</span>
|
||||
<span class="diy-process-bar bar-width-5 color-2" />
|
||||
<span class="amount">
|
||||
39Pa
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="name">CDA</span>
|
||||
<span class="diy-process-bar color-2" />
|
||||
<span class="name">天然气</span>
|
||||
<span class="diy-process-bar bar-width-6 color-3" />
|
||||
<span class="amount">
|
||||
239pa
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="name">天然气</span>
|
||||
<span class="diy-process-bar color-3" />
|
||||
<span class="amount">
|
||||
23Pa
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
@ -85,8 +85,9 @@
|
||||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
|
||||
<span>发电</span>
|
||||
</div>
|
||||
<div style="height: 100%; flex: 1; padding: calc(8px * var(--beilv))">
|
||||
<FadianChart />
|
||||
<div style="height: 100%; flex: 1; ">
|
||||
<!-- <FadianChart /> -->
|
||||
<DianChart />
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
@ -199,6 +200,25 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bar-width-1::after {
|
||||
width: 60%;
|
||||
}
|
||||
.bar-width-2::after {
|
||||
width: 34%;
|
||||
}
|
||||
.bar-width-3::after {
|
||||
width: 99%;
|
||||
}
|
||||
.bar-width-4::after {
|
||||
width: 20%;
|
||||
}
|
||||
.bar-width-5::after {
|
||||
width: 29%;
|
||||
}
|
||||
.bar-width-6::after {
|
||||
width: 79%;
|
||||
}
|
||||
|
||||
.diy-process-bar.color-1::after {
|
||||
background: linear-gradient(to right, #178be9, #67b3f2);
|
||||
}
|
||||
|
||||
@ -52,23 +52,23 @@ const PriorityComponent = {
|
||||
}
|
||||
|
||||
const tableProps = [
|
||||
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'plName', label: '所属产线', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
|
||||
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
|
||||
{ prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
|
||||
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 90, subcomponent: PriorityComponent },
|
||||
{ prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
|
||||
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 128 }
|
||||
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }
|
||||
]
|
||||
|
||||
const tableData = [
|
||||
{ eqName: '磨边', plName: 'B', content: '所受第按政酸南角写作给还些。', priority: 4, duration: '30 min' },
|
||||
{ eqName: '冷却', plName: 'A', content: '自变流门行极声将通确为用目很导处种。', priority: 4, duration: '1 min' },
|
||||
{ eqName: '丝印', plName: 'A', content: '从小定需间太则选下上又原。', priority: 2, duration: '57 min' },
|
||||
{ eqName: '打孔后清洗机', plName: 'B', content: '表新和新总我音层采示道产当列。', priority: 3, duration: '17 min' },
|
||||
{ eqName: '固化', plName: 'B', content: '义往历安日况整家小心什会。', priority: 2, duration: '22 min' },
|
||||
{ eqName: '一镀', plName: 'B', content: '收直素新要府收强而着明速省。', priority: 3, duration: '2 min' },
|
||||
{ eqName: '钢化', plName: 'A', content: '它养土党把采商发活门没千联同设和。', priority: 4, duration: '23 min' },
|
||||
{ eqName: '磨边', plName: 'B', content: '拉养必型制规想科得价向别任。', priority: 3, duration: '6 min' },
|
||||
{ eqName: '磨边', plName: 'B', content: '确验效五什第也片什八装所红。', priority: 2, duration: '23 min' },
|
||||
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 4, duration: '30 min' },
|
||||
{ eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 4, duration: '1 min' },
|
||||
{ eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' },
|
||||
{ eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' },
|
||||
{ eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' },
|
||||
{ eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' },
|
||||
{ eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 4, duration: '23 min' },
|
||||
{ eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
|
||||
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' },
|
||||
{
|
||||
eqName: '磨边后清洗机',
|
||||
plName: 'A',
|
||||
|
||||
@ -48,7 +48,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
x: 0.5,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
@ -61,7 +61,7 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
x: 0.5,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
@ -75,9 +75,9 @@ export default {
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
y: 0.5,
|
||||
x2: 1,
|
||||
y2: 0.5,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#49FBD600', offset: 0.1 },
|
||||
@ -88,11 +88,11 @@ export default {
|
||||
]
|
||||
|
||||
const demoData = [
|
||||
{ value: 55, name: 'A' },
|
||||
{ value: 33, name: 'B' },
|
||||
{ value: 22, name: 'C' },
|
||||
{ value: 11, name: 'D' },
|
||||
{ value: 32, name: 'E' }
|
||||
{ value: 107, name: '破片' },
|
||||
{ value: 146, name: '崩边' },
|
||||
{ value: 43, name: '脏污' },
|
||||
{ value: 83, name: '划擦伤' },
|
||||
{ value: 20, name: '崩孔' }
|
||||
]
|
||||
|
||||
return {
|
||||
@ -103,7 +103,7 @@ export default {
|
||||
textAlign: 'center',
|
||||
left: '63%',
|
||||
top: '35%',
|
||||
text: '33039',
|
||||
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
@ -120,10 +120,10 @@ export default {
|
||||
legend: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
left: -15,
|
||||
orient: 'vertical',
|
||||
icon: 'none',
|
||||
itemGap: 5,
|
||||
itemGap: 8,
|
||||
itemWidth: 10,
|
||||
formatter: function(name) {
|
||||
// test data - dynamic
|
||||
@ -163,7 +163,6 @@ export default {
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#FB418C'
|
||||
// backgroundColor: '#1A99FF'
|
||||
},
|
||||
d: {
|
||||
// verticalAlign: 'top',
|
||||
@ -172,7 +171,6 @@ export default {
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#DDB112'
|
||||
// backgroundColor: '#A691FF'
|
||||
},
|
||||
e: {
|
||||
// verticalAlign: 'top',
|
||||
@ -181,7 +179,6 @@ export default {
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#1A99FF'
|
||||
// backgroundColor: '#FB418C'
|
||||
},
|
||||
f: {
|
||||
// verticalAlign: 'top',
|
||||
@ -190,7 +187,6 @@ export default {
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#A691FF'
|
||||
// backgroundColor: '#49FBD6'
|
||||
},
|
||||
g: {
|
||||
// verticalAlign: 'top',
|
||||
@ -199,7 +195,6 @@ export default {
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#49FBD6'
|
||||
// backgroundColor: '#DDB112'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -236,7 +231,7 @@ export default {
|
||||
const colorGradient = colors[dataIndex]
|
||||
if (totalRate + percent < 25) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
;(() => {})()
|
||||
} else if (totalRate + percent < 50) {
|
||||
colorGradient.x = 0
|
||||
colorGradient.y = 0
|
||||
@ -249,7 +244,7 @@ export default {
|
||||
colorGradient.y2 = 0
|
||||
} else if (totalRate + percent < 100) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
;(() => {})()
|
||||
}
|
||||
|
||||
totalRate += percent
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="height: calc(100% - 36px); width: 100%;">
|
||||
<div style="height: calc(100% - 36px); width: 100%; position: relative;">
|
||||
<div :id="id" ref="techy-line-chart" class="techy-chart" />
|
||||
</div>
|
||||
</template>
|
||||
@ -35,14 +35,15 @@ export default {
|
||||
option: {
|
||||
color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
|
||||
grid: {
|
||||
top: '20%',
|
||||
top: '45%',
|
||||
left: 0,
|
||||
right: 12,
|
||||
bottom: 0,
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
width: '72%',
|
||||
top: '20%',
|
||||
right: 12,
|
||||
itemWidth: 12,
|
||||
itemHeight: 8,
|
||||
@ -73,6 +74,8 @@ export default {
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '成品率',
|
||||
min: 'dataMin',
|
||||
splitNumber: 2,
|
||||
nameTextStyle: {
|
||||
color: '#fffc',
|
||||
align: 'right',
|
||||
@ -95,11 +98,10 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '产线1',
|
||||
name: 'A',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
@ -121,14 +123,19 @@ export default {
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => Math.floor(Math.random() * 100))
|
||||
.map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 80) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '产线2',
|
||||
name: 'B',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
@ -150,95 +157,98 @@ export default {
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => Math.floor(Math.random() * 100))
|
||||
},
|
||||
{
|
||||
name: '产线3',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FF734566' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => Math.floor(Math.random() * 100))
|
||||
},
|
||||
{
|
||||
name: '产线4',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#9452FF66' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => Math.floor(Math.random() * 100))
|
||||
},
|
||||
{
|
||||
name: '产线5',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#6A6E8766' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => Math.floor(Math.random() * 100))
|
||||
.map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 80) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
}
|
||||
// {
|
||||
// name: '产线3',
|
||||
// type: 'line',
|
||||
// symbol: 'none',
|
||||
// areaStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: '#FF734566' // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'transparent' // 100% 处的颜色
|
||||
// }
|
||||
// ],
|
||||
// global: false // 缺省为 false
|
||||
// }
|
||||
// },
|
||||
// data: Array(12)
|
||||
// .fill(0)
|
||||
// .map(_ => Math.floor(Math.random() * 100))
|
||||
// },
|
||||
// {
|
||||
// name: '产线4',
|
||||
// type: 'line',
|
||||
// symbol: 'none',
|
||||
// areaStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: '#9452FF66' // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'transparent' // 100% 处的颜色
|
||||
// }
|
||||
// ],
|
||||
// global: false // 缺省为 false
|
||||
// }
|
||||
// },
|
||||
// data: Array(12)
|
||||
// .fill(0)
|
||||
// .map(_ => Math.floor(Math.random() * 100))
|
||||
// },
|
||||
// {
|
||||
// name: '产线5',
|
||||
// type: 'line',
|
||||
// symbol: 'none',
|
||||
// areaStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: '#6A6E8766' // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'transparent' // 100% 处的颜色
|
||||
// }
|
||||
// ],
|
||||
// global: false // 缺省为 false
|
||||
// }
|
||||
// },
|
||||
// data: Array(12)
|
||||
// .fill(0)
|
||||
// .map(_ => Math.floor(Math.random() * 100))
|
||||
// }
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -258,7 +268,10 @@ export default {
|
||||
</script>
|
||||
<style scoped>
|
||||
.techy-chart {
|
||||
height: 100%;
|
||||
/* background: #cccc; */
|
||||
position: absolute;
|
||||
top: -36%;
|
||||
height: 150%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -26,16 +26,16 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
datalist: [
|
||||
{ name: '热端', value: 2332039120, color: '#0b88ff' },
|
||||
{ name: '原片上片', value: 30, color: '#0bffa6' },
|
||||
{ name: '上片', value: 27, color: '#e3ff0b' },
|
||||
{ name: '磨边', value: 23, color: '#950bff' },
|
||||
{ name: '原片磨边', value: 30, color: '#0bffa6' },
|
||||
{ name: '原片', value: 30, color: '#0bffa6' },
|
||||
{ name: '上片', value: 27, color: '#e3ff0b' },
|
||||
{ name: '磨边镀膜膜', value: 23, color: '#950bff' },
|
||||
{ name: '镀膜', value: 10, color: '#ff0bc2' },
|
||||
{ name: '清晰', value: 66, color: '#ff7d0b' }
|
||||
{ name: '热端', value: 2023233, color: '#0b88ff' },
|
||||
{ name: '丝印', value: 2023233, color: '#0bffa6' },
|
||||
{ name: '原片', value: 20, color: '#0bffa6' },
|
||||
{ name: '钢化', value: 20, color: '#e3ff0b' },
|
||||
{ name: '上片磨边', value: 20, color: '#e3ff0b' },
|
||||
{ name: '下片铺纸', value: 202324, color: '#950bff' },
|
||||
{ name: '镀膜', value: 20, color: '#950bff' },
|
||||
{ name: '物流仓储', value: 202324, color: '#ff7d0b' },
|
||||
{ name: '清洗', value: 20, color: '#0bffa6' },
|
||||
{ name: '包装', value: 2, color: '#ff0bc2' }
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -55,6 +55,7 @@ export default {
|
||||
grid-auto-rows: min-content;
|
||||
gap: calc(4px * var(--beilv)) calc(6px * var(--beilv));
|
||||
justify-content: end;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.analysis-item {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)">
|
||||
<techy-box style="width: 100%; height: calc(100% - 36px);">
|
||||
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
|
||||
|
||||
<new-bar
|
||||
@ -24,116 +24,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import TechyBox from './TechyBox.vue'
|
||||
import newBar from './newBar.vue'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'RealtimeProductionHorizontalBarChart',
|
||||
components: { TechyBox, newBar },
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-linechart-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
color: ['#FF7345', '#52FFF1', '#6A6E87', '#9452FFA6'],
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: '5%',
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.001],
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 8
|
||||
// rotate: 10
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fffa'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['产线1', '产线2', '产线3', '产线4', '产线5', '产线6'],
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
color: '#fffa'
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#fffa'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '2011',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
data: Array(6)
|
||||
.fill(0)
|
||||
.map(value => Math.floor(Math.random() * 1000))
|
||||
},
|
||||
{
|
||||
name: '2012',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
data: Array(6)
|
||||
.fill(0)
|
||||
.map(value => Math.floor(Math.random() * 1000))
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||
this.chart.setOption(this.option)
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {}
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@ -12,7 +12,9 @@
|
||||
<span class="quality-analysis-bar__name">
|
||||
{{ name }}
|
||||
</span>
|
||||
<span class="quality-analysis-bar__amount" :title="'数量:' + amount">{{ amount | amountFilter }}</span>
|
||||
<span class="quality-analysis-bar__amount" :title="'数量:' + amount">
|
||||
{{ amount | amountFilter }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -22,7 +24,7 @@ export default {
|
||||
filters: {
|
||||
amountFilter: val => {
|
||||
const sVal = val.toString()
|
||||
return sVal.length > 7 ? sVal.slice(0, 6) + '...' : sVal
|
||||
return sVal.length > 9 ? sVal.slice(0, 8) + '...' : sVal
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@ -97,17 +99,17 @@ export default {
|
||||
}
|
||||
|
||||
.block-green-5 {
|
||||
background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.65));
|
||||
background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.75));
|
||||
/* margin-left: 4px; */
|
||||
}
|
||||
.block-green-4 {
|
||||
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.65), hsla(181, 53%, 44%, 0.4));
|
||||
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.75), hsla(181, 53%, 44%, 0.44));
|
||||
}
|
||||
.block-green-3 {
|
||||
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.4), hsla(181, 53%, 44%, 0.2));
|
||||
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.44), hsla(181, 53%, 44%, 0.15));
|
||||
}
|
||||
.block-green-2 {
|
||||
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0));
|
||||
background: linear-gradient(to left, hsla(181, 53%, 44%, 0.15), hsla(181, 53%, 44%, 0));
|
||||
}
|
||||
.block-green-1 {
|
||||
/* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
|
||||
@ -187,10 +189,10 @@ export default {
|
||||
color: rgba(255, 255, 255, 0.725);
|
||||
display: inline-block;
|
||||
/* min-width: 35%; */
|
||||
width: 35%;
|
||||
width: 45%;
|
||||
text-align: left;
|
||||
padding: calc(3px * var(--beilv)) 0;
|
||||
font-size: calc(14px * var(--beilv));;
|
||||
line-height: calc(12px * var(--beilv));;
|
||||
font-size: calc(14px * var(--beilv));
|
||||
line-height: calc(12px * var(--beilv));
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 285 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 491 KiB |
@ -89,8 +89,8 @@ export default {
|
||||
this.chartName === 'process-fault'
|
||||
? 'rgba(119, 255, 242, 1)'
|
||||
: this.chartName === 'fault-category'
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
show: true,
|
||||
offset: [-12, 10],
|
||||
position: 'top',
|
||||
@ -113,6 +113,7 @@ export default {
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
@ -124,6 +125,7 @@ export default {
|
||||
{
|
||||
// 柱顶
|
||||
name: this.dataList[1].name,
|
||||
yAxisIndex: 1,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
@ -143,8 +145,8 @@ export default {
|
||||
this.chartName === 'process-fault'
|
||||
? 'rgba(119, 255, 242, 1)'
|
||||
: this.chartName === 'fault-category'
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
show: true,
|
||||
offset: [12, 10],
|
||||
position: 'top',
|
||||
@ -154,6 +156,7 @@ export default {
|
||||
{
|
||||
// 柱底
|
||||
name: this.dataList[1].name,
|
||||
yAxisIndex: 1,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
@ -170,7 +173,6 @@ export default {
|
||||
// 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
@ -191,7 +193,6 @@ export default {
|
||||
// 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
@ -209,8 +210,8 @@ export default {
|
||||
this.chartName === 'process-fault'
|
||||
? 'rgba(119, 255, 242, 1)'
|
||||
: this.chartName === 'fault-category'
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
show: true,
|
||||
offset: [0, 10],
|
||||
position: 'top',
|
||||
@ -222,7 +223,6 @@ export default {
|
||||
// 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolOffset: [0, '50%'],
|
||||
@ -249,15 +249,16 @@ export default {
|
||||
this.chart = echarts.init(this.$refs.chartContainer)
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: '16%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
top: '24%',
|
||||
left: '8%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
top: '2%',
|
||||
right: '2%',
|
||||
textStyle: {
|
||||
color: '#fff9'
|
||||
@ -281,31 +282,68 @@ export default {
|
||||
},
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: this.dataList[0].bottomColor,
|
||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
yAxis: [
|
||||
{
|
||||
name: '产量/m²',
|
||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 3,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 10,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: this.dataList[0].bottomColor,
|
||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(119, 255, 242, 0.2)'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(119, 255, 242, 0.2)'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
{
|
||||
name: '能耗kw/h',
|
||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 3,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 48,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: this.dataList[1].bottomColor,
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
// lineStyle: {
|
||||
// type: 'dotted',
|
||||
// color: 'rgba(119, 255, 242, 0.2)'
|
||||
// }
|
||||
},
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: this.series
|
||||
})
|
||||
}
|
||||
@ -354,10 +392,12 @@ export default {
|
||||
left: calc(100vw/1920 * 48); */
|
||||
/* bottom: calc(10% + 100vh/1920 * 28); */
|
||||
bottom: 20px;
|
||||
left: 9%;
|
||||
left: 6%;
|
||||
height: 30px;
|
||||
width: 90%;
|
||||
background: linear-gradient(to top, #49fbd789, transparent);
|
||||
border-radius: 3px;
|
||||
/* border: 1px solid #49fbd7; */
|
||||
background: linear-gradient(to top, #49fbd789 5%, transparent);
|
||||
transform: skew(-35deg);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div id="v3d-outter" ref="v3d-outter">
|
||||
<!-- <V3DApp @3d-loaded="handle3DLoaded" />
|
||||
<div v-if="showPage" id="v3d-main-content"> -->
|
||||
<div v-if="true" id="v3d-main-content">
|
||||
<div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
|
||||
<V3DApp @3d-loaded="handle3DLoaded" @click.native="handle3DClick" />
|
||||
<div v-if="showPage" id="v3d-main-content">
|
||||
<!-- <div v-if="true" id="v3d-main-content"> -->
|
||||
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
|
||||
|
||||
<section id="techy-body-part">
|
||||
@ -19,31 +20,38 @@
|
||||
</techy-container>
|
||||
</div>
|
||||
|
||||
<div class="techy-body-part__middle">
|
||||
<div class="techy-body-part__middle" v-if="currentEquipment">
|
||||
<TechyBox>
|
||||
<div class="techy-body-part__middle__inner">
|
||||
<p>
|
||||
<b>产线名称 :</b>
|
||||
<span>A产线</span>
|
||||
<span>{{ currentEquipment.pl }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<b>设备名称 :</b>
|
||||
<span>清洗机</span>
|
||||
<span>{{ currentEquipment.name }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<b>累计加工 :</b>
|
||||
<span>20</span>
|
||||
<span>{{ currentEquipment.amount }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<b>通信状态 :</b>
|
||||
<span class="round-dot">运行中</span>
|
||||
<span
|
||||
class="round-dot"
|
||||
:class="{
|
||||
'danger-dot': currentEquipment.status === '故障',
|
||||
'warning-dot': currentEquipment.status === '调试中'
|
||||
}"
|
||||
>
|
||||
{{ currentEquipment.status }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="techy-body-part__right">
|
||||
<div class="realtime">
|
||||
<techy-container title="实时产量和能耗" icon="折角的菜单图标">
|
||||
@ -73,7 +81,7 @@
|
||||
</techy-container>
|
||||
</div>
|
||||
<div class="ft-monitor" style="flex: 1;">
|
||||
<techy-container title="现场实时监控" icon="安全帽图标">
|
||||
<techy-container title="现场实时监控" icon="安全帽图标" style="display: flex; flex-direction: column;">
|
||||
<LeftContentMonitor />
|
||||
</techy-container>
|
||||
</div>
|
||||
@ -110,6 +118,8 @@ import TechyBox from './components/TechyBox.vue'
|
||||
|
||||
import screenfull from 'screenfull'
|
||||
|
||||
import eqList from './v3dApp/data'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
@ -129,6 +139,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
eqId: null,
|
||||
currentEquipment: null,
|
||||
showPage: false,
|
||||
toggleResize: 'toggle-1' // <=== no need to worry this
|
||||
}
|
||||
@ -153,6 +165,12 @@ export default {
|
||||
},
|
||||
handle3DLoaded() {
|
||||
this.showPage = true
|
||||
},
|
||||
handle3DClick() {
|
||||
this.eqId = document.getElementById('V3DData').rel
|
||||
if (this.eqId) {
|
||||
this.currentEquipment = eqList.find(item => item.id === this.eqId)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -349,4 +367,12 @@ export default {
|
||||
background-color: rgb(82, 231, 82);
|
||||
border-radius: calc(4px * var(--beilv));
|
||||
}
|
||||
|
||||
.danger-dot::before {
|
||||
background-color: #e71837;
|
||||
}
|
||||
|
||||
.warning-dot::before {
|
||||
background-color: #d6961f;
|
||||
}
|
||||
</style>
|
||||
|
||||
73
src/views/3DOverview/v3dApp/data.js
Normal file
73
src/views/3DOverview/v3dApp/data.js
Normal file
@ -0,0 +1,73 @@
|
||||
export default [
|
||||
{ id: 'C1-0', pl: 'A', name: '上片', amount: 32, status: '生产中' },
|
||||
{ id: 'C1-1', pl: 'A', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C1-2', pl: 'A', name: '磨边', amount: 32, status: '调试中' },
|
||||
{ id: 'C1-3', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C1-4', pl: 'A', name: '打孔', amount: 32, status: '生产中' },
|
||||
{ id: 'C1-5', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C1-6', pl: 'A', name: '丝印', amount: 32, status: '生产中' },
|
||||
{ id: 'C1-7', pl: 'A', name: '固化', amount: 32, status: '生产中' },
|
||||
{ id: 'C1-8', pl: 'A', name: '储片', amount: 32, status: '生产中' },
|
||||
{ id: 'C1-9', pl: 'A', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C1-10', pl: 'A', name: '下片', amount: 32, status: '生产中' },
|
||||
|
||||
{ id: 'C2-0', pl: 'B', name: '上片', amount: 32, status: '调试中' },
|
||||
{ id: 'C2-1', pl: 'B', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C2-2', pl: 'B', name: '磨边', amount: 32, status: '调试中' },
|
||||
{ id: 'C2-3', pl: 'B', name: '清洗', amount: 32, status: '调试中' },
|
||||
{ id: 'C2-4', pl: 'B', name: '打孔', amount: 32, status: '调试中' },
|
||||
{ id: 'C2-5', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C2-6', pl: 'B', name: '丝印', amount: 32, status: '生产中' },
|
||||
{ id: 'C2-7', pl: 'B', name: '固化', amount: 32, status: '生产中' },
|
||||
{ id: 'C2-8', pl: 'B', name: '储片', amount: 32, status: '生产中' },
|
||||
{ id: 'C2-9', pl: 'B', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C2-10', pl: 'B', name: '下片', amount: 32, status: '生产中' },
|
||||
|
||||
{ id: 'C3-0', pl: 'C', name: '上片', amount: 32, status: '生产中' },
|
||||
{ id: 'C3-1', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C3-2', pl: 'C', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C3-3', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C3-4', pl: 'C', name: '打孔', amount: 32, status: '生产中' },
|
||||
{ id: 'C3-5', pl: 'C', name: '清洗', amount: 32, status: '故障' },
|
||||
{ id: 'C3-6', pl: 'C', name: '丝印', amount: 32, status: '生产中' },
|
||||
{ id: 'C3-7', pl: 'C', name: '固化', amount: 32, status: '生产中' },
|
||||
{ id: 'C3-8', pl: 'C', name: '储片', amount: 32, status: '生产中' },
|
||||
{ id: 'C3-9', pl: 'C', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C3-10', pl: 'C', name: '下片', amount: 32, status: '生产中' },
|
||||
|
||||
{ id: 'C4-0', pl: 'D', name: '上片', amount: 32, status: '故障' },
|
||||
{ id: 'C4-1', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C4-2', pl: 'D', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C4-3', pl: 'D', name: '清洗', amount: 32, status: '故障' },
|
||||
{ id: 'C4-4', pl: 'D', name: '打孔', amount: 32, status: '故障' },
|
||||
{ id: 'C4-5', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C4-6', pl: 'D', name: '丝印', amount: 32, status: '生产中' },
|
||||
{ id: 'C4-7', pl: 'D', name: '固化', amount: 32, status: '生产中' },
|
||||
{ id: 'C4-8', pl: 'D', name: '储片', amount: 32, status: '生产中' },
|
||||
{ id: 'C4-9', pl: 'D', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C4-10', pl: 'D', name: '下片', amount: 32, status: '生产中' },
|
||||
|
||||
{ id: 'C5-0', pl: 'E', name: '上片', amount: 32, status: '生产中' },
|
||||
{ id: 'C5-1', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C5-2', pl: 'E', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C5-3', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C5-4', pl: 'E', name: '打孔', amount: 32, status: '生产中' },
|
||||
{ id: 'C5-5', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C5-6', pl: 'E', name: '丝印', amount: 32, status: '生产中' },
|
||||
{ id: 'C5-7', pl: 'E', name: '固化', amount: 32, status: '生产中' },
|
||||
{ id: 'C5-8', pl: 'E', name: '储片', amount: 32, status: '生产中' },
|
||||
{ id: 'C5-9', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
|
||||
// { id: 'C5-10', pl: 'E', name: '下片', amount: 32, status: '生产中' },
|
||||
|
||||
{ id: 'C6-0', pl: 'F', name: '上片', amount: 32, status: '生产中' },
|
||||
{ id: 'C6-1', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C6-2', pl: 'F', name: '磨边', amount: 32, status: '生产中' },
|
||||
{ id: 'C6-3', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C6-4', pl: 'F', name: '打孔', amount: 32, status: '生产中' },
|
||||
{ id: 'C6-5', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
|
||||
{ id: 'C6-6', pl: 'F', name: '丝印', amount: 32, status: '生产中' },
|
||||
{ id: 'C6-7', pl: 'F', name: '固化', amount: 32, status: '故障' },
|
||||
{ id: 'C6-8', pl: 'F', name: '储片', amount: 32, status: '故障' },
|
||||
// { id: 'C6-9', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
|
||||
// { id: 'C6-10', pl: 'F', name: '下片', amount: 32, status: '生产中' },
|
||||
]
|
||||
@ -73,9 +73,9 @@ const LifeRemainComponent = {
|
||||
computed: {
|
||||
statusColor() {
|
||||
const colors = [
|
||||
'rgba(255,84,76,0.6)', // red < 0
|
||||
'#FFBD43', // yellow < 10
|
||||
'rgba(142,254,83,0.6)' // green >= 10
|
||||
'rgba(255,84,76,0.6)', // red < 10%
|
||||
'#FFBD43', // yellow < 20%
|
||||
'rgba(142,254,83,0.6)' // green
|
||||
]
|
||||
return this.injectData.remain < 0 ? colors[0] : this.injectData.remain < 10 ? colors[1] : colors[2]
|
||||
}
|
||||
@ -160,6 +160,8 @@ export const sparepartsProps = [
|
||||
{ prop: 'location', label: '库位', align: 'center' }
|
||||
]
|
||||
|
||||
|
||||
// TODO: 2022.11.17 修改数据和剩余寿命组件
|
||||
export const sparepartsDatalist = [
|
||||
{ 'name': '激光打孔', 'eq': 'A2一次固化机', 'pl': 'C线', 'update_time': '2007-08-31 09:15:24', 'remain': -32, 'stock': 457, 'location': '库位74' },
|
||||
{ 'name': '磨边单元', 'eq': 'B1一次冷却机', 'pl': 'C线', 'update_time': '2016-10-02 22:23:09', 'remain': -95, 'stock': 5600, 'location': '库位10' },
|
||||
|
||||
@ -94,11 +94,52 @@
|
||||
<div class="grow-6 flex gap-16">
|
||||
<div class="width-222">
|
||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||
<techy-analysis-header>产线缺陷分析</techy-analysis-header>
|
||||
<pl-fault-analysis-pie-chart />
|
||||
<techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
|
||||
<div style="position: absolute; top: 0; left:0; width: 100%; height: 100%;">
|
||||
<span
|
||||
style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(16px * var(--beilv));"
|
||||
>
|
||||
单位: 千片
|
||||
</span>
|
||||
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
|
||||
</div>
|
||||
<div class="pl-select">
|
||||
<span
|
||||
:class="{ 'pl-select__active': plMode === 'a' }"
|
||||
@click="
|
||||
plMode = 'a'
|
||||
chosenDatalist = quexianDatalist[0]
|
||||
"
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<span
|
||||
:class="{ 'pl-select__active': plMode === 'b' }"
|
||||
@click="
|
||||
plMode = 'b'
|
||||
chosenDatalist = quexianDatalist[1]
|
||||
"
|
||||
>
|
||||
B
|
||||
</span>
|
||||
</div>
|
||||
<div class="date-select">
|
||||
<span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
|
||||
<span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
|
||||
<span
|
||||
:class="{ 'date-select__active': dateMode === 'day' }"
|
||||
@click="
|
||||
dateMode = 'day'
|
||||
chosenDatalist = quexianDatalist[2]
|
||||
"
|
||||
>
|
||||
日
|
||||
</span>
|
||||
<span
|
||||
:class="{ 'date-select__active': dateMode === 'month' }"
|
||||
@click="
|
||||
dateMode = 'month'
|
||||
chosenDatalist = quexianDatalist[3]
|
||||
"
|
||||
>
|
||||
月
|
||||
</span>
|
||||
</div>
|
||||
@ -107,10 +148,24 @@
|
||||
<div class="grow">
|
||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||
<techy-analysis-header>产品成品率</techy-analysis-header>
|
||||
<new-line-stack />
|
||||
<new-line-stack :data-update-token="dataUpdateToken" />
|
||||
<div class="date-select">
|
||||
<span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'">日</span>
|
||||
<span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'">
|
||||
<span
|
||||
:class="{ 'date-select__active': dateMode2 === 'day' }"
|
||||
@click="
|
||||
dateMode2 = 'day'
|
||||
dataUpdateToken = '' + Math.random()
|
||||
"
|
||||
>
|
||||
日
|
||||
</span>
|
||||
<span
|
||||
:class="{ 'date-select__active': dateMode2 === 'month' }"
|
||||
@click="
|
||||
dateMode2 = 'month'
|
||||
dataUpdateToken = '' + Math.random()
|
||||
"
|
||||
>
|
||||
月
|
||||
</span>
|
||||
</div>
|
||||
@ -209,7 +264,44 @@ export default {
|
||||
NewLineStack
|
||||
},
|
||||
data() {
|
||||
const quexianDatalist = [
|
||||
[
|
||||
{ value: 107, name: '破片' },
|
||||
{ value: 146, name: '崩边' },
|
||||
{ value: 43, name: '脏污' },
|
||||
{ value: 83, name: '划擦伤' },
|
||||
{ value: 20, name: '崩孔' },
|
||||
{ value: 21, name: '其他' }
|
||||
],
|
||||
[
|
||||
{ value: 117, name: '破片' },
|
||||
{ value: 106, name: '崩边' },
|
||||
{ value: 40, name: '脏污' },
|
||||
{ value: 82, name: '划擦伤' },
|
||||
{ value: 22, name: '崩孔' },
|
||||
{ value: 19, name: '其他' }
|
||||
],
|
||||
[
|
||||
{ value: 97, name: '破片' },
|
||||
{ value: 96, name: '崩边' },
|
||||
{ value: 33, name: '脏污' },
|
||||
{ value: 43, name: '划擦伤' },
|
||||
{ value: 10, name: '崩孔' },
|
||||
{ value: 18, name: '其他' }
|
||||
],
|
||||
[
|
||||
{ value: 127, name: '破片' },
|
||||
{ value: 156, name: '崩边' },
|
||||
{ value: 53, name: '脏污' },
|
||||
{ value: 93, name: '划擦伤' },
|
||||
{ value: 25, name: '崩孔' },
|
||||
{ value: 22, name: '其他' }
|
||||
]
|
||||
]
|
||||
|
||||
return {
|
||||
dataUpdateToken: 'xx-token',
|
||||
plMode: 'a',
|
||||
dateMode: 'month',
|
||||
dateMode2: 'month',
|
||||
qualityTableProps,
|
||||
@ -227,7 +319,9 @@ export default {
|
||||
{ name: '包装', amount: 20 },
|
||||
{ name: '清晰', amount: 20 },
|
||||
{ name: '物流仓储', amount: 233920 }
|
||||
]
|
||||
],
|
||||
quexianDatalist,
|
||||
chosenDatalist: quexianDatalist[0]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -349,7 +443,8 @@ export default {
|
||||
|
||||
.quality-analysis__body__row-1 {
|
||||
height: calc(216px * var(--beilv));
|
||||
overflow: hidden;
|
||||
/* overflow: hidden; */
|
||||
overflow: initial;
|
||||
display: flex;
|
||||
gap: calc(16px * var(--beilv));
|
||||
}
|
||||
@ -409,6 +504,7 @@ export default {
|
||||
gap: calc(16px * var(--beilv));
|
||||
}
|
||||
|
||||
.pl-select,
|
||||
.date-select {
|
||||
position: absolute;
|
||||
top: calc(16px * var(--beilv));
|
||||
@ -419,6 +515,12 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pl-select {
|
||||
right: unset;
|
||||
left: calc(10px * var(--beilv));
|
||||
}
|
||||
|
||||
.pl-select span,
|
||||
.date-select span {
|
||||
display: inline-block;
|
||||
width: calc(40px * var(--beilv));
|
||||
@ -429,6 +531,7 @@ export default {
|
||||
background-color: #31878c94;
|
||||
}
|
||||
|
||||
.pl-select span.pl-select__active,
|
||||
.date-select span.date-select__active {
|
||||
background-color: #42bbb7;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="techy-analysis-header">
|
||||
<span class="top-icon">
|
||||
<span v-if="showTopIcon" class="top-icon">
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
@ -51,7 +51,7 @@
|
||||
<span class="techy-analysis-header__title">
|
||||
<slot />
|
||||
</span>
|
||||
<span class="top-icon">
|
||||
<span v-if="showTopIcon" class="top-icon">
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
@ -105,6 +105,12 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'TechyAnalysisHeader',
|
||||
props: {
|
||||
showTopIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
|
||||
@ -13,6 +13,10 @@ export default {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-fault-analysis-id'
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -44,6 +48,19 @@ export default {
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#49FBD600', offset: 0.1 },
|
||||
{ color: '#74DC85', offset: 1 } // 浅绿
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
@ -59,9 +76,9 @@ export default {
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
x: 0,
|
||||
y: 0.5,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
@ -73,8 +90,8 @@ export default {
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y: 0.5,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
@ -85,29 +102,21 @@ export default {
|
||||
}
|
||||
]
|
||||
|
||||
const demoData = [
|
||||
{ value: 55, name: 'A' },
|
||||
{ value: 33, name: 'B' },
|
||||
{ value: 22, name: 'C' },
|
||||
{ value: 11, name: 'D' },
|
||||
{ value: 32, name: 'E' }
|
||||
]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
// default configs
|
||||
configs: {
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
left: '63%',
|
||||
top: '35%',
|
||||
text: '33039',
|
||||
left: '69%',
|
||||
top: '46%',
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
itemGap: 2,
|
||||
itemGap: 5,
|
||||
subtext: '总数',
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
@ -116,16 +125,15 @@ export default {
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
top: '10%',
|
||||
bottom: 0,
|
||||
left: -10,
|
||||
left: 0,
|
||||
orient: 'vertical',
|
||||
icon: 'none',
|
||||
itemGap: 5,
|
||||
itemWidth: 10,
|
||||
formatter: function(name) {
|
||||
// test data - dynamic
|
||||
const testData = demoData
|
||||
formatter: name => {
|
||||
const testData = this.dataList
|
||||
|
||||
let pieLegendVale = {}
|
||||
testData.filter((item, index) => {
|
||||
@ -133,7 +141,7 @@ export default {
|
||||
pieLegendVale = item
|
||||
}
|
||||
})
|
||||
const color = ['c', 'd', 'e', 'f', 'g']
|
||||
const color = ['c', 'd', 'h', 'e', 'f', 'g']
|
||||
const arr = [
|
||||
'{' + color[testData.findIndex(item => item.name === name)] + '|}',
|
||||
'{b|' + pieLegendVale.name + '}',
|
||||
@ -146,58 +154,51 @@ export default {
|
||||
a: {
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
lineHeight: 16
|
||||
lineHeight: 16,
|
||||
width: 48,
|
||||
align: 'left'
|
||||
},
|
||||
b: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 40,
|
||||
align: 'left',
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255)'
|
||||
},
|
||||
c: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#FB418C'
|
||||
// backgroundColor: '#1A99FF'
|
||||
},
|
||||
d: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#DDB112'
|
||||
// backgroundColor: '#A691FF'
|
||||
},
|
||||
h: {
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#74DC85'
|
||||
},
|
||||
e: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#1A99FF'
|
||||
// backgroundColor: '#FB418C'
|
||||
},
|
||||
f: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#A691FF'
|
||||
// backgroundColor: '#49FBD6'
|
||||
},
|
||||
g: {
|
||||
// verticalAlign: 'top',
|
||||
// align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#49FBD6'
|
||||
// backgroundColor: '#DDB112'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -207,12 +208,12 @@ export default {
|
||||
{
|
||||
name: 'PieForm',
|
||||
type: 'pie',
|
||||
center: ['65%', '48%'],
|
||||
radius: ['60%', '85%'],
|
||||
center: ['70%', '56%'],
|
||||
radius: ['45%', '65%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
formatter: params => {
|
||||
const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
|
||||
const colorMap = ['first', 'second', 'sixth', 'third', 'fourth', 'fifth']
|
||||
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
|
||||
},
|
||||
rich: {
|
||||
@ -220,7 +221,8 @@ export default {
|
||||
second: { color: '#DDB112', fontSize: 8 },
|
||||
third: { color: '#1A99FF', fontSize: 8 },
|
||||
fourth: { color: '#A691FF', fontSize: 8 },
|
||||
fifth: { color: '#49FBD6', fontSize: 8 }
|
||||
fifth: { color: '#49FBD6', fontSize: 8 },
|
||||
sixth: { color: '#74DC85', fontSize: 8 }
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
@ -234,7 +236,7 @@ export default {
|
||||
const colorGradient = colors[dataIndex]
|
||||
if (totalRate + percent < 25) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
;(() => {})()
|
||||
} else if (totalRate + percent < 50) {
|
||||
colorGradient.x = 0
|
||||
colorGradient.y = 0
|
||||
@ -247,19 +249,28 @@ export default {
|
||||
colorGradient.y2 = 0
|
||||
} else if (totalRate + percent < 100) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
;(() => {})()
|
||||
}
|
||||
|
||||
totalRate += percent
|
||||
return colorGradient
|
||||
}
|
||||
},
|
||||
data: demoData
|
||||
data: this.dataList
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
dataList: function(val) {
|
||||
if (val && Array.isArray(val) && val.length) {
|
||||
this.applyChartOption(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
if (this.chart) {
|
||||
@ -284,26 +295,20 @@ export default {
|
||||
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||
return beilv * baseSize
|
||||
},
|
||||
// calcRate(baseRate) {
|
||||
// const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||
// return baseRate * beilv
|
||||
// },
|
||||
applyChartOption() {
|
||||
const fs1 = this.calcFontsize(1 /** px*/)
|
||||
const fs3 = this.calcFontsize(3 /** px*/)
|
||||
|
||||
applyChartOption(datalist) {
|
||||
const fs5 = this.calcFontsize(5 /** px*/)
|
||||
const fs8 = this.calcFontsize(8 /** px*/)
|
||||
const fs10 = this.calcFontsize(10 /** px*/)
|
||||
const fs14 = this.calcFontsize(14 /** px*/)
|
||||
const fs16 = this.calcFontsize(16 /** px*/)
|
||||
const rate10 = this.calcFontsize(10 /** % */)
|
||||
const rate3 = this.calcFontsize(3 /** % */)
|
||||
const fs18 = this.calcFontsize(18 /** px*/)
|
||||
const legendTopRate = this.calcFontsize(28 /** % */)
|
||||
|
||||
this.configs.title.textStyle.fontSize = fs14
|
||||
this.configs.title.subtextStyle.fontSize = fs10
|
||||
this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value, 0)
|
||||
this.configs.title.textStyle.fontSize = fs18
|
||||
this.configs.title.subtextStyle.fontSize = fs14
|
||||
|
||||
this.configs.legend.top = rate10 + '%'
|
||||
this.configs.legend.left = rate3 + '%'
|
||||
this.configs.legend.top = legendTopRate + '%'
|
||||
this.configs.legend.left = 0 + '%'
|
||||
this.configs.legend.itemGap = fs5
|
||||
this.configs.legend.itemWidth = fs10
|
||||
|
||||
@ -326,13 +331,17 @@ export default {
|
||||
this.configs.legend.textStyle.rich.g.width = fs10
|
||||
this.configs.legend.textStyle.rich.g.height = fs10
|
||||
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
||||
this.configs.legend.textStyle.rich.h.width = fs10
|
||||
this.configs.legend.textStyle.rich.h.height = fs10
|
||||
this.configs.legend.textStyle.rich.h.borderRadius = fs5
|
||||
|
||||
this.configs.series[0].label.rich.first.fontSize = fs10
|
||||
this.configs.series[0].label.rich.second.fontSize = fs10
|
||||
this.configs.series[0].label.rich.third.fontSize = fs10
|
||||
this.configs.series[0].label.rich.fourth.fontSize = fs10
|
||||
this.configs.series[0].label.rich.fifth.fontSize = fs10
|
||||
|
||||
this.configs.series[0].label.rich.sixth.fontSize = fs10
|
||||
if (datalist) this.configs.series[0].data = datalist
|
||||
this.chart.setOption(this.configs)
|
||||
}
|
||||
}
|
||||
@ -341,9 +350,13 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.chartContainer {
|
||||
height: calc(100% - (36px * var(--beilv)));
|
||||
position: relative;
|
||||
/* height: calc(100% - (36px * var(--beilv))); */
|
||||
/* position: relative; */
|
||||
/* position: absolute;
|
||||
top: 0;
|
||||
left: 0; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chartContainer > div {
|
||||
|
||||
@ -9,7 +9,12 @@ import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
export default {
|
||||
name: 'PlFaultAnalysisPieChart',
|
||||
mixins: [resize],
|
||||
props: {},
|
||||
props: {
|
||||
dataUpdateToken: {
|
||||
type: String,
|
||||
default: 'default-token'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
@ -17,6 +22,7 @@ export default {
|
||||
color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
extraCssText: 'width: 180px !important; ',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
@ -24,9 +30,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
// },
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '2%',
|
||||
@ -73,6 +76,7 @@ export default {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
@ -114,7 +118,10 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [11, 199, 140, 63, 185, 5, 78]
|
||||
data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '磨边机',
|
||||
@ -145,7 +152,10 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [151, 57, 31, 7, 77, 88, 119]
|
||||
data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '镀膜机',
|
||||
@ -176,7 +186,10 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [58, 3, 67, 100, 42, 96, 124]
|
||||
data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '包装纸',
|
||||
@ -207,7 +220,10 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [92, 88, 122, 169, 108, 130, 147]
|
||||
data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '丝印',
|
||||
@ -242,12 +258,22 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [44, 40, 118, 197, 123, 95, 96]
|
||||
data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
dataUpdateToken(val) {
|
||||
this.refreshData()
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('resize', function() {
|
||||
if (this.chart) {
|
||||
@ -263,7 +289,17 @@ export default {
|
||||
this.chart.resize()
|
||||
})
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
refreshData() {
|
||||
this.configs.series.forEach(item => {
|
||||
item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
})
|
||||
if (this.chart) this.chart.setOption(this.configs)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -271,4 +307,8 @@ export default {
|
||||
.chartContainer >>> div {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.diy-linestack-tooltip {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,14 +27,18 @@
|
||||
<ul class="report-item__list">
|
||||
<li v-if="!item.quantity">
|
||||
<span class="icon icon-no-reports" />
|
||||
<span>暂无报表</span>
|
||||
<span style="color: #909090;">暂无报表</span>
|
||||
</li>
|
||||
|
||||
<template v-else>
|
||||
<li v-for="n in item.quantity" :key="n">
|
||||
<li v-for="n in item.reportNames" :key="n">
|
||||
<span class="icon" />
|
||||
<span>{{ n }}</span>
|
||||
</li>
|
||||
<!-- <li v-for="n in item.quantity" :key="n">
|
||||
<span class="icon" />
|
||||
<span>报表{{ n }}</span>
|
||||
</li>
|
||||
</li> -->
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
@ -212,7 +216,21 @@ export default {
|
||||
init() {
|
||||
list({}).then(res => {
|
||||
this.allNum = 0
|
||||
this.sortList = res.data
|
||||
this.sortList = res.data.map(item => {
|
||||
if (item.name === '能源') {
|
||||
return { ...item, reportNames: ['产线电量日能耗统计'] }
|
||||
} else if (item.name === '订单') {
|
||||
return { ...item, reportNames: ['订单历史记录', '在线订单进度'] }
|
||||
} else if (item.name === '设备') {
|
||||
return { ...item, reportNames: ['设备报警', '设备加工数量统计', '设备OEE'] }
|
||||
} else if (item.name === '人员') {
|
||||
return { ...item, reportNames: ['班组加工数量统计'] }
|
||||
} else if (item.name === '产线') {
|
||||
return { ...item, reportNames: ['产线日产量统计', '产线历史产量记录'] }
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
})
|
||||
res.data.forEach(item => {
|
||||
this.allNum += item.quantity
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user