审计督察 案件核查

src/api/datav.ts

@@ -6,6 +6,12 @@ export function getCaseVerifData(times) {
     });
 }
 
+export function getCaseVerifTrend(times, month) {
+    return request.get({
+        url: `/datav/caseVerif/trend?beginTime=${times[0]}&endTime=${times[1]}&month=${month}`
+    });
+}
+
 export function getMailVisitsData(times) {
     return request.get({
         url: `/datav/mailVisits?beginTime=${times[0]}&endTime=${times[1]}`

src/views/datav/AuditSuper.vue

@@ -1,31 +1,66 @@
 <template>
   <el-scrollbar height="100vh">
     <div class="wrapper">
-            <datav-header />
+      <datav-header/>
       <main>
         <el-row :gutter="16">
           <el-col :span="6">
-                        <datav-card title="审计整改结果">
+            <datav-card title="审计整改结果" sub-title="已整改问题数/查出问题数">
+
+
+
+              <el-scrollbar height="350px">
                 <datav-chart-bar
-                                sub-title="查出问题数/已整改问题数"
+                    :size="small"
                     :data="data1"
-                                size="large"
+                    unit="%"
                 />
+
+              </el-scrollbar>
               <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
-                                <div class="tab-title-item active">
+                <!--                                <div class="tab-title-item active">-->
-                                    分县市局
+                <!--                                    分县市局-->
-                                </div>
+                <!--                                </div>-->
-                                <div class="tab-title-item">局属单位</div>
+                <!--                                <div class="tab-title-item">局属单位</div>-->
               </div>
             </datav-card>
-                        <datav-card title="涉及查出问题">
+
+
+            <datav-card title="审计查出问题">
+
+              <datav-tabs>
+                <datav-tab-item label="政府投资审计" name="1">
+                  <div class="mb-40">
                     <v-charts
                         style="height: 300px"
                         :option="option2"
                         autoresize
                     />
+                  </div>
+                </datav-tab-item>
+                <datav-tab-item label="专项审计" name="2">
+                  <div class="mb-40">
+                    <v-charts
+                        style="height: 300px"
+                        :option="option3"
+                        autoresize
+                    />
+                  </div>
+                </datav-tab-item>
+                <datav-tab-item label="经济责任审计" name="3">
+                  <div class="mb-40">
+                    <v-charts
+                        style="height: 300px"
+                        :option="option4"
+                        autoresize
+                    />
+                  </div>
+                </datav-tab-item>
+              </datav-tabs>
+
             </datav-card>
           </el-col>
+
           <el-col :span="12">
             <div class="datav-col">
               <label for="">统计周期：</label>
@@ -65,7 +100,7 @@
                 :option="option"
                 autoresize
             />
-                        <datav-card title="审计项目趋势">
+            <datav-card title="审计工作趋势">
               <v-charts
                   style="height: 300px"
                   :option="option1"
@@ -73,13 +108,40 @@
               />
             </datav-card>
           </el-col>
+
           <el-col :span="6">
             <datav-card title="审计项目类型">
+
+              <datav-tabs>
+                <datav-tab-item label="政府投资审计" name="1">
+                  <div class="mb-40">
                     <v-charts
                         style="height: 300px"
-                                :option="option3"
+                        :option="option5"
+                        autoresize
+                    />
+                  </div>
+                </datav-tab-item>
+                <datav-tab-item label="专项审计" name="2">
+                  <div class="mb-40">
+                    <v-charts
+                        style="height: 300px"
+                        :option="option6"
+                        autoresize
+                    />
+                  </div>
+                </datav-tab-item>
+                <datav-tab-item label="经济责任审计" name="3">
+                  <div class="mb-40">
+                    <v-charts
+                        style="height: 300px"
+                        :option="option7"
                         autoresize
                     />
+                  </div>
+                </datav-tab-item>
+              </datav-tabs>
+
             </datav-card>
             <datav-card title="审计工作动态">
 
@@ -92,14 +154,16 @@
                   </div>
                 </div>
                 <div class="message" type="warning">
-                                    <div class="message-title" >督察通报</div>
+                  <div class="message-title">督察通报</div>
-                                    <div class="message-content">自20**年**月**日起，对****同志担任****单位****职务期间的经济责任履行情况进行审计，必要时，将追溯至相关年度或延伸审计有关单位。</div>
+                  <div class="message-content">
+                    自20**年**月**日起，对****同志担任****单位****职务期间的经济责任履行情况进行审计，必要时，将追溯至相关年度或延伸审计有关单位。
+                  </div>
                   <div class="message-footer flex end">
                     <span>2024-09-18 18:00:13</span>
                   </div>
                 </div>
                 <div class="message" type="success">
-                                    <div class="message-title" >工作简报</div>
+                  <div class="message-title">工作简报</div>
                   <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div>
                   <div class="message-footer flex end">
                     <span>2024-09-18 18:00:13</span>
@@ -120,35 +184,127 @@
     </div>
   </el-scrollbar>
 </template>
+
+
 <script setup>
 import vCharts from "vue-echarts";
 import changshaMap from "@/assets/data/changsha.json";
 import * as echarts from "echarts/core";
 
+
+let gobalTempMapVoList = [
+  {
+    "name": "天心分局",
+    "reviewOrg": 11,
+    "checkPro": 11,
+    "rushPro": 11,
+  },
+  {
+    "name": "开福分局",
+    "reviewOrg": 11,
+    "checkPro": 11,
+    "rushPro": 11,
+  },
+  {
+    "name": "岳麓分局",
+    "reviewOrg": 11,
+    "checkPro": 11,
+    "rushPro": 11,
+  },
+  {
+    "name": "望城分局",
+    "reviewOrg": 11,
+    "checkPro": 11,
+    "rushPro": 11,
+  },
+  {
+    "name": "浏阳市局",
+    "reviewOrg": 11,
+    "checkPro": 11,
+    "rushPro": 11,
+  },
+  {
+    "name": "长沙县局",
+    "reviewOrg": 11,
+    "checkPro": 11,
+    "rushPro": 11,
+  },
+  {
+    "name": "芙蓉分局",
+    "reviewOrg": 11,
+    "checkPro": 11,
+    "rushPro": 11,
+  },
+  {
+    "name": "雨花分局",
+    "reviewOrg": 11,
+    "checkPro": 11,
+    "rushPro": 11,
+  },
+  {
+    "name": "宁乡市局",
+    "reviewOrg": 11,
+    "checkPro": 11,
+    "rushPro": 11,
+  }
+
+];
+
 echarts.registerMap("changsha", changshaMap);
-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.reviewOrg}</span></li>
+              <li>查出问题数 <span>${dataItem.checkPro}</span></li>
+              <li>追责问责数 <span>${dataItem.rushPro}</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>
+              <li>追责问责数 <span>0</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
+    },
+  },
   visualMap: {
     type: "piecewise",
     bottom: 10,
     pieces: [
-            { gte: 85, lte: 100, label: "整改率低于75%" },
+      {min: 0, max: 500, label: "问题数低于500"}, {min: 501, max: 1000, label: "问题数介于500-1000"}, {
-            { gte: 65, lte: 85, label: "整改率高于85%" },
+        min: 1001,
-            { gte: 0, lte: 65, label: "整改率高于95%" },
+        label: "问题数高于1000"
+      },
     ],
-        right: 10, // 右边距
+    right: 10,
     realtime: false,
-        orient: "horizontal", // 水平显示
+    orient: "horizontal",
     textStyle: {
-            color: "#fff", // 文字颜色
+      color: "#fff",
     },
     calculable: true,
     inRange: {
-            color: ["#D34343", "#F6A149", "#4987F6"],
+      color: ["#4987F6", "#F6A149", "#D34343",],
     },
   },
   series: [
@@ -157,40 +313,40 @@ const option = {
       type: "map",
       map: "changsha",
       hoverAnimation: true,
-
       label: {
         show: true,
         color: "white",
       },
       itemStyle: {
         normal: {
-                    areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
+          areaColor: "#02215E",
+          borderColor: "#1773c3",
         },
       },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
       },
+      data: [],
+    }
   ],
