暴漏文本分析

package-lock.json

@@ -6158,6 +6158,11 @@
       "integrity": "sha1-hX95zjWVgMNA1DCBzGSJcNC7I04=",
       "dev": true
     },
+    "hanzi-writer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/hanzi-writer/-/hanzi-writer-3.4.0.tgz",
+      "integrity": "sha512-u7AZ9CBBE4DuNRKpCdec2Dwgb0oBOlKEU2+jjfib+QeMQgXmtrJVxf1bl69Swi8XrBffYWUemKq/9Rn7YTK5aA=="
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/har-schema/download/har-schema-2.0.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "element-ui": "^2.15.1",
     "emoji-vue": "^0.2.4",
     "file-saver": "^2.0.5",
+    "hanzi-writer": "^3.4.0",
     "html-docx-js": "^0.3.1",
     "jquery": "^3.6.0",
     "js-cookie": "^2.2.1",

src/components/corpus/Strockplayredline.vue

@@ -0,0 +1,229 @@
+<!--  -->
+<template>
+  <div class="strockplayRedInner">
+    <!-- <div
+      @click="playHanzi"
+      :class="[
+        'strock-play-box',
+        themeColor == 'green'
+          ? 'green-border'
+          : themeColor == 'red'
+          ? 'red-border'
+          : themeColor == 'brown'
+          ? 'brown-border'
+          : 'blue-border',
+      ]"
+      v-if="playStorkes"
+    ></div> -->
+    <template v-if="Book_text != '〇'">
+      <!-- <svg-icon
+        icon-class="play-stroke-icon"
+        :className="tianColor ? 'strock-play-red' : 'strock-play-box'"
+        v-if="playStorkes"
+        @click="playHanzi"
+      /> -->
+      <img
+        class="strock-play-red"
+        src="../../assets/teacherdev/strock-play-red-click-big.png"
+        alt=""
+        @click="playHanzi"
+      />
+      <div :id="targetDiv" class="character-target-div"></div>
+    </template>
+    <template v-else>
+      <span class="book-text">{{ Book_text }}</span>
+    </template>
+    <img
+      class="tian-bg"
+      src="../../assets/teacherdev/chinaTianRed.png"
+      alt=""
+    />
+    <!-- <svg-icon
+      icon-class="tian"
+      :className="tianColor ? 'tian-bg-red' : 'tian-bg'"
+    /> -->
+  </div>
+</template>
+
+<script>
+import { getLogin } from "@/api/api";
+const HanziWriter = require("hanzi-writer");
+export default {
+  name: "Strockplayredline",
+  components: {},
+  props: [
+    "targetDiv",
+    "Book_text",
+    "playStorkes",
+    "strokeColor",
+    "wordNum",
+    "themeColor",
+    "tianColor",
+    "curItem",
+    "type",
+    "judgeAnswer",
+    "isHighlight",
+  ],
+  data() {
+    return {
+      writer: null,
+    };
+  },
+  computed: {},
+  watch: {
+    targetDiv: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            _this.initHanziwrite();
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
+  //方法集合
+  methods: {
+    initHanziwrite() {
+      let _this = this;
+      if (_this.Book_text == "〇") return false;
+      _this.writer = null;
+      //var ren = require("hanzi-writer-data/国");
+      _this.writer = HanziWriter.default.create(
+        _this.targetDiv,
+        _this.Book_text,
+        {
+          padding: 5,
+          showOutline: true,
+          strokeColor: _this.isHighlight ? "#AAAAAA" : "#000000",
+          radicalColor: _this.isHighlight ? "#000000" : "#AAAAAA",
+          charDataLoader: function (char, onComplete) {
+            if (_this.isHighlight) {
+              let charData = _this.handleData();
+              onComplete(charData);
+            } else {
+              let charData = JSON.parse(JSON.stringify(_this.curItem.hz_json));
+              charData.radStrokes = [];
+              onComplete(charData);
+              return;
+            }
+          },
+        }
+      );
+    },
+    handleData() {
+      if (this.curItem.hz_json) {
+        let charData = JSON.parse(JSON.stringify(this.curItem.hz_json));
+        charData.radStrokes = [];
+        for (let i = 0; i < this.judgeAnswer; i++) {
+          charData.radStrokes.push(i);
+        }
+        return charData;
+      }
+    },
+    playHanzi(event) {
+      let _this = this;
+      _this.writer.animateCharacter();
+      event.stopPropagation();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    _this.$nextTick(() => {
+      _this.initHanziwrite();
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+// @import "../common.scss";
+.strockplayRedInner {
+  position: relative;
+
+  width: 128px; //444px
+  height: 128px; //480px
+}
+
+.character-target-div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99999;
+  font-family: "FZJCGFKTK";
+  border: 2px solid #de4444;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+.strock-play-box {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  z-index: 998;
+  width: 22px;
+  height: 22px;
+  // color: #346CDA;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.strock-play-red {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 999;
+  width: 22px;
+  height: 22px;
+  color: #d47064;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.tian-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  stroke: rgba(157, 202, 255, 0.2);
+}
+.tian-bg-red {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  stroke: rgba(212, 112, 100, 0.2);
+}
+.animate-butto {
+  width: 240px;
+  height: 160px;
+  font-size: 28px;
+}
+.book-text {
+  font-size: 96px;
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 128px;
+}
+</style>

src/components/teacher-dev/TeachingTool.vue

@@ -20,7 +20,7 @@
         </div>
         <p>文本分析</p>
       </div>
-      <div>
+      <!-- <div>
         <div
           style="background: #d86046"
           @click="
@@ -32,7 +32,7 @@
           <img src="../../assets/teacherdev/jygj-2.png" alt="" />
         </div>
         <p>语料库词典</p>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>

src/views/corpus/Result.vue

@@ -1,6 +1,39 @@
 <template>
   <div class="result" v-loading="loading">
     <Header :projectShow="true" />
+    <div class="main">
+      <div class="hanzi_list" v-if="">
+        <div
+          class="list_one"
+          v-for="(item, index) in hzData"
+          :key="'index' + index"
+        >
+          <Strockplayredline
+            v-if="item.hzDetail.hz_json"
+            :Book_text="item.con"
+            :playStorkes="false"
+            :curItem="item.hzDetail"
+            :targetDiv="'bwcHanziIntp' + index + item.con"
+            :isHighlight="false"
+            :judgeAnswer="2"
+          />
+          <div
+            v-for="(items, indexs) in item.hzDetail.hz_json.medians.length"
+            :key="'row' + indexs"
+          >
+            <Strockplayredline
+              v-if="item.hzDetail.hz_json"
+              :Book_text="item.con"
+              :playStorkes="false"
+              :curItem="item.hzDetail"
+              :targetDiv="'bwcHanziIntp_height' + index + item.con + indexs"
+              :isHighlight="true"
+              :judgeAnswer="indexs + 1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,7 +42,7 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "@/components/Header";
 import { getLogin } from "@/api/api";
-import { Strockplayredline } from "@/components/corpus/Strockplayredline";
+import Strockplayredline from "@/components/corpus/Strockplayredline";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -83,6 +116,25 @@ export default {
   activated() {},
 };
 </script>
-<style scoped>
+<style lang="scss" scoped>
 /* @import url(); 引入css类 */
+.result {
+  height: 100%;
+  .main {
+    height: 100%;
+    background: #f2f2f2;
+    padding-top: 33px;
+  }
+  .hanzi_list {
+    width: 1120px;
+    margin: 0 auto;
+    background: #ffffff;
+    border-radius: 8px;
+    padding: 40px;
+    .list_one {
+      margin-bottom: 20px;
+      display: flex;
+    }
+  }
+}
 </style>