添加查询条件

src/pages/index/components/berths_information.vue

@@ -14,8 +14,24 @@
       <el-form-item label="具体道路">
         <el-input  v-model="formInline.streetName" placeholder="请输入"></el-input>
       </el-form-item>
+      <el-form-item label="停车场">
+        <el-select clearable v-model="formInline.parkId" placeholder="请选择" popper-class="cur-select">
+          <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="查询日期">
+        <el-date-picker
+          clearable
+          v-model="formInline.time"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          value-format="yyyy-MM-dd"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="primary" @click="queryAll">查询</el-button>
       </el-form-item>
     </el-form>
     <br>
@@ -80,6 +96,7 @@ export default {
     return {
       districtOptions: options.districtOptions,
       keyAreaOptions: options.keyAreaOptions,
+      carOptions: [],
       columns: [
         {
           label: '日期',
@@ -111,35 +128,52 @@ export default {
       formInline: {
         regionCode: '',
         keyAreas: '',
-        streetName: ''
+        streetName: '',
+        parkId: '',
+        time: [],
       }
     }
   },
   mounted() {
-    this.dashBerthsInformationStat1()
-    this.dashBerthsInformationStat2()
-    this.dashBerthsInformationStat3()
+    this.getParkDic()
+    this.queryAll()
   },
   watch: {
   },
   methods: {
-    onSubmit() {
-      this.dashBerthsInformationStat1()
-      this.dashBerthsInformationStat2()
-      this.dashBerthsInformationStat3()
+    getParkDic() {
+      api.parkDic().then(res => {
+        this.carOptions = res.data || [];
+      })
+    },
+    queryAll() {
+      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.begin= this.formInline.time[0]
+        params.end = this.formInline.time[1]
+      }
+      delete params.time
+      this.dashBerthsInformationStat1(params)
+      this.dashBerthsInformationStat2(params)
+      this.dashBerthsInformationStat3(params)
     },
-    dashBerthsInformationStat1(){
-      api.dashBerthsInformationStat1({...this.formInline}).then(res =>{
+    dashBerthsInformationStat1(params){
+      api.dashBerthsInformationStat1(params).then(res =>{
         this.modelData = res.data
       })
     },
-    dashBerthsInformationStat2(){
-      api.dashBerthsInformationStat2({...this.formInline}).then(res =>{
+    dashBerthsInformationStat2(params){
+      api.dashBerthsInformationStat2(params).then(res =>{
         this.modelData2 = res.data
       })
     },
-    dashBerthsInformationStat3(){
-      api.dashBerthsInformationStat3({...this.formInline}).then(res =>{
+    dashBerthsInformationStat3(params){
+      api.dashBerthsInformationStat3(params).then(res =>{
         this.modelData3 = res.data
       })
     },

src/pages/index/components/berths_revenue.vue

@@ -17,6 +17,22 @@
       <el-form-item clearable label="具体道路">
         <el-input v-model="formInline.streetName" placeholder="请输入"></el-input>
       </el-form-item>
+      <el-form-item label="停车场">
+        <el-select clearable v-model="formInline.parkId" placeholder="请选择" popper-class="cur-select">
+          <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="查询日期">
+        <el-date-picker
+          clearable
+          v-model="formInline.time"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          value-format="yyyy-MM-dd"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
       </el-form-item>
@@ -147,6 +163,7 @@ export default {
     return {
       districtOptions: options.districtOptions,
       keyAreaOptions: options.keyAreaOptions,
+      carOptions: [],
       linedata: [],
       linedata2: [],
       linedata3: [],
@@ -162,26 +179,41 @@ export default {
       formInline: {
         regionCode: '',
         keyAreas: '',
-        streetName: ''
+        streetName: '',
+        parkId: '',
+        time: [],
       }
     }
   },
   mounted() {
-    this.dashBerthsRevenueStat1()
-    this.dashBerthsRevenueStat2()
-    this.dashBerthsRevenueStat3()
-    this.dashBerthsRevenueStat4()
-    this.dashBerthsRevenueStat5()
+    this.getParkDic()
+    this.queryAll()
   },
   watch: {
   },
   methods: {
-    onSubmit() {
-      this.dashBerthsRevenueStat1()
-      this.dashBerthsRevenueStat2()
-      this.dashBerthsRevenueStat3()
-      this.dashBerthsRevenueStat4()
-      this.dashBerthsRevenueStat5()
+    getParkDic() {
+      api.parkDic().then(res => {
+        this.carOptions = res.data || [];
+      })
+    },
+    queryAll() {
+      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.begin= this.formInline.time[0]
+        params.end = this.formInline.time[1]
+      }
+      delete params.time
+      this.dashBerthsRevenueStat1(params)
+      this.dashBerthsRevenueStat2(params)
+      this.dashBerthsRevenueStat3(params)
+      this.dashBerthsRevenueStat4(params)
+      this.dashBerthsRevenueStat5(params)
     },
     lineTooltipFormat(params) {
       return `<div class="line-tooltip">
@@ -189,28 +221,28 @@ export default {
         params[0].data.lastAmount  || "--"
       }元</div>`;
     },
-    dashBerthsRevenueStat1(){
-      api.dashBerthsRevenueStat1({...this.formInline}).then(res =>{
+    dashBerthsRevenueStat1(params){
+      api.dashBerthsRevenueStat1(params).then(res =>{
         this.linedata = res.data
       })
     },
-    dashBerthsRevenueStat2(){
-      api.dashBerthsRevenueStat2({...this.formInline}).then(res =>{
+    dashBerthsRevenueStat2(params){
+      api.dashBerthsRevenueStat2(params).then(res =>{
         this.linedata2 = res.data
       })
     },
-    dashBerthsRevenueStat3(){
-      api.dashBerthsRevenueStat3({...this.formInline}).then(res =>{
+    dashBerthsRevenueStat3(params){
+      api.dashBerthsRevenueStat3(params).then(res =>{
         this.linedata3 = res.data
       })
     },
-    dashBerthsRevenueStat4(){
-      api.dashBerthsRevenueStat4({...this.formInline}).then(res =>{
+    dashBerthsRevenueStat4(params){
+      api.dashBerthsRevenueStat4(params).then(res =>{
         this.linedata4 = res.data
       })
     },
-    dashBerthsRevenueStat5(){
-      api.dashBerthsRevenueStat5({...this.formInline}).then(res =>{
+    dashBerthsRevenueStat5(params){
+      api.dashBerthsRevenueStat5(params).then(res =>{
         this.linedata5 = res.data
       })
     },

src/pages/index/components/berths_usage.vue

@@ -14,8 +14,24 @@
       <el-form-item label="具体道路">
         <el-input v-model="formInline.streetName" placeholder="请输入"></el-input>
       </el-form-item>
+      <el-form-item label="停车场">
+        <el-select clearable v-model="formInline.parkId" placeholder="请选择" popper-class="cur-select">
+          <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="查询日期">
+        <el-date-picker
+          clearable
+          v-model="formInline.time"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          value-format="yyyy-MM-dd"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="primary" @click="queryAll">查询</el-button>
       </el-form-item>
     </el-form>
     <br>
@@ -149,6 +165,7 @@ export default {
     return {
       districtOptions: options.districtOptions,
       keyAreaOptions: options.keyAreaOptions,
+      carOptions: [],
       linedata: [],
       linedata2: [],
       linedata3: [],
@@ -164,49 +181,64 @@ export default {
       formInline: {
         regionCode: '',
         keyAreas: '',
-        streetName: ''
+        streetName: '',
+        parkId: '',
+        time: [],
       }
     }
   },
   mounted() {
-    this.dashBerthsUsageStat1()
-    this.dashBerthsUsageStat2()
-    this.dashBerthsUsageStat3()
-    this.dashBerthsUsageStat4()
-    this.dashBerthsUsageStat5()
+    this.getParkDic()
+    this.queryAll()
   },
   watch: {
   },
   methods: {
-    onSubmit() {
-      this.dashBerthsUsageStat1()
-      this.dashBerthsUsageStat2()
-      this.dashBerthsUsageStat3()
-      this.dashBerthsUsageStat4()
-      this.dashBerthsUsageStat5()
+    getParkDic() {
+      api.parkDic().then(res => {
+        this.carOptions = res.data || [];
+      })
+    },
+    queryAll() {
+      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.begin= this.formInline.time[0]
+        params.end = this.formInline.time[1]
+      }
+      delete params.time
+      this.dashBerthsUsageStat1(params)
+      this.dashBerthsUsageStat2(params)
+      this.dashBerthsUsageStat3(params)
+      this.dashBerthsUsageStat4(params)
+      this.dashBerthsUsageStat5(params)
     },
-    dashBerthsUsageStat1(){
-      api.dashBerthsUsageStat1({...this.formInline}).then(res =>{
+    dashBerthsUsageStat1(params){
+      api.dashBerthsUsageStat1(params).then(res =>{
         this.linedata = res.data
       })
     },
-    dashBerthsUsageStat2(){
-      api.dashBerthsUsageStat2({...this.formInline}).then(res =>{
+    dashBerthsUsageStat2(params){
+      api.dashBerthsUsageStat2(params).then(res =>{
         this.linedata2 = res.data
       })
     },
-    dashBerthsUsageStat3(){
-      api.dashBerthsUsageStat3({...this.formInline}).then(res =>{
+    dashBerthsUsageStat3(params){
+      api.dashBerthsUsageStat3(params).then(res =>{
         this.linedata3 = res.data
       })
     },
-    dashBerthsUsageStat4(){
-      api.dashBerthsUsageStat4({...this.formInline}).then(res =>{
+    dashBerthsUsageStat4(params){
+      api.dashBerthsUsageStat4(params).then(res =>{
         this.linedata4 = res.data
       })
     },
-    dashBerthsUsageStat5(){
-      api.dashBerthsUsageStat5({...this.formInline}).then(res =>{
+    dashBerthsUsageStat5(params){
+      api.dashBerthsUsageStat5(params).then(res =>{
         this.linedata5 = res.data
       })
     },

src/pages/index/components/parking_operate.vue

@@ -1,5 +1,35 @@
 <template>
   <div class="body-wrapper">
+    <el-form class="form-wrapper" :inline="true" :model="formInline1">
+      <el-form-item label="行政区">
+        <el-select clearable  v-model="formInline1.regionCode" placeholder="请选择" popper-class="cur-select">
+          <el-option v-for="item in districtOptions"  :key="item.label" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="街道">
+        <el-input  v-model="formInline1.streetName" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="停车场">
+        <el-select clearable v-model="formInline1.parkId" placeholder="请选择" popper-class="cur-select">
+          <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="查询日期">
+        <el-date-picker
+          clearable
+          v-model="formInline1.time"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          value-format="yyyy-MM-dd"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="queryAll">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <br>
     <div style="display: flex; justify-content: space-between;">
       <div style="width: 50%; height: 300px">
         <div align="center" style="color: white">停车饱和度</div>
@@ -117,6 +147,7 @@ import linechart from "@/components/lineChart";
 import barchart from "@/components/barChart";
 import vtable from "@/components/vtableNew";
 import api from "@/api/article_z";
+import options from '@/util/options'
 
 
 export default {
@@ -128,6 +159,14 @@ export default {
   },
   data() {
     return {
+      districtOptions: options.districtOptions,
+      carOptions: [],
+      formInline1: {
+        parkId: '',
+        time: [],
+        regionCode: '',
+        streetName: ''
+      },
       modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800"],
       modelData: {
         list: []
@@ -140,45 +179,65 @@ export default {
     }
   },
   mounted() {
-    this.getBardataData()
-    this.getLinedata1Data()
-    this.getLinedataData()
-    this.getModelDataData()
-    this.getLinedata2Data()
-    this.getLinedata3Data()
+    this.getParkDic()
+    this.queryAll()
   },
   watch: {
 
   },
   methods: {
+    getParkDic() {
+      api.parkDic().then(res => {
+        this.carOptions = res.data || [];
+      })
+    },
+    queryAll() {
+      let params = {...this.formInline1}
+      if (
+        this.formInline1.time && this.formInline1.time.length === 2 &&
+        this.formInline1.time[1] !== ""
+      ) {
+        this.formInline1.time[0] = this.formInline1.time[0].substring(0, 10) + " 00:00:00";
+        this.formInline1.time[1] = this.formInline1.time[1].substring(0, 10) + " 23:59:59";
+        params.begin= this.formInline1.time[0]
+        params.end = this.formInline1.time[1]
+      }
+      delete params.time
+      this.getBardataData(params)
+      this.getLinedata1Data(params)
+      this.getLinedataData(params)
+      this.getModelDataData(params)
+      this.getLinedata2Data(params)
+      this.getLinedata3Data(params)
+    },
     //初始化
-    getBardataData(){
-      api.queryParkingOperate_Tcbhd().then(res=>{
+    getBardataData(params){
+      api.queryParkingOperate_Tcbhd(params).then(res=>{
         this.bardata=res.data;
       })
     },
-    getLinedata1Data(){
-      api.queryParkingOperate_Tczzlfx().then(res=>{
+    getLinedata1Data(params){
+      api.queryParkingOperate_Tczzlfx(params).then(res=>{
         this.linedata1=res.data;
       })
     },
-    getLinedataData(){
-      api.queryParkingOperate_Tccysfx().then(res=>{
+    getLinedataData(params){
+      api.queryParkingOperate_Tccysfx(params).then(res=>{
         this.linedata=res.data;
       })
     },
-    getModelDataData(){
-      api.queryParkingOperate_Tscljczb().then(res=>{
+    getModelDataData(params){
+      api.queryParkingOperate_Tscljczb(params).then(res=>{
         this.modelData.list=res.data;
       })
     },
-    getLinedata2Data(){
-      api.queryParkingOperate_Cljccqs().then(res=>{
+    getLinedata2Data(params){
+      api.queryParkingOperate_Cljccqs(params).then(res=>{
         this.linedata2=res.data;
       })
     },
-    getLinedata3Data(){
-      api.queryParkingOperate_Tccysdbfx().then(res=>{
+    getLinedata3Data(params){
+      api.queryParkingOperate_Tccysdbfx(params).then(res=>{
         this.linedata3=res.data;
       })
     },
@@ -240,16 +299,139 @@ export default {
 }
 </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 {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
+  padding: 20px;
   background: #0c0c0c;
+  .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%;
+    }
+  }
+}
+.audit-dialog{
+  .mg-bt{
+    margin-bottom: 24px;
+  }
+  .label{
+    text-align: right;
+  }
 }
 
-.model-pie-body {
+.charts_all {
+  display: flex;
+  justify-content: space-around;
   width: 100%;
-  height: 99%;
+  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;
+    }
+  }
 }
 
 

src/pages/index/components/vehicle_violations.vue

@@ -1,5 +1,35 @@
 <template>
   <div class="body-wrapper">
+    <el-form class="form-wrapper" :inline="true" :model="formInline1">
+      <el-form-item label="行政区">
+        <el-select clearable  v-model="formInline1.regionCode" placeholder="请选择" popper-class="cur-select">
+          <el-option v-for="item in districtOptions"  :key="item.label" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="街道">
+        <el-input  v-model="formInline1.streetName" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="停车场">
+        <el-select clearable v-model="formInline1.parkId" placeholder="请选择" popper-class="cur-select">
+          <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="查询日期">
+        <el-date-picker
+          clearable
+          v-model="formInline1.time"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          value-format="yyyy-MM-dd"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="queryAll">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <br>
     <div style="display: flex; justify-content: space-between;">
       <div style="width: 50%; height: 300px">
         <div align="center" style="color: white">非法车辆类型占比</div>
@@ -57,6 +87,7 @@ import linechart from "@/components/lineChart";
 import barchart from "@/components/barChart";
 import vtable from "@/components/vtableNew";
 import api from "@/api/article_liao";
+import options from '@/util/options'
 
 
 export default {
@@ -68,6 +99,14 @@ export default {
   },
   data() {
     return {
+      districtOptions: options.districtOptions,
+      carOptions: [],
+      formInline1: {
+        parkId: '',
+        time: [],
+        regionCode: '',
+        streetName: ''
+      },
       modelPieColor: ["#4382f6", "#9078f8", "#79a7db", "#FF9800"],
       modelData: {
         list: []
@@ -80,14 +119,34 @@ export default {
     }
   },
   mounted() {
-    this.dashVehicleViolationsStat1()
-    this.dashVehicleViolationsStat2()
-    this.dashVehicleViolationsStat3()
+    this.getParkDic()
+    this.queryAll()
   },
   watch: {
 
   },
   methods: {
+    getParkDic() {
+      api.parkDic().then(res => {
+        this.carOptions = res.data || [];
+      })
+    },
+    queryAll() {
+      let params = {...this.formInline1}
+      if (
+        this.formInline1.time && this.formInline1.time.length === 2 &&
+        this.formInline1.time[1] !== ""
+      ) {
+        this.formInline1.time[0] = this.formInline1.time[0].substring(0, 10) + " 00:00:00";
+        this.formInline1.time[1] = this.formInline1.time[1].substring(0, 10) + " 23:59:59";
+        params.begin= this.formInline1.time[0]
+        params.end = this.formInline1.time[1]
+      }
+      delete params.time
+      this.dashVehicleViolationsStat1(params)
+      this.dashVehicleViolationsStat2(params)
+      this.dashVehicleViolationsStat3(params)
+    },
     xLabelFormat(name) {
       const nameArr = []
       for(let i=0; i<name.length; i+=7) {
@@ -104,18 +163,18 @@ export default {
         params[0].data.hs || "--"}个</div>
 </div>`;
     },
-    dashVehicleViolationsStat1(){
-      api.dashVehicleViolationsStat1().then(res =>{
+    dashVehicleViolationsStat1(params){
+      api.dashVehicleViolationsStat1(params).then(res =>{
         this.modelData.list = res.data
       })
     },
-    dashVehicleViolationsStat2(){
-      api.dashVehicleViolationsStat2().then(res =>{
+    dashVehicleViolationsStat2(params){
+      api.dashVehicleViolationsStat2(params).then(res =>{
         this.modelData1.list = res.data
       })
     },
-    dashVehicleViolationsStat3(){
-      api.dashVehicleViolationsStat3().then(res =>{
+    dashVehicleViolationsStat3(params){
+      api.dashVehicleViolationsStat3(params).then(res =>{
         this.bardata = res.data
       })
     },