Merge branch 'dev-yjl' into 'shenzhen-dev'

项目版(巡检点页面需求变更、分页修改)

See merge request !66
This commit is contained in:
yjlHub 2022-12-01 10:20:55 +08:00
commit f05eb95189
4 changed files with 480 additions and 46 deletions

View File

@ -52,7 +52,7 @@
:page-sizes="$store.state.PAGESIZRS" :page-sizes="$store.state.PAGESIZRS"
:page-size="pageSize" :page-size="pageSize"
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
:total="total" :total="Number(total)"
background background
></el-pagination> ></el-pagination>
</div> </div>

View File

@ -1,7 +1,12 @@
<template> <template>
<div class="fullHeight"> <div class="fullHeight">
<div class="searchBox whiteBlock"> <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> <el-form-item>
<el-button type="primary" plain @click="toAdd">新增</el-button> <el-button type="primary" plain @click="toAdd">新增</el-button>
</el-form-item> </el-form-item>
@ -9,15 +14,47 @@
</div> </div>
<div class="table_wrap whiteBlock"> <div class="table_wrap whiteBlock">
<el-table class="tables" :data="tableData"> <el-table class="tables" :data="tableData">
<el-table-column prop="checkingPointName" label="名称" align="center"></el-table-column> <el-table-column
<el-table-column prop="position" label="位置" align="center"></el-table-column> prop="checkingPointName"
<el-table-column prop="createUserName" label="创建人" align="center"></el-table-column> label="名称"
<el-table-column prop="createDate" label="创建时间" align="center"></el-table-column> align="center"
></el-table-column>
<el-table-column
prop="position"
label="位置"
align="center"
></el-table-column>
<!-- <el-table-column
prop="inspectUserIds"
label="检查人员"
align="center"
></el-table-column>
<el-table-column
prop="noticeUserIds"
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="qrCode" label="二维码" align="center"> <el-table-column prop="qrCode" label="二维码" align="center">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<!-- {{$store.state.FILEURL + row.qrCode}} --> <!-- {{$store.state.FILEURL + row.qrCode}} -->
<el-image <el-image
style="margin-right: 8px;width: 80px; height: 80px;cursor: pointer;border-radius: 4px" style="
margin-right: 8px;
width: 80px;
height: 80px;
cursor: pointer;
border-radius: 4px;
"
fit="cover" fit="cover"
:src="$store.state.FILEURL + row.qrCode" :src="$store.state.FILEURL + row.qrCode"
:preview-src-list="[$store.state.FILEURL + row.qrCode]" :preview-src-list="[$store.state.FILEURL + row.qrCode]"
@ -33,16 +70,25 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div class="tableBtns"> <div class="tableBtns">
<div class="operationText"> <div class="operationText">
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" /> <img
src="@/assets/images/icon-edit.png"
width="15px"
height="15px"
/>
<a <a
class="download" class="download"
target="_blank" target="_blank"
:href="$store.state.FILEURL + scope.row.qrCode" :href="$store.state.FILEURL + scope.row.qrCode"
download download
>下载</a> >下载</a
>
</div> </div>
<div @click="toDelete(scope.row)" class="operationText"> <div @click="toDelete(scope.row)" class="operationText">
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" /> <img
src="@/assets/images/icon-delete.png"
width="15px"
height="15px"
/>
<span>删除</span> <span>删除</span>
</div> </div>
</div> </div>
@ -57,7 +103,7 @@
:page-sizes="$store.state.PAGESIZRS" :page-sizes="$store.state.PAGESIZRS"
:page-size="pageSize" :page-size="pageSize"
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
:total="total" :total="Number(total)"
background background
></el-pagination> ></el-pagination>
</div> </div>
@ -89,20 +135,136 @@
:placeholder="$t('message.personnelPosition.please_enter')" :placeholder="$t('message.personnelPosition.please_enter')"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="检查人员:" prop="inspectUserIds">
<el-select
collapse-tags
filterable
v-model="cardForm.inspectUserIds"
multiple
placeholder="请输入"
>
<el-option
v-for="item in accountList"
:key="item.userId + 'inspectUserIds'"
:label="item.workerName"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="通知人员:" prop="noticeUserIds">
<el-select
collapse-tags
filterable
v-model="cardForm.noticeUserIds"
multiple
placeholder="请输入"
>
<el-option
v-for="item in accountList"
:key="item.userId + 'inspectUserIds'"
:label="item.workerName"
:value="item.userId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="检查日期:" prop="startTime">
<!-- 开始日期 结束日期 -->
<el-date-picker
style="width: 320px"
v-model="checkDaterange"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
@change="changeDate"
>
</el-date-picker>
</el-form-item>
<el-form-item label="检查频次:" prop="frequencyNum">
<el-input-number
class="smallInput"
v-model="cardForm.frequencyNum"
:min="1"
:controls="false"
>
</el-input-number>
<!-- 检查频次 选择单位 -->
<el-select
class="smallInput"
v-model="cardForm.frequencyType"
placeholder="请输入"
style="margin-left: 12px"
>
<el-option
v-for="(item, index) in frequencyType"
:key="index + 'frequencyType'"
:label="item"
:value="index + 1"
>
</el-option>
</el-select>
</el-form-item>
<!--
<el-form-item label="经度:" prop="longitude">
<el-input v-model="cardForm.longitude"></el-input>
</el-form-item>
<el-form-item label="纬度:" prop="latitude">
<el-input v-model="cardForm.latitude"></el-input>
</el-form-item> -->
<el-form-item label="自定义范围:" prop="standArea">
<el-select
v-model="cardForm.standArea"
:placeholder="$t('message.laborMange.pleaseChoose')"
@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
size="medium"
v-model="cardForm.addr"
id="tipinput"
placeholder="请输入"
>
<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 class="addrTitle">{{ cardForm.addr }}</div>
<div id="qrCode" ref="qrCodeDiv"></div> <div id="qrCode" ref="qrCodeDiv"></div>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button <el-button
class="cancleBtn" class="cancleBtn"
@click="cardDialog = false" @click="closeEvent"
icon="el-icon-circle-close" icon="el-icon-circle-close"
size="medium" size="medium"
>{{$t('message.personnelPosition.cancel')}}</el-button> >取消</el-button
>
<el-button <el-button
type="primary" type="primary"
icon="el-icon-circle-check" icon="el-icon-circle-check"
@click="addCardFn" @click="addCardFn"
size="medium" size="medium"
>生成二维码</el-button> >生成二维码</el-button
>
</div> </div>
</el-form> </el-form>
</div> </div>
@ -114,14 +276,18 @@
import { import {
getPointListApi, getPointListApi,
addPointApi, addPointApi,
deletePointApi deletePointApi,
} from "@/assets/js/api/insect.js"; } from "@/assets/js/api/insect.js";
import { getProjectChilderSystemUserListApi } from "@/assets/js/api/configManage";
// import QRCode from "qrcodejs2"; // import QRCode from "qrcodejs2";
var mouseTool;
var mouseTool;
var objs = [];
export default { export default {
data() { data() {
return { return {
searchForm: { searchForm: {
workerName: "" workerName: "",
}, },
cardDialogTitle: "新建巡检点", cardDialogTitle: "新建巡检点",
tableData: [], tableData: [],
@ -130,19 +296,49 @@ export default {
pageSize: 10, pageSize: 10,
cardForm: { cardForm: {
checkingPointName: "", checkingPointName: "",
position: "" position: "",
inspectUserIds: "", //
noticeUserIds: "", //
startTime: "",
endTime: "",
frequencyType: 1,
frequencyNum: 1,
standArea: 100, //
latitude: "", //
longitude: "", //
addr:"",//
}, },
qrCode: "", qrCode: "",
cardDialog: false, cardDialog: false,
projectSn: "", projectSn: "",
cardFormRules: { cardFormRules: {
checkingPointName: [ checkingPointName: [
{ required: true, message: "请输入巡检点名称", trigger: "blur" } { required: true, message: "请输入巡检点名称", trigger: "blur" },
], ],
position: [ position: [
{ required: true, message: "请输入巡检位置", trigger: "blur" } { required: true, message: "请输入巡检位置", trigger: "blur" },
] ],
} inspectUserIds: [
{ required: true, message: "请输入检查人员", trigger: "blur" },
],
noticeUserIds: [
{ required: true, message: "请输入通知人员", trigger: "blur" },
],
startTime: [
{ required: true, message: "请选择检查日期", trigger: "blur" },
],
addr: [
{ required: true, message: "请选择区域", trigger: "blur" },
],
},
checkDaterange: [],
frequencyType: ["次", "次/日", "次/周", "次/月", "次/年"],
mapOperateType: 1,
accountList: [], //
options: [30, 50, 100, 200, 300],
map: null,
locationList: [],
}; };
}, },
mounted() { mounted() {
@ -150,6 +346,193 @@ export default {
this.getPointList(); this.getPointList();
}, },
methods: { methods: {
//
initMap() {
var that = this;
//
this.map = new AMap.Map("container", {
resizeEnable: true,
});
var geocoder = new AMap.Geocoder({});
//
var autoOptions = {
input: "tipinput",
};
this.auto = new AMap.Autocomplete(autoOptions);
this.placeSearch = new AMap.PlaceSearch({
map: this.map,
}); //
AMap.event.addListener(this.auto, "select", this.select); //
mouseTool = new AMap.MouseTool(this.map);
mouseTool.on("draw", function (event) {
// event.obj
console.log("覆盖物对象绘制完成", event.obj.getPath());
let overlaysList = that.map.getAllOverlays("polygon");
if (overlaysList.length > 1) {
that.map.remove(overlaysList[0]);
}
that.locationList = [];
var pathArr = event.obj.getPath();
pathArr.forEach((element) => {
that.locationList.push({
longitude: element.lng,
latitude: element.lat,
});
});
});
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();
}
});
this.map.on("click", (e) => {
console.log(
"您在 [ " +
e.lnglat.getLng() +
"," +
e.lnglat.getLat() +
" ] 的位置单击了地图!"
);;
this.cardForm.latitude = e.lnglat.getLat()
this.cardForm.longitude = e.lnglat.getLng();
this.locationList = [];
this.locationList.push({
longitude: e.lnglat.getLng(),
latitude: e.lnglat.getLat(),
});
var lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
geocoder.getAddress(lnglatXY, function (status, result) {
console.log(status, result);
that.cardForm.addr = result.regeocode.formattedAddress;
});
this.drawCircle();
// else {
// this.locationList.push({
// longitude: e.lnglat.getLng(),
// latitude: e.lnglat.getLat(),
// });
// }
});
},
//
select(e) {
console.log("select", e);
this.placeSearch.setCity(e.poi.adcode);
this.placeSearch.search(e.poi.name);
},
//
clearFn() {
this.map.clearMap();
},
//
addMarker() {
// Icon
var startIcon = new AMap.Icon({
//
size: new AMap.Size(25, 34),
//
image:
"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
//
imageSize: new AMap.Size(25, 34),
//
// imageOffset: new AMap.Pixel(-9, -3)
});
var marker = new AMap.Marker({
icon: startIcon,
position: [
this.locationList[0].longitude,
this.locationList[0].latitude,
],
size: new AMap.Size(25, 34),
// offset: new AMap.Pixel(-13, -30)
});
marker.setMap(this.map);
},
exitEditFn() {
mouseTool.close();
},
//
drawCircle() {
if (this.locationList.length == 0) {
return;
}
this.clearFn();
this.addMarker();
var circle = new AMap.Circle({
center: [this.locationList[0].longitude, this.locationList[0].latitude],
radius: this.cardForm.standArea, //
borderWeight: 2,
strokeColor: "#6caffc",
strokeOpacity: 1,
strokeWeight: 2,
fillOpacity: 0.6,
strokeStyle: "solid",
// strokeDasharray: [10, 10],
// 线 'dashed'
fillColor: "#6caffc",
zIndex: 50,
});
circle.setMap(this.map);
//
this.map.setFitView([circle]);
},
//
drawRectangle() {
this.clearFn();
mouseTool.rectangle({
strokeColor: "#6caffc",
// strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: "#6caffc",
fillOpacity: 0.6,
// strokeStyle solid
strokeStyle: "solid",
// strokeDasharray: [30,10],
});
},
drawPolygon() {
this.clearFn();
mouseTool.polygon({
strokeColor: "#6caffc",
strokeOpacity: 1,
strokeWeight: 2,
// strokeOpacity: 0.2,
fillColor: "#6caffc",
fillOpacity: 0.6,
// 线 'dashed'
strokeStyle: "solid",
// strokeStyledashed
// strokeDasharray: [30,10],
});
},
////-------------------线
//
changeDate() {
if (this.checkDaterange) {
this.cardForm.startTime = this.checkDaterange[0];
this.cardForm.endTime = this.checkDaterange[1];
} else {
this.cardForm.startTime = "";
this.cardForm.endTime = "";
}
},
// //
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;
@ -165,12 +548,14 @@ export default {
let data = { let data = {
pageNo: this.pageNo, pageNo: this.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize,
projectSn: this.projectSn projectSn: this.projectSn,
}; };
getPointListApi(data).then(res => { getPointListApi(data).then((res) => {
console.log("----巡检点列表", res); console.log("----巡检点列表", res);
this.tableData = res.result.records; this.tableData = res.result.records;
this.total = res.result.total; this.total = res.result.total;
this.inspectUserIdsList = res.result.records;
this.noticeUserIdsList = res.result.records;
}); });
}, },
// //
@ -180,6 +565,10 @@ export default {
// //
toAdd() { toAdd() {
this.cardDialog = true; this.cardDialog = true;
this.$nextTick(() => {
this.initMap();
});
this.getAccountList();
}, },
// //
toDelete(val) { toDelete(val) {
@ -187,23 +576,23 @@ export default {
this.$confirm("此操作将永久删除该巡检点, 是否继续?", "提示", { this.$confirm("此操作将永久删除该巡检点, 是否继续?", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning",
}) })
.then(() => { .then(() => {
let data = { let data = {
id: val.id id: val.id,
}; };
deletePointApi(data).then(res => { deletePointApi(data).then((res) => {
if (res.success) { if (res.success) {
this.getPointList(); this.getPointList();
this.$message({ this.$message({
type: "success", type: "success",
message: "删除成功!" message: "删除成功!",
}); });
} else { } else {
this.$message({ this.$message({
type: "error", type: "error",
message: res.message message: res.message,
}); });
} }
}); });
@ -211,7 +600,7 @@ export default {
.catch(() => { .catch(() => {
this.$message({ this.$message({
type: "info", type: "info",
message: "已取消删除" message: "已取消删除",
}); });
}); });
}, },
@ -245,23 +634,23 @@ export default {
}, },
// //
addCardFn() { addCardFn() {
// this.$refs.cardForm.validate((valid) => {
let data = this.cardForm;
data.projectSn = this.$store.state.projectSn;
data.createUserId = this.$store.state.userInfo.userId;
data.createUserName = this.$store.state.userInfo.account;
this.$refs["cardForm"].validate(valid => {
if (valid) { if (valid) {
addPointApi(data).then(res => { //
let data = this.cardForm;
data.projectSn = this.$store.state.projectSn;
data.createUserId = this.$store.state.userInfo.userId;
data.createUserName = this.$store.state.userInfo.account;
data.inspectUserIds = data.inspectUserIds.toString(',');
data.noticeUserIds = data.noticeUserIds.toString(',');
addPointApi(data).then((res) => {
console.log("新增", res); console.log("新增", res);
if (res.code == 200) { if (res.code == 200) {
this.$message.success("添加成功!");
this.checkDaterange=[]
this.cardDialog = false; this.cardDialog = false;
(this.cardForm = { this.$refs.cardForm.resetFields();
checkingPointName: "", this.getPointList();
position: ""
}),
this.getPointList();
} }
}); });
// document.getElementById("qrCode").innerHTML = ""; // document.getElementById("qrCode").innerHTML = "";
@ -292,8 +681,24 @@ export default {
// }, 500); // }, 500);
} }
}); });
} },
} //
getAccountList() {
getProjectChilderSystemUserListApi({
projectSn: this.$store.state.projectSn,
}).then((result) => {
this.accountList = result.result;
console.log("检查人员列表", this.accountList);
});
},
//
closeEvent() {
this.cardDialog = false;
this.$refs.cardForm.resetFields();
this.cardForm.startTime = "";
this.cardForm.endTime = "";
},
},
}; };
</script> </script>
@ -301,4 +706,33 @@ export default {
.download { .download {
text-decoration: none; text-decoration: none;
} }
.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;
}
::v-deep .el-range-editor--medium .el-range__icon,
.el-range-editor--medium .el-range__close-icon {
line-height: 10px;
}
::v-deep .el-select__caret {
line-height: 36px;
}
.dialogFormBox {
width: 580px;
}
.addrTitle {
font-size: 16px;
line-height: 56px;
}
</style> </style>

View File

@ -139,7 +139,7 @@
:page-sizes="$store.state.PAGESIZRS" :page-sizes="$store.state.PAGESIZRS"
:page-size="pageSize" :page-size="pageSize"
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
:total="total" :total="Number(total)"
></el-pagination> ></el-pagination>
</div> </div>
</div> </div>

View File

@ -113,7 +113,7 @@
:page-sizes="$store.state.PAGESIZRS" :page-sizes="$store.state.PAGESIZRS"
:page-size="searchForm.pageSize" :page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
:total="Number(pageTotal)" :total="pageTotal"
></el-pagination> ></el-pagination>
</div> </div>
<!-- 新增任务弹窗 --> <!-- 新增任务弹窗 -->