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

src/view/echarts/ylJHSY.vue

@@ -9,33 +9,80 @@ import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
-let option = {
+const data = [120, 200, 150, 80, 70, 110, 130];
+const lineData = [150, 230, 224, 218, 135, 147, 260];
+const max = data
+  .concat(lineData)
+  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+// 背景颜色
+const color = [
+  {
+    type: "linear",
+    x: 0,
+    x2: 0,
+    y: 0,
+    y2: 1,
+    colorStops: [
+      {
+        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}",
     axisPointer: {
       type: "cross",
       label: {
-        backgroundColor: "#ff0000", //提示文字标题颜色
+        backgroundColor: "#3F82F7", //提示文字标题颜色
       },
     },
   },
   legend: {
     data: ["计划生育人数", "计划生育补贴金额"],
+    top: "8%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
   },
   grid: {
     left: "3%",
-    right: "4%",
+    right: "6%",
-    bottom: "3%",
+    bottom: "0%",
     containLabel: true,
     color: "#ffffff",
   },
   calculable: true,
-  color: "rgba(0, 252, 255, 1)",
+  //   color: "rgba(0, 252, 255, 1)",
+  color,
   xAxis: [
     {
-      //   type: "category",
+      type: "category",
-      //   scale: true,
       //   name: "计划生育补贴金额/元",
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+
+      data: ["2019", "2020", "2021", "2022", "2023"],
+    },
+    {
+      type: "category",
+      show: false,
       data: ["2019", "2020", "2021", "2022", "2023"],
     },
   ],
@@ -44,55 +91,86 @@ let option = {
       type: "value",
       scale: true,
       name: "计划生育人数",
-      color: "rgba(255, 252, 0, 1)",
+      max: max,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
     },
     {
       type: "value",
       scale: true,
       name: "计划生育补贴金额/元",
-      position: "right",
-      max: 1200,
       min: 0,
-      boundaryGap: [0.2, 0.2]
+      max: max,
-      //   alignTicks: true,
+      splitLine: {
-      //   offset: 80,
+        show: false,
-      //   axisLine: {
+        lineStyle: {
-      //     show: true,
+          color: "rgba(226, 226, 226, 0.3)",
-      //     lineStyle: {
+          width: 1,
-      //       color: colors[1]
+        },
-      //     }
+      },
-      //   },
+      axisLabel: {
-      //   axisLabel: {
+        //坐标轴刻度标签的相关设置
-      //     formatter: '{value} ml'
+        textStyle: {
-      //   }
+          color: "#ccc",
+        },
+      },
+      //   max: 300,
+      //   position: "right",
+      //   boundaryGap: [0.2, 0.2]
     },
   ],
   series: [
     {
       name: "计划生育人数",
+      data: data,
+      barWidth: 20,
       type: "bar",
-      data: [2.0, 4.9, 7.0, 23.2, 25.6],
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "#83bff6" },
-          { offset: 0.5, color: "#188df0" },
-          { offset: 1, color: "#188df0" },
-        ]),
-      }, //背景渐变
     },
     {
       name: "计划生育补贴金额",
+      data: lineData,
       type: "line", //线状图
-      data: [2.6, 5.9, 9.0, 16.4, 28.7],
+    },
-
+    {
-      showBackground: true,
+      xAxisIndex: 1,
-      backgroundStyle: {
+      itemStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
+        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
       },
+      data: data.map(() => max),
+      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",
     },
   ],
 };

src/view/echarts/ylSMFW.vue

