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

src/view/analyze.vue

@@ -44,12 +44,7 @@
               <span> {{ item.name }}</span>
             </div>
           </div>
-          <eP2
+          <eP2 :list="data.DataViewing" :year="data.leftCenterYear"></eP2>
-            :list="data.DataViewing"
-            :list1="data.leftCenter3"
-            :list2="data.leftCenter4"
-            :year="data.leftCenterYear"
-          ></eP2>
         </div>
       </div>
     </div>
@@ -65,7 +60,7 @@
         <div class="minTopNum">
           <div
             class="numItem"
-            v-for="(item, inex) in minData.minTop"
+            v-for="(item, index) in minData.minTop"
             :key="index"
           >
             {{ item }}
@@ -136,7 +131,14 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
+import {
+  ref,
+  reactive,
+  onMounted,
+  onBeforeMount,
+  onBeforeUnmount,
+  computed,
+} from "vue";
 import right2 from "./echart_analyze/right2.vue";
 import right1 from "./echart_analyze/right1.vue";
 import http from "@/utils/request.js";
@@ -170,7 +172,7 @@ const data = reactive({
     {
       name: "医保支出万元以上",
       value: "11112",
-      show: false,
+      show: true,
       data: ["100", "120", "199", "133", "210"], //医保支出万元以上
     },
     {
@@ -189,19 +191,19 @@ const data = reactive({
       name: "糖尿病",
       value: "1241",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //糖尿病
+      data: ["100", "120", "19", "133", "210"], //糖尿病
     },
     {
       name: "高血脂",
       value: "1414",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //高血脂
+      data: ["100", "120", "199", "13", "210"], //高血脂
     },
     {
       name: "高血糖",
       value: "2355",
       show: false,
-      data: ["100", "120", "199", "133", "210"], //高血糖
+      data: ["100", "120", "199", "133", "10"], //高血糖
     },
     {
       name: "残疾",
@@ -228,11 +230,16 @@ const data = reactive({
       data: ["100", "120", "199", "133", "210"], //其他疾病
     },
   ],
-  DataViewing: {}, //数据查看
+  DataViewing: [
-  leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
+    {
-  leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
+      name: "医保支出万元以上",
-  leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
+      data: ["100", "120", "199", "133", "210"], //医保支出万元以上
+    },
+  ], //数据查看
   leftCenterYear: ["2019", "2020", "2021", "2022", "2023"], //年份
+  // leftCenter1: ["100", "120", "199", "133", "210"], //医保支出万元以上
+  // leftCenter3: ["100", "80", "199", "133", "210"], //大病住院
+  // leftCenter4: ["100", "120", "199", "133", "210"], //糖尿病
 
   zccs1: ["图书馆", "交通出行", "景区"], //一码通
   zccs2: ["100", "130", "220"], //一码通
@@ -255,51 +262,48 @@ const minData = reactive({
 });
 // 数据查看
 const onViewData = (value, i) => {
+  clearInterval(interval); //清除定时器
   data.ViewData[i].show = !data.ViewData[i].show;
   data.DataViewing = data.ViewData.filter((item) => item.show).map((item) => ({
     name: item.name,
     data: item.data,
   }));
-  console.log(data.DataViewing, 666);
-
-  // switch (value) {
-  //   case "医保支出万元以上":
-  //     data.ViewData[i].show = !data.ViewData[i].show;
-  //     break;
-  //   case "大病住院":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "高血压":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "糖尿病":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "高血脂":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "高血糖":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "残疾":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "低保":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "特困":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   case "其他疾病":
-  //     data.ViewData[i].show = true;
-  //     break;
-  //   default:
-  //     break;
-  // }
 };
-onMounted(() => {});
+const onViewData1 = (i) => {
+  data.ViewData[i].show = !data.ViewData[i].show;
+  data.DataViewing = data.ViewData.filter((item) => item.show).map((item) => ({
+    name: item.name,
+    data: item.data,
+  }));
+};
+
+let interval;
+let currentIndex = ref(0);
+
+const toggleShow = () => {
+  const length = data.ViewData.length;
+  if (length === 0) return;
+  const current = currentIndex.value;
+  const nextIndex = (currentIndex.value + 1) % length;
+  // 取反当前索引和下一个索引的 show 值
+  // data.ViewData[current].show = !data.ViewData[current].show;
+  data.ViewData[nextIndex].show = !data.ViewData[nextIndex].show;
+  onViewData1(current);
+  currentIndex.value = nextIndex;
+};
+
+const startAutoSwitching = () => {
+  interval = setInterval(toggleShow, 6000); // 每6秒切换一次
+};
+onMounted(() => {
+  startAutoSwitching();
+});
 
 onBeforeMount(() => {});
+
+onBeforeUnmount(() => {
+  clearInterval(interval); //清除定时器
+});
 </script>
 
 <style lang="scss" scoped>
@@ -569,8 +573,10 @@ onBeforeMount(() => {});
     display: flex;
     flex-wrap: wrap;
     color: #ffffff;
+    margin-top: 14px;
     .ViewDataTop {
       width: 114px;
+      height: 132px;
       display: flex;
       align-items: center;
       flex-direction: column;
@@ -581,9 +587,10 @@ onBeforeMount(() => {});
         background-size: 100% 100%;
         width: 80px;
         height: 80px;
-        margin-bottom: -24px;
+        margin-bottom: -28px;
         text-align: center;
         line-height: 100px;
+        animation: moveUpDown 2s infinite;
       }
       .ViewDataTopimg_1 {
         background-image: url(@/assets/images/sjfx/sjfx1.png);
@@ -594,18 +601,31 @@ onBeforeMount(() => {});
       }
       .ViewDataBottomimg {
         background-image: url(@/assets/images/sjfx/sjfx2.png);
-        background-repeat: no-repeat;
+        animation: scaleUpDown 2s infinite;
-        background-size: 100% 100%;
+        // transform: scale(1.3);
-        width: 80px;
-        height: 80px;
-        margin-bottom: -24px;
       }
       .ViewDataBottomimg_1 {
         background-image: url(@/assets/images/sjfx/sjfx3.png);
-        background-repeat: no-repeat;
+        margin-top: 4px;
-        background-size: 100% 100%;
+      }
-        width: 105px;
+
-        height: 57px;
+      @keyframes moveUpDown {
+        0%,
+        100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-10px);
+        }
+      }
+      @keyframes scaleUpDown {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.1);
+        }
       }
     }
   }

