10 changed files with 997 additions and 359 deletions
@ -0,0 +1,130 @@ |
|||
<template> |
|||
<div id="barEcharts" style="width:370px;height:300px"></div> |
|||
</template> |
|||
<script setup> |
|||
import{onMounted} from 'vue'; |
|||
|
|||
onMounted(()=>{ |
|||
const myChart = echarts.init(document.getElementById('barEcharts')); |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
// Use axis to trigger tooltip |
|||
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow' |
|||
}, |
|||
}, |
|||
legend: { |
|||
icon: 'circle', |
|||
orient: 'horizontal', |
|||
itemGap: 40, |
|||
itemWidth: 14, |
|||
itemHeight: 14, |
|||
textStyle: { |
|||
fontSize: 14, |
|||
color: '#858585', |
|||
fontWeight: 400, |
|||
padding: [4, 0, 0, 0], |
|||
}, |
|||
data: ['A', 'B', 'P', 'E'], |
|||
}, |
|||
color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'], |
|||
grid: { |
|||
left: '3%', |
|||
right: '0', |
|||
bottom: '5%', |
|||
containLabel: false, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: '#F3F4F5', |
|||
}, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'E', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: true, |
|||
color: '#FFFFFF', |
|||
formatter: function (e) { |
|||
return e.value ? e.seriesName : ''; |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
borderRadius: [0, 0, 4, 4], |
|||
}, |
|||
barWidth: 20, |
|||
emphasis: { |
|||
focus: 'series', |
|||
}, |
|||
data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390], |
|||
}, |
|||
{ |
|||
name: 'P', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: true, |
|||
color: '#FFFFFF', |
|||
formatter: '{a}', |
|||
}, |
|||
emphasis: { |
|||
focus: 'series', |
|||
}, |
|||
data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330], |
|||
}, |
|||
{ |
|||
name: 'B', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: true, |
|||
color: '#FFFFFF', |
|||
formatter: '{a}', |
|||
}, |
|||
emphasis: { |
|||
focus: 'series', |
|||
}, |
|||
data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330], |
|||
}, |
|||
{ |
|||
name: 'A', |
|||
type: 'bar', |
|||
stack: 'total', |
|||
label: { |
|||
show: true, |
|||
color: '#FFFFFF', |
|||
formatter: '{a}', |
|||
}, |
|||
itemStyle: { |
|||
borderRadius: [4, 4, 0, 0], |
|||
}, |
|||
emphasis: { |
|||
focus: 'series', |
|||
}, |
|||
data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
myChart.setOption(option); |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,122 @@ |
|||
<template> |
|||
<div> |
|||
<div |
|||
v-if="data.info.list && data.info.list.length" |
|||
class="w-full overflow-x-scroll" |
|||
> |
|||
<table class="text-gray-500 mt-4 text-ms"> |
|||
<tr class="bg-gray-100 text-gray-400"> |
|||
<td class="name">申请人</td> |
|||
<td class="money">金额(元)</td> |
|||
<td class="time">时间</td> |
|||
<td class="remark">备注</td> |
|||
</tr> |
|||
<tr v-for="item in data.info.list" class="text-gray-500"> |
|||
<td>{{ item.submitName }}</td> |
|||
<td> |
|||
{{ (+item.money / 100).toFixed(2) }} |
|||
</td> |
|||
<td> |
|||
{{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }} |
|||
</td> |
|||
<td> |
|||
{{ item.remark }} |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<div class="w-1/2 mt-4 ml-48"> |
|||
<van-pagination |
|||
v-model="data.pageNum" |
|||
:items-per-page="data.pageSize" |
|||
:page-count="data.pages" |
|||
mode="simple" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<van-empty v-else description="暂无数据" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import dayjs from 'dayjs'; |
|||
import { personalHistory } from 'apis/finance'; |
|||
import { ref, reactive, onMounted, nextTick } from 'vue'; |
|||
|
|||
const data = reactive({ |
|||
info: {}, |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
pages: 0, |
|||
}); |
|||
|
|||
const projectId = useProjectId(); |
|||
const taskDetailId = useTaskId(); |
|||
const taskName = useTaskName(); |
|||
|
|||
/** |
|||
* 查看当前用户的费用申请历史信息（奖金） |
|||
* @param { Number } pageNum |
|||
* @param { Number } pageSize |
|||
* @param { String } projectId |
|||
* @param { String } name |
|||
*/ |
|||
async function handlePersonalHistory() { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
pageNum: data.pageNum, |
|||
pageSize: data.pageSize, |
|||
projectId: projectId.value, |
|||
taskDetailId: taskDetailId.value, |
|||
taskName: taskName.value, |
|||
type: 1, |
|||
}, |
|||
}; |
|||
const res = await personalHistory(params); |
|||
data.info = res; |
|||
data.pageNum = res.pageNum ? +res.pageNum : 1; |
|||
data.pageSize = res.pageSize ? +res.pageSize : 10; |
|||
data.pages = res.pages ? +res.pages : 0; |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
} |
|||
|
|||
function confirm() { |
|||
alert('确认放款'); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
handlePersonalHistory(); |
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="less"> |
|||
table { |
|||
width: 500px; |
|||
td { |
|||
border: 0.5px solid #ccc; |
|||
padding: 0.85rem; |
|||
width: 5.9375rem; |
|||
} |
|||
.name { |
|||
width: 100px; |
|||
} |
|||
.money { |
|||
width: 100px; |
|||
} |
|||
.time { |
|||
width: 170px; |
|||
} |
|||
.remark { |
|||
width: 120px; |
|||
} |
|||
} |
|||
|
|||
.input-box { |
|||
padding: 0 !important; |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,155 @@ |
|||
<template> |
|||
<div> |
|||
<div |
|||
v-if="data.info.list && data.info.list.length" |
|||
class="w-full overflow-x-scroll" |
|||
> |
|||
<table class="text-gray-500 mt-4 text-ms"> |
|||
<tr class="bg-gray-100 text-gray-400"> |
|||
<td class="name">申请人</td> |
|||
<td class="money">金额(元)</td> |
|||
<td class="time">时间</td> |
|||
<td class="status">状态</td> |
|||
</tr> |
|||
<tr v-for="item in data.info.list" class="text-gray-500"> |
|||
<td>{{ item.submitName }}</td> |
|||
<td> |
|||
<!-- v-if="!item.showBudgetEdit" --> |
|||
{{ (+item.money / 100).toFixed(2) }} |
|||
<!-- <van-field |
|||
v-else |
|||
v-model="item.budget" |
|||
type="number" |
|||
class="input-box" |
|||
@change="handleUpdateFinance(item)" |
|||
@blur="item.showBudgetEdit = false" |
|||
/> --> |
|||
</td> |
|||
<td> |
|||
{{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }} |
|||
</td> |
|||
<td> |
|||
<!-- <div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true"> --> |
|||
<span v-if="item.applyType - 0 === 0" class="text-gray-500"> |
|||
待审核 |
|||
</span> |
|||
<span v-else-if="item.applyType - 0 === 1" class="text-gray-500"> |
|||
已通过 |
|||
</span> |
|||
<span v-else-if="item.applyType - 0 === 2" class="text-red-500"> |
|||
已驳回 |
|||
</span> |
|||
<span v-else-if="item.applyType - 0 === 3" class="text-gray-500"> |
|||
待放款 |
|||
</span> |
|||
<van-button |
|||
v-else-if="item.applyType - 0 === 4" |
|||
type="success" |
|||
size="mini" |
|||
class="rounded" |
|||
@click="confirm" |
|||
> |
|||
确认 |
|||
</van-button> |
|||
<span v-else-if="item.applyType - 0 === 5" class="text-green-500"> |
|||
已确认 |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<div class="w-1/2 mt-4 ml-48"> |
|||
<van-pagination |
|||
v-model="data.pageNum" |
|||
:items-per-page="data.pageSize" |
|||
:page-count="data.pages" |
|||
mode="simple" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<van-empty v-else description="暂无数据" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import dayjs from 'dayjs'; |
|||
import { personalHistory } from 'apis/finance'; |
|||
import { ref, reactive, onMounted, nextTick } from 'vue'; |
|||
|
|||
const data = reactive({ |
|||
info: {}, |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
pages: 0, |
|||
}); |
|||
|
|||
const projectId = useProjectId(); |
|||
const taskDetailId = useTaskId(); |
|||
const taskName = useTaskName(); |
|||
|
|||
/** |
|||
* 查看当前用户的费用申请历史信息（奖金） |
|||
* @param { Number } pageNum |
|||
* @param { Number } pageSize |
|||
* @param { String } projectId |
|||
* @param { String } name |
|||
*/ |
|||
async function handlePersonalHistory() { |
|||
try { |
|||
const params = { |
|||
param: { |
|||
pageNum: data.pageNum, |
|||
pageSize: data.pageSize, |
|||
projectId: projectId.value, |
|||
taskDetailId: taskDetailId.value, |
|||
taskName: taskName.value, |
|||
type: 0, |
|||
}, |
|||
}; |
|||
const res = await personalHistory(params); |
|||
data.info = res; |
|||
data.pageNum = res.pageNum ? +res.pageNum : 1; |
|||
data.pageSize = res.pageSize ? +res.pageSize : 10; |
|||
data.pages = res.pages ? +res.pages : 0; |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
} |
|||
} |
|||
|
|||
function confirm() { |
|||
alert('确认放款'); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
handlePersonalHistory(); |
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped lang="less"> |
|||
table { |
|||
width: 500px; |
|||
td { |
|||
border: 0.5px solid #ccc; |
|||
padding: 0.85rem; |
|||
width: 5.9375rem; |
|||
} |
|||
.name { |
|||
width: 100px; |
|||
} |
|||
.money { |
|||
width: 100px; |
|||
} |
|||
.time { |
|||
width: 170px; |
|||
} |
|||
.status { |
|||
width: 120px; |
|||
} |
|||
} |
|||
|
|||
.input-box { |
|||
padding: 0 !important; |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<!-- <div id="yield-chart"></div> --> |
|||
<div :id="props.id" style="width:400px;height:260px"></div> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
import { onMounted} from 'vue'; |
|||
const props = defineProps({ id: { type: Object, default: () => {} } }); |
|||
|
|||
onMounted(()=>{ |
|||
if(props.id){ |
|||
var myChart = echarts.init(document.getElementById(props.id)); |
|||
} |
|||
|
|||
// |
|||
const data = [ |
|||
{ |
|||
name: '办公费', |
|||
value: 36, |
|||
rate: 12 |
|||
}, |
|||
{ |
|||
name: '车辆费用', |
|||
value: 20, |
|||
rate: 20 |
|||
}, |
|||
{ |
|||
name: '差旅费', |
|||
value: 15, |
|||
rate: -40 |
|||
}, |
|||
{ |
|||
name: '租赁费', |
|||
value: 10, |
|||
rate: -15 |
|||
}, |
|||
{ |
|||
name: '其他', |
|||
value: 9, |
|||
rate: 12 |
|||
}, |
|||
]; |
|||
const option = { |
|||
title: { |
|||
text: 100, |
|||
textStyle:{ |
|||
fontSize:17, |
|||
color:"black" |
|||
}, |
|||
textAlign:"center", |
|||
x: '24%', |
|||
y: '35%', |
|||
}, |
|||
legend: { |
|||
type: 'plain', |
|||
icon: 'circle', |
|||
orient: 'vertical', |
|||
left: '55%', |
|||
top: '15%', |
|||
align: 'left', |
|||
itemGap: 15, |
|||
itemWidth: 10, // 设置宽度 |
|||
itemHeight: 10, // 设置高度 |
|||
symbolKeepAspect: false, |
|||
textStyle: { |
|||
color: '#000', |
|||
rich: { |
|||
name: { |
|||
verticalAlign: 'right', |
|||
align: 'left', |
|||
width: 50, |
|||
fontSize: 12 |
|||
}, |
|||
value: { |
|||
align: 'left', |
|||
width: 40, |
|||
fontSize: 12 |
|||
}, |
|||
count: { |
|||
align: 'left', |
|||
width: 80, |
|||
fontSize: 12 |
|||
}, |
|||
} |
|||
}, |
|||
data: data.map(item => item.name), |
|||
formatter: function(name) { |
|||
if (data && data.length) { |
|||
for (var i = 0; i < data.length; i++) { |
|||
if (name === data[i].name) { |
|||
return ( |
|||
'{name| ' + |
|||
name + |
|||
'} | ' + |
|||
'{value| ' + |
|||
data[i].value + |
|||
'%}' + |
|||
'{count| ' + |
|||
data[i].value + |
|||
'} ' |
|||
) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
series: [{ |
|||
name: '数量', |
|||
type: 'pie', |
|||
radius: ['40%', '55%'], |
|||
center: ['25%', '40%'], |
|||
data: data, |
|||
label: { |
|||
normal: { |
|||
show: false, |
|||
position: 'center', |
|||
formatter: '{text|{c}}\n{b}', |
|||
rich: { |
|||
text: { |
|||
align: 'center', |
|||
verticalAlign: 'middle', |
|||
padding: 8, |
|||
fontSize: 30 |
|||
}, |
|||
value: { |
|||
align: 'center', |
|||
verticalAlign: 'middle', |
|||
fontSize: 20 |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
labelLine: { |
|||
normal: { |
|||
show: true |
|||
} |
|||
} |
|||
}] |
|||
}; |
|||
myChart.setOption(option); |
|||
|
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue