Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/echarts_yl/ylJHSY.vue

@@ -1,19 +1,50 @@
 <template>
-  <div ref="chart" style="width: 100%; height:430px;"></div>
+  <div ref="chart" style="width: 100%; height: 430px"></div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onBeforeMount,
+  onMounted,
+  reactive,
+  ref,
+  defineProps,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  list2: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
 const chart = ref(); // 创建DOM引用
 
-const data = [120, 200, 50, 80, 70, ];
+const data = reactive({
-const lineData = [150, 230, 24, 218, 135,];
+  list1: [],
-const max = data
+  list2: [],
-  .concat(lineData)
+  year: [],
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+  option: {},
+  // max: null,
+});
+
 // 背景颜色
 const color = [
   {
@@ -38,7 +69,11 @@ const color = [
     ],
   },
 ];
-const option = {
+
+const getOption = () => {
+  data.option = {
+    color,
+    calculable: true,
     tooltip: {
       trigger: "axis",
       formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
@@ -64,8 +99,6 @@ const option = {
       containLabel: true,
       color: "#ffffff",
     },
-  calculable: true,
-  color,
     xAxis: [
       {
         type: "category",
@@ -79,12 +112,12 @@ const option = {
         axisTick: {
           show: false, // 设置轴刻度不显示
         },
-      data: ["2019", "2020", "2021", "2022", "2023"],
+        data: data.year,
       },
       {
         type: "category",
         show: false,
-      data: ["2019", "2020", "2021", "2022", "2023"],
+        data: data.year,
       },
     ],
     yAxis: [
@@ -92,7 +125,7 @@ const option = {
         type: "value",
         scale: true,
         name: "计划生育人数",
-      max: max,
+  
         splitLine: {
           //分割线配置
           show: false,
@@ -121,7 +154,7 @@ const option = {
         type: "value",
         scale: true,
         min: 0,
-      max: max,
+   
         name: "计划生育补贴金额/元",
         splitLine: {
           show: false,
@@ -146,17 +179,43 @@ const option = {
           },
         },
       },
+      {
+        type: "value",
+        max:100,
+        splitLine: {
+          show: false,
+          lineStyle: {
+            type: "solid",
+            color: "rgb(221, 242, 255,0.1)",
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            type: "dotted",
+          },
+        },
+        axisLabel: {
+          show: false,
+          fontSize: 14,
+          fontFamily: "MicrosoftYaHei",
+          color: "#DEF1FF",
+          lineHeight: 19,
+        },
+      },
     ],
     series: [
       {
+        yAxisIndex: 0,
         name: "计划生育人数",
-      data: data,
+        data: data.list1,
         barWidth: 20,
         type: "bar",
       },
       {
+        yAxisIndex: 1,
         name: "计划生育补贴金额",
-      data: lineData,
+        data: data.list2,
         type: "line", //线状图
         itemStyle: {
           borderColor: "#00FCFF",
@@ -166,10 +225,11 @@ const option = {
       },
       {
         xAxisIndex: 1,
+        yAxisIndex: 2,
         itemStyle: {
           color: "rgba(180, 180, 180, 0.2)", //外阴影背景
         },
-      data: data.map(() => max),
+        data: data.list2.map(() => 100),
         barWidth: 40, //外阴影背景宽
         emphasis: {
           itemStyle: {
@@ -195,23 +255,28 @@ const option = {
         type: "bar",
       },
     ],
+  };
 };
 
-// 使用生命钩子
+const setChart = () => {
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
-
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
-
+};
-  // 单图表响应式: 跟随浏览器大小改变
+// 使用生命钩子
-  //   window.addEventListener("resize", () => {
+onBeforeMount(() => {
-  //     myChart.resize();
+  setTimeout(() => {
-  //   });
+    data.list1 = props.list1;
+    data.list2 = props.list2;
+    data.year = props.year;
+    // data.max = data.list1
+    // .concat(data.list2)
+    // .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+    // console.log(data.max,data.list1, data.list2,111);
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 

src/view/echarts_yl/ylXZZC.vue

@@ -6,14 +6,44 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onBeforeMount,
+  onMounted,
+  reactive,
+  ref,
+  defineProps,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list1: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  list2: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
 const chart = ref(null); // 创建DOM引用
 
-const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
+// const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
-const datas = ["8", "10", "7", " 23", "25", "250"];
+// const datas = ["8", "10", "7", " 23", "25", "250"];
+
+
+
+const data = reactive({
+  list1: [],
+  list2: [],
+  option: {},
+});
+
 
 let zoomShow = true;
 // if (data.length > 7) {
@@ -21,8 +51,8 @@ let zoomShow = true;
 // } else {
 //   zoomShow = false;
 // }
-
+const getOption = () => {
-let option = {
+  data.option = {
   tooltip: {
     trigger: "axis",
     axisPointer: {
@@ -31,7 +61,7 @@ let option = {
   },
   legend: {},
   grid: {
-    top: "-2%",
+    top: "0%",
     left: "3%",
     right: "8%",
     bottom: "3%",
@@ -100,7 +130,7 @@ let option = {
   xAxis: {
     // name: '/次',
     type: "value",
-    data: datas,
+    data: data.list2,
     axisLabel: {
       //坐标轴刻度标签的相关设置
       textStyle: {
@@ -108,7 +138,7 @@ let option = {
       },
       // formatter: `{value}/次` // 在每个x轴坐标都添加了单位
       formatter: function (value, index) {
-        if (index === datas.length - 1) {
+        if (index === data.list2.length - 1) {
           // 判断是否为最后一个标签
           return value + "/次"; // 添加单位
         } else {
@@ -132,7 +162,7 @@ let option = {
   },
   yAxis: {
     type: "category", //横向显示
-    data: data,
+    data: data.list1,
     // max:10,
     //y轴文字的配置
     axisLabel: {
@@ -166,7 +196,7 @@ let option = {
   series: [
     {
       type: "bar",
-      data: datas,
+      data: data.list2,
       barWidth: 15, //柱宽
       barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
       // barCategoryGap: "10" /*多个并排柱子设置柱子之间的间距*/,
@@ -186,33 +216,55 @@ let option = {
     },
   ],
 };
+}
 
-onMounted(() => {
+// onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
+//   // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
+//   // var myChart = echarts.init(document.getElementById('main'));
+//   // Vue3中： 需要引入
+//   var myChart = echarts.init(chart.value);
+
+//   // init(); // vue3.2没有this
+//   // 使用刚指定的配置项和数据显示图表。
+//   myChart.setOption(option);
+
+//   myChart.on("scroll", function (event) {
+//     // 根据滚动位置动态计算bargap
+//     var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
+//     myChart.setOption({
+//       yAxis: {
+//         axisLabel: {
+//           bargap: bargap,
+//         },
+//       },
+//     });
+//   });
+
+//   // 单图表响应式: 跟随浏览器大小改变
+//   //   window.addEventListener("resize", () => {
+//   //     myChart.resize();
+//   //   });
+// });
+
+const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
-
-  // init(); // vue3.2没有this
   // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
+  myChart.setOption(data.option);
-
+};
-  myChart.on("scroll", function (event) {
+// 使用生命钩子
-    // 根据滚动位置动态计算bargap
+onBeforeMount(() => {
-    var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
+  setTimeout(() => {
-    myChart.setOption({
+    data.list1 = props.list1;
-      yAxis: {
+    data.list2 = props.list2;
-        axisLabel: {
+    data.year = props.year;
-          bargap: bargap,
+    // data.max = data.list1
-        },
+    // .concat(data.list2)
-      },
+    // .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
-    });
+    // console.log(data.max,data.list1, data.list2,111);
-  });
+    getOption();
-
+    setChart();
-  // 单图表响应式: 跟随浏览器大小改变
+  }, 600);
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
 });
 </script>
 

src/view/education.vue

@@ -231,6 +231,8 @@ import ePie3 from "./echarts_education/pie3.vue";
 import ePie4 from "./echarts_education/pie4.vue";
 import ePieRose from "./echarts_education/pieRose.vue";
 import eP1 from "./echarts_education/eP1.vue";
+import http from "@/utils/request.js";
+
 const fl = ref([
   {
     name: "留守儿童",
@@ -405,7 +407,16 @@ const ratingBtn = (item) => {
 onBeforeMount(() => {
   selectData.list = roseData1.value;
   selectData.list1 = schoolData.value;
+
+  getData();
 });
+const getData = () => {
+  http.get("/api/ggfwyth/education").then((res) => {
+    if (res.code == 200) {
+      console.log(res.data);
+    }
+  });
+};
 </script>
 
 <style lang="scss" scoped>

src/view/yl.vue

@@ -31,8 +31,18 @@
             />
           </span>
         </div>
-        <ePie v-if="leftchoose.first == '1'" :list1="data.leftTop1" :list2="data.leftTop2" :year="data.leftTopYear"></ePie>
+        <ePie
-        <ePie2 v-else :list1="data.leftTop3" :list2="data.leftTop4" :year="data.leftTopYear"></ePie2>
+          v-if="leftchoose.first == '1'"
+          :list1="data.leftTop1"
+          :list2="data.leftTop2"
+          :year="data.leftTopYear"
+        ></ePie>
+        <ePie2
+          v-else
+          :list1="data.leftTop3"
+          :list2="data.leftTop4"
+          :year="data.leftTopYear"
+        ></ePie2>
       </div>
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_2">
@@ -63,8 +73,18 @@
             />
           </span>
         </div>
-        <eP2 v-if="leftchoose.second == '1'" :list1="data.leftCenter1" :list2="data.leftCenter2" :year="data.leftCenterYear"></eP2>
+        <eP2
-        <eP2_2 v-else  :list1="data.leftCenter3" :list2="data.leftCenter4" :year="data.leftCenterYear" />
+          v-if="leftchoose.second == '1'"
+          :list1="data.leftCenter1"
+          :list2="data.leftCenter2"
+          :year="data.leftCenterYear"
+        ></eP2>
+        <eP2_2
+          v-else
+          :list1="data.leftCenter3"
+          :list2="data.leftCenter4"
+          :year="data.leftCenterYear"
+        />
       </div>
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_3">
@@ -95,8 +115,18 @@
             />
           </span>
         </div>
-        <eP3 v-if="leftchoose.third == '1'" :list1="data.leftbottom1" :list2="data.leftbottom2" :year="data.leftbottomYear"></eP3>
+        <eP3
-        <eP3_2 v-else :list1="data.leftbottom3" :list2="data.leftbottom4" :year="data.leftbottomYear"></eP3_2>
+          v-if="leftchoose.third == '1'"
+          :list1="data.leftbottom1"
+          :list2="data.leftbottom2"
+          :year="data.leftbottomYear"
+        ></eP3>
+        <eP3_2
+          v-else
+          :list1="data.leftbottom3"
+          :list2="data.leftbottom4"
+          :year="data.leftbottomYear"
+        ></eP3_2>
       </div>
     </div>
     <div class="displayFlex center_bg">
@@ -106,14 +136,18 @@
           <div class="mtpImg1"></div>
           <div class="mtpImg2"></div>
           <div class="mtpImg3"></div>
-          <div class="mtpText1">5888811</div>
+          <div class="mtpText1">588811</div>
           <div class="mtpText2">18%</div>
         </div>
         <ePie3d></ePie3d>
       </div>
       <div class="flex1">
         <div class="yd_title familyPlanning"></div>
-        <ylJHSY></ylJHSY>
+        <ylJHSY
+          :list1="data.centerBottom1"
+          :list2="data.centerBottom2"
+          :year="data.centerBottomYear"
+        ></ylJHSY>
       </div>
     </div>
     <div class="displayFlex right_bg">
@@ -122,7 +156,7 @@
         <div class="history">
           <div class="history1">
             <div>
-              <span>16<span class="unit">个</span></span>
+              <span>{{data.yljgzlzx.yljg}}<span class="unit">个</span></span>
             </div>
             <img src="@/assets/YLimg/ylimg11.png" alt="" />
             <img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
@@ -136,7 +170,7 @@
           </div> -->
           <div class="history1">
             <div>
-              <span>139<span class="unit">个</span></span>
+              <span>{{data.yljgzlzx.zlzx}}<span class="unit">个</span></span>
             </div>
             <img src="@/assets/YLimg/ylimg12.png" alt="" />
             <img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
@@ -169,7 +203,8 @@
             alt=""
           />
         </div>
-        <ylXZZC></ylXZZC>
+        <ylXZZC  :list1="data.zccs1"
+          :list2="data.zccs2"></ylXZZC>
       </div>
     </div>
   </div>
@@ -198,27 +233,28 @@ const change = (name, index) => {
   leftchoose.value[name] = index;
 };
 const data = reactive({
-  leftTop1:[],
+  leftTop1: [],
-  leftTop2:[],
+  leftTop2: [],
-  leftTop3:[],
+  leftTop3: [],
-  leftTop4:[],
+  leftTop4: [],
-  leftTopYear:[],
+  leftTopYear: [],
-  leftCenter1:[],
+  leftCenter1: [],
-  leftCenter2:[],
+  leftCenter2: [],
-  leftCenter3:[],
+  leftCenter3: [],
-  leftCenter4:[],
+  leftCenter4: [],
-  leftCenterYear:[],
+  leftCenterYear: [],
-  leftbottom1:[],
+  leftbottom1: [],
-  leftbottom2:[],
+  leftbottom2: [],
-  leftbottom3:[],
+  leftbottom3: [],
-  leftbottom4:[],
+  leftbottom4: [],
-  leftbottomYear:[],
+  leftbottomYear: [],
-  centerBottom1:[],
+  centerBottom1: [],
-  centerBottom2:[],
+  centerBottom2: [],
-  centerBottomYear:[],
+  centerBottomYear: [],
+  yljgzlzx: { yljg: "", zlzx: "" },
   zccs1: [],
-  zccs2: []
+  zccs2: [],
-})
+});
 onBeforeMount(() => {
   getData();
 });
@@ -227,54 +263,57 @@ const getData = () => {
     if (res.code == 200) {
       // 养老保险
       // 人次
-      res.data.endowmentInsurance.ffrc.forEach(element => {
+      res.data.endowmentInsurance.ffrc.forEach((element) => {
-        data.leftTop1.push(element.zgffrc)
+        data.leftTop1.push(element.zgffrc);
-        data.leftTop2.push(element.cxffrc)
+        data.leftTop2.push(element.cxffrc);
       });
       //金额
-      res.data.endowmentInsurance.ffje.forEach(element => {
+      res.data.endowmentInsurance.ffje.forEach((element) => {
-        data.leftTop3.push(element.zgffje)
+        data.leftTop3.push(element.zgffje);
-        data.leftTop4.push(element.cxffje)
+        data.leftTop4.push(element.cxffje);
       });
       // 年份
-      data.leftTopYear = res.data.endowmentInsurance.year
+      data.leftTopYear = res.data.endowmentInsurance.year;
       //高龄老人补贴
       // 人次
-      res.data.oldAgeSubsidy.btrs.forEach(element => {
+      res.data.oldAgeSubsidy.btrs.forEach((element) => {
-        data.leftCenter1.push(element.ninetyNinetyEight)
+        data.leftCenter1.push(element.ninetyNinetyEight);
-        data.leftCenter2.push(element.ninetyNine)
+        data.leftCenter2.push(element.ninetyNine);
       });
       //金额
-      res.data.oldAgeSubsidy.btje.forEach(element => {
+      res.data.oldAgeSubsidy.btje.forEach((element) => {
-        data.leftCenter3.push(element.ninetyNinetyEight)
+        data.leftCenter3.push(element.ninetyNinetyEight);
-        data.leftCenter4.push(element.ninetyNine)
+        data.leftCenter4.push(element.ninetyNine);
       });
-      data.leftCenterYear = res.data.oldAgeSubsidy.year
+      data.leftCenterYear = res.data.oldAgeSubsidy.year;
       // 特困低保老人救助
       // 人次
-      res.data.tkdbOldAge.tkdbffrc.forEach(element => {
+      res.data.tkdbOldAge.tkdbffrc.forEach((element) => {
-        data.leftbottom1.push(element.tkjzrc)
+        data.leftbottom1.push(element.tkjzrc);
-        data.leftbottom2.push(element.dbjzrc)
+        data.leftbottom2.push(element.dbjzrc);
       });
       //金额
-      res.data.tkdbOldAge.tkdbffje.forEach(element => {
+      res.data.tkdbOldAge.tkdbffje.forEach((element) => {
-        data.leftbottom3.push(element.tkjzje)
+        data.leftbottom3.push(element.tkjzje);
-        data.leftbottom4.push(element.dbjzje)
+        data.leftbottom4.push(element.dbjzje);
       });
       // 年份
-      data.leftbottomYear = res.data.tkdbOldAge.year
+      data.leftbottomYear = res.data.tkdbOldAge.year;
       // 计划生育
-      res.data.familyPlanning.familyPlanningData.forEach(element => {
+      res.data.familyPlanning.familyPlanningData.forEach((element) => {
-        data.centerBottom1.push(element.jhsyrs)    // 人次
+        data.centerBottom1.push(element.jhsyrs); // 人次
-        data.centerBottom2.push(element.jhsybtje)   // 金额
+        data.centerBottom2.push(element.jhsybtje); // 金额
       });
       // 年份
-      data.centerBottomYear = res.data.familyPlanning.year
+      data.centerBottomYear = res.data.familyPlanning.year;
+      // 养老机构及照料中心
+      data.yljgzlzx.yljg = res.data.yljgzlzx.yljg;
+      data.yljgzlzx.zlzx = res.data.yljgzlzx.zlzx;
       // 助老服务
       // 乡镇助餐次数
-      res.data.zlfw.xzzccs.forEach(element => {
+      res.data.zlfw.xzzccs.forEach((element) => {
-        data.zccs1.push(element.xzjd)    // 地点
+        data.zccs1.push(element.xzjd); // 地点
-        data.zccs2.push(element.zccs)   // 次数
+        data.zccs2.push(element.zccs); // 次数
       });
     }
   });