经营主体地图

src/views/business/components/businessMap.vue

@@ -7,17 +7,81 @@
     @mapclick="doMapclick"
   >
     <template #header>
-      <div class="land-map-pop-header">
+      <div class="buiness-map-pop-header">
         <div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '经营主体' }}</div>
       </div>
     </template>
     <template #dialogContent>
-      <div class="land-map-pop-content">
+      <div class="buiness-map-pop-content">
-        <div v-for="(n, index) in list" :key="index" class="list-item">
+        <div class="addr">
-          <div class="title">
+          <el-icon :size="'18px'" :color="'#fff'">
-            <span class="title-val"> {{ n.title }}</span>
+            <LocationFilled />
+          </el-icon>
+          {{ testInfo.addr || ' --' }}
+        </div>
+        <div class="tips-warp">
+          <div class="label">负责人：</div>
+          <div class="val">{{ testInfo.user || '--' }}</div>
+        </div>
+        <div class="tips-warp">
+          <div class="label">联系方式：</div>
+          <div class="val">{{ testInfo.tel || '--' }}</div>
+        </div>
+        <div class="tips-warp">
+          <div class="label">注册资本：</div>
+          <div class="val">{{ testInfo.capital || '--' }}</div>
+        </div>
+        <div class="tips-warp">
+          <div class="label">成立时间：</div>
+          <div class="val">{{ testInfo.time || '--' }}</div>
+        </div>
+        <div class="tips-warp">
+          <div class="label">信用等级：</div>
+          <div class="val">{{ testInfo.credit || '--' }}</div>
+        </div>
+        <div class="img-list">
+          <div class="img-item">
+            <el-image
+              style="width: 80px; height: 60px; cursor: pointer"
+              :preview-src-list="
+                testInfo.imglist.map((m) => {
+                  return getAssetsFile(m);
+                })
+              "
+              :src="getAssetsFile(testInfo.imglist[0])"
+              fit="cover"
+              lazy
+            />
+            <div class="img-name">营业执照</div>
+          </div>
+          <div class="img-item">
+            <el-image
+              style="width: 80px; height: 60px; cursor: pointer"
+              :preview-src-list="
+                testInfo.imglist.map((m) => {
+                  return getAssetsFile(m);
+                })
+              "
+              :src="getAssetsFile(testInfo.imglist[1])"
+              fit="cover"
+              lazy
+            />
+            <div class="img-name">经营许可证</div>
+          </div>
+          <div class="img-item">
+            <el-image
+              style="width: 80px; height: 60px; cursor: pointer"
+              :preview-src-list="
+                testInfo.imglist.map((m) => {
+                  return getAssetsFile(m);
+                })
+              "
+              :src="getAssetsFile(testInfo.imglist[2])"
+              fit="cover"
+              lazy
+            />
+            <div class="img-name">其他整数</div>
           </div>
-          <div class="value">{{ n.value }}{{ n.unit }}</div>
         </div>
       </div>
     </template>
@@ -32,17 +96,39 @@ const list = reactive([
   { title: '年总产值', value: 3.49, color: '#01FEFD', unit: '亿元' },
   { title: '年人均收入', value: 6.98, color: '#FEF906', unit: '万元' },
 ]);
-
+let testInfo = reactive({});
 let currentRegion = ref(null);
 const doMapclick = (data) => {
   currentRegion.value = data;
+  if (data.name == '永星食品加工厂') {
+    testInfo = {
+      addr: '云南省临沧市耿马傣族佤族自治县孟定镇101号',
+      user: '张强',
+      tel: '15331683325',
+      capital: '500万',
+      time: '2018年12月1日',
+      credit: 'AA',
+      imglist: ['images/vsualized/home1.png', 'images/vsualized/home1.png', 'images/vsualized/home1.png'],
+    };
+  }
+  if (data.name == '欣欣种源企业') {
+    testInfo = {
+      addr: '云南省临沧市耿马傣族佤族自治耿马镇102号',
+      user: '李欣',
+      tel: '13713575206',
+      capital: '600万',
+      time: '2020年10月1日',
+      credit: 'AA',
+      imglist: ['images/vsualized/home1.png', 'images/vsualized/home1.png', 'images/vsualized/home1.png'],
+    };
+  }
 };
 
 let markerData = reactive([
   // 示例数据点，实际应用中应替换为真实的数据
   {
     name: '永星食品加工厂',
-    value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值
+    value: [99.081993, 23.524045, 150], // 经度, 纬度, 数值
     symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
     itemStyle: {
       color: '#4bffb4', //
@@ -60,7 +146,7 @@ let markerData = reactive([
 </script>
 
 <style lang="scss" scoped>
-.land-map-pop-header {
+.buiness-map-pop-header {
   display: inline-flex;
   justify-content: space-between;
   width: 100%;
@@ -78,45 +164,43 @@ let markerData = reactive([
     font-size: 14px;
   }
 }
-.land-map-pop-content {
+.buiness-map-pop-content {
   width: 100%;
-  gap: 10px;
+  .addr {
-  display: inline-flex;
+    width: 100%;
-  justify-content: flex-start;
+    display: inline-flex;
-  flex-wrap: wrap;
+    color: #fff;
-  .list-item {
+    text-align: left;
-    width: calc((100% - 10px) / 1);
+  }
+  .tips-warp {
+    width: 100%;
     display: inline-flex;
     justify-content: space-between;
-    padding: 6px 0;
+    text-align: left;
-    .title {
+    margin: 6px 0;
-      display: inline-flex;
+    .label {
-      justify-content: flex-start;
+      color: #fef906;
-      .before {
-        display: inline-flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .b-content {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        display: inline-block;
-      }
-      .before,
-      .title-val {
-        display: inline-block;
-        vertical-align: middle;
-        padding: 0 5px 0 2px;
-        color: $color-custom-main;
-      }
     }
-
+    .val {
-    .value {
+      color: #fff;
-      display: inline-block;
+    }
-      text-align: right;
+  }
-      color: $color-white;
+  .img-list {
-      font-size: 12px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+    gap: 10;
+    flex-wrap: wrap;
+    .img-item {
+      width: calc((100% - 10px) / 2);
+      margin-bottom: 8px;
+      .el-image {
+        background: transparent !important;
+      }
+      .img-name {
+        color: #fff;
+        padding: 6px 0;
+      }
     }
   }
 }