epmet pc工作端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

603 lines
23 KiB

<template>
<div class="">
<el-form ref="ref_form_demand" :inline="false" :model="formData" :rules="dataRule" label-width="100px">
<!-- <el-form-item label="事件分类"
label-width="150px"
prop="categoryId">
<el-cascader class="cell-width-2"
ref="myCascader"
v-model="selCategoryArray"
:key="iscascaderShow"
:options="casOptions"
:props="optionProps"
:show-all-levels="false"
@change="handleChangeCate"></el-cascader>
</el-form-item> -->
<el-form-item label="服务内容" label-width="150px" :class="{ 'form-item': source === 'visiual' }" prop="content">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input v-model="formData.content" :autosize="{ minRows: 2, maxRows: 10 }" type="textarea" clearable
class="cell-width-area" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="服务类型" label-width="150px" :class="{ 'form-item': source === 'visiual' }"
prop="categoryCode">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-cascader v-model="formData.categoryCode" :options="demandOptions" clearable class="cell-width-1"
@change="handleCateSlect"></el-cascader>
</div>
</el-form-item>
<el-form-item label="服务时间" label-width="150px" :class="{ 'form-item': source === 'visiual' }"
prop="wantServiceTime">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-date-picker v-model="formData.wantServiceTime" type="datetime" class="cell-width-1" clearable
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="需求人" label-width="150px" :class="{ 'form-item': source === 'visiual' }"
prop="demandUserName">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input v-model="formData.demandUserName" class="cell-width-1"></el-input>
</div>
</el-form-item>
<el-form-item label="联系电话" label-width="150px" :class="{ 'form-item': source === 'visiual' }"
prop="demandUserMobile">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input v-model="formData.demandUserMobile" class="cell-width-1"></el-input>
</div>
</el-form-item>
<el-form-item label="服务地点" prop="serviceLocation" :class="{ 'form-item': source === 'visiual' }"
label-width="150px" style="display: block">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input class="cell-width-1" v-model="formData.serviceLocation">
</el-input>
</div>
</el-form-item>
<el-form-item label="位置坐标" :class="{ 'form-item': source === 'visiual' }" prop="longitude" label-width="150px"
style="display: block">
<div style="width:500px">
<div class="div_map">
<div id="app_map">
</div>
<div class="div_searchmap">
<el-input class="cell-width-map" maxlength="50" size="mini" placeholder="请输入关键字"
v-model="keyWords">
</el-input>
<el-button style="margin-left: 10px" type="primary" size="mini"
@click="handleSearchMap">查询</el-button>
</div>
</div>
<!-- <div style="margin-top: 10px">
<span>经度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="formData.longitude">
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="formData.latitude">
</el-input>
</div> -->
</div>
</el-form-item>
<el-form-item label="门牌号" :class="{ 'form-item': source === 'visiual' }" label-width="150px"
prop="locationDetail">
<div :class="{ 'visiual-form': source === 'visiual' }">
<el-input v-model="formData.locationDetail" class="cell-width-1"></el-input>
</div>
</el-form-item>
<el-form-item label="服务方" :class="{ 'form-item': source === 'visiual' }" label-width="150px" prop="serverId">
<template>
<div :class="[{ 'single-select': source === 'visiual' }, 'sel-service']">
<el-select v-model="formData.serviceType" class="cell-width-1" placeholder="请选择" clearable
@change="handleServiceChange('add', $event)">
<el-option v-for="item in serviceOptions" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
-
<el-select v-model="formData.serverId" class="cell-width-1" filterable placeholder="请选择" clearable>
<el-option v-for="item in serviceOptiondList" :key="item.id" :label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
</template>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
let loading; // 加载动画
var map
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
function iniFmData() {
return {
operationType: '2',//处理方式[0:已回复 1:已转项目 2:已转服务]
icEventId: '',//事件Id
gridId: '',//
categoryCode: '',// 二级服务分类编码
parentCode: '',// 父级服务分类编码
content: '',// 服务内容1000字
reportType: 'self_help',// 社区帮办:community;楼长帮办:building_caption;党员帮办:party;自身上报:self_help
reportUserName: '',// 上报人姓名
reportUserMobile: '',// 自身上报时存储注册居民的联系电话
reportTime: '',// 上报时间
demandUserId: '',// 需求人:user.id或者ic_resi_user.id
demandUserName: '',// 需求人姓名
demandUserMobile: '',//需求人联系电话
wantServiceTime: '',// 希望服务时间
serviceType: '',
serverId: '',
locationDetail: '',
serviceLocation: '',//事件地址
latitude: '',// 经度
longitude: '',//维度
// categoryId: ''
};
}
export default {
data() {
return {
btnDisable: false,
customerId: localStorage.getItem("customerId"),
demandOptions: [],
serviceOptions: [
],
serviceOptiondList: [],
// casOptions: [],
iscascaderShow: 0,
// selCategoryArray: [],
// selCateObj: {},
// optionProps: {
// value: "id",
// label: "categoryName",
// children: "children",
// level: 'categoryType',
// checkStrictly: true
// },
formData: iniFmData(),
okflag: false,
//地图相关
keyWords: '',
eventDetailCopy: {}
};
},
components: {},
computed: {
dataRule() {
return {
// categoryId: [
// { required: true, message: "请填写事件分类", trigger: "blur" },
// ],
content: [
{ required: true, message: "服务内容不能为空", trigger: "blur" },
],
categoryCode: [
{ required: true, message: "服务类型不能为空", trigger: "blur" },
],
wantServiceTime: [
{ required: true, message: "服务时间不能为空", trigger: "blur" },
],
demandUserName: [
{ required: true, message: "需求人不能为空", trigger: "blur" },
],
demandUserMobile: [
{ required: true, message: "联系电话不能为空", trigger: "blur" },
],
serviceLocation: [
{ required: true, message: "服务地点不能为空", trigger: "blur" },
],
serverId: [
{ required: true, message: "服务方不能为空", trigger: "blur" },
],
};
},
},
props: {
demandUserId: {
type: String,
default: "",
},
demandUserName: {
type: String,
default: "",
},
demandUserMobile: {
type: String,
default: "",
},
eventId: {
type: String,
default: "",
},
eventDetailData: {
type: Object,
default() {
return {}
}
},
transferObj: {
type: Object,
default() {
return {}
}
},
source: {//展示来源:manage 管理平台 visiual 可视化平台
type: String,
default: 'manage'
}
},
watch: {
demandUserName: function (val) {
this.formData.reportUserName = val
this.formData.demandUserName = val
},
demandUserMobile: function (val) {
this.formData.reportUserMobile = val
this.formData.demandUserMobile = val
},
"transferObj.longitude": {
handler(newVal, oldVal) {
this.$nextTick(() => {
map.setCenter(new TMap.LatLng(this.transferObj.latitude, this.transferObj.longitude))
})
},
immediate: true // 页面加载立即执行
},
demandUserId: function (val) {
this.formData.demandUserId = val
},
},
created() { },
async mounted() {
const { user } = this.$store.state
this.agencyId = user.agencyId
// this.getCategoryList();
this.getDemandOptions();
this.getServiceOption()
this.initMap()
if (this.eventId) {
this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData));
this.formData.reportUserMobile = this.eventDetailCopy.mobile
this.formData.reportUserName = this.eventDetailCopy.name
this.formData.reportTime = this.eventDetailCopy.happenTime
this.formData.gridId = this.eventDetailCopy.gridId
this.formData.demandUserId = this.eventDetailCopy.reportUserId
this.formData.demandUserName = this.eventDetailCopy.name
this.formData.demandUserMobile = this.eventDetailCopy.mobile
} else {
this.formData.demandUserName = this.demandUserName
this.formData.demandUserMobile = this.demandUserMobile
this.formData.demandUserId = this.demandUserId
}
},
methods: {
// async getCategoryList() {
// const url = '/governance/icEvent/getCategoryTree';
// let params = {};
// const { data, code, msg } = await requestPost(url, params);
// if (code === 0) {
// let treeDataNew = this.deepTree(data, "children");
// //组织级联数据
// ++this.iscascaderShow;
// this.casOptions = [];
// this.casOptions = treeDataNew;
// } else {
// this.$message.error(msg);
// }
// if (this.eventDetailCopy.parentCategoryId) {
// const pids = this.eventDetailCopy.parentCategoryId.split(',');
// pids.push(this.eventDetailCopy.categoryId);
// let nodes = this.casOptions;
// for (let i = 0; i < pids.length; i++) {
// nodes = this.buildNode(nodes, pids[i])
// }
// if (nodes) {
// this.formData.categoryList.push(nodes)
// }
// }
// },
// buildNode(nodes, treeId) {
// for (let i = 0; i < nodes.length; i++) {
// if (nodes[i].id === treeId) {
// if (nodes[i].children) {
// return nodes[i].children
// } else {
// return nodes[i]
// }
// }
// }
// },
// handleChangeCate(value) {
// if (this.selCateObj = this.$refs['myCascader'].getCheckedNodes()[0]) {
// this.selCateObj = this.$refs['myCascader'].getCheckedNodes()[0].data
// this.formData.categoryList = this.selCateObj
// } else {
// this.selCateObj = {}
// }
// if (!value) return
// this.selCategoryArray = value
// },
//重构树,去除网格
// deepTree(arr, children) {
// if (Array.isArray(arr) && arr.length > 0) {
// return arr.map((item) => {
// return {
// ...item,
// [children]:
// (item[children] &&
// item[children].length > 0 &&
// this.deepTree(item[children], children)) ||
// null,
// };
// });
// }
// },
async getDemandOptions() {
const url = "/governance/icresidemanddict/demandoption"
let params = {}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.demandOptions = this.getFlagData(
this.getTreeData(data),
"usableFlag"
);
} else {
this.$message.error(msg)
}
},
async getServiceOption() {
const url = "/sys/dict/data/dictlist"
let params = { dictType: "user_demand_service_type", }
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.serviceOptions = data;
} else {
this.$message.error(msg)
}
},
getTreeData(data) {
if (!Array.isArray(data)) return [];
let arr = data.map((item) => {
let _item = {};
if (item.children) {
if (item.children.length === 0)
_item = { ...item, children: undefined };
else _item = { ...item, children: this.getTreeData(item.children) };
} else {
_item = { ...item };
}
return _item;
});
return arr;
},
getFlagData(data, flag) {
if (!Array.isArray(data)) return [];
let arr1 = data.filter((item) => item[flag]);
let arr2 = arr1.map((item) => {
if (item.children)
return { ...item, children: this.getFlagData(item.children, flag) };
else return item;
});
// console.log('arrr-oppp', arr2)
return arr2;
},
handleCateSlect(val) {
if (val.length === 1) {
this.demandOptions.forEach((item) => {
if (item.value == val[0]) this.formData.parentCode = item.pvalue;
});
this.formData.categoryCode = val[0];
} else {
this.formData.parentCode = val[0];
this.formData.categoryCode = val[1];
}
},
async handleServiceChange(serverOrgType, val) {
if (!val) return false;
if (this.formData.categoryCode == "") {
this.$message.error("请先选择服务类型!");
return;
}
const url = "/actual/base/serviceitem/listServerOrg";
let params = {
serviceTypeId: this.formData.categoryCode,
serverOrgType: val,
businessType: "resi_service",
};
let { data, code, msg } = await requestPost(url, params);
if (code == 0) {
this.serviceOptiondList = data;
} else if (code >= 8000) {
this.$message.error(msg);
}
},
async getServiceuserList(serviceType) {
if (!serviceType) return false;
const { demandUserId } = this.formData;
const params = {
serviceName: this.formData.categoryCode,
serviceType: serviceType,
queryPurpose: 'query',
};
const url = "/governance/userdemand/servicelist"
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.serviceOptiondList = data.filter(
(item) => item.value != demandUserId
);
} else {
this.$message.error(msg)
}
},
async getDemandInfo() {
this.okflag = false
this.$refs["ref_form_demand"].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj);
// this.formData.categoryId = this.selCateObj.id
} else {
this.okflag = true
}
});
},
resetData() { },
// 地图初始化函数,本例取名为init,开发者可根据实际情况定义
initMap() {
// 定义地图中心点坐标
var center = new window.TMap.LatLng(this.transferObj.latitude || 36.0722275, this.transferObj.longitude || 120.38945519)
// 定义map变量,调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById('app_map'), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45 // 设置地图旋转角度
})
search = new window.TMap.service.Search({ pageSize: 10 })
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: []
})
infoWindowList = Array(10)
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
// 监听地图平移结束
map.on('panend', () => {
this.handleMoveCenter()
})
this.handleMoveCenter()
this.convert()
},
setMarker(lat, lng) {
markers.setGeometries([])
markers.add([
{
id: '4',
styleId: 'marker',
position: new TMap.LatLng(lat, lng),
properties: {
title: 'marker4'
}
}
])
},
handleSearchMap() {
infoWindowList.forEach((infoWindow) => {
infoWindow.close()
})
infoWindowList.length = 0
markers.setGeometries([])
// 在地图显示范围内以给定的关键字搜索地点
search.searchRectangle({
keyword: this.keyWords,
bounds: map.getBounds()
}).then((result) => {
let { data } = result
if (Array.isArray(data) && data.length > 0) {
const {location: { lat, lng } } = data[0]
map.setCenter(new TMap.LatLng(lat, lng))
this.setMarker(lat, lng)
this.formData.latitude = lat
this.formData.longitude = lng
this.convert()
} else {
this.$message.error('未检索到相关位置坐标')
}
})
},
handleMoveCenter() {
//修改地图中心点
const center = map.getCenter()
const lat = center.getLat()
const lng = center.getLng()
this.formData.latitude = lat
this.formData.longitude = lng
this.setMarker(lat, lng)
this.convert(lat, lng)
},
convert(lat, lng) {
markers.setGeometries([]);
// var input = document.getElementById('location').value.split(',');
let location
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
location = new TMap.LatLng(this.formData.latitude, this.formData.longitude);
}
// map.setCenter(location);
markers.updateGeometries([
{
id: 'main', // 点标注数据数组
position: location,
},
]);
// 将给定的坐标位置转换为地址
geocoder.getAddress({ location: location }).then((result) => {
this.formData.serviceLocation = result.result.address
// 显示搜索到的地址
});
},
// 开启加载动画
startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: "正在加载……", // 加载中需要显示的文字
background: "rgba(0,0,0,.7)", // 背景颜色
});
},
// 结束加载动画
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close();
}
},
},
};
</script>
<style lang='scss' scoped >
@import "@/assets/scss/modules/visual/a_customize.scss";
@import "@/assets/scss/modules/shequzhili/event-info.scss";
.el-dialog__body {
padding: 0 10px 20px !important;
}
</style>