Compare commits
5 Commits
34c8b29348
...
d8592611b6
| Author | SHA1 | Date | |
|---|---|---|---|
| d8592611b6 | |||
| e9ac894a4a | |||
| 59b40fefe9 | |||
| 779a771bb5 | |||
| 97ee3a9a4c |
@ -15,19 +15,7 @@ export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-dian-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: 'default-dian-line-chart'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -69,29 +57,35 @@ export default {
|
||||
option: {
|
||||
color: colors,
|
||||
legend: {
|
||||
top: 4,
|
||||
right: 50,
|
||||
top: 16,
|
||||
right: 64,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: '#fff9',
|
||||
fontSize: 8
|
||||
fontSize: 12
|
||||
}
|
||||
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
|
||||
},
|
||||
grid: {
|
||||
top: 32,
|
||||
top: 48,
|
||||
left: 64,
|
||||
bottom: 28
|
||||
bottom: 36
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
axis: 'x'
|
||||
axis: 'x',
|
||||
lineStyle: {
|
||||
color: '#41888F90',
|
||||
shadowColor: '#41888F',
|
||||
shadowBlur: 10,
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
extraCssText: 'width: 152px !important; height: 100px !important;'
|
||||
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
@ -99,7 +93,8 @@ export default {
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff9'
|
||||
color: '#fff9',
|
||||
fontSize: 14
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
@ -110,13 +105,13 @@ export default {
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '电流/A',
|
||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||
name: '电流/A ',
|
||||
nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 3,
|
||||
splitNumber: 4,
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 40,
|
||||
offset: 32,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -127,7 +122,7 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
@ -138,10 +133,10 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '电压/V',
|
||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||
name: ' 电压/V ',
|
||||
nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 3,
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
@ -155,7 +150,7 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
@ -166,8 +161,8 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '温度',
|
||||
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 9 },
|
||||
name: ' 温度',
|
||||
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 12 },
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: false,
|
||||
@ -177,7 +172,7 @@ export default {
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
splitNumber: 3,
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
@ -187,7 +182,7 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
],
|
||||
@ -251,7 +246,9 @@ export default {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
initOption(legendSize, labelSize, axisLabelSize, splitLineNumber) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :id="id" ref="techy-line-chart" class="techy-chart" />
|
||||
<div id="techy-line-chart" ref="techy-line-chart" class="techy-chart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -13,22 +13,7 @@ export default {
|
||||
inject: ['resizeStatus'],
|
||||
/** End Fn.1 */
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-fadian-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -46,20 +31,20 @@ export default {
|
||||
color: ['#E02094', '#F0D63C', '#1A99FF'],
|
||||
grid: {
|
||||
top: '30%',
|
||||
left: 0,
|
||||
left: '120%',
|
||||
right: '5%',
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
axis: 'x'
|
||||
},
|
||||
extraCssText: 'width: 152px !important; height: 100px !important;'
|
||||
},
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'line',
|
||||
// axis: 'x'
|
||||
// },
|
||||
// extraCssText: 'position: absolute; width: 152px !important; height: 100px !important;'
|
||||
// },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
@ -71,7 +56,7 @@ export default {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 8,
|
||||
fontSize: 10,
|
||||
color: '#fffa'
|
||||
},
|
||||
axisLine: {
|
||||
@ -92,7 +77,7 @@ export default {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 8,
|
||||
fontSize: 10,
|
||||
color: '#fffa'
|
||||
// formatter: '{value} %'
|
||||
},
|
||||
|
||||
@ -100,7 +100,7 @@ export default {
|
||||
}
|
||||
|
||||
.left-content-equipment-check {
|
||||
height: calc(100% - 32px);
|
||||
height: calc(100% - calc(32px * var(--beilv)));
|
||||
display: flex;
|
||||
gap: calc(100vmin / 1920 * 36);
|
||||
overflow: hidden;
|
||||
|
||||
@ -27,7 +27,7 @@ export default {
|
||||
.left-content-monitoring {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100% - 32px);
|
||||
height: calc(100% - calc(32px * var(--beilv)));
|
||||
display: flex;
|
||||
gap: calc(100vw / 1920 * 16);
|
||||
}
|
||||
|
||||
@ -15,24 +15,16 @@ const ProcessCircle = {
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('finished', this.injectData.finished)
|
||||
},
|
||||
methods: {},
|
||||
render: function(h) {
|
||||
return h('el-progress', {
|
||||
class: {
|
||||
'lb-progress-bar': true
|
||||
},
|
||||
props: {
|
||||
type: 'circle',
|
||||
percentage: this.injectData.finished,
|
||||
width: 14,
|
||||
'stroke-width': 2,
|
||||
color: '#47FF27'
|
||||
},
|
||||
style: {
|
||||
color: 'blue'
|
||||
color: '#47FF27',
|
||||
'define-back-color': '#ffffff' // 背景色, 该选项不起作用，可能和 element ui 版本相关
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -99,4 +91,8 @@ export default {
|
||||
left: calc(-2px * var(--beilv));
|
||||
color: #ffffffb3 !important;
|
||||
}
|
||||
|
||||
.left-content-order >>> .el-progress-circle__track {
|
||||
stroke: #283851;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -73,8 +73,8 @@
|
||||
<img src="./assets/consume/d.png" width="32" height="32" alt="dian" />
|
||||
<span>电</span>
|
||||
</div>
|
||||
<div style="height: 100%; flex: 1;">
|
||||
<DianChart />
|
||||
<div style="height: 100%; flex: 1; overflow: hidden">
|
||||
<DianChart id="dian" key="dian" />
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
@ -85,9 +85,9 @@
|
||||
<img src="./assets/consume/fad.png" width="32" height="32" alt="fadian" />
|
||||
<span>发电</span>
|
||||
</div>
|
||||
<div style="height: 100%; flex: 1; ">
|
||||
<div style="height: 100%; flex: 1; overflow: hidden">
|
||||
<!-- <FadianChart /> -->
|
||||
<DianChart />
|
||||
<DianChart id="fa-dian" key="fa-dian" />
|
||||
</div>
|
||||
</TechyBox>
|
||||
</div>
|
||||
@ -116,7 +116,7 @@ export default {
|
||||
.public-consume__inner {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 32px);
|
||||
height: calc(100% - calc(32px * var(--beilv)));
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -161,7 +161,7 @@ export default {
|
||||
flex-direction: column;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
color: #fff9;
|
||||
height: 10px;
|
||||
height: calc(48px * var(--beilv));
|
||||
flex: 1 1;
|
||||
gap: calc(4px * var(--beilv));
|
||||
}
|
||||
|
||||
@ -114,7 +114,7 @@ export default {
|
||||
}
|
||||
|
||||
.right-content-alert {
|
||||
height: calc(100% - 32px);
|
||||
height: calc(100% - calc(32px * var(--beilv)));
|
||||
display: flex;
|
||||
gap: calc(100vw / 1920 * 16);
|
||||
overflow: hidden;
|
||||
|
||||
@ -106,8 +106,8 @@ export default {
|
||||
configs: {
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
left: '64%',
|
||||
top: '48%',
|
||||
left: '67%',
|
||||
top: '50%',
|
||||
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
@ -210,7 +210,7 @@ export default {
|
||||
{
|
||||
name: 'PieForm',
|
||||
type: 'pie',
|
||||
center: ['65%', '60%'],
|
||||
center: ['68%', '61%'],
|
||||
radius: ['42%', '60%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
@ -301,7 +301,8 @@ export default {
|
||||
this.configs.title.textStyle.fontSize = titleSize
|
||||
this.configs.title.subtextStyle.fontSize = subtitleSize
|
||||
|
||||
this.configs.legend.top = '24%'
|
||||
this.configs.legend.top = '26%'
|
||||
this.configs.legend.left = fs8
|
||||
this.configs.legend.itemGap = fs8
|
||||
this.configs.legend.itemWidth = fs8
|
||||
|
||||
@ -325,11 +326,11 @@ export default {
|
||||
this.configs.legend.textStyle.rich.g.height = fs8
|
||||
this.configs.legend.textStyle.rich.g.borderRadius = fs5
|
||||
|
||||
this.configs.series[0].label.rich.first.fontSize = fs12
|
||||
this.configs.series[0].label.rich.second.fontSize = fs12
|
||||
this.configs.series[0].label.rich.third.fontSize = fs12
|
||||
this.configs.series[0].label.rich.fourth.fontSize = fs12
|
||||
this.configs.series[0].label.rich.fifth.fontSize = fs12
|
||||
this.configs.series[0].label.rich.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.chart.setOption(this.configs)
|
||||
}
|
||||
|
||||
@ -1,276 +1,234 @@
|
||||
<template>
|
||||
<div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
|
||||
<div ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
class ChartOption {
|
||||
constructor() {
|
||||
// const wenduData = Array(12)
|
||||
// .fill(1)
|
||||
// .map(_ => Random.integer(30, 100))
|
||||
// const dianyaData = Array(12)
|
||||
// .fill(1)
|
||||
// .map(_ => Random.integer(30, 100))
|
||||
// const dianliuData = Array(12)
|
||||
// .fill(1)
|
||||
// .map(_ => Random.integer(30, 100))
|
||||
|
||||
this.color = ['#1A99FF', '#E02094', '#F0D63C']
|
||||
|
||||
this.legend = {
|
||||
top: 24,
|
||||
right: 40,
|
||||
itemWidth: 18,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#fffc'
|
||||
}
|
||||
}
|
||||
|
||||
this.grid = {
|
||||
top: 72,
|
||||
left: 26,
|
||||
right: 24,
|
||||
bottom: 16,
|
||||
containLabel: true
|
||||
}
|
||||
|
||||
this.tooltip = {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'line'
|
||||
},
|
||||
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
|
||||
}
|
||||
|
||||
this.xAxis = {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#fffa'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
this.yAxis = {
|
||||
type: 'value',
|
||||
name: '成品率 ',
|
||||
min: 'dataMin',
|
||||
splitNumber: 3,
|
||||
nameTextStyle: {
|
||||
color: '#fff9',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#fffa',
|
||||
formatter: '{value} %'
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.series = [
|
||||
{
|
||||
name: 'A',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#59CBE866' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 80) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'B',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#E93CAC66' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 80) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
get option() {
|
||||
return this
|
||||
}
|
||||
|
||||
optionFilter(option, calcSize = () => {} /** callback */) {
|
||||
let newOption
|
||||
if (Array.isArray(option)) {
|
||||
newOption = []
|
||||
option.forEach(item => {
|
||||
newOption.push(this.optionFilter(item, calcSize))
|
||||
})
|
||||
return newOption
|
||||
} else if (typeof option === 'object') {
|
||||
newOption = {}
|
||||
for (const key in option) {
|
||||
if (key === 'colorStops') newOption[key] = option[key]
|
||||
else if (
|
||||
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
||||
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
|
||||
) {
|
||||
newOption[key] = calcSize(option[key])
|
||||
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
||||
}
|
||||
return newOption
|
||||
} else {
|
||||
newOption = calcSize(option)
|
||||
return option
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'ProductRateLineChart',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
color: ['#59CBE8', '#FF7345', '#E93CAC', '#9452FF', '#6A6E87', '#52FFF1'],
|
||||
grid: {
|
||||
top: '40%',
|
||||
left: '5%',
|
||||
right: '6%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
|
||||
},
|
||||
legend: {
|
||||
width: '72%',
|
||||
top: '20%',
|
||||
right: '6%',
|
||||
itemWidth: 12,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: '#fffc'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
color: '#fffa'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '成品率 ',
|
||||
min: 'dataMin',
|
||||
splitNumber: 3,
|
||||
nameTextStyle: {
|
||||
color: '#fffc',
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
color: '#fffa',
|
||||
formatter: '{value} %'
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'A',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#59CBE866' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 80) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'B',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#E93CAC66' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(0)
|
||||
.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))
|
||||
// }
|
||||
]
|
||||
}
|
||||
option: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||
this.chart.setOption(this.option)
|
||||
this.setChartOption()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
calcSize(num) {
|
||||
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||
return num * beilv
|
||||
},
|
||||
setChartOption() {
|
||||
let chartOption = new ChartOption()
|
||||
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@ -47,7 +47,7 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.right-content-quality-analysis {
|
||||
height: calc(100% - 32px);
|
||||
height: calc(100% - calc(32px * var(--beilv)));
|
||||
overflow: hidden;
|
||||
overflow-y: auto; /** 右边会有多的padding给滑道 */
|
||||
display: grid;
|
||||
|
||||
@ -15,6 +15,223 @@
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
import { Random } from 'mockjs'
|
||||
|
||||
class ChartOption {
|
||||
constructor() {
|
||||
const wenduData = Array(12)
|
||||
.fill(1)
|
||||
.map(_ => Random.integer(30, 100))
|
||||
const dianyaData = Array(12)
|
||||
.fill(1)
|
||||
.map(_ => Random.integer(30, 100))
|
||||
const dianliuData = Array(12)
|
||||
.fill(1)
|
||||
.map(_ => Random.integer(30, 100))
|
||||
|
||||
this.color = ['#1A99FF', '#F0D63C', '#E02094']
|
||||
|
||||
this.legend = {
|
||||
top: 28,
|
||||
right: 40,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
}
|
||||
}
|
||||
|
||||
this.grid = {
|
||||
top: 80,
|
||||
left: 88,
|
||||
right: 24,
|
||||
bottom: 32
|
||||
}
|
||||
|
||||
this.tooltip = {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
axis: 'x'
|
||||
},
|
||||
extraCssText: 'width: calc(100px*var(--beilv)) !important;'
|
||||
}
|
||||
|
||||
this.xAxis = {
|
||||
type: 'category',
|
||||
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.yAxis = [
|
||||
{
|
||||
name: '能耗 ',
|
||||
nameTextStyle: { align: 'right', fontSize: 10, lineHeight: 14, 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, lineHeight: 14, 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'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
this.series = [
|
||||
{
|
||||
name: '产线1',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianliuData,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '产线2',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianyaData,
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#F0D63C66' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
get option() {
|
||||
return this
|
||||
}
|
||||
|
||||
optionFilter(option, calcSize = () => {} /** callback */) {
|
||||
let newOption
|
||||
if (Array.isArray(option)) {
|
||||
newOption = []
|
||||
option.forEach(item => {
|
||||
newOption.push(this.optionFilter(item, calcSize))
|
||||
})
|
||||
return newOption
|
||||
} else if (typeof option === 'object') {
|
||||
newOption = {}
|
||||
for (const key in option) {
|
||||
if (key === 'colorStops') newOption[key] = option[key]
|
||||
else if (
|
||||
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
||||
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
|
||||
) {
|
||||
newOption[key] = calcSize(option[key])
|
||||
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
||||
}
|
||||
return newOption
|
||||
} else {
|
||||
newOption = calcSize(option)
|
||||
return option
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'RealtimeLineChart',
|
||||
@ -22,186 +239,11 @@ export default {
|
||||
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
|
||||
inject: ['resizeStatus'],
|
||||
/** End Fn.1 */
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-dian-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
const colors = ['#1A99FF', '#F0D63C', '#E02094']
|
||||
|
||||
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
|
||||
let data = [
|
||||
// 温度走势
|
||||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 30) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
}),
|
||||
// 电流走势
|
||||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 30) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
}),
|
||||
// 电压走势
|
||||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 30) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
]
|
||||
let wendu = data[0]
|
||||
let dianliu = data[1]
|
||||
let dianya = data[2]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
color: colors,
|
||||
legend: {
|
||||
top: 28,
|
||||
right: 40,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
}
|
||||
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
|
||||
},
|
||||
grid: {
|
||||
top: 80,
|
||||
left: 88,
|
||||
right: 24,
|
||||
bottom: 32
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
axis: 'x'
|
||||
},
|
||||
extraCssText: 'width: 100px !important;'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'],
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff9'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '能耗 ',
|
||||
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 40,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5982B2',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff1',
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '产量 ',
|
||||
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5982B2',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff1',
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '产线1',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianliu,
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: '产线2',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianya,
|
||||
symbol: 'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
option: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -211,6 +253,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
shouldResize(val, oldVal) {
|
||||
console.log('fullscreen resize')
|
||||
setTimeout(() => {
|
||||
this.chart.resize()
|
||||
}, 250)
|
||||
@ -219,14 +262,23 @@ export default {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['realtimeLineChart'])
|
||||
this.chart.setOption(this.option)
|
||||
this.setChartOption()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
calcSize(num) {
|
||||
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||
return num * beilv
|
||||
},
|
||||
setChartOption() {
|
||||
let chartOption = new ChartOption()
|
||||
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div id="v3d-outter" ref="v3d-outter">
|
||||
<div id="V3DData" style="position: fixed; top: 0; left: 0; display: hidden;" rel=""></div>
|
||||
<!-- <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"> -->
|
||||
<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">
|
||||
@ -204,6 +204,7 @@ export default {
|
||||
}
|
||||
|
||||
#v3d-outter *::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
width: calc(8px * var(--beilv));
|
||||
height: calc(8px * var(--beilv));
|
||||
background: #5bc4bf9f;
|
||||
@ -257,7 +258,7 @@ export default {
|
||||
|
||||
/* 实时产量和能耗 */
|
||||
.realtime {
|
||||
height: calc(256px * var(--beilv));
|
||||
height: calc(240px * var(--beilv));
|
||||
}
|
||||
/* 工序质量分析 */
|
||||
.ws-quality {
|
||||
@ -267,7 +268,8 @@ export default {
|
||||
}
|
||||
/* 产线成品率 */
|
||||
.production {
|
||||
height: calc(256px * var(--beilv));
|
||||
height: calc(200px * var(--beilv));
|
||||
flex: 1 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,13 @@ export default {
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
if (this.setChartOption) {
|
||||
this.setChartOption()
|
||||
this.$nextTick(() => {
|
||||
this.chart.resize()
|
||||
})
|
||||
} else
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user