Commit 42a0a540 authored by 沈翠玲's avatar 沈翠玲

数据大屏

parent 57fb2cd3
......@@ -14,4 +14,8 @@ export const getReturnRateByPlatform = (params) => {
// 回款金额 总金额
export const getReturn = (params) => {
return request.get('/Loan/getReturn', params);
};
// 回款金额 总金额
export const getLoanKanBanTotal = (params) => {
return request.get('Loan/getLoanKanBanTotal', params);
};
\ No newline at end of file
......@@ -19,7 +19,7 @@ getReturnRateByPlatform().then(res => {
const arr = res.result
arr.sort((a,b) => a.rate - b.rate)
salvProName.value = arr.map(v => v.loanPlatform)
salvProValue.value = arr.map(v => v.rate)
salvProValue.value = arr.map(v => v.rate?.toFixed(2))
}
})
......
......@@ -5,13 +5,14 @@
</div>
</template>
<script setup lang="ts">
<script setup >
import dayjs from "dayjs";
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";
const initDate = (): string[] => {
const dateList: string[] = [];
const props = defineProps({
dayActiveName: String
});
const initDate = () => {
const dateList = [];
let startDate = dayjs();
const endDate = startDate.add(30, "day");
while (startDate.isBefore(endDate)) {
......@@ -31,12 +32,12 @@ const data = {
})
};
const option: ECOption = {
const option = {
tooltip: {
trigger: "axis",
confine: true,
formatter: params => {
let tipData = (params as { name: string; value: string }[])[0];
let tipData = params[0];
let html = `<div class="line-chart-bg">
<span style="">${tipData.name} <i >${tipData.value}</i> 人次拨打</span>
</div>`;
......@@ -80,7 +81,7 @@ const option: ECOption = {
data: initDate()
}
],
yAxis: data.unit.map((_val: string, index: number) => {
yAxis: data.unit.map((_val, index) => {
return {
name: "(每天拨打记录总额)",
nameTextStyle: {
......@@ -105,7 +106,7 @@ const option: ECOption = {
show: true,
color: "#7ec7ff",
padding: 0,
formatter: function (value: string) {
formatter: function (value) {
if (Number(value) >= 10000) {
value = Number(value) / 10000 + "w";
}
......
......@@ -148,6 +148,23 @@
height: 252px;
background: #100c476b;
padding-top: 54px;
.tabs {
border-radius: 5px;
position: absolute;
border: 1px solid #0350e9;
right: 3px;
top: 3px;
color: #fff;
cursor: pointer;;
overflow: hidden;
.tab-item {
padding: 2px 20px;
border: 1px solid #0350e9;
&.active{
background: #0350e9;
}
}
}
}
.dataScreen-map-title {
position: absolute;
......
......@@ -16,23 +16,23 @@
</div>
<div class="dataScreen-Number flex justify-between">
<div class="number-box">
<p class="number-value text-white">1222</p>
<p class="number-value text-white">{{staticNumber.caseNum}}</p>
<p class="number-title text-lg">案件总数</p>
</div>
<div class="number-box">
<p class="number-value text-white">1222</p>
<p class="number-value text-white">{{staticNumber.borrowerNum}}</p>
<p class="number-title text-lg">案件人数</p>
</div>
<div class="number-box">
<p class="number-value text-white">122002</p>
<p class="number-value text-white">{{staticNumber.amount}}</p>
<p class="number-title text-lg">案件总额</p>
</div>
<div class="number-box">
<p class="number-value text-white">422002</p>
<p class="number-value text-white">{{staticNumber.sumRepayTotal}}</p>
<p class="number-title text-lg">回款金额</p>
</div>
<div class="number-box">
<p class="number-value text-white">78%</p>
<p class="number-value text-white">{{staticNumber.rate?.toFixed(2)}}%</p>
<p class="number-title text-lg">回款率</p>
</div>
</div>
......@@ -66,21 +66,22 @@
</div>
</div>
<div class="dataScreen-cb">
<div class="flex justify-between">
<div class="dataScreen-main-title">
作业量趋势分析
</div>
<div class="dataScreen-main-title" style="width: auto;">
作业量趋势分析
</div>
<div class="tabs flex">
<div class="tab-item" @click="dayActiveName = '日'" :class="{active: dayActiveName === '日'}">日</div>
<div class="tab-item" @click="dayActiveName = '月'" :class="{active: dayActiveName === '月'}">月</div>
</div>
<div class="dataScreen-main-chart">
<OverNext30Chart />
<OverNext30Chart :dayActiveName="dayActiveName" />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts" name="dataScreen">
<script setup name="dataScreen">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { HOME_URL } from "@/config";
import { useRouter } from "vue-router";
......@@ -93,9 +94,12 @@ import OverNext30Chart from "./components/OverNext30Chart.vue";
import PlatformSourceChart from "./components/PlatformSourceChart.vue";
import RealTimeAccessChart from "./components/RealTimeAccessChart.vue";
import dayjs from "dayjs";
import { getLoanKanBanTotal } from '@/api/dataScreen';
const router = useRouter();
const dataScreenRef = ref<HTMLElement | null>(null);
const dataScreenRef = ref(null);
const staticNumber = ref({});
const dayActiveName = ref('日');
onMounted(() => {
if (dataScreenRef.value) {
......@@ -112,7 +116,11 @@ const resize = () => {
dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
}
};
getLoanKanBanTotal().then(res=> {
if (res.success) {
staticNumber.value = res.result
}
})
// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
let ww = window.innerWidth / width;
......@@ -121,15 +129,15 @@ const getScale = (width = 1920, height = 1080) => {
};
// 获取当前时间
let timer: NodeJS.Timer | null = null;
let time = ref<string>(dayjs().format("YYYY年MM月DD HH:mm:ss"));
let timer = null;
let time = ref(dayjs().format("YYYY年MM月DD HH:mm:ss"));
timer = setInterval(() => {
time.value = dayjs().format("YYYY年MM月DD HH:mm:ss");
}, 1000);
onBeforeUnmount(() => {
window.removeEventListener("resize", resize);
clearInterval(timer as unknown as number);
clearInterval(timer);
});
</script>
<style lang="scss" scoped>
......
......@@ -31,21 +31,6 @@
</el-form-item>
</el-col>
</template>
<template v-if="form.legalFlowStatus">
<el-col :span="12">
<el-form-item label="法务审核意见:" prop="name">
{{form.legalRepairOpinion}}
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="法务审核状态:" prop="name">
{{form.legalFlowStatus
? FlowStatus?.find((v) => v.value === form.legalFlowStatus)?.label
: ''}}
</el-form-item>
</el-col>
</template>
<el-col :span="12">
<el-form-item label="合同编号:" prop="name">
......
......@@ -244,7 +244,7 @@
labelWidth: 85,
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
}, },
{ field: 'createBy', title: '创建人' },
{ field: 'user.username', width: 90,title: '创建人' },
{ field: 'contractStatus', title: '合同状态', showOverflow: 'tooltip',
width: 80,
enum: ContractStatus,
......@@ -275,27 +275,12 @@
);
},
}, },
{ field: 'legalFlowStatus', title: '法务审核状态', showOverflow: 'tooltip',
width: 80,
enum: FlowStatus,
fieldNames: { label: 'label', value: 'value' },
slots: {
default: ({ row }) => {
return (
<>
{row.legalFlowStatus
? FlowStatus.value?.find((v) => v.value === row.legalFlowStatus)?.label
: ''}
</>
);
},
}, },
{ field: 'remark', title: '操作', fixed: 'right',width: 160,visible: activeName.value !== 'completed',
slots: {
default({ row }) {
return (
<>
<ElButton type="primary" link onClick={() => addConstant(row, true)} v-show={row.createBy === userStore.userInfo.id} disabled={row.legalFlowStatus=== 'pass'}>
<ElButton type="primary" link onClick={() => addConstant(row, true)} v-show={row.createBy === userStore.userInfo.id} disabled={row.financeFlowStatus=== 'pass'}>
修改
</ElButton>
<ElButton type="primary" link onClick={() => apply(row, 'finance')} v-show={authButtonListGet.includes('finance_apply')} disabled={row.legalFlowStatus || row.financeFlowStatus === 'pass'}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment