统计

src/api/statics/index.js

@@ -15,3 +15,11 @@ export function lineChart(params) {
     params
   })
 }
+
+export function departmentStatistics(params) {
+  return request({
+    method: "get",
+    url: "/api/admin/other/department",
+    params
+  })
+}

src/views/statics/DepartmentStatistics.vue

@@ -15,16 +15,24 @@
 
         </LxHeader>
       </div>
+
+      <div style="padding: 0 20px;">
+        <barLineChart id="department-statistics" width="100%" height="300px"></barLineChart>
+        <barLineChart1 id="department-statistics1" width="100%" height="300px" style="margin-top: 20px;"></barLineChart1>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import LxHeader from '@/components/LxHeader/index.vue'
-
+import barLineChart from '@/views/statics/component/barLineChart.vue'
+import barLineChart1 from '@/views/statics/component/barLineChart1.vue'
 export default {
   components: {
-    LxHeader
+    LxHeader,
+    barLineChart,
+    barLineChart1
   },
   data() {
     return {

src/views/statics/component/barLineChart.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-card>
+    <div :id="id" :class="className" :style="{height:height,width:width}" />
+  </el-card>
+</template>
+
+<script>
+import { departmentStatistics } from "@/api/statics"
+import * as echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    year: Date,
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      data: [],
+    }
+  },
+  mounted() {
+    this.getData().then(_ => this.initChart())
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    async getData () {
+      const res = await departmentStatistics();
+      console.log(res)
+      this.data = res.departments;
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.setOption()
+    },
+    setOption () {
+      this.chart.setOption({
+        title: {
+          top: 20,
+          text: '资产统计',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#333'
+          },
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['土地', '土地登记面积','土地实际面积', '房产', '房产登记面积','房产实际面积']
+        },
+        toolbox: {
+          show: true,
+          orient: 'vertical',
+          left: 'right',
+          top: 'center',
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar', 'stack'] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            data: this.data.map(i => i.name)
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '土地',
+            type: 'bar',
+            barGap: 0,
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.land_count)
+          },
+          {
+            name: '土地登记面积',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.land_dengjimianji.toFixed(2))
+          },
+          {
+            name: '土地实际面积',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.land_shijimianji.toFixed(2))
+          },
+          {
+            name: '房产',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.house_count)
+          },
+          {
+            name: '房产登记面积',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.house_dengjimianji.toFixed(2))
+          },
+          {
+            name: '房产实际面积',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.house_shijimianji.toFixed(2))
+          },
+        ]
+      })
+    }
+  },
+  watch: {
+  }
+}
+</script>

src/views/statics/component/barLineChart1.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-card>
+    <div :id="id" :class="className" :style="{height:height,width:width}" />
+  </el-card>
+</template>
+
+<script>
+import { departmentStatistics } from "@/api/statics"
+import * as echarts from 'echarts'
+import resize from '@/components/Charts/mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    year: Date,
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      data: [],
+    }
+  },
+  mounted() {
+    this.getData().then(_ => this.initChart())
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    async getData () {
+      const res = await departmentStatistics();
+      console.log(res)
+      this.data = res.departments;
+    },
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.setOption()
+    },
+    setOption () {
+      this.chart.setOption({
+        title: {
+          top: 20,
+          text: '租赁经营统计',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#333'
+          },
+          left: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['租赁台账', '出租土地','出租土地面积', '出租房产', '出租房产面积']
+        },
+        toolbox: {
+          show: true,
+          orient: 'vertical',
+          left: 'right',
+          top: 'center',
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar', 'stack'] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            data: this.data.map(i => i.name)
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '租赁台账',
+            type: 'bar',
+            barGap: 0,
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.lease_count)
+          },
+          {
+            name: '出租土地',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.leases_land_count)
+          },
+          {
+            name: '出租土地面积',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.leases_land_dengjimianji.toFixed(2))
+          },
+          {
+            name: '出租房产',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.leases_house_count)
+          },
+          {
+            name: '出租房产面积',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.leases_house_dengjimianji.toFixed(2))
+          },
+          {
+            name: '房产实际面积',
+            type: 'bar',
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.data.map(i => i.house_shijimianji.toFixed(2))
+          },
+        ]
+      })
+    }
+  },
+  watch: {
+  }
+}
+</script>