From 278ca5cd282b8de899a67336394863b530b0f0ac 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, 14 Nov 2024 19:36:01 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=A4=A7=E5=B1=8F=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF1.3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/screen/jwpy.ts          |   0
 src/api/screen/screen.ts        |   0
 src/components/datav/select.vue |  51 +++++
 src/views/datav/Gobal.vue       | 347 +++++++++++++++++---------------
 src/views/datav/Jwpy.vue        | 264 ++++++++++++++++++++----
 src/views/datav/MailVisits.vue  | 204 +++++++++++++------
 6 files changed, 598 insertions(+), 268 deletions(-)
 create mode 100644 src/api/screen/jwpy.ts
 create mode 100644 src/api/screen/screen.ts
 create mode 100644 src/components/datav/select.vue

diff --git a/src/api/screen/jwpy.ts b/src/api/screen/jwpy.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/screen/screen.ts b/src/api/screen/screen.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/datav/select.vue b/src/components/datav/select.vue
new file mode 100644
index 0000000..55cee78
--- /dev/null
+++ b/src/components/datav/select.vue
@@ -0,0 +1,51 @@
+<template>
+  <el-select v-model="value" placeholder="Select" class="custom-select">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+    />
+  </el-select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: null,
+      options: [
+        {value: '1', label: 'Option 1', disabled: false},
+        {value: '2', label: 'Option 2', disabled: false},
+        {value: '3', label: 'Option 3', disabled: true},
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.custom-select {
+  width: 144px;
+  height: 30px;
+  background: #1C3472 !important;
+  color: #ffffff !important;
+}
+
+::v-deep .el-select .el-input__inner {
+  background-color: #1C3472 !important;
+  color: #ffffff !important;
+}
+
+::v-deep .el-option,
+::v-deep .el-select-dropdown__item {
+  background-color: #1C3472 !important;
+  color: #ffffff !important;
+}
+
+::v-deep .el-option:hover,
+::v-deep .el-select-dropdown__item:hover {
+  background-color: #0f2557 !important;
+}
+</style>
+
diff --git a/src/views/datav/Gobal.vue b/src/views/datav/Gobal.vue
index 62db96a..ca77f00 100644
--- a/src/views/datav/Gobal.vue
+++ b/src/views/datav/Gobal.vue
@@ -11,7 +11,7 @@
                   type="bottom-button"
               >
                 <datav-tab-item label="分县市局" name="1">
-                  <el-scrollbar height="300px">
+                  <el-scrollbar height="340px">
                     <datav-chart-bar
                         :data="fxsjlist"
                         size="large"
@@ -21,7 +21,7 @@
                   </el-scrollbar>
                 </datav-tab-item>
                 <datav-tab-item label="局属单位" name="2">
-                  <el-scrollbar height="300px">
+                  <el-scrollbar height="340px">
                     <datav-chart-bar
                         :data="jsdwlist"
                         :max="11"
@@ -34,12 +34,13 @@
             </datav-card>
             <datav-card title="业务类型占比">
               <v-charts
-                  style="height: 320px"
+                  style="height: 340px"
                   :option="zfbaPieOption"
                   autoresize
               />
             </datav-card>
           </el-col>
+
           <el-col :span="12">
             <datav-date-picker v-model="time"/>
             <div class="flex gap-42">
@@ -61,7 +62,7 @@
               <datav-statistic
                   :value="overview.mailComplaintPro"
                   title="信访投诉问题"
-                  style="width: 16.66%"
+                  style="width: 16.66%;"
               />
               <datav-statistic
                   :value="overview.policeValuationPro"
@@ -75,34 +76,56 @@
               />
             </div>
             <v-charts
-                style="height: 450px"
+                style="height: 360px"
                 :option="option"
                 autoresize
             />
-            <datav-card title="问题趋势">
-              <v-charts
-                  style="height: 300px"
-                  :option="proTrend"
-                  autoresize
-              />
-            </datav-card>
+            <div>
+
+              <datav-card title="问题趋势">
+                <v-charts
+                    style="height: 260px;"
+                    :option="proTrend"
+                    autoresize
+                />
+                <div class="gobal-dropdown-container">
+                  <el-dropdown class="test" @command="handleCommand">
+                    <span class="el-dropdown-link my-gobal-yearselect">
+                      {{ selectedYear + " 年" }}
+                    </span>
+                    <template #dropdown>
+                      <el-dropdown-menu style="width: 90px">
+                        <el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </datav-card>
+
+            </div>
+
+
           </el-col>
+
           <el-col :span="6">
             <datav-card title="突出问题排名" sub-title="问题数">
-              <el-scrollbar height="300px">
+              <el-scrollbar height="390px">
                 <datav-chart-bar-pro
                     :data="tcwtlist"
                     size="small"
                 />
               </el-scrollbar>
             </datav-card>
+
             <datav-card title="问题类型占比">
               <v-charts
-                  style="height: 300px"
+                  style="height: 350px"
                   :option="wtlxPieOption"
                   autoresize
               />
             </datav-card>
+
           </el-col>
         </el-row>
       </main>
@@ -110,6 +133,7 @@
 
   </el-scrollbar>
 </template>
+
 <script setup>
 import vCharts from "vue-echarts";
 import changshaMap from "@/assets/data/changsha.json";
@@ -125,16 +149,7 @@ 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
-  },
+let gobalTempMapVoList = [
   {
     "name": "天心分局",
     "totalPro": 11,
@@ -143,122 +158,70 @@ const gobalTempMapVoList = ref([
     "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 = {
+const option = ref({
   geo: {
     map: "changsha",
+
   },
   tooltip: {
     trigger: 'item',
     formatter: function (params) {
-      if (typeof params.data === "undefined") {
-        console.log(params);
+      console.log(params)
+      const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
+      if (dataItem) {
+        return `
+        <div class="tooltip">
+          <div class="tooltip-title">${dataItem.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul" >
+              <li>问题总数 <span>${dataItem.totalPro}</span></li>
+              <li>督察问题 <span>${dataItem.supervisePro}</span></li>
+              <li>案件核查问题 <span>${dataItem.caseVerifyPro}</span></li>
+              <li>信访投诉问题 <span>${dataItem.mailPro}</span></li>
+              <li>警务评议问题 <span>${dataItem.policePro}</span></li>
+              <li>审计监督问题 <span>${dataItem.reviewPro}</span></li>
+            </ul>
+          </div>
+        </div>`;
       } else {
-        console.log("================================")
-        console.log(params);
-        const res = params.data;
         return `<div class="tooltip">
-          <div class="tooltip-title">${res.name}</div>
+          <div class="tooltip-title">${dataItem.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 class="tooltip-ul"">
+              <li>问题总数 <span>0</span></li>
+              <li>督察问题 <span>0</span></li>
+              <li>案件核查问题 <span>0</span></li>
+              <li>信访投诉问题 <span>0</span></li>
+              <li>警务评议问题 <span>0</span></li>
+              <li>审计监督问题 <span>0</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: 0, lte: 500, label: "问题数低于500"},
-      {gte: 500, lte: 1000, label: "问题数介于500-1000"},
-      {gte: 1000, label: "问题数高于1000"},
+      {gte: 0, lte: 10, label: "问题数低于500"},
+      {gte: 10, lte: 20, label: "问题数介于500-1000"},
+      {gte: 30, label: "问题数高于1000"},
     ],
     right: 10,
     realtime: false,
@@ -287,20 +250,21 @@ const option = {
           borderColor: "#1773c3",
         },
       },
-      data: gobalTempMapVoList.value.map(item => ({
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
+      },
+      data: gobalTempMapVoList.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
+        value: item.totalPro  // 将 totalPro 值映射到 value 字段
       }))
     }
   ],
-};
+})
+
 // endregion
+
 /**
  * gobalTempMapVoList.value.map(item => ({
  *         name: item.name,
@@ -313,8 +277,15 @@ const option = {
  *       }))
  * @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}}>}
  */
-// 问题趋势线状图
+// region问题趋势线状图
 const proTrend = ref({
+  grid: {
+    left: '10%', // 图表距离容器左边的距离
+    right: '10%', // 图表距离容器右边的距离
+    top: '10%', // 图表距离容器上边的距离
+    bottom: '20%', // 图表距离容器下边的距离
+    containLabel: false // 是否包含坐标轴的标签
+  },
   xAxis: {
     type: "category",
     boundaryGap: false,
@@ -366,6 +337,14 @@ const proTrend = ref({
   ],
 });
 
+const years = ref(['2024', '2023']); // 年份列表
+const selectedYear = ref('2024年'); // 当前选中的年份
+const handleCommand = (year) => {
+  selectedYear.value = year; // 更新当前选中的年份
+};
+
+// endregion
+
 
 function go() {
   router.push("/datav/sub1")
@@ -422,7 +401,6 @@ const overview = ref({
   policeValuationPro: 0,
   reviewPro: 0,
 });
-
 const time = ref([
   moment().startOf("year").format("YYYY-MM-DD"),
   moment().format("YYYY-MM-DD"),
@@ -436,20 +414,7 @@ function getData() {
     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
-      }));*/
-
-
+    gobalTempMapVoList = res.gobalTempMapVoList;
   });
   getGobalRecentlyTrendByMonth(new Date().getFullYear()).then((res) => {
     proTrend.value.xAxis.data = res.monthList;
@@ -464,7 +429,6 @@ watch(time, () => {
 onMounted(() => {
   getData();
 });
-
 const colors = [
   {
     color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
@@ -479,7 +443,6 @@ const colors = [
     percentage: 40,
   },
 ];
-
 // endregion
 
 
@@ -490,46 +453,102 @@ const colors = [
 @import "@/style/datav.scss";
 
 :deep() {
+  // 弹框整体
   .tooltip {
-    width: 110px;
-    height: 120px;
+    position: relative;
+    width: 169.88px;
+    height: 198px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    border: 1px solid #4E8FFF;
+    margin: -10px -10px -10px -10px;
   }
 
+  //浏阳市局
   .tooltip-title {
-    color: #fff;
-    font-weight: bold;
-    text-align: center;
-    line-height: 30px;
-    width: 110px;
-    height: 30px;
-    background: #031577;
-
+    width: 169.88px;
+    height: 43px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    text-align: center; /* 水平居中 */
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    line-height: 22px;
+    border-bottom: 1px solid #253755; /* 设置下边框 */
   }
 
+
   .tooltip-content {
-    color: #fff;
-    font-weight: bold;
-    width: 110px;
-    height: 120px;
-    font-size: 12px;
+    width: 170px;
+    height: 155.8px;
+    //font-size: 11px;
+    margin-top: -12px;
     background: linear-gradient(180deg, #010457 0%, #031577 100%);
+  }
+
+  .tooltip-content ul {
+    list-style-type: none; /* 移除默认的小圆点 */
+    padding: 0;
 
   }
 
   .tooltip-content ul li {
-    line-height: 20px;
     margin-left: 5px;
-    font-family: SourceHanSansCN, SourceHanSansCN;
+    height: 25px;
     color: #597AE9;
+    font-size: 13px;
   }
 
 
+  // 数字的span
   .tooltip-ul span {
     float: right;
-    width: 50px;
+    width: 30px;
     text-align: right;
-    margin-right: 5px;
+    margin-right: 15px;
     color: #fff;
+    font-size: 13px;
+  }
+
+
+  /* 小尖角 */
+  .tooltip::before {
+    content: '';
+    position: absolute;
+    top: 90px; /* 调整尖角的垂直位置 */
+    left: -10px; /* 调整尖角的水平位置 */
+    width: 0;
+    height: 0;
+    //border-top: 10px solid red; /* 顶边颜色 */
+    //border-bottom: 10px solid green; /* 底边颜色 */
+    //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
   }
+
+
+}
+
+.test {
+  width: 95px;
+  height: 25px;
+  background: #1C3472;
 }
-</style>
\ No newline at end of file
+
+.gobal-dropdown-container {
+  position: absolute;
+  right: 20px;
+  top: 15px;
+}
+
+.my-gobal-yearselect {
+  font-size: 14px;
+  padding-top: 6px;
+  padding-left: 20px;
+  width: 90px;
+}
+
+
+</style>
+
+
diff --git a/src/views/datav/Jwpy.vue b/src/views/datav/Jwpy.vue
index 1ccbe6d..9818c71 100644
--- a/src/views/datav/Jwpy.vue
+++ b/src/views/datav/Jwpy.vue
@@ -5,52 +5,42 @@
       <main>
         <el-row :gutter="16">
           <el-col :span="6">
-            <datav-card title="调查情况">
+            <datav-card title="调查情况" style="height: 156px">
               <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">
+                <el-col :span="5">
+                  <div class="descriptions_cell text-center margin-top-30">
                     <div class="descriptions_content">
-                      {{ overview.firstMail }}
+                      {{ reviewOk.State2 }}
                     </div>
                     <div class="descriptions_label">
                       调查总量
                     </div>
                   </div>
                 </el-col>
-                <el-col :span="4">
-                  <div class="descriptions_cell text-center">
+                <el-col :span="5">
+                  <div class="descriptions_cell text-center margin-top-30">
                     <div class="descriptions_content">
-                      {{ overview.firstMail }}
+                      {{ reviewOk.State3 }}
                     </div>
                     <div class="descriptions_label">
                       有效回复
                     </div>
                   </div>
                 </el-col>
-                <el-col :span="4">
-                  <div class="descriptions_cell text-center">
+                <el-col :span="5">
+                  <div class="descriptions_cell text-center margin-top-30">
                     <div class="descriptions_content">
-                      {{ overview.firstMail }}
+                      {{ reviewOk.State3 - reviewOk.bmys }}
                     </div>
                     <div class="descriptions_label">
                       满意
                     </div>
                   </div>
                 </el-col>
-                <el-col :span="4">
-                  <div class="descriptions_cell text-center">
+                <el-col :span="5">
+                  <div class="descriptions_cell text-center margin-top-30">
                     <div class="descriptions_content">
-                      {{ overview.firstMail }}
+                      {{ 0 }}
                     </div>
                     <div class="descriptions_label">
                       基本满意
@@ -58,9 +48,9 @@
                   </div>
                 </el-col>
                 <el-col :span="4">
-                  <div class="descriptions_cell text-center">
+                  <div class="descriptions_cell text-center margin-top-30">
                     <div class="descriptions_content">
-                      {{ overview.firstMail }}
+                      {{ reviewOk.bmys }}
                     </div>
                     <div class="descriptions_label">
                       不满意数
@@ -69,13 +59,52 @@
                 </el-col>
               </el-row>
             </datav-card>
-            <datav-card title="调查滿意度"></datav-card>
+            <datav-card title="调查滿意度">
+              <div style="height: 226px">
+                <el-container>
+                  <el-aside width="100px">
+                    <el-col>
+                      <div class="descriptions_cell text-center height-118">
+                        <div class="descriptions_content margin-top-30 ">
+                          {{ reviewOk.bmys }}
+                        </div>
+                        <div class="descriptions_label">
+                          上期满意度
+                        </div>
+                      </div>
+                      <div class="descriptions_cell text-center height-118">
+                        <div class="descriptions_content">
+                          {{ reviewOk.bmys }}
+                        </div>
+                        <div class="descriptions_label">
+                          当前调查满意度
+                        </div>
+                      </div>
+                    </el-col>
+
+                  </el-aside>
+                  <el-main>
+                    <v-charts
+                        :option="option1"
+                        autoresize
+                    />
+
+                  </el-main>
+                </el-container>
+              </div>
+            </datav-card>
             <datav-card title="业务满意率"></datav-card>
           </el-col>
 
           <el-col :span="12">
             <div class="datav-col">
-              <datav-date-picker v-model="time"/>
+              <el-row :gutter="6">
+                <el-col :span="4">
+                  <!--                  <datav-select></datav-select>-->
+                </el-col>
+
+              </el-row>
+
             </div>
             <v-charts
                 style="height: 450px"
@@ -84,16 +113,38 @@
             />
 
             <datav-card title="综合滿意度排名">
+              <div class="common-layout">
+                <el-container>
 
+                  <el-container>
+                    <el-header>Header</el-header>
+                    <el-main>Main</el-main>
+                  </el-container>
+                  <el-aside width="445px">Aside</el-aside>
+                </el-container>
+              </div>
             </datav-card>
 
           </el-col>
 
           <el-col :span="6">
-            <datav-card title="不满意样本趋势">
+            <datav-card title="不满意样本趋势" sub-title="不满意样本" style="height: 156px">
+              <div style="height: 150px">
+                <v-charts
+                    :option="option2"
+                    autoresize
+                />
+              </div>
 
             </datav-card>
-            <datav-card title="单项分析"></datav-card>
+            <datav-card title="单项分析">
+              <div style="height: 226px">
+                <v-charts
+                    :option="option3"
+                    autoresize
+                />
+              </div>
+            </datav-card>
             <datav-card title="单项调查情况"></datav-card>
           </el-col>
 
@@ -199,15 +250,22 @@ const option = {
       },
       data: mapDataList,
     },
-
   ],
 
 };
-const option1 = ref({
+const option1 = {
   xAxis: {
     type: "category",
     boundaryGap: false,
-    data: [],
+    data: [
+      "9/10",
+      "9/11",
+      "9/12",
+      "9/13",
+      "9/13",
+      "9/13",
+
+    ],
   },
   yAxis: {
     type: "value",
@@ -250,11 +308,104 @@ const option1 = ref({
           },
         ]),
       },
-      data: [],
+      data: [
+        100,
+        25,
+        50,
+        70,
+        10,
+        10,
+      ],
     },
   ],
-});
-// region 调查满意度
+  grid: {left: '10%', right: '10%', top: '10%', bottom: '20%', containLabel: true},
+}
+const option2 = {
+  xAxis: {
+    type: "category",
+    boundaryGap: false,
+    data: [
+      "9/10",
+      "9/11",
+      "9/12",
+      "9/13",
+      "9/13",
+      "9/13",
+
+    ],
+  },
+  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: "#6FDBA0",
+
+        width: 4,
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          offset: 0,
+          color: 'rgba(109, 221, 159, 0.47)'
+        }, {offset: 1, color: 'rgba(109, 221, 159, 0)'}])
+      },
+
+      data: [
+        79,
+        88,
+        82,
+        77,
+        69,
+        90,
+      ],
+    },
+  ],
+  grid: {left: '10%', right: '10%', top: '10%', bottom: '20%', containLabel: true},
+}
+const option3 = {
+  title: {text: '柱状图示例'},
+  tooltip: {},
+  legend: {data: ['销量']},
+  grid: {
+    left: '10%',
+    right: '10%', top: '10%', bottom: '10%'
+  },
+  xAxis: {type: 'category', data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},
+  yAxis: {type: 'value'},
+  series: [{
+    name: '销量',
+    type: 'bar',
+    data: [5, 20, 36, 10, 10, 20],
+    itemStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+        offset: 0,
+        color: 'rgba(109, 221, 159, 0.47)'
+      }, {offset: 1, color: 'rgba(109, 221, 159, 0)'}])
+    }
+  }]
+};
+// region 调查情况
 const overview = ref({
   total: 0,
   countryMail: 0,
@@ -263,16 +414,30 @@ const overview = ref({
   numMail: 0,
 });
 
-const time = ref([
-  moment().startOf("year").format("YYYY-MM-DD"),
-  moment().format("YYYY-MM-DD"),
-]);
+const reviewOk = ref({
+  State2: 164279,
+  State3: 104659,
+  bmys: "1615",
+  dczl: 392902,
+  jtl: "68.45%",
+  yxhf: "104659",
+  yxl: "38.92%"
+});
+// endregion
+
+// region 调查滿意度
+
+// endregion
 
 
 /**
  * 初始化
  */
 let timer;
+const time = ref([
+  moment().startOf("year").format("YYYY-MM-DD"),
+  moment().format("YYYY-MM-DD"),
+]);
 const currentYear = new Date().getFullYear();
 
 function initRecentlyMailTrend() {
@@ -283,8 +448,8 @@ function initRecentlyMailTrend() {
     endTime: time.value[1]
   }).then((data) => {
     // 更新图表的 xAxis 和 series 数据
-    option1.value.xAxis.data = data.monthList;
-    option1.value.series[0].data = data.totalList;
+    // option1.value.xAxis.data = data.monthList;
+    // option1.value.series[0].data = data.totalList;
   });
 }
 
@@ -300,7 +465,7 @@ onMounted(() => {
 
 function getData() {
   getMailVisitsData(time.value).then((data) => {
-    overview.value = data.overview;
+    // overview.value = data.overview;
 
   });
 }
@@ -339,5 +504,20 @@ const colors = [
   align-items: center;
 }
 
+.descriptions_content {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+
+.margin-top-30 {
+  margin-top: 30px;
+}
+
+
+.height-118 {
+  height: 118px;
+}
+
 
 </style>
\ No newline at end of file
diff --git a/src/views/datav/MailVisits.vue b/src/views/datav/MailVisits.vue
index fbd8380..ad56969 100644
--- a/src/views/datav/MailVisits.vue
+++ b/src/views/datav/MailVisits.vue
@@ -352,85 +352,78 @@ import moment from "moment/moment.js";
 /**
  * 地图渲染
  */
-const getMapDataList = async () => {
-  try {
-    mapDataList = await mapCountyData(currentParams);
-    changsMap();
-  } catch (error) {}
-};
+
 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 = {
+let gobalTempMapVoList = [
+  {
+    "name": "天心分局",
+    "totalPro": 11,
+    "supervisePro": 11,
+    "caseVerifyPro": 11,
+    "mailPro": 11,
+    "policePro": 11,
+    "reviewPro": 11
+  }
+];
+const option = ref({
   geo: {
-    // 是上面注册时的名字哦，registerMap（'名字保持一致'）
     map: "changsha",
-    itemStyle: {
-      normal: {
-        areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
-      },
-    },
+
   },
   tooltip: {
-    show: true,
-    trigger: "item",
-    position: "right",
+    trigger: 'item',
     formatter: function (params) {
-      if (typeof params.data === "undefined") {
-        console.log(params);
+      console.log(params)
+      const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
+      if (dataItem) {
+        return `
+        <div class="tooltip">
+          <div class="tooltip-title">${dataItem.name}</div>
+          <div class="tooltip-content">
+            <ul class="tooltip-ul" >
+              <li>信访总件数 <span>${dataItem.totalPro}</span></li>
+              <li>国家信访 <span>${dataItem.supervisePro}</span></li>
+              <li>公安部信访 <span>${dataItem.caseVerifyPro}</span></li>
+              <li>局长信箱 <span>${dataItem.mailPro}</span></li>
+              <li>12337信访 <span>${dataItem.policePro}</span></li>
+            </ul>
+          </div>
+        </div>`;
       } 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 class="tooltip-ul"">
+              <li>信访总件数 <span>0</span></li>
+              <li>国家信访 <span>0</span></li>
+              <li>公安部信访 <span>0</span></li>
+              <li>局长信箱 <span>0</span></li>
+              <li>12337信访 <span>0</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"},
+      {gte: 0, lte: 10, label: "问题数低于500"},
+      {gte: 10, lte: 20, label: "问题数介于500-1000"},
+      {gte: 30, 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: [
@@ -443,12 +436,25 @@ const option = {
         show: true,
         color: "white",
       },
-      data: mapDataList,
-    },
-
+      itemStyle: {
+        normal: {
+          areaColor: "#02215E",
+          borderColor: "#1773c3",
+        },
+      },
+      emphasis: {
+        areaColor: "#FFD700", // 高亮时区域颜色
+        borderColor: "#FF0000", // 高亮时边框颜色
+        borderWidth: 4 // 高亮时边框宽度
+      },
+      data: gobalTempMapVoList.map(item => ({
+        name: item.name,
+        value: item.totalPro  // 将 totalPro 值映射到 value 字段
+      }))
+    }
   ],
+})
 
-};
 const option1 = ref({
   xAxis: {
     type: "category",
@@ -633,7 +639,6 @@ watch(activeMailTrend, async () => {
     option1.value.xAxis.data = recentlyMailTrend.monthList;
     option1.value.series[0].data = recentlyMailTrend.totalList;
   }
-
 })
 
 
@@ -704,10 +709,6 @@ const colors = [
 </script>
 
 
-
-
-
-
 <style lang="scss" scoped>
 @import "@/style/datav.scss";
 
@@ -726,4 +727,83 @@ const colors = [
 
 
 
+
+:deep() {
+  // 弹框整体
+  .tooltip {
+    position: relative;
+    width: 169.88px;
+    height: 178px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    border: 1px solid #4E8FFF;
+    margin: -10px -10px -10px -10px;
+  }
+
+  //浏阳市局
+  .tooltip-title {
+    width: 169.88px;
+    height: 43px;
+    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    text-align: center; /* 水平居中 */
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    line-height: 22px;
+    border-bottom: 1px solid #253755; /* 设置下边框 */
+  }
+
+
+  .tooltip-content {
+    width: 170px;
+    height: 132px;
+    //font-size: 11px;
+    margin-top: -12px;
+    background: linear-gradient(180deg, #010457 0%, #031577 100%);
+  }
+
+  .tooltip-content ul {
+    list-style-type: none; /* 移除默认的小圆点 */
+    padding: 0;
+
+  }
+
+  .tooltip-content ul li {
+    margin-left: 5px;
+    height: 25px;
+    color: #597AE9;
+    font-size: 13px;
+  }
+
+
+  // 数字的span
+  .tooltip-ul span {
+    float: right;
+    width: 30px;
+    text-align: right;
+    margin-right: 15px;
+    color: #fff;
+    font-size: 13px;
+  }
+
+
+  /* 小尖角 */
+  .tooltip::before {
+    content: '';
+    position: absolute;
+    top: 90px; /* 调整尖角的垂直位置 */
+    left: -10px; /* 调整尖角的水平位置 */
+    width: 0;
+    height: 0;
+    //border-top: 10px solid red; /* 顶边颜色 */
+    //border-bottom: 10px solid green; /* 底边颜色 */
+    //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
+  }
+
+
+}
+
+
 </style>
\ No newline at end of file