mirror of
https://gitee.com/dromara/go-view.git
synced 2026-04-23 00:00:12 +08:00
feat: 新增chart组件数据内容
This commit is contained in:
MTrun
@@ -1,3 +0,0 @@
|
||||
import ChartCommon from './index.vue'
|
||||
|
||||
export { ChartCommon }
|
||||
@@ -1,54 +0,0 @@
|
||||
<template>
|
||||
<div class="go-chart-common">
|
||||
<n-menu
|
||||
class="common-menu-width"
|
||||
v-model:value="selectValue"
|
||||
:options="menuOptions"
|
||||
:icon-size="16"
|
||||
:indent="18"
|
||||
/>
|
||||
<div>
|
||||
右侧的小组将列表
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { renderLang } from '@/utils'
|
||||
|
||||
const menuOptions = reactive([
|
||||
{
|
||||
key: 'ChartCommon',
|
||||
label: renderLang('图表')
|
||||
},
|
||||
{
|
||||
key: 'TextCommon',
|
||||
label: renderLang('信息')
|
||||
},
|
||||
{
|
||||
key: 'TableCommon',
|
||||
label: renderLang('表格')
|
||||
},
|
||||
{
|
||||
key: 'DecorateCommon',
|
||||
label: renderLang('装饰')
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
|
||||
const selectValue = ref<string>(menuOptions[0]['key'])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 列表的宽度 */
|
||||
$topHeight: 36px;
|
||||
@include go('chart-common') {
|
||||
display: flex;
|
||||
height: calc(100vh - #{$--header-height} - #{$topHeight});
|
||||
.common-menu-width {
|
||||
@include filter-bg-color('background-color2-shallow');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
import Charts from './index.vue'
|
||||
|
||||
export { Charts }
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="go-chart-common">
|
||||
<n-menu
|
||||
class="chart-menu-width"
|
||||
v-model:value="selectValue"
|
||||
:options="menuOptions"
|
||||
:icon-size="16"
|
||||
:indent="18"
|
||||
/>
|
||||
<div class="chart-content-list">
|
||||
<div class="item-box" v-for="(item, index) in menuOptions" :key="index">
|
||||
<div class="list-header">
|
||||
<AppleControlBtn :mini="true" :disabled="true"></AppleControlBtn>
|
||||
<n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
|
||||
</div>
|
||||
<div class="list-center go-flex-center">
|
||||
<img class="list-img" :src="item.image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watchEffect } from 'vue'
|
||||
import { AppleControlBtn } from '@/components/AppleControlBtn/index'
|
||||
|
||||
const props = defineProps({
|
||||
packagesList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
let menuOptions: any[] = reactive([])
|
||||
|
||||
watchEffect(() => {
|
||||
console.log(props.packagesList)
|
||||
menuOptions = props.packagesList
|
||||
})
|
||||
|
||||
const selectValue = ref<string>(menuOptions[0]['key'])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 此高度与 ContentBox 组件关联*/
|
||||
$topHeight: 60px;
|
||||
/* 列表项宽度 */
|
||||
$itemWidth: 86%;
|
||||
/* 图片高度 */
|
||||
$imgWidth: 90%;
|
||||
@include go('chart-common') {
|
||||
display: flex;
|
||||
height: calc(100vh - #{$--header-height} - #{$topHeight});
|
||||
.chart-menu-width {
|
||||
flex-shrink: 0;
|
||||
@include filter-bg-color('background-color2-shallow');
|
||||
}
|
||||
.chart-content-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
.item-box {
|
||||
margin: 0 7%;
|
||||
margin-top: 5px;
|
||||
width: $itemWidth;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
@include filter-bg-color('background-color2');
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
@include filter-bg-color('background-color4');
|
||||
&-text {
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.list-center {
|
||||
padding: 10px 0;
|
||||
.list-img {
|
||||
width: $imgWidth;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include deep() {
|
||||
.n-menu-item {
|
||||
height: 30px;
|
||||
&.n-menu-item--selected {
|
||||
&::before {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
.n-menu-item-content {
|
||||
text-align: center;
|
||||
padding: 0px 14px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,3 +0,0 @@
|
||||
import DecorateCommon from './index.vue'
|
||||
|
||||
export { DecorateCommon }
|
||||
@@ -0,0 +1,3 @@
|
||||
import Decorates from './index.vue'
|
||||
|
||||
export { Decorates }
|
||||
@@ -1,3 +0,0 @@
|
||||
import TableCommon from './index.vue'
|
||||
|
||||
export { TableCommon }
|
||||
@@ -0,0 +1,3 @@
|
||||
import Tables from './index.vue'
|
||||
|
||||
export { Tables }
|
||||
@@ -1,3 +0,0 @@
|
||||
import TextCommon from './index.vue'
|
||||
|
||||
export { TextCommon }
|
||||
@@ -0,0 +1,3 @@
|
||||
import Texts from './index.vue'
|
||||
|
||||
export { Texts }
|
||||
@@ -0,0 +1,97 @@
|
||||
import { reactive, ref } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { Charts } from '../components/Charts'
|
||||
import { Tables } from '../components/Tables'
|
||||
import { Texts } from '../components/Texts'
|
||||
import { Decorates } from '../components/Decorates'
|
||||
import { renderLang, renderIcon } from '@/utils'
|
||||
import { themeColor, setItem, getCharts } from './layoutHook'
|
||||
// 图表
|
||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore'
|
||||
// 图标
|
||||
const { BarChartIcon } = icon.ionicons5
|
||||
const {
|
||||
TableSplitIcon,
|
||||
RoadmapIcon,
|
||||
SpellCheckIcon,
|
||||
GraphicalDataFlowIcon
|
||||
} = icon.carbon
|
||||
|
||||
// 图表
|
||||
const { packagesList } = usePackagesStore()
|
||||
const menuOptions: any[] = reactive([])
|
||||
|
||||
const infoObj = new Map([
|
||||
[
|
||||
'Charts',
|
||||
{
|
||||
icon: renderIcon(RoadmapIcon),
|
||||
label: renderLang('图表'),
|
||||
node: Charts
|
||||
}
|
||||
],
|
||||
[
|
||||
'Tables',
|
||||
{
|
||||
icon: renderIcon(TableSplitIcon),
|
||||
label: renderLang('表格'),
|
||||
node: Tables
|
||||
}
|
||||
],
|
||||
[
|
||||
'Texts',
|
||||
{
|
||||
icon: renderIcon(SpellCheckIcon),
|
||||
label: renderLang('信息'),
|
||||
node: Tables
|
||||
}
|
||||
],
|
||||
[
|
||||
'Decorates',
|
||||
{
|
||||
icon: renderIcon(GraphicalDataFlowIcon),
|
||||
label: renderLang('表格'),
|
||||
node: Decorates
|
||||
}
|
||||
],
|
||||
])
|
||||
|
||||
Object.getOwnPropertyNames(packagesList).forEach(function (key) {
|
||||
menuOptions.push({
|
||||
key: key,
|
||||
icon: infoObj.get(key)?.icon,
|
||||
label: infoObj.get(key)?.label,
|
||||
node: infoObj.get(key)?.node,
|
||||
// @ts-ignore string 赋值给 any 的问题
|
||||
packagesList: packagesList[key]
|
||||
})
|
||||
})
|
||||
|
||||
// 记录选中值
|
||||
let beforeSelect: string = menuOptions[0]['key']
|
||||
const selectValue = ref<string>(menuOptions[0]['key'])
|
||||
// 选中的对象值
|
||||
const selecOptions = ref(menuOptions[0])
|
||||
|
||||
// 点击 item
|
||||
const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
|
||||
// 处理渲染的 node
|
||||
selecOptions.value = item
|
||||
// 处理折叠
|
||||
if (beforeSelect === key) {
|
||||
setItem('charts', !getCharts.value)
|
||||
} else {
|
||||
setItem('charts', true)
|
||||
}
|
||||
beforeSelect = key
|
||||
}
|
||||
|
||||
export {
|
||||
getCharts,
|
||||
BarChartIcon,
|
||||
themeColor,
|
||||
selecOptions,
|
||||
selectValue,
|
||||
clickItemHandle,
|
||||
menuOptions
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { ref, toRefs } from 'vue'
|
||||
|
||||
// 布局
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||
// 样式
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const themeColor = ref(designStore.getAppTheme)
|
||||
|
||||
// 结构控制
|
||||
const { setItem } = useChartLayoutStore()
|
||||
const { getCharts } = toRefs(useChartLayoutStore())
|
||||
|
||||
export {
|
||||
themeColor,
|
||||
setItem,
|
||||
getCharts
|
||||
}
|
||||
@@ -25,7 +25,7 @@
|
||||
<div class="menu-component-box">
|
||||
<transition name="component-fade" mode="out-in">
|
||||
<keep-alive>
|
||||
<component :is="selectNode"></component>
|
||||
<component :is="selecOptions.node" :packagesList="selecOptions.packagesList" :key="selectValue"></component>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</div>
|
||||
@@ -36,86 +36,21 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, toRefs } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { renderLang, renderIcon } from '@/utils'
|
||||
import { ContentBox } from '../ContentBox/index'
|
||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||
|
||||
import { ChartCommon } from './components/ChartCommon'
|
||||
import { TableCommon } from './components/TableCommon'
|
||||
import { TextCommon } from './components/TextCommon'
|
||||
import { DecorateCommon } from './components/DecorateCommon'
|
||||
|
||||
// 图标
|
||||
const { BarChartIcon } = icon.ionicons5
|
||||
const {
|
||||
TableSplitIcon,
|
||||
RoadmapIcon,
|
||||
SpellCheckIcon,
|
||||
GraphicalDataFlowIcon
|
||||
} = icon.carbon
|
||||
|
||||
// 全局颜色
|
||||
const designStore = useDesignStore()
|
||||
const themeColor = ref(designStore.getAppTheme)
|
||||
|
||||
// 结构控制
|
||||
const { setItem } = useChartLayoutStore()
|
||||
const { getCharts } = toRefs(useChartLayoutStore())
|
||||
|
||||
// 菜单
|
||||
const collapsed = ref(false)
|
||||
const menuOptions = reactive([
|
||||
{
|
||||
key: 'ChartCommon',
|
||||
icon: renderIcon(RoadmapIcon),
|
||||
label: renderLang('图表'),
|
||||
node: ChartCommon
|
||||
},
|
||||
{
|
||||
key: 'TextCommon',
|
||||
icon: renderIcon(SpellCheckIcon),
|
||||
label: renderLang('信息'),
|
||||
node: TableCommon
|
||||
},
|
||||
{
|
||||
key: 'TableCommon',
|
||||
icon: renderIcon(TableSplitIcon),
|
||||
label: renderLang('表格'),
|
||||
node: TextCommon
|
||||
},
|
||||
{
|
||||
key: 'DecorateCommon',
|
||||
icon: renderIcon(GraphicalDataFlowIcon),
|
||||
label: renderLang('装饰'),
|
||||
node: DecorateCommon
|
||||
}
|
||||
])
|
||||
|
||||
// 记录选中值
|
||||
let beforeSelect: string = menuOptions[0]['key']
|
||||
const selectValue = ref<string>(menuOptions[0]['key'])
|
||||
// 渲染的组件控制
|
||||
const selectNode = ref(menuOptions[0]['node'])
|
||||
|
||||
// 点击 item
|
||||
const clickItemHandle = <T extends { node: any }>(key: string, item: T) => {
|
||||
// 处理渲染的 node
|
||||
selectNode.value = item.node
|
||||
// 处理折叠
|
||||
if (beforeSelect === key) {
|
||||
setItem('charts', !getCharts.value)
|
||||
} else {
|
||||
setItem('charts', true)
|
||||
}
|
||||
beforeSelect = key
|
||||
}
|
||||
import {
|
||||
getCharts,
|
||||
BarChartIcon,
|
||||
themeColor,
|
||||
selecOptions,
|
||||
selectValue,
|
||||
clickItemHandle,
|
||||
menuOptions
|
||||
} from './hooks/asideHook'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 整体宽度 */
|
||||
$width: 300px;
|
||||
$width: 330px;
|
||||
/* 列表的宽度 */
|
||||
$widthScoped: 65px;
|
||||
/* 此高度与 ContentBox 组件关联*/
|
||||
@@ -162,7 +97,7 @@ $topHeight: 36px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 12px !important;
|
||||
font-size: 12px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.n-menu-item-content__icon {
|
||||
font-size: 18px !important;
|
||||
|
||||
Reference in New Issue
Block a user