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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

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

View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height: 250px"></div>
<div ref="chart" style="width: 40%; height: 200px"></div>
</template>
<script setup>
@ -17,7 +17,7 @@ import "echarts-gl";
const props = defineProps({
list: {
type: Array,
type: Object,
default: () => {
return [];
},
@ -223,53 +223,53 @@ function getPie3D(pieData, internalDiameterRatio) {
let option = {
//animation: false,
//
legend: {
data: legendData,
color: [
"#8FD7FC",
"#466BE7",
"#F4BB29",
"#49C384",
"#8FD7FC",
"#466BE7",
"#F4BB29",
"#49C384",
],
width: "40%",
//
orient: "vertical",
right: 20,
top: "center",
//
itemGap: 10,
show: true,
icon: "rect",
itemHeight: 10,
itemWidth: 25,
textStyle: {
//
fontSize: 16,
color: "#FFFFFF",
lineHeight: 20,
},
// legend: {
// data: legendData,
// color: [
// "#8FD7FC",
// "#466BE7",
// "#F4BB29",
// "#49C384",
// "#8FD7FC",
// "#466BE7",
// "#F4BB29",
// "#49C384",
// ],
// width: "40%",
// //
// orient: "vertical",
// right: 20,
// top: "center",
// //
// itemGap: 10,
// show: true,
// icon: "rect",
// itemHeight: 10,
// itemWidth: 25,
// textStyle: {
// //
// fontSize: 16,
// color: "#FFFFFF",
// lineHeight: 20,
// },
//
formatter: function (name) {
var target;
for (var i = 0, l = pieData.length; i < l; i++) {
if (pieData[i].name == name) {
target = pieData[i].value;
}
}
if (name == "91-100岁") {
return ` ${name} ${target}`;
} else if (name == "100岁以上") {
return ` ${name} ${target}`;
} else {
return ` ${name} ${target}`;
}
},
},
// //
// formatter: function (name) {
// var target;
// for (var i = 0, l = pieData.length; i < l; i++) {
// if (pieData[i].name == name) {
// target = pieData[i].value;
// }
// }
// if (name == "91-100") {
// return ` ${name} ${target} ${target} ${target} `;
// } else if (name == "100") {
// return ` ${name} ${target} ${target} ${target} `;
// } else {
// return ` ${name} ${target} ${target} ${target} `;
// }
// },
// },
//
tooltip: {
backgroundColor: "rgba(18, 55, 85, 0.8);",
@ -306,10 +306,10 @@ function getPie3D(pieData, internalDiameterRatio) {
zoomSensitivity: 0, //0
panSensitivity: 0, //0
alpha: 25, //( )
distance: 100, //zoom()
distance: 120, //zoom()
},
top: "-30",
left: "-120",
left: "0",
width: "100%",
show: false,
boxHeight: 20,
@ -548,6 +548,7 @@ function bindListen(myChart) {
// myChart.resize();
// });
// });
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);

View File

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

View File

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

View File

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

View File

@ -157,7 +157,41 @@
<div class="mtpText1">{{ data.oldAgeTotal }}</div>
<div class="mtpText2">{{ data.oldAgePercent }}%</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>
<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 class="flex1">
<div class="yd_title familyPlanning">
@ -204,7 +238,11 @@
<div
class="history1"
@click="
showDialog('居家养老服务照料中心', '/api/ggfwyth/yljgzlzxList','num')
showDialog(
'居家养老服务照料中心',
'/api/ggfwyth/yljgzlzxList',
'num'
)
"
>
<div>
@ -291,7 +329,7 @@ import ylJHSY from "./echarts_yl/ylJHSY.vue";
import ylSMFW from "./echarts_yl/ylSMFW.vue";
import ylXZZC from "./echarts_yl/ylXZZC.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";
const leftchoose = ref({
first: "1",
@ -354,7 +392,7 @@ const yl_column = ref([
{
label: "机构名称",
property: "mc",
align: 'left'
align: "left",
},
{
label: "机构地址",
@ -390,12 +428,12 @@ const chooseVillage = (village) => {
tableType.url = "/api/ggfwyth/zcxxList";
getTownDetail();
};
const showDialog = (title, url,coulumn) => {
const showDialog = (title, url, coulumn) => {
tableType.title = title;
tableType.url = url;
if(coulumn=='num'){
if (coulumn == "num") {
tableType.columns = yl_column2.value;
}else{
} else {
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({
leftTop1: [],
leftTop2: [],
@ -458,7 +538,7 @@ const data = reactive({
leftbottomYear: [],
oldAgePercent: "",
oldAgeTotal: "",
rkgk: [],
rkgk: {},
centerBottom1: [],
centerBottom2: [],
centerBottomYear: [],
@ -477,7 +557,6 @@ onBeforeMount(() => {
const getData = () => {
http.get("/api/ggfwyth/yl").then((res) => {
if (res.code == 200) {
console.log(res.data, "养老");
//
//
res.data.endowmentInsurance.ffrc.forEach((element) => {
@ -1136,6 +1215,7 @@ const getData = () => {
background-size: 100% 100%;
margin: 4px auto;
margin-top: 10px;
// margin-bottom: 14px;
position: relative;
.moveImg {
@ -1177,8 +1257,8 @@ const getData = () => {
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 358px;
left: 84px;
top: 350px;
left: 20px;
}
.mtpText1 {
@ -1207,6 +1287,121 @@ const getData = () => {
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) {
background: rgba(32, 64, 115, 1);