From 633393a10cad329b9aa7617a4f8686c44092fa90 Mon Sep 17 00:00:00 2001
From: "OUMYYE\\Administrator" <oumyye@163.com>
Date: Mon, 5 Feb 2024 19:30:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/datascreen.ts            |  28 ++
 src/views/datascreen/details.vue | 270 +++++++++++++
 src/views/datascreen/index.vue   | 639 ++++++++++++++++++-------------
 src/views/datascreen/tabs.vue    | 188 ---------
 4 files changed, 668 insertions(+), 457 deletions(-)
 create mode 100644 src/api/datascreen.ts
 create mode 100644 src/views/datascreen/details.vue
 delete mode 100644 src/views/datascreen/tabs.vue

diff --git a/src/api/datascreen.ts b/src/api/datascreen.ts
new file mode 100644
index 0000000..49c6801
--- /dev/null
+++ b/src/api/datascreen.ts
@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+export function consoleData(params?: Record<string, any>) {
+    return request.get({ url: '/dataScreen/consoleData', params })
+}
+
+export function peopleMail(params?: Record<string, any>) {
+    return request.get({ url: '/dataScreen/peopleMail', params })
+}
+export function mailTypeRank(params?: Record<string, any>) {
+    return request.get({ url: '/dataScreen/mailTypeRank', params })
+}
+
+export function mailTrend(params?: Record<string, any>) {
+    return request.get({ url: '/dataScreen/mailTrend', params })
+}
+export function mapCountyData(params?: Record<string, any>) {
+    return request.get({ url: '/dataScreen/mapData', params })
+}
+
+export function dutyDay(params: Record<string, any>) {
+    return request.get({ url:  '/dataScreen/dutyDay'})
+}
+
+export function threeRate(params: Record<string, any>) {
+    return request.get({ url:  '/dataScreen/threeRate'})
+}
+
diff --git a/src/views/datascreen/details.vue b/src/views/datascreen/details.vue
new file mode 100644
index 0000000..6790277
--- /dev/null
+++ b/src/views/datascreen/details.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="details-popup">
+    <popup
+        ref="popupRef"
+        :title="popupTitle"
+        :async="true"
+        width="550px"
+        :clickModalClose="true"
+        @confirm="handleSubmit"
+        @close="handleClose"
+    >
+      <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
+        <el-form-item label="部门" prop="departId">
+          <el-tree-select
+              class="flex-1"
+              v-model="formData.departId"
+              :data="optionsData.dept"
+              clearable
+              filterable
+              node-key="id"
+              :props="{
+                            value: 'id',
+                            label: 'name',
+                            disabled(data: any) {
+                                return !!data.isStop
+                            }
+                        }"
+              check-strictly
+              :default-expand-all="true"
+              placeholder="请选择部门"
+          />
+        </el-form-item>
+
+        <el-form-item label="机构类型" prop="deptType">
+          <el-select
+              class="flex-1"
+              clearable
+              v-model="formData.deptType"
+              placeholder="请选择机构类型"
+          >
+            <el-option
+                v-for="(item, index) in optionsData.deptTypes.lists"
+                :key="index"
+                :label="item.name"
+                :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="名称" prop="empNo">
+          <!--                    <el-input v-model="formData.policeName" placeholder="请输入" />-->
+
+          <el-select
+              v-model="formData.policeName"
+              filterable
+              class="flex-1"
+              clearable
+              remote
+              placeholder="请搜索名字/警号/手机号"
+              :remote-method="searchPoliceUser"
+              @change="handleSelectChange"
+          >
+            <el-option
+                v-for="(item, index) in optionsData.policeList"
+                :key="index"
+                :label="item.name"
+                :value="item.empNo"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="警号" prop="empNo">
+          <el-input v-model="formData.empNo"  disabled="disabled" placeholder="请输入" />
+        </el-form-item>
+        <!--                <el-form-item label="手机号" prop="mobile">-->
+        <!--                    <el-input v-model="formData.mobile" placeholder="请输入" />-->
+        <!--                </el-form-item>-->
+        <el-form-item label="值班日期" prop="startTime">
+          <daterange-picker
+              v-model:startTime="formData.startTime"
+              v-model:endTime="formData.endTime"
+          />
+        </el-form-item>
+
+
+
+
+      </el-form>
+    </popup>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { FormInstance, ListItem } from 'element-plus'
+import { dutyEdit, dutyAdd, dutyDetail, dutyLists } from '@/api/duty'
+import { dictDataDelete, dictDataLists, dictTypeAll } from '@/api/setting/dict'
+import Popup from '@/components/popup/index.vue'
+import feedback from '@/utils/feedback'
+import type { PropType } from 'vue'
+import { useDictOptions } from '@/hooks/useDictOptions'
+import { roleAll } from '@/api/perms/role'
+import { postAll } from '@/api/org/post'
+import { deptLists } from '@/api/org/department'
+import { searchPolice } from '@/api/perms/admin'
+import { usePaging } from '@/hooks/usePaging'
+import { loginCaptcha } from '@/api/user'
+import { isFunction } from 'lodash'
+defineProps({
+  dictData: {
+    type: Object as PropType<Record<string, any[]>>,
+    default: () => ({})
+  }
+})
+const emit = defineEmits(['success', 'close'])
+const formRef = shallowRef<FormInstance>()
+const popupRef = shallowRef<InstanceType<typeof Popup>>()
+const mode = ref('add')
+const popupTitle = computed(() => {
+  return mode.value == 'edit' ? '编辑值班信息' : '新增值班'
+})
+
+const formData = reactive({
+  startTime: '',
+  departId: '',
+  departName: '',
+  policeName: '',
+  mobile: '',
+  typeName: '',
+  empNo: '',
+  endTime: '',
+  deptType: ''
+})
+
+const { optionsData } = useDictOptions<{
+  deptTypes: any[],
+  policeList: any[],
+  dept: any[]
+}>({
+  dept: {
+    api: deptLists
+  },
+  deptTypes: {
+    api: dictDataLists,
+    params: {
+      dictType: 'dept_type'
+    }
+  },
+})
+
+
+
+
+
+const formRules = {
+
+  departId: [
+    {
+      required: true,
+      message: '请输入',
+      trigger: ['blur']
+    }
+  ],
+
+
+  empNo: [
+    {
+      required: true,
+      message: '请输入',
+      trigger: ['blur']
+    }
+  ],
+  startTime: [
+    {
+      required: true,
+      message: '请选择',
+      trigger: ['blur']
+    }
+  ],
+  endTime: [
+    {
+      required: true,
+      message: '请选择',
+      trigger: ['blur']
+    }
+  ],
+  deptType: [
+    {
+      required: true,
+      message: '请选择',
+      trigger: ['blur']
+    }
+  ],
+
+
+
+}
+
+const handleSubmit = async () => {
+  await formRef.value?.validate()
+  const data: any = { ...formData }
+  mode.value == 'edit' ? await dutyEdit(data) : await dutyAdd(data)
+  popupRef.value?.close()
+  feedback.msgSuccess('操作成功')
+  emit('success')
+}
+
+
+
+const open = (type = 'add') => {
+  mode.value = type
+  popupRef.value?.open()
+}
+
+const setFormData = async (data: Record<string, any>) => {
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      if(key=='departId'){
+        formData[key]= parseInt( data[key])
+      }else{
+        formData[key] = data[key]
+      }
+
+
+
+    }
+  }
+
+}
+
+const getDetail = async (row: Record<string, any>) => {
+  const data = await dutyDetail({
+    id: row.id
+  })
+  setFormData(data)
+}
+const searchPoliceUser = (query: string) => {
+  if (query) {
+    setTimeout(() => {
+      console.log(query)
+      const params= {
+        searchName: query
+      }
+      const  policeList   = searchPolice(params).then((res: any) => {
+        optionsData.policeList=res;
+        return Promise.resolve(res)
+      })
+          .catch((err: any) => {
+            return Promise.reject(err)
+          })
+
+
+    }, 200)
+  } else {
+    optionsData.policeList = []
+  }
+}
+
+
+const handleSelectChange = (newValue) => {
+  formData.empNo=newValue
+  console.log('选中的值：', newValue);
+};
+const handleClose = () => {
+  emit('close')
+}
+
+defineExpose({
+  open,
+  setFormData,
+  getDetail
+})
+</script>
diff --git a/src/views/datascreen/index.vue b/src/views/datascreen/index.vue
index fd9c76e..11b36ba 100644
--- a/src/views/datascreen/index.vue
+++ b/src/views/datascreen/index.vue
@@ -6,63 +6,18 @@
   <!--主体-->
   <div class="main clearfix">
     <div class="main-left">
+
+
+
       <div class="box-container">
         <div class="name-title" >
-         最新群众来信
+         群众动态
         </div>
         <div class="boxLeftMailCon">
           <ul class="mailUl">
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
-            </li>
-            <li>
-              <p>张三：1577000****<span class="mailULspan">待签收</span></p>
-              <p>2017-07-13 / 14:25:22 </p>
+            <li v-for="item in peopleMaillist" :key="item.id">
+              <p>{{ item.contactName }} ：{{ item.contactPhone }}<span class="mailULspan">{{ item.mailState }}</span></p>
+              <p>{{ formatDate(item.createTime) }}</p>
             </li>
           </ul>
         </div>
@@ -72,89 +27,57 @@
         <div class="name-title">
          分县市局三率排名
         </div>
-        <div id="graduateyear">
+        <div id="graduate">
           <el-tabs v-model="rateActiveName" class="echart-tabs"  @tab-click="rateResetTimer"   type="card"  >
             <el-tab-pane label="办结率" name="completionRate">
               <div class="ratesbox rates">
                 <ul class="h100">
-                  <li>
-                    <span>岳麓分局</span>
-                    <div class="ratenav">
-                      <div class="ratebar"><span style="width:60%"></span></div>
-                    </div>
-                    <div class="ratesum">
-                      <p>22%<span class="ratespan"><i>157 / </i>700</span></p>
-                    </div>
-                  </li>
-                  <li>
-                    <span>岳麓分局</span>
+                  <li v-for="item in completeList" :key="item.id">
+                    <span>{{ item.name }}</span>
                     <div class="ratenav">
-                      <div class="ratebar"><span style="width:100%"></span></div>
+                      <div class="ratebar"><span  :style="{ width: item.rate }"></span></div>
                     </div>
                     <div class="ratesum">
-                      <p>22%<span class="ratespan"><i>157/</i>700</span></p>
+                      <p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum }}</span></p>
                     </div>
                   </li>
-                  <li>
-                    <span>岳麓分局</span>
-                    <div class="ratenav">
-                      <div class="ratebar"><span style="width:90%"></span></div>
-                    </div>
-                    <div class="ratesum">
-                      <p>22%<span class="ratespan"><i>157/</i>700</span></p>
-                    </div>
-                  </li>
-                  <li>
-                    <span>岳麓分局</span>
-                    <div class="ratenav">
-                      <div class="ratebar"><span style="width:90%"></span></div>
-                    </div>
-                    <div class="ratesum">
-                      <p>22%<span class="ratespan"><i>157/</i>700</span></p>
-                    </div>
-                  </li>
-                  <li>
-                    <span>岳麓分局</span>
-                    <div class="ratenav">
-                      <div class="ratebar"><span style="width:90%"></span></div>
-                    </div>
-                    <div class="ratesum">
-                      <p>22%<span class="ratespan"><i>157/</i>700</span></p>
-                    </div>
-                  </li>
-                  <li>
-                    <span>岳麓分局</span>
-                    <div class="ratenav">
-                      <div class="ratebar"><span style="width:90%"></span></div>
-                    </div>
-                    <div class="ratesum">
-                      <p>22%<span class="ratespan"><i>157/</i>700</span></p>
-                    </div>
-                  </li>
-                  <li>
-                    <span>岳麓分局</span>
+                </ul>
+
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="解决率" name="resolutionRate">
+              <div class="ratesbox rates">
+                <ul class="h100">
+                  <li v-for="item in rateMap.resolvedList" :key="item.id">
+                    <span>{{ item.name }}</span>
                     <div class="ratenav">
-                      <div class="ratebar"><span style="width:90%"></span></div>
+                      <div class="ratebar"><span  :style="{ width: item.rate }"></span></div>
                     </div>
                     <div class="ratesum">
-                      <p>22%<span class="ratespan"><i>157/</i>700</span></p>
+                      <p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum }}</span></p>
                     </div>
                   </li>
-                  <li>
-                    <span>岳麓分局</span>
+                </ul>
+
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="满意率" name="satisfactionRate">
+              <div class="ratesbox rates">
+                <ul class="h100">
+                  <li v-for="item in rateMap.satisfiedList" :key="item.id">
+                    <span>{{ item.name }}</span>
                     <div class="ratenav">
-                      <div class="ratebar"><span style="width:90%"></span></div>
+                      <div class="ratebar"><span  :style="{ width: item.rate }"></span></div>
                     </div>
                     <div class="ratesum">
-                      <p>22%<span class="ratespan"><i>157/</i>700</span></p>
+                      <p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum }}</span></p>
                     </div>
                   </li>
                 </ul>
 
               </div>
+
             </el-tab-pane>
-            <el-tab-pane label="解决率" name="resolutionRate">Role</el-tab-pane>
-            <el-tab-pane label="满意率" name="satisfactionRate">Role</el-tab-pane>
           </el-tabs>
 
         </div>
@@ -165,12 +88,12 @@
       <div class="border-console  ">
         <div class="console-div">
           <ul class="clearfix">
-            <li><h2 class="bulebg">1824</h2><span>今日来信</span></li>
-            <li><h2 class="yellowbg">1920</h2><span>来信总数</span></li>
-            <li><h2 class="bulebg">19%</h2><span>办结总数</span></li>
-            <li><h2 class="yellowbg">19%</h2><span>办结率</span></li>
-            <li><h2 class="bulebg">19%</h2><span>满意率</span></li>
-            <li><h2 class="bulebg">19%</h2><span>解决率</span></li>
+            <li><h2 class="bulebg">{{ consoleMap.todaySum }}</h2><span>今日来信</span></li>
+            <li><h2 class="yellowbg">{{ consoleMap.allSum }}</h2><span>来信总数</span></li>
+            <li><h2 class="bulebg">{{ consoleMap.completed }}</h2><span>办结总数</span></li>
+            <li><h2 class="yellowbg">{{ consoleMap.completedrate }}</h2><span>办结率</span></li>
+            <li><h2 class="bulebg">{{ consoleMap.satisfiedrate }}</h2><span>满意率</span></li>
+            <li><h2 class="bulebg">{{ consoleMap.resolvedrate }}</h2><span>解决率</span></li>
           </ul>
         </div>
 
