冲突解决
commit
9728998757
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 440 B |
Binary file not shown.
|
After Width: | Height: | Size: 893 B |
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,23 @@
|
||||
import { defHttp } from '@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
// 获取算法列表
|
||||
GetAlgorithmsRepositoryList = '/api/AlgorithmsRepository/GetAlgorithmsRepositoryList',
|
||||
// 添加算法
|
||||
AddAlgorithmsRepository = '/api/AlgorithmsRepository/AddAlgorithmsRepository',
|
||||
// 修改算法
|
||||
UpdateAlgorithmsRepository = '/api/AlgorithmsRepository/UpdateAlgorithmsRepository',
|
||||
}
|
||||
|
||||
export const GetAlgorithmsRepositoryList = (params) => defHttp.get({
|
||||
url: Api.GetAlgorithmsRepositoryList,
|
||||
params,
|
||||
});
|
||||
export const AddAlgorithmsRepository = (params) => defHttp.post({
|
||||
url: Api.AddAlgorithmsRepository,
|
||||
params,
|
||||
});
|
||||
export const UpdateAlgorithmsRepository = (params) => defHttp.post({
|
||||
url: Api.UpdateAlgorithmsRepository,
|
||||
params,
|
||||
});
|
||||
@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="page-out">
|
||||
<div class="title">
|
||||
<div class="search-div">
|
||||
<a-input class="search-input" v-model:value="instanceName" placeholder="搜索实例名称…">
|
||||
<template #prefix>
|
||||
<div class="search-input-icon"></div>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-select
|
||||
placeholder="请选择算法"
|
||||
class="select-algorithm"
|
||||
v-model:value="instanceAlgorithm"
|
||||
:options="algorithmOptions"
|
||||
/>
|
||||
<a-button class="search-button" type="primary">查询</a-button>
|
||||
</div>
|
||||
<a-button class="add-instance" type="primary" :icon="h(PlusOutlined)" @click="changeAddModal(true)">新建算法实例</a-button>
|
||||
</div>
|
||||
<div class="show-list-div">
|
||||
<div class="show-list">
|
||||
<div class="item-list" v-for="value in 10">
|
||||
<div class="image-div">
|
||||
<img class="image-item" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
|
||||
<div class="image-icon">盖板缺失</div>
|
||||
</div>
|
||||
<div class="show-info-div">
|
||||
<div class="info-title-div">
|
||||
<div class="info-icon"></div>
|
||||
<div class="info-title-inner">
|
||||
<div class="info-title">公路-排水沟盖板确实是识别</div>
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<div class="info-subtitle">暂无描述</div>
|
||||
<a-popover overlayClassName="instance-show-more-info-popover" trigger="click" placement="topRight">
|
||||
<template #content>
|
||||
<div class="show-more-content">
|
||||
<div class="content-raw">
|
||||
<div class="content-label">关联事件</div>
|
||||
<div class="content-value">
|
||||
<div>-</div>
|
||||
<div>-</div>
|
||||
<div>-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-raw">
|
||||
<div class="content-label">关联算法</div>
|
||||
<div class="content-value">
|
||||
<div>#高速排水沟盖板缺失检测算法</div>
|
||||
<div>#高速排水沟盖板缺失检测算法</div>
|
||||
<div>#高速排水沟盖板缺失检测算法</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="show-more-info">
|
||||
<div class="show-more-span">展开更多</div>
|
||||
<div class="show-more-icon"></div>
|
||||
</div>
|
||||
</a-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-footer">
|
||||
<a-button class="item-del">删除</a-button>
|
||||
<a-button class="item-show" type="primary" @click="showInfoDrawer = true">查看</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-div">
|
||||
<a-pagination
|
||||
size="small"
|
||||
:total="50"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
:show-total="total => `共 ${total} 条数据`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal width="853px" v-model:open="addInstanceModal" :footer="false" :closable="false" :destroyOnClose="true" :maskClosable="false" :keyboard="false">
|
||||
<AddInstanceModal @changeAddModal="changeAddModal"/>
|
||||
</a-modal>
|
||||
<a-drawer
|
||||
width="442px"
|
||||
:closable="false"
|
||||
v-model:open="showInfoDrawer"
|
||||
placement="right"
|
||||
rootClassName="instance-show-info-drawer"
|
||||
>
|
||||
<ShowInfoDrawer />
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, h, } from "vue"
|
||||
import { PlusOutlined, } from '@ant-design/icons-vue';
|
||||
import AddInstanceModal from "./AddInstanceModal.vue";
|
||||
import ShowInfoDrawer from "./ShowInfoDrawer.vue";
|
||||
const instanceName = ref('')
|
||||
const instanceAlgorithm = ref()
|
||||
const addInstanceModal = ref(false)
|
||||
const showInfoDrawer = ref(false)
|
||||
const algorithmOptions = ref([
|
||||
{ label: 'aaa', value: 'aaa' },
|
||||
])
|
||||
const changeAddModal = (type: boolean) => {
|
||||
addInstanceModal.value = type
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-out{
|
||||
padding: 16px 30px 53px 17px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.title{
|
||||
height: 58px;
|
||||
background: #fff;
|
||||
padding-left: 28px;
|
||||
padding-right: 36px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 17px;
|
||||
.search-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
.search-input{
|
||||
width: 232px;
|
||||
height: 36px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #30384F;
|
||||
margin-right: 13px;
|
||||
.search-input-icon{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url('/public/ailist/search_input_icon.png');
|
||||
}
|
||||
}
|
||||
.select-algorithm{
|
||||
margin-right: 13px;
|
||||
:deep(.ant-select-selector){
|
||||
width: 191px;
|
||||
height: 36px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #30384F;
|
||||
}
|
||||
:deep(.ant-select-selection-placeholder){
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
.search-button{
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
background: #0B60BD;
|
||||
border-radius: 4px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.add-instance{
|
||||
width: 148px;
|
||||
height: 36px;
|
||||
background: #0B60BD;
|
||||
border-radius: 4px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.show-list-div{
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
background: #fff;
|
||||
padding: 26px 26px 0px 26px;
|
||||
|
||||
.show-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 55px;
|
||||
.item-list{
|
||||
width: 300px;
|
||||
height: 291px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 5px 18px 32px 0px rgba(28,29,34,0.1);
|
||||
border-radius: 10px;
|
||||
.image-div{
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
.image-item{
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
.image-icon{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 46px;
|
||||
height: 16px;
|
||||
background: linear-gradient( 320deg, #6C90F5 0%, #3A57E8 100%);
|
||||
border-radius: 8px 0px 8px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 9px;
|
||||
color: #FFFFFF;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
.show-info-div{
|
||||
padding-left: 9px;
|
||||
padding-right: 12px;
|
||||
.info-title-div{
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
.info-icon{
|
||||
width: 3px;
|
||||
height: 34px;
|
||||
background: #0B60BD;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.info-title-inner{
|
||||
width: 100%;
|
||||
.info-title{
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #1C1D22;
|
||||
line-height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.info-subtitle{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: rgba(28,29,34,0.5);
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.show-more-info{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
.show-more-span{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #1C1D22;
|
||||
line-height: 15px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.show-more-icon{
|
||||
width: 12px;
|
||||
height: 8px;
|
||||
background-image: url('/public/instance/instance_show_more_icon.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-content-div{
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
background-image: url('/public/instance/instance_list_item_info_content.png');
|
||||
padding-top: 8px;
|
||||
padding-left: 12px;
|
||||
margin-bottom: 13px;
|
||||
.content-raw{
|
||||
display: flex;
|
||||
.content-label{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #1C1D22;
|
||||
line-height: 17px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.content-value{
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #1C1D22;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-footer{
|
||||
width: 100%;
|
||||
height: 23px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
padding-right: 12px;
|
||||
.item-del{
|
||||
width: 54px;
|
||||
height: 23px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #F2F2F2;
|
||||
margin-right: 7px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #E3150E;
|
||||
line-height: 15px;
|
||||
}
|
||||
.item-show{
|
||||
width: 54px;
|
||||
height: 23px;
|
||||
background: #0B60BD;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0B60BD;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-div{
|
||||
padding-right: 32px;
|
||||
// width: 100%;
|
||||
height: 69px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
border-top: 1px solid rgba(28,29,34,0.08);
|
||||
margin-left: -26px;
|
||||
margin-right: -26px;
|
||||
padding-right: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.instance-show-more-info-popover{
|
||||
.ant-popover-inner{
|
||||
background-color: rgba(5, 5, 5, 0.56);
|
||||
}
|
||||
.show-more-content{
|
||||
width: 232px;
|
||||
.content-raw{
|
||||
display: flex;
|
||||
.content-label{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
line-height: 17px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.content-value{
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.instance-show-info-drawer{
|
||||
.ant-drawer-body{
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,43 +0,0 @@
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '按钮名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: 'DOMID',
|
||||
dataIndex: 'domId',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
},
|
||||
{
|
||||
title: '样式',
|
||||
dataIndex: 'class',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabledMark',
|
||||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
const color = record.status == 1 ? 'blue' : 'red';
|
||||
const text = record.status == 1 ? '启用' : '停用';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '关键字',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,23 @@
|
||||
|
||||
export type ModelLabelsType = {
|
||||
id?: string,
|
||||
name: string,
|
||||
enumValue: string,
|
||||
reliability: string,
|
||||
pId?: string,
|
||||
}
|
||||
export type DataListType = {
|
||||
createTime: string,
|
||||
describe: string,
|
||||
id: string,
|
||||
modelLabels: ModelLabelsType[],
|
||||
name: string,
|
||||
path: string,
|
||||
pic: string,
|
||||
pullUrl: string,
|
||||
pushUrl: string,
|
||||
secretKey: string,
|
||||
serviceUrl: string,
|
||||
size: string,
|
||||
type: number
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
export { default as RecordList } from './recordList.vue';
|
||||
export { default as RecordListEditInfo } from './recordListEditInfo.vue';
|
||||
export { default as RecordNewBuild } from './recordNewBuild.vue';
|
||||
export { default as ModalChooseObject } from './modalChooseObject.vue';
|
||||
export { default as ImageContrast } from './imageContrast.vue';
|
||||
@ -0,0 +1,139 @@
|
||||
[
|
||||
{
|
||||
"id": "0",
|
||||
"name": "变化检测_2024-05-15 17:13:27",
|
||||
"time": "2024-05-15 17:13:27",
|
||||
"name1": "测试返回数据1 2025-08-02 09:59:23",
|
||||
"name2": "测试返回数据2 2025-08-02 10:24:31",
|
||||
"changeRegion": "47",
|
||||
"airLineName": "",
|
||||
"filterCar": "",
|
||||
"num": "",
|
||||
"imageGroup": [
|
||||
{
|
||||
"id": "01",
|
||||
"title1": "DJL_20230825170915_0003_W_广角1",
|
||||
"time1": "2023-08-25 17:22:56",
|
||||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"imageJson": []
|
||||
},
|
||||
{
|
||||
"id": "02",
|
||||
"title1": "DJL_20230825170915_0003_W_广角1",
|
||||
"time1": "2023-08-25 17:22:56",
|
||||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"imageJson": []
|
||||
},
|
||||
{
|
||||
"id": "03",
|
||||
"title1": "DJL_20230825170915_0003_W_广角1",
|
||||
"time1": "2023-08-25 17:22:56",
|
||||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"imageJson": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1",
|
||||
"name": "变化检测_2024-05-25 17:13:27",
|
||||
"time": "2024-05-25 17:13:27",
|
||||
"name1": "2024-05-25 17:13:27",
|
||||
"name2": "2024-05-25 17:13:27",
|
||||
"changeRegion": "47",
|
||||
"imageGroup": [
|
||||
{
|
||||
"id": "11",
|
||||
"title1": "DJL_20230825170915_0003_W_广角1",
|
||||
"time1": "2023-08-25 17:22:56",
|
||||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"imageJson": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "变化检测_2024-06-05 17:13:27",
|
||||
"time": "2024-06-05 17:13:27",
|
||||
"name1": "2024-06-05 17:13:27",
|
||||
"name2": "2024-06-05 17:13:27",
|
||||
"changeRegion": "47",
|
||||
"imageGroup": [
|
||||
{
|
||||
"id": "21",
|
||||
"title1": "DJL_20230825170915_0003_W_广角1",
|
||||
"time1": "2023-08-25 17:22:56",
|
||||
"size1": "8M",
|
||||
"width1": 1024,
|
||||
"height1": 576,
|
||||
"url1": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"title2": "DJL_20240925170915_0003_W_广角1",
|
||||
"time2": "2024-09-25 17:22:56",
|
||||
"size2": "8M",
|
||||
"width2": 1024,
|
||||
"height2": 576,
|
||||
"url2": "https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871",
|
||||
"imageJson": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "变化检测_2024-06-25 17:13:27",
|
||||
"time": "2024-06-25 17:13:27",
|
||||
"name1": "2024-06-25 17:13:27",
|
||||
"name2": "2024-06-25 17:13:27",
|
||||
"changeRegion": "47"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"name": "变化检测_2024-06-25 17:13:27",
|
||||
"time": "2024-06-25 17:13:27",
|
||||
"name1": "2024-06-25 17:13:27",
|
||||
"name2": "2024-06-25 17:13:27",
|
||||
"changeRegion": "47"
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"name": "变化检测_2024-06-25 17:13:27",
|
||||
"time": "2024-06-25 17:13:27",
|
||||
"name1": "2024-06-25 17:13:27",
|
||||
"name2": "2024-06-25 17:13:27",
|
||||
"changeRegion": "47"
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,362 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="shade-container" v-if="drawarea"></div>
|
||||
<div class="airport-information">
|
||||
<div class="title">选择AI算法实例<span> 航飞要求 </span></div>
|
||||
<div class="content">
|
||||
<div class="content-edit instantiate" @click="instantiateVisible = !instantiateVisible">
|
||||
<div class="input-result">
|
||||
<span :style="{ backgroundColor: instantiateItem.bgColor }">
|
||||
{{ instantiateItem.type }}</span
|
||||
>
|
||||
{{ instantiateItem.label }}
|
||||
</div>
|
||||
<UpOutlined v-if="instantiateVisible" />
|
||||
<DownOutlined v-else />
|
||||
<div class="select-result" v-if="instantiateVisible">
|
||||
<div
|
||||
v-for="(item, index) in instantiateOptions"
|
||||
:key="index"
|
||||
@click="instantiateSelect(item)"
|
||||
>
|
||||
<span :style="{ backgroundColor: item.bgColor }">{{ item.type }}</span>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-edit space">
|
||||
<span>空间约束范围</span>
|
||||
<div class="space-content">
|
||||
<span>导入KML</span>
|
||||
<span @click="drawarea = true"><PlusOutlined />新增</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<span>识别时间范围</span>
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
<a-select v-model:value="data.time" :options="timeOptions" />
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<span>触发动作</span>
|
||||
</div>
|
||||
<div class="content-edit" style="border: none">
|
||||
<a-radio-group v-model:value="data.action" button-style="solid">
|
||||
<a-radio-button value="1">关闭</a-radio-button>
|
||||
<a-radio-button value="2">等待接管</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div class="content-title">
|
||||
<span>警告提示</span>
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
<a-input v-model:value="data.code" placeholder="异常提示" />
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
<a-textarea v-model:value="data.desc" placeholder="识别到异常目标" />
|
||||
</div>
|
||||
<div class="content-button">
|
||||
<a-button type="primary" style="background: #3a57e8" @click="emits('changePatrol')"
|
||||
>取消</a-button
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="background: #0a99eb; margin-left: 20px"
|
||||
@click="emits('changeLoadControl')"
|
||||
>确定</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="patrol-map" v-if="drawarea">
|
||||
<div class="title">绘制范围</div>
|
||||
<div class="map-container">
|
||||
<div class="map-container-content">
|
||||
<Map :drawArea="drawarea" @areaData="getAreaData" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-button">
|
||||
<a-button type="primary" style="background: #3a57e8" @click="drawarea = false"
|
||||
>取消</a-button
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="background: #0a99eb; margin-left: 20px"
|
||||
@click="patrolMapConfirm"
|
||||
>确定</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch, onMounted } from 'vue';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import {
|
||||
InfoCircleOutlined,
|
||||
DownOutlined,
|
||||
UpOutlined,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { Map } from '../index';
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
const emits = defineEmits(['changePatrol']);
|
||||
const props = defineProps({});
|
||||
const data = reactive({
|
||||
instantiate: null,
|
||||
code: '',
|
||||
desc: '',
|
||||
action: '1',
|
||||
time: null,
|
||||
area: null,
|
||||
});
|
||||
const bgOptions = ref(['#6909B2', '#09B284', '#B2AA09', '#E240BD', '#E24040']);
|
||||
const instantiateVisible = ref(false);
|
||||
const instantiateOptions = ref([
|
||||
{
|
||||
label: '疑似违停车辆识别',
|
||||
type: '违停车辆',
|
||||
value: '1',
|
||||
bgColor: bgOptions.value[0],
|
||||
},
|
||||
{
|
||||
label: '疑似违停车辆识别',
|
||||
type: '违停车辆',
|
||||
value: '1',
|
||||
bgColor: bgOptions.value[2],
|
||||
},
|
||||
]);
|
||||
const timeOptions = ref([
|
||||
{
|
||||
label: '全天',
|
||||
value: 'day',
|
||||
},
|
||||
]);
|
||||
const instantiateItem = ref({});
|
||||
const instantiateSelect = (val) => {
|
||||
data.instantiate = val.value;
|
||||
instantiateItem.value = val;
|
||||
};
|
||||
const drawarea = ref(false);
|
||||
const getAreaData = (val) => {
|
||||
console.log(val);
|
||||
data.area = val;
|
||||
};
|
||||
const patrolMapConfirm = () => {
|
||||
if (!data.area) {
|
||||
createMessage.warning('请绘制区域');
|
||||
return;
|
||||
}
|
||||
drawarea.value = false;
|
||||
};
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.shade-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
|
||||
border-bottom: 1px solid #4e5778;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span {
|
||||
color: #f2762d;
|
||||
font-size: 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #f2762d;
|
||||
display: inline-block;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
}
|
||||
.content-button {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.airport-information {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 140px;
|
||||
width: 290px;
|
||||
padding: 10px;
|
||||
background: #0d0e15;
|
||||
margin: 10px 0 0 10px;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
|
||||
.content-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #4e5778;
|
||||
padding: 10px 0;
|
||||
.item-div {
|
||||
width: 49%;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #4e5778;
|
||||
margin-top: 10px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
input {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
textarea {
|
||||
background: none;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .ant-select-selector {
|
||||
background: none;
|
||||
width: 220px;
|
||||
border: none;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.instantiate {
|
||||
padding: 4px 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
div {
|
||||
span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.input-result {
|
||||
span {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.select-result {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: -2%;
|
||||
width: 104%;
|
||||
background: #0d0e15;
|
||||
box-shadow:
|
||||
0px 5px 15px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px 0px 18px 0px rgba(58, 87, 232, 0.73);
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
z-index: 2;
|
||||
border: 1px solid #4e5778;
|
||||
div {
|
||||
padding: 10px 6px;
|
||||
border-bottom: 1px solid #1c1c1c;
|
||||
span {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.space {
|
||||
padding: 10px 4px;
|
||||
font-size: 14px;
|
||||
.space-content {
|
||||
> span {
|
||||
color: #f2762d;
|
||||
border: 1px solid #f2762d;
|
||||
padding: 4px 8px;
|
||||
border-radius: 18px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
margin-left: 10px;
|
||||
color: #0377f6;
|
||||
border: 1px solid #0377f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-title {
|
||||
padding-top: 10px;
|
||||
.anticon {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-radio-group {
|
||||
width: 100%;
|
||||
margin: 2px;
|
||||
}
|
||||
::v-deep .ant-radio-button-wrapper {
|
||||
border: none;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
background: #0b234d;
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px -1px 5px 0px rgba(213, 220, 255, 0.73);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .ant-radio-button-wrapper-checked {
|
||||
background: #0377f6;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px -1px 5px 0px rgba(213, 220, 255, 0.73);
|
||||
}
|
||||
}
|
||||
.patrol-map {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: calc(50% - 400px);
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
background: #0d0e15;
|
||||
margin: 10px 0 0 10px;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
z-index: 1001;
|
||||
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.map-container-content {
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="shade-container"></div>
|
||||
<div class="patrol-map" v-if="step == 1">
|
||||
<div class="title">绘制范围</div>
|
||||
<div class="map-container">
|
||||
<div class="map-container-content">
|
||||
<Map :drawArea="drawarea" @areaData="getAreaData" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-button">
|
||||
<a-button type="primary" style="background: #3a57e8" @click="emits('changeReport')"
|
||||
>取消</a-button
|
||||
>
|
||||
<a-button type="primary" style="background: #0a99eb; margin-left: 20px" @click="nextStep"
|
||||
>下一步</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="airport-information" v-else>
|
||||
<div class="title">关联事件</div>
|
||||
<div class="content">
|
||||
<div class="content-edit">
|
||||
<span class="edit-title">发生时间</span>
|
||||
<a-input v-model:value="data.time" placeholder="异常提示" readonly />
|
||||
</div>
|
||||
<div class="content-edit instantiate">
|
||||
<span class="edit-title">关联事件</span>
|
||||
<div class="input-container" @click="instantiateVisible = !instantiateVisible">
|
||||
<div class="input-result">
|
||||
<span :style="{ backgroundColor: instantiateItem.bgColor }">
|
||||
{{ instantiateItem.type }}</span
|
||||
>
|
||||
{{ instantiateItem.label }}
|
||||
</div>
|
||||
<UpOutlined v-if="instantiateVisible" />
|
||||
<DownOutlined v-else />
|
||||
</div>
|
||||
<div class="select-result" v-if="instantiateVisible">
|
||||
<div
|
||||
v-for="(item, index) in instantiateOptions"
|
||||
:key="index"
|
||||
@click="instantiateSelect(item)"
|
||||
>
|
||||
<span :style="{ backgroundColor: item.bgColor }">{{ item.type }}</span>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
<span class="edit-title">描述</span>
|
||||
<a-input v-model:value="data.desc" />
|
||||
</div>
|
||||
<div class="content-edit">
|
||||
<span class="edit-title">发生位置</span>
|
||||
<a-input v-model:value="data.location" readonly />
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="map-view">
|
||||
<div class="map-view-container">
|
||||
<div class="map-view-container-content">
|
||||
<Map :polygonArea="data.area" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-button">
|
||||
<a-button type="primary" style="background: #3a57e8" @click="lastStep">取消</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="background: #0a99eb; margin-left: 20px"
|
||||
@click="reportConfirm"
|
||||
>提交关联</a-button
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="background: #0a99eb; margin-left: 20px"
|
||||
@click="reportConfirm"
|
||||
>上报新事件</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch, onMounted } from 'vue';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { InfoCircleOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue';
|
||||
import { Map } from '../index';
|
||||
|
||||
const step = ref(1);
|
||||
const { createMessage } = useMessage();
|
||||
const emits = defineEmits(['changeReport']);
|
||||
const props = defineProps({});
|
||||
const data = reactive({
|
||||
location: null,
|
||||
instantiate: '',
|
||||
desc: '',
|
||||
time: null,
|
||||
area: null,
|
||||
});
|
||||
const bgOptions = ref(['#6909B2', '#09B284', '#B2AA09', '#E240BD', '#E24040']);
|
||||
const instantiateVisible = ref(false);
|
||||
const instantiateOptions = ref([
|
||||
{
|
||||
label: '疑似违停车辆识别',
|
||||
type: '违停车辆',
|
||||
value: '1',
|
||||
bgColor: bgOptions.value[0],
|
||||
},
|
||||
{
|
||||
label: '疑似违停车辆识别',
|
||||
type: '违停车辆',
|
||||
value: '1',
|
||||
bgColor: bgOptions.value[2],
|
||||
},
|
||||
]);
|
||||
const instantiateItem = ref({});
|
||||
const instantiateSelect = (val) => {
|
||||
data.instantiate = val.value;
|
||||
instantiateItem.value = val;
|
||||
instantiateVisible.value = false;
|
||||
};
|
||||
const drawarea = ref(true);
|
||||
const getAreaData = (val) => {
|
||||
console.log(val);
|
||||
data.area = val;
|
||||
const center = getPointsCalculateCenter(val);
|
||||
data.location = center[1] + '°E,' + center[0] + '°N';
|
||||
};
|
||||
const nextStep = () => {
|
||||
if (!data.area) {
|
||||
createMessage.warning('请绘制区域');
|
||||
return;
|
||||
}
|
||||
step.value = 2;
|
||||
};
|
||||
const lastStep = () => {
|
||||
step.value = 1;
|
||||
};
|
||||
const reportConfirm = () => {};
|
||||
const getPointsCalculateCenter = (points) => {
|
||||
let point_num = points.length; //坐标点个数
|
||||
let X = 0,
|
||||
Y = 0,
|
||||
Z = 0;
|
||||
for (let i = 0; i < points.length; i++) {
|
||||
if (points[i] == '') {
|
||||
continue;
|
||||
}
|
||||
let point = points[i];
|
||||
let lat, lng, x, y, z;
|
||||
lat = (parseFloat(point[1]) * Math.PI) / 180;
|
||||
lng = (parseFloat(point[0]) * Math.PI) / 180;
|
||||
x = Math.cos(lat) * Math.cos(lng);
|
||||
y = Math.cos(lat) * Math.sin(lng);
|
||||
z = Math.sin(lat);
|
||||
X += x;
|
||||
Y += y;
|
||||
Z += z;
|
||||
}
|
||||
X = X / point_num;
|
||||
Y = Y / point_num;
|
||||
Z = Z / point_num;
|
||||
let tmp_lng = Math.atan2(Y, X);
|
||||
let tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
|
||||
return [(tmp_lat * 180) / Math.PI, (tmp_lng * 180) / Math.PI];
|
||||
};
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.shade-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
|
||||
border-bottom: 1px solid #4e5778;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
color: #f2762d;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.content-button {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.airport-information {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: calc(50% - 360px);
|
||||
width: 700px;
|
||||
padding: 10px;
|
||||
background: #0d0e15;
|
||||
margin: 10px 0 0 10px;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
z-index: 1001;
|
||||
|
||||
.content-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #4e5778;
|
||||
padding: 10px 0;
|
||||
.item-div {
|
||||
width: 49%;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-edit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 14px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
width: 49%;
|
||||
float: left;
|
||||
.edit-title {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
input {
|
||||
background: none;
|
||||
border: 1px solid #4e5778;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
textarea {
|
||||
background: none;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .ant-select-selector {
|
||||
background: none;
|
||||
width: 220px;
|
||||
border: 1px solid #4e5778;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.instantiate {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.input-container {
|
||||
width: 100%;
|
||||
border: 1px solid #4e5778;
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.input-result {
|
||||
width: 92%;
|
||||
height: 26px;
|
||||
|
||||
span {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.select-result {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #0d0e15;
|
||||
box-shadow:
|
||||
0px 5px 15px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px 0px 18px 0px rgba(58, 87, 232, 0.73);
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
z-index: 2;
|
||||
border: 1px solid #4e5778;
|
||||
div {
|
||||
padding: 10px 6px;
|
||||
border-bottom: 1px solid #1c1c1c;
|
||||
span {
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.space {
|
||||
padding: 10px 4px;
|
||||
font-size: 14px;
|
||||
.space-content {
|
||||
span {
|
||||
color: #f2762d;
|
||||
border: 1px solid #f2762d;
|
||||
padding: 4px 6px;
|
||||
border-radius: 18px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
margin-left: 10px;
|
||||
color: #0377f6;
|
||||
border: 1px solid #0377f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-title {
|
||||
padding-top: 10px;
|
||||
.anticon {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
::v-deep .ant-radio-group {
|
||||
width: 100%;
|
||||
margin: 2px;
|
||||
}
|
||||
::v-deep .ant-radio-button-wrapper {
|
||||
border: none;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
background: #0b234d;
|
||||
color: #fff;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px -1px 5px 0px rgba(213, 220, 255, 0.73);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::v-deep .ant-radio-button-wrapper-checked {
|
||||
background: #0377f6;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px -1px 5px 0px rgba(213, 220, 255, 0.73);
|
||||
}
|
||||
}
|
||||
.patrol-map {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: calc(50% - 400px);
|
||||
width: 900px;
|
||||
height: 600px;
|
||||
padding: 10px;
|
||||
background: #0d0e15;
|
||||
margin: 10px 0 0 10px;
|
||||
box-shadow:
|
||||
0px 10px 30px 0px rgba(0, 0, 6, 0.15),
|
||||
inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
z-index: 1001;
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.map-container-content {
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
.map-view {
|
||||
margin-top: 20px;
|
||||
.map-view-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.map-view-container-content {
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
.clearfix {
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue