<!-- 园区总览左 -->
|
<template>
|
<div class="containerw">
|
<div class="MainLeft1">
|
<div class="MainLeft11">
|
<div class="title">
|
<span>园区企业安全监管情况</span>
|
</div>
|
<div class="contaierSFRight221">
|
<span class="span1">
|
<span>一般隐患</span>
|
<span class="span11">
|
<span><img src="../../../assets/image/Right/safe/一般隐患.png"/></span>
|
<span>{{ YQAQYH.generalReportedNum }}</span>
|
</span>
|
</span>
|
<span class="span1">
|
<span>重大隐患</span>
|
<span class="span11">
|
<span><img src="../../../assets/image/Right/safe/重大隐患.png"/></span>
|
<span>{{ YQAQYH.seriouReportedNum }}</span>
|
</span>
|
</span>
|
<span class="span1">
|
<span>即将到期隐患</span>
|
<span class="span11">
|
<span><img src="../../../assets/image/Right/safe/即将到期隐患.png"/></span>
|
<span>{{ YQAQYH.sumAbarbeitungNum }}</span>
|
</span>
|
</span>
|
<span class="span1">
|
<span>隐患治理率</span>
|
<span class="span11">
|
<span><img src="../../../assets/image/Right/safe/隐患治理率.png"/></span>
|
<span>{{ parseInt(YQAQYH.ratio) }}</span>
|
</span>
|
</span>
|
|
</div>
|
<div class="contaierSFRight222" id="contaierSFRight222"></div>
|
<scrollplus></scrollplus>
|
</div>
|
<!-- <div class="MainLeft12">-->
|
<!-- <div class="MainLeft121">-->
|
<!-- <div class="title"><span>基础设施建设总览</span></div>-->
|
<!-- </div>-->
|
<!-- <div class="MainLeft122">-->
|
<!-- <div class="title">-->
|
<!-- <span>土地利用现状</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
<!-- <div class="MainLeft2">-->
|
<!-- <div class="titleC">-->
|
<!-- <span>园区管理组织架构</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
</template>
|
|
<script>
|
import {axios_post} from "@/until/request";
|
import scrollplus from "./scrollplus.vue"
|
|
export default {
|
components: {
|
scrollplus,
|
},
|
data() {
|
return {
|
YQAQYH: {},
|
|
};
|
},
|
mounted() {
|
this.GetYQAQJGState();
|
this.GetAQJGFL();
|
|
},
|
methods: {
|
//园区安全监管状况
|
GetYQAQJGState() {
|
axios_post("/safe/corpSafeSupervise").then(response => {
|
this.YQAQYH = response.data;
|
})
|
},
|
//安全监管分类统计
|
GetAQJGFL() {
|
axios_post("/safe/countHiddenDanger").then(response => {
|
let echartData = [];
|
let AllNumber = 0;
|
for (let i = 0; i < response.data.length; i++) {
|
let obj = {
|
name: response.data[i].type,
|
value: response.data[i].sumReportedNum,
|
}
|
AllNumber += response.data[i].sumReportedNum
|
echartData.push(obj);
|
}
|
console.log(response);
|
this.drawChart3(echartData, AllNumber);
|
})
|
|
|
},
|
drawChart3(echartData) {
|
|
this.myChart = this.$echarts.init(document.getElementById("contaierSFRight222"), null, {
|
renderer: "svg",
|
});
|
let bgColor = '#001037';
|
let title = '总量';
|
let colors = ['#38cafb', '#4caff9', '#4adeca', '#2aa7ee', '#0270f2', '#488cf7'];
|
var total = echartData.reduce((prev, curr) => prev + curr.value, 0);
|
let option = {
|
color: colors,
|
tooltip: {
|
trigger: "item",
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
series: [{
|
name: "风险预警",
|
type: "pie",
|
radius: ["50%", "70%"],
|
center: ["50%", "50%"],
|
roseType: "radius",
|
minShowLabelAngle: 70,
|
label: {
|
show: true,
|
|
normal: {
|
position: "outside",
|
textShadowColor: 'transparent',
|
shadowColor: 'transparent',
|
textBorderColor: 'transparent',
|
textShadowBlur: 0,
|
fontSize: 26,
|
color: "#FFFFFF",
|
formatter: params => {
|
return params.name + ":" + ((params.value / total) * 100).toFixed(2) +
|
"%";
|
}
|
}
|
},
|
labelLine: {
|
length: 10,
|
length2: 10,
|
smooth: true
|
},
|
data: echartData
|
}]
|
};
|
|
// 绘制图表
|
this.myChart.setOption(option);
|
//随窗口大小变化重置echarts大小
|
window.onresize = this.myChart.resize;
|
|
|
},
|
},
|
|
|
|
|
|
}
|
</script>
|
<style scoped="scoped" src="@/assets/css/dialog.css"></style>
|
<style lang="less" scoped="scoped">
|
.containerw {
|
height: 100%;
|
width: 84%;
|
display: flex;
|
flex-direction: column;
|
|
.MainLeft1 {
|
height: 62%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
|
// 左一图表样式
|
.MainLeft11 {
|
padding: 20px;
|
height: calc(100% - 40px);
|
width: 100%;
|
padding-left: 0;
|
|
|
.contaierSFRight221 {
|
height: 20%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
margin-top: 20px;
|
.span1{
|
border: 1px solid #0f4687;
|
background: -webkit-linear-gradient(
|
top, #b1ddeb, #0f4687
|
);
|
}
|
span {
|
width: 86%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
font-size: 32px;
|
color: #FFFFFF;
|
|
.span11 {
|
display: flex;
|
flex-direction: row;
|
|
span {
|
font-size: 42px;
|
font-family: Mytime;
|
}
|
|
}
|
|
}
|
|
}
|
|
.contaierSFRight222 {
|
|
height: 49%;
|
width: 100%;
|
}
|
}
|
|
.contaierSFRight222 {
|
|
height: 49%;
|
width: 100%;
|
}
|
|
|
|
// 左二图表样式
|
.MainLeft12 {
|
padding: 20px;
|
height: calc(100% - 40px);
|
width: 50%;
|
display: flex;
|
margin: auto;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
|
}
|
|
}
|
|
.MainLeft2 {
|
height: 35%;
|
width: 100%;
|
margin-top: 70px;
|
|
.MainLeft21 {
|
height: calc(100% - 92px);
|
width: 100%;
|
}
|
}
|
}
|
|
.title {
|
width: 100%;
|
height: 38px;
|
background-image: url(../../../assets/images/title.png);
|
background-size: 100% 100%;
|
font-family: MytitileName;
|
font-size: 24px;
|
display: flex;
|
align-items: center;
|
color: #98deff;
|
letter-spacing: 3px;
|
|
span {
|
width: 80%;
|
text-indent: 70px;
|
}
|
|
button {
|
height: 80%;
|
width: 20%;
|
font-size: 20px;
|
font-family: "microsoft yahei";
|
background-color: transparent;
|
color: #FFFFFF;
|
border: solid 1px #04A7DC;
|
background-color: #020919;
|
border-radius: 10px;
|
}
|
|
.button {
|
height: 80%;
|
width: 20%;
|
font-size: 20px;
|
font-family: "microsoft yahei";
|
background-color: transparent;
|
color: #000000;
|
border: solid 1px #04A7DC;
|
background-color: RGB(132, 206, 230);
|
border-radius: 10px;
|
}
|
}
|
|
.titleC {
|
width: 100%;
|
height: 44px;
|
background-image: url(../../../assets/images/titleC.png);
|
background-size: 100% 100%;
|
font-family: MytitileName;
|
font-size: 24px;
|
display: flex;
|
align-items: center;
|
color: #98deff;
|
text-indent: 70px;
|
letter-spacing: 3px;
|
|
span {
|
width: 74%;
|
height: 80%;
|
display: flex;
|
align-items: center;
|
|
}
|
|
button {
|
cursor: hand;
|
height: 80%;
|
width: 20%;
|
font-size: 20px;
|
font-family: "microsoft yahei";
|
background-color: transparent;
|
color: #FFFFFF;
|
border: solid 1px #04A7DC;
|
background-color: #020919;
|
border-radius: 10px;
|
}
|
|
.button {
|
height: 80%;
|
width: 20%;
|
font-size: 20px;
|
font-family: "microsoft yahei";
|
background-color: transparent;
|
color: #000000;
|
border: solid 1px #04A7DC;
|
background-color: RGB(132, 206, 230);
|
border-radius: 10px;
|
}
|
|
}
|
|
|
.MainLeft1 /deep/ .el-carousel__container {
|
height: 100%;
|
}
|
|
.MainLeft1 /deep/ .el-carousel__container {
|
height: 100%;
|
}
|
|
.MainLeft121,
|
.MainLeft122 {
|
width: 103%;
|
height: 50%;
|
|
}
|
|
|
</style>
|
