From 9826b3285a10746cd1c9c74a86377c3a90dadb07 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: Wed, 10 Jul 2024 02:00:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/manage/calculate/edit.vue       | 229 ++++++++++++++++------
 src/views/manage/calculate/index.vue      | 168 +++++-----------
 src/views/manage/calculateParam/index.vue |   6 +
 3 files changed, 229 insertions(+), 174 deletions(-)

diff --git a/src/views/manage/calculate/edit.vue b/src/views/manage/calculate/edit.vue
index 11f0c8c..fb169d3 100644
--- a/src/views/manage/calculate/edit.vue
+++ b/src/views/manage/calculate/edit.vue
@@ -3,7 +3,9 @@
   <div class="app-container model-detail">
     <!-- 用户新增/编辑表单 -->
     <el-card>
-      <template #header><svg-icon icon-class="pause" style="width:20px;height:20px;" /> 算子基本信息 </template>
+      <template #header
+        ><svg-icon icon-class="pause" style="width: 20px; height: 20px" /> 算子基本信息
+      </template>
       <el-row>
         <el-col :lg="12" :xs="24">
           <el-form
@@ -13,71 +15,79 @@
             v-loading="loading"
             label-width="80px"
           >
-            <el-form-item label="算子名称" prop="username">
-              <el-input
-                v-model="formData.username"
-                :readonly="!!formData.id"
-                placeholder="请输入算子名称"
-              />
+            <el-form-item label="算子名称" prop="operator_name">
+              <el-input v-model="formData.operator_name" placeholder="请输入算子名称" />
             </el-form-item>
-            <el-form-item label="算子版本" prop="nickname">
-              <el-input v-model="formData.nickname" placeholder="请输入算子版本" />
-            </el-form-item>
-            <el-form-item label="算子类型" prop="roleIds">
-              <el-row style="width:100%">
+            <el-form-item label="算子类型" prop="oper_sub_type">
+              <el-row style="width: 100%">
                 <el-col :span="12">
                   <el-select
-                    v-model="formData.roleIds"
-                    placeholder="请选择算子类型"
+                    v-model="formData.oper_main_type"
+                    placeholder="请选择算子主类型"
+                    size="large"
                     style="width: 100%"
+                    @change="handleChange"
                   >
-                    <el-option label="前置处理" value="1" />
+                    <el-option
+                      v-for="item in listOpt.operTypeList"
+                      :key="item.oper_main_type"
+                      :label="item.oper_main_type_name"
+                      :value="item.oper_main_type"
+                    />
                   </el-select>
                 </el-col>
                 <el-col :span="12">
                   <el-select
-                    v-model="formData.roleIds2"
-                    placeholder="请选择算子类型"
+                    v-model="formData.oper_sub_type"
+                    placeholder="请选择算子子类型"
+                    size="large"
                     style="width: 100%"
                   >
-                  <el-option label="缩放算子" value="0" />
-                    <el-option label="图像分类" value="1" />
-                    <el-option label="目标检测" value="2" />
+                    <el-option
+                      v-for="item in listOpt.operTypeList"
+                      :key="item.oper_sub_type"
+                      :label="item.oper_sub_type_name"
+                      :value="item.oper_sub_type"
+                    />
                   </el-select>
                 </el-col>
               </el-row>
             </el-form-item>
-            <el-form-item label="算子说明" prop="mobile">
+            <el-form-item label="算子说明" prop="operator_desc">
               <el-input
-                v-model="formData.mobile"
+                v-model="formData.operator_desc"
                 :rows="2"
                 type="textarea"
                 placeholder="请输入算子说明"
-                maxlength="11"
+                maxlength="1024"
               />
             </el-form-item>
-            <el-form-item label="算子文件" prop="email">
+            <el-form-item label="算子文件">
               <el-upload
-                v-model:file-list="fileList"
+                action=""
                 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"
+                ref="upload"
+                :on-change="handleFileChange"
+                :on-remove="handleFileRemove"
+                :auto-upload="false"
+                :limit="1"
+                accept="application/json"
               >
                 <el-button type="primary"
                   ><el-icon class="el-icon--upload"> <i-ep-upload-filled /> </el-icon
                   >选择文件</el-button
                 >
                 <template #tip>
