1121 lines
35 KiB
Vue
1121 lines
35 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div class="searchBox whiteBlock">
|
||
<el-form
|
||
:inline="true"
|
||
size="medium"
|
||
:model="searchForm"
|
||
ref="searchForm"
|
||
>
|
||
<el-form-item label="巡检点名称">
|
||
<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>
|
||
</el-form>
|
||
</div>
|
||
<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
|
||
prop="noticeUserNames"
|
||
label="通知人"
|
||
align="center"
|
||
></el-table-column> -->
|
||
|
||
<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]"
|
||
/>
|
||
</template>
|
||
</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 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)">
|
||
<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"
|
||
/>
|
||
<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"
|
||
/>
|
||
<span>删除</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</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>
|
||
</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="150px"
|
||
class="dialogFormBox"
|
||
>
|
||
<el-form-item label="巡检点名称：" prop="checkingPointName">
|
||
<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-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-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-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-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>
|
||
<span>(分钟)</span>
|
||
</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 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
|
||
:disabled="cardDialogTitle == '详情'"
|
||
collapse-tags
|
||
filterable
|
||
v-model="cardForm.noticeUserIds"
|
||
multiple
|
||
:placeholder="isAdding ? '请选择' : ''"
|
||
>
|
||
<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
|
||
:disabled="cardDialogTitle == '详情'"
|
||
style="width: 320px"
|
||
v-model="checkDaterange"
|
||
type="daterange"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="yyyy-MM-dd"
|
||
@change="changeDate"
|
||
:picker-options="pickerOptions"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="巡检频次：" prop="frequencyNum">
|
||
<el-input-number
|
||
:disabled="cardDialogTitle == '详情'"
|
||
class="smallInput"
|
||
v-model="cardForm.frequencyNum"
|
||
:min="1"
|
||
:controls="false"
|
||
>
|
||
</el-input-number>
|
||
<el-select
|
||
:disabled="cardDialogTitle == '详情'"
|
||
class="smallInput"
|
||
v-model="cardForm.frequencyType"
|
||
:placeholder="isAdding ? '请输入' : ''"
|
||
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
|
||
: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-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>
|
||
<!-- 动态表单 -->
|
||
<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
|
||
>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getPointListApi,
|
||
addPointApi,
|
||
deletePointApi,
|
||
editPointApi,
|
||
pointAreaApi,
|
||
} from "@/assets/js/api/insect.js";
|
||
import { getProjectChilderSystemUserListApi } from "@/assets/js/api/configManage";
|
||
import dynamicForms from "./components/dynamicForms/index.vue";
|
||
// import QRCode from "qrcodejs2";
|
||
var mouseTool;
|
||
var mouseTool;
|
||
var objs = [];
|
||
export default {
|
||
components: { dynamicForms },
|
||
data() {
|
||
return {
|
||
chargerList: [],
|
||
enterpriseList: [],
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
|
||
},
|
||
},
|
||
searchForm: {
|
||
checkingPointName: "",
|
||
},
|
||
cardDialogTitle: "",
|
||
tableData: [],
|
||
total: 0,
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
cardForm: {
|
||
checkingPointName: "",
|
||
position: "",
|
||
qualityRegionId: "", // 区域ID
|
||
enterpriseId: "", // 责任企业
|
||
inspectUserIds: "", //检查人
|
||
noticeUserIds: "", //通知人
|
||
startTime: "",
|
||
endTime: "",
|
||
frequencyType: 1,
|
||
frequencyNum: 1,
|
||
minInspectTime: 0,
|
||
standArea: 100, //范围
|
||
latitude: "", //纬度
|
||
longitude: "", //经度
|
||
addr: "", //地图区域
|
||
},
|
||
qrCode: "",
|
||
cardDialog: false,
|
||
projectSn: "",
|
||
cardFormRules: {
|
||
checkingPointName: [
|
||
{ required: true, message: "请输入巡检点名称", trigger: "blur" },
|
||
],
|
||
position: [
|
||
{ required: true, message: "请输入巡检位置", trigger: "blur" },
|
||
],
|
||
qualityRegionId: [
|
||
{ required: true, message: "请选择", trigger: "blur" },
|
||
],
|
||
enterpriseId: [{ required: true, message: "请选择", trigger: "blur" }],
|
||
inspectUserIds: [
|
||
{ required: true, message: "请输入检查人员", trigger: "blur" },
|
||
],
|
||
noticeUserIds: [
|
||
{ required: true, message: "请输入通知人员", trigger: "blur" },
|
||
],
|
||
startTime: [
|
||
{ required: true, message: "请选择检查日期", trigger: "blur" },
|
||
],
|
||
minInspectTime: [
|
||
{ required: true, message: "请输入最低巡检时长", trigger: "blur" },
|
||
],
|
||
frequencyNum: [
|
||
{ required: true, message: "请输入巡检频次", trigger: "blur" },
|
||
],
|
||
standArea: [{ required: true, message: "请选择", trigger: "blur" }],
|
||
addr: [{ required: true, message: "请选择区域", trigger: "change" }],
|
||
},
|
||
checkDaterange: [],
|
||
frequencyType: ["次", "次/日", "次/周", "次/月", "次/年"],
|
||
mapOperateType: 1,
|
||
accountList: [], //检查人员列表
|
||
options: [30, 50, 100, 200, 300],
|
||
map: null,
|
||
locationList: [],
|
||
formData: [], // 存储动态表单数据
|
||
isAdding: true,
|
||
pointAreaList: [],
|
||
areaData: {},
|
||
};
|
||
},
|
||
mounted() {
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.getPointList();
|
||
this.getPointAreaFn();
|
||
},
|
||
methods: {
|
||
//切换 整改人
|
||
changeDutyId(value) {
|
||
console.log(this.cardForm, 777888);
|
||
if (this.cardForm.enterpriseId.length > 0) {
|
||
this.chargerList = this.areaData.systemUsers.filter((item) => {
|
||
return this.cardForm.enterpriseId.includes(item.enterpriseId);
|
||
});
|
||
let shouldHavePersonIdList = this.chargerList.map((item) => {
|
||
if (this.cardForm.enterpriseId.includes(item.enterpriseId)) {
|
||
return item.userId;
|
||
}
|
||
});
|
||
if (this.cardForm.inspectUserIds) {
|
||
const newArr = this.cardForm.inspectUserIds.filter((item) =>
|
||
shouldHavePersonIdList.includes(item)
|
||
);
|
||
this.cardForm.inspectUserIds = newArr;
|
||
}
|
||
} else {
|
||
this.chargerList = this.areaData.systemUsers;
|
||
this.cardForm.inspectUserIds = "";
|
||
}
|
||
},
|
||
updateArea() {
|
||
let findItem = this.pointAreaList.find((item) => {
|
||
return item.id == this.cardForm.qualityRegionId;
|
||
});
|
||
this.cardForm.enterpriseId = "";
|
||
this.cardForm.inspectUserIds = "";
|
||
console.log(findItem, 777888);
|
||
if (findItem) {
|
||
this.areaData = findItem;
|
||
this.chargerList = findItem.systemUsers;
|
||
this.enterpriseList = findItem.enterpriseInfos;
|
||
}
|
||
},
|
||
// 获取区域列表
|
||
getPointAreaFn() {
|
||
let requestData = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
pointAreaApi(requestData).then((res) => {
|
||
console.log(res);
|
||
this.pointAreaList = res.result;
|
||
});
|
||
},
|
||
//查看详情
|
||
deilBtn(obj) {
|
||
this.isAdding = false;
|
||
this.cardDialogTitle = "详情";
|
||
this.cardDialog = true;
|
||
this.cardForm = JSON.parse(JSON.stringify(obj));
|
||
if (obj.startTime && obj.endTime) {
|
||
this.checkDaterange = [new Date(obj.startTime), new Date(obj.endTime)];
|
||
} else {
|
||
this.checkDaterange = [];
|
||
}
|
||
this.formData.splice(0); // 清空数组
|
||
JSON.parse(obj.template).forEach((item) => {
|
||
this.formData.push(item); // 添加新的数据到数组中
|
||
});
|
||
if (this.cardForm.inspectUserIds) {
|
||
this.cardForm.inspectUserIds = this.cardForm.inspectUserIds.split(",");
|
||
}
|
||
if (this.cardForm.enterpriseId) {
|
||
this.cardForm.enterpriseId = this.cardForm.enterpriseId.split(",");
|
||
}
|
||
if (this.cardForm.noticeUserIds) {
|
||
this.cardForm.noticeUserIds = this.cardForm.noticeUserIds.split(",");
|
||
}
|
||
let findItem = this.pointAreaList.find((item) => {
|
||
return item.id == this.cardForm.qualityRegionId;
|
||
});
|
||
if (findItem) {
|
||
this.areaData = findItem;
|
||
this.chargerList = findItem.systemUsers;
|
||
this.enterpriseList = findItem.enterpriseInfos;
|
||
}
|
||
this.$nextTick(() => {
|
||
this.initMap();
|
||
});
|
||
this.getAccountList();
|
||
},
|
||
//地图加载
|
||
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",
|
||
// strokeStyle是dashed时有效
|
||
// 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) {
|
||
this.pageSize = val;
|
||
this.getPointList();
|
||
},
|
||
//查看页
|
||
handleCurrentChange(val) {
|
||
this.pageNo = val;
|
||
this.getPointList();
|
||
},
|
||
// 查询
|
||
getPointList() {
|
||
let data = {
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
projectSn: this.projectSn,
|
||
checkingPointName: this.searchForm.checkingPointName,
|
||
};
|
||
getPointListApi(data).then((res) => {
|
||
console.log("----巡检点列表", res);
|
||
this.tableData = res.result.records;
|
||
this.total = res.result.total;
|
||
this.inspectUserIdsList = res.result.records;
|
||
this.noticeUserIdsList = res.result.records;
|
||
});
|
||
},
|
||
// 刷新
|
||
toRefresh() {
|
||
this.getPointList();
|
||
},
|
||
editBtn(obj) {
|
||
console.log("编辑的信息", obj);
|
||
this.cardDialog = true;
|
||
this.isAdding = true;
|
||
this.cardForm = JSON.parse(JSON.stringify(obj));
|
||
this.cardDialogTitle = "编辑巡检点";
|
||
// this.checkDaterange[0] = this.cardForm.startTime
|
||
// this.checkDaterange[1] = this.cardForm.endTime
|
||
if (obj.startTime && obj.endTime) {
|
||
this.checkDaterange = [new Date(obj.startTime), new Date(obj.endTime)];
|
||
} else {
|
||
this.checkDaterange = [];
|
||
}
|
||
this.formData.splice(0); // 清空数组
|
||
JSON.parse(obj.template).forEach((item) => {
|
||
this.formData.push(item); // 添加新的数据到数组中
|
||
});
|
||
if (this.cardForm.inspectUserIds) {
|
||
this.cardForm.inspectUserIds = this.cardForm.inspectUserIds.split(",");
|
||
}
|
||
if (this.cardForm.enterpriseId) {
|
||
this.cardForm.enterpriseId = this.cardForm.enterpriseId.split(",");
|
||
}
|
||
if (this.cardForm.noticeUserIds) {
|
||
this.cardForm.noticeUserIds = this.cardForm.noticeUserIds.split(",");
|
||
}
|
||
let findItem = this.pointAreaList.find((item) => {
|
||
return item.id == this.cardForm.qualityRegionId;
|
||
});
|
||
if (findItem) {
|
||
this.areaData = findItem;
|
||
this.chargerList = findItem.systemUsers;
|
||
this.enterpriseList = findItem.enterpriseInfos;
|
||
}
|
||
this.$nextTick(() => {
|
||
this.initMap();
|
||
});
|
||
this.getAccountList();
|
||
},
|
||
// 新增
|
||
toAdd() {
|
||
this.cardDialog = true;
|
||
this.isAdding = true;
|
||
this.formData.splice(0);
|
||
this.formData.push({
|
||
title: "表单标题",
|
||
name: "",
|
||
isRequired: true,
|
||
value: "",
|
||
});
|
||
this.checkDaterange = [];
|
||
this.cardDialogTitle = "新建巡检点";
|
||
this.areaData = {};
|
||
this.chargerList = [];
|
||
this.enterpriseList = [];
|
||
this.resetForm();
|
||
this.$nextTick(() => {
|
||
this.initMap();
|
||
this.$refs.cardForm.clearValidate();
|
||
});
|
||
this.getAccountList();
|
||
},
|
||
// 删除
|
||
toDelete(val) {
|
||
console.log("删除", val);
|
||
this.$confirm("此操作将永久删除该巡检点, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
let data = {
|
||
id: val.id,
|
||
};
|
||
deletePointApi(data).then((res) => {
|
||
if (res.success) {
|
||
this.getPointList();
|
||
this.$message({
|
||
type: "success",
|
||
message: "删除成功!",
|
||
});
|
||
} else {
|
||
this.$message({
|
||
type: "error",
|
||
message: res.message,
|
||
});
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: "info",
|
||
message: "已取消删除",
|
||
});
|
||
});
|
||
},
|
||
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
|
||
selectNowDate() {
|
||
var date = new Date(),
|
||
year = date.getFullYear(),
|
||
month = date.getMonth() + 1,
|
||
day = date.getDate(),
|
||
hours = date.getHours(), //获取当前小时数(0-23)
|
||
minutes = date.getMinutes(), //获取当前分钟数(0-59)
|
||
seconds = date.getSeconds();
|
||
month >= 1 && month <= 9 ? (month = "0" + month) : "";
|
||
day >= 0 && day <= 9 ? (day = "0" + day) : "";
|
||
hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
|
||
minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
|
||
seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
|
||
var timer =
|
||
year +
|
||
"-" +
|
||
month +
|
||
"-" +
|
||
day +
|
||
" " +
|
||
hours +
|
||
":" +
|
||
minutes +
|
||
":" +
|
||
seconds;
|
||
return timer;
|
||
},
|
||
// 生成二维码
|
||
addCardFn() {
|
||
this.$refs.cardForm.validate((valid) => {
|
||
if (valid) {
|
||
let formTemplate;
|
||
formTemplate = this.$refs.dynamicFormsRef.dynamicFroms;
|
||
|
||
// 新增
|
||
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.join(",");
|
||
data.enterpriseId = data.enterpriseId.join(",");
|
||
// data.noticeUserIds = data.noticeUserIds.join(",");
|
||
data.template = JSON.stringify(formTemplate);
|
||
if (this.cardDialogTitle == "新建巡检点") {
|
||
addPointApi(data).then((res) => {
|
||
console.log("新增", res);
|
||
if (res.code == 200) {
|
||
this.$message.success("添加成功！");
|
||
|
||
this.getPointList();
|
||
}
|
||
});
|
||
// document.getElementById("qrCode").innerHTML = "";
|
||
// console.log("QRCode", QRCode);
|
||
// let QRCodeData = new QRCode(this.$refs.qrCodeDiv, {
|
||
// text: JSON.stringify(data),
|
||
// width: 150,
|
||
// height: 150,
|
||
// colorDark: "#333333", //二维码颜色
|
||
// colorLight: "#ffffff", //二维码背景色
|
||
// correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
|
||
// });
|
||
// console.log("QRCodeData", QRCodeData);
|
||
// setTimeout(() => {
|
||
// let img = QRCodeData._el.innerHTML;
|
||
// let baseurl = img
|
||
// .split("=")[5].split('"')[1]
|
||
// console.log("baseurl", baseurl);
|
||
// data.qrCode = baseurl;
|
||
// data.createDate = this.selectNowDate();
|
||
// addPointApi(data).then(res => {
|
||
// console.log("新增", res);
|
||
// if (res.code == 200) {
|
||
// this.cardDialog = false;
|
||
// this.getPointList()
|
||
// }
|
||
// });
|
||
// }, 500);
|
||
} else if (this.cardDialogTitle == "编辑巡检点") {
|
||
editPointApi(data).then((res) => {
|
||
if (res.success) {
|
||
this.$message.success(res.message);
|
||
this.getPointList();
|
||
}
|
||
});
|
||
}
|
||
this.cardDialog = false;
|
||
}
|
||
});
|
||
},
|
||
|
||
close() {
|
||
// this.cardForm = {}
|
||
// this.$nextTick(() => {
|
||
// this.$refs.cardForm.clearValidate()
|
||
// })
|
||
this.closeEvent();
|
||
},
|
||
resetForm() {
|
||
this.cardForm = {
|
||
checkingPointName: "",
|
||
position: "",
|
||
qualityRegionId: "", // 区域ID
|
||
enterpriseId: "", // 责任企业
|
||
inspectUserIds: "", //检查人
|
||
noticeUserIds: "", //通知人
|
||
startTime: "",
|
||
endTime: "",
|
||
frequencyType: 1,
|
||
frequencyNum: 1,
|
||
minInspectTime: 0,
|
||
standArea: 100, //范围
|
||
latitude: "", //纬度
|
||
longitude: "", //经度
|
||
addr: "", //地图区域
|
||
};
|
||
},
|
||
//检查人员下拉列表
|
||
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.$refs.cardForm.clearValidate();
|
||
this.cardForm.startTime = "";
|
||
this.cardForm.endTime = "";
|
||
console.log(this.cardForm, 777888);
|
||
},
|
||
refresh() {
|
||
this.searchForm = {};
|
||
this.getPointList();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.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;
|
||
}
|
||
|
||
::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;
|
||
/deep/.el-select .el-tag{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
/deep/.el-select .el-tag .el-select__tags-text{
|
||
display: inline-block;
|
||
width: 100%;
|
||
text-overflow: ellipsis;
|
||
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;
|
||
}
|
||
</style>
|