} 返回海拔高度（米）
+ */
+async function getElevationByLngLat(lng, lat) {
+ // 方案1: 优先使用第三方 API（最可靠，不依赖地形服务）
+ let elevation = await getElevationByAPI(lng, lat)
+ if (elevation > 0) {
+ return elevation
+ }
+
+ // 方案2: 尝试使用 mars3d 工具方法
+ elevation = await getElevationByMars3dUtil(lng, lat)
+ if (elevation > 0) {
+ return elevation
+ }
+
+ // 方案3: 尝试使用地形采样
+ elevation = await getElevationByTerrain(lng, lat)
+ if (elevation > 0) {
+ return elevation
+ }
+
+ // 方案4: 尝试使用 pickPosition
+ elevation = await getElevationByPickPosition(lng, lat)
+ if (elevation > 0) {
+ return elevation
+ }
+
+ // 所有方法都失败，返回0
+ console.warn(`所有方法都无法获取坐标(${lng}, ${lat})的海拔高度，返回默认值0`)
+ return 0
+}
+
+const mapConfig = {
+ scene: {
+ center: {
+ lat: 31.686288,
+ lng: 117.229619,
+ // alt: 11333.9,
+ // heading: 359.2,
+ // pitch: -39.5,
+ alt: 12000, // 高度≈缩放级别
+ heading: 30, // 旋转30度
+ pitch: -45, // 俯视角45度
+ },
+
+ highDynamicRange: false, // 关闭HDR（可减少模糊）
+
+ scene3DOnly: false,
+ shadows: false,
+ removeDblClick: true,
+ sceneMode: 3,
+ showSun: true,
+ showMoon: true,
+ showSkyBox: true,
+ showSkyAtmosphere: true,
+ fog: true,
+ fxaa: false,
+ requestRenderMode: false,
+ globe: {
+ depthTestAgainstTerrain: false,
+ baseColor: '#546a53',
+ showGroundAtmosphere: true,
+ enableLighting: false,
+ },
+ cameraController: {
+ zoomFactor: 3.0,
+ minimumZoomDistance: 1,
+ maximumZoomDistance: 50000000,
+ enableRotate: true,
+ enableTranslate: true,
+ enableTilt: true,
+ enableZoom: true,
+ enableCollisionDetection: true,
+ minimumCollisionTerrainHeight: 15000,
+ },
+ },
+ control: {
+ homeButton: true,
+ baseLayerPicker: true,
+ sceneModePicker: true,
+ vrButton: false,
+ fullscreenButton: true,
+ navigationHelpButton: true,
+ animation: false,
+ timeline: false,
+ infoBox: false,
+ geocoder: false,
+ selectionIndicator: false,
+ contextmenu: { hasDefault: false },
+ mouseDownView: true,
+ zoom: { insertIndex: 1 },
+ compass: { bottom: 'toolbar', left: '5px' },
+ distanceLegend: { left: '10px', bottom: '2px' },
+ locationBar: {
+ fps: true,
+ crs: 'CGCS2000_GK_Zone_3',
+ crsDecimal: 0,
+ template:
+ "经度:{lng}
纬度:{lat}
横{crsx} 纵{crsy}
海拔：{alt}米
层级：{level}
方向：{heading}°
俯仰角：{pitch}°
视高：{cameraHeight}米
",
+ },
+ },
+ templateValues: {
+ dataServer: '//data.mars3d.cn',
+ gltfServerUrl: '//data.mars3d.cn/gltf',
+ },
+ terrain: {
+ url: '//data.mars3d.cn/terrain',
+ show: true,
+ },
+ basemaps: [
+ { id: 10, name: '地图底图', type: 'group' },
+ {
+ id: 2021,
+ pid: 10,
+ name: '天地图影像',
+ icon: '../../img/mars-map-img/tdt_img.png',
+ type: 'group',
+ layers: [
+ { name: '底图', type: 'tdt', layer: 'img_d' },
+ { name: '注记', type: 'tdt', layer: 'img_z' },
+ ],
+ show: true,
+ },
+ {
+ pid: 10,
+ name: '天地图电子',
+ icon: '../../img/mars-map-img/tdt_vec.png',
+ type: 'group',
+ layers: [
+ { name: '底图', type: 'tdt', layer: 'vec_d' },
+ { name: '注记', type: 'tdt', layer: 'vec_z' },
+ ],
+ },
+ {
+ pid: 10,
+ name: '高德影像',
+ type: 'group',
+ icon: '../../img/mars-map-img/gaode_img.png',
+ layers: [
+ { name: '底图', type: 'gaode', layer: 'img_d' },
+ { name: '注记', type: 'gaode', layer: 'img_z' },
+ ],
+ },
+ {
+ pid: 10,
+ name: '高德电子',
+ type: 'gaode',
+ icon: '../../img/mars-map-img/gaode_vec.png',
+ layer: 'vec',
+ },
+ {
+ pid: 10,
+ name: '百度影像',
+ type: 'group',
+ icon: '../../img/mars-map-img/bd-img.png',
+ layers: [
+ { name: '底图', type: 'baidu', layer: 'img_d' },
+ { name: '注记', type: 'baidu', layer: 'img_z' },
+ ],
+ },
+ {
+ pid: 10,
+ name: '百度电子',
+ icon: '../../img/mars-map-img/bd-vec.png',
+ type: 'baidu',
+ layer: 'vec',
+ },
+ {
+ pid: 10,
+ name: '腾讯影像',
+ icon: '../../img/mars-map-img/tencent_img.png',
+ type: 'group',
+ layers: [
+ { name: '底图', type: 'tencent', layer: 'img_d' },
+ { name: '注记', type: 'tencent', layer: 'img_z' },
+ ],
+ },
+ {
+ pid: 10,
+ name: '腾讯电子',
+ icon: '../../img/mars-map-img/tencent_vec.png',
+ type: 'tencent',
+ layer: 'vec',
+ },
+ {
+ pid: 10,
+ name: 'ArcGIS影像',
+ icon: '../../img/mars-map-img/esriWorldImagery.png',
+ type: 'xyz',
+ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+ enablePickFeatures: false,
+ },
+ ],
+}
+
+// 图例数据
+const legendData = [
+ {
+ name: '协调完成',
+ value: 0,
+ // icon: "../../img/digitalSignage/icon_three.png",
+ icon: '../../img/digitalSignage/icon_three_new.png',
+ },
+ {
+ name: '基础开挖',
+ value: 0,
+ // icon: "../../img/digitalSignage/icon_two.png",
+ icon: '../../img/digitalSignage/icon_two_new.png',
+ },
+ {
+ name: '基础开挖完成',
+ value: 0,
+ // icon: "../../img/digitalSignage/icon_five.png",
+ icon: '../../img/digitalSignage/icon_five_new.png',
+ },
+ {
+ name: '基础浇筑',
+ value: 0,
+ // icon: "../../img/digitalSignage/icon_seven.png",
+ icon: '../../img/digitalSignage/icon_seven_new.png',
+ },
+ {
+ name: '基础浇筑完成',
+ value: 0,
+ // icon: "../../img/digitalSignage/icon_four.png",
+ icon: '../../img/digitalSignage/icon_four_new.png',
+ },
+ {
+ name: '铁塔组立',
+ value: 0,
+ // icon: "../../img/digitalSignage/icon_six.png",
+ icon: '../../img/digitalSignage/zt_orange.png',
+ },
+ {
+ name: '铁塔组立完成',
+ value: 0,
+ icon: '../../img/digitalSignage/zt_red.png',
+ },
+ {
+ name: '架线施工',
+ value: 0,
+ icon: '../../img/digitalSignage/line_y.png',
+ },
+ // {
+ // name: "架线施工完成",
+ // value: 0,
+ // icon: "../../img/digitalSignage/zt_purple.png",
+ // },
+ {
+ name: '架线施工完成',
+ value: 0,
+ icon: '../../img/digitalSignage/line_r.png',
+ },
+ {
+ name: '附件安装完成',
+ value: 0,
+ icon: '../../img/digitalSignage/zt_green.png',
+ },
+ {
+ name: '未 开 始',
+ value: 0,
+ icon: '../../img/digitalSignage/icon_one_new.png',
+ },
+ {
+ name: '索道运输',
+ value: 0,
+ icon: '../../img/digitalSignage/sd.png',
+ },
+ // {
+ // name: "项 目 部",
+ // value: 0,
+ // icon: "../../img/digitalSignage/project.png",
+ // },
+]
+
+// 地图配置项
+const config = {
+ polyline: {
+ strokeWeight: 3, // 线条宽度
+ strokeOpacity: 0.9, // 透明度
+ strokeStyle: 'dashed', // solid(实线)或dashed(虚线)
+ enableEditing: false, // 是否可编辑
+ enableClicking: true, // 是否可点击
+ },
+}
+
+// 获取位置信息
+function getLocationInfo(id) {
+ const params = {
+ encryptedData: encryptCBC(JSON.stringify({ id })),
+ }
+ ajaxRequest(
+ dataUrl + '/backstage/digitalSignage/getTowersInfo',
+ 'POST',
+ params,
+ true,
+ function () {},
+ function (result) {
+ console.log(result, '获取位置信息---')
+ const { data } = result
+
+ crossingList = []
+ crossingListNew = []
+ crossingLineListNew = []
+ cablewayList = []
+ towerList = []
+
+ if (data.cablewaTransVos.length > 0) {
+ cablewayList = data.cablewaTransVos
+ } else {
+ cablewayList = []
+ }
+ if (data.towerInfoVos.length > 0) {
+ towerList = data.towerInfoVos
+ } else {
+ towerList = []
+ }
+ if (data.spanInfoVos.length > 0) {
+ crossingList = data.spanInfoVos
+ } else {
+ crossingList = []
+ crossingListNew = []
+ crossingLineListNew = []
+ }
+
+ if (data.highwayList.length > 0) {
+ highwayList = data.highwayList
+ } else {
+ highwayList = []
+ }
+
+ if (data.aThousandFieldsList.length > 0) {
+ aThousandFieldsList = data.aThousandFieldsList
+ } else {
+ aThousandFieldsList = []
+ }
+
+ // 处理一下交叉信息
+ if (crossingList && crossingList.length > 0) {
+ crossingList.forEach((item) => {
+ let lineList = []
+ if (item.lonAndLat && item.lonAndLat.indexOf(',') > -1) {
+ const lonAndLatList = item.lonAndLat.split(',')
+
+ lonAndLatList.forEach((lonAndLat, index) => {
+ const lonAndLatItem = lonAndLat.split('@')
+ crossingListNew.push({
+ baiduLon: lonAndLatItem[0],
+ baiduLat: lonAndLatItem[1],
+ ...item,
+ })
+
+ lineList.push({
+ baiduLon: lonAndLatItem[0],
+ baiduLat: lonAndLatItem[1],
+ ...item,
+ })
+ })
+ }
+
+ crossingLineListNew.push({ lineList })
+ })
+ }
+ initMap()
+ },
+ function (xhr) {
+ error(xhr)
+ },
+ )
+}
+
+async function initMap() {
+ const mars3d = window.mars3d // 静态资源引入时，对象都是挂载在window中
+ const Cesium = window.mars3d.Cesium
+ try {
+ if (map) {
+ // 移除所有自定义图层
+ if (graphicLayer) {
+ graphicLayerList.forEach((e) => {
+ graphicLayer.removeGraphic(e)
+ })
+
+ polylines1.forEach((e) => {
+ graphicLayer.removeGraphic(e)
+ })
+ polylines2.forEach((e) => {
+ graphicLayer.removeGraphic(e)
+ })
+ polylines3.forEach((e) => {
+ graphicLayer.removeGraphic(e)
+ })
+
+ polylines1 = []
+ polylines2 = []
+ polylines3 = []
+ }
+ const centerPoint = [intLng, intLat]
+
+ // 方式1：直接飞向目标点
+ map.flyToPoint(centerPoint, {
+ radius: 5000, // 可视范围半径（米）
+ duration: 2, // 飞行时间（秒）
+ heading: 0, // 视角方向（0-360度）
+ pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
+ })
+ await addAllMapPoints(graphicLayer, mars3d, Cesium)
+ await addMapLine(graphicLayer, mars3d, Cesium)
+ await addMapAThousandFields(graphicLayer, mars3d, Cesium)
+ } else {
+ // 2. WebGL兼容性检查
+ if (!mars3d.Util.webglreport()) {
+ mars3d.Util.webglerror()
+ return
+ }
+
+ // 3. 初始化新地图
+ mapConfig.scene.center.lat = intLat || 31.686288
+ mapConfig.scene.center.lng = intLng || 117.229619
+ map = new mars3d.Map('map-box', mapConfig)
+
+ // 4. 创建新的图形图层
+ graphicLayer = new mars3d.layer.GraphicLayer()
+
+ const centerPoint = [intLng, intLat]
+
+ map.flyToPoint(centerPoint, {
+ radius: 5000, // 可视范围半径（米）
+ duration: 5, // 飞行时间（秒）
+ heading: 0, // 视角方向（0-360度）
+ pitch: -45, // 俯仰角度（-90俯视，0平视，90仰视）
+ })
+
+ map.addLayer(graphicLayer)
+
+ // 5. 添加内容
+ await addAllMapPoints(graphicLayer, mars3d, Cesium)
+ await addMapLine(graphicLayer, mars3d, Cesium)
+ await addMapAThousandFields(graphicLayer, mars3d, Cesium)
+ }
+ } catch (error) {
+ // 失败时也清理残留
+ if (map) {
+ map.destroy()
+ map = null
+ }
+ }
+}
+
+// 添加标点
+async function addAllMapPoints(graphicLayer, mars3d, Cesium) {
+ const iconTypeList = {
+ // 1: "../../img/digitalSignage/icon_three.png",
+ 1: '../../img/digitalSignage/icon_three_new.png',
+ // 2: "../../img/digitalSignage/icon_two.png",
+ 2: '../../img/digitalSignage/icon_two_new.png',
+ // 3: "../../img/digitalSignage/icon_five.png",
+ 3: '../../img/digitalSignage/icon_five_new.png',
+ // 4: "../../img/digitalSignage/icon_seven.png",
+ // 4: "../../img/digitalSignage/icon_purple.png",
+ 4: '../../img/digitalSignage/icon_seven_new.png',
+ // 5: "../../img/digitalSignage/icon_four.png",
+ 5: '../../img/digitalSignage/icon_four_new.png',
+ // 6: "../../img/digitalSignage/icon_six.png",
+ 6: '../../img/digitalSignage/zt_orange.png',
+ 7: '../../img/digitalSignage/zt_red.png',
+ 8: '../../img/digitalSignage/zt_red.png', // 新增的工序
+ 9: '../../img/digitalSignage/zt_red.png',
+ 10: '../../img/digitalSignage/zt_green.png',
+ // 0: "../../img/digitalSignage/icon_one.png",
+ 0: '../../img/digitalSignage/icon_one_new.png',
+ 12: '../../img/digitalSignage/sd.png',
+ 20: '../../img/digitalSignage/project.png',
+ // 21: "../../img/digitalSignage/zt_white.png",
+ 21: '../../img/digitalSignage/zt_gary.png',
+ }
+
+ // 绘制索道标点
+ if (cablewayList && cablewayList.length > 0) {
+ cablewayList.forEach((pointData, index) => {
+ if (pointData.cablewaTransPointVoList && pointData.cablewaTransPointVoList.length > 0) {
+ // const positionNew = mars3d.PointTrans.bd2wgs([
+ // pointData.cablewaTransPointVoList[0].lng,
+ // pointData.cablewaTransPointVoList[0].lat,
+ // ]);
+ const billboard = new mars3d.graphic.BillboardEntity({
+ position: [
+ pointData.cablewaTransPointVoList[0].lng,
+ pointData.cablewaTransPointVoList[0].lat,
+ 1000,
+ ],
+ style: {
+ image: iconTypeList[12],
+ width: 30,
+ height: 30,
+ scale: 1,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ clampToGround: true,
+ },
+ })
+
+ // 添加点击事件
+ billboard.on(mars3d.EventType.click, function (event) {
+ // console.log("点击了标点", event.graphic.attr);
+ const graphic = event.graphic
+ const infoContent = `
+
+
+ 索道运输
+
+
+ 索道位置
+ ${pointData.towerName}
+
+
+ 索道长度
+ ${pointData.cablewayLength} KM
+
+
+ 最大载重
+ ${pointData.maxHeight} kg
+
+
+ 安全距离
+ ${pointData.safetyDistance} m
+
+
+ 最大坡度
+ ${pointData.maxSlope} °
+
+
+ 索道宽度
+ ${pointData.cablewayWidth} m
+
+
+
+ ${projectTitle}
+
+ `
+ // 创建自定义信息窗体
+ graphicLayer.bindPopup(infoContent, {
+ position: graphic.position,
+ })
+ })
+
+ graphicLayer.addGraphic(billboard)
+ graphicLayerList.push(billboard)
+ }
+
+ // 绘制杆塔
+ if (towerList && towerList.length > 0) {
+ // showData(towerList, graphicLayer);
+
+ const towerList1 = towerList
+
+ // 异步获取所有点的海拔高度
+ // const hList = [
+ // 1719.018, 1692.086, 1603.903, 1613.565, 1766.005, 1731.971, 1740.48,
+ // 1751.94, 1762.712, 1711.249,
+ // ];
+
+ const newTowerList2D = towerList1.filter(
+ (item) =>
+ item.towerProgress != 6 &&
+ item.towerProgress != 7 &&
+ item.towerProgress != 8 &&
+ item.towerProgress != 9 &&
+ item.towerProgress != 10,
+ )
+ const newTowerList3D = towerList1.filter(
+ (item) =>
+ item.towerProgress == 6 ||
+ item.towerProgress == 7 ||
+ item.towerProgress == 8 ||
+ item.towerProgress == 9 ||
+ item.towerProgress == 10,
+ )
+ const newTowerList3DData = await Promise.all(
+ newTowerList3D.map(async (item, index) => {
+ const altitude = await getElevationByLngLat(item.baiduLon, item.baiduLat)
+
+ const heightInit = item.towerType == 1 ? 68.5 : 80
+ return {
+ alt: altitude - heightInit, // 海拔高度 根据经纬度计算
+ heading: 23.0667, // 方向
+ headingStr: '23°4′', // 方向字符串
+ height: heightInit, // 杆塔高度
+ lat: item.baiduLat, // 纬度
+ lon: item.baiduLon, // 经度
+ ...item,
+ type: item.towerType,
+ }
+ }),
+ )
+
+ // 过滤出需要绘制3D塔的数据
+
+ showData(newTowerList3DData, graphicLayer)
+
+ newTowerList2D.forEach((pointData, index) => {
+ const isEven = index % 2 === 0
+ // 标点垂直方向设置
+ const billboardVerticalOrigin = Cesium.VerticalOrigin.BOTTOM // 标点固定底部对齐
+
+ // 标签位置设置
+ const labelVerticalOrigin = isEven
+ ? Cesium.VerticalOrigin.BOTTOM
+ : Cesium.VerticalOrigin.TOP
+ const pixelOffsetY = isEven ? 40 : -70 // 调整偏移量（根据标点大小适当调整）
+
+ const iconUrl = iconTypeList[parseInt(pointData.towerProgress)]
+
+ // const wgsPoint = mars3d.PointTrans.bd2wgs([
+ // pointData.baiduLon,
+ // pointData.baiduLat,
+ // ]);
+
+ // const wgsPoint = [
+ // dmsToDecimal(pointData.baiduLon),
+ // dmsToDecimal(pointData.baiduLat),
+ // ];
+
+ const billboard = new mars3d.graphic.BillboardEntity({
+ position: [pointData.baiduLon, pointData.baiduLat],
+ style: {
+ image: iconUrl,
+ width: 30,
+ height: 30,
+ scale: 1,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ clampToGround: true,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 必须设置
+ disableDepthTestDistance: Number.POSITIVE_INFINITY, // 防止被地形遮挡
+ },
+ // 其他属性
+ attr: {
+ id: index,
+ name: pointData.towerName,
+ },
+ })
+
+ const label2 = new mars3d.graphic.DivGraphic({
+ position: [pointData.baiduLon, pointData.baiduLat],
+ style: {
+ html: `${pointData.towerName}
`,
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ verticalOrigin: labelVerticalOrigin,
+ scaleByDistance: true,
+ offsetY: isEven ? -40 : 10,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ },
+ })
+
+ graphicLayer.addGraphic(billboard)
+ graphicLayer.addGraphic(label2)
+
+ // 添加点击事件
+ billboard.on(mars3d.EventType.click, function (event) {
+ // console.log("点击了标点", event.graphic.attr);
+ const graphic = event.graphic
+ let infoContent = `
+
+
${pointData.towerName}
+
+ 协调完成
+ ${pointData.time1 || '/'}
+
+
+ 基础开挖
+ ${pointData.time2 || '/'}
+
+
+ 基础开挖完成
+ ${pointData.time3 || '/'}
+
+
+ 基础浇筑
+ ${pointData.time4 || '/'}
+
+
+ 基础浇筑完成
+ ${pointData.time5 || '/'}
+
+
+ 铁塔组立
+ ${pointData.time6 || '/'}
+
+
+ 铁塔组立完成
+ ${pointData.time7 || '/'}
+
+
+ 架线施工
+ ${pointData.time8 || '/'}
+
+
+ 架线施工完成
+ ${pointData.time9 || '/'}
+
+
+ 附件安装完成
+ ${pointData.time10 || '/'}
+
+
+ //
+ // ${pointData.towerInfoVo.towerName}
+ //
+ //
+ // 协调完成
+ // ${
+ // pointData.towerInfoVo.time1 || "/"
+ // }
+ //
+ //
+ // 基础开挖
+ //
+ // ${pointData.towerInfoVo.time2 || "/"}
+ //
+ //
+ //
+ // 基础开挖完成
+ //
+ // ${pointData.towerInfoVo.time3 || "/"}
+ //
+ //
+ //
+ // 基础浇筑
+ //
+ // ${pointData.towerInfoVo.time4 || "/"}
+ //
+ //
+ //
+ // 基础浇筑完成
+ //
+ // ${pointData.towerInfoVo.time5 || "/"}
+ //
+ //
+ //
+ // 铁塔组立
+ //
+ // ${pointData.towerInfoVo.time6 || "/"}
+ //
+ //
+ //
+ // 铁塔组立完成
+ //
+ // ${pointData.towerInfoVo.time7 || "/"}
+ //
+ //
+ //
+ // 架线施工
+ //
+ // ${pointData.towerInfoVo.time8 || "/"}
+ //
+ //
+ //
+ // 架线施工完成
+ //
+ // ${pointData.towerInfoVo.time9 || "/"}
+ //
+ //
+ //
+ // 附件安装完成
+ //
+ // ${pointData.towerInfoVo.time10 || "/"}
+ //
+ //
+ //
+
+
+
+ 交叉跨越信息 ( ${pointData.spanTowerName} )
+
+
+ 上层线路
+ ${pointData.upperLine}
+
+
+ 下层线路
+ ${pointData.lowerLine}
+
+
+ 交叉角度
+ ${pointData.intersectionAngle} °
+
+
+ 垂直距离
+ ${pointData.verticalDistance} m
+
+
+ 安全裕度
+ ${pointData.safetyMargin} m
+
+
+
+
公路所在杆塔：${highwayList[i].towerName}
+
+ 宽度
+ ${highwayList[i].cablewayWidth || '/'}
+
+
+ 长度
+ ${highwayList[i].cablewayLength || '/'}
+
+
+
名称：${item.name}
+
+ 宽度
+ ${item.cablewayWidth || '/'}
+
+
+ 长度
+ ${item.cablewayLength || '/'}
+
+
+
${item.towerName}
+
+ 协调完成
+ ${item.time1 || '/'}
+
+
+ 基础开挖
+ ${item.time2 || '/'}
+
+
+ 基础开挖完成
+ ${item.time3 || '/'}
+
+
+ 基础浇筑
+ ${item.time4 || '/'}
+
+
+ 基础浇筑完成
+ ${item.time5 || '/'}
+
+
+ 铁塔组立
+ ${item.time6 || '/'}
+
+
+ 铁塔组立完成
+ ${item.time7 || '/'}
+
+
+ 架线施工
+ ${item.time8 || '/'}
+
+
+ 架线施工完成
+ ${item.time9 || '/'}
+
+
+ 附件安装完成
+ ${item.time10 || '/'}
+
+
+
+ 组件展示 · Table
+ 表格组件设计指南
+
+ 基于配置驱动的列表查询组件，通过简单的配置即可快速构建包含查询表单和数据表格的完整页面，支持丰富的表单类型和表格功能。
+
+
+
+
+
+
+
+
+
+ 以下示例展示了如何使用配置化的方式快速构建一个包含查询表单和数据表格的完整列表页面。
+ 通过简单的配置，即可实现表单渲染、数据查询、表格展示等完整功能。
+
+
+
+
+
+ 新增
+
+ 批量删除
+
+
+
+
+
+
+ {{ row.status === '1' ? '启用' : '禁用' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
表单配置（formColumns）
+
{{ formConfigExample }}
+
+
+
表格配置（tableColumns）
+
{{ tableConfigExample }}
+
+
+
搜索字段示例（本次查询参数）
+
+ 在上方查询表单中输入条件并点击「搜索」后，这里会实时展示本次请求携带的查询字段名及其对应的值。
+
+
{{ searchParamsDisplay }}
+
+
+
+
+
+
+
+
+
+ - 表单和表格组件采用职责分离设计，可独立使用，也可组合使用。
+ - 通过配置驱动的方式定义表单字段和表格列，减少重复代码。
+ - 表单组件已二次封装，提供统一的接口和样式，便于维护和扩展。
+ - 支持插槽自定义渲染，满足复杂场景的定制化需求。
+ - 表格支持分页、选择、操作列等常用功能，开箱即用。
+ - 数据加载通过 loadData 函数统一处理，便于对接后端接口。
+
+
+
+