qa-prevention-gwj-vue/src/views/emergen_cyrescue/emergency_map/components/sysChat.vue

<template>
  <div class="sys_chat_container">
    <div v-for="(item, ind) in chatData" :key="ind" class="chat_body">
      <p class="chat_title">{{ '指令：' + item.info.MESS }}</p>
      <p v-for="(answer, indx) in item.list" :key="indx" :class="{ 'ready': answer.READ_STATUS === '1'}" class="chat_item">
        <span v-if="answer.IDENT_SIGN === '1'" class="chat_item_head">{{ answer.SEND_MEN_NAME + ' 回复:' }} </span>
        <span v-if="answer.IDENT_SIGN === '1'" class="chat_item_content">{{ answer.MESS }}</span>
        <span v-if="answer.IDENT_SIGN === '2'" class="chat_item_head">{{ answer.RECEIVED_MEN_NAME + ' :' }}</span>
        <span v-if="answer.READ_STATUS === '1' && answer.IDENT_SIGN !== '1'" class="chat_ready">已读</span>
        <span v-if="answer.READ_STATUS === '0' && answer.IDENT_SIGN !== '1'" class="chat_ready">未读</span>
        <span v-if="answer.READ_STATUS === '1' && answer.IDENT_SIGN === '1'" class="chat_ready">已确认</span>
        <span v-if="answer.READ_STATUS === '0' && answer.IDENT_SIGN === '1'" class="chat_ready" @click="confirmReceipt(answer)">未确认</span>
      </p>
    </div>
    <div class="order">
      <button style="text-align: right" @click="backList">返回列表</button>
      <button style="text-align: right" @click="endRescue">结束救援</button>
      <button @click="sendOrderBtn">发送指令</button>
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
export default {

  props: {
    chatData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      this.smoothScrollToBottom()
    })
  },
  methods: {
    sendOrderBtn() {
      this.$emit('orderMessage', '')
    },
    endRescue() {
      this.$confirm('确定是否结束救援?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('endRescue', '')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    backList() {
      this.$emit('backList', '')
    },
    confirmReceipt(answer) {
      requestFN('/bi/emergency/readInstruct', { ID: answer.ID })
        .then((data) => {
          this.$message({
            message: '确认已收到指令',
            type: 'success'
          })
          this.$emit('reFlush', '')
        }).catch((error) => {
          console.log(error)
        })
    },
    smoothScrollToBottom() {
      const container = document.querySelector('.sys_chat_container')
      const scrollHeight = container.scrollHeight
      const start = container.scrollTop
      const distance = (scrollHeight + 400) - start
      const duration = 3000
      let startTime

      function animation(currentTime) {
        if (!startTime) startTime = currentTime
        const timeElapsed = currentTime - startTime
        const progress = Math.min(timeElapsed / duration, 1)
        container.scrollTop = start + distance * easeInOutQuad(progress)

        if (progress < 1) {
          requestAnimationFrame(animation)
        }
      }

      function easeInOutQuad(t) {
        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
      }

      requestAnimationFrame(animation)
    }
  }
}
</script>

<style scoped lang="scss">
.sys_chat_container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  color: #ffffff;
  font-size: 15px;
  position: relative;

  & > h5, p, span {
    padding: 0;
    margin: 0;
  }

  .chat_body {
    border-radius: 6px;
    background: #0021649c;
    width: 100%;
    padding: 6px 0 0 18px;

    .chat_title {
      font-size: 16px;
      padding: 8px 0;
    }

    .chat_content {
      position: relative;
      color: rgb(255, 255, 255);
      // 小圆点伪类样式
      &::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        background-color: rgb(255, 0, 0);
        position: absolute;
        left: -12px;
        top: 5px;
        border-radius: 50%;
      }
    }

    .chat_content.ready::before {
      background-color: rgb(19, 223, 0);
    }

    .chat_item {
      padding: 10px 0;
      position: relative;
      border-bottom: 1px solid rgb(15 57 123);

      // 小圆点伪类样式
      &::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        background-color: rgb(255, 0, 0);
        position: absolute;
        left: -12px;
        top: 14px;
        border-radius: 50%;
      }

      .chat_item_head {
        color: #ffffff;
      }

      .chat_item_content {
        font-size: 14px;
      }

      .chat_ready {
        margin-left: 3px;
        font-size: 12px;
        background-color: #2b82cd;
        color: #ffffff;
        display: inline-block;
        padding: 3px;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
      }
    }

    .chat_item.ready::before {
      background-color: rgb(19, 223, 0);
    }

    & > p:last-child {
      border-bottom: none;
    }
  }

  .order {
    position: fixed;
    bottom: 25px;
    right: 25px;

    & > button {
      transition: all ease-in-out .3s;
      cursor: pointer;
      padding: 7px;
      border-radius: 3px;
      border: none;
      background-color: #5f78ff47;
      color: #fff;
      font-weight: 600;
      backdrop-filter: blur(16px);

      &:hover {
        background-color: #5f77ff75;
      }
    }
  }
}
</style>