diff --git a/src/assets/json/cssj.json b/src/assets/json/cssj.json index 3d14849..1d618f9 100644 --- a/src/assets/json/cssj.json +++ b/src/assets/json/cssj.json @@ -4842,6 +4842,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "小高山村", + "center":[119.19367045599486,29.043581738399308], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -4925,6 +4926,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "桥蔬村", + "center":[119.18395255988275,29.039233943618996], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -5080,6 +5082,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "湖底叶村", + "center":[119.20020794974299,29.049326754736285], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -5183,6 +5186,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "唐尧村", + "center":[119.21045591291573,29.044513384628157], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -5246,6 +5250,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "项家村", + "center":[119.21512336122863,29.050098532339906], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -5325,6 +5330,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "张王村", + "center":[119.22282026434472,29.055509301153847], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -5372,6 +5378,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "槐王村", + "center":[119.21650880378954,29.058485101751426], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -5527,6 +5534,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "桥下村", + "center":[119.18147891359968,29.029295432003362], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -5578,6 +5586,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "童家村", + "center":[119.21850999859971,29.055103503441067], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -5693,6 +5702,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "十里铺村", + "center":[119.22158875984614,29.037787965011955], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -5956,6 +5966,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "高仙塘村", + "center":[119.2254365536337,29.021743550656367], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -6175,6 +6186,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "新建村", + "center":[119.22759055128023,29.032206249403114], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -6422,6 +6434,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "晨东社区", + "center":[119.2305984612208,29.04078674871668], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -6513,6 +6526,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "鸡鸣村", + "center":[119.19066674265112,29.019666576963417], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -6648,6 +6662,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "下杨村", + "center":[119.18165560261991,29.00910485423712], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -6823,6 +6838,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "上杨村", + "center":[119.19408508395115,28.997727909784622], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -7058,6 +7074,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "灵江社区", + "center":[119.2065687544709,29.021996221855108], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -7265,6 +7282,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "方坦村", + "center":[119.19514023609747,28.98078498164279], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -8300,6 +8318,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "横路祝村", + "center":[119.21048701444509,28.998745614406825], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -8855,6 +8874,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "官村", + "center":[119.18792157912283,28.95682479002027], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -8930,6 +8950,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "瑶山村", + "center":[119.20798479489451,28.97752916932524], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -9029,6 +9050,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "街路村", + "center":[119.20797707469151,28.98630701739274], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -9508,6 +9530,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "上圩头村", + "center":[119.2105089896564,28.964812143264005], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -10283,6 +10306,7 @@ "properties": { "gml_id": "layer_township_pg.28416", "name": "岩头村", + "center":[119.2296538271089,28.980889736490933], "layer": "乡镇", "code": "330825002000", "grade": 4, @@ -10487,6 +10511,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "杨家村", + "center":[119.20296386968322,29.063011673534746], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -10902,6 +10927,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "张家埠村", + "center":[119.20546399708938,29.075877275427057], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -11345,6 +11371,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "周家村", + "center":[119.23225107644114,28.99614720549206], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -11468,6 +11495,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "范家村", + "center":[119.22225056681651,29.073680824117893], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -13031,6 +13059,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "曹垅村", + "center":[119.23903713654366,29.07681859722188], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -13222,6 +13251,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "隔塘村", + "center":[119.23296539855718,29.05422447650217], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -13273,6 +13303,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "七都村", + "center":[119.2426087471239,29.060187299856008], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -13444,6 +13475,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "马报桥村", + "center":[119.24439455241397,29.044494911649114], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -14431,6 +14463,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "文林村", + "center":[119.23117959326706,29.011847019541374], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -14714,6 +14747,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "客路村", + "center":[119.24439455241397,29.00462540436998], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -14981,6 +15015,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "希唐村", + "center":[119.2686815043596,29.010277146579696], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -15088,6 +15123,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "大路村", + "center":[119.26796718224357,29.051713709822216], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -15155,6 +15191,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "下库村", + "center":[119.26725286012751,29.038845061436813], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -15226,6 +15263,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "下潘村", + "center":[119.25368073992263,29.06144258669738], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -15533,6 +15571,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "地圩村", + "center":[119.27439608128799,29.059245824591894], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -15668,6 +15707,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "塘马村", + "center":[119.26510989377935,29.073680824117904], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -15791,6 +15831,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "下叶村", + "center":[119.26475273272133,29.059559650644978], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -16034,6 +16075,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "竺溪桥村", + "center":[119.27475324234602,29.066463579645916], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -16165,6 +16207,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "新建村", + "center":[119.2279481259175,29.031780150548556], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -16400,6 +16443,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "联合村", + "center":[119.28975400678304,29.045750391471657], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -16455,6 +16499,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "溪底杜村", + "center":[119.2818964635065,29.018126270365357], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -16730,6 +16775,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "坪湖村", + "center":[119.30725489862621,29.05108600850329], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -16801,6 +16847,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "龙廻陈村", + "center":[119.29904019429165,29.037275603133075], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -17016,6 +17063,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "湖镇镇", + "center":[119.29153981207315,29.069915368969884], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -17507,6 +17555,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "洪畈村", + "center":[119.24975196828433,29.021893635738927], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -17622,6 +17671,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "上溪头村", + "center":[119.28153930244848,29.083721358222107], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -17765,6 +17815,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "新圆村", + "center":[119.29439710053735,29.08183883338317], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -18172,6 +18223,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "后陈村", + "center":[119.304040449104,29.083407606496095], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -18267,6 +18319,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "下童村", + "center":[119.3129694755546,29.085290102368987], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -18358,6 +18411,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "茆头村", + "center":[119.31975553565705,29.088113781001894], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -18485,6 +18539,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "童村", + "center":[119.32654159575952,29.084035108982587], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -18684,6 +18739,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "上下范村", + "center":[119.32654159575952,29.07650482425568], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -18755,6 +18811,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "星火村", + "center":[119.31082650920645,29.07587727542706], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -19282,6 +19339,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "彭塘村", + "center":[119.29725438900154,29.014672730136176], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -19341,6 +19399,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "东金村", + "center":[119.30904070391634,29.042925540164518], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -19736,6 +19795,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "历寺村", + "center":[119.3101121870904,29.019696022811615], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -19991,6 +20051,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "大坪村", + "center":[119.31832689142496,29.026602647190746], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -20150,6 +20211,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "下田畈村", + "center":[119.31868405248298,29.04010061071676], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -20413,6 +20475,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "童家仓村", + "center":[119.31725540825089,29.06363930151395], "layer": "乡镇", "code": "330825101000", "grade": 4, @@ -20864,6 +20927,7 @@ "properties": { "gml_id": "layer_township_pg.28417", "name": "蒲塘村", + "center":[119.32511295152742,29.04700585585809], "layer": "乡镇", "code": "330825101000", "grade": 4, diff --git a/src/assets/person/bg.png b/src/assets/person/bg.png new file mode 100644 index 0000000..47552e0 Binary files /dev/null and b/src/assets/person/bg.png differ diff --git a/src/assets/person/label.png b/src/assets/person/label.png new file mode 100644 index 0000000..ed8033f Binary files /dev/null and b/src/assets/person/label.png differ diff --git a/src/assets/person/person.png b/src/assets/person/person.png new file mode 100644 index 0000000..9788233 Binary files /dev/null and b/src/assets/person/person.png differ diff --git a/src/assets/person/tag-active.png b/src/assets/person/tag-active.png new file mode 100644 index 0000000..16b09cb Binary files /dev/null and b/src/assets/person/tag-active.png differ diff --git a/src/assets/person/tag.png b/src/assets/person/tag.png new file mode 100644 index 0000000..417a2f8 Binary files /dev/null and b/src/assets/person/tag.png differ diff --git a/src/router/index.js b/src/router/index.js index efe386d..bbf2f54 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -65,6 +65,11 @@ const router = createRouter({ path: '/home/index/table/details', component: () => import('../view/sy_details.vue'), }, + { + name: '人物图', + path: '/home/index/person', + component: () => import('../view/person/index.vue'), + }, // { // name: '首页地图2', // path: '/home/index/map2', diff --git a/src/view/dialog/dialogMapDp.vue b/src/view/dialog/dialogMapDp.vue new file mode 100644 index 0000000..9b9da19 --- /dev/null +++ b/src/view/dialog/dialogMapDp.vue @@ -0,0 +1,319 @@ + + + diff --git a/src/view/person/index.vue b/src/view/person/index.vue new file mode 100644 index 0000000..2f36d98 --- /dev/null +++ b/src/view/person/index.vue @@ -0,0 +1,541 @@ + + + + + \ No newline at end of file diff --git a/src/view/sy_mapcopy.vue b/src/view/sy_mapcopy.vue index 5dbcd3f..ce0eb5a 100644 --- a/src/view/sy_mapcopy.vue +++ b/src/view/sy_mapcopy.vue @@ -7,8 +7,22 @@
龙游县 + >{{ title_jd }} + >{{ title_cs }}
+
+
{{ ageLess0(item.ages) }}
+
{{ item.rksl }}人
+
-
{{ ageLess0(item.ages) }}
-
{{ item.rksl }}人 -
- ({{ item.percent }}%) -
+
({{ item.percent }}%)
-
特殊标签
+
+ 特殊标签 +
+ +
@@ -187,6 +209,7 @@ 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"; //--------定义参数------- //存放渲染的地块及图标的数组 const jdm_arr = ref([]); //街道名 @@ -920,6 +943,64 @@ const yaosuTotal = ref([ ]); // 鼠标点击添加点位 let currentMarker = null; // 用于保存当前标记的引用 +// 详情弹框 +const dialogShow = ref(false); +const tableType = reactive({ + url: "", + title: "人员列表", + columns: [ + { + label: "姓名", + property: "xm", + }, + { + label: "证件类型", + property: "szdw", + }, + { + label: "证件号码", + property: "zy", + }, + { + label: "政治面貌", + property: "zzmm", + }, + { + label: "居住状态", + property: "jzzt", + }, + { + label: "民族", + property: "mz", + }, + { + label: "性别", + property: "xb", + }, + { + label: "户口登记地", + property: "hkdjd", + }, + ], + data: [ + { + xm: "张三", + szdw: "身份证", + zy: "123456789012345678", + zzmm: "党员", + jzzt: "未居住", + mz: "汉族", + xb: "男", + hkdjd: "浙江省杭州市西湖区", + }, + ], +}); +// 表格分页 +const pagination = reactive({ + total: 100, + pageSize: 10, + currentPage: 1, +}); //--------定义方法---------------------------------------- //地图初始化 const initMap = () => { @@ -1065,6 +1146,29 @@ const getData = async (i, e) => { }); }); // console.log(personTotal.value,"111"); + // 年龄百分比 + 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; @@ -1082,28 +1186,6 @@ const getData = async (i, e) => { } }); }); - // 年龄百分比 - 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]; - } - }); - } } } catch (error) { console.error("Error fetching data:", error); @@ -1212,29 +1294,29 @@ const getDatas = async (e, i) => { } } - // 年龄百分比 - 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 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]; + } + }); + } } }); }; @@ -1293,28 +1375,29 @@ const getDatas2 = async (e, i, cs) => { } }); }); - // 年龄百分比 - 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 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]; + } + }); + } } }); }; @@ -1499,6 +1582,9 @@ const changeRs2 = (id) => { addJd2(); } }; +const changeys = (id) => { + choose.value.yaosu = id; +}; //点击街道，回到街道 const to_jd = (item_name) => { clear(); @@ -1513,47 +1599,67 @@ const to_jd = (item_name) => { // } else { // console.log(111, choose.value.person); cfJd.value = item_name; + //存放街道中心点 let jdCenter = []; - if (item_name == "溪口镇") { - BMAP(); - if (choose.value.person == "") { - getDatas("溪口镇", ""); - } - - getDataBq(cfJd.value, ""); - if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" - ) { - getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false); - getDatas("溪口镇", ""); - } 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(item_name); - addPolygonCountyCs(); - mapTownCount.map((item) => { - if (item.name == item_name) { - jdCenter = item.center; - } - }); - goMapCenter(jdCenter, 13); + BMAP(); + loadCs(item_name); + addPolygonCountyCs(); + getDataBq(cfJd.value, ""); + if (choose.value.person == "") { + getDatas(cfJd.value, ""); } + if ( + choose.value.person == "cjr" || + choose.value.person == "dibian" || + choose.value.person == "db" || + choose.value.person == "gxy" || + choose.value.person == "tnb" || + choose.value.person == "tyjr" || + choose.value.person == "kjer" + ) { + getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false); + getDatas(cfJd.value, ""); + } else if (choose.value.person != "") { + if (choose.value.person == "9999") { + getDatas(cfJd.value, ""); + } else { + if (choose.value.person == 1) { + getDatas(cfJd.value, "0"); //0岁传字符串 + } else { + getDatas(cfJd.value, choose.value.person - 1); + } + } + } + // if (title_jd.value == item.name) { + // } else { + // title_jd.value = item.name; + // } + + mapTownCount.map((itemm) => { + if (itemm.name == item_name) { + jdCenter = itemm.center; + } + }); + goMapCenter(jdCenter, 13); + // } }; +//详情 +const open_detail = () => { + dialogShow.value = true; + console.log(1111111111, dialogShow.value); +}; +const close = () => { + dialogShow.value = false; + pagination.total = 100; +}; +//表格分页 +const handlePagination = (current) => { + pagination.currentPage = current; + getTable(tableType.url, pagination.currentPage); +}; +//获取人口详情接口 +const person_detail = () => {}; //--------公共服务圈----------- //点击服务圈村 const changeFwq = async (id, name, names) => { @@ -2068,7 +2174,7 @@ const addPolygonCountyCs = () => { }); map.addOverlay(cs_qk_arr.value[index]); cs_qk_arr.value[index].addEventListener("click", () => { - console.log("名字", item.name); + // console.log("名字", item.name); cfCs.value = item.name; title_cs.value = item.name; @@ -2328,7 +2434,7 @@ const createCs2 = (polygon, indexx) => { div.style.alignItems = "center"; div.style.cursor = "pointer"; div.style.padding = "5px"; - div.style.minWidth = "90px"; + 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); @@ -2385,6 +2491,10 @@ const createCs2 = (polygon, indexx) => { }, }); map.addOverlay(cs_number_name_arr.value[indexx]); + cs_number_name_arr.value[indexx].addEventListener("click", () => { + console.log(polygon.name); + open_detail(); + }); }; //添加单个村社 const DGcreateCs = (polygon, indexx) => { @@ -2463,7 +2573,7 @@ const DGcreateCs2 = (polygon, indexx) => { div.style.alignItems = "center"; div.style.cursor = "pointer"; div.style.padding = "5px"; - div.style.minWidth = "90px"; + 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); @@ -2520,6 +2630,10 @@ const DGcreateCs2 = (polygon, indexx) => { }, }); map.addOverlay(cs_dd_arr.value[indexx]); + cs_dd_arr.value[indexx].addEventListener("click", () => { + console.log(cfJd.value, polygon.name); + open_detail(); + }); }; //适配 const reset_font = () => { @@ -2539,7 +2653,7 @@ const reset_font = () => { } }; onMounted(() => { - tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d"); + // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d"); reset_font(); initMap(); getData(); @@ -2594,6 +2708,47 @@ onMounted(() => { //人口数 .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; + } + .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; @@ -2601,7 +2756,7 @@ onMounted(() => { flex-flow: row wrap; justify-content: space-between; color: #ffffff; - height: 350px; + height: 300px; overflow: auto; .content_item { @@ -2622,15 +2777,7 @@ onMounted(() => { 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; @@ -2646,53 +2793,57 @@ onMounted(() => { margin-bottom: 12px; } - .content_item:nth-child(2) { - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - padding: 18px; - padding-left: 24px; - width: 100%; - // height: 57px; - background-image: url(@/assets/images/map/unchoose.png); - background-repeat: no-repeat; - background-size: 100% 100%; - margin-bottom: 12px; - } + // .content_item:nth-child(2) { + // box-sizing: border-box; + // display: flex; + // align-items: center; + // justify-content: space-between; + // padding: 18px; + // padding-left: 24px; + // width: 100%; + // // height: 57px; + // background-image: url(@/assets/images/map/unchoose.png); + // background-repeat: no-repeat; + // background-size: 100% 100%; + // margin-bottom: 12px; + // } - .content_item_name { - position: relative; - } + // .content_item_name { + // position: relative; + // } - .content_item_name::before { - content: ""; - position: absolute; - width: 3px; - height: 3px; - background: #29ffc1; - border: 3px solid rgba(0, 255, 189, 0.31); - border-radius: 6px; - top: 7.5px; - left: -13px; - } + // .content_item_name::before { + // content: ""; + // position: absolute; + // width: 3px; + // height: 3px; + // background: #29ffc1; + // border: 3px solid rgba(0, 255, 189, 0.31); + // border-radius: 6px; + // top: 7.5px; + // left: -13px; + // } - .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_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; + // } + } + .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; } @@ -2932,7 +3083,7 @@ onMounted(() => { cursor: pointer; display: flex; font-family: YouSheBiaoTiHei; - font-size: 34px; + font-size: 30px; font-weight: 900; // line-height: 44px; letter-spacing: 4px; @@ -2943,15 +3094,15 @@ onMounted(() => { /* 为了兼容性，添加渐变背景到IE */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; - + padding-left: 23px; span { display: block; font-family: YouSheBiaoTiHei; - font-size: 34px; + font-size: 30px; font-weight: 900; // line-height: 44px; letter-spacing: 4px; - margin-bottom: 15px; + margin-bottom: 18px; background: linear-gradient( 180deg, #ffffff 0%, @@ -2976,6 +3127,7 @@ onMounted(() => { .age-container { position: relative; + left: 10px; width: 450px; height: 120px; display: flex; @@ -3103,4 +3255,22 @@ onMounted(() => { 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; +}