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

src/view/echarts_hygiene/eP5.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="chart"
-    style="width: 100%;height: 450px"
+    style="width: 100%;height: 400px"
   ></div>
 </template>
 
@@ -106,10 +106,23 @@ let option = {
     {
       name: "职工医疗保险发放人次",
       type: "bar",
-      data: [2.0, 4.9, 7.0, 23.2, 25.6],
+      data: [2.0, 4.9, 7.0, 23.2, 25.6,100,50],
       barWidth: 20,
       itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        normal: {
+          color: function (params) {
+            let colorList = [
+              ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
+              ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
+              ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
+            ];
+            if (params.dataIndex == 0) {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
                   {
                     offset: 0,
                     color: "rgba(23, 237, 255, 1)",
@@ -118,7 +131,66 @@ let option = {
                     offset: 1,
                     color: "rgba(23, 237, 255, 0.20)",
                   },
-        ]),
+                ],
+                false
+              );
+            } else if (params.dataIndex % 3 == 0) {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(23, 237, 255, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(23, 237, 255, 0.20)",
+                  },
+                ],
+                false
+              );
+            } else if (params.dataIndex % 2 == 0) {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(255, 243, 119, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(255, 242, 142, 0.20)",
+                  },
+                ],
+                false
+              );
+            } else {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1, //y->y2
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(142, 187, 255, 1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(142, 187, 255, 0.20)",
+                  },
+                ],
+                false
+              );
+            }
+          },
+        },
       },
     },
   ],

src/view/echarts_hygiene/eP7.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div ref="chart" style="width: 100%; height: 330px"></div>
-    ref="chart"
-    style="width: 100%;height: 330px"
-  ></div>
 </template>
 
 <script setup >
@@ -11,26 +8,18 @@ import { onMounted, reactive, ref } from "vue";
 import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
