From 04180f31422be2bb733d69418383e4d430a04d84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E7=88=B1=E5=AD=A6=E4=B9=A0=E7=9A=84=E7=9F=B3?=
 =?UTF-8?q?=E5=90=8C=E5=AD=A6?= <2936013465@qq.com>
Date: Mon, 18 Nov 2024 23:26:11 +0800
Subject: [PATCH] ok

---
 src/components/datav/header.vue |   2 +-
 src/views/Home.vue              |   2 +-
 src/views/datav/AuditSuper.vue  |  15 +-
 src/views/datav/Gobal.vue       |   8 +-
 src/views/datav/MailVisits.vue  | 119 +++--
 src/views/datav/VideoInsp.vue   | 921 ++++++++++++++++++++------------
 6 files changed, 661 insertions(+), 406 deletions(-)

diff --git a/src/components/datav/header.vue b/src/components/datav/header.vue
index 9075dd4..9be6d47 100644
--- a/src/components/datav/header.vue
+++ b/src/components/datav/header.vue
@@ -18,7 +18,7 @@
         <div  @click="goToBaidu">
           <router-link to="" v-slot="{ isActive }">
             <span>民意感知</span>
-            <img :src="isActive ? Img2 : Img1" alt=""/>
+            <img :src="Img1" alt=""/>
           </router-link>
         </div>
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2422b78..28620a0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -57,7 +57,7 @@ flowNumberAndTodayNumber().then(data => {
     flowNumber.value = data.flowNumber;
     todayNumber.value = data.todayNumber;
 })
