备份

备份

src/pages/index/components/arrears_total.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="body-wrapper">
+    <h2 style="color: #3498db;">欠费总分析</h2>
+    <br>
+    <div style="width: 100%; height: 300px;display: flex; justify-content: space-between;">
+
+
+      <div style="width: 33%;height: 300px">
+      <h4 style="color: white">欠费金额占比</h4>
+        <piechart
+          class="model-pie-body"
+          id="chart11"
+          :roseType="false"
+          :radiusArr="['30%', '70%']"
+          :colorArr="modelPieColor1"
+          :labelFormat="['{name|{b}}', '{sub|{@value}元 {d}%}', '{hr|}']"
+          :dataset="modelData.list1"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+      <div style="width: 33%;height: 300px">
+        <h4 style="color: white">欠费条数占比</h4>
+        <piechart
+          class="model-pie-body"
+          id="chart12"
+          :roseType="false"
+          :radiusArr="['30%', '70%']"
+          :colorArr="modelPieColor1"
+          :labelFormat="['{name|{b}}', '{sub|{@value}元 {d}%}', '{hr|}']"
+          :dataset="modelData.list1"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+      <div style="width: 33%;height: 300px">
+        <h4 style="color: white">欠费车场排行</h4>
+        <barchart
+          class="side-chart"
+          :autoStop="false"
+          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
+          legendIcon="react"
+          :bottom="30"
+          :xlabelFormat="xLabelFormat"
+          :top="60"
+          yAxisName="(个)"
+          :tooltip="tooltipFormat"
+          :dataset="bardata"
+          :encode="[
+            {x: 'month', y: 'hs', seriesName: '接入数量'},
+            {x: 'month', y: 'cs', seriesName: '异常数量'}]"
+          :labelSize="15"
+          id="fxdqhszzt"
+        />
+      </div>
+    </div>
+    <div style="display: flex; justify-content: space-between; margin-top: 7%">
+      <div style="width: 50%; height: 300px">
+        <h4 style="color: white">欠费车牌排行榜</h4>
+        <barchart
+          class="side-chart"
+          :autoStop="false"
+          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
+          legendIcon="react"
+          :bottom="30"
+          :xlabelFormat="xLabelFormat"
+          :top="60"
+          yAxisName="(个)"
+          :tooltip="tooltipFormat"
+          :dataset="bardata"
+          :encode="[
+            {x: 'month', y: 'hs', seriesName: '接入数量'},
+            {x: 'month', y: 'cs', seriesName: '异常数量'}]"
+          :labelSize="15"
+          id="fxdqhszz2"
+        />
+      </div>
+      <div style="width: 50%; height: 300px">
+        <h4 style="color: white">催缴情况分析</h4>
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(元)"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'mouth', y: 'lastAmount', seriesName: '',bool:'true' },
+            ]"
+          id="axstj"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import piechart from "@/components/pieChart";
+import linechart from "@/components/lineChart";
+import barchart from "@/components/barChart";
+import api from "@/api/article_liao";
+
+export default {
+  components: {
+    piechart,
+    barchart,
+    linechart
+  },
+  data() {
+    return {
+      modelPieColor: ["#4382f6","#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
+      modelPieColor1: ["#4382f6","#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
+      modelData: {
+        list: [],
+        list1: []
+      },
+      bardata: [],
+      linedata: []
+    }
+  },
+  mounted() {
+    this.businessAnalysisStat()
+    this.businessAnalysisStat2()
+    this.businessAnalysisStat3()
+  },
+  watch: {
+
+  },
+  methods: {
+    tooltipFormat(params) {
+      const type = params[0].seriesType;
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+<div>${params[0].seriesName}: ${
+        params[0].data.hs || "--"}元</div>
+<div>${params[1].seriesName}: ${
+        params[0].data.cs || "--"}元</div>
+</div>`;
+    },
+    lineTooltipFormat(params) {
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].data.mouth} : ${
+        params[0].data.lastAmount  || "--"
+      }元</div>`;
+    },
+    businessAnalysisStat(){
+      api.businessAnalysisStat().then(res =>{
+        this.bardata = res.data
+      })
+    },
+    businessAnalysisStat2(){
+      api.businessAnalysisStat2().then(res =>{
+        this.modelData.list = res.data
+      })
+    },
+    businessAnalysisStat3(){
+      api.businessAnalysisStat3().then(res =>{
+        this.modelData.list1 = res.data
+      })
+    },
+    xLabelFormat(name) {
+      const nameArr = []
+      for(let i=0; i<name.length; i+=7) {
+        nameArr.push(name.substring(i, i+7))
+      }
+      return nameArr.join('\n');
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+
+}
+.model-pie-body {
+  width: 100%;
+  height: 99%;
+}
+</style>

src/pages/index/components/arrears_trend.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="body-wrapper">
+    <h2 style="color: #3498db;">欠费历史分析</h2>
+    <br>
+
+      <div style="width: 100%; height: 600px">
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(元)"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'mouth', y: 'lastAmount', seriesName: '',bool:'true' },
+            ]"
+          id="axstj"
+        />
+      </div>
+  </div>
+</template>
+<script>
+import piechart from "@/components/pieChart";
+import linechart from "@/components/lineChart";
+import barchart from "@/components/barChart";
+import api from "@/api/article_liao";
+
+export default {
+  components: {
+    piechart,
+    barchart,
+    linechart
+  },
+  data() {
+    return {
+      modelPieColor: ["#4382f6","#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
+      modelPieColor1: ["#4382f6","#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
+      modelData: {
+        list: [],
+        list1: []
+      },
+      bardata: [],
+      linedata: []
+    }
+  },
+  mounted() {
+    this.businessAnalysisStat()
+    this.businessAnalysisStat2()
+    this.businessAnalysisStat3()
+  },
+  watch: {
+
+  },
+  methods: {
+    tooltipFormat(params) {
+      const type = params[0].seriesType;
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+<div>${params[0].seriesName}: ${
+        params[0].data.hs || "--"}元</div>
+<div>${params[1].seriesName}: ${
+        params[0].data.cs || "--"}元</div>
+</div>`;
+    },
+    lineTooltipFormat(params) {
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].data.mouth} : ${
+        params[0].data.lastAmount  || "--"
+      }元</div>`;
+    },
+    businessAnalysisStat(){
+      api.businessAnalysisStat().then(res =>{
+        this.bardata = res.data
+      })
+    },
+    businessAnalysisStat2(){
+      api.businessAnalysisStat2().then(res =>{
+        this.modelData.list = res.data
+      })
+    },
+    businessAnalysisStat3(){
+      api.businessAnalysisStat3().then(res =>{
+        this.modelData.list1 = res.data
+      })
+    },
+    xLabelFormat(name) {
+      const nameArr = []
+      for(let i=0; i<name.length; i+=7) {
+        nameArr.push(name.substring(i, i+7))
+      }
+      return nameArr.join('\n');
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+
+}
+.model-pie-body {
+  width: 100%;
+  height: 99%;
+}
+</style>

src/pages/index/components/city_arrears.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="body-wrapper">
+    <h2 style="color: #3498db;">欠费历史分析</h2>
+    <br>
+    <el-form class="form-wrapper" :inline="true" :model="formInline">
+      <el-form-item label="">
+        <el-select clearable v-model="formInline.comType" placeholder="全部" popper-class="cur-select">
+          <el-option label="全部" value=""></el-option>
+          <el-option label="经营服务类停车问题" value="经营服务类停车问题"></el-option>
+          <el-option label="非法经营停车问题" value="非法经营停车问题"></el-option>
+          <el-option label="不提供税票" value="不提供税票"></el-option>
+          <el-option label="设备问题" value="设备问题"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <br>
+    <br>
+      <div style="width: 100%; height: 600px">
+        <linechart
+          :autoStop="false"
+          :top="30"
+          :bottom="30"
+          :left="40"
+          :legendTop="0"
+          yAxisName="(元)"
+          :dataset="linedata"
+          :tooltipFormat="lineTooltipFormat"
+          :encode="[
+              { x: 'mouth', y: 'lastAmount', seriesName: '',bool:'true' },
+            ]"
+          id="axstj"
+        />
+      </div>
+  </div>
+</template>
+<script>
+import piechart from "@/components/pieChart";
+import linechart from "@/components/lineChart";
+import barchart from "@/components/barChart";
+import api from "@/api/article_liao";
+
+export default {
+  components: {
+    piechart,
+    barchart,
+    linechart
+  },
+  data() {
+    return {
+      formInline: {
+        comType: ''
+      },
+      modelPieColor: ["#4382f6","#9078f8", "#79a7db", "#FF9800", "#9C27B0"],
+      modelPieColor1: ["#4382f6","#9078f8", "#6aa1e1", "#FF9800", "#9C27B0"],
+      modelData: {
+        list: [],
+        list1: []
+      },
+      bardata: [],
+      linedata: []
+    }
+  },
+  mounted() {
+    this.businessAnalysisStat()
+    this.businessAnalysisStat2()
+    this.businessAnalysisStat3()
+  },
+  watch: {
+
+  },
+  methods: {
+    tooltipFormat(params) {
+      const type = params[0].seriesType;
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+<div>${params[0].seriesName}: ${
+        params[0].data.hs || "--"}元</div>
+<div>${params[1].seriesName}: ${
+        params[0].data.cs || "--"}元</div>
+</div>`;
+    },
+    lineTooltipFormat(params) {
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].data.mouth} : ${
+        params[0].data.lastAmount  || "--"
+      }元</div>`;
+    },
+    onSubmit() {
+      this.pageNum = 1
+      this.getTableData()
+    },
+    businessAnalysisStat(){
+      api.businessAnalysisStat().then(res =>{
+        this.bardata = res.data
+      })
+    },
+    businessAnalysisStat2(){
+      api.businessAnalysisStat2().then(res =>{
+        this.modelData.list = res.data
+      })
+    },
+    businessAnalysisStat3(){
+      api.businessAnalysisStat3().then(res =>{
+        this.modelData.list1 = res.data
+      })
+    },
+    xLabelFormat(name) {
+      const nameArr = []
+      for(let i=0; i<name.length; i+=7) {
+        nameArr.push(name.substring(i, i+7))
+      }
+      return nameArr.join('\n');
+    }
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+
+}
+.model-pie-body {
+  width: 100%;
+  height: 99%;
+}
+/deep/ .el-select {
+  height: 40px;
+
+  .el-input__inner {
+    height: 40px;
+  }
+}
+
+</style>

src/pages/index/components/customer_complaint.vue

@@ -16,7 +16,6 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
-        <el-button type="primary" @click="handleAdd">客诉登记</el-button>
       </el-form-item>
     </el-form>
     <br>
@@ -56,10 +55,11 @@
       <el-form  class="form-div"  style="height: 120px"   ref="formLabelAlign" label-position="left" label-width="120px" :model="formLabelAlign" >
         <el-form-item label="投诉类型" required>
           <el-select clearable v-model="formLabelAlign.comType" placeholder="请选择">
-            <el-option label="经营服务类停车问题" value="经营服务类停车问题"></el-option>
-            <el-option label="非法经营停车问题" value="非法经营停车问题"></el-option>
-            <el-option label="不提供税票" value="不提供税票"></el-option>
-            <el-option label="设备问题" value="设备问题"></el-option>
+            <el-option label="源汇区" value="源汇区"></el-option>
+            <el-option label="郾城区" value="郾城区"></el-option>
+            <el-option label="召陵区" value="召陵区"></el-option>
+            <el-option label="舞阳县" value="舞阳县"></el-option>
+            <el-option label="临颍县" value="临颍县"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="投诉停车场" required>

src/pages/index/components/temp_parking-statistics.vue

@@ -53,15 +53,9 @@ export default {
   data() {
     return {
       linedata: [],
-      linedata2: [],
       formInline1: {
         plateNo: ''
       },
-      tableData: [{"publicTitle":'预警提示',"publicTime":'2023-12-29 10:00:00',"publicPerson":'李玉'},
-        {"publicTitle":'停车时限',"publicTime":'2023-12-31 11:00:00',"publicPerson":'张玮'},
-        {"publicTitle":'设备故障',"publicTime":'2023-12-30 10:00:00',"publicPerson":'李玉'},],
-      tableData2:[{"noticeTitle":'预警提示',"createTime":'2023-12-29 10:00:00',"noticeTitle2":'李玉'}],
-      tableData3:[],
       modelData:[],
       modelPieColor: ["#4382f6","#9078f8"],
       total: 3,
@@ -104,28 +98,6 @@ export default {
       this.formLabelAlign.publicPerson = ''
       this.dialogVisible = true
     },
-    handleConfirm(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          if (this.title === '发布公告') {
-            api.announcementSave(this.formLabelAlign).then(res => {
-              if(res.code === 200) {
-                this.dialogVisible = false
-                this.$message({
-                  message: '发布成功!',
-                  type: 'success'
-                })
-                this.getTableData()
-              }
-            })
-          } else {
-            this.dialogVisible = false;
-          }
-        } else {
-          return false
-        }
-      })
-    },
     getTableData() {
       const {pageNum, pageSize, searchWords} = this
       api.announcementListByPage({current: pageNum, size: pageSize}).then(res => {

src/pages/index/layouts/indexLayout.vue

@@ -101,6 +101,9 @@ export default {
         {name: '停车场泊位分析 ', url: '/parking_lot'},
         {name: '夜间停车统计 ', url: '/night_parking_statistics'},
         {name: '车辆类型 ', url: '/vehicle_type'},
+        {name: '欠费总分析 ', url: '/arrears_total'},
+        {name: '欠费历史分析 ', url: '/arrears_trend'},
+        {name: '城市欠费分析 ', url: '/city_arrears'},
       ]
     }
   },

src/router/index.js

@@ -343,6 +343,21 @@ export default new Router({
           path: "/vehicle_type",
           component: () => import("../pages/index/components/vehicle_type.vue")
         },
+        {
+          name: "arrears_total",
+          path: "/arrears_total",
+          component: () => import("../pages/index/components/arrears_total.vue")
+        },
+        {
+          name: "arrears_trend",
+          path: "/arrears_trend",
+          component: () => import("../pages/index/components/arrears_trend.vue")
+        },
+        {
+          name: "city_arrears",
+          path: "/city_arrears",
+          component: () => import("../pages/index/components/city_arrears.vue")
+        },
       ]
     }
   ]