-};
+})
 
 const option1 = ref({
   xAxis: {
     type: "category",
     boundaryGap: false,
-        data: [
+    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
-            "9/10",
+  },
-            "9/11",
+  tooltip: {
-            "9/12",
+    trigger: 'axis',
-            "9/13",
+    axisPointer: {
-            "9/14",
+      type: 'line',
-            "9/15",
+      label: {
-            "9/16",
+        backgroundColor: '#6a7985'
-            "9/17",
+      }
-            "9/18",
+    }
-            "9/19",
-            "9/20",
-            "9/21",
-            "9/22",
-            "9/23",
-        ],
   },
   yAxis: {
     type: "value",
@@ -224,70 +380,50 @@ const option1 = ref({
           },
         ]),
       },
-            data: [
+      data: [0, 0, 4, 45, 16, 1, 436, 687, 3, 0, 0],
-                2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
-                3000, 3100, 3100, 3100,
-            ],
     },
   ],
 });
 
 const data1 = [
   {
-        name: "天心分局",
+    label: "芙蓉分局",
-        value: 100,
-        unit: "%",
-        numerator: 4,
-        denominator: 4,
-    },
-    {
-        name: "开福分局",
     value: 100,
-        unit: "%",
+    numerator: 1,
-        numerator: 3,
+    denominator: 1,
-        denominator: 3,
   },
   {
-        name: "芙蓉分局",
+    label: "雨花分局",
-        value: 100,
+    value: 91,
-        unit: "%",
+    numerator: 220,
-        numerator: 3,
+    denominator: 240,
-        denominator: 3,
   },
   {
-        name: "岳麓分局",
+    label: "高新分局",
-        value: 100,
+    value: 90,
-        unit: "%",
+    numerator: 140,
-        numerator: 2,
+    denominator: 155,
-        denominator: 2,
-    },
-    {
-        name: "雨花分局",
-        value: 100,
-        unit: "%",
-        numerator: 2,
-        denominator: 2,
   },
+
   {
-        name: "望城分局",
+    label: "宁乡市局",
-        value: 50,
+    value: 83,
-        unit: "%",
+    numerator: 194,
-        numerator: 1,
+    denominator: 232,
-        denominator: 2,
   },
   {
-        name: "浏阳市局",
+    label: "开福分局",
-        value: 50,
+    value: 73,
-        unit: "%",
+    numerator: 137,
-        numerator: 1,
+    denominator: 186,
-        denominator: 2,
   },
+
+
   {
-        name: "长沙县局",
+    label: "岳麓分局",
-        value: 50,
+    value: 0,
-        unit: "%",
+    numerator: 0,
-        numerator: 1,
+    denominator: 11,
-        denominator: 2,
   },
 ];
 
