将代码转换为vue3实现要求全部展示不能有省略

为了将给定的 Vue 2 代码转换为 Vue 3 实现，我们需要做一些关键调整，包括使用 Composition API 和其他的 Vue 3 特性。以下是完整的转换后的代码：

<template>
  <!-- 您的应用模板 -->
</template>

<script setup>
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
import { useStore } from 'vuex';
import { getAction } from '@/api/manage';
import { gcoordTransform } from '@/utils/gcoordTransform';

const store = useStore();

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

const state = reactive({
  ciLayer: null,
  resizeFalg: false,
  leafletMap: null,
  layer: null,
  dropTrigger: '',
  replaceFields: { title: 'name', key: 'id' },
  deviceTreeData: [],
  currentPipelinetId: '',
  pipelinePosLen: 0,
  currentPipeline: {},
  selectedKeysPipeline: [],
  treeParam: { pageNo: 1, pageSize: 1000, keyword: '' },
  pointList: [],
  currentDeviceId: '',
  devicePosLen: 0,
  currentDevice: {},
  rightVisible: false,
  deviceTypeList: [],
  selectedKeysDevice: [],
  deviceNameChecked: false,
  tableScrollHeight: 480,
  visibleTemp: 0,
  showSearchInput: false,
  addrInput: '',
  addrMarkerGroup: [],
  fullscreen: false,
  linesDirectionGroup: [],
  directionChecked: false,
  lineList: [],
  needCloseDevices: [],
  rightMeasurementVisible: false,
  drawGroupPolyline: null,
  drawGroupPolygon: null,
  showPolylines: [],
  showPolygons: [],
  showGroupPolyline: null,
  showGroupPolygon: null,
  linesGroup: []
});

const pipelineColor = (type) => {
  let color;
  switch (type) {
    case 1: color = '#950000'; break;
    case 2: color = '#FF000D'; break;
    case 3: color = '#FFB40A'; break;
    case 4: color = '#FF6C00'; break;
    case 5: color = '#772FEB'; break;
    case 6: color = '#52C41A'; break;
    case 7: color = '#13C2C2'; break;
    case 8: color = '#1890FF'; break;
    default: color = '#1890FF'; break;
  }
  return color;
};

const deviceStatusColor = (status) => {
  let color = '';
  switch (status) {
    case '2': color = '#d94242'; break;
    case '0': color = '#848587'; break;
    default: color = '#5ea4ff'; break;
  }
  return color;
};

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

  state.leafletMap.on('zoom', (e) => {
    state.leafletMap.removeLayer(state.devciceGroup);
  });

  state.leafletMap.on('zoomend', (e) => {
    showDeviceMarkers(state.pointList, false);
  });

  state.layer = 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);

  let that = state;

  let autoOptions = { input: "addrInput" };
  let auto = new AMap.Autocomplete(autoOptions);

  new AMap.PlaceSearch({ map: that.leafletMap });

  AMap.event.addListener(auto, "select", (e) => {
    state.leafletMap.removeLayer(state.addrMarkerGroup);
    if (e.poi.location) {
      let latlng = [e.poi.location.lat, e.poi.location.lng];
      state.leafletMap.setView(latlng);
      let m = [L.marker(latlng, { icon: locationIcon })];
      state.addrMarkerGroup = L.layerGroup(m);
      state.leafletMap.addLayer(state.addrMarkerGroup);
    } else {
      state.$message.warning('您输入的内容查询不到相关地址！');
    }
  });

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

const showMap = (val) => {
  state.leafletMap.removeLayer(state.layer);
  if (val === 1) {
    state.layer = 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);
  } else {
    state.layer = L.layerGroup([
      L.tileLayer('//webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        maxNativeZoom: 18,
        minZoom: 3,
        attribution: "高德地图 AutoNavi.com",
        subdomains: "1234"
      }),
      L.tileLayer('//webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        maxNativeZoom: 18,
        minZoom: 3,
        attribution: "高德地图 AutoNavi.com",
        subdomains: "1234",
        opacity: 0.5
      })
    ]).addTo(state.leafletMap);
  }
};

