<template>
  <div class="container">
    <!-- 工具条 -->
    <div class="btn-toolbar">
      <el-button icon="el-icon-back" :disabled="backDisabled">后退</el-button>
      <el-button icon="el-icon-right" :disabled="goDisabled">前进</el-button>
      <el-dropdown split-button @click="sortClick">
        <i class="el-icon-sort"></i>排序
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button icon="el-icon-setting" @click="analysisClick">分析列设置</el-button>
      <el-dropdown @command="chartTypeChange">
        <el-button>
          <i class="el-icon-s-data"></i>
          图表<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="table">表格</el-dropdown-item>
          <el-dropdown-item command="pie">饼图</el-dropdown-item>
          <el-dropdown-item command="bar">柱图</el-dropdown-item>
          <el-dropdown-item command="line">线图</el-dropdown-item>
          <el-dropdown-item command="area">区域图</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button icon="el-icon-refresh" @click="refresh">刷新</el-button>
      <el-button icon="el-icon-edit-outline">分析记录</el-button>
      <el-checkbox
        v-model="superposition"
        label="叠加"
        border
        size="medium"
      ></el-checkbox>
      <el-checkbox
        v-model="perspective"
        label="直接透视"
        border
        size="medium"
      ></el-checkbox>
      <el-button icon="el-icon-download">导出excel</el-button>
    </div>
    <hi-layout :is-fit="true" style="heiht: 100%;">
      <!-- 右侧查询面板 -->
      <hi-layout-right size="300" title="过滤条件">
        <birt-work-book
          style="height: calc( 100% - 142px );border-bottom: 1px dashed #3179de;overflow: auto;"
          :conf="birtModelRight"
          :ref="birtModelRight.controlId"
        ></birt-work-book>
        <el-form
          @submit.native.prevent
          ref="groupForm"
          style="padding: 10px 10px 0 0;"
          :model="groupForm"
          label-width="80px"
        >
          <el-form-item label="分组条件" prop="prop">
            <el-select v-model="groupForm.prop" placeholder="请选择分组条件">
              <el-option
                v-for="item in groupFields"
                :label="item.label"
                :value="item.prop"
                :key="item.prop"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              :loading="loading"
              @click="doCount"
              >执行查询</el-button
            >
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </hi-layout-right>
      <!-- 图表展示区 -->
      <hi-layout-center style="heiht: 100%;">
        <div class="depth-analysis">
          <span>深度分析:</span>
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="padding: 0 0 0 10px;"
          >
            <el-breadcrumb-item v-for="(item,index) in deepArr" :key="item.prop"><a @click="breadcrumbClick(item.prop)">{{ item.label }}<span style="color: rgb(255, 102, 0);margin-left:2px;" v-if="index < curIndex">{{ item.selectVal }}</span></a></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div v-if="showDetail" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            show-summary
            style="width: 100%"
          >
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-if="!showDetail && chartType == 'table'" style="height: calc( 100% - 100px )">
          <el-table
            :data="data"
            ref="table"
            height="100%"
            border
            show-summary
            style="width: 100%"
          >
            <el-table-column
              v-for="item in tableColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <Pie-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'pie'"
          ref="chartConf"
          :conf="chartConf"
        ></Pie-chart>
        <Bar-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'bar'"
          ref="chartConf"
          :conf="chartConf"
        ></Bar-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'line'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
        <Line-chart
          style="height: calc( 100% - 100px )"
          v-else-if="!showDetail && chartType == 'area'"
          ref="chartConf"
          :conf="chartConf"
        ></Line-chart>
      </hi-layout-center>
    </hi-layout>
    <!-- 分析列 -->
    <el-dialog :visible.sync="analysisVisible" title="分析列设置" :height="500">
      <el-table :data="analysisData" size="small" :height="400">
        <el-table-column
          prop="countField"
          label="统计字段">
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCheck" @change="handelCheckAll('tableColumn')" label="网格列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="网格合计列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="tableColumnCountCheck" @change="handelCheckAll('tableColumnCount')" label="网格合计列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.tableColumnCount"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="tableColumn" label="图表列" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCheck" @change="handelCheckAll('chartColumn')" label="图表列"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumn"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="chartColumnCount" label="图表列汇总" align="center">
          <template slot="header" slot-scope="{row}">
            <el-checkbox v-model="chartColumnCountCheck" @change="handelCheckAll('chartColumnCount')" label="图表列汇总"></el-checkbox>
          </template>
          <template slot-scope="{row}">
            <el-checkbox v-model="row.chartColumnCount"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 分析字段 -->
    <el-dialog  :visible.sync="analysisFieldsVisible" title="选择分析字段" :height="500">
       <Pie-chart
          style="height: 400px;"
          ref="analysisChart"
          :conf="analysisChartConf"
        ></Pie-chart>
    </el-dialog>
  </div> 
