SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改大屏返回逻辑，去除默认密码，修改地图共用一个，线段点击打点

Browse Source
This commit is contained in:
SunTao 2024-12-27 11:58:54 +08:00
parent 2b9983e374
commit ce65a6fb81
2 changed files with 315 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
src/views/big-screen/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-26 10:40:09
* @LastEditTime: 2024-12-27 11:39:58
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@ -271,7 +271,10 @@
</el-select>
</div>
<!-- 图片背景返回 -->
<div class="return-image" v-if="showMap">
<div
class="return-image"
v-if="showMap && elementDiv === 'OverviewScreen'"
>
<el-button type="info" size="mini" round @click="disabledMapCompany"
>返回</el-button
>
@ -321,10 +324,10 @@
</div>
</div>
<!-- 总览地图 -->
<fssm-map ref="overViewMap" v-if="showMap"> </fssm-map>
<!-- <fssm-map ref="overViewMap" v-if="showMap"> </fssm-map> -->
<!-- 病害巡检、道路资产地图 -->
<fssm-map
v-if="elementDiv !== 'OverviewScreen' && !showMap"
v-if="showMap"
ref="roadMap"
:showChange="false"
:controlStyle="{ top: '20%', left: '26%' }"
@ -455,6 +458,7 @@ import ImgDialog from "./components/img-dialog.vue";
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
import CountTo from "vue-count-to";
import "animate.css";
import debounce from "lodash/debounce";
// 接口
import {
selectTypeList,
@ -577,12 +581,12 @@ export default {
showIconList: false,
// 图片背景下病害类型下拉选择绑定
mapCareSelect: "",
mapCareSelect: [],
// 图片背景下病害类型下拉选择数据
dieaseOptions: [],
// 地图打点-路段绑定
roadSelect: "",
// 总览页面是否展示地图显隐控制
// 是否展示地图显隐控制
showMap: false,
// 图片背景下popover弹窗病害名称
screenMapPopoverName: "",
@ -612,9 +616,9 @@ export default {
{ name: "道路资产", component: "RoadScreen" },
],
// 中心点集合(全部)
// 中心点集合(过滤后得点位)
centerPiont: [],
// 中心点集合（当前）
// 中心点集合（所有点位）
drawPointList: [],
// 点位图标map
mapLogeList: {},
@ -628,6 +632,8 @@ export default {
markLayerLines: null,
// 是否需要修改地图中心点
isCenterCalculated: false,
// 线段点击保存得参数
defectMapPiont: {},
// 图片弹窗标题
imgTitle: "查看",
@ -854,6 +860,9 @@ export default {
this.markLayerLines = null;
this.companyId = null;
this.isCenterCalculated = false;
this.mapCareSelect = [];
this.getMapCare([]);
this.changeOrder(this.workOrderType);
},
/**
@ -864,16 +873,19 @@ export default {
this.imgTitle = "查看";
this.imageItem = item;
this.imgVisible = true;
// 清除点击得线段参数
this.defectMapPiont = {};
// 地图右上角多选按钮显示
this.getIconType();
this.showIconList = true;
// 地图打点\改变地图层级
this.$nextTick(() => {
const map = this.$refs.roadMap.instance.get("map");
this.$refs.roadMap.removeSelectClick();
map.getView().setCenter(item.tablePoint);
map.getView().setZoom(16);
});
this.roadSelect = item.segmentId;
// this.roadSelect = item.segmentId;
this.getCenterPiont();
},
@ -928,7 +940,7 @@ export default {
mapPointList({
type: this.elementDiv,
classType: this.bottomTipClick,
segmentId: this.roadSelect,
...this.defectMapPiont,
}).then(({ code, data }) => {
if (code === 200) {
this.drawPointList = data.map((item) => {
@ -949,15 +961,51 @@ export default {
}
return [];
});
// 修改地图中心点位
const pointArray = data.map((item) => {
if (item.geometry) {
return [item.geometry[0], item.geometry[1]];
}
return [];
});
// console.log(pointArray);
this.fitMapToPoints(pointArray);
// 如果不是病害巡检，则绘制点位
// 如果图片弹窗打开，则绘制点位
if (this.elementDiv !== "DiseaseScreen" || this.imgVisible) {
this.drawPoint();
}
}
});
},
/**
* @description: 根据点位计算地图中心点
* @return {void}
*/
fitMapToPoints(points) {
if (points.length > 0) {
// 创建一个空的 extent
let extent = [Infinity, Infinity, -Infinity, -Infinity];
// 计算所有点的边界框（extent）
points.forEach((point) => {
extent = [
Math.min(extent[0], point[0]),
Math.min(extent[1], point[1]),
Math.max(extent[2], point[0]),
Math.max(extent[3], point[1]),
];
});
// 获取地图实例
const map = this.$refs.roadMap.instance.get("map");
// 使用 fit 方法根据边界框计算最佳缩放级别
map.getView().fit(extent, {
duration: 500, // 动画持续时间
padding: [80, 500, 80, 500], // 边缘填充
});
}
},
/**
* @description: 绘制地图点位
* @return {void}
@ -995,7 +1043,7 @@ export default {
crossOrigin: "anonymous",
src: require(`@/assets/screen/index/龟裂.png`),
// 图标缩放比例
scale: 0.6,
scale: 0.5,
displacement: [0, 30],
// 0.3为30度
// rotation: 0.3,
@ -1004,7 +1052,7 @@ export default {
textAlign: "center", //位置
textBaseline: "middle",
font: "normal 14px 微软雅黑",
offsetY: -50,
offsetY: -40,
fill: new Fill({
color: "#ffffff",
}),
@ -1021,7 +1069,7 @@ export default {
] || "龟裂"
}.png`),
// 图标缩放比例
scale: 0.6,
scale: 0.5,
displacement: [0, 30],
// 0.3为30度
// rotation: 0.3,
@ -1030,7 +1078,7 @@ export default {
textAlign: "center", //位置
textBaseline: "middle",
font: "normal 14px 微软雅黑",
offsetY: -50,
offsetY: -40,
fill: new Fill({
color: "#ffffff",
}),
@ -1054,12 +1102,7 @@ export default {
if (this.markLayerLines) {
// 清除线段图层
this.$nextTick(() => {
let map = null;
if (this.$refs.roadMap) {
map = this.$refs.roadMap.instance.get("map");
} else {
map = this.$refs.overViewMap.instance.get("map");
}
const map = this.$refs.roadMap.instance.get("map");
map.removeLayer(this.markLayerLines);
this.markLayerLines = null;
});
@ -1097,19 +1140,7 @@ export default {
const extent = multiLine.getExtent();
// 计算边界框的中心点
const center = getCenter(extent);
if (this.showMap) {
this.$nextTick(() => {
const map = this.$refs.overViewMap.instance.get("map");
map.getView().animate({
center,
duration: 500,
});
map.getView().fit(extent, {
duration: 500,
padding: [80, 500, 80, 500], // 边缘填充（可选）
});
});
} else {
this.$nextTick(() => {
const map = this.$refs.roadMap.instance.get("map");
// map.getView().setCenter(center);
@ -1122,7 +1153,7 @@ export default {
padding: [80, 500, 80, 500], // 边缘填充（可选）
});
});
}
this.isCenterCalculated = true;
}
}
@ -1144,6 +1175,7 @@ export default {
data: {
name: element.segmentName,
count: element.defectCount,
segmentId: element.segmentId,
stakeEnd: element.stakeEnd,
stakeStart: element.stakeStart,
},
@ -1180,17 +1212,11 @@ export default {
type: "line",
},
});
if (this.showMap) {
this.$nextTick(() => {
const map = this.$refs.overViewMap.instance.get("map");
map.addLayer(this.markLayerLines);
});
} else {
this.$nextTick(() => {
const map = this.$refs.roadMap.instance.get("map");
map.addLayer(this.markLayerLines);
});
}
},
/**
@ -1222,6 +1248,7 @@ export default {
this.defectSelect = "";
this.bottomTipClick = value;
this.getAllDefectType();
// 清空打点图层
this.$nextTick(() => {
const map = this.$refs.roadMap.instance.get("map");
map.removeLayer(this.clusters);
@ -1232,6 +1259,7 @@ export default {
// 地图右上角多选按钮隐藏
this.showIconList = false;
// this.getIconType();
// 绘制线段
this.getLinePoint();
}
},
@ -1285,7 +1313,8 @@ export default {
let features = feature.get("features");
// 点击线段事件
if (feature.getProperties().type === "line") {
console.log(feature, "线段参数");
// console.log(feature.get("data"), "线段参数");
// this.drawDefectPoint(feature.get("data"));
} else if (feature.getProperties().type === "carPoint") {
console.log(feature, "小车点位");
} else {
@ -1311,22 +1340,46 @@ export default {
}
},
/**
* @description: 地图点击线段进行打点
* @param {object}
* @return {void}
*/
drawDefectPoint(item) {
this.defectMapPiont = item;
// 地图右上角多选按钮显示
this.getIconType();
this.showIconList = true;
// 地图打点\改变地图层级
// this.$nextTick(() => {
// const map = this.$refs.roadMap.instance.get("map");
// map.getView().setZoom(16);
// });
// this.roadSelect = item.segmentId;
this.getCenterPiont();
},
/**
* @description: 数据栏切换事件
* @param {object} item
* @return {void}
*/
changeElement(item) {
if (this.elementDiv !== item) {
if (this.elementDiv !== item.component) {
this.elementDiv = item.component;
this.roadSelect = "";
// 清除已经点击的公司
this.companyId = null;
// 清除点击得线段参数
this.defectMapPiont = {};
this.changeMapElement(item);
}
},
/**
* @description: 数据栏切换两侧数据和地图事件
* @param {object} item
* @return {void}
*/
changeMapElement: debounce(function (item) {
if (item.component === "OverviewScreen") {
// 将线段中心点修改标识置为false
this.isCenterCalculated = false;
/* 清空线段图层 */
this.markLayerLines = null;
this.leftModuleList = [
{
width: "100%",
@ -1372,7 +1425,13 @@ export default {
class: "twe",
},
];
// 展示图片地图
// 清除已经点击的公司
this.companyId = null;
// 将线段中心点修改标识置为false
this.isCenterCalculated = false;
/* 清空线段图层 */
this.markLayerLines = null;
// 不展示地图
this.showMap = false;
// 不接收小车位置消息
const data = { type: "carLocation", status: false };
@ -1423,10 +1482,12 @@ export default {
class: "twe",
},
];
// 清除已经点击的公司
this.companyId = null;
// 将线段中心点修改标识置为false
this.isCenterCalculated = false;
// 隐藏总览地图
this.showMap = false;
this.showMap = true;
// 发送小车位置消息
const data = { type: "carLocation", status: true };
this.$ws.send(data);
@ -1440,19 +1501,14 @@ export default {
// 地图右上角多选按钮显示
this.getIconType();
this.showIconList = true;
// 进行地图打点
this.getCenterPiont();
// 清除线段图层
this.$nextTick(() => {
let map = null;
if (this.$refs.roadMap) {
map = this.$refs.roadMap.instance.get("map");
} else {
map = this.$refs.overViewMap.instance.get("map");
}
const map = this.$refs.roadMap.instance.get("map");
map.removeLayer(this.markLayerLines);
this.markLayerLines = null;
});
// 进行地图打点
this.getCenterPiont();
} else if (item.component === "DiseaseScreen") {
this.leftModuleList = [
{
@ -1492,8 +1548,12 @@ export default {
class: "one",
},
];
// 清除已经点击的公司
this.companyId = null;
// 将线段中心点修改标识置为false
this.isCenterCalculated = false;
//隐藏总览地图
this.showMap = false;
this.showMap = true;
// 发送小车位置消息
const data = { type: "carLocation", status: true };
this.$ws.send(data);
@ -1502,6 +1562,7 @@ export default {
this.showIconList = false;
// 图层恢复
this.mapZoom = "";
// 清除打点图层
this.$nextTick(() => {
const map = this.$refs.roadMap.instance.get("map");
map.removeLayer(this.clusters);
@ -1510,8 +1571,7 @@ export default {
});
this.getLinePoint();
}
}
},
}, 500),
/**
* @description: 处理websocket消息
@ -2030,6 +2090,8 @@ export default {
// 消息中心样式
.header-news {
margin-right: 1rem;
i {
position: relative;
cursor: pointer;

4
src/views/login.vue
View File

@ -107,8 +107,8 @@ export default {
return {
codeUrl: "",
loginForm: {
username: "admin",
password: "admin123",
username: "",
password: "",
rememberMe: false,
code: "",
uuid: "",