农产品溯源地图

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

@@ -47,8 +47,6 @@ export default {
     const option = reactive({});
 
     watchEffect(() => {
-      regMap(props.name, props.geo);
-      console.info('watchEffect');
       props.chartData && initCharts();
     });
 
@@ -66,8 +64,9 @@ export default {
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
-      setOptions(option);
 
+      setOptions(option);
+      regMap(props.name, props.geo);
       onMapClick((data) => {
         emit('click', data);
       });

src/views/trace/components/traceMap.vue

@@ -1,15 +1,26 @@
 <template>
-  <section ref="chartRef" class="_container"></section>
+  <div class="map-center-warp">
+    <div class="map-pos">
+      <custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
+    </div>
+  </div>
 </template>
-
 <script setup>
-import { ref, onMounted } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
-import { useEcharts } from '@/hooks/useEcharts';
+import { ref, reactive, onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import geoJsonData from './china.json'; // 根据实际情况调整路径;
+const route = useRoute();
+const props = defineProps({
+  dialogTitle: {
+    type: String,
+    default: '首页',
+  },
+});
+const isShow = ref(false);
+let geoData = geoJsonData;
+let mapName = ref('china');
 
-onMounted(() => loadMapChart());
-
-const chartRef = ref(null);
-const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
 const chinaGeoCoordMap = ref({
   云南: [102.9199, 25.4663],
   广东: [113.12244, 23.009505],
@@ -24,7 +35,7 @@ const chinaDatas = ref([
   [{ name: '四川', value: 1256 }],
   [{ name: '河北', value: 382 }],
 ]);
-function convertData(data) {
+const convertData = (data) => {
   var res = [];
   for (var i = 0; i < data.length; i++) {
     var dataItem = data[i];
@@ -43,8 +54,8 @@ function convertData(data) {
     }
   }
   return res;
-}
+};
-function getSeries() {
+const getSeries = () => {
   let list = [];
   [['云南', chinaDatas.value]].forEach(function (item, i) {
     list.push(
@@ -147,9 +158,10 @@ function getSeries() {
     );
   });
   return list;
-}
+};
-async function loadMapChart() {
+
-  var option = {
+const chartsData = reactive({
+  option: {
     title: {
       text: '地图统计图表',
       subtext: '',
@@ -177,7 +189,6 @@ async function loadMapChart() {
       transitionDuration: 0,
       extraCssText: 'z-index:100',
       formatter: function (params, ticket, callback) {
-        console.log('params', params);
         let val = 0;
         if (typeof params.value == 'number') {
           val = params.value;
@@ -187,7 +198,6 @@ async function loadMapChart() {
         //根据业务自己拓展要显示的内容
         var res = '';
         var name = params.name;
-
         res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
         return res;
       },
@@ -205,7 +215,7 @@ async function loadMapChart() {
       },
     },
     geo: {
-      map: 'china',
+      map: mapName.value,
       zoom: 1.2,
       top: 250,
       label: {
@@ -226,40 +236,92 @@ async function loadMapChart() {
       },
     },
     series: getSeries(),
-  };
+  },
-  // const { rows } = await selectRecord(this.baseId);
+});
-  // //数据
-  // // option.series[0].data = rows.map((item) => ({
-  // //   name: item.queryCity,
-  // //   value: [item.queryCoordinate.split(',')[0], item.queryCoordinate.split(',')[1], item.queryCount],
-  // // }));
-  // //查询次数
-  // let i = 956;
-  // rows.forEach((item) => {
-  //   i += item.queryCount;
-  // });
-  // option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
-  option.title.subtext = `我们的产品走过了18个城市，被客户查询了73812次`;
-  // this.$echarts.registerMap('china', { geoJSON: chinaMap });
-  // myChart.on('click', (params) => {
-  //   if (params.name.includes('广东')) {
-  //     this.$emit('dataType', '2');
-  //   } else if (params.name.includes('香港')) {
-  //     this.$emit('dataType', '1');
-  //   } else {
-  //     this.$emit('dataType', '0');
-  //   }
-  // });
-  console.log('option', option);
-  setOptions(option);
-}
-</script>
 
+let currentMap = reactive({});
+
+const mapClick = (data) => {
+  //   if (props.markerData.length && props.markerData.length > 0) {
+  //     if (data.seriesType == 'effectScatter') {
+  //       isShow.value = true;
+  //       currentMap = data;
+  //       emit('mapclick', currentMap);
+  //     }
+  //   } else {
+  //     isShow.value = true;
+  //     currentMap = data;
+  //     emit('mapclick', currentMap);
+  //   }
+};
+const handleClose = () => {
+  isShow.value = false;
+};
+
+const emit = defineEmits(['mapclick']);
+</script>
 <style lang="scss" scoped>
-._container {
+div {
-  padding: 40px;
+  box-sizing: border-box;
+}
+
+::v-deep() {
+  .el-dialog {
+    background: url(iconUrl) no-repeat left top;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: 8px !important;
+    min-height: 200px;
+    max-height: 500px;
+    overflow-y: auto;
+    background-size: 100% 100%;
+    padding: 16px;
+    margin-top: 15%;
+  }
+  .el-dialog__header {
+    margin-top: 10px;
+    text-align: left;
+    padding-left: 48px;
+    .el-dialog__title,
+    i {
+      color: #fff !important;
+    }
+    .el-dialog__headerbtn {
+      top: 8px !important;
+    }
+  }
+  .map-dialog-my-header {
+    margin-top: 4px;
+    display: inline-flex;
+    justify-content: space-between;
+    h4 {
+      font-weight: normal !important;
+    }
+  }
+}
+.map-center-warp {
+  width: 100%;
+  text-align: center;
+  position: relative;
+  height: 90%;
+  .map-img {
+    width: 80%;
+    height: 80%;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    object-fit: contain;
+    transform: translateX(-50%);
+    max-width: 1000px;
+    max-height: 1000px;
+  }
+  .map-pos {
     width: 100%;
     height: 100%;
-  border: 1px solid red;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 </style>

src/views/trace/index.vue

@@ -25,7 +25,7 @@
         </div>
       </el-col>
       <el-col :span="12">
-        <centerMap />
+        <traceMap></traceMap>
       </el-col>
       <el-col :span="6" class="right-charts">
         <div class="right-charts-item">
@@ -55,7 +55,7 @@
 </template>
 <script setup>
 import { ref } from 'vue';
-import centerMap from './components/centerMap.vue';
+import traceMap from './components/traceMap.vue';
 import codeNumCharts from './components/codeNumCharts.vue';
 import mainPartCharts from './components/mainPartCharts.vue';
 import principalTypeCharts from './components/principalTypeCharts.vue';