mediaAll/src/view/allMedia/AIeditor/components/review.vue

<template>
  <div class="review" v-if="is_status !== 'show'">
    <el-image style="width: 310px; height: 232.5px" :src="jy" fit="fill" />
    <template v-if="is_status === 'none'">
      <div class="none_title">检查完毕，一切都好</div>
      <ul>
        <li>实时分析文本内容进行校阅</li>
        <li>鼠标划选句子进行风格改写，提供写作新思路</li>
      </ul>
    </template>
    <template v-if="is_status === 'load'">
      <div class="checking_tip_text">
        为您检查中
        <div class="dot-flashing"></div>
      </div>
    </template>
  </div>
  <template v-if="is_status === 'show'">
    <div class="show">
      <div class="left">
        <el-card v-for="(item, i) in list" :key="i">
          <p
            class="list"
            style="font-size: 12px; font-weight: 400; color: #888"
          >
            {{ err_text[item.errorType].text }}
            {{ err_text[item.errorType].sub_text }}
          </p>
          <p class="list">
            <span  v-text="item.sourceText"></span>
            <span
              class="alert-go-right"
              v-if="item.replaceText"
              :style="{ backgroundImage: 'url(' + image_base64.right + ')' }"
            ></span>
            <span v-if="item.replaceText" class="replaceText" v-text="item.replaceText"></span>
          </p>
          <div class="list" v-html="item.alertMessage"></div>
        </el-card>
      </div>
      <div class="right">2</div>
    </div>
  </template>
</template>

<script setup>
// 校阅
import { ref } from 'vue';
// import { checkContent } from '@/api/aleditor.js';
import { image_base64 } from './data';
import jy from '@/assets/img/jy.png';
const is_status = ref('show');
// const props = defineProps({
//   headTitle: String,
//   html: Function,
//   text: Function,
// });
const list = ref([]);
const err_text = ref([
    {
        text: '所有提示',
        sub_text: '',
        color: '#ff7a7a'
    },
    {
        text: '字词错误',
        sub_text: '',
        color: '#ff7a7a'
    },
    {
        text: '标点错误',
        sub_text: '',
        color: '#aaaaaa'
    },
    {
        text: '语序问题',
        sub_text: '·建议交换为',
        color: '#977aff'
    },
    {
        text: '语法问题',
        sub_text: '',
        color: '#ee6bbb'
    },
    {
        text: '敏感词',
        sub_text: '',
        color: '#636363'
    },
])

