代码优化，删除冗余代码
This commit is contained in:
970
src/pages/modules/home/left/left.vue
Normal file
970
src/pages/modules/home/left/left.vue
Normal file
@@ -0,0 +1,970 @@
|
||||
<template>
|
||||
<div class="left_wraper">
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>今日生产</p>
|
||||
</div>
|
||||
<div class="content_wraper flexbetween">
|
||||
<div class="module_one_wraper">
|
||||
<div class="echart_wraper_1">
|
||||
<div id="new_home_echart_1" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
<div class="echart_title_1">订单完成</div>
|
||||
</div>
|
||||
<div class="module_two_wraper">
|
||||
<div class="module_two_item_wraper">
|
||||
<div class="module_two_item_lable flexcenter">混料</div>
|
||||
<div class="module_two_item_content">
|
||||
<div class="module_two_item_pro"></div>
|
||||
<div class="module_two_item_p_l flexcenter">85.00吨</div>
|
||||
<div class="module_two_item_p_r flexcenter">100吨</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="module_two_item_wraper">
|
||||
<div class="module_two_item_lable flexcenter">成型</div>
|
||||
<div class="module_two_item_content">
|
||||
<div class="module_two_item_pro"></div>
|
||||
<div class="module_two_item_p_l flexcenter">85.00块</div>
|
||||
<div class="module_two_item_p_r flexcenter">100块</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="module_two_item_wraper">
|
||||
<div class="module_two_item_lable flexcenter">包装</div>
|
||||
<div class="module_two_item_content">
|
||||
<div class="module_two_item_pro"></div>
|
||||
<div class="module_two_item_p_l flexcenter">85.00块</div>
|
||||
<div class="module_two_item_p_r flexcenter">100快</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="module_three_wraper">
|
||||
<div class="module_three_text">
|
||||
剩余<span>5</span>个，完成率<span>85%</span>，预计完成时间10月11日17点35分。今日订单共<span>158</span>个。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wraper flexbetween">
|
||||
<div class="l_item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>当日混料</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="echart_wraper">
|
||||
<div id="new_home_echart_2" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l_item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>当日成品</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="echart_wraper">
|
||||
<div id="new_home_echart_3" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wraper flexbetween">
|
||||
<div class="l_item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>库存量监控</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="echart_wraper">
|
||||
<div id="new_home_echart_4" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l_item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>历史分析</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="echart_wraper">
|
||||
<div id="new_home_echart_5" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { homepageDataLeft } from '@js/mork2.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
todayProduction: {}, // 今日生产
|
||||
todayMix: [], // 当日混料
|
||||
todaySort: [], // 当日成品
|
||||
inventory: [], // 库存量监控
|
||||
history: [], // 历史分析
|
||||
chart2Timer: null,
|
||||
chart5Timer: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._homepageDataLeft()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
clearInterval(this.chart2Timer)
|
||||
clearInterval(this.chart5Timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this._homepageDataLeft()
|
||||
}, this.interTime)
|
||||
},
|
||||
async _homepageDataLeft () {
|
||||
let res = await homepageDataLeft()
|
||||
clearInterval(this.chart2Timer)
|
||||
clearInterval(this.chart5Timer)
|
||||
this.todayProduction = res.todayProduction
|
||||
this.todayMix = [...res.todayMix]
|
||||
this.todaySort = [...res.todaySort]
|
||||
this.inventory = [...res.inventory]
|
||||
this.history = [...res.history]
|
||||
this.setEchart1()
|
||||
this.setEchart2()
|
||||
this.setEchart3()
|
||||
this.setEchart4()
|
||||
this.setEchart5()
|
||||
},
|
||||
setEchart1 () {
|
||||
let value = Number(this.todayProduction.orderFulfillmentRate.real) / Number(this.todayProduction.orderFulfillmentRate.plan)
|
||||
value = value.toFixed(2)
|
||||
value = value * 100
|
||||
value = 78
|
||||
let option = {
|
||||
grid: {
|
||||
top: 5,
|
||||
left: 0,
|
||||
right: 70,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
series: [{
|
||||
name: '进度',
|
||||
type: 'pie',
|
||||
radius: ['76%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
clockwise: false,
|
||||
label: {
|
||||
position: 'center',
|
||||
formatter: `{val| ${value}}{name|%}`,
|
||||
rich: {
|
||||
val: {
|
||||
fontSize: 32,
|
||||
fontWeight: 500,
|
||||
color: '#fff',
|
||||
fontFamily: 'Oswald-Regular, Oswald'
|
||||
},
|
||||
name: {
|
||||
fontSize: 18,
|
||||
fontWeight: 400,
|
||||
padding: [10, 0, 0, 0],
|
||||
color: '#fff',
|
||||
fontFamily: 'PingFangSC-Regular, PingFang SC'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
name: '已完成',
|
||||
value: value - 1,
|
||||
itemStyle: {
|
||||
decal: {
|
||||
color: '#0075f3',
|
||||
backgroundColor: '#2e93f5',
|
||||
dashArrayX: [1, 0],
|
||||
dashArrayY: [1, 4],
|
||||
rotation: -Math.PI
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '白色尾部',
|
||||
value: 1,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0,
|
||||
y: 0,
|
||||
r: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2e93f5' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: '#fff' // 0% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true
|
||||
}
|
||||
}, {
|
||||
name: '未完成',
|
||||
value: 100 - value,
|
||||
itemStyle: {
|
||||
decal: {
|
||||
color: '#2a527e',
|
||||
backgroundColor: '#355a84',
|
||||
dashArrayX: [1, 0],
|
||||
dashArrayY: [2, 4],
|
||||
rotation: -Math.PI
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
disabled: true
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
type: 'pie',
|
||||
data: [100],
|
||||
silent: true,
|
||||
radius: '100%',
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
color: '#0c2646'
|
||||
},
|
||||
z: -1
|
||||
}, {
|
||||
type: 'pie',
|
||||
radius: ['58%', '58.5%'],
|
||||
startAngle: 225,
|
||||
legendHoverLink: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: '#0e58a8'
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
type: 'gauge',
|
||||
radius: '78%',
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 0,
|
||||
endAngle: 359.9,
|
||||
splitNumber: 18,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#0e58a8'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [{
|
||||
value: 0,
|
||||
name: ''
|
||||
}]
|
||||
}]
|
||||
}
|
||||
// let echart = document.getElementById('new_home_echart_1')
|
||||
// if (this.myCharts1 !== '') {
|
||||
// this.myCharts1.dispose()
|
||||
// }
|
||||
// if (echart !== null) {
|
||||
// this.myCharts1 = this.$echarts.init(echart)
|
||||
// this.myCharts1.setOption(option)
|
||||
// window.addEventListener('resize', () => {
|
||||
// this.myCharts1.resize()
|
||||
// })
|
||||
// }
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_1'))
|
||||
echart.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
},
|
||||
setEchart2 () {
|
||||
let barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
this.todayMix.map(el => {
|
||||
barName.push(el.materialName)
|
||||
barData1.push(el.plan)
|
||||
barData2.push(el.real)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
data: [{name: '需生产', itemStyle: {color: '#0E90FD'}}, {name: '已生产', itemStyle: {color: '#33CCCC'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
},
|
||||
data: barName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位：块',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [4, 3],
|
||||
color: '#8FABBF'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '需生产',
|
||||
type: 'pictorialBar',
|
||||
barWidth: '75%',
|
||||
// symbolOffset: [-10, 0],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 255, 255, 0.6)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 255, 255, 0.1)' // 100% 处的颜色
|
||||
}
|
||||
]
|
||||
},
|
||||
borderColor: '#fff',
|
||||
borderWidth: 3
|
||||
},
|
||||
symbol:
|
||||
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '已生产',
|
||||
type: 'pictorialBar',
|
||||
barWidth: '75%',
|
||||
barGap: '-65%',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 0, 199, 0.6)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 0, 199, 0.1)' // 100% 处的颜色
|
||||
}
|
||||
]
|
||||
}, // 渐变颜色
|
||||
borderColor: '#fff',
|
||||
borderWidth: 3
|
||||
},
|
||||
symbol:
|
||||
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
|
||||
data: barData2
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
||||
show: false, // 是否显示滑动条，不影响使用
|
||||
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||||
startValue: 0, // 从头开始。
|
||||
endValue: 5 // 展示到第几个。
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_2'))
|
||||
echart.setOption(option)
|
||||
this.chart2Timer = setInterval(() => {
|
||||
if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
||||
option.dataZoom[0].endValue = 4
|
||||
option.dataZoom[0].startValue = 0
|
||||
} else {
|
||||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||||
}
|
||||
echart.setOption(option)
|
||||
}, 2000)
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
},
|
||||
setEchart3 () {
|
||||
let barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
let barData3 = []
|
||||
this.todaySort.map(el => {
|
||||
barName.push(el.materialCode)
|
||||
barData1.push(el.plan)
|
||||
barData2.push(el.press)
|
||||
barData3.push(el.real)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
data: [{name: '需生产', itemStyle: {color: '#0E90FD'}}, {name: '已压制', itemStyle: {color: '#33CCCC'}}, {name: '已完成', itemStyle: {color: '#33CCC2'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
},
|
||||
data: barName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位：块',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 2,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [8, 4],
|
||||
dashOffset: 4,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '需生产',
|
||||
type: 'bar',
|
||||
barWidth: '8',
|
||||
barGap: '200%',
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(96,112,128,0.10)',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0E90FD',
|
||||
opacity: 0.1
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '已压制',
|
||||
type: 'bar',
|
||||
barWidth: '8',
|
||||
barGap: '200%',
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#33CCCC',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(31,89,89,0.25)',
|
||||
opacity: 0.25
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData2
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
type: 'bar',
|
||||
barWidth: '8',
|
||||
barGap: '200%',
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#33CCCC',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(31,89,89,0.25)',
|
||||
opacity: 0.25
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData3
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_3'))
|
||||
echart.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
},
|
||||
setEchart4 () {
|
||||
this.inventory.map((el, i) => {
|
||||
el.value = el.qty
|
||||
el.name = el.materialName
|
||||
if (i === 1) {
|
||||
el.selected = true
|
||||
}
|
||||
})
|
||||
let total = this.inventory.reduce((a, b) => {
|
||||
return a + Number(b.value)
|
||||
}, 0)
|
||||
total = 5
|
||||
let seriesData = []
|
||||
this.inventory.forEach(r => {
|
||||
seriesData.push(r)
|
||||
seriesData.push({
|
||||
name: '',
|
||||
value: 5,
|
||||
tooltip: { show: false },
|
||||
itemStyle: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
color: 'rgba(0, 0, 0, 0)',
|
||||
borderColor: 'rgba(0, 0, 0, 0)',
|
||||
borderWidth: 0
|
||||
}
|
||||
})
|
||||
})
|
||||
let option = {
|
||||
color: ['#96B5FC', '#5F8CEF', '#F18A70', '#F4C594', '#E0E7FA'],
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
title: {
|
||||
text: total,
|
||||
subtext: '总数',
|
||||
x: '25%',
|
||||
y: 'center',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 24,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
subtextStyle: {
|
||||
color: 'rgba(255,255,255,.45)',
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
orient: 'horizontal',
|
||||
right: '10%',
|
||||
top: '30%',
|
||||
width: '0',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
data: this.inventory.map(r => r.materialName)
|
||||
},
|
||||
series: [{
|
||||
name: '库存量监控',
|
||||
type: 'pie',
|
||||
radius: ['50%', '55%'],
|
||||
center: ['25%', '50%'],
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
selectedMode: 'single',
|
||||
data: seriesData
|
||||
},
|
||||
{
|
||||
name: '阴影圈',
|
||||
type: 'pie',
|
||||
radius: ['0', '40%'],
|
||||
center: ['25%', '50%'],
|
||||
emphasis: {
|
||||
scale: false
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(204,225,255, 0.05)'
|
||||
},
|
||||
zlevel: 4,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [100]
|
||||
},
|
||||
{
|
||||
name: '阴影圈',
|
||||
type: 'pie',
|
||||
radius: ['0', '30%'],
|
||||
center: ['25%', '50%'],
|
||||
emphasis: {
|
||||
scale: false
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(204,225,255, 0.07)'
|
||||
},
|
||||
zlevel: 4,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [100]
|
||||
}]
|
||||
}
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_4'))
|
||||
echart.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
},
|
||||
setEchart5 () {
|
||||
let barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
this.history.map(el => {
|
||||
barName.push(el.date)
|
||||
barData1.push(el.press)
|
||||
barData2.push(el.sort)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
showContent: false,
|
||||
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: 'rgba(255, 255, 255, .5)'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
data: [{name: '压制', itemStyle: {color: '#4D62FF'}}, {name: '成品', itemStyle: {color: '#A03CFC'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
},
|
||||
data: barName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// name: '单位：块',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 2,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [8, 4],
|
||||
dashOffset: 4,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '压制',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: '#4D62FF',
|
||||
lineStyle: {
|
||||
color: '#4D62FF',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(160, 60, 252, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(160, 60, 252, 0.5)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '成品',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: '#A03CFC',
|
||||
lineStyle: {
|
||||
color: '#A03CFC',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(79, 18, 255, 0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(79, 18, 255, 0.5)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData2
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_5'))
|
||||
echart.setOption(option)
|
||||
let len = 0
|
||||
this.chart5Timer = setInterval(() => {
|
||||
if (len === barName.length) {
|
||||
len = 0
|
||||
}
|
||||
echart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: len
|
||||
})
|
||||
len++
|
||||
}, 2000)
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.left_wraper
|
||||
_wh(100%, 100%)
|
||||
.item_wraper
|
||||
_wh(100%, calc((100% - 50px) / 3))
|
||||
background #2f3040
|
||||
margin-bottom 25px
|
||||
&:last-child
|
||||
margin-bottom 0
|
||||
.title_wraper
|
||||
_wh(100%, 42px)
|
||||
background center / 100% url('../../../../images/bg-title_1.png') no-repeat
|
||||
p
|
||||
_font(20px, 50px, #fff,,left)
|
||||
.content_wraper
|
||||
_wh(100%, calc(100% - 50px))
|
||||
.l_item_wraper
|
||||
_wh(calc(50% - 20px), 100%)
|
||||
.module_one_wraper
|
||||
_wh(25%, 100%)
|
||||
.module_two_wraper
|
||||
_wh(55%, 100%)
|
||||
.module_three_wraper
|
||||
_wh(20%, 100%)
|
||||
.echart_wraper
|
||||
_wh(100%, 100%)
|
||||
.echart_wraper_1
|
||||
_wh(100%, calc(100% - 50px))
|
||||
.echart_title_1
|
||||
_font(20px, 50px, #fff,,)
|
||||
.module_two_item_wraper
|
||||
_fj(row)
|
||||
_wh(100%, calc((100% / 3) - 10px))
|
||||
margin 5px 0
|
||||
.module_two_item_lable
|
||||
_wh(100px, 100%)
|
||||
_font(20px, 1, #fff,,)
|
||||
.module_two_item_content
|
||||
position relative
|
||||
_wh(calc(100% - 120px), 100%)
|
||||
background #000
|
||||
.module_two_item_pro
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
_wh(50%, 100%)
|
||||
border-right 1px solid #fff
|
||||
background-color blue
|
||||
.module_two_item_p_l
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
_wh(50%, 100%)
|
||||
_font(20px, 1, #fff,,)
|
||||
.module_two_item_p_r
|
||||
position absolute
|
||||
right 0
|
||||
top 0
|
||||
_wh(50%, 100%)
|
||||
_font(20px, 1, #fff,,)
|
||||
.module_three_text
|
||||
_font(20px, 40px, #fff,,)
|
||||
span
|
||||
color blue
|
||||
</style>
|
||||
Reference in New Issue
Block a user