liyongli
/
mediaAll


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722
							<template>
  <div class="edito">
    <Head />
    <div
      class="onlineTextMain"
      v-loading="loading"
      element-loading-background="rgba(225,225,225,0.1)"
    >
      <div class="flex1">
        <div class="btn-grounp">
          文章内容
          <el-button
            type="primary"
            style="float: right; margin-top: 0.3em; margin-right: 0.5em;padding: 0 1.8em;"
            @click="getServer"
            :loading="loading"
          >
            校验
          </el-button>
          <el-button
              class="clearError"
              type="primary"
              style="float: right; margin-top: 0.3em; margin-right: 0.5em"
              @click="clearError"
              :icon="Delete"
            >
              清空
            </el-button>
        </div>
        <div class="Fle">
          <Editor v-model:rawText="rawText" />
        </div>
      </div>
      <div class="flex2">
        <div class="btn-grounp">检索结果</div>
        <div style="padding: 1em 1em 0 1em">
          <div class="tabs">
            <div
              class="tab"
              @click="() => changeTabAll()"
              style="background-color: #2974ff; color: #fff"
            >
              <p>全部错误</p>
              {{ search.tabs[0] ? search.tabs[0].num : 0 }}
            </div>
            <div
              class="tab"
              @click="() => changeTab(1)"
              v-if="tabSelect[1]"
              :style="{
                backgroundColor: getTypeError(1, 'rgba'),
                color: getTypeError(1, 'rgb'),
              }"
            >
              <p>严重错误</p>
              {{ search.tabs[1] ? search.tabs[1].num : 0 }}
            </div>
            <div class="tab" @click="() => changeTab(1)" v-else>
              <p>严重错误</p>
              {{ search.tabs[1] ? search.tabs[1].num : 0 }}
            </div>
            <div
              class="tab"
              @click="() => changeTab(3)"
              v-if="tabSelect[3]"
              :style="{
                backgroundColor: getTypeError(3, 'rgba'),
                color: getTypeError(3, 'rgb'),
              }"
            >
              <p>一般错误</p>
              {{ search.tabs[3] ? search.tabs[3].num : 0 }}
            </div>
            <div class="tab" @click="() => changeTab(3)" v-else>
              <p>一般错误</p>
              {{ search.tabs[3] ? search.tabs[3].num : 0 }}
            </div>
            <div
              class="tab"
              @click="() => changeTab(2)"
              v-if="tabSelect[2]"
              :style="{
                backgroundColor: getTypeError(2, 'rgba'),
                color: 'rgba(73, 92, 202, 1)',
              }"
            >
              <p>疑错</p>
              {{ search.tabs[2] ? search.tabs[2].num : 0 }}
            </div>
            <div class="tab" @click="() => changeTab(2)" v-else>
              <p>疑错</p>
              {{ search.tabs[2] ? search.tabs[2].num : 0 }}
            </div>
            <div
              class="tab"
              v-if="tabSelect[4]"
              @click="() => changeTab(4)"
              :style="{
                backgroundColor: getTypeError(4, 'rgba'),
                color: 'rgba(156, 133, 255, 1)',
              }"
            >
              <p>
                自定义错误
                <el-popover
                  placement="top-start"
                  :width="200"
                  trigger="hover"
                  content="若自定义的词语（除正词外）与系统通用逻辑检测出的错误重叠，则该词语会展示两条错误。例：“尊守”为系统检出的错误，若同时设置“尊守”为禁用词，则当文章中出现“尊守”时，会展示两条错误，一条为系统检出，一条为自定义禁用词错误。"
                >
                  <template #reference>
                    <div
                      style="
                        display: inline-block;
                        border: 1px solid rgb(156, 133, 255);
                        vertical-align: middle;
                        border-radius: 50%;
                        width: 1.2em;
                        height: 1.2em;
                        line-height: 1.2em;
                        text-align: center;
                        color: #5e5e5e;
                      "
                    >
                      ?
                    </div>
                  </template>
                </el-popover>
              </p>
              {{ search.tabs[4] ? search.tabs[4].num : 0 }}
            </div>
            <div class="tab" v-else @click="() => changeTab(4)">
              <p>
                自定义错误
                <el-popover
                  placement="top-start"
                  :width="200"
                  trigger="hover"
                  content="若自定义的词语（除正词外）与系统通用逻辑检测出的错误重叠，则该词语会展示两条错误。例：“尊守”为系统检出的错误，若同时设置“尊守”为禁用词，则当文章中出现“尊守”时，会展示两条错误，一条为系统检出，一条为自定义禁用词错误。"
                >
                  <template #reference>
                    <div
                      style="
                        display: inline-block;
                        border: 1px solid rgb(156, 133, 255);
                        vertical-align: middle;
                        border-radius: 50%;
                        width: 1.2em;
                        height: 1.2em;
                        line-height: 1.2em;
                        text-align: center;
                        color: #5e5e5e;
                      "
                    >
                      ?
                    </div>
                  </template>
                </el-popover>
              </p>
              {{ search.tabs[4] ? search.tabs[4].num : 0 }}
            </div>
          </div>
          <div>
            <el-radio-group v-model="tabAct">
              <el-radio :label="0">未处理： {{ search.list.length }}</el-radio>
              <el-radio :label="1">已忽略: {{ search.list1.length }}</el-radio>
              <el-radio :label="2">已替换: {{ search.list2.length }}</el-radio>
            </el-radio-group>
            
          </div>
        </div>
        <div class="search">
          <div v-if="tabAct === 0">
            <div v-for="(item, index) in search.list" :key="index">
              <div v-for="(v, i) in item.htmlWords" :key="'son' + i">
                <div
                  v-if="tabSelect[item.um_error_level]"
                  class="searchEnd"
                  :style="{
                    borderColor: getTypeError(item.um_error_level, 'rgb'),
                    backgroundColor:
                      select === index
                        ? getTypeError(item.um_error_level, 'rgba')
                        : '',
                  }"
                  @click="() => changeselect(index, item.type.belongId)"
                >
                  <p style="display: flex">
                    <span
                      v-text="v.word"
                      :style="{
                        flex: 1,
                        color: getTypeError(item.um_error_level, 'rgb'),
                      }"
                    ></span>
                    <span
                      style="flex: 1; text-align: right; color: #2dc76d"
                      v-text="item.suggest[i]"
                    ></span>
                  </p>
                  <p style="line-height: 2.5em">
                    <span
                      :style="{
                        float: 'left',
                        fontSize: '12px',
                      }"
                    >
                      <span style="vertical-align: middle; margin-right: 5px">
                        错误原因：{{ item.youmeiWordName }}
                      </span>
                      <el-popover
                        v-if="item.explanation"
                        placement="top-start"
                        :width="200"
                        trigger="hover"
                        :content="item.explanation"
                      >
                        <template #reference>
                          <div
                            style="
                              display: inline-block;
                              border: 1px solid #5e5e5e;
                              vertical-align: middle;
                              border-radius: 50%;
                              width: 1.2em;
                              height: 1.2em;
                              line-height: 1.2em;
                              text-align: center;
                              color: #5e5e5e;
                            "
                          >
                            ?
                          </div>
                        </template>
                      </el-popover>
                    </span>
                    <span style="float: right; text-align: right">
                      <span
                        class="btn"
                        v-if="item.suggest[i]"
                        @click.stop="
                          () =>
                            clearEle(
                              item.colorPosition,
                              item.suggest[i],
                              index,
                              2
                            )
                        "
                        >替换</span
                      >
                      <span
                        class="btn"
                        v-if="isDel(item.type.belongId)"
                        @click.stop="
                          () =>
                            removeEle(
                              item.colorPosition,
                              item.suggest[i],
                              index,
                              2
                            )
                        "
                        >删除
                      </span>
                      <span
                        class="btn"
                        @click.stop="
                          () =>
                            clearEle(
                              item.colorPosition,
                              item.wordHtml,
                              index,
                              1
                            )
                        "
                        >忽略</span
                      >
                    </span>
                    <span style="clear: both; display: block"></span>
                  </p>
                </div>
              </div>
            </div>
            <el-empty
              description="所选类型下暂无信息"
              v-if="!search.list || !search.list.length"
            />
          </div>
          <div v-if="tabAct === 1">
            <div v-for="(item, index) in search.list1 || []" :key="index">
              <div v-for="(v, i) in item.htmlWords" :key="'son' + i">
                <div
                  class="searchEnd"
                  v-if="tabSelect[item.um_error_level]"
                  :style="{
                    borderColor: getTypeError(item.um_error_level, 'rgb'),
                    backgroundColor:
                      select === index
                        ? getTypeError(item.um_error_level, 'rgba')
                        : '',
                  }"
                  @click="() => changeselect(index, item.type.belongId)"
                >
                  <p style="display: flex">
                    <span
                      v-text="v.word"
                      :style="{
                        flex: 1,
                        color: getTypeError(item.um_error_level, 'rgb'),
                      }"
                    ></span>
                    <span
                      style="flex: 1; text-align: right; color: #2dc76d"
                      v-text="item.suggest[i]"
                    ></span>
                  </p>
                  <p style="line-height: 2.5em">
                    <span
                      :style="{
                        float: 'left',
                        fontSize: '12px',
                      }"
                    >
                      <span style="vertical-align: middle; margin-right: 5px">
                        错误原因：{{ item.youmeiWordName }}
                      </span>
                      <el-popover
                        v-if="item.explanation"
                        placement="top-start"
                        :width="200"
                        trigger="hover"
                        :content="item.explanation"
                      >
                        <template #reference>
                          <div
                            style="
                              display: inline-block;
                              border: 1px solid #5e5e5e;
                              vertical-align: middle;
                              border-radius: 50%;
                              width: 1.2em;
                              height: 1.2em;
                              line-height: 1.2em;
                              text-align: center;
                              color: #5e5e5e;
                            "
                          >
                            ?
                          </div>
                        </template>
                      </el-popover>
                    </span>
                    <span style="float: right; text-align: right">
                      <span class="btn" @click.stop="() => back(item, index, 1)"
                        >撤销</span
                      >
                    </span>
                    <span style="clear: both; display: block"></span>
                  </p>
                </div>
              </div>
            </div>
            <el-empty
              description="所选类型下暂无信息"
              v-if="!search.list1 || !search.list1.length"
            />
          </div>
          <div v-if="tabAct === 2">
            <div v-for="(item, index) in search.list2 || []" :key="index">
              <div v-for="(v, i) in item.htmlWords" :key="'son' + i">
                <div
                  class="searchEnd"
                  v-if="tabSelect[item.um_error_level]"
                  :style="{
                    borderColor: getTypeError(item.um_error_level, 'rgb'),
                    backgroundColor:
                      select === index
                        ? getTypeError(item.um_error_level, 'rgba')
                        : '',
                  }"
                  @click="() => changeselect(index, item.type.belongId)"
                >
                  <p style="display: flex">
                    <span
                      v-text="v.word"
                      :style="{
                        flex: 1,
                        color: getTypeError(item.um_error_level, 'rgb'),
                      }"
                    ></span>
                    <span
                      style="flex: 1; text-align: right; color: #2dc76d"
                      v-text="item.suggest[i]"
                    ></span>
                  </p>
                  <p style="line-height: 2.5em">
                    <span
                      :style="{
                        float: 'left',
                        fontSize: '12px',
                      }"
                    >
                      <span style="vertical-align: middle; margin-right: 5px">
                        错误原因：{{ item.youmeiWordName }}
                      </span>
                      <el-popover
                        v-if="item.explanation"
                        placement="top-start"
                        :width="200"
                        trigger="hover"
                        :content="item.explanation"
                      >
                        <template #reference>
                          <div
                            style="
                              display: inline-block;
                              border: 1px solid #5e5e5e;
                              vertical-align: middle;
                              border-radius: 50%;
                              width: 1.2em;
                              height: 1.2em;
                              line-height: 1.2em;
                              text-align: center;
                              color: #5e5e5e;
                            "
                          >
                            ?
                          </div>
                        </template>
                      </el-popover>
                    </span>
                    <span style="float: right; text-align: right">
                      <span
                        class="btn"
                        @click.stop="() => back(item, index, 2)"
                      >
                        撤销
                      </span>
                    </span>

                    <span style="clear: both; display: block"></span>
                  </p>
                </div>
              </div>
            </div>
            <el-empty
              description="所选类型下暂无信息"
              v-if="!search.list2 || !search.list2.length"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Head from '../components/head.vue';
