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

<template>
  <div
    class="inline required field"
    :class="{ unite: benchmarkNew, min_title: benchmarkNew }"
  >
    <label v-if="benchmarkNew" style="font-weight: normal">数据集</label>
    <label v-else>数据集</label>
    <span v-if="benchmarkNew">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <input
      v-if="benchmarkNew"
      type="text"
      name="image"
      :value="imageAddress"
      style="width: 48.5%"
      placeholder="选择镜像或输入镜像地址"
    />
    <input
      v-else
      type="text"
      name="image"
      :value="imageAddress"
      placeholder="选择镜像或输入镜像地址"
    />
    <el-button
      type="text"
      @click="openDataset"
      icon="el-icon-plus"
      style="color: #0366d6"
      >选择数据集
    </el-button>
    <el-dialog title="选择数据集" :visible.sync="dialogVisible" width="50%">
      <div
        class="ui icon input"
        style="
          z-index: 9999;
          position: absolute;
          right: 28%;
          height: 30px;
          top: 6px;
        "
      >
        <i
          class="search icon"
          style="cursor: pointer; pointer-events: auto"
        ></i>
        <input
          type="text"
          placeholder="搜镜像Tag/描述/标签..."
          v-model="search"
        />
      </div>
      <el-row>
        <el-col
          :span="18"
          style="
            padding-right: 1rem;
            border-right: 1px solid #f5f5f6;
            position: relative;
          "
        >
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 当前项目的数据集 -->
            <el-tab-pane label="本项目" name="first" v-loading="loadingCurrent">
              <el-row>
                <el-tree
                  :data="currentDatasetList"
                  ref="currentTree"
                  highlight-current
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="initCurrentTreeNode"
                  :props="defaultProps"
                  :index="20"
                  accordion
                  @check="onCheck"
                >
                  <span slot-scope="{ node, data }" class="slot-wrap">
                    <span v-if="data.parent" class="custom-tree-node">
                      <el-tooltip v-if="data.desc">
                        <div slot="content" class="multiple-wrap">
                          {{ data.desc }}
                        </div>
                        <span class="dataset-title dataset-nowrap"
                          >{{ node.label }}
                        </span>
                      </el-tooltip>
                      <span v-else class="dataset-title dataset-nowrap"
                        >{{ node.label }}
                      </span>
                      <a
                        href="/"
                        target="_blank"
                        class="dataset-repolink dataset-nowrap"
                        title="asdasdasd"
                        >chen/datset</a
                      >
                    </span>
                    <span v-else>{{ node.label }}</span>
                  </span>
                </el-tree>
                <div></div>
              </el-row>
              <div
                class="ui container"
                style="margin-top: 25px; text-align: center"
              >
                <el-pagination
                  background
                  @current-change="currentChangePage"
                  :current-page="initCurrentPage"
                  :page-size="5"
                  layout="total, prev, pager, next"
                  :total="totalNumCurrent"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <!-- 我上传的数据集 -->
            <el-tab-pane label="我上传的" name="second" v-loading="loadingMy">
              <el-row>
                <el-tree
                  :data="myDatasetList"
                  ref="myTree"
                  highlight-current
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="initMyTreeNode"
                  :props="defaultProps"
                  :index="20"
                  accordion
                  @check="onCheck"
                >
                  <span slot-scope="{ node, data }" class="slot-wrap">
                    <span v-if="data.parent" class="custom-tree-node">
                      <el-tooltip v-if="data.desc">
                        <div slot="content" class="multiple-wrap">
                          {{ data.desc }}
                        </div>
                        <span class="dataset-title dataset-nowrap"
                          >{{ node.label }}
                        </span>
                      </el-tooltip>
                      <span v-else class="dataset-title dataset-nowrap"
                        >{{ node.label }}
                      </span>
                      <a
                        href="/"
                        target="_blank"
                        class="dataset-repolink dataset-nowrap"
                        title="asdasdasd"
                        >chen/datset</a
                      >
                    </span>
                    <span v-else>{{ node.label }}</span>
                  </span>
                </el-tree>
                <div></div>
              </el-row>
              <div
                class="ui container"
                style="margin-top: 25px; text-align: center"
              >
                <el-pagination
                  background
                  @current-change="myChangePage"
                  :current-page="initMyPage"
                  :page-size="5"
                  layout="total, prev, pager, next"
                  :total="totalNumMy"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <!-- 公开的数据集 -->
            <el-tab-pane
              label="公开数据集"
              name="third"
              v-loading="loadingPublic"
            >
              <el-row>
                <el-tree
                  :data="publicDatasetList"
                  ref="publicTree"
                  highlight-current
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="initPublicTreeNode"
                  :props="defaultProps"
                  :index="20"
                  accordion
                  @check="onCheck"
                >
                  <span slot-scope="{ node, data }" class="slot-wrap">
                    <span v-if="data.parent" class="custom-tree-node">
                      <el-tooltip v-if="data.desc">
                        <div slot="content" class="multiple-wrap">
                          {{ data.desc }}
                        </div>
                        <span class="dataset-title dataset-nowrap"
                          >{{ node.label }}
                        </span>
                      </el-tooltip>
                      <span v-else class="dataset-title dataset-nowrap"
                        >{{ node.label }}
                      </span>
                      <a
                        href="/"
                        target="_blank"
                        class="dataset-repolink dataset-nowrap"
                        title="asdasdasd"
                        >chen/datset</a
                      >
                    </span>
                    <span v-else>{{ node.label }}</span>
                  </span>
                </el-tree>
                <div></div>
              </el-row>
              <div
                class="ui container"
                style="margin-top: 25px; text-align: center"
              >
                <el-pagination
                  background
                  @current-change="publicChangePage"
                  :current-page="initPublicPage"
                  :page-size="5"
                  layout="total, prev, pager, next"
                  :total="totalNumPublic"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <!-- 我点赞的数据集 -->
            <el-tab-pane
              label="我点赞的"
              name="four"
              v-loading="loadingFavorite"
            >
              <el-row>
                <el-tree
                  :data="MyFavoriteDatasetList"
                  ref="favoriteTree"
                  highlight-current
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="initFavoriteTreeNode"
                  :props="defaultProps"
                  :index="20"
                  accordion
                  @check="onCheck"
                >
                  <span slot-scope="{ node, data }" class="slot-wrap">
                    <span v-if="data.parent" class="custom-tree-node">
                      <el-tooltip v-if="data.desc">
                        <div slot="content" class="multiple-wrap">
                          {{ data.desc }}
                        </div>
                        <span class="dataset-title dataset-nowrap"
                          >{{ node.label }}
                        </span>
                      </el-tooltip>
                      <span v-else class="dataset-title dataset-nowrap"
                        >{{ node.label }}
                      </span>
                      <a
                        href="/"
                        target="_blank"
                        class="dataset-repolink dataset-nowrap"
                        title="asdasdasd"
                        >chen/datset</a
                      >
                    </span>
                    <span v-else>{{ node.label }}</span>
                  </span>
                </el-tree>
                <div></div>
              </el-row>
              <div
                class="ui container"
                style="margin-top: 25px; text-align: center"
              >
                <el-pagination
                  background
                  @current-change="favoriteChangePage"
                  :current-page="initFavoritePage"
                  :page-size="5"
                  layout="total, prev, pager, next"
                  :total="totalNumFavorite"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col
          :span="6"
          style="
            display: flex;
            flex-direction: column;
            height: 100%;
            right: 0;
            position: absolute;
            padding: 0 1.5rem;
          "
        >
          <div
            style="
              font-size: 14px;
              height: 20px;
              text-align: left;
              color: #0066ff;
            "
          >
            已选择数据集
          </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.label"
                @change="(checked) => changeCheckbox(checked, item)"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
          <div>
            <el-button>aaaa</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

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

