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

大屏显示三率计算方式

master
21819 2 years ago
parent
de317923b0
commit
2c2fc1c3c6
1 changed files with 401 additions and 390 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 395
      src/views/datascreen/index.vue

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

@ -11,13 +11,14 @@
<div class="name-title">
今日值班
</div>
<div >
<div>
<el-tabs v-model="dutyActiveName" class="echart-tabs" type="card" @tab-click="dutyResetTimer">
<el-tab-pane label="市局专班" name="dutySj">
<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>
<p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li>
</ul>
@ -27,7 +28,8 @@
<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>
<p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li>
</ul>
@ -36,7 +38,8 @@
<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>
<p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li>
</ul>
@ -44,7 +47,8 @@
<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>
<p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile
}}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
</li>
</ul>
@ -57,8 +61,8 @@
<div class="name-title">
分县市局三率排名
</div>
<div >
<el-tabs v-model="rateActiveName" class="echart-tabs" @tab-click="rateResetTimer" type="card" >
<div>
<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">
@ -118,12 +122,42 @@
<div class="border-console ">
<div class="console-div">
<ul class="clearfix">
<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>
<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>
<el-popover placement="right-start" title="办结率计算方式" :width="200" trigger="hover" show-after="500"
:content="completedrateContent" popper-class="custom-popover-style">
<template #reference>
<h2 class="yellowbg">{{ consoleMap.completedrate }}</h2>
</template>
</el-popover>
<span>办结率</span>
</li>
<li>
<el-popover placement="right-start" title="满意率计算方式" :width="200" trigger="hover" show-after="500"
:content="satisfiedrateContent" popper-class="custom-popover-style">
<template #reference>
<h2 class="bulebg">{{ consoleMap.satisfiedrate }}</h2>
</template>
</el-popover>
<span>满意率</span>
</li>
<li>
<el-popover placement="right-start" title="解决率计算方式" :width="200" trigger="hover" show-after="500"
:content="resolvedrateContent" popper-class="custom-popover-style">
<template #reference>
<h2 class="bulebg">{{ consoleMap.resolvedrate }}</h2>
</template>
</el-popover>
<span>解决率</span>
</li>
</ul>
</div>
@ -136,74 +170,37 @@
来信趋势
</div>
<div v-if="seenDay" class="trendOptions">
<el-select
v-model="trendDayValue"
class="m-2"
: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 v-model="trendDayValue" class="m-2" :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>
</div>
<div v-if="seenWeek" class="trendOptions">
<el-select
v-model="trendWeekValue"
class="m-2"
: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 v-model="trendWeekValue" class="m-2" :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>
</div>
<div v-if="seenMonth" class="trendOptions">
<el-select
v-model="trendMonthValue"
class="m-2"
:placeholder="selectTrend"
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 v-model="trendMonthValue" class="m-2" :placeholder="selectTrend" 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>
</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="weekTrend" >
<div ref="week_echart" id="weekEchart" :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 label="月趋势" name="monthTrend">
<div ref="month_echart" id="monthEchart" :style="{ width: chartWidth + 'px' }"></div>
</el-tab-pane>
</el-tabs>
</div>
@ -214,13 +211,14 @@
<div class="box-container">
<div class="name-title" >
<div class="name-title">
信件动态
</div>
<div class="boxLeftMailCon">
<ul class="mailUl">
<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>
</li>
</ul>
@ -234,13 +232,13 @@
<div class=" boxnav paim">
<ul class="h100">
<li v-for="item in mailTypeRankList" :key="item.id">
<span>{{item.rownumber}}</span>
<span>{{ item.rownumber }}</span>
<div class="pmnav">
<p>{{ item.category }}</p>
<div class="pmbar"><span :style="{ width: item.countrate }"></span><i></i></div>
</div>
<div class="pmsum">
<p>{{item.sumcount}}</p>
<p>{{ item.sumcount }}</p>
</div>
</li>
@ -251,24 +249,23 @@
</div>
</div>
<details-popup
v-if="showDetails"
ref="detailsRef"
@success="closeDetails"
@close="closeDetails"
/>
<details-popup v-if="showDetails" ref="detailsRef" @success="closeDetails" @close="closeDetails" />
</div>
</div>
</template>
<style >
<style>
@import 'assets/css/index.css';
body{
body {
background-color: #030b39;
}
.body{
background-image: url('@/assets/bg.png'); /* 背景图片的路径 */
background-size: cover; /* 背景图片大小适应容器 */
.body {
background-image: url('@/assets/bg.png');
/* 背景图片的路径 */
background-size: cover;
/* 背景图片大小适应容器 */
overflow: auto;
background-color: #1C3472;
@ -277,14 +274,14 @@ body{
<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 * 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 { peopleMail, dutyDay, threeRate, consoleData, mailTypeRank, mailTrend, mapCountyData } from '@/api/datascreen'
import { useRouter } from "vue-router";
import {menuLists} from "~/api/perms/menu.ts";
import { menuLists } from "~/api/perms/menu.ts";
import DetailsPopup from './details.vue'
const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
const showDetails = ref(false)
@ -294,15 +291,18 @@ const rateActiveName = ref('completionRate')
const trendActiveName = ref('dayTrend')
const dutyActiveName = ref('dutySj')
let peopleMaillist= ref([]);
let peopleMaillist = ref([]);
let dutyList = ref([]);
let typeRankList= ref([]);
let typeRankList = ref([]);
let rateMap = ref([]);
let mailTrendMap = ref([]);
let consoleMap = ref([]);
let mailTypeRankList= reactive([]) as any[];
let mailTypeRankList = reactive([]) as any[];
let completeList = reactive([]) as any[];
let dutySjList= reactive([]) as any[];
let dutySjList = reactive([]) as any[];
const completedrateContent = ref('')
const satisfiedrateContent = ref('')
const resolvedrateContent = ref('')
const intervalTimeRate = 3500; // 自动切换的间隔时间，单位为毫秒
const intervalTimeTrend = 3000; // 自动切换的间隔时间，单位为毫秒
@ -311,22 +311,22 @@ let intervalIdRate: NodeJS.Timeout | null = null;
let intervalIdTrend: 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 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 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 mapDataList = reactive([]) as any[];
let dataIndex = 0
let currentIndex = 0;
let chartWidth=900;
let chartWidth = 900;
const tabsContainer = ref(null);
let day_echart = ref(null);
@ -336,11 +336,11 @@ 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 mapShow=true
const selectTrend = "请选择"
let seenDay = true
let seenWeek = false
let seenMonth = false
let mapShow = true
let trendDayOptions = [
{
value: '15',
@ -364,14 +364,14 @@ let trendWeekOptions = [
}
]
let trendMonthOptions =reactive([]) as any[];
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};
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);
}
}
@ -381,6 +381,9 @@ const getConsoleDataMap = async () => {
try {
consoleMap = await consoleData()
console.log(consoleMap)
completedrateContent.value = '办结率=办结数/来信总数\n' + consoleMap.completedrate + '=' + consoleMap.completed + '/' + consoleMap.completedsum
satisfiedrateContent.value = '满意率=满意数/来信总数\n' + consoleMap.satisfiedrate + '=' + consoleMap.satisfied + '/' + consoleMap.satisfiedsum
resolvedrateContent.value = '解决率=解决数/来信总数\n' + consoleMap.resolvedrate + '=' + consoleMap.resolved + '/' + consoleMap.resolvedsum
} catch (error) {
}
}
@ -415,7 +418,7 @@ const getDutyDay = async () => {
} catch (error) {
}
}
const getThreeRate= async () => {
const getThreeRate = async () => {
try {
rateMap = await threeRate()
rateMap.completeList.forEach((element: any) => {
@ -425,7 +428,7 @@ const getThreeRate= async () => {
}
}
const getMailTrend= async () => {
const getMailTrend = async () => {
try {
const params = reactive({
day: trendDayValue.value,
@ -434,14 +437,14 @@ const getMailTrend= async () => {
})
mailTrendMap = await mailTrend(params)
dayXList=mailTrendMap.dayXList
dayYList=mailTrendMap.dayYList;
dayXList = mailTrendMap.dayXList
dayYList = mailTrendMap.dayYList;
dayEcharts()
weekXList=mailTrendMap.weekXList;
weekYList= mailTrendMap.weekYList;
weekXList = mailTrendMap.weekXList;
weekYList = mailTrendMap.weekYList;
weekEcharts()
monthXList= mailTrendMap.monthXList;
monthYList=mailTrendMap.monthYList;
monthXList = mailTrendMap.monthXList;
monthYList = mailTrendMap.monthYList;
monthEcharts()
} catch (error) {
}
@ -474,7 +477,7 @@ onMounted(() => {
const width = tabsContainer.value.offsetWidth - 40;
chartWidth= width;
chartWidth = width;
});
@ -490,7 +493,7 @@ onUnmounted(() => {
});
const formatDate=(value)=>{
const formatDate = (value) => {
const date = new Date(value);
return date.toLocaleString();
}
@ -516,21 +519,21 @@ const startTrendAutoSwitch = () => {
intervalIdTrend = setInterval(() => {
if (trendActiveName.value === 'dayTrend') {
trendActiveName.value = 'weekTrend';
seenDay=false
seenWeek=true
seenMonth=false
seenDay = false
seenWeek = true
seenMonth = false
weekEcharts()
} else if (trendActiveName.value === 'weekTrend') {
trendActiveName.value = 'monthTrend';
seenDay=false
seenWeek=false
seenMonth=true
seenDay = false
seenWeek = false
seenMonth = true
monthEcharts()
} else {
trendActiveName.value = 'dayTrend';
seenDay=true
seenWeek=false
seenMonth=false
seenDay = true
seenWeek = false
seenMonth = false
dayEcharts()
}
}, intervalTimeTrend);
@ -578,28 +581,28 @@ const clearDutyTimer = () => {
}
};
const rateResetTimer = () => {
const width = tabsContainer.value.offsetWidth ;
chartWidth= width;
const width = tabsContainer.value.offsetWidth;
chartWidth = width;
clearRateTimer();
startRateAutoSwitch();
};
const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
const width = tabsContainer.value.offsetWidth ;
chartWidth= width;
const width = tabsContainer.value.offsetWidth;
chartWidth = width;
if (pane.paneName === 'dayTrend') {
seenDay=true
seenWeek=false
seenMonth=false
seenDay = true
seenWeek = false
seenMonth = false
} else if (pane.paneName === 'weekTrend') {
seenDay=false
seenWeek=true
seenMonth=false
seenDay = false
seenWeek = true
seenMonth = false
} else {
seenDay=false
seenWeek=false
seenMonth=true
seenDay = false
seenWeek = false
seenMonth = true
}
dayEcharts()
monthEcharts()
@ -609,8 +612,8 @@ const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
};
const dutyResetTimer = () => {
const width = tabsContainer.value.offsetWidth ;
chartWidth= width;
const width = tabsContainer.value.offsetWidth;
chartWidth = width;
clearDutyTimer();
startDutyAutoSwitch();
};
@ -618,7 +621,7 @@ const dutyResetTimer = () => {
const changsMap = () =>{
const changsMap = () => {
echarts.registerMap("map", chinaJSON as any);
let myMap = echarts.init(map.value);
//设置配置项
@ -631,21 +634,21 @@ const changsMap = () =>{
show: mapShow,
trigger: 'item',
position: 'right',
formatter: function(params){
formatter: function (params) {
if (typeof params.data === 'undefined') {
}else{
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>'+
} else {
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;
}
@ -677,7 +680,7 @@ const changsMap = () =>{
},
calculable: true,
inRange: {
color: ['#D34343','#F6A149', '#4987F6']
color: ['#D34343', '#F6A149', '#4987F6']
}
},
series: [
@ -701,7 +704,7 @@ const changsMap = () =>{
});
myMap.on('click', function (params) {
const url = router.resolve({path: '/countyData',query:{id:params.data.id}}).href
const url = router.resolve({ path: '/countyData', query: { id: params.data.id } }).href
window.open(url, '_blank')
// router.push({path:'/countyData',query:{name:params.name}});
});
@ -800,7 +803,7 @@ const switchRegion = () => {
}
};
const dayEcharts=() => {
const dayEcharts = () => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(day_echart.value);
@ -814,12 +817,12 @@ const dayEcharts=() => {
}
},
legend: {
top:'0%',
top: '0%',
right: '0%',
data:['信件数'],
data: ['信件数'],
textStyle: {
color: 'rgba(255,255,255,.5)',
fontSize:'12',
fontSize: '12',
}
},
grid: {
@ -836,7 +839,7 @@ const dayEcharts=() => {
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize:12,
fontSize: 12,
},
},
axisLine: {
@ -850,8 +853,8 @@ const dayEcharts=() => {
}, {
axisPointer: {show: false},
axisLine: { show: false},
axisPointer: { show: false },
axisLine: { show: false },
position: 'bottom',
offset: 20,
@ -861,7 +864,7 @@ const dayEcharts=() => {
yAxis: [{
type: 'value',
axisTick: {show: false},
axisTick: { show: false },
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
@ -870,7 +873,7 @@ const dayEcharts=() => {
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize:12,
fontSize: 12,
},
},
@ -924,12 +927,12 @@ const dayEcharts=() => {
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
window.addEventListener("resize", function () {
myChart.resize(chartWidth);
});
}
const monthEcharts=() => {
const monthEcharts = () => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(month_echart.value);
let option1 = {
@ -942,12 +945,12 @@ const monthEcharts=() => {
}
},
legend: {
top:'0%',
top: '0%',
right: '0%',
data:['信件数'],
data: ['信件数'],
textStyle: {
color: 'rgba(255,255,255,.5)',
fontSize:'12',
fontSize: '12',
}
},
grid: {
@ -964,7 +967,7 @@ const monthEcharts=() => {
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize:12,
fontSize: 12,
},
},
axisLine: {
@ -978,8 +981,8 @@ const monthEcharts=() => {
}, {
axisPointer: {show: false},
axisLine: { show: false},
axisPointer: { show: false },
axisLine: { show: false },
position: 'bottom',
offset: 20,
@ -989,7 +992,7 @@ const monthEcharts=() => {
yAxis: [{
type: 'value',
axisTick: {show: false},
axisTick: { show: false },
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
@ -998,7 +1001,7 @@ const monthEcharts=() => {
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize:12,
fontSize: 12,
},
},
@ -1052,13 +1055,13 @@ const monthEcharts=() => {
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option1);
window.addEventListener("resize",function(){
window.addEventListener("resize", function () {
myChart.resize(chartWidth);
});
}
const weekEcharts=() => {
const weekEcharts = () => {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(week_echart.value);
let option1 = {
@ -1071,12 +1074,12 @@ const weekEcharts=() => {
}
},
legend: {
top:'0%',
top: '0%',
right: '0%',
data:['信件数'],
data: ['信件数'],
textStyle: {
color: 'rgba(255,255,255,.5)',
fontSize:'12',
fontSize: '12',
}
},
grid: {
@ -1093,7 +1096,7 @@ const weekEcharts=() => {
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize:12,
fontSize: 12,
},
},
axisLine: {
@ -1107,8 +1110,8 @@ const weekEcharts=() => {
}, {
axisPointer: {show: false},
axisLine: { show: false},
axisPointer: { show: false },
axisLine: { show: false },
position: 'bottom',
offset: 20,
@ -1118,7 +1121,7 @@ const weekEcharts=() => {
yAxis: [{
type: 'value',
axisTick: {show: false},
axisTick: { show: false },
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
@ -1127,7 +1130,7 @@ const weekEcharts=() => {
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize:12,
fontSize: 12,
},
},
@ -1181,12 +1184,12 @@ const weekEcharts=() => {
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option1);
window.addEventListener("resize",function(){
window.addEventListener("resize", function () {
myChart.resize(chartWidth);
});
}
const queryDetails = async (data: any) => {
mapShow=false
mapShow = false
changsMap()
showDetails.value = true
await nextTick()
@ -1194,13 +1197,21 @@ const queryDetails = async (data: any) => {
detailsRef.value?.getDetail(data)
}
const closeDetails=()=>{
mapShow=true
const closeDetails = () => {
mapShow = true
changsMap()
showDetails.value = false
}
</script>
<style lang="less">
<style lang="scss">
.el-popover.custom-popover-style {
background-color: #162582;
border: 0px;
color: #fff;
}
.custom-popover-style .el-popover__title {
color: #fff;
}
</style>
Write Preview
Loading…
Cancel
Save