From 73f4ad086b244838d1843d45d562b0f85a89e65f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E7=88=B1=E5=AD=A6=E4=B9=A0=E7=9A=84=E7=9F=B3?=
 =?UTF-8?q?=E5=90=8C=E5=AD=A6?= <2936013465@qq.com>
Date: Sat, 16 Nov 2024 10:01:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=A4=A7=E5=B1=8F=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF1.5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/data/supervisionNotify.ts      |  20 +-
 src/components/datav/chart-bar-pro.vue | 274 +++++++++++++------------
 src/components/datav/tabs.vue          |   6 +-
 src/views/datav/SceneInsp.vue          |  62 ++++--
 4 files changed, 198 insertions(+), 164 deletions(-)

diff --git a/src/api/data/supervisionNotify.ts b/src/api/data/supervisionNotify.ts
index bffbf35..7372e83 100644
--- a/src/api/data/supervisionNotify.ts
+++ b/src/api/data/supervisionNotify.ts
@@ -1,17 +1,5 @@
 import request from "@/api/request";
-export function importCaseVerif(body) {
-    return request.post({
-        url: '/data/caseVerif/import',
-        body
-    });
-}
 
-export function listCaseVerif(query) {
-    return request.get({
-        url: '/data/caseVerif',
-        query
-    });
-}
 
 
 export function getAllSupervisionNotifyCount(times) {
@@ -19,3 +7,11 @@ export function getAllSupervisionNotifyCount(times) {
         url: `/datav/supervisonNotify?beginTime=${times[0]}&endTime=${times[1]}`
     });
 }
+
+
+
+export function getChangedRank(times, groupType) {
+    return request.get({
+        url: `/datav/supervisonNotify/rank?beginTime=${times[0]}&endTime=${times[1]}&groupType=${groupType}`
+    });
+}
\ No newline at end of file
diff --git a/src/components/datav/chart-bar-pro.vue b/src/components/datav/chart-bar-pro.vue
index d085a34..e7b77bf 100644
--- a/src/components/datav/chart-bar-pro.vue
+++ b/src/components/datav/chart-bar-pro.vue
@@ -1,180 +1,194 @@
 <template>
-    <div class="flex between v-center mb-10">
-        <span class="bar-title">{{ title }}</span>
-        <span class="bar-sub-title">{{ subTitle }}</span>
-    </div>
-    <div>
-        <div
-            class="flex v-center bar-item wrap between "
-            v-for="item in data"
-            :size="size"
-            :style="{ '--label-width': `${labelWidth}px` }"
-            :position="labelPosition"
-            style="height: 40px"
-        >
-            <span  style="margin-left: 18px">
+  <div class="flex between v-center mb-10">
+    <span class="bar-title">{{ title }}</span>
+    <span class="bar-sub-title">{{ subTitle }}</span>
+  </div>
+  <div>
+    <div
+        class="flex v-center bar-item wrap between "
+        v-for="item in data"
+        :size="size"
+        :style="{ '--label-width': `${labelWidth}px` }"
+        :position="labelPosition"
+        style="height: 40px"
+    >
+            <span style="margin-left: 18px">
                 {{ item.sort }}
             </span>
-            <div class="bar-item_content mr-8 "  :long="!item.denominator" >
-              <span>{{item.label}}</span>
-                <div
-                    class="bar-item_content-bar"
-                    :style="{
+      <div class="bar-item_content mr-8 " :long="!item.denominator">
+        <span>{{ item.label }}</span>
+        <div
+            class="bar-item_content-bar"
+            :style="{
                         width: `${(item.value / max) * 100}%`,
                         background: getColor((item.value / max) * 100),
                     }"
-                ></div>
-            </div>
-            <span >{{ item.value }}</span>
-            <span
-                class="bar-item_remark text-right ml-8"
-                v-if="item.denominator"
-                style="min-width: 40px"
-            >
+        ></div>
+      </div>
+      <span>{{ item.value }}</span>
+      <span
+          class="bar-item_remark text-right ml-8"
+          v-if="item.denominator"
+          style="min-width: 40px"
+      >
                 <span class="text-success">{{ item.numerator }}</span>
                 <span>/</span>
                 <span>{{ item.denominator }}</span>
             </span>