@@ -9,34 +9,81 @@ import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
-let option = {
+const data = [120, 200, 150, 80, 70, 110, 130];
+const lineData = [150, 230, 224, 218, 135, 147, 260];
+const max = data
+  .concat(lineData)
+  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+// 背景颜色
+const color = [
+  {
+    type: "linear",
+    x: 0,
+    x2: 0,
+    y: 0,
+    y2: 1,
+    colorStops: [
+      {
+        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}",
     axisPointer: {
       type: "cross",
       label: {
-        backgroundColor: "#ff0000", //提示文字标题颜色
+        backgroundColor: "#3F82F7", //提示文字标题颜色
       },
     },
   },
   legend: {
     data: ["上门服务时长", "上门服务次数"],
+    top: "8%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
   },
   grid: {
     left: "3%",
-    right: "4%",
+    right: "6%",
-    bottom: "3%",
+    bottom: "0%",
     containLabel: true,
     color: "#ffffff",
   },
   calculable: true,
-  color: "rgba(0, 252, 255, 1)",
+  //   color: "rgba(0, 252, 255, 1)",
+  color,
   xAxis: [
     {
-      //   type: "category",
+      type: "category",
-      //   scale: true,
+      //   name: "上门服务次数/元",
-      //   name: "上门服务次数",
+      axisLabel: {
-      data: ["4-07", "4-08", "4-09", "4-10", "4-11"],
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
+
+      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: [
@@ -44,55 +91,86 @@ let option = {
       type: "value",
       scale: true,
       name: "上门服务时长",
-      color: "rgba(255, 252, 0, 1)",
+      max: max,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ccc",
+        },
+      },
     },
     {
       type: "value",
       scale: true,
       name: "上门服务次数",
-      position: "right",
-      max: 1200,
       min: 0,
-      boundaryGap: [0.2, 0.2]
+      max: max,
-      //   alignTicks: true,
+      splitLine: {
-      //   offset: 80,
+        show: false,
-      //   axisLine: {
+        lineStyle: {
-      //     show: true,
+          color: "rgba(226, 226, 226, 0.3)",
-      //     lineStyle: {
+          width: 1,
-      //       color: colors[1]
+        },
-      //     }
+      },
-      //   },
+      axisLabel: {
-      //   axisLabel: {
+        //坐标轴刻度标签的相关设置
-      //     formatter: '{value} ml'
+        textStyle: {
-      //   }
+          color: "#ccc",
+        },
+      },
+      //   max: 300,
+      //   position: "right",
+      //   boundaryGap: [0.2, 0.2]
     },
   ],
   series: [
     {
       name: "上门服务时长",
+      data: data,
+      barWidth: 20,
       type: "bar",
-      data: [2.0, 4.9, 7.0, 23.2, 25.6],
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: "#83bff6" },
-          { offset: 0.5, color: "#188df0" },
-          { offset: 1, color: "#188df0" },
-        ]),
-      }, //背景渐变
     },
     {
       name: "上门服务次数",
+      data: lineData,
       type: "line", //线状图
-      data: [2.6, 5.9, 9.0, 16.4, 28.7],
+    },
-
+    {
-      showBackground: true,
+      xAxisIndex: 1,
-      backgroundStyle: {
+      itemStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
+        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
       },
+      data: data.map(() => max),
+      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",
     },
   ],
 };

src/view/echarts/ylXZZC.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 220px"></div>
+  <div ref="chart" style="width: 100%; height: 150px"></div>
 </template>
 
 <script setup>