-const data1 = [
+const data1 = ["2019", "2020", "2021", "2022", "2023"];
-  "龙游县人民医院",
-  "龙游县中医院",
-  "龙游县横山镇中心卫生院",
-  "龙游县溪水镇中心卫生院",
-  "龙游县龙游街道社区卫生服务中心",
-  "龙游县塔石镇中心卫生院",
-  "龙游县罗家县中心卫生院",
-];
 let option = {
   tooltip: {
     trigger: "axis",
-    // formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
+    formatter: "{b0}<br />{a0}:{c0} ",
   },
 
   grid: {
-    top: "10%",
+    top: "15%",
-    left: "1%",
+    left: "5%",
     right: "10%",
-    bottom: "0%",
+    bottom: "10%",
     containLabel: true,
   },
   calculable: true,
@@ -38,43 +27,27 @@ let option = {
     {
       type: "category",
       axisLabel: {
-        formatter: function (params) {
+        //坐标轴刻度标签的相关设置
-          var str = ""; // 最终拼接成的字符串
-          var paramsLen = params.length; // 获取每项文字的个数
-          var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
-          var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
-          if (paramsLen > len) {
-            //大于设定的len就换行，不大于就不变化
-            for (var i = 0; i < rowNumber; i++) {
-              var temp = ""; // 表示每一次截取的字符串
-              var start = i * len; // 开始截取的位置
-              var end = start + len; // 结束截取的位置
-              if (i == rowNumber - 1) {
-                // 最后一次不换行
-                temp = params.substring(start, paramsLen);
-              } else {
-                // 每一次拼接字符串并换行
-                temp = params.substring(start, end) + "\n";
-              }
-              str += temp; // 最终拼成的字符串
-            }
-          } else {
-            // 给新的字符串赋值
-            str = params;
-          }
-          return str; //返回字符串
-        },
         textStyle: {
           color: "#ffffff",
         },
-        rotate: 30,
       },
+
       data: data1,
     },
+    {
+      axisTick: false,
+      type: "category",
+      data: data1,
+      axisLabel: {
+        show: false,
+      },
+    },
   ],
 
   yAxis: [
     {
+      name: "历年体检人数",
       type: "value",
       splitLine: {
         show: true,
@@ -86,26 +59,54 @@ let option = {
       axisLabel: {
         //坐标轴刻度标签的相关设置
         textStyle: {
-          color: "#ccc",
+          color: "#ffffff",
+        },
+      },
+            axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
         },
       },
     },
-
+     {
+      type: "value",
+      min: 0,
+      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: [
     {
-      name: "职工医疗保险发放人次",
+      name: "体检人数",
       type: "bar",
-      data: [2.0, 4.9, 7.0, 23.2, 25.6,9,9],
+      data: [120, 49, 70, 23.2, 25.6],
       barWidth: 20,
       itemStyle: {
         normal: {
           color: function (params) {
-            let colorList = [
-              ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
-              ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
-              ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
-            ];
             if (params.dataIndex == 0) {
               return new echarts.graphic.LinearGradient(
                 0,
@@ -182,6 +183,16 @@ let option = {
           },
         },
       },
+    },
+       {
+      type: "bar",
+      xAxisIndex: 1,
+      yAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(221, 242, 255, 0.1)",
+      },
+      data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
+      barWidth: 50,
     },
   ],
 };

src/view/echarts_hygiene/gxy.vue

@@ -0,0 +1,133 @@
+<template>
+  <div ref="chart" style="width: 100%;height:210px;"></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",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} ",
+  },
+  grid: {
+    top:'5%',
+    left: "1%",
+    right: "10%",
+    bottom: "3%",
+    containLabel: true,
+  },
+
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: ["1月", "2月", "3月", "4月", "5月"],
+    // splitArea: {
+    //   show: true,
+    //   interval: '10',
+    //   areaStyle: {
+    //     color: ["rgba(255, 255, 255, 0.10)"],
+    //     width:10,
+    //   },
+    // },
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(226, 226, 226, 0.3)",
+        width: 1,
+      },
+    },
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  series: [
+    {
+      name: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+    {
+      name: "高血压人数",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
+
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#00FCFF",
+      },   areaStyle: {
+        color: "#F4F65B",
+        normal: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                // color: 'RGBA(184, 204, 241, 1)'
+                color: 'rgba(0, 252, 255, 0.50)',
+              },
+              {
+                offset: 1,
+                color: "rgba(0, 252, 255, 0)",
+              },
+            ],
+            false
+          ),
+          shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+      },
+
+      data: [120, 182, 191, 234, 200],
+    },
+  
+  ],
+};
+
+// 使用生命钩子
+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_hygiene/pie.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height:230px;"></div>
+  <div ref="chart" style="width: 100%; height:250px;"></div>
 </template>
 
 <script setup >
@@ -15,7 +15,7 @@ let option = {
     formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
   },
   legend: {
-    top: "3%",
+    top: "6%",
     right: "11%",
     textStyle: {
       fontSize: 12,

src/view/echarts_hygiene/pie2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height:230px;"></div>
+  <div ref="chart" style="width: 100%; height:250px;"></div>
 </template>
 
 <script setup >
@@ -17,7 +17,7 @@ let option = {
   },
   legend: {
     data: ["职工医疗保险金额", "城乡医疗保险金额"],
-    top: "3%",
+    top: "6%",
     right: "11%",
     textStyle: {
       fontSize: 12,

src/view/echarts_hygiene/tnb.vue

@@ -0,0 +1,133 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 210px"></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",
+    padding: [20, 10, 20, 10],
+    formatter: "{b0}<br />{a1}:{c1} ",
+  },
+  grid: {
+    top: "5%",
+    left: "1%",
+    right: "10%",
+    bottom: "3%",
+    containLabel: true,
+  },
+
+  xAxis: {
+    type: "category",
+    // boundaryGap: false,
+    data: ["1月", "2月", "3月", "4月", "5月"],
+    // splitArea: {
+    //   show: true,
+    //   interval: '10',
+    //   areaStyle: {
+    //     color: ["rgba(255, 255, 255, 0.10)"],
+    //     width:10,
+    //   },
+    // },
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(226, 226, 226, 0.3)",
+        width: 1,
+      },
+    },
+    axisLabel: {
+      //坐标轴刻度标签的相关设置
+      textStyle: {
+        color: "#ccc",
+      },
+    },
+  },
+  series: [
+    {
+      name: "背景",
+      type: "bar",
+      data: [0, 0, 0, 0, 0],
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+    {
+      name: "糖尿病人数",
+      type: "line",
+      stack: "Total",
+      symbol: "emptyCircle",
+
+      symbolSize: 10,
+      itemStyle: {
+        borderColor: "#E8FF00",
+        borderWidth: 1,
+        color: "#E8FF00",
+      },
+
+      areaStyle: {
+        color: "#F4F65B",
+        normal: {
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                // color: 'RGBA(184, 204, 241, 1)'
+                color: 'rgba(255, 234, 90, 0.50)',
+              },
+              {
+                offset: 1,
+                color: "rgba(255, 234, 90, 0)",
+              },
+            ],
+            false
+          ),
+          shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+      },
+      data: [120, 182, 191, 234, 200],
+    },
+  ],
+};
+
+// 使用生命钩子
+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_work/eP2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 330px"></div>
+  <div ref="chart" style="width: 100%; height: 340px"></div>
 </template>
 
 <script setup>
