This commit is contained in:
duanxiaohai
parent
9003ac3677
commit
575acb8356
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 |
|
|
@ -9,7 +9,7 @@ import * as echarts from "echarts";
|
|||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
type: Object,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import * as echarts from "echarts";
|
|||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
type: Object,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
219
src/view/yl.vue
219
src/view/yl.vue
|
|
@ -157,7 +157,41 @@
|
|||
<div class="mtpText1">{{ data.oldAgeTotal }}</div>
|
||||
<div class="mtpText2">{{ data.oldAgePercent }}%</div>
|
||||
</div>
|
||||
<ePie3d v-if="showR" :list="data.rkgk"></ePie3d>
|
||||
<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,13 +428,13 @@ 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{
|
||||
tableType.columns = yl_column.value;
|
||||
} else {
|
||||
tableType.columns = yl_column.value;
|
||||
}
|
||||
|
||||
getTable(url, pagination.currentPage);
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue