flx：调整地图回显偏移
This commit is contained in:
parent
2598c15d22
commit
ad75cbf974
@ -1,33 +1,16 @@
|
||||
<template>
|
||||
<div class="fullHeight">
|
||||
<div class="searchBox whiteBlock">
|
||||
<el-form
|
||||
:inline="true"
|
||||
size="medium"
|
||||
:model="searchForm"
|
||||
ref="searchForm"
|
||||
>
|
||||
<el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
|
||||
<el-form-item label="巡检点名称">
|
||||
<el-input
|
||||
placeholder="请输入"
|
||||
v-model="searchForm.checkingPointName"
|
||||
></el-input>
|
||||
<el-input placeholder="请输入" v-model="searchForm.checkingPointName"></el-input>
|
||||
</el-form-item>
|
||||
<el-button type="primary" size="medium" plain @click="getPointList"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="warning" size="medium" plain @click="refresh"
|
||||
>刷新</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="medium"
|
||||
@click="toAdd"
|
||||
v-permission="{
|
||||
key: 'inspection_add',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}"
|
||||
>
|
||||
<el-button type="primary" size="medium" plain @click="getPointList">查询</el-button>
|
||||
<el-button type="warning" size="medium" plain @click="refresh">刷新</el-button>
|
||||
<el-button type="primary" size="medium" @click="toAdd" v-permission="{
|
||||
key: 'inspection_add',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}">
|
||||
新增
|
||||
</el-button>
|
||||
</el-form>
|
||||
@ -35,52 +18,15 @@
|
||||
<div class="table_wrap whiteBlock">
|
||||
<vue-scroll class="tables">
|
||||
<el-table :data="tableData">
|
||||
<el-table-column
|
||||
label="序号"
|
||||
align="center"
|
||||
type="index"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="checkingPointName"
|
||||
label="巡检点名称"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="position"
|
||||
label="巡检位置"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
width="150"
|
||||
prop="minInspectTime"
|
||||
label="最低巡检时长(分钟)"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="createUserName"
|
||||
label="创建人"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="createDate"
|
||||
label="创建时间"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="regionName"
|
||||
label="所属区域"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="enterpriseName"
|
||||
label="责任企业"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="inspectUserNames"
|
||||
label="责任人"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column label="序号" align="center" type="index"></el-table-column>
|
||||
<el-table-column prop="checkingPointName" label="巡检点名称" align="center"></el-table-column>
|
||||
<el-table-column prop="position" label="巡检位置" align="center"></el-table-column>
|
||||
<el-table-column width="150" prop="minInspectTime" label="最低巡检时长(分钟)" align="center"></el-table-column>
|
||||
<el-table-column prop="createUserName" label="创建人" align="center"></el-table-column>
|
||||
<el-table-column prop="createDate" label="创建时间" align="center"></el-table-column>
|
||||
<el-table-column prop="regionName" label="所属区域" align="center"></el-table-column>
|
||||
<el-table-column prop="enterpriseName" label="责任企业" align="center"></el-table-column>
|
||||
<el-table-column prop="inspectUserNames" label="责任人" align="center"></el-table-column>
|
||||
<!-- <el-table-column
|
||||
prop="noticeUserNames"
|
||||
label="通知人"
|
||||
@ -90,97 +36,54 @@
|
||||
<el-table-column prop="qrCode" label="二维码" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<!-- {{$store.state.FILEURL + row.qrCode}} -->
|
||||
<el-image
|
||||
style="
|
||||
margin-right: 8px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
"
|
||||
fit="cover"
|
||||
:src="$store.state.FILEURL + row.qrCode"
|
||||
:preview-src-list="[$store.state.FILEURL + row.qrCode]"
|
||||
/>
|
||||
<el-image style="
|
||||
margin-right: 8px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
" fit="cover" :src="$store.state.FILEURL + row.qrCode"
|
||||
:preview-src-list="[$store.state.FILEURL + row.qrCode]" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
:label="
|
||||
$t('message.personnelPosition.beaconManage.table.operation')
|
||||
"
|
||||
align="center"
|
||||
width="400"
|
||||
>
|
||||
<el-table-column :label="
|
||||
$t('message.personnelPosition.beaconManage.table.operation')
|
||||
" align="center" width="400">
|
||||
<template slot-scope="scope">
|
||||
<div class="tableBtns">
|
||||
<div
|
||||
class="operationText"
|
||||
v-permission="{
|
||||
key: 'inspection_download',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}"
|
||||
>
|
||||
<i
|
||||
class="el-icon-download"
|
||||
style="
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #1684fc;
|
||||
margin-top: 15px;
|
||||
"
|
||||
></i>
|
||||
<a
|
||||
class="download"
|
||||
target="_blank"
|
||||
:href="$store.state.FILEURL + scope.row.qrCode"
|
||||
download
|
||||
>下载巡检二维码</a
|
||||
>
|
||||
<div class="operationText" v-permission="{
|
||||
key: 'inspection_download',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}">
|
||||
<i class="el-icon-download" style="
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: #1684fc;
|
||||
margin-top: 15px;
|
||||
"></i>
|
||||
<a class="download" target="_blank" :href="$store.state.FILEURL + scope.row.qrCode" download>下载巡检二维码</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="operationText"
|
||||
@click="deilBtn(scope.row)"
|
||||
v-permission="{
|
||||
key: 'inspection_detail',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}"
|
||||
>
|
||||
<i
|
||||
class="el-icon-tickets"
|
||||
style="color: #8dacfa; font-size: 16px; margin-right: 2px"
|
||||
></i>
|
||||
<div class="operationText" @click="deilBtn(scope.row)" v-permission="{
|
||||
key: 'inspection_detail',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}">
|
||||
<i class="el-icon-tickets" style="color: #8dacfa; font-size: 16px; margin-right: 2px"></i>
|
||||
<span>详情</span>
|
||||
</div>
|
||||
<div
|
||||
class="operationText"
|
||||
@click="editBtn(scope.row)"
|
||||
v-permission="{
|
||||
key: 'inspection_edit',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
src="@/assets/images/icon-edit.png"
|
||||
width="15px"
|
||||
height="15px"
|
||||
/>
|
||||
<div class="operationText" @click="editBtn(scope.row)" v-permission="{
|
||||
key: 'inspection_edit',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}">
|
||||
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div
|
||||
@click="toDelete(scope.row)"
|
||||
class="operationText"
|
||||
v-permission="{
|
||||
key: 'inspection_delete',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}"
|
||||
>
|
||||
<img
|
||||
src="@/assets/images/icon-delete.png"
|
||||
width="15px"
|
||||
height="15px"
|
||||
/>
|
||||
<div @click="toDelete(scope.row)" class="operationText" v-permission="{
|
||||
key: 'inspection_delete',
|
||||
menuPath: '/project/inspecPoint/inspection',
|
||||
}">
|
||||
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -188,112 +91,49 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</vue-scroll>
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<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="150px"
|
||||
class="dialogFormBox"
|
||||
>
|
||||
<el-form size="medium" :model="cardForm" ref="cardForm" :rules="cardFormRules" label-width="150px"
|
||||
class="dialogFormBox">
|
||||
<el-form-item label="巡检点名称：" prop="checkingPointName">
|
||||
<el-input
|
||||
:disabled="cardDialogTitle == '详情'"
|
||||
v-model="cardForm.checkingPointName"
|
||||
:placeholder="isAdding ? '请输入' : ''"
|
||||
></el-input>
|
||||
<el-input :disabled="cardDialogTitle == '详情'" v-model="cardForm.checkingPointName"
|
||||
:placeholder="isAdding ? '请输入' : ''"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检点位置：" prop="position">
|
||||
<el-input
|
||||
:disabled="cardDialogTitle == '详情'"
|
||||
v-model="cardForm.position"
|
||||
:placeholder="isAdding ? '请输入' : ''"
|
||||
></el-input>
|
||||
<el-input :disabled="cardDialogTitle == '详情'" v-model="cardForm.position"
|
||||
:placeholder="isAdding ? '请输入' : ''"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属区域：" prop="qualityRegionId">
|
||||
<el-select
|
||||
:disabled="cardDialogTitle == '详情'"
|
||||
collapse-tags
|
||||
filterable
|
||||
v-model="cardForm.qualityRegionId"
|
||||
:placeholder="isAdding ? '请选择' : ''"
|
||||
@change="updateArea"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in pointAreaList"
|
||||
:key="item.id"
|
||||
:label="item.regionName"
|
||||
:value="item.id"
|
||||
>
|
||||
<el-select :disabled="cardDialogTitle == '详情'" collapse-tags filterable v-model="cardForm.qualityRegionId"
|
||||
:placeholder="isAdding ? '请选择' : ''" @change="updateArea">
|
||||
<el-option v-for="item in pointAreaList" :key="item.id" :label="item.regionName" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="责任企业：" prop="enterpriseId">
|
||||
<el-select
|
||||
:disabled="cardDialogTitle == '详情'"
|
||||
collapse-tags
|
||||
filterable
|
||||
v-model="cardForm.enterpriseId"
|
||||
multiple
|
||||
:placeholder="isAdding ? '请选择' : ''"
|
||||
@change="changeDutyId"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in enterpriseList"
|
||||
:key="item.id"
|
||||
:label="item.enterpriseName"
|
||||
:value="item.id"
|
||||
>
|
||||
<el-select :disabled="cardDialogTitle == '详情'" collapse-tags filterable v-model="cardForm.enterpriseId"
|
||||
multiple :placeholder="isAdding ? '请选择' : ''" @change="changeDutyId">
|
||||
<el-option v-for="item in enterpriseList" :key="item.id" :label="item.enterpriseName" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="责任人：" prop="inspectUserIds">
|
||||
<el-select
|
||||
:disabled="cardDialogTitle == '详情'"
|
||||
collapse-tags
|
||||
filterable
|
||||
v-model="cardForm.inspectUserIds"
|
||||
multiple
|
||||
:placeholder="isAdding ? '请选择' : ''"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in chargerList"
|
||||
:key="item.userId + 'inspectUserIds'"
|
||||
:label="item.realName"
|
||||
:value="item.userId"
|
||||
>
|
||||
<el-select :disabled="cardDialogTitle == '详情'" collapse-tags filterable v-model="cardForm.inspectUserIds"
|
||||
multiple :placeholder="isAdding ? '请选择' : ''">
|
||||
<el-option v-for="item in chargerList" :key="item.userId + 'inspectUserIds'" :label="item.realName"
|
||||
:value="item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="最低巡检时长：" prop="minInspectTime">
|
||||
<el-input-number
|
||||
:disabled="cardDialogTitle == '详情'"
|
||||
class="smallTimeInput"
|
||||
v-model="cardForm.minInspectTime"
|
||||
:min="0"
|
||||
:controls="false"
|
||||
>
|
||||
<el-input-number :disabled="cardDialogTitle == '详情'" class="smallTimeInput" v-model="cardForm.minInspectTime"
|
||||
:min="0" :controls="false">
|
||||
</el-input-number>
|
||||
<span>(分钟)</span>
|
||||
</el-form-item>
|
||||
@ -383,64 +223,31 @@
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="自定义范围：" prop="standArea">
|
||||
<el-select
|
||||
:disabled="cardDialogTitle == '详情'"
|
||||
v-model="cardForm.standArea"
|
||||
:placeholder="isAdding ? '请输入' : ''"
|
||||
@change="drawCircle()"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item"
|
||||
:label="item + $t('message.laborMange.meter')"
|
||||
:value="item"
|
||||
>
|
||||
<el-select :disabled="cardDialogTitle == '详情'" v-model="cardForm.standArea"
|
||||
:placeholder="isAdding ? '请输入' : ''" @change="drawCircle()">
|
||||
<el-option v-for="item in options" :key="item" :label="item + $t('message.laborMange.meter')" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="addrTitle" style="width: calc(100% - 160px):">
|
||||
<el-form-item label="区域：" prop="addr">
|
||||
<el-input
|
||||
:disabled="cardDialogTitle == '详情'"
|
||||
size="medium"
|
||||
v-model="cardForm.addr"
|
||||
id="tipinput"
|
||||
:placeholder="isAdding ? '请输入' : ''"
|
||||
>
|
||||
<el-input :disabled="cardDialogTitle == '详情'" size="medium" v-model="cardForm.addr" id="tipinput"
|
||||
:placeholder="isAdding ? '请输入' : ''">
|
||||
<el-button slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="container"
|
||||
style="width: 580px; height: 400px; background: pink"
|
||||
></div>
|
||||
<div id="container" style="width: 580px; height: 400px; background: pink"></div>
|
||||
<div class="addrTitle">{{ cardForm.addr }}</div>
|
||||
<!-- 动态表单 -->
|
||||
<dynamicForms
|
||||
ref="dynamicFormsRef"
|
||||
:templateData="formData"
|
||||
:isAdding="isAdding"
|
||||
></dynamicForms>
|
||||
<dynamicForms ref="dynamicFormsRef" :templateData="formData" :isAdding="isAdding"></dynamicForms>
|
||||
|
||||
<div id="qrCode" ref="qrCodeDiv"></div>
|
||||
<div class="dialog-footer">
|
||||
<el-button
|
||||
class="cancleBtn"
|
||||
@click="closeEvent"
|
||||
icon="el-icon-circle-close"
|
||||
size="medium"
|
||||
>取消</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="isAdding != false"
|
||||
type="primary"
|
||||
icon="el-icon-circle-check"
|
||||
@click="addCardFn"
|
||||
size="medium"
|
||||
>生成巡检二维码</el-button
|
||||
>
|
||||
<el-button class="cancleBtn" @click="closeEvent" icon="el-icon-circle-close" size="medium">取消</el-button>
|
||||
<el-button v-if="isAdding != false" type="primary" icon="el-icon-circle-check" @click="addCardFn"
|
||||
size="medium">生成巡检二维码</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -688,23 +495,35 @@ export default {
|
||||
});
|
||||
console.log(1111111, event.obj, pathArr);
|
||||
});
|
||||
console.log(11111111111, this.cardForm.addr, that.locationList);
|
||||
|
||||
// console.log(11111111111, this.cardForm.addr, that.locationList);
|
||||
// this.cardForm.addr = "中国广东省深圳市宝安区福海路6161号福永意库";
|
||||
if (this.cardForm.addr) {
|
||||
geocoder.getLocation(this.cardForm.addr, function (status, result) {
|
||||
if (status === "complete" && result.geocodes.length) {
|
||||
var lnglat = result.geocodes[0].location;
|
||||
console.log(result.geocodes[0]);
|
||||
// var arr = lnglat.split(',')
|
||||
that.locationList = [
|
||||
{
|
||||
longitude: lnglat.lng,
|
||||
latitude: lnglat.lat,
|
||||
},
|
||||
];
|
||||
that.drawCircle();
|
||||
}
|
||||
});
|
||||
// 113.809842 22.673908
|
||||
if (this.cardForm.latitude && this.cardForm.longitude) {
|
||||
that.locationList = [
|
||||
{
|
||||
longitude: this.cardForm.longitude,
|
||||
latitude: this.cardForm.latitude,
|
||||
},
|
||||
];
|
||||
that.drawCircle();
|
||||
} else {
|
||||
geocoder.getLocation(this.cardForm.addr, function (status, result) {
|
||||
if (status === "complete" && result.geocodes.length) {
|
||||
var lnglat = result.geocodes[0].location;
|
||||
console.log(result.geocodes[0]);
|
||||
// var arr = lnglat.split(',')
|
||||
that.locationList = [
|
||||
{
|
||||
longitude: lnglat.lng,
|
||||
latitude: lnglat.lat,
|
||||
},
|
||||
];
|
||||
that.drawCircle();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
} else {
|
||||
console.log(this.projectDetail.longitude, this.projectDetail.latitude)
|
||||
geocoder.getAddress(`${this.projectDetail.longitude},${this.projectDetail.latitude}`, function (status, result) {
|
||||
@ -805,10 +624,10 @@ export default {
|
||||
this.map.on("click", (e) => {
|
||||
console.log(
|
||||
"您在 [ " +
|
||||
e.lnglat.getLng() +
|
||||
"," +
|
||||
e.lnglat.getLat() +
|
||||
" ] 的位置单击了地图！"
|
||||
e.lnglat.getLng() +
|
||||
"," +
|
||||
e.lnglat.getLat() +
|
||||
" ] 的位置单击了地图！"
|
||||
);
|
||||
this.cardForm.latitude = e.lnglat.getLat();
|
||||
this.cardForm.longitude = e.lnglat.getLng();
|
||||
@ -1211,26 +1030,33 @@ export default {
|
||||
.download {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.smallTimeInput {
|
||||
display: inline-block;
|
||||
width: 65% !important;
|
||||
|
||||
/deep/.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/.el-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.smallInput {
|
||||
display: inline-block;
|
||||
width: 148px !important;
|
||||
|
||||
/deep/.el-input__inner {
|
||||
width: 148px;
|
||||
}
|
||||
|
||||
/deep/.el-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
height: 30px !important;
|
||||
}
|
||||
@ -1239,16 +1065,19 @@ export default {
|
||||
.el-range-editor--medium .el-range__close-icon {
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-select__caret {
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.dialogFormBox {
|
||||
width: 580px;
|
||||
|
||||
/deep/.el-select .el-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/deep/.el-select .el-tag .el-select__tags-text {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@ -1256,13 +1085,16 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.addrTitle {
|
||||
font-size: 16px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
::v-deep .el-tag {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
// 图片预览的关闭按钮
|
||||
::v-deep .el-image-viewer__btn.el-image-viewer__close {
|
||||
color: white;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user