提交页面

src/pages/index/components/city_arrears.vue

@@ -2,20 +2,20 @@
   <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>
+<!--    <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">

src/pages/index/components/city_contrast.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/city_pay.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_price_analysis.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="body-wrapper">
+    <div class="search-card">
+      <h5>客单价分析</h5>
+    </div>
+    <br>
+    <div class="charts_all">
+      <div class="charts">
+        <piechart
+          class="model-pie-body"
+          :roseType="false"
+          id="chart1"
+          :radiusArr="['0%', '70%']"
+          :colorArr="modelPieColor"
+          :labelFormat="['{name|{b}}', '{sub|{@value}起 {d}%}', '{hr|}']"
+          :dataset="modelData"
+          :encode="{ itemName: 'name', value: 'value' }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import piechart from "@/components/pieChart";
+import api from "@/api/article_z";
+
+export default {
+  components: {
+    piechart
+  },
+  data() {
+    return {
+      modelPieColor: ["#4382f6","#9078f8","#C1FFC1","#1E90FF"],
+      modelData: [],
+      tableData: [],
+      total: 0,
+      pageSize: 10,
+      pageNum: 1,
+      radio: '2',
+      dialogVisible: false,
+      formLabelAlign: {
+        mid: '',
+        searchWords:''
+      },
+      selRow: undefined,
+      searchWords: undefined,
+      title: ''
+    }
+  },
+  mounted() {
+    this.getModelDataData()
+  },
+  watch: {
+  },
+  methods: {
+    getModelDataData(){
+      api.queryCustomerComplaint_Ksfx().then(res=>{
+        this.modelData = res.data;
+      })
+    },
+  }
+}
+</script>
+<style  lang="scss" scoped>
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/deep/ .el-select {
+  height: 40px;
+  .el-input__inner {
+    height: 40px;
+  }
+  .el-input__prefix, .el-input__suffix {
+    height: 40px;
+  }
+
+  /* 下面设置右侧按钮居中 */
+  .el-input__suffix {
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+  }
+  /* 输入框加上上下边是 32px + 2px =34px */
+  .el-input__icon {
+    line-height: 0px;
+  }
+}
+/deep/ .form-wrapper .el-button {
+  background: linear-gradient(90deg,#0158d9,#3c97e4);
+  width: 100px;
+  height: 40px;
+}
+.body-wrapper {
+  padding: 20px;
+  background: #0c0c0c;
+  width: 100%;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+  .search-card{
+    font-size: 24px;
+    font-weight: bold;
+    color: #3498db;
+    margin-bottom: 20px;
+    .input-wrapper{
+      width: 36%;
+    }
+  }
+}
+
+.charts_all{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 400px;
+}
+
+.charts{
+  width: 30%;
+  height: 300px;
+}
+.btn_save{
+  background-color: #3498db;
+  color: #ffffff;
+  padding: 10px 20px;
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  height: 40px;
+}
+
+.sel{
+  height: 200px;
+  margin-right: 10px;
+}
+
+.input-search{
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 20px;
+  box-sizing: border-box;
+  background-color: #2a2a2a;
+  border: 1px solid #333;
+  color: #ffffff;
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+  .form-div{
+    /deep/ .el-input__inner{
+      height: 35px;
+      width: 100%;
+      border: 1px solid #a6a5a5;
+      color: #fff;
+      background: #2d3744;
+    }
+    /deep/ .el-input__icon {
+      line-height: 35px;
+    }
+  }
+}
+</style>

src/pages/index/components/device_report.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="body-wrapper">
+    <h2 style="color: #3498db;">设备运行统计</h2>
+    <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 {
+      linedata: []
+    }
+  },
+  mounted() {
+    this.businessAnalysisStat()
+  },
+  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>`;
+    },
+    businessAnalysisStat(){
+      api.businessAnalysisStat().then(res =>{
+        this.linedata = res.data
+      })
+    },
+  }
+}
+</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/parking.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="middle-map">
+    <div class="top">
+      <div class="title">停车热度时空分布</div>
+    </div>
+    <div class="bottom" id="map"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import * as geoJson from '../../../util/411100.json'
+
+export default {
+  data() {
+    return {
+      dqIndex: -1,
+      timer: null,
+      option: {
+        visualMap: {
+          show: true,
+          type: "continuous",
+          left: "0%",
+          bottom: "0%",
+          calculable: true,
+          textStyle: {
+            color: "white",
+          },
+          text: ["(辆)"],
+          min: 0,
+          max: 100,
+          inRange: {
+            color: ["#4FC9FB","#36ADFC","#1788D1","#0E6BAE","#1871A2","#0D4D7D"],
+          },
+        },
+        geo: {
+          map: "luohe",
+          // aspectScale: 1,
+          roam: false,
+          itemStyle: {
+            normal: {
+              borderColor: "#2ab8ff",
+              borderWidth: 2.5,
+              areaColor: "#12235c",
+            },
+            emphasis: {
+              areaColor: "#2AB8FF",
+              shadowColor: "rgba(42,184,255, 0.7)",
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+              shadowBlur: 5,
+            },
+          },
+        },
+        tooltip: {
+          confine: true,
+          formatter: this.mapTooltip,
+          position: "inside",
+          backgroundColor: "transparent",
+        },
+        series: [
+          {
+            type: "map",
+            // roam: true,
+            label: {
+              normal: {
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "#76bef5",
+                borderWidth: 1.5,
+                areaColor: "#4282de",
+              },
+              emphasis: {
+                areaColor: "#002aff",
+                borderWidth: 0,
+                color: "green",
+              },
+            },
+            roam: false,
+            map: "luohe", //使用
+            data: [],
+          },
+        ],
+      },
+      curData: {},
+      dataSource: null,
+      totalAll: '0',
+    };
+  },
+  methods: {
+    setIntervalMap(chart) {
+      this.timer = setInterval(() => {
+        chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: this.dqIndex + 1,
+        });
+        this.dqIndex++;
+        if (this.dqIndex > 4) {
+          this.dqIndex = -1;
+        }
+      }, 3000);
+    },
+    mapTooltip(data) {
+      return `<div class="map-tooltip">
+        <div class="map-tooltip-name">${data.name}:<span class="map-tooltip-value">${data.value}%</span></div>
+      </div>`;
+    },
+  },
+  mounted() {
+    let arr = []
+    let dataSoure = {
+      '411102': {quyuName: '源汇区', zb: 40},
+      '411103': {quyuName: '郾城区', zb: 60},
+      '411104': {quyuName: '召陵区', zb: 40},
+      '411121': {quyuName: '舞阳县', zb: 50},
+      '411122': {quyuName: '临颍县', zb: 30}}
+    for (const key in dataSoure) {
+      if (key !== '411100') {
+        arr.push({
+          name: dataSoure[key].quyuName,
+          value: Number(dataSoure[key].zb),
+        });
+      }
+    }
+    let mapMax = Math.max(...arr.map(item => item.value))
+    let mapMin = Math.min(...arr.map(item => item.value))
+    let chart = echarts.init(document.getElementById("map"));
+    echarts.registerMap("luohe", geoJson);
+    this.option.series[0].data = arr;
+    this.option.visualMap.min = mapMin;
+    this.option.visualMap.max = mapMax;
+    chart.setOption(this.option);
+    this.dqIndex = -1;
+    this.setIntervalMap(chart);
+    //鼠标移入静止播放
+    chart.on("mouseover", (e) => {
+      clearInterval(this.timer);
+      chart.dispatchAction({
+        type: "showTip",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+    });
+    chart.on("mouseout", (e) => {
+      clearInterval(this.timer);
+      //鼠标移出后先把上次的高亮取消
+      chart.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: e.dataIndex,
+      });
+      this.setIntervalMap(chart);
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.middle-map {
+  width: 100%;
+  height: 100%;
+  .top {
+    height: 10%;
+    // padding: 50px 50px 0 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
+    .total-detail {
+      display: flex;
+      margin-top: 10px;
+      align-items: center;
+      justify-content: center;
+      .total-value {
+        font-size: 41px;
+      }
+      .total-unit {
+        margin-left: 20px;
+        font-size: 20px;
+      }
+    }
+    .title {
+      font-weight: 650;
+      font-style: normal;
+      color: #ffffff;
+      font-size: 18px;
+    }
+    .dq {
+      font-weight: 650;
+      color: #ffcc00;
+      font-size: 24px;
+      text-align: center;
+    }
+    .num-container {
+      height: 180px;
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding: 0 20px;
+      .num-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        // width: 28%;
+        .label-box {
+          display: flex;
+          align-items: center;
+          // justify-content: space-between;
+          .label {
+            font-weight: 650;
+            color: #ffcc00;
+            font-size: 28px;
+          }
+          .rate {
+            margin-left: 30px;
+            font-weight: 650;
+            color: #ffcc00;
+            font-size: 18px;
+          }
+        }
+        .num-box {
+          display: flex;
+          justify-content: space-between;
+          justify-content: left;
+          font-family: "Arial-BoldMT", "Arial Bold", "Arial";
+          font-weight: 700;
+          .money {
+            color: #fff;
+            font-size: 22px;
+            .num {
+              color: #ffcc00;
+            }
+          }
+          .rate {
+            color: #008000;
+            font-size: 32px;
+          }
+        }
+      }
+    }
+  }
+  .bottom {
+    height: 90%;
+    width: 100%;
+  }
+  /deep/.map-tooltip {
+    font-size: 18px;
+    padding: 10px 20px;
+    background: url("../../../../static/img/u231.png");
+    background-size: 100% 100%;
+    .map-tooltip-name {
+      color: #00e4ff;
+    }
+    .map-tooltip-value {
+      color: white;
+      margin-left: 20px;
+    }
+  }
+}
+</style>

src/pages/index/components/urban_statisics.vue

@@ -0,0 +1,130 @@
+<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: 400px">
+        <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>
+    <el-table :data="tableData" style="background: #2a2a2a;border-color: #333;">
+      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+import linechart from "@/components/lineChart";
+import api from "@/api/article_liao";
+
+export default {
+  components: {
+    linechart
+  },
+  data() {
+    return {
+      formInline: {
+        comType: ''
+      },
+      columns: [
+        {
+          label: '地区',
+          key: 'area'
+        },
+        {
+          label: '实缴率',
+          key: 'rate'
+        }
+      ],
+      linedata: [],
+    }
+  },
+  mounted() {
+    this.businessAnalysisStat()
+  },
+  watch: {
+
+  },
+  methods: {
+    indexMethod(index) {
+      return this.pageSize * (this.pageNum - 1) + index + 1
+    },
+    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.linedata = 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/layouts/indexLayout.vue

@@ -104,6 +104,12 @@ export default {
         {name: '欠费总分析 ', url: '/arrears_total'},
         {name: '欠费历史分析 ', url: '/arrears_trend'},
         {name: '城市欠费分析 ', url: '/city_arrears'},
+        {name: '欠费追缴分析 ', url: '/city_pay'},
+        {name: '城市收入统计 ', url: '/city_contrast'},
+        {name: '城市统计分析 ', url: '/urban_statisics'},
+        {name: '客单价分析 ', url: '/customer_price_analysis'},
+        {name: '设备运行统计 ', url: '/device_report'},
+        {name: '停车分析 ', url: '/parking'},
       ]
     }
   },

src/router/index.js

@@ -358,6 +358,36 @@ export default new Router({
           path: "/city_arrears",
           component: () => import("../pages/index/components/city_arrears.vue")
         },
+        {
+          name: "city_pay",
+          path: "/city_pay",
+          component: () => import("../pages/index/components/city_pay.vue")
+        },
+        {
+          name: "city_contrast",
+          path: "/city_contrast",
+          component: () => import("../pages/index/components/city_contrast.vue")
+        },
+        {
+          name: "urban_statisics",
+          path: "/urban_statisics",
+          component: () => import("../pages/index/components/urban_statisics.vue")
+        },
+        {
+          name: "customer_price_analysis",
+          path: "/customer_price_analysis",
+          component: () => import("../pages/index/components/customer_price_analysis.vue")
+        },
+        {
+          name: "device_report",
+          path: "/device_report",
+          component: () => import("../pages/index/components/device_report.vue")
+        },
+        {
+          name: "parking",
+          path: "/parking",
+          component: () => import("../pages/index/components/parking.vue")
+        },
       ]
     }
   ]