sifa-mp/legalOrgCheck/pages/result.vue

<template>
  <view class="min-height bg-main-light">
    <HeaderItem :title="title"/>
    <view class="p-30 bg-linear text-25 text-white pos-r" style="border-radius: 0 0 1000rpx 1000rpx" id="tag0">
      <view class="flex justify-center items-center">
        <view>贵公司（单位）存在的</view>
        <view class="text-orange">{{ title }}</view>
        <view>为</view>
      </view>
      <view class="flex justify-center items-center pos-r mt-25">
        <piaoyiProgressBar canvasId="progressCanvas4" :progress="25" backgroundColor="#EFEFF4"
                           progressBackgroundColor="#FFC923" :showText="false" textColor="#000000" :textSize="24"
                           :height="10"
                           :isCircular="true" :diameter="100"></piaoyiProgressBar>
        <view class="flex justify-center items-center text-20 pos-a w-100p" style="left: 0; top: 0; height: 100rpx">
          {{ point }}分
        </view>
      </view>
      <view class="mt-25 text-25 text-white text-center">(数值越高风险越大)</view>
      <view class="pos-a w-100p flex justify-center items-center" style="bottom: -50rpx; left: 0">
        <u-button :customStyle="levelStyle" shape="circle">
          {{ comment }}
        </u-button>
      </view>
    </view>
    <u-gap height="40rpx"></u-gap>
    <view class="card m-30 text-25" style="text-indent: 50rpx">
      您好! 感谢您使用“企业法治体检”对贵企业进行法律风险评估，根据您描述，结合人工智能技术，为你生成企业法治体检风险指数报告，以供参考，经评测，贵企业企业合同风险分析如下:
    </view>
    <view class="card m-30" id="tag1">
      <view v-if="loading" class="p-15 flex justify-center items-center">
        <u-loading-icon mode="semicircle" :color="MAIN()"></u-loading-icon>
      </view>
      <zero-markdown-view :markdown="returnContent" v-else></zero-markdown-view>
    </view>
    <view class="card m-30 text-25" id="tag2">
      <view class="font-bold text-center">---温馨提示---</view>
      <view style="text-indent: 50rpx" class="my-15">
        平台提醒:您的企业有着较高的企业合同风险防范意识，基本可以很好的避免企业合同风险，但此次测评仅从单一的法律领域内进行的评估，此后您的企业可在专业人士的指导下从多方法律领域进行评估，就其他可能存在风险的问题进行完善，进一步提高防控水平，以更好地规范公司各项制度。
      </view>
      <view style="color: #77A5CD">请注意:此次测评仅以公司经营过程中常见法律风险为参数进行评估，测评结果仅供参考。</view>
    </view>
    <u-gap height="200rpx"></u-gap>
    <view class="footer flex justify-center items-center text-white text-25">
      <view class="bg-main flex-1 p-20 text-center" @click="showGuide = true">报告导航</view>
      <view class="bg-orange flex-1 p-20 text-center" @click="download">下载报告</view>
      <view class="bg-main flex-1 p-20 text-center" @click="back">重做</view>
    </view>
    <u-popup :show="showGuide" close-on-click-overlay @close="showGuide = false" round="10"
             :closeable="false" mode="bottom"
             :safe-area-inset-bottom="false">
      <view class="pos-r">
        <view class="p-25 border-bottom" @click="jumpTo(0)">风险等级</view>
        <view class="p-25 border-bottom" @click="jumpTo(1)">AI分析</view>
        <view class="p-25 border-bottom" @click="jumpTo(2)">温馨提示</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import HeaderItem from "@/components/HeaderItem.vue";
import {listArticleReq} from "@/api/common";
import {
  addLegalOrgCheckContentReq,
  listLegalOrgCheckTypeInfoReq,
  updateLegalOrgCheckContentReq
} from "@/api/legalOrgCheck";
import piaoyiProgressBar
  from '@/uni_modules/piaoyi-progress-bar/components/piaoyi-progress-bar/piaoyi-progress-bar.vue';
import {WS_API} from "@/config";
import {getUserInfo} from "@/util/user";
import {sendChatReq} from "@/api/lawOrg";
import {MAIN} from "@/config/color";

export default {
  name: "result",
  components: {HeaderItem, piaoyiProgressBar},
  data() {
    return {
      title: '',
      typeId: null,
      content: [],
      config: null,
      articleList: [],
      point: 0,
      levelStyle: {
        color: 'white',
        background: 'linear-gradient(97.98deg, rgba(255,201,35,1) 30.49%,rgba(255,144,10,1) 78.96%)',
        border: 0,
        width: '300rpx'
      },
      comment: '',
      returnContent: '',
      loading: false,
      aiDone: false,
      id: null,
      showGuide: false,
    }
  },
  methods: {
    MAIN() {
      return MAIN
    },
    back() {
      uni.navigateBack()
    },
    async getConfig() {
      const {data} = await listLegalOrgCheckTypeInfoReq(this.typeId)
      this.config = data
      if (this.config.scoreConfig) {
        JSON.parse(this.config.scoreConfig).map(item => {
          if (item.minPoint < this.point && this.point <= item.maxPoint) {
            this.comment = item.title
          }
        })
      }
      await this.getArticleList()
    },
    async getArticleList() {
      const {data} = await listArticleReq({
        categoryId: this.config.articleCateId
      })
      this.articleList = data
    },
    downloadFile(file) {
      uni.showLoading({title: '加载中'})
      uni.downloadFile({
        url: file,
        success: function (res) {
          uni.hideLoading()
          uni.openDocument({
            showMenu: true,
            filePath: res.tempFilePath
          })
        }
      })
    },
    copy(url) {
      uni.setClipboardData({
        data: url,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },
    async addLog(title, content, point) {
      const {data} = await addLegalOrgCheckContentReq({
        title,
        content,
        point: parseFloat(point)
      })
      this.id = data
    },
    jumpTo(id) {
      uni.pageScrollTo({
        selector: `#tag${id}`,
        duration: 300
      })
      this.showGuide = false
    },
    download(){
      if (!this.aiDone) return this.$toast('请先等待AI回答完毕')
      this.$jump(`/legalOrgCheck/pages/pdfResult?id=${this.id}&typeId=${this.typeId}`)
    }
  },
  onLoad({title, typeId, point}) {
    this.title = title
    this.typeId = typeId
    this.point = point
    this.getConfig()
    const eventChannel = this.getOpenerEventChannel();
    this.returnContent = ''
    eventChannel.on('content', data => {
      this.content = data
      this.addLog(title, JSON.stringify(data), point)
      let query = `帮我分析${this.title}`
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        query += `${item.quest}: ${item.answer};`
      }
      uni.connectSocket({
        url: `${WS_API}/${getUserInfo().uid}`,
        success: () => {
          this.loading = true
          this.aiDone = false
          sendChatReq({
            query,
            user: getUserInfo().uid
          }).finally(() => {
            uni.closeSocket()
          })
        }
      })
      const _this = this
      uni.onSocketMessage(res => {
        if (res.data === '连接成功') return
        this.loading = false
        const aiData = JSON.parse(res.data)
        if (aiData.answer !== '__END__') this.returnContent += aiData.answer
        else {
          updateLegalOrgCheckContentReq({
            id: _this.id,
            aiContent: _this.returnContent
          }).then(() => {
            _this.aiDone = true
          })
        }
      })
    })
  },
  onHide() {
    uni.closeSocket()
  },
  onUnload() {
    uni.closeSocket()
  },
}
</script>