aiforge/web_src/js/components/dataset/referenceDataset.vue

<template>
  <div>
    <template v-if="showFlag">
      <div class="ui container">
        <div class="ui mobile reversed stackable grid">
          <div class="row" style="justify-content: space-between">
            <div class="ui blue small menu compact selectcloudbrain">
              <a class="item" :href="`${repoLink}/datasets`">当前数据集</a>
              <a
                class="active item"
                :href="`${repoLink}/datasets/reference_datasets`"
                >关联数据集</a
              >
            </div>
            <button
              style="margin-right: 2rem"
              class="ui green button"
              @click="openDataset()"
            >
              关联数据集
            </button>
          </div>
          <div class="row">
            <div class="ui two cards" style="width: 100%">
              <div
                class="ui card refer-dataset-card"
                v-for="(item, index) in datasetList"
                :key="index"
              >
                <div class="content" style="border-bottom: none">
                  <div class="refer-dataset-card-content">
                    <div class="refer-dataset-card-title">
                      <span
                        :title="item.Title"
                        class="nowrap"
                        style="display: inline-block; max-width: 90%"
                        >{{ item.Title }}</span
                      ><img
                        v-if="item.Recommend"
                        src="/img/jian.svg"
                        style="margin-left: 0.5rem"
                      />
                    </div>
                    <template v-if="item.IsStaring">
                      <div style="display: flex">
                        <button
                          class="ui mini basic button dataset-card-flavor"
                        >
                          <i class="ri-heart-fill" style="color: #fa8c16"></i>
                          <span style="margin-left: 0.3rem">取消收藏</span>
                        </button>
                        <a class="ui mini basic button card-flavor-num">
                          {{ item.NumStars }}
                        </a>
                      </div>
                    </template>
                    <template v-else>
                      <div style="display: flex">
                        <button
                          class="ui mini basic button dataset-card-flavor"
                        >
                          <i class="ri-heart-line"></i>
                          <span style="margin-left: 0.3rem">收藏</span>
                        </button>
                        <a class="ui mini basic button card-flavor-num">
                          {{ item.NumStars }}
                        </a>
                      </div>
                    </template>
                  </div>
                  <div style="font-size: 12px; margin-top: 5px">
                    <a
                      v-if="item.Category"
                      :href="'/explore/datasets?category=' + item.Category"
                      class="ui repo-topic label topic"
                      >{{ item.Category }}</a
                    >
                    <a
                      v-if="item.Task"
                      :href="'/explore/datasets?task=' + item.Task"
                      class="ui repo-topic label topic"
                      >{{ item.Task }}</a
                    >
                    <a
                      v-if="item.License"
                      :href="'/explore/datasets?license=' + item.License"
                      class="ui repo-topic label topic"
                      >{{ item.License }}</a
                    >
                  </div>
                  <div class="description card-flavor-desc">
                    <p>{{ item.Description }}</p>
                  </div>
                </div>
                <div class="extra content" style="border-top: none !important">
                  <div style="display: flex; align-items: center">
                    <a
                      :href="'/' + item.Repo.OwnerName"
                      :title="item.Repo.OwnerName"
                    >
                      <img
                        class="ui avatar image"
                        style="width: 22px; height: 22px"
                        :src="'/user/avatar/' + item.Repo.OwnerName + '/-1'"
                      />
                    </a>
                    <span
                      style="
                        color: #999999;
                        font-size: 12px;
                        margin-left: 0.5rem;
                      "
                      >{{ item.CreatedUnix | transformTimestamp }}</span
                    >
                    <span
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 0 1rem;
                      "
                      title="引用次数"
                    >
                      <i class="ri-link"></i>
                      <span
                        style="
                          color: #101010;
                          font-size: 12px;
                          margin-left: 0.2rem;
                        "
                        >{{ item.UseCount }}</span
                      >
                    </span>
                    <span
                      style="display: flex; align-items: center; flex: 1"
                      title="下载次数"
                    >
                      <i class="ri-download-line"></i>
                      <span
                        style="
                          color: #101010;
                          font-size: 12px;
                          margin-left: 0.2rem;
                        "
                        >{{ item.DownloadTimes }}</span
                      >
                    </span>
                    <button
                      class="ui mini button"
                      @click.stop="cancelReferData(item.ID)"
                    >
                      取消关联
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="ui container">
        <div class="ui mobile reversed stackable grid">
          <div class="row" style="justify-content: space-between">
            <div class="ui blue small menu compact selectcloudbrain">
              <a class="item" :href="`${repoLink}/datasets`">当前数据集</a>
              <a
                class="active item"
                :href="`${repoLink}/datasets/reference_datasets`"
                >关联数据集</a
              >
            </div>
            <button class="ui green button" @click="openDataset()">
              关联数据集
            </button>
          </div>
        </div>
        <div class="ui placeholder segment bgtask-none">
          <div class="ui icon header bgtask-header-pic"></div>
          <div class="bgtask-content-header">还未关联过数据集</div>
          <div class="bgtask-content">
            <div class="bgtask-content-txt">
              您可以通过单击新建关联数据集按钮，将平台上公开数据集展示在这里。
            </div>
            <div class="bgtask-content-txt">
              使用说明可以参考启智AI协作平台<a
                href="https://git.openi.org.cn/zeizei/OpenI_Learning"
                >小白训练营课程</a
              >
            </div>
          </div>
        </div>
      </div>
    </template>

    <el-dialog
      title="关联数据集"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
    >
      <div class="ui icon input dataset-search-vue">
        <i
          class="search icon"
          style="cursor: pointer; pointer-events: auto"
          @click="searchName"
        ></i>
        <input
          type="text"
          placeholder="搜数据集名称/描述..."
          v-model="search"
          @keydown.enter.stop.prevent="searchName"
        />
      </div>
      <el-row>
        <el-col
          :span="17"
          style="
            padding-right: 1rem;
            border-right: 1px solid #f5f5f6;
            position: relative;
          "
        >
          <el-tabs v-model="activeName">
            <el-tab-pane label="公开数据集" name="first">
              <el-row>
                <el-checkbox-group
                  v-model="checkList"
                  style="font-size: 14px; line-height: 1"
                >
                  <div
                    v-for="(item, index) in publicDatasetList"
                    :key="index"
                    class="select-data-wrap"
                  >
                    <div class="dataset-header-vue">
                      <el-checkbox
                        :label="item.ID"
                        @change="(checked) => changeCheckbox(checked, item)"
                        :title="item.Title"
                        class="select-data-title"
                        ><span class="ref-data-title">
                          {{ item.Title }}
                        </span></el-checkbox
                      >
                      <a class="select-data-title select-data-href" href=""
                        >asdasdasdasd</a
                      >
                    </div>
                    <div style="padding-top: 1rem">asdasdsa233333</div>
                  </div>
                </el-checkbox-group>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col
          :span="7"
          style="
            display: flex;
            flex-direction: column;
            height: 100%;
            right: 0;
            position: absolute;
            padding: 0 1.5rem;
          "
        >
          <div
            style="
              font-size: 14px;
              height: 40px;
              text-align: left;
              color: #0066ff;
              line-height: 40px;
            "
          >
            已选数据文件
          </div>
          <div style="flex: 1; margin-top: 1.5rem">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="(item, index) in selectDatasetArray"
                :key="index"
                :label="item.ID"
                :title="item.Title"
                @change="(checked) => changeCheckSelected(checked, item)"
                style="display: flex; margin: 0.5rem 0"
                ><span>{{ item.Title }}</span></el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div style="text-align: end">
            <el-button
              @click.native="confirmDataset"
              size="small"
              style="
                background: #389e0d;
                color: #fff;
                border: 1px solid #389e0d;
              "
              >确定</el-button
            >
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;

