地图上项目查询

zhanghua

2025-01-16 22f9f05b3f1c452325b04f0a5ed9c5f4ad992f3b

地图上项目查询

 src/api/projectEngineering/projectInfo.js

@@ -73,3 +73,10 @@
    data: data
  })
}
export function searchByKey(data) {
  return request({
    url: '/project/info/searchByKey',
    method: 'get',
    params: data
  })
}

 src/views/components/Map/index.vue

@@ -36,6 +36,7 @@
import PlusImg from "@/assets/images/plus.png";
import FullScreenImg from "@/assets/images/fullScreen.png";
import PositionImg from "@/assets/images/position.png";
var infoWin;
export default {
    data() {
        return {
@@ -172,27 +173,26 @@
        },

        getCurrentPosition() {
            if (navigator.geolocation) {
                ElMessage.warning("该功能暂未开发");
                // TODO 地图定位
                // navigator.geolocation.getCurrentPosition(function (position) {
                //   var latitude = position.coords.latitude
                //   var longitude = position.coords.longitude
                //
                //   moveTo(String(longitude), String(latitude))
                // })
            } else {
                ElMessage.warning("当前浏览器不支持定位功能");
            }
      //   if (navigator.geolocation) {
      //     ElMessage.warning("该功能暂未开发");
      //     // TODO 地图定位
      //     // navigator.geolocation.getCurrentPosition(function (position) {
      //     //   var latitude = position.coords.latitude
      //     //   var longitude = position.coords.longitude
      //     //
      //     //   moveTo(String(longitude), String(latitude))
      //     // })
      //   } else {
      //     ElMessage.warning("当前浏览器不支持定位功能");
      //   }
        },

        moveTo(lon, lat) {
            this.map && this.map.panTo(new T.LngLat(lon, lat));
        },

        // 默认的点标记
        makeDefaultMask(mapInfo) {
            const { name, lon, lat } = mapInfo
      const { name, lon, lat } = mapInfo;
            const option = {
                text: name,
                offset: [-35, -45],
@@ -261,14 +261,12 @@
          ${row.projectName ?? "暂无数据"}
        </div>
        <div class='close-btn close-btn-${random}'>
          ×
        </div>
      </div>
      <div class="detail-info">
        <span class="truncate-content">总投资：${row.totalMoney ?? "暂无数据"
                    }</span>
        <span class="truncate-content">总投资：${row.totalMoney || ""}</span>
        <span class="truncate-content">
          项目状态：
          项目状态：${this.showProjectStatusStr(row.projectStatus)}
        </span>
         <span class="truncate-content">
          项目地址：${row.projectAddr ?? "暂无数据"}
@@ -281,22 +279,46 @@
    </div>`;
            }
        },
    showProjectStatusStr(status) {
      switch (status) {
        case "1":
          return "储备项目";
        case "2":
          return "前期项目";
        case "3":
          return "实施项目";
        case "4":
          return "竣工项目";
        case "5":
          return "异常项目";

        default:
          return "异常项目";
      }
    },
        // 唯一标识
        getUniqueId() {
            return Math.random().toString(36).substr(2) + Date.now();
        },

        markerMouseover(_e, infoWin, info, random) {
    markerMouseover(_e, info, random, markerOptions) {
      if (infoWin) this.map.removeOverLay(infoWin);
            // 点位标记移入显示不同内容
            if (this.$props.isShowControl) {
        infoWin = new T.InfoWindow();
                infoWin.setContent(this.generateContent(info, random));
                const contentWrapper = document.querySelector(
                    ".tdt-infowindow-content-wrapper"
                );
                if (contentWrapper) {
                    contentWrapper.style.opacity = "1";
                }
        infoWin.setLngLat(_e.lnglat);
        // 向地图上添加信息窗口
        // if (this.$props.mapType) {
        this.map && this.map.addOverLay(infoWin);
        // }

        // const contentWrapper = document.querySelector(
        //   ".tdt-infowindow-content-wrapper"
        // );
        // if (contentWrapper) {
        //   contentWrapper.style.opacity = "1";
        // }
                // 查找到那个info 界面
                // const allCloseBtn = document.querySelectorAll(`.close-btn-${random}`);
                // allCloseBtn[allCloseBtn.length - 1].onclick = (_e) => {
@@ -305,26 +327,28 @@
            }
        },

        markerMouseout(_e, infoWin) {
            infoWin.setContent(this.generateContent());
            const contentWrapper = document.querySelector(
                ".tdt-infowindow-content-wrapper"
            );
            if (contentWrapper) {
                contentWrapper.style.opacity = "0";
            }
    markerMouseout(_e) {
      // infoWin.setContent(this.generateContent());
      // const contentWrapper = document.querySelector(
      //   ".tdt-infowindow-content-wrapper"
      // );
      // if (contentWrapper) {
      //   contentWrapper.style.opacity = "0";
      // }
      // this.map.removeOverLay(infoWin);
        },

        // 打标记
        makeMask(lon, lat, options) {

      if (lon && lat) {
            const { markerOptions, labelOptions } = options;
            console.log("options", markerOptions, labelOptions);

            const icon = new T.Icon({
                iconUrl: Location,
                iconSize: new T.Point(19, 27),
                iconAnchor: new T.Point(10, 25),
            });

            var marker = new T.Marker(new T.LngLat(lon, lat), {
                icon,
                id: markerOptions?.id,
@@ -345,47 +369,67 @@
                this.map && this.map.addOverLay(label);
            }
            markerOptions?.markerClick &&
                this.addEvent(marker, "click", (e) => markerOptions.markerClick(label, e));
          this.addEvent(marker, "click", (e) =>
            markerOptions.markerClick(label, e)
          );
            labelOptions?.labelClick &&
                this.addEvent(label, "click", (e) => labelOptions.labelClick(label, e));

            const lnglat = new T.LngLat(lon, lat);
            const infoWin = new T.InfoWindow(this.generateContent(), {
                id: markerOptions?.id,
                offset: new T.Point(0, -15),
                closeButton: false,
            });

            infoWin.setLngLat(lnglat);
            // 向地图上添加信息窗口
            if (this.$props.mapType) {
                this.map && this.map.addOverLay(infoWin);
            }
          this.addEvent(label, "click", (e) =>
            labelOptions.labelClick(label, e)
          );

            this.addEvent(marker, "mouseover", (e) =>
                this.markerMouseover(e, infoWin, labelOptions, this.getUniqueId())
          this.markerMouseover(e, options, this.getUniqueId(), markerOptions)
            );
            this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e, infoWin));
        this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e));
      }
        },

        // 标记所有点
        makeAllMask(mapList) {
      // 清除之前的标记
      this.map && this.map.clearOverLays();
      var minX = mapList[0].longitude;
      var maxX = mapList[0].longitude;
      var minY = mapList[0].latitude;
      var maxY = mapList[0].latitude;
            var _this = this;
            this.mapList.map((item) => {
      mapList.map((item) => {
                const config = {
                    markerOptions: {
                        id: item.id,
                        markerClick: _this.markerClick,
            //  markerClick: _this.markerClick,
                    },
                    labelOptions: {
                        text: item.name,
            text: item.projectName,
                        offset: [-45, -45],
                        id: item.id,
                        markerClick: _this.labelClick,
            //   markerClick: _this.labelClick,
                    },
          projectName: item.projectName,
          totalMoney: item.yearInvestAmount
            ? item.yearInvestAmount + "元"
            : "暂无数据",
          projectAddr: item.projectAddress,
          projectStatus: item.usedStatus,
                };
                _this.makeMask(item.lon, item.lat, config);
        _this.makeMask(item.longitude, item.latitude, config);
        if (item.longitude && item.longitude > maxX) {
          maxX = item.longitude;
        }
        if (item.longitude && item.longitude < minX) {
          minX = item.longitude;
        }
        if (item.latitude && item.latitude > maxY) {
          maxY = item.latitude;
        }
        if (item.latitude && item.latitude < minY) {
          minY = item.latitude;
        }
            });
      this.moveTo(
        (parseFloat(maxX) + parseFloat(minX)) / 2,
        (parseFloat(maxY) + parseFloat(minY)) / 2
      );
        },

        // 通用添加事件的方法
@@ -418,7 +462,7 @@

        // label点击事件
        labelClick(currentLabel, e) {
            console.log("触发点击事件")
      console.log("触发点击事件");
            const id = e.target.options.id;
            this.currentLabelStyleChange(currentLabel);
            this.getReverseGeocode(e).then((addr) => {
@@ -455,7 +499,7 @@
    },
  beforeDestroy() {
    this.map = null;
  }
  },
};

// const emits = defineEmits<{
@@ -580,10 +624,10 @@
//}

.tdt-infowindow-tip-container {
    opacity: 0;
  opacity: 1;
}

.tdt-infowindow-content-wrapper {
    opacity: 0;
  opacity: 1;
}
</style>

 src/views/index.vue

@@ -36,10 +36,7 @@
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                label="投资金额"
                                style="margin-right: 50px"
                            >
              <el-form-item label="投资金额" style="margin-right: 50px">
                                <div class="from_input">
                                    <el-input
                                        v-model="queryParams.start"
@@ -59,15 +56,10 @@
                                </div>
                            </el-form-item>
                            <el-form-item style="margin-right: 20px">
                                <el-button
                                    icon="Search"
                                    type="primary"
                                    @click="handleQuery"
                <el-button icon="Search" type="primary" @click="handleQuery"
                                    >搜索</el-button
                                >
                                <el-button icon="Refresh" @click="resetQuery"
                                    >重置</el-button
                                >
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
@@ -104,7 +96,7 @@
                                    v-model="searchForm.name"
                                    clearable
                                    placeholder="请输入项目名称或项目代码"
                                    style="width: 180px"
                  style="width: 240px"
                                />
                            </el-form-item>
                            <el-form-item style="margin-right: 0px">
@@ -116,9 +108,7 @@
                                    @click="searchList"
                                    >搜索</el-button
                                >
                                <el-button icon="Refresh" @click="mapQuery"
                                    >重置</el-button
                                >
                <el-button icon="Refresh" @click="mapQuery">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
@@ -148,7 +138,9 @@
import NoticeTable from "./components/noticeTable.vue";
import TidingsTable from "./components/tidingsTable.vue";
import Map from "./components/Map/index.vue";
import { getCalculatioln, getAbnormalData } from '@/api/login';
import { getCalculatioln, getAbnormalData } from "@/api/login";
import { searchByKey } from "@/api/projectEngineering/projectInfo";

export default {
    name: "Index",
    data() {
@@ -158,32 +150,17 @@
            sys_administrative_divisions: [],
            countExceptionProjectData: {},
            searchForm: {},
            tableDatas: [
                {
                    name: "射洪市",
                    value: 105.37281,
                    lat: 30.87145,
                    lon: 105.37281,
                    id: "222222222",
                },
                {
                    name: "xxxx",
                    value: 105.22332,
                    lat: 31.52421,
                    lon: 106.22332,
                    id: "11112",
                },
            ],
      tableDatas: [],
            calculation: [
                { text: '储', mun: 0, statistics: '', statisticsMun: '0' },
                { text: '建', mun: 0, statistics: '', statisticsMun: '0' },
                { text: '省', mun: 0, statistics: '', statisticsMun: '0' },
                { text: '市', mun: 0, statistics: '', statisticsMun: '0' },
                { text: '新', mun: 0, statistics: '', statisticsMun: '0' },
                { text: '竣', mun: 0, statistics: '', statisticsMun: '0' },
                { text: '县', mun: 0, statistics: '', statisticsMun: '0' },
                { text: '普', mun: 0, statistics: '', statisticsMun: '0' }
            ]
        { text: "储", mun: 0, statistics: "", statisticsMun: "0" },
        { text: "建", mun: 0, statistics: "", statisticsMun: "0" },
        { text: "省", mun: 0, statistics: "", statisticsMun: "0" },
        { text: "市", mun: 0, statistics: "", statisticsMun: "0" },
        { text: "新", mun: 0, statistics: "", statisticsMun: "0" },
        { text: "竣", mun: 0, statistics: "", statisticsMun: "0" },
        { text: "县", mun: 0, statistics: "", statisticsMun: "0" },
        { text: "普", mun: 0, statistics: "", statisticsMun: "0" },
      ],
        };
    },
    components: {
@@ -194,7 +171,8 @@
        Map,
    },
    created() {
        this.handleQuery()
    this.handleQuery();
    this.searchList();
    },
    methods: {
        dataPickerChange(val) {
@@ -217,7 +195,6 @@
            };

            getCalculatioln(obj).then((res) => {

                const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO);
                const newArr = arr.map((item) => ({
                    text: item.text,
@@ -236,7 +213,6 @@
                    const newItem = newArrLookup[item.text];
                    return newItem ? newItem : item; // 如果 newItem 存在，则返回 newItem，否则返回原始 item
                });

            });

            this.abnormalData(obj);
@@ -275,9 +251,23 @@
        },

        // 地图搜索
        async searchList() {
            // await search()
            this.mapRef.moveTo(105.37281, 30.87145);
    searchList() {
      var _this = this;
      searchByKey({ wordKey: this.searchForm.name }).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            // this.$refs["mapRef"].showProjectInfo(res.data);
            // _this.tableDatas = res.data;
            setTimeout(() => {
              _this.$refs["mapRef"].makeAllMask(res.data);
            }, 2000);
          } else {
            _this.$message.error("未查询到对应项目");
          }
        } else {
          _this.$message.error(res.msg);
        }
      });
        },
        mapQuery() { },
    },
@@ -314,6 +304,9 @@
    }

    .search-form {
    padding: 5px;
    position: absolute;
    z-index: 999;
        display: flex;
        justify-content: flex-end;
    }
@@ -346,12 +339,12 @@
::v-deep.el-select__placeholder {
    font-size: 12px;
}
::v-deep input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
::v-deep input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='number'] {
input[type="number"] {
    -moz-appearance: textfield;
}
.search_from {