elink-star
/
epmet-work-mp
19
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改统计页面图表加载方式

jw-featrue-zhanlibiao
战立标 2 years ago
parent
dc8b3cc481
commit
68c87ee78c
6 changed files with 442 additions and 389 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 185
      pages/statistics/modules/HotlineComplaints/HotlineComplaints.js
  2. 298
      pages/statistics/modules/SmyddcSqmydzc/SmyddcSqmydzc.js
  3. 212
      pages/statistics/modules/Trend/Trend.js
  4. 128
      subpages/statistics/pages/qzbmy/qzbmy.js
  5. 2
      subpages/statistics/pages/qzbmy/qzbmy.wxml
  6. 6
      subpages/statistics/pages/qzbmy/qzbmy.wxss

185
pages/statistics/modules/HotlineComplaints/HotlineComplaints.js
View File

@ -38,7 +38,8 @@ Component({
}, },
data: { data: {
ec: { ec: {
onInit: initChart lazyLoad: true
// onInit: initChart
}, },
tabList: [{ tabList: [{
label: "问题突出类别", label: "问题突出类别",
@ -55,102 +56,110 @@ Component({
} }
}, },
methods: { methods: {
tabChange(index) { tabChange({detail}) {
this.setData({ this.setData({
tabValue: this.tabList[index].value tabValue: this.data.tabList[detail].value
}) })
this.getData() this.getData()
}, },
getData() { getData() {
let params = { this.selectComponent('#hotlineComplaints').init((canvas, width, height, dpr) => {
startTime: '', chart = echarts.init(canvas, null, {
endTime: '' width: width,
} height: height,
let now = new Date(); devicePixelRatio: dpr // 像素比
if (this.data.typeCondition === 0) {
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 1))
}
if (this.data.typeCondition === 1) {
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 1));
}
if (this.data.typeCondition === 2) {
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 2));
}
if (this.data.typeCondition === 3) {
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 5));
}
if (this.data.typeCondition === 4) {
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 11));
}
if (this.data.typeCondition === 1) {
params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59))
} else {
params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59))
}
event12345Group(params).then(({data}) => {
data = data.map(item => {
return {
name: item.name,
value: item.blueNum
}
}); });
let color = ["#4F94FF", "#A182FB", "#27D1A7", "#FCBF06", "#FF7108"] canvas.setChart(chart);
var option = { let params = {
color, startTime: '',
tooltip: { endTime: ''
show: true, }
textStyle: { let now = new Date();
color: '#fff', if (this.data.typeCondition === 0) {
fontSize: 14 params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 1))
}, }
backgroundColor: "#04229a", if (this.data.typeCondition === 1) {
formatter(params) { params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 1));
// console.log(params) }
if (params.name === '') { if (this.data.typeCondition === 2) {
return ''; params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 2));
} }
return `${params.name} : ${params.percent}%`; if (this.data.typeCondition === 3) {
}, params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 5));
}, }
series: [ if (this.data.typeCondition === 4) {
{ params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 11));
name: '', }
type: 'pie',
radius: ['40%', '70%'], if (this.data.typeCondition === 1) {
center: ['50%', '50%'], // 修改为居中 params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59))
avoidLabelOverlap: true, } else {
label: { params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59))
color: '#333333', }
alignTo: 'labelLine', event12345Group(params).then(({data}) => {
formatter: '{num|{c}}\n{name|{b}}', data = data.map(item => {
minMargin: 5, return {
edgeDistance: 10, name: item.name,
lineHeight: 15, value: item.blueNum
rich: {
num: {
fontSize: 17,
color: '#333333'
},
zb: {
fontSize: 14,
color: '#333333'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: data
} }
] });
}; let color = ["#4F94FF", "#A182FB", "#27D1A7", "#FCBF06", "#FF7108"]
chart.setOption(option);
})
var option = {
color,
tooltip: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
},
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;
});
} }
} }
}); });

298
pages/statistics/modules/SmyddcSqmydzc/SmyddcSqmydzc.js
View File