-                  <div class="el-upload__tip">请上传大小不超过 <strong style="color: red">10M</strong>，格式为
-                      <strong style="color: red">json</strong> 的文件</div>
+                  <div class="el-upload__tip">
+                    请上传大小不超过 <strong style="color: red">10M</strong>，格式为
+                    <strong style="color: red">json</strong> 的文件
+                  </div>
                 </template>
               </el-upload>
             </el-form-item>
+            <el-form-item label="文件预览">
+              <pre class="line-numbers"><code :class="`language-${type}`">{{code}}</code></pre>
+            </el-form-item>
           </el-form>
         </el-col>
         <el-col :lg="12" :xs="24">
@@ -99,23 +109,55 @@
       </el-row>
     </el-card>
     <el-card class="card-footer">
-        <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
-        <el-button @click="closeBack"><i-ep-close />取 消</el-button>
+      <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
+      <el-button @click="closeBack"><i-ep-close />取 消</el-button>
     </el-card>
   </div>
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "User",
-  inheritAttrs: false,
-});
+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";
 
 const router = useRouter();
 const loading = ref(false); //  加载状态
+const fileStatus = ref(false); //  文件状态
+
+// 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[]>(); // 角色下拉数据源
 
@@ -124,6 +166,12 @@ const formData = reactive<UserForm>({
   status: 1,
 });
 
