新版本2楼界面

src/components/datav/index.vue

@@ -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="row1-col1" style="width: 20%;box-sizing: border-box;padding-right:0.1rem;height: 65%;overflow: hidden;">
-          <div class="block-top-bottom-content">
+            <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.reportSettings = data.reportSettings;
-          this.chartData2 = data.reportSettings[1];
-          this.chartData3 = data.reportSettings[2];
           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>

src/components/datav/scrollBoard.vue

@@ -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%;

src/main.js

@@ -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')

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"