1111
<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;">435次</span>,已全部处置完成。</div>
        <div class="exabottom">
          <div class="bottoml">全年燃气总结:</div>
          <div class="bottomr">
            燃气监管由排名、区域、企业名称、经营类别、燃气事故(件),隐患整治(次),投诉处置(件)、考核得分、考核结果组成。
            共组织燃区隐患装箱排查、检查任务677次,燃气企业日常巡查344次;
            2021年度全县共处置367件燃气事故,事故办结率100%,平均办结时效24小时;共组织燃气隐患专项排查、检查任务256次,燃气企业日常巡查566次,整改765次安全隐患。共接到投诉435次,已经全部处置完成。</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">
                  <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':'13件','yh':'134次','ts':'28次','kh': 100,'jg':'优秀'},
          {'name': '金屋秦皇半岛', 'type': '金屋秦皇半岛','num':'管道燃气','price':'12件','yh':'77次','ts':'46次','kh': 100,'jg':'优秀'},
          {'name': '和美紫晶花园', 'type': '和美紫晶花园','num':'汽车加气','price':'3件','yh':'180次','ts':'167次','kh': 100,'jg':'优秀'},
          {'name': '戴河水岸星城', 'type': '戴河水岸星城','num':'瓶装燃气','price':'23件','yh':'45次','ts':'152次','kh': 95,'jg':'良好'},
          {'name': '金茂雪山语', 'type': '金茂雪山语','num':'管道燃气','price':'8件','yh':'34次','ts':'67次','kh': 100,'jg':'优秀'},
          {'name': '龙TOWN', 'type': '龙TOWN','num':'汽车加气','price':'10件','yh':'10次','ts':'455次','kh': 100,'jg':'优秀'},
          {'name': '润泽御府', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'234件','yh':'563次','ts':'342次','kh': 100,'jg':'优秀'},
          {'name': '盛达铂宫', 'type': '北京城建世华泊郡','num':'管道燃气','price':'256件','yh':'234次','ts':'432次','kh': 100,'jg':'优秀'},
          {'name': '幸福荷语墅', 'type': '北京城建世华泊郡','num':'汽车加气','price':'34件','yh':'145次','ts':'134次','kh': 100,'jg':'优秀'},
          {'name': '金茂雪山语', 'type': '金茂雪山语','num':'瓶装燃气','price':'56件','yh':'233次','ts':'134次','kh': 100,'jg':'优秀'},
          {'name': '和美紫晶花园', 'type': '和美紫晶花园','num':'汽车加气','price':'25件','yh':'163次','ts':'173次','kh': 100,'jg':'优秀'},
          {'name': '北京城建世华泊郡', 'type': '北京城建世华泊郡','num':'管道燃气','price':'66件','yh':'145次','ts':'167次','kh': 100,'jg':'优秀'},
          {'name': '和美紫晶花园', 'type': '和美紫晶花园','num':'瓶装燃气','price':'156件','yh':'183次','ts':'109次','kh': 100,'jg':'优秀'},
          {'name': '金屋秦皇半岛', 'type': '金屋秦皇半岛','num':'汽车加气','price':'177件','yh':'194次','ts':'173次','kh': 100,'jg':'优秀'},
          {'name': '金茂雪山语', 'type': '金茂雪山语','num':'瓶装燃气','price':'89件','yh':'167次','ts':'178次','kh': 100,'jg':'优秀'},
          {'name': '和美紫晶花园', 'type': '和美紫晶花园','num':'管道燃气','price':'96件','yh':'193次','ts':'133次','kh': 89,'jg':'良好'},
          {'name': '北京城建世华泊郡', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'34件','yh':'163次','ts':'128次','kh': 100,'jg':'优秀'},
          {'name': '金茂雪山语', 'type': '北京城建世华泊郡','num':'汽车加气','price':'39件','yh':'125次','ts':'146次','kh': 100,'jg':'优秀'},
          {'name': '北京城建世华泊郡', 'type': '北京城建世华泊郡','num':'管道燃气','price':'69件','yh':'138次','ts':'167次','kh': 100,'jg':'优秀'},
          {'name': '金屋秦皇半岛', 'type': '金屋秦皇半岛','num':'瓶装燃气','price':'256件','yh':'189次','ts':'233次','kh': 100,'jg':'优秀'},
          {'name': '戴河水岸星城', 'type': '戴河水岸星城','num':'汽车加气','price':'95件','yh':'253次','ts':'343次','kh': 100,'jg':'优秀'},
          {'name': '龙TOWN', 'type': '龙TOWN','num':'瓶装燃气','price':'123件','yh':'91次','ts':'153次','kh': 100,'jg':'优秀'},
          {'name': '戴河水岸星城', 'type': '戴河水岸星城','num':'管道燃气','price':'77件','yh':'173次','ts':'165次','kh': 98,'jg':'良好'},
          {'name': '龙TOWN', 'type': '龙TOWN','num':'汽车加气','price':'123件','yh':'48次','ts':'345次','kh': 100,'jg':'优秀'},
          {'name': '戴河水岸星城', 'type': '戴河水岸星城','num':'汽车加气','price':'38件','yh':'91次','ts':'78次','kh': 100,'jg':'优秀'},
          {'name': '北京城建世华泊郡', 'type': '北京城建世华泊郡','num':'管道燃气','price':'357件','yh':'133次','ts':'179次','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;
  }
  .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>