1144 lines
33 KiB
Vue
1144 lines
33 KiB
Vue
<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="pie_wraper_1">
|
|
<!-- <div class="pie_inner_1">
|
|
<div class="light_1"></div>
|
|
<p>{{ orderFulfillmentRate }}<span>%</span></p>
|
|
</div> -->
|
|
<div class="echart_wraper_1">
|
|
<div id="new_home_echart_1" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="pie_title_1">订单完成</div>
|
|
</div>
|
|
</div>
|
|
<div class="line_1"></div>
|
|
<div class="module_two_wraper">
|
|
<div class="module_two_item_wraper">
|
|
<div class="module_two_item_lable">混料</div>
|
|
<div class="module_two_item_content">
|
|
<div class="module_two_item_p_l">{{todayMixProduction.real}}吨</div>
|
|
<div class="module_two_item_p_r">{{todayMixProduction.plan}}吨</div>
|
|
</div>
|
|
</div>
|
|
<div class="module_two_item_wraper">
|
|
<div class="module_two_item_lable">成型</div>
|
|
<div class="module_two_item_content">
|
|
<div class="module_two_item_p_l">{{todayPressProduction.real}}块</div>
|
|
<div class="module_two_item_p_r">{{todayPressProduction.plan}}块</div>
|
|
</div>
|
|
</div>
|
|
<div class="module_two_item_wraper">
|
|
<div class="module_two_item_lable">包装</div>
|
|
<div class="module_two_item_content">
|
|
<div class="module_two_item_p_l">{{todaySortProduction.real}}块</div>
|
|
<div class="module_two_item_p_r">{{todaySortProduction.plan}}快</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="module_three_wraper">
|
|
<div class="module_three_text" v-html="messageString"></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 relative">
|
|
<div class="pie_wraper_2">
|
|
<div class="echart_wraper">
|
|
<div id="new_home_echart_4" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="pie_legend">
|
|
<div class="pie_legend_item" v-for="(e, i) in inventory" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
|
|
<p class="pie_legend_txt_1">{{ e.materialCode }}</p>
|
|
<div class="pie_legend_txt_wraper">
|
|
<p class="pie_legend_txt_2">{{ e.qty }}</p>
|
|
<p class="pie_legend_txt_3">{{ e.rate }}</p>
|
|
</div>
|
|
</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'
|
|
// import { homepageDataLeft } from '@js/getData2.js'
|
|
import symbol1 from '@img/symbol_1.png'
|
|
import symbol2 from '@img/symbol_2.png'
|
|
import symbol3 from '@img/symbol_3.png'
|
|
import symbol4 from '@img/symbol_4.png'
|
|
import lineSelected from '@img/line_selected.png'
|
|
export default {
|
|
data () {
|
|
return {
|
|
interTime: this.$store.getters.setTime,
|
|
timer: null,
|
|
todayMixProduction: {}, // 今日生产混料
|
|
todayPressProduction: {}, // 今日生产成型
|
|
todaySortProduction: {}, // 今日生产包装
|
|
orderFulfillmentRate: {}, // 订单完成
|
|
message: '',
|
|
todayMix: [], // 当日混料
|
|
todaySort: [], // 当日成品
|
|
inventory: [], // 库存量监控
|
|
history: [], // 历史分析
|
|
chart2Timer: null,
|
|
chart3Timer: null,
|
|
chart4Timer: null,
|
|
chart5Timer: null
|
|
}
|
|
},
|
|
computed: {
|
|
messageString () {
|
|
const t = this.message
|
|
return t
|
|
}
|
|
},
|
|
created () {
|
|
this._homepageDataLeft()
|
|
this.refresh()
|
|
},
|
|
beforeDestroy () {
|
|
clearInterval(this.timer)
|
|
clearInterval(this.chart2Timer)
|
|
clearInterval(this.chart3Timer)
|
|
clearInterval(this.chart4Timer)
|
|
clearInterval(this.chart5Timer)
|
|
},
|
|
methods: {
|
|
refresh () {
|
|
this.timer = setInterval(() => {
|
|
this._homepageDataLeft()
|
|
}, this.interTime)
|
|
},
|
|
async _homepageDataLeft () {
|
|
let res = await homepageDataLeft()
|
|
clearInterval(this.chart2Timer)
|
|
clearInterval(this.chart3Timer)
|
|
clearInterval(this.chart4Timer)
|
|
clearInterval(this.chart5Timer)
|
|
this.todayMixProduction = res.todayProduction.todayMixProduction
|
|
this.todayPressProduction = res.todayProduction.todayPressProduction
|
|
this.todaySortProduction = res.todayProduction.todaySortProduction
|
|
this.message = res.todayProduction.message
|
|
this.orderFulfillmentRate = Number(res.todayProduction.orderFulfillmentRate.real) / Number(res.todayProduction.orderFulfillmentRate.plan) * 100
|
|
this.orderFulfillmentRate = this.orderFulfillmentRate.toFixed(0)
|
|
this.todayMix = [...res.todayMix]
|
|
this.todaySort = [...res.todaySort]
|
|
let total = res.inventory.reduce((a, b) => {
|
|
return a + Number(b.qty)
|
|
}, 0)
|
|
res.inventory.map(el => {
|
|
let rate = Number(el.qty) * 100 / Number(total)
|
|
rate = rate.toFixed(2) + '%'
|
|
this.$set(el, 'rate', rate)
|
|
})
|
|
this.inventory = [...res.inventory]
|
|
this.history = [...res.history]
|
|
this.setEchart1()
|
|
this.setEchart2()
|
|
this.setEchart3()
|
|
this.setEchart4()
|
|
this.setEchart5()
|
|
},
|
|
setEchart1 () {
|
|
let value = this.orderFulfillmentRate
|
|
let option = {
|
|
grid: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
title: {
|
|
text: `{a|${value}}{b|%}`,
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 36,
|
|
color: '#DBE7F6',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
},
|
|
b: {
|
|
fontSize: 20,
|
|
padding: [9, 0, 0, 3],
|
|
color: '#fff',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '进度',
|
|
type: 'pie',
|
|
radius: ['76%', '100%'],
|
|
center: ['50%', '50%'],
|
|
clockwise: false,
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
name: '已完成',
|
|
value: value,
|
|
itemStyle: {
|
|
decal: {
|
|
color: '#3D92ED',
|
|
backgroundColor: '#1774E8',
|
|
dashArrayX: [1, 0],
|
|
dashArrayY: [1, 4],
|
|
rotation: -Math.PI / 4
|
|
}
|
|
}
|
|
}, {
|
|
name: '未完成',
|
|
value: 100 - value,
|
|
itemStyle: {
|
|
decal: {
|
|
color: '#597491',
|
|
backgroundColor: '#2f5175',
|
|
dashArrayX: [1, 0],
|
|
dashArrayY: [2, 4],
|
|
rotation: -Math.PI / 4
|
|
}
|
|
},
|
|
emphasis: {
|
|
disabled: true
|
|
}
|
|
}]
|
|
}, {
|
|
type: 'pie',
|
|
radius: ['99%', '100%'],
|
|
hoverAnimation: false,
|
|
clockWise: false,
|
|
itemStyle: {
|
|
color: '#45B1F1'
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [1]
|
|
}, {
|
|
type: 'pie',
|
|
radius: ['75%', '76%'],
|
|
hoverAnimation: false,
|
|
clockWise: false,
|
|
itemStyle: {
|
|
color: '#45B1F1'
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: [1]
|
|
}]
|
|
}
|
|
// 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 img = {
|
|
imgSrc1: symbol1,
|
|
imgSrc2: symbol2
|
|
}
|
|
let barName = []
|
|
let barData1 = []
|
|
let barData2 = []
|
|
this.todayMix.map(el => {
|
|
barName.push(el.materialCode)
|
|
barData1.push(el.plan)
|
|
barData2.push(el.real)
|
|
})
|
|
let option = {
|
|
grid: {
|
|
top: 55,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
top: '0',
|
|
right: '0',
|
|
textStyle: {
|
|
color: '#9BB9DD',
|
|
fontSize: 16,
|
|
lineHeight: 16
|
|
},
|
|
itemGap: 30,
|
|
itemWidth: 8,
|
|
itemHeight: 8,
|
|
data: [{name: '需生产', itemStyle: {color: '#8EB5E5'}}, {name: '已生产', itemStyle: {color: '#1980EA'}}]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#3C5787'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
color: '#7591B2',
|
|
fontSize: 12,
|
|
lineHeight: 12,
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
|
margin: 10,
|
|
formatter: (value) => {
|
|
let str = ''
|
|
let num = 10
|
|
let valLength = value.length
|
|
let rowNum = Math.ceil(valLength / num)
|
|
if (rowNum > 1) {
|
|
for (let i = 0; i < rowNum; i++) {
|
|
let temp = ''
|
|
let start = i * num
|
|
let end = start + num
|
|
if (i === rowNum - 1) {
|
|
temp = value.substring(start, end)
|
|
} else {
|
|
temp = value.substring(start, end) + '\n'
|
|
}
|
|
str += temp
|
|
}
|
|
return str
|
|
} else {
|
|
return value
|
|
}
|
|
}
|
|
},
|
|
data: barName
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
// name: '单位：块',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitNumber: 4,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#B5C5D4',
|
|
fontSize: 16,
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: [4, 3],
|
|
color: '#455C86'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '需生产',
|
|
type: 'pictorialBar',
|
|
barWidth: '77',
|
|
symbol: 'image://' + img.imgSrc1,
|
|
data: barData1
|
|
},
|
|
{
|
|
name: '已生产',
|
|
type: 'pictorialBar',
|
|
barWidth: '77',
|
|
barGap: '-75%',
|
|
symbol: 'image://' + img.imgSrc2,
|
|
data: barData2
|
|
}
|
|
],
|
|
dataZoom: [
|
|
{
|
|
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
|
show: false, // 是否显示滑动条，不影响使用
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
startValue: 0, // 从头开始。
|
|
endValue: 4 // 展示到第几个。
|
|
}
|
|
]
|
|
}
|
|
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: 55,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
top: '0',
|
|
right: '0',
|
|
textStyle: {
|
|
color: '#9BB9DD',
|
|
fontSize: 16,
|
|
lineHeight: 16
|
|
},
|
|
itemGap: 30,
|
|
itemWidth: 8,
|
|
itemHeight: 8,
|
|
data: [{name: '需生产', itemStyle: {color: '#8EB5E5'}}, {name: '已压制', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#3C5787'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
color: '#7591B2',
|
|
fontSize: 12,
|
|
lineHeight: 12,
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
|
margin: 10,
|
|
formatter: (value) => {
|
|
let str = ''
|
|
let num = 10
|
|
let valLength = value.length
|
|
let rowNum = Math.ceil(valLength / num)
|
|
if (rowNum > 1) {
|
|
for (let i = 0; i < rowNum; i++) {
|
|
let temp = ''
|
|
let start = i * num
|
|
let end = start + num
|
|
if (i === rowNum - 1) {
|
|
temp = value.substring(start, end)
|
|
} else {
|
|
temp = value.substring(start, end) + '\n'
|
|
}
|
|
str += temp
|
|
}
|
|
return str
|
|
} else {
|
|
return value
|
|
}
|
|
}
|
|
},
|
|
data: barName
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
// name: '单位：块',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitNumber: 4,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#B5C5D4',
|
|
fontSize: 16,
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: [4, 3],
|
|
color: '#455C86'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '需生产',
|
|
type: 'bar',
|
|
barWidth: '10',
|
|
itemStyle: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(142,181,229,0.2)'
|
|
},
|
|
{
|
|
offset: 0.08,
|
|
color: 'rgba(142,181,229,0.9)'
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(255,255,255,0.9)'
|
|
}
|
|
])
|
|
},
|
|
data: barData1
|
|
},
|
|
{
|
|
name: '已压制',
|
|
type: 'bar',
|
|
barWidth: '10',
|
|
itemStyle: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(103,212,112,0.2)'
|
|
},
|
|
{
|
|
offset: 0.08,
|
|
color: 'rgba(103,212,112,0.9)'
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(255,255,255,0.9)'
|
|
}
|
|
])
|
|
},
|
|
data: barData2
|
|
},
|
|
{
|
|
name: '已完成',
|
|
type: 'bar',
|
|
barWidth: '10',
|
|
itemStyle: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(25,128,234,0.2)'
|
|
},
|
|
{
|
|
offset: 0.08,
|
|
color: 'rgba(25,128,234,0.9)'
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(255,255,255,0.9)'
|
|
}
|
|
])
|
|
},
|
|
data: barData3
|
|
}
|
|
],
|
|
dataZoom: [
|
|
{
|
|
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
|
show: false, // 是否显示滑动条，不影响使用
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
startValue: 0, // 从头开始。
|
|
endValue: 4 // 展示到第几个。
|
|
}
|
|
]
|
|
}
|
|
let echart = this.$echarts.init(document.getElementById('new_home_echart_3'))
|
|
echart.setOption(option)
|
|
this.chart3Timer = 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()
|
|
})
|
|
},
|
|
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)
|
|
let seriesData = []
|
|
this.inventory.forEach(r => {
|
|
seriesData.push(r)
|
|
})
|
|
let option = {
|
|
color: ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb'],
|
|
grid: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
title: {
|
|
text: `{a|总数}\n{b|${total}}`,
|
|
x: 'center',
|
|
y: '39%',
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 16,
|
|
lineHeight: 20,
|
|
color: '#A8C3E6',
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
|
},
|
|
b: {
|
|
fontSize: 30,
|
|
lineHeight: 36,
|
|
color: '#DBE7F6',
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '库存量监控',
|
|
type: 'pie',
|
|
radius: ['50%', '57%'],
|
|
center: ['50%', '50%'],
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: 'RGBA(27, 58, 98, .5)',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
selectedMode: 'single',
|
|
selectedOffset: 20,
|
|
data: seriesData
|
|
}]
|
|
}
|
|
let echart = this.$echarts.init(document.getElementById('new_home_echart_4'))
|
|
echart.setOption(option)
|
|
let bu = 0
|
|
this.chart4Timer = setInterval(() => {
|
|
if (bu > seriesData.length - 1) {
|
|
bu = 0
|
|
}
|
|
echart.dispatchAction({
|
|
type: 'select', // 默认显示江苏的提示框
|
|
seriesIndex: 0, // 这行不能省
|
|
dataIndex: bu
|
|
})
|
|
bu++
|
|
}, 2000)
|
|
window.addEventListener('resize', () => {
|
|
echart.resize()
|
|
})
|
|
},
|
|
setEchart5 () {
|
|
let img = {
|
|
imgSrc1: symbol3,
|
|
imgSrc2: symbol4,
|
|
imgSrc3: lineSelected
|
|
}
|
|
let total = 0
|
|
this.history.map(el => {
|
|
total = Math.max(total, Number(el.press), Number(el.sort))
|
|
})
|
|
let barName = []
|
|
let barData1 = []
|
|
let barData2 = []
|
|
let totalDate = []
|
|
this.history.map(el => {
|
|
barName.push(el.date)
|
|
barData1.push(el.press)
|
|
barData2.push(el.sort)
|
|
})
|
|
let option = {
|
|
grid: {
|
|
top: 55,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
showContent: false,
|
|
axisPointer: {
|
|
type: 'line',
|
|
lineStyle: {
|
|
type: 'solid',
|
|
width: '2',
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: 'rgba(254,254,254,0)'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(254,254,254,0)'
|
|
}],
|
|
global: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
top: '0',
|
|
right: '0',
|
|
textStyle: {
|
|
color: '#9BB9DD',
|
|
fontSize: 16,
|
|
lineHeight: 16
|
|
},
|
|
itemGap: 30,
|
|
itemWidth: 8,
|
|
itemHeight: 8,
|
|
data: [{name: '压制', itemStyle: {color: '#67D470'}}, {name: '成品', itemStyle: {color: '#1980EA'}}]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
// boundaryGap: false,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#3C5787'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
// rotate: 45,
|
|
color: '#7591B2',
|
|
fontSize: 12,
|
|
lineHeight: 12,
|
|
// align: 'right',
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
|
margin: 10,
|
|
formatter: (value) => {
|
|
let str = ''
|
|
let num = 5
|
|
let valLength = value.length
|
|
let rowNum = Math.ceil(valLength / num)
|
|
if (rowNum > 1) {
|
|
for (let i = 0; i < rowNum; i++) {
|
|
let temp = ''
|
|
let start = i * num
|
|
let end = start + num
|
|
if (i === rowNum - 1) {
|
|
temp = value.substring(start, end)
|
|
} else {
|
|
temp = value.substring(start, end) + '\n'
|
|
}
|
|
str += temp
|
|
}
|
|
return str
|
|
} else {
|
|
return value
|
|
}
|
|
}
|
|
},
|
|
data: barName
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
// name: '单位：块',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitNumber: 4,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#B5C5D4',
|
|
fontSize: 16,
|
|
fontFamily: 'SourceHanSansCN-Regular'
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: [4, 3],
|
|
color: '#455C86'
|
|
}
|
|
},
|
|
max: total
|
|
},
|
|
series: [
|
|
{
|
|
name: '压制',
|
|
type: 'line',
|
|
symbol: 'image://' + img.imgSrc1,
|
|
symbolSize: [10, 10],
|
|
legendHoverLink: true,
|
|
showSymbol: false,
|
|
itemStyle: {
|
|
color: '#67D470',
|
|
lineStyle: {
|
|
color: '#67D470',
|
|
width: 2
|
|
}
|
|
},
|
|
areaStyle: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(103,212,112,0.1)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(103,212,112,0.74)'
|
|
}
|
|
])
|
|
},
|
|
data: barData1
|
|
},
|
|
{
|
|
name: '成品',
|
|
type: 'line',
|
|
symbol: 'image://' + img.imgSrc2,
|
|
symbolSize: [10, 10],
|
|
legendHoverLink: true,
|
|
showSymbol: false,
|
|
itemStyle: {
|
|
color: '#58A2E3',
|
|
lineStyle: {
|
|
color: '#58A2E3',
|
|
width: 2
|
|
}
|
|
},
|
|
areaStyle: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(45,144,255,0)'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(45,144,255,0.85)'
|
|
}
|
|
])
|
|
},
|
|
data: barData2
|
|
},
|
|
{
|
|
name: '阴影',
|
|
type: 'pictorialBar',
|
|
barWidth: '38px',
|
|
symbol: 'image://' + img.imgSrc3,
|
|
data: totalDate,
|
|
z: -1
|
|
}
|
|
]
|
|
}
|
|
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
|
|
}
|
|
totalDate[len] = total
|
|
echart.setOption({
|
|
series: [{
|
|
data: barData1
|
|
}, {
|
|
data: barData2
|
|
}, {
|
|
data: totalDate
|
|
}
|
|
]
|
|
})
|
|
echart.dispatchAction({
|
|
type: 'showTip',
|
|
seriesIndex: 0,
|
|
dataIndex: len
|
|
})
|
|
totalDate = []
|
|
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% - 40px) / 3))
|
|
margin-bottom 20px
|
|
&:last-child
|
|
margin-bottom 0
|
|
.title_wraper
|
|
_wh(100%, 42px)
|
|
background center / 100% url('../../../../images/bg-title_1.png') no-repeat
|
|
padding 6px 44px
|
|
p
|
|
font-size 24px
|
|
font-family: 'YouSheBiaoTiHei';
|
|
font-weight: 400;
|
|
color: transparent;
|
|
line-height 24px
|
|
background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
.content_wraper
|
|
_wh(100%, calc(100% - 42px))
|
|
background center / 100% url('../../../../images/bg-m_1.png') no-repeat
|
|
.l_item_wraper
|
|
_wh(calc(50% - 15.5px), 100%)
|
|
.title_wraper
|
|
background center / 100% url('../../../../images/bg-title_2.png') no-repeat
|
|
.content_wraper
|
|
padding 20px
|
|
background center / 100% url('../../../../images/bg-m_2.png') no-repeat
|
|
.module_one_wraper
|
|
_wh(233px, 100%)
|
|
padding 5px 9px 31px 9px
|
|
.line_1
|
|
_wh(1px, 204px)
|
|
background: #E3EDFF;
|
|
opacity: 0.2;
|
|
.module_two_wraper
|
|
_wh(calc(100% - 435px), 100%)
|
|
padding 0 25px 0 30px
|
|
_fj(,center)
|
|
.module_three_wraper
|
|
_wh(186px, 214px)
|
|
margin-right 15px
|
|
padding 27px 23px
|
|
background center / 100% url('../../../../images/message-bg.png') no-repeat
|
|
.echart_wraper
|
|
_wh(100%, 100%)
|
|
.echart_wraper_1
|
|
_wh(100%, 100%)
|
|
.pie_wraper_1
|
|
position relative
|
|
_wh(100%, 100%)
|
|
padding 28px 27px 27px 28px
|
|
background center / 100% auto url('../../../../images/pie-bg_1.png') no-repeat
|
|
.pie_wraper_2
|
|
position absolute
|
|
top 17px
|
|
left 0
|
|
_wh(222px, 222px)
|
|
background center / 100% auto url('../../../../images/pie-bg_2.png') no-repeat
|
|
.pie_legend
|
|
_wh(calc(100% - 195px), 100%)
|
|
margin-left 195px
|
|
_fj(, center)
|
|
.pie_legend_item
|
|
width 100%
|
|
padding 0 0px 2px 20px
|
|
.pie_legend_item_bg_1
|
|
background top left / 18px auto url('../../../../images/fk_1.png') no-repeat
|
|
.pie_legend_item_bg_2
|
|
background top left / 18px auto url('../../../../images/fk_2.png') no-repeat
|
|
.pie_legend_item_bg_3
|
|
background top left / 18px auto url('../../../../images/fk_3.png') no-repeat
|
|
.pie_legend_item_bg_4
|
|
background top left / 18px auto url('../../../../images/fk_4.png') no-repeat
|
|
.pie_legend_item_bg_5
|
|
background top left / 18px auto url('../../../../images/fk_5.png') no-repeat
|
|
.pie_legend_item_bg_6
|
|
background top left / 18px auto url('../../../../images/fk_6.png') no-repeat
|
|
.pie_legend_item_bg_7
|
|
background top left / 18px auto url('../../../../images/fk_7.png') no-repeat
|
|
.pie_legend_txt_1
|
|
font-size: 12px;
|
|
line-height: 14px
|
|
font-family: 'SourceHanSansCN-Regular';
|
|
color: #9BB9DD;
|
|
word-wrap: break-word;
|
|
.pie_legend_txt_wraper
|
|
_wh(100%, 18px)
|
|
_fj(row)
|
|
.pie_legend_txt_2
|
|
font-size 18px
|
|
line-height: 18px
|
|
font-family: 'YouSheBiaoTiHei'
|
|
color: transparent;
|
|
background: linear-gradient(0deg, #E5F2FC 0%, #CDEAFC 53.3154296875%, #A0DBFC 100%);
|
|
filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
.pie_legend_txt_3
|
|
font-size: 14px;
|
|
line-height: 18px
|
|
font-family: 'SourceHanSansCN-Regular';
|
|
color: #9BB9DD;
|
|
opacity: 0.5;
|
|
.pie_inner_1
|
|
_wh(100%, 100%)
|
|
background center / 100% url('../../../../images/pie_1.png') no-repeat
|
|
_fj(,center)
|
|
p
|
|
font-size: 36px;
|
|
line-height 36px
|
|
font-family: 'YouSheBiaoTiHei';
|
|
font-weight: 400;
|
|
color: transparent;
|
|
text-align: center;
|
|
background: linear-gradient(0deg, #F9FEFF 0%, #F9FEFF 53.3154296875%, #B5E8FF 100%);
|
|
filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px)
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
span
|
|
font-size 20px
|
|
line-height 20px
|
|
.light_1
|
|
position absolute
|
|
top 47px
|
|
left -9px
|
|
_wh(224px, 135px)
|
|
background center / 100% url('../../../../images/light_1.png') no-repeat
|
|
.pie_title_1
|
|
position absolute
|
|
top 204px
|
|
_wh(calc(100% - 55px), 16px)
|
|
_font(16px, 16px, #9BB9DD,,)
|
|
font-family: 'SourceHanSansCN-Regular'
|
|
.module_two_item_wraper
|
|
_fj(row)
|
|
_wh(100%, 48px)
|
|
margin-bottom 14px
|
|
&:nth-child(1)
|
|
.module_two_item_content
|
|
background center / 100% url('../../../../images/gl-bg_1.png') no-repeat
|
|
&:nth-child(2)
|
|
.module_two_item_content
|
|
background center / 100% url('../../../../images/gl-bg_2.png') no-repeat
|
|
&:nth-child(3)
|
|
.module_two_item_content
|
|
background center / 100% url('../../../../images/gl-bg_3.png') no-repeat
|
|
.module_two_item_lable
|
|
_wh(64px, 48px)
|
|
_font(16px, 48px, #9BB9DD,,left)
|
|
font-family: 'SourceHanSansCN-Regular'
|
|
.module_two_item_content
|
|
_fj(row)
|
|
_wh(calc(100% - 64px), 48px)
|
|
.module_two_item_p_l
|
|
_wh(50%, 100%)
|
|
padding-left 20px
|
|
font-size 24px
|
|
line-height 48px
|
|
font-family: 'YouSheBiaoTiHei'
|
|
color: transparent;
|
|
background: linear-gradient(0deg, #F9FEFF 0%, #E8F8FF 53.3154296875%, #E8F8FF 100%);
|
|
filter: drop-shadow(rgba(5,28,55,0.42) 0px 2px 8px);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
.module_two_item_p_r
|
|
_wh(50%, 100%)
|
|
padding-right 10px
|
|
_font(16px, 48px, #fff,,right)
|
|
font-family: 'YouSheBiaoTiHei'
|
|
opacity: 0.3;
|
|
.module_three_text
|
|
_font(16px, 32px, #fff,,left)
|
|
font-family: 'SourceHanSansCN-Regular'
|
|
span
|
|
color #1980EA
|
|
font-family: 'YouSheBiaoTiHei'
|
|
</style>
|