<template>
  <div class="content-app">
    <div class="up">
      <SecurityCheckHeader
        title="安检通道综合效率"
        :withSelect="false"
        :withInput="false"
        :withChangeButton="false"
        :withExportButton="false"
      />
    </div>
    <div class="comprehensive_cont">
      <div class="comprehensive_top">
        <div class="header">
          <p>月过检件数统计</p>
          <span>单位：件</span>
        </div>
        <div id="comprehensive-month"></div>
      </div>
      <div class="comprehensive_bootom">
        <div class="header">
          <p>日过检件数统计</p>
          <span>单位：件</span>
        </div>
        <div id="comprehensive-day"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { discolorationcops, discolorationcopy } from "@/utils/app-ecahrts";
import SecurityCheckHeader from "../components/securityCheckHeader.vue";
export default {
  data() {
    return {};
  },
  components: {
    SecurityCheckHeader,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(
        document.getElementById("comprehensive-month")
      ); //统计折线
      let myChartcopy = this.$echarts.init(
        document.getElementById("comprehensive-day")
      ); //统计折线

      myChart.setOption(discolorationcops);
      myChartcopy.setOption(discolorationcopy);
      window.onresize = () => {
        myChart.resize();
        myChartcopy.resize();
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.comprehensive_cont {
  width: 100%;
  > .comprehensive_top {
    width: 100%;
    height: 39vh;
    background: #ffffff;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 24px;
  }
  > .comprehensive_bootom {
    margin-top: 16px;
    width: 100%;
    height: 39vh;
    background: #ffffff;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 24px;
  }
}
#comprehensive-month {
  width: 100%;
  height: 90%;
}
#comprehensive-day {
  width: 100%;
  height: 90%;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > p {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101116;
    margin: 0 0 24px 0;
  }
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #101116;
  }
}
</style>