" +
imgHeader +
"
" +
name +
"
证件号码：" +
idCardNo +
"
"); var info = document.createElement("div"); info.className = "content-window-card"; //可以通过下面的方式修改自定义窗体的宽高 info.style.width = "400px"; // 定义内容 var middle = document.createElement("div"); middle.className = "info-middle"; middle.innerHTML = content; info.appendChild(middle); //定义详情 var detail = document.createElement("div"); detail.className = "detail-div"; info.appendChild(detail); //定义关闭按钮 var detail = document.createElement("div"); detail.className = "close-div"; var a = document.createElement("a"); a.innerHTML = "x"; // a.style.marginLeft = '95px'; a.onclick = () => { this.state.map.clearInfoWindow(); }; detail.appendChild(a); info.appendChild(detail); //定义三个调度按钮 var top = document.createElement("div"); top.className = "info-button"; var button1 = document.createElement("span"); button1.className = "button"; button1.innerHTML = "文字调度"; button1.onclick = () => { this.character(data); }; var button2 = document.createElement("span"); button2.className = "button"; button2.innerHTML = "语音调度"; button2.onclick = () => { this.voice(data); }; var button3 = document.createElement("span"); button3.className = "button"; button3.innerHTML = "视频调度"; button3.onclick = () => { this.video([data]); }; top.appendChild(button1); top.appendChild(button2); top.appendChild(button3); info.appendChild(top); // 定义底部内容 var bottom = document.createElement("div"); bottom.className = "info-bottom"; bottom.style.position = "relative"; bottom.style.top = "-1px"; bottom.style.margin = "0 auto"; var sharp = document.createElement("img"); sharp.src = "https://webapi.amap.com/images/sharp.png"; bottom.appendChild(sharp); info.appendChild(bottom); return info; } //定义事件信息窗体 createEventInfoWindow(data) { const { name, time, describe } = data; var content = []; content.push( "
" +
name +
"
" +
describe +
"
"); var info = document.createElement("div"); info.className = "content-window-card"; //可以通过下面的方式修改自定义窗体的宽高 info.style.width = "200px"; // 定义内容 var middle = document.createElement("div"); middle.className = "info-middle"; middle.innerHTML = content; info.appendChild(middle); //定义详情 var detail = document.createElement("div"); detail.className = "detail-div"; info.appendChild(detail); //定义关闭按钮 var detail = document.createElement("div"); detail.className = "close-div"; var a = document.createElement("a"); a.innerHTML = "x"; // a.style.marginLeft = '95px'; a.onclick = () => { this.state.map.clearInfoWindow(); }; detail.appendChild(a); info.appendChild(detail); var top = document.createElement("div"); top.className = "info-button"; info.appendChild(top); // 定义底部内容 var bottom = document.createElement("div"); bottom.className = "info-bottom"; bottom.style.position = "relative"; bottom.style.top = "-1px"; bottom.style.margin = "0 auto"; var sharp = document.createElement("img"); sharp.src = "https://webapi.amap.com/images/sharp.png"; bottom.appendChild(sharp); info.appendChild(bottom); return info; } //驻勤点的信息窗体 createAttendanceInfoWindow(data) { const { name, taskAddress, idCardNo, perNum, mobilePhone, taskName } = data; var content = []; content.push( "
" +
taskName +
"
负责人：" +
name +
"
手机号码：" +
mobilePhone +
"
证件号码：" +
idCardNo +
"
地址：" +
taskAddress +
"
保安员数量：" +
perNum +
"名
"); var info = document.createElement("div"); info.className = "content-window-card"; //可以通过下面的方式修改自定义窗体的宽高 info.style.width = "300px"; // 定义内容 var middle = document.createElement("div"); middle.className = "info-middle"; middle.innerHTML = content; info.appendChild(middle); //定义详情 var detail = document.createElement("div"); detail.className = "detail-div"; info.appendChild(detail); //定义关闭按钮 var detail = document.createElement("div"); detail.className = "close-div"; var a = document.createElement("a"); a.innerHTML = "x"; a.onclick = () => { this.state.map.clearInfoWindow(); }; detail.appendChild(a); info.appendChild(detail); //定义三个调度按钮 var top = document.createElement("div"); top.className = "info-button"; var button1 = document.createElement("span"); button1.className = "button"; button1.innerHTML = "保安人员位置详情"; button1.onclick = () => { this.state.map.clearInfoWindow(); this.setState({ selectedAttenData: data }); }; button1.style.borderRight = "unset"; button1.style.background = "#50aaf7"; button1.style.color = "#ffffff"; top.appendChild(button1); info.appendChild(top); // 定义底部内容 var bottom = document.createElement("div"); bottom.className = "info-bottom"; bottom.style.position = "relative"; bottom.style.top = "-1px"; bottom.style.margin = "0 auto"; var sharp = document.createElement("img"); sharp.src = "https://webapi.amap.com/images/sharp.png"; bottom.appendChild(sharp); info.appendChild(bottom); return info; } //人员详细信息事件 detail(perId) { this.setState({ showDetail: true, personPerId: perId }); } getMessageList(conversationID) { const { nextReqMessageID, currentMessageList } = this.props; tim .getMessageList({ conversationID, nextReqMessageID, count: 15 }) .then(imReponse => { // 更新messageID，续拉时要用到 this.props.dispatch({ type: "im/updateCurrentConversationCont", payload: { nextReqMessageID: imReponse.data.nextReqMessageID, isCompleted: imReponse.data.isCompleted, currentMessageList: [ ...imReponse.data.messageList, ...currentMessageList ] // 更新当前消息列表，从头部插入 } }); }); } //视频调度（单人与多人） video(info = [], schedulingName = "个人") { //输入人员信息，调度名称 const Members = []; info.map(item => { Members.push(item.mobilePhone); }); const Room_No = Math.round(new Date() / 1000); this.setState({ Room_No, MemberList: Members.join(",") }); sendVideoRoomMsg({ Room_No, //房间号 MemberList: Members.join(","), //所有调度成员 Yardman_Name: this.props.comName, //本人的公司名 Yardman_Task_Name: schedulingName, //调度任务名称 Yardman_Task_Explain: "" //调度任务说明(视频的时候不用填) }).then(res => { if (res.retType === "0") { this.state.map.clearInfoWindow(); this.setState({ createTaskStatus: false, //关掉任务创建页面 videoStatus: true //把视频页面打开 }); } }); } //文字调度事件（单人） character(info) { //添加会话（单人对单人） tim.getConversationProfile(`C2C${info.mobilePhone}`).then(({ data }) => { // 3.1 更新当前会话 this.props.dispatch({ type: `im/updateCurrentConversation`, payload: data.conversation }); this.setState({ conversationID: `C2C${info.mobilePhone}`, imStatus: true, selectedData: info, //这个会把搜索列表的红标记去掉 needCreateConversation: true }); // 3.2 获取消息列表 this.getMessageList(data.conversation.conversationID); return Promise.resolve(); },err=>{ // message.error(err.toString()) }) this.state.map.clearInfoWindow(); } //文字调度（多人，先创建群组） createGroup() { const Members = []; const memberList = []; Members.push(this.props.adminPhone + "admin"); this.state.selectedPoints.map(item => { Members.push(item.mobilePhone); memberList.push({ userID: item.mobilePhone + "" }); }); let options = { name: this.state.schedulingName, type: TIM.TYPES.GRP_PRIVATE, memberList }; tim .createGroup(options) .then(info => { //创建成功之后，往里面发送一条消息 this.sendTextMessage(info.data.group.groupID); this.setState({ selectedPointsStatus: false }); //关闭调度的窗口 }) .catch(err => { console.log(err); }); } //语音调度（单人）单人的就是打开会话，然后调用录音 voice(data) { this.setState({ onlyPersonVoiceStatus: true, selectedData: data }); this.state.map.clearInfoWindow(); } //语音调度（多人）,//先创建一个群，录完音，在这个会话中发送该录音 voiceGroup(url, time) { const memberList = []; this.state.selectedPoints.map(item => { memberList.push({ userID: item.mobilePhone + "" }); }); let options = { name: this.state.schedulingName, type: TIM.TYPES.GRP_PRIVATE, memberList }; tim .createGroup(options) .then(info => { //创建成功之后，往里面发送一条消息 this.sendCustomMessage( info.data.group.groupID, url, time, TIM.TYPES.CONV_GROUP ); this.state.map.remove([this.state.overlays]); this.state.map.clearInfoWindow(); this.setState({ showRecord: false, selectedPointsStatus: false }); }) .catch(err => { console.log(err); }); } //发送文字消息 sendTextMessage(groupID) { const messageData = tim.createTextMessage({ to: groupID, conversationType: TIM.TYPES.CONV_GROUP, //群组调度 payload: { text: this.state.schedulingContent } }); tim .sendMessage(messageData) .then(res => { //获取当前的会话 this.getCurrentConvarsation(groupID); }) .catch(err => { message.error("发送失败"); }); } //发送自定义消息 sendCustomMessage(groupID, url, time, type) { const content = { url, time }; const messageSound = tim.createCustomMessage({ to: groupID, conversationType: type, payload: { data: "Sound", // 用于标识该消息是音频类型消息 description: "[语音]", // 获取音频路径 extension: JSON.stringify(content) } }); tim .sendMessage(messageSound) .then(res => { if (type === TIM.TYPES.CONV_GROUP) { //获取群组当前的会话 this.getCurrentConvarsation(groupID); } else { //获取个人当前的会话 this.getMessageList(res.data.message.conversationID); } }) .catch(err => { message.error("发送失败"); }); } //获取当前的会话 getCurrentConvarsation(groupID) { tim.getConversationProfile(`GROUP${groupID}`).then(({ data }) => { console.log(data); // 3.1 更新当前会话 this.props.dispatch({ type: `im/updateCurrentConversation`, payload: data.conversation }); this.setState({ createTaskStatus: false, imStatus: true, conversationID: "GROUP" + groupID }); //打开im的会话框 // 3.2 获取消息列表 this.getMessageList(data.conversation.conversationID); return Promise.resolve(); }); } //获取当前会话的消息列表 getMessageList(conversationID) { const { nextReqMessageID, currentMessageList } = this.props; tim .getMessageList({ conversationID, nextReqMessageID, count: 15 }) .then(imReponse => { // 更新messageID，续拉时要用到 this.props.dispatch({ type: "im/updateCurrentConversationCont", payload: { nextReqMessageID: imReponse.data.nextReqMessageID, isCompleted: imReponse.data.isCompleted, currentMessageList: [ ...imReponse.data.messageList, ...currentMessageList ] // 更新当前消息列表，从头部插入 } }); }); } /******************************相关事件******************************/ render() { const { getFieldDecorator } = this.props.form; return (
{/* 驻勤点的搜索框 */}
{this.state.map && (
{
//对驻勤点进行打点
this.markerAttendanceList(attendanceList);
this.setState({
selectedAttenData: null
});
}}
attenPersonList={attenPersonList => {
//对人员进行打点
this.setState({
attenPersonList
});
if (attenPersonList.length === 0) {
this.setState({
selectedAttenData: null
});
}
this.markerAttenPersonList(attenPersonList);
}}
onClickSearchPerson={(clickPersonData, index) => {
const markers = this.state.attenPersonMarkers;
markers.map((item, i) => {
if (i === index) {
markers[index].setContent(
' {
this.markPersonList(personList, where);
this.setState({ personList });
}}
onClickPerson={(e, index) => {
//这是搜索列表中点击到的
const markers = this.state.personMarkers;
markers.map((item, i) => {
if (e.perId === item.w.key) {
markers[i].setContent(
' {
this.setState({
paintValue: e
});
this.state.map.clearInfoWindow();
switch (e) {
case "circle":
this.state.mouseTool.circle({
fillColor: "#00b0ff",
strokeColor: "#80d8ff"
});
break;
case "rectangle":
this.state.mouseTool.rectangle({
fillColor: "#00b0ff",
strokeColor: "#80d8ff"
});
break;
case "polygon":
this.state.mouseTool.polygon({
fillColor: "#00b0ff",
strokeColor: "#80d8ff"
});
break;
case "cancel":
this.state.mouseTool.close(true);
break;
}
}}
paintValue={this.state.paintValue}
/>
{/* 打开会话按钮 */}
{
this.setState({ imStatus: !this.state.imStatus });
this.state.map.clearInfoWindow();
}}
style={{ fontSize: "30px", color: "#4285EC" }}
/>
{/* 地图切换 */}
{
this.switchMap(value);
}}
/>
{
this.setState({ selectedPointsStatus: false });
this.state.map.remove([this.state.overlays]);
}}
footer={[
共选中{this.state.selectedPoints.length}人
,
,
,
]}
>
{this.state.selectedPoints.map((item, index) => {
return (
{/* 调度任务创建 */}
{
this.setState({ createTaskStatus: false });
this.state.map.remove([this.state.overlays]);
}}
footer={
//语音调度的时候，不需要取消、开始调度按钮
this.state.dispatchType === "voice"
? ""
: [
,
]
}
>
{getFieldDecorator("schedulingName", {
rules: [
{
required: true,
message: "请输入调度任务名称"
}
]
})(
{
this.setState({
schedulingName: e.target.value
});
}}
>
)}
{/* 如果是文字调度，需要填调度任务内容 */}
{this.state.dispatchType === "text" ? (
{getFieldDecorator("schedulingContent", {
rules: [
{
required: true,
message: "请输入调度任务内容"
}
]
})(
"
);
let infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.createInfoWindow(clickPersonData),
offset: new AMap.Pixel(16, -45)
});
infoWindow.open(
this.state.map,
markers[index].getPosition()
);
} else {
markers[i].setContent(
'"
);
}
});
this.setState({
attenPersonMarkers: markers
});
this.state.map.setCenter([
clickPersonData.lnglat[0],
clickPersonData.lnglat[1]
]);
}}
onClickSelectedAttenData={(selectedAttenList, index) => {
if (!selectedAttenList.lnglat) {
return message.warning("该驻勤点暂未有经纬度信息");
}
if (selectedAttenList) {
let infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.createAttendanceInfoWindow(selectedAttenList),
offset: new AMap.Pixel(16, -45)
});
infoWindow.open(this.state.map, selectedAttenList.lnglat);
this.state.map.setCenter(selectedAttenList.lnglat);
}
}}
clickEventIndex={this.state.clickEventIndex}
eventList ={(eventList) => {
this.markerEventList(eventList);
}}
onClickEventData={(eventData, index) => {
const markers = this.state.eventMarkers;
markers.map((item, i) => {
if (i === index) {
markers[index].setContent(
'
"
);
let infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.createEventInfoWindow(eventData),
offset: new AMap.Pixel(16, -45)
});
infoWindow.open(
this.state.map,
markers[index].getPosition()
);
} else {
markers[i].setContent(
'"
);
}
});
this.setState({
eventMarkers: markers,
clickEventIndex: index
});
this.state.map.setCenter(eventData.lnglat);
// if (eventData) {
// let infoWindow = new AMap.InfoWindow({
// isCustom: true, //使用自定义窗体
// content: this.createEventInfoWindow(eventData),
// offset: new AMap.Pixel(16, -45)
// });
// infoWindow.open(this.state.map, eventData.lnglat);
// this.state.map.setCenter(eventData.lnglat);
// }
}}
/>
)}
{/* 人员的搜索框 */}
"
);
let infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: this.createInfoWindow(e),
offset: new AMap.Pixel(16, -45)
});
infoWindow.open(
this.state.personMap,
markers[i].getPosition()
);
} else {
markers[i].setContent(
'"
);
}
});
this.setState({
personMarkers: markers
});
this.state.personMap.setCenter([e.lnglat[0], e.lnglat[1]]);
}}
markesBeiJing={() => {
//驻点北京
var marker = new AMap.Marker({
position: new AMap.LngLat(116.344081, 39.940512) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.setState({
beijingMarkers: marker
});
this.state.map.add(marker);
this.state.map.setFitView(marker);
}}
markesGaoQi={() => {
//驻点高崎
var marker = new AMap.Marker({
position: new AMap.LngLat(118.12902, 24.533153) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
this.setState({
gaoqiMarkers: marker
});
this.state.map.add(marker);
this.state.map.setCenter([118.12902, 24.533153]);
}}
beijingVideo={value => {
this.setState({
beijingVideo: value
});
}}
/>
{/* 绘制矢量图 */}
{item.photoUrl ? (
) : (
{item.name
? item.name.substring(
item.name.length - 2,
item.name.length
)
: ""}
)}
{item.name}
手机号：{item.mobilePhone}
证件号码：{item.idCardNo}
{this.state.selectedPoints.map((item, index) => {
return (
);
})}
{item.photoUrl ? (
) : (
{item.name
? item.name.substring(
item.name.length - 2,
item.name.length
)
: ""}
)}
{item.name}