wanda-bm-guide/src/views/room/index.vue

/**
*@author:Guoxiaohuan
*@date:2020.06.08
*@info 机房信息主页
*/
<template>
    <div class='compute-box'>
        <el-dialog :title='`${systemName}`||"机房"' :visible.sync='visible' :fullscreen='true'>
            <div class='compute-span'></div>
            <div class='compute-zf' @click='jumpFloor'></div>
            <div class='compute-tab'>
                <el-tabs v-model='activeName' @tab-click='handleClick'>
                    <el-tab-pane label='机房布置图' name='1'>
                        <room-table1 v-if='tableImg.length>=0' :tableImg='tableImg'></room-table1>
                    </el-tab-pane>
                    <el-tab-pane label='配电室低压柜及出线明细表' name='2'>
                        <div class='compute-center'>
                            <Select
                                width='200'
                                @change='Index1'
                                v-model='floor2'
                                tipPlace='top'
                                caption='楼层：'
                                :selectdata='floorSelect'
                                :placeholder='"请选择"'
                                style='margin-right:12px'
                            ></Select>
                            <el-input
                                clearable
                                @change='Index1'
                                v-model='ctbhInput'
                                placeholder='搜索抽屉编号'
                                size='small'
                                prefix-icon='el-icon-search'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                            <el-input
                                clearable
                                @change='Index1'
                                v-model='cxggInput'
                                placeholder='搜索出线规格'
                                size='small'
                                prefix-icon='el-icon-search'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                            <el-input
                                clearable
                                @change='Index1'
                                v-model='djbhInput'
                                placeholder='搜索电井编号'
                                size='small'
                                prefix-icon='el-icon-search'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                            <el-input
                                clearable
                                @change='Index1'
                                v-model='kzhlInput'
                                placeholder='搜索控制回路'
                                size='small'
                                prefix-icon='el-icon-search'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                        </div>
                        <room-table2
                            v-if='table2.length>=0'
                            :table2='table2'
                            :loading='loading1'
                            :page='page1'
                            :total='total1'
                            :size='size1'
                            @Index1Emit='Index1Emit'
                        ></room-table2>
                    </el-tab-pane>
                    <el-tab-pane label='机房内核心设备' name='3'>
                        <div class='compute-center'>
                            <el-input
                                clearable
                                placeholder='搜索设备简称'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='sbjcInput'
                                @change='Index2'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                            <el-input
                                clearable
                                @change='Index2'
                                placeholder='搜索品牌、型号'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='ppxhInput'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                            <Select
                                width='200'
                                @change='Index2'
                                tipPlace='top'
                                v-model='floorChange'
                                caption='楼层：'
                                :selectdata='floorSelect'
                                :placeholder='"请选择"'
                                style='margin-right:12px'
                            ></Select>
                            <el-input
                                clearable
                                @change='Index2'
                                placeholder='搜索生产厂商'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='sccsInput'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                        </div>
                        <room-table3
                            v-if='table3.length>=0'
                            :table3='table3'
                            :loading='loading2'
                            :page='page2'
                            :total='total2'
                            :size='size2'
                            @Index2Emit='Index2Emit'
                        ></room-table3>
                    </el-tab-pane>
                    <el-tab-pane label='维修记录' name='4'>
                        <div class='compute-center'>
                            <el-input
                                clearable
                                @change='Index3'
                                placeholder='搜索设备名称、编号'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='sbmcInput4'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                            <el-input
                                clearable
                                @change='Index3'
                                placeholder='搜索重要事项记录、描述'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='zysxInput4'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                            <Select
                                @change='Index3'
                                width='200'
                                tipPlace='top'
                                caption='是否更换：'
                                v-model='sfghSelect'
                                :selectdata='isReplaceData'
                                :placeholder='"请选择"'
                                style='margin-right:12px'
                            ></Select>
                            <el-input
                                clearable
                                @change='Index3'
                                placeholder='搜索工单编号'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='gdbhInput4'
                                style='width:200px;margin-right:12px'
                            ></el-input>
                            <div class='picker-box'>
                                <span class='picker-span'>填报日期:</span>
                                <el-date-picker
                                    style='width:190px'
                                    v-model='tbsjDate'
                                    value-format='yyyyMMdd'
                                    type='daterange'
                                    @change='Index3'
                                    size='mini'
                                    range-separator='-'
                                    start-placeholder
                                    end-placeholder
                                ></el-date-picker>
                            </div>
                            <!-- <p class='input-dialog-p'>填报日期</p>
                                    <p class='input-dialog-p2'>
                                        <el-date-picker
                                            clearable
                                            v-model='tbsjDate'
                                            value-format='yyyyMMdd'
                                            type='daterange'
                                            size='mini'
                                            style='margin-right:12px;width:200px'
                                            range-separator='-'
                                            start-placeholder
                                            end-placeholder
                                        ></el-date-picker>
                            </p>-->
                        </div>
                        <div class='dialog-none'>
                            <div class='input-dialog'>
                                <div class='input-dialog-top' @click='show'>
                                    <img src='@/assets/imgs/select.png' />
                                    筛选
                                </div>
                                <div class='input-dialog-form' v-if='dialogFormVisible'>
                                    <p class='input-dialog-p'>验收日期</p>
                                    <p class='input-dialog-p2'>
                                        <el-date-picker
                                            clearable
                                            v-model='yssjDate'
                                            value-format='yyyyMMdd'
                                            type='daterange'
                                            size='mini'
                                            style='margin-right:12px;width:200px'
                                            range-separator='-'
                                            start-placeholder
                                            end-placeholder
                                        ></el-date-picker>
                                    </p>

                                    <!-- <p class='input-dialog-p'>工单编号</p>
                                    <p class='input-dialog-p2'>
                                        <el-input
                                            clearable
                                            placeholder
                                            style='width:200px;'
                                            size='mini'
                                            prefix-icon='el-icon-search'
                                            v-model='gdbhInput4'
                                        ></el-input>
                                    </p>-->
                                    <p class='input-dialog-foot'>
                                        <el-button @click='dialogFormVisible = false' size='mini'>取 消</el-button>
                                        <el-button type='primary' @click='confirm
                                        ' size='mini'>确 定</el-button>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <room-table4
                            v-if='table4.length>=0'
                            :table4='table4'
                            :loading='loading3'
                            :page='page3'
                            :total='total3'
                            :size='size3'
                            @Index3Emit='Index3Emit'
                        ></room-table4>
                    </el-tab-pane>
                    <el-tab-pane label='维保记录' name='5'>
                        <div class='compute-center'>
                            <el-input
                                @change='Index4'
                                clearable
                                placeholder='搜索设备名称、编号'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='sbmcInput5'
                                style='margin-right:12px;width:220px;'
                            ></el-input>
                            <el-input
                                @change='Index4'
                                clearable
                                placeholder='搜索核心维保事项记录描述'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='wbsxjlInput5'
                                style='margin-right:12px;width:220px;'
                            ></el-input>
                            <el-input
                                @change='Index4'
                                clearable
                                placeholder='搜索任务编号'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='rwbhInput5'
                                style='margin-right:12px;width:220px;'
                            ></el-input>
                            <Select
                                width='220'
                                tipPlace='top'
                                v-model='statuSelect5'
                                caption='任务状态'
                                v-if='status.length>0'
                                :selectdata='status'
                                :placeholder='"请选择"'
                                style='margin-right:12px'
                            ></Select>
                            <Select
                                width='220'
                                tipPlace='top'
                                v-model='iszcSelect5'
                                caption='是否正常：'
                                v-if='zt.length>0'
                                :selectdata='zt'
                                :placeholder='"请选择"'
                                style='margin-right:12px'
                            ></Select>
                        </div>
                        <div class='dialog-none'>
                            <div class='input-dialog'>
                                <div class='input-dialog-top' @click='show'>
                                    <img src='@/assets/imgs/select.png' />
                                    筛选
                                </div>
                                <div class='input-dialog-form' v-if='dialogFormVisible'>
                                    <p class='input-dialog-p'>任务开始日期</p>
                                    <p class='input-dialog-p2'>
                                        <el-date-picker
                                            clearable
                                            value-format='yyyyMMdd'
                                            type='daterange'
                                            size='mini'
                                            v-model='rwksrq'
                                            style='width:200px'
                                            range-separator='-'
                                            start-placeholder
                                            end-placeholder
                                        ></el-date-picker>
                                    </p>

                                    <p class='input-dialog-p'>任务完成日期</p>
                                    <p class='input-dialog-p2'>
                                        <el-date-picker
                                            clearable
                                            value-format='yyyyMMdd'
                                            type='daterange'
                                            size='mini'
                                            v-model='rwwcrq'
                                            style='width:200px'
                                            range-separator='-'
                                            start-placeholder
                                            end-placeholder
                                        ></el-date-picker>
                                    </p>
                                    <!-- <el-input
                                @change='Index4'
                                clearable
                                placeholder='异常工单编号'
                                size='small'
                                prefix-icon='el-icon-search'
                                v-model='ycgdbhInput5'
                                style='margin-right:12px;width:220px;'
                                    ></el-input>-->
                                    <p class='input-dialog-p'>异常工单编号</p>
                                    <p class='input-dialog-p2'>
                                        <el-input
                                            clearable
                                            placeholder='异常工单编号'
                                            size='small'
                                            prefix-icon='el-icon-search'
                                            v-model='ycgdbhInput5'
                                            style='width:200px;'
                                        ></el-input>
                                    </p>
                                    <p class='input-dialog-p'>异常工单填报日期</p>
                                    <p class='input-dialog-p2'>
                                        <el-date-picker
                                            clearable
                                            value-format='yyyyMMdd'
                                            type='daterange'
                                            size='mini'
                                            v-model='ycgdtbsj'
                                            style='width:200px'
                                            range-separator='-'
                                            start-placeholder
                                            end-placeholder
                                        ></el-date-picker>
                                    </p>
                                    <p class='input-dialog-p'>异常工单验收日期</p>
                                    <p class='input-dialog-p2'>
                                        <el-date-picker
                                            clearable
                                            value-format='yyyyMMdd'
                                            type='daterange'
                                            size='mini'
                                            style='width:200px'
                                            range-separator='-'
                                            start-placeholder
                                            end-placeholder
                                            v-model='ycgdyssj'
                                        ></el-date-picker>
                                    </p>
                                    <p class='input-dialog-foot'>
                                        <el-button @click='dialogFormVisible = false' size='mini'>取 消</el-button>
                                        <el-button type='primary' @click='confirm2' size='mini'>确 定</el-button>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <room-table5
                            v-if='table5.length>=0'
                            :table5='table5'
                            :loading='loading4'
                            :page='page4'
                            :total='total4'
                            :size='size4'
                            @Index4Emit='Index4Emit'
                        ></room-table5>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { queryEquipmentList } from '@/api/equipmentList.js'
