二级大屏开始

src/api/screen/CaseVerif.ts

@@ -2,8 +2,54 @@ import request from "../request";
 
 
 
-export function getAllCaseVerifCount(times) {
+
+export function getCaseVerificationRank(times) {
+    return request.get({
+        url: `/datav/caseVerif/getCaseVerificationRank?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+
+export function getCaseProblemProperty(times) {
+    return request.get({
+        url: `/datav/caseVerif/getCaseProblemProperty?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+
+
+export function getAllCaseVerificationCount(times) {
+    return request.get({
+        url: `/datav/caseVerif/getAllCaseVerificationCount?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+export function getCaseVerificationMap(times) {
+    return request.get({
+        url: `/datav/caseVerif/getCaseVerificationMap?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+
+
+
+export function getCaseVerificationTrend(year) {
+    return request.get({
+        url: `/datav/caseVerif/getCaseVerificationTrend?year=${year}`
+    });
+}
+
+
+
+
+export function getCaseSourceRateAndDealSituation(times) {
+    return request.get({
+        url: `/datav/caseVerif/getCaseSourceRateAndDealSituation?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+
+export function getConfinementAndPause(times) {
     return request.get({
-        url: `/datav/caseVerif/getAllCaseVerifCount?beginTime=${times[0]}&endTime=${times[1]}`
+        url: `/datav/caseVerif/getConfinementAndPause?beginTime=${times[0]}&endTime=${times[1]}`
     });
 }

src/api/screen/rightsComfort.ts

@@ -0,0 +1,65 @@
+import request from "../request";
+
+
+
+export function getRightsAndComfortRank(times) {
+    return request.get({
+        url: `/datav/rightsComfort/getRightsAndComfortRank?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+export function getCaseTypeRate(times) {
+    return request.get({
+        url: `/datav/rightsComfort/getCaseTypeRate?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+
+
+
+
+
+
+export function getALlComfortCount(times) {
+    return request.get({
+        url: `/datav/rightsComfort/getALlComfortCount?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+
+export function getPunishmentSituation(times) {
+    return request.get({
+        url: `/datav/rightsComfort/getPunishmentSituation?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+export function getComfortSituation(times) {
+    return request.get({
+        url: `/datav/rightsComfort/getComfortSituation?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+
+
+
+export function getPoliceHurtSituationAndHurtType(times) {
+    return request.get({
+        url: `/datav/rightsComfort/getPoliceHurtSituationAndHurtType?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+export function getCaseAriseSituationRate(times) {
+    return request.get({
+        url: `/datav/rightsComfort/getCaseAriseSituationRate?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+
+export function test() {
+    return request.get({
+        url: `/datav/rightsComfort/test`
+    });
+}
+
+
+

src/api/screen/videoSupervise.ts

@@ -0,0 +1,38 @@
+import request from "@/api/request";
+
+
+// 视频督察大屏问题数排名
+export function getVideoSuperviseProblemRank(times) {
+    return request.get({
+        url: `/datav/videoSupervise/getVideoSuperviseProblemRank?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+// 视频督察大屏总览数据
+export function getAllVideoSuperviseCount(times) {
+    return request.get({
+        url: `/datav/videoSupervise/getAllVideoSuperviseCount?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+// 视频督察地图数据
+export function getVideoSuperviseMap(times) {
+    return request.get({
+        url: `/datav/videoSupervise/getVideoSuperviseMap?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+// 视频督察问题趋势
+export function getVideoSuperviseTrend(year) {
+    return request.get({
+        url: `/datav/videoSupervise/getVideoSuperviseTrend?year=${year}`
+    });
+}
+
+
+// 视频督察大屏问题类型占比
+export function getVideoSuperviseProblemTypeRate(times) {
+    return request.get({
+        url: `/datav/videoSupervise/getVideoSuperviseProblemTypeRate?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}

src/views/datav/CaseVerif.vue

@@ -69,22 +69,22 @@
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.investigateAndPunish"
+                  :value="overview.dealCasePro"
                   title="查处问题（个）"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.accountablePeopleNumber"
+                  :value="overview.punishPre"
                   title="问责人次"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.accountableDepartNumber"
+                  :value="overview.punishOrg"
                   title="问责单位数"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="overview.confirmedRate"
+                  :value="overview.Rate"
                   value-unit="%"
                   title="查实率"
                   style="width: 16.66%"
@@ -98,7 +98,7 @@
             <datav-card title="查处问题趋势">
               <v-charts
                   style="height: 320px"
-                  :option="option1"
+                  :option="proTrend"
                   autoresize
               />
               <div class="gobal-dropdown-container">
@@ -145,7 +145,7 @@
                   <div class="mb-40">
                     <v-charts
                         style="height: 340px"
-                        :option="option4"
+                        :option="jbcloption"
                         autoresize
                     />
                   </div>
@@ -154,7 +154,7 @@
                   <div class="mb-40">
                     <v-charts
                         style="height: 340px"
-                        :option="option4"
+                        :option="tzcloption"
                         autoresize
                     />
                   </div>
@@ -173,9 +173,7 @@ import vCharts from "vue-echarts";
 import changshaMap from "@/assets/data/changsha.json";
 import * as echarts from "echarts/core";
 import moment from "moment";
-import {getCaseVerifData, getCaseVerifTrend} from "@/api/datav";
+import {getAllCaseVerificationCount, getCaseVerificationRank, getCaseVerificationTrend, getCaseSourceRateAndDealSituation, getCaseVerificationMap, getCaseProblemProperty, getConfinementAndPause} from "@/api/screen/CaseVerif.ts";
-import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts";
-import {getAllCaseVerifCount} from "@/api/screen/CaseVerif.ts";
 
 const currentYear = new Date().getFullYear();
 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
@@ -185,127 +183,38 @@ const time = ref([
   moment().format("YYYY-MM-DD"),
 ]);
 
+
+
+const fxsjBarList = ref([]);
+const jsdwBarList = ref([]);
+
 const overview = ref({
   total: 0,
   confirmed: 0,         // 查实案件数
-  investigateAndPunish: 0,     // 查处问题（个）
+  dealCasePro: 0,     // 查处问题（个）
-  accountablePeopleNumber: 0,   // 问责人次
+  punishPre: 0,   // 问责人次
-  accountableDepartNumber: 0,   // 问责单位数、
+  punishOrg: 0,   // 问责单位数、
-  confirmedRate: 0,   // 查实率
+  Rate: 0,   // 查实率
 });
-let gobalTempMapVoList = [
+let gobalTempMapVoList = ref([
   {
     "name": "浏阳市局",
-    "totalPro": 93,
+    "total": 93,
-    "checkedPro": 11,
+    "confirmed": 11,
-    "dealPro": 8,
+    "dealCasePro": 8,
-    "dealPersonCount": 7,
+    "punishPre": 7,
-    "orgCount": 9,
+    "punishOrg": 9,
     "rate": "12%"
-  },
+  }
-  {
+]);
-    "name": "长沙县局",
-    "totalPro": 192,
-    "checkedPro": 33,
-    "dealPro": 33,
-    "dealPersonCount": 22,
-    "orgCount": 11,
-    "rate": "17%"
-  },
-  {
-    "name": "开福分局",
-    "totalPro": 174,
-    "checkedPro": 63,
-    "dealPro": 60,
-    "dealPersonCount": 32,
-    "orgCount": 13,
-    "rate": "36%"
-  },
-  {
-    "name": "芙蓉分局",
-    "totalPro": 175,
-    "checkedPro": 30,
-    "dealPro": 30,
-    "dealPersonCount": 24,
-    "orgCount": 17,
-    "rate": "17%"
-  },
-  {
-    "name": "雨花分局",
-    "totalPro": 214,
-    "checkedPro": 32,
-    "dealPro": 32,
-    "dealPersonCount": 27,
-    "orgCount": 12,
-    "rate": "15%"
-  },
-  {
-    "name": "天心分局",
-    "totalPro": 179,
-    "checkedPro": 34,
-    "dealPro": 21,
-    "dealPersonCount": 16,
-    "orgCount": 14,
-    "rate": "19%"
-  },
-  {
-    "name": "岳麓分局",
-    "totalPro": 234,
-    "checkedPro": 25,
-    "dealPro": 10,
-    "dealPersonCount": 9,
-    "orgCount": 10,
-      "rate": "11%"
-  },
-  {
-    "name": "宁乡分局",
-    "totalPro": 68,
-    "checkedPro": 9,
-    "dealPro": 9,
-    "dealPersonCount": 11,
-    "orgCount": 8,
-    "rate": "13%"
-  },
-  {
-    "name": "望城分局",
-    "totalPro": 78,
-    "checkedPro": 21,
-    "dealPro": 8,
-    "dealPersonCount": 9,
-    "orgCount": 5,
-    "rate": "27%"
-  },
 
-];
-const fxsjBarList = ref([]);
-const jsdwBarList = ref([]);
-const zfbaPieList = ref([]);
-const fwglPieList = ref([]);
 const jjjgPieList = ref([]);
-const ajlyPieList = ref([]);
+
-const ajhcqxList = ref([]);
-const temp = ref({
-  tempCheckedCaseTotal: 0,
-  tempDealPro: 0,
-  tempDealPre: 0,
-  tempDealOrg: 0,
-  tempRate: 0,
-})
-
-// setTimeout(() => {
-//   temp.value={
-//     tempCheckedCaseTotal: 292,
-//     tempDealPro: 285,
-//     tempDealPre: 223,
-//     tempDealOrg: 93,
-//     tempRate: 18,
-//   }
-// }, 1000);
-//
 
 // region 事件||监听
 const handleCommand = (year) => {
   selectedYear.value = year; // 更新当前选中的年份
+  getProTrendList(selectedYear.value);
 };
 watch(time, () => {
   getData();
@@ -315,30 +224,102 @@ watch(time, () => {
 
 
 
+// region 所有函数
+const getRankList = async(timeValue) => {
+  const res = await getCaseVerificationRank(timeValue);
+  fxsjBarList.value = res.fxsjRankList
+  jsdwBarList.value = res.jsdwRankList
+}
 
-
+const getCaseProblemPropertyList = async(timeValue) => {
-function getData() {
+  const res = await getCaseProblemProperty(timeValue);
-  getCaseVerifData(time.value).then((data) => {
+  zfbaPieOption.value.series[0].data = res.zfbaPieList;
-    // overview.value = data.overview;
+  fwglPieOption.value.series[0].data = res.fwglPieList;
-    fxsjBarList.value = data.fxsjBarList;
+}
-    jsdwBarList.value = data.jsdwBarList;
+const getOverview = async(timeValue)=>{
-    zfbaPieList.value = data.zfbaPieList;
+  const res =  await getAllCaseVerificationCount(timeValue)
-    fwglPieList.value = data.fwglPieList;
+  overview.value = res.overview
-    jjjgPieList.value = data.jjjgPieList;
+}
-    ajlyPieList.value = data.ajlyPieList;
+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
+  option.value.series[0].data = mappedData;
 
+}
+const getProTrendList= async(year) => {
+  const res = await getCaseVerificationTrend(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 (timeValue)=>{
+  const res = await getCaseSourceRateAndDealSituation(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;
+  dzcloption.value.series[0].data = res.dzclList;
+}
+// endregion
 
-  getCaseVerifTrend(time.value, 12).then((data) => {
-    ajhcqxList.value = data.ajhcqsList;
-    // console.log(ajhcqxList.value)
-  });
 
-  getAllCaseVerifCount(time.value).then((data) => {
-    overview.value = data.overview;
-    console.log(overview.value)
-  })
 
+function getData() {
+  getRankList(time.value);
+  getCaseProblemPropertyList(time.value)
+  getOverview(time.value);
+  getMapIcon(time.value);
+  getProTrendList(selectedYear.value);
+  getCaseSourceAndDeal(time.value);
 }
 
 watch(time, () => {
@@ -348,46 +329,7 @@ onMounted(() => {
   getData();
 });
 
-const zfbaPieOption = computed(() => {
-  return {
-    tooltip: {
-      trigger: "item",
-    },
-    series: [
-      {
-        type: "pie",
-        radius: ["40%", "70%"],
-        label: {
-          color: "#fff",
-        },
-        data: zfbaPieList.value,
-      },
-    ],
-  };
-});
 
-const fwglPieOption = computed(() => {
-  return {
-    tooltip: {
-      trigger: "item",
-    },
-    series: [
-      {
-        type: "pie",
-        radius: ["40%", "70%"],
-        label: {
-          color: "#fff",
-        },
-        data: [
-          {value: 4, name: "交警执法"},
-          {value: 3, name: "态度生硬"},
-          {value: 3, name: "户政业务"},
-          {value: 2, name: "监所管理"},
-        ],
-      },
-    ],
-  };
-});
 
 const jjjgPieOption = computed(() => {
   return {
@@ -407,61 +349,11 @@ const jjjgPieOption = computed(() => {
   };
 });
 
-const ajlyPieOption = computed(() => {
-  return {
-    tooltip: {
-      trigger: "item",
-    },
-    series: [
-      {
-        type: "pie",
-        radius: ["40%", "70%"],
-        label: {
-          color: "#fff",
-        },
-        data: [
-          {name: "12389", value: 843},
-          {name: "网络投诉", value: 711},
-          {name: "信件投诉", value: 29},
-          {name: "其他投诉", value: 3},
-          {name: "值班来电", value: 3},
-        ],
-      },
-    ],
-  };
-});
-
-const wzclPieOption = computed(() => {
-  return {
-    tooltip: {
-      trigger: "item",
-    },
-    series: [
-      {
-        type: "pie",
-        radius: ["40%", "70%"],
-        label: {
-          color: "#fff",
-        },
-        data: [
-          {name: "通报批评", value: 167},
-          {name: "未处置人", value: 54},
-          {name: "工作提醒", value: 17},
-          {name: "批评教育", value: 9},
-          {name: "提醒谈话", value: 21},
-          {name: "禁闭", value: 2},
-          {name: "责令检查", value: 2},
-          {name: "党纪处分", value: 1},
-        ],
-      },
-    ],
-  };
-});
 
 
 
 echarts.registerMap("changsha", changshaMap);
-const option = {
+const option = ref({
   geo: {
     // 是上面注册时的名字哦，registerMap（'名字保持一致'）
     map: "changsha",
@@ -470,18 +362,18 @@ const option = {
     trigger: 'item',
     formatter: function (params) {
       console.log(params)
-      const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
+      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.name}</div>
+          <div class="tooltip-title">${dataItem.originalName}</div>
           <div class="tooltip-content">
             <ul class="tooltip-ul" >
-              <li>案件总数（起）<span>${dataItem.totalPro}</span></li>
+              <li>案件总数（起）<span>${dataItem.total}</span></li>
-              <li>查实案件数 <span>${dataItem.checkedPro}</span></li>
+              <li>查实案件数 <span>${dataItem.confirmed}</span></li>
-              <li>查处问题（个） <span>${dataItem.dealPro}</span></li>
+              <li>查处问题（个） <span>${dataItem.dealCasePro}</span></li>
-              <li>问责人次 <span>${dataItem.dealPersonCount}</span></li>
+              <li>问责人次 <span>${dataItem.punishPre}</span></li>
-              <li>问责单位数 <span>${dataItem.orgCount}</span></li>
+              <li>问责单位数 <span>${dataItem.punishOrg}</span></li>
               <li>查实率 <span>${dataItem.rate}</span></li>
             </ul>
           </div>
@@ -491,12 +383,12 @@ const option = {
           <div class="tooltip-title">${dataItem.name}</div>
           <div class="tooltip-content">
             <ul class="tooltip-ul"">
-              <li>案件总数（起） <span>0</span></li>
+              <li>案件总数（起） <span>-</span></li>
-              <li>查实案件数 <span>0</span></li>
+              <li>查实案件数 <span>-</span></li>
-              <li>查处问题（个） <span>0</span></li>
+              <li>查处问题（个） <span>-</span></li>
-              <li>问责人次 <span>0</span></li>
+              <li>问责人次 <span>-</span></li>
-              <li>问责单位数 <span>0</span></li>
+              <li>问责单位数 <span>-</span></li>
-              <li>查实率 <span>0</span></li>
+              <li>查实率 <span>-</span></li>
             </ul>
           </div>
         </div>`;
@@ -514,9 +406,9 @@ const option = {
     type: "piecewise",
     bottom: 10,
     pieces: [
-      {gte: 85, lte: 100, label: "问题数低于500"},
+      {gte: 0, lte: 65, label: "问题数低于500"},
-      {gte: 65, lte: 85, label: "问题数低于1000"},
+      {gte: 65, lte: 85, label: "问题数介于500-1000"},
-      {gte: 0, lte: 65, label: "问题数低于1000"},
+      {gte: 85, lte: 100, label: "问题数高于1000"},
     ],
     right: 10, // 右边距
     realtime: false,
@@ -526,7 +418,7 @@ const option = {
     },
     calculable: true,
     inRange: {
-      color: ["#D34343", "#F6A149", "#4987F6"],
+      color: ["#4987F6","#F6A149", "#D34343" ],
     },
   },
   series: [
@@ -535,7 +427,6 @@ const option = {
       type: "map",
       map: "changsha",
       hoverAnimation: true,
-
       label: {
         show: true,
         color: "white",
@@ -543,11 +434,11 @@ const option = {
       itemStyle: {
         areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
       },
+      data: gobalTempMapVoList.value,
     },
   ],
-};
+});
-
+const proTrend = ref({
-const option1 = ref({
   grid: {
     left: '5%', // 图表距离容器左边的距离
     right: '2%', // 图表距离容器右边的距离
@@ -605,15 +496,27 @@ const option1 = ref({
           },
         ]),
       },
-      data: [175, 101, 158, 141, 177, 162, 108, 166, 197, 104],
+      data: [],
     },
   ],
 });
 
-const option4 = {
+const ajlyPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
   tooltip: {
     trigger: "item",
   },
+});
+const wzclPieOption = ref({
   series: [
     {
       type: "pie",
@@ -621,21 +524,94 @@ const option4 = {
       label: {
         color: "#fff",
       },
-      data: [
+      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: "为落实请示报告制度"},
   ],
+  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 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 = [
   {
@@ -651,6 +627,7 @@ const colors = [
     percentage: 40,
   },
 ];
+
 </script>
 
 <style lang="scss" scoped>
@@ -753,7 +730,6 @@ const colors = [
   color: #fff;
 }
 
-
 </style>
 
 

src/views/datav/Gobal.vue

@@ -79,6 +79,7 @@
                 style="height: 360px"
                 :option="option"
                 autoresize
+                @click="handleClick"
             />
 
             <div>
@@ -145,6 +146,8 @@ import {
 } from "@/api/data/basicScreen.ts";
 
 // region  各种变量
+const router = useRouter();
+
 const activeOrgTab = ref("1");
 const fxsjlist = ref([]);  // 分县市区机构问题排名
 const jsdwlist = ref([]);  // 局属单位机构问题排名
@@ -174,7 +177,7 @@ const gobalTempMapVoList = ref([
     "reviewPro": 11
   }
 ]);  // 地图临时数据
-const router = useRouter();
+
 const currentYear = new Date().getFullYear();
 const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
 const selectedYear = ref('2024'); // 当前选中的年份
@@ -232,7 +235,7 @@ const option = ref({
   tooltip: {
     trigger: 'item',
     formatter: function (params) {
-      console.log(params);
+      // console.log(params);
       const dataItem = gobalTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
       if (dataItem) {
         return `
@@ -478,6 +481,19 @@ const handleCommand = (year) => {
 watch(time, () => {
   getData();
 });
+
+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 },
+  }).href;
+  window.open(url, "_blank");
+}
+
 // endregion
 
 

src/views/datav/MailVisits.vue

@@ -7,7 +7,7 @@
           <el-col :span="6">
             <datav-card title="初访重访情况">
               <el-row class="mb-32">
-                <el-col :span="12">
+                <el-col :span="8">
                   <div class="descriptions_cell text-center">
                     <div class="descriptions_content">
                       {{ overview.firstMail }}
@@ -17,7 +17,7 @@
                     </div>
                   </div>
                 </el-col>
-                <el-col :span="12">
+                <el-col :span="8">
                   <div class="descriptions_cell text-center">
                     <div class="descriptions_content">
                       {{ overview.secondMail }}
@@ -27,6 +27,16 @@
                     </div>
                   </div>
                 </el-col>
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ overview.secondMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      领导接访数
+                    </div>
+                  </div>
+                </el-col>
               </el-row>
               <datav-card>
                 <datav-tabs v-model="activeTab">
@@ -55,6 +65,16 @@
                           />
                         </el-scrollbar>
                       </datav-tab-item>
+                      <datav-tab-item label="领导接访" name="3">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="fxsjRepeatMailList"
+                              :max="11"
+                              size="large"
+                              :color="colors"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
                     </datav-tabs>
                   </datav-tab-item>
                   <datav-tab-item label="部委支队" name="2">
@@ -79,6 +99,16 @@
                           />
                         </el-scrollbar>
                       </datav-tab-item>
+                      <datav-tab-item label="领导接访" name="3">
+                        <el-scrollbar height="300px">
+                          <datav-chart-bar
+                              :data="fxsjRepeatMailList"
+                              :max="11"
+                              size="large"
+                              :color="colors"
+                          />
+                        </el-scrollbar>
+                      </datav-tab-item>
                     </datav-tabs>
                   </datav-tab-item>
                 </datav-tabs>
@@ -96,6 +126,7 @@
                 </div>
               </div>
             </datav-card>
+
           </el-col>
 
           <el-col :span="12">
@@ -154,7 +185,6 @@
                       autoresize
                   />
                 </datav-tab-item>
-
                 <datav-tab-item label="12337信访" name="4">
                   <v-charts
                       style="width: 105%; height: 300px; "

src/views/datav/RightsComfort.vue

@@ -5,35 +5,87 @@
       <main>
         <el-row :gutter="16">
           <el-col :span="6">
-            <datav-card title="维权案件情况">
+            <datav-card>
+              <datav-tabs v-model="activeTab">
+                <datav-tab-item label="维权案件情况" name="1">
+                  <datav-tabs
+                      v-model="activeMailTab"
+                      type="bottom-button"
+                      title="案件数"
+                  >
+                    <datav-tab-item label="分县市局" name="1">
+                      <el-scrollbar height="300px">
                         <datav-chart-bar
-                  sub-title="案件数"
+                            :data="fxsjRightsRank"
-                  :data="data1"
-                  :max="31"
                             size="large"
+                            :max="11"
                             :color="colors"
                         />
-              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
+                      </el-scrollbar>
-                <div class="tab-title-item active">
+                    </datav-tab-item>
-                  <!--                                    分县市局-->
+                    <datav-tab-item label="局属单位" name="2">
-                </div>
+                      <el-scrollbar height="300px">
-                <!--                                <div class="tab-title-item">局属单位</div>-->
+                        <datav-chart-bar
-              </div>
+                            :data="jsdwRightsRank"
+                            :max="11"
+                            size="large"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+                  </datav-tabs>
+                </datav-tab-item>
+                <datav-tab-item label="抚慰金额情况" name="2">
+                  <datav-tabs
+                      v-model="activeMailTab"
+                      type="bottom-button"
+                  >
+                    <datav-tab-item label="分县市局" name="1">
+                      <el-scrollbar height="300px">
+                        <datav-chart-bar
+                            :data="fxsjComfortMoneyRank"
+                            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="jsdwComfortMoneyRank"
+                            :max="11"
+                            size="large"
+                            :color="colors"
+                        />
+                      </el-scrollbar>
+                    </datav-tab-item>
+                  </datav-tabs>
+                </datav-tab-item>
+              </datav-tabs>
             </datav-card>
 
             <datav-card title="案件类别占比">
+
+              <datav-tabs
+                  v-model="activeMailTab"
+                  type="bottom-button"
+              >
+                <datav-tab-item label="刑事案件" name="1">
+                  <v-charts
+                      style="height: 350px"
+                      :option="xsajCaseTypeOption"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="行政案件" name="2">
                   <v-charts
                       style="height: 350px"
-                  :option="option2"
+                      :option="xzajCaseTypeOption"
                       autoresize
                   />
-              <!--              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
+                </datav-tab-item>
-              <!--                <div class="tab-title-item active">-->
+              </datav-tabs>
-              <!--                  &lt;!&ndash;                                    刑事案件&ndash;&gt;-->
-              <!--                  暂无数据-->
-              <!--                </div>-->
-              <!--                &lt;!&ndash;                                <div class="tab-title-item">行政案件</div>&ndash;&gt;-->
-              <!--              </div>-->
             </datav-card>
           </el-col>
 
@@ -41,27 +93,27 @@
             <datav-date-picker v-model="time"/>
             <div class="flex gap-42">
               <datav-statistic
-                  :value="temp.tempTotalCase"
+                  :value="comfortOverview.comfortCaseTotal"
                   title="维权案件总数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="temp.tempVictimPer"
+                  :value="comfortOverview.hurtTotal"
                   title="受侵害人数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="temp.tempComfortPer"
+                  :value="comfortOverview.comfortTotal"
                   title="抚慰人数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="temp.tempHitPro"
+                  :value="comfortOverview.hitTotal"
                   title="打击处理人数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="temp.tempComfortMon"
+                  :value="comfortOverview.comfortMoney"
                   :title="`抚慰金额\n（万元）`"
                   :isDecimal="true"
                   style="width: 20%"
@@ -77,7 +129,7 @@
                 <datav-card title="打处情况">
                   <v-charts
                       style="height: 300px"
-                      :option="data10"
+                      :option="punishmentSituationOption"
                       autoresize
                   />
                 </datav-card>
@@ -86,7 +138,7 @@
                 <datav-card title="抚慰情况">
                   <v-charts
                       style="height: 300px"
-                      :option="option4"
+                      :option="comfortSituationOption"
                       autoresize
                   />
                 </datav-card>
@@ -95,35 +147,60 @@
           </el-col>
 
           <el-col :span="6">
-            <datav-card title="民辅警受伤情况">
+
+            <datav-card title="民辅警受伤情况" sub-title="人数">
+              <datav-tabs
+                  v-model="activeMailTab"
+                  type="bottom-button"
+              >
+                <datav-tab-item label="受伤人数" name="1">
                   <v-charts
-                  style="height: 400px;"
+                      style="height: 310px;"
-                  :option="option6"
+                      :option="hurtNumOption"
                       autoresize
                   />
-<!--              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
+                </datav-tab-item>
-<!--                <div class="tab-title-item active">-->
+                <datav-tab-item label="受伤类別" name="2">
-<!--                  &lt;!&ndash;                                    受伤人数&ndash;&gt;-->
+                  <v-charts
-<!--                  暂无数据-->
+                      style="height: 310px;"
-<!--                </div>-->
+                      :option="hurtTypeOption"
-<!--                &lt;!&ndash;                                <div class="tab-title-item">受伤类别</div>&ndash;&gt;-->
+                      autoresize
-<!--              </div>-->
+                  />
+                </datav-tab-item>
+              </datav-tabs>
             </datav-card>
 
             <datav-card title="发案情况占比">
+
+              <datav-tabs
+                  v-model="activeMailTab"
+                  type="bottom-button"
+              >
+                <datav-tab-item label="发案环节" name="1">
+                  <v-charts
+                      style="height: 350px"
+                      :option="ariseCaseLinkOption"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="发案警种" name="2">
+                  <v-charts
+                      style="height: 350px"
+                      :option="ariseCasePoliceOption"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="发案单位" name="3">
                   <v-charts
                       style="height: 350px"
-                  :option="option5"
+                      :option="ariseCaseORgOption"
                       autoresize
                   />
-<!--              <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">-->
+                </datav-tab-item>
-<!--                <div class="tab-title-item active">-->
+
-<!--                  暂无数据-->
+              </datav-tabs>
-<!--                  &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>
@@ -138,37 +215,218 @@ import changshaMap from "@/assets/data/changsha.json";
 import * as echarts from "echarts/core";
 import {getRightsComfortData} from "@/api/datav";
 import moment from "moment";
+import {
+  getALlComfortCount,
+  getPunishmentSituation,
+  getComfortSituation,
+  getRightsAndComfortRank, getPoliceHurtSituationAndHurtType, getCaseAriseSituationRate,test
+} from "@/api/screen/rightsComfort.ts";
+
+// 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);
+
+// region 所有变量
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
 
-const temp = ref({
+const fxsjRightsRank = ref([
-  tempTotalCase: 0,
+  {
-  tempVictimPer: 0,
+    label: "岳麓分局",
-  tempComfortPer: 0,
+    value: 23
-  tempHitPro: 0,
+  },
-  tempComfortMon: 0,
+  {
-})
+    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
+  },
 
-setTimeout(() => {
+]);    // 分县市局维权案件情况
-  temp.value={
+const jsdwRightsRank = ref([
-    tempTotalCase: 171,
+  {
-    tempVictimPer: 121,
+    label: "岳麓分局",
-    tempComfortPer: 114,
+    value: 27
-    tempHitPro: 205,
+  },
-    tempComfortMon: 28.1,
+  {
-  }
+    label: "芙蓉分局",
-}, 1000);
+    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 fxsjComfortMoneyRank = ref([
+  {
+    label: "岳麓分局",
+    value: 53
+  },
+  {
+    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 jsdwComfortMoneyRank = ref([
+  {
+    label: "岳麓分局",
+    value: 33
+  },
+  {
+    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
+  },
 
+]);    // 局属单位抚慰金额情况
 
-echarts.registerMap("changsha", changshaMap);
+const comfortOverview = ref({
-const time = ref([
+  comfortCaseTotal: 0,
-  moment().startOf("year").format("YYYY-MM-DD"),
+  hurtTotal: 0,
-  moment().format("YYYY-MM-DD"),
+  comfortTotal: 0,
-]);
+  hitTotal: 0,
-const comfortPersonNumber = ref(114);
+  comfortMoney: 0,
-const hitPersonNumber = ref(28.1);
+})   // 数据总览
-const comfortMoney = ref(0.0);
 const punishmentSituationList = ref([]);
-const comfortSituationList = ref([]);
 let gobalTempMapVoList = [
   {
     "name": "岳麓分局",
@@ -252,15 +510,64 @@ let gobalTempMapVoList = [
   },
 
 ];
+// endregion
+
+
+// region 所有函数
+// 维权案件情况
+const getRightsRankList = async (timeValue) => {
+  const res = await getRightsAndComfortRank(timeValue);
+  fxsjRightsRank.value = res.fxsjRightsRankList;
+  jsdwRightsRank.value = res.jsdwRightsRankList;
+}
+
+// 中央总览
+const getComfortOverview = async (timeValue) => {
+  const res = await getALlComfortCount(timeValue);
+  comfortOverview.value = res.comfortOverview;
+}
+//打处情况
+const getPunishmentSituationList = async (timeValue) => {
+  const res = await getPunishmentSituation(timeValue);
+  punishmentSituationOption.series[0].data = res.punishmentSituationList;
+}
+//抚慰情况
+const getComfortSituationList = async (timeValue) => {
+  const res = await getComfortSituation(timeValue);
+  comfortSituationOption.series[0].data = res.comfortSituationList;
+}
+
+// 民辅警受伤情况-受伤人数
+const getPoliceHurtSituationList = async (timeValue) => {
+  const res = getPoliceHurtSituationAndHurtType(timeValue);
+  hurtNumOption.value.series[0].data = res.policeHurtSituationList
+}
+
+const getCaseAriseSituationRateList = async (timeValue) => {
+  const res = getCaseAriseSituationRate(timeValue);
+  ariseCaseLinkOption.value.series[0].data = res.incidentLinkList
+  ariseCasePoliceOption.value.series[0].data = res.incidentPoliceTypeList
+  ariseCaseORgOption.value.series[0].data = res.incidentOrgList
+}
+
+
+// endregion
+
 function getData() {
-  getRightsComfortData(time.value).then((data) => {
+  // getRightsComfortData(time.value).then((data) => {
-    console.log('Received data:', data); // 添加日志输出
+  //   console.log('Received data:', data); // 添加日志输出
-    comfortPersonNumber.value = data.comfortPersonNumber;
+  //   comfortPersonNumber.value = data.comfortPersonNumber;
-    hitPersonNumber.value = data.hitPersonNumber;
+  //   hitPersonNumber.value = data.hitPersonNumber;
-    comfortMoney.value = data.comfortMoney;
+  //   comfortMoney.value = data.comfortMoney;
-    punishmentSituationList.value = data.punishmentSituation;
+  //   punishmentSituationList.value = data.punishmentSituation;
-    comfortSituationList.value = data.comfortSituation;
+  //   comfortSituationList.value = data.comfortSituation;
-  });
+  // });
+  getRightsRankList(time.value);
+  getComfortOverview(time.value);
+  getPunishmentSituationList(time.value);
+  getComfortSituationList(time.value);
+  getPoliceHurtSituationList(time.value);
+  getCaseAriseSituationRateList(time.value);
 }
 
 watch(time, () => {
@@ -268,7 +575,12 @@ watch(time, () => {
 })
 onMounted(() => {
   getData();
+  test()
 });
+
+
+// region 所有图表
+echarts.registerMap("changsha", changshaMap);
 const option = ref({
   geo: {
     map: "changsha",
@@ -317,7 +629,10 @@ const option = ref({
     type: "piecewise",
     bottom: 10,
     pieces: [
-      { min: 0, max: 500, label: "问题数低于500" }, { min: 501, max: 1000, label: "问题数介于500-1000" }, { min: 1001, label: "问题数高于1000" },
+      {min: 0, max: 500, label: "问题数低于500"}, {min: 501, max: 1000, label: "问题数介于500-1000"}, {
+        min: 1001,
+        label: "问题数高于1000"
+      },
     ],
     right: 10,
     realtime: false,
@@ -359,144 +674,27 @@ const option = ref({
   ],
 })
 
-const option1 = ref({
+const xsajCaseTypeOption = 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",
+      type: "pie",
-      smooth: true,
+      radius: ["40%", "70%"],
       label: {
-        show: false,
+        color: "#fff",
-      },
-      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,
+        {value: 32, name: "故意伤害"},
-        3000, 3100, 3100, 3100,
+        {value: 42, name: "袭警罪"},
+        {value: 12, name: "寻衅滋事"},
+        {value: 28, name: "妨碍公务"}
       ],
     },
   ],
-});
+  tooltip: {
-
+    trigger: "item",
-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 xzajCaseTypeOption = ref({
-const option2 = {
   series: [
     {
       type: "pie",
@@ -515,10 +713,9 @@ const option2 = {
   tooltip: {
     trigger: "item",
   },
-};
+});
 
-const option3 = computed(() => {
+const punishmentSituationOption = {
-  return {
   series: [
     {
       type: "pie",
@@ -526,17 +723,17 @@ const option3 = computed(() => {
       label: {
         color: "#fff",
       },
-        data: punishmentSituationList.value,
+      data: [
+        // {value: 71, name: "刑事追究"},
+        // {value: 97, name: "行政处理"},
+      ],
     },
   ],
   tooltip: {
     trigger: "item",
   },
 };
-});
+const comfortSituationOption = {
-
-const option4 = computed(() => {
-  return {
   series: [
     {
       type: "pie",
@@ -544,21 +741,18 @@ const option4 = computed(() => {
       label: {
         color: "#fff",
       },
-        // data: comfortSituationList.value,
       data: [
-          {value: 61, name: "民警"},
+        // {value: 71, name: "刑事追究"},
-          {value: 51, name: "辅警"},
+        // {value: 97, name: "行政处理"},
-          {value: 2, name: "协警"},
+      ],
-        ]
     },
   ],
   tooltip: {
     trigger: "item",
   },
 };
-});
 
-const option6 = {
+const hurtNumOption = ref({
   series: [
     {
       type: "pie",
@@ -574,15 +768,37 @@ const option6 = {
         {value: 50, name: "辅警"},
         {value: 3, name: "协警"},
       ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});
+const hurtTypeOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["30%", "50%"],
+      label: {
+        color: "#fff",
+      },
+      tooltip: {
+        trigger: "item",
+      },
+      data: [
+        {value: 68, name: "民警"},
+        {value: 250, name: "辅警"},
+        {value: 3, name: "协警"},
+      ],
 
     },
   ],
   tooltip: {
     trigger: "item",
   },
-};
+});
 
-const option5 = {
+const ariseCaseLinkOption = ref({
   series: [
     {
       type: "pie",
@@ -605,10 +821,8 @@ const option5 = {
   tooltip: {
     trigger: "item",
   },
-};
+});
-
+const ariseCasePoliceOption = ref({
-
-const data10 = {
   series: [
     {
       type: "pie",
@@ -617,16 +831,47 @@ const data10 = {
         color: "#fff",
       },
       data: [
-        {value: 71, name: "刑事追究"},
+        {value: 127, name: "110警情"},
-        {value: 97, name: "行政处理"},
+        {value: 132, name: "执勤处室"},
+        {value: 222, name: "组织调解"},
+        {value: 332, name: "传唤抓捕"},
+        {value: 2, name: "安保维稳"},
+        {value: 276, name: "网络侵权"},
+        {value: 492, name: "医闹纠纷"},
+        {value: 199, name: "其它"},
       ],
     },
   ],
   tooltip: {
     trigger: "item",
   },
-};
+});
+const ariseCaseORgOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [
+        {value: 17, name: "110警情"},
+        {value: 322, name: "执勤处室"},
+        {value: 234, name: "组织调解"},
+        {value: 343, name: "传唤抓捕"},
+        {value: 22, name: "安保维稳"},
+        {value: 2, name: "网络侵权"},
+        {value: 2, name: "医闹纠纷"},
+        {value: 1, name: "其它"},
+      ],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});
 
+// endregion
 
 const colors = [
   {
@@ -654,77 +899,72 @@ const colors = [
   // 弹框整体
   .tooltip {
     position: relative;
-    width: 169.88px;
+    width: 160px;
-    height: 170px;
+    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: 169.88px;
+    width: 160px;
     height: 43px;
-    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%);
+    box-shadow: inset 0px -1px 0px 0px #253755;
     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;
+    width: 160px;
-    height: 132px;
+    height: 150px;
-    //font-size: 11px;
+    background: linear-gradient(180deg, #010457 0%, #031577 100%)
-    margin-top: -12px;
-    background: linear-gradient(180deg, #010457 0%, #031577 100%);
   }
 
   .tooltip-content ul {
     list-style-type: none; /* 移除默认的小圆点 */
-    padding: 0;
+    padding-left: 5px;
-
+    margin: 0;
   }
 
   .tooltip-content ul li {
-    margin-left: 5px;
+    height: 24px;
-    height: 25px;
     color: #597AE9;
-    font-size: 13px;
+    font-weight: 400;
+    font-size: 14px;
   }
 
 
-  // 数字的span
+  //// 数字的span
   .tooltip-ul span {
     float: right;
-    width: 50px;
+    width: 55px;
-    text-align: right;
-    margin-right: 35px;
     color: #fff;
-    font-size: 13px;
+    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; /* 右边颜色，与背景颜色相同 */
   }
 
 
+  ///* 小尖角 */
+  //.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 {

src/views/datav/SceneInsp.vue

@@ -931,7 +931,6 @@ const wtlxPieOption = computed(() => {
           color: "#fff",
         },
         data: wtlxList.value,
-
       },
     ],
   };
@@ -954,7 +953,7 @@ const option = ref({
       if (dataItem) {
         return `
         <div class="tooltip">
-          <div class="tooltip-title">${dataItem.name}</div>
+          <div class="tooltip-title">${dataItem.originalName}</div>
           <div class="tooltip-content">
             <ul class="tooltip-ul" >
               <li>通报问题数 <span>${dataItem.totalPro}</span></li>
@@ -1034,7 +1033,6 @@ const option = ref({
 
 // region 问题趋势线状图
 const proTrend = ref({
-
   grid: {
     left: '5%', // 图表距离容器左边的距离
     right: '2%', // 图表距离容器右边的距离
@@ -1249,12 +1247,6 @@ function getData() {
 watch(time, () => {
   getData();
 });
-// watch(activeTabLeft, () => {
-//   getChangedRank(time.value, activeTabLeft.value).then((res) => {
-//     rankOverview.value = res.rankOverview;
-//     data1.value = res.changedRankList;
-//   });
-// });
 
 
 onMounted(() => {

src/views/datav/Sub1.vue

@@ -2,16 +2,696 @@
   <el-scrollbar height="100vh">
     <div class="wrapper">
       <datav-header/>
-            <img src="/imgs/datav/sub1.png" alt="" class="relative pointer" @click="go">
+      <!--            <img src="/imgs/datav/sub1.png" alt="" class="relative pointer" @click="go">-->
+      <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">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+
+                        :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">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+
+                        :size="small"
+                        title="整改率排名"
+                        sub-title="已整改/问题数"
+                        unit="%"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+              </datav-tabs>
+            </datav-card>
+            <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">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+
+                        :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">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+
+                        :size="small"
+                        title="整改率排名"
+                        sub-title="已整改/问题数"
+                        unit="%"
+                    />
+                  </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="22"
+                  title="问题总数"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="22"
+                  title="处理中"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="33"
+                  title="涉及单位"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="44"
+                  title="涉及人员"
+                  style="width: 20%"
+              />
+              <datav-statistic
+                  :value="22"
+                  title="办结率"
+                  style="width: 20%"
+              />
+            </div>
+            <v-charts
+                style="height: 360px"
+                :option="option"
+                autoresize
+            />
+            <datav-card title="问题趋势">
+              <datav-tabs v-model="activeMailTrend" @change="handleTabChange">
+                <datav-tab-item label="督察问题趋势" name="1">
+                  <v-charts
+                      style="width: 105%; height: 300px;"
+                      :option="option1"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="案件核查趋势" name="2">
+                  <v-charts
+                      style="width: 105%; height: 300px;"
+                      :option="option1"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="警务评议趋势" name="3">
+                  <v-charts
+                      style="width: 105%; height: 300px;"
+                      :option="option1"
+                      autoresize
+                  />
+                </datav-tab-item>
+                <datav-tab-item label="信访投诉趋势" name="4">
+                  <v-charts
+                      style="width: 105%; height: 300px;"
+                      :option="option1"
+                      autoresize
+                  />
+                </datav-tab-item>
+              </datav-tabs>
+            </datav-card>
+          </el-col>
+
+          <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">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+
+                        :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">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+
+                        :size="small"
+                        title="整改率排名"
+                        sub-title="已整改/问题数"
+                        unit="%"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+              </datav-tabs>
+            </datav-card>
+            <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">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+
+                        :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">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          问题数
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          整改中
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22
+                        </div>
+                        <div class="descriptions_label">
+                          已整改
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :span="6">
+                      <div class="descriptions_cell text-center">
+                        <div class="descriptions_content">
+                          22%
+                        </div>
+                        <div class="descriptions_label">
+                          整改率
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar
+
+                        :size="small"
+                        title="整改率排名"
+                        sub-title="已整改/问题数"
+                        unit="%"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+              </datav-tabs>
+            </datav-card>
+          </el-col>
+        </el-row>
+      </main>
     </div>
   </el-scrollbar>
 </template>
+
 <script setup>
+import vCharts from "vue-echarts";
+import moment from "moment";
+import * as echarts from "echarts/core";
+
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);   // 时间范围
 const router = useRouter()
+import geoJson from "@/assets/data/浏阳市.json";
+
+echarts.registerMap("浏阳市", geoJson);
+const option = ref({
+  geo: {
+    map: "浏阳市",
+  },
+  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.totalPro}</span></li>
+  //             <li>督察问题 <span>${dataItem.supervisePro}</span></li>
+  //             <li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li>
+  //             <li>信访投诉问题 <span>${dataItem.mailPro}</span></li>
+  //             <li>民意感知问题 <span>${dataItem.policePro}</span></li>
+  //              <li>审计督察问题 <span>${dataItem.reviewPro}</span></li>
+  //           </ul>
+  //         </div>
+  //       </div>`;
+  //     } else {
+  //       return `
+  //       <div class="tooltip">
+  //           <div class="tooltip-title">${dataItem.originalName}</div>
+  //           <div class="tooltip-content">
+  // <ul class="tooltip-ul"">
+  //   <li>问题总数 <span>0000</span></li>
+  //  <li>督察问题 <span>0000</span></li>
+  //   <li>案件核查问题 <span>0000</span></li>
+  //   <li>信访投诉问题 <span>0000</span></li>
+  //   <li>民意感知问题 <span>0000</span></li>
+  //   <li>审计督察问题 <span>0000</span></li>
+  //
+  // </ul>
+  //
+  //           </div>
+  //       </div>`;
+  //     }
+    },
+
+  },
+  visualMap: {
+    type: "piecewise",
+    bottom: 10,
+    pieces: [
+      {min: 0, max: 500, label: "问题数低于500", color: "#4987F6"},
+      {min: 501, max: 1000, label: "问题数介于500-1000", color: "#F6A149"},
+      {min: 1001, label: "问题数高于1000", color: "#D34343"},
+    ],
+    right: 10,
+    realtime: false,
+    orient: "horizontal",
+    textStyle: {
+      color: "#fff",
+    },
+    calculable: true,
+  },
+  series: [
+    {
+      type: "map",
+      map: "浏阳市",
+      hoverAnimation: true,
+      label: {
+        show: true,
+        color: "white",
+      },
+      itemStyle: {
+        normal: {
+          areaColor: "#02215E",
+          borderColor: "#1773c3",
+        },
+      },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
+      },
+      data: []
+    }
+  ],
+})
+
+const option1 = ref({
+  xAxis: {
+    type: "category",
+    boundaryGap: false,
+    data: [],
+  },
+  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: [],
+    },
+  ],
+});
+
 function go() {
   router.push('/datav/sub2')
 }
 </script>
+
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
 </style>

src/views/datav/VideoInsp.vue

@@ -42,44 +42,58 @@
                 </el-col>
               </el-row>
             </datav-card>
-            <datav-card title="问题数排名" style="height: 370px;">
+            <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
-                  sub-title="问题数"
+                        :data="fxsjRankList"
-                  :data="data1"
+                        size="large"
-                  :max="11"
                         :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">
-            <div class="datav-col">
+            <datav-date-picker v-model="time"/>
-              <label for="">统计周期：</label>
-              <span>2024年01月01日 - 2024年08月30日</span>
-            </div>
             <div class="flex gap-42">
               <datav-statistic
-                  :value="temp.tempPro"
+                  :value="overview.discoverProblem"
                   title="发现问题数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="temp.tempChangePro"
+                  :value="overview.changedProblem"
                   title="整改问题数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="temp.tempRelationOrg"
+                  :value="overview.relativeOrg"
                   title="涉及单位数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="temp.tempRelationPre"
+                  :value="overview.relativePer"
                   title="涉及人数"
                   style="width: 20%"
               />
               <datav-statistic
-                  :value="temp.tempChangeRate"
+                  :value="overview.changedRate"
                   value-unit="%"
                   title="整改率"
                   style="width: 20%"
@@ -93,11 +107,25 @@
             <datav-card title="问题趋势">
               <v-charts
                   style="height: 250px"
-                  :option="option1"
+                  :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">
@@ -146,7 +174,7 @@
             <datav-card title="问题类型占比">
               <v-charts
                   style="height: 300px"
-                  :option="option2"
+                  :option="ProblemTypeRateChart"
                   autoresize
               />
             </datav-card>
@@ -156,96 +184,208 @@
     </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 {
+  getAllVideoSuperviseCount,
+  getVideoSuperviseProblemTypeRate,
+  getVideoSuperviseProblemRank, getVideoSuperviseMap, getVideoSuperviseTrend
+} from "@/api/screen/videoSupervise.ts";
+import moment from "moment/moment.js";
+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 ProblemTypeRate = ref([])
+const currentYear = new Date().getFullYear();
+const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
+const selectedYear = ref('2024'); // 当前选中的年份
+
+// region 所有函数
+const getOverview = async (timeValue) => {
+  const res = await getAllVideoSuperviseCount(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,
+    };
+  });
+  mapIconList.value = mappedData
+  console.log(mapIconList.value)
+}
 
-const temp =ref({
+
-  tempPro: 0,
+const getProblemTypeRate = async (timeValue) => {
-  tempChangePro: 0,
+  const res = await getVideoSuperviseProblemTypeRate(timeValue);
-  tempRelationOrg: 0,
+  ProblemTypeRate.value = res.videoSuperviseProblemTypeRate
-  tempRelationPre: 0,
-  tempChangeRate: 0
-})
-setTimeout(() => {
-  temp.value = {
-    tempPro: 135,
-    tempChangePro: 135,
-    tempRelationOrg: 89,
-    tempRelationPre: 152,
-    tempChangeRate: 100
 }
-}, 1000);
 
-echarts.registerMap("changsha", changshaMap);
+
-let gobalTempMapVoList = [
+const getRankList = async (timeValue) => {
-  {
+  const res = await getVideoSuperviseProblemRank(timeValue);
-    "name": "芙蓉分局",
+  fxsjRankList.value = res.fxsjVideoSuperviseProblemRankList
-    "total": 25,
+  jsdwRankList.value = res.jsdwVideoSuperviseProblemRankList
-    "changedPro": 25,
-    "relationOrg": 15,
-    "relationPre": 27,
-    "changeRate": 100
-  }, {
-    "name": "天心分局",
-    "total": 5,
-    "changedPro": 5,
-    "relationOrg": 5,
-    "relationPre": 7,
-    "changeRate": 100
-  }, {
-    "name": "岳麓分局",
-    "total": 22,
-    "changedPro": 22,
-    "relationOrg": 12,
-    "relationPre": 25,
-    "changeRate": 100
-  }, {
-    "name": "开福分局",
-    "total": 30,
-    "changedPro": 30,
-    "relationOrg": 16,
-    "relationPre": 32,
-    "changeRate": 100
-  }, {
-    "name": "雨花分局",
-    "total": 18,
-    "changedPro": 18,
-    "relationOrg": 12,
-    "relationPre": 16,
-    "changeRate": 100
-  }, {
-    "name": "望城分局",
-    "total": 15,
-    "changedPro": 15,
-    "relationOrg": 10,
-    "relationPre": 15,
-    "changeRate": 100
-  }, {
-    "name": "浏阳市局",
-    "total": 13,
-    "changedPro": 13,
-    "relationOrg": 11,
-    "relationPre": 15,
-    "changeRate": 100
-  }, {
-    "name": "宁乡市局",
-    "total": 11,
-    "changedPro": 11,
-    "relationOrg": 9,
-    "relationPre": 13,
-    "changeRate": 100
-  }, {
-    "name": "长沙县局",
-    "total": 6,
-    "changedPro": 6,
-    "relationOrg": 8,
-    "relationPre": 9,
-    "changeRate": 100
 }
-];
+const getTrend = async(year)=> {
+  const res = await getVideoSuperviseTrend(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(time.value);
+  getProblemTypeRate(time.value);
+  getRankList(time.value)
+  getMap(time.value)
+  getTrend(selectedYear.value)
+}
+
+// endregion
+
+// region 初始化数据和事件监听
+watch(time, () => {
+  getData()
+})
+onMounted(() => {
+  getData()
+})
+const handleCommand = (year) => {
+  selectedYear.value = year; // 更新当前选中的年份
+  getTrend(selectedYear.value)
+};
+// 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: [12, 16, 14, 11, 6, 13, 8, 17, 16, 10, 12],
+    },
+  ],
+  grid: {
+    left: '5%', // 图表距离容器左边的距离
+    right: '2%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
+});
+echarts.registerMap("changsha", changshaMap);
 const option = ref({
   geo: {
     map: "changsha",
@@ -254,19 +394,18 @@ const option = ref({
   tooltip: {
     trigger: 'item',
     formatter: function (params) {
-      console.log(params)
+      const dataItem = mapIconList.value.find(item => item.name.includes(params.name.substring(0, 2)));
-      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-title">${dataItem.originalName}</div>
           <div class="tooltip-content">
             <ul class="tooltip-ul" >
-              <li>发现问题数 <span>${dataItem.total}</span></li>
+              <li>发现问题数 <span>${dataItem.discoverProblem}</span></li>
-              <li>整改问题数 <span>${dataItem.changedPro}</span></li>
+              <li>整改问题数 <span>${dataItem.changedProblem}</span></li>
-              <li>涉及单位数 <span>${dataItem.relationOrg}</span></li>
+              <li>涉及单位数 <span>${dataItem.relativeOrg}</span></li>
-              <li>涉及人数 <span>${dataItem.relationPre}</span></li>
+              <li>涉及人数 <span>${dataItem.relativePer}</span></li>
-              <li>整改率 <span>${dataItem.changeRate}%</span></li>
+              <li>整改率 <span>${dataItem.changedRate}%</span></li>
             </ul>
           </div>
         </div>`;
@@ -275,11 +414,11 @@ const option = ref({
           <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>公安部信访 <span>0</span></li>
+              <li>涉及单位数 <span>0</span></li>
-
+              <li>涉及人数 <span>0</span></li>
-              <li>12337信访 <span>0</span></li>
+              <li>整改率 <span>0%</span></li>
             </ul>
           </div>
         </div>`;
@@ -288,13 +427,12 @@ const option = ref({
 
   },
   visualMap: {
-
     type: "piecewise",
     bottom: 10,
     pieces: [
-      {gte: 0, lte: 10, label: "问题数低于500"},
+      {gte: 0, lte: 500, label: "问题数低于500"},
-      {gte: 10, lte: 20, label: "问题数介于500-1000"},
+      {gte: 501, lte: 1000, label: "问题数介于500-1000"},
-      {gte: 30, label: "问题数高于1000"},
+      {gte: 1001, label: "问题数高于1000"},
     ],
     right: 10,
     realtime: false,
@@ -328,65 +466,11 @@ const option = ref({
         borderColor: "#FF0000", // 高亮时边框颜色
         borderWidth: 4 // 高亮时边框宽度
       },
-      data: gobalTempMapVoList.map(item => ({
+      data: mapIconList
-        name: item.name,
-        value: item.totalPro  // 将 totalPro 值映射到 value 字段
-      }))
     }
   ],
 })
-
+const ProblemTypeRateChart = ref({
-
-const option1 = ref({
-  xAxis: {
-    type: "category",
-    boundaryGap: false,
-    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
-  },
-  yAxis: {
-    type: "value",
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: "#193775",
-      },
-    },
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'line',
-      label: {
-        backgroundColor: '#6a7985'
-      }
-    }
-  },
-  series: [
-    {
-      type: "line",
-      smooth: true,
-      lineStyle: {
-        color: "#28E6FF",
-        width: 4,
-      },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
-          },
-          {
-            offset: 1,
-            color: "rgba(40,230,255,0)", // 渐变结束颜色
-          },
-        ]),
-      },
-      data: [12, 16, 14, 11, 6, 13, 8, 17, 16, 10, 12],
-    },
-  ],
-});
-
-const option2 = {
   series: [
     {
       type: "pie",
@@ -394,61 +478,14 @@ const option2 = {
       label: {
         color: "#fff",
       },
-      data: [
+      data: ProblemTypeRate.value,
-        {value: 40, name: "着装不规范"},
-        {value: 25, name: "看守人员睡岗"},
-        {value: 30, name: "工作人员玩手机"},
-        {value: 30, name: "单人问询"},
-        {value: 10, name: "民警不在岗"},
-      ],
     },
   ],
   tooltip: {
     trigger: "item",
   },
-};
+});  // 问题类型占比
-
+// endregion
-const data1 = [
-
-  {
-    label: "开福分局",
-    value: 30
-  },
-  {
-    label: "芙蓉分局",
-    value: 25
-  },
-  {
-    label: "岳麓分局",
-    value: 22
-  },
-  {
-    label: "雨花分局",
-    value: 18
-  },
-  {
-    label: "望城分局",
-    value: 15
-  },
-  {
-    label: "浏阳分局",
-    value: 13
-  },
-  {
-    label: "宁乡分局",
-    value: 11
-  },
-  {
-    label: "长沙县局",
-    value: 6
-  },
-  {
-    label: "天心分局",
-    value: 5
-  },
-
-
-];
 
 
 const colors = [
@@ -466,6 +503,8 @@ const colors = [
   },
 ];
 </script>
+
+
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
 
@@ -621,4 +660,33 @@ img {
 
 
 }
+
+
+.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>