<script setup>
import ViewIndex from './index.vue'
 const filedHeaders=[
  {key:"field",title:"属性"},
  {key:"desc",title:"说明"},
  {key:"type",title:"类型"},
  {key:"defaultValue",title:"默认值"},
]
	
const filedData0 = [
  {
		field: 'title',
		type: 'String',
		required: '否',
    defaultValue: "无",
		desc: "卡片标题",
	},
  {
		field: 'height',
		type: 'String',
		required: '否',
    defaultValue: "110",
		desc: "卡片高度，不传默认110px，传参只需要传数字，px会自动补全",
	},
  {
		field: 'span',
		type: 'Number',
		required: '否',
    defaultValue: "无",
		desc: "珊格布局的占比，不传默认12",
	},
  {
		field: 'nobg',
		type: 'Boolean',
		required: '否',
    defaultValue: "false",
		desc: "是否不展示背景色，默认展示灰色，传true展示父级颜色",
	},
	{
		field: 'data',
		type: 'Array',
		required: '是',
    defaultValue: "无",
		desc: "卡片展示的数据，eg: [{total:{},list:[]}]",
	},
  {
		field: 'data-total',
		type: 'Object',
		required: '是',
    defaultValue: "无",
		desc: "卡片展示的左侧数据，eg: {total:{title:'标题',num:'数量',img:'左侧图片，不传就不展示',unit:'单位，不传不展示',numSize:'数字大小',imgSize:'图片大小'}",
	},
  {
		field: 'data-total-title',
		type: 'String',
		required: '是',
    defaultValue: "无",
		desc: "title标题",
	},
  {
		field: 'data-total-num',
		type: 'String',
		required: '是',
    defaultValue: "无",
		desc: "数量",
	},
  {
		field: 'data-total-numSize',
		type: 'String',
		required: '是',
    defaultValue: "无",
		desc: "数字大小",
	},
  {
		field: 'data-total-img',
		type: 'String',
		required: '是',
    defaultValue: "无",
		desc: "左侧图片路径，不传就不展示",
	},
  {
		field: 'data-total-imgSize',
		type: 'String',
		required: '是',
    defaultValue: "无",
		desc: "图片大小",
	},
  {
		field: 'data-total-unit',
		type: 'String',
		required: '是',
    defaultValue: "无",
		desc: "数字单位，不传不展示",
	},
  {
		field: 'data-list',
		type: 'Array',
		required: '是',
    defaultValue: "无",
		desc: "卡片展示的右侧数据，eg: [{title:'标题',num:'数量',unit:'单位，不传不展示',color:'左上角的小圆点颜色，不传不展示'}]",
	},
 
]

const filedData1 = [
	{
		field: 'data',
		type: 'Object',
		required: '是',
    defaultValue: "无",
		desc: "卡片展示的数据，eg: {total:{},list:[]}",
	},
  {
		field: 'data-total',
		type: 'Object',
		required: '是',
    defaultValue: "无",
		desc: "卡片展示的左侧数据，eg: {total:{title:'标题',num:'数量',img:'左侧图片，不传就不展示',unit:'单位，不传不展示'}",
	},
  {
		field: 'data-list',
		type: 'Array',
		required: '是',
    defaultValue: "无",
		desc: "卡片展示的右侧数据，eg: [{title:'标题',num:'数量',unit:'单位，不传不展示',color:'左上角的小圆点颜色，不传不展示'}]",
	},
]

const filedData2 = [
  {
		field: 'info',
		type: 'Object',
		required: '是',
    defaultValue: "无",
		desc: "卡片展示的左侧数据，eg: {title:'标题',num:'数量',img:'左侧图片，不传就不展示',unit:'单位，不传不展示',color:'左上角的小圆点颜色，不传不展示'}}",
	},
]
</script>

# 概览卡片
珊格布局的概览卡片，单条详情数据卡片，及上下结构数据

## 代码示例
<ClientOnly>
  <ViewIndex/>
</ClientOnly>

## 功能介绍
<ClientOnly>
 <p>珊格布局的概览卡片 </p>
 <Table :data="filedData0" resizable checkType="none" type="grid">
 <TableColumn v-for="(header, index) in filedHeaders" :key="header.key"  :title="header.title" />
 </Table>

 <p>单条详情卡片 </p>
 <Table :data="filedData1" resizable checkType="none" type="grid">
 <TableColumn v-for="(header, index) in filedHeaders" :key="header.key"  :title="header.title" />
 </Table>

 <p>单条数据卡片 </p>
 <Table :data="filedData2" resizable checkType="none" type="grid">
 <TableColumn v-for="(header, index) in filedHeaders" :key="header.key"  :title="header.title" />
 </Table>
