From c27618ace49676ff1f0ccca071c67b746d6f0485 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: Sat, 21 Dec 2024 14:29:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/screen/subScreen/subOneAuditSuper.ts  |    0
 src/api/screen/subScreen/subOneMailVisits.ts  |   10 +
 .../screen/subScreen/subOneRightsConfort.ts   |    0
 src/components/datav/chart-bar.vue            |    6 +-
 src/router/routes.ts                          |   25 +-
 src/views/datav/CaseVerif.vue                 |    9 +-
 src/views/datav/Gobal.vue                     |   12 +-
 src/views/datav/MailVisits.vue                |   11 +-
 src/views/datav/SceneInsp.vue                 |   41 +-
 src/views/datav/Sub1.vue                      |    8 +-
 src/views/datav/VideoInsp.vue                 |   18 +-
 .../datav/subOnedatav/SubOneCaseVerif.vue     |  735 +++++++++
 .../datav/subOnedatav/SubOneMailVisits.vue    | 1122 ++++++++++++++
 .../datav/subOnedatav/SubOneSceneInsp.vue     | 1360 +++++++++++++++++
 .../datav/subOnedatav/SubOneVideoInsp.vue     |  722 +++++++++
 .../datav/subOnedatav/subOneAuditSuper.vue    |  732 +++++++++
 .../datav/subOnedatav/subOneRightsComfort.vue |  751 +++++++++
 .../datav/subonedatav/SubOneCaseVerif.vue     |    6 +-
 .../datav/subonedatav/SubOneSceneInsp.vue     |    9 +-
 .../datav/subonedatav/SubOneVideoInsp.vue     |    5 +-
 20 files changed, 5527 insertions(+), 55 deletions(-)
 create mode 100644 src/api/screen/subScreen/subOneAuditSuper.ts
 create mode 100644 src/api/screen/subScreen/subOneMailVisits.ts
 create mode 100644 src/api/screen/subScreen/subOneRightsConfort.ts
 create mode 100644 src/views/datav/subOnedatav/SubOneCaseVerif.vue
 create mode 100644 src/views/datav/subOnedatav/SubOneMailVisits.vue
 create mode 100644 src/views/datav/subOnedatav/SubOneSceneInsp.vue
 create mode 100644 src/views/datav/subOnedatav/SubOneVideoInsp.vue
 create mode 100644 src/views/datav/subOnedatav/subOneAuditSuper.vue
 create mode 100644 src/views/datav/subOnedatav/subOneRightsComfort.vue

