Browse Source

主要设备清单 点击行 弹窗初步修改

simon 4 years ago
parent
commit
2de9e39230

+ 488 - 0
src/views/equipment/table/eqDetaileDialog1.vue

@@ -0,0 +1,488 @@
+<template>
+    <!-- 详情页面 -->
+    <div class='gdqd-dialog'>
+        <div class='top'></div>
+        <div class='gdqd-dialog-top'>
+            <el-input
+                placeholder='搜索设备简称编号'
+                style='width:192px;margin-right:12px'
+                size='small'
+                prefix-icon='el-icon-search'
+                v-model='sbjc'
+                clearable
+                @keyup.enter.native='queryTableList'
+                @blur='queryTableList'
+            ></el-input>
+            <Select v-model='sbglgs' width='180' tipPlace='top' caption='管理归属:' size='small' :selectdata='sbglgsOption' @change='queryTableList'></Select>
+            <Select
+                width='160'
+                style='margin: 0 12px;'
+                v-model='status'
+                tipPlace='top'
+                caption='设备状态:'
+                size='small'
+                :selectdata='statusOption'
+                @change='queryTableList'
+            ></Select>
+            <el-input
+                placeholder='搜索品牌、型号'
+                style='width:180px;margin-right:12px'
+                size='small'
+                clearable
+                prefix-icon='el-icon-search'
+                v-model='brand'
+                @keyup.enter.native='queryTableList'
+                @blur='queryTableList'
+            ></el-input>
+            <Select
+                width='150'
+                style='margin-right:12px;'
+                v-model='floor'
+                tipPlace='top'
+                caption='楼层:'
+                size='small'
+                :selectdata='floorAllSelect'
+                @change='queryTableList'
+            ></Select>
+            <el-input
+                placeholder='搜索安装位置'
+                @keyup.enter.native='queryTableList'
+                @blur='queryTableList'
+                clearable
+                style='width:180px;margin-right:12px'
+                size='small'
+                prefix-icon='el-icon-search'
+                v-model='wzjc'
+            ></el-input>
+            <!-- 多余的筛选 -->
+            <!-- 注释 -->
+            <!-- <input-dialog :type='1' @confirm='confirm'></input-dialog> -->
+        </div>
+        <div class='table1'>
+            <el-table
+                @row-click='innerTable'
+                :data='tableData'
+                :key='key'
+                :border='true'
+                style='width: 100%;'
+                :height='160'
+                :max-height='250'
+                :row-style='{height: "30px"}'
+            >
+                <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
+                <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width='150'>
+                    <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
+                </el-table-column>
+                <el-table-column prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80'>
+                    <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
+                </el-table-column>
+                <!-- <el-table-column prop='sl' label='数量' width='60'>
+                <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
+                </el-table-column>-->
+                <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
+                    <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template>
+                </el-table-column>
+                <el-table-column prop='sb_status' label='设备状态' width='80' show-overflow-tooltip resizable>
+                    <template slot-scope='{row}'>{{row.sb_status || '--'}}</template>
+                </el-table-column>
+                <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable width='80'>
+                    <template slot-scope='{row}'>{{row.brand || '--'}}</template>
+                </el-table-column>
+                <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='80'>
+                    <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
+                </el-table-column>
+                <el-table-column prop='floor' sortable label='楼层' width='70' show-overflow-tooltip resizable>
+                    <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
+                </el-table-column>
+                <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable min-width='150'>
+                    <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
+                </el-table-column>
+                <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='150'>
+                    <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
+                </el-table-column>
+                <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable min-width='150'>
+                    <template slot-scope='{row}'>{{row.fws || '--'}}</template>
+                </el-table-column>
+                <el-table-column prop label='相关资料' show-overflow-tooltip resizable min-width='150'>
+                    <template slot-scope='{row}'>{{'--'}}</template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <!-- 注释底部分页 -->
+        <!-- <div class='foot'>
+            <el-pagination
+                background
+                layout='prev, pager, next'
+                :total='total'
+                :current-page.sync='page'
+                :page-size='size'
+                @prev-click='pageChanged'
+                @next-click='pageChanged'
+                @current-change='pageChanged'
+            ></el-pagination>
+        </div>-->
+
+        <!-- 底部表格 -->
+        <div class='table-bottom'>
+            <div class='title'>
+                <div class='text'>维保:</div>
+                <div class='d-tab d-tab-left' :class='{active:currentTab === 1}' @click='()=> currentTab = 1'>重要维保</div>
+                <div class='d-tab d-tab-right' :class='{active:currentTab === 2}' @click='()=> currentTab = 2'>日常维保</div>
+                <div class='text text-r'>维修:</div>
+                <div class='d-tab d-tab-left' :class='{active:currentTab === 3}' @click='()=> currentTab = 3'>重要维修</div>
+                <div class='d-tab d-tab-right' :class='{active:currentTab === 4}' @click='()=> currentTab = 4'>日常维修</div>
+                <!-- <el-tabs v-model='activeName' class='tab2' @tab-click='changeTable'> -->
+            </div>
+            <!-- TODO: 显示各个表格 -->
+            <div class='table2-container'>
+                <wbTable ref='wb1' :smsxt='1004' tabLabel='重要维保' diff :assetnum='11266' :size='3' />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { Select } from 'meri-design'
+import { mapGetters } from 'vuex'
+import { queryAsset } from '@/api/equipmentList.js'
+import { querySelect } from '@/api/public.js'
+import inputDialog from './inputDIalog'
+import wbTable from './wbTable'
+
+export default {
+    data() {
+        return {
+            tableData: [],
+            dataSelect2: [
+                { id: 'test1', name: '选择项' },
+                { id: 'test2', name: '单平米' },
+                { id: 'test3', name: '下级分项' },
+                { id: 'test4', name: '滑动平均滑动平均' },
+            ],
+            // page: 1,
+            size: 100,
+            total: 1,
+            page: 1,
+            sbjc: '',
+            brand: '',
+            wzjc: '',
+            floor: '1',
+            status: '1',
+            manufacturer: '',
+            fws: '',
+            sbglgs: '1',
+            sbglgsOption: [],
+            statusOption: [],
+            floorAllSelect: [],
+            key: 0,
+            currentTab: 1,
+        }
+    },
+    components: {
+        Select,
+        inputDialog,
+        wbTable,
+    },
+    computed: {
+        ...mapGetters(['floorSelect']),
+    },
+    props: ['row', 'major', 'sign'],
+    mounted() {
+        this.queryTableList()
+        this.tabFind()
+        this.getFloorAllSelect()
+    },
+    methods: {
+        innerTable(row) {
+            console.log(row)
+            if (row.assetuid) {
+                window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
+            }
+        },
+        //序号的方法
+        indexMethod(index) {
+            if (this.page) {
+                return (this.page - 1) * this.size + index + 1
+            }
+        },
+        //多余输入框监听
+        confirm(fws, manufacturer) {
+            //console.log(fws, manufacturer, '------')
+            this.fws = fws
+            this.manufacturer = manufacturer
+            this.queryTableList()
+        },
+        //下拉框查询
+        tabFind() {
+            let postParams = [
+                {
+                    columnName: { sbglgs: 'sbglgs', sb_status: 'sb_status' },
+                    params: {
+                        type_code: this.row.type_code,
+                    },
+                    tableName: 'sms_asset', //视图名称
+                },
+            ]
+            let major
+            if (this.major.slice(0, 2) == 'GD') {
+                major = '供电'
+            } else if (this.major.slice(0, 2) == 'XF') {
+                major = '消防'
+            } else if (this.major.slice(0, 2) == 'GPS') {
+                major = '给排水'
+            } else if (this.major.slice(0, 2) == 'DT') {
+                major = '电梯'
+            } else if (this.major.slice(0, 2) == 'RQ') {
+                major = '燃气'
+            } else {
+                major = this.major
+            }
+            let data = {
+                major: major,
+                plazaId: this.$store.state.plazaId,
+            }
+            if (major != '土建') {
+                data.onlyMainAsset = true
+            }
+            querySelect({ data, postParams }).then((res) => {
+                //console.log(res)
+                let sb_status = res.data.data.sms_asset.sb_status
+                let sbglgs = res.data.data.sms_asset.sbglgs
+                this.sbglgsOption = []
+                this.sbglgsOption.push({
+                    name: '全部',
+                    id: '1',
+                })
+                this.statusOption = []
+                this.statusOption.push({
+                    name: '全部',
+                    id: '1',
+                })
+                sb_status.forEach((el) => {
+                    this.statusOption.push({
+                        name: el.value,
+                        id: el.key,
+                    })
+                })
+                sbglgs.forEach((el) => {
+                    this.sbglgsOption.push({
+                        name: el.value,
+                        id: el.key,
+                    })
+                })
+            })
+        },
+        pageChanged(page) {
+            this.page = page
+            this.queryTableList()
+        },
+        queryTableList() {
+            let major
+            if (this.major.slice(0, 2) == 'GD') {
+                major = '供电'
+            } else if (this.major.slice(0, 2) == 'XF') {
+                major = '消防'
+            } else if (this.major.slice(0, 2) == 'GPS') {
+                major = '给排水'
+            } else if (this.major.slice(0, 2) == 'DT') {
+                major = '电梯'
+            } else if (this.major.slice(0, 2) == 'RQ') {
+                major = '燃气'
+            } else {
+                major = this.major
+            }
+            let data = {
+                major: major,
+                plazaId: this.$store.state.plazaId,
+                page: this.page,
+                // size: this.size,
+            }
+            //区分主要设备
+            if (this.major != '土建') {
+                data.onlyMainAsset = true
+            }
+            //输入框搜索
+            data.keyword = ''
+            if (this.sbjc) {
+                data.keyword += `${this.sbjc}:sbjc,assetnum;`
+            }
+            if (this.brand) {
+                data.keyword += `${this.brand}:brand,sbxh;`
+            }
+            if (this.wzjc) {
+                data.keyword += `${this.wzjc}:wzjc;`
+            }
+            if (this.manufacturer) {
+                data.keyword += `${this.manufacturer}:manufacturer;`
+            }
+            if (this.fws) {
+                data.keyword += `${this.fws}:fws;`
+            }
+            if (data.keyword == '') {
+                delete data.keyword
+            }
+            let postParams = {
+                classstructureid: this.row.classstructureid,
+                type_code: this.row.type_code,
+                manufacturer: this.row.manufacturer || '--',
+                sbxh: this.row.sbxh || '--',
+                brand: this.row.brand || '--',
+            }
+            //下拉筛选
+            if (this.floor && this.floor != 1) {
+                postParams.gname = this.floor
+            }
+            if (this.sbglgs && this.sbglgs != 1) {
+                postParams.sbglgs = this.sbglgs
+            }
+            if (this.status && this.status != 1) {
+                postParams.status = this.status
+            }
+            queryAsset({ data, postParams }).then((res) => {
+                //console.log(res)
+                this.tableData = res.data.data
+                this.total = res.data.count
+                this.key++
+            })
+        },
+        getFloorAllSelect() {
+            this.floorAllSelect = []
+            this.floorAllSelect.push({
+                id: '1',
+                name: '全部',
+            })
+            this.floorSelect.forEach((el) => {
+                this.floorAllSelect.push(el)
+            })
+            console.log(this.floorAllSelect)
+        },
+        changePageEvent() {
+            if (this.sign == 1) {
+                this.page = 1
+            }
+        },
+        handleClickWb() {},
+        changeTable() {},
+    },
+    watch: {
+        row: {
+            handler(newV, oldV) {
+                this.changePageEvent()
+                this.queryTableList()
+                this.getFloorAllSelect()
+                this.tabFind()
+            },
+            deep: true,
+        },
+        sbglgs() {
+            this.changePageEvent()
+            this.queryTableList()
+        },
+        status() {
+            this.changePageEvent()
+            this.queryTableList()
+        },
+        floor() {
+            this.changePageEvent()
+            this.queryTableList()
+        },
+    },
+}
+</script>
+<style lang="less" scoped>
+.gdqd-dialog {
+    display: flex;
+    flex-direction: column;
+    .gdqd-dialog-top {
+        display: flex;
+        margin-bottom: 12px;
+    }
+    td {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .foot {
+        height: 32px;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 28px;
+    }
+    // 上部表格样式
+    // .table1 {
+    //     width: 100%;
+    //     // max-height: 170px;
+    //     padding: 0;
+    //     overflow: scroll;
+    //     /deep/.el-table {
+    //         width: 100%;
+    //         height: 100%;
+    //         overflow: scroll;
+    //     }
+    // }
+    // 底部表格
+    .table-bottom {
+        width: 100%;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        // tab 样式
+        .title {
+            display: flex;
+            height: 70px;
+            line-height: 30px;
+            align-items: center;
+            padding: 15px 0;
+            // 维修维保文本
+            .text {
+                width: 50px;
+            }
+            .text-r {
+                margin-left: 100px;
+            }
+            // tab页签
+            .d-tab {
+                padding: 5px 16px;
+                height: 30px;
+                line-height: 22px;
+                font-size: 14px;
+                font-family: MicrosoftYaHei;
+                font-weight: 500;
+                color: #1f2429;
+                text-align: center;
+                border: 1px solid #c3c7cb;
+                cursor: pointer;
+            }
+            .d-tab-left {
+                border-radius: 4px 0 0 4px;
+            }
+            .d-tab-right {
+                border-radius: 0 4px 4px 0;
+            }
+            // 当前选中页签
+            .active {
+                color: #025baa !important;
+                border-color: #025baa !important;
+            }
+        }
+        //筛选+表格
+        .table2-container {
+            width: 100%;
+            flex: 1;
+            position: relative;
+        }
+    }
+}
+@media screen and (max-width: 1600px) {
+    .gdqd-dialog td {
+        padding: 4px 0;
+    }
+}
+</style>
+<style lang="less">
+.gdqd-dialog {
+    /deep/.el-table td {
+        cursor: pointer;
+    }
+}
+</style>

+ 11 - 6
src/views/equipment/table/eqListTable.vue

@@ -81,7 +81,7 @@
             ></el-pagination>
         </div>
         <!-- 标准表格详情钻取表 -->
-        <el-dialog
+        <!-- <el-dialog
             width='1260px'
             :title='`${InfoName}-${type_name}`'
             style='height:900px!important;overflow: hidden;'
@@ -89,12 +89,16 @@
             append-to-body
         >
             <eq-detail ref='qdDialog' :row='row' :major='major' :smsxt='smsxt' :diff='diff' :sign='sign'></eq-detail>
+        </el-dialog>-->
+        <el-dialog width='100%' :title='`${InfoName}-${type_name}`' :visible.sync='innerVisible' append-to-body :fullscreen='true'>
+            <eq-detail ref='qdDialog' :row='row' :major='major' :smsxt='smsxt' :diff='diff' :sign='sign'></eq-detail>
         </el-dialog>
     </div>
 </template>
 <script>
 import { Select } from 'meri-design'
-import EqDetail from './eqDetaileDialog'
+// import EqDetail from './eqDetaileDialog'
+import EqDetail from './eqDetaileDialog1'
 import { queryEquipmentList } from '@/api/equipmentList.js'
 import { mapGetters } from 'vuex'
 import store from '../../../store/index'
@@ -115,13 +119,13 @@ export default {
             floor: '1',
             type_name: '',
             floorAllSelect: [],
-            sign:1,
+            sign: 1,
         }
     },
     computed: {
         ...mapGetters(['floorSelect']),
     },
