gx

src/view/echarts_education/pieRose.vue

@@ -3,11 +3,24 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, onBeforeMount, defineProps, watch } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 
+const props = defineProps({
+    list: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+});
+
 const chart = ref(); // 创建DOM引用
+const data = reactive({
+    list: [],
+    option: {}
+})
 
 var colors = [
     '#4EC2FF',
@@ -16,114 +29,93 @@ var colors = [
     '#268FFF',
     '#FFE986'
 ]
-
+const getOption = () => {
-var data = [
+    data.option = {
-    {
+        color: colors,
-        name: '正常',
+        legend: {
-        value: 17
+            orient: 'vertical',
-    },
+            top: 'center',
-    {
+            right: '6%',
-        name: '关注',
+            icon: "circle",
-        value: 16
+            itemGap: 20,
-    },
+            itemWidth: 10,
-    {
+            itemHeight: 10,
-        name: '追踪',
+            textStyle: {
-        value: 14
+                color: '#fff',
-    },
+                fontSize: 18
-    {
+            },
-        name: '异常',
+            formatter: function (name) {
-        value: 8
+                var target;
-    },
+                for (var i = 0, l = data.list.length; i < l; i++) {
-    {
+                    if (data.list[i].name == name) {
-        name: '警戒',
+                        target = data.list[i].value;
-        value: 8
+                    }
-    }
-];
-
-let option = {
-    color: colors,
-    legend: {
-        orient: 'vertical',
-        top: 'center',
-        right: '6%',
-        icon: "circle",
-        itemGap: 20,
-        itemWidth: 10,
-        itemHeight: 10,
-        textStyle: {
-            color: '#fff',
-            fontSize: 18
-        },
-        formatter: function (name) {
-            var target;
-            for (var i = 0, l = data.length; i < l; i++) {
-                if (data[i].name == name) {
-                    target = data[i].value;
                 }
-            }
+                return `   ${name}        ${target} `;
-
-            return `   ${name}        ${target} `;
-        },
-    },
-    tooltip: {
-        trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} ({d}%)'
-    },
-    series: [
-        
-        /*内心原型图，展示整体数据概览*/
-        {
-            name: '测评分析',
-            type: 'pie',
-            radius: ['20%', '70%'],
-            center: ['30%', '50%'],
-            roseType: 'radius',
-            minShowLabelAngle: 30,
-            label: {
-                show: false,
             },
-            data: data
         },
-        // 内圈背景
+        tooltip: {
-        {
+            trigger: 'item',
-            type: "pie",
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
-            center: ["30%", "50%"],
+        },
-            radius: ["20%", "26%"],
+        series: [
-            hoverAnimation: false,
+            /*内心原型图，展示整体数据概览*/
-            clockWise: false,
+            {
-            itemStyle: {
+                name: '测评分析',
-                normal: {
+                type: 'pie',
-                    borderWidth: 1,
+                radius: ['20%', '70%'],
-                    borderColor: "rgba(193, 229, 255, .1)",
+                center: ['30%', '50%'],
-                    color: 'rgba(14, 59, 123, 0.60)'
+                roseType: 'radius',
+                minShowLabelAngle: 30,
+                label: {
+                    show: false,
                 },
+                data: data.list
             },
-            tooltip: {
+            // 内圈背景
-                show: false,
+            {
+                type: "pie",
+                center: ["30%", "50%"],
+                radius: ["20%", "26%"],
+                hoverAnimation: false,
+                clockWise: false,
+                itemStyle: {
+                    normal: {
+                        borderWidth: 1,
+                        borderColor: "rgba(193, 229, 255, .1)",
+                        color: 'rgba(14, 59, 123, 0.60)'
+                    },
+                },
+                tooltip: {
+                    show: false,
+                },
+                label: {
+                    show: false,
+                },
+                data: [100],
             },
-            label: {
+        ]
-                show: false,
+    };
-            },
+}
-            data: [100],
+const setChart = () => {
-        },
-    ]
-};
-
-// 使用生命钩子
-onMounted(() => {
-    // 基于准备好的dom，初始化echarts实例
-    // var myChart = echarts.init(document.getElementById('main'));
     // Vue3中： 需要引入
     var myChart = echarts.init(chart.value);
 
-    // init(); // vue3.2没有this
     // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
+    myChart.setOption(data.option);
+}
+watch(() => props.list, (newVal, oldVal) => {
+    data.list = newVal
+    getOption()
+    setChart()
+    console.log('333', newVal, oldVal)
+})
+// 使用生命钩子
+onMounted(() => {
+    data.list = props.list
+    getOption()
+    setChart()
 
-    // 单图表响应式: 跟随浏览器大小改变
-    //   window.addEventListener("resize", () => {
-    //     myChart.resize();
-    //   });
 });
 </script>
 

src/view/echarts_hygiene/eP3.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="chart"
-    style="width: 100%; height: calc(100% - 76px); min-height: 205px"
+    style="width: 100%; height: calc(100% - 46px); min-height: 215px"
   ></div>
 </template>
 
@@ -27,7 +27,7 @@ let option = {
   },
 
   grid: {
-    top: "20%",
+    top: "10%",
     left: "1%",
     right: "10%",
     bottom: "0%",
@@ -41,7 +41,7 @@ let option = {
         formatter: function (params) {
           var str = ""; // 最终拼接成的字符串
           var paramsLen = params.length; // 获取每项文字的个数
-          var len = 4; // 每行能显示的字的个数（根据实际情况自己设置）
+          var len = 5; // 每行能显示的字的个数（根据实际情况自己设置）
           var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
           if (paramsLen > len) {
             //大于设定的len就换行，不大于就不变化
@@ -67,7 +67,7 @@ let option = {
         textStyle: {
           color: "#ccc",
         },
-        // rotate: 60,
+        rotate: 30,
       },
       data: data1,
     },

src/view/echarts_hygiene/eP4.vue

@@ -11,7 +11,6 @@ const chart = ref(); // 创建DOM引用
 
 const datas = {
     value: 92.96,
-    text: "留 守 儿 童"
 }
 
 let option = {

src/view/echarts_hygiene/eP5.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="chart"
-    style="width: 100%; height: calc(100% - 66px); min-height: 320px"
+    style="width: 100%; height: calc(100% - 60px); min-height: 320px"
   ></div>
 </template>
 
@@ -41,7 +41,7 @@ let option = {
         formatter: function (params) {
           var str = ""; // 最终拼接成的字符串
           var paramsLen = params.length; // 获取每项文字的个数
-          var len = 5; // 每行能显示的字的个数（根据实际情况自己设置）
+          var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
           var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
           if (paramsLen > len) {
             //大于设定的len就换行，不大于就不变化
@@ -80,7 +80,7 @@ let option = {
       splitLine: {
         show: true,
         lineStyle: {
-          color: "rgba(226, 226, 226, 0.3)",
+          color: "rgba(226, 226, 226, 0.2)",
           width: 1,
         },
       },

src/view/echarts_hygiene/pie.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:155px;"></div>
+  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:165px;"></div>
 </template>
 
 <script setup >
@@ -15,7 +15,7 @@ let option = {
     formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
   },
   legend: {
-    top: "8%",
+    top: "3%",
     right: "11%",
     textStyle: {
       fontSize: 12,
@@ -23,6 +23,7 @@ let option = {
     },
   },
   grid: {
+    top:'23%',
     left: "1%",
     right: "10%",
     bottom: "0%",

src/view/echarts_hygiene/pie2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:155px;"></div>
+  <div ref="chart" style="width: 100%; height: calc(100% - 46px);min-height:165px;"></div>
 </template>
 
 <script setup >
@@ -17,7 +17,7 @@ let option = {
   },
   legend: {
     data: ["职工医疗保险金额", "城乡医疗保险金额"],
-    top: "8%",
+    top: "3%",
     right: "11%",
     textStyle: {
       fontSize: 12,
@@ -25,6 +25,7 @@ let option = {
     },
   },
   grid: {
+    top:'23%',
     left: "1%",
     right: "10%",
     bottom: "3%",

src/view/education.vue

@@ -21,32 +21,19 @@
         <div class="yd_title left_2"></div>
         <div class="selectLint">
           <div class="selectBox">
-            <el-select
+            <el-select v-model="selectData.value1" placeholder="请选择" size="large" @change="selectChange1">
-              v-model="value"
+              <el-option v-for="item in selectData.options1" :key="item.value" :label="item.label"
-              placeholder="Select"
+                :value="item.value" />
-              size="large"
-              class="selClass"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
             </el-select>
           </div>
           <div class="selectBox">
-            <el-select v-model="value" placeholder="Select" size="large">
+            <el-select v-model="selectData.value2" placeholder="请选择" size="large" @change="selectChange1">
-              <el-option
+              <el-option v-for="item in selectData.options2" :key="item.value" :label="item.label"
-                v-for="item in options"
+                :value="item.value" />
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
             </el-select>
           </div>
         </div>
-        <ePieRose></ePieRose>
+        <ePieRose :list="selectData.list"></ePieRose>
       </div>
     </div>
     <div class="displayFlex center_bg">
@@ -193,6 +180,7 @@
 </template>
 
 <script setup>
+import { ref, reactive, onMounted, onBeforeMount } from 'vue'
 import edCSR from "./echarts_education/edCSR.vue";
 import edXX from "./echarts_education/edXX.vue";
 import edie from "./echarts_education/pie.vue";
@@ -201,31 +189,112 @@ import ePie2 from "./echarts_education/pie2.vue";
 import ePie3 from "./echarts_education/pie3.vue";
 import ePie4 from "./echarts_education/pie4.vue";
 import ePieRose from "./echarts_education/pieRose.vue";
-import { ref } from "vue";
 
-const value = ref("");
+const selectData = reactive({
-const options = [
+  value1: '111',
-  {
+  value2: 'tes1',
-    value: "Option1",
+  options1: [{
-    label: "Option1",
+    value: '111',
+    label: '2023秋季检查',
   },
   {
-    value: "Option2",
+    value: '222',
-    label: "Option2",
+    label: '2024春季检查',
+  },],
+  options2: [{
+    value: 'tes1',
+    label: '中小学心理健康诊断测验(MHT）',
   },
   {
-    value: "Option3",
+    value: 'tes2',
-    label: "Option3",
+    label: '小学心理健康诊断测验',
   },
   {
-    value: "Option4",
+    value: 'tes3',
-    label: "Option4",
+    label: '中学心理健康诊断',
+  },],
+  list: [],
+})
+var roseData1 = ref([
+  {
+    name: '正常',
+    value: 17
   },
   {
-    value: "Option5",
+    name: '关注',
-    label: "Option5",
+    value: 16
   },
-];
+  {
+    name: '追踪',
+    value: 14
+  },
+  {
+    name: '异常',
+    value: 8
+  },
+  {
+    name: '警戒',
+    value: 8
+  }
+]);
+var roseData2 = ref([
+  {
+    name: '正常',
+    value: 37
+  },
+  {
+    name: '关注',
+    value: 26
+  },
+  {
+    name: '追踪',
+    value: 24
+  },
+  {
+    name: '异常',
+    value: 18
+  },
+  {
+    name: '警戒',
+    value: 18
+  }
+]);
+var roseData3 = ref([
+  {
+    name: '正常',
+    value: 227
+  },
+  {
+    name: '关注',
+    value: 169
+  },
+  {
+    name: '追踪',
+    value: 114
+  },
+  {
+    name: '异常',
+    value: 98
+  },
+  {
+    name: '警戒',
+    value: 78
+  }
+]);
+const selectChange1 = () => {
+  if(selectData.value1 == '111'){
+    selectData.list = roseData1.value
+  }else if(selectData.value2 == 'tes1'){
+    selectData.list = roseData2.value
+  }else if(selectData.value2 == 'tes2'){
+    selectData.list = roseData3.value
+  }else{
+    selectData.list = roseData1.value
+  }
+}
+onBeforeMount(() => {
+  selectData.list = roseData1.value
+});
 </script>
 
 <style lang="scss" scoped>
@@ -264,6 +333,7 @@ const options = [
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .center_bg {
   width: 582px;
   box-sizing: border-box;
@@ -272,6 +342,7 @@ const options = [
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .right_bg {
   width: 642px;
   box-sizing: border-box;
@@ -582,6 +653,7 @@ const options = [
 }
 .czr-sl {
   display: flex;
+
   .historyimg {
     width: 255px;
     height: 56px;
@@ -593,6 +665,7 @@ const options = [
     justify-content: space-between;
 
     padding-left: 70px;
+
     span {
       font-weight: 400;
       font-size: 16px;
@@ -605,20 +678,24 @@ const options = [
       padding-right: 10px;
     }
   }
+
   .historyimg1 {
     background-image: url(@/assets/eduImg/jyImg14.png);
     margin-right: 10px;
   }
+
   .historyimg2 {
     background-image: url(@/assets/eduImg/jyImg15.png);
   }
 }
+
 .earlyWarning {
   height: calc(100% - 10px);
 
   display: flex;
   align-items: center;
   justify-content: space-around;
+
   .earlyWarning1 {
     font-size: 26px;
     color: #ffffff;
@@ -630,10 +707,12 @@ const options = [
     display: flex;
     flex-direction: column;
     align-items: center;
+
     img {
       width: 136px;
       height: 100px;
     }
+
     .green {
       font-size: 26px;
       font-weight: bold;
@@ -646,6 +725,7 @@ const options = [
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
+
     .yellow {
       font-size: 26px;
       font-weight: bold;
@@ -658,6 +738,7 @@ const options = [
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
+
     .red {
       font-size: 26px;
       font-weight: bold;
@@ -680,6 +761,7 @@ const options = [
       display: flex;
       align-items: center;
       justify-content: center;
+
       span {
         font-weight: 500;
         font-size: 14px;
@@ -689,17 +771,21 @@ const options = [
         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);
@@ -719,18 +805,22 @@ const options = [
       padding-left: 18px;
     }
   }
+
   .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);
   }
@@ -880,7 +970,7 @@ const options = [
       font-style: normal;
     }
   }
-}
+};
 
 .selectLint {
   width: 94%;

src/view/hygiene.vue

@@ -45,7 +45,7 @@
         <div class="yd_title center_1"></div>
         <div class="minTopPart">
           <div class="mtpImg1"></div>
-          <div class="mtpImg2"></div>
+          <div class="mtpImg2">建档份数</div>
           <div class="mtpText2">33.67万</div>
         </div>
         <div class="minTopPart2">
@@ -83,7 +83,7 @@
         <div class="yd_title service"></div>
         <eP7></eP7>
       </div>
-      <div >
+      <div class="flex1" style="height:100vh;">
         <div class="yd_title last"></div>
         <div class="table">
           <div class="item" >3月2日健康日，在龙中公园进行健康活动宣</div>
@@ -581,13 +581,17 @@ const change = (name, index) => {
   }
   .mtpImg2 {
     width: 140px;
-    height: 24px;
+    height: 50px;
-    background-image: url(@/assets/minTop2.png);
+    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;
@@ -650,11 +654,12 @@ const change = (name, index) => {
   }
 }
 .table {
+  margin-top: 10px;
   width: 95%;
-  height: 200px;
+  min-height: 200px;
-  height: calc(100% - 75px);
+  height: calc(100% - 115px);
   // background: red;
-  overflow-y: auto;
+  overflow-y: scroll;
   .item {
     margin-top: 10px;
     padding: 16px 20px;
@@ -664,4 +669,22 @@ const change = (name, index) => {
     color: #ffffff;
   }
 }
+/* 滚动条整体部分 */
+.table::-webkit-scrollbar {
+	width: 5px;
+	// height: 10px;
+}
+/* 滚动槽 */
+.table::-webkit-scrollbar-track {
+	border-radius: 1px;
+	background: rgba(41, 157, 255, 0.56);
+	-webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
+}
+/* 滚动条滑块样式 */
+.table::-webkit-scrollbar-thumb {
+	background-clip: content-box;
+	border-radius: 6px;
+	background: rgba(41, 157, 255, 1);
+	-webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
+}
 </style>