Vben
5 years ago
89 changed files with 1457 additions and 2471 deletions
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 54 KiB |
@ -1,90 +0,0 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ height, width }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, onMounted, ref, Ref } from 'vue'; |
|||
|
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
import { basicProps } from './props'; |
|||
export default defineComponent({ |
|||
name: 'AnalysisLine', |
|||
props: basicProps, |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
// 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' |
|||
}, |
|||
}, |
|||
legend: { |
|||
itemWidth: 15, |
|||
right: 10, |
|||
data: ['产品一', '产品二', '产品三'], |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisTick: { |
|||
inside: true, // 刻度朝内 |
|||
}, |
|||
data: ['付费用户', '免费用户', '自主'], |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
axisTick: { |
|||
inside: true, // 刻度朝内 |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '产品一', |
|||
type: 'bar', |
|||
itemStyle: { |
|||
color: '#3ca0f6', |
|||
}, |
|||
data: [3200, 3320, 3010], |
|||
animationDuration: 4000, |
|||
}, |
|||
{ |
|||
name: '产品二', |
|||
type: 'bar', |
|||
itemStyle: { |
|||
color: '#7dd9b9', |
|||
}, |
|||
data: [1200, 2600, 1010], |
|||
animationDuration: 4000, |
|||
}, |
|||
|
|||
{ |
|||
name: '产品三', |
|||
type: 'bar', |
|||
itemStyle: { |
|||
color: '#e6a23c', |
|||
}, |
|||
data: [862, 2500, 964], |
|||
animationDuration: 4000, |
|||
}, |
|||
], |
|||
}); |
|||
}); |
|||
|
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,94 +0,0 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ height, width }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, onMounted, ref, Ref } from 'vue'; |
|||
|
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
import { basicProps } from './props'; |
|||
export default defineComponent({ |
|||
name: 'AnalysisLine', |
|||
props: basicProps, |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
// title: { |
|||
// text: '产品成交额', |
|||
// }, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
padding: 3, |
|||
borderColor: '#777', |
|||
borderWidth: 1, |
|||
}, |
|||
legend: { |
|||
itemWidth: 15, |
|||
itemHeight: 4, |
|||
left: 80, |
|||
top: 0, |
|||
orient: 'horizontal', |
|||
data: ['产品一', '产品二'], |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
axisTick: { |
|||
inside: true, // 刻度朝内 |
|||
}, |
|||
data: [ |
|||
'一月', |
|||
'二月', |
|||
'三月', |
|||
'四月', |
|||
'五月', |
|||
'六月', |
|||
'七月', |
|||
'八月', |
|||
'九月', |
|||
'十月', |
|||
'十一月', |
|||
'十二月', |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
axisTick: { |
|||
inside: true, // 刻度朝内 |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '产品一', |
|||
type: 'line', |
|||
itemStyle: { |
|||
color: '#5B8FF9', |
|||
}, |
|||
data: [330, 132, 101, 134, 90, 230, 210, 150, 232, 234, 230, 400], |
|||
animationDuration: 4000, |
|||
}, |
|||
{ |
|||
name: '产品二', |
|||
type: 'line', |
|||
itemStyle: { |
|||
color: '#55D187', |
|||
}, |
|||
data: [220, 182, 191, 234, 290, 330, 310, 330, 232, 201, 330, 190], |
|||
animationDuration: 4000, |
|||
}, |
|||
], |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,75 +0,0 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ height, width }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, onMounted, ref, Ref } from 'vue'; |
|||
|
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
import { basicProps } from './props'; |
|||
|
|||
const m2R2Data = [ |
|||
{ value: 335, name: '移动设备', itemStyle: { color: '#1b65b9' } }, |
|||
{ value: 310, name: '网页端', itemStyle: { color: '#3ca0f6' } }, |
|||
{ value: 234, name: '手表', itemStyle: { color: '#2dc0c0' } }, |
|||
{ value: 234, name: '其他', itemStyle: { color: '#7dd9b9' } }, |
|||
]; |
|||
export default defineComponent({ |
|||
props: basicProps, |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
title: [ |
|||
{ |
|||
text: '总设备', |
|||
subtext: '1,430', |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: '#4B535E85', |
|||
}, |
|||
subtextStyle: { |
|||
fontSize: 24, |
|||
color: 'black', |
|||
}, |
|||
textAlign: 'center', |
|||
left: '34.5%', |
|||
top: '40%', |
|||
}, |
|||
], |
|||
tooltip: { |
|||
trigger: 'item', |
|||
}, |
|||
legend: { |
|||
itemHeight: 10, |
|||
type: 'scroll', |
|||
orient: 'vertical', |
|||
left: '70%', |
|||
align: 'left', |
|||
top: 'middle', |
|||
textStyle: { |
|||
color: '#8C8C8C', |
|||
}, |
|||
height: 250, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '成交额', |
|||
type: 'pie', |
|||
center: ['35%', '50%'], |
|||
radius: ['45%', '65%'], |
|||
label: { |
|||
show: false, |
|||
}, |
|||
data: m2R2Data, |
|||
animationDuration: 3000, |
|||
}, |
|||
], |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,80 +0,0 @@ |
|||
import { defineComponent } from 'vue'; |
|||
import { Tabs, Row, Col, Progress, Divider } from 'ant-design-vue'; |
|||
import { CollapseContainer } from '/@/components/Container/index'; |
|||
import TrendLine from './TrendLine.vue'; |
|||
import './flow-ana.less'; |
|||
const prefixCls = 'flow-analysis'; |
|||
export default defineComponent({ |
|||
name: 'AnalysisFLow', |
|||
setup() { |
|||
const renderContent = () => { |
|||
return ( |
|||
<Row> |
|||
{() => ( |
|||
<> |
|||
<Col md={24} lg={8}> |
|||
{() => ( |
|||
<CollapseContainer |
|||
title="整体流量评分" |
|||
canExpan={false} |
|||
class={`${prefixCls}__left`} |
|||
> |
|||
{() => ( |
|||
<div> |
|||
<div class={`${prefixCls}__score`}> |
|||
86.2<span>分</span> |
|||
</div> |
|||
<div class={`${prefixCls}__rank`}> |
|||
排名<span>前20%</span> |
|||
</div> |
|||
<Progress percent={70} showInfo={false} status="active" /> |
|||
<Divider /> |
|||
|
|||
<ul class={`${prefixCls}__rs`}> |
|||
<li> |
|||
<span>平均分</span> |
|||
<span>77.5</span> |
|||
</li> |
|||
<li> |
|||
<span>最高分</span> |
|||
<span>99.5</span> |
|||
</li> |
|||
<li> |
|||
<span>最低分</span> |
|||
<span>56.5</span> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
)} |
|||
</CollapseContainer> |
|||
)} |
|||
</Col> |
|||
<Col md={24} lg={16}> |
|||
{() => ( |
|||
<CollapseContainer title="整体流量趋势" canExpan={false}> |
|||
{() => <TrendLine />} |
|||
</CollapseContainer> |
|||
)} |
|||
</Col> |
|||
</> |
|||
)} |
|||
</Row> |
|||
); |
|||
}; |
|||
return () => ( |
|||
<Tabs class={prefixCls} default-active-key="1"> |
|||
{() => [ |
|||
<Tabs.TabPane key="1" tab="产品一"> |
|||
{() => renderContent()} |
|||
</Tabs.TabPane>, |
|||
<Tabs.TabPane key="2" tab="产品二"> |
|||
{() => renderContent()} |
|||
</Tabs.TabPane>, |
|||
<Tabs.TabPane key="3" tab="产品三"> |
|||
{() => renderContent()} |
|||
</Tabs.TabPane>, |
|||
]} |
|||
</Tabs> |
|||
); |
|||
}, |
|||
}); |
|||
@ -0,0 +1,69 @@ |
|||
<template> |
|||
<Card title="成交占比" :loading="loading"> |
|||
<div ref="chartRef" :style="{ width, height }"></div> |
|||
</Card> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, Ref, ref, watch } from 'vue'; |
|||
|
|||
import { Card } from 'ant-design-vue'; |
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
export default defineComponent({ |
|||
components: { Card }, |
|||
props: { |
|||
loading: Boolean, |
|||
width: { |
|||
type: String as PropType<string>, |
|||
default: '100%', |
|||
}, |
|||
height: { |
|||
type: String as PropType<string>, |
|||
default: '300px', |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
watch( |
|||
() => props.loading, |
|||
() => { |
|||
if (props.loading) { |
|||
return; |
|||
} |
|||
setOptions({ |
|||
tooltip: { |
|||
trigger: 'item', |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
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 } |
|||
); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,46 @@ |
|||
<template> |
|||
<Card |
|||
:tab-list="tabListTitle" |
|||
v-bind="$attrs" |
|||
:active-tab-key="activeKey" |
|||
@tabChange="onTabChange" |
|||
> |
|||
<p v-if="activeKey === 'tab1'"> |
|||
<VisitAnalysis /> |
|||
</p> |
|||
<p v-if="activeKey === 'tab2'"> |
|||
<VisitAnalysisBar /> |
|||
</p> |
|||
</Card> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, ref } from 'vue'; |
|||
|
|||
import { Card } from 'ant-design-vue'; |
|||
|
|||
import VisitAnalysis from './VisitAnalysis.vue'; |
|||
import VisitAnalysisBar from './VisitAnalysisBar.vue'; |
|||
|
|||
export default defineComponent({ |
|||
components: { Card, VisitAnalysis, VisitAnalysisBar }, |
|||
setup() { |
|||
const activeKey = ref('tab1'); |
|||
|
|||
const tabListTitle = [ |
|||
{ |
|||
key: 'tab1', |
|||
tab: '流量趋势', |
|||
}, |
|||
{ |
|||
key: 'tab2', |
|||
tab: '访问量', |
|||
}, |
|||
]; |
|||
|
|||
function onTabChange(key) { |
|||
activeKey.value = key; |
|||
} |
|||
return { tabListTitle, activeKey, onTabChange }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,154 +0,0 @@ |
|||
<template> |
|||
<div :class="prefixCls"> |
|||
<div :class="`${prefixCls}-header`"> |
|||
<div :class="`${prefixCls}__info`"> |
|||
<span :class="`${prefixCls}__title`">{{ info.title }}</span> |
|||
<span :class="`${prefixCls}__desc`">{{ info.desc }}</span> |
|||
</div> |
|||
<span :class="`${prefixCls}__tag ${info.status}`">{{ info.text }}</span> |
|||
</div> |
|||
|
|||
<div :class="`${prefixCls}-body mt-5`"> |
|||
<div :class="`${prefixCls}__process-nfo`"> |
|||
<span>进度</span> |
|||
<span>{{ info.percent }}%</span> |
|||
</div> |
|||
<Progress :percent="info.percent" :showInfo="false" :status="info.status" /> |
|||
</div> |
|||
<div :class="`${prefixCls}-footer`"> |
|||
<span :class="`${prefixCls}__date`"> |
|||
更新日期: <span>{{ info.updateTime }}</span> |
|||
</span> |
|||
<div :class="`${prefixCls}__avatar`"> |
|||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> |
|||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> |
|||
<Avatar>+3</Avatar> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { computed, defineComponent, PropType } from 'vue'; |
|||
import { Progress, Avatar } from 'ant-design-vue'; |
|||
|
|||
import { TaskItem } from '../types'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'GrowCard', |
|||
components: { Progress, Avatar }, |
|||
props: { |
|||
info: { |
|||
type: Object as PropType<TaskItem>, |
|||
default: null, |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
return { |
|||
prefixCls: 'task-card', |
|||
text: computed(() => { |
|||
const { status } = props.info || {}; |
|||
return status === 'active' |
|||
? '进度正常' |
|||
: status === 'exception' |
|||
? '进度滞后' |
|||
: '项目完成'; |
|||
}), |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.task-card { |
|||
display: flex; |
|||
width: calc(100% - 24px); |
|||
height: 199px; |
|||
padding: 24px 20px 12px 16px; |
|||
margin: 0 12px 12px 12px; |
|||
background: #fff; |
|||
border: 1px solid #ececf2; |
|||
border-radius: 12px; |
|||
flex-direction: column; |
|||
|
|||
&-header { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
&__tag { |
|||
display: inline-block; |
|||
padding: 4px 6px; |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 12px; |
|||
border-radius: 6px; |
|||
|
|||
&.success { |
|||
color: #55d187; |
|||
background: rgba(85, 209, 135, 0.16); |
|||
} |
|||
|
|||
&.warn { |
|||
color: #ffa07d; |
|||
background: #ffd16416; |
|||
} |
|||
|
|||
&.done { |
|||
color: #0593ff; |
|||
background: #0593ff16; |
|||
} |
|||
} |
|||
|
|||
&__info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
&__title { |
|||
font-family: PingFangSC-Medium; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
|
|||
&__desc { |
|||
font-family: PingFangSC-Regular; |
|||
font-size: 12px; |
|||
line-height: 21px; |
|||
color: #8181a5; |
|||
} |
|||
|
|||
&__process-nfo { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
span { |
|||
font-size: 14px; |
|||
line-height: 21px; |
|||
color: #8181a5; |
|||
} |
|||
} |
|||
|
|||
&-footer { |
|||
display: flex; |
|||
width: 100%; |
|||
margin-top: 16px; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
&__date { |
|||
font-size: 12px; |
|||
line-height: 21px; |
|||
color: #2c3a61; |
|||
|
|||
span { |
|||
color: #7c8087; |
|||
} |
|||
} |
|||
|
|||
&__avatar { |
|||
display: flex; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,97 +0,0 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ height, width }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, onMounted, ref, Ref } from 'vue'; |
|||
|
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
import { basicProps } from './props'; |
|||
export default defineComponent({ |
|||
props: basicProps, |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
padding: 3, |
|||
borderColor: '#777', |
|||
borderWidth: 1, |
|||
}, |
|||
legend: { |
|||
show: false, |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
axisTick: { |
|||
inside: true, |
|||
}, |
|||
data: [ |
|||
'一月', |
|||
'二月', |
|||
'三月', |
|||
'四月', |
|||
'五月', |
|||
'六月', |
|||
'七月', |
|||
'八月', |
|||
'九月', |
|||
'十月', |
|||
'十一月', |
|||
'十二月', |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
axisTick: { |
|||
inside: true, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '产品一', |
|||
type: 'line', |
|||
itemStyle: { |
|||
color: '#5B8FF9', |
|||
}, |
|||
areaStyle: { |
|||
color: new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: '#5B8FF9', |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: 'rgba(118,168,248, 0)', |
|||
}, |
|||
], |
|||
false |
|||
), |
|||
shadowColor: 'rgba(118,168,248, 0.9)', |
|||
shadowBlur: 20, |
|||
}, |
|||
data: [134, 330, 132, 101, 90, 230, 210, 150, 230, 400, 232, 234], |
|||
animationDuration: 3000, |
|||
}, |
|||
], |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ height, width }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, onMounted, ref, Ref } from 'vue'; |
|||
|
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
import { basicProps } from './props'; |
|||
export default defineComponent({ |
|||
props: basicProps, |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
lineStyle: { |
|||
width: 1, |
|||
color: '#019680', |
|||
}, |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: [ |
|||
'6:00', |
|||
'7:00', |
|||
'8:00', |
|||
'9:00', |
|||
'10:00', |
|||
'11:00', |
|||
'12:00', |
|||
'13:00', |
|||
'14:00', |
|||
'15:00', |
|||
'16:00', |
|||
'17:00', |
|||
'18:00', |
|||
'19:00', |
|||
'20:00', |
|||
'21:00', |
|||
'22:00', |
|||
'23:00', |
|||
], |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
width: 1, |
|||
type: 'solid', |
|||
color: 'rgba(226,226,226,0.5)', |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
max: 80000, |
|||
splitNumber: 4, |
|||
axisTick: { |
|||
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, |
|||
], |
|||
type: 'line', |
|||
areaStyle: {}, |
|||
itemStyle: { |
|||
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', |
|||
}, |
|||
}, |
|||
], |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,62 @@ |
|||
<template> |
|||
<div ref="chartRef" :style="{ height, width }"></div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, onMounted, ref, Ref } from 'vue'; |
|||
|
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
import { basicProps } from './props'; |
|||
export default defineComponent({ |
|||
props: basicProps, |
|||
setup() { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
|
|||
onMounted(() => { |
|||
setOptions({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
lineStyle: { |
|||
width: 1, |
|||
color: '#019680', |
|||
}, |
|||
}, |
|||
}, |
|||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, |
|||
xAxis: { |
|||
type: 'category', |
|||
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], |
|||
type: 'bar', |
|||
barMaxWidth: 80, |
|||
}, |
|||
], |
|||
}); |
|||
}); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<Card title="转化率" :loading="loading"> |
|||
<div ref="chartRef" :style="{ width, height }"></div> |
|||
</Card> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, Ref, ref, watch } from 'vue'; |
|||
|
|||
import { Card } from 'ant-design-vue'; |
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
export default defineComponent({ |
|||
components: { Card }, |
|||
props: { |
|||
loading: Boolean, |
|||
width: { |
|||
type: String as PropType<string>, |
|||
default: '100%', |
|||
}, |
|||
height: { |
|||
type: String as PropType<string>, |
|||
default: '300px', |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
watch( |
|||
() => props.loading, |
|||
() => { |
|||
if (props.loading) { |
|||
return; |
|||
} |
|||
setOptions({ |
|||
backgroundColor: '#fff', |
|||
legend: { |
|||
bottom: 0, |
|||
data: ['访问', '购买'], |
|||
}, |
|||
tooltip: {}, |
|||
radar: { |
|||
radius: '60%', |
|||
splitNumber: 8, |
|||
indicator: [ |
|||
{ |
|||
text: '电脑', |
|||
max: 100, |
|||
}, |
|||
{ |
|||
text: '充电器', |
|||
max: 100, |
|||
}, |
|||
{ |
|||
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: [ |
|||
{ |
|||
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 }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<Card title="访问来源" :loading="loading"> |
|||
<div ref="chartRef" :style="{ width, height }"></div> |
|||
</Card> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, Ref, ref, watch } from 'vue'; |
|||
|
|||
import { Card } from 'ant-design-vue'; |
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
export default defineComponent({ |
|||
components: { Card }, |
|||
props: { |
|||
loading: Boolean, |
|||
width: { |
|||
type: String as PropType<string>, |
|||
default: '100%', |
|||
}, |
|||
height: { |
|||
type: String as PropType<string>, |
|||
default: '300px', |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
watch( |
|||
() => props.loading, |
|||
() => { |
|||
if (props.loading) { |
|||
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, |
|||
}, |
|||
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; |
|||
}, |
|||
}, |
|||
], |
|||
}); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,56 +0,0 @@ |
|||
.flow-analysis { |
|||
width: 100%; |
|||
background: #fff; |
|||
|
|||
&__left { |
|||
padding: 10px 20px !important; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.06); |
|||
border-radius: 0; |
|||
} |
|||
|
|||
&__score { |
|||
margin-top: 20px; |
|||
font-size: 30px; |
|||
line-height: 38px; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
|
|||
span { |
|||
font-size: 20px; |
|||
line-height: 28px; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
} |
|||
|
|||
&__rank { |
|||
margin: 16px 0; |
|||
font-size: 12px; |
|||
line-height: 20px; |
|||
color: #7c8087; |
|||
|
|||
span { |
|||
display: inline-block; |
|||
margin-left: 10px; |
|||
color: #1c1d21; |
|||
} |
|||
} |
|||
|
|||
&__rs { |
|||
li { |
|||
display: flex; |
|||
line-height: 28px; |
|||
justify-content: space-between; |
|||
|
|||
span { |
|||
&:nth-child(1) { |
|||
font-size: 14px; |
|||
color: #1c1d21; |
|||
} |
|||
|
|||
&:nth-child(2) { |
|||
font-size: 16px; |
|||
color: #1c1d21; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
export interface GrowCardItem { |
|||
icon: string; |
|||
title: string; |
|||
value: number; |
|||
total: number; |
|||
color: string; |
|||
action: string; |
|||
} |
|||
|
|||
export const growCardList: GrowCardItem[] = [ |
|||
{ |
|||
title: '访问数', |
|||
icon: 'visit-count|svg', |
|||
value: 2000, |
|||
total: 120000, |
|||
color: 'green', |
|||
action: '月', |
|||
}, |
|||
{ |
|||
title: '成交额', |
|||
icon: 'total-sales|svg', |
|||
value: 20000, |
|||
total: 500000, |
|||
color: 'blue', |
|||
action: '月', |
|||
}, |
|||
{ |
|||
title: '下载数', |
|||
icon: 'download-count|svg', |
|||
value: 8000, |
|||
total: 120000, |
|||
color: 'orange', |
|||
action: '周', |
|||
}, |
|||
{ |
|||
title: '成交数', |
|||
icon: 'transaction|svg', |
|||
value: 5000, |
|||
total: 50000, |
|||
color: 'purple', |
|||
action: '年', |
|||
}, |
|||
]; |
|||
@ -1,107 +0,0 @@ |
|||
import { GrowCardItem, TaskItem } from './types'; |
|||
import iconSvg1 from '/@/assets/svg/dashboard/analysis-icon1.svg'; |
|||
import iconSvg2 from '/@/assets/svg/dashboard/analysis-icon2.svg'; |
|||
import iconSvg3 from '/@/assets/svg/dashboard/analysis-icon3.svg'; |
|||
import iconSvg4 from '/@/assets/svg/dashboard/analysis-icon4.svg'; |
|||
export const taskList: TaskItem[] = [ |
|||
{ |
|||
percent: 50, |
|||
title: '开发任务一', |
|||
updateTime: '2020.7.12', |
|||
desc: '开发任务一简介', |
|||
status: 'active', |
|||
}, |
|||
{ |
|||
percent: 67, |
|||
title: '开发任务二', |
|||
updateTime: '2020.3.12', |
|||
desc: '开发任务二简介', |
|||
status: 'exception', |
|||
}, |
|||
{ |
|||
percent: 100, |
|||
title: '开发任务三', |
|||
updateTime: '2020.4.12', |
|||
desc: '开发任务三简介', |
|||
|
|||
status: 'success', |
|||
}, |
|||
]; |
|||
export const growCardList: GrowCardItem[] = [ |
|||
{ |
|||
title: '总用户数', |
|||
icon: iconSvg1, |
|||
price: 80000, |
|||
up: true, |
|||
mom: '环比增长', |
|||
percent: 2.5, |
|||
}, |
|||
{ |
|||
title: '产品数量', |
|||
icon: iconSvg2, |
|||
price: 4000, |
|||
up: true, |
|||
mom: '同比增长', |
|||
percent: 3, |
|||
}, |
|||
{ |
|||
title: '总营业额', |
|||
icon: iconSvg3, |
|||
price: 3000000, |
|||
up: false, |
|||
mom: '环比降低', |
|||
percent: 2, |
|||
}, |
|||
{ |
|||
title: '总任务数', |
|||
icon: iconSvg4, |
|||
price: 10000, |
|||
up: false, |
|||
mom: '同比降低', |
|||
percent: 1, |
|||
}, |
|||
]; |
|||
export const randomizeArray = function (arg: any) { |
|||
const array = arg.slice(); |
|||
let currentIndex = array.length, |
|||
temporaryValue, |
|||
randomIndex; |
|||
|
|||
while (0 !== currentIndex) { |
|||
randomIndex = Math.floor(Math.random() * currentIndex); |
|||
currentIndex -= 1; |
|||
|
|||
temporaryValue = array[currentIndex]; |
|||
array[currentIndex] = array[randomIndex]; |
|||
array[randomIndex] = temporaryValue; |
|||
} |
|||
|
|||
return array; |
|||
}; |
|||
|
|||
export const sparklineData = [ |
|||
47, |
|||
45, |
|||
54, |
|||
38, |
|||
56, |
|||
24, |
|||
65, |
|||
31, |
|||
37, |
|||
39, |
|||
62, |
|||
51, |
|||
35, |
|||
41, |
|||
35, |
|||
27, |
|||
93, |
|||
53, |
|||
61, |
|||
27, |
|||
54, |
|||
43, |
|||
19, |
|||
46, |
|||
]; |
|||
@ -1,16 +0,0 @@ |
|||
export interface GrowCardItem { |
|||
icon: string; |
|||
title: string; |
|||
price: number; |
|||
up: boolean; |
|||
mom: string; |
|||
percent: number; |
|||
} |
|||
|
|||
export interface TaskItem { |
|||
percent: number; |
|||
status: 'success' | 'exception' | 'active'; |
|||
updateTime: string; |
|||
title: string; |
|||
desc: string; |
|||
} |
|||
@ -1,494 +0,0 @@ |
|||
.house-wrap { |
|||
position: relative; |
|||
width: 600px; |
|||
height: 600px; |
|||
transform: scale(0.5); |
|||
|
|||
.house { |
|||
position: absolute; |
|||
position: relative; |
|||
top: 50%; |
|||
left: 50%; |
|||
display: flex; |
|||
width: 400px; |
|||
height: 300px; |
|||
transform: translateX(-50%) translateY(-13%); |
|||
justify-content: center; |
|||
perspective: 200px; |
|||
} |
|||
|
|||
.floor { |
|||
position: absolute; |
|||
bottom: 0; |
|||
display: flex; |
|||
width: 95%; |
|||
height: 30px; |
|||
background-color: #e1f6fd; |
|||
border: 4px solid #314b70; |
|||
border-top-right-radius: 4px; |
|||
border-top-left-radius: 4px; |
|||
box-shadow: inset 4px 4px 0 #fffdff; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.floor::before, |
|||
.floor::after { |
|||
position: absolute; |
|||
bottom: 0; |
|||
width: 32%; |
|||
height: 60%; |
|||
background-image: linear-gradient(to bottom, #e0f5fc 50%, #aac4d0 50%); |
|||
border-top: 4px solid #314b70; |
|||
border-right: 4px solid #314b70; |
|||
border-left: 4px solid #314b70; |
|||
border-top-right-radius: 4px; |
|||
border-top-left-radius: 4px; |
|||
content: ''; |
|||
box-shadow: 4px 0 0 #aac4d0; |
|||
} |
|||
|
|||
.floor::after { |
|||
top: 0; |
|||
width: 25%; |
|||
height: 40%; |
|||
border-top: none; |
|||
border-top-right-radius: 0; |
|||
border-top-left-radius: 0; |
|||
} |
|||
|
|||
.wall { |
|||
position: absolute; |
|||
bottom: 30px; |
|||
display: flex; |
|||
width: 91%; |
|||
height: 175px; |
|||
overflow: hidden; |
|||
background: #c3e0e7; |
|||
border-right: 4px solid #314b70; |
|||
border-left: 4px solid #314b70; |
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.window { |
|||
position: relative; |
|||
width: 34%; |
|||
height: 125px; |
|||
background: #aac4d0; |
|||
border-top: 4px solid #314b70; |
|||
border-right: 4px solid #314b70; |
|||
border-bottom: none; |
|||
border-left: none; |
|||
border-top-right-radius: 8px; |
|||
box-shadow: inset 0 4px 2px #e0f5fc; |
|||
} |
|||
|
|||
.window::before { |
|||
position: absolute; |
|||
top: 6%; |
|||
left: 0; |
|||
width: 94%; |
|||
height: 88%; |
|||
background-image: linear-gradient(to top, #f3f6fa 47%, #9ab2d3 47%, #9ab2d3 50%, #f3f6fa 50%); |
|||
border-top: 4px solid #314b70; |
|||
border-right: 4px solid #314b70; |
|||
border-bottom: 4px solid #314b70; |
|||
border-left: none; |
|||
border-top-right-radius: 4px; |
|||
border-bottom-right-radius: 4px; |
|||
content: ''; |
|||
} |
|||
|
|||
.window::after { |
|||
position: absolute; |
|||
top: 19%; |
|||
left: 20%; |
|||
width: 30px; |
|||
height: 40px; |
|||
background-color: #f9aabe; |
|||
border: 4px solid #9ab2d3; |
|||
content: ''; |
|||
} |
|||
|
|||
.window:nth-of-type(3) { |
|||
border-top: none; |
|||
border-right: 4px solid #314b70; |
|||
border-bottom: 4px solid #314b70; |
|||
border-left: none; |
|||
border-top-right-radius: 0; |
|||
border-bottom-right-radius: 8px; |
|||
transform: rotateZ(180deg); |
|||
box-shadow: inset 0 -4px 2px #e0f5fc; |
|||
} |
|||
|
|||
.window:nth-of-type(3)::after { |
|||
content: none; |
|||
} |
|||
|
|||
.door { |
|||
display: flex; |
|||
width: 20%; |
|||
height: 130px; |
|||
padding-left: 8px; |
|||
background-color: #ffc26b; |
|||
border: 4px solid #314b70; |
|||
border-bottom: none; |
|||
border-top-right-radius: 10px; |
|||
border-top-left-radius: 10px; |
|||
box-shadow: inset 3px 3px #ffe0ad, inset -10px -8px #ffad61, 4px 0 #aac4d0; |
|||
flex-direction: column; |
|||
justify-content: space-evenly; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.door__square { |
|||
width: 85%; |
|||
height: 47px; |
|||
border: 4px solid #314b70; |
|||
border-radius: 4px; |
|||
box-shadow: inset 3px 3px #ffe0ad; |
|||
} |
|||
|
|||
.door__line { |
|||
width: 25%; |
|||
height: 4px; |
|||
background: #314b70; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.top { |
|||
position: absolute; |
|||
width: 82%; |
|||
height: 30px; |
|||
background-color: #aac4d0; |
|||
border: 4px solid #314b70; |
|||
border-top-right-radius: 4px; |
|||
border-top-left-radius: 4px; |
|||
box-shadow: inset 4px 4px 0 #e1f6fd; |
|||
} |
|||
|
|||
.circle { |
|||
position: absolute; |
|||
top: -10%; |
|||
display: flex; |
|||
width: 115px; |
|||
height: 115px; |
|||
background-color: #e0f5fc; |
|||
border: 4px solid #314b70; |
|||
border-radius: 50%; |
|||
content: ''; |
|||
box-shadow: inset 4px 4px 0 #fffdff, inset 4px -4px 0 #fffdff, inset -4px 4px 0 #fffdff, |
|||
inset -4px -4px 0 #fffdff; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.circle::before, |
|||
.circle::after { |
|||
position: absolute; |
|||
top: 35%; |
|||
width: 70%; |
|||
height: 4px; |
|||
background-color: #314b70; |
|||
content: ''; |
|||
} |
|||
|
|||
.circle::after { |
|||
top: 20%; |
|||
width: 35%; |
|||
} |
|||
|
|||
.plastic { |
|||
position: absolute; |
|||
top: 30%; |
|||
z-index: 100; |
|||
width: 100%; |
|||
height: 30px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.plastic__g { |
|||
display: flex; |
|||
justify-content: center; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
transform: translateY(-22px); |
|||
} |
|||
|
|||
.plastic__item { |
|||
width: 43px; |
|||
height: 43px; |
|||
margin-bottom: 4px; |
|||
border: 3px solid #314b70; |
|||
border-radius: 50%; |
|||
box-shadow: 0 4px 0 #aac4d0; |
|||
} |
|||
|
|||
.plastic__item:nth-child(odd) { |
|||
background: #0792d9; |
|||
box-shadow: 0 4px 0 #aac4d0, inset 4px 4px 0 #66c8fa; |
|||
} |
|||
|
|||
.plastic__item:nth-child(even) { |
|||
background: #fffdff; |
|||
} |
|||
|
|||
.plastic__item:nth-of-type(1), |
|||
.plastic__item:nth-last-of-type(1) { |
|||
width: 45px; |
|||
height: 45px; |
|||
box-shadow: none; |
|||
box-shadow: inset 4px 4px 0 #66c8fa; |
|||
} |
|||
|
|||
.plastic__item:nth-of-type(5) { |
|||
width: 45px; |
|||
height: 45px; |
|||
} |
|||
|
|||
.line { |
|||
position: absolute; |
|||
top: 15px; |
|||
display: flex; |
|||
width: 90%; |
|||
height: 85px; |
|||
background-color: #e1f6fd; |
|||
border-right: 4px solid #314b70; |
|||
border-bottom: 4px solid #314b70; |
|||
border-left: 4px solid #314b70; |
|||
border-radius: 4px; |
|||
transform: rotateX(25deg); |
|||
transform-style: preserve-3d; |
|||
} |
|||
|
|||
.line__item { |
|||
height: 100%; |
|||
flex-grow: 1; |
|||
border-right: 4px solid #314b70; |
|||
} |
|||
|
|||
.line__item:nth-child(odd) { |
|||
background: #00affa; |
|||
box-shadow: inset 4px 4px 0 #66c8fa; |
|||
} |
|||
|
|||
.line__item:nth-child(even) { |
|||
background: #fffdff; |
|||
} |
|||
|
|||
.line__item:nth-last-of-type(1) { |
|||
border-right: none; |
|||
} |
|||
|
|||
.line__item:nth-child(4), |
|||
.line__item:nth-child(5), |
|||
.line__item:nth-child(6) { |
|||
border-top: 6px solid #314b70; |
|||
} |
|||
|
|||
.tree { |
|||
position: absolute; |
|||
bottom: 19%; |
|||
left: 10%; |
|||
display: flex; |
|||
width: 100px; |
|||
height: 165px; |
|||
background-color: #00d398; |
|||
border: 4px solid #314b70; |
|||
border-radius: 50px; |
|||
box-shadow: inset 4px 0 0 #77e4c6, inset -4px 0 0 #00a073; |
|||
animation: tree 1s linear alternate infinite; |
|||
justify-content: center; |
|||
transform-origin: 0% 100%; |
|||
} |
|||
|
|||
.tree__item { |
|||
position: absolute; |
|||
bottom: -80px; |
|||
width: 4px; |
|||
height: 140px; |
|||
background: #314b70; |
|||
} |
|||
|
|||
.tree__item:nth-of-type(2) { |
|||
bottom: 80px; |
|||
height: 40px; |
|||
border-radius: 20px; |
|||
box-shadow: 0 0 0 8px #77e4c6; |
|||
} |
|||
|
|||
.tree__item:nth-of-type(2)::before { |
|||
position: absolute; |
|||
bottom: -45px; |
|||
left: -30px; |
|||
width: 20px; |
|||
height: 35px; |
|||
background-color: #77e4c6; |
|||
border-radius: 15px; |
|||
content: ''; |
|||
} |
|||
|
|||
.tree__item:nth-of-type(3) { |
|||
bottom: 20px; |
|||
left: 36%; |
|||
width: 4px; |
|||
height: 30px; |
|||
background-color: #314b70; |
|||
transform: rotateZ(-45deg); |
|||
} |
|||
|
|||
.dot { |
|||
position: absolute; |
|||
bottom: 38px; |
|||
width: 100%; |
|||
height: 4px; |
|||
background-image: linear-gradient( |
|||
to right, |
|||
#314b70 10%, |
|||
transparent 10%, |
|||
transparent 11%, |
|||
#314b70 11%, |
|||
#314b70 85%, |
|||
transparent 85%, |
|||
transparent 86%, |
|||
#314b70 86% |
|||
); |
|||
} |
|||
|
|||
.bush__item { |
|||
position: absolute; |
|||
bottom: 40px; |
|||
left: 18%; |
|||
width: 80px; |
|||
height: 60px; |
|||
background-color: #00d398; |
|||
border: 1px solid red; |
|||
border: 4px solid #314b70; |
|||
border-bottom: none; |
|||
border-top-right-radius: 100px; |
|||
border-top-left-radius: 50px; |
|||
box-shadow: inset 4px 0 0 #77e4c6, inset -4px 0 0 #00a073; |
|||
animation: bush 2s alternate infinite; |
|||
transform-origin: bottom center; |
|||
} |
|||
|
|||
.bush__item:nth-of-type(2) { |
|||
left: 13%; |
|||
width: 50px; |
|||
height: 40px; |
|||
border-top-right-radius: 10px; |
|||
border-top-left-radius: 50px; |
|||
animation: tree 2s alternate reverse infinite 0.5s; |
|||
} |
|||
|
|||
.bush__item::before { |
|||
position: absolute; |
|||
top: 10px; |
|||
left: 10px; |
|||
width: 20px; |
|||
height: 20px; |
|||
background: #77e4c6; |
|||
border-radius: 50%; |
|||
content: ''; |
|||
} |
|||
|
|||
.cloud { |
|||
position: absolute; |
|||
top: 200px; |
|||
left: 60px; |
|||
display: flex; |
|||
justify-content: center; |
|||
width: 85px; |
|||
height: 20px; |
|||
border-bottom: 4px solid #e1e8f2; |
|||
animation: cloud 4s infinite alternate; |
|||
} |
|||
|
|||
.cloud:nth-of-type(2) { |
|||
top: 150px; |
|||
left: 50%; |
|||
animation: cloud 4s infinite reverse alternate 0.5s; |
|||
} |
|||
|
|||
.cloud:nth-of-type(3) { |
|||
top: 250px; |
|||
left: 80%; |
|||
animation: cloud 4s ease infinite alternate 0.75s; |
|||
} |
|||
|
|||
.cloud__item { |
|||
position: relative; |
|||
border-top: 20px solid #e1e8f2; |
|||
border-right: 20px solid transparent; |
|||
border-bottom: 20px solid transparent; |
|||
border-left: 20px solid #e1e8f2; |
|||
border-radius: 50%; |
|||
transform: rotateZ(45deg); |
|||
} |
|||
|
|||
.cloud__item:nth-of-type(2) { |
|||
margin-top: 5px; |
|||
margin-left: -7px; |
|||
border-top: 15px solid #e1e8f2; |
|||
border-right: 15px solid transparent; |
|||
border-bottom: 15px solid transparent; |
|||
border-left: 15px solid #e1e8f2; |
|||
} |
|||
|
|||
.bird { |
|||
position: absolute; |
|||
right: 10%; |
|||
bottom: 40%; |
|||
z-index: -1; |
|||
width: 20px; |
|||
height: 20px; |
|||
border-top: 4px solid #becde2; |
|||
border-left: 4px solid #becde2; |
|||
transform: rotateZ(-135deg); |
|||
animation: bird 1s ease alternate infinite; |
|||
} |
|||
|
|||
.bird:nth-of-type(2) { |
|||
right: 20%; |
|||
bottom: 30%; |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
|
|||
@keyframes bird { |
|||
0% { |
|||
transform: scaleY(0.7) rotateZ(-135deg) translateX(0) translateY(0) skew(-10deg, -10deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: scaleY(1) rotateZ(-135deg) translateX(50%) translateY(50%) skew(-10deg, -10deg); |
|||
} |
|||
} |
|||
@keyframes tree { |
|||
0% { |
|||
transform: scaleY(1); |
|||
} |
|||
|
|||
100% { |
|||
transform: scaleY(0.975); |
|||
} |
|||
} |
|||
@keyframes bush { |
|||
0% { |
|||
transform: skewX(-2deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: skewX(5deg); |
|||
} |
|||
} |
|||
@keyframes cloud { |
|||
0% { |
|||
transform: translateX(-10%); |
|||
} |
|||
|
|||
100% { |
|||
transform: translateX(20%); |
|||
} |
|||
} |
|||
} |
|||
@ -1,89 +0,0 @@ |
|||
<template> |
|||
<div class="house-wrap"> |
|||
<div class="house"> |
|||
<div class="floor"></div> |
|||
<div class="wall"> |
|||
<div class="window"></div> |
|||
<div class="door"> |
|||
<div class="door__square"></div> |
|||
<div class="door__line"></div> |
|||
<div class="door__square"></div> |
|||
</div> |
|||
<div class="window"></div> |
|||
</div> |
|||
<div class="top"></div> |
|||
<div class="circle"></div> |
|||
<div class="plastic"> |
|||
<div class="plastic__g"> |
|||
<div class="plastic__item"></div> |
|||
<div class="plastic__item"></div> |
|||
<div class="plastic__item"></div> |
|||
<div class="plastic__item"></div> |
|||
<div class="plastic__item"></div> |
|||
<div class="plastic__item"></div> |
|||
<div class="plastic__item"></div> |
|||
<div class="plastic__item"></div> |
|||
</div> |
|||
</div> |
|||
<div class="line"> |
|||
<div class="line__item"></div> |
|||
<div class="line__item"></div> |
|||
<div class="line__item"></div> |
|||
<div class="line__item"></div> |
|||
<div class="line__item"></div> |
|||
<div class="line__item"></div> |
|||
<div class="line__item"></div> |
|||
<div class="line__item"></div> |
|||
<div class="line__item"></div> |
|||
</div> |
|||
</div> |
|||
<div class="clouds"> |
|||
<div class="cloud"> |
|||
<div class="cloud__item"></div> |
|||
<div class="cloud__item"></div> |
|||
</div> |
|||
<div class="cloud"> |
|||
<div class="cloud__item"></div> |
|||
<div class="cloud__item"></div> |
|||
</div> |
|||
<div class="cloud"> |
|||
<div class="cloud__item"></div> |
|||
<div class="cloud__item"></div> |
|||
</div> |
|||
<div class="bird"></div> |
|||
</div> |
|||
<div class="birds"> |
|||
<div class="bird"></div> |
|||
<div class="bird"></div> |
|||
</div> |
|||
<div class="tree"> |
|||
<div class="tree__item"></div> |
|||
<div class="tree__item"></div> |
|||
<div class="tree__item"></div> |
|||
</div> |
|||
<div class="bush"> |
|||
<div class="bush__item"></div> |
|||
<div class="bush__item"></div> |
|||
</div> |
|||
<div class="dot"></div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import type { PropType } from 'vue'; |
|||
import { defineComponent } from 'vue'; |
|||
export default defineComponent({ |
|||
name: 'House', |
|||
props: { |
|||
size: { |
|||
type: Number as PropType<number>, |
|||
default: 600, |
|||
}, |
|||
}, |
|||
setup() { |
|||
return {}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
@import './index.less'; |
|||
</style> |
|||
@ -1,22 +0,0 @@ |
|||
<template> |
|||
<div class="welcome"> |
|||
<House /> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import House from '../house/index.vue'; |
|||
export default defineComponent({ |
|||
name: 'Welcome', |
|||
components: { House }, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.welcome { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 100%; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,37 @@ |
|||
<template> |
|||
<Card title="最新动态" v-bind="$attrs"> |
|||
<template #extra> |
|||
<a-button type="link" size="small">更多</a-button> |
|||
</template> |
|||
<List item-layout="horizontal" :data-source="items"> |
|||
<template #renderItem="{ item }"> |
|||
<ListItem> |
|||
<ListItemMeta> |
|||
<template #description> |
|||
{{ item.date }} |
|||
</template> |
|||
<template #title> {{ item.name }} <span v-html="item.desc"> </span> </template> |
|||
<template #avatar> |
|||
<Icon :icon="item.avatar" :size="30" /> |
|||
</template> |
|||
</ListItemMeta> |
|||
</ListItem> |
|||
</template> |
|||
</List> |
|||
</Card> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
import { Card, List } from 'ant-design-vue'; |
|||
import { dynamicInfoItems } from './data'; |
|||
import headerImg from '/@/assets/images/header.jpg'; |
|||
import { Icon } from '/@/components/Icon'; |
|||
|
|||
export default defineComponent({ |
|||
components: { Card, List, ListItem: List.Item, ListItemMeta: List.Item.Meta, Icon }, |
|||
setup() { |
|||
return { items: dynamicInfoItems, headerImg }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,100 +0,0 @@ |
|||
<template> |
|||
<CollapseContainer class="news-list" title="动态" :canExpan="false"> |
|||
<ScrollContainer> |
|||
<List> |
|||
<template v-for="item in newList" :key="item.id"> |
|||
<ListItem class="news-list__item"> |
|||
<ListItemMeta> |
|||
<template #avatar> |
|||
<img :src="headerImg" class="news-list__item-avatar" /> |
|||
</template> |
|||
<template #description> |
|||
<div class="news-list__item-desc"> |
|||
<div class="news-list__item-time mb-1"> |
|||
{{ item.sendTime }} |
|||
</div> |
|||
<div class="news-list__item-title mb-1"> |
|||
<span class="news-list__item-light">{{ item.sender }} </span>申请迭代 |
|||
<span class="news-list__item-light"> {{ item.title }} </span>发布 |
|||
</div> |
|||
<div class="news-list__item-cnte p-2"> |
|||
<span class="news-list__item-cnte__title"> {{ item.cnteId }}</span> |
|||
<br /> |
|||
Status: {{ item.cnteStas }} |
|||
<br /> |
|||
Repository: {{ item.cnteRepo }} |
|||
<br /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</ListItemMeta> |
|||
</ListItem> |
|||
</template> |
|||
</List> |
|||
</ScrollContainer> |
|||
</CollapseContainer> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { List } from 'ant-design-vue'; |
|||
import { CollapseContainer, ScrollContainer } from '/@/components/Container/index'; |
|||
import headerImg from '/@/assets/images/header.jpg'; |
|||
|
|||
import { newList } from '../data'; |
|||
export default defineComponent({ |
|||
components: { |
|||
List, |
|||
ListItem: List.Item, |
|||
ListItemMeta: List.Item.Meta, |
|||
CollapseContainer, |
|||
ScrollContainer, |
|||
}, |
|||
setup() { |
|||
return { newList, headerImg }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.news-list { |
|||
&__item { |
|||
&-avatar { |
|||
width: 35px; |
|||
height: 35px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
&-title { |
|||
font-size: 14px; |
|||
line-height: 22px; |
|||
color: #000; |
|||
opacity: 0.65; |
|||
} |
|||
|
|||
&-time { |
|||
font-size: 14px; |
|||
line-height: 22px; |
|||
color: #000; |
|||
opacity: 0.45; |
|||
} |
|||
|
|||
&-light { |
|||
font-size: 14px; |
|||
line-height: 22px; |
|||
color: #000; |
|||
opacity: 0.85; |
|||
} |
|||
|
|||
&-cnte { |
|||
background: #eef3fb; |
|||
border-radius: 2px; |
|||
opacity: 0.6; |
|||
|
|||
&__title { |
|||
font-size: 14px; |
|||
line-height: 22px; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,101 +0,0 @@ |
|||
<template> |
|||
<a-row class="prod-total"> |
|||
<template v-for="(item, index) in wokbProd" :key="item.type"> |
|||
<a-col :xs="12" :sm="6" class="prod-total__item" :class="`prod-total__item-${index}`"> |
|||
<div class="img" :class="`prod-total__item-${index}-img`"></div> |
|||
<div>{{ item.amount }}</div> |
|||
<span>{{ item.type }}</span> |
|||
</a-col> |
|||
</template> |
|||
</a-row> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { Row, Col } from 'ant-design-vue'; |
|||
|
|||
import { wokbProd } from '../data'; |
|||
// import {ProdTypeEnum} from '@/api/dashboard/model/wokbModel' |
|||
export default defineComponent({ |
|||
components: { [Row.name]: Row, [Col.name]: Col }, |
|||
setup() { |
|||
return { wokbProd }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.prod-total { |
|||
padding: 12px 4px 12px 12px; |
|||
background: #fff; |
|||
|
|||
&__item { |
|||
display: inline-block; |
|||
flex: 0 0 calc(25% - 8px); |
|||
padding: 20px 10px; |
|||
margin-right: 8px; |
|||
border-radius: 4px; |
|||
|
|||
span { |
|||
font-size: 14px; |
|||
line-height: 28px; |
|||
} |
|||
|
|||
div { |
|||
font-size: 26px; |
|||
} |
|||
|
|||
.img { |
|||
float: left; |
|||
width: 62px; |
|||
height: 62px; |
|||
} |
|||
|
|||
&-0 { |
|||
background: rgba(254, 97, 178, 0.1); |
|||
|
|||
&-img { |
|||
background: url(../../../../assets/images/dashboard/wokb/datashow1.png) no-repeat; |
|||
} |
|||
|
|||
div { |
|||
color: #fe61b2; |
|||
} |
|||
} |
|||
|
|||
&-1 { |
|||
background: rgba(254, 163, 64, 0.1); |
|||
|
|||
&-img { |
|||
background: url(../../../..//assets/images/dashboard/wokb/datashow2.png) no-repeat; |
|||
} |
|||
|
|||
div { |
|||
color: #fea340; |
|||
} |
|||
} |
|||
|
|||
&-2 { |
|||
background: rgba(172, 70, 255, 0.1); |
|||
|
|||
&-img { |
|||
background: url(../../../..//assets/images/dashboard/wokb/datashow3.png) no-repeat; |
|||
} |
|||
|
|||
div { |
|||
color: #9e55ff; |
|||
} |
|||
} |
|||
|
|||
&-3 { |
|||
background: rgba(0, 196, 186, 0.1); |
|||
|
|||
&-img { |
|||
background: url(../../../..//assets/images/dashboard/wokb/datashow4.png) no-repeat; |
|||
} |
|||
|
|||
div { |
|||
color: #00c4ba; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,35 @@ |
|||
<template> |
|||
<Card title="项目" v-bind="$attrs"> |
|||
<template #extra> |
|||
<a-button type="link" size="small">更多</a-button> |
|||
</template> |
|||
|
|||
<template v-for="item in items" :key="item"> |
|||
<CardGrid class="!md:w-1/3 !w-full"> |
|||
<span class="flex"> |
|||
<Icon :icon="item.icon" :color="item.color" size="30" /> |
|||
<span class="text-lg ml-4">{{ item.title }}</span> |
|||
</span> |
|||
<div class="flex mt-2 h-10 text-secondary"> {{ item.desc }} </div> |
|||
<div class="flex justify-between text-secondary"> |
|||
<span>{{ item.group }}</span> |
|||
<span>{{ item.date }}</span> |
|||
</div> |
|||
</CardGrid> |
|||
</template> |
|||
</Card> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
import { Card } from 'ant-design-vue'; |
|||
import { Icon } from '/@/components/Icon'; |
|||
import { groupItems } from './data'; |
|||
|
|||
export default defineComponent({ |
|||
components: { Card, CardGrid: Card.Grid, Icon }, |
|||
setup() { |
|||
return { items: groupItems }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<Card title="快捷导航" v-bind="$attrs"> |
|||
<template v-for="item in items" :key="item"> |
|||
<CardGrid> |
|||
<span class="flex flex-col items-center"> |
|||
<Icon :icon="item.icon" :color="item.color" size="20" /> |
|||
<span class="text-md mt-2">{{ item.title }}</span> |
|||
</span> |
|||
</CardGrid> |
|||
</template> |
|||
</Card> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
import { Card } from 'ant-design-vue'; |
|||
import { Icon } from '/@/components/Icon'; |
|||
import { navItems } from './data'; |
|||
|
|||
export default defineComponent({ |
|||
components: { Card, CardGrid: Card.Grid, Icon }, |
|||
setup() { |
|||
return { items: navItems }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<Card title="销售统计" :loading="loading"> |
|||
<div ref="chartRef" :style="{ width, height }"></div> |
|||
</Card> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, Ref, ref, watch } from 'vue'; |
|||
|
|||
import { Card } from 'ant-design-vue'; |
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
export default defineComponent({ |
|||
components: { Card }, |
|||
props: { |
|||
loading: Boolean, |
|||
width: { |
|||
type: String as PropType<string>, |
|||
default: '100%', |
|||
}, |
|||
height: { |
|||
type: String as PropType<string>, |
|||
default: '400px', |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
watch( |
|||
() => props.loading, |
|||
() => { |
|||
if (props.loading) { |
|||
return; |
|||
} |
|||
setOptions({ |
|||
backgroundColor: '#fff', |
|||
legend: { |
|||
bottom: 0, |
|||
data: ['Visits', 'Sales'], |
|||
}, |
|||
tooltip: {}, |
|||
radar: { |
|||
radius: '60%', |
|||
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: [ |
|||
{ |
|||
type: 'radar', |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
shadowBlur: 0, |
|||
shadowColor: 'rgba(0,0,0,.2)', |
|||
shadowOffsetX: 0, |
|||
shadowOffsetY: 10, |
|||
opacity: 1, |
|||
}, |
|||
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 }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -1,102 +0,0 @@ |
|||
<template> |
|||
<CollapseContainer class="shortcuts" title="快捷入口" :canExpan="false"> |
|||
<template #action> |
|||
<a-button size="small" type="link"> 新建 </a-button> |
|||
</template> |
|||
<a-row> |
|||
<template v-for="item in shortCuts" :key="item.img"> |
|||
<a-col :span="8" class="p-3 shortcuts__item"> |
|||
<img :src="item.img" class="mb-2 shortcuts__item-img" /> |
|||
<span>{{ item.name }}</span> |
|||
</a-col> |
|||
</template> |
|||
|
|||
<a-col :span="8" class="p-3 shortcuts__item"> |
|||
<span class="mb-2 shortcuts__item-all"> |
|||
<RightOutlined /> |
|||
</span> |
|||
<br /> |
|||
<span>查看全部</span> |
|||
</a-col> |
|||
</a-row> |
|||
</CollapseContainer> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { Row, Col } from 'ant-design-vue'; |
|||
import { CollapseContainer } from '/@/components/Container/index'; |
|||
|
|||
import { RightOutlined } from '@ant-design/icons-vue'; |
|||
import wokbImg1 from '/@/assets/images/dashboard/wokb/attendance.png'; |
|||
import wokbImg2 from '/@/assets/images/dashboard/wokb/overtime.png'; |
|||
import wokbImg3 from '/@/assets/images/dashboard/wokb/meal.png'; |
|||
import wokbImg4 from '/@/assets/images/dashboard/wokb/leave.png'; |
|||
import wokbImg5 from '/@/assets/images/dashboard/wokb/stamp.png'; |
|||
import wokbImg6 from '/@/assets/images/dashboard/wokb/travel.png'; |
|||
import wokbImg7 from '/@/assets/images/dashboard/wokb/performance.png'; |
|||
import wokbImg8 from '/@/assets/images/dashboard/wokb/approve.png'; |
|||
const shortCuts = [ |
|||
{ |
|||
img: wokbImg1, |
|||
name: '考勤记录', |
|||
}, |
|||
{ |
|||
img: wokbImg2, |
|||
name: '加班申请', |
|||
}, |
|||
{ |
|||
img: wokbImg3, |
|||
name: '餐补申请', |
|||
}, |
|||
{ |
|||
img: wokbImg4, |
|||
name: '请假', |
|||
}, |
|||
{ |
|||
img: wokbImg5, |
|||
name: '用章申请', |
|||
}, |
|||
{ |
|||
img: wokbImg6, |
|||
name: '差旅报销', |
|||
}, |
|||
{ |
|||
img: wokbImg7, |
|||
name: '绩效申请', |
|||
}, |
|||
{ |
|||
img: wokbImg8, |
|||
name: '审批', |
|||
}, |
|||
]; |
|||
export default defineComponent({ |
|||
components: { [Row.name]: Row, [Col.name]: Col, CollapseContainer, RightOutlined }, |
|||
setup() { |
|||
return { shortCuts }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.shortcuts { |
|||
&__item { |
|||
text-align: center; |
|||
|
|||
&-img { |
|||
width: 36px; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
&-all { |
|||
display: inline-block; |
|||
width: 36px; |
|||
height: 36px; |
|||
line-height: 36px; |
|||
color: #000; |
|||
cursor: pointer; |
|||
background: lightgrey; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,114 +0,0 @@ |
|||
<template> |
|||
<CollapseContainer class="todo-list" title="待办事项" :canExpan="false"> |
|||
<template #title> |
|||
<span> 待办事项 <span class="todo-list__total">30</span> </span> |
|||
</template> |
|||
|
|||
<List> |
|||
<template v-for="item in todoList" :key="item.id"> |
|||
<ListItem class="todo-list__item"> |
|||
<ListItemMeta> |
|||
<template #title> |
|||
<div> |
|||
<span class="todo-list__item-title">{{ item.title }}</span> |
|||
<span class="todo-list__item-memo">{{ item.memo }}</span> |
|||
</div> |
|||
</template> |
|||
<template #description> |
|||
<div class="todo-list__item-desc"> |
|||
提交人：{{ item.sbmter }} |
|||
<br /> |
|||
提交时间：{{ item.sbmtTime }} |
|||
</div> |
|||
</template> |
|||
</ListItemMeta> |
|||
<a-button type="link"> |
|||
<Tag color="blue"> 待审批 </Tag> |
|||
</a-button> |
|||
</ListItem> |
|||
</template> |
|||
</List> |
|||
<div class="todo-list__all"> |
|||
<Tooltip placement="topRight"> |
|||
<template #title> 查看更多 </template> |
|||
<EllipsisOutlined /> |
|||
</Tooltip> |
|||
</div> |
|||
</CollapseContainer> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { List, Tag, Tooltip } from 'ant-design-vue'; |
|||
import { CollapseContainer } from '/@/components/Container/index'; |
|||
|
|||
import { EllipsisOutlined } from '@ant-design/icons-vue'; |
|||
import { todoList } from '../data'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'TodoList', |
|||
components: { |
|||
CollapseContainer, |
|||
List, |
|||
ListItem: List.Item, |
|||
ListItemMeta: List.Item.Meta, |
|||
Tag, |
|||
Tooltip, |
|||
EllipsisOutlined, |
|||
}, |
|||
setup() { |
|||
return { todoList }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.todo-list { |
|||
position: relative; |
|||
|
|||
&__total { |
|||
display: inline-block; |
|||
width: 20px; |
|||
height: 20px; |
|||
font-size: 12px; |
|||
line-height: 20px; |
|||
color: #fff; |
|||
text-align: center; |
|||
background: rgba(255, 0, 0, 0.7); |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
&__all { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 10px; |
|||
height: 56px; |
|||
font-size: 24px; |
|||
line-height: 56px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
&__item { |
|||
padding: 8px; |
|||
|
|||
&-title { |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: 22px; |
|||
color: #1c1d21; |
|||
} |
|||
|
|||
&-memo { |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 22px; |
|||
color: #7c8087; |
|||
} |
|||
|
|||
&-desc { |
|||
font-size: 12px; |
|||
line-height: 22px; |
|||
color: #7c8087; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,37 @@ |
|||
<template> |
|||
<div class="lg:flex"> |
|||
<Avatar :src="headerImg" :size="72" class="!mx-auto !block" /> |
|||
<div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2"> |
|||
<h1 class="md:text-lg text-md">早安, Vben, 开始您一天的工作吧！</h1> |
|||
<span class="text-secondary"> 今日晴，20℃ - 32℃！ </span> |
|||
</div> |
|||
<div class="flex flex-1 justify-end md:mt-0 mt-4"> |
|||
<div class="flex flex-col justify-center text-right"> |
|||
<span class="text-secondary"> 待办 </span> |
|||
<span class="text-2xl">2/10</span> |
|||
</div> |
|||
|
|||
<div class="flex flex-col justify-center text-right md:mx-16 mx-12"> |
|||
<span class="text-secondary"> 项目 </span> |
|||
<span class="text-2xl">8</span> |
|||
</div> |
|||
<div class="flex flex-col justify-center text-right md:mr-10 mr-4"> |
|||
<span class="text-secondary"> 团队 </span> |
|||
<span class="text-2xl">300</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
|
|||
import { Avatar } from 'ant-design-vue'; |
|||
|
|||
import headerImg from '/@/assets/images/header.jpg'; |
|||
export default defineComponent({ |
|||
components: { Avatar }, |
|||
setup() { |
|||
return { headerImg }; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,156 @@ |
|||
interface GroupItem { |
|||
title: string; |
|||
icon: string; |
|||
color: string; |
|||
desc: string; |
|||
date: string; |
|||
group: string; |
|||
} |
|||
|
|||
interface NavItem { |
|||
title: string; |
|||
icon: string; |
|||
color: string; |
|||
} |
|||
|
|||
interface DynamicInfoItem { |
|||
avatar: string; |
|||
name: string; |
|||
date: string; |
|||
desc: string; |
|||
} |
|||
|
|||
export const navItems: NavItem[] = [ |
|||
{ |
|||
title: '首页', |
|||
icon: 'ion:home-outline', |
|||
color: '#1fdaca', |
|||
}, |
|||
{ |
|||
title: '仪表盘', |
|||
icon: 'ion:grid-outline', |
|||
color: '#bf0c2c', |
|||
}, |
|||
{ |
|||
title: '组件', |
|||
icon: 'ion:layers-outline', |
|||
color: '#e18525', |
|||
}, |
|||
{ |
|||
title: '系统管理', |
|||
icon: 'ion:settings-outline', |
|||
color: '#3fb27f', |
|||
}, |
|||
{ |
|||
title: '权限管理', |
|||
icon: 'ion:key-outline', |
|||
color: '#4daf1bc9', |
|||
}, |
|||
{ |
|||
title: '图表', |
|||
icon: 'ion:bar-chart-outline', |
|||
color: '#00d8ff', |
|||
}, |
|||
]; |
|||
|
|||
export const dynamicInfoItems: DynamicInfoItem[] = [ |
|||
{ |
|||
avatar: 'dynamic-avatar-1|svg', |
|||
name: '威廉', |
|||
date: '刚刚', |
|||
desc: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`, |
|||
}, |
|||
{ |
|||
avatar: 'dynamic-avatar-2|svg', |
|||
name: '艾文', |
|||
date: '1个小时前', |
|||
desc: `关注了 <a>威廉</a> `, |
|||
}, |
|||
{ |
|||
avatar: 'dynamic-avatar-3|svg', |
|||
name: '克里斯', |
|||
date: '1天前', |
|||
desc: `发布了 <a>个人动态</a> `, |
|||
}, |
|||
{ |
|||
avatar: 'dynamic-avatar-4|svg', |
|||
name: 'Vben', |
|||
date: '2天前', |
|||
desc: `发表文章 <a>如何编写一个Vite插件</a> `, |
|||
}, |
|||
{ |
|||
avatar: 'dynamic-avatar-5|svg', |
|||
name: '皮特', |
|||
date: '3天前', |
|||
desc: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`, |
|||
}, |
|||
{ |
|||
avatar: 'dynamic-avatar-6|svg', |
|||
name: '杰克', |
|||
date: '1周前', |
|||
desc: `关闭了问题 <a>如何运行项目</a> `, |
|||
}, |
|||
{ |
|||
avatar: 'dynamic-avatar-1|svg', |
|||
name: '威廉', |
|||
date: '1周前', |
|||
desc: `发布了 <a>个人动态</a> `, |
|||
}, |
|||
{ |
|||
avatar: 'dynamic-avatar-1|svg', |
|||
name: '威廉', |
|||
date: '2021-04-01 20:00', |
|||
desc: `推送了代码到 <a>Github</a>`, |
|||
}, |
|||
]; |
|||
|
|||
export const groupItems: GroupItem[] = [ |
|||
{ |
|||
title: 'Github', |
|||
icon: 'carbon:logo-github', |
|||
color: '', |
|||
desc: '不要等待机会，而要创造机会。', |
|||
group: '开源组', |
|||
date: '2021-04-01', |
|||
}, |
|||
{ |
|||
title: 'Vue', |
|||
icon: 'ion:logo-vue', |
|||
color: '#3fb27f', |
|||
desc: '现在的你决定将来的你。', |
|||
group: '算法组', |
|||
date: '2021-04-01', |
|||
}, |
|||
{ |
|||
title: 'Html5', |
|||
icon: 'ion:logo-html5', |
|||
color: '#e18525', |
|||
desc: '没有什么才能比努力更重要。', |
|||
group: '上班摸鱼', |
|||
date: '2021-04-01', |
|||
}, |
|||
{ |
|||
title: 'Angular', |
|||
icon: 'ion:logo-angular', |
|||
color: '#bf0c2c', |
|||
desc: '热情和欲望可以突破一切难关。', |
|||
group: 'UI', |
|||
date: '2021-04-01', |
|||
}, |
|||
{ |
|||
title: 'React', |
|||
icon: 'bx:bxl-react', |
|||
color: '#00d8ff', |
|||
desc: '健康的身体是实目标的基石。', |
|||
group: '技术牛', |
|||
date: '2021-04-01', |
|||
}, |
|||
{ |
|||
title: 'Js', |
|||
icon: 'ion:logo-javascript', |
|||
color: '#4daf1bc9', |
|||
desc: '路是走出来的，而不是空想出来的。', |
|||
group: '架构组', |
|||
date: '2021-04-01', |
|||
}, |
|||
]; |
|||
@ -1,48 +0,0 @@ |
|||
export const wokbProd = [ |
|||
{ |
|||
amount: '20', |
|||
type: '成品总数', |
|||
}, |
|||
{ |
|||
amount: '50', |
|||
type: '未发布', |
|||
}, |
|||
{ |
|||
amount: '80', |
|||
type: '发布中', |
|||
}, |
|||
{ |
|||
amount: '100', |
|||
type: '异常', |
|||
}, |
|||
]; |
|||
|
|||
export const todoList = (() => { |
|||
const ret: any[] = []; |
|||
for (let index = 0; index < 3; index++) { |
|||
ret.push({ |
|||
id: index, |
|||
sbmter: '张三', |
|||
sbmtTime: new Date().toLocaleString(), |
|||
title: '主要', |
|||
memo: '工作任务', |
|||
}); |
|||
} |
|||
return ret; |
|||
})(); |
|||
export const newList = (() => { |
|||
const ret: any[] = []; |
|||
for (let index = 0; index < 3; index++) { |
|||
ret.push({ |
|||
id: index, |
|||
sender: '李四', |
|||
sendTime: new Date().toLocaleString(), |
|||
title: '代码', |
|||
memo: '工作任务', |
|||
cnteId: `c${index}`, |
|||
cnteStas: 'opened', |
|||
cnteRepo: index, |
|||
}); |
|||
} |
|||
return ret; |
|||
})(); |
|||
@ -0,0 +1,107 @@ |
|||
<template> |
|||
<Card title="销售统计" :loading="loading"> |
|||
<div ref="chartRef" :style="{ width, height }"></div> |
|||
</Card> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, Ref, ref, watch } from 'vue'; |
|||
|
|||
import { Card } from 'ant-design-vue'; |
|||
import { useECharts } from '/@/hooks/web/useECharts'; |
|||
|
|||
export default defineComponent({ |
|||
components: { Card }, |
|||
props: { |
|||
loading: Boolean, |
|||
width: { |
|||
type: String as PropType<string>, |
|||
default: '100%', |
|||
}, |
|||
height: { |
|||
type: String as PropType<string>, |
|||
default: '400px', |
|||
}, |
|||
}, |
|||
setup(props) { |
|||
const chartRef = ref<HTMLDivElement | null>(null); |
|||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|||
watch( |
|||
() => props.loading, |
|||
() => { |
|||
if (props.loading) { |
|||
return; |
|||
} |
|||
setOptions({ |
|||
backgroundColor: '#fff', |
|||
legend: { |
|||
bottom: 0, |
|||
data: ['Visits', 'Sales'], |
|||
}, |
|||
tooltip: {}, |
|||
radar: { |
|||
radius: '60%', |
|||
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: [ |
|||
{ |
|||
type: 'radar', |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
shadowBlur: 0, |
|||
shadowColor: 'rgba(0,0,0,.2)', |
|||
shadowOffsetX: 0, |
|||
shadowOffsetY: 10, |
|||
opacity: 1, |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: [90, 50, 86, 40, 50, 20], |
|||
name: 'Visits', |
|||
itemStyle: { |
|||
color: '#9f8ed7', |
|||
}, |
|||
}, |
|||
{ |
|||
value: [70, 75, 70, 76, 20, 85], |
|||
name: 'Sales', |
|||
itemStyle: { |
|||
color: '#1edec5', |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}); |
|||
}, |
|||
{ immediate: true } |
|||
); |
|||
return { chartRef }; |
|||
}, |
|||
}); |
|||
</script> |
|||
Loading…
Reference in new issue