看板自定义字段

src/components/datav/index.vue

@@ -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 v-if="rcitem.setting.reportType == 'pie'" 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)">{{ reportSettings[3].title }} </div>
+                <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 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 rankHeader2" :key="i.key" :style="`width:${i.width};display: flex;align-items: center;justify-content: center;text-align:center;`">
-                  {{ item[i.key] }}
                     </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 v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
-            <div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
+                <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>
+            <div v-for="(rcitem) in row1col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
-          <div class="row2-col1" :style="`width:${row2Style.width[0]}; height:${row2Style.height};margin-top: 0.1rem;`">
+              <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)">{{ reportSettings[4].title }} </div>
+                <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 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 rankHeader3" :key="i.key" :style="`width:${i.width};display: flex;align-items: center;justify-content: center;text-align:center;`">
-                  {{ item[i.key] }}
                     </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'){
+              // if(item.setting.reportType != 'rank'){
-                this.totalData.push(item)
+              //   this.totalData.push(item)
-              }
+              // }
             })
           }
          

src/components/datav/roseChart.vue

@@ -104,7 +104,7 @@ export default {
   }
 
   .pie-chart-container {
-      height: calc(~"100% - 0.2rem");
+      height: calc(100% - 0.5rem);
     }
 }
 </style>