import Editor from '../components/editor.vue';
import { ElMessage } from 'element-plus';
import { Delete } from '@element-plus/icons-vue';
import { reactive, ref, nextTick } from 'vue';
import errType from '../../config/errtype';
document.title = '文本检测';
const loading = ref(false);
const rawText = ref(
  '<p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 18px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">作为一名记者，自己相继参加了党的十八大、十九大、二十大采访报道工作，既是难得的职业经历，也在我心中刻印下3个难忘的场景。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 18px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">五年前，党的十九大中一位代表自问自答道：“党长期执政的最大威胁是什么？是腐败。党的十八大以来，党中央抓党的建设的鲜明主题是什么？全面从严治党。”以习近平同志为核心的党中央开展了史无前例的反腐败斗争，以“得罪千百人、不负十四亿”的使命担当祛疴治乱，坚定不移“打虎”“拍蝇”“猎狐”，雷霆万钧惩治腐败。“反腐败斗争压倒性态势已经形成并巩固发展”，党的十九大报告作出的这一重大判断，让那位曾经忧心忡忡的党的十八大代表倍感欣慰。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 18px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">怎能不欣慰？从腐败和反腐败“呈胶着状态”，到反腐败斗争“压倒性态势已经形成”，再到“取得压倒性胜利并全面巩固”，十年磨一剑，党在革命性锻造中更加坚强有力，找到了自我革命这一跳出治乱兴衰历史周期率的第二个答案。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 18px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">更难忘、更受触动的场景发生在党的二十大开幕之日。习近平总主席在党的二十大报告墙调：“全党必须牢记，从严治党永远在路上，党的自我革命永远在路上”。话语铿锵，响鼓重槌：只要存在腐败问题产生的土壤和条件，反腐败斗争就一刻不能停，必须永远吹冲锋号。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 18px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">十年时光，三个场景，一个方向：打铁必须自身硬。为党永葆生机活力、走好新的赶考之路，全面从严治党是必由之路。要兴党强党，保证党的先进性和纯洁性，就必须实事求是认识和把握自己，以勇于自我革命的精神打造和锤炼自己。</p><p style="margin: 10px auto; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 18px; line-height: 34.2px; font-family: &quot;Microsoft Yahei&quot;  color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">在我国云南边境地带，还残存着对越战争时期遗留的雷场，给当地的人民群众造成了生命财产安全威胁。雷场中地雷种类复杂，除了常规军用地雷外还有相当一部分游击队的自制地雷等，也给排雷作业造成了巨大影响。</p>'
);
const tabSelect = reactive([true, true, true, true, true]);
const urlData = geturl();
let search = reactive({
  list: [],
  list1: [],
  list2: [],
  tabs: [
    {
      num: 0,
    },
  ],
});
const tabAct = ref(0);
const select = ref(0);

