root/screen-lnsh-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

主要左侧报表

Browse Source
This commit is contained in:
caill
2023-11-29 18:10:11 +08:00
parent 7370217ca0
commit 1403ba3997
5 changed files with 831 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/reset.css
View File

@@ -143,6 +143,12 @@ div, p {
justify-content: center;
}
.flexbetween {
display: flex;
align-items: center;
justify-content: space-between;
}
.pointer {
cursor: pointer;
}

5
src/assets/js/getData2.js
View File

@@ -3873,3 +3873,8 @@ export const sortingAndPackaging = () => post('api/cockpit/sortingAndPackaging',
// }
// return res
// }
/**
* 新版大屏首页左侧报表
*/
export const homepageDataLeft = () => post('api/dashboard/homepageDataLeft', {})

147
src/assets/js/mork2.js Normal file
View 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
}

7
src/pages/modules/new/left/index.vue
View File

@@ -1,12 +1,12 @@
<template>
<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="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="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: 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_h1">
<h1>晟华生产数</h1>
@@ -70,11 +70,10 @@ export default {
.n_left_wraper
width 49.5%
height 100%
background #fff
opacity 0.5
.n_right_wraper
width 49.5%
height 100%
background #fff
background #2f3040
opacity 0.5
</style>

671
src/pages/modules/new/left/left.vue
View File

@@ -1,9 +1,678 @@
<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>
<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>
@import '~@css/mixin'
.left_wraper
_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>