Browse Source

项目版 中心版 首页修改

fujunwen 4 năm trước cách đây
mục cha
commit
6726514b51
2 tập tin đã thay đổi với 377 bổ sung273 xóa
  1. 258 206
      src/views/homepage/index.vue
  2. 119 67
      src/views/statistics/index.vue

+ 258 - 206
src/views/homepage/index.vue

@@ -1,62 +1,74 @@
 <template>
     <main class='homepage'>
         <section class='homepage-cards-content'>
-            <div class='cards-item' v-for='(item , index) in cardsList' :key='index' :style='itemStyle(item)'>
-                <h4>{{item.smsxtname}}</h4>
-                <div class='equipment-list' v-if='item.assetTypeList'>
-                    <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.assetTypeList' :key="index">
-                        <div class='equip-name' >
-                            <h5>{{equip.category_name}}</h5>
-                            <div class='exception-number' v-if="equip.is_exception_num">{{equip.is_exception_num}}</div>
+ 
+            <div  v-for='(arr , index) in cardsList' :key='index' class="items-container">
+                <section v-for="(item ,index) in arr" :key="index" class='cards-item' :style='itemStyle(item)' >
+                    <section class="card-item-title">
+                        <img :src="imgSrc(item.smsxt)" />
+                        <h4>{{item.smsxtname}}</h4>
+                    </section>
+                    <section class='equipment-list-container'>
+                         <div class="more" @click.stop.capture="expandRestItems(item, index)" v-if="item.hasArrow" :style="{transform: item.expand ? 'rotate(0)' : 'rotate(180deg)'}">
+                            <img v-if="item.showColor" src="../../assets/images/icons/arrow.png">
+                            <img v-else src="../../assets/images/icons/grey.png">
                         </div>
-                        <section  >
-                            <div class='equip-statis'>
-                                <span class='equip-number'>{{equip.asset_num}}</span>
-                                <span class='equip-unit'>台</span>
+                        <div class='equipment-list' v-if='item.assetTypeList'>
+                            <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.assetTypeList' :key="index">
+                                <div class='equip-name' >
+                                    <h5>{{equip.category_name}}</h5>
+                                    <div class='exception-number' v-if="equip.is_exception_num">{{equip.is_exception_num}}</div>
+                                </div>
+                                <section  >
+                                    <div class='equip-statis'>
+                                        <span class='equip-number'>{{equip.asset_num}}</span>
+                                        <span class='equip-unit'>台</span>
+                                    </div>
+                                    <div>
+                                        <em v-if='false'>维保中</em>
+                                    </div>
+                                </section>
                             </div>
-                            <div>
-                                <em v-if='false'>维保中</em>
+                        </div>
+                        <div class='equipment-list' v-if='item.restAssetTypeList.length && item.expand'>
+                            <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.restAssetTypeList' :key="index">
+                                <div class='equip-name' >
+                                    <h5>{{equip.category_name}}</h5>
+                                    <div class='exception-number' v-if="equip.is_exception_num">{{equip.is_exception_num}}</div>
+                                </div>
+                                <section  >
+                                    <div class='equip-statis'>
+                                        <span class='equip-number'>{{equip.asset_num}}</span>
+                                        <span class='equip-unit'>台</span>
+                                    </div>
+                                    <div>
+                                        <em v-if='false'>维保中</em>
+                                    </div>
+                                </section>
+                            </div>
+                        </div>
+                    </section>
+                    <!-- <div v-else class="empty-content"   style="border-top:none; height:8rem;line-height:8rem;">暂无数据</div> -->
+                    <div v-if="item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length" class="alert-list" @click="navToGanttPage(item)">
+                        <div class="alert-item"  v-for="(option , index) in  item.rptGlsmsStatisticsList" :key="index" >
+                            <img v-if="option.total"  :src="srcList[option.type][option.level]" > 
+                            <div  class="content" v-if="option.total">
+                                <p class="line">
+                                    <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' :  '第三方检测' }}</span>
+                                    <span>
+                                        <em :style="{color:item.level == 1? '#646C73':'#C13830'}">{{option.unfinished}}</em>/<em>{{option.month_unfinished}}</em>/<em>{{option.total}}</em></span>
+                                </p>
+                                <p class='desc'>
+                                    {{option.type ===1 ? '即将逾期/当月未完成/总任务' :  '即将逾期/今年未完成/总任务' }}
+                                </p>
                             </div>
