统计分析模块测试

08335 / hivui-platform-template

hivui平台项目模板

Browse code 统计分析模块测试 master
1 parent c209556 commit 540348b30a13ca118822c69675388508d5db1a13 hhb authored on 17 Nov 2022

Showing 5 changed files

Ignore Space Show notes View project/hivuiSam/App.vue
<template> <analysis-sam style="height: 100%;" :conf="conf"></analysis-sam> </template> <script> import { LoadUtil } from "./funclib/LoadUtil"; import { getToken } from "./utils/auth"; import { projectName, requestUrl } from "@birt/config"; import cmps from 'zhc-birt-cmps' import AnalysisSam from './components/analysisSam/Index.vue' export default { data() { return { birtModel: {}, VUE_APP_BASE_API: requestUrl, pn: projectName \|\| "birt", conf:{} }; }, components:{AnalysisSam}, methods: { // 动态加载报表模型方法 birtModelMethod(routePath, birtModelMethod, scope) { debugger return new Promise((resolve, reject) => { let me = this; let token = getToken(); let vId = window.scpRequestData && window.scpRequestData.__viewItemId LoadUtil.loadJsBirtModel({ loadModelUrl: this.$HI.birtModel, routePath: routePath, token: token, pn: this.pn, vId: vId, }) .then((res) => { debugger try { let birtModel = getBirtModel(scope \|\| me, cmps.Tool) resolve(birtModel); } catch (e) { console.error(e); } }) .catch((e) => { reject(e); }); }); }, // loadBirtModel(routePath) { // return new Promise((resolve, reject) => { // let me = this; // this.birtModelMethod(routePath, this.birtModelMethod) // .then((birtModel) => { // debugger // me.conf = birtModel; // console.log("conf", me.conf); // resolve(); // }) // .catch((e) => { // reject(e); // }); // }); // }, // 获取地址栏参数 getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return false; }, }, created() { var path = window.location.pathname; // 编译后多e5 if (window.HIVUI_SETTING) { var serverName = window.HIVUI_SETTING.serverName; if (serverName && path.startsWith(serverName)) { path = path.substring(serverName.length); } } let me = this; let token = getToken(); let vId = window.scpRequestData && window.scpRequestData.__viewItemId LoadUtil.loadJsBirtModel({ loadModelUrl: this.$HI.birtModel, routePath: path, token: token, pn: this.pn, vId: vId, }) .then((res) => { try { let birtModel = getBirtModel(me, cmps.Tool) me.conf = birtModel; console.log("conf", me.conf); } catch (e) { console.error(e); } }) .catch((e) => { console.error(e); }); // this.loadBirtModel(path).then((res) => { // console.log('res', res) // }).catch(e =>{ // console.log('error', e) // }) }, }; </script> <style> html,body{ height: 100%; } </style> <template> <div> <analysisSam :conf="conf"></analysisSam> </div> </template> <script> import { LoadUtil } from "./funclib/LoadUtil"; import { getToken } from "./utils/auth"; import { projectName, requestUrl } from "@birt/config"; import AnalysisSam from './components/analysisSam/Index.vue' export default { data() { return { birtModel: {}, VUE_APP_BASE_API: requestUrl, pn: projectName \|\| "birt", conf:{} }; }, methods: { // 动态加载报表模型方法 birtModelMethod(routePath, birtModelMethod, scope) { return new Promise((resolve, reject) => { let me = this; let token = getToken(); // let token = '3d3fe30c-3d99-41e8-9aea-addd8528aa07' // let vId = this.getQueryVariable('viewItemId') let vId = window.scpRequestData && window.scpRequestData.__viewItemId LoadUtil.loadJsBirtModel({ loadModelUrl: this.$HI.birtModel, routePath: routePath, token: token, pn: this.pn, vId: vId }) .then(() => { try { let birtModel = getBirtModel(scope \|\| me, cmps.Tool) resolve(birtModel); } catch (e) { console.error(e); } }) .catch(() => { reject(); }); }); }, loadBirtModel(routePath) { return new Promise((resolve, reject) => { let me = this; this.birtModelMethod(routePath, this.birtModelMethod) .then((birtModel) => { me.conf = birtModel; console.log("conf", conf); resolve(); }) .catch(() => { reject(); }); }); }, // 获取地址栏参数 getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return false; }, }, mounted() { var path = window.location.pathname; // 编译后多e5 if (window.HIVUI_SETTING) { var serverName = window.HIVUI_SETTING.serverName; if (serverName && path.startsWith(serverName)) { path = path.substring(serverName.length); } } this.loadBirtModel(path).then(() => { }); }, }; </script> <style> html,body{ height: 100%; } </style>

Ignore Space Show notes View

project/hivuiSam/App.vue

<template>
    <analysis-sam style="height: 100%;" :conf="conf"></analysis-sam>
</template>
<script>
import { LoadUtil } from "./funclib/LoadUtil";
import { getToken } from "./utils/auth";
import { projectName, requestUrl } from "@birt/config";
import cmps from 'zhc-birt-cmps'
import AnalysisSam from './components/analysisSam/Index.vue'
export default {
  data() {
    return {
      birtModel: {},
      VUE_APP_BASE_API: requestUrl,
      pn: projectName || "birt",
      conf:{}
    };
  },
  components:{AnalysisSam},
  methods: {
    // 动态加载报表模型方法
    birtModelMethod(routePath, birtModelMethod, scope) {
      debugger
      return new Promise((resolve, reject) => {
        let me = this;
        let token = getToken();
        let vId = window.scpRequestData && window.scpRequestData.__viewItemId
        LoadUtil.loadJsBirtModel({
          loadModelUrl: this.$HI.birtModel,
          routePath: routePath,
          token: token,
          pn: this.pn,
          vId: vId,
        })
          .then((res) => {
            debugger
            try {
              let birtModel = getBirtModel(scope || me, cmps.Tool)
              resolve(birtModel);
            } catch (e) {
              console.error(e);
            }
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // loadBirtModel(routePath) {
    //   return new Promise((resolve, reject) => {
    //     let me = this;
    //     this.birtModelMethod(routePath, this.birtModelMethod)
    //       .then((birtModel) => {
    //         debugger
    //         me.conf = birtModel;
    //         console.log("conf", me.conf);
    //         resolve();
    //       })
    //       .catch((e) => {
    //         reject(e);
    //       });
    //   });
    // },
    // 获取地址栏参数
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    },
  },
  created() {
    var path = window.location.pathname;
    // 编译后多e5
    if (window.HIVUI_SETTING) {
      var serverName = window.HIVUI_SETTING.serverName;
      if (serverName && path.startsWith(serverName)) {
        path = path.substring(serverName.length);
      }
    }
    let me = this;
    let token = getToken();
    let vId = window.scpRequestData && window.scpRequestData.__viewItemId
    LoadUtil.loadJsBirtModel({
      loadModelUrl: this.$HI.birtModel,
      routePath: path,
      token: token,
      pn: this.pn,
      vId: vId,
    })
      .then((res) => {
        try {
          let birtModel = getBirtModel(me, cmps.Tool)
          me.conf = birtModel;
          console.log("conf", me.conf);
        } catch (e) {
          console.error(e);
        }
      })
      .catch((e) => {
        console.error(e);
      });
    // this.loadBirtModel(path).then((res) => {
    //   console.log('res', res)
    // }).catch(e =>{
    //   console.log('error', e)
    // })
  },
};
</script>
<style>
html,body{
  height: 100%;
}
</style>

<template>
  <div>
    <analysisSam :conf="conf"></analysisSam>
  </div>
</template>
<script>
import { LoadUtil } from "./funclib/LoadUtil";
import { getToken } from "./utils/auth";
import { projectName, requestUrl } from "@birt/config";
import AnalysisSam from './components/analysisSam/Index.vue'
export default {
  data() {
    return {
      birtModel: {},
      VUE_APP_BASE_API: requestUrl,
      pn: projectName || "birt",
      conf:{}
    };
  },
  methods: {
    // 动态加载报表模型方法
    birtModelMethod(routePath, birtModelMethod, scope) {
      return new Promise((resolve, reject) => {
        let me = this;
        let token = getToken();
        // let token = '3d3fe30c-3d99-41e8-9aea-addd8528aa07'
        // let vId = this.getQueryVariable('viewItemId')
        let vId = window.scpRequestData && window.scpRequestData.__viewItemId
        LoadUtil.loadJsBirtModel({
          loadModelUrl: this.$HI.birtModel,
          routePath: routePath,
          token: token,
          pn: this.pn,
          vId: vId
        })
          .then(() => {
            try {
              let birtModel = getBirtModel(scope || me, cmps.Tool)
              resolve(birtModel);
            } catch (e) {
              console.error(e);
            }
          })
          .catch(() => {
            reject();
          });
      });
    },
    loadBirtModel(routePath) {
      return new Promise((resolve, reject) => {
        let me = this;
        this.birtModelMethod(routePath, this.birtModelMethod)
          .then((birtModel) => {
            me.conf = birtModel;
            console.log("conf", conf);
            resolve();
          })
          .catch(() => {
            reject();
          });
      });
    },
    // 获取地址栏参数
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    },
  },
  mounted() {
    var path = window.location.pathname;
    // 编译后多e5
    if (window.HIVUI_SETTING) {
      var serverName = window.HIVUI_SETTING.serverName;
      if (serverName && path.startsWith(serverName)) {
        path = path.substring(serverName.length);
      }
    }
    this.loadBirtModel(path).then(() => {
    });
  },
};
</script>
<style>
html,body{
  height: 100%;
}
</style>

Ignore Space Show notes View project/hivuiSam/components/analysisSam/Index.vue
<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="mini" ></el-checkbox> <el-checkbox v-model="perspective" label="直接透视" border size="mini" ></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() { if(this.showDetail){ return this.dataFields }else{ return this.groupFields.concat(this.analyseFields) } }, // 数据列 dataFields(){ return this.conf && this.conf.dataFields \|\| [] }, // 图表配置 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 }) } // 添加详情 analysisFields.push( { prop: 'detail', label: "详情", value: 1 } ) return analysisFields }, // 查询字段 queryFields(){ let queryFields = [] let fields = this.conf && this.conf.queryFields if(!fields \|\| fields.length == 0){ queryFields = [] }else{ queryFields = fields.map(item =>{ let obj = {} obj.prop = item.prop if(item.element){ let dbtype = ''; let lookup = false switch(item.element){ case "el-date-picker": dbtype = 'dbDatetime'; case "DtInput": dbtype = 'dbString'; case "DtNumerical": dbtype = 'dbInt'; case "DtNumericalRange": dbtype = 'dbInt'; case "DtDateTime": dbtype = 'dbDatetime'; case "DtSwitch": dbtype = 'dbInt'; case "DtLookup": dbtype = 'dbString'; lookup = '' } obj.dbtype = dbtype }else{ obj.dbtype = 'dbString' } return obj }) } return queryFields }, // 数据集 dataset(){ return this.conf && this.conf.dataset }, // 查询面板 birtModelRight(){ let rows = this.queryFields.map(item =>{ return {children:[item]} }) let cols = this.queryFields.map(item =>{ return { colWidth: 60 } }) const queryPanel = { rows: rows, cols: cols }; let hcQueryPanel = { controlName: "HcQueryPanel", controlId: "HcQueryPanel_sam", inline: false, dataset: this.dataset && this.dataset.controlId \|\| "dsSam", size: "small", hideBtn: true, style: "width: 100%;", children: [] }; Object.assign(hcQueryPanel, QueryStyleFactory.buildForm(queryPanel) \|\| {}); let 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: [].concat(this.dataset ? this.dataset : []), children: [ { controlName: "BirtFormSheet", controlId: "BirtFormSheet_01", children: [hcQueryPanel] } ] } ] }; return birtModelRight }, // 分组条件(统计字段) groupFields(){ return this.conf && this.conf.groupFields \|\| [] }, // 分析字段 analyseFields(){ return this.conf && this.conf.analyseFields \|\| [] }, // 显示详情 showDetail(){ return this.currentObj.prop == 'detail' } }, watch:{ conf:{ deep: true, handler: function(val){ debugger if(val && val.groupFields){ this.groupForm.prop = val.groupFields[0] && val.groupFields[0].prop } } } }, 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: [] } ] } ] }, 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[_this.dataset.controlId].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[this.dataset.controlId].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[this.dataset.controlId].query(); this.$refs.chartConf && this.$refs.chartConf.refreshChart(); } }, created() { }, mounted() { this.$nextTick(() =>{ 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> <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>

Ignore Space Show notes View

project/hivuiSam/components/analysisSam/Index.vue

<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="mini"
      ></el-checkbox>
      <el-checkbox
        v-model="perspective"
        label="直接透视"
        border
        size="mini"
      ></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>

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

Ignore Space Show notes View project/hivuiSam/funclib/LoadUtil.js
/** * 原生动态加载后台资源js,json工具类 * @author cls * @date 2021-01-30 * import { LoadUtil } from "@birt/funclib/LoadUtil"; / export const LoadUtil = { loadJs(url) { return new Promise((resolve, reject) => { let srcArr = document.getElementsByTagName("script"); let hasLoaded = false; for (let i = 0; i < srcArr.length; i++) { //判断当前js是否加载上 hasLoaded = (srcArr[i].src == url) ? true : false; } if (hasLoaded) { resolve(); return; } let script = document.createElement('script') script.type = 'text/javascript'; script.src = url; document.body.appendChild(script); script.onload = () => { resolve(); } script.onerror = () => { reject(); } }) }, loadCss(url) { let linkArr = document.getElementsByTagName("link"); let hasLoaded = false; for (let i = 0; i < linkArr.length; i++) { //判断当前css是否加载上 hasLoaded = (linkArr[i].href == url) ? true : false; } if (hasLoaded) { return; } let link = document.createElement('link') console.log('link==>', link) link.rel = 'stylesheet'; link.href = url; document.body.appendChild(link); }, // 动态加载报表模型(js) loadJsBirtModel({ loadModelUrl, routePath, token,pn,vId }) { return new Promise((resolve, reject) => { let url = this._getBirtModelUrl(loadModelUrl, routePath, token,pn,vId); this.loadJs(url).then((response) => { resolve(); }).catch(() => { reject(); }) }) }, // 获取加载报表模型地址 _getBirtModelUrl(loadModelUrl, routePath, token,pn,vId) { // let pi = routePath.lastIndexOf("."); // if (pi != -1) { // routePath = routePath.substring(0, pi); // } if(routePath && routePath.endsWith('.flow')){ routePath = routePath.replace('.flow', '.js') } if(routePath && routePath.endsWith('.js')){ routePath = `/deploy${routePath}` } let url = `${loadModelUrl}?bizpath=${routePath}&access_token=${token}&pn=${pn}`; if(vId){ url += `&viewItemId=${vId}` } return url; } }; /* * 原生动态加载后台资源js,json工具类 * @author cls * @date 2021-01-30 * import { LoadUtil } from "@birt/funclib/LoadUtil"; */ export const LoadUtil = { loadJs(url) { return new Promise((resolve, reject) => { let srcArr = document.getElementsByTagName("script"); let hasLoaded = false; for (let i = 0; i < srcArr.length; i++) { //判断当前js是否加载上 hasLoaded = (srcArr[i].src == url) ? true : false; } if (hasLoaded) { resolve(); return; } let script = document.createElement('script') script.type = 'text/javascript'; script.src = url; document.body.appendChild(script); script.onload = () => { resolve(); } script.onerror = () => { reject(); } }) }, loadCss(url) { let linkArr = document.getElementsByTagName("link"); let hasLoaded = false; for (let i = 0; i < linkArr.length; i++) { //判断当前css是否加载上 hasLoaded = (linkArr[i].href == url) ? true : false; } if (hasLoaded) { return; } let link = document.createElement('link') console.log('link==>', link) link.rel = 'stylesheet'; link.href = url; document.body.appendChild(link); }, // 动态加载报表模型(js) loadJsBirtModel({ loadModelUrl, routePath, token,pn,vId }) { return new Promise((resolve, reject) => { let url = this._getBirtModelUrl(loadModelUrl, routePath, token,pn,vId); this.loadJs(url).then((response) => { resolve(); }).catch(() => { reject(); }) }) }, // 获取加载报表模型地址 _getBirtModelUrl(loadModelUrl, routePath, token,pn,vId) { // let pi = routePath.lastIndexOf("."); // if (pi != -1) { // routePath = routePath.substring(0, pi); // } if(routePath && routePath.endsWith('.flow')){ routePath = routePath.replace('.flow', '.js') } if(routePath && routePath.endsWith('.js')){ routePath = `/deploy${routePath}` } let url = `${loadModelUrl}?bizpath=${routePath}&access_token=${token}&pn=${pn}`; if(vId){ url += `&viewItemId=${vId}` } return url; } };

Ignore Space Show notes View

project/hivuiSam/funclib/LoadUtil.js

/**
 * 原生 动态加载后台资源js,json工具类
 * @author cls
 * @date 2021-01-30
 * import { LoadUtil } from "@birt/funclib/LoadUtil";
 */

export const LoadUtil = {
  loadJs(url) {
    return new Promise((resolve, reject) => {
      let srcArr = document.getElementsByTagName("script");
      let hasLoaded = false;
      for (let i = 0; i < srcArr.length; i++) {
        //判断当前js是否加载上
        hasLoaded = (srcArr[i].src == url) ? true : false;
      }
      if (hasLoaded) {
        resolve();
        return;
      }
      let script = document.createElement('script')
      script.type = 'text/javascript';
      script.src = url;
      document.body.appendChild(script);
      script.onload = () => {
        resolve();
      }
      script.onerror = () => {
        reject();
      }
    })
  },
  loadCss(url) {
    let linkArr = document.getElementsByTagName("link");
    let hasLoaded = false;
    for (let i = 0; i < linkArr.length; i++) {
      //判断当前css是否加载上
      hasLoaded = (linkArr[i].href == url) ? true : false;
    }
    if (hasLoaded) {
      return;
    }
    let link = document.createElement('link')
    console.log('link==>', link)
    link.rel = 'stylesheet';
    link.href = url;
    document.body.appendChild(link);
  },
  // 动态加载报表模型(js)
  loadJsBirtModel({ loadModelUrl, routePath, token,pn,vId }) {
    return new Promise((resolve, reject) => {
      let url = this._getBirtModelUrl(loadModelUrl, routePath, token,pn,vId);
      this.loadJs(url).then((response) => {
        resolve();
      }).catch(() => {
        reject();
      })
    })
  },
  // 获取加载报表模型地址
  _getBirtModelUrl(loadModelUrl, routePath, token,pn,vId) {
    // let pi = routePath.lastIndexOf(".");
    // if (pi != -1) {
    //   routePath = routePath.substring(0, pi);
    // }
    if(routePath && routePath.endsWith('.flow')){
      routePath = routePath.replace('.flow', '.js')
    }
    if(routePath && routePath.endsWith('.js')){
      routePath = `/deploy${routePath}`
    }
    let url = `${loadModelUrl}?bizpath=${routePath}&access_token=${token}&pn=${pn}`;
    if(vId){
      url += `&viewItemId=${vId}`
    }
    return url;
  }
};

/**
 * 原生 动态加载后台资源js,json工具类
 * @author cls
 * @date 2021-01-30
 * import { LoadUtil } from "@birt/funclib/LoadUtil";
 */

Ignore Space Show notes View project/hivuiSam/hiSetting.js
var root = "http://192.168.4.105:7777" var server = "/e5"; var oauth = ""; var projectName = "${projectName}" var pName = projectName.split("/")[0]; var user = projectName.split("/")[1]; let appSettion = { projectName: projectName, url: eap.request, //默认服务url serverUrl: root + server, //授权服务url oauth: root + oauth, //数据保存url saveUrl: root + server + "/data/save", //'/data/save', //数据查询url queryUrl: root + server + "/data/query", //'/data/query', querysUrl: root + server + "/data/querys", //'/data/query', //数据策略url policyUrl: root + server + "/data/policy", //附件上传url upload: root + server + "/file/upload", //附件下载url download: root + server + "/file/download", //附件查看url preview: root + server + "/file/preview", //流程信息url getFlowInfo: root + server + "/flow/open", getApprovalInfo: root + server + "/flow/getApprovalInfo", processFlow: root + server + "/flow/processFlow", queryTask: root + server + "/flow/queryTask", withdrawtask: root + server + "/flow/withdrawtask", taskDiagram: root + server + "/flow/taskDiagram", openOrdernumber: root + server + "/flow/openOrdernumber", enumsUrl: root + server + "/platf/xtgn/enums/fgroupid/", policyUrl: root + server + "/data/policy", birtModel: root + server + "/birt/model1", getProcessInfo: root + server + '/flow/getProcessInfo', } if (window.dynamicSetting) { appSettion = Object.assign(appSettion, window.dynamicSetting) } let notUrlKey = ["projectName"] for (let prop in appSettion) { if (notUrlKey.indexOf(prop) && appSettion[prop] && typeof (appSettion[prop]) == 'string' && !appSettion[prop].toLowerCase().startsWith("http")) appSettion[prop] = appSettion.url + appSettion[prop]; } export default appSettion; var root = "http://192.168.4.106:7777" var server = ""; var oauth = ""; var projectName = "${projectName}" var pName = projectName.split("/")[0]; var user = projectName.split("/")[1]; let appSettion = { projectName: projectName, url: eap.request, //默认服务url serverUrl: root + server, //授权服务url oauth: root + oauth, //数据保存url saveUrl: root + server + "/data/save", //'/data/save', //数据查询url queryUrl: root + server + "/data/query", //'/data/query', querysUrl: root + server + "/data/querys", //'/data/query', //数据策略url policyUrl: root + server + "/data/policy", //附件上传url upload: root + server + "/file/upload", //附件下载url download: root + server + "/file/download", //附件查看url preview: root + server + "/file/preview", //流程信息url getFlowInfo: root + server + "/flow/open", getApprovalInfo: root + server + "/flow/getApprovalInfo", processFlow: root + server + "/flow/processFlow", queryTask: root + server + "/flow/queryTask", withdrawtask: root + server + "/flow/withdrawtask", taskDiagram: root + server + "/flow/taskDiagram", openOrdernumber: root + server + "/flow/openOrdernumber", enumsUrl: root + server + "/platf/xtgn/enums/fgroupid/", policyUrl: root + server + "/data/policy", birtModel: root + server + "/birt/model1", getProcessInfo: root + server + '/flow/getProcessInfo', } if (window.dynamicSetting) { appSettion = Object.assign(appSettion, window.dynamicSetting) } let notUrlKey = ["projectName"] for (let prop in appSettion) { if (notUrlKey.indexOf(prop) && appSettion[prop] && typeof (appSettion[prop]) == 'string' && !appSettion[prop].toLowerCase().startsWith("http")) appSettion[prop] = appSettion.url + appSettion[prop]; } export default appSettion;

Ignore Space Show notes View

project/hivuiSam/hiSetting.js

export default appSettion;

export default appSettion;

Ignore Space Show notes View project/hivuiSam/index.js
import App from './App.vue' // import ElementUI from 'element-ui'; // import "hi-ui/lib/hi-ui.css"; // import 'font-awesome/css/font-awesome.css' Vue.use(ELEMENT, { size: 'mini' }) import Message from './components/vue-m-message' Vue.use(Message) // will mount `Vue.prototype.$message` import HIUI from "hi-ui"; import "hi-ui/lib/hi-ui.css"; import ZhcBirtCmps from 'zhc-birt-cmps' Vue.use(HIUI) Vue.use(ZhcBirtCmps) import Cookies from 'js-cookie' import { setToken, } from "./utils/auth.js"; // Vue.use(ElementUI) console.log('token', Cookies.get('EAP-Token')) setToken(Cookies.get('EAP-Token') \|\| '') import axios from "./funclib/AxiosUtil"; import hiSetting from './hiSetting' import * as echarts from "echarts" Vue.prototype.$echarts = echarts; Vue.prototype.$HI = { projectName: hiSetting.projectName, serverUrl: hiSetting.serverUrl, serverName: hiSetting.serverName, request: axios, queryOperate: 'like', pageSize: 20, saveUrl: hiSetting.saveUrl, queryUrl: hiSetting.queryUrl, querysUrl: hiSetting.serverUrl + "/data/querys", policyUrl: hiSetting.policyUrl, enumsUrl: hiSetting.serverUrl + "/platf/xtgn/enums/fgroupid/", upload: hiSetting.upload, download: hiSetting.download, preview: hiSetting.preview \|\| hiSetting.review, getFlowInfo: hiSetting.getFlowInfo, getApprovalInfo: hiSetting.getApprovalInfo, processFlow: hiSetting.processFlow, queryTask: hiSetting.queryTask, withdrawtask: hiSetting.withdrawtask, taskDiagram: hiSetting.taskDiagram, openOrdernumber: hiSetting.openOrdernumber, birtModel: hiSetting.serverUrl + "/birt/model1", getProcessInfo: hiSetting.serverUrl + '/flow/getProcessInfo', exportUrl: hiSetting.serverUrl + "/export/dataexcel" }; // Vue.prototype.$HI = { // projectName: window.HIVUI_SETTING.projectName, // serverUrl: window.HIVUI_SETTING.serverUrl, // serverName: window.HIVUI_SETTING.serverName, // request: axios, // queryOperate: 'like', // pageSize: 20, // saveUrl: window.HIVUI_SETTING.saveUrl, // queryUrl: window.HIVUI_SETTING.queryUrl, // querysUrl: window.HIVUI_SETTING.serverUrl + "/data/querys", // policyUrl: window.HIVUI_SETTING.policyUrl, // enumsUrl: window.HIVUI_SETTING.serverUrl + "/platf/xtgn/enums/fgroupid/", // upload: window.HIVUI_SETTING.upload, // download: window.HIVUI_SETTING.download, // preview: window.HIVUI_SETTING.preview \|\| window.HIVUI_SETTING.review, // getFlowInfo: window.HIVUI_SETTING.getFlowInfo, // getApprovalInfo: window.HIVUI_SETTING.getApprovalInfo, // processFlow: window.HIVUI_SETTING.processFlow, // queryTask: window.HIVUI_SETTING.queryTask, // withdrawtask: window.HIVUI_SETTING.withdrawtask, // taskDiagram: window.HIVUI_SETTING.taskDiagram, // openOrdernumber: window.HIVUI_SETTING.openOrdernumber, // birtModel: window.HIVUI_SETTING.serverUrl + "/birt/model1", // getProcessInfo: window.HIVUI_SETTING.serverUrl + '/flow/getProcessInfo', // exportUrl: window.HIVUI_SETTING.serverUrl + "/export/dataexcel" // }; new Vue({ render: h => h(App), }).$mount('#app') import App from './App.vue' // import ElementUI from 'element-ui'; // import "hi-ui/lib/hi-ui.css"; // import 'font-awesome/css/font-awesome.css' Vue.use(ELEMENT, { size: 'mini' }) import Message from './components/vue-m-message' Vue.use(Message) // will mount `Vue.prototype.$message` import HIUI from "hi-ui"; import "hi-ui/lib/hi-ui.css"; import ZhcBirtCmps from 'zhc-birt-cmps' Vue.use(HIUI) Vue.use(ZhcBirtCmps) import Cookies from 'js-cookie' import { setToken, } from "./utils/auth.js"; // Vue.use(ElementUI) console.log('token', Cookies.get('EAP-Token')) setToken(Cookies.get('EAP-Token') \|\| '') import axios from "./funclib/AxiosUtil"; Vue.prototype.$HI = { projectName: window.HIVUI_SETTING.projectName, serverUrl: window.HIVUI_SETTING.serverUrl, serverName: window.HIVUI_SETTING.serverName, request: axios, queryOperate: 'like', pageSize: 20, saveUrl: window.HIVUI_SETTING.saveUrl, queryUrl: window.HIVUI_SETTING.queryUrl, querysUrl: window.HIVUI_SETTING.serverUrl + "/data/querys", policyUrl: window.HIVUI_SETTING.policyUrl, enumsUrl: window.HIVUI_SETTING.serverUrl + "/platf/xtgn/enums/fgroupid/", upload: window.HIVUI_SETTING.upload, download: window.HIVUI_SETTING.download, preview: window.HIVUI_SETTING.preview \|\| window.HIVUI_SETTING.review, getFlowInfo: window.HIVUI_SETTING.getFlowInfo, getApprovalInfo: window.HIVUI_SETTING.getApprovalInfo, processFlow: window.HIVUI_SETTING.processFlow, queryTask: window.HIVUI_SETTING.queryTask, withdrawtask: window.HIVUI_SETTING.withdrawtask, taskDiagram: window.HIVUI_SETTING.taskDiagram, openOrdernumber: window.HIVUI_SETTING.openOrdernumber, birtModel: window.HIVUI_SETTING.serverUrl + "/birt/model1", getProcessInfo: window.HIVUI_SETTING.serverUrl + '/flow/getProcessInfo', exportUrl: window.HIVUI_SETTING.serverUrl + "/export/dataexcel" }; new Vue({ i18n, render: h => h(App), }).$mount('#app')

Ignore Space Show notes View

project/hivuiSam/index.js

import App from './App.vue'

// import ElementUI from 'element-ui';
// import "hi-ui/lib/hi-ui.css";
// import 'font-awesome/css/font-awesome.css'
Vue.use(ELEMENT, {
  size: 'mini'
})
import Message from './components/vue-m-message'
Vue.use(Message) // will mount `Vue.prototype.$message`
import HIUI from "hi-ui";
import "hi-ui/lib/hi-ui.css";

import ZhcBirtCmps from 'zhc-birt-cmps'
Vue.use(HIUI)
Vue.use(ZhcBirtCmps)
import Cookies from 'js-cookie'
import {
  setToken,
} from "./utils/auth.js";
// Vue.use(ElementUI)
console.log('token', Cookies.get('EAP-Token'))
setToken(Cookies.get('EAP-Token') || '')

import axios from "./funclib/AxiosUtil";
import hiSetting from './hiSetting'
import * as echarts from "echarts"
Vue.prototype.$echarts = echarts;

Vue.prototype.$HI = {
  projectName: hiSetting.projectName,
  serverUrl: hiSetting.serverUrl,
  serverName: hiSetting.serverName,
  request: axios,
  queryOperate: 'like',
  pageSize: 20,
  saveUrl: hiSetting.saveUrl,
  queryUrl: hiSetting.queryUrl,
  querysUrl: hiSetting.serverUrl + "/data/querys",
  policyUrl: hiSetting.policyUrl,
  enumsUrl: hiSetting.serverUrl + "/platf/xtgn/enums/fgroupid/",
  upload: hiSetting.upload,
  download: hiSetting.download,
  preview: hiSetting.preview || hiSetting.review,
  getFlowInfo: hiSetting.getFlowInfo,
  getApprovalInfo: hiSetting.getApprovalInfo,
  processFlow: hiSetting.processFlow,
  queryTask: hiSetting.queryTask,
  withdrawtask: hiSetting.withdrawtask,
  taskDiagram: hiSetting.taskDiagram,
  openOrdernumber: hiSetting.openOrdernumber,
  birtModel: hiSetting.serverUrl + "/birt/model1",
  getProcessInfo: hiSetting.serverUrl + '/flow/getProcessInfo',
  exportUrl: hiSetting.serverUrl + "/export/dataexcel"
};
// Vue.prototype.$HI = {
//   projectName: window.HIVUI_SETTING.projectName,
//   serverUrl: window.HIVUI_SETTING.serverUrl,
//   serverName: window.HIVUI_SETTING.serverName,
//   request: axios,
//   queryOperate: 'like',
//   pageSize: 20,
//   saveUrl: window.HIVUI_SETTING.saveUrl,
//   queryUrl: window.HIVUI_SETTING.queryUrl,
//   querysUrl: window.HIVUI_SETTING.serverUrl + "/data/querys",
//   policyUrl: window.HIVUI_SETTING.policyUrl,
//   enumsUrl: window.HIVUI_SETTING.serverUrl + "/platf/xtgn/enums/fgroupid/",
//   upload: window.HIVUI_SETTING.upload,
//   download: window.HIVUI_SETTING.download,
//   preview: window.HIVUI_SETTING.preview || window.HIVUI_SETTING.review,
//   getFlowInfo: window.HIVUI_SETTING.getFlowInfo,
//   getApprovalInfo: window.HIVUI_SETTING.getApprovalInfo,
//   processFlow: window.HIVUI_SETTING.processFlow,
//   queryTask: window.HIVUI_SETTING.queryTask,
//   withdrawtask: window.HIVUI_SETTING.withdrawtask,
//   taskDiagram: window.HIVUI_SETTING.taskDiagram,
//   openOrdernumber: window.HIVUI_SETTING.openOrdernumber,
//   birtModel: window.HIVUI_SETTING.serverUrl + "/birt/model1",
//   getProcessInfo: window.HIVUI_SETTING.serverUrl + '/flow/getProcessInfo',
//   exportUrl: window.HIVUI_SETTING.serverUrl + "/export/dataexcel"
// };

new Vue({
  render: h => h(App),
}).$mount('#app')

import App from './App.vue'

import axios from "./funclib/AxiosUtil";

Vue.prototype.$HI = {
  projectName: window.HIVUI_SETTING.projectName,
  serverUrl: window.HIVUI_SETTING.serverUrl,
  serverName: window.HIVUI_SETTING.serverName,
  request: axios,
  queryOperate: 'like',
  pageSize: 20,
  saveUrl: window.HIVUI_SETTING.saveUrl,
  queryUrl: window.HIVUI_SETTING.queryUrl,
  querysUrl: window.HIVUI_SETTING.serverUrl + "/data/querys",
  policyUrl: window.HIVUI_SETTING.policyUrl,
  enumsUrl: window.HIVUI_SETTING.serverUrl + "/platf/xtgn/enums/fgroupid/",
  upload: window.HIVUI_SETTING.upload,
  download: window.HIVUI_SETTING.download,
  preview: window.HIVUI_SETTING.preview || window.HIVUI_SETTING.review,
  getFlowInfo: window.HIVUI_SETTING.getFlowInfo,
  getApprovalInfo: window.HIVUI_SETTING.getApprovalInfo,
  processFlow: window.HIVUI_SETTING.processFlow,
  queryTask: window.HIVUI_SETTING.queryTask,
  withdrawtask: window.HIVUI_SETTING.withdrawtask,
  taskDiagram: window.HIVUI_SETTING.taskDiagram,
  openOrdernumber: window.HIVUI_SETTING.openOrdernumber,
  birtModel: window.HIVUI_SETTING.serverUrl + "/birt/model1",
  getProcessInfo: window.HIVUI_SETTING.serverUrl + '/flow/getProcessInfo',
  exportUrl: window.HIVUI_SETTING.serverUrl + "/export/dataexcel"
};

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

Show line notes below