Merge branch 'master' of http://www.beijingsoft.cn:9090/r/mdc-front

yangys

2024-01-13 f466ae4fdc645c66c9f25e2e4598b9809e2b41af

Merge branch 'master' of http://www.beijingsoft.cn:9090/r/mdc-front

 src/api/Api.js

@@ -1,7 +1,7 @@
/*
 * @Date: 2024-01-10 20:37:45
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 10:48:47
 * @LastEditTime: 2024-01-13 21:27:18
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/api/Api.js
 */
import ajax from '@/utils/ajax'
@@ -32,8 +32,43 @@
    deviceTypeQuery: {
        url: '/devicetype/pageQuery',
        method: 'POST'
    }
    maintainCreate: {
        url: '/maintain/save',
        method: 'POST'
    },
    maintainUpdate: {
        url: '/maintain/update',
        method: 'POST'
    },
    maintaindelete: {
        url: '/devicetype/delete',
        method: 'POST'
    },
    deviceTypeQuery: {
        url: '/devicetype/pageQuery',
        method: 'POST'
    },
    deviceTypeCreate: {
        url: '/devicetype/save',
        method: 'POST'
    },
    deviceTypeUpdate: {
        url: '/devicetype/update',
        method: 'POST'
    },
    deviceTypeDel: {
        url: '/devicetype/delete',
        method: 'POST'
    },
    machineList: {
        url: '/machine/list',
        method: 'POST'
    },
    machineConcern: {
        url: '/machine/concern',
        method: 'POST'
    }
    
}
// æ­£å¼çŽ¯å¢ƒé…ç½®åœ°å€
export const URL_CFG = {

 src/components/newComp/Status.vue

@@ -1,33 +1,40 @@
<!--
 * @Date: 2024-01-08 19:38:05
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-08 19:38:30
 * @LastEditTime: 2024-01-13 22:09:04
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/components/newComp/Status.vue
-->
<template>
    <div class="top">
        <slot name="before"></slot>
        <div class="top-item top-1">
            <div>16</div>
            <div>{{info.stop}}</div>
            <div>停机状态</div>
        </div>
        <div class="top-item top-2">
            <div>16</div>
            <div>停机状态</div>
            <div>{{info.run}}</div>
            <div>运行状态</div>
        </div>
        <div class="top-item top-3">
            <div>16</div>
            <div>停机状态</div>
            <div>{{info.idle}}</div>
            <div>待机状态</div>
        </div>
        <div class="top-item top-4">
            <div>{{info.alarm}}</div>
            <div>报警状态</div>
        </div>
        <slot name="after"></slot>
        <!-- <div class="top-item top-5">
            <div>16</div>
            <div>停机状态</div>
        </div>
        <div class="top-item top-5">
            <div>16</div>
            <div>停机状态</div>
        </div>
        </div> -->
    </div>
</template>
<script>
    export default {
        props: ['info'],
    }
</script>
<style lang="scss" scoped>
    .top {
                    display: flex;

 src/container/Map/LeftStatus.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,124 @@
<!--
 * @Date: 2024-01-13 19:43:55
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 22:01:41
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/LeftStatus.vue
-->
<template>
    <div class="left">
        <slot></slot>
        <div class="left-item left-1">
            <div>{{ runRate }}</div>
            <div>开机率</div>
        </div>
        <div class="left-item left-2">
            <div>{{ alarmRate }}</div>
            <div>故障率</div>
        </div>
        <div class="left-item left-3">
            <div>{{cutRate}}</div>
            <div>切削率</div>
        </div>
        <div class="left-item left-4">
            <div>{{twoShiftRate}}</div>
            <div>二班开工率</div>
        </div>
        <div class="left-item left-5">
            <div>{{threeShiftRate}}</div>
            <div>三班开工率</div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            info: {
                type: Object
            }
        },
        computed: {
            cutRate () {
                if (this.info.cutRate) return this.info.cutRate + '%'
                return 0
            },
            twoShiftRate () {
                if (this.info.twoShiftRate) return this.info.twoShiftRate + '%'
                return 0
            },
            threeShiftRate () {
                if (this.info.threeShiftRate) return this.info.threeShiftRate + '%'
                return 0
            },
            runRate () {
                if (this.info.runRate) return this.info.runRate + '%'
                return 0
            },
            alarmRate () {
                if (this.info.alarmRate) return this.info.alarmRate + '%'
                return 0
            },
        }
    }
</script>
<style lang="scss" scoped>
    .left {
                flex: 0 0 auto;
                width: 194px;
                height: 100%;
                padding: 0 10px;
                background: url('./img/left_icon.png') 100% center no-repeat;
                .edit-btn {
                    margin-top: 20px;
                    color: #C6DCE0;
                    text-align: center;
                    line-height: 38px;
                    width: 150px;
                    height: 38px;
                    background: url('./img/btn.png') 100% center no-repeat;
                    background-size: contain;
                    font-size: 16px;
                    cursor: pointer;
                }
                .left-select {
                    margin-top: 20px;
                    width: 150px;
                }
                .left-item:first-child {
                }
                .left-item {
                    margin-top: 20px;
                    width: 138px;
                    height: 138px;
                    background: url('./img/left_1.png') 0 0 no-repeat;
                    background-size: contain;
                    color: #D6EEEF;
                    position: relative;
                    & > div:first-child {
                        font-size: 23px;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);
                    }
                    & > div:last-child {
                        font-size: 12px;
                        position: absolute;
                        left: 50%;
                        bottom: 25px;
                        transform: translate(-50%,-50%);
                    }
                }
                .left-2 {
                    background-image: url('./img/left_2.png');
                }
                .left-3 {
                    background-image: url('./img/left_3.png');
                }
                .left-4 {
                    background-image: url('./img/left_4.png');
                }
                .left-5 {
                    background-image: url('./img/left_5.png');
                }
            }
