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

src/view/echarts_work/eP1.vue

@@ -3,19 +3,57 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onBeforeMount,
+  onMounted,
+  ref,
+  reactive,
+  defineProps,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    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 = [1500, 2300, 204, 2018, 1305];
+  list: [],
-const max = data
+  list1: [],
-  .concat(lineData)
+  list2: [],
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+  year: [],
+  option: {},
+  // max: null,
+});
 
-const option = {
+// const data1 = [120, 200, 50, 80, 70];
+// const lineData = [1500, 2300, 204, 2018, 1305];
+// const max = data1
+//   .concat(lineData)
+//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+
+const getOption = () => {
+  data.option = {
     tooltip: {
       trigger: "axis",
       formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
@@ -51,12 +89,13 @@ const option = {
         axisTick: {
           show: false, // 设置轴刻度不显示
         },
-      data: ["2019", "2020", "2021", "2022", "2023"],
+        // data: ["2019", "2020", "2021", "2022", "2023"],
+        data: data.list.year,
       },
       {
         type: "category",
         show: false,
-      data: ["2019", "2020", "2021", "2022", "2023"],
+        data: data.list.year,
       },
     ],
     yAxis: [
@@ -64,7 +103,7 @@ const option = {
         type: "value",
         scale: true,
         name: "救助人数",
-   
+        min: 0,
         splitLine: {
           //分割线配置
           show: false,
@@ -153,18 +192,18 @@ const option = {
       {
         yAxisIndex: 1,
         name: "救助金额",
-      data: lineData,
+        data: data.list2,
         type: "line", //线状图
         stack: "Total",
         symbol: "emptyCircle",
         symbolSize: 10,
-      label:{
+        label: {
-        show:true,
+          show: true,
-        position:'top',
+          position: "top",
-        color:'#ffffff',
+          color: "#ffffff",
-        formatter:function(data){
+          formatter: function (data) {
-          return data.value
+            return data.value;
-        }
+          },
         },
         itemStyle: {
           borderColor: "#00FCFF",
@@ -175,16 +214,16 @@ const option = {
       {
         yAxisIndex: 0,
         name: "救助人数",
-      data: data,
+        data: data.list1,
         barWidth: 20,
         type: "bar",
-      label:{
+        label: {
-        show:true,
+          show: true,
-        position:'insideTop',
+          // position: "insideTop",
-        color:'#ffffff',
+          color: "#ffffff",
-        formatter:function(data){
+          formatter: function (data) {
-          return data.value
+            return data.value;
-        }
+          },
         },
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -227,27 +266,34 @@ const option = {
         itemStyle: {
           color: "rgba(221, 242, 255, 0.1)",
         },
-      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+        data: data.list.year.map(() => 100),
         barWidth: 50,
       },
     ],
+  };
+};
+
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+
+const setChart1 = () => {
+  data.list.data.forEach((item) => {
+    data.list1.push(item.jzrs); //救助人数
+    data.list2.push(item.jzje); //救助金额
+  });
 };
 
 // 使用生命钩子
-onMounted(() => {
+onBeforeMount(() => {
-  // 基于准备好的dom，初始化echarts实例
+  setTimeout(() => {
-  // var myChart = echarts.init(document.getElementById('main'));
+    data.list = props.list;
-  // Vue3中： 需要引入
+    setChart1();
-  var myChart = echarts.init(chart.value);
+    // console.log(data.list, data.list1, data.list2, "教育");
-
+    getOption();
-  // init(); // vue3.2没有this
+    setChart();
-  // 使用刚指定的配置项和数据显示图表。
+  }, 600);
-  myChart.setOption(option);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
 });
 </script>
 

src/view/echarts_work/eP2.vue

@@ -1,46 +1,59 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 340px"></div>
+  <div ref="chart" style="width: 100%; height: 330px"></div>
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onBeforeMount,
+  onMounted,
+  ref,
+  reactive,
+  defineProps,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+  // list2: {
+  //   type: Array,
+  //   default: () => {
+  //     return [];
+  //   },
+  // },
+  year: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
 const chart = ref(); // 创建DOM引用
 
-const data = [1200, 2000, 500, 800, 700];
+const data = reactive({
-const lineData = [150, 230, 24, 218, 135];
+  list: [],
-const max = data
+  list1: [],
-  .concat(lineData)
+  list2: [],
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+  year: [],
-const maxRs = data.reduce((pre, cur) => (pre > cur ? pre : cur), 0);
+  option: {},
-const maxJe = lineData.reduce((pre, cur) => (pre > cur ? pre : cur), 0);
+  // max: null,
-// 背景颜色
+});
-const color = [
+
-  {
+// const data1 = [120, 200, 50, 80, 70];
-    type: "linear",
+// const lineData = [1500, 2300, 204, 2018, 1305];
-    x: 0,
+// const max = data1
-    x2: 0,
+//   .concat(lineData)
-    y: 0,
+//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
-    y2: 1,
+
-    colorStops: [
+const getOption = () => {
-      {
+  data.option = {
-        offset: 0,
-        color: "rgba(142, 187, 255, 1)",
-      },
-      {
-        offset: 0.5,
-        color: "rgba(142, 187, 255, 0.5)",
-      },
-      {
-        offset: 1,
-        color: "rgba(142, 187, 255, 0.20)",
-      },
-    ],
-  },
-];
-const option = {
     tooltip: {
       trigger: "axis",
       formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
@@ -59,10 +72,9 @@ const option = {
       bottom: "0%",
       containLabel: true,
       color: "#ffffff",
-    fontSize: 14,
     },
     calculable: true,
-  color,
+
     xAxis: [
       {
         type: "category",
@@ -77,12 +89,13 @@ const option = {
         axisTick: {
           show: false, // 设置轴刻度不显示
         },
-      data: ["2019", "2020", "2021", "2022", "2023"],
+        // data: ["2019", "2020", "2021", "2022", "2023"],
+        data: data.list.year,
       },
       {
         type: "category",
         show: false,
-      data: ["2019", "2020", "2021", "2022", "2023"],
+        data: data.list.year,
       },
     ],
     yAxis: [
@@ -90,7 +103,7 @@ const option = {
         type: "value",
         scale: true,
         name: "救助人数",
-
+        min: 0,
         splitLine: {
           //分割线配置
           show: false,
@@ -103,8 +116,8 @@ const option = {
         axisLabel: {
           //y轴文字的配置
           textStyle: {
-          color: "#ffffff",
             fontSize: 14,
+            color: "#ffffff",
           },
         },
         axisLine: {
@@ -169,9 +182,9 @@ const option = {
         axisLabel: {
           show: false,
           fontSize: 14,
-        color: "#DEF1FF",
-        lineHeight: 19,
           fontFamily: "MicrosoftYaHei",
+          color: "#ffffff",
+          lineHeight: 19,
         },
       },
     ],
@@ -179,18 +192,18 @@ const option = {
       {
         yAxisIndex: 1,
         name: "救助金额",
-      data: lineData,
+        data: data.list2,
         type: "line", //线状图
         stack: "Total",
         symbol: "emptyCircle",
         symbolSize: 10,
-      label:{
+        label: {
-        show:true,
+          show: true,
-        position:'top',
+          position: "top",
-        color:'#ffffff',
+          color: "#ffffff",
-        formatter:function(data){
+          formatter: function (data) {
-          return data.value
+            return data.value;
-        }
+          },
         },
         itemStyle: {
           borderColor: "#00FCFF",
@@ -201,16 +214,16 @@ const option = {
       {
         yAxisIndex: 0,
         name: "救助人数",
-      data: data,
+        data: data.list1,
         barWidth: 20,
         type: "bar",
-      label:{
+        label: {
-        show:true,
+          show: true,
-        position:'insideTop',
+          // position: "insideTop",
-        color:'#ffffff',
+          color: "#ffffff",
-        formatter:function(data){
+          formatter: function (data) {
-          return data.value
+            return data.value;
-        }
+          },
         },
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -253,16 +266,34 @@ const option = {
         itemStyle: {
           color: "rgba(221, 242, 255, 0.1)",
         },
-      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+        data: data.list.year.map(() => 100),
         barWidth: 50,
       },
     ],
+  };
+};
+
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+
+const setChart1 = () => {
+  data.list.data.forEach((item) => {
+    data.list1.push(item.jzrs); //救助人数
+    data.list2.push(item.jzje); //救助金额
+  });
 };
 
 // 使用生命钩子
-onMounted(() => {
+onBeforeMount(() => {
-  var myChart = echarts.init(chart.value);
+  setTimeout(() => {
-  myChart.setOption(option);
+    data.list = props.list;
+    setChart1();
+    // console.log(data.list, data.list1, data.list2, "教育");
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 

src/view/work.vue

@@ -21,14 +21,14 @@
           >
             医疗
           </div>
-          <div
+          <!-- <div
             :class="jz[0].choose == '3' ? 'choose_1' : 'choose_2'"
             @click="jzChange(0, '3')"
           >
             就业
+          </div> -->
         </div>
-        </div>
+        <eP1 :list="data.education"></eP1>
-        <eP1></eP1>
         <div class="choose">
           <div
             :class="jz[1].choose == '1' ? 'choose_1' : 'choose_2'"
@@ -36,12 +36,12 @@
           >
             住房
           </div>
-          <div
+          <!-- <div
             :class="jz[1].choose == '2' ? 'choose_1' : 'choose_2'"
             @click="jzChange(1, '2')"
           >
             自然灾害
-          </div>
+          </div> -->
           <div
             :class="jz[1].choose == '3' ? 'choose_1' : 'choose_2'"
             @click="jzChange(1, '3')"
@@ -49,7 +49,7 @@
             临时救助
           </div>
         </div>
-        <eP2></eP2>
+        <eP2 :list="data.housing"></eP2>
       </div>
     </div>
     <div class="displayFlex center_bg">
@@ -70,7 +70,12 @@
             <span>金额(元)</span>
             <!-- <span>数据对比</span> -->
           </div>
-          <div class="rolling">
+          <div
+            class="rolling"
+            ref="mainRef"
+            @mouseenter="stopAutoScroll"
+            @mouseleave="startAutoScroll"
+          >
             <div
               v-for="(item, index) in data.lifeAssistance.subsidyInformation"
               :key="index"
@@ -111,42 +116,31 @@
       </div>
       <div class="flex1">
         <div class="yd_title right_2"></div>
-        <div style="margin-top: 20px">
+        <div class="dyh">
-          <div class="czr-bj">
+          <div
+            class="czr-bj"
+            v-for="(item, index) in data.diversification.hszhxms"
+            :key="index"
+          >
             <div class="czrBox">
-              <div class="situation situation1"></div>
+              <div>发起单位:</div>
-              <div class="column">
+              <div>{{ item.fqdw }}</div>
-                <!-- <div v-for="item in data.diversification.hszhxms">
-                  发起单位: {{ item.fqdw }}
-                  <br>
-                  项目名称: {{item.xmmc}}
-                  <br>
-                  公众筹款金额(元): {{ item.gzzcje }}
-                  <br>
-                  捐赠支出金额: {{ item.jzzcje }}
-                  <br>
-                  捐赠人次: {{ item.jzrc }}
-                </div> -->
-              </div>
             </div>
             <div class="czrBox">
-              <div class="situation situation2"></div>
+              <div>项目名称:</div>
-              <div class="column">
+              <div>{{ item.xmmc }}</div>
-                <div v-for="item in data.diversification.hszhxms">
-                  发起单位: {{ item.fqdw }}
-                  <br />
-                  项目名称: {{ item.xmmc }}
-                  <br />
-                  公众筹款金额(元): {{ item.gzzcje }}
-                  <br />
-                  捐赠支出金额: {{ item.jzzcje }}
-                  <br />
-                  捐赠人次: {{ item.jzrc }}
-                </div>
-              </div>
             </div>
             <div class="czrBox">
-              <div class="situation situation3"></div>
+              <div>公众筹款金额(元):</div>
+              <div>{{ item.gzzcje }}</div>
+            </div>
+            <div class="czrBox">
+              <div>捐赠支出金额:</div>
+              <div>{{ item.jzzcje }}</div>
+            </div>
+            <div class="czrBox">
+              <div>捐赠人次:</div>
+              <div>{{ item.jzrc }}</div>
             </div>
           </div>
         </div>
@@ -235,11 +229,12 @@ const getData = async () => {
   await http.get("/api/ggfwyth/succour").then((res) => {
     if (res.code == 200) {
       console.log(res.data);
+      data.diversification.hszhxms = res.data.diversification.hszhxms;
       // 专项救助模块
-      // 教育&医疗&就业
+      // 教育&医疗
       data.education.data = res.data.specialAssistance.education.data;
       data.education.year = res.data.specialAssistance.education.year;
-      // 住房&自然灾害&临时救助
+      // 住房&临时救助
       data.housing.data = res.data.specialAssistance.housing.data;
       data.housing.year = res.data.specialAssistance.housing.year;
       // 救助概况
@@ -258,9 +253,42 @@ const getData = async () => {
     }
   });
 };
+
+//自动滚动
+const mainRef = ref(null);
+let isAutoScrolling = true;
+
+const stopAutoScroll = () => {
+  isAutoScrolling = false;
+};
+
+const startAutoScroll = () => {
+  isAutoScrolling = true;
+  autoScroll();
+};
+
+const autoScroll = () => {
+  if (!isAutoScrolling) return;
+
+  const mainEl = mainRef.value;
+  mainEl.scrollTop += 1; // 每次滚动的距离
+
+  if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
+    setTimeout(() => {
+      mainEl.scrollTo({ top: 0, behavior: "smooth" });
+      setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
+    }, 1000); // 暂停1秒后开始快速滚回顶部
+  } else {
+    requestAnimationFrame(autoScroll);
+  }
+};
+
 onBeforeMount(() => {
   getData();
 });
+onMounted(() => {
+  startAutoScroll();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -322,6 +350,7 @@ onBeforeMount(() => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_1_1 {
   background-image: url(@/assets/images/work/new_qtjz.png);
   background-repeat: no-repeat;
@@ -351,6 +380,7 @@ onBeforeMount(() => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .right_2 {
   background-image: url(@/assets/images/work/new_dyh.png);
   background-repeat: no-repeat;
@@ -597,11 +627,13 @@ onBeforeMount(() => {
     top: 3px;
   }
 }
+
 .choose {
   display: flex;
   justify-content: center;
   margin-top: 47px;
   margin-bottom: 20px;
+
   .choose_1 {
     cursor: pointer;
     width: 124px;
@@ -618,6 +650,7 @@ onBeforeMount(() => {
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
+
   .choose_2 {
     cursor: pointer;
     width: 124px;
@@ -645,6 +678,7 @@ onBeforeMount(() => {
 .flex11 {
   padding: 12px 0;
 }
+
 .czr-sl {
   display: flex;
 
@@ -780,57 +814,49 @@ onBeforeMount(() => {
   }
 }
 
-.czr-bj {
+.dyh {
-  width: 529px;
+  margin-top: 10px;
-  // height: 350px;
+  overflow: hidden;
+  height: 380px;
+  overflow-y: auto;
+  width: 100%;
+
+  .czr-bj {
+    width: 480px;
     // height: calc(100% - 26px);
     background: rgba(0, 103, 165, 0.18);
     box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
     border-radius: 2px;
-  padding: 20px 0 0 14px;
+    padding: 20px 26px 1px 32px;
+    margin: 0 auto 12px;
     // box-sizing: border-box;
 
     .czrBox {
-    height: 118px;
+      height: 22px;
-    .column {
+      font-weight: 500;
-      height: calc(100% - 26px);
+      font-size: 16px;
-      overflow-y: auto;
-      font-size: 14px;
       color: #ffffff;
-      padding-left: 18px;
+      line-height: 22px;
-      padding-right: 18px;
+      letter-spacing: 3px;
+      text-shadow: 0px 0px 17px rgba(0, 255, 254, 0.5);
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
     }
   }
-
-  .situation {
-    width: 495px;
-    height: 26px;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .situation1 {
-    background-image: url(@/assets/images/work/dyh.png);
-  }
-
-  .situation2 {
-    background-image: url(@/assets/images/work/dyh2.png);
-  }
-
-  .situation3 {
-    background-image: url(@/assets/images/work/dyh1.png);
-  }
-
 }
+
 .school {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
+
 .fundingBox {
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .funding {
     width: 520px;
     height: 34px;
@@ -843,6 +869,7 @@ onBeforeMount(() => {
     display: flex;
     align-items: center;
     justify-content: space-around;
+
     // align-items: center;
     // justify-content: center;
     // flex-direction: column;
@@ -856,6 +883,7 @@ onBeforeMount(() => {
       letter-spacing: 3px;
     }
   }
+
   .rolling {
     width: 100%;
     height: 200px;
@@ -864,7 +892,7 @@ onBeforeMount(() => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    // padding-left: 6px;
+    padding-left: 6px;
 
     .fundingContent {
       display: flex;
@@ -888,6 +916,7 @@ onBeforeMount(() => {
         width: 70%;
         padding-left: 38px;
       }
+
       span:nth-child(2) {
         width: 30%;
         // padding-left: 50px;
@@ -895,11 +924,13 @@ onBeforeMount(() => {
     }
   }
 }
+
 .rating {
   width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .ratingBtn {
     display: flex;
     // align-items: center;
@@ -910,7 +941,8 @@ onBeforeMount(() => {
       background-image: url(@/assets/eduImg/jyImg19.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
-      cursor: pointer; /* 添加指针样式以指示可点击 */
+      cursor: pointer;
+      /* 添加指针样式以指示可点击 */
     }
 
     .ratingImg {
@@ -920,6 +952,7 @@ onBeforeMount(() => {
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
+
     .onImg.active {
       width: 62px;
       height: 29px;
@@ -927,6 +960,7 @@ onBeforeMount(() => {
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
+
     span {
       height: 100%;
       display: flex;
@@ -955,20 +989,24 @@ onBeforeMount(() => {
   }
 }
 
-.column::-webkit-scrollbar {
+.dyh::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
+  display: none;
+  /* Chrome Safari */
 }
+
 /* 滚动条整体部分 */
 .rolling::-webkit-scrollbar {
   width: 5px;
   // height: 10px;
 }
+
 /* 滚动槽 */
 .rolling::-webkit-scrollbar-track {
   border-radius: 1px;
   background: rgba(0, 128, 231, 0.56);
   -webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
 }
+
 /* 滚动条滑块样式 */
 .rolling::-webkit-scrollbar-thumb {
   background-clip: content-box;