资源要素
This commit is contained in:
parent
318269d6ea
commit
56011c95af
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -211,4 +211,8 @@ onMounted(() => {
|
|||
font-size: 18px;
|
||||
border: none;
|
||||
}
|
||||
:deep(.el-table) {
|
||||
--el-table-border-color: #62696d;
|
||||
// border: 1px solid #62696d;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="right" style="width: 517px" v-show="!showEdit">
|
||||
<div class="zyys">
|
||||
<div class="zyys">
|
||||
<div class="title">
|
||||
<div class="title_name"><span> 基本公共服务资源要素</span></div>
|
||||
</div>
|
||||
|
|
@ -155,7 +155,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="btns" v-if="showEdit">
|
||||
<div
|
||||
|
|
@ -412,6 +411,7 @@ import j3_map from "@/assets/images/map/j3_map.png";
|
|||
import j4_map from "@/assets/images/map/j4_map.png";
|
||||
import j5_map from "@/assets/images/map/j5_map.png";
|
||||
import j7_map from "@/assets/images/map/j7_map.png";
|
||||
import j9_map from "@/assets/images/map/j9_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";
|
||||
|
|
@ -481,15 +481,20 @@ const message = ref({});
|
|||
//存放渲染的地块及图标的数组
|
||||
const jdm_arr = ref([]); //街道名
|
||||
const jdm_number_arr = ref([]); //街道名(+数量)
|
||||
const fwq_list_arr = ref([]); //基本公共服务圈
|
||||
const fwq_dk = ref([]); //基本公共服务圈村社地块
|
||||
const fwq_center = 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 fwq_list_arr = ref([]); //基本公共服务圈
|
||||
const fwq_dk = ref([]); //基本公共服务圈村社地块
|
||||
const fwq_center = ref([]); //基本公共服务圈中心点
|
||||
//---------
|
||||
const zyys_dk = ref([]); //资源要素地块
|
||||
const zyys_center = ref([]); //资源要素中心点(人口数)
|
||||
//---------
|
||||
//存放村社区块
|
||||
const csqk = ref({});
|
||||
var cssj;
|
||||
|
|
@ -880,7 +885,10 @@ const yaosuTotal = ref([
|
|||
id: 9,
|
||||
name: "卫生服务中心",
|
||||
img: j9,
|
||||
img_map: j9_map,
|
||||
wz: true,
|
||||
tooltip: "zyysmc",
|
||||
url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=卫生服务中心",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
|
|
@ -1096,7 +1104,6 @@ const initMap = () => {
|
|||
} else {
|
||||
totalType.value = 2;
|
||||
map.setMapType(BMAP_SATELLITE_MAP);
|
||||
|
||||
}
|
||||
map.enableScrollWheelZoom(true);
|
||||
goMapCenter([119.178783, 29.034583], 11);
|
||||
|
|
@ -1819,28 +1826,35 @@ const clear = () => {
|
|||
xkzDk.length = 0;
|
||||
};
|
||||
//清空选中年龄及标签(街道级别)
|
||||
const clearPerson=()=>{
|
||||
if(choose.value.person){
|
||||
choose.value.person='';
|
||||
const clearPerson = () => {
|
||||
if (choose.value.person) {
|
||||
choose.value.person = "";
|
||||
jdm_number_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(jdm_number_arr.value[index]);
|
||||
});
|
||||
addJd();
|
||||
}
|
||||
}
|
||||
};
|
||||
//清空要素
|
||||
const clearyaosu=()=>{
|
||||
|
||||
if(yaosuList.value.length!=0){
|
||||
yaosuList.value.forEach((name,index)=>{
|
||||
const clearyaosu = () => {
|
||||
if (yaosuList.value.length != 0) {
|
||||
yaosuList.value.forEach((name, index) => {
|
||||
yaosuIcon.value[name].sj.forEach((item, index) => {
|
||||
map.removeOverlay(yaosuIcon.value[name].sj[index].overlay);
|
||||
map.removeOverlay(item.overlay);
|
||||
});
|
||||
});
|
||||
})
|
||||
yaosuList.value.length=0;
|
||||
}
|
||||
|
||||
}
|
||||
zyys_dk.value.forEach((item, index) => {
|
||||
map.removeOverlay(item); // 清空服务圈 图标
|
||||
});
|
||||
zyys_center.value.forEach((item, index) => {
|
||||
map.removeOverlay(item); // 清空服务圈 图标
|
||||
});
|
||||
yaosuList.value.length = 0;
|
||||
zyys_dk.value.length = 0;
|
||||
zyys_center.value.length = 0;
|
||||
}
|
||||
};
|
||||
//定义地图中点
|
||||
const goMapCenter = (point, zoom) => {
|
||||
map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
|
||||
|
|
@ -2737,7 +2751,8 @@ const changeys = (name) => {
|
|||
name == "小学" ||
|
||||
name == "初中" ||
|
||||
name == "高中" ||
|
||||
name == "医院"
|
||||
name == "医院" ||
|
||||
name == "卫生服务中心"
|
||||
) {
|
||||
getZyys(url, name, img, img_map, tooltip);
|
||||
}
|
||||
|
|
@ -2837,21 +2852,172 @@ const createZyys = (polygon, indexx, name, tooltip) => {
|
|||
}
|
||||
);
|
||||
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;
|
||||
yaosuIcon.value[name].sj[indexx].overlay.addEventListener(
|
||||
"click",
|
||||
async () => {
|
||||
switch (name) {
|
||||
case "摄像头":
|
||||
sxtShow.deviceCode = polygon.sbbm;
|
||||
sxtShow.name = polygon.sbmc;
|
||||
getCameraUrl();
|
||||
break;
|
||||
case "AED":
|
||||
break;
|
||||
case "体育场所":
|
||||
break;
|
||||
case "南孔书院":
|
||||
break;
|
||||
case "养老机构":
|
||||
break;
|
||||
case "汽车充电桩":
|
||||
break;
|
||||
default:
|
||||
if (zyys_dk.value.length) {
|
||||
zyys_dk.value.forEach((item, index) => {
|
||||
map.removeOverlay(item); // 清空服务圈 图标
|
||||
});
|
||||
zyys_center.value.forEach((item, index) => {
|
||||
map.removeOverlay(item); // 清空服务圈 图标
|
||||
});
|
||||
}
|
||||
|
||||
await get_dk_zyys(
|
||||
polygon.xzjd,
|
||||
polygon.csq,
|
||||
polygon.num,
|
||||
polygon.zyysmc
|
||||
);
|
||||
if (zyys_data.value.point.length == 0) {
|
||||
ElMessage.warning({
|
||||
message: "地图上未找到对应村社",
|
||||
});
|
||||
}else{
|
||||
xr_dk_center_zyys();
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
//资源要素(获取对应村社的地块)
|
||||
const zyys_data = ref({
|
||||
point: [],
|
||||
center: [],
|
||||
name: "",
|
||||
});
|
||||
const get_dk_zyys = async (xzjd, csq, number, name) => {
|
||||
zyys_dk.value.length = 0;
|
||||
zyys_center.value.length = 0;
|
||||
zyys_data.value.point.length = 0;
|
||||
zyys_data.value.center.length = 0;
|
||||
zyys_data.value.name = "";
|
||||
await loadCs(xzjd);
|
||||
zyys_data.value.name = csq;
|
||||
xkzDk.forEach((dk) => {
|
||||
if (csq == dk.name) {
|
||||
zyys_data.value.point.push(dk);
|
||||
}
|
||||
});
|
||||
xkzCenter.forEach((center) => {
|
||||
if (csq == center.name) {
|
||||
let a = { ...center, num: number };
|
||||
zyys_data.value.center.push(a);
|
||||
}
|
||||
});
|
||||
};
|
||||
//资源要素(渲染地块)
|
||||
const xr_dk_center_zyys = async () => {
|
||||
zyys_data.value.point.map((item, index) => {
|
||||
let points = [];
|
||||
item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
|
||||
if (points.length) {
|
||||
//创建面
|
||||
zyys_dk.value[index] = new BMapGL.Polygon(points, {
|
||||
strokeColor: "blue",
|
||||
strokeWeight: 2,
|
||||
strokeOpacity: 0.8,
|
||||
fillColor: "blue",
|
||||
fillOpacity: 0.3,
|
||||
zIndex: 5,
|
||||
});
|
||||
map.addOverlay(zyys_dk.value[index]);
|
||||
}
|
||||
});
|
||||
zyys_data.value.center.map((item, index) => {
|
||||
Xr_zyysNum(item, index);
|
||||
});
|
||||
};
|
||||
//资源要素(渲染地块)
|
||||
|
||||
const Xr_zyysNum = (polygon, indexx) => {
|
||||
console.log(4444444, ...polygon.center);
|
||||
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;
|
||||
}
|
||||
zyys_center.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(zyys_center.value[indexx]);
|
||||
|
||||
zyys_center.value[indexx].addEventListener("click", () => {
|
||||
console.log(polygon.name);
|
||||
// cfCsZs.value = polygon.name;
|
||||
// open_detail();
|
||||
});
|
||||
};
|
||||
//获取摄像头地址
|
||||
const getCameraUrl = () => {
|
||||
// camera.deviceCode = dataMyTag.camera.sbbm;
|
||||
|
|
@ -3690,8 +3856,8 @@ const addPolygonCounty = () => {
|
|||
// townName.value = item.name;
|
||||
if (item.name == cfJd.value) {
|
||||
} else {
|
||||
if(yaosuList.value.length!=0){
|
||||
return
|
||||
if (yaosuList.value.length != 0) {
|
||||
return;
|
||||
}
|
||||
loadingss.value = true;
|
||||
clear();
|
||||
|
|
@ -3906,7 +4072,6 @@ const loadCs = async (name) => {
|
|||
});
|
||||
}
|
||||
}
|
||||
console.log(6666);
|
||||
};
|
||||
//添加村社区块
|
||||
const addPolygonCountyCs = () => {
|
||||
|
|
@ -4722,7 +4887,7 @@ onMounted(async () => {
|
|||
overflow: hidden;
|
||||
transition: opacity 1s;
|
||||
.jbggfwq {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
.jbggfwq_content {
|
||||
height: 540px;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ export default defineConfig({
|
|||
// 第一个代理
|
||||
"/api": {
|
||||
// 匹配到啥来进行方向代理
|
||||
// target: "http://10.0.0.7:8095/", //刘进
|
||||
target: "https://jzzf.longyou.gov.cn:998/", //线上
|
||||
target: "http://10.0.0.7:8095/", //刘进
|
||||
// target: "https://jzzf.longyou.gov.cn:998/", //线上
|
||||
// target: "http://220.191.238.50:996/", //线上
|
||||
// target: "https://zzdyyfb.dsjj.qz.gov.cn/web/mgop/gov-open/zj/2002428903/reserved/", //线上
|
||||
changeOrigin: true, //是否支持跨域
|
||||
|
|
|
|||
Loading…
Reference in New Issue