@@ -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,15 +428,15 @@ 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);