二级大屏开始

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) {
+      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,12 +496,73 @@ const option1 = ref({
           },
         ]),
       },
-      data: [175, 101, 158, 141, 177, 162, 108, 166, 197, 104],
+      data: [],
+    },
+  ],
+});
+
+const ajlyPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});
+const wzclPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
+});
+const zfbaPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
     },
   ],
+  tooltip: {
+    trigger: "item",
+  },
+});
+const fwglPieOption = ref({
+  series: [
+    {
+      type: "pie",
+      radius: ["40%", "70%"],
+      label: {
+        color: "#fff",
+      },
+      data: [],
+    },
+  ],
+  tooltip: {
+    trigger: "item",
+  },
 });
 
-const option4 = {
+const jbcloption = ref({
   tooltip: {
     trigger: "item",
   },
@@ -622,20 +574,44 @@ const option4 = {
         color: "#fff",
       },
       data: [
-        {value: 14, name: "工作饮酒"},
+        // {value: 14, name: "工作饮酒"},
-        {value: 11, name: "违规办案"},
+        // {value: 11, name: "违规办案"},
-        {value: 3, name: "涉嫌违纪"},
+        // {value: 3, name: "涉嫌违纪"},
-        {value: 2, name: "违反“三个规定”"},
+        // {value: 2, name: "违反“三个规定”"},
-        {value: 12, name: "违反生活纪律、工作纪律"},
+        // {value: 12, name: "违反生活纪律、工作纪律"},
-        {value: 8, name: "违规接受管理服务对象宴请"},
+        // {value: 8, name: "违规接受管理服务对象宴请"},
-        {value: 2, name: "酒后驾车、涉嫌违法"},
+        // {value: 2, name: "酒后驾车、涉嫌违法"},
-        {value: 2, name: "执法乱作为"},
+        // {value: 2, name: "执法乱作为"},
-        {value: 3, 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/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

@@ -1,17 +1,697 @@
 <template>
-    <el-scrollbar height="100vh">
+  <el-scrollbar height="100vh">
-        <div class="wrapper">
+    <div class="wrapper">
-            <datav-header />
+      <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">-->
-        </div>
+      <main>
-    </el-scrollbar>
+        <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')
+  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-chart-bar
+              <datav-tabs
-                  sub-title="问题数"
+                  type="bottom-button"
-                  :data="data1"
+              >
-                  :max="11"
+                <datav-tab-item label="分县市局" name="1">
-                  :color="colors"
+                  <el-scrollbar height="280px">
-              />
+                    <datav-chart-bar
+                        :data="fxsjRankList"
+                        size="large"
+                        :color="colors"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+                <datav-tab-item label="局属单位" name="2">
+                  <el-scrollbar height="280px">
+                    <datav-chart-bar
+                        :data="jsdwRankList"
+                        :max="11"
+                        size="large"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+              </datav-tabs>
 
             </datav-card>
           </el-col>
+
           <el-col :span="12">
-            <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
+
+
+const getRankList = async (timeValue) => {
+  const res = await getVideoSuperviseProblemRank(timeValue);
+  fxsjRankList.value = res.fxsjVideoSuperviseProblemRankList
+  jsdwRankList.value = res.jsdwVideoSuperviseProblemRankList
+}
+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()
 })
-setTimeout(() => {
+onMounted(() => {
-  temp.value = {
+  getData()
-    tempPro: 135,
+})
-    tempChangePro: 135,
+const handleCommand = (year) => {
-    tempRelationOrg: 89,
+  selectedYear.value = year; // 更新当前选中的年份
-    tempRelationPre: 152,
+  getTrend(selectedYear.value)
-    tempChangeRate: 100
+};
-  }
+// endregion
-}, 1000);
+
 
+// 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);
-let gobalTempMapVoList = [
-  {
-    "name": "芙蓉分局",
-    "total": 25,
-    "changedPro": 25,
-    "relationOrg": 15,
-    "relationPre": 27,
-    "changeRate": 100
-  }, {
-    "name": "天心分局",
-    "total": 5,
-    "changedPro": 5,
-    "relationOrg": 5,
-    "relationPre": 7,
-    "changeRate": 100
-  }, {
-    "name": "岳麓分局",
-    "total": 22,
-    "changedPro": 22,
-    "relationOrg": 12,
-    "relationPre": 25,
-    "changeRate": 100
-  }, {
-    "name": "开福分局",
-    "total": 30,
-    "changedPro": 30,
-    "relationOrg": 16,
-    "relationPre": 32,
-    "changeRate": 100
-  }, {
-    "name": "雨花分局",
-    "total": 18,
-    "changedPro": 18,
-    "relationOrg": 12,
-    "relationPre": 16,
-    "changeRate": 100
-  }, {
-    "name": "望城分局",
-    "total": 15,
-    "changedPro": 15,
-    "relationOrg": 10,
-    "relationPre": 15,
-    "changeRate": 100
-  }, {
-    "name": "浏阳市局",
-    "total": 13,
-    "changedPro": 13,
-    "relationOrg": 11,
-    "relationPre": 15,
-    "changeRate": 100
-  }, {
-    "name": "宁乡市局",
-    "total": 11,
-    "changedPro": 11,
-    "relationOrg": 9,
-    "relationPre": 13,
-    "changeRate": 100
-  }, {
-    "name": "长沙县局",
-    "total": 6,
-    "changedPro": 6,
-    "relationOrg": 8,
-    "relationPre": 9,
-    "changeRate": 100
-  }
-];
 const option = ref({
   geo: {
     map: "changsha",
@@ -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>