|
@@ -3,33 +3,25 @@
|
|
|
<template v-for="(item, index) in dashboardArray" :key="item.no">
|
|
<template v-for="(item, index) in dashboardArray" :key="item.no">
|
|
|
<component
|
|
<component
|
|
|
:is="item.componentName == undefined ? '' : item.componentName"
|
|
:is="item.componentName == undefined ? '' : item.componentName"
|
|
|
- :dashboard="item" @collapse="collapse($event)" @remove="remove(index)"
|
|
|
|
|
|
|
+ :dashboard="item"
|
|
|
|
|
+ @collapse="collapse($event)"
|
|
|
|
|
+ @remove="remove(index)"
|
|
|
/>
|
|
/>
|
|
|
</template>
|
|
</template>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-
|
|
|
|
|
import { defineComponent } from 'vue';
|
|
import { defineComponent } from 'vue';
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
import Common from '../common/Common.js';
|
|
import Common from '../common/Common.js';
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-import { CssUtil } from 'pc-component-v3';
|
|
|
|
|
|
|
+import { CssUtil,Notify } from 'pc-component-v3';
|
|
|
import { JsUtil } from 'pc-component-v3';
|
|
import { JsUtil } from 'pc-component-v3';
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
|
-
|
|
|
|
|
name: 'DashboardPage',
|
|
name: 'DashboardPage',
|
|
|
-
|
|
|
|
|
- components: {
|
|
|
|
|
-
|
|
|
|
|
- },
|
|
|
|
|
|
|
+
|
|
|
|
|
+ components: {},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
dashboardArray: [],
|
|
dashboardArray: [],
|
|
@@ -37,12 +29,12 @@ export default defineComponent({
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
- mounted: function() {
|
|
|
|
|
|
|
+ mounted: function () {
|
|
|
this.loadData();
|
|
this.loadData();
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
- beforeUnmount: function(){
|
|
|
|
|
- if(this.dashboardArray != null && this.dashboardArray.length > 0){
|
|
|
|
|
|
|
+ beforeUnmount: function () {
|
|
|
|
|
+ if (this.dashboardArray != null && this.dashboardArray.length > 0) {
|
|
|
this.dashboardArray.forEach(item => {
|
|
this.dashboardArray.forEach(item => {
|
|
|
CssUtil.dynamicUnloadCss(item.componentName);
|
|
CssUtil.dynamicUnloadCss(item.componentName);
|
|
|
});
|
|
});
|
|
@@ -50,99 +42,102 @@ export default defineComponent({
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
|
-
|
|
|
|
|
loadData() {
|
|
loadData() {
|
|
|
var _self = this;
|
|
var _self = this;
|
|
|
$.ajax({
|
|
$.ajax({
|
|
|
url: Common.getApiURL('dashboardResource/listDashBoard'),
|
|
url: Common.getApiURL('dashboardResource/listDashBoard'),
|
|
|
type: 'get',
|
|
type: 'get',
|
|
|
dataType: 'json',
|
|
dataType: 'json',
|
|
|
- beforeSend: function(request) {
|
|
|
|
|
|
|
+ beforeSend: function (request) {
|
|
|
Common.addTokenToRequest(request);
|
|
Common.addTokenToRequest(request);
|
|
|
},
|
|
},
|
|
|
- success: function(data) {
|
|
|
|
|
|
|
+ success: function (data) {
|
|
|
_self.dynamicInit(data);
|
|
_self.dynamicInit(data);
|
|
|
},
|
|
},
|
|
|
- error: function(XMLHttpRequest, textStatus, errorThrown) {
|
|
|
|
|
|
|
+ error: function (XMLHttpRequest, textStatus, errorThrown) {
|
|
|
Common.processException(XMLHttpRequest, textStatus, errorThrown);
|
|
Common.processException(XMLHttpRequest, textStatus, errorThrown);
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
- collapse: function(params) {
|
|
|
|
|
|
|
+ collapse: function (params) {
|
|
|
var contentElement = params[0];
|
|
var contentElement = params[0];
|
|
|
contentElement.slideToggle();
|
|
contentElement.slideToggle();
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
- remove: function(index) {
|
|
|
|
|
|
|
+ remove: function (index) {
|
|
|
var _self = this;
|
|
var _self = this;
|
|
|
_self.dashboardArray.splice(index, 1);
|
|
_self.dashboardArray.splice(index, 1);
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * 动态初始化仪表盘
|
|
|
|
|
- */
|
|
|
|
|
- dynamicInit: function(dashboards) {
|
|
|
|
|
|
|
+ * 动态初始化仪表盘
|
|
|
|
|
+ */
|
|
|
|
|
+ dynamicInit: function (dashboards) {
|
|
|
let _self = this;
|
|
let _self = this;
|
|
|
|
|
|
|
|
- if(dashboards != null && dashboards.length > 0) {
|
|
|
|
|
- dashboards.forEach(function(item) {
|
|
|
|
|
|
|
+ if (dashboards != null && dashboards.length > 0) {
|
|
|
|
|
+ dashboards.forEach(function (item) {
|
|
|
console.log(item);
|
|
console.log(item);
|
|
|
// const jsUrl = '' + '/DictionaryBase/Dashboard/BASE/2020080401.js';
|
|
// const jsUrl = '' + '/DictionaryBase/Dashboard/BASE/2020080401.js';
|
|
|
//const jsUrl = '/DictionaryAsset/Dashboard/EAM/20220309_095250.js';
|
|
//const jsUrl = '/DictionaryAsset/Dashboard/EAM/20220309_095250.js';
|
|
|
const componentName = item.componentName;
|
|
const componentName = item.componentName;
|
|
|
|
|
|
|
|
- if(item.cssUrl != null && item.cssUrl != undefined) {
|
|
|
|
|
|
|
+ if (item.cssUrl != null && item.cssUrl != undefined) {
|
|
|
CssUtil.dynamicLoadCss(item.cssUrl, componentName);
|
|
CssUtil.dynamicLoadCss(item.cssUrl, componentName);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
let jsUrl = null;
|
|
let jsUrl = null;
|
|
|
- if(item.jsUrl != null && item.jsUrl != undefined) {
|
|
|
|
|
|
|
+ if (item.jsUrl != null && item.jsUrl != undefined) {
|
|
|
jsUrl = item.jsUrl;
|
|
jsUrl = item.jsUrl;
|
|
|
let promise = JsUtil.dynamicLoadJsModule(jsUrl);
|
|
let promise = JsUtil.dynamicLoadJsModule(jsUrl);
|
|
|
- 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,
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- console.log(_self.dashboardArray);
|
|
|
|
|
- _self.dashboardArray.push(item1);
|
|
|
|
|
- }, errorData => {
|
|
|
|
|
- console.error(errorData);
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ 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,
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ console.log(_self.dashboardArray);
|
|
|
|
|
+ _self.dashboardArray.push(item1);
|
|
|
|
|
+ },
|
|
|
|
|
+ errorData => {
|
|
|
|
|
+ console.error(errorData);
|
|
|
|
|
+ },
|
|
|
|
|
+ );
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
-
|
|
|
|
|
-ul.dropdown-menu>li {
|
|
|
|
|
- padding-left: 1em;
|
|
|
|
|
|
|
+ul.dropdown-menu > li {
|
|
|
|
|
+ padding-left: 1em;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-ul.dropdown-menu>li:hover {
|
|
|
|
|
- background-color: gray;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- color: white;
|
|
|
|
|
|
|
+ul.dropdown-menu > li:hover {
|
|
|
|
|
+ background-color: gray;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: white;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
div.dropdown {
|
|
div.dropdown {
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|