From 2d2b4c1e334b18ba9fca0d0beed47224ba2c40c3 Mon Sep 17 00:00:00 2001
From: ljx <864490211@qq.com>
Date: Fri, 28 Jun 2024 14:57:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=20=E9=9D=99=E6=80=81?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                         |   1 +
 src/components/datav/barChart.vue    |  75 +++++++++++++++++++
 src/components/datav/index.vue       | 105 ++++++++++++++-------------
 src/components/datav/roseChart.vue   |  13 +++-
 src/components/datav/scrollBoard.vue |  20 +++--
 src/components/datav/topHeader.vue   |   4 +-
 src/main.js                          |  10 +++
 yarn.lock                            |  20 +++++
 8 files changed, 186 insertions(+), 62 deletions(-)
 create mode 100644 src/components/datav/barChart.vue

diff --git a/package.json b/package.json
index 1bf6028..21ae891 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@jiaminghi/data-view": "^2.4.4",
     "axios": "^1.6.2",
+    "echarts": "^5.5.0",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
     "vue": "^2.6.10"
diff --git a/src/components/datav/barChart.vue b/src/components/datav/barChart.vue
new file mode 100644
index 0000000..80ee2d0
--- /dev/null
+++ b/src/components/datav/barChart.vue
@@ -0,0 +1,75 @@
+<template>
+    <div id="bar-chart">
+      <div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">ECharts 全局字体自适应</div>
+      <!-- <dv-charts :option="option" /> -->
+      <div id="bar-chart-container" ></div>
+    </div>
+  </template>
+  
+  <script>
+  import * as echarts from 'echarts';
+  export default {
+    name: 'barChart',
+    data () {
+      return {
+        option: {}
+      }
+    },
+    methods: {
+      
+      createData () {
+        var myChart = echarts.init(document.getElementById('bar-chart-container'));
+        this.option = {
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              data: [120, 200, 150, 80, 70, 110, 130],
+              type: 'bar'
+            }
+          ],
+          color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
+        }
+        myChart.setOption(this.option);
+      },
+    },
+    mounted () {
+      const { createData } = this
+  
+      createData()
+  
+      setInterval(createData, 30000)
+    }
+  }
+  </script>
+  
+  <style lang="less">
+  #bar-chart {
+    width: 100%;
+    height: 50%;
+    background-color: rgba(6, 30, 93, 0.5);
+    border-top: 2px solid rgba(1, 153, 209, .5);
+    box-sizing: border-box;
+  
+    .rose-chart-title {
+      height: 50px;
+      padding-top: 10px;
+      font-weight: bold;
+      text-indent: 20px;
+      // font-size: 20px;
+      justify-content: center;
+      display: flex;
+      align-items: center;
+    }
+  
+    #bar-chart-container {
+      height: calc(~"100% - 50px");
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/datav/index.vue b/src/components/datav/index.vue
index 0b2e5e7..285ebb8 100644
--- a/src/components/datav/index.vue
+++ b/src/components/datav/index.vue
@@ -5,21 +5,15 @@
       <top-header :Name = "showData.name" :Times = "showData.times"/>
 
       <div class="main-content" v-if="loadingDone">
-        <digital-flop :TodayData="showData.todayData" :Type="type"/>
-
+        <!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
         <div class="block-left-right-content" >
-          <ranking-board :LeftData = "showData.leftData" :Type="type" />
+          <scroll-board :ScrollList= "showData.scrollList" />
           <div class="block-top-bottom-content">
-            <div class="block-top-content" :style="{height:type==='dinner'?'55%':'100%',paddingBottom:type==='dinner'?'20px':'0'}">
-              <rose-chart v-if="false"/>
-
-              <water-level-chart :AllNum= "showData.allNum" :ReportedNum= "showData.reportedNum" :Times = "showData.times" :Type = "type"/>
-
-              <scroll-board :ScrollList= "showData.scrollList" v-if="type === 'dinner'"/>
-              <rightTotal :LeftData = "showData.leftData" v-if="type === 'total'" :Type="type"></rightTotal>
+            <div class="block-top-content" style="height:55%;padding-Bottom:20px；">
+              <rose-chart/>
+              <rose-chart/>
             </div>
-
-            <cards v-if="type === 'dinner'" :BottomData="showData.bottomData"/>
+            <bar-chart />
           </div>
         </div>
       </div>
@@ -30,25 +24,26 @@
 
 <script>
 import topHeader from './topHeader'
