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

src/view/analyze.vue

@@ -58,13 +58,14 @@
         </div>
         <div class="minTopTitle"></div>
         <div class="minTopNum">
-          <div
+          <!-- <div
             class="numItem"
             v-for="(item, index) in minData.minTop"
             :key="index"
           >
             {{ item }}
-          </div>
+          </div> -->
+          <FlipClock :list="minData.minTop"></FlipClock>
         </div>
         <div style="overflow: hidden; margin-top: 20px">
           <div class="minPie">
@@ -155,6 +156,7 @@ import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
 import edxs from "./echart_analyze/edXS.vue";
 import eP2 from "./echart_analyze/eP2.vue";
 import ylXZZC from "./echart_analyze/ylXZZC.vue";
+import FlipClock from "./echart_analyze/FlipClock.vue";
 
 import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
 import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
@@ -267,7 +269,8 @@ const data = reactive({
   zccs2: ["100", "130", "220"], //一码通
 });
 const minData = reactive({
-  minTop: ["4", "9", "1", "6", "2", "人"],
+  minTop: 49162,
+  minTop1: ["4", "9", "1", "6", "2", "人"],
   minPieData1: {
     wfgz: "1500",
     xstp: "1610",

src/view/echart_analyze/FlipClock.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="flipbox">
+    <div class="clock" id="clock">
+      <div v-for="(digit, index) in digits" :key="index" class="flip down">
+        <div class="digital front number0"></div>
+        <div class="digital back number1"></div>
+      </div>
+    </div>
+    <div class="flip1">人</div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeMount, ref, reactive, defineProps } from "vue";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const data = reactive({
+  list: [],
+});
+
+class Flipper {
+  constructor(config) {
+    this.config = Object.assign(
+      {
+        node: null,
+        frontText: "number0",
+        backText: "number1",
+        duration: 200,
+      },
+      config
+    );
+
+    this.nodeClass = {
+      flip: "flip",
+      front: "digital front",
+      back: "digital back",
+    };
+
+    this.frontNode = this.config.node.querySelector(".front");
+    this.backNode = this.config.node.querySelector(".back");
+    this.isFlipping = false;
+    this._init();
+  }
+
+  _init() {
+    this._setFront(this.config.frontText);
+    this._setBack(this.config.backText);
+  }
+
+  _setFront(className) {
+    this.frontNode.setAttribute(
+      "class",
+      this.nodeClass.front + " " + className
+    );
+  }
+
+  _setBack(className) {
+    this.backNode.setAttribute("class", this.nodeClass.back + " " + className);
+  }
+
+  _flip(type, front, back) {
+    if (this.isFlipping) return;
+
+    this.isFlipping = true;
+    this._setFront(front);
+    this._setBack(back);
+
+    let flipClass = this.nodeClass.flip;
+    if (type === "down") flipClass += " down";
+
+    this.config.node.setAttribute("class", flipClass + " go");
+
+    setTimeout(() => {
+      this.config.node.setAttribute("class", flipClass);
+      this.isFlipping = false;
+      this._setFront(back);
+    }, this.config.duration);
+  }
+
+  flipDown(front, back) {
+    this._flip("down", front, back);
+  }
+}
+
+function updateCounter(flippers, number) {
+  const strNumber = number.toString().padStart(5, "0");
+  for (let i = 0; i < flippers.length; i++) {
+    const currentDigit = strNumber[i];
+    const flipper = flippers[i];
+    flipper.flipDown(`number${flipper.currentDigit}`, `number${currentDigit}`);
+    flipper.currentDigit = currentDigit;
+  }
+}
+
+const digits = ref([0, 0, 0, 0, 0]);
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    const flips = document.querySelectorAll(".flip");
+    const flipObjs = [];
+
+    for (let i = 0; i < flips.length; i++) {
+      flipObjs.push(
+        new Flipper({
+          node: flips[i],
+          frontText: "number0",
+          backText: "number0",
+        })
+      );
+      flipObjs[i].currentDigit = 0;
+    }
+
+    const randomNumbers = [2345, 6542, data.list];
+    let index = 0;
+
+    const interval = setInterval(() => {
+      if (index >= randomNumbers.length) {
+        clearInterval(interval);
+      } else {
+        updateCounter(flipObjs, randomNumbers[index]);
+        index++;
+      }
+    }, 333);
+  }, 600);
+});
+</script>
+
+<style scoped>
+.flip {
+  display: inline-block;
+  position: relative;
+  width: 66px;
+  height: 100px;
+  line-height: 100px;
+  border: solid 2px rgba(0, 183, 255, 1);
+  border-radius: 2px;
+  background: #fff;
+  font-size: 46px;
+  color: #fff;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  font-family: "Helvetica Neue";
+  margin-right: 5px;
+}
+
+.flipbox {
+  display: flex;
+}
+
+.flip1 {
+  display: inline-block;
+  width: 66px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 46px;
+  text-align: center;
+  font-family: "Helvetica Neue";
+  color: #fff;
+  background: rgba(7, 91, 123, 1);
+  border: solid 2px rgba(0, 183, 255, 1);
+}
+
+.flip .digital:before,
+.flip .digital:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.flip .digital:before {
+  top: 0;
+  bottom: 50%;
+  border-radius: 2px 2px 0 0;
+  background: rgba(7, 91, 123, 1);
+}
+
+.flip .digital:after {
+  top: 50%;
+  bottom: 0;
+  border-radius: 0 0 2px 2px;
+  line-height: 0;
+  background: rgba(3, 150, 187, 1);
+}
+
+.flip.down .front:before {
+  z-index: 3;
+}
+
+.flip.down .back:after {
+  z-index: 2;
+  transform-origin: 50% 0%;
+  transform: perspective(160px) rotateX(180deg);
+}
+
+.flip.down .front:after,
+.flip.down .back:before {
+  z-index: 1;
+}
+
+.flip.down.go .front:before {
+  transform-origin: 50% 100%;
+  animation: frontFlipDown 0.6s ease-in-out both;
+  box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
+  backface-visibility: hidden;
+}
+
+.flip.down.go .back:after {
+  animation: backFlipDown 0.6s ease-in-out both;
+}
+
+.flip.up .front:after {
+  z-index: 3;
+}
+
+.flip.up .back:before {
+  z-index: 2;
+  transform-origin: 50% 100%;
+  transform: perspective(160px) rotateX(-180deg);
+}
+
+.flip.up .front:before,
+.flip.up .back:after {
+  z-index: 1;
+}
+
+.flip.up.go .front:after {
+  transform-origin: 50% 0;
+  animation: frontFlipUp 0.6s ease-in-out both;
+  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
+  backface-visibility: hidden;
+}
+
+.flip.up.go .back:before {
+  animation: backFlipUp 0.6s ease-in-out both;
+}
+
+@keyframes frontFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+}
+
+@keyframes backFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+@keyframes frontFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+}
+
+@keyframes backFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+.flip .number0:before,
+.flip .number0:after {
+  content: "0";
+}
+
+.flip .number1:before,
+.flip .number1:after {
+  content: "1";
+}
+
+.flip .number2:before,
+.flip .number2:after {
+  content: "2";
+}
+
+.flip .number3:before,
+.flip .number3:after {
+  content: "3";
+}
+
+.flip .number4:before,
+.flip .number4:after {
+  content: "4";
+}
+
+.flip .number5:before,
+.flip .number5:after {
+  content: "5";
+}
+
+.flip .number6:before,
+.flip .number6:after {
+  content: "6";
+}
+
+.flip .number7:before,
+.flip .number7:after {
+  content: "7";
+}
+
+.flip .number8:before,
+.flip .number8:after {
+  content: "8";
+}
+
+.flip .number9:before,
+.flip .number9:after {
+  content: "9";
+}
+
+.clock {
+  text-align: center;
+}
+</style>

