diff --git a/src/components/datav/chart-bar-pro.vue b/src/components/datav/chart-bar-pro.vue
new file mode 100644
index 0000000..d085a34
--- /dev/null
+++ b/src/components/datav/chart-bar-pro.vue
@@ -0,0 +1,180 @@
+<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">
+                {{ item.sort }}
+            </span>
+            <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"
+            >
+                <span class="text-success">{{ item.numerator }}</span>
+                <span>/</span>
+                <span>{{ item.denominator }}</span>
+            </span>
+        </div>
+    </div>
+</template>
+<script setup>
+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",
+    },
+});
+
+const max = ref(100);
+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 (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%)";
+}
+</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) - 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_remark {
+        font-size: 14px;
+        .text-success {
+            color: #09c700;
+        }
+    }
+}
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/style/datav.scss b/src/style/datav.scss
index f9da393..de4ef42 100644
--- a/src/style/datav.scss
+++ b/src/style/datav.scss
@@ -37,3 +37,5 @@
     font-size: 29px;
     font-weight: 700;
 }
+
+
diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue
index 37beed3..62db96a 100644
--- a/src/views/datav/Gobal.vue
+++ b/src/views/datav/Gobal.vue
@@ -74,13 +74,11 @@
                   style="width: 16.66%"
               />
             </div>
-            <!--                        <div @click="go">-->
-            <!--                            <v-charts-->
-            <!--                                style="height: 450px"-->
-            <!--                                :option="option"-->
-            <!--                                autoresize-->
-            <!--                            />-->
-            <!--                        </div>-->
+            <v-charts
+                style="height: 450px"
+                :option="option"
+                autoresize
+            />
             <datav-card title="问题趋势">
               <v-charts
                   style="height: 300px"
@@ -90,60 +88,13 @@
             </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 title="突出问题排名" sub-title="问题数">
+              <el-scrollbar height="300px">
+                <datav-chart-bar-pro
+                    :data="tcwtlist"
+                    size="small"
+                />
+              </el-scrollbar>
             </datav-card>
             <datav-card title="问题类型占比">
               <v-charts
@@ -166,33 +117,158 @@ import * as echarts from "echarts/core";
 import moment from "moment/moment";
 import {getCaseVerifData} from "@/api/datav";
 import {getAllGobalCount, getGobalRecentlyTrendByMonth} from "@/api/data/basicScreen.ts";