-    props: ['param', 'major', 'systemName', 'InfoName','smsxt','diff'],
+    props: ['param', 'major', 'systemName', 'InfoName', 'smsxt', 'diff'],
     methods: {
         indexMethod(index) {
             return (this.currentPage - 1) * this.size + index + 1
@@ -147,7 +151,7 @@ export default {
                 major: this.major,
             }
             //区分土建主要设备
-            if(this.smsxt != '1008'){
+            if (this.smsxt != '1008') {
                 data.onlyMainAsset = true
             }
             //下拉
@@ -241,7 +245,8 @@ export default {
         padding: 4px 0;
     }
     /deep/ .el-dialog {
-        margin-top: 5vh !important;
+        // margin-top: 5vh !important;
+        margin-top: 0 !important;
     }
 }
 </style>

+ 13 - 7
src/views/equipment/table/standTable.vue

@@ -79,14 +79,19 @@
             ></el-pagination>
         </div>
         <!-- 标准表格详情钻取表 -->
-        <el-dialog width='90%' style='height:900px;overflow: hidden;' :title='`${InfoName}-${type_name}`' :visible.sync='innerVisible' append-to-body>
+        <!-- <el-dialog width='90%' style='height:900px;overflow: hidden;' :title='`${InfoName}-${type_name}`' :visible.sync='innerVisible' append-to-body>
+            <eq-detail ref='qdDialog' :row='row' :major='major' :smsxt='smsxt' :diff='diff' :sign='sign'></eq-detail>
+        </el-dialog>-->
+        <!-- 标准表格详情钻取表,使用全屏弹窗 -->
+        <el-dialog width='100%' :title='`${InfoName}-${type_name}`' :visible.sync='innerVisible' append-to-body :fullscreen='true'>
             <eq-detail ref='qdDialog' :row='row' :major='major' :smsxt='smsxt' :diff='diff' :sign='sign'></eq-detail>
         </el-dialog>
     </div>
 </template>
 <script>
 import { queryEquipmentList } from '@/api/equipmentList.js'
-import EqDetail from './eqDetaileDialog'
+// import EqDetail from './eqDetaileDialog'
+import EqDetail from './eqDetaileDialog1'
 
 import { mapGetters } from 'vuex'
 import { Select } from 'meri-design'
@@ -107,10 +112,10 @@ export default {
             manufacturer: '',
             type_name: '',
             floorAllSelect: [],
-            sign:1
+            sign: 1,
         }
     },
-    props: ['major', 'param', 'InfoName','smsxt','diff'],
+    props: ['major', 'param', 'InfoName', 'smsxt', 'diff'],
     components: { EqDetail, Select },
     computed: {
         ...mapGetters(['floorSelect']),
@@ -152,8 +157,8 @@ export default {
                 major: major,
                 // floor:this.floor
             }
-             //区分土建主要设备
-            if(this.smsxt != '1008'){
+            //区分土建主要设备
+            if (this.smsxt != '1008') {
                 data.onlyMainAsset = true
             }
             //下拉
@@ -246,7 +251,8 @@ export default {
         padding: 4px 0;
     }
     /deep/ .el-dialog {
-        margin-top: 5vh !important;
+        // margin-top: 5vh !important;
+        margin-top: 0 !important;
     }
 }
 </style>