|
|
@@ -0,0 +1,1023 @@
|
|
|
+<template>
|
|
|
+ <div class="textanalysis_index">
|
|
|
+ <div class="wheader">
|
|
|
+ <Header />
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div>
|
|
|
+ <div class="left">
|
|
|
+ <div class="top_nav">
|
|
|
+ <div
|
|
|
+ :class="[leftNavIndex == 1 ? 'sele' : '']"
|
|
|
+ @click="cutNav('1')"
|
|
|
+ >
|
|
|
+ 音节
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="[leftNavIndex == 2 ? 'sele' : '']"
|
|
|
+ @click="cutNav('2')"
|
|
|
+ >
|
|
|
+ 汉字
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="[leftNavIndex == 3 ? 'sele' : '']"
|
|
|
+ @click="cutNav('3')"
|
|
|
+ >
|
|
|
+ 词汇
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="search">
|
|
|
+ <div class="select-result" @click="showSearchColorList">
|
|
|
+ <span class="selectBg" :style="{ background: colorValue }"></span>
|
|
|
+ <i class="tri"></i>
|
|
|
+ </div>
|
|
|
+ <input
|
|
|
+ class="searchVal"
|
|
|
+ v-model="searchVal"
|
|
|
+ @keyup.enter="onSearch"
|
|
|
+ :style="{ color: colorValue }"
|
|
|
+ @blur="searchVal = searchVal.trim()"
|
|
|
+ />
|
|
|
+ <i
|
|
|
+ class="search-icon"
|
|
|
+ style="cursor: pointer"
|
|
|
+ @click="onSearch"
|
|
|
+ ></i>
|
|
|
+ <ul class="searchColorList" v-if="isSCL">
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in searchColorList"
|
|
|
+ :key="'search' + index"
|
|
|
+ @click="selectSearchColor(item)"
|
|
|
+ >
|
|
|
+ <span class="searchColor" :style="{ background: item }"></span>
|
|
|
+ </li>
|
|
|
+ <li class="close" @click="closeSearchColor">关闭</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="result-left-numberclose">
|
|
|
+ <span
|
|
|
+ style="font-size: 14px; line-height: 22px; color: #333333"
|
|
|
+ v-if="searchWord"
|
|
|
+ >
|
|
|
+ {{ SearchwordNumber }}次匹配
|
|
|
+ </span>
|
|
|
+ <span class="resule-right-btn" @click="clearSelected"
|
|
|
+ >清除标记</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="left_list">
|
|
|
+ <div class="left_list_nav">
|
|
|
+ <div class="left">
|
|
|
+ <span
|
|
|
+ :class="[headerText == 'header' ? 'sele' : '']"
|
|
|
+ @click="cutHeaderText('header')"
|
|
|
+ >词头</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[headerText == 'text' ? 'sele' : '']"
|
|
|
+ @click="cutHeaderText('text')"
|
|
|
+ >文本</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span style="margin-right: 16px">
|
|
|
+ <el-switch
|
|
|
+ v-model="xifen"
|
|
|
+ active-color="#735CFF"
|
|
|
+ :width="26"
|
|
|
+ style="margin-right: 10px"
|
|
|
+ active-text="细分"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <img src="../../assets/teacherdev/dowload-text.png" alt="" />
|
|
|
+ 下载</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="left_list_main">
|
|
|
+ <div v-for="(item, index) in leftList" :key="'one' + index">
|
|
|
+ <div class="leftType">
|
|
|
+ <span class="color"></span>
|
|
|
+ <span class="type">{{ item.key }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="rightCount">
|
|
|
+ <span class="count">{{ item.value }}</span>
|
|
|
+ <span class="precent">{{ item.percentage }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tubiao" id="echarts">
|
|
|
+ <div class="tubiao_top">
|
|
|
+ {{ currentTBdata.key }}
|
|
|
+ {{ currentTBdata.value }}
|
|
|
+ {{ currentTBdata.percentage }}
|
|
|
+ </div>
|
|
|
+ <div id="main_echarts" class="main_echarts"></div>
|
|
|
+ <div class="cut_download">
|
|
|
+ <span
|
|
|
+ @click="createEcharts('main_echarts', '柱状图', leftList, 0)"
|
|
|
+ >
|
|
|
+ <img src="../../assets/teacherdev/duotone-chart1.png" alt="" />
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ @click="createEcharts('main_echarts', '雷达图', leftList, 1)"
|
|
|
+ >
|
|
|
+ <img src="../../assets/teacherdev/duotone-chart2.png" alt="" />
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ @click="createEcharts('main_echarts', '折线图', leftList, 2)"
|
|
|
+ >
|
|
|
+ <img src="../../assets/teacherdev/duotone-chart3.png" alt="" />
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ @click="createEcharts('main_echarts', '饼状图', leftList, 3)"
|
|
|
+ >
|
|
|
+ <img src="../../assets/teacherdev/duotone-chart4.png" alt="" />
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <img src="../../assets/teacherdev/dowload-text.png" alt="" />
|
|
|
+ 下载
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="word_back">
|
|
|
+ <div class="word">
|
|
|
+ <span class="title">主题词：</span>
|
|
|
+ <span>你好</span>
|
|
|
+ <span>请问</span>
|
|
|
+ </div>
|
|
|
+ <div class="back">返回课文</div>
|
|
|
+ </div>
|
|
|
+ <div class="btn_set">
|
|
|
+ <div class="btn">
|
|
|
+ <div class="btn_dv" style="margin-right: 16px">
|
|
|
+ <img src="../../assets/teacherdev/icon-ciyun.png" alt="" />
|
|
|
+ 词云
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="btn_dv"
|
|
|
+ style="margin-right: 16px"
|
|
|
+ @click="
|
|
|
+ $router.push({
|
|
|
+ path: '/textanalysis/WordTable',
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <img src="../../assets/teacherdev/icon-cibiao.png" alt="" />
|
|
|
+ 词表
|
|
|
+ </div>
|
|
|
+ <div class="btn_dv" style="margin-right: 24px">
|
|
|
+ <img src="../../assets/teacherdev/icon-down.png" alt="" />
|
|
|
+ 下载
|
|
|
+ </div>
|
|
|
+ <div class="daxiao">
|
|
|
+ <span @click="handleFontsize('-')">
|
|
|
+ <template v-if="wordFontsize > 12">
|
|
|
+ <img src="../../assets/teacherdev/minus-icon.png" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img
|
|
|
+ src="../../assets/teacherdev/minus-icon-white-disabled.png"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <img src="../../assets/teacherdev/dxAA.png" class="dxAA" />
|
|
|
+ <span @click="handleFontsize('+')">
|
|
|
+ <template v-if="wordFontsize < 24">
|
|
|
+ <img src="../../assets/teacherdev/add-icon.png" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img
|
|
|
+ src="../../assets/teacherdev/add-icon-white-disabled.png"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="set">
|
|
|
+ <el-switch
|
|
|
+ v-model="fenci"
|
|
|
+ active-color="#735CFF"
|
|
|
+ :width="26"
|
|
|
+ style="margin-right: 34px"
|
|
|
+ inactive-text="分词"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ <el-switch
|
|
|
+ v-model="pinyinShow"
|
|
|
+ active-color="#735CFF"
|
|
|
+ :width="26"
|
|
|
+ inactive-text="显示拼音"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Header from "@/components/Header.vue";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import "echarts/lib/chart/bar";
|
|
|
+import "echarts/lib/component/legend";
|
|
|
+import "echarts/lib/component/title";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Header,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ wordFontsize: 20, // 文章内容字体
|
|
|
+ fenci: false,
|
|
|
+ pinyinShow: false,
|
|
|
+ leftNavIndex: 1,
|
|
|
+ leftList: [
|
|
|
+ {
|
|
|
+ key: "初等1级",
|
|
|
+ value: "40",
|
|
|
+ percentage: "20.00%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "初等2级",
|
|
|
+ value: "39",
|
|
|
+ percentage: "20.00%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "初等3级",
|
|
|
+ value: "28",
|
|
|
+ percentage: "10.00%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "中等1级",
|
|
|
+ value: "40",
|
|
|
+ percentage: "10.00%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "中等2级",
|
|
|
+ value: "40",
|
|
|
+ percentage: "10.10%",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ colorValue: "#FF3737",
|
|
|
+ searchVal: "",
|
|
|
+ isSCL: false,
|
|
|
+ searchColorList: [
|
|
|
+ "#FF3737",
|
|
|
+ "#875EDE",
|
|
|
+ "#FF8000",
|
|
|
+ "#FF55F3",
|
|
|
+ "#CEB800",
|
|
|
+ "#CB1975",
|
|
|
+ "#00D8B4",
|
|
|
+ "#00CEFF",
|
|
|
+ "#3274FF",
|
|
|
+ "#00B60A",
|
|
|
+ ],
|
|
|
+ SearchwordNumber: 0,
|
|
|
+ searchWord: [],
|
|
|
+ type: "",
|
|
|
+ headerText: "header",
|
|
|
+ xifen: false,
|
|
|
+ myChart: null,
|
|
|
+ currentTBdata: {},
|
|
|
+ currentcolorValue: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 处理字体大小
|
|
|
+ handleFontsize(symbol) {
|
|
|
+ if (symbol == "+") {
|
|
|
+ if (this.wordFontsize < 24) {
|
|
|
+ this.titleFontsize = this.titleFontsize + 2;
|
|
|
+ this.wordFontsize = this.wordFontsize + 2;
|
|
|
+ this.authorFontsize = this.authorFontsize + 2;
|
|
|
+ }
|
|
|
+ } else if (symbol == "-") {
|
|
|
+ if (this.wordFontsize > 12) {
|
|
|
+ this.titleFontsize = this.titleFontsize - 2;
|
|
|
+ this.wordFontsize = this.wordFontsize - 2;
|
|
|
+ this.authorFontsize = this.authorFontsize - 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cutNav(index) {
|
|
|
+ this.leftNavIndex = index;
|
|
|
+ },
|
|
|
+ showSearchColorList() {
|
|
|
+ this.isSCL = !this.isSCL;
|
|
|
+ },
|
|
|
+ closeSearchColor() {
|
|
|
+ this.isSCL = false;
|
|
|
+ },
|
|
|
+ selectSearchColor(item) {
|
|
|
+ this.isSCL = false;
|
|
|
+ this.colorValue = item;
|
|
|
+ },
|
|
|
+ onSearch() {
|
|
|
+ if (!this.searchVal) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let index = this.searchWord.indexOf(this.searchVal.toLowerCase());
|
|
|
+ if (index == -1) {
|
|
|
+ this.searchWord.push(this.searchVal.toLowerCase());
|
|
|
+ this.currentcolorValue.push(this.colorValue);
|
|
|
+ } else {
|
|
|
+ // this.currentcolorValue[index] = this.colorValue;
|
|
|
+ this.$set(this.currentcolorValue, index, this.colorValue);
|
|
|
+ }
|
|
|
+ this.type = "";
|
|
|
+ },
|
|
|
+ clearSelected() {
|
|
|
+ let _this = this;
|
|
|
+ _this.type = "";
|
|
|
+ _this.searchVal = "";
|
|
|
+ _this.searchWord = [];
|
|
|
+ _this.currentcolorValue = [];
|
|
|
+ },
|
|
|
+ cutHeaderText(type) {
|
|
|
+ this.headerText = type;
|
|
|
+ },
|
|
|
+ // 添加dom
|
|
|
+ addnode() {
|
|
|
+ return new Promise((reslove, reject) => {
|
|
|
+ let fatherNode = document.getElementById("echarts");
|
|
|
+ let node = document.getElementById("main_echarts");
|
|
|
+ if (node) {
|
|
|
+ node.remove();
|
|
|
+ }
|
|
|
+ let newnode = document.createElement("div");
|
|
|
+ newnode.id = "main_echarts";
|
|
|
+ newnode.style.width = "256px";
|
|
|
+ newnode.style.height = "256px";
|
|
|
+ newnode.style.margin = "0 auto";
|
|
|
+
|
|
|
+ let qianNode = document.getElementById("distributionOperation");
|
|
|
+ fatherNode.insertBefore(newnode, qianNode); // 添加的元素需要时通过createElement创建 不能使用字符串
|
|
|
+ reslove();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 图表
|
|
|
+ createEcharts(id, type, data, index) {
|
|
|
+ this.chartIndex = index;
|
|
|
+ // 先添加DOM再进行创建图表
|
|
|
+ this.addnode().then(() => {
|
|
|
+ let newdata = JSON.parse(JSON.stringify(data));
|
|
|
+ newdata.splice(data.length - 1, 1);
|
|
|
+ let color = [];
|
|
|
+ let name = [];
|
|
|
+ let valueStype = [];
|
|
|
+ let value = [];
|
|
|
+ let leidaList = [];
|
|
|
+ newdata.forEach((item) => {
|
|
|
+ item.value = item.value;
|
|
|
+ item.name = item.key + " " + (item.percentage * 100).toFixed(2) + "%";
|
|
|
+ name.push(item.key);
|
|
|
+ valueStype.push({
|
|
|
+ value: item.value,
|
|
|
+ percent: (item.percentage * 100).toFixed(2) + "%",
|
|
|
+ });
|
|
|
+ value.push(item.value);
|
|
|
+ leidaList.push({
|
|
|
+ name: item.key,
|
|
|
+ // max: data[data.length - 1].number,
|
|
|
+ // max: 100, //这个总数需要等接口
|
|
|
+ });
|
|
|
+ });
|
|
|
+ var chartDom = document.getElementById(id);
|
|
|
+ this.myChart = echarts.init(chartDom);
|
|
|
+ var option = null;
|
|
|
+ if (type == "饼状图") {
|
|
|
+ option = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Access From",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "70%"],
|
|
|
+ data: newdata,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#f5f5f5",
|
|
|
+ borderWidth: 5,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: {
|
|
|
+ show: false, //不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
|
|
|
+ axisTick: {
|
|
|
+ show: false, //不显示坐标轴刻度线
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false, //不显示坐标轴线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false, //不显示坐标轴上的文字
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else if (type == "柱状图") {
|
|
|
+ var gridWidth = 681; //可以根据canvas的宽度和grid的right,left,width进行计算
|
|
|
+ var fontsize = 14; //字体大小
|
|
|
+ var wordNum = parseInt(gridWidth / name.length / fontsize);
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: name,
|
|
|
+ axisLabel: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ // interval: 0, // 设置数据间隔
|
|
|
+ // rotate: -90, // 标题倾斜
|
|
|
+ formatter: function (value, index) {
|
|
|
+ var strs = value.split("");
|
|
|
+ var str = "";
|
|
|
+ for (var i = 0, s; (s = strs[i++]); ) {
|
|
|
+ str += s;
|
|
|
+ str += "\n";
|
|
|
+ }
|
|
|
+ console.log(str);
|
|
|
+
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Direct",
|
|
|
+ data: valueStype,
|
|
|
+ type: "bar",
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: "inside",
|
|
|
+ // formatter: "{b}\n{c}%", //这是关键，在需要的地方加上就行了
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ } else if (type == "折线图") {
|
|
|
+ var gridWidth = 681; //可以根据canvas的宽度和grid的right,left,width进行计算
|
|
|
+ var fontsize = 14; //字体大小
|
|
|
+ var wordNum = parseInt(gridWidth / name.length / fontsize);
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: name,
|
|
|
+ axisLabel: {
|
|
|
+ // interval: 0, // 设置数据间隔
|
|
|
+ // rotate: -90, // 标题倾斜
|
|
|
+ formatter: function (value, index) {
|
|
|
+ var strs = value.split("");
|
|
|
+ var str = "";
|
|
|
+ for (var i = 0, s; (s = strs[i++]); ) {
|
|
|
+ str += s;
|
|
|
+ str += "\n";
|
|
|
+ }
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ // margin: 5, //刻度标签与轴线之间的距离
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 9, //横轴字体大小
|
|
|
+ // color: "#000000",//颜色
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: "#5470c6",
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: value,
|
|
|
+ type: "line",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ } else if (type == "雷达图") {
|
|
|
+ let that = this;
|
|
|
+ const buildSeries = function (data) {
|
|
|
+ const helper = data.map((item, index) => {
|
|
|
+ const arr = new Array(data.length);
|
|
|
+ arr.splice(index, 1, item);
|
|
|
+ return arr;
|
|
|
+ });
|
|
|
+
|
|
|
+ return [data, ...helper].map((item, index) => {
|
|
|
+ return {
|
|
|
+ type: "radar",
|
|
|
+ symbol: index === 0 ? "circle" : "none",
|
|
|
+ symbolSize: 6,
|
|
|
+ lineStyle: {
|
|
|
+ color: index === 0 ? "#5470C6" : "transparent",
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: index === 0 ? "#5470C6" : "transparent",
|
|
|
+ opacity: 0.5,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: index === 0 ? false : true,
|
|
|
+ formatter: function () {
|
|
|
+ that.leiDaDataIndex = index - 1;
|
|
|
+ return leidaList[index - 1].name + "：" + value[index - 1];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ z: index === 0 ? 1 : 2,
|
|
|
+ data: [item],
|
|
|
+ };
|
|
|
+ });
|
|
|
+ };
|
|
|
+ option = {
|
|
|
+ tooltip: {},
|
|
|
+ radar: {
|
|
|
+ indicator: leidaList,
|
|
|
+ },
|
|
|
+ series: buildSeries(value),
|
|
|
+ };
|
|
|
+ // option = {
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: "axis",
|
|
|
+ // },
|
|
|
+ // radar: [
|
|
|
+ // {
|
|
|
+ // indicator: leidaList,
|
|
|
+ // center: ["50%", "60%"],
|
|
|
+ // radius: 150,
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // series: [
|
|
|
+ // {
|
|
|
+ // type: "radar",
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: "item",
|
|
|
+ // },
|
|
|
+ // data: [
|
|
|
+ // {
|
|
|
+ // value: value,
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // };
|
|
|
+ }
|
|
|
+ console.log(option);
|
|
|
+ option && this.myChart.setOption(option);
|
|
|
+ let that = this;
|
|
|
+ this.myChart.on("click", function (parms) {
|
|
|
+ let index = null;
|
|
|
+ if (type == "雷达图") {
|
|
|
+ index = that.leiDaDataIndex;
|
|
|
+ } else {
|
|
|
+ index = parms.dataIndex;
|
|
|
+ }
|
|
|
+ console.log(that.leftList[index]);
|
|
|
+ for (let key in that.leftList[index]) {
|
|
|
+ that.currentTBdata[key] = that.leftList[index][key];
|
|
|
+ }
|
|
|
+ that.$forceUpdate();
|
|
|
+ // that.$router.push({
|
|
|
+ // path: "/errorstatistics",
|
|
|
+ // query: {
|
|
|
+ // errorTypeId: that.leftdata[index].errorTypeId,
|
|
|
+ // rangeId: that.scoreRangeId,
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.createEcharts("main_echarts", "饼状图", this.leftList, 0);
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.textanalysis_index {
|
|
|
+ background: #f6f6f6;
|
|
|
+ height: 100%;
|
|
|
+ .wheader {
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ padding-top: 29px;
|
|
|
+ padding-bottom: 66px;
|
|
|
+ > div {
|
|
|
+ width: 1200px;
|
|
|
+ height: 1187px;
|
|
|
+ background: #ffffff;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 24px;
|
|
|
+ display: flex;
|
|
|
+ > .left {
|
|
|
+ width: 352px;
|
|
|
+ .top_nav {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 352px;
|
|
|
+ height: 32px;
|
|
|
+ background: #eeeeee;
|
|
|
+ border-radius: 4px;
|
|
|
+ > div {
|
|
|
+ width: 116px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #888888;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .sele {
|
|
|
+ color: #000000;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ margin-top: 16px;
|
|
|
+ position: relative;
|
|
|
+ height: 40px;
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #dddddd;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 7px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ .select-result {
|
|
|
+ height: 24px;
|
|
|
+ padding: 4px 11px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ cursor: pointer;
|
|
|
+ .selectBg {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: #de4444;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ .tri {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ margin-left: 4px;
|
|
|
+ background: url("../../assets/teacherdev/down-icon.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchVal {
|
|
|
+ font-weight: bold;
|
|
|
+ flex: 1;
|
|
|
+ border: 0;
|
|
|
+ border-left: 1px solid #dddddd;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 30px 0 12px;
|
|
|
+ outline: 0;
|
|
|
+ }
|
|
|
+ .search-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 12px;
|
|
|
+ display: block;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ background: url("../../assets/teacherdev/search-icon.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .searchColorList {
|
|
|
+ width: 58px;
|
|
|
+ position: absolute;
|
|
|
+ top: 38px;
|
|
|
+ left: 0;
|
|
|
+ border: 1px #d9d9d9 solid;
|
|
|
+ background: #fff;
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ > li {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ > span {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ &.close {
|
|
|
+ font-size: 12px;
|
|
|
+ border-top: 1px #d9d9d9 solid;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .result-left-numberclose {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ .resule-right-btn {
|
|
|
+ display: inline-block;
|
|
|
+ width: 88px;
|
|
|
+ height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.02);
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left_list {
|
|
|
+ margin-top: 16px;
|
|
|
+ .left_list_nav {
|
|
|
+ height: 52px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .left {
|
|
|
+ width: 84px;
|
|
|
+ height: 28px;
|
|
|
+ background: #eeeeee;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .sele {
|
|
|
+ color: #000000;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ > span {
|
|
|
+ display: inline-block;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ /* identical to box height, or 157% */
|
|
|
+ color: #000000;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ .el-switch.is-checked .el-switch__core::after {
|
|
|
+ left: 100%;
|
|
|
+ margin-left: -10px;
|
|
|
+ }
|
|
|
+ .el-switch__core {
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ .el-switch__core:after {
|
|
|
+ top: 3px;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left_list_main {
|
|
|
+ > div {
|
|
|
+ // width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ padding: 0 12px;
|
|
|
+ color: #333333;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active {
|
|
|
+ background: #eeeeee;
|
|
|
+ }
|
|
|
+ &.fontWeight {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ > .leftType {
|
|
|
+ > .color {
|
|
|
+ display: inline-block;
|
|
|
+ width: 9px;
|
|
|
+ height: 9px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .rightCount {
|
|
|
+ display: flex;
|
|
|
+ > span.count {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 70px;
|
|
|
+ text-align: right;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ > span.precent {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 88px;
|
|
|
+ text-align: right;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tubiao {
|
|
|
+ width: 352px;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 398px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 24px;
|
|
|
+ padding-top: 24px;
|
|
|
+ position: relative;
|
|
|
+ .tubiao_top {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .main_echarts {
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .cut_download {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 24px;
|
|
|
+ left: 56px;
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .right {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 24px;
|
|
|
+ .word_back {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .word {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #000000;
|
|
|
+ .title {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .back {
|
|
|
+ width: 88px;
|
|
|
+ height: 32px;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.02);
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn_set {
|
|
|
+ margin-top: 21px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ .btn_dv {
|
|
|
+ width: 82px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.02);
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .daxiao {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border: 1px solid gainsboro;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 0 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.textanalysis_index {
|
|
|
+ .el-switch__label.is-active {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .el-switch.is-checked .el-switch__core::after {
|
|
|
+ left: 100%;
|
|
|
+ margin-left: -10px;
|
|
|
+ }
|
|
|
+ .el-switch__core {
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ .el-switch__core:after {
|
|
|
+ top: 3px;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
qinpeng
