Skip to content

X
xxx_phase2_web
Commit 12b13d02 authored by 夏敏伟's avatar 夏敏伟
Browse files
Options

聊天室

parent b1d888a9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 131 deletions
src/util/onPaste.js 0 → 100644
View file @ 12b13d02
// 定义粘贴函数
const onPaste = (event) => {
// 剪贴板没数据，则直接返回
if (!event.clipboardData || !event.clipboardData.items) {
return;
}
// 封装Promise
return new Promise((resovle, reject) => {
for(let i = 0, len = event.clipboardData.items.length; i < len; i++) {
const item = event.clipboardData.items[i];
if (item.kind === 'string') {
// let str = event.clipboardData.getData('text');
// resovle({
// data: str
// });
let reg = /<\/?.+?\/?>/g; // 匹配粘贴文本中的html标签
item.getAsString(str => {
resovle({
data: str.replace(reg, '').replace(/(\r\n)|(\n)/g, '') // 去掉换行符
})
})
} else if (item.kind === 'file') {
const file = item.getAsFile();
if (item.type.match('^image/')) {
// 处理图片
handleImage(file, (data) => {
resovle(data)
})
} else {
// 其他文件直接返回
resovle({
data: file,
type: 'file'
})
}
} else {
reject(new Error('不支持粘贴该类型'));
}
}
})
}
/**
* 图片处理
* @param {*} file 图片
* @param {*} callback 回调
* @param {*} maxWidth
* @returns
*/
function handleImage(file, callback, maxWidth = 200) {
console.log('粘贴的图片', file);
if (!file || !/\/(?:png|jpg|jpeg|gif)/i.test(file.type)) {
console.log('图片格式不支持');
return;
}
const reader = new FileReader();
reader.onload = function () {
const result = this.result;
console.log('compressedDataUrl', result);
let img = new Image();
img.onload = function() {
let compressedDataUrl = compress(img, file.type, maxWidth, true);
let url = compress(img, file.type, maxWidth, false);
img = null;
callback({
data: file,
compressedDataUrl,
url,
type: 'image'
})
}
img.src = result;
};
reader.readAsDataURL(file);
}
/**
* 图片压缩
* @param {*} img 图片对象
* @param {*} type 图片类型
* @param {*} maxWidth 图片最大宽度
* @param {*} flag
*/
function compress(img, type, maxWidth, flag) {
let canvas = document.createElement('canvas');
let ctx2 = canvas.getContext('2d');
let ratio = img.width / img.height;
let width = img.width, height = img.height;
// 根据flag判断是否压缩图片
if (flag) {
// 压缩后的图片展示在输入框
width = maxWidth;
height = maxWidth / ratio; // 维持图片宽高比
}
canvas.width = width;
canvas.height = height;
ctx2.fillStyle = '#fff';
ctx2.fillRect(0, 0, canvas.width, canvas.height);
ctx2.drawImage(img, 0, 0, width, height);
let base64Data = canvas.toDataURL(type, 0.75);
if (type === 'image/gif') {
let regx = /(?<=data:image).*?(?=;base64)/; // 正则表示时在用于replace时，根据浏览器的不同，有的需要为字符串
base64Data = base64Data.replace(regx, '/gif');
}
canvas = null;
ctx2 = null;
return base64Data;
}
export default onPaste;
\ No newline at end of file
src/view/ddkz/components/chatRoomDialog.vue
View file @ 12b13d02
This diff is collapsed.
src/view/ddkz/components/chatRoomPeople.vue
View file @ 12b13d02
......@@ -25,26 +25,19 @@ export default {
elDragDialog
},
props: {
// visible: Boolean,
peopleList: Array
},
methods: {
handleClose() {
this.dialogVisible = false;
// this.$emit('handleCancel');
},
showDialog() {
this.dialogVisible = true;
},
handleDialogOpen() {
// this.dialogVisible = this.$props.visible;
this.personList = this.$props.peopleList;
}
},
// mounted() {
// this.dialogVisible = this.$props.visible;
// this.personList = this.$props.peopleList;
// }
}
}
</script>
......
src/view/ddkz/components/noticeDialog.vue
View file @ 12b13d02
<template>
<el-dialog v-el-drag-dialog title="发送公告" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<el-dialog v-el-drag-dialog title="发送公告" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
@open="handleDialogOpen">
<div class="notice">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="标题">
......@@ -37,7 +38,7 @@ export default {
title: '',
content: '',
attachment: '',
messageForm:null
messageForm: null
},
formatFile: format_file(),
myStompClient: null,
......@@ -59,7 +60,7 @@ export default {
this.dialogVisible = false;
// this.$emit('handleCancel');
},
showDialog(){
showDialog() {
this.dialogVisible = true;
},
handleChange(file, fileList) {
......@@ -68,16 +69,16 @@ export default {
upLoadFiles('CHAT', fd).then(res => {
this.form.attachment = res;
let type = file.name.split('.')[1];
if(type=='png'||type=='jpg'){
if (type == 'png' || type == 'jpg') {
this.form.messageForm = 'PICTURE';
}else if(type=='mp4'){
} else if (type == 'mp4') {
this.form.messageForm = 'VIDEO';
}else if(type=='xlsx'||type=='xls'){
} else if (type == 'xlsx' || type == 'xls') {
this.form.messageForm = 'EXCEL';
}else{
} else {
this.form.messageForm = 'TEXT';
}
});
},
handleRemove() { },
......@@ -95,18 +96,24 @@ export default {
//订阅聊天室主题，订阅功能中设置ID：
this.stompClient.subscribe('/topic/multicast/' + e.id, data => {
this.$emit('handleCancel');
this.$emit('showInfo',true, this.currentChatRoom);
this.$emit('showInfo', true, this.currentChatRoom);
}, { id: "multicast" + e.id + new Date().getTime() });
})
},
handleDialogOpen() {
this.myStompClient = this.$props.stompClient;
this.currentChatRoom = this.$props.currentChatRoomInfo;
this.analogDataList = this.$props.analogData;
this.listChatroom(this.analogDataList);
}
},
mounted() {
this.dialogVisible = this.$props.visible;
this.myStompClient = this.$props.stompClient;
this.currentChatRoom = this.$props.currentChatRoomInfo;
this.analogDataList = this.$props.analogData;
this.listChatroom(this.analogDataList);
}
// mounted() {
// this.dialogVisible = this.$props.visible;
// this.myStompClient = this.$props.stompClient;
// this.currentChatRoom = this.$props.currentChatRoomInfo;
// this.analogDataList = this.$props.analogData;
// this.listChatroom(this.analogDataList);
// }
}
</script>
......
src/view/ddkz/ddkzzs.vue
View file @ 12b13d02
......@@ -73,7 +73,8 @@
:class="['everyDayNewCard', 'cardType' + item1.teamInfo.teamType]">
<div class="everyDayNewCardTitle" v-text="item1.title"></div>
<div class="everyDayNewCardContent">
<div class="left-everyDayNew" :style="{ width: item1.attachment ? '50%' : '100%' }">
<div class="left-everyDayNew"
:style="{ width: item1.attachment ? '50%' : '100%' }">
<div class="everyDayNewCardInfo">
<span v-text="item1.time"></span>&emsp;
来源：<span class="newsSource" v-text="item1.from"></span>
......@@ -86,7 +87,7 @@
</el-image>
</template>
<template v-else-if="item1.type == 'VIDEO'">
<video :src="item1.url" controls loop>
<video :src="item1.url" controls loop>
</video>
</template>
<template v-else-if="item1.type == 'EXCEL'">
......@@ -107,14 +108,11 @@
</div>
</div>
</transition>
<NoticeDialog v-if="visible" ref="myNotice" @handleCancel="closeDialog" :stompClient="stompClient"
<NoticeDialog ref="myNotice" :stompClient="stompClient"
:currentChatRoomInfo="currentChatRoomInfo" :analogData="analogData" @showInfo="showInfo"></NoticeDialog>
<ChatRoomDialog v-if="chatRoomVisible" :visible="chatRoomVisible" ref="myChatRoom"
@handleCancel="closeDialogChatRoom" :analogData="analogData" :currentChatRoomInfo="currentChatRoomInfo"
:stompClient="stompClient">
<ChatRoomDialog ref="myChatRoom" :analogData="analogData" :currentChatRoomInfo="currentChatRoomInfo" :stompClient="stompClient">
</ChatRoomDialog>
<ChatRoomPeople ref="myChatRoomPeople" @handleCancel="closeDialogChatRoomPeople"
:peopleList="peopleList"></ChatRoomPeople>
<ChatRoomPeople ref="myChatRoomPeople" :peopleList="peopleList"></ChatRoomPeople>
<el-tooltip placement="left" class="myButtonList" v-if="isInfo">
<div class="myTools" slot="content">
<div>
......@@ -183,9 +181,9 @@ export default {
],
avatar: avatar,
sendMessage: '',
visible: false,
chatRoomVisible: false,
chatRoomPeopleVisible: false,
// visible: false,
// chatRoomVisible: false,
// chatRoomPeopleVisible: false,
peopleList: [],
// chatMessageList: [],
currentChatRoomInfo: {},
......@@ -254,7 +252,6 @@ export default {
tmpArr = this.publicNoticeList.filter(item => { return item.fromUserId == user && item.createTime.slice(0, 10) == day });
}
tmpArr.forEach(item => {
console.log(item);
let obj = { time: '', news: [] };
let fileUrl = null;
fileUrl = item.attachment ? 'api/rest/file/viewPicture/CHAT?objectName=' + item.attachment : null;
......@@ -290,11 +287,11 @@ export default {
const divscll = document.getElementById('chatContent');
divscll.scrollTop = divscll.scrollHeight;
},
closeDialog() {
this.visible = false;
},
// closeDialog() {
// this.visible = false;
// },
sendNotice() {
this.visible = true;
// this.visible = true;
this.$nextTick(() => {
this.$refs.myNotice.showDialog();
})
......@@ -302,29 +299,25 @@ export default {
// this.$refs.myNotice.showDialog();
// }
},
closeDialogChatRoom() {
this.chatRoomVisible = false;
},
// closeDialogChatRoom() {
// this.chatRoomVisible = false;
// },
showChatRoom() {
this.chatRoomVisible = true;
// this.$nextTick(() => {
// this.$refs.myChatRoom.showDialog();
// })
// this.chatRoomVisible = true;
this.$nextTick(() => {
this.$refs.myChatRoom.showDialog();
})
// if (this.$refs.myChatRoom) {
// this.$refs.myChatRoom.showDialog();
// }
},
closeDialogChatRoomPeople() {
this.chatRoomPeopleVisible = false;
},
// closeDialogChatRoomPeople() {
// this.chatRoomPeopleVisible = false;
// },
showPeopleList() {
// this.chatRoomPeopleVisible = true;
this.$nextTick(() => {
this.$refs.myChatRoomPeople.showDialog();
})
// if (this.$refs.myChatRoomPeople) {
// this.$refs.myChatRoomPeople.showDialog();
// }
},
queryChatRoomListFn(params) {
getChatRoomList(params).then(res => {
......
webpack.config.js
View file @ 12b13d02
......@@ -91,7 +91,7 @@ module.exports = {
//后台代理
proxy: {
'/api/': {
target: 'http://192.168.168.106:8081',
target: 'http://192.168.168.213:8081',
ws: true,
secure: false,
changeOrigin: true,
......@@ -100,7 +100,7 @@ module.exports = {
}
},
'/websocket/**': {
target: 'ws://192.168.168.106:8081',
target: 'ws://192.168.168.213:8081',
ws: true,
secure: false,
logLevel: 'debug',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment