From 5302ba92e50ba2a6b5f433f3014e91945f12bc3c 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 16:33:29 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9D=A3=E5=AF=9F=E6=83=85=E5=86=B5=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F11/16/16=EF=BC=9A33?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/datav/chart-bar-pro.vue |   1 +
 src/components/datav/chart-bar.vue     | 258 +++++++++++++------------
 src/views/datav/Gobal.vue              |  21 +-
 src/views/datav/SceneInsp.vue          |   6 +-
 4 files changed, 153 insertions(+), 133 deletions(-)

diff --git a/src/components/datav/chart-bar-pro.vue b/src/components/datav/chart-bar-pro.vue
index e7b77bf..f50e6b7 100644
--- a/src/components/datav/chart-bar-pro.vue
+++ b/src/components/datav/chart-bar-pro.vue
@@ -132,6 +132,7 @@ function getColor(val) {
     .bar-item_content {
       .bar-item_content-bar {
         height: 13px;
+
       }
     }
   }
diff --git a/src/components/datav/chart-bar.vue b/src/components/datav/chart-bar.vue
index 6387520..0a9786b 100644
--- a/src/components/datav/chart-bar.vue
+++ b/src/components/datav/chart-bar.vue
@@ -1,172 +1,190 @@
 <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"
-        >
+  <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"
+    >
             <span class="bar-item-label mr-8">
                 {{ item.label }}
             </span>
-            <div class="bar-item_content mr-8" :long="!item.denominator">
-                <div
-                    class="bar-item_content-bar"
-                    :style="{
+      <div class="bar-item_content " :long="!item.denominator">
+        <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: 80,
-    },
-    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: 80,
+  },
+  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();
+  getMax();
 });
 
 function getColor(val) {
-    if (props.color instanceof String) {
-        return props.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[i].percentage) {
+        return colors[i].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[i].percentage) {
-                return colors[i].color;
-            }
-        }
-    }
-    return "linear-gradient(270deg, #63e700 0%, #19674c 100%)";
+  }
+  return "linear-gradient(270deg, #63e700 0%, #19674c 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;
-            }
-        }
+  font-size: 17px;
+
+  &[size="large"] {
+    .bar-item_content {
+      .bar-item_content-bar {
+        height: 13px;
+      }
     }
-    &[size="small"] {
-        font-size: 12px;
+  }
+
+  &[size="small"] {
+    font-size: 12px;
+    .bar-item_content {
+      width: calc(100% - 180px);
     }
+
+  }
+
+  .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 - 110px);
     }
-    .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/views/datav/Gobal.vue b/src/views/datav/Gobal.vue
index ee85a65..9ef7161 100644
--- a/src/views/datav/Gobal.vue
+++ b/src/views/datav/Gobal.vue
@@ -47,32 +47,32 @@
               <datav-statistic
                   :value="overview.totalPro"
                   title="问题总数"
-                  style="width: 16.66%"
+                  style="width: 13.66%; margin-left: 20px"
               />
               <datav-statistic
                   :value="overview.supervisionPro"
                   title="督察问题"
-                  style="width: 16.66%"
+                  style="width: 13.66%; margin-left: 30px"
               />
               <datav-statistic
                   :value="overview.caseVerificationPro"
                   title="案件核查问题"
-                  style="width: 16.66%"
+                  style="width: 13.66%; margin-left: 30px"
               />
               <datav-statistic
                   :value="overview.complaintPro"
                   title="信访投诉问题"
-                  style="width: 16.66%;"
+                  style="width: 13.66%; margin-left: 30px"
               />
               <datav-statistic
                   :value="overview.talkPro"
                   title="警务评议问题"
-                  style="width: 16.66%"
+                  style="width: 13.66%; margin-left: 30px"
               />
               <datav-statistic
                   :value="overview.auditPro"
                   title="审计监督问题"
-                  style="width: 16.66%"
+                  style="width: 13.66%; margin-left: 10px"
               />
             </div>
             <v-charts
@@ -360,6 +360,7 @@ const zfbaPieOption = computed(() => {
           color: "#fff",
         },
         data: ywzblist.value,
+
       },
     ],
   };
@@ -378,8 +379,7 @@ const wtlxPieOption = computed(() => {
           color: "#fff",
         },
         data: wtlxlist.value,
-        width: 350,
-        height: 300
+
       },
     ],
   };
@@ -439,7 +439,6 @@ const colors = [
 ];
 
 
-
 // endregion
 
 
@@ -502,9 +501,9 @@ const colors = [
   // 数字的span
   .tooltip-ul span {
     float: right;
-    width: 30px;
+    width: 50px;
     text-align: right;
-    margin-right: 15px;
+    margin-right: 35px;
     color: #fff;
     font-size: 13px;
   }
diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue
index a3b9699..b56410a 100644
--- a/src/views/datav/SceneInsp.vue
+++ b/src/views/datav/SceneInsp.vue
@@ -60,6 +60,7 @@
                     <datav-chart-bar
                         :data="data1"
                         :color="colors"
+                        :size="small"
                         title="整改率排名"
                         sub-title="已整改/问题数"
                     />
@@ -484,7 +485,7 @@ const option1 = ref({
 });
 
 const data1 = ref([
-  {
+  /*{
     label: "开福分局",
     value: 90,
     unit: "%",
@@ -532,7 +533,7 @@ const data1 = ref([
     unit: "%",
     numerator: 3,
     denominator: 3,
-  },
+  },*/
 ]);
 
 const data2 = [
@@ -619,6 +620,7 @@ function getData() {
   });
   getChangedRank(time.value, 3).then((res) => {
     rankOverview.value = res.rankOverview;
+    data1.value = res.changedRankList;
   });
 }