
<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>
        <el-tabs v-model="activeName" style="width: 360px;margin-left: 60px" @tab-click="handleClick">
          <!--<el-tab-pane label="2026年度" name="2026"></el-tab-pane>-->
          <el-tab-pane label="2025年度" name="2025"></el-tab-pane>
          <el-tab-pane label="2024年度" name="2024"></el-tab-pane>
          <el-tab-pane label="2023年度" name="2023"></el-tab-pane>
        </el-tabs>
      </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="(item, index) in rankingList" :key="index + 1">
                <td>{{index+1}}</td>
                <td>{{item.yearNum}}</td>
                <td>{{item.enterpriseName}}</td>
                <td>{{item.enterpriseType}}</td>
                <td>{{item.accidentNum}}</td>
                <td>{{item.hiddenNum}}</td>
                <td>{{item.complaintNum}}</td>
                <td>{{item.fraction}}</td>
                <td>{{item.result}}</td>
              </tr>
                <!--<tr v-for="(user, index) in stu" :key="index + 1">-->
                  <!--<td>{{index+1}}</td>-->
                  <!--<td>{{user.year}}</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>
  import { listRanking, getRanking, delRanking, addRanking, updateRanking, exportRanking } from "@/api/system/ranking";
  export default {
    components: {},

    data() {
      return{
        user:{name:'',type:'',num:'',price:''},
        rankingList:[],
        activeName:'2025',
        stu: [
          {
            name: "河北省石家庄平山县",
            type: "中诚燃气",
            num: "天燃气",
            year:'2025',
            price: "4.8",
            yh: "2.8",
            ts: "1.9",
            kh: 9.5,
            jg: "优秀",
          },
      ],
        queryParams: {
          pageNum: 1,
          pageSize: 100,
          yearNum: new Date().getFullYear()-1,
        },
      }
    },
    mounted () {
      this.getList();
      //this.drawLine();
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        this.queryParams.yearNum = this.activeName;
        this.getList();
      },
      getList() {
        this.loading = true;
        listRanking(this.queryParams).then(response => {
          this.rankingList = response.rows;
          if(response.rows.length<1){
            this.rankingList = [{
            }]
          }
      });
      },
      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{
    display: flex;
    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>
