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.
1130 lines
32 KiB
1130 lines
32 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,true)">
|
|
</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="bottom_label"
|
|
style="margin-top:20px">事件总览</div>
|
|
<div class="l_top">
|
|
|
|
<div v-if="!pieNoData && !dataLoading"
|
|
class="g-pie">
|
|
<div class="chart-container">
|
|
<div class="chart"
|
|
id="cityGreenLand"
|
|
ref="chart"></div>
|
|
<!-- <screen-echarts-frame class="echart-wr"
|
|
@myChartMethod="pieInitOk"
|
|
ref="pieChart"></screen-echarts-frame> -->
|
|
<!-- 底座背景 -->
|
|
<div class="bg"></div>
|
|
</div>
|
|
|
|
<!-- <div class="pie-legend">
|
|
<div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
|
|
v-for="(item,index) in legendArray"
|
|
:key="index">
|
|
<div class="item_name">{{item.name}}</div>
|
|
<img :src="item.url" />
|
|
|
|
</div>
|
|
</div> -->
|
|
|
|
</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 class="bottom_label">月度新增事件统计</div>
|
|
<screen-echarts-frame v-if="!lineNoData&& !dataLoading"
|
|
class="echart-line"
|
|
@myChartMethod="lineInitOk"
|
|
ref="lineChart"></screen-echarts-frame>
|
|
<screen-nodata class="nodata"
|
|
v-if="lineNoData&& !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="orgId"
|
|
:orgType="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 "./event-info";
|
|
|
|
import { pieOption } from './pieOption.js'
|
|
import { lineOption } from './lineOption.js'
|
|
import nextTick from 'dai-js/tools/nextTick'
|
|
import dateFormat from "dai-js/tools/dateFormat";
|
|
|
|
import * as echarts from 'echarts';
|
|
import 'echarts-gl';
|
|
import { getPie3D, getParametricEquation } from './chart.js' //工具类js，页面路径自己修改
|
|
|
|
const color = ['#0075ff', '#ffa516']
|
|
|
|
export default {
|
|
name: "shijianchulifenxi",
|
|
data () {
|
|
return {
|
|
dataLoading: true,
|
|
pieNoData: false,
|
|
lineNoData: false,
|
|
isfirstInit: true,//记录地图是否第一次加载
|
|
|
|
projectTotal: 0,
|
|
processingCount: 0,
|
|
processingRatio: 0,
|
|
|
|
lineChart: '',
|
|
lineOption: {},
|
|
lineInitState: false,
|
|
lineColorArray: [],
|
|
lineData: [],
|
|
lineXaxis: [],
|
|
lineSeriesData: [],
|
|
|
|
pieChartS: null,
|
|
pieChart: '',
|
|
pieOption: {},
|
|
pieInitState: false,
|
|
|
|
|
|
pieData: [],
|
|
optionData: [
|
|
{
|
|
name: '处理中',
|
|
value: 28
|
|
},
|
|
{
|
|
name: '已完成',
|
|
value: 72
|
|
}
|
|
],
|
|
optionDataLine: [
|
|
{
|
|
name: '处理中',
|
|
value: 50
|
|
},
|
|
{
|
|
name: '已完成',
|
|
value: 50
|
|
}
|
|
],
|
|
statusChart: null,
|
|
option: {},
|
|
|
|
legendArray: [
|
|
{
|
|
name: '未结案',
|
|
count: 0,
|
|
percent: '0%',
|
|
url: require('@/assets/img/shuju/measure/huang@2x.png')
|
|
},
|
|
{
|
|
name: '已结案',
|
|
count: 0,
|
|
percent: '0%',
|
|
url: require('@/assets/img/shuju/measure/lv@2x.png')
|
|
}
|
|
],
|
|
|
|
timeRange: [],
|
|
|
|
orgId: '',
|
|
orgType: 'agency',
|
|
queryStartTime: '',
|
|
queryEndTime: '',
|
|
processStatus: 'closed_case',
|
|
dataType: '1',
|
|
|
|
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,
|
|
},
|
|
|
|
showProject: false,
|
|
eventId: '',
|
|
|
|
beta: 20,
|
|
selectedIndex: ''
|
|
|
|
};
|
|
},
|
|
// mixins: [animate]
|
|
beforeDestroy () {
|
|
|
|
},
|
|
async created () {
|
|
|
|
},
|
|
|
|
async mounted () {
|
|
this.dataLoading = true
|
|
//初始化时间、各组件
|
|
this.initData()
|
|
await this.getAgencylist()//获取组织级别
|
|
this.handleChangeDate(this.dataType, false)
|
|
//获取服务器数据
|
|
|
|
await this.getProjectTotal()
|
|
await this.getLineChart()
|
|
await this.getTable()
|
|
|
|
this.dataLoading = false
|
|
|
|
|
|
this.assignData()
|
|
|
|
},
|
|
|
|
methods: {
|
|
async getApiData () {
|
|
this.getTable()
|
|
await this.getProjectTotal()
|
|
await this.getLineChart()
|
|
|
|
this.assignData()
|
|
|
|
},
|
|
|
|
async handleChangeDate (index, isRefresh) {
|
|
let end = new Date();
|
|
let start = new Date();
|
|
if (index === '1') {//近一年
|
|
start.setFullYear(start.getFullYear() - 1);
|
|
console.log(start.getDate())
|
|
} 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' && isRefresh) {
|
|
await this.getApiData()
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
assignData () {
|
|
this.initChart()
|
|
|
|
this.getLine()
|
|
},
|
|
|
|
handleSelectChange (value) {
|
|
|
|
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);
|
|
}
|
|
|
|
},
|
|
|
|
//加载项目
|
|
async getProjectTotal () {
|
|
// if (this.$refs.pieChart) {
|
|
// this.$refs.pieChart.showLoading()
|
|
// this.$refs.pieChart.clear()
|
|
// }
|
|
|
|
const url = "/gov/project/icEvent/processAnalysis/processStatusRatio";
|
|
//const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/processStatusRatio";
|
|
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.projectTotal = parseInt(data.processingCount) + parseInt(data.closedCount);
|
|
|
|
this.legendArray = [
|
|
{
|
|
name: '已完成',
|
|
count: data.closedCount,
|
|
percent: data.closedRatio,
|
|
url: require('@/assets/img/shuju/measure/huang@2x.png')
|
|
},
|
|
{
|
|
name: '处理中',
|
|
count: data.processingCount,
|
|
percent: data.processingRatio,
|
|
url: require('@/assets/img/shuju/measure/lv@2x.png')
|
|
}
|
|
]
|
|
let dataClosed = Math.floor(data.closedRatio * 10000) / 100
|
|
let dataPro = Math.floor(data.processingRatio * 10000) / 100
|
|
if (data.closedRatio === 0 && data.processingRatio === 0) {
|
|
dataClosed = 50
|
|
dataPro = 50
|
|
}
|
|
let dataClosedLine = Math.floor(data.closedRatio * 10000) / 100
|
|
let dataProLine = Math.floor(data.processingRatio * 10000) / 100
|
|
|
|
// dataClosed = 5
|
|
// dataPro = 95
|
|
|
|
// dataClosed = 10
|
|
// dataPro = 90
|
|
// dataClosedLine = 10
|
|
// dataProLine = 90
|
|
|
|
// dataClosed = 20
|
|
// dataPro = 80
|
|
|
|
// dataClosed = 30
|
|
// dataPro = 70
|
|
|
|
// dataClosed = 40
|
|
// dataPro = 60
|
|
|
|
// dataClosed = 50
|
|
// dataPro = 50
|
|
|
|
|
|
if (Math.abs(dataClosed - dataPro) > 80) {
|
|
this.beta = 70
|
|
} else if (Math.abs(dataClosed - dataPro) > 70) {
|
|
this.beta = 60
|
|
} else if (Math.abs(dataClosed - dataPro) > 50) {
|
|
this.beta = 20
|
|
} else if (Math.abs(dataClosed - dataPro) > 30) {
|
|
this.beta = -20
|
|
} else if (Math.abs(dataClosed - dataPro) > 10) {
|
|
this.beta = -30
|
|
} else {
|
|
this.beta = -60
|
|
}
|
|
|
|
this.optionData = [
|
|
{
|
|
name: "已完成",
|
|
value: dataClosed
|
|
},
|
|
{
|
|
name: "处理中",
|
|
value: dataPro
|
|
},
|
|
]
|
|
|
|
this.optionDataLine = [
|
|
|
|
{
|
|
name: "已完成",
|
|
value: dataClosedLine
|
|
},
|
|
{
|
|
name: "处理中",
|
|
value: dataProLine
|
|
},
|
|
]
|
|
this.setLabel()
|
|
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载组织数据
|
|
async getTable () {
|
|
const url = "/gov/project/icEvent/processAnalysis/eventList";
|
|
//const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/processAnalysis/eventList";
|
|
let params = {
|
|
processStatus: this.processStatus,
|
|
orgId: this.orgId,
|
|
orgType: this.orgType,
|
|
queryStartTime: this.queryStartTime,
|
|
queryEndTime: this.queryEndTime,
|
|
pageNo: this.demand.pageNo,
|
|
pageSize: this.demand.pageSize,
|
|
biz: 'eventProcessAnalysis'
|
|
};
|
|
|
|
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();
|
|
},
|
|
|
|
|
|
toEventInfo (index) {
|
|
const { tableList } = this;
|
|
this.eventId = tableList[index].eventId
|
|
|
|
this.showProject = true
|
|
|
|
},
|
|
|
|
pieInitOk (dom) {
|
|
this.pieChartS = dom
|
|
this.pieInitState = true
|
|
},
|
|
lineInitOk () {
|
|
|
|
this.lineInitState = true
|
|
|
|
},
|
|
getLine () {
|
|
if (this.lineInitState) {
|
|
this.assignLineChart()
|
|
} else {
|
|
setTimeout(() => {
|
|
this.getLine()
|
|
}, 500)
|
|
}
|
|
},
|
|
// 获取折线图
|
|
async getLineChart () {
|
|
if (this.$refs.lineChart) {
|
|
this.$refs.lineChart.clear()
|
|
this.$refs.lineChart.showLoading()
|
|
}
|
|
const _that = this
|
|
// this.$refs.pieChart.showLoading()
|
|
const url = "/gov/project/icEvent/processAnalysis/monthlyIncrement";
|
|
//const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/monthlyIncrement";
|
|
let params = {
|
|
orgId: this.orgId,
|
|
orgType: this.orgType,
|
|
queryStartTime: this.queryStartTime,
|
|
queryEndTime: this.queryEndTime,
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
// 获取pieChart配置
|
|
|
|
this.lineXaxis = []
|
|
this.lineSeriesData = []
|
|
if (data && data.length > 0) {
|
|
this.lineNoData = false
|
|
data.forEach(item => {
|
|
this.lineXaxis.push(item.monthName)
|
|
this.lineSeriesData.push(item.increment)
|
|
});
|
|
this.lineData = data
|
|
|
|
} else {
|
|
this.lineNoData = true
|
|
}
|
|
|
|
if (this.$refs.lineChart) {
|
|
this.$refs.lineChart.hideLoading()
|
|
}
|
|
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
|
|
|
|
},
|
|
|
|
assignLineChart () {
|
|
|
|
this.lineOption = lineOption()
|
|
this.$refs.lineChart.setOption(this.lineOption, true)
|
|
this.$refs.lineChart.setOption({
|
|
xAxis: { data: this.lineXaxis },
|
|
series: [
|
|
{ data: this.lineSeriesData },
|
|
{ data: this.lineSeriesData },
|
|
|
|
]
|
|
}, true)
|
|
},
|
|
|
|
setLabel () {
|
|
this.optionDataLine.forEach((item, index) => {
|
|
|
|
item.itemStyle = {
|
|
color: color[index]
|
|
}
|
|
item.label = {
|
|
normal: {
|
|
show: true,
|
|
color: color[index],
|
|
formatter: [
|
|
'{d|{d}%}',
|
|
'{b|{b}}'
|
|
].join('\n'), // 用\n来换行
|
|
rich: {
|
|
b: {
|
|
color: '#fff',
|
|
lineHeight: 25,
|
|
align: 'left',
|
|
fontSize: 13,
|
|
marginTop: 20
|
|
},
|
|
c: {
|
|
fontSize: 22,
|
|
color: '#fff',
|
|
textShadowColor: '#1c90a6',
|
|
textShadowOffsetX: 0,
|
|
textShadowOffsetY: 2,
|
|
textShadowBlur: 5
|
|
},
|
|
d: {
|
|
color: color[index],
|
|
fontSize: 22,
|
|
align: 'left'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
item.labelLine = {
|
|
|
|
normal: {
|
|
show: true,
|
|
length: 30,
|
|
length2: 80,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: 'rgba(255,255,255,0.7)'
|
|
}
|
|
}
|
|
}
|
|
item.labelLayout = function (params) {
|
|
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
|
|
const points = params.labelLinePoints;
|
|
// Update the end point.
|
|
points[2][0] = isLeft
|
|
? params.labelRect.x
|
|
: params.labelRect.x + params.labelRect.width;
|
|
return {
|
|
labelLinePoints: points
|
|
};
|
|
}
|
|
})
|
|
this.optionData.forEach((item, index) => {
|
|
|
|
item.itemStyle = {
|
|
color: color[index]
|
|
}
|
|
item.label = {
|
|
normal: {
|
|
show: true,
|
|
color: color[index],
|
|
formatter: [
|
|
'{d|{d}%}',
|
|
'{b|{b}}'
|
|
].join('\n'), // 用\n来换行
|
|
rich: {
|
|
b: {
|
|
color: '#fff',
|
|
lineHeight: 25,
|
|
align: 'left',
|
|
fontSize: 13,
|
|
marginTop: 20
|
|
},
|
|
c: {
|
|
fontSize: 22,
|
|
color: '#fff',
|
|
textShadowColor: '#1c90a6',
|
|
textShadowOffsetX: 0,
|
|
textShadowOffsetY: 2,
|
|
textShadowBlur: 5
|
|
},
|
|
d: {
|
|
color: color[index],
|
|
fontSize: 22,
|
|
align: 'left'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
item.labelLine = {
|
|
|
|
normal: {
|
|
show: true,
|
|
length: 30,
|
|
length2: 80,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: 'rgba(255,255,255,0.7)'
|
|
}
|
|
}
|
|
}
|
|
item.labelLayout = function (params) {
|
|
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
|
|
const points = params.labelLinePoints;
|
|
// Update the end point.
|
|
points[2][0] = isLeft
|
|
? params.labelRect.x
|
|
: params.labelRect.x + params.labelRect.width;
|
|
return {
|
|
labelLinePoints: points
|
|
};
|
|
}
|
|
})
|
|
},
|
|
|
|
// 图表初始化
|
|
initChart () {
|
|
this.$nextTick(() => {
|
|
// let statusChart = echarts.init(document.getElementById('cityGreenLand-charts'));
|
|
this.statusChart = echarts.init(document.getElementById('cityGreenLand'));
|
|
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
|
|
this.option = getPie3D(this.optionData, 0.8, 300, 28, 22, 0.5, this.beta)
|
|
console.log(this.option)
|
|
this.statusChart.setOption(this.option)
|
|
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
|
|
this.option.series.push({
|
|
name: '', //自己根据场景修改
|
|
backgroundColor: 'transparent',
|
|
type: 'pie',
|
|
label: {
|
|
opacity: 1,
|
|
fontSize: 13,
|
|
lineHeight: 20
|
|
},
|
|
startAngle: -this.beta, // 起始角度，支持范围[0, 360]。
|
|
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|
radius: ['30%', '35%'],
|
|
center: ['50%', '50%'],
|
|
data: this.optionDataLine,
|
|
itemStyle: {
|
|
opacity: 0 //这里必须是0，不然2d的图会覆盖在表面
|
|
},
|
|
|
|
})
|
|
this.statusChart.setOption(this.option)
|
|
this.bindListen(this.statusChart)
|
|
})
|
|
|
|
},
|
|
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
|
|
// optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
|
|
bindListen (myChart, optionName = 'option') {
|
|
// let selectedIndex = ''
|
|
let hoveredIndex = ''
|
|
|
|
// 监听点击事件，实现选中效果（单选）
|
|
myChart.on('click', (params) => {
|
|
let dataIndex = null
|
|
console.log('params', params)
|
|
console.log('params.seriesIndex', params.seriesIndex)
|
|
console.log('this[optionName].series', this[optionName].series)
|
|
console.log('this[optionName].series[params.seriesIndex]', this[optionName].series[params.seriesIndex])
|
|
|
|
if (params.componentSubType === 'pie') {//点击指引线
|
|
dataIndex = params.dataIndex
|
|
this.click3DPie(myChart, 'option', dataIndex)
|
|
|
|
|
|
if (dataIndex === 0) {//序列1 已完成
|
|
this.processStatus = 'closed_case'
|
|
|
|
} else if (dataIndex === 1) {//序列2 处理中
|
|
this.processStatus = 'processing'
|
|
} else {
|
|
this.processStatus = ''
|
|
}
|
|
if (!this.selectedIndex) {
|
|
this.processStatus = ''
|
|
}
|
|
|
|
} else {//点击环形
|
|
dataIndex = params.seriesIndex
|
|
this.click3DPie(myChart, 'option', dataIndex)
|
|
|
|
|
|
//刷新右侧table
|
|
if (this.selectedIndex || this.selectedIndex === 0) {
|
|
|
|
if (this.selectedIndex === 0) {
|
|
this.processStatus = 'closed_case'
|
|
} else if (this.selectedIndex === 1) {
|
|
this.processStatus = 'processing'
|
|
}
|
|
|
|
|
|
} else {
|
|
this.processStatus = ''
|
|
|
|
}
|
|
|
|
}
|
|
this.getTable()
|
|
|
|
})
|
|
// 监听 mouseover，近似实现高亮（放大）效果
|
|
// myChart.on('mouseover', (params) => {
|
|
// // 准备重新渲染扇形所需的参数
|
|
// let isSelected
|
|
// let isHovered
|
|
// let startRatio
|
|
// let endRatio
|
|
// let k
|
|
// // 如果触发 mouseover 的扇形当前已高亮，则不做操作
|
|
// if (hoveredIndex === params.seriesIndex) {
|
|
// // 否则进行高亮及必要的取消高亮操作
|
|
// } else {
|
|
// // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
|
|
// if (hoveredIndex !== '') {
|
|
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
|
|
// isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
|
|
// isHovered = false
|
|
// startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
|
|
// endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
|
|
// k = this[optionName].series[hoveredIndex].pieStatus.k
|
|
// // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
|
// this[optionName].series[
|
|
// hoveredIndex
|
|
// ].parametricEquation = getParametricEquation(
|
|
// startRatio,
|
|
// endRatio,
|
|
// isSelected,
|
|
// isHovered,
|
|
// k,
|
|
// this[optionName].series[hoveredIndex].pieData.value
|
|
// )
|
|
// this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
|
|
// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
|
// hoveredIndex = ''
|
|
// }
|
|
// // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
|
|
// if (
|
|
// params.seriesName !== 'mouseoutSeries' &&
|
|
// params.seriesName !== 'pie2d'
|
|
// ) {
|
|
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
|
// isSelected =
|
|
// this[optionName].series[params.seriesIndex].pieStatus.selected
|
|
// isHovered = true
|
|
// startRatio =
|
|
// this[optionName].series[params.seriesIndex].pieData.startRatio
|
|
// endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio
|
|
// k = this[optionName].series[params.seriesIndex].pieStatus.k
|
|
// // 对当前点击的扇形，执行高亮操作（对 option 更新）
|
|
// this[optionName].series[
|
|
// params.seriesIndex
|
|
// ].parametricEquation = getParametricEquation(
|
|
// startRatio,
|
|
// endRatio,
|
|
// isSelected,
|
|
// isHovered,
|
|
// k,
|
|
// this[optionName].series[params.seriesIndex].pieData.value + 60
|
|
// )
|
|
// this[optionName].series[
|
|
// params.seriesIndex
|
|
// ].pieStatus.hovered = isHovered
|
|
// // 记录上次高亮的扇形对应的系列号 seriesIndex
|
|
// hoveredIndex = params.seriesIndex
|
|
// }
|
|
// // 使用更新后的 option，渲染图表
|
|
// myChart.setOption(this[optionName])
|
|
// }
|
|
// })
|
|
// // 修正取消高亮失败的 bug
|
|
// myChart.on('globalout', () => {
|
|
// // 准备重新渲染扇形所需的参数
|
|
// let isSelected
|
|
// let isHovered
|
|
// let startRatio
|
|
// let endRatio
|
|
// let k
|
|
// if (hoveredIndex !== '') {
|
|
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
|
|
// isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
|
|
// isHovered = false
|
|
// k = this[optionName].series[hoveredIndex].pieStatus.k
|
|
// startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
|
|
// endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
|
|
// // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
|
|
// this[optionName].series[
|
|
// hoveredIndex
|
|
// ].parametricEquation = getParametricEquation(
|
|
// startRatio,
|
|
// endRatio,
|
|
// isSelected,
|
|
// isHovered,
|
|
// k,
|
|
// this[optionName].series[hoveredIndex].pieData.value
|
|
// )
|
|
// this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
|
|
// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
|
|
// hoveredIndex = ''
|
|
// }
|
|
// // 使用更新后的 option，渲染图表
|
|
// myChart.setOption(this[optionName])
|
|
// })
|
|
|
|
},
|
|
|
|
click3DPie (myChart, optionName, seriesIndex) {
|
|
|
|
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
|
|
const isSelected = !this[optionName].series[seriesIndex].pieStatus.selected
|
|
const isHovered = this[optionName].series[seriesIndex].pieStatus.hovered
|
|
const k = this[optionName].series[seriesIndex].pieStatus.k
|
|
|
|
const startRatio = this[optionName].series[seriesIndex].pieData.startRatio
|
|
const endRatio = this[optionName].series[seriesIndex].pieData.endRatio
|
|
|
|
|
|
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
|
|
if (this.selectedIndex !== '' && this.selectedIndex !== null && this.selectedIndex !== seriesIndex) {
|
|
this[optionName].series[
|
|
this.selectedIndex
|
|
].parametricEquation = getParametricEquation(
|
|
this[optionName].series[this.selectedIndex].pieData.startRatio,
|
|
this[optionName].series[this.selectedIndex].pieData.endRatio,
|
|
false,
|
|
false,
|
|
k,
|
|
this[optionName].series[this.selectedIndex].pieData.value
|
|
)
|
|
this[optionName].series[this.selectedIndex].pieStatus.selected = false
|
|
}
|
|
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
|
|
this[optionName].series[
|
|
seriesIndex
|
|
].parametricEquation = getParametricEquation(
|
|
startRatio,
|
|
endRatio,
|
|
isSelected,
|
|
isHovered,
|
|
k,
|
|
this[optionName].series[seriesIndex].pieData.value
|
|
)
|
|
this[optionName].series[seriesIndex].pieStatus.selected = isSelected
|
|
|
|
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
|
|
this.selectedIndex = isSelected ? seriesIndex : null
|
|
// 使用更新后的 option，渲染图表
|
|
myChart.setOption(this[optionName])
|
|
},
|
|
|
|
handleChangeAgency () {
|
|
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()
|
|
},
|
|
|
|
//初始化时间
|
|
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;
|
|
},
|
|
|
|
},
|
|
props: {
|
|
uid: {
|
|
type: String,
|
|
default: "",
|
|
// default: "8ada68cb6f1e4b9a8333348a39ef3aee",
|
|
},
|
|
},
|
|
|
|
computed: {},
|
|
|
|
components: {
|
|
cptCard,
|
|
cptTb,
|
|
screenEchartsFrame,
|
|
eventInfo,
|
|
ScreenLoading,
|
|
ScreenNodata
|
|
},
|
|
|
|
watch: {
|
|
dateIdShow () {
|
|
|
|
// let dataArray = this.dateIdShow.split('-')
|
|
// this.dateId = dataArray.join('')
|
|
},
|
|
uid (id) {
|
|
this.userId = id;
|
|
},
|
|
userId () {
|
|
|
|
window.scrollTo(0, 0);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/shijianchulifenxi.scss"
|
|
scoped
|
|
></style>
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/search_1.scss"
|
|
scoped
|
|
></style>
|
|
|
|
<style lang='scss' scoped>
|
|
.chart-container {
|
|
position: relative;
|
|
width: 600px;
|
|
height: 500px;
|
|
margin-top: 0;
|
|
|
|
.chart,
|
|
.bg {
|
|
width: 600px;
|
|
height: 500px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.bg {
|
|
position: absolute;
|
|
bottom: 155px;
|
|
left: 50%;
|
|
z-index: 1;
|
|
width: 250px;
|
|
height: 140px;
|
|
background: no-repeat center;
|
|
background-image: url("../../../../../assets/img/shuju/3d-pid-bg.png");
|
|
background-size: 100% 100%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|