src/view/echart_analyze/eP2.vue

@@ -1,41 +1,25 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 260px"></div>
+  <div ref="chart" style="width: 100%; height: 320px"></div>
 </template>
 
 <script setup>
-import { onBeforeMount, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
-// 局部引入echarts核心模块
 import * as echarts from "echarts";
 
-const chart = ref(); // 创建DOM引用
+const chart = ref();
-
+const clear = ref(false);
 const props = defineProps({
-  list: {
+  list: Array,
-    type: Array,
+  year: Array,
-    default: () => {
-      return [];
-    },
-  },
-  list1: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  list2: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  year: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
 });
-const ser = ref([
+
+const data = reactive({
+  list: [],
+  year: [],
+  option: {},
+  name: [],
+  formatter: "{b0}<br />",
+  series: [
     {
       name: "背景",
       type: "bar",
@@ -45,37 +29,85 @@ const ser = ref([
         color: "rgba(180, 180, 180, 0.2)",
       },
     },
-]);
+  ],
-const data = reactive({
+  legend: {
-  list: [],
-  list1: [],
-  list2: [],
-  year: [],
-  option: {},
-  bg: [],
-  name: [],
-  ser: [],
-  len: {
     data: [],
-    top: "5%",
+    top: "3%",
-    right: "10%",
+    right: "5%",
     textStyle: {
       fontSize: 16,
       color: "#ffffff",
     },
   },
+  bgColor: [
+    "#2468FF",
+    "#E8FF00",
+    "#FF5733",
+    "#33FF57",
+    "#3357FF",
+    "#FF33A1",
+    "#57FF33",
+    "#33FFA1",
+    "#A133FF",
+    "#FF5733",
+  ],
 });
 
+const updateSeries = () => {
+  data.series = [
+    {
+      name: "背景",
+      type: "bar",
+      data: data.year.map(() => 0),
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ];
+
+  if (data.list.length > 0) {
+    data.list.forEach((item, index) => {
+      const color = data.bgColor[index % data.bgColor.length];
+      data.series.push({
+        yAxisIndex: 0,
+        name: item.name,
+        type: "line",
+        symbol: "emptyCircle",
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: color,
+          borderWidth: 1,
+          color: color,
+        },
+        label: {
+          show: true,
+          color: color,
+          formatter: (data) => data.value,
+        },
+        data: item.data,
+      });
+    });
+  }
+
+  data.legend.data = data.list.map((item) => item.name);
+  data.formatter =
+    "{b0}<br />" +
+    data.list
+      .map((_, index) => `{a${index + 1}}:{c${index + 1}}<br />`)
+      .join("");
+};
+
 const getOption = () => {
   data.option = {
     tooltip: {
       trigger: "axis",
       padding: [20, 10, 20, 10],
-      formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2}",
+      formatter: data.formatter,
     },
-    legend: data.len,
+    legend: data.legend,
     grid: {
-      top: "25%",
+      top: "35%",
       left: "6%",
       right: "6%",
       bottom: "3%",
@@ -85,13 +117,10 @@ const getOption = () => {
       type: "category",
       data: data.year,
       axisLabel: {
-        //坐标轴刻度标签的相关设置
-        textStyle: {
         color: "#ffffff",
         fontSize: 16,
       },
     },
-    },
     yAxis: [
       {
         type: "value",
@@ -104,24 +133,13 @@ const getOption = () => {
             width: 1,
           },
         },
-        min: 0, // 设置Y轴最小值
+        min: 0,
-        max: function (value) {
+        max: (value) =>
-          // 自定义Y轴最大值，确保数据点显示在顶部
+          Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50,
-          return Math.ceil(Math.max(value.max, value.max * 1.2) / 50) * 50;
-        },
         nameTextStyle: {
-          // 设置Y轴名称的样式
+          fontSize: 14,
-          fontSize: 14, // 这里设置字体大小为20
         },
-        // axisLabel: {
-        //   //坐标轴刻度标签的相关设置
-        //   textStyle: {
-        //     color: "#ffffff",
-        //     fontSize: 16,
-        //   },
-        // },
         axisLine: {
-          //y轴线的颜色以及宽度
           show: false,
           lineStyle: {
             color: "#ffffff",
@@ -133,7 +151,6 @@ const getOption = () => {
       },
       {
         type: "value",
-        // name: "糖尿病",
         splitLine: {
           show: false,
           lineStyle: {
@@ -142,21 +159,16 @@ const getOption = () => {
             width: 1,
           },
         },
-        min: 0, // 设置Y轴最小值
+        min: 0,
-        max: function (value) {
+        max: (value) =>
-          // 自定义Y轴最大值，确保数据点显示在顶部
+          Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50,
-          return Math.ceil(Math.max(value.max, value.max * 1.6) / 50) * 50;
-        },
         nameTextStyle: {
-          // 设置Y轴名称的样式
+          fontSize: 14,
-          fontSize: 14, // 这里设置字体大小为20
         },
         axisLabel: {
           show: false,
-          //坐标轴刻度标签的相关设置
         },
         axisLine: {
-          //y轴线的颜色以及宽度
           show: false,
           lineStyle: {
             color: "#ffffff",
@@ -167,66 +179,39 @@ const getOption = () => {
         },
       },
     ],
-    series: data.ser,
+    series: data.series,
   };
 };
 
 const setChart = () => {
-  var myChart = echarts.init(chart.value);
+  const myChart = echarts.init(chart.value);
+  if (clear.value) {
+    myChart.clear();
+  }
   myChart.setOption(data.option);
 };
 
-const setChart1 = () => {
-  data.ser = ser.value;
-  if (data.name.length > 0) {
-    data.list.forEach((item) => {
-      data.ser.push({
-        yAxisIndex: 0,
-        name: item.name,
-        type: "line",
-        symbol: "emptyCircle",
-        symbolSize: 10,
-        itemStyle: {
-          borderColor: "#2468FF",
-          borderWidth: 1,
-          color: "#2468FF",
-        },
-        label: {
-          show: true,
-          color: "#2468FF",
-          formatter: function (data) {
-            return data.value;
-          },
-        },
-
-        data: item.data,
-      });
-    });
-  }
-};
-
-// 监听数据
 watch(
   () => props.list,
   (newVal, oldVal) => {
+    if (newVal.length < oldVal.length) {
+      clear.value = true;
+    } else {
+      clear.value = false;
+    }
     data.list = newVal;
-    data.name = props.list.map((item) => item.name);
+    updateSeries();
-    data.len.data=data.name;
+    getOption();
-    // console.log(55555, data.name);
-    setChart1();
     setChart();
   }
 );
-// 使用生命钩子
+
-onBeforeMount(() => {
+onMounted(() => {
-  setTimeout(() => {
   data.list = props.list;
   data.year = props.year;
-    ser.value[0].data = data.year.map((item) => 0);
+  updateSeries();
-    setChart1();
   getOption();
   setChart();
-  }, 600);
 });
 </script>
 

src/view/echart_analyze/right1.vue

@@ -115,7 +115,7 @@ let option = {
         // formatter: '{c}%' // 这里是数据展示的时候显示的数据
       }, // 柱子上方的数值
       itemStyle: {
-        normal: {
+        // normal: {
           borderWidth: 1,
           //   borderColor: "rgba(0, 183, 255, 1)",
           borderRadius: [0, 0, 50, 0], //圆角边框
@@ -123,7 +123,7 @@ let option = {
             { offset: 0, color: "rgba(0, 183, 255, 0)" },
             { offset: 1, color: "rgba(0, 183, 255, 1)" },
           ]),
-        },
+        // },
       },
       barWidth: 10,
       data: data2,

src/view/echart_analyze/right2.vue

@@ -10,7 +10,6 @@ import * as echarts from "echarts";
 const chart = ref(); // 创建DOM引用
 
 const colors = [
-
   {
     left: "rgba(234, 162, 57, .16)",
     right: "rgba(234, 162, 57, .6)",
@@ -32,11 +31,13 @@ const colors = [
     bottom: "rgba(60, 143, 255, .46)",
     front: "rgba(60, 143, 255, .66)",
   },
-
 ];
-const maxList = [90, 90, 90, 90, 90, 90, 90];
+const maxList = ref([]);
-const valueList = [20, 53, 47, 65, 29, 11, 50];
+const valueList = [20, 53, 47, 65, 29, 11, 10];
-
+const data = reactive({
+  option: {},
+  Max: 100,
+});
 // 注册5个面图形:左侧、前面、右面、上面、下面
 //c0:左下角，c1：右下角,c2:右上角，c3：左上角
 // 绘制左侧面-ok rgba(103, 180, 233, 0.04)
@@ -145,8 +146,8 @@ echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
 echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
 echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
 echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
-
+const getOption = () => {
-const option = {
+  data.option = {
     tooltip: {
       trigger: "axis",
       formatter: "{b0}:{c1}",
@@ -183,7 +184,6 @@ const option = {
           color: "#fff",
           fontSize: 16,
           formatter: function (value) {
-
             return value.length > 3 ? value.slice(0, 2) + "..." : value;
           },
         },
@@ -216,7 +216,8 @@ const option = {
     ],
     yAxis: {
       min: 0,
-    max: 100,
+      // max: 200,
+      max: data.Max,
       interval: 20,
       type: "value",
       axisLine: {
@@ -314,7 +315,7 @@ const option = {
             ],
           };
         },
-      data: maxList,
+        data: maxList.value,
       },
       {
         type: "custom",
@@ -422,13 +423,27 @@ const option = {
       },
     ],
   };
-
+};
-onMounted(() => {
+const setChart = () => {
   var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+};
+const getMaxCeilingValue = (arr) => {
+  let max = Math.max(...arr);
+  return Math.ceil(max / 100) * 100;
+};
 
-  myChart.setOption(option);
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.Max = getMaxCeilingValue(valueList);
+    maxList.value = valueList.map((item) => data.Max * 0.9);
+    getOption();
+    setChart();
+  }, 600);
 });
+
 </script>
 
 <style lang="scss" scoped>
 </style>
+

src/view/echart_analyze/ylXZZC.vue

@@ -179,7 +179,7 @@ const getOption = () => {
         barMaxWidth: 20, // 每一个都要设置
         barMinWidth: 5, // 每一个都要设置
         itemStyle: {
-          normal: {
+          // normal: {
             borderWidth: 1,
             borderColor: "rgba(0, 183, 255, 1)",
             borderRadius: [0, 0, 50, 0], //圆角边框
@@ -187,7 +187,7 @@ const getOption = () => {
               { offset: 0, color: "rgba(26, 255, 217, 0)" },
               { offset: 1, color: "rgba(0, 183, 255, 1)" },
             ]),
-          },
+          // },
         },
         label: {
           show: true,

src/view/work.vue

@@ -176,7 +176,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
+import { ref, reactive, onMounted, onBeforeMount,onBeforeUnmount, computed } from "vue";
 import eP1 from "./echarts_work/eP1.vue";
 import eP2 from "./echarts_work/eP2.vue";
 import eP3 from "./echarts_work/eP3.vue";
@@ -449,6 +449,8 @@ onMounted(() => {
 
 onBeforeMount(() => {
   getData();
+});
+onBeforeUnmount(() => {
   clearInterval(interval); //清除定时器
 });
 </script>