After Width: | Height: | Size: 110 KiB |
After Width: | Height: | Size: 113 KiB |
After Width: | Height: | Size: 108 KiB |
After Width: | Height: | Size: 110 KiB |
After Width: | Height: | Size: 112 KiB |
After Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 112 KiB |
After Width: | Height: | Size: 110 KiB |
|
@ -131,18 +131,14 @@ const data = reactive({
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
urlLeft: [
|
urlLeft: [
|
||||||
{
|
|
||||||
name: "评估模型",
|
|
||||||
url: "/home/index/table",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "要素一张图",
|
|
||||||
url: "/home/index/map",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "总体概览",
|
name: "总体概览",
|
||||||
url: "/home/index",
|
url: "/home/index",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "评估模型",
|
||||||
|
url: "/home/index/table",
|
||||||
|
},
|
||||||
// {
|
// {
|
||||||
// name: "养老",
|
// name: "养老",
|
||||||
// url: "/home/yl",
|
// url: "/home/yl",
|
||||||
|
@ -159,6 +155,10 @@ const data = reactive({
|
||||||
// name: "救助",
|
// name: "救助",
|
||||||
// url: "/home/work",
|
// url: "/home/work",
|
||||||
// },
|
// },
|
||||||
|
{
|
||||||
|
name: "要素一张图",
|
||||||
|
url: "/home/index/map",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "智能分析",
|
name: "智能分析",
|
||||||
url: "/home/analyze",
|
url: "/home/analyze",
|
||||||
|
|
|
@ -507,10 +507,10 @@ const dataEc = reactive({
|
||||||
title: "",
|
title: "",
|
||||||
});
|
});
|
||||||
const nlfb = reactive({
|
const nlfb = reactive({
|
||||||
year: [2022, 2023, 2024, 2025, 2026],
|
year: [2022, 2023, 2024, 2025, 2026,2027],
|
||||||
list1: [0, 1000, 500, 0, 0],
|
list1: [0, 1000, 500, 0, 0,0],
|
||||||
list2: [0, 2000, 1000, 0, 0],
|
list2: [0, 2000, 1000, 0, 0,0],
|
||||||
list3: [0, 3000, 1500, 0, 0],
|
list3: [0, 3000, 1500, 0, 0,0],
|
||||||
});
|
});
|
||||||
const showEnrol = () => {
|
const showEnrol = () => {
|
||||||
dialogShowEnrol.value = true;
|
dialogShowEnrol.value = true;
|
||||||
|
|
|
@ -188,7 +188,7 @@ const closeDialog = () => {
|
||||||
:deep(.el-dialog) {
|
:deep(.el-dialog) {
|
||||||
--el-dialog-bg-color: none;
|
--el-dialog-bg-color: none;
|
||||||
--el-dialog-width: 55% !important;
|
--el-dialog-width: 55% !important;
|
||||||
--el-dialog-margin-top: 11vh;
|
--el-dialog-margin-top: 14vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-header {
|
.my-header {
|
||||||
|
|
|
@ -240,7 +240,7 @@ const selectChange1 = (e) => {
|
||||||
:deep(.el-dialog) {
|
:deep(.el-dialog) {
|
||||||
--el-dialog-bg-color: none;
|
--el-dialog-bg-color: none;
|
||||||
--el-dialog-width: 76% !important;
|
--el-dialog-width: 76% !important;
|
||||||
--el-dialog-margin-top: 11vh;
|
--el-dialog-margin-top: 14vh;
|
||||||
// --el-dialog-margin-bottom: 0px !important;
|
// --el-dialog-margin-bottom: 0px !important;
|
||||||
margin-bottom: 0px !important;
|
margin-bottom: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -152,7 +152,7 @@ const handleRowClick = (row, column, event) => {
|
||||||
console.log(row);
|
console.log(row);
|
||||||
router.push({
|
router.push({
|
||||||
path: `/home/index/person`,
|
path: `/home/index/person`,
|
||||||
query: {nm: row.nm, identNo: row.identNo },
|
query: {nm: row.nm, identNo: row.identNo,type:'map'},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
// 详情弹框
|
// 详情弹框
|
||||||
|
|
|
@ -35,31 +35,38 @@ const colors = [
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const maxList = ref([
|
const maxList = ref([
|
||||||
190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190, 190,
|
18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000, 18000,
|
||||||
|
18000, 18000, 18000, 18000,
|
||||||
]);
|
]);
|
||||||
// const valueList = [20, 53, 47, 65, 29, 11, 10];
|
// const valueList = [20, 53, 47, 65, 29, 11, 10];
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
list: [],
|
list: [],
|
||||||
option: {},
|
option: {},
|
||||||
Max: 200,
|
Max: 20000,
|
||||||
valueList: [20, 53, 47, 65, 29, 11, 10, 20, 53, 47, 65, 29, 11, 10, 30],
|
valueList: [
|
||||||
valueList2: [120, 153, 47, 65, 29, 11, 10, 20, 53, 47, 65, 29, 11, 10, 30],
|
4504, 16086, 6130, 2844, 4967, 179, 1685, 5010, 633, 569, 219, 5152, 40,
|
||||||
|
631, 536,
|
||||||
|
],
|
||||||
|
valueList2: [
|
||||||
|
1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552, 2651, 3468, 5078, 1944,
|
||||||
|
1959, 4593, 3823,
|
||||||
|
],
|
||||||
xxname: [
|
xxname: [
|
||||||
|
"龙洲街道",
|
||||||
"东华街道",
|
"东华街道",
|
||||||
"大街乡",
|
"湖镇镇",
|
||||||
"塔石镇",
|
|
||||||
"小南海镇",
|
"小南海镇",
|
||||||
"模环乡",
|
"溪口镇",
|
||||||
"横山镇",
|
"横山镇",
|
||||||
"沐尘畲族乡",
|
"塔石镇",
|
||||||
"石佛乡",
|
"詹家镇",
|
||||||
"罗家乡",
|
"罗家乡",
|
||||||
"庙下乡",
|
"庙下乡",
|
||||||
"溪口镇",
|
"沐尘畲族乡",
|
||||||
|
"模环乡",
|
||||||
|
"石佛乡",
|
||||||
"社阳乡",
|
"社阳乡",
|
||||||
"詹家镇",
|
"大街乡",
|
||||||
"龙洲街道",
|
|
||||||
"湖镇镇",
|
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
// 注册5个面图形:左侧、前面、右面、上面、下面
|
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||||
|
@ -294,7 +301,7 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
// formatter: "{b0}:{c1}",
|
formatter: "{b0}:</br>{a0}:{c0}</br>{a1}:{c1}",
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: 0,
|
left: 0,
|
||||||
|
@ -630,6 +637,45 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
data: data.valueList2,
|
data: data.valueList2,
|
||||||
},
|
},
|
||||||
|
//顶部字体
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
xAxisIndex: 1,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 18,
|
||||||
|
position: "top",
|
||||||
|
color: "#ffffff",
|
||||||
|
formatter: function (data) {
|
||||||
|
return data.value - 5;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(221, 242, 255, 0)",
|
||||||
|
},
|
||||||
|
|
||||||
|
data: data.valueList.map((item) => parseInt(item) + 5),
|
||||||
|
barWidth: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
xAxisIndex: 1,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 18,
|
||||||
|
position: "top",
|
||||||
|
color: "#ffffff",
|
||||||
|
formatter: function (data) {
|
||||||
|
return data.value - 5;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(221, 242, 255, 0)",
|
||||||
|
},
|
||||||
|
|
||||||
|
data: data.valueList2.map((item) => parseInt(item) + 5),
|
||||||
|
barWidth: 20,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,272 @@
|
||||||
|
<template>
|
||||||
|
<div ref="chart" style="width: 100%; height: 260px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onBeforeMount, reactive, defineProps, ref, nextTick } from "vue";
|
||||||
|
// 局部引入echarts核心模块
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const chart = ref(); // 创建DOM引用
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
list1: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
list2: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
year: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
list1: [],
|
||||||
|
list2: [],
|
||||||
|
year: [],
|
||||||
|
option: {},
|
||||||
|
});
|
||||||
|
const getOption = () => {
|
||||||
|
data.option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["职工养老保险发放人次", "城乡养老保险发放人次"],
|
||||||
|
top: "8%",
|
||||||
|
right: "11%",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "1%",
|
||||||
|
right: "10%",
|
||||||
|
bottom: "0%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data.year,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
axisTick: false,
|
||||||
|
type: "category",
|
||||||
|
data: data.year,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(226, 226, 226, 0.3)",
|
||||||
|
fontSize: 16,
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
type: "solid",
|
||||||
|
color: "rgb(221, 242, 255,0.1)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
type: "dotted",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 16,
|
||||||
|
fontFamily: "MicrosoftYaHei",
|
||||||
|
color: "#ffffff",
|
||||||
|
lineHeight: 19,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
z: 1,
|
||||||
|
name: "上部1",
|
||||||
|
type: "pictorialBar",
|
||||||
|
symbolPosition: "end",
|
||||||
|
data: data.list1,
|
||||||
|
symbol: "diamond",
|
||||||
|
symbolOffset: ["-60%", "-50%"],
|
||||||
|
symbolSize: [16, 8],
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "#2fffa4",
|
||||||
|
color: "rgba(142, 187, 255, 1)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
z: 1,
|
||||||
|
name: "职工养老保险发放人次",
|
||||||
|
type: "bar",
|
||||||
|
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||||
|
data: data.list1,
|
||||||
|
barWidth: "18%",
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
x2: 1,
|
||||||
|
y: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
|
||||||
|
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
|
||||||
|
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
|
||||||
|
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// itemStyle: {
|
||||||
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
// {
|
||||||
|
// offset: 0,
|
||||||
|
// color: "rgba(142, 187, 255, 1)",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// offset: 1,
|
||||||
|
// color: "rgba(142, 187, 255, 0.20)",
|
||||||
|
// },
|
||||||
|
// ]),
|
||||||
|
// },
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
color: "#ffffff",
|
||||||
|
formatter: function (data) {
|
||||||
|
return data.value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
z: 2,
|
||||||
|
name: "上部1",
|
||||||
|
type: "pictorialBar",
|
||||||
|
symbolPosition: "end",
|
||||||
|
data: data.list2,
|
||||||
|
symbol: "diamond",
|
||||||
|
symbolOffset: ["62%", "-50%"],
|
||||||
|
symbolSize: [16, 8],
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "#32ffee",
|
||||||
|
color: "rgba(23, 237, 255, 1)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "城乡养老保险发放人次",
|
||||||
|
type: "bar",
|
||||||
|
data: data.list2,
|
||||||
|
// barGap: "-50%",
|
||||||
|
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||||
|
barWidth: "18%",
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: "linear",
|
||||||
|
x: 0,
|
||||||
|
x2: 1,
|
||||||
|
y: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: "rgba(23, 237, 255, .7)" },
|
||||||
|
{ offset: 0.5, color: "rgba(23, 237, 255, .7)" },
|
||||||
|
{ offset: 0.5, color: "rgba(23, 237, 255, .3)" },
|
||||||
|
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// itemStyle: {
|
||||||
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
// {
|
||||||
|
// offset: 0,
|
||||||
|
// color: "rgba(23, 237, 255, 1)",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// offset: 1,
|
||||||
|
// color: "rgba(23, 237, 255, 0.20)",
|
||||||
|
// },
|
||||||
|
// ]),
|
||||||
|
// },
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
color: "#ffffff",
|
||||||
|
formatter: function (data) {
|
||||||
|
return data.value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
xAxisIndex: 1,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(221, 242, 255, 0.1)",
|
||||||
|
},
|
||||||
|
data: data.year.map(() => 100),
|
||||||
|
barWidth: 50,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const setChart = () => {
|
||||||
|
// Vue3中: 需要引入
|
||||||
|
var myChart = echarts.init(chart.value);
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(data.option);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用生命钩子
|
||||||
|
onBeforeMount(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
data.list1 = props.list1;
|
||||||
|
data.list2 = props.list2;
|
||||||
|
data.year = props.year;
|
||||||
|
getOption();
|
||||||
|
setChart();
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
|
@ -119,20 +119,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="center_top">
|
<div class="center_top">
|
||||||
<div class="item">
|
<div class="item5">
|
||||||
<img src="@/assets/images/hygiene/mjzrc.png" class="left" />
|
<img src="@/assets/images/hygiene/mjzrc.png" class="left5" />
|
||||||
<div class="right">
|
<div class="right5">
|
||||||
<div class="right_top font">门急诊人次</div>
|
<div class="right5_top font">门急诊人次</div>
|
||||||
<img src="@/assets/images/hygiene/jt.png" class="right_center" />
|
<img src="@/assets/images/hygiene/jt.png" class="right5_center" />
|
||||||
<div class="right_bottom">{{ data.mz.mjzrc }}</div>
|
<div class="right5_bottom">{{ data.mz.mjzrc }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item5">
|
||||||
<img src="@/assets/images/hygiene/zyrs.png" class="left" />
|
<img src="@/assets/images/hygiene/zyrs.png" class="left5" />
|
||||||
<div class="right">
|
<div class="right5">
|
||||||
<div class="right_top font">住院人数</div>
|
<div class="right5_top font">住院人数</div>
|
||||||
<img src="@/assets/images/hygiene/jt.png" class="right_center" />
|
<img src="@/assets/images/hygiene/jt.png" class="right5_center" />
|
||||||
<div class="right_bottom">{{ data.mz.zyrs }}</div>
|
<div class="right5_bottom">{{ data.mz.zyrs }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -163,20 +163,20 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="minTopPart2">
|
<div class="minTopPart2">
|
||||||
<div class="left">
|
<div class="left5">
|
||||||
<div class="leftImg">
|
<div class="leftImg5">
|
||||||
<eP4 :list="data.jkda.jdl" v-if="showEchart"></eP4>
|
<eP4 :list="data.jkda.jdl" v-if="showEchart"></eP4>
|
||||||
</div>
|
</div>
|
||||||
<div class="left_me">
|
<div class="left5_me">
|
||||||
<div>建档率</div>
|
<div>建档率</div>
|
||||||
<div class="bo">{{ data.jkda.jdl }}%</div>
|
<div class="bo">{{ data.jkda.jdl }}%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right5">
|
||||||
<div class="rightImg">
|
<div class="rightImg5">
|
||||||
<eP4_1 :list="data.jkda.jtysqyl" v-if="showEchart"></eP4_1>
|
<eP4_1 :list="data.jkda.jtysqyl" v-if="showEchart"></eP4_1>
|
||||||
</div>
|
</div>
|
||||||
<div class="right_me">
|
<div class="right5_me">
|
||||||
<div>家庭医生签约率</div>
|
<div>家庭医生签约率</div>
|
||||||
<div class="bo">{{ data.jkda.jtysqyl }}%</div>
|
<div class="bo">{{ data.jkda.jtysqyl }}%</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -734,26 +734,26 @@ const getData = async () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
.item {
|
.item5 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.left {
|
.left5 {
|
||||||
width: 102px;
|
width: 102px;
|
||||||
height: 102px;
|
height: 102px;
|
||||||
}
|
}
|
||||||
.right {
|
.right5 {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
.right_top {
|
.right5_top {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
}
|
}
|
||||||
.right_center {
|
.right5_center {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 7px;
|
height: 7px;
|
||||||
}
|
}
|
||||||
.right_bottom {
|
.right5_bottom {
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
@ -1186,16 +1186,16 @@ const getData = async () => {
|
||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.left {
|
.left5 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-left: 13px;
|
margin-left: 13px;
|
||||||
.leftImg {
|
.leftImg5 {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
}
|
}
|
||||||
.left_me {
|
.left5_me {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -1218,16 +1218,16 @@ const getData = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right {
|
.right5 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// justify-content: center;
|
// justify-content: center;
|
||||||
|
|
||||||
.rightImg {
|
.rightImg5 {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
}
|
}
|
||||||
.right_me {
|
.right5_me {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<div class="my-info-item">
|
<div class="my-info-item">
|
||||||
<div class="my-info-label">姓  名</div>
|
<div class="my-info-label">姓  名</div>
|
||||||
<div class="my-info-content">
|
<div class="my-info-content">
|
||||||
<p>{{ baseInfo.nm }}</p>
|
<p>{{ baseInfo.nm || baseInfo.xm}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-info-item">
|
<div class="my-info-item">
|
||||||
|
@ -21,7 +21,8 @@
|
||||||
<div class="my-info-item">
|
<div class="my-info-item">
|
||||||
<div class="my-info-label">证件号码</div>
|
<div class="my-info-label">证件号码</div>
|
||||||
<div class="my-info-content">
|
<div class="my-info-content">
|
||||||
<p>{{ baseInfo.identNo }}</p>
|
<p>******************</p>
|
||||||
|
<!-- <p>{{ baseInfo.identNo }}</p> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-info-item">
|
<div class="my-info-item">
|
||||||
|
@ -34,7 +35,8 @@
|
||||||
<div class="my-info-label">居住状态</div>
|
<div class="my-info-label">居住状态</div>
|
||||||
<div class="my-info-content">
|
<div class="my-info-content">
|
||||||
<p v-if="baseInfo.jzzt == 1">居住</p>
|
<p v-if="baseInfo.jzzt == 1">居住</p>
|
||||||
<p v-else>未居住</p>
|
<p v-else-if="baseInfo.jzzt == 0">未居住</p>
|
||||||
|
<p v-else></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="my-info-item">
|
<div class="my-info-item">
|
||||||
|
@ -52,7 +54,7 @@
|
||||||
<div class="my-info-item">
|
<div class="my-info-item">
|
||||||
<div class="my-info-label">户口登记地</div>
|
<div class="my-info-label">户口登记地</div>
|
||||||
<div class="my-info-content">
|
<div class="my-info-content">
|
||||||
<p>{{ baseInfo.domicAddr }}</p>
|
<p>{{ baseInfo.domicAddr || baseInfo.dz }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -408,13 +410,59 @@ const getData = (nm, identNo) => {
|
||||||
item.show = Number(res.data[item.jkName]);
|
item.show = Number(res.data[item.jkName]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
if(res.data.yljlx){
|
||||||
|
data.value=[
|
||||||
|
{
|
||||||
|
type:res.data.yljlx,
|
||||||
|
date:res.data.yljffrq,
|
||||||
|
sum:res.data.yljffje
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}else{
|
||||||
|
data.value=[]
|
||||||
|
}
|
||||||
// console.log(dataMyTag.myTag, 555);
|
// console.log(dataMyTag.myTag, 555);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
// const getData2 = (nm, identNo) => {
|
||||||
|
// http
|
||||||
|
// .get(`/api/ggfwyth/pg/lyxsdbrymdDetails?xm=${nm}&sfzhm=${identNo}`)
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code == 200) {
|
||||||
|
// baseInfo.value = res.data;
|
||||||
|
|
||||||
|
// // dataMyTag.myTag.map((item) => {
|
||||||
|
// // if (res.data[item.jkName]) {
|
||||||
|
// // item.show = Number(res.data[item.jkName]);
|
||||||
|
// // }
|
||||||
|
// // });
|
||||||
|
// if(res.data.yljlx){
|
||||||
|
// data.value=[
|
||||||
|
// {
|
||||||
|
// type:res.data.yljlx,
|
||||||
|
// date:res.data.yljffrq,
|
||||||
|
// sum:res.data.yljffje
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }else{
|
||||||
|
// data.value=[]
|
||||||
|
// }
|
||||||
|
// // console.log(dataMyTag.myTag, 555);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// };
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// console.log(routers.query);
|
// console.log(routers.query);
|
||||||
getData(routers.query.nm, routers.query.identNo);
|
if(routers.query.type == 'map'){
|
||||||
|
getData(routers.query.nm, routers.query.identNo);
|
||||||
|
}else{
|
||||||
|
// getData2(routers.query.nm, routers.query.identNo);
|
||||||
|
baseInfo.value.nm=routers.query.nm;
|
||||||
|
baseInfo.value.dz=routers.query.dz;
|
||||||
|
baseInfo.value.identNo=routers.query.identNo;
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
class="table_border"
|
class="table_border"
|
||||||
:row-style="rowState"
|
:row-style="rowState"
|
||||||
:header-cell-style="tableHeaderColor"
|
:header-cell-style="tableHeaderColor"
|
||||||
|
@row-click="handleRowClick"
|
||||||
>
|
>
|
||||||
<el-table-column prop="xm" label="姓名" width="90" />
|
<el-table-column prop="xm" label="姓名" width="90" />
|
||||||
<el-table-column prop="dz" label="地址" />
|
<el-table-column prop="dz" label="地址" />
|
||||||
|
@ -115,7 +116,7 @@
|
||||||
>
|
>
|
||||||
<el-table-column prop="fullName" label="姓名" width="90" />
|
<el-table-column prop="fullName" label="姓名" width="90" />
|
||||||
<el-table-column prop="address" label="地址" />
|
<el-table-column prop="address" label="地址" />
|
||||||
<el-table-column prop="age" label="年龄" width="60"/>
|
<el-table-column prop="age" label="年龄" width="60" />
|
||||||
<!-- <el-table-column prop="IDNumber" label="身份证号" /> -->
|
<!-- <el-table-column prop="IDNumber" label="身份证号" /> -->
|
||||||
<el-table-column prop="PopulationLabel" label="人口标签" />
|
<el-table-column prop="PopulationLabel" label="人口标签" />
|
||||||
</el-table>
|
</el-table>
|
||||||
|
@ -137,7 +138,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from "vue";
|
import { ref, reactive, onMounted } from "vue";
|
||||||
import http from "@/utils/request.js";
|
import http from "@/utils/request.js";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
const router = useRouter();
|
||||||
|
const routers = useRoute();
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
pagedData: [],
|
pagedData: [],
|
||||||
first: true,
|
first: true,
|
||||||
|
@ -591,7 +594,14 @@ const getTable = async (url, currentPage) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
const handleRowClick = (row, column, event) => {
|
||||||
|
// row 是当前行的数据
|
||||||
|
console.log(row);
|
||||||
|
router.push({
|
||||||
|
path: `/home/index/person`,
|
||||||
|
query: { nm: row.xm, identNo: row.sfzhm, dz: row.dz, type: "detail" },
|
||||||
|
});
|
||||||
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getTable("/api/ggfwyth/pg/lyxsdbrymd", pagination.currentPage);
|
getTable("/api/ggfwyth/pg/lyxsdbrymd", pagination.currentPage);
|
||||||
handleCurrentChange(1);
|
handleCurrentChange(1);
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
'below-line2': index % 2 === 0,
|
'below-line2': index % 2 === 0,
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
>{{ (item.progress).toFixed(2) + "%" }}</span
|
>{{ item.progress.toFixed(2) + "%" }}</span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
style="color: #fff; white-space: nowrap"
|
style="color: #fff; white-space: nowrap"
|
||||||
|
@ -111,7 +111,7 @@
|
||||||
<div class="right" style="width: 517px">
|
<div class="right" style="width: 517px">
|
||||||
<div class="jbggfwq">
|
<div class="jbggfwq">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="title_name" ><span> 基本公共服务圈</span></div>
|
<div class="title_name"><span> 基本公共服务圈</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="jbggfwq_content">
|
<div class="jbggfwq_content">
|
||||||
<div
|
<div
|
||||||
|
@ -160,10 +160,10 @@
|
||||||
@close="close"
|
@close="close"
|
||||||
@handle="handlePagination"
|
@handle="handlePagination"
|
||||||
>
|
>
|
||||||
<template #jzzt="{ currentCol, currentData }">
|
<template #jzzt="{ currentCol, currentData }">
|
||||||
<div v-if="currentData.jzzt==1">居住</div>
|
<div v-if="currentData.jzzt == 1">居住</div>
|
||||||
<div v-else>未居住</div>
|
<div v-else>未居住</div>
|
||||||
</template>
|
</template>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</teleport>
|
</teleport>
|
||||||
</div>
|
</div>
|
||||||
|
@ -239,7 +239,7 @@ const cfJd = ref("");
|
||||||
//存放村社
|
//存放村社
|
||||||
const cfCs = ref("");
|
const cfCs = ref("");
|
||||||
//点击存放村社暂时
|
//点击存放村社暂时
|
||||||
const cfCsZs=ref('')
|
const cfCsZs = ref("");
|
||||||
//地图
|
//地图
|
||||||
var map = null;
|
var map = null;
|
||||||
//默认龙游县灰色地块
|
//默认龙游县灰色地块
|
||||||
|
@ -970,7 +970,7 @@ const tableType = reactive({
|
||||||
{
|
{
|
||||||
label: "居住状态",
|
label: "居住状态",
|
||||||
property: "jzzt",
|
property: "jzzt",
|
||||||
type:'slot'
|
type: "slot",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "民族",
|
label: "民族",
|
||||||
|
@ -986,9 +986,7 @@ const tableType = reactive({
|
||||||
width: "300px",
|
width: "300px",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
data: [
|
data: [],
|
||||||
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
// 表格分页
|
// 表格分页
|
||||||
const pagination = reactive({
|
const pagination = reactive({
|
||||||
|
@ -1032,7 +1030,7 @@ const clear = () => {
|
||||||
title_cs.value = "";
|
title_cs.value = "";
|
||||||
cfJd.value = "";
|
cfJd.value = "";
|
||||||
cfCs.value = "";
|
cfCs.value = "";
|
||||||
cfCsZs.value='';
|
cfCsZs.value = "";
|
||||||
cs_un_choose_arr.value.forEach((item, index) => {
|
cs_un_choose_arr.value.forEach((item, index) => {
|
||||||
map.removeOverlay(cs_un_choose_arr.value[index]);
|
map.removeOverlay(cs_un_choose_arr.value[index]);
|
||||||
});
|
});
|
||||||
|
@ -1140,7 +1138,6 @@ const getData = async (i, e) => {
|
||||||
percent: item.percent,
|
percent: item.percent,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
// console.log(personTotal.value,"111");
|
|
||||||
// 年龄百分比
|
// 年龄百分比
|
||||||
const agename = [
|
const agename = [
|
||||||
"09Percent",
|
"09Percent",
|
||||||
|
@ -1275,6 +1272,7 @@ const getDatas = async (e, i) => {
|
||||||
cs_dd_arr.value.forEach((item, index) => {
|
cs_dd_arr.value.forEach((item, index) => {
|
||||||
map.removeOverlay(cs_dd_arr.value[index]);
|
map.removeOverlay(cs_dd_arr.value[index]);
|
||||||
});
|
});
|
||||||
|
|
||||||
cs_dd_arr.value = [...xuanzhongCs.value];
|
cs_dd_arr.value = [...xuanzhongCs.value];
|
||||||
cs_dd_arr.value.map((item, index) => {
|
cs_dd_arr.value.map((item, index) => {
|
||||||
DGcreateCs2(item, index);
|
DGcreateCs2(item, index);
|
||||||
|
@ -1750,8 +1748,6 @@ const open_detail = () => {
|
||||||
person_detail(age);
|
person_detail(age);
|
||||||
dialogShow.value = true;
|
dialogShow.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
const close = () => {
|
const close = () => {
|
||||||
dialogShow.value = false;
|
dialogShow.value = false;
|
||||||
|
@ -1778,11 +1774,13 @@ const person_detail = (age) => {
|
||||||
.get(
|
.get(
|
||||||
`/api/ggfwyth/ysyzt/getRysmzq?page=${pagination.currentPage}&size=${
|
`/api/ggfwyth/ysyzt/getRysmzq?page=${pagination.currentPage}&size=${
|
||||||
pagination.pageSize
|
pagination.pageSize
|
||||||
}&age=${age || ""}&committee=${cfCsZs.value || ""}&town=${cfJd.value || ""}`
|
}&age=${age || ""}&committee=${cfCsZs.value || ""}&town=${
|
||||||
|
cfJd.value || ""
|
||||||
|
}`
|
||||||
)
|
)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
tableType.data=res.data;
|
tableType.data = res.data;
|
||||||
pagination.total = res.count;
|
pagination.total = res.count;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -2389,7 +2387,12 @@ const addPolygonCountyCs = () => {
|
||||||
// getDataBqs(cfJd.value, cfCs.value);
|
// getDataBqs(cfJd.value, cfCs.value);
|
||||||
}
|
}
|
||||||
//这段注意
|
//这段注意
|
||||||
getDatas2(cfJd.value, choose.value.person, cfCs.value);
|
if (choose.value.person == 1) {
|
||||||
|
getDatas2(cfJd.value, "0", cfCs.value); //0岁传字符串
|
||||||
|
} else {
|
||||||
|
getDatas2(cfJd.value, choose.value.person - 1, cfCs.value);
|
||||||
|
}
|
||||||
|
// getDatas2(cfJd.value, choose.value.person, cfCs.value);
|
||||||
addCsChoose();
|
addCsChoose();
|
||||||
addCsUnChoose();
|
addCsUnChoose();
|
||||||
// if (choose.value.person == "") {
|
// if (choose.value.person == "") {
|
||||||
|
@ -2482,7 +2485,12 @@ const addCsUnChoose = () => {
|
||||||
// });
|
// });
|
||||||
// getDataBqs(cfJd.value, cfCs.value);
|
// getDataBqs(cfJd.value, cfCs.value);
|
||||||
getDataBq(cfJd.value, cfCs.value);
|
getDataBq(cfJd.value, cfCs.value);
|
||||||
getDatas2(cfJd.value, choose.value.person, cfCs.value);
|
if (choose.value.person == 1) {
|
||||||
|
getDatas2(cfJd.value, "0", cfCs.value); //0岁传字符串
|
||||||
|
} else {
|
||||||
|
getDatas2(cfJd.value, choose.value.person - 1, cfCs.value);
|
||||||
|
}
|
||||||
|
// getDatas2(cfJd.value, choose.value.person, cfCs.value);
|
||||||
// if (
|
// if (
|
||||||
// choose.value.person == "cjr" ||
|
// choose.value.person == "cjr" ||
|
||||||
// choose.value.person == "dibian" ||
|
// choose.value.person == "dibian" ||
|
||||||
|
@ -2667,7 +2675,7 @@ const createCs2 = (polygon, indexx) => {
|
||||||
});
|
});
|
||||||
map.addOverlay(cs_number_name_arr.value[indexx]);
|
map.addOverlay(cs_number_name_arr.value[indexx]);
|
||||||
cs_number_name_arr.value[indexx].addEventListener("click", () => {
|
cs_number_name_arr.value[indexx].addEventListener("click", () => {
|
||||||
cfCsZs.value=polygon.name;
|
cfCsZs.value = polygon.name;
|
||||||
if (
|
if (
|
||||||
choose.value.person == "cjr" ||
|
choose.value.person == "cjr" ||
|
||||||
choose.value.person == "dibian" ||
|
choose.value.person == "dibian" ||
|
||||||
|
@ -2737,10 +2745,10 @@ const DGcreateCs = (polygon, indexx) => {
|
||||||
};
|
};
|
||||||
//添加单个村社(+数量)
|
//添加单个村社(+数量)
|
||||||
const DGcreateCs2 = (polygon, indexx) => {
|
const DGcreateCs2 = (polygon, indexx) => {
|
||||||
console.log(choose.value.person, "单个村社", polygon);
|
// console.log(choose.value.person, "单个村社", polygon);
|
||||||
console.log("单个村社", polygon.name);
|
// console.log("单个村社", polygon.name);
|
||||||
console.log("单个村社", polygon.number);
|
// console.log("单个村社", polygon.number);
|
||||||
console.log("单个村社", polygon.swrs);
|
// console.log("单个村社", polygon.swrs);
|
||||||
function createLabelDOM() {
|
function createLabelDOM() {
|
||||||
var content = document.createElement("div");
|
var content = document.createElement("div");
|
||||||
content.style.display = "flex";
|
content.style.display = "flex";
|
||||||
|
@ -2818,7 +2826,7 @@ const DGcreateCs2 = (polygon, indexx) => {
|
||||||
map.addOverlay(cs_dd_arr.value[indexx]);
|
map.addOverlay(cs_dd_arr.value[indexx]);
|
||||||
cs_dd_arr.value[indexx].addEventListener("click", () => {
|
cs_dd_arr.value[indexx].addEventListener("click", () => {
|
||||||
console.log(cfJd.value, polygon.name);
|
console.log(cfJd.value, polygon.name);
|
||||||
cfCsZs.value=polygon.name;
|
cfCsZs.value = polygon.name;
|
||||||
if (
|
if (
|
||||||
choose.value.person == "cjr" ||
|
choose.value.person == "cjr" ||
|
||||||
choose.value.person == "dibian" ||
|
choose.value.person == "dibian" ||
|
||||||
|
|
|
@ -36,9 +36,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="displayFlex right_bg">
|
<div class="displayFlex right_bg" v-if="gk">
|
||||||
<div class="formText">
|
<div class="formText">
|
||||||
<div class="formText_top">
|
<div class="formText_top" v-if="show_7yx">
|
||||||
<div class="yd_title left_1">
|
<div class="yd_title left_1">
|
||||||
<div class="animate-border">
|
<div class="animate-border">
|
||||||
<i></i>
|
<i></i>
|
||||||
|
@ -102,7 +102,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="formText_bootom">
|
<div class="formText_bootom">
|
||||||
<div class="yd_title left_2">
|
<div class="yd_title left_2" :style="{'margin-top': show_7yx ? '40px' : '0px'}">
|
||||||
<div class="animate-border">
|
<div class="animate-border">
|
||||||
<i></i>
|
<i></i>
|
||||||
<i></i>
|
<i></i>
|
||||||
|
@ -143,11 +143,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<work v-if="gaikuangList.work"></work>
|
||||||
|
<education v-if="gaikuangList.education"></education>
|
||||||
|
<yl v-if="gaikuangList.yl"></yl>
|
||||||
|
<hygiene v-if="gaikuangList.hygiene"></hygiene>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from "vue";
|
import { ref, reactive, onMounted, computed } from "vue";
|
||||||
import icon1 from "@/assets/sy-table/sy-table9.png";
|
import icon1 from "@/assets/sy-table/sy-table9.png";
|
||||||
import icon2 from "@/assets/sy-table/sy-table10.png";
|
import icon2 from "@/assets/sy-table/sy-table10.png";
|
||||||
import icon3 from "@/assets/sy-table/sy-table11.png";
|
import icon3 from "@/assets/sy-table/sy-table11.png";
|
||||||
|
@ -164,7 +168,10 @@ import Bj1 from "@/assets/sy-table/sy-table7.png";
|
||||||
import Bj2 from "@/assets/sy-table/sy-table4.png";
|
import Bj2 from "@/assets/sy-table/sy-table4.png";
|
||||||
import Bj3 from "@/assets/sy-table/sy-table5.png";
|
import Bj3 from "@/assets/sy-table/sy-table5.png";
|
||||||
import Bj4 from "@/assets/sy-table/sy-table6.png";
|
import Bj4 from "@/assets/sy-table/sy-table6.png";
|
||||||
|
import work from "./table_gk/gk_work.vue";
|
||||||
|
import education from "./table_gk/gk_education.vue";
|
||||||
|
import yl from "./table_gk/gk_yl.vue";
|
||||||
|
import hygiene from "./table_gk/gk_hygiene.vue";
|
||||||
import { useRouter, useRoute } from "vue-router";
|
import { useRouter, useRoute } from "vue-router";
|
||||||
import http from "@/utils/request.js";
|
import http from "@/utils/request.js";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
|
@ -186,7 +193,7 @@ const goto = (url, val) => {
|
||||||
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
taps1: "6",
|
taps1: "6",
|
||||||
taps: "0",
|
taps: "1",
|
||||||
tabPosition: [
|
tabPosition: [
|
||||||
{
|
{
|
||||||
id: "0",
|
id: "0",
|
||||||
|
@ -216,18 +223,22 @@ const data = reactive({
|
||||||
son: [
|
son: [
|
||||||
{
|
{
|
||||||
id: "0",
|
id: "0",
|
||||||
name: "学前教育助学服务",
|
name: "概况",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1",
|
id: "1",
|
||||||
name: "义务教育服务",
|
name: "学前教育助学服务",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2",
|
id: "2",
|
||||||
name: "普通高中助学服务",
|
name: "义务教育服务",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3",
|
id: "3",
|
||||||
|
name: "普通高中助学服务",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4",
|
||||||
name: "中等职业教育助学服务",
|
name: "中等职业教育助学服务",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -256,14 +267,18 @@ const data = reactive({
|
||||||
son: [
|
son: [
|
||||||
{
|
{
|
||||||
id: "0",
|
id: "0",
|
||||||
name: "公共卫生服务",
|
name: "概况",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1",
|
id: "1",
|
||||||
name: "医疗保险服务",
|
name: "公共卫生服务",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2",
|
id: "2",
|
||||||
|
name: "医疗保险服务",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
name: "计划生育扶助服务",
|
name: "计划生育扶助服务",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -276,10 +291,14 @@ const data = reactive({
|
||||||
son: [
|
son: [
|
||||||
{
|
{
|
||||||
id: "0",
|
id: "0",
|
||||||
name: "养老助老服务",
|
name: "概况",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1",
|
id: "1",
|
||||||
|
name: "养老助老服务",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
name: "养老保险服务",
|
name: "养老保险服务",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -308,14 +327,18 @@ const data = reactive({
|
||||||
son: [
|
son: [
|
||||||
{
|
{
|
||||||
id: "0",
|
id: "0",
|
||||||
name: "社会救助服务",
|
name: "概况",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1",
|
id: "1",
|
||||||
name: "法律援助服务",
|
name: "社会救助服务",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2",
|
id: "2",
|
||||||
|
name: "法律援助服务",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
name: "扶残助残服务",
|
name: "扶残助残服务",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -462,28 +485,67 @@ const data = reactive({
|
||||||
],
|
],
|
||||||
Bj: [Bj, Bj1, Bj2, Bj3, Bj4],
|
Bj: [Bj, Bj1, Bj2, Bj3, Bj4],
|
||||||
});
|
});
|
||||||
|
const gaikuangList = reactive({
|
||||||
|
work: false,
|
||||||
|
education: false,
|
||||||
|
yl: false,
|
||||||
|
hygiene: false,
|
||||||
|
});
|
||||||
|
//是否显示七优享
|
||||||
|
const show_7yx=ref(true);
|
||||||
|
const gk = computed(() => {
|
||||||
|
if (
|
||||||
|
gaikuangList.work ||
|
||||||
|
gaikuangList.hygiene ||
|
||||||
|
gaikuangList.education ||
|
||||||
|
gaikuangList.yl
|
||||||
|
) {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const tapshow = (parentId, childId) => {
|
const tapshow = (parentId, childId) => {
|
||||||
// console.log(parentId, childId, "菜单名");
|
console.log(parentId, childId, "菜单名");
|
||||||
data.taps1 = parentId.id;
|
data.taps1 = parentId.id;
|
||||||
data.taps = childId;
|
data.taps = childId;
|
||||||
getData(parentId.name, parentId.son[childId].name);
|
if (
|
||||||
|
childId == 0 &&
|
||||||
// 菜单名匹配
|
(parentId.name == "弱有所扶" ||
|
||||||
const menuName = [
|
parentId.name == "学有所教" ||
|
||||||
"幼有善育",
|
parentId.name == "老有所养" ||
|
||||||
"学有优教",
|
parentId.name == "病有所医")
|
||||||
"劳有所得",
|
) {
|
||||||
"病有良医",
|
gaikuang(parentId.name);
|
||||||
"老有康养",
|
} else {
|
||||||
"住有宜居",
|
// gaikuangList.work = false;
|
||||||
"弱有众扶",
|
// gaikuangList.education = false;
|
||||||
];
|
// gaikuangList.yl = false;
|
||||||
// 检查 parentId 的第一个字符是否与 menuName 中的第一个字符匹配
|
// gaikuangList.hygiene = false;
|
||||||
const firstChar = parentId.name.charAt(0);
|
for (let name in gaikuangList) {
|
||||||
const matchingMenu = menuName.find((name) => name.charAt(0) === firstChar);
|
gaikuangList[name]=false;
|
||||||
if (matchingMenu) {
|
}
|
||||||
sevenYX(matchingMenu);
|
getData(parentId.name, parentId.son[childId].name);
|
||||||
|
// 菜单名匹配
|
||||||
|
const menuName = [
|
||||||
|
"幼有善育",
|
||||||
|
"学有优教",
|
||||||
|
"劳有所得",
|
||||||
|
"病有良医",
|
||||||
|
"老有康养",
|
||||||
|
"住有宜居",
|
||||||
|
"弱有众扶",
|
||||||
|
];
|
||||||
|
// 检查 parentId 的第一个字符是否与 menuName 中的第一个字符匹配
|
||||||
|
const firstChar = parentId.name.charAt(0);
|
||||||
|
const matchingMenu = menuName.find((name) => name.charAt(0) === firstChar);
|
||||||
|
if (matchingMenu) {
|
||||||
|
show_7yx.value=true;
|
||||||
|
sevenYX(matchingMenu);
|
||||||
|
}else{
|
||||||
|
show_7yx.value=false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const toggleVisibility = (val) => {
|
const toggleVisibility = (val) => {
|
||||||
|
@ -494,9 +556,25 @@ const toggleVisibility = (val) => {
|
||||||
parent.visible = !parent.visible;
|
parent.visible = !parent.visible;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
tapshow(val,0)
|
console.log(val);
|
||||||
};
|
|
||||||
|
|
||||||
|
tapshow(val, 0);
|
||||||
|
};
|
||||||
|
const gaikuang = (name) => {
|
||||||
|
console.log(4444, name);
|
||||||
|
for (let name in gaikuangList) {
|
||||||
|
gaikuangList[name]=false;
|
||||||
|
}
|
||||||
|
if (name == "弱有所扶") {
|
||||||
|
gaikuangList.work = true;
|
||||||
|
} else if (name == "学有所教") {
|
||||||
|
gaikuangList.education = true;
|
||||||
|
} else if (name == "老有所养") {
|
||||||
|
gaikuangList.yl = true;
|
||||||
|
} else if (name == "病有所医") {
|
||||||
|
gaikuangList.hygiene = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
// 服务表格样式
|
// 服务表格样式
|
||||||
const tableHeaderColor = (arg) => {
|
const tableHeaderColor = (arg) => {
|
||||||
return {
|
return {
|
||||||
|
@ -545,7 +623,8 @@ const getData = async (name, fullName) => {
|
||||||
Bj: data.Bj[imageIndex],
|
Bj: data.Bj[imageIndex],
|
||||||
name: item.sx,
|
name: item.sx,
|
||||||
text: item.bmfxqk,
|
text: item.bmfxqk,
|
||||||
progress: item.xh,
|
// progress: item.xh,
|
||||||
|
progress: '95', //进度条
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -866,7 +945,7 @@ onMounted(() => {
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
// cursor: pointer;
|
// cursor: pointer;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
margin-top: 40px;
|
// margin-top: 40px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -217,10 +217,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="history">
|
<div class="history">
|
||||||
<div
|
<div class="history1" @click="showMapDialog('养老机构')">
|
||||||
class="history1"
|
|
||||||
@click="showMapDialog('养老机构')"
|
|
||||||
>
|
|
||||||
<div>
|
<div>
|
||||||
<span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
|
<span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -313,7 +310,7 @@
|
||||||
<div v-else-if="currentData.itimetype == '2'">晚餐</div>
|
<div v-else-if="currentData.itimetype == '2'">晚餐</div>
|
||||||
</template>
|
</template>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
<DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
|
<DialogMap :dialogShowMap="dialogShowMap" :title="mapTitle" @close="close">
|
||||||
</DialogMap>
|
</DialogMap>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -445,10 +442,10 @@ const showDialog = (title, url, coulumn) => {
|
||||||
getTable(url, pagination.currentPage);
|
getTable(url, pagination.currentPage);
|
||||||
};
|
};
|
||||||
//养老机构地图
|
//养老机构地图
|
||||||
const showMapDialog =(title)=>{
|
const showMapDialog = (title) => {
|
||||||
mapTitle.value = title;
|
mapTitle.value = title;
|
||||||
dialogShowMap.value = true;
|
dialogShowMap.value = true;
|
||||||
}
|
};
|
||||||
//获取表格数据
|
//获取表格数据
|
||||||
const getTable = (url, currentPage) => {
|
const getTable = (url, currentPage) => {
|
||||||
http
|
http
|
||||||
|
@ -657,7 +654,7 @@ const getData = () => {
|
||||||
// 计划生育
|
// 计划生育
|
||||||
res.data.familyPlanning.familyPlanningData.forEach((element) => {
|
res.data.familyPlanning.familyPlanningData.forEach((element) => {
|
||||||
data.centerBottom1.push(element.jhsyrs); // 人次
|
data.centerBottom1.push(element.jhsyrs); // 人次
|
||||||
data.centerBottom2.push((element.jhsybtje / 10000)); // 金额
|
data.centerBottom2.push(element.jhsybtje / 10000); // 金额
|
||||||
// data.centerBottom2.push(element.jhsybtje); // 金额
|
// data.centerBottom2.push(element.jhsybtje); // 金额
|
||||||
});
|
});
|
||||||
// 年份
|
// 年份
|
||||||
|
@ -668,9 +665,20 @@ const getData = () => {
|
||||||
// 助老服务
|
// 助老服务
|
||||||
data.smfwcs = res.data.zlfw.smfwcs;
|
data.smfwcs = res.data.zlfw.smfwcs;
|
||||||
// 乡镇助餐次数
|
// 乡镇助餐次数
|
||||||
res.data.zlfw.xzzccs.forEach((element) => {
|
let elements = res.data.zlfw.xzzccs;
|
||||||
data.zccs1.push(element.xzjd); // 地点
|
// 先处理 zccs 不等于 0 的元素
|
||||||
data.zccs2.push(element.zccs); // 次数
|
elements.forEach((element) => {
|
||||||
|
if (element.zccs !== 0) {
|
||||||
|
data.zccs1.push(element.xzjd); // 地点
|
||||||
|
data.zccs2.push(element.zccs); // 次数
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 处理 zccs 等于 0 的元素
|
||||||
|
elements.forEach((element) => {
|
||||||
|
if (element.zccs === 0) {
|
||||||
|
data.zccs1.push(element.xzjd); // 地点
|
||||||
|
data.zccs2.push(element.zccs); // 次数
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
showEchart.value = true;
|
showEchart.value = true;
|
||||||
|
|