fix issue

templates/repo/datasets/index.tmpl

@@ -20,7 +20,6 @@
   .wrapper {
     display: flex;
     overflow: hidden;
-    padding: 0 1rem;
   }
 
   .exp {
@@ -40,7 +39,8 @@
   }
 
   .exp:checked+.text .btn::after {
-    content:'{{$.i18n.Tr "org.fold"}}'
+    content:'{{$.i18n.Tr "org.fold"}}';
+    color: #3291f8;
   }
 
   .wrapper>.text {
@@ -80,7 +80,7 @@
     margin-left: 20px;
     font-size: 14px;
     padding: 0 8px;
-    background: #3F51B5;
+    background-color: transparent;
     line-height: 20px;
     border-radius: 4px;
     color: #fff;
@@ -89,7 +89,8 @@
   }
 
   .btn::after {
-    content:'{{$.i18n.Tr "org.unfold"}}'
+    content:'{{$.i18n.Tr "org.unfold"}}';
+    color: #3291f8;
   }
 
   .btn::before {
@@ -132,6 +133,15 @@
     border: 5px solid transparent;
     border-top-color: #c0c4cc;
   }
+  .dataset-flavor-button{
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    border: 1px solid rgba(34,36,38,0.15);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    box-shadow: none
+  }
 </style>
 <div class="repository">
   {{template "repo/header" .}}
@@ -142,44 +152,59 @@
     <div class="item" data-private="{{.IsPrivate}}" data-decompress-state="{{.DecompressState}}"></div>
     {{end}}
   </div>
-
   <div id="dataset-base">
     <div class="ui container">
       <div class="ui mobile reversed stackable grid">
         <div class="row">
-          <div class="column thirteen wide">
-            <h2 class="nowrap">{{.dataset.Title}}</h2>
+          <div class="ui blue small menu compact selectcloudbrain">
+            <a class="active item" href="{{.RepoLink}}/datasets">当前数据集</a>
+            <a class="item" href="{{.RepoLink}}/datasets/reference_datasets">关联数据集</a>
           </div>
-          <div class="column three wide right aligned">
-            <span style="display: flex;align-items: center;justify-content: flex-end;height: 36px;">
-              {{if $.IsSigned}}
-              <div style="line-height: 1;margin-right: 4px;margin-bottom: -2px;padding: 0 10px;"
-                @click="postStar({{.dataset.ID}},'{{.Link}}')">
-                <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"
-                  :class='{stars_active:star_active}'>
-                  <path
-                    d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z">
-                  </path>
-                </svg>
-              </div>
-              <span style="line-height: 1;">${num_stars}</span>
-              {{else}}
-              <div style="line-height: 1;margin-right: 4px;margin-bottom: -2px;padding: 0 10px;">
-                <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"
-                  :class='{stars_active:star_active}'>
-                  <path
-                    d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z">
-                  </path>
-                </svg>
-              </div>
-              <span style="line-height: 1;">${num_stars}</span>
-              {{end}}
-              <a style="margin-left:30px;" href="{{.RepoLink}}/datasets/edit/{{.dataset.ID}}"
-                class="ui primary basic mini {{if not $.CanWrite}} disabled {{end}} button">{{.i18n.Tr "repo.modelarts.modify"}}</a>
-            </span>
+        </div>
+        <div class="row" style="align-items: center;">
+          <h2 class="nowrap" style="margin: 0;">{{.dataset.Title}}</h2>
+          <!-- border-top-right-radius: 0;
+          border-bottom-right-radius: 0; -->
+          <div style="margin-left: 1.5rem;">
+            {{if $.IsSigned}}
+            <button v-if="star_active" class="ui mini basic button" style="display: flex;align-items: center;padding: 0.5rem;border: #888888;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;" @click="postStar({{.dataset.ID}},'{{.Link}}')">
+              <i class="ri-heart-fill" style="color: #FA8C16;"></i>
+              <span style="margin-left: 0.3rem;font-size: 0.7rem;">取消收藏</span>
+            </button>
+            <button v-else class="ui mini basic button" style="display: flex;align-items: center;padding:0.5rem;border: #888888;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;" @click="postStar({{.dataset.ID}},'{{.Link}}')">
+              <i class="ri-heart-line" ></i>
+              <span style="margin-left: 0.3rem;font-size: 0.7rem;">收藏</span>
+            </button>
+            {{else}}
+            <button v-if="star_active" class="ui mini basic button" style="display: flex;align-items: center;padding: 0.5rem;border: #888888;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;">
+              <i class="ri-heart-fill" ></i>
+              <span style="margin-left: 0.3rem;font-size: 0.7rem;">取消收藏</span>
+            </button>
+            <button v-else class="ui mini basic button" style="display: flex;align-items: center;padding:0.5rem;border: #888888;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;">
+              <i class="ri-heart-line" style="color: #FA8C16;"></i>
+              <span style="margin-left: 0.3rem;font-size: 0.7rem;">收藏</span>
+            </button>
+            {{end}}
           </div>
