xiaoning
/
gjerp_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.完善看板数据加载

Browse Source
master
董哲奇 1 year ago
parent 7ec8a988c2
commit 203c07b194
7 changed files with 535 additions and 145 deletions
Show Stats Download Patch File Download Diff File

51
src/api/kban.js
Unescape View File

@ -0,0 +1,51 @@
import request from '@/utils/request'
/**
* 各垮计划完成情况
*/
export const getGkjhwcqk=function(){
return request({
url: '/kban/gxjhwcqk',
method: 'get',
})
}
/**
* 各月份产量(吨)
*/
export const getQyfcl=function(){
return request({
url: '/kban/gyfcl',
method: 'get',
})
}
/**
* 计划完成情况(吨)
*/
export const getJhwcqk=function(){
return request({
url: '/kban/jhwcqk',
method: 'get',
})
}
/**
* 各垮产量
*/
export const getGekuachaliang=function(){
return request({
url: '/kban/gekuachaliang',
method: 'get',
})
}
/**
* 考勤情况
*/
export const getKqData=function(){
return request({
url: '/kban/kq',
method: 'get',
})
}

412
src/views/kban/comps/GxChanLiang.vue
Unescape View File

@ -8,13 +8,13 @@
<div class="card-footer-item">
<div class="footer-title">数量</div>
<div class="footer-detail">
<dv-digital-flop :config="card.total" style="width:70%;height:35px;" />张
<dv-digital-flop v-if="show" :config="card.total" style="width:70%;height:35px;" />张
</div>
</div>
<div class="card-footer-item">
<div class="footer-title">重量</div>
<div class="footer-detail">
<dv-digital-flop :config="card.num" style="width:70%;height:35px;" />吨
<dv-digital-flop v-if="show" :config="card.num" style="width:70%;height:35px;" />吨
</div>
</div>
</div>
@ -24,92 +24,368 @@
</template>
<script>
import {getGkjhwcqk} from "@/api/kban";
export default {
name:'MainGxChanLiang',
data(){
return {
show:false,
cards:[]
}
},
mounted () {
this.getData()
setInterval(this.getData, 30000)
},
methods: {
createData () {
const { randomExtend } = this
const arr=['上料','抛丸','理料','划线','切割']
this.cards = new Array(5).fill(0).map((foo, i) => ({
title: arr[i],
total: {
number: [randomExtend(100, 400)],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#ea6027',
fontWeight: 'bold'
async getData() {
const res=await getGkjhwcqk()
const {上料, 抛丸, 理料, 划线, 切割} = this.createData(res.data)
this.show = false
this.cards = [上料, 抛丸, 理料, 划线, 切割]
this.show = true
},
createData (list) {
const data={
"上料": {
title: '上料',
total: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#ea6027',
fontWeight: 'bold'
}
},
num: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#26fcd8',
fontWeight: 'bold'
}
},
ring: {
series: [
{
type: 'gauge',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,
arcLineWidth: 13,
radius: '80%',
data: [
{ name: '重量占比', value: 0 }
],
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: false
},
backgroundArc: {
style: {
stroke: '#224590'
}
},
details: {
show: true,
formatter: '重量占比{value}%',
style: {
fill: '#1ed3e5',
fontSize: 20
}
}
}
],
color: ['#03d3ec']
}
},
num: {
number: [randomExtend(300, 600)],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#26fcd8',
fontWeight: 'bold'
"抛丸": {
title: '抛丸',
total: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#ea6027',
fontWeight: 'bold'
}
},
num: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#26fcd8',
fontWeight: 'bold'
}
},
ring: {
series: [
{
type: 'gauge',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,
arcLineWidth: 13,
radius: '80%',
data: [
{ name: '重量占比', value: 0 }
],
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: false
},
backgroundArc: {
style: {
stroke: '#224590'
}
},
details: {
show: true,
formatter: '重量占比{value}%',
style: {
fill: '#1ed3e5',
fontSize: 20
}
}
}
],
color: ['#03d3ec']
}
},
ring: {
series: [
{
type: 'gauge',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,
arcLineWidth: 13,
radius: '80%',
data: [
{ name: '重量占比', value: randomExtend(40, 60) }
],
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: false
},
backgroundArc: {
style: {
stroke: '#224590'
"理料": {
title: '理料',
total: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#ea6027',
fontWeight: 'bold'
}
},
num: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#26fcd8',
fontWeight: 'bold'
}
},
ring: {
series: [
{
type: 'gauge',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,
arcLineWidth: 13,
radius: '80%',
data: [
{ name: '重量占比', value: 0 }
],
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: false
},
backgroundArc: {
style: {
stroke: '#224590'
}
},
details: {
show: true,
formatter: '重量占比{value}%',
style: {
fill: '#1ed3e5',
fontSize: 20
}
}
},
details: {
show: true,
formatter: '重量占比{value}%',
style: {
fill: '#1ed3e5',
fontSize: 20
}
],
color: ['#03d3ec']
}
},
"划线": {
title: '划线',
total: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#ea6027',
fontWeight: 'bold'
}
},
num: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#26fcd8',
fontWeight: 'bold'
}
},
ring: {
series: [
{
type: 'gauge',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,
arcLineWidth: 13,
radius: '80%',
data: [
{ name: '重量占比', value: 0 }
],
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: false
},
backgroundArc: {
style: {
stroke: '#224590'
}
},
details: {
show: true,
formatter: '重量占比{value}%',
style: {
fill: '#1ed3e5',
fontSize: 20
}
}
}
],
color: ['#03d3ec']
}
},
"切割": {
title: '切割',
total: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#ea6027',
fontWeight: 'bold'
}
],
color: ['#03d3ec']
},
num: {
number: [0],
content: '{nt}',
textAlign: 'right',
style: {
fill: '#26fcd8',
fontWeight: 'bold'
}
},
ring: {
series: [
{
type: 'gauge',
startAngle: -Math.PI / 2,
endAngle: Math.PI * 1.5,
arcLineWidth: 13,
radius: '80%',
data: [
{ name: '重量占比', value: 0 }
],
axisLabel: {
show: false
},
axisTick: {
show: false
},
pointer: {
show: false
},
backgroundArc: {
style: {
stroke: '#224590'
}
},
details: {
show: true,
formatter: '重量占比{value}%',
style: {
fill: '#1ed3e5',
fontSize: 20
}
}
}
],
color: ['#03d3ec']
}
}
}))
},
randomExtend (minNum, maxNum) {
if (arguments.length === 1) {
return parseInt(Math.random() * minNum + 1, 10)
} else {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
}
}
},
mounted () {
const { createData } = this
createData()
let totalZl=0
for (const item of list) {
totalZl+=(item.bcshzl/1000)||0
if (!!item.slfkrq){
data.上料.total.number[0]+=1
data.上料.num.number[0]+=(item.bcshzl/1000)||0
}
if (!!item.pwfkrq){
data.抛丸.total.number[0]+=1
data.抛丸.num.number[0]+=(item.bcshzl/1000)||0
}
if (!!item.llfkrq){
data.理料.total.number[0]+=1
data.理料.num.number[0]+=(item.bcshzl/1000)||0
}
if (!!item.hxfkrq){
data.划线.total.number[0]+=1
data.划线.num.number[0]+=(item.bcshzl/1000)||0
}
if (!!item.qgfkrq){
data.切割.total.number[0]+=1
data.切割.num.number[0]+=(item.bcshzl/1000)||0
}
}
let d1=data.上料.num.number[0]/totalZl*100
d1=d1<1?1:d1
data.上料.ring.series[0].data[0].value=parseFloat(d1.toFixed(2))
let d2=data.上料.num.number[0]/totalZl*100
d2=d2<1?1:d2
data.抛丸.ring.series[0].data[0].value=parseFloat(d2.toFixed(2))
setInterval(this.createData, 30000)
}
let d3=data.上料.num.number[0]/totalZl*100
d3=d3<1?1:d3
data.理料.ring.series[0].data[0].value=parseFloat(d3.toFixed(2))
let d4=data.上料.num.number[0]/totalZl*100
d4=d4<1?1:d4
data.划线.ring.series[0].data[0].value=parseFloat(d4.toFixed(2))
let d5=data.上料.num.number[0]/totalZl*100
d5=d5<1?1:d5
data.切割.ring.series[0].data[0].value=parseFloat(d5.toFixed(2))
return data
},
},
}
</script>