@ -35,167 +35,187 @@ Component({
}, },
data: { data: {
ec: { ec: {
onInit: initChart lazyLoad: true
// onInit: initChart
} }
}, },
lifetimes: { lifetimes: {
ready() { ready() {
this.getData() this.getData()
} }
}, },
methods: { methods: {
getData() { getData() {
let params = { this.selectComponent('#smyddcSqmydzc').init((canvas, width, height, dpr) => {
startTime: '', chart = echarts.init(canvas, null, {
endTime: '' width: width,
} height: height,
let now = new Date(); devicePixelRatio: dpr // 像素比
if (this.data.typeCondition === 0) { });
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 1)) canvas.setChart(chart);
} let params = {
if (this.data.typeCondition === 1) { startTime: '',
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 1)); endTime: ''
} }
if (this.data.typeCondition === 2) { let now = new Date();
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 2)); if (this.data.typeCondition === 0) {
} params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 1))
if (this.data.typeCondition === 3) { }
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 5)); if (this.data.typeCondition === 1) {
} params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 1));
if (this.data.typeCondition === 4) { }
params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 11)); if (this.data.typeCondition === 2) {
} params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 2));
}
if (this.data.typeCondition === 1) { if (this.data.typeCondition === 3) {
params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59)) params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 5));
} else { }
params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59)) if (this.data.typeCondition === 4) {
} params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 11));
console.log(params) }
satisfactionGroup(params).then(({data}) => { if (this.data.typeCondition === 1) {
var dataname = data.map(item => item.name) params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59))
var datavaule = data.map(item => item.blueNum ? item.blueNum : 0) } else {
var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0) params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59))
var indicator = []
let max = Math.max(...datavaule, ...datavaule2)
console.log(max)
var datamax = new Array(datavaule.length).fill(max)
for (var i = 0; i < dataname.length; i++) {
indicator.push({
name: dataname[i],
max: datamax[i],
})
} }
let legendName = ['省满意度调查各项\n不满意人数', '社区满意度自查各项\n不满意人数'] console.log(params)
let series = [{
name: "省满意度调查各项\n不满意人数", satisfactionGroup(params).then(({data}) => {
type: "radar", var dataname = data.map(item => item.name)
symbol: "circle", var datavaule = data.map(item => item.blueNum ? item.blueNum : 0)
symbolSize: 0, var datavaule2 = data.map(item => item.yellowNum ? item.yellowNum : 0)
areaStyle: { var indicator = []
normal: { let max = Math.max(...datavaule, ...datavaule2)
color: 'rgba(58,128,231,0.36)', console.log(max)
} var datamax = new Array(datavaule.length).fill(max)
}, for (var i = 0; i < dataname.length; i++) {
itemStyle: { indicator.push({
color: '#3A80E7', name: dataname[i],
borderColor: '#3AB7FF', max: datamax[i],
borderWidth: 1, })
}, }
lineStyle: { let legendName = ['省满意度调查各项\n不满意人数', '社区满意度自查各项\n不满意人数']
normal: { let series = [{
color: "#3AB7FF", name: "省满意度调查各项\n不满意人数",
width: 2 type: "radar",
} symbol: "circle",
}, symbolSize: 0,
data: [datavaule] areaStyle: {
}, { normal: {
name: "社区满意度自查各项\n不满意人数", color: 'rgba(58,128,231,0.36)',
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]
}]
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, itemStyle: {
itemHeight: 6, color: '#3A80E7',
y: 'bottom', borderColor: '#3AB7FF',
x: 'center', borderWidth: 1,
formatter: name => {
return `{name|${name}}`
}, },
data: legendName, lineStyle: {
}, normal: {
radar: { color: "#3AB7FF",
center: ["50%", "40%"], width: 2
radius: "50%",
startAngle: 90,
splitNumber: 5,
splitArea: {
areaStyle: {
color: 'transparent'
} }
}, },
axisLabel: { data: [datavaule]
show: false, }, {
name: "社区满意度自查各项\n不满意人数",
type: "radar",
symbol: "circle",
symbolSize: 0,
areaStyle: {
normal: {
color: 'rgba(170, 216, 255, 0)',
}
}, },
axisLine: { itemStyle: {
show: true, color: '#EB8E16',
lineStyle: { borderColor: '#EF9700',
color: "rgba(226,226,226,0.28)" borderWidth: 1,
},
lineStyle: {
normal: {
color: "#EF9700",
width: 2
} }
}, },
splitLine: { data: [datavaule2]
}]
var option = {
tooltip: {
show: true, show: true,
lineStyle: { textStyle: {
color: "rgba(226,226,226,0.61)" color: '#fff',
} fontSize: 14
},
formatter(params) {
// console.log(params)
if (params.name === '') {
return '';
}
return `${params.name} : ${params.percent}%`;
},
}, },
name: { legend: {
show: true,
textStyle: { textStyle: {
color: '#333333', color: '#999999',
fontSize: 14, rich: {
borderRadius: 3, name: {
} fontSize: 14,
lineHeight: 19,
padding: [20, 0, 0, 0]
},
}
},
itemWidth: 6,
itemHeight: 6,
y: 'bottom',
x: 'center',
formatter: name => {
return `{name|${name}}`
},
data: legendName,
},
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
}, },
indicator: indicator series
}, };
series chart.setOption(option, true);
}; })
chart.setOption(option,true); return chart;
}) })
} }
} }

