修改数据上报

马宇豪

2024-12-19 9cbd3ec7007bac8b7ae5d49d2e521889fda28822

修改数据上报

 src/api/dataUpload/educateTrain/index.ts

@@ -43,6 +43,27 @@
                method: 'post',
                data: data
            });
        },
        getTrainPlanList: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/report/assemble/train/plan/list`,
                method: 'post',
                data: data
            });
        },
        addTrainPlan: (data: Array<any>) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/report/assemble/train/plan`,
                method: 'post',
                data: data
            });
        },
        delTrainPlan: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/report/assemble/train/plan/del`,
                method: 'post',
                data: data
            });
        }
    };
}

 src/api/dataUpload/saftyBaseInfo/judgeReport.ts

@@ -148,6 +148,48 @@
                method: 'post',
                data: data
            });
        },
        getCapacityList: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/report/assemble/craft/capacity/manage/list`,
                method: 'post',
                data: data
            });
        },
        addCapacity: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/report/assemble/craft/capacity/manage`,
                method: 'post',
                data: data
            });
        },
        delCapacity: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/report/assemble/craft/capacity/manage/del`,
                method: 'post',
                data: data
            });
        },
        getSafeFileList: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/report/assemble/safe/manage/file/list`,
                method: 'post',
                data: data
            });
        },
        addSafeFile: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/report/assemble/safe/manage/file`,
                method: 'post',
                data: data
            });
        },
        delSafeFile: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/report/assemble/safe/manage/file/del`,
                method: 'post',
                data: data
            });
        }
    };
}

 src/views/dataUpload/educateTrain/trainPlan/components/addReport.vue

对比新文件
@@ -0,0 +1,281 @@
<template>
  <div class="system-add-user-container">
    <el-dialog :title="title" v-model="isShowDialog" width="50%">
      <el-form :model="form" size="default" ref="formRef" :rules="rules" label-width="160px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="培训计划名称" prop="planName">
              <el-input v-model.trim="form.planName" placeholder="培训计划名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="培训形式" prop="planMode">
              <el-radio-group v-model="form.planMode">
                <el-radio :label="1">线上</el-radio>
                <el-radio :label="2">线下</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="线下培训印证照片">
              <el-upload accept="image/*" multiple list-type="picture-card" :action="uploadUrl" :headers="header"
                         method="post" :on-exceed="showTip" :on-preview="handlePictureCardPreview"
                         :on-success="handleAvatarSuccess" :limit='2' v-model:file-list="fileList"
                         :before-upload="picSize" :on-remove="handleRemove" :before-remove="beforeRemove">
                <el-icon>
                  <Plus/>
                </el-icon>
                <template #tip>
                  <div class="el-upload__tip">上传图片尺寸小于5M,最多可上传5张</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="培训时间" prop="planBeginTime">
              <el-date-picker
                  v-model="timeRange"
                  @change="changeRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="title == '新增上报'? false : true">
            <el-form-item label="删除状态" prop="deleted">
              <el-radio-group v-model="form.deleted">
                <el-radio :label="0">未删除</el-radio>
                <el-radio :label="1">已删除</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-dialog v-model="imgDialog">
        <img width="100%" :src="imageUrl" alt="Preview Image"/>
      </el-dialog>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="isShowDialog = !isShowDialog" size="default">取 消</el-button>
            <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {reactive, toRefs, onMounted, defineComponent, ref} from 'vue';
import {ElMessageBox, ElMessage} from 'element-plus';
import axios from "axios";
import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
import Cookies from "js-cookie";
import {judgeReportApi} from "/@/api/dataUpload/saftyBaseInfo/judgeReport";
import {educateTrainApi} from "/@/api/dataUpload/educateTrain";

// 定义接口来定义对象的类型
interface DataState {
  title: string
  isShowDialog: boolean
  form: {
    uuid: string
    planName: string
    planMode: number | null
    offlineFile: string
    planBeginTime: string
    planEndTime: string
    deleted: number | null
  }
  timeRange: [],
  rules: {},
  fileList: [],
  uploadUrl: string,
  header: {},
  imgDialog: boolean,
  imageUrl: string
}

export default defineComponent({
  name: 'reportDialog',
  setup(props, context) {
    const formRef = ref()
    const state = reactive<DataState>({
      title: '',
      isShowDialog: false,
      form: {
        uuid: '',
        planName: '',
        planMode: null,
        offlineFile: '',
        planBeginTime: '',
        planEndTime: '',
        deleted: 0,
      },
      rules: {
        planName: [{required: true, message: '请填写培训计划名称', trigger: 'blur'}],
        planMode: [{required: true, message: '请选择培训形式', trigger: 'blur'}],
        planBeginTime: [{required: true, message: '请选择培训开始结束时间', trigger: 'blur'}]
      },
      timeRange: [],
      fileList: [],
      uploadUrl: import.meta.env.VITE_API_URL + '/account/file/upload',
      header: {
        uid: Cookies.get('uid'),
        Authorization: Cookies.get('token')
      },
      imgDialog: false,
      imageUrl: ''
    })

    // 页面加载时
    onMounted(() => {

    })
    // 打开弹窗
    const open = (type: string, data: object) => {
      state.isShowDialog = true;
      if (type === 'add') {
        state.title = '新增上报'
        state.form = {
          uuid: '',
          planName: '',
          planMode: null,
          offlineFile: '',
          planBeginTime: '',
          planEndTime: '',
          deleted: 0,
        }
        state.fileList = []
      } else {
        state.title = '重新上报'
        Object.keys(state.form).forEach(key => {
          if (Object.prototype.hasOwnProperty.call(data, key)) {
            state.form[key] = JSON.parse(JSON.stringify(data))[key];
          }
        })
        state.timeRange = [state.form.planBeginTime,state.form.planEndTime]
        if (data.offlineFile !== '') {
          state.fileList = data.offlineFile.split(',').map((i, index) => {
            return {
              url: i,
              name: i
            }
          })
        } else {
          state.fileList = []
        }

        // state.form = {
        //   uuid: data.uuid,
        //   planName: '',
        //   craftContent: '',
        //   mainProdEquip: '',
        //   keyParts: '',
        //   hazardCode: '',
        //   msds: '',
        //   hazardCharacter: '',
        //   parameterIndex: '',
        //   controlMean: '',
        //   offlineFile: '',
        //   reactionType: '',
        //   keyMonitorUnit: ''
        // }
      }
    };

    const changeRange=(value)=>{
      if(!value){
        state.form.planBeginTime = ""
        state.form.planEndTime = ""
      }else {
        state.form.planBeginTime = state.timeRange[0]
        state.form.planEndTime = state.timeRange[1]
      }
    }

    // 新增修改
    const onSubmit = async () => {
      formRef.value.validate(async (valid: Boolean) => {
        if (valid) {
          state.form.offlineFile = state.fileList.map(i => i.name).join(',')
          const res = await educateTrainApi().addTrainPlan([state.form])
          if (res.data.code == '200') {
            ElMessage({
              type: 'success',
              message: '数据上报成功'
            })
            state.isShowDialog = false
            state.fileList = []
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            })
          }
          context.emit('refresh')
        } else {
          ElMessage({
            type: 'warning',
            message: '请完善基本信息'
          })
        }
      })
    }

    // 图片上传
    const showTip = () => {
      ElMessage({
        type: 'warning',
        message: '超出文件上传数量'
      });
    }

    const picSize = async (rawFile: any) => {
      if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage({
          type: 'warning',
          message: '文件大小不能超过5M'
        });
        return false
      }
    }

    const handleAvatarSuccess = (res: any, uploadFile: any) => {
      if (res) {
        uploadFile.name = res
      } else {
        ElMessage({
          type: 'warning',
          message: '文件上传失败'
        })
      }
    }

    const handlePictureCardPreview = (uploadFile) => {
      state.imageUrl = uploadFile.url
      state.imgDialog = true;
    }

    const handleRemove = (file, uploadFiles, type) => {
      state.fileList = uploadFiles
    }


    return {
      formRef,
      showTip,
      picSize,
      changeRange,
      handleAvatarSuccess,
      handlePictureCardPreview,
      handleRemove,
      open,
      onSubmit,
      ...toRefs(state)
    };
  }
});
</script>

 src/views/dataUpload/educateTrain/trainPlan/index.vue

对比新文件
@@ -0,0 +1,271 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
          <div class="homeCard">
            <div class="main-card">
            <el-row class="cardTop">
              <el-col :span="12" class="mainCardBtn">
                <el-button type="primary" icon="Plus" size="default" @click="openDialog('add',{})">新增</el-button>
              </el-col>
            </el-row>
            <el-table :data="reportData" style="width: 100%" height="calc(100% - 48px)" :header-cell-style="{ background: '#fafafa' }">
              <el-table-column prop="id" label="id" show-overflow-tooltip></el-table-column>
              <el-table-column prop="planName" label="培训计划名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="planMode" label="培训形式" show-overflow-tooltip>
                <template #default="scope">
                  {{ scope.row.planMode == 1? '线上':scope.row.planMode == 2? '线下':'--' }}
                </template>
              </el-table-column>
              <el-table-column prop="offlineFile" label="印证照片" show-overflow-tooltip>
                <template #default="scope">
                  <div v-if="scope.row.offlineFile && scope.row.offlineFile !== ''">
                    <el-image
                        v-for="(item,index) in scope.row.offlineFile.split(',')"
                        style="width: 50px; height: 50px"
                        :src="item"
                        fit="cover"
                        :preview-teleported= true
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="planBeginTime" label="培训开始时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="planEndTime" label="培训结束时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="updateDate" label="修改时间" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" width="140">
                  <template #default="scope">
                    <el-button size="small" text type="primary" @click="openDialog('update',scope.row)">重新上报</el-button>
                    <el-button style="color: red" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
            </el-table>
            <div class="pageBtn">
              <el-pagination @size-change="onHandleSizeChange" small="false" @current-change="onHandleCurrentChange" class="page-position" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="listQuery.pageIndex" background v-model:page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
            </div>
            </div>
          </div>
        </div>
        <add-report ref="reportRef" @refresh="getData"></add-report>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import addReport from "./components/addReport.vue"
import {judgeReportApi} from "/@/api/dataUpload/saftyBaseInfo/judgeReport";
import axios from "axios";
import Cookies from "js-cookie";
import {educateTrainApi} from "/@/api/dataUpload/educateTrain";

// 定义接口来定义对象的类型
interface TableDataRow {
  id: number|null
  updateDate: string
  createDate: string
  planName: string
  planMode: number|null
  offlineFile: string
  planBeginTime: string
  planEndTime: string
}
interface TableDataState {
  reportData: [],
  listQuery: {
    searchParams: {}
    pageIndex: number
    pageSize: number
  }
  total: null | number
  baseUrl: string
}

export default defineComponent({
    name: 'trainPlan',
    components: {addReport },
    setup() {
      const reportRef= ref();
      const state = reactive<TableDataState>({
        reportData: [],
        listQuery: {
          searchParams: {},
          pageIndex: 1,
          pageSize: 10
        },
        total: null,
        baseUrl: import.meta.env.VITE_API_URL
      });

      // 页面加载时
      onMounted(() => {
        getData()
        console.log(state.baseUrl)
      });

      const getData = async ()=>{
        const res = await educateTrainApi().getTrainPlanList(state.listQuery)
        if(res.data.code == 200){
          state.reportData = res.data.data
          state.total = res.data.total
        }else{
          ElMessage({
            type: 'warning',
            message: res.data.msg
          })
        }
      }

      const openDialog=(type:string,data:object)=>{
        reportRef.value.open(type,data)
      }

      // 删除用户
      const onRowDel = (row: TableDataRow) => {
          ElMessageBox.confirm(`此操作将永久删除计划名称：“${row.planName}”，是否继续?`, '提示', {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning'
          })
              .then(async () => {
                const res = await educateTrainApi().delTrainPlan({ids: [row.id]})
                if(res.data.code == 200){
                  ElMessage({
                    type: 'success',
                    message: '删除成功'
                  })
                  await getData()
                }else{
                  ElMessage({
                    type: 'warning',
                    message: res.data.msg
                  })
                }
              })
              .catch(() => {});
      };
      // 分页改变
      const onHandleSizeChange = (val: number) => {
          state.listQuery.pageSize = val;
          getData()
      };
      // 分页改变
      const onHandleCurrentChange = (val: number) => {
          state.listQuery.pageIndex = val;
          getData()
      };

      const openFile=(file: string)=>{
        axios.get(import.meta.env.VITE_API_URL + file,{headers:{'Content-Type': 'application/json','Authorization': `${Cookies.get('token')}`,'uid':`${Cookies.get('uid')}`},responseType: 'blob'}).then(res=>{
          if (res) {
            const link = document.createElement('a')
            let blob = new Blob([res.data],{type: res.data.type})
            link.style.display = "none";
            link.href = URL.createObjectURL(blob); // 创建URL
            window.open(link.href)
          } else {
            ElMessage({
              type: 'warning',
              message: '文件读取失败'
            });
          }
        })
      }

      return {
        reportRef,
        openDialog,
        openFile,
        getData,
        onRowDel,
        onHandleSizeChange,
        onHandleCurrentChange,
        ...toRefs(state)
      };
    }
});
</script>
<style lang="scss" scoped>
.home-container {
  height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow: hidden;
  .demo-tabs {
    width: 100%;
    height: 100%;

    &::v-deep(.el-tabs__content) {
      height: calc(100% - 60px);
    }

    .el-tab-pane {
      height: 100%;
    }
  }
  .homeCard {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;

    .main-card {
      width: 100%;
      height: 100%;
      .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .mainCardBtn {
          margin: 0;
        }
      }
      .pageBtn {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: right;

        .demo-pagination-block + .demo-pagination-block {
          margin-top: 10px;
        }
        .demo-pagination-block .demonstration {
          margin-bottom: 16px;
        }
      }
    }
    &:last-of-type {
      height: calc(100% - 100px);
    }
  }
  .el-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .grid-content {
      align-items: center;
      min-height: 36px;
    }

    .topInfo {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      & > div {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }
  .el-card {
    border: 0;
  }
}
</style>

 src/views/dataUpload/peopleLocate/components/addReport.vue

@@ -167,7 +167,7 @@
        floorNo: '',
        handleTime: '',
        handleInfo: '',
        thirdAddress: 'http://124.88.37.66:8081/location_system_5.4.9/map3d/index.html'
        thirdAddress: 'http://117.190.40.54:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9'
      },
      rules:{
        serialNumber: [{ required: true, message: '请填写序号', trigger: 'blur' }],
@@ -218,7 +218,7 @@
          floorNo: '',
          handleTime: '',
          handleInfo: '',
          thirdAddress: 'http://124.88.37.66:8081/location_system_5.4.9/map3d/index.html'
          thirdAddress: 'http://117.190.40.54:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9'
        }
      }else{
        state.title = '重新上报';
@@ -237,7 +237,7 @@
          floorNo: '',
          handleTime: '',
          handleInfo: '',
          thirdAddress: 'http://124.88.37.66:8081/location_system_5.4.9/map3d/index.html'
          thirdAddress: 'http://117.190.40.54:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9'
        }
      }
    };

 src/views/dataUpload/saftyBaseInfo/productionAbility/components/addReport.vue

对比新文件
@@ -0,0 +1,248 @@
<template>
  <div class="system-add-user-container">
    <el-dialog :title="title" v-model="isShowDialog" width="50%">
      <el-form :model="form" size="default" ref="formRef" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="生产工艺" prop="craftId">
              <el-select v-model="form.craftId" filterable placeholder="请选择生产工艺" clearable style="width: 100%">
                <el-option v-for="(item,index) in craftList" :key="index" :label="item.craftName" :value="item.uuid"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="年份" prop="theYear">
              <el-date-picker
                  v-model="form.theYear"
                  type="year"
                  style="width: 100%"
                  value-format="YYYY"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="一月产能" prop="janCapacity">
              <el-input v-model.number.trim="form.janCapacity" placeholder="一月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="二月产能" prop="febCapacity">
              <el-input v-model.number.trim="form.febCapacity" placeholder="二月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="三月产能" prop="marCapacity">
              <el-input v-model.number.trim="form.marCapacity" placeholder="三月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="四月产能" prop="aprCapacity">
              <el-input v-model.number.trim="form.aprCapacity" placeholder="四月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="五月产能" prop="mayCapacity">
              <el-input v-model.number.trim="form.mayCapacity" placeholder="五月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="六月产能" prop="juneCapacity">
              <el-input v-model.number.trim="form.juneCapacity" placeholder="六月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="七月产能" prop="julyCapacity">
              <el-input v-model.number.trim="form.julyCapacity" placeholder="七月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="八月产能" prop="augCapacity">
              <el-input v-model.number.trim="form.augCapacity" placeholder="八月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="九月产能" prop="sepCapacity">
              <el-input v-model.number.trim="form.sepCapacity" placeholder="九月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="十月产能" prop="octCapacity">
              <el-input v-model.number.trim="form.octCapacity" placeholder="十月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="十一月产能" prop="noveCapacity">
              <el-input v-model.number.trim="form.noveCapacity" placeholder="十一月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
            <el-form-item label="十二月产能" prop="decCapacity">
              <el-input v-model.number.trim="form.decCapacity" placeholder="十二月产能" type="number"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="title == '新增上报'? false : true">
            <el-form-item label="删除状态" prop="deleted">
              <el-radio-group v-model="form.deleted">
                <el-radio :label="0">未删除</el-radio>
                <el-radio :label="1">已删除</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="isShowDialog = !isShowDialog" size="default">取 消</el-button>
            <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
import {ElMessageBox, ElMessage, FormRules, FormInstance} from 'element-plus';
import axios from "axios";
import {contractorApi} from "/@/api/dataUpload/contractorManage";
import Cookies from "js-cookie";
import {judgeReportApi} from "/@/api/dataUpload/saftyBaseInfo/judgeReport";

// 定义接口来定义对象的类型
interface DataState {
  title: string
  isShowDialog: boolean
  form: {
    uuid: string
    craftId: string
    theYear: string
    janCapacity: number | null
    febCapacity: number | null
    marCapacity: number | null
    aprCapacity: number | null
    mayCapacity: number | null
    juneCapacity: number | null
    julyCapacity: number | null
    augCapacity: number | null
    sepCapacity: number | null
    octCapacity: number | null
    noveCapacity: number | null
    decCapacity: number | null
    deleted: number | null
  }
  rules:{}
  craftList: []
}

export default defineComponent({
  name: 'reportDialog',
  props: [],
  setup(props, context) {
    const formRef = ref()
    const addFormRef = ref()
    const state = reactive<DataState>({
      title: '',
      isShowDialog: false,
      form: {
        uuid: '',
        craftId: '',
        theYear: '',
        janCapacity: null,
        febCapacity: null,
        marCapacity: null,
        aprCapacity: null,
        mayCapacity: null,
        juneCapacity: null,
        julyCapacity: null,
        augCapacity: null,
        sepCapacity: null,
        octCapacity: null,
        noveCapacity: null,
        decCapacity: null,
        deleted: 0
      },
      rules:{
        craftId: [{ required: true, message: '请选择生产工艺', trigger: 'blur' }],
        theYear: [{ required: true, message: '请输入所属年份', trigger: 'blur' }]
      },
      craftList: []
    })

    // 页面加载时
    onMounted(() => {

    })
    // 打开弹窗
    const open = (type: string, data: object, list: []) => {
      state.isShowDialog = true
      state.craftList = list
      if (type === 'add') {
        state.title = '新增上报';
        state.form = {
          uuid: '',
          craftId: '',
          theYear: '',
          janCapacity: null,
          febCapacity: null,
          marCapacity: null,
          aprCapacity: null,
          mayCapacity: null,
          juneCapacity: null,
          julyCapacity: null,
          augCapacity: null,
          sepCapacity: null,
          octCapacity: null,
          noveCapacity: null,
          decCapacity: null,
          deleted: 0
        }
      }else{
        state.title = '重新上报';
        Object.keys(state.form).forEach(key => {
          if (Object.prototype.hasOwnProperty.call(data,key)) {
            state.form[key] = JSON.parse(JSON.stringify(data))[key];
          }
        })
        state.form.theYear = state.form.theYear.toString()
        state.form.deleted = 0
      }
    }

    // 新增修改
    const onSubmit = async () => {
      formRef.value.validate(async (valid:Boolean) => {
        if(valid){
          const res = await judgeReportApi().addCapacity([state.form])
          if(res.data.code == 200){
            ElMessage({
              type:'success',
              message:'数据上报成功'
            })
            state.isShowDialog = false
          }else{
            ElMessage({
              type:'warning',
              message:res.data.msg
            })
          }
          context.emit('refresh');
        }else{
          ElMessage({
            type:'warning',
            message:'请完善基本信息'
          })
        }
      })
    }


    return {
      formRef,
      addFormRef,
      open,
      onSubmit,
      ...toRefs(state)
    };
  }
});
</script>

 src/views/dataUpload/saftyBaseInfo/productionAbility/index.vue

对比新文件
@@ -0,0 +1,265 @@
<template>
    <div class="home-container">
        <div style="height: 100%">
          <div class="homeCard">
            <div class="main-card">
            <el-row class="cardTop">
              <el-col :span="12" class="mainCardBtn">
                <el-button type="primary" icon="Plus" size="default" @click="openDialog('add',{})">新增</el-button>
              </el-col>
            </el-row>
            <el-table :data="reportData" style="width: 100%" height="calc(100% - 48px)" :header-cell-style="{ background: '#fafafa' }">
              <el-table-column prop="id" label="id" show-overflow-tooltip></el-table-column>
              <el-table-column prop="craftId" label="生产工艺id" show-overflow-tooltip></el-table-column>
              <el-table-column prop="theYear" label="所属年份" show-overflow-tooltip></el-table-column>
              <el-table-column prop="janCapacity" label="一月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="febCapacity" label="二月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="marCapacity" label="三月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="aprCapacity" label="四月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="mayCapacity" label="五月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="juneCapacity" label="六月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="julyCapacity" label="七月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="augCapacity" label="八月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="sepCapacity" label="九月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="octCapacity" label="十月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="noveCapacity" label="十一月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="decCapacity" label="十二月" show-overflow-tooltip></el-table-column>
              <el-table-column prop="updateUser" label="修改人" show-overflow-tooltip></el-table-column>
              <el-table-column prop="updateDate" label="修改时间" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" width="140">
                  <template #default="scope">
                    <el-button size="small" text type="primary" @click="openDialog('update',scope.row)">重新上报</el-button>
                    <el-button style="color: red" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
            </el-table>
            <div class="pageBtn">
              <el-pagination @size-change="onHandleSizeChange" small="false" @current-change="onHandleCurrentChange" class="page-position" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="listQuery.pageIndex" background v-model:page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
            </div>
            </div>
          </div>
        </div>
        <add-report ref="reportRef" @refresh="getData"></add-report>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import addReport from "./components/addReport.vue"
import {contractorApi} from "/@/api/dataUpload/contractorManage";
import Cookies from "js-cookie";
import axios from "axios";
import {judgeReportApi} from "/@/api/dataUpload/saftyBaseInfo/judgeReport";
interface TableDataState {
  reportData: []
  craftList: []
  listQuery: {
    pageIndex: number
    pageSize: number
  }
  total: null | number
  userTypeList: Array<any>
}

export default defineComponent({
    name: 'productionAbility',
    components: {addReport },
    setup() {
      const reportRef= ref();
      const state = reactive<TableDataState>({
        reportData: [],
        craftList: [],
        listQuery: {
          pageIndex: 1,
          pageSize: 10
        },
        total: null,
        userTypeList: [
          {
            name: '主要负责人',
            value: 1
          },
          {
            name: '安全管理人员',
            value: 2
          },
          {
            name: '特殊作业人员',
            value: 3
          }
        ]
      });

      // 页面加载时
      onMounted(async() => {
        await getData()
        await getCraftList()
      })

      const getData = async ()=>{
        const res = await judgeReportApi().getCapacityList(state.listQuery)
        if(res.data.code == 200){
          state.reportData = res.data.data
          state.total = res.data.total
        }else{
          ElMessage({
            type: 'warning',
            message: res.data.msg
          })
        }
      }

      const getCraftList = async ()=>{
        const res = await judgeReportApi().getProductList({searchParams: {}, pageIndex: 1, pageSize: 999})
        if(res.data.code == 200){
          state.craftList = res.data.data
        }else{
          ElMessage({
            type: 'warning',
            message: res.data.msg
          })
        }
      }

      const openDialog=(type:string,data:object)=>{
        reportRef.value.open(type,data,state.craftList)
      }

      // 删除用户
      const onRowDel = (row: Object) => {
          ElMessageBox.confirm(`此操作将永久删除该记录，是否继续?`, '提示', {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning'
          })
              .then(async () => {
                const res = await judgeReportApi().delCapacity({ids: [row.id]})
                if(res.data.code == 200){
                  ElMessage({
                    type: 'success',
                    message: '删除成功'
                  })
                  await getData()
                }else{
                  ElMessage({
                    type: 'warning',
                    message: res.data.msg
                  })
                }
              })
              .catch(() => {});
      };
      // 分页改变
      const onHandleSizeChange = (val: number) => {
          state.listQuery.pageSize = val;
          getData()
      };
      // 分页改变
      const onHandleCurrentChange = (val: number) => {
          state.listQuery.pageIndex = val;
          getData()
      };

      const viewPdf=(item: Object)=>{
        console.log(item.filePath,555)
        window.open(item.filePath)
      }

      return {
        reportRef,
        openDialog,
        getData,
        viewPdf,
        onRowDel,
        onHandleSizeChange,
        onHandleCurrentChange,
        ...toRefs(state)
      };
    }
});
</script>
<style lang="scss" scoped>
.home-container {
  height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow: hidden;
  .demo-tabs {
    width: 100%;
    height: 100%;

    &::v-deep(.el-tabs__content) {
      height: calc(100% - 60px);
    }

    .el-tab-pane {
      height: 100%;
    }
  }
  .homeCard {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;

    .main-card {
      width: 100%;
      height: 100%;
      .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .mainCardBtn {
          margin: 0;
        }
      }
      .pageBtn {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: right;

        .demo-pagination-block + .demo-pagination-block {
          margin-top: 10px;
        }
        .demo-pagination-block .demonstration {
          margin-bottom: 16px;
        }
      }
    }
    &:last-of-type {
      height: calc(100% - 100px);
    }
  }
  .el-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .grid-content {
      align-items: center;
      min-height: 36px;
    }

    .topInfo {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      & > div {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }
  .el-card {
    border: 0;
  }
}
</style>

 src/views/dataUpload/saftyBaseInfo/saftyFiles/components/addReport.vue

对比新文件
@@ -0,0 +1,236 @@
<template>
  <div class="system-add-user-container">
    <el-dialog :title="title" v-model="isShowDialog" width="50%">
      <el-form :model="form" size="default" ref="formRef" :rules="rules" label-width="150px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="文件名称" prop="fileName">
              <el-input v-model.trim="form.fileName" placeholder="文件名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="文件类型" prop="fileType">
              <el-select v-model="form.fileType" style="width: 100%">
                <el-option
                    v-for="item in typeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="附件" prop="filePath">
              <el-upload accept=".pdf" :action="uploadUrl" :headers="header" method="post" :on-exceed="showTip" :on-success="handleAvatarSuccess" :limit='1' v-model:file-list="fileList" :before-upload="picSize" :on-remove="handleRemove" :before-remove="beforeRemove">
                <el-button type="primary">点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">仅支持上传pdf文件，尺寸小于5M,最多可上传1张</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="title == '新增上报'? false : true">
            <el-form-item label="删除状态" prop="deleted">
              <el-radio-group v-model="form.deleted">
                <el-radio :label="0">未删除</el-radio>
                <el-radio :label="1">已删除</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="isShowDialog = !isShowDialog" size="default">取 消</el-button>
            <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import axios from "axios";
import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
import {userApi} from '/@/api/systemManage/user'
import Cookies from "js-cookie";
import {judgeReportApi} from "/@/api/dataUpload/saftyBaseInfo/judgeReport";

// 定义接口来定义对象的类型
interface DataState {
  title: string;
  isShowDialog: boolean;
  form: {
    uuid: string
    fileName: string
    filePath: string
    deleted: number | null
    fileType: number | null
  }
  rules:{},
  fileList: [],
  typeList: Array<any>
  uploadUrl: string,
  header: {}
}

export default defineComponent({
  name: 'reportDialog',
  setup(props, context) {
    const formRef = ref()
    const checkFile = (rule: any, value: any, callback: any) => {
      if(state.fileList.length == 0){
        callback(new Error("请上传文件"))
      } else {
        callback();
      }
    }
    const state = reactive<DataState>({
      title: '',
      isShowDialog: false,
      form: {
        uuid: '',
        fileName: '',
        filePath: '',
        deleted: 0,
        fileType: null
      },
      rules:{
        fileName: [{ required: true, message: '请填写文件名称', trigger: 'blur'}],
        fileType: [{ required: true, message: '请选择文件类型', trigger: 'blur'}],
        filePath: [{ required: true, validator: checkFile, trigger: 'blur'}],
      },
      fileList: [],
      typeList: [],
      uploadUrl: import.meta.env.VITE_API_URL + '/account/file/upload',
      header: {
        uid: Cookies.get('uid'),
        Authorization: Cookies.get('token')
      }
    })

    // 页面加载时
    onMounted(() => {

    })
    // 打开弹窗
    const open = (type: string, data: object,typeList: Array<any>) => {
      state.isShowDialog = true;
      state.typeList = typeList
      if (type === 'add') {
        state.title = '新增上报';
        state.form = {
          uuid: '',
          fileName: '',
          filePath: '',
          deleted: 0,
          fileType: null
        }
        state.fileList = []
      }else{
        state.title = '重新上报';
        Object.keys(state.form).forEach(key => {
          if (Object.prototype.hasOwnProperty.call(data,key)) {
            state.form[key] = JSON.parse(JSON.stringify(data))[key];
          }
        })
        if(data.filePath !== ''){
          state.fileList = state.form.filePath.split(',').map((i,index) => {
            return {
              url:  i,
              name: '文件' + (index+1)
            }
          })
        }else{
          state.fileList = []
        }
        // state.form = {
        //   type: 1,
        //   uuid: data.uuid,
        //   fileName: '',
        //   remarks: '',
        //   evaluateTime: '',
        //   files: '',
        //   deleted: '0'
        // }
      }
    };

    // 图片上传
    const showTip =()=>{
      ElMessage({
        type: 'warning',
        message: '超出文件上传数量'
      });
    }

    const picSize = async(rawFile: any) => {
      if(rawFile.size / 1024 / 1024 > 5){
        ElMessage({
          type: 'warning',
          message: '文件大小不能超过5M'
        });
        return false
      }
    }

    const handleAvatarSuccess = (res:any, uploadFile: any) => {
      if(res){
          uploadFile.name = res
          state.form.filePath = res
      }else{
        ElMessage({
          type: 'warning',
          message: '文件上传失败'
        })
      }
    }

    const handleRemove = (file, uploadFiles,type) => {
      state.form.filePath = ''
    }

    // 新增修改
    const onSubmit = async () => {
      formRef.value.validate(async (valid:Boolean) => {
        if(valid){
            const res = await judgeReportApi().addSafeFile([state.form])
            if(res.data.code == '200'){
              ElMessage({
                type:'success',
                message:'数据上报成功'
              })
              state.isShowDialog = false
              state.fileList = []
            }else{
              ElMessage({
                type:'warning',
                message:res.data.msg
              })
            }
            context.emit('refresh');
        }else{
          ElMessage({
            type:'warning',
            message:'请完善基本信息'
          })
        }
      })
    }

    return {
      formRef,
      showTip,
      picSize,
      handleAvatarSuccess,
      handleRemove,
      open,
      onSubmit,
      ...toRefs(state)
    };
  }
});
</script>

 src/views/dataUpload/saftyBaseInfo/saftyFiles/index.vue

对比新文件
@@ -0,0 +1,284 @@
<template>
  <div class="home-container">
    <div style="height: 100%">
      <div class="homeCard">
        <div class="main-card">
          <el-row class="cardTop">
            <el-col :span="12" class="mainCardBtn">
              <el-button type="primary" icon="Plus" size="default" @click="openDialog('add',{})">新增</el-button>
            </el-col>
          </el-row>
          <el-table :data="reportData" style="width: 100%" height="calc(100% - 48px)"
                    :header-cell-style="{ background: '#fafafa' }">
            <el-table-column prop="id" label="id" show-overflow-tooltip></el-table-column>
            <el-table-column prop="fileName" label="文件名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="fileType" label="文件类型" show-overflow-tooltip>
              <template #default="scope">
                {{ typeList.find(i => i.value == scope.row.fileType)?.label }}
              </template>
            </el-table-column>
            <el-table-column prop="updateUser" label="修改人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="uploadDate" label="上传时间" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="140">
              <template #default="scope">
                <el-button size="small" text type="primary" @click="openDialog('update',scope.row)">重新上报</el-button>
                <el-button size="small" v-if="scope.row.filePath !== ''" text type="primary" @click="openFile(scope.row.filePath)">查看</el-button>
                <el-button style="color: red" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBtn">
            <el-pagination @size-change="onHandleSizeChange" small="false" @current-change="onHandleCurrentChange"
                           class="page-position" :pager-count="5" :page-sizes="[10, 20, 30]"
                           v-model:current-page="listQuery.pageIndex" background v-model:page-size="listQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <add-report ref="reportRef" @refresh="getData"></add-report>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue'
import {ElMessageBox, ElMessage} from 'element-plus'
import {Plus} from '@element-plus/icons-vue'
import addReport from "./components/addReport.vue"
import {judgeReportApi} from "/@/api/dataUpload/saftyBaseInfo/judgeReport";
import axios from "axios";
import Cookies from "js-cookie";

// 定义接口来定义对象的类型
interface TableDataRow {
  id: number | null
  fileType: number | null
  fileName: string
  updateUser: string
  uploadDate: string
  filePath: string
}

interface TableDataState {
  reportData: [],
  listQuery: {
    searchParams: {}
    pageIndex: number
    pageSize: number
  }
  total: null | number
  typeList: Array<object>
}

export default defineComponent({
  name: 'saftyFile',
  components: {addReport},
  setup() {
    const reportRef = ref();
    const state = reactive<TableDataState>({
      reportData: [],
      listQuery: {
        searchParams: {},
        pageIndex: 1,
        pageSize: 10
      },
      total: null,
      typeList: [
        {
          value: 1,
          label: '安全管理制度'
        },
        {
          value: 2,
          label: '安全操作规程',
        },
        {
          value: 3,
          label: '全员安全生产责任制'
        }
      ]
    });

    // 页面加载时
    onMounted(() => {
      getData()
    });

    const getData = async () => {
      const res = await judgeReportApi().getSafeFileList(state.listQuery)
      if (res.data.code == 200) {
        state.reportData = res.data.data
        state.total = res.data.total
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        })
      }
    }

    const openDialog = (type: string, data: object) => {
      reportRef.value.open(type, data, state.typeList)
    }

    const openFile = (file: string) => {
      // axios.get(file,{headers:{'Content-Type': 'application/json','Authorization': `${Cookies.get('token')}`,'uid':`${Cookies.get('uid')}`},responseType: 'blob'}).then(res=>{
      //   if (res) {
      //     const link = document.createElement('a')
      //     let blob = new Blob([res.data],{type: 'application/pdf'})
      //     link.style.display = "none";
      //     link.href = URL.createObjectURL(blob); // 创建URL
      //     window.open(link.href)
      //   } else {
      //     ElMessage({
      //       type: 'warning',
      //       message: '文件读取失败'
      //     });
      //   }
      // })
      window.open(file)
    }

    // 删除用户
    const onRowDel = (row: TableDataRow) => {
      ElMessageBox.confirm(`此操作将永久删除文件名称：“${row.fileName}”，是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(async () => {
            const res = await judgeReportApi().delSafeFile({ids: [row.id]})
            if (res.data.code == '200') {
              ElMessage({
                type: 'success',
                message: '删除成功'
              })
              await getData()
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              })
            }
          })
          .catch(() => {
          });
    };
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      state.listQuery.pageSize = val;
      getData()
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
      state.listQuery.pageIndex = val;
      getData()
    };

    return {
      reportRef,
      openFile,
      openDialog,
      getData,
      onRowDel,
      onHandleSizeChange,
      onHandleCurrentChange,
      ...toRefs(state)
    };
  }
});
</script>
<style lang="scss" scoped>
.home-container {
  height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow: hidden;

  .demo-tabs {
    width: 100%;
    height: 100%;

    &::v-deep(.el-tabs__content) {
      height: calc(100% - 60px);
    }

    .el-tab-pane {
      height: 100%;
    }
  }

  .homeCard {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;

    .main-card {
      width: 100%;
      height: 100%;

      .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .mainCardBtn {
          margin: 0;
        }
      }

      .pageBtn {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: right;

        .demo-pagination-block + .demo-pagination-block {
          margin-top: 10px;
        }

        .demo-pagination-block .demonstration {
          margin-bottom: 16px;
        }
      }
    }

    &:last-of-type {
      height: calc(100% - 100px);
    }
  }

  .el-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .grid-content {
      align-items: center;
      min-height: 36px;
    }

    .topInfo {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      & > div {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }

  .el-card {
    border: 0;
  }
}
</style>