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>