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

src/components/header.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="header">
-    <img class="title" src="../assets/img_07.png" alt="" />
+    <!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
     <div class="time">
-      <div id="clock">加载中...</div>
       <div id="date-display"></div>
+      <div id="clock" style="margin-top: 4px;">加载中...</div>
     </div>
 
     <div class="header-menu">
-      <ul class="header-menu-item header-menu-left">
-        <li v-for="item in data.urlLeft.slice(0, 3)" :key="item.name">
-          <span class="header-menu-on" @click="to(item.url)">{{ item.name }}</span>
-        </li>
-      </ul>
-      <ul class="header-menu-item header-menu-right">
-        <li v-for="item in data.urlLeft.slice(3, 6)" :key="item.name">
-          <span class="header-menu-on" @click="to(item.url)">{{ item.name }}</span>
-        </li>
-      </ul>
+      <div class="header-menu-item header-menu-left">
+        <div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 3)"
+          :key="item.name">
+          <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
+        </div>
+      </div>
+      <div class="header-menu-item header-menu-right">
+        <div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(3, 6)"
+          :key="item.name">
+          <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -40,18 +42,18 @@ const updateClock = () => {
   //拼接时间字符串
   const timeString = `${hours}:${minutes}:${seconds}`;
 
-  const formattedDate = year + "-" + month + "-" + day;
+  const formattedDate = year + "/" + month + "/" + day;
 
   // 更新页面上的时钟显示
   document.getElementById("clock").textContent = timeString;
   // 将格式化后的日期更新到 div 中
   document.getElementById("date-display").innerText = formattedDate;
 };
