radar_ui/src/views/dataManage/index/index.vue

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "DataManage",
});
</script>

<script setup lang="ts">
import { ref, unref, onMounted } from "vue";
import LeftChat from "@/views/dataManage/index/components/Module/Chat1.vue";
import CircleChat from "@/views/dataManage/index/components/Module/Chat2.vue";
import RadarChat from "@/views/dataManage/index/components/Module/RadarChat.vue";
import DataImport from "@/views/dataManage/index/components/Module/DataImport.vue";
import DataExport from "@/views/dataManage/index/components/Module/DataExport.vue";
import TestDataset from "@/views/dataManage/index/components/Module/testDataset.vue";
import TrainDataset from "@/views/dataManage/index/components/Module/trainDataset.vue";

import { useMain } from "@/views/dataManage/index/services/index.ts";

// const { state, getImportData } = useMain();
const { dataManageServices } = useMain();

const init = async () => {
  dataManageServices.dataImport.api.getImportData();
  dataManageServices.statistics.api.onUpdateChat();
  dataManageServices.dataset.api.getTestDataset();
  dataManageServices.dataset.api.getTrainDataset();
  await dataManageServices.dataExport.api.getExportData();
  await dataManageServices.statistics.api.getExportData();
};

const panelStatus = ref({
  rawOne: {
    left: "line",
  },
});

const pageRef = ref();

const chartChange = (type: string) => {
  panelStatus.value.rawOne.left = type;
};

onMounted(() => {
  init();
});

const prefix = "data-manage";
</script>

<template>
  <div :class="prefix" ref="pageRef">
    <div :class="`${prefix}-wrapper`">
      <div :class="`${prefix}-grid`">
        <LeftChat v-bind="dataManageServices" />
      </div>
      <div :class="`${prefix}-grid`">
        <CircleChat v-bind="dataManageServices.statistics" />
      </div>
    </div>
    <!-- <div :class="`${prefix}-wrapper`">
      <div :class="`${prefix}-grid`">
        <CircleChat v-bind="dataManageServices.statistics" />
      </div>
      <div :class="`${prefix}-grid ${prefix}-opacity`"></div>
    </div> -->
    <div :class="`${prefix}-wrapper`">
      <!-- {{ dataManageServices.dataImport }} -->
      <div :class="`${prefix}-grid`">
        <DataImport v-bind="dataManageServices" />
      </div>
    </div>
    <!-- <div :class="`${prefix}-wrapper`">
      <div :class="`${prefix}-grid`">
        <DataExport v-bind="dataManageServices.dataExport" />
      </div>
    </div> -->
    <div :class="`${prefix}-wrapper`">
      <div :class="`${prefix}-grid`">
        <TestDataset v-bind="dataManageServices.dataset" :pageRef="pageRef" />
      </div>
    </div>
    <div :class="`${prefix}-wrapper`">
      <div :class="`${prefix}-grid`">
        <TrainDataset v-bind="dataManageServices.dataset" :pageRef="pageRef" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "data-manage";

.#{$prefix} {
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
  &-wrapper {
    width: 100%;
    display: flex;
    gap: 17px;
    &:nth-child(1) {
      height: 377px;
    }
    &:nth-child(2) {
      min-height: 300px;
      // max-height: 800px;
    }
  }
  &-grid {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(231, 239, 251, 0.5);
    border-radius: 10px;
  }
  &-opacity {
    opacity: 0;
  }
  .wrapper {
    display: flex;
    gap: 10px;
    .grid {
    }
  }

  :deep(.wrapper) {
    display: flex;
    gap: 10px;
    width: 500px;
    flex-wrap: wrap;
    max-height: 600px;
    overflow: auto;
  }
  :deep(.index-box) {
    width: 150px;
    // width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    .index-box-circle {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid#1677ff;
      color: #1677ff;
      font-size: 12px;
    }
    .index-box-text {
      line-height: 16px;
      font-size: 14px;
    }
  }
  :deep(.download-option) {
    padding: 8px 4px;
    cursor: pointer;
    border-bottom: 1px solid #d9d9d9;
    &:hover {
      color: #1677ff;
    }
    &:last-child {
      border-bottom: none;
    }
  }
}
</style>