</style>

 src/container/Map/index.vue

@@ -1,48 +1,30 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-12 22:37:43
 * @LastEditTime: 2024-01-13 22:19:48
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/index.vue
-->
<template>
    <div class="workshop">
        <Map v-if="status===0 || status === 1 && id" :status="status" :currentMap="currentMap" :name="plantName" :id="id" @out="out" />
        <div v-else class="preview">
            <div class="left">
                <div @click="editMap" class="edit-btn">
                    {{id ? '进入编辑状态' : '新增'}}
                </div>
                <el-select clearable class="left-select" v-model="id" placeholder="请选择">
                    <el-option
                    v-for="item in mapList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <div class="left-item left-1">
                    <div>44%</div>
                    <div>开机率</div>
                </div>
                <div class="left-item left-2">
                    <div>44%</div>
                    <div>故障率</div>
                </div>
                <div class="left-item left-3">
                    <div>44%</div>
                    <div>切削率</div>
                </div>
                <div class="left-item left-4">
                    <div>44%</div>
                    <div>二班开工率</div>
                </div>
                <div class="left-item left-5">
                    <div>44%</div>
                    <div>三班开工率</div>
                </div>
            </div>
            <LeftStatus class="left" :info="info">
                <template>
                    <div @click="editMap" class="edit-btn">
                        {{id ? '进入编辑状态' : '新增'}}
                    </div>
                    <el-select clearable class="left-select" v-model="id" placeholder="请选择">
                        <el-option
                        v-for="item in mapList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </LeftStatus>
            <div class="right">
                <Status v-show="false"/>
                <Status v-show="id" :info="info"/>
                <div class="preview-map">
                    <Map v-if="id" :status="2" :currentMap="currentMap"  @out="out" />
                </div>
@@ -51,12 +33,15 @@
    </div>