-const to =(url)=>{
+const to = (url) => {
   router.push({
     path: `${url}`,
-
   });
+  data.nowTab = url
 }
 const router = useRouter();
 const routers = useRoute();
@@ -60,49 +62,52 @@ const data = reactive({
   urlLeft: [
     {
       name: "主页",
-      url:'/home/index',
+      url: '/home/index',
     },
     {
       name: "养老",
-      url:'/home/yl',
+      url: '/home/yl',
     },
     {
       name: "卫生",
-      url:'/home/hygiene',
+      url: '/home/hygiene',
     },
     {
       name: "教育",
-      url:'/home/education',
+      url: '/home/education',
     },
     {
       name: "就业救助",
-      url:'/home/work',
+      url: '/home/work',
     },
     {
       name: "智能分析",
-      url:'/home/analyze',
+      url: '/home/analyze',
     },
   ],
-  nowTab: "0",
+  nowTab: "/home/index",
 });
 
 onMounted(() => {
   // 初始调用 updateClock 以立即显示时间
   updateClock();
 
+  data.nowTab = router.currentRoute.value.fullPath
+
   // 每隔一秒钟调用一次 updateClock 以更新时钟显示
   setInterval(updateClock, 1000);
 });
 </script>
 <style lang='scss' scoped>
 .header {
-  //   background-image: url(../assets/header.png);
-  //   background-size: 100% 100%;
+  background-image: url(../assets/headerBg.png);
+  background-size: 100% 100%;
   display: flex;
-  height: 80px;
+  height: 112px;
   width: 100%;
-  background-color: beige;
+  // background-color: beige;
   position: relative;
+
   .title {
     position: absolute;
     left: 50%;
@@ -111,15 +116,19 @@ onMounted(() => {
     width: 146px;
     height: 55px;
   }
+
   .time {
     width: 200px;
-    height: 100%;
+    height: 70%;
     display: flex;
     padding-left: 20px;
     flex-direction: column;
+    color: #fff;
     // align-items: center;
     justify-content: center;
+    font-size: 18px;
   }
+
   &-menu {
     // position: absolute;
     // left:20%;
@@ -147,26 +156,66 @@ onMounted(() => {
     top: 0;
     display: flex;
     cursor: pointer;
+
     &-item {
       height: 80px;
-      width: 600px;
       display: flex;
       position: absolute;
-      justify-content: space-around;
-      li {
-        display: inline-block;
-        margin: 0px;
-        height: 80px;
-        line-height: 80px;
-        text-align: center;
-        font-size: 30px;
-      }
+      align-items: center;
     }
+
     &-left {
-      left: 10%;
+      left: 8%;
     }
+
     &-right {
-      left: 60%;
+      right: 8%;
+    }
+
+    .leftItem {
+      background-image: url(../assets/headLeft.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .leftItemC {
+      background-image: url(../assets/headLeftC.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .rightItem {
+      background-image: url(../assets/headRight.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .rightItemC {
+      background-image: url(../assets/headRightC.png);
+      background-size: 100% 100%;
+      display: flex;
+      height: 62px;
+      width: 160px;
+      margin: 0 -14px;
+    }
+
+    .itemText {
+      width: 150px;
+      height: 62px;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 62px;
+      font-size: 18px;
+      color: #fff;
     }
   }
 }

src/view/echarts/ylJHSY.vue

@@ -0,0 +1,118 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 220px"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+let option = {
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "cross",
+      label: {
+        backgroundColor: "#ff0000", //提示文字标题颜色
+      },
+    },
+  },
+  legend: {
+    data: ["计划生育人数", "计划生育补贴金额"],
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true,
+    color: "#ffffff",
+  },
+  calculable: true,
+  color: "rgba(0, 252, 255, 1)",
+  xAxis: [
+    {
+      //   type: "category",
+      //   scale: true,
+      //   name: "计划生育补贴金额/元",
+      data: ["2019", "2020", "2021", "2022", "2023"],
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      scale: true,
+      name: "计划生育人数",
+      color: "rgba(255, 252, 0, 1)",
+    },
+    {
+      type: "value",
+      scale: true,
+      name: "计划生育补贴金额/元",
+      position: "right",
+      max: 1200,
+      min: 0,
+      boundaryGap: [0.2, 0.2]
+      //   alignTicks: true,
+      //   offset: 80,
+      //   axisLine: {
+      //     show: true,
+      //     lineStyle: {
+      //       color: colors[1]
+      //     }
+      //   },
+      //   axisLabel: {
+      //     formatter: '{value} ml'
+      //   }
+    },
+  ],
+  series: [
+    {
+      name: "计划生育人数",
+      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: "计划生育补贴金额",
+      type: "line", //线状图
+      data: [2.6, 5.9, 9.0, 16.4, 28.7],
+
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ],
+};
+
+// 使用生命钩子
+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();
+  //   });
+});
+</script>
+
+<style scoped></style>

src/view/echarts/ylSMFW.vue

@@ -0,0 +1,118 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 220px"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+let option = {
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "cross",
+      label: {
+        backgroundColor: "#ff0000", //提示文字标题颜色
+      },
+    },
+  },
+  legend: {
+    data: ["上门服务时长", "上门服务次数"],
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true,
+    color: "#ffffff",
+  },
+  calculable: true,
+  color: "rgba(0, 252, 255, 1)",
+  xAxis: [
+    {
+      //   type: "category",
+      //   scale: true,
+      //   name: "上门服务次数",
+      data: ["4-07", "4-08", "4-09", "4-10", "4-11"],
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      scale: true,
+      name: "上门服务时长",
+      color: "rgba(255, 252, 0, 1)",
+    },
+    {
+      type: "value",
+      scale: true,
+      name: "上门服务次数",
+      position: "right",
+      max: 1200,
+      min: 0,
+      boundaryGap: [0.2, 0.2]
+      //   alignTicks: true,
+      //   offset: 80,
+      //   axisLine: {
+      //     show: true,
+      //     lineStyle: {
+      //       color: colors[1]
+      //     }
+      //   },
+      //   axisLabel: {
+      //     formatter: '{value} ml'
+      //   }
+    },
+  ],
+  series: [
+    {
+      name: "上门服务时长",
+      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: "上门服务次数",
+      type: "line", //线状图
+      data: [2.6, 5.9, 9.0, 16.4, 28.7],
+
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ],
+};
+
+// 使用生命钩子
+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();
+  //   });
+});
+</script>
+
+<style scoped></style>

src/view/echarts/ylXZZC.vue

@@ -0,0 +1,125 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 220px"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+let option = {
+  tooltip: {
+    trigger: "axis",
+    
+    axisPointer: {
+      type: "shadow",
+      label: {
+        backgroundColor: "#ff0000", //提示文字标题颜色
+      },
+    },
+  },
+  legend: {
+    data: ["计划生育人数", "计划生育补贴金额"],
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true,
+    color: "#ffffff",
+  },
+  calculable: true,
+  color: "rgba(0, 252, 255, 1)",
+  xAxis: [
+    // {
+    //   //   type: "category",
+    //   //   scale: true,
+    //   //   name: "计划生育补贴金额/元",
+     
+    // },
+    {
+      type: "value",
+      scale: true,
+      name: "计划生育人数",
+      color: "rgba(255, 252, 0, 1)",
+    },
+    {
+      type: "value",
+      scale: true,
+      name: "计划生育补贴金额/元",
+      position: "right",
+      max: 1200,
+      min: 0,
+      boundaryGap: [0.2, 0.2]
+      //   alignTicks: true,
+      //   offset: 80,
+      //   axisLine: {
+      //     show: true,
+      //     lineStyle: {
+      //       color: colors[1]
+      //     }
+      //   },
+      //   axisLabel: {
+      //     formatter: '{value} ml'
+      //   }
+    },
+  ],
+  yAxis: {
+
+    type: 'category',
+    data: ["2019", "2020", "2021", "2022", "2023"],
+     
+  }
+  ,
+  series: [
+    {
+      name: "计划生育人数",
+      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: "rgba(26,255,217,0)" },
+          { offset: 0.5, color: "#00B7FF" },
+          { offset: 1, color: "#00B7FF" },
+        ]), //背景渐变
+        borderRadius: [0, 0, 50, 0],
+      }, 
+    },
+    {
+      name: "计划生育补贴金额",
+      type: "line", //线状图
+      data: [2.6, 5.9, 9.0, 16.4, 28.7],
+
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ],
+};
+
+// 使用生命钩子
+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();
+  //   });
+});
+</script>
+
+<style scoped></style>

