From 59c9ddd8c4f19f95d2b3995cf87a7de6ff117159 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Wed, 17 Apr 2024 13:19:11 +0800
Subject: [PATCH] gx

---
 src/view/echarts_education/edCSR.vue | 218 ++++++++++++++++++++++
 src/view/education.vue               | 261 +++++++++++++++++++++++++--
 2 files changed, 466 insertions(+), 13 deletions(-)
 create mode 100644 src/view/echarts_education/edCSR.vue

diff --git a/src/view/echarts_education/edCSR.vue b/src/view/echarts_education/edCSR.vue
new file mode 100644
index 0000000..f550058
--- /dev/null
+++ b/src/view/echarts_education/edCSR.vue
@@ -0,0 +1,218 @@
+<template>
+  <div ref="chart" style="width: 100%;height: calc(100% - 70px)"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const data = [20, 20, 50, 80, 70, 10, 30];
+// 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(17, 193, 255, 1)",
+      },
+      {
+        offset: 0.5,
+        color: "rgba(17, 193, 255, 0.5)",
+      },
+      {
+        offset: 1,
+        color: "rgba(17, 193, 255, 0.20)",
+      },
+    ],
+  },
+];
+const option = {
+  tooltip: {
+    trigger: "axis",
+    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
+    axisPointer: {
+      type: "cross",
+      label: {
+        backgroundColor: "#3F82F7", //提示文字标题颜色
+      },
+    },
+  },
+  legend: {
+    // data: ["上门服务时长", "上门服务次数"],
+    // top: "8%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ffffff",
+    },
+  },
+  grid: {
+    top: "8%",
+    left: "5%",
+    right: "3%",
+    bottom: "0%",
+    containLabel: true,
+    color: "#ffffff",
+  },
+  calculable: true,
+  //   color: "rgba(0, 252, 255, 1)",
+  color,
+  xAxis: [
+    {
+      type: "category",
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      axisTick: {
+      show: false, // 设置轴刻度不显示
+    },
+      data:  ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
+    },
+    {
+      type: "category",
+      show: false,
+      data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      scale: true,
+      // name: "时长/小时",
+      // max: data.length,
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
+        },
+      },
+    },
+    // {
+    //   type: "value",
+    //   scale: true,
+    //   // name: "次数/次",
+    //   min: 0,
+    //   max: max,
+    //   splitLine: {//分割线配置
+    //     show: false,
+    //     lineStyle: {
+    //       color: "#ffffff",
+    //       width: 1,
+    //     },
+    //   },
+    //   axisLabel: {//y轴文字的配置
+    //     textStyle: {
+    //       color: "#ffffff",
+    //     },
+    //   },
+    //   axisLine: {
+    //     //y轴线的颜色以及宽度
+    //     show: false,
+    //     lineStyle: {
+    //       color: "#ffffff",
+    //       width: 1,
+    //       type: "solid",
+    //     },
+    //   },
+    // },
+  ],
+  series: [
+    {
+      // name: "上门服务时长",
+      data: data,
+      barWidth: 20,
+      type: "bar",
+    },
+    // {
+    //   // name: "上门服务次数",
+    //   data: lineData,
+    //   type: "line", //线状图
+    //   itemStyle: {
+    //     borderColor: "#00FCFF",
+    //     borderWidth: 1,
+    //     color: "#00FCFF",
+    //   },
+    // },
+    {
+      xAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
+      },
+      // data: data.map(() => max),
+      data: data,
+      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",
+    },
+  ],
+};
+
+// 使用生命钩子
+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>
diff --git a/src/view/education.vue b/src/view/education.vue
index 7378ef2..8ccb53b 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -7,10 +7,9 @@
       </div>
       <div class="flex1">
         <div class="yd_title left_2"></div>
-        
       </div>
     </div>
-    <div class="displayFlex">
+    <div class="displayFlex center_bg">
       <div class="flex1">
         <div class="yd_title center_1"></div>
         <eGraph></eGraph>
@@ -19,20 +18,66 @@
     <div class="displayFlex right_bg">
       <div class="flex1">
         <div class="yd_title right_1"></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="czr-sl">
+          <div class="historyimg historyimg1">
+            <span>覆盖医疗机构数量</span>
+            <span>22</span>
+          </div>
+          <div class="historyimg historyimg2">
+            <span>启用角色数量</span>
+            <span>101</span>
+          </div>
+          <!-- <img src="@/assets/eduImg/jyImg14.png" alt="" />
+          <img src="@/assets/eduImg/jyImg15.png" alt="" /> -->
+        </div>
+        <edCSR></edCSR>
+      </div>
+      <div class="flex11">
+        <div class="earlyWarning">
+          <div class="earlyWarning1">
+            <div>
+              <span class="green">16</span>
+            </div>
+            <img src="@/assets/eduImg/jyImg10.png" alt="" />
+            <div class="historyimg historyimg1">
+              <span>绿色预警</span>
+            </div>
+          </div>
+          <div class="earlyWarning1">
+            <div>
+              <span class="yellow">239</span>
+            </div>
+            <img src="@/assets/eduImg/jyImg9.png" alt="" />
+            <div class="historyimg historyimg2">
+              <span>黄色预警</span>
+            </div>
+          </div>
+          <div class="earlyWarning1">
+            <div>
+              <span class="red">139</span>
+            </div>
+            <img src="@/assets/eduImg/jyImg8.png" alt="" />
+            <div class="historyimg historyimg3">
+              <span>红色预警</span>
+            </div>
+          </div>
         </div>
       </div>
       <div class="flex1">
