月度设备维护统计同步

src/views/component/device/maintenanceStatic.vue

@@ -0,0 +1,643 @@
+<template>
+    <el-dialog
+        v-loading="loading"
+        :title="title"
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="false"
+        append-to-body
+        fullscreen
+        class="dialog paper-detail-dialog"
+        top="0"
+    >
+        <div slot="title" class="dialog-title">
+            <span class="dialogtitle">{{ title }}</span>
+            <div>
+                <ibps-toolbar :actions="toolbars" @action-event="handleActionEvent" />
+            </div>
+        </div>
+        <div class="container">
+            <div class="left" :style="{width:initWidth}">
+                <div class="search">
+                    <div class="item">
+                        <div class="label">维护月份：</div>
+                        <div class="content">
+                            <el-date-picker
+                                v-model="month"
+                                :clearable="false"
+                                type="month"
+                                placeholder="选择查询的月份"
+                                value-format="yyyy-MM"
+                                :picker-options="pickerOptions"
+                                size="mini"
+                                @change="handleMonthChange"
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div class="agend">
+                    <div class="descript">
+                        <div class="item">
+                            <div class="green-circle" />
+                            <span>全部完成</span>
+                        </div>
+                        <div class="item">
+                            <div class="orange-circle" />
+                            <span>部分完成</span>
+                        </div>
+                        <div class="item">
+                            <div class="red-circle" />
+                            <span>全部未完成</span>
+                        </div>
+                        <div class="item">
+                            <div class="grey-bg" />
+                            <span>设备未使用</span>
+                        </div>
+                        <div class="item">
+                            <div class="red-bg" />
+                            <span>设备异常</span>
+                        </div>
+                        <div class="item" style="margin-left:60px">
+                            <span>设备异常次数：{{ formatData.repairCount }}</span>
+                        </div>
+                        <div class="item">
+                            <span>设备总维护次数：{{ formatData.maintenanceCount }}</span>
+                        </div>
+                        <div class="item">
+                            <span>设备故障率：{{ formatData.faultRate }} %</span>
+                            <el-tooltip
+                                effect="dark"
+                                content="设备故障率计算公式：异常次数/总维护次数*100%，待处理与未使用不计入总维护次数中。"
+                                placement="top"
+                            >
+                                <i class="el-icon-question question-icon" />
+                            </el-tooltip>
+                        </div>
+                    </div>
+                    <div class="item-time">
+                        <span>统计时间：{{ curTime }}</span>
+                    </div>
+                </div>
+                <div class="table">
+                    <div class="column">
+                        <div class="item">保养类型/日期</div>
+                        <div v-for="item in type" :key="item" class="item">{{ item }}</div>
+                    </div>
+                    <div class="column">
+                        <div v-for="(item,index) in formatData.list" :key="index" class="content-item">
+                            <div class="item">{{ index+1 }}</div>
+                            <div
+                                v-for="(i,ind) in item"
+                                :key="ind"
+                                class="item"
+                                :class="{
+                                    unusual: i.status === false, // 异常
+                                    unused: i.isUsed === false // 未使用
+                                }"
+                            >
+                                <el-tooltip v-show="i.count>0" class="item" effect="light" placement="top-start">
+                                    <template slot="content">
+                                        <div>
+                                            <span v-if="i.todo">待处理：{{ i.todo }}；</span>
+                                            <span v-if="i.done">已完成：{{ i.done }}；</span>
+                                            <div v-for="(ii,indd) in i.data" :key="indd" class="detail">
+                                                <el-divider />
+                                                <div class="detail-item">
+                                                    <div class="item" style="margin:2px 0">处理人：{{ switchIdToUserName(ii.bian_zhi_ren_)|| '/' }}</div>
+                                                    <div class="item" style="margin:2px 0">设备状态：{{ ii.wei_hu_zhuang_tai|| '/' }}</div>
+                                                    <div class="item" style="margin:2px 0">维护项目：{{ ii.wei_hu_xiang_mu_c|| '/' }}</div>
+                                                    <div class="item" style="margin:2px 0">备注：{{ ii.bei_zhu_|| '/' }}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                    <div v-if="i.todo === 0 && i.isUsed" class="green-circle" />
+                                    <div v-if="i.done === 0 && i.todo !== 0" class="red-circle" />
+                                    <div v-if="i.todo !== 0 && i.done !== 0" class="orange-circle" />
+                                </el-tooltip>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import xlsx from 'xlsx'
+import fs from 'file-saver'
+import dayjs from 'dayjs'
+import ibpsUserSelector from '@/business/platform/org/selector'
+export default {
+    components: {
+        ibpsUserSelector
+    },
+    props: {
+        params: {
+            type: Object,
+            default: function () {
+                return {}
+            }
+        },
+        dialogVisible: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        const monthList = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+        const monthValue = dayjs().format('YYYY-MM')
+        const year = +monthValue.split('-')[0]
+        const month = +monthValue.split('-')[1]
+        const monthDays = monthList[month - 1]
+        if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
+            monthList[1] = 29
+        }
+        const { userId, position, level } = this.$store.getters
+        return {
+            curTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+            pickerOptions: {
+                disabledDate (time) {
+                    return time.getTime() > Date.now()
+                }
+            },
+            monthList: monthList,
+            month: monthValue,
+            monthDays: monthDays,
+            userId: userId,
+            position: position,
+            level: level.second || level.first,
+            loading: false,
+            title: '设备维护统计',
+            toolbars: [
+                { key: 'export', label: '导出', type: 'primary', hidden: true },
+                { key: 'cancel', label: '返回', type: 'danger' }
+            ],
+            initWidth: '1800px',
+            isEdit: false,
+            isFinished: false,
+            readonly: false,
+            preParams: {},
+            Ids: [],
+            form: {
+            },
+            rules: {
+
+            },
+            dataList: [],
+            type: ['日保养', '周保养', '月保养', '季度保养', '半年保养', '年保养', '按需保养', '间隔保养']
+        }
+    },
+    computed: {
+        deviceColumns () {
+            return {
+                'leiXing': '保养类型',
+                'One': this.month + '-01',
+                'Two': this.month + '-02',
+                'Three': this.month + '-03',
+                'Four': this.month + '-04',
+                'Five': this.month + '-05',
+                'Six': this.month + '-06',
+                'Seven': this.month + '-07',
+                'Eight': this.month + '-08',
+                'Nine': this.month + '-09',
+                'Ten': this.month + '-10',
+                'Eleven': this.month + '-11',
+                'Twelve': this.month + '-12',
+                'Thirteen': this.month + '-13',
+                'Fourteen': this.month + '-14',
+                'Fifteen': this.month + '-15',
+                'Sixteen': this.month + '-16',
+                'Seventeen': this.month + '-17',
+                'Eighteen': this.month + '-18',
+                'Nineteen': this.month + '-19',
+                'Twenty': this.month + '-20',
+                'Twenty-One': this.month + '-21',
+                'Twenty-Two': this.month + '-22',
+                'Twenty-Three': this.month + '-23',
+                'Twenty-Four': this.month + '-24',
+                'Twenty-Five': this.month + '-25',
+                'Twenty-Six': this.month + '-26',
+                'Twenty-Seven': this.month + '-27',
+                'Twenty-Eight': this.month + '-28',
+                'Twenty-Nine': this.month + '-29',
+                'Thirty': this.month + '-30',
+                'Thirty-One': this.month + '-31'
+            }
+        },
+        formatData () {
+            let repairCount = 0 // 异常
+            let maintenanceCount = 0 // 维护
+            const fliterData = this.dataList
+            const result = []
+            fliterData.forEach(item => {
+                const { wei_hu_lei_xing_ } = item
+                const t = result.find(i => i.wei_hu_lei_xing_ === wei_hu_lei_xing_)
+                if (t) {
+                    t.children.push(item)
+                } else {
+                    result.push({
+                        wei_hu_lei_xing_: wei_hu_lei_xing_,
+                        children: [item]
+                    })
+                }
+            })
+            // console.log('fliterData', result)
+            const answer = new Array(this.monthDays)
+            for (let i = 0; i < this.monthDays; i++) {
+                const arr = []
+                const day = ('0' + (i + 1)).slice(-2)
+                const fullDay = this.month + '-' + day
+                // console.log(fullDay)
+                this.type.forEach(item => {
+                    const obj = {
+                        data: [],
+                        count: 0,
+                        todo: 0,
+                        done: 0,
+                        status: true,
+                        isUsed: true
+                    }
+                    const t = result.find(j => j.wei_hu_lei_xing_ === item)
+                    if (t) {
+                        const tempList = t.children.filter(k => k.ji_hua_shi_jian_ === fullDay)
+                        obj.count = tempList.length
+                        obj.todo = tempList.filter(k => k.shi_fou_guo_shen_ === '待处理').length
+                        const yiwancheng = tempList.filter(k => k.shi_fou_guo_shen_ === '已完成')
+                        obj.done = yiwancheng.length
+                        obj.data = yiwancheng
+                        const weixiu = tempList.filter(item => item.wei_hu_zhuang_tai === '异常')
+                        obj.isUsed = !tempList.some(item => item.wei_hu_zhuang_tai === '未使用')
+                        obj.status = weixiu.length === 0
+                        repairCount += weixiu.length
+                        maintenanceCount += yiwancheng.filter(item => item.wei_hu_zhuang_tai !== '未使用').length
+                    }
+                    arr.push(obj)
+                })
+                answer[i] = arr
+            }
+            // 故障率
+            const faultRate = maintenanceCount === 0 ? '0.00' : ((repairCount / maintenanceCount) * 100).toFixed(2)
+            // console.log('data', answer)
+            return { list: answer, repairCount, maintenanceCount, faultRate }
+        }
+    },
+    mounted () {
+        if (this.params.searchMonth) {
+            this.month = this.params.searchMonth
+            this.handleMonthChange(this.month)
+        } else {
+            this.init()
+        }
+    },
+    methods: {
+        handleActionEvent ({ key }) {
+            switch (key) {
+                case 'cancel':
+                    this.closeDialog()
+                    break
+                case 'export':
+                    this.handleExport()
+                    break
+                default:
+                    break
+            }
+        },
+        // 人员id 转人员名称
+        switchIdToUserName (id) {
+            const { userList } = this.$store.getters
+            const temp = userList.find(item => item.userId === id)
+            return temp ? temp.userName : ''
+        },
+        xlsx (json, fields, filename = '.xlsx') { // 导出xlsx
+            json.forEach(item => {
+                for (const i in item) {
+                    if (fields.hasOwnProperty(i)) {
+                        item[fields[i]] = item[i]
+                    }
+                    delete item[i] // 删除原先的对象属性
+                }
+            })
+            const sheetName = filename // excel的文件名称
+            const wb = xlsx.utils.book_new() // 工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
+            const ws = xlsx.utils.json_to_sheet(json, { header: Object.values(fields) }) // 将JS对象数组转换为工作表。
+            wb.SheetNames.push(sheetName)
+            wb.Sheets[sheetName] = ws
+            // console.log('json', ws)
+            const defaultCellStyle = { font: { name: 'Verdana', sz: 13, color: 'FF00FF88' }, fill: { fgColor: { rgb: 'FFFFAA00' }}}// 设置表格的样式
+            const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false } // 写入的样式
+            const wbout = xlsx.write(wb, wopts)
+            const blob = new Blob([this.s2ab(wbout)], { type: 'application/octet-stream' })
+            fs.saveAs(blob, filename + '.xlsx')
+        },
+        s2ab (s) {
+            let buf
+            if (typeof ArrayBuffer !== 'undefined') {
+                buf = new ArrayBuffer(s.length)
+                const view = new Uint8Array(buf)
+                for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
+                return buf
+            } else {
+                buf = new Array(s.length)
+                for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF
+                return buf
+            }
+        },
+        getTimeStamp () {
+            return dayjs().format('YYYYMMDDHHmmss')
+        },
+        handleExport () {
+            const exportData = this.type.map((item, index) => {
+                const obj = { 'leiXing': item }
+                for (let i = 1; i < this.monthDays + 1; i++) {
+                    const t = this.formatData.list[i - 1][index]
+                    const text = `已完成：${t.done};待处理：${t.todo}`
+                    obj[Object.keys(this.deviceColumns)[i]] = text
+                }
+                return obj
+            })
+
+            // const copyData = JSON.parse(JSON.stringify(exportData))
+            // console.log('导出数据', copyData)
+            this.xlsx(exportData, this.deviceColumns, '设备维护统计' + this.getTimeStamp())
+            this.$message.success('导出设备成功！')
+        },
+        async handleMonthChange (val) {
+            const year = +val.split('-')[0]
+            const month = +val.split('-')[1]
+            this.monthDays = this.monthList[month - 1]
+            if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
+                this.monthList[1] = 29
+            } else {
+                this.monthList[1] = 28
+            }
+            await this.init()
+        },
+        // 获取人员部门
+        getPersonPosition (id) {
+            const userList = this.$store.getters.userList
+            const bianzhiUserid = userList.find(i => i.userId === id)
+            if (bianzhiUserid) {
+                return bianzhiUserid.positionId
+            }
+        },
+        checkRequired (flag) {
+        },
+        // 刷新
+        async goRefresh () {
+        },
+        // 关闭当前窗口
+        closeDialog (needRefresh) {
+            this.$emit('update:dialogVisible', false, needRefresh)
+        },
+        async init () {
+            this.loading = true
+            this.title = `[${this.params.original_device_n}/${this.params.she_bei_ming_chen}]月度设备维护统计`
+            const y = +this.month.split('-')[0]
+            const m = +this.month.split('-')[1]
+            const sql = `select a.id_ AS mainId,a.shi_fou_guo_shen_,a.bian_zhi_bu_men_,c.wei_hu_xiang_mu_c,a.bian_zhi_ren_,a.she_bei_ming_chen,a.she_bei_bian_hao_,a.ri_qi_,a.original_device_n,a.zhu_zhou_qi_,a.nei_rong_qing_kua,a.ji_hua_shi_jian_,c.she_bei_lei_xing_,c.wei_hu_ri_qi_,c.wei_hu_lei_xing_,c.ri_qi_shu_zi_,d.bei_zhu_,d.wei_hu_zhuang_tai from t_mjsbwhbyjlby a left join t_mjsbwhjhzb b on a.ji_hua_wai_jian_ = b.id_ left join v_device_devicemaintenance c on b.she_bei_bian_hao_ = c.id_ left join t_mjsbwhbyjlzby d on a.id_ = d.parent_id_ where a.ri_qi_='${this.params.ri_qi_}' and a.shi_fou_guo_shen_!='已删除' and YEAR(a.ji_hua_shi_jian_) = ${y} and MONTH(a.ji_hua_shi_jian_) = ${m}`
+            const { variables: { data }} = await this.$common.request('sql', sql)
+            this.dataList = data
+            this.dataList.forEach(item => {
+                if (!Object.hasOwn(item, 'wei_hu_lei_xing_') || !item.wei_hu_lei_xing_) {
+                    item.wei_hu_lei_xing_ = '按需保养'
+                }
+            })
+            this.loading = false
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.paper-detail-dialog {
+    ::v-deep {
+        .el-dialog__header {
+            text-align: center;
+        }
+    }
+.dialog-title{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    div{
+        z-index: 99999999;
+        position: absolute;
+        right:8vw;
+    }
+    .dialogtitle{
+        font-size: 22px;
+        font-family: SimHei;
+        font-weight: bold;
+        color: #222;
+    }
+}
+.container {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        .el-row{
+            margin: 0 !important;
+        }
+        .required{
+            color: #606266 !important;
+            &::before{
+                content: '*';
+                margin: 0 4px 0 -7.5px;
+                color: #F56C6C;
+            }
+        }
+        .left{
+            height: calc(100vh - 100px);
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            padding:20px;
+            overflow-y: auto;
+            .agend{
+                margin: 20px 0 10px 0;
+                display: flex;
+                justify-content: space-between;
+                .descript{
+                    display: flex;
+                    gap: 18px;
+                    .item{
+                        width: auto;
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+                        .green-circle {
+                            width: 12px;
+                            height: 12px;
+                            background-color: #67C23A;
+                            border-radius: 50%;
+                        }
+                        .red-circle {
+                            width: 12px;
+                            height: 12px;
+                            background-color: #F56C6C;
+                            border-radius: 50%;
+                        }
+                        .orange-circle {
+                            width: 12px;
+                            height: 12px;
+                            background-color: #E6A23C;
+                            border-radius: 50%;
+                        }
+                        .red-bg {
+                            width: 12px;
+                            height: 12px;
+                            background-color: #F56C6C;
+                            opacity: .7;
+                        }
+                        .grey-bg{
+                            width: 12px;
+                            height: 12px;
+                            background-color: #a6b1bd;
+                            opacity: .7;
+                        }
+                    }
+                }
+
+            }
+            .search{
+                .label{
+                    font-size: 12px;
+                }
+                .item{
+                    display: flex;
+                    align-items: center;
+                }
+            }
+            .item{
+                width: 100%;
+            }
+            .title{
+                margin: 16px 0 6px -16px;
+            }
+            .table{
+                display: flex;
+                .column{
+                    flex: 1;
+                    &:nth-child(2){
+                        display: flex;
+                    }
+                    >.item{
+                        height: 50px;
+                        text-align: center;
+                        line-height: 50px;
+                        border-bottom: 1px solid #333;
+                        border-right: 1px solid #333;
+                        border-left: 1px solid #333;
+                        min-width: 100px;
+                    }
+                    @media screen and (max-width: 1800px) {
+                         >.item{
+                            height: 44px;
+                            line-height: 44px;
+                        }
+                    }
+                    @media screen and (max-width: 1550px) {
+                         >.item{
+                            height: 40px;
+                            line-height: 40px;
+                        }
+                    }
+                    >.item:nth-child(1){
+                        font-weight: 600;
+                        border-top: 1px solid #333;
+                        height: 30px;
+                        line-height: 30px;
+                    }
+                    .content-item{
+                        .unusual{
+                            background-color: #F56C6C !important;
+                            opacity: .7 !important;
+                        }
+                        .unused{
+                             background-color: #a6b1bd;
+                             opacity: .7;
+                        }
+                        >.item{
+                            position: relative;
+                            height: 50px;
+                            width: 50px;
+                            text-align: center;
+                            line-height: 50px;
+                            border-bottom: 1px solid #333;
+                            border-right: 1px solid #333;
+                        }
+                        @media screen and (max-width: 1800px) {
+                            >.item{
+                                height: 44px;
+                                width: 44px;
+                                line-height: 44px;
+
+                            }
+                        }
+                        @media screen and (max-width: 1550px) {
+                            >.item{
+                                height: 40px;
+                                width: 40px;
+                                line-height: 40px;
+
+                            }
+                        }
+                        >.item:nth-child(1){
+                            font-weight: 600;
+                            border-top: 1px solid #333;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+                        .green-circle {
+                            cursor: pointer;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                            width: 10px;
+                            height: 10px;
+                            background-color: #67C23A;
+                            border-radius: 50%;
+                        }
+                        .red-circle {
+                            cursor: pointer;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                            width: 10px;
+                            height: 10px;
+                            background-color: #F56C6C;
+                            border-radius: 50%;
+                        }
+                        .orange-circle {
+                            cursor: pointer;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                            width: 10px;
+                            height: 10px;
+                            background-color: #E6A23C;
+                            border-radius: 50%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+    ::v-deep {
+        .el-form-item__label{
+            text-align: left;
+            font-size: 12px !important;
+        }
+        .el-form-item__content{
+            font-size: 12px !important;
+        }
+        .el-divider--horizontal{
+            margin: 10px 0;
+        }
+    }
+</style>

src/views/component/device/maintenanceStaticAll.vue

@@ -35,54 +35,94 @@
                             />
                         </div>
                     </div>
-                </div>
-                <div class="agend">
-                    <div class="descript">
-                        <div class="item">
-                            <div class="green-circle" />
-                            <span>全部完成</span>
-                        </div>
-                        <div class="item">
-                            <div class="orange-circle" />
-                            <span>部分完成</span>
-                        </div>
-                        <div class="item">
-                            <div class="red-circle" />
-                            <span>全部未完成</span>
-                        </div>
-                        <div class="item">
-                            <div class="grey-bg" />
-                            <span>设备未使用</span>
-                        </div>
-                        <div class="item">
-                            <div class="red-bg" />
-                            <span>设备异常</span>
+                    <div class="item">
+                        <div class="label">部门：</div>
+                        <ibps-user-selector
+                            v-model="position"
+                            type="org"
+                            readonly-text="text"
+                            :disabled="false"
+                            :multiple="false"
+                            :filter="filter"
+                            filtrate
+                        />
+                    </div>
+                    <div class="item">
+                        <div class="label">设备类型：</div>
+                        <el-select v-model="deviceType" placeholder="请选择" size="mini" :clearable="true">
+                            <el-option
+                                v-for="item in ['检验系统','通用设备']"
+                                :key="item"
+                                :label="item"
+                                :value="item"
+                            />
+                        </el-select>
+                    </div>
+                    <div class="item">
+                        <div class="label">设备编号：</div>
+                        <div class="content">
+                            <el-input v-model="deviceNo" size="mini" />
                         </div>
-                        <div class="item" style="margin-left:60px">
-                            <span>设备异常次数：{{ formatData.repairCount }}</span>
+                    </div>
+                    <div class="item">
+                        <div class="label">设备名称：</div>
+                        <div class="content">
+                            <el-input v-model="deviceName" size="mini" />
                         </div>
-                        <div class="item">
-                            <span>设备总维护次数：{{ formatData.maintenanceCount }}</span>
+                    </div>
+                </div>
+                <div class="hearder">
+                    <div class="agend">
+                        <div class="descript">
+                            <div class="item">
+                                <div class="green-circle" />
+                                <span>全部完成</span>
+                            </div>
+                            <div class="item">
+                                <div class="orange-circle" />
+                                <span>部分完成</span>
+                            </div>
+                            <div class="item">
+                                <div class="red-circle" />
+                                <span>全部未完成</span>
+                            </div>
+                            <div class="item">
+                                <div class="grey-bg" />
+                                <span>设备未使用</span>
+                            </div>
+                            <div class="item">
+                                <div class="red-bg" />
+                                <span>设备异常</span>
+                            </div>
+                            <div class="item" style="margin-left:60px">
+                                <span>设备异常次数：{{ formatData.repairCount }}</span>
+                            </div>
+                            <div class="item">
+                                <span>设备总维护次数：{{ formatData.maintenanceCount }}</span>
+                            </div>
+                            <div class="item">
+                                <span>设备故障率：{{ formatData.faultRate }} %</span>
+                                <el-tooltip
+                                    effect="dark"
+                                    content="设备故障率计算公式：异常次数/总维护次数*100%，待处理与未使用不计入总维护次数中。"
+                                    placement="top"
+                                >
+                                    <i class="el-icon-question question-icon" />
+                                </el-tooltip>
+                            </div>
                         </div>
-                        <div class="item">
-                            <span>设备故障率：{{ formatData.faultRate }} %</span>
-                            <el-tooltip
-                                effect="dark"
-                                content="设备故障率计算公式：异常次数/总维护次数*100%，待处理与未使用不计入总维护次数中。"
-                                placement="top"
-                            >
-                                <i class="el-icon-question question-icon" />
-                            </el-tooltip>
+                        <div class="item-time">
+                            <span>统计时间：{{ curTime }}</span>
                         </div>
                     </div>
-                    <div class="item-time">
-                        <span>统计时间：{{ curTime }}</span>
-                    </div>
                 </div>
-                <div class="table">
+
+                <div v-if="fliterData.length>0" class="table">
                     <div class="column">
-                        <div class="item">保养类型/日期</div>
-                        <div v-for="item in type" :key="item" class="item">{{ item }}</div>
+                        <div class="item">设备名称/日期</div>
+                        <div v-for="(item) in fliterData" :key="item.original_device_n" class="item" style="cursor:pointer" @click="goLookStatic(item)">
+                            <span style="padding:0 6px" :title="item.she_bei_ming_chen">{{ item.original_device_n }}/{{ item.she_bei_ming_chen }}</span>
+                        </div>
                     </div>
                     <div class="column">
                         <div v-for="(item,index) in formatData.list" :key="index" class="content-item">
@@ -105,7 +145,7 @@
                                                 <el-divider />
                                                 <div class="detail-item">
                                                     <div class="item" style="margin:2px 0">处理人：{{ switchIdToUserName(ii.bian_zhi_ren_)|| '/' }}</div>
-                                                    <div class="item" style="margin:2px 0">设备状态：{{ ii.wei_hu_zhuang_tai|| '/' }}</div>
+                                                    <div class="item" style="margin:2px 0">设备状况：{{ ii.wei_hu_zhuang_tai|| '/' }}</div>
                                                     <div class="item" style="margin:2px 0">维护项目：{{ ii.wei_hu_xiang_mu_c|| '/' }}</div>
                                                     <div class="item" style="margin:2px 0">备注：{{ ii.bei_zhu_|| '/' }}</div>
                                                 </div>
@@ -120,19 +160,23 @@
                         </div>
                     </div>
                 </div>
+                <el-empty v-else description="暂无数据" />
             </div>
+            <MaintenanceStatic v-if="MaintenanceStaticVisible" :dialog-visible.sync="MaintenanceStaticVisible" :params="dialogParams" />
+
         </div>
     </el-dialog>
 </template>
 
 <script>
+import MaintenanceStatic from './maintenanceStatic.vue'
 import xlsx from 'xlsx'
 import fs from 'file-saver'
 import dayjs from 'dayjs'
 import ibpsUserSelector from '@/business/platform/org/selector'
 export default {
     components: {
-        ibpsUserSelector
+        ibpsUserSelector, MaintenanceStatic
     },
     props: {
         params: {
@@ -155,25 +199,33 @@ export default {
         if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
             monthList[1] = 29
         }
-        const { userId, position, level } = this.$store.getters
+        const { userId, position, level, org } = this.$store.getters
         return {
-            curTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+            faultRate: 0,
+            maintenanceCount: 0,
+            repairCount: 0,
+            dialogParams: {},
+            MaintenanceStaticVisible: false,
             pickerOptions: {
                 disabledDate (time) {
                     return time.getTime() > Date.now()
                 }
             },
+            curTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+            deviceNo: '',
+            deviceName: '',
+            deviceType: '',
             monthList: monthList,
             month: monthValue,
             monthDays: monthDays,
             userId: userId,
-            position: position,
+            position: org && org.id || '',
             level: level.second || level.first,
             loading: false,
             title: '设备维护统计',
             toolbars: [
                 { key: 'export', label: '导出', type: 'primary', hidden: true },
-                { key: 'cancel', label: '返回', type: 'danger' }
+                { key: 'cancel', label: '退出', type: 'danger' }
             ],
             initWidth: '1800px',
             isEdit: false,
@@ -187,7 +239,17 @@ export default {
 
             },
             dataList: [],
-            type: ['日保养', '周保养', '月保养', '季度保养', '半年保养', '年保养', '按需保养', '间隔保养']
+            type: ['日保养', '周保养', '月保养', '季度保养', '半年保养', '年保养', '按需保养'],
+            filter: [{
+                descVal: '1',
+                includeSub: true,
+                old: 'position',
+                partyId: this.$store.getters.userInfo.employee.positions,
+                partyName: '',
+                scriptContent: '',
+                type: 'user',
+                userType: 'position'
+            }]
         }
     },
     computed: {
@@ -227,31 +289,49 @@ export default {
                 'Thirty-One': this.month + '-31'
             }
         },
-        formatData () {
-            let repairCount = 0 // 异常
-            let maintenanceCount = 0 // 维护
-            const fliterData = this.dataList
+        fliterData () {
+            let fliterData = this.dataList
+            if (this.position) {
+                fliterData = fliterData.filter(item => item.bian_zhi_bu_men_ === this.position)
+            }
+            if (this.deviceNo) {
+                fliterData = fliterData.filter(item => item.original_device_n?.indexOf(this.deviceNo) > -1)
+            }
+            if (this.deviceType) {
+                fliterData = fliterData.filter(item => item.she_bei_lei_xing_ === this.deviceType)
+            }
+            if (this.deviceName) {
+                fliterData = fliterData.filter(item => item.she_bei_ming_chen?.indexOf(this.deviceName) > -1)
+            }
             const result = []
             fliterData.forEach(item => {
-                const { wei_hu_lei_xing_ } = item
-                const t = result.find(i => i.wei_hu_lei_xing_ === wei_hu_lei_xing_)
+                const { ri_qi_, she_bei_ming_chen, original_device_n, she_bei_lei_xing_ } = item
+                const t = result.find(i => i.ri_qi_ === ri_qi_)
                 if (t) {
                     t.children.push(item)
                 } else {
                     result.push({
-                        wei_hu_lei_xing_: wei_hu_lei_xing_,
+                        she_bei_ming_chen: she_bei_ming_chen,
+                        ri_qi_: ri_qi_,
+                        original_device_n,
+                        she_bei_lei_xing_,
                         children: [item]
                     })
                 }
             })
             // console.log('fliterData', result)
+            return result
+        },
+        formatData () {
+            let repairCount = 0 // 异常
+            let maintenanceCount = 0 // 维护
             const answer = new Array(this.monthDays)
             for (let i = 0; i < this.monthDays; i++) {
                 const arr = []
                 const day = ('0' + (i + 1)).slice(-2)
                 const fullDay = this.month + '-' + day
                 // console.log(fullDay)
-                this.type.forEach(item => {
+                this.fliterData.forEach(item => {
                     const obj = {
                         data: [],
                         count: 0,
@@ -260,20 +340,17 @@ export default {
                         status: true,
                         isUsed: true
                     }
-                    const t = result.find(j => j.wei_hu_lei_xing_ === item)
-                    if (t) {
-                        const tempList = t.children.filter(k => k.ji_hua_shi_jian_ === fullDay)
-                        obj.count = tempList.length
-                        obj.todo = tempList.filter(k => k.shi_fou_guo_shen_ === '待处理').length
-                        const yiwancheng = tempList.filter(k => k.shi_fou_guo_shen_ === '已完成')
-                        obj.done = yiwancheng.length
-                        obj.data = yiwancheng
-                        const weixiu = tempList.filter(item => item.wei_hu_zhuang_tai === '异常')
-                        obj.isUsed = !tempList.some(item => item.wei_hu_zhuang_tai === '未使用')
-                        obj.status = weixiu.length === 0
-                        repairCount += weixiu.length
-                        maintenanceCount += yiwancheng.filter(item => item.wei_hu_zhuang_tai !== '未使用').length
-                    }
+                    const tempList = item.children.filter(k => k.ji_hua_shi_jian_ === fullDay)
+                    obj.count = tempList.length
+                    obj.todo = tempList.filter(k => k.shi_fou_guo_shen_ === '待处理').length
+                    const yiwancheng = tempList.filter(k => k.shi_fou_guo_shen_ === '已完成')
+                    obj.done = yiwancheng.length
+                    obj.data = yiwancheng
+                    const weixiu = obj.data.filter(item => item.wei_hu_zhuang_tai === '异常')
+                    obj.isUsed = !obj.data.some(item => item.wei_hu_zhuang_tai === '未使用')
+                    obj.status = weixiu.length === 0
+                    repairCount += weixiu.length
+                    maintenanceCount += yiwancheng.filter(item => item.wei_hu_zhuang_tai !== '未使用').length
                     arr.push(obj)
                 })
                 answer[i] = arr
@@ -285,12 +362,7 @@ export default {
         }
     },
     mounted () {
-        if (this.params.searchMonth) {
-            this.month = this.params.searchMonth
-            this.handleMonthChange(this.month)
-        } else {
-            this.init()
-        }
+        this.init()
     },
     methods: {
         handleActionEvent ({ key }) {
@@ -305,6 +377,12 @@ export default {
                     break
             }
         },
+        // 查看设备统计
+        goLookStatic (row) {
+            this.dialogParams = row
+            this.dialogParams.searchMonth = this.month
+            this.MaintenanceStaticVisible = true
+        },
         // 人员id 转人员名称
         switchIdToUserName (id) {
             const { userList } = this.$store.getters
@@ -394,11 +472,12 @@ export default {
         },
         async init () {
             this.loading = true
-            this.title = `[${this.params.original_device_n}/${this.params.she_bei_ming_chen}]月度设备维护统计`
+            this.title = `月度设备维护统计`
             const y = +this.month.split('-')[0]
             const m = +this.month.split('-')[1]
-            const sql = `select a.id_ AS mainId,a.shi_fou_guo_shen_,a.bian_zhi_bu_men_,c.wei_hu_xiang_mu_c,a.bian_zhi_ren_,a.she_bei_ming_chen,a.she_bei_bian_hao_,a.ri_qi_,a.original_device_n,a.zhu_zhou_qi_,a.nei_rong_qing_kua,a.ji_hua_shi_jian_,c.she_bei_lei_xing_,c.wei_hu_ri_qi_,c.wei_hu_lei_xing_,c.ri_qi_shu_zi_,d.bei_zhu_,d.wei_hu_zhuang_tai from t_mjsbwhbyjlby a left join t_mjsbwhjhzb b on a.ji_hua_wai_jian_ = b.id_ left join v_device_devicemaintenance c on b.she_bei_bian_hao_ = c.id_ left join t_mjsbwhbyjlzby d on a.id_ = d.parent_id_ where a.ri_qi_='${this.params.ri_qi_}' and a.shi_fou_guo_shen_!='已删除' and YEAR(a.ji_hua_shi_jian_) = ${y} and MONTH(a.ji_hua_shi_jian_) = ${m}`
+            const sql = `select a.id_ AS mainId, a.shi_fou_guo_shen_, a.bian_zhi_bu_men_, c.wei_hu_xiang_mu_c, a.bian_zhi_ren_, a.she_bei_ming_chen, a.she_bei_bian_hao_, a.ri_qi_, a.original_device_n, a.zhu_zhou_qi_, a.nei_rong_qing_kua, a.ji_hua_shi_jian_, c.she_bei_lei_xing_, c.wei_hu_ri_qi_, c.wei_hu_lei_xing_, c.ri_qi_shu_zi_, d.bei_zhu_, d.wei_hu_zhuang_tai FROM t_mjsbwhbyjlby a LEFT JOIN v_device_devicemaintenance c ON a.she_bei_bian_hao_ = c.id_ LEFT JOIN t_mjsbwhbyjlzby d ON a.id_ = d.parent_id_ where a.shi_fou_guo_shen_!='已删除' and YEAR(a.ji_hua_shi_jian_) = ${y} and MONTH(a.ji_hua_shi_jian_) = ${m} `
             const { variables: { data }} = await this.$common.request('sql', sql)
+            // console.log('data', data)
             this.dataList = data
             this.dataList.forEach(item => {
                 if (!Object.hasOwn(item, 'wei_hu_lei_xing_') || !item.wei_hu_lei_xing_) {
@@ -446,7 +525,7 @@ export default {
             &::before{
                 content: '*';
                 margin: 0 4px 0 -7.5px;
-                color: #F56C6C;
+                color: red;
             }
         }
         .left{
@@ -501,12 +580,15 @@ export default {
 
             }
             .search{
-                .label{
-                    font-size: 12px;
-                }
+                display: flex;
                 .item{
+                    width: 300px;
                     display: flex;
                     align-items: center;
+                    .label{
+                        font-size: 12px;
+                        width: 60px;
+                    }
                 }
             }
             .item{
@@ -523,24 +605,35 @@ export default {
                         display: flex;
                     }
                     >.item{
-                        height: 50px;
-                        text-align: center;
-                        line-height: 50px;
+                        height: 46px;
+                        line-height: 46px;
                         border-bottom: 1px solid #333;
                         border-right: 1px solid #333;
                         border-left: 1px solid #333;
-                        min-width: 100px;
+                        span{
+                            display: inline-block;
+                            max-width: 320px;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            overflow: hidden;
+                        }
                     }
                     @media screen and (max-width: 1800px) {
                          >.item{
-                            height: 44px;
-                            line-height: 44px;
+                            height: 40px;
+                            line-height: 40px;
                         }
                     }
                     @media screen and (max-width: 1550px) {
                          >.item{
-                            height: 40px;
-                            line-height: 40px;
+                            height: 34px;
+                            line-height: 34px;
+                        }
+                    }
+                    @media screen and (max-width: 1450px) {
+                         >.item{
+                            height: 28px;
+                            line-height: 28px;
                         }
                     }
                     >.item:nth-child(1){
@@ -548,6 +641,12 @@ export default {
                         border-top: 1px solid #333;
                         height: 30px;
                         line-height: 30px;
+                        text-align: center;
+                    }
+                    >.item:not(:first-child) {
+                        :hover{
+                            color: #409EFF;
+                        }
                     }
                     .content-item{
                         .unusual{
@@ -560,29 +659,36 @@ export default {
                         }
                         >.item{
                             position: relative;
-                            height: 50px;
-                            width: 50px;
+                            height: 46px;
+                            width: 46px;
                             text-align: center;
-                            line-height: 50px;
+                            line-height: 46px;
                             border-bottom: 1px solid #333;
                             border-right: 1px solid #333;
                         }
                         @media screen and (max-width: 1800px) {
                             >.item{
-                                height: 44px;
-                                width: 44px;
-                                line-height: 44px;
+                                height: 40px;
+                                width: 40px;
+                                line-height: 40px;
 
                             }
                         }
                         @media screen and (max-width: 1550px) {
                             >.item{
-                                height: 40px;
-                                width: 40px;
-                                line-height: 40px;
+                                height: 34px;
+                                width: 34px;
+                                line-height: 34px;
 
                             }
                         }
+                        @media screen and (max-width: 1450px) {
+                         >.item{
+                            height: 28px;
+                            width: 28px;
+                            line-height: 28px;
+                        }
+                        }
                         >.item:nth-child(1){
                             font-weight: 600;
                             border-top: 1px solid #333;