LoongPanel-Asp/web/components/SettingCard.vue

<script lang="ts" setup>
import {charts} from "~/config/charts";
import { ArrowRight,ArrowLeft } from 'lucide-vue-next';
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
import type { CascaderOption } from 'naive-ui'

const current = ref<number | undefined>(1)
const selectChart = ref<number>(0)
const mainLayoutStore=useMainLayoutStore()
const options=ref<CascaderOption[]>([])
const value=ref<number|string|null>(null)
const prev=()=>{
  if (current.value === 0)
    current.value = undefined
  else if (!current.value)
    current.value = 4
  else current.value--
}
const next=()=>{
  if (current.value === 4)
    current.value=4
  else if (!current.value)
    current.value = 1
  else current.value++
}
onMounted(() => {
  $fetch('/Api/Job/GetJobList', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + useCookie('token').value
    },
    params: {
      serverId: mainLayoutStore.SelectServer.value
    },
    baseURL: useRuntimeConfig().public.baseUrl
  }).then(res => {
    console.log(res)
    const data=res as any[]
    data.forEach(d=>{
          options.value.push({label:d.groupName,value:d.groupName, children:d.items.map(r=>{return {label:r.dataName,value:r.dataType}})})
      console.log(options.value)
    })
  })
})
</script>

<template>
  <div class="setting-card-layout">
    <n-steps v-model:current="current" class="setting-card-header">
      <n-step
          title="选择图表"
      />
      <n-step
          title="选择数据"
      />
      <n-step
          title="设置卡片"
      />
      <n-step
          title="预览"
      />
    </n-steps>
    <div class="setting-card-content">
      <n-scrollbar>
        <div v-if="current===1" class="step1-box">
          <div v-for="(chart,index) in charts" :class="{'chart-box':true,'chart-box-active':selectChart===index}" @click="selectChart=index" :key="index">
            <n-image
                width="100"
                :src="chart.image"
            />
            <p>{{chart.description}}</p>
          </div>
        </div>
        <div v-if="current===2" class="step2-box">
          <n-cascader
              v-model:value="value"
              placeholder="没啥用的值"
              expand-trigger="click"
              :options="options"

              check-strategy="child"
          />
        </div>
        <!--    空布局-->
        <n-empty description="你什么也找不到" v-if="current&&current>= 5||current&&current<=0">
        </n-empty>
      </n-scrollbar>
    </div>
    <div class="setting-card-folder">
        <n-button @click="prev" quaternary type="info" v-if="current!==1">
          <template #icon>
            <n-icon>
              <ArrowLeft />
            </n-icon>
          </template>
          上一步
        </n-button>
        <n-button @click="next" type="info">
          <template #icon>
            <n-icon>
              <ArrowRight />
            </n-icon>
          </template>
          下一步
        </n-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "base";

.setting-card-layout {
  width: 100%;
  display: grid;
  padding: $padding*2;
  grid-template-rows: auto auto 1fr auto;
  gap: $gap*5;
  background: $light-bg-color;
  border-radius: $radius*2;
  *{
    @include SC_Font()
  }
  .dark-mode & {
    background: $dark-bg-color;
  }
}
.setting-card-header{

}
.setting-card-content {
  min-height: 400px;
  max-height: 800px;
}
.step1-box{
  display: grid;
  gap: $gap*2;
  grid-template-columns: repeat(3,1fr);
  place-content: center;
  place-items: center;
  .chart-box{
    display: flex;
    flex-direction: column;
    gap: $gap;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: rgba(238, 238, 238, 0.1);
    border: $border;
    height: 140px;
    border-radius: $radius*2;
    width: 140px;
  }

  .chart-box-active{
    border-color: $primary-color;
    background: rgba(238, 238, 238, 1);
  }
}
.setting-card-folder{
 display: flex;
  gap: $gap*2;
  button{
    flex: 1;
  }

}
:deep(.n-cascader-menu .n-cascader-submenu.n-cascader-submenu--virtual){
  width: auto;
}
</style>