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