@@ -182,19 +105,71 @@
         <div class="name-title">
          来信趋势
         </div>
+        <div v-if="seenDay" class="trendOptions">
+          <el-select
+              v-model="trendDayValue"
+              class="m-2"
+              :placeholder="selectTrend"
+              size="small"
+              style="width: 100px;z-index: 9999"
+              @change="getMailTrend"
+          >
+            <el-option
+                v-for="item in trendDayOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div v-if="seenWeek" class="trendOptions">
+          <el-select
+              v-model="trendWeekValue"
+              class="m-2"
+              :placeholder="selectTrend"
+              size="small"
+              style="width: 100px;z-index: 9999"
+              @change="getMailTrend"
+          >
+            <el-option
+                v-for="item in trendWeekOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </div>
+
+        <div v-if="seenMonth" class="trendOptions">
+          <el-select
+              v-model="trendMonthValue"
+              class="m-2"
+              :placeholder="selectTrend"
+              size="small"
+              style="width: 100px;z-index: 9999"
+              @change="getMailTrend"
+          >
+            <el-option
+                v-for="item in trendMonthOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </div>
 
         <div ref="tabsContainer">
 
-			<el-tabs  v-model="trendActiveName" class="trend-tabs"  type="card"  @tab-click="trendResetTimer">
+			<el-tabs  v-model="trendActiveName" class="trend-tabs"  type="card"  @tab-click="trendResetTimer" >
             <el-tab-pane label="按天计算" name="dayTrend">
               <div ref="day_echart" id="dayEchart" :style="{ width: chartWidth + 'px' }"></div>
             </el-tab-pane>
-            <el-tab-pane label="按月计算" name="monthTrend" >
-              <div ref="month_echart" id="monthEchart" :style="{ width: chartWidth + 'px' }"  ></div>
-            </el-tab-pane>
-            <el-tab-pane label="按年计算" name="yearTrend"  >
-              <div ref="year_echart" id="yearEchart" :style="{ width: chartWidth + 'px' }"  ></div>
+            <el-tab-pane label="按周计算" name="weekTrend"  >
+              <div ref="week_echart" id="weekEchart" :style="{ width: chartWidth + 'px' }"  ></div>
             </el-tab-pane>
+        <el-tab-pane label="按月计算" name="monthTrend" >
+          <div ref="month_echart" id="monthEchart" :style="{ width: chartWidth + 'px' }"  ></div>
+        </el-tab-pane>
           </el-tabs>
         </div>
 
@@ -210,46 +185,39 @@
             <el-tab-pane label="市局专班" name="dutySj">
               <div class="boxRightMailCon">
                 <ul class="dutyUl">
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
-                  </li>
-                  <li>
-                    <p><span class="dutyDept">市局专班</span> <span class="dutyULspan">15773001123</span> <span class="dutyULspan">张胜男</span></p>
+                  <li v-for="item in dutySjList" :key="item.id">
+                    <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
                   </li>
+
                 </ul>
               </div>
 
             </el-tab-pane>
-            <el-tab-pane label="分县市局" name="dutyFj">Role</el-tab-pane>
-            <el-tab-pane label="支队" name="dutyZd">Role</el-tab-pane>
-            <el-tab-pane label="部委组警校" name="dutyBw">Role</el-tab-pane>
+            <el-tab-pane label="分县市局" name="dutyFj">
+              <ul class="dutyUl">
+                <li v-for="item in dutyList.dutyFjList" :key="item.id">
+                  <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
+                </li>
+
+              </ul>
+
+            </el-tab-pane>
+            <el-tab-pane label="支队" name="dutyZd">
+              <ul class="dutyUl">
+                <li v-for="item in dutyList.dutyZdList" :key="item.id">
+                  <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
+                </li>
+
+              </ul>
+            </el-tab-pane>
+            <el-tab-pane label="部委组警校" name="dutyBw">
+              <ul class="dutyUl">
+                <li v-for="item in dutyList.dutyBwList" :key="item.id">
+                  <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
+                </li>
+
+              </ul>
+            </el-tab-pane>
           </el-tabs>
         </div>
       </div>
@@ -259,93 +227,30 @@
         </div>
         <div class=" boxnav paim">
           <ul class="h100">
