7.30 基础

src/components/datav/barChart.vue

@@ -9,7 +9,9 @@
   <script>
   import * as echarts from 'echarts';
   export default {
+    
     name: 'barChart',
+   
     data () {
       return {
         option: {}
@@ -50,8 +52,8 @@
   
   <style lang="less">
   #bar-chart {
-    width: 100%;
+    // width: 100%;
-    height: 50%;
+    // height: 100%;
     background-color: rgba(6, 30, 93, 0.5);
     border-top: 2px solid rgba(1, 153, 209, .5);
     box-sizing: border-box;

src/components/datav/index.vue

@@ -9,15 +9,22 @@
         <div class="block-left-right-content" >
           <scroll-board :ScrollList= "showData.scrollList" />
           <div class="block-top-bottom-content">
-            <div class="block-top-content" style="height:55%;padding-Bottom:20px；">
+            <div class="block-top-content" style="height:100%;display: flex;flex-wrap: wrap;">
-              <rose-chart/>
+              <!-- <rose-chart v-if="chartData1" pieId="roseChart1" :chartData="chartData1"/>
-              <rose-chart/>
+              <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>
-            <bar-chart />
           </div>
         </div>
       </div>
       <dv-loading v-else>Loading...</dv-loading>
+      <div style="height: 5%;width: 100%;"></div>
+     
     </dv-full-screen-container>
   </div>
 </template>
@@ -49,25 +56,17 @@ export default {
     return {
       type: '',
       setting: {},
-      dinnerData: {
+      chartData1:null,
-        classFullData: [],
+      chartData2:null,
-        classList: [],
+      chartData3:null,
-        daysDetails: [],
+      totalData: [],
-        details: [],
-        searchParms: [],
-        workItemFullData: [],
-        workItemList: []
-      },
-      totalData: {},
       todayData: [],
       showData: {
         name: '永盛陶瓷只能数据看榜',
         times: [],
         leftData: [],
         reportedList: [],
-        scrollList: [
+        scrollList: [],
-        ['员工1','上釉','500']
-        ],
         todayData: [],
         bottomData: [],
         allNum: 0,
@@ -85,40 +84,26 @@ export default {
 
       this.$api.post2('/api/web/GetScreenReport').then(res => {
         if (res.code === '200') {
-          let data = res.data
+          let data = res.data;
+          this.chartData1 = data.reportSettings[0];
+          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(data.reportSettings[3].data.length>0){
+            this.showData.scrollList = data.reportSettings[3].data.map(item => {
+              return [item.employee_name,item.proc_name,item.value]
+            });
+          }
           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
@@ -159,20 +144,20 @@ export default {
       })
       this.loadingDone = true
     },
-    totalDataFomat () {
+    // totalDataFomat () {
-      this.showData.name = '各个食堂运营情况总结'
+    //   this.showData.name = '各个食堂运营情况总结'
-      this.showData.allNum = 0
+    //   this.showData.allNum = 0
-      this.showData.reportedNum = 0
+    //   this.showData.reportedNum = 0
-      this.showData.times = [this.setting.starttime, this.setting.endtime]
+    //   this.showData.times = [this.setting.starttime, this.setting.endtime]
-      this.showData.leftData = this.totalData.total.filter(item => {
+    //   this.showData.leftData = this.totalData.total.filter(item => {
-        return !!item.dinnerName
+    //     return !!item.dinnerName
-      })
+    //   })
-      this.totalData.total.forEach((item) => {
+    //   this.totalData.total.forEach((item) => {
-        this.showData.allNum += item.quantity
+    //     this.showData.allNum += item.quantity
-        this.showData.reportedNum += item.quantityDone
+    //     this.showData.reportedNum += item.quantityDone
-      })
+    //   })
-      this.loadingDone = true
+    //   this.loadingDone = true
-    },
+    // },
     getToday () {
       var today = new Date() // 创建一个表示当前时间的Date对象
       var year = today.getFullYear() // 获取当前年份（四位数）
@@ -224,7 +209,7 @@ export default {
     display: flex;
     flex-grow: 0;
     box-sizing: border-box;
-    padding-bottom: 20px;
+    // padding-bottom: 20px;
   }
 }
 </style>

src/components/datav/roseChart.vue

@@ -1,13 +1,23 @@
 <template>
   <div id="rose-chart">
-    <div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">累计计量资金分布</div>
+    <div class="rose-chart-title" :style="'font-size:'+$fontSize(0.20)+'px'">---{{chartData?chartData.title:''}}---</div>
-    <dv-charts :option="option" />
+    <!-- <dv-charts :option="option" /> -->
+    <div :id="pieId" class="pie-chart-container"></div>
   </div>
 </template>
 
 <script>
+ import * as echarts from 'echarts';
 export default {
   name: 'RoseChart', 
+  props:{
+      pieId:{
+        type: String,
+      },
+      chartData:{
+        type:Object,
+      }
+    },
   data () {
     return {
       option: {}
@@ -17,71 +27,66 @@ export default {
     createData () {
       const { randomExtend } = this
 
+      var myChart = echarts.init(document.getElementById(this.pieId));
         this.option = {
+          
+          tooltip: {
+            trigger: 'item'
+          },
           legend: {
-          show: true,
+            orient: 'horizontal',
-          data: ['路基', '交安设施', '日常养护', '桥通', '交通事故', '路面', '绿化', '计日工', '除雪']
+            left: '20',
+            top:'10',
+            textStyle:{
+              color:'fff',
+              fontSize:this.$fontSize(0.12)
+            },
+            
           },
           series: [
             {
+              name: '数据详情',
               type: 'pie',
               radius: '50%',
-            roseSort: false,
+              data: this.chartData.data,
+              emphasis: {
+                textStyle: {
+                 color: 'rgba(0,0,0,0)'
+                }
+              },
+              label: {
+                color: '#fff',
+                fontSize:this.$fontSize(0.12),
+                formatter: '{b}: {d}%'
                 
-            data: [
-              { name: '路基', value: randomExtend(40, 70) },
-              { name: '交安设施', value: randomExtend(20, 30) },
-              { name: '日常养护', value: randomExtend(10, 50) },
-              { name: '桥通', value: randomExtend(5, 20) },
-              { name: '交通事故', value: randomExtend(40, 50) },
-              { name: '路面', value: randomExtend(20, 30) },
-              { name: '绿化', value: randomExtend(5, 10) },
-              { name: '计日工', value: randomExtend(20, 35) },
-              { name: '除雪', value: randomExtend(5, 10) }
-            ],
-            insideLabel: {
-              show: false
               },
-            
+            }
-            outsideLabel: {
+          ]
-              formatter: '{name} {percent}%',
+        };
-              labelLineEndLength: 20,
+        myChart.setOption(this.option);
-              style: {
-                fill: '#fff'
     },
-              labelLineStyle: {
+    // randomExtend (minNum, maxNum) {
-                stroke: '#fff'
+    //   if (arguments.length === 1) {
-              }
+    //     return parseInt(Math.random() * minNum + 1, 10)
-            },
+    //   } else {
-            roseType: false
+    //     return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
-          }
+    //   }
-        ],
+    // }
-        
-        color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
-      }
-    },
-    randomExtend (minNum, maxNum) {
-      if (arguments.length === 1) {
-        return parseInt(Math.random() * minNum + 1, 10)
-      } else {
-        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
-      }
-    }
   },
   mounted () {
     const { createData } = this
 
     createData()
 
-    setInterval(createData, 30000)
+    setInterval(createData, 100000)
   }
 }
 </script>
 
 <style lang="less">
 #rose-chart {
-  width: 50%;
+  // width: 33.33%;
-  height: 100%;
+  // height: 55%;
   background-color: rgba(6, 30, 93, 0.5);
   border-top: 2px solid rgba(1, 153, 209, .5);
   box-sizing: border-box;
@@ -95,7 +100,7 @@ export default {
     align-items: center;
   }
 
-  .dv-charts-container {
+  .pie-chart-container {
       height: calc(~"100% - 50px");
     }
 }

src/components/datav/scrollBoard.vue

@@ -15,8 +15,8 @@ export default {
         data: [
         ],
         index: true,
-        columnWidth: [100, 150, 150],
+        columnWidth: [100, 150, 200],
-        align: ['center'],
+        align: ['center', 'center', 'center', 'center'],
         rowNum: 20,
         headerBGC: '#1981f6',
         headerHeight: 50,