diff --git a/src/views/kban/comps/cards.vue b/src/views/kban/comps/cards.vue
new file mode 100644
index 0000000..5bc06e4
--- /dev/null
+++ b/src/views/kban/comps/cards.vue
@@ -0,0 +1,190 @@
+<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',
+  data () {
+    return {
+      cards: []
+    }
+  },
+  methods: {
+    createData () {
+      const { randomExtend } = this
+
+      const arr=['上料','抛丸','理料','划线','切割']
+      this.cards = new Array(5).fill(0).map((foo, i) => ({
+        title: arr[i],
+        total: {
+          number: [randomExtend(100, 400)],
+          content: '{nt}',
+          textAlign: 'right',
+          style: {
+            fill: '#ea6027',
+            fontWeight: 'bold'
+          }
+        },
+        num: {
+          number: [randomExtend(300, 600)],
+          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: randomExtend(40, 60) }
+              ],
+              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/views/kban/comps/digitalFlop.vue b/src/views/kban/comps/digitalFlop.vue
new file mode 100644
index 0000000..ba29ef6
--- /dev/null
+++ b/src/views/kban/comps/digitalFlop.vue
@@ -0,0 +1,231 @@
+<template>
+  <div id="digital-flop">
+    <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>
+      </div>
+    </div>
+
+    <dv-decoration-10 />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DigitalFlop',
+  data () {
+    return {
+      digitalFlopData: []
+    }
+  },
+  methods: {
+    createData () {
+      const { randomExtend } = this
+
+      this.digitalFlopData = [
+        {
+          title: '上料',
+          number: {
+            number: [randomExtend(20000, 30000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#4d99fc',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '张'
+        },
+        {
+          title: '抛丸',
+          number: {
+            number: [randomExtend(20000, 30000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#f46827',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '张'
+        },
+        {
+          title: '理料',
+          number: {
+            number: [randomExtend(20000, 30000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#40faee',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '张'
+        },
+        {
+          title: '划线',
+          number: {
+            number: [randomExtend(30000, 50000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#4d99fc',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '米'
+        },
+        {
+          title: '切割',
+          number: {
+            number: [randomExtend(30000, 50000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#f46827',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '米'
+        },
+        {
+          title: '坡口',
+          number: {
+            number: [randomExtend(5000, 10000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#40faee',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '件'
+        },
+        {
+          title: '打磨',
+          number: {
+            number: [randomExtend(5000, 10000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#4d99fc',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '件'
+        },
+        {
+          title: '曲加工',
+          number: {
+            number: [randomExtend(5000, 10000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#f46827',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '件'
+        },
+        {
+          title: '预配盘',
+          number: {
+            number: [randomExtend(10000, 20000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#40faee',
+              fontWeight: 'bold'
+            }
+          },
+          unit: '件'
+        },
+        {
+          title: '配送',
+          number: {
+            number: [randomExtend(500, 1000)],
+            content: '{nt}',
+            textAlign: 'right',
+            style: {
+              fill: '#40faee',
+              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()
+
+    setInterval(createData, 30000)
+  }
+}
+</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: 11%;
+    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/views/kban/comps/rankingBoard.vue b/src/views/kban/comps/rankingBoard.vue
new file mode 100644
index 0000000..7e76f23
--- /dev/null
+++ b/src/views/kban/comps/rankingBoard.vue
@@ -0,0 +1,82 @@
+<template>
+  <div id="ranking-board">
+    <div class="ranking-board-title">本月完工数量</div>
+    <dv-scroll-ranking-board :config="config" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankingBoard',
+  data () {
+    return {
+      config: {
+        data: [
+          {
+            name: '上料',
+            value: 120
+          },
+          {
+            name: '切割',
+            value: 55
+          },
+          {
+            name: '理料',
+            value: 78
+          },
+          {
+            name: '划线',
+            value: 66
+          },
+          {
+            name: '抛丸',
+            value: 80
+          },
+          {
+            name: '坡口',
+            value: 45
+          },
+          {
+            name: '打磨',
+            value: 29
+          },
+          {
+            name: '曲加工',
+            value: 29
+          },
+          {
+            name: '预配盘',
+            value: 29
+          }
+        ],
+        rowNum: 9
+      }
+    }
+  }
+}
+</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/views/kban/comps/roseChart.vue b/src/views/kban/comps/roseChart.vue
new file mode 100644
index 0000000..bb7fa32
--- /dev/null
+++ b/src/views/kban/comps/roseChart.vue
@@ -0,0 +1,95 @@
+<template>
+  <div id="rose-chart">
+    <div class="rose-chart-title">累计计量产量分布(吨)</div>
+    <dv-charts :option="option" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RoseChart',
+  data () {
+    return {
+      option: {}
+    }
+  },
+  methods: {
+    createData () {
+      const { randomExtend } = this
+
+      this.option = {
+        series: [
+          {
+            type: 'pie',
+            radius: '50%',
+            roseSort: false,
+            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,
+              style: {
+                fill: '#fff'
+              },
+              labelLineStyle: {
+                stroke: '#fff'
+              }
+            },
+            roseType: true
+          }
+        ],
+        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)
+  }
+}
+</script>
+
+<style lang="less">
+#rose-chart {
+  width: 30%;
+  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: 50px;
+    font-weight: bold;
+    text-indent: 20px;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .dv-charts-container {
+    height: calc(~"100% - 50px");
+  }
+}
+</style>
diff --git a/src/views/kban/comps/scrollBoard.vue b/src/views/kban/comps/scrollBoard.vue
new file mode 100644
index 0000000..44f0c07
--- /dev/null
+++ b/src/views/kban/comps/scrollBoard.vue
@@ -0,0 +1,48 @@
+<template>
+  <div id="scroll-board">
+    <dv-scroll-board :config="config" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollBoard',
+  data () {
+    return {
+      config: {
+        header: ['日期', '船只','批次','工序', '数量', '完成'],
+        data: [
+          ['2024/07/21', 'G175K-6', '004','上料', '5', '0'],
+          ['2024/07/21', 'G175K-6', '004','抛丸', '13', '0'],
+          ['2024/07/21', 'G175K-6', '004','理料', '6', '0'],
+          ['2024/07/21', 'G175K-6', '004','划线', '2', '0'],
+          ['2024/07/21', 'G175K-6', '004','切割', '1', '0'],
+          ['2024/07/21', 'G175K-6', '004','坡口', '3', '0'],
+          ['2024/07/21', 'G175K-6', '004','打磨', '4', '0'],
+          ['2024/07/21', 'G175K-6', '004','曲加工', '2', '0'],
+          ['2024/07/21', 'G175K-6', '004','预配盘', '5', '0'],
+          ['2024/07/21', 'G175K-6', '004','配送', '3', '0']
+        ],
+        index: true,
+        // columnWidth: [50, 100, 120,50,50,50],
+        align: ['center'],
+        rowNum: 7,
+        headerBGC: '#1981f6',
+        headerHeight: 45,
+        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
+        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#scroll-board {
+  width: 50%;
+  box-sizing: border-box;
+  margin-left: 20px;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/kban/comps/topHeader.vue b/src/views/kban/comps/topHeader.vue
new file mode 100644
index 0000000..fd44caa
--- /dev/null
+++ b/src/views/kban/comps/topHeader.vue
@@ -0,0 +1,45 @@
+<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="true" />
+    <div class="center-title">生产管控综合数据</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopHeader'
+}
+</script>
+
+<style lang="less">
+#top-header {
+  position: relative;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+
+  .header-center-decoration {
+    width: 40%;
+    height: 60px;
+    margin-top: 30px;
+  }
+
+  .header-left-decoration, .header-right-decoration {
+    width: 25%;
+    height: 60px;
+  }
+
+  .center-title {
+    position: absolute;
+    font-size: 30px;
+    font-weight: bold;
+    left: 50%;
+    top: 15px;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/src/views/kban/comps/waterLevelChart.vue b/src/views/kban/comps/waterLevelChart.vue
new file mode 100644
index 0000000..7b7da3e
--- /dev/null
+++ b/src/views/kban/comps/waterLevelChart.vue
@@ -0,0 +1,87 @@
+<template>
+  <div id="water-level-chart">
+    <div class="water-level-chart-title">计划完成情况</div>
+    <div class="water-level-chart-details">
+      累计完成<span>2,356,800</span>吨
+    </div>
+    <div class="chart-container">
+      <dv-water-level-pond :config="config" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WaterLevelChart',
+  data () {
+    return {
+      config: {
+        data: [45],
+        shape: 'round',
+        waveHeight: 25,
+        waveNum: 2
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#water-level-chart {
+  width: 20%;
+  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>
diff --git a/src/views/kban/img/bg.png b/src/views/kban/img/bg.png
new file mode 100644
index 0000000..54aa045
Binary files /dev/null and b/src/views/kban/img/bg.png differ
diff --git a/src/views/kban/index.vue b/src/views/kban/index.vue
new file mode 100644
index 0000000..db3c13b
--- /dev/null
+++ b/src/views/kban/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <div id="data-view">
+    <dv-full-screen-container>
+      <top-header />
+      <div class="main-content">
+        <digital-flop />
+        <div class="block-left-right-content">
+          <ranking-board />
+          <div class="block-top-bottom-content">
+            <div class="block-top-content">
+              <rose-chart />
+              <water-level-chart />
+              <scroll-board />
+            </div>
+            <cards />
+          </div>
+        </div>
+      </div>
+    </dv-full-screen-container>
+  </div>
+</template>
+
+<script>
+import topHeader from './comps/topHeader'
+import digitalFlop from './comps/digitalFlop'
+import rankingBoard from './comps/rankingBoard'
+import roseChart from './comps/roseChart'
+import waterLevelChart from './comps/waterLevelChart'
+import scrollBoard from './comps/scrollBoard'
+import cards from './comps/cards'
+
+export default {
+  name: 'DataView',
+  components: {
+    topHeader,
+    digitalFlop,
+    rankingBoard,
+    roseChart,
+    waterLevelChart,
+    scrollBoard,
+    cards
+  },
+  data () {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less">
+#data-view {
+  width: 100%;
+  height: 100%;
+  background-color: #030409;
+  color: #fff;
+
+  #dv-full-screen-container {
+    background-image: url('img/bg.png');
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .block-left-right-content {
+    flex: 1;
+    display: flex;
+    margin-top: 20px;
+  }
+
+  .block-top-bottom-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+
+  .block-top-content {
+    height: 55%;
+    display: flex;
+    flex-grow: 0;
+    box-sizing: border-box;
+    padding-bottom: 20px;
+  }
+}
+</style>