From ba55f11f1e30714cbfc848f1e53ffe5e5e498432 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Tue, 3 Sep 2024 09:06:51 +0800 Subject: [PATCH] 111 --- src/router/index.js | 5 + src/view/sy_map_fb.vue | 6402 +++++++++++++++++++++++++--------------- vite.config.js | 4 +- 3 files changed, 4106 insertions(+), 2305 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 34194d8..7c213d7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -70,6 +70,11 @@ const router = createRouter({ path: '/home/index/person', component: () => import('../view/person/index.vue'), }, + { + name: '地图编辑', + path: '/home/index/mapEdit', + component: () => import('../view/sy_map_fb.vue'), + }, ] }, ] diff --git a/src/view/sy_map_fb.vue b/src/view/sy_map_fb.vue index 30f768f..64b2fe3 100644 --- a/src/view/sy_map_fb.vue +++ b/src/view/sy_map_fb.vue @@ -1,33 +1,98 @@ @@ -103,11 +385,14 @@ import { watch, nextTick, } from "vue"; -import { ElMessage } from "element-plus"; +import { ElMessage, ElMessageBox } from "element-plus"; +import tools from "@/utils/tools"; import initializeMap from "@/utils/mapInitializer.js"; import http from "@/utils/request.js"; -import mapTown from "@/assets/json/ly.json"; -import xkz from "@/assets/json/xkz.json"; +// import mapTown from "@/assets/json/lyx.json"; +import { VideoCamera } from "@element-plus/icons-vue"; +// import xkz from "@/assets/json/xkz.json"; +// import cssj from "@/assets/json/cssj.json"; import j0 from "@/assets/images/map/j0.png"; import j1 from "@/assets/images/map/j1.png"; import j2 from "@/assets/images/map/j2.png"; @@ -119,6 +404,10 @@ import j7 from "@/assets/images/map/j7.png"; import j8 from "@/assets/images/map/j8.png"; import j9 from "@/assets/images/map/j9.png"; import j10 from "@/assets/images/map/j10.png"; +import j11 from "@/assets/images/map/j11.png"; +import j7_map from "@/assets/images/map/j7_map.png"; +import j10_map from "@/assets/images/map/j10_map.png"; +import j11_map from "@/assets/images/map/j11_map.png"; import dwd from "@/assets/images/map/dwd.png"; import fwqbg1 from "@/assets/images/map/qlv.png"; import fwqbg2 from "@/assets/images/map/qlan.png"; @@ -134,27 +423,77 @@ import b5 from "@/assets/images/map/b5.png"; import b6 from "@/assets/images/map/b6.png"; import xcbg from "@/assets/images/map/xcbg.png"; import AED from "@/assets/images/map/AED.png"; - -const data = reactive({ - serviceCircleList: [], - fwqCoordinates: "", //服务圈中心坐标 - fwqCoordinates1: [], //服务圈中心坐标 - fwqCoordinates2: [], //服务圈中心坐标 +import Dialog from "./dialog/dialogMapDp.vue"; +import DialogCamera from "./dialog/dialogCameras.vue"; +import personDetail from "./person/index.vue"; +// import gcj02towgs84 from "@/utils/gcj02towgs84.js"; +// import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw"; +import { + DrawScene, + PolygonDraw, + PolygonMove, + Select, + DrawingType, + OperateEventType, +} from "bmap-draw"; +//--------定义参数------- +//测绘模式等 +const drawing = ref(false); +const add_mode = ref(false); +const edit_mode = ref(false); +const move_mode = ref(false); +const add_new_cs = reactive({ + name: "", + center: [], + area: [[[]]], }); - -//删除(存放渲染的地块及图标) -const jdm_arr = ref([]); -const jdm_number_arr = ref([]); -const fwq_list_arr = ref([]); -const cs_qk_arr = ref([]); -const cs_name_arr = ref([]); -const cs_number_name_arr = ref([]); -const cs_choose_arr = ref([]); -const cs_un_choose_arr = ref([]); -const cs_dd_arr = ref([]); -//是否进入村社 -const jrcs = ref(false); +const addPd = computed(() => { + if ( + add_new_cs.name == "" || + add_new_cs.center.length == 0 || + add_new_cs.area.length == 0 + ) { + return true; + } else { + return false; + } +}); +//编辑村名 +const input1 = ref(""); +const input2 = ref([]); +const input3 = ref(""); +const dialogVisible = ref(false); +const dialogVisible2 = ref(false); +const dialogVisible3 = ref(false); +const dialogVisible4 = ref(false); +const qx = ref(false); +//加载 +const loadingss = ref(false); +const loadTable = ref(false); +//是否打开人物详情 +const openD = ref(false); +const message = ref({}); +//存放渲染的地块及图标的数组 +const jdm_arr = ref([]); //街道名 +const jdm_number_arr = ref([]); //街道名(+数量) +const fwq_list_arr = ref([]); //基本公共服务圈 +const cs_qk_arr = ref([]); //社区彩色区块 +const cs_name_arr = ref([]); //社区名 +const cs_number_name_arr = ref([]); //社区名(+数量) +const cs_choose_arr = ref([]); //单点社区对应的区块(蓝色) +const cs_un_choose_arr = ref([]); //单点社区其他区块(灰色) +const cs_dd_arr = ref([]); //单点社区名 +//存放村社区块 +const csqk = ref({}); +var cssj; +//存放村社id用于编辑 +const changeCsqkId = ref(""); +//用于显示编辑栏 +const showEdit = ref(false); +//头部标题 const title_choose = ref(""); +const title_jd = ref(""); +const title_cs = ref(""); //是否单点社区 const sfdd = ref(false); const xuanzhongCs = ref([]); @@ -162,6 +501,18 @@ const xuanzhongCs = ref([]); const cfJd = ref(""); //存放村社 const cfCs = ref(""); +//点击存放村社暂时 +const cfCsZs = ref(""); +//地图 +var map = null; +//默认龙游县灰色地块 +const mapTownDataDK = reactive([]); +//龙游县街道数据 +var mapTown = []; +//社区地块 +var xkzDk = []; +//社区中心点 +var xkzCenter = []; //村社颜色列表 const colorList = [ { @@ -195,42 +546,1209 @@ const colorList = [ //存放特殊标签中文对应的简写 const tsbq_id_total = ref([ { - name: "残疾人", - id: "cjr", + name: "低保", + id: "db", + tagId: 1, }, { name: "低边", id: "dibian", + tagId: 2, }, { - name: "低保", - id: "db", + name: "困境儿童", + id: "kjer", + tagId: 3, }, { - name: "高血压", - id: "gxy", + name: "孤儿", + id: "ge", + tagId: 4, + }, + { + name: "残疾人", + id: "cjr", + tagId: 5, + }, + { + name: "特困", + id: "tk", + tagId: 6, }, { name: "糖尿病", id: "tnb", + tagId: 7, }, { name: "退役军人", id: "tyjr", + tagId: 8, }, { - name: "困难儿童", - id: "kjer", + name: "高血压", + id: "gxy", + tagId: 9, + }, + { + name: "精神病人", + id: "jsbr", + tagId: 10, }, ]); +//特殊标签匹配，用于判断choose.person.value存放的数据是否为特殊标签 +const tsbq_pp = ref([]); +//单选中社区区块 +const chooseCsList = ref([]); +//单选未中社区区块 +const unChooseList = ref([]); +// const sqname = ref(); +// const townName = ref(); +//地图街道设置(存放数量) +const mapTownCount = reactive([ + { + name: "龙洲街道", + center: [], + number: "1000", + }, + { + name: "东华街道", + center: [], + number: "1000", + }, + { + name: "小南海镇", + center: [], + number: "1000", + }, + { + name: "湖镇镇", + center: [], + number: "1000", + }, + { + name: "溪口镇", + center: [], + number: "1000", + }, + { + name: "詹家镇", + center: [], + number: "1000", + }, + { + name: "塔石镇", + center: [], + number: "1000", + }, + { + name: "横山镇", + center: [], + number: "1000", + }, + { + name: "模环乡", + center: [], + number: "1000", + }, + { + name: "石佛乡", + center: [], + number: "1000", + }, + { + name: "沐尘畲族乡", + center: [], + number: "1000", + }, + { + name: "罗家乡", + center: [], + number: "1000", + }, + { + name: "庙下乡", + center: [], + number: "1000", + }, + { + name: "大街乡", + center: [], + number: "1000", + }, + { + name: "社阳乡", + center: [], + number: "1000", + }, +]); +//选中 +const choose = ref({ + person: "", + fwq: 9999, + yaosu: 9999, +}); +//人口数 +const personTotal = ref([ + { + id: 0, + name: "总人口", + value: "1724114", + ages: "总人口", + age: "1000", + }, +]); +//人口数比例 +const PopulationRatio = ref([ + { + id: 0, + age: "1-10岁", + progress: 10, //进度条占比 + bgColor: "rgba(246, 214, 120, 1)", + }, + { + id: 1, + age: "11-20岁", + progress: 10, //进度条占比 + bgColor: "rgba(243, 254, 128, 1)", + }, + { + id: 2, + age: "21-30岁", + progress: 10, //进度条占比 + bgColor: "rgba(164, 241, 119, 1)", + }, + { + id: 3, + age: "31-40岁", + progress: 10, //进度条占比 + bgColor: "rgba(110, 255, 201, 1)", + }, + { + id: 4, + age: "41-50岁", + progress: 10, //进度条占比 + bgColor: "rgba(105, 201, 241, 1)", + }, + { + id: 5, + age: "51-60岁", + progress: 10, //进度条占比 + bgColor: "rgba(107, 138, 244, 1)", + }, + { + id: 6, + age: "61-70岁", + progress: 10, //进度条占比 + bgColor: "rgba(161, 128, 255, 1)", + }, + { + id: 7, + age: "71-80岁", + progress: 10, //进度条占比 + bgColor: "rgba(179, 238, 147, 1)", + }, + { + id: 8, + age: "81-90岁", + progress: 10, //进度条占比 + bgColor: "rgba(190, 255, 246, 1)", + }, + { + id: 9, + age: "91-100岁", + progress: 10, //进度条占比 + bgColor: "rgba(222, 173, 98, 1)", + }, +]); +//特殊标签左侧数据 +const tsbqTotal = ref([]); +const data = reactive({ + serviceCircleList: [], + fwqCoordinates: [], //服务圈经度 + fwqCoordinates1: [], //服务圈经度 + fwqCoordinates2: [], //服务圈纬度 + zoomLevel: null, //服务圈缩放级别 +}); +//基本公共服务圈 +const jbfwqTotal = ref([]); +const jbfwqPx = reactive([ + "龙洲街道", + "东华街道", + "小南海镇", + "湖镇镇", + "溪口镇", + "詹家镇", + "塔石镇", + "横山镇", + "模环乡", + "石佛乡", + "沐尘畲族乡", + "罗家乡", + "庙下乡", + "大街乡", + "社阳乡", +]); +//存放地图上服务圈数据 + +var circle; +const fwqList = ref([]); + +//资源要素 +const yaosuTotal = ref([ + { + id: 0, + name: "体育场所", + img: j0, + wz: false, + }, + + { + id: 1, + name: "幼儿园", + img: j1, + wz: false, + }, + { + id: 2, + name: "小学", + img: j2, + wz: false, + }, + { + id: 3, + name: "初中", + img: j3, + wz: false, + }, + { + id: 4, + name: "高中", + img: j4, + wz: false, + }, + { + id: 5, + name: "医院", + img: j5, + wz: false, + }, + { + id: 6, + name: "南孔书院", + img: j6, + wz: false, + }, + { + id: 7, + name: "养老机构", + img: j7, + img_map: j7_map, + wz: false, + tooltip: "name", + }, + { + id: 8, + name: "汽车充电桩", + img: j8, + wz: true, + }, + { + id: 9, + name: "卫生服务中心", + img: j9, + wz: true, + }, + { + id: 10, + name: "AED", + img_map: j10_map, + img: j10, + wz: true, + url: "/api/ggfwyth/ysyzt/getAeds", + tooltip: "siteAddress", + }, + { + id: 11, + name: "摄像头", + img: j11, + img_map: j11_map, + wz: false, + url: "/api/ggfwyth/ysyzt/getJashsxt", + tooltip: "sbmc", + }, +]); +//选中的资源要素 +const yaosuList = ref([]); +//选中资源要素坐标 +const yaosuIcon = ref({ + 摄像头: { + sj: [], + }, + 体育场所: { + sj: [], + }, + 幼儿园: { + sj: [], + }, + 小学: { sj: [] }, + 初中: { sj: [] }, + 高中: { sj: [] }, + 医院: { sj: [] }, + 南孔书院: { sj: [] }, + 养老机构: { sj: [] }, + 汽车充电桩: { sj: [] }, + 卫生服务中心: { sj: [] }, + AED: { sj: [] }, +}); +//养老机构数据 +const ylCount = reactive([ + { + name: "龙游县湖镇镇养老服务中心（龙游县湖镇中心敬老院）", + value: 34, + center: [119.290573, 29.05917], + }, + { + name: "龙游县模环敬老院（龙游县模环乡钱江缘颐养院）", + value: 73, + center: [119.245178, 29.11824], + }, + { + name: "龙游县小南海敬老院(龙游县小南海销钱江缘颐养院）", + value: 29, + center: [119.116203, 29.078722], + }, + { + name: "龙游县广和长青养老服务中心", + value: 310, + center: [119.15457, 29.01811], + }, + { + name: "龙游县泽随敬老院(龙游泽随养老中心)", + value: 57, + center: [119.102493, 29.14036], + }, + { + name: "龙游县龙南中心敬老院(龙游龙南养老中心)", + value: 73, + center: [119.157143, 28.833012], + }, + { + name: "龙游县詹家敬老院(龙游詹家养老中心)", + value: 33, + center: [119.078972, 29.026592], + }, + { + name: "龙游县龙洲敬老院(龙游龙洲养老中心)", + value: 23, + center: [119.164062, 28.984661], + }, + { + name: "龙游县横山镇敬老院(龙游横山养老中心)", + value: 58, + center: [119.237015, 29.240862], + }, + { + name: "龙游骨科医院(六顺颐养院)", + value: 247, + center: [119.171921, 29.01895], + }, + { + name: "龙游石佛敬老院(龙游县石佛乡六顺养老中心)", + value: 61, + center: [119.11557, 29.187431], + }, + { + name: "龙游县国华养老服务有限公司", + value: 25, + center: [119.125282, 29.098713], + }, + { + name: "龙游县社会养老和儿童福利院", + value: 0, + center: [119.17602, 29.03358], + }, + { + name: "龙游荷庄养老院", + value: 0, + center: [119.211021, 29.174171], + }, + { + name: "龙游县湖镇中心卫生院(天禾康养)", + value: 0, + center: [119.299393, 29.059999], + }, +]); +// 鼠标点击添加点位 +let currentMarker = null; // 用于保存当前标记的引用 +// 详情弹框 +const dialogShow = ref(false); +const sxtShow = reactive({ + show: false, + deviceCode: "", + hlsUriSsl: "", + name: "", +}); +const tableType = reactive({ + url: "", + title: "人员列表", + columns: [ + { + label: "序号", + property: "index", + width: "50", + type: "index", + align: "center", + }, + { + label: "姓名", + property: "nm", + }, + { + label: "手机号", + property: "contactTel", + }, + { + label: "年龄", + property: "age", + }, + // { + // label: "政治面貌", + // property: "zzmm", + // }, + { + label: "居住状态", + property: "jzzt", + type: "slot", + }, + { + label: "民族", + property: "ethnic", + }, + { + label: "性别", + property: "gender", + }, + + { + label: "户口登记地", + property: "domicAddr", + width: "200px", + }, + { + label: "", + property: "sxt", + width: "30px", + type: "slot", + }, + ], + data: [], +}); +// 表格分页 +const pagination = reactive({ + total: 100, + pageSize: 10, + currentPage: 1, +}); +//--------定义方法---------------------------------------- +//地图初始化 +const initMap = () => { + map = new BMapGL.Map("map", { minZoom: 8, maxZoom: 18 }); + map.setMapType(BMAP_SATELLITE_MAP); + map.enableScrollWheelZoom(true); + goMapCenter([119.178783, 29.034583], 11); + + //加载乡镇信息 + loadTown(); + //渲染地块 + addPolygonCounty(); + //添加街道名 + addJd(); +}; +// +const getXzsj = async () => { + await http + .get("/api/ggfwyth/regionalDivision/getManagerTownDetails") + .then((res) => { + if (res.code == 200) { + console.log(JSON.parse(res.data)); + + mapTown = JSON.parse(res.data); + } + }); +}; +const getCssj = async () => { + await http + .get("/api/ggfwyth/regionalDivision/getManagerVillageDetails") + .then((res) => { + if (res.code == 200) { + cssj = JSON.parse(res.data); + } + }); +}; +/** + * 地块编辑 + */ +//解锁 +const jsqx = ref(false); +const qxkey = "ggfwyth123"; +const qxvalue = ref(""); +const bjtitle = computed(() => { + if (jsqx.value) { + return "已解锁"; + } else { + return "锁定"; + } +}); +const openqx = () => { + console.log(1111); + + if (jsqx.value) { + ElMessageBox.confirm("确定要取消权限吗?") + .then(() => { + qxvalue.value = ""; + jsqx.value = false; + }) + .catch(() => {}); + } else { + qx.value = true; + } +}; +const saveqx = () => { + if (qxvalue.value == qxkey) { + jsqx.value = true; + qx.value = false; + qxvalue.value = ""; + ElMessage.success("解锁成功"); + } else { + ElMessage.error("解锁密码错误"); + } +}; +//移动模式 +const movemode = () => { + drawing.value = true; + move_mode.value = true; + selectedOverlay = null; + sceneMove = null; + movepoy = null; + select = null; + arrJWD = [[[]]]; +}; +//移动地块 +var selectedOverlay = null; +var sceneMove; +var movepoy; +const normalStyle = { + fillColor: "#ad9ff8", + strokeColor: "#4f2ff1", + strokeWeight: 2, + fillOpacity: 0.6, +}; +const activeStyle = { + fillColor: "#d6b0fd", + strokeColor: "#ad70eb", + strokeWeight: 2, + fillOpacity: 0.6, +}; +const polyLayer = new BMapGL.GeoJSONLayer("poly", { + dataSource: null, + polygonStyle: normalStyle, +}); +const setActiveStyle = (overlay) => { + // polyLayer.resetStyle(); + // overlay.setOptions(activeStyle); +}; +//监听事件 +const clickHandler = (e) => { + console.log(5555, e); + let target = polyLayer.pickOverlays(e.target); + if (target && target[0]) { + selectedOverlay = target[0]; + // setActiveStyle(selectedOverlay); + movepoy.open(selectedOverlay); + } else { + polyLayer.resetStyle(); + } +}; +//开始平移 +const moveEdit = () => { + console.log(11111, cs_choose_arr.value[0]); + map.removeEventListener("click", markera); + if (currentMarker !== null) { + map.removeOverlay(currentMarker); + } + //初始化 + selectedOverlay = null; + sceneMove = null; + movepoy = null; + map.addGeoJSONLayer(polyLayer); + polyLayer.addOverlay(cs_choose_arr.value[0]); + sceneMove = new DrawScene(map); + movepoy = new PolygonMove(sceneMove); + movepoy.setCurrentModel(PolygonMove.MODEL.MOVE); + // select = new Select(sceneMove, { + // type: DrawingType.DRAWING_POINT, + // }); + // select.open(); + polyLayer.resetStyle(); + sceneMove.addEventListener(OperateEventType.CLICK, clickHandler); +}; +//取消移动 +const moveCancel = () => { + movepoy.close(); + sceneMove.removeEventListener(OperateEventType.CLICK, clickHandler); + //取消第二次点击时，移动问题，先把地图上的GeoJSONLayer删除 + polyLayer.removeOverlay(cs_choose_arr.value[0]); + map.removeGeoJSONLayer(polyLayer); + //------- + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + addCsChoose(); +}; +//保存移动 +const moveSave = () => { + arrJWD = [[[]]]; + movepoy.close(); + sceneMove.removeEventListener(OperateEventType.CLICK, clickHandler); + cs_choose_arr.value[0].points.forEach((item, index) => { + let arr1 = []; + arr1.push(item?.latLng.lng); + arr1.push(item?.latLng.lat); + arrJWD[0][0].push(arr1); + }); + console.log("arrJWD", arrJWD); + polyLayer.removeOverlay(cs_choose_arr.value[0]); + map.removeGeoJSONLayer(polyLayer); + moveDK(); +}; +//退出移动模式 +const moveBack = () => { + //如果进入移动模式，但不点击移动，直接退出，movepoy为空，不执行取消监听 + if (movepoy) { + movepoy.close(); + sceneMove.removeEventListener(OperateEventType.CLICK, clickHandler); + } + polyLayer.removeOverlay(cs_choose_arr.value[0]); + map.removeGeoJSONLayer(polyLayer); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + addCsChoose(); + move_mode.value = false; + drawing.value = false; +}; +//移动保存 +const moveDK = async () => { + loadingss.value = true; + let sj = { + id: changeCsqkId.value, + data: JSON.stringify(arrJWD), + }; + await http.post(`/api/ggfwyth/regionalDivision/edit`, sj).then((res) => { + if (res.code == 200) { + ElMessage.success({ + message: "保存成功", + }); + } + }); + await getCssj(); + await loadCs(cfJd.value); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + chooseCsList.value.length = 0; + xkzDk.forEach((itemm, indexx) => { + if (itemm.name == cfCs.value) { + chooseCsList.value.push(itemm); + addCsChoose(); + } + }); + loadingss.value = false; +}; +//编辑模式 +const editmode = () => { + drawing.value = true; + edit_mode.value = true; +}; + +//存放编辑的地块数据 +var arrJWD = [[[]]]; +//百度bd09墨卡托坐标转换百度bd09经纬度坐标 +const bd09 = (x, y) => { + var ggPoint = new BMapGL.Point(x, y); + var pointArr = []; + pointArr.push(ggPoint); + var convertor = new BMapGL.Convertor(); + convertor.translate(pointArr, COORDINATES_BD09_MC, COORDINATES_BD09, (e) => { + let arr1 = []; + arr1.push(e.points[0].lng); + arr1.push(e.points[0].lat); + console.log("arr1", arr1); + arrJWD[0][0].push(arr1); + }); +}; +//开启编辑 +const openEdit = () => { + map.removeEventListener("click", markera); + if (currentMarker !== null) { + map.removeOverlay(currentMarker); + } + arrJWD = [[[]]]; + cs_choose_arr.value[0].enableEditing(); + drawing.value = true; + console.log(cs_choose_arr.value[0]); +}; + +//保存编辑 +const saveEdit = async () => { + cs_choose_arr.value[0].disableEditing(); + console.log(cs_choose_arr.value[0]); + for (const item of cs_choose_arr.value[0].points) { + if (item?.latLng) { + let arr1 = []; + arr1.push(item?.latLng.lng); + arr1.push(item?.latLng.lat); + arrJWD[0][0].push(arr1); + } else { + bd09(item.lng, item.lat); + //延迟0.1秒，保证convertor.translate执行完 + await new Promise((resolve) => setTimeout(resolve, 300)); + } + } + console.log("arrJWD", arrJWD); + saveDK(); +}; +//取消编辑 +const closeEdit = async () => { + cs_choose_arr.value[0].disableEditing(); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + addCsChoose(); + edit_mode.value = false; + drawing.value = false; + // let a = document.documentElement.getElementsByClassName("left")[0]; + // a.style.opacity = "1"; + // let b = document.documentElement.getElementsByClassName("right")[0]; + // b.style.opacity = "1"; +}; +//退出 +const backEdit = () => { + BMAP(); + showEdit.value = false; + drawing.value = false; +}; +//批量修改村社位置 +// const shangchuan = async () => { +// //上传地块0.00328 +// // for (const item of xkzDk) { +// // let a = []; +// // a.push(item.point); +// // // console.log(JSON.stringify(a)); +// // let sj = { +// // id: item.id, +// // data: JSON.stringify(a), +// // }; +// // await http.post(`/api/ggfwyth/regionalDivision/edit`, sj).then((res) => { +// // if (res.code == 200) { +// // ElMessage.success({ +// // message: "保存成功", +// // }); +// // } +// // }); +// // await new Promise((resolve) => setTimeout(resolve, 1000)); +// // } +// //上传中心点 +// for (const item of xkzCenter) { +// let sj = { +// id: item.id, +// data: JSON.stringify(item.center), +// }; +// console.log(sj); +// await http +// .post(`/api/ggfwyth/regionalDivision/updateCsCenter`, sj) +// .then((res) => { +// if (res.code == 200) { +// ElMessage.success({ +// message: "保存成功", +// }); +// } +// }); +// await new Promise((resolve) => setTimeout(resolve, 1000)); +// } +// }; +//上传编辑的地块 +const saveDK = async () => { + loadingss.value = true; + let sj = { + id: changeCsqkId.value, + data: JSON.stringify(arrJWD), + }; + // console.log(sj.data); + + await http + .post(`/api/ggfwyth/regionalDivision/editVillage`, sj) + .then((res) => { + if (res.code == 200) { + ElMessage.success({ + message: "保存成功", + }); + } + }); + await getCssj(); + await loadCs(cfJd.value); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + chooseCsList.value.length = 0; + xkzDk.forEach((itemm, indexx) => { + if (itemm.name == cfCs.value) { + chooseCsList.value.push(itemm); + addCsChoose(); + } + }); + loadingss.value = false; +}; +//修改村名 +const nameEdit = () => { + dialogVisible.value = true; +}; +//修改所属乡镇 +const xzEdit = () => { + dialogVisible4.value = true; +}; +const centerEdit = () => { + dialogVisible3.value = true; +}; +const csName = async () => { + let n = input1.value; + let regionalDivisionEditDTO = { + id: changeCsqkId.value, + data: input1.value, + }; + await http + .post(`/api/ggfwyth/regionalDivision/updateCsName`, regionalDivisionEditDTO) + .then((res) => { + if (res.code == 200) { + ElMessage.success({ + message: "修改村名成功", + }); + } + }); + input1.value = ""; + dialogVisible.value = false; + await getCssj(); + await loadCs(cfJd.value); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = []; + xkzCenter.forEach((a) => { + if (a.name == n) { + cs_dd_arr.value.push(a); + } + }); + console.log("cs_dd_arr.value", cs_dd_arr.value); + setTimeout(() => { + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + }, 500); +}; +const ssxzEdit = async () => { + console.log(cs_choose_arr.value[0]); + console.log(xuanzhongCs.value); + let arrJWD2 = [[[]]]; + cs_choose_arr.value[0].points.forEach((item, index) => { + let arr1 = []; + arr1.push(item?.latLng.lng); + arr1.push(item?.latLng.lat); + arrJWD2[0][0].push(arr1); + }); + let data1 = { + type: "Feature", + id: "", + geometry: { + type: "MultiPolygon", + coordinates: [], + }, + properties: { + name: "", + center: [], + layer: "乡镇", + }, + }; + let sj = { + id: xuanzhongCs.value[0].id, + name: input3.value, + data: {}, + }; + data1.id = `${input3.value}_${xuanzhongCs.value[0].name}`; + data1.geometry.coordinates = [...arrJWD2]; + data1.properties.name = xuanzhongCs.value[0].name; + data1.properties.center = xuanzhongCs.value[0].center; + sj.data = JSON.stringify(data1); + console.log(sj); + + await http + .post(`/api/ggfwyth/regionalDivision/updateVillageAffiliationTown`, sj) + .then((res) => { + if (res.code == 200) { + ElMessage.success({ + message: "添加成功", + }); + input3.value = ""; + dialogVisible4.value = false; + } + }); + + await getCssj(); + await loadCs(cfJd.value); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); +}; +const csCenter = async () => { + let regionalDivisionEditDTO = { + id: changeCsqkId.value, + data: JSON.stringify(input2.value), + }; + + await http + .post( + `/api/ggfwyth/regionalDivision/updateCsCenter`, + regionalDivisionEditDTO + ) + .then((res) => { + if (res.code == 200) { + ElMessage.success({ + message: "修改村社中心点成功", + }); + } + }); + input2.value = []; + dialogVisible3.value = false; + await getCssj(); + await loadCs(cfJd.value); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = []; + xkzCenter.forEach((a) => { + if (a.name == cfCs.value) { + cs_dd_arr.value.push(a); + } + }); + console.log("cs_dd_arr.value", cs_dd_arr.value); + setTimeout(() => { + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + }, 200); +}; +//添加模式 +const addmode = () => { + add_mode.value = true; +}; +//添加地块 +const sceneDrawStatus = ref(null); +const scene = ref(null); +const draw = () => { + drawing.value = true; + map.removeEventListener("click", markera); + if (currentMarker !== null) { + map.removeOverlay(currentMarker); + } + let drawScene = new DrawScene(map, { + noLimit: true, + }); + let polygon = new PolygonDraw(drawScene, { + hideTip: true, // 隐藏绘制提示 + isSeries: false, // 是否开启批量绘制 + isOpen: true, + labelOptions: { + borderRadius: "2px", + background: "#b5d3fb", + border: "1px solid #b5d3fb", + color: "#333", + fontSize: "5px", + letterSpacing: "0", + padding: "2px", + }, + baseOpts: { + fillColor: "#fff", + strokeWeight: 2, + strokeOpacity: 1, + fillOpacity: 0.2, + }, + }); + sceneDrawStatus.value = polygon; + scene.value = drawScene; + sceneDrawStatus.value.open(); +}; +//取消地块 +const cancel = () => { + scene.value.clearData(); + sceneDrawStatus.value.closeAll(); + sceneDrawStatus.value = null; + scene.value = null; +}; +//添加中心点 +const addcenter = () => { + BMAP(); +}; +//查看添加列表 +const look = () => { + add_new_cs.area[0][0] = []; + // console.log(111111111, sceneDrawStatus.value); + sceneDrawStatus.value?.drawPoint.forEach((item, index) => { + let arr1 = []; + arr1.push(item.lng); + arr1.push(item.lat); + console.log(index, arr1); + add_new_cs.area[0][0].push(arr1); + }); + console.log(2222, add_new_cs.area[0]); + + dialogVisible2.value = true; +}; +//添加请求 +const addNew = async () => { + loadingss.value = true; + let data1 = { + type: "Feature", + id: "", + geometry: { + type: "MultiPolygon", + coordinates: [], + }, + properties: { + name: "", + center: [], + layer: "乡镇", + }, + }; + let sj = { + name: cfJd.value, + data: {}, + }; + // let sj = { + // name: "湖镇镇", + // data: {}, + // }; + data1.id = `${cfJd.value}_${add_new_cs.name}`; + // data1.id = `湖镇镇_${add_new_cs.name}`; + data1.geometry.coordinates = [...add_new_cs.area]; + data1.properties.name = add_new_cs.name; + data1.properties.center = add_new_cs.center; + sj.data = JSON.stringify(data1); + console.log(sj); + + await http + .post(`/api/ggfwyth/regionalDivision/addVillage`, sj) + .then((res) => { + if (res.code == 200) { + ElMessage.success({ + message: "添加成功", + }); + dialogVisible2.value = false; + } + }); + cancel(); + add_new_cs.name = ""; + add_new_cs.center = []; + await getCssj(); + await loadCs(cfJd.value); + unChooseList.value.length = 0; + xkzDk.forEach((itemm, indexx) => { + if (itemm.name != cfCs.value) { + unChooseList.value.push(itemm); + } + }); + addCsUnChoose(); + loadingss.value = false; +}; +//删除 +const deleteCs = async () => { + ElMessageBox.confirm("确定要删除当前村社?") + .then(() => { + loadingss.value = true; + http + .post( + `/api/ggfwyth/regionalDivision/delVillage?id=${changeCsqkId.value}` + ) + .then((res) => { + if (res.code == 200) { + ElMessage.success({ + message: "删除成功", + }); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + let a; + let b; + xkzCenter.forEach((item, index) => { + if (item.id == changeCsqkId.value) { + a = index; + } + }); + xkzDk.forEach((item, index) => { + if (item.id == changeCsqkId.value) { + b = index; + } + }); + xkzCenter.splice(a, 1); + xkzDk.splice(b, 1); + loadingss.value = false; + } + }); + }) + .catch(() => { + // catch error + }); +}; + +//退出添加模式 +const addBack = () => { + add_mode.value = false; + drawing.value = false; + map.removeEventListener("click", markera); + if (currentMarker !== null) { + map.removeOverlay(currentMarker); + } +}; +/** + * 地图编辑结束 + */ //点击龙游县初始化 const csh = () => { - // console.log(222, item.name); + clear(); + + map.removeEventListener("click", markera); + if (currentMarker !== null) { + map.removeOverlay(currentMarker); + } + goMapCenter([119.178783, 29.034583], 11); + getData(); + getDataBq(); +}; +//清空村社的数据 +const clear = () => { xuanzhongCs.value = []; sfdd.value = false; title_choose.value = ""; + title_jd.value = ""; + title_cs.value = ""; cfJd.value = ""; cfCs.value = ""; + cfCsZs.value = ""; cs_un_choose_arr.value.forEach((item, index) => { map.removeOverlay(cs_un_choose_arr.value[index]); }); @@ -249,193 +1767,36 @@ const csh = () => { cs_dd_arr.value.forEach((item, index) => { map.removeOverlay(cs_dd_arr.value[index]); }); - // jdm_arr.value = []; - // jdm_number_arr.value = []; - // fwq_list_arr.value = []; cs_qk_arr.value = []; cs_name_arr.value = []; cs_number_name_arr.value = []; cs_choose_arr.value = []; cs_un_choose_arr.value = []; cs_dd_arr.value = []; - map.removeEventListener("click", markera); - if (currentMarker !== null) { - map.removeOverlay(currentMarker); - } - goMapCenter([119.178783, 29.034583], 11); - getData(); - getDataBq(); + xkzCenter.length = 0; + xkzDk.length = 0; +}; +//定义地图中点 +const goMapCenter = (point, zoom) => { + map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom); +}; +//0岁时,改为小于1岁 +const ageLess0 = computed(() => { + return function (item) { + if (item == "0岁") { + return "小于1岁"; + } else { + return item; + } + }; +}); +//鼠标点击添加点位 +const BMAP = () => { + // 添加鼠标点击事件监听器 + map.addEventListener("click", markera); }; -//选中社区 -const chooseCsList = ref([]); -const unChooseList = ref([]); -const sqname = ref(); -const townName = ref(); -//地图设置 -const mapTownCount = reactive([ - { - name: "龙洲街道", - center: [119.1573083, 28.9799445], - number: "1000", - }, - { - name: "东华街道", - center: [119.209592, 28.9799445], - number: "1000", - }, - { - name: "小南海镇", - center: [119.119616, 29.07309], - number: "1000", - }, - { - name: "湖镇镇", - center: [119.2906892, 29.0386151], - number: "1000", - }, - { - name: "溪口镇", - center: [119.1859408, 28.8879474], - number: "1000", - }, - { - name: "詹家镇", - center: [119.1201732, 29.005175], - number: "1000", - }, - { - name: "塔石镇", - center: [119.1256669, 29.1373072], - number: "1000", - }, - { - name: "横山镇", - center: [119.1876111, 29.1903275], - number: "1000", - }, - { - name: "模环乡", - center: [119.237015, 29.120862], - number: "1000", - }, - { - name: "石佛乡", - center: [119.1002998, 29.2018674], - number: "1000", - }, - { - name: "沐尘畲族乡", - center: [119.1837169, 28.8014116], - number: "1000", - }, - { - name: "罗家乡", - center: [119.2453273, 28.9130851], - number: "1000", - }, - { - name: "庙下乡", - center: [119.1037175, 28.8089885], - number: "1000", - }, - { - name: "大街乡", - center: [119.2664362, 28.8432149], - number: "1000", - }, - { - name: "社阳乡", - center: [119.3109367, 28.9074754], - number: "1000", - }, -]); - -//默认龙游县灰色地块 -const mapTownDataDK = reactive([]); -//社区地块 -const xkzDk = reactive([]); -//社区中心点 -const xkzCenter = reactive([ - { - name: "溪口村", - center: [119.2002156322304, 28.83866363229786], - number: "50", - }, - { - name: "扁石村", - center: [119.18143177857742, 28.858795781247416], - number: "50", - }, - { - name: "大垄村", - center: [119.15947390269743, 28.856881986353613], - number: "50", - }, - { - name: "枫林村", - center: [119.2244601402551, 28.874916936765324], - number: "50", - }, - { - name: "双港口村", - center: [119.2112370831526, 28.873145674638753], - number: "50", - }, - { - name: "灵上村", - center: [119.18997199384468, 28.871170115155575], - number: "50", - }, - { - name: "灵下村", - center: [119.19215588030731, 28.890692457149832], - number: "50", - }, - { - name: "下徐村", - center: [119.13517530022014, 28.877528537725134], - number: "50", - }, - { - name: "大沃口村", - center: [119.17629950196843, 28.895987778606404], - number: "50", - }, - { - name: "寺下村", - center: [119.15115841066512, 28.913624042836545], - number: "50", - }, - { - name: "大阳家村", - center: [119.165141274073, 28.89860048623702], - number: "50", - }, - { - name: "石角村", - center: [119.12327500764461, 28.911094612057784], - number: "50", - }, - { - name: "红罗村", - center: [119.18884846618927, 28.911017362099795], - number: "50", - }, - { - name: "冷水村", - center: [119.19787638778016, 28.934598743672993], - number: "50", - }, - { - name: "新溪社区", - center: [119.184555, 28.853068], - number: "50", - }, -]); -var map = null; -// 鼠标点击添加点位 -let currentMarker = null; // 用于保存当前标记的引用 const markera = (e) => { + console.log(`"center":[${e.latlng.lng},${e.latlng.lat}],`); // 检查并移除当前标记 if (currentMarker !== null) { map.removeOverlay(currentMarker); @@ -448,462 +1809,866 @@ const markera = (e) => { // 将新标记添加到地图中并更新当前标记引用 map.addOverlay(marker); currentMarker = marker; -}; -const BMAP = () => { - // 添加鼠标点击事件监听器 - map.addEventListener("click", markera); -}; -// 添加服务圈 -var circle; -const drawACircle = (v) => { - console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2); - if (!circle) { - var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2); - circle = new BMapGL.Circle(point, 1000, { - strokeColor: "yellow", - strokeWeight: 2, - strokeOpacity: 0.8, - fillOpacity: 0.1, - strokeStyle: "dashed", - zIndex: 99, - // fillColor: "yellow", - }); - map.addOverlay(circle); + if (add_mode.value) { + add_new_cs.center = [e.latlng.lng, e.latlng.lat]; + } + if (!drawing.value) { + input2.value = [e.latlng.lng, e.latlng.lat]; } - - // if (v === "hide") { - // circle.hide(); - // } else { - // circle.show(); - // map.addOverlay(circle); - // map.setViewport({ - // center: new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2), - // zoom: 14, - // }); - // } }; +//点击人口数(关键字存age) +const buten = async (item) => { + if (choose.value.person == item.age) { + choose.value.person = ""; + jdm_number_arr.value.forEach((item, index) => { + map.removeOverlay(jdm_number_arr.value[index]); + }); + cs_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_name_arr.value[index]); + }); + cs_number_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_number_name_arr.value[index]); + }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + addJd(); -const initMap = () => { - map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 }); - map.setMapType(BMAP_SATELLITE_MAP); - map.enableScrollWheelZoom(true); - goMapCenter([119.178783, 29.034583], 11); - - //加载乡镇信息 - loadTown(); - //渲染地块 - addPolygonCounty(); - //添加街道名 - addJd(); -}; -const loadTown = () => { - for (let v of mapTown.features) { - if (v.geometry.coordinates.length > 1) { - for (let w in v.geometry.coordinates) { - if (v.geometry.coordinates[w][0].length < 60) continue; - mapTownDataDK.push({ - name: v.properties.name, - point: v.geometry.coordinates[w][0], - }); - } + if (title_jd.value == "") { } else { - mapTownDataDK.push({ - name: v.properties.name, - point: v.geometry.coordinates[0], + if (sfdd.value) { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + } else { + addCs(); + } + } + } else { + loadingss.value = true; + await getData(item.age); + await getDatas(cfJd.value, item.age); + loadingss.value = false; + } +}; +//点击特殊标签(关键字存name) +const buten2 = async (item) => { + //取消时不请求 + if (choose.value.person == item.id) { + choose.value.person = ""; + jdm_number_arr.value.forEach((item, index) => { + map.removeOverlay(jdm_number_arr.value[index]); + }); + cs_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_name_arr.value[index]); + }); + cs_number_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_number_name_arr.value[index]); + }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + addJd(); + + if (title_jd.value == "") { + } else { + if (sfdd.value) { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + } else { + addCs(); + } + } + } else { + loadingss.value = true; + await getDataBqs(cfJd.value, cfCs.value, item.id); + loadingss.value = false; + } +}; +//人口 +const getData = async (e) => { + let e1 = e; + if (e == "9999") { + e = ""; + } + try { + const res = await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`); + if (res.code == 200) { + if (cfJd.value == "") { + personTotal.value = [ + { + id: "9999", + ages: "总人口", + age: "9999", + value: "res.data.total", + }, + { + id: "6666", + name: "近一年死亡", + value: "5650", + ages: "近一年死亡", + age: "6666", + percent: "", + }, + ]; + personTotal.value[0].rksl = res.data.total; + personTotal.value[0].ages = "总人口"; + personTotal.value[1].rksl = res.data.swrs; + personTotal.value[1].ages = "近一年死亡"; + personTotal.value[1].percent = res.data.swrsPercent; + res.data.age.forEach((item, index) => { + personTotal.value.push({ + id: index + 1, + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + percent: item.percent, + }); + }); + // 年龄百分比 + const agename = [ + "09Percent", + "1019Percent", + "2029Percent", + "3039Percent", + "4049Percent", + "5059Percent", + "6069Percent", + "7079Percent", + "8089Percent", + "9099Percent", + "100nlPercent", + ]; + if (res.data.ageGroupsPercent) { + // console.log(PopulationRatio.value[0].progress); + agename.forEach((key, index) => { + if (PopulationRatio.value[index]) { + PopulationRatio.value[index].progress = + res.data.ageGroupsPercent[key]; + } + }); + } + } + mapTownCount.map((item) => { + item.swrs = 0; + res.data.townWwrs.map((items) => { + if (items.xzjd == item.name) { + item.swrs = items.swrs; + } + }); + }); + mapTownCount.map((item) => { + item.number = 0; + res.data.town.map((items) => { + if (items.town == item.name) { + item.number = items.rksl; + } + }); }); } + } catch (error) { + console.error("Error fetching data:", error); + } + if (e1) { + changeRs(e1); } }; - -//添加地图区块 -const addPolygonCounty = () => { - map.clearOverlays(); - let fillColor = "#ffffff"; - mapTownDataDK.map((item) => { - item.leg = 0; - //地区的坐标范围 - let points = []; - item.point.map((p) => points.push(new BMapGL.Point(...p))); - if (points.length) { - //创建面 - let polygon = new BMapGL.Polygon(points, { - strokeColor: "#5E9AD2", - strokeWeight: 2, - strokeOpacity: 0.8, - fillColor: fillColor, - fillOpacity: 0.7, - name: item.name, - zIndex: 92, - }); - - map.addOverlay(polygon); - polygon.addEventListener("click", () => { - townName.value = item.name; - if (item.name == cfJd.value) { - } else { - console.log(111, choose.value.person); - cfJd.value = item.name; - let jdCenter = []; - if (item.name == "溪口镇") { - console.log(444444444, choose.value.person); - BMAP(); - getDatas("溪口镇", ""); - getDataBq(cfJd.value, ""); - if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" - ) { - // console.log(5555555555555555); - getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false); - } else if (choose.value.person != "") { - getDatas("溪口镇", choose.value.person); +const getDatas = async (e, i, y = true) => { + //y用来判断选中标签后，点击街道，不重复渲染 + if (i == "9999") { + i = ""; + } + http + .get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`) + .then((res) => { + if (res.code == 200) { + if (cfCs.value != "") { + } else if (cfJd.value !== "") { + personTotal.value = [ + { + // id: "9999", + ages: "总人口", + age: "9999", + value: "res.data.total", + }, + { + // id: "6666", + name: "近一年死亡", + value: "5650", + ages: "近一年死亡", + age: "6666", + percent: "", + }, + ]; + let before_age = ""; + personTotal.value[0].rksl = res.data.total; + personTotal.value[0].ages = "总人口"; + personTotal.value[1].rksl = res.data.swrs; + personTotal.value[1].ages = "近一年死亡"; + personTotal.value[1].percent = res.data.swrsPercent; + res.data.age.forEach((item, index) => { + if (index == 0 && item.age == 0) { + personTotal.value.push({ + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + percent: item.percent, + }); + before_age = item.age; + } else { + if (item.age - before_age == 1) { + personTotal.value.push({ + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + percent: item.percent, + }); + before_age = item.age; + } else { + for (let k = before_age; k < item.age - 1; k++) { + before_age = before_age + 1; + personTotal.value.push({ + rksl: 0, + age: before_age + "", + ages: before_age + "岁", + percent: 0.0, + }); + } + personTotal.value.push({ + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + percent: item.percent, + }); + before_age = item.age; + } } - - if (!title_choose.value.includes("溪口镇")) { - title_choose.value = title_choose.value + `>${item.name}`; - } - loadCs(); - addPolygonCountyCs(); - - // if (choose.value.person == "") { - // addCs(); - // } else { - // addCs2(); - // } - mapTownCount.map((item) => { - if (item.name == "溪口镇") { - jdCenter = item.center; + }); + } + if (cfJd.value != "") { + xkzCenter.map((item) => { + item.swrs = 0; + res.data.committeeSwrs.map((items) => { + if (items.csq == item.name) { + item.swrs = items.swrs; } }); - goMapCenter(jdCenter, 13); - } else { - map.removeEventListener("click", markera); - if (currentMarker !== null) { - map.removeOverlay(currentMarker); - } - cfJd.value = ""; - cfCs.value = ""; - xuanzhongCs.value = []; - sfdd.value = false; - title_choose.value = ""; - cs_un_choose_arr.value.forEach((item, index) => { - map.removeOverlay(cs_un_choose_arr.value[index]); + }); + + xkzCenter.map((item) => { + item.number = 0; + res.data.committee.map((items) => { + if (items.committee == item.name) { + item.number = items.rksl; + } }); - cs_choose_arr.value.forEach((item, index) => { - map.removeOverlay(cs_choose_arr.value[index]); - }); - cs_number_name_arr.value.forEach((item, index) => { - map.removeOverlay(cs_number_name_arr.value[index]); - }); - cs_name_arr.value.forEach((item, index) => { - map.removeOverlay(cs_name_arr.value[index]); - }); - cs_qk_arr.value.forEach((item, index) => { - map.removeOverlay(cs_qk_arr.value[index]); - }); - cs_dd_arr.value.forEach((item, index) => { - map.removeOverlay(cs_dd_arr.value[index]); - }); - // jdm_arr.value = []; - // jdm_number_arr.value = []; - // fwq_list_arr.value = []; - cs_qk_arr.value = []; - cs_name_arr.value = []; - cs_number_name_arr.value = []; - cs_choose_arr.value = []; - cs_un_choose_arr.value = []; - cs_dd_arr.value = []; - getData(); - getDataBq(); - } + }); } - // } - }); - } - }); -}; - -//添加街道名 -const addJd = () => { - mapTownCount.map((item, index) => { - createCustomOverlayJd(item, index); - }); -}; -//添加街道名2含数量 -const addJd2 = () => { - nextTick(() => { - mapTownCount.map((item, index) => { - createCustomOverlayJd2(item, index); - }); - }); - - // if (center_now.value[0] == 119.178783) { - // goMapCenter([119.178783, 29.034581], 11); - // } -}; -//加载村社信息 -const loadCs = () => { - for (let v of xkz.features) { - if (v.geometry.coordinates.length > 1) { - for (let w in v.geometry.coordinates) { - if (v.geometry.coordinates[w][0].length < 60) continue; - xkzDk.push({ - name: v.properties.name, - point: v.geometry.coordinates[w][0], - }); - } - } else { - xkzDk.push({ - name: v.properties.name, - point: v.geometry.coordinates[0], - }); - } - } -}; -//添加村社区块 -const addPolygonCountyCs = () => { - xkzDk.map((item, index) => { - let num = index % 9; - let fillColor = colorList[num].bg; - //地区的坐标范围 - let points = []; - item.point[0].map((p) => points.push(new BMapGL.Point(...p))); - if (points.length) { - //创建面 - cs_qk_arr.value[index] = new BMapGL.Polygon(points, { - strokeColor: fillColor, - strokeWeight: 2, - strokeOpacity: 0.8, - fillColor: fillColor, - fillOpacity: 0.7, - name: item.name, - zIndex: 99, - }); - map.addOverlay(cs_qk_arr.value[index]); - cs_qk_arr.value[index].addEventListener("click", () => { - cfCs.value = item.name; - sfdd.value = true; - xkzCenter.forEach((a, b) => { - if (a.name == item.name) { - cs_dd_arr.value.push(a); - xuanzhongCs.value.push(a); - } - }); - chooseCsList.value.length = 0; - unChooseList.value.length = 0; - xkzDk.forEach((itemm, indexx) => { - if (itemm.name == item.name) { - chooseCsList.value.push(itemm); - } else { - unChooseList.value.push(itemm); - } - }); - title_choose.value = title_choose.value + `>${item.name}`; - cs_qk_arr.value.forEach((item, index) => { - map.removeOverlay(cs_qk_arr.value[index]); - }); cs_name_arr.value.forEach((item, index) => { map.removeOverlay(cs_name_arr.value[index]); }); cs_number_name_arr.value.forEach((item, index) => { map.removeOverlay(cs_number_name_arr.value[index]); }); - getDataBq(cfJd.value, cfCs.value); - if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" - ) { - getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + + if (title_jd.value == "") { } else { - // console.log(2, "溪口镇"); - getDataBqs(cfJd.value, cfCs.value); + if (sfdd.value) { + if (choose.value.person == "") { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + } else { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs2(item, index); + }); + } + } else { + if (y) { + if (choose.value.person == "") { + addCs(); + } else { + addCs2(); + } + } + } } - //这段注意 - getDatas2(cfJd.value, choose.value.person, cfCs.value); - addCsChoose(); - addCsUnChoose(); + + // 年龄百分比 + const agename = [ + "09Percent", + "1019Percent", + "2029Percent", + "3039Percent", + "4049Percent", + "5059Percent", + "6069Percent", + "7079Percent", + "8089Percent", + "9099Percent", + "100nlPercent", + ]; + if (res.data.ageGroupsPercent) { + agename.forEach((key, index) => { + if (PopulationRatio.value[index]) { + PopulationRatio.value[index].progress = + res.data.ageGroupsPercent[key]; + } + }); + } + } + }); +}; +const getDatas2 = async (e, i, cs) => { + //i1用来防止i清空，用来渲染单个点位 + let i1 = i; + if ( + // i == "残疾人" || + // i == "低边" || + // i == "低保" || + // i == "高血压" || + // i == "糖尿病" || + // i == "退役军人" || + // i == "困境儿童" || + // i == "孤儿" || + // i == "特困" || + // i == "精神病人" + tsbq_pp.value.includes(i) + ) { + i = ""; + } + await http + .get( + `/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}&committee=${cs}` + ) + .then((res) => { + if (res.code == 200) { + personTotal.value = [ + { + // id: "9999", + name: "总人口", + ages: "总人口", + age: "9999", + value: "res.data.total", + }, + { + // id: "6666", + name: "近一年死亡", + value: "5650", + ages: "近一年死亡", + age: "6666", + }, + ]; + personTotal.value[0].rksl = res.data.total; + personTotal.value[0].ages = "总人口"; + personTotal.value[1].rksl = res.data.swrs; + personTotal.value[1].ages = "近一年死亡"; + personTotal.value[1].percent = res.data.swrsPercent; + // res.data.age.forEach((item, index) => { + // personTotal.value.push({ + // id: index + 1, + // rksl: item.rksl, + // age: item.age + "", + // ages: item.age + "岁", + // percent: item.percent, + // }); + // }); + let before_age = ""; + res.data.age.forEach((item, index) => { + if (index == 0 && item.age == 0) { + personTotal.value.push({ + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + percent: item.percent, + }); + before_age = item.age; + } else { + if (item.age - before_age == 1) { + personTotal.value.push({ + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + percent: item.percent, + }); + before_age = item.age; + } else { + for (let k = before_age; k < item.age - 1; k++) { + before_age = before_age + 1; + personTotal.value.push({ + rksl: 0, + age: before_age + "", + ages: before_age + "岁", + percent: 0.0, + }); + } + personTotal.value.push({ + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + percent: item.percent, + }); + before_age = item.age; + } + } + }); + xkzCenter.map((item) => { + item.swrs = 0; + res.data.committeeSwrs.map((items) => { + if (items.csq == item.name) { + item.swrs = items.swrs; + } + }); + }); + // 年龄百分比 + const agename = [ + "09Percent", + "1019Percent", + "2029Percent", + "3039Percent", + "4049Percent", + "5059Percent", + "6069Percent", + "7079Percent", + "8089Percent", + "9099Percent", + "100nlPercent", + ]; + if (res.data.ageGroupsPercent) { + agename.forEach((key, index) => { + if (PopulationRatio.value[index]) { + PopulationRatio.value[index].progress = + res.data.ageGroupsPercent[key]; + } + }); + } + } + }); + if ( + // i1 == "残疾人" || + // i1 == "低边" || + // i1 == "低保" || + // i1 == "高血压" || + // i1 == "糖尿病" || + // i1 == "退役军人" || + // i1 == "困境儿童" || + // i1 == "孤儿" || + // i1 == "特困" || + // i1 == "精神病人" + tsbq_pp.value.includes(i1) + ) { + } else { + if (choose.value.person == "") { + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + } else { + cs_dd_arr.value.map((item, index) => { + DGcreateCs2(item, index); + }); + } + } +}; + +//特殊标签 +//获取特殊标签 +//左侧列表数据 +const getDataBq = async (jd, cs) => { + await http + .get(`/api/ggfwyth/ysyzt/getBqRs?committee=${cs || ""}&town=${jd || ""}`) + .then((res) => { + if (res.code == 200) { + tsbqTotal.value.length = 0; + + tsbq_id_total.value.forEach((item, index) => { + let b = 0; + res.data.forEach((itemm, indexx) => { + if (itemm.bq == item.name) { + tsbqTotal.value.push({ + id: itemm.bq, + name: itemm.bq, + rksl: itemm.rs || 0, + tagId: itemm.tagId, + }); + b = 1; + } + }); + if (b == 0) { + tsbqTotal.value.push({ + id: item.name, + name: item.name, + rksl: 0, + tagId: item.tagId, + }); + } + }); + } + }); +}; +//第一次进入页面初始化获取特殊标签数据，并存放特殊标签 +const getDataBqFirst = async () => { + await http.get(`/api/ggfwyth/ysyzt/getBqRs`).then((res) => { + if (res.code == 200) { + tsbqTotal.value.length = 0; + tsbq_pp.value.lenth = 0; + tsbq_id_total.value.length = 0; + res.data.forEach((item, index) => { + tsbq_pp.value.push(item.bq); + tsbq_id_total.value.push({ + name: item.bq, + tagId: item.tagId, + }); + tsbqTotal.value.push({ + id: item.bq, + name: item.bq, + rksl: item.rs || 0, + tagId: item.tagId, + }); + }); + } + }); +}; +const getDataBqs = async (jd, cs, bq) => { + await getDataBqJD(bq); + if (cfJd.value == "") { + } else { + await getDataBqs2(cfJd.value, cfCs.value, bq); + } +}; +//特殊标签获取街道内部人数 +const getDataBqs2 = async (jd, cs, bq) => { + //f用来判断执不执行changeRs2 + let data = {}; + let tagIdBq; + tsbq_id_total.value.forEach((item, index) => { + if (bq == item.name) { + tagIdBq = item.tagId; + } + }); + if (cs == "" && jd == "") { + data = { + tagId: tagIdBq, + }; + } else if (cs == "") { + data = { + town: jd, + tagId: tagIdBq, + }; + } else { + data = { + town: jd, + tagId: tagIdBq, + committee: cs, + }; + } + await http + .get(`/api/ggfwyth/ysyzt/getBqRsByTownAndCommittee`, data) + .then((res) => { + if (res.code == 200) { + if (cfJd.value != "") { + xkzCenter.map((item) => { + item.numbers = 0; + res.data.map((items) => { + if (items.committee == item.name) { + item.numbers = items.rs; + } + }); + }); + } + + cs_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_name_arr.value[index]); + }); + cs_number_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_number_name_arr.value[index]); + }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + if (title_jd.value == "") { + } else { + if (sfdd.value) { + if (choose.value.person == "") { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + } else { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs2(item, index); + }); + } + } else { + if (choose.value.person == "") { + addCs(); + } else { + addCs2(); + } + } + } + } + }); +}; +//单点选择区域获取特殊标签 +const getDataBqs3 = async (jd, cs, bq) => { + let data = {}; + let tagIdBq; + tsbq_id_total.value.forEach((item, index) => { + if (bq == item.name) { + tagIdBq = item.tagId; + } + }); + data = { + town: jd, + tagId: tagIdBq, + committee: cs, + }; + + await http + .get(`/api/ggfwyth/ysyzt/getBqRsByTownAndCommittee`, data) + .then((res) => { + if (res.code == 200) { + // if (cfJd.value != "") { + xkzCenter.map((item) => { + item.numbers = 0; + res.data.map((items) => { + if (items.committee == item.name) { + item.numbers = items.rs; + } + }); + }); + + cs_dd_arr.value = [...xuanzhongCs.value]; if (choose.value.person == "") { cs_dd_arr.value.map((item, index) => { DGcreateCs(item, index); }); } else { + console.log(cs_dd_arr.value); cs_dd_arr.value.map((item, index) => { DGcreateCs2(item, index); }); } - }); + } + }); +}; +//点击地图区块进入社区取消await的影响 +const getDataBqs4 = async (jd, cs, bq) => { + let data = {}; + let tagIdBq; + tsbq_id_total.value.forEach((item, index) => { + if (bq == item.name) { + tagIdBq = item.tagId; } }); -}; -//添加选中社区 -const addCsChoose = () => { - chooseCsList.value.map((item, index) => { - sqname.value = item.name; - let fillColor = "blue"; - //地区的坐标范围 - let points = []; - item.point[0].map((p) => points.push(new BMapGL.Point(...p))); - if (points.length) { - //创建面 - cs_choose_arr.value[index] = new BMapGL.Polygon(points, { - strokeColor: fillColor, - strokeWeight: 2, - strokeOpacity: 0.8, - fillColor: fillColor, - fillOpacity: 0.4, - name: item.name, - zIndex: 99, - }); - map.addOverlay(cs_choose_arr.value[index]); - } - }); -}; -//添加未选中社区 -const addCsUnChoose = () => { - unChooseList.value.map((item, index) => { - let fillColor = "RGBA(125, 140, 154, 1)"; - //地区的坐标范围 - let points = []; - item.point[0].map((p) => points.push(new BMapGL.Point(...p))); - if (points.length) { - //创建面 - cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, { - strokeColor: fillColor, - strokeWeight: 2, - strokeOpacity: 0.8, - fillColor: fillColor, - fillOpacity: 0.5, - name: item.name, - zIndex: 99, - }); - map.addOverlay(cs_un_choose_arr.value[index]); - cs_un_choose_arr.value[index].addEventListener("click", () => { - title_choose.value = title_choose.value.slice( - 0, - -(cfCs.value.length + 1) - ); + data = { + town: jd, + tagId: tagIdBq, + }; - cfCs.value = item.name; - title_choose.value = title_choose.value + `>${cfCs.value}`; - - sfdd.value = true; - - cs_dd_arr.value.forEach((item, index) => { - map.removeOverlay(cs_dd_arr.value[index]); - }); - cs_un_choose_arr.value.forEach((item, index) => { - map.removeOverlay(cs_un_choose_arr.value[index]); - }); - cs_choose_arr.value.forEach((item, index) => { - map.removeOverlay(cs_choose_arr.value[index]); - }); - chooseCsList.value.length = 0; - unChooseList.value.length = 0; - cs_dd_arr.value = []; - xuanzhongCs.value = []; - xkzCenter.forEach((a, b) => { - if (a.name == item.name) { - cs_dd_arr.value.push(a); - xuanzhongCs.value.push(a); - } - }); - xkzDk.forEach((itemm, indexx) => { - if (itemm.name == item.name) { - chooseCsList.value.push(itemm); - } else { - unChooseList.value.push(itemm); - } - }); - cs_un_choose_arr.value.forEach((item, index) => { - map.removeOverlay(cs_qk_arr.value[index]); - }); - getDataBqs(cfJd.value, cfCs.value); - getDataBq(cfJd.value, cfCs.value); - getDatas2(cfJd.value, choose.value.person, cfCs.value); - if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" - ) { - // getDataBq(cfJd.value, cfCs.value); - getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false); - } - if (choose.value.person == "") { - cs_dd_arr.value.map((item, index) => { - DGcreateCs(item, index); + http.get(`/api/ggfwyth/ysyzt/getBqRsByTownAndCommittee`, data).then((res) => { + if (res.code == 200) { + if (cfJd.value != "") { + xkzCenter.map((item) => { + item.numbers = 0; + res.data.map((items) => { + if (items.committee == item.name) { + item.numbers = items.rs; + } }); - } else { - setTimeout(() => { + }); + } + + cs_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_name_arr.value[index]); + }); + cs_number_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_number_name_arr.value[index]); + }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + if (title_jd.value == "") { + } else { + if (sfdd.value) { + if (choose.value.person == "") { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + } else { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = [...xuanzhongCs.value]; cs_dd_arr.value.map((item, index) => { - console.log("渲染", item); DGcreateCs2(item, index); }); - }, 300); + } + } else { + if (choose.value.person == "") { + addCs(); + } else { + addCs2(); + } } - addCsChoose(); - addCsUnChoose(); + } + loadingss.value = false; + } + }); +}; +//特殊标签单独获取各个街道人数 +const getDataBqJD = async (bq) => { + let data = {}; + tsbq_id_total.value.forEach((item, index) => { + if (bq == item.name) { + data = { + tagId: item.tagId, + }; + } + }); + await http + .get(`/api/ggfwyth/ysyzt/getBqRsByTownAndCommittee`, data) + .then((res) => { + if (res.code == 200) { + if (res?.data) { + mapTownCount.map((item) => { + item.numbers = 0; + res.data.map((items) => { + if (items.town == item.name) { + item.numbers = items.rs; + } + }); + }); + } + changeRs(bq); + } + }); +}; +//人口，标签切换执行 +const changeRs = (id) => { + choose.value.person = id; + jdm_arr.value.forEach((item, index) => { + map.removeOverlay(jdm_arr.value[index]); + }); + jdm_number_arr.value.forEach((item, index) => { + map.removeOverlay(jdm_number_arr.value[index]); + }); + addJd2(); +}; + +//----------资源要素------------ +const changeys = (name) => { + if (yaosuList.value.includes(name)) { + yaosuList.value = yaosuList.value.filter((ch) => ch !== name); + yaosuIcon.value[name].sj.forEach((item, index) => { + map.removeOverlay(yaosuIcon.value[name].sj[index].overlay); + }); + } else { + yaosuList.value.push(name); + let url; + let img; + let img_map; + let tooltip; + yaosuTotal.value.forEach((item, index) => { + if (item.name == name) { + url = item.url; + img = item.img; + img_map = item.img_map; + tooltip = item.tooltip; + } + }); + if (name == "摄像头" || name == "AED") { + getZyys(url, name, img, img_map, tooltip); + } + if (name == "养老机构") { + getZyys2(name, img, img_map, tooltip); + } + } +}; +//线上接口资源要素 +const getZyys = (url, name, img, img_map, tooltip) => { + http.get(url).then((res) => { + if (res.code == 200) { + yaosuIcon.value[name].sj = res.data; + yaosuIcon.value[name].sj.forEach((item, index) => { + item.img = img; + item.img_map = img_map; + item.overlay = null; + item.center = []; + // item.center.push(Number(item.jd)); + // item.center.push(Number(item.wd)); + switch (name) { + case "摄像头": + item.center = [Number(item.jd), Number(item.wd)]; + break; + case "AED": + let newStr = item.point.replace("，", ","); + item.center = JSON.parse(newStr); + break; + default: + break; + } + + // item.onClick = () => { + // handleItemClick(item, index, name); + // }; + }); + yaosuIcon.value[name].sj.forEach((itemm, indexx) => { + createZyys(itemm, indexx, name, tooltip); }); } }); }; -// 添加地图上的街道名 - -const createCustomOverlayJd = (polygon, indexx) => { - function createLabelDOM() { - var content = document.createElement("div"); - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.alignItems = "center"; - content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - content.style.height = "20px"; - content.style.width = "20px"; - var div = document.createElement("div"); - div.style.color = "#333"; - div.style.whiteSpace = "nowrap"; - div.style.MozUserSelect = "none"; - div.style.display = "flex"; - div.style.justifyContent = "center"; - div.style.alignItems = "center"; - div.style.cursor = "pointer"; - div.setAttribute("name", this.properties.title); - - var title = document.createElement("div"); - title.style.fontSize = "10px"; - title.style.fontWeight = "600"; - title.style.color = "#000000"; - div.appendChild(title); - title.appendChild(document.createTextNode(this.properties.title)); - content.appendChild(div); - return content; +//本地存储资源要素 +const getZyys2 = (name, img, img_map, tooltip) => { + if (name == "养老机构") { + yaosuIcon.value[name].sj = ylCount; + yaosuIcon.value[name].sj.forEach((item, index) => { + item.img = img; + item.img_map = img_map; + item.overlay = null; + }); + yaosuIcon.value[name].sj.forEach((itemm, indexx) => { + createZyys(itemm, indexx, name, tooltip); + }); } - jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { - point: new BMapGL.Point(...polygon.center), - opacity: 0.5, - offsetY: -10, - properties: { - title: polygon.name, - type: "customOverlay", - }, - }); - map.addOverlay(jdm_arr.value[indexx]); }; -// 添加地图上的街道名+(人数,标签) -const createCustomOverlayJd2 = (polygon, indexx) => { + +// 添加资源要素的图标(overlay存放标记点) +const createZyys = (polygon, indexx, name, tooltip) => { function createLabelDOM() { var content = document.createElement("div"); content.style.display = "flex"; @@ -912,375 +2677,497 @@ const createCustomOverlayJd2 = (polygon, indexx) => { content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); content.style.height = "30px"; content.style.width = "30px"; - var div = document.createElement("div"); - div.style.color = "#333"; - div.style.whiteSpace = "nowrap"; - div.style.MozUserSelect = "none"; - div.style.display = "flex"; - div.style.flexDirection = "column"; - div.style.justifyContent = "center"; - div.style.alignItems = "center"; - div.style.cursor = "pointer"; - div.setAttribute("name", this.properties.title); + // content.style.position = "relative"; // 使得提示文字相对于父元素定位 - var title = document.createElement("div"); - title.style.fontSize = "10px"; - title.style.fontWeight = "600"; - title.style.color = "#000000"; - div.appendChild(title); - title.appendChild(document.createTextNode(this.properties.title)); - content.appendChild(div); - var number = document.createElement("div"); - number.style.fontSize = "11px"; - number.style.fontWeight = "600"; - number.style.color = "#FEFF6C"; - number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)"; - div.appendChild(number); - number.appendChild(document.createTextNode(this.properties.number)); - content.appendChild(div); - div.onclick = function () { - let jdCenter = []; - if (polygon.name == "溪口镇") { - title_choose.value = title_choose.value + `>${polygon.name}`; - loadCs(); - addPolygonCountyCs(); - mapTownCount.map((item) => { - if (item.name == "溪口镇") { - jdCenter = item.center; + let img2 = document.createElement("img"); + img2.style.width = "20px"; + img2.style.height = "26px"; + img2.src = this.properties.imgSrc2; + + // 添加 title 属性作为简单的文字提示 + img2.title = polygon[tooltip]; + content.appendChild(img2); + return content; + } + yaosuIcon.value[name].sj[indexx].overlay = new BMapGL.CustomOverlay( + createLabelDOM, + { + point: new BMapGL.Point(...polygon.center), + opacity: 0.5, + // offsetY: -10, + offsetX: 10, + offsetY: -15, + properties: { + imgSrc2: polygon.img_map, + type: "customOverlay", + }, + } + ); + map.addOverlay(yaosuIcon.value[name].sj[indexx].overlay); + yaosuIcon.value[name].sj[indexx].overlay.addEventListener("click", () => { + switch (name) { + case "摄像头": + sxtShow.deviceCode = polygon.sbbm; + sxtShow.name = polygon.sbmc; + getCameraUrl(); + break; + case "AED": + break; + default: + break; + } + }); +}; + +//获取摄像头地址 +const getCameraUrl = () => { + // camera.deviceCode = dataMyTag.camera.sbbm; + // sxtShow.deviceCode = "3KSCP274757F2JU"; + http + .get(`/api/ggfwyth/ysyzt/getPlayAddress?deviceCode=${sxtShow.deviceCode}`) + .then((res) => { + if (res.code == 200) { + sxtShow.hlsUriSsl = res.data.hlsUriSsl; + sxtShow.show = true; + } else { + ElMessage.warning({ + message: res.message, + }); + } + }); +}; +//----------资源要素------------ +//点击街道，回到街道 +const to_jd = async (item_name) => { + loadingss.value = true; + clear(); + title_jd.value = item_name; + map.removeEventListener("click", markera); + if (currentMarker !== null) { + map.removeOverlay(currentMarker); + } + cfJd.value = item_name; + let jdCenter = []; + BMAP(); + loadCs(item_name); + addPolygonCountyCs(); + mapTownCount.map((itemm) => { + if (itemm.name == item_name) { + jdCenter = itemm.center; + } + }); + goMapCenter(jdCenter, 13); + getDataBq(cfJd.value, ""); + if (choose.value.person == "") { + await getDatas(cfJd.value, ""); + loadingss.value = false; + } + if ( + // choose.value.person == "残疾人" || + // choose.value.person == "低边" || + // choose.value.person == "低保" || + // choose.value.person == "高血压" || + // choose.value.person == "糖尿病" || + // choose.value.person == "退役军人" || + // choose.value.person == "困境儿童" || + // choose.value.person == "孤儿" || + // choose.value.person == "特困" || + // choose.value.person == "精神病人" + tsbq_pp.value.includes(choose.value.person) + ) { + await getDatas(cfJd.value, "", false); + getDataBqs4(cfJd.value, cfCs.value, choose.value.person); + } else if (choose.value.person != "") { + if (choose.value.person == "9999") { + await getDatas(cfJd.value, ""); + loadingss.value = false; + } else { + await getDatas(cfJd.value, choose.value.person); + loadingss.value = false; + } + } +}; +//详情 +const open_detail = () => { + let age = ""; + let tagId; + if (choose.value.person == "9999") { + age = ""; + dialogShow.value = true; + person_detail(age); + } else if (choose.value.person == "6666") { + age = ""; + dialogShow.value = true; + person_detail2(); + console.log("详情", choose.value.person); + } else if ( + // choose.value.person == "残疾人" || + // choose.value.person == "低边" || + // choose.value.person == "低保" || + // choose.value.person == "高血压" || + // choose.value.person == "糖尿病" || + // choose.value.person == "退役军人" || + // choose.value.person == "困境儿童" || + // choose.value.person == "孤儿" || + // choose.value.person == "特困" || + // choose.value.person == "精神病人" + tsbq_pp.value.includes(choose.value.person) + ) { + age = ""; + tsbq_id_total.value.forEach((item, index) => { + if (choose.value.person == item.name) { + tagId = item.tagId; + } + }); + dialogShow.value = true; + person_detail(age, tagId); + } else { + dialogShow.value = true; + age = choose.value.person; + person_detail(age); + } +}; +const close = () => { + cfCsZs.value = ""; + dialogShow.value = false; + pagination.total = 100; + pagination.currentPage = 1; + tableType.data = []; +}; +// 摄像头关闭 +const close1 = () => { + sxtShow.show = false; +}; +const onsxt = () => { + console.log("sxt"); +}; +//表格分页 +const handlePagination = (current) => { + pagination.currentPage = current; + let age = ""; + let tagId; + if (choose.value.person == "9999") { + age = ""; + person_detail(age); + } else if (choose.value.person == "6666") { + age = ""; + person_detail2(); + } else if ( + // choose.value.person == "残疾人" || + // choose.value.person == "低边" || + // choose.value.person == "低保" || + // choose.value.person == "高血压" || + // choose.value.person == "糖尿病" || + // choose.value.person == "退役军人" || + // choose.value.person == "困境儿童" || + // choose.value.person == "孤儿" || + // choose.value.person == "特困" || + // choose.value.person == "精神病人" + tsbq_pp.value.includes(choose.value.person) + ) { + age = ""; + tsbq_id_total.value.forEach((item, index) => { + if (choose.value.person == item.name) { + tagId = item.tagId; + } + }); + person_detail(age, tagId); + } else { + age = choose.value.person; + person_detail(age); + } +}; + +// 打开摄像头 +const openCamera = () => { + sxtShow.show = true; +}; +//打开人物详情页面 +const openMessage = (e) => { + message.value = e; + openD.value = true; + reset_font2(); + //监听实现人物详情动态缩放 + window.addEventListener("resize", reset_font2); +}; +//关闭人物详情页面 +const closeDetail = () => { + openD.value = false; + window.removeEventListener("resize", reset_font2); +}; +//获取人口列表接口 +const person_detail = (age, tagId) => { + http + .get( + `/api/ggfwyth/ysyzt/getRyJbxxList?page=${pagination.currentPage}&size=${ + pagination.pageSize + }&age=${age || ""}&committee=${cfCsZs.value || ""}&town=${ + cfJd.value || "" + }&tagId=${tagId || ""}` + ) + .then((res) => { + if (res.code == 200) { + tableType.data = res.data; + res.data.forEach((item, index) => { + item.index = + index + 1 + (pagination.currentPage - 1) * pagination.pageSize; + }); + pagination.total = res.count; + } + }); +}; +//获取死亡列表 +const person_detail2 = () => { + http + .get( + `/api/ggfwyth/ysyzt/getRyJbxxList?page=${pagination.currentPage}&size=${ + pagination.pageSize + }&committee=${cfCsZs.value || ""}&town=${cfJd.value || ""}&sfsw=1` + ) + .then((res) => { + if (res.code == 200) { + tableType.data = res.data; + res.data.forEach((item, index) => { + item.index = + index + 1 + (pagination.currentPage - 1) * pagination.pageSize; + }); + pagination.total = res.count; + } + }); +}; +//--------公共服务圈----------- +//获取服务圈村社数据 +const getFwq = () => { + http.get(`/api/ggfwyth/ysyzt/listXzjdAndCsq`).then((res) => { + if (res.code == 200) { + res.data.forEach((item, index) => { + jbfwqTotal.value.push({ + name: item.xzjd, + child: [], + }); + item.jcs.forEach((item2) => { + // console.log(item2.jc,6666); + jbfwqTotal.value[index].child.push({ + name: item2.jc, + jc: item2.jc, + }); + }); + }); + let arr = []; + jbfwqPx.forEach((item, index) => { + jbfwqTotal.value.forEach((item2, index2) => { + if (item == item2.name) { + arr.push(item2); } }); - addCs2(); - goMapCenter(jdCenter, 14); - } - }; - return content; - } - let num = ""; - if (choose.value.person == "6666") { - // console.log(1); - num = "swrs"; - } else if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" - ) { - num = "numbers"; + }); + jbfwqTotal.value = arr; + } + }); +}; +//点击服务圈村 +const changeFwq = async (id, name, names) => { + if (choose.value.fwq == id) { + choose.value.fwq = null; + csh(); //地图初始化 + addPolygonCounty(); //添加地区 + fwq_list_arr.value.forEach((item, index) => { + map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 + }); + fwq_list_arr.value = []; + map.removeOverlay(circle); // 清空服务圈 圆 + circle = null; } else { - num = "number"; + csh(); + await getServiceCircle(names, name); + if (fwqList.value.length !== 0) { + fwq_list_arr.value.forEach((item, index) => { + map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 + }); + map.removeOverlay(circle); // 清空服务圈 圆 + circle = null; + fwq_list_arr.value = []; + choose.value.fwq = id; + map.clearOverlays(); //清空地图上所有的覆盖物 + addggfwq(); //创建公共服务圈 + setTimeout(() => { + goMapCenter( + [data.fwqCoordinates1, data.fwqCoordinates2], + data.zoomLevel + ); //中心点缩放 + }, 500); + } else { + ElMessage.warning({ + message: "无数据", + }); + } } - jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { - point: new BMapGL.Point(...polygon.center), - opacity: 0.5, - offsetY: 0, - properties: { - title: polygon.name, - number: polygon[`${num}`], - type: "customOverlay", - }, - }); - map.addOverlay(jdm_number_arr.value[indexx]); }; -//创建村社 -const addCs = () => { - xkzCenter.map((item, index) => { - createCs(item, index); - }); +// 服务圈数据 +const getServiceCircle = async (communityName, townName) => { + try { + const response = await http.get( + `/api/ggfwyth/ysyzt/zyysxx?jc=${communityName}&xzjd=${townName}` + ); + if (response.code === 200) { + updateFwqList(response.data, townName, communityName); + } + } catch (error) { + console.error("Error fetching data:", error); + } }; -//创建村社(人数,标签) -const addCs2 = () => { - xkzCenter.map((item, index) => { - createCs2(item, index); +// 计算中心点 +const calculateCenterPoint = (coordinates) => { + if (coordinates.length === 0) { + return null; + } + + let x = 0.0; + let y = 0.0; + let z = 0.0; + + coordinates.forEach((coord) => { + const lat = (parseFloat(coord[1]) * Math.PI) / 180; + const lon = (parseFloat(coord[0]) * Math.PI) / 180; + + x += Math.cos(lat) * Math.cos(lon); + y += Math.cos(lat) * Math.sin(lon); + z += Math.sin(lat); }); + + const total = coordinates.length; + x /= total; + y /= total; + z /= total; + + const centralLon = Math.atan2(y, x); + const centralSquareRoot = Math.sqrt(x * x + y * y); + const centralLat = Math.atan2(z, centralSquareRoot); + + return [ + ((centralLon * 180) / Math.PI).toFixed(6), // 经度 + ((centralLat * 180) / Math.PI).toFixed(6), // 纬度 + ]; }; -//添加村社+(人数,标签) -const createCs2 = (polygon, indexx) => { - function createLabelDOM() { - var content = document.createElement("div"); - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.alignItems = "center"; - content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - content.style.height = "60px"; - content.style.width = "60px"; - var div = document.createElement("div"); - div.style.color = "#333"; - div.style.whiteSpace = "nowrap"; - div.style.MozUserSelect = "none"; - div.style.display = "flex"; - div.style.justifyContent = "space-between"; - div.style.alignItems = "center"; - div.style.cursor = "pointer"; - div.style.padding = "5px 10px"; - div.style.minWidth = "90px"; - div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; - div.style.transform = "translateY(50px)"; - div.setAttribute("name", this.properties.title); - - var title = document.createElement("div"); - title.style.fontSize = "10px"; - title.style.fontWeight = "600"; - title.style.color = "#000000"; - div.appendChild(title); - title.appendChild(document.createTextNode(this.properties.title)); - content.appendChild(div); - - var number = document.createElement("div"); - number.style.fontSize = "10px"; - number.style.fontWeight = "600"; - number.style.color = "black"; - div.appendChild(number); - number.appendChild(document.createTextNode(this.properties.number)); - // content.appendChild(div); - let img2 = document.createElement("img"); - img2.style.width = "20px"; - img2.style.height = "26px"; - img2.src = this.properties.imgSrc2; - - content.appendChild(div); - content.appendChild(img2); - return content; - } - let num = ""; - if (choose.value.person == "6666") { - num = "swrs"; - } else if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" - ) { - num = "numbers"; - } else { - num = "number"; - } - cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { - point: new BMapGL.Point(...polygon.center), - opacity: 0.5, - offsetY: 0, - properties: { - title: polygon.name, - number: polygon[`${num}`], - imgSrc2: dwd, - type: "customOverlay", - }, +const calculateAverage = (coordinates) => { + // const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字 + const numericCoordinates = coordinates.map((coord) => { + // 使用正则表达式去除非数字字符（保留小数点和负号） + const cleanedCoord = coord.replace(/[^0-9.-]/g, ""); + return Number(cleanedCoord); // 将清理后的字符串转换为数字 }); - map.addOverlay(cs_number_name_arr.value[indexx]); + const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和 + const average = sum / numericCoordinates.length; // 计算平均值 + // console.log(average, "计算平均值"); + + return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字 }; -//添加村社 -const createCs = (polygon, indexx) => { - function createLabelDOM() { - var content = document.createElement("div"); - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.alignItems = "center"; - content.style.height = "60px"; - content.style.width = "60px"; - content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - - var div = document.createElement("div"); - div.style.color = "#333"; - div.style.whiteSpace = "nowrap"; - div.style.MozUserSelect = "none"; - div.style.display = "flex"; - div.style.justifyContent = "center"; - div.style.alignItems = "center"; - div.style.cursor = "pointer"; - div.style.padding = "5px 10px"; - div.style.minWidth = "60px"; - div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; - div.style.transform = "translateY(50px)"; - div.setAttribute("name", this.properties.title); - - var title = document.createElement("div"); - title.style.fontSize = "10px"; - title.style.fontWeight = "600"; - title.style.color = "#000000"; - div.appendChild(title); - title.appendChild(document.createTextNode(this.properties.title)); - content.appendChild(div); - let img2 = document.createElement("img"); - img2.style.width = "20px"; - img2.style.height = "26px"; - img2.src = this.properties.imgSrc2; - - content.appendChild(div); - content.appendChild(img2); - return content; - } - cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { - point: new BMapGL.Point(...polygon.center), - opacity: 0.5, - offsetY: 0, - properties: { - title: polygon.name, - imgSrc2: dwd, - type: "customOverlay", - }, - }); - map.addOverlay(cs_name_arr.value[indexx]); -}; -//添加单个村社 -const DGcreateCs = (polygon, indexx) => { - function createLabelDOM() { - var content = document.createElement("div"); - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.alignItems = "center"; - content.style.height = "60px"; - content.style.width = "60px"; - content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - - var div = document.createElement("div"); - div.style.color = "#333"; - div.style.whiteSpace = "nowrap"; - div.style.MozUserSelect = "none"; - div.style.display = "flex"; - div.style.justifyContent = "center"; - div.style.alignItems = "center"; - div.style.cursor = "pointer"; - div.style.padding = "5px 10px"; - div.style.minWidth = "60px"; - div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; - div.style.transform = "translateY(50px)"; - div.setAttribute("name", this.properties.title); - - var title = document.createElement("div"); - title.style.fontSize = "10px"; - title.style.fontWeight = "600"; - title.style.color = "#000000"; - div.appendChild(title); - title.appendChild(document.createTextNode(this.properties.title)); - content.appendChild(div); - let img2 = document.createElement("img"); - img2.style.width = "20px"; - img2.style.height = "26px"; - img2.src = this.properties.imgSrc2; - - content.appendChild(div); - content.appendChild(img2); - return content; - } - cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { - point: new BMapGL.Point(...polygon.center), - opacity: 0.5, - offsetY: 0, - properties: { - title: polygon.name, - imgSrc2: dwd, - type: "customOverlay", - }, - }); - map.addOverlay(cs_dd_arr.value[indexx]); -}; -const DGcreateCs2 = (polygon, indexx) => { - console.log(choose.value.person, "单个村社", polygon); - console.log("单个村社", polygon.name); - console.log("单个村社", polygon.number); - console.log("单个村社", polygon.swrs); - function createLabelDOM() { - var content = document.createElement("div"); - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.alignItems = "center"; - content.style.height = "60px"; - content.style.width = "60px"; - content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - - var div = document.createElement("div"); - div.style.color = "#333"; - div.style.whiteSpace = "nowrap"; - div.style.MozUserSelect = "none"; - div.style.display = "flex"; - div.style.justifyContent = "space-between"; - div.style.alignItems = "center"; - div.style.cursor = "pointer"; - div.style.padding = "5px 10px"; - div.style.minWidth = "90px"; - div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; - div.style.transform = "translateY(50px)"; - div.setAttribute("name", this.properties.title); - - var title = document.createElement("div"); - title.style.fontSize = "10px"; - title.style.fontWeight = "600"; - title.style.color = "#000000"; - div.appendChild(title); - title.appendChild(document.createTextNode(this.properties.title)); - content.appendChild(div); - - var number = document.createElement("div"); - number.style.fontSize = "10px"; - number.style.fontWeight = "600"; - number.style.color = "black"; - div.appendChild(number); - number.appendChild(document.createTextNode(this.properties.number)); - content.appendChild(div); - let img2 = document.createElement("img"); - img2.style.width = "20px"; - img2.style.height = "26px"; - img2.src = this.properties.imgSrc2; - - content.appendChild(div); - content.appendChild(img2); - return content; - } - let num = ""; - if (choose.value.person == "6666") { - num = "swrs"; - } else if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" - ) { - num = "numbers"; - } else { - num = "number"; - } - cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { - point: new BMapGL.Point(...polygon.center), - opacity: 0.5, - offsetY: 0, - properties: { - title: polygon.name, - number: polygon[`${num}`], - imgSrc2: dwd, - type: "customOverlay", - }, - }); - map.addOverlay(cs_dd_arr.value[indexx]); +// 根据最大距离计算合适的缩放级别 +const calculateZoomLevel = (maxDistance) => { + if (maxDistance < 151) return 18; + if (maxDistance < 400) return 17; + if (maxDistance < 600) return 17.5; + if (maxDistance < 1000) return 16; + if (maxDistance < 2000) return 15; + if (maxDistance < 3000) return 14; + if (maxDistance < 5000) return 13; + return 13; }; //创建公共服务圈 const addggfwq = () => { if (fwqList.value.length !== 0) { - data.fwqCoordinates1 = []; - data.fwqCoordinates2 = []; + data.fwqCoordinates = []; + // data.fwqCoordinates1 = []; + // data.fwqCoordinates2 = []; fwqList.value.map((item, index) => { - data.fwqCoordinates1.push(item.point[0]); - data.fwqCoordinates2.push(item.point[1]); + data.fwqCoordinates.push(item.point); + // data.fwqCoordinates1.push(item.point[0]); + // data.fwqCoordinates2.push(item.point[1]); createCustomOverlay(item, index); }); - function calculateAverage(coordinates) { - const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字 - const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和 - const average = sum / numericCoordinates.length; // 计算平均值 - return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字 + + const centerPoint = calculateCenterPoint(data.fwqCoordinates); + data.fwqCoordinates1 = centerPoint[0]; + data.fwqCoordinates2 = centerPoint[1]; + + // data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1); + // data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2); + console.log(centerPoint); // 输出中心点的经纬度 + // console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2 ); + + let distances = []; // 初始化距离数组 + fwqList.value.forEach((item) => { + // let distance = algorithm( + // (item.point[0] = Number(item.point[0].replace(/[^0-9.-]/g, ""))), + // (item.point[1] = Number(item.point[1].replace(/[^0-9.-]/g, ""))), + // data.fwqCoordinates1, + // data.fwqCoordinates2 + // ); + let distance = algorithm( + Number(item.point[0].replace(/[^0-9.-]/g, "")), + Number(item.point[1].replace(/[^0-9.-]/g, "")), + Number(centerPoint[0]), + Number(centerPoint[1]) + ); + distances.push(distance); // 将距离存入数组 + }); + let maxDistance = Math.max(...distances); // 找到最大距离 + maxDistance = Math.ceil(maxDistance * 2.5); // 向上取整 + if (maxDistance < 100) { + maxDistance = 150; // 如果小于 100，则赋值为 150 } - data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1); - data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2); - drawACircle(); + data.zoomLevel = calculateZoomLevel(maxDistance); + console.log("最大距离:", maxDistance, data.zoomLevel); + drawACircle(maxDistance); } else { - ElMessage.warning("无数据"); + ElMessage.warning({ + message: "无数据", + }); + } +}; +//计算两点之间直线距离 +const algorithm = (point1, point2, point3, point4) => { + // console.log(point1, point2, point3, point4, 5555); + let [x1, y1] = [point1, point2]; + let [x2, y2] = [point3, point4]; + let Lat1 = rad(x1); // 纬度 + let Lat2 = rad(x2); + let a = Lat1 - Lat2; // 两点纬度之差 + let b = rad(y1) - rad(y2); // 经度之差 + let s = + 2 * + Math.asin( + Math.sqrt( + Math.pow(Math.sin(a / 2), 2) + + Math.cos(Lat1) * Math.cos(Lat2) * Math.pow(Math.sin(b / 2), 2) + ) + ); + // 计算两点距离的公式 + s = s * 6378137.0; // 弧长等于弧度乘地球半径（半径为米） + s = Math.round(s * 10000) / 10000; // 精确距离的数值 + return s; +}; + +// 角度转换成弧度 +const rad = (d) => { + return (d * Math.PI) / 180.0; +}; + +// 添加服务圈 +const drawACircle = (maxDistance) => { + // console.log("经纬度1", data.fwqCoordinates1, data.fwqCoordinates2); + if (!circle) { + var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2); + circle = new BMapGL.Circle(point, maxDistance, { + strokeColor: "yellow", + strokeWeight: 2, + strokeOpacity: 0.8, + fillOpacity: 0.1, + strokeStyle: "dashed", + zIndex: 10, + // fillColor: "yellow", + }); + map.addOverlay(circle); } }; // 添加公共服务圈的图标 @@ -1362,877 +3249,16 @@ const createCustomOverlay = (polygon, indexx) => { // }); map.addOverlay(fwq_list_arr.value[indexx]); }; - -//地图中点 -const goMapCenter = (point, zoom) => { - map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom); -}; -const removeAllPolygon = (e) => { - let allOverlay = map.getOverlays(); - for (let i = 0; i < allOverlay.length; i++) { - map.removeOverlay(allOverlay[i]); - } - // if (e == "fwq") { - // addPolygonCounty(); - // nextTick(() => { - // addJd(); - // }); - // } else { - // addPolygonCounty(); - // nextTick(() => { - // addJd2(); - // }); - // } -}; -//选项设置 -//选中 - -const choose = ref({ - person: "", - bq: 9999, - fwq: 9999, - yaosu: 9999, -}); -const changeRs = (id) => { - if (choose.value.person == id) { - choose.value.person = ""; - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - console.log(1); - addJd(); - } else { - console.log(2); - choose.value.person = id; - jdm_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_arr.value[index]); - }); - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - addJd2(); - } -}; -const changeRs2 = (id) => { - if (choose.value.person == id) { - console.log("测试"); - choose.value.person = ""; - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - addJd(); - } else { - choose.value.person = id; - jdm_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_arr.value[index]); - }); - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - addJd2(); - } -}; -const changebq = (id) => { - if (choose.value.person == id) { - choose.value.person = ""; - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - jdm_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_arr.value[index]); - }); - addJd(); - } else { - choose.value.person = id; - jdm_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_arr.value[index]); - }); - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - // addJd2(); - addJd(); - } - // choose.value.person = id; -}; -//点击服务圈村 -const changeFwq = async (id, name, names) => { - console.log("fwqid", choose.value.fwq, id); - console.log(fwqList.value, "无"); - if (choose.value.fwq == id) { - choose.value.fwq = null; - csh(); //地图初始化 - addPolygonCounty(); //添加地区 - fwq_list_arr.value.forEach((item, index) => { - map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 - }); - fwq_list_arr.value = []; - map.removeOverlay(circle); // 清空服务圈 圆 - circle = null; - // drawACircle("hide"); //隐藏服务圈 圆 - } else { - await getServiceCircle(names, name); - if (fwqList.value.length !== 0) { - fwq_list_arr.value.forEach((item, index) => { - map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 - }); - map.removeOverlay(circle); // 清空服务圈 圆 - circle = null; - fwq_list_arr.value = []; - choose.value.fwq = id; - map.clearOverlays(); //清空地图上所有的覆盖物 - choose.value.person = ""; - addggfwq(); //创建公共服务圈 - setTimeout(() => { - goMapCenter([data.fwqCoordinates1, data.fwqCoordinates2], 16); //中心点缩放 - }, 500); - } else { - ElMessage.warning("无数据"); - } - } -}; - -const changeys = (id) => { - choose.value.yaosu = id; -}; -//人口数 -const personTotal = ref([ - { - id: 0, - name: "总人口", - value: "1724114", - ages: "总人口", - age: "1000", - }, - { - id: 1, - name: "1岁以下", - value: "26737", - ages: "1岁以下", - age: "1000", - }, - { - id: 2, - name: "1岁", - value: "26737", - ages: "1岁", - age: "1000", - }, - { - id: 3, - name: "2岁", - value: "26737", - ages: "2岁", - age: "1000", - }, - { - id: 4, - name: "3岁", - value: "26737", - ages: "3岁", - age: "1000", - }, - - { - id: 5, - name: "4岁", - value: "26737", - ages: "4岁", - age: "1000", - }, - { - id: 6, - name: "5岁", - value: "26737", - ages: "5岁", - age: "1000", - }, - { - id: 7, - name: "6岁", - value: "26737", - ages: "6岁", - age: "1000", - }, - { - id: 8, - name: "7岁", - value: "26737", - ages: "7岁", - age: "1000", - }, - { - id: 9, - name: "8岁", - value: "26737", - ages: "8岁", - age: "1000", - }, - { - id: 10, - name: "9岁", - value: "26737", - ages: "9岁", - age: "1000", - }, - { - id: 11, - name: "10岁", - value: "26737", - ages: "10岁", - age: "1000", - }, - { - id: 12, - name: "11岁", - value: "26737", - ages: "11岁", - age: "1000", - }, - { - id: 13, - name: "12岁", - value: "26737", - ages: "12岁", - age: "1000", - }, - { - id: 14, - name: "死亡总人口", - value: "5650", - ages: "死亡总人口", - age: "1000", - }, -]); -const ageLess0 = computed(() => { - return function (item) { - if (item == "0岁") { - return "小于1岁"; - } else { - return item; - } - }; -}); -//特殊标签 -const tsbqTotal = ref([ - { - id: 10, - name: "退役军人", - value: "26737", - }, - { - id: 20, - name: "留守", - value: "26737", - }, - { - id: 30, - name: "困境儿童", - value: "26737", - }, - { - id: 40, - name: "特困", - value: "26737", - }, - { - id: 0, - name: "低边", - value: "26737", - }, - { - id: 1, - name: "低保", - value: "26737", - }, - { - id: 2, - name: "高血压", - value: "26737", - }, - { - id: 3, - name: "糖尿病", - value: "26737", - }, - { - id: 4, - name: "残疾人", - value: "26737", - }, -]); - -//基本公共服务圈 -const jbfwqTotal = ref([ - { - id: 0, - name: "东华街道", - child: [ - { - id: 100, - name: "上圩头村", - }, - { - id: 200, - name: "官村", - }, - { - id: 300, - name: "下杨", - }, - { - id: 400, - name: "灵江社区", - }, - { - id: 500, - name: "文成社区", - }, - { - id: 600, - name: "子鸣社区", - }, - ], - }, - { - id: 1, - name: "社阳乡", - child: [ - { - id: 11, - name: "社阳村", - }, - ], - }, - { - id: 2, - name: "小南海镇", - child: [ - { - id: 21, - name: "茶圩里村", - }, - { - id: 22, - name: "团石村", - }, - { - id: 23, - name: "箬塘", - }, - ], - }, - { - id: 3, - name: "庙下乡", - child: [ - { - id: 31, - name: "庙下村", - }, - ], - }, - { - id: 4, - name: "溪口镇", - child: [ - { - id: 41, - name: "新溪社区", - center: [119.1845892, 28.8540481], - fwqList: [ - // { - // name: "溪口幼儿园", - // point: [119.1856806, 28.8509359], - // bgColor: "#00b050", - // img: fwqbg1, - // img2: b2, - // x: 33, - // y: 0, - // textColor: "#fff", - // padding: "4px 8px 10px", - // }, - // { - // name: "衢州学院附属幼儿园", - // point: [119.182056, 28.8566857], - // bgColor: "#00b050", - // img: fwqbg1, - // img2: b2, - // x: 55, - // y: 0, - // textColor: "#fff", - // padding: "4px 8px 10px", - // }, - // { - // name: "溪口中银小学", - // point: [119.1845353, 28.8584533], - // bgColor: "#00b050", - // img: fwqbg1, - // img2: b2, - // x: 38, - // y: 0, - // textColor: "#fff", - // padding: "4px 8px 10px", - // }, - // { - // name: "溪口初中", - // point: [119.180978, 28.8525691], - // bgColor: "#00b050", - // img: fwqbg1, - // img2: b2, - // x: 33, - // y: 0, - // textColor: "#fff", - // padding: "4px 8px 10px", - // }, - // { - // name: "居家养老中心", - // point: [119.186287, 28.8491049], - // bgColor: "#f4c243", - // img: fwqbg5, - // img2: b1, - // x: 38, - // y: 0, - // textColor: "#fff", - // padding: "4px 8px 10px", - // }, - // { - // name: "共享食堂", - // point: [119.184706, 28.8563179], - // bgColor: "#f4c243", - // img: fwqbg5, - // img2: b1, - // x: 33, - // y: 0, - // textColor: "#fff", - // padding: "4px 8px 10px", - // }, - // { - // name: "老年活动中心", - // point: [119.1839065, 28.8566106], - // bgColor: "#f4c243", - // img: fwqbg5, - // img2: b1, - // x: 38, - // y: 0, - // textColor: "#fff", - // padding: "4px 8px 10px", - // }, - // { - // name: "残疾人之家", - // point: [119.1862825, 28.8491207], - // bgColor: "#f4c243", - // img: fwqbg5, - // img2: b1, - // x: 35, - // y: 0, - // textColor: "#fff", - // padding: "4px 8px 10px", - // }, - // { - // name: "智慧篮球场", - // point: [119.1839873, 28.8560886], - // bgColor: "#00b0f0", - // img: fwqbg2, - // img2: b3, - // x: 34, - // y: 50, - // textColor: "#fff", - // padding: "8px 8px 2px", - // }, - // { - // name: "慢行步道", - // point: [119.1843107, 28.8510743], - // bgColor: "#00b0f0", - // img: fwqbg2, - // img2: b3, - // x: 26, - // y: 50, - // textColor: "#fff", - // padding: "8px 8px 2px", - // }, - // { - // name: "文化礼堂", - // point: [119.1845532, 28.8562072], - // bgColor: "#a1ce63", - // img: fwqbg6, - // img2: b4, - // x: 33, - // y: 0, - // textColor: "#79B72B", - // padding: "4px 8px 10px", - // }, - // { - // name: "综合文化站", - // point: [119.1845982, 28.8482348], - // bgColor: "#a1ce63", - // img: fwqbg6, - // img2: b4, - // x: 35, - // y: 0, - // textColor: "#79B72B", - // padding: "4px 8px 10px", - // }, - // { - // name: "共享菜园", - // point: [119.1834393, 28.8559858], - // bgColor: "#a1ce63", - // img: fwqbg6, - // img2: b4, - // x: 33, - // y: 0, - // textColor: "#79B72B", - // padding: "4px 8px 2px", - // }, - // { - // name: "零工市场", - // point: [119.1811487, 28.8614348], - // bgColor: "#a1ce63", - // img: fwqbg6, - // img2: b4, - // x: 33, - // y: 0, - // textColor: "#79B72B", - // padding: "4px 8px 10px", - // }, - // { - // name: "溪口中心医院", - // point: [119.1839334, 28.8516437], - // bgColor: "#0070c0", - // img: fwqbg3, - // img2: b5, - // x: 10, - // y: 50, - // textColor: "#fff", - // padding: "8px 8px 2px", - // }, - // { - // name: "溪口菜市场", - // point: [119.1848317, 28.8544673], - // bgColor: "#184e32", - // img: fwqbg4, - // img2: b6, - // x: -24, - // y: 50, - // textColor: "#fff", - // padding: "8px 8px 2px", - // }, - // { - // name: "大型超市", - // point: [119.1845892, 28.8540481], - // bgColor: "#184e32", - // img: fwqbg4, - // img2: b6, - // x: -24, - // y: 50, - // textColor: "#fff", - // padding: "8px 8px 2px", - // }, - // { - // name: "智慧停车场", - // point: [119.1865654, 28.8555824], - // bgColor: "#184e32", - // img: fwqbg4, - // img2: b6, - // x: -28, - // y: 50, - // textColor: "#fff", - // padding: "8px 8px 2px", - // }, - // { - // name: "溪口镇便民服务中心", - // point: [119.1838436, 28.8565473], - // bgColor: "#184e32", - // img: fwqbg4, - // img2: b6, - // x: -40, - // y: 50, - // textColor: "#fff", - // padding: "8px 8px 2px", - // }, - ], - }, - { - id: 42, - name: "石角村", - }, - { - id: 43, - name: "红罗村", - }, - ], - }, - { - id: 5, - name: "罗家乡", - child: [ - { - id: 51, - name: "罗家村", - }, - ], - }, - { - id: 6, - name: "模环乡", - child: [ - { - id: 61, - name: "模环村", - }, - { - id: 62, - name: "金星社区", - }, - ], - }, - { - id: 7, - name: "横山镇", - child: [ - { - id: 71, - name: "志棠村", - }, - { - id: 72, - name: "横山集镇", - }, - { - id: 73, - name: "后徐", - }, - ], - }, - { - id: 8, - name: "石佛乡", - child: [ - { - id: 81, - name: "三和村", - }, - { - id: 82, - name: "石佛村", - }, - { - id: 83, - name: "三门源村", - }, - ], - }, - { - id: 9, - name: "詹家镇", - child: [ - { - id: 91, - name: "芝江", - }, - { - id: 92, - name: "马叶", - }, - { - id: 93, - name: "詹家", - }, - ], - }, - { - id: 10, - name: "龙洲街道", - child: [ - { - id: 101, - name: "官潭村", - }, - { - id: 102, - name: "田铺村", - }, - { - id: 103, - name: "半爿月村", - }, - { - id: 104, - name: "寺后村", - }, - { - id: 105, - name: "清廉社区", - }, - { - id: 106, - name: "莲湖社区", - }, - { - id: 107, - name: "河西街社区", - }, - { - id: 108, - name: "阳光社区", - }, - { - id: 109, - name: "翠光社区", - }, - ], - }, - { - id: 11, - name: "湖镇镇", - child: [ - { - id: 111, - name: "新光村", - }, - { - id: 112, - name: "七都村", - }, - { - id: 113, - name: "下库村", - }, - { - id: 114, - name: "下田畈村", - }, - ], - }, - { - id: 12, - name: "塔石镇", - child: [ - { - id: 121, - name: "塔石", - }, - { - id: 122, - name: "泽随", - }, - { - id: 123, - name: "雅村", - }, - ], - }, - { - id: 13, - name: "沐尘畲族乡", - child: [ - { - id: 131, - name: "沐尘村", - }, - ], - }, - { - id: 14, - name: "大街乡", - child: [ - { - id: 141, - name: "大街村", - }, - ], - }, -]); //存放地图上服务圈数据 -const fwqList = ref([]); -//资源要素 -const yaosuTotal = ref([ - { - id: 0, - name: "体育场所", - img: j0, - wz: false, - }, - - { - id: 1, - name: "幼儿园", - img: j1, - wz: false, - }, - { - id: 2, - name: "小学", - img: j2, - wz: false, - }, - { - id: 3, - name: "初中", - img: j3, - wz: false, - }, - { - id: 4, - name: "高中", - img: j4, - wz: false, - }, - { - id: 5, - name: "医院", - img: j5, - wz: false, - }, - { - id: 6, - name: "南孔书院", - img: j6, - wz: false, - }, - { - id: 7, - name: "养老机构", - img: j7, - wz: false, - }, - { - id: 8, - name: "汽车充电桩", - img: j8, - wz: true, - }, - { - id: 9, - name: "卫生服务中心", - img: j9, - wz: true, - }, - { - id: 10, - name: "AED", - img: j10, - wz: true, - }, -]); -const buten = async (item) => { - getData(item.id, item.age); - getDatas("溪口镇", item.age); -}; -const buten2 = async (item) => { - // getDataBq(item.id, item.age); - // getDatas("溪口镇", item.age); - // map.removeOverlay(marker1); - getDataBqs(cfJd.value, cfCs.value, item.id); -}; const updateFwqList = (data, townName, communityName) => { + // console.log(data, townName, communityName,'服务器数据'); let updatedFwqList = []; jbfwqTotal.value.forEach((town) => { if (town.name === townName) { - town.child.forEach((community) => { + town.child.forEach((community, index) => { if (community.name === communityName) { updatedFwqList = data .filter( - (item) => item.xzjd === townName && item.csq === communityName + (item) => item.xzjd === townName && item.jc === communityName ) .map((item) => ({ x: 53, @@ -2253,400 +3279,768 @@ const updateFwqList = (data, townName, communityName) => { fwqList.value = updatedFwqList; // console.log(jbfwqTotal.value[4].child[0], "乡镇"); }; -const getServiceCircle = async (communityName, townName) => { - try { - const response = await http.get( - `/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}` - ); - if (response.code === 200) { - updateFwqList(response.data, townName, communityName); - } - } catch (error) { - console.error("Error fetching data:", error); - } -}; +//------------------------------ +//-------乡镇街道级别--------- +//加载乡镇信息 +const loadTown = () => { + console.log(); -//获取人口数 -const getData = async (i, e) => { - if (e == "9999") { - e = ""; - } - await http - .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`) - .then((res) => { - if (res.code == 200) { - if (cfJd.value == "") { - personTotal.value = [ - { - id: "9999", - ages: "总人口", - age: "", - value: "res.data.total", - }, - { - id: "6666", - name: "死亡总人口", - value: "5650", - ages: "死亡总人口", - age: "1000", - }, - ]; - personTotal.value[0].rksl = res.data.total; - personTotal.value[0].ages = "总人口"; - personTotal.value[1].rksl = res.data.swrs; - personTotal.value[1].ages = "死亡"; - res.data.age.forEach((item, index) => { - personTotal.value.push({ - id: index + 1, - rksl: item.rksl, - age: item.age + "", - ages: item.age + "岁", - }); - }); - } - mapTownCount.map((item) => { - // item.number = 0; - res.data.townWwrs.map((items) => { - if (items.xzjd == item.name) { - item.swrs = items.swrs; - } - }); - }); - mapTownCount.map((item) => { - item.number = 0; - res.data.town.map((items) => { - if (items.town == item.name) { - item.number = items.rksl; - } - }); + for (let v of mapTown[0].features) { + if (v.geometry.coordinates.length > 1) { + for (let w in v.geometry.coordinates) { + if (v.geometry.coordinates[w][0].length < 60) continue; + mapTownDataDK.push({ + name: v.properties.name, + point: v.geometry.coordinates[w][0], }); } - }); - if (i) { - changeRs(i); + } else { + mapTownDataDK.push({ + name: v.properties.name, + point: v.geometry.coordinates[0], + }); + mapTownCount.forEach((item) => { + if (v.properties.name == item.name) { + item.center = [...v.properties.center]; + } + }); + } } }; -const getDatas = async (e, i) => { - if (i == "9999") { - i = ""; - } - await http - .get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`) - .then((res) => { - if (res.code == 200) { - if (cfCs.value != "") { - } else if (cfJd.value !== "") { - personTotal.value = [ - { - id: "9999", - ages: "总人口", - age: "", - value: "res.data.total", - }, - { - id: "6666", - name: "死亡总人口", - value: "5650", - ages: "死亡总人口", - age: "1000", - }, - ]; - personTotal.value[0].rksl = res.data.total; - personTotal.value[0].ages = "总人口"; - personTotal.value[1].rksl = res.data.swrs; - personTotal.value[1].ages = "死亡"; - res.data.age.forEach((item, index) => { - personTotal.value.push({ - id: index + 1, - rksl: item.rksl, - age: item.age + "", - ages: item.age + "岁", - }); - }); +//添加地图区块 +// 创建一个偏移函数(用于街道) +const offsetPoint = (point, offsetX, offsetY) => { + return new BMapGL.Point(point.lng + offsetX, point.lat + offsetY); +}; +//用于村社 +const offsetPoint2 = (point, offsetX, offsetY) => { + return new BMapGL.Point(point.lng + offsetX, point.lat + offsetY); +}; +// 设置偏移量 +let offsetX = 0.01095; // 横向偏移量 +let offsetY = 0.00314; // 纵向偏移量 +let offsetX2 = 0.01; // 横向偏移量 +let offsetY2 = 0.00328; // 纵向偏移量 +const isclick = ref(''); +const addPolygonCounty = () => { + map.clearOverlays(); + let fillColor = "#ffffff"; + mapTownDataDK.map((item) => { + // item.leg = 0; + //地区的坐标范围 + let points = []; + // item.point[0].forEach((itemm, indexx) => { + // itemm[0] = itemm[0] + 0.01095; + // itemm[1] = itemm[1] + 0.00314; + // }); + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + let offsetPoints = points.map((point) => + offsetPoint(point, offsetX, offsetY) + ); + if (points.length) { + //创建面 + let polygon = new BMapGL.Polygon(points, { + strokeColor: "#5E9AD2", + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.7, + name: item.name, + }); + + map.addOverlay(polygon); + + polygon.addEventListener("click", async () => { + // if (cfJd.value == "湖镇镇" && item.name == "模环乡") { + // if (isclick.value=='') { + // return; + // } else { + + // } + // } + if (showEdit.value) { + return; } - // res.data.committee.map((item) => { - // xkzCenter.map((items) => { - // if (item.committee == items.name) { - // items.number = item.rksl; - // } - // }); - // }); - xkzCenter.map((item) => { - // item.number = 0; - res.data.committeeSwrs.map((items) => { - if (items.csq == item.name) { - item.swrs = items.swrs; + // townName.value = item.name; + if (item.name == cfJd.value) { + } else { + loadingss.value = true; + clear(); + xkzDk.length = 0; + cfJd.value = item.name; + let jdCenter = []; + BMAP(); + loadCs(item.name); + addPolygonCountyCs(); + mapTownCount.map((itemm) => { + if (itemm.name == item.name) { + jdCenter = itemm.center; } }); - }); - - xkzCenter.map((item) => { - item.number = 0; - res.data.committee.map((items) => { - if (items.committee == item.name) { - item.number = items.rksl; + goMapCenter(jdCenter, 13); + await getDataBq(cfJd.value, ""); + if (choose.value.person == "") { + await getDatas(cfJd.value, ""); + loadingss.value = false; + } + if (tsbq_pp.value.includes(choose.value.person)) { + await getDatas(cfJd.value, "", false); + //使用await把loading放外面，没效果，所以把loading放接口里面 + getDataBqs4(cfJd.value, cfCs.value, choose.value.person); + } else if (choose.value.person != "") { + if (choose.value.person == "9999") { + await getDatas(cfJd.value, ""); + loadingss.value = false; + } else { + await getDatas(cfJd.value, choose.value.person); + loadingss.value = false; } - }); - }); + } + if (title_jd.value == item.name) { + } else { + title_jd.value = item.name; + } + } + }); + } + }); +}; +//添加街道名 +const addJd = () => { + mapTownCount.map((item, index) => { + createCustomOverlayJd(item, index); + }); +}; +//添加街道名2含数量 +const addJd2 = () => { + nextTick(() => { + mapTownCount.map((item, index) => { + createCustomOverlayJd2(item, index); + }); + }); + // if (center_now.value[0] == 119.178783) { + // goMapCenter([119.178783, 29.034581], 11); + // } +}; +// 添加地图上的街道名 +const createCustomOverlayJd = (polygon, indexx) => { + function createLabelDOM() { + var content = document.createElement("div"); + content.style.display = "flex"; + content.style.flexDirection = "column"; + content.style.alignItems = "center"; + content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); + content.style.height = "20px"; + content.style.width = "20px"; + var div = document.createElement("div"); + div.style.color = "#333"; + div.style.whiteSpace = "nowrap"; + div.style.MozUserSelect = "none"; + div.style.display = "flex"; + div.style.justifyContent = "center"; + div.style.alignItems = "center"; + div.style.cursor = "pointer"; + div.setAttribute("name", this.properties.title); + + var title = document.createElement("div"); + title.style.fontSize = "12px"; + title.style.fontWeight = "600"; + title.style.color = "#000000"; + div.appendChild(title); + title.appendChild(document.createTextNode(this.properties.title)); + content.appendChild(div); + return content; + } + jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.center), + opacity: 0.5, + offsetY: -10, + properties: { + title: polygon.name, + type: "customOverlay", + }, + }); + map.addOverlay(jdm_arr.value[indexx]); +}; +// 添加地图上的街道名+(人数,标签) +const createCustomOverlayJd2 = (polygon, indexx) => { + function createLabelDOM() { + var content = document.createElement("div"); + content.style.display = "flex"; + content.style.flexDirection = "column"; + content.style.alignItems = "center"; + content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); + content.style.height = "20px"; + content.style.width = "20px"; + var div = document.createElement("div"); + div.style.color = "#333"; + div.style.whiteSpace = "nowrap"; + div.style.MozUserSelect = "none"; + div.style.display = "flex"; + div.style.flexDirection = "column"; + div.style.justifyContent = "center"; + div.style.alignItems = "center"; + div.style.cursor = "pointer"; + div.setAttribute("name", this.properties.title); + + var title = document.createElement("div"); + title.style.fontSize = "12px"; + title.style.fontWeight = "600"; + title.style.color = "#000000"; + div.appendChild(title); + title.appendChild(document.createTextNode(this.properties.title)); + content.appendChild(div); + var number = document.createElement("div"); + number.style.fontSize = "13px"; + number.style.fontWeight = "600"; + number.style.color = "#FEFF6C"; + number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)"; + div.appendChild(number); + number.appendChild(document.createTextNode(this.properties.number)); + content.appendChild(div); + // div.onclick = function () { + // let jdCenter = []; + // if (polygon.name == "溪口镇") { + // title_choose.value = title_choose.value + `>${polygon.name}`; + // loadCs(); + // addPolygonCountyCs(); + // mapTownCount.map((item) => { + // if (item.name == "溪口镇") { + // jdCenter = item.center; + // } + // }); + // addCs2(); + // goMapCenter(jdCenter, 14); + // } + // }; + return content; + } + let num = ""; + if (choose.value.person == "6666") { + num = "swrs"; + } else if (tsbq_pp.value.includes(choose.value.person)) { + num = "numbers"; + } else { + num = "number"; + } + jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.center), + opacity: 0.5, + offsetY: -10, + properties: { + title: polygon.name, + number: polygon[`${num}`], + type: "customOverlay", + }, + }); + map.addOverlay(jdm_number_arr.value[indexx]); +}; +//------------------------------ +//---------村社级别------------ +//加载村社信息 +const loadCs = async (name) => { + xkzCenter.length = 0; + xkzDk.length = 0; + cssj.forEach((item, index) => { + if (item.name == name) { + csqk.value = item.sj; + } + }); + for (let v of csqk.value.features) { + if (v.geometry.coordinates.length > 1) { + for (let w in v.geometry.coordinates) { + if (v.geometry.coordinates[w][0].length < 60) continue; + xkzDk.push({ + id: v.id, + name: v.properties.name, + point: v.geometry.coordinates[w], + }); + } + xkzCenter.push({ + id: v.id, + name: v.properties.name, + center: v.properties.center, + }); + } else { + xkzDk.push({ + id: v.id, + name: v.properties.name, + point: v.geometry.coordinates[0], + }); + xkzCenter.push({ + id: v.id, + name: v.properties.name, + center: v.properties.center, + }); + } + } + console.log(6666); +}; +//添加村社区块 +const addPolygonCountyCs = () => { + xkzDk.map((item, index) => { + let num = index % 9; + let fillColor = colorList[num].bg; + //地区的坐标范围 + let points = []; + // console.log(item.name,item.point[0]); + //批量修改村社位置shangchuan() + // item.point[0].forEach((itemm, indexx) => { + // itemm[0] = itemm[0] + 0.01; + // itemm[1] = itemm[1] + 0.00328; + // }); + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + if (points.length) { + //创建面 + cs_qk_arr.value[index] = new BMapGL.Polygon(points, { + strokeColor: fillColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.3, + name: item.name, + zIndex: 2, + }); + map.addOverlay(cs_qk_arr.value[index]); + cs_qk_arr.value[index].addEventListener("click", async () => { + // if(item.name == '士元村' || item.name == '茶场新村' || item.name == '前江新村' || item.name=='虎龙村' || item.name=='白马村' || item.name=='凤基坤村'){ + // isclick.value=item.name; + // }else{ + // isclick.value=item.name; + // } + + if (drawing.value) { + return; + } + loadingss.value = true; + cs_dd_arr.value = []; + xuanzhongCs.value = []; + cfCs.value = item.name; + title_cs.value = item.name; + sfdd.value = true; + xkzCenter.forEach((a, b) => { + if (a.name == item.name) { + cs_dd_arr.value.push(a); + xuanzhongCs.value.push(a); + } + }); + chooseCsList.value.length = 0; + unChooseList.value.length = 0; + xkzDk.forEach((itemm, indexx) => { + if (itemm.name == item.name) { + chooseCsList.value.push(itemm); + } else { + unChooseList.value.push(itemm); + } + }); + addCsChoose(); + addCsUnChoose(); + cs_qk_arr.value.forEach((item, index) => { + map.removeOverlay(cs_qk_arr.value[index]); + }); cs_name_arr.value.forEach((item, index) => { map.removeOverlay(cs_name_arr.value[index]); }); cs_number_name_arr.value.forEach((item, index) => { map.removeOverlay(cs_number_name_arr.value[index]); }); - cs_dd_arr.value.forEach((item, index) => { - map.removeOverlay(cs_dd_arr.value[index]); - }); - - if (title_choose.value == "") { + await getDataBq(cfJd.value, cfCs.value); + if (tsbq_pp.value.includes(choose.value.person)) { + await getDataBqs3(cfJd.value, cfCs.value, choose.value.person); } else { - if (sfdd.value) { - if (choose.value.person == "") { - cs_dd_arr.value.forEach((item, index) => { - map.removeOverlay(cs_dd_arr.value[index]); - }); - cs_dd_arr.value = [...xuanzhongCs.value]; - cs_dd_arr.value.map((item, index) => { - DGcreateCs(item, index); - }); - } else { - cs_dd_arr.value.forEach((item, index) => { - map.removeOverlay(cs_dd_arr.value[index]); - }); - cs_dd_arr.value = [...xuanzhongCs.value]; - cs_dd_arr.value.map((item, index) => { - DGcreateCs2(item, index); - }); - } - } else { - console.log("hhhhh", xkzCenter); - if (choose.value.person == "") { - addCs(); - } else { - addCs2(); - } - } } - } - }); -}; -const getDatas2 = async (e, i, cs) => { - if ( - i == "cjr" || - i == "dibian" || - i == "db" || - i == "gxy" || - i == "tnb" || - i == "tyjr" || - i == "kjer" - ) { - i = ""; - } - await http - .get( - `/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}&committee=${cs}` - ) - .then((res) => { - if (res.code == 200) { - personTotal.value = [ - { - id: "9999", - ages: "总人口", - age: "", - value: "res.data.total", - }, - { - id: "6666", - name: "死亡总人口", - value: "5650", - ages: "死亡总人口", - age: "1000", - }, - ]; - personTotal.value[0].rksl = res.data.total; - personTotal.value[0].ages = "总人口"; - personTotal.value[1].rksl = res.data.swrs; - personTotal.value[1].ages = "死亡"; - res.data.age.forEach((item, index) => { - personTotal.value.push({ - id: index + 1, - rksl: item.rksl, - age: item.age + "", - ages: item.age + "岁", - }); - }); - xkzCenter.map((item) => { - item.swrs = 0; - res.data.committeeSwrs.map((items) => { - if (items.csq == item.name) { - item.swrs = items.swrs; - } - }); - }); - } - }); -}; -//获取特殊标签 -const getDataBq = async (jd, cs) => { - await http - .get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`) - .then((res) => { - if (res.code == 200) { - tsbqTotal.value.length = 0; - for (let name in res.data) { - let idd = ""; - for (let v = 0; v < tsbq_id_total.value.length; v++) { - if (tsbq_id_total.value[v].name == name) { - idd = tsbq_id_total.value[v].id; - } - } - tsbqTotal.value.push({ - id: idd, - name: name, - rksl: res.data[name] || 0, - }); - } - } - }); -}; -const getDataBqs = async (jd, cs, bq) => { - let data = {}; - let vv = 0; - if (cs == "" && jd == "") { - data = { - tsbq: bq, - }; - vv = 1; - } else if (cs == "") { - data = { - xzjd: jd, - tsbq: bq, - }; - vv = 2; - } else { - data = { - xzjd: jd, - tsbq: bq, - csq: cs, - }; - vv = 3; - } - await getDataBqJD(bq); - getDataBqs2(cfJd.value, cfCs.value, bq); - // await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => { - // if (res.code == 200) { - // mapTownCount.map((item) => { - // item.numbers = 0; - // res.data.map((items) => { - // if (items.xzjd == item.name) { - // item.numbers = items.rs; - // } - // }); - // }); - // } - // }); -}; -const getDataBqs2 = async (jd, cs, bq, f = true) => { - //f用来判断执不执行changeRs2 - let data = {}; - let vv = 0; - if (cs == "" && jd == "") { - data = { - tsbq: bq, - }; - vv = 1; - } else if (cs == "") { - data = { - xzjd: jd, - tsbq: bq, - }; - vv = 2; - } else { - data = { - xzjd: jd, - tsbq: bq, - csq: cs, - }; - vv = 3; - } - await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => { - if (res.code == 200) { - xkzCenter.map((item) => { - item.numbers = 0; - res.data.map((items) => { - if (items.csq == item.name) { - item.numbers = items.rs; - } - }); - }); - if (f) { - changeRs2(bq); - } - cs_name_arr.value.forEach((item, index) => { - map.removeOverlay(cs_name_arr.value[index]); + await getDatas2(cfJd.value, choose.value.person, cfCs.value); + + loadingss.value = false; }); - cs_number_name_arr.value.forEach((item, index) => { - map.removeOverlay(cs_number_name_arr.value[index]); - }); - cs_dd_arr.value.forEach((item, index) => { - map.removeOverlay(cs_dd_arr.value[index]); - }); - if (title_choose.value == "") { - } else { - if (sfdd.value) { - if (choose.value.person == "") { - cs_dd_arr.value.forEach((item, index) => { - map.removeOverlay(cs_dd_arr.value[index]); - }); - cs_dd_arr.value = [...xuanzhongCs.value]; - cs_dd_arr.value.map((item, index) => { - DGcreateCs(item, index); - }); - } else { - cs_dd_arr.value.forEach((item, index) => { - map.removeOverlay(cs_dd_arr.value[index]); - }); - cs_dd_arr.value = [...xuanzhongCs.value]; - cs_dd_arr.value.map((item, index) => { - DGcreateCs2(item, index); - }); - } - } else { - console.log("hhhhh", xkzCenter); - if (choose.value.person == "") { - addCs(); - } else { - addCs2(); - } - } - } } }); }; -//特殊标签单独获取各个街道人数 -const getDataBqJD = async (bq) => { - let data = {}; - data = { - tsbq: bq, - }; - await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => { - if (res.code == 200) { - if (res?.data) { - mapTownCount.map((item) => { - item.numbers = 0; - res.data.map((items) => { - if (items.xzjd == item.name) { - item.numbers = items.rs; - } - }); - }); - } +//添加选中社区 +const addCsChoose = () => { + chooseCsList.value.map((item, index) => { + let fillColor = "blue"; + //地区的坐标范围 + let points = []; + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + // let offsetPoints2 = points.map((point) => + // offsetPoint2(point, offsetX2, offsetY2) + // ); + if (points.length) { + //创建面 + cs_choose_arr.value[index] = new BMapGL.Polygon(points, { + strokeColor: fillColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.3, + name: item.name, + zIndex: 5, + }); + map.addOverlay(cs_choose_arr.value[index]); } }); }; +//添加未选中社区 +const addCsUnChoose = () => { + unChooseList.value.map((item, index) => { + let fillColor = "RGBA(125, 140, 154, 1)"; + //地区的坐标范围 + let points = []; + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + // let offsetPoints2 = points.map((point) => + // offsetPoint2(point, offsetX2, offsetY2) + // ); + if (points.length) { + //创建面 + cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, { + strokeColor: fillColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.3, + name: item.name, + zIndex: 5, + }); + map.addOverlay(cs_un_choose_arr.value[index]); + cs_un_choose_arr.value[index].addEventListener("click", async () => { + if (drawing.value) { + return; + } + //编辑模式下 + if (showEdit.value) { + changeCsqkId.value = item.id; + } + // + loadingss.value = true; + cfCs.value = item.name; + title_cs.value = cfCs.value; + sfdd.value = true; + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_un_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_un_choose_arr.value[index]); + }); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + chooseCsList.value.length = 0; + unChooseList.value.length = 0; + cs_dd_arr.value = []; + xuanzhongCs.value = []; + xkzCenter.forEach((a, b) => { + if (a.name == item.name) { + cs_dd_arr.value.push(a); + xuanzhongCs.value.push(a); + } + }); + xkzDk.forEach((itemm, indexx) => { + if (itemm.name == item.name) { + chooseCsList.value.push(itemm); + } else { + unChooseList.value.push(itemm); + } + }); + addCsChoose(); + addCsUnChoose(); + await getDataBq(cfJd.value, cfCs.value); + await getDatas2(cfJd.value, choose.value.person, cfCs.value); + if (tsbq_pp.value.includes(choose.value.person)) { + await getDataBqs3(cfJd.value, cfCs.value, choose.value.person); + } + loadingss.value = false; + }); + } + }); +}; +//创建村社 +const addCs = () => { + xkzCenter.map((item, index) => { + // item.center[0] = item.center[0] + 0.01; + // item.center[1] = item.center[1] + 0.00328; + // console.log(item.center); + createCs(item, index); + }); +}; +//创建村社(人数,标签) +const addCs2 = () => { + xkzCenter.map((item, index) => { + createCs2(item, index); + }); +}; +//添加村社 +const createCs = (polygon, indexx) => { + function createLabelDOM() { + var content = document.createElement("div"); + content.style.display = "flex"; + content.style.flexDirection = "column"; + content.style.alignItems = "center"; + content.style.height = "60px"; + content.style.width = "60px"; + content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); + var div = document.createElement("div"); + div.style.color = "#333"; + div.style.whiteSpace = "nowrap"; + div.style.MozUserSelect = "none"; + div.style.display = "flex"; + div.style.justifyContent = "center"; + div.style.alignItems = "center"; + div.style.cursor = "pointer"; + div.style.padding = "5px"; + div.style.minWidth = "60px"; + div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; + div.style.transform = "translateY(50px)"; + div.setAttribute("name", this.properties.title); + + var title = document.createElement("div"); + title.style.fontSize = "10px"; + title.style.fontWeight = "600"; + title.style.color = "#000000"; + div.appendChild(title); + title.appendChild(document.createTextNode(this.properties.title)); + content.appendChild(div); + let img2 = document.createElement("img"); + img2.style.width = "20px"; + img2.style.height = "26px"; + img2.src = this.properties.imgSrc2; + + content.appendChild(div); + content.appendChild(img2); + return content; + } + cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.center), + opacity: 0.5, + offsetX: 10, + offsetY: -15, + properties: { + title: polygon.name, + imgSrc2: dwd, + type: "customOverlay", + }, + }); + map.addOverlay(cs_name_arr.value[indexx]); +}; +//添加村社+(人数,标签) +const createCs2 = (polygon, indexx) => { + function createLabelDOM() { + var content = document.createElement("div"); + content.style.display = "flex"; + content.style.flexDirection = "column"; + content.style.alignItems = "center"; + content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); + content.style.height = "60px"; + content.style.width = "60px"; + var div = document.createElement("div"); + div.style.color = "#333"; + div.style.whiteSpace = "nowrap"; + div.style.MozUserSelect = "none"; + div.style.display = "flex"; + div.style.justifyContent = "space-between"; + div.style.alignItems = "center"; + div.style.cursor = "pointer"; + div.style.padding = "5px"; + div.style.minWidth = "60px"; + div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; + div.style.transform = "translateY(50px)"; + div.setAttribute("name", this.properties.title); + + var title = document.createElement("div"); + title.style.fontSize = "10px"; + title.style.fontWeight = "600"; + title.style.color = "#000000"; + div.appendChild(title); + title.appendChild(document.createTextNode(this.properties.title)); + content.appendChild(div); + + var number = document.createElement("div"); + number.style.fontSize = "10px"; + number.style.fontWeight = "600"; + number.style.color = "black"; + div.appendChild(number); + number.appendChild(document.createTextNode(this.properties.number)); + // content.appendChild(div); + let img2 = document.createElement("img"); + img2.style.width = "20px"; + img2.style.height = "26px"; + img2.src = this.properties.imgSrc2; + + content.appendChild(div); + content.appendChild(img2); + return content; + } + let num = ""; + if (choose.value.person == "6666") { + num = "swrs"; + } else if (tsbq_pp.value.includes(choose.value.person)) { + num = "numbers"; + } else { + num = "number"; + } + cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.center), + opacity: 0.5, + offsetX: 10, + offsetY: -15, + properties: { + title: polygon.name, + number: polygon[`${num}`], + imgSrc2: dwd, + type: "customOverlay", + }, + }); + map.addOverlay(cs_number_name_arr.value[indexx]); + cs_number_name_arr.value[indexx].addEventListener("click", () => { + cfCsZs.value = polygon.name; + open_detail(); + }); +}; +//添加单个村社 +const DGcreateCs = (polygon, indexx) => { + function createLabelDOM() { + var content = document.createElement("div"); + content.style.display = "flex"; + content.style.flexDirection = "column"; + content.style.alignItems = "center"; + content.style.height = "60px"; + content.style.width = "60px"; + content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); + + var div = document.createElement("div"); + div.style.color = "#333"; + div.style.whiteSpace = "nowrap"; + div.style.MozUserSelect = "none"; + div.style.display = "flex"; + div.style.justifyContent = "center"; + div.style.alignItems = "center"; + div.style.cursor = "pointer"; + div.style.padding = "5px"; + div.style.minWidth = "60px"; + div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; + div.style.transform = "translateY(50px)"; + div.setAttribute("name", this.properties.title); + + var title = document.createElement("div"); + title.style.fontSize = "10px"; + title.style.fontWeight = "600"; + title.style.color = "#000000"; + div.appendChild(title); + title.appendChild(document.createTextNode(this.properties.title)); + content.appendChild(div); + let img2 = document.createElement("img"); + img2.style.width = "20px"; + img2.style.height = "26px"; + img2.src = this.properties.imgSrc2; + + content.appendChild(div); + content.appendChild(img2); + return content; + } + cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.center), + opacity: 0.5, + offsetX: 10, + offsetY: -15, + properties: { + title: polygon.name, + imgSrc2: dwd, + type: "customOverlay", + }, + }); + map.addOverlay(cs_dd_arr.value[indexx]); + cs_dd_arr.value[indexx].addEventListener("click", () => { + if (jsqx.value) { + if (showEdit.value) { + changeCsqkId.value = polygon.id; + } else { + console.log(polygon.id); + changeCsqkId.value = polygon.id; + showEdit.value = !showEdit.value; + } + } else { + } + }); +}; +//添加单个村社(+数量) +const DGcreateCs2 = (polygon, indexx) => { + function createLabelDOM() { + var content = document.createElement("div"); + content.style.display = "flex"; + content.style.flexDirection = "column"; + content.style.alignItems = "center"; + content.style.height = "60px"; + content.style.width = "60px"; + content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); + + var div = document.createElement("div"); + div.style.color = "#333"; + div.style.whiteSpace = "nowrap"; + div.style.MozUserSelect = "none"; + div.style.display = "flex"; + div.style.justifyContent = "space-between"; + div.style.alignItems = "center"; + div.style.cursor = "pointer"; + div.style.padding = "5px"; + div.style.minWidth = "60px"; + div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; + div.style.transform = "translateY(50px)"; + div.setAttribute("name", this.properties.title); + + var title = document.createElement("div"); + title.style.fontSize = "10px"; + title.style.fontWeight = "600"; + title.style.color = "#000000"; + div.appendChild(title); + title.appendChild(document.createTextNode(this.properties.title)); + content.appendChild(div); + + var number = document.createElement("div"); + number.style.fontSize = "10px"; + number.style.fontWeight = "600"; + number.style.color = "black"; + div.appendChild(number); + number.appendChild(document.createTextNode(this.properties.number)); + content.appendChild(div); + let img2 = document.createElement("img"); + img2.style.width = "20px"; + img2.style.height = "26px"; + img2.src = this.properties.imgSrc2; + + content.appendChild(div); + content.appendChild(img2); + return content; + } + let num = ""; + if (choose.value.person == "6666") { + num = "swrs"; + } else if (tsbq_pp.value.includes(choose.value.person)) { + num = "numbers"; + } else { + num = "number"; + } + cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.center), + opacity: 0.5, + offsetX: 10, + offsetY: -15, + properties: { + title: polygon.name, + number: polygon[`${num}`], + imgSrc2: dwd, + type: "customOverlay", + }, + }); + map.addOverlay(cs_dd_arr.value[indexx]); + cs_dd_arr.value[indexx].addEventListener("click", () => { + console.log(cfJd.value, polygon.name); + cfCsZs.value = polygon.name; + open_detail(); + }); +}; //适配 const reset_font = () => { let width = document.documentElement.clientWidth || document.body.clientWidth; @@ -2664,31 +4058,27 @@ const reset_font = () => { "scale(" + width / 1920 + "," + height / 1080 + ")"; } }; -// function initializeMap() { -// map = new BMapGL.Map("allmap"); -// var point = new BMapGL.Point(119.175728, 28.846981); -// map.centerAndZoom(point, 16); -// map.enableScrollWheelZoom(true); +const reset_font2 = () => { + let width = document.documentElement.clientWidth || document.body.clientWidth; + let height = + document.documentElement.clientHeight || document.body.clientHeight; -// // Initialize circle but don't add it to map yet -// circle = new BMapGL.Circle(point, 900, { -// strokeColor: "yellow", -// strokeWeight: 2, -// strokeOpacity: 0.8, -// fillOpacity: 0.1, -// fillColor: "yellow", -// strokeStyle: "dashed", -// zIndex: 99, -// }); -// } - -// window.onload = initializeMap; -onMounted(() => { + document.querySelector(".detail").style.transformOrigin = "top left"; + document.querySelector(".detail").style.transform = + "scale(" + width / 1920 + "," + height / 1080 + ")"; +}; +onMounted(async () => { + // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d"); + loadingss.value = true; reset_font(); + await getXzsj(); initMap(); getData(); - getDataBq(); BMAP(); + getFwq(); + getCssj(); + await getDataBqFirst(); + loadingss.value = false; }); @@ -2730,14 +4120,56 @@ onMounted(() => { ); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); backdrop-filter: blur(3px); - padding: 30px 26px; + padding: 30px 15px; display: flex; flex-direction: column; z-index: 12; overflow: hidden; - + transition: opacity 1s; //人口数 .lyx { + .content_item2 { + color: #ffffff; + cursor: pointer; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px; + padding-left: 24px; + width: 100%; + // height: 57px; + background-image: url(@/assets/images/map/unchoose.png); + background-repeat: no-repeat; + background-size: 100% 100%; + margin-bottom: 12px; + border-radius: 5px; + } + .content_item_name { + position: relative; + } + + .content_item_name::before { + content: ""; + position: absolute; + width: 3px; + height: 3px; + background: #29ffc1; + border: 3px solid rgba(0, 255, 189, 0.31); + border-radius: 6px; + top: 7.5px; + left: -13px; + } + + .content_item_value { + display: flex; + .content_item_percent { + margin-left: 2px; + color: #6bfeff; + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); + } + } + .content { box-sizing: border-box; margin-top: 20px; @@ -2745,7 +4177,7 @@ onMounted(() => { flex-flow: row wrap; justify-content: space-between; color: #ffffff; - height: 450px; + height: 300px; overflow: auto; .content_item { @@ -2754,13 +4186,18 @@ onMounted(() => { display: flex; align-items: center; justify-content: space-between; - padding: 24px; + padding: 18px; + padding-left: 24px; + padding-right: 5px; width: 48%; - height: 57px; + position: relative; + // height: 57px; background-image: url(@/assets/images/map/unchoose.png); background-repeat: no-repeat; background-size: 100% 100%; margin-bottom: 12px; + font-size: 18px; + border-radius: 5px; } .content_item:first-child { @@ -2768,52 +4205,68 @@ onMounted(() => { display: flex; align-items: center; justify-content: space-between; - padding: 24px; + padding: 18px; + padding-left: 24px; width: 100%; - height: 57px; + // height: 57px; background-image: url(@/assets/images/map/unchoose.png); background-repeat: no-repeat; background-size: 100% 100%; margin-bottom: 12px; + border-radius: 5px; } - .content_item:nth-child(2) { - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - padding: 24px; - width: 100%; - height: 57px; - background-image: url(@/assets/images/map/unchoose.png); - background-repeat: no-repeat; - background-size: 100% 100%; - margin-bottom: 12px; - } + // .content_item:nth-child(2) { + // box-sizing: border-box; + // display: flex; + // align-items: center; + // justify-content: space-between; + // padding: 18px; + // padding-left: 24px; + // width: 100%; + // // height: 57px; + // background-image: url(@/assets/images/map/unchoose.png); + // background-repeat: no-repeat; + // background-size: 100% 100%; + // margin-bottom: 12px; + // } - .content_item_name { - position: relative; - } + // .content_item_name { + // position: relative; + // } - .content_item_name::before { - content: ""; - position: absolute; - width: 3px; - height: 3px; - background: #29ffc1; - border: 3px solid rgba(0, 255, 189, 0.31); - border-radius: 6px; - top: 7.5px; - left: -13px; - } + // .content_item_name::before { + // content: ""; + // position: absolute; + // width: 3px; + // height: 3px; + // background: #29ffc1; + // border: 3px solid rgba(0, 255, 189, 0.31); + // border-radius: 6px; + // top: 7.5px; + // left: -13px; + // } - .choose { - background-image: url(@/assets/images/map/choose.png) !important; - background-repeat: no-repeat !important; - background-size: 100% 100% !important; - } + // .content_item_value { + // display: flex; + // .content_item_percent { + // margin-left: 2px; + // color: #6bfeff; + // text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); + // } + // } + + // .choose { + // background-image: url(@/assets/images/map/choose.png) !important; + // background-repeat: no-repeat !important; + // background-size: 100% 100% !important; + // } + } + .choose { + background-image: url(@/assets/images/map/choose.png) !important; + background-repeat: no-repeat !important; + background-size: 100% 100% !important; } - .content::-webkit-scrollbar { display: none; } @@ -2821,7 +4274,7 @@ onMounted(() => { //特殊标签 .tsbq { - margin-top: 40px; + margin-top: 30px; .content { box-sizing: border-box; @@ -2839,13 +4292,16 @@ onMounted(() => { display: flex; align-items: center; justify-content: space-between; - padding: 24px; + padding: 18px; + padding-left: 24px; width: 48%; - height: 57px; + // height: 57px; background-image: url(@/assets/images/map/unchoose.png); background-repeat: no-repeat; background-size: 100% 100%; margin-bottom: 12px; + font-size: 18px; + border-radius: 5px; } // .content_item:last-child { @@ -2912,15 +4368,15 @@ onMounted(() => { ); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); backdrop-filter: blur(3px); - padding: 30px 26px; + padding: 30px 15px; display: flex; flex-direction: column; z-index: 12; overflow: hidden; - + transition: opacity 1s; .jbggfwq { .jbggfwq_content { - height: 500px; + height: 520px; overflow: auto; display: flex; flex-direction: column; @@ -2932,7 +4388,6 @@ onMounted(() => { display: flex; // align-items: center; color: #ffffff; - .jbggfwq_content_item_left { margin-right: 10px; width: 80px; @@ -2960,10 +4415,11 @@ onMounted(() => { font-size: 16px; line-height: 28px; background: rgba(124, 151, 180, 0.8); - // padding: 10px; margin-bottom: 4px; position: relative; + // padding: 10px; /* 必须设置 position 属性以便伪元素定位 */ + // border-radius: 5px; } .jbggfwq_content_item_right_item::after { @@ -2976,7 +4432,18 @@ onMounted(() => { top: 14px; right: 0px; } - + :nth-child(4n + 1).jbggfwq_content_item_right_item { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + :nth-child(4n).jbggfwq_content_item_right_item { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + :last-child.jbggfwq_content_item_right_item { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } :nth-child(4n).jbggfwq_content_item_right_item::after { opacity: 0; } @@ -3001,15 +4468,16 @@ onMounted(() => { .zyys { .zyys_content { + height: 200px; margin-top: 20px; box-sizing: border-box; display: flex; justify-content: space-between; flex-flow: row wrap; - + overflow: auto; .zyys_content_item { width: 110px; - height: 52px; + height: 54px; cursor: pointer; margin-bottom: 20px; color: #ffffff; @@ -3017,7 +4485,7 @@ onMounted(() => { align-items: center; justify-content: center; background: rgba(124, 151, 180, 0.8); - + border-radius: 5px; .zyys_content_item_left { width: 18px; height: 18px; @@ -3040,15 +4508,189 @@ onMounted(() => { background-size: 100% 100%; } } + .zyys_content::-webkit-scrollbar { + display: none; + } } } +//加载动画 +.loadBody { + width: 100%; + height: 100%; + z-index: 999; + background: rgba(0, 0, 0, 0); + position: absolute; + .load { + box-sizing: border-box; + position: absolute; + left: 50%; + top: 50%; + width: 80px; + height: 80px; + background: rgba(0, 0, 0, 0.3); + border-radius: 8px; + backdrop-filter: blur(2px); + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + .icon { + margin-top: 10px; + //加载 + .loading, + .loading > div { + position: relative; + box-sizing: border-box; + } + .loading { + display: block; + font-size: 0; + color: #ffffff; + } + + .loading > div { + display: inline-block; + float: none; + background-color: currentColor; + border: 0 solid currentColor; + } + + .loading { + width: 30px; + height: 30px; + } + + .loading > div { + position: absolute; + width: 8px; + height: 8px; + margin-top: -4px; + margin-left: -4px; + border-radius: 100%; + animation: ball-spin-clockwise-fade 1s infinite linear; + } + + .loading > div:nth-child(1) { + top: 5%; + left: 50%; + animation-delay: -0.875s; + } + + .loading > div:nth-child(2) { + top: 18.1801948466%; + left: 81.8198051534%; + animation-delay: -0.75s; + } + + .loading > div:nth-child(3) { + top: 50%; + left: 95%; + animation-delay: -0.625s; + } + + .loading > div:nth-child(4) { + top: 81.8198051534%; + left: 81.8198051534%; + animation-delay: -0.5s; + } + + .loading > div:nth-child(5) { + top: 94.9999999966%; + left: 50.0000000005%; + animation-delay: -0.375s; + } + + .loading > div:nth-child(6) { + top: 81.8198046966%; + left: 18.1801949248%; + animation-delay: -0.25s; + } + + .loading > div:nth-child(7) { + top: 49.9999750815%; + left: 5.0000051215%; + animation-delay: -0.125s; + } + + .loading > div:nth-child(8) { + top: 18.179464974%; + left: 18.1803700518%; + animation-delay: 0s; + } + + @keyframes ball-spin-clockwise-fade { + 50% { + opacity: 0.25; + transform: scale(0.5); + } + + 100% { + opacity: 1; + transform: scale(1); + } + } + } + .text { + margin-top: 10px; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 10px; + color: #ffffff; + line-height: 20px; + letter-spacing: 2px; + text-align: center; + } + } +} +.btns { + z-index: 999; + position: absolute; + color: #ffffff; + top: 15%; + right: 30%; + display: flex; + cursor: pointer; + .btnopen { + background-color: skyblue; + padding: 5px 10px; + border-radius: 3px 0 0 3px; + } + .btnsave { + background-color: skyblue; + padding: 5px 10px; + } + .btnclose { + background-color: skyblue; + padding: 5px 10px; + border-radius: 0 3px 3px 0; + } +} +.btnBj { + cursor: pointer; + z-index: 100; + position: absolute; + color: #ffffff; + top: 12%; + right: 28%; + background: #7aceff; + padding: 5px; + border-radius: 5px; + display: flex; + align-items: center; + opacity: 0.8; +} .title { + background-image: url(@/assets/images/map/map_title_bg.png); + background-repeat: no-repeat; + background-size: 100% 100%; .title_name { cursor: pointer; display: flex; - font-family: YouSheBiaoTiHei; - font-size: 34px; + align-items: center; + font-family: titletheRightWay; + font-size: 30px; font-weight: 900; // line-height: 44px; letter-spacing: 4px; @@ -3059,15 +4701,17 @@ onMounted(() => { /* 为了兼容性，添加渐变背景到IE */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; - + padding-left: 32px; span { display: block; - font-family: YouSheBiaoTiHei; - font-size: 34px; - font-weight: 900; + font-family: titletheRightWay; + font-size: 32px; + white-space: nowrap; + font-weight: normal; + // font-weight: 900; // line-height: 44px; letter-spacing: 4px; - margin-bottom: 15px; + margin-bottom: 18px; background: linear-gradient( 180deg, #ffffff 0%, @@ -3082,11 +4726,163 @@ onMounted(() => { } } - .title_line { - height: 4px; + // .title_line { + // height: 4px; + // width: 100%; + // border-top: 1px solid #ffffff; + // border-bottom: 2px dashed #ffffff; + // } +} + +.age-container { + position: relative; + left: 10px; + width: 450px; + height: 120px; + display: flex; + align-items: center; + margin-top: 4px; + + .progress-wrapper { + display: flex; + align-items: center; + position: relative; width: 100%; - border-top: 1px solid #ffffff; - border-bottom: 2px dashed #ffffff; + } + + .progress-container { + position: relative; + transition: width 0.3s ease; + height: 10px; + background-color: rgba(255, 255, 255, 0.2); + + &.above-line { + .dot { + top: -20px; + } + + .age-line { + top: -30px; + } + + span { + &.above-line1 { + top: -55px; + } + } + + &:nth-child(even) { + .dot { + top: -20px; + } + + .age-line { + top: -18px; + } + + span { + top: -40px; + } + } + } + + &.below-line { + .dot { + top: 20px; + } + + .age-line { + top: 5px; + } + + span { + &.below-line1 { + top: 40px; + } + } + + &:nth-child(odd) { + .dot { + top: 20px; + } + + .age-line { + top: 5px; + } + + span { + top: 30px; + } + } + } + + .dot { + width: 10px; + height: 10px; + border-radius: 50%; + position: absolute; + left: 50%; + transform: translateX(-50%); + } + + .age-line { + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 1px; + height: 20px; + } + + span { + position: absolute; + left: 50%; + transform: translateX(-50%); + font-size: 14px; + + &.above-line1 { + top: -50px; + } + + &.below-line1 { + top: 50px; + } + &.above-line2 { + top: -55px !important; //上面百分比 + } + + &.below-line2 { + top: 45px !important ; //下面百分比 + } + } + } + + .progress-container:first-child { + border-radius: 5px 0 0 5px; + } + + .progress-container:last-child { + border-radius: 0 5px 5px 0; } } +:deep(.el-table) { + background: rgba(32, 64, 115, 1); + + --el-table-border-color: none; + border: 1px solid #7aceff; +} + +:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) { + background-color: #2f4b74; +} + +:deep(.el-table__empty-block) { + background-color: #122560; +} + +:deep(.el-table .el-table__row) { + border-bottom: none; +} +.detail { + z-index: 998; +} diff --git a/vite.config.js b/vite.config.js index 99753df..7708875 100644 --- a/vite.config.js +++ b/vite.config.js @@ -15,8 +15,8 @@ export default defineConfig({ // 第一个代理 "/api": { // 匹配到啥来进行方向代理 - // target: "http://10.0.0.65:8095/", //刘进 - target: "http://220.191.238.50:996/", //线上 + target: "http://10.0.0.65:8095/", //刘进 + // target: "http://220.191.238.50:996/", //线上 changeOrigin: true, //是否支持跨域 //rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空，这个 },