src/components/centerMap.vue

@@ -2,27 +2,46 @@
   <div class="map-center-warp">
     <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
     <div class="map-pos">
-      <custom-echart-maps
+      <custom-echart-maps :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
-        :chart-data="chartsData.valData"
-        height="100%"
-        width="100%"
-        :option="chartsData.option"
-        :geo="geoData"
-        :name="mapName"
-        @click="mapClick"
-      />
     </div>
-    <section class="line_info" :style="{ '--top': isShow ? '18vh' : '140vh' }">
+    <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
-      <i class="el-icon-close" @click="infoHide"></i>
+      <i class="el-icon-close" @click="handleCloseInfo"></i>
       <section>
         <section class="info_box">
           <div>
             <span>产品名称</span>
-            <span>{{}}</span>
+            <span>{{ info.productName }}</span>
           </div>
           <div>
             <span>产品批次号</span>
-            <span>{{}}</span>
+            <span>{{ info.productCode }}</span>
+          </div>
+          <div>
+            <span>产品规格</span>
+            <span>{{ info.specs }}</span>
+          </div>
+          <div>
+            <span>产品类型</span>
+            <span>{{ info.productType }}</span>
+          </div>
+          <div>
+            <span>生产厂家</span>
+            <span>{{ info.info && info.info.manufacturer }}</span>
+          </div>
+          <div>
+            <span>生产时间</span>
+            <span>{{ info.info && info.info.productTime }}</span>
+          </div>
+          <div>
+            <span>终端零售店</span>
+            <span>{{ info.info && info.info.shop }}</span>
+          </div>
+        </section>
+        <section class="route_box">
+          <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
+            <div class="_circle"></div>
+            <div class="_name">{{ item.name }}</div>
+            <div class="_time">{{ item.time }}</div>
           </div>
         </section>
       </section>
@@ -36,7 +55,7 @@ var aspectScale = 0.8807505292367753;
 // var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
 // var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
 var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
-const isShow = ref(false);
+
 import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
 let geoData = geoJsonData;
 let mapName = ref('ZJ');
@@ -244,15 +263,6 @@ const chartsData = reactive({
   ],
 });
 
-const mapClick = (data) => {
-  isShow.value = true;
-  console.info('mapClick', data);
-};
-
-const infoHide = () => {
-  isShow.value = false;
-};
-
 onMounted(() => {
   console.info('iconUrl', iconUrl);
 });

src/components/custom-echart-maps/index.vue

@@ -80,7 +80,6 @@ export default {
     }
 
     function onClick(params) {
-      console.info('地图onClick', params);
       emit('click', params);
     }