| @@ -1,165 +1,170 @@ | |||||
| <template> | <template> | ||||
| <div> | <div> | ||||
| <template v-if="showFlag"> | <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`">{{ | |||||
| i18n.current_dataset | |||||
| }}</a> | |||||
| <a | |||||
| class="active item" | |||||
| :href="`${repoLink}/datasets/reference_datasets`" | |||||
| >{{ i18n.linked_datasets }}</a | |||||
| <div v-loading="loadingLinkPage"> | |||||
| <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`">{{ | |||||
| i18n.current_dataset | |||||
| }}</a> | |||||
| <a | |||||
| class="active item" | |||||
| :href="`${repoLink}/datasets/reference_datasets`" | |||||
| >{{ i18n.linked_datasets }}</a | |||||
| > | |||||
| </div> | |||||
| <button | |||||
| style="margin-right: 2rem" | |||||
| class="ui green button" | |||||
| @click="openDataset()" | |||||
| > | > | ||||
| {{ i18n.linked_datasets }} | |||||
| </button> | |||||
| </div> | </div> | ||||
| <button | |||||
| style="margin-right: 2rem" | |||||
| class="ui green button" | |||||
| @click="openDataset()" | |||||
| > | |||||
| {{ i18n.linked_datasets }} | |||||
| </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" | |||||
| @click="gotoDataset(item)" | |||||
| > | |||||
| <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" | |||||
| @click.stop="postStar(item)" | |||||
| > | |||||
| <i class="ri-heart-fill" style="color: #fa8c16"></i> | |||||
| <span style="margin-left: 0.3rem">{{ | |||||
| i18n.unfavorite | |||||
| }}</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" | |||||
| @click.stop="postStar(item)" | |||||
| > | |||||
| <i class="ri-heart-line"></i> | |||||
| <span style="margin-left: 0.3rem">{{ | |||||
| i18n.favorite | |||||
| }}</span> | |||||
| </button> | |||||
| <a class="ui mini basic button card-flavor-num"> | |||||
| {{ item.NumStars }} | |||||
| </a> | |||||
| <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" | |||||
| @click="gotoDataset(item)" | |||||
| > | |||||
| <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> | </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" | |||||
| >{{ i18n[item.Category] || item.Category }}</a | |||||
| > | |||||
| <a | |||||
| v-if="item.Task" | |||||
| :href="'/explore/datasets?task=' + item.Task" | |||||
| class="ui repo-topic label topic" | |||||
| >{{ i18n[item.Task] || 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> | |||||
| <template v-if="item.IsStaring"> | |||||
| <div style="display: flex"> | |||||
| <button | |||||
| class="ui mini basic button dataset-card-flavor" | |||||
| @click.stop="postStar(item)" | |||||
| > | |||||
| <i class="ri-heart-fill" style="color: #fa8c16"></i> | |||||
| <span style="margin-left: 0.3rem">{{ | |||||
| i18n.unfavorite | |||||
| }}</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" | |||||
| @click.stop="postStar(item)" | |||||
| > | |||||
| <i class="ri-heart-line"></i> | |||||
| <span style="margin-left: 0.3rem">{{ | |||||
| i18n.favorite | |||||
| }}</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" | |||||
| >{{ i18n[item.Category] || item.Category }}</a | |||||
| > | |||||
| <a | |||||
| v-if="item.Task" | |||||
| :href="'/explore/datasets?task=' + item.Task" | |||||
| class="ui repo-topic label topic" | |||||
| >{{ i18n[item.Task] || 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> | ||||
| </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> | |||||
| <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 | <span | ||||
| style=" | style=" | ||||
| color: #101010; | |||||
| color: #999999; | |||||
| font-size: 12px; | font-size: 12px; | ||||
| margin-left: 0.2rem; | |||||
| margin-left: 0.5rem; | |||||
| " | " | ||||
| >{{ item.UseCount }}</span | |||||
| >{{ item.CreatedUnix | transformTimestamp }}</span | |||||
| > | > | ||||
| </span> | |||||
| <span | |||||
| style="display: flex; align-items: center; flex: 1" | |||||
| title="下载次数" | |||||
| > | |||||
| <i class="ri-download-line"></i> | |||||
| <span | <span | ||||
| style=" | style=" | ||||
| color: #101010; | |||||
| font-size: 12px; | |||||
| margin-left: 0.2rem; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| margin: 0 1rem; | |||||
| " | " | ||||
| >{{ item.DownloadTimes }}</span | |||||
| title="引用次数" | |||||
| > | > | ||||
| </span> | |||||
| <button | |||||
| class="ui mini button" | |||||
| @click.stop="cancelReferData(item.ID)" | |||||
| > | |||||
| {{ i18n.disassociate }} | |||||
| </button> | |||||
| <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)" | |||||
| > | |||||
| {{ i18n.disassociate }} | |||||
| </button> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -234,7 +239,7 @@ | |||||
| > | > | ||||
| <el-tabs v-model="activeName"> | <el-tabs v-model="activeName"> | ||||
| <el-tab-pane :label="i18n.public_dataset" name="first"> | <el-tab-pane :label="i18n.public_dataset" name="first"> | ||||
| <el-row> | |||||
| <el-row v-loading="loadingPublicPage"> | |||||
| <el-checkbox-group | <el-checkbox-group | ||||
| v-model="checkList" | v-model="checkList" | ||||
| style="font-size: 14px; line-height: 1" | style="font-size: 14px; line-height: 1" | ||||
| @@ -364,6 +369,8 @@ export default { | |||||
| totalNum: 0, | totalNum: 0, | ||||
| currentPage: 1, | currentPage: 1, | ||||
| loadingLinkPage: false, | |||||
| loadingPublicPage: false, | |||||
| }; | }; | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| @@ -454,16 +461,26 @@ export default { | |||||
| }, | }, | ||||
| getSelectDatasetList() { | getSelectDatasetList() { | ||||
| this.loadingLinkPage = true; | |||||
| let url = `${this.repoLink}/datasets/reference_datasets_data`; | let url = `${this.repoLink}/datasets/reference_datasets_data`; | ||||
| this.$axios.get(url).then((res) => { | this.$axios.get(url).then((res) => { | ||||
| this.datasetList = res.data; | |||||
| this.datasetList.length | |||||
| ? (this.showFlag = true) | |||||
| : (this.showFlag = false); | |||||
| this.loadingLinkPage = false; | |||||
| console.log(res); | |||||
| if (!res.data) { | |||||
| this.showFlag = false; | |||||
| return; | |||||
| } else { | |||||
| this.datasetList = res.data; | |||||
| this.datasetList.length | |||||
| ? (this.showFlag = true) | |||||
| : (this.showFlag = false); | |||||
| } | |||||
| console.log("this.getDatasetList:", this.datasetList); | console.log("this.getDatasetList:", this.datasetList); | ||||
| }); | }); | ||||
| }, | }, | ||||
| getDatasetList() { | getDatasetList() { | ||||
| this.loadingPublicPage = true; | |||||
| let url = `${this.repoLink}/datasets/reference_datasets_available`; | let url = `${this.repoLink}/datasets/reference_datasets_available`; | ||||
| this.$axios | this.$axios | ||||
| .get(url, { | .get(url, { | ||||
| @@ -472,16 +489,21 @@ export default { | |||||
| .then((res) => { | .then((res) => { | ||||
| this.publicDatasetList = JSON.parse(res.data.data); | this.publicDatasetList = JSON.parse(res.data.data); | ||||
| this.totalNum = parseInt(res.data.count); | this.totalNum = parseInt(res.data.count); | ||||
| this.loadingPublicPage = false; | |||||
| // this.search = ""; | // this.search = ""; | ||||
| // this.searchName(); | // this.searchName(); | ||||
| }); | }); | ||||
| }, | }, | ||||
| submitReferDataset() { | submitReferDataset() { | ||||
| let url = `${this.repoLink}/datasets/reference_datasets`; | let url = `${this.repoLink}/datasets/reference_datasets`; | ||||
| let data = this.qs.stringify({ | |||||
| _csrf: csrf, | |||||
| dataset_id: this.checkList, | |||||
| }); | |||||
| let data = this.qs.stringify( | |||||
| { | |||||
| _csrf: csrf, | |||||
| dataset_id: this.checkList, | |||||
| }, | |||||
| { arrayFormat: "repeat" } | |||||
| ); | |||||
| console.log(data); | |||||
| this.$axios.post(url, data).then((res) => { | this.$axios.post(url, data).then((res) => { | ||||
| if (res.data.Code === 0) { | if (res.data.Code === 0) { | ||||
| this.getSelectDatasetList(); | this.getSelectDatasetList(); | ||||