左侧
This commit is contained in:
@@ -80,10 +80,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="pie_legend">
|
||||
<div class="pie_legend_item" v-for="(e, i) in inventory" :key="i">
|
||||
<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>
|
||||
<p class="pie_legend_txt_1">{{ e.qty }}</p>
|
||||
<p class="pie_legend_txt_1">{{ e.rate }}</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>
|
||||
@@ -106,6 +108,9 @@
|
||||
import { homepageDataLeft } from '@js/mork2.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 {
|
||||
@@ -166,9 +171,10 @@ export default {
|
||||
let total = res.inventory.reduce((a, b) => {
|
||||
return a + Number(b.qty)
|
||||
}, 0)
|
||||
total = 5
|
||||
res.inventory.map(el => {
|
||||
this.$set(el, 'rate', Number(el.qty) * 100 / Number(total) + '%')
|
||||
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]
|
||||
@@ -638,7 +644,6 @@ export default {
|
||||
let total = this.inventory.reduce((a, b) => {
|
||||
return a + Number(b.value)
|
||||
}, 0)
|
||||
total = 5
|
||||
let seriesData = []
|
||||
this.inventory.forEach(r => {
|
||||
seriesData.push(r)
|
||||
@@ -727,6 +732,11 @@ export default {
|
||||
})
|
||||
},
|
||||
setEchart5 () {
|
||||
let img = {
|
||||
imgSrc1: symbol3,
|
||||
imgSrc2: symbol4,
|
||||
imgSrc3: lineSelected
|
||||
}
|
||||
let barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
@@ -735,9 +745,13 @@ export default {
|
||||
barData1.push(el.press)
|
||||
barData2.push(el.sort)
|
||||
})
|
||||
let total = 0
|
||||
this.history.map(el => {
|
||||
total = Math.max(total, Number(el.press), Number(el.sort))
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
top: 55,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
@@ -746,43 +760,87 @@ export default {
|
||||
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)'
|
||||
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: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
color: '#9BB9DD',
|
||||
fontSize: 16,
|
||||
lineHeight: 16
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
data: [{name: '压制', itemStyle: {color: '#4D62FF'}}, {name: '成品', itemStyle: {color: '#A03CFC'}}]
|
||||
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: 2,
|
||||
color: '#8FABBF'
|
||||
width: 1,
|
||||
color: '#3C5787'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
// 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
|
||||
},
|
||||
@@ -792,33 +850,36 @@ export default {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 2,
|
||||
splitNumber: 4,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
color: '#B5C5D4',
|
||||
fontSize: 16,
|
||||
fontFamily: 'SourceHanSansCN-Regular'
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [8, 4],
|
||||
dashOffset: 4,
|
||||
color: '#8FABBF'
|
||||
type: [4, 3],
|
||||
color: '#455C86'
|
||||
}
|
||||
}
|
||||
},
|
||||
max: total
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '压制',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbol: 'image://' + img.imgSrc1,
|
||||
symbolSize: [10, 10],
|
||||
legendHoverLink: true,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: '#4D62FF',
|
||||
color: '#67D470',
|
||||
lineStyle: {
|
||||
color: '#4D62FF',
|
||||
color: '#67D470',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
@@ -826,11 +887,11 @@ export default {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(160, 60, 252, 0.1)'
|
||||
color: 'rgba(103,212,112,0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(160, 60, 252, 0.5)'
|
||||
color: 'rgba(103,212,112,0.74)'
|
||||
}
|
||||
])
|
||||
},
|
||||
@@ -839,12 +900,14 @@ export default {
|
||||
{
|
||||
name: '成品',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbol: 'image://' + img.imgSrc2,
|
||||
symbolSize: [10, 10],
|
||||
legendHoverLink: true,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: '#A03CFC',
|
||||
color: '#58A2E3',
|
||||
lineStyle: {
|
||||
color: '#A03CFC',
|
||||
color: '#58A2E3',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
@@ -852,15 +915,49 @@ export default {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(79, 18, 255, 0.1)'
|
||||
color: 'rgba(45,144,255,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(79, 18, 255, 0.5)'
|
||||
color: 'rgba(45,144,255,0.85)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData2
|
||||
},
|
||||
{
|
||||
// name: '阴影',
|
||||
// type: 'bar',
|
||||
// barWidth: '38px',
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0.1,
|
||||
// color: 'rgba(254,254,254,0.1)'
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'rgba(254,254,254,0.1)'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: [total],
|
||||
// z: -1
|
||||
name: '阴影',
|
||||
type: 'pictorialBar',
|
||||
barWidth: '38px',
|
||||
symbol: 'image://' + img.imgSrc3,
|
||||
data: [total],
|
||||
z: -1
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -950,12 +1047,47 @@ export default {
|
||||
_wh(222px, 222px)
|
||||
background center / 100% auto url('../../../../images/pie-bg_2.png') no-repeat
|
||||
.pie_legend
|
||||
_wh(calc(100% - 207px), 100%)
|
||||
margin-left 207px
|
||||
_fj(row, flex-start)
|
||||
flex-wrap: wrap
|
||||
_wh(calc(100% - 195px), 100%)
|
||||
margin-left 195px
|
||||
// _fj(row, flex-start)
|
||||
// flex-wrap: wrap
|
||||
.pie_legend_item
|
||||
width 50%
|
||||
width 100%
|
||||
padding 0 0px 5px 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_txt_1
|
||||
font-size: 12px;
|
||||
line-height: 18px
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
color: #9BB9DD;
|
||||
word-wrap: break-word;
|
||||
.pie_legend_txt_wraper
|
||||
_wh(100%, 20px)
|
||||
_fj(row)
|
||||
.pie_legend_txt_2
|
||||
font-size 20px
|
||||
line-height: 20px
|
||||
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: 16px;
|
||||
line-height: 20px
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user