feat:空域菜单调整

shuishen

2025-09-11 f7c788671023b4a6ad5d6def402c5f53468a781f

feat:空域菜单调整

 src/views/airspace/airspaceEntering.vue

New file
@@ -0,0 +1,296 @@
<!--
 * @Author       : yuan
 * @Date         : 2025-09-11 09:23:03
 * @LastEditors  : yuan
 * @LastEditTime : 2025-09-11 09:24:27
 * @FilePath     : \src\views\airspace\airspaceEntering.vue
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-09-11 09:23:03
-->
<template>
  <div class="airspaceManage">
    <div class="search-box">
      <el-form :model="params" inline>
        <el-form-item label="类型名称:">
          <el-input v-model="params.algName" placeholder="请输入空域名称" clearable />
        </el-form-item>
        <el-form-item label="创建人:">
          <el-input v-model="params.algName" placeholder="请输入空域名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button @click="cancelSearch">取消</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增类型</el-button>
      </div>
    </div>
    <div class="mange-table">
      <el-table border :data="tableList" class="custom-header">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column prop="model_name" label="类型名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="alg_type" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="alg_type" label="创建人" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button icon="el-icon-view" type="text" @click="handleDetail(scope.row)">查看</el-button>
            <el-button icon="el-icon-delete" type="text" @click="handleDelete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination class="ztzf-pagination" popper-class="custom-pagination-dropdown" background
        :page-sizes="[10, 20, 30, 40, 50, 100]" :size="size" v-model:current-page="params.current"
        v-model:page-size="params.size" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
  <el-dialog class="ztzf-dialog" append-to-body v-model="isShowView" title="查看" :width="pxToRem(600)"
    :close-on-click-modal="false" :destroy-on-close="true">
    <div class="content">
      <table class="view-table" border>
        <tr>
          <td class="label">空域类型</td>
          <td class="value">{{ rowView.model_name }}</td>
          <td class="label">创建时间</td>
          <td class="value">{{ rowView.alg_type }}</td>
        </tr>
      </table>
    </div>
  </el-dialog>
  <el-dialog class="ztzf-dialog" append-to-body v-model="isShowEditView" title="新增" :width="pxToRem(800)"
    :close-on-click-modal="false" :destroy-on-close="true">
    <div class="content-edit">
      <el-form ref="ruleFormRef" :model="editParams" :rules="rules" inline>
        <el-form-item label="空域名称">
          <el-input v-model="editParams.model_name" />
        </el-form-item>
        <div class="btns">
          <el-button type="primary" @click="submit(ruleFormRef)">确认</el-button>
          <el-button @click="isShowEditView = false">取消</el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>
<script setup>
import { getAlgorithmManageList, algorithmManageEdit } from '@/api/airspaceManage/airspaceManage'
import { getDictionaryByCode } from '@/api/system/dictbiz'

const total = ref(0)
const params = ref({
  current: 1,
  size: 10,
  algName: '',
  algTypeCode: '',
})

let tableList = ref([])

let isShowView = ref(false)

let rowView = ref({})

let isShowEditView = ref(false)

let sfTypes = ref([])
const ruleFormRef = ref()
let editParams = ref({
  model_name: '',
  alg_type: '',
  qua_rate: '',
  pass_rate: '',
  event_type: '',
  remark: ''
})
const rules = reactive({
  qua_rate: [
    { required: true, message: '请输入最低准确率', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!/^\d+(\.\d+)?$/.test(value)) {
          callback(new Error('请输入有效的数字（整数或小数）'))
        } else if (parseFloat(value) < 0.4) {
          callback(new Error('最低准确率不能小于0.4'))
        } else if (parseFloat(value) >= parseFloat(editParams.value.pass_rate)) {
          callback(new Error('最低准确率必须小于最高准确率'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  pass_rate: [
    { required: true, message: '请输入最低准确率', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!/^\d+(\.\d+)?$/.test(value)) {
          callback(new Error('请输入有效的数字（整数或小数）'))
        } else if (parseFloat(value) > 0.8) {
          callback(new Error('最高准确率不能大于0.8'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  event_type: [
    {
      required: true,
      message: '请选择事件生成类型',
      trigger: 'change',
    },
  ],
})

function cancelSearch () {
  params.value = {
    algName: '',
    algTypeCode: '',
  }
  getList()
}

function getList () {
  getAlgorithmManageList(params.value).then(res => {
    tableList.value = res.data.data.records || []
    total.value = res.data.data.total || 0
  })
}
function getSFType () {
  getDictionaryByCode('WORK_ORDER_TYPE').then(res => {
    sfTypes.value = res.data.data.WORK_ORDER_TYPE || []
  })
}
function handleDetail (row) {
  isShowView.value = true
  rowView.value = row
}
function handleDelete (row) {
  console.log(row)
}
function handleAdd (row) {
  isShowEditView.value = true
  // editParams.value = { ...row }
}

async function submit (formValidate) {
  if (!formValidate) return
  await formValidate.validate((valid, fields) => {
    if (valid) {
      algorithmManageEdit(editParams.value).then(res => {
        isShowEditView.value = false
        getList()
      })
    }
  })
}

onMounted(() => {
  getList()
  getSFType()
})
</script>

<style lang="scss" scoped>
.airspaceManage {
  height: 0;
  flex: 1;
  margin: 0 10px 10px 10px;
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;

  .search-box {
    height: 80px;
  }

  :deep(.el-input) {
    .el-input__wrapper {
      width: 200px;
    }
  }

  // 表格
  .mange-table {
    height: 0;
    flex: 1;
    margin-top: 18px;
    overflow: auto;
  }

  :deep(.el-pagination) {
    display: flex;
    justify-content: right;
  }

  :deep(.el-pagination button) {
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
  }

  :deep(.ztzf-select) {
    .el-select__selection {
      width: 200px;
    }
  }
}

.content {
  padding: 20px;

  .view-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #EBEEF5;

    tr {
      &:not(:last-child) {
        border-bottom: 1px solid #EBEEF5;
      }

      td {
        padding: 12px 10px;

        &.label {
          width: 140px;
          text-align: right;
          // color: #909399;
          // background-color: #F5F7FA;
          border-right: 1px solid #EBEEF5;
        }

        &.value {
          width: 180px;
          // color: #303133;
        }
      }
    }
  }
}

.content-edit {
  .el-form {
    .el-form-item {
      width: 300px;

      :deep(.el-form-item__label) {
        width: 120px;
      }

    }

    .btns {
      display: flex;
      justify-content: center
    }
  }
}
</style>

 src/views/airspace/airspaceType.vue