二级大屏

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]}`
+    });
+}

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);

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()

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,

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},

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%)",

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,
+  problemNumber: 0,
-  supervisionNotifyPreTotal: 0,
+  rectifingNumber: 0,
-  supervisionNotifyChangingTotal: 0,
+  rectifedNumber: 0,
-  supervisionNotifyChangedTotal: 0,
+  departNumber: 0,
-  supervisionNotifyTotal: 0,
+  personNumber: 0,
-  supervisionNotifyOrgTotal: 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, {
+    overview.value= res.overview;
-      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),
-
-    });
   });
 
   getChangedRank(time.value, 3).then((res) => {

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",

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",

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>
+
+

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>

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>
+
+
+

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>

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",

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",

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,