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.
601 lines
18 KiB
601 lines
18 KiB
<template>
|
|
<html>
|
|
<body>
|
|
<div class="page_wrapper">
|
|
<!-- <div class="tab_title"> <span :class="{'active':data.ontabClass1}" @click="searchTypeChange('user')"><b>个人</b>维度</span> <span :class="{'active':data.ontabClass2}" @click="searchTypeChange('bureauDept')" ><b>部门</b>维度</span> </div> -->
|
|
<div class="tab_title"> <span :class="{'active':data.ontabClass1}" @click="searchTypeChange('user')"><b>个人</b></span> <span :class="{'active':data.ontabClass2}" @click="searchTypeChange('bureauDept')" ><b>单位</b></span> </div>
|
|
<div class="tab_cont">
|
|
<div class="time_now">{{ data.dateStr }}</div>
|
|
<div class="time_select"> <span :class="{'active':data.submitData.dateType=='month'}" @click="dateTypeChange('month')">月度</span><span :class="{'active':data.submitData.dateType=='quarter'}" @click="dateTypeChange('quarter')">季度</span><span :class="{'active':data.submitData.dateType=='year'}" @click="dateTypeChange('year')">年度</span>
|
|
<span :class="{'active':data.submitData.dateType=='day'}" @click="dateTypeChange('day')">筛选</span>
|
|
</div>
|
|
<van-popup
|
|
:show="data.openDateType=='month'"
|
|
position="bottom">
|
|
<van-date-picker
|
|
v-model="data.monthList"
|
|
title="选择月度"
|
|
:min-date="data.minDate"
|
|
:max-date="data.maxDate"
|
|
:columns-type="data.columnsMonthType"
|
|
@cancel="closeColumns"
|
|
@confirm="confirmMonth"
|
|
/>
|
|
</van-popup>
|
|
<van-popup
|
|
:show="data.openDateType=='quarter'"
|
|
position="bottom">
|
|
<van-date-picker
|
|
v-model="data.quarterList"
|
|
title="选择季度"
|
|
:min-date="data.minDate"
|
|
:max-date="data.maxQuarterDate"
|
|
:columns-type="data.columnsQuarterType"
|
|
@cancel="closeColumns"
|
|
:filter="filter"
|
|
:formatter="formatter"
|
|
@confirm="confirmQuarter"
|
|
/>
|
|
</van-popup>
|
|
<van-popup
|
|
:show="data.openDateType=='year'"
|
|
position="bottom">
|
|
<van-date-picker
|
|
v-model="data.yearList"
|
|
title="选择年度"
|
|
:min-date="data.minDate"
|
|
:max-date="data.maxDate"
|
|
:columns-type="data.columnsYearType"
|
|
@cancel="closeColumns"
|
|
@confirm="confirmYear"
|
|
/>
|
|
</van-popup>
|
|
<div>
|
|
<van-calendar :show="data.openDateType=='day'" type="range" :min-date="data.minDate" :max-date="data.maxDate" allow-same-day="true" close-on-click-overlay="true" @close="closeColumns" @confirm="confirmDay" />
|
|
</div>
|
|
<div class="inspact_card">
|
|
<h3 class="card_tit">涉企执法数量</h3>
|
|
<div class="inspact_box"> <span class="counts" >{{ data.whole.total }}</span>
|
|
<div class="ratioes">
|
|
<div class="ratio_yeaer">
|
|
<label>环比：</label>
|
|
<span class="data-rise" id="regis-dw-huan-top" v-if="data.whole.huanPercentage>0"><van-icon name="down" /><b>{{ data.whole.huanPercentageStr }}</b></span>
|
|
<span class="data-fall" id="regis-dw-huan-top" v-else-if="data.whole.huanPercentage<0"><van-icon name="down" /><b>{{ data.whole.huanPercentageStr }}</b></span>
|
|
<span class="data-rise" id="regis-dw-huan-top" v-else><b>-</b><b>{{ data.whole.huanPercentageStr }}</b></span>
|
|
</div>
|
|
<div class="ratio_month">
|
|
<label>同比：</label>
|
|
<span class="data-rise" id="regis-dw-huan-top" v-if="data.whole.tongPercentage>0"><van-icon name="down" /><b>{{ data.whole.tongPercentageStr }}</b></span>
|
|
<span class="data-fall" id="regis-dw-huan-top" v-else-if="data.whole.tongPercentage<0"><van-icon name="down" /><b>{{ data.whole.tongPercentageStr }}</b></span>
|
|
<span class="data-rise" id="regis-dw-huan-top" v-else><b>-</b><b>{{ data.whole.tongPercentageStr }}</b></span>
|
|
</div>
|
|
</div>
|
|
<div class="item_box"> <span class="item_sub">
|
|
<label>联合执法</label>
|
|
<b>{{data.whole.uniteTotal}}</b> </span> <span class="item_sub">
|
|
<label>行政执法预告</label>
|
|
<b>{{data.whole.noticeTotal}}</b> </span> <span class="item_sub">
|
|
<label>评价</label>
|
|
<b>{{data.whole.evaluateTotal}}</b> </span> <span class="item_sub comst">
|
|
<label>投诉</label>
|
|
<b>{{data.whole.complaintTotal}}</b> </span> </div>
|
|
</div>
|
|
</div>
|
|
<!--<h3 class="card_tit">执法类别</h3>
|
|
<div class="count_wrap">
|
|
<div class="count_item" v-for="item in data.whole.lawEnforceCategoryList">
|
|
<label>{{ item.lawEnforceCategory }}</label>
|
|
<span class="number_count">{{item.lawEnforceCategoryNumber}}</span>
|
|
<span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}<i>%</i></span>
|
|
<span class="number_percent" v-else>-</span>
|
|
</div>
|
|
</div>-->
|
|
|
|
<van-tabs v-model:active="active">
|
|
<van-tab title="执法类别">
|
|
<div class="count_wrap ent_cate">
|
|
<div class="count_item" v-for="item in data.whole.lawEnforceCategoryList">
|
|
<label>{{ item.lawEnforceCategory }}</label>
|
|
<span class="number_count">{{item.lawEnforceCategoryNumber}}</span>
|
|
<span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}<i>%</i></span>
|
|
<span class="number_percent" v-else>-</span>
|
|
</div>
|
|
</div>
|
|
</van-tab>
|
|
<van-tab title="企业类别">
|
|
<div class="count_wrap ent_cate">
|
|
<div class="count_item" v-for="item in data.whole.companyOrgTypeList">
|
|
<label>{{ item.companyOrgType }}</label>
|
|
<span class="number_count">{{item.companyOrgTypeNumber}}</span>
|
|
<span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}<i>%</i></span>
|
|
<span class="number_percent" v-else>-</span>
|
|
</div>
|
|
</div>
|
|
</van-tab>
|
|
<van-tab title="投诉类别">
|
|
<div class="count_wrap com_cate">
|
|
<div class="count_item" v-for="item in data.whole.complaintTypeList">
|
|
<label>{{ item.complaintType }}</label>
|
|
<span class="number_count">{{item.complaintTotal}}</span>
|
|
<span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}<i>%</i></span>
|
|
<span class="number_percent" v-else>-</span>
|
|
</div>
|
|
</div>
|
|
</van-tab>
|
|
</van-tabs>
|
|
|
|
<!-- <h3 class="card_tit">企业类别</h3>
|
|
<div class="count_wrap ent_cate">
|
|
<div class="count_item" v-for="item in data.whole.companyOrgTypeList">
|
|
<label>{{ item.companyOrgType }}</label>
|
|
<span class="number_count">{{item.companyOrgTypeNumber}}</span>
|
|
<span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}<i>%</i></span>
|
|
<span class="number_percent" v-else>-</span>
|
|
</div>
|
|
</div> -->
|
|
<!-- <h3 class="card_tit">投诉类别</h3>
|
|
<div class="count_wrap com_cate">
|
|
<div class="count_item" v-for="item in data.whole.complaintTypeList">
|
|
<label>{{ item.complaintType }}</label>
|
|
<span class="number_count">{{item.complaintTotal}}</span>
|
|
<span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}<i>%</i></span>
|
|
<span class="number_percent" v-else>-</span>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
</template>
|
|
|
|
<script setup name="comprehensiveAnalysis">
|
|
import { onMounted, reactive } from "vue";
|
|
import { whole } from "../../api/enforce";
|
|
const { useCommon } = $globalStore;
|
|
|
|
const data = reactive({
|
|
submitData: {
|
|
searchType: "user",
|
|
userId:useCommon.userId,
|
|
// userId: "17608514096",
|
|
// userId: "17608508256",
|
|
dateType: "year",
|
|
beginTime: "",
|
|
endTime: "",
|
|
year:new Date().getFullYear(),
|
|
quarter:"",
|
|
month:"",
|
|
},
|
|
whole: reactive({
|
|
total: 0,
|
|
tongPercentage: 0,
|
|
tongPercentageStr: "-",
|
|
huanPercentage: 0,
|
|
huanPercentageStr: "-",
|
|
uniteTotal: 0,
|
|
evaluateTotal: 0,
|
|
complaintTotal: 0,
|
|
lawEnforceCategoryList:[],
|
|
checkCategoryList: [],
|
|
companyOrgTypeList: [],
|
|
complaintTypeList: [],
|
|
}),
|
|
ontabClass1: true,
|
|
ontabClass2: false,
|
|
dateStr: new Date().getFullYear()+"年",
|
|
openDateType: "",
|
|
minDate: new Date("2024-01-01"),
|
|
maxDate: new Date(),
|
|
maxQuarterDate: new Date(new Date().getFullYear()+"-"+Math.ceil((new Date().getMonth()+1)/3)),
|
|
columnsYearType : ['year'],
|
|
columnsMonthType : ['year', 'month'],
|
|
columnsQuarterType : ['year', 'month'],
|
|
yearList:[new Date().getFullYear()],
|
|
quarterList:[new Date().getFullYear(),Math.ceil((new Date().getMonth()+1)/3)],
|
|
monthList:[new Date().getFullYear(),new Date().getMonth()+1],
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
getWhole();
|
|
});
|
|
|
|
const getWhole = () => {
|
|
whole(
|
|
data.submitData,
|
|
(success) => {
|
|
console.log(success);
|
|
data.whole.total = success.total;
|
|
data.whole.tongPercentage = success.tongPercentage;
|
|
if (success.tongPercentage == null || success.tongPercentage == 0) {
|
|
data.whole.tongPercentageStr = "-";
|
|
} else {
|
|
data.whole.tongPercentageStr = success.tongPercentage + "%";
|
|
}
|
|
data.whole.huanPercentage = success.huanPercentage;
|
|
if (success.huanPercentage == null || success.huanPercentage == 0) {
|
|
data.whole.huanPercentageStr = "-";
|
|
} else {
|
|
data.whole.huanPercentageStr = success.huanPercentage + "%";
|
|
}
|
|
if (success.uniteTotal == null || success.uniteTotal == 0) {
|
|
data.whole.uniteTotal = "-";
|
|
} else {
|
|
data.whole.uniteTotal = success.uniteTotal;
|
|
}
|
|
if (success.noticeTotal == null || success.noticeTotal == 0) {
|
|
data.whole.noticeTotal = "-";
|
|
} else {
|
|
data.whole.noticeTotal = success.noticeTotal;
|
|
}
|
|
if (success.evaluateTotal == null || success.evaluateTotal == 0) {
|
|
data.whole.evaluateTotal = "-";
|
|
} else {
|
|
data.whole.evaluateTotal = success.evaluateTotal;
|
|
}
|
|
if (success.complaintTotal == null || success.complaintTotal == 0) {
|
|
data.whole.complaintTotal = "-";
|
|
} else {
|
|
data.whole.complaintTotal = success.complaintTotal;
|
|
}
|
|
data.whole.checkCategoryList = success.checkCategoryList;
|
|
data.whole.companyOrgTypeList = success.companyOrgTypeList;
|
|
data.whole.complaintTypeList = success.complaintTypeList;
|
|
data.whole.lawEnforceCategoryList=success.lawEnforceCategoryList;
|
|
console.log(success.total);
|
|
console.log(data.whole);
|
|
},
|
|
(error) => {}
|
|
);
|
|
};
|
|
const searchTypeChange = (searchType) => {
|
|
console.log(searchType);
|
|
data.submitData.searchType = searchType;
|
|
if (searchType == "user") {
|
|
data.ontabClass1 = true;
|
|
data.ontabClass2 = false;
|
|
} else if (searchType == "bureauDept") {
|
|
data.ontabClass1 = false;
|
|
data.ontabClass2 = true;
|
|
}
|
|
getWhole();
|
|
};
|
|
/**筛选转换 */
|
|
const dateTypeChange = (type) => {
|
|
console.log(type);
|
|
data.openDateType = type;
|
|
console.log(data.submitData.dateType);
|
|
// getWhole();
|
|
};
|
|
/**
|
|
* 关闭各个筛选条件
|
|
*/
|
|
const closeColumns = () => {
|
|
data.openDateType = "";
|
|
};
|
|
/**季度过滤 */
|
|
const filter = (type, options) => {
|
|
if (type === 'month') {
|
|
return options.filter((option) => Number(option.value) < 5);
|
|
}
|
|
return options;
|
|
};
|
|
const formatter = (type, option) => {
|
|
if (type === 'month') {
|
|
option.text=(option.text.slice(0,1)=="0"?option.text.slice(1):option.text)
|
|
}
|
|
return option;
|
|
};
|
|
const confirmMonth=(value)=>{
|
|
reset();
|
|
console.log(value);
|
|
data.submitData.dateType = "month";
|
|
data.openDateType = "";
|
|
data.submitData.year=value.selectedValues[0];
|
|
data.submitData.month=value.selectedValues[1];
|
|
data.dateStr=data.submitData.year+"年"+(data.submitData.month.slice(0,1)=="0"?data.submitData.month.slice(1):data.submitData.month)+"月"
|
|
getWhole();
|
|
}
|
|
const confirmQuarter=(value)=>{
|
|
reset();
|
|
console.log(value);
|
|
data.submitData.dateType = "quarter";
|
|
data.openDateType = "";
|
|
data.submitData.year=value.selectedValues[0];
|
|
data.submitData.quarter=value.selectedValues[1];
|
|
data.dateStr=data.submitData.year+"年第"+(data.submitData.quarter.slice(0,1)=="0"?data.submitData.quarter.slice(1):data.submitData.quarter)+"季度"
|
|
getWhole();
|
|
}
|
|
const confirmYear=(value)=>{
|
|
reset();
|
|
console.log(value);
|
|
data.submitData.dateType = "year";
|
|
data.openDateType = "";
|
|
data.submitData.year=value.selectedValues[0];
|
|
data.dateStr=data.submitData.year+"年"
|
|
getWhole();
|
|
}
|
|
/**
|
|
* 打开自定义筛选框
|
|
* @param value
|
|
*/
|
|
const confirmDay = (value) => {
|
|
reset();
|
|
data.submitData.dateType = "day";
|
|
data.openDateType = "";
|
|
console.log(value);
|
|
let startTime = new Date(value[0]);
|
|
let endTime = new Date(value[1]);
|
|
console.log(startTime.getFullYear());
|
|
data.submitData.beginTime =
|
|
startTime.getFullYear() +
|
|
"-" +
|
|
(startTime.getMonth()+1) +
|
|
"-" +
|
|
startTime.getDate();
|
|
data.submitData.endTime =
|
|
endTime.getFullYear() + "-" + (endTime.getMonth()+1) + "-" + endTime.getDate();
|
|
data.dateStr = data.submitData.beginTime + "~" + data.submitData.endTime;
|
|
getWhole();
|
|
};
|
|
const reset=()=>{
|
|
data.submitData.year="";
|
|
data.submitData.month="";
|
|
data.submitData.quarter="";
|
|
data.submitData.beginTime="";
|
|
data.submitData.endTime="";
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 40px;
|
|
} */
|
|
.page_wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.tab_title {
|
|
display: flex;
|
|
margin: 1% 3%;
|
|
width: 94%;
|
|
height: 1.1rem;
|
|
}
|
|
.tab_title span {
|
|
width: 50%;
|
|
height: 100%;
|
|
background: url(../../assets/images/tab_bg.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #5889fe;
|
|
font-size: 0.3rem;
|
|
line-height: 2.5;
|
|
text-align: center;
|
|
}
|
|
.tab_title span:first-child {
|
|
background: url(../../assets/images/tab_bg1_1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.tab_title span b {
|
|
margin-right: 0.1rem;
|
|
font-size: 0.45rem;
|
|
font-weight: 500;
|
|
}
|
|
.tab_title span.active {
|
|
background: url(../../assets/images/tab_bg_1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
}
|
|
.tab_title span:first-child.active {
|
|
background: url(../../assets/images/tab_bg1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
}
|
|
.tab_cont {
|
|
width: 100%;
|
|
height: calc(100% - 1.5rem);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.time_now {
|
|
float: left;
|
|
margin: 3.5% 4%;
|
|
color: #4767fe;
|
|
font-size: 0.38rem;
|
|
}
|
|
.time_select {
|
|
float: right;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin: 3% 3% 5%;
|
|
padding: 0.5% 0.1%;
|
|
min-width: 50%;
|
|
background: #f2f3f4;
|
|
border-radius: 1rem;
|
|
color: #757575;
|
|
font-size: 0.3rem;
|
|
}
|
|
.time_select span {
|
|
padding: 1.5% 5%;
|
|
white-space: nowrap;
|
|
}
|
|
.time_select span.active {
|
|
color: #4767fe;
|
|
background: #fff;
|
|
border-radius: 1rem;
|
|
}
|
|
.inspact_card {
|
|
display: table;
|
|
margin: 1% 2.75% 3.5%;
|
|
width: 94.5%;
|
|
height: 5rem;
|
|
background: url(../../assets/images/bg_analy_v4.jpg) no-repeat;
|
|
background-size: 100% 100%;
|
|
border-radius: 0.2rem;
|
|
}
|
|
.card_tit {
|
|
margin: 2% 3%;
|
|
width: 100%;
|
|
color: #333;
|
|
font-size: 0.35rem;
|
|
}
|
|
.inspact_box {
|
|
margin: 1% 2%;
|
|
width: 96%;
|
|
}
|
|
.counts {
|
|
float: left;
|
|
margin: 1% 2%;
|
|
color: #4767fe;
|
|
font-size: 1.45rem;
|
|
line-height: 1.1;
|
|
}
|
|
.ratioes {
|
|
float: left;
|
|
margin: 1% 3%;
|
|
min-width: 40%;
|
|
color: #999;
|
|
font-size: 0.3rem;
|
|
}
|
|
.ratio_yeaer,
|
|
.ratio_month {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 3.5% 3%;
|
|
}
|
|
.data-rise,
|
|
.data-fall {
|
|
position: relative;
|
|
margin: 2% 2% 0 2.5%;
|
|
color: #03a159;
|
|
font-size: 0.35rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
}
|
|
.data-fall {
|
|
color: #ff3333;
|
|
}
|
|
.data-rise > i, .data-fall > i {
|
|
position: relative;
|
|
top: 0.05rem;
|
|
}
|
|
.data-rise > i {
|
|
top: -0.1rem;
|
|
transform: rotate(-180deg);
|
|
}
|
|
.data-rise b,
|
|
.data-fall b {
|
|
margin: 0 0 0 10%;
|
|
font-size: 0.4rem;
|
|
font-weight: 500;
|
|
}
|
|
.item_box {
|
|
float: left;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
margin: 6% 2% 0;
|
|
width: 94%;
|
|
height: 1.5rem;
|
|
}
|
|
.item_sub {
|
|
position: relative;
|
|
margin: 0 1.5%;
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
.item_sub label {
|
|
display: block;
|
|
color: #79a3ca;
|
|
font-size: 0.32rem;
|
|
white-space: nowrap;
|
|
}
|
|
.item_sub b {
|
|
color: #4767fe;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
line-height: 1.75;
|
|
}
|
|
.comst b {
|
|
color: #ff3333;
|
|
}
|
|
.item_sub::after {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: -5%;
|
|
width: 2px;
|
|
height: 85%;
|
|
}
|
|
.count_wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 2% 2% -2%;
|
|
width: 96%;
|
|
}
|
|
.count_item {
|
|
float: left;
|
|
position: relative;
|
|
margin: -1% 0.5% 3.5% 1.5%;
|
|
width: 48%;
|
|
height: 2.75rem;
|
|
background: url(../../assets/images/bg_analy_card.jpg) no-repeat;
|
|
background-size: cover;
|
|
border-radius: 0.2rem;
|
|
font-size: 0.35rem;
|
|
text-align: center;
|
|
}
|
|
.count_item label {
|
|
position: absolute;
|
|
display: block;
|
|
margin: 5% 0 0;
|
|
width: 100%;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
.number_count {
|
|
display: block;
|
|
margin: 19% 0 0;
|
|
color: #4767fe;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
line-height: 1.35;
|
|
}
|
|
.number_percent {
|
|
color: #666;
|
|
font-size: 0.43rem;
|
|
}
|
|
.number_percent > i {
|
|
margin-left: 2%;
|
|
color: #999;
|
|
font-size: 0.28rem;
|
|
}
|
|
/*.ent_cate .number_count {
|
|
color: #333;
|
|
}*/
|
|
.com_cate .number_count {
|
|
color: #f73b3b;
|
|
}
|
|
.com_cate .count_item {
|
|
background: url(../../assets/images/bg_analy_card_2.jpg) no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.van-tabs__nav {
|
|
justify-content: flex-start !important;
|
|
margin-left: 0.25rem;
|
|
width: 60% !important;
|
|
}
|
|
.van-tab {
|
|
font-size: 0.35rem !important;
|
|
}
|
|
.van-tabs__line {
|
|
bottom: 0.6rem !important;
|
|
width: 28% !important;
|
|
}
|
|
</style>
|