Min5203
4 years ago
14 changed files with 819 additions and 386 deletions
@ -0,0 +1,8 @@ |
|||||
|
import http from 'apis/axios'; |
||||
|
|
||||
|
const apiUrl = import.meta.env.VITE_API_URL; |
||||
|
const ptccsens = `${apiUrl}/ptccsens/v1.0`; |
||||
|
const ocr = `${ptccsens}/ocr`; |
||||
|
|
||||
|
// 发起申请
|
||||
|
export const bill = `${ocr}/bill`; |
||||
@ -0,0 +1,168 @@ |
|||||
|
<template> |
||||
|
<div v-if="data.info.length"> |
||||
|
<div class="w-full overflow-x-scroll"> |
||||
|
<table class="text-gray-500 mt-4 text-xs" v-if="props.id === 'taskTable'"> |
||||
|
<tr class="bg-gray-100"> |
||||
|
<td width="20%">任务名称</td> |
||||
|
<td width="16%">支出</td> |
||||
|
<td width="16%">占比</td> |
||||
|
<td width="16%">追加</td> |
||||
|
<td width="16%">操作</td> |
||||
|
</tr> |
||||
|
<tr v-for="item in data.info"> |
||||
|
<td>{{ item.taskName }}</td> |
||||
|
<td>{{ item.money }}</td> |
||||
|
<td>{{ item.percentage }}%</td> |
||||
|
<td> |
||||
|
<div v-if="!item.showField" @click="item.showField = true"> |
||||
|
{{ item.budget - 0 }} |
||||
|
</div> |
||||
|
<van-field |
||||
|
v-else-if="financeId - 0 !== 0 && item.showField" |
||||
|
v-model="item.budget" |
||||
|
type="number" |
||||
|
class="input-box" |
||||
|
@change="handleUpdateBudget(item)" |
||||
|
@blur="item.showField = false" |
||||
|
/> |
||||
|
</td> |
||||
|
<td> |
||||
|
<van-icon name="plus" @click="toApplication" /> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
<table class="text-gray-500 mt-4 text-xs" v-if="props.id === 'nameTable'"> |
||||
|
<tr class="bg-gray-100"> |
||||
|
<td width="15%">任务名称</td> |
||||
|
<td width="16%">预算(元)</td> |
||||
|
<td width="16%">占比(元)</td> |
||||
|
</tr> |
||||
|
<tr v-for="item in data.info"> |
||||
|
<td>{{ item.rowName }}</td> |
||||
|
<td>{{ item.percentage }}</td> |
||||
|
<td>{{ item.money }}</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
<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="暂无数据" /> |
||||
|
<van-dialog |
||||
|
v-model:show="data.show" |
||||
|
title="追加预算" |
||||
|
show-cancel-button |
||||
|
@confirm="handleAdd" |
||||
|
> |
||||
|
<van-field |
||||
|
:border="data.border" |
||||
|
v-model="data.appendBudget" |
||||
|
type="textarea" |
||||
|
class="appendBudget" |
||||
|
placeholder="追加预算" |
||||
|
/> |
||||
|
</van-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, reactive, onMounted, nextTick } from 'vue'; |
||||
|
import { taskExpense, rowExpense } from 'apis/finance'; |
||||
|
import { addBudget } from 'apis/projectFinance'; |
||||
|
|
||||
|
const projectId = useProjectId(); |
||||
|
const router = useRouter(); |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
id: { type: Object, default: () => {} }, |
||||
|
}); |
||||
|
console.log('props.id: ', props.id); |
||||
|
const data = reactive({ |
||||
|
info: [], |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
pages: 0, |
||||
|
show: false, |
||||
|
appendBudget: '', |
||||
|
auditInfo: {}, |
||||
|
border: true, |
||||
|
}); |
||||
|
|
||||
|
// 追加预算确认 |
||||
|
async function handleUpdateBudget(item) { |
||||
|
try { |
||||
|
const params = { |
||||
|
param: { |
||||
|
appendBudget: item.budget - 0, |
||||
|
financeId: item.financeId, |
||||
|
projectId: projectId.value, |
||||
|
}, |
||||
|
}; |
||||
|
await addBudget(params); |
||||
|
} catch (error) { |
||||
|
console.error('error: ', error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 操作,跳转到发起申请界面 |
||||
|
function toApplication() { |
||||
|
const routeValue = router.currentRoute.value; |
||||
|
const query = routeValue.query; |
||||
|
router.push({ path: '/Initiate-application', query }); |
||||
|
} |
||||
|
|
||||
|
// 获取echarts图表数据(任务支出) |
||||
|
async function getTaskExpense() { |
||||
|
const params = { param: { projectId: projectId.value } }; |
||||
|
const res = await taskExpense(params); |
||||
|
for (let i = 0; i < res.length; i++) { |
||||
|
res.showField = false; |
||||
|
} |
||||
|
data.info = res; |
||||
|
} |
||||
|
// 获取echarts图表数据(名目支出) |
||||
|
async function getRowExpense() { |
||||
|
const params = { param: { projectId: projectId.value } }; |
||||
|
const res = await rowExpense(params); |
||||
|
data.info = res; |
||||
|
} |
||||
|
function setData() { |
||||
|
if (props.id === 'taskTable') { |
||||
|
getTaskExpense(); |
||||
|
} else if (props.id === 'nameTable') { |
||||
|
getRowExpense(); |
||||
|
} |
||||
|
} |
||||
|
onMounted(() => { |
||||
|
nextTick(() => { |
||||
|
// handleFinanceOfProject(); |
||||
|
setData(); |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
table { |
||||
|
width: 120%; |
||||
|
td { |
||||
|
border: 0.5px solid #ccc; |
||||
|
padding: 0.5rem; |
||||
|
} |
||||
|
} |
||||
|
.input-box { |
||||
|
padding: 0 !important; |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
} |
||||
|
|
||||
|
.appendBudget { |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 4px; |
||||
|
margin: 5%; |
||||
|
width: 90%; |
||||
|
} |
||||
|
</style> |
||||
@ -1,141 +1,198 @@ |
|||||
<template> |
<template> |
||||
<!-- <div id="yield-chart"></div> --> |
<!-- <div id="yield-chart"></div> --> |
||||
<div :id="props.id" style="width:400px;height:260px"></div> |
<div :id="props.id" style="width: 400px; height: 260px"></div> |
||||
</template> |
</template> |
||||
|
|
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { onMounted} from 'vue'; |
import { onMounted } from 'vue'; |
||||
|
import { taskExpense, rowExpense, memberFinance } from 'apis/finance'; |
||||
|
const projectId = useProjectId(); |
||||
const props = defineProps({ id: { type: String, default: () => {} } }); |
const props = defineProps({ id: { type: String, default: () => {} } }); |
||||
|
|
||||
onMounted(()=>{ |
let oData = [ |
||||
if(props.id){ |
{ |
||||
var myChart = echarts.init(document.getElementById(props.id)); |
name: '办公费', |
||||
|
value: 36, |
||||
|
rate: 12, |
||||
|
}, |
||||
|
{ |
||||
|
name: '车辆费用', |
||||
|
value: 20, |
||||
|
rate: 20, |
||||
|
}, |
||||
|
{ |
||||
|
name: '差旅费33', |
||||
|
value: 15, |
||||
|
rate: -40, |
||||
|
}, |
||||
|
{ |
||||
|
name: '租赁费', |
||||
|
value: 10, |
||||
|
rate: -15, |
||||
|
}, |
||||
|
{ |
||||
|
name: '其他', |
||||
|
value: 9, |
||||
|
rate: 12, |
||||
|
}, |
||||
|
]; |
||||
|
// 获取echarts图表数据(任务支出) |
||||
|
async function getTaskExpense() { |
||||
|
const params = { param: { projectId: projectId.value } }; |
||||
|
const res = await taskExpense(params); |
||||
|
return changeData(res, 'taskName'); |
||||
|
} |
||||
|
// 获取echarts图表数据(名目支出) |
||||
|
async function getRowExpense() { |
||||
|
const params = { param: { projectId: projectId.value } }; |
||||
|
const res = await rowExpense(params); |
||||
|
return changeData(res, 'rowName'); |
||||
|
} |
||||
|
// 获取echarts图表数据(成员财务) |
||||
|
async function getMemberFinance() { |
||||
|
const params = { param: { projectId: projectId.value } }; |
||||
|
const res = await memberFinance(params); |
||||
|
return changeData(res, 'memberName'); |
||||
|
} |
||||
|
// 修改数据为optionData |
||||
|
function changeData(list, name) { |
||||
|
let optionsData = []; |
||||
|
for (let i = 0; i < list.length; i++) { |
||||
|
const data = { |
||||
|
name: list[i][name], |
||||
|
value: list[i].money - 0, |
||||
|
percentage: list[i].percentage, |
||||
|
}; |
||||
|
optionsData.push(data); |
||||
} |
} |
||||
const data = [ |
return optionsData; |
||||
{ |
} |
||||
name: '办公费', |
function setData() { |
||||
value: 36, |
if (props.id === 'taskEcharts') { |
||||
}, |
return getTaskExpense(); |
||||
{ |
} else if (props.id === 'nameEcharts') { |
||||
name: '车辆费用', |
return getRowExpense(); |
||||
value: 20, |
} else if (props.id === 'memberEcharts') { |
||||
}, |
return getMemberFinance(); |
||||
{ |
} else { |
||||
name: '差旅费', |
return oData; |
||||
value: 15, |
} |
||||
}, |
} |
||||
{ |
|
||||
name: '租赁费', |
function getTitleNum(list) { |
||||
value: 10, |
let num = 0; |
||||
}, |
for (let i = 0; i < list.length; i++) { |
||||
{ |
num += list[i].value; |
||||
name: '其他', |
} |
||||
value: 9, |
return num; |
||||
}, |
} |
||||
]; |
onMounted(async () => { |
||||
|
if (props.id) { |
||||
|
var myChart = echarts.init(document.getElementById(props.id)); |
||||
|
} |
||||
|
const data = await setData(); |
||||
|
const title = getTitleNum(data); |
||||
const option = { |
const option = { |
||||
title: { |
title: { |
||||
text: 100, |
text: title, |
||||
textStyle:{ |
textStyle: { |
||||
fontSize:17, |
fontSize: 17, |
||||
color:"black" |
color: 'black', |
||||
}, |
}, |
||||
textAlign:"center", |
textAlign: 'center', |
||||
x: '24%', |
x: '24%', |
||||
y: '35%', |
y: '35%', |
||||
}, |
}, |
||||
legend: { |
legend: { |
||||
type: 'plain', |
type: 'plain', |
||||
icon: 'circle', |
icon: 'circle', |
||||
orient: 'vertical', |
orient: 'vertical', |
||||
left: '55%', |
left: '55%', |
||||
top: '15%', |
top: '15%', |
||||
align: 'left', |
align: 'left', |
||||
itemGap: 15, |
itemGap: 15, |
||||
itemWidth: 10, // 设置宽度 |
itemWidth: 10, // 设置宽度 |
||||
itemHeight: 10, // 设置高度 |
itemHeight: 10, // 设置高度 |
||||
symbolKeepAspect: false, |
symbolKeepAspect: false, |
||||
textStyle: { |
textStyle: { |
||||
color: '#000', |
color: '#000', |
||||
rich: { |
rich: { |
||||
name: { |
name: { |
||||
verticalAlign: 'right', |
verticalAlign: 'right', |
||||
align: 'left', |
align: 'left', |
||||
width: 50, |
width: 50, |
||||
fontSize: 12 |
fontSize: 12, |
||||
}, |
}, |
||||
value: { |
value: { |
||||
align: 'left', |
align: 'left', |
||||
width: 40, |
width: 40, |
||||
fontSize: 12 |
fontSize: 12, |
||||
}, |
}, |
||||
count: { |
count: { |
||||
align: 'left', |
align: 'left', |
||||
width: 80, |
width: 80, |
||||
fontSize: 12 |
fontSize: 12, |
||||
}, |
}, |
||||
} |
|
||||
}, |
}, |
||||
data: data.map(item => item.name), |
}, |
||||
formatter: function(name) { |
data: data.map(item => item.name), |
||||
if (data && data.length) { |
formatter: function (name) { |
||||
for (var i = 0; i < data.length; i++) { |
if (data && data.length) { |
||||
if (name === data[i].name) { |
for (var i = 0; i < data.length; i++) { |
||||
return ( |
if (name === data[i].name) { |
||||
'{name| ' + |
return ( |
||||
name + |
'{name| ' + |
||||
'} | ' + |
name + |
||||
'{value| ' + |
'} | ' + |
||||
data[i].value + |
'{value| ' + |
||||
'%}' + |
data[i].percentage + |
||||
'{count| ' + |
'%}' + |
||||
data[i].value + |
'{count| ' + |
||||
'} ' |
data[i].value + |
||||
) |
'} ' |
||||
} |
); |
||||
} |
|
||||
} |
} |
||||
|
} |
||||
} |
} |
||||
|
}, |
||||
}, |
}, |
||||
series: [{ |
series: [ |
||||
|
{ |
||||
name: '数量', |
name: '数量', |
||||
type: 'pie', |
type: 'pie', |
||||
radius: ['40%', '55%'], |
radius: ['40%', '55%'], |
||||
center: ['25%', '40%'], |
center: ['25%', '40%'], |
||||
data: data, |
data: data, |
||||
label: { |
label: { |
||||
normal: { |
normal: { |
||||
show: false, |
show: false, |
||||
position: 'center', |
position: 'center', |
||||
formatter: '{text|{c}}\n{b}', |
formatter: '{text|{c}}\n{b}', |
||||
rich: { |
rich: { |
||||
text: { |
text: { |
||||
align: 'center', |
align: 'center', |
||||
verticalAlign: 'middle', |
verticalAlign: 'middle', |
||||
padding: 8, |
padding: 8, |
||||
fontSize: 30 |
fontSize: 30, |
||||
}, |
}, |
||||
value: { |
value: { |
||||
align: 'center', |
align: 'center', |
||||
verticalAlign: 'middle', |
verticalAlign: 'middle', |
||||
fontSize: 20 |
fontSize: 20, |
||||
} |
}, |
||||
} |
|
||||
}, |
}, |
||||
|
}, |
||||
}, |
}, |
||||
labelLine: { |
labelLine: { |
||||
normal: { |
normal: { |
||||
show: true |
show: true, |
||||
} |
}, |
||||
} |
}, |
||||
}] |
}, |
||||
}; |
], |
||||
myChart.setOption(option); |
}; |
||||
|
myChart.setOption(option); |
||||
}) |
}); |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped></style> |
||||
|
|
||||
</style> |
|
||||
|
|||||
Loading…
Reference in new issue