大屏
This commit is contained in:
parent
c58b017794
commit
b14bba1b5d
BIN
src/assets/img/bigLed/background.png
Normal file
BIN
src/assets/img/bigLed/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
src/assets/img/bigLed/icon1.png
Normal file
BIN
src/assets/img/bigLed/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/img/bigLed/icon2.png
Normal file
BIN
src/assets/img/bigLed/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/img/bigLed/icon3.png
Normal file
BIN
src/assets/img/bigLed/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/img/bigLed/icon4.png
Normal file
BIN
src/assets/img/bigLed/icon4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
src/assets/img/bigLed/legend1.png
Normal file
BIN
src/assets/img/bigLed/legend1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/img/bigLed/legend2.png
Normal file
BIN
src/assets/img/bigLed/legend2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/img/bigLed/legend3.png
Normal file
BIN
src/assets/img/bigLed/legend3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/img/bigLed/line-round.png
Normal file
BIN
src/assets/img/bigLed/line-round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
src/assets/img/bigLed/logo.png
Normal file
BIN
src/assets/img/bigLed/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/img/bigLed/round.png
Normal file
BIN
src/assets/img/bigLed/round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 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}} 类型:{{sTaskInfo.taskType === 0 ? '出库' : '入库'}} </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 () {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新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}} 类型:{{sTaskInfo.taskType === 0 ? '出库' : '入库'}} </el-tag>
|
||||
<!-- <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"> 奔一电气立体库展示屏</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}} 类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}} </el-tag>
|
||||
</el-card>
|
||||
<hr />
|
||||
<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 :span='11' :offset='1'>
|
||||
<div id='J_chartPieBox' class='chart-box'></div>
|
||||
<el-col :offset="1" :span="5">
|
||||
<img style="width: 100%;" src="../../assets/img/bigLed/icon1.png" alt="">
|
||||
</el-col>
|
||||
<el-col :span='11'>
|
||||
<div id='J_chartScatterBox' class='chart-box'></div>
|
||||
<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-row>
|
||||
<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-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}} 类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}} </el-tag>
|
||||
</el-card> -->
|
||||
</el-row>
|
||||
<el-row>
|
||||
<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='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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user