|
|
@@ -0,0 +1,153 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <template v-for="(item, index) in dashboardArray" :key="item.no">
|
|
|
+ <component
|
|
|
+ :is="item.componentName == undefined ? '' : item.componentName"
|
|
|
+ :dashboard="item" @collapse="collapse($event)" @remove="remove(index)"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import { defineComponent } from 'vue';
|
|
|
+import { Notify, Uuid } from 'pc-component-v3';
|
|
|
+
|
|
|
+
|
|
|
+import Common from '../common/Common.js';
|
|
|
+//import AssetDashboardClient from '../../dashboard/eam/AssetDashboardClient.vue';
|
|
|
+//import AssetDashboardOrg from '../../dashboard/eam/AssetDashboardOrg.vue';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+
|
|
|
+ name: 'DashboardPage',
|
|
|
+
|
|
|
+ components: {
|
|
|
+ //AssetDashboardClient,
|
|
|
+ //AssetDashboardOrg,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dashboardArray: [],
|
|
|
+ moduleDtos: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted: function() {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeUnmount: function(){
|
|
|
+ //if(this.dashboardArray != null && this.dashboardArray.length > 0){
|
|
|
+ // this.dashboardArray.forEach(item => {
|
|
|
+ // CssUtil.dynamicUnloadCss(item.componentName);
|
|
|
+ // });
|
|
|
+ //}
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ loadData() {
|
|
|
+ var _self = this;
|
|
|
+ $.ajax({
|
|
|
+ url: Common.getApiURL('dashboardResource/listDashBoard'),
|
|
|
+ type: 'get',
|
|
|
+ dataType: 'json',
|
|
|
+ beforeSend: function(request) {
|
|
|
+ Common.addTokenToRequest(request);
|
|
|
+ },
|
|
|
+ success: function(data) {
|
|
|
+ _self.dynamicInit(data);
|
|
|
+ },
|
|
|
+ error: function(XMLHttpRequest, textStatus, errorThrown) {
|
|
|
+ Common.processException(XMLHttpRequest, textStatus, errorThrown);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ collapse: function(params) {
|
|
|
+ var contentElement = params[0];
|
|
|
+ contentElement.slideToggle();
|
|
|
+ },
|
|
|
+
|
|
|
+ remove: function(index) {
|
|
|
+ var _self = this;
|
|
|
+ _self.dashboardArray.splice(index, 1);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 动态初始化仪表盘
|
|
|
+ */
|
|
|
+ dynamicInit: function(dashboards) {
|
|
|
+ let _self = this;
|
|
|
+
|
|
|
+ if(dashboards != null && dashboards.length > 0) {
|
|
|
+ dashboards.forEach(function(item) {
|
|
|
+ console.log(item);
|
|
|
+ const componentName = item.componentName;
|
|
|
+
|
|
|
+ let vueName = null;
|
|
|
+ if(item.vueName != null && item.vueName != undefined) {
|
|
|
+ vueName = item.vueName;
|
|
|
+ let promise = null;
|
|
|
+
|
|
|
+ promise = new Promise((resolve, reject) => {
|
|
|
+ // import('../../../../Dictionary' + vueName).then(remoteComponent => {
|
|
|
+ // resolve(remoteComponent);
|
|
|
+ // }).catch(error => {
|
|
|
+ // reject(error);
|
|
|
+ // });
|
|
|
+ });
|
|
|
+
|
|
|
+ promise.then(remoteComponent => {
|
|
|
+ console.log('remoteComponent:' + remoteComponent.default.name);
|
|
|
+ if(componentName !== remoteComponent.default.name){
|
|
|
+ let errorMessage = '数据字典-仪表盘中部件名称定义的是' + componentName + ',但是程序中name定义的是' + remoteComponent.default.name + ',两者必须相同。';
|
|
|
+ console.error(errorMessage);
|
|
|
+ Notify.error('仪表盘定义错误', errorMessage, false);
|
|
|
+ }
|
|
|
+ window.app.component(componentName, remoteComponent.default);
|
|
|
+ var item1 = {
|
|
|
+ no: componentName,
|
|
|
+ componentName: componentName,
|
|
|
+ sortNo: item.sortNo,
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log(_self.dashboardArray);
|
|
|
+ _self.dashboardArray.push(item1);
|
|
|
+
|
|
|
+ function sortFunction(a, b){
|
|
|
+ return a.sortNo - b.sortNo;
|
|
|
+ }
|
|
|
+
|
|
|
+ _self.dashboardArray.sort(sortFunction);
|
|
|
+ }, errorData => {
|
|
|
+ console.error(errorData);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+ul.dropdown-menu>li {
|
|
|
+ padding-left: 1em;
|
|
|
+}
|
|
|
+
|
|
|
+ul.dropdown-menu>li:hover {
|
|
|
+ background-color: gray;
|
|
|
+ cursor: pointer;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+div.dropdown {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+</style>
|