<template>
<div class="eibs-tab">
<el-col :span="16">
<c-col :span="12">
<el-form-item label="客户名称">
<el-input
v-model="customerName"
placeholder="请输入客户名称"
style="width: 100%"
></el-input>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="起止时间" style="width: 100%">
<el-col :span="11">
<el-date-picker
v-model="sdate"
type="date"
value-format="yyyy-MM-dd"
style="width: 100%"
placeholder="请选择Date"
></el-date-picker>
</el-col>
<c-col :span="2" style="text-align: center">
<label style="display: inline-block; width: 100%">-</label>
</c-col>
<el-col :span="11">
<el-date-picker
v-model="edate"
type="date"
value-format="yyyy-MM-dd"
style="width: 100%"
placeholder="请选择Date"
></el-date-picker>
</el-col>
</el-form-item>
</c-col>
<el-col :span="24">
<el-form-item label="业务类型">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox-button
v-for="bcate in bcategory"
:label="bcate"
:key="bcate"
>{{ bcate }}</el-checkbox-button
>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="币种">
<el-checkbox-group v-model="checkboxGroup2" size="small">
<el-checkbox-button v-for="cur in curs" :label="cur" :key="cur">{{
cur
}}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="业务机构">
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button
v-for="bank in banks"
:label="bank"
:key="bank"
>{{ bank }}</el-checkbox-button
>
</el-checkbox-group>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="table">
<el-table
:data="
stmData.slice(
(currentPage - 1) * PageSize,
currentPage * PageSize
)
"
:border="true"
style="width:80%,text-align:center"
:header-cell-style="{
background: 'rgb(235, 235, 235)',
color: '#000',
}"
>
<el-table-column
prop="cname"
label="客户名称"
width="80px"
></el-table-column>
<el-table-column
prop="cdate"
label="创建时间"
width="200px"
></el-table-column>
<el-table-column
prop="ownref"
label="业务编号"
width="220px"
></el-table-column>
<el-table-column
prop="curtyp"
label="币种"
width="120px"
>
</el-table-column>
<el-table-column
prop="curamt"
label="金额"
width="120px"
></el-table-column>
<el-table-column
prop="branch"
label="业务机构"
width="150px"
></el-table-column>
</el-table>
<div class="tabListPage">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="PageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="stmData.length"
>
</el-pagination>
</div>
</div>
</el-col>
</el-col>
<el-col :span="8">
<el-col :span="24">
<div id="main" class="main_container"></div>
</el-col>
<el-col :span="24">
<div class="table">
<el-table
:data="tableData"
:border="true"
style="width:80%,text-align:center"
:header-cell-style="{
background: 'rgb(235, 235, 235)',
color: '#000',
}"
>
<el-table-column
prop="idx"
label="排名"
width="100px"
></el-table-column>
<el-table-column
prop="tbusiness"
label="业务类型"
width="180px"
></el-table-column>
<el-table-column
prop="bvol"
label="业务量"
width="180px"
></el-table-column>
</el-table>
</div>
</el-col>
</el-col>
</div>
</template>
<script>
import commonProcess from "~/mixin/commonProcess";
import Api from "~/service/Api";
import CodeTable from "~/config/CodeTable";
import * as echarts from "echarts";
import Event from "~/model/Busvol/Event";
export default {
inject: ["root"],
props: ["model", "codes"],
mixins: [commonProcess],
data() {
return {
trnName: "Volume",
customerName: "",
sdate: "",
edate: "",
tableData:[
{idx:"第一",tbusiness:"买方信用证",bvol:"541532"},
{idx:"第二",tbusiness:"卖方信用证",bvol:"23232"},
{idx:"第三",tbusiness:"出口信用证",bvol:"12356"},
],
stmData:[
{
cname: "Brilliance",
cdate: "2022-05-07 10:00:00",
ownref: "KZ01256886",
curtyp:"USD",
curamt:"123598.364",
branch:"北京分行"
},
{
cname: "Brilliance",
cdate: "2022-05-12 10:00:00",
ownref: "KZ01886886",
curtyp:"CNY",
curamt:"6543598.364",
branch:"北京分行"
},
{
cname: "贵州茅台",
cdate: "2022-05-02 10:00:00",
ownref: "KZ01917886",
curtyp:"CNY",
curamt:"8543598.364",
branch:"北京分行"
},
{
cname: "贵州茅台",
cdate: "2022-05-22 10:00:00",
ownref: "KZ01966886",
curtyp:"USD",
curamt:"56598.364",
branch:"北京分行"
},
{
cname: "海康威视",
cdate: "2022-04-22 10:00:00",
ownref: "KZ01336586",
curtyp:"USD",
curamt:"15598.364",
branch:"北京分行"
},
{
cname: "海康威视",
cdate: "2022-05-17 10:00:00",
ownref: "KZ01332586",
curtyp:"USD",
curamt:"99598.364",
branch:"北京分行"
},
{
cname: "海康威视",
cdate: "2022-05-17 10:00:00",
ownref: "KZ01332586",
curtyp:"USD",
curamt:"99598.364",
branch:"北京分行"
},
{
cname: "海康威视",
cdate: "2022-05-17 10:00:00",
ownref: "KZ01332586",
curtyp:"USD",
curamt:"99598.364",
branch:"北京分行"
},
{
cname: "海康威视",
cdate: "2022-05-17 10:00:00",
ownref: "KZ01332586",
curtyp:"USD",
curamt:"99598.364",
branch:"北京分行"
},
{
cname: "海康威视",
cdate: "2022-05-17 10:00:00",
ownref: "KZ01332586",
curtyp:"USD",
curamt:"99598.364",
branch:"北京分行"
},
{
cname: "海康威视",
cdate: "2022-05-17 10:00:00",
ownref: "KZ01332586",
curtyp:"USD",
curamt:"99598.364",
branch:"北京分行"
},
{
cname: "海康威视",
cdate: "2022-05-17 10:00:00",
ownref: "KZ01332586",
curtyp:"USD",
curamt:"99598.364",
branch:"北京分行"
},
],
//table的默认选择值
checkboxGroup1: [""],
checkboxGroup2: [""],
checkboxGroup3: [""],
bcategory: ["信用证", "保函", "汇款", "托收","代收", "国内证","资金业务"],
curs: ["人民币", "美元", "港币", "欧元"],
banks: ["总行", "分行", "地方支行"],
// 默认显示第几页
currentPage: 1,
// 总条数，根据接口获取数据长度(注意：这里不能为空)
total: 0,
// 个数选择器（可修改）
pageSizes: [10, 20, 30, 40, 50],
// 默认每页显示的条数（可修改）
PageSize: 10,
};
},
mounted() {
this.initcharts();
},
computed: {},
created() {
if (this.$route.query) {
this.customerName = this.$route.query.name;
}
},
methods: {
...Event,
initcharts() {
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
//option chart的配置项
var option = {
//legend 图标组件
legend: {
//legend.top 据上端的距离
top: "bottom",
},
//toolbox --工具栏 》》内置数据视图 重制等工具
toolbox: {
//toolbox.show 是否显示工具栏组件
show: true,
// orient:'vertical',
//.feature各工具配置项
feature: {
// mark '辅助线开关'
mark: { show: true },
dataView: { show: true, readOnly: false ,title:"详细"},
restore: { show: false },
saveAsImage: { show: false },
},
},
series: [
{
name: "客户业务量分析",
// 设置图表类型为饼图
type: "pie",
// radius饼状图半径
radius: [20, 100],
//center饼图的中心（圆心）坐标
center: ["50%", "50%"],
//数据百分比显示
label: {
normal: {
show: true,
formatter: "{b}: {c}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
},
},
roseType: "area",
itemStyle: {
borderRadius: 6,
},
data: [
{ value: 26, name: "信用证" },
{ value: 24, name: "保函" },
{ value: 16, name: "国内证" },
{ value: 20, name: "托收" },
{ value: 8, name: "汇款" },
{ value: 6, name: "资金业务" },
],
},
],
};
myChart.setOption(option);
},
handleSizeChange(size) {
// 改变每页显示的条数
this.PageSize = size;
// 注意：在改变每页显示的条数时，要将页码显示到第一页
this.currentPage = 1;
},
// 显示第几页
handleCurrentChange(currentPage) {
// 改变默认的页数
this.currentPage = currentPage;
},
},
};
</script>
<style>
.main_container {
width: 110%;
height: 300px;
}
</style>