-import digitalFlop from './digitalFlop'
+// import digitalFlop from './digitalFlop'
 import rankingBoard from './rankingBoard'
 import roseChart from './roseChart'
 import waterLevelChart from './waterLevelChart'
 import scrollBoard from './scrollBoard'
 import cards from './cards'
 import rightTotal from './rightTotal.vue'
-
+import barChart from './barChart.vue'
 export default {
   name: 'DataView',
   components: {
     topHeader,
-    digitalFlop,
+    // digitalFlop,
     rankingBoard,
     roseChart,
     waterLevelChart,
     scrollBoard,
     cards,
-    rightTotal
+    rightTotal,
+    barChart
   },
   data () {
     return {
@@ -66,11 +61,13 @@ export default {
       totalData: {},
       todayData: [],
       showData: {
-        name: '',
+        name: '永盛陶瓷只能数据看榜',
         times: [],
         leftData: [],
         reportedList: [],
-        scrollList: [],
+        scrollList: [
+        ['员工1','上釉','500']
+        ],
         todayData: [],
         bottomData: [],
         allNum: 0,
@@ -80,44 +77,48 @@ export default {
     }
   },
   created () {
-    this.createdData() 
+    this.createdData()
   },
   methods: {
     createdData () {
       let that = this
 
-      this.$api.post2('/api/web/GetScreenReport');
-
-      this.$api.post('/api/PG/GetScreenReport').then(res => {
+      this.$api.post2('/api/web/GetScreenReport').then(res => {
         if (res.code === '200') {
           let data = res.data
-          if (that.type !== data.type) {
-            that.loadingDone = false
-            that.type = data.type
-          }
-          setTimeout(function () {
-            // 如果是更换页面则添加loading
-            if (data.type === 'dinner') {
-              that.dinnerData = data.dinnerData
-              that.setting = data.setting
-              that.showData.todayData = data.todayData.details.filter((item) => {
-                return item.dinnerID === that.dinnerData.searchParms.dinnerID
-              })
-              that.dinnerDataFomat()
-            } else if (data.type === 'total') {
-              that.totalData = data.totalData
-              that.showData.todayData = data.todayData.details
-              that.setting = data.setting
-              that.totalDataFomat()
-            }
-          }, 500)
-        } 
-        setTimeout(()=>{
-          this.createdData();
- 
-        },1000); 
-       
-      })
+          this.showData.name = '永盛大屏数据看板'
+          this.loadingDone = true
+        }
+      });
+
+      // this.$api.post('/api/PG/GetScreenReport').then(res => {
+      //   if (res.code === '200') {
+      //     let data = res.data
+      //     if (that.type !== data.type) {
+      //       that.loadingDone = false
+      //       that.type = data.type
+      //     }
+      //     setTimeout(function () {
+      //       // 如果是更换页面则添加loading
+      //       if (data.type === 'dinner') {
+      //         that.dinnerData = data.dinnerData
+      //         that.setting = data.setting
+      //         that.showData.todayData = data.todayData.details.filter((item) => {
+      //           return item.dinnerID === that.dinnerData.searchParms.dinnerID
+      //         })
+      //         that.dinnerDataFomat()
+      //       } else if (data.type === 'total') {
+      //         that.totalData = data.totalData
+      //         that.showData.todayData = data.todayData.details
+      //         that.setting = data.setting
+      //         that.totalDataFomat()
+      //       }
+      //     }, 500)
+      //   };
+      //   setTimeout(() => {
+      //     this.createdData()
+      //   }, 1000)
+      // })
     },
     dinnerDataFomat () {
       this.showData.name = this.setting.dinnerName
@@ -132,9 +133,9 @@ export default {
         return item.reportID
       })
       // 右侧轮播列表
-      this.showData.scrollList = reportedList.map((item) => {
-        return [item.reportDate, item.className, item.workItemName, item.reportEmployeeName]
-      })
+      // this.showData.scrollList = reportedList.map((item) => {
+      //   return [item.reportDate, item.className, item.workItemName, item.reportEmployeeName]
+      // })
       this.showData.reportedNum = this.showData.scrollList.length
       // 一维数组 转换为 二维数组
       // let categoryList = Object.values(reportedList.reduce((res, item) => {
diff --git a/src/components/datav/roseChart.vue b/src/components/datav/roseChart.vue
index fc72e26..d22c834 100644
--- 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">累计计量资金分布</div>
+    <div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">累计计量资金分布</div>
     <dv-charts :option="option" />
   </div>
 </template>
@@ -18,11 +18,16 @@ export default {
       const { randomExtend } = this
 
       this.option = {
+        legend:{
+          show: true,
+          data: ['路基', '交安设施', '日常养护', '桥通', '交通事故', '路面', '绿化', '计日工', '除雪']
+        },
         series: [
           {
             type: 'pie',
             radius: '50%',
             roseSort: false,
+            
             data: [
               { name: '路基', value: randomExtend(40, 70) },
               { name: '交安设施', value: randomExtend(20, 30) },
@@ -37,6 +42,7 @@ export default {
             insideLabel: {
               show: false
             },
+            
             outsideLabel: {
               formatter: '{name} {percent}%',
               labelLineEndLength: 20,
@@ -47,9 +53,10 @@ export default {
                 stroke: '#fff'
               }
             },
-            roseType: true
+            roseType: false
           }
         ],
+        
         color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
       }
     },
@@ -73,7 +80,7 @@ export default {
 
 <style lang="less">
 #rose-chart {
-  width: 30%;
+  width: 50%;
   height: 100%;
   background-color: rgba(6, 30, 93, 0.5);
   border-top: 2px solid rgba(1, 153, 209, .5);
diff --git a/src/components/datav/scrollBoard.vue b/src/components/datav/scrollBoard.vue
index 3b32f95..370de06 100644
--- a/src/components/datav/scrollBoard.vue
+++ b/src/components/datav/scrollBoard.vue
@@ -11,15 +11,15 @@ export default {
   data () {
     return {
       config: {
-        header: ['时间', '餐别', '事务项', '上报人'],
+        header: ['员工', '工序', '上报量'],
         data: [
         ],
         index: true,
-        columnWidth: [50, 170, 100],
+        columnWidth: [100, 150, 150],
         align: ['center'],
-        rowNum: 7,
+        rowNum: 20,
         headerBGC: '#1981f6',
-        headerHeight: 45,
+        headerHeight: 50,
         oddRowBGC: 'rgba(0, 44, 81, 0.8)',
         evenRowBGC: 'rgba(10, 29, 50, 0.8)'
       }
@@ -33,10 +33,20 @@ export default {
 
 <style lang="less">
 #scroll-board {
-  width: 50%;
+  width:25%;
   box-sizing: border-box;
   margin-left: 20px;
   height: 100%;
   overflow: hidden;
 }
+
+</style>
+<style>
+.dv-scroll-board .header{
+  font-size: 20px !important;
+  font-weight: bold !important;
+}
+.dv-scroll-board .rows .row-item{
+  font-size: 20px !important;
+}
 </style>
diff --git a/src/components/datav/topHeader.vue b/src/components/datav/topHeader.vue
index 81b7f61..ba6e003 100644
--- a/src/components/datav/topHeader.vue
+++ b/src/components/datav/topHeader.vue
@@ -3,7 +3,7 @@
     <dv-decoration-8 class="header-left-decoration" />
     <dv-decoration-5 class="header-center-decoration" />
     <dv-decoration-8 class="header-right-decoration" :reverse="true" />
-    <div class="center-title">{{Name}}</div>
+    <div class="center-title" :style="'font-size:'+$fontSize(0.3)+'px'">{{Name}}</div>
     <!-- ({{ Times[0]+ ' 到 ' +Times[1] }}) -->
   </div>
 </template>
@@ -37,7 +37,7 @@ export default {
 
   .center-title {
     position: absolute;
-    font-size: 30px;
+    // font-size: 30px;
     font-weight: bold;
     left: 50%;
     top: 15px;
diff --git a/src/main.js b/src/main.js
index 2e35c04..9ceff69 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,6 +9,16 @@ import api from './api'
 Vue.config.productionTip = false
 Vue.prototype.$api = api
 
+let fontSize = function(res) {
+  let clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = 100 * (clientWidth / 1920);
+  return res * fontSize;
+}
+Vue.prototype.$fontSize = fontSize
 Vue.use(dataV)
 
 new Vue({
diff --git a/yarn.lock b/yarn.lock
index 5612584..11d7ba0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2976,6 +2976,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz#c13945a7f3acdd67c134d8a9ac67e917830113ac"
+  integrity sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.5.0"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -7809,6 +7817,11 @@ tryer@^1.0.1:
   resolved "https://registry.npm.taobao.org/tryer/download/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha1-8shUBoALmw90yfdGW4HqrSQSUvg=
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.9.0:
   version "1.10.0"
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
@@ -8454,3 +8467,10 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@5.5.0:
+  version "5.5.0"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"
+  integrity sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==
+  dependencies:
+    tslib "2.3.0"