战立标
2 years ago
36 changed files with 890 additions and 33 deletions
@ -0,0 +1,21 @@ |
|||
const App = getApp(); |
|||
Component({ |
|||
properties: {}, |
|||
|
|||
data: { |
|||
statusHeight: 0, |
|||
navigationHeight: 0, |
|||
agencyName: '', |
|||
}, |
|||
lifetimes: { |
|||
ready: function () { |
|||
this.setData({ |
|||
statusHeight: App.globalData.deviceInfo.statusHeight, |
|||
navigationHeight: App.globalData.deviceInfo.navigationHeight, |
|||
agencyName: App.globalData.user.agencyName, |
|||
}) |
|||
}, |
|||
}, |
|||
|
|||
methods: {} |
|||
}); |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
<view class="header"> |
|||
<image class="header-bg" src="../../images/statistics/nav_bg.jpg"/> |
|||
<view class="navigation" mode="widthFix" style="height: {{navigationHeight}}px; padding-top: {{statusHeight}}px;"> |
|||
<image class="nav-bg" mode="widthFix" src="../../images/statistics/nav_bg.jpg"/> |
|||
<view class="con"> |
|||
<image class="icon" src="../../images/statistics/icon-home.png" mode=""/> {{agencyName}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view style="height: {{navigationHeight + statusHeight}}px"></view> |
|||
@ -0,0 +1,44 @@ |
|||
.header { |
|||
|
|||
} |
|||
|
|||
.header .navigation { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: start; |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
padding-left: 20rpx; |
|||
overflow: hidden; |
|||
z-index: 999999; |
|||
} |
|||
|
|||
.header .navigation .icon { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
margin-right: 17rpx; |
|||
} |
|||
.header .navigation .con { |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
.header .navigation .nav-bg { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: unset; |
|||
} |
|||
.header-bg { |
|||
width: 100%; |
|||
overflow: hidden; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: -1; |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
Component({ |
|||
properties: { |
|||
tabList: { |
|||
type: Array |
|||
} |
|||
}, |
|||
data: { |
|||
cur: 0 |
|||
}, |
|||
methods: { |
|||
tabChange(e) { |
|||
this.setData({ |
|||
cur: e.currentTarget.dataset.index |
|||
}) |
|||
this.triggerEvent("tabChange",e.currentTarget.dataset.index) |
|||
} |
|||
} |
|||
}); |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
} |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
<view class="tab"> |
|||
<view class="tab-item {{cur - 0 === index - 0?'cur':''}}" |
|||
wx:for="{{tabList}}" |
|||
data-index="{{index}}" |
|||
wx:key="{{index}}" |
|||
bind:tap="tabChange" |
|||
> |
|||
<text>{{item.label}}</text> |
|||
<image mode="widthFix" src="../../images/statistics/sel.png" style="width: 12rpx;height: 8rpx" class="cur-img"/> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,40 @@ |
|||
.tab { |
|||
display: flex; |
|||
} |
|||
.tab .tab-item { |
|||
background: #F4F8FE; |
|||
border: 2px solid #D6E6FC; |
|||
border-radius: 6rpx; |
|||
flex: 1; |
|||
padding: 25rpx 0; |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
color: #999999; |
|||
margin: 0 15rpx 30rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.tab .tab-item.cur { |
|||
color: #3A80E7; |
|||
position: relative; |
|||
} |
|||
.cur-img { |
|||
display: none; |
|||
} |
|||
.tab .tab-item.cur:before { |
|||
content: ''; |
|||
display: block; |
|||
height: 5rpx; |
|||
width: 100%; |
|||
background: #3A80E7; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
} |
|||
.tab .tab-item.cur .cur-img { |
|||
display: block; |
|||
position: absolute; |
|||
bottom: -8rpx; |
|||
left: calc(50% - 6rpx); |
|||
} |
|||
|
After Width: | Height: | Size: 793 B |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 565 B |
@ -0,0 +1,20 @@ |
|||
Component({ |
|||
properties: {}, |
|||
data: { |
|||
tabList: [{ |
|||
label: "按省及社区满意度\n调查结果", |
|||
value: 1 |
|||
},{ |
|||
label: '按12345热线\n投诉结果', |
|||
value: 2 |
|||
}], |
|||
tabValue: '' |
|||
}, |
|||
methods: { |
|||
tabChange(index) { |
|||
this.setData({ |
|||
tabValue: this.tabList[index].value |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"Tabs": "../../../../components/Tabs" |
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
<Tabs tabList="{{tabList}}" bind:tabChange="tabChange" /> |
|||
<view class="sub-tit"> |
|||
<image src="../../../../images/statistics/sub-tit.png" mode="widthFix" /> |
|||
<text>不满意人员画像</text> |
|||
</view> |
|||
@ -0,0 +1,14 @@ |
|||
|
|||
.sub-tit { |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 30rpx 0; |
|||
} |
|||
.sub-tit image { |
|||
margin-right: 12rpx; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
Component({ |
|||
properties: {}, |
|||
data: {}, |
|||
methods: {} |
|||
}); |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
} |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
<view class="num-list"> |
|||
<view class="num-item"> |
|||
<view class="txt"> |
|||
<text>事件未解决 |
|||
的人数</text> |
|||
</view> |
|||
<view class="num">76</view> |
|||
</view> |
|||
<view class="num-item"> |
|||
<view class="txt"> |
|||
<text>需求未满足 |
|||
的人数</text> |
|||
</view> |
|||
<view class="num">24</view> |
|||
</view> |
|||
<view class="num-item"> |
|||
<view class="txt"> |
|||
<text>应享未享服务 |
|||
的人数</text> |
|||
</view> |
|||
<view class="num">13</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,41 @@ |
|||
.num-list { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
} |
|||
.num-list .num-item { |
|||
} |
|||
.num-list .num-item:after { |
|||
content: ''; |
|||
display: block; |
|||
position: absolute; |
|||
right: 0; |
|||
top: calc(50% - 45rpx); |
|||
width: 1rpx; |
|||
height: 90rpx; |
|||
background: #C1C1C1; |
|||
opacity: 0.66; |
|||
} |
|||
.num-list .num-item:nth-of-type(1):after { |
|||
left: 33.333333%; |
|||
} |
|||
.num-list .num-item:nth-of-type(2):after { |
|||
left: 66.666666%; |
|||
} |
|||
.num-list .num-item:last-child:after { |
|||
display: none; |
|||
} |
|||
.num-list .num-item .txt { |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
color: #999999; |
|||
line-height: 38rpx; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
.num-list .num-item .num { |
|||
font-size: 42rpx; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
line-height: 42rpx; |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
import * as echarts from '../../../../ec-canvas/echarts'; |
|||
function initChart(canvas, width, height, dpr) { |
|||
const chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // 像素比
|
|||
}); |
|||
canvas.setChart(chart); |
|||
|
|||
let data = [ |
|||
{value: 120, name: '市容环境'}, |
|||
{value: 150, name: '停车管理'}, |
|||
{value: 210, name: '物业服务'}, |
|||
{value: 177, name: '城市低保'}, |
|||
{value: 194, name: '违章建房'}, |
|||
]; |
|||
let color = ["#4F94FF","#A182FB","#27D1A7","#FCBF06","#FF7108"] |
|||
var option = { |
|||
color, |
|||
tooltip: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 14 |
|||
}, |
|||
backgroundColor: "#04229a", |
|||
// extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
|
|||
formatter(params) { |
|||
// console.log(params)
|
|||
if (params.name === '') { |
|||
return ''; |
|||
} |
|||
return `${params.name} : ${params.percent}%`; |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '', |
|||
type: 'pie', |
|||
radius: ['40%', '70%'], |
|||
center: ['50%', '50%'], // 修改为居中
|
|||
avoidLabelOverlap: true, |
|||
label: { |
|||
color: '#333333', |
|||
alignTo: 'labelLine', |
|||
formatter: '{num|{c}}\n{name|{b}}', |
|||
minMargin: 5, |
|||
edgeDistance: 10, |
|||
lineHeight: 15, |
|||
rich: { |
|||
num: { |
|||
fontSize: 17, |
|||
color: '#333333' |
|||
}, |
|||
zb: { |
|||
fontSize: 14, |
|||
color: '#333333' |
|||
} |
|||
} |
|||
}, |
|||
labelLine: { |
|||
length: 15, |
|||
length2: 0, |
|||
maxSurfaceAngle: 80 |
|||
}, |
|||
data: data |
|||
} |
|||
] |
|||
}; |
|||
chart.setOption(option); |
|||
return chart; |
|||
} |
|||
Component({ |
|||
properties: {}, |
|||
data: { |
|||
ec: { |
|||
onInit: initChart |
|||
}, |
|||
tabList: [{ |
|||
label: "问题突出类别", |
|||
value: 1 |
|||
},{ |
|||
label: '行业领域分析', |
|||
value: 2 |
|||
}], |
|||
tabValue: '' |
|||
}, |
|||
methods: { |
|||
tabChange(index) { |
|||
this.setData({ |
|||
tabValue: this.tabList[index].value |
|||
}) |
|||
} |
|||
} |
|||
}); |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"Tabs": "../../../../components/Tabs", |
|||
"ec-canvas": "../../../../ec-canvas/ec-canvas" |
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
<Tabs tabList="{{tabList}}" bind:tabChange="tabChange" /> |
|||
|
|||
<view class="hotlineComplaints"> |
|||
<ec-canvas id="hotlineComplaints" canvas-id="hotlineComplaints" ec="{{ ec }}"></ec-canvas> |
|||
</view> |
|||
@ -0,0 +1,8 @@ |
|||
ec-canvas { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.hotlineComplaints { |
|||
width: 100%; |
|||
height: 318rpx; |
|||
} |
|||
@ -0,0 +1,141 @@ |
|||
import * as echarts from '../../../../ec-canvas/echarts'; |
|||
|
|||
function initChart(canvas, width, height, dpr) { |
|||
const chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // 像素比
|
|||
}); |
|||
canvas.setChart(chart); |
|||
var dataname = ['老有所养', '社会治安', '生态环境', '体育设施', '社会救助', '文化设施', '基础教育', '病有所医'] |
|||
var datamax = [20, 20, 20, 20, 20, 20, 20, 20] |
|||
var datavaule = [10, 16, 18, 15, 12, 18, 18, 18] |
|||
var datavaule2 = [12, 17, 20, 16, 13, 19, 19, 19] |
|||
var indicator = [] |
|||
for (var i = 0; i < dataname.length; i++) { |
|||
indicator.push({ |
|||
name: dataname[i], |
|||
max: datamax[i], |
|||
}) |
|||
} |
|||
var option = { |
|||
tooltip: { |
|||
show: false, |
|||
trigger: "item", |
|||
}, |
|||
legend: { |
|||
show: true, |
|||
textStyle: { |
|||
color: '#999999', |
|||
rich: { |
|||
name: { |
|||
fontSize: 14, |
|||
lineHeight: 19, |
|||
padding: [20, 0, 0, 0] |
|||
}, |
|||
} |
|||
}, |
|||
itemWidth: 6, |
|||
itemHeight: 6, |
|||
y: 'bottom', |
|||
x: 'center', |
|||
formatter: name => { |
|||
return `{name|${name}}` |
|||
}, |
|||
data: ['省满意度调查\n各项不满意人数', '社区满意度自查\n各项不满意人数'], |
|||
}, |
|||
radar: { |
|||
center: ["50%", "40%"], |
|||
radius: "50%", |
|||
startAngle: 90, |
|||
splitNumber: 5, |
|||
splitArea: { |
|||
areaStyle: { |
|||
color: 'transparent' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.28)" |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(226,226,226,0.61)" |
|||
} |
|||
}, |
|||
name: { |
|||
textStyle: { |
|||
color: '#333333', |
|||
fontSize: 14, |
|||
borderRadius: 3, |
|||
} |
|||
}, |
|||
indicator: indicator |
|||
}, |
|||
|
|||
series: [{ |
|||
name: "省满意度调查\n各项不满意人数", |
|||
type: "radar", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
normal: { |
|||
color: 'rgba(58,128,231,0.36)', |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
color: '#3A80E7', |
|||
borderColor: '#3AB7FF', |
|||
borderWidth: 1, |
|||
}, |
|||
lineStyle: { |
|||
normal: { |
|||
color: "#3AB7FF", |
|||
width: 2 |
|||
} |
|||
}, |
|||
data: [datavaule] |
|||
}, { |
|||
name: "社区满意度自查\n各项不满意人数", |
|||
type: "radar", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
normal: { |
|||
color: 'rgba(170, 216, 255, 0)', |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
color: '#EB8E16', |
|||
borderColor: '#EF9700', |
|||
borderWidth: 1, |
|||
}, |
|||
lineStyle: { |
|||
normal: { |
|||
color: "#EF9700", |
|||
width: 2 |
|||
} |
|||
}, |
|||
data: [datavaule2] |
|||
}] |
|||
}; |
|||
chart.setOption(option); |
|||
return chart; |
|||
} |
|||
|
|||
Component({ |
|||
properties: {}, |
|||
data: { |
|||
ec: { |
|||
onInit: initChart |
|||
} |
|||
}, |
|||
methods: { |
|||
} |
|||
}); |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"ec-canvas": "../../../../ec-canvas/ec-canvas" |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
<view class="smyddcSqmydzc"> |
|||
<ec-canvas id="smyddcSqmydzc" canvas-id="smyddcSqmydzc" ec="{{ ec }}"></ec-canvas> |
|||
</view> |
|||
@ -0,0 +1,8 @@ |
|||
ec-canvas { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.smyddcSqmydzc { |
|||
width: 100%; |
|||
height: 558rpx; |
|||
} |
|||
@ -0,0 +1,176 @@ |
|||
import * as echarts from '../../../../ec-canvas/echarts'; |
|||
|
|||
function initChart(canvas, width, height, dpr) { |
|||
const chart = echarts.init(canvas, null, { |
|||
width: width, |
|||
height: height, |
|||
devicePixelRatio: dpr // 像素比
|
|||
}); |
|||
canvas.setChart(chart); |
|||
let xData = ['10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']; |
|||
let tq1 = [12, 20, 30, 60, 49, 18, 90, 48, 39, 30, 27, 40, 48, 39, 27, 49]; |
|||
let tq2 = [10, 50, 50, 27, 49, 58, 80, 80, 19, 60, 30, 30, 49, 18, 90, 20]; |
|||
let tq3 = [300, 90, 48, 39, 30, 27, 49, 18, 90, 39, 27, 49, 30, 100, 49, 100]; |
|||
|
|||
var option = { |
|||
title: { |
|||
show: false, |
|||
text: '', |
|||
x: 'center', |
|||
top: '15px', |
|||
textStyle: { |
|||
color: '#333333', |
|||
fontWeight: 500, |
|||
fontSize: 18, |
|||
}, |
|||
}, |
|||
|
|||
legend: { |
|||
// icon: 'circle',
|
|||
data: ['12345投诉事件数', '省调查不满意数', '社区自查不满意数'], |
|||
itemGap: 12, |
|||
itemWidth: 12, |
|||
itemHeight: 5, |
|||
x: 'left', |
|||
top: '0%', |
|||
textStyle: { |
|||
color: '#999999', |
|||
fontSize: 10, |
|||
// padding:[0, 10, 0, 10],
|
|||
} |
|||
}, |
|||
grid: { |
|||
top: '18%', |
|||
left: '2%', |
|||
right: '4%', |
|||
bottom: '8%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#323c41' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
interval: 0, |
|||
align: 'center', |
|||
textStyle: { |
|||
fontSize: 11, |
|||
color: '#C1C1C1' |
|||
} |
|||
}, |
|||
boundaryGap: true, |
|||
data: xData, |
|||
}, |
|||
], |
|||
|
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
splitLine: { |
|||
show: false |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
color: '#999999', |
|||
textStyle: { |
|||
fontSize: 11 |
|||
} |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
} |
|||
|
|||
], |
|||
series: [ |
|||
{ |
|||
name: '12345投诉事件数', |
|||
type: 'line', |
|||
showAllSymbol: true, |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
lineStyle: { |
|||
normal: { |
|||
color: '#3A80E7', |
|||
}, |
|||
}, |
|||
label: { |
|||
show: false, |
|||
}, |
|||
itemStyle: { |
|||
show: false, |
|||
color: '#FFF', |
|||
borderColor: '#3A80E7', |
|||
borderWidth: 1, |
|||
}, |
|||
data: tq1, |
|||
}, |
|||
{ |
|||
name: '省调查不满意数', |
|||
type: 'line', |
|||
showAllSymbol: true, |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
lineStyle: { |
|||
normal: { |
|||
color: '#EB8E16', |
|||
}, |
|||
}, |
|||
label: { |
|||
show: false, |
|||
}, |
|||
itemStyle: { |
|||
color: '#fff', |
|||
borderColor: '#EB8E16', |
|||
borderWidth: 1, |
|||
}, |
|||
data: tq2, //data.values
|
|||
}, |
|||
{ |
|||
name: '社区自查不满意数', |
|||
type: 'line', |
|||
yIndex: 0, |
|||
showAllSymbol: true, |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
lineStyle: { |
|||
normal: { |
|||
color: '#10B2A5', |
|||
}, |
|||
}, |
|||
label: { |
|||
show: false, |
|||
}, |
|||
itemStyle: { |
|||
color: '#fff', |
|||
borderColor: '#10B2A5', |
|||
borderWidth: 1, |
|||
}, |
|||
data: tq3, //data.values
|
|||
} |
|||
], |
|||
}; |
|||
chart.setOption(option); |
|||
return chart; |
|||
} |
|||
|
|||
Component({ |
|||
properties: {}, |
|||
data: { |
|||
ec: { |
|||
onInit: initChart |
|||
} |
|||
}, |
|||
methods: { |
|||
} |
|||
}); |
|||
@ -0,0 +1,6 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": { |
|||
"ec-canvas": "../../../../ec-canvas/ec-canvas" |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
<view class="trend"> |
|||
<ec-canvas id="Trend" canvas-id="Trend" ec="{{ ec }}"></ec-canvas> |
|||
</view> |
|||
@ -0,0 +1,8 @@ |
|||
ec-canvas { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.trend { |
|||
width: 100%; |
|||
height: 338rpx; |
|||
} |
|||
@ -1,4 +1,11 @@ |
|||
{ |
|||
"navigationStyle": "custom", |
|||
"usingComponents": {} |
|||
"usingComponents": { |
|||
"Head": "../../components/Head", |
|||
"Trend": "./modules/Trend/Trend", |
|||
"SmyddcSqmydzc": "./modules/SmyddcSqmydzc/SmyddcSqmydzc", |
|||
"HotlineComplaints": "./modules/HotlineComplaints/HotlineComplaints", |
|||
"EventPrediction": "./modules/EventPrediction/EventPrediction", |
|||
"CrowdPortrait": "./modules/CrowdPortrait/CrowdPortrait" |
|||
} |
|||
} |
|||
@ -1,7 +1,53 @@ |
|||
<view class="header"> |
|||
<view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;"> |
|||
<image src="../../images/work/header_left.png" mode=""/> {{agencyName}} |
|||
<Head/> |
|||
<view class="statistics-container"> |
|||
<view class="card"> |
|||
<view class="title">不满意事项趋势分析</view> |
|||
|
|||
<Trend/> |
|||
</view> |
|||
|
|||
<view class="card"> |
|||
<view class="title"> |
|||
<text>不满意事项类型分析</text> |
|||
<view class="view">查看 |
|||
<image mode="widthFix" src="../../images/right.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="tag-list"> |
|||
<view wx:for="{{monthOptions}}" |
|||
class="tag {{index === monthIndex?'cur':''}}" |
|||
wx:key="index" |
|||
bind:tap="monthChange" |
|||
data-index="{{index}}"> |
|||
{{item.label}} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="sub-tit"> |
|||
<image src="../../images/statistics/sub-tit.png" mode="widthFix" /> |
|||
<text>省满意度调查&社区满意度自查</text> |
|||
</view> |
|||
|
|||
<SmyddcSqmydzc/> |
|||
|
|||
<view class="sub-tit"> |
|||
<image src="../../images/statistics/sub-tit.png" mode="widthFix" /> |
|||
<text>12345热线投诉</text> |
|||
</view> |
|||
|
|||
<HotlineComplaints /> |
|||
|
|||
|
|||
</view> |
|||
|
|||
<view class="card"> |
|||
<view class="title">潜在不满意人员及事项预测</view> |
|||
<EventPrediction/> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="card"> |
|||
<view class="title">不满意人群画像</view> |
|||
<CrowdPortrait/> |
|||
</view> |
|||
</view> |
|||
|
|||
@ -1,34 +1,76 @@ |
|||
|
|||
.header { |
|||
width: 100%; |
|||
height: 470rpx; |
|||
/* position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 1000; */ |
|||
background: linear-gradient(180deg, #116FED 0%, #66A6FD 63%, #F7F7F7 100%); |
|||
overflow: hidden; |
|||
} |
|||
.header .header-bg { |
|||
width: 100%; |
|||
height: 444rpx; |
|||
position: absolute; |
|||
height: 100%; |
|||
z-index: -999; |
|||
.statistics-container { |
|||
padding: 20rpx; |
|||
} |
|||
.header .navigation { |
|||
width: 100%; |
|||
.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; |
|||
justify-content: start; |
|||
color: #fff; |
|||
font-size: 32rpx; |
|||
margin-left: -30rpx; |
|||
margin-bottom: 39rpx; |
|||
position: relative; |
|||
padding-left: 20rpx; |
|||
z-index: 100; |
|||
} |
|||
.header .navigation image{ |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
margin-right: 17rpx; |
|||
.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: 400; |
|||
color: #999999; |
|||
display: flex; |
|||
align-items: center; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
.card .title .view image { |
|||
width: 24rpx; |
|||
} |
|||
page { |
|||
background: #f7f7f7; |
|||
} |
|||
|
|||
.tag-list { |
|||
display: flex; |
|||
margin: 0 -8rpx; |
|||
justify-content: space-between; |
|||
} |
|||
.tag-list .tag { |
|||
padding: 10rpx 20rpx; |
|||
font-size: 28rpx; |
|||
margin: 0 8rpx; |
|||
color: #3A80E7; |
|||
background: #F1F6FF; |
|||
border: 1px solid #3A80E7; |
|||
border-radius: 1000rpx; |
|||
} |
|||
.tag-list .tag.cur { |
|||
background: #3A80E7; |
|||
color: #ffff; |
|||
} |
|||
.sub-tit { |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 30rpx 0; |
|||
} |
|||
.sub-tit image { |
|||
margin-right: 12rpx; |
|||
width: 20rpx; |
|||
height: 20rpx; |
|||
} |
|||
Loading…
Reference in new issue