新增视频监控导出按钮

fuliqi

2024-09-19 e2a72a5e883d79d46d65062897c367b782cf8ba4

新增视频监控导出按钮

 src/views/system/check/result/index.vue

@@ -62,7 +62,9 @@
          <el-button slot="reference" type="primary" size="mini" plain>导出</el-button>
        </el-popover>
      </div>

    </div>

    <div class="data-chart-container">
      <el-card class="data-card" :body-style="{ height: '100%' }">
        <div class="card-content">

 src/views/system/monitor/video/index.vue

@@ -85,10 +85,63 @@
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>

          </el-form-item>
        </el-form>
        <!-- 导出按钮 -->
        <div v-hasPermi="['system:monitor:export']">
          <el-popover
            placement="left"
            width="300px"
            trigger="click">
            <span style="font-weight: bold;font-size: 16px">导出</span>
            <el-form ref="exportForm" :model="exportForm" :rules="exportRules" label-width="100px">
              <el-form-item label="考核时间" prop="month" required>
                <el-date-picker
                  v-model="exportForm.month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="区县" prop="deptIds" required>
                <el-select v-model="exportForm.deptIds" multiple clearable>
                  <el-option
                    v-for="dept in deptList"
                    :key="dept.deptId"
                    :label="dept.area"
                    :value="dept.deptId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="数据类型" prop="dataType" required>
                <el-radio-group v-model="exportForm.dataType">
                  <div style="display: flex;margin-bottom: 10px;">
                    <div style="width: 48%">
                      <el-radio :label="0">总量数据</el-radio>
                    </div>
                    <div style="width: 48%">
                      <el-radio :label="1">每日在线情况</el-radio>
                    </div>
                  </div>
                  <div style="display: flex;">
                    <div style="width: 48%">
                      <el-radio :label="2">每日录像情况</el-radio>
                    </div>
                    <div style="width: 48%">
                      <el-radio :label="3">每日录像缺失时长</el-radio>
                    </div>
                  </div>
                </el-radio-group>
              </el-form-item>
              <el-button type="primary" size="small" style="width: 400px" @click="handleExport">导出</el-button>
            </el-form>
            <el-button slot="reference" type="primary" size="mini" plain>导出</el-button>
          </el-popover>
        </div>
      </el-col>
      <el-col span="4">
      <el-col :span="4">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
      </el-col>
    </el-row>
@@ -129,7 +182,7 @@
      </el-table-column>
      <el-table-column label="录像缺失时长" align="center" prop="videoLoseTime" width="180" v-if="columns[9].visible">
        <template slot-scope="scope">
          <div>{{ (scope.row.videoLoseTime * 60).toFixed(2) + '分钟'}}</div>
          <div>{{ (scope.row.videoLoseTime * 60).toFixed(2) + '分钟' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="OSD标注" align="center" prop="OSD" width="180" v-if="columns[10].visible">
@@ -302,6 +355,22 @@
      },
      // 表单参数
      form: {},
      exportForm: {
        deptIds: [],
        month: '',
        dataType: null
      },
      exportRules: {
        month: [
          {required: true, message: "时间不能为空", trigger: "blur"}
        ],
        deptIds: [
          {required: true, message: "部门不能为空", trigger: "blur"}
        ],
        dataType: [
          {required: true, message: "数据类型不能为空", trigger: "blur"}
        ]
      },
      // 表单校验
      rules: {
        serialNumber: [
@@ -440,14 +509,33 @@
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/monitor/export', {
        ...this.queryParams
      }, `monitor_${new Date().getTime()}.xlsx`)
      this.$refs["exportForm"].validate(valid => {
        if (valid) {
          if (this.exportForm.dataType === 0) {
            this.download('system/monitor/export/video/total', {
              ...this.exportForm,
            }, `总量情况_${new Date().getTime()}.xlsx`)
          } else if (this.exportForm.dataType === 1) {
            this.download('system/monitor/export/video/online', {
              ...this.exportForm,
            }, `点位在线_${new Date().getTime()}.xlsx`)
          } else if (this.exportForm.dataType === 2) {
            this.download('system/monitor/export/video/record', {
              ...this.exportForm,
            }, `录像情况_${new Date().getTime()}.xlsx`)
          } else if (this.exportForm.dataType === 3) {
            this.download('system/monitor/export/video/loseTime', {
              ...this.exportForm,
            }, `录像缺失时长_${new Date().getTime()}.xlsx`)
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>

.tab {
  padding: 5px 15px;
}