-            <li>
-              <span>1</span>
-              <div class="pmnav">
-                <p>标题名称标题名称标题名称标题名称</p>
-                <div class="pmbar"><span style="width:100%"></span><i></i></div>
-              </div>
-              <div class="pmsum">
-                <p>22%</p>
-              </div>
-            </li>
-            <li>
-              <span>2</span>
+            <li v-for="item in mailTypeRankList" :key="item.id">
+              <span>{{item.rownumber}}</span>
               <div class="pmnav">
-                <p>标题名称</p>
-                <div class="pmbar"><span style="width:92%"></span></div>
+                <p>{{ item.category }}</p>
+                <div class="pmbar"><span :style="{ width: item.countrate }"></span><i></i></div>
               </div>
               <div class="pmsum">
-                <p>22%</p>
-              </div>
-            </li>
-            <li>
-              <span>3</span>
-              <div class="pmnav">
-                <p>标题名称</p>
-                <div class="pmbar"><span style="width:90%"></span><i></i></div>
-              </div>
-              <div class="pmsum">
-                <p>22%</p>
-              </div>
-            </li>
-            <li>
-              <span>4</span>
-              <div class="pmnav">
-                <p>标题名称</p>
-                <div class="pmbar"><span style="width:88%"></span><i></i></div>
-              </div>
-              <div class="pmsum">
-                <p>22%</p>
-              </div>
-            </li>
-            <li>
-              <span>2</span>
-              <div class="pmnav">
-                <p>标题名称</p>
-                <div class="pmbar"><span style="width:92%"></span></div>
-              </div>
-              <div class="pmsum">
-                <p>22%</p>
-              </div>
-            </li>
-            <li>
-              <span>3</span>
-              <div class="pmnav">
-                <p>标题名称</p>
-                <div class="pmbar"><span style="width:90%"></span><i></i></div>
-              </div>
-              <div class="pmsum">
-                <p>22%</p>
-              </div>
-            </li>
-            <li>
-              <span>4</span>
-              <div class="pmnav">
-                <p>标题名称</p>
-                <div class="pmbar"><span style="width:88%"></span><i></i></div>
-              </div>
-              <div class="pmsum">
-                <p>22%</p>
-              </div>
-            </li>
-            <li>
-              <span>2</span>
-              <div class="pmnav">
-                <p>标题名称</p>
-                <div class="pmbar"><span style="width:92%"></span></div>
-              </div>
-              <div class="pmsum">
-                <p>22%</p>
+                <p>{{item.sumcount}}</p>
               </div>
             </li>
 
+
           </ul>
 
         </div>
       </div>
 
     </div>
+	  <edit-popup
+            v-if="showDetails"
+            ref="detailsRef"
+           
+            @close="showDetails = false"
+        />
   </div>
 </template>
 <style>
@@ -353,19 +258,33 @@
 
 </style>
 <script lang="ts" setup>
-import { ref,onMounted,watch ,onBeforeUpdate ,onUnmounted} from 'vue'
+import { ref,onMounted,watch ,onBeforeUpdate ,onBeforeMount,onUnmounted} from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import * as echarts from 'echarts';
 import chinaJSON from "./changsha.json";
 import yuhuaJSON from "@/static/430111.json";
-
+import { peopleMail, dutyDay ,threeRate,consoleData,mailTypeRank,mailTrend,mapCountyData} from '@/api/datascreen'
 import { useRouter } from "vue-router";
+import {menuLists} from "~/api/perms/menu.ts";
+import DetailsPopup from './details.vue'
+const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
+const showDetails = ref(false)
 const router = useRouter();
 
 const rateActiveName = ref('completionRate')
 const trendActiveName = ref('dayTrend')
 const dutyActiveName = ref('dutySj')
 
+let peopleMaillist=  ref([]);
+let dutyList =  ref([]);
+let typeRankList=  ref([]);
+let rateMap =  ref([]);
+let mailTrendMap =  ref([]);
+let consoleMap =  ref([]);
+let mailTypeRankList= reactive([]) as any[];
+let completeList =  reactive([]) as any[];
+let dutySjList=  reactive([]) as any[];
+
 const intervalTimeRate = 3500; // 自动切换的间隔时间，单位为毫秒
 const intervalTimeTrend = 3000; // 自动切换的间隔时间，单位为毫秒
 const intervalTimeDuty = 3200; // 自动切换的间隔时间，单位为毫秒
@@ -373,9 +292,16 @@ let intervalIdRate: NodeJS.Timeout | null = null;
 let intervalIdTrend: NodeJS.Timeout | null = null;
 let intervalIdDuty: NodeJS.Timeout | null = null;
 
-
+let dayXList=  reactive([]) as any[];
+let dayYList=  reactive([]) as any[];
+let weekXList=  reactive([]) as any[];
+let weekYList=  reactive([]) as any[];
+let monthXList=  reactive([]) as any[];
+let monthYList=  reactive([]) as any[];
 let map = ref('map');
 
