|
|
|
|
@ -0,0 +1,309 @@
|
|
|
|
|
<!-- 园区企业 -->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="company_num_box">
|
|
|
|
|
<!-- 模块标题 -->
|
|
|
|
|
<div class="title">
|
|
|
|
|
<div class="img_box">
|
|
|
|
|
<img src="@/assets/safetyIndex/装饰009991.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title_text">园区企业</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 企业数量 -->
|
|
|
|
|
<div class="company_num_box_body">
|
|
|
|
|
<div class="company_num_box_body_item">
|
|
|
|
|
<div class="num_green">
|
|
|
|
|
{{ statisticsAlarmData.safeSum }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="type">平安企业</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="company_num_box_body_item">
|
|
|
|
|
<div class="num_orange">
|
|
|
|
|
{{ statisticsAlarmData.companySum }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="type">石化企业</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="company_num_box_body_item">
|
|
|
|
|
<div class="num_red">
|
|
|
|
|
{{ statisticsAlarmData.alarmSum }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="type">预警企业</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 剧毒、易制爆等四种企业展示 -->
|
|
|
|
|
<div class="company_danger">
|
|
|
|
|
<!-- 横向柱状图 -->
|
|
|
|
|
<div class="company_danger_charts" id="company_danger_charts"></div>
|
|
|
|
|
<!-- 占比 -->
|
|
|
|
|
<div class="company_proportion">
|
|
|
|
|
<div class="proportion_text">
|
|
|
|
|
<div class="proportion_text_item">占比</div>
|
|
|
|
|
<div class="proportion_text_item">占比</div>
|
|
|
|
|
<div class="proportion_text_item">占比</div>
|
|
|
|
|
<div class="proportion_text_item">占比</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="proportion_value">
|
|
|
|
|
<div class="proportion_value_item">{{ this.proportion_list[0] }}</div>
|
|
|
|
|
<div class="proportion_value_item">{{ this.proportion_list[1] }}</div>
|
|
|
|
|
<div class="proportion_value_item">{{ this.proportion_list[2] }}</div>
|
|
|
|
|
<div class="proportion_value_item">{{ this.proportion_list[3] }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import { statisticsAlarm, statisticsDanger } from "@/api/safetyIndex";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
export default {
|
|
|
|
|
name: "CompanyNum",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
statisticsAlarmData: {},
|
|
|
|
|
statisticsDangerData: [],
|
|
|
|
|
y_data: [], // y轴文字
|
|
|
|
|
chart_data: [], // chart表数据
|
|
|
|
|
proportion_list: [], // 存储公司占比的数组
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getStatisticsAlarm();
|
|
|
|
|
this.getstatisticsDanger();
|
|
|
|
|
},
|
|
|
|
|
// mounted() {
|
|
|
|
|
// this.init_charts();
|
|
|
|
|
// },
|
|
|
|
|
methods: {
|
|
|
|
|
// 平安企业，石化企业，预警企业数量
|
|
|
|
|
getStatisticsAlarm() {
|
|
|
|
|
statisticsAlarm().then((res) => {
|
|
|
|
|
this.statisticsAlarmData = res.data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 剧毒，易制爆等各类企业数量
|
|
|
|
|
getstatisticsDanger() {
|
|
|
|
|
statisticsDanger().then((res) => {
|
|
|
|
|
this.statisticsDangerData = res.data;
|
|
|
|
|
let all_company_num = this.statisticsDangerData
|
|
|
|
|
.map((item) => item.companyTypeSum)
|
|
|
|
|
.slice(0, 4);
|
|
|
|
|
let sum = 0;
|
|
|
|
|
for (let i = 0; i < all_company_num.length; i++) {
|
|
|
|
|
sum += all_company_num[i];
|
|
|
|
|
}
|
|
|
|
|
console.log(sum);
|
|
|
|
|
for (let i = 0; i < all_company_num.length; i++) {
|
|
|
|
|
this.proportion_list.push(
|
|
|
|
|
Math.round((Number(all_company_num[i]) / Number(sum)) * 10000) /
|
|
|
|
|
100 +
|
|
|
|
|
"%"
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
this.init_charts();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
init_charts() {
|
|
|
|
|
// 获取y轴数据
|
|
|
|
|
this.y_data = this.statisticsDangerData
|
|
|
|
|
.map((item) => item.companyTypeName)
|
|
|
|
|
.slice(0, 4);
|
|
|
|
|
// 获取chart表数据
|
|
|
|
|
this.chart_data = this.statisticsDangerData
|
|
|
|
|
.map((item) => item.companyTypeSum)
|
|
|
|
|
.slice(0, 4);
|
|
|
|
|
let danger_charts = document.getElementById("company_danger_charts");
|
|
|
|
|
let myChart = echarts.init(danger_charts);
|
|
|
|
|
let option = {
|
|
|
|
|
grid: {
|
|
|
|
|
top: "15%",
|
|
|
|
|
left: "3%",
|
|
|
|
|
right: "10%",
|
|
|
|
|
bottom: "3%",
|
|
|
|
|
containLabel: true, // 距离是包含坐标轴上的文字
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
splitLine: {
|
|
|
|
|
//去掉坐标轴的水平虚线指示线
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: this.y_data,
|
|
|
|
|
inverse: true, // 倒叙
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false, // 轴线
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false, // 刻度线
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: this.chart_data,
|
|
|
|
|
type: "bar",
|
|
|
|
|
showBackground: true,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: {
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#203e3a", // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#326e57", // 100% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
color: "rgba(180, 180, 180, 0.2)",
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "right",
|
|
|
|
|
color: "white",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.company_num_box {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
width: 24vw;
|
|
|
|
|
height: 28vh;
|
|
|
|
|
// border: 0.1px solid #495e70;
|
|
|
|
|
background: url("~@/assets/safetyIndex/homescreen03.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
/* 盒子标题 */
|
|
|
|
|
.title {
|
|
|
|
|
width: 24vw;
|
|
|
|
|
height: 2.7vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #d9e7ff;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
/* 图片盒子 */
|
|
|
|
|
.img_box {
|
|
|
|
|
width: 1.5vw;
|
|
|
|
|
height: 2.7vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
img {
|
|
|
|
|
width: 16px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title_text {
|
|
|
|
|
width: 4vw;
|
|
|
|
|
height: 2.7vh;
|
|
|
|
|
line-height: 2.7vh;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.company_num_box_body {
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
width: 24vw;
|
|
|
|
|
height: 8vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
.company_num_box_body_item {
|
|
|
|
|
width: 6vw;
|
|
|
|
|
height: 8vh;
|
|
|
|
|
background: url("~@/assets/safetyIndex/back002.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
.num_green {
|
|
|
|
|
width: 6vw;
|
|
|
|
|
height: 5vh;
|
|
|
|
|
line-height: 5vh;
|
|
|
|
|
color: #32d9ae;
|
|
|
|
|
font-size: 46px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.num_orange {
|
|
|
|
|
width: 6vw;
|
|
|
|
|
height: 5vh;
|
|
|
|
|
line-height: 5vh;
|
|
|
|
|
color: #ff6600;
|
|
|
|
|
font-size: 46px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.num_red {
|
|
|
|
|
width: 6vw;
|
|
|
|
|
height: 5vh;
|
|
|
|
|
line-height: 5vh;
|
|
|
|
|
color: #e11e1e;
|
|
|
|
|
font-size: 46px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.type {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
width: 6vw;
|
|
|
|
|
height: 3vh;
|
|
|
|
|
line-height: 3vh;
|
|
|
|
|
color: #d9e7ff;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.company_danger {
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
width: 24vw;
|
|
|
|
|
height: 15vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
.company_danger_charts {
|
|
|
|
|
width: 18vw;
|
|
|
|
|
height: 15vh;
|
|
|
|
|
}
|
|
|
|
|
.company_proportion {
|
|
|
|
|
width: 6vw;
|
|
|
|
|
margin-top: 2.5vh;
|
|
|
|
|
height: 10vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
.proportion_text {
|
|
|
|
|
width: 2vw;
|
|
|
|
|
height: 10vh;
|
|
|
|
|
// border: 0.1px solid #495e70;
|
|
|
|
|
.proportion_text_item {
|
|
|
|
|
width: 2vw;
|
|
|
|
|
height: 2.5vh;
|
|
|
|
|
line-height: 2.5vh;
|
|
|
|
|
color: #d9e7ff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.proportion_value {
|
|
|
|
|
width: 4vw;
|
|
|
|
|
height: 10vh;
|
|
|
|
|
// border: 0.1px solid #495e70;
|
|
|
|
|
.proportion_value_item {
|
|
|
|
|
width: 4vw;
|
|
|
|
|
height: 2.5vh;
|
|
|
|
|
line-height: 2.5vh;
|
|
|
|
|
color: #d9e7ff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
lukeyan
2 years ago
