erqi-web/src/views/business/identification/alarm/detail.vue

<template>
  <el-form class="Form detail-form" ref="form" :model="model" label-width="auto" :rules="rules" label-suffix="：">
    <el-form-item v-for="(item,index) in items" :key="index" :label="item.label" :prop="item.prop" :style="`grid-column-start: span ${item.width || '1'};`">
      <el-input v-if="item.type === 'input'" v-model="model[item.prop]" />
      <el-input v-if="item.type === 'textarea'" autosize v-model="model[item.prop]" :rows="item.rows || 2" type="textarea" />
      <el-input-number v-if="item.type === 'number'" v-model="model[item.prop]" :min="0" style="width: 100%;"/>

      <el-select
        v-if="item.type === 'select'"
        v-model="model[item.prop]"
        :clearable="item.clearable"
        :multiple="item.multiple"
        >
        <el-option
          v-for="(opt, index) in item.options"
          :key="index"
          :label="opt.label"
          :value="opt.value">
        </el-option>
      </el-select>

      <el-date-picker v-if="item.type === 'datetime'" v-model="model[item.prop]" type="datetime"
        :placeholder="item.placeholder ? item.placeholder : '请选择时间'" value-format="YYYY-MM-DD HH:mm:ss"
        :clearable="item.clearable" style="width:100%">
      </el-date-picker>
    </el-form-item>
  </el-form>
  <div class="button-wrapper">
    <el-button type="primary" @click="validate">提交</el-button>
    <el-button @click="$emit('close')">取消</el-button>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { updateVideoIdentification } from '@/api/identification.js'

const emit = defineEmits([ 'close' ])
const props = defineProps({
  data: {
    default() {
      return {}
    },
    required: false,
    type: Object
  }
})
const illegalTypes = [
  { value: '未封舱预警', label: '未封舱预警', prop: 'warning' },
  { value: '未穿救生衣预警', label: '未穿救生衣预警', prop: 'warning' },
  { value: '吃水线预警', label: '吃水线预警', prop: 'yellow' },
  { value: '人员落水协助', label: '人员落水协助', prop: 'primary' },
  { value: '未悬挂国旗', label: '未悬挂国旗', prop: 'primary' },
  { value: '异常停靠预警', label: '异常停靠预警', prop: 'yellow' },
  { value: '船只漏油预警', label: '船只漏油预警', prop: 'warning' },
  { value: '船舶火灾预警', label: '船舶火灾预警', prop: 'danger' },
  { value: '超速预警', label: '超速预警', prop: 'primary' },
  { value: '偏航预警', label: '偏航预警', prop: 'yellow' }
]
const form = ref(null)

const model = reactive({
  boatName: '',
  shipType: '',
  boatNameEn: '',
  length: 0,
  speed: 0,
  width: 0,
  mmsi: '',
  entryOut: '',
  takeType: '',
  takeTime: '',
  aisStatus: '',
  videoName: '',
  illegalType: [],
  remark: ''
})

const items = ref([
    {
      label: '船牌名称',
      prop: 'boatName',
      type: 'input'
    },
    {
      label: '名称',
      prop: 'boatNameEn',
      type: 'input'
    },
    {
      label: '抓拍类型',
      prop: 'takeType',
      type: 'select',
      options: [
        { value: '无人机', label: '无人机' },
        { value: '卡口', label: '卡口' }
        ]
    },
    {
      label: '抓拍设备',
      prop: 'videoName',
      type: 'input'
    },
    {
      label: '船型',
      prop: 'shipType',
      type: 'select',
      options: [ {
        label: '集装箱船',
        value: '集装箱船'
        }, {
        label: '液货船',
        value: '液货船'
        },
        {
        label: '散杂货船',
        value: '散杂货船'
        },
        {
        label: '客渡船',
        value: '客渡船'
        },
        {
        label: '渔船',
        value: '渔船'
        },
        {
        label: '公务船',
        value: '公务船'
        },
        {
        label: '引航船',
        value: '引航船'
        },
        {
        label: '拖轮',
        value: '拖轮'
        } ]
    },
    {
      label: '船长(m)',
      prop: 'length',
      type: 'number'
    },
    {
      label: '航速(节)',
      prop: 'speed',
      type: 'number'
    },
    {
      label: '船宽(m)',
      prop: 'width',
      type: 'number'
    },
    {
      label: 'MMSI',
      prop: 'mmsi',
      type: 'input'
    },
    {
      label: '方向',
      prop: 'entryOut',
      type: 'input'
    },
    {
      label: '时间',
      prop: 'takeTime',
      type: 'datetime'
    },
    {
      label: '是否有AIS信号',
      prop: 'isHasAis',
      type: 'input'
    },
    {
      label: 'AIS状态',
      prop: 'aisStatus',
      type: 'input'
    },
    {
      label: '违规类型',
      prop: 'illegalType',
      type: 'select',
      multiple: true,
      options: illegalTypes
    },
    {
      label: '备注',
      prop: 'remark',
      type: 'textarea',
      width: 2
    }
])

const rules = {
}

/**
 * 初始化赋值
 */
 const initData = () => {
  Object.keys(props.data).forEach((key) => {
      model[key] = props.data[key]
      if(key === 'illegalType') {
        model[key] = props.data[key].map(i => i.label)
        console.log(model[key])
      }
    })
}

/**
 * 表单校验
 */
const validate = () => {
  form.value.validate().then((valid) => {
    if (valid) {
        submit()
    }
  })
}

/**
 * 表单校验
 */
const submit = () => {
  const params = {
    ...model,
    illegalType: model.illegalType.join(',')
  }
  updateVideoIdentification(params).then(res => {
    ElMessage.success(res.msg)
    emit('close', true)
  })

}

initData()

</script>

<style lang="scss" scoped>
.detail-form{
  display: grid;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}

.button-wrapper{
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>