style把不用的consolelgo注释掉，pagesize不写死改传参，上传加loading，算法描述部分全部接后端数据

.env.development

@@ -5,7 +5,7 @@ VITE_PORT = 8092
 VITE_PUBLIC_PATH = /
 
 # 是否开启mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # 网站前缀
 VITE_BASE_URL = /

src/api/algo/algo.ts

@@ -1,8 +1,8 @@
 import { http } from '@/utils/http/axios';
 
-export function getAlgoInfo(page: number) {
+export function getAlgoInfo(page: number, pageSize: number) {
   return http.request({
-    url: '/cameraAlgo/getList?pageNumber=' + page + '&pageSize=12',
+    url: '/cameraAlgo/getList?pageNumber=' + page + '&pageSize=' + pageSize,
     method: 'get',
   });
 }

src/views/cameras/algo-management/algoManagement.vue

@@ -44,29 +44,9 @@
             <el-scrollbar height="100%">
               <div v-if="currentRow?.name == ''" class="details_title">请在左侧列表中选择算法</div>
               <div v-else class="details_title">{{ currentRow?.name }}检测算法展示</div>
-              <div class="textbox">
-                <div class="item_title">算法描述：</div>
-                <div class="item_details"
-                  >飞鸟检测算法用于检测生产现场是否有飞鸟出没，实时报警，安全生产。"据台湾中时新闻网11日报道，台湾防务部门称，解放军山东舰航母编队11日沿所谓“海峡中线”以西，由北向南穿越台湾海峡。台军声称“绵密掌握海空域动态”，检派适切兵力“监控应处”云云。",</div
-                >
-              </div>
-              <div class="textbox">
-                <div class="item_title">&nbsp;&nbsp;&nbsp;&nbsp;精确率：</div>
-                <div class="item_details">90%</div>
-              </div>
-              <div class="textbox">
-                <div class="item_title">&nbsp;&nbsp;&nbsp;&nbsp;找回率：</div>
-                <div class="item_details">90%</div>
-              </div>
-              <div class="textbox">
-                <div class="item_title">适用场景：</div>
-                <div class="item_details">室外作业、开阔作业场景。</div>
-              </div>
-              <div class="textbox">
-                <div class="item_title">电子围栏：</div>
-                <div class="item_details"
-                  >建议做全局检测，可选择性按需设置电子围栏。从战略高度和长远角度擘画新时代中越关系蓝图，推动中越关系确立新定位、迈入新阶段。我先后会见了赴华访问或出席会议的国家主席武文赏、政府总理范明政、越共中央书记处常务书记张氏梅同志</div
-                >
+              <div v-for="item in arrRemark" :key="item" class="textbox">
+                <div class="item_title">{{ item }}</div>
+                <!-- <div class="item_details">{{ currentRow?.remark }}</div> -->
               </div>
             </el-scrollbar>
           </div>
@@ -78,7 +58,7 @@
         <div class="right_bottom">
           <div class="details_title" style="margin-bottom: 16px">报警推送编辑</div>
           <el-form :model="alarmConfig" size="default" :rules="rules" ref="ruleFormRef">
-            <el-form-item label="语句编辑：" prop="pushLinkPrompt">
+            <el-form-item label="语句编辑：" prop="pushStatement">
               <div class="pushStatement">
                 <div class="remark">时间：（示例：2023.10.23 10:55:28）</div>
                 <div class="remark">地点：（示例：C919总装车间150A工位）</div>
@@ -90,7 +70,7 @@
               </div>
             </el-form-item>
 
-            <el-form-item label="链接提示：" prop="pushStatement">
+            <el-form-item label="链接提示：" prop="pushLinkPrompt">
               <el-input
                 v-model="alarmConfig.pushLinkPrompt"
                 style="width: 100%"
@@ -98,7 +78,9 @@
               />
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="onSubmit">保&nbsp;&nbsp;存</el-button>
+              <el-button type="primary" :loading="isSending" @click="onSubmit"
+                >保&nbsp;&nbsp;存</el-button
+              >
             </el-form-item>
           </el-form>
         </div>
@@ -122,6 +104,7 @@
     algoList,
     getAlgoDatas,
     page,
+    pageSize,
     keyWord,
     searchAlgoDatas,
     algoId,
@@ -132,6 +115,7 @@
   //将后端拉到的数据存到algoListUse数组中进行使用
   //刷新时从后端拉一次算法数组
   onMounted(() => {
+    pageSize.value = 12;
     getAlgoDatas();
   });
 
@@ -168,9 +152,13 @@
     pushStatement: string;
   }
 
+  const arrRemark = ref<string[]>([]);
+
   const handleRowClick = (val: User | undefined) => {
-    console.log('xxxxxxxxxx', currentRow.value);
+    // console.log('xxxxxxxxxx', currentRow.value);
     currentRow.value = val;
+    arrRemark.value = currentRow.value.remark.split('\r\n');
+    // console.log('arrRemark', arrRemark.value);
   };
 
   const searchKey = ref('');
@@ -191,17 +179,22 @@
 
   const ruleFormRef = ref<FormInstance>();
 
+  const isSending = ref(false);
+
   const onSubmit = async () => {
     if (!ruleFormRef.value) console.log('error submit!');
     await ruleFormRef.value?.validate((valid, fields) => {
       if (valid) {
+        isSending.value = true;
         algoId.value = currentRow.value.id;
         pushLinkPrompt.value = alarmConfig.value.pushLinkPrompt;
         pushStatement.value = alarmConfig.value.pushStatement;
-        console.log('algoId', algoId.value);
-        console.log('pushStatement', pushStatement.value);
-        console.log('pushLinkPrompt', pushLinkPrompt.value);
-        modifyAlgoDatas();
+        // console.log('algoId', algoId.value);
+        // console.log('pushStatement', pushStatement.value);
+        // console.log('pushLinkPrompt', pushLinkPrompt.value);
+        modifyAlgoDatas().then(() => {
+          isSending.value = false;
+        });
       } else {
         console.log('error submit!', fields);
       }
@@ -274,7 +267,7 @@
             flex-direction: row;
             .item_title {
               position: relative;
-              width: 20.2%;
+              width: 100%;
               font-size: 14px;
               font-weight: 500;
               color: rgba(0, 0, 0, 0.85);

src/views/cameras/algo-management/use-algoData.ts

@@ -5,6 +5,7 @@ import { ElMessage } from 'element-plus';
 export function useAlgo() {
   const algoList = ref([]);
   const page = ref(1);
+  const pageSize = ref(10);
   const keyWord = ref('');
 
   const algoId = ref(0);
@@ -12,7 +13,7 @@ export function useAlgo() {
   const pushStatement = ref('');
 
   const getAlgoDatas = () => {
-    return getAlgoInfo(page.value).then((res) => {
+    return getAlgoInfo(page.value, pageSize.value).then((res) => {
       algoList.value = res.records;
     });
   };
@@ -27,18 +28,19 @@ export function useAlgo() {
     return algoInfoModify(algoId.value, pushLinkPrompt.value, pushStatement.value)
       .then(function () {
         ElMessage({
-          message: '表格数据保存成功',
+          message: '算法数据保存成功',
           type: 'success',
         });
       })
       .catch(function () {
-        ElMessage.error('表格数据保存失败');
+        ElMessage.error('算法数据保存失败');
       });
   };
 
   return {
     algoList,
     page,
+    pageSize,
     keyWord,
     getAlgoDatas,
     searchAlgoDatas,