算子优化

src/api/menu/index.ts

@@ -260,9 +260,9 @@ class MenuAPI {
               },
             },
             {
-              path: "calculateView",
+              path: "calculateDetail",
               component: "manage/calculate/view",
-              name: "calculateView",
+              name: "calculateDetail",
               meta: {
                 title: "算子查看",
                 hidden: true,

src/views/manage/calculate/edit.vue

@@ -9,7 +9,7 @@
       <el-row>
         <el-col :lg="12" :xs="24">
           <el-form
-            ref="userFormRef"
+            ref="formRef"
             :model="formData"
             :rules="rules"
             v-loading="loading"
@@ -42,9 +42,10 @@
                     placeholder="请选择算子子类型"
                     size="large"
                     style="width: 100%"
+                    @change="handleChangeRules"
                   >
                     <el-option
-                      v-for="item in listOpt.operTypeList"
+                      v-for="item in listOpt.operSubTypeList"
                       :key="item.oper_sub_type"
                       :label="item.oper_sub_type_name"
                       :value="item.oper_sub_type"
@@ -62,13 +63,13 @@
                 maxlength="1024"
               />
             </el-form-item>
-            <el-form-item label="算子文件">
+            <el-form-item label="算子文件" prop="parameters">
               <el-upload
-                action=""
+                ref="uploadRef"
                 class="upload-demo"
-                ref="upload"
                 :on-change="handleFileChange"
                 :on-remove="handleFileRemove"
+                :on-exceed="handleFileExceed"
                 :auto-upload="false"
                 :limit="1"
                 accept="application/json"
@@ -85,8 +86,8 @@
                 </template>
               </el-upload>
             </el-form-item>
-            <el-form-item label="文件预览">
+            <el-form-item label="文件预览" v-if="fileStatus">
-              <pre class="line-numbers"><code :class="`language-${type}`">{{code}}</code></pre>
+              <code id="codeHtml" v-html="codeHtml"></code>
             </el-form-item>
           </el-form>
         </el-col>
@@ -116,56 +117,25 @@
 </template>
 
 <script setup lang="ts">
-import request from "axios";
 import ConstApi from "@/api/const";
-import JsonViewer from 'vue-json-viewer';
+import { useUserStore } from "@/store";
-
+import OperatorApi from "@/api/operator";
-import UserAPI from "@/api/user";
-import { UserForm } from "@/api/user/model";
-
 const router = useRouter();
+const formRef = ref(ElForm); // 用户表单
 const loading = ref(false); //  加载状态
 const fileStatus = ref(false); //  文件状态
+const codeHtml = ref(""); //  文件信息
 
-// JSON渲染
+// 上传组件
-const props = withDefaults(defineProps<{
+const uploadRef = ref<UploadInstance>();
-    type?: string
-    code: string
-}>(), {
-    type: "json",
-    code: `<el-upload
-    v-model:file-list="fileList"
-    class="upload-demo"
-    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-    multiple
-    :on-preview="handlePreview"
-    :on-remove="handleRemove"
-    :before-remove="beforeRemove"
-    :limit="3"
-    :on-exceed="handleExceed"
-  >
-    <el-button type="primary">Click to upload</el-button>
-    <template #tip>
-      <div class="el-upload__tip">
-        jpg/png files with a size less than 500KB.
-      </div>
-  </el-upload>
-`
-})
-
-watch(() => props.code, () => {
-  nextTick(() => {
-    Prism.highlightAll()
-  })
-})
-
-const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
 
 // 用户表单数据
-const formData = reactive<UserForm>({
+const formData = reactive({
   status: 1,
 });
 
+const userStore = useUserStore();
+
 // 基础数据列表
 let listOpt = reactive({
   operTypeList: [],
@@ -174,45 +144,35 @@ let listOpt = reactive({
 
 // 校验规则
 const rules = reactive({
-  username: [{ required: true, message: "不能为空", trigger: "blur" }],
+  operator_name: [{ required: true, message: "算子名称不能为空", trigger: "blur" }],
-  nickname: [{ required: true, message: "不能为空", trigger: "blur" }],
+  oper_main_type: [{ required: true, message: "算子类型不能为空", trigger: "blur" }],
-  deptId: [{ required: true, message: "不能为空", trigger: "blur" }],
+  oper_sub_type: [{ required: true, message: "算子类型不能为空", trigger: "blur" }],
-  roleIds: [{ required: true, message: "不能为空", trigger: "blur" }],
+  operator_desc: [{ required: true, message: "算子说明不能为空", trigger: "blur" }],
-  email: [
+  parameters: [{ required: true, message: "算子文件不能为空", trigger: "blur" }],
-    {
-      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-      message: "请输入正确的邮箱地址",
-      trigger: "blur",
-    },
-  ],
-  mobile: [
-    {
-      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-      message: "请输入正确的手机号码",
-      trigger: "blur",
-    },
-  ],
 });
 
-const list = [
+// 主动验证
-  {
+function handleChangeRules(){
-    csmc: "图像分类算子名称",
+  formRef.value.validateField('oper_main_type');
-    csms: "进行19种类型的图像分类模型",
+  formRef.value.validateField('oper_sub_type');
-  },
+}
-  {
-    csmc: "目标检测算子名称",
-    csms: "人员检测的模型",
-  },
-];
 
 /** 表单提交 */
 const handleSubmit = useThrottleFn(() => {
-  loading.value = true;
+  formRef.value.validate((valid: any) => {
-  setTimeout(() => {
+    if (valid) {
-    ElMessage.success("保存成功");
+      loading.value = true;
-    loading.value = false;
+      formData.user_id = userStore.user?.id;
-    closeBack();
+      formData.create_time = new Date();
-  }, 1000);
+      OperatorApi.add(formData).then((res) => {
+        if (res.data.code == 0) {
+          ElMessage.success("保存成功");
+          loading.value = false;
+          closeBack();
+        }
+      });
+    }
+  });
 }, 3000);
 
 /** 返回默认页面 */
@@ -224,7 +184,7 @@ function closeBack() {
 function handleChange() {
   listOpt.operTypeList.forEach((item) => {
     if (item.oper_main_type == formData.oper_main_type) {
-      listOpt.operSubTypeList.value = item.oper_sub_type_list;
+      listOpt.operSubTypeList = item.oper_sub_type_list;
     }
   });
 }
@@ -242,11 +202,35 @@ function handleFileChange(file) {
     return;
   }
   uploadFile(file).then((res) => {
-    props.code = res;
+    if (isJSON(res)) {
-    fileStatus.value = true;
+      let jsonStr = JSON.stringify(res);
+      formData.parameters = jsonStr;
+      formRef.value.validateField('parameters');
+      let json = JSON.parse(jsonStr);
+      codeHtml.value = highlightJSON(json);
+      fileStatus.value = true;
+    }
   });
 }
 
+/** 解析json */
+function isJSON(str) {
+  try {
+    // 尝试解析输入的字符串
+    JSON.parse(str);
+    ElMessage.success("JSON文件解析成功");
+    return true;
+    // 成功解析
+  } catch (error) {
+    // 解析失败
+    ElMessage.error("JSON文件解析失败");
+    uploadRef.value.clearFiles();
+    fileStatus.value = false;
+    formData.parameters = "";
+    return false;
+  }
+}
+
 // 文件读取
 function uploadFile(file) {
   return new Promise(function (resolve, reject) {
@@ -262,16 +246,45 @@ function uploadFile(file) {
 
 // 文件删除
 function handleFileRemove() {
-  props.code = "";
+  formData.parameters = "";
+  codeHtml.value = "<p></p>";
   fileStatus.value = false;
 }
 
+// 超出限制，清空文件列表
+function handleFileExceed() {
+  uploadRef.value.clearFiles();
+  ElMessage.warning("已清空文件列表,请重新上传！");
+  handleFileRemove();
+}
+
+// 核心算法
+function highlightJSON(json) {
+  // 匹配key
+  let keyReg = new RegExp('"(.*)"(?=:)', "g");
+  // 匹配value
+  let valueReg = new RegExp('(?<=: )("(.*)"|\\d+)', "g");
+  if (typeof json === "object" && json !== null) {
+    json = JSON.stringify(json, this, 5);
+  }
+  // 颜色替换
+  let res = json
+    .replace(keyReg, (match) => {
+      return `<span class="green">${match}</span>`;
+    })
+    .replace(valueReg, (match) => {
+      if (/\d/.test(match)) {
+        return `<span class="blue">${match}</span>`;
+      }
+      return `<span class="black">${match}</span>`;
+    });
+  return res;
+}
+
 // 初始化选项列表
 const initData = () => {
-  request.all(ConstApi.operMainType()).then((res) => {
+  ConstApi.operMainType().then((res) => {
-    if (res.code == 200) {
+    listOpt.operTypeList = res.data.data.oper_main_type_list || [];
-      listOpt.operTypeList.value = res.data.data.oper_main_type_list;
-    }
   });
 };
 
@@ -308,13 +321,20 @@ onMounted(() => {
   }
 }
 </style>
-<style lang="scss">
+<style lang="scss" scope>
-pre {
+#codeHtml {
-	span {
+  font-size: 16px;
-	    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  color: #e36209;
-	}
+  font-family: "Courier New", Courier, monospace;
-	code {
+  background: #f5f5f5;
-	    font-size: 16px !important;
+  .green {
-	}
+    color: #22863a;
+  }
+  .blue {
+    color: #005cc5;
+  }
+  .black {
+    color: #032f62;
+  }
 }
-</style>
+</style>

src/views/manage/calculate/index.vue

@@ -136,8 +136,8 @@ function handleDelete(id?: number) {
 }
 
 /** 查看算子 */
-function handleDetail(id?: number) {
+function handleDetail(operator_id?: number) {
-  router.replace({ path: "/operatorLibrary/calculateView?id="+id });
+  router.replace({path:"/operatorLibrary/calculateDetail",query:{id:operator_id}})
 }
 
 /** 新增算子 */

src/views/manage/calculate/view.vue

@@ -7,52 +7,51 @@
       <el-row>
         <el-col :lg="12" :xs="24">
           <el-form
-            ref="userFormRef"
+            ref="formRef"
-            :model="formData"
             v-loading="loading"
             label-width="100px"
             size="small"
           >
-            <el-form-item label="算子名称" prop="username"> 目标分类模型 </el-form-item>
+            <el-form-item label="算子名称">{{dataInfo.operator_name}}</el-form-item>
-            <!-- <el-form-item label="算子版本" prop="nickname">
+            <el-form-item label="算子主类型">
-              <el-tag type="primary" effect="plain">V1.22.1</el-tag>
+              {{dataInfo.oper_main_type_name}}</el-form-item
+            >
+            <el-form-item label="算子子类型">
+              {{dataInfo.oper_sub_type_name}}</el-form-item
+            >
+            <el-form-item label="算子说明">
+              <el-input
+                v-model="dataInfo.operator_desc"
+                :disabled="true"
+                placeholder="请输入数据集名称"
+                :rows="3"
+                type="textarea"
+              />
+            </el-form-item>
+            <el-form-item label="创建人">
+              {{dataInfo.user_name}}</el-form-item
+            >
+            <el-form-item label="创建时间">
+              {{dataInfo.create_time}}</el-form-item
+            >
+            <el-form-item label="算子参数">
+              <el-input
+                v-model="dataInfo.parametersJson"
+                :disabled="true"
+                placeholder="请输入算子参数"
+                :rows="10"
+                type="textarea"
+              />
+            </el-form-item>
+            <!-- <el-form-item label="输出参数" prop="nickname33">
+              <el-input
+                v-model="dataInfo.usernamedd3"
+                :disabled="true"
+                placeholder="请输入数据集名称"
+                :rows="3"
+                type="textarea"
+              />
             </el-form-item> -->
-            <el-form-item label="算子主类型" prop="nickname33">
-              前处理/缩放算子</el-form-item
-            >
-            <el-form-item label="算子子类型" prop="nickname33">
-              缩放算子</el-form-item
-            >
-            <el-form-item label="创建时间" prop="nickname33">
-              2024-06-24 22:28:12</el-form-item
-            >
-            <el-form-item label="算子说明" prop="nickname33">
-              <el-input
-                v-model="formData.usernamedd1"
-                :disabled="true"
-                placeholder="请输入数据集名称"
-                :rows="3"
-                type="textarea"
-              />
-            </el-form-item>
-            <el-form-item label="输入参数" prop="nickname33">
-              <el-input
-                v-model="formData.usernamedd2"
-                :disabled="true"
-                placeholder="请输入数据集名称"
-                :rows="3"
-                type="textarea"
-              />
-            </el-form-item>
-            <el-form-item label="输出参数" prop="nickname33">
-              <el-input
-                v-model="formData.usernamedd3"
-                :disabled="true"
-                placeholder="请输入数据集名称"
-                :rows="3"
-                type="textarea"
-              />
-            </el-form-item>
           </el-form>
         </el-col>
         <el-col :lg="12" :xs="24"> </el-col>
@@ -65,96 +64,33 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
+import OperatorApi from '@/api/operator'
-  name: "User",
-  inheritAttrs: false,
-});
-
-import UserAPI from "@/api/user";
-import { UserForm } from "@/api/user/model";
 
+const route =useRoute()
 const router = useRouter();
 const loading = ref(false); //  加载状态
-
+// 算子表单数据
-const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
+const dataInfo = ref({});
-
-// 用户表单数据
-const formData = reactive<UserForm>({
-  status: 1,
-  usernamedd1:"算算子说明算子说明算子说明算子说明算子说明算子说明算子说明算子说明子说明",
-  usernamedd2:"输入参数输入参数",
-  usernamedd3:"输出参数输出参数输出参数输出参数",
-});
-
-// 校验规则
-const rules = reactive({
-  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
-  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-  deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-  roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
-  email: [
-    {
-      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-      message: "请输入正确的邮箱地址",
-      trigger: "blur",
-    },
-  ],
-  mobile: [
-    {
-      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-      message: "请输入正确的手机号码",
-      trigger: "blur",
-    },
-  ],
-});
-
-const list = [
-  {
-    csmc: "10.0.8.12",
-    csms: "异腾310",
-    csmc1: "Atlas 2000 DK A2",
-    csmc2: "PCIE-AI-NPU",
-    csmc3: "华为",
-    csmc4: "1.2",
-    csmc5: "已连接",
-  },
-  {
-    csmc: "192.168.1.44",
-    csms: "思源220",
-    csmc1: "Atlas 2000 DK A2",
-    csmc2: "PCIE-AI-NPU",
-    csmc3: "华为",
-    csmc4: "1.2",
-    csmc5: "已连接",
-  },
-  {
-    csmc: "192.168.1.66",
-    csms: "RTX4090",
-    csmc1: "Atlas 2000 DK A2",
-    csmc2: "PCIE-AI-NPU",
-    csmc3: "华为",
-    csmc4: "1.2",
-    csmc5: "已连接",
-  },
-];
-
-/** 表单提交 */
-const handleSubmit = useThrottleFn(() => {
-  loading.value = true;
-  setTimeout(() => {
-    ElMessage.success("修改用户成功");
-    loading.value = false;
-    closeBack();
-  }, 1000);
-}, 3000);
 
 /** 返回默认页面 */
 function closeBack() {
     router.replace({ path: "/operatorLibrary/calculate" });
 }
 
+/** 初始化数据 */
+function initData(){
+  let id=route.query.id;
+  loading.value = true;
+  OperatorApi.findOne(id).then(res =>{
+    //JSON转换
+    res.data.data.parametersJson = JSON.stringify(res.data.data.parameters);
+    dataInfo.value = res.data.data;
+    loading.value = false;
+  });
+}
+
 onMounted(() => {
-  //handleQuery();
+  initData();
 });
 </script>
 <style scoped lang='scss'>