mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 3d 公用工程

Browse Source
This commit is contained in:
lb 2022-11-24 09:45:11 +08:00
parent d8592611b6
commit 539235fcfb
2 changed files with 232 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

425
src/views/3DOverview/components/DianChart.vue
View File

@ -5,6 +5,218 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs'
class ChartOption {
constructor() {
this.color = ['#E02094', '#F0D63C', '#1A99FF']
this.legend = {
top: 11,
right: 32,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#fff9',
fontSize: 10
}
}
this.grid = {
top: 36,
left: 64,
bottom: 36
}
this.tooltip = {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
axis: 'x',
lineStyle: {
color: '#41888F90',
shadowColor: '#41888F',
shadowBlur: 10,
width: 2
}
},
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
}
this.xAxis = {
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisTick: { show: false },
axisLabel: {
color: '#fff9',
fontSize: 12,
margin: 10
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
}
this.yAxis = [
{
name: '电流/A ',
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
type: 'value',
splitNumber: 4,
onZero: true,
position: 'left',
offset: 28,
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: ' 电压/V ',
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'
}
}
},
{
name: ' 温度',
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 10 },
axisTick: { show: false },
axisLine: {
show: false,
lineStyle: {
color: '#fff9',
width: 1
}
},
type: 'value',
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: '#fff1',
type: 'dotted'
}
},
axisLabel: {
color: '#fff9',
fontSize: 10
}
}
]
this.series = [
{
name: 'ABC三相电压/v',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'none'
},
{
name: 'ABC三相电流/a',
type: 'line',
yAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'none'
},
{
name: '电缆温度',
type: 'line',
yAxisIndex: 2,
// smooth: true,
emphasis: {
focus: 'series'
},
data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'none'
}
]
}
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 { export default {
name: 'DianLineChart', name: 'DianLineChart',
@ -19,209 +231,9 @@ export default {
} }
}, },
data() { data() {
const colors = ['#E02094', '#F0D63C', '#1A99FF']
// 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 { return {
chart: null, chart: null,
option: { option: null
color: colors,
legend: {
top: 16,
right: 64,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#fff9',
fontSize: 12
}
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
},
grid: {
top: 48,
left: 64,
bottom: 36
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
axis: 'x',
lineStyle: {
color: '#41888F90',
shadowColor: '#41888F',
shadowBlur: 10,
width: 2
}
},
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
},
xAxis: [
{
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisTick: { show: false },
axisLabel: {
color: '#fff9',
fontSize: 14
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
}
],
yAxis: [
{
name: '电流/A ',
nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
type: 'value',
splitNumber: 4,
onZero: true,
position: 'left',
offset: 32,
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: '#5982B2',
width: 1
}
},
axisLabel: {
color: '#fff9',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#fff1',
type: 'dotted'
}
}
},
{
name: ' 电压/V ',
nameTextStyle: { align: 'right', fontSize: 12, 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: 12
},
splitLine: {
show: true,
lineStyle: {
color: '#fff1',
type: 'dotted'
}
}
},
{
name: ' 温度',
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 12 },
axisTick: { show: false },
axisLine: {
show: false,
lineStyle: {
color: '#fff9',
width: 1
}
},
type: 'value',
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: '#fff1',
type: 'dotted'
}
},
axisLabel: {
color: '#fff9',
fontSize: 12
}
}
],
series: [
{
name: 'ABC三相电压/v',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianliu,
symbol: 'none'
},
{
name: 'ABC三相电流/a',
type: 'line',
yAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianya,
symbol: 'none'
},
{
name: '电缆温度',
type: 'line',
yAxisIndex: 2,
// smooth: true,
emphasis: {
focus: 'series'
},
data: wendu,
symbol: 'none'
}
]
}
} }
}, },
computed: { computed: {
@ -239,7 +251,7 @@ export default {
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart']) if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option) this.setChartOption()
}) })
}, },
beforeDestroy() { beforeDestroy() {
@ -247,7 +259,14 @@ export default {
this.chart = null this.chart = null
}, },
methods: { methods: {
initOption(legendSize, labelSize, axisLabelSize, splitLineNumber) {} 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> </script>

20
src/views/3DOverview/components/RightContentQualityAnalysis.vue
View File

@ -26,16 +26,16 @@ export default {
data() { data() {
return { return {
datalist: [ datalist: [
{ name: '热端', value: 2023233, color: '#0b88ff' }, { name: '热端', value: 66, color: '#0b88ff' },
{ name: '丝印', value: 2023233, color: '#0bffa6' }, { name: '丝印', value: 93, color: '#0bffa6' },
{ name: '原片', value: 20, color: '#0bffa6' }, { name: '原片', value: 121, color: '#0bffa6' },
{ name: '钢化', value: 20, color: '#e3ff0b' }, { name: '钢化', value: 2, color: '#e3ff0b' },
{ name: '上片磨边', value: 20, color: '#e3ff0b' }, { name: '上片磨边', value: 211, color: '#e3ff0b' },
{ name: '下片铺纸', value: 202324, color: '#950bff' }, { name: '下片铺纸', value: 27, color: '#950bff' },
{ name: '镀膜', value: 20, color: '#950bff' }, { name: '镀膜', value: 44, color: '#950bff' },
{ name: '物流仓储', value: 202324, color: '#ff7d0b' }, { name: '物流仓储', value: 3, color: '#ff7d0b' },
{ name: '清洗', value: 20, color: '#0bffa6' }, { name: '清洗', value: 2, color: '#0bffa6' },
{ name: '包装', value: 2, color: '#ff0bc2' } { name: '包装', value: 22, color: '#ff0bc2' }
] ]
} }
}, },