From 36b97a66d42d73706bf286cbbb798e79899dfeb2 Mon Sep 17 00:00:00 2001 From: fancy Date: Wed, 1 Jul 2020 21:53:54 +0800 Subject: [PATCH] =?UTF-8?q?IM=E6=B6=88=E6=81=AFweb=E7=AB=AF=E8=A7=A3?= =?UTF-8?q?=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../x_message_assemble_communicate.json | 4 +- .../$Main/default/chattest.html | 79 +++++++- .../$Main/default/icons/location.png | Bin 0 -> 1454 bytes .../x_component_IMV2/$Main/default/style.css | 26 ++- o2web/source/x_component_IMV2/Main.js | 170 +++++++++++------- 5 files changed, 216 insertions(+), 63 deletions(-) create mode 100644 o2web/source/x_component_IMV2/$Main/default/icons/location.png diff --git a/o2web/source/o2_core/o2/xAction/services/x_message_assemble_communicate.json b/o2web/source/o2_core/o2/xAction/services/x_message_assemble_communicate.json index 710e99173d..0a8bb7017f 100644 --- a/o2web/source/o2_core/o2/xAction/services/x_message_assemble_communicate.json +++ b/o2web/source/o2_core/o2/xAction/services/x_message_assemble_communicate.json @@ -12,5 +12,7 @@ "messageListAll": {"uri": "/jaxrs/consume/list/{consume}/count/{count}"}, "messageList": {"uri": "/jaxrs/consume/list/{consume}/currentperson/count/{count}"}, "messageUpdate": {"uri": "/jaxrs/consume/type/{type}", "method": "PUT"}, - "messageUpdateSingle": {"uri": "/jaxrs/consume/{id}/type/{type}"} + "messageUpdateSingle": {"uri": "/jaxrs/consume/{id}/type/{type}"}, + "imgFileDownloadWithWH":{"uri":"/jaxrs/im/msg/download/{id}/image/width/{width}/height/{height}"}, + "imgFileDownload":{"uri":"/jaxrs/im/msg/download/{id}"} } \ No newline at end of file diff --git a/o2web/source/x_component_IMV2/$Main/default/chattest.html b/o2web/source/x_component_IMV2/$Main/default/chattest.html index ff93358cbe..214dccca03 100644 --- a/o2web/source/x_component_IMV2/$Main/default/chattest.html +++ b/o2web/source/x_component_IMV2/$Main/default/chattest.html @@ -133,6 +133,19 @@ text-indent: -12px; } + .chat-sender .img-chat { + width:192px; + height:144px; + display: table-cell; + vertical-align: middle; + } + .chat-sender .img-chat img { + max-width: 100%; + max-height: 100%; + display: block; + margin: auto; + } + .chat-receiver { clear: both; font-size: 80%; @@ -158,6 +171,19 @@ border-radius: 7px; } + .chat-receiver .img-chat { + width:192px; + height:144px; + display: table-cell; + vertical-align: middle; + } + .chat-receiver .img-chat img { + max-width: 100%; + max-height: 100%; + display: block; + margin: auto; + } + .chat-receiver div:first-child img, .chat-sender div:first-child img { width: 40px; @@ -296,6 +322,25 @@ 你被群主移除群聊 +
+
+
麦克
+
+
+
+
+
+
+
麦克
+
+
+
+ +
+ +
+
麦克
@@ -304,6 +349,17 @@ 你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。
+
+
+
麦克
+
+
+ + + 浙江省杭州市西湖区文三路492号 + +
+
@@ -313,6 +369,27 @@ 最后但并非最不重要的是
+ +
+
+
好人·马克思
+
+
+
+ +
+ +
+
+
+
+
好人·马克思
+
+
+
+
你被群主移除群聊 @@ -332,7 +409,7 @@
-
+
diff --git a/o2web/source/x_component_IMV2/$Main/default/icons/location.png b/o2web/source/x_component_IMV2/$Main/default/icons/location.png new file mode 100644 index 0000000000000000000000000000000000000000..d21b730335cfa4ee956e6f90c7f7dff5a3c155fb GIT binary patch literal 1454 zcmV;f1yTBmP)25IyJb4L5qsB{oSvFC;qXXqQYXfPmkbT5i|i_jADdnBwn5Xi8$TUWqR02rqA@uobK&`kkBui-Ba~feN%Pn zoarT;;SZhR`Qt3W>8@a*6{rbu1AwIj%pu@>1}=yJ3HXbFzZv)fz?Ppxl)xWZQZC4{ z9|9q^1GroDVc?);7=yagNgJRp#7G3Z+!l~|lkNMDWl6qiTXUROiRe+)*8rXA6Sr8e<5Ha5wuQAalMih;iz8|+u;^A_6Ff@!W0ZdIS7{**{eEhRs1X=*05bGIO z*(yfBTc(uD)Bs&KdWR_!3bBQO2NeAcrj#Rv0Hn4L(X*E4J>MFjRxV#phOwtxP>!P6 zcD4Flt4-j#&w%;4JZ+>~frAWO)*7JByl{%|kG1|S6ykLT9_j`_z#FEN54YN!aGaqM z(Ke+5hfFEcCSF2b3m_2UAGJqoQFQUtYV~lU0zw=l1+=Z_fkU>E*zt0CrfnF%t9#6n z^1MP?s3yd(1YFW8W`^NKv}4Dg3cvvZuI$=Ez|Xdni9?L%&%ZD<%|BZG82HVW^3q}e z9OrE!x-U6C*s*-SnrI={-Nej~bZsG`*G$h#%>KY}${_L+0L<^$zJGrq0Dn*B0jKYHAM(G!9)uz&)cC2*IYL~u~&k5Zexuo zJ_I+|p4T>F1J|8T%-b25(xS7^l5((D`!u9=j2ZxGpDfW&mgilgtC40GxbBZ&zB;ki zp;D8oKuw5Q1hicnKs07~-oiW(f$MGq^N{Mxz@RPVJ{?W%3QV-ohX59}ZA{=5Q_2-O z0h>0V5E~hIJjG|LCFNpWtxNzl$GMS+J_lg81t9v0>-7;k<#N|*TPv3bsZ?4I=37&e ztTFTLw(o!27l4j?VImp<$0A^in16`dtwi*Fyi{ktE^Z4Zy4C=O7?_rtV20jr878`{ zC+&E6*ba{#jbBh{-Pbdy?>47TpF^XgwG2M`Q>axm6k-tr@qQ@mAz-m7<<_i%nf5@U zmxWkIz*AWRrr9&_qAlgBJX*N{czF2S@W_#!AkurC*eN^aUFM7#^JsMR-%|<@2Rq?7 z<&ts<%bG-;*_onT3bSbBu0S(L>ItozL5``TN>3Uf7OV;JE&)q*^KMMDldswD&Ek`0 zTL=J`%QHj67zZ$*nb3YSiYlahqton>sD_Zt92_n4mdL6M2K zv}HeJPioeLcryNJOZig2qV%l-{YqHXJqvKEKIu+z&iD%a4+otUPw)FjH2?qr07*qo IM6N<$g3%YJYybcN literal 0 HcmV?d00001 diff --git a/o2web/source/x_component_IMV2/$Main/default/style.css b/o2web/source/x_component_IMV2/$Main/default/style.css index 1c671727e5..2bdd8e99c5 100644 --- a/o2web/source/x_component_IMV2/$Main/default/style.css +++ b/o2web/source/x_component_IMV2/$Main/default/style.css @@ -292,7 +292,19 @@ border-radius: 7px; text-indent: -12px; } - + .chat-sender .img-chat { + width:192px; + height:144px; + display: table-cell; + vertical-align: middle; +} +.chat-sender .img-chat img { + max-width: 100%; + max-height: 100%; + display: block; + margin: auto; +} + .chat-receiver { clear: both; /* font-size: 80%; */ @@ -309,6 +321,18 @@ /* font-size: 70%; */ text-align: right; } + .chat-receiver .img-chat { + width:192px; + height:144px; + display: table-cell; + vertical-align: middle; +} +.chat-receiver .img-chat img { + max-width: 100%; + max-height: 100%; + display: block; + margin: auto; +} .chat-receiver div:nth-of-type(3) { /*float:right;*/ diff --git a/o2web/source/x_component_IMV2/Main.js b/o2web/source/x_component_IMV2/Main.js index c3e0dd5fd2..2da9269f4c 100644 --- a/o2web/source/x_component_IMV2/Main.js +++ b/o2web/source/x_component_IMV2/Main.js @@ -15,7 +15,7 @@ MWF.xApplication.IMV2.Main = new Class({ "isResize": true, "isMax": true, "title": MWF.xApplication.IMV2.LP.title, - "conversationId":"" + "conversationId": "" }, onQueryLoad: function () { this.lp = MWF.xApplication.IMV2.LP; @@ -25,15 +25,15 @@ MWF.xApplication.IMV2.Main = new Class({ this.messageList = []; this.emojiList = []; //添加87个表情 - for (var i=1; i < 88; i++) { + for (var i = 1; i < 88; i++) { var emoji = { - "key" : i > 9 ? "["+i+"]" : "[0"+i+"]", - "path" : i > 9 ? "/x_component_IMV2/$Main/emotions/im_emotion_"+i+".png" : "/x_component_IMV2/$Main/emotions/im_emotion_0"+i+".png", + "key": i > 9 ? "[" + i + "]" : "[0" + i + "]", + "path": i > 9 ? "/x_component_IMV2/$Main/emotions/im_emotion_" + i + ".png" : "/x_component_IMV2/$Main/emotions/im_emotion_0" + i + ".png", }; this.emojiList.push(emoji); } }, - onQueryClose: function(){ + onQueryClose: function () { this.closeListening() }, loadApplication: function (callback) { @@ -53,16 +53,16 @@ MWF.xApplication.IMV2.Main = new Class({ }.bind(this)); }, - startListening:function(){ + startListening: function () { this.messageNumber = layout.desktop.message.items.length; //查询ws消息 如果增加 if (this.listener) { clearInterval(this.listener); } - this.listener = setInterval(function(){ + this.listener = setInterval(function () { var newNumber = layout.desktop.message.items.length; //判断是否有新的ws消息 - if(newNumber > this.messageNumber) { + if (newNumber > this.messageNumber) { //查询会话数据 this._checkConversationMessage(); //查询聊天数据 @@ -71,7 +71,7 @@ MWF.xApplication.IMV2.Main = new Class({ } }.bind(this), 1000); }, - closeListening: function() { + closeListening: function () { if (this.listener) { clearInterval(this.listener); } @@ -82,7 +82,7 @@ MWF.xApplication.IMV2.Main = new Class({ var chat = list[i]; var itemNode = this._createConvItemNode(chat); this.conversationNodeItemList.push(itemNode); - if(this.conversationId && this.conversationId == chat.id) { + if (this.conversationId && this.conversationId == chat.id) { this.tapConv(chat); } } @@ -127,18 +127,18 @@ MWF.xApplication.IMV2.Main = new Class({ } }, //点击表情按钮 - showEmojiBox: function() { - if(!this.emojiBoxNode) { + showEmojiBox: function () { + if (!this.emojiBoxNode) { this.emojiBoxNode = new Element("div", { "class": "chat-emoji-box" }).inject(this.chatNode); var _self = this; - for(var i=0; i 0) { + if (list && list.length > 0) { var msg = list[0]; //检查聊天框是否有变化 if (this.conversationId == msg.conversationId) { @@ -282,11 +282,11 @@ MWF.xApplication.IMV2.Main = new Class({ var isnew = true; var m = list[i]; for (var j = 0; j < this.messageList.length; j++) { - if(this.messageList[j].id == m.id) { + if (this.messageList[j].id == m.id) { isnew = false; } } - if(isnew) { + if (isnew) { this.messageList.push(m); this._buildMsgNode(m, false); // this._refreshConvMessage(m); @@ -294,7 +294,7 @@ MWF.xApplication.IMV2.Main = new Class({ } } } - + }.bind(this), function (error) { console.log(error); }.bind(this), false); @@ -333,17 +333,35 @@ MWF.xApplication.IMV2.Main = new Class({ //text if (msgBody.type == "emoji") { // 表情 var img = ""; - for (var i=0; i< this.emojiList.length; i++) { - if (msgBody.body == this.emojiList[i].key) { + for (var i = 0; i < this.emojiList.length; i++) { + if (msgBody.body == this.emojiList[i].key) { img = this.emojiList[i].path; - } + } } - new Element("img", {"src": img, "class": "chat-content-emoji"}).inject(lastNode); - }else {//text + new Element("img", { "src": img, "class": "chat-content-emoji" }).inject(lastNode); + } else if (msgBody.type == "image") {//image + var imgBox = new Element("div", { "class": "img-chat" }).inject(lastNode); + var url = this._getFileUrlWithWH(msgBody.fileId, 144, 192); + new Element("img", { "src": url }).inject(imgBox); + imgBox.addEvents({ + "click": function(e){ + var downloadUrl = this._getFileDownloadUrl(msgBody.fileId); + window.open(downloadUrl); + }.bind(this) + }); + } else if (msgBody.type == "audio") { + var url = this._getFileDownloadUrl(msgBody.fileId); + new Element("audio", { "src": url, "controls":"controls", "preload":"preload" }).inject(lastNode); + } else if (msgBody.type == "location") { + var mapBox = new Element("span").inject(lastNode); + new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width":24, "height":24 }).inject(mapBox); + var url = this._getBaiduMapUrl(msgBody.latitude, msgBody.longitude, msgBody.address, msgBody.addressDetail); + new Element("a", {"href":url, "target":"_blank", "text": msgBody.address}).inject(mapBox); + } else {//text new Element("span", { "text": msgBody.body }).inject(lastNode); } - if(!isTop) { + if (!isTop) { var scrollFx = new Fx.Scroll(this.chatContentNode); scrollFx.toBottom(); } @@ -366,24 +384,63 @@ MWF.xApplication.IMV2.Main = new Class({ var nameNode = new Element("div", { "text": name }).inject(receiverBodyNode); var lastNode = new Element("div").inject(receiverBodyNode); var lastFirstNode = new Element("div", { "class": "chat-right_triangle" }).inject(lastNode); - + if (msgBody.type == "emoji") { // 表情 var img = ""; - for (var i=0; i< this.emojiList.length; i++) { - if (msgBody.body == this.emojiList[i].key) { + for (var i = 0; i < this.emojiList.length; i++) { + if (msgBody.body == this.emojiList[i].key) { img = this.emojiList[i].path; - } + } } - new Element("img", {"src": img, "class": "chat-content-emoji"}).inject(lastNode); - }else {//text + new Element("img", { "src": img, "class": "chat-content-emoji" }).inject(lastNode); + } else if (msgBody.type == "image") {//image + var imgBox = new Element("div", { "class": "img-chat" }).inject(lastNode); + var url = this._getFileUrlWithWH(msgBody.fileId, 144, 192); + new Element("img", { "src": url }).inject(imgBox); + imgBox.addEvents({ + "click": function(e){ + var downloadUrl = this._getFileDownloadUrl(msgBody.fileId); + window.open(downloadUrl); + }.bind(this) + }); + } else if (msgBody.type == "audio") { + var url = this._getFileDownloadUrl(msgBody.fileId); + new Element("audio", { "src": url, "controls":"controls", "preload":"preload" }).inject(lastNode); + } else if (msgBody.type == "location") { + var mapBox = new Element("span").inject(lastNode); + new Element("img", { "src": "../x_component_IMV2/$Main/default/icons/location.png", "width":24, "height":24 }).inject(mapBox); + var url = this._getBaiduMapUrl(msgBody.latitude, msgBody.longitude, msgBody.address, msgBody.addressDetail); + new Element("a", {"href":url, "target":"_blank", "text": msgBody.address}).inject(mapBox); + } else {//text new Element("span", { "text": msgBody.body }).inject(lastNode); } - - if(!isTop) { + + if (!isTop) { var scrollFx = new Fx.Scroll(this.chatContentNode); scrollFx.toBottom(); } }, + //图片 根据大小 url + _getFileUrlWithWH(id, width, height) { + var action = MWF.Actions.get("x_message_assemble_communicate").action; + var url = action.address + action.actions.imgFileDownloadWithWH.uri; + url = url.replace("{id}", encodeURIComponent(id)); + url = url.replace("{width}", encodeURIComponent(width)); + url = url.replace("{height}", encodeURIComponent(height)); + return url; + }, + //file 下载的url + _getFileDownloadUrl(id) { + var action = MWF.Actions.get("x_message_assemble_communicate").action; + var url = action.address + action.actions.imgFileDownload.uri; + url = url.replace("{id}", encodeURIComponent(id)); + return url; + }, + //百度地图打开地址 + _getBaiduMapUrl(lat, longt, address, content) { + var url = "https://api.map.baidu.com/marker?location="+lat+","+longt+"&title="+address+"&content="+content+"&output=html&src=net.o2oa.map"; + return url; + }, //用户头像 _getIcon: function (id) { var orgAction = MWF.Actions.get("x_organization_assemble_control") @@ -528,19 +585,19 @@ MWF.xApplication.IMV2.ConversationItem = new Class({ new Element("div", { "class": "body_title", "text": convData.title }).inject(bodyUpNode); this.messageTimeNode = new Element("div", { "class": "body_time", "text": convData.time }).inject(bodyUpNode); if (convData.lastMessageType == "emoji") { - this.lastMessageNode = new Element("div", { "class": "body_down"}).inject(bodyNode); + this.lastMessageNode = new Element("div", { "class": "body_down" }).inject(bodyNode); var imgPath = ""; - for(var i = 0; i < this.main.emojiList.length ; i++) { + for (var i = 0; i < this.main.emojiList.length; i++) { var emoji = this.main.emojiList[i]; if (emoji.key == convData.lastMessage) { imgPath = emoji.path; } } - new Element("img", {"src": imgPath, "style":"width: 16px;height: 16px;"}).inject(this.lastMessageNode); - }else { + new Element("img", { "src": imgPath, "style": "width: 16px;height: 16px;" }).inject(this.lastMessageNode); + } else { this.lastMessageNode = new Element("div", { "class": "body_down", "text": convData.lastMessage }).inject(bodyNode); } - + var _self = this; this.node.addEvents({ "click": function () { @@ -549,40 +606,33 @@ MWF.xApplication.IMV2.ConversationItem = new Class({ }); }, /** - * { - "id": uuid, - "conversationId": this.conversationId, - "body": bodyJson, - "createPerson": distinguishedName, - "createTime": time, - "sendStatus": 1 - }; + * * 刷新会话列表的最后消息内容 * @param {*} lastMessage */ - refreshLastMsg: function(lastMessage) { + refreshLastMsg: function (lastMessage) { //目前是text 类型的消息 var jsonbody = lastMessage.body; var body = JSON.parse(jsonbody); - if(this.lastMessageNode) { + if (this.lastMessageNode) { if (body.type == "emoji") { //表情 消息 var imgPath = ""; - for(var i = 0; i < this.main.emojiList.length ; i++) { + for (var i = 0; i < this.main.emojiList.length; i++) { var emoji = this.main.emojiList[i]; if (emoji.key == body.body) { imgPath = emoji.path; } } this.lastMessageNode.empty(); - new Element("img", {"src": imgPath, "style":"width: 16px;height: 16px;"}).inject(this.lastMessageNode); - }else { //文本消息 + new Element("img", { "src": imgPath, "style": "width: 16px;height: 16px;" }).inject(this.lastMessageNode); + } else { //文本消息 this.lastMessageNode.empty(); this.lastMessageNode.set('text', body.body); } } var time = this.main._friendlyTime(o2.common.toDate(lastMessage.createTime)); - if(this.messageTimeNode) { + if (this.messageTimeNode) { this.messageTimeNode.set("text", time); } }, -- GitLab