This commit is contained in:
朱文强 2021-11-24 15:18:42 +08:00
부모 c58b017794
커밋 b14bba1b5d
14개의 변경된 파일450개의 추가작업 그리고 596개의 파일을 삭제

Binary file not shown.

After

Width:  |  Height:  |  크기: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  크기: 2.6 KiB

파일 보기

@ -19,7 +19,7 @@ const _import = require('./import-' + process.env.NODE_ENV)
const globalRoutes = [
{ path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
{ path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
{ path: '/bigScreen', component: _import('common/bigScreen'), hidden: true, name: 'bigScreen', meta: { title: '大屏' } }
{ path: '/bigScreen', component: _import('common/bigScreen2'), hidden: true, name: 'bigScreen', meta: { title: '大屏' } }
]
// 主入口路由(需嵌套上左右整体布局)
@ -34,7 +34,7 @@ const mainRoutes = {
// 1. isTab: 是否通过tab展示内容, true: 是, false: 否
// 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
// 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
{ path: '/home', component: _import('common/bigScreen'), name: 'home', meta: { title: '首页' } },
{ path: '/home', component: _import('common/bigScreen2'), name: 'home', meta: { title: '首页' } },
{ path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
{ path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } },
{ path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } }

파일 보기

@ -1,473 +0,0 @@
<template>
<div class='mod-demo-echarts' >
<el-card class="titleClass">
<el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
<el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
<el-tag class="tagClass" type='warning' color="#E9EAEF" effect="dark">任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : '入库'}}&emsp;</el-tag>
</el-card>
<hr />
<el-row :gutter='20'>
<el-col :span='11' :offset='1'>
<div id='J_chartPieBox' class='chart-box'></div>
</el-col>
<el-col :span='11'>
<div id='J_chartScatterBox' class='chart-box'></div>
</el-col>
</el-row>
<el-row :gutter='20'>
<el-col :span='6' :offset='1'>
<div id='J_category' class='chart-box'></div>
</el-col>
<el-col :span='16'>
<div id='J_axis' class='chart-box'></div>
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data () {
return {
chartCate: null,
chartAxis: null,
chartBar: null,
chartPie: null,
firstPointList: [],
secondPointList: [],
sTaskInfo: {},
coverList: [],
smallList: []
}
},
mounted () {
this.init()
},
computed: {
documentClientHeight: {
get () { return this.$store.state.common.documentClientHeight }
}
},
activated () {
// echartresize, resize, bug
if (this.chartPie) {
this.chartPie.resize()
}
if (this.chartScatter) {
this.chartScatter.resize()
}
},
methods: {
init () {
this.$http({
url: this.$http.adornUrl('/generator/screen/countModel'),
method: 'get'
}).then(({ data }) => {
if (data && data.code === 0) {
this.secondPointList = data.data
this.initChartScatter()
} else {
this.secondPointList = []
}
})
this.$http({
url: this.$http.adornUrl('/generator/screen/countPosition'),
method: 'get'
}).then(({ data }) => {
if (data && data.code === 0) {
this.firstPointList = data.data
this.initChartPie()
} else {
this.firstPointList = []
}
})
this.$http({
url: this.$http.adornUrl('/generator/screen/coverAndBase'),
method: 'get'
}).then(({ data }) => {
if (data && data.code === 0) {
this.coverList = data.data
this.initCate()
} else {
this.coverList = []
}
})
this.$http({
url: this.$http.adornUrl('/generator/screen/smallModel'),
method: 'get'
}).then(({ data }) => {
if (data && data.code === 0) {
let arr1 = []
let arr2 = []
let arr3 = []
data.data.forEach(item => {
arr1.push(item.categoryName)
arr2.push(item.quantity)
arr3.push(item.position)
})
let obj = {
categoryName: arr1,
quantity: arr2,
position: arr3
}
this.smallList = obj
this.initAxis()
} else {
this.smallList = []
}
})
this.$http({
url: this.$http.adornUrl('/generator/mtcctaskruninfodet/taskruninfodetlist'),
method: 'post'
}).then(({data}) => {
if (data && data.code === 0) {
this.sTaskInfo = data.list[0]
}
})
},
//
initChartPie () {
var option = {
backgroundColor: '#0079BA',
title: {
text: `库位使用情况:共${this.firstPointList.all}`,
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '库位数',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: this.firstPointList.isOccupy, name: `已占用库位${this.firstPointList.isOccupy}` },
{ value: this.firstPointList.notOccupy, name: `未占用库位${this.firstPointList.notOccupy}` }
].sort(function (a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200
}
}
]
}
this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
this.chartPie.setOption(option)
window.addEventListener('resize', () => {
this.chartPie.resize()
})
},
initChartScatter () {
var option = {
backgroundColor: '#0079BA',
title: {
text: '大系列库位数量情况',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: [
'成品',
'半成品',
'原材料'
]
},
series: [
{
name: '库位数',
type: 'pie',
radius: [0, '28%'],
label: {
position: 'inner',
color: 'red',
fontSize: 22
},
labelLine: {
show: false
},
data: [
{ value: this.secondPointList.countPositionFinishedProduct, name: `成品${this.secondPointList.countPositionFinishedProduct}` },
{ value: this.secondPointList.countPositionSemiFinishedProduct, name: `半成品${this.secondPointList.countPositionSemiFinishedProduct}` },
{ value: this.secondPointList.countPositionRawMaterials, name: `原材料${this.secondPointList.countPositionRawMaterials}` }
]
},
{
name: '数量',
type: 'pie',
radius: ['50%', '75%'],
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
// padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 22,
borderRadius: [4, 4, 0, 0]
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
},
data: [
{ value: this.secondPointList.countQuantityFinishedProduct, name: `成品${this.secondPointList.countQuantityFinishedProduct}` },
{ value: this.secondPointList.countQuantitySemiFinishedProduct, name: `半成品${this.secondPointList.countQuantitySemiFinishedProduct}` },
{ value: this.secondPointList.countQuantityRawMaterials, name: `原材料${this.secondPointList.countQuantityRawMaterials}` }
]
}
]
}
this.chartBar = echarts.init(
document.getElementById('J_chartScatterBox')
)
this.chartBar.setOption(option)
window.addEventListener('resize', () => {
this.chartBar.resize()
})
},
initCate () {
var option = {
color: ['#17B3A3'],
tooltip: {
trigger: 'axis',
axisPointer: { //
type: 'shadow' // 线'line' | 'shadow'
}
},
title: {
text: '盒底盒盖库位数量情况',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
xAxis: {
type: 'category',
nameTextStyle: {
color: '#FFFFFF',
fontSize: '20'
},
data: ['盒底', '盒盖']
},
yAxis: {
type: 'value',
axisLabel: {
interval: 0,
rotate: 40
}
},
series: [
{
type: 'bar',
name: '数量',
stack: '总量',
label: {
show: true,
position: 'inside'
},
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
data: [this.coverList.baseQuantity, this.coverList.coverQuantity]
},
{
type: 'bar',
name: '库位数量',
stack: '总量',
label: {
show: true,
position: 'inside'
},
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
data: [this.coverList.basePosition, this.coverList.coverPosition]
}
]
}
this.chartCate = echarts.init(document.getElementById('J_category'))
this.chartCate.setOption(option)
window.addEventListener('resize', () => {
this.chartCate.resize()
})
},
initAxis () {
var option = {
color: ['#FFCD42'],
tooltip: {
trigger: 'axis',
axisPointer: { //
type: 'shadow' // 线'line' | 'shadow'
}
},
title: {
text: '小系列库位数量情况',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
xAxis: {
type: 'category',
data: this.smallList.categoryName
},
yAxis: {
type: 'value',
axisLabel: {
interval: 0,
rotate: 40
}
},
series: [
{
data: this.smallList.quantity,
type: 'bar',
name: '数量',
stack: '总量',
label: {
show: true,
position: 'inside'
},
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
},
{
type: 'bar',
name: '库位数量',
stack: '总量',
label: {
show: true,
position: 'inside'
},
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
data: this.smallList.position
}]
}
this.chartAxis = echarts.init(document.getElementById('J_axis'))
this.chartAxis.setOption(option)
window.addEventListener('resize', () => {
this.chartAxis.resize()
})
}
}
}
</script>
<style lang='scss'>
.mod-demo-echarts {
background-color: #0079ba;
> .el-alert {
margin-bottom: 10px;
}
> .el-row {
margin-top: -10px;
margin-bottom: -10px;
.el-col {
padding-top: 10px;
padding-bottom: 10px;
}
}
.chart-box {
min-height: 600px;
}
}
.tagClass{
height: 6%;
font-size: 30px;
}
.titleClass{
width: 70%;
margin-left: 15%;
background: #B8D4E9;
}
</style>