</template>
<script>
    import Map from './Map.vue'
    import Map from './Map.vue';
    import Status from '@/components/newComp/Status'
    import LeftStatus from './LeftStatus.vue'
    import { getRequest, getUrl } from '@/api/Api'
    export default {
        components: {
            Map,
            Status
            Status,
            LeftStatus
        },
        watch: {
            id (val) {
@@ -65,8 +50,28 @@
                    this.plantName = ''
                    return
                }
                this.currentMap = JSON.parse(this.mapList.find(item => item.id ===this.id).gridSetting)
                this.plantName = this.mapList.find(item => item.id ===this.id).name
                try {
                    this.currentMap = JSON.parse(this.mapList.find(item => item.id ===this.id).gridSetting)
                    this.plantName = this.mapList.find(item => item.id ===this.id).name
                } catch (error) {
                    
                }
                getRequest('machineList', {
                    plantId: this.id,
                }).then(res => {
                    // this.list = res.data.list
                    this.info = {
                        runRate: res.data.runRate,
                        cutRate: res.data.cutRate,
                        alarmRate: res.data.alarmRate,
                        threeShiftRate: res.data.threeShiftRate,
                        twoShiftRate: res.data.twoShiftRate,
                        run: res.data.run,
                        alarm: res.data.alarm,
                        stop: res.data.stop,
                        idle: res.data.idle
                    }
                })
            }
        },
        data () {
@@ -76,6 +81,17 @@
                plantName: '',
                mapList: [],
                status: 2, // 0 æ–°å¢ž 1编辑 2查看
                info: {
                    runRate: '',
                    cutRate: '',
                    alarmRate: '',
                    threeShiftRate: '',
                    twoShiftRate: '',
                    run: '',
                    alarm: '',
                    stop: '',
                    idle: '',
                }
            }
        },
        methods: {
@@ -124,67 +140,6 @@
            width: 100%;
            height: 100%;
            display: flex;
            .left {
                flex: 0 0 auto;
                width: 194px;
                height: 100%;
                margin-left: 20px;
                background: url('./img//left_icon.png') 100% center no-repeat;
                .edit-btn {
                    margin-top: 20px;
                    color: #C6DCE0;
                    text-align: center;
                    line-height: 38px;
                    width: 150px;
                    height: 38px;
                    background: url('./img//btn.png') 100% center no-repeat;
                    background-size: contain;
                    font-size: 16px;
                    cursor: pointer;
                }
                .left-select {
                    margin-top: 20px;
                    width: 150px;
                }
                .left-item:first-child {
                    margin-top: 138px;
                }
                .left-item {
                    margin-top: 20px;
                    width: 138px;
                    height: 138px;
                    background: url('./img/left_1.png') 0 0 no-repeat;
                    background-size: contain;
                    color: #D6EEEF;
                    position: relative;
                    & > div:first-child {
                        font-size: 23px;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);
                    }
                    & > div:last-child {
                        font-size: 12px;
                        position: absolute;
                        left: 50%;
                        bottom: 25px;
                        transform: translate(-50%,-50%);
                    }
                }
                .left-2 {
                    background-image: url('./img/left_2.png');
                }
                .left-3 {
                    background-image: url('./img/left_3.png');
                }
                .left-4 {
                    background-image: url('./img/left_4.png');
                }
                .left-5 {
                    background-image: url('./img/left_5.png');
                }
            }
            .right {
                width: calc(100% -  194px);
                padding-top: 30px; 

 src/container/component/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 11:34:15
 * @LastEditTime: 2024-01-13 22:13:05
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/component/index.vue
-->
<template>
@@ -162,6 +162,7 @@

    .nav {
        padding: 10px 30px;
        font-size: 14px;
    }

    .item {

 src/container/home/index.vue

@@ -3,7 +3,7 @@
        <template slot="menu">
            <div class="menu-container">
                <ul class="">
                    <li :class="activeId ==='1' ? 'active' : ''" @click="navigateTo('1')">状态监控</li>
                    <!-- <li :class="activeId ==='1' ? 'active' : ''" @click="navigateTo('1')">状态监控</li> -->
                    <li :class="activeId ==='0' ? 'active' : ''" @click="navigateTo('0')">大屏展示</li>
                    <li :class="activeId ==='2' ? 'active' : ''" @click="navigateTo('2')">
                        <span>
@@ -15,7 +15,7 @@
                        <span>
                            è½¦é—´åˆ—表<i class="el-icon-caret-bottom"></i>
                        </span>
                        <ul v-if="showSub">
                        <ul v-if="showSub" class="sub">
                            <li v-for="item in workshopList" :key="item.id" @click.stop="navigateTo('workshop',item)">{{ item.name }}</li>
                        </ul>
                    </li>
@@ -23,25 +23,25 @@
                        <span>
                            è®¾å¤‡ä¿å…»<i class="el-icon-caret-bottom"></i>
                        </span>
                        <!-- <ul v-if="showSub">
                            <li>2厂</li>
                            <li>2厂</li>
                            <li>2厂</li>
                            <li>2厂</li>
                        </ul> -->
                        <ul v-if="showSub">
                            <li @click="navigateTo('maintenance', {style: 1})">日常保养</li>
                            <li @click="navigateTo('maintenance', {style: 2})">一级</li>
                            <li @click="navigateTo('maintenance', {style: 3})">二级</li>
                            <li @click="navigateTo('maintenance', {style: 4})">三级</li>
                        </ul>
                    </li>
                    <li :class="activeId ==='5' ? 'active' : ''" @click="navigateTo('5')">
                    <!-- <li :class="activeId ==='5' ? 'active' : ''" @click="navigateTo('5')">
                        <span>
                            æŠ¥è¡¨ç”Ÿæˆ<i class="el-icon-caret-bottom"></i>
                        </span>
                        <!-- <ul v-if="showSub">
                        <ul v-if="showSub">
                            <li>2厂</li>
                            <li>2厂</li>
                            <li>2厂</li>
                            <li>2厂</li>
                        </ul> -->
                    </li>
                    <li :class="activeId ==='6' ? 'active' : ''" @click="navigateTo('6')">班次设置</li>
                        </ul>
                    </li> -->
                    <!-- <li :class="activeId ==='6' ? 'active' : ''" @click="navigateTo('6')">班次设置</li> -->
                    <li :class="activeId ==='7' ? 'active' : ''" @click="navigateTo('7')">工件信息</li>
                    <li :class="activeId ==='8' ? 'active' : ''" @click="navigateTo('8')">
                        <span>
@@ -91,39 +91,31 @@
            let routers = {
                2: 'map',
                workshop: 'workshop',
                4: 'maintenance',
                maintenance: 'maintenance',
                7: 'component',
                ledger: 'ledger',
                deviceType: 'deviceType',
            }
            
            if (['3','5','8'].includes(name)) {
            if (['3','4','5','8'].includes(name)) {
                if (name === this.activeId) {
                    this.showSub = !this.showSub
                } else {
                    this.showSub = true
                }
                this.activeId = name
                // let param = {}
                // if (v) {
                //     param.id = v.id
                // }
                // this.$router.push({name: routers[name],params: {
                //     id: v.id
                // },query: {
                //     ...v
                // }})
                // this.$nextTick(() => {
                //     this.showSub = false
                // })
            } else {
                this.activeId = name
                console.log(name)
                let params = {}
                let query = {}
                if ('workshop' === name) {
                    params.id = v.id
                    query.name = v.name
                }
                this.$router.push({name: routers[name],params: params})
                if (name === 'maintenance') {
                    params.style = v.style
                }
                this.$router.push({name: routers[name],params: params,query: query})
                this.$nextTick(() => {
                    this.showSub = false
                })
@@ -155,6 +147,7 @@
            position: relative;
            ul {
                display: none;
                font-size: 14px;
            }
            // user-select:none;
        }

 src/container/ledger/Manage-add-update.vue

@@ -7,8 +7,8 @@
      :visible.sync="addVisible">

      <!-- æ·»åŠ å†…容-->

      <el-form  :model="dataForm" label-width="100px" ref="dataForm">

          <!-- <el-row :gutter="20">

          <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

          <el-row :gutter="20">

          <!-- <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

            <el-form-item label="机床名" prop="machineName">

              <el-select filterable v-model="dataForm.machineName" placeholder="支持模糊查询" clearable>

                <el-option

@@ -254,14 +254,14 @@
                <el-button size="small" type="primary">点击上传</el-button>

              </el-upload>

            </el-form-item>

          </el-col>

        </el-row> -->

          </el-col> -->

        </el-row>



      </el-form>

      <!-- æŒ‰é’® -->

        <span slot="footer" class="dialog-footer">

        <el-button size="mini" @click="cancel">取消</el-button>

        <el-button size="mini" type="primary" @click="dataFormSubmit()">保存</el-button>

        <el-button size="mini" type="primary" style="background-color: #409EFF;" @click="dataFormSubmit()">保存</el-button>

      </span>

    </el-dialog>

  </div>

@@ -401,6 +401,9 @@
      width: 100%;

    }

  }

  .el-dialog__body {

    overflow: hidden;

  }

  .avatar-uploader .el-upload {

    border: 1px dashed #d9d9d9;

    border-radius: 6px;


 src/container/ledger/index.vue

@@ -1,12 +1,12 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 11:33:09
 * @LastEditTime: 2024-01-13 22:13:17
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/ledger/index.vue
-->
<template>
    <div class="maintenance">
        <div class="nav">设备保养/日常保养</div>
        <div class="nav">台账</div>
        <List ref="list" url="/account/pageQuery">
            <template slot="search">
                <div class="item">
@@ -269,6 +269,7 @@

    .nav {
        padding: 10px 30px;
        font-size: 14px;
    }

    .item {

 src/container/maintenance/dailyMAdd.vue

@@ -7,13 +7,13 @@
        :visible.sync="dialogVisibleAdd" class="role-select">

         <!-- æŸ¥è¯¢è¡¨å• -->

        <el-form :model="dataForm" ref="dataForm" label-width="150px" style="margin-top:10px;">

            <el-row>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

            <el-row :gutter="20">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="统一编号" prop="uuid">

                        <el-input type="text" v-model="dataForm.uuid" autocomplete="off"></el-input>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="设备名称" prop="machineName">

                        <el-select v-model="dataForm.machineName" placeholder="---请选择---">

                            <el-option

@@ -25,26 +25,26 @@
                        </el-select>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="设备型号" prop="type">

                        <el-input size="mini" type="text" v-model="dataForm.type"></el-input>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="设备规格" prop="specification">

                        <el-input size="mini" type="text" v-model="dataForm.specification" @input="getMachineInfo"></el-input>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="安装地点" prop="location">

                        <el-input size="mini" type="text" v-model="dataForm.location"></el-input>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="使用部门" prop="department">

                        <el-select v-model="dataForm.department" placeholder="---请选择---" clearable >

                            <el-option

                            v-for="item in department"

                            v-for="item in departmentlist"

                            :key="item.value"

                            :label="item.label"

                            :value="item.value">

@@ -52,7 +52,7 @@
                        </el-select>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="保养者" prop="maintainPerson">

                        <el-select v-model="dataForm.maintainPerson" placeholder="---请选择---" clearable >

                            <el-option

@@ -64,27 +64,27 @@
                        </el-select>

                    </el-form-item>

                </el-col>

                <!-- <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <!-- <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="保养周期" prop="maintainPeriod">

                        <el-input size="mini" type="text" v-model="dataForm.maintainPeriod"></el-input>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="投产日期" prop="productionDate">

                        <el-input size="mini" type="text" v-model="dataForm.productionDate"></el-input>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="生产厂家" prop="manufacturer">

                        <el-input size="mini" type="text" v-model="dataForm.manufacturer"></el-input>

                    </el-form-item>

                </el-col> -->

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="计划状态" prop="planStatus">

                        <el-input size="mini" type="text" v-model="dataForm.planStatus" readonly></el-input>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="是否合格" prop="isQualified">

                        <el-select v-model="dataForm.isQualified" placeholder="---请选择---" clearable >

                            <el-option

@@ -96,33 +96,31 @@
                        </el-select>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="计划开始日期" prop="planStartDate">

                        <el-date-picker

                        format="yyyy å¹´ MM æœˆ dd æ—¥"

                        value-format="yyyy-MM-dd"

                        v-model="dataForm.planStartDate"

                        type="daterange"

                        range-separator="至"

                        start-placeholder="开始日期"

                        end-placeholder="结束日期">

                        </el-date-picker>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="计划完成日期" prop="planFinishDate">

                        <el-date-picker

                        format="yyyy å¹´ MM æœˆ dd æ—¥"

                        value-format="yyyy-MM-dd"

                        v-model="dataForm.planFinishDate"

                        type="daterange"

                        range-separator="至"

                        start-placeholder="开始日期"

                        end-placeholder="结束日期">

                        </el-date-picker>

                    </el-form-item>

                </el-col>

                <el-col :xs="24":sm="12":md="12":lg="12":xl="12">

                <el-col :xs="24":sm="6":md="6":lg="6":xl="6">

                    <el-form-item label="保养内容与存在问题" prop="detail">

                        <el-input size="mini" type="text" v-model="dataForm.detail"></el-input>

                    </el-form-item>

@@ -140,8 +138,9 @@
<script>

// import { getMachineList, maintainCreate, maintainUpdate, deviceManage, userList, departmentGet } from '@/api/MdcApi'

import { getMachineList, maintainCreate, maintainUpdate, userList, departmentGet } from '@/api/MdcApi'

import { getRequest } from '@/api/Api'

export default {

  props: ['styles'],

  props: ['styles', 'departmentlist'],

  data() {

    return {

      dataForm: {

@@ -224,7 +223,7 @@
      this.dialogVisibleAdd = true

      this.machineName = []

      this.maintainPerson = []

      this.initDevices() // åˆå§‹åŒ–数据

      // this.initDevices() // åˆå§‹åŒ–数据

    },

    // ä¿å­˜

    savedata() {

@@ -236,93 +235,53 @@
      const completeDateTo = this.dataForm.planFinishDate[1]

      const isQualified = this.dataForm.isQualified === '合格' ? 1 : 0

      if (this.no === 1) {

        maintainCreate(

          this.styles, this.dataForm.uuid, this.dataForm.machineName, this.dataForm.type,

          this.dataForm.specification, this.dataForm.department, this.dataForm.location,

          startDateFrom, startDateTo, completeDateFrom, completeDateTo, isQualified,

          this.dataForm.state, this.dataForm.detail

        ).then(res => {

          if (res.result === 'SUCCESS') {

            this.$message({

              type: 'success',

              message: '保存成功!'

            })

            this.$emit('reflash')

            // const that = this

            this.dialogVisibleAdd = false

          } else {

            this.$message({

              type: 'error',

              message: res.result

            })

          }

        })

        getRequest('maintainCreate',{})

        // maintainCreate(

        //   this.styles, this.dataForm.uuid, this.dataForm.machineName, this.dataForm.type,

        //   this.dataForm.specification, this.dataForm.department, this.dataForm.location,

        //   startDateFrom, startDateTo, completeDateFrom, completeDateTo, isQualified,

        //   this.dataForm.state, this.dataForm.detail

        // ).then(res => {

        //   if (res.result === 'SUCCESS') {

        //     this.$message({

        //       type: 'success',

        //       message: '保存成功!'

        //     })

        //     this.$emit('reflash')

        //     // const that = this

        //     this.dialogVisibleAdd = false

        //   } else {

        //     this.$message({

        //       type: 'error',

        //       message: res.result

        //     })

        //   }

        // })

      } else {

        getRequest('maintainUpdate',{})

        // ä¿®æ”¹ä¿å­˜

        maintainUpdate(this.styles, this.data.id, this.dataForm.uuid, this.dataForm.machineName, this.dataForm.type,

          this.dataForm.specification, this.dataForm.department, this.dataForm.location,

          startDateFrom, startDateTo, completeDateFrom, completeDateTo, isQualified,

          this.dataForm.state, this.dataForm.detail).then(res => {

          if (res.result === 'SUCCESS') {

            this.$message({

              type: 'success',

              message: '保存成功!'

            })

            this.$emit('reflash')

          } else {

            this.$message({

              type: 'error',

              message: res.result

            })

          }

        })

        // maintainUpdate(this.styles, this.data.id, this.dataForm.uuid, this.dataForm.machineName, this.dataForm.type,

        //   this.dataForm.specification, this.dataForm.department, this.dataForm.location,

        //   startDateFrom, startDateTo, completeDateFrom, completeDateTo, isQualified,

        //   this.dataForm.state, this.dataForm.detail).then(res => {

        //   if (res.result === 'SUCCESS') {

        //     this.$message({

        //       type: 'success',

        //       message: '保存成功!'

        //     })

        //     this.$emit('reflash')

        //   } else {

        //     this.$message({

        //       type: 'error',

        //       message: res.result

        //     })

        //   }

        // })

      }

    },

    /**

         * åˆå§‹åŒ–已有机床

         */

    initDevices() {

      this.machineName = []

      this.maintainPerson = []

      this.department = []

      // è®¾å¤‡åç§°

      getMachineList().then(res => {

        res.list.map(item => {

          this.machineName.push({

            label: item.name,

            value: item.name,

            id: item.id

          })

        })

      })

      // ä½¿ç”¨å•ä½

      userList().then(res => {

        res.list.map(elem => {

          this.maintainPerson.push({

            label: elem.user,

            value: elem.user,

            id: elem.id

          })

          //    .split('_')[1]

        })

      })

      // èŽ·å–部门

      departmentGet().then(res => {

        res.list.map(elem => {

          this.department.push({

            label: elem.name,

            value: elem.name,

            id: elem.id

          })

        })

      })

    },

    // è®¾å¤‡åç§°å¸¦å‡º

    getMachineInfo() {

      // deviceManage(this.dataForm.machineName, this.dataForm.type, this.dataForm.specification).then(res => {

      //

      // })

    },

    // é‡ç½®

    resetForm() {

      this.$refs.dataForm.resetFields()

@@ -333,11 +292,20 @@
  }

}

</script>



<style lang="scss">

.el-form-item__content {

    .el-select,.el-input {

      width: 100%;

    }

  }

  .el-dialog__body {

    overflow: hidden;

  }

</style>

<style scoped>

    .el-table__body .cell{padding:3px;}

    /* .el-table__body .cell{padding:3px;}

    .el-input__icon{line-height: 30px;}

    .el-input__inner{height:30px;line-height: 30px;}

    .el-form-item__content{line-height: 40px;}

    .el-col{height:36px;}

    .el-col{height:36px;} */

</style>


 src/container/maintenance/index.vue

@@ -1,67 +1,52 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 11:33:27
 * @LastEditTime: 2024-01-13 22:13:21
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/maintenance/index.vue
-->
<template>
    <div class="maintenance">
        <div class="nav">设备保养/日常保养</div>
        <List ref="list" url="/component/pageQuery">
        <div class="nav">设备保养/{{navName}}</div>
        <List ref="list" url="/maintain/pageQuery">
            <template slot="search">
                <div class="item">
                    <span>统一编号</span>
                    <el-input class="item-value" v-model="query.no"></el-input>
                    <el-input class="item-value" v-model="queryInfo.uuid"></el-input>
                </div>
                <div class="item">
                    <span>设备名称</span>
                    <!-- <el-input class="item-value" v-model="query.no"></el-input> -->
                    <el-select class="item-value" v-model="query.no" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    <el-select class="item-value" v-model="queryInfo.machineName" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span>设备型号</span>
                    <el-input class="item-value" v-model="query.no"></el-input>
                    <el-input class="item-value" v-model="queryInfo.type"></el-input>
                </div>
                <div class="item">
                    <span>设备规格</span>
                    <el-input class="item-value" v-model="query.no"></el-input>
                    <el-input class="item-value" v-model="queryInfo.specification"></el-input>
                </div>
                <div class="item">
                    <span>使用部门</span>
                    <el-input class="item-value" v-model="query.no"></el-input>
                    <el-select class="item-value" v-model="queryInfo.department">
                        <el-option v-for="item in departmentlist" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span>安装位置</span>
                    <el-input class="item-value" v-model="query.no"></el-input>
                    <el-input class="item-value" v-model="queryInfo.location"></el-input>
                </div>
                <div class="item">
                    <span>计划开始日期</span>
                    <!-- <el-input class="item-value" v-model="query.no"></el-input> -->
                    <el-date-picker
                        class="item-value"
                        v-model="query.no"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        >
                    <el-date-picker class="item-value" v-model="queryInfo.planStartDate" align="right" type="date" placeholder="选择日期">
                    </el-date-picker>
                </div>
                <div class="item">
                    <span>计划完成日期</span>
                    <el-date-picker
                        class="item-value"
                        v-model="query.no"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        >
                    <el-date-picker class="item-value" v-model="queryInfo.planFinishDate" align="right" type="date" placeholder="选择日期">
                    </el-date-picker>
                </div>
                <div class="item">
@@ -72,124 +57,140 @@
                </div>
            </template>
            <template slot="table-tool">
                <el-button type="primary" size="mini" @click="add">添加</el-button>
                <el-button type="primary" size="mini" @click="addDevice(1)">添加</el-button>
            </template>
            <template slot="columns">
                <el-table-column
                <!-- <el-table-column
                type="selection"
                align="center"
                width="55">
            </el-table-column>
            <el-table-column
                align="center"
                label="统一编号"
                prop="uuid">
            </el-table-column>
            <el-table-column
                align="center"
                label="设备名称"
                width="150"
                :show-overflow-tooltip="true"
                prop="machineName">
            </el-table-column>
            <el-table-column
                align="center"
                label="设备型号"
                prop="type">
            </el-table-column>
            <el-table-column
                align="center"
                label="设备规格"
                prop="specification">
            </el-table-column>
            <el-table-column
                align="center"
                label="使用单位"
                prop="department">
            </el-table-column>
            <el-table-column
                align="center"
                label="保养者"
                prop="userName">
            </el-table-column>
            <el-table-column
                align="center"
                label="保养周期"
                prop="period">
            </el-table-column>
            <el-table-column
                align="center"
                label="保养类型"
                prop="style">
                <template slot-scope="scope">
                    <span>{{scope.row.style === "1" ? "日常保养" : scope.row.style === "2" ? "一级保养" :
                      scope.row.style === "3" ? "二级保养" : "三级保养" }}</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="110"
                label="是否合格"
                prop="isQualified">
                <template slot-scope="scope">
                    <span>{{scope.row.isQualified === "1"? "合格" : "不合格"}}</span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="120"
                :show-overflow-tooltip="true"
                label="计划开始时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.startDateFrom">{{scope.row.startDateFrom+ '~' +scope.row.startDateTo}}</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="120"
                :show-overflow-tooltip="true"
                label="计划完成时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.completeDateFrom">{{scope.row.completeDateFrom+ '~' +scope.row.completeDateTo}}</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="150"
                :show-overflow-tooltip="true"
                label="保养内容与存在问题"
                prop="detail">
            </el-table-column>
            <el-table-column
                align="center"
                label="编辑"
                prop="editor">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="addDevice(2,scope.row,$event)">编辑</el-button>
                    <el-button size="mini" type="text" @click="deleteHandle(2,scope.row)">删除</el-button>
                </template>
            </el-table-column>
            </el-table-column> -->
                <el-table-column align="center" label="统一编号" prop="uuid">
                </el-table-column>
                <el-table-column align="center" label="设备名称" width="150" :show-overflow-tooltip="true" prop="machineName">
                </el-table-column>
                <el-table-column align="center" label="设备型号" prop="type">
                </el-table-column>
                <el-table-column align="center" label="设备规格" prop="specification">
                </el-table-column>
                <el-table-column align="center" label="使用单位" prop="department">
                </el-table-column>
                <el-table-column align="center" label="保养者" prop="userName">
                </el-table-column>
                <el-table-column align="center" label="保养周期" prop="period">
                </el-table-column>
                <el-table-column align="center" label="保养类型" prop="style">
                    <template slot-scope="scope">
                        <span>{{ scope.row.style === "1" ? "日常保养" : scope.row.style === "2" ? "一级保养" :
                            scope.row.style === "3" ? "二级保养" : "三级保养" }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="110" label="是否合格" prop="isQualified">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isQualified === "1" ? "合格" : "不合格" }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="120" :show-overflow-tooltip="true" label="计划开始时间">
                    <template slot-scope="scope">
                        <span v-if="scope.row.startDateFrom">{{ scope.row.startDateFrom + '~' + scope.row.startDateTo }}</span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="120" :show-overflow-tooltip="true" label="计划完成时间">
                    <template slot-scope="scope">
                        <span v-if="scope.row.completeDateFrom">{{ scope.row.completeDateFrom + '~'
                            + scope.row.completeDateTo }}</span>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="150" :show-overflow-tooltip="true" label="保养内容与存在问题" prop="detail">
                </el-table-column>
                <el-table-column align="center" label="操作" prop="editor">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="addDevice(2, scope.row, $event)">编辑</el-button>
                        <el-button size="mini" type="text" @click="deleteHandle(2, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </List>
        <DailyMAddD ref="dailyMAddD" @reflash="submitForm" :departmentlist="departmentlist"></DailyMAddD>
    </div>
</template>
<script>
    import List from '../list/index.vue'
    export default {
        components: {
            List
        },
        data () {
            return {
                query: {
                    no: ''
                },
                options: [{}]
            }
import List from '../list/index.vue'
import { getUseDpts,getRequest } from '@/api/Api'
import DailyMAddD from './dailyMAdd.vue'
export default {
    components: {
        List,
        DailyMAddD
    },
    computed: {
        navName () {
            let names = ['日常保养','一级','二级','三级']
            return names[this.$route.params.style-1]
        }
    }
    },
    data() {
        return {
            departmentlist: [],
            options: [],
            queryInfo: {
                uuid: '',
                machineName: '',
                type: '',
                specification: '',
                department: '',
                location: '',
                planStartDate: '',
                planFinishDate: '',
            },
            
        }
    },
    mounted() {
        this.init()
        this.query()
    },
    methods: {
        init () {
            // æŸ¥è¯¢ä½¿ç”¨éƒ¨é—¨
            getUseDpts().then(res => {
                this.departmentlist = res.data.map(item => {
                    return {
                        value: item.id,
                        label: item.name
                    }
                })
            })
        },
        query() {
            this.$refs.list.pageQuery(this.queryInfo)
        },
        reset() {
            Object.keys(this.queryInfo).forEach(key => {
                this.queryInfo[key] = ''
            })
        },
        addDevice(n, row, event) {
            if (n === 1) {
                this.$nextTick(() => {
                    this.$refs.dailyMAddD.init(n)
                })
            } else {
                this.$nextTick(() => {
                    this.$refs.dailyMAddD.init(n, row)
                })
            }
        },
        deleteHandle() {

        },
        submitForm() {

        }
    },
}
</script>
<style lang="scss">
.maintenance {
@@ -200,9 +201,11 @@
            border: 1px solid #435F9E;
        }
    }

    .el-button--mini {
        background: transparent;
    }

    .el-button--primary {
        background-color: transparent;
    }
@@ -219,6 +222,7 @@

    .nav {
        padding: 10px 30px;
        font-size: 14px;
    }

    .item {

 src/container/workshop/device.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,186 @@
<!--
 * @Date: 2024-01-13 20:46:33
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 21:37:22
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/device.vue
-->
<template>
    <div class="device-item">
        <el-checkbox class="care" v-model="care" @change="change"></el-checkbox>
        <p>YKX123123213</p>
        <div class="device-item-box">
            <div class="img">
                <span class="img-status" v-if="item.status === 'STOP'">停机</span>
                <span class="img-status run" v-if="item.status === 'RUN'">运行</span>
                <span class="img-status standby" v-if="item.status === 'IDLE'">待机</span>
                <span class="img-status alerm" v-if="item.status === 'ALARM'">报警</span>
                <img src="./img/machine.png" alt="">
            </div>
            <ul>
                <li>
                    <img src="./img/sd.png" alt="">
                    <div>
                        <p>{{ item.cycleCount }}</p>
                        <p>能力利用率</p>
                    </div>
                </li>
                <li>
                    <img src="./img/sd.png" alt="">
                    <div>
                        <p>{{ item.cycleCount }}</p>
                        <p>日利用率</p>
                    </div>
                </li>
                <li>
                    <img src="./img/sd.png" alt="">
                    <div>
                        <p>{{ item.cycleCount }}</p>
                        <p>完工件数</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { getRequest,getUrl } from '@/api/Api'
export default {
    props: ['item'],
    data () {
        return {
            care: false,
        }
    },
    methods: {
        change (val) {
            console.log(val)
            getRequest('machineConcern',{concern: val ? 1 : 0,id: this.item.id}).then(res => {
                console.log(res)
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.device-item {
    width: 394px;
    height: 321px;
    border-radius: 10px;
    border: 1px solid #3C4249;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    .care {
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 999;
    }
    &>p {
        color: #E9FFFF;
        text-shadow: 0px 1px 11px #549BD4;
        background: linear-gradient(180deg, #9AFEFE 0%, #4B78CD 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        position: relative;
    }
    &>p:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 1px;
        background: linear-gradient(270deg, #65A5D6 0%, rgba(11,70,115,0) 100%);
    }
    &>p:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 1px;
        background: linear-gradient(90deg, #65A5D6 0%, rgba(11,70,115,0) 100%);
    }
    &>div.device-item-box {
        flex: 1 1 auto;
        margin-top: 20px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        overflow: hidden;

        .img {
            width: 50%;
            height: 100%;
            border: 1px solid #444C55;
            border-radius: 10px;
            position: relative;
            .img-status {
                position: absolute;
                font-size: 12px;
                right: 10px;
                top: 10px;
                background: rgba(216,216,216,0.09);
                border-radius: 11px;
                // border: 1px solid #FFFFFF;
                padding: 5px 10px;
            }
            .img-status.standby {
                background: linear-gradient(130deg, #FF3333 0%, #F2BF24 100%);
            }
            .img-status.run {
                background: linear-gradient(130deg, #EAF224 0%, #3DF297 100%);
            }
            .img-status.alerm {
                background: #FF3333;
                color: #fff;
            }
            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
            }
        }

        ul {
            flex: 1 1 auto;
            height: 100%;
            margin-left: 20px;
            list-style: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            li {
                width: 100%;
                display: flex;
                font-size: 12px;
                align-items: center;

                &>div {
                    margin-left: 20px;
                    ;
                }

                p {
                    color: #E9FFFF;
                    text-shadow: 0px 1px 11px #549BD4;
                }

                img {
                    width: 40px;
                    height: 40px;
                }
            }
        }
    }
}</style>

 src/container/workshop/img/+.png

 src/container/workshop/img/1.png

 src/container/workshop/img/2.png

 src/container/workshop/img/3.png

 src/container/workshop/img/4.png

 src/container/workshop/img/5.png

 src/container/workshop/img/btn.png

 src/container/workshop/img/left_1.png

 src/container/workshop/img/left_2.png

 src/container/workshop/img/left_3.png

 src/container/workshop/img/left_4.png

 src/container/workshop/img/left_5.png

 src/container/workshop/img/left_icon.png

 src/container/workshop/img/machine.png

 src/container/workshop/img/sd.png

 src/container/workshop/index.vue

@@ -1,11 +1,152 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-06 17:49:41
 * @LastEditTime: 2024-01-13 22:21:35
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/index.vue
-->
<template>
    <div style="color: red">
        è½¦é—´åˆ—表
    <div class="workshop">
        <div class="nav">车间列表 / {{ this.$route.query.name }}</div>
        <div class="workshop-box">
            <LeftStatus :info="info" />
            <div class="right">
                <Status class="right-status" :info="info" style="justify-content: flex-start;">
                    <template slot="before">
                        <div style="margin-right: 200px;">
                            <el-button type="primary" size="mini" :class="concernFlag === 0 ? 'active' : ''"
                                @click="query(0)">全部</el-button>
                            <el-button type="primary" size="mini" :class="concernFlag === 1 ? 'active' : ''"
                                @click="query(1)">关注</el-button>
                            <!-- <el-button type="primary" size="mini" style="margin-right: auto;">我的关注</el-button> -->
                        </div>
                    </template>
                    <template slot="after">
                        <div style="margin-left: auto;margin-right: 20px;">
                            <el-input v-model="searchWord" placeholder="请输入关键词"></el-input>
                        </div>
                    </template>
                </Status>
                <div class="list-box">
                    <div class="list">
                        <Item v-for="item in list" :item="item" :key="item.id"></Item>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
</template>
<script>
import LeftStatus from '../Map/LeftStatus.vue';
import Status from '@/components/newComp/Status';
import { getRequest, getUrl } from '@/api/Api'
import Item from './device.vue'
export default {
    components: {
        LeftStatus,
        Status,
        Item
    },
    data() {
        return {
            concernFlag: 0,
            searchWord: '',
            list: [],
            info: {
                runRate: '',
                cutRate: '',
                alarmRate: '',
                threeShiftRate: '',
                twoShiftRate: '',
                run: '',
                alarm: '',
                stop: '',
                idle: '',
            }
        }
    },
    watch: {
        '$route.params.id'() {
            this.query()
        }
    },
    mounted() {
        this.query()
    },
    methods: {
        query(flag) {
            if (flag !== undefined) {
                this.concernFlag = flag
            }
            getRequest('machineList', {
                plantId: this.$route.params.id,
                concernFlag: this.concernFlag,
            }).then(res => {
                console.log(res)
                this.list = res.data.list
                this.info = {
                    runRate: res.data.runRate,
                    cutRate: res.data.cutRate,
                    alarmRate: res.data.alarmRate,
                    threeShiftRate: res.data.threeShiftRate,
                    twoShiftRate: res.data.twoShiftRate,
                    run: res.data.run,
                    alarm: res.data.alarm,
                    stop: res.data.stop,
                    idle: res.data.idle
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.workshop {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #FFF;
    display: flex;
    flex-direction: column;

    .nav {
        padding: 10px 30px;
        font-size: 14px;
    }

    .workshop-box {
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
        display: flex;

        .right {
            width: 100%;
            height: 100%;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            .right-status {
                margin-bottom: 20px;
            }
            .list-box {
                width: 100%;
                height: 100%;
                overflow: auto;
                flex: 1 1 auto;
                // border: 1px solid red;
                padding: 20px;
                .list {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    &>div {
                        margin: 10px;
                    }
                }
                
            }
        }

    }
}</style>

 src/router/index.js

@@ -46,7 +46,7 @@
      },

      // è®¾å¤‡ç»´æŠ¤

      {

        path: 'maintenance/:id',

        path: 'maintenance/:style',

        name: 'maintenance',

        component: () => import('@/container/maintenance/index')

      },


 src/styles/index.scss

@@ -100,3 +100,12 @@
// .el-popper[x-placement^=bottom] {

//   margin-top: 50px;

// }

.el-button--mini {

  background: transparent;

}

.el-button--primary {

  background-color: transparent;

}

.el-button--primary.active {

  background-color: #5DD1FC;

}