ExpenseIncome.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="起止日期">
        <c-col :span="11">
          <c-date-picker
            v-model="startDate"
            type="date"
            style="width: 100%"
            value-format="yyyy-MM-dd"
            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"
            style="width: 100%"
            value-format="yyyy-MM-dd"
            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="checkboxGroup1" size="small">
            <el-checkbox-button
              v-for="modflg in modflgs"
              :label="modflg"
              :key="modflg"
              >{{ modflg }}</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="300px"
      ></el-table-column>
      <el-table-column
        prop="cdate"
        label="创建时间"
        width="300px"
        ></el-table-column>
        <el-table-column
        prop="ownref"
        label="业务编号"
        width="300px"
        ></el-table-column>
        <el-table-column
        prop="cstate"
        label="费用变化状态"
        width="300px"></el-table-column>
        <!-- <c-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>
        </c-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>
    

    <!-- <c-col :span="8">
      <el-form-item label="业务编号">
        <c-input 
        placeholder="请输入Reference"
        v-model="ownReference"
        > </c-input>
      </el-form-item>
    </c-col>

    <c-col :span="8">
      <el-form-item label="经办柜员">
        <c-select 
        v-model="ownUsr"
        style="width: 100%" 
        palceholder="请选择User"
        :code="codes.usrsort"
        ></c-select>
      </el-form-item>
    </c-col> -->

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


    <!-- <c-col :span="8" 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> -->

    
  </div>
</template>

<script>
import commonProcess from "~/mixin/commonProcess";
import Api from "~/service/Api";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Expben/Event";
import * as echarts from "echarts";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      trnName: "ExpenseIncome",
      customerName: "",
      startDate:"",
      endDate:"",
      ownReference:"",
      ownUsr:"",
      modflgs:["Rate changed","Amount changed","Unmodified","Code changed","Units changed","Date changed"],
      checkboxGroup1:[],
      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',cstate:'Rate changed'
      },
      {
       cname:'Brilliance' ,cdate:'2022-05-07 10:00:00',ownref:'KZ01256886',cstate:'Rate changed'
      },
      {
       cname:'贵州茅台' ,cdate:'2022-05-07 10:00:00',ownref:'KZ01256886',cstate:'Rate changed'
      },
      {
       cname:'贵州茅台' ,cdate:'2022-05-07 10:00:00',ownref:'KZ01256886',cstate:'Rate changed'
      },
      {
       cname:'海康威视' ,cdate:'2022-05-07 10:00:00',ownref:'KZ01256886',cstate:'Rate changed'
      },
      {
       cname:'海康威视' ,cdate:'2022-05-07 10:00:00',ownref:'KZ01256886',cstate:'Rate changed'
      },
      ],
        // 默认显示第几页
           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",
            // 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></style>