fix：去除大屏病害状态，修改大屏线段中心点
This commit is contained in:
parent
b96dcf1cbe
commit
cdfbc4cb9b
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-14 10:46:23
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-23 11:07:04
|
||||
* @LastEditTime: 2024-12-23 17:37:59
|
||||
* @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
|
||||
* @Description: 公共地图
|
||||
-->
|
||||
@ -389,7 +389,10 @@ export default {
|
||||
// 获取弹窗数据
|
||||
const popupData = feature.get("data");
|
||||
// 获取弹窗内元素并赋值
|
||||
this.$refs.popupContent.innerHTML = `<span>路段名称：</span><span>${popupData.name}</span><br/><span>病害数：</span><span>${popupData.count}个</span><br/><span>起始桩号：</span><span>${popupData.stakeStart}</span><br/><span>终止桩号：</span><span>${popupData.stakeEnd}</span>`;
|
||||
this.$refs.popupContent.innerHTML = `<span>路段名称：</span><span>${popupData.name}</span><br/>
|
||||
<span>病害数：</span><span>${popupData.count}个</span><br/>
|
||||
<span>起始桩号：</span><span>${popupData.stakeStart}</span><br/>
|
||||
<span>终止桩号：</span><span>${popupData.stakeEnd}</span>`;
|
||||
dislogLay.setPosition(coordinate);
|
||||
} else {
|
||||
dislogLay.setPosition(undefined);
|
||||
@ -413,7 +416,7 @@ export default {
|
||||
this.$emit("map-moveend", zoom);
|
||||
});
|
||||
// 图层选择事件
|
||||
this.selectSingClick = new Select({ style: null });
|
||||
this.selectSingClick = new Select();
|
||||
map.addInteraction(this.selectSingClick);
|
||||
this.selectSingClick.on("select", (e) => {
|
||||
this.$emit("feature-select", e);
|
||||
@ -825,7 +828,12 @@ export default {
|
||||
}
|
||||
|
||||
// 地图弹窗样式
|
||||
.ol-popup > div {
|
||||
.ol-popup{
|
||||
width:10rem;
|
||||
position: absolute;
|
||||
margin: 0.5rem;
|
||||
|
||||
> div {
|
||||
padding: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
background: rgba(79, 79, 79, 0.7);
|
||||
@ -834,6 +842,7 @@ export default {
|
||||
font-size: 0.7rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
// 放大缩小控件
|
||||
.control-container {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 11:56:02
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-23 13:23:20
|
||||
* @LastEditTime: 2024-12-24 09:07:12
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
|
||||
* @Description: 病害巡检-病害日志
|
||||
-->
|
||||
@ -112,21 +112,6 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="病害状态" prop="state">
|
||||
<el-select
|
||||
v-model="trafficForm.state"
|
||||
popper-class="screen-select"
|
||||
placeholder="请选择病害状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectStatus"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
@ -146,7 +131,8 @@
|
||||
style="width: 100%; background: none"
|
||||
height="85%"
|
||||
>
|
||||
<el-table-column prop="defectType" label="病害类型"> </el-table-column>
|
||||
<el-table-column prop="defectType" width="100" label="病害类型">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="segmentName"
|
||||
show-overflow-tooltip
|
||||
@ -155,12 +141,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="companyName" label="所属">
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="病害状态">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.state === "2" ? "已修复" : "未修复" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="50" prop="pci" label="操作">
|
||||
<el-table-column width="70" prop="pci" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
slot="reference"
|
||||
@ -207,7 +188,7 @@ export default {
|
||||
eventType: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -224,8 +205,6 @@ export default {
|
||||
stakeEnd: "",
|
||||
// 病害类型
|
||||
defectType: "",
|
||||
// 病害状态
|
||||
state: "",
|
||||
},
|
||||
// 时间选择筛选
|
||||
dateTime: [],
|
||||
@ -235,13 +214,6 @@ export default {
|
||||
lineList: [],
|
||||
// 路段名称下拉数据
|
||||
segmentList: [],
|
||||
// 病害类型下拉数据
|
||||
// eventType: [],
|
||||
// 病害状态下拉数据
|
||||
defectStatus: [
|
||||
{ label: "已修复", value: "2" },
|
||||
{ label: "未修复", value: "1" },
|
||||
],
|
||||
// 事件列表
|
||||
emergencyList: [],
|
||||
// 分页数据绑定
|
||||
@ -257,7 +229,6 @@ export default {
|
||||
bottomTipClick: {
|
||||
handler() {
|
||||
this.trafficForm.defectType = "";
|
||||
// this.getAllDefectType();
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
@ -265,7 +236,6 @@ export default {
|
||||
mounted() {
|
||||
this.getData();
|
||||
this.getLineList();
|
||||
// this.getAllDefectType();
|
||||
this.getSegmentList();
|
||||
},
|
||||
methods: {
|
||||
@ -305,19 +275,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
// /**
|
||||
// * @description: 获取病害类型下拉数据
|
||||
// * @param {*}
|
||||
// * @return {*}
|
||||
// */
|
||||
// getAllDefectType() {
|
||||
// DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
|
||||
// if (code === 200) {
|
||||
// this.eventType = data;
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
|
||||
/**
|
||||
* @description: 点击搜索事件
|
||||
* @param {*}
|
||||
@ -382,8 +339,6 @@ export default {
|
||||
stakeEnd: "",
|
||||
// 病害类型
|
||||
defectType: "",
|
||||
// 病害状态
|
||||
state: "",
|
||||
};
|
||||
this.dateTime = [];
|
||||
this.segmentList = [];
|
||||
@ -443,7 +398,7 @@ export default {
|
||||
|
||||
.traffic-form {
|
||||
width: calc(100% - 0.5rem);
|
||||
height: 22rem;
|
||||
height: 19rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
.form-item {
|
||||
@ -530,7 +485,7 @@ export default {
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
height: 4%;
|
||||
height: 5%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@ -569,7 +524,7 @@ export default {
|
||||
|
||||
::v-deep .traffic-table {
|
||||
width: 100%;
|
||||
height: 42%;
|
||||
height: 50%;
|
||||
padding: 0.5rem 0;
|
||||
overflow: hidden;
|
||||
|
||||
@ -646,6 +601,7 @@ export default {
|
||||
|
||||
// 按钮样式
|
||||
.btn-submit {
|
||||
height: 2rem;
|
||||
background-color: transparent;
|
||||
background-image: url("~@/assets/screen/index/btn-submit.png");
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-23 14:29:26
|
||||
* @LastEditTime: 2024-12-24 11:20:36
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -432,6 +432,8 @@ import VectorLayer from "ol/layer/Vector";
|
||||
import * as geomExports from "ol/geom";
|
||||
import Cluster from "ol/source/Cluster";
|
||||
import logo from "@/assets/xc.png";
|
||||
import { getCenter } from "ol/extent";
|
||||
import MultiLineString from "ol/geom/MultiLineString";
|
||||
// 组件
|
||||
import ModuleBlock from "./module-block.vue";
|
||||
import TodayInspection from "./overview-components/today-inspection.vue";
|
||||
@ -622,6 +624,8 @@ export default {
|
||||
clusters: null,
|
||||
// 线段图层
|
||||
markLayerLines: null,
|
||||
// 是否需要修改地图中心点
|
||||
isCenterCalculated: false,
|
||||
|
||||
// 图片弹窗标题
|
||||
imgTitle: "查看",
|
||||
@ -847,6 +851,7 @@ export default {
|
||||
this.showMap = false;
|
||||
this.markLayerLines = null;
|
||||
this.companyId = null;
|
||||
this.isCenterCalculated = false;
|
||||
},
|
||||
|
||||
/**
|
||||
@ -1011,7 +1016,7 @@ export default {
|
||||
src: require(`@/assets/screen/index/${
|
||||
this.mapLogeList[
|
||||
feature.getProperties().features[0].get("data").iconType
|
||||
]
|
||||
] || "龟裂"
|
||||
}.png`),
|
||||
// 图标缩放比例
|
||||
scale: 0.6,
|
||||
@ -1077,6 +1082,39 @@ export default {
|
||||
this.mapLegendList = data.basLinetypeSetting;
|
||||
this.lineString = data.lines;
|
||||
this.drawLine();
|
||||
// 修改地图中心点
|
||||
if (!this.isCenterCalculated) {
|
||||
const lineArray = data.lines.map((item) => {
|
||||
return JSON.parse(item.line).map((it) => {
|
||||
return [it.lon, it.lat];
|
||||
});
|
||||
});
|
||||
// 创建 MultiLineString 对象
|
||||
const multiLine = new MultiLineString(lineArray);
|
||||
// 获取 MultiLineString 的边界框（extent）
|
||||
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,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
// map.getView().setCenter(center);
|
||||
map.getView().animate({
|
||||
center,
|
||||
duration: 500,
|
||||
});
|
||||
});
|
||||
}
|
||||
this.isCenterCalculated = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -1275,6 +1313,8 @@ export default {
|
||||
// 清除已经点击的公司
|
||||
this.companyId = null;
|
||||
if (item.component === "OverviewScreen") {
|
||||
// 将线段中心点修改标识置为false
|
||||
this.isCenterCalculated = false;
|
||||
/* 清空线段图层 */
|
||||
this.markLayerLines = null;
|
||||
this.leftModuleList = [
|
||||
@ -1373,6 +1413,8 @@ export default {
|
||||
class: "twe",
|
||||
},
|
||||
];
|
||||
// 将线段中心点修改标识置为false
|
||||
this.isCenterCalculated = false;
|
||||
// 隐藏总览地图
|
||||
this.showMap = false;
|
||||
// 发送小车位置消息
|
||||
@ -1455,7 +1497,6 @@ export default {
|
||||
map.removeLayer(this.clusters);
|
||||
this.clusters = null;
|
||||
map.getView().setZoom(10);
|
||||
map.getView().setCenter([123.30297096718999, 41.87942945541742]);
|
||||
});
|
||||
this.getLinePoint();
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-12-17 09:18:08
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-23 11:44:13
|
||||
* @LastEditTime: 2024-12-24 10:52:05
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-line\index.vue
|
||||
* @Description: 预警中心-大屏图例设置
|
||||
-->
|
||||
@ -28,9 +28,9 @@
|
||||
<el-table-column label="范围四" align="center" prop="s4">
|
||||
<template slot-scope="scope"> ≤{{ scope.row.s4 }} </template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="范围五" align="center" prop="s5">
|
||||
<template slot-scope="scope"> ≤{{ scope.row.s5 }} </template>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="范围五" align="center" prop="s5">
|
||||
<template slot-scope="scope"> >{{ scope.row.s4 }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user