</ClientOnly>



## 完整代码如下：

<div class="options-api" style="font-size:14px;">

```vue
<template>
  <div class='app-card-demo'>
    <p>带珊格布局的概览卡片</p>
    <KsViewCard :data="data" title="云资源概览" span="12" height="110" />
    <p>带珊格布局的概览卡片-只有左侧内容且不带背景颜色</p>
    <KsViewCard :data="data1" title="云资源概览" span="6" height="110" nobg/>
    <!-- 详情卡片 -->
    <p>详情卡片</p>
    <KsDetailCard :data="onecard" class="app-card-box"/>

    <p>单条数据卡片</p>
    <p>带图片</p>
    <KsOneCard :info="info0" class="app-card-onebox"/>
    <span>控制图片和num大小</span>
    <KsOneCard :info="info1" class="app-card-onebox"/>
    <p>不带图片</p>
    <KsOneCard :info="info2"/>
  </div>
</template>
<script setup>
import { KsViewCard,KsDetailCard,KsOneCard } from '@ksconsole/components';
import { Input,Button,Icon,Message } from "@king-design/vue";
import serve from '../assets/serve.png';
import balance from '../assets/balance.png';
import tb from '../assets/tb.png';
import cpu from '../assets/cpu.png';
const data = [
  {
    total: {
      title: '云服务器',
      num: 30,
      unit: '台',
      img: cpu,
      // numSize: 18
      // imgSize: 56
    },
    list: [
      {
        title: '云服务器',
        num: 3,
        unit: '台',
        color: 'red',
      },
      {
        title: '云数据库',
        num: 10,
        unit: '台',
        color: 'green',
      },
      {
        title: '云存储',
        num: 7,
        unit: '台',
      },
      // {
      //   title: '云负载均衡',
      //   num: 10,
      //   unit: '台'
      // },
    ],
  },
  {
    total: {
      title: '块存储',
      num: 23,
      unit: '个',
      img: serve,
    },
    list: [
      {
        title: '云服务器',
        num: 4,
        unit: '台',
      },
      {
        title: '云数据库',
        num: 9,
        unit: '台',
      },
      {
        title: '云存储',
        num: 6,
        unit: '台',
      },
    ],
  },
  {
    total: {
      title: '对象存储',
      num: 30,
      unit: '个',
      img: tb,
    },
    list: [
      {
        title: '云服务器',
        num: 3,
        unit: '台',
      },
      {
        title: '云数据库',
        num: 10,
        unit: '台',
      },
      {
        title: '云存储',
        num: 7,
        unit: '台',
      },
      {
        title: '云负载均衡',
        num: 10,
        unit: '台',
      },
    ],
  },
  {
    total: {
      title: '负载均衡',
      num: 23,
      unit: '个',
      img: balance,
    },
    list: [
      {
        title: '云服务器',
        num: 4,
        unit: '台',
      },
      {
        title: '云数据库',
        num: 9,
        unit: '台',
      },
      {
        title: '云存储',
        num: 6,
        unit: '台',
      },
      {
        title: '云负载均衡',
        num: 4,
        unit: '台',
      },
    ],
  },
];
const data1 = [
  {
    total: {
      title: '云服务器',
      num: 30,
      unit: '台',
      img: cpu,
      // numSize: 18
      // imgSize: 56
    },
  },
  {
    total: {
      title: '块存储',
      num: 23,
      unit: '个',
      img: serve,
    },
   
  },
  {
    total: {
      title: '对象存储',
      num: 30,
      unit: '个',
      img: tb,
    },
   
  },
  {
    total: {
      title: '负载均衡',
      num: 23,
      unit: '个',
      img: balance,
    },
    
  },
];
const onecard = data[0]
const info0 = {
  title: '云服务器1',
  num: 30,
  unit: '台',
  img: cpu,
}

const info1 = {
  title: '云服务器1',
  num: 30,
  unit: '台',
  img: cpu,
  imgSize: 36,
  numSize: 18
}
const info2 = {
  color:'red',
  title: '云服务器2',
  num: 30,
  unit: '台',
}
</script>

<style scoped>
.app-card-demo {
  padding: 24px;
}
.app-card-box {
  margin: 24px;
  background: #f8f9fa;
}
.app-card-onebox {
  width: 200px;
  margin: 24px;
}

.app-card-onebox2 {
  width: 100px;
  margin: 24px;
  padding: 16px;
  background: #f8f9fa;
}

</style>

```
</div>
