feat把算法管理写在account里面

package.json

@@ -109,6 +109,7 @@
     "ts-node": "10.9.1",
     "typescript": "4.7.4",
     "vite": "3.2.7",
+    "video.js": "^8.6.1",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-html": "3.2.0",
     "vite-plugin-mock": "2.9.6",

src/api/algo/algo.ts

@@ -2,7 +2,7 @@ import { http } from '@/utils/http/axios';
 
 export function getAlgoInfo() {
   return http.request({
-    url: '/algo/getAlgoList',
+    url: '/algo/getAlgoList/getList?pageNumber=1&pageSize=10',
     method: 'get',
   });
 }

src/api/dashboard/algoManagement/algoManagement.vue

@@ -0,0 +1,69 @@
+<template>
+  <PageWrapper>
+    <el-card shadow="never" size="small" class="proCard tabsCard">
+      <div class="background">
+        <video :src="address" controls autoplay muted style="width: 100%; height: 100%"> </video>
+      </div>
+    </el-card>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, onUnmounted } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import videojs from 'video.js';
+  import 'video.js/dist/video-js.css';
+  import useAlgo from './use-algoData';
+
+  //调用后端数据
+  const algoDatas = useAlgo();
+  const { algoList, getAlgoDatas, algoId, pushLinkPrompt, pushStatement, modifyAlgoDatas } =
+    algoDatas;
+  //将后端拉到的数据存到algoListUse数组中进行使用
+  const algoListUse = ref<any[]>([]);
+  //刷新时从后端拉一次算法数组
+  onMounted(() => {
+    getAlgoDatas().then(() => {
+      console.log('algoList', algoList.value);
+      algoListUse.value = algoList.value;
+    });
+  });
+  //用于存储列表中选定的算法的信息
+  const currentRow = ref({
+    algoCode: '',
+    name: '',
+    remark: '',
+    url: '',
+    id: 0,
+    pushLinkPrompt: '',
+    pushStatement: '',
+  });
+
+  interface User {
+    algoCode: string;
+    name: string;
+    remark: string;
+    url: string;
+    id: number;
+    pushLinkPrompt: string;
+    pushStatement: string;
+  }
+
+  const handleCurrentChange = (val: User | undefined) => {
+    currentRow.value = val;
+    console.log('xxxxxxxxxx', currentRow.value);
+  };
+
+  const saveUpdate = () => {
+    algoId.value = currentRow.value.id;
+    modifyAlgoDatas();
+  };
+
+  const address = ref('https://www.w3schools.com/html/movie.mp4');
+</script>
+<style lang="scss" scoped>
+  .background {
+    position: relative;
+    height: 500px;
+    background-color: pink;
+  }
+</style>

src/views/setting/account/account.vue

@@ -1,43 +1,84 @@
 <template>
   <PageWrapper>
-    <el-card shadow="never" size="small" class="proCard tabsCard">
-      <el-tabs v-model="activeName">
-        <el-tab-pane name="basic" label="基本设置">
-          <BasicSetting />
-        </el-tab-pane>
-        <el-tab-pane name="safety" label="安全设置"><SafetySetting /></el-tab-pane>
-      </el-tabs>
-    </el-card>
+    <div class="background">
+      <div class="left">
+        <el-input
+          v-model="searchKey"
+          placeholder="请输入算法信息搜索"
+          style="margin-top: 24px; height: 32px"
+          :suffix-icon="Search"
+        />
+      </div>
+      <div class="right">
+        <div class="right_top"></div>
+      </div>
+      <!-- <video :src="address" controls autoplay muted style="width: 100%; height: 100%"> </video> -->
+    </div>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { onMounted, ref, onUnmounted } from 'vue';
   import { PageWrapper } from '@/components/Page';
-  import BasicSetting from './BasicSetting.vue';
-  import SafetySetting from './SafetySetting.vue';
-  const activeName = ref('basic');
-</script>
-<style lang="scss" scoped>
-  .thing-cell {
-    margin: 0 -16px 10px;
-    padding: 5px 16px;
+  import videojs from 'video.js';
+  import 'video.js/dist/video-js.css';
+  import useAlgo from '@/api/dashboard/algoManagement/use-algoData';
+  import { Search } from '@element-plus/icons-vue';
 
-    &:hover {
-      background: #f3f3f3;
-      cursor: pointer;
-    }
-  }
+  //调用后端数据
+  const algoDatas = useAlgo();
+  const { algoList, getAlgoDatas, algoId, pushLinkPrompt, pushStatement, modifyAlgoDatas } =
+    algoDatas;
+  //将后端拉到的数据存到algoListUse数组中进行使用
+  const algoListUse = ref<any[]>([]);
+  //刷新时从后端拉一次算法数组
+  onMounted(() => {
+    getAlgoDatas().then(() => {
+      console.log('algoList', algoList.value);
+      algoListUse.value = algoList.value;
+    });
+  });
 
-  .thing-cell-on {
-    background: #f0faff;
-    color: #2d8cf0;
+  const address = ref('https://www.w3schools.com/html/movie.mp4');
 
-    :deep(.n-thing-main .n-thing-header .n-thing-header__title) {
-      color: #2d8cf0;
+  const searchKey = ref('');
+</script>
+<style lang="scss" scoped>
+  .background {
+    position: relative;
+    height: 888px;
+    background-color: white;
+    display: flex;
+    flex-direction: row;
+    .left {
+      position: relative;
+      height: 100%;
+      width: 31%;
+      padding-left: 1.66%;
+      padding-right: 1.33%;
+      // background-color: green;
+      border-right: #dddddd 1px solid;
+      display: flex;
+      flex-direction: column;
+      .content {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        background-color: red;
+      }
     }
-
-    &:hover {
-      background: #f0faff;
+    .right {
+      position: relative;
+      height: 100%;
+      width: 69%;
+      display: flex;
+      flex-direction: column;
+      // background-color: yellow;
+      .right_top {
+        position: relative;
+        height: 364px;
+        width: 100%;
+        background-color: rebeccapurple;
+      }
     }
   }
 </style>

src/views/setting/account/accountBackup .vue

@@ -0,0 +1,43 @@
+<template>
+  <PageWrapper>
+    <el-card shadow="never" size="small" class="proCard tabsCard">
+      <el-tabs v-model="activeName">
+        <el-tab-pane name="basic" label="基本设置">
+          <BasicSetting />
+        </el-tab-pane>
+        <el-tab-pane name="safety" label="安全设置"><SafetySetting /></el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import BasicSetting from './BasicSetting.vue';
+  import SafetySetting from './SafetySetting.vue';
+  const activeName = ref('basic');
+</script>
+<style lang="scss" scoped>
+  .thing-cell {
+    margin: 0 -16px 10px;
+    padding: 5px 16px;
+
+    &:hover {
+      background: #f3f3f3;
+      cursor: pointer;
+    }
+  }
+
+  .thing-cell-on {
+    background: #f0faff;
+    color: #2d8cf0;
+
+    :deep(.n-thing-main .n-thing-header .n-thing-header__title) {
+      color: #2d8cf0;
+    }
+
+    &:hover {
+      background: #f0faff;
+    }
+  }
+</style>