-        </div>
     </div>
+  </div>
 </template>
 <script setup>
-import { onMounted } from "vue";
+import {onMounted} from "vue";
 
 const props = defineProps({
-    title: {
-        type: String,
-        default: "",
-    },
-    subTitle: {
-        type: String,
-        default: "",
-    },
-    data: {
-        type: Array,
-        default: [],
-    },
-    size: {
-        type: String,
-        default: "",
-    },
-    unit: {
-        type: String,
-        default: "",
-    },
-    color: {
-        type: Object,
-        default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)",
-    },
-    labelWidth: {
-        type: Number,
-        default: 60,
-    },
-    labelPosition: {
-        type: String,
-        default: "left",
-    },
+  title: {
+    type: String,
+    default: "",
+  },
+  subTitle: {
+    type: String,
+    default: "",
+  },
+  data: {
+    type: Array,
+    default: [],
+  },
+  size: {
+    type: String,
+    default: "",
+  },
+  unit: {
+    type: String,
+    default: "",
+  },
+  color: {
+    type: Object,
+    default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)",
+  },
+  labelWidth: {
+    type: Number,
+    default: 60,
+  },
+  labelPosition: {
+    type: String,
+    default: "left",
+  },
 });
 
 const max = ref(100);
 watch(
     () => props.data,
     () => {
-        getMax();
+      getMax();
     }
 );
 
 function getMax() {
-    if (props.unit !== "%") {
-        max.value = Math.max(...props.data.map((item) => item.value));
-    }
+  if (props.unit !== "%") {
+    max.value = Math.max(...props.data.map((item) => item.value));
+  }
 }
 
