dev
/
GScreenWEB_TPMes
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏 静态展示

This commit is contained in:
ljx 2024-06-28 14:57:49 +08:00
parent 7ff319e4e7
commit 2d2b4c1e33
8 changed files with 186 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@jiaminghi/data-view": "^2.4.4", "@jiaminghi/data-view": "^2.4.4",
"axios": "^1.6.2", "axios": "^1.6.2",
"echarts": "^5.5.0",
"less": "^3.9.0", "less": "^3.9.0",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"vue": "^2.6.10" "vue": "^2.6.10"

75
src/components/datav/barChart.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div id="bar-chart">
<div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">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: 50%;
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;
padding-top: 10px;
font-weight: bold;
text-indent: 20px;
// font-size: 20px;
justify-content: center;
display: flex;
align-items: center;
}
#bar-chart-container {
height: calc(~"100% - 50px");
}
}
</style>

99
src/components/datav/index.vue
View File

@ -5,21 +5,15 @@
<top-header :Name = "showData.name" :Times = "showData.times"/> <top-header :Name = "showData.name" :Times = "showData.times"/>
<div class="main-content" v-if="loadingDone"> <div class="main-content" v-if="loadingDone">
<digital-flop :TodayData="showData.todayData" :Type="type"/> <!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
<div class="block-left-right-content" > <div class="block-left-right-content" >
<ranking-board :LeftData = "showData.leftData" :Type="type" /> <scroll-board :ScrollList= "showData.scrollList" />
<div class="block-top-bottom-content"> <div class="block-top-bottom-content">
<div class="block-top-content" :style="{height:type==='dinner'?'55%':'100%',paddingBottom:type==='dinner'?'20px':'0'}"> <div class="block-top-content" style="height:55%;padding-Bottom:20px；">
<rose-chart v-if="false"/> <rose-chart/>
<rose-chart/>
<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> </div>
<bar-chart />
<cards v-if="type === 'dinner'" :BottomData="showData.bottomData"/>
</div> </div>
</div> </div>
</div> </div>
@ -30,25 +24,26 @@
<script> <script>
import topHeader from './topHeader' import topHeader from './topHeader'
import digitalFlop from './digitalFlop' // import digitalFlop from './digitalFlop'
import rankingBoard from './rankingBoard' import rankingBoard from './rankingBoard'
import roseChart from './roseChart' import roseChart from './roseChart'
import waterLevelChart from './waterLevelChart' import waterLevelChart from './waterLevelChart'
import scrollBoard from './scrollBoard' import scrollBoard from './scrollBoard'
import cards from './cards' import cards from './cards'
import rightTotal from './rightTotal.vue' import rightTotal from './rightTotal.vue'
import barChart from './barChart.vue'
export default { export default {
name: 'DataView', name: 'DataView',
components: { components: {
topHeader, topHeader,
digitalFlop, // digitalFlop,
rankingBoard, rankingBoard,
roseChart, roseChart,
waterLevelChart, waterLevelChart,
scrollBoard, scrollBoard,
cards, cards,
rightTotal rightTotal,
barChart
}, },
data () { data () {
return { return {
@ -66,11 +61,13 @@ export default {
totalData: {}, totalData: {},
todayData: [], todayData: [],
showData: { showData: {
name: '', name: '永盛陶瓷只能数据看榜',
times: [], times: [],
leftData: [], leftData: [],
reportedList: [], reportedList: [],
scrollList: [], scrollList: [
['员工1','上釉','500']
],
todayData: [], todayData: [],
bottomData: [], bottomData: [],
allNum: 0, allNum: 0,
@ -86,38 +83,42 @@ export default {
createdData () { createdData () {
let that = this let that = this
this.$api.post2('/api/web/GetScreenReport'); this.$api.post2('/api/web/GetScreenReport').then(res => {
this.$api.post('/api/PG/GetScreenReport').then(res => {
if (res.code === '200') { if (res.code === '200') {
let data = res.data let data = res.data
if (that.type !== data.type) { this.showData.name = '永盛大屏数据看板'
that.loadingDone = false this.loadingDone = true
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); // 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 () { dinnerDataFomat () {
this.showData.name = this.setting.dinnerName this.showData.name = this.setting.dinnerName
@ -132,9 +133,9 @@ export default {
return item.reportID return item.reportID
}) })
// 右侧轮播列表 // 右侧轮播列表
this.showData.scrollList = reportedList.map((item) => { // this.showData.scrollList = reportedList.map((item) => {
return [item.reportDate, item.className, item.workItemName, item.reportEmployeeName] // return [item.reportDate, item.className, item.workItemName, item.reportEmployeeName]
}) // })
this.showData.reportedNum = this.showData.scrollList.length this.showData.reportedNum = this.showData.scrollList.length
// 一维数组 转换为 二维数组 // 一维数组 转换为 二维数组
// let categoryList = Object.values(reportedList.reduce((res, item) => { // let categoryList = Object.values(reportedList.reduce((res, item) => {

13
src/components/datav/roseChart.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div id="rose-chart"> <div id="rose-chart">
<div class="rose-chart-title">累计计量资金分布</div> <div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">累计计量资金分布</div>
<dv-charts :option="option" /> <dv-charts :option="option" />
</div> </div>
</template> </template>
@ -18,11 +18,16 @@ export default {
const { randomExtend } = this const { randomExtend } = this
this.option = { this.option = {
legend:{
show: true,
data: ['路基', '交安设施', '日常养护', '桥通', '交通事故', '路面', '绿化', '计日工', '除雪']
},
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: '50%', radius: '50%',
roseSort: false, roseSort: false,
data: [ data: [
{ name: '路基', value: randomExtend(40, 70) }, { name: '路基', value: randomExtend(40, 70) },
{ name: '交安设施', value: randomExtend(20, 30) }, { name: '交安设施', value: randomExtend(20, 30) },
@ -37,6 +42,7 @@ export default {
insideLabel: { insideLabel: {
show: false show: false
}, },
outsideLabel: { outsideLabel: {
formatter: '{name} {percent}%', formatter: '{name} {percent}%',
labelLineEndLength: 20, labelLineEndLength: 20,
@ -47,9 +53,10 @@ export default {
stroke: '#fff' stroke: '#fff'
} }
}, },
roseType: true roseType: false
} }
], ],
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700'] color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
} }
}, },
@ -73,7 +80,7 @@ export default {
<style lang="less"> <style lang="less">
#rose-chart { #rose-chart {
width: 30%; width: 50%;
height: 100%; height: 100%;
background-color: rgba(6, 30, 93, 0.5); background-color: rgba(6, 30, 93, 0.5);
border-top: 2px solid rgba(1, 153, 209, .5); border-top: 2px solid rgba(1, 153, 209, .5);

20
src/components/datav/scrollBoard.vue
View File

@ -11,15 +11,15 @@ export default {
data () { data () {
return { return {
config: { config: {
header: ['时间', '餐别', '事务项', '上报人'], header: ['员工', '工序', '上报量'],
data: [ data: [
], ],
index: true, index: true,
columnWidth: [50, 170, 100], columnWidth: [100, 150, 150],
align: ['center'], align: ['center'],
rowNum: 7, rowNum: 20,
headerBGC: '#1981f6', headerBGC: '#1981f6',
headerHeight: 45, headerHeight: 50,
oddRowBGC: 'rgba(0, 44, 81, 0.8)', oddRowBGC: 'rgba(0, 44, 81, 0.8)',
evenRowBGC: 'rgba(10, 29, 50, 0.8)' evenRowBGC: 'rgba(10, 29, 50, 0.8)'
} }
@ -33,10 +33,20 @@ export default {
<style lang="less"> <style lang="less">
#scroll-board { #scroll-board {
width: 50%; width:25%;
box-sizing: border-box; box-sizing: border-box;
margin-left: 20px; margin-left: 20px;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
</style>
<style>
.dv-scroll-board .header{
font-size: 20px !important;
font-weight: bold !important;
}
.dv-scroll-board .rows .row-item{
font-size: 20px !important;
}
</style> </style>

4
src/components/datav/topHeader.vue
View File

@ -3,7 +3,7 @@
<dv-decoration-8 class="header-left-decoration" /> <dv-decoration-8 class="header-left-decoration" />
<dv-decoration-5 class="header-center-decoration" /> <dv-decoration-5 class="header-center-decoration" />
<dv-decoration-8 class="header-right-decoration" :reverse="true" /> <dv-decoration-8 class="header-right-decoration" :reverse="true" />
<div class="center-title">{{Name}}</div> <div class="center-title" :style="'font-size:'+$fontSize(0.3)+'px'">{{Name}}</div>
<!-- ({{ Times[0]+ ' 到 ' +Times[1] }}) --> <!-- ({{ Times[0]+ ' 到 ' +Times[1] }}) -->
</div> </div>
</template> </template>
@ -37,7 +37,7 @@ export default {
.center-title { .center-title {
position: absolute; position: absolute;
font-size: 30px; // font-size: 30px;
font-weight: bold; font-weight: bold;
left: 50%; left: 50%;
top: 15px; top: 15px;

10
src/main.js
View File

@ -9,6 +9,16 @@ import api from './api'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$api = api Vue.prototype.$api = api
let fontSize = function(res) {
let clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
Vue.prototype.$fontSize = fontSize
Vue.use(dataV) Vue.use(dataV)
new Vue({ new Vue({

20
yarn.lock
View File

@ -2976,6 +2976,14 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0" jsbn "~0.1.0"
safer-buffer "^2.1.0" safer-buffer "^2.1.0"
echarts@^5.5.0:
version "5.5.0"
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz#c13945a7f3acdd67c134d8a9ac67e917830113ac"
integrity sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==
dependencies:
tslib "2.3.0"
zrender "5.5.0"
ee-first@1.1.1: ee-first@1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@ -7809,6 +7817,11 @@ tryer@^1.0.1:
resolved "https://registry.npm.taobao.org/tryer/download/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8" resolved "https://registry.npm.taobao.org/tryer/download/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
integrity sha1-8shUBoALmw90yfdGW4HqrSQSUvg= integrity sha1-8shUBoALmw90yfdGW4HqrSQSUvg=
tslib@2.3.0:
version "2.3.0"
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
tslib@^1.9.0: tslib@^1.9.0:
version "1.10.0" version "1.10.0"
resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
@ -8454,3 +8467,10 @@ yorkie@^2.0.0:
is-ci "^1.0.10" is-ci "^1.0.10"
normalize-path "^1.0.0" normalize-path "^1.0.0"
strip-indent "^2.0.0" strip-indent "^2.0.0"
zrender@5.5.0:
version "5.5.0"
resolved "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"
integrity sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==
dependencies:
tslib "2.3.0"