This commit is contained in:
duanxiaohai
commit
5fb88a2d2f
|
|
@ -68,7 +68,7 @@ const router = createRouter({
|
|||
{
|
||||
name: '首页地图2',
|
||||
path: '/home/index/map2',
|
||||
component: () => import('../view/map_copy.vue'),
|
||||
component: () => import('../view/sy_mapcopy.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,7 +23,13 @@
|
|||
:key="index"
|
||||
>
|
||||
<div class="content_item_name">{{ ageLess0(item.ages) }}</div>
|
||||
<div class="content_item_value">{{ item.rksl }}</div>
|
||||
<div class="content_item_bg" v-if="index!=0 &&index!=1"></div>
|
||||
<div class="content_item_value">
|
||||
<div class="content_item_percent" v-if="item.ages != '总人口'">
|
||||
{{ item.percent }}%
|
||||
</div>
|
||||
{{ item.rksl }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,6 +120,7 @@ import {
|
|||
watch,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import tools from "@/utils/tools";
|
||||
import initializeMap from "@/utils/mapInitializer.js";
|
||||
import http from "@/utils/request.js";
|
||||
import mapTown from "@/assets/json/ly.json";
|
||||
|
|
@ -307,7 +314,7 @@ const tsbq_id_total = ref([
|
|||
id: "tyjr",
|
||||
},
|
||||
{
|
||||
name: "困难儿童",
|
||||
name: "困境儿童",
|
||||
id: "kjer",
|
||||
},
|
||||
]);
|
||||
|
|
@ -316,7 +323,7 @@ const chooseCsList = ref([]);
|
|||
//单选未中社区区块
|
||||
const unChooseList = ref([]);
|
||||
const sqname = ref();
|
||||
const townName = ref();
|
||||
// const townName = ref();
|
||||
//地图街道设置(存放数量)
|
||||
const mapTownCount = reactive([
|
||||
{
|
||||
|
|
@ -410,105 +417,6 @@ const personTotal = ref([
|
|||
ages: "总人口",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "1岁以下",
|
||||
value: "26737",
|
||||
ages: "1岁以下",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "1岁",
|
||||
value: "26737",
|
||||
ages: "1岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "2岁",
|
||||
value: "26737",
|
||||
ages: "2岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "3岁",
|
||||
value: "26737",
|
||||
ages: "3岁",
|
||||
age: "1000",
|
||||
},
|
||||
|
||||
{
|
||||
id: 5,
|
||||
name: "4岁",
|
||||
value: "26737",
|
||||
ages: "4岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "5岁",
|
||||
value: "26737",
|
||||
ages: "5岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "6岁",
|
||||
value: "26737",
|
||||
ages: "6岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "7岁",
|
||||
value: "26737",
|
||||
ages: "7岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "8岁",
|
||||
value: "26737",
|
||||
ages: "8岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "9岁",
|
||||
value: "26737",
|
||||
ages: "9岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "10岁",
|
||||
value: "26737",
|
||||
ages: "10岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "11岁",
|
||||
value: "26737",
|
||||
ages: "11岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "12岁",
|
||||
value: "26737",
|
||||
ages: "12岁",
|
||||
age: "1000",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "死亡总人口",
|
||||
value: "5650",
|
||||
ages: "死亡总人口",
|
||||
age: "1000",
|
||||
},
|
||||
]);
|
||||
//特殊标签
|
||||
const tsbqTotal = ref([
|
||||
|
|
@ -1025,22 +933,25 @@ const getData = async (i, e) => {
|
|||
},
|
||||
{
|
||||
id: "6666",
|
||||
name: "死亡总人口",
|
||||
name: "近一年死亡",
|
||||
value: "5650",
|
||||
ages: "死亡总人口",
|
||||
ages: "近一年死亡",
|
||||
age: "1000",
|
||||
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].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,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1086,22 +997,25 @@ const getDatas = async (e, i) => {
|
|||
},
|
||||
{
|
||||
id: "6666",
|
||||
name: "死亡总人口",
|
||||
name: "近一年死亡",
|
||||
value: "5650",
|
||||
ages: "死亡总人口",
|
||||
ages: "近一年死亡",
|
||||
age: "1000",
|
||||
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].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,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1192,22 +1106,24 @@ const getDatas2 = async (e, i, cs) => {
|
|||
},
|
||||
{
|
||||
id: "6666",
|
||||
name: "死亡总人口",
|
||||
name: "近一年死亡",
|
||||
value: "5650",
|
||||
ages: "死亡总人口",
|
||||
ages: "近一年死亡",
|
||||
age: "1000",
|
||||
},
|
||||
];
|
||||
personTotal.value[0].rksl = res.data.total;
|
||||
personTotal.value[0].ages = "总人口";
|
||||
personTotal.value[1].rksl = res.data.swrs;
|
||||
personTotal.value[1].ages = "死亡";
|
||||
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,
|
||||
});
|
||||
});
|
||||
xkzCenter.map((item) => {
|
||||
|
|
@ -1223,6 +1139,7 @@ const getDatas2 = async (e, i, cs) => {
|
|||
};
|
||||
//特殊标签
|
||||
//获取特殊标签
|
||||
//特殊标签列表数据请求
|
||||
const getDataBq = async (jd, cs) => {
|
||||
await http
|
||||
.get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`)
|
||||
|
|
@ -1246,27 +1163,6 @@ const getDataBq = async (jd, cs) => {
|
|||
});
|
||||
};
|
||||
const getDataBqs = async (jd, cs, bq) => {
|
||||
let data = {};
|
||||
let vv = 0;
|
||||
if (cs == "" && jd == "") {
|
||||
data = {
|
||||
tsbq: bq,
|
||||
};
|
||||
vv = 1;
|
||||
} else if (cs == "") {
|
||||
data = {
|
||||
xzjd: jd,
|
||||
tsbq: bq,
|
||||
};
|
||||
vv = 2;
|
||||
} else {
|
||||
data = {
|
||||
xzjd: jd,
|
||||
tsbq: bq,
|
||||
csq: cs,
|
||||
};
|
||||
vv = 3;
|
||||
}
|
||||
await getDataBqJD(bq);
|
||||
getDataBqs2(cfJd.value, cfCs.value, bq);
|
||||
// await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
|
||||
|
|
@ -1282,6 +1178,7 @@ const getDataBqs = async (jd, cs, bq) => {
|
|||
// }
|
||||
// });
|
||||
};
|
||||
//特殊标签获取街道内部人数
|
||||
const getDataBqs2 = async (jd, cs, bq, f = true) => {
|
||||
//f用来判断执不执行changeRs2
|
||||
let data = {};
|
||||
|
|
@ -1349,7 +1246,7 @@ const getDataBqs2 = async (jd, cs, bq, f = true) => {
|
|||
});
|
||||
}
|
||||
} else {
|
||||
console.log("hhhhh", xkzCenter);
|
||||
// console.log("hhhhh", xkzCenter);
|
||||
if (choose.value.person == "") {
|
||||
addCs();
|
||||
} else {
|
||||
|
|
@ -1428,10 +1325,10 @@ const to_jd = (item_name) => {
|
|||
map.removeOverlay(currentMarker);
|
||||
}
|
||||
|
||||
townName.value = item_name;
|
||||
// townName.value = item_name;
|
||||
// if (item_name == cfJd.value) {
|
||||
// } else {
|
||||
console.log(111, choose.value.person);
|
||||
// console.log(111, choose.value.person);
|
||||
cfJd.value = item_name;
|
||||
let jdCenter = [];
|
||||
if (item_name == "溪口镇") {
|
||||
|
|
@ -1455,10 +1352,14 @@ const to_jd = (item_name) => {
|
|||
} else if (choose.value.person != "") {
|
||||
if (choose.value.person == "9999") {
|
||||
getDatas("溪口镇", "");
|
||||
} else {
|
||||
if (choose.value.person == 1) {
|
||||
getDatas("溪口镇", "0"); //0岁传字符串
|
||||
} else {
|
||||
getDatas("溪口镇", choose.value.person - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
loadCs();
|
||||
addPolygonCountyCs();
|
||||
mapTownCount.map((item) => {
|
||||
|
|
@ -1514,10 +1415,9 @@ const addPolygonCounty = () => {
|
|||
|
||||
map.addOverlay(polygon);
|
||||
polygon.addEventListener("click", () => {
|
||||
townName.value = item.name;
|
||||
// townName.value = item.name;
|
||||
if (item.name == cfJd.value) {
|
||||
} else {
|
||||
console.log(111, choose.value.person);
|
||||
cfJd.value = item.name;
|
||||
let jdCenter = [];
|
||||
if (item.name == "溪口镇") {
|
||||
|
|
@ -1542,10 +1442,14 @@ const addPolygonCounty = () => {
|
|||
} else if (choose.value.person != "") {
|
||||
if (choose.value.person == "9999") {
|
||||
getDatas("溪口镇", "");
|
||||
} else {
|
||||
if (choose.value.person == 1) {
|
||||
getDatas("溪口镇", "0"); //0岁传字符串
|
||||
} else {
|
||||
getDatas("溪口镇", choose.value.person - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (title_jd.value == item.name) {
|
||||
} else {
|
||||
title_jd.value = item.name;
|
||||
|
|
@ -1660,7 +1564,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
|
|||
title.appendChild(document.createTextNode(this.properties.title));
|
||||
content.appendChild(div);
|
||||
var number = document.createElement("div");
|
||||
number.style.fontSize = "11px";
|
||||
number.style.fontSize = "12px";
|
||||
number.style.fontWeight = "600";
|
||||
number.style.color = "#FEFF6C";
|
||||
number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)";
|
||||
|
|
@ -1921,7 +1825,7 @@ const addCsUnChoose = () => {
|
|||
cs_dd_arr.value.map((item, index) => {
|
||||
DGcreateCs2(item, index);
|
||||
});
|
||||
}, 800);
|
||||
}, 400);
|
||||
}
|
||||
addCsChoose();
|
||||
addCsUnChoose();
|
||||
|
|
@ -2224,6 +2128,7 @@ const reset_font = () => {
|
|||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
tools.data.set("token","6b0e380b4a8f46baae4923f83faf670d");
|
||||
reset_font();
|
||||
initMap();
|
||||
getData();
|
||||
|
|
@ -2294,23 +2199,36 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
padding: 18px;
|
||||
padding-left: 24px;
|
||||
padding-right: 5px;
|
||||
width: 48%;
|
||||
height: 57px;
|
||||
position: relative;
|
||||
// height: 57px;
|
||||
background-image: url(@/assets/images/map/unchoose.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.content_item_bg{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
background:RGBA(53, 85, 114, 0.8);
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
.content_item:first-child {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
padding: 18px;
|
||||
padding-left: 24px;
|
||||
width: 100%;
|
||||
height: 57px;
|
||||
// height: 57px;
|
||||
background-image: url(@/assets/images/map/unchoose.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -2322,9 +2240,10 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
padding: 18px;
|
||||
padding-left: 24px;
|
||||
width: 100%;
|
||||
height: 57px;
|
||||
// height: 57px;
|
||||
background-image: url(@/assets/images/map/unchoose.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -2346,6 +2265,14 @@ onMounted(() => {
|
|||
top: 7.5px;
|
||||
left: -13px;
|
||||
}
|
||||
.content_item_value {
|
||||
display: flex;
|
||||
.content_item_percent {
|
||||
margin-right: 5px;
|
||||
color: #6bfeff;
|
||||
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.choose {
|
||||
background-image: url(@/assets/images/map/choose.png) !important;
|
||||
|
|
@ -2379,13 +2306,15 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
padding: 18px;
|
||||
padding-left: 24px;
|
||||
width: 48%;
|
||||
height: 57px;
|
||||
// height: 57px;
|
||||
background-image: url(@/assets/images/map/unchoose.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
// .content_item:last-child {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue