Skip to content

G
gassafety-progress
Commit 97d33688 authored by yaqizhang's avatar yaqizhang
Browse files
Options

考核评价页面

parent 92182f4f
Show whitespace changes
Inline Side-by-side
Showing with 292 additions and 0 deletions
gassafetyprogress-web/src/views/examine/index.vue 0 → 100644
View file @ 97d33688
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: '60%', height: '100%'}"></div>
<div class="exaright">
<div style="color: #188df0">3</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;">123件</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;">123次</span>，燃气企业日常巡查<span style="color: #ffbc00;font-size: 20px;">123次</span>，整改<span style="color: red;font-size: 20px;">123次</span>安全隐患。</div>
<div class="exatop">共寄到投诉<span style="color: #1c84c6;font-size: 20px;">123次</span>，已全部处置完成。</div>
<div class="exabottom">
<div class="bottoml">全年燃气总结：</div>
<div class="bottomr">鹅鹅饿鹅呃呃鹅鹅鹅鹅鹅饿鹅鹅饿饿呃呃鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅呃呃呃呃呃呃呃呃呃呃呃呃鹅鹅鹅鹅鹅鹅饿饿饿饿饿呃呃呃呃呃呃鹅鹅鹅鹅鹅鹅饿饿饿饿饿呃呃呃鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅呃呃呃呃呃呃呃呃呃呃呃呃鹅鹅鹅鹅鹅鹅饿饿饿饿饿呃鹅鹅鹅鹅鹅鹅饿饿饿饿饿饿饿饿饿鹅鹅鹅呃呃呃额饿饿饿饿饿饿饿饿鹅鹅鹅呃呃呃额 鹅鹅鹅饿呃呃呃鹅鹅鹅鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅</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':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '金屋秦皇半岛', 'type': '金屋秦皇半岛','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '和美紫晶花园', 'type': '和美紫晶花园','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '戴河水岸星城', 'type': '戴河水岸星城','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '金茂雪山语', 'type': '金茂雪山语','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '龙TOWN', 'type': '龙TOWN','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '润泽御府', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '盛达铂宫', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '幸福荷语墅', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '金茂雪山语', 'type': '金茂雪山语','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '和美紫晶花园', 'type': '和美紫晶花园','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '北京城建世华泊郡', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '和美紫晶花园', 'type': '和美紫晶花园','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '金屋秦皇半岛', 'type': '金屋秦皇半岛','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '金茂雪山语', 'type': '金茂雪山语','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '和美紫晶花园', 'type': '和美紫晶花园','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '北京城建世华泊郡', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '金茂雪山语', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '北京城建世华泊郡', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '金屋秦皇半岛', 'type': '金屋秦皇半岛','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '戴河水岸星城', 'type': '戴河水岸星城','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '龙TOWN', 'type': '龙TOWN','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '戴河水岸星城', 'type': '戴河水岸星城','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '龙TOWN', 'type': '龙TOWN','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '戴河水岸星城', 'type': '戴河水岸星城','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
{'name': '北京城建世华泊郡', 'type': '北京城建世华泊郡','num':'瓶装燃气','price':'123件','yh':'123次','ts':'123次','kh': 100,'jg':'优秀'},
],}
},
mounted () {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("myChartpieone"));
// 绘制图表
myChart1.setOption({
color:['#4eed0c','#2934ff'],
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' },
]
}
]
});
}
},
beforeDestroy() {
},
}
</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 100px;
}
.exaleft{
width: 20%;
height: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 80px;
font-size: 20px;
}
.exaright{
width: 20%;
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment