自定义配置看板
This commit is contained in:
parent
60f3391260
commit
ab90362530
|
|
@ -5,8 +5,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import datav from './components/baozuo-demo/index.vue'
|
// import datav from './components/baozuo-demo/index.vue'
|
||||||
// import datav from './components/datav/index.vue'
|
// import datav from './components/datav/index.vue'
|
||||||
|
import datav from './components/zidingyi/index.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'app',
|
name: 'app',
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ const api = {
|
||||||
//永盛
|
//永盛
|
||||||
baseURL2: 'http://123.207.37.67:9001',
|
baseURL2: 'http://123.207.37.67:9001',
|
||||||
|
|
||||||
baseURL: '',
|
baseURL: 'http://36.139.158.169:9261',
|
||||||
|
|
||||||
get (url) {
|
get (url) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
|
|
||||||
|
|
@ -442,9 +442,11 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.row1-col1,.row1-col2,.row2-col1,.row2-col2{
|
.row1-col1,.row1-col2,.row1-col3,.row2-col1,.row2-col2,.row2-col3{
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.main-content {
|
.main-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<template>
|
||||||
|
<div id="bar-chart">
|
||||||
|
<div class="rose-chart-title" >ECharts 全局字体自适应</div>
|
||||||
|
<!-- <dv-charts :option="option" /> -->
|
||||||
|
<div id="bar-chart-container" ></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
export default {
|
||||||
|
|
||||||
|
name: 'barChart',
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
option: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
createData () {
|
||||||
|
var myChart = echarts.init(document.getElementById('bar-chart-container'));
|
||||||
|
this.option = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: 'bar'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
|
||||||
|
}
|
||||||
|
myChart.setOption(this.option);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const { createData } = this
|
||||||
|
|
||||||
|
createData()
|
||||||
|
|
||||||
|
setInterval(createData, 30000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#bar-chart {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
background-color: rgba(6, 30, 93, 0.5);
|
||||||
|
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.rose-chart-title {
|
||||||
|
height: 0.5rem;
|
||||||
|
padding-top: 0.1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-indent: 0.2rem;
|
||||||
|
// font-size: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bar-chart-container {
|
||||||
|
height: calc(~"100% - 0.5rem");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
<template>
|
||||||
|
<div id="cards">
|
||||||
|
<div
|
||||||
|
class="card-item"
|
||||||
|
v-for="(card, i) in cards"
|
||||||
|
:key="card.title"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-header-left">{{ card.title }}</div>
|
||||||
|
<div class="card-header-right">{{ '0' + (i + 1) }}</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Cards',
|
||||||
|
props: ['BottomData'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
cards: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createData () {
|
||||||
|
console.log('+++', this.BottomData)
|
||||||
|
this.cards = this.BottomData.map((foo, i) => ({
|
||||||
|
title: '-' + foo.name + '-上报完成率',
|
||||||
|
total: {
|
||||||
|
number: [foo.details.length],
|
||||||
|
content: '{nt}',
|
||||||
|
textAlign: 'right',
|
||||||
|
style: {
|
||||||
|
fill: '#ea6027',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
num: {
|
||||||
|
number: [foo.details.filter((item) => { return item.reportID }).length],
|
||||||
|
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: Math.floor((foo.details.filter((item) => { return item.reportID }).length / foo.details.length) * 100) }
|
||||||
|
],
|
||||||
|
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 lang="less">
|
||||||
|
#cards {
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,285 @@
|
||||||
|
<template>
|
||||||
|
<div id="digital-flop">
|
||||||
|
<h3 style="width: 8%;text-align:center;">今日任务</h3>
|
||||||
|
<div
|
||||||
|
class="digital-flop-item"
|
||||||
|
v-for="item in digitalFlopData"
|
||||||
|
:key="item.title"
|
||||||
|
>
|
||||||
|
<div class="digital-flop-title">{{ item.title }}</div>
|
||||||
|
<div class="digital-flop">
|
||||||
|
<dv-digital-flop
|
||||||
|
:config="item.number"
|
||||||
|
style="width:100px;height:50px;"
|
||||||
|
/>
|
||||||
|
<div class="unit">{{ item.unit }}</div>
|
||||||
|
<dv-digital-flop
|
||||||
|
:config="item.unNumber"
|
||||||
|
style="width:100px;height:50px;"
|
||||||
|
/>
|
||||||
|
<div class="unit">个事务项未上报</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dv-decoration-10 />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DigitalFlop',
|
||||||
|
props: ['TodayData', 'Type'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
digitalFlopData: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createData () {
|
||||||
|
// if (this.Type === 'dinner') {
|
||||||
|
// this.digitalFlopData = [
|
||||||
|
// {
|
||||||
|
// title: '早餐',
|
||||||
|
// number: {
|
||||||
|
// number: [this.TodayData.filter((item) => { return item.className === '早餐' && item.reportID }).length],
|
||||||
|
// content: '{nt}',
|
||||||
|
// textAlign: 'center',
|
||||||
|
// style: {
|
||||||
|
// fill: '#4d99fc',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// unNumber: {
|
||||||
|
// number: [this.TodayData.filter((item) => { return item.className === '早餐' && !item.reportID }).length],
|
||||||
|
// content: '{nt}',
|
||||||
|
// textAlign: 'center',
|
||||||
|
// style: {
|
||||||
|
// fill: '#B80000',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// unit: '个事务项已上报'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '午餐',
|
||||||
|
// number: {
|
||||||
|
// number: [this.TodayData.filter((item) => { return item.className === '午餐' && item.reportID }).length],
|
||||||
|
// content: '{nt}',
|
||||||
|
// textAlign: 'center',
|
||||||
|
// style: {
|
||||||
|
// fill: '#4d99fc',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// unNumber: {
|
||||||
|
// number: [this.TodayData.filter((item) => { return item.className === '午餐' && !item.reportID }).length],
|
||||||
|
// content: '{nt}',
|
||||||
|
// textAlign: 'center',
|
||||||
|
// style: {
|
||||||
|
// fill: '#B80000',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// unit: '个事务项已上报'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '晚餐',
|
||||||
|
// number: {
|
||||||
|
// number: [this.TodayData.filter((item) => { return item.className === '晚餐' && item.reportID }).length],
|
||||||
|
// content: '{nt}',
|
||||||
|
// textAlign: 'center',
|
||||||
|
// style: {
|
||||||
|
// fill: '#4d99fc',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// unNumber: {
|
||||||
|
// number: [this.TodayData.filter((item) => { return item.className === '晚餐' && !item.reportID }).length],
|
||||||
|
// content: '{nt}',
|
||||||
|
// textAlign: 'center',
|
||||||
|
// style: {
|
||||||
|
// fill: '#B80000',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// unit: '个事务项已上报'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '夜宵',
|
||||||
|
// number: {
|
||||||
|
// number: [this.TodayData.filter((item) => { return item.className === '夜宵' && item.reportID }).length],
|
||||||
|
// content: '{nt}',
|
||||||
|
// textAlign: 'center',
|
||||||
|
// style: {
|
||||||
|
// fill: '#4d99fc',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// unNumber: {
|
||||||
|
// number: [this.TodayData.filter((item) => { return item.className === '夜宵' && !item.reportID }).length],
|
||||||
|
// content: '{nt}',
|
||||||
|
// textAlign: 'center',
|
||||||
|
// style: {
|
||||||
|
// fill: '#B80000',
|
||||||
|
// fontWeight: 'bold'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// unit: '个事务项已上报'
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// } else if (this.Type === 'total') {
|
||||||
|
this.digitalFlopData = [
|
||||||
|
{
|
||||||
|
title: '早餐',
|
||||||
|
number: {
|
||||||
|
number: [this.TodayData.filter((item) => { return item.className === '早餐' && item.quantityDone }).length],
|
||||||
|
content: '{nt}',
|
||||||
|
textAlign: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#4d99fc',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unNumber: {
|
||||||
|
number: [this.TodayData.filter((item) => { return item.className === '早餐' && !item.quantityDone }).length],
|
||||||
|
content: '{nt}',
|
||||||
|
textAlign: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#B80000',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unit: '个事务项已上报'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '午餐',
|
||||||
|
number: {
|
||||||
|
number: [this.TodayData.filter((item) => { return item.className === '午餐' && item.quantityDone }).length],
|
||||||
|
content: '{nt}',
|
||||||
|
textAlign: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#4d99fc',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unNumber: {
|
||||||
|
number: [this.TodayData.filter((item) => { return item.className === '午餐' && !item.quantityDone }).length],
|
||||||
|
content: '{nt}',
|
||||||
|
textAlign: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#B80000',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unit: '个事务项已上报'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '晚餐',
|
||||||
|
number: {
|
||||||
|
number: [this.TodayData.filter((item) => { return item.className === '晚餐' && item.quantityDone }).length],
|
||||||
|
content: '{nt}',
|
||||||
|
textAlign: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#4d99fc',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unNumber: {
|
||||||
|
number: [this.TodayData.filter((item) => { return item.className === '晚餐' && !item.quantityDone }).length],
|
||||||
|
content: '{nt}',
|
||||||
|
textAlign: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#B80000',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unit: '个事务项已上报'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '夜宵',
|
||||||
|
number: {
|
||||||
|
number: [this.TodayData.filter((item) => { return item.className === '夜宵' && item.quantityDone }).length],
|
||||||
|
content: '{nt}',
|
||||||
|
textAlign: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#4d99fc',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unNumber: {
|
||||||
|
number: [this.TodayData.filter((item) => { return item.className === '夜宵' && !item.quantityDone }).length],
|
||||||
|
content: '{nt}',
|
||||||
|
textAlign: 'center',
|
||||||
|
style: {
|
||||||
|
fill: '#B80000',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unit: '个事务项已上报'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#digital-flop {
|
||||||
|
position: relative;
|
||||||
|
height: 15%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(6, 30, 93, 0.5);
|
||||||
|
|
||||||
|
.dv-decoration-10 {
|
||||||
|
position: absolute;
|
||||||
|
width: 95%;
|
||||||
|
left: 2.5%;
|
||||||
|
height: 5px;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.digital-flop-item {
|
||||||
|
width: 23%;
|
||||||
|
height: 80%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-left: 3px solid rgb(6, 30, 93);
|
||||||
|
border-right: 3px solid rgb(6, 30, 93);
|
||||||
|
}
|
||||||
|
|
||||||
|
.digital-flop-title {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.digital-flop {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit {
|
||||||
|
margin-left: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
|
|
@ -0,0 +1,21 @@
|
||||||
|
import BarChart from './barChart.vue'
|
||||||
|
import StackedBarChart from './barChart.vue'
|
||||||
|
import DynamicBarChart from './barChart.vue'
|
||||||
|
import PieChart from './roseChart.vue'
|
||||||
|
import RingChart from './roseChart.vue'
|
||||||
|
import RoseChart from './roseChart.vue'
|
||||||
|
import LineChart from './scrollBoard.vue'
|
||||||
|
import AreaChart from './scrollBoard.vue'
|
||||||
|
import StackedLineChart from './scrollBoard.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
BarChart,
|
||||||
|
StackedBarChart,
|
||||||
|
DynamicBarChart,
|
||||||
|
PieChart,
|
||||||
|
RingChart,
|
||||||
|
RoseChart,
|
||||||
|
LineChart,
|
||||||
|
AreaChart,
|
||||||
|
StackedLineChart
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,461 @@
|
||||||
|
<template>
|
||||||
|
<div id="data-view">
|
||||||
|
<!-- <dv-full-screen-container> -->
|
||||||
|
<div id="dv-full-screen-container" style="width: 100%;height: 100%;position: fixed;overflow: hidden;">
|
||||||
|
<top-header :Name = "showData.name" :Times = "showData.times"/>
|
||||||
|
<div class="main-content" v-if="loadingDone">
|
||||||
|
<!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
|
||||||
|
<div class="block-left-right-content">
|
||||||
|
<div class="row1-col1" :style="`width:${row1Style.width[0]}; height:${row1Style.height};`">
|
||||||
|
<div v-for="(rcitem,rcindex) in row1col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
|
||||||
|
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||||
|
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||||||
|
<div class="rankHeader" style="display: flex;">
|
||||||
|
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||||
|
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
|
||||||
|
</div>
|
||||||
|
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||||
|
<ul class="item" >
|
||||||
|
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||||
|
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||||
|
<div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll> -->
|
||||||
|
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||||||
|
</div>
|
||||||
|
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||||
|
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row1-col2" v-if="row1col2report.length>0" :style="`width:${row1Style.width[1]}; height:${row1Style.height};`">
|
||||||
|
<div v-for="(rcitem,rcindex) in row1col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
|
||||||
|
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||||
|
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||||||
|
<div class="rankHeader" style="display: flex;">
|
||||||
|
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||||
|
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
|
||||||
|
</div>
|
||||||
|
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}"> -->
|
||||||
|
<!-- <ul class="item">
|
||||||
|
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||||
|
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||||
|
<div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||||
|
</li>
|
||||||
|
</ul> -->
|
||||||
|
<!-- </vue-seamless-scroll> -->
|
||||||
|
|
||||||
|
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||||||
|
</div>
|
||||||
|
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||||
|
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row1-col3" v-if="row1col3report.length>0" :style="`width:${row1Style.width[2]}; height:${row1Style.height};`">
|
||||||
|
<!-- <div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
|
||||||
|
<template v-for="(item,index) in totalData">
|
||||||
|
<rose-chart :key="index" v-if="item.setting.reportType == 'pie'" :pieId="'roseChart'+index" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
|
||||||
|
<bar-chart :key="index" v-if="item.setting.reportType == 'bar'" style="height: 45%;" pieId="roseChart3" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
|
||||||
|
</template>
|
||||||
|
</div> -->
|
||||||
|
<div v-for="(rcitem,rcindex) in row1col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
|
||||||
|
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||||
|
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||||||
|
<div class="rankHeader" style="display: flex;">
|
||||||
|
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||||
|
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
|
||||||
|
</div>
|
||||||
|
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||||
|
<ul class="item" >
|
||||||
|
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||||
|
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||||
|
<div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="i in rankHeader1" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll> -->
|
||||||
|
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||||||
|
</div>
|
||||||
|
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||||
|
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row2-col1" v-if="row2col1report.length>0" :style="`width:${row2Style.width[0]}; height:${row2Style.height};margin-top: 0.1rem;`">
|
||||||
|
<div v-for="(rcitem,rcindex) in row2col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
|
||||||
|
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||||
|
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||||||
|
<div class="rankHeader" style="display: flex;">
|
||||||
|
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||||
|
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
|
||||||
|
</div>
|
||||||
|
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||||
|
<ul class="item" >
|
||||||
|
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||||
|
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||||
|
<div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll> -->
|
||||||
|
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||||||
|
</div>
|
||||||
|
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||||
|
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row2-col2" v-if="row2col2report.length>0" :style="`width:${row2Style.width[1]}; height:${row2Style.height};margin-top: 0.1rem;`">
|
||||||
|
<div v-for="(rcitem,rcindex) in row2col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
|
||||||
|
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||||
|
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||||||
|
<div class="rankHeader" style="display: flex;">
|
||||||
|
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||||
|
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
|
||||||
|
</div>
|
||||||
|
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||||
|
<ul class="item" >
|
||||||
|
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||||
|
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||||
|
<div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll> -->
|
||||||
|
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||||||
|
</div>
|
||||||
|
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||||
|
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row2-col3" v-if="row2col3report.length>0" :style="`width:${row2Style.width[2]}; height:${row2Style.height};margin-top: 0.1rem;`">
|
||||||
|
<div v-for="(rcitem,rcindex) in row2col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
|
||||||
|
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||||
|
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
|
||||||
|
<div class="rankHeader" style="display: flex;">
|
||||||
|
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||||
|
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
|
||||||
|
</div>
|
||||||
|
<!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||||
|
<ul class="item" >
|
||||||
|
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||||
|
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||||
|
<div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue-seamless-scroll> -->
|
||||||
|
<page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
|
||||||
|
</div>
|
||||||
|
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||||
|
<rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <scroll-board :ScrollList= "showData.scrollList" :ScrollWidth= "showData.scrollWidth" /> -->
|
||||||
|
|
||||||
|
<div class="block-top-bottom-content" style="flex: 1;"></div>
|
||||||
|
</div>
|
||||||
|
<!-- <scroll-board-bottom :ScrollList= "showData.scrollList2" :listName = "showData.listName2" /> -->
|
||||||
|
</div>
|
||||||
|
<dv-loading v-else>Loading...</dv-loading>
|
||||||
|
<!-- </dv-full-screen-container> -->
|
||||||
|
</div>
|
||||||
|
<div id="dv-full-screen-container2" v-if="showNotices" style="height: 100vh;width: 100vw;position: fixed;top: 0;left: 0;z-index: 9999;">
|
||||||
|
<p v-if="notices.length>0" style="font-size: 0.6rem;margin: 0;padding: 0.2rem; text-align: center;font-weight: bold;">{{ notices[0].title }}</p>
|
||||||
|
<div class="inner-content" v-if="notices.length>0" style="font-size: 0.4rem;margin: 0;padding: 0.2rem;white-space: pre-wrap;" v-html="notices[0].content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import topHeader from './topHeader'
|
||||||
|
// import digitalFlop from './digitalFlop'
|
||||||
|
import rankingBoard from './rankingBoard'
|
||||||
|
import roseChart from './roseChart'
|
||||||
|
import waterLevelChart from './waterLevelChart'
|
||||||
|
import scrollBoard from './scrollBoard'
|
||||||
|
import scrollBoardBottom from './scrollBoardBottom'
|
||||||
|
import cards from './cards'
|
||||||
|
import rightTotal from './rightTotal.vue'
|
||||||
|
import barChart from './barChart.vue'
|
||||||
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||||
|
import pageRank from './pageRank.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DataView',
|
||||||
|
components: {
|
||||||
|
topHeader,
|
||||||
|
// digitalFlop,
|
||||||
|
rankingBoard,
|
||||||
|
roseChart,
|
||||||
|
waterLevelChart,
|
||||||
|
scrollBoard,
|
||||||
|
scrollBoardBottom,
|
||||||
|
cards,
|
||||||
|
rightTotal,
|
||||||
|
barChart,
|
||||||
|
vueSeamlessScroll,
|
||||||
|
pageRank
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
Aid: '',
|
||||||
|
type: '',
|
||||||
|
setting: {},
|
||||||
|
totalData: [],
|
||||||
|
todayData: [],
|
||||||
|
notices: [],
|
||||||
|
showNotices:false,
|
||||||
|
showData: {
|
||||||
|
name: '',
|
||||||
|
times: [],
|
||||||
|
leftData: [],
|
||||||
|
reportedList: [],
|
||||||
|
scrollList: [],
|
||||||
|
scrollWidth: '20%',
|
||||||
|
scrollList2: [],
|
||||||
|
listName2:'',
|
||||||
|
todayData: [],
|
||||||
|
bottomData: [],
|
||||||
|
allNum: 0,
|
||||||
|
reportedNum: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
reportSettings:[],
|
||||||
|
rankHeader1:[],
|
||||||
|
rankHeader2:[],
|
||||||
|
rankHeader3:[],
|
||||||
|
row1Style:{
|
||||||
|
height:'65%',
|
||||||
|
width:['25%','50%','25%'],
|
||||||
|
},
|
||||||
|
row1col1report:[],
|
||||||
|
row1col2report:[],
|
||||||
|
row1col3report:[],
|
||||||
|
row2col1report:[],
|
||||||
|
row2col2report:[],
|
||||||
|
row2col3report:[],
|
||||||
|
row2Style:{
|
||||||
|
height:'35%',
|
||||||
|
width:['100%','0%', '0%'],
|
||||||
|
},
|
||||||
|
loadingDone: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created (e) {
|
||||||
|
console.log(window.location.href.split('?')[1])
|
||||||
|
let params = window.location.href.split('?')[1];
|
||||||
|
let Aid = params.split('=')[1];
|
||||||
|
this.Aid = Aid;
|
||||||
|
this.createdData(Aid)
|
||||||
|
let that = this;
|
||||||
|
setInterval(()=>{
|
||||||
|
that.createdData(Aid)
|
||||||
|
}, 900000)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createdData (Aid) {
|
||||||
|
let that = this
|
||||||
|
that.loadingDone = false;
|
||||||
|
this.row1col1report = [];
|
||||||
|
this.row1col2report = [];
|
||||||
|
this.row1col3report = [];
|
||||||
|
this.row2col1report = [];
|
||||||
|
this.row2col2report = [];
|
||||||
|
this.row2col3report = [];
|
||||||
|
that.showNotices = false;
|
||||||
|
this.$api.post2('/api/web/GetScreenReport?category='+Aid).then(res => {
|
||||||
|
if (res.code === '200') {
|
||||||
|
let data = res.data;
|
||||||
|
const input = data.setting.dataJson;
|
||||||
|
// 1. 移除所有换行和空格
|
||||||
|
const cleanedStr = input.replace(/\s/g, ''); // 结果: "{row1Style:{height:"65%",width:["25%","50%","25%"],},row2Style:{height:"35%",width:["100%","0%","0%"],},}"
|
||||||
|
|
||||||
|
// 2. 手动转换为合法JSON格式
|
||||||
|
const jsonStr = cleanedStr
|
||||||
|
// 给键添加双引号（例如 row1Style → "row1Style"）
|
||||||
|
.replace(/(\w+):/g, '"$1":')
|
||||||
|
// 修复尾部多余的逗号（例如 },} → }}）
|
||||||
|
.replace(/,}/g, '}')
|
||||||
|
.replace(/,]/g, ']');
|
||||||
|
|
||||||
|
// 3. 解析为对象
|
||||||
|
const parsed = JSON.parse(jsonStr);
|
||||||
|
|
||||||
|
// 4. 提取目标属性
|
||||||
|
const { row1Style, row2Style } = parsed;
|
||||||
|
this.row1Style = row1Style;
|
||||||
|
this.row2Style = row2Style;
|
||||||
|
|
||||||
|
this.reportSettings = data.reportSettings;
|
||||||
|
this.notices = data.notices;
|
||||||
|
// console.log(data.notices.length>0 , data.notices[0].starttime , data.notices[0].Endtime)
|
||||||
|
if(data.notices.length>0 && data.notices[0].starttime && data.notices[0].Endtime){
|
||||||
|
let nowtimestamp = new Date().getTime();
|
||||||
|
let starttimestamp = new Date(this.notices[0].starttime).getTime();
|
||||||
|
let endtimestamp = new Date(this.notices[0].Endtime).getTime();
|
||||||
|
console.log(nowtimestamp, starttimestamp, endtimestamp)
|
||||||
|
if(nowtimestamp>=starttimestamp && nowtimestamp<=endtimestamp){
|
||||||
|
this.showNotices = true;
|
||||||
|
}else{
|
||||||
|
this.showNotices = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(data.reportSettings.length>0){
|
||||||
|
data.reportSettings.forEach(item=>{
|
||||||
|
if(item.columns.length>0){
|
||||||
|
item.columns.sort((a,b) => a.sort - b.sort)
|
||||||
|
}
|
||||||
|
if(item.setting.rowNumber==1 && item.setting.columnNumber==1){
|
||||||
|
this.row1col1report.push(item)
|
||||||
|
}
|
||||||
|
if(item.setting.rowNumber==1 && item.setting.columnNumber==2){
|
||||||
|
this.row1col2report.push(item)
|
||||||
|
}
|
||||||
|
if(item.setting.rowNumber==1 && item.setting.columnNumber==3){
|
||||||
|
this.row1col3report.push(item)
|
||||||
|
}
|
||||||
|
if(item.setting.rowNumber==2 && item.setting.columnNumber==1){
|
||||||
|
this.row2col1report.push(item)
|
||||||
|
}
|
||||||
|
if(item.setting.rowNumber==2 && item.setting.columnNumber==2){
|
||||||
|
this.row2col2report.push(item)
|
||||||
|
}
|
||||||
|
if(item.setting.rowNumber==2 && item.setting.columnNumber==3){
|
||||||
|
this.row2col3report.push(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showData.name = data.setting.name;
|
||||||
|
this.loadingDone = true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getToday () {
|
||||||
|
var today = new Date() // 创建一个表示当前时间的Date对象
|
||||||
|
var year = today.getFullYear() // 获取当前年份（四位数）
|
||||||
|
var month = today.getMonth() + 1 // 获取当前月份（注意月份从0开始计算，所以需要加上1）
|
||||||
|
var day = today.getDate() // 获取当前日期
|
||||||
|
return year + '-' + month + '-' + day
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#data-view {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #030409;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
#dv-full-screen-container,#dv-full-screen-container2{
|
||||||
|
background-image: url('./img/bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
box-shadow: 0 0 3px blue;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.row1-col1,.row1-col2,.row1-col3,.row2-col1,.row2-col2,.row2-col3{
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.main-content {
|
||||||
|
flex: 1;
|
||||||
|
height: calc(100% - 1rem);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-left-right-content {
|
||||||
|
// flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-top-bottom-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-top-content {
|
||||||
|
height: 55%;
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.rankHeader{
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
p{
|
||||||
|
margin: 0;
|
||||||
|
height: 0.5rem;
|
||||||
|
line-height: 0.5rem;
|
||||||
|
background-color: #1e80ff;
|
||||||
|
&:last-child{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.warp {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
li,a {
|
||||||
|
display: block;
|
||||||
|
// height: 0.5rem;
|
||||||
|
line-height: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
}
|
||||||
|
.rowStyle1{
|
||||||
|
background-color: rgba(10, 29, 50, 0.8);
|
||||||
|
}
|
||||||
|
.rowStyle2{
|
||||||
|
background-color: rgba(0, 44, 81, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#dv-full-screen-container2 .inner-content{
|
||||||
|
p{
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.inner-content{
|
||||||
|
h1,h2,h3{margin:0;}
|
||||||
|
h1{font-size: 1rem;}
|
||||||
|
h2{font-size: 0.6rem;}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<div class="warp" :id="warpId" style="height: calc(100% - 0.9rem);">
|
||||||
|
<ul class="item warpItem">
|
||||||
|
<li v-for="(item, index) in showData" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||||
|
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||||
|
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{item.seq}}</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
rcitem:{},
|
||||||
|
warpId:'',
|
||||||
|
pageSize:0,
|
||||||
|
switchSpeed:0,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nowPgae:0,
|
||||||
|
showData:[],
|
||||||
|
allData:[],
|
||||||
|
timer:null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
console.log('mounted')
|
||||||
|
this.rcitem.data.forEach((item,index) => {
|
||||||
|
item.seq = index+1;
|
||||||
|
})
|
||||||
|
for(let i=0;i<this.rcitem.data.length;i += this.pageSize){
|
||||||
|
this.allData.push(this.rcitem.data.slice(i,i+this.pageSize));
|
||||||
|
}
|
||||||
|
// this.allData = this.rcitem.data;
|
||||||
|
// let warpbox = window.document.querySelector('#'+this.warpId);
|
||||||
|
// let warpItem = window.document.querySelector('#'+this.warpId+' .warpItem');
|
||||||
|
// let warpboxHeight = warpbox.clientHeight;
|
||||||
|
// let warpItemHeight = warpItem.clientHeight;
|
||||||
|
let warpPageNumber = this.allData.length;
|
||||||
|
let that = this;
|
||||||
|
that.showData = that.allData[0];
|
||||||
|
if(warpPageNumber>1){
|
||||||
|
this.timer = setInterval(()=>{
|
||||||
|
// that.pageNext(warpItem,warpPageNumber,warpboxHeight);
|
||||||
|
that.pageNext(warpPageNumber)
|
||||||
|
},this.switchSpeed*1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
pageNext(allPage){
|
||||||
|
if(this.nowPgae<(allPage-1)){
|
||||||
|
// Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
|
||||||
|
this.nowPgae++;
|
||||||
|
this.showData = this.allData[this.nowPgae];
|
||||||
|
|
||||||
|
}else{
|
||||||
|
this.nowPgae = 0;
|
||||||
|
this.showData = this.allData[this.nowPgae];
|
||||||
|
// Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy(){
|
||||||
|
console.log('beforeUnmount')
|
||||||
|
clearInterval(this.timer)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.warp {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
li,a {
|
||||||
|
display: block;
|
||||||
|
// height: 0.5rem;
|
||||||
|
line-height: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
}
|
||||||
|
.rowStyle1{
|
||||||
|
background-color: rgba(10, 29, 50, 0.8);
|
||||||
|
}
|
||||||
|
.rowStyle2{
|
||||||
|
background-color: rgba(0, 44, 81, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<template>
|
||||||
|
<div id="ranking-board">
|
||||||
|
<div class="ranking-board-title">{{Type === 'total'?'各个学校事务项':'事务项'}}上报数量</div>
|
||||||
|
<dv-scroll-ranking-board :config="config" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'RankingBoard',
|
||||||
|
props: ['LeftData', 'Type'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
data: [ ],
|
||||||
|
rowNum: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
if (this.Type === 'dinner') {
|
||||||
|
this.config.data = this.LeftData.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.name,
|
||||||
|
value: item.details.length
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.Type === 'total') {
|
||||||
|
this.config.data = this.LeftData.map((item) => {
|
||||||
|
return {
|
||||||
|
name: item.dinnerName,
|
||||||
|
value: item.quantityDone
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#ranking-board {
|
||||||
|
width: 20%;
|
||||||
|
box-shadow: 0 0 3px blue;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(6, 30, 93, 0.5);
|
||||||
|
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0px 30px;
|
||||||
|
|
||||||
|
.ranking-board-title {
|
||||||
|
font-weight: bold;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-scroll-ranking-board {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<template>
|
||||||
|
<div id="right-total">
|
||||||
|
<div class="right-total-title">{{Type === 'total'?'各个学校事务项':'事务项'}}上报情况</div>
|
||||||
|
<div class="right-total-item" v-for= "item in rightData" :key="item.id">
|
||||||
|
<p>{{ item.name }} 上报率</p>
|
||||||
|
<dv-percent-pond :config="item.config" style="width:300px;height:60px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'RankingBoard',
|
||||||
|
props: ['LeftData', 'Type'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
data: [ ],
|
||||||
|
rowNum: 10
|
||||||
|
},
|
||||||
|
rightData: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.rightData = this.LeftData.map((item) => {
|
||||||
|
return {
|
||||||
|
id: item.ID,
|
||||||
|
name: item.dinnerName,
|
||||||
|
value: item.quantityDone,
|
||||||
|
config: {
|
||||||
|
value: Math.floor((item.quantityDone / item.quantity) * 100),
|
||||||
|
borderWidth: 5,
|
||||||
|
borderRadius: 10,
|
||||||
|
borderGap: 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.rightData.sort((a, b) => b.config.value - a.config.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#right-total {
|
||||||
|
width: 50%;
|
||||||
|
box-shadow: 0 0 3px blue;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(6, 30, 93, 0.5);
|
||||||
|
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0px 30px;
|
||||||
|
|
||||||
|
.right-total-title {
|
||||||
|
font-weight: bold;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-scroll-ranking-board {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.right-total-item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
p{
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
<template>
|
||||||
|
<div id="rose-chart">
|
||||||
|
<div class="rose-chart-title">---{{chartData?chartData.title:''}}---</div>
|
||||||
|
<div :id="pieId" class="pie-chart-container"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
export default {
|
||||||
|
name: 'RoseChart',
|
||||||
|
props:{
|
||||||
|
pieId:{
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
chartData:{
|
||||||
|
type:Object,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
option: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createData () {
|
||||||
|
|
||||||
|
var myChart = echarts.init(document.getElementById(this.pieId));
|
||||||
|
this.option = {
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'horizontal',
|
||||||
|
left: this.$fontSize(0.2),
|
||||||
|
top:this.$fontSize(0.1),
|
||||||
|
itemWidth: this.$fontSize(0.25),
|
||||||
|
itemHeight: this.$fontSize(0.14),
|
||||||
|
// height: this.$fontSize(0.2),
|
||||||
|
textStyle:{
|
||||||
|
color:'fff',
|
||||||
|
fontSize:this.$fontSize(0.12)
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '数据详情',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: this.chartData.data,
|
||||||
|
emphasis: {
|
||||||
|
textStyle: {
|
||||||
|
color: 'rgba(0,0,0,0)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize:this.$fontSize(0.12),
|
||||||
|
formatter: '{b}: {d}%'
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
myChart.setOption(this.option);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
console.log(this.pieId)
|
||||||
|
const { createData } = this
|
||||||
|
|
||||||
|
createData()
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#rose-chart {
|
||||||
|
// width: 33.33%;
|
||||||
|
// height: 55%;
|
||||||
|
background-color: rgba(6, 30, 93, 0.5);
|
||||||
|
border-top: 2px solid rgba(1, 153, 209, .5);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.rose-chart-title {
|
||||||
|
height: 0.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
text-indent: 0.2rem;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pie-chart-container {
|
||||||
|
height: calc(100% - 0.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<div id="scroll-board" :style="`width:${ScrollWidth}`">
|
||||||
|
<dv-scroll-board :config="config" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ScrollBoard',
|
||||||
|
props: ['ScrollList','ScrollWidth'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
rankName:'rank1',
|
||||||
|
header: ['员工', '工序', '上报量'],
|
||||||
|
data: [
|
||||||
|
],
|
||||||
|
index: true,
|
||||||
|
columnWidth: [100, 150, 200],
|
||||||
|
align: ['center', 'center', 'center', 'center'],
|
||||||
|
rowNum: 12,
|
||||||
|
headerBGC: '#1981f6',
|
||||||
|
headerHeight: 50,
|
||||||
|
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
|
||||||
|
evenRowBGC: 'rgba(10, 29, 50, 0.8)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
console.log(this.ScrollList)
|
||||||
|
this.config.headerHeight = this.$fontSize(0.50);
|
||||||
|
this.config.columnWidth = [this.$fontSize(0.75),this.$fontSize(1),this.$fontSize(2)];
|
||||||
|
this.config.data = JSON.parse(JSON.stringify(this.ScrollList))
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
// let arr = document.getElementsByClassName('dv-scroll-board');
|
||||||
|
// console.log(arr)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#scroll-board {
|
||||||
|
//width:25%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 0.2rem;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.dv-scroll-board .header{
|
||||||
|
font-size: 0.2rem !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
.dv-scroll-board .rows .row-item{
|
||||||
|
font-size: 0.2rem !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<div id="scroll-board-bottom">
|
||||||
|
<p style="width: 100%;text-align: center;font-size: 0.25rem;font-weight: bold;height: 0.4rem;line-height: 0.4rem;margin: 0;"> {{listName}}</p>
|
||||||
|
<dv-scroll-board :config="config" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ScrollBoard',
|
||||||
|
props: ['ScrollList','listName'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
header: ['业务订单号', '产品名', '总布产数','合格数','合格率','不良数','不良率','废品数','废品率','最迟货期'],
|
||||||
|
data: [
|
||||||
|
],
|
||||||
|
index: true,
|
||||||
|
columnWidth: [100],
|
||||||
|
align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center','center'],
|
||||||
|
rowNum: 5,
|
||||||
|
headerBGC: '#1981f6',
|
||||||
|
headerHeight: 50,
|
||||||
|
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
|
||||||
|
evenRowBGC: 'rgba(10, 29, 50, 0.8)',
|
||||||
|
carousel:'page',
|
||||||
|
waitTime:'4000',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.config.headerHeight = this.$fontSize(0.50);
|
||||||
|
this.config.columnWidth = [this.$fontSize(1),this.$fontSize(2.5),this.$fontSize(5),this.$fontSize(2),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(2)];
|
||||||
|
this.config.data = JSON.parse(JSON.stringify(this.ScrollList))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#scroll-board-bottom {
|
||||||
|
width:100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding:0.2rem;
|
||||||
|
height: calc(35% - 0.3rem);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
#scroll-board-bottom .dv-scroll-board{
|
||||||
|
height: calc(100% - 0.3rem);
|
||||||
|
}
|
||||||
|
.dv-scroll-board .header{
|
||||||
|
font-size: 0.2rem !important;
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
.dv-scroll-board .rows .row-item{
|
||||||
|
font-size: 0.2rem !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<div id="top-header">
|
||||||
|
<dv-decoration-8 class="header-left-decoration" />
|
||||||
|
<!-- <dv-decoration-5 class="header-center-decoration" /> -->
|
||||||
|
<dv-decoration-8 class="header-right-decoration" :reverse="false" />
|
||||||
|
<div class="center-title" :style="'font-size:'+$fontSize(0.3)+'px'">{{Name}}</div>
|
||||||
|
<!-- ({{ Times[0]+ ' 到 ' +Times[1] }}) -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'TopHeader',
|
||||||
|
props: ['Name', 'Times']
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#top-header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
// height: 1rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.header-center-decoration {
|
||||||
|
width: 40%;
|
||||||
|
height: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left-decoration, .header-right-decoration {
|
||||||
|
width: 25%;
|
||||||
|
height: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-title {
|
||||||
|
position: absolute;
|
||||||
|
// font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
left: 50%;
|
||||||
|
top: 0.15rem;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<template>
|
||||||
|
<div id="water-level-chart">
|
||||||
|
<div class="water-level-chart-title">{{ Times[0]+ ' 到 ' +Times[1] }}事务项上报情况</div>
|
||||||
|
|
||||||
|
<div class="water-level-chart-details">
|
||||||
|
共<span>{{AllNum}}</span>个事务项，累计上报<span>{{ReportedNum}}</span>个事务项
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-container">
|
||||||
|
<dv-water-level-pond :config="config" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'WaterLevelChart',
|
||||||
|
props: ['Times', 'AllNum', 'ReportedNum'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
data: [],
|
||||||
|
shape: 'round',
|
||||||
|
waveHeight: 25,
|
||||||
|
waveNum: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.config.data = [Math.floor((this.ReportedNum / this.AllNum) * 100)]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#water-level-chart {
|
||||||
|
width: 46%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 20px;
|
||||||
|
background-color: rgba(6, 30, 93, 0.5);
|
||||||
|
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: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border: 10px solid #19c3eb;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
ellipse {
|
||||||
|
stroke: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue