|
@@ -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>
|