police-mailbox
/
mailbox-lan-vue
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: police-mailbox:d513e1567d5852bf17bfdc13c0e746c67c687955
Branches Tags
police-mailbox:master
police-mailbox:厅长信箱
...
compare: police-mailbox:e473b93c3cbf4e99c9a7167383b55e7d6d631d0a
Branches Tags
police-mailbox:master
police-mailbox:厅长信箱

2 Commits
d513e1567d ... e473b93c3c

Author SHA1 Message Date
21819 e473b93c3c Merge branch 'master' of http://gitea.biutag.com/police-mailbox/mailbox-lan-vue
2 years ago
21819 9694b645b1 大屏样式调整以及轮播地图调整
2 years ago
7 changed files with 394 additions and 379 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 464
      src/views/datascreen/countyData.vue
  2. 242
      src/views/datascreen/index.vue
  3. 11
      src/views/work/Dissatisfied.vue
  4. 11
      src/views/work/Done.vue
  5. 11
      src/views/work/Fav.vue
  6. 23
      src/views/work/Query.vue
  7. 11
      src/views/work/Todo.vue

464
src/views/datascreen/countyData.vue
Unescape View File

@ -11,13 +11,14 @@
<div class="name-title"> <div class="name-title">
今日值班 今日值班
</div> </div>
<div > <div>
<el-tabs v-model="dutyActiveName" class="echart-tabs" type="card" @tab-click="dutyResetTimer"> <el-tabs v-model="dutyActiveName" class="echart-tabs" type="card" @tab-click="dutyResetTimer">
<el-tab-pane label="市局" name="dutySj"> <el-tab-pane label="市局" name="dutySj">
<div class="boxRightMailCon"> <div class="boxRightMailCon">
<ul class="dutyUl"> <ul class="dutyUl">
<li v-for="item in dutySjList" :key="item.id"> <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> <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li> </li>
</ul> </ul>
@ -27,7 +28,8 @@
<el-tab-pane label="本单位" name="dutyFj"> <el-tab-pane label="本单位" name="dutyFj">
<ul class="dutyUl"> <ul class="dutyUl">
<li v-for="item in dutyList.dutyFjList" :key="item.id"> <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> <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li> </li>
</ul> </ul>
@ -36,7 +38,8 @@
<el-tab-pane label="大队" name="dutyZd"> <el-tab-pane label="大队" name="dutyZd">
<ul class="dutyUl"> <ul class="dutyUl">
<li v-for="item in dutyList.dutyDdList" :key="item.id"> <li v-for="item in dutyList.dutyDdList" :key="item.id">
<p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p> <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li> </li>
</ul> </ul>
@ -44,7 +47,8 @@
<el-tab-pane label="派出所" name="dutyBw"> <el-tab-pane label="派出所" name="dutyBw">
<ul class="dutyUl"> <ul class="dutyUl">
<li v-for="item in dutyList.dutyPcsList" :key="item.id"> <li v-for="item in dutyList.dutyPcsList" :key="item.id">
<p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p> <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li> </li>
</ul> </ul>
@ -58,14 +62,14 @@
派出所三率排名 派出所三率排名
</div> </div>
<div id="graduate"> <div id="graduate">
<el-tabs v-model="rateActiveName" class="echart-tabs" @tab-click="rateResetTimer" type="card" > <el-tabs v-model="rateActiveName" class="echart-tabs" @tab-click="rateResetTimer" type="card">
<el-tab-pane label="办结率" name="completionRate"> <el-tab-pane label="办结率" name="completionRate">
<div class="ratesbox rates"> <div class="ratesbox rates">
<ul class="h100"> <ul class="h100">
<li v-for="item in completeList" :key="item.id"> <li v-for="item in completeList" :key="item.id">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<div class="ratenav"> <div class="ratenav">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div> <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div> </div>
<div class="ratesum"> <div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum }}</span></p> <p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum }}</span></p>
@ -81,7 +85,7 @@
<li v-for="item in rateMap.resolvedList" :key="item.id"> <li v-for="item in rateMap.resolvedList" :key="item.id">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<div class="ratenav"> <div class="ratenav">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div> <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div> </div>
<div class="ratesum"> <div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum }}</span></p> <p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum }}</span></p>
@ -97,7 +101,7 @@
<li v-for="item in rateMap.satisfiedList" :key="item.id"> <li v-for="item in rateMap.satisfiedList" :key="item.id">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<div class="ratenav"> <div class="ratenav">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div> <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div> </div>
<div class="ratesum"> <div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum }}</span></p> <p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum }}</span></p>
@ -118,12 +122,42 @@
<div class="border-console "> <div class="border-console ">
<div class="console-div"> <div class="console-div">
<ul class="clearfix"> <ul class="clearfix">
<li><h2 class="bulebg">{{ consoleMap.todaySum }}</h2><span>今日来信</span></li> <li>
<li><h2 class="yellowbg">{{ consoleMap.allSum }}</h2><span>来信总数</span></li> <h2 class="bulebg">{{ consoleMap.todaySum }}</h2><span>今日来信</span>
<li><h2 class="bulebg">{{ consoleMap.completed }}</h2><span>办结总数</span></li> </li>
<li><h2 class="yellowbg">{{ consoleMap.completedrate }}</h2><span>办结率</span></li> <li>
<li><h2 class="bulebg">{{ consoleMap.satisfiedrate }}</h2><span>满意率</span></li> <h2 class="yellowbg">{{ consoleMap.allSum }}</h2><span>来信总数</span>
<li><h2 class="bulebg">{{ consoleMap.resolvedrate }}</h2><span>解决率</span></li> </li>
<li>
<h2 class="bulebg">{{ consoleMap.completed }}</h2><span>办结总数</span>
</li>
<li>
<el-popover placement="right-start" title="办结率计算方式" :width="200" trigger="hover" show-after="700"
:content="completedrateContent" popper-class="custom-popover-style">
<template #reference>
<h2 class="yellowbg" v-show="consoleMap.completedrate">{{ consoleMap.completedrate }}</h2>
</template>
</el-popover>
<span>办结率</span>
</li>
<li>
<el-popover placement="right-start" title="满意率计算方式" :width="200" trigger="hover" show-after="700"
:content="satisfiedrateContent" popper-class="custom-popover-style">
<template #reference>
<h2 class="bulebg" v-show="consoleMap.satisfiedrate">{{ consoleMap.satisfiedrate }}</h2>
</template>
</el-popover>
<span>满意率</span>
</li>
<li>
<el-popover placement="right-start" title="解决率计算方式" :width="200" trigger="hover" show-after="700"
:content="resolvedrateContent" popper-class="custom-popover-style">
<template #reference>
<h2 class="yellowbg" v-show="consoleMap.resolvedrate">{{ consoleMap.resolvedrate }}</h2>
</template>
</el-popover>
<span>解决率</span>
</li>
</ul> </ul>
</div> </div>
@ -136,74 +170,37 @@
来信趋势 来信趋势
</div> </div>
<div v-if="seenDay" class="trendOptions"> <div v-if="seenDay" class="trendOptions">
<el-select <el-select v-model="trendDayValue" class="m-2" :placeholder="selectTrend" size="small"
v-model="trendDayValue" style="width: 100px;z-index: 3000;" @change="getMailTrend" popper-class="blueBack">
class="m-2" <el-option v-for="item in trendDayOptions" :key="item.value" :label="item.label" :value="item.value" />
:placeholder="selectTrend"
size="small"
style="width: 100px;z-index: 3000;"
@change="getMailTrend"
popper-class="blueBack"
>
<el-option
v-for="item in trendDayOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
<div v-if="seenWeek" class="trendOptions"> <div v-if="seenWeek" class="trendOptions">
<el-select <el-select v-model="trendWeekValue" class="m-2" :placeholder="selectTrend" size="small"
v-model="trendWeekValue" style="width: 100px;z-index: 3000" @change="getMailTrend" popper-class="blueBack">
class="m-2" <el-option v-for="item in trendWeekOptions" :key="item.value" :label="item.label" :value="item.value" />
:placeholder="selectTrend"
size="small"
style="width: 100px;z-index: 3000"
@change="getMailTrend"
popper-class="blueBack"
>
<el-option
v-for="item in trendWeekOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
<div v-if="seenMonth" class="trendOptions"> <div v-if="seenMonth" class="trendOptions">
<el-select <el-select v-model="trendMonthValue" class="m-2" :placeholder="selectTrend" size="small"
v-model="trendMonthValue" style="width: 100px;z-index: 3000" @change="getMailTrend" popper-class="blueBack">
class="m-2" <el-option v-for="item in trendMonthOptions" :key="item.value" :label="item.label" :value="item.value"
:placeholder="selectTrend" style="height:auto;max-height:300px;padding:0;" />
size="small"
style="width: 100px;z-index: 3000"
@change="getMailTrend"
popper-class="blueBack"
>
<el-option
v-for="item in trendMonthOptions"
:key="item.value"
:label="item.label"
:value="item.value"
style="height:auto;max-height:300px;padding:0;"
/>
</el-select> </el-select>
</div> </div>
<div ref="tabsContainer"> <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"> <el-tab-pane label="按天计算" name="dayTrend">
<div ref="day_echart" id="dayEchart" :style="{ width: chartWidth + 'px' }"></div> <div ref="day_echart" id="dayEchart" :style="{ width: chartWidth + 'px' }"></div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="按周计算" name="weekTrend" > <el-tab-pane label="按周计算" name="weekTrend">
<div ref="week_echart" id="weekEchart" :style="{ width: chartWidth + 'px' }" ></div> <div ref="week_echart" id="weekEchart" :style="{ width: chartWidth + 'px' }"></div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="按月计算" name="monthTrend" > <el-tab-pane label="按月计算" name="monthTrend">
<div ref="month_echart" id="monthEchart" :style="{ width: chartWidth + 'px' }" ></div> <div ref="month_echart" id="monthEchart" :style="{ width: chartWidth + 'px' }"></div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@ -212,13 +209,14 @@
</div> </div>
<div class="main-right"> <div class="main-right">
<div class="box-container"> <div class="box-container">
<div class="name-title" > <div class="name-title">
信件动态 信件动态
</div> </div>
<div class="boxLeftMailCon"> <div class="boxLeftMailCon">
<ul class="mailUl"> <ul class="mailUl">
<li v-for="item in peopleMaillist" :key="item.id" @click="queryDetails(item)"> <li v-for="item in peopleMaillist" :key="item.id" @click="queryDetails(item)">
<p>{{ item.contactName }} ：{{ item.contactPhone }}<span class="mailULspan">{{ item.mailState }}</span></p> <p>{{ item.contactName }} ：{{ item.contactPhone }}<span class="mailULspan">{{ item.mailState }}</span>
</p>
<p>{{ formatDate(item.createTime) }}</p> <p>{{ formatDate(item.createTime) }}</p>
</li> </li>
</ul> </ul>
@ -233,13 +231,13 @@
<div class=" boxnav paim"> <div class=" boxnav paim">
<ul class="h100"> <ul class="h100">
<li v-for="item in mailTypeRankList" :key="item.id"> <li v-for="item in mailTypeRankList" :key="item.id">
<span>{{item.rownumber}}</span> <span>{{ item.rownumber }}</span>
<div class="pmnav"> <div class="pmnav">
<p>{{ item.category }}</p> <p>{{ item.category }}</p>
<div class="pmbar"><span :style="{ width: item.countrate }"></span><i></i></div> <div class="pmbar"><span :style="{ width: item.countrate }"></span><i></i></div>
</div> </div>
<div class="pmsum"> <div class="pmsum">
<p>{{item.sumcount}}</p> <p>{{ item.sumcount }}</p>
</div> </div>
</li> </li>
@ -250,55 +248,78 @@
</div> </div>
</div> </div>
<details-popup <details-popup v-if="showDetails" ref="detailsRef" @success="closeDetails" @close="closeDetails" />
v-if="showDetails"
ref="detailsRef"
@success="closeDetails"
@close="closeDetails"
/>
</div> </div>
</div> </div>
</template> </template>
<style > <style>
@import 'assets/css/index.css'; @import 'assets/css/index.css';
body{
body {
background-color: #030b39; background-color: #030b39;
} }
.body{
background-image: url('@/assets/bg.png'); /* 背景图片的路径 */ .body {
background-size: cover; /* 背景图片大小适应容器 */
background-image: url('@/assets/bg.png');
/* 背景图片的路径 */
background-size: cover;
/* 背景图片大小适应容器 */
} }
.ratebar i{ line-height: 2rem; font-style: normal; padding-left: 1rem; color: #49bcf7; font-size: 1.6rem; } .ratebar i {
.ratenav{ line-height: 2rem;
font-style: normal;
padding-left: 1rem;
color: #49bcf7;
font-size: 1.6rem;
}
.ratenav {
/* width:calc(100% - 5rem)*/ /* width:calc(100% - 5rem)*/
width: 200px; width: 200px;
} }
.ratenav p{color: #fff; font-size: 1.5rem; padding-bottom: 0.5rem; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;} .ratenav p {
.rates li>span{width: 120px; height: 3rem;font-family: PingFang-SC-Regular; color: #fff;
font-size: 1.5rem;
padding-bottom: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rates li>span {
width: 120px;
height: 3rem;
font-family: PingFang-SC-Regular;
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
text-align: right; text-align: right;
font-weight: 400; line-height: 3rem; padding-right: 5px; border-radius: .05rem; margin-right: .1rem; } font-weight: 400;
.ratesum{ line-height: 3rem;
padding-right: 5px;
border-radius: .05rem;
margin-right: .1rem;
}
.ratesum {
font-size: 1.6rem; font-size: 1.6rem;
} }
</style> </style>
<script lang="ts" setup> <script lang="ts" setup>
import { ref,onMounted,watch ,onBeforeUpdate ,onBeforeMount,onUnmounted} from 'vue' import { ref, onMounted, watch, onBeforeUpdate, onBeforeMount, onUnmounted } from 'vue'
import type { TabsPaneContext } from 'element-plus' import type { TabsPaneContext } from 'element-plus'
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import chinaJSON from "./changsha.json"; import chinaJSON from "./changsha.json";
import yuhuaJSON from "@/static/430111.json"; import yuhuaJSON from "@/static/430111.json";
import { peopleMail, dutyDay ,threeRate,consoleData,mailTypeRank,mailTrend,mapCountyData,currentCountyMapJSON} from '@/api/datascreen' import { peopleMail, dutyDay, threeRate, consoleData, mailTypeRank, mailTrend, mapCountyData, currentCountyMapJSON } from '@/api/datascreen'
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import {menuLists} from "~/api/perms/menu.ts"; import { menuLists } from "~/api/perms/menu.ts";
import DetailsPopup from './details.vue' import DetailsPopup from './details.vue'
const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>() const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
const showDetails = ref(false) const showDetails = ref(false)
@ -309,17 +330,17 @@ const trendActiveName = ref('dayTrend')
const dutyActiveName = ref('dutySj') const dutyActiveName = ref('dutySj')
let currentParams= reactive([]) as any[]; let currentParams = reactive([]) as any[];
let currentMapJSON= reactive([]) as any[]; let currentMapJSON = reactive([]) as any[];
let peopleMaillist= ref([]); let peopleMaillist = ref([]);
let dutyList = ref([]); let dutyList = ref([]);
let typeRankList= ref([]); let typeRankList = ref([]);
let rateMap = ref([]); let rateMap = ref([]);
let mailTrendMap = ref([]); let mailTrendMap = ref([]);
let consoleMap = ref([]); let consoleMap = ref([]);
let mailTypeRankList= reactive([]) as any[]; let mailTypeRankList = reactive([]) as any[];
let completeList = reactive([]) as any[]; let completeList = reactive([]) as any[];
let dutySjList= reactive([]) as any[]; let dutySjList = reactive([]) as any[];
const intervalTimeRate = 3500; // 自动切换的间隔时间，单位为毫秒 const intervalTimeRate = 3500; // 自动切换的间隔时间，单位为毫秒
const intervalTimeTrend = 3000; // 自动切换的间隔时间，单位为毫秒 const intervalTimeTrend = 3000; // 自动切换的间隔时间，单位为毫秒
@ -328,22 +349,22 @@ let intervalIdRate: NodeJS.Timeout | null = null;
let intervalIdTrend: NodeJS.Timeout | null = null; let intervalIdTrend: NodeJS.Timeout | null = null;
let intervalIdDuty: NodeJS.Timeout | null = null; let intervalIdDuty: NodeJS.Timeout | null = null;
let carouselTime : NodeJS.Timeout | null = null; let carouselTime: NodeJS.Timeout | null = null;
let dayXList= reactive([]) as any[]; let dayXList = reactive([]) as any[];
let dayYList= reactive([]) as any[]; let dayYList = reactive([]) as any[];
let weekXList= reactive([]) as any[]; let weekXList = reactive([]) as any[];
let weekYList= reactive([]) as any[]; let weekYList = reactive([]) as any[];
let monthXList= reactive([]) as any[]; let monthXList = reactive([]) as any[];
let monthYList= reactive([]) as any[]; let monthYList = reactive([]) as any[];
let map = ref('map'); let map = ref('map');
let mapDataList= reactive([]) as any[]; let mapDataList = reactive([]) as any[];
let dataIndex=0 let dataIndex = 0
let currentIndex = 0; let currentIndex = 0;
let chartWidth=900; let chartWidth = 900;
const tabsContainer = ref(null); const tabsContainer = ref(null);
let day_echart = ref(null); let day_echart = ref(null);
@ -353,11 +374,11 @@ let week_echart = ref(null);
let trendDayValue = ref('15') let trendDayValue = ref('15')
let trendWeekValue = ref('7') let trendWeekValue = ref('7')
let trendMonthValue = ref('2024') let trendMonthValue = ref('2024')
const selectTrend= "请选择" const selectTrend = "请选择"
let seenDay=true let seenDay = true
let seenWeek=false let seenWeek = false
let seenMonth=false let seenMonth = false
let mapShow=true let mapShow = true
let trendDayOptions = [ let trendDayOptions = [
{ {
value: '15', value: '15',
@ -381,14 +402,14 @@ let trendWeekOptions = [
} }
] ]
let trendMonthOptions =reactive([]) as any[]; let trendMonthOptions = reactive([]) as any[];
const selectYear = (year) =>{ const selectYear = (year) => {
var myDate= new Date(); var myDate = new Date();
var startYear=myDate.getFullYear()-year;//起始年份 var startYear = myDate.getFullYear() - year;//起始年份
var endYear=myDate.getFullYear();//结束年份 var endYear = myDate.getFullYear();//结束年份
for (var i=startYear;i<=endYear;i++) { for (var i = startYear; i <= endYear; i++) {
var obj = {"value":i,"label":i}; var obj = { "value": i, "label": i };
trendMonthOptions.push(obj); trendMonthOptions.push(obj);
} }
} }
@ -397,6 +418,9 @@ const selectYear = (year) =>{
const getConsoleDataMap = async () => { const getConsoleDataMap = async () => {
try { try {
consoleMap = await consoleData(currentParams) consoleMap = await consoleData(currentParams)
completedrateContent.value = '办结率=解决数/已办结数\n' + consoleMap.value.completedrate + '=' + consoleMap.value.completed + '/' + consoleMap.value.completedsum
satisfiedrateContent.value = '满意率=满意数/已办结数\n' + consoleMap.value.satisfiedrate + '=' + consoleMap.value.satisfied + '/' + consoleMap.value.satisfiedsum
resolvedrateContent.value = '解决率=解决数/来信总数\n' + consoleMap.value.resolvedrate + '=' + consoleMap.value.resolved + '/' + consoleMap.value.resolvedsum
} catch (error) { } catch (error) {
} }
@ -440,7 +464,7 @@ const getDutyDay = async () => {
} catch (error) { } catch (error) {
} }
} }
const getThreeRate= async () => { const getThreeRate = async () => {
try { try {
rateMap = await threeRate(currentParams) rateMap = await threeRate(currentParams)
rateMap.completeList.forEach((element: any) => { rateMap.completeList.forEach((element: any) => {
@ -450,7 +474,7 @@ const getThreeRate= async () => {
} }
} }
const getMailTrend= async () => { const getMailTrend = async () => {
try { try {
const params = reactive({ const params = reactive({
day: trendDayValue.value, day: trendDayValue.value,
@ -460,14 +484,14 @@ const getMailTrend= async () => {
}) })
mailTrendMap = await mailTrend(params) mailTrendMap = await mailTrend(params)
dayXList=mailTrendMap.dayXList dayXList = mailTrendMap.dayXList
dayYList=mailTrendMap.dayYList; dayYList = mailTrendMap.dayYList;
dayEcharts() dayEcharts()
weekXList=mailTrendMap.weekXList; weekXList = mailTrendMap.weekXList;
weekYList= mailTrendMap.weekYList; weekYList = mailTrendMap.weekYList;
weekEcharts() weekEcharts()
monthXList= mailTrendMap.monthXList; monthXList = mailTrendMap.monthXList;
monthYList=mailTrendMap.monthYList; monthYList = mailTrendMap.monthYList;
monthEcharts() monthEcharts()
} catch (error) { } catch (error) {
} }
@ -490,7 +514,7 @@ onMounted(() => {
// let r = window.location.href.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配 // let r = window.location.href.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
// let context = ''; // let context = '';
// if (r) context = r[2]; // if (r) context = r[2];
currentParams=router.currentRoute.value.query currentParams = router.currentRoute.value.query
selectYear(10) selectYear(10)
getCurrentMapJSON() getCurrentMapJSON()
getThreeRate(); getThreeRate();
@ -505,7 +529,7 @@ onMounted(() => {
startDutyAutoSwitch(); startDutyAutoSwitch();
dayEcharts() dayEcharts()
const width = tabsContainer.value.offsetWidth - 40; const width = tabsContainer.value.offsetWidth - 40;
chartWidth= width; chartWidth = width;
}); });
@ -521,7 +545,7 @@ onUnmounted(() => {
}); });
const formatDate=(value)=>{ const formatDate = (value) => {
const date = new Date(value); const date = new Date(value);
return date.toLocaleString(); return date.toLocaleString();
} }
@ -547,21 +571,21 @@ const startTrendAutoSwitch = () => {
intervalIdTrend = setInterval(() => { intervalIdTrend = setInterval(() => {
if (trendActiveName.value === 'dayTrend') { if (trendActiveName.value === 'dayTrend') {
trendActiveName.value = 'weekTrend'; trendActiveName.value = 'weekTrend';
seenDay=false seenDay = false
seenWeek=true seenWeek = true
seenMonth=false seenMonth = false
weekEcharts() weekEcharts()
} else if (trendActiveName.value === 'weekTrend') { } else if (trendActiveName.value === 'weekTrend') {
trendActiveName.value = 'monthTrend'; trendActiveName.value = 'monthTrend';
seenDay=false seenDay = false
seenWeek=false seenWeek = false
seenMonth=true seenMonth = true
monthEcharts() monthEcharts()
} else { } else {
trendActiveName.value = 'dayTrend'; trendActiveName.value = 'dayTrend';
seenDay=true seenDay = true
seenWeek=false seenWeek = false
seenMonth=false seenMonth = false
dayEcharts() dayEcharts()
} }
}, intervalTimeTrend); }, intervalTimeTrend);
@ -609,28 +633,28 @@ const clearDutyTimer = () => {
} }
}; };
const rateResetTimer = () => { const rateResetTimer = () => {
const width = tabsContainer.value.offsetWidth ; const width = tabsContainer.value.offsetWidth;
chartWidth= width; chartWidth = width;
clearRateTimer(); clearRateTimer();
startRateAutoSwitch(); startRateAutoSwitch();
}; };
const trendResetTimer = (pane: TabsPaneContext, ev: Event) => { const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
const width = tabsContainer.value.offsetWidth ; const width = tabsContainer.value.offsetWidth;
chartWidth= width; chartWidth = width;
if (pane.paneName === 'dayTrend') { if (pane.paneName === 'dayTrend') {
seenDay=true seenDay = true
seenWeek=false seenWeek = false
seenMonth=false seenMonth = false
} else if (pane.paneName === 'weekTrend') { } else if (pane.paneName === 'weekTrend') {
seenDay=false seenDay = false
seenWeek=true seenWeek = true
seenMonth=false seenMonth = false
} else { } else {
seenDay=false seenDay = false
seenWeek=false seenWeek = false
seenMonth=true seenMonth = true
} }
dayEcharts() dayEcharts()
monthEcharts() monthEcharts()
@ -640,8 +664,8 @@ const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
}; };
const dutyResetTimer = () => { const dutyResetTimer = () => {
const width = tabsContainer.value.offsetWidth ; const width = tabsContainer.value.offsetWidth;
chartWidth= width; chartWidth = width;
clearDutyTimer(); clearDutyTimer();
startDutyAutoSwitch(); startDutyAutoSwitch();
}; };
@ -649,9 +673,9 @@ const dutyResetTimer = () => {
const changsMap = () =>{ const changsMap = () => {
echarts.registerMap("map", currentMapJSON.geometry as any); echarts.registerMap("map", currentMapJSON.geometry as any);
let myMap = echarts.init(map.value); let myMap = echarts.init(map.value);
//设置配置项 //设置配置项
myMap.setOption({ myMap.setOption({
geo: { geo: {
@ -662,22 +686,22 @@ const changsMap = () =>{
show: mapShow, show: mapShow,
trigger: 'item', trigger: 'item',
position: 'right', position: 'right',
formatter: function(params){ formatter: function (params) {
if (typeof params.data === 'undefined') { if (typeof params.data === 'undefined') {
}else{ } else {
var tt ='<div class="tooltip">'+ var tt = '<div class="tooltip">' +
'<div class="tooltip-title" > '+params.name+'</div>'+ '<div class="tooltip-title" > ' + params.name + '</div>' +
'<div class="tooltip-content" >'+ '<div class="tooltip-content" >' +
'<ul class="tooltip-ul">'+ '<ul class="tooltip-ul">' +
'<li>今日来信 <span>'+params.data.todaysum+'</span></li>'+ '<li>今日来信 <span>' + params.data.todaysum + '</span></li>' +
'<li>来信总数 <span>'+params.data.allsum+'</span></li>'+ '<li>来信总数 <span>' + params.data.allsum + '</span></li>' +
'<li>办结总数 <span>'+params.data.completed+'</span></li>'+ '<li>办结总数 <span>' + params.data.completed + '</span></li>' +
'<li>办结率 <span>'+params.data.completedrate+'</span></li>'+ '<li>办结率 <span>' + params.data.completedrate + '</span></li>' +
'<li>解决率 <span>'+params.data.resolvedrate+'</span></li>'+ '<li>解决率 <span>' + params.data.resolvedrate + '</span></li>' +
'<li>满意率 <span>'+params.data.satisfiedrate+'</span></li>'+ '<li>满意率 <span>' + params.data.satisfiedrate + '</span></li>' +
' </ul></div></div>' ' </ul></div></div>'
return tt; return tt;
} }
}, },
@ -708,7 +732,7 @@ const changsMap = () =>{
}, },
calculable: true, calculable: true,
inRange: { inRange: {
color: ['#D34343','#F6A149', '#4987F6'] color: ['#D34343', '#F6A149', '#4987F6']
} }
}, },
series: [ series: [
@ -823,7 +847,7 @@ const switchRegion = () => {
} }
}; };
const dayEcharts=() => { const dayEcharts = () => {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(day_echart.value); var myChart = echarts.init(day_echart.value);
@ -837,12 +861,12 @@ const dayEcharts=() => {
} }
}, },
legend: { legend: {
top:'0%', top: '0%',
right: '0%', right: '0%',
data:['信件数'], data: ['信件数'],
textStyle: { textStyle: {
color: 'rgba(255,255,255,.5)', color: 'rgba(255,255,255,.5)',
fontSize:'12', fontSize: '12',
} }
}, },
grid: { grid: {
@ -856,10 +880,10 @@ const dayEcharts=() => {
xAxis: [{ xAxis: [{
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "rgba(255,255,255,.6)", color: "rgba(255,255,255,.6)",
fontSize:12, fontSize: 12,
}, },
}, },
axisLine: { axisLine: {
@ -873,8 +897,8 @@ const dayEcharts=() => {
}, { }, {
axisPointer: {show: false}, axisPointer: { show: false },
axisLine: { show: false}, axisLine: { show: false },
position: 'bottom', position: 'bottom',
offset: 20, offset: 20,
@ -884,16 +908,16 @@ const dayEcharts=() => {
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
axisTick: {show: false}, axisTick: { show: false },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,.1)' color: 'rgba(255,255,255,.1)'
} }
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "rgba(255,255,255,.6)", color: "rgba(255,255,255,.6)",
fontSize:12, fontSize: 12,
}, },
}, },
@ -947,12 +971,12 @@ const dayEcharts=() => {
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(option);
window.addEventListener("resize",function(){ window.addEventListener("resize", function () {
myChart.resize(chartWidth); myChart.resize(chartWidth);
}); });
} }
const monthEcharts=() => { const monthEcharts = () => {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(month_echart.value); var myChart = echarts.init(month_echart.value);
let option1 = { let option1 = {
@ -965,12 +989,12 @@ const monthEcharts=() => {
} }
}, },
legend: { legend: {
top:'0%', top: '0%',
right: '0%', right: '0%',
data:['信件数'], data: ['信件数'],
textStyle: { textStyle: {
color: 'rgba(255,255,255,.5)', color: 'rgba(255,255,255,.5)',
fontSize:'12', fontSize: '12',
} }
}, },
grid: { grid: {
@ -984,10 +1008,10 @@ const monthEcharts=() => {
xAxis: [{ xAxis: [{
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "rgba(255,255,255,.6)", color: "rgba(255,255,255,.6)",
fontSize:12, fontSize: 12,
}, },
}, },
axisLine: { axisLine: {
@ -1001,8 +1025,8 @@ const monthEcharts=() => {
}, { }, {
axisPointer: {show: false}, axisPointer: { show: false },
axisLine: { show: false}, axisLine: { show: false },
position: 'bottom', position: 'bottom',
offset: 20, offset: 20,
@ -1012,16 +1036,16 @@ const monthEcharts=() => {
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
axisTick: {show: false}, axisTick: { show: false },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,.1)' color: 'rgba(255,255,255,.1)'
} }
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "rgba(255,255,255,.6)", color: "rgba(255,255,255,.6)",
fontSize:12, fontSize: 12,
}, },
}, },
@ -1075,13 +1099,13 @@ const monthEcharts=() => {
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option1); myChart.setOption(option1);
window.addEventListener("resize",function(){ window.addEventListener("resize", function () {
myChart.resize(chartWidth); myChart.resize(chartWidth);
}); });
} }
const weekEcharts=() => { const weekEcharts = () => {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(week_echart.value); var myChart = echarts.init(week_echart.value);
let option1 = { let option1 = {
@ -1094,12 +1118,12 @@ const weekEcharts=() => {
} }
}, },
legend: { legend: {
top:'0%', top: '0%',
right: '0%', right: '0%',
data:['信件数'], data: ['信件数'],
textStyle: { textStyle: {
color: 'rgba(255,255,255,.5)', color: 'rgba(255,255,255,.5)',
fontSize:'12', fontSize: '12',
} }
}, },
grid: { grid: {
@ -1113,10 +1137,10 @@ const weekEcharts=() => {
xAxis: [{ xAxis: [{
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "rgba(255,255,255,.6)", color: "rgba(255,255,255,.6)",
fontSize:12, fontSize: 12,
}, },
}, },
axisLine: { axisLine: {
@ -1126,12 +1150,12 @@ const weekEcharts=() => {
}, },
data: weekXList data: weekXList
}, { }, {
axisPointer: {show: false}, axisPointer: { show: false },
axisLine: { show: false}, axisLine: { show: false },
position: 'bottom', position: 'bottom',
offset: 20, offset: 20,
@ -1141,16 +1165,16 @@ const weekEcharts=() => {
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
axisTick: {show: false}, axisTick: { show: false },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(255,255,255,.1)' color: 'rgba(255,255,255,.1)'
} }
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "rgba(255,255,255,.6)", color: "rgba(255,255,255,.6)",
fontSize:12, fontSize: 12,
}, },
}, },
@ -1204,12 +1228,12 @@ const weekEcharts=() => {
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option1); myChart.setOption(option1);
window.addEventListener("resize",function(){ window.addEventListener("resize", function () {
myChart.resize(chartWidth); myChart.resize(chartWidth);
}); });
} }
const queryDetails = async (data: any) => { const queryDetails = async (data: any) => {
mapShow=false mapShow = false
changsMap() changsMap()
showDetails.value = true showDetails.value = true
await nextTick() await nextTick()
@ -1217,13 +1241,11 @@ const queryDetails = async (data: any) => {
detailsRef.value?.getDetail(data) detailsRef.value?.getDetail(data)
} }
const closeDetails=()=>{ const closeDetails = () => {
mapShow=true mapShow = true
changsMap() changsMap()
showDetails.value = false showDetails.value = false
} }
</script> </script>
<style lang="less"> <style lang="less"></style>
</style>

242
src/views/datascreen/index.vue
Unescape View File

@ -14,47 +14,47 @@
<div> <div>
<el-tabs v-model="dutyActiveName" class="echart-tabs" type="card" @tab-click="dutyResetTimer"> <el-tabs v-model="dutyActiveName" class="echart-tabs" type="card" @tab-click="dutyResetTimer">
<el-scrollbar> <el-scrollbar>
<el-tab-pane label="市局专班" name="dutySj"> <el-tab-pane label="市局专班" name="dutySj">
<div class="boxRightMailCon"> <div class="boxRightMailCon">
<ul class="dutyUl">
<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">
<ul class="dutyUl"> <ul class="dutyUl">
<li v-for="item in dutySjList" :key="item.id"> <li v-for="item in dutyList.dutyFjList" :key="item.id">
<p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p> }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li> </li>
</ul> </ul>
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="分县市局" name="dutyFj"> <el-tab-pane label="支队" name="dutyZd">
<ul class="dutyUl"> <ul class="dutyUl">
<li v-for="item in dutyList.dutyFjList" :key="item.id"> <li v-for="item in dutyList.dutyZdList" :key="item.id">
<p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p> }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li> </li>
</ul> </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>
</el-tab-pane> </ul>
<el-tab-pane label="支队" name="dutyZd"> </el-tab-pane>
<ul class="dutyUl"> </el-scrollbar>
<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-scrollbar>
</el-tabs> </el-tabs>
</div> </div>
@ -70,7 +70,7 @@
<ul class="h100"> <ul class="h100">
<li v-for="item in completeList" :key="item.id"> <li v-for="item in completeList" :key="item.id">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<div class="ratenav"> <div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div> <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div> </div>
<div class="ratesum"> <div class="ratesum">
@ -86,7 +86,7 @@
<ul class="h100"> <ul class="h100">
<li v-for="item in rateMap.resolvedList" :key="item.id"> <li v-for="item in rateMap.resolvedList" :key="item.id">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<div class="ratenav"> <div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div> <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div> </div>
<div class="ratesum"> <div class="ratesum">
@ -102,7 +102,7 @@
<ul class="h100"> <ul class="h100">
<li v-for="item in rateMap.satisfiedList" :key="item.id"> <li v-for="item in rateMap.satisfiedList" :key="item.id">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<div class="ratenav"> <div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div> <div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div> </div>
<div class="ratesum"> <div class="ratesum">
@ -296,10 +296,10 @@ let dutyList = ref([]);
let typeRankList = ref([]); let typeRankList = ref([]);
let rateMap = ref([]); let rateMap = ref([]);
let mailTrendMap = ref([]); let mailTrendMap = ref([]);
let consoleMap = ref([]);
let mailTypeRankList = reactive([]) as any[]; let mailTypeRankList = reactive([]) as any[];
let completeList = reactive([]) as any[]; let completeList = reactive([]) as any[];
let dutySjList = reactive([]) as any[]; let dutySjList = reactive([]) as any[];
const consoleMap = ref({});
const completedrateContent = ref('') const completedrateContent = ref('')
const satisfiedrateContent = ref('') const satisfiedrateContent = ref('')
const resolvedrateContent = ref('') const resolvedrateContent = ref('')
@ -379,11 +379,11 @@ const selectYear = (year) => {
//console大屏数据 //console大屏数据
const getConsoleDataMap = async () => { const getConsoleDataMap = async () => {
try { try {
consoleMap = await consoleData() consoleMap.value = await consoleData()
console.log(consoleMap) console.log(consoleMap.value)
completedrateContent.value = '办结率=办结数/来信总数\n' + consoleMap.completedrate + '=' + consoleMap.completed + '/' + consoleMap.completedsum completedrateContent.value = '办结率=解决数/已办结数\n' + consoleMap.value.completedrate + '=' + consoleMap.value.completed + '/' + consoleMap.value.completedsum
satisfiedrateContent.value = '满意率=满意数/来信总数\n' + consoleMap.satisfiedrate + '=' + consoleMap.satisfied + '/' + consoleMap.satisfiedsum satisfiedrateContent.value = '满意率=满意数/已办结数\n' + consoleMap.value.satisfiedrate + '=' + consoleMap.value.satisfied + '/' + consoleMap.value.satisfiedsum
resolvedrateContent.value = '解决率=解决数/来信总数\n' + consoleMap.resolvedrate + '=' + consoleMap.resolved + '/' + consoleMap.resolvedsum resolvedrateContent.value = '解决率=解决数/来信总数\n' + consoleMap.value.resolvedrate + '=' + consoleMap.value.resolved + '/' + consoleMap.value.resolvedsum
} catch (error) { } catch (error) {
} }
} }
@ -635,23 +635,26 @@ const changsMap = () => {
trigger: 'item', trigger: 'item',
position: 'right', position: 'right',
formatter: function (params) { formatter: function (params) {
const data = params.data || {
if (typeof params.data === 'undefined') { todaysum: 0,
allsum: 0,
} else { completed: 0,
var tt = '<div class="tooltip">' + completedrate: '0%',
'<div class="tooltip-title" > ' + params.name + '</div>' + resolvedrate: '0%',
'<div class="tooltip-content" >' + satisfiedrate: '0%'
'<ul class="tooltip-ul">' + };
'<li>今日来信 <span>' + params.data.todaysum + '</span></li>' + var tt = '<div class="tooltip">' +
'<li>来信总数 <span>' + params.data.allsum + '</span></li>' + '<div class="tooltip-title" > ' + params.name + '</div>' +
'<li>办结总数 <span>' + params.data.completed + '</span></li>' + '<div class="tooltip-content" >' +
'<li>办结率 <span>' + params.data.completedrate + '</span></li>' + '<ul class="tooltip-ul">' +
'<li>解决率 <span>' + params.data.resolvedrate + '</span></li>' + '<li>今日来信 <span>' + data.todaysum + '</span></li>' +
'<li>满意率 <span>' + params.data.satisfiedrate + '</span></li>' + '<li>来信总数 <span>' + data.allsum + '</span></li>' +
' </ul></div></div>' '<li>办结总数 <span>' + data.completed + '</span></li>' +
return tt; '<li>办结率 <span>' + data.completedrate + '</span></li>' +
} '<li>解决率 <span>' + data.resolvedrate + '</span></li>' +
'<li>满意率 <span>' + data.satisfiedrate + '</span></li>' +
' </ul></div></div>'
return tt;
}, },
backgroundColor: '#031577', // backgroundColor: '#031577', //
borderColor: '#0A2F86', borderColor: '#0A2F86',
@ -715,94 +718,79 @@ const changsMap = () => {
} }
const intervalTime = 3000; // 定时器间隔时间设置为3000毫秒
const switchRegion = () => { const switchRegion = () => {
const chart = echarts.getInstanceByDom(map.value); const chart = echarts.getInstanceByDom(map.value); // 获取echarts实例
if (!chart) {
console.error('ECharts实例未找到');
return;
}
const option = chart.getOption(); const option = chart.getOption();
const mapSeriesIndex = option.series.findIndex((series) => series.type === 'map'); const mapSeriesIndex = option.series.findIndex((series) => series.type === 'map');
if (mapSeriesIndex >= 0) { if (mapSeriesIndex >= 0) {
const mapData = option.series[mapSeriesIndex].data; const mapData = option.series[mapSeriesIndex].data;
const regionCount = mapData.length; if (!mapData || mapData.length === 0) {
const prevIndex = currentIndex; console.warn('地图数据为空');
currentIndex = (currentIndex + 1) % regionCount; return; // 没有数据时直接返回
}
//mapData[prevIndex].selected = false; // 取消上一个区域的选中状态 // 停止已有的轮播（如果有）
// mapData[currentIndex].selected = true; // 设置当前区域为选中状态 clearInterval(carouselTime);
var hourIndex = 0; // 设置定时器轮播逻辑
const startCarousel = () => {
carouselTime = setInterval(() => {
//dispatchAction echarts的API：触发图表行为
chart.dispatchAction({
type: "downplay", //downplay 取消高亮指定的数据图形
seriesIndex: 0
});
chart.dispatchAction({
type: "highlight", //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: hourIndex //数据index
});
chart.dispatchAction({
type: "showTip", //showTip 显示提示框
seriesIndex: 0,
dataIndex: hourIndex
});
hourIndex++;
//当循环到数组当中的最后一条数据后，重新进行循环
if (hourIndex > mapData.length) {
hourIndex = 0;
}
}, 3000);
//鼠标移入组件时停止轮播
chart.on("mousemove", (e) => {
clearInterval(carouselTime); //清除循环
chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex
});
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex
});
});
//鼠标移出组件时恢复轮播
chart.on("mouseout", () => {
carouselTime = setInterval(() => { carouselTime = setInterval(() => {
chart.dispatchAction({ currentIndex = (currentIndex + 1) % mapData.length; // 更新当前索引
type: "downplay",
seriesIndex: 0,
// 触发echarts的行为
chart.dispatchAction({
type: "downplay", // 取消高亮
seriesIndex: mapSeriesIndex
});
chart.dispatchAction({
type: "highlight", // 高亮显示当前index的数据
seriesIndex: mapSeriesIndex,
dataIndex: currentIndex
}); });
chart.dispatchAction({
type: "showTip", // 显示当前数据的tooltip
seriesIndex: mapSeriesIndex,
dataIndex: currentIndex
});
}, intervalTime);
};
// 鼠标移入组件时停止轮播
chart.off('mousemove'); // 先取消之前可能存在的事件绑定
chart.on("mousemove", (e) => {
clearInterval(carouselTime);
if (e.dataIndex !== undefined) {
chart.dispatchAction({ chart.dispatchAction({
type: "highlight", type: "highlight",
seriesIndex: 0, seriesIndex: mapSeriesIndex,
dataIndex: hourIndex dataIndex: e.dataIndex
}); });
chart.dispatchAction({ chart.dispatchAction({
type: "showTip", type: "showTip",
seriesIndex: 0, seriesIndex: mapSeriesIndex,
dataIndex: hourIndex dataIndex: e.dataIndex
}); });
hourIndex++; }
if (hourIndex > mapData.length) {
hourIndex = 0;
}
}, 3000);
}); });
chart.setOption(option);
// 鼠标移出组件时恢复轮播
chart.off('mouseout'); // 先取消之前可能存在的事件绑定
chart.on("mouseout", () => {
startCarousel();
});
startCarousel(); // 开始轮播
} }
}; };
const dayEcharts = () => { const dayEcharts = () => {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(day_echart.value); var myChart = echarts.init(day_echart.value);

11
src/views/work/Dissatisfied.vue
Unescape View File

@ -96,12 +96,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="contactName" label="姓名" align="center" width="80" /> <el-table-column prop="contactName" label="姓名" align="center" width="80" />
<el-table-column prop="contactPhone" label="联系电话" width="120" align="center" /> <el-table-column prop="contactPhone" label="联系电话" width="120" align="center" />
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column prop="mailCategory" label="信件分类" width="120" align="center" /> <el-table-column prop="mailCategory" label="信件分类" width="120" align="center" />
<el-table-column prop="content" label="信件内容" show-overflow-tooltip align="center" /> <el-table-column prop="content" label="信件内容" show-overflow-tooltip align="center" />
<el-table-column label="信件状态" width="90" align="center"> <el-table-column label="信件状态" width="90" align="center">
@ -130,6 +125,12 @@
</el-text> </el-text>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="120" align="center"> <el-table-column label="操作" fixed="right" width="120" align="center">
<template #default="{ row }"> <template #default="{ row }">

11
src/views/work/Done.vue
Unescape View File

@ -96,11 +96,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="contactName" label="姓名" align="center" width="80" /> <el-table-column prop="contactName" label="姓名" align="center" width="80" />
<el-table-column prop="contactPhone" label="联系电话" width="120" align="center" /> <el-table-column prop="contactPhone" label="联系电话" width="120" align="center" />
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column prop="mailCategory" label="信件分类" align="center" width="120"/> <el-table-column prop="mailCategory" label="信件分类" align="center" width="120"/>
<el-table-column label="信件状态" width="90" align="center"> <el-table-column label="信件状态" width="90" align="center">
@ -135,6 +131,11 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center"> <el-table-column label="操作" fixed="right" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" link @click="handleMail(row)">详情</el-button> <el-button type="primary" link @click="handleMail(row)">详情</el-button>

11
src/views/work/Fav.vue
Unescape View File

@ -80,11 +80,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="contactName" label="姓名" align="center" width="80" /> <el-table-column prop="contactName" label="姓名" align="center" width="80" />
<el-table-column prop="contactPhone" label="联系电话" width="120" align="center" /> <el-table-column prop="contactPhone" label="联系电话" width="120" align="center" />
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column prop="mailCategory" label="信件分类" width="120" align="center" /> <el-table-column prop="mailCategory" label="信件分类" width="120" align="center" />
<el-table-column prop="content" label="信件内容" align="center" show-overflow-tooltip /> <el-table-column prop="content" label="信件内容" align="center" show-overflow-tooltip />
<el-table-column label="信件状态" width="90" align="center"> <el-table-column label="信件状态" width="90" align="center">
@ -102,6 +98,11 @@
<el-tag type="danger" v-else>未签收</el-tag> <el-tag type="danger" v-else>未签收</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center"> <el-table-column label="操作" fixed="right" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" link @click="handleMail(row)">详情</el-button> <el-button type="primary" link @click="handleMail(row)">详情</el-button>

23
src/views/work/Query.vue
Unescape View File

@ -5,9 +5,9 @@
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="来信时间"> <el-form-item label="来信时间">
<el-date-picker v-model="query.mailTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" <el-date-picker v-model="query.mailTime" value-format="YYYY-MM-DD HH:mm:ss"
range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="~"
@change="handleMailTimeQuery" /> start-placeholder="开始日期" end-placeholder="结束日期" @change="handleMailTimeQuery" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
@ -97,12 +97,12 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="内容查询"> <el-form-item label="内容查询">
<el-input v-model="query.queryByContent" placeholder="请输入相关信件内容" clearable /> <el-input v-model="query.queryByContent" placeholder="请输入相关信件内容" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-form-item label="编号查询"> <el-form-item label="编号查询">
<el-input v-model="query.queryById" placeholder="请输入相关信件编号" clearable /> <el-input v-model="query.queryById" placeholder="请输入相关信件编号" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -135,14 +135,9 @@
</el-table-column> </el-table-column>
<el-table-column prop="contactName" label="姓名" align="center" width="80" /> <el-table-column prop="contactName" label="姓名" align="center" width="80" />
<el-table-column prop="contactPhone" label="联系电话" width="120" align="center" /> <el-table-column prop="contactPhone" label="联系电话" width="120" align="center" />
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column prop="mailCategory" label="信件分类" width="120" align="center" /> <el-table-column prop="mailCategory" label="信件分类" width="120" align="center" />
<el-table-column prop="content" label="信件内容" show-overflow-tooltip align="center" width="90" /> <el-table-column prop="content" label="信件内容" show-overflow-tooltip align="center" />
<el-table-column label="信件状态" width="90" align="center"> <el-table-column label="信件状态" width="90" align="center">
<template #default="{ row }"> <template #default="{ row }">
@ -172,6 +167,12 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column prop="mailLabels" label="信件标签" width="160" align="center" /> <el-table-column prop="mailLabels" label="信件标签" width="160" align="center" />
<el-table-column label="操作" width="120" fixed="right" align="center"> <el-table-column label="操作" width="120" fixed="right" align="center">

11
src/views/work/Todo.vue
Unescape View File

@ -101,11 +101,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="contactName" label="姓名" align="center" width="80" /> <el-table-column prop="contactName" label="姓名" align="center" width="80" />
<el-table-column prop="contactPhone" label="联系电话" align="center" width="120" /> <el-table-column prop="contactPhone" label="联系电话" align="center" width="120" />
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column prop="mailCategory" label="信件分类" align="center" width="120" /> <el-table-column prop="mailCategory" label="信件分类" align="center" width="120" />
<el-table-column prop="content" align="center" label="信件内容" show-overflow-tooltip width="150" /> <el-table-column prop="content" align="center" label="信件内容" show-overflow-tooltip width="150" />
<el-table-column label="信件状态" width="90" align="center"> <el-table-column label="信件状态" width="90" align="center">
@ -139,6 +135,11 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="信件等级" width="100" align="center">
<template #default="{ row }">
<mail-level :value="row.mailLevel" :list="dictData.mail_level" />
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center"> <el-table-column label="操作" fixed="right" align="center">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" link @click="handleMail(row)">立即处理</el-button> <el-button type="primary" link @click="handleMail(row)">立即处理</el-button>

Write Preview
Loading…
Cancel
Save