|
|
|
|
<template>
|
|
|
|
|
<view>
|
|
|
|
|
<Head />
|
|
|
|
|
<view class="statistics-container">
|
|
|
|
|
<view class="card">
|
|
|
|
|
<view class="title">
|
|
|
|
|
数据概览
|
|
|
|
|
</view>
|
|
|
|
|
<view class="overview">
|
|
|
|
|
<view class="top">
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="num">
|
|
|
|
|
24255
|
|
|
|
|
</view>
|
|
|
|
|
<view class="type">
|
|
|
|
|
事件数
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="num">
|
|
|
|
|
24255
|
|
|
|
|
</view>
|
|
|
|
|
<view class="type">
|
|
|
|
|
事件数
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="num">
|
|
|
|
|
24255
|
|
|
|
|
</view>
|
|
|
|
|
<view class="type">
|
|
|
|
|
事件数
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="bot">
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="num">
|
|
|
|
|
24255
|
|
|
|
|
</view>
|
|
|
|
|
<view class="type">
|
|
|
|
|
需求数
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="num">
|
|
|
|
|
24255
|
|
|
|
|
</view>
|
|
|
|
|
<view class="type">
|
|
|
|
|
已办结
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item">
|
|
|
|
|
<view class="num">
|
|
|
|
|
24255
|
|
|
|
|
</view>
|
|
|
|
|
<view class="type">
|
|
|
|
|
未办结
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="card">
|
|
|
|
|
<view class="title">
|
|
|
|
|
<view class="title-tabs">
|
|
|
|
|
<view :class="'title-tab ' + (stayVal === '1' ? 'current' : '')" data-index="1" @tap="setStay">
|
|
|
|
|
待办问题
|
|
|
|
|
<view class="triangle" v-if="stayVal === '1'"></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view :class="'title-tab ' + (stayVal === '2' ? 'current' : '')" data-index="2" @tap="setStay">
|
|
|
|
|
待办需求
|
|
|
|
|
<view class="triangle" v-if="stayVal === '2'"></view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="view" @tap="gotopage" :data-url="stayVal === '1' ? '/subpages/statistics/pages/event/list/list' : '/subpages/statistics/pages/demand/list/list'">
|
|
|
|
|
查看
|
|
|
|
|
<image mode="widthFix" src="/static/images/right.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="stay-con">
|
|
|
|
|
<StayList :stayVal="stayVal" />
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="card">
|
|
|
|
|
<view class="title">
|
|
|
|
|
<text>集中突出问题</text>
|
|
|
|
|
<view class="view" @tap="gotopage" :data-url="'/subpages/statistics/pages/problemList/problemList?type=' + tabValue">
|
|
|
|
|
查看
|
|
|
|
|
<image mode="widthFix" src="/static/images/right.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<ProblemList @change="tabChange" />
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="card">
|
|
|
|
|
<view class="title">
|
|
|
|
|
<text>事件类别分析</text>
|
|
|
|
|
<view class="view" @tap="gotopage" data-url="/subpages/statistics/pages/dissatisfied/list/list">
|
|
|
|
|
查看
|
|
|
|
|
<image mode="widthFix" src="/static/images/right.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="sub-tit">
|
|
|
|
|
<image src="/static/images/statistics/sub-tit.png" mode="widthFix" />
|
|
|
|
|
<text>12345热线投诉类别分析</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<HotlineComplaints :typeCondition="monthIndex" />
|
|
|
|
|
|
|
|
|
|
<view class="sub-tit">
|
|
|
|
|
<image src="/static/images/statistics/sub-tit.png" mode="widthFix" />
|
|
|
|
|
<text>居民需求类别分析</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<RequirementAnalysis :typeCondition="monthIndex" />
|
|
|
|
|
|
|
|
|
|
<view class="sub-tit">
|
|
|
|
|
<image src="/static/images/statistics/sub-tit.png" mode="widthFix" />
|
|
|
|
|
<text>不满意事项类别分析</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<SmyddcSqmydzc :typeCondition="monthIndex" />
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="card">
|
|
|
|
|
<view class="title">
|
|
|
|
|
<text>潜在不满意人数</text>
|
|
|
|
|
<!-- <view class="view" bind:tap="gotopage" data-url="/subpages/statistics/pages/qzbmy/qzbmy">
|
|
|
|
|
查看 <image mode="widthFix" src="../../images/right.png"></image>
|
|
|
|
|
</view>-->
|
|
|
|
|
</view>
|
|
|
|
|
<EventPrediction />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="card">
|
|
|
|
|
<view class="title">不满意事项趋势分析</view>
|
|
|
|
|
|
|
|
|
|
<Trend />
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="card">
|
|
|
|
|
<view class="title">不满意人群画像</view>
|
|
|
|
|
<CrowdPortrait />
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<custom-tab-bar></custom-tab-bar>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import head from '../../components/Head/index.vue';
|
|
|
|
|
import trend from './modules/Trend/Trend.vue';
|
|
|
|
|
import smyddcSqmydzc from './modules/SmyddcSqmydzc/SmyddcSqmydzc.vue';
|
|
|
|
|
import hotlineComplaints from './modules/HotlineComplaints/HotlineComplaints.vue';
|
|
|
|
|
import stayList from './modules/StayList/StayList.vue';
|
|
|
|
|
import problemList from './modules/ProblemList/ProblemList.vue';
|
|
|
|
|
import requirementAnalysis from './modules/RequirementAnalysis/RequirementAnalysis.vue';
|
|
|
|
|
import eventPrediction from './modules/EventPrediction/EventPrediction.vue';
|
|
|
|
|
import crowdPortrait from './modules/CrowdPortrait/CrowdPortrait.vue';
|
|
|
|
|
import customTabBar from '../../components/custom-tab-bar';
|
|
|
|
|
const app = getApp();
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
Head,
|
|
|
|
|
Trend,
|
|
|
|
|
SmyddcSqmydzc,
|
|
|
|
|
HotlineComplaints,
|
|
|
|
|
StayList,
|
|
|
|
|
ProblemList,
|
|
|
|
|
RequirementAnalysis,
|
|
|
|
|
EventPrediction,
|
|
|
|
|
CrowdPortrait,
|
|
|
|
|
customTabBar
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
monthOptions: [
|
|
|
|
|
{
|
|
|
|
|
value: 1,
|
|
|
|
|
label: '本月'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 2,
|
|
|
|
|
label: '上月'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 3,
|
|
|
|
|
label: '近3月'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 4,
|
|
|
|
|
label: '近半年'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 5,
|
|
|
|
|
label: '近1年'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
monthIndex: 0,
|
|
|
|
|
stayVal: '1',
|
|
|
|
|
tabValue: '',
|
|
|
|
|
statusHeight: '',
|
|
|
|
|
navigationHeight: '',
|
|
|
|
|
agencyName: ''
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
this.setData({
|
|
|
|
|
statusHeight: app.globalData.deviceInfo.statusHeight,
|
|
|
|
|
navigationHeight: app.globalData.deviceInfo.navigationHeight,
|
|
|
|
|
agencyName: app.globalData.user.agencyName
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
monthChange({
|
|
|
|
|
currentTarget: {
|
|
|
|
|
dataset: { index }
|
|
|
|
|
}
|
|
|
|
|
}) {
|
|
|
|
|
this.setData({
|
|
|
|
|
monthIndex: index
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
gotopage({ currentTarget: { dataset } }) {
|
|
|
|
|
const { url } = dataset;
|
|
|
|
|
console.log(url);
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setStay({
|
|
|
|
|
currentTarget: {
|
|
|
|
|
dataset: { index }
|
|
|
|
|
}
|
|
|
|
|
}) {
|
|
|
|
|
this.setData({
|
|
|
|
|
stayVal: index
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
tabChange({ detail }) {
|
|
|
|
|
this.setData({
|
|
|
|
|
tabValue: detail
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.overview{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.top{
|
|
|
|
|
background: url('../../static/images/statistics/top.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
height: 68px;
|
|
|
|
|
.item{
|
|
|
|
|
flex: 1;
|
|
|
|
|
position: relative;
|
|
|
|
|
&::after{
|
|
|
|
|
content: ' ';
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 13px;
|
|
|
|
|
background: #ff9466;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
&>:first-child{
|
|
|
|
|
&::after{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.num{
|
|
|
|
|
color: #ff4a43;
|
|
|
|
|
}
|
|
|
|
|
.type{
|
|
|
|
|
color: #ff7672;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.bot{
|
|
|
|
|
background: url('../../static/images/statistics/bot.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
height: 68px;
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
.item{
|
|
|
|
|
flex: 1;
|
|
|
|
|
position: relative;
|
|
|
|
|
&::after{
|
|
|
|
|
content: ' ';
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 13px;
|
|
|
|
|
background: #ff844d;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
&>:first-child{
|
|
|
|
|
&::after{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.num{
|
|
|
|
|
color: #ff882b;
|
|
|
|
|
}
|
|
|
|
|
.type{
|
|
|
|
|
color: #ff964c;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.top,.bot{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
.num{
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #333333;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.type{
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
color: #A3ABBA;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.statistics-container {
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
.card {
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
padding: 30rpx;
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.card .title {
|
|
|
|
|
font-size: 34rpx;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333333;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-left: -30rpx;
|
|
|
|
|
margin-bottom: 39rpx;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.card .title:before {
|
|
|
|
|
content: '';
|
|
|
|
|
display: block;
|
|
|
|
|
width: 10rpx;
|
|
|
|
|
height: 28rpx;
|
|
|
|
|
background: #3a80e7;
|
|
|
|
|
border-radius: 4rpx;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.card .title .view {
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
color: #999999;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
.title-tabs {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title-tab {
|
|
|
|
|
margin-right: 60rpx;
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-weight: 300;
|
|
|
|
|
color: #999999;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.title-tab.current {
|
|
|
|
|
font-size: 34rpx;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #333333;
|
|
|
|
|
}
|
|
|
|
|
.triangle {
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
border-left: 18rpx solid transparent; /* 左边透明 */
|
|
|
|
|
border-right: 18rpx solid transparent; /* 右边透明 */
|
|
|
|
|
border-bottom: 24rpx solid #d8e9ff; /* 设置红色为三角形的高度 */
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: -39rpx;
|
|
|
|
|
left: calc(50% - 12px);
|
|
|
|
|
}
|
|
|
|
|
.stay-con {
|
|
|
|
|
background: linear-gradient(0deg, #f7fdff 0%, #d8e9ff 100%);
|
|
|
|
|
border-radius: 14px;
|
|
|
|
|
}
|
|
|
|
|
.card .title .view image {
|
|
|
|
|
width: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
page {
|
|
|
|
|
background: #f7f7f7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sub-tit {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #333333;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 30rpx 0;
|
|
|
|
|
}
|
|
|
|
|
.sub-tit image {
|
|
|
|
|
margin-right: 12rpx;
|
|
|
|
|
width: 20rpx;
|
|
|
|
|
height: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
