版本更新

suerprisePlus

2024-07-16 6069325e1a37cf0462afda1627d4c660735dc57e

 src/components/Chat/chatList.vue

@@ -1,75 +1,112 @@
<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>

                  <div style="float: left;">

                    {{ item.name }}

                  </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 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 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 class="web__main-user">



           
          </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>

@@ -77,13 +114,24 @@
<script>

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",

  arr: [],

  components: {

    VueMarkdown

  },

  filters: {

    setWidth(value) {

      let width = value;

      if (`${value}`.match(/^\d+$/)) {

        width = value + "px";

        width = value - 30 + "px";

      }

      if (width == "100vh") {

        return "99vh";

      }

      return width;

    }

@@ -106,7 +154,8 @@
      show: false,

      imgSrc: "",

      videoSrc: "",

      audioSrc: ""

      audioSrc: "",

      isDisabled: true

    };

  },

  watch: {

@@ -120,6 +169,40 @@
    }

  },

  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) => {

        if (response.status == 200) {

          bus.$emit("setInsertMarkDown", response.data);

        }

      });

    },

    loding(index) {

      const size = this.list.length;

      if (index == size - 1) {

@@ -228,6 +311,7 @@
  cursor: pointer;

  display: block;

}



.web__msg--img[data-class="iconBox"] {

  max-width: 24px;

  min-width: unset;

@@ -236,8 +320,57 @@
  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;

@@ -254,6 +387,10 @@
    @css { * }zoom: 1; */

  vertical-align: top;

  font-size: 20px;

  background: #555555;

  padding: 10px !important;

  border-radius: 10px !important;

  margin-top: 10px;

}



.web__main-user {

@@ -288,11 +425,13 @@
  padding-left: 0px;

  font-style: normal;

}



.citeTitle {

  width: 100%;

  display: flex;

  justify-content: space-between;

}



.web__main-text {

  /* max-width: 40%; */

  width: 100%;

@@ -308,15 +447,18 @@
  font-size: 16px;

  word-break: break-all;

}



.web__main_content {

  width: 100%;

  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;

@@ -325,9 +467,10 @@
  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;

@@ -418,7 +561,244 @@
  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;

  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>