热区点击事件

src/layout/businessManagement.vue

@@ -76,14 +76,219 @@
         </div>
         <Search />
         <ThemeSetting />
+        <el-dialog title="" :visible.sync="dialogFormVisible" width="30%">
+            <div class="tanchuang">
+                <div class="div_header">
+                    <div class="head_left">
+                        <div style="font-size: 17px; font-weight: 500; margin-right: 30px;">
+                            {{ canghao }}号仓
+                        </div>
+                        <div>(出入库中)</div>
+                    </div>
+                    <div class="head_right">
+                        <div style="font-size: 10px;">查看></div>
+                    </div>
+                </div>
+
+                <div
+                    class="tanKuang_middle"
+                    style="display: flex; height: 125px; align-items: center;"
+                >
+                    <div class="middle_left_f">
+                        <div class="middle_left">
+                            <div style="font-weight: 500; margin-right: 30px;">仓房类型:</div>
+                            <div style="margin-right: 30px;">平房仓库</div>
+                            <div>5367 m3</div>
+                        </div>
+                        <div class="middle_left">
+                            <div style="font-weight: 500; margin-right: 30px;">物资性质:</div>
+                            <div style="margin-right: 30px;">政府储备</div>
+                        </div>
+                        <div class="middle_left">
+                            <div style="font-weight: 500; margin-right: 30px;">物资类型:</div>
+                            <div style="margin-right: 30px;">基本生活保障物资</div>
+                        </div>
+                        <div class="middle_left">
+                            <div style="font-weight: 500; margin-right: 30px;">仓管员:</div>
+                            <div style="margin-right: 30px;">王全得</div>
+                            <div>(18500327512)</div>
+                        </div>
+                    </div>
+                    <div class="middle_right" style="margin-top: 10px; margin-left: 10px;">
+                        <div
+                            style="
+                padding: 5px 20px;
+                background: #ebebeb;
+                margin-bottom: 10px;
+                border-radius: 5px;
+"
+                        >
+                            <span style="font-weight: 500; padding-right: 10px;">20 ℃</span>
+                            <span style="font-weight: 500;">35%</span>
+                            <div style="color: #5f9af8; text-align: center;">仓内</div>
+                        </div>
+                        <div
+                            style="padding: 5px 20px; background: #ebebeb; border-radius: 5px;"
+                        >
+                            <span style="font-weight: 500; padding-right: 10px;">18 ℃</span>
+                            <span style="font-weight: 500;">30%</span>
+                            <div style="color: #5f9af8; text-align: center;">仓外</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div style="height: 5px; background: #ebebeb; margin: 10px 0;" />
+
+                <div class="tankuang_bottom">
+                    <div
+                        class="bottom_header"
+                        style="display: flex; justify-content: space-between;"
+                    >
+                        <div style="font-weight: 500;">在储物资 &nbsp;&nbsp;(13种)</div>
+                        <div style="color: gray;">库容比85%</div>
+                    </div>
+
+                    <div
+                        class="bottom_child"
+                        style="display: flex; justify-content: space-between;"
+                    >
+                        <div class="bottom_left" style="width: 100px; height: 100px;">
+                            <img
+                                :src="require('@/assets/images/wuzi1.png')"
+                                style="width: 100%; height: 100%;"
+                            >
+                        </div>
+                        <div class="bottom_right">
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">物资名称：</div>
+                                <div style="margin-right: 20px;">户外帐篷 3-4人</div>
+                                <div>(2728)</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">建议存储时间：</div>
+                                <div>5年</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">生产日期：</div>
+                                <div>2017-08-09</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">数量：</div>
+                                <div>1839件</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class="bottom_child"
+                        style="display: flex; justify-content: space-between;"
+                    >
+                        <div class="bottom_left" style="width: 100px; height: 100px;">
+                            <img
+                                :src="require('@/assets/images/wuzi2.png')"
+                                style="width: 100%; height: 100%;"
+                            >
+                        </div>
+                        <div class="bottom_right">
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">物资名称：</div>
+                                <div style="margin-right: 20px;">棉被冬季</div>
+                                <div>(12728)</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">建议存储时间：</div>
+                                <div>5年</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">生产日期：</div>
+                                <div>2017-08-09</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">数量：</div>
+                                <div>1839件</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class="bottom_child"
+                        style="display: flex; justify-content: space-between;"
+                    >
+                        <div class="bottom_left" style="width: 100px; height: 100px;">
+                            <img
+                                :src="require('@/assets/images/wuzi3.png')"
+                                style="width: 100%; height: 100%;"
+                            >
+                        </div>
+                        <div class="bottom_right">
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">物资名称：</div>
+                                <div style="margin-right: 20px;">折叠桌椅</div>
+                                <div>(2238)</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">建议存储时间：</div>
+                                <div>5年</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">生产日期：</div>
+                                <div>2017-08-09</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">数量：</div>
+                                <div>1839件</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class="bottom_child"
+                        style="display: flex; justify-content: space-between;"
+                    >
+                        <div class="bottom_left" style="width: 100px; height: 100px;">
+                            <img
+                                :src="require('@/assets/images/wuzi4.png')"
+                                style="width: 100%; height: 100%;"
+                            >
+                        </div>
+                        <div class="bottom_right">
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">物资名称：</div>
+                                <div style="margin-right: 20px;">夏季被冬季</div>
+                                <div>(12728)</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">建议存储时间：</div>
+                                <div>5年</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">生产日期：</div>
+                                <div>2017-08-09</div>
+                            </div>
+                            <div style="display: flex; margin: 5px 0;">
+                                <div style="font-weight: 500;">数量：</div>
+                                <div>388件</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">取 消</el-button>
+                <el-button type="primary" @click="dialogFormVisible = false">
+                    确 定
+                </el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
-import wuzi1 from '@/assets/images/wuzi1.png'
-import wuzi2 from '@/assets/images/wuzi2.png'
-import wuzi3 from '@/assets/images/wuzi3.png'
-import wuzi4 from '@/assets/images/wuzi4.png'
+// import wuzi1 from '@/assets/images/wuzi1.png'
+// import wuzi2 from '@/assets/images/wuzi2.png'
+// import wuzi3 from '@/assets/images/wuzi3.png'
+// import wuzi4 from '@/assets/images/wuzi4.png'
 import $ from 'jquery'
 import variables from '@/assets/styles/resources/variables.scss'
 import Logo from './components/Logo'
