<template> <div class='dashboard'> <row v-if="isEnableCustomized"> <app-build @handleClick="handleClick"></app-build> </row> <row v-if="!isHasCustomized"> <i-col :md="{ span: 24, offset: 0 }"> <card class="portlet-card" :bordered="false" dis-hover :padding="0"> <span> <div class='portlet-container dashboard-viewdashboard-container1 ' :style="{}"> <row> <i-col :md="{ span: 24, offset: 0 }" :lg="{ span: 6, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card" :bordered="false" dis-hover :padding="0"> <span> <div class='portlet-container dashboard-viewdashboard-container3 container-backgroundcolor-blue' :style="{}"> <row> <i-col :md="{ span: 24, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10"> <span> <view_dashboard_sysportlet4 :viewState="viewState" :viewparams="viewparams" :context="context" :height="100" :width="0" name="dashboard_sysportlet4" ref='dashboard_sysportlet4' @closeview="closeView($event)"> </view_dashboard_sysportlet4> </span> </card> </div> </i-col> </row> </div> </span> </card> </div> </i-col> <i-col :md="{ span: 24, offset: 0 }" :lg="{ span: 6, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card" :bordered="false" dis-hover :padding="0"> <span> <div class='portlet-container dashboard-viewdashboard-container4 container-backgroundcolor-green' :style="{}"> <row> <i-col :md="{ span: 24, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10"> <span> <view_dashboard_sysportlet6 :viewState="viewState" :viewparams="viewparams" :context="context" :height="100" :width="0" name="dashboard_sysportlet6" ref='dashboard_sysportlet6' @closeview="closeView($event)"> </view_dashboard_sysportlet6> </span> </card> </div> </i-col> </row> </div> </span> </card> </div> </i-col> <i-col :md="{ span: 24, offset: 0 }" :lg="{ span: 6, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card" :bordered="false" dis-hover :padding="0"> <span> <div class='portlet-container dashboard-viewdashboard-container5 container-backgroundcolor-orange' :style="{}"> <row> <i-col :md="{ span: 24, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10"> <span> <view_dashboard_sysportlet7 :viewState="viewState" :viewparams="viewparams" :context="context" :height="100" :width="0" name="dashboard_sysportlet7" ref='dashboard_sysportlet7' @closeview="closeView($event)"> </view_dashboard_sysportlet7> </span> </card> </div> </i-col> </row> </div> </span> </card> </div> </i-col> <i-col :md="{ span: 24, offset: 0 }" :lg="{ span: 6, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card" :bordered="false" dis-hover :padding="0"> <span> <div class='portlet-container dashboard-viewdashboard-container6 container-backgroundcolor-none' :style="{}"> <row> <i-col :md="{ span: 24, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10"> <span> <view_dashboard_sysportlet3 :viewState="viewState" :viewparams="viewparams" :context="context" :height="100" :width="0" name="dashboard_sysportlet3" ref='dashboard_sysportlet3' @closeview="closeView($event)"> </view_dashboard_sysportlet3> </span> </card> </div> </i-col> </row> </div> </span> </card> </div> </i-col> <i-col :md="{ span: 24, offset: 0 }" :lg="{ span: 12, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10"> <span> <view_dashboard_sysportlet1 :viewState="viewState" :viewparams="viewparams" :context="context" :height="400" :width="0" name="dashboard_sysportlet1" ref='dashboard_sysportlet1' @closeview="closeView($event)"> </view_dashboard_sysportlet1> </span> </card> </div> </i-col> <i-col :md="{ span: 24, offset: 0 }" :lg="{ span: 12, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10"> <span> <view_dashboard_sysportlet2 :viewState="viewState" :viewparams="viewparams" :context="context" :height="400" :width="0" name="dashboard_sysportlet2" ref='dashboard_sysportlet2' @closeview="closeView($event)"> </view_dashboard_sysportlet2> </span> </card> </div> </i-col> <i-col :md="{ span: 24, offset: 0 }"> <div class="portlet-without-title"> <card class="portlet-card" :bordered="false" dis-hover :padding="0"> <span> <div class='portlet-container dashboard-viewdashboard-container2 ' :style="{}"> <div style = 'display : flex; justify-content :center; align-items:center;'> <div class="portlet-without-title"> <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10"> <span> <view_dashboard_sysportlet5 :viewState="viewState" :viewparams="viewparams" :context="context" :height="0" :width="0" name="dashboard_sysportlet5" ref='dashboard_sysportlet5' @closeview="closeView($event)"> </view_dashboard_sysportlet5> </span> </card> </div> </div> </div> </span> </card> </div> </i-col> </row> </div> </span> </card> </i-col> </row> <row v-if="isHasCustomized" style="width: 100%;min-height: calc(100% - 40px);"> <div class="portlet-container" style="position: relative;width:100%;"> <template v-for="(item, index) of modelDta"> <div :key="index" :style="{zIndex: 10, position: 'absolute', height: item.h*layoutRowH + 'px', width: `calc(100% / ${layoutColNum} * ${item.w})`,top: item.y*layoutRowH + 'px', left: `calc(100% / ${layoutColNum} * ${item.x})`}"> <component :key="$util.createUUID()" :is="item.componentName" :name="item.portletCodeName" :context="JSON.parse(JSON.stringify(context))" :viewDefaultUsage="false" :isAdaptiveSize="true" :viewState="viewState"></component> </div> </template> </div> </row> </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 AppCenterService from "@service/app/app-center-service"; import IBIZOrderEntityService from '@/service/ibizorder/ibizorder-service'; import UsrService from './usr-dashboard-service'; import IBIZOrderUIService from '@/uiservice/ibizorder/ibizorder-ui-service'; import UtilService from '@/utilservice/util-service'; @Component({ components: { } }) export default class UsrBase extends Vue implements ControlInterface { /** * 名称 * * @type {string} * @memberof UsrBase */ @Prop() public name?: string; /** * 视图通讯对象 * * @type {Subject<ViewState>} * @memberof UsrBase */ @Prop() public viewState!: Subject<ViewState>; /** * 应用上下文 * * @type {*} * @memberof UsrBase */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof UsrBase */ @Prop() public viewparams!: any; /** * 视图状态事件 * * @public * @type {(Subscription | undefined)} * @memberof UsrBase */ public viewStateEvent: Subscription | undefined; /** * 获取部件类型 * * @returns {string} * @memberof UsrBase */ public getControlType(): string { return 'DASHBOARD' } /** * 计数器服务对象集合 * * @type {Array<*>} * @memberof UsrBase */ public counterServiceArray:Array<any> = []; /** * 建构部件服务对象 * * @type {UsrService} * @memberof UsrBase */ public service: UsrService = new UsrService({ $store: this.$store }); /** * 实体服务对象 * * @type {IBIZOrderService} * @memberof UsrBase */ public appEntityService: IBIZOrderEntityService = new IBIZOrderEntityService({ $store: this.$store }); /** * 转化数据 * * @param {any} args * @memberof UsrBase */ public transformData(args: any) { let _this: any = this; if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){ return _this.service.handleRequestData('transform',_this.context,args)['data']; } } /** * 关闭视图 * * @param {any} args * @memberof UsrBase */ public closeView(args: any): void { let _this: any = this; _this.$emit('closeview', [args]); } /** * 计数器刷新 * * @memberof UsrBase */ 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(); } }) } } /** * 是否支持看板定制 * * @public * @type {(boolean)} * @memberof UsrBase */ @Prop() public isEnableCustomized!:boolean; /** * 是否已有看板定制 * * @public * @type {(boolean)} * @memberof UsrBase */ public isHasCustomized:boolean = false; /** * 模型数据 * * @public * @type {(*)} * @memberof UsrBase */ public modelDta:any; /** * modleId * * @type {string} * @memberof UsrBase */ public modelId:string = "dashboard_ibizorder_usr"; /** * 建构功能服务对象 * * @type {UtilService} * @memberof UsrBase */ public utilService:UtilService = new UtilService(); /** * 功能服务名称 * * @type {string} * @memberof UsrBase */ public utilServiceName:string = ""; /** * 获取多项数据 * * @returns {any[]} * @memberof UsrBase */ public getDatas(): any[] { return []; } /** * 获取单项树 * * @returns {*} * @memberof UsrBase */ public getData(): any { return {}; } /** * vue 生命周期 * * @memberof UsrBase */ public created() { this.afterCreated(); } /** * 执行created后的逻辑 * * @memberof UsrBase */ public afterCreated(){ if (this.viewState) { this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => { if (!Object.is(tag, this.name)) { return; } if (Object.is('load', action)) { this.loadModel(); } }); } } /** * 动态设计水平列数 * * @memberof UsrBase */ public layoutColNum:number = 12; /** * 动态设计单元格高度,80px * * @memberof UsrBase */ public layoutRowH:number = 80; /** * 通知状态 * * @memberof UsrBase */ public notifyState(){ this.$nextTick(() =>{ if (this.isHasCustomized) { if (this.modelDta && this.modelDta.length > 0) { this.modelDta.forEach((item: any) => { this.viewState.next({ tag: item.portletCodeName, action: "load", data: JSON.parse(JSON.stringify(this.viewparams)) }); }); } } else { if (this.viewState) { const refs: any = this.$refs; Object.keys(refs).forEach((name: string) => { this.viewState.next({ tag: name, action: "load", data: JSON.parse(JSON.stringify(this.viewparams)) }); }); } } }) } /** * 加载布局与数据模型 * * @memberof UsrBase */ public loadModel(){ if(this.isEnableCustomized){ this.utilService.getService(this.utilServiceName).then((service:any) =>{ service.loadModelData(JSON.parse(JSON.stringify(this.context)),{modelid:this.modelId,utilServiceName:this.utilServiceName}).then((res:any) =>{ if(res && res.status == 200){ const data:any = res.data; if(data && data.length >0){ this.isHasCustomized = true; this.modelDta = data; this.$forceUpdate(); }else{ this.isHasCustomized = false; } this.notifyState(); }else{ console.error("加载面板模型异常"); this.isHasCustomized = false; this.notifyState(); } }).catch((error:any)=>{ console.error("加载面板模型异常"); console.error(error); this.isHasCustomized = false; this.notifyState(); }); }) }else{ this.notifyState(); } } /** * 处理私人定制按钮 * * @memberof UsrBase */ public handleClick(){ const view:any ={ viewname: 'app-portal-design', title: (this.$t('app.dashBoard.handleClick.title')), width: 1600, placement: 'DRAWER_RIGHT' } const viewparam:any ={ modelid:this.modelId, utilServiceName:this.utilServiceName, appdeName:'IBIZOrder' } const appdrawer = this.$appdrawer.openDrawer(view, JSON.parse(JSON.stringify(this.context)), viewparam); appdrawer.subscribe((result: any) => { if(Object.is(result.ret,'OK')){ this.loadModel(); } }); } /** * vue 生命周期 * * @memberof UsrBase */ public destroyed() { this.afterDestroy(); } /** * 执行destroyed后的逻辑 * * @memberof UsrBase */ public afterDestroy() { if (this.viewStateEvent) { this.viewStateEvent.unsubscribe(); } } } </script> <style lang='less'> @import './usr-dashboard.less'; </style>