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>