Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -119,9 +119,8 @@ export const searchFormSchema: FormSchema[] = [
|
||||||
colProps: { span: 4 },
|
colProps: { span: 4 },
|
||||||
componentProps: {
|
componentProps: {
|
||||||
options: [
|
options: [
|
||||||
{ label: '农用地', value: '农用地' },
|
{ label: '部级矿产卫片图斑', value: '部级矿产卫片图斑' },
|
||||||
{ label: '建设用地', value: '建设用地' },
|
{ label: '省级矿产卫片图斑', value: '省级矿产卫片图斑' },
|
||||||
{ label: '推堆土', value: '推堆土' },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -121,17 +121,20 @@ function handlerLoadPolygon(code="",filter="",type="",level=""){
|
||||||
case "合法":
|
case "合法":
|
||||||
map_filter = ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]];
|
map_filter = ["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]];
|
||||||
break;
|
break;
|
||||||
case "违法":
|
|
||||||
map_filter = ["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]];
|
|
||||||
break;
|
|
||||||
case "其他":
|
case "其他":
|
||||||
map_filter = ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]];
|
map_filter = ["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]];
|
||||||
break;
|
break;
|
||||||
case "补办手续":
|
case "补办手续":
|
||||||
map_filter = ["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]];
|
map_filter = ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]];
|
||||||
break;
|
break;
|
||||||
case "拆除复耕":
|
case "拆除复耕":
|
||||||
map_filter = ["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]];
|
map_filter = ["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 5]];
|
||||||
|
break;
|
||||||
|
case "违法":
|
||||||
|
map_filter = ["any",
|
||||||
|
["all",["!=",["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]],
|
||||||
|
["all",["==", ["get", "is_illegal"], 1],["!=", ["get", "measure_name"], "0"],["!=", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]]
|
||||||
|
];
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
map_filter = ["!=", ["get", "gid"], 0];
|
map_filter = ["!=", ["get", "gid"], 0];
|
||||||
|
|
@ -186,25 +189,24 @@ function handlerLoadPolygon(code="",filter="",type="",level=""){
|
||||||
'layout': {
|
'layout': {
|
||||||
'line-join': 'round',
|
'line-join': 'round',
|
||||||
'line-cap': 'round',
|
'line-cap': 'round',
|
||||||
// 'visibility':polygonVisibility.value,
|
'visibility':polygonVisibility.value,
|
||||||
'visiblity':'none'
|
|
||||||
},
|
},
|
||||||
'filter':map_filter,
|
'filter':map_filter,
|
||||||
'paint': {
|
'paint': {
|
||||||
'line-color': [
|
'line-color': [
|
||||||
"case",
|
"case",
|
||||||
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]], //补办手续
|
|
||||||
"#AD04F4",
|
|
||||||
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]], //拆除复耕
|
|
||||||
"#F4E004",
|
|
||||||
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
||||||
"#0AF703",
|
"#0AF703",
|
||||||
["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
|
|
||||||
"#F70303",
|
|
||||||
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
||||||
"#0382F7",
|
"#0382F7",
|
||||||
|
["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]], //补办手续
|
||||||
|
"#AD04F4",
|
||||||
|
["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 5]], //拆除复耕
|
||||||
|
"#F4E004",
|
||||||
|
["any",["all",["!=",["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]],["all",["==", ["get", "is_illegal"], 1],["!=", ["get", "measure_name"], "0"],["!=", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]]], //违法
|
||||||
|
"#F70303",
|
||||||
// 默认
|
// 默认
|
||||||
"#ffff00",
|
"#F70303",
|
||||||
],
|
],
|
||||||
'line-width': 5
|
'line-width': 5
|
||||||
}
|
}
|
||||||
|
|
@ -227,19 +229,19 @@ function handlerLoadPolygon(code="",filter="",type="",level=""){
|
||||||
},
|
},
|
||||||
'paint': {
|
'paint': {
|
||||||
'fill-color': [
|
'fill-color': [
|
||||||
"case",
|
"case",
|
||||||
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 4]], //补办手续
|
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
||||||
"#AD04F4",
|
"#0AF703",
|
||||||
["all",["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 3]], //拆除复耕
|
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
||||||
"#F4E004",
|
"#0382F7",
|
||||||
["all",["==", ["get", "is_illegal"], 0],["==", ["get", "handle_status_id"], 5]], //合法
|
["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]], //补办手续
|
||||||
"#0AF703",
|
"#AD04F4",
|
||||||
["any",["==", ["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]], //违法
|
["all",["==", ["get", "is_illegal"], 1],["==", ["get", "measure_name"], "0"],["==", ["get", "handle_status_id"], 5]], //拆除复耕
|
||||||
"#F70303",
|
"#F4E004",
|
||||||
["all",["==", ["get", "is_illegal"], 2],["==", ["get", "handle_status_id"], 5]], //其他
|
["any",["all",["!=",["get", "is_illegal"], 1],["!=", ["get", "handle_status_id"], 5]],["all",["==", ["get", "is_illegal"], 1],["!=", ["get", "measure_name"], "0"],["!=", ["get", "measure_name"], "1"],["==", ["get", "handle_status_id"], 5]]], //违法
|
||||||
"#0382F7",
|
"#F70303",
|
||||||
// 默认
|
// 默认
|
||||||
"#ffff00",
|
"#F70303",
|
||||||
],
|
],
|
||||||
'fill-opacity': 0.5
|
'fill-opacity': 0.5
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,139 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
|
<!-- layout -->
|
||||||
|
<div class="main-header">
|
||||||
|
<div class="title">
|
||||||
|
|
||||||
|
<img src="/public/statistical/logo.png" alt="" /> {{ t('sys.subject.header_title') }}
|
||||||
|
<div class="user-info" style="z-index:9999;">
|
||||||
|
<span style="color: #325e95">{{ fireUserLoginName }}</span>
|
||||||
|
|
||||||
|
<span style="color: #ddd" @click="logout">退出</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-bottom"></div>
|
||||||
|
<!-- map -->
|
||||||
<Map></Map>
|
<Map></Map>
|
||||||
|
|
||||||
|
<!-- layer controller -->
|
||||||
|
<LayerControl @handlerLayerButtonClick="handlerLayerButtonClick"></LayerControl>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="data-container">
|
||||||
|
<!-- case list -->
|
||||||
|
<CaseList></CaseList>
|
||||||
|
<!-- uav -->
|
||||||
|
<UAV></UAV>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import Map from './VideoSupervision/map/map.vue'
|
import Map from './VideoSupervision/map/map.vue'
|
||||||
import { ref } from 'vue';
|
import LayerControl from "./VideoSupervision/layercontrol/index.vue"
|
||||||
|
import CaseList from "./VideoSupervision/caselist/index.vue";
|
||||||
|
import UAV from './VideoSupervision/uav/uav.vue'
|
||||||
|
import { ref,onMounted,h } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { PageEnum } from '@/enums/pageEnum';
|
||||||
|
const router = useRouter();
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
|
const { t } = useI18n();
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
import { useMultipleTabStore } from '@/store/modules/multipleTab';
|
||||||
|
const { createConfirm } = useMessage();
|
||||||
|
// layer control
|
||||||
|
function handlerLayerButtonClick(item){
|
||||||
|
console.log(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
const fireUserLoginName = ref(localStorage.getItem('fireUserLoginName'));
|
||||||
|
function getFireUserLoginName() {
|
||||||
|
fireUserLoginName.value = localStorage.getItem('fireUserLoginName')
|
||||||
|
? localStorage.getItem('fireUserLoginName')
|
||||||
|
: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabStore = useMultipleTabStore();
|
||||||
|
function logout() {
|
||||||
|
createConfirm({
|
||||||
|
iconType: 'warning',
|
||||||
|
title: () => h('span', t('sys.navigation.logoutTip')),
|
||||||
|
content: () => h('span', t('sys.navigation.logoutMessage')),
|
||||||
|
onOk: async () => {
|
||||||
|
tabStore.resetState();
|
||||||
|
await router.replace(PageEnum.SUBJECT_HOME);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// getWeather();
|
||||||
|
getFireUserLoginName();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style type="less" scoped>
|
<style type="less" scoped>
|
||||||
.main-container {
|
.main-container {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
position:relative;
|
||||||
|
top:0px;
|
||||||
|
left:0px;
|
||||||
|
z-index:0;
|
||||||
|
.main-header{
|
||||||
|
width:100vw;
|
||||||
|
height:120px;
|
||||||
|
background:url("/public/videosupervision/main-top.png");
|
||||||
|
background-size:100% 100%;
|
||||||
|
position:absolute;
|
||||||
|
top:0px;
|
||||||
|
left:0px;
|
||||||
|
z-index:2;
|
||||||
|
.title{
|
||||||
|
width:600px;
|
||||||
|
height:90px;
|
||||||
|
margin:0px auto;
|
||||||
|
font-size:40px;
|
||||||
|
color:#fff;
|
||||||
|
font-weight:bold;
|
||||||
|
.user-info {
|
||||||
|
width: 120px;
|
||||||
|
color: #e1e1e1;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index:9;
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #8be5ee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.main-bottom{
|
||||||
|
height:50px;
|
||||||
|
width: calc( 100vw - 30px);
|
||||||
|
|
||||||
|
position:absolute;
|
||||||
|
bottom:10px;
|
||||||
|
left:15px;
|
||||||
|
z-index:2;
|
||||||
|
background:url("/public/videosupervision/main-bottom.png");
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
.data-container{
|
||||||
|
width:418px;
|
||||||
|
position:absolute;
|
||||||
|
top:50%;
|
||||||
|
right:24px;
|
||||||
|
transform:translate(0,-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
<template>
|
||||||
|
<div class="case-list-container">
|
||||||
|
<div class="title">
|
||||||
|
复飞核实
|
||||||
|
<div class="switch-button">
|
||||||
|
<a-switch v-model:checked="checked" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {ref} from 'vue';
|
||||||
|
const checked = ref<Boolean>(true);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style type="less" scoped>
|
||||||
|
.case-list-container{
|
||||||
|
width: 418px;
|
||||||
|
height: 440px;
|
||||||
|
background:#041B36;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom:20px;
|
||||||
|
&::before{
|
||||||
|
content:"";
|
||||||
|
height:70%;
|
||||||
|
width:50px;
|
||||||
|
position:absolute;
|
||||||
|
bottom:10px;
|
||||||
|
left:10px;
|
||||||
|
background:url("/public/videosupervision/main-left.png");
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
&::after{
|
||||||
|
content:"";
|
||||||
|
height:70%;
|
||||||
|
width:50px;
|
||||||
|
position:absolute;
|
||||||
|
bottom:10px;
|
||||||
|
right:10px;
|
||||||
|
background:url("/public/videosupervision/main-right.png");
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
width:100%;
|
||||||
|
height:40px;
|
||||||
|
background-image:url("/public/videosupervision/title.png");
|
||||||
|
background-size:100% 100%;
|
||||||
|
line-height:40px;
|
||||||
|
text-indent:18px;
|
||||||
|
font-size:18px;
|
||||||
|
font-weight:bold;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
.switch-button{
|
||||||
|
float:right;
|
||||||
|
margin-right:20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
<template>
|
||||||
|
<div class="layer-controler-container">
|
||||||
|
<div class="layer-button-item"
|
||||||
|
v-for="(item,index) in layerButtons"
|
||||||
|
:key="index"
|
||||||
|
@click="handlerLayerButtonClick(item,index)"
|
||||||
|
:style="{'background-image':item.checked?'url(/public/videosupervision/layer-button-active.png)':'url(/public/videosupervision/layer-button.png)'}"
|
||||||
|
>
|
||||||
|
{{ item.lable }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
import { ref,defineEmits } from 'vue';
|
||||||
|
|
||||||
|
const layerButtons = ref([
|
||||||
|
{
|
||||||
|
lable:"航飞区域",
|
||||||
|
value:"",
|
||||||
|
checked:false,
|
||||||
|
},{
|
||||||
|
lable:"航飞规划",
|
||||||
|
value:"",
|
||||||
|
checked:false,
|
||||||
|
},{
|
||||||
|
lable:"视频监控",
|
||||||
|
value:"",
|
||||||
|
checked:false,
|
||||||
|
},{
|
||||||
|
lable:"影像图",
|
||||||
|
value:"",
|
||||||
|
checked:false,
|
||||||
|
},{
|
||||||
|
lable:"导航图",
|
||||||
|
value:"",
|
||||||
|
checked:false,
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const emits = defineEmits(["handlerLayerButtonClick"])
|
||||||
|
|
||||||
|
function handlerLayerButtonClick(item,index){
|
||||||
|
layerButtons.value[index].checked = !layerButtons.value[index].checked
|
||||||
|
emits("handlerLayerButtonClick",layerButtons.value[index]);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style type="less" scoped>
|
||||||
|
.layer-controler-container {
|
||||||
|
width: 160px;
|
||||||
|
position: absolute;
|
||||||
|
top:50%;
|
||||||
|
left:50px;
|
||||||
|
transform: translate(0,-50%);
|
||||||
|
z-index:2;
|
||||||
|
.layer-button-item{
|
||||||
|
width:100%;
|
||||||
|
height:60px;
|
||||||
|
margin-bottom:15px;
|
||||||
|
background:rgba(0,0,0,0.2);
|
||||||
|
color:#fff;
|
||||||
|
text-align:center;
|
||||||
|
line-height:60px;
|
||||||
|
cursor:pointer;
|
||||||
|
background-image:url("/public/videosupervision/layer-button.png");
|
||||||
|
background-size:100% 100%;
|
||||||
|
font-size:16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<div class="uav-container">
|
||||||
|
<div class="title">
|
||||||
|
航飞实景
|
||||||
|
<div class="switch-button">
|
||||||
|
<a-switch v-model:checked="checked" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {ref} from 'vue';
|
||||||
|
const checked = ref<Boolean>(true);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style type="less" scoped>
|
||||||
|
.uav-container{
|
||||||
|
width: 418px;
|
||||||
|
height: 300px;
|
||||||
|
background:#041B36;
|
||||||
|
position: relative;
|
||||||
|
&::before{
|
||||||
|
content:"";
|
||||||
|
height:70%;
|
||||||
|
width:50px;
|
||||||
|
position:absolute;
|
||||||
|
bottom:10px;
|
||||||
|
left:10px;
|
||||||
|
background:url("/public/videosupervision/main-left.png");
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
&::after{
|
||||||
|
content:"";
|
||||||
|
height:70%;
|
||||||
|
width:50px;
|
||||||
|
position:absolute;
|
||||||
|
bottom:10px;
|
||||||
|
right:10px;
|
||||||
|
background:url("/public/videosupervision/main-right.png");
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
width:100%;
|
||||||
|
height:40px;
|
||||||
|
background-image:url("/public/videosupervision/title.png");
|
||||||
|
background-size:100% 100%;
|
||||||
|
line-height:40px;
|
||||||
|
text-indent:18px;
|
||||||
|
font-size:18px;
|
||||||
|
font-weight:bold;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
.switch-button{
|
||||||
|
float:right;
|
||||||
|
margin-right:20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||