-                        </section>
-                    </div>
-                </div>
-                <div v-else class="empty-content"   style="border-top:none; height:8rem;line-height:8rem;">暂无数据</div>
-                <div v-if="item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length" class="alert-list" @click="navToGanttPage(item)">
-                    <div class="alert-item"  v-for="(option , index) in  item.rptGlsmsStatisticsList" :key="index" >
-                        <img v-if="option.total"  :src="srcList[option.type][option.level]" > 
-                        <div  class="content" v-if="option.total">
-                            <p class="line">
-                                <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' :  '第三方检测' }}</span>
-                                <span><em :style="{color:item.level == 1? '#646C73':'#C13830'}">{{option.unfinished}}</em>/<em>{{option.total}}</em></span>
-                            </p>
-                            <p class='desc'>当月未完成/总任务</p>
                         </div>
                     </div>
-                </div>
-                <div v-else class='empty-content'>暂无数据</div>
+                    <div v-else class='empty-content'>暂无数据</div>
+                </section>
             </div>
         </section>
         <section class='homepage-nav-list'>
-            <!-- <nav>
-                <div class='main-title'>
-                    <span>重点关注事项</span>
-                    <a @click='navToFocusItem'>更多</a>
-                </div>
-                <div class='table'>
-                    <div class='row table-header'>
-                        <article>日期</article>
-                        <article>政府部门</article>
-                        <article>记录事项</article>
-                    </div>
-                    <div class='table-body'>
-                        <div class='row' v-for='(item , index) in itemsList' :key='index'>
-                            <article>{{item.createdate}}</article>
-                            <article>{{item.department}}</article>
-                            <article>{{item.recordsx}}</article>
-                        </div>
-                    </div>
-                </div>
-            </nav> -->
             <nav>
                 <div class='main-title'>
                     <span>说明书更新记录</span>
@@ -75,7 +87,6 @@
                             <article>{{item.content || '--'}}</article>
                         </div>
                     </div>
-                    <div class="check-more">如需查看更多更新记录请点击<span @click='navToIntroduce'>更多</span></div>
                 </div>
             </nav>
         </section>
