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

1.看板界面及基本样式数据

Browse Source
master
董哲奇 1 year ago
parent 487e6fee2e
commit 7ec8a988c2
7 changed files with 459 additions and 36 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,8 +1,23 @@
<template>
<div class="ycl">
<template v-for="(item,index) in gxNames">
<template v-for="(card,i) in cards">
<div class="gxcl">
<div class="gxcl__title">{{item}}</div>
<div class="gxcl__title">{{card.title}}</div>
<dv-charts class="ring-charts" :option="card.ring" />
<div class="card-footer">
<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;" />张
</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;" />吨
</div>
</div>
</div>
</div>
</template>
</div>
@ -13,26 +28,104 @@ export default {
name:'MainGxChanLiang',
data(){
return {
gxNames:['上料','抛丸','理料','划线','切割']
cards:[]
}
},
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'
}
},
num: {
number: [randomExtend(300, 600)],
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: randomExtend(40, 60) }
],
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()
setInterval(this.createData, 30000)
}
}
</script>
<style scoped>
.ycl{
width: 1470px;
width: 1468px;
height: 342px;
background: url('../../../assets/kban/yclbg.png') no-repeat;
background-size: 100% 100%;
text-align: center;
flex: 1;
display: flex;
flex-direction: row;
margin-left: 1px;
.gxcl{
width: 278px;
height: 300px;
width: 298px;
height: 309px;
background: url('../../../assets/kban/yclbg.png') no-repeat;
background-size: 100% 100%;
@ -48,6 +141,72 @@ export default {
}
}
display: flex;
justify-content: space-between;
height: 45%;
.card-item {
background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5);
width: 19%;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
height: 20%;
align-items: center;
justify-content: space-between;
.card-header-left {
font-size: 18px;
font-weight: bold;
padding-left: 20px;
}
.card-header-right {
padding-right: 20px;
font-size: 40px;
color: #03d3ec;
}
}
.ring-charts {
height: 55%;
}
.card-footer {
height: 25%;
display: flex;
align-items: center;
justify-content: space-around;
}
.card-footer-item {
padding: 5px 10px 0px 10px;
box-sizing: border-box;
width: 40%;
background-color: rgba(6, 30, 93, 0.7);
border-radius: 3px;
.footer-title {
font-size: 15px;
margin-bottom: 5px;
}
.footer-detail {
font-size: 20px;
color: #1294fb;
display: flex;
font-size: 18px;
align-items: center;
.dv-digital-flop {
margin-right: 5px;
}
}
}
}
</style>

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

