大屏通知

package.json

@@ -13,7 +13,8 @@
     "echarts": "^5.5.0",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-seamless-scroll": "^1.1.23"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.8.0",

src/components/datav/index.vue

@@ -9,13 +9,13 @@
       <div class="main-content" v-if="loadingDone">
         <!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
         <div class="block-left-right-content">
-          <div class="row1-col1" style="width: 20%;box-sizing: border-box;padding-right:0.1rem;height: 65%;overflow: hidden;">
+          <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 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}">
+            <vue-seamless-scroll :data="reportSettings[2].data" 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">
@@ -24,15 +24,15 @@
                 <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>
+            </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="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 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}">
+            <vue-seamless-scroll :data="reportSettings[3].data" class="warp" :classOption="{step:2,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">
@@ -45,7 +45,7 @@
               </ul>
             </vue-seamless-scroll>
           </div>
-          <div class="row1-col3" style="width: 30%;height: 65%;">
+          <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;">
               <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+';'"/>
@@ -53,13 +53,13 @@
               </template>
             </div>
           </div>
-          <div class="row2-col1" style="padding-top: 0.1rem; box-sizing: border-box; width: 100%;height: 65%;">
+          <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 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}">
+            <vue-seamless-scroll :data="reportSettings[4].data" class="warp" :classOption="{step:2,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">
@@ -72,10 +72,10 @@
               </ul>
             </vue-seamless-scroll>
           </div>
-          <div class="row2-col2">
+          <div class="row2-col2" :style="`width:${row2Style.width[1]}; height:${row2Style.height};`">
 
           </div>
-          <div class="row2-col3">
+          <div class="row2-col3" :style="`width:${row2Style.width[2]}; height:${row2Style.height};`">
           </div>
           <!-- <scroll-board  :ScrollList= "showData.scrollList" :ScrollWidth= "showData.scrollWidth" /> -->
 
@@ -88,10 +88,12 @@
         <!-- <scroll-board-bottom :ScrollList= "showData.scrollList2" :listName = "showData.listName2" /> -->
       </div>
       <dv-loading v-else>Loading...</dv-loading>
-      <!-- <div style="height: 5%;width: 100%;"></div> -->
-     
     <!-- </dv-full-screen-container> -->
-  </div>
+    </div>
+    <div id="dv-full-screen-container2" v-if="showNotices"  style="height: 100vh;width: 100vw;position: fixed;top: 0;left: 0;z-index: 9999;">
+          <p v-if="notices.length>0" style="font-size: 0.4rem;margin: 0;padding: 0.2rem; text-align: center;font-weight: bold;">{{ notices[0].title }}</p>
+          <div class="inner-content" v-if="notices.length>0" style="font-size: 0.3rem;margin: 0;padding: 0.2rem;white-space: pre-wrap;" v-html="notices[0].content"></div>
+      </div>
   </div>
 </template>
 
