新版本2楼界面
This commit is contained in:
parent
5be78e2eaa
commit
21ee071474
|
|
@ -9,23 +9,83 @@
|
|||
<div class="main-content" v-if="loadingDone">
|
||||
<!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
|
||||
<div class="block-left-right-content">
|
||||
<scroll-board :ScrollList= "showData.scrollList" />
|
||||
<div class="block-top-bottom-content">
|
||||
<div class="row1-col1" style="width: 20%;box-sizing: border-box;padding-right:0.1rem;height: 65%;overflow: hidden;">
|
||||
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ reportSettings[2].title }} </div>
|
||||
<div class="rankHeader" style="display: flex;">
|
||||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||
<p v-for="(item,index) in rankHeader1" :key="item.key+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="listData" class="warp" :classOption="{step:0.5,limitMoveNum:10}">
|
||||
<ul class="item" >
|
||||
<li v-for="(item, index) in reportSettings[2].data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index}}</div>
|
||||
</div>
|
||||
<div v-for="i in rankHeader1" v-text="item[i.key]" :key="i.key" :style="`width:${i.width};text-align:center;`"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="row1-col2" style="width: 50%;box-sizing: border-box;padding-right:0.1rem;height: 65%;overflow: hidden;">
|
||||
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ reportSettings[3].title }} </div>
|
||||
<div class="rankHeader" style="display: flex;">
|
||||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||
<p v-for="(item,index) in rankHeader2" :key="item.key+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="listData" class="warp" :classOption="{step:0.5,limitMoveNum:8}">
|
||||
<ul class="item" >
|
||||
<li v-for="(item, index) in reportSettings[3].data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index}}</div>
|
||||
</div>
|
||||
<div v-for="i in rankHeader2" :key="i.key" :style="`width:${i.width};display: flex;align-items: center;justify-content: center;text-align:center;`">
|
||||
{{ item[i.key] }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="row1-col3" style="width: 30%;height: 65%;">
|
||||
<div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
|
||||
<!-- <rose-chart v-if="chartData1" pieId="roseChart1" :chartData="chartData1"/>
|
||||
<rose-chart v-if="chartData2" pieId="roseChart2" :chartData="chartData2"/>
|
||||
<rose-chart v-if="chartData3" pieId="roseChart3" :chartData="chartData3"/>
|
||||
<bar-chart style="height: 45%;" pieId="roseChart3" :chartData="chartData4"/> -->
|
||||
<template v-for="(item,index) in totalData">
|
||||
<rose-chart :key="index" v-if="item.setting.reportType == 'pie'" :pieId="'roseChart'+index" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
|
||||
<bar-chart :key="index" v-if="item.setting.reportType == 'bar'" style="height: 45%;" pieId="roseChart3" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row2-col1" style="padding-top: 0.1rem; box-sizing: border-box; width: 100%;height: 65%;">
|
||||
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ reportSettings[4].title }} </div>
|
||||
<div class="rankHeader" style="display: flex;">
|
||||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||
<p v-for="(item,index) in rankHeader3" :key="item.key+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="listData" class="warp" :classOption="{step:0.5,limitMoveNum:6}">
|
||||
<ul class="item" >
|
||||
<li v-for="(item, index) in reportSettings[4].data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
||||
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index}}</div>
|
||||
</div>
|
||||
<div v-for="i in rankHeader3" :key="i.key" :style="`width:${i.width};display: flex;align-items: center;justify-content: center;text-align:center;`">
|
||||
{{ item[i.key] }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="row2-col2">
|
||||
|
||||
</div>
|
||||
<div class="row2-col3">
|
||||
</div>
|
||||
<!-- <scroll-board :ScrollList= "showData.scrollList" :ScrollWidth= "showData.scrollWidth" /> -->
|
||||
|
||||
<div class="block-top-bottom-content" style="flex: 1;">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<scroll-board-bottom :ScrollList= "showData.scrollList2" :listName = "showData.listName2" />
|
||||
<!-- <scroll-board-bottom :ScrollList= "showData.scrollList2" :listName = "showData.listName2" /> -->
|
||||
</div>
|
||||
<dv-loading v-else>Loading...</dv-loading>
|
||||
<!-- <div style="height: 5%;width: 100%;"></div> -->
|
||||
|
|
@ -46,6 +106,8 @@ import scrollBoardBottom from './scrollBoardBottom'
|
|||
import cards from './cards'
|
||||
import rightTotal from './rightTotal.vue'
|
||||
import barChart from './barChart.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
components: {
|
||||
|
|
@ -58,15 +120,14 @@ export default {
|
|||
scrollBoardBottom,
|
||||
cards,
|
||||
rightTotal,
|
||||
barChart
|
||||
barChart,
|
||||
vueSeamlessScroll
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
Aid:'',
|
||||
type: '',
|
||||
setting: {},
|
||||
chartData1:null,
|
||||
chartData2:null,
|
||||
chartData3:null,
|
||||
totalData: [],
|
||||
todayData: [],
|
||||
showData: {
|
||||
|
|
@ -75,6 +136,7 @@ export default {
|
|||
leftData: [],
|
||||
reportedList: [],
|
||||
scrollList: [],
|
||||
scrollWidth: '20%',
|
||||
scrollList2: [],
|
||||
listName2:'',
|
||||
todayData: [],
|
||||
|
|
@ -82,6 +144,137 @@ export default {
|
|||
allNum: 0,
|
||||
reportedNum: 0
|
||||
},
|
||||
listData: [{
|
||||
'title': '无缝滚动第一行无缝滚动第一行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '无缝滚动第二行无缝滚动第二行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '无缝滚动第三行无缝滚动第三行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '无缝滚动第四行无缝滚动第四行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '无缝滚动第五行无缝滚动第五行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '无缝滚动第六行无缝滚动第六行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '无缝滚动第七行无缝滚动第七行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '无缝滚动第八行无缝滚动第八行',
|
||||
'date': '2017-12-16'
|
||||
}, {
|
||||
'title': '无缝滚动第九行无缝滚动第九行',
|
||||
'date': '2017-12-16'
|
||||
}],
|
||||
reportSettings:[],
|
||||
rankHeader1:[
|
||||
{
|
||||
name:'员工',
|
||||
key:'employee_name',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
name:'工序',
|
||||
key:'proc_name',
|
||||
width: '40%',
|
||||
},
|
||||
{
|
||||
name:'上报量',
|
||||
key:'value',
|
||||
width: '25%',
|
||||
},
|
||||
],
|
||||
rankHeader2:[
|
||||
{
|
||||
name:'业务单号',
|
||||
key:'TSaleOrderCode',
|
||||
width: '17%',
|
||||
},
|
||||
{
|
||||
name:'质检时间',
|
||||
key:'QC_date',
|
||||
width: '12%',
|
||||
},
|
||||
{
|
||||
name:'产品',
|
||||
key:'Inventoryname',
|
||||
width: '40%',
|
||||
},
|
||||
{
|
||||
name:'质检人员',
|
||||
key:'QC_emp',
|
||||
width: '10%',
|
||||
},
|
||||
{
|
||||
name:'缺陷名',
|
||||
key:'proc01_name',
|
||||
width: '8%',
|
||||
},
|
||||
{
|
||||
name:'缺陷数',
|
||||
key:'proc01_QXL',
|
||||
width: '8%',
|
||||
},
|
||||
|
||||
],
|
||||
rankHeader3:[
|
||||
{
|
||||
name:'业务订单号',
|
||||
key:'TSaleOrderCode',
|
||||
width: '13%',
|
||||
},
|
||||
{
|
||||
name:'产品名',
|
||||
key:'Inventoryname',
|
||||
width: '30%',
|
||||
},
|
||||
{
|
||||
name:'总布产数',
|
||||
key:'Productionquantity',
|
||||
width: '10%',
|
||||
},
|
||||
{
|
||||
name:'合格数',
|
||||
key:'proc01_SJ',
|
||||
width: '6%',
|
||||
},
|
||||
{
|
||||
name:'合格率',
|
||||
key:'proc01_SJv',
|
||||
width: '6%',
|
||||
},
|
||||
{
|
||||
name:'不良数',
|
||||
key:'proc02_SJ',
|
||||
width: '6%',
|
||||
},
|
||||
{
|
||||
name:'不良率',
|
||||
key:'proc02_SJv',
|
||||
width: '6%',
|
||||
},
|
||||
{
|
||||
name:'废品数',
|
||||
key:'proc03_SJ',
|
||||
width: '5%',
|
||||
},
|
||||
{
|
||||
name:'废品率',
|
||||
key:'proc03_SJv',
|
||||
width: '5%',
|
||||
},
|
||||
{
|
||||
name:'最迟货期',
|
||||
key:'SaleOrder_LastDate',
|
||||
width: '10%',
|
||||
},
|
||||
],
|
||||
loadingDone: false
|
||||
}
|
||||
},
|
||||
|
|
@ -89,6 +282,7 @@ export default {
|
|||
console.log(window.location.href.split('?')[1])
|
||||
let params = window.location.href.split('?')[1];
|
||||
let Aid = params.split('=')[1];
|
||||
this.Aid = Aid;
|
||||
this.createdData(Aid)
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -98,19 +292,12 @@ export default {
|
|||
this.$api.post2('/api/web/GetScreenReport?category='+Aid).then(res => {
|
||||
if (res.code === '200') {
|
||||
let data = res.data;
|
||||
this.chartData1 = data.reportSettings[0];
|
||||
this.chartData2 = data.reportSettings[1];
|
||||
this.chartData3 = data.reportSettings[2];
|
||||
this.reportSettings = data.reportSettings;
|
||||
if(data.reportSettings.length>0){
|
||||
data.reportSettings.forEach(item=>{
|
||||
if(item.setting.reportType != 'rank'){
|
||||
this.totalData.push(item)
|
||||
}
|
||||
if(item.code == 'BI_ProcessFlowSheet_Person_Report'){
|
||||
this.showData.scrollList = data.reportSettings[3].data.map(item => {
|
||||
return [item.employee_name,item.proc_name,item.value]
|
||||
});
|
||||
}
|
||||
if(item.code == 'BI_ProduceQuality_KH_Report'){
|
||||
this.showData.listName2 = item.title;
|
||||
this.showData.scrollList2 = item.data.map(item => {
|
||||
|
|
@ -119,9 +306,7 @@ export default {
|
|||
}
|
||||
})
|
||||
}
|
||||
if(data.reportSettings[3].data.length>0){
|
||||
|
||||
}
|
||||
this.showData.name = '永盛大屏数据看板'
|
||||
this.loadingDone = true
|
||||
}
|
||||
|
|
@ -215,8 +400,9 @@ export default {
|
|||
|
||||
.block-left-right-content {
|
||||
// flex: 1;
|
||||
height: 65%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
|
|
@ -235,5 +421,44 @@ export default {
|
|||
box-sizing: border-box;
|
||||
// padding-bottom: 20px;
|
||||
}
|
||||
.rankHeader{
|
||||
font-size: 0.2rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
p{
|
||||
margin: 0;
|
||||
height: 0.5rem;
|
||||
line-height: 0.5rem;
|
||||
background-color: #1e80ff;
|
||||
&:last-child{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.warp {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,a {
|
||||
display: block;
|
||||
// height: 0.5rem;
|
||||
line-height: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
.rowStyle1{
|
||||
background-color: rgba(10, 29, 50, 0.8);
|
||||
}
|
||||
.rowStyle2{
|
||||
background-color: rgba(0, 44, 81, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="scroll-board">
|
||||
<div id="scroll-board" :style="`width:${ScrollWidth}`">
|
||||
<dv-scroll-board :config="config" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -7,10 +7,11 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'ScrollBoard',
|
||||
props: ['ScrollList'],
|
||||
props: ['ScrollList','ScrollWidth'],
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
rankName:'rank1',
|
||||
header: ['员工', '工序', '上报量'],
|
||||
data: [
|
||||
],
|
||||
|
|
@ -26,8 +27,9 @@ export default {
|
|||
}
|
||||
},
|
||||
created () {
|
||||
console.log(this.ScrollList)
|
||||
this.config.headerHeight = this.$fontSize(0.50);
|
||||
this.config.columnWidth = [this.$fontSize(1),this.$fontSize(1.5),this.$fontSize(1)];
|
||||
this.config.columnWidth = [this.$fontSize(0.75),this.$fontSize(1),this.$fontSize(2)];
|
||||
this.config.data = JSON.parse(JSON.stringify(this.ScrollList))
|
||||
},
|
||||
mounted(){
|
||||
|
|
@ -39,7 +41,7 @@ export default {
|
|||
|
||||
<style lang="less">
|
||||
#scroll-board {
|
||||
width:25%;
|
||||
//width:25%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 0.2rem;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import App from './App.vue'
|
|||
import './assets/common.less'
|
||||
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
import scroll from 'vue-seamless-scroll'
|
||||
import api from './api'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
|
@ -30,7 +31,8 @@ let fontSize = function(res) {
|
|||
}
|
||||
Vue.prototype.$fontSize = fontSize
|
||||
Vue.use(dataV)
|
||||
|
||||
Vue.use(scroll)
|
||||
Vue.use(scroll,{componentName: 'scroll-seamless'})
|
||||
new Vue({
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
|
|||
12
yarn.lock
12
yarn.lock
|
|
@ -2266,6 +2266,11 @@ compression@^1.7.4:
|
|||
safe-buffer "5.1.2"
|
||||
vary "~1.1.2"
|
||||
|
||||
comutils@^1.1.9:
|
||||
version "1.1.19"
|
||||
resolved "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz#3e07f306abf48e83726511713a72b20565034443"
|
||||
integrity sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw==
|
||||
|
||||
concat-map@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
|
||||
|
|
@ -8123,6 +8128,13 @@ vue-loader@^15.7.0:
|
|||
vue-hot-reload-api "^2.3.0"
|
||||
vue-style-loader "^4.1.0"
|
||||
|
||||
vue-seamless-scroll@^1.1.23:
|
||||
version "1.1.23"
|
||||
resolved "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz#dde81b3c79aa499791b3c3bffd0fdb22ff3e59a7"
|
||||
integrity sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==
|
||||
dependencies:
|
||||
comutils "^1.1.9"
|
||||
|
||||
vue-style-loader@^4.1.0:
|
||||
version "4.1.2"
|
||||
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
|
||||
|
|
|
|||
Loading…
Reference in New Issue