zouyx
2 years ago
1 changed files with 530 additions and 0 deletions
@ -0,0 +1,530 @@ |
|||||
|
<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_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">↑<b>{{ data.whole.huanPercentageStr }}</b></span> |
||||
|
<span class="data-fall" id="regis-dw-huan-top" v-else-if="data.whole.huanPercentage<0">↑<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">↑<b>{{ data.whole.tongPercentageStr }}</b></span> |
||||
|
<span class="data-fall" id="regis-dw-huan-top" v-else-if="data.whole.tongPercentage<0">↑<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.checkCategoryList"> |
||||
|
<label>{{ item.checkCategory }}</label> |
||||
|
<span class="number_count">{{item.checkCategoryNumber}}</span> |
||||
|
<span class="number_percent" v-if="item.percentage!=null&&item.percentage!=0">{{item.percentage}}%</span> |
||||
|
<span class="number_percent" v-else>-</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<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}}%</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}}%</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, |
||||
|
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; |
||||
|
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.2rem; |
||||
|
} |
||||
|
.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.25rem; |
||||
|
font-size: 0.5rem; |
||||
|
} |
||||
|
.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.35rem; |
||||
|
} |
||||
|
.time_select { |
||||
|
float: right; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
margin: 3% 2% 5%; |
||||
|
padding: 0.5% 1%; |
||||
|
min-width: 50%; |
||||
|
background: #f2f3f4; |
||||
|
border-radius: 1rem; |
||||
|
color: #757575; |
||||
|
font-size: 0.3rem; |
||||
|
} |
||||
|
.time_select span { |
||||
|
padding: 1% 4%; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
.time_select span.active { |
||||
|
color: #4767fe; |
||||
|
background: #fff; |
||||
|
border-radius: 1rem; |
||||
|
} |
||||
|
.inspact_card { |
||||
|
display: table; |
||||
|
margin: 1% 2% 3.5%; |
||||
|
width: 96%; |
||||
|
height: 5.25rem; |
||||
|
background: url(../../assets/images/bg_analy_v4.jpg) no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
border-radius: 0.2rem; |
||||
|
} |
||||
|
.card_tit { |
||||
|
margin: 3% 3%; |
||||
|
width: 100%; |
||||
|
font-size: 0.35rem; |
||||
|
} |
||||
|
.inspact_box { |
||||
|
margin: 1% 2%; |
||||
|
width: 96%; |
||||
|
} |
||||
|
.counts { |
||||
|
float: left; |
||||
|
margin: 1% 2%; |
||||
|
color: #4767fe; |
||||
|
font-size: 1.2rem; |
||||
|
} |
||||
|
.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 { |
||||
|
margin: 2% 2% 0 2.5%; |
||||
|
color: #03a159; |
||||
|
font-size: 0.42rem; |
||||
|
font-weight: 700; |
||||
|
display: flex; |
||||
|
} |
||||
|
.data-fall { |
||||
|
color: #ff3333; |
||||
|
} |
||||
|
.data-rise b, |
||||
|
.data-fall b { |
||||
|
margin: 0 0 0 10%; |
||||
|
} |
||||
|
.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.75rem; |
||||
|
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% 2.5% 1.5%; |
||||
|
width: 31.3%; |
||||
|
height: 3rem; |
||||
|
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 { |
||||
|
display: inline-flex; |
||||
|
margin: 8% 5% 5%; |
||||
|
width: 90%; |
||||
|
color: #4c4c4c; |
||||
|
text-align: left; |
||||
|
} |
||||
|
.number_count { |
||||
|
display: block; |
||||
|
color: #4767fe; |
||||
|
font-size: 0.75rem; |
||||
|
font-weight: 500; |
||||
|
line-height: 1.75; |
||||
|
} |
||||
|
.number_percent { |
||||
|
color: #666; |
||||
|
} |
||||
|
.ent_cate .number_count { |
||||
|
color: #000; |
||||
|
} |
||||
|
.com_cate .number_count { |
||||
|
color: #f73b3b; |
||||
|
} |
||||
|
.com_cate .count_item { |
||||
|
background: url(../../assets/images/bg_analy_card_2.jpg) no-repeat; |
||||
|
background-size: cover; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue