<template>
  <div class="courtMain">
    <div class="left">
      <div class="leftOne">
        <div class="title">预计统计列表 一级</div>
        <div class="courtHouse">
            <div
            class="warnListContent"
            v-for="(item, index) in warnList1"
            :key="index"
          >
            <div class="warnArray">
              <span>{{ item.id }}</span>
              <img :src="item.icon" style="width: 7%; margin-left: 3%" />
               <div class="warnArrayBox">
                <div  style="margin-top: 2%;float: left;">
                报警时间:<span style="margin:0 0.5rem;">{{ item.time }}</span>
                </div>
                <div
                  style="margin-top: 2%;">
                  报警原因:<span class="spancolor">{{'「'+ item.cause+'」' }}</span><span>{{item.content}}</span> 
                </div>
               <div  style="margin-top: 2%;float: left;">
                风险等级:<span class="spancolor">{{ '「'+ item.risk +'」'}}</span>
                </div> 
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="leftTwo">
         <div class="title">预计统计列表 二级</div>
          <div class="courtHouse">
            <div
            class="warnListContent"
            v-for="(item, index) in warnList2"
            :key="index"
          >
            <div class="warnArray">
              <span>{{ item.id }}</span>
              <img :src="item.icon" style="width: 7%; margin-left: 3%" />
               <div class="warnArrayBox">
                <div  style="margin-top: 2%;float: left;">
                报警时间:<span style="margin:0 0.5rem;">{{ item.time }}</span>
                </div>
                <div
                  style="margin-top: 2%;">
                  报警原因:<span class="spancolor">{{'「'+ item.cause+'」' }}</span><span>{{item.content}}</span> 
                </div>
               <div  style="margin-top: 2%;float: left;">
                风险等级:<span class="spancolor">{{ '「'+ item.risk +'」'}}</span>
                </div> 
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="leftThree"></div> -->
    </div>
    <div class="right">
       
        <div class="title">预计统计列表 三级</div>
        <div class="courtHouse">
            <div
            class="warnListContent"
            v-for="(item, index) in warnList3"
            :key="index"
          >
            <div class="warnArray">
              <span>{{ item.id }}</span>
              <img :src="item.icon" style="width: 7%; margin-left: 3%" />
              <div class="warnArrayBox">
                <div  style="margin-top: 2%;float: left;">
                报警时间:<span style="margin:0 0.5rem;">{{ item.time }}</span>
                </div>
                <div
                  style="margin-top: 2%;">
                  报警原因:<span class="spancolor">{{'「'+ item.cause+'」' }}</span><span>{{item.content}}</span> 
                </div>
               <div  style="margin-top: 2%;float: left;">
                风险等级:<span class="spancolor">{{ '「'+ item.risk +'」'}}</span>
                </div> 
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "court",
  data() {
    return {
        //报警数组 一级
           warnList1: [
        {
          id: "1",
         icon: require("../assets/images/warnRed.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "一级",
        },
        {
          id: "2",
          icon: require("../assets/images/warnRed.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "一级",
        },
        {
          id: "3",
         icon: require("../assets/images/warnRed.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "一级",
        },
         {
          id: "4",
          icon: require("../assets/images/warnRed.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "一级",
        },
         {
          id: "5",
          icon: require("../assets/images/warnRed.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "一级",
        },
         {
          id: "6",
          icon: require("../assets/images/warnRed.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "一级",
        },
      ], 
      //报警数组 二级
          warnList2: [
        {
          id: "1",
         icon: require("../assets/images/warnOrange.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "二级",
        },
        {
          id: "2",
          icon: require("../assets/images/warnOrange.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "二级",
        },
        {
          id: "3",
           icon: require("../assets/images/warnOrange.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "二级",
        },
         {
          id: "4",
           icon: require("../assets/images/warnOrange.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "二级",
        },
         {
          id: "5",
          icon: require("../assets/images/warnOrange.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "二级",
        },
         {
          id: "6",
            icon: require("../assets/images/warnOrange.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "二级",
        },
      ], 
      //报警数组 三级
          warnList3: [
        {
          id: "1",
          icon: require("../assets/images/warnBlue.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "三级",
        },
        {
          id: "2",
          icon: require("../assets/images/warnBlue.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "三级",
        },
        {
          id: "3",
            icon: require("../assets/images/warnBlue.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "三级",
        },
         {
          id: "4",
           icon: require("../assets/images/warnBlue.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "三级",
        },
         {
          id: "5",
           icon: require("../assets/images/warnBlue.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "三级",
        },
         {
          id: "6",
            icon: require("../assets/images/warnBlue.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "三级",
        },
        {
          id: "7",
            icon: require("../assets/images/warnBlue.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "三级",
        },
        {
          id: "8",
            icon: require("../assets/images/warnBlue.png"),
          time: "2023年03月18日 15:26:08",
          cause: "机房02机箱",
          content:'发生事故',
          risk: "三级",
        },
      ], 
        courtList: [
        {
          name: "空闲中",
          count: "7",
        },
        {
          name: "已开庭",
          count: "15",
        },
        {
          name: "已预约",
          count: "17",
        },
        {
          name: "法官办公室",
          count: "86",
        },
      ], // 智慧法庭小房子
       houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
    };
  },
  mounted() {},
  methods: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
@fontsize: 0.6rem;
.courtMain {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3% 0 0.3%;
  box-sizing: border-box;
  
  .left {
    width: 25.5%;
    height: 95%;
    
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    .leftOne {
      width: 100%;
      height: 40%;
      .title {
  width: 100%;
  height: 14%;
  background: url("../assets/images/title.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  padding-left: 12%;
  box-sizing: border-box;
}
      .courtHouse {
        height: 95%;
    width: 100%;
        display: block;
          flex-wrap: nowrap;
          justify-content: space-around;
          align-items: center;
          overflow-y: auto;
          &::-webkit-scrollbar {
              width: 0;
            }
             .warnListContent {
          height: 32%;
          width: 95%;
          color: #fff;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding-left: 3%;
          box-sizing: border-box;
          border-bottom: 0.08rem solid #eee;
          margin-left: 0.5rem;
          .warnArray {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            line-height: 2;
           .warnArrayBox{
            
                  margin-left: 3%; 
                  span{
                    margin:0.5rem;
                  }
                  .spancolor{
                   color: rgb(218, 25, 25);
                  }
            }
          }

        }
}

      }
    }
    .leftTwo {
      width: 100%;
      height: 51%;
    //   position: relative;
        .title {
  width: 100%;
  height: 12%;
  background: url("../assets/images/title.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  padding-left: 12%;
  box-sizing: border-box;
}
      .courtHouse {
        height: 93%;
    width: 100%;
        display: block;
          flex-wrap: nowrap;
          justify-content: space-around;
          align-items: center;
          overflow-y: auto;
          &::-webkit-scrollbar {
              width: 0;
            }
             .warnListContent {
          height: 28%;
          width: 95%;
          color: #fff;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding-left: 3%;
          box-sizing: border-box;
          border-bottom: 0.08rem solid #eee;
          margin-left: 0.5rem;
          .warnArray {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            line-height: 2;
            .warnArrayBox{
                // display: flex;
                //   flex-direction: column;
                //   align-items: flex-start;
                  margin-left: 3%; 
                  span{
                    margin:0.5rem;
                  }
                  .spancolor{
                    color: darkorange;
                  }
            }
          }
        }
}
      #caseEcharts{
          width: 100%;
          height: calc(100% - 16%);
          border: 1px solid blue;
      }
    }
    .leftThree {
      width: 100%;
      height: 40%;
      border: 1px solid white;
    }
  }
  .right {
    width: 25.5%;
    height: 95%;
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
      .title {
  width: 100%;
  height: 5%;
  background: url("../assets/images/title.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  padding-left: 12%;
  box-sizing: border-box;
}
      .courtHouse {
        height: 95%;
    width: 100%;
        display: block;
          flex-wrap: nowrap;
          justify-content: space-around;
          align-items: center;
          overflow-y: auto;
          &::-webkit-scrollbar {
              width: 0;
            }
             .warnListContent {
          height: 14%;
          width: 95%;
          color: #fff;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          padding-left: 3%;
          box-sizing: border-box;
          border-bottom: 0.08rem solid #eee;
          margin-left: 0.5rem;
          .warnArray {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            line-height: 2;
             .warnArrayBox{
                // display: flex;
                //   flex-direction: column;
                //   align-items: flex-start;
                  margin-left: 3%; 
                  span{
                    margin:0.5rem;
                  }
                  .spancolor{
                    color: deepskyblue;
                  }
            }
          }
        }
}
  }


.caseTitle{
  width: 23%;
  height: 10%;
  background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  padding-left: 5%;
  box-sizing: border-box; 
  margin-top: 2%; 
}
</style>