diff --git a/src/assets/main.css b/src/assets/main.css
index b9077d5..cb4e3b1 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,112 +1,124 @@
 #app {
-  font-weight: normal;
+    font-weight: normal;
 }
 
 a, .green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
+    text-decoration: none;
+    color: hsla(160, 100%, 37%, 1);
+    transition: 0.4s;
 }
 
 @media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+    a:hover {
+        background-color: hsla(160, 100%, 37%, 0.2);
+    }
 }
 
 .AppSelect .el-input__inner {
-  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
-  border: 1px solid #1760AE;
-  border-radius: 0;
-  color: #fff;
+    background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
+    border: 1px solid #1760AE;
+    border-radius: 0;
+    color: #fff;
 }
 
 
 .el-table:before, .el-table:after {
-  background: transparent;
+    background: transparent;
 }
 
 .el-table .gutter {
-  background-color: transparent !important;
-  border-color: transparent !important;
+    background-color: transparent !important;
+    border-color: transparent !important;
 }
 
 .flex {
-  display: flex;
+    display: flex;
 }
 
 .fill {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
 }
 
 .pointer {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
 }
 
 .mb-8 {
-  margin-bottom: 8px;
+    margin-bottom: 8px;
 }
 
 .mr-8 {
-  margin-right: 8px;
+    margin-right: 8px;
 }
 
 .dv-scroll-board {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 .dv-scroll-board .header {
-  align-items: center;
-  padding: 6px 0;
+    align-items: center;
+    padding: 6px 0;
 }
 
 .dv-scroll-board .header-item, .tableHead .item {
-  height: initial !important;
-  line-height: 17px !important;
-  font-weight: bold;
+    height: initial !important;
+    line-height: 17px !important;
+    font-weight: bold;
 }
 
 .dv-scroll-board .ceil {
-  padding: 6px 10px !important;
+    padding: 6px 10px !important;
 }
 
 .dv-scroll-board .row-item {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 .dv-scroll-board .ceil, .dv-scroll-board .header-item {
-  text-wrap: unset !important;
-  word-break: break-all;
-  font-size: 12px;
-  line-height: 17px
+    text-wrap: unset !important;
+    word-break: break-all;
+    font-size: 12px;
+    line-height: 17px
 }
 
 .summary {
-  height: 30px;
-  align-items: center;
-  color: #66FFFF;
-  background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
+    height: 30px;
+    align-items: center;
+    color: #66FFFF;
+    background-image: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
 }
 
 .tableHead {
-  height: 30px;
-  align-items: center;
-  background-color: rgba(13, 48, 99, 0.6);
+    height: 30px;
+    align-items: center;
+    background-color: rgba(13, 48, 99, 0.6);
 }
 
 .summary .item, .tableHead .item {
-  font-size: 12px;
-  font-weight: bold;
-  padding: 0 10px;
-  align-items: center;
-  box-sizing: border-box;
-  line-height: 17px;
-  flex-shrink: 0;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 0 10px;
+    align-items: center;
+    box-sizing: border-box;
+    line-height: 17px;
+    flex-shrink: 0;
+}
+
+.dialogTable {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    height: 300px;
+    z-index: 9999;
+    background-color: #07193D;
+    box-shadow: #fff 0 0 20px;
 }
diff --git a/src/views/AppStoresTable.vue b/src/views/AppStoresTable.vue
index 1a2a5c4..3beac3d 100644
--- a/src/views/AppStoresTable.vue
+++ b/src/views/AppStoresTable.vue
@@ -1,4 +1,5 @@
 <script>
+const currentDate = "20240705"
 export default {
   name: "AppStoresTable",
   label: "多店监控",
@@ -42,6 +43,8 @@ export default {
       cameras: [],
       storeKeyGoods: [],
       categorySales: [],
+      aroundStock: [],
+      dialog: false,
       columns: {
         品类销售情况: [
           {label: "品类", prop: "secondCategoryName"},
@@ -58,8 +61,17 @@ export default {
           {label: "库存数量", prop: "stockNum", width: 70},
           {label: "剩余时间预计销售数量", prop: "preSaleNum"},
           {label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
+        ],
+        周边库存情况: [
+          {label: "门店名称", prop: "storeName"},
+          {label: "直线距离", prop: "distance", width: 70},
+          {label: "库存数量", prop: "stockNum", width: 70},
+          {label: "销售数量", prop: "saleNum", width: 70},
+          {label: "剩余时间预计销售数量", prop: "preSaleNum", width: 70},
+          {label: "店长姓名/电话", prop: "shopMangerName", format: v => `${v.shopMangerName}(${v.shopownerPhone})`},
         ]
       },
+
     }
   },
   computed: {
@@ -95,10 +107,10 @@ export default {
           .then(codes => Promise.all([this.getCameras(), this.getStoreKeyGoods(), this.getCategorySales()]).then(() => codes))
           .then((codes = []) => {
             this.stores = codes?.map(storeCode => {
-              const {storeCameraVOList = [], storeName} = this.cameras.find(e => e.storeCode == storeCode) || {}
+              const {storeCameraVOList = [], storeName, longitude, latitude} = this.cameras.find(e => e.storeCode == storeCode) || {}
               const keyGoods = this.storeKeyGoods.filter(e => e.storeCode == storeCode) || []
               const categorySale = this.categorySales.filter(e => e.storeCode == storeCode) || []
-              return {storeCode, storeName, camera: storeCameraVOList.map(e => e.cameraUrl), keyGoods, categorySale}
+              return {storeCode, storeName, longitude, latitude, camera: storeCameraVOList.map(e => e.cameraUrl), keyGoods, categorySale}
             }).filter(e => !!e.storeName) || []
           })
     },
@@ -121,7 +133,7 @@ export default {
     },
     getStoreKeyGoods() {
       return $http.post("/data-boot/la/screen/multipleStoreBoard/storeKeyGoods", {
-        type: "1", ...this.search,
+        type: "1", ...this.search, currentDate
       }).then(res => {
         if (res?.data) {
           this.storeKeyGoods = res.data
@@ -144,23 +156,34 @@ export default {
       this.$storeBoard.query.storeCode = sid
       this.$router.push("/apps/AppStoreBoard")
     },
-    getTableData(item, tag) {
+    getTableData(item = {}, tag) {
       const v = this
       const datasource = {
-        重点单品情况: "keyGoods",
-        品类销售情况: "categorySale",
+        重点单品情况: item.keyGoods,
+        品类销售情况: item.categorySale,
+        周边库存情况: v.aroundStock,
       }
       return {
-        headerBGC: 'rgba(13, 48, 99, 0.6)',
+        headerBGC: 'rgba(13, 48, 99, 0.6)', rowNum: arguments?.[2] || 2,
         oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
         header: v.columns[tag].map(e => e.label),
         columnWidth: v.columns[tag].map(e => e.width || "0;flex:1;min-width:0;"),
         align: v.columns[tag].map(e => e.align || "left"),
-        data: item[datasource[tag]].map(e => v.columns[tag].map(column => column.custom == 1 ? `<div style="color:${e.preSaleNum > e.stockNum ? 'red' : '#fff'}">周边库存情况</div>` : e[column.prop])),
+        data: datasource[tag]?.map(e => v.columns[tag].map(column => column.custom == 1 ? `<div class="pointer" style="color:${e.preSaleNum > e.stockNum ? 'red' : '#fff'}">周边库存</div>` :
+            column.format ? column.format(e) : e[column.prop])) || [],
       }
     },
-    getNearbyStores(evt) {
-      console.log(evt)
+    openNearbyStores({rowIndex}, store) {
+      const {thirdGoodsCode} = this.storeKeyGoods[rowIndex],
+          {storeCode, longitude, latitude} = store
+      return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
+        type: "1", ...this.search, storeCode, longitude, latitude, thirdGoodsCode, currentDate
+      }).then(res => {
+        if (res?.data) {
+          this.aroundStock = res.data
+          this.$nextTick(() => this.dialog = true)
+        }
+      })
     }
   },
   mounted() {
@@ -170,7 +193,7 @@ export default {
 </script>
 
 <template>
-  <section class="AppStoresTable">
+  <section class="AppStoresTable" @click="dialog=false">
     <el-carousel indicator-position="none" :height="height" :autoplay="search.changeWay==1">
       <el-carousel-item v-for="(group,i) in storeList" :key="i">
         <div class="layout">
@@ -184,11 +207,12 @@ export default {
             <div class="subTitle" v-text="'品类销售情况'"/>
             <dv-scroll-board :config="getTableData(store, '品类销售情况')"/>
             <div class="subTitle" v-text="'重点单品情况'"/>
-            <dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="getNearbyStores"/>
+            <dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
           </div>
         </div>
       </el-carousel-item>
     </el-carousel>
+    <dv-scroll-board v-if="dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/>
   </section>
 </template>
 
@@ -197,34 +221,11 @@ export default {
   width: 100%;
   color: #fff;
   box-sizing: border-box;
+  position: relative;
 }
 
 .AppStoresTable .dv-scroll-board {
-  height: 200px;
-}
-
-.tableHeader {
-  background: rgba(13, 48, 99, 0.6) !important;
-  color: #fff;
-  border-color: transparent !important;
-}
-
-.AppStoresTable .el-table tr {
-  background: transparent;
-}
-
-.AppStoresTable .el-table {
-  background: transparent;
-  border-color: transparent;
-}
-
-.AppStoresTable .el-table:before {
-  background: transparent;
-}
-
-.tableCell {
-  color: #fff;
-  border-color: transparent !important;
+  height: 130px;
 }
 
 .AppStoresTable .headerTitle {