看板自定义字段
This commit is contained in:
parent
348e0b78fc
commit
b2d76333ce
|
|
@ -10,72 +10,154 @@
|
|||
<!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
|
||||
<div class="block-left-right-content">
|
||||
<div class="row1-col1" :style="`width:${row1Style.width[0]}; height:${row1Style.height};padding-right:0.1rem;`">
|
||||
<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 v-for="(rcitem) in row1col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||
<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)">{{ rcitem.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>
|
||||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="reportSettings[2].data" class="warp" :classOption="{step:0.5,limitMoveNum:10}">
|
||||
<vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,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'">
|
||||
<li v-for="(item, index) in rcitem.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 style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||||
</div>
|
||||
<div v-for="i in rankHeader1" v-text="item[i.key]" :key="i.key" :style="`width:${i.width};text-align:center;`"></div>
|
||||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="row1-col2" :style="`width:${row1Style.width[1]}; height:${row1Style.height};padding-right:0.1rem;`">
|
||||
<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 v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row1-col2" v-if="row1col2report.length>0" :style="`width:${row1Style.width[1]}; height:${row1Style.height};padding-right:0.1rem;`">
|
||||
<div v-for="(rcitem) in row1col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||
<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)">{{ rcitem.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>
|
||||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="reportSettings[3].data" class="warp" :classOption="{step:2,limitMoveNum:8}">
|
||||
<vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||
<ul class="item" >
|
||||
<li v-for="(item, index) in reportSettings[3].data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||
<li v-for="(item, index) in rcitem.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 style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||||
</div>
|
||||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="row1-col3" :style="`width:${row1Style.width[2]}; height:${row1Style.height};`">
|
||||
<div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
|
||||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row1-col3" v-if="row1col3report.length>0" :style="`width:${row1Style.width[2]}; height:${row1Style.height};`">
|
||||
<!-- <div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
|
||||
<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="`width:${row2Style.width[0]}; height:${row2Style.height};margin-top: 0.1rem;`">
|
||||
<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> -->
|
||||
<div v-for="(rcitem) in row1col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||
<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)">{{ rcitem.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>
|
||||
<p v-for="(item,index) in rankHeader1" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="reportSettings[4].data" class="warp" :classOption="{step:2,limitMoveNum:6}">
|
||||
<vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||
<ul class="item" >
|
||||
<li v-for="(item, index) in reportSettings[4].data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
||||
<li v-for="(item, index) in rcitem.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 style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
|
||||
</div>
|
||||
<div v-for="i in rankHeader1" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="row2-col2" :style="`width:${row2Style.width[1]}; height:${row2Style.height};`">
|
||||
|
||||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row2-col1" v-if="row2col1report.length>0" :style="`width:${row2Style.width[0]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`">
|
||||
<div v-for="(rcitem) in row2col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||
<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)">{{ rcitem.title }} </div>
|
||||
<div class="rankHeader" style="display: flex;">
|
||||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||||
</div>
|
||||
<vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||
<ul class="item" >
|
||||
<li v-for="(item, index) in rcitem.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+1}}</div>
|
||||
</div>
|
||||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row2-col2" v-if="row2col2report.length>0" :style="`width:${row2Style.width[1]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`">
|
||||
<div v-for="(rcitem) in row2col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||
<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)">{{ rcitem.title }} </div>
|
||||
<div class="rankHeader" style="display: flex;">
|
||||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||||
</div>
|
||||
<vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||
<ul class="item" >
|
||||
<li v-for="(item, index) in rcitem.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+1}}</div>
|
||||
</div>
|
||||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row2-col3" v-if="row2col3report.length>0" :style="`width:${row2Style.width[2]}; height:${row2Style.height};margin-top: 0.1rem;`">
|
||||
<div v-for="(rcitem) in row2col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
|
||||
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
|
||||
<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)">{{ rcitem.title }} </div>
|
||||
<div class="rankHeader" style="display: flex;">
|
||||
<p style="width: 0.5rem;text-align: center;">#</p>
|
||||
<p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
|
||||
</div>
|
||||
<vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
|
||||
<ul class="item" >
|
||||
<li v-for="(item, index) in rcitem.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+1}}</div>
|
||||
</div>
|
||||
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
|
||||
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row2-col3" :style="`width:${row2Style.width[2]}; height:${row2Style.height};`">
|
||||
</div>
|
||||
<!-- <scroll-board :ScrollList= "showData.scrollList" :ScrollWidth= "showData.scrollWidth" /> -->
|
||||
|
||||
|
|
@ -170,7 +252,7 @@ export default {
|
|||
rankHeader2:[
|
||||
{
|
||||
name:'业务单号',
|
||||
key:'TSaleOrderCode',
|
||||
key:'Produce_code',
|
||||
width: '16%',
|
||||
},
|
||||
{
|
||||
|
|
@ -208,7 +290,7 @@ export default {
|
|||
rankHeader3:[
|
||||
{
|
||||
name:'业务订单号',
|
||||
key:'TSaleOrderCode',
|
||||
key:'Documentcode',
|
||||
width: '13%',
|
||||
},
|
||||
{
|
||||
|
|
@ -279,6 +361,34 @@ export default {
|
|||
let params = window.location.href.split('?')[1];
|
||||
let Aid = params.split('=')[1];
|
||||
this.Aid = Aid;
|
||||
if(Aid == 'A1'){
|
||||
this.row1Style={
|
||||
height:'65%',
|
||||
width:['25%','50%','25%'],
|
||||
};
|
||||
this.row2Style={
|
||||
height:'35%',
|
||||
width:['100%','0%', '0%'],
|
||||
}
|
||||
}else if(Aid == 'A2'){
|
||||
this.row1Style={
|
||||
height:'40%',
|
||||
width:['100%','0%', '0%'],
|
||||
};
|
||||
this.row2Style={
|
||||
height:'60%',
|
||||
width:['70%','30%', '0%'],
|
||||
}
|
||||
}else if(Aid == 'A3'){
|
||||
this.row1Style={
|
||||
height:'50%',
|
||||
width:['100%','0%','0%'],
|
||||
};
|
||||
this.row2Style={
|
||||
height:'50%',
|
||||
width:['100%','0%', '0%'],
|
||||
}
|
||||
}
|
||||
this.createdData(Aid)
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -306,27 +416,27 @@ export default {
|
|||
|
||||
if(data.reportSettings.length>0){
|
||||
data.reportSettings.forEach(item=>{
|
||||
if(item.setting.rowNumber==1 && item.setting.colNumber==1){
|
||||
if(item.setting.rowNumber==1 && item.setting.columnNumber==1){
|
||||
this.row1col1report.push(item)
|
||||
}
|
||||
if(item.setting.rowNumber==1 && item.setting.colNumber==2){
|
||||
if(item.setting.rowNumber==1 && item.setting.columnNumber==2){
|
||||
this.row1col2report.push(item)
|
||||
}
|
||||
if(item.setting.rowNumber==1 && item.setting.colNumber==3){
|
||||
if(item.setting.rowNumber==1 && item.setting.columnNumber==3){
|
||||
this.row1col3report.push(item)
|
||||
}
|
||||
if(item.setting.rowNumber==2 && item.setting.colNumber==1){
|
||||
if(item.setting.rowNumber==2 && item.setting.columnNumber==1){
|
||||
this.row2col1report.push(item)
|
||||
}
|
||||
if(item.setting.rowNumber==2 && item.setting.colNumber==2){
|
||||
if(item.setting.rowNumber==2 && item.setting.columnNumber==2){
|
||||
this.row2col2report.push(item)
|
||||
}
|
||||
if(item.setting.rowNumber==2 && item.setting.colNumber==3){
|
||||
if(item.setting.rowNumber==2 && item.setting.columnNumber==3){
|
||||
this.row2col3report.push(item)
|
||||
}
|
||||
if(item.setting.reportType != 'rank'){
|
||||
this.totalData.push(item)
|
||||
}
|
||||
// if(item.setting.reportType != 'rank'){
|
||||
// this.totalData.push(item)
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export default {
|
|||
}
|
||||
|
||||
.pie-chart-container {
|
||||
height: calc(~"100% - 0.2rem");
|
||||
height: calc(100% - 0.5rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue