|
@@ -37,41 +37,21 @@
|
|
|
|
|
|
|
|
<!-- 对话样式消息 -->
|
|
<!-- 对话样式消息 -->
|
|
|
<div v-if="msg.messageType === 'dialog'" class="dialog-message">
|
|
<div v-if="msg.messageType === 'dialog'" class="dialog-message">
|
|
|
- <div class="dialog-title">{{ msg.content.title }}</div>
|
|
|
|
|
- <div class="dialog-content">{{ msg.content.content }}</div>
|
|
|
|
|
- <div class="before-after-comparison">
|
|
|
|
|
- <div class="comparison-item before">
|
|
|
|
|
- <div class="comparison-label">{{ msg.content.beforeAfter.before.title }}</div>
|
|
|
|
|
- <div class="comparison-image">
|
|
|
|
|
- <img :src="msg.content.beforeAfter.before.image" alt="农事前" />
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="vs-icon">VS</div>
|
|
|
|
|
- <div class="comparison-item after">
|
|
|
|
|
- <div class="comparison-label">{{ msg.content.beforeAfter.after.title }}</div>
|
|
|
|
|
- <div class="comparison-image">
|
|
|
|
|
- <img :src="msg.content.beforeAfter.after.image" alt="农事后" />
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="work-details">
|
|
|
|
|
- <div class="detail-item">
|
|
|
|
|
- <span class="detail-label">农事名称:</span>
|
|
|
|
|
- <span class="detail-value">{{ msg.content.workDetails.name }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="detail-item">
|
|
|
|
|
- <span class="detail-label">所属分类:</span>
|
|
|
|
|
- <span class="detail-value">{{ msg.content.workDetails.section }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="detail-item">
|
|
|
|
|
- <span class="detail-label">推荐时间:</span>
|
|
|
|
|
- <span class="detail-value">{{ msg.content.workDetails.executeDate }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="detail-item">
|
|
|
|
|
- <span class="detail-label">触发条件:</span>
|
|
|
|
|
- <span class="detail-value">{{ msg.content.workDetails.condition }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <template v-if="msg.content.type === 'farm_report'">
|
|
|
|
|
+ <div class="report-title">{{ msg.content.title }}</div>
|
|
|
|
|
+ <div class="dialog-title">{{ msg.content.content }}</div>
|
|
|
|
|
+ <img src="@/assets/img/monitor/aaa.png" alt="" class="monitor-image" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <div class="dialog-title">{{ msg.content.title }}</div>
|
|
|
|
|
+ <img src="@/assets/img/monitor/image.png" alt="" class="monitor-image" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 对话样式消息 -->
|
|
|
|
|
+ <div v-if="msg.messageType === 'card'" class="card-message" @click="handleCardClick(msg)">
|
|
|
|
|
+ <div class="card-title">{{ msg.title || msg.content.title }}</div>
|
|
|
|
|
+ <img :src="base_img_url2 + (msg.coverUrl || msg.content.coverUrl) + resize" alt="" />
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <div class="time">{{ msg.time }}</div> -->
|
|
<!-- <div class="time">{{ msg.time }}</div> -->
|
|
@@ -80,7 +60,7 @@
|
|
|
|
|
|
|
|
<!-- 我方消息 -->
|
|
<!-- 我方消息 -->
|
|
|
<template v-else>
|
|
<template v-else>
|
|
|
- <div class="bubble" :class="{ 'no-bubble': msg.messageType === 'image' }">
|
|
|
|
|
|
|
+ <div class="bubble" :class="{ 'no-bubble': msg.messageType === 'image'}">
|
|
|
<!-- 文本消息 -->
|
|
<!-- 文本消息 -->
|
|
|
<div v-if="msg.messageType === 'text'" class="content">{{ msg.content }}</div>
|
|
<div v-if="msg.messageType === 'text'" class="content">{{ msg.content }}</div>
|
|
|
|
|
|
|
@@ -113,6 +93,12 @@
|
|
|
</template>
|
|
</template>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
+ <!-- 对话样式消息 -->
|
|
|
|
|
+ <div v-if="msg.messageType === 'card'" class="card-message" @click="handleCardClick(msg)">
|
|
|
|
|
+ <div class="card-title">{{ msg.title || msg.content.title }}</div>
|
|
|
|
|
+ <img :src="base_img_url2 + (msg.coverUrl || msg.content.coverUrl) + resize" alt="" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
<!-- <div class="time">{{ msg.time }}</div> -->
|
|
<!-- <div class="time">{{ msg.time }}</div> -->
|
|
|
</div>
|
|
</div>
|
|
|
<!-- <div class="avatar avatar-r">{{ msg.senderName.charAt(0) }}</div> -->
|
|
<!-- <div class="avatar avatar-r">{{ msg.senderName.charAt(0) }}</div> -->
|
|
@@ -184,7 +170,7 @@
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
import { ref, onUnmounted, nextTick, watch, onActivated, onDeactivated } from "vue";
|
|
import { ref, onUnmounted, nextTick, watch, onActivated, onDeactivated } from "vue";
|
|
|
-import { useRouter } from "vue-router";
|
|
|
|
|
|
|
+import { useRouter ,useRoute} from "vue-router";
|
|
|
import { base_img_url2 } from "@/api/config";
|
|
import { base_img_url2 } from "@/api/config";
|
|
|
import { getFileExt } from "@/utils/util";
|
|
import { getFileExt } from "@/utils/util";
|
|
|
import UploadFile from "@/utils/upliadFile";
|
|
import UploadFile from "@/utils/upliadFile";
|
|
@@ -240,7 +226,7 @@ senderIcon.value = localUserInfoIcon;
|
|
|
//聊天会话
|
|
//聊天会话
|
|
|
const createSession = (targetUserId, callback) => {
|
|
const createSession = (targetUserId, callback) => {
|
|
|
// 先保存当前的对话样式消息 要注释
|
|
// 先保存当前的对话样式消息 要注释
|
|
|
- const dialogMessages = messages.value.filter((msg) => msg.messageType === "dialog");
|
|
|
|
|
|
|
+ // const dialogMessages = messages.value.filter((msg) => msg.messageType === "dialog");
|
|
|
|
|
|
|
|
VE_API.bbs.createSession({ farmId: farmVal.value, targetUserId }).then(({ data, code }) => {
|
|
VE_API.bbs.createSession({ farmId: farmVal.value, targetUserId }).then(({ data, code }) => {
|
|
|
if (code === 0) {
|
|
if (code === 0) {
|
|
@@ -261,6 +247,8 @@ const createSession = (targetUserId, callback) => {
|
|
|
console.error(e, "e");
|
|
console.error(e, "e");
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ }else if(item.messageType === 'card'){
|
|
|
|
|
+ content = JSON.parse(item.content);
|
|
|
}
|
|
}
|
|
|
return {
|
|
return {
|
|
|
...item,
|
|
...item,
|
|
@@ -271,10 +259,10 @@ const createSession = (targetUserId, callback) => {
|
|
|
};
|
|
};
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 重新添加对话样式消息 要注释
|
|
|
|
|
- if (dialogMessages.length > 0) {
|
|
|
|
|
- messages.value = [...messages.value, ...dialogMessages];
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // // 重新添加对话样式消息 要注释
|
|
|
|
|
+ // if (dialogMessages.length > 0) {
|
|
|
|
|
+ // messages.value = [...messages.value, ...dialogMessages];
|
|
|
|
|
+ // }
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
scrollToBottom();
|
|
scrollToBottom();
|
|
@@ -291,13 +279,13 @@ const handleFarmChange = (e) => {
|
|
|
|
|
|
|
|
//发送消息接口
|
|
//发送消息接口
|
|
|
//类型 text ,file,image
|
|
//类型 text ,file,image
|
|
|
-const sendMsg = (messageType = "text", content = "", image = {}) => {
|
|
|
|
|
|
|
+const sendMsg = (messageType = "text", content = "", obj = {}) => {
|
|
|
const params = {
|
|
const params = {
|
|
|
farmId: farmVal.value,
|
|
farmId: farmVal.value,
|
|
|
senderId: curUserId,
|
|
senderId: curUserId,
|
|
|
receiverId: userId.value,
|
|
receiverId: userId.value,
|
|
|
content,
|
|
content,
|
|
|
- image,
|
|
|
|
|
|
|
+ [messageType]:obj,
|
|
|
messageType,
|
|
messageType,
|
|
|
};
|
|
};
|
|
|
VE_API.bbs.sendMsg(params);
|
|
VE_API.bbs.sendMsg(params);
|
|
@@ -305,6 +293,9 @@ const sendMsg = (messageType = "text", content = "", image = {}) => {
|
|
|
|
|
|
|
|
const userId = ref(null);
|
|
const userId = ref(null);
|
|
|
|
|
|
|
|
|
|
+const handleCardClick = (msg) => {
|
|
|
|
|
+ router.push(msg.linkUrl || msg.content.linkUrl);
|
|
|
|
|
+}
|
|
|
watch(
|
|
watch(
|
|
|
() => props.userId,
|
|
() => props.userId,
|
|
|
async (newValue) => {
|
|
async (newValue) => {
|
|
@@ -312,6 +303,22 @@ watch(
|
|
|
await getFarmList();
|
|
await getFarmList();
|
|
|
userId.value = newValue;
|
|
userId.value = newValue;
|
|
|
createSession(newValue, () => {
|
|
createSession(newValue, () => {
|
|
|
|
|
+ if(route.query.pageParams) {
|
|
|
|
|
+ const params = JSON.parse(route.query.pageParams);
|
|
|
|
|
+ const imgArr = JSON.parse(params.executeEvidence);
|
|
|
|
|
+
|
|
|
|
|
+ const message = {
|
|
|
|
|
+ sender: "sent",
|
|
|
|
|
+ messageType: "card",
|
|
|
|
|
+ senderIcon: senderIcon.value,
|
|
|
|
|
+ title: params.farmWorkName + ' 农事已完成,请您确认',
|
|
|
|
|
+ coverUrl: imgArr[0],
|
|
|
|
|
+ cardType:'farm_work',
|
|
|
|
|
+ linkUrl:`/completed_work?json=${JSON.stringify({id:params.id})}`,
|
|
|
|
|
+ time: getCurrentTime(),
|
|
|
|
|
+ };
|
|
|
|
|
+ sendMessage(message)
|
|
|
|
|
+ }
|
|
|
if (props.text) {
|
|
if (props.text) {
|
|
|
sendMsg("text", props.text);
|
|
sendMsg("text", props.text);
|
|
|
messages.value.push({
|
|
messages.value.push({
|
|
@@ -376,11 +383,12 @@ const previewImage = ref(null);
|
|
|
const initMqtt = () => {
|
|
const initMqtt = () => {
|
|
|
const topics = [`user/chat/message/${farmVal.value}/${curUserId}`]; // 订阅的主题数组
|
|
const topics = [`user/chat/message/${farmVal.value}/${curUserId}`]; // 订阅的主题数组
|
|
|
mqttClient.value = new MqttClient(topics, (topic, message) => {
|
|
mqttClient.value = new MqttClient(topics, (topic, message) => {
|
|
|
- console.log(topic, "topic");
|
|
|
|
|
- console.log("接收推送信息:", message);
|
|
|
|
|
if (message && message.length > 10) {
|
|
if (message && message.length > 10) {
|
|
|
const obj = JSON.parse(message);
|
|
const obj = JSON.parse(message);
|
|
|
console.log("message有值", obj);
|
|
console.log("message有值", obj);
|
|
|
|
|
+ if(obj.senderId === curUserId){
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
if (obj.senderId === receiverIdVal.value) {
|
|
if (obj.senderId === receiverIdVal.value) {
|
|
|
if (obj.messageType === "image") {
|
|
if (obj.messageType === "image") {
|
|
|
if (obj.image && (obj.image.url || obj.image.originUrl)) {
|
|
if (obj.image && (obj.image.url || obj.image.originUrl)) {
|
|
@@ -417,6 +425,13 @@ const sendMessage = (message) => {
|
|
|
} else if (message.messageType === "dialog") {
|
|
} else if (message.messageType === "dialog") {
|
|
|
// 对话样式消息不发送到服务器,只显示在本地
|
|
// 对话样式消息不发送到服务器,只显示在本地
|
|
|
console.log("发送对话样式消息:", message.content);
|
|
console.log("发送对话样式消息:", message.content);
|
|
|
|
|
+ }else{
|
|
|
|
|
+ sendMsg('card','',{
|
|
|
|
|
+ title: message.title,
|
|
|
|
|
+ coverUrl: message.coverUrl,
|
|
|
|
|
+ cardType: message.cardType,
|
|
|
|
|
+ linkUrl: message.linkUrl
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
messages.value.push(message);
|
|
messages.value.push(message);
|
|
|
scrollToBottom();
|
|
scrollToBottom();
|
|
@@ -603,14 +618,18 @@ const scrollToBottom = () => {
|
|
|
|
|
|
|
|
const farmVal = ref("");
|
|
const farmVal = ref("");
|
|
|
const options = ref([]);
|
|
const options = ref([]);
|
|
|
-
|
|
|
|
|
|
|
+const route = useRoute();
|
|
|
// 获取农场列表
|
|
// 获取农场列表
|
|
|
function getFarmList() {
|
|
function getFarmList() {
|
|
|
return VE_API.farm.userFarmSelectOption().then(({ data }) => {
|
|
return VE_API.farm.userFarmSelectOption().then(({ data }) => {
|
|
|
options.value = data || [];
|
|
options.value = data || [];
|
|
|
if (data && data.length > 0) {
|
|
if (data && data.length > 0) {
|
|
|
const defaultOption = data.find((item) => item.defaultOption === true);
|
|
const defaultOption = data.find((item) => item.defaultOption === true);
|
|
|
- farmVal.value = defaultOption ? defaultOption.id : data[0].id;
|
|
|
|
|
|
|
+ if(route.query.farmId) {
|
|
|
|
|
+ farmVal.value = Number(route.query.farmId);
|
|
|
|
|
+ }else{
|
|
|
|
|
+ farmVal.value = defaultOption ? defaultOption.id : data[0].id;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
@@ -999,6 +1018,20 @@ const sendFarmReportDialog = () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.card-message{
|
|
|
|
|
+ .card-title{
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+ img{
|
|
|
|
|
+ width: 222px;
|
|
|
|
|
+ height: 180px;
|
|
|
|
|
+ object-fit: cover;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
/* 我方消息中的对话样式 */
|
|
/* 我方消息中的对话样式 */
|
|
|
.message.sent .dialog-message {
|
|
.message.sent .dialog-message {
|
|
|
background: #e3f2fd;
|
|
background: #e3f2fd;
|