|
|
@@ -1,44 +1,233 @@
|
|
|
<template>
|
|
|
- <div class="_home">
|
|
|
- <ul>
|
|
|
- <li v-for="(item, index) in reactiveData.routes" :key="index" @click="routeMenuClick(item)">
|
|
|
- <p>{{ item.name }}</p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <div class="homeBox">
|
|
|
+ <div class="leftBox">
|
|
|
+ <div class="topBox">
|
|
|
+ <div>
|
|
|
+ <div class="header">
|
|
|
+ <ul>
|
|
|
+ <li class="active">公司动态<i class="corner">4</i></li>
|
|
|
+ <li>通知公告</li>
|
|
|
+ <li>学习中心</li>
|
|
|
+ </ul>
|
|
|
+ <span class="subTitle">
|
|
|
+ <span>更多</span>
|
|
|
+ <i class="arrowRight"><ArrowRightBold /> </i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="" />
|
|
|
+ <p class="title">万维空间17个项目获土地利用优秀成...</p>
|
|
|
+ <p class="time">2023-10-30</p>
|
|
|
+ <p class="desc">
|
|
|
+ 近日，浙江省土地学会发布《关于开展2023年土地利用优秀成果奖评选的通知》...
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="" />
|
|
|
+ <p class="title">万维空间17个项目获土地利用优秀成...</p>
|
|
|
+ <p class="time">2023-10-30</p>
|
|
|
+ <p class="desc">
|
|
|
+ 近日，浙江省土地学会发布《关于开展2023年土地利用优秀成果奖评选的通知》...
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="header">
|
|
|
+ <span class="title">常用功能</span>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in functions" :key="index">
|
|
|
+ <img src="" />
|
|
|
+ <p class="title">{{ item['title'] }}</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottomBox">
|
|
|
+ <div>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in signs" :key="index">
|
|
|
+ <span class="circle">{{ item['icon'] }}</span>
|
|
|
+ <div>
|
|
|
+ <p class="title">{{ item['title'] }}</p>
|
|
|
+ <div class="numberBox">
|
|
|
+ <span class="number">{{ item['value'] }}</span>
|
|
|
+ <span class="unit">{{ item['unit'] }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="header">
|
|
|
+ <span class="title" style="font-size: 17px">近五年签约历史趋势</span>
|
|
|
+ </div>
|
|
|
+ <div class="content" ref="echartRef"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightBox">
|
|
|
+ <div></div>
|
|
|
+ <div>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <p class="number" style="color: #f83535">8</p>
|
|
|
+ <p class="title">待办</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="number">8</p>
|
|
|
+ <p class="title">已办</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="number">8</p>
|
|
|
+ <p class="title">草稿</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="header">
|
|
|
+ <span class="title">回款信息</span>
|
|
|
+ <span class="subTitle">
|
|
|
+ <span>更多</span>
|
|
|
+ <i class="arrowRight"><ArrowRightBold /> </i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(v, i) in 20" :key="i">
|
|
|
+ <div>
|
|
|
+ <span>已回款：</span>
|
|
|
+ <span>¥6200</span>
|
|
|
+ <span>生态修复行动方案</span>
|
|
|
+ </div>
|
|
|
+ <span>10/28</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div></div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-import { useRouter } from 'vue-router'
|
|
|
+import * as echarts from 'echarts'
|
|
|
+
|
|
|
defineOptions({ name: 'Home' })
|
|
|
+onMounted(() => {})
|
|
|
|
|
|
-//routes除去首页外的路由
|
|
|
-const reactiveData: any = reactive({
|
|
|
- routes: []
|
|
|
-})
|
|
|
-const router = useRouter()
|
|
|
-const initMenus = async () => {
|
|
|
- let locals: any = localStorage.getItem('roleRouters')
|
|
|
- let roleRouters = JSON.parse(JSON.parse(locals).v)[0].children
|
|
|
- roleRouters = JSON.parse(JSON.stringify(roleRouters))
|
|
|
- reactiveData.routes = roleRouters.slice(1, roleRouters.length)
|
|
|
+const functions = ref<
|
|
|
+ {
|
|
|
+ title: string
|
|
|
+ icon: any
|
|
|
+ key: string
|
|
|
+ }[]
|
|
|
+>([
|
|
|
+ { title: '驾驶舱', icon: '', key: '' },
|
|
|
+ { title: '差旅报销', icon: '', key: '' },
|
|
|
+ { title: '普通报销', icon: '', key: '' },
|
|
|
+ { title: '用款申请', icon: '', key: '' },
|
|
|
+ { title: '合同签订', icon: '', key: '' },
|
|
|
+ { title: '开票申请', icon: '', key: '' },
|
|
|
+ { title: '添加功能', icon: '', key: '' }
|
|
|
+])
|
|
|
+const signs = ref<
|
|
|
+ {
|
|
|
+ icon: string
|
|
|
+ title: string
|
|
|
+ value: number
|
|
|
+ unit: string
|
|
|
+ }[]
|
|
|
+>([
|
|
|
+ { icon: '签', title: '2023年度签约', value: 15005.65, unit: '万元' },
|
|
|
+ { icon: '回', title: '2023年度回款', value: 15005.65, unit: '万元' },
|
|
|
+ { icon: '净', title: '2023年度净合同额', value: 15005.65, unit: '万元' },
|
|
|
+ { icon: '拓', title: '2023年度新开拓', value: 15005.65, unit: '万元' },
|
|
|
+ { icon: '应', title: '总应收款', value: 15005.65, unit: '万元' },
|
|
|
+ { icon: '余', title: '总合同余额', value: 15005.65, unit: '万元' }
|
|
|
+])
|
|
|
+
|
|
|
+const category: number[] = []
|
|
|
+const barData: number[] = []
|
|
|
+const dottedBase: Date = new Date()
|
|
|
+
|
|
|
+for (var i = 0; i < 10; i++) {
|
|
|
+ category.push(dottedBase.getFullYear() - 1)
|
|
|
+ var b = Math.random() * 200
|
|
|
+ barData.push(b)
|
|
|
}
|
|
|
-const routeMenuClick = async (item: any) => {
|
|
|
- //跳转路由
|
|
|
- let c = {}
|
|
|
- if (item.children) {
|
|
|
- c = router.resolve({
|
|
|
- path: item.path + '/' + item.children[0].path
|
|
|
- })
|
|
|
- } else {
|
|
|
- c = router.resolve({
|
|
|
- path: item.path
|
|
|
- })
|
|
|
- }
|
|
|
- router.push(c.href)
|
|
|
- // window.open(c.href, '_blank')
|
|
|
+
|
|
|
+// option
|
|
|
+const echartOption: echarts.EChartsOption = {
|
|
|
+ title: [
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ subtext: '单位：万元',
|
|
|
+ subtextStyle: {
|
|
|
+ color: '#8B969C',
|
|
|
+ lineHeight: 20
|
|
|
+ },
|
|
|
+ right: 20,
|
|
|
+ top: 5
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '16%'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: category,
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: '#E3E3E3'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#666'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'bar',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 20,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: 10,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#7BB5FA' },
|
|
|
+ { offset: 1, color: '#448ADC' }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: barData
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
-/** 初始化 **/
|
|
|
+const echartRef = ref(null)
|
|
|
onMounted(() => {
|
|
|
- initMenus()
|
|
|
+ const myChart = echarts.init(echartRef.value)
|
|
|
+ myChart.setOption(echartOption)
|
|
|
})
|
|
|
</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import './index.scss';
|
|
|
+</style>
|
