admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

测速 中铁 大屏-mars3d合并

Browse Source
This commit is contained in:
Rain 2024-10-15 15:35:35 +08:00
parent b042fd5aae
commit 615d0a359d
8 changed files with 2358 additions and 939 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
src/components/mars3d/MarsBox.vue
View File

@ -1,12 +1,14 @@
<template>
<div class="mars3d-com">
<div class="mars3d-com" ref="mars3dContainer" style="width: 100%; height: 100%"></div>
<!-- 绘制区域 -->
<div class="mars3d-box">
<div class="mars-3d-header">
<el-radio v-model="marsheader" label="1">多边形面</el-radio>
<el-radio v-model="marsheader" label="1">绘制区域</el-radio>
<i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i>
</div>
<!-- 经纬度数据 -->
<div class="mars3d-Controls">
<div class="mars3d-item" style="margin-top: 50px;">
<div class="mar3d-title">数据维护：</div>
@ -45,6 +47,32 @@
</div>
</div>
</div>
<!-- 经纬度显示 -->
<!-- <div class="mars3d-box">
<div class="mars-3d-header">
<el-radio v-model="marsheader" label="1">经纬度</el-radio>
<i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i>
</div>
<div class="mars3d-Controls">
<div class="mars3d-item" style="margin-top: 50px;">
<div class="mar3d-title">经度：</div>
<div class="mar3d-con"></div>
</div>
<div class="mars3d-item">
<div class="mar3d-title">纬度：</div>
<div class="mar3d-con" style="margin-left: 24px;">
<input v-model="itemdata.texttitle" placeholder="填充文字" />
</div>
</div>
<div class="mars3d-item">
<el-button size="mini" type="success" @click="onlatlnt">保存区域</el-button>
</div>
</div>
</div> -->
</div>
</template>
@ -77,7 +105,14 @@ export default {
// 选中自定义图形
marsheader: "1",
// 共用参数-1-项目/2-区域
publicparameters: "1"
publicparameters: "1",
// 获取经纬度-开关
latlntswtich: "",
// 经纬度
latlntdata: {
lat: "",
latlntdata: ""
}
};
},
mounted() {
@ -114,6 +149,7 @@ export default {
// navigationHelpButton: true, // 帮助按钮
// fullscreenButton: true, // 全屏按钮
contextmenu: { hasDefault: true } // 右键菜单
// locationBar: true,
},
// terrain: {
// url: "//data.mars3d.cn/terrain",
@ -132,14 +168,22 @@ export default {
]
});
if (this.$parent.cardForm.configValue) {
const locationBar = new mars3d.control.LocationBar({
template:
"<div>经度:{lng}</div><div>纬度:{lat}</div> <div>海拔：{alt}米</div> <div>层级：{level}</div><div>方向：{heading}度</div> <div>俯仰角：{pitch}度</div><div>视高：{cameraHeight}米</div><div>帧率：{fps} FPS</div>"
});
// 添加控件到地图
this.map.addControl(locationBar);
if (this.$parent.$parent.cardForm.configValue) {
console.log(
"this.$parent.cardForm.configValue",
this.$parent.cardForm.configValue
this.$parent.$parent.cardForm.configValue
);
console.log(
"this.$parent.cardForm.configValue",
JSON.parse(this.$parent.cardForm.configValue, null, 2)
JSON.parse(this.$parent.$parent.cardForm.configValue, null, 2)
);
// 绘制过区域
// const geojsonData = {
@ -197,7 +241,7 @@ export default {
this.graphicLayer = new mars3d.layer.GraphicLayer();
this.map.addLayer(this.graphicLayer);
let a = JSON.parse(this.$parent.cardForm.configValue, null, 2);
let a = JSON.parse(this.$parent.$parent.cardForm.configValue, null, 2);
console.log("a", a);
console.log("a.geojsonData", a.geojsonData);
console.log("a.features", a.features);
@ -215,14 +259,39 @@ export default {
this.graphicLayer = new mars3d.layer.GraphicLayer();
this.map.addLayer(this.graphicLayer);
}
// this.bindLayerPopup();
this.bindGraphicClick();
// 绑定地图点击事件
this.map.on(mars3d.EventType.click, this.handleMapClick);
},
methods: {
// 处理地图点击事件
handleMapClick(event) {
const position = event.position; // 获取点击位置的屏幕坐标 (x, y)
const cartesian = this.map.scene.globe.pick(
this.map.camera.getPickRay(position),
this.map.scene
); // 获取点击位置的笛卡尔坐标
if (cartesian) {
const cartographic = mars3d.Cesium.Cartographic.fromCartesian(
cartesian
); // 转换为地理坐标
const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude); // 转换为经度
const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude); // 转换为纬度
const altitude = cartographic.height; // 获取海拔高度
console.log(`经度: ${longitude}, 纬度: ${latitude}, 海拔: ${altitude}`);
// 这里可以根据需要将经纬度信息显示在界面上
// 例如：this.showCoordinates(longitude, latitude, altitude);
}
},
// 通知父组件关闭
onclonemap() {
this.$parent.onMarsBoxMap();
this.$parent.$parent.onMarsBoxMap();
},
addDemoGraphic14(item) {
@ -260,7 +329,7 @@ export default {
// maxPointNum: 2, //可以限定最大点数，2个点绘制后自动结束
// hasMidPoint: false,
style: {
color: "#3d6397",
color: "#93a9cc",
width: 3,
clampToGround: false,
dashArray: [10, 5], // 设置虚线样式，10表示实线长度，5表示空白长度
@ -327,10 +396,9 @@ export default {
// 更新图形样式
updateGraphicStyle() {
console.log("this.selectedGraphic", this.selectedGraphic);
console.log("this.selectedGraphic.id", this.selectedGraphic.id);
if (this.selectedGraphic) {
console.log("this.selectedGraphic", this.selectedGraphic);
console.log("this.selectedGraphic.id", this.selectedGraphic.id);
this.selectedGraphic.style.color = this.itemdata.fillColor;
this.selectedGraphic.style.label.color = this.itemdata.textColor;
this.selectedGraphic.style.label.text = this.itemdata.texttitle; // 修正这里
@ -365,78 +433,84 @@ export default {
// 删除
deleteSelectedGraphic() {
if (this.selectedGraphic) {
this.updateGraphicStyle();
this.graphicLayer.removeGraphic(this.selectedGraphic);
this.selectedGraphic = null;
this.itemdata = {};
}
},
// 保存区域
saveArea() {
this.updateGraphicStyle();
if (this.graphicLayer) {
this.updateGraphicStyle();
const graphics = this.graphicLayer.getGraphics();
const features = graphics
.map(graphic => {
const geometry = graphic.positions; // 获取图形的坐标点
console.log("图形坐标点:", geometry); // 调试信息
const graphics = this.graphicLayer.getGraphics();
const features = graphics
.map(graphic => {
const geometry = graphic.positions; // 获取图形的坐标点
console.log("图形坐标点:", geometry); // 调试信息
// 将笛卡尔坐标转换为经纬度坐标
const positions = geometry.map(point => {
const cartographic = Cesium.Cartographic.fromCartesian(point);
return [
Cesium.Math.toDegrees(cartographic.longitude),
Cesium.Math.toDegrees(cartographic.latitude)
];
});
// 将笛卡尔坐标转换为经纬度坐标
const positions = geometry.map(point => {
const cartographic = Cesium.Cartographic.fromCartesian(point);
return [
Cesium.Math.toDegrees(cartographic.longitude),
Cesium.Math.toDegrees(cartographic.latitude)
];
});
const properties = {
id: graphic.attr.id,
description: graphic.attr.description,
fillColor: graphic.style.color,
textColor: graphic.style.label.color,
texttitle: graphic.style.label.text
};
// 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象
let geoJSONGeometry;
if (graphic.type === "polygonP") {
geoJSONGeometry = {
type: "polygon",
coordinates: [positions]
const properties = {
id: graphic.attr.id,
description: graphic.attr.description,
fillColor: graphic.style.color,
textColor: graphic.style.label.color,
texttitle: graphic.style.label.text
};
} else if (graphic.type === "polygon") {
geoJSONGeometry = {
type: "Polygon",
coordinates: [positions]
// 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象
let geoJSONGeometry;
if (graphic.type === "polygonP") {
geoJSONGeometry = {
type: "polygon",
coordinates: [positions]
};
} else if (graphic.type === "polygon") {
geoJSONGeometry = {
type: "Polygon",
coordinates: [positions]
};
} else if (graphic.type === "polyline") {
geoJSONGeometry = {
type: "LineString",
coordinates: positions
};
} else {
// 其他类型的图形处理
return null;
}
return {
type: "Feature",
geometry: geoJSONGeometry,
properties: properties
};
} else if (graphic.type === "polyline") {
geoJSONGeometry = {
type: "LineString",
coordinates: positions
};
} else {
// 其他类型的图形处理
return null;
}
})
.filter(feature => feature !== null); // 过滤掉无效的图形
return {
type: "Feature",
geometry: geoJSONGeometry,
properties: properties
};
})
.filter(feature => feature !== null); // 过滤掉无效的图形
const geoJSON = {
type: "FeatureCollection",
features: features
};
const geoJSON = {
type: "FeatureCollection",
features: features
};
console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2));
console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2));
this.$parent.cardForm.configValue = JSON.stringify(geoJSON);
// this.onclonemap();
this.$parent.saveCardFncon();
this.$parent.$parent.cardForm.configValue = JSON.stringify(geoJSON);
// this.onclonemap();
this.$parent.$parent.saveCardFncon();
} else {
this.$parent.$parent.MarsBoxSwtich = false;
}
}
},
beforeDestroy() {

274
src/components/mars3d/MarsBoxarea.vue
View File

@ -1,10 +1,11 @@
<template>
<div class="mars3d-com">
<div class="mars3d-com" ref="mars3dContainer" style="width: 100%; height: 100%"></div>
<!-- 绘制区域 -->
<div class="mars3d-box">
<div class="mars-3d-header">
<el-radio v-model="marsheader" label="1">多边形面</el-radio>
<i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i>
<el-radio v-model="marsheader" label="1">多边形区域</el-radio>
<!-- <i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i> -->
</div>
<div class="mars3d-Controls">
@ -27,7 +28,7 @@
<div class="mars3d-item">
<div class="mar3d-title">边框颜色：</div>
<div class="mar3d-con">
<el-color-picker v-model="itemdata.fillColor" size="small"/>
<el-color-picker v-model="itemdata.fillColor" size="small" />
<input v-model="itemdata.fillColor" placeholder="填充色" />
</div>
</div>
@ -35,7 +36,7 @@
<div class="mars3d-item">
<div class="mar3d-title">文字颜色：</div>
<div class="mar3d-con">
<el-color-picker v-model="itemdata.textColor" size="small"/>
<el-color-picker v-model="itemdata.textColor" size="small" />
<input v-model="itemdata.textColor" placeholder="文字颜色" />
</div>
</div>
@ -45,6 +46,34 @@
</div>
</div>
</div>
<!-- 经纬度数据 -->
<div class="mars3d-box" v-if="latlntswtich">
<div class="mars-3d-header">
<el-radio v-model="marsheader" label="1">经纬度数据</el-radio>
<!-- <i @click="onclonemap" class="el-icon-circle-close" style="font-size:'16px'"></i> -->
</div>
<div class="mars3d-Controls">
<div class="mars3d-item" style="margin-top: 50px;">
<div class="mar3d-title">当前经度：</div>
<div class="mar3d-con">
<input v-model="latlntdata.lon" placeholder="经度" disabled />
</div>
</div>
<div class="mars3d-item">
<div class="mar3d-title">当前纬度：</div>
<div class="mar3d-con">
<input v-model="latlntdata.lat" placeholder="纬度" disabled />
</div>
</div>
<div class="mars3d-item">
<el-button size="mini" type="success" @click="onlatlnt">保存经纬度</el-button>
</div>
</div>
</div>
</div>
</template>
@ -75,10 +104,18 @@ export default {
// 唯一值
datatitle: 1,
// 选中自定义图形
marsheader: "1"
marsheader: "1",
// 获取经纬度-开关
latlntswtich: false,
// 经纬度
latlntdata: {
lat: "",
lon: ""
}
};
},
mounted() {
console.log("====================加载地图======================");
this.mars3dContainer = this.$refs.mars3dContainer;
// 初始化Mars3D地图
this.map = new mars3d.Map(this.mars3dContainer, {
@ -111,7 +148,8 @@ export default {
// sceneModePicker: true, // 二三维切换按钮
// navigationHelpButton: true, // 帮助按钮
// fullscreenButton: true, // 全屏按钮
contextmenu: { hasDefault: true } // 右键菜单
contextmenu: { hasDefault: true }, // 右键菜单
locationBar: true
},
// terrain: {
// url: "//data.mars3d.cn/terrain",
@ -130,17 +168,32 @@ export default {
]
});
if (this.$parent.MarsBoxareadata) {
// 获取locationBar控件的DOM元素
// var locationBarElement = document.querySelector(".mars3d-com");
// // 如果元素存在，则调整其位置
// if (locationBarElement) {
// locationBarElement.style.position = "absolute";
// locationBarElement.style.top = "-200px"; // 将位置往上移动200px
// }
// const locationBar = new mars3d.control.LocationBar({
// template:
// "<div>经度:{lng}</div><div>纬度:{lat}</div> <div>海拔：{alt}米</div> <div>层级：{level}</div><div>方向：{heading}度</div> <div>俯仰角：{pitch}度</div><div>视高：{cameraHeight}米</div><div>帧率：{fps} FPS</div>",
// });
// this.map.addControl(locationBar);
if (this.$parent.$parent.MarsBoxareadata) {
console.log("this.$parent.MarsBoxareadata", this.$parent.MarsBoxareadata);
console.log(
"this.$parent.MarsBoxareadata",
JSON.parse(this.$parent.MarsBoxareadata, null, 2)
JSON.parse(this.$parent.$parent.MarsBoxareadata, null, 2)
);
this.graphicLayer = new mars3d.layer.GraphicLayer();
this.map.addLayer(this.graphicLayer);
let a = JSON.parse(this.$parent.MarsBoxareadata, null, 2);
let a = JSON.parse(this.$parent.$parent.MarsBoxareadata, null, 2);
console.log("a.geojsonData.features.length > 1", a.features.length > 0);
if (a.features.length > 0) {
@ -159,11 +212,46 @@ export default {
// this.bindLayerPopup();
this.bindGraphicClick();
// 绑定地图点击事件
this.map.on(mars3d.EventType.click, this.handleMapClick);
},
methods: {
// 保存经纬度
onlatlnt() {
this.$parent.$parent.onsetlatlnt({
lon: this.latlntdata.lon,
lat: this.latlntdata.lat
});
},
// 处理地图点击事件
handleMapClick(event) {
const position = event.position; // 获取点击位置的屏幕坐标 (x, y)
const cartesian = this.map.scene.globe.pick(
this.map.camera.getPickRay(position),
this.map.scene
); // 获取点击位置的笛卡尔坐标
if (cartesian) {
const cartographic = mars3d.Cesium.Cartographic.fromCartesian(
cartesian
); // 转换为地理坐标
const longitude = mars3d.Cesium.Math.toDegrees(cartographic.longitude); // 转换为经度
const latitude = mars3d.Cesium.Math.toDegrees(cartographic.latitude); // 转换为纬度
const altitude = cartographic.height; // 获取海拔高度
console.log(`经度: ${longitude}, 纬度: ${latitude}, 海拔: ${altitude}`);
this.latlntdata.lat = latitude;
this.latlntdata.lon = longitude;
// 这里可以根据需要将经纬度信息显示在界面上
// 例如：this.showCoordinates(longitude, latitude, altitude);
}
},
// 通知父组件关闭
onclonemap() {
this.$parent.onclose();
this.$parent.$parent.onclose();
},
addDemoGraphic14(item) {
@ -201,7 +289,7 @@ export default {
// maxPointNum: 2, //可以限定最大点数，2个点绘制后自动结束
// hasMidPoint: false,
style: {
color: "#3d6397",
color: "#93a9cc",
width: 3,
clampToGround: false,
materialType: mars3d.MaterialType.PolylineDash, // 设置材质类型为虚线
@ -268,10 +356,10 @@ export default {
// 更新图形样式
updateGraphicStyle() {
console.log("this.selectedGraphic", this.selectedGraphic);
console.log("this.selectedGraphic.id", this.selectedGraphic.id);
if (this.selectedGraphic) {
console.log("this.selectedGraphic", this.selectedGraphic);
console.log("this.selectedGraphic.id", this.selectedGraphic.id);
this.selectedGraphic.style.color = this.itemdata.fillColor;
this.selectedGraphic.style.label.color = this.itemdata.textColor;
this.selectedGraphic.style.label.text = this.itemdata.texttitle; // 修正这里
@ -306,94 +394,108 @@ export default {
// 删除
deleteSelectedGraphic() {
if (this.selectedGraphic) {
this.updateGraphicStyle();
this.graphicLayer.removeGraphic(this.selectedGraphic);
this.selectedGraphic = null;
this.itemdata = {};
}
},
// 保存区域
saveArea() {
this.updateGraphicStyle();
if (this.graphicLayer) {
this.updateGraphicStyle();
const graphics = this.graphicLayer.getGraphics();
const features = graphics
.map(graphic => {
const geometry = graphic.positions; // 获取图形的坐标点
console.log("图形坐标点:", geometry); // 调试信息
const graphics = this.graphicLayer.getGraphics();
const features = graphics
.map(graphic => {
const geometry = graphic.positions; // 获取图形的坐标点
console.log("图形坐标点:", geometry); // 调试信息
// 将笛卡尔坐标转换为经纬度坐标
const positions = geometry.map(point => {
const cartographic = Cesium.Cartographic.fromCartesian(point);
return [
Cesium.Math.toDegrees(cartographic.longitude),
Cesium.Math.toDegrees(cartographic.latitude)
];
});
// 将笛卡尔坐标转换为经纬度坐标
const positions = geometry.map(point => {
const cartographic = Cesium.Cartographic.fromCartesian(point);
return [
Cesium.Math.toDegrees(cartographic.longitude),
Cesium.Math.toDegrees(cartographic.latitude)
];
});
const properties = {
id: graphic.attr.id,
description: graphic.attr.description,
fillColor: graphic.style.color,
textColor: graphic.style.label.color,
texttitle: graphic.style.label.text
};
// 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象
let geoJSONGeometry;
console.log("graphic.type", graphic.type);
if (graphic.type === "polygonP") {
geoJSONGeometry = {
type: "polygon",
coordinates: [positions]
const properties = {
id: graphic.attr.id,
description: graphic.attr.description,
fillColor: graphic.style.color,
textColor: graphic.style.label.color,
texttitle: graphic.style.label.text
};
} else if (graphic.type === "polygon") {
geoJSONGeometry = {
type: "Polygon",
coordinates: [positions]
// 根据图形的类型（如多边形、线等）创建相应的GeoJSON几何对象
let geoJSONGeometry;
console.log("graphic.type", graphic.type);
if (graphic.type === "polygonP") {
geoJSONGeometry = {
type: "polygon",
coordinates: [positions]
};
} else if (graphic.type === "polygon") {
geoJSONGeometry = {
type: "Polygon",
coordinates: [positions]
};
} else if (graphic.type === "polyline") {
geoJSONGeometry = {
type: "LineString",
coordinates: positions
};
} else {
// 其他类型的图形处理
return null;
}
return {
type: "Feature",
geometry: geoJSONGeometry,
properties: properties
};
} else if (graphic.type === "polyline") {
geoJSONGeometry = {
type: "LineString",
coordinates: positions
};
} else {
// 其他类型的图形处理
return null;
}
})
.filter(feature => feature !== null); // 过滤掉无效的图形
return {
type: "Feature",
geometry: geoJSONGeometry,
properties: properties
};
})
.filter(feature => feature !== null); // 过滤掉无效的图形
const geoJSON = {
type: "FeatureCollection",
features: features
};
const geoJSON = {
type: "FeatureCollection",
features: features
};
console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2));
console.log("导出的GeoJSON数据", JSON.stringify(geoJSON, null, 2));
const a = geoJSON.features;
const formattedCoordinates = a
.map(feature => {
return feature.geometry.coordinates
.map(coord => {
return `${coord[0]}|${coord[1]}`;
})
.join(", ");
})
.join(", ");
const a = geoJSON.features;
const formattedCoordinates = a
.map(feature => {
return feature.geometry.coordinates
.map(coord => {
return `${coord[0]}|${coord[1]}`;
})
.join(", ");
})
.join(", ");
console.log(formattedCoordinates);
this.itemdata = {
// 填充色
fillColor: "",
// 文字颜色
textColor: "",
// 填充文字
texttitle: ""
};
console.log(formattedCoordinates);
this.$parent.MarsBoxareadata = JSON.stringify(geoJSON);
this.$parent.fenceShapedata = formattedCoordinates;
// this.$parent.submit("form");
this.$parent.MarsBoxSwtich = false;
this.$parent.$parent.MarsBoxareadata = JSON.stringify(geoJSON);
this.$parent.$parent.fenceShapedata = formattedCoordinates;
// this.$parent.submit("form");
this.$parent.$parent.MarsBoxSwtich = false;
} else {
this.$parent.$parent.MarsBoxSwtich = false;
}
}
},
beforeDestroy() {

15
src/router/index.js
View File

@ -629,6 +629,14 @@ const routes2 = [{
"@/views/projectFront/constructionManage/projectareaadmin.vue"
),
},
// {
// path: "/project/constructionManage/projectareaadminer",
// name: "项目基础信息管理_项目区域管理_绘制",
// component: () =>
// import (
// "@/views/projectFront/constructionManage/projectareaadminer.vue"
// ),
// },
// 施工管理
//施工管理--装置管理
{
@ -1414,6 +1422,13 @@ const routes2 = [{
require(["@/views/projectFront/quality/business.vue"], resolve),
},
{
path: "/project/quality/businesser", //区域管理-绘制
name: "质量管理_业务中心1",
component: (resolve) =>
require(["@/views/projectFront/quality/businesser.vue"], resolve),
},
{
path: "/project/safeSame/business", //安全管理 -- 业务中心
name: "安全管理_业务中心1",

2
src/views/projectFront/constructionManage/projectareaadmin.vue
View File

@ -384,4 +384,4 @@ export default {
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</style>

395
src/views/projectFront/constructionManage/projectareaadminer.vue Normal file
View File

@ -0,0 +1,395 @@
<template>
<div class="fullHeight">
<div class="searchBox whiteBlock">
<el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
<el-form-item>
<!-- v-permission="{key: 'renovate', menuPath: '/project/constructionManage/deviceManage'}" -->
<!-- <el-button
type="primary"
plain
@click="loadCardData"
>{{ $t("message.personnelPosition.beaconManage.query") }}</el-button>-->
<el-button
type="warning"
plain
@click="resetForm"
>{{ $t("message.personnelPosition.beaconManage.refresh") }}</el-button>
<el-button type="primary" @click="isAddPoint(1)">新增</el-button>
</el-form-item>
</el-form>
</div>
<div class="table_wrap whiteBlock">
<el-table class="tables" :data="projectGroupList">
<el-table-column
type="index"
width="50"
align="center"
:label="$t('message.personnelPosition.beaconManage.table.index')"
></el-table-column>
<el-table-column prop="name" label="区域名称" align="center"></el-table-column>
<el-table-column
:label="$t('message.personnelPosition.beaconManage.table.operation')"
align="center"
width="400"
>
<template slot-scope="scope">
<div class="tableBtns">
<div @click="onMarsBoxSwtich(scope.row)" class="operationText">
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
<span>编辑区域</span>
</div>
<div @click="isAddPoint(2, scope.row)" class="operationText">
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
<span>
{{
$t("message.personnelPosition.beaconManage.table.edit")
}}
</span>
</div>
<div @click="removePoint(scope.row)" class="operationText">
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
<span>
{{
$t("message.personnelPosition.beaconManage.table.delete")
}}
</span>
</div>
</div>
</template>
</el-table-column>
<!-- <div slot="empty">{{$t('message.personnelPosition.empty')}}</div> -->
</el-table>
<el-pagination
class="pagerBox"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-sizes="$store.state.PAGESIZRS"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="Number(total)"
background
></el-pagination>
</div>
<!-- 添加卡片弹框 -->
<el-dialog
:modal-append-to-body="false"
:title="cardDialogTitle"
:visible.sync="cardDialog"
width="667px"
@close="close"
>
<div class="dialog_content">
<el-form
size="medium"
:model="cardForm"
ref="cardForm"
:rules="cardFormRules"
label-width="125px"
class="dialogFormBox"
>
<el-form-item label="区域名称" prop="name">
<el-input v-model="cardForm.name" placeholder="请输入"></el-input>
</el-form-item>
<div class="dialog-footer">
<el-button
class="cancleBtn"
@click="cardDialog = false"
icon="el-icon-circle-close"
size="medium"
>{{ $t("message.personnelPosition.cancel") }}</el-button>
<el-button type="primary" icon="el-icon-circle-check" @click="saveCardFn" size="medium">
{{
$t("message.personnelPosition.determine") }}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
<!-- 区域 -->
<!-- <div class="dialog-map" v-if="MarsBoxSwtich">
<MarsBox ref="MarsBox" />
</div> -->
<el-dialog title="绘制区域" :visible.sync="MarsBoxSwtich" :fullscreen="true">
<div v-if="MarsBoxSwtich">
<MarsBox ref="MarsBox" />
</div>
</el-dialog>
</div>
</template>
<script>
// 全局组件
import MarsBox from "@/components/mars3d/MarsBox.vue";
import {
projectereadatapage,
projectereadatadelete,
projectereadatagetId,
projectereadataadd,
projectereadataedit
} from "@/assets/js/api/project";
export default {
data() {
return {
searchForm: {
projectGroupName: ""
},
projectGroupList: [],
total: 0,
pageNo: 1,
pageSize: 10,
cardDialogTitle: "",
cardDialog: false,
cardFormRules: {
name: [
{
required: true,
message: this.$t("message.personnelPosition.required"),
trigger: "blur"
}
]
},
isAdd: -1,
enterpriseTypeList: [],
cooperatorList: [],
// 项目组
cardForm: {
name: "",
// 配置
configValue: "",
projectSn: this.$store.state.projectSn,
// 区域数据
configValue: ""
},
// 项目开关
MarsBoxSwtich: false
};
},
components: {
MarsBox
},
mounted() {
// this.loadAllPerson();
this.loadCardData();
},
methods: {
// 打开表当
onMarsBoxSwtich(item) {
console.log("编辑", item);
// console.log("编辑", item);
// this.cardForm.name = item.name;
// this.cardForm.id = item.id;
this.cardForm = item;
console.log("区域数据", this.cardForm);
this.MarsBoxSwtich = true;
},
// 关闭表单
onMarsBoxMap() {
this.MarsBoxSwtich = false;
// this.close ()
this.cardForm = {};
},
// 校验施工单位
clearValidateUnit(index, unitName) {
if (
this.cardForm.projectGroupUnitList[index].constructionUnitIds.length ==
0
)
return;
this.$refs.cardForm.clearValidate(
`projectGroupUnitList[${index}].${unitName}`
);
},
isAddPoint(type, item) {
this.isAdd = type;
console.log("type", type);
console.log("item", item);
if (type == 1) {
this.cardDialog = true;
this.cardDialogTitle = "新增";
} else {
this.cardDialogTitle = this.$t("message.laborDev.btn_edit"); //编辑卡片
// this.cardForm = JSON.parse(JSON.stringify(item));
projectereadatagetId({
id: item.id,
projectSn: this.$store.state.projectSn
}).then(res => {
console.log("单条", res);
if (res.code == 200) {
this.cardForm = res.result;
}
});
this.cardDialog = true;
}
},
removePoint(item) {
this.$confirm(
this.$t("message.personnelPosition.beaconManage.table.confirmText") +
"【" +
item.name +
"】?",
this.$t("message.personnelPosition.beaconManage.table.Tips"),
{
type: "warning"
}
).then(() => {
projectereadatadelete({ id: item.id }).then(res => {
this.loadCardData();
this.$message.success(
this.$t("message.personnelPosition.delete_success")
); //删除成功!
});
});
},
// 子组件保存
saveCardFncon() {
console.log("this.cardForm", this.cardForm);
projectereadataedit({
...this.cardForm,
projectSn: this.$store.state.projectSn
}).then(res => {
this.cardDialog = false;
this.$message.success(
this.$t("message.personnelPosition.edit_success"),
this.onMarsBoxMap(),
this.loadCardData()
); //编辑成功！
});
},
//添加或编辑卡片
saveCardFn() {
this.$refs["cardForm"].validate(valid => {
if (valid) {
if (!this.cardForm.id) {
projectereadataadd({
...this.cardForm,
projectSn: this.$store.state.projectSn
}).then(res => {
this.cardDialog = false;
this.$message.success(
this.$t("message.personnelPosition.add_success"),
this.loadCardData()
); //添加成功！
});
} else {
console.log("编辑", this.cardForm);
projectereadataedit({
...this.cardForm,
projectSn: this.$store.state.projectSn
}).then(res => {
this.cardDialog = false;
this.$message.success(
this.$t("message.personnelPosition.edit_success"),
this.loadCardData()
); //编辑成功！
});
}
}
});
},
resetForm() {
this.$refs["searchForm"].resetFields();
this.loadCardData();
},
//查看条数
handleSizeChange(val) {
this.pageSize = val;
this.loadCardData();
},
//查看页
handleCurrentChange(val) {
this.pageNo = val;
this.loadCardData();
},
close() {
this.$nextTick(() => {
console.log("执行关闭");
this.$refs.cardForm.clearValidate();
this.cardForm = {};
});
},
//获取监理单位
loadAllPerson() {
// getEnterpriseTypeList
getCooperatorListApi({
projectSn: this.$store.state.projectSn,
pageNo: 1,
pageSize: -1,
enterpriseTypeId: 7
}).then(res => {
this.enterpriseTypeList = res.result.records;
});
},
//获取列表数据
loadCardData() {
let data = {
projectSn: this.$store.state.projectSn,
pageNo: this.pageNo,
pageSize: this.pageSize
// enterpriseTypeId: this.enterpriseTypeSelectId,
};
projectereadatapage(data).then(res => {
if (res.code == 200) {
this.projectGroupList = res.result.records;
this.total = Number(res.result.total);
}
});
}
}
};
</script>
<style lang="less" scoped>
.projectTeam:not(:first-child) {
margin-top: 20px;
}
.projectTeam {
width: 475px;
background-color: #f4f4f5;
padding: 20px 0 1px;
position: relative;
.el-icon-circle-close {
font-size: 20px;
position: absolute;
top: 4px;
right: 4px;
color: #f56c6c;
cursor: pointer;
}
}
.dialog-add {
display: flex;
justify-content: center;
margin-top: 20px;
/deep/ .el-button {
background-color: transparent;
color: #b3b3b3;
border-color: #b3b3b3;
border-style: dashed;
}
}
.dialog-map {
width: 1536px;
height: 769px;
border-radius: 10px;
overflow: hidden;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>

1085
src/views/projectFront/quality/businessModule/checkPoint.vue
View File

File diff suppressed because it is too large Load Diff

1262
src/views/projectFront/quality/businessModule/checkPointer.vue Normal file
View File

File diff suppressed because it is too large Load Diff

50
src/views/projectFront/quality/businesser.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<!-- 业务中心 -->
<div class="business whiteBlock">
<el-menu
:default-active="activeIndex"
class="business-menu-demo"
mode="horizontal"
text-color="#262D47"
active-text-color="#5181F6"
>
<el-menu-item index="1">{{$t('message.quality.checkPoint')}}</el-menu-item>
</el-menu>
<check v-if="activeIndex == '1'" style="width:100%;height:calc(100% - 49px)"></check>
</div>
</template>
<script>
import check from "./businessModule/checkPointer.vue";
export default {
name: "business",
components: {
check,
},
data() {
return {
activeIndex:'1',
};
},
};
</script>
<style lang="less" scoped>
.business {
width: 100%;
height: 100%;
}
.business-menu-demo {
height: 48px;
width: 100%;
line-height: 48px;
background-color: transparent;
.el-menu-item {
height: 48px;
line-height: 48px;
}
}
.el-menu.el-menu--horizontal{
border-bottom-color: @borderColor;
}
</style>