<template>
|
<div class="body webBody">
|
<div
|
:class="$store.state.setScreenFlag ? 'webmainBox_Active' : 'webmainBox'"
|
>
|
<div class="web__main" ref="main">
|
<div
|
class="web__main-item"
|
id="taleNodeList"
|
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 style="font-size: 20px" 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 == 'affairs'">
|
<affairs :parentdata="res.val"></affairs>
|
</div>
|
<div v-else-if="res.type == 'fileSrource'">
|
<el-divider content-position="left">"“引用:”"</el-divider>
|
<!-- <affairs :parentdata="res.val"></affairs> -->
|
</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)" style="color: white"
|
>下载报告</a
|
>
|
</div>
|
</div>
|
<div v-else-if="res.type == 'stream'">
|
<div
|
v-if="res.thinkMsg"
|
v-html="res.val"
|
class="think-markdown"
|
></div>
|
<div
|
v-else
|
v-html="res.val"
|
class="markdown-container"
|
></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>
|
</div>
|
</template>
|
|
<script>
|
import emojiParser from "wechat-emoji-parser";
|
import docx from "html-docx-js/dist/html-docx";
|
// const marked = requrire("marked");
|
import VueMarkdown from "vue-markdown";
|
import affairs from "./affairs.vue";
|
import axios from "axios";
|
import bus from "../../assets/js/bus";
|
export default {
|
name: "JwChat_list",
|
arr: [],
|
components: {
|
VueMarkdown,
|
affairs,
|
},
|
filters: {
|
setWidth(value) {
|
let width = value;
|
if (`${value}`.match(/^\d+$/)) {
|
width = value - 30 + "px";
|
}
|
if (width == "100vh") {
|
return "99vh";
|
}
|
return width;
|
},
|
},
|
props: {
|
pageConfig: {
|
type: Object,
|
default: () => ({
|
width: "100vw",
|
}),
|
},
|
list: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
data() {
|
return {
|
load: false,
|
show: false,
|
imgSrc: "",
|
videoSrc: "",
|
audioSrc: "",
|
isDisabled: true,
|
};
|
},
|
watch: {
|
load(newval) {
|
if (newval) {
|
this.$emit("load", true);
|
this.$nextTick(() => {
|
this.load = false;
|
});
|
}
|
},
|
},
|
mounted() {
|
setTimeout(() => {
|
const div = document.getElementById("taleNodeList");
|
if (div) {
|
// 设置滚动到最底部
|
div.scrollTop = div.scrollHeight;
|
}
|
}, 200);
|
},
|
methods: {
|
setrowSpan(res, name) {
|
if (Object.keys(res)[0] == name) {
|
return res["rowspan"];
|
} else {
|
return 1;
|
}
|
},
|
setDownLoadFile(res) {
|
// 使用marked将Markdown转换为HTML
|
const blob = new Blob([res.val], {
|
type: "text/markdown",
|
});
|
// 使用HTML5的Blob生成链接，让用户可以下载生成的Word文档
|
const link = URL.createObjectURL(blob);
|
const a = document.createElement("a");
|
a.href = link;
|
a.download = "报告.md";
|
a.click();
|
URL.revokeObjectURL(link);
|
},
|
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;
|
}, 200);
|
}
|
return index;
|
},
|
//处理排版
|
handleDetail(html = "") {
|
// console.log(html)
|
let result = html;
|
result = emojiParser(result).replace(
|
/(<img src)/g,
|
'<img data-class="iconBox" data-src'
|
);
|
setTimeout(() => {
|
const list = this.$refs.content;
|
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);
|
child.onclick = () => {
|
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>`;
|
}
|
}
|
}
|
});
|
}, 0);
|
return result;
|
},
|
//处理事件
|
handleEvent(params) {
|
const callback = () => {
|
if (params.type === "IMG") {
|
this.imgSrc = params.src;
|
this.show = true;
|
} else if (params.type === "VIDEO") {
|
this.videoSrc = params.src;
|
this.show = true;
|
} else if (params.type === "AUDIO") {
|
this.audioSrc = params.src;
|
this.show = true;
|
} else if (params.type === "FILE") {
|
window.open(params.src);
|
}
|
};
|
if (typeof this.beforeOpen === "function") {
|
this.beforeOpen(params, callback);
|
} else {
|
callback();
|
}
|
},
|
handleClose(done) {
|
this.imgSrc = undefined;
|
this.videoSrc = undefined;
|
this.audioSrc = undefined;
|
done();
|
},
|
},
|
};
|
</script>
|
<style scoped>
|
.web__msg--img,
|
.web__msg--video,
|
.web__msg--file {
|
position: relative;
|
max-width: 700px;
|
min-width: 500px;
|
width: 100%;
|
margin: 10px 0;
|
border: 1px solid #eee;
|
overflow: hidden;
|
border-radius: 5px;
|
cursor: pointer;
|
display: block;
|
}
|
|
.web__msg--img[data-class="iconBox"] {
|
max-width: 24px;
|
min-width: unset;
|
border: none;
|
margin: 0;
|
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;
|
}
|
.markdown-container {
|
padding: 10px;
|
white-space: pre-wrap;
|
color: #fff;
|
font-size: 16px;
|
}
|
.think-markdown {
|
font-size: 13px;
|
color: #ccc;
|
border-left: 1px solid #ccc;
|
padding-left: 5px;
|
}
|
</style>
|
<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; */
|
min-height: 68px;
|
text-align: left;
|
}
|
|
.web__main-user,
|
.web__main-text {
|
display: inline-block;
|
/* @css { * }display: inline;
|
@css { * }zoom: 1; */
|
vertical-align: top;
|
font-size: 20px;
|
background: #555555;
|
padding: 10px !important;
|
border-radius: 10px !important;
|
margin-top: 10px;
|
}
|
|
.web__main-user {
|
width: 100%;
|
/* position: absolute; */
|
left: 3px;
|
}
|
|
.web__main-user img {
|
width: 40px;
|
height: 40px;
|
border-radius: 100%;
|
}
|
|
.web__main-user cite {
|
/* 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 {
|
padding-left: 0px;
|
font-style: normal;
|
}
|
|
.citeTitle {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.web__main-text {
|
/* max-width: 40%; */
|
width: 100%;
|
position: relative;
|
line-height: 22px;
|
/* margin-top: 25px; */
|
padding: 8px 0px;
|
/* background-color: #f3f3f3; */
|
border-radius: 3px;
|
/* 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: 20px;
|
white-space: nowrap;
|
color: #f2f2f2;
|
text-align: left;
|
font-style: normal;
|
width: 100%;
|
/* display: flex; */
|
/* justify-content: space-between; */
|
}
|
|
.web__main-arrow {
|
top: 6px;
|
left: -8px;
|
position: absolute;
|
display: block;
|
width: 0;
|
height: 0;
|
border-color: transparent;
|
border-style: solid;
|
border-width: 8px;
|
border-left-width: 0;
|
/* border-right-color: #ebeef5; */
|
font-family: Microsoft YaHei;
|
}
|
|
.web__main-arrow::after {
|
content: " ";
|
top: -7px;
|
left: 1px;
|
position: absolute;
|
display: block;
|
width: 0;
|
height: 0;
|
border-color: transparent;
|
border-style: solid;
|
border-width: 7px;
|
border-left-width: 0;
|
/* border-right-color: #ebeef5; */
|
}
|
|
.web__main-item--mine .web__main-text .web__main-arrow {
|
left: auto;
|
right: -5px;
|
border-color: transparent;
|
border-style: solid;
|
border-width: 8px;
|
border-right-width: 0;
|
/* border-left-color: #f3f3f3; */
|
}
|
|
.web__main-item--mine .web__main-text .web__main-arrow::after {
|
left: auto;
|
right: -2px;
|
border-color: transparent;
|
border-style: solid;
|
border-width: 7px;
|
border-right-width: 0;
|
/* border-left-color: #f3f3f3; */
|
}
|
|
.web__main-list {
|
margin: 10px 0;
|
}
|
|
.web__main-list li {
|
height: 30px;
|
color: #409eff;
|
line-height: 30px;
|
}
|
|
.web__main-item--mine {
|
text-align: right;
|
padding-left: 0;
|
padding-right: 60px;
|
}
|
|
.web__main-item--mine .web__main-user {
|
left: auto;
|
right: 3px;
|
}
|
|
.web__main-item--mine .web__main-user cite {
|
left: auto;
|
right: 60px;
|
text-align: right;
|
}
|
|
.web__main-item--mine .web__main-user cite i {
|
padding-left: 0;
|
padding-right: 0px;
|
}
|
|
.web__main-item--mine .web__main-text {
|
margin-left: 0;
|
text-align: right;
|
/* background-color: #f3f3f3; */
|
font-family: "Arial", sans-serif;
|
font-size: 20px;
|
color: #f2f2f2;
|
}
|
|
.web__main-text img {
|
max-width: 200px;
|
}
|
|
.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: left;
|
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);
|
}
|
|
.newConcentLeft h2 {
|
padding: 30px 0px;
|
line-height: 0px;
|
border-bottom: 1px solid rgba(209, 209, 209, 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>
|