@@ -9,11 +9,13 @@ import * as echarts from "echarts";
 
 const chart = ref(); // 创建DOM引用
 
-const data = [120, 200, 50, 80, 70];
+const data = [1200, 2000, 500, 800, 700];
 const lineData = [150, 230, 24, 218, 135];
 const max = data
   .concat(lineData)
   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+const maxRs = data.reduce((pre, cur) => (pre > cur ? pre : cur), 0);
+const maxJe = lineData.reduce((pre, cur) => (pre > cur ? pre : cur), 0);
 // 背景颜色
 const color = [
   {
@@ -92,7 +94,7 @@ const option = {
       type: "value",
       scale: true,
       name: "救助人数",
-      max: max,
+      max: maxRs+50,
       splitLine: {
         //分割线配置
         show: false,
@@ -121,7 +123,7 @@ const option = {
       type: "value",
       scale: true,
       min: 0,
-      max: max,
+      max: maxJe+50,
       name: "救助金额/万",
       splitLine: {
         show: false,
@@ -149,6 +151,7 @@ const option = {
   ],
   series: [
     {
+      yAxisIndex: 1,
       name: "救助金额",
       data: lineData,
       type: "line", //线状图
@@ -184,7 +187,7 @@ const option = {
       itemStyle: {
         color: "rgba(180, 180, 180, 0.2)", //外阴影背景
       },
-      data: data.map(() => max),
+      data: data.map(() => max+50),
       barWidth: 40, //外阴影背景宽
       emphasis: {
         itemStyle: {

src/view/echarts_work/eP3.vue

@@ -12,11 +12,17 @@ const chart = ref(); // 创建DOM引用
 const data = [120, 200, 50, 80, 70];
 const data2 = [12, 20, 5, 8, 7];
 const data3 = [20, 100, 40, 80, 70];
-const lineData = [150, 230, 24, 218, 135];
+const lineData = [1500, 2300, 240, 2180, 1350];
-const lineData2 = [100, 200, 40, 180, 300];
+const lineData2 = [1000, 2000, 400, 1800, 2333];
 const max = data
-  .concat(lineData,lineData2)
+  .concat(lineData, lineData2, data2, data3)
   .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+const maxRs = data
+  .concat(data2, data3)
+  .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
+const maxJe = lineData
+  .concat(lineData2)
+  .reduce((pre, cur) => (pre > cur ? pre : cur), 0);
 // 背景颜色
 const color = [
   {
@@ -38,62 +44,6 @@ const option = {
       },
     },
   },
-  //   legend: [
-  //     {
-  //       orient: "horizontal",
-  //       icon: "circle",
-  //       align: "left",
-  //       bottom: "0",
-  //       itemWidth: 8,
-  //       itemHeight: 8,
-  //       y: "20",
-  //       x: "center",
-  //       data: ["特困救助金额", "低保救助金额"],
-  //       formatter: (name) => {
-  //         return `{b|${name}} `;
-  //       },
-  //       textStyle: {
-  //         color: "#999999",
-  //         fontSize: 12,
-  //         align: "left",
-  //         // 文字块背景色，一定要加上，否则对齐不会生效
-  //         backgroundColor: "transparent",
-  //         rich: {
-  //           b: {
-  //             width: 200,
-  //           },
-  //         },
-  //       },
-  //     },
-  //     {
-  //       orient: "horizontal",
-  //       icon: "circle",
-  //       align: "left",
-  //       bottom: "0",
-  //       itemWidth: 8,
-  //       itemHeight: 8,
-  //       y: "40",
-  //       x: "center",
-  //       data: ["特困救助人次", "低保救助人次", "低边救助人次/感觉良好"],
-  //       formatter: (name) => {
-  //         return `{a|${name}} `;
-  //       },
-
-  //       textStyle: {
-  //         color: "#999999",
-  //         fontSize: 12,
-  //         align: "left",
-  //         // 文字块背景色，一定要加上，否则对齐不会生效
-  //         backgroundColor: "transparent",
-  //         rich: {
-  //           a: {
-  //             width: 200,
-  //           },
-  //         },
-  //       },
-  //     },
-  //   ],
-
   legend: [
     {
       data: ["特困救助金额", "低保救助金额"],
@@ -149,7 +99,7 @@ const option = {
       type: "value",
       scale: true,
       name: "救助人数",
-      max: max,
+      max: maxRs+50,
       splitLine: {
         //分割线配置
         show: false,
@@ -178,7 +128,7 @@ const option = {
       type: "value",
       scale: true,
       min: 0,
-      max: max,
+      max: maxJe+50,
       name: "救助金额/万",
       splitLine: {
         show: false,
@@ -206,6 +156,7 @@ const option = {
   ],
   series: [
     {
+      yAxisIndex: 1,
       name: "特困救助金额",
       data: lineData,
       type: "line", //线状图
@@ -216,6 +167,7 @@ const option = {
       },
     },
     {
+      yAxisIndex: 1,
       name: "低保救助金额",
       data: lineData2,
       type: "line", //线状图

src/view/hygiene.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="module">
     <div class="displayFlex left_bg">
-      <div class="flex1" style="flex: 0.8">
+      <div class="flex1" style="flex: 0.5">
         <div class="yd_title left_1">
           <span class="text">
             <img
@@ -33,37 +33,61 @@
         <ePie v-if="leftchoose.first == '1'"></ePie>
         <ePie2 v-else></ePie2>
       </div>
-      <div class="flex1" style="margin-top: 10px">
+
-        <div class="yd_title left_2"></div>
-        <eP2></eP2>
-      </div>
       <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_3"></div>
-        <eP3></eP3>
+        <div class="sm_title_1"></div>
+        <tnb></tnb>
+        <div class="sm_title_2"></div>
+        <gxy></gxy>
       </div>
     </div>
     <div class="displayFlex center_bg">
-      <div class="flex1" style="flex: 0.8">
+      <div class="flex1">
+        <div class="yd_title center_2"></div>
+        <div class="center_top">
+          <div class="item">
+            <img src="@/assets/images/hygiene/mjzrc.png" class="left" />
+            <div class="right">
+              <div class="right_top">门急诊人次</div>
+              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
+              <div class="right_bottom">867.371</div>
+            </div>
+          </div>
+          <div class="item">
+            <img src="@/assets/images/hygiene/zyrs.png" class="left" />
+            <div class="right">
+              <div class="right_top">住院人数</div>
+              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
+              <div class="right_bottom">6.723</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex1" style="flex: 0.3">
         <div class="yd_title center_1"></div>
+        <div class="minTop">
           <div class="minTopPart">
-          <div class="mtpImg1"></div>
+            <div class="history2">
-          <div class="mtpImg2">建档份数</div>
+              <div class="va">33.67万</div>
-          <div class="mtpText2">33.67万</div>
+              <img src="@/assets/images/hygiene/shang_left.png" alt="" />
+              <div class="historyimg">建档份数</div>
+            </div>
           </div>
           <div class="minTopPart2">
             <div class="left">
               <div class="leftImg"><eP4></eP4></div>
-
               <div class="left_me">
                 <div>建档率</div>
-              <div>92.96%</div>
+                <div style="margin-top: 5px">92.96%</div>
               </div>
             </div>
             <div class="right">
               <div class="rightImg"></div>
               <div class="right_me">
                 <div>家庭医生</div>
-              <div>2000</div>
+                <div style="margin-top: 5px">2000</div>
+              </div>
             </div>
           </div>
         </div>
@@ -79,7 +103,18 @@
     <div class="displayFlex right_bg">
       <div class="flex1" style="flex: 0.9">
         <div class="yd_title mechanism"></div>
-        <eP6></eP6>
+        <div class="history">
+          <div class="history1">
+            <div class="va">2048</div>
+            <img src="@/assets/images/hygiene/yf.png" alt="" />
+            <div class="historyimg">孕产妇系统管理人数</div>
+          </div>
+          <div class="history1">
+            <div class="va">21810</div>
+            <img src="@/assets/images/hygiene/et.png" alt="" />
+            <div class="historyimg">0-6岁儿童系统管理人数</div>
+          </div>
+        </div>
       </div>
       <div class="flex1" style="flex: 1.1">
         <div class="yd_title service"></div>
@@ -106,6 +141,8 @@ import eP7 from "./echarts_hygiene/eP7.vue";
 import eP6 from "./echarts_hygiene/eP6.vue";
 import eP5 from "./echarts_hygiene/eP5.vue";
 import eP4 from "./echarts_hygiene/eP4.vue";
+import tnb from "./echarts_hygiene/tnb.vue";
+import gxy from "./echarts_hygiene/gxy.vue";
 import { ref, onMounted, onBeforeMount } from "vue";
 const leftchoose = ref({
   first: "1",
@@ -178,7 +215,7 @@ const change = (name, index) => {
 }
 
 .mechanism {
-  background-image: url(@/assets/images/hygiene/right_title_1.png);
+  background-image: url(@/assets/images/hygiene/xtgl.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
@@ -268,7 +305,7 @@ const change = (name, index) => {
 }
 
 .left_3 {
-  background-image: url(@/assets/images/hygiene/left_title_3.png);
+  background-image: url(@/assets/images/hygiene/right_title_1.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
@@ -278,7 +315,52 @@ const change = (name, index) => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
-
+.center_2 {
+  background-image: url(@/assets/images/hygiene/new_center.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.center_top {
+  width: 95%;
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .item {
+    display: flex;
+    align-items: center;
+    .left {
+      width: 102px;
+      height: 102px;
+    }
+    .right {
+      margin-left: 10px;
+      .right_top {
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 22px;
+        letter-spacing: 2px;
+      }
+      .right_center {
+        width: 100px;
+        height: 7px;
+      }
+      .right_bottom {
+        margin-top: 3px;
+        padding: 5px;
+        font-size: 22px;
+        color: #2ef1ff;
+        line-height: 26px;
+        text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5);
+        background: linear-gradient(
+          270deg,
+          rgba(255, 255, 255, 0) 0%,
+          #3976a1 100%
+        );
+      }
+    }
+  }
+}
 .left_bg {
   width: 642px;
   // height: 100%;
@@ -403,9 +485,10 @@ const change = (name, index) => {
 }
 
 .history {
-  padding-top: 12px;
+  height: 240px;
   display: flex;
   justify-content: space-around;
+  box-sizing: border-box;
   .history1 {
     font-size: 26px;
     color: #ffffff;
@@ -418,23 +501,36 @@ const change = (name, index) => {
     display: flex;
     flex-direction: column;
     align-items: center;
+    .va {
+      margin-top: 27px;
+      margin-bottom: 10px;
+      font-family: DINAlternate, DINAlternate;
 
-    .unit {
+      font-size: 26px;
-      font-weight: 500;
+      color: #ffffff;
-      font-size: 14px;
+      line-height: 30px;
-      color: #9cdeff;
+      letter-spacing: 1px;
-      line-height: 20px;
+      text-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
-      text-align: left;
+      text-align: right;
       font-style: normal;
-      font-family: PingFangSC, PingFang SC;
+    }
+    img {
+      width: 110px;
+      height: 110px;
     }
 
     .historyimg {
-      width: 182px;
+      margin-top: 10px;
-      height: 35px;
+      padding: 0 25px;
+      background-image: url(@/assets/images/hygiene/xtgl_1.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      font-size: 15px;
+      color: #ffffff;
+      line-height: 21px;
+      letter-spacing: 2px;
     }
   }
-
   img {
     width: 154px;
     height: 136px;
@@ -449,7 +545,48 @@ const change = (name, index) => {
     border-bottom: 13px solid rgba(57, 59, 109, 1);
   }
 }
+.history2 {
+  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;
+  .va {
+    margin-top: 27px;
+    margin-bottom: 20px;
+    font-family: DINAlternate, DINAlternate;
+
+    font-size: 26px;
+    color: #ffffff;
+    line-height: 30px;
+    letter-spacing: 1px;
+    text-shadow: 0px 2px 4px rgba(255, 255, 255, 0.5);
+    text-align: right;
+    font-style: normal;
+  }
+  img {
+    width: 113px;
+    height: 121px;
+  }
+
+  .historyimg {
+    margin-top: 10px;
+    padding: 0 25px;
+    background-image: url(@/assets/images/hygiene/xtgl_1.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    font-size: 15px;
+    color: #ffffff;
+    line-height: 21px;
+    letter-spacing: 2px;
+  }
+}
 .concernLabel {
   display: flex;
   align-items: center;
@@ -564,71 +701,31 @@ const change = (name, index) => {
     }
   }
 }
-
+.minTop {
-.minTopPart {
+  height: 250px;
-  width: 498px;
+  display: flex;
-  height: 99px;
+  align-items: center;
-  background-image: url(@/assets/images/hygiene/shang.png);
+  justify-content: space-around;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  margin: 50px auto;
-  position: relative;
-  .mtpImg1 {
-    width: 152px;
-    height: 164px;
-    background-image: url(@/assets/images/hygiene/shang_left.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: -30px;
-    left: 63px;
-  }
-  .mtpImg2 {
-    width: 140px;
-    height: 50px;
-    background-image: url(@/assets/images/hygiene/jd.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 59px;
-    right: 50px;
-    text-align: center;
-    color: #ffffff;
-    letter-spacing: 5px;
-    font-size: 20px;
-  }
-  .mtpText2 {
-    width: 140px;
-    height: 30px;
-    position: absolute;
-    top: 14px;
-    right: 50px;
-    text-align: center;
-    line-height: 30px;
-    font-weight: 600;
-    font-size: 26px;
-    color: #ffffff;
-  }
 }
 .minTopPart2 {
-  width: 498px;
+  width: 368px;
-  height: 118px;
+  height: 145px;
-  background-image: url(@/assets/images/hygiene/xia.png);
+  background-image: url(@/assets/images/hygiene/xia_1.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  margin: 50px auto;
+  align-items: center;
   position: relative;
   display: flex;
-  margin-top: 90px;
+  margin-top: 35px;
   .left {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: 40px;
+    margin-left: 10px;
     margin-top: -10px;
     .leftImg {
-      width: 105px;
+      width: 100px;
-      height: 105px;
+      height: 100px;
     }
     .left_me {
       margin-left: 10px;
@@ -646,10 +743,10 @@ const change = (name, index) => {
     display: flex;
     align-items: center;
     // justify-content: center;
-    margin-left: 50px;
+    margin-left: 10px;
     .rightImg {
-      width: 81px;
+      width: 78px;
-      height: 81px;
+      height: 78px;
       background-image: url(@/assets/images/hygiene/xia_right.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
@@ -704,4 +801,24 @@ const change = (name, index) => {
   background: rgba(41, 157, 255, 1);
   -webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
 }
+.sm_title_1 {
+  width: 196px;
+  height: 45px;
+  margin-left: 175px;
+  background-image: url(@/assets/images/hygiene/tnbrs.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-top: 25px;
+  margin-bottom: 10px;
+}
+.sm_title_2 {
+  width: 196px;
+  height: 45px;
+  margin-left: 175px;
+  background-image: url(@/assets/images/hygiene/gxyrs.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
 </style>