冲突解决
commit
94e5911303
|
|
@ -1,274 +1,316 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="statistical" id="bg-pan">
|
<div class="statistical" id="bg-pan">
|
||||||
|
<Map
|
||||||
<Map
|
@onload="handlerOnMapLoad"
|
||||||
@onload="handlerOnMapLoad"
|
@handlerGetDetails="handlerGetDetails"
|
||||||
@handlerGetDetails="handlerGetDetails"
|
style="
|
||||||
style="position: absolute; top: 0px; left: 0px;height: calc( 100vh - 80px);width:100%;z-index:0;"
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: calc(100vh - 80px);
|
||||||
|
width: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
"
|
||||||
ref="MapboxComponent"
|
ref="MapboxComponent"
|
||||||
@showMonitor="showMonitor"
|
@showMonitor="showMonitor"
|
||||||
@handlerQueryIntersectTif="handlerQueryIntersectTif"
|
@handlerQueryIntersectTif="handlerQueryIntersectTif"
|
||||||
></Map>
|
:layer="layerSettings"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
<div style="position: absolute; left:60px; bottom: 20px; z-index:1;">
|
|
||||||
<div :class="`button-item ${buttonSelect == 1? 'button-select': ''}`" style="margin-bottom: 10px" @click="changeLayer(1)">导航地图</div>
|
|
||||||
<div :class="`button-item ${buttonSelect == 2? 'button-select': ''}`" style="margin-bottom: 10px" @click="changeLayer(2)">卫星地图</div>
|
|
||||||
<div :class="`button-item ${buttonSelect == 3? 'button-select': ''}`" @click="changeLayer(3)">白板地图</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="legend">
|
|
||||||
<div class="legend-item" v-for="(item,index) in legends" :key="index">
|
|
||||||
<div class="legend-dot" :style="{background:item.color}"></div>
|
|
||||||
<div class="legend-label">{{item.label}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a-modal
|
|
||||||
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
|
||||||
wrap-class-name="full-modal"
|
|
||||||
v-model:open="showInfoOpen"
|
|
||||||
title="详情"
|
|
||||||
:footer="null"
|
|
||||||
:maskClosable="true"
|
|
||||||
:destroyOnClose="true"
|
|
||||||
@cancel="showInfoOpen = false"
|
|
||||||
>
|
|
||||||
<div class="modal-content">
|
|
||||||
<ShowInfoModal v-if="showInfoOpen" :showInfoData="showInfoData" />
|
|
||||||
</div>
|
|
||||||
</a-modal>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 图层控制 视频监控-->
|
|
||||||
|
|
||||||
<div class="layer-center-container">
|
|
||||||
<LayerCenter
|
|
||||||
@drawPolygon="drawPolygon"
|
|
||||||
@cancleDrawPolygon="cancleDrawPolygon"
|
|
||||||
@changeTifLayer="changeTifLayer"
|
|
||||||
ref="LayerCenterComponent"></LayerCenter>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="TC-videoi-container" v-if="showTCLPlayer" v-drag>
|
|
||||||
<div class="close-button" @click="showTCLPlayer = false;">
|
|
||||||
<CloseOutlined></CloseOutlined>
|
|
||||||
</div>
|
|
||||||
<Monitor v-if="showTCLPlayer" :play-url="playUrl"></Monitor>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div style="position: absolute; left: 60px; bottom: 20px; z-index: 1">
|
||||||
|
<div
|
||||||
|
:class="`button-item ${buttonSelect == 1 ? 'button-select' : ''}`"
|
||||||
|
style="margin-bottom: 10px"
|
||||||
|
@click="changeLayer(1)"
|
||||||
|
>导航地图</div
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:class="`button-item ${buttonSelect == 2 ? 'button-select' : ''}`"
|
||||||
|
style="margin-bottom: 10px"
|
||||||
|
@click="changeLayer(2)"
|
||||||
|
>卫星地图</div
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:class="`button-item ${buttonSelect == 3 ? 'button-select' : ''}`"
|
||||||
|
@click="changeLayer(3)"
|
||||||
|
>白板地图</div
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
|
||||||
import Map from './Converge/index.vue';
|
|
||||||
import layerButton from './mapComponent/left_layerButton.vue';
|
|
||||||
import statisticalType from './mapComponent/left_statisticalType.vue';
|
|
||||||
import county from './mapComponent/left_county.vue';
|
|
||||||
import DataScreen from './dataScreen/index.vue'
|
|
||||||
import Header from './mapComponent/top_title.vue'
|
|
||||||
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
|
||||||
import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
|
|
||||||
// details
|
|
||||||
const showInfoOpen = ref<Boolean>(false);
|
|
||||||
const showInfoData = ref();
|
|
||||||
const buttonSelect = ref(2)
|
|
||||||
|
|
||||||
const getInfoList = (id) => {
|
|
||||||
getCaseInfoById({id:id}).then(res => {
|
|
||||||
if(res){
|
|
||||||
showInfoData.value = res
|
|
||||||
showInfoOpen.value = true;
|
|
||||||
}else{
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
const MapboxComponent = ref();
|
|
||||||
const countyId = ref();
|
|
||||||
|
|
||||||
const legends = ref([
|
|
||||||
{
|
|
||||||
label:"违法",
|
|
||||||
color:"#F70303",
|
|
||||||
},{
|
|
||||||
label:"合法",
|
|
||||||
color:"#0AF703",
|
|
||||||
},{
|
|
||||||
label:"其他",
|
|
||||||
color:"#0382F7",
|
|
||||||
},{
|
|
||||||
label:"补办手续",
|
|
||||||
color:"#AD04F4",
|
|
||||||
},{
|
|
||||||
label:"拆除复耕",
|
|
||||||
color:"#F4E004",
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
function handlerOnMapLoad(){
|
|
||||||
|
|
||||||
}
|
<div class="legend">
|
||||||
|
<div class="legend-item" v-for="(item, index) in legends" :key="index">
|
||||||
function handlerGetDetails(e){
|
<div class="legend-dot" :style="{ background: item.color }"></div>
|
||||||
getInfoList(e.Id);
|
<div class="legend-label">{{ item.label }}</div>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
// 选择区县
|
|
||||||
const currentCounty = ref({ name: '', code: '' });
|
<a-modal
|
||||||
function countyClick(data) {
|
style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
|
||||||
countyId.value = data.id;
|
wrap-class-name="full-modal"
|
||||||
currentCounty.value = { name: data['name'], code: data['id'] };
|
v-model:open="showInfoOpen"
|
||||||
MapboxComponent.value.handlerChangeCounty(currentCounty.value);
|
title="详情"
|
||||||
}
|
:footer="null"
|
||||||
|
:maskClosable="true"
|
||||||
// 图例点击
|
:destroyOnClose="true"
|
||||||
function handlerChangePolygonType(data) {
|
@cancel="showInfoOpen = false"
|
||||||
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], data);
|
>
|
||||||
}
|
<div class="modal-content">
|
||||||
|
<ShowInfoModal v-if="showInfoOpen" :showInfoData="showInfoData" />
|
||||||
|
</div>
|
||||||
// 切换图斑类型
|
</a-modal>
|
||||||
function changeLandType(type):void{
|
|
||||||
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], "",type);
|
<!-- 图层控制 视频监控-->
|
||||||
}
|
|
||||||
const changeLayer = (value) => {
|
<div class="layer-center-container">
|
||||||
buttonSelect.value = value
|
<LayerCenter
|
||||||
switch(value){
|
@drawPolygon="drawPolygon"
|
||||||
case 1:
|
@cancleDrawPolygon="cancleDrawPolygon"
|
||||||
MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles',false)
|
@changeTifLayer="changeTifLayer"
|
||||||
MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles',true)
|
ref="LayerCenterComponent"
|
||||||
MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer',false)
|
></LayerCenter>
|
||||||
break;
|
</div>
|
||||||
case 2:
|
|
||||||
MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles',true)
|
<div class="TC-videoi-container" v-if="showTCLPlayer" v-drag>
|
||||||
MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles',false)
|
<div class="close-button" @click="showTCLPlayer = false">
|
||||||
MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer',false)
|
<CloseOutlined></CloseOutlined>
|
||||||
break;
|
</div>
|
||||||
case 3:
|
<Monitor v-if="showTCLPlayer" :play-url="playUrl"></Monitor>
|
||||||
MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles',false)
|
</div>
|
||||||
MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles',false)
|
</div>
|
||||||
MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer',true)
|
</template>
|
||||||
break;
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
||||||
|
import Map from './Converge/index.vue';
|
||||||
|
import layerButton from './mapComponent/left_layerButton.vue';
|
||||||
|
import statisticalType from './mapComponent/left_statisticalType.vue';
|
||||||
|
import county from './mapComponent/left_county.vue';
|
||||||
|
import DataScreen from './dataScreen/index.vue';
|
||||||
|
import Header from './mapComponent/top_title.vue';
|
||||||
|
import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
|
||||||
|
import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { getConfig } from '@/api/sys/layerManagement';
|
||||||
|
|
||||||
|
const route: any = useRoute();
|
||||||
|
const subject = ref(route.params.id);
|
||||||
|
const legends: any = ref([]);
|
||||||
|
const layerSettings = ref();
|
||||||
|
// details
|
||||||
|
const showInfoOpen = ref<Boolean>(false);
|
||||||
|
const showInfoData = ref();
|
||||||
|
const buttonSelect = ref(2);
|
||||||
|
|
||||||
|
const getInfoList = (id) => {
|
||||||
|
getCaseInfoById({ id: id }).then((res) => {
|
||||||
|
if (res) {
|
||||||
|
showInfoData.value = res;
|
||||||
|
showInfoOpen.value = true;
|
||||||
|
} else {
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const MapboxComponent = ref();
|
||||||
|
const countyId = ref();
|
||||||
|
|
||||||
/*图层控制 视频监控*/
|
function getLayerSettings() {
|
||||||
import LayerCenter from './mapComponent/layers/index.vue';
|
let title = '';
|
||||||
|
switch (subject.value) {
|
||||||
|
case '违法用地':
|
||||||
|
title = 'Subject_WFYD';
|
||||||
|
break;
|
||||||
|
case '非法采矿':
|
||||||
|
title = 'Subject_FFCK';
|
||||||
|
break;
|
||||||
|
case '耕地非粮化':
|
||||||
|
title = 'Subject_GDFLH';
|
||||||
|
break;
|
||||||
|
case '重点问题':
|
||||||
|
title = 'Subject_ZDWT';
|
||||||
|
break;
|
||||||
|
case '巡察审计':
|
||||||
|
title = 'Subject_XCSJ';
|
||||||
|
break;
|
||||||
|
case '生态保护红线监管':
|
||||||
|
title = 'Subject_STBHHXJG';
|
||||||
|
break;
|
||||||
|
case '生态修复':
|
||||||
|
title = 'Subject_STXF';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
getConfig({
|
||||||
|
code: title,
|
||||||
|
}).then((res) => {
|
||||||
|
let obj = JSON.parse(res.codeValue);
|
||||||
|
layerSettings.value = obj[0];
|
||||||
|
let legend = layerSettings.value.legend[0];
|
||||||
|
for (const key in legend) {
|
||||||
|
legends.value.push({
|
||||||
|
label: key,
|
||||||
|
color: legend[key].colour,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function handlerOnMapLoad() {}
|
||||||
|
|
||||||
// 视频监控
|
function handlerGetDetails(e) {
|
||||||
import Monitor from './mapComponent/monitor/index.vue';
|
getInfoList(e.Id);
|
||||||
import {CloseOutlined} from "@ant-design/icons-vue"
|
}
|
||||||
|
|
||||||
const showTCLPlayer = ref(false);
|
// 选择区县
|
||||||
const playUrl = ref("");
|
const currentCounty = ref({ name: '', code: '' });
|
||||||
function showMonitor(info){
|
function countyClick(data) {
|
||||||
playUrl.value = info.playUrl
|
countyId.value = data.id;
|
||||||
showTCLPlayer.value = true;
|
currentCounty.value = { name: data['name'], code: data['id'] };
|
||||||
}
|
MapboxComponent.value.handlerChangeCounty(currentCounty.value);
|
||||||
|
}
|
||||||
// 历史影像
|
|
||||||
|
|
||||||
function drawPolygon(state){
|
// 图例点击
|
||||||
// 调用Map控件中的绘图方法
|
function handlerChangePolygonType(data) {
|
||||||
MapboxComponent.value.handlerDrawPolygon();
|
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], data);
|
||||||
}
|
}
|
||||||
|
|
||||||
function cancleDrawPolygon(){
|
// 切换图斑类型
|
||||||
MapboxComponent.value.handlerDeletePolygon();
|
function changeLandType(type): void {
|
||||||
|
MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], '', type);
|
||||||
|
}
|
||||||
|
const changeLayer = (value) => {
|
||||||
|
buttonSelect.value = value;
|
||||||
|
switch (value) {
|
||||||
|
case 1:
|
||||||
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles', false);
|
||||||
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles', true);
|
||||||
|
MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer', false);
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles', true);
|
||||||
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles', false);
|
||||||
|
MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer', false);
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles', false);
|
||||||
|
MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles', false);
|
||||||
|
MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer', true);
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const LayerCenterComponent = ref();
|
/*图层控制 视频监控*/
|
||||||
function handlerQueryIntersectTif(wktStr){
|
import LayerCenter from './mapComponent/layers/index.vue';
|
||||||
LayerCenterComponent.value.handlerQueryIntersectTif(wktStr);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// 视频监控
|
||||||
function changeTifLayer(layer){
|
import Monitor from './mapComponent/monitor/index.vue';
|
||||||
console.log("layer",layer);
|
import { CloseOutlined } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
MapboxComponent.value.handlerChangeTifLayer(layer);
|
const showTCLPlayer = ref(false);
|
||||||
}
|
const playUrl = ref('');
|
||||||
</script>
|
function showMonitor(info) {
|
||||||
|
playUrl.value = info.playUrl;
|
||||||
<style lang="less" scoped>
|
showTCLPlayer.value = true;
|
||||||
.button-item{
|
}
|
||||||
width: 96px;
|
|
||||||
height: 32px;
|
// 历史影像
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
function drawPolygon(state) {
|
||||||
align-items: center;
|
// 调用Map控件中的绘图方法
|
||||||
font-family: Microsoft YaHei;
|
MapboxComponent.value.handlerDrawPolygon();
|
||||||
font-weight: 400;
|
}
|
||||||
font-size: 11px;
|
|
||||||
color: #7EBBFF;
|
function cancleDrawPolygon() {
|
||||||
background: url('@/assets/statistical/blue_bg.png') no-repeat;
|
MapboxComponent.value.handlerDeletePolygon();
|
||||||
background-size: cover;
|
}
|
||||||
}
|
|
||||||
.button-select{
|
const LayerCenterComponent = ref();
|
||||||
color: #06EBB7;
|
function handlerQueryIntersectTif(wktStr) {
|
||||||
background: url('@/assets/statistical/green_bg.png') no-repeat;
|
LayerCenterComponent.value.handlerQueryIntersectTif(wktStr);
|
||||||
background-size: cover;
|
}
|
||||||
|
|
||||||
}
|
function changeTifLayer(layer) {
|
||||||
.statistical {
|
console.log('layer', layer);
|
||||||
// position: relative;
|
|
||||||
// 页面不能被选中
|
MapboxComponent.value.handlerChangeTifLayer(layer);
|
||||||
-webkit-user-select: none; /* Safari */
|
}
|
||||||
-moz-user-select: none; /* Firefox */
|
onMounted(() => {
|
||||||
-ms-user-select: none; /* IE/Edge */
|
getLayerSettings();
|
||||||
user-select: none;
|
});
|
||||||
}
|
</script>
|
||||||
|
|
||||||
#bg-pan{
|
<style lang="less" scoped>
|
||||||
|
.button-item {
|
||||||
}
|
width: 96px;
|
||||||
#alertOverlay::before,#alertOverlay::after {
|
height: 32px;
|
||||||
content: "";
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #7ebbff;
|
||||||
|
background: url('@/assets/statistical/blue_bg.png') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.button-select {
|
||||||
|
color: #06ebb7;
|
||||||
|
background: url('@/assets/statistical/green_bg.png') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.statistical {
|
||||||
|
// position: relative;
|
||||||
|
// 页面不能被选中
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* IE/Edge */
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bg-pan {
|
||||||
|
}
|
||||||
|
#alertOverlay::before,
|
||||||
|
#alertOverlay::after {
|
||||||
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#alertOverlay div::before,#alertOverlay div::after {
|
#alertOverlay div::before,
|
||||||
content: "";
|
#alertOverlay div::after {
|
||||||
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#alertOverlay::before {
|
#alertOverlay::before {
|
||||||
background: linear-gradient(to right, rgba(0, 0, 0,0.8), transparent);
|
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#alertOverlay::after {
|
#alertOverlay::after {
|
||||||
background: linear-gradient(to left, rgba(0, 0, 0,0.8), transparent);
|
background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
|
||||||
top: 0%;
|
top: 0%;
|
||||||
left: 100%;
|
left: 100%;
|
||||||
transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
|
transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
|
||||||
}
|
}
|
||||||
|
|
||||||
#alertOverlay div::before {
|
#alertOverlay div::before {
|
||||||
background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#alertOverlay div::after {
|
#alertOverlay div::after {
|
||||||
background: linear-gradient(to top, rgba(0, 0, 0,0.8), transparent);
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
transform: rotate(0deg) translate(0px, calc(-1 * 50px));
|
transform: rotate(0deg) translate(0px, calc(-1 * 50px));
|
||||||
}
|
}
|
||||||
|
|
||||||
#alertOverlay {
|
#alertOverlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -281,11 +323,11 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-active{
|
.alert-active {
|
||||||
animation: blink 0s infinite;
|
animation: blink 0s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes blink {
|
@keyframes blink {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -297,83 +339,79 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend{
|
.legend {
|
||||||
width:200px;
|
width: 200px;
|
||||||
padding:10px;
|
padding: 10px;
|
||||||
position:absolute;
|
position: absolute;
|
||||||
bottom:20px;
|
bottom: 20px;
|
||||||
right:20px;
|
right: 20px;
|
||||||
display:flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
column-gap: 30px;
|
column-gap: 30px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-image:url("/statistical/left_statistical.png");
|
background-image: url('/statistical/left_statistical.png');
|
||||||
background-size:100% 100%;
|
background-size: 100% 100%;
|
||||||
.legend-item{
|
.legend-item {
|
||||||
padding:5px 0px;
|
padding: 5px 0px;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
color:#666666;
|
color: #666666;
|
||||||
display:flex;
|
display: flex;
|
||||||
flex: 48% 48%;
|
flex: 48% 48%;
|
||||||
color:#7ebbff;
|
color: #7ebbff;
|
||||||
.legend-dot{
|
.legend-dot {
|
||||||
width:14px;
|
width: 14px;
|
||||||
height:14px;
|
height: 14px;
|
||||||
}
|
}
|
||||||
.legend-label{
|
.legend-label {
|
||||||
margin-left:12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**图层控制 视频监控**/
|
||||||
/**图层控制 视频监控**/
|
.layer-center-container {
|
||||||
.layer-center-container{
|
width: 208px;
|
||||||
width:208px;
|
|
||||||
position:absolute;
|
|
||||||
bottom:0px;
|
|
||||||
left:20px;
|
|
||||||
z-index:99999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.TC-videoi-container{
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom:48px;
|
bottom: 0px;
|
||||||
right:38px;
|
left: 20px;
|
||||||
width:418px;
|
z-index: 99999;
|
||||||
height:300px;
|
}
|
||||||
.close-button{
|
|
||||||
width:28px;
|
.TC-videoi-container {
|
||||||
height:28px;
|
position: absolute;
|
||||||
background:rgba(0, 0, 0, 0.6);
|
bottom: 48px;
|
||||||
|
right: 38px;
|
||||||
|
width: 418px;
|
||||||
|
height: 300px;
|
||||||
|
.close-button {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height:28px;
|
line-height: 28px;
|
||||||
position:absolute;
|
position: absolute;
|
||||||
top:4px;
|
top: 4px;
|
||||||
right:4px;
|
right: 4px;
|
||||||
z-index:999999;
|
z-index: 999999;
|
||||||
color:#fff;
|
color: #fff;
|
||||||
cursor:pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.selection-button{
|
.selection-button {
|
||||||
position:absolute;
|
position: absolute;
|
||||||
cursor:pointer;
|
cursor: pointer;
|
||||||
top:20px;
|
top: 20px;
|
||||||
left:220px;
|
left: 220px;
|
||||||
width:140px;
|
width: 140px;
|
||||||
height:40px;
|
height: 40px;
|
||||||
margin-left:20px;
|
margin-left: 20px;
|
||||||
background-image: url(/map/change-view-btn.png);
|
background-image: url(/map/change-view-btn.png);
|
||||||
background-size:100% 100%;
|
background-size: 100% 100%;
|
||||||
color:#efefef;
|
color: #efefef;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height:46px;
|
line-height: 46px;
|
||||||
font-size:14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,66 @@
|
||||||
|
// vite.config.ts
|
||||||
|
import { defineApplicationConfig } from "file:///F:/%E9%A1%B9%E7%9B%AE/%E8%B4%A2%E6%BA%90%E4%B8%80%E4%BD%93%E5%8C%96/CaiYuanYiTiHua/internal/vite-config/dist/index.mjs";
|
||||||
|
var vite_config_default = defineApplicationConfig({
|
||||||
|
overrides: {
|
||||||
|
optimizeDeps: {
|
||||||
|
include: [
|
||||||
|
"echarts/core",
|
||||||
|
"echarts/charts",
|
||||||
|
"echarts/components",
|
||||||
|
"echarts/renderers",
|
||||||
|
"qrcode",
|
||||||
|
"@iconify/iconify",
|
||||||
|
"ant-design-vue/es/locale/zh_CN",
|
||||||
|
"ant-design-vue/es/locale/en_US",
|
||||||
|
"@/../lib/vform/designer.umd.js"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
/* 其他build生产打包配置省略 */
|
||||||
|
//...
|
||||||
|
target: "esnext",
|
||||||
|
commonjsOptions: {
|
||||||
|
include: /node_modules|lib/
|
||||||
|
//这里记得把lib目录加进来，否则生产打包会报错！！
|
||||||
|
}
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
"/basic-api": {
|
||||||
|
target: "http://localhost:3000",
|
||||||
|
changeOrigin: true,
|
||||||
|
ws: true,
|
||||||
|
rewrite: (path) => path.replace(new RegExp(`^/basic-api`), "")
|
||||||
|
// only https
|
||||||
|
// secure: false
|
||||||
|
},
|
||||||
|
"/upload": {
|
||||||
|
target: "http://localhost:3300/upload",
|
||||||
|
changeOrigin: true,
|
||||||
|
ws: true,
|
||||||
|
rewrite: (path) => path.replace(new RegExp(`^/upload`), "")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
warmup: {
|
||||||
|
clientFiles: ["./index.html", "./src/{views,components}/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
"process.env": {
|
||||||
|
BASE_URL: "/"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
less: {
|
||||||
|
javascriptEnabled: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
export {
|
||||||
|
vite_config_default as default
|
||||||
|
};
|
||||||
|
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJGOlxcXFxcdTk4NzlcdTc2RUVcXFxcXHU4RDIyXHU2RTkwXHU0RTAwXHU0RjUzXHU1MzE2XFxcXENhaVl1YW5ZaVRpSHVhXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJGOlxcXFxcdTk4NzlcdTc2RUVcXFxcXHU4RDIyXHU2RTkwXHU0RTAwXHU0RjUzXHU1MzE2XFxcXENhaVl1YW5ZaVRpSHVhXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9GOi8lRTklQTElQjklRTclOUIlQUUvJUU4JUI0JUEyJUU2JUJBJTkwJUU0JUI4JTgwJUU0JUJEJTkzJUU1JThDJTk2L0NhaVl1YW5ZaVRpSHVhL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQXBwbGljYXRpb25Db25maWcgfSBmcm9tICdAdmJlbi92aXRlLWNvbmZpZyc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUFwcGxpY2F0aW9uQ29uZmlnKHtcbiAgb3ZlcnJpZGVzOiB7XG4gICAgb3B0aW1pemVEZXBzOiB7XG4gICAgICBpbmNsdWRlOiBbXG4gICAgICAgICdlY2hhcnRzL2NvcmUnLFxuICAgICAgICAnZWNoYXJ0cy9jaGFydHMnLFxuICAgICAgICAnZWNoYXJ0cy9jb21wb25lbnRzJyxcbiAgICAgICAgJ2VjaGFydHMvcmVuZGVyZXJzJyxcbiAgICAgICAgJ3FyY29kZScsXG4gICAgICAgICdAaWNvbmlmeS9pY29uaWZ5JyxcbiAgICAgICAgJ2FudC1kZXNpZ24tdnVlL2VzL2xvY2FsZS96aF9DTicsXG4gICAgICAgICdhbnQtZGVzaWduLXZ1ZS9lcy9sb2NhbGUvZW5fVVMnLFxuICAgICAgICAnQC8uLi9saWIvdmZvcm0vZGVzaWduZXIudW1kLmpzJyxcbiAgICAgIF0sXG4gICAgfSxcbiAgICBidWlsZDoge1xuICAgICAgLyogXHU1MTc2XHU0RUQ2YnVpbGRcdTc1MUZcdTRFQTdcdTYyNTNcdTUzMDVcdTkxNERcdTdGNkVcdTc3MDFcdTc1NjUgKi9cbiAgICAgIC8vLi4uXG4gICAgICB0YXJnZXQ6ICdlc25leHQnLFxuICAgICAgY29tbW9uanNPcHRpb25zOiB7XG4gICAgICAgIGluY2x1ZGU6IC9ub2RlX21vZHVsZXN8bGliLywgLy9cdThGRDlcdTkxQ0NcdThCQjBcdTVGOTdcdTYyOEFsaWJcdTc2RUVcdTVGNTVcdTUyQTBcdThGREJcdTY3NjVcdUZGMENcdTU0MjZcdTUyMTlcdTc1MUZcdTRFQTdcdTYyNTNcdTUzMDVcdTRGMUFcdTYyQTVcdTk1MTlcdUZGMDFcdUZGMDFcbiAgICAgIH0sXG4gICAgfSxcbiAgICBzZXJ2ZXI6IHtcbiAgICAgIHByb3h5OiB7XG4gICAgICAgICcvYmFzaWMtYXBpJzoge1xuICAgICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6MzAwMCcsXG4gICAgICAgICAgY2hhbmdlT3JpZ2luOiB0cnVlLFxuICAgICAgICAgIHdzOiB0cnVlLFxuICAgICAgICAgIHJld3JpdGU6IChwYXRoKSA9PiBwYXRoLnJlcGxhY2UobmV3IFJlZ0V4cChgXi9iYXNpYy1hcGlgKSwgJycpLFxuICAgICAgICAgIC8vIG9ubHkgaHR0cHNcbiAgICAgICAgICAvLyBzZWN1cmU6IGZhbHNlXG4gICAgICAgIH0sXG4gICAgICAgICcvdXBsb2FkJzoge1xuICAgICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6MzMwMC91cGxvYWQnLFxuICAgICAgICAgIGNoYW5nZU9yaWdpbjogdHJ1ZSxcbiAgICAgICAgICB3czogdHJ1ZSxcbiAgICAgICAgICByZXdyaXRlOiAocGF0aCkgPT4gcGF0aC5yZXBsYWNlKG5ldyBSZWdFeHAoYF4vdXBsb2FkYCksICcnKSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgICB3YXJtdXA6IHtcbiAgICAgICAgY2xpZW50RmlsZXM6IFsnLi9pbmRleC5odG1sJywgJy4vc3JjL3t2aWV3cyxjb21wb25lbnRzfS8qJ10sXG4gICAgICB9LFxuICAgIH0sXG4gICAgZGVmaW5lOiB7XG4gICAgICAncHJvY2Vzcy5lbnYnOiB7XG4gICAgICAgIEJBU0VfVVJMOiAnLycsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY3NzOiB7XG4gICAgICBwcmVwcm9jZXNzb3JPcHRpb25zOiB7XG4gICAgICAgIGxlc3M6IHtcbiAgICAgICAgICBqYXZhc2NyaXB0RW5hYmxlZDogdHJ1ZSxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBwbHVnaW5zOiBbXSxcbiAgfSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFnVSxTQUFTLCtCQUErQjtBQUV4VyxJQUFPLHNCQUFRLHdCQUF3QjtBQUFBLEVBQ3JDLFdBQVc7QUFBQSxJQUNULGNBQWM7QUFBQSxNQUNaLFNBQVM7QUFBQSxRQUNQO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxRQUNBO0FBQUEsUUFDQTtBQUFBLFFBQ0E7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLElBQ0EsT0FBTztBQUFBO0FBQUE7QUFBQSxNQUdMLFFBQVE7QUFBQSxNQUNSLGlCQUFpQjtBQUFBLFFBQ2YsU0FBUztBQUFBO0FBQUEsTUFDWDtBQUFBLElBQ0Y7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLE9BQU87QUFBQSxRQUNMLGNBQWM7QUFBQSxVQUNaLFFBQVE7QUFBQSxVQUNSLGNBQWM7QUFBQSxVQUNkLElBQUk7QUFBQSxVQUNKLFNBQVMsQ0FBQyxTQUFTLEtBQUssUUFBUSxJQUFJLE9BQU8sYUFBYSxHQUFHLEVBQUU7QUFBQTtBQUFBO0FBQUEsUUFHL0Q7QUFBQSxRQUNBLFdBQVc7QUFBQSxVQUNULFFBQVE7QUFBQSxVQUNSLGNBQWM7QUFBQSxVQUNkLElBQUk7QUFBQSxVQUNKLFNBQVMsQ0FBQyxTQUFTLEtBQUssUUFBUSxJQUFJLE9BQU8sVUFBVSxHQUFHLEVBQUU7QUFBQSxRQUM1RDtBQUFBLE1BQ0Y7QUFBQSxNQUNBLFFBQVE7QUFBQSxRQUNOLGFBQWEsQ0FBQyxnQkFBZ0IsNEJBQTRCO0FBQUEsTUFDNUQ7QUFBQSxJQUNGO0FBQUEsSUFDQSxRQUFRO0FBQUEsTUFDTixlQUFlO0FBQUEsUUFDYixVQUFVO0FBQUEsTUFDWjtBQUFBLElBQ0Y7QUFBQSxJQUNBLEtBQUs7QUFBQSxNQUNILHFCQUFxQjtBQUFBLFFBQ25CLE1BQU07QUFBQSxVQUNKLG1CQUFtQjtBQUFBLFFBQ3JCO0FBQUEsTUFDRjtBQUFBLElBQ0Y7QUFBQSxJQUNBLFNBQVMsQ0FBQztBQUFBLEVBQ1o7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=
|
||||||
Loading…
Reference in New Issue