From b408af7843193b1138a2c7c80e4eb21ca05246d0 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: Thu, 7 Nov 2024 17:24:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=A1=E8=AE=BF=E5=A4=A7=E5=B1=8F=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF2.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/data/basicScreen.ts            |  18 +
 src/api/data/supervisionNotify.ts      |  21 +
 src/components/datav/chart-bar-new.vue | 194 ++++++
 src/components/datav/statistic.vue     | 110 ++--
 src/views/data/Ajhc.vue                |  12 +-
 src/views/data/Mail12337.vue           |  32 +-
 src/views/datav/Gobal.vue              | 840 +++++++++++++------------
 src/views/datav/SceneInsp.vue          | 132 +++-
 8 files changed, 849 insertions(+), 510 deletions(-)
 create mode 100644 src/api/data/basicScreen.ts
 create mode 100644 src/api/data/supervisionNotify.ts
 create mode 100644 src/components/datav/chart-bar-new.vue

diff --git a/src/api/data/basicScreen.ts b/src/api/data/basicScreen.ts
new file mode 100644
index 0000000..c169a71
--- /dev/null
+++ b/src/api/data/basicScreen.ts
@@ -0,0 +1,18 @@
+import request from "@/api/request";
+
+/**
+ * 信息大屏api
+ * @author: sh
+ * @date: 2024-011-7
+ */
+
+export function getAllGobalCount(times) {
+    return request.get({
+        url: `/datav/dataGobalScreen?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
+
+
+
+
+
diff --git a/src/api/data/supervisionNotify.ts b/src/api/data/supervisionNotify.ts
new file mode 100644
index 0000000..bffbf35
--- /dev/null
+++ b/src/api/data/supervisionNotify.ts
@@ -0,0 +1,21 @@
+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) {
+    return request.get({
+        url: `/datav/supervisonNotify?beginTime=${times[0]}&endTime=${times[1]}`
+    });
+}
diff --git a/src/components/datav/chart-bar-new.vue b/src/components/datav/chart-bar-new.vue
new file mode 100644
index 0000000..9dea2ed
--- /dev/null
+++ b/src/components/datav/chart-bar-new.vue
@@ -0,0 +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 between wrap"
+        v-for="item in data"
+        :size="size"
+        :style="{ '--label-width': `${labelWidth}px` }"
+        :position="labelPosition"
+    >
+      <!-- 条目标签 -->
+      <span class="bar-item-label mr-10">
+        {{ item.label }}
+      </span>
+      <!-- 条目内容 -->
+      <div class="bar-item_content mr-16">
+        <div
+            class="bar-item_content-bar"
+            :style="{
+            width: `${(item.value / max) * 100}%`,
+            background: getColor((item.value / max) * 100),
+          }"
+        ></div>
+      </div>
+      <!-- 条目值 -->
+      <span class="mr-16">{{ item.value }}</span>
+      <!-- 条目备注 -->
+      <span
+          class="bar-item_remark text-right"
+          v-if="item.denominator"
+          style="min-width: 40px"
+      >
+        <span class="text-success">{{ item.numerator }}</span>
+        <span>/</span>
+        <span>{{ item.denominator }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref, watch} 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, String],
+    default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)",
+  },
+  labelWidth: {
+    type: Number,
+    default: 80,
+  },
+  labelPosition: {
+    type: String,
+    default: "left",
+  },
+});
+
+const max = ref(100);
+
+// 监听 data 变化，并更新 max 值
+watch(
+    () => props.data,
+    () => {
+      getMax();
+    }
+);
+
+// 获取最大值
+function getMax() {
+  if (props.unit !== "%") {
+    max.value = Math.max(...props.data.map((item) => item.value));
+  }
+}
+
+// 组件挂载时计算最大值
+onMounted(() => {
+  getMax();
+});
+
+// 根据值获取对应的颜色
+function getColor(val) {
+  if (typeof props.color === "string") {
+    return props.color;
+  }
+  if (Array.isArray(props.color)) {
+    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%)";
+}
+</script>
+
+<style lang="scss" scoped>
+.bar-title {
+  font-size: 19px;
+}
+
+.bar-sub-title {
+  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;
+  }
+
+  .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 {
+      width: 100%;
+      text-align: left;
+    }
+
+    .bar-item_content {
+      width: calc(100% - 80px);
+    }
+  }
+
+  .bar-item_content {
+    width: calc(100% - var(--label-width) - 80px);
+
+    .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;
+    }
+  }
+}
+</style>
diff --git a/src/components/datav/statistic.vue b/src/components/datav/statistic.vue
index 574bf46..eeace93 100644
--- a/src/components/datav/statistic.vue
+++ b/src/components/datav/statistic.vue
@@ -1,77 +1,79 @@
 <template>
-    <div class="statistic">
-        <div class="statistic-number">
-            {{ isDecimal ? parseFloat(outputValue.toFixed(2)) : parseInt(outputValue) }}{{ valueUnit }}
-        </div>
-        <div class="statistic-title">{{ title }}</div>
+  <div class="statistic">
+    <div class="statistic-number">
+      {{ isDecimal ? parseFloat(outputValue.toFixed(2)) : parseInt(outputValue) }}{{ valueUnit }}
     </div>
+    <div class="statistic-title">{{ title }}</div>
+  </div>
 </template>
 <script setup>
-import { useTransition } from "@vueuse/core";
+import {useTransition} from "@vueuse/core";
 
 const props = defineProps({
-    title: {
-        type: String
-    },
-    value: {
-        type: Number,
-        defalut: 0,
-    },
-    valueUnit: {
-        type: String,
-    },
-    // 是否是小数
-    isDecimal: {
-        type: String,
-        defalut: false
-    }
+  title: {
+    type: String
+  },
+  value: {
+    type: Number,
+    default: 0,
+  },
+  valueUnit: {
+    type: String,
+  },
+  // 是否是小数
+  isDecimal: {
+    type: String,
+    default: false
+  }
 });
-const value = ref(0);
+const value = ref(props.value);
 watch(() => props.value, (val) => {
-    value.value = val;
+  value.value = val;
 })
 const outputValue = useTransition(value, {
-    duration: 1500,
+  duration: 1500,
 });
 </script>
 <style lang="scss" scoped>
 .statistic {
-    text-align: center;
+  text-align: center;
 
-    .statistic-number {
-        font-size: 39px;
-        font-weight: 700;
-        height: 64px;
-        line-height: 64px;
-        background: linear-gradient(
+  .statistic-number {
+    font-size: 39px;
+    font-weight: 700;
+    height: 64px;
+    line-height: 64px;
+    background: linear-gradient(
             270deg,
             rgba(3, 11, 57, 0) 0%,
             #00117d 49%,
             rgba(3, 11, 57, 0) 100%
-        );
-        margin-bottom: 14px;
-        &::before,
-        &::after {
-            display: block;
-            content: "";
-            height: 4px;
-            width: 85%;
-            margin: auto;
-            background: linear-gradient(
-                270deg,
-                rgba(1, 7, 94, 0) 0%,
-                #213ffb 49%,
-                rgba(1, 7, 93, 0) 100%
-            );
-        }
-    }
-    .statistic-title {
-        font-size: 27px;
-        white-space: break-spaces;
-    }
+    );
+    margin-bottom: 14px;
 
-    .statistic-footer {
-        font-size: 27px;
+    &::before,
+    &::after {
+      display: block;
+      content: "";
+      height: 4px;
+      width: 85%;
+      margin: auto;
+      background: linear-gradient(
+              270deg,
+              rgba(1, 7, 94, 0) 0%,
+              #213ffb 49%,
+              rgba(1, 7, 93, 0) 100%
+      );
     }
+  }
+
+  .statistic-title {
+    font-size: 27px;
+    white-space: break-spaces;
+  }
+
+  .statistic-footer {
+    font-size: 27px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/data/Ajhc.vue b/src/views/data/Ajhc.vue
index 91a0077..c947e97 100644
--- a/src/views/data/Ajhc.vue
+++ b/src/views/data/Ajhc.vue
@@ -46,8 +46,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="分发状态">
-              <el-select v-model="query.distributionState">
+            <el-form-item label="分发状态" >
+              <el-select v-model="query.distributionState" clearable>
                 <el-option
                     v-for="item in dict.distributionState"
                     :key="item.id"
@@ -61,9 +61,6 @@
           <el-col :span="6">
             <el-form-item label="是否属实">
               <el-select
-                  size="small"
-                  style="width: 146px"
-                  placeholder="核查情况"
                   clearable
                   v-model="query.checkStatus"
               >
@@ -139,12 +136,12 @@
         />
         <el-table-column
             label="投诉人电话"
-            prop="contactPhone"
+            prop="responderPhone"
             width="120"
         />
         <el-table-column label="业务类别" prop="businessTypeName"/>
         <el-table-column label="涉嫌问题" prop="involveProblem"/>
-        <el-table-column label="涉及警种" prop="policeTypeName"/>
+<!--        <el-table-column label="涉及警种" prop="policeTypeName"/>-->
         <el-table-column label="涉及单位" prop="thirdDepartName"/>
         <el-table-column
             label="具体内容"
@@ -391,6 +388,7 @@ const dict = catchStore.getDicts([
   "distributionState",
   "timeLimit",
   "approvalFlow",
+  "inspectCase",
 ]);
 
 const query = ref({
diff --git a/src/views/data/Mail12337.vue b/src/views/data/Mail12337.vue
index 5dff186..3934217 100644
--- a/src/views/data/Mail12337.vue
+++ b/src/views/data/Mail12337.vue
@@ -46,6 +46,25 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="是否属实">
+              <el-select
+                  clearable
+                  v-model="query.checkStatus"
+              >
+                <el-option
+                    v-for="item in dict.inspectCase"
+                    :key="item.id"
+                    :label="item.dictLabel"
+                    :value="item.dictValue"
+                />
+
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
       </el-form>
       <div class="mb-25 flex between">
         <div>
@@ -112,6 +131,14 @@
             prop="wjwfProject"
             show-overflow-tooltip
         />
+        <el-table-column label="是否属实" prop="isReal">
+          <template v-slot="scope">
+            <span v-if="scope.row.isReal === 1">属实</span>
+            <span v-else-if="scope.row.isReal === 2">部分属实</span>
+            <span v-else-if="scope.row.isReal === 3">不属实</span>
+            <span v-else>未知状态</span>
+          </template>
+        </el-table-column>
         <el-table-column label="状态">
           <template #default="{ row }">
             <el-tag>{{
@@ -210,13 +237,15 @@ const dict = catchStore.getDicts([
   "approvalFlow",
   "distributionFlow",
   "distributionState",
+  "inspectCase",
+
 ]);
 
 const query = ref({
   size: 10,
   current: 1,
   responderKey: "name",
-  problemSourcesCode: ProblemSources.GABXF,
+  problemSourcesCode: ProblemSources.XF12337,
 });
 
 const list = ref([]);
@@ -238,6 +267,7 @@ function reset() {
   };
   getList();
 }
+
 getList();
 
 const show = ref(false);
diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue
index d7e4af5..ea4e52a 100644
--- a/src/views/datav/Gobal.vue
+++ b/src/views/datav/Gobal.vue
@@ -1,445 +1,455 @@
 <template>
-    <el-scrollbar height="100vh">
-        <div class="wrapper">
-            <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">
-                                            4323
-                                        </div>
-                                        <div class="descriptions_label">
-                                            问题数
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            4323
-                                        </div>
-                                        <div class="descriptions_label">
-                                            整改中
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            2356
-                                        </div>
-                                        <div class="descriptions_label">
-                                            已整改
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            91%
-                                        </div>
-                                        <div class="descriptions_label">
-                                            整改率
-                                        </div>
-                                    </div>
-                                </el-col>
-                            </el-row>
-                            <datav-chart-bar
-                                title="整改率排名"
-                                sub-title="完成数/问题数"
-                                :data="data1"
-                            />
-                            <div class="flex tab-title flex center mt-16">
-                                <div class="tab-title-item active">
-                                    分县市局
-                                </div>
-                                <div class="tab-title-item">局属单位</div>
-                            </div>
-                        </datav-card>
-                        <datav-card title="警务评议">
-                            <el-row class="mb-32">
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            4323
-                                        </div>
-                                        <div class="descriptions_label">
-                                            样本总数
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            4323
-                                        </div>
-                                        <div class="descriptions_label">
-                                            满意/共本满意数
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            2356
-                                        </div>
-                                        <div class="descriptions_label">
-                                            不满意数
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            91%
-                                        </div>
-                                        <div class="descriptions_label">
-                                            满意率
-                                        </div>
-                                    </div>
-                                </el-col>
-                            </el-row>
-                            <datav-chart-bar
-                                title="满意率排名"
-                                sub-title="满意样本数/样本总数"
-                                :data="data1"
-                            />
-                            <div class="flex tab-title flex center mt-16">
-                                <div class="tab-title-item active">
-                                    分县市局
-                                </div>
-                                <div class="tab-title-item">局属单位</div>
-                            </div>
-                        </datav-card>
-                    </el-col>
-                    <el-col :span="12">
-                        <div class="datav-col">
-                            <label for="">统计周期：</label>
-                            <span>2024年01月01日 - 2024年08月30日</span>
-                        </div>
-                        <div class="flex gap-42">
-                            <datav-statistic
-                                :value="8683"
-                                title="问题总数"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="4432"
-                                title="处理中"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="801"
-                                title="涉及单位"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="7001"
-                                title="涉及人员"
-                                style="width: 20%"
-                            />
-                            <datav-statistic
-                                :value="91"
-                                value-unit="%"
-                                title="办结率"
-                                style="width: 20%"
-                            />
-                        </div>
-                        <div @click="go">
-                            <v-charts
-                                style="height: 450px"
-                                :option="option"
-                                autoresize
-                            />
-                        </div>
-                        <datav-card title="问题趋势">
-                            <v-charts
-                                style="height: 300px"
-                                :option="option1"
-                                autoresize
-                            />
-                        </datav-card>
-                    </el-col>
-                    <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">
-                                            4323
-                                        </div>
-                                        <div class="descriptions_label">
-                                            信件总数
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            4323
-                                        </div>
-                                        <div class="descriptions_label">
-                                            处理中
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            2356
-                                        </div>
-                                        <div class="descriptions_label">
-                                            办结数
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="6">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            96%
-                                        </div>
-                                        <div class="descriptions_label">
-                                            满意率
-                                        </div>
-                                    </div>
-                                </el-col>
-                            </el-row>
-                            <datav-chart-bar
-                                title="满意率排名"
-                                sub-title="满意样本数/样本总数"
-                                :data="data1"
-                            />
-                            <div class="flex tab-title flex center mt-16">
-                                <div class="tab-title-item active">
-                                    分县市局
-                                </div>
-                                <div class="tab-title-item">局属单位</div>
-                            </div>
-                        </datav-card>
-                        <datav-card title="案件核查">
-                            <el-row class="mb-32">
-                                <el-col :span="8">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            4323
-                                        </div>
-                                        <div class="descriptions_label">
-                                            问题数
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="8">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            4323
-                                        </div>
-                                        <div class="descriptions_label">
-                                            问题数
-                                        </div>
-                                    </div>
-                                </el-col>
-                                <el-col :span="8">
-                                    <div class="descriptions_cell text-center">
-                                        <div class="descriptions_content">
-                                            91%
-                                        </div>
-                                        <div class="descriptions_label">
-                                            问题数
-                                        </div>
-                                    </div>
-                                </el-col>
-                            </el-row>
-                            <datav-chart-bar
-                                title="满意率排名"
-                                sub-title="满意样本数/样本总数"
-                                :data="data1"
-                            />
-                            <div class="flex tab-title flex center mt-16">
-                                <div class="tab-title-item active">
-                                    分县市局
-                                </div>
-                                <div class="tab-title-item">局属单位</div>
-                            </div>
-                        </datav-card>
-                    </el-col>
-                </el-row>
-            </main>
-        </div>
-    </el-scrollbar>
+  <el-scrollbar height="100vh">
+    <div class="wrapper">
+      <datav-header/>
+      <main>
+        <el-row :gutter="16">
+          <el-col :span="6">
+            <datav-card title="机构问题排名" sub-title="问题数">
+
+              <datav-tabs
+                  v-model="activeOrgTab"
+                  type="bottom-button"
+              >
+                <datav-tab-item label="分县市局" name="1">
+                  <el-scrollbar height="300px">
+                    <datav-chart-bar
+                        :data="data1"
+                        size="large"
+                        :max="11"
+                        :color="colors"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+                <datav-tab-item label="局属单位" name="2">
+                  <el-scrollbar height="300px">
+                    <datav-chart-bar
+                        :data="data1"
+                        :max="11"
+                        size="large"
+                        :color="colors"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+              </datav-tabs>
+            </datav-card>
+            <datav-card title="警务评议">
+              <el-row class="mb-32">
+                <el-col :span="6">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      4323
+                    </div>
+                    <div class="descriptions_label">
+                      样本总数
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      4323
+                    </div>
+                    <div class="descriptions_label">
+                      满意/共本满意数
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      2356
+                    </div>
+                    <div class="descriptions_label">
+                      不满意数
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      91%
+                    </div>
+                    <div class="descriptions_label">
+                      满意率
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+              <datav-chart-bar
+                  title="满意率排名"
+                  sub-title="满意样本数/样本总数"
+                  :data="data1"
+              />
+              <div class="flex tab-title flex center mt-16">
+                <div class="tab-title-item active">
+                  分县市局
+                </div>
+                <div class="tab-title-item">局属单位</div>
+              </div>
+            </datav-card>
+          </el-col>
+          <el-col :span="12">
+            <datav-date-picker v-model="time"/>
+            <div class="flex gap-42">
+              <datav-statistic
+                  :value="overview.totalPro"
+                  title="问题总数"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.supervisionPro"
+                  title="督察问题"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.caseVerificationPro"
+                  title="案件核查问题"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.mailComplaintPro"
+                  title="信访投诉问题"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.policeValuationPro"
+                  title="警务评议问题"
+                  style="width: 16.66%"
+              />
+              <datav-statistic
+                  :value="overview.reviewPro"
+                  title="审计监督问题"
+                  style="width: 16.66%"
+              />
+            </div>
+            <!--                        <div @click="go">-->
+            <!--                            <v-charts-->
+            <!--                                style="height: 450px"-->
+            <!--                                :option="option"-->
+            <!--                                autoresize-->
+            <!--                            />-->
+            <!--                        </div>-->
+            <datav-card title="问题趋势">
+              <v-charts
+                  style="height: 300px"
+                  :option="option1"
+                  autoresize
+              />
+            </datav-card>
+          </el-col>
+          <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">
+                      4323
+                    </div>
+                    <div class="descriptions_label">
+                      信件总数
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      4323
+                    </div>
+                    <div class="descriptions_label">
+                      处理中
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      2356
+                    </div>
+                    <div class="descriptions_label">
+                      办结数
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      96%
+                    </div>
+                    <div class="descriptions_label">
+                      满意率
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+              <datav-chart-bar
+                  title="满意率排名"
+                  sub-title="满意样本数/样本总数"
+                  :data="data1"
+              />
+              <div class="flex tab-title flex center mt-16">
+                <div class="tab-title-item active">
+                  分县市局
+                </div>
+                <div class="tab-title-item">局属单位</div>
+              </div>
+            </datav-card>
+            <datav-card title="案件核查">
+              <el-row class="mb-32">
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      4323
+                    </div>
+                    <div class="descriptions_label">
+                      问题数
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      4323
+                    </div>
+                    <div class="descriptions_label">
+                      问题数
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="8">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      91%
+                    </div>
+                    <div class="descriptions_label">
+                      问题数
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+              <datav-chart-bar
+                  title="满意率排名"
+                  sub-title="满意样本数/样本总数"
+                  :data="data1"
+              />
+              <div class="flex tab-title flex center mt-16">
+                <div class="tab-title-item active">
+                  分县市局
+                </div>
+                <div class="tab-title-item">局属单位</div>
+              </div>
+            </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/moment";
+import {getCaseVerifData} from "@/api/datav";
+import {getAllGobalCount} from "@/api/data/basicScreen.ts";
 
 const router = useRouter();
 
 echarts.registerMap("changsha", changshaMap);
 const option = {
-    geo: {
-        // 是上面注册时的名字哦，registerMap（'名字保持一致'）
-        map: "changsha",
-    },
+  geo: {
+    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
+    map: "changsha",
+  },
 
-    visualMap: {
-        type: "piecewise",
-        bottom: 10,
-        pieces: [
-            { gte: 85, lte: 100, label: "问题数低于500" },
-            { gte: 65, lte: 85, label: "问题数低于1000" },
-            { gte: 0, lte: 65, label: "问题数低于1000" },
-        ],
-        right: 10, // 右边距
-        realtime: false,
-        orient: "horizontal", // 水平显示
-        textStyle: {
-            color: "#fff", // 文字颜色
-        },
-        calculable: true,
-        inRange: {
-            color: ["#D34343", "#F6A149", "#4987F6"],
-        },
+  visualMap: {
+    type: "piecewise",
+    bottom: 10,
+    pieces: [
+      {gte: 85, lte: 100, label: "问题数低于500"},
+      {gte: 65, lte: 85, label: "问题数低于1000"},
+      {gte: 0, lte: 65, label: "问题数低于1000"},
+    ],
+    right: 10, // 右边距
+    realtime: false,
+    orient: "horizontal", // 水平显示
+    textStyle: {
+      color: "#fff", // 文字颜色
+    },
+    calculable: true,
+    inRange: {
+      color: ["#D34343", "#F6A149", "#4987F6"],
     },
-    series: [
-        {
-            name: "长沙",
-            type: "map",
-            map: "changsha",
-            hoverAnimation: true,
+  },
+  series: [
+    {
+      name: "长沙",
+      type: "map",
+      map: "changsha",
+      hoverAnimation: true,
 
-            label: {
-                show: true,
-                color: "white",
-            },
-            itemStyle: {
-                normal: {
-                    areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
-                },
-            },
+      label: {
+        show: true,
+        color: "white",
+      },
+      itemStyle: {
+        normal: {
+          areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
         },
-    ],
+      },
+    },
+  ],
 };
 
 const option1 = ref({
-    xAxis: {
-        type: "category",
-        boundaryGap: false,
-        data: [
-            "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",
-        ],
+  xAxis: {
+    type: "category",
+    boundaryGap: false,
+    data: [
+      "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",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
     },
-    yAxis: {
-        type: "value",
-        splitLine: {
-            show: true,
-            lineStyle: {
-                color: "#193775",
-            },
-        },
+  },
+  series: [
+    {
+      type: "line",
+      smooth: true,
+      label: {
+        show: false,
+      },
+      lineStyle: {
+        color: "#28E6FF",
+        width: 4,
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgba(40,230,255,0.47)", // 渐变起始颜色
+          },
+          {
+            offset: 1,
+            color: "rgba(40,230,255,0)", // 渐变结束颜色
+          },
+        ]),
+      },
+      data: [
+        2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
+        3000, 3100, 3100, 3100,
+      ],
     },
-    series: [
-        {
-            type: "line",
-            smooth: true,
-            label: {
-                show: false,
-            },
-            lineStyle: {
-                color: "#28E6FF",
-                width: 4,
-            },
-            areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: "rgba(40,230,255,0.47)", // 渐变起始颜色
-                    },
-                    {
-                        offset: 1,
-                        color: "rgba(40,230,255,0)", // 渐变结束颜色
-                    },
-                ]),
-            },
-            data: [
-                2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
-                3000, 3100, 3100, 3100,
-            ],
-        },
-    ],
+  ],
 });
 
 const data1 = [
-    {
-        label: "开福分局",
-        value: 97,
-        unit: "%",
-        numerator: 97,
-        denominator: 100,
-    },
-    {
-        label: "芙蓉分局",
-        value: 90,
-        unit: "%",
-        numerator: 90,
-        denominator: 100,
-    },
-    {
-        label: "岳麓分局",
-        value: 85,
-        unit: "%",
-        numerator: 85,
-        denominator: 100,
-    },
-    {
-        label: "雨花分局",
-        value: 80,
-        unit: "%",
-        numerator: 80,
-        denominator: 100,
-    },
-    {
-        label: "望城分局",
-        value: 71,
-        unit: "%",
-        numerator: 71,
-        denominator: 100,
-    },
-    {
-        label: "浏阳市局",
-        value: 66,
-        unit: "%",
-        numerator: 66,
-        denominator: 100,
-    },
-    {
-        label: "长沙县局",
-        value: 62,
-        unit: "%",
-        numerator: 62,
-        denominator: 100,
-    },
+  {
+    label: "开福分局",
+    value: 97,
+  },
+  {
+    label: "芙蓉分局",
+    value: 90,
+  },
+  {
+    label: "岳麓分局",
+    value: 85,
+  },
+  {
+    label: "雨花分局",
+    value: 80,
+  },
+  {
+    label: "望城分局",
+    value: 71,
+  },
+  {
+    label: "浏阳市局",
+    value: 66,
+  },
+  {
+    label: "长沙县局",
+    value: 62,
+  },
 ];
 
 function go() {
-    router.push("/datav/sub1")
+  router.push("/datav/sub1")
 }
+
+// region  机构问题排名
+const activeOrgTab = ref("1");
+
+// endregion
+
+// region  初始化数据
+const overview = ref({
+  totalPro: 0,
+  supervisionPro: 0,
+  caseVerificationPro: 0,
+  mailComplaintPro: 0,
+  policeValuationPro: 0,
+  reviewPro: 0,
+});
+
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+
+function getData() {
+  getAllGobalCount(time.value).then((res) => {
+    console.log(res);
+    console.log(res.overview)
+    overview.value = res.overview;
+  });
+}
+
+watch(time, () => {
+  getData();
+});
+onMounted(() => {
+  getData();
+});
+
+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,
+  },
+];
+
+// endregion
+
+
 </script>
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
diff --git a/src/views/datav/SceneInsp.vue b/src/views/datav/SceneInsp.vue
index d65edf0..7a40ff4 100644
--- a/src/views/datav/SceneInsp.vue
+++ b/src/views/datav/SceneInsp.vue
@@ -5,7 +5,7 @@
       <main>
         <el-row :gutter="16">
           <el-col :span="6">
-            <datav-card title="执勤值守情况">
+            <datav-card title="日常督察情况">
               <el-row class="mb-32">
                 <el-col :span="6">
                   <div class="descriptions_cell text-center">
@@ -48,17 +48,36 @@
                   </div>
                 </el-col>
               </el-row>
-              <datav-chart-bar
-                  title="整改率排名"
-                  sub-title="完成数/问题数"
-                  :data="data1"
-              />
-              <div class="flex tab-title flex center mt-16">
-                <div class="tab-title-item active">
-                  分县市局
-                </div>
-                <div class="tab-title-item">局属单位</div>
-              </div>
+
+              <datav-tabs
+                  type="bottom-button"
+                  v-model="activeTabLeft"
+              >
+                <datav-tab-item label="分县市局" name="1">
+                  <el-scrollbar height="350px">
+                    <datav-chart-bar-new
+                        :data="data1"
+                        size="large"
+                        :color="colors"
+                        title="整改率排名"
+                        sub-title="完成数/问题数"
+                    />
+                  </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"
+                        title="整改率排名"
+                        sub-title="完成数/问题数"
+                    />
+                  </el-scrollbar>
+                </datav-tab-item>
+              </datav-tabs>
+
             </datav-card>
             <datav-card title="问题类型占比">
               <v-charts
@@ -69,38 +88,35 @@
             </datav-card>
           </el-col>
           <el-col :span="12">
-            <div class="datav-col">
-              <label for="">统计周期：</label>
-              <span>2024年01月01日 - 2024年08月30日</span>
-            </div>
+            <datav-date-picker v-model="time"/>
             <div class="flex gap-42">
               <datav-statistic
-                  :value="194"
+                  :value="overview.supervisionNotifyTotal"
                   title="通报问题数"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="2"
+                  :value="overview.supervisionNotifyChangingTotal"
                   title="整改中"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="192"
+                  :value="overview.supervisionNotifyChangedTotal"
                   title="已整改"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="73"
+                  :value="overview.supervisionNotifyOrgTotal"
                   title="涉及单位数"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="214"
+                  :value="overview.supervisionNotifyPreTotal"
                   title="涉及人数"
                   style="width: 16.66%"
               />
               <datav-statistic
-                  :value="99"
+                  :value="overview.correctionRate"
                   value-unit="%"
                   title="整改率"
                   style="width: 16.66%"
@@ -220,6 +236,8 @@
 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";
 
 echarts.registerMap("changsha", changshaMap);
 const option = {
@@ -337,57 +355,57 @@ const option1 = ref({
   ],
 });
 
-const data1 = [
+const data1 = ref([
   {
-    name: "开福分局",
-    value: 100,
+    label: "开福分局",
+    value: 80,
     unit: "%",
     numerator: 16,
-    denominator: 16,
+    denominator: 17,
   },
   {
-    name: "芙蓉分局",
+    label: "芙蓉分局",
     value: 100,
     unit: "%",
     numerator: 11,
     denominator: 11,
   },
   {
-    name: "岳麓分局",
+    label: "岳麓分局",
     value: 100,
     unit: "%",
     numerator: 10,
     denominator: 10,
   },
   {
-    name: "雨花分局",
+    label: "雨花分局",
     value: 100,
     unit: "%",
     numerator: 9,
     denominator: 9,
   },
   {
-    name: "望城分局",
+    label: "望城分局",
     value: 100,
     unit: "%",
     numerator: 4,
     denominator: 4,
   },
   {
-    name: "浏阳市局",
+    label: "浏阳市局",
     value: 100,
     unit: "%",
     numerator: 3,
     denominator: 3,
   },
   {
-    name: "长沙县局",
+    label: "长沙县局",
     value: 100,
     unit: "%",
     numerator: 3,
     denominator: 3,
   },
-];
+]);
 
 const data2 = [
   {
@@ -442,6 +460,54 @@ const option2 = {
     },
   ],
 };
+
+
+// region  初始化数据
+const activeTabLeft = ref("1");
+const overview = ref({
+  supervisionNotifyTotal: 0,
+  supervisionNotifyOrgTotal: 0,
+  supervisionNotifyPreTotal: 0,
+  supervisionNotifyChangingTotal: 0,
+  supervisionNotifyChangedTotal: 0,
+  correctionRate: 0,
+});
+
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+
+function getData() {
+  getAllSupervisionNotifyCount(time.value).then((res) => {
+    overview.value = res.overview;
+  });
+}
+
+watch(time, () => {
+  getData();
+});
+onMounted(() => {
+  getData();
+});
+
+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,
+  },
+];
+// endregion
+
+
 </script>
 <style lang="scss" scoped>
 @import "@/style/datav.scss";