优化
This commit is contained in:
@ -50,13 +50,11 @@
|
|||||||
var videoText = ''
|
var videoText = ''
|
||||||
// 初始化PDF.js
|
// 初始化PDF.js
|
||||||
pdfjsLib.GlobalWorkerOptions.workerSrc = "./textPdf/pdf.worker.min.js";
|
pdfjsLib.GlobalWorkerOptions.workerSrc = "./textPdf/pdf.worker.min.js";
|
||||||
|
|
||||||
document.documentElement.addEventListener("touchmove",
|
document.documentElement.addEventListener("touchmove",
|
||||||
function (event) {
|
function (event) {
|
||||||
if (event.touches.length > 1) event.preventDefault();
|
if (event.touches.length > 1) event.preventDefault();
|
||||||
}, false);
|
}, false);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="./textVideo/wsconnecter.js" charset="utf-8"></script>
|
<script src="./textVideo/wsconnecter.js" charset="utf-8"></script>
|
||||||
<script src="./textVideo/textVideo.js" charset="utf-8"></script>
|
<script src="./textVideo/textVideo.js" charset="utf-8"></script>
|
||||||
</body>
|
</body>
|
||||||
|
@ -0,0 +1,284 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mian_box" v-if="dialogShow">
|
||||||
|
<div class="left_box">
|
||||||
|
<div class="left_top"></div>
|
||||||
|
<div class="left_bom">
|
||||||
|
<!-- 聊天区域 -->
|
||||||
|
<div class="chat-container">
|
||||||
|
<div class="chat-messages">
|
||||||
|
<div v-for="message in messages" :key="message.id" class="message"
|
||||||
|
:class="message.sender === 1 ? 'sent' : 'received'">
|
||||||
|
<img v-if="message.sender !== 1" class="message-avatar"
|
||||||
|
src="https://randomuser.me/api/portraits/women/5.jpg" alt="张三">
|
||||||
|
<div class="message-content">
|
||||||
|
<div>{{ message.text }}</div>
|
||||||
|
<div class="message-time">{{ formatTime(message.timestamp) }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-input">
|
||||||
|
<input type="text" v-model="newMessage" placeholder="输入消息..." @keyup.enter="sendMessage">
|
||||||
|
<button class="send-button" @click="sendMessage">
|
||||||
|
发送
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_box"></div>
|
||||||
|
<el-button type="primary" style="margin:0 auto;display: block;">结束会议</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref, onMounted, defineExpose } from "vue";
|
||||||
|
// 消息历史
|
||||||
|
const messages = ref([
|
||||||
|
{ id: 1, sender: 2, text: "你好,最近怎么样?", timestamp: new Date(Date.now() - 3600000) },
|
||||||
|
{ id: 2, sender: 1, text: "还不错,最近在学Vue3,很有意思!", timestamp: new Date(Date.now() - 3500000) },
|
||||||
|
{ id: 3, sender: 2, text: "太好了!Vue3确实很棒,Composition API用起来很顺手", timestamp: new Date(Date.now() - 3400000) },
|
||||||
|
{ id: 4, sender: 1, text: "是的,尤其是setup函数和响应式API", timestamp: new Date(Date.now() - 3300000) },
|
||||||
|
{ id: 5, sender: 3, text: "你好,在忙吗?", timestamp: new Date(Date.now() - 2800000) },
|
||||||
|
{ id: 6, sender: 1, text: "刚吃完午饭,有什么事吗?", timestamp: new Date(Date.now() - 2700000) },
|
||||||
|
{ id: 7, sender: 4, text: "周末有什么计划?", timestamp: new Date(Date.now() - 1800000) },
|
||||||
|
{ id: 8, sender: 1, text: "还没想好,可能去爬山", timestamp: new Date(Date.now() - 1700000) },
|
||||||
|
{ id: 9, sender: 5, text: "记得明天有会议", timestamp: new Date(Date.now() - 1200000) },
|
||||||
|
{ id: 10, sender: 1, text: "谢谢提醒,我会准时参加", timestamp: new Date(Date.now() - 1100000) }
|
||||||
|
]);
|
||||||
|
const dialogShow=ref(false)
|
||||||
|
const newMessage=ref()
|
||||||
|
// 格式化时间
|
||||||
|
function formatTime(timestamp) {
|
||||||
|
return new Date(timestamp).toLocaleTimeString([], {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const init=()=>{
|
||||||
|
dialogShow.value=true;
|
||||||
|
}
|
||||||
|
// 发送消息
|
||||||
|
function sendMessage() {
|
||||||
|
let message = {
|
||||||
|
id: messages.value.length + 1,
|
||||||
|
sender: 1,
|
||||||
|
text: newMessage.value,
|
||||||
|
timestamp: new Date()
|
||||||
|
};
|
||||||
|
messages.value.push(message);
|
||||||
|
newMessage.value = "";
|
||||||
|
}
|
||||||
|
defineExpose({ init });
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.left_bom {
|
||||||
|
width: 40vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #ddd;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #4caf50;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts-title {
|
||||||
|
margin: 20px 0 15px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-list {
|
||||||
|
overflow-y: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact.active,
|
||||||
|
.contact:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 12px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-name {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-lastmsg {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #ddd;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-header {
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-header img {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 12px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-messages {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
height: 40vh;
|
||||||
|
overflow: auto;
|
||||||
|
width: 40vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.received {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.sent {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-avatar {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 10px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
max-width: 60%;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border-radius: 18px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.received .message-content {
|
||||||
|
background-color: #e9e9eb;
|
||||||
|
color: #333;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sent .message-content {
|
||||||
|
background-color: #3f51b5;
|
||||||
|
color: white;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-time {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
margin-top: 5px;
|
||||||
|
opacity: 0.8;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input {
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input input {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 24px;
|
||||||
|
outline: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-button {
|
||||||
|
background-color: #3f51b5;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-button:hover {
|
||||||
|
background-color: #303f9f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-chat {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
color: #888;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.current-user {
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-user img {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact img {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -7,11 +7,9 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</PageTitle>
|
</PageTitle>
|
||||||
</div>
|
</div>
|
||||||
<!-- 搜索 -->
|
|
||||||
<div ref="searchBox">
|
<div ref="searchBox">
|
||||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||||
</div>
|
</div>
|
||||||
<!-- 表格 -->
|
|
||||||
<div class="tabBox">
|
<div class="tabBox">
|
||||||
<ul class="list noScollLine" v-loading="pageData.loading">
|
<ul class="list noScollLine" v-loading="pageData.loading">
|
||||||
<li class="list-item" v-for="(item, index) in pageData.list" :key="`tableData${index}`">
|
<li class="list-item" v-for="(item, index) in pageData.list" :key="`tableData${index}`">
|
||||||
@ -67,14 +65,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 详情 -->
|
<!-- 详情 -->
|
||||||
<DetailForm ref="detailDiloag" @updateDate="getList" />
|
<DetailForm ref="detailDiloag" @updateDate="getList" />
|
||||||
|
<RoomDetail />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as MOSTY from "@/components/MyComponents/index";
|
import * as MOSTY from "@/components/MyComponents/index";
|
||||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||||
import Pages from "@/components/aboutTable/Pages.vue";
|
import Pages from "@/components/aboutTable/Pages.vue";
|
||||||
import Search from "@/components/aboutTable/Search.vue";
|
import Search from "@/components/aboutTable/Search.vue";
|
||||||
import DetailForm from "./components/detailForm.vue";
|
import DetailForm from "./components/detailForm.vue";
|
||||||
|
import RoomDetail from "./components/roomDetail.vue";
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<div class="head_box">
|
<div class="head_box">
|
||||||
<span class="title">经验分享{{ title }} </span>
|
<span class="title">经验分享{{ title }} </span>
|
||||||
<div>
|
<div>
|
||||||
<el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button>
|
<!-- <el-button type="primary" size="small" :loading="loading" @click="submit">保存</el-button> -->
|
||||||
<el-button size="small" @click="close">关闭</el-button>
|
<el-button size="small" @click="close">关闭</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -59,7 +59,7 @@ const mode = "default";
|
|||||||
const dataBt = ref(`<p class="html_bt">
|
const dataBt = ref(`<p class="html_bt">
|
||||||
<h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">林芝市公安局情指中心</span></h4>
|
<h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">林芝市公安局情指中心</span></h4>
|
||||||
<h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">研判专刊(初稿)</span></h4></p>
|
<h4 style=\"text-align: center;\"><span style=\"color: rgb(225, 60, 57); font-size: 32px; font-family: 标楷体;\">研判专刊(初稿)</span></h4></p>
|
||||||
<p style="text-align: center;"><span style="color: rgb(225, 60, 57); font-size: 22px; font-family: 标楷体;">市公安局情指中心编 ${timeValidate(new Date(), 'td')}</span></p>
|
<p style="text-align: center;"><span style="color: rgb(225, 60, 57); font-size: 22px; font-family: 标楷体;">市公安局情指中心编 ${timeValidate(new Date(), 'td')}</span></p>
|
||||||
<hr/>`)
|
<hr/>`)
|
||||||
//编辑器配置
|
//编辑器配置
|
||||||
const editorConfig = {
|
const editorConfig = {
|
||||||
|
@ -30,8 +30,7 @@
|
|||||||
}"></Pages>
|
}"></Pages>
|
||||||
</div>
|
</div>
|
||||||
<!-- 编辑详情 -->
|
<!-- 编辑详情 -->
|
||||||
<EditAddForm v-if="show" ref="detailDiloag" :dic="{ D_GS_BQ_LX }"
|
<EditAddForm v-if="show" ref="detailDiloag" :dic="{ D_GS_BQ_LX }" @updateDate="getList" />
|
||||||
@updateDate="getList" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -149,8 +148,7 @@ const addEdit = (type, row) => {
|
|||||||
|
|
||||||
// 表格高度计算
|
// 表格高度计算
|
||||||
const tabHeightFn = () => {
|
const tabHeightFn = () => {
|
||||||
pageData.tableHeight =
|
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
|
||||||
window.innerHeight - searchBox.value.offsetHeight - 250;
|
|
||||||
window.onresize = function () {
|
window.onresize = function () {
|
||||||
tabHeightFn();
|
tabHeightFn();
|
||||||
};
|
};
|
||||||
|
@ -4,8 +4,8 @@ function resolve(dir) {
|
|||||||
return path.join(__dirname, dir);
|
return path.join(__dirname, dir);
|
||||||
}
|
}
|
||||||
|
|
||||||
const serverHost = "http://47.108.232.77:9537"//波哥
|
// const serverHost = "http://47.108.232.77:9537"//波哥
|
||||||
// const serverHost = "http://192.168.0.231:8006"//线上
|
const serverHost = "http://192.168.0.231:8006"//线上
|
||||||
// const serverHost = "http://192.168.1.117:8006"//周
|
// const serverHost = "http://192.168.1.117:8006"//周
|
||||||
// const serverHost = "http://192.168.1.98:8006"//毛毛
|
// const serverHost = "http://192.168.1.98:8006"//毛毛
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user