+          <a  class="ui mini basic button" style="display: flex;align-items: center;padding: 0.5rem;border: #888888;border-top-left-radius: 0;border-bottom-left-radius: 0;">
+            ${num_stars}
+          </a>
+          <a style="margin-left:15px;padding: 0.5rem 1.5rem;" href="{{.RepoLink}}/datasets/edit/{{.dataset.ID}}" class="ui primary basic mini {{if not $.CanWrite}} disabled {{end}} button">{{.i18n.Tr "repo.modelarts.modify"}}</a>
+        </div>
+        {{if .dataset.Description}}
+        <div class="row" style="padding: 0;">
+          <div class="wrapper">
+            <input id="exp1" class="exp" type="checkbox">
+            <div class="text">
+              <label class="btn" for="exp1"></label>
+              {{.dataset.Description}}
+            </div>
+          </div>
+        </div>
+        {{end}}
+        <div class="row" style="align-items: center;">
           {{if or (.dataset.Category) (.dataset.Task) (.dataset.License)}}
-          <div class="column thirteen wide">
+          <div class="column ten wide" style="padding:0">
             {{if .dataset.Category}}
             {{$category := .dataset.Category}}
             <a class="ui repo-topic label topic"
@@ -196,21 +221,7 @@
             {{end}}
           </div>
           {{end}}
-        </div>
-        {{if .dataset.Description}}
-        <div class="row" style="padding-top: 0;">
-          <div class=" wrapper">
-            <input id="exp1" class="exp" type="checkbox">
-            <div class="text">
-              <label class="btn" for="exp1"></label>
-              {{.dataset.Description}}
-            </div>
-          </div>
-        </div>
-        {{end}}
-        <div class="row">
-          <div class="column ten wide"></div>
-          <div class="column six wide right aligned">
+          <div class="column six wide right aligned" style="padding:0">
             <el-select v-model="datasetType" style="width: 40%;" size="small" @change="changeDatasetType">
               <i slot="prefix" style="display: inline-block;color: #101010;"
                 class="el-input__icon ri-archive-drawer-line"></i>
@@ -222,7 +233,7 @@
               @click="gotoUpload('{{.RepoLink}}',{{.dataset.ID}})">{{$.i18n.Tr "dataset.dataset_upload"}}</el-button>
           </div>
         </div>
-        <div class="row">
+        <div class="row" style="padding-top: 0;">
           <div class="ui sixteen wide column dataset">
             <div class="ui grid stackable" style="background: #f0f0f0;;">
               <div class="row">
@@ -387,16 +398,27 @@
     </div>
   </div>
   {{else}}
