From 6069325e1a37cf0462afda1627d4c660735dc57e Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期二, 16 七月 2024 09:51:56 +0800
Subject: [PATCH] 版本更新
---
src/components/Chat/chatList.vue | 704 +++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 572 insertions(+), 132 deletions(-)
diff --git a/src/components/Chat/chatList.vue b/src/components/Chat/chatList.vue
index ed7eda0..6286115 100644
--- a/src/components/Chat/chatList.vue
+++ b/src/components/Chat/chatList.vue
@@ -1,70 +1,139 @@
<template>
- <div class="body">
- <div :style="pageConfig.width|setWidth">
+ <div class="body webBody">
+ <div :class="$store.state.setScreenFlag ? 'webmainBox_Active' : 'webmainBox'">
<div class="web__main" ref="main">
- <div
- class="web__main-item"
- v-for="(item,index) in list"
- :key="loding(index)"
- :class="{'web__main-item--mine':item.mine}"
- >
- <div class="web__main-user">
- <img :src="item.img" />
- <cite>
- {{item.name}}
- <i>{{item.date}}</i>
- </cite>
- </div>
- <div class="web__main-text">
- <div class="web__main-arrow"></div>
- <span v-html="handleDetail(item.text.text)" ref="content"></span>
- <ul class="web__main-list" v-if="item.text.list">
- <li
- @click="handleItemMsg(citem)"
- v-for="(citem,cindex) in item.text.list"
- :key="cindex"
- >{{citem.text}}</li>
- </ul>
+ <div class="web__main-item" v-for="(item, index) in list" :key="loding(index)"
+ :class="{ 'web__main-item--mine': item.mine }">
+ <div class="web__main_content">
+ <div>
+ <img :src="item.img" />
+ </div>
+
+ <div class="web__main_Date">
+ <div>
+ <cite>
+ <div style="float: left;">
+ {{ item.name }}
+ </div>
+ <div v-show="item.sourceValue" class="sourcefrom" style="float: left;margin-left:20px">
+ <el-select size="small" v-model="item.sourceValue" placeholder="璧勬枡鏉ユ簮">
+ <el-option value="1" label="GEDB"></el-option>
+ <el-option value="2" label="GeoAgent"></el-option>
+ </el-select>
+ </div>
+ <div style="float: right;">
+ {{ item.date }}
+ </div>
+ </cite>
+ </div>
+ <div class="web__main-text">
+ <div v-for="(res, key) in item.list" :key="key">
+ <div v-if="res.type === 'html'">
+ <div v-html="res.val"></div>
+ </div>
+ <div v-if="res.type === 'JsonHtml'">
+ <div class="JsonHtml">
+ <table>
+ <tr>
+ <th v-show="index != 'rowspan'" v-for="(item, index) in res.val[0]" :key=index>
+ {{ index }}
+ </th>
+ </tr>
+ <tr v-if="!item.break" v-for="(item, index) in res.val" :key=index>
+ <td v-if="item.rowspan != ''" :rowspan="item.rowspan">
+ {{ item[Object.keys(item)[0]] }}
+ </td>
+ <td v-if="Object.keys(item)[0] != n && n != 'rowspan'" v-for="(rs, n ) in item " :key="n"> {{
+ item[n] }}</td>
+ <!-- -->
+ </tr>
+
+ </table>
+ <div>
+ <p v-for="(item, index) in res.val[res.val.length - 1].break" :key=index>
+ {{ item.bak }}
+ </p>
+ </div>
+ </div>
+ </div>
+ <div v-if="res.type === 'text'">
+ {{ res.val }}
+ </div>
+ <div v-else-if="res.type == 'loader'">
+ <span v-html="handleDetail(res.val)" ref="content"></span>
+ </div>
+ <div v-else-if="res.type == 'markdown'">
+ <vue-markdown :source="res.val" class="newConcentLeft my-markdown"></vue-markdown>
+ <div v-show="res.link" style="float: right; ">
+ <a @click="setDownLoadFile(res.link)" style="color: white">涓嬭浇鎶ュ憡</a>
+ </div>
+ </div>
+ <div v-else-if="res.type == 'table'">
+ <table class="contTable">
+ <thead>
+ <th v-for="(item, index) in res.val[0]" :key="index">
+ {{ item }}
+ </th>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in res.val[1]" :key="index">
+ <td v-for="(rs, flag) in item" :key="flag">
+ {{ rs }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div style="margin-bottom: 10px" v-else-if="res.type == 'rag'">
+ <div v-show="res.acction">
+ {{ res.acction }}
+ </div>
+ <div>{{ res.question }}</div>
+ <div style="display: flex">
+ 鏉ユ簮: {{ res.source }}
+ <div @click.stop="setRagMoreList(res.msg)" class="setRagMore" v-show="res.more">
+ ...鏇村
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
</div>
- <el-dialog
- :visible.sync="show"
- width="40%"
- append-to-body
- :before-close="handleClose"
- class="web__dialog"
- >
- <img :src="imgSrc" v-if="imgSrc" style="width:100%;object-fit: cover;" />
- <video
- :src="videoSrc"
- v-if="videoSrc"
- style="width:100%;object-fit: cover;"
- controls="controls"
- ></video>
- <audio
- :src="audioSrc"
- v-if="audioSrc"
- style="width:100%;object-fit: cover;"
- controls="controls"
- ></audio>
+ <el-dialog :visible.sync="show" width="40%" append-to-body :before-close="handleClose" class="web__dialog">
+ <img :src="imgSrc" v-if="imgSrc" style="width: 100%; object-fit: cover" />
+ <video :src="videoSrc" v-if="videoSrc" style="width: 100%; object-fit: cover" controls="controls"></video>
+ <audio :src="audioSrc" v-if="audioSrc" style="width: 100%; object-fit: cover" controls="controls"></audio>
</el-dialog>
</div>
</template>
<script>
-import emojiParser from 'wechat-emoji-parser'
+import emojiParser from "wechat-emoji-parser";
+import VueMarkdown from "vue-markdown";
+
+import axios from "axios";
+import bus from "../../assets/js/bus";
export default {
- name: 'JwChat_list',
+ name: "JwChat_list",
+ arr: [],
+ components: {
+ VueMarkdown
+ },
filters: {
- setWidth (value) {
- let width = value
+ setWidth(value) {
+ let width = value;
if (`${value}`.match(/^\d+$/)) {
- width = value + 'px'
+ width = value - 30 + "px";
}
- return width
+ if (width == "100vh") {
+ return "99vh";
+ }
+ return width;
}
},
props: {
@@ -76,114 +145,158 @@
},
list: {
type: Array,
- default: () => ([])
+ default: () => []
}
},
- data () {
+ data() {
return {
load: false,
show: false,
- imgSrc: '',
- videoSrc: '',
- audioSrc: ''
- }
+ imgSrc: "",
+ videoSrc: "",
+ audioSrc: "",
+ isDisabled: true
+ };
},
watch: {
- load (newval) {
+ load(newval) {
if (newval) {
- this.$emit('load', true)
+ this.$emit("load", true);
this.$nextTick(() => {
- this.load = false
- })
+ this.load = false;
+ });
}
}
},
methods: {
- loding (index) {
- const size = this.list.length
+ setrowSpan(res, name) {
+ if (Object.keys(res)[0] == name) {
+ return res['rowspan']
+ } else {
+ return 1
+ }
+ },
+ setDownLoadFile(res) {
+ const downloadLink = document.createElement('a');
+ downloadLink.href = res
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+
+ },
+ setRagMoreList(res) {
+ if (this.isDisabled) {
+ this.isDisabled = false;
+ setTimeout(() => {
+ bus.$emit("setRagMoreListAll", res);
+ }, 500);
+ setTimeout(() => {
+ this.isDisabled = false;
+ }, 3000);
+ }
+ },
+ setFileChange(res) {
+ if (res == "testUrl") return;
+ axios.get(res).then((response) => {
+ if (response.status == 200) {
+ bus.$emit("setInsertMarkDown", response.data);
+ }
+ });
+ },
+ loding(index) {
+ const size = this.list.length;
if (index == size - 1) {
setTimeout(() => {
- this.load = true
+ this.load = true;
}, 200);
}
- return index
+ return index;
},
//澶勭悊鎺掔増
- handleDetail (html = '') {
+ handleDetail(html = "") {
// console.log(html)
let result = html;
- result = emojiParser(result).replace(/(<img src)/g, '<img data-class="iconBox" data-src')
+ result = emojiParser(result).replace(
+ /(<img src)/g,
+ '<img data-class="iconBox" data-src'
+ );
setTimeout(() => {
const list = this.$refs.content;
- list.forEach(ele => {
+ list.forEach((ele) => {
for (let i = 0; i < ele.children.length; i++) {
const child = ele.children[i];
- if (child.getAttribute('data-flag') != 0) {
- child.setAttribute('data-flag', 0)
+ if (child.getAttribute("data-flag") != 0) {
+ child.setAttribute("data-flag", 0);
child.onclick = () => {
- this.handleEvent(child)
+ this.handleEvent(child);
};
- if (child.tagName === 'IMG') {
- child.className = 'web__msg--img'
- const icon = child.getAttribute('data-class')
- if (icon !== 'iconBox') child.type = "IMG"
- child.src = child.getAttribute('data-src')
- } else if (child.tagName === 'VIDEO') {
- child.type = "VIDEO"
- child.className = 'web__msg--video'
- child.src = child.getAttribute('data-src')
- } else if (child.tagName === 'AUDIO') {
- child.type = "AUDIO"
- child.className = 'web__msg--audio'
- child.controls = 'controls';
- child.src = child.getAttribute('data-src')
- } else if (child.tagName === 'FILE') {
- child.type = "FILE"
- child.className = 'web__msg--file'
- child.innerHTML = `<h2>File</h2><span>${child.getAttribute('data-name')}</span>`
- } else if (child.tagName === 'MAP') {
- child.type = "MAP"
- child.className = 'web__msg--file web__msg--map'
- child.innerHTML = `<h2>Map</h2><span>${child.getAttribute('data-longitude')} , ${child.getAttribute('data-latitude')}<br />${child.getAttribute('data-address')}</span>`
+ if (child.tagName === "IMG") {
+ child.className = "web__msg--img";
+ const icon = child.getAttribute("data-class");
+ if (icon !== "iconBox") child.type = "IMG";
+ child.src = child.getAttribute("data-src");
+ } else if (child.tagName === "VIDEO") {
+ child.type = "VIDEO";
+ child.className = "web__msg--video";
+ child.src = child.getAttribute("data-src");
+ } else if (child.tagName === "AUDIO") {
+ child.type = "AUDIO";
+ child.className = "web__msg--audio";
+ child.controls = "controls";
+ child.src = child.getAttribute("data-src");
+ } else if (child.tagName === "FILE") {
+ child.type = "FILE";
+ child.className = "web__msg--file";
+ child.innerHTML = `<h2>File</h2><span>${child.getAttribute(
+ "data-name"
+ )}</span>`;
+ } else if (child.tagName === "MAP") {
+ child.type = "MAP";
+ child.className = "web__msg--file web__msg--map";
+ child.innerHTML = `<h2>Map</h2><span>${child.getAttribute(
+ "data-longitude"
+ )} , ${child.getAttribute(
+ "data-latitude"
+ )}<br />${child.getAttribute("data-address")}</span>`;
}
}
}
});
- }, 0)
+ }, 0);
return result;
},
//澶勭悊浜嬩欢
- handleEvent (params) {
+ handleEvent(params) {
const callback = () => {
- if (params.type === 'IMG') {
+ if (params.type === "IMG") {
this.imgSrc = params.src;
this.show = true;
- } else if (params.type === 'VIDEO') {
+ } else if (params.type === "VIDEO") {
this.videoSrc = params.src;
this.show = true;
- } else if (params.type === 'AUDIO') {
+ } else if (params.type === "AUDIO") {
this.audioSrc = params.src;
this.show = true;
- } else if (params.type === 'FILE') {
- window.open(params.src)
+ } else if (params.type === "FILE") {
+ window.open(params.src);
}
- }
- if (typeof this.beforeOpen === 'function') {
- this.beforeOpen(params, callback)
+ };
+ if (typeof this.beforeOpen === "function") {
+ this.beforeOpen(params, callback);
} else {
callback();
}
},
- handleClose (done) {
+ handleClose(done) {
this.imgSrc = undefined;
this.videoSrc = undefined;
this.audioSrc = undefined;
done();
- },
- },
-}
+ }
+ }
+};
</script>
-<style>
+<style scoped>
.web__msg--img,
.web__msg--video,
.web__msg--file {
@@ -198,6 +311,7 @@
cursor: pointer;
display: block;
}
+
.web__msg--img[data-class="iconBox"] {
max-width: 24px;
min-width: unset;
@@ -206,16 +320,64 @@
vertical-align: bottom;
display: inline-block;
}
+
+.contTable {
+ border: 1px solid white;
+ font-family: "Arial", sans-serif !important;
+}
+
+.contTable th {
+ border: 1px solid white;
+ padding: 10px;
+ text-align: center;
+ font-size: 16px;
+}
+
+.contTable td {
+ border: 1px solid white;
+ padding: 10px;
+ text-align: center;
+ font-size: 14px;
+}
</style>
-<style scoped>
+<style scoped>
+.webBody {
+ display: flex;
+ justify-content: center;
+}
+
+/deep/.el-select:hover .el-input__inner {
+ background-color: rgba(255, 255, 255, 0.1) !important;
+ color: #ffffff !important;
+}
+
+/deep/ .el-input__inner {
+ background-color: rgba(255, 255, 255, 0.1) !important;
+ padding: 0 10px !important;
+ color: #ffffff !important;
+
+}
+
+/deep/.el-input--small .el-input__inner {
+ height: 30px;
+ font-size: 12px;
+}
+
+.webmainBox {
+ width: 50%;
+}
+
+.webmainBox_Active {
+ width: 90%;
+}
+
.web__main-item {
position: relative;
font-size: 0;
- margin-bottom:30px;
- padding-left: 60px;
+ margin-bottom: 30px;
+ /* padding-left: 60px; */
min-height: 68px;
text-align: left;
-
}
.web__main-user,
@@ -225,10 +387,15 @@
@css { * }zoom: 1; */
vertical-align: top;
font-size: 20px;
+ background: #555555;
+ padding: 10px !important;
+ border-radius: 10px !important;
+ margin-top: 10px;
}
.web__main-user {
- position: absolute;
+ width: 100%;
+ /* position: absolute; */
left: 3px;
}
@@ -239,16 +406,19 @@
}
.web__main-user cite {
- position: absolute;
- left: 60px;
- top: -2px;
- /* width: 500px; */
+ /* position: absolute; */
+ /* left: 60px;
+ top: -2px; */
line-height: 24px;
font-size: 18px;
white-space: nowrap;
color: #999;
text-align: left;
font-style: normal;
+ width: 100%;
+ font-family: "Arial", sans-serif;
+ display: flex;
+ justify-content: space-between;
}
.web__main-user cite i {
@@ -256,17 +426,49 @@
font-style: normal;
}
+.citeTitle {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+
.web__main-text {
- max-width: 40%;
+ /* max-width: 40%; */
+ width: 100%;
position: relative;
line-height: 22px;
- margin-top: 25px;
- padding: 8px 15px;
- background-color: #f3f3f3;
+ /* margin-top: 25px; */
+ padding: 8px 0px;
+ /* background-color: #f3f3f3; */
border-radius: 3px;
- border: 1px solid #f0f0f0;
- color: #000;
+ /* border: 1px solid #f0f0f0; */
+ color: #f2f2f2;
+ font-family: "Arial", sans-serif;
+ font-size: 16px;
word-break: break-all;
+}
+
+.web__main_content {
+ width: calc(100% - 50px);
+ padding: 10px 0px;
+ display: flex;
+}
+
+.web__main_Date {
+ flex: 1;
+ padding: 0px 15px;
+}
+
+.web__main_Date cite {
+ line-height: 24px;
+ font-size: 14px;
+ white-space: nowrap;
+ color: #f2f2f2;
+ text-align: left;
+ font-style: normal;
+ width: 100%;
+ /* display: flex; */
+ /* justify-content: space-between; */
}
.web__main-arrow {
@@ -280,7 +482,7 @@
border-style: solid;
border-width: 8px;
border-left-width: 0;
- border-right-color: #ebeef5;
+ /* border-right-color: #ebeef5; */
font-family: Microsoft YaHei;
}
@@ -296,7 +498,7 @@
border-style: solid;
border-width: 7px;
border-left-width: 0;
- border-right-color: #ebeef5;
+ /* border-right-color: #ebeef5; */
}
.web__main-item--mine .web__main-text .web__main-arrow {
@@ -306,7 +508,7 @@
border-style: solid;
border-width: 8px;
border-right-width: 0;
- border-left-color: #f3f3f3;
+ /* border-left-color: #f3f3f3; */
}
.web__main-item--mine .web__main-text .web__main-arrow::after {
@@ -316,7 +518,7 @@
border-style: solid;
border-width: 7px;
border-right-width: 0;
- border-left-color: #f3f3f3;
+ /* border-left-color: #f3f3f3; */
}
.web__main-list {
@@ -353,12 +555,250 @@
.web__main-item--mine .web__main-text {
margin-left: 0;
- text-align: left;
- background-color: #f3f3f3;
- font-family: Microsoft YaHei;
- /* color: #fff; */
+ text-align: right;
+ /* background-color: #f3f3f3; */
+ font-family: "Arial", sans-serif;
+ font-size: 16px;
+ color: #f2f2f2;
}
+
.web__main-text img {
max-width: 200px;
}
-</style>
\ No newline at end of file
+
+.setRagMore {
+ margin-left: 10px;
+}
+
+.setRagMore:hover {
+ color: #409eff;
+}
+</style>
+<style>
+.el-select-dropdown {
+ background-color: #555555 !important;
+ color: #409eff !important;
+
+}
+
+.el-select-dropdown__item {
+ color: #ffffff !important;
+ background: transparent !important;
+}
+
+.el-select-dropdown__item.selected {
+ color: #409eff !important;
+ background: transparent !important;
+}
+
+.el-select-dropdown__item.selected span {
+ color: #409eff !important;
+ background: transparent !important;
+
+}
+
+.el-select-dropdown__item:hover {
+ /* background-color: #555555 !important; */
+ color: #409eff !important;
+}
+
+.parentBox {
+ height: 100%;
+ /* background: rgb(31, 31, 31); */
+ padding: 20px;
+}
+
+.loadBox .loaderContantBox {
+ color: white;
+ font-size: 40px;
+ overflow: hidden;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ transform: translateZ(0);
+ /* animation锛氳瀹氬畬鎴愬姩鐢绘墍鑺辫垂鐨勬椂闂达紝璇ュ睘鎬у繀椤昏瀹氾紝鍚﹀垯鍔ㄧ敾鏃堕暱涓�0锛屾棤娉曟挱鏀� */
+ animation: loadBox 1.7s infinite ease, round 1.7s infinite ease;
+}
+
+@keyframes loadBox {
+ 0% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+
+ 5%,
+ 95% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+
+ 10%,
+ 59% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
+ -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
+ -0.297em -0.775em 0 -0.477em;
+ }
+
+ 20% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
+ -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
+ -0.749em -0.34em 0 -0.477em;
+ }
+
+ 38% {
+ box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
+ -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
+ -0.82em -0.09em 0 -0.477em;
+ }
+
+ 100% {
+ box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
+ 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+ }
+}
+
+@keyframes round {
+ 0% {
+ transform: rotate(0deg);
+ /* 寮�濮嬫棆杞� div 鍏冪礌 */
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ /* 缁撴潫鏃嬭浆 div 鍏冪礌 */
+ }
+}
+
+.newConcentLeft {
+ margin: 16px;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 400;
+ font-size: 14px;
+
+ text-align: left;
+ font-style: normal;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+.JsonHtml table {
+ border: 1px solid white;
+ text-align: center;
+ line-height: 30px;
+ font-family: "Arial", sans-serif;
+ font-size: 16px;
+}
+
+.JsonHtml tr {
+ border: 1px solid white;
+
+}
+
+.JsonHtml th {
+ border: 1px solid white;
+ padding: 10px 10px;
+}
+
+.JsonHtml td {
+ border: 1px solid white;
+ padding: 10px 10px;
+
+}
+
+
+
+.newConcentLeft table {
+ border: 1px solid white;
+ text-align: center;
+ line-height: 30px;
+ font-family: "Arial", sans-serif;
+ font-size: 16px;
+}
+
+.newConcentLeft tr {
+ border: 1px solid white;
+
+}
+
+.newConcentLeft th {
+ border: 1px solid white;
+
+}
+
+.newConcentLeft td {
+ border: 1px solid white;
+
+}
+
+.newConcentLeft img {
+ width: 75%;
+}
+
+.newConcentLeft table {
+ width: 100%;
+}
+
+.newConcentLeft pre {
+ white-space: normal;
+}
+
+.newConcentLeft li {
+
+ font-size: 15px !important;
+ line-height: 15px !important;
+ list-style: disc;
+}
+
+.newConcentLeft p {
+ font-size: 15px !important;
+ /* */
+}
+.newConcentLeft h1 {
+ font-size: 2rem !important;
+ padding: 20px 0px;
+ border-bottom: 1px solid rgba(209, 209, 209, 0.0);
+}
+.newConcentLeft h2 {
+ padding:30px 0px;
+ line-height: 0px;
+ border-bottom: 1px solid rgba(209, 209, 209, 0.0);
+ /* */
+}
+</style>
+
+<style>
+/* .web_Main_markDown h1 {
+ line-height: 20px !important;
+ font-size: 20px !important;
+}
+
+.web_Main_markDown h2 {
+ line-height: 20px !important;
+ font-size: 18px !important;
+ margin-left: 10px;
+}
+
+.web_Main_markDown h3 {
+ line-height: 20px !important;
+ font-size: 18px !important;
+ margin-left: 10px;
+}
+
+.web_Main_markDown li {
+ line-height: 15px !important;
+ font-size: 16px !important;
+ margin-left: 20px;
+}
+
+.web_Main_markDown p {
+ line-height: 15px !important;
+ font-size: 16px !important;
+ margin-left: 20px;
+}
+
+.web_Main_markDown {
+ background: #555555;
+ padding: 10px;
+ border-radius: 10px;
+} */
+</style>
--
Gitblit v1.9.3