skyeyesystem/frontend/Skyeye-sys-ui/src/views/home/components/twin-situation/FlyConfirm.vue

<template>
  <dt-dialog
    title="复飞信息确认"
    top="20vh"
    width="500px"
    :visible.sync="visibleLocale"
    append-to-body
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="120px"
      class="fly-confirm-form"
    >
      <el-form-item prop="startAltitude" label="起飞点高度">
        <div class="input-command">
          <el-input  v-model.number="form.startAltitude" type="number"></el-input>
          <el-button size="mini" type="primary" :disabled="!form.loader || !form.uav" @click.stop="refreshUavHeight()">更新</el-button>
        </div>
      </el-form-item>
      <el-form-item prop="imageLight" label="图片亮度">
        <el-input-number v-model="form.imageLight" controls-position="right" :min="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item prop="ratio" label="分辨率">
        <el-select
          size="small"
          @change="calculateLimit"
          v-model="form.ratio"
        >
          <el-option
            v-for="item in sarResolutionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="initSpeed" label="飞行速度">
        <el-input-number @change="calculateLimit" v-model="form.initSpeed" controls-position="right" :min="5" :max="20"></el-input-number>
      </el-form-item>
      <div class="submit-wrap">
        <el-button
          size="mini"
          type="primary"
          :disabled="loading || form.fileUrlArr.length === 0"
          @click.stop="submit"
        >确定</el-button
        >
      </div>
    </el-form>
  </dt-dialog>
</template>
<script>
import { getTaskListData, getUavListData, uploadUavPicture } from '@/api/task'

export default {
  name: 'PicturesUpload',
  props: {
    visible: Boolean
  },
  components: {},
  data() {
    return {
      visibleLocale: false,
      taskData: [
        {
          id: 1,
          name: '任务1'
        },
        {
          id: 2,
          name: '任务2'
        }
      ],
      uavOptions: [],
      loading: false,
      form: {
        jobId: undefined,
        uavId: undefined,
        loaderId: undefined,
        dir: '',
        fileUrlArr: []
      },
      rules: {
        dir: [{ required: true, message: '请输入文件夹路径', trigger: 'blur' }],
        fileUrlArr: [
          { required: true, message: '请选择图片', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler: function(nv) {
        if (nv) {
          this.visibleLocale = nv
        }
      },
      immediate: true
    },
    visibleLocale(nv) {
      if (!nv) {
        this.$emit('update:visible', false)
      }
    },
    'form.fileUrlArr': {
      handler: function(newValue, oldValue) {
        if (newValue.length && this.$refs.form) {
          this.$refs.form.validateField('fileUrlArr')
        }
      },
      deep: true
    }
  },

  created() {
    this.getTaskList()
    // this.getUavList()
  },
  mounted() {},

  methods: {
    getTaskList() {
      getTaskListData({ type: 2 }).then(res => {
        if (res.data.code === 200) {
          console.log('任务列表', res.data.data)
          let data = res.data.data
          this.taskData = data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleJobChange(value) {
      console.log('变化的', value)
      this.form.uavId = undefined
      if (value) {
        let find = this.taskData.find(item => item.id === value)
        if (find) {
          this.uavOptions = find.uavList
          if (this.uavOptions.length > 0) {
            this.form.uavId = this.uavOptions[0].uavId
          }
        }
      }
    },
    getUavList() {
      getUavListData().then(res => {
        if (res.data.code === 200) {
          console.log('无人机列表', res.data.data)
          this.uavOptions = res.data.data
          // TODO 临时
          if (this.uavOptions.length > 0) {
            // this.form.uav = this.uavOptions[0].id
          }
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    openFile() {
      this.$refs.fileInput.click()
    },
    changeFile(event) {
      console.log('多文件', event.target.files)
      const files = event.target.files
      const filesLength = files.length
      console.log('文件', filesLength, files[0])
      if (files) {
        for (let i = 0; i < filesLength; i++) {
          let find = this.form.fileUrlArr.find(item => item === files[i].name)
          if (!find) {
            this.form.fileUrlArr.push(files[i].name)
          }
        }
      }
      this.resetInputFile()
    },
    resetInputFile() {
      this.$refs.fileInput.value = ''
      if (!/safari/i.test(navigator.userAgent)) {
        this.$refs.fileInput.value.type = ''
        this.$refs.fileInput.value.type = 'file'
      }
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          let tempFile = ['001.tif', '002.tif']
          console.log('提交我选取的', this.form.fileUrlArr)
          let params = {
            jobId: this.form.jobId,
            uavId: this.form.uavId,
            dir: this.form.dir,
            files: this.form.fileUrlArr // this.form.fileUrlArr
          }
          uploadUavPicture(params)
            .then(res => {
              this.loading = false
              if (res.data.code === 200) {
                this.$message.success('上传成功')
                this.$emit('submit')
                this.visibleLocale = false
              } else {
                this.$message.error(res.data.message)
              }
            })
            .catch(err => {
              this.loading = false
            })
        }
      })
      // if (this.form.fileUrlArr.length > 0) {
      //
      // } else {
      //   this.$message.warning('请选择文件')
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.fly-confirm-form {
  .pick-file {
    width: 100%;
    height: 200px;
    overflow-y: auto;
    border: 1px dashed #333;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 4px;
    position: relative;
    .pick-file-button {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 16px;
      height: 100%;
      transition: height 0.3s ease-in-out;
      background: rgba(0,0,0,0.4);
    }
    .pick-file-button_shrink {
      height: 32px;
      cursor: pointer;
    }
    .file-list {
      width: 100%;
      height: calc(100% - 32px);
      position: relative;
      overflow-y: auto;
      .file-list-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        //margin: 3px 0;
        line-height: 30px;
        >span:nth-child(2) {
          width: 80%;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-left: 4px;
        }
      }
    }
  }
  .el-form-item {
    .el-select {
      width: 100%;
    }
  }
  .submit-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>