Finance.vue

<template>
  <div class="eibs-tab">
    <el-col :span="16">
      <c-col :span="12">
        <el-form-item label="客户名称">
          <c-input
            v-model="customerName"
            placeholder="请输入客户名称"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="起止日期" style="width: 100%">
          <c-col :span="11">
            <c-date-picker
              v-model="startDate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              placeholder="请选择Date"
            ></c-date-picker>
          </c-col>
          <c-col :span="2" style="text-align: center">
            <label style="display: inline-block; width: 100%">-</label>
          </c-col>
          <c-col :span="11">
            <c-date-picker
              v-model="endDate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 100%"
              placeholder="请选择Date"
            ></c-date-picker>
          </c-col>
        </el-form-item>
      </c-col>

      <el-col :span="24">
       <el-form-item label="融资类型">
          <el-checkbox-group v-model="checkboxGroup" size="small">
            <el-checkbox-button
              v-for="fkind in fkinds"
              :label="fkind"
              :key="fkind"
            >{{fkind}}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item> 
      </el-col>
      <el-col :span="24">
        <el-form-item label="融资种类">
          <el-checkbox-group v-model="checkboxGroup1" size="small">
            <el-checkbox-button
              v-for="ftype in fcategory"
              :label="ftype"
              :key="ftype"
            >{{ftype}}</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="fstate in fstates"
              :label="fstate"
              :key="fstate"
          >{{fstate}}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>

      </el-col>

    <el-col :span="24">
        <el-form-item label="收支状态">
          <el-checkbox-group v-model="checkboxGroup1" size="small">
            <el-checkbox-button
              v-for="feetyp in feetyps"
              :label="feetyp"
              :key="feetyp"
            >{{feetyp}}</el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
      </el-col>

    <c-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="150px"
          ></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="typ"
            label="融资种类"
            width="150px"
          ></el-table-column>
          <el-table-column
            prop="state"
            label="融资状态"
            width="150px"
          ></el-table-column>
          <el-table-column
            prop="fee"
            label="收支标志"
            width="180px"
          ></el-table-column>
          <!-- <el-table-column fixed="right" prop="op" label="操作" width="140px">
            <template slot-scope="scope">
              <c-button
                style="margin-left: 0"
                size="small"
                @click="onInfbutDsp(scope.$index, scope.row)"
              >
                详情
              </c-button>
              <c-button
                style="margin-left: 0"
                size="small"
                type="primary"
                @click="continueEdit(scope.row)"
              >
                处理
              </c-button>
            </template>
          </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>
    </c-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 Event from "~/model/Iaefts/Event";
import * as echarts from 'echarts';

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      trnName: "Finance",
      customerName: "",
      startDate: "",
      endDate: "",
      ownReference: "",
      ownUsr: "",
      fintyp: "",
      ovdflg: "",
      feetyps: ["无","收入","费用"],
      fkinds:["进口融资","出口融资 "],
      fcategory:["进口信用证押汇","进口代收押汇","汇出汇款押汇","打包贷款"],
      fstates:["逾期","逾期已结清","展期","抹账","呆滞","正常已结清","正常","展期已结清","呆账","呆滞已结清","呆账已结清"],
      checkboxGroup:[""],
      checkboxGroup1:[""],
      checkboxGroup2:[""],
      checkboxGroup3:[""],
      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",
          typ: "汇出汇款押汇",
          state: "正常已结清",
          fee: "收入",
        },
        {
          cname: "Brilliance",
          cdate: "2022-05-08 12:09:20",
          ownref: "KZ01857886",
          typ: "进口信用证押汇",
          state: "逾期已结清",
          fee: "收入",
        },
        {
          cname: "贵州茅台",
          cdate: "2022-05-08 00:00:00",
          ownref: "KZ09786886",
          typ: "进口信用证押汇",
          state: "正常已结清",
          fee: "无",
        },
        {
          cname: "贵州茅台",
          cdate: "2022-05-08 00:00:00",
          ownref: "KZ09786886",
          typ: "进口信用证押汇",
          state: "正常已结清",
          fee: "无",
        },
        {
          cname: "海康威视",
          cdate: "2022-05-15 12:34:46",
          ownref: "KA07658346",
          typ: "打包贷款",
          state: "呆滞",
          fee: "费用",
        },
        {
          cname: "海康威视",
          cdate: "2022-05-13 13:06:19",
          ownref: "KZ09786996",
          typ: "汇出汇款押汇",
          state: "正常已结清",
          fee: "无",
        },
      ],

      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      total: 0,
      // 个数选择器（可修改）
      pageSizes: [5, 10, 15, 20, 25],
      // 默认每页显示的条数（可修改）
      PageSize: 5,
    };
  },

   mounted() {
    this.initcharts();
  },

  computed: {},
  //注意此处应为$route当前组件的this 不是$router vuerouter的this其不含query值
  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"设置图表类型为饼图
            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: 4,
            },
            data: [
              { value: 26, name: "进口信用证押汇" },
              { value: 24, name: "进口代收押汇" },
              { value: 16, name: "汇出汇款押汇 " },
              { value: 20, name: "打包贷款" },
              
            ],
            
          },
        ],
      };

      myChart.setOption(option);
    },

    handleSizeChange(size) {
      // 改变每页显示的条数
      this.PageSize = size;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(currentPage) {
      // 改变默认的页数
      this.currentPage = currentPage;
    },
  },
};
</script>

<style>
.table {
  margin-top: 20px;
}

.el-table .cell {
  line-height: 15px;
}
.main_container {
  width: 150%;
  height: 300px;
}
</style>


<!-- <el-col :span="8"> </el-col>
    <c-col :span="8">
      <el-form-item label="业务编号">
        <c-input v-model="ownReference" placeholder="请输入Reference">
        </c-input>
      </el-form-item>
    </c-col>
    <c-col :span="8">
      <el-form-item label="经办柜员">
        <c-select
          style="width: 100%"
          v-model="ownUsr"
          palceholder="请选择User"
          :code="codes.usrsort"
        ></c-select>
      </el-form-item>
    </c-col> -->

    <!-- <c-col :span="8">
      <el-form-item label="请选择融资种类">
        <c-select
          v-model="fintyp"
          style="width: 100%"
          placeholder="融资种类"
          :code="codes.fintyp1"
        ></c-select>
      </el-form-item>
    </c-col> -->

    <!-- <c-col :span="8">
      <el-form-item label="请选择融资状态">
        <c-select
          v-model="ovdflg"
          style="width: 100%"
          placeholder="融资状态"
          :code="codes.ovdflg"
        ></c-select>
      </el-form-item>
    </c-col> -->

    <!-- <c-col :span="8">
      <el-form-item label="请选择收支标志">
        <c-select
          v-model="feetyp"
          style="width: 100%"
          placeholder="收支标志"
          :code="codes.feetyp"
        ></c-select>
      </el-form-item>
    </c-col>
    <c-col :span="16" style="text-align: right">
      <el-button size="small" @click="handleReset">重置</el-button>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="handleSearch"
        >查询</el-button
      >
    </c-col> -->

    <!-- <c-col class="clearfix" :span="24" style="margin-top: 10px">
      <div style="border-bottom: 10px solid rgb(232, 232, 232)"></div>
    </c-col> -->