src/view/yl.vue

@@ -100,10 +100,10 @@
         <ePie3d></ePie3d>
       </div>
       <div class="flex1">
-        <div class="yd_title">
-          <span class="text">走访日志</span>
+        <div class="yd_title familyPlanning">
+          <!-- <span class="text">计划生育</span> -->
         </div>
-        <div class="visitLog">
+        <!-- <div class="visitLog">
           <div class="visitLog_item">
             <img src="../assets/img_02.png" width="48px" height="51px" alt="" />
             <div class="visitLog_item_box">
@@ -131,28 +131,78 @@
             </div>
             <span class="check">点击查看</span>
           </div>
+        </div> -->
+        <div style="width: 490px; height: 400px">
+          <ylJHSY></ylJHSY>
         </div>
       </div>
     </div>
     <div class="displayFlex">
-      <div class="flex1">
-        <div class="yd_title">
-          <span class="text">养老机构</span>
+      <div class="flex2">
+        <div class="yd_title mechanism">
+          <!-- <span class="text">养老机构</span> -->
         </div>
         <div class="history">
-          <p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
+          <!-- <p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
           <p>1984年获得浙江大学计算机应用专业硕士学位，之后留校任教；</p>
           <p>1990年获得浙江大学计算机应用专业博士学位；</p>
           <p>1994年至1996年担任浙江大学计算机系副系主任；</p>
           <p>1997年至2002年担任浙江大学计算机系系主任；</p>
-          <p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p>
+          <p>2002年至2009年担任浙江大学计算机学院和软件学院院长；</p> -->
+          <div class="history1">
+            <div>
+              <span>16<span class="unit">个</span></span>
+            </div>
+            <img src="@/assets/YLimg/ylimg2.png" alt="" />
+            <img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
+          </div>
+          <div class="history1">
+            <div>
+              <span>239 <span class="unit">个</span> </span>
+            </div>
+            <img src="@/assets/YLimg/ylimg3.png" alt="" />
+            <img class="historyimg" src="@/assets/YLimg/ylimg6.png" alt="" />
+          </div>
+          <div class="history1">
+            <div>
+              <span>139<span class="unit">个</span></span>
+            </div>
+            <img src="@/assets/YLimg/ylimg4.png" alt="" />
+            <img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
+          </div>
         </div>
       </div>
       <div class="flex1">