66
src/views/kban/comps/MainChanLian.vue
Unescape View File

@ -1,57 +1,57 @@
<template>
<div class="chanlian">
<div class="chanlian__title">本月各垮产量(吨)</div>
<dv-scroll-ranking-board :config="config" />
<dv-scroll-ranking-board v-if="show" :config="config" />
</div>
</template>
<script>
import {getGekuachaliang} from "@/api/kban";
export default {
name: "MainChanLian",
data () {
return {
show:false,
config: {
data: [
{
name: '上料',
value: 120
},
{
name: '切割',
value: 55
},
{
name: '理料',
value: 78
},
{
name: '划线',
value: 66
},
{
name: '抛丸',
value: 80
},
{
name: '坡口',
value: 45
},
{
name: '曲加工',
value: 29
},
{
name: '打磨',
value: 29
},
{
name: '预配盘',
value: 29
}
],
rowNum: 9
}
}
},
mounted() {
// this.$socket.open()
// this.wsSubscribe()
},
created(){
this.getData();
},
sockets:{},
methods:{
getData(){
getGekuachaliang().then(res=>{
this.show=false
const data=[]
let total=0
Object.keys(res.data).forEach(key=>{
const item=res.data[key]
data.push({name:item.BMSM,value:item.t})
total+=1
})
this.config.data=data
this.config.rowNum=total
this.show=true
this.execute()
})
},
execute(){
setTimeout(this.getData,30000)
}
}
}
</script>

