|
|
@@ -1,10 +1,24 @@
|
|
|
<template>
|
|
|
<div class="main">
|
|
|
- <div class="blockName">{{ !isAdd ? '编辑' : '新增' }}巡更路线（<span class="show-required-icon-star"></span>为必填项）</div>
|
|
|
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="formContent">
|
|
|
+ <div class="blockName">
|
|
|
+ {{ !isAdd ? '编辑' : '新增' }}巡更路线（
|
|
|
+ <span class="show-required-icon-star"></span>为必填项）
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="120px"
|
|
|
+ class="formContent"
|
|
|
+ >
|
|
|
<div class="formContent-item">
|
|
|
<el-form-item label="所属社区" prop="communityId">
|
|
|
- <el-select class="width100" v-model="ruleForm.communityId" placeholder="所属社区" clearable>
|
|
|
+ <el-select
|
|
|
+ class="width100"
|
|
|
+ v-model="ruleForm.communityId"
|
|
|
+ placeholder="所属社区"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
<el-option
|
|
|
v-for="(item, index) in $parent.communityArr"
|
|
|
:key="index"
|
|
|
@@ -30,8 +44,7 @@
|
|
|
:titles="['待选列表', '已选列表']"
|
|
|
@change="handleChange"
|
|
|
:data="patrolArr"
|
|
|
- >
|
|
|
- </el-transfer>
|
|
|
+ ></el-transfer>
|
|
|
<map-value :point="targetData"></map-value>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
@@ -40,7 +53,7 @@
|
|
|
<el-date-picker
|
|
|
class="width100"
|
|
|
v-model="effectiveDate"
|
|
|
- value-format="yyyy-MM-dd "
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="选择开始日期"
|
|
|
@@ -49,21 +62,40 @@
|
|
|
:editable="false"
|
|
|
></el-date-picker>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="巡更时间" prop="communityName">
|
|
|
- <div>
|
|
|
- <el-time-picker
|
|
|
- is-range
|
|
|
- v-model="value1"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- placeholder="选择时间范围"
|
|
|
- >
|
|
|
- </el-time-picker>
|
|
|
- <div class="sunm">
|
|
|
+ <el-form-item label="巡更时间" prop="timePeriod">
|
|
|
+ <div class="timeList" v-for="(item,index) in timePeriod" :key="index">
|
|
|
+ <el-time-select
|
|
|
+ class="width50"
|
|
|
+ placeholder="开始时间"
|
|
|
+ v-model="item.startTime"
|
|
|
+ :picker-options="{
|
|
|
+ start: '00:00',
|
|
|
+ step: '00:15',
|
|
|
+ end: '23:30'
|
|
|
+ }"
|
|
|
+ @change="timeChange(item,'startTime')"
|
|
|
+ ></el-time-select>
|
|
|
+ <span>至</span>
|
|
|
+ <el-time-select
|
|
|
+ placeholder="结束时间"
|
|
|
+ v-model="item.endTime"
|
|
|
+ class="width50"
|
|
|
+ :picker-options="{
|
|
|
+ start: '00:00',
|
|
|
+ step: '00:15',
|
|
|
+ end: '23:30',
|
|
|
+ minTime: item.startTime
|
|
|
+ }"
|
|
|
+ @change="timeChange(item,'endTime')"
|
|
|
+ ></el-time-select>
|
|
|
+ <div class="sunm" @click="addTime(index,1)">
|
|
|
<i class="zoniot_font zoniot-icon-tianjia1"></i>
|
|
|
</div>
|
|
|
- <div class="sunm">
|
|
|
+ <div
|
|
|
+ class="sunm"
|
|
|
+ @click="addTime(index,-1)"
|
|
|
+ v-if="timePeriod.length>1 && index!=0"
|
|
|
+ >
|
|
|
<i class="zoniot_font zoniot-icon-shanjian"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -74,7 +106,7 @@
|
|
|
<el-radio :label="2">间隔天数重复</el-radio>
|
|
|
</el-radio-group>
|
|
|
|
|
|
- <el-checkbox-group v-if="ruleForm.periodType == 1" v-model="ruleForm.periodValue">
|
|
|
+ <el-checkbox-group v-if="ruleForm.periodType == 1" v-model="periodValue">
|
|
|
<el-checkbox :label="1">周一</el-checkbox>
|
|
|
<el-checkbox :label="2">周二</el-checkbox>
|
|
|
<el-checkbox :label="3">周三</el-checkbox>
|
|
|
@@ -85,8 +117,12 @@
|
|
|
</el-checkbox-group>
|
|
|
<div v-else class="periodValueInput">
|
|
|
每隔
|
|
|
- <el-input-number v-model="ruleForm.periodValue" controls-position="right" :min="0" :max="30"></el-input-number>
|
|
|
- 天进行(输入0-30的数字，0代表每天都要进行任务)
|
|
|
+ <el-input-number
|
|
|
+ v-model="ruleForm.periodValue"
|
|
|
+ controls-position="right"
|
|
|
+ :min="0"
|
|
|
+ :max="30"
|
|
|
+ ></el-input-number>天进行(输入0-30的数字，0代表每天都要进行任务)
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="定位距离(m)">
|
|
|
@@ -96,7 +132,12 @@
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="拍照/视频要求">
|
|
|
- <el-select class="width100" v-model="ruleForm.cameraSettings" placeholder="请选择拍照/视频要求" clearable>
|
|
|
+ <el-select
|
|
|
+ class="width100"
|
|
|
+ v-model="ruleForm.cameraSettings"
|
|
|
+ placeholder="请选择拍照/视频要求"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
<el-option label="是" :value="1"></el-option>
|
|
|
<el-option label="否" :value="0"></el-option>
|
|
|
</el-select>
|
|
|
@@ -110,8 +151,7 @@
|
|
|
v-model="ruleForm.remark"
|
|
|
maxlength="300"
|
|
|
show-word-limit
|
|
|
- >
|
|
|
- </el-input>
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
</el-form>
|
|
|
@@ -125,15 +165,6 @@
|
|
|
import mapValue from './mapValue.vue';
|
|
|
export default {
|
|
|
components: { mapValue },
|
|
|
- props: {
|
|
|
- params: {
|
|
|
- type: Object
|
|
|
- },
|
|
|
- isAdd: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- }
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
ruleForm: {
|
|
|
@@ -149,6 +180,13 @@ export default {
|
|
|
cameraSettings: '',
|
|
|
remark: ''
|
|
|
},
|
|
|
+ periodValue: [],
|
|
|
+ timePeriod: [
|
|
|
+ {
|
|
|
+ startTime: '',
|
|
|
+ endTime: ''
|
|
|
+ }
|
|
|
+ ],
|
|
|
rules: {
|
|
|
communityId: [this.$valid.inputRequired('社区名称')],
|
|
|
routeName: [this.$valid.inputRequired('巡更路线名称')],
|
|
|
@@ -166,21 +204,41 @@ export default {
|
|
|
'ruleForm.communityId'(e) {
|
|
|
this.getPoint(e);
|
|
|
},
|
|
|
- 'ruleForm.periodValue'(e) {
|
|
|
- console.log(e);
|
|
|
+ periodValue(e) {
|
|
|
+ this.ruleForm.periodValue = e.join();
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
//保存
|
|
|
addEdit() {
|
|
|
- this.$refs.ruleForm.validate((valid) => {
|
|
|
- console.log(this.ruleForm);
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
if (valid) {
|
|
|
- let url = '/sc-community/assets/community/add';
|
|
|
- let params = this.ruleForm;
|
|
|
- if (!this.isAdd) {
|
|
|
- url = '/sc-community/assets/community/update';
|
|
|
- }
|
|
|
+ let url = '/sc-community/patrolRoute/add';
|
|
|
+ this.ruleForm;
|
|
|
+ let dotArr = arr => {
|
|
|
+ let dotObj = [];
|
|
|
+ arr.map((item, index) => {
|
|
|
+ dotObj.push({
|
|
|
+ pointId: item,
|
|
|
+ order: index
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return dotObj;
|
|
|
+ };
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ communityId: this.ruleForm.communityId,
|
|
|
+ routeName: this.ruleForm.routeName,
|
|
|
+ routePointRelationDtos: dotArr(this.ruleForm.routePointRelationDtos),
|
|
|
+ startDate: this.ruleForm.startDate,
|
|
|
+ endDate: this.ruleForm.endDate,
|
|
|
+ timePeriod: this.ruleForm.timePeriod,
|
|
|
+ periodType: this.ruleForm.periodType,
|
|
|
+ periodValue: this.ruleForm.periodValue,
|
|
|
+ positioningDistance: this.ruleForm.positioningDistance,
|
|
|
+ cameraSettings: this.ruleForm.cameraSettings,
|
|
|
+ remark: this.ruleForm.remark
|
|
|
+ };
|
|
|
this.$http
|
|
|
.post(url, params)
|
|
|
.then(({ status, msg }) => {
|
|
|
@@ -195,23 +253,6 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- getDetails(id) {
|
|
|
- let url = '/sc-community/assets/community/find/' + id;
|
|
|
- this.$http
|
|
|
- .get(url)
|
|
|
- .then(({ data, status, msg }) => {
|
|
|
- if (0 === status) {
|
|
|
- this.ruleForm = data;
|
|
|
- this.regionId = [data.provinceId, data.cityId, data.regionId];
|
|
|
- this.ruleForm.companyOrgId = data.beCompanyOrgId;
|
|
|
- // this.companyOrgId = [null, null, data.companyOrgId];
|
|
|
- // this.deptOrgId = [null, null, data.deptOrgId];
|
|
|
- } else {
|
|
|
- this.$message.error(msg);
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- },
|
|
|
effectiveDateToggle(va) {
|
|
|
let arr = va;
|
|
|
if (!arr) {
|
|
|
@@ -220,11 +261,8 @@ export default {
|
|
|
this.ruleForm.startDate = arr[0];
|
|
|
this.ruleForm.endDate = arr[1];
|
|
|
},
|
|
|
- handlePeriodValue(e) {
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
close() {
|
|
|
- this.$emit('clerOwnerStatus');
|
|
|
+ this.$emit('initPage');
|
|
|
},
|
|
|
getPoint(id) {
|
|
|
this.$http.get('/sc-community/patrol/point/getPointList', { id, id }).then(({ data, status, msg }) => {
|
|
|
@@ -235,13 +273,25 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
this.targetData = this.$refs.transferTude.targetData;
|
|
|
});
|
|
|
+ },
|
|
|
+ addTime(inx, sun) {
|
|
|
+ if (sun > 0) {
|
|
|
+ this.timePeriod.push({ startTime: '', endTime: '' });
|
|
|
+ } else {
|
|
|
+ this.timePeriod.splice(inx, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ timeChange(itm, str) {
|
|
|
+ if (!!itm['endTime'] && !!itm['startTime']) {
|
|
|
+ let TimeArr = [];
|
|
|
+ this.timePeriod.map((item, index) => {
|
|
|
+ TimeArr.push(`${item.startTime}-${item.endTime}`);
|
|
|
+ });
|
|
|
+ this.ruleForm.timePeriod = TimeArr.join();
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
- created() {
|
|
|
- if (!!this.params && !!this.params.id) {
|
|
|
- this.getDetails(this.params.id);
|
|
|
- }
|
|
|
- }
|
|
|
+ created() {}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
@@ -279,5 +329,18 @@ export default {
|
|
|
cursor: pointer;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
+ .timeList {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &:nth-last-child() {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.width50 {
|
|
|
+ width: calc(50% - 40px);
|
|
|
+ & + span {
|
|
|
+ margin: 0 3px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
DESKTOP-4G80JF4\long