</template>

<script>
import { QueryStyleFactory } from "../templates/query-panel/QueryStyleFactory";
export default {
  name: "AnalysisSam",
  props:{
    conf:{
      type: Object,
    }
  },
  computed: {
    tableColumns() {
      return [
        {
          prop: "dept",
          label: "部门名称"
        },
        {
          prop: "value",
          label: "产能"
        }
      ];
    },
    // 图表配置
    chartConf() {
      let groupBy = 'dept'
      let controlName = ''
      let datas = this.data
      controlName = this.chartType == "pie" ? "PieChart"
                  : this.chartType == "bar" ? "BarChart"
                  : this.chartType == "line" ? "LineChart"
                  : this.chartType == "area" ? "LineChart" : 'PieChart'
      let pieSeries = [
        {
          smooth: true,
          areaStyle: {
            normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]),
            },
          },
          label: {
            show: false,
            position: "outside",
          },
        },
        {
          smooth: true,
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(30, 231, 231, 0.3)" },{ offset: 1, color: "rgba(30, 231, 231, 0.1)" }]),
            },
          },
          label: {
            show: false,
            position: "outside",
          },
        },
      ];
      let series = []
      const conf = {
          controlName: controlName,
          controlId: "chart_controlid",
          height: "100%",
          isGroupData: true,
          groupBy: groupBy,
          datas: datas,
          calcFields: [
            {
              name: "value",
              title: "产能"
            }
          ],
          option: {
            legend: {
              show: true
            },
            series: this.chartType == "area" ? pieSeries : series
          },
          events:{
            click(row){
              debugger
              let _this = this.$parent.$parent.$parent;
              _this.currentObj = row.data
              _this.currentObj.prop = _this.curGroupField;
              _this.analysisChartConf.datas = _this.deepAnalysisFields
              _this.analysisFieldsVisible = true
            }
          }
      };
      return conf 
    },
    //  深度分析字段列表
    deepAnalysisFields(){
      debugger
      let fields = this.groupFields
      if(fields && fields.length == 0){
        return []
      }
      let analysisFields = fields.map((item) => {
        item.value = 1
        return item
      });
      
      // 排除已经统计的分析列
      if(this.deepArr && this.deepArr.length > 0){
        let arrnew = this.deepArr.slice(0, this.curIndex + 1).map((item) => {
          return item.prop
        });
        analysisFields = analysisFields.filter(item =>{
          return arrnew.indexOf(item.prop) < 0
        })
        // this.deepArr.forEach(item=>{
        //   let index = arrnew.indexOf(item.prop)
        //   if(index > -1){
        //     analysisFields.splice(index, 1)
        //   } 
        // })
      }
      // 添加详情
      analysisFields.push(
        {
          prop: 'detail',
          label: "详情",
          value: 1
        }
      )
      return analysisFields
    },
    // 分组条件(统计字段)
    groupFields(){
      return this.conf && this.conf.groupFields || []
    },
    // 显示详情
    showDetail(){
      return this.currentObj.prop == 'detail'
    }
  },
  data() {
    return {
      superposition: false,
      perspective: false,
      chartType: "table",
      birtModelCenter: {
        controlName: "BirtWorkBook",
        controlId: "BirtWorkBook_center",
        showToolBar: false,
        children: [
          {
            controlName: "BirtSheet",
            controlId: "BirtSheet_0",
            name: "sheet0",
            pageIndex: 0,
            dataSets: [],
            children: [
              {
                controlName: "BirtFormSheet",
                controlId: "BirtFormSheet_01",
                children: []
              }
            ]
          }
        ]
      },
      birtModelRight: {},
      groupForm: {
        prop: "dept"
      },
      loading: false,
      currentPage: 1,
      total: 0,
      data: [],
      showSummary: (this.conf && this.conf.showSummary) || true,
      // 后退
      backDisabled: true,
      // 前进
      goDisabled: true,
      // 排序
      sortArr:[],
      currentSort:{},
      // 分析列
      analysisVisible: false,
      analysisData:[],
      tableColumnCheck: true,
      tableColumnCountCheck: true,
      chartColumnCheck: true,
      chartColumnCountCheck: true,
      // 分析字段
      analysisFieldsVisible: false,
      analysisFieldsArr:[],
      analysisChartConf:{
        controlName: "PieChart",
        controlId: "chart_analysis",
        height: "100%",
        isGroupData: true,
        groupBy: "label",
        datas: [],
        calcFields: [
          {
            name: "value",
            title: ""
          }
        ],
        option: {
          legend: {
            show: true
          }
        },
        events:{
          click(row){
            debugger;
            var _this = this.$parent.$parent;
            _this.analysisChartConf.datas = _this.deepAnalysisFields
            let data = JSON.parse(JSON.stringify(row.data))
            delete data.emphasis
            // 删除当前分析以后的深度分析
            _this.deepArr.splice(_this.curIndex+1, _this.deepArr.length - _this.curIndex - 1)
            let obj = _this.deepArr[_this.deepArr.length -1]
            obj.selectVal = _this.currentObj.name
            _this.$set(_this.deepArr,_this.curIndex,obj)
            _this.$set(_this.deepArr,_this.curIndex + 1, data)
            _this.curGroupField = data.prop;
            _this.currentObj = data;
            _this.curIndex = _this.curIndex + 1;
            _this.$refs.BirtWorkBook_right.dataset.dsUserInfo.query();
            _this.analysisFieldsVisible = false;
          }
        }
      },
      // 深度分析
      deepArr:[],
      conf:{},
      // 图表当前选中对象
      currentObj:{},
      // 当前分组字段
      curGroupField: '',
      // 深度分析当前环节下标
      curIndex: 0,
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs["table"] && this.$refs["table"].doLayout();
    });
  },
  methods: {
    sortClick() {},
    breadcrumbClick(val) {
      debugger
      this.curGroupField = val
      let arrnew = this.deepArr.map(item =>{
        return item.prop
      })
      this.curIndex = arrnew.indexOf(val)
      this.currentObj = this.deepArr[this.curIndex];
    },
    doCount() {
      debugger;
      this.loading = true;
      this.$refs.BirtWorkBook_right.dataset.dsUserInfo.query();
      let prop = this.groupForm.prop;
      let fields = this.groupFields.map(item =>{
        return item.prop
      })
      this.curGroupField = prop;
      let index = fields.indexOf(prop)
      // 当前分组加入深度分析
      if(index < 0){
        this.$message.error('当前分组条件不在分组字段中，请重新配置')
      }else{
        this.$set(this.deepArr,0,this.groupFields[index])
        this.curIndex = 0
      }
      setTimeout(() => {
        this.data = [
          {
            dept: "研发部",
            value: 29620
          },
          {
            dept: "测试部",
            value: 19850
          }
        ];
        this.total = 2;
        this.loading = false;
      }, 500);
    },
    //  重置
    reset() {
      this.$refs.groupForm.resetFields();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 切换图表
    chartTypeChange(command) {
      this.chartType = command;
    },
    // 打开分析列
    analysisClick(){
      this.analysisVisible = true
    },
    // 分系列全选
    handelCheckAll(val){
      debugger
      let _this = this
      this.analysisData = this.analysisData.map(item => {
        if(val == 'tableColumn') {
          item.tableColumn = _this.tableColumnCheck
        }
        if(val == 'tableColumnCount') {
          item.tableColumnCount = _this.tableColumnCountCheck
        }
        if(val == 'chartColumn') {
          item.chartColumn = _this.chartColumnCheck
        }
        if(val == 'chartColumnCount') {
          item.chartColumnCount = _this.chartColumnCountCheck
        }
        return item
      })
    },
    // 刷新
    refresh(){
      this.$refs.BirtWorkBook_right.dataset.dsUserInfo.query();
      this.$refs.chartConf && this.$refs.chartConf.refreshChart();
    }
  },
  created() {
    const queryPanel = {
      rows: [
        {
          children: [
            {
              prop: "FUSERID"
            }
          ],
          colspan: 6
        },
        {
          children: [
            {
              prop: "FUSERNAME"
            }
          ],
          colspan: 6
        },
        {
          children: [
            {
              prop: "FSEX"
            }
          ],
          colspan: 6
        }
      ],
      cols: [
        {
          colWidth: 60
        },
        {
          colWidth: 60
        },
        {
          colWidth: 60
        }
      ]
    };
    let hcQueryPanel = {
      controlName: "HcQueryPanel",
      controlId: "HcQueryPanel_12",
      inline: false,
      dataset: "dsUserInfo",
      size: "small",
      hideBtn: true,
      style: "width: 100%;",
      children: []
    };
    Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) || {});
    this.birtModelRight = {
      controlName: "BirtWorkBook",
      controlId: "BirtWorkBook_right",
      style: "border-bottom: 1px solid #eee;",
      showToolBar: false,
      children: [
        {
          controlName: "BirtSheet",
          controlId: "BirtSheet_right",
          name: "sheet0",
          pageIndex: 0,
          dataSets: [
            {
              controlName: "HcDataset",
              controlId: "dsUserInfo",
              name: "SysUserBizEntity",
              modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml",
              _infcPush: {
                receiveParam: {
                  default: {
                    FUSERID: "FUSERID"
                  }
                },
                receiveLookupInput: "FUSERNAMEJP"
              },
              _infcLoad: {
                autoActive: false
              },
              _infcPagging: {
                returnCount: true,
                pageSize: 10,
                pageNum: 1
              },
              fields: {
                FUSERID: {
                  label: "工号",
                  dbtype: "dbString",
                  readonly: true,
                  sign: "like"
                },
                FUSERID2: {
                  label: "工号",
                  dbtype: "dbString"
                },
                FUSERNAME: {
                  label: "姓名",
                  dbtype: "dbString"
                },
                FUSERNAMEJP: {
                  label: "姓名简拼",
                  dbtype: "dbString",
                  dependFields: "FUSERNAME"
                },
                FCITYLIST: {
                  label: "所在城市",
                  dbtype: "dbString",
                  style: "width: 100%"
                },
                FUSERPROVINCE: {
                  label: "所在省份",
                  dbtype: "dbString",
                  style: "width: 100%"
                },
                FUSERSTYLE: {
                  label: "皮肤",
                  dbtype: "dbString"
                },
                FUSERMAINMBURL: {
                  label: "个人手机主页",
                  dbtype: "dbString"
                },
                FUSERMAINPCURL: {
                  label: "个人PC主页",
                  dbtype: "dbString"
                },
                FUSERTYPE: {
                  label: "类型",
                  dbtype: "dbString"
                },
                FUSERTYPENAME: {
                  label: "用户类型",
                  dbtype: "dbString"
                },
                FUSERSFZ: {
                  label: "身份证号",
                  dbtype: "dbString"
                },
                FUSERSFZPIC1: {
                  label: "身份证正面照",
                  dbtype: "dbString"
                },
                FUSERSFZPIC2: {
                  label: "身份证反面照",
                  dbtype: "dbString"
                },
                FBIRTHDAY: {
                  label: "出生年月",
                  dbtype: "dbDatetime",
                  format: "yyyy-MM-dd"
                },
                FSTATE: {
                  label: "是否禁用",
                  dbtype: "dbIntBoolean"
                },
                FSEX: {
                  label: "性别",
                  dbtype: "dbInt",
                  default: {
                    expr: (data, option) => {
                      return data.FSEX ? 1 : 0;
                    }
                  }
                },
                FADDRESS: {
                  label: "地址",
                  dbtype: "dbString"
                },
                FMBPHONE: {
                  label: "手机号码",
                  dbtype: "dbString"
                },
                FPHONE: {
                  label: "电话",
                  dbtype: "dbString"
                },
                FEMAIL: {
                  label: "邮箱",
                  dbtype: "dbString"
                },
                FQQ: {
                  label: "QQ号码",
                  dbtype: "dbString"
                },
                FWEIXIN: {
                  label: "微信号码",
                  dbtype: "dbString"
                },
                FUSERPHOTO: {
                  label: "用户头像",
                  dbtype: "dbString"
                },
                FUSERSIGN: {
                  label: "电子签名",
                  dbtype: "dbString"
                },
                FUSERSIGN2: {
                  label: "电子签名2",
                  dbtype: "dbString"
                },
                FUSERSIGN3: {
                  label: "电子签名3",
                  dbtype: "dbString"
                },
                FREGIP: {
                  label: "注册地址",
                  dbtype: "dbString"
                },
                FNOTE: {
                  label: "备注",
                  dbtype: "dbString"
                },
                FFAX: {
                  label: "传真",
                  dbtype: "dbString"
                },
                SYS_FAUDITPOINT: {
                  label: "审批状态",
                  dbtype: "dbInt"
                },
                SYS_FOPERATOR: {
                  label: "制单人",
                  dbtype: "dbString"
                },
                SYS_FOPERATORBZ: {
                  label: "制单岗位号",
                  dbtype: "dbString"
                },
                SYS_FOPERATORNAME: {
                  label: "制单人",
                  dbtype: "dbString"
                },
                SYS_FAGENT: {
                  label: "代理人",
                  dbtype: "dbString"
                },
                SYS_FAGENTBZ: {
                  label: "代理岗位号",
                  dbtype: "dbString"
                },
                SYS_FAGENTNAME: {
                  label: "代理人",
                  dbtype: "dbString"
                },
                SYS_FORGID: {
                  label: "机构ID",
                  dbtype: "dbString"
                },
                SYS_FORGNAME: {
                  label: "操作者机构",
                  dbtype: "dbString"
                },
                SYS_FWRITETIME: {
                  label: "制单时间",
                  dbtype: "dbDatetime",
                  format: "yyyy-MM-dd hh:mm:ss"
                },
                SYS_FAUDITTIME: {
                  label: "审核时间",
                  dbtype: "dbDatetime",
                  readonly: true,
                  format: "yyyy-MM-dd hh:mm:ss"
                },
                FREGTIME: {
                  label: "制单时间",
                  dbtype: "dbDatetime",
                  readonly: true,
                  format: "yyyy-MM-dd hh:mm:ss"
                }
              },
              data: []
            }
          ],
          children: [
            {
              controlName: "BirtFormSheet",
              controlId: "BirtFormSheet_01",
              children: [hcQueryPanel]
            }
          ]
        }
      ]
    };
    // if (Object.values(this.conf).length == 0) {
    //   this.conf = {
    //     dataset: {
    //       controlName: "HcDataset",
    //       controlId: "dsUserInfo",
    //       name: "SysUserBizEntity",
    //       modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml",
    //       _infcPush: {
    //         receiveParam: {
    //           default: {
    //             FUSERID: "FUSERID"
    //           }
    //         },
    //         receiveLookupInput: "FUSERNAMEJP"
    //       },
    //       _infcLoad: {
    //         autoActive: true
    //       },
    //       _infcPagging: {
    //         returnCount: true,
    //         pageSize: 10,
    //         pageNum: 1
    //       },
    //       data: []
    //     },
    //     columns: [
    //       {
    //         prop: "FUSERID",
    //         label: "用户ID"
    //       },
    //       {
    //         prop: "FUSERNAME",
    //         label: "用户姓名"
    //       },
    //       {
    //         prop: "FSEX",
    //         label: "性别"
    //       },
    //       {
    //         prop: "FDEPT",
    //         label: "部门  "
    //       },
    //       {
    //         prop: "FNUM",
    //         label: "产能"
    //       }
    //     ],
    //     queryFields: [
    //       {
    //         prop: "FSEX"
    //       }
    //     ],
    //     groupFields: [
    //       {
    //         prop: 'dept',
    //         label: "部门"
    //       },
    //       {
    //         prop: 'name',
    //         label: "姓名"
    //       },
    //       {
    //         prop: 'age',
    //         label: "年龄"
    //       },
    //     ]
    //   };
    // }
  },
  mounted() {  
    this.analysisData=[
      {
        countField: '姓名',
        tableColumn: true,
        tableColumnCount: true,
        chartColumn: true,
        chartColumnCount: true
      }
    ];
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}
.btn-toolbar {
  * + * {
    margin-left: 10px;
    margin-right: 0;
  }
}
.el-dropdown-menu__item {
  min-width: 110px;
}
.center-content {
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.depth-analysis {
  display: flex;
  align-items: center;
  padding: 10px;
}
.el-breadcrumb__item a {
  cursor: pointer !important;
}
</style>