Volume.vue

<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>