@@ -130,6 +132,8 @@ export default {
       setting: {},
       totalData: [],
       todayData: [],
+      notices:[],
+      showNotices:false,
       showData: {
         name: '永盛陶瓷智能数据看榜',
         times: [],
@@ -144,34 +148,7 @@ 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:[
         {
@@ -194,7 +171,7 @@ export default {
         {
           name:'业务单号',
           key:'TSaleOrderCode',
-          width: '17%',
+          width: '16%',
         },
         {
           name:'质检时间',
@@ -204,22 +181,27 @@ export default {
         {
           name:'产品',
           key:'Inventoryname',
-          width: '40%',
+          width: '37%',
         },
         {
           name:'质检人员',
           key:'QC_emp',
-          width: '10%',
+          width: '9%',
         },
         {
           name:'缺陷名',
           key:'proc01_name',
-          width: '8%',
+          width: '7%',
+        },
+        {
+          name:'缺陷率',
+          key:'proc01_QXL',
+          width: '7%',
         },
         {
           name:'缺陷数',
-          key:'proc01_QXL',
+          key:'proc01_SJ',
-          width: '8%',
+          width: '7%',
         },
 
       ],
@@ -275,6 +257,20 @@ export default {
           width: '10%',
         },
       ],
+      row1Style:{
+        height:'65%',
+        width:['25%','50%','25%'],
+      },
+      row1col1report:[],
+      row1col2report:[],
+      row1col3report:[],
+      row2col1report:[],
+      row2col2report:[],
+      row2col3report:[],
+      row2Style:{
+        height:'35%',
+        width:['100%','0%', '0%'],
+      },
       loadingDone: false
     }
   },
@@ -288,26 +284,53 @@ export default {
   methods: {
     createdData (Aid) {
       let that = this
-
+      that.loadingDone = false;
+      that.showNotices = false;
       this.$api.post2('/api/web/GetScreenReport?category='+Aid).then(res => {
         if (res.code === '200') {
           let data = res.data;
           this.reportSettings = data.reportSettings;
+          this.notices = data.notices;
+          // console.log(data.notices.length>0 , data.notices[0].starttime , data.notices[0].Endtime)
+          if(data.notices.length>0 && data.notices[0].starttime && data.notices[0].Endtime){
+            let nowtimestamp = new Date().getTime();
+            let starttimestamp = new Date(this.notices[0].starttime).getTime();
+            let endtimestamp = new Date(this.notices[0].Endtime).getTime();
+            console.log(nowtimestamp, starttimestamp, endtimestamp)
+            if(nowtimestamp>=starttimestamp && nowtimestamp<=endtimestamp){
+              this.showNotices = true;
+            }else{
+              this.showNotices = false;
+            }
+          }
+
           if(data.reportSettings.length>0){
             data.reportSettings.forEach(item=>{
+              if(item.setting.rowNumber==1 && item.setting.colNumber==1){
+                this.row1col1report.push(item)
+              }
+              if(item.setting.rowNumber==1 && item.setting.colNumber==2){
+                this.row1col2report.push(item)
+              }
+              if(item.setting.rowNumber==1 && item.setting.colNumber==3){
+                this.row1col3report.push(item)
+              }
+              if(item.setting.rowNumber==2 && item.setting.colNumber==1){
+                this.row2col1report.push(item)
+              }
+              if(item.setting.rowNumber==2 && item.setting.colNumber==2){
+                this.row2col2report.push(item)
+              }
+              if(item.setting.rowNumber==2 && item.setting.colNumber==3){
+                this.row2col3report.push(item)
+              }
               if(item.setting.reportType != 'rank'){
                 this.totalData.push(item)
               }
-              if(item.code == 'BI_ProduceQuality_KH_Report'){
-                this.showData.listName2 = item.title;
-                this.showData.scrollList2 = item.data.map(item => {
-                  return [item.TSaleOrderCode,item.Inventoryname,item.Productionquantity,item.proc01_SJ,item.proc01_SJv,item.proc02_SJ,item.proc02_SJv,item.proc03_SJ,item.proc03_SJv,item.SaleOrder_LastDate]
-                });
-              }
             })
           }
          
-          this.showData.name = '永盛大屏数据看板'
+          this.showData.name = '永盛科技数据看板'
           this.loadingDone = true
         }
       });
@@ -383,14 +406,17 @@ export default {
   background-color: #030409;
   color: #fff;
 
-  #dv-full-screen-container {
+  #dv-full-screen-container,#dv-full-screen-container2{
     background-image: url('./img/bg.png');
     background-size: 100% 100%;
     box-shadow: 0 0 3px blue;
     display: flex;
     flex-direction: column;
   }
-
+  .row1-col1,.row1-col2,.row2-col1,.row2-col2{
+    box-sizing: border-box;
+    overflow: hidden;
+  }
   .main-content {
     flex: 1;
     height: calc(100% - 1rem);
@@ -460,5 +486,11 @@ export default {
       }
     }
   }
+  #dv-full-screen-container2 .inner-content{
+      p{
+        margin: 0;
+        font-size: 0.3rem;
+      }
+  }
 }
 </style>

src/components/datav/topHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="top-header">
     <dv-decoration-8 class="header-left-decoration" />
-    <dv-decoration-5 class="header-center-decoration" />
+    <!-- <dv-decoration-5 class="header-center-decoration" /> -->
     <dv-decoration-8 class="header-right-decoration" :reverse="false" />
     <div class="center-title" :style="'font-size:'+$fontSize(0.3)+'px'">{{Name}}</div>
     <!-- ({{ Times[0]+ ' 到 ' +Times[1] }}) -->
@@ -19,7 +19,7 @@ export default {
 #top-header {
   position: relative;
   width: 100%;
-  height: 1rem;
+  // height: 1rem;
   display: flex;
   justify-content: space-between;
   flex-shrink: 0;
@@ -42,5 +42,6 @@ export default {
     top: 0.15rem;
     transform: translateX(-50%);
   }
+  
 }
 </style>