@@ -88,7 +99,10 @@ import moment from 'moment'
 export default {
     data() {
         return {
-            cardsList: [],
+            cardsList: [
+                [],
+                []
+            ],
             itemsList: [],
             changeList: [],
             plazaId:'',
@@ -123,6 +137,20 @@ export default {
         this.getInstructionList()
     },
     methods: {
+        imgSrc(code) {
+            return require('../../assets/images/icons/' + code + '.png')
+        },
+        expandRestItems (item, index) {
+            this.cardsList.forEach(each => {
+                each.forEach(eq=>{
+                    if (eq.smsxt !== item.smsxt) {
+                        eq.expand = false
+                    }
+                    eq.selected = false
+                })
+            })
+            item.expand = !item.expand
+        },
           /**
          *  点击跳转进入综合事项管理页面
          */
@@ -178,20 +206,28 @@ export default {
                 if (res.result == 'success') {
                     let result = res.data
                     if (result && Array.isArray(result)) {
-                        result.forEach(item => {
+                        result.forEach((item, index) => {
+                            item.expand = false
                             if (item.assetTypeList) {
                                 let list = item.assetTypeList
                                 let len = list.length
-                                for (let i=0; i< len; i++) {
-                                    if (list[i] && !list[i].asset_num) {
-                                        list.splice(i, 1)
-                                        i--
-                                    }
+                                if (len > 3) {
+                                    item.hasArrow = true
+                                    item.assetTypeList = list.splice(0, 3)
+                                    item.restAssetTypeList = list
+                                    item.showColor = list.some(item => {return item.is_exception_num > 0})
+                                }else {
+                                    item.hasArrow = false
+                                    item.restAssetTypeList = []
                                 }
                             }
+                            if (index % 2 === 0) {
+                                this.cardsList[0].push(item)
+                            } else {
+                                this.cardsList[1].push(item)
+                            }
                         })
-                        
-                        this.cardsList = result
+                        console.log(this.cardsList)
                     }
                 }
             })
@@ -204,7 +240,7 @@ export default {
                 getParams: {
                     plazaId: this.plazaId,
                     page: 1,
-                    size: 13
+                    size: 10
                 }
             }
 
@@ -272,152 +308,187 @@ export default {
     overflow: auto;
     .homepage-cards-content {
         display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-content: flex-start;
-        width: 75%;
-        .cards-item {
-            width: calc(50% - 5px);
-            height: 24%;
-            padding: 0.4rem;
-            padding-bottom: 0;
-            margin-bottom: 1rem;
-            background: #fff;
-            box-shadow: 0 2px 10px 0 rgba(31, 36, 41, 0.06);
-            h4 {
-                color: rgba(31, 36, 41, 1);
-                padding: 1rem;
-                font-size: 1.6rem;
-                font-weight: bold;
-            }
-            .equipment-list {
-                display: flex;
-                padding:0 1rem 1.2rem;
-                .equipment-item {
-                    width: 33.33%;
-                    padding: 0.6rem;
-                    box-sizing: border-box;
-                    border-radius: 4px;
-                    cursor: pointer;
-                    .equip-name {
-                        position: relative;
-                        display: inline-block;
-                        h5 {
-                            position: relative;
-                            color: #1f2429;
-                            font-size: 1.4rem;
-                            em {
-                                margin-left: 1rem;
-                                color: #e19e51;
-                                font-size: 1.2rem;
+        width: 100%;
+        overflow: auto;
+        .items-container{
+            width: 50%;
+            .cards-item {
+                width: calc(100% - 5px);
+                height: auto;
+                padding: 0.4rem;
+                padding-bottom: 0;
+                margin-bottom: 1rem;
+                transition: 0.5s;
+                background: #fff;
+                border-radius: 4px;
+                box-shadow: 0 2px 10px 0 rgba(31, 36, 41, 0.06);
+                .card-item-title{
+                    display: flex;
+                    align-items: center;
+                    padding-left: 12px;
+                    h4 {
+                        color: rgba(31, 36, 41, 1);
+                        padding: 1rem;
+                        font-size: 1.6rem;
+                        font-weight: bold;
+                    }
+                    img{
+                        width: 24px;
+                        height: 24px;
+                        filter: saturate(0);
+                    }
+                }
+                .equipment-list-container{
+                    position: relative;
+                    .equipment-list {
+                        display: flex;
+                        flex-wrap: wrap;
+                        padding:0 1rem 1.2rem;
+                        .equipment-item {
+                            width: 33.33%;
+                            padding: 0.6rem;
+                            box-sizing: border-box;
+                            border-radius: 4px;
+                            cursor: pointer;
+                            .equip-name {
+                                position: relative;
+                                display: inline-block;
+                                h5 {
+                                    position: relative;
+                                    color: #1f2429;
+                                    font-size: 1.4rem;
+                                    em {
+                                        margin-left: 1rem;
+                                        color: #e19e51;
+                                        font-size: 1.2rem;
+                                    }
+                                }
+                                .exception-number {
+                                    position: absolute;
+                                    right: -20%;
+                                    top: -5px;
+                                    height: 1.6rem;
+                                    border-radius: 8rem;
+                                    padding: 0.2rem 0.4rem;
+                                    line-height: 1.2rem;
+                                    text-align: center;
+                                    font-size: 1.2rem;
+                                    color: #f54e45;
+                                    background: #ffe0df;
+                                }
+                            }
+                            section {
+                                display: flex;
+                                justify-content: flex-start;
+                                align-items: center;
+                                .equip-statis {
+                                    .equip-number {
+                                        font-size: 1.8rem;
+                                        font-weight: bold;
+                                        color: rgba(31, 36, 41, 1);
+                                    }
+                                    .equip-unit {
+                                        color: #ccc;
+                                        font-size: 1.2rem;
+                                    }
+                                }
                             }
                         }
-                        .exception-number {
-                            position: absolute;
-                            right: -20%;
-                            top: -5px;
-                            height: 1.6rem;
-                            border-radius: 8rem;
-                            padding: 0.2rem 0.4rem;
-                            line-height: 1.2rem;
-                            text-align: center;
-                            font-size: 1.2rem;
-                            color: #f54e45;
-                            background: #ffe0df;
+                        .equipment-item:hover {
+                            background: #f5f6f7;
                         }
                     }
-                    section {
+                    .more{
+                        position: absolute;
                         display: flex;
-                        justify-content: flex-start;
+                        justify-content: center;
                         align-items: center;
-                        .equip-statis {
-                            .equip-number {
-                                font-size: 1.8rem;
-                                font-weight: bold;
-                                color: rgba(31, 36, 41, 1);
-                            }
-                            .equip-unit {
-                                color: #ccc;
-                                font-size: 1.2rem;
-                            }
+                        width: 14px;
+                        height: 14px;
+                        right: 8px; 
+                        top: 40%;
+                        border-radius: 7px;
+                        cursor: pointer;
+                        transform: rotate(0);
+                        transform-origin: center;
+                        z-index: 10000;
+                        img{
+                            width:14px;
+                            height: 14px;
                         }
                     }
                 }
-                .equipment-item:hover {
-                    background: #f5f6f7;
-                }
-            }
-            .alert-list {
-                display: flex;
-                align-items: center;
-                justify-content: flex-start;
-                border-top: 1px solid #f5f6f7;
-                height: 44%;
-                border-radius: 4px;
-                cursor: pointer;
-                &:hover {
-                    background: #f5f6f7;
-                }
-                .alert-item {
+                .alert-list {
                     display: flex;
-                    width: 33.33%;
                     align-items: center;
-                    img {
-                        width: 4rem;
-                        height: 4rem;
-                        margin:0 1rem;
+                    justify-content: flex-start;
+                    border-top: 1px solid #f5f6f7;
+                    padding: 2rem 0;
+                    height: auto;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    &:hover {
+                        background: #f5f6f7;
                     }
-                    .content {
-                        border-right: 1px solid #f5f6f7;
-                        padding-right: 2rem;
-                        .line {
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                            line-height: 1;
-                            span:first-child {
-                                margin-right: 1rem;
+                    .alert-item {
+                        display: flex;
+                        width: 33.33%;
+                        align-items: center;
+                        img {
+                            width: 4rem;
+                            height: 4rem;
+                            margin:0 1rem;
+                        }
+                        .content {
+                            padding-right: 2rem;
+                            .line {
+                                display: flex;
+                                justify-content: space-between;
+                                align-items: center;
+                                line-height: 1;
+                                span:first-child {
+                                    margin-right: 1rem;
+                                    font-size: 1.2rem;
+                                    color: #1f2429;
+                                    font-weight: bold;
+                                    white-space: nowrap;
+                                }
+                                em {
+                                    font-weight: normal;
+                                }
+                                em:first-child {
+                                    font-size: 1.6rem;
+                                    font-weight: bold;
+                                }
+                            }
+                            .desc {
+                                padding-top: 0.6rem;
+                                color: #8d9399;
                                 font-size: 1.2rem;
-                                color: #1f2429;
-                                font-weight: bold;
+                                text-align: right;
                                 white-space: nowrap;
                             }
-                            em {
-                                font-weight: normal;
-                            }
-                            em:first-child {
-                                font-size: 1.6rem;
-                                font-weight: bold;
-                            }
-                        }
-                        .desc {
-                            padding-top: 0.6rem;
-                            color: #8d9399;
-                            font-size: 1.2rem;
-                            text-align: right;
-                            white-space: nowrap;
                         }
                     }
                 }
-            }
-            .empty-content {
-                height: 9rem;
-                line-height: 9rem;
-                border-top: 1px solid #f5f6f7;
-
-                text-align: center;
-                color: #8d9399;
+                .empty-content {
+                    height: 8rem;
+                    line-height: 8rem;
+                    border-top: 1px solid #f5f6f7;
+                    text-align: center;
+                    color: #8d9399;
+                }
             }
         }
     }
     .homepage-nav-list {
         width: calc(25% - 10px);
-        // nav:first-child {
-        //     height: 320px;
-        // }
-        // nav:last-child {
-        //     height: 320px;
-        // }
+        nav:first-child {
+            height: 320px;
+        }
+        nav:last-child {
+            height: 320px;
+        }
         nav {
             padding: 14px 16px;
             margin-bottom: 10px;
@@ -435,7 +506,6 @@ export default {
                 }
             }
             .table {
-                height: calc(100% - 33px);
                 .row {
                     display: flex;
                     align-items: center;
@@ -474,36 +544,18 @@ export default {
                     background: #f8f9fa;
                 }
                 .table-body {
-                    max-height: calc(100% - 66px);
                     overflow: auto;
-                    color: #1F2429;
-                }
-                .check-more{
-                    margin-top: 15px;
-                    color: #1F2429;
-                    font-size: 14px;
-                    line-height: 22px;
-                    >span{
-                        margin-left: 5px;
-                        color: #0091ff;
-                        cursor: pointer;
-                    }
                 }
             }
         }
-        // nav:first-child {
-        //     height: 40%;
-        //     .table-body {
-        //         height: 27vh;
-        //     }
-        // }
-        nav:last-child {
-            // height: calc(60% - 12px);
-            height: 100%;
+        nav:first-child {
+            height: 96%;
             .table-body {
-                // height: 45vh;
+                height: 75vh;
+                overflow-y: auto;
             }
         }
+       
     }
 }
 </style>

+ 119 - 67
src/views/statistics/index.vue

@@ -55,23 +55,33 @@
                             :key='index'
                         >
                             <div class='system-name'>
-                                <div :class='["img", item.selected ? "selected":""]'>
-                                    <img :src='imgSrc(item.smsxt)' />
-                                </div>
+                                <div :class='["img", item.selected ? "selected":""]'><img :src='imgSrc(item.smsxt)' /></div>
                                 <span>{{item.smsxtname}}</span>
                             </div>
-                            <div class='system-equipments' v-if='item.assetTypeList'>
-                                <div class='number' v-for='(equip , index) in item.assetTypeList' :key='index'>
-                                    <div class="title">
-                                        <P :title="equip.category_name">{{equip.category_name}}</p>
-                                        <span :style="{right: equip.is_exception_num > 99 ? '-2rem' :  equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
+                            <section v-if='item.assetTypeList.length' class="system-equipments-container">
+                                <div class="more" @click.stop.capture="expandRestItems(item, index)" v-if="item.hasArrow" :style="{transform: item.expand ? 'rotate(0)' : 'rotate(180deg)'}">
+                                    <img v-if="item.showColor" src="../../assets/images/icons/arrow.png">
+                                    <img v-else src="../../assets/images/icons/grey.png">
+                                </div>
+                                <div class='system-equipments'  style="padding-top:2rem; margin-bottom:2rem;">
+                                    <div class='number' v-for='(equip , index) in item.assetTypeList' :key='index'>
+                                        <div class="title">
+                                            <P :title="equip.category_name">{{equip.category_name}}</p>
+                                            <span :style="{right: equip.is_exception_num > 99 ? '-2rem' :  equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
+                                        </div>
+                                        <p> <span>{{equip.asset_num}}</span><span>台</span></p>
                                     </div>
-                                    <p>
-                                        <span>{{equip.asset_num}}</span>
-                                        <span>台</span>
-                                    </p>
                                 </div>
-                            </div>
+                                <section class="system-equipments" v-show="item.expand && item.restAssetTypeList.length" style="padding-bottom:2rem;">
+                                    <div class='number' v-for='(equip , index) in item.restAssetTypeList' :key='index'>
+                                        <div class="title">
+                                            <P :title="equip.category_name">{{equip.category_name}}</p>
+                                            <span :style="{right: equip.is_exception_num > 99 ? '-2rem' :  equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
+                                        </div>
+                                        <p> <span>{{equip.asset_num}}</span><span>台</span></p>
+                                    </div>
+                                </section>
+                            </section>
                             <div v-else style='width:65%;text-align:center;'>暂无数据</div>
                         </li>
                     </ul>
@@ -90,15 +100,11 @@
                         <div class='img'>
                             <img src='../../assets/images/icons/audit.png' />
                         </div>
-                        <p>当月说明书更新广场数量</p>
-                        <strong>{{plazaInfoCount.rptChangeCount}}</strong>
-                    </div>
-                    <div class='card' @click='navToFocusItems'>
-                        <div class='img'>
-                            <img src='../../assets/images/icons/contract.png' />
+                        <p>当月说明书更新项目数量</p>
+                        <div class="describe">
+                            <span style="margin-right:20px;">更新广场数量 <strong>{{plazaInfoCount.rptChangeCount}}</strong></span>
+                            <span>更新事项数量 <strong>{{plazaInfoCount.zhsxChangeCount}}</strong></span>
                         </div>
-                        <p>当前说明书更新事项数量</p>
-                        <strong>{{plazaInfoCount.zhsxChangeCount}}</strong>
                     </div>
                 </section>
                 <section class='map-container' id="map-container">
@@ -270,6 +276,16 @@ export default {
         window.addEventListener('resize', this.reinitalMap, false)
     },
     methods: {  
+        expandRestItems (item, index) {
+            this.systemList.forEach(eq => {
+                if (eq.smsxt !== item.smsxt) {
+                    eq.expand = false
+                }
+                eq.selected = false
+            })
+            item.selected = true
+            item.expand = !item.expand
+        },
         showToolTip (index) {
             this.maintainList.forEach(item => {item.showToolTip = false})
             this.maintainList[index].showToolTip = true
@@ -609,16 +625,27 @@ export default {
                         let result = res.data
                         if (result && Array.isArray(result)) {
                             result.forEach(item => {
-                                if (item.assetTypeList) {
-                                    item.assetTypeList = item.assetTypeList.splice(0, 3)
+                                let list = item.assetTypeList
+                                if (list) {
+                                    if (list.length > 3) {
+                                        item.hasArrow = true
+                                        item.assetTypeList = list.splice(0, 3)
+                                        item.restAssetTypeList = list
+                                        item.showColor = list.some(item => {return item.is_exception_num > 0})
+                                    }else {
+                                        item.hasArrow = false
+                                        item.restAssetTypeList = []
+                                    }
                                 }
                             })
                             res.data.forEach(item => {
                                 item.selected = false
+                                item.expand = false
                             })
                             res.data[0].selected = true
                             this.currentSelectedSys = res.data[0]
                             this.currentSysId = res.data[0].smsxt
+                         
                             this.systemList = res.data
                             resolve(res)
                         }
@@ -927,6 +954,7 @@ export default {
                                             num += item.is_exception_num
                                         }
                                     })
+                                   
                                 }
                                 layerArr.push({
                                     name,
@@ -947,6 +975,7 @@ export default {
                 this.loadingInstance.close()
                 if (this.currentLevel === 3) {
                     layerArr.forEach(item => {
+             
                         let center = [item.data.latitude, item.data.longitude]
                         let contentHtml = that.createPopupHtmlContent(item.list.assetTypeList, item.fullName)
                         if (contentHtml) {
@@ -1028,6 +1057,7 @@ export default {
          *@Description 生成弹出框HTML
          */
         createPopupHtmlContent(data, name) {
+            console.log(data)
             if (Array.isArray(data) && data.length) {
                 let that = this
                 let html = ''
@@ -1179,7 +1209,6 @@ export default {
                     display: inline-block;
                     width: 18px;
                     height: 18px;
-                    background: red;
                     border-radius: 90px;
                     font-size: 1.2rem;
                     text-align: center;
@@ -1240,7 +1269,7 @@ export default {
             font-size: 1.6rem;
             font-weight: bolder;
             line-height: 2rem;
-            cursor: pointer;
+            cursor: pointer; 
             img{
                 width: 2rem;
                 margin-left: 1.2rem;
@@ -1255,16 +1284,15 @@ export default {
                 padding: 2rem 0 2.4rem 1.6rem;
             }
             .system-list {
+                height: 80vh;
+                overflow-y:auto;
                 ul {
-                    height: 80vh;
                     li.system-item {
                         display: flex;
                         justify-content: flex-start;
                         align-items: center;
                         width: calc(100% - 3.2rem);
-                        height: calc(100% / 8);
                         margin-left: 1.6rem;
-                        // padding: 1rem 0;
                         box-sizing: border-box;
                         border: 1px solid white;
                         border-radius: 4px;
@@ -1302,47 +1330,70 @@ export default {
                                 font-weight: bolder;
                             }
                         }
-                        .system-equipments {
-                            width: 75%;
-                            display: flex;
-                            align-items: center;
-                            padding-left: 1.4rem;
-                            .number {
-                                width: 33.3%;
-                                .title{
-                                    display: inline-block;
-                                    position: relative;
-                                    p{
+                        .system-equipments-container{
+                            position: relative;
+                            width:75%;
+                            .more{
+                                position: absolute;
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+                                width: 14px;
+                                height: 14px;
+                                right: 8px; 
+                                top: 50%;
+                                border-radius: 7px;
+                                cursor: pointer;
+                                transform: rotate(0);
+                                transform-origin: center;
+                                z-index: 10000;
+                                transform: translateY(-7px);
+                                img{
+                                    width:14px;
+                                    height: 14px;
+                                }
+                            }
+                            .system-equipments {
+                                display: flex;
+                                align-items: center;
+                                padding-left: 1.4rem;
+                                .number {
+                                    width: 33.3%;
+                                    .title{
                                         display: inline-block;
                                         position: relative;
-                                        width: 12rem;
-                                        color: #1f2429;
-                                        font-size: 1.4rem;
-                                        line-height: 2rem;
-                                        white-space: nowrap;
-                                        text-overflow: ellipsis;
-                                        overflow: hidden;
-                                    }
-                                    span {
-                                        position: absolute;
-                                        top: -1.6rem;
-                                        right: -2rem;
-                                        padding: 2px 4px;
-                                        border-radius: 0.9rem;
-                                        font-size: 1.2rem;
-                                        color: #f54e45;
-                                        background: #fde3e2;
+                                        p{
+                                            display: inline-block;
+                                            position: relative;
+                                            width: 12rem;
+                                            color: #1f2429;
+                                            font-size: 1.4rem;
+                                            line-height: 2rem;
+                                            white-space: nowrap;
+                                            text-overflow: ellipsis;
+                                            overflow: hidden;
+                                        }
+                                        span {
+                                            position: absolute;
+                                            top: -1.6rem;
+                                            right: -2rem;
+                                            padding: 2px 4px;
+                                            border-radius: 0.9rem;
+                                            font-size: 1.2rem;
+                                            color: #f54e45;
+                                            background: #fde3e2;
+                                        }
                                     }
-                                }
-                                p:nth-of-type(2) {
-                                    span:first-child {
-                                        color: #1f2429;
-                                        font-size: 1.8rem;
-                                        font-weight: bold;
+                                    p:nth-of-type(2) {
+                                        span:first-child {
+                                            color: #1f2429;
+                                            font-size: 1.8rem;
+                                            font-weight: bold;
+                                        }
                                     }
                                 }
+                                
                             }
-                             
                         }
                     }
                     li.selected {
@@ -1366,7 +1417,7 @@ export default {
                 display: flex;
                 justify-content: space-between;
                 .card {
-                    width: calc((100% - 24px) / 3);
+                    width: 50%;
                     box-sizing: border-box;
                     padding: 12px 16px;
                     border-radius: 4px;
@@ -1384,15 +1435,16 @@ export default {
                         }
                     }
                 }
+                div:first-child.card{
+                    margin-right: 12px;
+                }
+               
                 div:nth-of-type(1) .img {
                     background: rgba(130, 199, 252, 0.14);
                 }
                 div:nth-of-type(2) .img {
                     background: rgba(0, 214, 185, 0.14);
                 }
-                div:nth-of-type(3) .img {
-                    background: rgba(255, 186, 107, 0.14);
-                }
                 p {
                     color: #646c73;
                     margin: 12px 0 8px 0;