fix: 完善个问题人画像、大屏

src/components/datav/card.vue

@@ -23,7 +23,7 @@ defineProps({
 <style lang="scss" scoped>
 .datav-card {
     padding: 12px;
-    margin-top: 20px;
+    margin-bottom: 20px;
     position: relative;
     z-index: 1;
     &::before {

src/components/datav/chart-bar.vue

@@ -10,7 +10,9 @@
             :size="size"
             :style="{'--label-width': `${labelWidth}px`}"
         >
-            <span class="bar-item-label mr-10">{{ item.label }}</span>
+            <span class="bar-item-label mr-10">
+                {{ item.label }}
+            </span>
             <div class="bar-item_content mr-16" >
                 <div
                     class="bar-item_content-bar"
@@ -70,8 +72,9 @@ const props = defineProps({
 const max = ref(100);
 watch(
     () => props.data,
-    (arr) => {
+    () => {
         getMax()
+        
     }
 );
 
@@ -131,6 +134,9 @@ function getColor(val) {
     .bar-item-label {
         text-align: right;
         width: var(--label-width);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
     .bar-item_content {
         width: calc(100% - var(--label-width) - 80px);

src/components/datav/tabs.vue

@@ -41,8 +41,10 @@ const props = defineProps({
         default: "",
     },
 });
+const slots = useSlots().default();
+
 const emit = defineEmits(["update:modelValue"]);
-const activeTab = ref(props.modelValue);
+const activeTab = ref(props.modelValue || slots[0].props.name);
 watch(() => props.modelValue, () => {
     activeTab.value = props.modelValue
 })
@@ -52,7 +54,7 @@ watch(activeTab, (val) => {
 
 provide("activeTab", activeTab);
 
-const slots = useSlots().default();
+
 
 function handleChangeActiveTab(name) {
     activeTab.value = name;

src/views/datav/CaseVerif.vue

@@ -7,21 +7,26 @@
                     <el-col :span="6">
                         <datav-card title="分县市局排名" subTitle="案件数">
                             <datav-tabs
-                                v-model="activeTab"
                                 type="bottom-button"
                             >
                                 <datav-tab-item label="分县市局" name="1">
+                                    <el-scrollbar height="350px">
                                         <datav-chart-bar
                                             :data="fxsjBarList"
                                             size="large"
+                                            :color="colors"
                                         />
+                                    </el-scrollbar>
                                 </datav-tab-item>
                                 <datav-tab-item label="局属单位" name="2">
+                                    <el-scrollbar height="350px">
                                         <datav-chart-bar
                                             :data="jsdwBarList"
                                             :max="11"
                                             size="large"
+                                            :color="colors"
                                         />
+                                    </el-scrollbar>
                                 </datav-tab-item>
                             </datav-tabs>
                         </datav-card>
@@ -385,7 +390,21 @@ const option4 = {
     ],
 };
 
-const activeTab = ref("1");
+
+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>

src/views/sensitivePerception/DepartNegative.vue

@@ -158,6 +158,7 @@
                                     <span
                                         v-for="item in departInfo.deputyRole"
                                         :key="item"
+                                        class="mr-10"
                                         >{{ item }}</span
                                     >
                                 </span>