zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Esacpe
2025-09-20 19:55:19 +08:00
parent 043369989c
commit 63cd5ba2a3
6 changed files with 63 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/GdMap/index.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div :id="mapid" class="map"></div> <div :id="mapid" class="map"></div>
<div class="changeMap_box" v-if="props.isShow"> <div class="changeMap_box" v-if="props.isShow">
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" /> <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange"> <!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item> <el-carousel-item>
<div class="mapImageItem"> <div class="mapImageItem">
@ -30,8 +31,7 @@
</el-carousel> --> </el-carousel> -->
<!-- 地图缩放 --> <!-- 地图缩放 -->
<div class="zoomTargetBox"> <div class="zoomTargetBox">
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"> <el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
</el-input-number>
</div> </div>
</div> </div>
</template> </template>
@ -74,7 +74,7 @@ const props = defineProps({
}); });
try { try {
const userInfo = getItem("deptId")[0].deptCode; const userInfo = getItem("deptId")[0].deptCode;
} catch (error) {} } catch (error) { }
let map; let map;
let mapLayer; let mapLayer;
let mapLayer1; let mapLayer1;
@ -88,64 +88,37 @@ onMounted(() => {
map = new EliMap({ map = new EliMap({
id: props.mapid, id: props.mapid,
crs: "EPSG:3857", crs: "EPSG:4490",
style: { style: {
glyphs: "./fonts/{fontstack}/{range}.pbf", glyphs: "./fonts/{fontstack}/{range}.pbf",
center: [94.36,29.65], center: [94.36057012, 29.64276831],
zoom: 10 zoom: 15
}, },
transformRequest: (url) => { minZoom: 7,
if (url.indexOf("TileMatrix=") != -1) { maxZoom: 18,
const arr = url.split("TileMatrix=");
const arr1 = arr[1].split("&");
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
}
}
}); });
window.map = map; window.map = map;
map.mapboxGLMap.on("load", () => { map.mapboxGLMap.on("load", () => {
map.addGaudLayer({ map.addWMTSLayer(
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
}) ,
{
Service: "getImage",
Type: "RGB",
ZoomOffset: "0",
V: "0.3",
Zoom: "{z}",
Row: "{y}",
Col: "{x}"
},
{
tileSize: 300
}
);
zoomTarget.value = map.mapboxGLMap.getZoom(); zoomTarget.value = map.mapboxGLMap.getZoom();
// 地图加载完成后发出事件
// emit('mapLoaded')
}); });
mapUtil.value = new MapUtil(map); mapUtil.value = new MapUtil(map);
// map = new EliMap({
// id: props.mapid,
// crs: "EPSG:4490",
// style: {
// glyphs: "./fonts/{fontstack}/{range}.pbf",
// center: [94.36057012, 29.64276831],
// zoom: 15
// },
// minZoom: 7,
// maxZoom: 18,
// });
// window.map = map;
// map.mapboxGLMap.on("load", () => {
// map.addWMTSLayer(
// "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
// ,
// {
// Service: "getImage",
// Type: "RGB",
// ZoomOffset: "0",
// V: "0.3",
// Zoom: "{z}",
// Row: "{y}",
// Col: "{x}"
// },
// {
// tileSize: 300
// }
// );
// zoomTarget.value = map.mapboxGLMap.getZoom();
// });
// mapUtil.value = new MapUtil(map);
mapUtil.value.Drawplot(); //初始化加载绘制工具 mapUtil.value.Drawplot(); //初始化加载绘制工具
// 设置地图中心点及图层 // 设置地图中心点及图层
@ -286,7 +259,6 @@ const mapSetLayer = (id, source) => {
//获取地图绘制的数据 //获取地图绘制的数据
const resFun = (coord, type, flag, data) => { const resFun = (coord, type, flag, data) => {
emitter.emit("coordString", { emitter.emit("coordString", {
coord: coord, coord: coord,
type: type, type: type,
@ -351,29 +323,35 @@ onUnmounted(() => {
right: 398px; right: 398px;
bottom: 4px; bottom: 4px;
z-index: 9; z-index: 9;
.mapImageItem { .mapImageItem {
border: 1px solid #08aae8; border: 1px solid #08aae8;
background: rgb(9, 26, 70); background: rgb(9, 26, 70);
& > img {
&>img {
width: 100%; width: 100%;
height: 50px; height: 50px;
} }
& > div {
&>div {
text-align: center; text-align: center;
position: relative; position: relative;
top: -3px; top: -3px;
} }
} }
.zoomTargetBox { .zoomTargetBox {
margin-top: 10px; margin-top: 10px;
margin-left: 23px; margin-left: 23px;
} }
::v-deep .el-input-number__decrease, ::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase { ::v-deep .el-input-number__increase {
background: #133362; background: #133362;
color: #fff; color: #fff;
border: none; border: none;
} }
::v-deep .el-input__inner { ::v-deep .el-input__inner {
background: #0c1641; background: #0c1641;
} }

359
src/components/GdMap/indexnw.vue
View File

@ -1,359 +0,0 @@
<template>
<div :id="mapid" class="map"></div>
<div class="changeMap_box" v-if="props.isShow">
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/slt.jpg')" alt="" />
<div>栅格浅色</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/yxt.jpg')" alt="" />
<div>影像图</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/yst.jpg')" alt="" />
<div>栅格深色</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/shy.png')" alt="" />
<div>三合一</div>
</div>
</el-carousel-item>
</el-carousel> -->
<!-- 地图缩放 -->
<div class="zoomTargetBox">
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
import { MapUtil } from "./mapUtil";
import emitter from "@/utils/eventBus.js";
import { getItem } from "@/utils/storage";
const conditionRoute = ref(true); //路况
const mMap = ref(null); //地图对象
const mapUtil = ref(null); //地图工具对象
const zoomTarget = ref(6);
const props = defineProps({
mapid: {
type: String,
default: "mapDiv"
},
//是否显示可以切换地图底图
isShow: {
type: Boolean,
default: false
},
//是否显示实时路况
isShowMvt: {
type: Boolean,
default: false
},
//是否显示地图层级
isShowZoom: {
type: Boolean,
default: false
},
//是否显示绘制控件
isShowDraw: {
type: Boolean,
default: false
}
});
try {
const userInfo = getItem("deptId")[0].deptCode;
} catch (error) { }
let map;
let mapLayer;
let mapLayer1;
onMounted(() => {
emitter.on("followUp", (res) => {
let box = document.getElementsByClassName("changeMap_box");
if (!box) return;
box[0].style.right = !res ? "4px" : "398px";
box[0].style.transition = "0.5s";
});
map = new EliMap({
id: props.mapid,
crs: "EPSG:4490",
style: {
glyphs: "./fonts/{fontstack}/{range}.pbf",
center: [94.36057012, 29.64276831],
zoom: 15
},
minZoom: 7,
maxZoom: 18,
});
window.map = map;
map.mapboxGLMap.on("load", () => {
map.addWMTSLayer(
"/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
,
{
Service: "getImage",
Type: "RGB",
ZoomOffset: "0",
V: "0.3",
Zoom: "{z}",
Row: "{y}",
Col: "{x}"
},
{
tileSize: 300
}
);
zoomTarget.value = map.mapboxGLMap.getZoom();
});
mapUtil.value = new MapUtil(map);
mapUtil.value.Drawplot(); //初始化加载绘制工具
// 设置地图中心点及图层
emitter.on("setMapCenter", (res) => {
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
});
emitter.on("removePlot", (flag) => {
mapUtil.value.removePlot(flag);
});
emitter.on("removeAll", (flag) => {
mapUtil.value.removeAll(flag);
});
// 撒点
emitter.on("addPointArea", (obj) => {
mapUtil.value.makerSki(obj);
});
// 鼠标滑过提示文字的点位
emitter.on("showPoint", (obj) => {
mapUtil.value.showPoint(obj);
});
// 清除覆盖物
emitter.on("deletePointArea", (res) => {
mapUtil.value.removeElement(res);
});
// 清除某个覆盖物的单个
emitter.on("deletePointAreaOne", (obj) => {
mapUtil.value.removeElementOne(obj.flag, obj.id);
});
// 清除某个覆盖物的单个
emitter.on("showSquire", (obj) => {
mapUtil.value.zdySquire(obj);
});
// 绘制图形 - 回显区域
emitter.on("drawShape", (res) => {
mapUtil.value.plot(res, resFun);
});
emitter.on("removeEara", (flag) => {
mapUtil.value.removeEara(flag);
});
// 回显图形
emitter.on("echoPlane", (res) => {
mapUtil.value.echoPlane(res);
});
//移除绘制区域
emitter.on("removeEara", (flag) => {
mapUtil.value.removeEara(flag);
});
// 回显线
emitter.on("echoLine", (res) => {
mapUtil.value.createLine(res, res.flag);
});
//创建边界面（geojson）
emitter.on("setBoundarys", (res) => {
mapUtil.value.createBoundarys(res);
});
// 移除边界
emitter.on("removeBj", (res) => {
mapUtil.value.removeBj(res);
});
// 轨迹回放
emitter.on("drawLineAnimation", (res) => {
mapUtil.value.displayLineAnimation(res);
});
// 聚合撒点
emitter.on("addPoint", (obj) => {
mapUtil.value.aggregateScatteringPoint(obj);
});
// 热力图显示
emitter.on("thermodynamicChart", (res) => {
mapUtil.value.showHeatDrawing(res);
});
// 扩散圆
emitter.on("diffusionCircle", (res) => {
mapUtil.value.diffusionCircle(res);
});
// 展示盘曲
emitter.on("showGapText", (obj) => {
mapUtil.value.gapText(obj);
});
// 获取当前地图中心点
emitter.on("getCurrentCenter", (res) => {
let centerPoint = map.mapboxGLMap.getCenter();
let coords = [centerPoint.lng, centerPoint.lat];
emitter.emit("getcentercoord", coords);
});
});
//切换地图底图
const onMapImageChange = (val) => {
//清除已经存在胡地图图层
if (map.mapboxGLMap.getLayer("SGQS_ID"))
map.mapboxGLMap.removeLayer("SGQS_ID");
if (map.mapboxGLMap.getLayer("YX_ID")) map.mapboxGLMap.removeLayer("YX_ID");
if (map.mapboxGLMap.getLayer("SGSG_ID"))
map.mapboxGLMap.removeLayer("SGSG_ID");
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
map.mapboxGLMap.removeLayer("TDT_POI_ID");
//设置图层
switch (val) {
case 0:
mapSetLayer("SGQS_ID", "SGQS");
break;
case 1:
mapSetLayer("YX_ID", "YX");
break;
case 2:
mapSetLayer("SGSG_ID", "SGSG");
break;
case 3:
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
break;
}
if (map.mapboxGLMap.getLayer("realTimeTrafficlevelOne"))
map.mapboxGLMap.moveLayer("realTimeTrafficlevelOne");
if (map.mapboxGLMap.getLayer("map_id")) map.mapboxGLMap.moveLayer("map_id");
if (map.mapboxGLMap.getLayer("map_ids")) map.mapboxGLMap.moveLayer("map_ids");
};
//设置图层函数
const mapSetLayer = (id, source) => {
map.mapboxGLMap.addLayer({ id, type: "raster", source });
};
//获取地图绘制的数据
const resFun = (coord, type, flag, data) => {
emitter.emit("coordString", {
coord: coord,
type: type,
flag: flag,
data: data
});
};
// 地图层级
const handleZoom = (val) => {
map.mapboxGLMap.setZoom(val);
};
// 是否打开或者关闭路况
const handleSwitch = (val) => {
if (val) {
// 打开
} else {
// 关闭
}
};
onUnmounted(() => {
emitter.off("removePlot");
emitter.off("setMapCenter");
emitter.off("addPointArea");
emitter.off("showPoint");
emitter.off("deletePointArea");
emitter.off("deletePointAreaOne");
emitter.off("drawShape");
emitter.off("echoPlane");
emitter.off("removeEara");
emitter.off("echoLine");
emitter.off("addPoint");
emitter.off("thermodynamicChart");
emitter.off("drawLineAnimation");
emitter.off("aggregateScatteringPoint");
emitter.off("hotmap");
emitter.off("setBoundarys");
emitter.off("diffusionCircle");
emitter.off("SsCircle");
emitter.off("ClearssCircle");
});
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 100%;
background-color: aliceblue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.changeMap_box {
position: absolute;
right: 398px;
bottom: 4px;
z-index: 9;
.mapImageItem {
border: 1px solid #08aae8;
background: rgb(9, 26, 70);
&>img {
width: 100%;
height: 50px;
}
&>div {
text-align: center;
position: relative;
top: -3px;
}
}
.zoomTargetBox {
margin-top: 10px;
margin-left: 23px;
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
background: #133362;
color: #fff;
border: none;
}
::v-deep .el-input__inner {
background: #0c1641;
}
}
</style>

2
src/views/backOfficeSystem/JudgmentHome/tsypHome/components/regulation.vue
View File

@ -23,7 +23,7 @@
<script setup> <script setup>
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import FormMessage from "@/components/aboutTable/FormMessage.vue"; import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { VueDraggable } from 'vue-draggable-plus' // import { VueDraggable } from 'vue-draggable-plus'
const dialogForm = ref(false) const dialogForm = ref(false)
const title = ref("新增") const title = ref("新增")
const init = (type, row) => { const init = (type, row) => {

43
src/views/home/echarts/barHatEcharts.vue
View File

@ -52,27 +52,26 @@ watch(() => props.data, val => {
function startAutoTooltip() { function startAutoTooltip() {
// 详细的条件检查和日志 // 详细的条件检查和日志
if (!props.autoTooltip) { if (!props.autoTooltip) {
console.log('自动提示框未启动 - autoTooltip为false');
return; return;
} }
if (!props.data) { if (!props.data) {
console.warn('自动提示框未启动 - 缺少数据'); // console.warn('自动提示框未启动 - 缺少数据');
return; return;
} }
if (!props.data.xDate || props.data.xDate.length === 0) { if (!props.data.xDate || props.data.xDate.length === 0) {
console.warn('自动提示框未启动 - xDate数据为空'); // console.warn('自动提示框未启动 - xDate数据为空');
return; return;
} }
if (!props.data.list || props.data.list.length === 0) { if (!props.data.list || props.data.list.length === 0) {
console.warn('自动提示框未启动 - list数据为空'); // console.warn('自动提示框未启动 - list数据为空');
return; return;
} }
if (!myChart.value) { if (!myChart.value) {
console.warn('自动提示框未启动 - 图表实例不存在'); // console.warn('自动提示框未启动 - 图表实例不存在');
return; return;
} }
@ -82,26 +81,26 @@ function startAutoTooltip() {
const dataLength = props.data.xDate.length; const dataLength = props.data.xDate.length;
currentTooltipIndex.value = 0; currentTooltipIndex.value = 0;
console.log(`开始自动提示框循环 - 数据长度: ${dataLength}, 间隔: ${props.tooltipInterval}ms`); // console.log(`开始自动提示框循环 - 数据长度: ${dataLength}, 间隔: ${props.tooltipInterval}ms`);
console.log('数据预览:', { // console.log('数据预览:', {
xDate: props.data.xDate.slice(0, 3), // xDate: props.data.xDate.slice(0, 3),
listCount: props.data.list.length, // listCount: props.data.list.length,
firstSeriesName: props.data.list[0]?.name, // firstSeriesName: props.data.list[0]?.name,
firstSeriesValueCount: props.data.list[0]?.value?.length // firstSeriesValueCount: props.data.list[0]?.value?.length
}); // });
tooltipTimer.value = setInterval(() => { tooltipTimer.value = setInterval(() => {
try { try {
// 检查图表实例是否仍然存在 // 检查图表实例是否仍然存在
if (!myChart.value) { if (!myChart.value) {
console.error('图表实例丢失，停止自动提示框'); // console.error('图表实例丢失，停止自动提示框');
stopAutoTooltip(); stopAutoTooltip();
return; return;
} }
// 检查是否暂停 // 检查是否暂停
if (isPaused.value) { if (isPaused.value) {
console.log('提示框循环已暂停'); // console.log('提示框循环已暂停');
return; return;
} }
@ -120,7 +119,7 @@ function startAutoTooltip() {
// 验证数据有效性 // 验证数据有效性
if (currentData === undefined) { if (currentData === undefined) {
console.error(`数据索引 ${currentTooltipIndex.value} 超出范围`); // console.error(`数据索引 ${currentTooltipIndex.value} 超出范围`);
stopAutoTooltip(); stopAutoTooltip();
return; return;
} }
@ -132,9 +131,9 @@ function startAutoTooltip() {
dataIndex: currentTooltipIndex.value dataIndex: currentTooltipIndex.value
}); });
console.log(`✓ 显示提示框 [${currentTooltipIndex.value}/${dataLength-1}] - ${currentData}:`, currentValues); // console.log(`✓ 显示提示框 [${currentTooltipIndex.value}/${dataLength-1}] - ${currentData}:`, currentValues);
} catch (error) { } catch (error) {
console.error('显示提示框时出错:', error); // console.error('显示提示框时出错:', error);
// 如果出错，尝试停止循环避免持续错误 // 如果出错，尝试停止循环避免持续错误
stopAutoTooltip(); stopAutoTooltip();
} }
@ -144,12 +143,12 @@ function startAutoTooltip() {
// 更新索引，循环展示 // 更新索引，循环展示
currentTooltipIndex.value = (currentTooltipIndex.value + 1) % dataLength; currentTooltipIndex.value = (currentTooltipIndex.value + 1) % dataLength;
} catch (error) { } catch (error) {
console.error('自动提示框循环出错:', error); // console.error('自动提示框循环出错:', error);
stopAutoTooltip(); stopAutoTooltip();
} }
}, props.tooltipInterval); }, props.tooltipInterval);
console.log(`✓ 自动提示框已启动 - 间隔: ${props.tooltipInterval}ms, 数据长度: ${dataLength}`); // console.log(`✓ 自动提示框已启动 - 间隔: ${props.tooltipInterval}ms, 数据长度: ${dataLength}`);
} }
// 停止自动循环展示提示框 // 停止自动循环展示提示框
@ -157,20 +156,20 @@ function stopAutoTooltip() {
if (tooltipTimer.value) { if (tooltipTimer.value) {
clearInterval(tooltipTimer.value); clearInterval(tooltipTimer.value);
tooltipTimer.value = null; tooltipTimer.value = null;
console.log('自动提示框已停止'); // console.log('自动提示框已停止');
} }
} }
// 暂停自动循环 // 暂停自动循环
function pauseAutoTooltip() { function pauseAutoTooltip() {
isPaused.value = true; isPaused.value = true;
console.log('自动提示框已暂停'); // console.log('自动提示框已暂停');
} }
// 恢复自动循环 // 恢复自动循环
function resumeAutoTooltip() { function resumeAutoTooltip() {
isPaused.value = false; isPaused.value = false;
console.log('自动提示框已恢复'); // console.log('自动提示框已恢复');
} }
// 处理数据 // 处理数据

5
src/views/home/layout/flowLine.vue
View File

@ -64,7 +64,10 @@
.flowLine { .flowLine {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: absolute;
top: 10px;
pointer-events: none;
pointer-events: none;
} }
.zdy_line_svg { .zdy_line_svg {

10
src/views/home/layout/head.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div class="headBox"> <div class="headBox">
<FlowLine></FlowLine>
<div class="headBoxBg"> <div class="headBoxBg">
<!-- 左边 --> <!-- 左边 -->
<el-popover width="480px" :visible="isShowVisble" :append-to-body="true" trigger="click" popper-class="bszdr-tq-Popover" > <el-popover width="480px" :visible="isShowVisble" :append-to-body="true" trigger="click" popper-class="bszdr-tq-Popover" >
@ -84,9 +85,7 @@
</div> </div>
</ul> </ul>
</div> </div>
<div class="zzzz">
<FlowLine></FlowLine>
</div>
</div> </div>
</template> </template>
@ -282,9 +281,6 @@ onUnmounted(() => {
} }
} }
.zzzz{
position: absolute;
top: 10px;
}
</style> </style>