-const links = ['警务评议', '视频督察', '情指行', '执法办案']
+const links = ['民意感知', '视频督察', '情指行', '执法办案']
 
 const router = useRouter()
 function goQuery(item) {
diff --git a/src/views/datav/AuditSuper.vue b/src/views/datav/AuditSuper.vue
index 7dd6df4..95e61bc 100644
--- a/src/views/datav/AuditSuper.vue
+++ b/src/views/datav/AuditSuper.vue
@@ -15,6 +15,7 @@
                     unit="%"
                     remark-font-size="12px"
                     spanClass="right-aligned"
+                    :color="colors"
 
                 />
               </el-scrollbar>
@@ -581,16 +582,20 @@ const option22 = {
 
 const colors = [
   {
-    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
-    percentage: 80,
+    // 绿色
+    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
+    percentage: 90,
   },
   {
+    // 黄色
     color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
-    percentage: 60,
+    percentage: 80,
   },
   {
-    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
-    percentage: 40,
+
+    // 红色
+    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
+    percentage: 70,
   },
 ];
 
diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue
index ca321c5..bd249e1 100644
--- a/src/views/datav/Gobal.vue
+++ b/src/views/datav/Gobal.vue
@@ -186,8 +186,6 @@ const option = ref({
               <li>督察问题 <span>${dataItem.supervisePro}</span></li>
               <li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li>
               <li>信访投诉问题 <span>${dataItem.mailPro}</span></li>
-              <li>民意感知问题 <span>${dataItem.policePro}</span></li>
-              <li>审计监督问题 <span>${dataItem.reviewPro}</span></li>
             </ul>
           </div>
         </div>`;
@@ -200,8 +198,6 @@ const option = ref({
               <li>督察问题 <span>0</span></li>
               <li>案件核查问题 <span>0</span></li>
               <li>信访投诉问题 <span>0</span></li>
-              <li>民意感知问题 <span>0</span></li>
-              <li>审计监督问题 <span>0</span></li>
             </ul>
           </div>
         </div>`;
@@ -450,7 +446,7 @@ const colors = [
   .tooltip {
     position: relative;
     width: 169.88px;
-    height: 198px;
+    height: 168px;
     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;
@@ -475,7 +471,7 @@ const colors = [
 
   .tooltip-content {
     width: 170px;
-    height: 155.8px;
+    height: 120px;
     //font-size: 11px;
     margin-top: -12px;
     background: linear-gradient(180deg, #010457 0%, #031577 100%);
diff --git a/src/views/datav/MailVisits.vue b/src/views/datav/MailVisits.vue
index 035e68c..d3c9f4a 100644
--- a/src/views/datav/MailVisits.vue
+++ b/src/views/datav/MailVisits.vue
@@ -93,7 +93,6 @@
               />
               <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                 <div class="tab-title-item active">
-                  暂无数据
                 </div>
               </div>
             </datav-card>
@@ -218,7 +217,6 @@
               />
               <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                 <div class="tab-title-item active">
-                  暂无数据
                 </div>
               </div>
             </datav-card>
@@ -245,13 +243,59 @@ import moment from "moment/moment.js";
 echarts.registerMap("changsha", changshaMap);
 let gobalTempMapVoList = [
   {
+    "name": "芙蓉分局",
+    "total": 704,
+    "countryTotal": 153,
+    "policeTotal": 506,
+    "numTotal": 45,
+  }, {
     "name": "天心分局",
-    "totalPro": 11,
-    "supervisePro": 11,
-    "caseVerifyPro": 11,
-    "mailPro": 11,
-    "policePro": 11,
-    "reviewPro": 11
+    "total": 700,
+    "countryTotal": 150,
+    "policeTotal": 483,
+    "numTotal": 67,
+  }, {
+    "name": "岳麓分局",
+    "total": 609,
+    "countryTotal": 94,
+    "policeTotal": 462,
+    "numTotal": 53,
+  }, {
+    "name": "开福分局",
+    "total": 392,
+    "countryTotal": 108,
+    "policeTotal": 224,
+    "numTotal": 60,
+  }, {
+    "name": "雨花分局",
+    "total": 886,
+    "countryTotal": 204,
+    "policeTotal": 601,
+    "numTotal": 81,
+  }, {
+    "name": "望城分局",
+    "total": 273,
+    "countryTotal": 22,
+    "policeTotal": 224,
+    "numTotal": 27,
+  }, {
+    "name": "浏阳市局",
+    "total": 335,
+    "countryTotal": 34,
+    "policeTotal": 261,
+    "numTotal": 40,
+  }, {
+    "name": "宁乡市局",
+    "total": 309,
+    "countryTotal": 16,
+    "policeTotal": 267,
+    "numTotal": 26,
+  }, {
+    "name": "长沙县局",
+    "total": 422,
+    "countryTotal": 75,
+    "policeTotal": 303,
+    "numTotal": 44,
   }
 ];
 const option = ref({
@@ -270,11 +314,11 @@ const option = ref({
           <div class="tooltip-title">${dataItem.name}</div>
           <div class="tooltip-content">
             <ul class="tooltip-ul" >
-              <li>信访总件数 <span>${dataItem.totalPro}</span></li>
-              <li>国家信访 <span>${dataItem.supervisePro}</span></li>
-              <li>公安部信访 <span>${dataItem.caseVerifyPro}</span></li>
-              <li>局长信箱 <span>${dataItem.mailPro}</span></li>
-              <li>12337信访 <span>${dataItem.policePro}</span></li>
+              <li>信访总件数 <span>${dataItem.total}</span></li>
+              <li>国家信访 <span>${dataItem.countryTotal}</span></li>
+              <li>公安部信访 <span>${dataItem.policeTotal}</span></li>
+
+              <li>12337信访 <span>${dataItem.numTotal}</span></li>
             </ul>
           </div>
         </div>`;
@@ -286,7 +330,7 @@ const option = ref({
               <li>信访总件数 <span>0</span></li>
               <li>国家信访 <span>0</span></li>
               <li>公安部信访 <span>0</span></li>
-              <li>局长信箱 <span>0</span></li>
+
               <li>12337信访 <span>0</span></li>
             </ul>
           </div>
@@ -404,17 +448,26 @@ const option2 = {
         color: "#fff",
       },
       data: [
-        // {value: 311, name: "慢作为"},
-        // {value: 735, name: "意见建议"},
-        // {value: 580, name: "违法违纪违规"},
-        // {value: 484, name: "乱作为"},
-        // {value: 300, name: "其他"},
-        // {value: 300, name: "不作为"},
+        {value: 1282, name: "不作为"},
+        {value: 426, name: "求助咨询"},
+        {value: 284, name: "乱作为"},
+        {value: 131, name: "其他"},
+        {value: 95, name: "违法违纪违规"},
+        {value: 72, name: "慢作为"},
+        {value: 24, name: "意见建议"},
+        {value: 5, name: "纪律作风"},
+
       ],
     },
   ],
+  tooltip: {
+    trigger: "item",
+  },
 };
 const option3 = {
+  tooltip: {
+    trigger: "item",
+  },
   series: [
     {
       type: "pie",
@@ -423,12 +476,10 @@ const option3 = {
         color: "#fff",
       },
       data: [
-        // {value: 21, name: "其他"},
-        // {value: 33, name: "通报批评"},
-        // {value: 56, name: "责令检查"},
-        // {value: 31, name: "考核降级"},
-        // {value: 120, name: "组织处理"},
-        // {value: 32, name: "党纪处分"},
+        {value: 10, name: "通报批评"},
+        {value: 2, name: "责令检查"},
+        {value: 1, name: "诫勉谈话"},
+        {value: 1, name: "批评教育"},
       ],
     },
   ],
@@ -473,21 +524,17 @@ const time = ref([
 ]);
 
 
-
-const temp1=[{
-  label:'张三',
+const temp1 = [{
+  label: '张三',
   value: '1'
 }]
 
-const temp2=[{
-  label:'李四',
+const temp2 = [{
+  label: '李四',
   value: '1'
 }]
 
 
-
-
-
 /**
  * 信访趋势
  * @type {Ref<UnwrapRef<string>, UnwrapRef<string> | string>}
@@ -630,9 +677,6 @@ const colors = [
 }
 
 
-
-
-
 :deep() {
   // 弹框整体
   .tooltip {
@@ -711,5 +755,4 @@ const colors = [
 }
 
 
-
 </style>
\ No newline at end of file
diff --git a/src/views/datav/VideoInsp.vue b/src/views/datav/VideoInsp.vue
index cbd6c6c..8aeed69 100644
--- a/src/views/datav/VideoInsp.vue
+++ b/src/views/datav/VideoInsp.vue
@@ -1,167 +1,160 @@
 <template>
-    <el-scrollbar height="100vh">
-        <div class="wrapper">
-            <datav-header />
-            <main>
-                <el-row :gutter="16">
-                    <el-col :span="6">
-                        <datav-card title="内部视频">
-                            <div class="row mt-4 mb-20">
-                                <div class="col col-8">
-                                    <label>视频总数</label>
-                                    <span>107</span>
-                                </div>
-                                <div class="col col-8">
-                                    <label>在线数</label>
-                                    <span>97</span>
-                                </div>
-                                <div class="col col-8">
-                                    <label>在线率</label>
-                                    <span>91%</span>
-                                </div>
-                            </div>
-                            <div class="mb-12">
-                                <video
-                                    width="100%"
-                                    height="250"
-                                    controls="controls"
-                                    autoplay
-                                >
-                                    <source src="/mp4/1.mp4" type="video/ogg" />
-                                </video>
-                            </div>
-                            <el-row :gutter="12">
-                                <el-col :span="8">
-                                    <img src="/imgs/datav/1.png" class="active" alt="" />
-                                </el-col>
-                                <el-col :span="8">
-                                    <img src="/imgs/datav/2.jpg" alt="" />
-                                </el-col>
-                                <el-col :span="8">
-                                    <img src="/imgs/datav/3.jpeg" alt="" />
-                                </el-col>
-                            </el-row>
-                        </datav-card>
-                        <datav-card title="问题数排名">
-                            <datav-chart-bar
-                                sub-title="问题数"
-                                :data="data1"
-                                :max="11"
-                            />
-                            <div
-                                class="flex tab-title flex center mt-20"
-                                style="margin-bottom: 20px"
-                            >
-                                <div class="tab-title-item active">
-                                    分县市局
-                                </div>
-                                <div class="tab-title-item">局属单位</div>
-                            </div>
-                        </datav-card>
-                    </el-col>
-                    <el-col :span="12">
-                        <div class="datav-col">
-                            <label for="">统计周期：</label>
-                            <span>2024年01月01日 - 2024年08月30日</span>
-                        </div>
-                        <div class="flex gap-42">
-                            <datav-statistic
-                                :value="98"
-                                title="发现问题数"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="10"
-                                title="整改问题数"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="22"
-                                title="涉及单位数"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="121"
-                                title="涉及人数"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="10"
-                                value-unit="%"
-                                title="整改率"
-                                style="width: 20%"
-                            />
-                        </div>
-                        <v-charts
-                            style="height: 420px"
-                            :option="option"
-                            autoresize
-                        />
-                        <datav-card title="问题趋势">
-                            <v-charts
-                                style="height: 250px"
-                                :option="option1"
-                                autoresize
-                            />
-                        </datav-card>
-                    </el-col>
-                    <el-col :span="6">
-                        <datav-card title="实时预警">
-                            <el-scrollbar height="450px">
-                                <div class="message message-error">
-                                    <div class="message-title">待处理</div>
-                                    <div>
-                                      芙蓉-定王台-办案区-询（讯）问室 （湖南省长沙市公安局芙蓉分局定王台派出所 ） &emsp; “民警单人询（讯）问”的违规问题
-                                    </div>
-                                    <div class="message-footer flex between">
-                                        <span>芙蓉分局定王台派出所</span>
-                                        <span>2024-11-11 19:16</span>
-                                    </div>
-                                </div>
-                                <div class="message message-info">
-                                    <div class="message-title">待处理</div>
-                                    <div>
-                                      望城-管理中心-办案区-询问室（湖南省长沙市望城区公安局法制大队）&emsp; 民警单人询（讯）问”的违规问题。
-                                    </div>
-                                    <div class="message-footer flex between">
-                                        <span>望城区公安局法制大队</span>
-                                        <span>2024-11-18 11:12</span>
-                                    </div>
-                                </div>
-                                <div class="message">
-                                    <div class="message-title">待处理</div>
-                                    <div>
-                                      执法办案中心-询问室7（湖南省长沙市公安局芙蓉分局蓉园派出所） &emsp;同时讯（询）问多名嫌疑对象
-                                    </div>
-                                    <div class="message-footer flex between">
-                                        <span>芙蓉分局蓉园派出所</span>
-                                        <span>2024-11-14 10:00</span>
-                                    </div>
-                                </div>
-                              <div class="message">
-                                <div class="message-title">待处理</div>
-                                <div>
-                                  开福-直属-执法办案管理-讯询问室（湖南省长沙市公安局开福分局法制大队） &emsp;“民警单人询（讯）问”的违规问题
-                                </div>
-                                <div class="message-footer flex between">
-                                  <span>开福分局法制大队</span>
-                                  <span>2024-11-15 15:51</span>
-                                </div>
-                              </div>
-                            </el-scrollbar>
-                        </datav-card>
-                        <datav-card title="问题类型占比">
-                            <v-charts
-                                style="height: 300px"
-                                :option="option2"
-                                autoresize
-                            />
-                        </datav-card>
-                    </el-col>
-                </el-row>
-            </main>
-        </div>
-    </el-scrollbar>
+  <el-scrollbar height="100vh">
+    <div class="wrapper">
+      <datav-header/>
+      <main>
+        <el-row :gutter="16">
+          <el-col :span="6">
+            <datav-card title="内部视频">
+              <div class="row mt-4 mb-20">
+                <div class="col col-8">
+                  <label>视频总数</label>
+                  <span>107</span>
+                </div>
+                <div class="col col-8">
+                  <label>在线数</label>
+                  <span>97</span>
+                </div>
+                <div class="col col-8">
+                  <label>在线率</label>
+                  <span>91%</span>
+                </div>
+              </div>
+              <div class="mb-12">
+                <video
+                    width="100%"
+                    height="250"
+                    controls="controls"
+                    autoplay
+                >
+                  <source src="/mp4/1.mp4" type="video/ogg"/>
+                </video>
+              </div>
+              <el-row :gutter="12">
+                <el-col :span="8">
+                  <img src="/imgs/datav/1.png" class="active" alt=""/>
+                </el-col>
+                <el-col :span="8">
+                  <img src="/imgs/datav/2.jpg" alt=""/>
+                </el-col>
+                <el-col :span="8">
+                  <img src="/imgs/datav/3.jpeg" alt=""/>
+                </el-col>
+              </el-row>
+            </datav-card>
+            <datav-card title="问题数排名" style="height: 370px;">
+              <datav-chart-bar
+                  sub-title="问题数"
+                  :data="data1"
+                  :max="11"
+                  :color="colors"
+              />
+
+            </datav-card>
+          </el-col>
+          <el-col :span="12">
+            <div class="datav-col">
+              <label for="">统计周期：</label>
+              <span>2024年01月01日 - 2024年08月30日</span>
+            </div>
+            <div class="flex gap-42">
+              <datav-statistic
+                  :value="135"
+                  title="发现问题数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="135"
+                  title="整改问题数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="89"
+                  title="涉及单位数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="152"
+                  title="涉及人数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="100"
+                  value-unit="%"
+                  title="整改率"
+                  style="width: 20%"
+              />
+            </div>
+            <v-charts
+                style="height: 420px"
+                :option="option"
+                autoresize
+            />
+            <datav-card title="问题趋势">
+              <v-charts
+                  style="height: 250px"
+                  :option="option1"
+                  autoresize
+              />
+            </datav-card>
+          </el-col>
+          <el-col :span="6">
+            <datav-card title="实时预警">
+              <el-scrollbar height="450px">
+                <div class="message message-error">
+                  <div class="message-title">待处理</div>
+                  <div>
+                    芙蓉-定王台-办案区-询（讯）问室 （湖南省长沙市公安局芙蓉分局定王台派出所 ） &emsp; “民警单人询（讯）问”的违规问题
+                  </div>
+                  <div class="message-footer flex between">
+                    <span>芙蓉分局定王台派出所</span>
+                    <span>2024-11-18 20:12</span>
+                  </div>
+                </div>
+                <div class="message message-info">
+                  <div class="message-title">待处理</div>
+                  <div>
+                    望城-管理中心-办案区-询问室（湖南省长沙市望城区公安局法制大队）&emsp; 民警单人询（讯）问”的违规问题。
+                  </div>
+                  <div class="message-footer flex between">
+                    <span>望城区公安局法制大队</span>
+                    <span>2024-11-18 19:12</span>
+                  </div>
+                </div>
+                <div class="message">
+                  <div class="message-title">待处理</div>
+                  <div>
+                    执法办案中心-询问室7（湖南省长沙市公安局芙蓉分局蓉园派出所） &emsp;同时讯（询）问多名嫌疑对象
+                  </div>
+                  <div class="message-footer flex between">
+                    <span>芙蓉分局蓉园派出所</span>
+                    <span>2024-11-18 16:12</span>
+                  </div>
+                </div>
+                <div class="message">
+                  <div class="message-title">待处理</div>
+                  <div>
+                    开福-直属-执法办案管理-讯询问室（湖南省长沙市公安局开福分局法制大队） &emsp;“民警单人询（讯）问”的违规问题
+                  </div>
+                  <div class="message-footer flex between">
+                    <span>开福分局法制大队</span>
+                    <span>2024-11-18 15:12</span>
+                  </div>
+                </div>
+              </el-scrollbar>
+            </datav-card>
+            <datav-card title="问题类型占比">
+              <v-charts
+                  style="height: 300px"
+                  :option="option2"
+                  autoresize
+              />
+            </datav-card>
+          </el-col>
+        </el-row>
+      </main>
+    </div>
+  </el-scrollbar>
 </template>
 <script setup>
 import changshaMap from "@/assets/data/changsha.json";
@@ -170,229 +163,447 @@ import vCharts from "vue-echarts";
 import * as echarts from "echarts/core";
 
 echarts.registerMap("changsha", changshaMap);
-const option = {
-    geo: {
-        // 是上面注册时的名字哦，registerMap（'名字保持一致'）
-        map: "changsha",
+let gobalTempMapVoList = [
+  {
+    "name": "芙蓉分局",
+    "total": 25,
+    "changedPro": 25,
+    "relationOrg": 15,
+    "relationPre": 27,
+    "changeRate": 100
+  }, {
+    "name": "天心分局",
+    "total": 5,
+    "changedPro": 5,
+    "relationOrg": 5,
+    "relationPre": 7,
+    "changeRate": 100
+  }, {
+    "name": "岳麓分局",
+    "total": 22,
+    "changedPro": 22,
+    "relationOrg": 12,
+    "relationPre": 25,
+    "changeRate": 100
+  }, {
+    "name": "开福分局",
+    "total": 30,
+    "changedPro": 30,
+    "relationOrg": 16,
+    "relationPre": 32,
+    "changeRate": 100
+  }, {
+    "name": "雨花分局",
+    "total": 18,
+    "changedPro": 18,
+    "relationOrg": 12,
+    "relationPre": 16,
+    "changeRate": 100
+  }, {
+    "name": "望城分局",
+    "total": 15,
+    "changedPro": 15,
+    "relationOrg": 10,
+    "relationPre": 15,
+    "changeRate": 100
+  }, {
+    "name": "浏阳市局",
+    "total": 13,
+    "changedPro": 13,
+    "relationOrg": 11,
+    "relationPre": 15,
+    "changeRate": 100
+  }, {
+    "name": "宁乡市局",
+    "total": 11,
+    "changedPro": 11,
+    "relationOrg": 9,
+    "relationPre": 13,
+    "changeRate": 100
+  }, {
+    "name": "长沙县局",
+    "total": 6,
+    "changedPro": 6,
+    "relationOrg": 8,
+    "relationPre": 9,
+    "changeRate": 100
+  }
+];
+const option = ref({
+  geo: {
+    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.total}</span></li>
+              <li>整改问题数 <span>${dataItem.changedPro}</span></li>
+              <li>涉及单位数 <span>${dataItem.relationOrg}</span></li>
+              <li>涉及人数 <span>${dataItem.relationPre}</span></li>
+              <li>整改率 <span>${dataItem.changeRate}%</span></li>
+            </ul>
+          </div>
+        </div>`;
+      } else {
+        return `<div class="tooltip">
+          <div class="tooltip-title">${params.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul"">
+              <li>信访总件数 <span>0</span></li>
+              <li>国家信访 <span>0</span></li>
+              <li>公安部信访 <span>0</span></li>
+
+              <li>12337信访 <span>0</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
     },
 
-    visualMap: {
-        type: "piecewise",
-        bottom: 10,
-        pieces: [
-            { gte: 85, lte: 100, label: "问题数低于500" },
-            { gte: 65, lte: 85, label: "问题数低于1000" },
-            { gte: 0, lte: 65, label: "问题数低于1000" },
-        ],
-        right: 10, // 右边距
-        realtime: false,
-        orient: "horizontal", // 水平显示
-        textStyle: {
-            color: "#fff", // 文字颜色
-        },
-        calculable: true,
-        inRange: {
-            color: ["#D34343", "#F6A149", "#4987F6"],
-        },
+  },
+  visualMap: {
+
+    type: "piecewise",
+    bottom: 10,
+    pieces: [
+      {gte: 0, lte: 10, label: "问题数低于500"},
+      {gte: 10, lte: 20, label: "问题数介于500-1000"},
+      {gte: 30, label: "问题数高于1000"},
+    ],
+    right: 10,
+    realtime: false,
+    orient: "horizontal",
+    textStyle: {
+      color: "#fff",
+    },
+    calculable: true,
+    inRange: {
+      color: ["#4987F6", "#F6A149", "#D34343",],
     },
-    series: [
-        {
-            name: "长沙",
-            type: "map",
-            map: "changsha",
-            hoverAnimation: true,
-
-            label: {
-                show: true,
-                color: "white",
-            },
-            itemStyle: {
-                normal: {
-                    areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
-                },
-            },
+  },
+  series: [
+    {
+      name: "长沙",
+      type: "map",
+      map: "changsha",
+      hoverAnimation: true,
+      label: {
+        show: true,
+        color: "white",
+      },
+      itemStyle: {
+        normal: {
+          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: {
-        type: "category",
-        boundaryGap: false,
-        data: [
-            "9/10",
-            "9/11",
-            "9/12",
-            "9/13",
-            "9/14",
-            "9/15",
-            "9/16",
-            "9/17",
-            "9/18",
-            "9/19",
-            "9/20",
-            "9/21",
-            "9/22",
-            "9/23",
-        ],
+  xAxis: {
+    type: "category",
+    boundaryGap: false,
+    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
     },
-    yAxis: {
-        type: "value",
-        splitLine: {
-            show: true,
-            lineStyle: {
-                color: "#193775",
-            },
-        },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      lineStyle: {
+        color: "#28E6FF",
+        width: 4,
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
+          },
+          {
+            offset: 1,
+            color: "rgba(40,230,255,0)", // 渐变结束颜色
+          },
+        ]),
+      },
+      data: [12, 16, 14, 11, 6, 13, 8, 17, 16, 10, 12],
     },
-    series: [
-        {
-            type: "line",
-            smooth: true,
-            lineStyle: {
-                color: "#28E6FF",
-                width: 4,
-            },
-            areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: "rgba(40,230,255,0.47)", // 渐变起始颜色
-                    },
-                    {
-                        offset: 1,
-                        color: "rgba(40,230,255,0)", // 渐变结束颜色
-                    },
-                ]),
-            },
-            data: [
-                2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
-                3000, 3100, 3100, 3100,
-            ],
-        },
-    ],
+  ],
 });
 
 const option2 = {
-    series: [
-        {
-            type: "pie",
-            radius: ["40%", "70%"],
-            label: {
-                color: "#fff",
-            },
-            data: [
-                { value: 1048, name: "着装不规范" },
-                { value: 735, name: "看守人员睡岗" },
-                { value: 580, name: "工作人员玩手机" },
-                { value: 484, name: "单人问询" },
-                { value: 300, name: "民警不在岗" },
-            ],
-        },
-    ],
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 40, name: "着装不规范"},
+        {value: 25, name: "看守人员睡岗"},
+        {value: 30, name: "工作人员玩手机"},
+        {value: 30, name: "单人问询"},
+        {value: 10, name: "民警不在岗"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
 };
 
+
+
 const data1 = [
-    {
-        name: "芙蓉分局",
-        value: 11
-    },
-    {
-        name: "开福分局",
-        value: 10
-    },
-    
-    {
-        name: "岳麓分局",
-        value: 9
-    },
-    {
-        name: "雨花分局",
-        value: 8
-    },
-    {
-        name: "望城分局",
-        value: 8
-    },
-    {
-        name: "浏阳市局",
-        value: 7
-    },
-    {
-        name: "长沙县局",
-        value: 5
-    },
+
+  {
+    label: "开福分局",
+    value: 30
+  },
+  {
+    label: "芙蓉分局",
+    value: 25
+  },
+  {
+    label: "岳麓分局",
+    value: 22
+  },
+  {
+    label: "雨花分局",
+    value: 18
+  },
+  {
+    label: "望城分局",
+    value: 15
+  },
+  {
+    label: "浏阳分局",
+    value: 13
+  },
+  {
+    label: "宁乡分局",
+    value: 11
+  },
+  {
+    label: "长沙县局",
+    value: 6
+  },
+  {
+    label: "天心分局",
+    value: 5
+  },
+
+
+];
+
+
+const colors = [
+  {
+    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
+    percentage: 80,
+  },
+  {
+    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
+    percentage: 60,
+  },
+  {
+    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
+    percentage: 40,
+  },
 ];
 </script>
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
+
 img {
-    width: 100%;
-    display: block;
-    border: 1px solid transparent;
-    &.active {
-        border-color: #1cd9ff;
-    }
+  width: 100%;
+  display: block;
+  border: 1px solid transparent;
+
+  &.active {
+    border-color: #1cd9ff;
+  }
 }
+
 .message {
-    padding: 10px;
-    margin-bottom: 10px;
+  padding: 10px;
+  margin-bottom: 10px;
+  background: linear-gradient(
+          180deg,
+          rgba(145, 145, 145, 0) 0%,
+          rgba(164, 164, 164, 0.26) 98%
+  );
+  border: 1px solid;
+  border-image: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.28),
+          rgba(255, 255, 255, 0.26)
+  ) 1 1;
+
+  &.message-error {
     background: linear-gradient(
-        180deg,
-        rgba(145, 145, 145, 0) 0%,
-        rgba(164, 164, 164, 0.26) 98%
+            180deg,
+            rgba(208, 18, 18, 0) 0%,
+            rgba(255, 0, 0, 0.26) 100%
     );
     border: 1px solid;
     border-image: linear-gradient(
             180deg,
-            rgba(255, 255, 255, 0.28),
-            rgba(255, 255, 255, 0.26)
-        )
-        1 1;
-    &.message-error {
-        background: linear-gradient(
-            180deg,
-            rgba(208, 18, 18, 0) 0%,
-            rgba(255, 0, 0, 0.26) 100%
-        );
-        border: 1px solid;
-        border-image: linear-gradient(
-                180deg,
-                rgba(255, 71, 71, 0.59),
-                rgba(251, 95, 95, 1)
-            )
-            1 1;
-        .message-title {
-            color: #ff0017;
-        }
+            rgba(255, 71, 71, 0.59),
+            rgba(251, 95, 95, 1)
+    ) 1 1;
+
+    .message-title {
+      color: #ff0017;
     }
-    &.message-info {
-        background: linear-gradient(
+  }
+
+  &.message-info {
+    background: linear-gradient(
             180deg,
             rgba(18, 104, 208, 0) 0%,
             rgba(0, 166, 255, 0.26) 100%
-        );
-        border: 1px solid;
-        border-image: linear-gradient(
-                180deg,
-                rgba(71, 209, 255, 0.28),
-                rgba(8, 177, 255, 1)
-            )
-            1 1;
-        .message-title {
-            color: #1cd9ff;
-        }
-    }
+    );
+    border: 1px solid;
+    border-image: linear-gradient(
+            180deg,
+            rgba(71, 209, 255, 0.28),
+            rgba(8, 177, 255, 1)
+    ) 1 1;
+
     .message-title {
-        font-size: 23px;
-        font-weight: 700;
-        margin-bottom: 10px;
-        color: #597ae9;
-    }
-    .message-footer {
-        font-size: 14px;
-        color: #597ae9;
-        margin-top: 10px;
+      color: #1cd9ff;
     }
+  }
+
+  .message-title {
+    font-size: 23px;
+    font-weight: 700;
+    margin-bottom: 10px;
+    color: #597ae9;
+  }
+
+  .message-footer {
+    font-size: 14px;
+    color: #597ae9;
+    margin-top: 10px;
+  }
+}
+
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 169.88px;
+    height: 178px;
+    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: 30px;
+    text-align: right;
+    margin-right: 15px;
+    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; /* 右边颜色，与背景颜色相同 */
+  }
+
+
 }
 </style>
\ No newline at end of file