diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 64b2fe3..1fc76fc 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -111,7 +111,7 @@
-
+
基本公共服务圈
@@ -1245,7 +1245,7 @@ const moveDK = async () => { id: changeCsqkId.value, data: JSON.stringify(arrJWD), }; - await http.post(`/api/ggfwyth/regionalDivision/edit`, sj).then((res) => { + await http.post(`/api/ggfwyth/regionalDivision/editVillage`, sj).then((res) => { if (res.code == 200) { ElMessage.success({ message: "保存成功", diff --git a/src/view/sy_map_fb.vue b/src/view/sy_map_fb.vue index 64b2fe3..25ea39a 100644 --- a/src/view/sy_map_fb.vue +++ b/src/view/sy_map_fb.vue @@ -2,160 +2,6 @@
-
-
-
-
- 龙游县 - >{{ title_jd }} - >{{ title_cs }} -
-
-
-
{{ ageLess0(item.ages) }}
-
{{ item.rksl }}人
-
-
-
-
- {{ item.progress.toFixed(2) + "%" }} - {{ item.age }} -
-
-
-
-
-
-
-
{{ ageLess0(item.ages) }}
-
- {{ item.rksl }}人 -
({{ item.percent }}%)
-
-
-
-
-
-
-
- 特殊标签 -
-
-
-
-
{{ item.name }}
-
{{ item.rksl }}
-
-
-
-
-
-
-
-
- 基本公共服务圈 -
-
-
-
-
{{ item.name }}
-
-
- {{ itemm.jc }} -
-
-
-
-
-
-
-
资源要素
-
-
-
- -
{{ item.name }}
-
-
-
-
{{ bjtitle }}

- - - - - - - - +
+ 选择编辑： +

{{ is_type }}

+
@@ -387,34 +198,8 @@ import { } from "vue"; 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/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"; -import j3 from "@/assets/images/map/j3.png"; -import j4 from "@/assets/images/map/j4.png"; -import j5 from "@/assets/images/map/j5.png"; -import j6 from "@/assets/images/map/j6.png"; -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"; -import fwqbg3 from "@/assets/images/map/slan.png"; -import fwqbg4 from "@/assets/images/map/slv.png"; -import fwqbg5 from "@/assets/images/map/shuang.png"; -import fwqbg6 from "@/assets/images/map/qqlv.png"; import b1 from "@/assets/images/map/bb1.png"; import b2 from "@/assets/images/map/b2.png"; import b3 from "@/assets/images/map/b3.png"; @@ -423,9 +208,6 @@ 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"; -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 { @@ -470,19 +252,17 @@ 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 jd_choose_arr = ref([]); //单点街道对应的区块(蓝色) +const jd_un_choose_arr = ref([]); //单点街道其他区块(灰色) +//是否单点 +const sfdd = ref(false); //存放村社区块 const csqk = ref({}); var cssj; @@ -490,12 +270,6 @@ var cssj; 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([]); //存放街道 const cfJd = ref(""); @@ -543,513 +317,80 @@ const colorList = [ bg: "RGBA(27, 91, 55, 1)", }, ]; -//存放特殊标签中文对应的简写 -const tsbq_id_total = ref([ - { - name: "低保", - id: "db", - tagId: 1, - }, - { - name: "低边", - id: "dibian", - tagId: 2, - }, - { - name: "困境儿童", - id: "kjer", - tagId: 3, - }, - { - 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: "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 chooseJdList = ref([]); +//单选未中社区区块 +const unChooseJdList = 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 = () => { @@ -1071,8 +412,6 @@ const getXzsj = async () => { .get("/api/ggfwyth/regionalDivision/getManagerTownDetails") .then((res) => { if (res.code == 200) { - console.log(JSON.parse(res.data)); - mapTown = JSON.parse(res.data); } }); @@ -1089,10 +428,35 @@ const getCssj = async () => { /** * 地块编辑 */ +//编辑类型 +const is_type = ref("街道"); +const lx = () => { + if (is_type.value == "街道") { + ElMessageBox.confirm("是否切换至村社?") + .then(() => { + console.log(is_type.value); + is_type.value = "村社"; + csh(); + console.log(is_type.value); + }) + .catch(() => {}); + } else { + ElMessageBox.confirm("是否切换至街道?") + .then(() => { + if (showEdit.value) { + ElMessage.warning("请先退出村社编辑模式"); + } else { + is_type.value = "街道"; + csh(); + } + }) + .catch(() => {}); + } +}; //解锁 const jsqx = ref(false); const qxkey = "ggfwyth123"; -const qxvalue = ref(""); +const qxvalue = ref("ggfwyth123"); const bjtitle = computed(() => { if (jsqx.value) { return "已解锁"; @@ -1160,7 +524,6 @@ const setActiveStyle = (overlay) => { }; //监听事件 const clickHandler = (e) => { - console.log(5555, e); let target = polyLayer.pickOverlays(e.target); if (target && target[0]) { selectedOverlay = target[0]; @@ -1245,13 +608,15 @@ const moveDK = async () => { 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 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) => { @@ -1328,10 +693,6 @@ const closeEdit = async () => { 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 = () => { @@ -1385,8 +746,6 @@ const saveDK = async () => { id: changeCsqkId.value, data: JSON.stringify(arrJWD), }; - // console.log(sj.data); - await http .post(`/api/ggfwyth/regionalDivision/editVillage`, sj) .then((res) => { @@ -1604,7 +963,6 @@ const addcenter = () => { //查看添加列表 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); @@ -1636,12 +994,7 @@ const addNew = async () => { 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; @@ -1730,7 +1083,6 @@ const addBack = () => { //点击龙游县初始化 const csh = () => { clear(); - map.removeEventListener("click", markera); if (currentMarker !== null) { map.removeOverlay(currentMarker); @@ -1743,9 +1095,6 @@ const csh = () => { const clear = () => { xuanzhongCs.value = []; sfdd.value = false; - title_choose.value = ""; - title_jd.value = ""; - title_cs.value = ""; cfJd.value = ""; cfCs.value = ""; cfCsZs.value = ""; @@ -1755,9 +1104,6 @@ const clear = () => { 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]); }); @@ -1767,29 +1113,23 @@ const clear = () => { cs_dd_arr.value.forEach((item, index) => { map.removeOverlay(cs_dd_arr.value[index]); }); + jd_choose_arr.value.forEach((item, index) => { + map.removeOverlay(jd_choose_arr.value[index]); + }); + jd_choose_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 = []; xkzCenter.length = 0; xkzDk.length = 0; + changeCsqkId.value = ""; }; //定义地图中点 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 = () => { // 添加鼠标点击事件监听器 @@ -1816,1475 +1156,10 @@ const markera = (e) => { input2.value = [e.latlng.lng, e.latlng.lat]; } }; -//点击人口数(关键字存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(); - 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 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 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 (cfJd.value != "") { - xkzCenter.map((item) => { - item.swrs = 0; - res.data.committeeSwrs.map((items) => { - if (items.csq == item.name) { - item.swrs = items.swrs; - } - }); - }); - - xkzCenter.map((item) => { - item.number = 0; - res.data.committee.map((items) => { - if (items.committee == item.name) { - item.number = items.rksl; - } - }); - }); - } - - 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 (y) { - if (choose.value.person == "") { - addCs(); - } else { - addCs2(); - } - } - } - } - - // 年龄百分比 - 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; - } - }); - data = { - town: jd, - tagId: tagIdBq, - }; - - 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(); - } - } - } - 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 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); - }); - } -}; - -// 添加资源要素的图标(overlay存放标记点) -const createZyys = (polygon, indexx, name, tooltip) => { - 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 = "30px"; - content.style.width = "30px"; - // content.style.position = "relative"; // 使得提示文字相对于父元素定位 - - 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); - } - }); - }); - 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 { - 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: "无数据", - }); - } - } -}; -// 服务圈数据 -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 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 calculateAverage = (coordinates) => { - // const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字 - const numericCoordinates = coordinates.map((coord) => { - // 使用正则表达式去除非数字字符（保留小数点和负号） - const cleanedCoord = coord.replace(/[^0-9.-]/g, ""); - return Number(cleanedCoord); // 将清理后的字符串转换为数字 - }); - const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和 - const average = sum / numericCoordinates.length; // 计算平均值 - // console.log(average, "计算平均值"); - - return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字 -}; -// 根据最大距离计算合适的缩放级别 -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.fwqCoordinates = []; - // data.fwqCoordinates1 = []; - // data.fwqCoordinates2 = []; - fwqList.value.map((item, index) => { - data.fwqCoordinates.push(item.point); - // data.fwqCoordinates1.push(item.point[0]); - // data.fwqCoordinates2.push(item.point[1]); - createCustomOverlay(item, index); - }); - - 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.zoomLevel = calculateZoomLevel(maxDistance); - console.log("最大距离:", maxDistance, data.zoomLevel); - drawACircle(maxDistance); - } else { - 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); - } -}; -// 添加公共服务圈的图标 -const createCustomOverlay = (polygon, indexx) => { - // data.fwqCoordinates = polygon.point; - function createLabelDOM() { - var content = document.createElement("div"); - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.alignItems = "center"; - content.style.height = "40px"; - content.style.width = "40px"; - content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - - var div = document.createElement("div"); - div.style.color = "#ddd"; - div.style.padding = `${polygon.padding}`; - div.style.whiteSpace = "nowrap"; - div.style.MozUserSelect = "none"; - div.style.fontSize = "12px"; - div.style.borderRadius = "10px"; - div.style.display = "flex"; - div.style.justifyContent = "center"; - div.style.alignItems = "center"; - div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`; - div.style.cursor = "pointer"; - div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`; - div.setAttribute("name", this.properties.title); - - var title = document.createElement("div"); - title.style.fontSize = "14px"; - title.style.fontWeight = "700"; - title.style.marginLeft = "0px"; - title.style.color = `${polygon.textColor}`; - div.appendChild(title); - title.appendChild(document.createTextNode(this.properties.title)); - - let img2 = document.createElement("img"); - img2.style.width = "20px"; - img2.style.height = "20px"; - img2.src = this.properties.imgSrc2; - - content.appendChild(div); - content.appendChild(img2); - - // div.onclick = function () { - // addPolygonTown(this.getAttribute('name')) - // removeCustomOverlay() - // addStage(this.getAttribute('name')) - // state.mapStatus = 1 - // } - - return content; - } - fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { - point: new BMapGL.Point(...polygon.point), - opacity: 0.5, - offsetY: 0, - properties: { - title: polygon.name, - imgSrc2: polygon.img2, - type: "customOverlay", - }, - }); - // var labelopts = { - // position: new BMapGL.Point(polygon.point[0], polygon.point[1]), // 指定文本标注所在的地理位置 - // offset: new BMapGL.Size(0, -97), // 设置文本偏移量 - // }; - // var label = new BMapGL.Label(polygon.name, labelopts); - // label.setStyle({ - // color: "#fff", - // borderRadius: "1px", - // padding: "5px 13px", - // // background: `url(${b1s}) no-repeat 0/100% 100%`, - // fontSize: "15px", - // lineHeight: "20px", - // border: "0", - // transform: "translateX(-50%)", - // }); - map.addOverlay(fwq_list_arr.value[indexx]); -}; -const updateFwqList = (data, townName, communityName) => { - // console.log(data, townName, communityName,'服务器数据'); - let updatedFwqList = []; - jbfwqTotal.value.forEach((town) => { - if (town.name === townName) { - town.child.forEach((community, index) => { - if (community.name === communityName) { - updatedFwqList = data - .filter( - (item) => item.xzjd === townName && item.jc === communityName - ) - .map((item) => ({ - x: 53, - y: 0, - img: fwqbg1, - img2: b2, - name: item.zyysmc, - point: [item.jd, item.wd], - padding: "4px 8px 10px", - textColor: "#fff", - bgColor: "#00b050", - })); - community.fwqList = updatedFwqList; - } - }); - } - }); - fwqList.value = updatedFwqList; - // console.log(jbfwqTotal.value[4].child[0], "乡镇"); -}; -//------------------------------ //-------乡镇街道级别--------- //加载乡镇信息 const loadTown = () => { - console.log(); - for (let v of mapTown[0].features) { if (v.geometry.coordinates.length > 1) { for (let w in v.geometry.coordinates) { @@ -3298,45 +1173,67 @@ const loadTown = () => { mapTownDataDK.push({ name: v.properties.name, point: v.geometry.coordinates[0], + id: v.id, }); mapTownCount.forEach((item) => { if (v.properties.name == item.name) { item.center = [...v.properties.center]; + item.id = v.id; } }); } } }; -//添加地图区块 -// 创建一个偏移函数(用于街道) -const offsetPoint = (point, offsetX, offsetY) => { - return new BMapGL.Point(point.lng + offsetX, point.lat + offsetY); + +//渲染街道 +const xrJd = (name) => { + chooseJdList.value.length = 0; + unChooseJdList.value.length = 0; + mapTownDataDK.forEach((itemm, indexx) => { + if (itemm.name == name) { + chooseJdList.value.push(itemm); + } + }); + + addJdChoose(); }; -//用于村社 -const offsetPoint2 = (point, offsetX, offsetY) => { - return new BMapGL.Point(point.lng + offsetX, point.lat + offsetY); +//添加选中街道 +const addJdChoose = () => { + chooseJdList.value.map((item, index) => { + let fillColor = "blue"; + //地区的坐标范围 + let points = []; + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + if (points.length) { + //创建面 + jd_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(jd_choose_arr.value[index]); + } + }); + console.log(jd_choose_arr.value[0]); }; // 设置偏移量 let offsetX = 0.01095; // 横向偏移量 let offsetY = 0.00314; // 纵向偏移量 let offsetX2 = 0.01; // 横向偏移量 let offsetY2 = 0.00328; // 纵向偏移量 -const isclick = ref(''); +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, { @@ -3347,58 +1244,60 @@ const addPolygonCounty = () => { 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; - } - // 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; - } - }); - 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) { + if (is_type.value == "街道") { + if (item.name == cfJd.value) { } else { - title_jd.value = item.name; + console.log(item.id); + + cfJd.value = item.name; + // cs_qk_arr.value.forEach((item, index) => { + // map.removeOverlay(cs_qk_arr.value[index]); + // }); + jd_choose_arr.value.forEach((item, index) => { + map.removeOverlay(jd_choose_arr.value[index]); + }); + // cs_qk_arr.value.length=0 + // loadCs(item.name); + // addPolygonCountyCs(); + let jdCenter = []; + mapTownCount.map((itemm) => { + if (itemm.name == item.name) { + jdCenter = itemm.center; + } + }); + goMapCenter(jdCenter, 13); + xrJd(item.name); + } + } else { + if (showEdit.value) { + return; + } + 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; + } + }); + goMapCenter(jdCenter, 13); + cs_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_name_arr.value[index]); + }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + addCs(); + loadingss.value = false; } } }); @@ -3411,18 +1310,7 @@ const addJd = () => { 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() { @@ -3463,79 +1351,7 @@ const createCustomOverlayJd = (polygon, indexx) => { }); 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]); -}; //------------------------------ //---------村社级别------------ //加载村社信息 @@ -3584,12 +1400,6 @@ const addPolygonCountyCs = () => { 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) { //创建面 @@ -3604,56 +1414,44 @@ const addPolygonCountyCs = () => { }); 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]); - }); - await getDataBq(cfJd.value, cfCs.value); - if (tsbq_pp.value.includes(choose.value.person)) { - await getDataBqs3(cfJd.value, cfCs.value, choose.value.person); + if (is_type.value == "街道") { } else { + if (drawing.value) { + return; + } + loadingss.value = true; + cs_dd_arr.value = []; + xuanzhongCs.value = []; + 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); + } + }); + 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_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + loadingss.value = false; } - - await getDatas2(cfJd.value, choose.value.person, cfCs.value); - - loadingss.value = false; }); } }); @@ -3666,9 +1464,6 @@ const addCsChoose = () => { //地区的坐标范围 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, { @@ -3691,9 +1486,6 @@ const addCsUnChoose = () => { //地区的坐标范围 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, { @@ -3717,7 +1509,6 @@ const addCsUnChoose = () => { // 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]); @@ -3747,11 +1538,9 @@ const addCsUnChoose = () => { }); 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); - } + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); loadingss.value = false; }); } @@ -3760,18 +1549,9 @@ const addCsUnChoose = () => { //创建村社 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() { @@ -3825,80 +1605,6 @@ const createCs = (polygon, indexx) => { }); 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() { @@ -3954,93 +1660,12 @@ const DGcreateCs = (polygon, indexx) => { 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; - } + showEdit.value=true; + changeCsqkId.value = polygon.id; } 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; @@ -4058,26 +1683,14 @@ const reset_font = () => { "scale(" + width / 1920 + "," + height / 1080 + ")"; } }; -const reset_font2 = () => { - let width = document.documentElement.clientWidth || document.body.clientWidth; - let height = - document.documentElement.clientHeight || document.body.clientHeight; - - document.querySelector(".detail").style.transformOrigin = "top left"; - document.querySelector(".detail").style.transform = - "scale(" + width / 1920 + "," + height / 1080 + ")"; -}; onMounted(async () => { - // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d"); + tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d"); loadingss.value = true; reset_font(); await getXzsj(); initMap(); - getData(); BMAP(); - getFwq(); getCssj(); - await getDataBqFirst(); loadingss.value = false; }); @@ -4099,420 +1712,6 @@ onMounted(async () => { z-index: 10; } -//左侧弹框 -.left { - box-sizing: border-box; - position: absolute; - left: 0; - bottom: 0; - width: 520px; - height: 960px; - background: linear-gradient( - 270deg, - rgba(0, 52, 131, 0.69) 0%, - rgba(0, 32, 83, 0.77) 50%, - rgba(0, 60, 131, 0.74) 100% - ), - radial-gradient( - 128% 99% at 100% 46%, - rgba(0, 48, 125, 0.29) 0%, - rgba(0, 61, 134, 0.42) 100% - ); - box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); - backdrop-filter: blur(3px); - 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; - display: flex; - flex-flow: row wrap; - justify-content: space-between; - color: #ffffff; - height: 300px; - overflow: auto; - - .content_item { - cursor: pointer; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - padding: 18px; - padding-left: 24px; - padding-right: 5px; - width: 48%; - 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 { - 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: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::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); - // } - // } - - // .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; - } - } - - //特殊标签 - .tsbq { - margin-top: 30px; - - .content { - box-sizing: border-box; - margin-top: 20px; - display: flex; - flex-flow: row wrap; - justify-content: space-between; - color: #ffffff; - height: 220px; - overflow: auto; - - .content_item { - cursor: pointer; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - padding: 18px; - padding-left: 24px; - width: 48%; - // 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 { - // 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_name { - position: relative; - } - - .content_item_name::before { - content: ""; - position: absolute; - width: 3px; - height: 3px; - background: rgb(255, 226, 41); - border: 3px solid rgba(255, 226, 41, 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::-webkit-scrollbar { - display: none; - } - } -} - -//右侧弹框 -.right { - box-sizing: border-box; - position: absolute; - right: 0; - bottom: 0; - width: 520px; - height: 960px; - background: linear-gradient( - 270deg, - rgba(0, 52, 131, 0.69) 0%, - rgba(0, 32, 83, 0.77) 50%, - rgba(0, 60, 131, 0.74) 100% - ), - radial-gradient( - 128% 99% at 100% 46%, - rgba(0, 48, 125, 0.29) 0%, - rgba(0, 61, 134, 0.42) 100% - ); - box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); - backdrop-filter: blur(3px); - padding: 30px 15px; - display: flex; - flex-direction: column; - z-index: 12; - overflow: hidden; - transition: opacity 1s; - .jbggfwq { - .jbggfwq_content { - height: 520px; - overflow: auto; - display: flex; - flex-direction: column; - margin-top: 15px; - margin-bottom: 34px; - - .jbggfwq_content_item { - margin-bottom: 5px; - display: flex; - // align-items: center; - color: #ffffff; - .jbggfwq_content_item_left { - margin-right: 10px; - width: 80px; - height: 48px; - line-height: 48px; - } - - .jbggfwq_content_item_right { - width: 370px; - display: flex; - flex-flow: row wrap; - overflow: hidden; - // border-radius: 6px; - - .jbggfwq_content_item_right_item { - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - width: 92px; - height: 48px; - font-weight: 500; - text-align: center; - font-size: 16px; - line-height: 28px; - background: rgba(124, 151, 180, 0.8); - margin-bottom: 4px; - position: relative; - // padding: 10px; - /* 必须设置 position 属性以便伪元素定位 */ - // border-radius: 5px; - } - - .jbggfwq_content_item_right_item::after { - content: ""; - display: block; - width: 1px; - height: 18px; - background-color: #fff; - position: absolute; - 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; - } - - :last-child.jbggfwq_content_item_right_item::after { - opacity: 0; - } - - .choose { - background-image: url(@/assets/images/map/choose.png); - background-repeat: no-repeat; - background-size: 100% 100%; - } - } - } - } - - .jbggfwq_content::-webkit-scrollbar { - display: none; - } - } - - .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: 54px; - cursor: pointer; - margin-bottom: 20px; - color: #ffffff; - display: flex; - align-items: center; - justify-content: center; - background: rgba(124, 151, 180, 0.8); - border-radius: 5px; - .zyys_content_item_left { - width: 18px; - height: 18px; - margin-right: 3px; - } - - .zyys_content_item_right { - font-weight: 500; - font-size: 16px; - } - } - - .wz { - width: 150px; - } - - .choose { - background-image: url(@/assets/images/map/choose.png); - background-repeat: no-repeat; - background-size: 100% 100%; - } - } - .zyys_content::-webkit-scrollbar { - display: none; - } - } -} //加载动画 .loadBody { width: 100%; @@ -4681,208 +1880,18 @@ onMounted(async () => { 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; - align-items: center; - font-family: titletheRightWay; - font-size: 30px; - font-weight: 900; - // line-height: 44px; - letter-spacing: 4px; - margin-bottom: 15px; - background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%); - /* 使文字没有背景颜色的背景 */ - background-clip: text; - /* 为了兼容性，添加渐变背景到IE */ - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - padding-left: 32px; - span { - display: block; - font-family: titletheRightWay; - font-size: 32px; - white-space: nowrap; - font-weight: normal; - // font-weight: 900; - // line-height: 44px; - letter-spacing: 4px; - margin-bottom: 18px; - background: linear-gradient( - 180deg, - #ffffff 0%, - #ffffff 40%, - #00ffff 100% - ); - /* 使文字没有背景颜色的背景 */ - background-clip: text; - /* 为了兼容性，添加渐变背景到IE */ - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - } - - // .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; +.chooseBj { + cursor: pointer; + z-index: 100; + position: absolute; + color: #ffffff; + top: 12%; + left: 5%; + background: #7aceff; + padding: 5px; + border-radius: 5px; display: flex; align-items: center; - margin-top: 4px; - - .progress-wrapper { - display: flex; - align-items: center; - position: relative; - width: 100%; - } - - .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; + opacity: 0.8; }