41
src/views/kban/comps/MainCq.vue
Unescape View File

@ -5,30 +5,57 @@
总人数<span>{{totalPerson}}</span>人
</div>
<div class="chart-container">
<dv-active-ring-chart :config="config" />
<dv-active-ring-chart v-if="show" :config="config" />
</div>
</div>
</template>
<script>
import {getKqData} from "@/api/kban";
export default {
name:'Cq',
data () {
return {
totalPerson:300,
show:false,
totalPerson:0,
config: {
radius: '60%',
activeRadius: '63%',
data: [
{name:'出勤',value:296},
{name:'请假',value:2},
{name:'缺勤',value:2}
],
data: [],
digitalFlopStyle: {
fontSize: 20
}
}
}
},
mounted() {
// this.$socket.open()
// this.wsSubscribe()
},
created(){
this.getData();
},
sockets:{},
methods:{
getData(){
getKqData().then(res=>{
this.show=false
const data=[]
this.totalPerson=0
Object.keys(res.data).forEach(key=>{
const item=res.data[key]
data.push({name:key,value:item})
this.totalPerson+=item
})
this.config.data=data
this.show=true
this.execute()
})
},
execute(){
setTimeout(this.getData,30000)
}
}
}
</script>

62
src/views/kban/comps/MainGeYueChanLiang.vue
Unescape View File

@ -1,15 +1,18 @@
<template>
<div class="ycl">
<div class="ycl__title">各月份产量(吨)</div>
<dv-conical-column-chart :config="config" />
<dv-conical-column-chart v-if="show" :config="config" />
</div>
</template>
<script>
import {getKqData, getQyfcl} from "@/api/kban";
export default {
name:'MainGeYueChanLiang',
data(){
return {
show:false,
config:{
showValue:true,
data: [
@ -17,41 +20,34 @@ export default {
name: '1月',
value: 71
},
{
name: '2月',
value: 55
},
{
name: '3月',
value: 120
},
{
name: '4月',
value: 66
},
{
name: '5月',
value: 80
},
{
name: '6月',
value: 95
},
{
name: '7月',
value: 90
},
{
name: '8月',
value: 90
},
{
name: '9月',
value: 32
},
],
}
}
},
mounted() {
// this.$socket.open()
// this.wsSubscribe()
},
created(){
this.getData();
},
sockets:{},
methods:{
getData(){
getQyfcl().then(res=>{
this.show=false
const data=[]
for (const item of res.data) {
data.push({name:`${item.month}月`,value:item.t.toFixed(2)})
}
this.config.data=data
this.show=true
this.execute()
})
},
execute(){
setTimeout(this.getData,30000)
}
}
}
</script>

39
src/views/kban/comps/MainYueChanLiang.vue
Unescape View File

@ -2,26 +2,59 @@
<div class="ycl">
<div class="ycl__title">本月计划完成情况</div>
<div class="water-level-chart-details">
累计完成<span>6,800</span>吨
累计完成<span>{{dun}}</span>吨
</div>
<div class="chart-container">
<dv-water-level-pond :config="config" />
<dv-water-level-pond v-if="show" :config="config" />
</div>
</div>
</template>
<script>
import {getJhwcqk} from "@/api/kban";
export default {
name:'MainYueChanLiang',
data () {
return {
show:false,
dun:0,
config: {
data: [45],
data: [],
shape: 'round',
waveHeight: 25,
waveNum: 2
}
}
},
mounted() {
// this.$socket.open()
// this.wsSubscribe()
},
created(){
this.getData();
},
sockets:{},
methods:{
getData(){
getJhwcqk().then(res=>{
this.show=false
let total=0
for (const item of res.data) {
if (item.zt==='62'){
this.dun=item.t.toFixed(2)
}
total+=item.t||0
}
const point=(this.dun/total*100).toFixed(2)
this.config.data=[point]
this.show=true
this.execute()
})
},
execute(){
setTimeout(this.getData,30000)
}
}
}
</script>

9
src/views/kban/index.vue
Unescape View File

@ -48,7 +48,14 @@ export default {
data () {
return {}
},
methods: {}
mounted(){
this.init()
},
methods: {
init(){
this.$store.dispatch('page/handler', true)
}
}
}
</script>

Write Preview
Loading…
Cancel
Save