四 Vue-AI前端部署项目创建

四 Vue-AI前端部署项目创建

<template>
  <div class="main">
    <!-- 头部 -->
    <div class="addBtn">
      <el-button type="primary" @click="onAddModel">
      添加模型
      </el-button>
    </div>


    <!-- 提交模型对话框 -->
    <el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form 
      :model="form"
      :rules="rules"
      ref="modelForm"
    >
      <el-form-item label="算法类型" :label-width="formLabelWidth" prop="algoCategory">
        <el-input v-model="form.algoCategory" autocomplete="off" />
      </el-form-item>
      <el-form-item label="任务类型" :label-width="formLabelWidth" prop="task">
        <el-input v-model="form.task" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图像大小" :label-width="formLabelWidth" prop="imgsz">
        <el-input v-model="form.imgsz" autocomplete="off" />
      </el-form-item>
      <el-form-item label="设备" :label-width="formLabelWidth" prop="device">
        <el-input v-model="form.device" autocomplete="off" />
      </el-form-item>
      <el-form-item label="模型路径" :label-width="formLabelWidth" prop="modelPath">
        <div style="display: flex;">
          <el-input v-model="form.modelPath" autocomplete="off" style="margin-right: 10px;" />
          <el-upload
          :action="$http.server_host+'/api/model/upload'"
          name = "AIModel"
          :show-file-list="false"
          :on-success="onAIModelUploadSuccess"
          :on-error="onAIModelUploadError"
          >
            <el-button type="primary">上传模型</el-button>
          </el-upload>
        </div>
   
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmitModelForm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除模型对话框 -->
  <el-dialog
    v-model="deleteDialogVisible"
    title="提示"
    width="30%"
  >
    <span>确定要删除该模型吗？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteDialogVisible= false">取消</el-button>
        <el-button type="primary" @click="onConfirmDeleteAIModel">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 显示模型区域 -->
   <el-table :data="AIModels" style="width:100%">
    <el-table-column prop="id" label="id" width="100"></el-table-column>
     <el-table-column prop="algoCategory" label="algoCategory" width="100"></el-table-column>
     <el-table-column prop="task" label="task" width="100"></el-table-column>
     <el-table-column prop="imgsz" label="imgsz" width="100"></el-table-column>
     <el-table-column prop="device" label="device" width="100"></el-table-column>
     <el-table-column prop="modelPath" label="modelPath" width="260"></el-table-column>
     <el-table-column prop="initModelFlag" label="initModelFlag" width="100"></el-table-column>
     <el-table-column>
      <template #default="scope">
        <!-- 编辑模型 -->
       <el-button type="primary" circle @click="onEditAIModel(scope.$index)" >
        <el-icon><edit/></el-icon>
       </el-button>
       <!-- 删除模型 -->
       <el-button type="danger" circle @click="onDeleteAIModel(scope.$index)" >
        <el-icon><delete/></el-icon>
       </el-button>
       <!-- 初始化模型 -->
       <el-button type="warning" circle @click="onInitAIModel(scope.$index)" >
        <el-icon><Open /></el-icon>
       </el-button>
       <!-- 测试模型 -->
       <el-upload
          :action="$http.server_host+'/api/test'"
          name = "image"
          :data="{id:scope.row.id}" 
          :show-file-list="false"
          :on-success="onTestSuccess"
          :on-error="onTestError"
          >
            <el-button type="primary" circle>
              <el-icon><CaretRight /></el-icon>
            </el-button>
          </el-upload>

      </template>
     </el-table-column>

   </el-table>

  </div>
</template>

<script>

import {
   ElMessage} from 'element-plus';

export default {
   
  name:"AIDeployView",
  data(){
   
    return {
   
      // 模型信息对话框
      dialogFormVisible:false,
      // 删除信息对话框
      deleteDialogVisible:false,
      // 删除索引
      deleteIndex :0,
      // 编辑索引
      editIndex :0,
      // 模型信息
      form:{
   
        id:"",
        algoCategory:"",
        task:"",
        imgsz:"",
        device:"",