| | |
|---|
| | | <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-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="display: flex">
|
|---|
| | | <div style="float: left;">
|
|---|
| | | {{ item.name }}
|
|---|
| | |
|
|---|
| | | <div style="margin-left: 10px" v-show="item.file">
|
|---|
| | | <el-select
|
|---|
| | | @change="(val) => setFileChange(val)"
|
|---|
| | | v-model="item.file"
|
|---|
| | | size="mini"
|
|---|
| | | >
|
|---|
| | | <el-option
|
|---|
| | | v-for="(res, key) in item.fileList"
|
|---|
| | | :key="key"
|
|---|
| | | :label="res.name"
|
|---|
| | | :value="res.url"
|
|---|
| | | >
|
|---|
| | | </el-option>
|
|---|
| | | </el-select>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <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 v-show="item.markDown == true" class="web__main-text">
|
|---|
| | | <VueMarkdown
|
|---|
| | | class="web_Main_markDown"
|
|---|
| | | :source="item.text.text"
|
|---|
| | | ></VueMarkdown>
|
|---|
| | | </div>
|
|---|
| | | <div v-show="item.markDown == false" 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-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"
|
|---|
| | | >
|
|---|
| | | <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>
|
|---|
| | | <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>
|
|---|
| | |
|---|
| | | setWidth(value) {
|
|---|
| | | let width = value;
|
|---|
| | | if (`${value}`.match(/^\d+$/)) {
|
|---|
| | | width = value-30 + "px";
|
|---|
| | | width = value - 30 + "px";
|
|---|
| | | }
|
|---|
| | | if(width=="100vh"){
|
|---|
| | | return "99vh"
|
|---|
| | | if (width == "100vh") {
|
|---|
| | | return "99vh";
|
|---|
| | | }
|
|---|
| | | return width;
|
|---|
| | | }
|
|---|
| | |
|---|
| | | show: false,
|
|---|
| | | imgSrc: "",
|
|---|
| | | videoSrc: "",
|
|---|
| | | audioSrc: ""
|
|---|
| | | audioSrc: "",
|
|---|
| | | isDisabled: true
|
|---|
| | | };
|
|---|
| | | },
|
|---|
| | | watch: {
|
|---|
| | |
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | 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) => {
|
|---|
| | |
|---|
| | | cursor: pointer;
|
|---|
| | | display: block;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .web__msg--img[data-class="iconBox"] {
|
|---|
| | | max-width: 24px;
|
|---|
| | | min-width: unset;
|
|---|
| | |
|---|
| | | 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>
|
|---|
| | | .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;
|
|---|
| | |
|---|
| | | font-size: 20px;
|
|---|
| | | background: #555555;
|
|---|
| | | padding: 10px !important;
|
|---|
| | | border-radius:10px !important;
|
|---|
| | | margin-top:10px ;
|
|---|
| | |
|
|---|
| | | border-radius: 10px !important;
|
|---|
| | | margin-top: 10px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .web__main-user {
|
|---|
| | |
|---|
| | | padding-left: 0px;
|
|---|
| | | font-style: normal;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .citeTitle {
|
|---|
| | | width: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | justify-content: space-between;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .web__main-text {
|
|---|
| | | /* max-width: 40%; */
|
|---|
| | | width: 100%;
|
|---|
| | |
|---|
| | | font-size: 16px;
|
|---|
| | | word-break: break-all;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .web__main_content {
|
|---|
| | | width: calc(100% - 50px);
|
|---|
| | | 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;
|
|---|
| | |
|---|
| | | text-align: left;
|
|---|
| | | font-style: normal;
|
|---|
| | | width: 100%;
|
|---|
| | | display: flex;
|
|---|
| | | justify-content: space-between;
|
|---|
| | | /* display: flex; */
|
|---|
| | | /* justify-content: space-between; */
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .web__main-arrow {
|
|---|
| | | top: 6px;
|
|---|
| | | left: -8px;
|
|---|
| | |
|---|
| | | font-size: 16px;
|
|---|
| | | 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;
|
|---|
| | |
|---|
| | |
|
|---|
| | | @keyframes round {
|
|---|
| | | 0% {
|
|---|
| | | transform: rotate(0deg); /* 开始旋转 div 元素 */
|
|---|
| | | transform: rotate(0deg);
|
|---|
| | | /* 开始旋转 div 元素 */
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 100% {
|
|---|
| | | transform: rotate(360deg); /* 结束旋转 div 元素 */
|
|---|
| | | 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: 30px !important;
|
|---|
| | | <style>
|
|---|
| | | /* .web_Main_markDown h1 {
|
|---|
| | | line-height: 20px !important;
|
|---|
| | | font-size: 20px !important;
|
|---|
| | | }
|
|---|
| | | .web_Main_markDown h2 {
|
|---|
| | | line-height: 25px !important;
|
|---|
| | |
|
|---|
| | | .web_Main_markDown h2 {
|
|---|
| | | line-height: 20px !important;
|
|---|
| | | font-size: 18px !important;
|
|---|
| | | margin-left: 10px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .web_Main_markDown h3 {
|
|---|
| | | line-height: 25px !important;
|
|---|
| | | line-height: 20px !important;
|
|---|
| | | font-size: 18px !important;
|
|---|
| | | margin-left: 10px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .web_Main_markDown li {
|
|---|
| | | line-height: 20px !important;
|
|---|
| | | line-height: 15px !important;
|
|---|
| | | font-size: 16px !important;
|
|---|
| | | margin-left: 20px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .web_Main_markDown p {
|
|---|
| | | line-height: 20px !important;
|
|---|
| | | line-height: 15px !important;
|
|---|
| | | font-size: 16px !important;
|
|---|
| | | margin-left: 20px;
|
|---|
| | | }
|
|---|
| | | .web_Main_markDown {
|
|---|
| | | background: #555555;
|
|---|
| | | padding: 10px;
|
|---|
| | | border-radius: 10px;
|
|---|
| | | }
|
|---|
| | | </style> |
|---|
| | |
|
|---|
| | | .web_Main_markDown {
|
|---|
| | | background: #555555;
|
|---|
| | | padding: 10px;
|
|---|
| | | border-radius: 10px;
|
|---|
| | | } */
|
|---|
| | | </style>
|
|---|
