|
@@ -0,0 +1,307 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="tab-content">
|
|
|
|
+ <div class="search">
|
|
|
|
+ <el-cascader
|
|
|
|
+ :options="systemOptions"
|
|
|
|
+ ref="systemCascader"
|
|
|
|
+ clearable
|
|
|
|
+ v-model="systemList"
|
|
|
|
+ :props="optionProps"
|
|
|
|
+ @change="handleChangeSystem"
|
|
|
|
+ class="item"
|
|
|
|
+ ></el-cascader>
|
|
|
|
+ <admSearch @SearchValue="searchValue" class="item" />
|
|
|
|
+ </div>
|
|
|
|
+ <div v-loading="loading" style="height: calc(100% - 100px); padding: 0 12px; position: relative;">
|
|
|
|
+ <template style="height: 100%" v-if="tableData.length">
|
|
|
|
+ <admMultiTable
|
|
|
|
+ @handleCurrentEdit="handleCurrentEdit"
|
|
|
|
+ :isDynamicMap="false"
|
|
|
|
+ :currentHeader="currentHeader"
|
|
|
|
+ :headersStage="headersStage"
|
|
|
|
+ :tableData="tableData"
|
|
|
|
+ />
|
|
|
|
+ <Pagination
|
|
|
|
+ v-if="tableData.length"
|
|
|
|
+ :paginationList="paginationList"
|
|
|
|
+ @handleCurrentChange="handleCurrentChange"
|
|
|
|
+ @handleSizeChange="handleSizeChange"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ <div v-else class="void align">
|
|
|
|
+ <svg-icon name="void" :width="String(120)" :height="String(123)" />
|
|
|
|
+ <p class="void-title">暂无内容</p>
|
|
|
|
+ <p class="void-tips">可点击左上角筛选</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script lang="ts">
|
|
|
|
+import { Vue, Component, Ref } from "vue-property-decorator";
|
|
|
|
+import { allSystem } from "@/api/equipComponent";
|
|
|
|
+import { dictQuery, querySystem } from "@/api/datacenter";
|
|
|
|
+import { AdmMultiTable, AdmSearch, Pagination } from "@/views/maintain/components/index";
|
|
|
|
+import { UserModule } from "@/store/modules/user";
|
|
|
|
+import { ElCascader } from "element-ui/types/cascader";
|
|
|
|
+
|
|
|
|
+@Component({
|
|
|
|
+ name: "SystemTab",
|
|
|
|
+ components: {
|
|
|
|
+ AdmMultiTable,
|
|
|
|
+ AdmSearch,
|
|
|
|
+ Pagination,
|
|
|
|
+ },
|
|
|
|
+})
|
|
|
|
+export default class SystemTab extends Vue {
|
|
|
|
+ // 系统类筛选框
|
|
|
|
+ @Ref("systemCascader") readonly systemCascader!: ElCascader;
|
|
|
|
+
|
|
|
|
+ // 项目id
|
|
|
|
+ private get projectId(): string {
|
|
|
|
+ return UserModule.projectId;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 系统类型
|
|
|
|
+ private get systemType(): string {
|
|
|
|
+ const length = this.systemList.length;
|
|
|
|
+ return length ? this.systemList[length - 1] : "";
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 系统关键字
|
|
|
|
+ private keyWord = "";
|
|
|
|
+ // 系统类下拉绑定值
|
|
|
|
+ private systemList: any = [];
|
|
|
|
+ // 系统类名称
|
|
|
|
+ private systemLabel = "";
|
|
|
|
+ // 系统筛选
|
|
|
|
+ private systemOptions: any[] = [];
|
|
|
|
+ // 下拉框映射
|
|
|
|
+ private optionProps: any = {
|
|
|
|
+ value: "code",
|
|
|
|
+ label: "name",
|
|
|
|
+ children: "children",
|
|
|
|
+ };
|
|
|
|
+ // 表格数据加载loading
|
|
|
|
+ private loading = false;
|
|
|
|
+ // 表格数据
|
|
|
|
+ private tableData: any[] = [];
|
|
|
|
+ // 阶段信息
|
|
|
|
+ private currentHeader = "运维阶段";
|
|
|
|
+ // 表头阶段信息结合
|
|
|
|
+ private headersStage: any = {};
|
|
|
|
+ // 信息点集合(表头)
|
|
|
|
+ private all: any = [];
|
|
|
|
+ // 输入类型选项
|
|
|
|
+ private codeToDataSource: any = {};
|
|
|
|
+
|
|
|
|
+ // 分页
|
|
|
|
+ private paginationList = {
|
|
|
|
+ page: 1,
|
|
|
|
+ size: 50,
|
|
|
|
+ sizes: [10, 30, 50, 100, 150, 200],
|
|
|
|
+ total: 0,
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ // created钩子
|
|
|
|
+ created() {
|
|
|
|
+ this.getSystemOptions();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 系统类数据
|
|
|
|
+ */
|
|
|
|
+ private async getSystemOptions() {
|
|
|
|
+ const res = await allSystem({});
|
|
|
|
+ if (res.result === "success") {
|
|
|
|
+ this.systemOptions = res.content;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 获取系统数据(信息点和系统实例)
|
|
|
|
+ */
|
|
|
|
+ private getSystemData() {
|
|
|
|
+ if (this.systemType) {
|
|
|
|
+ //系统类型不为空
|
|
|
|
+ // @ts-ignore
|
|
|
|
+ const systemLabel = this.systemCascader.getCheckedNodes()[0].pathLabels;
|
|
|
|
+ this.systemLabel = systemLabel[1];
|
|
|
|
+ this.loading = true;
|
|
|
|
+ let param = {
|
|
|
|
+ type: this.systemType,
|
|
|
|
+ orders: "sort asc, name desc",
|
|
|
|
+ };
|
|
|
|
+ let param2 = {
|
|
|
|
+ filters: `classCode='${this.systemType}'`,
|
|
|
|
+ pageNumber: this.paginationList.page,
|
|
|
|
+ pageSize: this.paginationList.size,
|
|
|
|
+ orders: "createTime asc, id asc",
|
|
|
|
+ projectId: this.projectId,
|
|
|
|
+ };
|
|
|
|
+ if (this.keyWord != "") {
|
|
|
|
+ param2.filters += `;localName contain '${this.keyWord}' or localId contain '${this.keyWord}'`;
|
|
|
|
+ }
|
|
|
|
+ let promise = new Promise((resolve) => {
|
|
|
|
+ dictQuery(param).then((res: any) => {
|
|
|
|
+ resolve(res);
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ let promise2 = new Promise((resolve) => {
|
|
|
|
+ querySystem(param2).then((res: any) => {
|
|
|
|
+ resolve(res);
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ Promise.all([promise, promise2]).then((res: any[]) => {
|
|
|
|
+ let tableData = [];
|
|
|
|
+ this.loading = false;
|
|
|
|
+ // 类型下信息点,重组数据
|
|
|
|
+ const { basicInfos, dictStages } = this.informationArrangement(res[0].content);
|
|
|
|
+ this.headersStage = {
|
|
|
|
+ basicInfos: {
|
|
|
|
+ name: "基础信息台账",
|
|
|
|
+ data: basicInfos,
|
|
|
|
+ },
|
|
|
|
+ dictStages: {
|
|
|
|
+ name: "运维阶段",
|
|
|
|
+ data: dictStages,
|
|
|
|
+ },
|
|
|
|
+ };
|
|
|
|
+ this.paginationList.total = res[1]?.total ? res[1].total : 0;
|
|
|
|
+ tableData = res[1]?.content ? res[1].content : []; // 主体数据
|
|
|
|
+ // 添加系统分类
|
|
|
|
+ this.tableData = tableData.map((item: any) => {
|
|
|
|
+ item = { ...item, classification: this.systemLabel };
|
|
|
|
+ return item;
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ //系统类型为空
|
|
|
|
+ this.tableData = [];
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 获取系统实例数据
|
|
|
|
+ */
|
|
|
|
+ private async getExampleData() {
|
|
|
|
+ if (this.systemType) {
|
|
|
|
+ //系统类型不为空
|
|
|
|
+ this.loading = true;
|
|
|
|
+ let params = {
|
|
|
|
+ filters: `classCode='${this.systemType}'`,
|
|
|
|
+ pageNumber: this.paginationList.page,
|
|
|
|
+ pageSize: this.paginationList.size,
|
|
|
|
+ orders: "createTime asc, id asc",
|
|
|
|
+ projectId: this.projectId,
|
|
|
|
+ };
|
|
|
|
+ if (this.keyWord != "") {
|
|
|
|
+ params.filters = `${params.filters};localName contain '${this.keyWord}' or localId contain '${this.keyWord}'`;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const res = await querySystem(params);
|
|
|
|
+ if (res.result === "success") {
|
|
|
|
+ let tableData: any[] = [];
|
|
|
|
+ this.loading = false;
|
|
|
|
+ this.paginationList.total = res?.total ? res.total : 0;
|
|
|
|
+ tableData = res?.content ? res.content : []; // 主体数据
|
|
|
|
+ // 添加系统分类
|
|
|
|
+ this.tableData = tableData.map((item: any) => {
|
|
|
|
+ item = { ...item, classification: this.systemLabel };
|
|
|
|
+ return item;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ //系统类型为空
|
|
|
|
+ this.tableData = [];
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 信息点重组
|
|
|
|
+ */
|
|
|
|
+ private informationArrangement(arr: []): any {
|
|
|
|
+ let basicInfos = [{ path: "classification", name: "系统分类" }],
|
|
|
|
+ dictStages: any[] = [];
|
|
|
|
+ this.all = arr;
|
|
|
|
+ arr.forEach((item: any) => {
|
|
|
|
+ let i = ["localName", "localId"];
|
|
|
|
+ if (item?.dataSource) {
|
|
|
|
+ try {
|
|
|
|
+ this.codeToDataSource[item.code] = {};
|
|
|
|
+ item.dataSource.forEach((dic: any) => {
|
|
|
|
+ this.codeToDataSource[item.code][dic.code] = dic.name;
|
|
|
|
+ });
|
|
|
|
+ } catch (e) {
|
|
|
|
+ console.log(e);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ if (i.includes(item.path)) {
|
|
|
|
+ basicInfos.push(item);
|
|
|
|
+ } else {
|
|
|
|
+ dictStages.push(item);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ return {
|
|
|
|
+ basicInfos,
|
|
|
|
+ dictStages,
|
|
|
|
+ };
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 切换系统类型
|
|
|
|
+ */
|
|
|
|
+ private handleChangeSystem() {
|
|
|
|
+ this.getSystemData();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 检索系统关键字
|
|
|
|
+ */
|
|
|
|
+ private searchValue(val: string) {
|
|
|
|
+ this.keyWord = val;
|
|
|
|
+ this.getExampleData();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 切换页码
|
|
|
|
+ */
|
|
|
|
+ private handleCurrentChange(val: number) {
|
|
|
|
+ this.paginationList.page = val;
|
|
|
|
+ this.getExampleData();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /**
|
|
|
|
+ * 切换每页显示数量
|
|
|
|
+ */
|
|
|
|
+ private handleSizeChange(val: number) {
|
|
|
|
+ this.paginationList.size = val;
|
|
|
|
+ this.getExampleData();
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.tab-content {
|
|
|
|
+ height: 100%;
|
|
|
|
+ border: 1px solid #e1e7ea;
|
|
|
|
+ border-top: none;
|
|
|
|
+ padding-bottom: 12px;
|
|
|
|
+
|
|
|
|
+ .search {
|
|
|
|
+ padding: 12px;
|
|
|
|
+ & > .item {
|
|
|
|
+ margin-right: 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+// 数据暂未
|
|
|
|
+.void {
|
|
|
|
+ margin-top: 200px;
|
|
|
|
+}
|
|
|
|
+.align {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+}
|
|
|
|
+</style>
|