战立标
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", |
"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"> |
<Head/> |
||||
<view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;"> |
<view class="statistics-container"> |
||||
<image src="../../images/work/header_left.png" mode=""/> {{agencyName}} |
<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> |
||||
|
|
||||
|
<view class="card"> |
||||
|
<view class="title">潜在不满意人员及事项预测</view> |
||||
|
<EventPrediction/> |
||||
|
</view> |
||||
|
|
||||
</view> |
<view class="card"> |
||||
|
<view class="title">不满意人群画像</view> |
||||
|
<CrowdPortrait/> |
||||
|
</view> |
||||
|
</view> |
||||
|
|||||
@ -1,34 +1,76 @@ |
|||||
|
.statistics-container { |
||||
.header { |
padding: 20rpx; |
||||
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; |
|
||||
} |
} |
||||
.header .navigation { |
.card { |
||||
width: 100%; |
background: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.card .title { |
||||
|
font-size: 34rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: start; |
margin-left: -30rpx; |
||||
color: #fff; |
margin-bottom: 39rpx; |
||||
font-size: 32rpx; |
|
||||
position: relative; |
position: relative; |
||||
padding-left: 20rpx; |
|
||||
z-index: 100; |
|
||||
} |
} |
||||
.header .navigation image{ |
.card .title:before { |
||||
width: 34rpx; |
content: ''; |
||||
height: 34rpx; |
display: block; |
||||
margin-right: 17rpx; |
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