diff --git a/package.json b/package.json
index c2af3a1a..495a3e11 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "management-system"
   ],
   "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
@@ -58,7 +59,9 @@
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",
diff --git a/src/api/kanban/dryingroom.js b/src/api/kanban/dryingroom.js
new file mode 100644
index 00000000..1a2db387
--- /dev/null
+++ b/src/api/kanban/dryingroom.js
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 获取工厂下拉列表
+export function getBoardFactory(data) {
+  return request({
+    url: '/mes/wcsInterface/getBoardFactory',
+    method: 'post',
+    data: data
+  });
+}
+// 获取烘房监控页面顶部信息
+export function getDryingRoomList(data) {
+  return request({
+    url: '/mes/wcsInterface/dryRoomDataHeader',
+    method: 'post',
+    data: data
+  });
+}
+// 获取烘房监控页面顶部信息
+export function dryRoomDataCarousel(data) {
+  return request({
+    url: '/mes/wcsInterface/dryRoomDataCarousel',
+    method: 'post',
+    data: data
+  });
+}
diff --git a/src/assets/common.less b/src/assets/common.less
new file mode 100644
index 00000000..3400edcb
--- /dev/null
+++ b/src/assets/common.less
@@ -0,0 +1,6 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  padding: 0px;
+  margin: 0px;
+}
\ No newline at end of file
diff --git a/src/assets/images/bg-exception.png b/src/assets/images/bg-exception.png
new file mode 100644
index 00000000..54aa0457
Binary files /dev/null and b/src/assets/images/bg-exception.png differ
diff --git a/src/main.js b/src/main.js
index 73204644..39e675b0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@ import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 import * as echarts from 'echarts'
 import 'echarts-gl' // 3d图表库
- 
+
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/open-platform.scss' // OpenPlatform css
 import App from './App'
@@ -39,9 +39,14 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+// Data V看板
+import dataV from '@jiaminghi/data-view'
+
+// import './assets/common.less'
 // 打印插件
 import Print from 'print-js'
 
+
 // 全局方法挂载
 Vue.prototype.$echarts = echarts
 Vue.prototype.getDicts = getDicts