-
+// region  各种数据
+const activeOrgTab = ref("1");
+const fxsjlist = ref([]);  // 分县市区机构问题排名
+const jsdwlist = ref([]);  // 局属单位机构问题排名
+const ywzblist = ref([]);  // 业务类型占比
+const wtlxlist = ref([]);  // 问题类型占比
+const tcwtlist = ref([]);  // 突出问题排名
+const mapData = ref([]);  // 地图数据
+const gobalTempMapVoList = ref([
+  {
+    "name": "芙蓉分局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+  {
+    "name": "天心分局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+  {
+    "name": "岳麓分局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+  {
+    "name": "开福分局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+  {
+    "name": "雨花分局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+  {
+    "name": "长沙县局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+  {
+    "name": "望城分局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+  {
+    "name": "宁乡市局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+  {
+    "name": "浏阳市局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+  {
+    "name": "高新分局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  },
+]);  // 地图临时测试数据
+// endregion
 const router = useRouter();
 
+// region 地图相关
+
 echarts.registerMap("changsha", changshaMap);
 const option = {
   geo: {
-    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
     map: "changsha",
   },
-
+  tooltip: {
+    trigger: 'item',
+    formatter: function (params) {
+      if (typeof params.data === "undefined") {
+        console.log(params);
+      } else {
+        console.log("================================")
+        console.log(params);
+        const res = params.data;
+        return `<div class="tooltip">
+          <div class="tooltip-title">${res.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul">
+              <li>问题总数 <span>${params.data.totalPro}</span></li>
+              <li>督察问题 <span>${params.data.supervisePro}</span></li>
+              <li>案件核查问题 <span>${params.data.caseVerifyPro}</span></li>
+              <li>信访投诉问题 <span>${params.data.mailPro}</span></li>
+              <li>警务评议问题 <span>${params.data.policePro}</span></li>
+              <li>审计监督问题 <span>${params.data.reviewPro}</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
+    }
+  },
   visualMap: {
     type: "piecewise",
     bottom: 10,
     pieces: [
-      {gte: 85, lte: 100, label: "问题数低于500"},
-      {gte: 65, lte: 85, label: "问题数低于1000"},
-      {gte: 0, lte: 65, label: "问题数低于1000"},
+      {gte: 0, lte: 500, label: "问题数低于500"},
+      {gte: 500, lte: 1000, label: "问题数介于500-1000"},
+      {gte: 1000, label: "问题数高于1000"},
     ],
-    right: 10, // 右边距
+    right: 10,
     realtime: false,
-    orient: "horizontal", // 水平显示
+    orient: "horizontal",
     textStyle: {
-      color: "#fff", // 文字颜色
+      color: "#fff",
     },
     calculable: true,
     inRange: {
-      color: ["#D34343", "#F6A149", "#4987F6"],
+      color: ["#4987F6", "#F6A149", "#D34343",],
     },
   },
   series: [
@@ -201,22 +277,44 @@ const option = {
       type: "map",
       map: "changsha",
       hoverAnimation: true,
-
       label: {
         show: true,
         color: "white",
       },
       itemStyle: {
         normal: {
-          areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
+          areaColor: "#02215E",
+          borderColor: "#1773c3",
         },
       },
-    },
+      data: gobalTempMapVoList.value.map(item => ({
+        name: item.name,
+        value: item.totalPro,
+        todaysum: item.totalPro,
+        allsum: item.supervisePro,
+        completed: item.caseVerifyPro,
+        completedrate: item.mailPro,
+        resolvedrate: item.policePro,
+        reviewrate: item.reviewPro
+      }))
+    }
   ],
 };
-
+// endregion
+/**
+ * gobalTempMapVoList.value.map(item => ({
+ *         name: item.name,
+ *         value: item.totalPro,
+ *         todaysum: item.totalPro,
+ *         allsum: item.supervisePro,
+ *         completed: item.caseVerifyPro,
+ *         completedrate: item.mailPro,
+ *         resolvedrate: item.policePro
+ *       }))
+ * @type {Ref<UnwrapRef<{yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}>, UnwrapRef<{yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}> | {yAxis: {splitLine: {lineStyle: {color: string}, show: boolean}, type: string}, xAxis: {data: *[], type: string, boundaryGap: boolean}, series: [{areaStyle: {color: LinearGradient}, lineStyle: {color: string, width: number}, data: *[], label: {show: boolean}, type: string, smooth: boolean}], tooltip: {axisPointer: {label: {backgroundColor: string}, type: string}, trigger: string}}>}
+ */
 // 问题趋势线状图
-const proTrend =ref({
+const proTrend = ref({
   xAxis: {
     type: "category",
     boundaryGap: false,
@@ -268,48 +366,11 @@ const proTrend =ref({
   ],
 });
 
-const data1 = [
-  {
-    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")
 }
 
-// region  机构问题排名
-const activeOrgTab = ref("1");
-const fxsjlist = ref([]);
-const jsdwlist = ref([]);
-const ywzblist = ref([]);
-const wtlxlist = ref([]);
-// endregion
 
 // region  环形图
 // 业务类型占比
@@ -368,18 +429,33 @@ const time = ref([
 ]);
 
 function getData() {
-
   getAllGobalCount(time.value).then((res) => {
     overview.value = res.overview;
     fxsjlist.value = res.fxsjlist;
     jsdwlist.value = res.jsdwlist;
     ywzblist.value = res.ywzblist;
     wtlxlist.value = res.wtlxlist;
+    tcwtlist.value = res.tcwtlist;
+    console.log(res.gobalTempMapVoList);
+    // gobalTempMapVoList.value = res.gobalTempMapVoList;
+    // console.log(gobalTempMapVoList.value);
+    /*  option.value.series[0].data = gobalTempMapVoList.value.map(item => ({
+        name: item.name,
+        totalPro: item.totalPro,
+        supervisePro: item.supervisePro,
+        caseVerifyPro: item.caseVerifyPro,
+        mailPro: item.mailPro,
+        policePro: item.policePro,
+        reviewPro: item.reviewPro
+      }));*/
+
+
   });
   getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => {
     proTrend.value.xAxis.data = res.monthList;
     proTrend.value.series[0].data = res.totalList;
   });
+
 }
 
 watch(time, () => {
@@ -387,7 +463,6 @@ watch(time, () => {
 });
 onMounted(() => {
   getData();
-
 });
 
 const colors = [
@@ -409,6 +484,52 @@ const colors = [
 
 
 </script>
+
+
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
+
+:deep() {
+  .tooltip {
+    width: 110px;
+    height: 120px;
+  }
+
+  .tooltip-title {
+    color: #fff;
+    font-weight: bold;
+    text-align: center;
+    line-height: 30px;
+    width: 110px;
+    height: 30px;
+    background: #031577;
+
+  }
+
+  .tooltip-content {
+    color: #fff;
+    font-weight: bold;
+    width: 110px;
+    height: 120px;
+    font-size: 12px;
+    background: linear-gradient(180deg, #010457 0%, #031577 100%);
+
+  }
+
+  .tooltip-content ul li {
+    line-height: 20px;
+    margin-left: 5px;
+    font-family: SourceHanSansCN, SourceHanSansCN;
+    color: #597AE9;
+  }
+
+
+  .tooltip-ul span {
+    float: right;
+    width: 50px;
+    text-align: right;
+    margin-right: 5px;
+    color: #fff;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/datav/Jwpy.vue b/src/views/datav/Jwpy.vue
index 5873f67..1ccbe6d 100644
--- a/src/views/datav/Jwpy.vue
+++ b/src/views/datav/Jwpy.vue
@@ -1,14 +1,343 @@
 <template>
-    <el-scrollbar height="100vh">
-        <div class="wrapper">
-            <datav-header />
-            <img src="/imgs/datav/jwpy.png" alt="" class="relative">
-        </div>
-    </el-scrollbar>
+  <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="4">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ overview.firstMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      调查总量
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="4">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ overview.firstMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      调查总量
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="4">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ overview.firstMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      有效回复
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="4">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ overview.firstMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      满意
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="4">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ overview.firstMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      基本满意
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :span="4">
+                  <div class="descriptions_cell text-center">
+                    <div class="descriptions_content">
+                      {{ overview.firstMail }}
+                    </div>
+                    <div class="descriptions_label">
+                      不满意数
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </datav-card>
+            <datav-card title="调查滿意度"></datav-card>
+            <datav-card title="业务满意率"></datav-card>
+          </el-col>
+
+          <el-col :span="12">
+            <div class="datav-col">
+              <datav-date-picker v-model="time"/>
+            </div>
+            <v-charts
+                style="height: 450px"
+                :option="option"
+                autoresize
+            />
+
+            <datav-card title="综合滿意度排名">
+
+            </datav-card>
+
+          </el-col>
+
+          <el-col :span="6">
+            <datav-card title="不满意样本趋势">
+
+            </datav-card>
+            <datav-card title="单项分析"></datav-card>
+            <datav-card title="单项调查情况"></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 {getMailVisitsData, getRecentlyMailTrend, getRecentlyMailTrend12337} from "@/api/datav";
+import moment from "moment/moment.js";
+
+echarts.registerMap("changsha", changshaMap);
+let mapDataList = reactive([
+  {name: '长沙县', value: 500},
+  {name: '浏阳市', value: 400},
+  {name: '开福区', value: 300},
+  {name: '浏阳市', value: 400},
+  {name: '望城区', value: 400},
+  {name: '芙蓉区', value: 400},
+  {name: '天心区', value: 400},
+  {name: '雨花区', value: 400},
+  {name: '岳麓区', value: 400},
+  {name: '宁乡市', value: 400},
+]);
+const option = {
+  geo: {
+    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
+    map: "changsha",
+    itemStyle: {
+      normal: {
+        areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
+      },
+    },
+  },
+  tooltip: {
+    show: true,
+    trigger: "item",
+    position: "right",
+    formatter: function (params) {
+      if (typeof params.data === "undefined") {
+        console.log(params);
+      } else {
+        console.log(params);
+        return `<div class="tooltip">
+          <div class="tooltip-title">${params.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul">
+              <li>信访总件数 <span>${params.data.todaysum}</span></li>
+              <li>国家信访 <span>${params.data.allsum}</span>
+              </li>
+              <li>公安部信访 <span>${params.data.completed}</span>
+              </li>
+              <li>局长信箱 <span>${params.data.completedrate}</span></li>
+              <li>12337信访 <span>${params.data.resolvedrate}</span></li>
+            </ul>
+          </div>
+        </div>`;
+      }
+    },
+    backgroundColor: "#031577", //
+    borderColor: "#0A2F86",
+    borderWidth: 0, // 设置边框宽度为1像素
+    borderRadius: 3, // 设置边框半径为3像素
+    shadowBlur: 0, // 设置阴影模糊程度为8像素
+    shadowOffsetX: 0, // 设置水平阴影位移量为0像素
+    shadowOffsetY: 0, // 设置垂直阴影位移量为6像素
+  },
+  visualMap: {
+    type: "piecewise",
+    bottom: 10,
+    pieces: [
+      {gte: 85, lte: 100, label: "信访总件数>300"},
+      {gte: 65, lte: 85, label: "信访总件数>200"},
+      {gte: 0, lte: 65, label: "信访总件数0-200"},
+    ],
+    right: 10, // 右边距
+    realtime: false,
+    orient: "horizontal", // 水平显示
+    textStyle: {
+      color: "#fff", // 文字颜色
+    },
+    calculable: true,
+    inRange: {
+      color: ["#D34343", "#F6A149", "#4987F6"],
+    },
+  },
+  series: [
+    {
+      name: "长沙",
+      type: "map",
+      map: "changsha",
+      hoverAnimation: true,
+      label: {
+        show: true,
+        color: "white",
+      },
+      data: mapDataList,
+    },
+
+  ],
+
+};
+const option1 = ref({
+  xAxis: {
+    type: "category",
+    boundaryGap: false,
+    data: [],
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "#193775",
+      },
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  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: [],
+    },
+  ],
+});
+// region 调查满意度
+const overview = ref({
+  total: 0,
+  countryMail: 0,
+  policeMail: 0,
+  commissionerMail: 0,
+  numMail: 0,
+});
+
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
+
+
+/**
+ * 初始化
+ */
+let timer;
+const currentYear = new Date().getFullYear();
+
+function initRecentlyMailTrend() {
+  getRecentlyMailTrend({
+    sourcesCode: "1",
+    year: currentYear,
+    startTime: time.value[0],
+    endTime: time.value[1]
+  }).then((data) => {
+    // 更新图表的 xAxis 和 series 数据
+    option1.value.xAxis.data = data.monthList;
+    option1.value.series[0].data = data.totalList;
+  });
+}
+
+watch(time, () => {
+  getData();
+  // initRecentlyMailTrend()
+})
+onMounted(() => {
+  getData();
+  initRecentlyMailTrend();
+
+});
+
+function getData() {
+  getMailVisitsData(time.value).then((data) => {
+    overview.value = data.overview;
+
+  });
+}
+
+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>
 @import "@/style/datav.scss";
+
+.dropdown-container {
+  position: absolute;
+  right: 30px;
+  top: 65px;
+}
+
+.datav-tab-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
 </style>
\ No newline at end of file
diff --git a/src/views/datav/MailVisits.vue b/src/views/datav/MailVisits.vue
index cfbfcb7..fbd8380 100644
--- a/src/views/datav/MailVisits.vue
+++ b/src/views/datav/MailVisits.vue
@@ -133,13 +133,14 @@
             </div>
             <div class="flex gap-42">
               <datav-statistic
-                  :value="overview.total"
-                  title="信访总件数"
+                  :value="overview.commissionerMail"
+                  title="局长信箱"
                   style="width: 20%"
               />
+
               <datav-statistic
-                  :value="overview.commissionerMail"
-                  title="局长信箱"
+                  :value="overview.total"
+                  title="信访总件数"
                   style="width: 20%"
               />
               <datav-statistic