diff --git a/.gitignore b/.gitignore
index a547bf3..b879930 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/components.d.ts
diff --git a/components.d.ts b/components.d.ts
index 8ab9f8e..cdba4c9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,22 +7,12 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    ACol: typeof import('ant-design-vue/es')['Col']
-    ACollapse: typeof import('ant-design-vue/es')['Collapse']
-    ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     ARow: typeof import('ant-design-vue/es')['Row']
-    Aside: typeof import('./src/components/aside/index.vue')['default']
-    ATabPane: typeof import('ant-design-vue/es')['TabPane']
-    ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATree: typeof import('ant-design-vue/es')['Tree']
-    Basic: typeof import('./src/components/aside/leftMenu/leftMenuItem/basic.vue')['default']
-    LeftMenu: typeof import('./src/components/aside/leftMenu/index.vue')['default']
-    Models3d: typeof import('./src/components/aside/leftMenu/leftMenuItem/models3d.vue')['default']
-    Modelsimages: typeof import('./src/components/aside/leftMenu/leftMenuItem/modelsimages.vue')['default']
-    RightMenu: typeof import('./src/components/aside/rightMenu/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Sytemcomponent: typeof import('./src/components/aside/leftMenu/leftMenuItem/sytemcomponent.vue')['default']
-    Tools: typeof import('./src/components/aside/leftMenu/leftMenuItem/tools.vue')['default']
   }
 }