function clearError() {
  rawText.value = '';
  search.list = [];
  search.list1 = [];
  search.list2 = [];
  search.tabs = [{ num: 0 }];
}

function getTypeError(key, type) {
  if (type == 'rgb') return type + '(' + errType[key] + ')';
  if (type == 'rgba') return type + '(' + errType[key] + ', 0.1)';
  return '';
}

function changeselect(index) {
  const oldEle = document.querySelector(
    "[data-umpos='" + search.list[select.value].colorPosition + "']"
  );
  const newEle = document.querySelector(
    "[data-umpos='" + search.list[index].colorPosition + "']"
  );
  oldEle.style.backgroundColor = '';
  newEle.style.backgroundColor =
    'rgba(' + errType[search.list[index].um_error_level] + ', 0.5)';
  select.value = index;
}

function clearEle(colorPosition, text, i, type) {
  const newEle = document.querySelector("[data-umpos='" + colorPosition + "']");
  newEle.setAttribute('style', '');
  newEle.innerText = text;
  const item = JSON.parse(JSON.stringify(search.list[i]));
  search['list' + type].push(item);
  search.list.splice(i, 1);
  rawText.value = document.querySelector('.Fle .text').innerHTML;
}

function isDel(id) {
  const Del = {
    105: true,
    108: true,
    112: true,
    111: true,
    201: true,
  };
  return Del[id];
}