const geocoderCalc = (lng, lat) => {
  return new Promise((resolve, reject) => {
    let geocoder = new AMap.Geocoder({ city: "010", radius: 1000 });
    geocoder.getAddress([lng, lat], (status, result) => {
      if (status === 'complete' && result.regeocode) {
        let address = result.regeocode.formattedAddress;
        resolve(address);
      } else {
        state.$message.error('根据经纬度查询地址失败');
      }
    });
  });
};

const dropStatus = (visible) => {
  if (visible == false) {
    state.dropTrigger = '';
  }
};

const handleClose = () => {
  state.dropTrigger = '';
};

const dragControllerDivVertical = () => {
  var resize = document.getElementsByClassName('resize');
  var left = document.getElementsByClassName('left');
  var mid = document.getElementsByClassName('right');
  var box = document.getElementsByClassName('inspection');

  for (let i = 0; i < resize.length; i++) {
    resize[i].onmousedown = (e) => {
      resize[i].style.background = '#F0F2F5';
      var startX = e.clientX;
      resize[i].left = resize[i].offsetLeft;

      document.onmousemove = (e) => {
        var endX = e.clientX;
        var moveLen = resize[i].left + (endX - startX);
        var maxT = box[i].clientWidth - resize[i].offsetWidth;

        if (moveLen < 250) moveLen = 250;
        if (moveLen > maxT - 550) moveLen = maxT - 550;

        resize[i].style.left = moveLen;
        for (let j = 0; j < left.length; j++) {
          left[j].style.width = moveLen + 'px';
          mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
        }
      };

      document.onmouseup = () => {
        resize[i].style.background = '#F0F2F5';
        document.onmousemove = null;
        document.onmouseup = null;
        resize[i].releaseCapture && resize[i].releaseCapture();
      };

      resize[i].setCapture && resize[i].setCapture();
      return false;
    };
  }
};

const dragControllerDivHorizon = () => {
  var resize = document.getElementsByClassName('left-resize');
  var left = document.getElementsByClassName('left-tree');
  var mid = document.getElementsByClassName('left-table');
  var box = document.getElementsByClassName('left');

  for (let i = 0; i < resize.length; i++) {
    resize[i].onmousedown = (e) => {
      var startY = e.clientY;
      resize[i].top = resize[i].offsetTop;

      document.onmousemove = (e) => {
        var endY = e.clientY;
        var moveLen = resize[i].top + (endY - startY);

        left[i].style.height = moveLen - 25 + 'px';
        mid[i].style.height = (box[i].clientHeight - moveLen) + 'px';

        if (state.currentDeviceId || state.currentPipelinetId) {
          state.tableScrollHeight = box[i].clientHeight - moveLen;
        }
      };

      document.onmouseup = () => {
        resize[i].style.background = '#F0F2F5';
        document.onmousemove = null;
        document.onmouseup = null;
        resize[i].releaseCapture && resize[i].releaseCapture();
      };

      resize[i].setCapture && resize[i].setCapture();
      return false;
    };
  }
};

const scroll = () => {
  let scrolled = Math.abs(
    state.$refs.leftContent.scrollHeight - 
    document.getElementsByClassName('left-tree')[0].clientHeight - 
    state.$refs.leftContent.scrollTop
  );

  if (scrolled <= 1 && state.openLoading) {
    state.spinVisible = true;
    state.treeParam.pageNo++;
    handleTabsChange(state.activeKey, 'concat');
  }
};

const isDevice = (text) => {
  let content = text.split("_");
  return content;
};

const getDevicesInfoToId = async (id) => {
  if (state.devicePosLen == 3) {
    try {
      const res = await getAction('/web/gisInspectionEquipment/queryById', { id });
      if (res.success) {
        state.currentDevice = res.result;
        return res.result;
      }
    } catch (error) {
      console.error(error);
    }
  }
};

const getPipeLineInfoToId = async (id) => {
  try {
    const res = await getAction('/web/gisInspectionPipeline/list', { id });
    if (res.success) {
      let val = res.result.records[0];
      return val;
    }
  } catch (error) {
    console.error(error);
  }
};

