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>0</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">2024年度全县共处置<span style="color: #b65bff;font-size: 20px;">0件</span>燃气事故,事故办结率<span style="color: red;font-size: 20px;">0%</span>,平均办结时效<span style="color: #1c84c6;font-size: 20px;">24小时</span>;</div>
        <div class="exatop">共组织燃气取暖专项排查、检查任务<span style="color: #2934ff;font-size: 20px;">0次</span>,燃气企业日常巡查<span style="color: #ffbc00;font-size: 20px;">280次</span>,整改<span style="color: red;font-size: 20px;">72次</span>安全隐患。</div>
        <div class="exatop">共寄到投诉<span style="color: #1c84c6;font-size: 20px;">30次</span>,已全部处置完成。</div>
        <div class="exabottom">
          <div class="bottoml">全年燃气总结:</div>
          <div class="bottomr">
            燃气监管由排名、区域、企业名称、经营类别、燃气事故(件),隐患整治(次),投诉处置(件)、考核得分、考核结果组成。
            共组织燃区隐患装箱排查、检查任务0次,燃气企业日常巡查0次;
            2024年度全县共处置0件燃气事故,事故办结率0%,平均办结时效24小时;共组织燃气隐患专项排查、检查任务0次,燃气企业日常巡查0次,整改0次安全隐患。共接到投诉0次,已经全部处置完成。</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: "42次",
          ts: "10次",
          kh: 100,
          jg: "优秀",
        },
        {
          name: "河北省石家庄平山县",
          type: "敬业集团",
          num: "瓶装燃气",
          price: "0件",
          yh: "30次",
          ts: "20次",
          kh: 100,
          jg: "优秀",
        },*/
        // {
        //   name: "河北省石家庄平山县",
        //   type: "盈德气体",
        //   num: "瓶装燃气",
        //   price: "1件",
        //   yh: "70次",
        //   ts: "18次",
        //   kh: 99,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "石家庄柏坡正元化肥有限公司",
        //   num: "瓶装燃气",
        //   price: "3件",
        //   yh: "46次",
        //   ts: "10次",
        //   kh: 99,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "平山县顺诚燃气有限公司 -",
        //   num: "城镇燃气",
        //   price: "3件",
        //   yh: "50次",
        //   ts: "10次",
        //   kh: 99,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "河北玺竑能源有限公司",
        //   num: "汽车加气",
        //   price: "4件",
        //   yh: "43次",
        //   ts: "25次",
        //   kh: 99,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "石家庄新捷燃气运输有限公司",
        //   num: "瓶装燃气",
        //   price: "5件",
        //   yh: "71次",
        //   ts: "20次",
        //   kh: 99,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "中裕燃气公司",
        //   num: "天然气经营",
        //   price: "3件",
        //   yh: "56次",
        //   ts: "14次",
        //   kh: 99,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "石家庄华玉燃气有限公司汽车天然气加气站",
        //   num: "汽车加气",
        //   price: "9件",
        //   yh: "33次",
        //   ts: "20次",
        //   kh: 98,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "河北天然气华建CNG加气站",
        //   num: "汽车加气",
        //   price: "5件",
        //   yh: "43次",
        //   ts: "29次",
        //   kh: 98,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "顺诚燃气加气站",
        //   num: "汽车加气",
        //   price: "6件",
        //   yh: "54次",
        //   ts: "27次",
        //   kh: 95,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "平山博闵加气站",
        //   num: "汽车加气",
        //   price: "8件",
        //   yh: "38次",
        //   ts: "16次",
        //   kh: 95,
        //   jg: "优秀",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "平山县平安天然气有限公司",
        //   num: "汽车加气",
        //   price: "3件",
        //   yh: "54次",
        //   ts: "11次",
        //   kh: 94,
        //   jg: "良好",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "平山县烟堡村",
        //   num: "管道燃气",
        //   price: "3件",
        //   yh: "26次",
        //   ts: "10次",
        //   kh: 93,
        //   jg: "良好",
        // },
        // {
        //   name: "河北省石家庄平山县",
        //   type: "平山县西石桥",
        //   num: "管道燃气",
        //   price: "10件",
        //   yh: "19次",
        //   ts: "11次",
        //   kh: 92,
        //   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: 0, name: 'Search Engine' },
                { value: 0, 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>