GCLS_Page_TC/src/views/Textanalysis/WordTable.vue

<template>
  <div class="WordTable" v-loading="loading">
    <div class="wheader">
      <Header />
    </div>
    <div class="main">
      <div class="top">
        <div class="left">
          <div class="type_dv">
            <span :class="[typeIndex == 0 ? 'sele' : '']" @click="cutType(0)"
              >音节</span
            >
            <span :class="[typeIndex == 1 ? 'sele' : '']" @click="cutType(1)"
              >汉字</span
            >
            <span :class="[typeIndex == 2 ? 'sele' : '']" @click="cutType(2)"
              >词汇</span
            >
          </div>
          <!-- <el-radio-group v-model="headText">
            <el-radio :label="1">词头</el-radio>
            <el-radio :label="2">文本</el-radio>
          </el-radio-group> -->
        </div>
        <div class="right">
          <el-cascader
            v-model="leve"
            :options="leveList"
            @change="page1getdata"
            style="width: 140px; margin-right: 24px"
          ></el-cascader>
          <div class="seek">
            <img src="../../assets/teacherdev/search-icon.png" alt="" />
            <input v-model="keyword" type="text" />
          </div>
          <div class="seekBtn" @click="page1getdata">搜索</div>
        </div>
      </div>
      <div class="table">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th
              v-for="(item, i) in tableHeader"
              :key="i"
              :style="{ width: item.width }"
              :class="[i == tableHeader.length - 1 ? 'bz' : '']"
              v-if="
                (item.name == '拼音' && typeIndex != 0) || item.name != '拼音'
              "
            >
              <div>
                <span>
                  {{
                    item.name == "音节"
                      ? typeIndex == 0
                        ? "音节"
                        : "汉字"
                      : item.name
                  }}
                </span>
                <template v-if="item.sortShow">
                  <div class="sort">
                    <div>
                      <img
                        v-if="item.sort != 'up'"
                        @click="SortEvent('up', item.name, item.sortName)"
                        src="../../assets/teacherdev/sort-up.png"
                        alt=""
                      />
                      <img
                        v-if="item.sort == 'up'"
                        @click="SortEvent('up', item.name, item.sortName)"
                        src="../../assets/teacherdev/sort-sele-up.png"
                        alt=""
                      />
                    </div>
                    <div>
                      <img
                        v-if="item.sort != 'down'"
                        @click="SortEvent('down', item.name, item.sortName)"
                        src="../../assets/teacherdev/sort-down.png"
                        alt=""
                      />
                      <img
                        v-if="item.sort == 'down'"
                        @click="SortEvent('down', item.name, item.sortName)"
                        src="../../assets/teacherdev/sort-sele-down.png"
                        alt=""
                      />
                    </div>
                  </div>
                </template>
              </div>
            </th>
          </tr>
          <tr v-for="(item, i) in dataList.list" :key="i + 'td'">
            <td class="sort-td">{{ item.number }}</td>
            <td :class="['sort-td', typeIndex == 0 ? 'pinyin' : '']">
              <span
                :style="{
                  color:
                    item.levelName && levelMap[item.levelName]
                      ? levelMap[item.levelName].color
                      : '',
                }"
                >{{ item.word }}</span
              >
            </td>
            <td
              class="sort-td"
              v-if="typeIndex != 0"
              style="font-family: GB-PINYINOK-B"
            >
              {{ item.pinYin }}
            </td>
            <td class="sort-td">
              <span
                :style="{
                  color:
                    item.gradeName && levelMap[item.gradeName]
                      ? levelMap[item.gradeName].color
                      : '',
                }"
                >{{ item.gradeName }}</span
              >
            </td>
            <td class="sort-td">
              <span
                :style="{
                  color:
                    item.levelName && levelMap[item.levelName]
                      ? levelMap[item.levelName].color
                      : '',
                }"
                >{{ item.levelName }}</span
              >
            </td>
            <td
              class="sort-td"
              style="cursor: pointer"
              @click="
                backHighlight(item, levelMap[item.levelName].color, 'all')
              "
            >
              {{ item.freq }}
            </td>
            <td class="sort-td">{{ item.textRatio }}%</td>
            <td>
              <div style="display: flex; flex-wrap: wrap">
                <span
                  @click="
                    backHighlight(items, levelMap[item.levelName].color, 'one')
                  "
                  v-for="(items, i) in item.remarks"
                  :key=""
                  class="beizhu"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                    borderColor:
                      items.levelName && levelMap[items.levelName]
                        ? levelMap[items.levelName].color
                        : '',
                    background:
                      items.levelName && levelMap[items.levelName]
                        ? levelMap[items.levelName].color + '08'
                        : '',
                  }"
                >
                  <span
                    style="font-size: 18px; font-weight: 400"
                    v-html="items.word"
                  >
                  </span>
                  <span
                    :style="{
                      color:
                        items.levelName && levelMap[items.levelName]
                          ? levelMap[items.levelName].color
                          : '',
                    }"
                  >
                    {{ items.levelName }}
                  </span>
                  <span>
                    {{ items.freq }}
                  </span>
                </span>
              </div>
            </td>
          </tr>
        </table>
        <template v-if="dataList.list.length == 0">
          <div class="no_data">暂无数据</div>
        </template>

        <!-- <el-table
          :data="dataList.list"
          style="width: 100%"
          @sort-change="sort_change"
          ref="table"
          :sort-orders="['levelName']"
          sortable="custom"
        >
          <el-table-column prop="number" label="序号" width="48" align="center">
          </el-table-column>
          <el-table-column
            prop="word"
            :label="typeIndex == 0 ? '音节' : '汉字'"
            width="93"
            sortable
          >
            <template slot-scope="item">
              <span
                :style="{
                  color:
                    item.row.levelName && levelMap[item.row.levelName]
                      ? levelMap[item.row.levelName].color
                      : '',
                }"
                >{{ item.row.word }}</span
              >
            </template>
          </el-table-column>
          <template v-if="typeIndex != 0">
            <el-table-column prop="pinYin" label="拼音" width="95" sortable>
            </el-table-column>
          </template>
          <el-table-column prop="gradeName" label="等次" width="95" sortable>
            <template slot-scope="item">
              <span
                :style="{
                  color:
                    item.row.gradeName && levelMap[item.row.gradeName]
                      ? levelMap[item.row.gradeName].color
                      : '',
                }"
                >{{ item.row.gradeName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="levelName" label="级别" width="106" sortable>
            <template slot-scope="item">
              <span
                :style="{
                  color:
                    item.row.levelName && levelMap[item.row.levelName]
                      ? levelMap[item.row.levelName].color
                      : '',
                }"
                >{{ item.row.levelName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="freq" label="频数" width="108" sortable>
          </el-table-column>
          <el-table-column prop="textRatio" label="比例" width="110" sortable>
          </el-table-column>
          <el-table-column prop="" label="备注">
            <template slot-scope="item">
              <div style="display: flex">
                <span
                  v-for="(items, i) in item.row.remarks"
                  :key=""
                  class="beizhu"
                  style="margin-right: 10px"
                >
                  <span
                    style="font-size: 18px; font-weight: 400"
                    v-html="items.word"
                  >
                  </span>
                  <span
                    :style="{
                      color:
                        items.levelName && levelMap[items.levelName]
                          ? levelMap[items.levelName].color
                          : '',
                    }"
                  >
                    {{ items.levelName }}
                  </span>
                  <span>
                    {{ items.freq }}
                  </span>
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table> -->
      </div>
      <div class="page" v-if="dataList.list.length > 0">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="dataList.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "@/components/Header.vue";
import { postapi } from "@/api/api";
import staticData from "../../common/data";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      typeIndex: 0,
      headText: 1,
      keyword: "",
      leve: null,
      leveList: [
        {
          value: null,
          label: "全部",
        },
        {
          value: 1,
          label: "初等",
          children: [
            { value: "100,101,102", label: "全部" },
            { value: "100", label: "1级" },
            { value: "101", label: "2级" },
            { value: "102", label: "3级" },
          ],
        },
        {
          value: 2,
          label: "中等",
          children: [
            { value: "103,104,105", label: "全部" },
            { value: "103", label: "4级" },
            { value: "104", label: "5级" },
            { value: "105", label: "6级" },
          ],
        },
        {
          value: 3,
          label: "高等",
          children: [{ value: "106", label: "7-9级" }],
        },
        {
          value: 107,
          label: "超纲",
          children: [{ value: "107", label: "超纲" }],
        },
        {
          value: 108,
          label: "专有",
          children: [{ value: "108", label: "专有" }],
        },
        {
          value: 109,
          label: "其它",
          children: [{ value: "109", label: "其它" }],
        },
      ],

      tableHeader: [
        {
          name: "序号",
          sortShow: false,
          width: "48px",
        },
        {
          name: "音节",
          sortShow: true,
          sort: "",
          width: "93px",
          sortName: "word",
        },
        {
          name: "拼音",
          sortShow: true,
          sort: "",
          width: "95px",
          sortName: "pin_yin",
        },
        {
          name: "等次",
          sortShow: true,
          sort: "",
          width: "95px",
          sortName: "grade_id",
        },
        {
          name: "级别",
          sortShow: true,
          sort: "down",
          width: "120px",
          sortName: "level_id",
        },
        {
          name: "频数",
          sortShow: true,
          sort: "",
          width: "88px",
          sortName: "freq",
        },
        {
          name: "比例",
          sortShow: true,
          sort: "",
          width: "90px",
          sortName: "word_ratio",
        },
        {
          name: "备注",
          sortShow: false,
          sort: "",
          width: "",
          sortName: "",
        },
      ],
      dataList: {
        list: [],
      },
      page: 1,
      pageSize: 10,
      partitionKey: null,
      searchType: null,
      levelMap: null,
      loading: false,
      sortType: 0,
      sortField: "level_id",
      routerData: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 返回并高亮对应数据
    backHighlight(item, color, type) {
      let data = JSON.parse(JSON.stringify(this.routerData));
      let arr = [];
      if (type == "all") {
        item.remarks.forEach((items) => {
          arr.push(items.word);
        });
      } else {
        arr.push(item.word);
      }
      data.remarks = JSON.stringify(arr);
      data.color = color;
      sessionStorage.setItem("tablehighlight", true);
      this.$router.push({
        path: "/textanalysis/Result",
        query: data,
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getlist();
    },
    getlist() {
      this.loading = true;
      postapi({
        url: "/GCLSTCServer/tools/TS/glossary/list",
        data: {
          pageIndex: this.page,
          pageSize: this.pageSize,
          partitionKey: this.partitionKey,
          searchType: this.typeIndex,
          word: this.keyword,
          sortField: this.sortField,
          sortType: this.sortType,
          levels: this.leve ? this.leve[1] : null,
        },
      })
        .then((res) => {
          let num = this.page * this.pageSize - this.pageSize + 1;
          res.data.result.list.forEach((item) => {
            item.remarks = JSON.parse(item.remarks);
            item.number = num;
            num++;
          });
          this.dataList = res.data.result;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    page1getdata() {
      this.loading = true;
      this.page = 1;
      this.getlist();
    },
    SortEvent(type, name, sortName) {
      let sort = "";
      this.tableHeader.forEach((item) => {
        if (item.name == name) {
          if (!item.sort || item.sort == "up") {
            item.sort = "down";
            sort = "down";
          } else if (item.sort == "down") {
            item.sort = "up";
            sort = "up";
          }
        } else {
          item.sort = "";
        }
      });
      if (sort == "down") {
        this.sortType = 1;
      } else {
        this.sortType = 0;
      }
      this.sortField = sortName;
      this.getlist();
    },
    sort_change(column, prop, order) {
      if (this.$refs.table) this.$refs.table.clearSort();
      column.column.order = column.order;
      if (column.prop == "pinyin") {
        this.sortField = "pin_yin";
      } else if (column.prop == "gradeName") {
        this.sortField = "grade_id";
      } else if (column.prop == "levelName") {
        this.sortField = "level_id";
      } else if (column.prop == "textRatio") {
        this.sortField = "text_ratio";
      } else {
        this.sortField = column.prop;
      }
      if (column.order == "descending") {
        this.sortType = 1;
      } else {
        this.sortType = 0;
      }
      this.getlist();
    },
    cutType(index) {
      this.typeIndex = index;
      this.page1getdata();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.routerData = JSON.parse(JSON.stringify(this.$route.query));

    this.partitionKey = this.$route.query.partitionKey * 1;
    this.levelMap = staticData.LevelMap;

    this.getlist();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.WordTable {
  background: #f6f6f6;
  min-height: 100%;
  .wheader {
    background: #ffffff;
  }
  .main {
    width: 1200px;
    margin: 23px auto;
    .top {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .type_dv {
          margin-right: 40px;
          //   width: 172px;
          padding: 0 2px;
          height: 40px;
          background: #eeeeee;
          border-radius: 4px;
          display: flex;
          align-items: center;
          span {
            display: inline-block;
            height: 36px;
            width: 56px;
            font-weight: 400;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            color: #888888;
            cursor: pointer;
          }
          .sele {
            color: #000000;
            background: #ffffff;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        .seek {
          display: flex;
          width: 264px;
          height: 40px;
          background: #ffffff;
          border: 1px solid #dddddd;
          border-radius: 2px 0px 0px 2px;
          img {
            width: 16px;
            height: 16px;
            margin: 12px 4px 12px 12px;
          }
          input {
            flex: 1;
            border: none;
            outline: none;
            background: none;
            height: 40px;
          }
        }
        .seekBtn {
          width: 56px;
          height: 40px;
          background: #ffa800;
          border: 1px solid #ffa800;
          border-radius: 0px 2px 2px 0px;
          cursor: pointer;
          font-weight: 400;
          font-size: 16px;
          line-height: 40px;
          text-align: center;
          color: #ffffff;
        }
      }
    }
    .table {
      margin-top: 21px;
      .no_data {
        background: #ffffff;
        text-align: center;
        height: 60px;
        line-height: 60px;
        color: #909399;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        background: #ffffff;
        .pinyin {
          font-family: "GB-PINYINOK-B";
        }
        th {
          background: #ffffff;
          .bz {
            flex: 1;
          }
          > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px;
            height: 48px;

            .sort {
              cursor: pointer;
              > div {
                img {
                  width: 11px;
                  height: 11px;
                }
              }
              > :nth-child(1) {
                > img {
                  position: relative;
                  top: 3px;
                }
              }
              > :nth-child(2) {
                > img {
                  position: relative;
                  bottom: 7px;
                }
              }
            }
          }
        }
        td {
          height: 40px;
          line-height: 40px;
          text-align: left;
          border-bottom: 1px solid #eeeeee;
          font-weight: 400;
          font-size: 14px;
        }
        .sort-td {
          padding: 0 9px;
          text-align: center;
        }
      }
    }

    .page {
      margin-top: 24px;
    }
    .beizhu {
      margin-top: 8px;
      margin-bottom: 8px;
      height: 28px;
      display: inline-block;
      border: 1px solid;
      // background: #f9f9f9;
      border-radius: 4px;
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 500;
      padding-left: 4px;
      padding-right: 7px;
      > :not(:nth-last-child(1)) {
        margin-right: 8px;
      }
    }
  }
}
</style>
<style lang="scss">
.WordTable {
  .table {
    .el-table th {
      background: #ffffff;
      padding: 7px 0;
    }
    .el-table th > .cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 700;
      color: #333333;
      font-size: 14px;
    }
    .el-table td {
      padding: 8px 0;
    }
    .el-table td > .cell {
      font-size: 14px;
      line-height: 22px;
      color: #333333;
      font-weight: 600;
    }
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #000000;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border: 2px solid #c8c8c8;
    background: #1e1e1e;
  }
  .el-radio__inner::after {
    background: none;
  }
  .el-radio__inner {
    background: #c8c8c8;
    border: none;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #ffffff !important;
    color: rgba(0, 0, 0, 0.85);
    border: 1px solid #333333;
  }
  .el-pager {
    .number {
      background: #ffffff !important;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
    }
  }

  .btn-prev,
  .btn-next {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #ffffff !important;
  }
}
</style>