@@ -66,6 +71,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(dataV)
 DictData.install()
 
 /**
diff --git a/src/router/index.js b/src/router/index.js
index a5828770..ceb28b84 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -93,6 +93,12 @@ export const constantRoutes = [
     path: "/kanban/dailyoutput",
     component: () => import("@/views/kanban/dailyoutput/index"),
     hidden: true,
+  },
+  // 看板路由
+  {
+    path: "/kanban/exception",
+    component: () => import("@/views/kanban/exception/index"),
+    hidden: true,
   },
    // 看板路由
    {
diff --git a/src/views/kanban/exception/cards.vue b/src/views/kanban/exception/cards.vue
new file mode 100644
index 00000000..0c5b5698
--- /dev/null
+++ b/src/views/kanban/exception/cards.vue
@@ -0,0 +1,231 @@
+<template xmlns:fontSize="http://www.w3.org/1999/xhtml">
+  <div>
+    <div id="cards">
+      <div style="height: 35vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data1" :key="card.title">
+        <div class="card-header">
+          <div class="card-header-left">{{ card.title }}</div>
+          <div class="card-header-right">{{ card.i }}</div>
+        </div>
+        <div class="card-box">
+        </div>
+
+        <div class="card-footer">
+          <div class="card-footer-item">
+            <div class="footer-title">烘房模式</div>
+            <div class="footer-detail">
+              <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
+                   {{ getTagModel(card.model) }}
+              </span>
+            </div>
+          </div>
+          <div class="card-footer-item">
+            <div class="footer-title">门前数量</div>
+            <div class="footer-detail">
+              <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
+                   {{ getTagText(card.dollyNumber) }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="card-footer">
+          <div class="card-footer-item">
+            <div class="footer-title">烘房温度</div>
+            <div class="footer-detail">
+              <span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
+            </div>
+          </div>
+          <div class="card-footer-item">
+            <div class="footer-title">保持时长</div>
+            <div class="footer-detail">
+              <span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <div id="cardss">
+      <div style="height: 35vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp.data2" :key="card.title">
+        <div class="card-header">
+          <div class="card-header-left">{{ card.title }}</div>
+          <div class="card-header-right">{{ (i + 9) }}</div>
+        </div>
+        <div class="card-box">
+        </div>
+
+        <div class="card-footer">
+          <div class="card-footer-item">
+            <div class="footer-title">烘房模式</div>
+            <div class="footer-detail">
+              <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
+                   {{ getTagModel(card.model) }}
+              </span>
+            </div>
+          </div>
+          <div class="card-footer-item">
+            <div class="footer-title">门前数量</div>
+            <div class="footer-detail">
+             <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
+                   {{ getTagText(card.dollyNumber) }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div class="card-footer">
+          <div class="card-footer-item">
+            <div class="footer-title">烘房温度</div>
+            <div class="footer-detail">
+              <span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
+            </div>
+          </div>
+          <div class="card-footer-item">
+            <div class="footer-title">保持时长</div>
+            <div class="footer-detail">
+              <span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import cards from "./cards";
+
+export default {
+  name: 'Cards',
+  props: ['dataProp'],
+
+  data() {
+    return {
+      cards: [],
+      cardss: [],
+    }
+  },
+  methods: {
+
+    getTagText(value) {
+      // 根据值返回要显示的文字
+      if (value === '0') {
+        return '无车';
+      } else if (value === '1') {
+        return '有车';
+      }
+    },
+
+    getTextColor(value){
+      if (value === '0') {
+        return '#26fcd8';
+      } else if (value === '1') {
+        return '#ea6027';
+      }
+    },
+
+    getTagModel(value){
+      // 根据值返回要显示的文字
+      if (value === '0') {
+        return '手动';
+      } else if (value === '1') {
+        return '自动';
+      }
+    },
+    createData () {
+
+      // this.cards = new Array(8).fill(0).map((foo, i) => ({
+      //   title: '烘房' + (i + 1),
+      //
+      // }));
+
+      this.cardss = new Array(8).fill(0).map((foo, i) => ({
+        title: '烘房' + (i + 9),
+      }));
+    },
+
+
+  },
+  mounted() {
+
+    const { createData } = this
+     createData()
+    //  setInterval(this.createData, 3000)
+  }
+}
+</script>
+
+<style lang="less">
+#cards ,#cardss {
+  display: flex;
+  justify-content: space-between;
+  height: 35vh;
+  margin-bottom: 12px;
+
+  .card-item {
+    background-color: rgba(6, 30, 93, 0.5);
+    border: 2px solid rgba(1, 153, 209, .5);
+    width: 19%!important;
+    // 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;
+    margin-top: 20px;
+  }
+
+  .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/kanban/exception/cards2.vue b/src/views/kanban/exception/cards2.vue
new file mode 100644
index 00000000..43881f8e
--- /dev/null
+++ b/src/views/kanban/exception/cards2.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+  <div id="cards">
+    <div style="height: 35vh;margin-right: 0.6vw;margin-bottom: 12px;" class="card-item" v-for="(card, i) in dataProp" :key="card.title">
+      <div class="card-header">
+        <div class="card-header-left">{{ card.title }}</div>
+        <div class="card-header-right">{{ card.i }}</div>
+      </div>
+      <div class="card-box">
+      </div>
+
+      <div class="card-footer">
+        <div class="card-footer-item">
+          <div class="footer-title">烘房模式</div>
+          <div class="footer-detail">
+            <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.model), textAlign: 'right' }">
+                   {{ getTagModel(card.model) }}
+            </span>
+          </div>
+        </div>
+        <div class="card-footer-item">
+          <div class="footer-title">门前数量</div>
+          <div class="footer-detail">
+            <span :style="{ fontSize: '25px', fontWeight: 'bold', color: getTextColor(card.dollyNumber), textAlign: 'right' }">
+                   {{ getTagText(card.dollyNumber) }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-footer">
+        <div class="card-footer-item">
+          <div class="footer-title">烘房温度</div>
+          <div class="footer-detail">
+            <span style="font-size: 25px;font-weight: bold; color: #ea6027; textAlign: 'right'">{{ card.temperature }}</span>℃
+          </div>
+        </div>
+        <div class="card-footer-item">
+          <div class="footer-title">保持时长</div>
+          <div class="footer-detail">
+            <span style="font-size: 25px;font-weight: bold; color: #26fcd8; textAlign: 'right'">{{ card.waitmin }}</span>min
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+</div>
+</template>
+
+<script>
+import cards from "./cards";
+
+export default {
+  name: 'Cards2',
+  props: ['dataProp'],
+  data() {
+    return {
+      cards: [],
+    }
+  },
+  methods: {
+    getTagText(value) {
+      // 根据值返回要显示的文字
+      if (value === '0') {
+        return '无车';
+      } else if (value === '1') {
+        return '有车';
+      }
+    },
+
+    getTextColor(value){
+      if (value === '0') {
+        return '#26fcd8';
+      } else if (value === '1') {
+        return '#ea6027';
+      }
+    },
+
+    getTagModel(value){
+      // 根据值返回要显示的文字
+      if (value === '0') {
+        return '手动';
+      } else if (value === '1') {
+        return '自动';
+      }
+    },
+    // createData () {
+    //   const { randomExtend } = this
+    //   this.cards = new Array(5).fill(0).map((foo, i) => ({
+    //     title: '烘房' + (i + 17),
+    //   }));
+    //
+    // },
+    // // this.cards=new Array(8)
+    //
+    // 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 ,#cardss {
+  display: flex;
+  justify-content: space-between;
+  height: 35vh;
+  margin-bottom: 12px;
+
+  .card-item {
+    background-color: rgba(6, 30, 93, 0.5);
+    border: 2px solid rgba(1, 153, 209, .5);
+    width: 19%!important;
+    // 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;
+    margin-top: 20px;
+  }
+
+  .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/kanban/exception/carousel.vue b/src/views/kanban/exception/carousel.vue
new file mode 100644
index 00000000..28324ee3
--- /dev/null
+++ b/src/views/kanban/exception/carousel.vue
@@ -0,0 +1,151 @@
+<template>
+  <el-carousel :interval="3000" :height="dataHeight" indicator-position="outside" @change="handleScroll">
+    <el-carousel-item   v-for="(item,k) in 2" :key="item" >
+      <h3 v-if="k===0"><cards :dataProp="cards" /></h3>
+      <h3 v-if="k===1"><cards2 :dataProp="cardss"/></h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<script>
+
+import cards2 from './cards2'
+import cards from './cards'
+
+import {
+  dryRoomDataCarousel,
+  getMesBoardEquProductionToday,
+} from "@/api/kanban/dryingroom";
+import log from "../../monitor/job/log";
+
+export default {
+
+  // 轮播图组件
+  name: 'carousel',
+  components: {
+    cards2,
+    cards
+  },
+  props: {
+    dataHeight: {
+      type: String,
+      default: '800px'
+    }
+  },
+  data () {
+    return {
+      cards: {
+        data1:[],
+        data2:[],
+      },
+
+      cardss: [],
+    }
+  },
+
+  methods: {
+    createData () {
+
+      this.cards.data1 = new Array(8).fill(0).map((foo, i) => ({
+        i:(i+1),
+
+      }));
+      this.cards.data2 = new Array(8).fill(0).map((foo, i) => ({
+        i:(i+9),
+      }));
+      this.cardss = new Array(5).fill(0).map((foo, i) => ({
+        i: (i === 0 ? 17 : i === 1 ? 18 : i === 2 ? 61 : i === 3 ? 62 : 63),
+      }));
+     // console.log(this.cards.data1)
+      dryRoomDataCarousel({ factory: 999 }).then((response) => {
+        if (response.data) {
+        //  console.log(response);
+          this.cards.data1 = this.cards.data1.map((card) => {
+            const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
+            if (matchingIndex) {
+              return {
+                ...card,
+                title: '烘房' + matchingIndex.i,
+                model: matchingIndex.status,
+                dollyNumber:matchingIndex.dollyNumber,
+                waitmin:matchingIndex.waitmin,
+                temperature:matchingIndex.temperature
+              };
+            } else {
+              return card;
+            }
+
+          });
+          this.cards.data2 = this.cards.data2.map((card) => {
+            const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
+            if (matchingIndex) {
+              return {
+                ...card,
+                title: '烘房' + matchingIndex.i,
+                model: matchingIndex.status,
+                dollyNumber:matchingIndex.dollyNumber,
+                waitmin:matchingIndex.waitmin,
+                temperature:matchingIndex.temperature
+              };
+            } else {
+              return card;
+            }
+
+          });
+
+          this.cardss = this.cardss.map((card) => {
+            const matchingIndex = response.data.dryingroomList.find((index) => index.i === card.i);
+            if (matchingIndex) {
+              return {
+                ...card,
+                title: '烘房' + matchingIndex.i,
+                model: matchingIndex.status,
+                dollyNumber:matchingIndex.dollyNumber,
+                waitmin:matchingIndex.waitmin,
+                temperature:matchingIndex.temperature
+              };
+            } else {
+              return card;
+            }
+
+          });
+          console.log(this.cardss )
+        }
+
+      });
+    },
+
+    handleScroll(event) {
+
+      //请求烘房数据接口
+      this.createData();
+      // if (event==0){
+      //   const that = this;
+      //
+      // }
+      // 获取滚动事件的相关信息
+
+     // console.log(scrollTop);
+      // 根据需要处理滚动事件的逻辑
+      // ...
+    },
+
+
+  },
+  mounted() {
+     const { createData } = this
+     createData()
+    // setInterval(this.createData, 6000)
+  }
+}
+</script>
+
+
+<style scoped>
+
+
+
+
+
+
+</style>
diff --git a/src/views/kanban/exception/digitalFlop.vue b/src/views/kanban/exception/digitalFlop.vue
new file mode 100644
index 00000000..89f48a81
--- /dev/null
+++ b/src/views/kanban/exception/digitalFlop.vue
@@ -0,0 +1,169 @@
+<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>
+import {
+  getDryingRoomList,
+  getMesBoardEquProductionToday,
+} from "@/api/kanban/dryingroom";
+export default {
+  name: 'DigitalFlop',
+  data () {
+    return {
+      digitalFlopData: [],
+      dryingRoomList: [],
+      cxjZCNumber:0,
+
+    }
+  },
+  methods: {
+    createData () {
+      const that = this;
+      getDryingRoomList({
+        factory: 999,
+      }).then((response) => {
+        if (response.data) {
+           // console.log(response)
+          this.cxjZCNumber=response.data.cxzc;
+          this.cxjYCNumber=response.data.cxyc;
+          this.dryingRoomList = response.data.result;
+          this.digitalFlopData = [
+            {
+              title: '成型机运行',
+              number: {
+                number: [this.cxjZCNumber],
+                content: '{nt}',
+                textAlign: 'right',
+                style: {
+                  fill: '#4d99fc',
+                  fontWeight: 'bold'
+                }
+              },
+
+              unit: '台'
+            },
+            {
+              title: '烘房运行(自动)',
+              number: {
+                number: [response.data.hfauto],
+                content: '{nt}',
+                textAlign: 'right',
+                style: {
+                  fill: '#4d99fc',
+                  fontWeight: 'bold'
+                }
+              },
+
+              unit: '座'
+            },
+            {
+              title: '收坯机台运行',
+              number: {
+                number: [response.data.spzc],
+                content: '{nt}',
+                textAlign: 'right',
+                style: {
+                  fill: '#4d99fc',
+                  fontWeight: 'bold'
+                }
+              },
+              unit: '台'
+            },
+            {
+              title: '成型缓存区数量',
+              number: {
+                number: [response.data.hcnumber],
+                content: '{nt}',
+                textAlign: 'right',
+                style: {
+                  fill: '#4d99fc',
+                  fontWeight: 'bold'
+                }
+              },
+              unit: '个'
+            },
+
+          ]
+
+        }
+      });
+
+    },
+  },
+  mounted () {
+    const { createData } = this
+
+    createData()
+
+    setInterval(createData, 5000)
+  }
+}
+</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;
+    width: 200px;
+  }
+
+  .unit {
+    margin-left: 10px;
+    display: flex;
+    align-items: flex-end;
+    box-sizing: border-box;
+    padding-bottom: 13px;
+  }
+}
+</style>
diff --git a/src/views/kanban/exception/index.vue b/src/views/kanban/exception/index.vue
new file mode 100644
index 00000000..a3bffd60
--- /dev/null
+++ b/src/views/kanban/exception/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <div id="data-view">
+    <div id="dv-full-screen-container" style="width:100vw;height:100vh">
+<!--      <p class="time">-->
+<!--        {{ gettimedata }}-->
+<!--      </p>-->
+      <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 />-->
+            <carousel />
+<!--            </div>-->
+
+<!--            <cards2 />-->
+          </div>
+
+        </div>
+      </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 carousel from './carousel'
+import cards2 from './cards2'
+import moment from "moment";
+
+export default {
+  name: 'DataView',
+  components: {
+    topHeader,
+    digitalFlop,
+    rankingBoard,
+    roseChart,
+    waterLevelChart,
+    scrollBoard,
+    cards2,
+    carousel
+  },
+  data () {
+    return {
+      gettimedata: "",
+    }
+  },
+  mounted() {
+    this.gettime();
+  },
+  methods: {
+    gettime() {
+      this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
+      setInterval(() => {
+        this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
+      }, 1000);
+    },
+  }
+}
+</script>
+
+<style lang="less">
+#data-view {
+  width: 100%;
+  height: 100%;
+  background-color: #030409;
+  color: #fff;
+
+  #dv-full-screen-container {
+    background-image: url('../../../assets/images/bg-exception.png');
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+
+  .main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .block-left-right-content {
+    flex: 1;
+    display: flex;
+    margin-top: 10px;
+  }
+
+  .block-top-bottom-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding-left: 0px;
+  }
+
+  .block-top-content {
+    height: 55%;
+    display: flex;
+    flex-grow: 0;
+    box-sizing: border-box;
+    padding-bottom: 20px;
+  }
+  .time {
+    font-size: 30px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 71px;
+
+
+    position: fixed;
+    top: 0;
+    z-index: 9999;;
+    padding: 10px;
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/kanban/exception/rankingBoard.vue b/src/views/kanban/exception/rankingBoard.vue
new file mode 100644
index 00000000..cf8c262d
--- /dev/null
+++ b/src/views/kanban/exception/rankingBoard.vue
@@ -0,0 +1,93 @@
+<template>
+  <div id="ranking-board">
+    <div class="ranking-board-title">AGV运行分布</div>
+<!--    <dv-scroll-ranking-board :config="config" />-->
+    <dv-scroll-ranking-board :config="config">
+      <template #item="{ item }">
+        <li class="name">{{ item.name }}</li>
+      </template>
+    </dv-scroll-ranking-board>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankingBoard',
+  data () {
+    return {
+      config: {
+        data: [
+          {
+            name: '模式：'+'手动',
+            des:'当前是否占位',
+            value: 20
+          },
+          {
+            name: '模式：'+'自动',
+            des:'当前是否占位',
+            value: 21
+          },
+          {
+            name: '模式：'+'手动',
+            des:'当前是否占位',
+            value: 15
+          },
+
+          // {
+          //   name: '计日工',
+          //   value: 80
+          // },
+          // {
+          //   name: '路基',
+          //   value: 45
+          // },
+          // {
+          //   name: '交安设施',
+          //   value: 29
+          // },
+          // {
+          //   name: '除雪',
+          //   value: 29
+          // },
+          // {
+          //   name: '绿化',
+          //   value: 29
+          // }
+        ],
+        rowNum: 21
+      }
+    }
+  }
+}
+</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;
+  }
+  .name {
+    line-height: 1.2; /* 设置每行名称的高度 */
+    overflow: hidden; /* 控制溢出内容的处理方式 */
+    text-overflow: ellipsis; /* 当名称溢出时，使用省略号表示 */
+    white-space: nowrap; /* 禁止名称换行 */
+  }
+}
+</style>
diff --git a/src/views/kanban/exception/roseChart.vue b/src/views/kanban/exception/roseChart.vue
new file mode 100644
index 00000000..9a89099c
--- /dev/null
+++ b/src/views/kanban/exception/roseChart.vue
@@ -0,0 +1,145 @@
+<template>
+  <div id="rose-chart">
+    <div class="rose-chart-title">烘房出香情况</div>
+
+    <div class="water-level-chart-details">
+      本班次出香<span>354</span>车
+    </div>
+
+<!--    <dv-charts :option="option" />-->
+    <dv-capsule-chart :config="config" style="width:300px;height:200px" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RoseChart',
+  data () {
+    return {
+      option: {},
+      config: {
+        data: [
+          {
+            name: '合格',
+            value: 362
+          },
+          {
+            name: '不合格',
+            value: 10
+          },
+
+        ],
+        colors: ['#3dd96a', '#fc0541'],
+        unit: '单位',
+        showValue: true
+      }
+    }
+  },
+  methods: {
+    createData () {
+      const { randomExtend } = this
+
+      this.option = {
+        // title: {
+        //   text: '畅销饮料占比饼状图'
+        // },
+        series: [
+          {
+            type: 'pie',
+            data: [
+              { name: '可口可乐', value: 93 },
+              { name: '百事可乐', value: 32 },
+              // { name: '哇哈哈', value: 65 },
+              // { name: '康师傅', value: 44 },
+              // { name: '统一', value: 52 },
+            ],
+            insideLabel: {
+              show: true
+            }
+          }
+        ]
+        // series: [
+        //   {
+        //     type: 'pie',
+        //     radius: '50%',
+        //     roseSort: false,
+        //     data: [
+        //       { name: '合格', value: randomExtend(200, 300) },
+        //       { name: '不合格', value: randomExtend(5, 10) },
+        //
+        //     ],
+        //     insideLabel: {
+        //       show: false
+        //     },
+        //     outsideLabel: {
+        //       formatter: '{value}',
+        //       labelLineEndLength: 20,
+        //       style: {
+        //
+        //         fill: '#fff'
+        //       },
+        //       labelLineStyle: {
+        //         stroke: '#fff'
+        //       }
+        //     },
+        //     roseType: true
+        //   }
+        // ],
+        // color: ['#5fec4f', '#fa3600']
+      }
+    },
+    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");
+  }
+  .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;
+    }
+  }
+}
+</style>
diff --git a/src/views/kanban/exception/scrollBoard.vue b/src/views/kanban/exception/scrollBoard.vue
new file mode 100644
index 00000000..bc1b8349
--- /dev/null
+++ b/src/views/kanban/exception/scrollBoard.vue
@@ -0,0 +1,40 @@
+<template>
+  <div id="scroll-board">
+    <dv-scroll-board :config="config" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ScrollBoard',
+  data () {
+    return {
+      config: {
+        header: ['时间','暂存区','托盘', '报警信息'],
+        data: [
+          ['2023-11-01 15:25:00','XBuffer 16','S0000451', '超时未转运' ],
+
+        ],
+        index: true,
+        columnWidth: [50, 200,200,200],
+        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: 100%;
+  box-sizing: border-box;
+  margin-left: 20px;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/kanban/exception/topHeader.vue b/src/views/kanban/exception/topHeader.vue
new file mode 100644
index 00000000..5fa57157
--- /dev/null
+++ b/src/views/kanban/exception/topHeader.vue
@@ -0,0 +1,61 @@
+<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>
+import moment from "moment";
+
+export default {
+  name: 'TopHeader',
+
+  data () {
+    return {
+      gettimedata: "",
+    }
+  },
+  mounted() {
+    // this.gettime();
+  },
+  methods: {
+
+  }
+}
+</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/kanban/exception/waterLevelChart.vue b/src/views/kanban/exception/waterLevelChart.vue
new file mode 100644
index 00000000..8db777d2
--- /dev/null
+++ b/src/views/kanban/exception/waterLevelChart.vue
@@ -0,0 +1,93 @@
+<template>
+  <div id="water-level-chart">
+    <div class="water-level-chart-title">烘房出香情况</div>
+
+    <div class="water-level-chart-details">
+
+        本班次出香<span>354</span>车
+
+    </div>
+
+    <div class="chart-container">
+
+      <dv-water-level-pond :config="config" />
+    </div>
+  </div>
+</template>
+
+<script>
+import roseChart from './roseChart'
+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>