<template>
  <!--监控报告-->
    <div class="app-container MonitoringReport">
      <div class="header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="监控日报" name="first"></el-tab-pane>
          <el-tab-pane label="监控周报" name="second"></el-tab-pane>
          <el-tab-pane label="监控月报" name="third"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="report-content">
        <div class="list">
          <div class="list-title">
            <div class="flex-box query-box">
              <div class="flex-box query-params">
                <span class="common-title">今日</span>
              </div>
              <div class="flex-box query-ability">
                共<span style="color:#0081FF;padding: 0 4px;">13</span>家企业发生<span style="color:#F7965B;padding: 0 4px;">651</span>条动态信息
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-left">
              <!--<img v-if="item.logoUrl" :src="item.logoUrl" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
              <!--<img v-else src="@/assets/images/enterprise.png" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
              <img src="@/assets/images/enterprise.png"/>
            </div>
            <div class="item-right">
              <p class="right-title">
                <span>中国铁建集团</span>
              </p>
              <p class="card-right-p">
                <span class="right-label">提示：</span>
                <span class="right-color color1">11</span>
                <span class="right-label">正向：</span>
                <span class="right-color color1">21</span>
                <span class="right-label">低风险：</span>
                <span class="right-color color1">31</span>
                <span class="right-label">中风险：</span>
                <span class="right-color color1">41</span>
                <span class="right-label">高风险：</span>
                <span class="right-color color1">1</span>
              </p>
              <div class="tips">新增<span>654</span>条动态信息</div>
            </div>
          </div>
          <div class="item">
            <div class="item-left">
              <!--<img v-if="item.logoUrl" :src="item.logoUrl" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
              <!--<img v-else src="@/assets/images/enterprise.png" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
              <img src="@/assets/images/enterprise.png"/>
            </div>
            <div class="item-right">
              <p class="right-title">
                <span>中国铁建集团</span>
              </p>
              <p class="card-right-p">
                <span class="right-label">提示：</span>
                <span class="right-color color1">11</span>
                <span class="right-label">正向：</span>
                <span class="right-color color2">21</span>
                <span class="right-label">低风险：</span>
                <span class="right-color color3">31</span>
                <span class="right-label">中风险：</span>
                <span class="right-color color4">41</span>
                <span class="right-label">高风险：</span>
                <span class="right-color color5">1</span>
              </p>
              <div class="tips">新增<span>654</span>条动态信息</div>
            </div>
          </div>
        </div>
        <div class="list">
          <div class="list-title">
            <div class="flex-box query-box">
              <div class="flex-box query-params">
                <span class="common-title">昨日</span>
              </div>
              <div class="flex-box query-ability">
                共<span style="color:#0081FF;padding: 0 4px;">13</span>家企业发生<span style="color:#F7965B;padding: 0 4px;">651</span>条动态信息
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-left">
              <!--<img v-if="item.logoUrl" :src="item.logoUrl" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
              <!--<img v-else src="@/assets/images/enterprise.png" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
              <img src="@/assets/images/enterprise.png"/>
            </div>
            <div class="item-right">
              <p class="right-title">
                <span>中国铁建集团</span>
              </p>
              <p class="card-right-p">
                <span class="right-label">提示：</span>
                <span class="right-color color1">11</span>
                <span class="right-label">正向：</span>
                <span class="right-color color1">21</span>
                <span class="right-label">低风险：</span>
                <span class="right-color color1">31</span>
                <span class="right-label">中风险：</span>
                <span class="right-color color1">41</span>
                <span class="right-label">高风险：</span>
                <span class="right-color color1">1</span>
              </p>
              <div class="tips">新增<span>654</span>条动态信息</div>
            </div>
          </div>
          <div class="item">
            <div class="item-left">
              <!--<img v-if="item.logoUrl" :src="item.logoUrl" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
              <!--<img v-else src="@/assets/images/enterprise.png" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
              <img src="@/assets/images/enterprise.png"/>
            </div>
            <div class="item-right">
              <p class="right-title">
                <span>中国铁建集团</span>
              </p>
              <p class="card-right-p">
                <span class="right-label">提示：</span>
                <span class="right-color color1">11</span>
                <span class="right-label">正向：</span>
                <span class="right-color color2">21</span>
                <span class="right-label">低风险：</span>
                <span class="right-color color3">31</span>
                <span class="right-label">中风险：</span>
                <span class="right-color color4">41</span>
                <span class="right-label">高风险：</span>
                <span class="right-color color5">1</span>
              </p>
              <div class="tips">新增<span>654</span>条动态信息</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'MonitoringReport',
    data() {
      return {
        activeName:'first',
        dataList:[
          {
            time:'今日',
            list:[]
          }
        ]
      }
    },
    created() {

    },
    methods: {

      handleClick() {

      }
    }
  }
</script>

<style lang="scss" scoped>
  .MonitoringReport{
    /*background: #ffffff;*/
    .header{
      justify-content: space-between;
      height: 48px;
      background: #FFFFFF;
      border-radius: 4px;
      color: #232323;
      /*position: sticky;*/
      /*top: 54px;*/
      /*z-index: 999;*/
      ::v-deep .el-tabs{
        height: 48px;
        line-height: 48px;
        .el-tabs__nav-wrap::after {
          position: static !important;
        }
        .el-tabs__header{
          margin: 0;
          .el-tabs__item{
            padding: 0 16px;
            font-size: 16px;
          }
          .is-active{
            font-weight: bold;
          }
        }
        .el-tabs__content{
          width: 100%;
        }
      }
      .location{
        font-size: 14px;
        color: #0081FF;
        i{
          margin-right: 6px;
          font-size: 16px;
        }
      }
    }
    .report-content{
      .list{
        background: #fff;
        margin-top: 16px;
        .list-title{
          height: 56px;
          line-height: 56px;
          border-bottom: 1px solid #EEEEEE;
          padding: 0 16px;
          .query-params{
            font-size: 16px;
            font-weight: 700;
            color: #232323;
          }
          .query-ability{
            font-size: 14px;
            font-weight: 400;
            color: #3D3D3D;
            span{
              margin: 0;
            }
          }
        }
        .item{
          display: flex;
          margin: 0 16px;
          padding: 16px 0;
          position: relative;
          border-bottom: 1px solid #EEEEEE;
          .item-left{
            margin-right: 12px;
            img{
              width: 62px;
              height: 62px;
            }
          }
          .item-right{
            p{
              margin: 0;
              padding: 0;
            }
            .right-title{
              font-size: 16px;
              font-weight: 700;
              color: #333333;
              margin-bottom: 10px;
              margin-top: 2px;
            }
            .right-label{
              font-size: 14px;
              color: #666666;
            }
            .tips{
              position: absolute;
              right: 0;
              top:46px;
              color: #666666;
              font-size: 14px;
              span{
                color: #333333;
                padding: 0 4px;
              }
            }
            .right-color{
              margin-right: 24px;
            }
            .color1{
              color: #0081FF;
            }
            .color2{
              color: #0CBC6D;
            }
            .color3{
              color: #F7965B;
            }
            .color4{
              color: #FF3C3C;
            }
            .color5{
              color: #FF3C3C;
            }
          }
        }
        .item:last-child{
          border-bottom:0;
        }
      }
    }
  }
</style>
