<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.content"></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>
    <MachineWriting v-if="visibleMachineWriting" :visible="visibleMachineWriting" @handleCancel="closeDialogMachineWriting"></MachineWriting>
  </div>
</template>
<script>
import VanillaTilt from "vanilla-tilt";
import "animate.css";
import MachineWriting from '../xjssy/components/machineWriting.vue';
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: "机器写作是一种利用人工智能技术，如机器学习、自然语言处理等，来生成文本的技术。这种技术可以用于各种领域，如新闻写作、博客文章、学术论文、商业报告等。机器写作的主要目标是提高写作效率和质量，减少人工错误，并使作者能够专注于创作过程",
          features: `
                <h3>高效性</h3>
                &emsp;&emsp;机器写作可以大大提高写作效率。通过使用机器学习和自然语言处理技术，机器可以快速生成高质量的文本。这使得机器写作非常适合于需要大量写作的任务，如新闻写作、博客文章、学术论文和商业报告等。
                <h3>准确性</h3>
                &emsp;&emsp;机器写作可以确保生成的文本的准确性。通过使用大量的训练数据和先进的算法，机器可以学习到如何生成准确、连贯和专业的文本。这使得机器写作非常适合于需要高质量文本的任务，如学术研究和商业报告等。
                <h3>一致性</h3>
                &emsp;&emsp;机器写作可以确保生成的文本的一致性。无论何时何地，只要使用相同的输入和参数，机器都会生成相同的输出。这使得机器写作非常适合于需要一致文本的任务，如新闻报道和博客文章等。
          `,
          fileUrlList: ['../../../static/file/jqxz/jqxz.jpg']
        },
        {
          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,
      visibleMachineWriting: false,
    };
  },
  components: {
    'NewTechniqueDialog': NewTechniqueDialog,
    'MachineWriting':MachineWriting,
  },
  // 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;
    },
    closeDialogMachineWriting() {
      this.visibleMachineWriting = false;
    },
    startUsing() {
      if(this.obj_xq&&this.obj_xq.title=='机器写作'){
        this.visibleMachineWriting = true;
      }else{
        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>
  