diff --git a/src/assets/images/buttonBG01.png b/src/assets/images/buttonBG01.png
new file mode 100644
index 0000000..a22c02f
Binary files /dev/null and b/src/assets/images/buttonBG01.png differ
diff --git a/src/assets/images/buttonBG02.png b/src/assets/images/buttonBG02.png
new file mode 100644
index 0000000..11594f4
Binary files /dev/null and b/src/assets/images/buttonBG02.png differ
diff --git a/src/assets/images/loginBG.png b/src/assets/images/loginBG.png
new file mode 100644
index 0000000..7ab5a82
Binary files /dev/null and b/src/assets/images/loginBG.png differ
diff --git a/src/assets/images/search.png b/src/assets/images/search.png
new file mode 100644
index 0000000..4c6361f
Binary files /dev/null and b/src/assets/images/search.png differ
diff --git a/src/assets/images/textAnimal.png b/src/assets/images/textAnimal.png
new file mode 100644
index 0000000..515a8fa
Binary files /dev/null and b/src/assets/images/textAnimal.png differ
diff --git a/src/assets/images/textBG.png b/src/assets/images/textBG.png
new file mode 100644
index 0000000..d2d5a8f
Binary files /dev/null and b/src/assets/images/textBG.png differ
diff --git a/src/components/aside/index.vue b/src/components/aside/index.vue
deleted file mode 100644
index 01ce051..0000000
--- a/src/components/aside/index.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--   
-  *@描述: admin主页构建
-  *@作者： 
-  *@日期： 9/27
-  *@版本：1.0
-  */
-  -->
-<template>
-    <a-row>
-        <a-col  :span="3"  class="left-com" >
-            <comLeftMenu></comLeftMenu>
-        </a-col>
-        <a-col :span="18" class=" com-setup-center ">
-            <slot></slot>
-        </a-col>
-        <a-col  :span="3" class="right-com"  ><comRightMenu></comRightMenu></a-col>
-    </a-row>
-</template>
-<script setup lang="ts">
-import comLeftMenu from './leftMenu/index.vue';
-import comRightMenu from './rightMenu/index.vue';
-</script>
-<style lang="less" scoped>
-.com-setup-center {
-    height: 100vh;
-    width: 100%;
-    flex-wrap: nowrap;
-}
-.left-com,.right-com{
-    position:relative;
-    z-index:8;
-}
-
-</style>
diff --git a/src/components/aside/leftMenu/index.vue b/src/components/aside/leftMenu/index.vue
deleted file mode 100644
index 17c6bee..0000000
--- a/src/components/aside/leftMenu/index.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<!--   
-  *@描述: 左侧组件
-  *@作者： 
-  *@日期： 9/27
-  *@版本：1.0
-  */
-  -->
-<template>
-    <a-row class="com-left-menu-header">
-        <span>工具栏</span>
-    </a-row>
-    <hr style="border:1px solid #00ffe4;" width="100%" />
-    <a-row class="com-left-menu">
-
-        <a-tabs v-model:activeKey="activeKey" :tab-position="'left'">
-            <a-tab-pane key="1">
-                <template #tab>
-                    <!-- <span class="icon iconfont icon-gongneng iconfontsize"></span> -->
-                    <div class="menu-title">
-                        功能
-                    </div>
-                </template>
-                <Basic />
-            </a-tab-pane>
-            <a-tab-pane key="2">
-                <template #tab>
-                    <!-- <span class="icon iconfont icon-chanpinmoxing iconfontsize"></span> -->
-                    <div class="menu-title">
-                        3D模型
-                    </div>
-                </template>
-                <Models3D />
-            </a-tab-pane>
-            <a-tab-pane key="3">
-                <template #tab>
-                    <!-- <span class="icon iconfont icon-chanpinmoxing iconfontsize"></span> -->
-                    <div class="menu-title">
-                        图片<br />模型
-                    </div>
-                </template>
-                <ModelsImages />
-            </a-tab-pane>
-            <a-tab-pane key="4">
-                <template #tab>
-                    <!-- <span class="icon iconfont icon-shengchan iconfontsize"></span> -->
-                    <div class="menu-title">
-                        工具
-                    </div>
-                </template>
-                <Tools />
-            </a-tab-pane>
-            <a-tab-pane key="5">
-                <template #tab>
-                    <!-- <span class="icon iconfont icon-shezhi1 iconfontsize"></span> -->
-                    <div class="menu-title">
-                        系统<br />设置
-                    </div>
-                </template>
-                <SytemComponent />
-            </a-tab-pane>
-        </a-tabs>
-    </a-row>
-</template>
-<script lang="ts" setup>
-import { ref } from "vue";
-import Basic from "./leftMenuItem/basic.vue";
-import ModelsImages from "./leftMenuItem/modelsimages.vue";
-import Models3D from "./leftMenuItem/models3d.vue";
-import SytemComponent from "./leftMenuItem/sytemcomponent.vue";
-import Tools from "./leftMenuItem/tools.vue";
-let activeKey = ref('1')
-</script>
-<style lang="less" scoped>
-.com-left-menu {
-    user-select: none;
-    height: 100vh;
-    background-color: #001529;
-    >div,:deep(.ant-tabs-tab-btn) {
-        width: 100%;
-    }
-    .menu-title{
-        text-align: center;
-    }
-}
-
-.com-left-menu-header {
-    padding-top: 10px;
-
-    user-select: none;
-    height: 40px;
-    background-color: #001529;
-    text-align: center;
-    width: 100%;
-    border-width: 2px;
-    border-bottom: #fff;
-
-    span {
-        margin-left: 40px;
-        width: 100%;
-        color: #fff;
-        font-size: 18px;
-        text-align: left;
-    }
-}
-
-
-:deep(.ant-tabs-tab) {
-    text-align: center !important;
-    padding: 12px 0 !important;
-}
-
-:deep(.ant-tabs-left-bar) {
-    width: calc(6 / 24 * 100%);
-}
-
-:deep(.ant-tabs-left-content.ant-tabs-content.ant-tabs-content-animated),
-:deep(.ant-tabs-tabpane) {
-    padding-left: 0 !important;
-}
-
-.iconfontsize {
-    font-size: 28px;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/aside/leftMenu/leftMenuItem/basic.vue b/src/components/aside/leftMenu/leftMenuItem/basic.vue
deleted file mode 100644
index d75989e..0000000
--- a/src/components/aside/leftMenu/leftMenuItem/basic.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-    <div class="left-com-content">
-        <a-row>
-            <a-col class="content-item" title="添加标签" @click="addLabel">
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont icon-biaoqian"></span>
-                    </i>
-                </a>
-                <div class="item-text">添加标签</div>
-            </a-col>
-            <div style="background: aqua; height: 50%">
-                <a-tree style="background: aqua;" :tree-data="treeData" @select="selectTreeNode" />
-            </div>
-        </a-row>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { audio } from "@/utils/audio";
-import { useStore } from '@/store/index';
-import {storeToRefs} from 'pinia';
-import type { TreeProps } from 'ant-design-vue';
-import * as cameraApi from '@/axios/cameraBase/cameraApi';
-import { ref,onMounted } from 'vue';
-let piniaStore = useStore();
-let cameraMap = new Map<string, any>()
-let treeData = ref<TreeProps['treeData']>([])
-let curSelectKey=storeToRefs(piniaStore).curSelectKey
-function loadTreeData() {
-    cameraApi.GetList().then((res: any) => {
-        let list: Array<any> = res.data.data;
-        console.log(list);
-            
-        cameraMap = piniaStore.addCameraMap(list)
-        treeData.value=piniaStore.treeData
-        console.log(cameraMap);
-    });
-}
-onMounted(()=>{
-    loadTreeData()
-})
-function selectTreeNode(selectedKeys: any, e: any) {
-      if (!e.selected) return;
-      let key = selectedKeys[0];
-      if (curSelectKey.value !== key) {
-        piniaStore.updateCurSelectKey(key)
-      }
-    }
-//播放音效
-function playAudio(): void {
-    audio.click();
-}
-//添加标签
-function addLabel(e: string) {
-    piniaStore.updateIsAddLabel({labelType:"",isAddLabel: true})
-    playAudio();
-}
-
-
-</script>
-
-<style lang='less'>
-.left-com-content {
-    .content-item {
-        cursor: pointer;
-        text-align: center;
-        padding: 5px 0;
-        margin: 1%;
-        width: 48%;
-
-        .fa span {
-            font-size: 25px;
-
-        }
-    }
-}
-</style>
diff --git a/src/components/aside/leftMenu/leftMenuItem/models3d.vue b/src/components/aside/leftMenu/leftMenuItem/models3d.vue
deleted file mode 100644
index f578582..0000000
--- a/src/components/aside/leftMenu/leftMenuItem/models3d.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-
-    <div class="left-com-content">
-
-        <a-collapse v-model:activeKey="activeKey" accordion>
-            <a-collapse-panel v-for="item in header" :key="item.id" :header="item.group_name">
-                <div class="img-box">
-                    <div class="img" v-for="ele in item.itemArr" @click="addModelFn(ele.url,ele.oldUrl)">
-                        <img draggable="false" class="collapse-panel-img" width="36" height="36" :src="ele.dis_img"
-                            :alt="ele.model_name">
-                    </div>
-                </div>
-            </a-collapse-panel>
-        </a-collapse>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-import api from "@/axios/api";
-import { useStore } from '@/store/index';
-let piniaStore = useStore();
-const activeKey = ref([]);
-let header: any = ref([])
-//图片基础路径
-let baseUrl = process.env.VUE_APP_API_BASE_URL + "/sys/common/static/";// api base_urll
-let p1 = api.modelsinfo.getModels3DGroup( ).then(res =>
-{
-    return res.data;
-})
-
-let p2 = api.modelsinfo.getModels3D().then(res =>
-{
-
-    return res.data;
-})
-Promise.all([p1, p2]).then(res =>
-{
-    let headerArr = res[0]
-    let itemArr = res[1]
-    //循环折叠标题数组
-    headerArr.forEach((element: any, index: number) =>
-    {
-        //每个折叠标题添加一个存储子元素的数组
-        element.itemArr = []
-        header.value.push(element)
-        itemArr?.forEach((item: any) =>
-        {
-            
-            //判断图片是否为该标题所属
-            if (element.group_name == item.model_group_name)
-            {
-                item.oldUrl = item.url
-                item.url = baseUrl+item.url
-                item.dis_img = baseUrl + item.previewurl
-                header.value[index].itemArr.push(item)
-            }
-        })
-    });
-
-})
-let cus: any = null;
-function addModelFn (url: string,img:string): void
-{
-    cus.creating = true
-    cus.img = img
-    piniaStore.editType = 30;
-}
-</script>
-
-<style scoped lang='less'>
-.left-com-content {
-    .content-item {
-        cursor: pointer;
-
-        padding: 5px 0;
-        margin: 1%;
-        width: 48%;
-
-        .fa span {
-            font-size: 25px;
-
-        }
-    }
-}
-
-:deep(.ant-collapse-content-box) {
-    padding: 16px 10px;
-}
-
-.img-box {
-    text-align: left;
-    display: flex;
-    flex-wrap: wrap;
-
-    .img {
-        flex-basis: 1 / 3 * 100%;
-        text-align: center;
-
-        .collapse-panel-img {
-            padding: 2px;
-
-            &:hover {
-                border: 1px solid #001529;
-                cursor: pointer;
-            }
-        }
-    }
-}
-
-:deep(.ant-collapse) {
-    background-color: #001529;
-    border: #fff;
-
-
-    .ant-collapse-item {
-
-        .ant-collapse-header {
-            color: #fff !important;
-
-            span {
-                color: #fff;
-            }
-        }
-    }
-
-
-}
-</style>
\ No newline at end of file
diff --git a/src/components/aside/leftMenu/leftMenuItem/modelsimages.vue b/src/components/aside/leftMenu/leftMenuItem/modelsimages.vue
deleted file mode 100644
index b4880b7..0000000
--- a/src/components/aside/leftMenu/leftMenuItem/modelsimages.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-
-    <div class="left-com-content">
-
-        <a-collapse v-model:activeKey="activeKey" accordion>
-            <a-collapse-panel v-for="item in header" :key="item.id" :header="item.group_name">
-                <div class="img-box">
-                    <div class="img" v-for="ele in item.itemArr" @click="addImage(ele.dis_img,ele.url)">
-                        <img draggable="false" class="collapse-panel-img" width="36" height="36" :src="ele.dis_img"
-                            :alt="ele.model_name">
-                    </div>
-                </div>
-            </a-collapse-panel>
-        </a-collapse>
-    </div>
-</template>
-<script setup lang="ts">
-
-import { ref } from 'vue';
-import api from "@/axios/api";
-import { useStore } from '@/store/index';
-let piniaStore = useStore();
-const activeKey = ref([]);
-let header: any = ref([])
-//图片基础路径
-let baseUrl = process.env.VUE_APP_API_BASE_URL + "/sys/common/static/"; // api base_urll
-let p1 = api.modelsinfo.getModelsImageGroup().then(res => {
-    return res.data;
-})
-let p2 = api.modelsinfo.getModelsImage().then(res => {
-
-    return res.data;
-})
-Promise.all([p1, p2]).then(res => {
-    let headerArr = res[0]
-    let itemArr = res[1]
-    //循环折叠标题数组
-    headerArr.forEach((element: any, index: number) => {
-        //每个折叠标题添加一个存储子元素的数组
-        element.itemArr = []
-        header.value.push(element)
-        itemArr?.forEach((item: any) => {
-            //判断图片是否为该标题所属
-            if (element.group_name == item.model_group_name) {
-                item.dis_img = baseUrl + item.url
-                header.value[index].itemArr.push(item)
-            }
-        })
-    });
-
-})
-let cus: any = null;
-function addImage(imgstr: string,img:string): void {
-    cus.creating = true
-    cus.img = img
-    piniaStore.editType = 2;
-}
-</script>
-
-<style scoped lang='less'>
-.left-com-content {
-    .content-item {
-        cursor: pointer;
-
-        padding: 5px 0;
-        margin: 1%;
-        width: 48%;
-
-        .fa span {
-            font-size: 25px;
-
-        }
-    }
-}
-
-:deep(.ant-collapse-content-box) {
-    padding: 16px 10px;
-}
-
-.img-box {
-    text-align: left;
-    display: flex;
-    flex-wrap: wrap;
-
-    .img {
-        flex-basis: 1 / 3 * 100%;
-        text-align: center;
-
-        .collapse-panel-img {
-            padding: 2px;
-
-            &:hover {
-                border: 1px solid #001529;
-                cursor: pointer;
-            }
-        }
-    }
-}
-
-:deep(.ant-collapse) {
-    background-color: #001529;
-    border: #fff;
-
-
-    .ant-collapse-item {
-
-        .ant-collapse-header {
-            color: #fff !important;
-
-            span {
-                color: #fff;
-            }
-        }
-    }
-
-
-}
-</style>
\ No newline at end of file
diff --git a/src/components/aside/leftMenu/leftMenuItem/sytemcomponent.vue b/src/components/aside/leftMenu/leftMenuItem/sytemcomponent.vue
deleted file mode 100644
index 7371ea6..0000000
--- a/src/components/aside/leftMenu/leftMenuItem/sytemcomponent.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <div class="left-com-content">
-        <a-row>
-            <a-col class="content-item" @click="haplochromatizationListEvent" title="单体化列表">
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont icon-moxing-miaobian"></span>
-                    </i>
-                </a>
-                <div class="item-text">用户管理</div>
-            </a-col>
-            <a-col class="content-item" @click="addhaplochromatization" title="单体化">
-
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont icon-sanweimoxing"></span>
-                    </i>
-                </a>
-                <div class="item-text">相机配置</div>
-            </a-col>
-        </a-row>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { useStore } from '@/store/index';
-import { audio } from "@/utils/audio";
-let piniaStore = useStore();
-
-
-
-
-function haplochromatizationListEvent(): void {
-    playAudio();
-}
-
-function addhaplochromatization(): void {
-    piniaStore.editType = 501
-}
-function fenceListFn() {
-    playAudio();
-}
-//防区
-function addDefenceArea(): void {
-    playAudio();
-    piniaStore.editType = 502
-}
-//播放音效
-function playAudio(): void {
-    audio.click();
-}
-
-
-
-
-</script>
-
-<style scoped lang='less'>
-.left-com-content {
-    .content-item {
-        cursor: pointer;
-
-        padding: 5px 0;
-        margin: 1%;
-        width: 48%;
-
-        .fa span {
-            font-size: 25px;
-
-        }
-    }
-}
-</style>
diff --git a/src/components/aside/leftMenu/leftMenuItem/tools.vue b/src/components/aside/leftMenu/leftMenuItem/tools.vue
deleted file mode 100644
index b0bde75..0000000
--- a/src/components/aside/leftMenu/leftMenuItem/tools.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-    <div class="left-com-content">
-        <a-row>
-
-            <a-col class="content-item" title="位置测量" @click="measureMent('POINT')">
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont icon-31dingwei"></span>
-                    </i>
-                </a>
-                <div class="item-text">位置测量</div>
-            </a-col>
-            <a-col class="content-item" title="距离测量" @click="measureMent('SPACE_DISTANCE')">
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont icon-chizi"></span>
-                    </i>
-                </a>
-                <div class="item-text">距离测量</div>
-            </a-col>
-            <a-col class="content-item" title="三角测量" @click="measureMent('TRIANGLE_DISTANCE')">
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont icon-celiangleixing"></span>
-                    </i>
-                </a>
-                <div class="item-text">三角测量</div>
-            </a-col>
-            <a-col class="content-item" title="面积测量" @click="measureMent('SPACE_AREA')">
-                <a class="btn btnColor">
-                    <i class="fa" style="font-size:35px">
-                        <span class="icon iconfont icon-mianjiceliang"></span>
-                    </i>
-                </a>
-                <div class="item-text">面积测量</div>
-            </a-col>
-
-            <a-col class="content-item" title="属性设置" @click="setProperties">
-
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont  icon-shezhi"></span>
-                    </i>
-                </a>
-                <div class="item-text">属性设置</div>
-            </a-col>
-            <a-col class="content-item" title="清空测量结果" @click="clearResults">
-                <a class="btn btnColor">
-                    <i class="fa">
-                        <span class="icon iconfont icon-Eliminate" style="color: #D35400;"></span>
-                    </i>
-                </a>
-                <div class="item-text" style="color: #D35400;">清空测量</div>
-            </a-col>
-        </a-row>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, h, onMounted, getCurrentInstance, ComponentInternalInstance } from "vue";
-import { audio } from "@/utils/audio";
-let measureMentType = ref("NONE");
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-onMounted(() => {
-})
-
-//播放音效
-function playAudio(): void {
-    audio.click();
-}
-//属性设置
-function setProperties(): void {
-    playAudio();
-}
-
-//清除测量结果
-function clearResults(): void {
-    measureMentType.value = "NONE";
-}
-function measureMent(Type: string) {
-    measureMentType.value = Type;
-}
-</script>
-
-<style scoped lang='less'>
-.left-com-content {
-    .content-item {
-        cursor: pointer;
-
-        padding: 5px 0;
-        margin: 1%;
-        width: 48%;
-
-        .fa span {
-            font-size: 25px;
-
-        }
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/aside/rightMenu/index.vue b/src/components/aside/rightMenu/index.vue
deleted file mode 100644
index 44e65dc..0000000
--- a/src/components/aside/rightMenu/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--   
-  *@描述: 右侧面板 基本信息-数据绑定
-  *@作者： 
-  *@日期： 
-  *@版本：1.0
-  */
-  -->
-<template>
-    <div class="rightMenu-class">
-        <a-tabs v-model:activeKey="activeKey">
-            <a-tab-pane key="1" tab="首页">
-                
-                <VideoControl></VideoControl>
-            </a-tab-pane>
-            <a-tab-pane key="2" tab="首页2">
-                暂无信息2
-            </a-tab-pane>
-        </a-tabs>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import VideoControl from '@/views/page/VideoControl/VideoControl.vue';
-import { ref } from 'vue'
-let activeKey = ref('1')
-</script>
-
-<style lang="less" scoped>
-.rightMenu-class {
-    user-select: none;
-    overflow: auto;
-    height: 100vh;
-    background-color: #001529;
-    :deep(.ant-tabs-nav-list) {
-        margin: 0 auto;
-        padding: 0 20px;
-    }
-    :deep(.ant-tabs-tabpane){
-        text-align: center;
-    }
-}
-</style>
diff --git a/src/store/index.ts b/src/store/index.ts
index 57b7b3d..0011629 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -20,7 +20,7 @@ export const useStore = defineStore('Index', {
         addCameraMap(list: any) {
             this.treeData = []
             for (let item of list) {
-                this.cameraMap.set(item.id, item);
+                this.cameraMap.set(item.id+'', item);
                 this.treeData.push({ title: item.ip, key: item.id });
             }
             return this.cameraMap
diff --git a/src/views/index.vue b/src/views/index.vue
index 44d0934..86bb995 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -6,16 +6,17 @@
   */
   -->
 <template>
-    <ComSetup>
+    <!-- <ComSetup>
         <template v-slot:default>
-            <!-- 主体内容 -->
+            主体内容
             <div class="com-body">
                 <CameraCenter></CameraCenter>
-                <!-- <UserEdit></UserEdit> -->
+                <UserEdit></UserEdit>
 
             </div>
         </template>
-    </ComSetup>
+    </ComSetup> -->
+    <CameraCenter></CameraCenter>
 </template>
   
 <script lang="ts" setup>
diff --git a/src/views/page/cameraCenter.vue b/src/views/page/cameraCenter.vue
index fb000b8..c22d86f 100644
--- a/src/views/page/cameraCenter.vue
+++ b/src/views/page/cameraCenter.vue
@@ -3,8 +3,9 @@
     <div id="videoWrapper">
         <canvas ref="videoCanvas" id="videoCanvas" :width="canvasWidth" :height="canvasHeight">
         </canvas>
-        <video ref="videoPlayer" id="videoPlayer" autoplay muted @loadedmetadata="changeVideoCanvasSize"
-            @mouseover="mouseOverVideo" @mouseout="mouseOutVideo" @mousedown="mouseDownVideo">
+        <video ref="videoPlayer" id="videoPlayer" disablePictureInPicture autoplay muted
+            @loadedmetadata="changeVideoCanvasSize" @mouseover="mouseOverVideo" @mouseout="mouseOutVideo"
+            @mousedown="mouseDownVideo">
         </video>
         <div v-for="item in labelList" class="labels" :key="item.id"
             :style="`top:${canvasHeight * item.canvasTopRatio}px;left:${canvasWidth * item.canvasLeftRatio}px`">
@@ -21,7 +22,53 @@
                 <span>1</span>
             </div>
         </div>
-            <VideoControlSimple></VideoControlSimple>      
+        <div class="buttomList">
+            <div class="buttomItem">
+                <div class="buttomName">标签标志</div>
+            </div>
+            <div class="buttomItem">
+                <div class="buttomName">截图</div>
+            </div>
+            <div class="buttomItem">
+                <div class="buttomName">录像</div>
+            </div>
+            <div class="buttomItem">
+                <div class="buttomName">3D缩放</div>
+            </div>
+            <div class="buttomItem">
+                <div class="buttomName">设备标记</div>
+            </div>
+            <div class="buttomItem">
+                <div class="buttomName">工具箱</div>
+            </div>
+        </div>
+        <div class="arTagTitle">
+            请输入标签内容
+        </div>
+        <div class="messageList">
+            <div class="messageTitle">
+                选择切换高点
+            </div>
+            <div class="search">
+                <img src="@/assets/images/search.png">
+                <input class="arScrean" placeholder='请输入站点名称' type="text" id="" value="" />
+            </div>
+            <div class="container clearfix">
+                <a-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys" :expandAction="'click'"  @select="selectCamera" >
+                    <template #title="{ key: treeKey, title }">
+                        <a-dropdown :trigger="['contextmenu']">
+                            <span>{{ title }}</span>
+                            <template #overlay>
+                                <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
+                                    <a-menu-item key="1">打开</a-menu-item>
+                                    <a-menu-item key="2">删除</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </template>
+                </a-tree>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -34,7 +81,8 @@ import { useStore } from '@/store/index';
 import { apiUrl } from "@/axios";
 import { storeToRefs } from 'pinia';
 import Msg from "@/utils/message";
-import VideoControlSimple from "./VideoControl/VideoControlSimple.vue";
+import * as cameraApi from '@/axios/cameraBase/cameraApi';
+import { number } from "vue-types";
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 let piniaStore = useStore();
 let player = <HTMLVideoElement>document.querySelector('#videoPlayer')
@@ -49,16 +97,41 @@ let labelList = ref<any[]>([])
 let addLabel = storeToRefs(piniaStore).addLabel
 let addLabelLeft = ref(0);
 let addLabelTop = ref(0);
+const treeData =ref<any>( [
+    {
+        title: '视频监控',
+        key: '视频监控',
+        children: [
+            {
+                title: '横琴',
+                key: '横琴',
+                children: [
+                    // { title: '0-0-1-0', key: '0-0-1-0' },
+                    // { title: '0-0-1-1', key: '0-0-1-1' },
+                    // { title: '0-0-1-2', key: '0-0-1-2' },
+                ],
+            },
+        ],
+    },
+]);
 onMounted(() => {
     {
         player = <HTMLVideoElement>document.querySelector('#videoPlayer');
         canvas = <HTMLCanvasElement>document.querySelector('#videoCanvas');
-        // loadTreeData();
+        loadTreeData();
         loadVideoPlayer();
         loadVideoCanvas();
 
     }
 })
+const onContextMenuClick = (treeKey: string, menuKey: string) => {
+    console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
+};
+const expandedKeys = ref<string[] | number[]>([]);
+
+watch(expandedKeys, (newVal,oldVal) => {
+    console.log(newVal[newVal.length-1],'expandedKeys', newVal,oldVal);
+});
 watch(curSelectKey, (newVal, oldVal) => {
     switchCamera(newVal)
 })
@@ -72,6 +145,21 @@ watch(addLabel, (newVal, oldVal) => {
         }
     }
 })
+function loadTreeData() {
+    cameraApi.GetList().then((res: any) => {
+        let list: Array<any> = res.data.data;
+        console.log(list);
+        treeData.value[0].children[0].children=list.map((item:any)=>{
+            item.title=item.name
+            item.key=item.id
+            return item
+        })
+        piniaStore.addCameraMap(list)
+
+        // switchCamera(list[0].id.toString())
+        // treeData.value=piniaStore.treeData
+    });
+}
 //测试删除标签
 function test(id: number) {
 
@@ -90,9 +178,15 @@ function test(id: number) {
         Msg.error("删除失败")
     })
 }
-function mouseRightFn(e:any){
-    console.log(1111111111,e);
-    
+function selectCamera(e:any){
+    console.log(e);
+    if(e.length&&typeof e[0]=='number'){
+        switchCamera(e[0].toString())
+    }
+}
+function mouseRightFn(e: any) {
+    console.log(1111111111, e);
+
 }
 function loadVideoPlayer() {
     let elmId = 'videoPlayer';
@@ -156,22 +250,22 @@ function mouseDownVideo(e: MouseEvent) {
 
             let ret: boolean = res.data.data;
             console.log(ret, 'ret');
-            if(ret){
+            if (ret) {
                 let obj = {
-                cbCameraId: cameraId,
-                videoWidth: videoWidth,
-                videoHeight: videoHeight,
-                canvasLeftRatio: canvasLeftRatio,
-                canvasTopRatio: canvasTopRatio,
-                id: markLabelId,
-                isDelete: false,
-                inFlag: true,
-                name:name,
-            }
-            labelList.value.push(obj)
-            console.log(obj,'obj111111111111111');
-            isActiveChoose.value=false
-            piniaStore.updateIsAddLabel({labelType:"",isAddLabel: false})
+                    cbCameraId: cameraId,
+                    videoWidth: videoWidth,
+                    videoHeight: videoHeight,
+                    canvasLeftRatio: canvasLeftRatio,
+                    canvasTopRatio: canvasTopRatio,
+                    id: markLabelId,
+                    isDelete: false,
+                    inFlag: true,
+                    name: name,
+                }
+                labelList.value.push(obj)
+                console.log(obj, 'obj111111111111111');
+                isActiveChoose.value = false
+                piniaStore.updateIsAddLabel({ labelType: "", isAddLabel: false })
             }
         });
     })
@@ -185,11 +279,13 @@ function deactivateChoose() {
     isActiveChoose.value = false;
 }
 function switchCamera(cameraId: string) {
-    console.log('camera switch.');
+    console.log('camera switch.',cameraId,typeof cameraId);
 
     // step1, get camera obj.
-    console.log('get camera obj.');
+    console.log('get camera obj.',cameraMap.value);
     let cameraObj = cameraMap.value.get(cameraId);
+    console.log(cameraObj,'cameraObj');
+    
     if (!cameraObj) {
         console.log('camera obj not found.');
         return;
@@ -236,7 +332,8 @@ function switchCamera(cameraId: string) {
 }
 function getRtspUrl(cameraObj: any): string {
     // 模拟 onvif
-    return "rtsp://admin:hk123456@192.168.1.65:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1";
+    // return `rtsp://admin:hk123456@192.168.1.65:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1`;
+    return `rtsp://${cameraObj.userName}:${cameraObj.password}@${cameraObj.ip}:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1`;
 }
 function getLabel(cbCameraId: string | number) {
     markLabelApi.GetList({ cbCameraId }).then((res: any) => {
@@ -262,8 +359,8 @@ function loadMarkLabels(cameraObj: any) {
         'cameraId': cameraObj.id
     }).then((res: any) => {
         let list: Array<any> = res.data.data;
-            console.log(list);
-            
+        console.log(list);
+
         list.forEach((element: any) => {
             labelList.value.forEach((item: any, index: number) => {
                 if (element.id == item.id) {
@@ -275,7 +372,7 @@ function loadMarkLabels(cameraObj: any) {
             });
         });
 
-        // drawMarkLabels(list);
+        drawMarkLabels(list);
     });
 }
 function drawMarkLabels(markLabels: Array<any>) {
@@ -314,7 +411,7 @@ onUnmounted(() => {
     height: 100vh;
     position: relative;
     overflow: hidden;
-    z-index: 1;
+
     #videoCanvas {
         position: absolute;
     }
@@ -330,7 +427,7 @@ onUnmounted(() => {
         position: absolute;
         top: 0;
         left: 0;
-        transform: translate(-50%,-100%);
+        transform: translate(-50%, -100%);
         z-index: 2;
 
         .labels-item {
@@ -345,5 +442,155 @@ onUnmounted(() => {
             }
         }
     }
+
+    .container {
+        padding: 0 20px;
+    }
+
+    :deep(.ant-tree) {
+        background-color: transparent !important;
+
+        div {
+            color: #000 !important;
+        }
+    }
+
+    .messageList {
+        position: absolute;
+        top: 18%;
+        left: 1%;
+        width: 11vw;
+        height: 21vw;
+        background: url(@/assets/images/loginBG.png);
+        background-size: 100% 100%;
+    }
+
+    .messageTitle {
+        position: absolute;
+        top: 6%;
+        left: 50%;
+        width: 75%;
+        border-radius: 1vh;
+        transform: translate(-50%, -50%);
+        height: 3vh;
+        color: #fff;
+        line-height: 3vh;
+        text-align: center;
+        background-image: linear-gradient(to right, rgba(255, 107, 0, 0.3), rgba(80, 80, 80, 0.1), rgba(255, 107, 0, 0.3));
+    }
+
+    .arTagTitle {
+        font-size: 1em;
+        color: #333;
+        padding-left: 1.2vw;
+        line-height: 47px;
+        position: absolute;
+        top: 10%;
+        left: 1%;
+        width: 8.5vw;
+        height: 50px;
+        background: url(@/assets/images/textBG.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .arTagTitle::before {
+        content: '';
+        background: url(@/assets/images/textAnimal.png) no-repeat;
+        background-size: 100% 100%;
+        height: 35px;
+        width: 35px;
+        position: absolute;
+        top: 6px;
+        left: -15px;
+        animation: rounte 5s linear infinite;
+    }
+
+    .buttomList {
+        position: absolute;
+        right: 1%;
+        top: 15%;
+        width: 80px;
+    }
+
+    @keyframes rounte {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    .buttomItem {
+        position: relative;
+        width: 80px;
+        height: 80px;
+    }
+
+    .buttomItem::before {
+        content: '';
+        background: url(@/assets/images/buttonBG01.png);
+        background-size: 100% 100%;
+        position: absolute;
+        animation: rounte 5s linear infinite;
+        top: 5%;
+        bottom: 5%;
+        left: 5%;
+        right: 5%;
+        z-index: 1;
+    }
+
+    .buttomItem:hover::before {
+        background: url(@/assets/images/buttonBG02.png);
+        background-size: 100% 100%;
+    }
+
+    .buttomName {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        color: #fff;
+        line-height: 3vw;
+        width: 100%;
+        z-index: 2;
+        font-size: 0.8em;
+    }
+
+    .search {
+        position: relative;
+        height: 1.5em;
+        width: 75%;
+        margin: 6vh 0 0 50%;
+        transform: translateX(-50%);
+        color: #eee;
+
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 1.5em;
+            width: 1.5em;
+        }
+
+        .arScrean {
+            border: 0;
+            outline: 0;
+            height: 1.5em;
+            position: absolute;
+            top: 0;
+            left: 1.9em;
+            padding-left: 0.3em;
+            border-left: #999 1px solid;
+            color: #eee;
+            background: rgba(200, 200, 255, 0);
+        }
+    }
+}
+
+:deep(.ant-dropdown-menu-title-content) {
+    color: #000 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/page/userEdit.vue b/src/views/page/userEdit.vue
index d7df2b0..38fa9da 100644
--- a/src/views/page/userEdit.vue
+++ b/src/views/page/userEdit.vue
@@ -1,55 +1,192 @@
 <template>
 <div class="user-edit">
-    <a-table
+    <Table
     class="ant-table-striped"
     size="middle"
     :columns="columns"
     :data-source="data"
-    :rowClassName="(record:any, index:number) => (index % 2 === 1 ? 'table-striped' : null)"
-  />
+    :rowClassName="(record:any, index:number) => (index % 2 === 1 ? 'table-striped' : undefined)"
+    :pagination="pagination"
+  >
+  <template #action="{ record }">
+                        <a href="#" @click="edit_(record)">编辑</a>
+                        <Popconfirm v-if="data.length" title="确定删除吗?" ok-text="确定" cancel-text="取消"
+                            @confirm="del_(record.id, record.key-1)">
+                            <Divider type="vertical" />
+                            <a href="#" >删除</a>
+                        </Popconfirm>
+                    </template>
+</Table>
 </div>
 </template>
 
 <script setup lang='ts'>
+import {ref} from"vue";
+import * as cameraApi from '@/axios/cameraBase/cameraApi';
+import {
+    Table,
+    Popconfirm,
+    Divider,
+} from "ant-design-vue";
+import Msg from "@/utils/message";
 const columns = [
   { title: '序号', dataIndex: 'key' },
-  { title: '登录名', dataIndex: 'name' },
+  { title: '登录名', dataIndex: 'userName' },
   { title: '密码', dataIndex: 'password' },
-  { title: '用户类型', dataIndex: 'address' },
-  { title: '是否启用', dataIndex: 'address' },
-  { title: '备注', dataIndex: 'address' },
-];
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    password: 32,
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    password: 42,
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    password: 32,
-    address: 'Sidney No. 1 Lake Park',
-  },
+  { title: '用户类型', dataIndex: 'userType' },
+  { title: '是否启用', dataIndex: 'flag' },
+  { title: '备注', dataIndex: 'remarks' },
   {
-    key: '4',
-    name: 'Ben Kang',
-    password: 15,
-    address: 'Sidney No. 1 Lake Park',
-  },
+        title: "操作",
+        dataIndex: "",
+        key: "x",
+        slots: {
+            customRender: "action",
+        },
+    },
 ];
+let data =ref();
+// let data =  [
+//   {
+//     key: '1',
+//     userName: 'John Brown',
+//     password: 32,
+//     userType: '管理员',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '2',
+//     userName: 'Jim Green',
+//     password: 42,
+//     userType: '管理员',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '3',
+//     userName: 'Joe Black',
+//     password: 32,
+//     userType: '普通用户',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '4',
+//     userName: 'Ben Kang',
+//     password: 15,
+//     userType: '管理员',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '5',
+//     userName: 'Ben Kang2',
+//     password: 15,
+//     userType: '管理员',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '6',
+//     userName: 'Ben Kang3',
+//     password: 15,
+//     userType: '普通用户',
+//     flag:"true",
+//     remarks:""
+//   },{
+//     key: '1',
+//     userName: 'John Brown',
+//     password: 32,
+//     userType: '管理员',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '2',
+//     userName: 'Jim Green',
+//     password: 42,
+//     userType: '管理员',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '3',
+//     userName: 'Joe Black',
+//     password: 32,
+//     userType: '普通用户',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '4',
+//     userName: 'Ben Kang',
+//     password: 15,
+//     userType: '管理员',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '5',
+//     userName: 'Ben Kang2',
+//     password: 15,
+//     userType: '管理员',
+//     flag:"true",
+//     remarks:""
+//   },
+//   {
+//     key: '6',
+//     userName: 'Ben Kang3',
+//     password: 15,
+//     userType: '普通用户',
+//     flag:"true",
+//     remarks:""
+//   },
+// ];
+const pagination = ref({
+    pageSize: 10,
+    total: 0,
+    size: "small",
+});
+function loadTreeData() {
+    cameraApi.GetList().then((res: any) => {
+        let list: Array<any> = res.data.data;
+       if(list.length!=0){
+        list=list.map((item:any,index:number)=>{
+            item.key=index+1
+            return item
+        })
+        pagination.value.total=list.length
+        data.value=list
+       }
+    });
+}
+loadTreeData()
+function edit_(item:any){
+    
+}
+function del_(key:any,index:number){
+    cameraApi.Delete({id:key}).then((res:any)=>{
+        let resData=res.data
+        if(resData){
+            Msg.success("删除成功")
+            data.value.splice(index,1)
+            data.value=data.value.map((item:any,i:number)=>{
+                if(index<item.key){
+                    item.key--
+                }
+                return item
+            })
+        }
+    })
+}
 </script>
 
 <style scoped lang='less'>
 .user-edit{
     padding: 20px;
+    background-color: #001529;
+    height: 100%;
 }
 .ant-table-striped :deep(.table-striped) td {
   background-color: #fafafa;