维权抚慰 数字滚动

src/views/datav/RightsComfort.vue

@@ -41,27 +41,27 @@
             <datav-date-picker v-model="time"/>
             <div class="flex gap-42">
               <datav-statistic
-                  :value="171"
+                  :value="temp.tempTotalCase"
                   title="维权案件总数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="121"
+                  :value="temp.tempVictimPer"
                   title="受侵害人数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="114"
+                  :value="temp.tempComfortPer"
                   title="抚慰人数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="205"
+                  :value="temp.tempHitPro"
                   title="打击处理人数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="28.1"
+                  :value="temp.tempComfortMon"
                   :title="`抚慰金额\n（万元）`"
                   :isDecimal="true"
                   style="width: 20%"
@@ -139,6 +139,26 @@ import * as echarts from "echarts/core";
 import {getRightsComfortData} from "@/api/datav";
 import moment from "moment";
 
+const temp = ref({
+  tempTotalCase: 0,
+  tempVictimPer: 0,
+  tempComfortPer: 0,
+  tempHitPro: 0,
+  tempComfortMon: 0,
+})
+
+setTimeout(() => {
+  temp.value={
+    tempTotalCase: 171,
+    tempVictimPer: 121,
+    tempComfortPer: 114,
+    tempHitPro: 205,
+    tempComfortMon: 28.1,
+  }
+}, 1000);
+
+
+
 echarts.registerMap("changsha", changshaMap);
 const time = ref([
   moment().startOf("year").format("YYYY-MM-DD"),
@@ -149,16 +169,98 @@ const hitPersonNumber = ref(28.1);
 const comfortMoney = ref(0.0);
 const punishmentSituationList = ref([]);
 const comfortSituationList = ref([]);
+let gobalTempMapVoList = [
+  {
+    "name": "岳麓分局",
+    "totalCase": 23,
+    "victimPer": "暂无",
+    "comfortPer": "19",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
+  {
+    "name": "芙蓉分局",
+    "totalCase": 20,
+    "victimPer": "暂无",
+    "comfortPer": "12",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
+  {
+    "name": "天心分局",
+    "totalCase": 20,
+    "victimPer": "暂无",
+    "comfortPer": "23",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
+  {
+    "name": "雨花分局",
+    "totalCase": 19,
+    "victimPer": "暂无",
+    "comfortPer": "16",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
+  {
+    "name": "浏阳市局",
+    "totalCase": 17,
+    "victimPer": "暂无",
+    "comfortPer": "30",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
+  {
+    "name": "宁乡市局",
+    "totalCase": 11,
+    "victimPer": "暂无",
+    "comfortPer": "0",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
+  {
+    "name": "开福分局",
+    "totalCase": 11,
+    "victimPer": "暂无",
+    "comfortPer": "4",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
+  {
+    "name": "望城分局",
+    "totalCase": 9,
+    "victimPer": "暂无",
+    "comfortPer": "0",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
+  {
+    "name": "长沙县局",
+    "totalCase": 9,
+    "victimPer": "暂无",
+    "comfortPer": "0",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
+  {
+    "name": "高新分局",
+    "totalCase": 4,
+    "victimPer": "暂无",
+    "comfortPer": "7",
+    "hitPro": "暂无",
+    "comfortMon": "暂无",
+  },
 
+];
 function getData() {
-  // getRightsComfortData(time.value).then((data) => {
+  getRightsComfortData(time.value).then((data) => {
-  //   console.log('Received data:', data); // 添加日志输出
+    console.log('Received data:', data); // 添加日志输出
-  //   comfortPersonNumber.value = data.comfortPersonNumber;
+    comfortPersonNumber.value = data.comfortPersonNumber;
-  //   hitPersonNumber.value = data.hitPersonNumber;
+    hitPersonNumber.value = data.hitPersonNumber;
-  //   comfortMoney.value = data.comfortMoney;
+    comfortMoney.value = data.comfortMoney;
-  //   punishmentSituationList.value = data.punishmentSituation;
+    punishmentSituationList.value = data.punishmentSituation;
-  //   comfortSituationList.value = data.comfortSituation;
+    comfortSituationList.value = data.comfortSituation;
-  // });
+  });
 }
 
 watch(time, () => {
@@ -167,29 +269,65 @@ watch(time, () => {
 onMounted(() => {
   getData();
 });
-const option = {
+const option = ref({
   geo: {
-    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
     map: "changsha",
-  },
 
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: function (params) {
+      console.log(params)
+      const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
+      if (dataItem) {
+        return `
+        <div class="tooltip">
+          <div class="tooltip-title">${dataItem.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul" >
+              <li>维权案件总数 <span>${dataItem.totalCase}</span></li>
+              <li>受侵害人数 <span>${dataItem.victimPer}</span></li>
+              <li>抚慰人数 <span>${dataItem.comfortPer}</span></li>
+              <li>打击处理人数 <span>${dataItem.hitPro}</span></li>
+              <li>抚慰金额 <span>${dataItem.comfortMon}</span></li>
+            </ul>
+          </div>
+        </div>`;
+      } else {
+        return `<div class="tooltip">
+          <div class="tooltip-title">${dataItem.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul"">
+              <li>维权案件数 <span>0</span></li>
+              <li>抚慰人数 <span>0</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
+    },
+    // backgroundColor: "#031577", //
+    // borderColor: "#0A2F86",
+    // borderWidth: 0, // 设置边框宽度为1像素
+    // borderRadius: 3, // 设置边框半径为3像素
+    // shadowBlur: 0, // 设置阴影模糊程度为8像素
+    // shadowOffsetX: 0, // 设置水平阴影位移量为0像素
+    // shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
+  },
   visualMap: {
     type: "piecewise",
     bottom: 10,
     pieces: [
-      {gte: 85, lte: 100, label: "数据数高于1000"},
+      { min: 0, max: 500, label: "问题数低于500" }, { min: 501, max: 1000, label: "问题数介于500-1000" }, { min: 1001, label: "问题数高于1000" },
-      {gte: 65, lte: 85, label: "问题数低于1000"},
-      {gte: 0, lte: 65, label: "问题数低于500"},
     ],
-    right: 10, // 右边距
+    right: 10,
     realtime: false,
-    orient: "horizontal", // 水平显示
+    orient: "horizontal",
     textStyle: {
-      color: "#fff", // 文字颜色
+      color: "#fff",
     },
     calculable: true,
     inRange: {
-      color: ["#4987F6", "#F6A149", "#D34343"],
+      color: ["#4987F6", "#F6A149", "#D34343",],
     },
   },
   series: [
@@ -198,23 +336,28 @@ const option = {
       type: "map",
       map: "changsha",
       hoverAnimation: true,
-      emphasis: {
-        areaColor: "#FFD700", // 高亮时区域颜色
-        borderColor: "#FF0000", // 高亮时边框颜色
-        borderWidth: 4 // 高亮时边框宽度
-      },
       label: {
         show: true,
         color: "white",
       },
       itemStyle: {
         normal: {
-          areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
+          areaColor: "#02215E",
+          borderColor: "#1773c3",
         },
       },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
       },
+      data: gobalTempMapVoList.map(item => ({
+        name: item.name,
+        value: item.totalPro  // 将 totalPro 值映射到 value 字段
+      }))
+    }
   ],
-};
+})
 
 const option1 = ref({
   xAxis: {
@@ -501,6 +644,108 @@ const colors = [
 ];
 
 </script>
+
+
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
+
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 169.88px;
+    height: 170px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    border: 1px solid #4E8FFF;
+    margin: -10px -10px -10px -10px;
+  }
+
+  //浏阳市局
+  .tooltip-title {
+    width: 169.88px;
+    height: 43px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    text-align: center; /* 水平居中 */
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    line-height: 22px;
+    border-bottom: 1px solid #253755; /* 设置下边框 */
+  }
+
+
+  .tooltip-content {
+    width: 170px;
+    height: 132px;
+    //font-size: 11px;
+    margin-top: -12px;
+    background: linear-gradient(180deg, #010457 0%, #031577 100%);
+  }
+
+  .tooltip-content ul {
+    list-style-type: none; /* 移除默认的小圆点 */
+    padding: 0;
+
+  }
+
+  .tooltip-content ul li {
+    margin-left: 5px;
+    height: 25px;
+    color: #597AE9;
+    font-size: 13px;
+  }
+
+
+  // 数字的span
+  .tooltip-ul span {
+    float: right;
+    width: 50px;
+    text-align: right;
+    margin-right: 35px;
+    color: #fff;
+    font-size: 13px;
+  }
+
+
+  /* 小尖角 */
+  .tooltip::before {
+    content: '';
+    position: absolute;
+    top: 90px; /* 调整尖角的垂直位置 */
+    left: -10px; /* 调整尖角的水平位置 */
+    width: 0;
+    height: 0;
+    //border-top: 10px solid red; /* 顶边颜色 */
+    //border-bottom: 10px solid green; /* 底边颜色 */
+    //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
+  }
+
+
+}
+
+.test {
+  width: 95px;
+  height: 25px;
+  background: #1C3472;
+}
+
+.gobal-dropdown-container {
+  position: absolute;
+  right: 20px;
+  top: 15px;
+}
+
+.my-gobal-yearselect {
+  font-size: 14px;
+  padding-top: 6px;
+  padding-left: 20px;
+  width: 90px;
+  color: #fff;
+}
+
+
 </style>