|
@@ -1,84 +1,43 @@
|
|
|
<template>
|
|
<template>
|
|
|
<PageWrapper>
|
|
<PageWrapper>
|
|
|
- <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>
|
|
|
|
|
|
|
+ <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>
|
|
</PageWrapper>
|
|
|
</template>
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
- import { onMounted, ref, onUnmounted } from 'vue';
|
|
|
|
|
|
|
+ import { ref } from 'vue';
|
|
|
import { PageWrapper } from '@/components/Page';
|
|
import { PageWrapper } from '@/components/Page';
|
|
|
- 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';
|
|
|
|
|
|
|
+ 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;
|
|
|
|
|
|
|
|
- //调用后端数据
|
|
|
|
|
- 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;
|
|
|
|
|
- });
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: #f3f3f3;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- const address = ref('https://www.w3schools.com/html/movie.mp4');
|
|
|
|
|
|
|
+ .thing-cell-on {
|
|
|
|
|
+ background: #f0faff;
|
|
|
|
|
+ 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;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ :deep(.n-thing-main .n-thing-header .n-thing-header__title) {
|
|
|
|
|
+ color: #2d8cf0;
|
|
|
}
|
|
}
|
|
|
- .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;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ background: #f0faff;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|