<template> <div class='portlet ctrl-chart ' :style="{'height': isAdaptiveSize ? 'calc(100% - 16px)' : getHeight,}"> <p class='portlet-title'> <span> 部件图表 </span> </p> <el-divider class="divider"></el-divider> <div class="portlet-with-title"> <!-- 测试 --> <view_db_sysportlet3_chart :viewState="viewState" :viewparams="viewparams" :context="context" :viewCtx="viewCtx" fetchAction="FetchDefault" :showBusyIndicator="true" name="db_sysportlet3_chart" ref='db_sysportlet3_chart' @closeview="closeView($event)"> </view_db_sysportlet3_chart> </div> </div> </template> <script lang='tsx'> import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator'; import { CreateElement } from 'vue'; import { Subject, Subscription } from 'rxjs'; import { ControlInterface } from '@/interface/control'; import { UIActionTool,Util, ViewTool } from '@/utils'; import NavDataService from '@/service/app/navdata-service'; import IBIZAPPCTRLService from '@/service/ibizappctrl/ibizappctrl-service'; import CtrlChartService from './ctrl-chart-portlet-service'; import IBIZAPPCTRLUIService from '@/uiservice/ibizappctrl/ibizappctrl-ui-service'; import UIService from '@/uiservice/ui-service'; import { Environment } from '@/environments/environment'; @Component({ components: { } }) export default class IBIZAPPCTRLCtrlChartBase extends Vue implements ControlInterface { /** * 名称 * * @type {string} * @memberof CtrlChartBase */ @Prop() public name?: string; /** * 视图通讯对象 * * @type {Subject<ViewState>} * @memberof CtrlChartBase */ @Prop() public viewState!: Subject<ViewState>; /** * 应用上下文 * * @type {*} * @memberof CtrlChartBase */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof CtrlChartBase */ @Prop() public viewparams!: any; /** * 视图操作参数 * * @type {*} * @memberof CtrlChartBase */ @Prop() public viewCtx!: any; /** * 视图状态事件 * * @public * @type {(Subscription | undefined)} * @memberof CtrlChartBase */ public viewStateEvent: Subscription | undefined; /** * 获取部件类型 * * @returns {string} * @memberof CtrlChartBase */ public getControlType(): string { return 'PORTLET' } /** * 计数器服务对象集合 * * @type {Array<*>} * @memberof CtrlChartBase */ public counterServiceArray:Array<any> = []; /** * 建构部件服务对象 * * @type {CtrlChartService} * @memberof CtrlChartBase */ public service: CtrlChartService = new CtrlChartService({ $store: this.$store }); /** * 实体服务对象 * * @type {IBIZAPPCTRLService} * @memberof CtrlChartBase */ public appEntityService: IBIZAPPCTRLService = new IBIZAPPCTRLService({ $store: this.$store }); /** * 界面UI服务对象 * * @type {IBIZAPPCTRLUIService} * @memberof CtrlChartBase */ public appUIService:IBIZAPPCTRLUIService = new IBIZAPPCTRLUIService(); /** * 关闭视图 * * @param {any} args * @memberof CtrlChartBase */ public closeView(args: any): void { let _this: any = this; _this.$emit('closeview', [args]); } /** * 计数器刷新 * * @memberof CtrlChartBase */ public counterRefresh(){ const _this:any =this; if(_this.counterServiceArray && _this.counterServiceArray.length >0){ _this.counterServiceArray.forEach((item:any) =>{ if(item.refreshData && item.refreshData instanceof Function){ item.refreshData(); } }) } } /** * 长度 * * @type {number} * @memberof CtrlChartBase */ @Prop() public height?: number; /** * 宽度 * * @type {number} * @memberof CtrlChartBase */ @Prop() public width?: number; /** * 门户部件类型 * * @type {string} * @memberof CtrlChartBase */ public portletType: string = 'chart'; /** * 部件类型 * * @type {string} * @memberof CtrlChartBase */ public controlType: string = 'PORTLET'; /** * 视图默认使用 * * @type {string} * @memberof CtrlChartBase */ @Inject({from:'navModel',default: 'tab'}) public navModel!:string; /** * 界面行为模型数据 * * @memberof CtrlChartBase */ public uiactionModel: any = { } /** * 是否自适应大小 * * @returns {boolean} * @memberof CtrlChartBase */ @Prop({default: false})public isAdaptiveSize!: boolean; /** * 获取多项数据 * * @returns {any[]} * @memberof CtrlChartBase */ public getDatas(): any[] { return []; } /** * 获取单项树 * * @returns {*} * @memberof CtrlChartBase */ public getData(): any { return {}; } /** * 获取高度 * * @returns {any[]} * @memberof CtrlChartBase */ get getHeight(){ if(!this.$util.isEmpty(this.height) && !this.$util.isNumberNaN(this.height)){ if(this.height == 0){ return 'auto'; }else{ return this.height+'px'; } }else{ return '400px'; } } /** * 刷新 * * @memberof CtrlChartBase */ public refresh(args?: any) { this.viewState.next({ tag: 'db_sysportlet3_chart', action: 'refresh', data: args }); } /** * vue 生命周期 * * @memberof CtrlChartBase */ public created() { this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof CtrlChartBase */ public afterCreated(){ if (this.viewState) { this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if(Object.is(tag, "all-portlet") && Object.is(action,'loadmodel')){ this.calcUIActionAuthState(data); } if (!Object.is(tag, this.name)) { return; } const refs: any = this.$refs; Object.keys(refs).forEach((_name: string) => { this.viewState.next({ tag: _name, action: action, data: data }); }); }); } } /** * vue 生命周期 * * @memberof CtrlChartBase */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof CtrlChartBase */ public afterDestroy() { if (this.viewStateEvent) { this.viewStateEvent.unsubscribe(); } } /** * 计算界面行为权限 * * @memberof CtrlChartBase */ public calcUIActionAuthState(data:any = {}) { // 如果是操作栏,不计算权限 if(this.portletType && Object.is('actionbar', this.portletType)) { return; } let _this: any = this; let uiservice: any = _this.appUIService ? _this.appUIService : new UIService(); if(_this.uiactionModel){ ViewTool.calcActionItemAuthState(data,_this.uiactionModel,uiservice); } } } </script> <style lang='less'> @import './ctrl-chart-portlet.less'; </style>