|
@@ -85,19 +85,6 @@
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<el-divider></el-divider>
|
|
|
- <template>
|
|
|
- <div>
|
|
|
- <el-descriptions :title="title" :column="1" border>
|
|
|
- <el-descriptions-item label="附件" prop="attachPath">
|
|
|
- <fileUpload v-model="attachPath" disabled class="fjList"></fileUpload>
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item label="说明">
|
|
|
- <el-input v-model="describe" disabled/>
|
|
|
- </el-descriptions-item>
|
|
|
- </el-descriptions>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-divider></el-divider>
|
|
|
<el-tabs v-model="activeTab" type="card">
|
|
|
<el-tab-pane label="执法人员" name="persons">
|
|
|
<el-table :data="workOrderDetails.persons" style="width: 100%">
|
|
@@ -193,13 +180,46 @@
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
-
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <template v-if="title!=='-1'">
|
|
|
+ <div>
|
|
|
+ <el-descriptions :title="title" :column="1" border>
|
|
|
+ <el-descriptions-item label="附件" prop="attachPath">
|
|
|
+ <fileUpload v-model="attachPath" disabled class="fjList"></fileUpload>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="说明">
|
|
|
+ <el-input v-model="describe" disabled/>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<!--大华预览回放窗口-->
|
|
|
<el-dialog :title="dssPreviewTitle" :visible.sync="dssPreviewVisible" v-if="dssPreviewVisible"
|
|
|
customClass="videoCustomWidth"
|
|
|
@close="destroy" append-to-body
|
|
|
>
|
|
|
- <div id="dssPreview" style="width:1020px;height:625px;"></div>
|
|
|
+ <div id="dssPreview" style="width:1500px;height:625px;"></div>
|
|
|
+ <!--备忘录-->
|
|
|
+ <div class="chat-container" v-if="showChatContainer">
|
|
|
+ <!-- 聊天记录区域 -->
|
|
|
+ <div class="chat-history">
|
|
|
+ <div v-for="(message, index) in messageList" :key="index" class="message-item" :class="{'self-message': message.isSelf}">
|
|
|
+ <span class="message-time">{{message.createName}}{{message.createTime}}</span>
|
|
|
+ <br>
|
|
|
+ <span class="message-content">{{message.content}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 输入框和发送按钮区域 -->
|
|
|
+ <div class="input-area">
|
|
|
+ <el-input
|
|
|
+ v-model="inputMessage"
|
|
|
+ placeholder="请输入消息"
|
|
|
+ clearable
|
|
|
+ maxlength="50"
|
|
|
+ ></el-input>
|
|
|
+ <el-button type="primary" @click="sendMessage">发送</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-dialog>
|
|
|
<!--海康预览回放窗口-->
|
|
|
<!--预览-->
|
|
@@ -232,7 +252,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {getCamera, getDetails, getFillForm,selectchannelCodeByCameraId,getDahuaVideoServer} from "@/api/lawenforcement/record";
|
|
|
+import {getCamera, getDetails, getFillForm,selectchannelCodeByCameraId,getDahuaVideoServer,addMemorandum,getMemorandum} from "@/api/lawenforcement/record";
|
|
|
import fileUpload from '@/views/components/FileUpload/index.vue';
|
|
|
import {selectConfigKey} from '@/api/system/config'
|
|
|
/** ----------------------------------摄像头预览开始------------------------------------- */
|
|
@@ -261,7 +281,14 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- title:"填报",
|
|
|
+ showChatContainer: false, // 初始不显示聊天容器
|
|
|
+ recordLogId:null,
|
|
|
+ messageList: [], // 存储聊天消息的数组
|
|
|
+ inputMessage: '', // 输入框中的消息内容
|
|
|
+ createName:'',//创建人
|
|
|
+ createTime: new Date().toISOString().split('.')[0].replace('T', ' '), // 当前时间
|
|
|
+
|
|
|
+ title:'',
|
|
|
cameraTitlePlayBack: '',
|
|
|
workOrderDetails: {},
|
|
|
cameraVisiblePlayBack: false,
|
|
@@ -299,6 +326,19 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ sendMessage() {
|
|
|
+ if (this.inputMessage.trim() !== '') {
|
|
|
+ const form = {recordLogId:this.recordLogId,content: this.inputMessage,createTime: this.createTime}
|
|
|
+ addMemorandum(form);
|
|
|
+ const newMessage = {
|
|
|
+ content: this.inputMessage,
|
|
|
+ createTime: this.createTime,
|
|
|
+ createName: this.$store.state.user.nickName,
|
|
|
+ };
|
|
|
+ this.messageList.push(newMessage);
|
|
|
+ this.inputMessage = '';
|
|
|
+ }
|
|
|
+ },
|
|
|
getData(recordId) {
|
|
|
getDetails(recordId).then(res => {
|
|
|
this.workOrderDetails = res.data;
|
|
@@ -312,6 +352,8 @@ export default {
|
|
|
this.attachPath = res.data.attachPath;
|
|
|
}
|
|
|
this.describe = res.data.describe;
|
|
|
+ }else {
|
|
|
+ this.title = '-1'
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -335,9 +377,12 @@ export default {
|
|
|
|
|
|
/** ----------------------------------摄像头回放开始------------------------------------- */
|
|
|
playBack(row) {
|
|
|
+ this.recordLogId = row.id
|
|
|
+ getMemorandum({recordLogId:row.id}).then(response => {
|
|
|
+ this.messageList = response.data
|
|
|
+ })
|
|
|
getCamera(row.deviceId).then(response => {
|
|
|
this.camera = response.data
|
|
|
- console.log(this.camera)
|
|
|
})
|
|
|
selectConfigKey('DssVersion').then(res => {
|
|
|
if (this.ws.getLocalDssVersion() != res.data) {
|
|
@@ -381,7 +426,9 @@ export default {
|
|
|
this.$refs.haikangTVWalls.showTVWall(cameraIndexCode, 1)
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
+ setTimeout(() => {
|
|
|
+ this.showChatContainer = true;
|
|
|
+ }, 4000);
|
|
|
})
|
|
|
},
|
|
|
/** ----------------------------------摄像头回放结束------------------------------------- */
|
|
@@ -616,13 +663,65 @@ export default {
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
|
//视频摄像头预览弹层样式
|
|
|
.videoCustomWidth {
|
|
|
- width: 1070px !important;
|
|
|
+ width: 1400px !important;
|
|
|
/*height: 760px !important;*/
|
|
|
}
|
|
|
|
|
|
//视频摄像头预览弹层样式
|
|
|
.videoCustomWidthPlayBack {
|
|
|
- width: 1080px !important;
|
|
|
+ width: 1400px !important;
|
|
|
height: 780px !important;
|
|
|
}
|
|
|
+
|
|
|
+ .chat-container {
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 333px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-history {
|
|
|
+ height: 638px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 10px;
|
|
|
+ max-width: 70%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .self-message {
|
|
|
+ background-color: #0084ff;
|
|
|
+ color: white;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-content {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-time {
|
|
|
+ font-size: 15px;
|
|
|
+ margin-left: -10px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-area {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
</style>
|