212
pages/statistics/modules/Trend/Trend.js
View File

@ -18,128 +18,138 @@ Component({
properties: {}, properties: {},
data: { data: {
ec: { ec: {
onInit: initChart lazyLoad: true
// onInit: initChart
} }
}, },
lifetimes: { lifetimes: {
ready() { ready() {
this.getData() this.getData()
} }
}, },
methods: { methods: {
getData() { getData() {
notSatisfactionTrend().then(({data}) => { this.selectComponent('#Trend').init((canvas, width, height, dpr) => {
let xData = data.monthTimes.map(item => (item.split('-')[1] - 0) + '月'); chart = echarts.init(canvas, null, {
let series = [] width: width,
let color = ['#3A80E7', '#EB8E16', '#10B2A5',] height: height,
data.series.forEach((item,index) => { devicePixelRatio: dpr // 像素比
series.push({ });
name:item.name, canvas.setChart(chart);
type: 'line', notSatisfactionTrend().then(({data}) => {
showAllSymbol: true, let xData = data.monthTimes.map(item => (item.split('-')[1] - 0) + '月');
symbol: 'circle', let series = []
symbolSize: 0, let color = ['#3A80E7', '#EB8E16', '#10B2A5',]
lineStyle: { data.series.forEach((item, index) => {
normal: { series.push({
color: color[index], name: item.name,
type: 'line',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 0,
lineStyle: {
normal: {
color: color[index],
},
}, },
}, label: {
label: {
show: false,
},
itemStyle: {
show: false,
color: '#FFF',
borderColor: color[index],
borderWidth: 1,
},
data: item.data,
},)
})
var option = {
title: {
show: false,
text: '',
x: 'center',
top: '15px',
textStyle: {
color: '#333333',
fontWeight: 500,
fontSize: 18,
},
},
legend: {
// icon: 'circle',
data: data.series.map(item => item.name),
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, show: false,
}, },
splitLine: { itemStyle: {
show: false, show: false,
color: '#FFF',
borderColor: color[index],
borderWidth: 1,
}, },
axisLine: { data: item.data,
lineStyle: { },)
color: '#323c41' })
} var option = {
}, title: {
axisLabel: { show: false,
interval: 0, text: '',
align: 'center', x: 'center',
textStyle: { top: '15px',
fontSize: 11, textStyle: {
color: '#C1C1C1' color: '#333333',
} fontWeight: 500,
fontSize: 18,
}, },
boundaryGap: true,
data: xData,
}, },
],
yAxis: [ legend: {
{ // icon: 'circle',
type: 'value', data: data.series.map(item => item.name),
splitLine: { itemGap: 12,
show: false itemWidth: 12,
}, itemHeight: 5,
axisLabel: { x: 'left',
show: true, top: '0%',
textStyle: {
color: '#999999', color: '#999999',
textStyle: { fontSize: 10,
fontSize: 11 // 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,
}, },
axisTick: { ],
show: false
yAxis: [
{
type: 'value',
splitLine: {
show: false
},
axisLabel: {
show: true,
color: '#999999',
textStyle: {
fontSize: 11
}
},
axisTick: {
show: false
}
} }
}
], ],
series, series,
}; };
chart.setOption(option); chart.setOption(option);
})
return chart
}) })
} }
} }

128
subpages/statistics/pages/qzbmy/qzbmy.js
View File

@ -1,67 +1,75 @@
import {getPotentialDissatisfiedCountDetail, maporg} from "../../../../utils/statisticsApi"; import { getPotentialDissatisfiedCountDetail, maporg } from "../../../../utils/statisticsApi";
Page({ Page({
data: { data: {
orgList: [], orgList: [],
orgIndex: 0, orgIndex: 0,
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
list: [], list: [],
total: 0, total: 0,
mobile: "", mobile: "",
name: "" name: ""
}, },
onLoad(options) { onLoad(options) {
this.getOrg() this.getOrg()
}, },
getOrg() { getOrg() {
maporg().then(async ({data}) => { maporg().then(async ({ data }) => {
let parent = {value: data.id, label: data.name} let parent = { value: data.id, label: data.name }
this.setData({ this.setData({
orgList: [ orgList: [
parent, ...data.children.map(item => { parent, ...data.children.map(item => {
return { return {
value: item.id, value: item.id,
label: item.name label: item.name
} }
}) })
] ]
}) })
this.getList() this.getList()
}) })
}, },
gotopage({currentTarget: {dataset}}) { gotopage({ currentTarget: { dataset } }) {
const {url} = dataset; const { url } = dataset;
wx.navigateTo({url}) wx.navigateTo({ url })
}, },
setVal(e) { setVal(e) {
this.setData({ this.setData({
[e.currentTarget.dataset.key]: e.detail.value [e.currentTarget.dataset.key]: e.detail.value
}) })
}, },
getList() { search() {
getPotentialDissatisfiedCountDetail({ this.setData({
pageNo: this.data.pageNo, pageNo: 1,
pageSize: this.data.pageSize, list: [],
agencyId: this.data.orgList[this.data.orgIndex].value, total: 0,
name: this.data.name, })
mobile: this.data.mobile, this.getList()
}).then(({data}) => { },
this.setData({ getList() {
list: this.data.list.concat(data.list), getPotentialDissatisfiedCountDetail({
total: data.total pageNo: this.data.pageNo,
}) pageSize: this.data.pageSize,
}); agencyId: this.data.orgList[this.data.orgIndex].value,
}, name: this.data.name,
onReachBottom() { mobile: this.data.mobile,
if (this.data.list.length < this.data.total) { }).then(({ data }) => {
this.setData({ this.setData({
pageNo: this.data.pageNo + 1 list: this.data.list.concat(data.list),
}) total: data.total
this.getList() })
} });
},
onReachBottom() {
if (this.data.list.length < this.data.total) {
this.setData({
pageNo: this.data.pageNo + 1
})
this.getList()
} }
}
}) })

2
subpages/statistics/pages/qzbmy/qzbmy.wxml
View File

@ -14,7 +14,7 @@
</picker> </picker>
<input placeholder="按姓名" bind:input="setVal" data-key="name" class="picker-type"/> <input placeholder="按姓名" bind:input="setVal" data-key="name" class="picker-type"/>
<input placeholder="按电话" bind:input="setVal" data-key="mobile" class="picker-type"/> <input placeholder="按电话" bind:input="setVal" data-key="mobile" class="picker-type"/>
<view class="btn">筛选</view> <view class="btn" bind:tap="search">筛选</view>
</view> </view>
<view class="qz-container"> <view class="qz-container">

6
subpages/statistics/pages/qzbmy/qzbmy.wxss
View File

@ -28,6 +28,12 @@ page {
justify-content: space-between; justify-content: space-between;
padding: 0 30rpx; padding: 0 30rpx;
box-sizing: border-box; box-sizing: border-box;
}
.picker text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.picker-type image, .picker-type image,

Write Preview
Loading…
Cancel
Save