ok

src/components/datav/header.vue

@@ -18,7 +18,7 @@
         <div  @click="goToBaidu">
           <router-link to="" v-slot="{ isActive }">
             <span>民意感知</span>
-            <img :src="isActive ? Img2 : Img1" alt=""/>
+            <img :src="Img1" alt=""/>
           </router-link>
         </div>
 

src/views/Home.vue

@@ -57,7 +57,7 @@ flowNumberAndTodayNumber().then(data => {
     flowNumber.value = data.flowNumber;
     todayNumber.value = data.todayNumber;
 })
-const links = ['警务评议', '视频督察', '情指行', '执法办案']
+const links = ['民意感知', '视频督察', '情指行', '执法办案']
 
 const router = useRouter()
 function goQuery(item) {

src/views/datav/AuditSuper.vue

@@ -15,6 +15,7 @@
                     unit="%"
                     remark-font-size="12px"
                     spanClass="right-aligned"
+                    :color="colors"
 
                 />
               </el-scrollbar>
@@ -581,16 +582,20 @@ const option22 = {
 
 const colors = [
   {
-    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
+    // 绿色
-    percentage: 80,
+    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
+    percentage: 90,
   },
   {
+    // 黄色
     color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
-    percentage: 60,
+    percentage: 80,
   },
   {
-    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
+
-    percentage: 40,
+    // 红色
+    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
+    percentage: 70,
   },
 ];
 

src/views/datav/Gobal.vue

@@ -186,8 +186,6 @@ const option = ref({
               <li>督察问题 <span>${dataItem.supervisePro}</span></li>
               <li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li>
               <li>信访投诉问题 <span>${dataItem.mailPro}</span></li>
-              <li>民意感知问题 <span>${dataItem.policePro}</span></li>
-              <li>审计监督问题 <span>${dataItem.reviewPro}</span></li>
             </ul>
           </div>
         </div>`;
@@ -200,8 +198,6 @@ const option = ref({
               <li>督察问题 <span>0</span></li>
               <li>案件核查问题 <span>0</span></li>
               <li>信访投诉问题 <span>0</span></li>
-              <li>民意感知问题 <span>0</span></li>
-              <li>审计监督问题 <span>0</span></li>
             </ul>
           </div>
         </div>`;
@@ -450,7 +446,7 @@ const colors = [
   .tooltip {
     position: relative;
     width: 169.88px;
-    height: 198px;
+    height: 168px;
     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;
@@ -475,7 +471,7 @@ const colors = [
 
   .tooltip-content {
     width: 170px;
-    height: 155.8px;
+    height: 120px;
     //font-size: 11px;
     margin-top: -12px;
     background: linear-gradient(180deg, #010457 0%, #031577 100%);

src/views/datav/MailVisits.vue

@@ -93,7 +93,6 @@
               />
               <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                 <div class="tab-title-item active">
-                  暂无数据
                 </div>
               </div>
             </datav-card>
@@ -218,7 +217,6 @@
               />
               <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                 <div class="tab-title-item active">
-                  暂无数据
                 </div>
               </div>
             </datav-card>
@@ -245,13 +243,59 @@ import moment from "moment/moment.js";
 echarts.registerMap("changsha", changshaMap);
 let gobalTempMapVoList = [
   {
+    "name": "芙蓉分局",
+    "total": 704,
+    "countryTotal": 153,
+    "policeTotal": 506,
+    "numTotal": 45,
+  }, {
     "name": "天心分局",
-    "totalPro": 11,
+    "total": 700,
-    "supervisePro": 11,
+    "countryTotal": 150,
-    "caseVerifyPro": 11,
+    "policeTotal": 483,
-    "mailPro": 11,
+    "numTotal": 67,
-    "policePro": 11,
+  }, {
-    "reviewPro": 11
+    "name": "岳麓分局",
+    "total": 609,
+    "countryTotal": 94,
+    "policeTotal": 462,
+    "numTotal": 53,
+  }, {
+    "name": "开福分局",
+    "total": 392,
+    "countryTotal": 108,
+    "policeTotal": 224,
+    "numTotal": 60,
+  }, {
+    "name": "雨花分局",
+    "total": 886,
+    "countryTotal": 204,
+    "policeTotal": 601,
+    "numTotal": 81,
+  }, {
+    "name": "望城分局",
+    "total": 273,
+    "countryTotal": 22,
+    "policeTotal": 224,
+    "numTotal": 27,
+  }, {
+    "name": "浏阳市局",
+    "total": 335,
+    "countryTotal": 34,
+    "policeTotal": 261,
+    "numTotal": 40,
+  }, {
+    "name": "宁乡市局",
+    "total": 309,
+    "countryTotal": 16,
+    "policeTotal": 267,
+    "numTotal": 26,
+  }, {
+    "name": "长沙县局",
+    "total": 422,
+    "countryTotal": 75,
+    "policeTotal": 303,
+    "numTotal": 44,
   }
 ];
 const option = ref({
@@ -270,11 +314,11 @@ const option = ref({
           <div class="tooltip-title">${dataItem.name}</div>
           <div class="tooltip-content">
             <ul class="tooltip-ul" >
-              <li>信访总件数 <span>${dataItem.totalPro}</span></li>
+              <li>信访总件数 <span>${dataItem.total}</span></li>
-              <li>国家信访 <span>${dataItem.supervisePro}</span></li>
+              <li>国家信访 <span>${dataItem.countryTotal}</span></li>
-              <li>公安部信访 <span>${dataItem.caseVerifyPro}</span></li>
+              <li>公安部信访 <span>${dataItem.policeTotal}</span></li>
-              <li>局长信箱 <span>${dataItem.mailPro}</span></li>
+
-              <li>12337信访 <span>${dataItem.policePro}</span></li>
+              <li>12337信访 <span>${dataItem.numTotal}</span></li>
             </ul>
           </div>
         </div>`;
@@ -286,7 +330,7 @@ const option = ref({
               <li>信访总件数 <span>0</span></li>
               <li>国家信访 <span>0</span></li>
               <li>公安部信访 <span>0</span></li>
-              <li>局长信箱 <span>0</span></li>
+
               <li>12337信访 <span>0</span></li>
             </ul>
           </div>
@@ -404,17 +448,26 @@ const option2 = {
         color: "#fff",
       },
       data: [
-        // {value: 311, name: "慢作为"},
+        {value: 1282, name: "不作为"},
-        // {value: 735, name: "意见建议"},
+        {value: 426, name: "求助咨询"},
-        // {value: 580, name: "违法违纪违规"},
+        {value: 284, name: "乱作为"},
-        // {value: 484, name: "乱作为"},
+        {value: 131, name: "其他"},
-        // {value: 300, name: "其他"},
+        {value: 95, name: "违法违纪违规"},
-        // {value: 300, name: "不作为"},
+        {value: 72, name: "慢作为"},
+        {value: 24, name: "意见建议"},
+        {value: 5, name: "纪律作风"},
+
       ],
     },
   ],
+  tooltip: {
+    trigger: "item",
+  },
 };
 const option3 = {
+  tooltip: {
+    trigger: "item",
+  },
   series: [
     {
       type: "pie",
@@ -423,12 +476,10 @@ const option3 = {
         color: "#fff",
       },
       data: [
-        // {value: 21, name: "其他"},
+        {value: 10, name: "通报批评"},
-        // {value: 33, name: "通报批评"},
+        {value: 2, name: "责令检查"},
-        // {value: 56, name: "责令检查"},
+        {value: 1, name: "诫勉谈话"},
-        // {value: 31, name: "考核降级"},
+        {value: 1, name: "批评教育"},
-        // {value: 120, name: "组织处理"},
-        // {value: 32, name: "党纪处分"},
       ],
     },
   ],
@@ -473,21 +524,17 @@ const time = ref([
 ]);
 
 
-
+const temp1 = [{
-const temp1=[{
+  label: '张三',
-  label:'张三',
   value: '1'
 }]
 
-const temp2=[{
+const temp2 = [{
-  label:'李四',
+  label: '李四',
   value: '1'
 }]
 
 
-
-
-
 /**
  * 信访趋势
  * @type {Ref<UnwrapRef<string>, UnwrapRef<string> | string>}
@@ -630,9 +677,6 @@ const colors = [
 }
 
 
-
-
-
 :deep() {
   // 弹框整体
   .tooltip {
@@ -711,5 +755,4 @@ const colors = [
 }
 
 
-
 </style>

src/views/datav/VideoInsp.vue

@@ -1,7 +1,7 @@
 <template>
   <el-scrollbar height="100vh">
     <div class="wrapper">
-            <datav-header />
+      <datav-header/>
       <main>
         <el-row :gutter="16">
           <el-col :span="6">
@@ -27,36 +27,29 @@
                     controls="controls"
                     autoplay
                 >
-                                    <source src="/mp4/1.mp4" type="video/ogg" />
+                  <source src="/mp4/1.mp4" type="video/ogg"/>
                 </video>
               </div>
               <el-row :gutter="12">
                 <el-col :span="8">
-                                    <img src="/imgs/datav/1.png" class="active" alt="" />
+                  <img src="/imgs/datav/1.png" class="active" alt=""/>
                 </el-col>
                 <el-col :span="8">
-                                    <img src="/imgs/datav/2.jpg" alt="" />
+                  <img src="/imgs/datav/2.jpg" alt=""/>
                 </el-col>
                 <el-col :span="8">
-                                    <img src="/imgs/datav/3.jpeg" alt="" />
+                  <img src="/imgs/datav/3.jpeg" alt=""/>
                 </el-col>
               </el-row>
             </datav-card>
-                        <datav-card title="问题数排名">
+            <datav-card title="问题数排名" style="height: 370px;">
               <datav-chart-bar
                   sub-title="问题数"
                   :data="data1"
                   :max="11"
+                  :color="colors"
               />
-                            <div
+
-                                class="flex tab-title flex center mt-20"
-                                style="margin-bottom: 20px"
-                            >
-                                <div class="tab-title-item active">
-                                    分县市局
-                                </div>
-                                <div class="tab-title-item">局属单位</div>
-                            </div>
             </datav-card>
           </el-col>
           <el-col :span="12">
@@ -66,27 +59,27 @@
             </div>
             <div class="flex gap-42">
               <datav-statistic
-                                :value="98"
+                  :value="135"
                   title="发现问题数"
                   style="width: 20%"
               />
               <datav-statistic
-                                :value="10"
+                  :value="135"
                   title="整改问题数"
                   style="width: 20%"
               />
               <datav-statistic
-                                :value="22"
+                  :value="89"
                   title="涉及单位数"
                   style="width: 20%"
               />
               <datav-statistic
-                                :value="121"
+                  :value="152"
                   title="涉及人数"
                   style="width: 20%"
               />
               <datav-statistic
-                                :value="10"
+                  :value="100"
                   value-unit="%"
                   title="整改率"
                   style="width: 20%"
@@ -115,7 +108,7 @@
                   </div>
                   <div class="message-footer flex between">
                     <span>芙蓉分局定王台派出所</span>
-                                        <span>2024-11-11 19:16</span>
+                    <span>2024-11-18 20:12</span>
                   </div>
                 </div>
                 <div class="message message-info">
@@ -125,7 +118,7 @@
                   </div>
                   <div class="message-footer flex between">
                     <span>望城区公安局法制大队</span>
-                                        <span>2024-11-18 11:12</span>
+                    <span>2024-11-18 19:12</span>
                   </div>
                 </div>
                 <div class="message">
@@ -135,7 +128,7 @@
                   </div>
                   <div class="message-footer flex between">
                     <span>芙蓉分局蓉园派出所</span>
-                                        <span>2024-11-14 10:00</span>
+                    <span>2024-11-18 16:12</span>
                   </div>
                 </div>
                 <div class="message">
@@ -145,7 +138,7 @@
                   </div>
                   <div class="message-footer flex between">
                     <span>开福分局法制大队</span>
-                                  <span>2024-11-15 15:51</span>
+                    <span>2024-11-18 15:12</span>
                   </div>
                 </div>
               </el-scrollbar>
@@ -170,29 +163,131 @@ import vCharts from "vue-echarts";
 import * as echarts from "echarts/core";
 
 echarts.registerMap("changsha", changshaMap);
-const option = {
+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: {
-        // 是上面注册时的名字哦，registerMap（'名字保持一致'）
     map: "changsha",
+
   },
+  tooltip: {
+    trigger: 'item',
+    formatter: function (params) {
+      console.log(params)
+      const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
+      if (dataItem) {
+        return `
+        <div class="tooltip">
+          <div class="tooltip-title">${dataItem.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul" >
+              <li>发现问题数 <span>${dataItem.total}</span></li>
+              <li>整改问题数 <span>${dataItem.changedPro}</span></li>
+              <li>涉及单位数 <span>${dataItem.relationOrg}</span></li>
+              <li>涉及人数 <span>${dataItem.relationPre}</span></li>
+              <li>整改率 <span>${dataItem.changeRate}%</span></li>
+            </ul>
+          </div>
+        </div>`;
+      } else {
+        return `<div class="tooltip">
+          <div class="tooltip-title">${params.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul"">
+              <li>信访总件数 <span>0</span></li>
+              <li>国家信访 <span>0</span></li>
+              <li>公安部信访 <span>0</span></li>
 
+              <li>12337信访 <span>0</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
+    },
+
+  },
   visualMap: {
+
     type: "piecewise",
     bottom: 10,
     pieces: [
-            { gte: 85, lte: 100, label: "问题数低于500" },
+      {gte: 0, lte: 10, label: "问题数低于500"},
-            { gte: 65, lte: 85, label: "问题数低于1000" },
+      {gte: 10, lte: 20, label: "问题数介于500-1000"},
-            { gte: 0, lte: 65, label: "问题数低于1000" },
+      {gte: 30, label: "问题数高于1000"},
     ],
-        right: 10, // 右边距
+    right: 10,
     realtime: false,
-        orient: "horizontal", // 水平显示
+    orient: "horizontal",
     textStyle: {
-            color: "#fff", // 文字颜色
+      color: "#fff",
     },
     calculable: true,
     inRange: {
-            color: ["#D34343", "#F6A149", "#4987F6"],
+      color: ["#4987F6", "#F6A149", "#D34343",],
     },
   },
   series: [
@@ -201,40 +296,35 @@ const option = {
       type: "map",
       map: "changsha",
       hoverAnimation: true,
-
       label: {
         show: true,
         color: "white",
       },
       itemStyle: {
         normal: {
-                    areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
+          areaColor: "#02215E",
+          borderColor: "#1773c3",
         },
       },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
       },
+      data: gobalTempMapVoList.map(item => ({
+        name: item.name,
+        value: item.totalPro  // 将 totalPro 值映射到 value 字段
+      }))
+    }
   ],
-};
+})
+
 
 const option1 = ref({
   xAxis: {
     type: "category",
     boundaryGap: false,
-        data: [
+    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
-            "9/10",
-            "9/11",
-            "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",
@@ -245,6 +335,15 @@ const option1 = ref({
       },
     },
   },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
   series: [
     {
       type: "line",
@@ -265,10 +364,7 @@ const option1 = ref({
           },
         ]),
       },
-            data: [
+      data: [12, 16, 14, 11, 6, 13, 8, 17, 16, 10, 12],
-                2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
-                3000, 3100, 3100, 3100,
-            ],
     },
   ],
 });
@@ -282,58 +378,92 @@ const option2 = {
         color: "#fff",
       },
       data: [
-                { value: 1048, name: "着装不规范" },
+        {value: 40, name: "着装不规范"},
-                { value: 735, name: "看守人员睡岗" },
+        {value: 25, name: "看守人员睡岗"},
-                { value: 580, name: "工作人员玩手机" },
+        {value: 30, name: "工作人员玩手机"},
-                { value: 484, name: "单人问询" },
+        {value: 30, name: "单人问询"},
-                { value: 300, name: "民警不在岗" },
+        {value: 10, name: "民警不在岗"},
       ],
     },
   ],
+  tooltip: {
+    trigger: "item",
+  },
 };
 
+
+
 const data1 = [
+
   {
-        name: "芙蓉分局",
+    label: "开福分局",
-        value: 11
+    value: 30
   },
   {
-        name: "开福分局",
+    label: "芙蓉分局",
-        value: 10
+    value: 25
+  },
+  {
+    label: "岳麓分局",
+    value: 22
   },
-    
   {
-        name: "岳麓分局",
+    label: "雨花分局",
-        value: 9
+    value: 18
   },
   {
-        name: "雨花分局",
+    label: "望城分局",
-        value: 8
+    value: 15
   },
   {
-        name: "望城分局",
+    label: "浏阳分局",
-        value: 8
+    value: 13
   },
   {
-        name: "浏阳市局",
+    label: "宁乡分局",
-        value: 7
+    value: 11
+  },
+  {
+    label: "长沙县局",
+    value: 6
   },
   {
-        name: "长沙县局",
+    label: "天心分局",
     value: 5
   },
+
+
+];
+
+
+const colors = [
+  {
+    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
+    percentage: 80,
+  },
+  {
+    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
+    percentage: 60,
+  },
+  {
+    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
+    percentage: 40,
+  },
 ];
 </script>
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
+
 img {
   width: 100%;
   display: block;
   border: 1px solid transparent;
+
   &.active {
     border-color: #1cd9ff;
   }
 }
+
 .message {
   padding: 10px;
   margin-bottom: 10px;
@@ -347,8 +477,8 @@ img {
           180deg,
           rgba(255, 255, 255, 0.28),
           rgba(255, 255, 255, 0.26)
-        )
+  ) 1 1;
-        1 1;
+
   &.message-error {
     background: linear-gradient(
             180deg,
@@ -360,12 +490,13 @@ img {
             180deg,
             rgba(255, 71, 71, 0.59),
             rgba(251, 95, 95, 1)
-            )
+    ) 1 1;
-            1 1;
+
     .message-title {
       color: #ff0017;
     }
   }
+
   &.message-info {
     background: linear-gradient(
             180deg,
@@ -377,22 +508,102 @@ img {
             180deg,
             rgba(71, 209, 255, 0.28),
             rgba(8, 177, 255, 1)
-            )
+    ) 1 1;
-            1 1;
+
     .message-title {
       color: #1cd9ff;
     }
   }
+
   .message-title {
     font-size: 23px;
     font-weight: 700;
     margin-bottom: 10px;
     color: #597ae9;
   }
+
   .message-footer {
     font-size: 14px;
     color: #597ae9;
     margin-top: 10px;
   }
 }
+
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 169.88px;
+    height: 178px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    border: 1px solid #4E8FFF;
+    margin: -10px -10px -10px -10px;
+  }
+
+  //浏阳市局
+  .tooltip-title {
+    width: 169.88px;
+    height: 43px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    text-align: center; /* 水平居中 */
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    line-height: 22px;
+    border-bottom: 1px solid #253755; /* 设置下边框 */
+  }
+
+
+  .tooltip-content {
+    width: 170px;
+    height: 132px;
+    //font-size: 11px;
+    margin-top: -12px;
+    background: linear-gradient(180deg, #010457 0%, #031577 100%);
+  }
+
+  .tooltip-content ul {
+    list-style-type: none; /* 移除默认的小圆点 */
+    padding: 0;
+
+  }
+
+  .tooltip-content ul li {
+    margin-left: 5px;
+    height: 25px;
+    color: #597AE9;
+    font-size: 13px;
+  }
+
+
+  // 数字的span
+  .tooltip-ul span {
+    float: right;
+    width: 30px;
+    text-align: right;
+    margin-right: 15px;
+    color: #fff;
+    font-size: 13px;
+  }
+
+
+  /* 小尖角 */
+  .tooltip::before {
+    content: '';
+    position: absolute;
+    top: 90px; /* 调整尖角的垂直位置 */
+    left: -10px; /* 调整尖角的水平位置 */
+    width: 0;
+    height: 0;
+    //border-top: 10px solid red; /* 顶边颜色 */
+    //border-bottom: 10px solid green; /* 底边颜色 */
+    //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
+  }
+
+
+}
 </style>