|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="quote">
|
|
<div class="quote">
|
|
|
- <div class="quote-tree">
|
|
|
|
|
|
|
+ <div class="quote-tree" style="border-radius: 8px">
|
|
|
<div><h2>部门所属</h2></div>
|
|
<div><h2>部门所属</h2></div>
|
|
|
<div>
|
|
<div>
|
|
|
<!-- <a-tree :load-data="onLoadData" :tree-data="treeData" /> -->
|
|
<!-- <a-tree :load-data="onLoadData" :tree-data="treeData" /> -->
|
|
@@ -10,13 +10,42 @@
|
|
|
<div class="back-line-main">
|
|
<div class="back-line-main">
|
|
|
<div class="back-line-header">
|
|
<div class="back-line-header">
|
|
|
<div class="back-line-header-title">
|
|
<div class="back-line-header-title">
|
|
|
- <h2>财务应收</h2>
|
|
|
|
|
|
|
+ <h2>合计</h2>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <dl>
|
|
|
|
|
+ <dt><img src="../../assets/img/car.png" alt="" /></dt>
|
|
|
|
|
+ <dd>
|
|
|
|
|
+ <span>车辆数</span>
|
|
|
|
|
+ <span>{{ 56 }}</span>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ <dl>
|
|
|
|
|
+ <dt><img src="../../assets/img/order.png" alt="" /></dt>
|
|
|
|
|
+ <dd>
|
|
|
|
|
+ <span>车辆数</span>
|
|
|
|
|
+ <span>{{ 56 }}</span>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ <dl>
|
|
|
|
|
+ <dt><img src="../../assets/img/orderMoney.png" alt="" /></dt>
|
|
|
|
|
+ <dd>
|
|
|
|
|
+ <span>车辆数</span>
|
|
|
|
|
+ <span>{{ 56 }}</span>
|
|
|
|
|
+ </dd>
|
|
|
|
|
+ </dl>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="background-color: #fff; margin-top: 15px">
|
|
|
|
|
+ <div class="table-title">
|
|
|
|
|
+ <h2>合计</h2>
|
|
|
<div>
|
|
<div>
|
|
|
<span>时间筛选</span>
|
|
<span>时间筛选</span>
|
|
|
<a-range-picker
|
|
<a-range-picker
|
|
|
@change="onChangeTime"
|
|
@change="onChangeTime"
|
|
|
v-model="formState.time"
|
|
v-model="formState.time"
|
|
|
value-format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
|
|
|
+ style="margin-left: 10px"
|
|
|
>
|
|
>
|
|
|
<a-icon slot="suffixIcon" type="calendar" />
|
|
<a-icon slot="suffixIcon" type="calendar" />
|
|
|
</a-range-picker>
|
|
</a-range-picker>
|
|
@@ -25,6 +54,7 @@
|
|
|
button-style="solid"
|
|
button-style="solid"
|
|
|
v-model="formState.dateType"
|
|
v-model="formState.dateType"
|
|
|
@change="getVerification()"
|
|
@change="getVerification()"
|
|
|
|
|
+ style="margin-left: 10px"
|
|
|
>
|
|
>
|
|
|
<a-radio-button value="1"> 近1月 </a-radio-button>
|
|
<a-radio-button value="1"> 近1月 </a-radio-button>
|
|
|
<a-radio-button value="2"> 近3月 </a-radio-button>
|
|
<a-radio-button value="2"> 近3月 </a-radio-button>
|
|
@@ -32,23 +62,83 @@
|
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- <standard-table
|
|
|
|
|
- :columns="columns"
|
|
|
|
|
- :dataSource="tableList"
|
|
|
|
|
- :pagination="pagination"
|
|
|
|
|
- @clear="onClear"
|
|
|
|
|
- @change="onChange"
|
|
|
|
|
- :loading="loading"
|
|
|
|
|
- bordered
|
|
|
|
|
- >
|
|
|
|
|
- <div slot="count" slot-scope="{ text }">
|
|
|
|
|
- {{ text != "-" ? text + "次" : text }}
|
|
|
|
|
- </div>
|
|
|
|
|
- <div slot="rate" slot-scope="{ text }">
|
|
|
|
|
- {{ text != "-" ? (text * 100).toFixed(2) + "%" : text }}
|
|
|
|
|
|
|
+ <a-form
|
|
|
|
|
+ layout="inline"
|
|
|
|
|
+ :class="className"
|
|
|
|
|
+ :model="formState"
|
|
|
|
|
+ style="padding: 0 0 0 15px; box-sizing: border-box"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-form-item
|
|
|
|
|
+ label="业务员工号"
|
|
|
|
|
+ :labelCol="{ span: 8 }"
|
|
|
|
|
+ :colon="false"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-input
|
|
|
|
|
+ placeholder="请输入业务员工号"
|
|
|
|
|
+ v-model="formState.name"
|
|
|
|
|
+ allowClear
|
|
|
|
|
+ ></a-input>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item
|
|
|
|
|
+ label="业务员姓名"
|
|
|
|
|
+ :labelCol="{ span: 8 }"
|
|
|
|
|
+ :colon="false"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-input
|
|
|
|
|
+ placeholder="请输入业务员姓名"
|
|
|
|
|
+ v-model="formState.userCode"
|
|
|
|
|
+ allowClear
|
|
|
|
|
+ ></a-input>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="手机号" :labelCol="{ span: 5 }" :colon="false">
|
|
|
|
|
+ <a-input
|
|
|
|
|
+ placeholder="请输入手机号"
|
|
|
|
|
+ v-model="formState.phoneNumber"
|
|
|
|
|
+ allowClear
|
|
|
|
|
+ ></a-input>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="车牌号" :labelCol="{ span: 5 }" :colon="false">
|
|
|
|
|
+ <a-input
|
|
|
|
|
+ placeholder="请输入车牌号"
|
|
|
|
|
+ v-model="formState.phoneNumber"
|
|
|
|
|
+ allowClear
|
|
|
|
|
+ ></a-input>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ <a-form-item label="车架号" :labelCol="{ span: 5 }" :colon="false">
|
|
|
|
|
+ <a-input
|
|
|
|
|
+ placeholder="请输入车架号"
|
|
|
|
|
+ v-model="formState.phoneNumber"
|
|
|
|
|
+ allowClear
|
|
|
|
|
+ ></a-input>
|
|
|
|
|
+ </a-form-item>
|
|
|
|
|
+ </a-form>
|
|
|
|
|
+ <div
|
|
|
|
|
+ style="
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ padding-right: 15px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ "
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-button type="primary" @click="getList">查询</a-button>
|
|
|
</div>
|
|
</div>
|
|
|
- </standard-table>
|
|
|
|
|
|
|
+ <standard-table
|
|
|
|
|
+ :columns="columns"
|
|
|
|
|
+ :dataSource="tableList"
|
|
|
|
|
+ :pagination="pagination"
|
|
|
|
|
+ @clear="onClear"
|
|
|
|
|
+ @change="onChange"
|
|
|
|
|
+ :loading="loading"
|
|
|
|
|
+ bordered
|
|
|
|
|
+ >
|
|
|
|
|
+ <div slot="count" slot-scope="{ text }">
|
|
|
|
|
+ {{ text != "-" ? text + "次" : text }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div slot="rate" slot-scope="{ text }">
|
|
|
|
|
+ {{ text != "-" ? (text * 100).toFixed(2) + "%" : text }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </standard-table>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
@@ -59,77 +149,27 @@ import StandardTable from "@/components/table/StandardTable";
|
|
|
import tree from "@/components/tree/tree";
|
|
import tree from "@/components/tree/tree";
|
|
|
const columns = [
|
|
const columns = [
|
|
|
{
|
|
{
|
|
|
- title: "保险公司",
|
|
|
|
|
|
|
+ title: "车牌号",
|
|
|
dataIndex: "companyName",
|
|
dataIndex: "companyName",
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
{
|
|
{
|
|
|
- title: "合作公司",
|
|
|
|
|
|
|
+ title: "车架号",
|
|
|
dataIndex: "parterCompanyName",
|
|
dataIndex: "parterCompanyName",
|
|
|
// scopedSlots: { customRender: "parterCompanyName" },
|
|
// scopedSlots: { customRender: "parterCompanyName" },
|
|
|
},
|
|
},
|
|
|
- {
|
|
|
|
|
- title: "大订单",
|
|
|
|
|
|
|
|
|
|
- // scopedSlots: { customRender: "qutationCount" },
|
|
|
|
|
- children: [
|
|
|
|
|
- {
|
|
|
|
|
- title: "报价数",
|
|
|
|
|
- dataIndex: "bigQutationCount",
|
|
|
|
|
- scopedSlots: { customRender: "count" },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: "承保数",
|
|
|
|
|
- dataIndex: "bigUnderwritingCount",
|
|
|
|
|
- scopedSlots: { customRender: "count" },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: "成交率",
|
|
|
|
|
- dataIndex: "bigCloseRate",
|
|
|
|
|
- scopedSlots: { customRender: "rate" },
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ {
|
|
|
|
|
+ title: "订单数量",
|
|
|
|
|
+ dataIndex: "qutationCount",
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
- title: "小订单",
|
|
|
|
|
-
|
|
|
|
|
- // scopedSlots: { customRender: "qutationCount" },
|
|
|
|
|
- children: [
|
|
|
|
|
- {
|
|
|
|
|
- title: "报价数",
|
|
|
|
|
- dataIndex: "qutationCount",
|
|
|
|
|
- scopedSlots: { customRender: "count" },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: "核保数",
|
|
|
|
|
- dataIndex: "underwritingCount",
|
|
|
|
|
- scopedSlots: { customRender: "count" },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: "承保数",
|
|
|
|
|
- dataIndex: "qutationInsureCount",
|
|
|
|
|
- scopedSlots: { customRender: "count" },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: "核保通过率",
|
|
|
|
|
- dataIndex: "passRate",
|
|
|
|
|
- scopedSlots: { customRender: "rate" },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: "成交率",
|
|
|
|
|
- dataIndex: "closeRate",
|
|
|
|
|
- scopedSlots: { customRender: "rate" },
|
|
|
|
|
-
|
|
|
|
|
- // scopedSlots: { customRender: "qutationCount" },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: "承保率",
|
|
|
|
|
- dataIndex: "contributionRate",
|
|
|
|
|
- scopedSlots: { customRender: "rate" },
|
|
|
|
|
-
|
|
|
|
|
- // scopedSlots: { customRender: "qutationCount" },
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ title: "成交率",
|
|
|
|
|
+ dataIndex: "underwritingCount",
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: "承保公司",
|
|
|
|
|
+ dataIndex: "qutationInsureCount",
|
|
|
},
|
|
},
|
|
|
];
|
|
];
|
|
|
|
|
|
|
@@ -288,15 +328,15 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
.back-line-header {
|
|
.back-line-header {
|
|
|
- padding: 15px;
|
|
|
|
|
|
|
+ // padding: 15px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
.back-line-header-title {
|
|
.back-line-header-title {
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- padding-bottom: 15px;
|
|
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
|
+ padding: 15px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(141, 149, 176, 0.15);
|
|
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
h2 {
|
|
h2 {
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
}
|
|
}
|
|
@@ -304,7 +344,38 @@ export default {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ > dl {
|
|
|
|
|
+ flex: none;
|
|
|
|
|
+ width: 271px;
|
|
|
|
|
+ height: 61px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ 267deg,
|
|
|
|
|
+ rgba(42, 85, 229, 0.1) 0%,
|
|
|
|
|
+ rgba(42, 85, 229, 0) 100%
|
|
|
|
|
+ );
|
|
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.1);
|
|
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
|
|
+ border: 1px solid #ffffff;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 44px;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ > dd {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
|
|
+ padding-left: 15px;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
span {
|
|
span {
|
|
|
display: block;
|
|
display: block;
|
|
@@ -317,7 +388,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
> div {
|
|
> div {
|
|
|
// height: 152px;
|
|
// height: 152px;
|
|
|
- background: #fff;
|
|
|
|
|
|
|
+ // background: #fff;
|
|
|
.ant-form {
|
|
.ant-form {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
> .ant-form-item {
|
|
> .ant-form-item {
|
|
@@ -336,5 +407,20 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ .table-title {
|
|
|
|
|
+ padding: 15px 15px 0;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ h2 {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ > div {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|