export default {
  components: {},
  data() {
    return {
      dialogWidth: "65%",
      dialogVisible: false,
      activeName: "first",
      repoLink: "",
      datasetList: [],
      test: false,
      checkList: [],
      publicDatasetList: [],
      showFlag: true,
      search: "",
      selectDatasetArray: [],
    };
  },
  methods: {
    openDataset() {
      console.log("open");
      this.dialogVisible = true;
    },
    searchName() {},
    cancelReferData(id) {
      let url = `${this.repoLink}/datasets/reference_datasets/${id}`;
      this.$axios.delete(url).then((res) => {
        console.log(res);
        if (res.data.Code === 0) {
          console.log("delete success");
          let index = this.datasetList.find((item) => {
            return item.ID === id;
          });
          this.datasetList.splice(index, 1);
        }
      });
    },
    confirmDataset() {
      this.submitReferDataset();
      this.dialogVisible = false;
    },
    changeCheckbox(checked, item) {
      console.log(checked, item, this.checkList);
      if (checked) {
        this.selectDatasetArray.push({ ID: item.ID, Title: item.Title });
      } else {
        let index = this.selectDatasetArray.findIndex((element) => {
          return element.ID === item.ID;
        });
        this.selectDatasetArray.splice(index, 1);
      }
      console.log(this.selectDatasetArray);
    },
    changeCheckSelected(checked, item) {
      console.log(checked, item);
      if (!checked) {
        let index = this.selectDatasetArray.findIndex((element) => {
          return element.ID === item.ID;
        });
        this.selectDatasetArray.splice(index, 1);
      }
      console.log(this.checkList, this.selectDatasetArray);
    },
    getDatasetList() {
      let url = `${this.repoLink}/datasets/reference_datasets_data`;
      this.$axios.get(url).then((res) => {
        this.datasetList = res.data;
        this.datasetList.length
          ? (this.showFlag = true)
          : (this.showFlag = false);
        console.log("this.getDatasetList:", this.datasetList);
      });
    },
    getSelectDatasetList() {
      let url = `${this.repoLink}/datasets/reference_datasets_available`;
      this.$axios.get(url).then((res) => {
        this.publicDatasetList = JSON.parse(res.data.data);

        console.log("this.publicDatasetList", this.publicDatasetList);
      });
    },
    submitReferDataset() {
      let url = `${this.repoLink}/datasets/reference_datasets_available`;
      let data = this.qs.stringify({
        _csrf: csrf,
        dataset_id: this.checkList,
      });
      this.$axios.post(url, data).then((res) => {
        console.log("post success");
      });
    },
  },

  filters: {
    transformTimestamp(timestamp) {
      const date = new Date(parseInt(timestamp) * 1000);
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "  ";

      const dateString = Y + M + D;
      return dateString;
    },
  },
  watch: {},
  mounted() {
    this.getDatasetList();
    this.getSelectDatasetList();
  },
  created() {
    this.repoLink = $(".reference-dataset").data("repolink") || "";
  },
  beforeDestroy() {},
};
</script>