@@ -7,98 +7,103 @@ import { onMounted, reactive, ref } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
-const chart = ref(); // 创建DOM引用
+const chart = ref(null); // 创建DOM引用
+
+const data = [
+  "大街乡",
+  "社阳乡",
+  "沐尘畲族乡",
+  "庙下乡",
+  "溪口镇",
+  "罗家乡",
+  "罗家乡",
+  "罗家乡",
+  "罗家乡",
+  "罗家乡",
+  "罗家乡",
+];
+let zoomShow = false;
+if (data.length > 7) {
+  zoomShow = true;
+} else {
+  zoomShow = false;
+}
 
 let option = {
   tooltip: {
     trigger: "axis",
-    
     axisPointer: {
       type: "shadow",
-      label: {
-        backgroundColor: "#ff0000", //提示文字标题颜色
-      },
     },
   },
-  legend: {
+  legend: {},
-    data: ["计划生育人数", "计划生育补贴金额"],
-  },
   grid: {
+    top: "-2%",
     left: "3%",
     right: "4%",
     bottom: "3%",
     containLabel: true,
     color: "#ffffff",
   },
-  calculable: true,
+  dataZoom: [
-  color: "rgba(0, 252, 255, 1)",
-  xAxis: [
-    // {
-    //   //   type: "category",
-    //   //   scale: true,
-    //   //   name: "计划生育补贴金额/元",
-     
-    // },
     {
-      type: "value",
+      show: zoomShow,
-      scale: true,
+      type: "inside",
-      name: "计划生育人数",
+      startValue: 0,
-      color: "rgba(255, 252, 0, 1)",
+      endValue: 2,
+      minValueSpan: 2,
+      maxValueSpan: 2,
+      yAxisIndex: [0],
+      zoomOnMouseWheel: false, // 关闭滚轮缩放
+      moveOnMouseWheel: true, // 开启滚轮平移
+      moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
     },
     {
-      type: "value",
+      show: zoomShow,
-      scale: true,
+      type: "slider",
-      name: "计划生育补贴金额/元",
+      realtime: true,
-      position: "right",
+      startValue: 0,
-      max: 1200,
+      endValue: 2,
-      min: 0,
+      width: "3.5",
-      boundaryGap: [0.2, 0.2]
+      height: "80%",
-      //   alignTicks: true,
+      yAxisIndex: [0], // 控制y轴滚动
-      //   offset: 80,
+      fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
-      //   axisLine: {
+      borderColor: "rgba(17, 100, 210, 0.12)",
-      //     show: true,
+      backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
-      //     lineStyle: {
+      handleSize: 0, // 两边手柄尺寸
-      //       color: colors[1]
+      showDataShadow: false, //是否显示数据阴影 默认auto
-      //     }
+      showDetail: false, // 拖拽时是否展示滚动条两侧的文字
-      //   },
+      top: "1%",
-      //   axisLabel: {
+      right: "5",
-      //     formatter: '{value} ml'
-      //   }
     },
   ],
+  calculable: true,
+  color: "rgba(0, 252, 255, 1)",
+  xAxis: {},
   yAxis: {
-
+    type: "category",
-    type: 'category',
+    data: data,
-    data: ["2019", "2020", "2021", "2022", "2023"],
+  },
-     
-  }
-  ,
   series: [
     {
-      name: "计划生育人数",
       type: "bar",
-      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      data: [2, 4, 7, 23, 25, 250],
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
       itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        normal: {
-          { offset: 0, color: "rgba(26,255,217,0)" },
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0.5, color: "#00B7FF" },
+            {
-          { offset: 1, color: "#00B7FF" },
+              offset: 0,
-        ]), //背景渐变
+              color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
-        borderRadius: [0, 0, 50, 0],
+            },
-      }, 
+            {
-    },
+              offset: 0.98,
-    {
+              color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
-      name: "计划生育补贴金额",
+            },
-      type: "line", //线状图
+          ]), //背景渐变
-      data: [2.6, 5.9, 9.0, 16.4, 28.7],
+          // borderColor: "#00B7FF", //边框
-
+          // borderWidth: 5,
-      showBackground: true,
+          borderRadius: [0, 0, 50, 0], //圆角边框
-      backgroundStyle: {
+        },
-        color: "rgba(180, 180, 180, 0.2)",
       },
     },
   ],

src/view/yl.vue

@@ -109,52 +109,17 @@
         <div class="yd_title familyPlanning">
           <!-- <span class="text">计划生育</span> -->
         </div>
