大屏幕
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
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
*.code-workspace
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
*.app
|
||||
.snapshots/*
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# 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