function removeEle(colorPosition, text, i) {
  const newEle = document.querySelector("[data-umpos='" + colorPosition + "']");
  newEle.remove();
  rawText.value = document.querySelector('.text').innerHTML;
  search.list.splice(i, 1);
}

function back(v, i, type) {
  const newEle = document.querySelector(
    "[data-umpos='" + v.colorPosition + "']"
  );
  newEle.style.borderColor = 'rgb(' + errType[v.um_error_level] + ')';
  const item = JSON.parse(JSON.stringify(search['list' + type][i]));
  search.list.push(item);
  search['list' + type].splice(i, 1);
}
function getServer() {
  if (!window.fetch || !rawText.value) return;
  loading.value = true;
  const ele = document.createElement("div");
  ele.innerHTML = rawText.value;
  window
    .fetch('https://topic.smcic.net/youmei/check', {
      method: 'POST',
      body: JSON.stringify({
        raw: ele.innerText,
        text: rawText.value
      }),
      headers: {
        'Content-Type': 'application/json',
        "spm": urlData.spm || ""
      },
    })
    .then(json => json.json())
    .then(res => {
      loading.value = false;
      if (!res || res.code !== 0) return ElMessage.error('请稍后再试！');
      search.list = res.data.checklist || [];
      search.list1 = [];
      search.list2 = [];
      rawText.value = res.data.rawText || '';
      nextTick(() => {
        const tabs = [
          {
            num: 0,
          },
        ];
        for (let i = 0; i < search.list.length; i++) {
          const item = search.list[i];
          const ele = document.querySelector(
            "[data-umpos='" + item.colorPosition + "']"
          );
          ele.style.borderColor = 'rgb(' + errType[item.um_error_level] + ')';
          if (!tabs[item.um_error_level])
            tabs[item.um_error_level] = {
              num: 0,
            };
          tabs[0].num += 1;
          tabs[item.um_error_level].num += 1;
          if (i !== 0) continue;
          ele.style.backgroundColor =
            'rgba(' + errType[item.um_error_level] + ',0.5)';
        }
        search.tabs = tabs;
      });
    });
}

