You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1478 lines
57 KiB
1478 lines
57 KiB
<template> |
|
<el-scrollbar height="100vh"> |
|
<div class="wrapper"> |
|
<datav-header /> |
|
<main> |
|
<el-row :gutter="16"> |
|
<el-col :span="6"> |
|
<datav-card title="现场督察"> |
|
<datav-tabs |
|
v-model="rcdcProRankTab" |
|
type="bottom-button" |
|
ref="sceneInspRcdcProRankTabs" |
|
> |
|
<datav-tab-item label="分县市局" name="1"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
leftOverview.proTotal |
|
}} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
leftOverview.processingNumber |
|
}} |
|
</div> |
|
<div class="descriptions_label"> |
|
办理中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
leftOverview.completedNumber |
|
}} |
|
</div> |
|
<div class="descriptions_label"> |
|
已办结 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
leftOverview.completedRate |
|
}}% |
|
</div> |
|
<div class="descriptions_label"> |
|
办结率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="350px"> |
|
<datav-chart-bar |
|
:data="fxsjChangedRankList" |
|
size="large" |
|
title="办结率排名" |
|
sub-title="已办结/问题数" |
|
unit="%" |
|
:isgroupby="true" |
|
:color="dayTimeColors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item label="局属单位" name="2"> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
leftOverview.proTotal |
|
}} |
|
</div> |
|
<div class="descriptions_label"> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
leftOverview.processingNumber |
|
}} |
|
</div> |
|
<div class="descriptions_label"> |
|
办理中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
leftOverview.completedNumber |
|
}} |
|
</div> |
|
<div class="descriptions_label"> |
|
已办结 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
leftOverview.completedRate |
|
}}% |
|
</div> |
|
<div class="descriptions_label"> |
|
办结率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="350px"> |
|
<datav-chart-bar |
|
:data="jsdwChangedRankList" |
|
size="large" |
|
title="办结率排名" |
|
sub-title="已办结/问题数" |
|
unit="%" |
|
:isgroupby="true" |
|
:color="dayTimeColors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-card> |
|
|
|
<datav-card title="问题涉及方面分布"> |
|
<v-charts |
|
style="height: 310px" |
|
:option="wtlxPieOption" |
|
autoresize |
|
ref="sceneProblemTypeRate" |
|
/> |
|
</datav-card> |
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
<datav-date-picker v-model="time" /> |
|
<div class="flex gap-42"> |
|
<datav-statistic |
|
:value="overview.problemNumber" |
|
title="通报问题数" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.reportNumber" |
|
title="通报期数" |
|
style="width: 16.66%" |
|
@click="handleShow" |
|
/> |
|
<datav-statistic |
|
:value="overview.processingNumber" |
|
title="办理中" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.completedNumber" |
|
title="已办结" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.departNumber" |
|
title="问责单位数" |
|
style="width: 16.66%" |
|
/> |
|
<datav-statistic |
|
:value="overview.personNumber" |
|
title="问责人次" |
|
style="width: 16.66%" |
|
/> |
|
</div> |
|
<v-charts |
|
style="height: 450px" |
|
:option="option" |
|
autoresize |
|
@click="handleClick" |
|
ref="sceneMap" |
|
|
|
/> |
|
<datav-card title="问题趋势"> |
|
<v-charts |
|
style="height: 280px" |
|
:option="proTrend" |
|
autoresize |
|
ref="sceneInspProTrend" |
|
/> |
|
<div class="gobal-dropdown-container"> |
|
<el-dropdown |
|
class="test" |
|
@command="handleCommand" |
|
> |
|
<span |
|
class="el-dropdown-link my-gobal-yearselect" |
|
> |
|
{{ selectedYear + " 年" }} |
|
</span> |
|
<template #dropdown> |
|
<el-dropdown-menu style="width: 90px"> |
|
<el-dropdown-item |
|
v-for="year in years" |
|
:key="year" |
|
:command="year" |
|
>{{ year + " 年" }} |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</template> |
|
</el-dropdown> |
|
</div> |
|
</datav-card> |
|
</el-col> |
|
|
|
<el-col :span="6"> |
|
<datav-card> |
|
<datav-tabs |
|
v-model="zxdcProRankTab" |
|
size="small" |
|
ref="sceneInspZxdcProRankTabs" |
|
> |
|
|
|
<template |
|
v-for="item in dictData" |
|
:key="item.dictValue" |
|
> |
|
<datav-tab-item |
|
:label="item.dictLabel" |
|
:name="item.dictValue" |
|
> |
|
<datav-tabs type="bottom-button"> |
|
<datav-tab-item |
|
label="分县市局" |
|
name="1" |
|
> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
rightOverview.proTotal |
|
}} |
|
</div> |
|
<div |
|
class="descriptions_label" |
|
> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
rightOverview.processingNumber |
|
}} |
|
</div> |
|
<div |
|
class="descriptions_label" |
|
> |
|
办理中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
rightOverview.completedNumber |
|
}} |
|
</div> |
|
<div |
|
class="descriptions_label" |
|
> |
|
已办结 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
rightOverview.completedRate |
|
}}% |
|
</div> |
|
<div |
|
class="descriptions_label" |
|
> |
|
办结率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="350px"> |
|
<datav-chart-bar |
|
:data=" |
|
fxsjYellowBetRankList |
|
" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
<datav-tab-item |
|
label="局属单位" |
|
name="2" |
|
> |
|
<el-row class="mb-32"> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
rightOverview.proTotal |
|
}} |
|
</div> |
|
<div |
|
class="descriptions_label" |
|
> |
|
问题数 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
rightOverview.processingNumber |
|
}} |
|
</div> |
|
<div |
|
class="descriptions_label" |
|
> |
|
办理中 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
rightOverview.completedNumber |
|
}} |
|
</div> |
|
<div |
|
class="descriptions_label" |
|
> |
|
已办结 |
|
</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="6"> |
|
<div |
|
class="descriptions_cell text-center" |
|
> |
|
<div |
|
class="descriptions_content" |
|
> |
|
{{ |
|
rightOverview.completedRate |
|
}}% |
|
</div> |
|
<div |
|
class="descriptions_label" |
|
> |
|
办结率 |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
<el-scrollbar height="350px"> |
|
<datav-chart-bar |
|
:data=" |
|
jsdwYellowBetRankList |
|
" |
|
size="large" |
|
title="问题数排名" |
|
sub-title="问题数" |
|
:color="colors" |
|
/> |
|
</el-scrollbar> |
|
</datav-tab-item> |
|
</datav-tabs> |
|
</datav-tab-item> |
|
</template> |
|
</datav-tabs> |
|
</datav-card> |
|
|
|
<datav-card title="督察工作动态"> |
|
<el-scrollbar height="310px" ref="sceneScrollbar"> |
|
<datav-message |
|
v-for="(msg, index) in messages" |
|
:key="index" |
|
:type="msg.type" |
|
:title="msg.workType" |
|
:content="msg.contentTxt" |
|
:date="msg.releaseTime" |
|
> |
|
<template #link> |
|
<div class="message-link" @click="handlePerviewFile(msg)" v-if="msg.files">查看图片</div> |
|
</template> |
|
</datav-message> |
|
</el-scrollbar> |
|
</datav-card> |
|
</el-col> |
|
</el-row> |
|
</main> |
|
</div> |
|
</el-scrollbar> |
|
|
|
<file-preview :files="files" v-model:show="filePreviewShow" /> |
|
|
|
<el-dialog v-model="show" width="70vw" title="通报报告" > |
|
<div class="table-container" v-loading="loading"> |
|
<el-table |
|
:data="listData" |
|
ref="tableRef" |
|
style="width: 100%" |
|
> |
|
<el-table-column prop="reportName" label="督察报告名称"></el-table-column> |
|
<el-table-column prop="crtTime" label="创建时间" > |
|
<template #default="{row}"> |
|
{{ row.crtTime }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="superviseNumber" label="督察问题数"> |
|
<template #default="{row}"> |
|
<el-button type="primary" link @click="handleNegativeTable(row)">{{row.superviseNumber}}</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="flex end mt-8"> |
|
<el-pagination |
|
@size-change="getReportList" |
|
@current-change="getReportList" |
|
:page-sizes="[10, 20, 50]" |
|
v-model:page-size="query.size" |
|
v-model:current-page="query.current" |
|
layout="total, sizes, prev, pager, next" |
|
:total="total" |
|
/> |
|
</div> |
|
</el-dialog> |
|
|
|
<!-- 督察报告关联问题--> |
|
<el-dialog :title="`督察报告关联问题`" v-model="negativeShow" width="90vw" > |
|
<el-table :data="negativeTable" v-loading="loading"> |
|
<el-table-column |
|
label="问题录入时间" |
|
prop="crtTime" |
|
width="150" |
|
sortable="custom" |
|
/> |
|
<el-table-column |
|
label="问题发现时间" |
|
prop="discoveryTime" |
|
width="150" |
|
sortable="custom" |
|
/> |
|
<el-table-column |
|
label="问题来源" |
|
prop="problemSources" |
|
width="110" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column |
|
label="业务类别" |
|
prop="businessTypeName" |
|
width="110" |
|
/> |
|
<el-table-column |
|
label="问题内容" |
|
prop="thingDesc" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column label="办理单位" show-overflow-tooltip> |
|
<template #default="{ row }"> |
|
<span |
|
>{{ row.handleSecondDepartName |
|
}}{{ row.handleThreeDepartName }}</span |
|
> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
label="是否属实" |
|
prop="checkStatusName" |
|
width="100" |
|
align="center" |
|
/> |
|
<el-table-column |
|
label="流程限时" |
|
width="150" |
|
align="center" |
|
v-if="remainingTimeFlag" |
|
> |
|
<template #default="{ row }"> |
|
<countdown |
|
:time="row.remainingDuration" |
|
v-if=" |
|
row.remainingDuration && |
|
row.processingStatus !== |
|
ProcessingStatus.COMPLETED |
|
" |
|
/> |
|
<el-tag |
|
v-else-if="row.handleTimeout" |
|
type="danger" |
|
effect="dark" |
|
>办结超时 |
|
{{ formatTimeText(row.handleTimeout) }}</el-tag |
|
> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="办理状态" width="110"> |
|
<template #default="{ row }"> |
|
<el-tag |
|
:type=" |
|
row.processingStatus === |
|
ProcessingStatus.COMPLETED |
|
? 'success' |
|
: 'primary' |
|
" |
|
v-if="row.processingStatus" |
|
>{{ |
|
getDictLable( |
|
dict.processingStatus, |
|
row.processingStatus |
|
) |
|
}}</el-tag |
|
> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
label="当前处理对象" |
|
prop="currentProcessingObject" |
|
show-overflow-tooltip |
|
> |
|
<template #default="{ row }"> |
|
<span |
|
v-if=" |
|
row.processingStatus === |
|
ProcessingStatus.COMPLETED |
|
" |
|
>无</span |
|
> |
|
<span v-else>{{ |
|
row.currentProcessingObject |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="flex end mt-8"> |
|
<el-pagination |
|
@size-change="getNegativePageFun" |
|
@current-change="getNegativePageFun" |
|
:page-sizes="[10, 20, 50, 100]" |
|
v-model:page-size="negativeQuery.size" |
|
v-model:current-page="negativeQuery.current" |
|
layout="total, sizes, prev, pager, next" |
|
:total="negativeTotal" |
|
> |
|
</el-pagination> |
|
</div> |
|
</el-dialog> |
|
|
|
|
|
</template> |
|
|
|
<script setup> |
|
import vCharts from "vue-echarts"; |
|
import changshaMap from "@/assets/data/changsha.json"; |
|
import * as echarts from "echarts/core"; |
|
import moment from "moment"; |
|
import { |
|
getChangedRank, |
|
getProblemTypeRate, |
|
getSupervisionNotifyCount, |
|
getSupervisionNotifyMap, |
|
getSupervisionTrend, |
|
getWorkDynamics, |
|
getYellowBetDrug, |
|
} from "@/api/data/supervisionNotify.ts"; |
|
import router from "@/router/index.ts"; |
|
import { workDynamicColorMapping } from "@/enums/workDynamicColorMapping.js"; |
|
import { mapOrgNameMapping } from "@/enums/orgMapping.js"; |
|
|
|
import useCatchStore from "@/stores/modules/catch"; |
|
import { onMounted } from "vue"; |
|
import {getListData,getNegativePageByQuery} from "@/api/superviseReport/superviseReport"; |
|
import {timeFormat,formatTimeText, getDictLable, getInvolveProblem} from "@/utils/util"; |
|
import {ProcessingStatus} from "@/enums/flowEnums"; |
|
|
|
const catchStore = useCatchStore(); |
|
const dict = catchStore.getDicts(["specialSupervision","suspectProblem","processingStatus"]); |
|
const show =ref(false) |
|
|
|
const dictData = computed(()=>{ |
|
return dict?.specialSupervision?.filter((s)=>s.dictLabel !== '枪支管理') |
|
}) |
|
|
|
|
|
|
|
|
|
// region 所有变量 |
|
const time = ref([ |
|
moment().startOf("year").format("YYYY-MM-DD"), |
|
moment().format("YYYY-MM-DD"), |
|
]); |
|
const currentYear = new Date().getFullYear(); |
|
const years = ref([ |
|
currentYear.toString(), |
|
(currentYear - 1).toString(), |
|
(currentYear - 2).toString(), |
|
]); // 年份列表 |
|
const selectedYear = ref(currentYear); // 当前选中的年份 |
|
|
|
const overview = ref({ |
|
problemNumber: 0, |
|
processingNumber: 0, |
|
completedNumber: 0, |
|
departNumber: 0, |
|
personNumber: 0, |
|
completedRate: 0, |
|
}); // 中央数据总览 |
|
const leftOverview = ref({}); |
|
const fxsjRankOverview = ref({}); // 日常督察总览分县市局 |
|
const jsdwRankOverview = ref({}); // 日常督察总览局属单位 |
|
const fxsjChangedRankList = ref([]); // 日常督察问题排行分县市局 |
|
const jsdwChangedRankList = ref([]); // 日常督察问题排行局属单位 |
|
const wtlxList = ref([]); // 问题涉及方面分布 |
|
const rightOverview = ref({}); |
|
const fxsjYellowBetOverview = ref({ |
|
proTotal: 0, |
|
processingNumber: 0, |
|
completedNumber: 0, |
|
completedRate: 0, |
|
}); // 总览分县市局 |
|
const jsdwYellowBetOverview = ref({ |
|
proTotal: 0, |
|
processingNumber: 0, |
|
completedNumber: 0, |
|
completeRate: 0, |
|
}); // 总览局属单位 |
|
const fxsjYellowBetRankList = ref([]); // 问题排行分县市局 |
|
const jsdwYellowBetRankList = ref([]); // 问题排行局属单位 |
|
|
|
const messages = ref([]); |
|
const rcdcProRankTab = ref("1"); // 日常督察问题排行tab |
|
const zxdcProRankTab = ref("1"); // 专项督察问题排行tab |
|
const sceneInspRcdcProRankTabs = ref(null); |
|
const sceneProblemTypeRate = ref(null); |
|
const sceneMap = ref(null); |
|
const sceneInspProTrend = ref(null); |
|
const sceneInspZxdcProRankTabs = ref(null); |
|
const sceneScrollbar = ref(null); |
|
const currentIndex = ref(0); |
|
let sceneInspRcdxIntervalId; |
|
let sceneProblemTypeRateIntervalId; |
|
let sceneInspMapIntervalId; |
|
let sceneInspTrendIntervalId; |
|
let sceneInspZxdxIntervalId; |
|
let sceneWorkDynamicsIntervalId; |
|
|
|
const colors = [ |
|
{ |
|
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", |
|
percentage: 80, |
|
}, |
|
{ |
|
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", |
|
percentage: 60, |
|
}, |
|
{ |
|
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)", |
|
percentage: 0, |
|
}, |
|
]; |
|
const dayTimeColors = [ |
|
{ |
|
color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)", |
|
|
|
percentage: 80, |
|
}, |
|
{ |
|
color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)", |
|
percentage: 75, |
|
}, |
|
{ |
|
color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)", |
|
percentage: 0, |
|
}, |
|
]; |
|
// endregion |
|
|
|
// region 所有图表 |
|
const wtlxPieOption = computed(() => { |
|
return { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
series: [ |
|
{ |
|
type: "pie", |
|
radius: ["40%", "70%"], |
|
label: { |
|
color: "#fff", |
|
}, |
|
data: wtlxList.value, |
|
}, |
|
], |
|
}; |
|
}); |
|
echarts.registerMap("changsha", changshaMap); |
|
const superviseTempMapVoList = ref([]); |
|
const option = ref({ |
|
geo: { |
|
map: "changsha", |
|
itemStyle: { |
|
normal: { |
|
opacity: 0, // 设置透明度 |
|
}, |
|
}, |
|
}, |
|
tooltip: { |
|
trigger: "item", |
|
position: "bottom", |
|
formatter: function (params) { |
|
// console.log(params) |
|
const dataItem = superviseTempMapVoList.value.find((item) => |
|
item.name.includes(params.name.substring(0, 2)) |
|
); |
|
// <li>办结率 <span>${dataItem.completedRate}%</span></li> |
|
if (dataItem) { |
|
return ` |
|
<div class="tooltip"> |
|
<div class="tooltip-title">${dataItem.originalName}</div> |
|
<div class="tooltip-content"> |
|
<ul class="tooltip-ul" > |
|
<li>通报问题数 <span>${dataItem.totalPro}</span></li> |
|
<li>办理中 <span>${dataItem.processingNumber}</span></li> |
|
<li>已办结 <span>${dataItem.completedNumber}</span></li> |
|
<li>问责单位数 <span>${dataItem.relationOrg}</span></li> |
|
<li>问责人次 <span>${dataItem.personNum}</span></li> |
|
</ul> |
|
</div> |
|
</div>`; |
|
} else { |
|
return `<div class="tooltip"> |
|
<div class="tooltip-title">${params.name}</div> |
|
<div class="tooltip-content"> |
|
<ul class="tooltip-ul""> |
|
<li>通报问题数 <span>-</span></li> |
|
<li>办理中 <span>-</span></li> |
|
<li>已办结 <span>-</span></li> |
|
<li>问责单位数 <span>-</span></li> |
|
<li>问责人次 <span>-</span></li> |
|
</ul> |
|
</div> |
|
</div>`; |
|
} |
|
}, |
|
}, |
|
visualMap: { |
|
type: "piecewise", |
|
bottom: 10, |
|
pieces: [ |
|
{ gte: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6" }, |
|
{ |
|
gte: 200, |
|
lte: 400, |
|
label: "平均问题上下浮动30%内", |
|
color: "#F6A149", |
|
}, |
|
{ gte: 400, label: "高于平均问题30%", color: "#D34343" }, |
|
], |
|
right: 10, |
|
realtime: false, |
|
|
|
orient: "horizontal", |
|
textStyle: { |
|
color: "#fff", |
|
}, |
|
calculable: true, |
|
// inRange: { |
|
// color: ['#4987F6', '#F6A149', '#D34343'] |
|
// } |
|
}, |
|
series: [ |
|
{ |
|
name: "长沙", |
|
type: "map", |
|
map: "changsha", |
|
hoverAnimation: true, |
|
roam: true, |
|
label: { |
|
show: true, |
|
color: "white", |
|
}, |
|
itemStyle: { |
|
normal: { |
|
areaColor: "#02215E", |
|
borderColor: "#24D2EE", |
|
borderWidth: 1, // 高亮时边框宽度 |
|
}, |
|
}, |
|
emphasis: { |
|
areaColor: "#FFD700", // 高亮时区域颜色 |
|
borderColor: "#FF0000", // 高亮时边框颜色 |
|
borderWidth: 4, // 高亮时边框宽度 |
|
}, |
|
data: [], |
|
}, |
|
], |
|
}); |
|
const proTrend = ref({ |
|
grid: { |
|
left: "5%", // 图表距离容器左边的距离 |
|
right: "2%", // 图表距离容器右边的距离 |
|
top: "10%", // 图表距离容器上边的距离 |
|
bottom: "20%", // 图表距离容器下边的距离 |
|
containLabel: false, // 是否包含坐标轴的标签 |
|
}, |
|
xAxis: { |
|
type: "category", |
|
data: [], |
|
boundaryGap: true, |
|
axisTick: { |
|
// 去掉X轴刻度线 |
|
show: false, |
|
}, |
|
}, |
|
yAxis: { |
|
type: "value", |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#193775", |
|
}, |
|
}, |
|
}, |
|
tooltip: { |
|
trigger: "axis", |
|
axisPointer: { |
|
type: "line", |
|
label: { |
|
backgroundColor: "#6a7985", |
|
}, |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
type: "line", |
|
smooth: true, |
|
label: { |
|
show: false, |
|
}, |
|
lineStyle: { |
|
color: "#28E6FF", |
|
width: 4, |
|
}, |
|
areaStyle: { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
{ |
|
offset: 0, |
|
color: "rgba(40,230,255,0.47)", // 渐变起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(40,230,255,0)", // 渐变结束颜色 |
|
}, |
|
]), |
|
}, |
|
data: [], |
|
}, |
|
], |
|
}); |
|
// endregion |
|
|
|
// region 所有函数 |
|
const getChangedRankData = async () => { |
|
const res = await getChangedRank(time.value); |
|
leftOverview.value =res.overview; |
|
fxsjRankOverview.value = res.fxsjRankOverview; |
|
jsdwRankOverview.value = res.jsdwRankOverview; |
|
fxsjChangedRankList.value = res.fxsjChangedRankList; |
|
jsdwChangedRankList.value = res.jsdwChangedRankList; |
|
}; |
|
const getProblemTypeRateData = async () => { |
|
const res = await getProblemTypeRate(time.value); |
|
// wtlxList.value = circularChart; |
|
wtlxList.value = res.wtlxList; |
|
}; |
|
const getSupervisionNotifyCountData = async () => { |
|
const data = await getSupervisionNotifyCount(time.value); |
|
overview.value = data |
|
}; |
|
const getSupervisionNotifyMapData = async () => { |
|
const res = await getSupervisionNotifyMap(time.value); |
|
const mappedData = mapOrgNameMapping( |
|
res.superviseTempMapVoList, |
|
"totalPro" |
|
); |
|
const total = mappedData.reduce((sum, item) => sum + Number(item.value), 0); |
|
const avg = total / mappedData.length; // 计算平均值 |
|
const range30Percent = avg * 0.3; // 不用取整，小数也可以 |
|
option.value.visualMap.pieces = [ |
|
{ |
|
gte: 0, |
|
lte: avg - range30Percent, |
|
label: "低于平均问题30%", |
|
color: "#4987F6", |
|
}, |
|
{ |
|
gte: avg - range30Percent, |
|
lte: avg + range30Percent, |
|
label: "平均问题上下浮动30%内", |
|
color: "#F6A149", |
|
}, |
|
{ |
|
gte: avg + range30Percent, |
|
label: "高于平均问题30%", |
|
color: "#D34343", |
|
}, |
|
]; |
|
superviseTempMapVoList.value = mappedData; |
|
console.log('mappedData',mappedData) |
|
option.value.series[0].data = mappedData; |
|
}; |
|
const getSupervisionTrendData = async () => { |
|
const res = await getSupervisionTrend(selectedYear.value); |
|
const supervisionTrend = res.supervisionTrend; |
|
const categories = supervisionTrend.map((item) => item.name); |
|
const values = supervisionTrend.map((item) => item.value); |
|
// 更新图表数据 |
|
proTrend.value.xAxis.data = categories; |
|
proTrend.value.series[0].data = values; |
|
}; |
|
const getYellowBetDrugData = async () => { |
|
const res = await getYellowBetDrug(time.value, zxdcProRankTab.value); |
|
rightOverview.value = res.overView; |
|
fxsjYellowBetOverview.value = res.countyOverview; |
|
jsdwYellowBetOverview.value = res.bureauOverview; |
|
fxsjYellowBetRankList.value = res.countyRankList; |
|
jsdwYellowBetRankList.value = res.bureauRankList; |
|
}; |
|
|
|
watch(zxdcProRankTab, () => { |
|
getYellowBetDrugData() |
|
},{deep:true}) |
|
|
|
const getWorkDynamicsData = async () => { |
|
const data = await getWorkDynamics(time.value); |
|
const colorNewsVoList = workDynamicColorMapping(data); |
|
messages.value = colorNewsVoList; |
|
}; |
|
|
|
const getData =async () => { |
|
Promise.all([ |
|
getChangedRankData(), |
|
getSupervisionNotifyMapData(), |
|
getProblemTypeRateData(), |
|
getSupervisionNotifyCountData(), |
|
getSupervisionTrendData(), |
|
getYellowBetDrugData(), |
|
getWorkDynamicsData() |
|
]) |
|
|
|
}; |
|
// endregion |
|
|
|
// region 动画 |
|
// 日常督察问题排行动画 |
|
const sceneInspRcdxRankAnimation = () => { |
|
rcdcProRankTab.value = ( |
|
(parseInt(rcdcProRankTab.value) % 2) + |
|
1 |
|
).toString(); |
|
}; |
|
sceneInspRcdxIntervalId = setInterval(sceneInspRcdxRankAnimation, 3000); |
|
// 问题涉及方面分布 |
|
const sceneProblemTypeRateAnimation = () => { |
|
const temp = sceneProblemTypeRate?.value?.chart; |
|
if (!temp) return; |
|
const length = wtlxPieOption.value.series[0].data.length; |
|
const randomNum = Math.floor(Math.random() * length); |
|
temp?.dispatchAction({ type: "downplay", seriesIndex: 0 }); |
|
temp?.dispatchAction({ |
|
type: "highlight", |
|
seriesIndex: 0, |
|
dataIndex: randomNum, |
|
}); // 显示 |
|
temp?.dispatchAction({ |
|
type: "showTip", |
|
seriesIndex: 0, |
|
dataIndex: randomNum, |
|
}); |
|
}; |
|
sceneProblemTypeRateIntervalId = setInterval( |
|
sceneProblemTypeRateAnimation, |
|
2000 |
|
); |
|
// 地图动画 |
|
const sceneInspMapAnimation = () => { |
|
const mapTemp = sceneMap?.value?.chart; |
|
if (!mapTemp) return; |
|
// 来个随机数，9个图 0~8的整数就ok |
|
const randomNum = Math.floor(Math.random() * 9); |
|
mapTemp.dispatchAction({ |
|
type: "downplay", //downplay 取消高亮 |
|
seriesIndex: 0, |
|
}); |
|
mapTemp.dispatchAction({ |
|
type: "highlight", //highLight 高亮指定的数据图形 |
|
seriesIndex: 0, //系列index |
|
dataIndex: randomNum, //数据index |
|
}); |
|
mapTemp.dispatchAction({ |
|
type: "showTip", //showTip 显示提示框 |
|
seriesIndex: 0, |
|
dataIndex: randomNum, |
|
}); |
|
}; |
|
// 启动定时器，每隔 2 秒执行一次 |
|
sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000); |
|
// 问题趋势动画 |
|
const sceneInspTrendAnimation = () => { |
|
const trendTemp = sceneInspProTrend?.value?.chart; |
|
if (!trendTemp) return; |
|
const randomNum = Math.floor(Math.random() * 12); |
|
trendTemp.dispatchAction({ |
|
type: "showTip", |
|
seriesIndex: 0, |
|
dataIndex: randomNum, |
|
}); |
|
}; |
|
sceneInspTrendIntervalId = setInterval(sceneInspTrendAnimation, 2000); |
|
// 专项督察问题排行动画 |
|
const sceneInspZxdxRankAnimation = () => { |
|
if(dictData.value){ |
|
const dictItem = dictData.value.find( |
|
(item) => (item.dictValue === zxdcProRankTab.value) |
|
); |
|
if (dictItem) { |
|
const index = dictData.value.indexOf(dictItem); |
|
if (index === dictData.value.length - 1) { |
|
zxdcProRankTab.value = dictData[0]?.dictValue; |
|
} else { |
|
zxdcProRankTab.value = dictData[index + 1]?.dictValue; |
|
} |
|
} |
|
} |
|
}; |
|
|
|
onMounted(() => { |
|
sceneInspZxdxIntervalId = setInterval(sceneInspZxdxRankAnimation, 5000); |
|
}); |
|
|
|
// 工作动态动画 |
|
const sceneWorkDynamicsAnimation = () => { |
|
const sceneScrollTemp = sceneScrollbar?.value; |
|
const maxScroll = |
|
sceneScrollTemp?.wrapRef?.scrollHeight - |
|
sceneScrollTemp?.wrapRef?.clientHeight; |
|
currentIndex.value > maxScroll |
|
? (currentIndex.value = 0) |
|
: (currentIndex.value += 1); |
|
if (currentIndex.value === 0) { |
|
sceneScrollTemp?.scrollTo({ top: currentIndex.value }); |
|
} else { |
|
sceneScrollTemp?.scrollTo({ top: currentIndex.value }); |
|
} |
|
}; |
|
sceneWorkDynamicsIntervalId = setInterval(sceneWorkDynamicsAnimation, 50); |
|
// endregion |
|
|
|
// region 事件 |
|
watch(time, () => { |
|
|
|
getData(); |
|
}); |
|
onMounted(() => { |
|
getData(); |
|
setupEventListeners(); |
|
}); |
|
const handleCommand = (year) => { |
|
selectedYear.value = year; // 更新当前选中的年份 |
|
getSupervisionTrend(year).then((res) => { |
|
const supervisionTrend = res.supervisionTrend; |
|
const categories = supervisionTrend.map((item) => item.name); |
|
const values = supervisionTrend.map((item) => item.value); |
|
// 更新图表数据 |
|
proTrend.value.xAxis.data = categories; |
|
proTrend.value.series[0].data = values; |
|
}); |
|
}; |
|
|
|
const handleClick = (params) => { |
|
console.log('params',params) |
|
const departId = params.data.departId; |
|
const url = router.resolve({ |
|
path: "/datav/subOneSceneInsp", |
|
query: { departId: departId }, |
|
}).href; |
|
window.open(url, "_blank"); |
|
}; |
|
|
|
// 鼠标经过地图事件 |
|
const setupEventListeners = () => { |
|
sceneInspRcdxRankAnimationStop(); |
|
sceneProblemTypeRateAnimationStop(); |
|
sceneInspMapAnimationStop(); |
|
SceneInspTrendAnimationStop(); |
|
sceneInspZxdxRankAnimationStop(); |
|
sceneWorkDynamicsAnimationStop(); |
|
}; |
|
const sceneInspRcdxRankAnimationStop = () => { |
|
const temp = sceneInspRcdcProRankTabs.value?.$el; |
|
temp.addEventListener("mouseenter", () => { |
|
clearInterval(sceneInspRcdxIntervalId); |
|
}); |
|
temp.addEventListener("mouseleave", () => { |
|
clearInterval(sceneInspRcdxIntervalId); |
|
sceneInspRcdxIntervalId = setInterval(sceneInspRcdxRankAnimation, 3000); |
|
}); |
|
}; |
|
const sceneProblemTypeRateAnimationStop = () => { |
|
const temp = sceneProblemTypeRate?.value?.chart; |
|
temp.on("mousemove", (e) => { |
|
clearInterval(sceneProblemTypeRateIntervalId); |
|
temp.dispatchAction({ type: "downplay", seriesIndex: 0 }); |
|
temp.dispatchAction({ |
|
type: "highlight", |
|
seriesIndex: 0, |
|
dataIndex: e.dataIndex, |
|
}); |
|
temp.dispatchAction({ |
|
type: "showTip", |
|
seriesIndex: 0, |
|
dataIndex: e.dataIndex, |
|
}); |
|
}); |
|
temp.on("mouseout", () => { |
|
clearInterval(sceneProblemTypeRateIntervalId); |
|
sceneProblemTypeRateIntervalId = setInterval( |
|
sceneProblemTypeRateAnimation, |
|
2000 |
|
); |
|
}); |
|
}; |
|
const sceneInspMapAnimationStop = () => { |
|
const mapTemp = sceneMap?.value?.chart; |
|
// 鼠标移入 |
|
mapTemp.on("mousemove", (e) => { |
|
clearInterval(sceneInspMapIntervalId); |
|
mapTemp.dispatchAction({ type: "downplay", seriesIndex: 0 }); |
|
mapTemp.dispatchAction({ |
|
type: "highlight", |
|
seriesIndex: 0, |
|
dataIndex: e.dataIndex, |
|
}); |
|
mapTemp.dispatchAction({ |
|
type: "showTip", |
|
seriesIndex: 0, |
|
dataIndex: e.dataIndex, |
|
}); |
|
}); |
|
// 鼠标移出 |
|
mapTemp.on("mouseout", () => { |
|
clearInterval(sceneInspMapIntervalId); // 确保没有多个定时器同时运行 |
|
sceneInspMapIntervalId = setInterval(sceneInspMapAnimation, 2000); |
|
}); |
|
}; |
|
const SceneInspTrendAnimationStop = () => { |
|
const temp = sceneInspProTrend?.value.getDom(); |
|
temp.addEventListener("mouseenter", () => { |
|
clearInterval(sceneInspTrendIntervalId); |
|
}); |
|
temp.addEventListener("mouseleave", () => { |
|
clearInterval(sceneInspTrendIntervalId); |
|
sceneInspTrendIntervalId = setInterval(sceneInspTrendAnimation, 2000); |
|
}); |
|
}; |
|
const sceneInspZxdxRankAnimationStop = () => { |
|
const temp = sceneInspZxdcProRankTabs.value?.$el; |
|
temp.addEventListener("mouseenter", () => { |
|
clearInterval(sceneInspZxdxIntervalId); |
|
}); |
|
temp.addEventListener("mouseleave", () => { |
|
clearInterval(sceneInspZxdxIntervalId); |
|
}); |
|
}; |
|
const sceneWorkDynamicsAnimationStop = () => { |
|
const temp = sceneScrollbar.value?.$el; |
|
temp.addEventListener("mouseenter", () => { |
|
// alert(1); |
|
clearInterval(sceneWorkDynamicsIntervalId); |
|
}); |
|
temp.addEventListener("mouseleave", () => { |
|
clearInterval(sceneWorkDynamicsIntervalId); |
|
sceneWorkDynamicsIntervalId = setInterval( |
|
sceneWorkDynamicsAnimation, |
|
50 |
|
); |
|
}); |
|
}; |
|
|
|
const files = ref([]) |
|
const filePreviewShow = ref(false) |
|
function handlePerviewFile(msg) { |
|
if (msg.files) { |
|
filePreviewShow.value = true |
|
files.value = JSON.parse(msg.files) |
|
} |
|
} |
|
|
|
const handleShow =()=>{ |
|
show.value=true |
|
getReportList() |
|
} |
|
|
|
|
|
const tableRef = ref(null) |
|
const query = ref({ |
|
current: 1, |
|
size: 10, |
|
departBranch:false |
|
}) |
|
const listData = ref([]); |
|
const total = ref(0); |
|
const loading = ref(false); |
|
/** |
|
* 获取表单数据 |
|
* */ |
|
const getReportList =async ()=>{ |
|
loading.value=true |
|
try{ |
|
const res = await getListData(query.value); |
|
listData.value=res.records; |
|
total.value = res.total; |
|
loading.value = false |
|
}catch (e) { |
|
loading.value = false |
|
} |
|
} |
|
//督察问题 |
|
const negativeShow = ref(false) |
|
const negativeTable = ref(); |
|
const negativeQuery = ref({ |
|
current: 1, |
|
size: 10, |
|
departBranch:false |
|
}) |
|
const negativeTotal = ref(0); |
|
const negativeLoging = ref(false); |
|
const handleNegativeTable =async (row)=>{ |
|
if(row.superviseNumber > 0){ |
|
try{ |
|
negativeLoging.value=true; |
|
negativeQuery.value.id =row.id; |
|
await getNegativePageFun(); |
|
negativeShow.value = true; |
|
}catch (e){ |
|
console.log("督察问题获取失败") |
|
negativeLoging.value=false; |
|
} |
|
} |
|
} |
|
const getNegativePageFun = async ()=>{ |
|
|
|
const res = await getNegativePageByQuery(negativeQuery.value); |
|
negativeTable.value =res.records; |
|
negativeTotal.value = res.total; |
|
negativeLoging.value=false; |
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "@/style/datav.scss"; |
|
|
|
.message { |
|
padding: 10px; |
|
margin-bottom: 10px; |
|
background: linear-gradient( |
|
270deg, |
|
rgba(16, 151, 255, 0.1) 0%, |
|
rgba(0, 55, 236, 0.87) 100% |
|
); |
|
|
|
&[type="warning"] { |
|
background: linear-gradient( |
|
270deg, |
|
rgba(255, 190, 16, 0.1) 0%, |
|
rgba(236, 84, 0, 0.87) 100% |
|
); |
|
} |
|
|
|
&[type="success"] { |
|
background: linear-gradient( |
|
270deg, |
|
rgba(91, 216, 9, 0.14) 0%, |
|
#28813d 100% |
|
); |
|
} |
|
|
|
.message-title { |
|
font-size: 14px; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.message-content { |
|
margin-bottom: 10px; |
|
} |
|
} |
|
|
|
:deep() { |
|
// 弹框整体 |
|
.tooltip { |
|
position: relative; |
|
width: 160px; |
|
height: 194px; |
|
background: linear-gradient( |
|
180deg, |
|
rgba(1, 4, 87, 0.8) 0%, |
|
rgba(3, 21, 119, 0.8) 100% |
|
); |
|
border: 1px solid #4e8fff; |
|
margin: -10px -10px -10px -10px; |
|
} |
|
|
|
////浏阳市局 |
|
.tooltip-title { |
|
width: 160px; |
|
height: 43px; |
|
background: linear-gradient(180deg, #0a2f86 0%, #04154e 100%); |
|
box-shadow: inset 0px -1px 0px 0px #253755; |
|
display: flex; |
|
justify-content: center; /* 水平居中 */ |
|
align-items: center; /* 垂直居中 */ |
|
font-weight: 400; |
|
font-size: 16px; |
|
color: #ffffff; |
|
border-bottom: 1px solid #253755; /* 设置下边框 */ |
|
} |
|
|
|
.tooltip-content { |
|
width: 160px; |
|
height: 150px; |
|
background: linear-gradient(180deg, #010457 0%, #031577 100%); |
|
} |
|
|
|
.tooltip-content ul { |
|
list-style-type: none; /* 移除默认的小圆点 */ |
|
padding-left: 5px; |
|
margin: 0; |
|
} |
|
|
|
.tooltip-content ul li { |
|
height: 24px; |
|
color: #597ae9; |
|
font-weight: 400; |
|
font-size: 14px; |
|
} |
|
|
|
.tooltip-ul span { |
|
float: right; |
|
width: 55px; |
|
color: #fff; |
|
font-size: 14px; |
|
text-align: center; /* 水平居中 */ |
|
} |
|
|
|
} |
|
|
|
.test { |
|
width: 95px; |
|
height: 25px; |
|
background: #1c3472; |
|
} |
|
|
|
.gobal-dropdown-container { |
|
position: absolute; |
|
right: 20px; |
|
top: 15px; |
|
} |
|
|
|
.my-gobal-yearselect { |
|
font-size: 14px; |
|
padding-top: 6px; |
|
padding-left: 20px; |
|
width: 90px; |
|
color: #fff; |
|
} |
|
.message-link { |
|
font-size: 12px; |
|
color: #eee; |
|
&:hover { |
|
cursor: pointer; |
|
text-decoration: underline; |
|
|
|
} |
|
} |
|
</style>
|
|
|