@@ -331,11 +467,12 @@ const option2 = {
         color: "#fff",
       },
       data: [
-                { value: 311, name: "其他" },
+        {value: 23, name: "项目未按规定立项"},
-                { value: 735, name: "预算编制不科学" },
+        {value: 21, name: "未按规定或批准的采购方式进行采购"},
-                { value: 580, name: "违规调整预算" },
+        {value: 6, name: "未按规定程序办理立项手续"},
-                { value: 484, name: "预算执行率不高" },
+        {value: 2, name: "涉嫌项目拆分"},
-                { value: 300, name: "会计基础工作薄弱" },
+        {value: 2, name: "项目开始是实施或完成后补签合同"},
+        {value: 1, name: "未严格履行立项手续"},
       ],
     },
   ],
@@ -353,10 +490,61 @@ const option3 = {
         color: "#fff",
       },
       data: [
-                { value: 311, name: "信息化类" },
+        {value: 321, name: "提取、查封、扣押、冻结、处置涉案财物不规范"},
-                { value: 735, name: "工程类" },
+        {value: 249, name: "法律文书填制不规范"},
-                { value: 580, name: "货物类" },
+        {value: 215, name: "未上缴或未及时上缴涉案资金"},
-                { value: 484, name: "服务类" }
+        {value: 190, name: "随身财务登记、保管、处置不规范"},
+        {value: 88, name: "执法活动财务管理制度不健全、管理责任不落实"},
+        {value: 55, name: "未按规定退还保证金"},
+        {value: 13, name: "涉案财务保管场所设施配备不规范"},
+        {value: 6, name: "随身财务登记、保管、处置不规范"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+
+const option4 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 8, name: "法律文书填写不规范"},
+        {value: 3, name: "提取、查封、扣押、冻结、处置涉案财物不规范"},
+        {value: 1, name: "\"三公经费\"预算执行及公开不符合规定"},
+        {value: 1, name: "随身财务登记、保管、处置不规范"},
+        {value: 1, name: "未按规定退还保证金"},
+        {value: 1, name: "未上缴或未及时上缴涉案资金"},
+        {value: 1, name: "无预算采购"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+
+const option5 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 143, name: "工程"},
+        {value: 78, name: "信息化"},
+        {value: 176, name: "服务"},
+        {value: 21, name: "购物"},
       ],
     },
   ],
