123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458 |
- <template>
- <div class="adm-system">
- <statistics :statistics-msg="statisticsMsg" />
- <div class="hr"></div>
- <div class="operation">
- <el-cascader :options="list" ref="floorCascader" clearable v-model="systemType" :props="optionProps" @change="changeLinshi"
- class="adm-select"></el-cascader>
- <admSearch @SearchValue="SearchValue"/>
- <el-button class="adm-btn" type="default" @click="addDevice">添加系统</el-button>
- </div>
- <div class="content">
- <div v-loading="loading" class="table">
- <template v-if="systemType.length > 0">
- <admMultiTable :currentHeader="currentHeader" :headersStage="headersStage" :tableData="tableData"/>
- <Pagination
- :paginationList="paginationList"
- @handleCurrentChange="handleCurrentChange"
- v-if="tableData.length > 0"
- @handleSizeChange="handleSizeChange"
- />
- </template>
- <div v-else class="void align">
- <svg-icon :height="String(123)" :width="String(120)" name="void" />
- <p class="void-title">暂无内容</p>
- <p class="void-tips">可点击左上角选择系统类型</p>
- </div>
- </div>
- </div>
- <!-- 添加/编辑 系统-->
- <el-dialog :title="deviceMsg" :visible.sync="dialogVisible" @close="close">
- <template v-if="next">
- <div class="align" style="height: 400px">
- <span class="text">系统类别</span>
- <!-- <el-select v-model="systemVal" clearable filterable placeholder="请选择系统类别">-->
- <!-- <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value" />-->
- <!-- </el-select>-->
- </div>
- <el-button class="fr" type="primary" @click="handleNext">下一步</el-button>
- </template>
- <template v-else>
- <dataForm />
- <el-button class="fr ml-10" type="primary">确定</el-button>
- </template>
- </el-dialog>
- </div>
- </template>
- <script lang="ts">
- import { Component, Vue } from "vue-property-decorator";
- import { AdmMultiTable, AdmSearch, dataForm, Pagination, Statistics } from "../components/index";
- import { dictQuery, queryCountSystem, querySystem } from "@/api/datacenter";
- import tools from "@/utils/maintain";
- import { UserModule } from "@/store/modules/user";
- import { allSystem, BeatchQueryParam } from "@/api/equipComponent";
- @Component({
- name: "adm-device",
- components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm },
- })
- export default class extends Vue {
- optionProps = {
- value: 'code',
- label: 'name',
- children: 'children'
- }
- // loading
- loading = false;
- // 下拉数据
- list = [];
- // 信息点集合(表头)
- all = [];
- codeToDataSource = {};
- // 系统类值
- systemType = "";
- // 系统名称 label值
- systemLabel = "";
- systemVal = "";
- currentHeader = "运维阶段";
- tableData = [];
- // 表头阶段信息结合
- headersStage = {};
- // 统计信息对象
- private statisticsMsg = {
- title: "全部系统",
- total: 0,
- };
- // 分页
- private paginationList = {
- page: 1,
- size: 50,
- sizes: [10, 30, 50, 100, 150, 200],
- total: 0,
- };
- // 下一步
- private next = true;
- // 弹窗 title
- private deviceMsg = "添加系统";
- // 弹窗开关
- private dialogVisible = false;
- // 搜索内容
- inputSearch = "";
- // 项目id
- private get projectId(): string {
- return UserModule.projectId;
- }
- created() {
- this.systemList();
- this.dataCount();
- }
- //查询统计数量
- dataCount() {
- queryCountSystem({}).then((res) => {
- this.statisticsMsg.total = res.count;
- });
- }
- systemList() {
- allSystem({}).then((res) => {
- this.list = res.content;
- });
- }
- // 动态信息点
- getBatch(data) {
- let param = {
- groupCode: "WD",
- appId: "datacenter",
- projectId: this.projectId,
- data: [],
- };
- this.all.forEach((head) => {
- if (head.category != "STATIC") {
- data.forEach((item) => {
- let cur = tools.dataForKey(item, head.path);
- if (cur) {
- param.data.push({
- objectId: item.id,
- infoCode: head.code,
- });
- }
- });
- }
- });
- if (param.data.length) {
- BeatchQueryParam(param).then((res) => {
- this.tableData = data.map((item) => {
- res.data.map((child) => {
- if (item.id == child.objectId) {
- if (!!child.data || child.data == 0) {
- this.all.map((head) => {
- if (head.code == child.infoCode) {
- let contentVal = child.data;
- if (this.codeToDataSource[child.infoCode]) {
- contentVal = this.codeToDataSource[child.infoCode][child.data];
- }
- tools.setDataForKey(item, head.path, contentVal);
- }
- });
- } else {
- this.all.map((head) => {
- if (head.code == child.infoCode) {
- tools.setDataForKey(item, head.path, child.error);
- }
- });
- }
- }
- });
- return item;
- });
- });
- }
- }
- // 搜索
- SearchValue(val: string) {
- this.inputSearch = val;
- this.changeLinshi()
- // this.handleFilter(this.systemType)
- }
- // 当前分页
- handleCurrentChange(val: number) {
- this.paginationList.page = val;
- this.changeLinshi()
- // this.handleFilter(this.systemType)
- }
- handleSizeChange(val: number) {
- this.paginationList.size = val;
- this.changeLinshi()
- // this.handleFilter(this.systemType)
- }
- // 添加设备
- addDevice() {
- this.dialogVisible = true;
- }
- //下一步事件
- handleNext() {
- if (this.system) {
- this.next = false;
- }
- }
- // close
- close() {
- this.next = true;
- this.displayLocation = false;
- }
- // todo 临时假数据函数
- private changeLinshi(val) {
- if (this.systemType[1]) {
- let systemLabel = this.$refs["floorCascader"].getCheckedNodes()[0].pathLabels;
- this.systemLabel = systemLabel[1];
- this.loading = true;
- let param = {
- type: this.systemType[1],
- orders: "sort asc, name desc",
- };
- let param2 = {
- filters: this.systemType[1] ? `classCode='${this.systemType[1]}'` : undefined,
- pageNumber: this.paginationList.page,
- pageSize: this.paginationList.size,
- orders: "createTime desc, id asc",
- projectId: this.projectId,
- };
- if (this.inputSearch != "") {
- param2.filters = `localName contain '${this.inputSearch}' or localId contain '${this.inputSearch}'`;
- }
- let promise = new Promise((resolve) => {
- dictQuery(param).then((res) => {
- resolve(res);
- });
- });
- let promise2 = new Promise((resolve) => {
- querySystem(param2).then((res) => {
- resolve(res);
- });
- });
- Promise.all([promise, promise2]).then((res) => {
- let tableData = [];
- this.loading = false;
- // 类型下信息点,重组数据
- let basicInfos = [{ path: "classification", name: "系统分类" }],
- dictStages = [];
- this.all = res[0].content;
- res[0].content.forEach((item) => {
- let i = ["localName", "localId"];
- if (i.includes(item.path)) {
- basicInfos.push(item);
- } else {
- dictStages.push(item);
- }
- });
- this.headersStage = {
- basicInfos: {
- name: "基础信息台账",
- data: basicInfos,
- },
- dictStages: {
- name: "运维阶段",
- data: dictStages,
- },
- };
- this.paginationList.total = res[1].total;
- tableData = res[1].content; // 主体数据
- // 添加系统分类
- this.tableData = tableData.map((item) => {
- item = { ...item, classification: this.systemLabel };
- return item;
- });
- });
- // 动态信息点
- this.codeToDataSource = {};
- this.all.forEach((item) => {
- if (item.dataSource) {
- try {
- this.codeToDataSource[item.code] = {};
- item.dataSource.forEach((dic) => {
- this.codeToDataSource[item.code][dic.code] = dic.name;
- });
- } catch (e) {
- console.log(e);
- }
- }
- });
- this.getBatch(this.tableData);
- } else {
- console.log("void");
- }
- }
- private handleFilter(val) {
- this.systemLabel = val.label;
- if (val) {
- this.loading = true;
- let param = {
- type: val.value,
- orders: "sort asc, name desc",
- };
- let param2 = {
- filters: val ? `classCode='${val.value}'` : undefined,
- pageNumber: this.paginationList.page,
- pageSize: this.paginationList.size,
- orders: "createTime desc, id asc",
- projectId: this.projectId,
- };
- if (this.inputSearch != "") {
- param2.filters = `localName contain '${this.inputSearch}' or localId contain '${this.inputSearch}'`;
- }
- let promise = new Promise((resolve) => {
- dictQuery(param).then((res) => {
- resolve(res);
- });
- });
- let promise2 = new Promise((resolve) => {
- querySystem(param2).then((res) => {
- resolve(res);
- });
- });
- Promise.all([promise, promise2]).then((res) => {
- let tableData = [];
- this.loading = false;
- // 类型下信息点,重组数据
- let basicInfos = [{ path: "classification", name: "系统分类" }],
- dictStages = [];
- this.all = res[0].content;
- res[0].content.forEach((item) => {
- let i = ["localName", "localId"];
- if (i.includes(item.path)) {
- basicInfos.push(item);
- } else {
- dictStages.push(item);
- }
- });
- this.headersStage = {
- basicInfos: {
- name: "基础信息台账",
- data: basicInfos,
- },
- dictStages: {
- name: "运维阶段",
- data: dictStages,
- },
- };
- this.paginationList.total = res[1].total;
- tableData = res[1].content; // 主体数据
- // 添加系统分类
- this.tableData = tableData.map((item) => {
- item = { ...item, classification: this.systemLabel };
- return item;
- });
- });
- // 动态信息点
- this.codeToDataSource = {};
- this.all.forEach((item) => {
- if (item.dataSource) {
- try {
- this.codeToDataSource[item.code] = {};
- item.dataSource.forEach((dic) => {
- this.codeToDataSource[item.code][dic.code] = dic.name;
- });
- } catch (e) {
- console.log(e);
- }
- }
- });
- this.getBatch(this.tableData);
- } else {
- console.log("void");
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- $margin: 12px;
- $border: 1px solid #e1e7ea;
- .align {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- flex-wrap: wrap;
- }
- .adm-system {
- background: #fff;
- padding: 12px;
- height: 100%;
- .operation {
- margin: 12px 0;
- .adm-select {
- margin-right: $margin;
- }
- .adm-btn {
- float: right;
- }
- }
- .hr {
- background: #e1e7ea;
- color: #e1e7ea;
- width: 100%;
- height: 1px;
- margin: 15px 0;
- }
- .content {
- position: relative;
- height: calc(100% - 142px);
- .table {
- //border-left: $border;
- //border-right: $border;
- //border-bottom: $border;
- height: calc(100% - 41px);
- padding: 12px;
- .void {
- margin-top: 200px;
- }
- .void-title {
- color: #333333;
- line-height: 21px;
- font-size: 16px;
- }
- .void-tips {
- color: #9ca1a9;
- line-height: 22px;
- font-size: 14px;
- }
- }
- .adm-multi-table {
- }
- }
- .adm-pagination {
- right: 10px;
- position: absolute;
- bottom: 10px;
- }
- }
- </style>
|