单园区欠费统计

src/api/reportform/index.js

@@ -83,3 +83,12 @@ export function exportList (query) {
 		params: query
 	})
 }
+
+// 查询生成表数据
+export function getOweChargeTotal (query) {
+	return request({
+		url: '/admin/chargetab/owechargetotal',
+		method: 'get',
+		params: query
+	})
+}

src/store/modules/user.js

@@ -42,7 +42,8 @@ const actions = {
   login({ commit }, userInfo) {
     return new Promise((resolve, reject) => {
       login(userInfo).then(response => {
-        const { token } = response.data
+				const { token, userid } = response.data
+				localStorage.role = userid;
         commit('SET_TOKEN', token)
         setToken(token)
         resolve()

src/views/reportform/components/LabBarChart.vue

@@ -0,0 +1,170 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+
+const animationDuration = 3000
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      xDataArray: [],
+      seriesArray: []
+    }
+  },
+  watch: {
+    dataList: {
+      handler(newValue, oldValue) {
+        // 重绘
+        if (this.chart) {
+          this.chart.dispose()
+          this.chart = null
+        }
+        const receivableArray = []
+        const paidArray = []
+        this.xDataArray = []
+        this.seriesArray = []
+        newValue.forEach(item => {
+          this.xDataArray.push(item.Descr)
+          receivableArray.push(item.Persons)
+          paidArray.push(item.Amount.toFixed(1))
+        })
+        this.seriesArray.push({
+          name: '欠费户数',
+          type: 'bar',
+          barGap: 0,
+          barWidth: '20%',
+          data: receivableArray,
+          itemStyle: {
+            normal: {
+              label: {
+                rotate: 90,
+                // show: true, // 开启显示
+                position: 'insideBottom',
+                distance: 30,
+                verticalAlign: 'middle',
+                fontSize: 14,
+                rich: {
+                  name: {
+                    textBorderColor: '#fff'
+                  }
+                }
+              }
+            }
+          },
+          animationDuration
+        },
+        {
+          name: '欠费金额',
+          type: 'line',
+					yAxisIndex: 1,
+          barGap: 0,
+          barWidth: '20%',
+          data: paidArray,
+          itemStyle: {
+            normal: {
+              label: {
+                rotate: 90,
+                // show: true, // 开启显示
+                position: 'insideBottom',
+                distance: 30,
+                verticalAlign: 'middle',
+                fontSize: 14,
+                rich: {
+                  name: {
+                    textBorderColor: '#fff'
+                  }
+                }
+              }
+            }
+          },
+          animationDuration
+        })
+        this.initChart()
+      },
+      deep: true
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        color: ['#126db9', '#b98d12'],
+        legend: {
+          data: ['欠费户数', '欠费金额']
+        },
+        grid: {
+          top: '10%',
+          left: '2%',
+          right: '5%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'category',
+          data: this.xDataArray,
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+            type: 'value',
+            name: '欠费户数(个)',
+            // min: 0,
+            // max: 250,
+            // interval: 50,
+            axisLabel: {
+                formatter: '{value} 个'
+            }
+        },
+        {
+            type: 'value',
+            name: '欠费金额(万元)',
+            // min: 0,
+            // max: 25,
+            interval: 5,
+            axisLabel: {
+                formatter: '{value} 万元'
+            }
+        }],
+        series: this.seriesArray
+      })
+    }
+  }
+}
+</script>

src/views/reportform/parkOwe.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="app-container">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+			<el-form-item v-if="role=='admin' || role=='group'" label="园区：">
+				<el-select v-model="queryParams.cid" placeholder="请选择">
+					<el-option
+						v-for="item in cidList"
+						:key="item.cid"
+						:label="item.descr"
+						:value="item.cid"
+						clear="false"
+					/>
+				</el-select>
+			</el-form-item>
+      <el-form-item label="缴费类型">
+        <el-select ref="headerSearchSelect"
+                   v-model="queryParams.chargetype"
+                   clearable
+                   size="small">
+          <el-option v-for="item in feesType"
+                     :key="item.value"
+                     :value="item.value"
+                     :label="item.label" />
+        </el-select>
+      </el-form-item>
+			<el-form-item label="欠费统计日期：">
+				<el-date-picker
+					v-model="queryParams.startDate"
+					type="date"
+					placeholder="请选择日期"
+					value-format="yyyy-MM-dd"
+				>
+				</el-date-picker>
+			</el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="chart-wrapper">
+      <lab-bar-chart :data-list="dataList" />
+    </div>
+    <el-table v-loading="loading" :data="dataListTable" border>
+			<el-table-column prop="rowZero"></el-table-column>
+      <el-table-column prop="rowOne" label="1年及以下"></el-table-column>
+			<el-table-column prop="rowTwo" label="1-2年"></el-table-column>
+			<el-table-column prop="rowThree" label="2-3年"></el-table-column>
+			<el-table-column prop="rowFour" label="3-4年"></el-table-column>
+			<el-table-column prop="rowFive" label="4-5年"></el-table-column>
+			<el-table-column prop="rowSix" label="5年以上"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getOweChargeTotal } from '@/api/reportform'
+import LabBarChart from './components/LabBarChart'
+export default {
+  name: 'YearReport',
+  components: {
+    LabBarChart
+  },
+  data() {
+    return {
+			cidList:JSON.parse(localStorage.cid) || [], // 园区列表
+			role:localStorage.role,
+      // 数据列表
+      dataList: [],
+			dataListTable: [],
+      // 遍历表头
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      queryParams: {
+        chargetype: undefined,
+        cid: undefined,
+				startDate: undefined
+      },
+      feesType: [
+        { value: 1, label: '物业费' },
+        { value: 2, label: '电梯卡费' },
+        { value: 3, label: '车位费' }
+      ],
+    }
+  },
+  created() {
+		this.loading = false
+  },
+  methods: {
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true
+      getOweChargeTotal(this.queryParams).then((response) => {
+        this.dataList = response.data
+				let rowPerson = {}
+				let rowMoney = {}
+				if (this.dataList.length > 0) {
+					rowPerson.rowZero = '欠费户数(个)'
+					rowPerson.rowOne = this.dataList[0].Persons
+					rowPerson.rowTwo = this.dataList[1].Persons
+					rowPerson.rowThree = this.dataList[2].Persons
+					rowPerson.rowFour = this.dataList[3].Persons
+					rowPerson.rowFive = this.dataList[4].Persons
+					rowPerson.rowSix = this.dataList[5].Persons
+					rowMoney.rowZero = '欠费金额(万元)'
+					rowMoney.rowOne = this.dataList[0].Amount.toFixed(1)
+					rowMoney.rowTwo = this.dataList[1].Amount.toFixed(1)
+					rowMoney.rowThree = this.dataList[2].Amount.toFixed(1)
+					rowMoney.rowFour = this.dataList[3].Amount.toFixed(1)
+					rowMoney.rowFive = this.dataList[4].Amount.toFixed(1)
+					rowMoney.rowSix = this.dataList[5].Amount.toFixed(1)
+				}
+				this.dataListTable[0] = rowPerson
+				this.dataListTable[1] = rowMoney
+				this.$set(this.dataListTable,this.dataListTable[0],rowPerson)
+				this.$set(this.dataListTable,this.dataListTable[1],rowMoney)
+        this.loading = false
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      if (!this.queryParams.startDate) {
+        this.$message({
+          message: '请选择欠费统计日期',
+          type: 'error'
+        })
+        return
+      }
+      this.getList()
+    },
+  }
+}
+</script>