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.
1289 lines
41 KiB
1289 lines
41 KiB
<template>
|
|
<div class="address_edit">
|
|
<!-- 导航栏 -->
|
|
<!-- <div class="header_body">
|
|
<header-nav
|
|
:slefBack="true"
|
|
@goBack="goBack"
|
|
:titelText="`统计分析`"
|
|
>
|
|
</header-nav>
|
|
</div> -->
|
|
<!-- 中间 -->
|
|
<div class="warp_body">
|
|
<div class="countbox">
|
|
<div class="search-button-list">
|
|
<van-button plain hairline :class="6==data.checkNum?'search-button active':'search-button'"
|
|
@click="searchDateType(6)" round type="primary"
|
|
size="mini">月度
|
|
</van-button>
|
|
<van-button plain hairline :class="1==data.checkNum?'search-button active':'search-button'"
|
|
@click="searchDateType(1)" round type="primary"
|
|
size="mini">季度
|
|
</van-button>
|
|
<van-button plain hairline :class="5==data.checkNum?'search-button active':'search-button'"
|
|
@click="searchDateType(5)" round type="primary"
|
|
size="mini">年度
|
|
</van-button>
|
|
<van-button plain hairline :class="9==data.checkNum?'search-button active':'search-button'"
|
|
@click="selectDate" round type="primary" size="mini">筛选
|
|
</van-button>
|
|
</div>
|
|
<div class="curtime"><div @click="data.showTimePicker = true">{{ searchParam.dateSearch }}</div> <van-icon name="play" /></div>
|
|
<div class="person-data">
|
|
<div class="count-tit">个人执法数量</div>
|
|
<div class="count-tot"><b>{{ data.oneself.allTotal }}</b>件</div>
|
|
<div class="percent-tag">
|
|
<span class="percent-month">环比：<span :class="data.oneself.huan >= 0 ? 'data-rise': 'data-fall'"><van-icon name="down" />{{ data.oneself.huan }}件</span></span>
|
|
<span class="percent-year">同比：<span :class="data.oneself.tong >= 0 ? 'data-rise': 'data-fall'"><van-icon name="down" />{{ data.oneself.tong }}件</span></span>
|
|
</div>
|
|
<div class="count-com"><i>投诉：</i><b>{{ data.oneself.complaintCount }}</b>件</div>
|
|
</div>
|
|
<van-divider />
|
|
<div class="depart-data">
|
|
<div class="count-tit">部门执法数量</div>
|
|
<div class="count-tot"><b>{{ data.dept.allTotal }}</b>件</div>
|
|
<div class="percent-tag">
|
|
<span class="percent-month">环比：<span :class="data.dept.huan >= 0 ? 'data-rise': 'data-fall'"><van-icon name="down" />{{ data.dept.huan }}件</span></span>
|
|
<span class="percent-year">同比：<span :class="data.dept.tong >= 0 ? 'data-rise': 'data-fall'"><van-icon name="down" />{{ data.dept.tong }}件</span></span>
|
|
</div>
|
|
<div class="count-com"><i>投诉：</i><b>{{ data.dept.complaintCount }}</b>件</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-tag">
|
|
<van-tabs v-model:active="active" type="card" @click-tab="onClickTab">
|
|
<van-tab title="个人"></van-tab>
|
|
<van-tab title="部门"></van-tab>
|
|
</van-tabs>
|
|
</div>
|
|
|
|
|
|
<div class="dropdown-box">
|
|
<span @click="showPopup()"><label>区域</label><van-icon name="arrow-down" /></span>
|
|
<span @click="openPicker()"><label>部门</label><van-icon name="arrow-down" /></span>
|
|
<span @click="openQyPicker()"><label>企业</label><van-icon name="arrow-down" /></span>
|
|
<span @click="openJcPicker()"><label>执法</label><van-icon name="arrow-down" /></span>
|
|
<span @click="openTsPicker()"><label>投诉</label><van-icon name="arrow-down" /></span>
|
|
</div>
|
|
<Popup :visible="popupVisible" :content="popupContent" @close="closePopup" />
|
|
|
|
|
|
<div class="selected-box">
|
|
<div><label>执法区域：</label><div><!-- <span v-for="item in ">{{ item.text }}</span> --></div></div>
|
|
<div><label>执法单位：</label><div><span v-for="item in data.formShowData">{{ item.text }}</span></div></div>
|
|
<div><label>企业类型：</label><div><span v-for="item in data.qyFormShowData">{{ item.text }}</span></div></div>
|
|
<div><label>执法类别：</label><div><span v-for="item in data.jcFormShowData">{{ item.text }}</span></div></div>
|
|
<div><label>投诉类型：</label><div><span v-for="item in data.tsFormShowData">{{ item.text }}</span></div></div>
|
|
</div>
|
|
|
|
<div class="stat-box">
|
|
<div class="stat-item">
|
|
<div class="count-tit">部门数量</div>
|
|
<div class="count-tot"><b>{{ data.staCount.deptTotal }}</b>个</div>
|
|
<div class="percent-tag">
|
|
<!-- <span class="time-last"><span class="data-rise">--</span><label>较上年</label></span> -->
|
|
<span class="time-last">
|
|
<div v-if="data.staCount.deptHuan == 0 || data.staCount.deptHuan == NULL">
|
|
<span class="data-rise" >
|
|
<van-icon name="down" />--</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
<div v-if="data.staCount.deptHuan > 0">
|
|
<span class="data-rise">
|
|
<van-icon name="down" />{{ data.staCount.deptHuan }}</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
<div v-if="data.staCount.deptHuan < 0">
|
|
<span class="data-fall" >
|
|
<van-icon name="down" />{{ data.staCount.deptHuan }}</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="count-tit">企业数量</div>
|
|
<div class="count-tot"><b>{{ data.staCount.qyTotal }}</b></div>
|
|
<div class="percent-tag">
|
|
<span class="time-last">
|
|
<div v-if="data.staCount.qyHuan == 0 || data.staCount.qyHuan ==NULL">
|
|
<span class="data-rise">
|
|
<van-icon name="down" />--</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
<div v-if="data.staCount.qyHuan > 0">
|
|
<span class="data-rise">
|
|
<van-icon name="down" />{{ data.staCount.qyHuan }}</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
<div v-if="data.staCount.qyHuan < 0">
|
|
<span class="data-fall" >
|
|
<van-icon name="down" />{{ data.staCount.qyHuan }}</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
</span>
|
|
|
|
<!-- <span class="data-fall"><van-icon name="down" /></span><label>较上年</label></span> -->
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="count-tit">执法数量</div>
|
|
<div class="count-tot"><b>{{ data.staCount.jcTotal }}</b>件</div>
|
|
<div class="percent-tag">
|
|
<span class="time-last">
|
|
<!-- <span class="data-rise"><van-icon name="down" />32</span><label>较上年</label> -->
|
|
<span class="time-last">
|
|
<div v-if="data.staCount.jcHuan == 0 || data.staCount.jcHuan == NULL">
|
|
<span class="data-rise">
|
|
<van-icon name="down" />--</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
<div v-if="data.staCount.jcHuan > 0">
|
|
<span class="data-rise">
|
|
<van-icon name="down" />{{ data.staCount.jcHuan }}</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
<div v-if="data.staCount.jcHuan < 0">
|
|
<span class="data-fall" >
|
|
<van-icon name="down" />{{ data.staCount.jcHuan }}</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="count-tit">投诉数量</div>
|
|
<div class="count-tot"><b>{{ data.staCount.complaintTotal }}</b>件</div>
|
|
<div class="percent-tag">
|
|
<span class="time-last">
|
|
<!-- <span class="data-fall"><van-icon name="down" />3</span><label>较上年</label> -->
|
|
<div v-if="data.staCount.complaintHuan == 0 || data.staCount.complaintHuan==NULL">
|
|
<span class="data-rise">
|
|
<van-icon name="down" />--</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
<div v-if="data.staCount.complaintHuan > 0">
|
|
<span class="data-rise">
|
|
<van-icon name="down" />{{ data.staCount.complaintHuan }}</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
<div v-if="data.staCount.complaintTong < 0">
|
|
<span class="data-fall" >
|
|
<van-icon name="down" />{{ data.staCount.complaintHuan }}</span>
|
|
<label v-if="searchParam.dateType==5">较上年</label>
|
|
<label v-else-if="searchParam.dateType==6">较上月</label>
|
|
<label v-else-if="searchParam.dateType==1">较上季</label>
|
|
<label v-else>较上时段</label>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<van-popup v-model:show="data.showTimePicker" position="bottom" :style="{ height: '30%' }">
|
|
<van-date-picker
|
|
type="time"
|
|
:columns-type="data.columnsType"
|
|
v-model="data.currentDate"
|
|
@confirm="onConfirm"
|
|
/>
|
|
</van-popup>
|
|
<!-- 部门弹窗 -->
|
|
<van-popup v-model:show="data.multipleShowPicker" class="search-data-popup" position="bottom">
|
|
<div class="header-line">
|
|
<div class="cancel" @click="cancelMultiple()">取消</div>
|
|
<div class="sure" @click="confirmMultiple()">确认</div>
|
|
</div>
|
|
<div class="lists">
|
|
<div v-for="(item, index) in data.columns" :key="index" class="line" @click="confirmMultiplePicker(item)">
|
|
<div class="name">{{ item.text }}</div>
|
|
<van-icon v-if="data.copyArr.some(v => v.value == item.value)" name="success" />
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
<!-- 企业类型 -->
|
|
<van-popup v-model:show="data.qyShowPicker" class="search-data-popup" position="bottom">
|
|
<div class="header-line">
|
|
<div class="cancel" @click="cancelMultipleQy()">取消</div>
|
|
<div class="sure" @click="confirmMultipleQy()">确认</div>
|
|
</div>
|
|
<div class="lists">
|
|
<div v-for="(item, index) in data.qyColumns" :key="index" class="line" @click="confirmMultipleQyPicker(item)">
|
|
<div class="name">{{ item.text }}</div>
|
|
<van-icon v-if="data.qyCopyArr.some(v => v.value == item.value)" name="success" />
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
<!-- 执法类型 -->
|
|
<van-popup v-model:show="data.jcShowPicker" class="search-data-popup" position="bottom">
|
|
<div class="header-line">
|
|
<div class="cancel" @click="cancelMultipleJc()">取消</div>
|
|
<div class="sure" @click="confirmMultipleJc()">确认</div>
|
|
</div>
|
|
<div class="lists">
|
|
<div v-for="(item, index) in data.jcColumns" :key="index" class="line" @click="confirmMultipleJcPicker(item)">
|
|
<div class="name">{{ item.text }}</div>
|
|
<van-icon v-if="data.jcCopyArr.some(v => v.value == item.value)" name="success" />
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
<!-- 投诉类型 -->
|
|
<van-popup v-model:show="data.tsShowPicker" class="search-data-popup" position="bottom">
|
|
<div class="header-line">
|
|
<div class="cancel" @click="cancelMultipleTs()">取消</div>
|
|
<div class="sure" @click="confirmMultipleTs()">确认</div>
|
|
</div>
|
|
<div class="lists">
|
|
<div v-for="(item, index) in data.tsColumns" :key="index" class="line" @click="confirmMultipleTsPicker(item)">
|
|
<div class="name">{{ item.text }}</div>
|
|
<van-icon v-if="data.tsCopyArr.some(v => v.value == item.value)" name="success" />
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup name="addressEdit">
|
|
|
|
import { onBeforeUnmount, getCurrentInstance,nextTick } from 'vue';
|
|
import util from "@/util/area";
|
|
import {queryStatisticalData,getDeptListToDept,getDeptListToPerson} from '@/api/enforce';
|
|
import { getDict } from '@/api/Home';
|
|
import {queryStatisticsIndicatorPart1,queryStatisticsIndicatorPart2,queryStatisticsIndicatorPart3} from '@/api/enterprise';
|
|
|
|
import _cloneDeep from 'lodash/cloneDeep';
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
const {useCommon, useShopCard} = $globalStore;
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
let queryaddressId = ref("");
|
|
const data = reactive({
|
|
searchResult: [],
|
|
areaList: util.areaList,
|
|
addressInfo: {},
|
|
areaColumns: ["请选择", "请选择", "请选择"],
|
|
allTotal: 0,
|
|
complaintCount: 0,
|
|
checkNum: 5,
|
|
columnsType: ['year'],
|
|
showTimePicker: false,
|
|
//默认个人0 切换部门 1
|
|
dataType: 0,
|
|
currentDate: [],
|
|
oneself:{
|
|
allTotal: 0,
|
|
tong:0,
|
|
huan:0,
|
|
complaintCount: 0
|
|
},
|
|
dept:{
|
|
allTotal: 0,
|
|
tong:0,
|
|
huan:0,
|
|
complaintCount: 0
|
|
},
|
|
staCount:{
|
|
deptTotal: 0,
|
|
deptTong:0,
|
|
qyTotal: 0,
|
|
qyTong: 0,
|
|
jcTotal: 0,
|
|
jcTong: 0,
|
|
complaintTotal: 0,
|
|
complaintTong: 0,
|
|
},
|
|
//展示筛选选择框
|
|
multipleShowPicker: false,
|
|
columns: [],
|
|
copyArr: [],
|
|
formShowData: [],
|
|
ruleList:[],
|
|
pickerType: 0,
|
|
//企业类型
|
|
qyShowPicker: false,
|
|
qyColumns: [],
|
|
qyCopyArr: [],
|
|
qyFormShowData: [],
|
|
qyRuleList:[],
|
|
//执法类型
|
|
jcShowPicker: false,
|
|
jcColumns: [],
|
|
jcCopyArr: [],
|
|
jcFormShowData: [],
|
|
jcRuleList:[],
|
|
//投诉类型
|
|
tsShowPicker: false,
|
|
tsColumns: [],
|
|
tsCopyArr: [],
|
|
tsFormShowData: [],
|
|
tsRuleList:[],
|
|
|
|
});
|
|
const searchParam = reactive({
|
|
dateSearch: "",
|
|
userId: useCommon.userId,
|
|
dateType: 5,
|
|
//区域地址，多个
|
|
areaStreet: "",
|
|
//部门ID多个
|
|
deptId: "",
|
|
//企业类型多个
|
|
enterpriseTypeStr: ref(""),
|
|
//执法类型 多个
|
|
checkTypeStr: ref(""),
|
|
//投诉类型，多个
|
|
complaintTypeStr: ref(""),
|
|
});
|
|
|
|
// 返回
|
|
const goBack = () => {
|
|
router.go(-1);
|
|
};
|
|
|
|
onBeforeUnmount(() => {
|
|
// 当前路由不是首页，且用户确认离开时
|
|
// 替换到首页
|
|
router.replace('/enforceHome');
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
console.log("=============销毁完毕=============")
|
|
const chartEle = document.getElementById("echartRing");
|
|
console.log(chartEle)
|
|
// chartEle.removeAttribute('_echarts_instance_')
|
|
});
|
|
|
|
// 保存地址操作
|
|
const onSave = () => {
|
|
router.replace({name: "addressList"});
|
|
};
|
|
|
|
// 删除地址操作
|
|
const onDelete = () => {
|
|
router.replace({name: "addressList"});
|
|
};
|
|
|
|
// 修改详细地址
|
|
const onChangeDetail = () => {
|
|
};
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
queryStatisticalData({
|
|
"dataScopeId": useCommon.userId
|
|
}, success => {
|
|
var arrData = [];
|
|
var arrCompanyData = [];
|
|
var countTotal = 0;
|
|
var userTotal = 0;
|
|
//执法类别参数
|
|
var dataX = [];
|
|
var dataY = [];
|
|
var dataPercent = [];
|
|
//执法人员
|
|
var userDataX = [];
|
|
var userDataY = [];
|
|
var userDataPercent = [];
|
|
|
|
//本月案件数量
|
|
var arrCountData = [];
|
|
|
|
console.log(success.data.item)
|
|
|
|
success.data.item.forEach(res => {
|
|
countTotal += res.total;
|
|
})
|
|
success.data.lawEnforcer.forEach(res => {
|
|
userTotal += res.total;
|
|
})
|
|
success.data.item.forEach(res => {
|
|
console.log(res)
|
|
arrData.push({
|
|
"name": res.lawEnforcementItem,
|
|
"value": res.total
|
|
})
|
|
dataX.push(res.lawEnforcementItem);
|
|
dataY.push(res.total);
|
|
dataPercent.push((res.total / countTotal * 100).toFixed(2));
|
|
})
|
|
|
|
success.data.lawEnforcer.forEach(res => {
|
|
console.log(res)
|
|
userDataX.push(res.lawEnforcer);
|
|
userDataY.push(res.total);
|
|
userDataPercent.push((res.total / userTotal * 100).toFixed(2));
|
|
})
|
|
console.log(userDataPercent)
|
|
success.data.enterpriseType.forEach(res => {
|
|
console.log(res)
|
|
arrCompanyData.push({
|
|
"name": res.dictLabel,
|
|
"value": res.total
|
|
})
|
|
})
|
|
data.allTotal = success.data.mouth.total;
|
|
data.complaintCount = success.data.mouth.complaintCount;
|
|
arrCountData.push({
|
|
"name": "本月执法数量",
|
|
"value": data.allTotal
|
|
})
|
|
arrCountData.push({
|
|
"name": "本月执法投诉数量",
|
|
"value": data.complaintCount
|
|
})
|
|
|
|
nextTick(() => {
|
|
echartInit(arrData, 'echartRing');
|
|
//执法类别统计
|
|
initData(dataX, dataY, dataPercent, "echartLine");
|
|
//执法人员
|
|
initData(userDataX, userDataY, userDataPercent, "echartLineUser");
|
|
//企业类型统计
|
|
echartInit(arrCompanyData, 'echartLineCompany');
|
|
//本月案件数量
|
|
echartInit(arrCountData, 'echarCount');
|
|
});
|
|
}, error => {
|
|
})
|
|
currentDate()
|
|
//查询统计数据
|
|
queryStatisticsIndicatorPart();
|
|
queryStatisticsIndicatorPartTwo();
|
|
|
|
getDeptList(data.dataType,(val)=>{
|
|
console.log(val)
|
|
data.ruleList=val;
|
|
})
|
|
|
|
queryDictData("enterpriseType",(val) =>{
|
|
console.log(val)
|
|
data.qyRuleList = val;
|
|
})
|
|
queryDictData("check_category",(val) =>{
|
|
console.log(val)
|
|
data.jcRuleList = val;
|
|
})
|
|
queryDictData("caseType",(val) =>{
|
|
console.log(val)
|
|
data.tsRuleList = val;
|
|
})
|
|
});
|
|
const searchDateType = (val) =>{
|
|
data.checkNum = val;
|
|
searchParam.dateType = val;
|
|
queryStatisticsIndicatorPart();
|
|
if(data.dataType == 0){
|
|
queryStatisticsIndicatorPartTwo();
|
|
}else if(data.dataType == 1){
|
|
queryStatisticsIndicatorPartThree();
|
|
}
|
|
}
|
|
|
|
const currentDate = () => {
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
data.currentDate = [year]
|
|
searchParam.dateSearch = year;
|
|
}
|
|
|
|
const onConfirm = (time) => {
|
|
if (time != null) {
|
|
var times = time.selectedValues;
|
|
console.log(times)
|
|
// submitData.enforcementTime = times[0] + "-" + times[1] + "-" + times[2];
|
|
// data.tempDate = times[1] + "月" + times[2] + "号";
|
|
searchParam.dateSearch = times[0];
|
|
}
|
|
data.showTimePicker = false;
|
|
}
|
|
|
|
const queryStatisticsIndicatorPart = () =>{
|
|
queryStatisticsIndicatorPart1(searchParam,success =>{
|
|
//个人数量
|
|
const element = success.data[0];
|
|
const element1 = success.data[1]
|
|
data.oneself.allTotal = element.number;
|
|
data.oneself.huan = element.huan;
|
|
data.oneself.tong = element.tong;
|
|
data.oneself.complaintCount = element.complaint;
|
|
|
|
//部门数量
|
|
data.dept.allTotal = element1.number;
|
|
data.dept.huan = element1.huan;
|
|
data.dept.tong = element1.tong;
|
|
data.dept.complaintCount = element1.complaint;
|
|
},error =>{
|
|
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 查询个人
|
|
*/
|
|
const queryStatisticsIndicatorPartTwo = () =>{
|
|
queryStatisticsIndicatorPart2(searchParam,success =>{
|
|
//个人数量
|
|
const element = success.data[0];
|
|
const element1 = success.data[1]
|
|
const element2 = success.data[2]
|
|
const element3 = success.data[3]
|
|
//部门统计
|
|
data.staCount.deptTotal = element.number;
|
|
data.staCount.deptHuan = element.huan;
|
|
//企业统计
|
|
data.staCount.qyTotal = element1.number;
|
|
data.staCount.qyHuan = element1.huan;
|
|
//执法统计
|
|
data.staCount.jcTotal = element2.number;
|
|
data.staCount.jcHuan = element2.huan;
|
|
//投诉统计
|
|
data.staCount.complaintTotal = element3.number;
|
|
data.staCount.complaintHuan = element3.huan;
|
|
|
|
},error =>{
|
|
|
|
})
|
|
}
|
|
/**
|
|
* 查询部门
|
|
*/
|
|
const queryStatisticsIndicatorPartThree = () =>{
|
|
queryStatisticsIndicatorPart3(searchParam,success =>{
|
|
//个人数量
|
|
const element = success.data[0];
|
|
const element1 = success.data[1]
|
|
const element2 = success.data[2]
|
|
const element3 = success.data[3]
|
|
//部门统计
|
|
data.staCount.deptTotal = element.number;
|
|
data.staCount.deptHuan = element.huan;
|
|
//企业统计
|
|
data.staCount.qyTotal = element1.number;
|
|
data.staCount.qyHuan = element1.huan;
|
|
//执法统计
|
|
data.staCount.jcTotal = element2.number;
|
|
data.staCount.jcHuan = element2.huan;
|
|
//投诉统计
|
|
data.staCount.complaintTotal = element3.number;
|
|
data.staCount.complaintHuan = element3.huan;
|
|
|
|
},error =>{
|
|
|
|
})
|
|
}
|
|
const onClickTab = (e) =>{
|
|
if(e.title == '个人'){
|
|
queryStatisticsIndicatorPartTwo();
|
|
data.dataType = 0;
|
|
}
|
|
if(e.title == '部门'){
|
|
queryStatisticsIndicatorPartThree();
|
|
data.dataType = 1;
|
|
}
|
|
}
|
|
|
|
|
|
// 打开弹出时触发
|
|
const openPicker = (item) =>{
|
|
data.columns = data.ruleList.map(v => {
|
|
// 处理筛选项
|
|
return {
|
|
text: v.text,
|
|
value: v.value
|
|
};
|
|
});
|
|
data.copyArr = _cloneDeep(data.formShowData);
|
|
data.multipleShowPicker = true;
|
|
}
|
|
|
|
const confirmMultiplePicker = (val) =>{
|
|
const arr = data.copyArr.map(v => v.value);
|
|
const ctx = getCurrentInstance()
|
|
const that = ctx;
|
|
if (arr.indexOf(val.value) !== -1) {
|
|
// 若已经选择过 则取消选择
|
|
data.copyArr = data.copyArr.filter(v => v.value !== val.value);
|
|
that.$forceUpdate();
|
|
} else {
|
|
data.copyArr.push(val);
|
|
that.$forceUpdate()
|
|
}
|
|
}
|
|
|
|
// 点击确定-部门
|
|
const confirmMultiple = () =>{
|
|
data.formShowData = data.copyArr;
|
|
data.multipleShowPicker = false;
|
|
data.copyArr = [];
|
|
const tmpArr = [];
|
|
data.formShowData.forEach(res =>{
|
|
tmpArr.push(res.value);
|
|
})
|
|
searchParam.deptId = tmpArr.join(",");
|
|
if(data.dataType == 0){
|
|
queryStatisticsIndicatorPartTwo();
|
|
}
|
|
if(data.dataType == 1){
|
|
queryStatisticsIndicatorPartThree();
|
|
}
|
|
|
|
}
|
|
|
|
// 点击取消
|
|
const cancelMultiple = () =>{
|
|
nextTick(() => {
|
|
data.copyArr = [];
|
|
});
|
|
data.multipleShowPicker = false;
|
|
}
|
|
|
|
// 点击删除
|
|
const delInformation = (obj) =>{
|
|
data.formShowData = data.formShowData.filter(
|
|
v => v.value !== obj.value
|
|
);
|
|
const ctx = getCurrentInstance()
|
|
const that = ctx;
|
|
that.$forceUpdate();
|
|
}
|
|
|
|
// 企业类型打开弹出时触发
|
|
const openQyPicker = (item) =>{
|
|
data.qyColumns = data.qyRuleList.map(v => {
|
|
// 处理筛选项
|
|
return {
|
|
text: v.text,
|
|
value: v.value
|
|
};
|
|
});
|
|
data.qyCopyArr = _cloneDeep(data.qyFormShowData);
|
|
data.qyShowPicker = true;
|
|
}
|
|
|
|
const confirmMultipleQyPicker = (val) =>{
|
|
const arr = data.qyCopyArr.map(v => v.value);
|
|
const ctx = getCurrentInstance();
|
|
const that = ctx;
|
|
if (arr.indexOf(val.value) !== -1) {
|
|
// 若已经选择过 则取消选择
|
|
data.qyCopyArr = data.qyCopyArr.filter(v => v.value !== val.value);
|
|
that.$forceUpdate();
|
|
} else {
|
|
data.qyCopyArr.push(val);
|
|
that.$forceUpdate()
|
|
}
|
|
console.log(data.qyCopyArr)
|
|
}
|
|
|
|
// 点击确定
|
|
const confirmMultipleQy = () =>{
|
|
data.qyFormShowData = data.qyCopyArr;
|
|
data.qyShowPicker = false;
|
|
data.qyCopyArr = [];
|
|
const tmpArr = [];
|
|
//TODO set企业类型
|
|
data.qyFormShowData.forEach(res =>{
|
|
tmpArr.push(res.value);
|
|
})
|
|
searchParam.enterpriseTypeStr = tmpArr.join(",");
|
|
if(data.dataType == 0){
|
|
queryStatisticsIndicatorPartTwo();
|
|
}
|
|
if(data.dataType == 1){
|
|
queryStatisticsIndicatorPartThree();
|
|
}
|
|
}
|
|
// 点击取消
|
|
const cancelMultipleQy = () =>{
|
|
nextTick(() => {
|
|
data.qyCopyArr = [];
|
|
});
|
|
data.qyShowPicker = false;
|
|
}
|
|
|
|
/**
|
|
* 查询字典
|
|
* @param dictType 字典类型
|
|
* @param dictList 存储对象
|
|
*/
|
|
const queryDictData = (dictType,callback) =>{
|
|
getDict({"dictType": dictType}, success => {
|
|
var dictList = [];
|
|
console.log(success);
|
|
success.data.forEach(res => {
|
|
console.log(res)
|
|
var obj = {text: res.dictLabel, value: res.dictValue};
|
|
dictList.push(obj)
|
|
})
|
|
callback(dictList);
|
|
}, error => {})
|
|
}
|
|
const getDeptList=(type,callback)=>{
|
|
if(type==0){
|
|
//个人
|
|
getDeptListToPerson(searchParam,success=>{
|
|
var dictList=[];
|
|
console.log(success);
|
|
success.data.forEach(res => {
|
|
console.log(res)
|
|
var obj = {text: res.dictLabel, value: res.dictValue};
|
|
dictList.push(obj)
|
|
})
|
|
callback(dictList);
|
|
}, error => {})
|
|
}else if(type==1){
|
|
//部门
|
|
getDeptListToDept(searchParam,success=>{
|
|
var dictList=[];
|
|
console.log(success);
|
|
success.data.forEach(res => {
|
|
console.log(res)
|
|
var obj = {text: res.dictLabel, value: res.dictValue};
|
|
dictList.push(obj)
|
|
})
|
|
callback(dictList);
|
|
}, error => {})
|
|
}
|
|
}
|
|
|
|
// 企业类型打开弹出时触发
|
|
const openJcPicker = (item) =>{
|
|
data.jcColumns = data.jcRuleList.map(v => {
|
|
// 处理筛选项
|
|
return {
|
|
text: v.text,
|
|
value: v.value
|
|
};
|
|
});
|
|
data.jcCopyArr = _cloneDeep(data.jcFormShowData);
|
|
data.jcShowPicker = true;
|
|
}
|
|
const confirmMultipleJcPicker = (val) =>{
|
|
const arr = data.jcCopyArr.map(v => v.value);
|
|
const ctx = getCurrentInstance()
|
|
const that = ctx
|
|
if (arr.indexOf(val.value) !== -1) {
|
|
// 若已经选择过 则取消选择
|
|
data.jcCopyArr = data.jcCopyArr.filter(v => v.value !== val.value);
|
|
that.$forceUpdate();
|
|
} else {
|
|
data.jcCopyArr.push(val);
|
|
that.$forceUpdate()
|
|
}
|
|
console.log(data.jcCopyArr)
|
|
}
|
|
// 点击确定
|
|
const confirmMultipleJc = () =>{
|
|
data.jcFormShowData = data.jcCopyArr;
|
|
data.jcShowPicker = false;
|
|
data.jcCopyArr = [];
|
|
const tmpArr = [];
|
|
//TODO 执法类型
|
|
data.jcFormShowData.forEach(res =>{
|
|
tmpArr.push(res.value);
|
|
})
|
|
searchParam.checkTypeStr = tmpArr.join(",");
|
|
if(data.dataType == 0){
|
|
queryStatisticsIndicatorPartTwo();
|
|
}
|
|
if(data.dataType == 1){
|
|
queryStatisticsIndicatorPartThree();
|
|
}
|
|
}
|
|
// 点击取消
|
|
const cancelMultipleJc = () =>{
|
|
nextTick(() => {
|
|
data.jcCopyArr = [];
|
|
});
|
|
data.jcShowPicker = false;
|
|
}
|
|
|
|
// 投诉类型打开弹出时触发
|
|
const openTsPicker = (item) =>{
|
|
data.tsColumns = data.tsRuleList.map(v => {
|
|
// 处理筛选项
|
|
return {
|
|
text: v.text,
|
|
value: v.value
|
|
};
|
|
});
|
|
data.tsCopyArr = _cloneDeep(data.tsFormShowData);
|
|
data.tsShowPicker = true;
|
|
}
|
|
const confirmMultipleTsPicker = (val) =>{
|
|
const arr = data.tsCopyArr.map(v => v.value);
|
|
const ctx = getCurrentInstance();
|
|
const that = ctx;
|
|
if (arr.indexOf(val.value) !== -1) {
|
|
// 若已经选择过 则取消选择
|
|
data.tsCopyArr = data.tsCopyArr.filter(v => v.value !== val.value);
|
|
that.$forceUpdate();
|
|
} else {
|
|
data.tsCopyArr.push(val);
|
|
that.$forceUpdate()
|
|
}
|
|
console.log(data.tsCopyArr)
|
|
}
|
|
// 点击确定
|
|
const confirmMultipleTs = () =>{
|
|
data.tsFormShowData = data.tsCopyArr;
|
|
data.tsShowPicker = false;
|
|
data.tsCopyArr = [];
|
|
const tmpArr = [];
|
|
//TODO 投诉类型
|
|
data.tsFormShowData.forEach(res =>{
|
|
tmpArr.push(res.value);
|
|
})
|
|
searchParam.complaintTypeStr = tmpArr.join(",");
|
|
if(data.dataType == 0){
|
|
queryStatisticsIndicatorPartTwo();
|
|
}
|
|
if(data.dataType == 1){
|
|
queryStatisticsIndicatorPartThree();
|
|
}
|
|
}
|
|
// 点击取消
|
|
const cancelMultipleTs = () =>{
|
|
nextTick(() => {
|
|
data.tsCopyArr = [];
|
|
});
|
|
data.tsShowPicker = false;
|
|
}
|
|
|
|
</script>
|
|
<script>
|
|
//统计指标筛选弹窗
|
|
import Popup from '@/views/common/analyseFilter.vue';
|
|
|
|
export default {
|
|
components: {
|
|
Popup
|
|
},
|
|
data() {
|
|
return {
|
|
popupVisible: false,
|
|
popupContent: ''
|
|
}
|
|
},
|
|
methods: {
|
|
showPopup() {
|
|
this.popupVisible = true;
|
|
},
|
|
closePopup() {
|
|
this.popupVisible = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.address_edit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: #ebf3fb;
|
|
}
|
|
|
|
.warp_body {
|
|
background-image: linear-gradient(to bottom, #ebf3fb, transparent);
|
|
background: #ebf3fb;
|
|
margin-top: 0.15rem;
|
|
}
|
|
|
|
.countbox, .analybox {
|
|
position: relative;
|
|
margin: 2% 3%;
|
|
padding: 2% 0;
|
|
width: 94%;
|
|
/* height: 7rem; */
|
|
background: #fff url(/src/assets/images/bg_count.jpg) no-repeat right;
|
|
background-size: auto 100%;
|
|
border-radius: 0.25rem;
|
|
color: #999;
|
|
box-shadow: 0 0 5px #b4cbd9;
|
|
}
|
|
|
|
.countbox span {
|
|
margin: 1.75% 4.5%;
|
|
color: #999;
|
|
font-size: 0.3rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.count-tit {
|
|
margin: 2% 4%;
|
|
color: #333;
|
|
font-size: 0.4rem;
|
|
}
|
|
|
|
.count-tot {
|
|
margin: 2% 4%;
|
|
font-size: 0.3rem;
|
|
|
|
b {
|
|
margin-right: 0.15rem;
|
|
color: #085dff;
|
|
font-size: 0.95rem;
|
|
}
|
|
}
|
|
|
|
.count-com {
|
|
float: right;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: -0.1rem 0.5rem 0;
|
|
font-size: 0.3rem;
|
|
|
|
i {
|
|
color: #666;
|
|
font-size: 0.4rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
b {
|
|
margin-right: 5px;
|
|
color: #f00;
|
|
font-size: 0.6rem;
|
|
}
|
|
}
|
|
|
|
.analybox {
|
|
height: auto;
|
|
min-height: 7rem;
|
|
background: #fff none;
|
|
|
|
.title {
|
|
margin: 2% 2.5%;
|
|
font-size: 0.42rem;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.chartbox {
|
|
margin: 2% 5% 3%;
|
|
width: 90%;
|
|
height: 7rem;
|
|
}
|
|
|
|
.search-button-list {
|
|
height: 0.7rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-left: 0.27rem;
|
|
margin-top: 0.27rem;
|
|
align-items: end;
|
|
|
|
.search-button {
|
|
/*width: 15%;
|
|
height: 90%;*/
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: #666;
|
|
font-size: 0.35rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.search-button.active {
|
|
padding: 0 0.3rem;
|
|
background-color: #fff;
|
|
border-color: #75a5fb;
|
|
color: #1367fe;
|
|
}
|
|
}
|
|
|
|
.countbox .search-button-list {
|
|
position: absolute;
|
|
top: -0.1rem;
|
|
right: 3%;
|
|
display: flex;
|
|
white-space: normal;
|
|
background: #ebebeb;
|
|
border-radius: 0.15rem;
|
|
}
|
|
|
|
.curtime {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 1% 0 4% 4%;
|
|
font-size: 0.45rem;
|
|
color: #085dff;
|
|
}
|
|
|
|
.curtime i {
|
|
margin: 0 0 0 0.1rem;
|
|
transform: rotate(90deg);
|
|
font-size: 0.3rem;
|
|
}
|
|
|
|
.person-data, .depart-data {
|
|
position: relative;
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
.depart-data {
|
|
margin: -2% 0 3%;
|
|
}
|
|
|
|
.percent-tag {
|
|
margin: -3% 3% 2%;
|
|
|
|
}
|
|
|
|
.percent-tag > span {
|
|
margin: 0 2%;
|
|
font-size: 0.35rem;
|
|
}
|
|
|
|
.percent-tag > span > span {
|
|
margin: 0;
|
|
}
|
|
|
|
.percent-tag > span > span > i {
|
|
margin-right: 1%;
|
|
}
|
|
|
|
span.data-fall {
|
|
color: #ff0000;
|
|
font-size: 0.4rem;
|
|
}
|
|
|
|
span.data-rise {
|
|
color: #03a159;
|
|
font-size: 0.4rem;
|
|
}
|
|
|
|
span.data-rise i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.countbox .van-divider {
|
|
margin-left: 4%;
|
|
width: 92%;
|
|
border-color: #e3e3e3;
|
|
}
|
|
|
|
.tab-tag {
|
|
position: relative;
|
|
}
|
|
|
|
/deep/ .tab-tag .van-tabs {
|
|
float: right;
|
|
margin: 2% 0;
|
|
width: 35%;
|
|
}
|
|
|
|
/deep/ .tab-tag .van-tabs__nav--card {
|
|
height: 0.65rem;
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
/deep/ .van-tab--card.van-tab--active {
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
/deep/ .tab-tag .van-tab--card {
|
|
border-right: 0;
|
|
font-size: 0.35rem;
|
|
}
|
|
|
|
.dropdown-box {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
clear: both;
|
|
position: relative;
|
|
margin: 2% 3%;
|
|
padding: 2% 0;
|
|
width: 94%;
|
|
height: 0.6rem;
|
|
background: #fafcfd;
|
|
border: 0.02667rem solid #e2ebf7;
|
|
border-radius: 0.25rem;
|
|
color: #666;
|
|
font-size: 0.4rem;
|
|
box-shadow: 0 0 0.06rem #c1dbeb;
|
|
}
|
|
|
|
.dropdown-box > span > i {
|
|
margin: 0 0 0 0.15rem;
|
|
font-size: 0.3rem;
|
|
}
|
|
|
|
.selected-box {
|
|
position: relative;
|
|
margin: 0 5%;
|
|
width: 90%;
|
|
color: #c0c0c0;
|
|
font-size: 0.35rem;
|
|
}
|
|
|
|
|
|
.selected-box > div {
|
|
display: flex;
|
|
margin: 2% 0;
|
|
}
|
|
|
|
.selected-box label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.selected-box > div > div {
|
|
display: inline-block;
|
|
width: calc(100% - 2.0rem);
|
|
color: #666;
|
|
}
|
|
|
|
.selected-box > div > div > span {
|
|
margin-left: 0.15rem;
|
|
}
|
|
|
|
.stat-box {
|
|
position: relative;
|
|
margin: 0 3% 5%;
|
|
padding: 1%;
|
|
width: 94%;
|
|
background: #fff;
|
|
color: #c0c0c0;
|
|
font-size: 0.35rem;
|
|
box-sizing: border-box;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.stat-item {
|
|
display: inline-block;
|
|
margin: 2%;
|
|
padding: 3%;
|
|
width: 40%;
|
|
background: #e7f9f3;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.stat-item:nth-child(2) {
|
|
background: #f7f8f9;
|
|
}
|
|
|
|
.stat-item:nth-child(3) {
|
|
background: #ebf4fd;
|
|
}
|
|
|
|
.stat-item:nth-child(4) {
|
|
background: #ffeded;
|
|
}
|
|
|
|
.stat-item .count-tot b {
|
|
color: #333;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.stat-item .percent-tag label {
|
|
margin-left: 0.5rem;
|
|
font-size: 0.3rem;
|
|
}
|
|
|
|
.multiple-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 999;
|
|
}
|
|
.multiple-item {
|
|
width: fit-content;
|
|
padding: 12px 16px;
|
|
margin-bottom: 16px;
|
|
font-size: 28px;
|
|
line-height: 36px;
|
|
background: rgba(0, 91, 255, 0.1);
|
|
border-radius: 4px;
|
|
span {
|
|
color: rgb(0, 91, 255);
|
|
}
|
|
.van-icon {
|
|
margin-left: 12px;
|
|
color: rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
|
|
.search-data-popup {
|
|
.header-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 44px;
|
|
.cancel {
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
color: #969799;
|
|
}
|
|
.sure {
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
color: #576b95;
|
|
}
|
|
}
|
|
.lists {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px 12px 20px 12px;
|
|
height: 200px;
|
|
overflow: auto;
|
|
.line {
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
color: #000;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.van-icon {
|
|
color: #005bff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|