@ -1,12 +1,58 @@
<template>
<div class="chanlian">
<div class="chanlian__title">本月各垮产量(吨)</div>
<dv-scroll-ranking-board :config="config" />
</div>
</template>
<script>
export default {
name: "MainChanLian",
data () {
return {
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
}
}
}
}
</script>
@ -16,9 +62,13 @@ export default {
height: 688px;
background: url('../../../assets/kban/clbg.png') no-repeat;
background-size: 100% 100%;
margin-left: 41px;
margin-left: 62px;
text-align: center;
display: flex;
flex-direction: column;
padding: 0px 30px;
.chanlian__title{
width: 231px;
height: 41px;
@ -27,7 +77,19 @@ export default {
font-weight: bold;
font-size: 20px;
padding: 12px 26px;
margin-left: 71px;
margin-left: 41px;
}
.ranking-board-title {
font-weight: bold;
height: 10px;
display: flex;
align-items: center;
font-size: 20px;
}
.dv-scroll-ranking-board {
flex: 1;
}
}
</style>

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

@ -1,12 +1,35 @@
<template>
<div class="cq">
<div class="cq__title">出勤情况</div>
<div class="water-level-chart-details">
总人数<span>{{totalPerson}}</span>人
</div>
<div class="chart-container">
<dv-active-ring-chart :config="config" />
</div>
</div>
</template>
<script>
export default {
name:'Cq'
name:'Cq',
data () {
return {
totalPerson:300,
config: {
radius: '60%',
activeRadius: '63%',
data: [
{name:'出勤',value:296},
{name:'请假',value:2},
{name:'缺勤',value:2}
],
digitalFlopStyle: {
fontSize: 20
}
}
}
}
}
</script>
@ -16,7 +39,7 @@ export default {
height: 294px;
background: url('../../../assets/kban/cqbg.png') no-repeat;
background-size: 100% 100%;
margin-left: 41px;
margin-left: 62px;
margin-top: 14px;
text-align: center;
@ -30,5 +53,42 @@ export default {
padding: 12px 26px;
margin-left: 71px;
}
.water-level-chart-details {
height: 10%;
display: flex;
justify-content: center;
font-size: 17px;
align-items: flex-end;
span {
font-size: 30px;
font-weight: bold;
color: #58a1ff;
margin: 0 5px;
margin-bottom: -5px;
}
}
.chart-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.dv-active-ring-chart {
width: 300px;
height: 300px;
margin-top: -40px;
ellipse {
stroke: transparent !important;
}
text {
font-size: 40px;
}
}
}
</style>

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

@ -1,19 +1,65 @@
<template>
<div class="ycl">
<div class="ycl__title">各月份产量(吨)</div>
<dv-conical-column-chart :config="config" />
</div>
</template>
<script>
export default {
name:'MainGeYueChanLiang'
name:'MainGeYueChanLiang',
data(){
return {
config:{
showValue:true,
data: [
{
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
},
],
}
}
}
}
</script>
<style scoped>
.ycl{
width: 1070px;
height: 342px;
height: 378px;
background: url('../../../assets/kban/gyclbg.png') no-repeat;
background-size: 100% 100%;
text-align: center;
@ -28,6 +74,12 @@ export default {
padding: 12px 26px;
margin-left: 425px;
}
.dv-conical-column-chart{
width: 90%;
height: 308px;
padding: 0 50px 0 50px;
}
}
</style>

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

@ -1,23 +1,91 @@
<template>
<div class="ycl">
<div class="ycl__title">计划完成情况</div>
<div class="ycl__title">本月计划完成情况</div>
<div class="water-level-chart-details">
累计完成<span>6,800</span>吨
</div>
<div class="chart-container">
<dv-water-level-pond :config="config" />
</div>
</div>
</template>
<script>
export default {
name:'MainYueChanLiang'
name:'MainYueChanLiang',
data () {
return {
config: {
data: [45],
shape: 'round',
waveHeight: 25,
waveNum: 2
}
}
}
}
</script>
<style scoped>
.ycl{
width: 396px;
height: 342px;
width: 400px;
height: 378px;
background: url('../../../assets/kban/yclbg.png') no-repeat;
background-size: 100% 100%;
text-align: center;
border-top: 2px solid rgba(1, 153, 209, .5);
display: flex;
flex-direction: column;
.water-level-chart-title {
font-weight: bold;
height: 50px;
display: flex;
align-items: center;
font-size: 20px;
justify-content: center;
}
.water-level-chart-details {
height: 15%;
display: flex;
justify-content: center;
font-size: 17px;
align-items: flex-end;
span {
font-size: 35px;
font-weight: bold;
color: #58a1ff;
margin: 0 5px;
margin-bottom: -5px;
}
}
.chart-container {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.dv-water-pond-level {
max-width: 90%;
width: 240px;
height: 240px;
border: 10px solid #19c3eb;
border-radius: 50%;
ellipse {
stroke: transparent !important;
}
text {
font-size: 40px;
}
}
.ycl__title{
width: 231px;
height: 41px;

26
src/views/kban/comps/cards.vue
Unescape View File

@ -11,19 +11,19 @@
</div>
<dv-charts class="ring-charts" :option="card.ring" />
<div class="card-footer">
<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;" />张
</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;" />吨
</div>
</div>
</div>
<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;" />张
</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;" />吨
</div>
</div>
</div>
</div>
</div>
</template>

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

@ -2,17 +2,21 @@
<div id="data-view">
<dv-full-screen-container>
<top-header />
<!-- <Menu />-->
<Menu />
<div class="main-content">
<div class="block-top-bottom-content">
<Cq />
<MainVideo />
</div>
<div class="block-mid-bottom-content">
<div class="block-left-right-content">
<MainChanLian />
<MainYueChanLiang />
<MainGeYueChanLiang />
<MainGxChanLiang />
<div class="block-top-bottom-content1">
<div class="block-top-content">
<MainYueChanLiang />
<MainGeYueChanLiang />
</div>
<MainGxChanLiang />
</div>
</div>
</div>
</dv-full-screen-container>
@ -63,12 +67,30 @@ export default {
flex-direction: column;
}
.block-left-right-content {
flex: 1;
display: flex;
}
.block-top-bottom-content {
flex: 1;
display: flex;
flex-direction: row;
}
.block-top-bottom-content1 {
flex: 1;
display: flex;
flex-direction: column;
}
.block-top-content {
height: 55%;
display: flex;
flex-grow: 0;
box-sizing: border-box;
}
.block-mid-bottom-content {
flex: 1;
display: flex;

Write Preview
Loading…
Cancel
Save