gx

src/view/echarts_sy/pie2.vue

@@ -2,30 +2,60 @@
   <div ref="chart" style="width: 100%; height: 120px"></div>
 </template>
 
-<script setup >
+<script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onBeforeMount, reactive, ref } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
-const data = [[140], [260], [330], [270]];
+
-const total = ref(0);
+const props = defineProps({
-const totalMax=ref(0);
+  list: {
-const lb=ref(0)
+    type: Array,
-data.forEach((item) => {
+    default: () => {
-  console.log(item[0]);
+      return [];
-  total.value += item[0];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
 });
-totalMax.value=total.value*1.06;
+const data = reactive({
-lb.value=Math.trunc(total.value*0.03);
+  list: [[140], [260], [330], [270]],
-const option = {
+  list1: [],
+  year: [],
+  option: {},
+  totalMax: null,
+  total: 100,
+  lb: 3,
+});
+
+// const data = [[140], [260], [330], [270]];
+// const total = ref(0);
+// const totalMax = ref(0);
+// const lb = ref(0);
+
+const getOption1 = () => {
+  // data.list.forEach((item,index) => {
+  //   data.total += item[index];
+  // }); //总数
+  data.totalMax = data.total * 1.06; //上限
+  data.lb = Math.trunc(data.total * 0.03);//取小数点后三位，得到下限
+};
+const getOption = () => {
+  console.log(data.list, 111);
+  console.log(data.total, data.totalMax, data.lb, 222);
+  data.option = {
     legend: {
       show: true,
       itemHeight: 12,
       itemWidth: 30,
       textStyle: {
         fontSize: 16,
-      padding:10,
+        padding: 10,
         color: "#fff",
       },
       top: 70,
@@ -36,8 +66,8 @@ const option = {
     },
     grid: { left: "2%", right: "2%", top: "10%" },
     xAxis: [
-    { type: "value", show: false, max: totalMax.value },
+      { type: "value", show: false, max: data.totalMax },
-    { type: "value", show: false, max: totalMax.value },
+      { type: "value", show: false, max: data.totalMax },
     ],
     yAxis: [
       {
@@ -58,7 +88,7 @@ const option = {
     series: [
       {
         type: "bar",
-      data: [lb.value],
+        data: data.lb,
         stack: "income",
         barWidth: 18,
         itemStyle: {
@@ -70,7 +100,7 @@ const option = {
       {
         type: "bar",
         name: "17岁以下",
-      data: data[0],
+        data: data.list[0],
         stack: "income",
         barWidth: 18,
         itemStyle: {
@@ -92,7 +122,7 @@ const option = {
           normal: {
             show: true,
             position: ["25%", "-60%"],
-          formatter: `${Math.trunc(data[0][0]*100/total.value)}%`,
+            formatter: `${data.list[0][0]}%`,
             color: "#fff",
             fontSize: 22,
             fontWeight: 600,
@@ -102,7 +132,7 @@ const option = {
       {
         type: "bar",
         name: "18-34岁",
-      data: data[1],
+        data: data.list[1],
         stack: "income",
         barWidth: 18,
         itemStyle: {
@@ -124,7 +154,7 @@ const option = {
           normal: {
             show: true,
             position: ["35%", "-60%"],
-          formatter: `${Math.trunc(data[1][0]*100/total.value)}%`,
+            formatter: `${Math.trunc((data.list[1][0] * 100) / data.total)}%`,
             color: "#fff",
             fontSize: 22,
             fontWeight: 600,
@@ -134,7 +164,7 @@ const option = {
       {
         type: "bar",
         name: "35-69岁",
-      data: data[2],
+        data: data.list[2],
         stack: "income",
         barWidth: 18,
         itemStyle: {
@@ -156,7 +186,7 @@ const option = {
           normal: {
             show: true,
             position: ["35%", "-60%"],
-           formatter: `${Math.trunc(data[2][0]*100/total.value)}%`,
+            formatter: `${Math.trunc((data.list[2][0] * 100) / data.total)}%`,
             color: "#fff",
             fontSize: 22,
             fontWeight: 600,
@@ -166,7 +196,7 @@ const option = {
       {
         type: "bar",
         name: "60岁以上",
-      data: data[3],
+        data: data.list[3],
         stack: "income",
         barWidth: 18,
         itemStyle: {
@@ -188,7 +218,7 @@ const option = {
           normal: {
             show: true,
             position: ["35%", "-60%"],
-           formatter: `${Math.trunc(data[3][0]*100/total.value)}%`,
+            formatter: `${Math.trunc((data.list[3][0] * 100) / data.total)}%`,
             color: "#fff",
             fontSize: 22,
             fontWeight: 600,
@@ -197,7 +227,7 @@ const option = {
       },
       {
         type: "bar",
-      data: [lb.value],
+        data: data.lb,
         stack: "income",
         barWidth: 18,
         itemStyle: {
@@ -214,27 +244,27 @@ const option = {
           color: "rgba(255,255,255,0.1)",
           barBorderRadius: [100, 100, 100, 100],
         },
-      data: ["2019"].map(() => totalMax.value),
+        data: ["2019"].map(() => data.totalMax),
         barWidth: 50,
       },
     ],
+  };
 };
-onMounted(() => {
+
-  // 基于准备好的dom，初始化echarts实例
+const setChart = () => {
-  // var myChart = echarts.init(document.getElementById('main'));
-  // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
 
-  // init(); // vue3.2没有this
+// 使用生命钩子
-  // 使用刚指定的配置项和数据显示图表。
+onBeforeMount(() => {
-  myChart.setOption(option);
+  setTimeout(() => {
-
+    // data.list = props.list;
-  // 单图表响应式: 跟随浏览器大小改变
+    // getOption1();
-  //   window.addEventListener("resize", () => {
+    getOption();
-  //     myChart.resize();
+    setChart();
-  //   });
+  }, 600);
 });
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/view/echarts_yl/pie3d.vue

@@ -69,28 +69,27 @@ const colorList = [
 const pieData = reactive([
   {
     name: "61-70岁", //名称
-    value: "", //值
+    value: 0, //值
   },
   {
     name: "71-80岁",
-    value: 57842,
+    value: 0,
   },
   {
     name: "81-90岁",
-    value: 40934,
+    value: 0,
   },
   {
     name: "91-100岁",
-    value: 11375,
+    value: 0,
   },
   {
     name: "100岁以上",
-    value: 1945,
+    value: 0,
   },
 ]);
 
 // const serData = pieData.map((dItem, index) => {
-//     console.log(dItem, index, 666);
 //   return {
 //     ...dItem,
 //     value: Number(dItem.value),
@@ -568,7 +567,6 @@ onBeforeMount(() => {
     pieData[2].value = data.list.nl7180;
     pieData[3].value = data.list.nl8190;
     pieData[4].value = data.list.nl91100;
-    console.log(data.list, pieData, 555);
 
     getOption();
     setChart();

src/view/sy.vue

@@ -11,11 +11,15 @@
             <div class="item_content">
               <div class="sr">
                 <span class="left">收入：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{
+                  data.LivelihoodWelfare.zgylbxzsr
+                }}</span>
               </div>
               <div class="sr" style="margin-top: 5px">
                 <span class="left">支出：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{
+                  data.LivelihoodWelfare.zgylbxzzc
+                }}</span>
               </div>
             </div>
           </div>
@@ -24,11 +28,11 @@
             <div class="item_content">
               <div class="sr">
                 <span class="left">收入：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{ data.LivelihoodWelfare.gsbxzsr }}</span>
               </div>
               <div class="sr" style="margin-top: 5px">
                 <span class="left">支出：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{ data.LivelihoodWelfare.gsbxzzc }}</span>
               </div>
             </div>
           </div>
@@ -39,11 +43,15 @@
             <div class="item_content">
               <div class="sr">
                 <span class="left">收入：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{
+                  data.LivelihoodWelfare.cxylbxzsr
+                }}</span>
               </div>
               <div class="sr" style="margin-top: 5px">
                 <span class="left">支出：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{
+                  data.LivelihoodWelfare.cxylbxzzc
+                }}</span>
               </div>
             </div>
           </div>
@@ -54,11 +62,15 @@
             <div class="item_content">
               <div class="sr">
                 <span class="left">收入：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{
+                  data.LivelihoodWelfare.zgyilbxzsr
+                }}</span>
               </div>
               <div class="sr" style="margin-top: 5px">
                 <span class="left">支出：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{
+                  data.LivelihoodWelfare.zgyilbxzzc
+                }}</span>
               </div>
             </div>
           </div>
@@ -69,11 +81,15 @@
             <div class="item_content">
               <div class="sr">
                 <span class="left">收入：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{
+                  data.LivelihoodWelfare.cxyilbxzsr
+                }}</span>
               </div>
               <div class="sr" style="margin-top: 5px">
                 <span class="left">支出：</span
-                ><span class="right">147.380.290</span>
+                ><span class="right">{{
+                  data.LivelihoodWelfare.cxyilbxzzc
+                }}</span>
               </div>
             </div>
           </div>
@@ -82,11 +98,11 @@
         <div class="left_jzfw">
           <div class="left_1_2">
             <div class="top">救助人数</div>
-            <div class="bottom">79.972</div>
+            <div class="bottom">{{ data.salvageServices.jzrc }}</div>
           </div>
           <div class="left_1_3">
             <div class="top">救助金额</div>
-            <div class="bottom">812,471,092</div>
+            <div class="bottom">{{ data.salvageServices.jzje }}</div>
           </div>
         </div>
       </div>
@@ -159,23 +175,23 @@
       <div class="flex1">
         <div class="people_total">
           <div class="people_total_item left">
-            <div class="number">891,284</div>
+            <div class="number">{{ data.PopulationData.man }}</div>
             <img src="../assets/images/sy/man.png" alt="" />
             <div class="sex">男性人口</div>
           </div>
           <div class="people_total_item2 center">
             <img src="../assets/images/sy/people_total.png" alt="" />
-            <div class="number">2,791,284</div>
+            <div class="number">{{ data.PopulationData.rkzs }}</div>
             <div class="total">人口总数</div>
           </div>
           <div class="people_total_item right">
-            <div class="number">291.284</div>
+            <div class="number">{{ data.PopulationData.woman }}</div>
             <img src="../assets/images/sy/woman.png" alt="" />
             <div class="sex">女性人口</div>
           </div>
         </div>
-        <ePie2 style="margin-top: 20px"></ePie2>
+        <ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
-        <ePie style="margin-bottom: 30px"></ePie>
+        <ePie style="margin-bottom: 30px" :list="data.PopulationData"></ePie>
         <div class="table">
           <div class="table_choose">
             <div
@@ -237,7 +253,11 @@
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title service"></div>
         <div class="whsy">
-          <div class="whsy_item" v-for="(item, index) in whsyList" :key="index">
+          <div
+            class="whsy_item"
+            v-for="(item, index) in data.whsyList"
+            :key="index"
+          >
             <div class="name">{{ item.name }}</div>
             <div class="value">
               {{ item.value }}<span>{{ item.dw }}</span>
@@ -248,7 +268,11 @@
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title last"></div>
         <div class="tysy">
-          <div class="tysy_item" v-for="(item, index) in tysyList" :key="index">
+          <div
+            class="tysy_item"
+            v-for="(item, index) in data.tysyList"
+            :key="index"
+          >
             <div class="value">
               {{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
             </div>
@@ -291,12 +315,212 @@ import baskerball from "../assets/images/sy/baskerball.png";
 import badminton from "../assets/images/sy/badminton.png";
 import running from "../assets/images/sy/running.png";
 import tableTennis from "../assets/images/sy/tableTennis.png";
-import { ref, onMounted, onBeforeMount, computed } from "vue";
+import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
-const choose = ref("1");
+import http from "@/utils/request.js";
+
+const data = reactive({
+  PopulationData: {
+    rkzs: "",
+    man: "",
+    woman: "",
+  }, //人口数据
+  ageRatio: [],
+  salvageServices: {
+    jzrc: "", //救助人次
+    jzje: "", //救助金额
+    nf: "", //救助年份
+  }, //救助服务
+  LivelihoodWelfare: {
+    zgylbxzsr: "0", //职工基本养老保险总收入
+    zgylbxzzc: "0", //职工基本养老保险总支出
+    cxylbxzsr: "0", //城乡居民养老保险总收入
+    cxylbxzzc: "0", //城乡居民养老保险总支出
+    gsbxzsr: "0", //工伤保险总收入
+    gsbxzzc: "0", //工伤保险总支出
+    zgyilbxzsr: "0", //职工基本医疗保险总收入
+    zgyilbxzzc: "0", //职工基本医疗保险总支出
+    cxyilbxzsr: "0", //城乡居民医疗保险总收入
+    cxyilbxzzc: "0", //城乡居民医疗保险总支出
+    nf: "", //年份
+  }, //民生福祉
+  tableData: [
+    {
+      company: "龙游县文旅集团",
+      address: "龙游县五一单位",
+      finish: true,
+    },
+    {
+      company: "龙游县文旅集团",
+      address: "龙游县五一单位",
+      finish: true,
+    },
+    {
+      company: "龙游县文旅集团",
+      address: "龙游县五一单位",
+      finish: true,
+    },
+    {
+      company: "龙游县文旅集团",
+      address: "龙游县五一单位",
+      finish: false,
+    },
+    {
+      company: "龙游县文旅集团",
+      address: "龙游县五一单位",
+      finish: false,
+    },
+    {
+      company: "龙游县文旅集团",
+      address: "龙游县五一单位",
+      finish: false,
+    },
+    {
+      company: "龙游县文旅集团",
+      address: "龙游县五一单位",
+      finish: false,
+    },
+    {
+      company: "龙游县文旅集团",
+      address: "龙游县五一单位",
+      finish: false,
+    },
+  ],
+  jysyList: [
+    {
+      title: "县镇",
+      teacher: 1,
+      student: 10.76,
+    },
+    {
+      title: "农村",
+      teacher: 1,
+      student: 8.53,
+    },
+  ],
+  ylwsList: [
+    {
+      name: "医院卫生院",
+      value: 50,
+    },
+    {
+      name: "注册护士",
+      value: 38.871,
+    },
+    {
+      name: "职业医生",
+      value: 28.871,
+    },
+    {
+      name: "家庭签约医生",
+      value: 6.871,
+    },
+    {
+      name: "医院卫生院床位数",
+      value: 18.261,
+    },
+    {
+      name: "健康档案建档",
+      value: 129.371,
+    },
+    {
+      name: "村社卫生服务站",
+      value: 98,
+    },
+  ],
+  whsyList: [
+    {
+      name: "公共图书馆(南孔书院)",
+      value: "198",
+      dw: "家",
+    },
+    {
+      name: "总藏书",
+      value: "1983",
+      dw: "万册",
+    },
+    {
+      name: "送戏下乡次数",
+      value: "2787",
+      dw: "次",
+    },
+    {
+      name: "博物馆观展人次",
+      value: "1.292.874",
+      dw: "次",
+    },
+    {
+      name: "图书借阅",
+      value: "1.724.012",
+      dw: "次",
+    },
+  ],
+  tysyList: [
+    {
+      name: "足球场",
+      value: "100",
+      img: footerball,
+    },
+    {
+      name: "篮球场",
+      value: "100",
+      img: baskerball,
+    },
+    {
+      name: "乒乓球馆",
+      value: "100",
+      img: tableTennis,
+    },
+    {
+      name: "羽毛球馆",
+      value: "100",
+      img: badminton,
+    },
+    {
+      name: "绿色跑道",
+      value: "100",
+      dw: "km",
+      img: running,
+    },
+  ],
+  jtsyList: [
+    {
+      name: "公共自行车",
+      key1: "骑行次数",
+      key1_value: "1172491",
+      key2: "骑行时长",
+      key2_value: "1283h",
+    },
+    {
+      name: "电动单车",
+      key1: "骑行次数",
+      key1_value: "1172491",
+      key2: "骑行时长",
+      key2_value: "1283h",
+    },
+    {
+      name: "公共汽车",
+      key1: "公交线路",
+      key1_value: "176",
+      key2: "乘坐人次",
+      key2_value: "239741",
+    },
+    {
+      name: "长途汽车",
+      key1: "班车次数",
+      key1_value: "133",
+      key2: "客流量",
+      key2_value: "192874",
+    },
+    {
+      name: "高铁",
+      key1: "列车班次",
+      key1_value: "23",
+      key2: "客流量",
+      key2_value: "113414",
+    },
+  ],
+});
 
-const change = (index) => {
-  choose.value = index;
-};
 const tableData = ref([
   {
     company: "龙游县文旅集团",
@@ -339,47 +563,6 @@ const tableData = ref([
     finish: false,
   },
 ]);
-const rowState = (row) => {
-  if (row.rowIndex % 2 == 0) {
-    return {
-      letterSpacing: "1px",
-      fontSize: "14px",
-      height: "36px",
-      backgroundColor: "rgba(31, 63, 113, 1)",
-      color: "#fff",
-    };
-  } else if (row.rowIndex % 2 !== 0) {
-    return {
-      letterSpacing: "1px",
-      fontSize: "14px",
-      height: "36px",
-      backgroundColor: "rgba(43, 74, 121, 1)",
-      color: "#fff",
-    };
-  }
-};
-const tableHeaderColor = (arg) => {
-  return {
-    paddingLeft: "10px",
-    letterSpacing: "1px",
-    fontSize: "15px",
-    height: "50px",
-    backgroundColor: "#455F8A",
-    color: "#fff",
-  };
-};
-const cs = computed(() => {
-  let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
-    jysyList.value[0].teacher + jysyList.value[0].student
-  }`;
-  return str;
-});
-const nc = computed(() => {
-  let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${
-    jysyList.value[1].teacher + jysyList.value[1].student
-  }`;
-  return str;
-});
 const jysyList = ref([
   {
     title: "县镇",
@@ -423,62 +606,62 @@ const ylwsList = ref([
   },
 ]);
 
-const whsyList = ref([
+// const whsyList = ref([
-  {
+//   {
-    name: "公共图书馆(南孔书院)",
+//     name: "公共图书馆(南孔书院)",
-    value: "198",
+//     value: "198",
-    dw: "家",
+//     dw: "家",
-  },
+//   },
-  {
+//   {
-    name: "总藏书",
+//     name: "总藏书",
-    value: "1983",
+//     value: "1983",
-    dw: "万册",
+//     dw: "万册",
-  },
+//   },
-  {
+//   {
-    name: "送戏下乡次数",
+//     name: "送戏下乡次数",
-    value: "2787",
+//     value: "2787",
-    dw: "次",
+//     dw: "次",
-  },
+//   },
-  {
+//   {
-    name: "博物馆观展人次",
+//     name: "博物馆观展人次",
-    value: "1.292.874",
+//     value: "1.292.874",
-    dw: "次",
+//     dw: "次",
-  },
+//   },
-  {
+//   {
-    name: "图书借阅",
+//     name: "图书借阅",
-    value: "1.724.012",
+//     value: "1.724.012",
-    dw: "次",
+//     dw: "次",
-  },
+//   },
-]);
+// ]);
 
-const tysyList = ref([
+// const tysyList = ref([
-  {
+//   {
-    name: "足球场",
+//     name: "足球场",
-    value: "100",
+//     value: "100",
-    img: footerball,
+//     img: footerball,
-  },
+//   },
-  {
+//   {
-    name: "篮球场",
+//     name: "篮球场",
-    value: "100",
+//     value: "100",
-    img: baskerball,
+//     img: baskerball,
-  },
+//   },
-  {
+//   {
-    name: "乒乓球馆",
+//     name: "乒乓球馆",
-    value: "100",
+//     value: "100",
-    img: tableTennis,
+//     img: tableTennis,
-  },
+//   },
-  {
+//   {
-    name: "羽毛球馆",
+//     name: "羽毛球馆",
-    value: "100",
+//     value: "100",
-    img: badminton,
+//     img: badminton,
-  },
+//   },
-  {
+//   {
-    name: "绿色跑道",
+//     name: "绿色跑道",
-    value: "100",
+//     value: "100",
-    dw:'km',
+//     dw: "km",
-    img: running,
+//     img: running,
-  },
+//   },
-]);
+// ]);
 
 const jtsyList = ref([
   {
@@ -517,6 +700,139 @@ const jtsyList = ref([
     key2_value: "113414",
   },
 ]);
+
+// 县城学校师生比样式
+const cs = computed(() => {
+  let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
+    jysyList.value[0].teacher + jysyList.value[0].student
+  }`;
+  return str;
+});
+// 农村学校师生比样式
+const nc = computed(() => {
+  let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${
+    jysyList.value[1].teacher + jysyList.value[1].student
+  }`;
+  return str;
+});
+// 服务表格样式
+const tableHeaderColor = (arg) => {
+  return {
+    paddingLeft: "10px",
+    letterSpacing: "1px",
+    fontSize: "15px",
+    height: "50px",
+    backgroundColor: "#455F8A",
+    color: "#fff",
+  };
+};
+const rowState = (row) => {
+  if (row.rowIndex % 2 == 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "14px",
+      height: "36px",
+      backgroundColor: "rgba(31, 63, 113, 1)",
+      color: "#fff",
+    };
+  } else if (row.rowIndex % 2 !== 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "14px",
+      height: "36px",
+      backgroundColor: "rgba(43, 74, 121, 1)",
+      color: "#fff",
+    };
+  }
+};
+// 服务表格切换
+const choose = ref("1");
+const change = (index) => {
+  choose.value = index;
+};
+// 添加千位分隔符
+const addThousandSeparator = (numberString) => {
+  return parseInt(numberString.trim(), 10).toLocaleString("en-US");
+};
+const getData = async () => {
+  await http.get("/api/ggfwyth/index").then((res) => {
+    if (res.code == 200) {
+      console.log(res.data);
+      // 民生福利
+      if (data.LivelihoodWelfare) {
+        data.LivelihoodWelfare.zgylbxzsr = addThousandSeparator(
+          res.data.msfz.zgylbxzsr
+        );
+        data.LivelihoodWelfare.zgylbxzzc = addThousandSeparator(
+          res.data.msfz.zgylbxzzc
+        );
+        data.LivelihoodWelfare.cxylbxzsr = addThousandSeparator(
+          res.data.msfz.cxylbxzsr
+        );
+        data.LivelihoodWelfare.cxylbxzzc = addThousandSeparator(
+          res.data.msfz.cxylbxzzc
+        );
+        data.LivelihoodWelfare.gsbxzsr = addThousandSeparator(
+          res.data.msfz.gsbxzsr
+        );
+        data.LivelihoodWelfare.gsbxzzc = addThousandSeparator(
+          res.data.msfz.gsbxzzc
+        );
+        data.LivelihoodWelfare.zgyilbxzsr = addThousandSeparator(
+          res.data.msfz.zgyilbxzsr
+        );
+        data.LivelihoodWelfare.zgyilbxzzc = addThousandSeparator(
+          res.data.msfz.zgyilbxzzc
+        );
+        data.LivelihoodWelfare.cxyilbxzsr = addThousandSeparator(
+          res.data.msfz.cxyilbxzsr
+        );
+        data.LivelihoodWelfare.cxyilbxzzc = addThousandSeparator(
+          res.data.msfz.cxyilbxzzc
+        );
+        data.LivelihoodWelfare.nf = res.data.msfz.nf;
+      }
+      // 救助服务
+      if (data.salvageServices) {
+        data.salvageServices.jzrc = addThousandSeparator(res.data.jzfw.jzrc);
+        data.salvageServices.jzje = addThousandSeparator(res.data.jzfw.jzje);
+        data.salvageServices.nf = res.data.jzfw.nf;
+      }
+      // 教育事业&师生比例
+      // 就业服务
+      // 人口数据&年龄比例
+      data.PopulationData = res.data.rksj;
+      if (data.PopulationData) {
+        data.PopulationData.rkzs = addThousandSeparator(res.data.rksj.rkzs);
+        data.PopulationData.man = addThousandSeparator(res.data.rksj.man);
+        data.PopulationData.woman = addThousandSeparator(res.data.rksj.woman);
+      }
+      // 年龄比例
+      data.ageRatio.push(res.data.rksj.nl17Percent); //13~17岁以下人口占比
+      data.ageRatio.push(res.data.rksj.nl1834Percent); //18~34岁人口占比
+      data.ageRatio.push(res.data.rksj.nl3569Percent); //35~69岁人口占比
+      data.ageRatio.push(res.data.rksj.nl60Percent); //60岁以上人口占比
+      // console.log(data.ageRatio,666);
+      // 公共服务&企业服务&政府服务
+      // 医疗卫生
+      // 文化事业
+      data.whsyList[0].value = addThousandSeparator(res.data.whtysy.ggtsg);
+      data.whsyList[1].value = addThousandSeparator(res.data.whtysy.zcs);
+      data.whsyList[2].value = addThousandSeparator(res.data.whtysy.sxxxcs);
+      data.whsyList[3].value = addThousandSeparator(res.data.whtysy.bwgcgcs);
+      data.whsyList[4].value = addThousandSeparator(res.data.whtysy.tsjycs);
+      // 体育事业
+      data.tysyList[0].value = addThousandSeparator(res.data.whtysy.zqcs);
+      data.tysyList[1].value = addThousandSeparator(res.data.whtysy.lqcs);
+      data.tysyList[2].value = addThousandSeparator(res.data.whtysy.ppqcs);
+      data.tysyList[3].value = addThousandSeparator(res.data.whtysy.ymqcs);
+      data.tysyList[4].value = addThousandSeparator(res.data.whtysy.lsbdcd);
+    }
+  });
+};
+onBeforeMount(async () => {
+  getData();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -1133,7 +1449,7 @@ const jtsyList = ref([
   .center {
     position: absolute;
     top: 35px;
-    left: 215px;
+    left: 226px;
   }
   .right {
     position: absolute;