From 9a7923953eb341ca4d53a8d6fa5cb35f74e6f07b Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Wed, 23 Oct 2024 15:31:36 +0800 Subject: [PATCH] jz --- src/utils/request.js | 2 +- src/view/echarts_jz/eP1.vue | 569 +++++++++++++++++----------------- src/view/echarts_jz/eP3.vue | 59 ++-- src/view/echarts_jz/eP4.vue | 13 +- src/view/echarts_jz/zwfw1.vue | 28 -- src/view/sy_map.vue | 304 ++++++++++++++---- src/view/table_gk/gk_jz.vue | 223 ++++++------- 7 files changed, 658 insertions(+), 540 deletions(-) diff --git a/src/utils/request.js b/src/utils/request.js index 3b4f6e5..da330fe 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -2,7 +2,7 @@ import axios from "axios"; import { ElMessage } from "element-plus"; import tools from "@/utils/tools"; import router from "../router"; -axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/' +// axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/' axios.defaults.timeout = 120000; // HTTP request 拦截器 diff --git a/src/view/echarts_jz/eP1.vue b/src/view/echarts_jz/eP1.vue index f092f5e..a9d7752 100644 --- a/src/view/echarts_jz/eP1.vue +++ b/src/view/echarts_jz/eP1.vue @@ -1,296 +1,297 @@ +
+ - +}; +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