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: 3rem"
              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">取消关联</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">
                  <el-checkbox
                    class="checkbox-list"
                    label="复选框 A"
                  ></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                  <el-checkbox label="禁用" disabled></el-checkbox>
                  <el-checkbox label="选中且禁用" disabled></el-checkbox>
                </el-checkbox-group>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </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: "",
    };
  },
  methods: {
    openDataset() {
      console.log("open");
      this.dialogVisible = true;
    },
    searchName() {},
    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);
      });
    },
  },
  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;
}
.checkbox-list {
  display: flex;
}
.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;
}
</style>