<template>
  <div class="drilling-risk">
    <div class="risk-header">
      <dv-border-box-11 title="丰叶1-1HF井综合参数异常预警" backgroundColor="hsla(212, 73%, 22%, 0.5)">
        <div class="drill-hea">
          <!-- <div class="header-hea">
          <div class="hea-card-1">丰叶1-1钻井综合参数异常预警</div>
        </div> -->
          <div class="header-hea">
            <div class="hea-card-1">
              <dv-decoration-7 style="width: 300px; height: 30px; color: #f0f0f0"
                >时间:2023-09-16 08:08:08</dv-decoration-7
              >
            </div>
            <div class="hea-card-1">
              <dv-decoration-7 style="width: 300px; height: 30px; color: #f0f0f0">工况:起下钻</dv-decoration-7>
            </div>
          </div>
          <div class="header-hea">
            <div class="hea-card-2">
              <dv-decoration-11 style="width: 300px; height: 60px; color: #f0f0f0">钩载异常数:1000</dv-decoration-11>
            </div>
            <div class="hea-card-2">
              <dv-decoration-11 style="width: 300px; height: 60px; color: #f0f0f0">扭矩异常数:1000</dv-decoration-11>
            </div>
            <div class="hea-card-2">
              <dv-decoration-11 style="width: 300px; height: 60px; color: #f0f0f0">泵压异常数:1000</dv-decoration-11>
            </div>
            <div class="hea-card-2">
              <dv-decoration-11 style="width: 300px; height: 60px; color: #f0f0f0">井漏异常数:1000</dv-decoration-11>
            </div>
            <div class="hea-card-2">
              <dv-decoration-11 style="width: 300px; height: 60px; color: #f0f0f0">溢流异常数:1000</dv-decoration-11>
            </div>
          </div>
          <div class="header-con">
            <div class="con-card">
              <div class="card-title">
                <dv-decoration-7 style="width: 150px; height: 30px; color: #f0f0f0">卡钻风险:高</dv-decoration-7>
              </div>
              <div class="card-content">
                <dv-decoration-9 style="width: 150px; height: 150px">80%</dv-decoration-9>
              </div>
            </div>
            <div class="con-card">
              <div class="card-title">
                <dv-decoration-7 style="width: 150px; height: 30px; color: #f0f0f0">井漏风险:高</dv-decoration-7>
              </div>
              <div class="card-content">
                <dv-decoration-9 style="width: 150px; height: 150px">80%</dv-decoration-9>
              </div>
            </div>
            <div class="con-card">
              <div class="card-title">
                <dv-decoration-7 style="width: 150px; height: 30px; color: #f0f0f0">溢流风险:高</dv-decoration-7>
              </div>
              <div class="card-content">
                <dv-decoration-9 style="width: 150px; height: 150px">80%</dv-decoration-9>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-11>
    </div>

    <div class="risk-content">
      <div class="risk-card">
        <div class="risk-card-title">
          <dv-decoration-11 style="width: 200px; height: 60px; color: #f0f0f0">卡钻风险</dv-decoration-11>
        </div>
        <div class="risk-crad-content">
          <dv-border-box-12 backgroundColor="hsla(212, 73%, 22%, 0.5)">
            <div class="card-echart">
              <risk-echart ref="stickingOfToolRiskEchartVue" />
            </div>
          </dv-border-box-12>
        </div>
      </div>
      <div class="risk-card">
        <div class="risk-card-title">
          <dv-decoration-11 style="width: 200px; height: 60px; color: #f0f0f0">井漏风险</dv-decoration-11>
        </div>
        <div class="risk-crad-content">
          <dv-border-box-12 backgroundColor="hsla(212, 73%, 22%, 0.5)">
            <div class="card-echart">
              <risk-echart ref="lostCirculationRiskEchartVue" />
            </div>
          </dv-border-box-12>
        </div>
      </div>
      <div class="risk-card">
        <div class="risk-card-title">
          <dv-decoration-11 style="width: 200px; height: 60px; color: #f0f0f0">溢流风险</dv-decoration-11>
        </div>
        <div class="risk-crad-content">
          <dv-border-box-12 backgroundColor="hsla(212, 73%, 22%, 0.5)">
            <div class="card-echart">
              <risk-echart ref="overflowRiskEchartVue" /></div
          ></dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import riskEchart from './riskEchart.vue'
export default {
  name: 'drillingRiskIndex',
  components: [
    riskEchart
  ],
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="less" scoped>
@darkColor: #0d1e3c;
@foreColor: #b581f5;
@lightForeColor: #000;
.drilling-risk {
  background: @darkColor;
  color: @lightForeColor;
  //   font-size: 5px;
  font-weight: 500;
  height: 100%;
}
.risk-header {
  width: 100%;
  height: 400px;
}
.drill-hea {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  padding: 0 1% 0 1%;
  color: #f0f0f0;
}
.header-hea {
  width: 100%;
  height: 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.hea-card {
  width: 50%;
  height: 60%;
  font-size: 20px;
  text-align: center;
}
.hea-card {
  width: 20%;
  height: 60%;
  font-size: 20px;
  text-align: center;
}
.header-con {
  width: 100%;
  height: 65%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding-top: 15px;
}
.con-card {
  width: 30%;
  height: 90%;
  //   font-size: 20px;
  //   text-align: center;
}
.card-title {
  width: 100%;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
}
.card-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.card-content-label {
  width: 100%;
  height: 30px;
  font-size: 15px;
}
.risk-content {
  width: 100%;
  height: 65%;
}
.risk-card {
  width: 100%;
  height: 33%;
}
.risk-card-title {
  width: 100%;
  height: 25%;
}
.risk-crad-content {
  width: 100%;
  height: 75%;
}
</style>