|
@@ -0,0 +1,154 @@
|
|
|
+<template>
|
|
|
+ <div class="oa-sys-list-view">
|
|
|
+ <el-row class="up-box">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="title">板块经营情况</div>
|
|
|
+ <el-table class="detail-table" :data="segmentData" style="width: 100%" max-height="400">
|
|
|
+ <el-table-column prop="segment" label="板块" />
|
|
|
+ <el-table-column prop="signAmount" label="本年签约" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.signAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="returnAmount" label="本年回款" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.returnAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="newAmount" label="本年开拓" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.newAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="receivableAmount" label="应收款" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.receivableAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="contractBalance" label="合同余额" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.contractBalance) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="subAmount" label="分包额" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.subAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="subPayed" label="分包已支付" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.subPayed) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="subToPay" label="分包待支付" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.subToPay) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="down-box" justify="space-between">
|
|
|
+ <el-col :span="15">
|
|
|
+ <div class="title">部门经营情况</div>
|
|
|
+ <el-table class="detail-table" :data="deptData" style="width: 100%" max-height="400">
|
|
|
+ <el-table-column prop="deptName" label="部门" />
|
|
|
+ <el-table-column prop="signAmount" label="本年签约" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.signAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="returnAmount" label="本年回款" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.returnAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="newAmount" label="本年开拓" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.newAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="receivableAmount" label="应收款" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.receivableAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="contractBalance" label="合同余额" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.contractBalance) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="memberCount" label="部门人数" />
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="title">人员经营情况</div>
|
|
|
+ <el-table class="detail-table" :data="personData" style="width: 100%" max-height="400">
|
|
|
+ <el-table-column prop="nickname" label="人员" />
|
|
|
+ <el-table-column prop="signAmount" label="本年签约" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.signAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="returnAmount" label="本年回款" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.returnAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="newAmount" label="本年开拓" sortable>
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ unitConversion(scope.row.newAmount) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+/**
|
|
|
+ * @description 经营看板
|
|
|
+ */
|
|
|
+
|
|
|
+defineOptions({ name: 'BusinessBoard' })
|
|
|
+
|
|
|
+import {
|
|
|
+ ISegment,
|
|
|
+ IDept,
|
|
|
+ IPerson,
|
|
|
+ getSegmentData,
|
|
|
+ getDeptData,
|
|
|
+ getPersonData,
|
|
|
+ unitConversion
|
|
|
+} from './api'
|
|
|
+
|
|
|
+const segmentData = ref<ISegment[]>([])
|
|
|
+const deptData = ref<IDept[]>([])
|
|
|
+const personData = ref<IPerson[]>([])
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ segmentData.value = await getSegmentData()
|
|
|
+ deptData.value = await getDeptData()
|
|
|
+ personData.value = await getPersonData()
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.oa-sys-list-view {
|
|
|
+ .title {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #121518;
|
|
|
+ }
|
|
|
+ .down-box {
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ :deep(.el-table__header) {
|
|
|
+ .el-table__cell {
|
|
|
+ color: #233755;
|
|
|
+ background-color: #e5f0fb !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|