diff --git a/package.json b/package.json
index 59b8af83..3ebb719c 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "bin-code-editor": "^0.9.0",
     "dayjs": "^1.8.35",
     "dvcp-dv": "^1.0.0",
+    "dvcp-dv-ui": "file:project/dvui",
     "dvcp-ui": "^1.42.2",
     "echarts": "^5.1.2",
     "mp4box": "^0.4.1",
diff --git a/packages/bigscreen/designer/components/form/DataConfig.vue b/packages/bigscreen/designer/components/form/DataConfig.vue
index 4fac77de..c7a13e51 100644
--- a/packages/bigscreen/designer/components/form/DataConfig.vue
+++ b/packages/bigscreen/designer/components/form/DataConfig.vue
@@ -242,12 +242,16 @@
                   }
                 })
               } else if (this.options.type === 'summary') {
-                this.options.apiData = Object.keys(res.data[0]).map(item => {
-                  return {
-                    key: item,
-                    value: res.data[0][item]
-                  }
-                })
+                if (this.options.display === 'summary9') {
+                  this.options.apiData = res.data
+                } else {
+                  this.options.apiData = Object.keys(res.data[0]).map(item => {
+                    return {
+                      key: item,
+                      value: res.data[0][item]
+                    }
+                  })
+                }
               } else if (this.options.type === 'monitor') {
                 this.monitorList = res.data
               } else {
diff --git a/packages/bigscreen/viewer/AppGigscreenViewer.vue b/packages/bigscreen/viewer/AppGigscreenViewer.vue
index c0235845..dfddae34 100644
--- a/packages/bigscreen/viewer/AppGigscreenViewer.vue
+++ b/packages/bigscreen/viewer/AppGigscreenViewer.vue
@@ -143,12 +143,16 @@ export default {
                 }
               })
             } else if (item.type === 'summary') {
-              dynamicData = Object.keys(res.data[0]).map(item => {
-                return {
-                  key: item,
-                  value: res.data[0][item]
-                }
-              })
+              if (this.options.display === 'summary9') {
+                dynamicData = res.data
+              } else {
+                dynamicData = Object.keys(res.data[0]).map(item => {
+                  return {
+                    key: item,
+                    value: res.data[0][item]
+                  }
+                })
+              }
             } else {
               if (item.dataX && item.dataY.length) {
                 list.forEach(i => {
diff --git a/project/dvui/AppDVDemo.vue b/project/dvui/AppDVDemo.vue
index c57a36d6..34680ab0 100644
--- a/project/dvui/AppDVDemo.vue
+++ b/project/dvui/AppDVDemo.vue
@@ -5,8 +5,7 @@
       <template #content>
         <div class="showPanel">
           <ai-dv-wrapper :views="views" v-model="active">
-            <AiMonitor style="width: 600px; height: 300px" type="slw"
-                       src="http://120.221.159.18:8000/flv/MT_20220319123025570adZa68OLywxi?encrypt=m3sbNQg2wFw9HdZn&timestamp=1647992818471"></AiMonitor>
+            <AiDvDisplay></AiDvDisplay>
           </ai-dv-wrapper>
         </div>
       </template>
diff --git a/project/dvui/layout/AiDvDisplay/AiDvDisplay.vue b/project/dvui/layout/AiDvDisplay/AiDvDisplay.vue
index 8d023e43..51373956 100644
--- a/project/dvui/layout/AiDvDisplay/AiDvDisplay.vue
+++ b/project/dvui/layout/AiDvDisplay/AiDvDisplay.vue
@@ -1,9 +1,9 @@
 <template>
   <section class="AiDvDisplay">
     <div class="display-top">
-      <img class="left" src="asset/display-icon.svg">
+      <img class="left" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
       <h2>{{ title }}</h2>
-      <img class="right" src="asset/display-icon.svg">
+      <img class="right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
     </div>
     <component class="background" :is="type"/>
     <div class="displayPanel">
@@ -29,6 +29,10 @@ export default {
     },
     list: {default: () => []},
   },
+  data () {
+    return {
+    }
+  },
   methods: {
     getPos(i) {
       let unit = this.list.length > 0 ? 2 * Math.PI / this.list.length : 0,
diff --git a/project/dvui/layout/AiDvDisplay/components/Display0.vue b/project/dvui/layout/AiDvDisplay/components/Display0.vue
index 0b3a6fd6..f2aacea3 100644
--- a/project/dvui/layout/AiDvDisplay/components/Display0.vue
+++ b/project/dvui/layout/AiDvDisplay/components/Display0.vue
@@ -2,8 +2,8 @@
   <div class="display0">
     <div class="display0-container">
       <div class="display0-content">
-        <img src="../asset/display0-left.png">
-        <img src="../asset/display0-left.png">
+        <img src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
+        <img src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
       </div>
     </div>
   </div>
@@ -15,7 +15,6 @@
 
     data () {
       return {
-
       }
     }
   }
@@ -26,7 +25,7 @@
     position: relative;
     width: 840px;
     height: 465px;
-    background: url(../asset/display0-bg.png) no-repeat center;
+    background: url(./../asset/display0-bg.png) no-repeat center;
     background-size: cover;
 
     .display0-content {
@@ -38,7 +37,7 @@
       transform: translateY(-50%);
       align-items: center;
       justify-content: space-between;
-      background: url(../asset/display0-bg.png) no-repeat center;
+      background: url(./../asset/display0-bg.png) no-repeat center;
       background-size: cover;
 
       img:last-child {
diff --git a/project/dvui/layout/AiDvDisplay/components/displayItem.vue b/project/dvui/layout/AiDvDisplay/components/displayItem.vue
index 56a0be0d..83c82020 100644
--- a/project/dvui/layout/AiDvDisplay/components/displayItem.vue
+++ b/project/dvui/layout/AiDvDisplay/components/displayItem.vue
@@ -28,7 +28,7 @@ export default {
   font-weight: bold;
   line-height: 26px;
   position: relative;
-  background-image: url("../asset/displayItem-bg.svg");
+  background-image: url("./../asset/displayItem-bg.svg");
   background-repeat: no-repeat;
   background-position: center;
 
@@ -39,7 +39,7 @@ export default {
     bottom: 0;
     right: 0;
     content: " ";
-    background-image: url("../asset/displayItem-bg1.svg");
+    background-image: url("./../asset/displayItem-bg1.svg");
     background-repeat: no-repeat;
     background-position: center;
     animation: rotate 4s infinite linear;
diff --git a/project/dvui/layout/AiDvPanel/borders/border0.vue b/project/dvui/layout/AiDvPanel/borders/border0.vue
index e7ac111c..c81f5b3d 100644
--- a/project/dvui/layout/AiDvPanel/borders/border0.vue
+++ b/project/dvui/layout/AiDvPanel/borders/border0.vue
@@ -22,7 +22,7 @@ export default {
   height: 100%;
   .title {
     padding-left: 30px;
-    background-image: url("../asset/titleBg.svg");
+    background-image: url("./../asset/titleBg.svg");
     background-repeat: no-repeat;
     height: 41px;
     margin-bottom: 10px;
diff --git a/project/dvui/layout/AiDvPanel/borders/border1.vue b/project/dvui/layout/AiDvPanel/borders/border1.vue
index 2fb2def7..76e32f92 100644
--- a/project/dvui/layout/AiDvPanel/borders/border1.vue
+++ b/project/dvui/layout/AiDvPanel/borders/border1.vue
@@ -33,7 +33,7 @@ export default {
   .bg {
     position: relative;
     margin: 15px 20px;
-    background-image: url("../asset/border1Bg.svg");
+    background-image: url("./../asset/border1Bg.svg");
     background-size: 100% calc(100%);
     background-repeat: no-repeat;
     padding: 30px 20px 0 20px;
@@ -52,7 +52,7 @@ export default {
       align-items: center;
       color: #fff;
       font-size: 16px;
-      background-image: url("../asset/border1Title.svg");
+      background-image: url("./../asset/border1Title.svg");
       background-size: 100%;
       background-repeat: no-repeat;
     }
diff --git a/project/dvui/layout/AiDvPanel/borders/border2.vue b/project/dvui/layout/AiDvPanel/borders/border2.vue
index b4cb05e4..b88af15c 100644
--- a/project/dvui/layout/AiDvPanel/borders/border2.vue
+++ b/project/dvui/layout/AiDvPanel/borders/border2.vue
@@ -4,9 +4,9 @@
     <div class="corner right-bottom"></div>
     <div class="bg">
       <div class="header">
-        <img src="../asset/sanjiaoxing.svg" />
+        <img  src="https://cdn.cunwuyun.cn/dvcp/dv/img/sanjiaoxing.svg" />
         <h2>{{ title }}</h2>
-        <img class="header-right" src="../asset/sanjiaoxing.svg" />
+        <img class="header-right"  src="https://cdn.cunwuyun.cn/dvcp/dv/img/sanjiaoxing.svg" />
       </div>
       <div class="slot">
         <slot/>
@@ -18,7 +18,12 @@
 <script>
 export default {
   name: 'border2',
-  props: {title: String}
+  props: {title: String},
+
+  data () {
+    return {
+    }
+  }
 }
 </script>
 
@@ -38,7 +43,7 @@ export default {
       width: 18px;
       position: absolute;
       display: block;
-      background-image: url(../asset/corner.svg);
+      background-image: url(./../asset/corner.svg);
       background-repeat: no-repeat;
     }
     .corner.left-top {
@@ -85,7 +90,7 @@ export default {
         height: 40px;
         line-height: 40px;
         text-align: center;
-        background: url(../asset/border2Title.svg) no-repeat;
+        background: url(./../asset/border2Title.svg) no-repeat;
         background-size: cover;
 
         .header-right {
diff --git a/project/dvui/layout/AiDvPanel/borders/border3.vue b/project/dvui/layout/AiDvPanel/borders/border3.vue
index 2adfdda1..ba40c42e 100644
--- a/project/dvui/layout/AiDvPanel/borders/border3.vue
+++ b/project/dvui/layout/AiDvPanel/borders/border3.vue
@@ -122,7 +122,7 @@ export default {
             height: 12px;
             transform: translate(-50%, -50%);
             content: ' ';
-            background: url(../asset/border3Title.png) no-repeat;
+            background: url(./../asset/border3Title.png) no-repeat;
             background-size: 100% 100%;
             opacity: 0.8;
           }
diff --git a/project/dvui/layout/AiDvSummary/components/Summary0.vue b/project/dvui/layout/AiDvSummary/components/Summary0.vue
index d73af78f..1a28e8fa 100644
--- a/project/dvui/layout/AiDvSummary/components/Summary0.vue
+++ b/project/dvui/layout/AiDvSummary/components/Summary0.vue
@@ -65,7 +65,7 @@
         width: 18px;
         position: absolute;
         display: block;
-        background-image: url(../asset/corner.svg);
+        background-image: url(./../asset/corner.svg);
         background-repeat: no-repeat;
       }
       .corner.left-top {
diff --git a/project/dvui/layout/AiDvSummary/components/Summary10.vue b/project/dvui/layout/AiDvSummary/components/Summary10.vue
index 272a5bf2..68a363de 100644
--- a/project/dvui/layout/AiDvSummary/components/Summary10.vue
+++ b/project/dvui/layout/AiDvSummary/components/Summary10.vue
@@ -66,7 +66,7 @@
         width: 18px;
         position: absolute;
         display: block;
-        background-image: url(../asset/corner.svg);
+        background-image: url(./../asset/corner.svg);
         background-repeat: no-repeat;
       }
       .corner.left-top {
diff --git a/project/dvui/layout/AiDvSummary/components/Summary2.vue b/project/dvui/layout/AiDvSummary/components/Summary2.vue
index c45fbdff..22db3d83 100644
--- a/project/dvui/layout/AiDvSummary/components/Summary2.vue
+++ b/project/dvui/layout/AiDvSummary/components/Summary2.vue
@@ -53,7 +53,7 @@
     height: 180px;
     padding: 0 90px;
     box-sizing: border-box;
-    background: url(../asset/summary1-bg.svg) center;
+    background: url(./../asset/summary1-bg.svg) center;
     background-size: 800px 180px;
 
     .summary2-title {
@@ -76,7 +76,7 @@
         width: 35px;
         height: 22px;
         content: '';
-        background: url(../asset/jt.svg) center;
+        background: url(./../asset/jt.svg) center;
         background-size: 40px 112px;
         transform: translate(-100%, -50%);
       }
@@ -89,7 +89,7 @@
         width: 35px;
         height: 22px;
         content: '';
-        background: url(../asset/jt.svg) center;
+        background: url(./../asset/jt.svg) center;
         background-size: 40px 112px;
         transform: translate(100%, -50%) rotate(180deg);
       }
@@ -103,7 +103,7 @@
       width: 40px;
       height: 112px;
       content: '';
-      background: url(../asset/top.svg) center;
+      background: url(./../asset/top.svg) center;
       background-size: 40px 112px;
       transform: translateY(-50%);
     }
@@ -116,7 +116,7 @@
       width: 40px;
       height: 112px;
       content: '';
-      background: url(../asset/top.svg) center;
+      background: url(./../asset/top.svg) center;
       background-size: 40px 112px;
       transform: translateY(-50%) rotate(180deg);
     }
diff --git a/project/dvui/layout/AiDvSummary/components/Summary3.vue b/project/dvui/layout/AiDvSummary/components/Summary3.vue
index a5693f0d..c4bd72b0 100644
--- a/project/dvui/layout/AiDvSummary/components/Summary3.vue
+++ b/project/dvui/layout/AiDvSummary/components/Summary3.vue
@@ -59,14 +59,14 @@
       height: 164px;
       line-height: 1;
       padding-top: 58px;
-      background: url(../asset/summary3-small.svg);
+      background: url(./../asset/summary3-small.svg);
       background-size: 100% 164px;
       transform: scale(0.8);
 
       &:nth-of-type(2) {
         width: 280px;
         height: 180px;
-        background: url(../asset/summary3-big.svg);
+        background: url(./../asset/summary3-big.svg);
         background-size: 100% 180px;
         transform: scale(1);
       }
diff --git a/project/dvui/layout/AiDvSummary/components/Summary4.vue b/project/dvui/layout/AiDvSummary/components/Summary4.vue
index 8d9b43fc..5c81a603 100644
--- a/project/dvui/layout/AiDvSummary/components/Summary4.vue
+++ b/project/dvui/layout/AiDvSummary/components/Summary4.vue
@@ -58,7 +58,7 @@
       height: 108px;
       padding: 18px 0 ;
       font-size: 0;
-      background-image: url(../asset/summary4-small.svg);
+      background-image: url(./../asset/summary4-small.svg);
       background-size: 100% 100%;
 
       &::after {
@@ -84,7 +84,7 @@
         height: 140px;
         padding-top: 28px;
         padding: 28px ;
-        background-image: url(../asset/summary4-big.svg);
+        background-image: url(./../asset/summary4-big.svg);
         background-size: 100% 100%;
       }
 
diff --git a/project/dvui/layout/AiDvSummary/components/Summary5.vue b/project/dvui/layout/AiDvSummary/components/Summary5.vue
index 9e83dabe..7d56e839 100644
--- a/project/dvui/layout/AiDvSummary/components/Summary5.vue
+++ b/project/dvui/layout/AiDvSummary/components/Summary5.vue
@@ -97,7 +97,7 @@
           width: 18px;
           position: absolute;
           display: block;
-          background-image: url(../asset/corner.svg);
+          background-image: url(./../asset/corner.svg);
           background-repeat: no-repeat;
         }
         .corner.left-top {
diff --git a/project/dvui/layout/AiDvSummary/components/Summary7.vue b/project/dvui/layout/AiDvSummary/components/Summary7.vue
index 72bfe2d1..2f3ca3f8 100644
--- a/project/dvui/layout/AiDvSummary/components/Summary7.vue
+++ b/project/dvui/layout/AiDvSummary/components/Summary7.vue
@@ -153,7 +153,7 @@
     width: 380px;
     height: 124px;
     padding: 0 44px;
-    background: url(../asset/summary6-bg.svg);
+    background: url(./../asset/summary6-bg.svg);
     background-size: 100% 100%;
 
     .el-progress-circle {
diff --git a/project/dvui/layout/AiDvSummary/components/Summary9.vue b/project/dvui/layout/AiDvSummary/components/Summary9.vue
index 2896ad72..6607c5ac 100644
--- a/project/dvui/layout/AiDvSummary/components/Summary9.vue
+++ b/project/dvui/layout/AiDvSummary/components/Summary9.vue
@@ -71,7 +71,7 @@
       width: 132px;
       height: 160px;
       padding-top: 32px;
-      background-image: url(../asset/summary9-bg.svg);
+      background-image: url(./../asset/summary9-bg.svg);
       background-size: 100% 100%;
 
       div {
@@ -108,7 +108,6 @@
       p {
         line-height: 35px;
         margin: 0 0 4px;
-        font-size: 32px;
         font-weight: 700;
         color: #fff;
       }
diff --git a/project/dvui/layout/AiDvWrapper/AiDvWrapper.vue b/project/dvui/layout/AiDvWrapper/AiDvWrapper.vue
index b44073a5..38644565 100644
--- a/project/dvui/layout/AiDvWrapper/AiDvWrapper.vue
+++ b/project/dvui/layout/AiDvWrapper/AiDvWrapper.vue
@@ -195,7 +195,9 @@ export default {
 @import url('../../lib/animation.scss');
 .AiDvWrapper {
   .viewPanel {
+    display: flex;
     position: relative;
+    flex-direction: column;
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
@@ -212,6 +214,8 @@ export default {
   }
 
   ::v-deep.headerPane {
+    display: flex;
+    align-items: center;
     height: 120px;
     width: 100%;
     padding: 0 10px;
@@ -223,11 +227,15 @@ export default {
     }
 
     .viewTabs {
+      display: flex;
+      align-items: center;
       height: 60px;
       font-size: 15px;
       overflow: visible;
 
       .btn {
+        display: flex;
+        align-items: center;
         cursor: pointer;
         justify-content: center;
         min-width: 120px;
@@ -273,6 +281,8 @@ export default {
     }
 
     .settingZone {
+      display: flex;
+      align-items: center;
       font-family: DIN, serif;
       height: 60px;
       justify-content: flex-end;
@@ -323,7 +333,7 @@ export default {
         width: 760px;
         height: 124px;
         background-repeat: no-repeat;
-        background-image: url("assets/headerCenterBorderLight.svg"), url("assets/headerCenterBorder.svg"), url("assets/headerCenterBg2.png");
+        background-image: url("./assets/headerCenterBorderLight.svg"), url("./assets/headerCenterBorder.svg"), url("./assets/headerCenterBg2.png");
         background-position: center bottom, center 0, center -20px;
         overflow: visible;
 
diff --git a/project/dvui/layout/AiDvWrapper/rightTopBorder.vue b/project/dvui/layout/AiDvWrapper/rightTopBorder.vue
index 58c7ae8c..6b6954bc 100644
--- a/project/dvui/layout/AiDvWrapper/rightTopBorder.vue
+++ b/project/dvui/layout/AiDvWrapper/rightTopBorder.vue
@@ -32,7 +32,7 @@ export default {
     width: 18px;
     position: absolute;
     display: block;
-    background-image: url("assets/corner.svg");
+    background-image: url("./assets/corner.svg");
     background-repeat: no-repeat;
 
     &.left-top {