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

src/view/echarts_yl/pie3d.vue

@@ -560,11 +560,11 @@ const setChart = () => {
 onBeforeMount(() => {
   setTimeout(() => {
     data.list = props.list;
-    pieData[0].value = data.list.nl5160;
-    pieData[1].value = data.list.nl6170;
-    pieData[2].value = data.list.nl7180;
-    pieData[3].value = data.list.nl8190;
-    pieData[4].value = data.list.nl91100;
+    pieData[0].value = data.list.nl6170;
+    pieData[1].value = data.list.nl7180;
+    pieData[2].value = data.list.nl8190;
+    pieData[3].value = data.list.nl91100;
+    pieData[4].value = data.list.nl100;
 
     getOption();
     setChart();

src/view/echarts_yl/ylSMFW.vue

@@ -3,17 +3,43 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import {
+  onBeforeMount,
+  onMounted,
+  ref,
+  reactive,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
 // 局部引入echarts核心模块
+
 import * as echarts from "echarts";
 
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
 const chart = ref(); // 创建DOM引用
 
-const data = [120, 200, 150, 80, 70];
-const lineData = [150, 230, 224, 218, 135];
-const max = data
-  .concat(lineData)
-  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+const data = reactive({
+  list: [],
+  list1: [],
+  list2: [],
+  day: [],
+  option: {},
+  initialLegendData: ["上门服务时长", "上门服务次数"],
+});
+
+// const data1 = [120, 200, 150, 80, 70];
+// const lineData = [150, 230, 224, 218, 135];
+// const max = data
+//   .concat(lineData)
+//   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
 // 背景颜色
 const color = [
   {
@@ -38,255 +64,282 @@ const color = [
     ],
   },
 ];
-const option = {
-  color,
-  tooltip: {
-    trigger: "axis",
-    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
-    axisPointer: {},
-  },
-  legend: {
-    data: ["上门服务时长", "上门服务次数"],
-    // top: "8%",
-    textStyle: {
-      fontSize: 16,
-      color: "#ffffff",
+const getOption = () => {
+  data.option = {
+    color,
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
+      axisPointer: {},
     },
-  },
-  grid: {
-    top: "18%",
-    left: "3%",
-    right: "6%",
-    bottom: "0%",
-    containLabel: true,
-    color: "#ffffff",
-    fontSize: 16,
-  },
-  calculable: true,
-
-  xAxis: [
-    {
-      type: "category",
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-        },
-      },
-      axisTick: {
-        show: false, // 设置轴刻度不显示
-      },
-      data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
-    },
-    {
-      type: "category",
-      show: false,
-      data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
-    },
-  ],
-  yAxis: [
-    {
-      type: "value",
-      scale: true,
-      name: "时长/小时",
-      splitLine: {
-        show: false,
-        lineStyle: {
-          color: "rgba(255, 255, 255, 0.3)",
-          fontSize: 16,
-          width: 1,
-        },
-      },
-      axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-        },
-      },
-      axisLine: {
-        //y轴线的颜色以及宽度
-        show: false,
-        lineStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-          width: 1,
-          type: "solid",
-        },
-      },
-    },
-    {
-      type: "value",
-      scale: true,
-      name: "次数/次",
-      min: 0,
-      splitLine: {
-        //分割线配置
-        show: false,
-        lineStyle: {
-          color: "rgba(255, 255, 255, 0.3)",
-          width: 1,
-          fontSize: 16,
-        },
-      },
-      axisLabel: {
-        //y轴文字的配置
-        textStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-        },
-      },
-      axisLine: {
-        //y轴线的颜色以及宽度
-        show: false,
-        lineStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-          width: 1,
-          type: "solid",
-        },
-      },
-    },
-    {
-      type: "value",
-      max: 100,
-      splitLine: {
-        show: false,
-        lineStyle: {
-          type: "solid",
-          color: "rgba(255, 255, 255, 0.3)",
-        },
-      },
-      axisLine: {
-        show: false,
-        lineStyle: {
-          type: "dotted",
-        },
-      },
-      axisLabel: {
-        show: false,
+    legend: {
+      data: data.initialLegendData,
+      // top: "8%",
+      textStyle: {
         fontSize: 16,
         color: "#ffffff",
-        lineHeight: 19,
-        fontFamily: "MicrosoftYaHei",
       },
     },
-  ],
-  series: [
-    {
-      z: 1,
-      yAxisIndex: 0,
-      name: "上门服务时长",
-      data: data,
-      barWidth: 20,
-      type: "bar",
-      itemStyle: {
-        color: {
-          type: "linear",
-          x: 0,
-          x2: 1,
-          y: 0,
-          y2: 0,
-          colorStops: [
-            { offset: 0, color: "rgba(142, 187, 255, .7)" },
-            { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
-            { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
-            { offset: 1, color: "rgba(142, 187, 255, .5)" },
-          ],
-        },
-      },
-      label: {
-        show: true,
-        color: "#ffffff",
-        formatter: function (data) {
-          return data.value;
-        },
-      },
+    grid: {
+      top: "18%",
+      left: "3%",
+      right: "6%",
+      bottom: "0%",
+      containLabel: true,
+      color: "#ffffff",
+      fontSize: 16,
     },
-    {
-      yAxisIndex: 1,
-      name: "上门服务次数",
-      data: lineData,
-      type: "line", //线状图
-      label: {
-        show: true,
-        position: "top",
-        color: "#ffffff",
-        formatter: function (data) {
-          return data.value;
+    calculable: true,
+
+    xAxis: [
+      {
+        type: "category",
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisTick: {
+          show: false, // 设置轴刻度不显示
+        },
+        data: data.day,
+      },
+      {
+        type: "category",
+        show: false,
+        data: data.day,
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        scale: true,
+        name: "时长/小时",
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.3)",
+            fontSize: 16,
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
         },
       },
-      itemStyle: {
-        borderColor: "#00FCFF",
-        borderWidth: 1,
-        color: "#00FCFF",
+      {
+        type: "value",
+        scale: true,
+        name: "次数/次",
+        min: 0,
+        splitLine: {
+          //分割线配置
+          show: false,
+          lineStyle: {
+            color: "rgba(255, 255, 255, 0.3)",
+            width: 1,
+            fontSize: 16,
+          },
+        },
+        axisLabel: {
+          //y轴文字的配置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        axisLine: {
+          //y轴线的颜色以及宽度
+          show: false,
+          lineStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+            width: 1,
+            type: "solid",
+          },
+        },
       },
-    },
-    {
-      xAxisIndex: 1,
-      yAxisIndex: 2,
-      itemStyle: {
-        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
+      {
+        type: "value",
+        max: 100,
+        splitLine: {
+          show: false,
+          lineStyle: {
+            type: "solid",
+            color: "rgba(255, 255, 255, 0.3)",
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            type: "dotted",
+          },
+        },
+        axisLabel: {
+          show: false,
+          fontSize: 16,
+          color: "#ffffff",
+          lineHeight: 19,
+          fontFamily: "MicrosoftYaHei",
+        },
       },
-      data: data.map(() => 100),
-      barWidth: 40, //外阴影背景宽
-      emphasis: {
+    ],
+    series: [
+      {
+        z: 1,
+        yAxisIndex: 0,
+        name: "上门服务时长",
+        data: data.list1,
+        barWidth: 20,
+        type: "bar",
         itemStyle: {
           color: {
             type: "linear",
             x: 0,
-            x2: 0,
+            x2: 1,
             y: 0,
-            y2: 1,
+            y2: 0,
             colorStops: [
-              {
-                offset: 0,
-                color: "rgba(64, 247, 176, 0.25)",
-              },
-              {
-                offset: 1,
-                color: "rgba(17, 34, 64, 0.25)",
-              },
+              { offset: 0, color: "rgba(142, 187, 255, .7)" },
+              { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
+              { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
+              { offset: 1, color: "rgba(142, 187, 255, .5)" },
             ],
           },
         },
+        label: {
+          show: true,
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
       },
-      type: "bar",
-    },
-    //顶部四边形
-    {
-      z: 1,
-      name: "上部1",
-      type: "pictorialBar",
-      symbolPosition: "end",
-      data: data,
-      symbol: "diamond",
-      symbolOffset: ["0%", "-50%"],
-      symbolSize: [22, 15],
-      itemStyle: {
-        borderColor: "#2fffa4",
-        color: "rgba(142, 187, 255, 1)",
+      {
+        yAxisIndex: 1,
+        name: "上门服务次数",
+        data: data.list2,
+        type: "line", //线状图
+        label: {
+          show: true,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        itemStyle: {
+          borderColor: "#00FCFF",
+          borderWidth: 1,
+          color: "#00FCFF",
+        },
       },
-    },
-  ],
+      {
+        xAxisIndex: 1,
+        yAxisIndex: 2,
+        itemStyle: {
+          color: "rgba(180, 180, 180, 0.2)", //外阴影背景
+        },
+        data: data.list1.map(() => 100),
+        barWidth: 40, //外阴影背景宽
+        emphasis: {
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 0,
+              y: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "rgba(64, 247, 176, 0.25)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(17, 34, 64, 0.25)",
+                },
+              ],
+            },
+          },
+        },
+        type: "bar",
+      },
+      //顶部四边形
+      {
+        z: 1,
+        name: "上部1",
+        type: "pictorialBar",
+        symbolPosition: "end",
+        data: data.list1,
+        symbol: "diamond",
+        symbolOffset: ["0%", "-50%"],
+        symbolSize: [22, 15],
+        itemStyle: {
+          borderColor: "#2fffa4",
+          color: "rgba(142, 187, 255, 1)",
+        },
+      },
+    ],
+  };
+};
+
+// // 使用生命钩子
+// onMounted(() => {
+//   // 基于准备好的dom，初始化echarts实例
+//   // var myChart = echarts.init(document.getElementById('main'));
+//   // Vue3中： 需要引入
+//   var myChart = echarts.init(chart.value);
+
+//   // init(); // vue3.2没有this
+//   // 使用刚指定的配置项和数据显示图表。
+//   myChart.setOption(option);
+
+//   // 单图表响应式: 跟随浏览器大小改变
+//   //   window.addEventListener("resize", () => {
+//   //     myChart.resize();
+//   //   });
+// });
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+
+const setChart1 = () => {
+  data.list1 = [];
+  data.list2 = [];
+  data.list.data.forEach((item) => {
+    data.list1.push(item.sc); //服务时长
+    data.list2.push(item.fwcs); //服务次数
+  });
 };
 
 // 使用生命钩子
-onMounted(() => {
-  // 基于准备好的dom，初始化echarts实例
-  // var myChart = echarts.init(document.getElementById('main'));
-  // Vue3中： 需要引入
-  var myChart = echarts.init(chart.value);
-
-  // init(); // vue3.2没有this
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option);
-
-  // 单图表响应式: 跟随浏览器大小改变
-  //   window.addEventListener("resize", () => {
-  //     myChart.resize();
-  //   });
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    data.day = props.list.day;
+    // console.log(data.list, "助老服务");
+    setChart1();
+    getOption();
+    setChart();
+  }, 600);
 });
 </script>
 

src/view/education.vue

@@ -11,7 +11,11 @@
         <eP1 :list="data.xsql"></eP1>
         <div class="t_1"></div>
         <div class="t_2">
-          <div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index">
+          <div
+            class="t_2_1"
+            v-for="(item, index) in data.zdgz"
+            :key="index"
+          >
             <div class="top">{{ item.value }}</div>
             <div class="t_3">
               <div :class="item.cls"></div>
@@ -20,7 +24,10 @@
           </div>
         </div>
       </div>
-      <div class="flex1" style="margin-top: 30px">
+      <div
+        class="flex1"
+        style="margin-top: 30px"
+      >
         <div class="yd_title left_2">
           <div class="animate-border">
             <i></i>
@@ -90,6 +97,16 @@
             </div>
           </div>
           <div class="schoolb">
+            <img
+              src="../assets/eduImg/xxgkTop.png"
+              class="gkTop"
+              alt=""
+            >
+            <img
+              src="../assets/eduImg/xxgk.gif"
+              class="gkMove"
+              alt=""
+            >
             <div class="grade">
               <div class="schoolbs">
                 <span class="spot">初中</span>
@@ -127,7 +144,10 @@
         <div style="width: 100%; display: flex; flex-wrap: wrap">
           <edie :list="data.xzncxxsl"></edie>
           <div class="rating">
-            <edXX :list="data.schoolData" :active="selectData.active"></edXX>
+            <edXX
+              :list="data.schoolData"
+              :active="selectData.active"
+            ></edXX>
             <div class="ratingBtn">
               <!-- <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
                 <span @click="ratingBtn('城市')">城市</span>
@@ -202,7 +222,15 @@
             <div>
               <span class="green">16</span>
             </div>
-            <img src="@/assets/eduImg/jyImg10.png" alt="" />
+            <img
+              src="@/assets/eduImg/jyImg10.png"
+              alt=""
+            />
+            <img
+              src="@/assets/eduImg/pp3.gif"
+              alt=""
+              class="ppImg"
+            />
             <div class="historyimg historyimg1">
               <span>绿色预警</span>
             </div>
@@ -211,7 +239,15 @@
             <div>
               <span class="yellow">239</span>
             </div>
-            <img src="@/assets/eduImg/jyImg9.png" alt="" />
+            <img
+              src="@/assets/eduImg/jyImg9.png"
+              alt=""
+            />
+            <img
+              src="@/assets/eduImg/pp2.gif"
+              alt=""
+              class="ppImg"
+            />
             <div class="historyimg historyimg2">
               <span>黄色预警</span>
             </div>
@@ -220,7 +256,15 @@
             <div>
               <span class="red">139</span>
             </div>
-            <img src="@/assets/eduImg/jyImg8.png" alt="" />
+            <img
+              src="@/assets/eduImg/jyImg8.png"
+              alt=""
+            />
+            <img
+              src="@/assets/eduImg/pp1.gif"
+              alt=""
+              class="ppImg"
+            />
             <div class="historyimg historyimg3">
               <span>红色预警</span>
             </div>
@@ -1050,6 +1094,13 @@ onMounted(() => {
     display: flex;
     flex-direction: column;
     align-items: center;
+    position: relative;
+
+    .ppImg{
+      position: absolute;
+      width: 500px;
+      height: 170px;
+    }
 
     img {
       width: 136px;
@@ -1241,7 +1292,38 @@ onMounted(() => {
     flex-direction: column;
     padding: 10px 0;
     box-sizing: border-box;
+    position: relative;
 
+    .gkTop {
+      position: absolute;
+      top: 4px;
+      left: 170px;
+      animation: example 3s infinite linear;
+    }
+    @keyframes example {
+      0% {
+        transform: translateY(0);
+      }
+      25% {
+        transform: translateY(-3px);
+      }
+      50% {
+        transform: translateY(0);
+      }
+      75% {
+        transform: translateY(3px);
+      }
+      100% {
+        transform: translateY(0);
+      }
+    }
+    .gkMove {
+      position: absolute;
+      top: 4px;
+      left: -2px;
+      width: 98%;
+      height: 96%;
+    }
     span {
       font-weight: 500;
       font-size: 14px;

src/view/yl.vue

@@ -243,12 +243,8 @@
         <div class="serviceBox">
           <div class="serviceTop">
             <div class="visit">
-              <img
-                class="serviceimg"
-                src="@/assets/YLimg/ylimg8.png"
-                alt=""
-              />
-              <ylSMFW></ylSMFW>
+              <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
+              <ylSMFW :list="data.smfwcs"></ylSMFW>
             </div>
             <div class="medicalService">
               <img
@@ -389,6 +385,7 @@ const chooseVillage = (village) => {
 };
 const close = () => {
   dialogShow.value = false;
+  pagination.currentPage = 1;
 };
 const handlePagination = (current) => {
   pagination.currentPage = current;
@@ -433,6 +430,7 @@ const data = reactive({
   yljgzlzx: { yljg: "", zlzx: "" },
   zccs1: [],
   zccs2: [],
+  smfwcs: [],
 });
 onBeforeMount(async () => {
   getData();
@@ -495,6 +493,7 @@ const getData = async () => {
       data.yljgzlzx.yljg = res.data.yljgzlzx.yljg;
       data.yljgzlzx.zlzx = res.data.yljgzlzx.zlzx;
       // 助老服务
+      data.smfwcs = res.data.zlfw.smfwcs;
       // 乡镇助餐次数
       res.data.zlfw.xzzccs.forEach((element) => {
         data.zccs1.push(element.xzjd); // 地点

vite.config.js

@@ -8,7 +8,7 @@ export default defineConfig({
   server: {
     host: "0.0.0.0", //解决vite use--host to expose
     port: 8080,
-    open: true,
+    open: false,
     base: "./ ", //生产环境路径
     // hmr: true,
     proxy: {