+
+let mapDataList=  reactive([]) as any[];
 let dataIndex=0
 
 let currentIndex = 0;
@@ -384,20 +310,155 @@ const tabsContainer = ref(null);
 
 let day_echart = ref(null);
 let month_echart = ref(null);
-let year_echart = ref(null);
+let week_echart = ref(null);
+
+let trendDayValue = ref('15')
+let trendWeekValue = ref('7')
+let trendMonthValue = ref('2024')
+const selectTrend= "请选择"
+let seenDay=true
+let seenWeek=false
+let seenMonth=false
+
+let trendDayOptions = [
+  {
+    value: '15',
+    label: '最近15天',
+  },
+  {
+    value: '30',
+    label: '最近30天',
+  }
+]
+
+let trendWeekOptions = [
+
+  {
+    value: '7',
+    label: '最近7周',
+  },
+  {
+    value: '15',
+    label: '最近15周',
+  }
+]
+
+let trendMonthOptions =reactive([]) as any[];
 
+const selectYear = (year) =>{
+  var myDate= new Date();
+  var startYear=myDate.getFullYear()-year;//起始年份
+  var endYear=myDate.getFullYear();//结束年份
+  for (var i=startYear;i<=endYear;i++) {
+    var obj = {"value":i,"label":i};
+    trendMonthOptions.push(obj);
+  }
+}
+
+//console大屏数据
+const getConsoleDataMap = async () => {
+  try {
+    consoleMap = await consoleData()
+ 
+  } catch (error) {
+  }
+}
+
+//类型排行
+const getMailTypeRankList = async () => {
+  try {
+    typeRankList = await mailTypeRank()
+   
+    typeRankList.forEach((element: any) => {
+      mailTypeRankList.push(element);//循环赋值
+    });
+  } catch (error) {
+  }
+}
+
+//获取最近来信
+const getPopleMailLists = async () => {
+  try {
+    peopleMaillist = await peopleMail()
+  } catch (error) {
+  }
+}
+
+//获取今日值班
+const getDutyDay = async () => {
+  try {
+       dutyList = await dutyDay()
+    dutyList.dutySjList.forEach((element: any) => {
+      dutySjList.push(element);//循环赋值
+    });
+  } catch (error) {
+  }
+}
+const getThreeRate= async () => {
+  try {
+    rateMap = await threeRate()
+    rateMap.completeList.forEach((element: any) => {
+      completeList.push(element);//循环赋值
+    });
+  } catch (error) {
+  }
+}
+
+const getMailTrend= async () => {
+  try {
+    const params = reactive({
+      day: trendDayValue.value,
+      week: trendWeekValue.value,
+      year: trendMonthValue.value
+    })
+    mailTrendMap = await mailTrend(params)
+
+    dayXList=mailTrendMap.dayXList
+    dayYList=mailTrendMap.dayYList;
+    dayEcharts()
+      weekXList=mailTrendMap.weekXList;
+      weekYList= mailTrendMap.weekYList;
+    weekEcharts()
+      monthXList= mailTrendMap.monthXList;
+      monthYList=mailTrendMap.monthYList;
+     monthEcharts()
+  } catch (error) {
+  }
+}
+
+const getMapDataList = async () => {
+ try {
+    
+    mapDataList = await mapCountyData()
+	changsMap()
+  } catch (error) {
+  }
+}
 
 onMounted(() => {
+  selectYear(10)
+
+  getThreeRate();
+  getPopleMailLists();
+  getDutyDay();
+  getMailTypeRankList();
+  getMailTrend();
+  getMapDataList()
+  getConsoleDataMap()
   startRateAutoSwitch();
   startTrendAutoSwitch();
   startDutyAutoSwitch();
-  changsMap()
   dayEcharts()
+  changsMap()
+
+
   const width = tabsContainer.value.offsetWidth - 40;
   chartWidth= width;
 
 });
 
+ 
+
 // 在组件卸载前清除计时器
 onUnmounted(() => {
   clearRateTimer()
@@ -406,7 +467,10 @@ onUnmounted(() => {
 });
 
 
-
+const formatDate=(value)=>{
+  const date = new Date(value);
+  return date.toLocaleString();
+}
 const startRateAutoSwitch = () => {
   intervalIdRate = setInterval(() => {
     if (rateActiveName.value === 'completionRate') {
@@ -422,19 +486,28 @@ const startRateAutoSwitch = () => {
 const startTrendAutoSwitch = () => {
   var dayChart = echarts.init(day_echart.value);
    var monthChart = echarts.init(month_echart.value);
-  var yearChart = echarts.init(year_echart.value);
+  var weekChart = echarts.init(week_echart.value);
   monthChart.resize(chartWidth)
   dayChart.resize(chartWidth)
-  yearChart.resize(chartWidth)
+  weekChart.resize(chartWidth)
   intervalIdTrend = setInterval(() => {
     if (trendActiveName.value === 'dayTrend') {
+      trendActiveName.value = 'weekTrend';
+        seenDay=false
+        seenWeek=true
+        seenMonth=false
+        weekEcharts()
+    } else if (trendActiveName.value === 'weekTrend') {
       trendActiveName.value = 'monthTrend';
+      seenDay=false
+      seenWeek=false
+      seenMonth=true
       monthEcharts()
-    } else if (trendActiveName.value === 'monthTrend') {
-      trendActiveName.value = 'yearTrend';
-      yearEcharts()
     } else {
       trendActiveName.value = 'dayTrend';
+      seenDay=true
+      seenWeek=false
+      seenMonth=false
       dayEcharts()
     }
   }, intervalTimeTrend);
@@ -484,11 +557,25 @@ const rateResetTimer = () => {
 };
 
 
-const trendResetTimer = () => {
+const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
   const width = tabsContainer.value.offsetWidth ;
   chartWidth= width;
+  if (pane.paneName === 'dayTrend') {
+    seenDay=true
+    seenWeek=false
+    seenMonth=false
+  } else if (pane.paneName === 'weekTrend') {
+    seenDay=false
+    seenWeek=true
+    seenMonth=false
+  } else {
+    seenDay=false
+    seenWeek=false
+    seenMonth=true
+  }
+  dayEcharts()
   monthEcharts()
-  yearEcharts()
+  weekEcharts()
   clearTrendTimer();
   startTrendAutoSwitch();
 };
@@ -514,7 +601,30 @@ const changsMap = () =>{
     },
     tooltip: {
       trigger: 'item',
-      formatter: '{b}<br/>{c} %'
+      position: 'right',
+      formatter: function(params){
+	  console.log(params)
+        var tt ='<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>解决率 <span>'+params.data.resolvedrate+'</span></li>'+
+        '<li>满意率 <span>'+params.data.satisfiedrate+'</span></li>'+
+       ' </ul></div></div>'
+        return tt;
+      },
+      backgroundColor: '#031577',      //
+      borderColor: '#0A2F86',
+      borderWidth: 0,                // 设置边框宽度为1像素
+      borderRadius: 3,               // 设置边框半径为3像素
+      shadowBlur: 0,                 // 设置阴影模糊程度为8像素
+      shadowOffsetX: 0,              // 设置水平阴影位移量为0像素
+      shadowOffsetY: 0,              // 设置垂直阴影位移量为6像素
+      
     },
     visualMap: {
       type: 'piecewise',
@@ -547,23 +657,13 @@ const changsMap = () =>{
           show: true,
           color: "white",
         },
-        data: [
-          { name: '芙蓉区', value: 87.34 },
-          { name:  '岳麓区', value: 65.48 },
-          { name: '雨花区', value: 87.1 },
-          { name: '开福区', value: 87.6 },
-          { name: '望城区', value: 23.49 },
-          { name: '天心区', value: 90.64 },
-          { name: '宁乡市', value: 87.1 },
-          { name: '浏阳市', value: 87.6 },
-          { name: '长沙县', value: 66.49 }
-        ],
+        data: mapDataList,
       }
     ]
   });
 
   myMap.on('click', function (params) {
-    console.log("Click event triggered!"+params.name);
+ 
     router.push({path:'/countyData',query:{name:params.name}});
   });
 
@@ -589,7 +689,7 @@ const switchRegion = () => {
 
      //mapData[prevIndex].selected = false; // 取消上一个区域的选中状态
     // mapData[currentIndex].selected = true; // 设置当前区域为选中状态
-    console.log(currentIndex)
+
     var hourIndex = 0;
     var carouselTime = null;
 
@@ -707,7 +807,7 @@ const dayEcharts=() => {
 
       },
 
-      data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
+      data: dayXList
 
     }, {
 
@@ -775,13 +875,14 @@ const dayEcharts=() => {
             borderWidth: 12
           }
         },
-        data: [3, 4, 9, 4, 3, 4, 3, 6, 2, 4, 2, 4,10, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
+        data: dayYList
 
       }
 
     ]
 
   };
+ 
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
   window.addEventListener("resize",function(){
@@ -834,7 +935,7 @@ const monthEcharts=() => {
 
       },
 
-      data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
+      data: monthXList
 
     }, {
 
@@ -902,7 +1003,7 @@ const monthEcharts=() => {
             borderWidth: 12
           }
         },
-        data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4,3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
+        data: monthYList
 
       }
 
@@ -918,9 +1019,9 @@ const monthEcharts=() => {
 }
 
 
-const yearEcharts=() => {
+const weekEcharts=() => {
   // 基于准备好的dom，初始化echarts实例
-  var myChart = echarts.init(year_echart.value);
+  var myChart = echarts.init(week_echart.value);
   let option1 = {
     tooltip: {
       trigger: 'axis',
@@ -963,7 +1064,7 @@ const yearEcharts=() => {
 
       },
 
-      data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
+      data:  weekXList
 
     }, {
 
@@ -1031,7 +1132,7 @@ const yearEcharts=() => {
             borderWidth: 12
           }
         },
-        data: [9, 4, 3, 4, 3, 4, 3, 6, 2, 9, 2, 4,3, 4, 3, 4,9, 4, 3, 6, 2, 4, 2, 4]
+        data: weekYList
 
       }
 
diff --git a/src/views/datascreen/tabs.vue b/src/views/datascreen/tabs.vue
deleted file mode 100644
index f27a46e..0000000
--- a/src/views/datascreen/tabs.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<template>
-  <div ref="echart5" id="echart5"style="width: 400px"></div>
-<!--    <el-tabs  v-model="activeName" class="trend-tabs"  type="card"  @tab-click="handleTabClick">-->
-<!--      <el-tab-pane label="按天计算" name="first3">-->
-<!--      -->
-<!--      </el-tab-pane>-->
-<!--      <el-tab-pane label="按月计算" name="third4">-->
-
-<!--      </el-tab-pane>-->
-<!--      <el-tab-pane label="按年计算" name="third15">-->
-
-<!--      </el-tab-pane>-->
-
-<!--    </el-tabs>-->
-</template>
-<style>
-@import 'assets/css/index.css';
-
-</style>
-<script lang="ts" setup>
-import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue';
-import * as echarts from 'echarts';
-import type {TabsPaneContext} from "element-plus";
-
-const activeName = ref('first3');
-const tabs = [
-  { name: 'tab1', label: 'Tab 1' },
-  { name: 'tab2', label: 'Tab 2' },
-  { name: 'tab3', label: 'Tab 3' }
-];
-const handleTabClick = (tab: TabsPaneContext, event: Event) => {
-  console.log("Click event triggered!"+tab.name);
-  //activeName = tab.props.name;
-}
-
-let echart_5 = ref('echart5');
-onMounted(() => {
-  echarts_5()
-
-});
-const echarts_5=() => {
-  // 基于准备好的dom，初始化echarts实例
-  var echartMap = echarts.init(echart_5.value);
-
-  var lightBlue = {
-    type: 'linear',
-    x: 0,
-    y: 0,
-    x2: 0,
-    y2: 1,
-    colorStops: [{
-      offset: 0,
-      color: 'rgba(41, 121, 255, 1)'
-    }, {
-      offset: 1,
-      color: 'rgba(0, 192, 255, 1)'
-    }],
-    globalCoord: false
-  }
-  let option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        lineStyle: {
-          color: '#dddc6b'
-        }
-      }
-    },
-    legend: {
-      top:'0%',
-      right: '0%',
-      data:['信件数'],
-      textStyle: {
-        color: 'rgba(255,255,255,.5)',
-        fontSize:'12',
-      }
-    },
-    grid: {
-      left: '10',
-      top: '30',
-      right: '10',
-      bottom: '10',
-      containLabel: true
-    },
-
-    xAxis: [{
-      type: 'category',
-      boundaryGap: false,
-      axisLabel:  {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize:12,
-        },
-      },
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.2)'
-        }
-
-      },
-
-      data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
-
-    }, {
-
-      axisPointer: {show: false},
-      axisLine: {  show: false},
-      position: 'bottom',
-      offset: 20,
-
-
-
-    }],
-
-    yAxis: [{
-      type: 'value',
-      axisTick: {show: false},
-      axisLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      },
-      axisLabel:  {
-        textStyle: {
-          color: "rgba(255,255,255,.6)",
-          fontSize:12,
-        },
-      },
-
-      splitLine: {
-        lineStyle: {
-          color: 'rgba(255,255,255,.1)'
-        }
-      }
-    }],
-    series: [
-      {
-        name: '信件数',
-        type: 'line',
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 5,
-        showSymbol: false,
-        lineStyle: {
-
-          normal: {
-            color: '#0184d5',
-            width: 2
-          }
-        },
-        areaStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-              offset: 0,
-              color: 'rgba(1, 132, 213, 0.4)'
-            }, {
-              offset: 0.8,
-              color: 'rgba(1, 132, 213, 0.1)'
-            }], false),
-            shadowColor: 'rgba(0, 0, 0, 0.1)',
-          }
-        },
-        itemStyle: {
-          normal: {
-            color: '#0184d5',
-            borderColor: 'rgba(221, 220, 107, .1)',
-            borderWidth: 12
-          }
-        },
-        data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4,3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
-
-      }
-
-    ]
-
-  };
-
-  // 使用刚指定的配置项和数据显示图表。
-  echartMap.setOption(option);
-  window.addEventListener("resize",function(){
-    echartMap.resize();
-  });
-}
-</script>
-
-<style scoped>
-/* 样式定义 */
-</style>