视频审核统计导出

ruoyi-ui/src/views/videoReview/index.vue

@@ -28,7 +28,7 @@
           <!-- 根据事件源统计条件 -->
           <div v-if="filterType === 'source'">
             <el-form-item label="方向">
-              <el-select  style="margin-left: 27px;" v-model="queryParams.direction" placeholder="请选择">
+              <el-select v-model="queryParams.direction" placeholder="请选择" style="margin-left: 27px;">
                 <el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value"/>
               </el-select>
             </el-form-item>
@@ -64,7 +64,7 @@
               </el-select>
             </el-form-item>
             <el-form-item label="方 向">
-              <el-select style="margin-left: 23px;" v-model="queryParams.direction" placeholder="请选择">
+              <el-select v-model="queryParams.direction" placeholder="请选择" style="margin-left: 23px;">
                 <el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value"/>
               </el-select>
             </el-form-item>
@@ -109,7 +109,7 @@
               />
             </el-form-item>
             <el-form-item label="方 向">
-              <el-select style="margin-left: 25px;" v-model="queryParams.direction" placeholder="请选择">
+              <el-select v-model="queryParams.direction" placeholder="请选择" style="margin-left: 25px;">
                 <el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value"/>
               </el-select>
             </el-form-item>
@@ -140,23 +140,23 @@
 
             <el-form-item label="日期">
             </el-form-item>
-            <el-select style="margin-left: 14px;" v-model="queryParams.type" class="selectRoad" placeholder="请选择">
+            <el-select v-model="queryParams.type" class="selectRoad" placeholder="请选择" style="margin-left: 14px;">
 
-              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"/>
             </el-select>
             <!-- 日期选择 -->
             <el-date-picker
-              size="mini"
-              class="selectRoad"
               v-model="queryParams.dateTime"
-              style="width: 140px "
               :picker-options="pickerOptions"
               :type="datePickerType"
+              class="selectRoad"
               placeholder="请选择"
+              size="mini"
+              style="width: 140px "
               @change="handleDateChange"
             />
             <el-form-item label="方 向">
-              <el-select style="margin-left: 22px;" v-model="queryParams.direction" placeholder="请选择">
+              <el-select v-model="queryParams.direction" placeholder="请选择" style="margin-left: 22px;">
                 <el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value"/>
               </el-select>
             </el-form-item>
@@ -199,7 +199,18 @@
         <div ref="horizontalBarChart" style="width: 100%; height: 300px;"></div>
       </div>
     </div>
-    <div class="table">
+    <el-col style="margin-left: 1%">
+      <el-button
+        icon="el-icon-download"
+
+        size="mini"
+        type="warning"
+        @click="handleExport"
+      >导出
+      </el-button>
+    </el-col>
+    <div class="table-container">
+
       <el-table :data="eventData">
         <el-table-column align="center" label="事件桩号" prop="stakeMark"/>
         <el-table-column align="center" label="事件源">
@@ -261,11 +272,11 @@
         </div>
         <div class="detail-item">
           <span class="label">行驶方向:</span>
-          <span class="value">{{getEventDirection (currentEvent.direction )}}</span>
+          <span class="value">{{ getEventDirection(currentEvent.direction) }}</span>
         </div>
         <div class="detail-item">
           <span class="label">事件类型:</span>
-          <span class="value">{{getEventTypeDescription(currentEvent.warningSubclass)}}</span>
+          <span class="value">{{ getEventTypeDescription(currentEvent.warningSubclass) }}</span>
         </div>
         <div class="detail-item">
           <span class="label">高速名称:</span>
@@ -452,6 +463,27 @@ export default {
     }
   },
   methods: {
+    /** 导出按钮操作 */
+    handleExport() {
+      if (this.filterType === 'time') {
+        this.download('/business/warning/videoReviewListExport', {
+          ...this.queryParams,
+          startDate: this.queryParams.dateTime ? this.queryParams.dateTime : moment().startOf('month').format("YYYY-MM"),
+          type: this.queryParams.type ? this.queryParams.type : '1',
+        }, `视频审核事件.xlsx`)
+
+      } else {
+        this.download('/business/warning/videoReviewEventSourceListExport', {
+          ...this.queryParams,
+          startDate: this.queryParams.typeDateRange ? this.queryParams.typeDateRange[0] : null,
+          endDate: this.queryParams.typeDateRange ? this.queryParams.typeDateRange[1] : null,
+          startStakeMark: this.formatStakeMark(this.queryParams.stakeMarkArry),
+          endStakeMark: this.formatStakeMark(this.queryParams.endMark)
+        }, `视频审核事件.xlsx`)
+      }
+
+
+    },
     handleDateChange(value) {
       if (!value) return;
 
@@ -471,7 +503,7 @@ export default {
 
       this.$set(this.queryParams, 'dateTime', formattedDate);
     },
-    getEventDirection(state){
+    getEventDirection(state) {
       const stateMap = {
         1: '菏泽方向',
         3: '济南方向',
@@ -989,14 +1021,24 @@ export default {
 .value {
   flex: 1;
 }
+
 .el-dialog__header {
   cursor: move;
 }
+
 .selectRoad {
   width: 90px;
 }
+
 ::v-deep .el-input--mini .el-input__inner {
   height: 35px;
   line-height: 28px;
 }
+
+.table-container {
+  position: relative;
+  overflow-y: auto;
+  height: 480px; /* 调整高度以适应其他UI元素如按钮等 */
+  margin-bottom: 1em; /* 根据需要调整底部间距 */
+}
 </style>