src/view/echarts_sy/pie.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 260px"></div>
+  <div ref="chart" style="width: 50%; height: 260px"></div>
 </template>
 
 <script setup>
@@ -172,51 +172,51 @@ const getOption1 = () => {
 const getOption = () => {
   data.option = {
     //你的代码
-    legend: [
+    // legend: [
-      {
+    //   {
-        orient: "vertical",
+    //     orient: "vertical",
-        right: "5%",
+    //     right: "10%",
-        top: "center",
+    //     top: "15%",
-        type: "scroll",
+    //     type: "scroll",
-        height: "80%",
+    //     height: "80%",
-        itemWidth: 20, // 可以设置图例标记的宽度
+    //     itemWidth: 20, // 可以设置图例标记的宽度
-        itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
+    //     itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
-        itemGap: 20,
+    //     itemGap: 20,
-        // itemStyle: {
+    //     // itemStyle: {
-        //   borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
+    //     //   borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
-        //   borderWidth: 10, // 图例边框宽度
+    //     //   borderWidth: 10, // 图例边框宽度
-        //   borderRadius: 20,
+    //     //   borderRadius: 20,
+    //     // },
+    //     pageTextStyle: {
+    //       color: "#ffffff",
+    //       fontSize: 14,
+    //       padding: 10,
     //     },
-        pageTextStyle: {
+    //     textStyle: {
-          color: "#ffffff",
+    //       color: "#ffffff",
-          fontSize: 14,
+    //       fontSize: 14,
-          padding: 10,
+    //       padding: 10,
-        },
+    //       rich: {
-        textStyle: {
+    //         name: {
-          color: "#ffffff",
+    //           width: 80,
-          fontSize: 14,
+    //           fontSize: 16,
-          padding: 10,
+    //         },
-          rich: {
+    //       },
-            name: {
+    //     },
-              width: 80,
+    //     data: data.list,
-              fontSize: 16,
-            },
-          },
-        },
-        data: data.list,
 
-        //格式化图例文本
+    //     //格式化图例文本
-        formatter: function (name) {
+    //     formatter: function (name) {
-          var target;
+    //       var target;
-          for (var i = 0, l = data.list.length; i < l; i++) {
+    //       for (var i = 0, l = data.list.length; i < l; i++) {
-            if (data.list[i].name == name) {
+    //         if (data.list[i].name == name) {
-              target = data.list[i].value;
+    //           target = data.list[i].value;
-            }
+    //         }
-          }
+    //       }
-            return `${name}：${target} 人`;
+    //         return `${name}：${target} 人`;
-        },
+    //     },
-      },
+    //   },
-    ],
+    // ],
     tooltip: {
       trigger: "item",
 
@@ -234,7 +234,7 @@ const getOption = () => {
         type: "pie",
         roseType: "radius",
         radius: ["15%", "90%"],
-        center: ["35%", "50%"],
+        center: ["45%", "40%"],
         label: {
           position: "inside",
           formatter(item) {
@@ -276,7 +276,7 @@ const getOption = () => {
         type: "pie",
         roseType: "radius",
         radius: ["15%", "92%"],
-        center: ["35%", "50%"],
+        center: ["45%", "40%"],
         label: {
           show: false,
         },

src/view/sy.vue

@@ -230,7 +230,22 @@
           </div>
         </div>
         <ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
+        <div class="bt">
           <ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
+          <div
+            class="btList"
+            ref="mainRef"
+            @mouseenter="stopAutoScroll"
+            @mouseleave="startAutoScroll"
+          >
+            <div class="btList_item" v-for="(item, index) in btList">
+              <div class="btList_item_color" :style="bt(index)"></div>
+              <div class="btList_item_value">
+                {{ item.name }}：{{ item.value }}
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="table">
           <div class="table_choose">
             <div
@@ -1054,48 +1069,6 @@ const data = reactive({
   ],
 });
 
-// const tableData = ref([
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: true,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: true,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: true,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-//   {
-//     company: "龙游县文旅集团",
-//     address: "龙游县五一单位",
-//     finish: false,
-//   },
-// ]);
 const jysyList = ref([
   {
     title: "县镇",
@@ -1233,9 +1206,25 @@ const getData = async () => {
           "nl91100",
           "nl100",
         ];
+        const ageBt = [
+          "nl110",
+          "nl1120",
+          "nl2130",
+          "nl3140",
+          "nl4150",
+          "nl5160",
+          "nl6170",
+          "nl7180",
+          "nl8190",
+          "nl91100",
+          "nl100",
+        ];
         ageGroupKeys.forEach((key) => {
           data.ageGroup[key] = res.data.rksj[key];
         });
+        ageBt.forEach((key, index) => {
+          btList.value[index].value = res.data.rksj[key];
+        });
       }
       // 年龄比例
       const ageRatioKeys = [
@@ -1335,9 +1324,6 @@ const qyfyList = reactive([
     img: qyfw4,
   },
 ]);
-onBeforeMount(async () => {
-  getData();
-});
 
 // 交通事业弹框
 const showEc = (val) => {
@@ -1428,6 +1414,107 @@ const showTab = (val) => {
       break;
   }
 };
+//自动滚动(饼图)
+//扇形图颜色数据
+const colorList = [
+  { color2: "rgba(90,255,223,1)" },
+  { color2: "rgba(115,255,145,1)" },
+  { color2: "rgba(153,255,179,1)" },
+  { color2: "rgba(193,255,138,1)" },
+  { color2: "rgba(255,207,74,1)" },
+  { color2: "rgba(254,178,128,1)" },
+  { color2: "rgba(151,176,255,1)" },
+  { color2: "rgba(164,151,255,1)" },
+  { color2: "rgba(159,110,254,1)" },
+  { color2: "rgba(180,143,241,1)" },
+  { color2: "rgba(76,174,254,1)" },
+];
+const bt = computed(() => {
+  return function (index) {
+    let str = `--i:${colorList[index].color2}`;
+    return str;
+  };
+});
+const btList = ref([
+  {
+    name: "1-10岁人口总数",
+    value: "",
+  },
+  {
+    name: "11-20岁人口总数",
+    value: "",
+  },
+  {
+    name: "21-30岁人口总数",
+    value: "",
+  },
+  {
+    name: "31-40岁人口总数",
+    value: "",
+  },
+  {
+    name: "41-50岁人口总数",
+    value: "",
+  },
+  {
+    name: "51-60岁人口总数",
+    value: "",
+  },
+  {
+    name: "61-70岁人口总数",
+    value: "",
+  },
+  {
+    name: "71-80岁人口总数",
+    value: "",
+  },
+  {
+    name: "81-90岁人口总数",
+    value: "",
+  },
+  {
+    name: "91-100岁人口总数",
+    value: "",
+  },
+  {
+    name: "100岁以上人口总数",
+    value: "",
+  },
+]);
+const mainRef = ref(null);
+let isAutoScrolling = true;
+
+const stopAutoScroll = () => {
+  isAutoScrolling = false;
+};
+
+const startAutoScroll = () => {
+  isAutoScrolling = true;
+  autoScroll();
+};
+
+const autoScroll = () => {
+  if (!isAutoScrolling) return;
+
+  const mainEl = mainRef.value;
+  mainEl.scrollTop += 1; // 每次滚动的距离
+
+  if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
+    setTimeout(() => {
+      mainEl.scrollTo({ top: 0, behavior: "smooth" });
+      setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
+    }, 1000); // 暂停1秒后开始快速滚回顶部
+  } else {
+    requestAnimationFrame(autoScroll);
+  }
+};
+onBeforeMount(async () => {
+  getData();
+  setTimeout(()=>{
+startAutoScroll();
+  },1000)
+  
+});
 </script>
 
 <style lang="scss" scoped>
@@ -2365,7 +2452,36 @@ const showTab = (val) => {
     }
   }
 }
+//饼图list
+.bt {
+  display: flex;
+  align-items: center;
+}
+.btList {
+  width: 45%;
+  height: 200px;
+  overflow-y: auto;
+  .btList_item {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 5px;
 
+    .btList_item_color {
+      width: 30px;
+      height: 10px;
+      background-color: var(--i);
+      border-radius: 3px;
+    }
+    .btList_item_value {
+      font-size: 18px;
+      margin-top: 5px;
+      color: #ffffff;
+    }
+  }
+}
+.btList::-webkit-scrollbar {
+  display: none;
+}
 .table {
   width: 94%;
   margin-left: 5px;