파일 보기

@ -1,26 +1,65 @@
<template>
<div class='mod-demo-echarts' :style="`height: ${winHeight}px`">
<el-card class="titleClass">
<el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
<el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
<el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
<el-tag class="tagClass" type='warning' color="#E9EAEF" effect="dark">当前任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : '入库'}}&emsp;</el-tag>
</el-card>
<hr />
<el-row>
<el-col :span='11' :offset='1'>
<div id='J_chartPieBox' class='chart-box'></div>
</el-col>
<el-col :span='11'>
<div id='J_chartScatterBox' class='chart-box'></div>
<!-- <div :style="`font-size: ${60 * beilv}px`" style="margin-left:30%;color:white;margin-bottom:10px"><img :height="`${60 * beilv}px`" src="../../assets/img/title.png">&nbsp;奔一电气立体库展示屏</div> -->
<!-- <el-card class="titleClass">
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='warning' color="#E9EAEF" effect="dark">当前任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}}&emsp;</el-tag>
</el-card>
<hr /> -->
<el-row class="mod-demo-echarts-title">
<el-col class="mod-demo-echarts-title-logo" :span="1"></el-col>
<el-col class="mod-demo-echarts-title-font" :span="11"> 展示屏</el-col>
<el-col class="mod-demo-echarts-title-icon" :span="4">
<el-row>
<el-col :offset="1" :span="5">
<img style="width: 100%;" src="../../assets/img/bigLed/icon1.png" alt="">
</el-col>
<el-col :offset="1" :span="5">
<img style="width: 100%;" src="../../assets/img/bigLed/icon2.png" alt="">
</el-col>
<el-col :offset="1" :span="5">
<img style="width: 100%;" src="../../assets/img/bigLed/icon3.png" alt="">
</el-col>
<el-col :offset="1" :span="5">
<img style="width: 100%;" src="../../assets/img/bigLed/icon4.png" alt="">
</el-col>
</el-row>
</el-col>
</el-row>
<el-row class="mod-demo-echarts-secondtitle">
<!-- <el-card class="titleClass">
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
<el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">当前任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}}&emsp;</el-tag>
</el-card> -->
</el-row>
<el-row>
<el-col :span='6' :offset='1'>
<div id='J_category' class='chart-box'></div>
<el-col :span='11' style="margin-left:2%">
<div class="chart-box chart-box-bg1">
<div class="chart-box-title">
库位使用情况{{firstPointList.all}}
</div>
<div id='J_chartPieBox' class='chart-box-pie'></div>
</div>
<div class="chart-br"></div>
<div class="chart-box">
<div class="chart-box-title">
产品类别库位数量情况(外圈总量内圈库存)
</div>
<div id='J_chartScatterBox' class='chart-box-pie'></div>
</div>
</el-col>
<el-col :span='16'>
<div id='J_axis' class='chart-box'></div>
<el-col :span='11' :offset='1'>
<div class="chart-box chart-box-bg2">
<div class="chart-box-title">
产品型号库位数量情况
</div>
<div id='J_category' class='chart-box-bar'></div>
<div id='J_axis' class='chart-box-bar'></div>
</div>
</el-col>
</el-row>
</div>
@ -28,6 +67,7 @@
<script>
import echarts from 'echarts'
const colorOptions = ['#ec6942', '#f4b485', '#88abda']
export default {
data () {
return {
@ -40,15 +80,34 @@ export default {
sTaskInfo: {},
coverList: [],
smallList: [],
winHeight: 0
winHeight: 0,
beilv: 1
}
},
mounted () {
this.init()
this.winHeight = window.innerHeight
this.beilv = window.innerWidth / 1920
console.log(this.beilv)
window.addEventListener('resize', () => {
this.winHeight = window.innerHeight
this.beilv = window.innerWidth / 1920
this.chartCate.dispose()
this.chartAxis.dispose()
this.chartBar.dispose()
this.chartPie.dispose()
this.initChartPie()
this.initChartScatter()
this.initCate()
this.initAxis()
})
setInterval(() => {
this.chartCate.dispose()
this.chartAxis.dispose()
this.chartBar.dispose()
this.chartPie.dispose()
this.init()
}, 60000)
},
computed: {
documentClientHeight: {
@ -60,14 +119,8 @@ export default {
if (this.chartPie) {
this.chartPie.resize()
}
if (this.chartBar) {
this.chartBar.resize()
}
if (this.chartAxis) {
this.chartAxis.resize()
}
if (this.chartCate) {
this.chartCate.resize()
if (this.chartScatter) {
this.chartScatter.resize()
}
},
methods: {
@ -135,6 +188,9 @@ export default {
}).then(({data}) => {
if (data && data.code === 0) {
this.sTaskInfo = data.list[0]
if (!this.sTaskInfo.taskDetCode) {
this.sTaskInfo.taskDetCode = ''
}
}
})
},
@ -142,29 +198,40 @@ export default {
initChartPie () {
var option = {
title: {
text: `库位使用情况:共${this.firstPointList.all}`,
// text: `使:${this.firstPointList.all}`,
left: 'center',
top: 20,
top: 20 * this.beilv,
textStyle: {
color: '#fff'
color: '#fff',
fontSize: 25 * this.beilv
}
},
legend: {
orient: 'vertical',
left: 10,
right: 20 * this.beilv,
top: 40 * this.beilv,
itemWidth: 40 * this.beilv,
itemHeight: 40 * this.beilv,
itemGap: 80 * this.beilv,
icon: 'rect',
data: [
'已占用库位',
'未占用库位'
],
textStyle: {
fontSize: 14,
color: '#fff'
fontSize: 16 * this.beilv,
color: '#fff',
padding: [0, 0, 0, 10 * this.beilv]
}
},
color: ['#dd6b66', '#c23531'],
color: colorOptions,
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
formatter: '{a} <br/>{b} : {c} ({d}%)',
textStyle: {
fontSize: 20 * this.beilv,
lineHeight: 22 * this.beilv
}
},
visualMap: {
show: false,
@ -178,8 +245,8 @@ export default {
{
name: '库位数',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
radius: '55%',
center: ['39%', '50%'],
data: [
{ value: this.firstPointList.isOccupy, name: `已占用库位` },
{ value: this.firstPointList.notOccupy, name: `未占用库位` }
@ -189,8 +256,8 @@ export default {
itemStyle: {
normal: {
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}}{c} {per|{d}%} ',
backgroundColor: '#eee',
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}}{c|{c}} {per|{d}%} ',
backgroundColor: '#ced0ff',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
@ -201,32 +268,41 @@ export default {
// padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
color: '#fff',
lineHeight: 26 * this.beilv,
backgroundColor: '#8e60f0',
align: 'center',
fontSize: 20 * this.beilv
},
abg: {
backgroundColor: '#333',
backgroundColor: '#8e60f0',
width: '100%',
align: 'right',
height: 22,
borderRadius: [4, 4, 0, 0]
height: 26 * this.beilv,
borderRadius: [4, 4, 0, 0],
fontSize: 20 * this.beilv
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
borderWidth: 0.5 * this.beilv,
height: 0 * this.beilv,
fontSize: 18 * this.beilv
},
b: {
fontSize: 16,
lineHeight: 33
fontSize: 18 * this.beilv,
lineHeight: 33 * this.beilv,
color: '#8e60f0'
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
color: '#fff',
padding: [2 * this.beilv, 4 * this.beilv],
borderRadius: 2 * this.beilv,
fontSize: 18 * this.beilv
},
c: {
fontSize: 18 * this.beilv,
color: '#8e60f0'
}
}
}
@ -250,42 +326,55 @@ export default {
},
initChartScatter () {
var option = {
backgroundColor: '#0079BA',
// backgroundColor: '#0079BA',
color: colorOptions,
title: {
text: '大系列库位数量情况(外圈总量,内圈库存)',
// text: '()',
left: 'center',
top: 0,
textStyle: {
color: '#fff'
color: '#fff',
fontSize: 25 * this.beilv
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
formatter: '{a} <br/>{b}: {c} ({d}%)',
textStyle: {
fontSize: 20 * this.beilv,
lineHeight: 22 * this.beilv
}
},
legend: {
orient: 'vertical',
left: 10,
right: 20 * this.beilv,
top: 40 * this.beilv,
itemWidth: 40 * this.beilv,
itemHeight: 40 * this.beilv,
itemGap: 30 * this.beilv,
icon: 'rect',
data: [
'成品',
'半成品',
'原材料'
],
textStyle: {
fontSize: 14,
color: '#fff'
fontSize: 16 * this.beilv,
color: '#fff',
padding: [0, 0, 0, 10 * this.beilv]
}
},
series: [
{
name: '库位数',
type: 'pie',
radius: [0, '40%'],
radius: [0, '35%'],
center: ['39%', '50%'],
itemStyle: {
normal: {
label: {
position: 'inner',
fontSize: 14,
fontSize: 12 * this.beilv,
formatter: '{b}: {c}'
}
}
@ -302,12 +391,13 @@ export default {
{
name: '数量',
type: 'pie',
radius: ['50%', '75%'],
radius: ['45%', '55%'],
center: ['39%', '50%'],
itemStyle: {
normal: {
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}}{c} {per|{d}%} ',
backgroundColor: '#eee',
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}}{c|{c}} {per|{d}%} ',
backgroundColor: '#ced0ff',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
@ -318,32 +408,41 @@ export default {
// padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
color: '#fff',
lineHeight: 26 * this.beilv,
backgroundColor: '#8e60f0',
align: 'center',
fontSize: 20 * this.beilv
},
abg: {
backgroundColor: '#333',
backgroundColor: '#8e60f0',
width: '100%',
align: 'right',
height: 22,
borderRadius: [4, 4, 0, 0]
height: 26 * this.beilv,
borderRadius: [4, 4, 0, 0],
fontSize: 20 * this.beilv
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
borderWidth: 0.5 * this.beilv,
height: 0 * this.beilv,
fontSize: 18 * this.beilv
},
b: {
fontSize: 16,
lineHeight: 33
fontSize: 18 * this.beilv,
lineHeight: 33 * this.beilv,
color: '#8e60f0'
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
color: '#fff',
padding: [2 * this.beilv, 4 * this.beilv],
borderRadius: 2 * this.beilv,
fontSize: 18 * this.beilv
},
c: {
fontSize: 18 * this.beilv,
color: '#8e60f0'
}
}
}
@ -366,6 +465,14 @@ export default {
})
},
initCate () {
let [max, beilv] = [0, 0]
const kwArr = [this.coverList.basePosition, this.coverList.coverPosition]
kwArr.map(item => {
if (max < item) {
beilv = Math.ceil(item / 50)
max = beilv * 50
}
})
let option = {
tooltip: {
trigger: 'axis',
@ -373,30 +480,60 @@ export default {
type: 'cross',
crossStyle: {
color: '#999'
},
label: {
textStyle: {
fontSize: 16 * this.beilv
}
}
},
textStyle: {
fontSize: 20 * this.beilv,
lineHeight: 22 * this.beilv
}
},
legend: {
show: true,
orient: 'vertical',
right: 70 * this.beilv,
top: 60 * this.beilv,
itemWidth: 40 * this.beilv,
itemHeight: 40 * this.beilv,
itemGap: 80 * this.beilv,
icon: 'rect',
data: [
'数量',
'库位数量'
],
textStyle: {
fontSize: 14,
color: '#fff'
fontSize: 16 * this.beilv,
color: '#fff',
padding: [0, 0, 0, 10 * this.beilv]
}
},
color: ['#c23531', '#ff7f50'],
color: ['#FFCD42', '#87cefa'],
xAxis: [
{
type: 'category',
data: ['盒底', '盒盖'],
axisPointer: {
type: 'shadow'
axisLine: {
lineStyle: {
color: '#fff',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16,
fontSize: 18 * this.beilv,
color: '#fff'
},
axisPointer: {
type: 'shadow',
label: {
color: '#666'
}
}
}
],
@ -405,29 +542,61 @@ export default {
type: 'value',
name: '数量',
nameTextStyle: {
fontSize: 20,
fontSize: 20 * this.beilv,
color: '#fff'
},
axisLine: {
lineStyle: {
color: '#fff',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16,
fontSize: 18 * this.beilv,
color: '#fff'
},
axisPointer: {
label: {
color: '#666'
}
}
},
{
type: 'value',
name: '库位数量',
min: 0,
max: 50,
max,
nameTextStyle: {
fontSize: 20,
fontSize: 20 * this.beilv,
color: '#fff'
},
axisLine: {
lineStyle: {
color: '#fff',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16,
fontSize: 18 * this.beilv,
color: '#fff'
},
axisPointer: {
label: {
color: '#666'
}
}
}
],
grid: {
left: '15%',
right: '40%'
},
series: [
{
name: '数量',
@ -436,7 +605,8 @@ export default {
normal: {
label: {
show: true,
position: 'inside'
position: 'inside',
fontSize: 18 * this.beilv
}
}
},
@ -451,7 +621,8 @@ export default {
normal: {
label: {
show: true,
position: 'inside'
position: 'inside',
fontSize: 18 * this.beilv
}
}
}
@ -463,8 +634,23 @@ export default {
window.addEventListener('resize', () => {
this.chartCate.resize()
})
this.chartCate.on('legendselectchanged', res => {
this.chartAxis.dispatchAction({
type: 'legendToggleSelect',
//
name: res.name
})
})
},
initAxis () {
let [max, beilv] = [0, 0]
const kwArr = this.smallList.position
kwArr.map(item => {
if (max < item) {
beilv = Math.ceil(item / 50)
max = beilv * 50
}
})
let option = {
tooltip: {
trigger: 'axis',
@ -472,39 +658,77 @@ export default {
type: 'cross',
crossStyle: {
color: '#999'
},
label: {
textStyle: {
fontSize: 16 * this.beilv
}
}
},
textStyle: {
fontSize: 20 * this.beilv,
lineHeight: 22 * this.beilv
}
},
legend: {
show: false,
data: [
'数量',
'库位数量'
],
textStyle: {
fontSize: 14,
fontSize: 16 * this.beilv,
color: '#fff'
},
top: 20
top: 27 * this.beilv
},
title: {
text: '成品小系列库位数量情况',
// text: '',
left: 'center',
top: 0,
textStyle: {
color: '#fff'
color: '#fff',
fontSize: 25 * this.beilv
}
},
grid: {
top: 60 * this.beilv,
left: '15%'
},
color: ['#FFCD42', '#87cefa'],
xAxis: [
{
type: 'category',
data: this.smallList.categoryName,
axisPointer: {
type: 'shadow'
axisLine: {
lineStyle: {
color: '#fff',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16,
color: '#fff'
fontSize: 18 * this.beilv,
color: '#fff',
interval: 0,
// formatter:function (value,index) {
// debugger
// if (index % 2 != 0) {
// return '\n' + value
// }
// else {
// return value
// }
// }
rotate: 40
},
axisPointer: {
type: 'shadow',
label: {
color: '#666'
}
}
}
],
@ -513,26 +737,54 @@ export default {
type: 'value',
name: '数量',
nameTextStyle: {
fontSize: 20,
fontSize: 20 * this.beilv,
color: '#fff'
},
axisLine: {
lineStyle: {
color: '#fff',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16,
fontSize: 18 * this.beilv,
color: '#fff'
},
axisPointer: {
label: {
color: '#666'
}
}
},
{
type: 'value',
name: '库位数量',
min: 0,
max: 100,
max,
nameTextStyle: {
fontSize: 20,
fontSize: 20 * this.beilv,
color: '#fff'
},
axisLine: {
lineStyle: {
color: '#fff',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16,
fontSize: 16 * this.beilv,
color: '#fff'
},
axisPointer: {
label: {
color: '#666'
}
}
}
],
@ -544,7 +796,8 @@ export default {
normal: {
label: {
show: true,
position: 'top'
position: 'top',
fontSize: 12 * this.beilv
}
}
},
@ -559,7 +812,8 @@ export default {
normal: {
label: {
show: true,
position: 'top'
position: 'top',
fontSize: 12 * this.beilv
}
}
}
@ -579,26 +833,99 @@ export default {
<style lang='scss'>
.mod-demo-echarts {
background-color: #0079ba;
background: url('../../assets/img/bigLed/background.png') no-repeat;
background-size: 100% 100%;
overflow:hidden;
padding: 0 5%;
> .el-alert {
margin-bottom: 10px;
}
> .el-row {
.el-col {
padding-top: 10px;
padding-bottom: 10px;
.mod-demo-echarts-title{
position: relative;
top: 2vh;
width: 100%;
height: 13vh;
line-height: 13vh;
.mod-demo-echarts-title-logo{
min-width: 120px;
margin-top: 3vh;
height: 7vh;
background: url('../../assets/img/logo.png') no-repeat;
background-size: auto 100%;
}
.mod-demo-echarts-title-font{
font-weight: bold;
color: #fff;
font-size: 7vh;
text-align: center;
}
}
.chart-box {
min-height: 44vh;
.mod-demo-echarts-secondtitle{
margin-bottom: 1vh;
width: 100%;
height: 12vh;
.titleClass{
width: 100%;
line-height: 12vh;
background: transparent;
text-align: center;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
border: 0;
.el-card__body{
padding: 0;
}
.tagClass{
height: 7vh;
line-height: 7vh;
background-color: rgba(255, 255, 255, .3) !important;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
border: 1px dashed #fff;
color: #fff;
}
}
}
.chart-box{
border-radius: 5px;
padding: 20px 5px 10px 5px;
border: 2px dashed #fff;
position: relative;
text-align: center;
.chart-box-pie {
min-height: 27vh;
}
.chart-box-bar {
min-height: 32vh;
}
.chart-box-title{
display: inline-block;
position: relative;
top: -4vh;
width: auto;
height: 4vh;
line-height: 4vh;
padding: 0 2.5vh;
margin: 0 auto;
border-radius: 5px;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
font-size: 2.5vh;
color: #fff;
font-weight: bold;
background-color: #8e60f0;
}
}
// .chart-box-bg1{
// background: url('../../assets/img/bigLed/round.png') no-repeat;
// background-size: 31px 31px;
// background-position: 98% 4%;
// }
// .chart-box-bg2{
// background: url('../../assets/img/bigLed/line-round.png') no-repeat;
// background-size: 35px 35px;
// background-position: 98% 2%;
// }
.chart-br{
width: 100%;
height: calc(6vh - 35px);
}
}
.tagClass{
height: 6%;
font-size: 30px;
}
.titleClass{
width: 70%;
margin-left: 15%;
background: #B8D4E9;
}
</style>