Compare commits
2 Commits
c9c6fd98ef
...
e18f328bce
Author | SHA1 | Date |
---|---|---|
|
e18f328bce | |
|
ae2a7370ed |
|
@ -4,20 +4,20 @@
|
||||||
var bmapcfg = {
|
var bmapcfg = {
|
||||||
'imgext': '.jpg', //瓦片图的后缀 ------ 根据需要修改,一般是 .png .jpg
|
'imgext': '.jpg', //瓦片图的后缀 ------ 根据需要修改,一般是 .png .jpg
|
||||||
//这里我直接用的路径是/static/bmap_offline_demo/tiles,如果瓦片数量较大,可改为瓦片服务的地址
|
//这里我直接用的路径是/static/bmap_offline_demo/tiles,如果瓦片数量较大,可改为瓦片服务的地址
|
||||||
// tiles_dir: "images", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目
|
tiles_dir: "images", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目
|
||||||
//现场
|
//现场
|
||||||
tiles_dir: "map", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目
|
// tiles_dir: "map", //普通瓦片图的地址,为空默认在 offlinemap/tiles/ 目
|
||||||
// tiles_path : 'http://172.16.1.162:8123/HeBeiDarkMap/',
|
tiles_path : 'http://172.16.1.162:8123/HeBeiDarkMap/',
|
||||||
// tiles_hybrid: 'http://172.16.1.162:8123/HeBeiDarkMap/', //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
|
tiles_hybrid: 'http://172.16.1.162:8123/HeBeiDarkMap/', //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
|
||||||
// tiles_self : 'http://172.16.1.162:8123/HeBeiDarkMap/' //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
|
tiles_self : 'http://172.16.1.162:8123/HeBeiDarkMap/' //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
|
||||||
// tiles_path: "http://111.229.30.246:4008/HeBeiDarkMap/",
|
// tiles_path: "http://111.229.30.246:4008/HeBeiDarkMap/",
|
||||||
// tiles_hybrid: "http://111.229.30.246:4008/HeBeiDarkMap/", //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
|
// tiles_hybrid: "http://111.229.30.246:4008/HeBeiDarkMap/", //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
|
||||||
// tiles_self: "http://111.229.30.246:4008/HeBeiDarkMap/", //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
|
// tiles_self: "http://111.229.30.246:4008/HeBeiDarkMap/", //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
|
||||||
|
|
||||||
//现场
|
//现场
|
||||||
tiles_path: "http://13.14.64.150:3638/",
|
// tiles_path: "http://13.14.64.150:3638/",
|
||||||
tiles_hybrid: "http://13.14.64.150:3638/", //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
|
// tiles_hybrid: "http://13.14.64.150:3638/", //卫星瓦片图的地址,为空默认在 offlinemap/tiles_hybrid/ 目
|
||||||
tiles_self: "http://13.14.64.150:3638/", //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
|
// tiles_self: "http://13.14.64.150:3638/", //自定义图层的地址,为空默认在 offlinemap/tiles_self/ 目录
|
||||||
};
|
};
|
||||||
|
|
||||||
//下面的保持不动///
|
//下面的保持不动///
|
||||||
|
|
|
@ -106,6 +106,10 @@ export const getVideoDeviceList = (param: any = {}) => {
|
||||||
export const videoStream=(param:any={})=>{
|
export const videoStream=(param:any={})=>{
|
||||||
return GET('/video/stream',param)
|
return GET('/video/stream',param)
|
||||||
}
|
}
|
||||||
|
//获取拥堵路段
|
||||||
|
export const getListCurrentMonth = (param: any = {}) => {
|
||||||
|
return GET('/device/mevent/listCurrentMonth', param);
|
||||||
|
}
|
||||||
// 今日各监测点车流情况
|
// 今日各监测点车流情况
|
||||||
export const getPointTraffic=(param:any={})=>{
|
export const getPointTraffic=(param:any={})=>{
|
||||||
return GET('/device/trafficFlow/pointTraffic',param)
|
return GET('/device/trafficFlow/pointTraffic',param)
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 6.4 KiB |
|
@ -16,6 +16,13 @@ const areaData = ref({
|
||||||
unit: "m²",
|
unit: "m²",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
popUpContent: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
// 车位数据
|
// 车位数据
|
||||||
const parkingData = ref([
|
const parkingData = ref([
|
||||||
{ label: "充电车位", value: 1888 },
|
{ label: "充电车位", value: 1888 },
|
||||||
|
@ -113,6 +120,7 @@ const togglePoint = async (point: any) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
console.log(props.popUpContent, 'ddddddddddddd')
|
||||||
const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
|
const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
|
||||||
getVideoDeviceList({ endTime: endTime, currentPage: 1, pageSize: 2 }).then((res) => { //暂时是公共的 先取两条
|
getVideoDeviceList({ endTime: endTime, currentPage: 1, pageSize: 2 }).then((res) => { //暂时是公共的 先取两条
|
||||||
console.log(res, 'rrrrrrrrrrrrrrrrrrrrrrrrrsssssssssssss')
|
console.log(res, 'rrrrrrrrrrrrrrrrrrrrrrrrrsssssssssssss')
|
||||||
|
@ -136,9 +144,9 @@ onMounted(() => {
|
||||||
<!-- 添加标题 -->
|
<!-- 添加标题 -->
|
||||||
<div class="title-header">
|
<div class="title-header">
|
||||||
<div class="header-icon">
|
<div class="header-icon">
|
||||||
<div class="camera-square-small" title="服务区基本信息"></div>
|
<div class="camera-square-small" title= "{{props.popUpContent.type}} 基本信息"></div>
|
||||||
</div>
|
</div>
|
||||||
<span>服务区基本信息</span>
|
<span>{{props.popUpContent.type}}基本信息</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- 状态内容 -->
|
<!-- 状态内容 -->
|
||||||
<div class="status-content">
|
<div class="status-content">
|
||||||
|
@ -148,19 +156,19 @@ onMounted(() => {
|
||||||
<div class="corner-decoration bottom-right"></div>
|
<div class="corner-decoration bottom-right"></div>
|
||||||
<div class="status-info">
|
<div class="status-info">
|
||||||
<div class="info-left">
|
<div class="info-left">
|
||||||
<img :src="fwqImage" alt="服务区" class="fwq-image" />
|
<img :src=" props.popUpContent.fwqImage" alt="服务区" class="fwq-image" />
|
||||||
</div>
|
</div>
|
||||||
<div class="info-center">
|
<div class="info-center">
|
||||||
<span class="info-label">占地面积(m²)</span>
|
<span class="info-label">{{ props.popUpContent.areaData.name1 }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-right">
|
<div class="info-right">
|
||||||
<span class="info-value">{{ areaData.value }}</span>
|
<span class="info-value">{{ props.popUpContent.areaData.value }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 添加车位信息展示 -->
|
<!-- 添加车位信息展示 -->
|
||||||
<div class="parking-info">
|
<div class="parking-info">
|
||||||
<div v-for="(item, index) in parkingData" :key="index" class="parking-item">
|
<div v-for="(item, index) in props.popUpContent.llist" :key="index" class="parking-item">
|
||||||
<div class="parking-label">{{ item.label }}</div>
|
<div class="parking-label">{{ item.label }}</div>
|
||||||
<div class="parking-value">{{ item.value }}</div>
|
<div class="parking-value">{{ item.value }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
<div v-for="(stat, index) in statistics" :key="index" class="stat-card" style="position: relative;">
|
<div v-for="(stat, index) in statistics" :key="index" class="stat-card" style="position: relative;">
|
||||||
<div
|
<div
|
||||||
class="box"
|
class="box"
|
||||||
@mouseenter="stat.label === '服务区' && (showDropdown = true)"
|
@mouseenter="stat.label=='服务区'?showDropdown = true:stat.label==='收费站'?showDropdown1 = true:stat.label==='桥梁(座)'?showDropdown2 = true:stat.label==='枢纽互通(座)'?showDropdown3 = true:''"
|
||||||
@mouseleave="stat.label === '服务区' && (showDropdown = false)"
|
@mouseleave="stat.label=='服务区'?showDropdown = false:stat.label==='收费站'?showDropdown1 = false:stat.label==='桥梁(座)'?showDropdown2 = false:stat.label==='枢纽互通(座)'?showDropdown3 = false:''"
|
||||||
style="position: relative;"
|
style="position: relative;"
|
||||||
>
|
>
|
||||||
<div class="icon-wrapper">
|
<div class="icon-wrapper">
|
||||||
|
@ -33,7 +33,61 @@
|
||||||
:key="area"
|
:key="area"
|
||||||
@click="selectServiceArea(area)"
|
@click="selectServiceArea(area)"
|
||||||
>
|
>
|
||||||
{{ area }}
|
{{ area.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 收费站 -->
|
||||||
|
<template v-if="stat.label === '收费站'">
|
||||||
|
<div
|
||||||
|
v-show="showDropdown1"
|
||||||
|
class="dropdown large-dropdown"
|
||||||
|
@mouseenter="showDropdown1 = true"
|
||||||
|
@mouseleave="showDropdown1 = false"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="dropdown-item"
|
||||||
|
v-for="area in tollStationList"
|
||||||
|
:key="area"
|
||||||
|
@click="selectServiceArea(area)"
|
||||||
|
>
|
||||||
|
{{ area.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 桥梁 -->
|
||||||
|
<template v-if="stat.label === '桥梁(座)'">
|
||||||
|
<div
|
||||||
|
v-show="showDropdown2"
|
||||||
|
class="dropdown large-dropdown"
|
||||||
|
@mouseenter="showDropdown2 = true"
|
||||||
|
@mouseleave="showDropdown2 = false"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="dropdown-item"
|
||||||
|
v-for="area in bridgeList"
|
||||||
|
:key="area"
|
||||||
|
@click="selectServiceArea(area)"
|
||||||
|
>
|
||||||
|
{{ area.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 枢纽互通(座) -->
|
||||||
|
<template v-if="stat.label === '枢纽互通(座)'">
|
||||||
|
<div
|
||||||
|
v-show="showDropdown3"
|
||||||
|
class="dropdown large-dropdown"
|
||||||
|
@mouseenter="showDropdown3 = true"
|
||||||
|
@mouseleave="showDropdown3 = false"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="dropdown-item"
|
||||||
|
v-for="area in hubIntercommunicationList"
|
||||||
|
:key="area"
|
||||||
|
@click="selectServiceArea(area)"
|
||||||
|
>
|
||||||
|
{{ area.name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -60,7 +114,7 @@
|
||||||
<div class="close-btn" @click="closeDialog">×</div>
|
<div class="close-btn" @click="closeDialog">×</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="map-con">
|
<div class="map-con">
|
||||||
<RealTimeImageCenter />
|
<RealTimeImageCenter :popUpContent="popUpContent"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="map-container bg-header bg-header-one" style="width: 1800px;" v-if="showDeviceInfo">
|
<div class="map-container bg-header bg-header-one" style="width: 1800px;" v-if="showDeviceInfo">
|
||||||
|
@ -92,6 +146,7 @@
|
||||||
import { ref, nextTick } from "vue";
|
import { ref, nextTick } from "vue";
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import fee from "@/assets/img/fee.png";
|
import fee from "@/assets/img/fee.png";
|
||||||
|
import fwq from "@/assets/img/fwq2.png";
|
||||||
import km from "@/assets/img/km.png";
|
import km from "@/assets/img/km.png";
|
||||||
import toll from "@/assets/img/toll.png";
|
import toll from "@/assets/img/toll.png";
|
||||||
import RealTimeImageCenter from "./RealTimeImageCenter.vue";
|
import RealTimeImageCenter from "./RealTimeImageCenter.vue";
|
||||||
|
@ -102,6 +157,10 @@ import { getDeviceList } from "@/api/modules/index";
|
||||||
import DeviceInfoComponentTwo from "./DeviceInfoComponentTwo.vue";
|
import DeviceInfoComponentTwo from "./DeviceInfoComponentTwo.vue";
|
||||||
import Map from "./map.vue"
|
import Map from "./map.vue"
|
||||||
import { emitter } from '@/utils/eventBus';
|
import { emitter } from '@/utils/eventBus';
|
||||||
|
import fwqImage from "@/assets/img/fwq.png";
|
||||||
|
import ql from "@/assets/img/ql.png";
|
||||||
|
import sfz from "@/assets/img/sfz.png";
|
||||||
|
import snht from "@/assets/img/snht.png";
|
||||||
const showServiceArea = ref(false);
|
const showServiceArea = ref(false);
|
||||||
const showMap = ref(true);
|
const showMap = ref(true);
|
||||||
const showDeviceInfo = ref(false);
|
const showDeviceInfo = ref(false);
|
||||||
|
@ -110,13 +169,316 @@ const closeDialog = () => {
|
||||||
showServiceArea.value = false;
|
showServiceArea.value = false;
|
||||||
};
|
};
|
||||||
const showDropdown = ref(false);
|
const showDropdown = ref(false);
|
||||||
const serviceAreas = ["南皮服务区", "东光服务区"];
|
const showDropdown1 = ref(false);
|
||||||
const selectedServiceArea = ref("南皮服务区");
|
const showDropdown2 = ref(false);
|
||||||
|
const showDropdown3 = ref(false);
|
||||||
|
//服务区
|
||||||
|
const serviceAreas =[{
|
||||||
|
name:"南皮服务区",
|
||||||
|
type:'服务区',
|
||||||
|
fwqImage:fwqImage,
|
||||||
|
areaData:{
|
||||||
|
value: 6000,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'占地面积(m²)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "充电车位", value: 1888 },
|
||||||
|
{ label: "大型车位", value: 60 },
|
||||||
|
{ label: "小型车位", value: 200 },
|
||||||
|
{ label: "危险品车位", value: 20 },
|
||||||
|
]},{
|
||||||
|
name:"东光服务区",
|
||||||
|
type:'服务区',
|
||||||
|
fwqImage:fwqImage,
|
||||||
|
areaData:{
|
||||||
|
value: 6000,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'占地面积(m²)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "充电车位", value: 1888 },
|
||||||
|
{ label: "大型车位", value: 60 },
|
||||||
|
{ label: "小型车位", value: 200 },
|
||||||
|
{ label: "危险品车位", value: 20 }]
|
||||||
|
}]
|
||||||
|
const popUpContent= ref([])
|
||||||
|
const selectedServiceArea = ref({});
|
||||||
|
//收费站
|
||||||
|
// const tollStationList = ["连镇", "找王", "寨子", "盐山", "盐山东"];
|
||||||
|
|
||||||
|
const tollStationList = [{
|
||||||
|
name:"连镇",
|
||||||
|
type:'收费站',
|
||||||
|
fwqImage:sfz,
|
||||||
|
areaData:{
|
||||||
|
value: 1200,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'建筑面积(m²)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "入口ETC车道", value: 2 },
|
||||||
|
{ label: "出口ETC车道", value: 2 },
|
||||||
|
{ label: "入口混合车道", value: 2 },
|
||||||
|
{ label: "出口混合车道", value: 2 },
|
||||||
|
]},{
|
||||||
|
name:"找王",
|
||||||
|
type:'收费站',
|
||||||
|
fwqImage:sfz,
|
||||||
|
areaData:{
|
||||||
|
value: 1200,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'建筑面积(m²)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "入口ETC车道", value: 2 },
|
||||||
|
{ label: "出口ETC车道", value: 2 },
|
||||||
|
{ label: "入口混合车道", value: 2 },
|
||||||
|
{ label: "出口混合车道", value: 2 },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"寨子",
|
||||||
|
type:'收费站',
|
||||||
|
fwqImage:sfz,
|
||||||
|
areaData:{
|
||||||
|
value: 1200,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'建筑面积(m²)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "入口ETC车道", value: 2 },
|
||||||
|
{ label: "出口ETC车道", value: 2 },
|
||||||
|
{ label: "入口混合车道", value: 2 },
|
||||||
|
{ label: "出口混合车道", value: 2 },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"盐山",
|
||||||
|
type:'收费站',
|
||||||
|
fwqImage:sfz,
|
||||||
|
areaData:{
|
||||||
|
value: 1200,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'建筑面积(m²)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "入口ETC车道", value: 1 },
|
||||||
|
{ label: "出口ETC车道", value: 1 },
|
||||||
|
{ label: "入口混合车道", value: 2 },
|
||||||
|
{ label: "出口混合车道", value: 2 },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"盐山东",
|
||||||
|
type:'收费站',
|
||||||
|
fwqImage:sfz,
|
||||||
|
areaData:{
|
||||||
|
value: 1200,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'建筑面积(m²)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "入口ETC车道", value: 2 },
|
||||||
|
{ label: "出口ETC车道", value: 2 },
|
||||||
|
{ label: "入口混合车道", value: 2 },
|
||||||
|
{ label: "出口混合车道", value: 2 },
|
||||||
|
]
|
||||||
|
}];
|
||||||
|
const tollStation = ref("连镇");
|
||||||
|
//桥梁
|
||||||
|
// const bridgeList = ["南运河特大桥", "秦庄村大桥", "宣惠河大桥", "沙河大桥", "龙王河大桥", "大单沟大桥", "大商平底渠大桥"];
|
||||||
|
const bridgeList = [{
|
||||||
|
name:"南运河特大桥",
|
||||||
|
type:'桥梁(座)',
|
||||||
|
fwqImage:ql,
|
||||||
|
areaData:{
|
||||||
|
value: 1003.838,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'长度(m)(沧州境内)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "中心桩号", value: 'K61+407' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"秦庄村大桥",
|
||||||
|
type:'桥梁(座)',
|
||||||
|
fwqImage:ql,
|
||||||
|
areaData:{
|
||||||
|
value:577.543,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'长度(m)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "中心桩号", value: 'K62+401' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"宣惠河大桥",
|
||||||
|
type:'桥梁(座)',
|
||||||
|
fwqImage:ql,
|
||||||
|
areaData:{
|
||||||
|
value:702,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'长度(m)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "中心桩号", value: 'K65+716' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"沙河大桥",
|
||||||
|
type:'桥梁(座)',
|
||||||
|
fwqImage:ql,
|
||||||
|
areaData:{
|
||||||
|
value:131,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'长度(m)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "中心桩号", value: 'K76+079' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"龙王河大桥",
|
||||||
|
type:'桥梁(座)',
|
||||||
|
fwqImage:ql,
|
||||||
|
areaData:{
|
||||||
|
value:156,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'长度(m)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "中心桩号", value: 'K90+280' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"大单沟大桥",
|
||||||
|
type:'桥梁(座)',
|
||||||
|
fwqImage:ql,
|
||||||
|
areaData:{
|
||||||
|
value:127,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'长度(m)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "中心桩号", value: 'K96+099' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"大商平底渠大桥",
|
||||||
|
type:'桥梁(座)',
|
||||||
|
fwqImage:ql,
|
||||||
|
areaData:{
|
||||||
|
value:106,
|
||||||
|
unit: "m²",
|
||||||
|
name1:'长度(m)'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "中心桩号", value: 'K114+265' },
|
||||||
|
]
|
||||||
|
}];
|
||||||
|
const bridge1 = ref("南运河特大桥");
|
||||||
|
//枢纽互通
|
||||||
|
// const hubIntercommunicationList = ["连镇互通", "大屯枢纽", "找王互通", "寨子互通", "小庄枢纽", "盐山互通", "盐山东互通"];
|
||||||
|
const hubIntercommunicationList = [{
|
||||||
|
name:"连镇互通",
|
||||||
|
type:'枢纽互通',
|
||||||
|
fwqImage:snht,
|
||||||
|
areaData:{
|
||||||
|
value:'K64+776',
|
||||||
|
unit: "m²",
|
||||||
|
name1:'桩号'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "被交路名称", value: 'G105(京澳线)' },
|
||||||
|
{ label: "被交路等级", value: '一级公路' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"大屯枢纽",
|
||||||
|
type:'枢纽互通',
|
||||||
|
fwqImage:snht,
|
||||||
|
areaData:{
|
||||||
|
value:'K69+454',
|
||||||
|
unit: "m²",
|
||||||
|
name1:'桩号'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "被交路名称", value: '京台高速' },
|
||||||
|
{ label: "被交路等级", value: '高速公路' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"找王互通",
|
||||||
|
type:'枢纽互通',
|
||||||
|
fwqImage:snht,
|
||||||
|
areaData:{
|
||||||
|
value:'K80+359',
|
||||||
|
unit: "m²",
|
||||||
|
name1:'桩号'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "被交路名称", value: 'S337(辛平线)' },
|
||||||
|
{ label: "被交路等级", value: '一级公路' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"寨子互通",
|
||||||
|
type:'枢纽互通',
|
||||||
|
fwqImage:snht,
|
||||||
|
areaData:{
|
||||||
|
value:'K80+359',
|
||||||
|
unit: "m²",
|
||||||
|
name1:'桩号'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "被交路名称", value: 'G104(京平线)' },
|
||||||
|
{ label: "被交路等级", value: '二级公路' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"小庄枢纽",
|
||||||
|
type:'枢纽互通',
|
||||||
|
fwqImage:snht,
|
||||||
|
areaData:{
|
||||||
|
value:'K119+655',
|
||||||
|
unit: "m²",
|
||||||
|
name1:'桩号'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "被交路名称", value: '京沪高速' },
|
||||||
|
{ label: "被交路等级", value: '高速公路' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"盐山互通",
|
||||||
|
type:'枢纽互通',
|
||||||
|
fwqImage:snht,
|
||||||
|
areaData:{
|
||||||
|
value:'S216(吕千线)',
|
||||||
|
unit: "m²",
|
||||||
|
name1:'桩号'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "被交路名称", value: 'S216(吕千线)' },
|
||||||
|
{ label: "被交路等级", value: '一级公路' },
|
||||||
|
]
|
||||||
|
},{
|
||||||
|
name:"盐山东互通",
|
||||||
|
type:'枢纽互通',
|
||||||
|
fwqImage:snht,
|
||||||
|
areaData:{
|
||||||
|
value:'K139+358',
|
||||||
|
unit: "m²",
|
||||||
|
name1:'桩号'
|
||||||
|
},
|
||||||
|
llist:[
|
||||||
|
{ label: "被交路名称", value: 'G205(山深线)' },
|
||||||
|
{ label: "被交路等级", value: '一级公路' },
|
||||||
|
]
|
||||||
|
}];
|
||||||
|
const hubIntercommunication = ref("连镇互通");
|
||||||
|
|
||||||
function selectServiceArea(area) {
|
function selectServiceArea(area) {
|
||||||
selectedServiceArea.value = area;
|
console.log(area, 'tttttttttt')
|
||||||
|
selectedServiceArea.value = area.name;
|
||||||
|
popUpContent.value = area
|
||||||
|
tollStation.value = area;
|
||||||
|
bridge1.value = area;
|
||||||
|
hubIntercommunication.value = area;
|
||||||
showServiceArea.value = true;
|
showServiceArea.value = true;
|
||||||
showDropdown.value = false;
|
showDropdown.value = false;
|
||||||
|
showDropdown1.value = false;
|
||||||
|
showDropdown2.value = false;
|
||||||
|
showDropdown3.value = false;
|
||||||
}
|
}
|
||||||
// 统计数据配置
|
// 统计数据配置
|
||||||
const statistics = ref([
|
const statistics = ref([
|
||||||
|
@ -131,7 +493,7 @@ const statistics = ref([
|
||||||
label: "收费站",
|
label: "收费站",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: fee,
|
image: fwq,
|
||||||
value: "2",
|
value: "2",
|
||||||
label: "服务区",
|
label: "服务区",
|
||||||
},
|
},
|
||||||
|
@ -143,7 +505,7 @@ const statistics = ref([
|
||||||
{
|
{
|
||||||
image: hub,
|
image: hub,
|
||||||
value: "7",
|
value: "7",
|
||||||
label: "隧道互通(座)",
|
label: "枢纽互通(座)",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, nextTick } from "vue";
|
import { ref, nextTick } from "vue";
|
||||||
import { onMounted } from "vue";
|
import { onMounted } from "vue";
|
||||||
import { getDeviceList } from "@/api/modules/index";
|
import { getDeviceList,getListCurrentMonth } from "@/api/modules/index";
|
||||||
import { emitter } from "@/utils/eventBus";
|
import { emitter } from "@/utils/eventBus";
|
||||||
const emit = defineEmits(["show-device-info"]);
|
const emit = defineEmits(["show-device-info"]);
|
||||||
const markerMap = ref({
|
const markerMap = ref({
|
||||||
|
@ -125,6 +125,8 @@ onMounted(async () => {
|
||||||
map.addEventListener("click", (e) => {
|
map.addEventListener("click", (e) => {
|
||||||
console.log("点击的坐标:", e.point.lng, e.point.lat);
|
console.log("点击的坐标:", e.point.lng, e.point.lat);
|
||||||
});
|
});
|
||||||
|
const rest = await getListCurrentMonth();
|
||||||
|
console.log("rest",rest)
|
||||||
// 定义路径点数组
|
// 定义路径点数组
|
||||||
var points1 = [
|
var points1 = [
|
||||||
new BMap.Point(115.816121923,37.726502586),
|
new BMap.Point(115.816121923,37.726502586),
|
||||||
|
@ -672,20 +674,14 @@ new BMap.Point(117.625417017,38.185147089),
|
||||||
map.addOverlay(polyline);
|
map.addOverlay(polyline);
|
||||||
|
|
||||||
var points = [
|
var points = [
|
||||||
new BMap.Point(116.727201337,37.868629410),
|
new BMap.Point(116.476017151,37.820685846),
|
||||||
new BMap.Point(116.730039983,37.868942756),
|
new BMap.Point(116.478927660,37.820571827),
|
||||||
new BMap.Point(116.732591170,37.869227615),
|
new BMap.Point(116.481622577,37.820486313),
|
||||||
new BMap.Point(116.735034561,37.869512473),
|
new BMap.Point(116.483059866,37.820486313),
|
||||||
new BMap.Point(116.737495918,37.869825816),
|
new BMap.Point(116.487946648,37.820486313),
|
||||||
new BMap.Point(116.740226767,37.870224613),
|
new BMap.Point(116.491791395,37.820600332),
|
||||||
new BMap.Point(116.742382700,37.870580681),
|
new BMap.Point(116.496175126,37.821027903),
|
||||||
new BMap.Point(116.744035582,37.870908261),
|
|
||||||
new BMap.Point(116.746622702,37.871435235),
|
|
||||||
new BMap.Point(116.748778636,37.872019176),
|
|
||||||
new BMap.Point(116.750970501,37.872631596),
|
|
||||||
new BMap.Point(116.753036604,37.873244010),
|
|
||||||
new BMap.Point(116.754976944,37.873970356),
|
|
||||||
new BMap.Point(116.755551859,37.874141260),
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const congestionValues = [0.3, 0.8];
|
const congestionValues = [0.3, 0.8];
|
||||||
|
@ -694,7 +690,7 @@ for (let i = 0; i < points.length - 1; i++) {
|
||||||
|
|
||||||
// 根据拥堵程度计算红色深浅 (0-255)
|
// 根据拥堵程度计算红色深浅 (0-255)
|
||||||
const red = Math.floor(100 + 155 * congestion); // 浅红(100,0,0)到深红(255,0,0)
|
const red = Math.floor(100 + 155 * congestion); // 浅红(100,0,0)到深红(255,0,0)
|
||||||
const color = `rgb(${red}, 0, 0)`;
|
const color = `rgb(255, 0, 0)`;
|
||||||
|
|
||||||
// 创建单段线段
|
// 创建单段线段
|
||||||
const segment = new BMap.Polyline([points[i], points[i + 1]], {
|
const segment = new BMap.Polyline([points[i], points[i + 1]], {
|
||||||
|
|
Loading…
Reference in New Issue