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
e473b93c3c
commit
29fdd15c06
2 changed files with 142 additions and 66 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. 3
      src/api/datascreen.ts
  2. 205
      src/views/datascreen/index.vue

3
src/api/datascreen.ts
Unescape View File

@ -30,6 +30,9 @@ export function dutyDay(params: Record<string, any>) {
export function threeRate(params: Record<string, any>) {
return request.get({ url: '/dataScreen/threeRate', params})
}
export function otherThreeRate(params: Record<string, any>) {
return request.get({ url: '/dataScreen/otherThreeRate', params})
}
export function getMailDetail(params: Record<string, any>) {
return request.get({ url: '/dataScreen/getMailDetail', params})
}

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

@ -60,64 +60,117 @@
</div>
<div class="box-container">
<div class="name-title">
分县市局三率排名
</div>
<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">
<li v-for="item in completeList" :key="item.id">
<span>{{ item.name }}</span>
<div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div>
<div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum }}</span></p>
</div>
</li>
</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" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div>
<div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum }}</span></p>
</div>
</li>
</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" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div>
<div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum }}</span></p>
</div>
</li>
</ul>
</div>
</el-tab-pane>
</el-tabs>
</div>
<el-tabs v-model="rateName" class="echart-tabs" type="card" @tab-click="categoryChange">
<el-tab-pane label="分县市局三率排名" name="county">
<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 animated-list">
<li v-for="item in rateMap.completeList" :key="item.id">
<span>{{ item.name }}</span>
<div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div>
<div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum }}</span>
</p>
</div>
</li>
</ul>
</div>
</el-tab-pane>
<el-tab-pane label="解决率" name="resolutionRate">
<div class="ratesbox rates">
<ul class="h100 animated-list">
<li v-for="item in rateMap.resolvedList" :key="item.id">
<span>{{ item.name }}</span>
<div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div>
<div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum }}</span>
</p>
</div>
</li>
</ul>
</div>
</el-tab-pane>
<el-tab-pane label="满意率" name="satisfactionRate">
<div class="ratesbox rates">
<ul class="h100 animated-list">
<li v-for="item in rateMap.satisfiedList" :key="item.id">
<span>{{ item.name }}</span>
<div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div>
<div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum }}</span>
</p>
</div>
</li>
</ul>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="部委支队三率排名" name="branch">
<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 animated-list">
<li v-for="item in rateBranch.completeList" :key="item.id">
<span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
<div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div>
<div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum }}</span>
</p>
</div>
</li>
</ul>
</div>
</el-tab-pane>
<el-tab-pane label="解决率" name="resolutionRate">
<div class="ratesbox rates">
<ul class="h100 animated-list">
<li v-for="item in rateBranch.resolvedList" :key="item.id">
<span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
<div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div>
<div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum }}</span>
</p>
</div>
</li>
</ul>
</div>
</el-tab-pane>
<el-tab-pane label="满意率" name="satisfactionRate">
<div class="ratesbox rates">
<ul class="h100 animated-list">
<li v-for="item in rateBranch.satisfiedList" :key="item.id">
<span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
<div class="ratenav" width="80%">
<div class="ratebar"><span :style="{ width: item.rate }"></span></div>
</div>
<div class="ratesum">
<p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum }}</span>
</p>
</div>
</li>
</ul>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div class="main-middle">
@ -280,13 +333,14 @@ import { ref, onMounted, onUnmounted } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import * as echarts from 'echarts';
import chinaJSON from "./changsha.json";
import { peopleMail, dutyDay, threeRate, consoleData, mailTypeRank, mailTrend, mapCountyData } from '@/api/datascreen'
import { peopleMail, dutyDay, threeRate, consoleData, mailTypeRank, mailTrend, mapCountyData, otherThreeRate } from '@/api/datascreen'
import { useRouter } from "vue-router";
import DetailsPopup from './details.vue'
const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
const showDetails = ref(false)
const router = useRouter();
const rateName = ref('county')
const rateActiveName = ref('completionRate')
const trendActiveName = ref('dayTrend')
const dutyActiveName = ref('dutySj')
@ -294,17 +348,17 @@ const dutyActiveName = ref('dutySj')
let peopleMaillist = ref([]);
let dutyList = ref([]);
let typeRankList = ref([]);
let rateMap = ref([]);
const rateMap = ref({});
const rateBranch = ref({})
let mailTrendMap = ref([]);
let mailTypeRankList = reactive([]) as any[];
let completeList = reactive([]) as any[];
let dutySjList = reactive([]) as any[];
const consoleMap = ref({});
const completedrateContent = ref('')
const satisfiedrateContent = ref('')
const resolvedrateContent = ref('')
const intervalTimeRate = 3500; // 自动切换的间隔时间，单位为毫秒
const intervalTimeRate = 4000; // 自动切换的间隔时间，单位为毫秒
const intervalTimeTrend = 3000; // 自动切换的间隔时间，单位为毫秒
const intervalTimeDuty = 3200; // 自动切换的间隔时间，单位为毫秒
let intervalIdRate: NodeJS.Timeout | null = null;
@ -420,10 +474,13 @@ const getDutyDay = async () => {
}
const getThreeRate = async () => {
try {
rateMap = await threeRate()
rateMap.completeList.forEach((element: any) => {
completeList.push(element);//循环赋值
});
rateMap.value = await threeRate()
} catch (error) {
}
}
const categoryChange = async () => {
try {
rateBranch.value = await otherThreeRate()
} catch (error) {
}
}
@ -1202,4 +1259,20 @@ const closeDetails = () => {
.custom-popover-style .el-popover__title {
color: #fff;
}
.animated-list {
animation: row-list 6s linear infinite;
}
@keyframes row-list {
0%,
30% {
transform: translateY(0);
}
100% {
transform: translateY(-80%);
}
}
</style>
Write Preview
Loading…
Cancel
Save