reactor:宜宾司法大屏改造

src/views/judicial/center-map.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="center-map">
+  <div class="center-map" ref="mapContainer">
     <v-chart
       class="chart"
       :option="option"
@@ -7,13 +7,63 @@
       :loading="loading"
       :loading-options="loadingOptions"
     />
+    <div ref="tooltipBox" class="custom-tooltip-box" v-show="showTip">
+      <div class="custom-tooltip-style">
+        <div class="custom-tooltip-name">
+          <span class="custom-tooltip-arrow"></span>{{ currentSelectData.name }}
+        </div>
+        <div class="custom-tooltip-style-box">
+          <div class="custom-tooltip-style-box-text">
+            <div class="custom-tooltip-style-box-text-item">
+              <span class="custom-tooltip-style-box-text-item-title"
+                >工单量：</span
+              ><span class="custom-tooltip-style-box-text-item-value">{{
+                currentSelectData.orderCountNum
+              }}</span>
+              <b> 件</b>
+            </div>
+            <div class="custom-tooltip-style-box-text-item">
+              <span class="custom-tooltip-style-box-text-item-title"
+                >行政执法工单：</span
+              ><span class="custom-tooltip-style-box-text-item-value">{{
+                currentSelectData.enforcementOrderNum
+              }}</span>
+              <b> 件</b>
+            </div>
+            <div class="custom-tooltip-style-box-text-item">
+              <span class="custom-tooltip-style-box-text-item-title"
+                >线索属实工单：</span
+              ><span class="custom-tooltip-style-box-text-item-value">{{
+                currentSelectData.theClueIsTrueNum
+              }}</span>
+              <b> 件</b>
+            </div>
+            <div class="custom-tooltip-style-box-text-item">
+              <span class="custom-tooltip-style-box-text-item-title"
+                >线索不属实工单：</span
+              ><span class="custom-tooltip-style-box-text-item-value">{{
+                currentSelectData.theClueIsNotTrueNum
+              }}</span>
+              <b> 件</b>
+            </div>
+            <div class="custom-tooltip-style-box-text-item">
+              <span class="custom-tooltip-style-box-text-item-title"
+                >推诿工单：</span
+              ><span class="custom-tooltip-style-box-text-item-value">{{
+                currentSelectData.passTheBuckOrderNum
+              }}</span>
+              <b> 件</b>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch, nextTick } from "vue";
-import { registerMap, getMap } from "echarts/core";
+import { nextTick, onMounted, ref, watch } from "vue";
+import { getMap, registerMap } from "echarts/core";
 import { optionHandle } from "./center.map";
-import { loopShowTooltip } from "@/utils/tooltip-auto-show";
 import axios from "axios";
 import dayjs from "dayjs";
 import { loadingOptions } from "@/utils/constants";
@@ -99,26 +149,30 @@ const getData = async () => {
     loading.value = false;
   }
 };
-const tooltipTimer = ref<any>(null);
 const centerMapRef = ref<any>(null);
