no message

src/pages/index/components/business_overview.vue

@@ -59,11 +59,12 @@
           :bottom="30"
           :left="40"
           :legendTop="0"
-          yAxisName="(%)"
+          yAxisName="(小时)"
           :dataset="linedata"
           :tooltipFormat="lineTooltipFormat1"
           :encode="[
-              { x: 'month', y: 'lastAmount', seriesName: '停车总时长（时）',bool:'true' },
+              { x: 'mouth', y: 'lastYearAmount', seriesName: '路内',bool:'true' },
+              { x: 'mouth', y: 'thisYearAmount', seriesName: '路外',bool:'true' },
             ]"
           id="sxcyfzqk1"
         />
@@ -76,11 +77,12 @@
           :bottom="30"
           :left="40"
           :legendTop="0"
-          yAxisName="(%)"
+          yAxisName="(次)"
           :dataset="linedata2"
-          :tooltipFormat="lineTooltipFormat1"
+          :tooltipFormat="lineTooltipFormat2"
           :encode="[
-              { x: 'month', y: 'lastAmount', seriesName: '当日平均周转次数',bool:'true' },
+              { x: 'mouth', y: 'lastYearAmount', seriesName: '路内',bool:'true' },
+              { x: 'mouth', y: 'thisYearAmount', seriesName: '路外',bool:'true' },
             ]"
           id="bwzzqs"
         />
@@ -95,9 +97,10 @@
           :legendTop="0"
           yAxisName="(%)"
           :dataset="linedata3"
-          :tooltipFormat="lineTooltipFormat1"
+          :tooltipFormat="lineTooltipFormat3"
           :encode="[
-              { x: 'month', y: 'lastAmount', seriesName: '当日平均利用率（%）',bool:'true' },
+              { x: 'mouth', y: 'lastYearAmount', seriesName: '路内',bool:'true' },
+              { x: 'mouth', y: 'thisYearAmount', seriesName: '路外',bool:'true' },
             ]"
           id="bwlylqs"
         />
@@ -107,18 +110,19 @@
     <br>
     <div style="width: 100%;display: flex;justify-content: space-between;">
       <div style="width: 33%;height: 400px;">
-        <div align="center" style="color: white">实缴趋势</div>
+        <div align="center" style="color: white">实缴金额</div>
         <linechart
           :autoStop="false"
           :top="30"
           :bottom="30"
           :left="40"
           :legendTop="0"
-          yAxisName="(%)"
+          yAxisName="(元)"
           :dataset="linedata4"
-          :tooltipFormat="lineTooltipFormat1"
+          :tooltipFormat="lineTooltipFormat4"
           :encode="[
-              { x: 'month', y: 'lastAmount', seriesName: '实缴率(%)',bool:'true' },
+              { x: 'mouth', y: 'lastYearAmount', seriesName: '路内',bool:'true' },
+              { x: 'mouth', y: 'thisYearAmount', seriesName: '路外',bool:'true' },
             ]"
           id="sjqs"
         />
@@ -133,9 +137,10 @@
           :legendTop="0"
           yAxisName="(%)"
           :dataset="linedata5"
-          :tooltipFormat="lineTooltipFormat1"
+          :tooltipFormat="lineTooltipFormat5"
           :encode="[
-              { x: 'month', y: 'lastAmount', seriesName: '实时占用率',bool:'true' },
+              { x: 'mouth', y: 'lastYearAmount', seriesName: '路内',bool:'true' },
+              { x: 'mouth', y: 'thisYearAmount', seriesName: '路外',bool:'true' },
             ]"
           id="bwsszyl"
         />
