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

fix: BUG修改

Browse Source
This commit is contained in:
kun 2024-02-22 18:02:05 +08:00
parent 93a45e19ca
commit a69844daa1
5 changed files with 767 additions and 577 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/js/api/highModulus.js
View File

@ -36,6 +36,7 @@ export const getHighFormworkAlarmDataApi = data => get('/xmgl/highFormworkAlarm
// 添加混凝土监测-平面图配置信息
export const addHighFormworkPlaneFigureApi2 = data => post('xmgl/concreteMonitorPlaneFigure/add', data);
export const editHighFormworkPlaneFigureApi2 = data => post('xmgl/concreteMonitorPlaneFigure/edit', data);
export const deleteHighFormworkPlaneFigureApi2 = data => post('xmgl/concreteMonitorPlaneFigure/delete', data);
export const selectHighFormworkPlaneFigureListApi2 = data => post('xmgl/concreteMonitorPlaneFigure/selectList', data);
export const selectPointPositionList = data => get('xmgl/concreteMonitorDevPointPosition/list', data); // 查设备下的点位

1
src/assets/js/http.js
View File

@ -67,7 +67,6 @@ if (process.env.NODE_ENV == 'development') {
// axios.defaults.baseURL = 'http://183.234.150.152:9090/' //华发 huaxin 123456789
// axios.defaults.baseURL = 'http://182.90.224.147:18170' //瑞士恒通线上
// axios.defaults.baseURL = 'http://58.250.210.9:9090/' //深汕线上
// axios.defaults.baseURL = 'http://101.43.164.214:11111/' //百色线上
// axios.defaults.baseURL = 'http://101.43.164.214:12345/'//内蒙古线上
// axios.defaults.baseURL = 'http://121.196.214.246/api/'//金林湾线上新
// axios.defaults.baseURL = 'http://42.194.144.62:8088/'//中建四局线上（新）地址

588
src/views/projectFront/concreteMonitoring/planConfig.vue
View File

@ -6,17 +6,36 @@
<i class="el-icon-circle-plus-outline"></i>
<div>
<!-- 添加布置图 -->
{{$t('message.highModulus.addImg')}}
{{ $t("message.highModulus.addImg") }}
</div>
</div>
<ul>
<li v-for="(item,index) in deepImgList" :key="index" :class="{'img-active': activeImgIndex == index}">
<li
v-for="(item, index) in deepImgList"
:key="index"
:class="{ 'img-active': activeImgIndex == index }"
>
<img :src="item.imageUrl" @click="checkImg(item, index)" />
<div class="actions-box">
<span>{{ item.planeFigureName }}</span>
<el-button type="text" icon="el-icon-delete" style="color: #F56C6C" @click="deleteDeepImg(item)">
<!-- 编辑 -->
<el-button
type="text"
style="color: #84b2fa"
icon="el-icon-edit"
@click="editDeepimg(item)"
>
<!-- 删除 -->
{{$t('message.highModulus.remove')}}
{{ $t("message.highModulus.edit") }}
</el-button>
<el-button
type="text"
icon="el-icon-delete"
style="color: #F56C6C"
@click="deleteDeepImg(item)"
>
<!-- 删除 -->
{{ $t("message.highModulus.remove") }}
</el-button>
</div>
</li>
@ -28,43 +47,93 @@
<div v-show="!isEditPoint" class="btn-item" @click="editPoint">
<img src="@/assets/images/deepFoundationPitManage/address.png" />
<!-- 布点 -->
{{$t('message.highModulus.movePoint')}}
{{ $t("message.highModulus.movePoint") }}
</div>
<div v-show="isEditPoint" class="btn-item" @click="savePoint">
<img src="@/assets/images/deepFoundationPitManage/save.png" />
<!-- 保存 -->
{{$t('message.highModulus.save')}}
{{ $t("message.highModulus.save") }}
</div>
<div class="btn-item" @click="changeImgSize(1)">
<i class="el-icon-zoom-in"></i>
<!-- 放大 -->
{{$t('message.highModulus.zoomIn')}}
{{ $t("message.highModulus.zoomIn") }}
</div>
<div class="btn-item" @click="changeImgSize(2)">
<i class="el-icon-zoom-out"></i>
<!-- 缩小 -->
{{$t('message.highModulus.zoomOut')}}
{{ $t("message.highModulus.zoomOut") }}
</div>
</div>
<div style="height: 100%" ref="mapbox">
<vue-scroll style="height:calc(100% - 30px);">
<div class="img-box" @mousewheel.prevent="rollImg" :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}">
<img ref="map" v-if="activeImgUrl" style="border: 1px solid #eee;" :style="{'width': imgWidth + 'px', height: imgHeight + 'px'}" :src="activeImgUrl"/>
<div
class="img-box"
@mousewheel.prevent="rollImg"
:style="{
width: imgWidth + 'px',
height: imgHeight + 'px',
transform: 'scale(' + imgZoom + ')',
}"
>
<img
ref="map"
v-if="activeImgUrl"
style="border: 1px solid #eee;"
:style="{ width: imgWidth + 'px', height: imgHeight + 'px' }"
:src="activeImgUrl"
/>
<ul class="point-list" v-if="activeImgUrl">
<li v-for="(item,index) in pointList" :key="index" :ref="'point'+index" :style="{'top': item.mapY + 'px', 'left': item.mapX + 'px', 'display': item.status, 'transform': 'scale(' + 1/imgZoom +')'+ ' ' + item.transform}" >
<div class="point-dialog" :class="{'right_detail': item.mapY < 251 || item.mapX < 107}" :style="{'display': item.showDetail ? 'block':'none'}">
<li
v-for="(item, index) in pointList"
:key="index"
:ref="'point' + index"
:style="{
top: item.mapY + 'px',
left: item.mapX + 'px',
display: item.status,
transform:
'scale(' + 1 / imgZoom + ')' + ' ' + item.transform,
}"
>
<div
class="point-dialog"
:class="{ right_detail: item.mapY < 251 || item.mapX < 107 }"
:style="{ display: item.showDetail ? 'block' : 'none' }"
>
<i class="el-icon-error" @click="item.showDetail = false"></i>
<div class="point-title">{{ item.pointName }}</div>
</div>
<div class="point-dialog point-title2" :class="{'right_title': item.mapY < 47 || item.mapX < 22}" :style="{'display': item.showDetail ? 'none':'block'}" @click="item.showDetail = true">
<div
class="point-dialog point-title2"
:class="{ right_title: item.mapY < 47 || item.mapX < 22 }"
:style="{ display: item.showDetail ? 'none' : 'block' }"
@click="item.showDetail = true"
>
<span>{{ item.pointName }}</span>
</div>
<img @mousedown.prevent="move(index,$event)" @mouseup="up(index,$event)" style="width: 19px; height:29px; z-index: -1" src="@/assets/images/deepFoundationPitManage/point-icon.png"/>
<img
@mousedown.prevent="move(index, $event)"
@mouseup="up(index, $event)"
style="width: 19px; height:29px; z-index: -1"
src="@/assets/images/deepFoundationPitManage/point-icon.png"
/>
</li>
</ul>
</div>
<div class="pointFixed" ref="pointFixed" :style="{'top': pointTop + 'px','left': pointLeft + 'px','display': pointStatus}">
<img style="width: 19px; height:29px;" src="@/assets/images/deepFoundationPitManage/point-icon.png"/>
<div
class="pointFixed"
ref="pointFixed"
:style="{
top: pointTop + 'px',
left: pointLeft + 'px',
display: pointStatus,
}"
>
<img
style="width: 19px; height:29px;"
src="@/assets/images/deepFoundationPitManage/point-icon.png"
/>
</div>
</vue-scroll>
</div>
@ -72,44 +141,67 @@
<!-- 添加平面图 -->
<el-dialog
width="35%"
title="添加布置图"
:title="title"
class="dialog-center"
:visible.sync="showAddImg"
@close="closeAddImg"
:append-to-body="true"
:modal-append-to-body="false">
:modal-append-to-body="false"
>
<div class="dialog-content" style="height: 368px">
<el-form size="medium"
<el-form
size="medium"
class="formBox"
style="margin-bottom: 68px"
:model="testPointImgForm"
ref="testPointImgForm"
label-width="120px"
:rules="$t('message.highModulus.rules3')">
:rules="$t('message.highModulus.rules3')"
>
<!-- 平面图名称 -->
<el-form-item label="布置图名称" prop="planeFigureName">
<el-input v-model="testPointImgForm.planeFigureName" :placeholder="$t('message.highModulus.placeholderText')"></el-input>
<el-input
v-model="testPointImgForm.planeFigureName"
:placeholder="$t('message.highModulus.placeholderText')"
></el-input>
</el-form-item>
<!-- 测点 -->
<el-form-item :label="$t('message.highModulus.point')" prop="pointIds">
<el-select style="width: 100%;" v-model="testPointImgForm.pointIds" multiple :placeholder="$t('message.highModulus.placeholderText2')">
<el-form-item
:label="$t('message.highModulus.point')"
prop="pointIds"
>
<el-select
style="width: 100%;"
v-model="testPointImgForm.pointIds"
multiple
:placeholder="$t('message.highModulus.placeholderText2')"
>
<el-option
v-for="item in testPointOptions"
:key="item.id"
:label="item.pointName"
:value="item.id">
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<!-- 示意图 -->
<el-form-item :label="$t('message.highModulus.img')" prop="fileList">
<div class="img_box" v-for="(item,index) in testPointImgForm.fileList" :key="index">
<div
class="img_box"
v-for="(item, index) in testPointImgForm.fileList"
:key="index"
>
<el-image
:src="item.url"
:preview-src-list="[item.url]"
style="width: 148px;height:148px;margin-right: 20px">
style="width: 148px;height:148px;margin-right: 20px"
>
</el-image>
<i class="el-icon-error" @click="testPointImgForm.fileList.splice(index,1)"></i>
<i
class="el-icon-error"
@click="testPointImgForm.fileList.splice(index, 1)"
></i>
</div>
<el-upload
:action="$store.state.UPLOADURL"
@ -119,16 +211,24 @@
:show-file-list="false"
:on-remove="(file, fileList) => handleRemove(file, fileList)"
:on-success="(res, file) => handleSuccess(res, file)"
:file-list="testPointImgForm.fileList">
:file-list="testPointImgForm.fileList"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
<div class="btn-box">
<!-- 确认 -->
<el-button type="primary" icon="el-icon-circle-check" @click="submitImgConfig">{{$t('message.highModulus.confirm')}}</el-button>
<el-button
type="primary"
icon="el-icon-circle-check"
@click="submitImgConfig"
>{{ $t("message.highModulus.confirm") }}</el-button
>
<!-- 取消 -->
<el-button icon="el-icon-circle-close" @click="closeAddImg">{{$t('message.highModulus.cancel')}}</el-button>
<el-button icon="el-icon-circle-close" @click="closeAddImg">{{
$t("message.highModulus.cancel")
}}</el-button>
</div>
</div>
</el-dialog>
@ -138,32 +238,43 @@
:title="$t('message.highModulus.hint')"
class="dialog-center"
:visible.sync="deleteInfo"
:modal-append-to-body="false">
:modal-append-to-body="false"
>
<p style="font-size: 18px;display: flex;align-items:center">
<i class="el-icon-warning" style="color: #E6A23C;font-size: 28px;margin-right: 10px"></i>
<i
class="el-icon-warning"
style="color: #E6A23C;font-size: 28px;margin-right: 10px"
></i>
<!-- 此操作将永久删除该文件, 是否继续? -->
{{$t('message.highModulus.hintText')}}
{{ $t("message.highModulus.hintText") }}
</p>
<span slot="footer" class="dialog-footer">
<!-- 取 消 -->
<el-button @click="closeMsg(1)">{{$t('message.highModulus.cancel')}}</el-button>
<el-button @click="closeMsg(1)">{{
$t("message.highModulus.cancel")
}}</el-button>
<!-- 确认 -->
<el-button type="primary" @click="checkMsg">{{$t('message.highModulus.confirm')}}</el-button>
<el-button type="primary" @click="checkMsg">{{
$t("message.highModulus.confirm")
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { selectPointPositionList,
import {
selectPointPositionList,
addHighFormworkPlaneFigureApi2,
editHighFormworkPlaneFigureApi2,
deleteHighFormworkPlaneFigureApi2,
selectHighFormworkPlaneFigureListApi2,
selecthighFormworkPlaneFigureCoordinateListApi2,
updateFigureCoordinateApi2 } from '@/assets/js/api/highModulus.js'
updateFigureCoordinateApi2,
} from "@/assets/js/api/highModulus.js";
export default {
props: {
pointConfig: String
pointConfig: String,
},
data() {
return {
@ -180,43 +291,59 @@ export default {
pointTop: 0,
pointLeft: 0,
imgZoom: 1,
pointStatus: 'none',
pointStatus: "none",
showAddImg: false,
testPointImgForm: {
planeFigureName: '',
planeFigureName: "",
pointIds: [],
fileList:[]
fileList: [],
},
rules3: {
planeFigureName: [
{ required: true, message: '请输入平面图名称', trigger: 'blur' }
{ required: true, message: "请输入平面图名称", trigger: "blur" },
],
pointIds: [
{ type: 'array', required: true, message: '请至少选择一个测点', trigger: 'change' }
{
type: "array",
required: true,
message: "请至少选择一个测点",
trigger: "change",
},
],
fileList: [
{ type: 'array', required: true, message: '请上传示意图', trigger: 'blur' },
{ type: 'array', required: true, message: '请上传示意图', trigger: 'change' }
]
{
type: "array",
required: true,
message: "请上传示意图",
trigger: "blur",
},
{
type: "array",
required: true,
message: "请上传示意图",
trigger: "change",
},
],
},
testPointOptions: [],
}
title: "添加布置图",
};
},
mounted() {
console.log(this.pointConfig,"点位配置****")
this.selectPointList()
this.selectHighFormworkPlaneFigureList()
console.log(this.pointConfig, "点位配置****");
this.selectPointList();
this.selectHighFormworkPlaneFigureList();
},
methods: {
selecthighFormworkPlaneFigureCoordinateList(val) {
selecthighFormworkPlaneFigureCoordinateListApi2({concreteMonitorPlaneFigureId: val}).then(res=>{
console.log(res)
selecthighFormworkPlaneFigureCoordinateListApi2({
concreteMonitorPlaneFigureId: val,
}).then((res) => {
console.log(res);
if (res.code == 200) {
res.result.forEach(item=>{
item.status = 'block'
item.transform = '',
item.showDetail = false
res.result.forEach((item) => {
item.status = "block";
(item.transform = ""), (item.showDetail = false);
// let arr = []
// let obj = JSON.parse(item.dataField)
// for(let key in obj){
@ -226,65 +353,65 @@ export default {
// })
// }
// item.detailList = arr
})
this.pointList = res.result
});
this.pointList = res.result;
}
})
});
},
selectHighFormworkPlaneFigureList() {
selectHighFormworkPlaneFigureListApi2({projectSn: this.$store.state.projectSn, devSn: this.pointConfig}).then(res=>{
console.log(res)
selectHighFormworkPlaneFigureListApi2({
projectSn: this.$store.state.projectSn,
devSn: this.pointConfig,
}).then((res) => {
console.log(res);
if (res.code) {
this.deepImgList = res.result
this.deepImgList = res.result;
if (res.result.length > 0) {
this.checkImg(res.result[0],0)
this.checkImg(res.result[0], 0);
}
}
})
});
},
selectPointList() {
selectPointPositionList({projectSn: this.$store.state.projectSn, devSn: this.pointConfig}).then(res=>{
console.log(res)
selectPointPositionList({
projectSn: this.$store.state.projectSn,
devSn: this.pointConfig,
}).then((res) => {
console.log(res);
if (res.code == 200) {
this.testPointOptions = res.result
this.testPointOptions = res.result;
}
})
});
},
checkMsg() {
this.deleteInfo = false
this.deleteInfo = false;
},
closeMsg() {
this.deleteInfo = false
this.deleteInfo = false;
},
closeAddImg() {
this.showAddImg = false
this.showAddImg = false;
this.testPointImgForm = {
planeFigureName: "",
fileList: [],
pointIds: []
}
this.$refs['testPointImgForm'].resetFields()
pointIds: [],
};
this.$refs["testPointImgForm"].resetFields();
},
// 添加编辑保存
submitImgConfig() {
this.$refs['testPointImgForm'].validate((valid) => {
this.$refs["testPointImgForm"].validate((valid) => {
if (valid) {
let data = {
planeFigureName: this.testPointImgForm.planeFigureName,
concreteMonitorDevPointPositionIds: this.testPointImgForm.pointIds.join(','),
concreteMonitorDevPointPositionIds: this.testPointImgForm.pointIds.join(
","
),
imageUrl: this.testPointImgForm.fileList[0].url,
projectSn: this.$store.state.projectSn,
devSn: this.pointConfig
}
devSn: this.pointConfig,
};
// console.log(data)
addHighFormworkPlaneFigureApi2(data).then(res=>{
// console.log(res)
if(res.code == 200){
// '添加成功！'
this.$message.success(this.$t('message.highModulus.addSuccessMsg'))
this.selectHighFormworkPlaneFigureList()
this.showAddImg = false
}
})
// addDeepExcavationPlaneFigureApi(data).then(res=>{
// console.log(res)
// if(res.code == 200){
@ -293,39 +420,77 @@ export default {
// this.showAddImg = false
// }
// })
if (this.title == "添加布置图") {
addHighFormworkPlaneFigureApi2(data).then((res) => {
// console.log(res)
if (res.code == 200) {
// '添加成功！'
this.$message.success(
this.$t("message.highModulus.addSuccessMsg")
);
this.selectHighFormworkPlaneFigureList();
this.showAddImg = false;
}
})
});
} else {
(data.id = this.id),
editHighFormworkPlaneFigureApi2(data).then((res) => {
// console.log(res)
if (res.code == 200) {
this.$message.success(
this.$t("message.highModulus.editSuccessMsg")
);
this.showAddImg = false;
this.testPointImgForm.pointIds = [];
this.selectHighFormworkPlaneFigureList();
}
});
}
}
});
},
handleRemove(file, fileList, type) {
this.testPointImgForm.fileList = fileList
this.testPointImgForm.fileList = fileList;
},
handleSuccess(res, file) {
this.testPointImgForm.fileList = [{
this.testPointImgForm.fileList = [
{
name: file.name,
url:this.$store.state.FILEURL + file.response.data[0].imageUrl
}]
this.$refs['testPointImgForm'].clearValidate()
url: this.$store.state.FILEURL + file.response.data[0].imageUrl,
},
];
this.$refs["testPointImgForm"].clearValidate();
},
openAddImgDialog() {
this.showAddImg = true
this.title = "添加布置图";
this.showAddImg = true;
// this.selectDeepExcavationAllMeasurePointList()
},
// 编辑布置图
editDeepimg(val) {
console.log("编辑", val);
this.title = "编辑布置图";
this.id = val.id;
this.testPointImgForm.planeFigureName = val.planeFigureName;
this.testPointImgForm.pointIds = val.concreteMonitorDevPointPositionIds.split(",");
this.testPointImgForm.fileList = [{ url: val.imageUrl }];
this.showAddImg = true;
},
checkImg(val, index) {
// console.log('移动',val)
this.imgZoom = 1
this.activeImgIndex = index
this.activeImgUrl = val.imageUrl
this.isEditPoint = false
this.selecthighFormworkPlaneFigureCoordinateList(val.id)
this.imgZoom = 1;
this.activeImgIndex = index;
this.activeImgUrl = val.imageUrl;
this.isEditPoint = false;
this.selecthighFormworkPlaneFigureCoordinateList(val.id);
this.$nextTick(() => {
this.getNaturalSize()
})
this.getNaturalSize();
});
},
// 获取基坑布置图图片大小
getNaturalSize(callback) {
let Domlement = this.$refs['map']
console.dir(Domlement)
let Domlement = this.$refs["map"];
console.dir(Domlement);
var natureSize = {};
if (window.naturalWidth && window.naturalHeight) {
natureSize.width = Domlement.naturalWidth;
@ -333,19 +498,22 @@ export default {
// let heightRatio = natureSize.height / 569
// this.mapDate.width = natureSize.width*heightRatio
} else {
console.log(213)
let _this = this
console.log(213);
let _this = this;
var img = new Image();
img.src = Domlement.src;
img.onload = function() {
natureSize.width = img.width;
natureSize.height = img.height;
console.log('------', natureSize)
_this.imgWidth = natureSize.width
_this.imgHeight = natureSize.height
console.log("------", natureSize);
_this.imgWidth = natureSize.width;
_this.imgHeight = natureSize.height;
_this.imgStartWidth = img.width;
_this.imgStartHeight = img.width;
console.log(_this.$refs['mapbox'].clientWidth, _this.$refs['mapbox'].clientHeight)
console.log(
_this.$refs["mapbox"].clientWidth,
_this.$refs["mapbox"].clientHeight
);
// let heightRatio = 780 / natureSize.height
// let widthRatio = _this.$refs['mapbox'].clientWidth / natureSize.width
@ -360,12 +528,11 @@ export default {
// }
// _this.mapDate.width = natureSize.width*heightRatio
if (callback) {
return callback(natureSize)
return callback(natureSize);
}
};
}
}
console.log(natureSize)
console.log(natureSize);
// return natureSize;
},
deleteDeepImg(val) {
@ -373,84 +540,95 @@ export default {
// this.removeData = val
// this.deleteInfo = true
// '此操作将永久删除该文件, 是否继续?' '提示'
this.$confirm(this.$t('message.highModulus.hintText'), this.$t('message.highModulus.hint'), {
confirmButtonText: this.$t('message.highModulus.confirm'),
cancelButtonText: this.$t('message.highModulus.cancel'),
type: 'warning'
}).then(() => {
deleteHighFormworkPlaneFigureApi2({id: val.id}).then(res=>{
this.$confirm(
this.$t("message.highModulus.hintText"),
this.$t("message.highModulus.hint"),
{
confirmButtonText: this.$t("message.highModulus.confirm"),
cancelButtonText: this.$t("message.highModulus.cancel"),
type: "warning",
}
)
.then(() => {
deleteHighFormworkPlaneFigureApi2({ id: val.id }).then((res) => {
if (res.code == 200) {
// '删除成功！'
this.$message.success(this.$t('message.highModulus.removeSuccessMsg'))
this.selectHighFormworkPlaneFigureList()
this.activeImgUrl = ''
this.$message.success(
this.$t("message.highModulus.removeSuccessMsg")
);
this.selectHighFormworkPlaneFigureList();
this.activeImgUrl = "";
}
});
})
}).catch(() => {
.catch(() => {
// '已取消删除'
this.$message({
type: 'info',
message: this.$t('message.highModulus.cancelRemove')
type: "info",
message: this.$t("message.highModulus.cancelRemove"),
});
});
},
editPoint() {
this.isEditPoint = true
this.isEditPoint = true;
this.$notify({
// '成功'
title: this.$t('message.highModulus.success'),
title: this.$t("message.highModulus.success"),
// '请开始移动点位！'
message: this.$t('message.highModulus.hintText2'),
type: 'success',
message: this.$t("message.highModulus.hintText2"),
type: "success",
});
},
savePoint() {
let arr = []
this.pointList.forEach(item=>{
let arr = [];
this.pointList.forEach((item) => {
arr.push({
id: item.id,
mapX: item.mapX,
mapY: item.mapY,
measurePointId: item.measurePointId,
concreteMonitorPlaneFigureId: item.concreteMonitorPlaneFigureId
})
})
concreteMonitorPlaneFigureId: item.concreteMonitorPlaneFigureId,
});
});
let data = {
list: arr
}
updateFigureCoordinateApi2(arr).then(res=>{
console.log(res)
list: arr,
};
updateFigureCoordinateApi2(arr).then((res) => {
console.log(res);
if (res.code && res.success) {
// '保存成功！'
this.$message.success(this.$t('message.highModulus.saveSuccessMsg'))
this.$message.success(this.$t("message.highModulus.saveSuccessMsg"));
}
})
});
// editDeepExcavationPlaneFigureCoordinateApi(arr).then(res=>{
// console.log(res)
// if(res.code && res.success){
// this.$message.success('保存成功！')
// }
// })
this.isEditPoint = false
this.isEditPoint = false;
},
changeImgSize(val) {
if (val == 1) {
this.imgZoom = this.imgZoom + 0.2
console.log(this.imgZoom)
this.imgZoom = this.imgZoom + 0.2;
console.log(this.imgZoom);
} else if (val == 2) {
this.imgZoom = (this.imgZoom - 0.5) <= 0 ? this.imgZoom:this.imgZoom - 0.5
console.log(this.imgZoom)
this.imgZoom =
this.imgZoom - 0.5 <= 0 ? this.imgZoom : this.imgZoom - 0.5;
console.log(this.imgZoom);
}
},
// 缩放图片
rollImg() {
/* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
var zoom = parseInt(this.$refs.map.style.zoom) || 100;
/* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
zoom += event.wheelDelta / 12;
/* 最小范围 和 最大范围 的图片缩放尺度 */
if (zoom >= 80 && zoom < 500) {
this.$refs.map.style.zoom = zoom + "%";
}
@ -459,73 +637,88 @@ export default {
// 添加鼠标监听事件
move(val, e) {
console.log(val,e.pageX,e.pageY)
this.ratio = window.localStorage.getItem('zoom')
this.startX = e.pageX
this.startY = e.pageY
this.pointIndex = val
console.log(val, e.pageX, e.pageY);
this.ratio = window.localStorage.getItem("zoom");
this.startX = e.pageX;
this.startY = e.pageY;
this.pointIndex = val;
// console.dir(this.$refs['point'+val])
// this.$refs['point'+val].style.opacity = '0'
let _this = this
console.log(this.pointList[val])
let _this = this;
console.log(this.pointList[val]);
if (this.isEditPoint) {
this.pointList[val].status = 'none'
this.pointList[val].status = "none";
// this.$refs['point'+ val].style.display = 'none'
document.body.addEventListener('mousemove',this.movePoint,false)
document.body.addEventListener('mouseup',this.removeUp,false)
document.body.addEventListener("mousemove", this.movePoint, false);
document.body.addEventListener("mouseup", this.removeUp, false);
}
},
// 清除鼠标监听时间
removeUp(e) {
let top = (e.pageY - this.startY) / this.imgZoom,
left = (e.pageX - this.startX)/this.imgZoom
console.log(top,left)
this.pointStatus = 'none'
let x = Math.ceil(Number(this.pointList[this.pointIndex].mapX ? this.pointList[this.pointIndex].mapX:0) + left/this.ratio),
y = Math.ceil(Number(this.pointList[this.pointIndex].mapY ? this.pointList[this.pointIndex].mapY:0) + top/this.ratio)
console.log(x,y,this.imgWidth,this.imgHeight)
left = (e.pageX - this.startX) / this.imgZoom;
console.log(top, left);
this.pointStatus = "none";
let x = Math.ceil(
Number(
this.pointList[this.pointIndex].mapX
? this.pointList[this.pointIndex].mapX
: 0
) +
left / this.ratio
),
y = Math.ceil(
Number(
this.pointList[this.pointIndex].mapY
? this.pointList[this.pointIndex].mapY
: 0
) +
top / this.ratio
);
console.log(x, y, this.imgWidth, this.imgHeight);
if (y <= this.imgHeight && y >= 0) {
this.pointList[this.pointIndex].mapY = y
this.pointList[this.pointIndex].mapY = y;
}
if (x <= this.imgWidth && x >= 0) {
this.pointList[this.pointIndex].mapX = x
this.pointList[this.pointIndex].mapX = x;
}
this.pointList[this.pointIndex].status = 'block'
console.log(this.pointList)
this.$forceUpdate()
this.pointList[this.pointIndex].status = "block";
console.log(this.pointList);
this.$forceUpdate();
document.body.removeEventListener('mousemove',this.movePoint,false)
document.body.removeEventListener('mouseup',this.removeUp,false)
document.body.removeEventListener("mousemove", this.movePoint, false);
document.body.removeEventListener("mouseup", this.removeUp, false);
},
// 移动鼠标
movePoint(target) {
let bodyWidth = document.body.clientWidth,
bodyHeight = document.body.clientHeight,
appWidth = document.getElementById('app').clientWidth*this.ratio,
appHeight = document.getElementById('app').clientHeight*this.ratio,
appWidth = document.getElementById("app").clientWidth * this.ratio,
appHeight = document.getElementById("app").clientHeight * this.ratio,
a = bodyWidth - appWidth,
b = bodyHeight - appHeight
b = bodyHeight - appHeight;
if (this.ratio != 1) {
this.$refs['pointFixed'].style.transform = 'translate(0px, -75px)'
this.pointTop = ((target.pageY)/this.ratio - (b*0.5)/this.ratio) + 62
this.pointLeft = ((target.pageX)/this.ratio - (a*0.5)/this.ratio) - 10
this.$refs["pointFixed"].style.transform = "translate(0px, -75px)";
this.pointTop = target.pageY / this.ratio - (b * 0.5) / this.ratio + 62;
this.pointLeft =
target.pageX / this.ratio - (a * 0.5) / this.ratio - 10;
} else {
this.pointTop = target.pageY
this.pointLeft = target.pageX
this.pointTop = target.pageY;
this.pointLeft = target.pageX;
}
this.pointStatus = 'block'
this.pointStatus = "block";
},
up(val, e) {
let _this = this
let _this = this;
if (this.isEditPoint) {
window.removeEventListener('mousemove',function(e){
_this.movePoint()
})
}
}
}
window.removeEventListener("mousemove", function(e) {
_this.movePoint();
});
}
},
},
};
</script>
<style lang="less" scoped>
@ -553,7 +746,7 @@ export default {
margin: 0 auto;
margin-bottom: 16px;
text-align: center;
background: rgba(#D8D8D8, 0.3);
background: rgba(#d8d8d8, 0.3);
height: 132px;
display: flex;
flex-direction: column;
@ -562,7 +755,7 @@ export default {
.el-icon-circle-plus-outline {
margin-bottom: 8px;
font-size: 26px;
color: #B4C8F3;
color: #b4c8f3;
}
}
ul {
@ -572,7 +765,7 @@ export default {
width: 100%;
margin-bottom: 16px;
cursor: pointer;
border: 1px solid #CDCDCD;
border: 1px solid #cdcdcd;
padding: 0 10px;
padding-top: 10px;
box-sizing: border-box;
@ -594,7 +787,7 @@ export default {
}
}
.img-active {
border-color: #4A8BFF;
border-color: #4a8bff;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
}
}
@ -602,7 +795,7 @@ export default {
.map-right {
// flex: 1;
width: calc(100% - 300px);
border: 1px solid #E6E6E6;
border: 1px solid #e6e6e6;
padding: 14px;
height: 100%;
box-sizing: border-box;
@ -616,8 +809,8 @@ export default {
display: flex;
align-items: center;
justify-content: center;
color: #5181F6;
border: 1px solid #5181F6;
color: #5181f6;
border: 1px solid #5181f6;
border-radius: 3px;
cursor: pointer;
width: 62px;
@ -649,7 +842,7 @@ export default {
position: absolute;
}
.point-dialog {
background: rgba(#2A2E3F, 0.9);
background: rgba(#2a2e3f, 0.9);
color: #fff;
width: 238px;
height: auto;
@ -729,7 +922,7 @@ export default {
right: -9px;
top: -9px;
font-size: 18px;
color: #F56C6C;
color: #f56c6c;
cursor: pointer;
}
.el-image {
@ -740,7 +933,4 @@ export default {
.pointFixed {
position: fixed;
}
</style>

6
src/views/projectFront/deepFoundationPitManage/monitorData.vue
View File

@ -211,16 +211,16 @@
v-show="item.isShow"
>
<div class="point-title">
<p>测点编号：{{ item.measurePointName }}</p>
<p>测点编号：{{ item.measurePointNumber }}</p>
<p>
测点名称：<span
style="
color: #77e8b0;
display: inline-block;
width: 150px;
width: max-content;
height: 25px;
"
>{{ item.monitorTypeName }}</span
>{{ item.measurePointName }}</span
>
</p>
<p>

2
src/views/projectFront/highModulus/pointManage.vue
View File

@ -277,7 +277,7 @@
<!-- 地基沉降 -->
<el-table-column
prop="foundationSettlement"
label="立杆倾斜(mm)"
label="地基沉降(mm)"
>
</el-table-column>
<!-- 测量时间 -->