-  <div class="ui placeholder segment bgtask-none">
-    <div class="ui icon header bgtask-header-pic"></div>
-    <div class="bgtask-content-header">{{.i18n.Tr "dataset.dataset_no_create"}}</div>
-    {{if $.CanWrite}}
-    <a class="ui green button" href="{{.RepoLink}}/datasets/create">{{.i18n.Tr "dataset.create_new_dataset"}}</a>
-    {{end}}
-    <div class="bgtask-content">
-      <div class="bgtask-content-txt">{{.i18n.Tr "dataset.dataset_explain"}}</div>
-      <div class="bgtask-content-txt">{{.i18n.Tr "dataset.dataset_instructions_for_use"}}<a
-          href="https://git.openi.org.cn/zeizei/OpenI_Learning">{{.i18n.Tr "dataset.dataset_camp_course"}}</a></div>
+  <div class="ui container">
+    <div class="ui stackable grid">
+      <div class="row" style="justify-content: space-between">
+        <div class="ui blue small menu compact selectcloudbrain">
+          <a class="active item" href="{{.RepoLink}}/datasets">当前数据集</a>
+          <a class="item" href="{{.RepoLink}}/datasets/reference_datasets">关联数据集</a>
+        </div>
+        {{if $.CanWrite}}
+        <a class="ui green button" href="{{.RepoLink}}/datasets/create">创建数据集</a>
+        {{end}}
+      </div>
+    </div>
+    
+    <div class="ui placeholder segment bgtask-none">
+        <div class="ui icon header bgtask-header-pic"></div>
+        <div class="bgtask-content-header">{{.i18n.Tr "dataset.dataset_no_create"}}</div>
+        <div class="bgtask-content">
+          <div class="bgtask-content-txt">{{.i18n.Tr "dataset.dataset_explain"}}</div>
+          <div class="bgtask-content-txt">{{.i18n.Tr "dataset.dataset_instructions_for_use"}}<a
+              href="https://git.openi.org.cn/zeizei/OpenI_Learning">{{.i18n.Tr "dataset.dataset_camp_course"}}</a></div>
+        </div>
     </div>
   </div>
   {{end}}

templates/repo/datasets/reference.tmpl

@@ -0,0 +1,8 @@
+{{template "base/head" .}}
+
+<div class="repository">
+	{{template "repo/header" .}}
+	<div class="reference-dataset" data-repolink="{{.RepoLink}}"></div>
+	<div id="reference-dataset"></div>
+</div>
+{{template "base/footer" .}}

templates/repo/header.tmpl

@@ -138,7 +138,7 @@
 				{{end}}
 
 				{{if .Permission.CanRead $.UnitTypeDatasets}}
-				<a class="{{if .PageIsDataset}}active{{end}} item" href="{{.RepoLink}}/datasets">
+				<a class="{{if .PageIsDataset}}active{{end}} item" href="{{.RepoLink}}{{if IsShowDataSetOfCurrentRepo $.Repository.ID}}/datasets{{else}}/datasets/reference_datasets{{end}}">
 					<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z"/></svg>
 					{{.i18n.Tr "datasets"}}
 				</a>

web_src/js/components/dataset/referenceDataset.vue

@@ -0,0 +1,368 @@
+<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>

web_src/js/index.js

@@ -46,6 +46,7 @@ import initCloudrain from "./features/cloudrbanin.js";
 import initCloudrainSow from "./features/cloudbrainShow.js";
 import initImage from "./features/images.js";
 import selectDataset from "./components/dataset/selectDataset.vue";
+import referenceDataset from "./components/dataset/referenceDataset.vue";
 // import $ from 'jquery.js'
 import router from "./router/index.js";
 import { Message } from "element-ui";
@@ -2900,6 +2901,7 @@ $(document).ready(async () => {
   initVueDataAnalysis();
   initVueWxAutorize();
   initVueselectDataset();
+  initVuereferenceDataset();
   initTeamSettings();
   initCtrlEnterSubmit();
   initNavbarContentToggle();
@@ -4532,6 +4534,17 @@ function initVueselectDataset() {
     render: (h) => h(selectDataset),
   });
 }
+function initVuereferenceDataset() {
+  const el = document.getElementById("reference-dataset");
+  console.log("-=-==", el);
+  if (!el) {
+    return;
+  }
+  new Vue({
+    el: el,
+    render: (h) => h(referenceDataset),
+  });
+}
 window.timeAddManual = function () {
   $(".mini.modal")
     .modal({