tj

src/components/Layouts/Map.vue

@@ -34,7 +34,7 @@
             },
             initMap(){
                 const map = L.map('map', {
-                    minZoom: 1,
+                    minZoom: 1.2,
                     maxZoom: 3,
                     center: [0, 0],
                     zoom: 1,
@@ -65,13 +65,13 @@
             },
             initLayers(){
                 /**添加标记点 */
-                const docWidth = document.documentElement.clientWidth;
+                // const docWidth = document.documentElement.clientWidth;
                 const markers=L.layerGroup()
                 let coordinates=[-100, 100];
                 let options={id:1};
                 let icon="project-12";
                 let tip="盲板抽堵作业";
-                let iconSize = [27*docWidth/1920, 33*docWidth/1920];
+                let iconSize = [54, 66];
                 function drawMark(option={tip,icon,options,coordinates}){
                     let myIcon = L.divIcon({
                         className: option.icon,

src/components/Layouts/index.vue

@@ -5,7 +5,7 @@
                 <!-- <img src="@/assets/images/layout_cont.png" alt="地图图片"> -->
                 <Map></Map>
             </div>
-            <div class="map-card lb">
+            <div class="map-card rb">
                 <div class="title">图例</div>
                 <div class="item">重大风险</div>
                 <div class="item level-1">较大风险</div>
@@ -16,7 +16,8 @@
                 <div class="title">作业项目</div>
                 <div class="item" v-for="(item,index) in items" :key="'project-work'+index" :class="item.color?'custom':'project-'+index">
                     <span>
-                        <span class="icon" v-if="item.color" :style="{backgroundColor: item.color}" />
+                        <!-- <span class="icon" v-if="item.color" :style="{backgroundColor: item.color}" /> -->
+                        <img class="map-card-icon" :src="layers['layer'+(index+1)]" alt="">
                         <span>{{item.name}}</span>                    
                     </span>
                     <span class="number" v-if="item.number">{{item.number}}</span>
@@ -27,6 +28,7 @@
 </template>
 <script>
 import Map from './Map.vue';
+import layers from './layers';
 export default {
     name:'Layouts',
     components:{
@@ -34,6 +36,7 @@ export default {
     },
     setup() {
         return{
+            layers,
             items:[
                 {color:'#F53F3F',name:"动火作业"},
                 {color:'#F49062',name:"受限空间作业"},
@@ -71,7 +74,7 @@ export default {
         .map{
         // 2420.41*1868.11
             display: block;
-            width: 63.03vw;
+            width: 80vw;
             height: 86.49vh;
             margin: 0 auto;
             img{
@@ -96,10 +99,10 @@ export default {
                 padding-bottom: 0.1vh;
                 font-family: Microsoft YaHei UI;
             }
-            &.lb{
+            &.rb{
                min-width: 7.92%;
                bottom:4.76vh;
-               left: 2%;
+               right: 2%;
             }
             &.rt{
                top: 1.5vh; 
@@ -118,9 +121,24 @@ export default {
                 text-indent: 1.5vw;
                 display: flex;
                 justify-content: space-between;
+                align-items: center;
                 .number{
                     font-family: 'YouSheBiaoTiHei';
                 }
+                span{
+                    display: flex;
+                    justify-content:flex-start;
+                    align-items: center;                    
+                }
+                .map-card-icon{
+                    display: inline-block;
+                    height: 2vh;
+                    cursor: pointer;
+                    transition: 0.5s;
+                    &:hover{
+                        transform: scale(2.4);
+                    }
+                }
                 &::before{
                     display: block;
                     content: "";

src/components/Layouts/layers.js

@@ -0,0 +1,28 @@
+import layer1 from '@/assets/images/layers/1.png'
+import layer2 from '@/assets/images/layers/2.png'
+import layer3 from '@/assets/images/layers/3.png'
+import layer4 from '@/assets/images/layers/4.png'
+import layer5 from '@/assets/images/layers/5.png'
+import layer6 from '@/assets/images/layers/6.png'
+import layer7 from '@/assets/images/layers/7.png'
+import layer8 from '@/assets/images/layers/8.png'
+import layer9 from '@/assets/images/layers/9.png'
+import layer10 from '@/assets/images/layers/10.png'
+import layer11 from '@/assets/images/layers/11.png'
+import layer12 from '@/assets/images/layers/12.png'
+import layer13 from '@/assets/images/layers/12.png'
+export default {
+    layer1,
+    layer2,
+    layer3,
+    layer4,
+    layer5,
+    layer6,
+    layer7,
+    layer8,
+    layer9,
+    layer10,
+    layer11,
+    layer12,
+    layer13
+}

src/config/index.js

@@ -1,6 +1,7 @@
 export default {
-    dev:"http://192.168.3.5:8080",
-    pro:"http://192.168.3.5:8080",
+    // dev:"http://192.168.3.5:8080",
+    dev:"http://116.204.109.177:8080",
+    pro:"http://116.204.109.177:8080",
     mqttUrl:"ws://1.15.92.205:8083/mqtt",
     appID: '10001',
     appKey: '82a8bf439373e305',