大屏幕
This commit is contained in:
parent
dba30df020
commit
7ff319e4e7
|
|
@ -0,0 +1,2 @@
|
||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
[*.{js,jsx,ts,tsx,vue}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/essential',
|
||||||
|
'@vue/standard'
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
parser: 'babel-eslint'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,13 +1,21 @@
|
||||||
# ---> AL
|
.DS_Store
|
||||||
.vscode/*
|
node_modules
|
||||||
!.vscode/settings.json
|
/dist
|
||||||
!.vscode/tasks.json
|
|
||||||
!.vscode/launch.json
|
|
||||||
!.vscode/extensions.json
|
|
||||||
*.code-workspace
|
|
||||||
|
|
||||||
# Local History for Visual Studio Code
|
# local env files
|
||||||
.history/
|
.env.local
|
||||||
*.app
|
.env.*.local
|
||||||
.snapshots/*
|
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
|
||||||
17
README.md
17
README.md
|
|
@ -1,3 +1,16 @@
|
||||||
# GScreenWEB_TPMes
|
<h1 align="center">Construction-Data</h1>
|
||||||
|
|
||||||
GScreenWEB_TPMes
|
## Project setup
|
||||||
|
```
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
yarn run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
yarn run build
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/app'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "adev",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@jiaminghi/data-view": "^2.4.4",
|
||||||
|
"axios": "^1.6.2",
|
||||||
|
"less": "^3.9.0",
|
||||||
|
"less-loader": "^5.0.0",
|
||||||
|
"vue": "^2.6.10"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^3.8.0",
|
||||||
|
"@vue/cli-plugin-eslint": "^3.8.0",
|
||||||
|
"@vue/cli-service": "^3.8.0",
|
||||||
|
"@vue/eslint-config-standard": "^4.0.0",
|
||||||
|
"babel-eslint": "^10.0.1",
|
||||||
|
"eslint": "^5.16.0",
|
||||||
|
"eslint-plugin-vue": "^5.0.0",
|
||||||
|
"vue-template-compiler": "^2.6.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title>数据展示</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but adev doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<datav />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import datav from './components/datav/index.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'app',
|
||||||
|
components: {
|
||||||
|
datav
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#app {
|
||||||
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
color: #2c3e50;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const api = {
|
||||||
|
// 定义API接口地址
|
||||||
|
// baseURL: process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/',
|
||||||
|
// GET请求示例
|
||||||
|
baseURL: 'http://39.99.224.120:9196',
|
||||||
|
baseURL2: 'http://123.207.37.67:9001',
|
||||||
|
get (url) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
axios({
|
||||||
|
method: 'get',
|
||||||
|
url: this.baseURL + url
|
||||||
|
})
|
||||||
|
.then(response => resolve(response))
|
||||||
|
.catch(error => reject(error))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// POST请求示例
|
||||||
|
post (url, data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
axios({
|
||||||
|
method: 'post',
|
||||||
|
url: this.baseURL + url,
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
.then(response => resolve(response.data))
|
||||||
|
.catch(error => reject(error))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// POST请求示例
|
||||||
|
post2 (url, data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
axios({
|
||||||
|
method: 'post',
|
||||||
|
url: this.baseURL2 + url,
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
.then(response => resolve(response.data))
|
||||||
|
.catch(error => reject(error))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default api
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
@ -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,229 @@
|
||||||
|
<template>
|
||||||
|
<div id="data-view">
|
||||||
|
<dv-full-screen-container>
|
||||||
|
|
||||||
|
<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" >
|
||||||
|
<ranking-board :LeftData = "showData.leftData" :Type="type" />
|
||||||
|
<div class="block-top-bottom-content">
|
||||||
|
<div class="block-top-content" :style="{height:type==='dinner'?'55%':'100%',paddingBottom:type==='dinner'?'20px':'0'}">
|
||||||
|
<rose-chart v-if="false"/>
|
||||||
|
|
||||||
|
<water-level-chart :AllNum= "showData.allNum" :ReportedNum= "showData.reportedNum" :Times = "showData.times" :Type = "type"/>
|
||||||
|
|
||||||
|
<scroll-board :ScrollList= "showData.scrollList" v-if="type === 'dinner'"/>
|
||||||
|
<rightTotal :LeftData = "showData.leftData" v-if="type === 'total'" :Type="type"></rightTotal>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<cards v-if="type === 'dinner'" :BottomData="showData.bottomData"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<dv-loading v-else>Loading...</dv-loading>
|
||||||
|
</dv-full-screen-container>
|
||||||
|
</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 cards from './cards'
|
||||||
|
import rightTotal from './rightTotal.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DataView',
|
||||||
|
components: {
|
||||||
|
topHeader,
|
||||||
|
digitalFlop,
|
||||||
|
rankingBoard,
|
||||||
|
roseChart,
|
||||||
|
waterLevelChart,
|
||||||
|
scrollBoard,
|
||||||
|
cards,
|
||||||
|
rightTotal
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
type: '',
|
||||||
|
setting: {},
|
||||||
|
dinnerData: {
|
||||||
|
classFullData: [],
|
||||||
|
classList: [],
|
||||||
|
daysDetails: [],
|
||||||
|
details: [],
|
||||||
|
searchParms: [],
|
||||||
|
workItemFullData: [],
|
||||||
|
workItemList: []
|
||||||
|
},
|
||||||
|
totalData: {},
|
||||||
|
todayData: [],
|
||||||
|
showData: {
|
||||||
|
name: '',
|
||||||
|
times: [],
|
||||||
|
leftData: [],
|
||||||
|
reportedList: [],
|
||||||
|
scrollList: [],
|
||||||
|
todayData: [],
|
||||||
|
bottomData: [],
|
||||||
|
allNum: 0,
|
||||||
|
reportedNum: 0
|
||||||
|
},
|
||||||
|
loadingDone: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.createdData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createdData () {
|
||||||
|
let that = this
|
||||||
|
|
||||||
|
this.$api.post2('/api/web/GetScreenReport');
|
||||||
|
|
||||||
|
this.$api.post('/api/PG/GetScreenReport').then(res => {
|
||||||
|
if (res.code === '200') {
|
||||||
|
let data = res.data
|
||||||
|
if (that.type !== data.type) {
|
||||||
|
that.loadingDone = false
|
||||||
|
that.type = data.type
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
// 如果是更换页面则添加loading
|
||||||
|
if (data.type === 'dinner') {
|
||||||
|
that.dinnerData = data.dinnerData
|
||||||
|
that.setting = data.setting
|
||||||
|
that.showData.todayData = data.todayData.details.filter((item) => {
|
||||||
|
return item.dinnerID === that.dinnerData.searchParms.dinnerID
|
||||||
|
})
|
||||||
|
that.dinnerDataFomat()
|
||||||
|
} else if (data.type === 'total') {
|
||||||
|
that.totalData = data.totalData
|
||||||
|
that.showData.todayData = data.todayData.details
|
||||||
|
that.setting = data.setting
|
||||||
|
that.totalDataFomat()
|
||||||
|
}
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.createdData();
|
||||||
|
|
||||||
|
},1000);
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
dinnerDataFomat () {
|
||||||
|
this.showData.name = this.setting.dinnerName
|
||||||
|
this.showData.times = [this.setting.starttime, this.setting.endtime]
|
||||||
|
this.showData.allNum = this.dinnerData.details.length
|
||||||
|
// 深拷贝 并且 往对象里添加detail
|
||||||
|
this.showData.leftData = JSON.parse(JSON.stringify(this.dinnerData.workItemFullData))
|
||||||
|
this.showData.leftData.forEach(item => { item.details = [] })
|
||||||
|
this.showData.bottomData = JSON.parse(JSON.stringify(this.showData.leftData))
|
||||||
|
// 获取已上报数据列表
|
||||||
|
let reportedList = this.dinnerData.details.filter((item) => {
|
||||||
|
return item.reportID
|
||||||
|
})
|
||||||
|
// 右侧轮播列表
|
||||||
|
this.showData.scrollList = reportedList.map((item) => {
|
||||||
|
return [item.reportDate, item.className, item.workItemName, item.reportEmployeeName]
|
||||||
|
})
|
||||||
|
this.showData.reportedNum = this.showData.scrollList.length
|
||||||
|
// 一维数组 转换为 二维数组
|
||||||
|
// let categoryList = Object.values(reportedList.reduce((res, item) => {
|
||||||
|
// res[item.workItemID] ? res[item.workItemID].push(item) : res[item.workItemID] = [item]
|
||||||
|
// return res
|
||||||
|
// }, {}))
|
||||||
|
// console.log(categoryList, this.showData.leftData, '+++++++++')
|
||||||
|
reportedList.forEach((item, index) => {
|
||||||
|
this.showData.leftData.forEach((i, idx) => {
|
||||||
|
if (item.workItemID === i.ID) {
|
||||||
|
i.details.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.dinnerData.details.forEach((item, index) => {
|
||||||
|
this.showData.bottomData.forEach((i, idx) => {
|
||||||
|
if (item.workItemID === i.ID) {
|
||||||
|
i.details.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.loadingDone = true
|
||||||
|
},
|
||||||
|
totalDataFomat () {
|
||||||
|
this.showData.name = '各个食堂运营情况总结'
|
||||||
|
this.showData.allNum = 0
|
||||||
|
this.showData.reportedNum = 0
|
||||||
|
this.showData.times = [this.setting.starttime, this.setting.endtime]
|
||||||
|
this.showData.leftData = this.totalData.total.filter(item => {
|
||||||
|
return !!item.dinnerName
|
||||||
|
})
|
||||||
|
this.totalData.total.forEach((item) => {
|
||||||
|
this.showData.allNum += item.quantity
|
||||||
|
this.showData.reportedNum += item.quantityDone
|
||||||
|
})
|
||||||
|
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 {
|
||||||
|
background-image: url('./img/bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
box-shadow: 0 0 3px blue;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-left-right-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-top-bottom-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-top-content {
|
||||||
|
height: 55%;
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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,95 @@
|
||||||
|
<template>
|
||||||
|
<div id="rose-chart">
|
||||||
|
<div class="rose-chart-title">累计计量资金分布</div>
|
||||||
|
<dv-charts :option="option" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'RoseChart',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
option: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createData () {
|
||||||
|
const { randomExtend } = this
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
roseSort: false,
|
||||||
|
data: [
|
||||||
|
{ name: '路基', value: randomExtend(40, 70) },
|
||||||
|
{ name: '交安设施', value: randomExtend(20, 30) },
|
||||||
|
{ name: '日常养护', value: randomExtend(10, 50) },
|
||||||
|
{ name: '桥通', value: randomExtend(5, 20) },
|
||||||
|
{ name: '交通事故', value: randomExtend(40, 50) },
|
||||||
|
{ name: '路面', value: randomExtend(20, 30) },
|
||||||
|
{ name: '绿化', value: randomExtend(5, 10) },
|
||||||
|
{ name: '计日工', value: randomExtend(20, 35) },
|
||||||
|
{ name: '除雪', value: randomExtend(5, 10) }
|
||||||
|
],
|
||||||
|
insideLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
outsideLabel: {
|
||||||
|
formatter: '{name} {percent}%',
|
||||||
|
labelLineEndLength: 20,
|
||||||
|
style: {
|
||||||
|
fill: '#fff'
|
||||||
|
},
|
||||||
|
labelLineStyle: {
|
||||||
|
stroke: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
roseType: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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(createData, 30000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#rose-chart {
|
||||||
|
width: 30%;
|
||||||
|
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: 50px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-indent: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-charts-container {
|
||||||
|
height: calc(~"100% - 50px");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<template>
|
||||||
|
<div id="scroll-board">
|
||||||
|
<dv-scroll-board :config="config" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ScrollBoard',
|
||||||
|
props: ['ScrollList'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
config: {
|
||||||
|
header: ['时间', '餐别', '事务项', '上报人'],
|
||||||
|
data: [
|
||||||
|
],
|
||||||
|
index: true,
|
||||||
|
columnWidth: [50, 170, 100],
|
||||||
|
align: ['center'],
|
||||||
|
rowNum: 7,
|
||||||
|
headerBGC: '#1981f6',
|
||||||
|
headerHeight: 45,
|
||||||
|
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
|
||||||
|
evenRowBGC: 'rgba(10, 29, 50, 0.8)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.config.data = JSON.parse(JSON.stringify(this.ScrollList))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#scroll-board {
|
||||||
|
width: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 20px;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</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="true" />
|
||||||
|
<div class="center-title">{{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: 100px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.header-center-decoration {
|
||||||
|
width: 40%;
|
||||||
|
height: 60px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left-decoration, .header-right-decoration {
|
||||||
|
width: 25%;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-title {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
left: 50%;
|
||||||
|
top: 15px;
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
import './assets/common.less'
|
||||||
|
|
||||||
|
import dataV from '@jiaminghi/data-view'
|
||||||
|
import api from './api'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
Vue.prototype.$api = api
|
||||||
|
|
||||||
|
Vue.use(dataV)
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
publicPath: process.env.NODE_ENV === 'production'
|
||||||
|
? './'
|
||||||
|
: '/'
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue