123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688 |
- <template>
- <main class='homepage'>
- <section class='homepage-cards-content'>
- <div v-for='(arr , index) in cardsList' :key='index' class="items-container">
- <section v-for="(item ,index) in arr" :key="index" class='cards-item' >
- <section class="card-item-title">
- <div>
- <img class="title-img" :src="imgSrc(item.smsxt)" />
- <h4>{{item.smsxtname}}</h4>
- </div>
- <img class="warning-img" :style='itemStyle(item)' src="../../assets/images/icons/warning.png" />
- </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>
- <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'>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span>
- </div>
- <!-- <div>
- <em v-if='false'>维保中</em>
- </div> -->
- </section>
- </div>
- </div>
- <div class='equipment-list' v-if='item.restAssetTypeList.length && item.expand' style="padding-top:0;">
- <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'>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</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 class="alert-list-container" v-if="item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length" >
- <div class="alert-list" @click="navToGanttPage(item)">
- <div class="alert-item" v-for="(option , index) in item.rptGlsmsStatisticsList" :key="index" >
- <div class="content" v-if="option.total">
- <div class="number">
- <div class="left">
- <img :src="srcList[option.type][option.level]" >
- <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' : '第三方检测' }}</span>
- </div>
- <p class="line">
- <span>
- <em :style="{color:item.level == 1? '#646C73':'#C13830'}">{{option.due_num}}</em>/<em>{{option.unfinished}}</em>/<em >{{option.total}}</em>
- </span>
- </p>
- </div>
- <p class='desc'>
- {{option.type ===1 ? '即将逾期/未完成/当月总任务' : '即将逾期/未完成/本年总任务' }}
- </p>
- </div>
- </div>
- </div>
- </div>
- <div v-else class='empty-content'>暂无数据</div>
- </section>
- </div>
- </section>
- <section class='homepage-nav-list'>
- <div class='main-title'>
- <span>说明书更新记录</span>
- <a class="more-records" @click='navToIntroduce'>更多</a>
- </div>
- <nav>
- <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 changeList' :key='index'>
- <article>{{item.changedate}}</article>
- <article>{{item.type}}</article>
- <article :title="item.content">{{item.content || '--'}}</article>
- </div>
- </div>
- </div>
- </nav>
- </section>
- </main>
- </template>
- <script>
- import { getCardList, getQueryList, getChangeList } from '@/api/homePage'
- import {sortBy} from 'lodash'
- import moment from 'moment'
- export default {
- data() {
- return {
- cardsList: [
- [],
- []
- ],
- itemsList: [],
- changeList: [],
- plazaId:'',
- srcList: {
- 0: {
- 1: require('../../assets/images/icons/edit_blue_b.png'), //1.正常(蓝色) 2.警告(黄色) 3.严重(红色)
- 2: require('../../assets/images/icons/edit_yellow_b.png'),
- 3: require('../../assets/images/icons/edit_red_b.png')
- },
- 1: {
- 1: require('../../assets/images/icons/fix_blue_b.png'),
- 2: require('../../assets/images/icons/fix_yellow_b.png'),
- 3: require('../../assets/images/icons/fix_red_b.png')
- },
- 2: {
- 1: require('../../assets/images/icons/search_blue_b.png'),
- 2: require('../../assets/images/icons/search_yellow_b.png'),
- 3: require('../../assets/images/icons/search_red_b.png')
- }
- },
-
- }
- },
- created () {
- let plazaId = localStorage.getItem('PLAZAID')
- if (plazaId) {
- this.plazaId = plazaId
- }
- },
- mounted() {
- this.testAjax()
- this.getItemsQuery()
- 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
- },
- /**
- * 点击跳转进入综合事项管理页面
- */
- navToFocusItem () {
- this.$router.push({path:"./other", query:{module:'comprehensive'}})
- },
- /**
- * 点击跳转进入 分析|报表 说明书更新记录页面
- */
- navToIntroduce () {
- this.$router.push({path:"./analysis", query:{module:'specification'}})
- },
- itemStyle (option) {
- let num = 0
- if (option.assetTypeList) {
- option.assetTypeList.forEach(item=>{
- if (typeof item.is_exception_num === "number") {
- num += item.is_exception_num
- }
- })
- }
- if (option.rptGlsmsStatisticsList) {
- option.rptGlsmsStatisticsList.forEach(option => {
- if (typeof option.due_num === "number") {
- num += option.due_num
- }
- })
- }
- if (num > 0) {
- return {
- display:"block"
- }
- } else {
- return {
- display:"none"
- }
- }
- },
- navToInnerPage (item, equip) {
- this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, equipId: equip.category_code, module:'core'}})
- },
-
- /**
- * 跳转到甘特图详情页
- */
- navToGanttPage (item) {
- this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, module:'gantt'}})
- },
-
- testAjax() {
- let params = {
- getParams: {
- plazaId: this.plazaId
- }
- }
- getCardList(params).then(res => {
- if (res.result == 'success') {
- let result = res.data
- if (result && Array.isArray(result)) {
- result.forEach((item, index) => {
- item.expand = false
- if (item.assetTypeList) {
- let list = item.assetTypeList
- let len = list.length
- 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.forEach(item=>{
- item.forEach(eq=>{
- if (eq.rptGlsmsStatisticsList) {
- eq.rptGlsmsStatisticsList.forEach(each => {
- if (each.type === 1) {
- each.sort = 0
- } else if (each.type === 2) {
- each.sort = 1
- } else {
- each.sort = 2
- }
- })
- console.log(eq.rptGlsmsStatisticsList)
- eq.rptGlsmsStatisticsList = sortBy(eq.rptGlsmsStatisticsList, (item) => {return item.sort})
- }
- })
- })
- }
- }
- })
- },
- /**
- * 获取说明书变更记录
- */
- getInstructionList() {
- let params = {
- getParams: {
- plazaId: this.plazaId,
- page: 1,
- size: 13
- }
- }
- getChangeList(params).then(res => {
- if (res.result == 'success' && res.data) {
- let result = res.data
- result.forEach(item => {
- item.changedate = moment.unix(item.changedate / 1000).format('YYYY.MM.DD')
- if (item.objtype === 0) {
- item.type = '专维'
- } else if (item.objtype === 1) {
- item.type = '重要维保'
- } else if (item.objtype === 2) {
- item.type = '第三方检测'
- } else if (item.objtype === 3) {
- item.type = '综合事项'
- } else if (item.objtype === 4) {
- item.type = '重要维修'
- } else {
- item.type = '其他事项'
- }
- })
- if (result && Array.isArray(result)) {
- this.changeList = result
- }
- }
- })
- },
- getItemsQuery() {
- let params = {
- getParams: {
- // department=部门 //部门
- // startDate: '20200208000000', //开始时间
- // endDate: '20200608000000', //结束时间
- plazaId: this.plazaId, //广场id 必填
- page: 1, //页数
- size: 10 //条数
-
- }
- }
- getQueryList(params).then(res => {
- moment().format('YYYY.MM.DD HH:mm')
- if (res.result == 'success') {
- if (res.data && Array.isArray(res.data)) {
- res.data.forEach(item => {
- item.createdate = moment.unix(item.createdate / 1000).format('YYYY.MM.DD')
- })
- this.itemsList = res.data
- }
- }
- })
- }
- }
- }
- </script>
- <style lang='less'>
- .homepage {
- display: flex;
- justify-content: space-between;
- height: calc(100vh - 48px);
- padding: 15px;
- background: rgba(242, 245, 247, 1);
- overflow: auto;
- .homepage-cards-content {
- display: flex;
- width: 70%;
- overflow: auto;
- .items-container{
- width: 50%;
- .cards-item {
- width: calc(100% - 5px);
- height: auto;
- 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{
- height: 42px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-left: 12px;
- padding-right: 12px;
- border-radius: 4px;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- h4 {
- color: white;
- padding: 1rem;
- font-size: 1.6rem;
- line-height: 1;
- font-weight: bold;
- }
- img.title-img{
- width: 2.4rem;
- height: 2.4rem;
- }
- img.warning-img{
- width: 1.8rem;
- height: 1.8rem;
- }
- >div{
- display: flex;
- align-items: center;
- }
- }
- .equipment-list-container{
- position: relative;
- .equipment-list {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- padding: 1rem ;
- padding-bottom: 0.4rem;
- .equipment-item {
- width: 31%;
- box-sizing: border-box;
- border-radius: 2px;
- padding: 1rem;
- margin-right: 0.4rem;
- background: #EFF0F1;
- cursor: pointer;
- .equip-name {
- position: relative;
- display: inline-block;
- h5 {
- position: relative;
- color: #1f2429;
- font-size: 1.4rem;
- font-weight: bold;
- 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;
- }
- }
- }
- }
- .equipment-item:hover {
- background: #f5f6f7;
- }
- }
- .more{
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- 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;
- }
- }
- }
- .alert-list-container{
- padding:0 1rem 1rem 1rem;
- .alert-list {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- height: auto;
- padding: 1rem 0;
- padding-left: 1rem;
- border-radius: 4px;
- background: #F5F6F7;
- cursor: pointer;
- &:hover {
- background: #f5f6f7;
- }
- .alert-item {
- display: flex;
- width: 33.33%;
- align-items: center;
- img {
- width: 2.4rem;
- height: 2.4rem;
- margin-right: 0.6rem;
- }
- .content {
- .number {
- display: flex;
- justify-content: space-between;
- align-items: center;
- .left{
- span {
- margin-right: 1rem;
- font-size: 1.2rem;
- color: #1f2429;
- font-weight: bold;
- white-space: nowrap;
- }
- }
- .line {
- display: flex;
- justify-content: space-between;
- align-items: center;
- line-height: 1;
- 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: 8rem;
- line-height: 8rem;
- border-top: 1px solid #f5f6f7;
- text-align: center;
- color: #8d9399;
- }
- }
- }
- div:first-child.items-container{
- section:nth-of-type(1).cards-item{
- section.card-item-title{
- background: linear-gradient(to left, #3E64CB, #6C8BE3);
- }
- .equip-number{
- color: #3E64CB!important;
- }
- }
- section:nth-of-type(2).cards-item{
- section.card-item-title{
- background: linear-gradient(to left, #2BAD88, #54D6B2);
- }
- .equip-number{
- color: #2BAD88!important;;
- }
- }
- section:nth-of-type(3).cards-item{
- section.card-item-title{
- background: linear-gradient(to left, #3998DB, #70BBF0);
- }
- .equip-number{
- color: #3998DB!important;;
- }
- }
- section:nth-of-type(4).cards-item{
- section.card-item-title{
- background: linear-gradient(to left, #3E64CB, #6C8BE3);
- }
- .equip-number{
- color: #3E64CB!important;;
- }
- }
- }
- div:last-child.items-container{
- section:nth-of-type(1).cards-item{
- section.card-item-title{
- background: linear-gradient(to left, #3998DB, #70BBF0);
- }
- .equip-number{
- color: #3998DB!important;;
- }
- }
- section:nth-of-type(2).cards-item{
- section.card-item-title{
- background: linear-gradient(to left, #3E64CB, #6C8BE3);
- }
- .equip-number{
- color: #3E64CB!important;;
- }
- }
- section:nth-of-type(3).cards-item{
- section.card-item-title{
- background: linear-gradient(to left, #3998DB, #70BBF0);
- }
- .equip-number{
- color: #3998DB!important;;
- }
- }
- section:nth-of-type(4).cards-item{
- section.card-item-title{
- background: linear-gradient(to left, #2BAD88, #54D6B2);
- }
- .equip-number{
- color: #2BAD88!important;;
- }
- }
- }
- }
- .homepage-nav-list {
- width: calc(30% - 10px);
- height: 97%;
- background: white;
- .main-title {
- display: flex;
- justify-content: space-between;
- padding: 6px 12px;
- margin-bottom: 12px;
- background:#8D9399;
- span:first-child {
- color: #ffffff;
- font-weight: bold;
- font-size: 1.6rem;
- }
- a{
- color: white;
- line-height: 1;
- }
- }
- nav {
- height: 94%;
- padding: 14px 16px;
- overflow: auto;
- .table {
- .row {
- display: flex;
- align-items: center;
- padding: 6px;
- border-bottom: 1px solid #e4e6e7;
- font-size: 1.4rem;
- article {
- margin-right: 10px;
- }
- article:nth-of-type(1) {
- width: 20%;
- }
- article:nth-of-type(2) {
- width: 20%;
- padding-left: 1.2rem;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- article:nth-of-type(3) {
- width: calc(60% - 30px);
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- }
- .table-header {
- height: 3.2rem;
- padding: 6px;
- line-height: 3.2rem;
- color: #646a73;
- font-weight: 600;
- border-bottom: none;
- background: #f8f9fa;
- }
- .table-body {
- overflow: auto;
- }
- }
- }
- nav:first-child {
- height: 96%;
- .table-body {
- height: 75vh;
- overflow-y: auto;
- }
- }
-
- }
- }
- </style>
|