const calcPointList = () => {
  state.pointList.forEach((list, i) => {
    list.data.forEach(item => {
      state.deviceStatusArr && state.deviceStatusArr.forEach(deviceStatusItem => {
        if (deviceStatusItem.id === item.id) {
          item.status = deviceStatusItem.status;
        }
      });

      if (state.cliqueDeviceId.indexOf(item.id) !== -1) {
        item.iconSize = 2;
        if (state.cliqueDeviceId.length === 1) {
          let latlng = gcoordTransform(item.latlng[0], item.latlng[1]);
          state.leafletMap.setView(latlng);
        }
      } else {
        item.iconSize = 1;
      }

      if (state.needCloseDevices.length && state.needCloseDevices.indexOf(item.id) !== -1) {
        item.needCloseIcon = true;
      } else {
        item.needCloseIcon = false;
      }
    });
  });

  if (state.devicePosLen == 2) {
    let index = state.deviceTypeList.indexOf(state.currentDevice.code);
    state.pointList[index].data.forEach(v => {
      v.iconSize = 2;
    });
  }

  if (state.devicePosLen == 3) {
    let index = state.deviceTypeList.indexOf(state.currentDevice.gisInspectionEquipmentTypeId);
    state.pointList[index].data.forEach(v => {
      if (v.id == state.currentDeviceId) {
        v.iconSize = 2;
      }
    });
  }

  showDeviceMarkers(state.pointList);
};

const scrollToSelectedNode = (name) => {
  console.time('scrollToSelectedNode');
  nextTick(() => {
    const selectedNodeElement = document.querySelector(`[title="${name}"]`);
    if (selectedNodeElement) {
      selectedNodeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  });
  console.timeEnd('scrollToSelectedNode');
};

const cancelVis = (e) => {
  if (state.rightVisible) {
    const cdom = document.querySelector('.close-modal');
    if (cdom && !cdom.contains(e.target)) {
      state.rightVisible = false;
      state.visibleTemp = 0;
    }
  } else {
    state.visibleTemp = 1;
  }
};

const requestFullScreen = () => {
  const element = document.getElementsByClassName('right')[0];
  if (state.fullscreen) {
    if (document.exitFullscreen) document.exitFullscreen();
    else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen();
    else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
    else if (document.msExitFullscreen) document.msExitFullscreen();
  } else {
    if (element.requestFullscreen) element.requestFullscreen();
    else if (element.webkitRequestFullScreen) element.webkitRequestFullScreen();
    else if (element.mozRequestFullScreen) element.mozRequestFullScreen();
    else if (element.msRequestFullscreen) element.msRequestFullscreen();
  }
  state.fullscreen = !state.fullscreen;
};

const pipelineStatus = (status) => {
  let dashArray;
  switch (status) {
    case 0: dashArray = "5, 5"; break;
    case 1: dashArray = "1, 5"; break;
    case 2: dashArray = "15, 10, 5, 10"; break;
    default: dashArray = "1"; break;
  }
  return dashArray;
};

const pipelineStatusSelected = (status) => {
  let dashArray;
  switch (status) {
    case 0: dashArray = "10, 10"; break;
    case 1: dashArray = "2, 10"; break;
    case 2: dashArray = "30, 15, 10, 15"; break;
    default: dashArray = "1"; break;
  }
  return dashArray;
};

const showDirection = (checked) => {
  state.directionChecked = checked;
  darwerPipeline();
};

const lineGroupClearAndInit = () => {
  state.linesGroup.forEach(layer => state.leafletMap.removeLayer(layer));
  state.linesGroup = [];

  state.linesDirectionGroup.forEach(layer => state.leafletMap.removeLayer(layer));

  state.lineList.forEach(item => {
    if (item.operation === 'edit') {
      item.operation = '';
      item.weight = 2;
    }
  });

  if (state.currentPipelinetId) {
    if (state.pipelinePosLen == 4) {
      let index = state.pipelineIdList.indexOf(state.currentPipelinetId);
      if (index !== -1) {
        state.lineList[index].operation = 'edit';
        state.lineList[index].weight = 6;
      } else {
        state.allLineList.forEach(item => {
          if (item.id === state.