export default {
  components: {},
  data() {
    return {
      data: [
        {
          id: 1,
          label:
            "一级 1asdasdasdddddddddddddddddddddddddddddddddddddddddddddddzxccccccasdzxczxcasdasd",
          disabled: true,
          desc: "asdasjhdashdjkasssssssssssssdasasdasdasdxzczxczcxasdasdddddddddddddddddddddddddddddddddxzczxcsadddddddddddddddddddddddddddddddddzxcccccccasdasdxczzzasdasczxcasdaszxcsadazxc",
          children: [
            {
              id: 4,
              label: "二级 1-1",
            },
            {
              id: 9,
              label: "三级 1-1-1",
            },
            {
              id: 10,
              label: "三级 1-1-2",
            },
            {
              id: 11,
              label: "三级 1-1-3",
            },
            {
              id: 12,
              label: "二级 1-1",
            },
            {
              id: 13,
              label: "三级 1-1-1",
            },
            {
              id: 14,
              label: "三级 1-1-2",
            },
            {
              id: 15,
              label: "三级 1-1-3",
            },
            {
              id: 16,
              label: "三级 1-1-1",
            },
            {
              id: 17,
              label: "三级 1-1-2",
            },
            {
              id: 18,
              label: "三级 1-1-3",
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          disabled: true,
          desc: "",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          disabled: true,
          desc: "",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      data1: [
        {
          id: 21,
          label:
            "一级 1asdasdasdddddddddddddddddddddddddddddddddddddddddddddddzxccccccasdzxczxcasdasd",
          disabled: true,
          desc: "asdasjhdashdjkasssssssssssssdasasdasdasdxzczxczcxasdasdddddddddddddddddddddddddddddddddxzczxcsadddddddddddddddddddddddddddddddddzxcccccccasdasdxczzzasdasczxcasdaszxcsadazxc",
          children: [
            {
              id: 24,
              label: "二级 1-1",
            },
            {
              id: 29,
              label: "三级 1-1-1-1",
            },
            {
              id: 30,
              label: "三级 1-1-2-2",
            },
            {
              id: 31,
              label: "三级 1-1-3-3",
            },
            {
              id: 32,
              label: "二级 1-1-1",
            },
            {
              id: 33,
              label: "三级 1-1-1-1",
            },
            {
              id: 34,
              label: "三级 1-1-2-2",
            },
            {
              id: 35,
              label: "三级 1-1-3",
            },
            {
              id: 36,
              label: "三级 1-1-1",
            },
            {
              id: 37,
              label: "三级 1-1-2",
            },
            {
              id: 38,
              label: "三级 1-1-3",
            },
          ],
        },
        {
          id: 40,
          label: "一级 2",
          disabled: true,
          desc: "",
          children: [
            {
              id: 45,
              label: "二级 2-1",
            },
            {
              id: 46,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 50,
          label: "一级 3",
          disabled: true,
          desc: "",
          children: [
            {
              id: 51,
              label: "二级 3-1",
            },
            {
              id: 52,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "Attachments",
        label: "label",
      },

      dialogVisible: false,
      benchmarkNew: false,
      imageAddress: "",
      activeName: "first",
      search: "",

      type: 0,
      repoLink: "",
      selectDatasetArray: [],
      checkList: [],
      checkList1: [],
      //当前项目数据集页面配置的初始化
      initCurrentPage: 1,
      totalNumCurrent: 0,
      paramsCurrent: { page: 1, q: "" },
      currentDatasetList: [],
      loadingCurrent: false,
      initCurrentTreeNode: [],
      //我上传的数据集页面配置的初始化
      initMyPage: 1,
      totalNumMy: 0,
      paramsMy: { page: 1, q: "" },
      myDatasetList: [],
      loadingMy: false,
      initMyTreeNode: [],
      //公开的数据集页面配置的初始化
      initPublicPage: 1,
      totalNumPublic: 0,
      paramsPublics: { page: 1, q: "" },
      publicDatasetList: [],
      loadingPublic: false,
      initPublicTreeNode: [],
      //我点赞的数据集页面配置的初始化
      initFavoritePage: 1,
      totalNumFavorite: 0,
      MyFavoriteDatasetList: [],
      paramsFavorite: { page: 1, q: "" },
      loadingFavorite: false,
      initFavoriteTreeNode: [],
    };
  },
  methods: {
    openDataset() {
      this.dialogVisible = true;
      this.getCurrentRepoDataset();
    },
    handleClick(tab, event) {
      this.search = "";
      if (tab.name == "first") {
        // this.paramsPublic.q = "";
        this.getCurrentRepoDataset();
      }
      if (tab.name == "second") {
        this.getMyUploadDataset();
      }
      if (tab.name == "third") {
        this.getPublicDataset();
      }
      if (tab.name == "four") {
        this.getMyFavoriteDataset();
      }
    },
    // checkChange(data, checked, indeterminate) {
    //   console.log("------------checkChange----------");
    //   console.log("-----data,", data, checked, indeterminate);

    //   if (checked) {
    //     console.log("--------------start Array", this.selectDatasetArray);
    //     let flag = this.selectDatasetArray.some(
    //       (item) => item.label === data.label
    //     );
    //     if (flag) {
    //       this.$refs.currentTree.setChecked(data.id, false);
    //       this.$message.warning("不能选择相同名称的数据文件");
    //     } else if (this.selectDatasetArray.length === 5) {
    //       this.$refs.currentTree.setChecked(data.id, false);
    //       this.$message.error("最多不超过五个文件");
    //     } else {
    //       this.selectDatasetArray.push(data);
    //     }
    //   } else {
    //     const index = this.selectDatasetArray.findIndex(
    //       (item) => item.id === data.id
    //     );
    //     console.log("---------", index);
    //     if (index !== -1) {
    //       this.selectDatasetArray.splice(index, 1);
    //     }
    //   }

    //   console.log("--------------end Array", this.selectDatasetArray);

    // },
    onCheck(data, checkedInfo) {
      console.log("--ref------", this.$refs[data.ref]);
      console.log("---------oncheck-----", data, checkedInfo);

      console.log("start array", this.selectDatasetArray);
      if (
        this.selectDatasetArray.length === 0 ||
        this.selectDatasetArray.every((item) => item.id !== data.id)
      ) {
        console.log("111111111111");
        if (this.selectDatasetArray.some((item) => item.label === data.label)) {
          this.$refs[data.ref].setChecked(data.id, false, false);
          this.$message.warning("不能选择相同名称的数据文件");
        } else if (this.selectDatasetArray.length === 5) {
          this.$refs[data.ref].setChecked(data.id, false, false);
          this.$message.error("最多不超过五个文件");
        } else {
          console.log("push");
          this.selectDatasetArray.push(data);
        }
      } else {
        console.log("55555555555");
        let index = this.selectDatasetArray.findIndex((item) => {
          console.log(item.id, data.id);
          return item.id === data.id;
        });
        console.log("index", index);
        this.selectDatasetArray.splice(index, 1);
        console.log(this.selectDatasetArray);
      }
      this.checkList = this.selectDatasetArray.map((item) => {
        return item.label;
      });
      this.checkList1 = this.selectDatasetArray.map((item) => {
        return item.id;
      });
      console.log(this.selectDatasetArray, this.checkList);
    },
    // onMyCheck(data, checkedInfo) {
    //   console.log("---------oncheck-----", data, checkedInfo);

    //   console.log("start array", this.selectDatasetArray);
    //   if (
    //     this.selectDatasetArray.length === 0 ||
    //     this.selectDatasetArray.every((item) => item.id !== data.id)
    //   ) {
    //     console.log("111111111111");
    //     if (this.selectDatasetArray.some((item) => item.label === data.label)) {
    //       this.$refs.myTree.setChecked(data.id, false, false);
    //       this.$message.warning("不能选择相同名称的数据文件");
    //     } else if (this.selectDatasetArray.length === 5) {
    //       this.$refs.myTree.setChecked(data.id, false, false);
    //       this.$message.error("最多不超过五个文件");
    //     } else {
    //       console.log("push");
    //       this.selectDatasetArray.push(data);
    //     }
    //   } else {
    //     console.log("55555555555");
    //     let index = this.selectDatasetArray.findIndex((item) => {
    //       console.log(item.id, data.id);
    //       return item.id === data.id;
    //     });
    //     console.log("index", index);
    //     this.selectDatasetArray.splice(index, 1);
    //     console.log(this.selectDatasetArray);
    //   }
    //   this.checkList = this.selectDatasetArray.map((item) => {
    //     return item.label;
    //   });
    //   console.log(this.selectDatasetArray, this.checkList);
    // },
    //已选择数据集checkbox group 勾选事件
    changeCheckbox(checked, data) {
      console.log(checked, data);
      if (this.data[0].children.some((item) => item.id === data.id)) {
        console.log("----is data-----------");
        this.$refs.currentTree.setChecked(data.id, false, false);
      } else if (this.data1[0].children.some((item) => item.id === data.id)) {
        console.log("----is data1-----------");
        this.$refs.myTree.setChecked(data.id, false, false);
      }

      let index = this.selectDatasetArray.findIndex((item) => {
        console.log(item.id, data.id);
        return item.id === data.id;
      });
      console.log("index", index);
      this.selectDatasetArray.splice(index, 1);
      console.log(this.selectDatasetArray);
    },
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#f5f5f6;color:#606266";
      }
    },

    currentChangePage(val) {
      this.paramsCurrent.page = val;
      this.getCurrentRepoDataset();
    },
    myChangePage(val) {
      this.paramsMy.page = val;
      this.getMyUploadDataset();
    },
    publicChangePage(val) {
      this.paramsPublics.page = val;
      this.getPublicDataset();
    },
    favoriteChangePage(val) {
      console.log(val);
      this.paramsFavorite.page = val;
      this.getMyFavoriteDataset();
    },

    getCurrentRepoDataset() {
      this.loadingCurrent = true;
      let url = this.repoLink + "/datasets/current_repo_m";
      this.paramsCurrent.type = this.type;
      this.$axios
        .get(url, {
          params: this.paramsCurrent,
        })
        .then((res) => {
          this.loadingCurrent = false;
          console.log(res);
          let data = JSON.parse(res.data.data);
          console.log(data);
          this.currentDatasetList = this.transformeTreeData(
            data,
            "currentTree"
          );
          this.initCurrentTreeNode = [this.currentDatasetList[0].id];
          console.log("this.initCurrentTreeNode", this.initCurrentTreeNode);
          this.totalNumCurrent = parseInt(res.data.count);
          console.log(this.selectDatasetArray);
          this.$refs.currentTree.setCheckedKeys(this.checkList1);
          console.log("this.currentDatasetList:", this.currentDatasetList);
        })
        .catch(function (error) {
          this.loadingCurrent = false;
          console.log(error);
        });
    },
    getMyUploadDataset() {
      this.loadingMy = true;
      let url = this.repoLink + "/datasets/my_datasets_m";
      this.paramsMy.type = this.type;
      this.$axios
        .get(url, {
          params: this.paramsMy,
        })
        .then((res) => {
          this.loadingMy = false;
          console.log(res);
          let data = JSON.parse(res.data.data);
          console.log(data);
          this.myDatasetList = this.transformeTreeData(data, "myTree");
          this.initMyTreeNode = [this.myDatasetList[0].id];
          this.totalNumMy = parseInt(res.data.count);
          console.log("this.myDatasetList:", this.myDatasetList);
        })
        .catch(function (error) {
          this.loadingMy = false;
          console.log(error);
        });
    },

    getPublicDataset() {
      this.loadingPublic = true;
      let url = this.repoLink + "/datasets/public_datasets_m";
      this.paramsPublics.type = this.type;
      this.$axios
        .get(url, {
          params: this.paramsPublics,
        })
        .then((res) => {
          this.loadingPublic = false;
          console.log(res);
          let data = JSON.parse(res.data.data);
          console.log(data);
          this.publicDatasetList = this.transformeTreeData(data, "publicTree");
          this.initPublicTreeNode = [this.publicDatasetList[0].id];
          this.totalNumPublic = parseInt(res.data.count);
          console.log("this.publicDatasetList:", this.publicDatasetList);
        })
        .catch(function (error) {
          this.loadingPublic = false;
          console.log(error);
        });
    },

    getMyFavoriteDataset() {
      this.loadingFavorite = true;
      let url = this.repoLink + "/datasets/my_favorite_m";
      this.paramsFavorite.type = this.type;
      this.$axios
        .get(url, {
          params: this.paramsCurrent,
        })
        .then((res) => {
          this.loadingFavorite = false;
          console.log(res);
          let data = JSON.parse(res.data.data);
          console.log(data);
          this.MyFavoriteDatasetList = this.transformeTreeData(
            data,
            "favoriteTree"
          );
          this.initFavoriteTreeNode = [this.MyFavoriteDatasetList[0].id];
          this.totalNumFavorite = parseInt(res.data.count);
          console.log(
            "this.MyFavoriteDatasetList:",
            this.MyFavoriteDatasetList
          );
        })
        .catch(function (error) {
          this.loadingFavorite = false;
          console.log(error);
        });
    },
    transformeTreeData(data, ref) {
      return data.reduce((preParent, curParent) => {
        curParent.id = `paraent-${curParent.ID}`;
        curParent.disabled = true;
        curParent.parent = true;
        curParent.label = curParent.Title;
        let childrenData = curParent.Attachments.reduce(
          (preChild, curchild) => {
            curchild.id = `chilrden-${ref}-${curchild.ID}`;
            curchild.ref = ref;
            if (curchild.DecompressState !== 1) {
              curchild.disabled = true;
            }
            curchild.label = curchild.Name;
            preChild.push(curchild);
            return preChild;
          },
          []
        );

        preParent.push(curParent);
        return preParent;
      }, []);
    },
    searchName() {
      if (this.activeName == "first") {
        this.paramsPublic.q = this.search;
        this.paramsPublic.page = 1;
        this.getImageListPublic();
      }
      if (this.activeName == "second") {
        this.paramsCustom.q = this.search;
        this.paramsCustom.page = 1;
        this.getImageListCustom();
      }
      if (this.activeName == "third") {
        this.paramsStar.q = this.search;
        this.paramsStar.page = 1;
        this.getImageListStar();
      }
    },
    selectImages(place) {
      this.imageAddress = place;
      this.dialogVisible = false;
    },
  },
  watch: {
    search(val) {
      if (this.activeName == "first") {
        this.paramsPublic.q = val;
        this.getCurrentRepoDataset();
      }
      if (this.activeName == "second") {
        this.paramsCustom.q = val;
        this.getMyUploadDataset();
      }
      if (this.activeName == "third") {
        this.paramsStar.q = val;
        this.getPublicDataset();
      }
      if (this.activeName == "four") {
        this.paramsStar.q = val;
        this.getMyFavoriteDataset();
      }
    },
  },
  mounted() {
    this.type = $(".cloudbrain-type").data("cloudbrain-type");
    this.repoLink = $(".cloudbrain-type").data("repo-link");
    console.log(this.type, this.repoLink);
    if (
      location.href.indexOf("benchmark") !== -1 ||
      location.href.indexOf("train-job") !== -1
    ) {
      this.benchmarkNew = true;
    }
  },
  created() {},
};
</script>

<style scoped>
.header-wrapper {
  background-color: #f5f5f6;
  padding-top: 15px;
}

.image_text {
  padding: 25px 0 55px 0;
}

#header {
  position: relative;
  top: -40px;
}

#success {
  background-color: #5bb973;
  color: white;
}

.text-over {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.image_title {
  display: inline-block;
  width: 80%;
  cursor: default;
  color: rgb(66, 98, 144);
}

.image_desc {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
}

.heart-stroke {
  stroke: #666;
  stroke-width: 2;
  fill: #fff;
}

.stars_active {
  fill: #fa8c16 !important;
  stroke: #fa8c16 !important;
}
/deep/ .el-dialog__body {
  position: relative;
}
.el-tree {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  cursor: default;
  background: #fff;
  color: #606266;
  font-family: SourceHanSansSC-medium;
}
.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom-tree-node .dataset-title {
  font-size: 14px;
  color: #101010;
  font-weight: 600;
  flex: 1;
}
.custom-tree-node .dataset-repolink {
  flex: 1;
  text-align: right;
}
.el-tree /deep/ .el-tree-node__content {
  height: 40px;
  background-color: #f5f5f6;
}
.el-tree /deep/ .el-tree-node__children .el-tree-node__content {
  height: 30px;
  background-color: #fff;
  line-height: 20px;
  font-size: 12px;
}
.dataset-nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-wrap {
  flex: 1;
  padding-right: 2rem;
  max-width: 93%;
}
.multiple-wrap {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  max-width: 400px;
  overflow: hidden;
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .multiple-wrap {
    max-width: 200px;
  }
}
</style>