-        <!-- <div class="visitLog">
+        <div style="width: 100%; height: 280px">
-          <div class="visitLog_item">
-            <img src="../assets/img_02.png" width="48px" height="51px" alt="" />
-            <div class="visitLog_item_box">
-              <h4>故居走访</h4>
-              <p>走访人员：陈思思</p>
-              <p>走访时间：2023-03-19 09:00:03</p>
-            </div>
-            <span class="check">点击查看</span>
-          </div>
-          <div class="visitLog_item">
-            <img src="../assets/img_02.png" width="48px" height="51px" alt="" />
-            <div class="visitLog_item_box">
-              <h4>节日走访</h4>
-              <p>走访人员：陈思思</p>
-              <p>走访时间：2023-03-19 09:00:03</p>
-            </div>
-            <span class="check">点击查看</span>
-          </div>
-          <div class="visitLog_item">
-            <img src="../assets/img_02.png" width="48px" height="51px" alt="" />
-            <div class="visitLog_item_box">
-              <h4>新年走访</h4>
-              <p>走访人员：陈思思</p>
-              <p>走访时间：2023-03-19 09:00:03</p>
-            </div>
-            <span class="check">点击查看</span>
-          </div>
-        </div> -->
-        <div style="width: 490px; height: 400px">
           <ylJHSY></ylJHSY>
         </div>
       </div>
     </div>
-    <div class="displayFlex">
+    <div class="displayFlex center_bg">
       <div class="flex2">
         <div class="yd_title mechanism">
           <!-- <span class="text">养老机构</span> -->
         </div>
         <div class="history">
-          <!-- <p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
-          <p>1984年获得浙江大学计算机应用专业硕士学位，之后留校任教；</p>
-          <p>1990年获得浙江大学计算机应用专业博士学位；</p>
-          <p>1994年至1996年担任浙江大学计算机系副系主任；</p>
-          <p>1997年至2002年担任浙江大学计算机系系主任；</p>
-          <p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p> -->
           <div class="history1">
             <div>
               <span>16<span class="unit">个</span></span>
@@ -186,7 +151,7 @@
           <div class="serviceTop">
             <div class="visit">
               <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
-              <div style="width: 290px">
+              <div style="width: 340px;height: 220px">
                 <ylSMFW></ylSMFW>
               </div>
             </div>
@@ -199,8 +164,12 @@
             </div>
           </div>
           <div class="mealAssistance">
-            <img class="mealAssistanceimg" src="@/assets/YLimg/ylimg7.png" alt="" />
+            <img
-            <div style="width: 490px">
+              class="mealAssistanceimg"
+              src="@/assets/YLimg/ylimg7.png"
+              alt=""
+            />
+            <div style="width: 490px;height: 150px">
               <ylXZZC></ylXZZC>
             </div>
           </div>
@@ -241,7 +210,8 @@ const change = (name, index) => {
   height: 90vh;
   display: flex;
   flex-direction: column;
-  flex: 1;
+  // flex: 1;
+  width: 33.333333333%;
 }
 
 .flex1 {
@@ -284,19 +254,26 @@ const change = (name, index) => {
 
 .familyPlanning {
   background-image: url(@/assets/YLTitle/titleImg9.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 
 .mechanism {
   background-image: url(@/assets/YLTitle/titleImg10.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 
 .service {
   background-image: url(@/assets/YLTitle/titleImg11.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 
 .serviceBox {
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
 
   .serviceimg {
     width: 182px;
@@ -306,15 +283,21 @@ const change = (name, index) => {
   .serviceTop {
     display: flex;
     justify-content: space-between;
-
+    padding: 10px 36px  0px 20px ;
+    box-sizing: border-box;
+    .visit {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
     .medicalService {
       display: flex;
       flex-direction: column;
       align-items: center;
 
       .ylimg {
-        width: 205px;
+        width: 200px;
-        height: 239px;
+        height: 220px;
       }
 
       .medicalServiceTop {
@@ -322,10 +305,10 @@ const change = (name, index) => {
 
         span {
           position: absolute;
-          left: 38px;
+          left: 39px;
           top: 35%;
           font-weight: bold;
-          font-size: 36px;
+          font-size: 32px;
           color: #ffffff;
           line-height: 41px;
           letter-spacing: 1px;
@@ -491,7 +474,7 @@ const change = (name, index) => {
 .history {
   padding-top: 12px;
   display: flex;
-
+  justify-content: space-around;
   .history1 {
     font-size: 26px;
     color: #ffffff;