sen-yu-new-web/src/views/reportForms/order-statistics/chart/externalChartModal.vue

<template>
  <a-modal
    title="订单外部分析图"
    v-model="externalChartModVis"
    :confirmLoading="confirmLoading"
    width="70%"
    style="top:330px;left:100px;"
    :footer="null"
  >
    <a-spin :spinning="confirmLoading">
      <a-tabs default-active-key="1" @change="tabsCallback">
        <a-tab-pane key="1" tab="按部门">
          此处应该是订单外部分析图--按部门
        </a-tab-pane>
        <a-tab-pane key="2" tab="按客户" force-render>
          此处应该是订单外部分析图--按客户
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

export default {
  name: 'ExternalChartModal', // 订单外部分析图
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment },

  data() {
    return {
      confirmLoading: false,
      externalChartModVis: false
    }
  },
  // 接收父组件 方法
  props: {
    father: {
      type: Function,
      default: null
    }
  },
  created() {},
  methods: {
    // 切换面板的回调
    tabsCallback(key) {
      console.log(key)
    }
  },
  computed: {}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}
/deep/ .ant-table-tbody {
  text-align: center;
}
// th.replacecolor {
// background-color:  #ccc;
// }

/deep/ .ant-modal-body {
  // min-height: 300px;
  // background-color: orange;
}

/deep/ .ant-tabs-content,
.ant-tabs-content-animated,
.ant-tabs-tabpane,
.ant-tabs-tabpane-active,
.ant-tabs-top-content {
  height: 600px;
  // border: 1px solid red; //#e8e8e8
  background-color: #e8e8e8;
}
</style>