<template>
  <!-- 航空货物综合统计 -->
  <div class="content-app">
    <div class="up">
      <SecurityCheckHeader title="航空货物综合统计" @change="change" />
    </div>
    <div class="comprehensive">
      <a-row :gutter="16">
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>申报件数</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :id="1" :texter="dataall" />
              </div>
              <div class="chart_right">
                <div class="child">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">高风险货物级</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="child">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">低风险货物级</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="child">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">优先级</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="child">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">普通级</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="child">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">严控级</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>低风险货物级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :id="2" :texter="dataLow" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont">
                    <p>总件数</p>
                    <span>100</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包数</p>
                    <span>10</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>10%</span>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">移交</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">拒运</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">放行</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>优先级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :id="3" :texter="dataLow" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont">
                    <p>总件数</p>
                    <span>100</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包数</p>
                    <span>10</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>10%</span>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">移交</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">拒运</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">放行</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>普通级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :id="4" :texter="dataLow" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont">
                    <p>总件数</p>
                    <span>100</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包数</p>
                    <span>10</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>10%</span>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">移交</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">拒运</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">放行</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>严控级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :id="5" :texter="dataLow" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont">
                    <p>总件数</p>
                    <span>100</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包数</p>
                    <span>10</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>10%</span>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">移交</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">拒运</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">放行</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="chart">
            <div class="header">
              <p>高风险货物级</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :id="6" :texter="dataLow" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont">
                    <p>总件数</p>
                    <span>100</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包数</p>
                    <span>10</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>10%</span>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">移交</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">拒运</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
                <div class="childcop">
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">放行</div>
                  </div>
                  <div class="boot">
                    <div class="child">件数：100</div>
                    <div class="child">占比：20%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import GraphicEchart from "../components/graphicHome.vue";
import SecurityCheckHeader from "../components/securityCheckHeader.vue";
export default {
  data() {
    return {
      dataall: {
        name: "总件数",
        cont: "500",
        data: [
          { value: 335, name: "1" },
          { value: 310, name: "2" },
          { value: 310, name: "3" },
          { value: 310, name: "4" },
          { value: 310, name: "5" },
        ],
        top: "38%",
        textStyle: {
          fontSize: "20",
          color: "#ffffff",
        },
        subtextStyle: {
          fontSize: "36",
          fontWeight: "800",
          color: "#ffffff",
        },
        color: ["#9B73B4", "#66ACD4", "#85C997", "#F1B172", "#E86E5A"],
      },
      dataLow: {
        name: "总件数",
        cont: "500",
        data: [
          { value: 335, name: "1" },
          { value: 310, name: "2" },
          { value: 310, name: "3" },
        ],
        top: "38%",
        textStyle: {
          fontSize: "20",
          color: "#ffffff",
        },
        subtextStyle: {
          fontSize: "36",
          fontWeight: "800",
          color: "#ffffff",
        },
        color: ["#6161BD", "#FAD153", "#DC5594"],
      },
    };
  },
  components: {
    GraphicEchart,
    SecurityCheckHeader,
  },
  methods: {
    change() {
      this.$router.push("./cargoTable");
    },
  },
};
</script>
<style lang="scss" scoped>
.comprehensive {
  width: 100%;
  height: 100%;
  .chart {
    width: 100%;
    height: 39.5vh;
    background: #ffffff;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 24px;
  }
}
.header {
  > p {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101116;
    margin: 0 0 24px 0;
  }
}
.chart_cont {
  width: 100%;
  height: 90%;
  display: flex;
  justify-content: space-between;
  > .chart_left {
    width: 50%;
    height: 100%;
  }
  > .chart_right {
    width: 45%;
    height: 100%;
    padding-right: 10%;
    > .analysis {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      margin-top: 20px;
      > .analysis_cont {
        width: 30%;
        height: 100%;
        > p {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #101116;
          margin: 0;
        }
        > span {
          font-size: 28px;
          font-family: DIN;
          font-weight: bold;
          color: #101116;
        }
      }
    }
    > .child {
      width: 100%;
      > .top {
        width: 100%;
        height: 31px;
        display: flex;
        align-items: center;
        > .log {
          width: 14px;
          height: 14px;
          background: #e86e5a;
          border-radius: 2px;
        }
        > .name {
          margin-left: 6px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #101116;
        }
      }
      > .boot {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .child {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #747784;
        }
      }
    }
    .child:nth-child(1) {
      .log {
        background: #e86e5a;
      }
    }
    .child:nth-child(2) {
      .log {
        background: #f1b172;
      }
    }
    .child:nth-child(3) {
      .log {
        background: #85c997;
      }
    }
    .child:nth-child(4) {
      .log {
        background: #66acd4;
      }
    }
    .child:nth-child(5) {
      .log {
        background: #9b73b4;
      }
    }
    > .childcop {
      width: 100%;
      > .top {
        width: 100%;
        height: 37px;
        display: flex;
        align-items: center;
        > .log {
          width: 14px;
          height: 14px;
          border-radius: 2px;
        }
        > .name {
          margin-left: 6px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #101116;
        }
      }
      > .boot {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .child {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #747784;
        }
      }
    }
    .childcop:nth-child(2) {
      .log {
        background: #fad153;
      }
    }
    .childcop:nth-child(3) {
      .log {
        background: #dc5594;
      }
    }
    .childcop:nth-child(4) {
      .log {
        background: #6161bd;
      }
    }
  }
}
::v-deep .ant-col {
  margin-bottom: 16px;
}
</style>