function geturl() {
    let search = (location.search || "").replace("?", "").split("&");
    let obj = {};
    for (let i = 0; i < search.length; i++) {
        const v = search[i].split("=");
        obj[v[0]] = v[1] || "";
    }
    return obj
}

function changeTab(i) {
  tabSelect[i] = !tabSelect[i];
}

function changeTabAll() {
  let t = tabSelect.filter(v => !v).length ? true : false;
  for (let i = 0; i < tabSelect.length; i++) {
    tabSelect[i] = t;
  }
}
</script>

<style scoped>
.onlineTextMain {
  padding: 1em;
  display: flex;
}

.onlineTextMain > div {
  flex: 3;
  margin-right: 0.5em;
  border: 1px solid #eee;
  height: calc(100vh - 106px);
}
.onlineTextMain .flex2 {
  flex: 2;
}
.onlineTextMain > div:last-child {
  margin-right: 0;
}
.btn-grounp {
  color: #666;
  background-color: #f9fafc;
  line-height: 2.52em;
  padding-left: 0.5em;
  border-bottom: 1px solid #eee;
}
.search {
  padding: 1em;
  font-size: 12px;
  height: calc(100% - 172px);
  overflow: auto;
}
.searchEnd {
  border: 1px solid;
  border-top: 4px solid;
  margin-bottom: 1em;
  padding: 5px 35px;
  font-size: 14px;
  line-height: 1.5em;
}
.btn {
  display: inline-block;
  background: rgba(41, 116, 255, 0.1);
  color: #2974ff;
  padding: 3px 15px;
  height: 1.5em;
  line-height: 1.5em;
  margin-left: 0.3em;
  cursor: pointer;
}

.flex1 {
  line-height: 1.5em;
  min-height: 1.5em;
}
.flex1 span {
  display: inline-block;
}
.tabs {
  display: flex;
  margin: 0.5em 0;
}
.tab {
  flex: 1;
  margin-left: 0.3em;
  border-radius: 2px;
  background-color: rgba(144, 144, 144, 0.1);
  color: #909090;
  line-height: 1.6em;
  padding: 3px 15px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}

.Fle {
  height: calc(100vh-226px);
}
.tab p {
  white-space: nowrap;
}
.clearError {
  float: right;
}
</style>

<style>
.el-popper.is-light,
.el-popper .el-popper__arrow::before {
  background-color: #2974ff !important;
  color: #fff;
  border-color: #2974ff !important;
}
.edito {
  min-width: 1280px;
  margin: 0 auto;
}
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>