-const tooltipMap = (myChart, option) => {
-  tooltipTimer.value && tooltipTimer.value.clearLoop(); // this.tooltipTimer 在data里定义
-  tooltipTimer.value = 0;
-  // 调用轮播的方法
-  // myChart为Echarts容器实例
-  tooltipTimer.value = loopShowTooltip(myChart, option, {
-    interval: 5000, // 轮播间隔时间
-    loopSeries: false, // 是否开启轮播循环
-    seriesIndex: 0, // 开始轮播的系列索引
-    // shunXu: "daoXu", // 显示顺序
-    // loopSeries: boolean类型，默认为false。true表示循环所有series的tooltip；false则显示指定seriesIndex的tooltip。
-    // seriesIndex: 默认为0，指定某个系列（option中的series索引）循环显示tooltip，当loopSeries为true时，从seriesIndex系列开始执行。
-  });
-};
+const currentSelectData = ref<EmptyObjectType>({}); // 选中的数据
+const showTip = ref(false); // 是否显示提示框
+const mapContainer = ref(null);
+const tooltipBox = ref(null);
 onMounted(async () => {
   await getData();
-  await nextTick(() => {
-    tooltipMap(centerMapRef.value!.chart, option.value);
+  const series = centerMapRef.value.chart?.getOption().series[0];
+  const data = series?.data;
+  centerMapRef.value.chart.on("selectchanged", (params: any) => {
+    if (params.fromAction === "select") {
+      const selected = params.selected;
+      const dataIndex = selected[0].dataIndex[0];
+      currentSelectData.value = data[dataIndex];
+    } else {
+      currentSelectData.value = {};
+    }
+  });
+  centerMapRef.value.chart.on("click", async (params: any) => {
+    showTip.value = !!currentSelectData.value.name;
+    await nextTick();
+    console.log(tooltipBox.value, mapContainer.value, "11");
+    tooltipBox.value.style.left = `10px`;
+    tooltipBox.value.style.bottom = `10px`;
   });
 });
 </script>
@@ -136,10 +190,11 @@ onMounted(async () => {
   padding: 0 !important;
   border: none !important;
   background-color: transparent !important;
+  position: absolute;
   // 给子盒子自定义样式
   .custom-tooltip-style {
     width: 355px;
-    height: 219px;
+    height: 259px;
     background-image: url("@/assets/img/home/tool_tip_bg.png");
     background-size: 100% 100%;
     color: #fff;

src/views/judicial/center.map.ts

@@ -1,54 +1,61 @@
-import {getImageUrl} from "@/utils/tools";
+import { getImageUrl } from "@/utils/tools";
 
 const arrow = new Image();
 arrow.src = getImageUrl("home/map_select.png");
-export const optionHandle = (regionCode: string,
-                             list: object[]) => {
-    return {
-        backgroundColor: "rgba(0,0,0,0)",
-        tooltip: {
-            trigger: 'item',
-            position: function (point: any[], params: any, dom: any, rect: any, size: any) {
-                let x = 0; // x坐标位置
-                let y = 0; // y坐标位置
-                // 当前鼠标位置
-                const pointX = point[0];
-                const pointY = point[1];
-                // 提示框大小
-                const boxWidth = size.contentSize[0];
-                const boxHeight = size.contentSize[1];
+export const optionHandle = (regionCode: string, list: object[]) => {
+  return {
+    backgroundColor: "rgba(0,0,0,0)",
+    /*    tooltip: {
+      trigger: "item",
+      position: function (
+        point: any[],
+        params: any,
+        dom: any,
+        rect: any,
+        size: any
+      ) {
+        let x = 0; // x坐标位置
+        let y = 0; // y坐标位置
+        // 当前鼠标位置
+        const pointX = point[0];
+        const pointY = point[1];
+        // 提示框大小
+        const boxWidth = size.contentSize[0];
+        const boxHeight = size.contentSize[1];
 
-                // boxWidth > pointX 说明鼠标左边放不下提示框
-                if (boxWidth > pointX) {
-                    x = pointX + 10;
-                } else { // 左边放的下
-                    x = pointX - boxWidth - 10;
-                }
+        // boxWidth > pointX 说明鼠标左边放不下提示框
+        if (boxWidth > pointX) {
+          x = pointX + 10;
+        } else {
+          // 左边放的下
+          x = pointX - boxWidth - 10;
+        }
 
-                // boxHeight > pointY 说明鼠标上边放不下提示框
-                if (boxHeight > pointY) {
-                    y = 5;
-                } else { // 上边放得下
-                    y = pointY - boxHeight;
-                }
-                return [x, y];
-            },
-            show: true,
-            textStyle: {
-                fontSize: 14,
-                color: '#fff',
-            },
-            className: 'custom-tooltip-box',
-            rich: {
-                arrow: {
-                    backgroundColor: {
-                        image: getImageUrl("home/tool_tip_arrow.png")
-                    },
-                }
-            },
-            formatter: function (params: any) {
-                let tipHtml = '';
-                tipHtml = `
+        // boxHeight > pointY 说明鼠标上边放不下提示框
+        if (boxHeight > pointY) {
+          y = 5;
+        } else {
+          // 上边放得下
+          y = pointY - boxHeight;
+        }
+        return [x, y];
+      },
+      show: true,
+      textStyle: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      className: "custom-tooltip-box",
+      rich: {
+        arrow: {
+          backgroundColor: {
+            image: getImageUrl("home/tool_tip_arrow.png"),
+          },
+        },
+      },
+      formatter: function (params: any) {
+        let tipHtml = "";
+        tipHtml = `
                     <div class="custom-tooltip-style">
                         <div class='custom-tooltip-name'> <span class="custom-tooltip-arrow"></span> ${params.name}</div>
                         <div class='custom-tooltip-style-box'>
@@ -61,121 +68,119 @@ export const optionHandle = (regionCode: string,
                             </div>
                         </div>
                     </div>
-                `
-                return tipHtml;
-            },
+                `;
+        return tipHtml;
+      },
+    },*/
+    geo: [
+      {
+        layoutCenter: ["50%", "50%"], //位置
+        layoutSize: "180%", //大小
+        show: true,
+        map: regionCode,
+        roam: false,
+        zoom: 0.65,
+        aspectScale: 1,
+        label: {
+          show: false,
         },
-        geo: [
-            {
-                layoutCenter: ['50%', '50%'],//位置
-                layoutSize: '180%',//大小
-                show: true,
-                map: regionCode,
-                roam: false,
-                zoom: 0.65,
-                aspectScale: 1,
-                label: {
-                    show: false,
-                },
-                itemStyle: {
-                    areaColor: {
-                        type: "linear",
-                        x: 1200,
-                        y: 0,
-                        x2: 0,
-                        y2: 0,
-                        colorStops: [{
-                            offset: 0,
-                            color: "rgba(38,134,132,0.35)", // 0% 处的颜色
-                        }, {
-                            offset: 1,
-                            color: "rgba(38,134,132,0.75)", // 50% 处的颜色
-                        },],
-                        global: true, // 缺省为 false
-                    },
-                    borderColor: "#c0f3fb",
-                    borderWidth: 1,
-                    shadowColor: "#8cd3ef",
-                    shadowOffsetY: 10,
-                    shadowBlur: 120,
-                }
-            },
-            {
-                type: "map",
-                map: regionCode,
-                aspectScale: 1,
-                zoom: 0.65,
-                layoutCenter: ["50%", "54%"],
-                layoutSize: "180%",
-                roam: false,
-                silent: true,
-                itemStyle: {
-                    borderWidth: 2,
-                    borderColor: "rgba( 38,134,132,0.8)",
-                    shadowColor: "rgba(29, 111, 165,0.8)",
-                    shadowOffsetY: 10,
-                    shadowBlur: 2,
-                    areaColor: "rgba(5,21,35,0.2)",
-                    borderType: "dashed",
-                },
-            },
-        ],
-        geo3D: [
-            {
-                show: false,
-                map: regionCode,
-                aspectScale: 1,
-            }
-        ],
-        series: [
-            {
-                type: "map",
-                map: regionCode, // 自定义扩展图表类型
-                aspectScale: 1,
-                zoom: 0.65,
-                showLegendSymbol: true,
-                boxDepth: 120, //地图倾斜度
-                regionHeight: 3, //地图厚度
-                label: {
-                    show: false,
-                },
-                itemStyle: {
-                    color: "rgba( 73,122,105,.3)",
-                    borderColor: "#3CFFFD",
-                    borderWidth: 1,
-                    areaColor: {
-                        color: "rgba( 73,122,105,.3)",
-                    }
-
-                },
-                emphasis: { // 选中的样式
-                    label: {
-                        formatter: [
-                            '{b|}',
-                        ].join('\n'),
-
-                        rich: {
-                            b: {
-                                backgroundColor: {
-                                    image: arrow,
-                                },
-                                height: 60
-                            },
-                        }
-                    },
-                    itemStyle: {
-                        borderColor: "rgba( 62, 254, 254,.3)",
-                        borderWidth: 2,
-                        areaColor: 'rgba( 62, 254, 254,.3)',
-                    }
-                },
-                layoutCenter: ["50%", "50%"],
-                layoutSize: "180%",
-                data: list,
-                select: {
-                    disabled: true,
+        itemStyle: {
+          areaColor: {
+            type: "linear",
+            x: 1200,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(38,134,132,0.35)", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "rgba(38,134,132,0.75)", // 50% 处的颜色
+              },
+            ],
+            global: true, // 缺省为 false
+          },
+          borderColor: "#c0f3fb",
+          borderWidth: 1,
+          shadowColor: "#8cd3ef",
+          shadowOffsetY: 10,
+          shadowBlur: 120,
+        },
+      },
+      {
+        type: "map",
+        map: regionCode,
+        aspectScale: 1,
+        zoom: 0.65,
+        layoutCenter: ["50%", "54%"],
+        layoutSize: "180%",
+        roam: false,
+        silent: true,
+        itemStyle: {
+          borderWidth: 2,
+          borderColor: "rgba( 38,134,132,0.8)",
+          shadowColor: "rgba(29, 111, 165,0.8)",
+          shadowOffsetY: 10,
+          shadowBlur: 2,
+          areaColor: "rgba(5,21,35,0.2)",
+          borderType: "dashed",
+        },
+      },
+    ],
+    geo3D: [
+      {
+        show: false,
+        map: regionCode,
+        aspectScale: 1,
+      },
+    ],
+    series: [
+      {
+        type: "map",
+        map: regionCode, // 自定义扩展图表类型
+        aspectScale: 1,
+        zoom: 0.65,
+        showLegendSymbol: true,
+        boxDepth: 120, //地图倾斜度
+        regionHeight: 3, //地图厚度
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          color: "rgba( 73,122,105,.3)",
+          borderColor: "#3CFFFD",
+          borderWidth: 1,
+          areaColor: {
+            color: "rgba( 73,122,105,.3)",
+          },
+        },
+        emphasis: {
+          // 选中的样式
+          label: {
+            formatter: ["{b|}"].join("\n"),
+            rich: {
+              b: {
+                backgroundColor: {
+                  image: arrow,
                 },
+                height: 60,
+              },
             },
-        ],
-    };
-}
+          },
+          itemStyle: {
+            /*            borderColor: "rgba( 62, 254, 254,.3)",
+            borderWidth: 2,
+            areaColor: "rgba( 62, 254, 254,.3)",*/
+          },
+        },
+        layoutCenter: ["50%", "50%"],
+        layoutSize: "180%",
+        data: list,
+        selectedMode: "single", // 只允许单选
+      },
+    ],
+  };
+};