自定义配置看板
This commit is contained in:
parent
60f3391260
commit
ab90362530
|
|
@ -5,8 +5,9 @@
|
|||
</template>
|
||||
|
||||
<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/zidingyi/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const api = {
|
|||
//永盛
|
||||
baseURL2: 'http://123.207.37.67:9001',
|
||||
|
||||
baseURL: '',
|
||||
baseURL: 'http://36.139.158.169:9261',
|
||||
|
||||
get (url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
|
|||
|
|
@ -442,9 +442,11 @@ export default {
|
|||
display: flex;
|
||||
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;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.main-content {
|
||||
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