<template>
  <div>
    <BasicLayout>
      <template #wrapper>
        <el-card class="box-card">
        <h4>应用系统健康分析</h4>
        <div class="content" ref="content" id="content">
          <ul class="listwrap">
            <li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>PMS3.0</p>
              <h6>97.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>微信电力服务平台</p>
              <h6>98</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>一体化交费平台（二期）</p>
              <h6>92.01</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>电费充值卡系统</p>
              <h6>61</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>掌上电力（居民版）</p>
              <h6>97.5</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>应用系统</p>
              <h6>97.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>微信电力服务平台</p>
              <h6>98</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>一体化交费平台（二期）</p>
              <h6>92.01</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>电费充值卡系统</p>
              <h6>61</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>掌上电力（居民版）</p>
              <h6>97.5</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>应用系统</p>
              <h6>97.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>微信电力服务平台</p>
              <h6>98</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>一体化交费平台（二期）</p>
              <h6>92.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>一体化交费平台（二期）</p>
              <h6>92.01</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>电费充值卡系统</p>
              <h6>61</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>掌上电力（居民版）</p>
              <h6>97.5</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>应用系统</p>
              <h6>97.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>微信电力服务平台</p>
              <h6>98</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>电费充值卡系统</p>
              <h6>61</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>一体化交费平台（二期）</p>
              <h6>92.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>应用系统</p>
              <h6>97.01</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>电费充值卡系统</p>
              <h6>61</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>微信电力服务平台</p>
              <h6>98</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>一体化交费平台（二期）</p>
              <h6>92.01</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>掌上电力（居民版）</p>
              <h6>97.5</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>应用系统</p>
              <h6>97.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>微信电力服务平台</p>
              <h6>98</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>一体化交费平台（二期）</p>
              <h6>92.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>应用系统</p>
              <h6>97.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>微信电力服务平台</p>
              <h6>98</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>一体化交费平台（二期）</p>
              <h6>92.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>一体化交费平台（二期）</p>
              <h6>92.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>应用系统</p>
              <h6>97.01</h6>
            </li>
						<li style="background:rgb(33, 136, 104)" @click="go('/ovserve')">
              <p>微信电力服务平台</p>
              <h6>98</h6>
            </li>
						<li style="background:rgb(255, 153, 0)" @click="go('/ovserve')">
              <p>电费充值卡系统</p>
              <h6>61</h6>
            </li>
          </ul>
          <!-- <div class="appsys_tit" v-show="second_level_flag"><div class="appsys_tit_l"><span><i>2</i></span></div><div class="appsys_tit_r">二类系统</div><span>　　　总数量：<span  v-if="levelList.second_level">{{levelList.second_level.length != 0?levelList.second_level.length:0}}</span>	</span></div>
          <ul class="listwrap">
            <li v-for="(item,index) in levelList.second_level" :key="index" :style="{backgroundColor:`${item.health_color}`==''?'#999':`${item.health_color}`}" @click="go('/appsystem/system',item.id,item)" v-show="item.status">
              <p :title="item.operation_name">{{item.operation_name}}</p>
              <h6>{{item.health_score}}</h6>
            </li>
          </ul>
          <div class="appsys_tit" v-show="third_level_flag"><div class="appsys_tit_l"><span><i>3</i></span></div><div class="appsys_tit_r">三类系统</div><span>　　　总数量：<span v-if="levelList.third_level">{{levelList.third_level.length != 0?levelList.third_level.length:0}}</span>	</span></div>	
          <ul class="listwrap">
            <li v-for="(item,index) in levelList.third_level" :key="index" :style="{backgroundColor:`${item.health_color}`==''?'#999':`${item.health_color}`}" @click="go('/appsystem/system',item.id,item)" v-show="item.status">
              <p :title="item.operation_name">{{item.operation_name}}</p>
              <h6>{{item.health_score}}</h6>
            </li>
          </ul> -->
        </div>
        </el-card>
      </template>
    </BasicLayout>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      first_level_flag:true,
    }
  },
  methods:{
    go(router, id,item){
				var data={
					id:id,
				}
        window.scrollTo(0,0);
        if(id == 'add'){
            this.$router.push(router)
        }else{
            this.$router.push({
                path:router,
                query: data
            });
				}
				// localStorage.setItem('appItem',JSON.stringify(item));
				
		},
  }
}
</script>

<style lang="scss" scoped>
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
		font-size: 16px;
}
h6 {
    display: block;
    font-size: 0.67em;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.content{
	margin-top:10px;
	padding-left:25px;
	.listwrap{
		display: flex;
		justify-content: start;
		flex-wrap:wrap;
		li{
			width:148px;
			height: 80px;
		    cursor: pointer;
		    font-size: 12px;
		    position: relative;
		    overflow: hidden;
		    color: #666;
		    background: #fff;
		    -webkit-box-shadow: 4px 4px 40px rgba(0,0,0,.05);
		    box-shadow: 4px 4px 40px rgba(0,0,0,.05);
		    border-color: rgba(0,0,0,.05);
		    border-radius: 10px;
		    margin:5px;
		    text-align: center;
		    box-sizing: border-box;
		    padding:10px;		    
		    p{
		    	color:#fff;
		    	font-size:14px;
		    	height: 42px;
	    	  overflow: hidden;
			    text-overflow:ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
		    }
		    h6{
		    	font-size:16px;
		    	// margin-top:5px;
		    	color:#fff;
					font-weight: normal;
		    }
		    &:hover{
		    	transform: scale(1.1);
		    }
		}

	}
  .isFixed {
    position: fixed;
    background-color: #fff;
    top: 0;
    z-index: 999;
  }
}
.appsys_tit{
	/*width:150px;*/
	margin:30px 0 10px 0;
	/*border-bottom:1px solid #2e5596;*/
	color:#363e4f;
	display: flex;
	justify-content: flex-start;
	.appsys_tit_l{
		span{
			display: inline-block;
			width:16px;
			height:16px;
			margin-right:10px;
			background:#363e4f;
			transform: rotate(45deg);
			color:#fff;
			text-align: center;
			line-height: 16px;
			margin-left:5px;
			i{
				width:16px;
				height:16px;
				line-height: 16px;
				text-align: center;
				color:#fff;
				display: inline-block;
				font-style: normal;
				transform:rotate(-45deg);
				font-size:12px;
			}
		}
	}
	.appsys_tit_r{
		/*flex:1;*/
		/*width:100px;*/
		margin-left:-10px;
		border-bottom:1px solid #363e4f;
		text-indent: 15px;
		/*font-weight: bold;*/
		position: relative;
		padding-right:15px;
		font-size:15px;
		color:#363e4f;
		/*span:nth-of-type(1){
			width:0;
			height: 0;
			border-width:0 8px 8px;
			border-style: solid;
			border-color:transparent transparent #2e5596;
			position: absolute;
			right:10px;
			top:13px;
		}
		span:nth-of-type(2){
			width:0;
			height: 0;
			border-width:0 8px 8px;
			border-style: solid;
			border-color:transparent transparent #2e5596;
			position: absolute;
			right:30px;
			top:13px;
		}
		span:nth-of-type(3){
			width:0;
			height: 0;
			border-width:0 8px 8px;
			border-style: solid;
			border-color:transparent transparent #2e5596;
			position: absolute;
			right:50px;
			top:13px;
		}*/
	}
	
}
</style>