diff --git a/src/App.vue b/src/App.vue
index 105547e..c796f2d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,8 +5,9 @@
 </template>
 
 <script>
-import datav from './components/baozuo-demo/index.vue' 
-//import datav from './components/datav/index.vue' 
+// import datav from './components/baozuo-demo/index.vue' 
+// import datav from './components/datav/index.vue' 
+import datav from './components/zidingyi/index.vue' 
 
 export default {
   name: 'app',
diff --git a/src/api.js b/src/api.js
index 5753363..d3b9b3e 100644
--- a/src/api.js
+++ b/src/api.js
@@ -6,7 +6,7 @@ const api = {
   //永盛
   baseURL2: 'http://123.207.37.67:9001', 
 
-  baseURL: '', 
+  baseURL: 'http://36.139.158.169:9261', 
 
   get (url) {
     return new Promise((resolve, reject) => {
diff --git a/src/components/datav/index.vue b/src/components/datav/index.vue
index 0d303db..0e51d06 100644
--- a/src/components/datav/index.vue
+++ b/src/components/datav/index.vue
@@ -442,9 +442,11 @@ export default {
     display: flex;
     flex-direction: column;
   }
-  .row1-col1,.row1-col2,.row2-col1,.row2-col2{
+  .row1-col1,.row1-col2,.row1-col3,.row2-col1,.row2-col2,.row2-col3{
     box-sizing: border-box;
     overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
   }
   .main-content {
     flex: 1;
diff --git a/src/components/zidingyi/barChart.vue b/src/components/zidingyi/barChart.vue
new file mode 100644
index 0000000..ccc116b
--- /dev/null
+++ b/src/components/zidingyi/barChart.vue
@@ -0,0 +1,77 @@
+<template>
+    <div id="bar-chart">
+      <div class="rose-chart-title" >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: 100%;
+    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: 0.5rem;
+      padding-top: 0.1rem;
+      font-weight: bold;
+      text-indent: 0.2rem;
+      // font-size: 20px;
+      justify-content: center;
+      display: flex;
+      align-items: center;
+    }
+  
+    #bar-chart-container {
+      height: calc(~"100% - 0.5rem");
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/zidingyi/cards.vue b/src/components/zidingyi/cards.vue
new file mode 100644
index 0000000..482ad7a
--- /dev/null
+++ b/src/components/zidingyi/cards.vue
@@ -0,0 +1,189 @@
+<template>
+  <div id="cards">
+    <div
+      class="card-item"
+      v-for="(card, i) in cards"
+      :key="card.title"
+    >
+      <div class="card-header">
+        <div class="card-header-left">{{ card.title }}</div>
+        <div class="card-header-right">{{ '0' + (i + 1) }}</div>
+      </div>
+      <dv-charts class="ring-charts" :option="card.ring" />
+      <div class="card-footer">
+        <div class="card-footer-item">
+          <div class="footer-title">总数量</div>
+          <div class="footer-detail">
+            <dv-digital-flop :config="card.total" style="width:70%;height:35px;" />个
+          </div>
+        </div>
+        <div class="card-footer-item">
+          <div class="footer-title">上报数量</div>
+          <div class="footer-detail">
+            <dv-digital-flop :config="card.num" style="width:70%;height:35px;" />个
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Cards',
+  props: ['BottomData'],
+  data () {
+    return {
+      cards: []
+    }
+  },
+  methods: {
+    createData () {
+      console.log('+++', this.BottomData)
+      this.cards = this.BottomData.map((foo, i) => ({
+        title: '-' + foo.name + '-上报完成率',
+        total: {
+          number: [foo.details.length],
+          content: '{nt}',
+          textAlign: 'right',
+          style: {
+            fill: '#ea6027',
+            fontWeight: 'bold'
+          }
+        },
+        num: {
+          number: [foo.details.filter((item) => { return item.reportID }).length],
+          content: '{nt}',
+          textAlign: 'right',
+          style: {
+            fill: '#26fcd8',
+            fontWeight: 'bold'
+          }
+        },
+        ring: {
+          series: [
+            {
+              type: 'gauge',
+              startAngle: -Math.PI / 2,
+              endAngle: Math.PI * 1.5,
+              arcLineWidth: 13,
+              radius: '80%',
+              data: [
+                { name: '上报占比', value: Math.floor((foo.details.filter((item) => { return item.reportID }).length / foo.details.length) * 100) }
+              ],
+              axisLabel: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              pointer: {
+                show: false
+              },
+              backgroundArc: {
+                style: {
+                  stroke: '#224590'
+                }
+              },
+              details: {
+                show: true,
+                formatter: '上报占比{value}%',
+                style: {
+                  fill: '#1ed3e5',
+                  fontSize: 20
+                }
+              }
+            }
+          ],
+          color: ['#03d3ec']
+        }
+      }))
+    },
+    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(this.createData, 30000)
+  }
+}
+</script>
+
+<style lang="less">
+#cards {
+  display: flex;
+  justify-content: space-between;
+  height: 45%;
+
+  .card-item {
+    background-color: rgba(6, 30, 93, 0.5);
+    border-top: 2px solid rgba(1, 153, 209, .5);
+    width: 19%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-header {
+    display: flex;
+    height: 20%;
+    align-items: center;
+    justify-content: space-between;
+
+    .card-header-left {
+      font-size: 18px;
+      font-weight: bold;
+      padding-left: 20px;
+    }
+
+    .card-header-right {
+      padding-right: 20px;
+      font-size: 40px;
+      color: #03d3ec;
+    }
+  }
+
+  .ring-charts {
+    height: 55%;
+  }
+
+  .card-footer {
+    height: 25%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .card-footer-item {
+    padding: 5px 10px 0px 10px;
+    box-sizing: border-box;
+    width: 40%;
+    background-color: rgba(6, 30, 93, 0.7);
+    border-radius: 3px;
+
+    .footer-title {
+      font-size: 15px;
+      margin-bottom: 5px;
+    }
+
+    .footer-detail {
+      font-size: 20px;
+      color: #1294fb;
+      display: flex;
+      font-size: 18px;
+      align-items: center;
+
+      .dv-digital-flop {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/zidingyi/digitalFlop.vue b/src/components/zidingyi/digitalFlop.vue
new file mode 100644
index 0000000..3dff5a6
--- /dev/null
+++ b/src/components/zidingyi/digitalFlop.vue
@@ -0,0 +1,285 @@
+<template>
+  <div id="digital-flop">
+    <h3 style="width: 8%;text-align:center;">今日任务</h3>
+    <div
+      class="digital-flop-item"
+      v-for="item in digitalFlopData"
+      :key="item.title"
+    >
+      <div class="digital-flop-title">{{ item.title }}</div>
+      <div class="digital-flop">
+        <dv-digital-flop
+          :config="item.number"
+          style="width:100px;height:50px;"
+        />
+          <div class="unit">{{ item.unit }}</div>
+        <dv-digital-flop
+          :config="item.unNumber"
+          style="width:100px;height:50px;"
+        />
+        <div class="unit">个事务项未上报</div>
+      </div>
+    </div>
+
+    <dv-decoration-10 />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DigitalFlop',
+  props: ['TodayData', 'Type'],
+  data () {
+    return {
+      digitalFlopData: []
+    }
+  },
+  methods: {
+    createData () {
+      // if (this.Type === 'dinner') {
+      //   this.digitalFlopData = [
+      //     {
+      //       title: '早餐',
+      //       number: {
+      //         number: [this.TodayData.filter((item) => { return item.className === '早餐' && item.reportID }).length],
+      //         content: '{nt}',
+      //         textAlign: 'center',
+      //         style: {
+      //           fill: '#4d99fc',
+      //           fontWeight: 'bold'
+      //         }
+      //       },
+      //       unNumber: {
+      //         number: [this.TodayData.filter((item) => { return item.className === '早餐' && !item.reportID }).length],
+      //         content: '{nt}',
+      //         textAlign: 'center',
+      //         style: {
+      //           fill: '#B80000',
+      //           fontWeight: 'bold'
+      //         }
+      //       },
+      //       unit: '个事务项已上报'
+      //     },
+      //     {
+      //       title: '午餐',
+      //       number: {
+      //         number: [this.TodayData.filter((item) => { return item.className === '午餐' && item.reportID }).length],
+      //         content: '{nt}',
+      //         textAlign: 'center',
+      //         style: {
+      //           fill: '#4d99fc',
+      //           fontWeight: 'bold'
+      //         }
+      //       },
+      //       unNumber: {
+      //         number: [this.TodayData.filter((item) => { return item.className === '午餐' && !item.reportID }).length],
+      //         content: '{nt}',
+      //         textAlign: 'center',
+      //         style: {
+      //           fill: '#B80000',
+      //           fontWeight: 'bold'
+      //         }
+      //       },
+      //       unit: '个事务项已上报'
+      //     },
+      //     {
+      //       title: '晚餐',
+      //       number: {
+      //         number: [this.TodayData.filter((item) => { return item.className === '晚餐' && item.reportID }).length],
+      //         content: '{nt}',
+      //         textAlign: 'center',
+      //         style: {
+      //           fill: '#4d99fc',
+      //           fontWeight: 'bold'
+      //         }
+      //       },
+      //       unNumber: {
+      //         number: [this.TodayData.filter((item) => { return item.className === '晚餐' && !item.reportID }).length],
+      //         content: '{nt}',
+      //         textAlign: 'center',
+      //         style: {
+      //           fill: '#B80000',
+      //           fontWeight: 'bold'
+      //         }
+      //       },
+      //       unit: '个事务项已上报'
+      //     },
+      //     {
+      //       title: '夜宵',
+      //       number: {
+      //         number: [this.TodayData.filter((item) => { return item.className === '夜宵' && item.reportID }).length],
+      //         content: '{nt}',
+      //         textAlign: 'center',
+      //         style: {
+      //           fill: '#4d99fc',
+      //           fontWeight: 'bold'
+      //         }
+      //       },
+      //       unNumber: {
+      //         number: [this.TodayData.filter((item) => { return item.className === '夜宵' && !item.reportID }).length],
+      //         content: '{nt}',
+      //         textAlign: 'center',
+      //         style: {
+      //           fill: '#B80000',
+      //           fontWeight: 'bold'
+      //         }
+      //       },
+      //       unit: '个事务项已上报'
+      //     }
+      //   ]
+      // } else if (this.Type === 'total') {
+      this.digitalFlopData = [
+        {
+          title: '早餐',
+          number: {
+            number: [this.TodayData.filter((item) => { return item.className === '早餐' && item.quantityDone }).length],
+            content: '{nt}',
+            textAlign: 'center',
+            style: {
+              fill: '#4d99fc',
+              fontWeight: 'bold'
+            }
+          },
+          unNumber: {
+            number: [this.TodayData.filter((item) => { return item.className === '早餐' && !item.quantityDone }).length],
+            content: '{nt}',
+            textAlign: 'center',
+            style: {
+              fill: '#B80000',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '个事务项已上报'
+        },
+        {
+          title: '午餐',
+          number: {
+            number: [this.TodayData.filter((item) => { return item.className === '午餐' && item.quantityDone }).length],
+            content: '{nt}',
+            textAlign: 'center',
+            style: {
+              fill: '#4d99fc',
+              fontWeight: 'bold'
+            }
+          },
+          unNumber: {
+            number: [this.TodayData.filter((item) => { return item.className === '午餐' && !item.quantityDone }).length],
+            content: '{nt}',
+            textAlign: 'center',
+            style: {
+              fill: '#B80000',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '个事务项已上报'
+        },
+        {
+          title: '晚餐',
+          number: {
+            number: [this.TodayData.filter((item) => { return item.className === '晚餐' && item.quantityDone }).length],
+            content: '{nt}',
+            textAlign: 'center',
+            style: {
+              fill: '#4d99fc',
+              fontWeight: 'bold'
+            }
+          },
+          unNumber: {
+            number: [this.TodayData.filter((item) => { return item.className === '晚餐' && !item.quantityDone }).length],
+            content: '{nt}',
+            textAlign: 'center',
+            style: {
+              fill: '#B80000',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '个事务项已上报'
+        },
+        {
+          title: '夜宵',
+          number: {
+            number: [this.TodayData.filter((item) => { return item.className === '夜宵' && item.quantityDone }).length],
+            content: '{nt}',
+            textAlign: 'center',
+            style: {
+              fill: '#4d99fc',
+              fontWeight: 'bold'
+            }
+          },
+          unNumber: {
+            number: [this.TodayData.filter((item) => { return item.className === '夜宵' && !item.quantityDone }).length],
+            content: '{nt}',
+            textAlign: 'center',
+            style: {
+              fill: '#B80000',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '个事务项已上报'
+        }
+      ]
+      // }
+    },
+    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()
+  }
+}
+</script>
+
+<style lang="less">
+#digital-flop {
+  position: relative;
+  height: 15%;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgba(6, 30, 93, 0.5);
+
+  .dv-decoration-10 {
+    position: absolute;
+    width: 95%;
+    left: 2.5%;
+    height: 5px;
+    bottom: 0px;
+  }
+
+  .digital-flop-item {
+    width: 23%;
+    height: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-left: 3px solid rgb(6, 30, 93);
+    border-right: 3px solid rgb(6, 30, 93);
+  }
+
+  .digital-flop-title {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+
+  .digital-flop {
+    display: flex;
+  }
+
+  .unit {
+    margin-left: 10px;
+    display: flex;
+    align-items: flex-end;
+    box-sizing: border-box;
+    padding-bottom: 13px;
+  }
+}
+</style>
diff --git a/src/components/zidingyi/img/bg.png b/src/components/zidingyi/img/bg.png
new file mode 100644
index 0000000..54aa045
Binary files /dev/null and b/src/components/zidingyi/img/bg.png differ
diff --git a/src/components/zidingyi/index.js b/src/components/zidingyi/index.js
new file mode 100644
index 0000000..5ab58d5
--- /dev/null
+++ b/src/components/zidingyi/index.js
@@ -0,0 +1,21 @@
+import BarChart from './barChart.vue'
+import StackedBarChart from './barChart.vue'
+import DynamicBarChart from './barChart.vue'
+import PieChart from './roseChart.vue'
+import RingChart from './roseChart.vue'
+import RoseChart from './roseChart.vue'
+import LineChart from './scrollBoard.vue'
+import AreaChart from './scrollBoard.vue'
+import StackedLineChart from './scrollBoard.vue'
+
+export default {
+  BarChart,
+  StackedBarChart,
+  DynamicBarChart,
+  PieChart,
+  RingChart,
+  RoseChart,
+  LineChart,
+  AreaChart,
+  StackedLineChart
+}
diff --git a/src/components/zidingyi/index.vue b/src/components/zidingyi/index.vue
new file mode 100644
index 0000000..a3d3d4a
--- /dev/null
+++ b/src/components/zidingyi/index.vue
@@ -0,0 +1,461 @@
+<template>
+  <div id="data-view">
+    <!-- <dv-full-screen-container> -->
+      <div id="dv-full-screen-container" style="width: 100%;height: 100%;position: fixed;overflow: hidden;">
+      <top-header :Name = "showData.name" :Times = "showData.times"/>
+      <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:${row1Style.width[0]}; height:${row1Style.height};`">
+            <div v-for="(rcitem,rcindex) in row1col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
+              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
+                <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)">{{ rcitem.title }} </div>
+                <div class="rankHeader" style="display: flex;">
+                  <p style="width: 0.5rem;text-align: center;">#</p>
+                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
+                </div>
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <ul class="item" >
+                  <li v-for="(item, index) in rcitem.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">
+                      <div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div> 
+                    </div>
+                    <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
+                  </li>
+                </ul>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
+              </div>
+              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
+                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
+              </div>
+            </div>
+          </div>
+          <div class="row1-col2" v-if="row1col2report.length>0" :style="`width:${row1Style.width[1]}; height:${row1Style.height};`">
+            <div v-for="(rcitem,rcindex) in row1col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
+              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
+                <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)">{{ rcitem.title }} </div>
+                <div class="rankHeader" style="display: flex;">
+                  <p style="width: 0.5rem;text-align: center;">#</p>
+                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
+                </div>
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}"> -->
+                  <!-- <ul class="item">
+                    <li v-for="(item, index) in rcitem.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">
+                        <div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div> 
+                      </div>
+                      <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
+                    </li>
+                  </ul> -->
+                <!-- </vue-seamless-scroll> -->
+
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
+              </div>
+              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
+                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
+              </div>
+            </div>
+          </div>
+          <div class="row1-col3" v-if="row1col3report.length>0" :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+';'"/>
+                  <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 v-for="(rcitem,rcindex) in row1col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
+              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
+                <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)">{{ rcitem.title }} </div>
+                <div class="rankHeader" style="display: flex;">
+                  <p style="width: 0.5rem;text-align: center;">#</p>
+                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
+                </div>
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <ul class="item" >
+                  <li v-for="(item, index) in rcitem.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">
+                      <div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
+                    </div>
+                    <div v-for="i in rankHeader1" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
+                  </li>
+                </ul>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
+              </div>
+              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
+                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
+              </div>
+            </div>
+          </div>
+          <div class="row2-col1" v-if="row2col1report.length>0" :style="`width:${row2Style.width[0]}; height:${row2Style.height};margin-top: 0.1rem;`">
+            <div v-for="(rcitem,rcindex) in row2col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
+              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
+                <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)">{{ rcitem.title }} </div>
+                <div class="rankHeader" style="display: flex;">
+                  <p style="width: 0.5rem;text-align: center;">#</p>
+                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
+                </div>
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <ul class="item" >
+                  <li v-for="(item, index) in rcitem.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">
+                      <div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
+                    </div>
+                    <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
+                  </li>
+                </ul>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
+              </div>
+              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
+                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
+              </div>
+            </div>
+          </div>
+          <div class="row2-col2" v-if="row2col2report.length>0" :style="`width:${row2Style.width[1]}; height:${row2Style.height};margin-top: 0.1rem;`">
+            <div v-for="(rcitem,rcindex) in row2col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
+              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
+                <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)">{{ rcitem.title }} </div>
+                <div class="rankHeader" style="display: flex;">
+                  <p style="width: 0.5rem;text-align: center;">#</p>
+                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
+                </div>
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <ul class="item" >
+                  <li v-for="(item, index) in rcitem.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">
+                      <div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
+                    </div>
+                    <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
+                  </li>
+                </ul>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
+              </div>
+              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
+                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
+              </div>
+            </div>
+          </div>
+          <div class="row2-col3" v-if="row2col3report.length>0" :style="`width:${row2Style.width[2]}; height:${row2Style.height};margin-top: 0.1rem;`">
+            <div v-for="(rcitem,rcindex) in row2col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};padding:0 0.05rem;box-sizing: border-box;`">
+              <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
+                <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)">{{ rcitem.title }} </div>
+                <div class="rankHeader" style="display: flex;">
+                  <p style="width: 0.5rem;text-align: center;">#</p>
+                  <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:calc(${item.width} - ${0.5/rcitem.columns.length}rem);text-align:center;`">{{ item.name }}</p>
+                </div>
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <ul class="item" >
+                  <li v-for="(item, index) in rcitem.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">
+                      <div style="padding:0 0.05rem;box-sizing: border-box;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div>
+                    </div>
+                    <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
+                  </li>
+                </ul>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
+              </div>
+              <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
+                <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
+              </div>
+            </div>
+          </div>
+          <!-- <scroll-board  :ScrollList= "showData.scrollList" :ScrollWidth= "showData.scrollWidth" /> -->
+
+          <div class="block-top-bottom-content" style="flex: 1;"></div>
+        </div>
+        <!-- <scroll-board-bottom :ScrollList= "showData.scrollList2" :listName = "showData.listName2" /> -->
+      </div>
+      <dv-loading v-else>Loading...</dv-loading>
+    <!-- </dv-full-screen-container> -->
+    </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.6rem;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.4rem;margin: 0;padding: 0.2rem;white-space: pre-wrap;" v-html="notices[0].content"></div>
+      </div>
+  </div>
+</template>
+
+<script>
+import topHeader from './topHeader'
+// import digitalFlop from './digitalFlop'
+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'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+import pageRank from './pageRank.vue'
+
+export default {
+  name: 'DataView',
+  components: {
+    topHeader,
+    // digitalFlop,
+    rankingBoard,
+    roseChart,
+    waterLevelChart,
+    scrollBoard,
+    scrollBoardBottom,
+    cards,
+    rightTotal,
+    barChart,
+    vueSeamlessScroll,
+    pageRank
+  },
+  data () {
+    return {
+      Aid: '',
+      type: '',
+      setting: {},
+      totalData: [],
+      todayData: [],
+      notices: [],
+      showNotices:false,
+      showData: {
+        name: '',
+        times: [],
+        leftData: [],
+        reportedList: [],
+        scrollList: [],
+        scrollWidth: '20%',
+        scrollList2: [],
+        listName2:'',
+        todayData: [],
+        bottomData: [],
+        allNum: 0,
+        reportedNum: 0
+      },
+      
+      reportSettings:[],
+      rankHeader1:[],
+      rankHeader2:[],
+      rankHeader3:[],
+      row1Style:{
+        height:'65%',
+        width:['25%','50%','25%'],
+      },
+      row1col1report:[],
+      row1col2report:[],
+      row1col3report:[],
+      row2col1report:[],
+      row2col2report:[],
+      row2col3report:[],
+      row2Style:{
+        height:'35%',
+        width:['100%','0%', '0%'],
+      },
+      loadingDone: false
+    }
+  },
+  created (e) {
+    console.log(window.location.href.split('?')[1])
+    let params = window.location.href.split('?')[1];
+    let Aid = params.split('=')[1];
+    this.Aid = Aid;
+    this.createdData(Aid)
+    let that = this;
+    setInterval(()=>{
+      that.createdData(Aid)
+    }, 900000)
+  },
+  methods: {
+    createdData (Aid) {
+      let that = this
+      that.loadingDone = false;
+      this.row1col1report = [];
+      this.row1col2report = [];
+      this.row1col3report = [];
+      this.row2col1report = [];
+      this.row2col2report = [];
+      this.row2col3report = [];
+      that.showNotices = false;
+      this.$api.post2('/api/web/GetScreenReport?category='+Aid).then(res => {
+        if (res.code === '200') {
+          let data = res.data;
+          const input = data.setting.dataJson;
+          // 1. 移除所有换行和空格
+          const cleanedStr = input.replace(/\s/g, ''); // 结果: "{row1Style:{height:"65%",width:["25%","50%","25%"],},row2Style:{height:"35%",width:["100%","0%","0%"],},}"
+
+          // 2. 手动转换为合法JSON格式
+          const jsonStr = cleanedStr
+            // 给键添加双引号（例如 row1Style → "row1Style"）
+            .replace(/(\w+):/g, '"$1":')
+            // 修复尾部多余的逗号（例如 },} → }}）
+            .replace(/,}/g, '}')
+            .replace(/,]/g, ']');
+
+          // 3. 解析为对象
+          const parsed = JSON.parse(jsonStr);
+
+          // 4. 提取目标属性
+          const { row1Style, row2Style } = parsed;
+          this.row1Style = row1Style;
+          this.row2Style = row2Style;
+          
+          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.columns.length>0){
+                item.columns.sort((a,b) => a.sort - b.sort)
+              }
+              if(item.setting.rowNumber==1 && item.setting.columnNumber==1){
+                this.row1col1report.push(item)
+              }
+              if(item.setting.rowNumber==1 && item.setting.columnNumber==2){
+                this.row1col2report.push(item)
+              }
+              if(item.setting.rowNumber==1 && item.setting.columnNumber==3){
+                this.row1col3report.push(item)
+              }
+              if(item.setting.rowNumber==2 && item.setting.columnNumber==1){
+                this.row2col1report.push(item)
+              }
+              if(item.setting.rowNumber==2 && item.setting.columnNumber==2){
+                this.row2col2report.push(item)
+              }
+              if(item.setting.rowNumber==2 && item.setting.columnNumber==3){
+                this.row2col3report.push(item)
+              }
+             
+            })
+          }
+         
+          this.showData.name = data.setting.name;
+          this.loadingDone = true
+        }
+      });
+    },
+    getToday () {
+      var today = new Date() // 创建一个表示当前时间的Date对象
+      var year = today.getFullYear() // 获取当前年份（四位数）
+      var month = today.getMonth() + 1 // 获取当前月份（注意月份从0开始计算，所以需要加上1）
+      var day = today.getDate() // 获取当前日期
+      return year + '-' + month + '-' + day
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#data-view {
+  width: 100%;
+  height: 100%;
+  background-color: #030409;
+  color: #fff;
+
+  #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,.row1-col3,.row2-col1,.row2-col2,.row2-col3{
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .main-content {
+    flex: 1;
+    height: calc(100% - 1rem);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .block-left-right-content {
+    // flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 0.2rem;
+  }
+
+  .block-top-bottom-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    margin-left: 0.2rem;
+  }
+
+  .block-top-content {
+    height: 55%;
+    display: flex;
+    flex-grow: 0;
+    box-sizing: border-box;
+    // padding-bottom: 20px;
+  }
+  .rankHeader{
+    font-size: 0.2rem;
+    font-weight: bold;
+    color: #fff;
+    p{
+      margin: 0;
+      height: 0.5rem;
+      line-height: 0.5rem;
+      background-color: #1e80ff;
+      &:last-child{
+        flex: 1;
+      }
+    }
+  }
+  .warp {
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,a {
+        display: block;
+        // height: 0.5rem;
+        line-height: 0.5rem;
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.2rem;
+      }
+      .rowStyle1{
+        background-color: rgba(10, 29, 50, 0.8);
+      }
+      .rowStyle2{
+        background-color: rgba(0, 44, 81, 0.8);
+      }
+    }
+  }
+  #dv-full-screen-container2 .inner-content{
+      p{
+        margin: 0;
+        font-size: 0.3rem;
+      }
+  }
+}
+.inner-content{
+  h1,h2,h3{margin:0;}
+  h1{font-size: 1rem;}
+  h2{font-size: 0.6rem;}
+}
+</style>
diff --git a/src/components/zidingyi/pageRank.vue b/src/components/zidingyi/pageRank.vue
new file mode 100644
index 0000000..508f721
--- /dev/null
+++ b/src/components/zidingyi/pageRank.vue
@@ -0,0 +1,99 @@
+<template>
+     <div class="warp" :id="warpId" style="height: calc(100% - 0.9rem);">
+        <ul class="item warpItem">
+        <li v-for="(item, index) in showData" :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">
+            <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{item.seq}}</div> 
+            </div>
+            <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
+        </li>
+        </ul>
+    </div>
+</template>
+<script>
+export default {
+    props:{
+        rcitem:{},
+        warpId:'',
+        pageSize:0,
+        switchSpeed:0,
+    },
+    data() {
+        return {
+            nowPgae:0,
+            showData:[],
+            allData:[],
+            timer:null,
+        }
+    },
+    mounted(){
+        console.log('mounted')
+        this.rcitem.data.forEach((item,index) => {
+            item.seq = index+1;
+        })
+        for(let i=0;i<this.rcitem.data.length;i += this.pageSize){
+            this.allData.push(this.rcitem.data.slice(i,i+this.pageSize));
+        }
+        // this.allData = this.rcitem.data;
+        // let warpbox = window.document.querySelector('#'+this.warpId);
+        // let warpItem = window.document.querySelector('#'+this.warpId+' .warpItem');
+        // let warpboxHeight = warpbox.clientHeight;
+        // let warpItemHeight = warpItem.clientHeight;
+        let warpPageNumber = this.allData.length;
+        let that = this;
+        that.showData = that.allData[0];
+        if(warpPageNumber>1){
+        this.timer = setInterval(()=>{
+            // that.pageNext(warpItem,warpPageNumber,warpboxHeight);
+            that.pageNext(warpPageNumber)
+        },this.switchSpeed*1000)
+        }
+       
+    },
+    methods:{
+        pageNext(allPage){
+            if(this.nowPgae<(allPage-1)){
+                // Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
+                this.nowPgae++;
+                this.showData = this.allData[this.nowPgae];
+               
+            }else{
+                this.nowPgae = 0;
+                this.showData = this.allData[this.nowPgae];
+                // Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
+            }
+        }
+    },
+    beforeDestroy(){
+        console.log('beforeUnmount')
+        clearInterval(this.timer)
+    }
+}
+</script>
+<style lang="less">
+     .warp {
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,a {
+        display: block;
+        // height: 0.5rem;
+        line-height: 0.5rem;
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.2rem;
+      }
+      .rowStyle1{
+        background-color: rgba(10, 29, 50, 0.8);
+      }
+      .rowStyle2{
+        background-color: rgba(0, 44, 81, 0.8);
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/zidingyi/rankingBoard.vue b/src/components/zidingyi/rankingBoard.vue
new file mode 100644
index 0000000..b32a348
--- /dev/null
+++ b/src/components/zidingyi/rankingBoard.vue
@@ -0,0 +1,64 @@
+<template>
+  <div id="ranking-board">
+    <div class="ranking-board-title">{{Type === 'total'?'各个学校事务项':'事务项'}}上报数量</div>
+    <dv-scroll-ranking-board :config="config" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankingBoard',
+  props: ['LeftData', 'Type'],
+  data () {
+    return {
+      config: {
+        data: [ ],
+        rowNum: 10
+      }
+    }
+  },
+  created () {
+    if (this.Type === 'dinner') {
+      this.config.data = this.LeftData.map((item) => {
+        return {
+          name: item.name,
+          value: item.details.length
+        }
+      })
+    }
+    if (this.Type === 'total') {
+      this.config.data = this.LeftData.map((item) => {
+        return {
+          name: item.dinnerName,
+          value: item.quantityDone
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#ranking-board {
+  width: 20%;
+  box-shadow: 0 0 3px blue;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(6, 30, 93, 0.5);
+  border-top: 2px solid rgba(1, 153, 209, .5);
+  box-sizing: border-box;
+  padding: 0px 30px;
+
+  .ranking-board-title {
+    font-weight: bold;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+  }
+
+  .dv-scroll-ranking-board {
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/components/zidingyi/rightTotal.vue b/src/components/zidingyi/rightTotal.vue
new file mode 100644
index 0000000..0199527
--- /dev/null
+++ b/src/components/zidingyi/rightTotal.vue
@@ -0,0 +1,75 @@
+<template>
+  <div id="right-total">
+    <div class="right-total-title">{{Type === 'total'?'各个学校事务项':'事务项'}}上报情况</div>
+    <div class="right-total-item" v-for= "item in rightData" :key="item.id">
+        <p>{{ item.name }} 上报率</p>
+        <dv-percent-pond :config="item.config" style="width:300px;height:60px;" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankingBoard',
+  props: ['LeftData', 'Type'],
+  data () {
+    return {
+      config: {
+        data: [ ],
+        rowNum: 10
+      },
+      rightData: []
+    }
+  },
+  created () {
+    this.rightData = this.LeftData.map((item) => {
+      return {
+        id: item.ID,
+        name: item.dinnerName,
+        value: item.quantityDone,
+        config: {
+          value: Math.floor((item.quantityDone / item.quantity) * 100),
+          borderWidth: 5,
+          borderRadius: 10,
+          borderGap: 5
+        }
+      }
+    })
+    this.rightData.sort((a, b) => b.config.value - a.config.value)
+  }
+}
+</script>
+
+<style lang="less">
+#right-total {
+  width: 50%;
+  box-shadow: 0 0 3px blue;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(6, 30, 93, 0.5);
+  border-top: 2px solid rgba(1, 153, 209, .5);
+  box-sizing: border-box;
+  padding: 0px 30px;
+
+  .right-total-title {
+    font-weight: bold;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+  }
+
+  .dv-scroll-ranking-board {
+    flex: 1;
+  }
+  .right-total-item{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    p{
+        font-size: 20px;
+        margin-right: 20px;
+    }
+  }
+}
+</style>
diff --git a/src/components/zidingyi/roseChart.vue b/src/components/zidingyi/roseChart.vue
new file mode 100644
index 0000000..d2573e3
--- /dev/null
+++ b/src/components/zidingyi/roseChart.vue
@@ -0,0 +1,101 @@
+<template>
+  <div id="rose-chart">
+    <div class="rose-chart-title">---{{chartData?chartData.title:''}}---</div> 
+    <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: {}
+    }
+  },
+  methods: {
+    createData () {
+ 
+      var myChart = echarts.init(document.getElementById(this.pieId));
+        this.option = {
+          
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'horizontal',
+            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)
+            },
+            
+          },
+          series: [
+            {
+              name: '数据详情',
+              type: 'pie',
+              radius: '50%',
+              data: this.chartData.data,
+              emphasis: {
+                textStyle: {
+                 color: 'rgba(0,0,0,0)'
+                }
+              },
+              label: {
+                color: '#fff',
+                fontSize:this.$fontSize(0.12),
+                formatter: '{b}: {d}%'
+                
+              },
+            }
+          ]
+        };
+        myChart.setOption(this.option);
+    } 
+  },
+  mounted () {
+    console.log(this.pieId)
+    const { createData } = this
+
+    createData()
+ 
+  }
+}
+</script>
+
+<style lang="less">
+#rose-chart {
+  // width: 33.33%;
+  // height: 55%;
+  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: 0.5rem;
+    font-weight: bold;
+    text-indent: 0.2rem;
+    font-size: 0.2rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .pie-chart-container {
+      height: calc(100% - 0.5rem);
+    }
+}
+</style>
diff --git a/src/components/zidingyi/scrollBoard.vue b/src/components/zidingyi/scrollBoard.vue
new file mode 100644
index 0000000..a977707
--- /dev/null
+++ b/src/components/zidingyi/scrollBoard.vue
@@ -0,0 +1,60 @@
+<template>
+  <div id="scroll-board" :style="`width:${ScrollWidth}`">
+    <dv-scroll-board  :config="config" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollBoard',
+  props: ['ScrollList','ScrollWidth'],
+  data () {
+    return {
+      config: {
+        rankName:'rank1',
+        header: ['员工', '工序', '上报量'],
+        data: [
+        ],
+        index: true,
+        columnWidth: [100, 150, 200],
+        align: ['center', 'center', 'center', 'center'],
+        rowNum: 12,
+        headerBGC: '#1981f6',
+        headerHeight: 50,
+        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
+        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
+      }
+    }
+  },
+  created () {
+    console.log(this.ScrollList)
+    this.config.headerHeight = this.$fontSize(0.50);
+    this.config.columnWidth = [this.$fontSize(0.75),this.$fontSize(1),this.$fontSize(2)];
+    this.config.data = JSON.parse(JSON.stringify(this.ScrollList))
+  },
+  mounted(){
+    // let arr = document.getElementsByClassName('dv-scroll-board');
+    // console.log(arr)
+  }
+}
+</script>
+
+<style lang="less">
+#scroll-board {
+  //width:25%;
+  box-sizing: border-box;
+  margin-left: 0.2rem;
+  height: 100%;
+  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>
diff --git a/src/components/zidingyi/scrollBoardBottom.vue b/src/components/zidingyi/scrollBoardBottom.vue
new file mode 100644
index 0000000..776d8c4
--- /dev/null
+++ b/src/components/zidingyi/scrollBoardBottom.vue
@@ -0,0 +1,60 @@
+<template>
+  <div id="scroll-board-bottom">
+    <p style="width: 100%;text-align: center;font-size: 0.25rem;font-weight: bold;height: 0.4rem;line-height: 0.4rem;margin: 0;"> {{listName}}</p>
+    <dv-scroll-board :config="config" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollBoard',
+  props: ['ScrollList','listName'],
+  data () {
+    return {
+      config: {
+        header: ['业务订单号', '产品名', '总布产数','合格数','合格率','不良数','不良率','废品数','废品率','最迟货期'],
+        data: [
+        ],
+        index: true,
+        columnWidth: [100],
+        align: ['center', '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)',
+        carousel:'page',
+        waitTime:'4000',
+      }
+    }
+  },
+  created () {
+    this.config.headerHeight = this.$fontSize(0.50);
+    this.config.columnWidth = [this.$fontSize(1),this.$fontSize(2.5),this.$fontSize(5),this.$fontSize(2),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(1.5),this.$fontSize(2)];
+    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: calc(35% - 0.3rem);
+  overflow: hidden;
+}
+
+</style>
+<style>
+#scroll-board-bottom .dv-scroll-board{
+  height: calc(100% - 0.3rem);
+}
+.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>
diff --git a/src/components/zidingyi/topHeader.vue b/src/components/zidingyi/topHeader.vue
new file mode 100644
index 0000000..7ce8dec
--- /dev/null
+++ b/src/components/zidingyi/topHeader.vue
@@ -0,0 +1,47 @@
+<template>
+  <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="false" />
+    <div class="center-title" :style="'font-size:'+$fontSize(0.3)+'px'">{{Name}}</div>
+    <!-- ({{ Times[0]+ ' 到 ' +Times[1] }}) -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopHeader',
+  props: ['Name', 'Times']
+}
+</script>
+
+<style lang="less">
+#top-header {
+  position: relative;
+  width: 100%;
+  // height: 1rem;
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+
+  .header-center-decoration {
+    width: 40%;
+    height: 0.6rem;
+  }
+
+  .header-left-decoration, .header-right-decoration {
+    width: 25%;
+    height: 0.6rem;
+  }
+
+  .center-title {
+    position: absolute;
+    // font-size: 30px;
+    font-weight: bold;
+    left: 50%;
+    top: 0.15rem;
+    transform: translateX(-50%);
+  }
+  
+}
+</style>
diff --git a/src/components/zidingyi/waterLevelChart.vue b/src/components/zidingyi/waterLevelChart.vue
new file mode 100644
index 0000000..9c23098
--- /dev/null
+++ b/src/components/zidingyi/waterLevelChart.vue
@@ -0,0 +1,93 @@
+<template>
+  <div id="water-level-chart">
+    <div class="water-level-chart-title">{{ Times[0]+ ' 到 ' +Times[1] }}事务项上报情况</div>
+
+    <div class="water-level-chart-details">
+      共<span>{{AllNum}}</span>个事务项，累计上报<span>{{ReportedNum}}</span>个事务项
+    </div>
+
+    <div class="chart-container">
+      <dv-water-level-pond :config="config" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WaterLevelChart',
+  props: ['Times', 'AllNum', 'ReportedNum'],
+  data () {
+    return {
+      config: {
+        data: [],
+        shape: 'round',
+        waveHeight: 25,
+        waveNum: 2
+      }
+    }
+  },
+  created () {
+    this.config.data = [Math.floor((this.ReportedNum / this.AllNum) * 100)]
+  }
+}
+</script>
+
+<style lang="less">
+#water-level-chart {
+  width: 46%;
+  box-sizing: border-box;
+  margin-left: 20px;
+  background-color: rgba(6, 30, 93, 0.5);
+  border-top: 2px solid rgba(1, 153, 209, .5);
+  display: flex;
+  flex-direction: column;
+
+  .water-level-chart-title {
+    font-weight: bold;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    justify-content: center;
+  }
+
+  .water-level-chart-details {
+    height: 15%;
+    display: flex;
+    justify-content: center;
+    font-size: 17px;
+    align-items: flex-end;
+
+    span {
+      font-size: 35px;
+      font-weight: bold;
+      color: #58a1ff;
+      margin: 0 5px;
+      margin-bottom: -5px;
+    }
+  }
+
+  .chart-container {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dv-water-pond-level {
+    max-width: 90%;
+    width: 200px;
+    height: 200px;
+    border: 10px solid #19c3eb;
+    border-radius: 50%;
+
+    ellipse {
+      stroke: transparent !important;
+    }
+
+    text {
+      font-size: 40px;
+    }
+  }
+}
+</style>