const jiaoyue = () => {
  is_status.value = 'load';
//   checkContent({
//     data: {
//       content: props.html(),
//       contentText: props.text(),
//       docId: localStorage.getItem('fileId') || undefined,
//       generationInfo: null,
//       shouldGenerate: false,
//     },
//     noload: true,
//   })
//     .then(r => {
      let r = {
        errCode: 0,
        errMsg: '',
        data: {
          sid: null,
          domain: null,
          result: null,
        },
        docId: '8347703226129424384',
        paragraphUnitEntity: {
          paragraphUnitId: '8347703226146201600',
          updateTime: '2023-05-19T00:55:55.206+00:00',
          paragraphMd5: null,
          formatting: null,
          segmentIndex: 1,
          docId: '8347703226129424384',
          source: '',
          target: '<p>饭吃了没；有</p><p> </p>',
          targetFromMemory: null,
          memoryLibraryItemId: null,
          ensure: null,
          marked: null,
          sharedStringId: null,
          hide: 0,
          confirmUsers: null,
          savedCounter: 1,
          operateUserId: null,
          sortIndex: 1,
          words: '["饭","吃","了","没","；","有"]',
          tags: '["n","v","y","v","wf","vyou"]',
          lastCheckTextContent: '饭吃了没；有\n ',
          newestTextContent: '饭吃了没；有\n ',
          entityId: '8347703226146201600',
        },
        saveStatus: null,
        alerts: [
          {
            id: '8347725246119264256',
            updateTime: '2023-05-19T02:23:25.176+00:00',
            docId: '8347703226129424384',
            alertType: 4,
            alertMessage:
              '<div class="des_div"><p class="des_p">建议用“<b>没有；</b>”替换“<b>没；有</b>”。</p></div>',
            sourceText: '没；有',
            replaceText: '没有；',
            start: 3,
            end: 5,
            errorType: 3,
            explanation: null,
            sourceInZdic: false,
            checkType: 0,
            errorSourceType: 0,
            permissionTags: '["0","1"]',
            subTitle: null,
            advancedTip: false,
            paid: false,
          },
        ],
        checkFinished: true,
        docWordCountLimitExceed: false,
        dayCheckLimitExceed: false,
        todayCheckWordCount: 29,
        readability: 0.23,
        totalWord: 6,
        teamActive: false,
        checkEachLimit: '30000',
        checkDailyLimit: '8000',
        dayTeamCheckLimitExceed: false,
        teamTotalCheckLimitExceed: false,
        product: {
          id: 1,
          productType: 0,
          recommend: 0,
          productDesc: '立即体验智能纠错',
          originPriceYear: 0,
          priceYear: 0,
          status: 0,
          duration: null,
          originPriceMonth: null,
          originPriceHalfYear: null,
          originPriceSeason: null,
          priceMonth: null,
          productId: null,
          productName: '免费版',
          monthProductId: null,
          singleMonthProductId: null,
          seasonProductId: null,
          halfYearProductId: null,
          checkEachLimit: 30000,
          checkDailyLimit: 8000,
          translationEachLimit: 2000,
          translationDailyLimit: 2000,
          rewriteEachLimit: 4000,
          rewriteDailyLimit: 8000,
          textToSpeechEachLimit: 1000,
          textToSpeechDailyLimit: 1000,
          advancedRewriteLimit: null,
          generateWordCountMonthLimit: null,
          generateWordCountTotalLimit: null,
          generateWordTimesDailyLimit: null,
          dialogDailyLimit: null,
        },
        superUser: false,
        tooFarFromUpdateTime: true,
      };
      if (r.errCode !== 0) return;
      console.log(r);
      list.value = r.alerts || [];
      is_status.value = list.value.length ? 'show' : 'none';
    // })
    // .catch(() => {
    //   is_status.value = 'none';
    // });
};
jiaoyue();
</script>

<style scoped>
.review {
  width: 310px;
  margin: 0 auto;
}

.none_title {
  font-size: 24px;
  text-align: left;
  font-weight: 700;
  margin-bottom: 16px;
  margin-left: 11.3%;
}

ul {
  margin-left: 20px;
}

ul > li {
  font-size: 14px;
  color: #2c3e50;
  margin-bottom: 16px;
}

.checking_tip_text {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: -38px;
  margin-top: -26px;
}

.dot-flashing {
  margin-left: 22px;
  margin-top: 3px;
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2d2d2d;
  color: #2d2d2d;
  -webkit-animation: dot-flashing-0833031b 0.6s linear infinite alternate;
  animation: dot-flashing-0833031b 0.6s linear infinite alternate;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.dot-flashing:after,
.dot-flashing:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-flashing:before {
  left: -14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2d2d2d;
  color: #2d2d2d;
  -webkit-animation: dot-flashing-0833031b 0.6s infinite alternate;
  animation: dot-flashing-0833031b 0.6s infinite alternate;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.dot-flashing:after {
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2d2d2d;
  color: #2d2d2d;
  -webkit-animation: dot-flashing-0833031b 0.6s infinite alternate;
  animation: dot-flashing-0833031b 0.6s infinite alternate;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
@-webkit-keyframes dot-flashing-0833031b {
  0% {
    background-color: #2d2d2d;
  }

  50%,
  to {
    background-color: hsla(0, 0%, 100%, 0.1);
  }
}

@keyframes dot-flashing-0833031b {
  0% {
    background-color: #2d2d2d;
  }

  50%,
  to {
    background-color: hsla(0, 0%, 100%, 0.1);
  }
}

.show .left {
  width: 60%;
  padding: 0 10px;
  display: inline-block;
}
.show .right {
  display: inline-block;
}
.list {
  font-size: 14px;
  font-weight: 400;
  height: 32px;
  line-height: 32px;
  color: #111;
  margin-left: 26px;
}

.alert-go-right,
.alert-two-way {
  vertical-align: middle;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
}

.replaceText {
  background: #d9e6ff;
  color: #2470ff;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
</style>