-        <div class="yd_title">
-          <span class="text">职位</span>
+        <div style="display: flex; justify-content: center">
+          <div class="czr-bj">
+            <div class="czrBox">
+              <div class="situation situation1"></div>
+            </div>
+            <div class="czrBox">
+              <div class="situation situation2"></div>
+            </div>
+            <div class="czrBox">
+              <div class="situation situation3"></div>
+            </div>
+          </div>
         </div>
-        <eBubble></eBubble>
+        <!-- <eBubble></eBubble> -->
       </div>
     </div>
   </div>
@@ -40,6 +85,7 @@
 
 <script setup>
 import eBubble from "./echarts_education/bubble.vue";
+import edCSR from "./echarts_education/edCSR.vue";
 // import ePie from "./echarts/pie.vue";
 // import ePie2 from "./echarts/pie2.vue";
 // import eGraph from "./echarts/graph.vue";
@@ -77,6 +123,15 @@ import eBubble from "./echarts_education/bubble.vue";
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+.center_bg {
+  width: 582px;
+  box-sizing: border-box;
+  padding-left: 10px;
+  // margin-right: 28px;
+  background-image: url(@/assets/images/center_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 .right_bg {
   width: 642px;
   box-sizing: border-box;
@@ -102,7 +157,7 @@ import eBubble from "./echarts_education/bubble.vue";
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
-.right_1{
+.right_1 {
   background-image: url(@/assets/eduImg/title4.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -349,4 +404,184 @@ import eBubble from "./echarts_education/bubble.vue";
     }
   }
 }
+
+.yd_title {
+  // background-image: url(@/assets/img_04.png);
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
+  box-sizing: border-box;
+  width: 94%;
+  height: 36px;
+  position: relative;
+
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 3px;
+  }
+}
+
+.mechanism {
+  background-image: url(@/assets/YLTitle/titleImg10.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.czr-sl {
+  display: flex;
+  .historyimg {
+    width: 255px;
+    height: 56px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-left: 70px;
+    span {
+      font-weight: 400;
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 22px;
+      letter-spacing: 2px;
+      text-align: left;
+      font-style: normal;
+      font-family: PingFangSC, PingFang SC;
+      padding-right: 10px;
+    }
+  }
+  .historyimg1 {
+    background-image: url(@/assets/eduImg/jyImg14.png);
+    margin-right: 10px;
+  }
+  .historyimg2 {
+    background-image: url(@/assets/eduImg/jyImg15.png);
+  }
+}
+.flex11 {
+  padding: 12px 0;
+}
+.earlyWarning {
+  height: calc(100% - 10px);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .earlyWarning1 {
+    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;
+    img {
+      width: 136px;
+      height: 100px;
+    }
+    .green {
+      font-size: 26px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      font-style: normal;
+      font-family: DINAlternate, DINAlternate;
+      background-image: linear-gradient(180deg, #7be546 0%, #38ffb1 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .yellow {
+      font-size: 26px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      font-style: normal;
+      font-family: DINAlternate, DINAlternate;
+      background-image: linear-gradient(180deg, #ee8404 0%, #efd404 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .red {
+      font-size: 26px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      font-style: normal;
+      font-family: DINAlternate, DINAlternate;
+      background-image: linear-gradient(180deg, #ff3e00 0%, #ed5a2d 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .historyimg {
+      width: 133px;
+      height: 19px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      margin-top: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        font-weight: 500;
+        font-size: 14px;
+        color: #ffffff;
+        letter-spacing: 4px;
+        font-style: normal;
+        font-family: PingFangSC, PingFang SC;
+      }
+    }
+    .historyimg1 {
+      background-image: url(@/assets/eduImg/jyImg4.png);
+    }
+    .historyimg2 {
+      background-image: url(@/assets/eduImg/jyImg6.png);
+    }
+    .historyimg3 {
+      background-image: url(@/assets/eduImg/jyImg5.png);
+    }
+  }
+}
+.czr-bj {
+  width: 529px;
+  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;
+  // box-sizing: border-box;
+
+  .czrBox {
+    height: 8vh;
+  }
+  .situation {
+    width: 495px;
+    height: 26px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .situation1 {
+    background-image: url(@/assets/eduImg/jyImg11.png);
+  }
+  .situation2 {
+    background-image: url(@/assets/eduImg/jyImg12.png);
+  }
+  .situation3 {
+    background-image: url(@/assets/eduImg/jyImg13.png);
+  }
+}
 </style>