diff --git a/src/api/screen/subScreen/subOneAuditSuper.ts b/src/api/screen/subScreen/subOneAuditSuper.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/screen/subScreen/subOneMailVisits.ts b/src/api/screen/subScreen/subOneMailVisits.ts
new file mode 100644
index 0000000..9b07d72
--- /dev/null
+++ b/src/api/screen/subScreen/subOneMailVisits.ts
@@ -0,0 +1,10 @@
+import request from "@/api/request";
+import {getFirstAndRepeatMail} from "../mail";
+
+
+
+export function getSubOneFirstAndRepeatMail(departId, times) {
+    return request.get({
+        url: `/datav/sub1/mailVisits/getSubOneFirstAndRepeatMail?departId=${departId}&beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
\ No newline at end of file
diff --git a/src/api/screen/subScreen/subOneRightsConfort.ts b/src/api/screen/subScreen/subOneRightsConfort.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/datav/chart-bar.vue b/src/components/datav/chart-bar.vue
index 6b76a00..7c46848 100644
--- a/src/components/datav/chart-bar.vue
+++ b/src/components/datav/chart-bar.vue
@@ -23,7 +23,7 @@
                     }"
         ></div>
       </div>
-      <span :class="spanClass">{{ item.value + props.unit }}</span>
+      <span :class="spanClass" v-if="showValue">{{ item.value + props.unit }}</span>
       <span
           class="bar-item_remark text-right ml-8"
           v-if="item.denominator"
@@ -75,6 +75,10 @@ const props = defineProps({
   },
   remarkFontSize: {type: String, default: "10px",},
   spanClass: { type: String, default: "", },
+  showValue:{
+    type:Boolean,
+    default:true
+  }
 });
 
 const max = ref(100);
diff --git a/src/router/routes.ts b/src/router/routes.ts
index d4f41c6..475c0f2 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -62,27 +62,38 @@ export const routes = [
         path: '/datav/lmgz',
         component: () => import('@/views/datav/Lmgz.vue'),
     },
-    {
-        path: '/datav/sub1',
-        component: () => import('@/views/datav/Sub1.vue'),
-    },
+
     {
         path: '/datav/sub2',
         component: () => import('@/views/datav/Sub2.vue'),
     },
     {
         path: '/datav/subOneVideoInsp',
-        component: () => import('@/views/datav/subonedatav/SubOneVideoInsp.vue'),
+        component: () => import('@/views/datav/subOnedatav/SubOneVideoInsp.vue'),
     },
     {
         path: '/401',
         component: () => import('@/views/error/401.vue'),
     },
+    {
+        path: '/datav/subOneSceneInsp',
+        component: () => import('@/views/datav/subOnedatav/SubOneSceneInsp.vue'),
+    },
+    {
+        path: '/datav/sub1',
+        component: () => import('@/views/datav/Sub1.vue'),
+    },
     {
         path: '/datav/subOneCaseVerif',
-        component: () => import('@/views/datav/subonedatav/SubOneCaseVerif.vue'),
+        component: () => import('@/views/datav/subOnedatav/SubOneCaseVerif.vue'),
+    },
+    {
+        path: '/datav/subOneMailVisits',
+        component: () => import('@/views/datav/subOnedatav/SubOneMailVisits.vue'),
     },
-    
+
+
+
 ];
 
 export const INDEX_ROUTE_NAME = Symbol()
diff --git a/src/views/datav/CaseVerif.vue b/src/views/datav/CaseVerif.vue
index 62c86c0..e6a300c 100644
--- a/src/views/datav/CaseVerif.vue
+++ b/src/views/datav/CaseVerif.vue
@@ -24,6 +24,7 @@
                         :data="jsdwBarList"
                         :max="11"
                         size="large"
+                        :color="colors"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
@@ -339,6 +340,11 @@ const option = ref({
   geo: {
     // 是上面注册时的名字哦，registerMap（'名字保持一致'）
     map: "changsha",
+    itemStyle: {
+      normal: {
+        opacity: 0 // 设置透明度
+      },
+    }
   },
   tooltip: {
     trigger: 'item',
@@ -356,7 +362,7 @@ const option = ref({
               <li>查处问题（个） <span>${dataItem.dealCasePro}</span></li>
               <li>问责人次 <span>${dataItem.punishPre}</span></li>
               <li>问责单位数 <span>${dataItem.punishOrg}</span></li>
-              <li>查实率 <span>${dataItem.rate}</span></li>
+              <li>查实率 <span>${dataItem.rate}%</span></li>
             </ul>
           </div>
         </div>`;
@@ -407,6 +413,7 @@ const option = ref({
       name: "长沙",
       type: "map",
       map: "changsha",
+      roam: true,
       hoverAnimation: true,
       label: {
         show: true,
diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue
index bbddb3b..db51e86 100644
--- a/src/views/datav/Gobal.vue
+++ b/src/views/datav/Gobal.vue
@@ -235,6 +235,11 @@ echarts.registerMap("changsha", changshaMap);
 const option = ref({
   geo: {
     map: "changsha",
+    itemStyle: {
+      normal: {
+        opacity: 0 // 设置透明度
+      },
+    }
   },
   tooltip: {
     trigger: 'item',
@@ -308,6 +313,7 @@ const option = ref({
       type: "map",
       map: "changsha",
       hoverAnimation: true,
+      roam: true,
       label: {
         show: true,
         color: "white",
@@ -316,7 +322,8 @@ const option = ref({
         normal: {
           areaColor: "#02215E",
           borderColor: "#24D2EE",
-          borderWidth: 1 // 高亮时边框宽度
+          borderWidth: 1, // 高亮时边框宽度
+          opacity: 1 // 设置透明度
         },
       },
       emphasis: {
@@ -529,9 +536,6 @@ watch(time, () => {
 
 const handleClick = (params) => {
   const departId = params.data.departId;
-  const {name} = params.data;
-  // alert("部门id："+departId);
-  // alert("部门名字："+name);
   const url = router.resolve({
     path: "/datav/sub1",
     query: {departId: departId},
diff --git a/src/views/datav/MailVisits.vue b/src/views/datav/MailVisits.vue
index a21aa19..b113b5e 100644
--- a/src/views/datav/MailVisits.vue
+++ b/src/views/datav/MailVisits.vue
@@ -166,6 +166,7 @@
                 style="height: 450px"
                 :option="option"
                 autoresize
+                @click="handleClick"
             />
 
             <datav-card title="信访趋势">
@@ -354,6 +355,7 @@ import {
 
 //region  所有变量
 let timer;
+const router = useRouter();
 const activeTab = ref("1");
 const bwzdActiveTab = ref("1");  // 部委支队初重信tab
 const activeMailTrend = ref("1");   // 信访趋势tab
@@ -984,7 +986,14 @@ onMounted(() => {
   //   console.log("Active Tab: ", activeMailTab.value);
   // }, 3000); // 每3秒切换一次
 });
-
+const handleClick = (params) => {
+  const departId = params.data.departId;
+  const url = router.resolve({
+    path: "/datav/subOneMailVisits",
+    query: {departId: departId},
+  }).href;
+  window.open(url, "_blank");
+}
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue
index fafbed1..ccf022f 100644
--- a/src/views/datav/SceneInsp.vue
+++ b/src/views/datav/SceneInsp.vue
@@ -137,32 +137,32 @@
             <datav-date-picker v-model="time"/>
             <div class="flex gap-42">
               <datav-statistic
-                  :value="overview.supervisionNotifyTotal"
+                  :value="overview.problemNumber"
                   title="通报问题数"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.supervisionNotifyChangingTotal"
+                  :value="overview.rectifingNumber"
                   title="整改中"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.supervisionNotifyChangedTotal"
+                  :value="overview.rectifedNumber"
                   title="已整改"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.supervisionNotifyOrgTotal"
+                  :value="overview.departNumber"
                   title="涉及单位数"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.supervisionNotifyPreTotal"
+                  :value="overview.personNumber"
                   title="涉及人数"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.correctionRate"
+                  :value="overview.rectifyRate"
                   value-unit="%"
                   title="整改率"
                   style="width: 16.66%"
@@ -798,12 +798,12 @@ import router from "@/router/index.ts";
 // region 所有变量
 const activeTabRight = ref("1")
 const overview = ref({
-  correctionRate: 0,
-  supervisionNotifyPreTotal: 0,
-  supervisionNotifyChangingTotal: 0,
-  supervisionNotifyChangedTotal: 0,
-  supervisionNotifyTotal: 0,
-  supervisionNotifyOrgTotal: 0,
+  problemNumber: 0,
+  rectifingNumber: 0,
+  rectifedNumber: 0,
+  departNumber: 0,
+  personNumber: 0,
+  rectifyRate: 0,
 });  // 中央数据总览
 const fxsjRankOverview = ref({});  // 日常督察总览分县市局
 const jsdwRankOverview = ref({});  // 日常督察总览局属单位
@@ -942,6 +942,11 @@ const superviseTempMapVoList = ref([]);
 const option = ref({
   geo: {
     map: "changsha",
+    itemStyle: {
+      normal: {
+        opacity: 0 // 设置透明度
+      },
+    }
   },
   tooltip: {
     trigger: 'item',
@@ -989,6 +994,7 @@ const option = ref({
       {gte: 400, label: "高于平均问题30%", color: "#D34343"},],
     right: 10,
     realtime: false,
+
     orient: "horizontal",
     textStyle: {
       color: "#fff",
@@ -1004,6 +1010,7 @@ const option = ref({
       type: "map",
       map: "changsha",
       hoverAnimation: true,
+      roam: true,
       label: {
         show: true,
         color: "white",
@@ -1111,15 +1118,7 @@ const time = ref([
 // 地图临时测试数据
 const getData = async () => {
   getAllSupervisionNotifyCount(time.value).then((res) => {
-    Object.assign(overview.value, {
-      correctionRate: Number(res.overview.correctionRate),
-      supervisionNotifyPreTotal: Number(res.overview.supervisionNotifyPreTotal),
-      supervisionNotifyChangingTotal: Number(res.overview.supervisionNotifyChangingTotal),
-      supervisionNotifyChangedTotal: Number(res.overview.supervisionNotifyChangedTotal),
-      supervisionNotifyTotal: Number(res.overview.supervisionNotifyTotal),
-      supervisionNotifyOrgTotal: Number(res.overview.supervisionNotifyOrgTotal),
-
-    });
+    overview.value= res.overview;
   });
 
   getChangedRank(time.value, 3).then((res) => {
diff --git a/src/views/datav/Sub1.vue b/src/views/datav/Sub1.vue
index f064da6..1a68395 100644
--- a/src/views/datav/Sub1.vue
+++ b/src/views/datav/Sub1.vue
@@ -114,7 +114,7 @@
 
                         :size="small"
                         title="整改率排名"
-                        sub-title="已整改/问题数"
+                        sub-title="完成数/问题数"
                         unit="%"
                     />
                   </el-scrollbar>
@@ -461,8 +461,10 @@
                     <datav-chart-bar
                         :size="small"
                         :data="caseVerifyPrecinctRank"
+                        :labelWidth="110"
                         title="整改率排名"
                         sub-title="问题数/查实数"
+                        :show-value="false"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
@@ -791,9 +793,6 @@ const mailTrend = ref({
 
 echarts.registerMap("changsha", changshaMap);
 const option = ref({
-  geo: {
-    map: "changsha",
-  },
   tooltip: {
     trigger: 'item',
   },
@@ -818,6 +817,7 @@ const option = ref({
       type: "map",
       map: "changsha",
       hoverAnimation: true,
+      roam:true,
       label: {
         show: true,
         color: "white",
diff --git a/src/views/datav/VideoInsp.vue b/src/views/datav/VideoInsp.vue
index 4f5b4b0..9d2be8f 100644
--- a/src/views/datav/VideoInsp.vue
+++ b/src/views/datav/VideoInsp.vue
@@ -42,7 +42,7 @@
                 </el-col>
               </el-row>
             </datav-card>
-            <datav-card title="问题数排名" sub-title="问题数" style="height: 370px;">
+            <datav-card title="问题数排名" sub-title="查实问题数" style="height: 370px;">
               <datav-tabs
                   type="bottom-button"
               >
@@ -61,6 +61,7 @@
                         :data="jsdwRankList"
                         :max="11"
                         size="large"
+                        :color="colors"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
@@ -74,7 +75,7 @@
             <div class="flex gap-42">
               <datav-statistic
                   :value="overview.discoverProblem"
-                  title="发现问题数"
+                  title="查实问题数"
                   style="width: 20%"
               />
               <datav-statistic
@@ -385,7 +386,7 @@ const proTrend = ref({
           },
         ]),
       },
-      data: [12, 16, 14, 11, 6, 13, 8, 17, 16, 10, 12],
+      data: [],
     },
   ],
   grid: {
@@ -400,7 +401,11 @@ echarts.registerMap("changsha", changshaMap);
 const option = ref({
   geo: {
     map: "changsha",
-
+    itemStyle: {
+      normal: {
+        opacity: 0 // 设置透明度
+      },
+    }
   },
   tooltip: {
     trigger: 'item',
@@ -412,7 +417,7 @@ const option = ref({
           <div class="tooltip-title">${dataItem.originalName}</div>
           <div class="tooltip-content">
             <ul class="tooltip-ul" >
-              <li>发现问题数 <span>${dataItem.discoverProblem}</span></li>
+              <li>查实问题数 <span>${dataItem.discoverProblem}</span></li>
               <li>整改问题数 <span>${dataItem.changedProblem}</span></li>
               <li>涉及单位数 <span>${dataItem.relativeOrg}</span></li>
               <li>涉及人数 <span>${dataItem.relativePer}</span></li>
@@ -425,7 +430,7 @@ const option = ref({
           <div class="tooltip-title">${params.name}</div>
           <div class="tooltip-content">
             <ul class="tooltip-ul"">
-              <li>发现问题数 <span>-</span></li>
+              <li>查实问题数 <span>-</span></li>
               <li>整改问题数 <span>-</span></li>
               <li>涉及单位数 <span>-</span></li>
               <li>涉及人数 <span>-</span></li>
@@ -461,6 +466,7 @@ const option = ref({
       type: "map",
       map: "changsha",
       hoverAnimation: true,
+      roam: true,
       label: {
         show: true,
         color: "white",
diff --git a/src/views/datav/subOnedatav/SubOneCaseVerif.vue b/src/views/datav/subOnedatav/SubOneCaseVerif.vue
new file mode 100644
index 0000000..4b7386a
--- /dev/null
+++ b/src/views/datav/subOnedatav/SubOneCaseVerif.vue
@@ -0,0 +1,735 @@
+<template>
+  <el-scrollbar height="100vh">
+    <div class="wrapper">
+      <datav-header/>
+      <main>
+        <el-row :gutter="16">
+          <el-col :span="6">
+            <datav-card title="所队排名" subTitle="查实案件数">
+              <datav-tabs
+                  type="bottom-button"
+              >
+                <datav-tab-item label="派出所" name="1">
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+                        :data="fxsjBarList"
+                        size="large"
+                        :color="colors"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+                <datav-tab-item label="大队" name="2">
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+                        :data="jsdwBarList"
+                        :max="11"
+                        size="large"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+              </datav-tabs>
+            </datav-card>
+            <datav-card title="案件问题性质">
+              <datav-tabs>
+                <datav-tab-item label="执法办案" name="1">
+                  <v-charts
+                      style="height: 320px"
+                      :option="zfbaPieOption"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="服务管理" name="2">
+                  <v-charts
+                      style="height: 320px"
+                      :option="fwglPieOption"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="警纪警规" name="3">
+                  <v-charts
+                      style="height: 320px"
+                      :option="jgjjPieOption"
+                      autoresize
+                  />
+                </datav-tab-item>
+              </datav-tabs>
+            </datav-card>
+          </el-col>
+          <el-col :span="12">
+            <datav-date-picker v-model="time"/>
+            <div class="flex gap-42">
+              <datav-statistic
+                  :value="overview.total"
+                  title="案件总数（起）"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.confirmed"
+                  title="查实案件数"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.dealCasePro"
+                  title="查处问题（个）"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.punishPre"
+                  title="问责人次"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.punishOrg"
+                  title="问责单位数"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.rate"
+                  value-unit="%"
+                  title="查实率"
+                  style="width: 16.66%"
+              />
+            </div>
+            <v-charts
+                style="height: 420px"
+                :option="option"
+                autoresize
+                ref="chart"
+            />
+            <datav-card title="查实问题趋势">
+              <v-charts
+                  style="height: 320px"
+                  :option="proTrend"
+                  autoresize
+              />
+              <div class="gobal-dropdown-container">
+                <el-dropdown class="test" @command="handleCommand">
+                   <span class="el-dropdown-link my-gobal-yearselect">
+                      {{ selectedYear + " 年" }}
+                    </span>
+                  <template #dropdown>
+                    <el-dropdown-menu style="width: 90px">
+                      <el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </datav-card>
+          </el-col>
+          <el-col :span="6">
+            <datav-card>
+              <datav-tabs>
+                <datav-tab-item label="案件来源占比" name="1">
+                  <div class="mb-40">
+                    <v-charts
+                        style="height: 340px"
+                        :option="ajlyPieOption"
+                        autoresize
+                    />
+                  </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>
+            <datav-card>
+              <datav-tabs>
+                <datav-tab-item label="禁闭处理情况" name="1">
+                  <div class="mb-40">
+                    <v-charts
+                        style="height: 340px"
+                        :option="jbcloption"
+                        autoresize
+                    />
+                  </div>
+                </datav-tab-item>
+                <datav-tab-item label="停职处理情况" name="2">
+                  <div class="mb-40">
+                    <v-charts
+                        style="height: 340px"
+                        :option="tzcloption"
+                        autoresize
+                    />
+                  </div>
+                </datav-tab-item>
+              </datav-tabs>
+            </datav-card>
+          </el-col>
+        </el-row>
+      </main>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import vCharts from "vue-echarts";
+import changshaMap from "@/assets/data/changsha.json";
+import * as echarts from "echarts/core";
+import moment from "moment";
+import {getCaseVerificationMap } from "@/api/screen/CaseVerif.ts";
+import {getSubOneStreetMap} from "@/api/screen/sub1.ts";
+import {
+  getSubOneAllCaseVerificationCount,
+  getSubOneCaseProblemProperty, getSubOneCaseSourceRateAndDealSituation,
+  getSubOneCaseVerificationRank, getSubOneCaseVerificationTrend
+} from "@/api/screen/subScreen/subOneCaseVerif.ts";
+
+const currentYear = new Date().getFullYear();
+const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
+const selectedYear = ref(currentYear); // 当前选中的年份
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+const route = useRoute();
+const currentDepartId = route.query.departId;
+const chart = ref(null);  // 地图
+const currentMapData = ref({})  // 地图数据
+const fxsjBarList = ref([]);
+const jsdwBarList = ref([]);
+const overview = ref({
+  total: 0,
+  confirmed: 0,         // 查实案件数
+  dealCasePro: 0,     // 查处问题（个）
+  punishPre: 0,   // 问责人次
+  punishOrg: 0,   // 问责单位数、
+  rate: 0,   // 查实率
+});
+let gobalTempMapVoList = ref([]);
+
+
+
+
+
+// region 事件||监听
+const handleCommand = ( year) => {
+  selectedYear.value = year; // 更新当前选中的年份
+  getProTrendList(currentDepartId,year);
+};
+watch(time, () => {
+  getData();
+});
+onMounted(() => {
+  getData();
+});
+// endregion
+
+
+
+
+// region 所有函数
+const getMapJSON = async (departId) => {
+  const res = await getSubOneStreetMap(departId);
+  currentMapData.value = res;
+  echarts.registerMap("changsha", res);
+  chart.value.chart.setOption(option.value);
+}
+const getRankListData = async(departId, timeValue) => {
+  const res = await getSubOneCaseVerificationRank(departId, timeValue);
+  fxsjBarList.value = res.fxsjRankList
+  jsdwBarList.value = res.jsdwRankList
+}
+
+const getCaseProblemPropertyList = async(departId, timeValue) => {
+  const res = await getSubOneCaseProblemProperty(departId,timeValue);
+  zfbaPieOption.value.series[0].data = res.zfbaPieList;
+  fwglPieOption.value.series[0].data = res.fwglPieList;
+}
+const getOverview = async(departId, timeValue)=>{
+  const res =  await getSubOneAllCaseVerificationCount(departId, timeValue)
+  overview.value = res.overview
+}
+const getMapIcon = async(timeValue)=> {
+  // const res = await getCaseVerificationMap(timeValue);
+  // const mappedData = res.caseVerificationMapList.map(item => {
+  //   let name;
+  //   switch (item.name) {
+  //     case '长沙县局':
+  //       name = '长沙县';
+  //       break;
+  //     case '芙蓉分局':
+  //       name = '芙蓉区';
+  //       break;
+  //     case '天心分局':
+  //       name = '天心区';
+  //       break;
+  //     case '岳麓分局':
+  //       name = '岳麓区';
+  //       break;
+  //     case '开福分局':
+  //       name = '开福区';
+  //       break;
+  //     case '雨花分局':
+  //       name = '雨花区';
+  //       break;
+  //     case '望城分局':
+  //       name = '望城区';
+  //       break;
+  //     case '宁乡市局':
+  //       name = '宁乡市';
+  //       break;
+  //     case '浏阳市局':
+  //       name = '浏阳市';
+  //       break;
+  //     case '高新分局':
+  //       name = '高新区';
+  //       break;
+  //     default:
+  //       name = item.name;
+  //       break;
+  //   }
+  //   return {
+  //     ...item,
+  //     originalName: item.name, // 添加原始名称
+  //     name: name,
+  //     value: item.total,
+  //   };
+  // });
+  // gobalTempMapVoList.value = mappedData
+  // const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
+  // const avg = total / mappedData.length; // 计算平均值
+  // const range30Percent = avg*0.3   // 不用取整，小数也可以
+  // option.value.series[0].data = mappedData;
+  // option.value.visualMap.pieces = [
+  //   {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
+  //   {gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
+  //   {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
+  // ];
+}
+
+const getProTrendList= async(departId, year) => {
+  const res = await getSubOneCaseVerificationTrend(departId, year);
+  const temp = res.proTrendList;
+  const categories = temp.map(item => item.name);
+  const values = temp.map(item => item.value);
+  proTrend.value.xAxis.data = categories;
+  proTrend.value.series[0].data = values;
+}
+const getCaseSourceAndDeal = async (departId, timeValue)=>{
+  const res = await getSubOneCaseSourceRateAndDealSituation(departId, timeValue);
+  ajlyPieOption.value.series[0].data = res.caseSourceRateList
+  wzclPieOption.value.series[0].data = res.dealSituationPieList
+}
+
+// const getConfinementAndPauseList =  async (timeValue)=>{
+//   const res = await getConfinementAndPause(timeValue);
+//   jbcloption.value.series[0].data = res.jbclList;
+//   tzcloption.value.series[0].data = res.dzclList;
+// }
+
+function getData() {
+  getMapJSON(currentDepartId)
+  getRankListData(currentDepartId,time.value)
+  getCaseProblemPropertyList(currentDepartId,time.value)
+  getOverview(currentDepartId,time.value)
+  getProTrendList(currentDepartId,currentYear)
+  getCaseSourceAndDeal(currentDepartId,time.value)
+}
+
+
+// endregion
+
+
+
+echarts.registerMap("changsha", changshaMap);
+const option = ref({
+  geo: {
+    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
+    map: "changsha",
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: function (params) {
+      console.log(params)
+      const dataItem = gobalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
+      if (dataItem  ) {
+        return `
+        <div class="tooltip">
+          <div class="tooltip-title">${dataItem.originalName}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul" >
+              <li>案件总数（起）<span>${dataItem.total}</span></li>
+              <li>查实案件数 <span>${dataItem.confirmed}</span></li>
+              <li>查处问题（个） <span>${dataItem.dealCasePro}</span></li>
+              <li>问责人次 <span>${dataItem.punishPre}</span></li>
+              <li>问责单位数 <span>${dataItem.punishOrg}</span></li>
+              <li>查实率 <span>${dataItem.rate}</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>-</span></li>
+              <li>查实案件数 <span>-</span></li>
+              <li>查处问题（个） <span>-</span></li>
+              <li>问责人次 <span>-</span></li>
+              <li>问责单位数 <span>-</span></li>
+              <li>查实率 <span>-</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: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6"},
+      {gte: 200, lte: 400, label: "平均问题上下浮动30%内", color: "#F6A149"},
+      {gte: 400, label: "高于平均问题30%", color: "#D34343"},],
+    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: {
+        areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
+        borderColor: "#24D2EE",
+        borderWidth: 1 // 高亮时边框宽度
+      },
+      data: [],
+    },
+  ],
+});
+const proTrend = ref({
+  grid: {
+    left: '5%', // 图表距离容器左边的距离
+    right: '2%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
+  xAxis: {
+    type: "category",
+    boundaryGap: true,
+    axisTick: {
+      // 去掉X轴刻度线
+      show: false
+    },
+    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'],
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false,
+      },
+      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: [],
+    },
+  ],
+});
+const ajlyPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});
+const wzclPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});
+const zfbaPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});
+const fwglPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});
+const jgjjPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});
+const jbcloption = ref({
+  tooltip: {
+    trigger: "item",
+  },
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        // {value: 14, name: "工作饮酒"},
+        // {value: 11, name: "违规办案"},
+        // {value: 3, name: "涉嫌违纪"},
+        // {value: 2, name: "违反“三个规定”"},
+        // {value: 12, name: "违反生活纪律、工作纪律"},
+        // {value: 8, name: "违规接受管理服务对象宴请"},
+        // {value: 2, name: "酒后驾车、涉嫌违法"},
+        // {value: 2, name: "执法乱作为"},
+        // {value: 3, name: "为落实请示报告制度"},
+      ],
+    },
+  ],
+});
+const tzcloption = ref({
+  tooltip: {
+    trigger: "item",
+  },
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        // {value: 14, name: "工作饮酒"},
+        // {value: 11, name: "违规办案"},
+        // {value: 3, name: "涉嫌违纪"},
+        // {value: 2, name: "违反“三个规定”"},
+        // {value: 12, name: "违反生活纪律、工作纪律"},
+        // {value: 8, name: "违规接受管理服务对象宴请"},
+        // {value: 2, name: "酒后驾车、涉嫌违法"},
+        // {value: 2, name: "执法乱作为"},
+        // {value: 3, name: "为落实请示报告制度"},
+      ],
+    },
+  ],
+});
+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";
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 160px;
+    height: 194px;
+    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: 160px;
+    height: 43px;
+    background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%);
+    box-shadow: inset 0px -1px 0px 0px #253755;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    border-bottom: 1px solid #253755; /* 设置下边框 */
+  }
+
+  .tooltip-content {
+    width: 160px;
+    height: 150px;
+    background: linear-gradient(180deg, #010457 0%, #031577 100%)
+  }
+
+  .tooltip-content ul {
+    list-style-type: none; /* 移除默认的小圆点 */
+    padding-left: 5px;
+    margin: 0;
+  }
+
+  .tooltip-content ul li {
+    height: 24px;
+    color: #597AE9;
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+
+  //// 数字的span
+  .tooltip-ul span {
+    float: right;
+    width: 55px;
+    color: #fff;
+    font-size: 14px;
+    text-align: center; /* 水平居中 */
+
+  }
+
+
+  ///* 小尖角 */
+  //.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; /* 右边颜色，与背景颜色相同 */
+  //}
+
+}
+
+.gobal-dropdown-container {
+  position: absolute;
+  right: 20px;
+  top: 15px;
+}
+.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>
+
+
diff --git a/src/views/datav/subOnedatav/SubOneMailVisits.vue b/src/views/datav/subOnedatav/SubOneMailVisits.vue
new file mode 100644
index 0000000..4a13217
--- /dev/null
+++ b/src/views/datav/subOnedatav/SubOneMailVisits.vue
@@ -0,0 +1,1122 @@
+<template>
+  <el-scrollbar height="100vh">
+    <div class="wrapper">
+      <datav-header/>
+      <main>
+        <el-row :gutter="16">
+          <el-col :span="6">
+            <datav-card title="初访重访情况">
+              <el-row class="mb-32">
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ firstAndRepeatOverview.firstMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      初信初访
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ firstAndRepeatOverview.repeatMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      重复信访
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ firstAndRepeatOverview.leaderMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      领导接访数
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+              <datav-card>
+                <datav-tabs v-model="activeTab">
+                  <datav-tab-item label="派出所" name="1">
+                    <datav-tabs
+                        v-model="activeMailTab"
+                        type="bottom-button"
+                    >
+                      <datav-tab-item label="初信初访" name="1">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="fxsjFirstMailList"
+                              size="large"
+                              :max="11"
+                              :color="colors"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                      <datav-tab-item label="重复信访" name="2">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="fxsjRepeatMailList"
+                              :max="11"
+                              size="large"
+                              :color="colors"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                      <datav-tab-item label="领导接访" name="3">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="fxsjLeaderViewMailList"
+                              :max="11"
+                              size="large"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                    </datav-tabs>
+                  </datav-tab-item>
+                  <datav-tab-item label="大队" name="2">
+                    <datav-tabs
+                        v-model="bwzdActiveTab"
+                        type="bottom-button"
+                    >
+                      <datav-tab-item label="初信初访" name="1">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="bwzdFirstMailList"
+                              size="large"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                      <datav-tab-item label="重复信访" name="2">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="bwzdRepeatMailList"
+                              :max="11"
+                              size="large"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                      <datav-tab-item label="领导接访" name="3">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="bwzdLeaderViewMailList"
+                              :max="11"
+                              size="large"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                    </datav-tabs>
+                  </datav-tab-item>
+                </datav-tabs>
+              </datav-card>
+            </datav-card>
+
+
+            <datav-card title="信访问题类型">
+              <v-charts
+                  style="height: 300px"
+                  :option="option2"
+                  autoresize
+              />
+              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
+                <div class="tab-title-item active">
+                </div>
+              </div>
+            </datav-card>
+
+          </el-col>
+
+          <el-col :span="12">
+            <div class="datav-col">
+              <datav-date-picker v-model="time"/>
+            </div>
+            <div class="flex gap-42">
+              <datav-statistic
+                  :value="overview.manageMail"
+                  title="局长信箱"
+                  style="width: 20%"
+              />
+
+              <datav-statistic
+                  :value="overview.totalMail"
+                  title="信访总件数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="overview.countryMail"
+                  title="国家信访"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="overview.policeMail"
+                  title="公安部信访"
+                  style="width: 20%"
+              />
+
+              <datav-statistic
+                  :value="overview.numberMail"
+                  title="12337信访"
+                  style="width: 20%"
+              />
+            </div>
+
+            <v-charts
+                style="height: 450px"
+                :option="option"
+                autoresize
+                ref="chart"
+            />
+
+            <datav-card title="信访趋势">
+              <datav-tabs v-model="activeMailTrend" @change="handleTabChange">
+                <datav-tab-item label="国家信访" name="1">
+                  <v-charts
+                      style="width: 105%; height: 300px;"
+                      :option="countryTrend"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="公安部信访" name="2">
+                  <v-charts
+                      style="width: 105%; height: 300px; "
+                      :option="policeTrend"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="12337信访" name="4">
+                  <v-charts
+                      style="width: 105%; height: 300px; "
+                      :option="numberTrend"
+                      autoresize
+                  />
+                </datav-tab-item>
+              </datav-tabs>
+              <div class="gobal-dropdown-container">
+                <el-dropdown class="test" @command="handleCommand">
+                    <span class="el-dropdown-link my-gobal-yearselect">
+                      {{ selectedYear + " 年" }}
+                    </span>
+                  <template #dropdown>
+                    <el-dropdown-menu style="width: 90px">
+                      <el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </datav-card>
+
+          </el-col>
+
+          <el-col :span="6">
+            <datav-card title="缠访集访情况">
+              <el-row class="mb-32">
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ mailEntanglementMassOverview.leaderReview }}
+                    </div>
+                    <div class="descriptions_label">
+                      领导督办
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ mailEntanglementMassOverview.entanglement }}
+                    </div>
+                    <div class="descriptions_label">
+                      缠访闹访
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ mailEntanglementMassOverview.mass }}
+                    </div>
+                    <div class="descriptions_label">
+                      群体集访
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+              <datav-card>
+                <datav-tabs>
+                  <datav-tab-item label="派出所" name="1">
+                    <datav-tabs
+                        type="bottom-button"
+                    >
+                      <datav-tab-item label="领导督办" name="1">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="fxsjLeaderReviewMailList"
+                              size="large"
+                              :max="11"
+                              :color="colors"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                      <datav-tab-item label="缠访闹访" name="2">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="fxsjEntanglementMailList"
+                              :max="11"
+                              size="large"
+                              :color="colors"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                      <datav-tab-item label="群体集访" name="3">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="fxsjMassMailList"
+                              :max="11"
+                              size="large"
+                              :color="colors"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                    </datav-tabs>
+                  </datav-tab-item>
+                  <datav-tab-item label="大队" name="2">
+                    <datav-tabs
+                        type="bottom-button"
+                    >
+                      <datav-tab-item label="领导督办" name="1">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="bwzdLeaderReviewMailList"
+                              size="large"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                      <datav-tab-item label="缠访闹访" name="2">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="bwzdEntanglementMailList"
+                              :max="11"
+                              size="large"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                      <datav-tab-item label="群体集访" name="3">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="bwzdMassMailList"
+                              :max="11"
+                              size="large"
+                              :color="colors"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
+                    </datav-tabs>
+                  </datav-tab-item>
+                </datav-tabs>
+              </datav-card>
+            </datav-card>
+
+            <datav-card title="追责问责情况">
+              <v-charts
+                  style="height: 300px"
+                  :option="option3"
+                  autoresize
+              />
+              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
+                <div class="tab-title-item active">
+                </div>
+              </div>
+            </datav-card>
+          </el-col>
+        </el-row>
+      </main>
+    </div>
+  </el-scrollbar>
+
+</template>
+
+
+<script setup>
+import vCharts from "vue-echarts";
+import changshaMap from "@/assets/data/changsha.json";
+import * as echarts from "echarts/core";
+import moment from "moment/moment.js";
+import {
+  getAllMailCount,
+  getEntanglementAndMassMail,
+  getFirstAndRepeatMail,
+  getMailMapIcon,
+  getMailTrend
+} from "@/api/screen/mail.ts";
+import {getSubOneStreetMap} from "@/api/screen/sub1.ts";
+import {getSubOneFirstAndRepeatMail} from "@/api/screen/subScreen/subOneMailVisits.ts";
+
+
+//region  所有变量
+let timer;
+const activeTab = ref("1");
+const bwzdActiveTab = ref("1");  // 部委支队初重信tab
+const activeMailTrend = ref("1");   // 信访趋势tab
+const activeMailTab = ref("1");
+
+const overview = ref({
+  totalMail: 0,
+  countryMail: 0,
+  policeMail: 0,
+  numberMail: 0,
+  manageMail: 0,
+});  // 总览
+
+const firstAndRepeatOverview = ref({
+  firstMail: 0,
+  repeatMail: 0,
+  leaderMail: 0
+});
+const fxsjFirstMailList = ref([]);  // 分局初信初访
+const fxsjRepeatMailList = ref([]);  // 分局重访
+const fxsjLeaderViewMailList = ref([]);   // 分局领导接访
+const bwzdFirstMailList = ref([]);   // 部委初信
+const bwzdRepeatMailList = ref([]);   // 部委重访
+const bwzdLeaderViewMailList = ref([]);   // 部委领导接访
+const mailEntanglementMassOverview = ref({
+  entanglement: 0,
+  mass: 0,
+  leaderReview: 0,
+})
+const fxsjLeaderReviewMailList = ref([]);   // 分局领导督察
+const fxsjEntanglementMailList = ref([]);  // 分局缠闹
+const fxsjMassMailList = ref([]);   // 分局集访
+const bwzdLeaderReviewMailList = ref([]);   // 分局领导督察
+const bwzdEntanglementMailList = ref([]);  // 部委缠闹
+const bwzdMassMailList = ref([]);  // 部委集访
+
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+const currentYear = new Date().getFullYear();
+const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
+const selectedYear = ref(currentYear); // 当前选中的年份
+const route = useRoute();
+const currentDepartId = route.query.departId;
+const chart = ref(null);  // 地图
+const currentMapData = ref({})  // 地图数据
+//endregion
+
+// region 所有函数
+
+const getMapJSON = async (departId) => {
+  const res = await getSubOneStreetMap(departId);
+  currentMapData.value = res;
+  echarts.registerMap("changsha", res);
+  chart.value.chart.setOption(option.value);
+}
+
+const getFirstAndRepeatMailRank = async (timeValue = time.value) => {
+  const res = await getSubOneFirstAndRepeatMail(timeValue)
+  firstAndRepeatOverview.value = res.firstAndRepeatOverview;
+  fxsjFirstMailList.value = res.fxsjFirstRankList;
+  fxsjRepeatMailList.value = res.fxsjRepeatRankList;
+  fxsjLeaderViewMailList.value = res.fxsjLeaderViewRankList;
+
+  bwzdFirstMailList.value = res.bwzdFirstRankList;
+  bwzdRepeatMailList.value = res.bwzdRepeatRankList;
+  bwzdLeaderViewMailList.value = res.bwzdLeaderViewRankList;
+
+}
+const getOverview = async (timeValue = time.value) => {
+  const res = await getAllMailCount(timeValue)
+  overview.value = res.overview;
+}
+const getTrend = async (year = selectedYear.value) => {
+  const res = await getMailTrend(year);
+  const policeList = res.policeList;
+  const manageList = res.manageList;
+  const numberList = res.numberList;
+  const countryList = res.countryList;
+  const policecategories = policeList.map(item => item.name);
+  const policevalues = policeList.map(item => item.value);
+  const managecategories = manageList.map(item => item.name);
+  const managevalues = manageList.map(item => item.value);
+  const numbercategories = numberList.map(item => item.name);
+  const numbervalues = numberList.map(item => item.value);
+  const countrycategories = countryList.map(item => item.name);
+  const countryvalues = countryList.map(item => item.value);
+  // 更新图表数据
+  policeTrend.value.xAxis.data = policecategories;
+  policeTrend.value.series[0].data = policevalues;
+  manageTrend.value.xAxis.data = managecategories;
+  manageTrend.value.series[0].data = managevalues;
+  numberTrend.value.xAxis.data = numbercategories;
+  numberTrend.value.series[0].data = numbervalues;
+  countryTrend.value.xAxis.data = countrycategories;
+  countryTrend.value.series[0].data = countryvalues;
+}
+const getEntangleMassRank = async (timeValue = time.value) => {
+  const res = await getEntanglementAndMassMail(timeValue)
+  mailEntanglementMassOverview.value = res.mailEntanglementMassOverview;
+  fxsjEntanglementMailList.value = res.fxsjEntanglementList;
+  fxsjMassMailList.value = res.fxsjMassList;
+  fxsjLeaderReviewMailList.value = res.fxsjLeaderReviewList;
+
+  bwzdLeaderReviewMailList.value = res.bwzdLeaderReviewList;
+  bwzdEntanglementMailList.value = res.bwzdEntanglementList;
+  bwzdMassMailList.value = res.bwzdMassList;
+}
+
+const mailMapIconList = ref([]);
+const getMailMapIconList = async (timeValue = time.value) => {
+  const res = await getMailMapIcon(timeValue);
+  const mappedData = res.mailMapIconList.map(item => {
+    let name;
+    switch (item.name) {
+      case '长沙县局':
+        name = '长沙县';
+        break;
+      case '芙蓉分局':
+        name = '芙蓉区';
+        break;
+      case '天心分局':
+        name = '天心区';
+        break;
+      case '岳麓分局':
+        name = '岳麓区';
+        break;
+      case '开福分局':
+        name = '开福区';
+        break;
+      case '雨花分局':
+        name = '雨花区';
+        break;
+      case '望城分局':
+        name = '望城区';
+        break;
+      case '宁乡市局':
+        name = '宁乡市';
+        break;
+      case '浏阳市局':
+        name = '浏阳市';
+        break;
+      case '高新分局':
+        name = '高新区';
+        break;
+      default:
+        name = item.name;
+        break;
+    }
+    return {
+      ...item,
+      originalName: item.name, // 添加原始名称
+      name: name,
+      value: item.total,
+    };
+  });
+  mailMapIconList.value = mappedData;
+  console.log(mailMapIconList)
+  const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
+  const avg = total / mappedData.length; // 计算平均值
+  const range30Percent = avg*0.3   // 不用取整，小数也可以
+  option.value.series[0].data = mappedData;
+  option.value.visualMap.pieces = [
+    {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
+    {gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: `平均问题上下浮动30%内`, color: "#F6A149"},
+    {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
+  ];
+}
+const getData = () => {
+  getFirstAndRepeatMailRank();
+  getOverview();
+  getMailMapIconList()
+  getTrend();
+  getEntangleMassRank();
+}
+// endregion
+
+
+// region 所有图
+echarts.registerMap("changsha", changshaMap);
+const gobalTempMapVoList = [
+  {
+    "name": "芙蓉分局",
+    "total": 704,
+    "countryTotal": 153,
+    "policeTotal": 506,
+    "numTotal": 45,
+  }, {
+    "name": "天心分局",
+    "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({
+  geo: {
+    map: "changsha",
+
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: function (params) {
+      console.log(params)
+      const dataItem = mailMapIconList.value.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.countryTotal}</span></li>
+              <li>公安部信访 <span>${dataItem.policeTotal}</span></li>
+                <li>局长信箱 <span>${dataItem.commissionerTotal}</span></li>
+              <li>12337信访 <span>${dataItem.numTotal}</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>局长信箱 <span>0</span></li>
+              <li>12337信访 <span>0</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
+    },
+  },
+  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",
+          borderColor: "#24D2EE",
+          borderWidth: 1 // 高亮时边框宽度
+        },
+      },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
+      },
+      data: gobalTempMapVoList.map(item => ({
+        name: item.name,
+        value: item.totalPro  // 将 totalPro 值映射到 value 字段
+      }))
+    }
+  ],
+})
+const policeTrend = ref({
+  grid: {
+    left: '5%', // 图表距离容器左边的距离
+    right: '2%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
+  xAxis: {
+    type: "category",
+    data: [],
+    boundaryGap: true,
+    axisTick: {
+      // 去掉X轴刻度线
+      show: false
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false
+      },
+      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: [],
+    },
+  ],
+});
+const manageTrend = ref({
+  grid: {
+    left: '5%', // 图表距离容器左边的距离
+    right: '2%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
+  xAxis: {
+    type: "category",
+    data: [],
+    boundaryGap: true,
+    axisTick: {
+      // 去掉X轴刻度线
+      show: false
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false
+      },
+      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: [],
+    },
+  ],
+});
+const numberTrend = ref({
+  grid: {
+    left: '5%', // 图表距离容器左边的距离
+    right: '2%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
+  xAxis: {
+    type: "category",
+    data: [],
+    boundaryGap: true,
+    axisTick: {
+      // 去掉X轴刻度线
+      show: false
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false
+      },
+      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: [],
+    },
+  ],
+});
+const countryTrend = ref({
+  grid: {
+    left: '5%', // 图表距离容器左边的距离
+    right: '2%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
+  xAxis: {
+    type: "category",
+    data: [],
+    boundaryGap: true,
+    axisTick: {
+      // 去掉X轴刻度线
+      show: false
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false
+      },
+      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: [],
+    },
+  ],
+});
+const option2 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {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",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 10, name: "通报批评"},
+        {value: 2, name: "责令检查"},
+        {value: 1, name: "诫勉谈话"},
+        {value: 1, name: "批评教育"},
+      ],
+    },
+  ],
+};
+// endregion
+
+
+const handleCommand = (year) => {
+  selectedYear.value = year;
+  getTrend()
+};
+// 监听信访趋势tab切换
+watch(time, () => {
+  getData();
+})
+onMounted(() => {
+  getMapJSON(currentDepartId)
+  getData();
+  // timer = setInterval(() => {
+  //   activeMailTab.value = (parseInt(activeMailTab.value) % 3 + 1).toString();
+  //   console.log("Active Tab: ", activeMailTab.value);
+  // }, 3000); // 每3秒切换一次
+});
+
+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";
+
+.dropdown-container {
+  position: absolute;
+  right: 30px;
+  top: 65px;
+}
+
+.datav-tab-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 160px;
+    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: 160px;
+    height: 43px;
+    background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%);
+    box-shadow: inset 0px -1px 0px 0px #253755;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    border-bottom: 1px solid #253755; /* 设置下边框 */
+  }
+
+  .tooltip-content {
+    width: 160px;
+    height: 133px;
+    background: linear-gradient(180deg, #010457 0%, #031577 100%)
+  }
+
+  .tooltip-content ul {
+    list-style-type: none; /* 移除默认的小圆点 */
+    padding-left: 5px;
+    margin: 0;
+  }
+
+  .tooltip-content ul li {
+    height: 26px;
+    color: #597AE9;
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+  .tooltip-ul span {
+    float: right;
+    width: 55px;
+    color: #fff;
+    font-size: 14px;
+    text-align: center; /* 水平居中 */
+  }
+
+}
+
+
+.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>
+
+<!--
+<datav-tab-item label="局长信箱" name="3">
+<v-charts
+    style="width: 105%; height: 300px; "
+    :option="manageTrend"
+    autoresize
+/>
+</datav-tab-item>-->
diff --git a/src/views/datav/subOnedatav/SubOneSceneInsp.vue b/src/views/datav/subOnedatav/SubOneSceneInsp.vue
new file mode 100644
index 0000000..fa1aab7
--- /dev/null
+++ b/src/views/datav/subOnedatav/SubOneSceneInsp.vue
@@ -0,0 +1,1360 @@
+<template>
+  <el-scrollbar height="100vh">
+    <div class="wrapper">
+      <datav-header/>
+      <main>
+        <el-row :gutter="16">
+
+          <el-col :span="6">
+            <datav-card title="日常督察情况">
+
+              <datav-tabs
+                  v-model="activeOrgTab"
+                  type="bottom-button"
+              >
+                <datav-tab-item label="派出所" name="1">
+                  <el-row class="mb-32">
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ fxsjRankOverview.proTotal }}
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ fxsjRankOverview.changing }}
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ fxsjRankOverview.changed }}
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ fxsjRankOverview.correctionRate }}%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+                        :data="fxsjChangedRankList"
+                        :size="small"
+                        title="整改率排名"
+                        sub-title="已整改/问题数"
+                        unit="%"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+                <datav-tab-item label="大队" name="2">
+                  <el-row class="mb-32">
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ jsdwRankOverview.proTotal }}
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ jsdwRankOverview.changing }}
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ jsdwRankOverview.changed }}
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          {{ jsdwRankOverview.correctionRate }}%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+                        :data="jsdwChangedRankList"
+                        :size="small"
+                        title="整改率排名"
+                        sub-title="已整改/问题数"
+                        unit="%"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+              </datav-tabs>
+
+
+            </datav-card>
+
+
+            <datav-card title="问题类型占比">
+              <v-charts
+                  style="height: 310px"
+                  :option="wtlxPieOption"
+                  autoresize
+              />
+            </datav-card>
+          </el-col>
+
+          <el-col :span="12">
+            <datav-date-picker v-model="time"/>
+            <div class="flex gap-42">
+              <datav-statistic
+                  :value="overview.supervisionNotifyTotal"
+                  title="通报问题数"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.supervisionNotifyChangingTotal"
+                  title="整改中"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.supervisionNotifyChangedTotal"
+                  title="已整改"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.supervisionNotifyOrgTotal"
+                  title="涉及单位数"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.supervisionNotifyPreTotal"
+                  title="涉及人数"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.correctionRate"
+                  value-unit="%"
+                  title="整改率"
+                  style="width: 16.66%"
+              />
+            </div>
+            <v-charts
+                style="height: 450px"
+                :option="option"
+                autoresize
+                ref="subOneSceneInspMapChart"
+            />
+            <datav-card title="问题趋势">
+              <v-charts
+                  style="height: 280px"
+                  :option="proTrend"
+                  autoresize
+              />
+              <div class="gobal-dropdown-container">
+                <el-dropdown class="test" @command="handleCommand">
+                    <span class="el-dropdown-link my-gobal-yearselect">
+                     {{ selectedYear + " 年" }}
+                    </span>
+                  <template #dropdown>
+                    <el-dropdown-menu style="width: 90px">
+                      <el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </datav-card>
+          </el-col>
+
+          <el-col :span="6">
+            <datav-card>
+              <datav-tabs v-model="activeTabRight" size="small">
+                <datav-tab-item label="黄赌毒" name="1">
+                  <datav-tabs
+                      type="bottom-button">
+                    <datav-tab-item label="派出所" name="1">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjYellowBetOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjYellowBetOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjYellowBetOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjYellowBetOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="fxsjYellowBetRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+                    <datav-tab-item label="大队" name="2">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwYellowBetOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwYellowBetOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwYellowBetOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwYellowBetOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="jsdwYellowBetRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+
+                  </datav-tabs>
+                </datav-tab-item>
+                <datav-tab-item label="枪支管理" name="2">
+                  <datav-tabs
+                      type="bottom-button">
+                    <datav-tab-item label="派出所" name="1">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjGunControllerOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjGunControllerOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjGunControllerOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjGunControllerOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="fxsjGunControllerRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+                    <datav-tab-item label="大队" name="2">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwGunControllerOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwGunControllerOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwGunControllerOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwGunControllerOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="jsdwGunControllerRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+
+                  </datav-tabs>
+                </datav-tab-item>
+                <datav-tab-item label="涉企问题" name="3">
+                  <datav-tabs
+                      type="bottom-button">
+                    <datav-tab-item label="派出所" name="1">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjCompanyProblemOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjCompanyProblemOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjCompanyProblemOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjCompanyProblemOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="fxsjCompanyProblemRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+                    <datav-tab-item label="大队" name="2">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwCompanyProblemOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwCompanyProblemOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwCompanyProblemOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwCompanyProblemOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="jsdwCompanyProblemRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+
+                  </datav-tabs>
+                </datav-tab-item>
+                <datav-tab-item label="执法办案" name="4">
+                  <datav-tabs
+                      type="bottom-button">
+                    <datav-tab-item label="派出所" name="1">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjHandleCaseOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjHandleCaseOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjHandleCaseOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjHandleCaseOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="fxsjHandleCaseRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+                    <datav-tab-item label="大队" name="2">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwHandleCaseOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwHandleCaseOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwHandleCaseOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwHandleCaseOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="jsdwHandleCaseRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+
+                  </datav-tabs>
+                </datav-tab-item>
+                <datav-tab-item label="工作日测酒" name="5">
+                  <datav-tabs
+                      type="bottom-button">
+                    <datav-tab-item label="派出所" name="1">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjCheckBeerOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjCheckBeerOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjCheckBeerOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ fxsjCheckBeerOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="fxsjCheckBeerRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+                    <datav-tab-item label="大队" name="2">
+                      <el-row class="mb-32">
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwCheckBeerOverview.proTotal }}
+                            </div>
+                            <div class="descriptions_label">
+                              问题数
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwCheckBeerOverview.changing }}
+                            </div>
+                            <div class="descriptions_label">
+                              整改中
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwCheckBeerOverview.changed }}
+                            </div>
+                            <div class="descriptions_label">
+                              已整改
+                            </div>
+                          </div>
+                        </el-col>
+                        <el-col :span="6">
+                          <div class="descriptions_cell text-center">
+                            <div class="descriptions_content">
+                              {{ jsdwCheckBeerOverview.correctionRate }}%
+                            </div>
+                            <div class="descriptions_label">
+                              整改率
+                            </div>
+                          </div>
+                        </el-col>
+                      </el-row>
+                      <el-scrollbar height="330px">
+                        <datav-chart-bar
+                            :data="jsdwCheckBeerRankList"
+                            size="large"
+                            title="问题数排名"
+                            sub-title="问题数"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+
+                  </datav-tabs>
+                </datav-tab-item>
+              </datav-tabs>
+            </datav-card>
+
+
+            <datav-card title="督察工作动态">
+              <el-scrollbar height="310px">
+                <datav-message
+                    v-for="(msg, index) in messages"
+                    :key="index"
+                    :type="msg.type"
+                    :title="msg.title"
+                    :content="msg.content" :date="msg.date"
+                />
+              </el-scrollbar>
+            </datav-card>
+          </el-col>
+
+        </el-row>
+      </main>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import vCharts from "vue-echarts";
+import changshaMap from "@/assets/data/changsha.json";
+import * as echarts from "echarts/core";
+import moment from "moment";
+
+import {getSubOneStreetMap} from "@/api/screen/sub1.ts";
+import {
+  getAllSubOneSupervisionNotifyCount,
+  getSubOneChangedRank, getSubOneCheckBeer, getSubOneCompanyProblem, getSubOneGunController, getSubOneHandleCase,
+  getSubOneProblemTypeRate,
+  getSubOneSupervisionTrend, getSubOneYellowBetDrug
+} from "@/api/screen/subScreen/subOneSupervisionNotify.ts";
+
+
+// region 所有变量
+const activeTabRight = ref("1")
+const overview = ref({
+  correctionRate: 0,
+  supervisionNotifyPreTotal: 0,
+  supervisionNotifyChangingTotal: 0,
+  supervisionNotifyChangedTotal: 0,
+  supervisionNotifyTotal: 0,
+  supervisionNotifyOrgTotal: 0,
+});  // 中央数据总览
+const fxsjRankOverview = ref({});  // 日常督察总览分县市局
+const jsdwRankOverview = ref({});  // 日常督察总览局属单位
+const fxsjChangedRankList = ref([]);  // 日常督察问题排行分县市局
+const jsdwChangedRankList = ref([]);  // 日常督察问题排行局属单位
+const wtlxList = ref([]);  // 问题类型占比
+
+const fxsjYellowBetOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 黄赌毒总览分县市局
+const jsdwYellowBetOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 黄赌毒总览局属单位
+const fxsjYellowBetRankList = ref([])  // 黄赌毒问题排行分县市局
+const jsdwYellowBetRankList = ref([])  // 黄赌毒问题排行局属单位
+
+const fxsjGunControllerOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 枪支管理总览分县市局
+const jsdwGunControllerOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 枪支管理总览局属单位
+const fxsjGunControllerRankList = ref([])  //  枪支管理排行分县市局
+const jsdwGunControllerRankList = ref([])  //  枪支管理排行局属单位
+
+const fxsjCompanyProblemOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 涉企问题总览分县市局
+const jsdwCompanyProblemOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 涉企问题局属单位
+const fxsjCompanyProblemRankList = ref([])  //  涉企问题排行分县市局
+const jsdwCompanyProblemRankList = ref([])  //  涉企问题排行局属单位
+
+const fxsjHandleCaseOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 执法办案总览分县市局
+const jsdwHandleCaseOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 执法办案总览局属单位
+const fxsjHandleCaseRankList = ref([])  //  执法办案排行分县市局
+const jsdwHandleCaseRankList = ref([])  //  执法办案排行局属单位
+
+const fxsjCheckBeerOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 工作日测酒总览分县市局
+const jsdwCheckBeerOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+})  // 工作日测酒总览局属单位
+const fxsjCheckBeerRankList = ref([])  //  工作日测酒排行分县市局
+const jsdwCheckBeerRankList = ref([])  //  工作日测酒排行局属单位
+
+const messages = ref([
+  {
+    type: '',
+    title: '工作简报',
+    content: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。',
+    date: '2024-09-27 10:32'
+  },
+  {
+    type: 'warning',
+    title: '工作简报',
+    content: '为持续抓好“六项规定”贯彻执行，扎实做好中秋佳节前队伍纪律作风监督，9月3日20时至22时，市局警务督察支队联合机关党委以及来支队跟班学习的督察专干，组成6个督察组，对干部、民警、辅警共计112人开展集中酒精吹气测试。',
+    date: '2024-09-06 16:23'
+  },
+  {
+    type: 'warning',
+    title: '工作简报',
+    content: '为强化队伍纪律作风监督，给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障，7月11日晚，市局警务督察支队联合机关党委，派出6个现场督察组，对干部、民警、辅警共计111人开展集中酒精吹气测试。',
+    date: '2024-07-15 14:39'
+  },
+  {
+    type: 'warning',
+    title: '工作简报',
+    content: '为督促各参战警力切实履职，拧紧责任链条，保障周杰伦演唱会安全顺利进行，根据市局统一部署，2024年5月30日至6月2日，由警务督察支队牵头，统筹参战单位督察力量，对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。',
+    date: '2024-06-06 09:04'
+  }
+]);
+const currentYear = new Date().getFullYear();
+const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
+const selectedYear = ref('2024'); // 当前选中的年份
+const avg = 1000
+const subOneSceneInspMapChart = ref(null);  // 地图
+const route = useRoute();
+const currentDepartId = route.query.departId;
+
+// endregion
+
+
+// region 所有图表
+const wtlxPieOption = computed(() => {
+  return {
+    tooltip: {
+      trigger: "item",
+    },
+    series: [
+      {
+        type: "pie",
+        radius: ["40%", "70%"],
+        label: {
+          color: "#fff",
+        },
+        data: wtlxList.value,
+      },
+    ],
+  };
+});
+echarts.registerMap("changsha", changshaMap);
+const superviseTempMapVoList = ref([]);
+const option = ref({
+  geo: {
+    map: "changsha",
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: function (params) {
+      console.log(params)
+      const dataItem = superviseTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
+      if (dataItem) {
+        return `
+        <div class="tooltip">
+          <div class="tooltip-title">${dataItem.originalName}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul" >
+              <li>通报问题数 <span>${dataItem.totalPro}</span></li>
+              <li>整改中 <span>${dataItem.changing}</span></li>
+              <li>已整改 <span>${dataItem.changed}</span></li>
+              <li>涉及单位数 <span>${dataItem.relationOrg}</span></li>
+              <li>涉及人数 <span>${dataItem.personNum}</span></li>
+              <li>整改率 <span>${dataItem.changedRate}%</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>-</span></li>
+              <li>整改中 <span>-</span></li>
+              <li>已整改 <span>-</span></li>
+              <li>涉及单位数 <span>-</span></li>
+              <li>涉及人数 <span>-</span></li>
+              <li>整改率 <span>-</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
+    },
+  },
+  visualMap: {
+    type: "piecewise",
+    bottom: 10,
+    pieces: [
+      {gte: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6"},
+      {gte: 200, lte: 400, label: "平均问题上下浮动30%内", color: "#F6A149"},
+      {gte: 400, label: "高于平均问题30%", color: "#D34343"},],
+    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",
+          borderColor: "#24D2EE",
+          borderWidth: 1 // 高亮时边框宽度
+        },
+      },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
+      },
+      data: []
+    }
+  ],
+})
+const proTrend = ref({
+  grid: {
+    left: '5%', // 图表距离容器左边的距离
+    right: '2%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
+  xAxis: {
+    type: "category",
+    data: [],
+    boundaryGap: true,
+    axisTick: {
+      // 去掉X轴刻度线
+      show: false
+    },
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false
+      },
+      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: [],
+    },
+  ],
+});
+// endregion
+
+
+const handleCommand = (year) => {
+  selectedYear.value = year; // 更新当前选中的年份
+  getSupervisionTrend(currentDepartId, year).then(res => {
+    const supervisionTrend = res.supervisionTrend;
+    const categories = supervisionTrend.map(item => item.name);
+    const values = supervisionTrend.map(item => item.value);
+    // 更新图表数据
+    proTrend.value.xAxis.data = categories;
+    proTrend.value.series[0].data = values;
+  });
+};
+
+
+// region 所有函数
+const getMapJSON = async (currentDepartId) => {
+  const res = await getSubOneStreetMap(currentDepartId)
+  echarts.registerMap("changsha", res);
+  subOneSceneInspMapChart.value.chart.setOption(option.value);
+}
+
+const getChangedRank = async(currentDepartId, times)=>{
+ const res =  await  getSubOneChangedRank(currentDepartId, times)
+  fxsjRankOverview.value = res.fxsjRankOverview;
+  jsdwRankOverview.value = res.jsdwRankOverview;
+  fxsjChangedRankList.value = res.fxsjChangedRankList;
+  jsdwChangedRankList.value = res.jsdwChangedRankList;
+  console.log(res);
+
+}
+
+const getProblemTypeRate = async(currentDepartId, times)=>{
+  const res =  await  getSubOneProblemTypeRate(currentDepartId, times)
+  wtlxList.value = res.wtlxList
+  console.log(res);
+}
+
+const getSupervisionOverView = async(currentDepartId, times)=>{
+  const res =  await  getAllSubOneSupervisionNotifyCount(currentDepartId, times)
+  Object.assign(overview.value, {
+    correctionRate: Number(res.overview.rectifyRate),
+    supervisionNotifyPreTotal: Number(res.overview.personNumber),
+    supervisionNotifyChangingTotal: Number(res.overview.rectifingNumber),
+    supervisionNotifyChangedTotal: Number(res.overview.rectifedNumber),
+    supervisionNotifyTotal: Number(res.overview.problemNumber),
+    supervisionNotifyOrgTotal: Number(res.overview.departNumber),
+  });
+}
+
+const getSupervisionTrend = async(currentDepartId, times)=>{
+  const res =  await  getSubOneSupervisionTrend(currentDepartId, times)
+  const supervisionTrend = res.supervisionTrend;
+  const categories = supervisionTrend.map(item => item.name);
+  const values = supervisionTrend.map(item => item.value);
+  proTrend.value.xAxis.data = categories;
+  proTrend.value.series[0].data = values;
+}
+
+const getYellowBetDrugData = async(currentDepartId, times)=>{
+  const res =  await getSubOneYellowBetDrug(currentDepartId, times)
+  fxsjYellowBetOverview.value = res.fxsjYellowBetOverview
+  jsdwYellowBetOverview.value = res.jsdwYellowBetOverview
+  fxsjYellowBetRankList.value = res.fxsjYellowBetRankList
+  jsdwYellowBetRankList.value = res.jsdwYellowBetRankList
+}
+
+const getGunControllerData = async(currentDepartId, times)=>{
+  const res =  await getSubOneGunController(currentDepartId, times)
+  fxsjGunControllerOverview.value = res.fxsjGunControllerOverview
+  jsdwGunControllerOverview.value = res.jsdwGunControllerOverview
+  fxsjGunControllerRankList.value = res.fxsjGunControllerRankList
+  jsdwGunControllerRankList.value = res.jsdwGunControllerRankList
+}
+
+const getCompanyProblemData = async(currentDepartId, times)=>{
+  const res =  await getSubOneCompanyProblem(currentDepartId, times)
+  fxsjCompanyProblemOverview.value = res.fxsjCompanyProblemOverview
+  jsdwCompanyProblemOverview.value = res.jsdwCompanyProblemOverview
+  fxsjCompanyProblemRankList.value = res.fxsjCompanyProblemRankList
+  jsdwCompanyProblemRankList.value = res.jsdwCompanyProblemRankList
+}
+
+const getHandleCaseData = async(currentDepartId, times)=>{
+  const res =  await getSubOneHandleCase(currentDepartId, times)
+  fxsjHandleCaseOverview.value = res.fxsjHandleCaseOverview
+  jsdwHandleCaseOverview.value = res.jsdwHandleCaseOverview
+  fxsjHandleCaseRankList.value = res.fxsjHandleCaseRankList
+  jsdwHandleCaseRankList.value = res.jsdwHandleCaseRankList
+}
+
+const getCheckBeerData = async(currentDepartId, times)=>{
+  const res =  await getSubOneCheckBeer(currentDepartId, times)
+  fxsjCheckBeerOverview.value = res.fxsjCheckBeerOverview
+  jsdwCheckBeerOverview.value = res.jsdwCheckBeerOverview
+  fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList
+  jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList
+}
+// endregion
+
+
+// region  初始化数据
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+
+
+const getData = async () => {
+  getMapJSON(currentDepartId);
+  getChangedRank(currentDepartId, time.value);
+  getProblemTypeRate(currentDepartId, time.value);
+  getSupervisionOverView(currentDepartId, time.value);
+  getSupervisionTrend(currentDepartId, time.value);
+  getYellowBetDrugData(currentDepartId, time.value);
+  getGunControllerData(currentDepartId, time.value);
+  getCompanyProblemData(currentDepartId, time.value);
+  getHandleCaseData(currentDepartId, time.value);
+  getCheckBeerData(currentDepartId, time.value);
+}
+
+watch(time, () => {
+  getData();
+});
+
+
+onMounted(() => {
+  getData();
+});
+
+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,
+  },
+];
+// endregion
+
+
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/datav.scss";
+
+.message {
+  padding: 10px;
+  margin-bottom: 10px;
+  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%);
+  }
+
+  &[type=success] {
+    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;
+  }
+}
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 160px;
+    height: 194px;
+    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: 160px;
+    height: 43px;
+    background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%);
+    box-shadow: inset 0px -1px 0px 0px #253755;
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    border-bottom: 1px solid #253755; /* 设置下边框 */
+  }
+
+  .tooltip-content {
+    width: 160px;
+    height: 150px;
+    background: linear-gradient(180deg, #010457 0%, #031577 100%)
+  }
+
+  .tooltip-content ul {
+    list-style-type: none; /* 移除默认的小圆点 */
+    padding-left: 5px;
+    margin: 0;
+  }
+
+  .tooltip-content ul li {
+    height: 24px;
+    color: #597AE9;
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+  .tooltip-ul span {
+    float: right;
+    width: 55px;
+    color: #fff;
+    font-size: 14px;
+    text-align: center; /* 水平居中 */
+  }
+
+  //.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>
\ No newline at end of file
diff --git a/src/views/datav/subOnedatav/SubOneVideoInsp.vue b/src/views/datav/subOnedatav/SubOneVideoInsp.vue
new file mode 100644
index 0000000..f822746
--- /dev/null
+++ b/src/views/datav/subOnedatav/SubOneVideoInsp.vue
@@ -0,0 +1,722 @@
+<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="问题数排名" sub-title="问题数" style="height: 370px;">
+              <datav-tabs
+                  type="bottom-button"
+              >
+                <datav-tab-item label="派出所" name="1">
+                  <el-scrollbar height="280px">
+                    <datav-chart-bar
+                        :data="fxsjRankList"
+                        size="large"
+                        :color="colors"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+                <datav-tab-item label="大队" name="2">
+                  <el-scrollbar height="280px">
+                    <datav-chart-bar
+                        :data="jsdwRankList"
+                        :max="11"
+                        size="large"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+              </datav-tabs>
+
+            </datav-card>
+          </el-col>
+
+          <el-col :span="12">
+            <datav-date-picker v-model="time"/>
+            <div class="flex gap-42">
+              <datav-statistic
+                  :value="overview.discoverProblem"
+                  title="发现问题数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="overview.changedProblem"
+                  title="整改问题数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="overview.relativeOrg"
+                  title="涉及单位数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="overview.relativePer"
+                  title="涉及人数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="overview.changedRate"
+                  value-unit="%"
+                  title="整改率"
+                  style="width: 20%"
+              />
+            </div>
+            <v-charts
+                style="height: 420px"
+                :option="option"
+                autoresize
+                ref="subOneVideoInspMapChart"
+            />
+            <datav-card title="问题趋势">
+              <v-charts
+                  style="height: 250px"
+                  :option="proTrend"
+                  autoresize
+              />
+              <div class="gobal-dropdown-container">
+                <el-dropdown class="test" @command="handleCommand">
+                   <span class="el-dropdown-link my-gobal-yearselect">
+                      {{ selectedYear + ' 年'}}
+                    </span>
+                  <template #dropdown>
+                    <el-dropdown-menu style="width: 90px">
+                      <el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </div>
+            </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="ProblemTypeRateChart"
+                  autoresize
+              />
+            </datav-card>
+          </el-col>
+        </el-row>
+      </main>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import changshaMap from "@/assets/data/changsha.json";
+import vCharts from "vue-echarts";
+import * as echarts from "echarts/core";
+import {
+   getVideoSuperviseMap
+} from "@/api/screen/videoSupervise.ts";
+import moment from "moment/moment.js";
+import {getSubOneStreetMap} from "@/api/screen/sub1.ts";
+import {
+  getSubOneAllVideoSuperviseCount,
+  getSubOneVideoSuperviseProblemRank, getSubOneVideoSuperviseProblemTypeRate, getSubOneVideoSuperviseTrend
+} from "@/api/screen/subScreen/subOneVideoSupervise.ts";
+
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+
+
+const fxsjRankList = ref([]);
+const jsdwRankList = ref([]);
+
+const overview = ref({
+  discoverProblem: 0,
+  changedProblem: 0,
+  relativeOrg: 0,
+  relativePer: 0,
+  changedRate: 0,
+});
+const mapIconList = ref([{
+  originalName:"浏阳市局",
+  name: "浏阳市",
+  discoverProblem: 135,
+  changedProblem: 135,
+  relativeOrg: 89,
+  relativePer: 152,
+  changedRate: 100
+}])
+
+const currentYear = new Date().getFullYear();
+const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
+const selectedYear = ref('2024'); // 当前选中的年份
+const currentMapData = ref({})
+const subOneVideoInspMapChart = ref(null);  // 地图
+const route = useRoute();
+const currentDepartId = route.query.departId;
+
+// region 所有函数
+
+const getMapJSON = async (departId) => {
+  const res = await getSubOneStreetMap(departId);
+  currentMapData.value = res;
+  echarts.registerMap("changsha", res);
+  subOneVideoInspMapChart.value.chart.setOption(option.value);
+}
+
+const getOverview = async (departId, timeValue) => {
+  const res = await getSubOneAllVideoSuperviseCount(departId, timeValue);
+  overview.value = res.overview;
+}
+const getMap = async (timeValue) => {
+  const res = await getVideoSuperviseMap(timeValue);
+  // console.log(res.videoSuperviseMapIconVoList)
+  const mappedData = res.videoSuperviseMapIconVoList.map(item => {
+    let name;
+    switch (item.name) {
+      case '长沙县局':
+        name = '长沙县';
+        break;
+      case '芙蓉分局':
+        name = '芙蓉区';
+        break;
+      case '天心分局':
+        name = '天心区';
+        break;
+      case '岳麓分局':
+        name = '岳麓区';
+        break;
+      case '开福分局':
+        name = '开福区';
+        break;
+      case '雨花分局':
+        name = '雨花区';
+        break;
+      case '望城分局':
+        name = '望城区';
+        break;
+      case '宁乡市局':
+        name = '宁乡市';
+        break;
+      case '浏阳市局':
+        name = '浏阳市';
+        break;
+      case '高新分局':
+        name = '高新区';
+        break;
+      default:
+        name = item.name;
+        break;
+    }
+    return {
+      ...item,
+      originalName: item.name, // 添加原始名称
+      name: name,
+      value: item.discoverProblem,
+    };
+  });
+  const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0);
+  const avg = total / mappedData.length; // 计算平均值
+  const range30Percent = avg*0.3   // 不用取整，小数也可以
+  mapIconList.value = mappedData
+  option.value.series[0].data = mapIconList
+  option.value.visualMap.pieces = [
+    {gte: 0, lte: avg - range30Percent, label: "低于平均问题30%", color: "#4987F6"},
+    {gte: avg - range30Percent, lte: avg + range30Percent+0.1, label: "平均问题上下浮动30%内", color: "#F6A149"},
+    {gte: avg + range30Percent, label: "高于平均问题30%", color: "#D34343"},
+  ];
+}
+
+
+const getProblemTypeRate = async (departId, timeValue) => {
+  const res = await getSubOneVideoSuperviseProblemTypeRate(departId, timeValue);
+  ProblemTypeRateChart.value.series[0].data = res.subOneVideoSuperviseProblemTypeRate
+}
+
+
+const getRankList = async (departId, timeValue) => {
+  const res = await getSubOneVideoSuperviseProblemRank(departId, timeValue);
+  fxsjRankList.value = res.policeVideoSuperviseProblemRankList
+  jsdwRankList.value = res.teamVideoSuperviseProblemRankList
+}
+const getTrend = async(departId, year)=> {
+  const res = await getSubOneVideoSuperviseTrend(departId, year);
+  const temp = res.videoSuperviseTrendList;
+  const categories = temp.map(item => item.name);
+  const values = temp.map(item => item.value);
+  proTrend.value.xAxis.data = categories;
+  proTrend.value.series[0].data = values;
+}
+const getData = async () => {
+  getOverview(currentDepartId,time.value);
+  getRankList(currentDepartId, time.value);
+  // getMap(time.value)
+  getTrend(currentDepartId, selectedYear.value)
+  getProblemTypeRate(currentDepartId, time.value)
+  // getProblemTypeRate(time.value);
+  getMapJSON(currentDepartId)
+}
+
+// endregion
+
+// region 初始化数据和事件监听
+watch(time, () => {
+  getData()
+})
+onMounted(() => {
+  getData()
+})
+const handleCommand = (year) => {
+  selectedYear.value = year; // 更新当前选中的年份
+  getTrend(currentDepartId, year)
+};
+// endregion
+
+
+// region 所有图表
+const proTrend = ref({
+  xAxis: {
+    type: "category",
+    boundaryGap: true,
+    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
+    axisTick: {
+      // 去掉X轴刻度线
+      show: false
+    },
+  },
+  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: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    },
+  ],
+  grid: {
+    left: '5%', // 图表距离容器左边的距离
+    right: '2%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
+});
+echarts.registerMap("changsha", changshaMap);
+const option = ref({
+  geo: {
+    map: "changsha",
+
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: function (params) {
+      const dataItem = mapIconList.value.find(item => item.name.includes(params.name.substring(0, 2)));
+      if (dataItem) {
+        return `
+        <div class="tooltip">
+          <div class="tooltip-title">${dataItem.originalName}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul" >
+              <li>发现问题数 <span>${dataItem.discoverProblem}</span></li>
+              <li>整改问题数 <span>${dataItem.changedProblem}</span></li>
+              <li>涉及单位数 <span>${dataItem.relativeOrg}</span></li>
+              <li>涉及人数 <span>${dataItem.relativePer}</span></li>
+              <li>整改率 <span>${dataItem.changedRate}%</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>-</span></li>
+              <li>整改问题数 <span>-</span></li>
+              <li>涉及单位数 <span>-</span></li>
+              <li>涉及人数 <span>-</span></li>
+              <li>整改率 <span>-</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
+    },
+  },
+  visualMap: {
+    type: "piecewise",
+    bottom: 10,
+    pieces: [
+      {gte: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6"},
+      {gte: 200, lte: 400, label: "平均问题上下浮动30%内", color: "#F6A149"},
+      {gte: 400, label: "高于平均问题30%", color: "#D34343"},],
+    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",
+          borderColor: "#24D2EE",
+          borderWidth: 1 // 高亮时边框宽度
+        },
+      },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
+      },
+      data: mapIconList,
+
+    }
+  ],
+})
+const ProblemTypeRateChart = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});  // 问题类型占比
+// endregion
+
+
+
+
+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;
+  }
+}
+
+.message {
+  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(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;
+    }
+  }
+
+  &.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;
+    }
+  }
+
+  .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; /* 右边颜色，与背景颜色相同 */
+  }
+
+
+}
+
+
+.gobal-dropdown-container {
+  position: absolute;
+  right: 20px;
+  top: 15px;
+}
+
+.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>
\ No newline at end of file
diff --git a/src/views/datav/subOnedatav/subOneAuditSuper.vue b/src/views/datav/subOnedatav/subOneAuditSuper.vue
new file mode 100644
index 0000000..4018f86
--- /dev/null
+++ b/src/views/datav/subOnedatav/subOneAuditSuper.vue
@@ -0,0 +1,732 @@
+<template>
+  <el-scrollbar height="100vh">
+    <div class="wrapper">
+      <datav-header/>
+      <main>
+        <el-row :gutter="16">
+          <el-col :span="6">
+            <datav-card title="审计整改结果" sub-title="已整改问题数/查出问题数">
+
+
+              <el-scrollbar height="350px">
+                <datav-chart-bar
+                    :size="small"
+                    :data="data1"
+                    unit="%"
+                    remark-font-size="12px"
+                    spanClass="right-aligned"
+                    :color="colors"
+
+                />
+              </el-scrollbar>
+
+
+            </datav-card>
+
+
+            <datav-card title="审计查出问题" style="height: 500px">
+              <v-charts
+                  style="height: 300px"
+                  :option="option22"
+                  autoresize
+              />
+
+
+            </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="temp.tempTotal"
+                  title="审计单位/项目"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="temp.tempTotalMon"
+                  :title="`审计总金额\n（万元）`"
+                  :isDecimal="true"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="temp.tempReviewMon"
+                  :title="`审减金额\n（万元）`"
+                  :isDecimal="true"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="temp.tempCheckPro"
+                  title="查出问题数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="temp.tempPro"
+                  title="追责问责数"
+                  style="width: 20%"
+              />
+            </div>
+            <v-charts
+                style="height: 450px"
+                :option="option"
+                autoresize
+            />
+            <datav-card title="审计工作趋势">
+              <v-charts
+                  style="height: 300px"
+                  :option="option1"
+                  autoresize
+              />
+            </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="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>
+            <datav-card title="审计工作动态">
+
+              <el-scrollbar height="470px">
+                <div class="message">
+                  <div class="message-title">审计公示</div>
+                  <div class="message-content">
+                    食药环支队：
+                    警务督察支队审计处派出审计组对食药环支队2022年1月至2023年12月办理的刑事、行政案件执法活动财物管理情况进行了审计，形成了《食药环支队2022年1月至2023年12月执法活动财物管理情况专项审计报告》。
+                  </div>
+                  <div class="message-footer flex end">
+                    <span>2024年8月26日</span>
+                  </div>
+                </div>
+                <div class="message" type="warning">
+                  <div class="message-title">审计公示</div>
+                  <div class="message-content">
+                    刑侦支队：
+                    警务督察支队审计处派出审计组对刑侦支队2022年1月至2023年12月办理的刑事、行政案件执法活动财物管理情况进行了审计，形成了《刑侦支队2022年1月至2023年12月执法活动财物管理情况专项审计报告》。
+                  </div>
+                  <div class="message-footer flex end">
+                    <span>2024年8月26日</span>
+                  </div>
+                </div>
+                <div class="message" type="success">
+                  <div class="message-title">审计公示</div>
+                  <div class="message-content">高新分局：
+                    警务督察支队审计处派出审计组对高新分局2022年1月至2023年12月办理的刑事、行政案件执法活动财物管理情况进行了审计，形成了《高新分局2022年1月至2023年12月执法活动财物管理情况专项审计报告》。
+                  </div>
+                  <div class="message-footer flex end">
+                    <span>2024年8月26日</span>
+                  </div>
+                </div>
+              </el-scrollbar>
+            </datav-card>
+          </el-col>
+        </el-row>
+      </main>
+    </div>
+  </el-scrollbar>
+</template>
+
+
+<script setup>
+import vCharts from "vue-echarts";
+import changshaMap from "@/assets/data/changsha.json";
+import * as echarts from "echarts/core";
+
+
+
+const temp = ref({
+  tempTotal: 0,
+  tempTotalMon: 0,
+  tempReviewMon: 0,
+  tempCheckPro: 0,
+  tempPro:0
+})
+
+setTimeout(() => {
+  temp.value={
+
+    tempTotal: 462,
+    tempTotalMon: 79224.59,
+    tempReviewMon: 3544.01,
+    tempCheckPro: 1192,
+    tempPro:389
+  }
+}, 1000);
+
+
+
+
+
+
+let gobalTempMapVoList = [
+  {
+    "name": "天心分局",
+    "reviewOrg": 0,
+    "checkPro": 0,
+    "rushPro": 0,
+    "changed": 0
+  },
+  {
+    "name": "开福分局",
+    "reviewOrg": 0,
+    "checkPro": 186,
+    "rushPro": 0,
+    "changed": 137
+  },
+  {
+    "name": "岳麓分局",
+    "reviewOrg": 0,
+    "checkPro": 11,
+    "rushPro": 0,
+    "changed": 0
+  },
+  {
+    "name": "望城分局",
+    "reviewOrg": 0,
+    "checkPro": 0,
+    "rushPro": 0,
+    "changed": 0
+  },
+  {
+    "name": "浏阳市局",
+    "reviewOrg": 0,
+    "checkPro": 0,
+    "rushPro": 0,
+    "changed": 0
+  },
+  {
+    "name": "长沙县局",
+    "reviewOrg": 0,
+    "checkPro": 0,
+    "rushPro": 0,
+    "changed": 0
+  },
+  {
+    "name": "芙蓉分局",
+    "reviewOrg": 0,
+    "checkPro": 1,
+    "rushPro": 0,
+    "changed": 1
+  },
+  {
+    "name": "雨花分局",
+    "reviewOrg": 0,
+    "checkPro": 240,
+    "rushPro": 0,
+    "changed": 220
+  },
+  {
+    "name": "宁乡市局",
+    "reviewOrg": 0,
+    "checkPro": 232,
+    "rushPro": 194,
+    "changed": 194
+  }
+
+];
+
+echarts.registerMap("changsha", changshaMap);
+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>暂无</span></li>
+              <li>查出问题数 <span>${dataItem.checkPro}</span></li>
+              <li>追责问责数 <span>暂无</span></li>
+              <li>整改问题数 <span>${dataItem.changed}</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: [
+      {min: 0, max: 500, label: "问题数低于500"}, {min: 501, max: 1000, label: "问题数介于500-1000"}, {
+        min: 1001,
+        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",
+          borderColor: "#24D2EE",
+          borderWidth: 1 // 高亮时边框宽度
+        },
+      },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
+      },
+      data: [],
+    }
+  ],
+})
+
+const option1 = ref({
+  xAxis: {
+    type: "category",
+    boundaryGap: false,
+    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
+    }
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false
+      },
+      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: [0, 0, 4, 45, 16, 1, 436, 687, 3, 0, 0],
+    },
+  ],
+});
+
+const data1 = [
+  {
+    label: "芙蓉分局",
+    value: "100",
+    rate: "100",
+    numerator: "1",
+    denominator: "1",
+  },
+  {
+    label: "雨花分局",
+    value: "91",
+    rate: "91",
+    numerator: "220",
+    denominator: 240,
+  },
+  {
+    label: "高新分局",
+    value: 90,
+    rate: 90,
+    numerator: 140,
+    denominator: 155,
+  },
+  {
+    label: "宁乡市局",
+    value: 83,
+    rate: 83,
+    numerator: 194,
+    denominator: 232,
+  },
+  {
+    label: "开福分局",
+    value: 73,
+    rate: 73,
+    numerator: 137,
+    denominator: 186,
+  },
+  {
+    label: "开福分局",
+    value: 73,
+    rate: 73,
+    numerator: 137,
+    denominator: 186,
+  },
+  {
+    label: "岳麓分局",
+    value: 0,
+    numerator: 0,
+    rate: 0,
+    denominator: 11,
+  },
+];
+// setTimeout(() => {
+//   data1.values().forEach((item) => {
+//     console.log(item.label);
+//   });
+// }, 1000);
+
+const data2 = [
+  {
+    name: "开福分局",
+    value: 9700
+  },
+  {
+    name: "芙蓉分局",
+    value: 9021
+  },
+  {
+    name: "岳麓分局",
+    value: 8512
+  },
+  {
+    name: "雨花分局",
+    value: 8021
+  },
+  {
+    name: "望城分局",
+    value: 7111
+  },
+  {
+    name: "浏阳市局",
+    value: 6622
+  },
+  {
+    name: "长沙县局",
+    value: 6221
+  },
+];
+
+const option2 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 23, name: "项目未按规定立项"},
+        {value: 21, name: "未按规定或批准的采购方式进行采购"},
+        {value: 6, name: "未按规定程序办理立项手续"},
+        {value: 2, name: "涉嫌项目拆分"},
+        {value: 2, name: "项目开始是实施或完成后补签合同"},
+        {value: 1, name: "未严格履行立项手续"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+const option3 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 321, name: "提取、查封、扣押、冻结、处置涉案财物不规范"},
+        {value: 249, name: "法律文书填制不规范"},
+        {value: 215, 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: "购物"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+
+const option22 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 55, name: "政府投资审计"},
+        {value: 1137, name: "专项审计"},
+        {value: 16, name: "经济责任审计"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+
+const colors = [
+  {
+    // 绿色
+    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
+    percentage: 90,
+  },
+  {
+    // 黄色
+    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
+    percentage: 80,
+  },
+  {
+
+    // 红色
+    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
+    percentage: 70,
+  },
+];
+
+</script>
+
+
+<style lang="scss" scoped>
+@import "@/style/datav.scss";
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 169.88px;
+    height: 155px;
+    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: 106px;
+    //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%);
+
+  &[type=warning] {
+    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%);
+  }
+
+  .message-title {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  .message-content {
+    margin-bottom: 10px;
+  }
+}
+
+
+</style>
+
+
+
diff --git a/src/views/datav/subOnedatav/subOneRightsComfort.vue b/src/views/datav/subOnedatav/subOneRightsComfort.vue
new file mode 100644
index 0000000..148dee5
--- /dev/null
+++ b/src/views/datav/subOnedatav/subOneRightsComfort.vue
@@ -0,0 +1,751 @@
+<template>
+  <el-scrollbar height="100vh">
+    <div class="wrapper">
+      <datav-header/>
+      <main>
+        <el-row :gutter="16">
+          <el-col :span="6">
+            <datav-card title="维权案件情况">
+              <datav-chart-bar
+                  sub-title="案件数"
+                  :data="data1"
+                  :max="31"
+                  size="large"
+                  :color="colors"
+              />
+              <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>
+
+            <datav-card title="案件类别占比">
+              <v-charts
+                  style="height: 350px"
+                  :option="option2"
+                  autoresize
+              />
+              <!--              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
+              <!--                <div class="tab-title-item active">-->
+              <!--                  &lt;!&ndash;                                    刑事案件&ndash;&gt;-->
+              <!--                  暂无数据-->
+              <!--                </div>-->
+              <!--                &lt;!&ndash;                                <div class="tab-title-item">行政案件</div>&ndash;&gt;-->
+              <!--              </div>-->
+            </datav-card>
+          </el-col>
+
+          <el-col :span="12">
+            <datav-date-picker v-model="time"/>
+            <div class="flex gap-42">
+              <datav-statistic
+                  :value="temp.tempTotalCase"
+                  title="维权案件总数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="temp.tempVictimPer"
+                  title="受侵害人数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="temp.tempComfortPer"
+                  title="抚慰人数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="temp.tempHitPro"
+                  title="打击处理人数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="temp.tempComfortMon"
+                  :title="`抚慰金额\n（万元）`"
+                  :isDecimal="true"
+                  style="width: 20%"
+              />
+            </div>
+            <v-charts
+                style="height: 360px"
+                :option="option"
+                autoresize
+            />
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <datav-card title="打处情况">
+                  <v-charts
+                      style="height: 300px"
+                      :option="data10"
+                      autoresize
+                  />
+                </datav-card>
+              </el-col>
+              <el-col :span="12">
+                <datav-card title="抚慰情况">
+                  <v-charts
+                      style="height: 300px"
+                      :option="option4"
+                      autoresize
+                  />
+                </datav-card>
+              </el-col>
+            </el-row>
+          </el-col>
+
+          <el-col :span="6">
+            <datav-card title="民辅警受伤情况">
+              <v-charts
+                  style="height: 400px"
+                  :option="option6"
+                  autoresize
+              />
+              <!--              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
+              <!--                <div class="tab-title-item active">-->
+              <!--                  &lt;!&ndash;                                    受伤人数&ndash;&gt;-->
+              <!--                  暂无数据-->
+              <!--                </div>-->
+              <!--                &lt;!&ndash;                                <div class="tab-title-item">受伤类别</div>&ndash;&gt;-->
+              <!--              </div>-->
+            </datav-card>
+
+            <datav-card title="发案情况占比">
+              <v-charts
+                  style="height: 350px"
+                  :option="option5"
+                  autoresize
+              />
+              <!--              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
+              <!--                <div class="tab-title-item active">-->
+              <!--                  暂无数据-->
+              <!--                  &lt;!&ndash;                                    发案环节&ndash;&gt;-->
+              <!--                </div>-->
+              <!--                &lt;!&ndash;                                <div class="tab-title-item">发案警种</div>&ndash;&gt;-->
+              <!--                &lt;!&ndash;                                <div class="tab-title-item">发案单位</div>&ndash;&gt;-->
+              <!--              </div>-->
+            </datav-card>
+          </el-col>
+        </el-row>
+      </main>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import vCharts from "vue-echarts";
+import changshaMap from "@/assets/data/changsha.json";
+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"),
+  moment().format("YYYY-MM-DD"),
+]);
+const comfortPersonNumber = ref(114);
+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) => {
+    console.log('Received data:', data); // 添加日志输出
+    comfortPersonNumber.value = data.comfortPersonNumber;
+    hitPersonNumber.value = data.hitPersonNumber;
+    comfortMoney.value = data.comfortMoney;
+    punishmentSituationList.value = data.punishmentSituation;
+    comfortSituationList.value = data.comfortSituation;
+  });
+}
+
+watch(time, () => {
+  getData();
+})
+onMounted(() => {
+  getData();
+});
+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.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: [
+      { min: 0, max: 500, label: "问题数低于500" }, { min: 501, max: 1000, label: "问题数介于500-1000" }, { min: 1001, 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",
+          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",
+    ],
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
+    },
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false,
+      },
+      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 data1 = [
+  {
+    label: "岳麓分局",
+    value: 23
+  },
+  {
+    label: "芙蓉分局",
+    value: 20
+  },
+  {
+    label: "天心分局",
+    value: 20
+  },
+  {
+    label: "雨花分局",
+    value: 19
+  },
+  {
+    label: "浏阳市局",
+    value: 17
+  },
+  {
+    label: "宁乡市局",
+    value: 11
+  },
+  {
+    label: "开福分局",
+    value: 11
+  },
+
+  {
+    label: "望城分局",
+    value: 9
+  },
+  {
+    label: "长沙县局",
+    value: 9
+  },
+  {
+    label: "高新分局",
+    value: 4
+  },
+
+];
+
+const data2 = [
+  {
+    name: "开福分局",
+    value: 9700,
+  },
+  {
+    name: "芙蓉分局",
+    value: 9021,
+  },
+  {
+    name: "岳麓分局",
+    value: 8512,
+  },
+  {
+    name: "雨花分局",
+    value: 8021,
+  },
+  {
+    name: "望城分局",
+    value: 7111,
+  },
+  {
+    name: "浏阳市局",
+    value: 6622,
+  },
+  {
+    name: "长沙县局",
+    value: 6221,
+  },
+];
+
+const option2 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 2, name: "故意伤害"},
+        {value: 42, name: "袭警罪"},
+        {value: 2, name: "寻衅滋事"},
+        {value: 28, name: "妨碍公务"}
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+const option3 = computed(() => {
+  return {
+    series: [
+      {
+        type: "pie",
+        radius: ["40%", "70%"],
+        label: {
+          color: "#fff",
+        },
+        data: punishmentSituationList.value,
+      },
+    ],
+    tooltip: {
+      trigger: "item",
+    },
+  };
+});
+
+const option4 = computed(() => {
+  return {
+    series: [
+      {
+        type: "pie",
+        radius: ["40%", "70%"],
+        label: {
+          color: "#fff",
+        },
+        // data: comfortSituationList.value,
+        data: [
+          {value: 61, name: "民警"},
+          {value: 51, name: "辅警"},
+          {value: 2, name: "协警"},
+        ]
+      },
+    ],
+    tooltip: {
+      trigger: "item",
+    },
+  };
+});
+
+const option6 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      tooltip: {
+        trigger: "item",
+      },
+      data: [
+        {value: 68, name: "民警"},
+        {value: 50, name: "辅警"},
+        {value: 3, name: "协警"},
+      ],
+
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+const option5 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 127, name: "110警情"},
+        {value: 32, name: "执勤处室"},
+        {value: 2, name: "组织调解"},
+        {value: 3, name: "传唤抓捕"},
+        {value: 2, name: "安保维稳"},
+        {value: 2, name: "网络侵权"},
+        {value: 2, name: "医闹纠纷"},
+        {value: 1, name: "其它"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+
+const data10 = {
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 71, name: "刑事追究"},
+        {value: 97, name: "行政处理"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+};
+
+
+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";
+
+
+: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>
\ No newline at end of file
diff --git a/src/views/datav/subonedatav/SubOneCaseVerif.vue b/src/views/datav/subonedatav/SubOneCaseVerif.vue
index 4b7386a..3a2501b 100644
--- a/src/views/datav/subonedatav/SubOneCaseVerif.vue
+++ b/src/views/datav/subonedatav/SubOneCaseVerif.vue
@@ -341,10 +341,7 @@ function getData() {
 
 echarts.registerMap("changsha", changshaMap);
 const option = ref({
-  geo: {
-    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
-    map: "changsha",
-  },
+
   tooltip: {
     trigger: 'item',
     formatter: function (params) {
@@ -413,6 +410,7 @@ const option = ref({
       type: "map",
       map: "changsha",
       hoverAnimation: true,
+      roam:true,
       label: {
         show: true,
         color: "white",
diff --git a/src/views/datav/subonedatav/SubOneSceneInsp.vue b/src/views/datav/subonedatav/SubOneSceneInsp.vue
index fa1aab7..21d8883 100644
--- a/src/views/datav/subonedatav/SubOneSceneInsp.vue
+++ b/src/views/datav/subonedatav/SubOneSceneInsp.vue
@@ -62,6 +62,7 @@
                         title="整改率排名"
                         sub-title="已整改/问题数"
                         unit="%"
+                        :label-width="110"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
@@ -115,6 +116,7 @@
                         title="整改率排名"
                         sub-title="已整改/问题数"
                         unit="%"
+                        :label-width="110"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
@@ -252,6 +254,7 @@
                             title="问题数排名"
                             sub-title="问题数"
                             :color="colors"
+                            :label-width="110"
                         />
                       </el-scrollbar>
                     </datav-tab-item>
@@ -305,6 +308,7 @@
                             title="问题数排名"
                             sub-title="问题数"
                             :color="colors"
+                            :label-width="110"
                         />
                       </el-scrollbar>
                     </datav-tab-item>
@@ -946,9 +950,7 @@ const wtlxPieOption = computed(() => {
 echarts.registerMap("changsha", changshaMap);
 const superviseTempMapVoList = ref([]);
 const option = ref({
-  geo: {
-    map: "changsha",
-  },
+
   tooltip: {
     trigger: 'item',
     formatter: function (params) {
@@ -1010,6 +1012,7 @@ const option = ref({
       type: "map",
       map: "changsha",
       hoverAnimation: true,
+      roam:true,
       label: {
         show: true,
         color: "white",
diff --git a/src/views/datav/subonedatav/SubOneVideoInsp.vue b/src/views/datav/subonedatav/SubOneVideoInsp.vue
index f822746..b699903 100644
--- a/src/views/datav/subonedatav/SubOneVideoInsp.vue
+++ b/src/views/datav/subonedatav/SubOneVideoInsp.vue
@@ -61,6 +61,7 @@
                         :data="jsdwRankList"
                         :max="11"
                         size="large"
+                        :color="colors"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
@@ -414,10 +415,7 @@ const proTrend = ref({
 });
 echarts.registerMap("changsha", changshaMap);
 const option = ref({
-  geo: {
-    map: "changsha",
 
-  },
   tooltip: {
     trigger: 'item',
     formatter: function (params) {
@@ -476,6 +474,7 @@ const option = ref({
       name: "长沙",
       type: "map",
       map: "changsha",
+      roam:true,
       hoverAnimation: true,
       label: {
         show: true,