<style scoped>
.dataset-search-vue {
  z-index: 9999;
  position: absolute;
  right: 31%;
  height: 30px;
  top: 60px;
}
.refer-dataset-card {
  cursor: pointer;
  box-shadow: 0px 4px 4px 0px rgba(232, 232, 232, 0.6);
  border: 1px solid rgba(232, 232, 232, 1);
}
.refer-dataset-card .refer-dataset-card-content {
  font-size: 16px;
  color: #0366d6;
  font-family: SourceHanSansSC-medium;
  height: 34px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.refer-dataset-card-title {
  display: flex;
  align-items: center;
  max-width: 80%;
  width: 100%;
}
.dataset-card-flavor {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  border: #888888;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: -1px;
}
.card-flavor-num {
  padding: 0.5rem;
  border: #888888;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.card-flavor-desc {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  color: #999999;
  font-size: 14px;
  margin-top: 10px;
}
.select-data-wrap {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.select-data-title {
  flex: 1;
  overflow: hidden;
}
.select-data-title .ref-data-title {
  font-size: 18px;
  color: #454545;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-data-href {
  text-align: right;
  text-overflow: ellipsis;
  max-width: 35%;
  word-break: initial;
  margin-left: 1rem;
}
/deep/ .el-checkbox-group .el-checkbox .el-checkbox__label {
  max-width: 100%;
}
.select-data-right {
  overflow: hidden;
  vertical-align: middle;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}
</style>