123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380 |
- <template>
- <div class="tab-content" >
- <div class="search">
- <el-cascader
- :options="deviceOptions"
- clearable
- v-model="deviceList"
- :props="optionProps"
- @change="handleChangeDevice"
- class="item"
- ></el-cascader>
- <admSearch @SearchValue="searchValue" class="item"/>
- <el-upload
- style="float: right"
- action="https://jsonplaceholder.typicode.com/posts/"
- :show-file-list="false"
- multiple
- >
- <el-button>上传Excle</el-button>
- </el-upload>
- <el-button style="float: right; margin-right: 12px" @click="handleClickDownload">下载模板</el-button>
- </div>
- <div v-loading="loading" style="height: calc(100% - 100px); padding: 0 12px; position: relative">
- <template style="height: 100%" v-if="tableData.length">
- <admMultiTable
- ref="table"
- @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>
- <!--编辑 设备-->
- <el-dialog title="编辑设备" :visible.sync="dialogVisible">
- <template>
- <baseDataForm :objectHeaders="headersStage" :currRowContent="currRowContent" ref="baseDataForm"/>
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false">取消</el-button>
- <el-button type="primary" @click="handleDataForm">完成</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
- </template>
- <script lang="ts">
- import { Vue, Component, Ref } from "vue-property-decorator";
- import { allDevice, dictInfo } from "@/api/equipComponent";
- import { queryEquip, updateEquip } from "@/api/datacenter";
- import { AdmMultiTable, AdmSearch, Pagination, baseDataForm } from "@/views/maintain/components/index";
- import { UserModule } from "@/store/modules/user";
- import tools from "@/utils/maintain";
- @Component({
- name: "EquipTab",
- components: {
- AdmMultiTable,
- AdmSearch,
- Pagination,
- baseDataForm
- },
- })
- export default class EquipTab extends Vue {
- // 信息点输入组组件
- @Ref("baseDataForm") readonly baseDataForm!: baseDataForm;
- // 项目id
- private get projectId(): string {
- return UserModule.projectId;
- }
- // 设备类型
- private get deviceType(): string {
- const length = this.deviceList.length;
- return length ? this.deviceList[length - 1] : "";
- }
- // 设备关键字
- private keyWord = "";
- // 设备类下拉绑定值
- private deviceList: any = [];
- // 设备筛选
- private deviceOptions: 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,
- };
- // 当前编辑行的数据
- private currRowContent: any = {};
- // 弹窗开关
- private dialogVisible = false;
- // created钩子
- created() {
- this.getDeviceOptions();
- }
- /**
- * 设备类数据
- */
- private async getDeviceOptions() {
- const res = await allDevice({});
- if (res.result === "success") {
- this.deviceOptions = res.content;
- }
- }
- /**
- * 获取设备数据(信息点和实例数据)
- */
- private getEquipData() {
- if (this.deviceType) {
- this.loading = true;
- let param = {
- category: this.deviceType,
- };
- let param2 = {
- filters: `classCode='${ this.deviceType }'`,
- pageNumber: this.paginationList.page,
- pageSize: this.paginationList.size,
- orders: "createTime desc, id asc",
- projectId: this.projectId,
- };
- if (this.keyWord != "") {
- param2.filters += `;codeName contain '${ this.keyWord }' or systemCategory contain '${ this.keyWord }' or bimTypeId contain '${ this.keyWord }' or localId contain '${ this.keyWord }'`;
- }
- let promise = new Promise((resolve) => {
- dictInfo(param).then((res: any) => {
- resolve(res);
- });
- });
- let promise2 = new Promise((resolve) => {
- queryEquip(param2).then((res: any) => {
- resolve(res);
- });
- });
- Promise.all([promise, promise2]).then((res: any[]) => {
- this.loading = false;
- // 获取运维阶段名称
- this.currentHeader = res[0]?.dictStages.find((item: any) => {
- return item.code === "moms";
- })?.name;
- this.headersStage = this.informationArrangement(res[0]); // 重组表头数据
- this.tableData = res[1]?.content ? res[1].content : []; // 主体数据
- this.paginationList.total = res[1]?.total ? res[1].total : 0;
- });
- } else {
- this.tableData = [];
- }
- }
- /**
- * 获取系统实例数据
- */
- private async getExampleData() {
- if (this.deviceType) {
- this.loading = true;
- let params = {
- filters: `classCode='${ this.deviceType }'`,
- pageNumber: this.paginationList.page,
- pageSize: this.paginationList.size,
- orders: "createTime desc, id asc",
- projectId: this.projectId,
- };
- if (this.keyWord != "") {
- params.filters += `;codeName contain '${ this.keyWord }' or systemCategory contain '${ this.keyWord }' or bimTypeId contain '${ this.keyWord }' or localId contain '${ this.keyWord }'`;
- }
- const res = await queryEquip(params);
- if (res.result === "success") {
- setTimeout(() => {
- this.tableData = res?.content ? res.content : []; // 主体数据
- this.paginationList.total = res?.total ? res.total : 0;
- this.loading = false;
- });
- }
- } else {
- this.tableData = [];
- }
- }
- /**
- * 信息点重组
- */
- private informationArrangement(data: any): any {
- if (data?.basicInfos && data?.dictStages) {
- const base: any[] = [];
- data.dictStages.forEach((item: any) => {
- if (this.currentHeader === item.name) {
- item?.infos.forEach((val: any) => {
- base.push(val);
- });
- }
- });
- // 信息点集合
- this.all = [...data.basicInfos, ...base];
- this.codeToDataSource = {};
- this.all.forEach((item: any) => {
- 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);
- }
- }
- });
- return {
- basicInfos: {
- name: "基础信息台账",
- data: data.basicInfos,
- },
- dictStages: {
- name: this.currentHeader,
- data: base,
- },
- };
- } else {
- return {};
- }
- }
- /**
- * 切换设备类型
- */
- private handleChangeDevice() {
- this.paginationList.page = 1;
- this.paginationList.size = 50;
- this.getEquipData();
- }
- /**
- * 检索设备关键字
- */
- private searchValue(val: string) {
- this.keyWord = val;
- this.getExampleData();
- }
- /**
- * 下载模板
- */
- private handleClickDownload() {
- console.log("下载模板");
- }
- /**
- * 上传Excle
- */
- /**
- * 切换页码
- */
- private handleCurrentChange(val: number) {
- this.paginationList.page = val;
- this.getExampleData();
- }
- /**
- * 切换每页显示数量
- */
- private handleSizeChange(val: number) {
- this.paginationList.size = val;
- this.getExampleData();
- }
- /**
- * 编辑当前行
- */
- handleCurrentEdit(val: any) {
- this.currRowContent = val;
- this.dialogVisible = true;
- }
- /**
- * 添加/编辑 事件处理
- */
- private handleDataForm() {
- this.baseDataForm.submitForm(this.handleDataFormSave);
- }
- /**
- * 更新设备数据
- */
- private async handleDataFormSave() {
- let from = tools.formatData(this.baseDataForm.form);
- if (from?.id) {
- const param = {
- content: [from],
- };
- const res = await updateEquip(param);
- if (res.result === "success") {
- this.$message.success("更新成功");
- this.dialogVisible = false;
- 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;
- }
- }
- }
- // 数据暂未
- .align {
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- flex-wrap: wrap;
- }
- ::v-deep .el-dialog {
- .el-dialog__body {
- padding: 20px;
- max-height: 550px !important;
- min-height: 100px;
- overflow-y: auto;
- overflow-x: hidden;
- }
- }
- ::v-deep .el-select,
- .el-date-editor.el-input,
- .el-date-editor.el-input__inner {
- width: 100%;
- }
- ::v-deep .el-dialog__header {
- border-bottom: 1px solid #d8d8d8;
- }
- </style>
|