将文件中的代码使用vue3实现不要有省略只要Script 部分

要将文件中的 Vue 2 代码转换为 Vue 3 代码，并且只保留 `<script>` 部分，以下是转换后的代码：

<script setup>
import { ref, reactive, toRefs, onMounted, computed, watch, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import L from 'leaflet';
import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios';

// 引入组件
import UploadManyWay from '@/components/FileUpload/UploadManyWay';
import JFormContainer from '@/components/jeecg/JFormContainer';
import JSearchSelectTag from '@/components/dict/JSearchSelectTag';
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue';

const router = useRouter();
const store = useStore();

const locationIcon = L.icon({
    iconUrl: require('@/assets/inspection/location.svg'),
    iconSize: [60, 64],
    iconAnchor: [25, 55]
});

const PAGE_SIZE = 100;

const props = defineProps({
    formData: {
        type: Object,
        default: () => {},
        required: false,
    },
    formBpm: {
        type: Boolean,
        default: false,
        required: false,
    },
    disabled: {
        type: Boolean,
        default: false,
        required: false,
    }
});

const state = reactive({
    fileList: {
        max: 2,
        list: [
            {
                itemAllowDelete: false,
                editWay: "3,3,3",
                maxSize: 10240,
                uploadWay: "3",
                param: "signPicture",
                title: "电子签名",
                type: "jpg,png,jpeg",
                fileName: ""
            },
            {
                max: 9,
                editWay: "2,2,2",
                itemAllowDelete: false,
                uploadWay: "3",
                maxSize: 10240,
                param: "deed",
                title: "相关图片",
                type: "jpg,png,jpeg",
                list: []
            }
        ]
    },
    form: null,
    model: {},
    modelSave: {},
    fileFlag: false,
    labelCol: { xs: { span: 24 }, sm: { span: 6 } },
    wrapperCol: { xs: { span: 24 }, sm: { span: 16 } },
    labelOneCol: { xs: { span: 24 }, sm: { span: 3 } },
    wrapperOneCol: { xs: { span: 24 }, sm: { span: 20 } },
    confirmLoading: false,
    gisInspectionEquipmentTypeId: '',
    validatorRules: {
        equipmentNumber: { rules: [{ pattern: /^.{1,200}$/, message: '字数200字以内' }] },
        name: { rules: [ { required: true, message: '设备名称不得为空!' }, { pattern: /^[\u4e00-\u9fa5A-Za-z0-9\-_()（）\/]{1,64}$/, message: '字数64字以内，仅支持中文、字母、数字、-、_、括号和/' } ] },
        gisInspectionEquipmentTypeId: { rules: [ { required: true, message: '设备类型不得为空!' } ] },
        status: { rules: [{ required: true, message: '设备状态不得为空!' }] },
        manufacturer: { rules: [{ pattern: /^.{1,64}$/, message: '字数64字以内' }] },
        responsiblePerson: { rules: [{ pattern: /^[\u4e00-\u9fa5]{1,64}$/, message: '字数64字以内，仅文字' }] },
        address: { rules: [ { required: true, message: '设备位置不得为空!' }, { max: 120, message: '字数120字以内' } ] },
        longitude: { rules: [{ required: true, message: '经度不得为空!' }] },
        latitude: { rules: [{ required: true, message: '纬度不得为空!' }] },
    },
    url: {
        add: '/web/gisInspectionEquipment/add',
        edit: '/web/gisInspectionEquipment/edit',
        queryById: '/web/gisInspectionEquipment/queryById',
        getPipelines: '/web/gisInspectionPipeline/getSuperiorPipelines',
    },
    treeAllData: [],
    treeSiteData: [],
    gisInspectionList: [],
    valKey: '1',
    showMapContainer: false,
    showSearchInput: false,
    rightVisible: false,
    visibleTemp: 0,
    addrFormInput: '',
    addrMarkerGroup: [],
    markersGroup: '',
    pipelineList: [],
    treeData: [],
    path: process.env.VUE_APP_API_BASE_URL,
    list: [],
    type: '',
    isSubmitToServer: true,
    leafletMap: null,
    formValues: {},
});

const { form, model, modelSave, fileList, labelCol, wrapperCol, labelOneCol, wrapperOneCol, confirmLoading, gisInspectionEquipmentTypeId, treeAllData, treeSiteData, valKey, showSearchInput, pipelineList, treeData, addrFormInput, addrMarkerGroup, markersGroup, rightVisible, visibleTemp, list, type, leafletMap } = toRefs(state);

function gcoordTransform(lat, lng) {
    // 实现坐标变换函数
}

function gcoordTransGCJ02ToWGS84(coord) {
    // 实现坐标变换函数
}

async function openNew(type, record, isGetDataFromServer = false, isSubmitToServer = true) {
    state.isSubmitToServer = isSubmitToServer;
    state.fileList.list[1].list = [];

    if (!isGetDataFromServer) {
        open(type, record);
        return;
    }

    state.confirmLoading = true;
    const response = await axios.post('/web/gisInspectionEquipment/queryById', { id: record.id });
    state.confirmLoading = false;

    if (response.data.success) {
        state.open(type, { ...response.data.result, ...record });
    } else {
        state.open(type, record);
    }
}

function open(type, record) {
    state.list = [];
    state.type = type;
    state.form?.resetFields();
    state.valKey = '1';
    state.fileFlag = false;
    state.getGisList();
    state.getModel(record);
    state.setModelFiles();
    state.handleModelSave(record);
}

function handleModelSave(record) {
    if (state.model.latitude && state.model.longitude) {
        const geo = gcoordTransform(state.model.latitude, state.model.longitude);
        state.modelSave.latitude = geo[0].toFixed(6);
        state.modelSave.longitude = geo[1].toFixed(6);
    }
}

function getGisList() {
    axios.post('/sys/dict/getDictItems/gis_pipe_network_equipment_type,name,id,del_flag=0').then(response => {
        if (response.data.success) {
            state.gisInspectionList = response.data.result;
        }
    });
}

async function getDevicesInfoById(id) {
    state.confirmLoading = true;
    const response = await axios.post('/web/gisInspectionEquipment/queryById', { id: id });
    state.confirmLoading = false;

    if (response.data.success) {
        state.currentDevice = response.data.result;
    }
}

function setModelFiles() {
    if (!state.model.fileList) {
        state.getFileList();
    } else {
        try {
            state.model.fileList = JSON.parse(state.model.fileList);
        } catch (e) {
            state.model.fileList = state.model.fileList;
        }

        if (state.type === 'info' && state.model.fileList && state.model.fileList.list && state.model.fileList.list.length >= 1) {
            if (state.model.fileList.list[state.model.fileList.list.length - 1].fileName === '') {
                state.model.fileList.list.pop();
            }
            state.list = state.model.fileList.list;
        }

        state.fileFlag = true;
    }
}

function getFileList() {
    axios.post('/web/bizFileConfig/getByName?name=networkAttached').then(response => {
        if (response.data.success && response.data.result.length !== 0) {
            const jsonStr = response.data.result[0].config;
            state.model.fileList = JSON.parse(jsonStr);
            state.fileFlag = true;
        } else {
            state.model.fileList = {};
            state.fileFlag = true;
        }
    });
}

function submitForm() {
    state.form?.validate(async valid => {
        if (valid) {
            state.confirmLoading = true;
            let lngLat = gcoordTransGCJ02ToWGS84([state.formValues.longitude, state.formValues.latitude]);
            lngLat[0] = lngLat[0].toFixed(6);
            lngLat[1] = lngLat[1].toFixed(6);
            state.formValues.geometry = 'POINT(' + lngLat.join(' ') + ')';

            state.treeData.forEach(item => {
                if (item.value === state.formValues.pipelineName) {
                    state.formValues.pipelineIds = item.key;
                }
            });

            if (state.formValues.siteCode_dictText) {
                state.treeSiteData.forEach(item => {
                    if (item.value === state.formValues.siteCode_dictText) {
                        state.formValues.siteCode = item.key;
                    }
                });
            } else {
                state.formValues.siteCode = undefined;
            }

            let formData = {};
            let httpurl = '';
            let method = '';

            if (!state.model.id) {
                httpurl = state.url.add;
                method = 'post';
                formData = { addList: [Object.assign(state.model, state.formValues)], gisInspectionEquipmentTypeId: state.formValues.gisInspectionEquipmentTypeId };
            } else {
                httpurl = state.url.edit;
                method = 'put';
                formData = Object.assign(state.model, state.formValues);
            }

            if (formData.fileList) {
                formData.fileList['list'] = state.fileList.list[1].list;
            } else {
                formData.fileList = { max: 9, list: state.fileList.list[1].list, type: 'jpg,png,jpeg' };
            }

            if (formData.addList && formData.addList[0]) {
                formData.addList[0].fileList = formData.fileList;
            }

            console.log('表单提交数据', formData);

            if (!state.isSubmitToServer) {
                state.$emit('ok', formData);
                state.confirmLoading = false;
                return;
            }

            try {
                const response = await axios.post(httpurl, formData, { method: method });
                if (response.data.success) {
                    state.$emit('ok', formData);
                }
            } finally {
                state.confirmLoading = false;
            }
        }
    });
}

watch(addrFormInput, (val) => {
    if (!val) {
        state.leafletMap?.removeLayer(state.addrMarkerGroup);
    }
});

onMounted(() => {
    // 初始化地图和其他功能
    initMap();
});

async function initMap() {
    if (!state.leafletMap) {
        await nextTick();
        initLeafletMap();
    } else {
        if (state.model.latitude) {
            let markLat = gcoordTransform(state.model.latitude, state.model.longitude);
            state.showMarkerIcon({ lat: markLat[0], lng: markLat[1] });
            state.leafletMap.setView([state.model.latitude, state.model.longitude]);
        } else if (state.markersGroup) {
            state.leafletMap.removeLayer(state.markersGroup);
        }

        if (!state.model.latitude) {
            state.leafletMap.setView(store.getters.gisMapCenter);
        }
    }
}

function initLeafletMap() {
    state.leafletMap = new L.Map('mapformid', {
        zoom: 14,
        center: store.getters.gisMapCenter,
        boxZoom: true,
        zoomControl: false,
        doubleClickZoom: false,
        attributionControl: false,
        preferCanvas: true,
    });

    L.control.scale({
        metric: true,
        imperial: false,
        position: 'bottomright'
    }).addTo(state.leafletMap);

    L.tileLayer(
        '//webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
        {
            maxZoom: 20,
            maxNativeZoom: 18,
            minZoom: 3,
            attribution: '高德地图 AutoNavi.com',
            subdomains: '1234',
        }
    ).addTo(state.leafletMap);

    L.control.zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小',
        position: 'bottomright'
    }).addTo(state.leafletMap);

    AMapLoader.load({
        key: 'YOUR_AMAP_KEY', // 替换为您的实际AMap Key
        version: '1.4.15',
        plugins: ['AMap.PlaceSearch'],
    }).then(async (AMap) => {
        const placeSearch = new AMap.PlaceSearch({ map: state.leafletMap });

        let autoComplete = new AMap.Autocomplete({
            input: 'addrFormInput'
        });

        autoComplete.on('select', (e) => {
            if (e.poi.location) {
                state.leafletMap.removeLayer(state.addrMarkerGroup);
                let latlng = [e.poi.location.lat, e.poi.location.lng];
                state.leafletMap.setView(latlng);

                let marker = L.marker(latlng, { icon: locationIcon });
                state.addrMarkerGroup = L.layerGroup([marker]);
                state.leafletMap.addLayer(state.addrMarkerGroup);
            } else {
                state.$message.warning('您输入的内容查询不到相关地址！');
            }
        });

        state.leafletMap.on('click', async (e) => {
            let siteCodeText = state.form.getFieldValue('siteCode_dictText');
            if (!siteCodeText) {
                e.latlng.lng = e.latlng.lng.toFixed(6);
                e.latlng.lat = e.latlng.lat.toFixed(6);
                state.form.setFieldsValue({
                    longitude: e.latlng.lng,
                    latitude: e.latlng.lat,
                });

                state.showMarkerIcon(e.latlng);
                const address = await geocoderCalc(e.latlng.lng, e.latlng.lat);
                state.form.setFieldsValue({
                    address: address,
                });
            }
        });

        state.leafletMap.pm.setLang('zh');

        if (state.model.latitude) {
            let markLat = gcoordTransform(state.model.latitude, state.model.longitude);
            state.showMarkerIcon({ lat: markLat[0], lng: markLat[1] });
        }
    });
}

function showMarkerIcon(latlng) {
    if (state.markersGroup) {
        state.leafletMap.removeLayer(state.markersGroup);
    }

    let marker = L.marker(latlng, { icon: locationIcon });
    state.markersGroup = L.layerGroup([marker]);
    state.leafletMap.addLayer(state.