import { queryDygjcxline, queryHxsb, queryWxjf, queryWb, querySystem } from '@/api/room.js'
import roomTable1 from './room1'
import roomTable2 from './room2'
import roomTable3 from './room3'
import roomTable4 from './room4'
import roomTable5 from './room5'
import { mapGetters } from 'vuex'
import { querySelect, queryPic } from '@/api/public.js'
import InputDialog from './inputDialog'

export default {
    data() {
        return {
            activeName: '1',
            visible: false,
            dialogFormVisible: false,
            systemName: '',
            loading: true,
            loading1: true,
            loading2: true,
            loading3: true,
            loading4: true,
            table2: [],
            table3: [],
            table4: [],
            table5: [],
            //
            total: 0,
            page: 1,
            size: 10,
            picFloor: '',
            tableImg: [],
            //
            total1: 0,
            page1: 1,
            size1: 10,
            floor2: '',
            ctbhInput: '',
            cxggInput: '',
            djbhInput: '',
            kzhlInput: '',
            //
            total2: 0,
            page2: 1,
            size2: 10,
            sccsInput: '',
            ppxhInput: '',
            sbjcInput: '',
            floorChange: '',
            //
            total3: 0,
            page3: 1,
            size3: 11,
            tbsjDate: '',
            yssjDate: '',
            // 是否更换配件
            isReplaceData: [
                { id: '1', name: '是' },
                { id: '0', name: '否' }
            ],
            sfghSelect: '',
            sbmcInput4: '',
            sbbhInput4: '',
            zysxInput4: '',
            msInput4: '',
            gdbhInput4: '',
            type1: 'wx',

            //
            total4: 0,
            page4: 1,
            size4: 11,
            searVal: '',
            status: [],
            zt: [],
            sbmcInput5: '',
            sbbhInput5: '',
            wbsxjlInput5: '',
            rwbhInput5: '',
            ycgdbhInput5: '',
            ssmsInput5: '',
            iszcSelect5: '',
            statuSelect5: '',
            rwksrq: '',
            rwwcrq: '',
            ycgdtbsj: '',
            ycgdyssj: '',
            smsxtArr: []
        }
    },
    components: {
        roomTable1,
        roomTable2,
        roomTable3,
        roomTable4,
        roomTable5,
        InputDialog
    },
    computed: {
        ...mapGetters(['floorSelect'])
    },
    methods: {
        handleClick(tab) {
            if (tab.index == '0') {
                this.Index()
            } else if (tab.index == '1') {
                this.Index1()
            } else if (tab.index == '2') {
                this.Index2()
            } else if (tab.index == '3') {
                this.Index3()
            } else if (tab.index == '4') {
                this.Index4()
                this.changeSelect()
            }
        },
        show() {
            this.dialogFormVisible = !this.dialogFormVisible
        },
        Index() {
            this.picFloor = this.$cookie.get('floorNow')
            let getParams = {
                typename: '位置布置图',
                location: '1809',
                module: '1002',
                system: '1002',
                // floor: this.picFloor,
                plazaId: this.$store.state.plazaId
            }
            queryPic({ getParams }).then(res => {
                console.log('机房布置图', res)
                this.tableImg = res.data ? res.data : []
            })
        },
        // 明细表
        Index1() {
            let getParams = {
                location: '1890',
                plazaId: this.$store.state.plazaId,
                page: this.page1,
                size: this.size1
            }
            if (this.floor2) {
                getParams.floor = this.floor2
            }
            if (this.ctbhInput) {
                if (getParams.keyword) {
                    getParams.keyword = `${getParams.keyword + ';' + this.ctbhInput}:drawernum`
                } else {
                    getParams.keyword = `${this.ctbhInput}:drawernum`
                }
            }
            if (this.cxggInput) {
                if (getParams.keyword) {
                    getParams.keyword = `${getParams.keyword + ';' + this.cxggInput}:outspec`
                } else {
                    getParams.keyword = `${this.cxggInput}:outspec`
                }
            }
            if (this.djbhInput) {
                if (getParams.keyword) {
                    getParams.keyword = `${getParams.keyword + ';' + this.djbhInput}:wellnum`
                } else {
                    getParams.keyword = `${this.djbhInput}:wellnum`
                }
            }
            if (this.kzhlInput) {
                if (getParams.keyword) {
                    getParams.keyword = `${getParams.keyword + ';' + this.kzhlInput}:control`
                } else {
                    getParams.keyword = `${this.kzhlInput}:control`
                }
            }
            queryDygjcxline({ getParams }).then(res => {
                if (res.result == 'success') {
                    this.loading1 = false
                    this.total1 = res.count
                    this.table2 = res.data ? res.data : []
                    console.log('明细表', res)
                }
            })
        },
        // 核心设备
        Index2() {
            let postParams = {}
            let data = {
                location: '1890',
                plazaId: this.$store.state.plazaId,
                page: this.page2,
                size: this.size2
            }
            if (this.sbjcInput) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.sbjcInput}:sbjc`
                } else {
                    data.keyword = `${this.sbjcInput}:sbjc`
                }
            }
            if (this.ppxhInput) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.ppxhInput}:brand,sbxh`
                } else {
                    data.keyword = `${this.ppxhInput}:brand,sbxh`
                }
            }
            if (this.sccsInput) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.sccsInput}:manufacturer`
                } else {
                    data.keyword = `${this.sccsInput}:manufacturer`
                }
            }
            if (this.floorChange) {
                data.floor = this.floorChange
            }
            queryHxsb({ data, postParams }).then(res => {
                console.log('核心设备', res)
                this.loading2 = false
                this.total2 = res.data.count
                this.table3 = res.data.data ? res.data.data : []
            })
        },
        Index1Emit(val) {
            this.page1 = val
            this.Index1()
        },
        Index2Emit(val) {
            this.page2 = val
            this.Index2()
        },
        Index3Emit(val) {
            this.page3 = val
            this.Index3()
        },
        Index4Emit(val) {
            this.page4 = val
            this.Index4()
        },
        // 维修
        Index3() {
            let getParams = {
                location: '1890',
                // plazaId: '1001145',
                plazaId: this.$store.state.plazaId,
                page: this.page3,
                size: this.size3,
                orderBy: 'sjjssj,0;location,1'
            }
            if (this.sfghSelect) {
                getParams.ismodel = this.sfghSelect
            }
            // 设备名称、编号
            if (this.sbmcInput4) {
                if (getParams.keyword) {
                    getParams.keyword = `${getParams.keyword + ';' + this.sbmcInput4}:sbmc`
                } else {
                    getParams.keyword = `${this.sbmcInput4}:sbmc,location`
                }
            }
            // 重要事项记录、描述
            if (this.zysxInput4) {
                if (getParams.keyword) {
                    getParams.keyword = `${getParams.keyword + ';' + this.zysxInput4}:matters`
                } else {
                    getParams.keyword = `${this.zysxInput4}:matters,manufacturer`
                }
            }
            // 填报时间
            if (this.tbsjDate) {
                getParams.reportedbyStartDate = this.tbsjDate[0] + '000000'
                getParams.reportedbyEndDate = this.tbsjDate[1] + '000000'
            }
            // 验收时间
            if (this.yssjDate) {
                getParams.sjjssjStartDate = this.yssjDate[0] + '000000'
                getParams.sjjssjEndDate = this.yssjDate[1] + '000000'
            }
            queryWxjf({ getParams }).then(res => {
                console.log('维修', res)
                if (res.result == 'success') {
                    this.loading3 = false
                    this.total3 = res.count
                    this.table4 = res.data ? res.data : []
                }
            })
        },
        changeIndex3(val) {
            if (val.type == 'wx') {
                if (val.msInput4) {
                    this.msInput4 = val.msInput4
                }
                if (val.zysxInput4) {
                    this.zysxInput4 = val.zysxInput4
                }
                if (val.gdbhInput4) {
                    this.gdbhInput4 = val.gdbhInput4
                }
                this.Index3()
            }
        },
        // 维保
        Index4() {
            let postParams = {}
            let data = {
                location: '1890',
                plazaId: this.$store.state.plazaId,
                page: this.page4,
                size: this.size4,
                orderBy: 'wb_gzglid,0;assetnum,1;reportedby,0;'
            }
            //
            // 任务开始日期
            if (this.rwksrq) {
                data.sjkssjStartDate = this.rwksrq[0] + '000000'
                data.sjkssjEndDate = this.rwksrq[1] + '000000'
            }
            // 任务完成日期
            if (this.rwwcrq) {
                data.sjwcsjStartDate = this.rwwcrq[0] + '000000'
                data.sjwcsjEndDate = this.rwwcrq[1] + '000000'
            }
            // 异常工单填报时间
            if (this.ycgdtbsj) {
                data.reportdateStartDate = this.ycgdtbsj[0] + '000000'
                data.reportdateEndDate = this.ycgdtbsj[1] + '000000'
            }
            // 异常工单验收时间
            if (this.ycgdyssj) {
                data.sjjssjStartDate = this.ycgdyssj[0] + '000000'
                data.sjjssjEndDate = this.ycgdyssj[1] + '000000'
            }
            //
            // 是否正常
            if (this.iszcSelect5) {
                data.zt = this.iszcSelect5
            }
            // 任务状态
            if (this.statuSelect5) {
                data.status = this.statuSelect5
            }
            if (this.sbmcInput5) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.sbmcInput5}:sbmc,assetnum`
                } else {
                    data.keyword = `${this.sbmcInput5}:sbmc,assetnum`
                }
            }
            if (this.wbsxjlInput5) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.wbsxjlInput5}:matters`
                } else {
                    data.keyword = `${this.wbsxjlInput5}:matters,description`
                }
            }
            if (this.rwbhInput5) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.rwbhInput5}:wb_gzglid`
                } else {
                    data.keyword = `${this.rwbhInput5}:wb_gzglid`
                }
            }
            if (this.ycgdbhInput5) {
                if (data.keyword) {
                    data.keyword = `${data.keyword + ';' + this.ycgdbhInput5}:wonum`
                } else {
                    data.keyword = `${this.ycgdbhInput5}:wonum`
                }
            }
            queryWb({ data, postParams }).then(res => {
                console.log('维保', res)
                this.loading4 = false
                this.total4 = res.data.count
                this.table5 = res.data.data ? res.data.data : []
            })
        },
        confirm() {
            this.Index3()
        },
        confirm2() {
            this.Index4()
        },
        changeSelect() {
            this.department = []
            let postParams = [
                {
                    columnName: { status: 'status', zt: 'zt' },
                    tableName: 'v_glsms_wbzy'
                }
            ]
            let data = {
                plazaId: this.$store.state.plazaId
            }
            querySelect({ data, postParams }).then(res => {
                console.log('下拉框', res)
                let status = [],
                    zt = []

                status = res.data.data.v_glsms_wbzy.status ? res.data.data.v_glsms_wbzy.status : []
                zt = res.data.data.v_glsms_wbzy.zt ? res.data.data.v_glsms_wbzy.zt : []
                if (status.length > 0) {
                    status.forEach(el => {
                        let obj = {
                            id: el.key,
                            name: el.value
                        }
                        this.status.push(obj)
                    })
                }
                if (zt.length > 0) {
                    zt.forEach(el => {
                        let obj = {
                            id: el.key,
                            name: el.value == '正常' ? '是' : '否'
                        }
                        this.zt.push(obj)
                    })
                }
            })
        },
        init() {
            this.smsxtArr = []
            let params = {
                getParams: {
                    locationid: '5209',
                    plazaId: this.$store.state.plazaId
                }
            }
            querySystem(params).then(res => {
                console.log('系统', res.data[0])
                this.smsxtArr = res.data[0]
            })
        },
        open(name) {
            this.visible = true
            this.systemName = name
        },
        jumpFloor() {
            if (location.pathname.split('/')[3] == 'equipment') {
                this.$router.push({ path: '/home/floorFunc' })
            } else {
                this.$router.push({ path: '/home/equipment' })
            }
        }
    },
    mounted() {
        this.init()
        this.Index()
    },
    watch: {}
}
</script>
<style lang="less" scoped>
.compute-box {
    .compute-zf {
        width: 15px;
        height: 13px;
        background: url('../../assets/imgs/zffx.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 74px;
        top: 25px;
        cursor: pointer;
        &::after {
            content: '';
            position: absolute;
            right: -16px;
            width: 1px;
            height: 16px;
            background: rgba(216, 216, 216, 1);
        }
    }
    .picker-box {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 0 6px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        height: 32px;
        box-sizing: border-box;
        margin-right: 12px;
        .picker-span {
            margin-right: 6px;
            color: rgba(0, 0, 0, 0.65);
        }
    }
    .compute-span {
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.06);
        margin-bottom: 20px;
    }
    .compute-center {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    //
    .dialog-none {
        width: 100px;
        position: absolute;
        right: 0;
        .input-dialog {
            .input-dialog-top {
                color: #c3c7cb;
                cursor: pointer;
                position: absolute;
                top: -45px;
                right: 0px;
            }
            .input-dialog-form {
                padding: 20px 24px;
                background: rgba(255, 255, 255, 1);
                border-radius: 4px;
                border: 1px solid rgba(195, 199, 203, 1);
                z-index: 99999;
                position: absolute;
                top: -20px;
                right: 0px;
            }
            .input-dialog-p {
                margin-bottom: 8px;
                font-size: 14px;
                font-family: MicrosoftYaHei;
                color: rgba(100, 108, 115, 1);
                line-height: 22px;
            }
            .input-dialog-p2 {
                margin-bottom: 16px;
            }
        }
        .input-dialog-foot {
            // margin-bottom: 16px;
            display: flex;
            justify-content: flex-end;
        }
    }
    .compute-tab {
        margin-top: 16px;
        padding: 0 24px;
    }
}
</style>
<style lang="less">
.compute-box {
    .el-dialog {
        padding: 16px 20px 20px;
        overflow: hidden;
        .el-dialog__header {
            padding: 0;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            line-height: 24px;
            padding-bottom: 16px;
        }
    }
    .compute-tab {
        .el-dialog__title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            line-height: 24px;
        }
        .el-dialog__body {
            padding: 0 24px;
        }
        .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
        .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
        .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
        .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
            padding-left: 16px;
        }
        .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
        .el-tabs--bottom .el-tabs__item.is-top:last-child,
        .el-tabs--top .el-tabs__item.is-bottom:last-child,
        .el-tabs--top .el-tabs__item.is-top:last-child {
            padding-right: 16px;
        }
        .el-tabs__nav-wrap::after {
            height: 0;
        }
        .el-tabs__item {
            padding: 5px 16px;
            height: 30px;
            line-height: 22px;
            font-size: 14px;
            font-family: MicrosoftYaHei;
            color: rgba(31, 36, 41, 1);
            border: 1px solid rgba(195, 199, 203, 1);
        }
        .el-tabs,
        .el-tabs__content {
            height: 800px;
        }
        .el-tabs__active-bar {
            background-color: transparent !important;
        }
        .is-active {
            color: #025baa;
            border-color: #025baa;
        }
        .compute-table {
            .el-table td,
            .el-table th {
                padding: 8px 0;
            }
        }
    }
    .el-input--suffix .el-input__inner {
        padding-right: 20px;
    }
    .el-dialog__wrapper {
        transition-duration: 0.3s;
    }
    .dialog-fade-enter-active {
        animation: none !important;
    }
    .dialog-fade-leave-active {
        transition-duration: 0.15s !important;
        animation: none !important;
    }

    .dialog-fade-enter-active .el-dialog,
    .dialog-fade-leave-active .el-dialog {
        animation-fill-mode: forwards;
    }

    .dialog-fade-enter-active .el-dialog {
        animation-duration: 0.3s;
        animation-name: anim-open;
        animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    }

    .dialog-fade-leave-active .el-dialog {
        animation-duration: 0.3s;
        animation-name: anim-close;
    }

    @keyframes anim-open {
        0% {
            opacity: 0;
            transform: scale3d(0, 0, 1);
        }
        100% {
            opacity: 1;
            transform: scale3d(1, 1, 1);
        }
    }

    @keyframes anim-close {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: scale3d(0.5, 0.5, 1);
        }
    }
    .picker-box {
        .el-input__inner {
            border: none;
        }
        .el-range-editor.el-input__inner {
            padding: 3px 0px;
        }
        .el-icon-date {
            display: none;
        }
        .el-range__close-icon {
            position: absolute;
            right: 0px;
            top: 2px;
        }
        .el-range-editor--mini .el-range-input {
            font-size: 14px;
            color: rgb(31, 36, 41);
        }
    }
}
</style>