主要左侧报表
This commit is contained in:
@@ -143,6 +143,12 @@ div, p {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flexbetween {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.pointer {
|
.pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3873,3 +3873,8 @@ export const sortingAndPackaging = () => post('api/cockpit/sortingAndPackaging',
|
|||||||
// }
|
// }
|
||||||
// return res
|
// return res
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新版大屏首页左侧报表
|
||||||
|
*/
|
||||||
|
export const homepageDataLeft = () => post('api/dashboard/homepageDataLeft', {})
|
||||||
|
|||||||
147
src/assets/js/mork2.js
Normal file
147
src/assets/js/mork2.js
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
/**
|
||||||
|
* 新版大屏首页左侧报表
|
||||||
|
*/
|
||||||
|
export const homepageDataLeft = () => {
|
||||||
|
let res = {
|
||||||
|
// 当日混料 最多7个元素
|
||||||
|
'todayMix': [
|
||||||
|
{
|
||||||
|
// 物料编码
|
||||||
|
'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
|
||||||
|
// 需生产
|
||||||
|
'plan': 14,
|
||||||
|
// 已生产
|
||||||
|
'real': 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 物料编码
|
||||||
|
'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
|
||||||
|
// 需生产
|
||||||
|
'plan': 14,
|
||||||
|
// 已生产
|
||||||
|
'real': 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 物料编码
|
||||||
|
'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
|
||||||
|
// 需生产
|
||||||
|
'plan': 14,
|
||||||
|
// 已生产
|
||||||
|
'real': 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 物料编码
|
||||||
|
'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
|
||||||
|
// 需生产
|
||||||
|
'plan': 14,
|
||||||
|
// 已生产
|
||||||
|
'real': 16
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 物料编码
|
||||||
|
'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
|
||||||
|
// 需生产
|
||||||
|
'plan': 14,
|
||||||
|
// 已生产
|
||||||
|
'real': 16
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 当日成品 最多7个元素
|
||||||
|
'todaySort': [
|
||||||
|
{
|
||||||
|
// 物料编码
|
||||||
|
'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
|
||||||
|
// 需生产
|
||||||
|
'plan': 10,
|
||||||
|
// 已压制
|
||||||
|
'press': 20,
|
||||||
|
// 已完成
|
||||||
|
'real': 30
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 今日生产
|
||||||
|
'todayProduction': {
|
||||||
|
// 压制
|
||||||
|
'todayPressProduction': {
|
||||||
|
// 已生产
|
||||||
|
'real': 2122,
|
||||||
|
// 计划生产
|
||||||
|
'plan': 8400
|
||||||
|
},
|
||||||
|
// 包装
|
||||||
|
'todaySortProduction': {
|
||||||
|
// 已生产
|
||||||
|
'real': 0,
|
||||||
|
// 计划生产
|
||||||
|
'plan': 0
|
||||||
|
},
|
||||||
|
// 订单完成
|
||||||
|
'orderFulfillmentRate': {
|
||||||
|
// 已生产
|
||||||
|
'real': 2122,
|
||||||
|
// 计划生产
|
||||||
|
'plan': 8400
|
||||||
|
},
|
||||||
|
// 混料
|
||||||
|
'todayMixProduction': {
|
||||||
|
// 已生产
|
||||||
|
'real': 0.0,
|
||||||
|
// 计划生产
|
||||||
|
'plan': 0.0
|
||||||
|
},
|
||||||
|
// 信息
|
||||||
|
'message': '今日共需生产8400块，物料种类2种，已完成包装11托，共900块，1个物料，完成率25%。'
|
||||||
|
},
|
||||||
|
// 历史分析 固定7个元素
|
||||||
|
'history': [
|
||||||
|
{
|
||||||
|
// 日期
|
||||||
|
'date': '2023-10-25',
|
||||||
|
// 成品
|
||||||
|
'sort': 0,
|
||||||
|
// 压制
|
||||||
|
'press': 1890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'date': '2023-10-26',
|
||||||
|
'sort': 0,
|
||||||
|
'press': 2640
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'date': '2023-10-27',
|
||||||
|
'sort': 0,
|
||||||
|
'press': 5364
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'date': '2023-10-28',
|
||||||
|
'sort': 720,
|
||||||
|
'press': 4962
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'date': '2023-10-29',
|
||||||
|
'sort': 1584,
|
||||||
|
'press': 1260
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'date': '2023-10-30',
|
||||||
|
'sort': 1872,
|
||||||
|
'press': 2400
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'date': '2023-10-31',
|
||||||
|
'sort': 576,
|
||||||
|
'press': 630
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 库存量监控 最多7个元素
|
||||||
|
'inventory': [
|
||||||
|
{
|
||||||
|
// 物料编码
|
||||||
|
'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
|
||||||
|
// 数量
|
||||||
|
'qty': 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}
|
||||||
@@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="n_container">
|
<div class="n_container">
|
||||||
<div class="style_block" style="left: calc(100% / 3);top:0;"></div>
|
<!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
|
||||||
<div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
|
<div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
|
||||||
<div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
|
<div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
|
||||||
<div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
|
<div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
|
||||||
<div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
|
<div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
|
||||||
<div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
|
<div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
|
||||||
<div class="style_block" style="background: yellow;top: calc(100% / 3);bottom: 0"></div>
|
<div class="style_block" style="background: yellow;top: calc(100% / 3);bottom: 0"></div> -->
|
||||||
<div class="n_header">
|
<div class="n_header">
|
||||||
<div class="n_header_h1">
|
<div class="n_header_h1">
|
||||||
<h1>晟华生产数</h1>
|
<h1>晟华生产数</h1>
|
||||||
@@ -70,11 +70,10 @@ export default {
|
|||||||
.n_left_wraper
|
.n_left_wraper
|
||||||
width 49.5%
|
width 49.5%
|
||||||
height 100%
|
height 100%
|
||||||
background #fff
|
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
.n_right_wraper
|
.n_right_wraper
|
||||||
width 49.5%
|
width 49.5%
|
||||||
height 100%
|
height 100%
|
||||||
background #fff
|
background #2f3040
|
||||||
opacity 0.5
|
opacity 0.5
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,9 +1,678 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="left_wraper">左</div>
|
<div class="left_wraper">
|
||||||
|
<div class="item_wraper">
|
||||||
|
<div class="title_wraper">
|
||||||
|
<p>今日生产</p>
|
||||||
|
</div>
|
||||||
|
<div class="content_wraper flexbetween">
|
||||||
|
<div class="module_one_wraper">
|
||||||
|
<div class="echart_wraper_1">
|
||||||
|
<div id="new_home_echart_1" style="width: 100%; height: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="echart_title_1">订单完成</div>
|
||||||
|
</div>
|
||||||
|
<div class="module_two_wraper">
|
||||||
|
<div class="module_two_item_wraper">
|
||||||
|
<div class="module_two_item_lable flexcenter">混料</div>
|
||||||
|
<div class="module_two_item_content">
|
||||||
|
<div class="module_two_item_pro"></div>
|
||||||
|
<div class="module_two_item_p_l flexcenter">85.00吨</div>
|
||||||
|
<div class="module_two_item_p_r flexcenter">100吨</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="module_two_item_wraper">
|
||||||
|
<div class="module_two_item_lable flexcenter">成型</div>
|
||||||
|
<div class="module_two_item_content">
|
||||||
|
<div class="module_two_item_pro"></div>
|
||||||
|
<div class="module_two_item_p_l flexcenter">85.00块</div>
|
||||||
|
<div class="module_two_item_p_r flexcenter">100块</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="module_two_item_wraper">
|
||||||
|
<div class="module_two_item_lable flexcenter">包装</div>
|
||||||
|
<div class="module_two_item_content">
|
||||||
|
<div class="module_two_item_pro"></div>
|
||||||
|
<div class="module_two_item_p_l flexcenter">85.00块</div>
|
||||||
|
<div class="module_two_item_p_r flexcenter">100快</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="module_three_wraper">
|
||||||
|
<div class="module_three_text">
|
||||||
|
剩余<span>5</span>个，完成率<span>85%</span>，预计完成时间10月11日17点35分。今日订单共<span>158</span>个。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wraper flexbetween">
|
||||||
|
<div class="l_item_wraper">
|
||||||
|
<div class="title_wraper">
|
||||||
|
<p>当日混料</p>
|
||||||
|
</div>
|
||||||
|
<div class="content_wraper">
|
||||||
|
<div class="echart_wraper">
|
||||||
|
<div id="new_home_echart_2" style="width: 100%; height: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="l_item_wraper">
|
||||||
|
<div class="title_wraper">
|
||||||
|
<p>当日成品</p>
|
||||||
|
</div>
|
||||||
|
<div class="content_wraper">
|
||||||
|
<div class="echart_wraper">
|
||||||
|
<div id="new_home_echart_3" style="width: 100%; height: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item_wraper flexbetween">
|
||||||
|
<div class="l_item_wraper">
|
||||||
|
<div class="title_wraper">
|
||||||
|
<p>库存量监控</p>
|
||||||
|
</div>
|
||||||
|
<div class="content_wraper"></div>
|
||||||
|
</div>
|
||||||
|
<div class="l_item_wraper">
|
||||||
|
<div class="title_wraper">
|
||||||
|
<p>历史分析</p>
|
||||||
|
</div>
|
||||||
|
<div class="content_wraper"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { homepageDataLeft } from '@js/mork2.js'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
interTime: this.$store.getters.setTime,
|
||||||
|
timer: null,
|
||||||
|
todayProduction: {}, // 今日生产
|
||||||
|
todayMix: [], // 当日混料
|
||||||
|
todaySort: [], // 当日成品
|
||||||
|
myCharts1: '',
|
||||||
|
myCharts2: '',
|
||||||
|
myCharts3: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this._homepageDataLeft()
|
||||||
|
this.refresh()
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
clearInterval(this.timer)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
refresh () {
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this._homepageDataLeft()
|
||||||
|
}, this.interTime)
|
||||||
|
},
|
||||||
|
async _homepageDataLeft () {
|
||||||
|
let res = await homepageDataLeft()
|
||||||
|
this.todayProduction = res.todayProduction
|
||||||
|
this.todayMix = [...res.todayMix]
|
||||||
|
this.todaySort = [...res.todaySort]
|
||||||
|
this.setEchart1()
|
||||||
|
this.setEchart2()
|
||||||
|
this.setEchart3()
|
||||||
|
},
|
||||||
|
setEchart1 () {
|
||||||
|
let value = Number(this.todayProduction.orderFulfillmentRate.real) / Number(this.todayProduction.orderFulfillmentRate.plan)
|
||||||
|
value = value.toFixed(2)
|
||||||
|
value = value * 100
|
||||||
|
value = 78
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: 5,
|
||||||
|
left: 0,
|
||||||
|
right: 70,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '进度',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['76%', '90%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
clockwise: false,
|
||||||
|
label: {
|
||||||
|
position: 'center',
|
||||||
|
formatter: `{val| ${value}}{name|%}`,
|
||||||
|
rich: {
|
||||||
|
val: {
|
||||||
|
fontSize: 32,
|
||||||
|
fontWeight: 500,
|
||||||
|
color: '#fff',
|
||||||
|
fontFamily: 'Oswald-Regular, Oswald'
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: 400,
|
||||||
|
padding: [10, 0, 0, 0],
|
||||||
|
color: '#fff',
|
||||||
|
fontFamily: 'PingFangSC-Regular, PingFang SC'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
name: '已完成',
|
||||||
|
value: value - 1,
|
||||||
|
itemStyle: {
|
||||||
|
decal: {
|
||||||
|
color: '#0075f3',
|
||||||
|
backgroundColor: '#2e93f5',
|
||||||
|
dashArrayX: [1, 0],
|
||||||
|
dashArrayY: [1, 4],
|
||||||
|
rotation: -Math.PI
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '白色尾部',
|
||||||
|
value: 1,
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'radial',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
r: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#2e93f5' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#fff' // 0% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '未完成',
|
||||||
|
value: 100 - value,
|
||||||
|
itemStyle: {
|
||||||
|
decal: {
|
||||||
|
color: '#2a527e',
|
||||||
|
backgroundColor: '#355a84',
|
||||||
|
dashArrayX: [1, 0],
|
||||||
|
dashArrayY: [2, 4],
|
||||||
|
rotation: -Math.PI
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
disabled: true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
type: 'pie',
|
||||||
|
data: [100],
|
||||||
|
silent: true,
|
||||||
|
radius: '100%',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#0c2646'
|
||||||
|
},
|
||||||
|
z: -1
|
||||||
|
}, {
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['58%', '58.5%'],
|
||||||
|
startAngle: 225,
|
||||||
|
hoverAnimation: false,
|
||||||
|
legendHoverLink: false,
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
value: 100,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#0e58a8'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
type: 'gauge',
|
||||||
|
radius: '78%',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
startAngle: 0,
|
||||||
|
endAngle: 359.9,
|
||||||
|
splitNumber: 18,
|
||||||
|
hoverAnimation: false,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
length: 10,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#0e58a8'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [{
|
||||||
|
value: 0,
|
||||||
|
name: ''
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
let echart = document.getElementById('new_home_echart_1')
|
||||||
|
if (this.myCharts1 !== '') {
|
||||||
|
this.myCharts1.dispose()
|
||||||
|
}
|
||||||
|
if (echart !== null) {
|
||||||
|
this.myCharts1 = this.$echarts.init(echart)
|
||||||
|
this.myCharts1.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts1.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setEchart2 () {
|
||||||
|
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: 50,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: 'rect',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14
|
||||||
|
},
|
||||||
|
itemGap: 30.86,
|
||||||
|
itemWidth: 14.16,
|
||||||
|
itemHeight: 7.38,
|
||||||
|
data: [{name: '需生产', itemStyle: {color: '#0E90FD'}}, {name: '已生产', itemStyle: {color: '#33CCCC'}}]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#8FABBF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#8FABBF',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
// rotate: 50
|
||||||
|
},
|
||||||
|
data: barName
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '单位：块',
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitNumber: 2,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#8FABBF',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: [8, 4],
|
||||||
|
dashOffset: 4,
|
||||||
|
color: '#8FABBF'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '需生产',
|
||||||
|
type: 'pictorialBar',
|
||||||
|
barWidth: '55%',
|
||||||
|
// symbolOffset: [-10, 0],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#115A9C' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.8,
|
||||||
|
color: '#115A9C' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
globalCoord: false // 缺省为 false
|
||||||
|
}, // 渐变颜色
|
||||||
|
borderColor: '#09F6FF',
|
||||||
|
borderWidth: 3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
symbol:
|
||||||
|
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
|
||||||
|
data: barData1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '已生产',
|
||||||
|
type: 'pictorialBar',
|
||||||
|
barWidth: '55%',
|
||||||
|
barGap: '-50%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#115A9C' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.8,
|
||||||
|
color: '#115A9C' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
globalCoord: false // 缺省为 false
|
||||||
|
}, // 渐变颜色
|
||||||
|
borderColor: '#09F6FF',
|
||||||
|
borderWidth: 3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
symbol:
|
||||||
|
'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
|
||||||
|
data: barData2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
let echart = document.getElementById('new_home_echart_2')
|
||||||
|
if (this.myCharts2 !== '') {
|
||||||
|
this.myCharts2.dispose()
|
||||||
|
}
|
||||||
|
if (echart !== null) {
|
||||||
|
this.myCharts2 = this.$echarts.init(echart)
|
||||||
|
this.myCharts2.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts2.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setEchart3 () {
|
||||||
|
let barName = []
|
||||||
|
let barData1 = []
|
||||||
|
let barData2 = []
|
||||||
|
let barData3 = []
|
||||||
|
this.todaySort.map(el => {
|
||||||
|
barName.push(el.materialCode)
|
||||||
|
barData1.push(el.plan)
|
||||||
|
barData2.push(el.press)
|
||||||
|
barData3.push(el.real)
|
||||||
|
})
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
top: 50,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
icon: 'rect',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 14
|
||||||
|
},
|
||||||
|
itemGap: 30.86,
|
||||||
|
itemWidth: 14.16,
|
||||||
|
itemHeight: 7.38,
|
||||||
|
data: [{name: '需生产', itemStyle: {color: '#0E90FD'}}, {name: '已压制', itemStyle: {color: '#33CCCC'}}, {name: '已完成', itemStyle: {color: '#33CCC2'}}]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2,
|
||||||
|
color: '#8FABBF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#8FABBF',
|
||||||
|
fontSize: 16
|
||||||
|
}
|
||||||
|
// rotate: 50
|
||||||
|
},
|
||||||
|
data: barName
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
name: '单位：块',
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitNumber: 2,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#8FABBF',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: [8, 4],
|
||||||
|
dashOffset: 4,
|
||||||
|
color: '#8FABBF'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '需生产',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
barGap: '200%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(96,112,128,0.10)',
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#0E90FD',
|
||||||
|
opacity: 0.1
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: barData1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '已压制',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
barGap: '200%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#33CCCC',
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(31,89,89,0.25)',
|
||||||
|
opacity: 0.25
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: barData2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '已完成',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '8',
|
||||||
|
barGap: '200%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#33CCCC',
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(31,89,89,0.25)',
|
||||||
|
opacity: 0.25
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: barData3
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
let echart = document.getElementById('new_home_echart_3')
|
||||||
|
if (this.myCharts3 !== '') {
|
||||||
|
this.myCharts3.dispose()
|
||||||
|
}
|
||||||
|
if (echart !== null) {
|
||||||
|
this.myCharts3 = this.$echarts.init(echart)
|
||||||
|
this.myCharts3.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts3.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~@css/mixin'
|
@import '~@css/mixin'
|
||||||
.left_wraper
|
.left_wraper
|
||||||
_wh(100%, 100%)
|
_wh(100%, 100%)
|
||||||
|
.item_wraper
|
||||||
|
_wh(100%, calc((100% / 3) - 30px))
|
||||||
|
background #2f3040
|
||||||
|
margin-bottom 45px
|
||||||
|
&:last-child
|
||||||
|
margin-bottom 0
|
||||||
|
.title_wraper
|
||||||
|
_wh(100%, 50px)
|
||||||
|
p
|
||||||
|
_font(20px, 50px, #fff,,left)
|
||||||
|
.content_wraper
|
||||||
|
_wh(100%, calc(100% - 50px))
|
||||||
|
.l_item_wraper
|
||||||
|
_wh(calc(50% - 20px), 100%)
|
||||||
|
.module_one_wraper
|
||||||
|
_wh(25%, 100%)
|
||||||
|
.module_two_wraper
|
||||||
|
_wh(55%, 100%)
|
||||||
|
.module_three_wraper
|
||||||
|
_wh(20%, 100%)
|
||||||
|
.echart_wraper
|
||||||
|
_wh(100%, 100%)
|
||||||
|
.echart_wraper_1
|
||||||
|
_wh(100%, calc(100% - 50px))
|
||||||
|
.echart_title_1
|
||||||
|
_font(20px, 50px, #fff,,)
|
||||||
|
.module_two_item_wraper
|
||||||
|
_fj(row)
|
||||||
|
_wh(100%, calc((100% / 3) - 10px))
|
||||||
|
margin 5px 0
|
||||||
|
.module_two_item_lable
|
||||||
|
_wh(100px, 100%)
|
||||||
|
_font(20px, 1, #fff,,)
|
||||||
|
.module_two_item_content
|
||||||
|
position relative
|
||||||
|
_wh(calc(100% - 120px), 100%)
|
||||||
|
background #000
|
||||||
|
.module_two_item_pro
|
||||||
|
position absolute
|
||||||
|
left 0
|
||||||
|
top 0
|
||||||
|
_wh(50%, 100%)
|
||||||
|
border-right 1px solid #fff
|
||||||
|
background-color blue
|
||||||
|
.module_two_item_p_l
|
||||||
|
position absolute
|
||||||
|
left 0
|
||||||
|
top 0
|
||||||
|
_wh(50%, 100%)
|
||||||
|
_font(20px, 1, #fff,,)
|
||||||
|
.module_two_item_p_r
|
||||||
|
position absolute
|
||||||
|
right 0
|
||||||
|
top 0
|
||||||
|
_wh(50%, 100%)
|
||||||
|
_font(20px, 1, #fff,,)
|
||||||
|
.module_three_text
|
||||||
|
_font(20px, 40px, #fff,,)
|
||||||
|
span
|
||||||
|
color blue
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user