<template>
  <div class="exa">
    <div class="exaone">
      <div class="topleft">
        <div class="exaleft">
          <div style="color: #188df0">优秀</div>
          <div>考核级别</div>
          <div
            style="
              width: 30px;
              border-bottom: 1px solid #188df0;
              margin-top: 10px;
            "
          ></div>
        </div>
        <div
          class="exacenter"
          id="myChartpieone"
          :style="{ width: '250px', height: '100%' }"
        ></div>
        <div class="exaright">
          <div style="color: #188df0">
            <span>3</span>
            <img
              src="../../assets/up.png"
              style="width: 15px; height: 12px; margin-bottom: 3px"
            />
          </div>
          <div>排名</div>
          <div
            style="
              width: 30px;
              border-bottom: 1px solid #188df0;
              margin-top: 10px;
            "
          ></div>
        </div>
      </div>
      <div class="topright">
        <div class="exatop">
          2021年度全县共处置<span style="color: #b65bff; font-size: 20px"
            >367件</span
          >燃气事故，事故办结率<span style="color: red; font-size: 20px"
            >100%</span
          >,平均办结时效<span style="color: #1c84c6; font-size: 20px"
            >24小时</span
          >;
        </div>
        <div class="exatop">
          共组织燃气取暖专项排查、检查任务<span
            style="color: #2934ff; font-size: 20px"
            >256次</span
          >，燃气企业日常巡查<span style="color: #ffbc00; font-size: 20px"
            >566次</span
          >，整改<span style="color: red; font-size: 20px">765次</span
          >安全隐患。
        </div>
        <div class="exatop">
          共寄到投诉<span style="color: #1c84c6; font-size: 20px">271次</span
          >，已全部处置完成。
        </div>
        <div class="exabottom">
          <div class="bottoml">全年燃气总结：</div>
          <div class="bottomr">
            燃气监管由排名、区域、企业名称、经营类别、燃气事故(件)，隐患整治(次)，投诉处置(件)、考核得分、考核结果组成。
            共组织燃区隐患装箱排查、检查任务677次，燃气企业日常巡查344次；
            2021年度全县共处置367件燃气事故，事故办结率100%，平均办结时效24小时；共组织燃气隐患专项排查、检查任务256次，燃气企业日常巡查566次，整改765次安全隐患。共接到投诉271次，已经全部处置完成。
          </div>
        </div>
      </div>
    </div>
    <div class="exatwo">
      <div class="exatwobanner">
        <div style="font-size: 22px; margin-left: 5%">企业排名</div>
      </div>
      <div class="exatwoul">
        <div>
          <table class="table">
            <thead>
              <tr>
                <th>排名</th>
                <th>区域</th>
                <th>企业名称</th>
                <th>经营类别</th>
                <th>燃气事故(件)</th>
                <th>隐患整治(次)</th>
                <th>投诉处置(件)</th>
                <th>考核得分</th>
                <th>考核结果</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(user, index) in stu" :key="index + 1">
                <td>{{ index + 1 }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.type }}</td>
                <td>{{ user.num }}</td>
                <td>{{ user.price }}</td>
                <td>{{ user.yh }}</td>
                <td>{{ user.ts }}</td>
                <td>{{ user.kh }}</td>
                <td>{{ user.jg }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      user: { name: "", type: "", num: "", price: "" },
      stu: [
        {
          name: "河北省石家庄平山县",
          type: "中燃翔科",
          num: "管道燃气",
          price: "0件",
          yh: "50次",
          ts: "20次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "中诚燃气",
          num: "管道燃气",
          price: "0件",
          yh: "42次",
          ts: "10次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "敬业集团",
          num: "瓶装燃气",
          price: "0件",
          yh: "30次",
          ts: "20次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "盈德气体",
          num: "瓶装燃气",
          price: "0件",
          yh: "70次",
          ts: "18次",
          kh: 90,
          jg: "良好",
        },
        {
          name: "河北省石家庄平山县",
          type: "石家庄柏坡正元化肥有限公司",
          num: "瓶装燃气",
          price: "0件",
          yh: "46次",
          ts: "10次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "平山县顺诚燃气有限公司 -",
          num: "城镇燃气",
          price: "0件",
          yh: "50次",
          ts: "10次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "河北玺竑能源有限公司",
          num: "汽车加气",
          price: "0件",
          yh: "43次",
          ts: "25次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "石家庄新捷燃气运输有限公司",
          num: "瓶装燃气",
          price: "0件",
          yh: "71次",
          ts: "20次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "中裕燃气公司",
          num: "天然气经营",
          price: "0件",
          yh: "56次",
          ts: "14次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "石家庄华玉燃气有限公司汽车天然气加气站",
          num: "汽车加气",
          price: "0件",
          yh: "33次",
          ts: "20次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "河北天然气华建CNG加气站",
          num: "汽车加气",
          price: "0件",
          yh: "43次",
          ts: "29次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "顺诚燃气加气站",
          num: "汽车加气",
          price: "0件",
          yh: "54次",
          ts: "27次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "平山博闵加气站",
          num: "汽车加气",
          price: "0件",
          yh: "38次",
          ts: "16次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "平山县平安天然气有限公司",
          num: "汽车加气",
          price: "0件",
          yh: "54次",
          ts: "11次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "平山县烟堡村",
          num: "管道燃气",
          price: "0件",
          yh: "26次",
          ts: "10次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "平山县西石桥",
          num: "管道燃气",
          price: "0件",
          yh: "19次",
          ts: "11次",
          kh: 92,
          jg: "良好",
        },
        {
          name: "河北省石家庄平山县",
          type: "河北泽宏科技股份有限公司",
          num: "管道燃气",
          price: "0件",
          yh: "10次",
          ts: "0次",
          kh: 100,
          jg: "优秀",
        },
      ],
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = this.$echarts.init(
        document.getElementById("myChartpieone")
      );
      // 绘制图表
      myChart1.setOption({
        color: ["#5ff76a", "#1890ff"],
        grid: {
          bottom: "2%",
          containLabel: true,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["60%", "80%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            silent: true,
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
              normal: {
                show: true,
                formatter: "{c}分",
                position: "center",
                lineHight: 30,
                fontSize: 40,
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 15, name: "Search Engine" },
              { value: 85, name: "Direct" },
            ],
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.exa {
  width: 100%;
  height: 100%;
}
.exaone {
  width: 100%;
  height: 250px;
  background: url(../../assets/exa2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
}
@media (max-width: 1300px) {
  .exaone {
    overflow: hidden !important;
  }
  .exatop{
    margin-top:5px !important;
  }
  .bottomr{
    width: 100% !important; 
  }
}
.topleft {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 6% 0 4%;
}
.exaleft {
  width: 100px;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  font-size: 20px;
}
.exaright {
  width: 100px;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  font-size: 20px;
}
.exaline {
  width: 40px;
  height: 1px;
  background: #00c3f1;
  margin-top: 10px;
}
.topright {
  width: 60%;
  height: 100%;
  padding: 0 30px 0 0;
}
.exatop {
  text-align: right;
  margin-top: 15px;
}
.exabottom {
  width: 100%;
  padding: 10px 30px;
}
.bottoml {
  font-size: 20px;
  float: left;
}
.bottomr {
  width: 80%;
  height: 100px;
  overflow: auto;
  float: left;
}
.exatwo {
  width: 100%;
  height: 600px;
  margin-bottom: 10px;
  margin-top: 20px;
}
.exatwobanner {
  width: 92%;
  height: 35px;
  margin-left: 4%;
  background: url(../../assets/exa1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.exatwoul {
  width: 100%;
  height: 525px;
  overflow: auto;
  padding: 0 30px;
  margin-top: 25px;
}
.table {
  table-layout: fixed;
  border: none;
  border-collapse: collapse;
  background: white;
  text-align: center;
  margin-top: 10px;
  thead {
    tr {
      color: white;
      height: 50px;
      th {
        color: #383737;
        background: #fff;
        font-size: 20px;
        min-width: 100px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 3;
      }
    }
  }
  tbody {
    tr {
      height: 30px;
      color: black;
      td {
        width: 12%;
        font-size: 14px;
        position: -webkit-sticky;
        position: sticky;
      }
    }
    tr:nth-child(odd) {
      background: #ededed;
      color: #188df0;
    }
    tr:nth-child(even) {
      height: 40px;
    }
  }
}
</style>