@@ -364,25 +552,117 @@ const option3 = {
     trigger: "item",
   },
 };
+
+
+
+
 </script>
+
+
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 169.88px;
+    height: 130px;
+    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: 80px;
+    //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: 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; /* 右边颜色，与背景颜色相同 */
+  }
+
+
+}
+
+
 .message {
   padding: 10px;
   margin-bottom: 10px;
-    background: linear-gradient( 270deg, rgba(16,151,255,0.1) 0%, rgba(0,55,236,0.87) 100%);
+  background: linear-gradient(270deg, rgba(16, 151, 255, 0.1) 0%, rgba(0, 55, 236, 0.87) 100%);
+
   &[type=warning] {
-        background: linear-gradient( 270deg, rgba(255,190,16,0.1) 0%, rgba(236,84,0,0.87) 100%);
+    background: linear-gradient(270deg, rgba(255, 190, 16, 0.1) 0%, rgba(236, 84, 0, 0.87) 100%);
   }
+
   &[type=success] {
-        background: linear-gradient( 270deg, rgba(91,216,9,0.14) 0%, #28813D 100%);
+    background: linear-gradient(270deg, rgba(91, 216, 9, 0.14) 0%, #28813D 100%);
   }
+
   .message-title {
     font-size: 14px;
     margin-bottom: 10px;
   }
+
   .message-content {
     margin-bottom: 10px;
   }
 }
 </style>
+
+
+

src/views/datav/CaseVerif.vue

@@ -14,7 +14,6 @@
                     <datav-chart-bar
                         :data="fxsjBarList"
                         size="large"
-                        :color="colors"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
@@ -24,7 +23,6 @@
                         :data="jsdwBarList"
                         :max="11"
                         size="large"
-                        :color="colors"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
@@ -46,13 +44,7 @@
                       autoresize
                   />
                 </datav-tab-item>
-                <datav-tab-item label="警纪警规" name="3">
+
-                  <v-charts
-                      style="height: 320px"
-                      :option="jjjgPieOption"
-                      autoresize
-                  />
-                </datav-tab-item>
               </datav-tabs>
             </datav-card>
           </el-col>
@@ -65,27 +57,27 @@
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.confirmed"
+                  :value="292"
                   title="查实案件数"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.investigateAndPunish"
+                  :value="285"
                   title="查处问题（个）"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.accountablePeopleNumber"
+                  :value="223"
                   title="问责人次"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.accountableDepartNumber"
+                  :value="93"
                   title="问责单位数"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.confirmedRate"
+                  :value="18.4"
                   value-unit="%"
                   title="查实率"
                   style="width: 16.66%"
@@ -117,6 +109,13 @@
                   </div>
                 </datav-tab-item>
                 <datav-tab-item label="问责处理情况" name="2">
+                  <div class="mb-40">
+                    <v-charts
+                        style="height: 340px"
+                        :option="wzclPieOption"
+                        autoresize
+                    />
+                  </div>
                 </datav-tab-item>
               </datav-tabs>
             </datav-card>
@@ -131,8 +130,7 @@
                     />
                   </div>
                 </datav-tab-item>
-                <datav-tab-item label="禁闭处理情况" name="2">
+
-                </datav-tab-item>
               </datav-tabs>
             </datav-card>
           </el-col>
@@ -147,7 +145,7 @@ import vCharts from "vue-echarts";
 import changshaMap from "@/assets/data/changsha.json";
 import * as echarts from "echarts/core";
 import moment from "moment";
-import {getCaseVerifData} from "@/api/datav";
+import {getCaseVerifData, getCaseVerifTrend} from "@/api/datav";
 
 const time = ref([
   moment().startOf("year").format("YYYY-MM-DD"),
@@ -162,14 +160,97 @@ const overview = ref({
   accountableDepartNumber: 0,
   confirmedRate: 0,
 });
+let gobalTempMapVoList = [
+  {
+    "name": "浏阳市局",
+    "totalPro": 93,
+    "checkedPro": 11,
+    "dealPro": 8,
+    "dealPersonCount": 7,
+    "orgCount": 9,
+    "rate": "12%"
+  },
+  {
+    "name": "长沙县局",
+    "totalPro": 192,
+    "checkedPro": 33,
+    "dealPro": 33,
+    "dealPersonCount": 22,
+    "orgCount": 11,
+    "rate": "17%"
+  },
+  {
+    "name": "开福分局",
+    "totalPro": 174,
+    "checkedPro": 63,
+    "dealPro": 60,
+    "dealPersonCount": 32,
+    "orgCount": 13,
+    "rate": "36%"
+  },
+  {
+    "name": "芙蓉分局",
+    "totalPro": 175,
+    "checkedPro": 30,
+    "dealPro": 30,
+    "dealPersonCount": 24,
+    "orgCount": 17,
+    "rate": "17%"
+  },
+  {
+    "name": "雨花分局",
+    "totalPro": 214,
+    "checkedPro": 32,
+    "dealPro": 32,
+    "dealPersonCount": 27,
+    "orgCount": 12,
+    "rate": "15%"
+  },
+  {
+    "name": "天心分局",
+    "totalPro": 179,
+    "checkedPro": 34,
+    "dealPro": 21,
+    "dealPersonCount": 16,
+    "orgCount": 14,
+    "rate": "19%"
+  },
+  {
+    "name": "岳麓分局",
+    "totalPro": 234,
+    "checkedPro": 25,
+    "dealPro": 10,
+    "dealPersonCount": 9,
+    "orgCount": 10,
+      "rate": "11%"
+  },
+  {
+    "name": "宁乡分局",
+    "totalPro": 68,
+    "checkedPro": 9,
+    "dealPro": 9,
+    "dealPersonCount": 11,
+    "orgCount": 8,
+    "rate": "13%"
+  },
+  {
+    "name": "望城分局",
+    "totalPro": 78,
+    "checkedPro": 21,
+    "dealPro": 8,
+    "dealPersonCount": 9,
+    "orgCount": 5,
+    "rate": "27%"
+  },
 
+];
 const fxsjBarList = ref([]);
 const jsdwBarList = ref([]);
 const zfbaPieList = ref([]);
 const fwglPieList = ref([]);
 const jjjgPieList = ref([]);
-
 const ajlyPieList = ref([]);
+const ajhcqxList = ref([]);
 
 function getData() {
   getCaseVerifData(time.value).then((data) => {
@@ -181,6 +262,14 @@ function getData() {
     jjjgPieList.value = data.jjjgPieList;
     ajlyPieList.value = data.ajlyPieList;
   });
+
+
+  getCaseVerifTrend(time.value, 12).then((data) => {
+    ajhcqxList.value = data.ajhcqsList;
+    console.log(ajhcqxList.value)
+  });
+
+
 }
 
 watch(time, () => {
@@ -220,7 +309,12 @@ const fwglPieOption = computed(() => {
         label: {
           color: "#fff",
         },
-        data: fwglPieList.value,
+        data: [
+          {value: 4, name: "交警执法"},
+          {value: 3, name: "态度生硬"},
+          {value: 3, name: "户政业务"},
+          {value: 2, name: "监所管理"},
+        ],
       },
     ],
   };
@@ -256,18 +350,97 @@ const ajlyPieOption = computed(() => {
         label: {
           color: "#fff",
         },
-        data: ajlyPieList.value,
+        data: [
+          {name: "12389", value: 843},
+          {name: "网络投诉", value: 711},
+          {name: "信件投诉", value: 29},
+          {name: "其他投诉", value: 3},
+          {name: "值班来电", value: 3},
+        ],
+      },
+    ],
+  };
+});
+
+const wzclPieOption = computed(() => {
+  return {
+    tooltip: {
+      trigger: "item",
+    },
+    series: [
+      {
+        type: "pie",
+        radius: ["40%", "70%"],
+        label: {
+          color: "#fff",
+        },
+        data: [
+          {name: "通报批评", value: 167},
+          {name: "未处置人", value: 54},
+          {name: "工作提醒", value: 17},
+          {name: "批评教育", value: 9},
+          {name: "提醒谈话", value: 21},
+          {name: "禁闭", value: 2},
+          {name: "责令检查", value: 2},
+          {name: "党纪处分", value: 1},
+        ],
       },
     ],
   };
 });
 
+
+
 echarts.registerMap("changsha", changshaMap);
 const option = {
   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.totalPro}</span></li>
+              <li>查实案件数 <span>${dataItem.checkedPro}</span></li>
+              <li>查处问题（个） <span>${dataItem.dealPro}</span></li>
+              <li>问责人次 <span>${dataItem.dealPersonCount}</span></li>
+              <li>问责单位数 <span>${dataItem.orgCount}</span></li>
+              <li>查实率 <span>${dataItem.rate}</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>
+              <li>查处问题（个） <span>0</span></li>
+              <li>问责人次 <span>0</span></li>
+              <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,
@@ -309,22 +482,7 @@ const option1 = ref({
   xAxis: {
     type: "category",
     boundaryGap: false,
-    data: [
+    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'],
-      "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",
-    ],
   },
   yAxis: {
     type: "value",
@@ -367,10 +525,7 @@ const option1 = ref({
           },
         ]),
       },
-      data: [
+      data: [175, 101, 158, 141, 177, 162, 108, 166, 197, 104],
-        2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
-        3000, 3100, 3100, 3100,
-      ],
     },
   ],
 });