-        <div class="yd_title">
-          <span class="text">助老服务</span>
+        <div class="yd_title service">
+          <!-- <span class="text">助老服务</span> -->
+        </div>
+        <div class="serviceBox">
+          <div class="serviceTop">
+            <div class="visit">
+              <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
+              <div style="width: 290px">
+                <ylSMFW></ylSMFW>
+              </div>
+            </div>
+            <div class="medicalService">
+              <img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
+              <div class="medicalServiceTop">
+                <img class="ylimg" src="@/assets/YLimg/ylimg1.png" alt="" />
+                <span>18,789</span>
+              </div>
+            </div>
+          </div>
+          <div class="mealAssistance">
+            <img
+              class="mealAssistanceimg"
+              src="@/assets/YLimg/ylimg7.png"
+              alt=""
+            />
+            <div style="width: 490px">
+              <ylXZZC></ylXZZC>
+            </div>
+          </div>
         </div>
-        <eBubble></eBubble>
       </div>
     </div>
   </div>
@@ -167,7 +217,10 @@ import eP3_2 from "./echarts/eP3_2.vue";
 import ePie2 from "./echarts/pie2.vue";
 import eGraph from "./echarts/graph.vue";
 import ePie3d from "./echarts/pie3d.vue";
-import waterBall from "./echarts/waterBall.vue";
+// import waterBall from "./echarts/waterBall.vue";
+import ylJHSY from "./echarts/ylJHSY.vue";
+import ylSMFW from "./echarts/ylSMFW.vue";
+import ylXZZC from "./echarts/ylXZZC.vue";
 import { ref, onMounted, onBeforeMount } from "vue";
 const leftchoose = ref({
   first: "1",
@@ -190,6 +243,11 @@ const change = (name, index) => {
   padding: 0 28px;
   box-sizing: border-box;
 }
+.flex2 {
+  // flex: 1;
+  padding: 0 38px;
+  box-sizing: border-box;
+}
 .module {
   display: flex;
 }
@@ -214,6 +272,65 @@ const change = (name, index) => {
     top: 3px;
   }
 }
+.familyPlanning {
+  background-image: url(@/assets/YLTitle/titleImg9.png);
+}
+.mechanism {
+  background-image: url(@/assets/YLTitle/titleImg10.png);
+}
+.service {
+  background-image: url(@/assets/YLTitle/titleImg11.png);
+}
+.serviceBox {
+  display: flex;
+  flex-direction: column;
+
+  .serviceimg {
+    width: 182px;
+    height: 35px;
+  }
+  .serviceTop {
+    display: flex;
+    justify-content: space-between;
+    .medicalService {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .ylimg {
+        width: 205px;
+        height: 239px;
+      }
+
+      .medicalServiceTop {
+        position: relative;
+        span {
+          position: absolute;
+          left: 38px;
+          top: 35%;
+          font-weight: bold;
+          font-size: 36px;
+          color: #ffffff;
+          line-height: 41px;
+          letter-spacing: 1px;
+          text-align: center;
+          font-style: normal;
+          font-family: DINAlternate, DINAlternate;
+        }
+      }
+    }
+  }
+  .mealAssistance {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .mealAssistanceimg {
+      width: 495px;
+      height: 35px;
+    }
+  }
+}
+
 .left_1 {
   background-image: url(@/assets/images/ylbx.png);
   background-repeat: no-repeat;
@@ -322,6 +439,37 @@ const change = (name, index) => {
 
 .history {
   padding-top: 12px;
+  display: flex;
+  .history1 {
+    font-size: 26px;
+    color: #ffffff;
+    line-height: 30px;
+    letter-spacing: 1px;
+    text-align: center;
+    font-style: normal;
+    font-family: PangMenZhengDao;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .unit {
+      font-weight: 500;
+      font-size: 14px;
+      color: #9cdeff;
+      line-height: 20px;
+      text-align: left;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+    }
+    .historyimg {
+      width: 182px;
+      height: 35px;
+    }
+  }
+  img {
+    width: 154px;
+    height: 136px;
+  }
   p {
     margin-top: 12px;
     font-size: 12px;