|
|
@@ -0,0 +1,271 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="search">
|
|
|
+ <el-select placeholder="请选择所属社区" v-model="communityId" clearable>
|
|
|
+ <el-option v-for="(item, index) in communityList" :key="index" :label="item.communityName" :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="pickerTime"
|
|
|
+ value-format="yyyyMM"
|
|
|
+ type="monthrange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ @change="timeToggle"
|
|
|
+ :editable="false"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search" v-preventReClick>查询 </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="chart-wrap">
|
|
|
+ <zz-echart :option="complaintOptions" class="chart"></zz-echart>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //社区列表
|
|
|
+ communityList: [],
|
|
|
+ communityId: '',
|
|
|
+ pickerTime: ['', ''],
|
|
|
+ complaintOptions: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#283b56'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ dataView: { show: true, readOnly: false },
|
|
|
+ magicType: { show: true, type: ['line', 'bar'] },
|
|
|
+ restore: { show: true },
|
|
|
+ saveAsImage: { show: true }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['扰民投诉', '其他', '物业服务', '公共卫生', '服务质量', '安全建议', '总数']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 80,
|
|
|
+ left: 40,
|
|
|
+ bottom: 40,
|
|
|
+ right: 40,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ axisLine: {
|
|
|
+ show: false // 不显示坐标轴
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false // 不显示坐标轴刻度
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: function (params, index) {
|
|
|
+ return params.slice(4) + '月';
|
|
|
+ },
|
|
|
+ color: '#9B9DA5',
|
|
|
+ margin: 15
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '次数',
|
|
|
+ min: 0,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} 次'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false //y轴线消失
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed' //虚线
|
|
|
+ },
|
|
|
+ show: true //隐藏
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '总数',
|
|
|
+ min: 0,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} 次'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false //y轴线消失
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed' //虚线
|
|
|
+ },
|
|
|
+ show: true //隐藏
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '扰民投诉',
|
|
|
+ type: 'bar',
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 次';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他',
|
|
|
+ type: 'bar',
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 次';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '物业服务',
|
|
|
+ type: 'bar',
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 次';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '公共卫生',
|
|
|
+ type: 'bar',
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 次';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '服务质量',
|
|
|
+ type: 'bar',
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 次';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '安全建议',
|
|
|
+ type: 'bar',
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 次';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '总数',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + ' 次';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ let nowDate = new Date();
|
|
|
+ let nowYear = this.$moment(nowDate).format('YYYYMM');
|
|
|
+ let lasteYear = this.$moment(nowDate).subtract(1, 'years').format('YYYYMM');
|
|
|
+ this.pickerTime = [lasteYear, nowYear];
|
|
|
+ this.getCommunityList();
|
|
|
+ this.mixins_search();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ mixins_search() {
|
|
|
+ this.statisticComplaintCategory();
|
|
|
+ },
|
|
|
+
|
|
|
+ updateChart(data) {
|
|
|
+ let xAxisData = [];
|
|
|
+ let complaintData = [];
|
|
|
+ let otherData = [];
|
|
|
+ let propertyServiceData = [];
|
|
|
+ let publicHealthData = [];
|
|
|
+ let qualityServiceData = [];
|
|
|
+ let securityData = [];
|
|
|
+ let totalData = [];
|
|
|
+ data.forEach((item) => {
|
|
|
+ xAxisData.push(item.month);
|
|
|
+ complaintData.push(item.complaint);
|
|
|
+ otherData.push(item.other);
|
|
|
+ propertyServiceData.push(item.propertyService);
|
|
|
+ publicHealthData.push(item.publicHealth);
|
|
|
+ qualityServiceData.push(item.qualityService);
|
|
|
+ securityData.push(item.security);
|
|
|
+ totalData.push(item.total);
|
|
|
+ });
|
|
|
+ this.complaintOptions.xAxis[0].data = xAxisData;
|
|
|
+ this.complaintOptions.series[0].data = complaintData;
|
|
|
+ this.complaintOptions.series[1].data = otherData;
|
|
|
+ this.complaintOptions.series[2].data = propertyServiceData;
|
|
|
+ this.complaintOptions.series[3].data = publicHealthData;
|
|
|
+ this.complaintOptions.series[4].data = qualityServiceData;
|
|
|
+ this.complaintOptions.series[5].data = securityData;
|
|
|
+ this.complaintOptions.series[6].data = totalData;
|
|
|
+ },
|
|
|
+
|
|
|
+ statisticComplaintCategory() {
|
|
|
+ this.$http
|
|
|
+ .get('/sc-community/feedback/statisticComplaintCategory', {
|
|
|
+ communityId: this.communityId,
|
|
|
+ startMonth: this.pickerTime[0],
|
|
|
+ endMonth: this.pickerTime[1]
|
|
|
+ })
|
|
|
+ .then(({ data, msg, status }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.updateChart(data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 获取社区列表*/
|
|
|
+ getCommunityList() {
|
|
|
+ this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.communityList = data;
|
|
|
+ this.$store.commit('setAreaSelect', data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .chart-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 700px;
|
|
|
+ background: white;
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+</style>
|
Shannon_mu