大屏修改

2024-08-16 17:24:56 +08:00 · 2024-08-16 17:24:56 +08:00 · f2e3ee0486
parent b39cbf142c
commit f2e3ee0486
6 changed files with 88 additions and 26 deletions
--- a/src/components/datav/barChart.vue
+++ b/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;
-      padding-top: 10px;
+      height: 0.5rem;
+      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>
--- a/src/components/datav/index.vue
+++ b/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 {
--- a/src/components/datav/roseChart.vue
+++ b/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',
-            top:'10',
+            left: this.$fontSize(0.2),
+            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;
-    font-size: 20px;
+    text-indent: 0.2rem;
+    font-size: 0.2rem;
    display: flex;
    align-items: center;
  }

  .pie-chart-container {
-      height: calc(~"100% - 50px");
+      height: calc(~"100% - 0.2rem");
    }
 }
 </style>
--- a/src/components/datav/scrollBoard.vue
+++ b/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)',
--- a/src/components/datav/scrollBoardBottom.vue
+++ b/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>
--- a/src/components/datav/topHeader.vue
+++ b/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;
-    margin-top: 50px;
+    height: 0.6rem;
  }

  .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%);
  }
 }