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": {
"@jiaminghi/data-view": "^2.4.4",
"axios": "^1.6.2",
"echarts": "^5.5.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"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>

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

@ -5,21 +5,15 @@
<top-header :Name = "showData.name" :Times = "showData.times"/>
<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" >
<ranking-board :LeftData = "showData.leftData" :Type="type" />
<scroll-board :ScrollList= "showData.scrollList" />
<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 class="block-top-content" style="height:55%;padding-Bottom:20px；">
<rose-chart/>
<rose-chart/>
</div>
<cards v-if="type === 'dinner'" :BottomData="showData.bottomData"/>
<bar-chart />
</div>
</div>
</div>
@ -30,25 +24,26 @@
<script>
import topHeader from './topHeader'
import digitalFlop from './digitalFlop'
// 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'
import barChart from './barChart.vue'
export default {
name: 'DataView',
components: {
topHeader,
digitalFlop,
// digitalFlop,
rankingBoard,
roseChart,
waterLevelChart,
scrollBoard,
cards,
rightTotal
rightTotal,
barChart
},
data () {
return {
@ -66,11 +61,13 @@ export default {
totalData: {},
todayData: [],
showData: {
name: '',
name: '永盛陶瓷只能数据看榜',
times: [],
leftData: [],
reportedList: [],
scrollList: [],
scrollList: [
['员工1','上釉','500']
],
todayData: [],
bottomData: [],
allNum: 0,
@ -80,44 +77,48 @@ export default {
}
},
created () {
this.createdData()
this.createdData()
},
methods: {
createdData () {
let that = this
this.$api.post2('/api/web/GetScreenReport');
this.$api.post('/api/PG/GetScreenReport').then(res => {
this.$api.post2('/api/web/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);
})
this.showData.name = '永盛大屏数据看板'
this.loadingDone = true
}
});
// 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
@ -132,9 +133,9 @@ export default {
return item.reportID
})
// 右侧轮播列表
this.showData.scrollList = reportedList.map((item) => {
return [item.reportDate, item.className, item.workItemName, item.reportEmployeeName]
})
// 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) => {

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

@ -1,6 +1,6 @@
<template>
<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" />
</div>
</template>
@ -18,11 +18,16 @@ export default {
const { randomExtend } = this
this.option = {
legend:{
show: true,
data: ['路基', '交安设施', '日常养护', '桥通', '交通事故', '路面', '绿化', '计日工', '除雪']
},
series: [
{
type: 'pie',
radius: '50%',
roseSort: false,
data: [
{ name: '路基', value: randomExtend(40, 70) },
{ name: '交安设施', value: randomExtend(20, 30) },
@ -37,6 +42,7 @@ export default {
insideLabel: {
show: false
},
outsideLabel: {
formatter: '{name} {percent}%',
labelLineEndLength: 20,
@ -47,9 +53,10 @@ export default {
stroke: '#fff'
}
},
roseType: true
roseType: false
}
],
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
}
},
@ -73,7 +80,7 @@ export default {
<style lang="less">
#rose-chart {
width: 30%;
width: 50%;
height: 100%;
background-color: rgba(6, 30, 93, 0.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 () {
return {
config: {
header: ['时间', '餐别', '事务项', '上报人'],
header: ['员工', '工序', '上报量'],
data: [
],
index: true,
columnWidth: [50, 170, 100],
columnWidth: [100, 150, 150],
align: ['center'],
rowNum: 7,
rowNum: 20,
headerBGC: '#1981f6',
headerHeight: 45,
headerHeight: 50,
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
evenRowBGC: 'rgba(10, 29, 50, 0.8)'
}
@ -33,10 +33,20 @@ export default {
<style lang="less">
#scroll-board {
width: 50%;
width:25%;
box-sizing: border-box;
margin-left: 20px;
height: 100%;
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>

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

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

10
src/main.js
View File

@ -9,6 +9,16 @@ import api from './api'
Vue.config.productionTip = false
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)
new Vue({

20
yarn.lock
View File

@ -2976,6 +2976,14 @@ ecc-jsbn@~0.1.1:
jsbn "~0.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:
version "1.1.1"
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"
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:
version "1.10.0"
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"
normalize-path "^1.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"