<template>
  <div id="xjsyf">
    <transition name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft"
      leave-active-class="animate__bounceOutLeft" mode="out-in">
      <div class="tab-div" v-if="!xqIsShow" key="1">
        <div class="left-divs">
          <div class="bg-divs"></div>
        </div>
        <div class="center-divs">
          <template v-for="(item, index) in tableData">
            <div class="cards-div animate__animated bk-xjs-animation animate__zoomIn" @click="eyes(item)">
              <div :class="['tilts']">
                <div style="width: 80%; height: 72%; padding: 7.4% 10%">
                  <div class="top-div">
                    <!-- <img class="tx-bg" :src="item.photos" :onerror="errimg" /> -->
                    <div class="animate__animated animate__infinite animate__pulse animate__slower">
                      <span>
                        {{ item.title.toUpperCase() }}
                      </span>
                    </div>
                  </div>
                  <el-divider></el-divider>
                  <div class="subtitle-div">
                    {{ item.subtitle }}
                  </div>
                  <div class="content-div">
                    {{ item.content }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="right-divs">
          <div class="bg-divs"></div>
        </div>
      </div>
      <div class="div-xq" v-else="xqIsShow" key="2">
        <div style="margin: 0px 0px 20px;overflow-y: auto;height: calc(100% - 20px);">
          <div class="fh-div" title="返回" @click="eyes()"></div>
          <div class="top-divs">
            <span v-text="obj_xq.title.toUpperCase()"></span>
          </div>
          <div class="subtitle-divs" v-html="obj_xq.subtitle"></div>
          <div class="content-divs" v-html="obj_xq.content"></div>
          <el-divider></el-divider>
          <div style="width: 100%; height: calc(100% - 140px)">
            <template v-if="obj_xq.type == 1">
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>视频</span>
                </div>
              </div>
              <div class="content-divs" style="text-align: center;">
                <video autoplay muted loop v-for="item in obj_xq.fileUrlList" :src="item"
                  style="width: 400px;height: 300px;"></video>
              </div>
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>作用</span>
                </div>
              </div>
              <div class="content-divs" v-html="obj_xq.role"></div>

              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>过程组成</span>
                </div>
              </div>
              <div class="content-divs" v-html="obj_xq.processComposition"></div>
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span"><span>难点</span></div>
              </div>
              <div class="content-divs" v-html="obj_xq.difficulty"></div>
            </template>
            <template v-if="obj_xq.type == 2">
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>视频</span>
                </div>
              </div>
              <div class="content-divs" style="text-align: center;">
                <video autoplay muted loop v-for="item in obj_xq.fileUrlList" :src="item"
                  style="width: 400px;height: 300px;margin: 0px 10px;"></video>
              </div>
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>发展历史</span>
                </div>
              </div>
              <div class="content-divs" v-html="obj_xq.processComposition"></div>
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>基本特点</span>
                </div>
              </div>
              <div class="content-divs" v-html="obj_xq.characteristic"></div>
            </template>
            <template v-if="obj_xq.type == 3">
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>素材</span>
                </div>
              </div>
              <div class="content-divs" style="text-align: center;">
                <el-image v-for="item in obj_xq.fileUrlList" style="width: 400px;height: 300px;margin: 0px 10px;"
                  :src="item" :preview-src-list="obj_xq.fileUrlList" :key="item">
                </el-image>
              </div>
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>简介</span>
                </div>
              </div>
              <div class="content-divs" v-html="obj_xq.briefIntroduction"></div>
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>特点介绍</span>
                </div>
              </div>
              <div class="content-divs" v-html="obj_xq.features"></div>
            </template>
            <template v-if="obj_xq.type == 4">
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>素材</span>
                </div>
              </div>
              <div class="content-divs" style="text-align: center;">
                <el-image v-for="item in obj_xq.fileUrlList" style="width: 400px;height: 300px;margin: 0px 10px;"
                  :src="item" :preview-src-list="obj_xq.fileUrlList" :key="item"></el-image>
              </div>
              <div class="titles-div">
                <div class="bgs-div"></div>
                <div class="bgs-span">
                  <span>情感识别综述</span>
                </div>
              </div>
              <div class="content-divs" v-html="obj_xq.summarize"></div>
            </template>
          </div>
          <div style="position: absolute;right: calc(50% - 50px);bottom: 9%; text-align: right;">
            <el-button type="primary" style="
                  line-height: 4px;
                  border-radius: 2px;
                  height: 30px;
                  background: linear-gradient( to bottom,rgb(92 204 211),rgb(102, 166, 255),rgb(92 204 211));
                  font-weight: 900;
                  letter-spacing: 2;
                " @click="startUsing">开始试用</el-button>
          </div>
        </div>
      </div>
    </transition>
    <NewTechniqueDialog v-if="visible" :visible="visible" :type="obj_xq.type" @handleCancel="closeDialog"></NewTechniqueDialog>
  </div>
</template>
<script>
import VanillaTilt from "vanilla-tilt";
import "animate.css";

import NewTechniqueDialog from '../xjssy/components/newTechniqueDialog.vue';
export default {
  data() {
    return {
      xqIsShow: false,
      tableData: [
        {
          type: 1,
          title: "命名实体识别 NER",
          subtitle: "识别文本中具有特定意义的实体",
          content: "命名实体识别（Named Entity Recognition，简称NER），又称作“专名识别”，是指识别文本中具有特定意义的实体，主要包括人名、地名、机构名、专有名词等。",
          role: '命名实体识别是信息提取、问答系统、句法分析、机器翻译、面向Semantic Web的元数据标注等应用领域的重要基础工具，在自然语言处理技术走向实用化的过程中占有重要地位。一般来说，命名实体识别的任务就是识别出待处理文本中三大类（实体类、时间类和数字类）、七小类（人名、机构名、地名、时间、日期、货币和百分比）命名实体。',
          processComposition: `通常包括两部分：<br/>（1）实体边界识别；<br/>（2） 确定实体类别（人名、地名、机构名或其他）。英语中的命名实体具有比较明显的形式标志（即实体中的每个词的第一个字母要大写），所以实体边界识别相对容易，任务的重点是确定实体的类别。和英语相比，汉语命名实体识别任务更加复杂，而且相对于实体类别标注子任务，实体边界的识别更加困难。`,
          difficulty: `
          （1）汉语文本没有类似英文文本中空格之类的显式标示词的边界标示符，命名实体识别的第一步就是确定词的边界，即分词；<br/>
          （2）汉语分词和命名实体识别互相影响；<br/>
          （3）除了英语中定义的实体，外国人名译名和地名译名是存在于汉语中的两类特殊实体类型；<br/>
          （4）现代汉语文本，尤其是网络汉语文本，常出现中英文交替使用，这时汉语命名实体识别的任务还包括识别其中的英文命名实体；<br/>
          （5）不同的命名实体具有不同的内部特征，不可能用一个统一的模型来刻画所有的实体内部特征。`,
          fileUrlList: ['../../../static/file/ner/NER.mp4']
        },
        {
          type: 2,
          title: "热词",
          subtitle: "热门词汇",
          content: "热词，即热门词汇。作为一种词汇现象，反映了一个国家、一个地区在一个时期人们普遍关注的问题和事物。具有时代特征，反映一个时期的热点话题及民生问题。其主要表达形式有语言、文字以及网络图片。",
          characteristic: `
                <h3>热词是最流行的时尚词语，新鲜、带劲、充满活力。</h3>
                &emsp;&emsp;热词作为一种词汇现象，反映了一个国家、一个地区在一个时期人们普遍关注的问题和事物。它往往具有时代特征，反映了一个时期的热点话题及民生问题。不仅仅是网民，热词同样也引起了很多媒体的关注，成为了一种值得关注的网络文化现象。
                <h3>热词表达社会新的特点和趋势：</h3>
                &emsp;&emsp;在自媒体的繁荣兴盛，带来的不仅仅是传播渠道和方式的改变，在语言表达上也出现了新的特点和趋势，每时每刻在世界的各个角落都有自媒体网络热词诞生，一些经典的热词借助即时通讯工具得以迅速传播，并以常人无法想象的速度更迭改变着。在“人人即媒体”时代，热词是自媒体逐渐普及和其参与者自觉适应、融入网络的必然产物。 [1] 
                <h3>热词创作具有和新闻创作一样的精髓和理念：</h3>
                &emsp;&emsp;紧扣社会热点，吸引受众眼球，博得舆论关注，常具有“语不惊人死不休”的特点，因此也创造出众多令人感到新奇的词语。每一个热词的产生和热传，往往跟随社会重大新闻事件，具有很强的时效性。
                <h3>热词不仅仅是一种语言文化现象：</h3>
                &emsp;&emsp;热词不仅仅是一种语言文化现象，而且已经成为都市人宣泄情绪、自我解压的一种方式方法。人们产生精神危机、对社会缺乏信心时，某种情感就会成为社会的共同心理，当带有这种情感色彩的新闻事件发生时，聪明的人们就会针对一些敏感事件发表异议，用“隐晦”的方式创造出“令人叫绝”的网络热词，借此来调侃稀释心中的无奈，从而迅速引发共鸣。
                <h3>热词折射社会热点的民意特征：</h3>
                &emsp;&emsp;语言符号的意义是人们赋予的，人们通过语言符号来表达自己的看法。在互联移动技术发明之前，面对重大新闻事件，民众只能通过人际传播来交流和表达自己的观点和看法 [1]  。在自媒体这个异常开放的空间和平台上，带有公民评判意识的各种网络热词此起彼伏，源源不断。例如在贵州瓮安事件中，有官员说出“做俯卧撑”之后，原本受网友们宠爱的“打酱油”一词立即被“俯卧撑”取代了，用来表示对事情漠不关心、不发表自己的意见，只干与自己有关的事情。2009年2月，云南24岁的李荞明在被看守所关押11天后死亡，警方对于这件事情的说法是他和狱友们玩“躲猫猫”撞墙所致，“躲猫猫”一词迅速蹿红网络 [1]  。
                <h3>热词也有消极影响的一面：</h3>
                &emsp;&emsp;是疏远了汉语的规范，网络语言往往是“数字+符号+字母+错别字”的高度杂合型语言，它给语言的规范发展带来严峻挑战。另外，由于有失偏颇热词一旦传播，舆论就会脱离正确的轨道，产生巨大的负面影响。
                `,
          processComposition: '热词即热门词汇，它们有的是已被巧妙本土化的舶来品，有的是方言“南征北伐”后的遍地开花，有的恰是旧词焕发“第二春”有了新的意义。每个热词都紧贴躁动多变的时尚，反映了当下社会生活的特征和情趣，展现了即时的辉煌。时尚是短命的，却能通过词语留下痕迹 [2]  。',
          fileUrlList: ['../../../static/file/hotWords/hotWords1.mp4', '../../../static/file/hotWords/hotWords2.mp4']

        },
        {
          type: 3,
          title: "消息摘要算法",
          subtitle: "计算机科学术语",
          content: "消息摘要算法的主要特征是加密过程不需要密钥，并且经过加密的数据无法被解密，可以被解密逆向的只有CRC32算法，只有输入相同的明文数据经过相同的消息摘要算法才能得到相同的密文。",
          briefIntroduction: `消息摘要算法不存在密钥的管理与分发问题，适合于分布式网络上使用。由于其加密计算的工作量相当可观，所以以前的这种算法通常只用于数据量有限的情况下的加密，例如计算机的口令就是用不可逆加密算法加密的。近年来，随着计算机性能的飞速改善，加密速度不再成为限制这种加密技术发展的桎梏，因而消息摘要算法应用的领域不断增加。<br/>
                  消息摘要算法主要应用在“数字签名”领域，作为对明文的摘要算法。著名的摘要算法有RSA公司的MD5算法和SHA-1算法及其大量的变体。`,
          features: `
                <h3>消息摘要算法的特点：</h3>
                消息摘要是把任意长度的输入揉和而产生长度固定的伪随机输出的算法。消息摘要的主要特点有：<br/>
                &emsp;&emsp;①无论输入的消息有多长，计算出来的消息摘要的长度总是固定的。例如应用MD5算法摘要的消息有128个比特位，用SHA-1算法摘要的消息最终有160比特位的输出，SHA-1的变体可以产生192比特位和256比特位的消息摘要。一般认为，摘要的最终输出越长，该摘要算法就越安全。<br/>
                &emsp;&emsp;②消息摘要看起来是“随机的”。这些比特看上去是胡乱的杂凑在一起的。可以用大量的输入来检验其输出是否相同，一般，不同的输入会有不同的输出，而且输出的摘要消息可以通过随机性检验。但是，一个摘要并不是真正随机的，因为用相同的算法对相同的消息求两次摘要，其结果必然相同；而若是真正随机的，则无论如何都是无法重现的。因此消息摘要是“伪随机的”。<br/>
                &emsp;&emsp;③一般地，只要输入的消息不同，对其进行摘要以后产生的摘要消息也必不相同；但相同的输入必会产生相同的输出。这正是好的消息摘要算法所具有的性质：输入改变了，输出也就改变了；两条相似的消息的摘要确不相近，甚至会大相径庭。<br/>
                &emsp;&emsp;④消息摘要函数是无陷门的单向函数，即只能进行正向的信息摘要，而无法从摘要中恢复出任何的消息，甚至根本就找不到任何与原信息相关的信息。当然，可以采用强力攻击的方法，即尝试每一个可能的信息，计算其摘要，看看是否与已有的摘要相同，如果这样做，最终肯定会恢复出摘要的消息。但实际上，要得到的信息可能是无穷个消息之一，所以这种强力攻击几乎是无效的。<br/>
                &emsp;&emsp;⑤好的摘要算法，没有人能从中找到“碰撞”，虽然“碰撞”是肯定存在的。即对于给定的一个摘要，不可能找到一条信息使其摘要正好是给定的。或者说，无法找到两条消息，使它们的摘要相同。
                  `,
          fileUrlList: ['../../../static/file/messageDigestAlgorithm/messageDigestAlgorithm.webp']

        },
        {
          type: 4,
          title: "情感识别",
          subtitle: "计算机对人情感状态进行的识别",
          content: "计算机对从传感器采集来的信号进行分析和处理，从而得出对方（人）正处在的情感状态，这种行为叫做情感识别。从生理心理学的观点来看，情绪是有机体的一种复合状态，既涉及体验又涉及生理反应，还包含行为，其组成分至少包括情绪体验、情绪表现和情绪生理三种因素。对于情感识别有两种方式，一种是检测生理信号如呼吸、心律和体温等，另一种是检测情感行为如面部特征表情识别、语音情感识别和姿态识别。",
          summarize: `
                <h3>定义</h3>
                &emsp;&emsp;计算机对从传感器采集来的信号进行分析和处理，从而得出对方（人）正处在的情感状态，这种行为叫做情感识别。从生理心理学的观点来看，情绪是有机体的一种复合状态，既涉及体验又涉及生理反应，还包含行为，其组成分至少包括情绪体验、情绪表现和情绪生理三种因素。对于情感识别有两种方式，一种是检测生理信号如呼吸、心律和体温等，另一种是检测情感行为如面部特征表情识别、语音情感识别和姿态识别。
                “情感识别”，并不是说计算机能直接识别或测量情感状态，应该解释为“通过观察表情、行为和情感产生的前提环境来推断情感状态”。因为情感状态是内在的并包含生理和心理的变化，这样只能获得情感状态的一些可观测的东西，如表情、行为等等。假设这些东西的观测可靠的话，那么潜在的情感状态就可以推断出来。只有将情感识别看作一种模式识别问题、情感表达看作模式合成问题，计算机进行情感交流才具有可行性。 [1] 
                <h3>目的</h3>
                &emsp;&emsp;事实上，人与人之间进行情感识别与情感交流存在着一定的客观动机。分工与合作是人类提高社会生产力最有效的方式，人们为了更好地进行分工合作，一方面必须及时地、准确地通过一定的“情感表达”方式向他人展现自己的价值关系，另一方面必须及时地、准确地通过一定的“情感识别”方式了解和掌握对方的价值关系，才能够在此基础上，分析和判断彼此之间的价值关系，才能做出正确的行为决策。
                总之，情感识别的客观本质或客观动机就是人为了了解和掌握对方的价值关系。
                由于人与人之间存在不同类型的利益相关性，对方所展现的情感有时是完全准确的方式，有时是夸张掩饰的方式，有时却是完全相反的方式，这时，人就需要不断地调整和修正对方的情感表达的客观价值内容，使自己的情感识别具有更高的及时性、准确性和完整性。
                <h3>内容</h3>
                &emsp;&emsp;人类可以通过视觉、味觉、听觉、嗅觉和触觉五个器官来认识世界，而对于他人情感的识别主要是通过视觉和听觉来完成的，即主要是通过人脸的情感识别、语言声调的情感识别语言文字的情感识别来完成的。
          `,
          fileUrlList: ['../../../static/file/emotionRecognition/emotionRecognition.webp']
        },
      ],
      obj_xq: {},
      visible: false
    };
  },
  components: {
    'NewTechniqueDialog': NewTechniqueDialog
  },
  // props: {
  //   clientDetails: {
  //     type: Object,
  //     default: {},
  //   },
  // },
  methods: {
    eyes(e) {
      if (e) {
        this.obj_xq = e;
      } else {
        this.obj_xq = {};
      }
      this.xqIsShow = !this.xqIsShow;
    },
    closeDialog() {
      this.visible = false;
    },
    startUsing() {
      this.visible = true;
    }
  },
  mounted() {
    let _this = this;
  },
  watch: {},
};
</script>
<style lang="scss">
#xjsyf {
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  position: relative;

  .tab-div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .left-divs {
      width: 20%;
      height: 100%;
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;

      .bg-divs {
        width: 200px;
        height: 300px;
        background-image: url("../../assets/img/xjs/3.png");
        background-size: 100% 100%;
      }
    }

    .center-divs {
      width: 60%;
      height: 80%;
      float: left;
      display: flex;
      flex-wrap: wrap;

      .cards-div {
        width: 46%;
        margin: 2%;
        height: 260px;

        .tilts {
          width: 100%;
          height: 100%;
          background-image: url("../../assets/img/xjs/2.png");
          background-size: 100% 100%;
          cursor: pointer;

          .el-divider--horizontal {
            margin: 6px;
            width: calc(100% - 12px);
            background: #727573;
          }

          .top-div {
            font-size: 18px;
            letter-spacing: 2px;
            font-weight: 600;
            height: 40px;
            line-height: 40px;
            width: 90%;
            color: white;
            margin-left: 5%;
          }

          .subtitle-div {
            width: 94%;
            height: 24px;
            line-height: 30px;
            font-size: 12px;
            color: #8f8f8f;
            margin-left: 3%;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            letter-spacing: 1;
          }

          .content-div {
            font-size: 12px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 6;
            overflow: hidden;
            color: lightgrey;
            letter-spacing: 1px;
            width: 94%;
            margin-left: 3%;
            margin-top: 10px;
          }
        }

        .tilts:hover {
          transform-style: preserve-3d;
          background-image: url("../../assets/img/xjs/1.png");
        }
      }
    }

    .right-divs {
      width: 20%;
      height: 100%;
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;

      .bg-divs {
        width: 200px;
        height: 300px;
        background-image: url("../../assets/img/xjs/3.png");
        background-size: 100% 100%;
        transform: rotate(180deg);
      }
    }
  }

  .div-xq {
    width: 96%;
    height: 85%;
    padding: 2%;
    border: 1px solid #3a5f94c9;
    border-radius: 0px 50px;


    .el-divider--horizontal {
      margin: 20px 6px;
      width: calc(100% - 12px);
      background: #727573;
    }

    .fh-div {
      width: 40px;
      height: 40px;
      background-image: url("../../assets/img/xjs/4.png");
      background-size: 100% 100%;
      position: absolute;
      right: 90px;
      cursor: pointer;
    }

    .top-divs {
      font-size: 22px;
      letter-spacing: 5px;
      font-weight: 600;
      height: 40px;
      line-height: 40px;
      width: 90%;
      color: white;
      margin-left: 20px;
    }

    .titles-div {
      margin-left: 9px;
      height: 30px;

      .bgs-div {
        width: 10px;
        height: 10px;
        float: left;
        transform: rotate(45deg);
        background: #e7c46f;
        margin-top: 5px;
      }

      .bgs-span {
        color: #e7c46f;
        margin-left: 12px;
        float: left;
        letter-spacing: 2px;
        font-weight: 600;
        font-size: 15px;
      }
    }

    .subtitle-divs {
      width: 90%;
      height: 24px;
      line-height: 30px;
      font-size: 12px;
      color: #8f8f8f;
      margin-left: 20px;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      letter-spacing: 1;
    }

    .content-divs {
      font-size: 12px;
      // word-break: break-all;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 6;
      // overflow: hidden;
      color: lightgrey;
      letter-spacing: 1px;
      width: 94%;
      margin-left: 3%;
      margin-top: 10px;
      margin-bottom: 20px;
    }

    .center-button {
      width: 100%;
    }
  }
}
</style>
  