bcfz-ui/src/views/Deduction/taskSetting/components/mission/MissileMissionCard.vue

<template>
    <el-form style="margin-top: 40px;padding: 0 40px" :model="local" disabled class="dense-form" label-width="110px" size="small">
      <el-row :gutter="16">
        <!--<el-col :span="12">-->
        <!--  <el-form-item label="任务目标类型">-->
        <!--    <el-select v-model="local.targetType" style="width:100%">-->
        <!--      <el-option label="对陆目标" value="land"/>-->
        <!--      <el-option label="对空目标" value="air"/>-->
        <!--      <el-option label="对海目标" value="sea"/>-->
        <!--    </el-select>-->
        <!--  </el-form-item>-->
        <!--</el-col>-->

        <el-col :span="span">
          <el-form-item label="总时间(s)">
            <el-input v-model.number="local.totalTime" :min="1" type="number"/>
          </el-form-item>
        </el-col>

        <el-col :span="span">
          <el-form-item label="攻击靶标">
            <el-input v-model.number="local.attackTheTarget"/>
          </el-form-item>
        </el-col>

        <el-col :span="span">
          <el-form-item label="射程/航程(km)">
            <el-input v-model.number="local.range" :min="1" type="number"/>
          </el-form-item>
        </el-col>

        <el-col :span="span">
          <el-form-item label="攻击目标方式">
            <el-input v-model.number="local.attackTargetMethod"/>
          </el-form-item>
        </el-col>

        <el-col :span="span">
          <el-form-item label="攻击目标经度">
            <el-input v-model="local.attackTargetLongitude" placeholder="lon,lat,alt(可选)"/>
          </el-form-item>
        </el-col>

        <el-col :span="span">
          <el-form-item label="攻击目标纬度">
            <el-input v-model="local.attackTargetLatitude" placeholder="lon,lat,alt(可选)"/>
          </el-form-item>
        </el-col>

        <!--<el-col :span="24">-->
        <!--  <el-form-item label="任务目标特性">-->
        <!--    <el-input v-model="local.targetDesc" :rows="3" placeholder="物理特性、防御能力等..." type="textarea"/>-->
        <!--  </el-form-item>-->
        <!--</el-col>-->
      </el-row>

      <div class="tool-row">
        <el-button type="primary" :disabled="false" @click="$emit('import-trajectory', local)">导入弹道轨迹</el-button>
        <!--<el-button type="text" @click="$emit('preview-trajectory', local.id)">-->
        <!--  预览轨迹-->
        <!--</el-button>-->
      </div>

      <!--<el-card body-style="padding:0;" class="ui-card panel-card trajectory-placeholder" shadow="never">-->
      <!--  <div class="placeholder-content">-->
      <!--    <i class="el-icon-picture-outline placeholder-icon"></i>-->
      <!--    <p class="placeholder-text">轨迹预览</p>-->
      <!--  </div>-->
      <!--</el-card>-->
    </el-form>
</template>

<script>
export default {
  name: 'MissileMissionCard',
  props: {
    span:{type:Number,default:12},
    /**
     * 使用 .sync：<MissileMissionCard :missile.sync="m" />
     * 结构示例：
     * { id, targetType, targetDesc, traj: { start, end, timeSec } }
     */
    missile: { type: Object, required: true }
  },
  data() {
    return {
      // 本地副本，避免直接改父级引用导致脏写
      local: this.clone(this.missile)
    };
  },
  watch: {
  },
  methods: {
    clone(o) { return JSON.parse(JSON.stringify(o || {})); }
  }
};
</script>

<style scoped>
/* 复用你在父页的卡片质感与占位风格 */
.panel-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  overflow: hidden;
}
.panel-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(0,0,0,.34) !important;
  border-color: rgba(102,177,255,.28) !important;
}
.dense-form ::v-deep .el-form-item { margin-bottom: 8px; }
.dense-form ::v-deep .el-form-item__label { color: var(--text-2); padding-right: 8px; }
.dense-form ::v-deep .el-input__inner,
.dense-form ::v-deep .el-textarea__inner,
.dense-form ::v-deep .el-select .el-input__inner{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
}
.dense-form ::v-deep .el-input__inner:focus,
.dense-form ::v-deep .el-textarea__inner:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(102,177,255,.18);
}
.tool-row{
  text-align:right;
  margin-top:-6px;
  margin-bottom:8px;
}
.trajectory-placeholder{
  margin-top:8px; height:240px; display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(102,177,255,.28); border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.placeholder-content{ text-align:center; }
.placeholder-icon{ font-size:40px; opacity:.9; }
.placeholder-text{ font-size:14px; color: var(--text-2); }
</style>