From 612593eb281c3c0a72d66ef6473d6a4bc8a865e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E7=8E=89=E7=90=A6?=
 <7507756+jiang_yuqi@user.noreply.gitee.com>
Date: Thu, 11 Jul 2024 01:27:21 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=97=E5=AD=90=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/menu/index.ts                |   4 +-
 src/views/manage/calculate/edit.vue  | 216 +++++++++++++++------------
 src/views/manage/calculate/index.vue |   4 +-
 src/views/manage/calculate/view.vue  | 178 +++++++---------------
 4 files changed, 179 insertions(+), 223 deletions(-)

diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
index d77aa8f..b9e0f7a 100644
--- a/src/api/menu/index.ts
+++ b/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,
diff --git a/src/views/manage/calculate/edit.vue b/src/views/manage/calculate/edit.vue
index fb169d3..8babae1 100644
--- a/src/views/manage/calculate/edit.vue
+++ b/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="文件预览">
-              <pre class="line-numbers"><code :class="`language-${type}`">{{code}}</code></pre>
+            <el-form-item label="文件预览" v-if="fileStatus">
+              <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 UserAPI from "@/api/user";
-import { UserForm } from "@/api/user/model";
-
+import { useUserStore } from "@/store";
+import OperatorApi from "@/api/operator";
 const router = useRouter();
+const formRef = ref(ElForm); // 用户表单
 const loading = ref(false); //  加载状态
 const fileStatus = ref(false); //  文件状态
+const codeHtml = ref(""); //  文件信息
 
-// JSON渲染
-const props = withDefaults(defineProps<{
-    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 uploadRef = ref<UploadInstance>();
 
 // 用户表单数据
-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" }],
-  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",
-    },
-  ],
+  operator_name: [{ required: true, message: "算子名称不能为空", trigger: "blur" }],
+  oper_main_type: [{ required: true, message: "算子类型不能为空", trigger: "blur" }],
+  oper_sub_type: [{ required: true, message: "算子类型不能为空", trigger: "blur" }],
+  operator_desc: [{ required: true, message: "算子说明不能为空", trigger: "blur" }],
+  parameters: [{ required: true, message: "算子文件不能为空", trigger: "blur" }],
 });
 
-const list = [
-  {
-    csmc: "图像分类算子名称",
-    csms: "进行19种类型的图像分类模型",
-  },
-  {
-    csmc: "目标检测算子名称",
-    csms: "人员检测的模型",
-  },
-];
+// 主动验证
+function handleChangeRules(){
+  formRef.value.validateField('oper_main_type');
+  formRef.value.validateField('oper_sub_type');
+}
 
 /** 表单提交 */
 const handleSubmit = useThrottleFn(() => {
-  loading.value = true;
-  setTimeout(() => {
-    ElMessage.success("保存成功");
-    loading.value = false;
-    closeBack();
-  }, 1000);
+  formRef.value.validate((valid: any) => {
+    if (valid) {
+      loading.value = true;
+      formData.user_id = userStore.user?.id;
+      formData.create_time = new Date();
+      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;
-    fileStatus.value = true;
+    if (isJSON(res)) {
+      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) => {
-    if (res.code == 200) {
-      listOpt.operTypeList.value = res.data.data.oper_main_type_list;
-    }
+  ConstApi.operMainType().then((res) => {
+    listOpt.operTypeList = res.data.data.oper_main_type_list || [];
   });
 };
 
@@ -308,13 +321,20 @@ onMounted(() => {
   }
 }
 </style>
-<style lang="scss">
-pre {
-	span {
-	    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-	}
-	code {
-	    font-size: 16px !important;
-	}
+<style lang="scss" scope>
+#codeHtml {
+  font-size: 16px;
+  color: #e36209;
+  font-family: "Courier New", Courier, monospace;
+  background: #f5f5f5;
+  .green {
+    color: #22863a;
+  }
+  .blue {
+    color: #005cc5;
+  }
+  .black {
+    color: #032f62;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/manage/calculate/index.vue b/src/views/manage/calculate/index.vue
index e3aa822..07b0c6b 100644
--- a/src/views/manage/calculate/index.vue
+++ b/src/views/manage/calculate/index.vue
@@ -136,8 +136,8 @@ function handleDelete(id?: number) {
 }
 
 /** 查看算子 */
-function handleDetail(id?: number) {
-  router.replace({ path: "/operatorLibrary/calculateView?id="+id });
+function handleDetail(operator_id?: number) {
+  router.replace({path:"/operatorLibrary/calculateDetail",query:{id:operator_id}})
 }
 
 /** 新增算子 */
diff --git a/src/views/manage/calculate/view.vue b/src/views/manage/calculate/view.vue
index 7268245..3fbb2e7 100644
--- a/src/views/manage/calculate/view.vue
+++ b/src/views/manage/calculate/view.vue
@@ -7,52 +7,51 @@
       <el-row>
         <el-col :lg="12" :xs="24">
           <el-form
-            ref="userFormRef"
-            :model="formData"
+            ref="formRef"
             v-loading="loading"
             label-width="100px"
             size="small"
           >
-            <el-form-item label="算子名称" prop="username"> 目标分类模型 </el-form-item>
-            <!-- <el-form-item label="算子版本" prop="nickname">
-              <el-tag type="primary" effect="plain">V1.22.1</el-tag>
+            <el-form-item label="算子名称">{{dataInfo.operator_name}}</el-form-item>
+            <el-form-item label="算子主类型">
+              {{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({
-  name: "User",
-  inheritAttrs: false,
-});
-
-import UserAPI from "@/api/user";
-import { UserForm } from "@/api/user/model";
+import OperatorApi from '@/api/operator'
 
+const route =useRoute()
 const router = useRouter();
 const loading = ref(false); //  加载状态
-
-const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
-
-// 用户表单数据
-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);
+// 算子表单数据
+const dataInfo = ref({});
 
 /** 返回默认页面 */
 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'>