@@ -122,23 +327,27 @@ export default {
     },
     data() {
         return {
+            // 弹框仓号
+            canghao: '',
+            dialogFormVisible: false,
             // 热区
             datas: {
-                'maps': [
-                    {'index': 1, 'x': 345, 'y': 439, h: 150},
-                    {'index': 2, 'x': 538, 'y': 452, h: 150},
-                    {'index': 3, 'x': 729, 'y': 458, h: 150},
-                    {'index': 4, 'x': 954, 'y': 469, h: 150},
-                    {'index': 5, 'x': 1150, 'y': 474, h: 150},
-                    {'index': 6, 'x': 459, 'y': 218},
-                    {'index': 7, 'x': 630, 'y': 226},
-                    {'index': 8, 'x': 799, 'y': 233},
-                    {'index': 9, 'x': 995, 'y': 238},
-                    {'index': 10, 'x': 1168, 'y': 249},
-                    {'index': 11, 'x': 1361, 'y': 253},
-                    {'index': 12, 'x': 1539, 'y': 261}
-
-                ], 'width': 1905, 'height': 1136
+                maps: [
+                    { index: 1, x: 345, y: 439, h: 150 },
+                    { index: 2, x: 538, y: 452, h: 150 },
+                    { index: 3, x: 729, y: 458, h: 150 },
+                    { index: 4, x: 954, y: 469, h: 150 },
+                    { index: 5, x: 1150, y: 474, h: 150 },
+                    { index: 6, x: 459, y: 218 },
+                    { index: 7, x: 630, y: 226 },
+                    { index: 8, x: 799, y: 233 },
+                    { index: 9, x: 995, y: 238 },
+                    { index: 10, x: 1168, y: 249 },
+                    { index: 11, x: 1361, y: 253 },
+                    { index: 12, x: 1539, y: 261 }
+                ],
+                width: 1905,
+                height: 1136
             },
             isRouterAlive: true,
             routePath: '',
@@ -221,7 +430,6 @@ export default {
     }, */
     destroyed() {
         window.removeEventListener('scroll', this.onScroll)
-        
     },
     methods: {
         // 热区
@@ -238,217 +446,44 @@ export default {
                 htmlStr += `<div w=${w} h=${h} x=${x} y=${y} canghao=${canghao} class=area path=${path} style=left:${
                     x - w / 2 + 260
                 }px;top:${y - w / 2}px;width:${ele.w}px;height:${ele.h}px></div>`
-                htmlStr += '<div id="pDiv"></div>'
+                // htmlStr += '<div id="pDiv"></div>'
             }
 
             $('#map').append(htmlStr)
             console.log(document.getElementsByClassName('area'))
             $('.area').click(e => {
-                console.log(e.target, 'e.target...')
-                // var url = e.target.getAttribute("url")
-                var path = e.target.getAttribute('path')
-
-                console.log('path', path)
-
-                if (path !== '-1') {
-                    this.$router.push(path)
-                }
+                console.log('?????????????')
+                console.log(this.dialogFormVisible)
+                this.canghao = $(e.target).attr('canghao')
+                this.dialogFormVisible = true
+                // console.log(e.target, 'e.target...')
+                // // var url = e.target.getAttribute("url")
+                // var path = e.target.getAttribute('path')
+
+                // console.log('path', path)
+
+                // if (path !== '-1') {
+                //     this.$router.push(path)
+                // }
             })
             // 鼠标移上去的样式
-            $('.area').mouseover(e => {
-                const canghao = $(e.target).attr('canghao')
-              
-                $('#pDiv').html(` 
-             <div class="tanchuang">
-           
-                  <div class="div_header">
-                   <div class="head_left">
-                     <div style="font-size:17px;font-weight:500;margin-right:30px">${canghao}号仓</div>
-                      <div>(出入库中)</div>
-                   </div>
-                   <div class="head_right">
-                     <div style="font-size:10px;">查看></div>
-                     
-                   </div>
-                  </div>
-
-
-                  <div class="tanKuang_middle" style="display:flex;height:125px;align-items:center">
-                   <div class="middle_left_f">
-                    <div class="middle_left">
-                   
-
-                      <div style="font-weight:500;margin-right:30px">仓房类型:</div>
-                      <div style="margin-right:30px">平房仓库</div>
-                      <div>5367 m3</div>
-                    </div>
-                    <div class="middle_left">
-                      <div style="font-weight:500;margin-right:30px">物资性质:</div>
-                      <div style="margin-right:30px">政府储备</div>
-                      </div>
-                    <div class="middle_left">
-                      <div style="font-weight:500;margin-right:30px">物资类型:</div>
-                      <div style="margin-right:30px">基本生活保障物资</div>
-                
-                    </div>
-                    <div class="middle_left">
-                      <div style="font-weight:500;margin-right:30px">仓管员:</div>
-                      <div style="margin-right:30px">王全得</div>
-                      <div>(18500327512)</div>
-                    </div>
-                    </div>
-                     <div class="middle_right" style="margin-top:10px;margin-left:10px;">
-                       <div style="padding:5px 20px;background:#ebebeb;margin-bottom:10px;border-radius:5px;">
-                         <span style="font-weight:500;padding-right:10px;">20 ℃</span>
-                         <span style="font-weight:500;">35%</span>
-                         <div style="color:#5f9af8;text-align:center">仓内</div>
-                       </div>
-                       <div style="padding:5px 20px;background:#ebebeb;border-radius:5px;">
-                         <span style="font-weight:500;padding-right:10px;">18 ℃</span>
-                         <span style="font-weight:500;">30%</span>
-                         <div style="color:#5f9af8;text-align:center"">仓外</div>
-                       </div>
-                     </div>
-                  </div>
-
-
-                  <div style="height:5px;background:#ebebeb;margin:10px 0"></div>
-
-
-                  <div class="tankuang_bottom">
-                     <div class="bottom_header" style="display:flex;justify-content:space-between">
-                        <div style="font-weight:500">在储物资 &nbsp;&nbsp;(13种)</div>
-                        <div style="color:gray">库容比85%</div>
-                     </div>
-
-                     <div class="bottom_child" style="display:flex;justify-content:space-between">
-                         <div class="bottom_left" style="width:100px;height:100px">
-                           <img src="${wuzi1}"/ style="width:100%;height:100%">
-                         </div>
-                           <div class="bottom_right" >
-                              <div  style="display:flex;margin:5px 0">
-                                    <div style="font-weight:500">物资名称：</div>
-                                    <div style="margin-right:20px;">户外帐篷 3-4人</div>
-                                    <div>(2728)</div>
-                              </div>
-                              <div  style="display:flex;margin:5px 0">
-                                <div style="font-weight:500">建议存储时间：</div>
-                                <div>5年</div>
-                              </div>
-                              <div  style="display:flex;margin:5px 0">
-                                 <div style="font-weight:500">生产日期：</div>
-                                 <div>2017-08-09</div>
-                              </div>
-                              <div style="display:flex;margin:5px 0">
-                                 <div style="font-weight:500">数量：</div>
-                                 <div>1839件</div>
-                              </div>
-                           
-                           </div>
-                     </div>
-
-
-                      <div class="bottom_child" style="display:flex;justify-content:space-between">
-                         <div class="bottom_left" style="width:100px;height:100px">
-                           <img src="${wuzi2}"/ style="width:100%;height:100%">
-                         </div>
-                           <div class="bottom_right">
-                              <div  style="display:flex;margin:5px 0">
-                                    <div style="font-weight:500">物资名称：</div>
-                                    <div style="margin-right:20px;">棉被冬季</div>
-                                    <div>(12728)</div>
-                              </div>
-                              <div  style="display:flex;margin:5px 0">
-                                <div style="font-weight:500">建议存储时间：</div>
-                                <div>5年</div>
-                              </div>
-                              <div  style="display:flex;margin:5px 0">
-                                 <div style="font-weight:500">生产日期：</div>
-                                 <div>2017-08-09</div>
-                              </div>
-                              <div style="display:flex;margin:5px 0">
-                                 <div style="font-weight:500">数量：</div>
-                                 <div>1839件</div>
-                              </div>
-                           
-                           </div>
-                     </div>
-
-
-
-                      <div class="bottom_child" style="display:flex;justify-content:space-between">
-                         <div class="bottom_left" style="width:100px;height:100px">
-                           <img src="${wuzi3}"/ style="width:100%;height:100%">
-                         </div>
-                           <div class="bottom_right" >
-                              <div  style="display:flex;margin:5px 0">
-                                    <div style="font-weight:500">物资名称：</div>
-                                    <div style="margin-right:20px;">折叠桌椅</div>
-                                    <div>(2238)</div>
-                              </div>
-                              <div  style="display:flex;margin:5px 0">
-                                <div style="font-weight:500">建议存储时间：</div>
-                                <div>5年</div>
-                              </div>
-                              <div  style="display:flex;margin:5px 0">
-                                 <div style="font-weight:500">生产日期：</div>
-                                 <div>2017-08-09</div>
-                              </div>
-                              <div style="display:flex;margin:5px 0">
-                                 <div style="font-weight:500">数量：</div>
-                                 <div>1839件</div>
-                              </div>
-                           
-                           </div>
-                     </div>
-
-
-
-
-
-                     <div class="bottom_child" style="display:flex;justify-content:space-between">
-                         <div class="bottom_left" style="width:100px;height:100px">
-                           <img src="${wuzi4}"/ style="width:100%;height:100%">
-                         </div>
-                           <div class="bottom_right" >
-                              <div  style="display:flex;margin:5px 0">
-                                    <div style="font-weight:500">物资名称：</div>
-                                    <div style="margin-right:20px;">夏季被冬季</div>
-                                    <div>(12728)</div>
-                              </div>
-                              <div  style="display:flex;margin:5px 0">
-                                <div style="font-weight:500">建议存储时间：</div>
-                                <div>5年</div>
-                              </div>
-                              <div  style="display:flex;margin:5px 0">
-                                 <div style="font-weight:500">生产日期：</div>
-                                 <div>2017-08-09</div>
-                              </div>
-                              <div style="display:flex;margin:5px 0">
-                                 <div style="font-weight:500">数量：</div>
-                                 <div>388件</div>
-                              </div>
-                           
-                           </div>
-                     </div>
-                
-                
-                  </div>
-             </div>
-      `)
-               
-                const offset = -50
-                const top = $(e.target).position().top + offset
-                const left = $(e.target).position().left + offset - 110
-                $('#pDiv').show()
-                $('#pDiv').css({
-                    top: top,
-                    left: left
-                })
-            })
-            $('.area').mouseleave(() => {
-                $('#pDiv').hide()
-            })
+            // $('.area').mouseover(() => {
+            //     // const canghao = $(e.target).attr('canghao')
+
+            //     this.dialogFormVisible = true
+            //     // const offset = -50
+            //     // const top = $(e.target).position().top + offset
+            //     // const left = $(e.target).position().left + offset - 110
+            //     // $('#pDiv').show()
+            //     // $('#pDiv').css({
+            //     //     top: top,
+            //     //     left: left
+            //     // })
+            // })
+            // $('.area').mouseleave(() => {
+            // //     // $('#pDiv').hide()
+            // //     this.dialogFormVisible = false
+            // // })
         },
         scale() {
             var w = $('#map').width()

src/layout/businessManagement copy.vue

@@ -80,6 +80,10 @@
 </template>
 
 <script>
+import wuzi1 from '@/assets/images/wuzi1.png'
+import wuzi2 from '@/assets/images/wuzi2.png'
+import wuzi3 from '@/assets/images/wuzi3.png'
+import wuzi4 from '@/assets/images/wuzi4.png'
 import $ from 'jquery'
 import variables from '@/assets/styles/resources/variables.scss'
 import Logo from './components/Logo'
@@ -120,9 +124,21 @@ export default {
         return {
             // 热区
             datas: {
-                maps: [{ index: 0, x: 1168, y: 249 }],
-                width: 1905,
-                height: 1136
+                'maps': [
+                    {'index': 1, 'x': 345, 'y': 439, h: 150},
+                    {'index': 2, 'x': 538, 'y': 452, h: 150},
+                    {'index': 3, 'x': 729, 'y': 458, h: 150},
+                    {'index': 4, 'x': 954, 'y': 469, h: 150},
+                    {'index': 5, 'x': 1150, 'y': 474, h: 150},
+                    {'index': 6, 'x': 459, 'y': 218},
+                    {'index': 7, 'x': 630, 'y': 226},
+                    {'index': 8, 'x': 799, 'y': 233},
+                    {'index': 9, 'x': 995, 'y': 238},
+                    {'index': 10, 'x': 1168, 'y': 249},
+                    {'index': 11, 'x': 1361, 'y': 253},
+                    {'index': 12, 'x': 1539, 'y': 261}
+
+                ], 'width': 1905, 'height': 1136
             },
             isRouterAlive: true,
             routePath: '',
@@ -182,10 +198,9 @@ export default {
         }, 500)
 
         this.getValue()
-
         // this.$store.state.settings.showCopyright = false
-        this.$store.state.settings.mode == 'mobile'
-        this.$store.state.settings.sidebarCollapse = true
+        /* this.$store.state.settings.mode == 'mobile'
+        this.$store.state.settings.sidebarCollapse = true */
         this.$hotkeys('alt+s', e => {
             if (this.$store.state.settings.enableNavSearch) {
                 e.preventDefault()
@@ -200,10 +215,13 @@ export default {
         })
         window.addEventListener('scroll', this.onScroll)
     },
+    /*  beforeDestroy() {
+        this.$store.state.settings.sidebarCollapse = false
+        this.$store.state.settings.mode == 'pc'
+    }, */
     destroyed() {
         window.removeEventListener('scroll', this.onScroll)
-        this.$store.state.settings.mode == 'pc'
-        this.$store.state.settings.sidebarCollapse = false
+        
     },
     methods: {
         // 热区
@@ -215,8 +233,9 @@ export default {
                 var y = ele.y
                 var w = ele.w === undefined ? 100 : ele.w
                 var h = ele.h === undefined ? 130 : ele.h
+                var canghao = ele.index
                 var path = ele.path === undefined ? '-1' : ele.path
-                htmlStr += `<div w=${w} h=${h} x=${x} y=${y} class=area path=${path} style=left:${
+                htmlStr += `<div w=${w} h=${h} x=${x} y=${y} canghao=${canghao} class=area path=${path} style=left:${
                     x - w / 2 + 260
                 }px;top:${y - w / 2}px;width:${ele.w}px;height:${ele.h}px></div>`
                 htmlStr += '<div id="pDiv"></div>'
@@ -235,17 +254,16 @@ export default {
                     this.$router.push(path)
                 }
             })
-
             // 鼠标移上去的样式
             $('.area').mouseover(e => {
-                // const kqcfName = $(e.target).attr('kqcfName')
+                const canghao = $(e.target).attr('canghao')
               
                 $('#pDiv').html(` 
              <div class="tanchuang">
            
                   <div class="div_header">
                    <div class="head_left">
-                     <div style="font-size:17px;font-weight:500;margin-right:30px">10号仓</div>
+                     <div style="font-size:17px;font-weight:500;margin-right:30px">${canghao}号仓</div>
                       <div>(出入库中)</div>
                    </div>
                    <div class="head_right">
@@ -267,8 +285,7 @@ export default {
                     <div class="middle_left">
                       <div style="font-weight:500;margin-right:30px">物资性质:</div>
                       <div style="margin-right:30px">政府储备</div>
-                     
-                    </div>
+                      </div>
                     <div class="middle_left">
                       <div style="font-weight:500;margin-right:30px">物资类型:</div>
                       <div style="margin-right:30px">基本生活保障物资</div>
@@ -304,31 +321,117 @@ export default {
                         <div style="color:gray">库容比85%</div>
                      </div>
 
-                     <div class="bottom_child">
-                         <div class="bottom_left">
-                           <img src="../assets/images/wuzi1.png"/>
-                         <div>
+                     <div class="bottom_child" style="display:flex;justify-content:space-between">
+                         <div class="bottom_left" style="width:100px;height:100px">
+                           <img src="${wuzi1}"/ style="width:100%;height:100%">
+                         </div>
+                           <div class="bottom_right" >
+                              <div  style="display:flex;margin:5px 0">
+                                    <div style="font-weight:500">物资名称：</div>
+                                    <div style="margin-right:20px;">户外帐篷 3-4人</div>
+                                    <div>(2728)</div>
+                              </div>
+                              <div  style="display:flex;margin:5px 0">
+                                <div style="font-weight:500">建议存储时间：</div>
+                                <div>5年</div>
+                              </div>
+                              <div  style="display:flex;margin:5px 0">
+                                 <div style="font-weight:500">生产日期：</div>
+                                 <div>2017-08-09</div>
+                              </div>
+                              <div style="display:flex;margin:5px 0">
+                                 <div style="font-weight:500">数量：</div>
+                                 <div>1839件</div>
+                              </div>
+                           
+                           </div>
+                     </div>
+
+
+                      <div class="bottom_child" style="display:flex;justify-content:space-between">
+                         <div class="bottom_left" style="width:100px;height:100px">
+                           <img src="${wuzi2}"/ style="width:100%;height:100%">
+                         </div>
                            <div class="bottom_right">
-                              <div>
-                                    <div>物资名称：<div>
-                                    <div>户外帐篷 3-4人<div>
-                                    <div>(2728)<div>
-                              <div>
-                              <div>
-                                <div>建议存储时间：<div>
-                                <div>5年<div>
-                              <div>
-                              <div>
-                                 <div>生产日期：<div>
-                                 <div>2017-08-09<div>
-                              <div>
-                              <div>
-                                 <div>数量：<div>
-                                 <div>1839件<div>
-                              <div>
+                              <div  style="display:flex;margin:5px 0">
+                                    <div style="font-weight:500">物资名称：</div>
+                                    <div style="margin-right:20px;">棉被冬季</div>
+                                    <div>(12728)</div>
+                              </div>
+                              <div  style="display:flex;margin:5px 0">
+                                <div style="font-weight:500">建议存储时间：</div>
+                                <div>5年</div>
+                              </div>
+                              <div  style="display:flex;margin:5px 0">
+                                 <div style="font-weight:500">生产日期：</div>
+                                 <div>2017-08-09</div>
+                              </div>
+                              <div style="display:flex;margin:5px 0">
+                                 <div style="font-weight:500">数量：</div>
+                                 <div>1839件</div>
+                              </div>
+                           
+                           </div>
+                     </div>
+
+
+
+                      <div class="bottom_child" style="display:flex;justify-content:space-between">
+                         <div class="bottom_left" style="width:100px;height:100px">
+                           <img src="${wuzi3}"/ style="width:100%;height:100%">
+                         </div>
+                           <div class="bottom_right" >
+                              <div  style="display:flex;margin:5px 0">
+                                    <div style="font-weight:500">物资名称：</div>
+                                    <div style="margin-right:20px;">折叠桌椅</div>
+                                    <div>(2238)</div>
+                              </div>
+                              <div  style="display:flex;margin:5px 0">
+                                <div style="font-weight:500">建议存储时间：</div>
+                                <div>5年</div>
+                              </div>
+                              <div  style="display:flex;margin:5px 0">
+                                 <div style="font-weight:500">生产日期：</div>
+                                 <div>2017-08-09</div>
+                              </div>
+                              <div style="display:flex;margin:5px 0">
+                                 <div style="font-weight:500">数量：</div>
+                                 <div>1839件</div>
+                              </div>
+                           
+                           </div>
+                     </div>
+
+
+
+
+
+                     <div class="bottom_child" style="display:flex;justify-content:space-between">
+                         <div class="bottom_left" style="width:100px;height:100px">
+                           <img src="${wuzi4}"/ style="width:100%;height:100%">
+                         </div>
+                           <div class="bottom_right" >
+                              <div  style="display:flex;margin:5px 0">
+                                    <div style="font-weight:500">物资名称：</div>
+                                    <div style="margin-right:20px;">夏季被冬季</div>
+                                    <div>(12728)</div>
+                              </div>
+                              <div  style="display:flex;margin:5px 0">
+                                <div style="font-weight:500">建议存储时间：</div>
+                                <div>5年</div>
+                              </div>
+                              <div  style="display:flex;margin:5px 0">
+                                 <div style="font-weight:500">生产日期：</div>
+                                 <div>2017-08-09</div>
+                              </div>
+                              <div style="display:flex;margin:5px 0">
+                                 <div style="font-weight:500">数量：</div>
+                                 <div>388件</div>
+                              </div>
                            
-                           <div>
-                     <div>
+                           </div>
+                     </div>
+                
                 
                   </div>
              </div>
@@ -336,16 +439,16 @@ export default {
                
                 const offset = -50
                 const top = $(e.target).position().top + offset
-                const left = $(e.target).position().left + offset - 80
+                const left = $(e.target).position().left + offset - 110
                 $('#pDiv').show()
                 $('#pDiv').css({
                     top: top,
                     left: left
                 })
             })
-            // $('.area').mouseleave(() => {
-            //     $('#pDiv').hide()
-            // })
+            $('.area').mouseleave(() => {
+                $('#pDiv').hide()
+            })
         },
         scale() {
             var w = $('#map').width()
@@ -755,6 +858,9 @@ header + .wrapper {
     opacity: 0;
     margin-left: 20px;
 }
+.el-menu--vertical {
+    background: green;
+}
 </style>
 
 <style>
@@ -802,6 +908,11 @@ header + .wrapper {
 } */
 .tanchuang {
     /* width: 300px; */
+    height: 300px;
+    overflow-x: hidden;
+
+    /* width: 400px; */
+    overflow-y: auto;
 }
 .div_header {
     height: 30px;
@@ -819,4 +930,8 @@ header + .wrapper {
     display: flex;
     margin: 10px 0;
 }
+.bottom_right {
+    width: 233px;
+}
 </style>
+