-onMounted(() => {
-    getMax();
+onMounted  ( () => {
+   getMax();
+
 });
 
 function getColor(val) {
-    if (props.color instanceof String) {
-        return props.color;
-    }
-    if (props.color instanceof Array) {
-        const colors = [...props.color];
-        colors.sort((a, b) => b.percentage - a.percentage);
-        for (let i = 0; i < colors.length; i++) {
-            if (val > colors[0].percentage) {
-                return colors[0].color;
-            }
-        }
+  if (props.color instanceof String) {
+    return props.color;
+  }
+  if (props.color instanceof Array) {
+    const colors = [...props.color];
+    colors.sort((a, b) => b.percentage - a.percentage);
+    for (let i = 0; i < colors.length; i++) {
+      if (val > colors[0].percentage) {
+        return colors[0].color;
+      }
     }
-    return "linear-gradient(270deg, #63e700 0%, #19674c 100%)";
-    // if (val >= 0.7) {
-    //     return "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)";
-    // }
-    // return "linear-gradient( 270deg, #FB002D 0%, #822232 100%)";
+  }
+  return "linear-gradient(270deg, #63e700 0%, #19674c 100%)";
+  // if (val >= 0.7) {
+  //     return "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)";
+  // }
+  // return "linear-gradient( 270deg, #FB002D 0%, #822232 100%)";
 }
 </script>
 <style lang="scss" scoped>
 .bar-title {
-    font-size: 19px;
+  font-size: 19px;
 }
+
 .bar-sub-title {
-    color: #597ae9;
-    font-size: 14px;
+  color: #597ae9;
+  font-size: 14px;
 }
+
 .bar-item {
-    font-size: 17px;
-    &[size="large"] {
-        .bar-item_content {
-            .bar-item_content-bar {
-                height: 13px;
-            }
-        }
-    }
-    &[size="small"] {
-        font-size: 12px;
+  font-size: 17px;
+
+  &[size="large"] {
+    .bar-item_content {
+      .bar-item_content-bar {
+        height: 13px;
+      }
     }
+  }
+
+  &[size="small"] {
+    font-size: 12px;
+  }
+
+  .bar-item-label {
+    text-align: right;
+    width: var(--label-width);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &[position="left"] {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  &[position="top"] {
+    margin-bottom: 4px;
+
     .bar-item-label {
-        text-align: right;
-        width: var(--label-width);
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+      width: 100%;
+      text-align: left;
     }
-    &[position="left"] {
-        height: 32px;
-        line-height: 32px;
+
+    .bar-item_content {
+      width: calc(100% - 80px);
     }
-    &[position="top"] {
-        margin-bottom: 4px;
-        .bar-item-label {
-            width: 100%;
-            text-align: left;
-        }
-        .bar-item_content {
-            width: calc(100% - 80px);
-        }
+  }
+
+  .bar-item_content {
+    width: calc(100% - var(--label-width) - 16px - 30px);
+
+    &[long=false] {
+      width: calc(100% - var(--label-width) - 36px - 58px);
     }
-    .bar-item_content {
-        width: calc(100% - var(--label-width) - 16px - 30px);
-        &[long=false] {
-            width: calc(100% - var(--label-width) - 36px - 58px);
-        }
-        .bar-item_content-bar {
-            width: 0;
-            height: 9px;
-            background: linear-gradient(270deg, #63e700 0%, #19674c 100%);
-            transition: width 0.3s;
-        }
+
+    .bar-item_content-bar {
+      width: 0;
+      height: 9px;
+      background: linear-gradient(270deg, #63e700 0%, #19674c 100%);
+      transition: width 0.3s;
     }
-    .bar-item_remark {
-        font-size: 14px;
-        .text-success {
-            color: #09c700;
-        }
+  }
+
+  .bar-item_remark {
+    font-size: 14px;
+
+    .text-success {
+      color: #09c700;
     }
+  }
 }
 
 
-
 </style>
\ No newline at end of file
diff --git a/src/components/datav/tabs.vue b/src/components/datav/tabs.vue
index c2f64b8..d46367a 100644
--- a/src/components/datav/tabs.vue
+++ b/src/components/datav/tabs.vue
@@ -8,7 +8,7 @@
                 :key="item.props.name"
                 :active="item.props.name === activeTab"
                 @click="handleChangeActiveTab(item.props.name)"
-                
+
             >
                 {{ item.props.label }}
             </div>
@@ -86,10 +86,10 @@ function handleChangeActiveTab(name) {
     &[size=small] {
         gap: 12px;
         .tab-title-item {
-            
+
             font-size: 19px;
         }
-        
+
     }
 }
 .tab-title {
diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue
index 0ba0825..d9618a4 100644
--- a/src/views/datav/SceneInsp.vue
+++ b/src/views/datav/SceneInsp.vue
@@ -4,13 +4,14 @@
       <datav-header/>
       <main>
         <el-row :gutter="16">
+
           <el-col :span="6">
             <datav-card title="日常督察情况">
               <el-row class="mb-32">
                 <el-col :span="6">
                   <div class="descriptions_cell text-center">
                     <div class="descriptions_content">
-                      56
+                      {{rankOverview.proTotal}}
                     </div>
                     <div class="descriptions_label">
                       问题数
@@ -20,7 +21,7 @@
                 <el-col :span="6">
                   <div class="descriptions_cell text-center">
                     <div class="descriptions_content">
-                      0
+                      {{rankOverview.changing}}
                     </div>
                     <div class="descriptions_label">
                       整改中
@@ -30,7 +31,7 @@
                 <el-col :span="6">
                   <div class="descriptions_cell text-center">
                     <div class="descriptions_content">
-                      56
+                      {{ rankOverview.changed }}
                     </div>
                     <div class="descriptions_label">
                       已整改
@@ -40,7 +41,7 @@
                 <el-col :span="6">
                   <div class="descriptions_cell text-center">
                     <div class="descriptions_content">
-                      100%
+                      {{ rankOverview.correctionRate }}%
                     </div>
                     <div class="descriptions_label">
                       整改率
@@ -53,18 +54,17 @@
                   type="bottom-button"
                   v-model="activeTabLeft"
               >
-                <datav-tab-item label="分县市局" name="1">
+                <datav-tab-item label="分县市局" name="3">
                   <el-scrollbar height="350px">
                     <datav-chart-bar
                         :data="data1"
-                        size="large"
                         :color="colors"
                         title="整改率排名"
-                        sub-title="完成数/问题数"
+                        sub-title="已整改/问题数"
                     />
                   </el-scrollbar>
                 </datav-tab-item>
-                <datav-tab-item label="局属单位" name="2">
+                <datav-tab-item label="局属单位" name="4">
                   <el-scrollbar height="350px">
                     <datav-chart-bar
                         :data="jsdwBarList"
@@ -79,6 +79,7 @@
               </datav-tabs>
 
             </datav-card>
+
             <datav-card title="问题类型占比">
               <v-charts
                   style="height: 300px"
@@ -87,6 +88,7 @@
               />
             </datav-card>
           </el-col>
+
           <el-col :span="12">
             <datav-date-picker v-model="time"/>
             <div class="flex gap-42">
@@ -135,10 +137,10 @@
               />
             </datav-card>
           </el-col>
+
           <el-col :span="6">
             <datav-card>
-              <datav-tabs v-model="activeTabRight" size="small">
-
+<!--              <datav-tabs v-model="activeTabRight" size="small">
                 <datav-tab-item label="枪支管理" name="1">
                   <datav-tabs
                       v-model="activeMailTabRight"
@@ -305,7 +307,7 @@
                     </datav-tab-item>
                   </datav-tabs>
                 </datav-tab-item>
-              </datav-tabs>
+              </datav-tabs>-->
 
               <!--              <datav-chart-bar
                                 title="问题数排名"
@@ -350,17 +352,19 @@
               </el-scrollbar>
             </datav-card>
           </el-col>
+
         </el-row>
       </main>
     </div>
   </el-scrollbar>
 </template>
+
 <script setup>
 import vCharts from "vue-echarts";
 import changshaMap from "@/assets/data/changsha.json";
 import * as echarts from "echarts/core";
 import moment from "moment";
-import {getAllSupervisionNotifyCount} from "@/api/data/supervisionNotify.ts";
+import {getAllSupervisionNotifyCount, getChangedRank} from "@/api/data/supervisionNotify.ts";
 
 echarts.registerMap("changsha", changshaMap);
 const option = {
@@ -488,42 +492,42 @@ const data1 = ref([
   },
   {
     label: "芙蓉分局",
-    value: 100,
+    value: 80,
     unit: "%",
     numerator: 11,
     denominator: 11,
   },
   {
     label: "岳麓分局",
-    value: 100,
+    value: 80,
     unit: "%",
     numerator: 10,
     denominator: 10,
   },
   {
     label: "雨花分局",
-    value: 100,
+    value: 80,
     unit: "%",
     numerator: 9,
     denominator: 9,
   },
   {
     label: "望城分局",
-    value: 100,
+    value: 80,
     unit: "%",
     numerator: 4,
     denominator: 4,
   },
   {
     label: "浏阳市局",
-    value: 100,
+    value: 80,
     unit: "%",
     numerator: 3,
     denominator: 3,
   },
   {
     label: "长沙县局",
-    value: 100,
+    value: 80,
     unit: "%",
     numerator: 3,
     denominator: 3,
@@ -586,7 +590,7 @@ const option2 = {
 
 
 // region  初始化数据
-const activeTabLeft = ref("1");
+const activeTabLeft = ref("3");
 const overview = ref({
   supervisionNotifyTotal: 0,
   supervisionNotifyOrgTotal: 0,
@@ -595,6 +599,13 @@ const overview = ref({
   supervisionNotifyChangedTotal: 0,
   correctionRate: 0,
 });
+const rankOverview = ref({
+  proTotal: 0,
+  changing: 0,
+  changed: 0,
+  correctionRate: 0,
+});
+
 
 const time = ref([
   moment().startOf("year").format("YYYY-MM-DD"),
@@ -605,11 +616,23 @@ function getData() {
   getAllSupervisionNotifyCount(time.value).then((res) => {
     overview.value = res.overview;
   });
+  getChangedRank(time.value, 3).then((res) => {
+    rankOverview.value = res.rankOverview;
+  });
 }
 
 watch(time, () => {
   getData();
 });
+watch(activeTabLeft, () => {
+  alert(activeTabLeft.value)
+  getChangedRank(time.value, activeTabLeft.value).then((res) => {
+    rankOverview.value = res.rankOverview;
+  });
+});
+
+
+
 onMounted(() => {
   getData();
 });
@@ -632,6 +655,7 @@ const colors = [
 
 
 </script>
+
 <style lang="scss" scoped>
 @import "@/style/datav.scss";