xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-06-28 11:08:54 +08:00
parent 9003ac3677
commit 575acb8356
9 changed files with 273 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/yl/ylnlbj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/yl/ylnln.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/assets/images/yl/ylnlv.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

2
src/view/echarts_education/pie5.vue
View File

@ -9,7 +9,7 @@ import * as echarts from "echarts";
const props = defineProps({ const props = defineProps({
list: { list: {
type: Array, type: Object,
default: () => { default: () => {
return []; return [];
}, },

101
src/view/echarts_yl/pie3d.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%; height: 250px"></div> <div ref="chart" style="width: 40%; height: 200px"></div>
</template> </template>
<script setup> <script setup>
@ -17,7 +17,7 @@ import "echarts-gl";
const props = defineProps({ const props = defineProps({
list: { list: {
type: Array, type: Object,
default: () => { default: () => {
return []; return [];
}, },
@ -223,53 +223,53 @@ function getPie3D(pieData, internalDiameterRatio) {
let option = { let option = {
//animation: false, //animation: false,
//图例组件 //图例组件
legend: { // legend: {
data: legendData, // data: legendData,
color: [ // color: [
"#8FD7FC", // "#8FD7FC",
"#466BE7", // "#466BE7",
"#F4BB29", // "#F4BB29",
"#49C384", // "#49C384",
"#8FD7FC", // "#8FD7FC",
"#466BE7", // "#466BE7",
"#F4BB29", // "#F4BB29",
"#49C384", // "#49C384",
], // ],
width: "40%", // width: "40%",
//图例列表的布局朝向。 // //图例列表的布局朝向。
orient: "vertical", // orient: "vertical",
right: 20, // right: 20,
top: "center", // top: "center",
//图例文字每项之间的间隔 // //图例文字每项之间的间隔
itemGap: 10, // itemGap: 10,
show: true, // show: true,
icon: "rect", // icon: "rect",
itemHeight: 10, // itemHeight: 10,
itemWidth: 25, // itemWidth: 25,
textStyle: { // textStyle: {
//图例字体大小 // //图例字体大小
fontSize: 16, // fontSize: 16,
color: "#FFFFFF", // color: "#FFFFFF",
lineHeight: 20, // lineHeight: 20,
}, // },
//格式化图例文本 // //格式化图例文本
formatter: function (name) { // formatter: function (name) {
var target; // var target;
for (var i = 0, l = pieData.length; i < l; i++) { // for (var i = 0, l = pieData.length; i < l; i++) {
if (pieData[i].name == name) { // if (pieData[i].name == name) {
target = pieData[i].value; // target = pieData[i].value;
} // }
} // }
if (name == "91-100岁") { // if (name == "91-100岁") {
return ` ${name} ${target} 人`; // return ` ${name} ${target} ${target} ${target} `;
} else if (name == "100岁以上") { // } else if (name == "100岁以上") {
return ` ${name} ${target} 人`; // return ` ${name} ${target} ${target} ${target} `;
} else { // } else {
return ` ${name} ${target} 人`; // return ` ${name} ${target} ${target} ${target} `;
} // }
}, // },
}, // },
//移动上去提示的文本内容 //移动上去提示的文本内容
tooltip: { tooltip: {
backgroundColor: "rgba(18, 55, 85, 0.8);", backgroundColor: "rgba(18, 55, 85, 0.8);",
@ -306,10 +306,10 @@ function getPie3D(pieData, internalDiameterRatio) {
zoomSensitivity: 0, //设置为0无法缩放 zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移 panSensitivity: 0, //设置为0无法平移
alpha: 25, //角度(这个很重要 调节角度的) alpha: 25, //角度(这个很重要 调节角度的)
distance: 100, //调整视角到主体的距离，类似调整zoom(这是整体大小) distance: 120, //调整视角到主体的距离，类似调整zoom(这是整体大小)
}, },
top: "-30", top: "-30",
left: "-120", left: "0",
width: "100%", width: "100%",
show: false, show: false,
boxHeight: 20, boxHeight: 20,
@ -548,6 +548,7 @@ function bindListen(myChart) {
// myChart.resize(); // myChart.resize();
// }); // });
// }); // });
const setChart = () => { const setChart = () => {
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
myChart.setOption(data.option); myChart.setOption(data.option);

2
src/view/echarts_yl/ylSMFW.vue
View File

@ -18,7 +18,7 @@ import * as echarts from "echarts";
const props = defineProps({ const props = defineProps({
list: { list: {
type: Array, type: Object,
default: () => { default: () => {
return []; return [];
}, },

4
src/view/education.vue
View File

@ -327,9 +327,9 @@ import edxs from "./echarts_education/edXS.vue";
import edxs1 from "./echarts_education/edXS1.vue"; import edxs1 from "./echarts_education/edXS1.vue";
import edxs2 from "./echarts_education/edXS2.vue"; import edxs2 from "./echarts_education/edXS2.vue";
import edxs3 from "./echarts_education/edXS3.vue"; import edxs3 from "./echarts_education/edXS3.vue";
import edie5 from "./echarts_education/pie5.vue";
import edie from "./echarts_education/pie.vue"; import edie from "./echarts_education/pie.vue";
import edie5 from "./echarts_education/pie5.vue";
import edCSR from "./echarts_education/edCSR.vue"; import edCSR from "./echarts_education/edCSR.vue";
import edXX from "./echarts_education/edXX.vue"; import edXX from "./echarts_education/edXX.vue";
import ePie1 from "./echarts_education/pie1.vue"; import ePie1 from "./echarts_education/pie1.vue";
@ -572,7 +572,7 @@ const data = reactive({
}, },
], ],
xxgk: {}, xxgk: {},
xzncjszcsl: [], xzncjszcsl: {},
xzncxxsl: [[], []], xzncxxsl: [[], []],
zzxm: [], zzxm: [],
schoolData: [ schoolData: [

19
src/view/sy.vue
View File

@ -836,7 +836,7 @@ const dataTab = reactive({
property: "qqz", property: "qqz",
}, },
{ {
label: "始发时间", label: "到达龙游站时间",
type: "slot", type: "slot",
property: "dd", property: "dd",
}, },
@ -1278,7 +1278,7 @@ const getTable = (url, currentPage) => {
.get(`${url}?page=${currentPage}&size=${pagination.pageSize}`) .get(`${url}?page=${currentPage}&size=${pagination.pageSize}`)
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
console.log(res,'表格数据'); console.log(res, "表格数据");
tableType.data = res.data; tableType.data = res.data;
pagination.total = res.count; pagination.total = res.count;
dialogShow.value = true; dialogShow.value = true;
@ -1431,7 +1431,7 @@ const colorList = [
{ color2: "rgba(76,174,254,1)" }, { color2: "rgba(76,174,254,1)" },
]; ];
const bt = computed(() => { const bt = computed(() => {
return (index)=> { return (index) => {
let str = `--i:${colorList[index].color2}`; let str = `--i:${colorList[index].color2}`;
return str; return str;
}; };
@ -1498,6 +1498,8 @@ const autoScroll = () => {
if (!isAutoScrolling) return; if (!isAutoScrolling) return;
const mainEl = mainRef.value; const mainEl = mainRef.value;
if (!mainEl) return;
mainEl.scrollTop += 1; // 每次滚动的距离 mainEl.scrollTop += 1; // 每次滚动的距离
if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) { if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
@ -1511,10 +1513,9 @@ const autoScroll = () => {
}; };
onBeforeMount(async () => { onBeforeMount(async () => {
getData(); getData();
setTimeout(()=>{ setTimeout(() => {
startAutoScroll(); startAutoScroll();
},1000) }, 1000);
}); });
</script> </script>
@ -1696,9 +1697,9 @@ startAutoScroll();
right: 5px; right: 5px;
top: 1px; top: 1px;
} }
.gTitle{ .gTitle {
position: absolute; position: absolute;
color: #ACD1F1; color: #acd1f1;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;

215
src/view/yl.vue
View File

@ -157,7 +157,41 @@
<div class="mtpText1">{{ data.oldAgeTotal }}</div> <div class="mtpText1">{{ data.oldAgeTotal }}</div>
<div class="mtpText2">{{ data.oldAgePercent }}%</div> <div class="mtpText2">{{ data.oldAgePercent }}%</div>
</div> </div>
<div class="ageGroup">
<div class="ageGroupBj">
<div class="Gendern"></div>
<div class="Male">男性总人数</div>
<div class="ageGroupNum">2307303</div>
</div>
<div class="ageGroupBj">
<div class="Genderv"></div>
<div class="Male">女性总人数</div>
<div class="ageGroupNum">230730</div>
</div>
</div>
<div class="ageGroupone">
<ePie3d v-if="showR" :list="data.rkgk"></ePie3d> <ePie3d v-if="showR" :list="data.rkgk"></ePie3d>
<div class="btList" ref="mainRef">
<div class="btListding">
<span>各年龄段</span>
<span>总数/人</span>
<span>男性人数/人</span>
<span>女性人数/人</span>
</div>
<div class="btList_item" v-for="(item, index) in btList">
<div class="btList_item_color" :style="bt(index)"></div>
<div class="btList_item_value">
{{ item.name }}
<div
class="btList_item_value1"
v-for="(item1, index) in item.value"
>
{{ item1 }}
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title familyPlanning"> <div class="yd_title familyPlanning">
@ -204,7 +238,11 @@
<div <div
class="history1" class="history1"
@click=" @click="
showDialog('居家养老服务照料中心', '/api/ggfwyth/yljgzlzxList','num') showDialog(
'居家养老服务照料中心',
'/api/ggfwyth/yljgzlzxList',
'num'
)
" "
> >
<div> <div>
@ -291,7 +329,7 @@ import ylJHSY from "./echarts_yl/ylJHSY.vue";
import ylSMFW from "./echarts_yl/ylSMFW.vue"; import ylSMFW from "./echarts_yl/ylSMFW.vue";
import ylXZZC from "./echarts_yl/ylXZZC.vue"; import ylXZZC from "./echarts_yl/ylXZZC.vue";
import Dialog from "./dialog/dialog.vue"; import Dialog from "./dialog/dialog.vue";
import { ref, onMounted, onBeforeMount, reactive } from "vue"; import { ref, onMounted, onBeforeMount, reactive, computed } from "vue";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
const leftchoose = ref({ const leftchoose = ref({
first: "1", first: "1",
@ -354,7 +392,7 @@ const yl_column = ref([
{ {
label: "机构名称", label: "机构名称",
property: "mc", property: "mc",
align: 'left' align: "left",
}, },
{ {
label: "机构地址", label: "机构地址",
@ -390,12 +428,12 @@ const chooseVillage = (village) => {
tableType.url = "/api/ggfwyth/zcxxList"; tableType.url = "/api/ggfwyth/zcxxList";
getTownDetail(); getTownDetail();
}; };
const showDialog = (title, url,coulumn) => { const showDialog = (title, url, coulumn) => {
tableType.title = title; tableType.title = title;
tableType.url = url; tableType.url = url;
if(coulumn=='num'){ if (coulumn == "num") {
tableType.columns = yl_column2.value; tableType.columns = yl_column2.value;
}else{ } else {
tableType.columns = yl_column.value; tableType.columns = yl_column.value;
} }
@ -440,6 +478,48 @@ const getTownDetail = () => {
} }
}); });
}; };
const btList = ref([
{
name: "60-70岁",
value: ["17824", "17824", "17824"],
},
{
name: "70-80岁",
value: ["18742", "18742", "18742"],
},
{
name: "80-90岁",
value: ["3407", "3407", "3407"],
},
{
name: "90-100岁",
value: ["144", "144", "144"],
},
{
name: "100岁以上",
value: ["10", "10", "10"],
},
]);
//扇形图颜色数据
const colorList = [
{ color2: "#FFE35F" },
{ color2: "#0081FF" },
{ color2: "#8ABEDB" },
{ color2: "#25B9C8" },
{ color2: "#30EB92" },
{ color2: "rgba(254,178,128,1)" },
{ color2: "rgba(151,176,255,1)" },
{ color2: "rgba(164,151,255,1)" },
{ color2: "rgba(159,110,254,1)" },
{ color2: "rgba(180,143,241,1)" },
{ color2: "rgba(76,174,254,1)" },
];
const bt = computed(() => {
return (index) => {
let str = `--i:${colorList[index].color2}`;
return str;
};
});
const data = reactive({ const data = reactive({
leftTop1: [], leftTop1: [],
leftTop2: [], leftTop2: [],
@ -458,7 +538,7 @@ const data = reactive({
leftbottomYear: [], leftbottomYear: [],
oldAgePercent: "", oldAgePercent: "",
oldAgeTotal: "", oldAgeTotal: "",
rkgk: [], rkgk: {},
centerBottom1: [], centerBottom1: [],
centerBottom2: [], centerBottom2: [],
centerBottomYear: [], centerBottomYear: [],
@ -477,7 +557,6 @@ onBeforeMount(() => {
const getData = () => { const getData = () => {
http.get("/api/ggfwyth/yl").then((res) => { http.get("/api/ggfwyth/yl").then((res) => {
if (res.code == 200) { if (res.code == 200) {
console.log(res.data, "养老");
// 养老保险 // 养老保险
// 人次 // 人次
res.data.endowmentInsurance.ffrc.forEach((element) => { res.data.endowmentInsurance.ffrc.forEach((element) => {
@ -1136,6 +1215,7 @@ const getData = () => {
background-size: 100% 100%; background-size: 100% 100%;
margin: 4px auto; margin: 4px auto;
margin-top: 10px; margin-top: 10px;
// margin-bottom: 14px;
position: relative; position: relative;
.moveImg { .moveImg {
@ -1177,8 +1257,8 @@ const getData = () => {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
top: 358px; top: 350px;
left: 84px; left: 20px;
} }
.mtpText1 { .mtpText1 {
@ -1207,6 +1287,121 @@ const getData = () => {
color: #ffffff; color: #ffffff;
} }
} }
.ageGroup {
display: flex;
justify-content: space-between;
width: 530px;
height: 50px;
margin-left: 10px;
.ageGroupBj {
width: 253px;
height: 50px;
background-image: url(@/assets/images/yl/ylnlbj.png);
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
.Gendern {
width: 34px;
height: 34px;
background-image: url(@/assets/images/yl/ylnln.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 12px;
margin-left: 14px;
}
.Genderv {
width: 34px;
height: 34px;
background-image: url(@/assets/images/yl/ylnlv.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 12px;
margin-left: 14px;
}
.Male {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #ffffff;
letter-spacing: 2px;
text-align: left;
font-style: normal;
margin-right: 18px;
}
.ageGroupNum {
font-size: 16px;
font-weight: 400;
color: #00fff0;
letter-spacing: 1px;
text-align: right;
font-style: normal;
font-family: TCloudNumber, TCloudNumber;
}
}
}
.ageGroupone {
display: flex;
.btList {
width: 70%;
height: 200px;
margin-top: 10px;
.btListding {
font-weight: 500;
font-size: 14px;
color: #ffffff;
text-align: left;
font-style: normal;
font-family: PingFangSC, PingFang SC;
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
display: flex;
align-items: center;
justify-content: flex-end;
span {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
}
span:nth-child(3) {
width: 25%;
}
span:nth-child(4) {
width: 25%;
}
}
.btList_item {
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
padding: 5px;
.btList_item_color {
width: 22px;
height: 8px;
background-color: var(--i);
border-radius: 6px;
margin-right: 17px;
}
.btList_item_value {
width: 100%;
font-size: 18px;
color: #ffffff;
display: flex;
justify-content: space-between;
}
.btList_item_value1 {
width: 24%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
:deep(.el-table) { :deep(.el-table) {
background: rgba(32, 64, 115, 1); background: rgba(32, 64, 115, 1);