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.
732 lines
20 KiB
732 lines
20 KiB
<template>
|
|
<cpt-card>
|
|
<div class="title">
|
|
<img src="@/assets/img/shuju/title-tip.png" />
|
|
<span>事件分类分析</span>
|
|
|
|
<div class="search">
|
|
<div class="second-select cascader">
|
|
<el-cascader class="customer_cascader"
|
|
ref="myCascader"
|
|
v-model="agencyIdArray"
|
|
:key="iscascaderShow"
|
|
:options="casOptions"
|
|
:props="optionProps"
|
|
:show-all-levels="false"
|
|
@change="handleChangeAgency"></el-cascader>
|
|
</div>
|
|
<div class="second-select">
|
|
<el-select v-model="dataType"
|
|
:popper-append-to-body="false"
|
|
placeholder="请选择">
|
|
<el-option v-for="item in dateArray"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
@click.native="handleChangeDate(item.value)">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<div v-if="dataType==='0'"
|
|
class="second-select range-data">
|
|
|
|
<el-date-picker v-model="timeRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
prefix-icon="el-icon-caret-bottom"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
@change="handleSelectChange">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="g-cpt-resi">
|
|
<div class="g-l">
|
|
<div class="l_top">
|
|
|
|
<div v-if="!pieNoData && !dataLoading"
|
|
class="g-pie">
|
|
<screen-echarts-frame class="echart-wr"
|
|
@myChartMethod="pieInitOk"
|
|
ref="pieChart"></screen-echarts-frame>
|
|
</div>
|
|
<screen-nodata class="nodata"
|
|
v-if="pieNoData&& !dataLoading"></screen-nodata>
|
|
<div class="table-status"
|
|
v-if="dataLoading">
|
|
<screen-loading>加载中</screen-loading>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="l_bottom">
|
|
<div v-if="!gridPieNoData && !dataLoading"
|
|
class="g-pie">
|
|
<screen-echarts-frame class="echart-grid-pie"
|
|
@myChartMethod="gridPieInitOk"
|
|
ref="gridPieChart"></screen-echarts-frame>
|
|
</div>
|
|
<screen-nodata class="nodata"
|
|
v-if="pieNoData&& !dataLoading"></screen-nodata>
|
|
<div class="table-status"
|
|
v-if="dataLoading">
|
|
<screen-loading>加载中</screen-loading>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-r">
|
|
<div class="m-tb">
|
|
|
|
<div class="tb">
|
|
<cpt-tb :col-list="demand.colList"
|
|
:loading="demand.loading"
|
|
:header="demand.header"
|
|
:list="demand.list"
|
|
@operate="toEventInfo"></cpt-tb>
|
|
|
|
</div>
|
|
<div class="m-pagination">
|
|
<el-pagination :current-page="demand.pageNo"
|
|
:page-size="demand.pageSize"
|
|
:total="demand.total"
|
|
background
|
|
layout="prev, pager, next,total"
|
|
@current-change="handlePageNoChange_demand">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<event-info v-if="showProject"
|
|
:eventId="eventId"
|
|
:orgId="tableOrgId ? tableOrgId : orgId"
|
|
:orgType="tableOrgType ? tableOrgType : orgType"
|
|
@close="showProject = false" />
|
|
</cpt-card>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { requestPost } from "@/js/dai/request"
|
|
import cptCard from "@/views/modules/visual/cpts/card"
|
|
import cptTb from "@/views/modules/visual/cpts/tb"
|
|
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame"
|
|
|
|
import ScreenLoading from "@/views/modules/visual/components/screen-loading"
|
|
import ScreenNodata from "@/views/modules/visual/components/screen-nodata"
|
|
import eventInfo from "../shijianchuli/event-info.vue"
|
|
|
|
import { pieOption } from './pieOption.js'
|
|
import dateFormat from "dai-js/tools/dateFormat"
|
|
import nextTick from 'dai-js/tools/nextTick'
|
|
|
|
|
|
const colorArray = ['#1B51FF', '#00E5ED', '#7800FF', '#16D783', '#FF7800', '#FFBA00', '#FFD685', '#2A00FF', '#C600FF', '#FF2A00']
|
|
export default {
|
|
name: "shijianchulifenxi",
|
|
data () {
|
|
return {
|
|
showProject: false,
|
|
dataLoading: true,
|
|
pieNoData: false,
|
|
gridPieNoData: false,
|
|
|
|
pieChartS: null,
|
|
pieChart: '',
|
|
pieOption: {},
|
|
pieInitState: false,
|
|
pieTotal: 0,
|
|
pieData: [],
|
|
|
|
gridPieChartS: null,
|
|
gridPieChart: '',
|
|
gridPieOption: {},
|
|
gridPieInitState: false,
|
|
gridPieTotal: 0,
|
|
gridPieData: [],
|
|
|
|
timeRange: [],
|
|
agencyId: '',
|
|
dataType: '1',
|
|
|
|
agencyInfo: {},
|
|
|
|
casOptions: [],
|
|
agencyIdArray: [],
|
|
customerList: [],
|
|
iscascaderShow: 0,
|
|
|
|
optionProps: {
|
|
multiple: false,
|
|
value: 'agencyId',
|
|
label: 'agencyName',
|
|
children: 'subAgencyList',
|
|
checkStrictly: true
|
|
},
|
|
dateArray: [
|
|
{
|
|
label: '近一年',
|
|
value: '1'
|
|
},
|
|
{
|
|
label: '近一个月',
|
|
value: '2'
|
|
},
|
|
{
|
|
label: '近三个月',
|
|
value: '3'
|
|
},
|
|
{
|
|
label: '近半年',
|
|
value: '4'
|
|
},
|
|
{
|
|
label: '自定义',
|
|
value: '0'
|
|
},
|
|
],
|
|
|
|
tableList: [],
|
|
demand: {
|
|
loading: true,
|
|
colList: [
|
|
{
|
|
align: "center",
|
|
width: "5%",
|
|
},
|
|
{
|
|
align: "center",
|
|
width: "15%",
|
|
},
|
|
{
|
|
align: "center",
|
|
width: "25%",
|
|
},
|
|
{
|
|
align: "center",
|
|
width: "10%",
|
|
},
|
|
{
|
|
align: "center",
|
|
width: "10%",
|
|
},
|
|
{
|
|
align: "center",
|
|
width: "10%",
|
|
},
|
|
{
|
|
align: "center",
|
|
width: "5%",
|
|
},
|
|
|
|
{
|
|
align: "center",
|
|
width: "10%",
|
|
},
|
|
],
|
|
header: ["序号", "所属网格", "事件内容", "上报渠道", "报事人", "手机号", "状态", "操作"],
|
|
list: [],
|
|
pageSize: 10,
|
|
pageNo: 1,
|
|
total: 0,
|
|
},
|
|
orgId: '',
|
|
orgType: 'agency',
|
|
queryStartTime: '',
|
|
queryEndTime: '',
|
|
categoryCode: '',
|
|
tableOrgId: '',
|
|
tableOrgType: '',
|
|
eventId: '',
|
|
processStatus: ''
|
|
}
|
|
},
|
|
// mixins: [animate]
|
|
beforeDestroy () {
|
|
|
|
},
|
|
async created () {
|
|
|
|
},
|
|
|
|
async mounted () {
|
|
this.dataLoading = true
|
|
// 初始化时间、各组件
|
|
this.initData()
|
|
await this.getAgencylist() // 获取组织级别
|
|
|
|
// 获取服务器数据
|
|
await this.handleChangeDate(this.dataType)
|
|
this.dataLoading = false
|
|
},
|
|
|
|
methods: {
|
|
async getApiData () {
|
|
await this.getPieData()
|
|
// await this.getGridPieData()
|
|
// await this.getTable()
|
|
|
|
// this.assignData()
|
|
},
|
|
|
|
|
|
async handleChangeDate (index) {
|
|
let end = new Date()
|
|
let start = new Date()
|
|
if (index === '1') { // 近一年
|
|
start.setFullYear(start.getFullYear() - 1)
|
|
} else if (index === '2') { // 近一个月
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
|
|
|
} else if (index === '3') { // 近三个月
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 91)
|
|
|
|
} else if (index === '4') { // 近半年
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
|
|
}
|
|
if (index != '0') {
|
|
this.queryStartTime = dateFormat(start, 'yyyy-MM-dd') + " 00:00:00"
|
|
this.queryEndTime = dateFormat(end, 'yyyy-MM-dd') + " 23:59:59"
|
|
}
|
|
if (index !== '0') {
|
|
this.categoryCode = ''
|
|
await this.getApiData()
|
|
// this.assignData()
|
|
}
|
|
},
|
|
|
|
assignData () {
|
|
this.getPie()
|
|
this.getGridPie()
|
|
},
|
|
|
|
handleSelectChange (value) {
|
|
console.log(value)
|
|
this.categoryCode = ''
|
|
this.queryStartTime = value[0] + " 00:00:00"
|
|
this.queryEndTime = value[1] + " 23:59:59"
|
|
this.getApiData()
|
|
},
|
|
|
|
// 获取当前登录人员信息及组织信息
|
|
async getAgencylist () {
|
|
const url = "/gov/org/customeragency/agencygridtree"
|
|
//const url = '/gov/org/customeragency/agencylist'
|
|
|
|
let params = {}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (code === 0) {
|
|
|
|
this.orgId = data.agencyId
|
|
|
|
//组织级联数据
|
|
++this.iscascaderShow
|
|
this.casOptions = []
|
|
this.agencyIdArray.length = []
|
|
|
|
if (data) {
|
|
this.casOptions.push(data)
|
|
this.agencyIdArray.push(this.orgId)
|
|
}
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
// 加载饼图1数据
|
|
async getPieData () {
|
|
if (this.$refs.pieChart) {
|
|
this.$refs.pieChart.showLoading()
|
|
this.$refs.pieChart.clear()
|
|
}
|
|
|
|
const url = "/gov/project/icEvent/category-analysis/total"
|
|
let params = {
|
|
orgId: this.orgId,
|
|
orgType: this.orgType,
|
|
queryStartTime: this.queryStartTime,
|
|
queryEndTime: this.queryEndTime
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (this.$refs.pieChart) {
|
|
this.$refs.pieChart.hideLoading()
|
|
}
|
|
if (code === 0) {
|
|
this.pieData = []
|
|
data.forEach((item, index) => {
|
|
let ob = {
|
|
value: item.total,
|
|
name: item.categoryName,
|
|
categoryCode: item.categoryCode,
|
|
color: item.color,
|
|
selected: false
|
|
}
|
|
this.pieData.push(ob)
|
|
})
|
|
this.getPie()
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
// 加载饼图2数据
|
|
async getGridPieData () {
|
|
if (this.$refs.gridPieChart) {
|
|
this.$refs.gridPieChart.showLoading()
|
|
this.$refs.gridPieChart.clear()
|
|
}
|
|
|
|
const url = "/gov/project/icEvent/category-analysis/org-total"
|
|
let params = {
|
|
orgId: this.orgId,
|
|
orgType: this.orgType,
|
|
queryStartTime: this.queryStartTime,
|
|
queryEndTime: this.queryEndTime,
|
|
categoryCode: this.categoryCode
|
|
}
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (this.$refs.gridPieChart) {
|
|
this.$refs.gridPieChart.hideLoading()
|
|
}
|
|
if (code === 0) {
|
|
this.gridPieData = []
|
|
data.forEach((item, index) => {
|
|
const colIndex = index < colorArray.length ? index : 0
|
|
let ob = {
|
|
value: item.total,
|
|
name: item.orgName,
|
|
orgId: item.orgId,
|
|
orgType: item.orgType,
|
|
color: colorArray[colIndex],
|
|
selected: false
|
|
}
|
|
this.gridPieData.push(ob)
|
|
})
|
|
this.getGridPie()
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getTable () {
|
|
const url = '/gov/project/icEvent/processAnalysis/eventList'
|
|
let params = {
|
|
orgId: this.tableOrgId ? this.tableOrgId : this.orgId,
|
|
orgType: this.tableOrgType ? this.tableOrgType : this.orgType,
|
|
queryStartTime: this.queryStartTime,
|
|
queryEndTime: this.queryEndTime,
|
|
processStatus: this.processStatus, // 处理状态，processing,closed_case。可为空，为空查询所有状态的事件列表
|
|
categoryCode: this.categoryCode,
|
|
pageNo: this.demand.pageNo,
|
|
pageSize: this.demand.pageSize,
|
|
biz: 'eventCategoryAnalysis'
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
this.demand.loading = false
|
|
|
|
if (code === 0) {
|
|
this.demand.total = data.total
|
|
this.tableList = data.list
|
|
this.demand.list = data.list.map((item, index) => {
|
|
return [
|
|
index + 1,
|
|
item.gridName ? item.gridName : '',
|
|
item.eventContent ? item.eventContent : '',
|
|
item.sourceTypeName ? item.sourceTypeName : '',
|
|
item.reportUserName ? item.reportUserName : '',
|
|
item.mobile ? item.mobile : 'processing',
|
|
item.processStatus ? item.processStatus === 'closed_case' ? '已完成' : '处理中' : '',
|
|
{ type: "operate", list: ["查看"] },
|
|
]
|
|
})
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
handlePageNoChange_demand (val) {
|
|
this.demand.pageNo = val
|
|
this.getTable()
|
|
},
|
|
|
|
|
|
async toEventInfo (index) {
|
|
const { tableList } = this
|
|
this.eventId = tableList[index].eventId
|
|
this.showProject = true
|
|
},
|
|
|
|
pieInitOk (dom) {
|
|
this.pieChartS = dom
|
|
this.pieInitState = true
|
|
},
|
|
|
|
getPie () {
|
|
if (this.pieInitState) {
|
|
this.assignPieChart()
|
|
} else {
|
|
setTimeout(() => {
|
|
this.getPie()
|
|
}, 500)
|
|
}
|
|
},
|
|
// 获取饼状图
|
|
async assignPieChart () {
|
|
|
|
this.pieTotal = 0
|
|
let maxIndex = 0
|
|
let maxValue = this.pieData[0].value
|
|
const _that = this
|
|
|
|
// 获取pieChart配置
|
|
this.pieOption = pieOption(this.pieChartS)
|
|
|
|
this.pieData.forEach((item, index) => {
|
|
this.pieTotal = this.pieTotal + item.value
|
|
// if (item.value > maxValue) {
|
|
// maxValue = item.value
|
|
// maxIndex = index
|
|
// item.selected = true
|
|
// } else if (index !== 0) {
|
|
// item.selected = false
|
|
// }
|
|
})
|
|
|
|
this.pieOption.title.text = this.pieTotal
|
|
|
|
this.clickPie() // this.clickPie(maxIndex)
|
|
|
|
let fun = function (params) {
|
|
_that.clickPie(params)
|
|
}
|
|
this.$refs.pieChart.handleClick(fun)
|
|
|
|
},
|
|
|
|
clickPie (params) {
|
|
let dataIndex = params ? params.dataIndex : null
|
|
let componentIndex = params ? params.componentIndex : null
|
|
if (componentIndex === 2) { // 点击中心
|
|
dataIndex = -1
|
|
this.categoryCode = ''
|
|
this.$refs.pieChart.clear()
|
|
}
|
|
this.pieData.forEach((element, index) => {
|
|
if (index === dataIndex) {
|
|
element.label = {
|
|
show: true,
|
|
}
|
|
element.labelLine = {
|
|
show: true,
|
|
lineStyle: {
|
|
opacity: 1,
|
|
}
|
|
}
|
|
this.categoryCode = element.categoryCode
|
|
element.selected = !element.selected
|
|
} else {
|
|
element.label = {
|
|
show: false,
|
|
}
|
|
element.labelLine = {
|
|
show: false,
|
|
lineStyle: {
|
|
opacity: 0,
|
|
color: 'rgba(255,255,255,0)'
|
|
}
|
|
}
|
|
element.selected = false
|
|
}
|
|
})
|
|
this.pieOption.series[1].data = this.pieData
|
|
// this.$refs.pieChart.hideLoading()
|
|
this.$refs.pieChart.setOption(this.pieOption)
|
|
this.tableOrgId = ''
|
|
this.tableOrgType = ''
|
|
this.demand.pageNo = 1
|
|
this.getGridPieData()
|
|
},
|
|
|
|
|
|
gridPieInitOk (dom) {
|
|
this.gridPieChartS = dom
|
|
this.gridPieInitState = true
|
|
},
|
|
|
|
getGridPie () {
|
|
if (this.gridPieInitState) {
|
|
this.assignGridPieChart()
|
|
} else {
|
|
setTimeout(() => {
|
|
this.getGridPie()
|
|
}, 500)
|
|
}
|
|
},
|
|
// 获取饼状图
|
|
async assignGridPieChart () {
|
|
this.gridPieTotal = 0
|
|
let maxIndex = 0
|
|
let maxValue = this.gridPieData[0].value
|
|
const _that = this
|
|
|
|
// 获取pieChart配置
|
|
this.gridPieOption = pieOption(this.gridPieChartS)
|
|
|
|
this.gridPieData.forEach((item, index) => {
|
|
this.gridPieTotal = this.gridPieTotal + item.value
|
|
// if (item.value > maxValue) {
|
|
// maxValue = item.value
|
|
// maxIndex = index
|
|
// item.selected = true
|
|
// } else if (index !== 0) {
|
|
// item.selected = false
|
|
// }
|
|
})
|
|
|
|
this.gridPieOption.title.text = this.gridPieTotal
|
|
// this.gridPieOption.legend.bottom = 50
|
|
|
|
this.clickGridPie() // this.clickGridPie(maxIndex)
|
|
|
|
let fun = function (params) {
|
|
_that.clickGridPie(params)
|
|
}
|
|
this.$refs.gridPieChart.handleClick(fun)
|
|
|
|
},
|
|
|
|
clickGridPie (params) {
|
|
let dataIndex = params ? params.dataIndex : null
|
|
let componentIndex = params ? params.componentIndex : null
|
|
if (componentIndex === 2) { // 点击中心
|
|
dataIndex = -1
|
|
this.tableOrgId = ''
|
|
this.tableOrgType = ''
|
|
this.$refs.gridPieChart.clear()
|
|
}
|
|
this.gridPieData.forEach((element, index) => {
|
|
if (index === dataIndex) {
|
|
element.label = {
|
|
show: true,
|
|
}
|
|
element.labelLine = {
|
|
show: true,
|
|
lineStyle: {
|
|
opacity: 1,
|
|
}
|
|
}
|
|
this.tableOrgId = element.orgId
|
|
this.tableOrgType = element.orgType
|
|
console.log(element)
|
|
} else {
|
|
element.label = {
|
|
show: false,
|
|
}
|
|
element.labelLine = {
|
|
show: false,
|
|
lineStyle: {
|
|
opacity: 0,
|
|
color: 'rgba(255,255,255,0)'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
this.gridPieOption.series[1].data = this.gridPieData
|
|
// this.$refs.pieChart.hideLoading()
|
|
this.$refs.gridPieChart.setOption(this.gridPieOption)
|
|
this.demand.pageNo = 1
|
|
this.getTable()
|
|
},
|
|
|
|
handleChangeAgency (value) {
|
|
this.categoryCode = ''
|
|
let obj = this.$refs["myCascader"].getCheckedNodes()[0].data
|
|
if (obj) {
|
|
this.orgType = obj.level === 'grid' ? 'grid' : 'agency'
|
|
this.orgId = obj.agencyId
|
|
|
|
} else {
|
|
this.orgId = ''
|
|
this.orgType = ''
|
|
}
|
|
this.getApiData()
|
|
|
|
// this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
|
|
// this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
|
|
// this.getApiData()
|
|
// console.log(this.agencyIdArray)
|
|
},
|
|
|
|
// 初始化时间
|
|
initData () {
|
|
var time = (new Date).getTime() - 24 * 60 * 60 * 1000
|
|
var nowdate = new Date(time) // 获取的是前一天日期
|
|
var y = nowdate.getFullYear()
|
|
var m = nowdate.getMonth() + 1 < 10 ? "0" + (nowdate.getMonth() + 1) : nowdate.getMonth() + 1
|
|
var d = nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate()
|
|
this.dateIdShow = y + '-' + m + '-' + d
|
|
},
|
|
|
|
toUserInfo (uid) {
|
|
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` })
|
|
},
|
|
},
|
|
props: {
|
|
uid: {
|
|
type: String,
|
|
default: "",
|
|
// default: "8ada68cb6f1e4b9a8333348a39ef3aee",
|
|
}
|
|
},
|
|
|
|
computed: {},
|
|
|
|
components: {
|
|
cptCard,
|
|
cptTb,
|
|
screenEchartsFrame,
|
|
|
|
ScreenLoading,
|
|
ScreenNodata,
|
|
eventInfo
|
|
},
|
|
|
|
watch: {
|
|
dateIdShow () {
|
|
// let dataArray = this.dateIdShow.split('-')
|
|
// this.dateId = dataArray.join('')
|
|
},
|
|
uid (id) {
|
|
this.userId = id
|
|
},
|
|
userId () {
|
|
this.getApiData()
|
|
window.scrollTo(0, 0)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/shijianfenleifenxi.scss"
|
|
scoped
|
|
></style>
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/search_1.scss"
|
|
scoped
|
|
></style>
|
|
|
|
|
|
|