@@ -418,4 +573,90 @@ const colors = [
 
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 180px;
+    height: 222px;
+    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: 180px;
+    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: 180px;
+    height: 172px;
+    //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: 10px;
+    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>
+
+
+<!--<datav-tab-item label="警纪警规" name="3">-->
+<!--<v-charts-->
+<!--    style="height: 320px"-->
+<!--    :option="jjjgPieOption"-->
+<!--    autoresize-->
+<!--/>-->
+<!--</datav-tab-item>-->

src/views/datav/Gobal.vue

@@ -66,7 +66,7 @@
               />
               <datav-statistic
                   :value="overview.talkPro"
-                  title="警务评议问题"
+                  title="民意感知问题"
                   style="width: 13.66%; margin-left: 30px"
               />
               <datav-statistic
@@ -186,7 +186,7 @@ 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.policePro}</span></li>
               <li>审计监督问题 <span>${dataItem.reviewPro}</span></li>
             </ul>
           </div>
@@ -200,7 +200,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>民意感知问题 <span>0</span></li>
               <li>审计监督问题 <span>0</span></li>
             </ul>
           </div>

src/views/datav/SceneInsp.vue

@@ -65,6 +65,7 @@
 
             </datav-card>
 
+
             <datav-card title="问题类型占比">
               <v-charts
                   style="height: 300px"
