Skip to content

B
basic-vue-admin
提交 45a8eb97 作者: vben
操作

refactor(dashboard): change to setup syntax

上级 2dd3d854
正在显示 包含 469 行增加 和 574 行删除
package.json
...@@ -74,10 +74,10 @@ ...@@ -74,10 +74,10 @@
"@types/fs-extra": "^9.0.12", "@types/fs-extra": "^9.0.12",
"@types/inquirer": "^7.3.3", "@types/inquirer": "^7.3.3",
"@types/intro.js": "^3.0.2", "@types/intro.js": "^3.0.2",
"@types/jest": "^27.0.0", "@types/jest": "^27.0.1",
"@types/lodash-es": "^4.17.4", "@types/lodash-es": "^4.17.4",
"@types/mockjs": "^1.0.4", "@types/mockjs": "^1.0.4",
"@types/node": "^16.6.0", "@types/node": "^16.6.1",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.1", "@types/qrcode": "^1.4.1",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
"vite-plugin-theme": "^0.8.1", "vite-plugin-theme": "^0.8.1",
"vite-plugin-windicss": "^1.2.7", "vite-plugin-windicss": "^1.2.7",
"vue-eslint-parser": "^7.10.0", "vue-eslint-parser": "^7.10.0",
"vue-tsc": "^0.2.2" "vue-tsc": "^0.2.3"
}, },
"resolutions": { "resolutions": {
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it", "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
......
src/views/dashboard/analysis/components/GrowCard.vue
...@@ -26,18 +26,9 @@ ...@@ -26,18 +26,9 @@
</template> </template>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { CountTo } from '/@/components/CountTo/index'; import { CountTo } from '/@/components/CountTo/index';
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue'; import { Tag, Card } from 'ant-design-vue';
import { growCardList } from '../data'; import { growCardList } from '../data';
export default defineComponent({
components: { CountTo, Tag, Card, Icon },
setup() {
return { growCardList };
},
});
</script> </script>
src/views/dashboard/analysis/components/SalesProductPie.vue
...@@ -3,67 +3,61 @@ ...@@ -3,67 +3,61 @@
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, Ref, ref, watch } from 'vue'; import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts'; import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({ const props = defineProps({
components: { Card }, loading: Boolean,
props: { width: {
loading: Boolean, type: String as PropType<string>,
width: { default: '100%',
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
}, },
setup(props) { height: {
const chartRef = ref<HTMLDivElement | null>(null); type: String as PropType<string>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: '300px',
watch( },
() => props.loading, });
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
series: [ const chartRef = ref<HTMLDivElement | null>(null);
{ const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
name: '访问来源', watch(
type: 'pie', () => props.loading,
radius: '80%', () => {
center: ['50%', '50%'], if (props.loading) {
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'], return;
data: [ }
{ value: 500, name: '电子产品' }, setOptions({
{ value: 310, name: '服装' }, tooltip: {
{ value: 274, name: '化妆品' }, trigger: 'item',
{ value: 400, name: '家居' },
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 400;
},
},
],
});
}, },
{ immediate: true }
); series: [
return { chartRef }; {
name: '访问来源',
type: 'pie',
radius: '80%',
center: ['50%', '50%'],
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
data: [
{ value: 500, name: '电子产品' },
{ value: 310, name: '服装' },
{ value: 274, name: '化妆品' },
{ value: 400, name: '家居' },
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 400;
},
},
],
});
}, },
}); { immediate: true }
);
</script> </script>
src/views/dashboard/analysis/components/SiteAnalysis.vue
...@@ -13,34 +13,26 @@ ...@@ -13,34 +13,26 @@
</p> </p>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import VisitAnalysis from './VisitAnalysis.vue'; import VisitAnalysis from './VisitAnalysis.vue';
import VisitAnalysisBar from './VisitAnalysisBar.vue'; import VisitAnalysisBar from './VisitAnalysisBar.vue';
export default defineComponent({ const activeKey = ref('tab1');
components: { Card, VisitAnalysis, VisitAnalysisBar },
setup() {
const activeKey = ref('tab1');
const tabListTitle = [
{
key: 'tab1',
tab: '流量趋势',
},
{
key: 'tab2',
tab: '访问量',
},
];
function onTabChange(key) { const tabListTitle = [
activeKey.value = key; {
} key: 'tab1',
return { tabListTitle, activeKey, onTabChange }; tab: '流量趋势',
}, },
}); {
key: 'tab2',
tab: '访问量',
},
];
function onTabChange(key) {
activeKey.value = key;
}
</script> </script>
src/views/dashboard/analysis/components/VisitAnalysis.vue
<template> <template>
<div ref="chartRef" :style="{ height, width }"></div> <div ref="chartRef" :style="{ height, width }"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, onMounted, ref, Ref } from 'vue'; import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts'; import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props'; import { basicProps } from './props';
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => { defineProps({
setOptions({ ...basicProps,
tooltip: { });
trigger: 'axis', const chartRef = ref<HTMLDivElement | null>(null);
axisPointer: { const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
lineStyle: {
width: 1, onMounted(() => {
color: '#019680', setOptions({
}, tooltip: {
}, trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
}, },
xAxis: { },
type: 'category', },
boundaryGap: false, xAxis: {
data: [ type: 'category',
'6:00', boundaryGap: false,
'7:00', data: [
'8:00', '6:00',
'9:00', '7:00',
'10:00', '8:00',
'11:00', '9:00',
'12:00', '10:00',
'13:00', '11:00',
'14:00', '12:00',
'15:00', '13:00',
'16:00', '14:00',
'17:00', '15:00',
'18:00', '16:00',
'19:00', '17:00',
'20:00', '18:00',
'21:00', '19:00',
'22:00', '20:00',
'23:00', '21:00',
], '22:00',
splitLine: { '23:00',
show: true, ],
lineStyle: { splitLine: {
width: 1, show: true,
type: 'solid', lineStyle: {
color: 'rgba(226,226,226,0.5)', width: 1,
}, type: 'solid',
}, color: 'rgba(226,226,226,0.5)',
axisTick: {
show: false,
},
}, },
yAxis: [ },
{ axisTick: {
type: 'value', show: false,
max: 80000, },
splitNumber: 4, },
axisTick: { yAxis: [
show: false, {
}, type: 'value',
splitArea: { max: 80000,
show: true, splitNumber: 4,
areaStyle: { axisTick: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'], show: false,
}, },
}, splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
}, },
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,
data: [
111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222,
11111, 4000, 2000, 500, 333, 222, 111,
], ],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'line',
series: [ areaStyle: {},
{ itemStyle: {
smooth: true, color: '#5ab1ef',
data: [ },
111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, },
22222, 11111, 4000, 2000, 500, 333, 222, 111, {
], smooth: true,
type: 'line', data: [
areaStyle: {}, 33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390,
itemStyle: { 198, 60, 30, 22, 11,
color: '#5ab1ef',
},
},
{
smooth: true,
data: [
33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
390, 198, 60, 30, 22, 11,
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#019680',
},
},
], ],
}); type: 'line',
}); areaStyle: {},
return { chartRef }; itemStyle: {
}, color: '#019680',
},
},
],
});
}); });
</script> </script>
src/views/dashboard/analysis/components/VisitAnalysisBar.vue
<template> <template>
<div ref="chartRef" :style="{ height, width }"></div> <div ref="chartRef" :style="{ height, width }"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, onMounted, ref, Ref } from 'vue'; import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts'; import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props'; import { basicProps } from './props';
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => { defineProps({
setOptions({ ...basicProps,
tooltip: { });
trigger: 'axis',
axisPointer: { const chartRef = ref<HTMLDivElement | null>(null);
lineStyle: { const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
width: 1, onMounted(() => {
color: '#019680', setOptions({
}, tooltip: {
}, trigger: 'axis',
}, axisPointer: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, lineStyle: {
xAxis: { width: 1,
type: 'category', color: '#019680',
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
},
yAxis: {
type: 'value',
max: 8000,
splitNumber: 4,
}, },
series: [ },
{ },
data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800], grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
type: 'bar', xAxis: {
barMaxWidth: 80, type: 'category',
}, data: [
], '1月',
}); '2月',
}); '3月',
return { chartRef }; '4月',
}, '5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
},
yAxis: {
type: 'value',
max: 8000,
splitNumber: 4,
},
series: [
{
data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
type: 'bar',
barMaxWidth: 80,
},
],
});
}); });
</script> </script>
src/views/dashboard/analysis/components/VisitRadar.vue
...@@ -3,104 +3,98 @@ ...@@ -3,104 +3,98 @@
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, Ref, ref, watch } from 'vue'; import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts'; import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({ const props = defineProps({
components: { Card }, loading: Boolean,
props: { width: {
loading: Boolean, type: String as PropType<string>,
width: { default: '100%',
type: String as PropType<string>, },
default: '100%', height: {
}, type: String as PropType<string>,
height: { default: '300px',
type: String as PropType<string>,
default: '300px',
},
}, },
setup(props) { });
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); const chartRef = ref<HTMLDivElement | null>(null);
watch( const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
() => props.loading, watch(
() => { () => props.loading,
if (props.loading) { () => {
return; if (props.loading) {
} return;
setOptions({ }
legend: { setOptions({
bottom: 0, legend: {
data: ['访问', '购买'], bottom: 0,
data: ['访问', '购买'],
},
tooltip: {},
radar: {
radius: '60%',
splitNumber: 8,
indicator: [
{
text: '电脑',
max: 100,
}, },
tooltip: {}, {
radar: { text: '充电器',
radius: '60%', max: 100,
splitNumber: 8,
indicator: [
{
text: '电脑',
max: 100,
},
{
text: '充电器',
max: 100,
},
{
text: '耳机',
max: 100,
},
{
text: '手机',
max: 100,
},
{
text: 'Ipad',
max: 100,
},
{
text: '耳机',
max: 100,
},
],
}, },
series: [ {
text: '耳机',
max: 100,
},
{
text: '手机',
max: 100,
},
{
text: 'Ipad',
max: 100,
},
{
text: '耳机',
max: 100,
},
],
},
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
shadowBlur: 0,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
data: [
{ {
type: 'radar', value: [90, 50, 86, 40, 50, 20],
symbolSize: 0, name: '访问',
areaStyle: { itemStyle: {
shadowBlur: 0, color: '#b6a2de',
shadowColor: 'rgba(0,0,0,.2)', },
shadowOffsetX: 0, },
shadowOffsetY: 10, {
opacity: 1, value: [70, 75, 70, 76, 20, 85],
name: '购买',
itemStyle: {
color: '#5ab1ef',
}, },
data: [
{
value: [90, 50, 86, 40, 50, 20],
name: '访问',
itemStyle: {
color: '#b6a2de',
},
},
{
value: [70, 75, 70, 76, 20, 85],
name: '购买',
itemStyle: {
color: '#5ab1ef',
},
},
],
}, },
], ],
}); },
}, ],
{ immediate: true } });
);
return { chartRef };
}, },
}); { immediate: true }
);
</script> </script>
src/views/dashboard/analysis/components/VisitSource.vue
...@@ -3,86 +3,78 @@ ...@@ -3,86 +3,78 @@
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, Ref, ref, watch } from 'vue'; import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts'; import { useECharts } from '/@/hooks/web/useECharts';
const props = defineProps({
export default defineComponent({ loading: Boolean,
components: { Card }, width: {
props: { type: String as PropType<string>,
loading: Boolean, default: '100%',
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
}, },
setup(props) { height: {
const chartRef = ref<HTMLDivElement | null>(null); type: String as PropType<string>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: '300px',
watch( },
() => props.loading, });
() => { const chartRef = ref<HTMLDivElement | null>(null);
if (props.loading) { const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
return; watch(
} () => props.loading,
setOptions({ () => {
tooltip: { if (props.loading) {
trigger: 'item', return;
}
setOptions({
tooltip: {
trigger: 'item',
},
legend: {
bottom: '1%',
left: 'center',
},
series: [
{
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
}, },
legend: { label: {
bottom: '1%', show: false,
left: 'center', position: 'center',
}, },
series: [ emphasis: {
{ label: {
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'], show: true,
name: '访问来源', fontSize: '12',
type: 'pie', fontWeight: 'bold',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
}, },
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
], ],
}); animationType: 'scale',
}, animationEasing: 'exponentialInOut',
{ immediate: true } animationDelay: function () {
); return Math.random() * 100;
return { chartRef }; },
},
],
});
}, },
}); { immediate: true }
);
</script> </script>
src/views/dashboard/analysis/index.vue
...@@ -2,38 +2,24 @@ ...@@ -2,38 +2,24 @@
<div class="p-4"> <div class="p-4">
<GrowCard :loading="loading" class="enter-y" /> <GrowCard :loading="loading" class="enter-y" />
<SiteAnalysis class="!my-4 enter-y" :loading="loading" /> <SiteAnalysis class="!my-4 enter-y" :loading="loading" />
<div class="md:flex enter-y"> <div class="md:flex enter-y">
<VisitRadar class="md:w-1/3 w-full" :loading="loading" /> <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
<VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" /> <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
<SalesProductPie class="md:w-1/3 w-full" :loading="loading" /> <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import GrowCard from './components/GrowCard.vue'; import GrowCard from './components/GrowCard.vue';
import SiteAnalysis from './components/SiteAnalysis.vue'; import SiteAnalysis from './components/SiteAnalysis.vue';
import VisitSource from './components/VisitSource.vue'; import VisitSource from './components/VisitSource.vue';
import VisitRadar from './components/VisitRadar.vue'; import VisitRadar from './components/VisitRadar.vue';
import SalesProductPie from './components/SalesProductPie.vue'; import SalesProductPie from './components/SalesProductPie.vue';
export default defineComponent({ const loading = ref(true);
components: {
GrowCard,
SiteAnalysis,
VisitRadar,
VisitSource,
SalesProductPie,
},
setup() {
const loading = ref(true);
setTimeout(() => { setTimeout(() => {
loading.value = false; loading.value = false;
}, 1500); }, 1500);
return { loading };
},
});
</script> </script>
src/views/dashboard/workbench/components/DynamicInfo.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<template #extra> <template #extra>
<a-button type="link" size="small">更多</a-button> <a-button type="link" size="small">更多</a-button>
</template> </template>
<List item-layout="horizontal" :data-source="items"> <List item-layout="horizontal" :data-source="dynamicInfoItems">
<template #renderItem="{ item }"> <template #renderItem="{ item }">
<ListItem> <ListItem>
<ListItemMeta> <ListItemMeta>
...@@ -21,18 +21,11 @@ ...@@ -21,18 +21,11 @@
</List> </List>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { Card, List } from 'ant-design-vue'; import { Card, List } from 'ant-design-vue';
import { dynamicInfoItems } from './data'; import { dynamicInfoItems } from './data';
import headerImg from '/@/assets/images/header.jpg';
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
export default defineComponent({ const ListItem = List.Item;
components: { Card, List, ListItem: List.Item, ListItemMeta: List.Item.Meta, Icon }, const ListItemMeta = List.Item.Meta;
setup() {
return { items: dynamicInfoItems, headerImg };
},
});
</script> </script>
src/views/dashboard/workbench/components/ProjectCard.vue
...@@ -21,7 +21,6 @@ ...@@ -21,7 +21,6 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
import { groupItems } from './data'; import { groupItems } from './data';
......
src/views/dashboard/workbench/components/QuickNav.vue
<template> <template>
<Card title="快捷导航" v-bind="$attrs"> <Card title="快捷导航" v-bind="$attrs">
<template v-for="item in items" :key="item"> <template v-for="item in navItems" :key="item">
<CardGrid> <CardGrid>
<span class="flex flex-col items-center"> <span class="flex flex-col items-center">
<Icon :icon="item.icon" :color="item.color" size="20" /> <Icon :icon="item.icon" :color="item.color" size="20" />
...@@ -10,17 +10,10 @@ ...@@ -10,17 +10,10 @@
</template> </template>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { navItems } from './data'; import { navItems } from './data';
import { Icon } from '/@/components/Icon';
export default defineComponent({ const CardGrid = Card.Grid;
components: { Card, CardGrid: Card.Grid, Icon },
setup() {
return { items: navItems };
},
});
</script> </script>
src/views/dashboard/workbench/components/SaleRadar.vue
...@@ -3,104 +3,98 @@ ...@@ -3,104 +3,98 @@
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, Ref, ref, watch } from 'vue'; import { Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts'; import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({ const props = defineProps({
components: { Card }, loading: Boolean,
props: { width: {
loading: Boolean, type: String as PropType<string>,
width: { default: '100%',
type: String as PropType<string>, },
default: '100%', height: {
}, type: String as PropType<string>,
height: { default: '400px',
type: String as PropType<string>,
default: '400px',
},
}, },
setup(props) { });
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); const chartRef = ref<HTMLDivElement | null>(null);
watch( const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
() => props.loading, watch(
() => { () => props.loading,
if (props.loading) { () => {
return; if (props.loading) {
} return;
setOptions({ }
legend: { setOptions({
bottom: 0, legend: {
data: ['Visits', 'Sales'], bottom: 0,
data: ['Visits', 'Sales'],
},
tooltip: {},
radar: {
radius: '60%',
splitNumber: 8,
indicator: [
{
text: '2017',
max: 100,
}, },
tooltip: {}, {
radar: { text: '2017',
radius: '60%', max: 100,
splitNumber: 8,
indicator: [
{
text: '2017',
max: 100,
},
{
text: '2017',
max: 100,
},
{
text: '2018',
max: 100,
},
{
text: '2019',
max: 100,
},
{
text: '2020',
max: 100,
},
{
text: '2021',
max: 100,
},
],
}, },
series: [ {
text: '2018',
max: 100,
},
{
text: '2019',
max: 100,
},
{
text: '2020',
max: 100,
},
{
text: '2021',
max: 100,
},
],
},
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
shadowBlur: 0,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
data: [
{ {
type: 'radar', value: [90, 50, 86, 40, 50, 20],
symbolSize: 0, name: 'Visits',
areaStyle: { itemStyle: {
shadowBlur: 0, color: '#b6a2de',
shadowColor: 'rgba(0,0,0,.2)', },
shadowOffsetX: 0, },
shadowOffsetY: 10, {
opacity: 1, value: [70, 75, 70, 76, 20, 85],
name: 'Sales',
itemStyle: {
color: '#67e0e3',
}, },
data: [
{
value: [90, 50, 86, 40, 50, 20],
name: 'Visits',
itemStyle: {
color: '#b6a2de',
},
},
{
value: [70, 75, 70, 76, 20, 85],
name: 'Sales',
itemStyle: {
color: '#67e0e3',
},
},
],
}, },
], ],
}); },
}, ],
{ immediate: true } });
);
return { chartRef };
}, },
}); { immediate: true }
);
</script> </script>
src/views/dashboard/workbench/components/WorkbenchHeader.vue
...@@ -22,19 +22,12 @@ ...@@ -22,19 +22,12 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent } from 'vue'; import { computed } from 'vue';
import { Avatar } from 'ant-design-vue'; import { Avatar } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import headerImg from '/@/assets/images/header.jpg'; import headerImg from '/@/assets/images/header.jpg';
export default defineComponent({
components: { Avatar }, const userStore = useUserStore();
setup() { const userinfo = computed(() => userStore.getUserInfo);
const userStore = useUserStore();
const userinfo = computed(() => userStore.getUserInfo);
return { userinfo, headerImg };
},
});
</script> </script>
src/views/dashboard/workbench/index.vue
...@@ -18,9 +18,8 @@ ...@@ -18,9 +18,8 @@
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref } from 'vue'; import { ref } from 'vue';
import { Card } from 'ant-design-vue'; import { Card } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import WorkbenchHeader from './components/WorkbenchHeader.vue'; import WorkbenchHeader from './components/WorkbenchHeader.vue';
...@@ -29,26 +28,9 @@ ...@@ -29,26 +28,9 @@
import DynamicInfo from './components/DynamicInfo.vue'; import DynamicInfo from './components/DynamicInfo.vue';
import SaleRadar from './components/SaleRadar.vue'; import SaleRadar from './components/SaleRadar.vue';
export default defineComponent({ const loading = ref(true);
components: {
PageWrapper,
WorkbenchHeader,
ProjectCard,
QuickNav,
DynamicInfo,
SaleRadar,
Card,
},
setup() {
const loading = ref(true);
setTimeout(() => {
loading.value = false;
}, 1500);
return { setTimeout(() => {
loading, loading.value = false;
}; }, 1500);
},
});
</script> </script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论