123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407 |
- <template>
- <div class="adm-system">
- <statistics :statistics-msg="statisticsMsg"/>
- <div class="hr"></div>
- <div class="operation">
- <el-select
- v-model="systemType"
- class="adm-select"
- clearable
- filterable
- placeholder="请选择系统类别"
- @change="handleFilter"
- >
- <el-option
- v-for="item in list"
- :key="item.code"
- :label="item.name"
- :value="{ value: item.code,label: item.name }"
- />
- </el-select>
- <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">
- <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 { dictCategoryQuery, dictQuery, queryCountSystem, querySystem } from "@/api/datacenter";
- import tools from "@/utils/maintain"
- import { UserModule } from "@/store/modules/user";
- import { BeatchQueryParam } from "@/api/equipComponent";
- @Component({
- name: 'adm-device',
- components: { Statistics, AdmSearch, AdmMultiTable, Pagination, dataForm }
- })
- export default class extends Vue {
- // 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() {
- let param = {
- type: 'system'
- }
- dictCategoryQuery(param).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.handleFilter(this.systemType)
- }
- // 当前分页
- handleCurrentChange(val: number) {
- this.paginationList.page = val
- this.handleFilter(this.systemType)
- }
- handleSizeChange(val: number) {
- this.paginationList.size = val
- this.handleFilter(this.systemType)
- }
- // 添加设备
- addDevice() {
- this.dialogVisible = true
- }
- //下一步事件
- handleNext() {
- if (this.system) {
- this.next = false
- }
- }
- // close
- close() {
- this.next = true
- this.displayLocation = false
- }
- 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 {
- height: 100%;
- .table {
- //border-left: $border;
- //border-right: $border;
- //border-bottom: $border;
- //height: calc(100% - 180px);
- 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: 40px;
- position: absolute;
- bottom: 30px;
- }
- }
- </style>
|