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

lb #17

Merged
gtz217 merged 29 commits from lb into master 2022-11-25 16:46:41 +08:00
Conversation 0 Commits 29 Files Changed 28 +209 -251
3 changed files with 209 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e9ac894a4a - Show all commits

456
src/views/3DOverview/components/RightContentProductRate.vue
View File

@ -1,276 +1,234 @@
<template> <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> </template>
<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'
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 { export default {
name: 'ProductRateLineChart', name: 'ProductRateLineChart',
mixins: [resize], mixins: [resize],
props: { props: {},
id: {
type: String,
default: 'default-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() { data() {
return { return {
chart: null, chart: null,
option: { option: null
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))
// }
]
}
} }
}, },
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() {
if (this.chart) this.chart.dispose() if (this.chart) this.chart.dispose()
this.chart = null 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> </script>
<style scoped> <style scoped>

1
src/views/3DOverview/components/RightContentRealtimeProduction.vue
View File

@ -16,7 +16,6 @@
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' import { Random } from 'mockjs'
import { debounce } from '@/utils'
class ChartOption { class ChartOption {
constructor() { constructor() {

3
src/views/3DOverview/index.vue
View File

@ -268,7 +268,8 @@ export default {
} }
/* 产线成品率 */ /* 产线成品率 */
.production { .production {
height: calc(220px * var(--beilv)); height: calc(200px * var(--beilv));
flex: 1 0;
position: relative; position: relative;
} }