@@ -140,7 +141,51 @@
             <datav-card>
               <datav-tabs v-model="activeTabRight" size="small">
                 <datav-tab-item label="黄赌毒" name="3">
-                  <el-scrollbar height="420px">
+
+                  <el-row class="mb-32">
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ hddOverview.proTotal }}
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ hddOverview.changing }}
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ hddOverview.changed }}
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ hddOverview.correctionRate }}%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+
+                  <el-scrollbar height="330px">
                     <datav-chart-bar
                         :data="hddList"
                         size="large"
@@ -212,13 +257,20 @@ import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts";
 
 const data1 = ref([]);
 const activeTabLeft = ref("3");
-
+// 日常督察总览
 const rankOverview = ref({
   proTotal: 0,
   changing: 0,
   changed: 0,
   correctionRate: 0,
 });
+// 黄赌毒总览
+const hddOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+});
 const wtlxList = ref([])
 const hddList = ref([])
 const overview = ref({
@@ -456,6 +508,7 @@ function getData() {
       supervisionNotifyTotal: Number(res.overview.supervisionNotifyTotal),
       supervisionNotifyOrgTotal: Number(res.overview.supervisionNotifyOrgTotal),
     });
+    hddOverview.value = res.hddOverview;
     wtlxList.value = res.wtlxList
     hddList.value = res.hddList;
     superviseTempMapVoList = res.superviseTempMapVoList;