20 changed files with 459 additions and 779 deletions
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
Loading…
Reference in new issue