审计督察地图卡片

src/components/datav/chart-bar.vue

@@ -5,7 +5,6 @@
   </div>
   <div>
     <div
-
         class="flex v-center bar-item wrap between"
         v-for="item in data"
         :size="size"
@@ -24,16 +23,17 @@
                     }"
         ></div>
       </div>
-      <span >{{ item.value + props.unit }}</span>
+      <span :class="spanClass">{{ item.value + props.unit }}</span>
       <span
           class="bar-item_remark text-right ml-8"
           v-if="item.denominator"
-          style="min-width: 40px"
+          style="min-width: 50px; "
+          :style="{ fontSize: props.remarkFontSize }"
       >
                 <span class="text-success">{{ item.numerator }}</span>
                 <span>/</span>
                 <span>{{ item.denominator }}</span>
-            </span>
+      </span>
     </div>
   </div>
 </template>
@@ -73,7 +73,8 @@ const props = defineProps({
     type: String,
     default: "left",
   },
-
+  remarkFontSize: {type: String, default: "10px",},
+  spanClass: { type: String, default: "", },
 });
 
 const max = ref(100);
@@ -85,7 +86,6 @@ watch(
 );
 
 
-
 function getMax() {
   if (props.unit !== "%") {
     max.value = Math.max(...props.data.map((item) => item.value));
@@ -136,6 +136,7 @@ function getColor(val) {
 
   &[size="small"] {
     font-size: 12px;
+
     .bar-item_content {
       width: calc(100% - 180px);
     }
@@ -191,4 +192,10 @@ function getColor(val) {
     }
   }
 }
+
+.right-aligned {
+  text-align: right;
+  width: 60px;
+}
+
 </style>

src/components/datav/header.vue

@@ -14,10 +14,14 @@
           <span>案件核查</span>
           <img :src="isActive ? Img2 : Img1" alt=""/>
         </router-link>
-        <router-link to="/datav/jwpy" v-slot="{ isActive }">
-          <span>警务评议</span>
-          <img :src="isActive ? Img2 : Img1" alt=""/>
-        </router-link>
+        <!--        <router-link to="/datav/jwpy" v-slot="{ isActive }">-->
+        <div  @click="goToBaidu">
+          <router-link to="/" v-slot="{ isActive }">
+            <span>民意感知</span>
+            <img :src="isActive ? Img2 : Img1" alt=""/>
+          </router-link>
+        </div>
+
       </nav>
       <h1>
         <router-link to="/datav/gobal">
@@ -48,6 +52,14 @@
 <script setup>
 import Img1 from '/imgs/datav/base.png'
 import Img2 from '/imgs/datav/base_active.png'
+
+
+const goToBaidu = () => {
+  window.open('http://65.47.6.114:8001/police-service/map-index.html?FPID=920507&ticket=dcZcPz0WPEoQaOb14HmRETDQjFL8cKgYSW6OyR0mQcLt-eHJ7HSQn2WDxilMwCaXGOxS3LZx1p9Is1b7yOM7BVoU1o0IVRwDT1on2yQK8JU=', '_blank');
+  // 可根据需要设置激活状态，这里简单设置为点击后激活
+  isActive.value = true;
+};
+
 </script>
 <style lang="scss" scoped>
 header {

src/router/routes.ts

@@ -52,7 +52,11 @@ export const routes = [
     },
     {
         path: '/datav/jwpy',
-        component: () => import('@/views/datav/Jwpy.vue'),
+        // component: () => import('@/views/datav/Jwpy.vue'),
+        beforeEnter: (to, from, next) => {
+            window.open('www.baidu.com', '_blank');
+            next(false); // 阻止路由的正常内部跳转
+        }
     },
     {
         path: '/datav/lmgz',

src/style/public.scss

@@ -26,16 +26,19 @@ h2 {
   font-size: 24px;
   font-weight: 500;
 }
+
 h3 {
   color: var(--primary-color);
   font-size: 20px;
   font-weight: 500;
   margin: 20px 0;
 }
+
 h4 {
   font-size: 18px;
   font-weight: 500;
 }
+
 h5 {
   color: var(--primary-color);
   font-size: 16px;
@@ -50,7 +53,7 @@ img {
   max-width: 100%;
 }
 
-svg+span {
+svg + span {
   margin-left: .5em;
 }
 
@@ -110,6 +113,7 @@ svg+span {
 .flex-inline.gap-4 {
   gap: 4px;
 }
+
 .flex.gap,
 .flex-inline.gap {
   gap: 8px;
@@ -134,6 +138,7 @@ svg+span {
 .text-small {
   font-size: 12px;
 }
+
 .text-center {
   text-align: center;
 }
@@ -253,6 +258,7 @@ svg+span {
 .mt-16 {
   margin-top: 16px;
 }
+
 .mt-18 {
   margin-top: 18px;
 }
@@ -272,6 +278,7 @@ svg+span {
 .mb-0 {
   margin-bottom: 0;
 }
+
 .mb-3 {
   margin-bottom: 3px;
 }
@@ -328,12 +335,14 @@ svg+span {
   display: flex;
   flex-wrap: wrap;
   --label-width: 100px;
+
   .col {
     margin-bottom: 12px;
   }
 }
+
 .col {
-  
+
   --gap-width: 10px;
   display: flex;
   gap: var(--gap-width);
@@ -341,15 +350,19 @@ svg+span {
   &.col-6 {
     width: 25%;
   }
+
   &.col-8 {
     width: 33.3%;
   }
+
   &.col-12 {
     width: 50%;
   }
+
   &.col-18 {
     width: 75%;
   }
+
   &.col-24 {
     width: 100%;
   }
@@ -360,7 +373,7 @@ svg+span {
     color: #666;
   }
 
-  >span {
+  > span {
     width: calc(100% - var(--label-width) - var(--gap-width));
     color: #333;
   }
@@ -403,9 +416,11 @@ svg+span {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
 .h100 {
   height: 100%;
 }
+
 .h-280 {
   height: 280px;
 }
@@ -417,6 +432,7 @@ svg+span {
     color: #888;
   }
 }
+
 .content {
   padding: 16px;
   white-space: pre-wrap;

src/views/datav/AuditSuper.vue

@@ -8,21 +8,18 @@
             <datav-card title="审计整改结果" sub-title="已整改问题数/查出问题数">
 
 
-
               <el-scrollbar height="350px">
                 <datav-chart-bar
                     :size="small"
                     :data="data1"
                     unit="%"
-                />
+                    remark-font-size="12px"
+                    spanClass="right-aligned"
 
+                />
               </el-scrollbar>
-              <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>
 
 
@@ -123,36 +120,39 @@
 
               <el-scrollbar height="470px">
                 <div class="message">
-                  <div class="message-title">整改通知</div>
-                  <div class="message-content">食药环支队：
-                    根据《全省公安机关执法活动财物审计三年全覆盖工作方案》《长沙市公安局关于推进执法活动财物审计全覆盖的实施方案》要求，警务督察支队审计处派出审计组对食药环支队2022年1月至2023年12月办理的刑事、行政案件执法活动财物管理情况进行了审计</div>
+                  <div class="message-title">工作简报</div>
+                  <div class="message-content">
+                    为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。
+                  </div>
                   <div class="message-footer flex end">
-                    <span>2024年8月26日</span>
+                    <span>2024-09-27 10:32</span>
                   </div>
                 </div>
                 <div class="message" type="warning">
-                  <div class="message-title">整改通知</div>
+                  <div class="message-title">工作简报</div>
                   <div class="message-content">
-                    警务督察支队审计处派出审计组对刑侦支队2022年1月至2023年12月办理的刑事、行政案件执法活动财物管理情况进行了审计
+                    为持续抓好“六项规定”贯彻执行，扎实做好中秋佳节前队伍纪律作风监督，9月3日20时至22时，市局警务督察支队联合机关党委以及来支队跟班学习的督察专干，组成6个督察组，对干部、民警、辅警共计112人开展集中酒精吹气测试
                   </div>
                   <div class="message-footer flex end">
-                    <span>2024年8月26日</span>
+                    <span>2024-09-06 16:23</span>
                   </div>
                 </div>
                 <div class="message" type="success">
-                  <div class="message-title">审计公示</div>
-                  <div class="message-content">食药环支队：
-                    根据《全省公安机关执法活动财物审计三年全覆盖工作方案》《长沙市公安局关于推进执法活动财物审计全覆盖的实施方案》要求，警务督察支队审计处派出审计组对食药环支队2022年1月至2023年12月办理的刑事、行政案件执法活动财物管理情况进行了审计</div>
+                  <div class="message-title">工作简报</div>
+                  <div class="message-content">
+                    为强化队伍纪律作风监督，给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障，7月11日晚，市局警务督察支队联合机关党委，派出6个现场督察组，对干部、民警、辅警共计111人开展集中酒精吹气测试。
+                  </div>
                   <div class="message-footer flex end">
-                    <span>2024年8月26日</span>
+                    <span>2024-07-15 14:39</span>
                   </div>
                 </div>
                 <div class="message" type="success">
-                  <div class="message-title">审计公示</div>
-                  <div class="message-content">食药环支队：
-                    根据市局领导指示，受政治部委托，按照《长沙市公安局领导经济责任审计规定》的要求，警务督察支队审计处派出审计组，对吴驰同志担任长沙市公安局高新区分局东方红派出所所长期间的经济责任履行情况进行离任审计</div>
+                  <div class="message-title">工作简报</div>
+                  <div class="message-content">
+                    为督促各参战警力切实履职，拧紧责任链条，保障周杰伦演唱会安全顺利进行，根据市局统一部署，2024年5月30日至6月2日，由警务督察支队牵头，统筹参战单位督察力量，对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。
+                  </div>
                   <div class="message-footer flex end">
-                    <span>2024年5月16日</span>
+                    <span>2024-06-06 09:04</span>
                   </div>
                 </div>
               </el-scrollbar>
@@ -177,63 +177,63 @@ let gobalTempMapVoList = [
     "reviewOrg": 0,
     "checkPro": 0,
     "rushPro": 0,
-    "changed":0
+    "changed": 0
   },
   {
     "name": "开福分局",
     "reviewOrg": 0,
     "checkPro": 186,
     "rushPro": 0,
-    "changed":137
+    "changed": 137
   },
   {
     "name": "岳麓分局",
     "reviewOrg": 0,
     "checkPro": 11,
     "rushPro": 0,
-    "changed":0
+    "changed": 0
   },
   {
     "name": "望城分局",
     "reviewOrg": 0,
     "checkPro": 0,
     "rushPro": 0,
-    "changed":0
+    "changed": 0
   },
   {
     "name": "浏阳市局",
     "reviewOrg": 0,
     "checkPro": 0,
     "rushPro": 0,
-    "changed":0
+    "changed": 0
   },
   {
     "name": "长沙县局",
     "reviewOrg": 0,
     "checkPro": 0,
     "rushPro": 0,
-    "changed":0
+    "changed": 0
   },
   {
     "name": "芙蓉分局",
     "reviewOrg": 0,
     "checkPro": 1,
     "rushPro": 0,
-    "changed":1
+    "changed": 1
   },
   {
     "name": "雨花分局",
     "reviewOrg": 0,
     "checkPro": 240,
     "rushPro": 0,
-    "changed":220
+    "changed": 220
   },
   {
     "name": "宁乡市局",
     "reviewOrg": 0,
     "checkPro": 232,
     "rushPro": 194,
-    "changed":194
+    "changed": 194
   }
 
 ];
@@ -377,44 +377,59 @@ const option1 = ref({
 const data1 = [
   {
     label: "芙蓉分局",
-    value: 100,
-    numerator: 1,
-    denominator: 1,
+    value: "100",
+    rate: "100",
+    numerator: "1",
+    denominator: "1",
   },
   {
     label: "雨花分局",
-    value: 91,
-    numerator: 220,
+    value: "91",
+    rate: "91",
+    numerator: "220",
     denominator: 240,
   },
   {
     label: "高新分局",
     value: 90,
+    rate: 90,
     numerator: 140,
     denominator: 155,
   },
-
   {
     label: "宁乡市局",
     value: 83,
+    rate: 83,
     numerator: 194,
     denominator: 232,
   },
   {
     label: "开福分局",
     value: 73,
+    rate: 73,
+    numerator: 137,
+    denominator: 186,
+  },
+  {
+    label: "开福分局",
+    value: 73,
+    rate: 73,
     numerator: 137,
     denominator: 186,
   },
-
-
   {
     label: "岳麓分局",
     value: 0,
     numerator: 0,
+    rate: 0,
     denominator: 11,
   },
 ];
+// setTimeout(() => {
+//   data1.values().forEach((item) => {
+//     console.log(item.label);
+//   });
+// }, 1000);
 
 const data2 = [
   {
@@ -543,9 +558,6 @@ const option5 = {
 };
 
 
-
-
-
 const option22 = {
   series: [
     {
@@ -567,7 +579,20 @@ const option22 = {
 };
 
 
-
+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>
 
@@ -675,6 +700,8 @@ const option22 = {
     margin-bottom: 10px;
   }
 }
+
+
 </style>
 
 

src/views/datav/CaseVerif.vue

@@ -14,6 +14,7 @@
                     <datav-chart-bar
                         :data="fxsjBarList"
                         size="large"
+                        :color="colors"
                     />
                   </el-scrollbar>
                 </datav-tab-item>

src/views/datav/SceneInsp.vue

@@ -255,6 +255,59 @@ import {getAllSupervisionNotifyCount, getChangedRank, getSupervisionTrend} from
 import {getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts";
 
 const data1 = ref([]);
+
+
+// const data1 = ref([
+//
+// ]);
+// setTimeout(() => {
+//   data1.value=[
+//     {
+//       label: "芙蓉分局",
+//       value: "100",
+//       rate:"100",
+//       numerator: "1",
+//       denominator: "1",
+//     },
+//     {
+//       label: "雨花分局",
+//       value: "91",
+//       rate:"91",
+//       numerator: "220",
+//       denominator: "240",
+//     },
+//     {
+//       label: "高新分局",
+//       value: 90,
+//       rate:90,
+//       numerator: 140,
+//       denominator: 155,
+//     },
+//     {
+//       label: "宁乡市局",
+//       value: 83,
+//       rate:83,
+//       numerator: 194,
+//       denominator: 232,
+//     },
+//     {
+//       label: "开福分局",
+//       value: 73,
+//       rate:73,
+//       numerator: 137,
+//       denominator: 186,
+//     },
+//     {
+//       label: "岳麓分局",
+//       value: 0,
+//       numerator: 0,
+//       rate:0,
+//       denominator: 11,
+//     },
+//   ]
+// },2000)
+
+
 const activeTabLeft = ref("3");
 // 日常督察总览
 const rankOverview = ref({