+// 基础数据列表
+let listOpt = reactive({
+  operTypeList: [],
+  operSubTypeList: [],
+});
+
 // 校验规则
 const rules = reactive({
   username: [{ required: true, message: "不能为空", trigger: "blur" }],
@@ -172,36 +220,101 @@ function closeBack() {
   router.replace({ path: "/operatorLibrary/calculate" });
 }
 
+/** 算子主类型改变 */
+function handleChange() {
+  listOpt.operTypeList.forEach((item) => {
+    if (item.oper_main_type == formData.oper_main_type) {
+      listOpt.operSubTypeList.value = item.oper_sub_type_list;
+    }
+  });
+}
+
+// 文件上传
+function handleFileChange(file) {
+  //先创建一个读文件的对象 FileReader
+  let reader = new FileReader();
+  //判断浏览器是否支持 FileReader
+  if (typeof FileReader === "undefined") {
+    this.$message({
+      type: "info",
+      message: "您的浏览器不支持文件读取。",
+    });
+    return;
+  }
+  uploadFile(file).then((res) => {
+    props.code = res;
+    fileStatus.value = true;
+  });
+}
+
+// 文件读取
+function uploadFile(file) {
+  return new Promise(function (resolve, reject) {
+    let reader = new FileReader();
+    reader.readAsArrayBuffer(file.raw);
+    reader.onload = function (e) {
+      var ints = new Uint8Array(e.target.result); //要使用读取的内容，所以将读取内容转化成Uint8Array
+      let snippets = new TextDecoder("UTF-8").decode(ints); //二进制缓存区内容转化成中文（即也就是读取到的内容）
+      resolve(snippets);
+    };
+  });
+}
+
+// 文件删除
+function handleFileRemove() {
+  props.code = "";
+  fileStatus.value = false;
+}
+
+// 初始化选项列表
+const initData = () => {
+  request.all(ConstApi.operMainType()).then((res) => {
+    if (res.code == 200) {
+      listOpt.operTypeList.value = res.data.data.oper_main_type_list;
+    }
+  });
+};
+
 onMounted(() => {
-  //handleQuery();
+  initData();
 });
 </script>
-<style scoped lang='scss'>
-.model-detail{
-    :deep(.el-card__header){
-        padding:8px 4px;
-        display: flex;
-        align-items: center
-    }    
+<style scoped lang="scss">
+.model-detail {
+  :deep(.el-card__header) {
+    padding: 8px 4px;
+    display: flex;
+    align-items: center;
+  }
 }
-.sp-file{
-    color:#29d;    
+.sp-file {
+  color: #29d;
 }
-.tb-base-info{
-    line-height: 30px;
+.tb-base-info {
+  line-height: 30px;
 }
-:deep(.svg-icon){
-    margin-right:8px;
+:deep(.svg-icon) {
+  margin-right: 8px;
 }
-.card-footer{
+.card-footer {
   position: fixed;
   width: calc(100% - 215px);
   bottom: 0px;
-  :deep(.el-card__body){
-    padding:10px;
-    .el-pagination{
+  :deep(.el-card__body) {
+    padding: 10px;
+    .el-pagination {
       justify-content: end;
     }
   }
 }
 </style>
+<style lang="scss">
+pre {
+	span {
+	    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+	}
+	code {
+	    font-size: 16px !important;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/src/views/manage/calculate/index.vue b/src/views/manage/calculate/index.vue
index ba36702..e3aa822 100644
--- a/src/views/manage/calculate/index.vue
+++ b/src/views/manage/calculate/index.vue
@@ -5,21 +5,15 @@
       <template #header>
         <div class="flex justify-between">
           <div>
-            <el-button type="primary" @click="openDialog('user-form')"
+            <el-button type="primary" @click="handleAdd()"
               ><i-ep-plus />添加算子</el-button
             >
-            <el-button
-              type="primary"
-              :disabled="removeIds.length === 0"
-              @click="handleDelete()"
-              ><i-ep-delete />算子例程下载</el-button
-            >
           </div>
           <div>
             <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-              <el-form-item label="算子名称" prop="keywords">
+              <el-form-item label="算子名称" prop="operator_name">
                 <el-input
-                  v-model="queryParams.keywords"
+                  v-model="queryParams.operator_name"
                   placeholder="请输入算子名称"
                   clearable
                   style="width: 200px"
@@ -42,27 +36,25 @@
 
       <el-table
         v-loading="loading"
-        :data="tableData"
+        :data="pageData"
         stripe
         @selection-change="handleSelectionChange"
       >
-        <el-table-column label="算子名称" align="left" prop="szmc" width="300" />
-        <el-table-column label="算子主类型" align="left" prop="szlx" width="180"/>
-        <el-table-column label="算子子类型" align="left" prop="szzlx" width="180" />
-        <!-- <el-table-column label="版本" width="180" align="left" prop="bb" />
-        <el-table-column label="适配硬件" width="280" align="left" prop="spyj" /> -->
-        <el-table-column label="算子说明" align="left" prop="spyj" />
-        <el-table-column label="创建时间" width="180" align="left" prop="hlcjsj" />
-        <el-table-column label="操作" fixed="right" width="220">
+        <el-table-column label="算子名称" align="left" prop="operator_name" width="300" />
+        <el-table-column label="算子主类型" align="left" prop="oper_main_type_name" width="180"/>
+        <el-table-column label="算子子类型" align="left" prop="oper_sub_type_name" width="180" />
+        <el-table-column label="算子说明" align="left" prop="operator_desc" />
+        <el-table-column label="创建时间" width="180" align="left" prop="create_time" />
+        <el-table-column label="操作" fixed="right" align="center" width="220">
           <template #default="scope">
             <el-button
               text
               type="primary"
               size="small"
-              @click="openDialogView('user-form', scope.row.id)"
+              @click="handleDetail(scope.row.operator_id)"
               ><i-ep-view />查看</el-button
             >
-            <el-button text type="primary" size="small" @click="handleDelete(scope.row)"
+            <el-button text type="primary" size="small" @click="handleDelete(scope.row.operator_id)"
               ><i-ep-delete />删除</el-button
             >
           </template>
@@ -72,8 +64,8 @@
       <pagination
         v-if="total > 0"
         v-model:total="total"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.page_num"
+        v-model:limit="queryParams.page_size"
         @pagination="handleQuery"
       />
     </el-card>
@@ -81,135 +73,79 @@
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: "calculateIndex",
-  inheritAttrs: false,
-});
-
-import { UserQuery } from "@/api/user/model";
-
-const queryFormRef = ref(ElForm); // 查询表单
+import OperatorApi from '@/api/operator'
 const router = useRouter();
 
 const loading = ref(false); //  加载状态
-const removeIds = ref([]); // 删除用户ID集合 用于批量删除
-const queryParams = reactive<UserQuery>({
-  pageNum: 1,
-  pageSize: 10,
+const queryFormRef = ref(ElForm); // 查询表单
+const queryParams = reactive({
+  page_num: 1,
+  page_size: 10,
+  order_type:null,
+  order_by:null,
+  operator_name:null,
+  oper_main_type:null
 });
-const dateTimeRange = ref("");
+
 const total = ref(0); // 数据总数
+const pageData = ref([]); // 用户分页数据
 
-watch(dateTimeRange, (newVal) => {
-  if (newVal) {
-    queryParams.startTime = newVal[0];
-    queryParams.endTime = newVal[1];
-  }
-});
-
-const tableData = [
-  {
-    szmc: "图像分类算子名称",
-    szlx: "前处理",
-    szzlx: "图像分类",
-    bb: "1.2",
-    spyj: "进行19种类型的图像分类模型",
-    hlcjsj: "2024-05-03",
-  },
-  {
-    szmc: "目标检测算子名称",
-    szlx: "前处理",
-    szzlx: "目标检测",
-    bb: "1.5",
-    spyj: "人员检测的模型",
-    hlcjsj: "2024-06-07",
-  },
-  {
-    szmc: "人脸识别算子名称",
-    szlx: "前处理",
-    szzlx: "人脸识别",
-    bb: "1.0.0",
-    spyj: "人脸识别",
-    hlcjsj: "2024-06-08",
-  },
-  {
-    szmc: "数据分析算子名称",
-    szlx: "后处理",
-    szzlx: "数据分析",
-    bb: "1.6.1",
-    spyj: "进行数据分离ETL工具",
-    hlcjsj: "2024-06-08",
-  },
-];
+const removeIds = ref([]); // 删除用户ID集合 用于批量删除
 
 /** 查询 */
 function handleQuery() {
   loading.value = true;
-  ElMessage.success("查询成功");
-  loading.value = false;
-  // UserAPI.getPage(queryParams)
-  //   .then((data) => {
-  //     console.log("handleQuery", data);
-  //     pageData.value = data.list;
-  //     total.value = data.total;
-  //   })
-  //   .finally(() => {
-  //     loading.value = false;
-  // });
+  OperatorApi.list(queryParams)
+    .then((res) => {
+      pageData.value = res.data.data.operator_list;
+      total.value = res.data.data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+  });
 }
 
 /** 重置查询 */
 function resetQuery() {
   queryFormRef.value.resetFields();
-  dateTimeRange.value = "";
   queryParams.pageNum = 1;
-  queryParams.deptId = undefined;
-  queryParams.startTime = undefined;
-  queryParams.endTime = undefined;
+  queryParams.order_type = null,
+  queryParams.order_by = null,
+  queryParams.operator_name = null,
+  queryParams.oper_main_type = null
   handleQuery();
 }
 
 /** 行选中 */
 function handleSelectionChange(selection: any) {
-  removeIds.value = selection.map((item: any) => item.id);
+  removeIds.value = selection.map((item: any) => item.operator_id);
 }
 
 /** 删除数据 */
-function handleDelete(row: { [key: string]: any }) {
+function handleDelete(id?: number) {
   ElMessageBox.confirm("确认删除算子?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   }).then(function () {
-    ElMessage.success("删除成功");
+    OperatorApi.deleteOperator(id).then((res) => {
+      ElMessage.success("删除成功");
+      resetQuery();
+    });
   });
 }
 
-/**
- * 打开弹窗
- *
- * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
- * @param id 用户ID
- */
-async function openDialog(type: string, id?: number) {
+/** 查看算子 */
+function handleDetail(id?: number) {
+  router.replace({ path: "/operatorLibrary/calculateView?id="+id });
+}
+
+/** 新增算子 */
+function handleAdd() {
   router.replace({ path: "/operatorLibrary/calculateEdit" });
 }
 
-async function openDialogView(type: string, id?: number) {
-  router.replace({ path: "/operatorLibrary/calculateView" });
-}
-
-/** 下载导入模板 */
-function downloadTemplate() {
-  ElMessage.success("下载模板成功");
-}
-
-/** 导出用户 */
-function handleExport() {
-  ElMessage.success("导出成功");
-}
-
 onMounted(() => {
-  //handleQuery();
+  handleQuery();
 });
 </script>
diff --git a/src/views/manage/calculateParam/index.vue b/src/views/manage/calculateParam/index.vue
index b2a175a..fa32c91 100644
--- a/src/views/manage/calculateParam/index.vue
+++ b/src/views/manage/calculateParam/index.vue
@@ -8,6 +8,12 @@
             <el-button type="primary" @click="openDialog('user-form')"
               ><i-ep-plus />添加算子程序</el-button
             >
+            <el-button
+              type="primary"
+              :disabled="removeIds.length === 0"
+              @click="handleDelete()"
+              ><i-ep-delete />算子例程下载</el-button
+            >
           </div>
           <div>
             <el-form ref="queryFormRef" :model="queryParams" :inline="true">