From be9015637015a9571da025f03d7139f5c630585a Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Wed, 23 Oct 2024 09:01:01 +0800 Subject: [PATCH 1/4] 1 --- src/view/echarts_jz/eP2.vue | 81 ++++++++++++++++++++----------------- 1 file changed, 44 insertions(+), 37 deletions(-) diff --git a/src/view/echarts_jz/eP2.vue b/src/view/echarts_jz/eP2.vue index e10fda0..5829085 100644 --- a/src/view/echarts_jz/eP2.vue +++ b/src/view/echarts_jz/eP2.vue @@ -3,7 +3,14 @@ +}; +var time; +const setChart = () => { + var myChart = echarts.init(chart.value); + myChart.setOption(data.option); + time = setInterval(() => { + angle = angle + 2; + myChart.setOption(data.option, true); + }, 100); +}; +onBeforeUnmount(() => { + if (time) { + clearInterval(time); + } +}); +// 使用生命钩子 +onBeforeMount(() => { + setTimeout(() => { + data.dataValue=props.list; + getOption(); + setChart(); + }, 600); +}); + \ No newline at end of file diff --git a/src/view/echarts_jz/eP3.vue b/src/view/echarts_jz/eP3.vue index 3187942..b471870 100644 --- a/src/view/echarts_jz/eP3.vue +++ b/src/view/echarts_jz/eP3.vue @@ -8,7 +8,25 @@ import { onMounted, onBeforeMount, reactive, ref } from "vue"; import * as echarts from "echarts"; const emit = defineEmits(["shuju"]); const props = defineProps({ - list: { + list1: { + type: Array, + default: () => { + return []; + }, + }, + list2: { + type: Array, + default: () => { + return []; + }, + }, + list3: { + type: Array, + default: () => { + return []; + }, + }, + year: { type: Array, default: () => { return []; @@ -43,13 +61,11 @@ const colors = [ ]; // const valueList = [20, 53, 47, 65, 29, 11, 10]; const data = reactive({ - list: [], option: {}, - Max: 20000, valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010], valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552], valueList3: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552], - xxname: ["1月", "2月", "3月", "4月","5月"], + year: [], }); // 注册5个面图形:左侧、前面、右面、上面、下面 //c0:左下角,c1:右下角,c2:右上角,c3:左上角 @@ -403,7 +419,7 @@ const getOption = () => { xAxis: [ { type: "category", - data: data.xxname, + data: data.year, axisLine: { show: false, }, @@ -417,13 +433,13 @@ const getOption = () => { color: "#fff", fontSize: 16, formatter: function (value) { - return value.length > 3 ? value.slice(0, 2) + "..." : value; + return value.length > 4 ? value.slice(0, 3) + "..." : value; }, }, }, { type: "category", - data: data.xxname, + data: data.year, axisLine: { show: false, }, @@ -441,7 +457,7 @@ const getOption = () => { ], yAxis: { min: 0, - max: data.Max, + // interval: 100, type: "value", axisLine: { @@ -756,31 +772,12 @@ const setChart = () => { emit("shuju", params.name, params.seriesIndex); }); }; -const getMaxCeilingValue = (arr) => { - let max = Math.max(...arr); // 找到数组中的最大值 - return Math.ceil(max / 100) * 100; // 将最大值向上取整到最近的100的倍数 -}; -const setChart1 = () => { - data.valueList = []; - data.xxname = []; - if (data.list.length !== 0) { - data.list.forEach((item) => { - data.xxname.push(item.name); //信息名 - data.valueList.push(item.num); //信息数 - }); - } -}; - onBeforeMount(() => { setTimeout(() => { - data.xxname.forEach((item, index) => { - props.list.forEach((itemm, indexx) => { - if (item == itemm.xzjd) { - data.valueList[index] = itemm.qrrs; - data.valueList2[index] = itemm.qcrs; - } - }); - }); + data.year=props.year; + data.valueList=props.list1; + data.valueList2=props.list2; + data.valueList3=props.list3; getOption(); setChart(); }, 800); diff --git a/src/view/echarts_jz/eP4.vue b/src/view/echarts_jz/eP4.vue index ae5de51..cb47afe 100644 --- a/src/view/echarts_jz/eP4.vue +++ b/src/view/echarts_jz/eP4.vue @@ -8,22 +8,22 @@ import * as echarts from "echarts"; const props = defineProps({ list: { - type: Array, + type: String, default: () => { - return {}; + return ''; }, }, }); const data = reactive({ option: {}, + dataValue: 0, }); let angle = 0; // 角度 - let dataValue = 86; const chart = ref(); // 创建DOM引用 const getOption = () => { data.option = { title: { - text: `{v|${dataValue}}{unit|%}`, + text: `{v|${data.dataValue}}{unit|次}`, x: "center", y: "center", textStyle: { @@ -224,14 +224,14 @@ animation: false, // 关闭饼图动画 data: [ { - value: dataValue, + value: data.dataValue, itemStyle: { color: "RGBA(0, 139, 255, 1)", }, }, { name: "未完成", - value: 100 - dataValue, + value: 100 - data.dataValue, label: { show: false, }, @@ -287,6 +287,7 @@ // 使用生命钩子 onBeforeMount(() => { setTimeout(() => { + data.dataValue=props.list getOption(); setChart(); }, 600); diff --git a/src/view/echarts_jz/zwfw1.vue b/src/view/echarts_jz/zwfw1.vue index cbe1845..e0bbcfd 100644 --- a/src/view/echarts_jz/zwfw1.vue +++ b/src/view/echarts_jz/zwfw1.vue @@ -40,34 +40,6 @@ const data1 = ref([ const getOption = () => { data.option = { - // legend: { - // selectedMode: false, - // itemWidth: 10, - // itemHeight: 10, - // itemGap: 10, - // icon: "circle", - // data: ["2.0收件数", "", "总收件数"], - // bottom: "3%", - // width: 380, - // textStyle: { - // color: "#ffffff", // 修改图例颜色为红色 - // }, - // formatter: function (params) { - // var num = ""; - // for (let i = 0; i < data.dataList.length; i++) { - // if (data.dataList[i].name == params) { - // num = data.dataList[i].value; - // } - // } - // if(params == "总收件数"){ - // return params + " " +num; - // }else{ - // return params + " " +num; - // } - - // }, - // }, - title: [ { text: `${data.percent}%`, diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index a7b5466..0b402c5 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -98,8 +98,11 @@
{{ item.name }}
@@ -120,8 +123,9 @@ :class="{ choose: yaosuList.includes(item.name), wz: item.wz == true, + Tsactive: !item.click, }" - @click="changeys(item.name)" + @click="item.click ? changeys(item.name) : ''" :key="index" > @@ -779,6 +783,13 @@ const PopulationRatio = ref([ ]); //特殊标签左侧数据 const tsbqTotal = ref([]); +const lingshibiaoqian = reactive([ + { + id: "临时标签", + name: "临时标签", + tagId: "555", + }, +]); const data = reactive({ serviceCircleList: [], fwqCoordinates: [], //服务圈经度 @@ -817,8 +828,8 @@ const yaosuTotal = ref([ name: "体育场所", img: j0, wz: false, + click: true, }, - { id: 1, name: "幼儿园", @@ -827,6 +838,7 @@ const yaosuTotal = ref([ wz: false, tooltip: "zyysmc", url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=幼儿园", + click: true, }, { id: 2, @@ -836,6 +848,7 @@ const yaosuTotal = ref([ wz: false, tooltip: "zyysmc", url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=小学", + click: true, }, { id: 3, @@ -845,6 +858,7 @@ const yaosuTotal = ref([ wz: false, tooltip: "zyysmc", url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=初中", + click: true, }, { id: 4, @@ -854,6 +868,7 @@ const yaosuTotal = ref([ wz: false, tooltip: "zyysmc", url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=高中", + click: true, }, { id: 5, @@ -863,12 +878,14 @@ const yaosuTotal = ref([ wz: false, tooltip: "zyysmc", url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=医院", + click: true, }, { id: 6, name: "南孔书院", img: j6, wz: false, + click: true, }, { id: 7, @@ -877,12 +894,14 @@ const yaosuTotal = ref([ img_map: j7_map, wz: false, tooltip: "name", + click: true, }, { id: 8, name: "汽车充电桩", img: j8, wz: true, + click: true, }, { id: 9, @@ -892,6 +911,7 @@ const yaosuTotal = ref([ wz: true, tooltip: "zyysmc", url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=卫生服务中心", + click: true, }, { id: 10, @@ -901,15 +921,133 @@ const yaosuTotal = ref([ wz: true, url: "/api/ggfwyth/ysyzt/getAeds", tooltip: "siteAddress", + click: true, }, { id: 11, name: "摄像头", img: j11, img_map: j11_map, - wz: false, + wz: true, url: "/api/ggfwyth/ysyzt/getJashsxt", tooltip: "sbmc", + click: true, + }, + + { + id: 25, + name: "菜市场", + img: j0, + wz: true, + click: false, + }, + { + id: 26, + name: "停车场", + img: j0, + wz: true, + click: false, + }, + + { + id: 21, + name: "党群服务中心", + img: j0, + wz: true, + click: false, + }, + { + id: 22, + name: "残疾人之家", + img: j0, + wz: true, + click: false, + }, + { + id: 23, + name: "百姓健身房", + img: j0, + wz: true, + click: false, + }, + { + id: 31, + name: "绿色跑道", + img: j0, + wz: true, + click: false, + }, + { + id: 24, + name: "便民服务中心", + img: j0, + wz: true, + click: false, + }, + + { + id: 27, + name: "老年活动室", + img: j0, + wz: true, + click: false, + }, + { + id: 28, + name: "篮球场", + img: j0, + wz: false, + click: false, + }, + { + id: 29, + name: "足球场", + img: j0, + wz: false, + click: false, + }, + { + id: 30, + name: "文化广场", + img: j0, + wz: false, + click: false, + }, + + { + id: 32, + name: "公厕", + img: j0, + wz: false, + click: false, + }, + { + id: 33, + name: "文化礼堂", + img: j0, + wz: false, + click: false, + }, + { + id: 34, + name: "农家书屋", + img: j0, + wz: false, + click: false, + }, + { + id: 20, + name: "助餐点", + img: j0, + wz: false, + click: false, + }, + { + id: 35, + name: "乡贤馆", + img: j0, + wz: false, + click: false, }, ]); //选中的资源要素 @@ -1180,8 +1318,7 @@ const getCssj = async () => { .then((res) => { if (res.code == 200) { cssj = JSON.parse(res.data); - console.log(1111111111,cssj); - + console.log(1111111111, cssj); } }); }; @@ -2493,6 +2630,7 @@ const getDataBq = async (jd, cs) => { name: itemm.bq, rksl: itemm.rs || 0, tagId: itemm.tagId, + click: true, }); b = 1; } @@ -2503,9 +2641,20 @@ const getDataBq = async (jd, cs) => { name: item.name, rksl: 0, tagId: item.tagId, + click: true, }); } }); + //添加临时标签 + lingshibiaoqian.forEach((item, index) => { + tsbqTotal.value.push({ + id: item.name, + name: item.name, + rksl: 0, + tagId: item.tagId, + click: false, + }); + }); } }); }; @@ -2527,6 +2676,17 @@ const getDataBqFirst = async () => { name: item.bq, rksl: item.rs || 0, tagId: item.tagId, + click: true, + }); + }); + //添加临时标签 + lingshibiaoqian.forEach((item, index) => { + tsbqTotal.value.push({ + id: item.name, + name: item.name, + rksl: 0, + tagId: item.tagId, + click: false, }); }); } @@ -2777,9 +2937,12 @@ const zyys_choose_cs = ref(""); 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); - }); + if (yaosuIcon.value[name]) { + yaosuIcon.value[name].sj.forEach((item, index) => { + map.removeOverlay(yaosuIcon.value[name].sj[index].overlay); + }); + } + if (name == zyys_choose_cs.value) { zyys_dk.value.forEach((item, index) => { map.removeOverlay(item); @@ -2818,9 +2981,10 @@ const changeys = (name) => { name == "卫生服务中心" ) { getZyys(url, name, img, img_map, tooltip); - } - if (name == "养老机构") { + } else if (name == "养老机构") { getZyys2(name, img, img_map, tooltip); + } else { + loadingss.value = false; } } }; @@ -3000,7 +3164,7 @@ const loadCs_zyys = async (jdname) => { zyysCenter.push({ id: v.id, name: v.properties.name, - jdname:jdname, + jdname: jdname, center: v.properties.center, }); } @@ -3020,57 +3184,11 @@ const get_dk_zyys = async (sj, xd, ssly) => { zyys_jd.forEach((item) => { loadCs_zyys(item); }); - zyysDk.forEach((dk) => { - let pdK = true; //判断sj有没有对应地块,没有就赋值0 - sj.forEach((item, index) => { - if (item.committee == dk.name) { - pdK = false; - let a = { - ...dk, - zt: item.zt, - }; - zyys_data.value.point.push(a); - } - }); - if (pdK) { - let a = { - ...dk, - zt: 0, - }; - zyys_data.value.point.push(a); - } - }); - zyysCenter.forEach((center) => { - let pdK = true; //判断sj有没有对应地块,没有就赋值0 - sj.forEach((item, index) => { - if (item.committee == center.name) { - pdK = false; - let b = { - ...center, - num: item.num, - town: item.town, - committee: item.committee, - ssly: ssly, - xd: xd, - }; - zyys_data.value.center.push(b); - } - }); - if (pdK) { - let b = { - ...center, - num: 0, - town: center.jdname, - committee: center.name, - ssly: ssly, - xd: xd, - }; - zyys_data.value.center.push(b); - } - }); - // sj.forEach((item, index) => { - // zyysDk.forEach((dk) => { + // zyysDk.forEach((dk) => { + // let pdK = true; //判断sj有没有对应地块,没有就赋值0 + // sj.forEach((item, index) => { // if (item.committee == dk.name) { + // pdK = false; // let a = { // ...dk, // zt: item.zt, @@ -3078,8 +3196,19 @@ const get_dk_zyys = async (sj, xd, ssly) => { // zyys_data.value.point.push(a); // } // }); - // zyysCenter.forEach((center) => { + // if (pdK) { + // let a = { + // ...dk, + // zt: 0, + // }; + // zyys_data.value.point.push(a); + // } + // }); + // zyysCenter.forEach((center) => { + // let pdK = true; //判断sj有没有对应地块,没有就赋值0 + // sj.forEach((item, index) => { // if (item.committee == center.name) { + // pdK = false; // let b = { // ...center, // num: item.num, @@ -3091,7 +3220,42 @@ const get_dk_zyys = async (sj, xd, ssly) => { // zyys_data.value.center.push(b); // } // }); + // if (pdK) { + // let b = { + // ...center, + // num: '', + // town: center.jdname, + // committee: center.name, + // ssly: ssly, + // xd: xd, + // }; + // zyys_data.value.center.push(b); + // } // }); + sj.forEach((item, index) => { + zyysDk.forEach((dk) => { + if (item.committee == dk.name) { + let a = { + ...dk, + zt: item.zt, + }; + zyys_data.value.point.push(a); + } + }); + zyysCenter.forEach((center) => { + if (item.committee == center.name) { + let b = { + ...center, + num: item.num, + town: item.town, + committee: item.committee, + ssly: ssly, + xd: xd, + }; + zyys_data.value.center.push(b); + } + }); + }); }; //资源要素(渲染地块) const xr_dk_center_zyys = async () => { @@ -5005,7 +5169,9 @@ onMounted(async () => { font-size: 18px; border-radius: 5px; } - + .Tsactive { + cursor: not-allowed; + } // .content_item:last-child { // box-sizing: border-box; // display: flex; @@ -5200,7 +5366,9 @@ onMounted(async () => { font-size: 16px; } } - + .Tsactive { + cursor: not-allowed; + } .wz { width: 150px; } @@ -5590,6 +5758,10 @@ onMounted(async () => { .detail { z-index: 998; } +//设置无法点击 +.Tsactive { + cursor: not-allowed; +} \ No newline at end of file From a031176c1c1fa715a419154421df88249b05a1f1 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Wed, 23 Oct 2024 17:02:39 +0800 Subject: [PATCH 3/4] map --- src/view/sy_map.vue | 193 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 170 insertions(+), 23 deletions(-) diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 0b402c5..ef4a3ac 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -128,7 +128,12 @@ @click="item.click ? changeys(item.name) : ''" :key="index" > - + +
{{ item.name }}
@@ -782,12 +787,164 @@ const PopulationRatio = ref([ }, ]); //特殊标签左侧数据 + const tsbqTotal = ref([]); const lingshibiaoqian = reactive([ { - id: "临时标签", - name: "临时标签", + id: "劳模", + name: "劳模", tagId: "555", + rksl: 223, + }, + { + id: "工匠", + name: "工匠", + tagId: "555", + rksl: 126, + }, + { + id: "银发工程师", + name: "银发工程师", + tagId: "555", + rksl: 2, + }, + { + id: "首席科技官", + name: "首席科技官", + tagId: "555", + rksl: 16, + }, + { + id: "工商联企业家", + name: "工商联企业家", + tagId: "555", + rksl: 93, + }, + { + id: "红星 ", + name: "红星 ", + tagId: "555", + rksl: 9196, + }, + { + id: "教师", + name: "教师", + tagId: "555", + rksl: 4396, + }, + { + id: "学生", + name: "学生", + tagId: "555", + rksl: 45635, + }, + { + id: "医生", + name: "医生", + tagId: "555", + rksl: 664, + }, + { + id: "护士", + name: "护士", + tagId: "555", + rksl: 772, + }, + { + id: "乡贤", + name: "乡贤", + tagId: "555", + rksl: 746, + }, + { + id: "法人", + name: "法人", + tagId: "555", + rksl: 50108, + }, + { + id: "医保未缴", + name: "医保未缴", + tagId: "555", + rksl: 21582, + }, + { + id: "重大疾病", + name: "重大疾病", + tagId: "555", + rksl: 242, + }, + { + id: "百岁老人", + name: "百岁老人", + tagId: "555", + rksl: 36, + }, + { + id: "高龄老人", + name: "高龄老人", + tagId: "555", + rksl: 14332, + }, + { + id: "空巢老人", + name: "空巢老人", + tagId: "555", + rksl: 1176, + }, + { + id: "留守儿童", + name: "留守儿童", + tagId: "555", + rksl: 340, + }, + { + id: "幼儿", + name: "幼儿", + tagId: "555", + rksl: 6111, + }, + { + id: "青年", + name: "青年", + tagId: "555", + rksl: 59236, + }, + { + id: "失业", + name: "失业", + tagId: "555", + rksl: 2853, + }, + { + id: "律师", + name: "律师", + tagId: "555", + rksl: 55, + }, + { + id: "志愿者", + name: "志愿者", + tagId: "555", + rksl: 123, + }, + { + id: "专职网格员", + name: "专职网格员", + tagId: "555", + rksl: 710, + }, + { + id: "五失人员", + name: "五失人员", + tagId: "555", + rksl: 20, + }, + { + id: "乡村人才", + name: "乡村人才", + tagId: "555", + rksl: 137, }, ]); const data = reactive({ @@ -937,50 +1094,44 @@ const yaosuTotal = ref([ { id: 25, name: "菜市场", - img: j0, + wz: true, click: false, }, { id: 26, name: "停车场", - img: j0, wz: true, click: false, }, - + { id: 21, name: "党群服务中心", - img: j0, wz: true, click: false, }, { id: 22, name: "残疾人之家", - img: j0, wz: true, click: false, }, { id: 23, name: "百姓健身房", - img: j0, wz: true, click: false, }, { id: 31, name: "绿色跑道", - img: j0, wz: true, click: false, }, { id: 24, name: "便民服务中心", - img: j0, wz: true, click: false, }, @@ -988,28 +1139,24 @@ const yaosuTotal = ref([ { id: 27, name: "老年活动室", - img: j0, wz: true, click: false, }, { id: 28, name: "篮球场", - img: j0, wz: false, click: false, }, { id: 29, name: "足球场", - img: j0, wz: false, click: false, }, { id: 30, name: "文化广场", - img: j0, wz: false, click: false, }, @@ -1017,35 +1164,30 @@ const yaosuTotal = ref([ { id: 32, name: "公厕", - img: j0, wz: false, click: false, }, { id: 33, name: "文化礼堂", - img: j0, wz: false, click: false, }, { id: 34, name: "农家书屋", - img: j0, wz: false, click: false, }, { id: 20, name: "助餐点", - img: j0, wz: false, click: false, }, { id: 35, name: "乡贤馆", - img: j0, wz: false, click: false, }, @@ -2650,7 +2792,7 @@ const getDataBq = async (jd, cs) => { tsbqTotal.value.push({ id: item.name, name: item.name, - rksl: 0, + rksl: item.rksl, tagId: item.tagId, click: false, }); @@ -2684,7 +2826,7 @@ const getDataBqFirst = async () => { tsbqTotal.value.push({ id: item.name, name: item.name, - rksl: 0, + rksl: item.rksl, tagId: item.tagId, click: false, }); @@ -5360,7 +5502,12 @@ onMounted(async () => { height: 18px; margin-right: 3px; } - + .circleY { + margin-right: 4px !important; + border-radius: 50%; /* 使其成为一个圆形 */ + border: 1px solid #ffffff; /* 设置边框的样式和颜色 */ + display: inline-block; /* 使其可以与其他元素在同一行 */ + } .zyys_content_item_right { font-weight: 500; font-size: 16px; From fef5d630398432667780c30e9d39612484c9d27c Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Wed, 23 Oct 2024 17:06:24 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E6=97=A5=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/sy.vue | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/view/sy.vue b/src/view/sy.vue index db6a95c..d7e7dec 100644 --- a/src/view/sy.vue +++ b/src/view/sy.vue @@ -1437,14 +1437,6 @@ const showEc = (val) => { 1411, 1232, 1232, ]; // 骑行时长(分钟) dataEc.times = [ - "15", - "16", - "17", - "18", - "19", - "20", - "21", - "22", "23", "24", "25", @@ -1452,6 +1444,14 @@ const showEc = (val) => { "27", "28", "29", + "30", + "01", + "02", + "03", + "04", + "05", + "06", + "07", ]; dialogShowEc.value = true; break;