feat: 新增chart组件数据内容
This commit is contained in:
MTrun
parent
95e2cdc689
commit
b03a495712
85
index.css
Normal file
85
index.css
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.first-loading-wrp {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #17171a;
|
||||||
|
}
|
||||||
|
.first-loading-wrp > h1 {
|
||||||
|
font-size: 128px;
|
||||||
|
}
|
||||||
|
.first-loading-wrp .loading-wrp {
|
||||||
|
padding: 98px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.dot {
|
||||||
|
animation: antRotate 1.2s infinite linear;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 32px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.dot i {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
background-color: #1890ff;
|
||||||
|
border-radius: 100%;
|
||||||
|
transform: scale(0.75);
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
opacity: 0.3;
|
||||||
|
animation: antSpinMove 1s infinite linear alternate;
|
||||||
|
}
|
||||||
|
.dot i:nth-child(1) {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.dot i:nth-child(2) {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
-webkit-animation-delay: 0.4s;
|
||||||
|
animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
.dot i:nth-child(3) {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
-webkit-animation-delay: 0.8s;
|
||||||
|
animation-delay: 0.8s;
|
||||||
|
}
|
||||||
|
.dot i:nth-child(4) {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
-webkit-animation-delay: 1.2s;
|
||||||
|
animation-delay: 1.2s;
|
||||||
|
}
|
||||||
|
@keyframes antRotate {
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(405deg);
|
||||||
|
transform: rotate(405deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes antRotate {
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(405deg);
|
||||||
|
transform: rotate(405deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes antSpinMove {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes antSpinMove {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
index.html
45
index.html
@ -1,26 +1,27 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh-cmn-Hans">
|
<html lang="zh-cmn-Hans">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
<meta name="renderer" content="webkit"/>
|
<meta name="renderer" content="webkit" />
|
||||||
<meta
|
<meta
|
||||||
name="viewport"
|
name="viewport"
|
||||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
||||||
/>
|
/>
|
||||||
<link rel="icon" href="./favicon.ico"/>
|
<link rel="icon" href="./favicon.ico" />
|
||||||
<title>GoView</title>
|
<title>GoView</title>
|
||||||
<style>*{margin: 0;}.first-loading-wrp{display:flex;justify-content:center;align-items:center;height:100vh;background-color: #17171a;}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
|
<link rel="stylesheet" href="./index.css">
|
||||||
</head>
|
|
||||||
<body>
|
</head>
|
||||||
<div id="appProvider" style="display: none"></div>
|
<body>
|
||||||
<div id="app">
|
<div id="appProvider" style="display: none;"></div>
|
||||||
<div class="first-loading-wrp">
|
<div id="app">
|
||||||
<div class="loading-wrp">
|
<div class="first-loading-wrp">
|
||||||
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
<div class="loading-wrp">
|
||||||
|
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</div>
|
</body>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<template v-for="item in filterBtnList" :key="item.key">
|
<template v-for="item in filterBtnList" :key="item.key">
|
||||||
<div
|
<div
|
||||||
class="btn"
|
class="btn"
|
||||||
:class="[item.key, disabled && 'disabled']"
|
:class="[item.key, disabled && 'disabled', mini && 'mini']"
|
||||||
@click.stop="handleClick(item.key)"
|
@click.stop="handleClick(item.key)"
|
||||||
>
|
>
|
||||||
<n-icon size="10" class="icon-base" :class="{ hover: !disabled }">
|
<n-icon size="10" class="icon-base" :class="{ hover: !disabled }">
|
||||||
@ -21,6 +21,12 @@ import { screenfullFn } from '@/utils'
|
|||||||
const emit = defineEmits(['close', 'remove', 'resize', 'fullResize'])
|
const emit = defineEmits(['close', 'remove', 'resize', 'fullResize'])
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
// mini 版本
|
||||||
|
mini: {
|
||||||
|
request: false,
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
// 禁用所有按钮
|
// 禁用所有按钮
|
||||||
disabled: {
|
disabled: {
|
||||||
request: false,
|
request: false,
|
||||||
@ -55,26 +61,26 @@ const isFull = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const btnList: {
|
const btnList: {
|
||||||
title: string,
|
title: string
|
||||||
key: "close" | "remove" | "resize" | "fullResize",
|
key: 'close' | 'remove' | 'resize' | 'fullResize'
|
||||||
icon: any
|
icon: any
|
||||||
}[] = [
|
}[] = [
|
||||||
{
|
{
|
||||||
title: '关闭',
|
title: '关闭',
|
||||||
key: 'close',
|
key: 'close',
|
||||||
icon: CloseIcon
|
icon: CloseIcon
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '缩小',
|
title: '缩小',
|
||||||
key: 'remove',
|
key: 'remove',
|
||||||
icon: RemoveIcon
|
icon: RemoveIcon
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: isFull ? '缩小' : '放大',
|
title: isFull ? '缩小' : '放大',
|
||||||
key: props.narrow ? 'fullResize' : 'resize',
|
key: props.narrow ? 'fullResize' : 'resize',
|
||||||
icon: ResizeIcon
|
icon: ResizeIcon
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
|
const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
|
||||||
if (key === 'fullResize') screenfullFn()
|
if (key === 'fullResize') screenfullFn()
|
||||||
@ -85,7 +91,7 @@ const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@include go("apple-control-btn") {
|
@include go('apple-control-btn') {
|
||||||
display: flex;
|
display: flex;
|
||||||
&:hover {
|
&:hover {
|
||||||
.btn {
|
.btn {
|
||||||
@ -105,6 +111,11 @@ const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
|
|||||||
color: $--color-text;
|
color: $--color-text;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
&.mini {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
&.disabled {
|
&.disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|||||||
11
src/packages/components/Chart/bar/barCommon/index.ts
Normal file
11
src/packages/components/Chart/bar/barCommon/index.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import barCommon from './index.vue'
|
||||||
|
import barImg from '@/assets/images/chart/bar_y.png'
|
||||||
|
import { ConfigType } from '@/packages/index.d'
|
||||||
|
|
||||||
|
// 柱状图
|
||||||
|
export const barCommonConfig: ConfigType = {
|
||||||
|
key: 'Bar',
|
||||||
|
title: '基础',
|
||||||
|
node: barCommon,
|
||||||
|
image: barImg
|
||||||
|
}
|
||||||
13
src/packages/components/Chart/bar/barCommon/index.vue
Normal file
13
src/packages/components/Chart/bar/barCommon/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
柱状图组件渲染
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
3
src/packages/components/Chart/index.ts
Normal file
3
src/packages/components/Chart/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { barCommonConfig } from './bar/barCommon/index'
|
||||||
|
|
||||||
|
export const BarList = [barCommonConfig]
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import BorderCommon from './index.vue'
|
||||||
|
import barImg from '@/assets/images/chart/bar_y.png'
|
||||||
|
import { ConfigType } from '@/packages/index.d'
|
||||||
|
|
||||||
|
// 柱状图
|
||||||
|
export const barCommonConfig: ConfigType = {
|
||||||
|
key: 'Border',
|
||||||
|
title: '柱状图',
|
||||||
|
node: BorderCommon,
|
||||||
|
coverGraph: barImg
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
柱状图组件渲染
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
3
src/packages/components/Decorate/index.ts
Normal file
3
src/packages/components/Decorate/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { barCommonConfig } from './border/borderCommon/index'
|
||||||
|
|
||||||
|
export const BarList = [barCommonConfig]
|
||||||
14
src/packages/index.d.ts
vendored
Normal file
14
src/packages/index.d.ts
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { Component } from '@/router/types'
|
||||||
|
|
||||||
|
// import { ConfigType } from '@/packages/index.d'
|
||||||
|
export type ConfigType = {
|
||||||
|
key: string
|
||||||
|
title: string
|
||||||
|
node: Component
|
||||||
|
image: string
|
||||||
|
[T: string]: unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
export type PackagesType = {
|
||||||
|
Charts: ConfigType[]
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import { PackagesType } from '@/packages/index.d'
|
||||||
|
import { BarList } from '@/packages/components/Chart/index'
|
||||||
|
|
||||||
|
// 所有图表
|
||||||
|
let packagesList: PackagesType = {
|
||||||
|
Charts: BarList
|
||||||
|
}
|
||||||
|
|
||||||
|
export { packagesList }
|
||||||
7
src/store/modules/packagesStore/packagesStore.d.ts
vendored
Normal file
7
src/store/modules/packagesStore/packagesStore.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { PackagesType, ConfigType } from '@/packages/index.d'
|
||||||
|
|
||||||
|
export { ConfigType }
|
||||||
|
|
||||||
|
export interface PackagesStoreType {
|
||||||
|
packagesList: PackagesType
|
||||||
|
}
|
||||||
18
src/store/modules/packagesStore/packagesStore.ts
Normal file
18
src/store/modules/packagesStore/packagesStore.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { PackagesStoreType, ConfigType } from './packagesStore.d'
|
||||||
|
import { packagesList } from '@/packages/index'
|
||||||
|
|
||||||
|
export const usePackagesStore = defineStore({
|
||||||
|
id: 'usePackagesStore',
|
||||||
|
state: (): PackagesStoreType => ({
|
||||||
|
packagesList
|
||||||
|
}),
|
||||||
|
getters: {
|
||||||
|
getPackagesList(): ConfigType | {} {
|
||||||
|
if (this.packagesList && this.packagesList.charts) {
|
||||||
|
return this.packagesList.charts
|
||||||
|
}
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@ -21,7 +21,7 @@ $--color-light-bg-2: #f2f3f5;
|
|||||||
$--color-light-bg-2-shallow: lighten($--color-light-bg-2, $--light-shalow);
|
$--color-light-bg-2-shallow: lighten($--color-light-bg-2, $--light-shalow);
|
||||||
$--color-light-bg-3: #e5e6eb;
|
$--color-light-bg-3: #e5e6eb;
|
||||||
$--color-light-bg-3-shallow: lighten($--color-light-bg-3, $--light-shalow);
|
$--color-light-bg-3-shallow: lighten($--color-light-bg-3, $--light-shalow);
|
||||||
$--color-light-bg-4: #c9cdd4;
|
$--color-light-bg-4: #e3e3e4;
|
||||||
$--color-light-bg-4-shallow: lighten($--color-light-bg-4, $--light-shalow);
|
$--color-light-bg-4-shallow: lighten($--color-light-bg-4, $--light-shalow);
|
||||||
$--color-light-bg-5: #bebebe;
|
$--color-light-bg-5: #bebebe;
|
||||||
$--color-light-bg-5-shallow: lighten($--color-light-bg-5, $--light-shalow);
|
$--color-light-bg-5-shallow: lighten($--color-light-bg-5, $--light-shalow);
|
||||||
|
|||||||
@ -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 }
|
||||||
97
src/views/chart/components/ContentCharts/hooks/asideHook.ts
Normal file
97
src/views/chart/components/ContentCharts/hooks/asideHook.ts
Normal file
@ -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
|
||||||
|
}
|
||||||
20
src/views/chart/components/ContentCharts/hooks/layoutHook.ts
Normal file
20
src/views/chart/components/ContentCharts/hooks/layoutHook.ts
Normal file
@ -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">
|
<div class="menu-component-box">
|
||||||
<transition name="component-fade" mode="out-in">
|
<transition name="component-fade" mode="out-in">
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<component :is="selectNode"></component>
|
<component :is="selecOptions.node" :packagesList="selecOptions.packagesList" :key="selectValue"></component>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
@ -36,86 +36,21 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, toRefs } from 'vue'
|
import { reactive, ref, toRefs } from 'vue'
|
||||||
import { icon } from '@/plugins'
|
|
||||||
import { renderLang, renderIcon } from '@/utils'
|
|
||||||
import { ContentBox } from '../ContentBox/index'
|
import { ContentBox } from '../ContentBox/index'
|
||||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
import {
|
||||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
getCharts,
|
||||||
|
BarChartIcon,
|
||||||
import { ChartCommon } from './components/ChartCommon'
|
themeColor,
|
||||||
import { TableCommon } from './components/TableCommon'
|
selecOptions,
|
||||||
import { TextCommon } from './components/TextCommon'
|
selectValue,
|
||||||
import { DecorateCommon } from './components/DecorateCommon'
|
clickItemHandle,
|
||||||
|
menuOptions
|
||||||
// 图标
|
} from './hooks/asideHook'
|
||||||
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
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 整体宽度 */
|
/* 整体宽度 */
|
||||||
$width: 300px;
|
$width: 330px;
|
||||||
/* 列表的宽度 */
|
/* 列表的宽度 */
|
||||||
$widthScoped: 65px;
|
$widthScoped: 65px;
|
||||||
/* 此高度与 ContentBox 组件关联*/
|
/* 此高度与 ContentBox 组件关联*/
|
||||||
@ -162,7 +97,7 @@ $topHeight: 36px;
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 6px 12px !important;
|
padding: 6px 12px !important;
|
||||||
font-size: 12px !important;
|
font-size: 14px !important;
|
||||||
}
|
}
|
||||||
.n-menu-item-content__icon {
|
.n-menu-item-content__icon {
|
||||||
font-size: 18px !important;
|
font-size: 18px !important;
|
||||||
|
|||||||
0
types/config.d.ts
vendored
0
types/config.d.ts
vendored
1
types/global.d.ts
vendored
1
types/global.d.ts
vendored
@ -4,4 +4,5 @@ interface Window {
|
|||||||
$dialog: any
|
$dialog: any
|
||||||
$t: any
|
$t: any
|
||||||
}
|
}
|
||||||
|
|
||||||
declare type Recordable<T = any> = Record<string, T>
|
declare type Recordable<T = any> = Record<string, T>
|
||||||
Loading…
x
Reference in New Issue
Block a user