You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.6 KiB
141 lines
4.6 KiB
<template>
|
|
<div class="mb-60">
|
|
<!-- 财务审批页面 -->
|
|
<div class="bg-white p-4 flex text-gray-500 flex-col d_jump">
|
|
<div>
|
|
<span class="font-semibold" id="finance-audit">财务审批</span> <span class="ml-2 text-xs">对员工提交的申请进行审批</span>
|
|
</div>
|
|
<Search />
|
|
<FinanceExamine />
|
|
</div>
|
|
<!-- 财务统计页面 -->
|
|
<div class="bg-white p-4 mt-5 text-gray-500 flex-col">
|
|
<div>
|
|
<span class="font-semibold" id="finance-statistical">财务统计</span>
|
|
<span class="ml-2">财务明细统计查看</span>
|
|
</div>
|
|
<!-- 任务支出统计 -->
|
|
<div class="h-64 overflow-hidden">
|
|
<div class="mt-5 flex justify-between">
|
|
<div>
|
|
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
|
|
<span>任务支出统计</span>
|
|
</div>
|
|
<div>
|
|
<van-button :type="taskState ? 'primary' : 'default'" size="mini" @click="taskState = true">图表</van-button>
|
|
<van-button :type="!taskState ? 'primary' : 'default'" size="mini" @click="taskState = false">表格</van-button>
|
|
</div>
|
|
</div>
|
|
<!-- 任务支出统计的图表展示 -->
|
|
<div v-show="taskState">
|
|
<!-- <van-empty description="暂无图表数据信息" /> -->
|
|
<RingEcharts class="w-full h-full" id="taskEcharts"/>
|
|
</div>
|
|
<!-- 任务支出统计的表格展示 -->
|
|
<div v-show="!taskState">
|
|
<FinanceExamine />
|
|
</div>
|
|
</div>
|
|
<!-- 名目支出统计 -->
|
|
<div class="h-64 overflow-hidden">
|
|
<div class="mt-5 flex justify-between">
|
|
<div>
|
|
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
|
|
<span>名目支出统计</span>
|
|
</div>
|
|
<div>
|
|
<van-button :type="nameState ? 'primary' : 'default'" size="mini" @click="nameState = true">图表</van-button>
|
|
<van-button :type="!nameState ? 'primary' : 'default'" size="mini" @click="nameState = false">表格</van-button>
|
|
</div>
|
|
</div>
|
|
<!-- 名目支出统计的图表展示 -->
|
|
<div v-show="nameState">
|
|
<!-- <van-empty description="暂无图表数据信息" /> -->
|
|
<RingEcharts class="w-full h-full" id="nameEcharts"/>
|
|
</div>
|
|
<!-- 名目支出统计的表格展示 -->
|
|
<div v-show="!nameState">
|
|
<FinanceExamine />
|
|
</div>
|
|
</div>
|
|
<!-- 成员财务图 -->
|
|
<div class="h-64 overflow-hidden">
|
|
<div>
|
|
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
|
|
<span>成员财务图</span>
|
|
</div>
|
|
<RingEcharts class="w-full h-full" id="memberEcharts"/>
|
|
</div>
|
|
<!-- 时间财务图 -->
|
|
<div class="overflow-hidden">
|
|
<div>
|
|
<span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
|
|
<span>时间财务图</span>
|
|
</div>
|
|
<BarEcharts class="w-full h-full mt-5" />
|
|
|
|
<!-- 没有数据展示空组件 -->
|
|
<!-- <van-empty description="暂无图表数据信息" /> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<ul class="menu">
|
|
<a href="#finance-audit">财务审批</a>
|
|
<a href="#finance-statistical">财务统计</a>
|
|
</ul>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
layout: 'default',
|
|
};
|
|
</script>
|
|
|
|
<script setup>
|
|
import {ref} from 'vue'
|
|
const taskState = ref(true);
|
|
const nameState = ref(true);
|
|
|
|
function onClickLeft(){
|
|
console.log('返回上一页')
|
|
}
|
|
|
|
function jump(index) {
|
|
let jump = document.querySelectorAll('.d_jump')
|
|
// 获取需要滚动的距离
|
|
let total = jump[index].offsetTop
|
|
// Chrome
|
|
document.body.scrollTop = total
|
|
// Firefox
|
|
document.documentElement.scrollTop = total
|
|
// Safari
|
|
window.pageYOffset = total
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.menu{
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 15px;
|
|
z-index: 99
|
|
}
|
|
.menu a {
|
|
display: block;
|
|
width: 72px;
|
|
color: #fff;
|
|
background: rgba(25, 137, 250, 0.6);
|
|
padding: 8px 20px;
|
|
border-radius: 30px 0 0 30px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.van-button--mini{
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
.van-button--mini+.van-button--mini{
|
|
margin-left: 0px;
|
|
}
|
|
</style>
|
|
|