@@ -214,18 +219,7 @@ export default {
       modelData3: [],
       tableData: [],
       tableData2: [],
-      linedata:[{
-        "mouth": "星期一",
-        "lastAmount": 14
-      },
-        {
-          "mouth": "星期二",
-          "lastAmount": 46
-        },
-        {
-          "mouth": "星期三",
-          "lastAmount": 59
-        },],
+      linedata:[],
       linedata2:[],
       linedata3:[],
       linedata4:[],
@@ -301,27 +295,27 @@ export default {
       })
     },
     dashBusinessOverviewStat3(){
-      api_l.dashBusinessOverviewStat3().then(res => {
+      api_l.dashBusinessOverviewStat3({begin: '', end: ''}).then(res => {
         this.linedata=res.data;
       })
     },
     dashBusinessOverviewStat4(){
-      api_l.dashBusinessOverviewStat4().then(res => {
+      api_l.dashBusinessOverviewStat4({begin: '', end: ''}).then(res => {
         this.linedata2=res.data;
       })
     },
     dashBusinessOverviewStat5(){
-      api_l.dashBusinessOverviewStat5().then(res => {
+      api_l.dashBusinessOverviewStat5({begin: '', end: ''}).then(res => {
         this.linedata3=res.data;
       })
     },
     dashBusinessOverviewStat6(){
-      api_l.dashBusinessOverviewStat6().then(res => {
+      api_l.dashBusinessOverviewStat6({begin: '', end: ''}).then(res => {
         this.linedata4=res.data;
       })
     },
     dashBusinessOverviewStat7(){
-      api_l.dashBusinessOverviewStat7().then(res => {
+      api_l.dashBusinessOverviewStat7({begin: '', end: ''}).then(res => {
         this.linedata5=res.data;
       })
     },
@@ -329,8 +323,47 @@ export default {
       const data = params[0].data;
       return `<div class="line-tooltip">
         <div style="color: ${params[0].color}">${params[0].seriesName}: ${
-        params[0].data.lastAmount || "--"
-      }(%)</div>`;
+        params[0].data.lastYearAmount || 0
+      }小时</div><div style="color: ${params[1].color}">${params[1].seriesName}: ${
+        params[0].data.thisYearAmount || 0
+      }小时</div></div>`;
+    },
+    lineTooltipFormat2(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || 0
+      }次</div><div style="color: ${params[1].color}">${params[1].seriesName}: ${
+        params[0].data.thisYearAmount || 0
+      }次</div></div>`;
+    },
+    lineTooltipFormat3(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || 0
+      }%</div><div style="color: ${params[1].color}">${params[1].seriesName}: ${
+        params[0].data.thisYearAmount || 0
+      }%</div></div>`;
+    },
+    lineTooltipFormat4(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || 0
+      }元</div><div style="color: ${params[1].color}">${params[1].seriesName}: ${
+        params[0].data.thisYearAmount || 0
+      }元</div></div>`;
+    },
+
+    lineTooltipFormat5(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastYearAmount || 0
+      }%</div><div style="color: ${params[1].color}">${params[1].seriesName}: ${
+        params[0].data.thisYearAmount || 0
+      }%</div></div>`;
     },
     tooltipFormat(params) {
       const type = params[0].seriesType;

src/pages/index/components/charge_business_analysis.vue

@@ -1,7 +1,27 @@
 <template>
   <div class="body-wrapper">
+    <el-form class="form-wrapper" :inline="true" :model="formInline" style="margin-bottom: 20px;">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="查询日期:">
+            <el-date-picker
+              v-model="formInline.time"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              value-format="yyyy-MM-dd"
+              end-placeholder="结束日期">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item>
+            <el-button type="primary" class="query-btn" @click="onSubmit">查询</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
     <div style="width: 99%; height: 300px">
-      <h2 style="color: #3498db;">收费业务分析</h2>
       <h4 style="color: white">收费数据分析</h4>
       <barchart
         class="side-chart"
@@ -69,7 +89,10 @@ export default {
         list: [],
         list1: []
       },
-      bardata: []
+      bardata: [],
+      formInline: {
+        time: ''
+      }
     }
   },
   mounted() {
@@ -81,6 +104,11 @@ export default {
 
   },
   methods: {
+    onSubmit() {
+      this.businessAnalysisStat()
+      this.businessAnalysisStat2()
+      this.businessAnalysisStat3()
+    },
     tooltipFormat(params) {
       const type = params[0].seriesType;
       const data = params[0].data;
@@ -92,17 +120,50 @@ export default {
 </div>`;
     },
     businessAnalysisStat(){
-      api.businessAnalysisStat().then(res =>{
+      let params = this.formInline
+      if (
+        this.formInline.time && this.formInline.time.length === 2 &&
+        this.formInline.time[1] !== ""
+      ) {
+        this.formInline.time[0] = this.formInline.time[0].substring(0, 10) + " 00:00:00";
+        this.formInline.time[1] = this.formInline.time[1].substring(0, 10) + " 23:59:59";
+        params.start= this.formInline.time[0]
+        params.end = this.formInline.time[1]
+      }
+      delete params.time
+      api.businessAnalysisStat(params).then(res =>{
         this.bardata = res.data
       })
     },
     businessAnalysisStat2(){
-      api.businessAnalysisStat2().then(res =>{
+      let params = this.formInline
+      if (
+        this.formInline.time && this.formInline.time.length === 2 &&
+        this.formInline.time[1] !== ""
+      ) {
+        this.formInline.time[0] = this.formInline.time[0].substring(0, 10) + " 00:00:00";
+        this.formInline.time[1] = this.formInline.time[1].substring(0, 10) + " 23:59:59";
+        params.start= this.formInline.time[0]
+        params.end = this.formInline.time[1]
+      }
+      delete params.time
+      api.businessAnalysisStat2(params).then(res =>{
         this.modelData.list = res.data
       })
     },
     businessAnalysisStat3(){
-      api.businessAnalysisStat3().then(res =>{
+      let params = this.formInline
+      if (
+        this.formInline.time && this.formInline.time.length === 2 &&
+        this.formInline.time[1] !== ""
+      ) {
+        this.formInline.time[0] = this.formInline.time[0].substring(0, 10) + " 00:00:00";
+        this.formInline.time[1] = this.formInline.time[1].substring(0, 10) + " 23:59:59";
+        params.start= this.formInline.time[0]
+        params.end = this.formInline.time[1]
+      }
+      delete params.time
+      api.businessAnalysisStat3(params).then(res =>{
         this.modelData.list1 = res.data
       })
     },
@@ -128,4 +189,78 @@ export default {
   width: 100%;
   height: 99%;
 }
+
+
+.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;
+  .button-block{
+    text-align: right;
+    margin-bottom: 20px;
+  }
+  .table-pagination{
+    text-align: right;
+  }
+  .search-card{
+    margin-bottom: 20px;
+    text-align: center;
+    .input-wrapper{
+      width: 36%;
+    }
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
+  .form-div{
+    /deep/ .el-input__inner{
+      height: 35px;
+      width: 90%;
+      border: 1px solid #a6a5a5;
+      color: #fff;
+      background: #2d3744;
+    }
+  }
+}
 </style>