大屏修改

src/components/datav/barChart.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="bar-chart">
-      <div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">ECharts 全局字体自适应</div>
+      <div class="rose-chart-title" >ECharts 全局字体自适应</div>
       <!-- <dv-charts :option="option" /> -->
       <div id="bar-chart-container" ></div>
     </div>
@@ -59,10 +59,10 @@
     box-sizing: border-box;
   
     .rose-chart-title {
-      height: 50px;
+      height: 0.5rem;
-      padding-top: 10px;
+      padding-top: 0.1rem;
       font-weight: bold;
-      text-indent: 20px;
+      text-indent: 0.2rem;
       // font-size: 20px;
       justify-content: center;
       display: flex;
@@ -70,7 +70,7 @@
     }
   
     #bar-chart-container {
-      height: calc(~"100% - 50px");
+      height: calc(~"100% - 0.5rem");
     }
   }
   </style>

src/components/datav/index.vue

@@ -8,7 +8,7 @@
 
       <div class="main-content" v-if="loadingDone">
         <!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
-        <div class="block-left-right-content" >
+        <div class="block-left-right-content">
           <scroll-board :ScrollList= "showData.scrollList" />
           <div class="block-top-bottom-content">
             <div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
@@ -21,11 +21,14 @@
                   <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>
+        <scroll-board-bottom :ScrollList= "showData.scrollList" />
       </div>
       <dv-loading v-else>Loading...</dv-loading>
-      <div style="height: 5%;width: 100%;"></div>
+      <!-- <div style="height: 5%;width: 100%;"></div> -->
      
     <!-- </dv-full-screen-container> -->
   </div>
@@ -39,6 +42,7 @@ import rankingBoard from './rankingBoard'
 import roseChart from './roseChart'
 import waterLevelChart from './waterLevelChart'
 import scrollBoard from './scrollBoard'
+import scrollBoardBottom from './scrollBoardBottom'
 import cards from './cards'
 import rightTotal from './rightTotal.vue'
 import barChart from './barChart.vue'
@@ -51,6 +55,7 @@ export default {
     roseChart,
     waterLevelChart,
     scrollBoard,
+    scrollBoardBottom,
     cards,
     rightTotal,
     barChart
@@ -65,7 +70,7 @@ export default {
       totalData: [],
       todayData: [],
       showData: {
-        name: '永盛陶瓷只能数据看榜',
+        name: '永盛陶瓷智能数据看榜',
         times: [],
         leftData: [],
         reportedList: [],
@@ -85,7 +90,7 @@ export default {
     createdData () {
       let that = this
 
-      this.$api.post2('/api/web/GetScreenReport').then(res => {
+      this.$api.post2('/api/web/GetScreenReport?category=A1').then(res => {
         if (res.code === '200') {
           let data = res.data;
           this.chartData1 = data.reportSettings[0];
@@ -194,9 +199,10 @@ export default {
   }
 
   .block-left-right-content {
-    flex: 1;
+    // flex: 1;
+    height: 70%;
     display: flex;
-    margin-top: 20px;
+    margin-top: 0.2rem;
   }
 
   .block-top-bottom-content {
@@ -204,7 +210,7 @@ export default {
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    padding-left: 20px;
+    margin-left: 0.2rem;
   }
 
   .block-top-content {

src/components/datav/roseChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="rose-chart">
-    <div class="rose-chart-title" :style="'font-size:'+$fontSize(0.20)+'px'">---{{chartData?chartData.title:''}}---</div>
+    <div class="rose-chart-title">---{{chartData?chartData.title:''}}---</div>
     <!-- <dv-charts :option="option" /> -->
     <div :id="pieId" class="pie-chart-container"></div>
   </div>
@@ -35,8 +35,11 @@ export default {
           },
           legend: {
             orient: 'horizontal',
-            left: '20',
+            left: this.$fontSize(0.2),
-            top:'10',
+            top:this.$fontSize(0.1),
+            itemWidth: this.$fontSize(0.25),
+            itemHeight: this.$fontSize(0.14),
+            // height: this.$fontSize(0.2),
             textStyle:{
               color:'fff',
               fontSize:this.$fontSize(0.12)
@@ -92,16 +95,16 @@ export default {
   box-sizing: border-box;
 
   .rose-chart-title {
-    height: 50px;
+    height: 0.5rem;
     font-weight: bold;
-    text-indent: 20px;
+    text-indent: 0.2rem;
-    font-size: 20px;
+    font-size: 0.2rem;
     display: flex;
     align-items: center;
   }
 
   .pie-chart-container {
-      height: calc(~"100% - 50px");
+      height: calc(~"100% - 0.2rem");
     }
 }
 </style>

src/components/datav/scrollBoard.vue

@@ -17,7 +17,7 @@ export default {
         index: true,
         columnWidth: [100, 150, 200],
         align: ['center', 'center', 'center', 'center'],
-        rowNum: 20,
+        rowNum: 12,
         headerBGC: '#1981f6',
         headerHeight: 50,
         oddRowBGC: 'rgba(0, 44, 81, 0.8)',

src/components/datav/scrollBoardBottom.vue

@@ -0,0 +1,54 @@
+<template>
+  <div id="scroll-board-bottom">
+    <dv-scroll-board :config="config" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollBoard',
+  props: ['ScrollList'],
+  data () {
+    return {
+      config: {
+        header: ['业务订单号', '产品名', '总布产数','合格数','合格率','不良数','不良率','废品数','废品率','最迟货期'],
+        data: [
+        ],
+        // index: true,
+        columnWidth: [1000],
+        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
+        rowNum: 5,
+        headerBGC: '#1981f6',
+        headerHeight: 50,
+        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
+        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
+      }
+    }
+  },
+  created () {
+    this.config.headerHeight = this.$fontSize(0.50);
+    this.config.columnWidth = [this.$fontSize(1.5),this.$fontSize(6),this.$fontSize(1.5),this.$fontSize(1),this.$fontSize(1),this.$fontSize(1),this.$fontSize(1),this.$fontSize(1),this.$fontSize(1),this.$fontSize(3)];
+    this.config.data = JSON.parse(JSON.stringify(this.ScrollList))
+  }
+}
+</script>
+
+<style lang="less">
+#scroll-board-bottom {
+  width:100%;
+  box-sizing: border-box;
+  padding:0.2rem;
+  height: 40%;
+  overflow: hidden;
+}
+
+</style>
+<style>
+.dv-scroll-board .header{
+  font-size: 0.2rem !important;
+  font-weight: bold !important;
+}
+.dv-scroll-board .rows .row-item{
+  font-size: 0.2rem !important;
+}
+</style>

src/components/datav/topHeader.vue

@@ -2,7 +2,7 @@
   <div id="top-header">
     <dv-decoration-8 class="header-left-decoration" />
     <dv-decoration-5 class="header-center-decoration" />
-    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
+    <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] }}) -->
   </div>
@@ -19,20 +19,19 @@ export default {
 #top-header {
   position: relative;
   width: 100%;
-  height: 100px;
+  height: 1rem;
   display: flex;
   justify-content: space-between;
   flex-shrink: 0;
 
   .header-center-decoration {
     width: 40%;
-    height: 60px;
+    height: 0.6rem;
-    margin-top: 50px;
   }
 
   .header-left-decoration, .header-right-decoration {
     width: 25%;
-    height: 60px;
+    height: 0.6rem;
   }
 
   .center-title {
@@ -40,7 +39,7 @@ export default {
     // font-size: 30px;
     font-weight: bold;
     left: 50%;
-    top: 15px;
+    top: 0.15rem;
     transform: translateX(-50%);
   }
 }