数据统计
parent
21baf76da2
commit
b0eadd5899
@ -0,0 +1,65 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询行政区域统计
|
||||
export function getAdministeration() {
|
||||
return request({
|
||||
url: 'ehs/indexStatistics/getHiddenDangerSituationList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
// 查询所处位置统计
|
||||
export function getPlace() {
|
||||
return request({
|
||||
url: '/ehs/indexStatistics/getHiddenDangerSituationByEnterpriseNameList',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询上报隐患数量
|
||||
export function getDanger() {
|
||||
return request({
|
||||
url: '/ehs/indexStatistics/getHiddenDangerRankVoList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 查询隐患数据统计分析 柱
|
||||
export function getDangerList(year) {
|
||||
return request({
|
||||
url: '/ehs/indexStatistics/getHiddenDangerDataMapList?year='+ year,
|
||||
method: 'get',
|
||||
// params: year
|
||||
})
|
||||
}
|
||||
|
||||
// 查询隐患类型分析 环
|
||||
export function getDangerClass(data) {
|
||||
return request({
|
||||
url: '/ehs/indexStatistics/getHiddenDangerTypeMapList',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询行业领域统计 饼
|
||||
export function getTrade(){
|
||||
return request({
|
||||
url: '/ehs/indexStatistics/getEnterpriseMapList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 查询经济类型统计 饼
|
||||
export function getEconomics(){
|
||||
return request({
|
||||
url: 'ehs/indexStatistics/geteconomicTypeMapList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
// 查询企业规模统计 饼
|
||||
export function getScale(){
|
||||
return request({
|
||||
url: '/ehs/indexStatistics/getenterpriseScaleMapList',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,576 @@
|
||||
<template>
|
||||
<div class="dap">
|
||||
<div class="row">
|
||||
<div class="left_top bcg">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="行政区域统计" name="tj1">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
size="mini"
|
||||
header-align="center"
|
||||
align="center"
|
||||
height="400px"
|
||||
>
|
||||
<el-table-column prop="name" label="各区(县)" align="center">
|
||||
<!-- <template slot="date" slot-scope="scope">
|
||||
{{scope}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="注册企业数" align="center">
|
||||
<el-table-column
|
||||
prop="thisUnitNum"
|
||||
label="当月"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="totalUnitNum"
|
||||
label="累计"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="上报隐患数量" align="center">
|
||||
<el-table-column
|
||||
prop="thisReportNum"
|
||||
label="当月"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="totalReportNum"
|
||||
label="累计"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="已整改数量" align="center">
|
||||
<el-table-column prop="thisHaveNum" label="当月" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="totalHaveNum"
|
||||
label="累计"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="未整改数量" align="center">
|
||||
<el-table-column prop="thisNotNum" label="当月" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalNotNum" label="累计" align="center">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="整改率" align="center">
|
||||
<el-table-column prop="thisRate" label="当月" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalRate" label="累计" align="center">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="所处位置统计" name="tj2">
|
||||
<el-table
|
||||
:data="tableDat_1"
|
||||
size="mini"
|
||||
header-align="center"
|
||||
align="center"
|
||||
height="400px"
|
||||
>
|
||||
<el-table-column prop="name" label="各企业" align="center">
|
||||
<!-- <template slot="date" slot-scope="scope">
|
||||
{{scope}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
<el-table-column label="上报隐患数量" align="center">
|
||||
<el-table-column
|
||||
prop="thisReportNum"
|
||||
label="当月"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="totalReportNum"
|
||||
label="累计"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="已整改数量" align="center">
|
||||
<el-table-column prop="thisHaveNum" label="当月" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="totalHaveNum"
|
||||
label="累计"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="未整改数量" align="center">
|
||||
<el-table-column prop="thisNotNum" label="当月" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalNotNum" label="累计" align="center">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="整改率" align="center">
|
||||
<el-table-column prop="thisRate" label="当月" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalRate" label="累计" align="center">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<!-- <div class="right_top bcg" :style="$store.state.app.sidebar.opened ? 'width: 24%;': 'width: 32%;' "> -->
|
||||
<div class="right_top bcg">
|
||||
<h3>上报隐患数量排名</h3>
|
||||
<el-table
|
||||
ref="right_top"
|
||||
class="custom-table"
|
||||
highlight-current-row
|
||||
:data="tableData1"
|
||||
border
|
||||
height="396"
|
||||
>
|
||||
<el-table-column prop="areaName" label="区域"> </el-table-column>
|
||||
<el-table-column prop="reportHiddenNum" label="隐患数量"> </el-table-column>
|
||||
<el-table-column prop="index" type="index" label="排名"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="left_center bcg">
|
||||
<!-- <el-date-picker
|
||||
style="position: absolute; right: 100px; top: 30px; z-index: 999"
|
||||
v-model="year"
|
||||
type="year"
|
||||
placeholder="选择年"
|
||||
size="mini"
|
||||
>
|
||||
</el-date-picker> -->
|
||||
<div ref="left_center" class="tu"></div>
|
||||
</div>
|
||||
<div class="right_bom bcg">
|
||||
<div ref="right_bom" class="size"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="hyly bcg">
|
||||
<div ref="hyly" class="size"></div>
|
||||
</div>
|
||||
<div class="jjClass bcg">
|
||||
<div ref="jjClass" class="size"></div>
|
||||
</div>
|
||||
<div class="scale bcg">
|
||||
<div ref="scale" class="size"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
getAdministeration,
|
||||
getPlace,
|
||||
getDanger,
|
||||
getTrade,
|
||||
getEconomics,
|
||||
getScale,
|
||||
getDangerClass,
|
||||
getDangerList,
|
||||
} from "@/api/ehs/ehsExamples";
|
||||
export default {
|
||||
name: "dap",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
activeName: "tj1", //tab默认显示
|
||||
tableData: [], //table
|
||||
tableDat_1: null,
|
||||
tableData1: [],
|
||||
myChart1: null,
|
||||
myChart2: null,
|
||||
myChart3: null,
|
||||
myChart4: null,
|
||||
myChart5: null,
|
||||
year: "2023", //柱状图默认年份 参数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
async leftCenterinit() {
|
||||
let res = await getDangerList(this.year);
|
||||
let temp = res.data;
|
||||
let legendData = [];
|
||||
let dataSeries = [];
|
||||
let colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||||
|
||||
temp.map((item, index) => {
|
||||
legendData.push(item.name);
|
||||
dataSeries.push({
|
||||
name: item.name,
|
||||
type: "bar",
|
||||
stack: "Ad",
|
||||
itemStyle: {
|
||||
color: colors[index % colors.length],
|
||||
borderRadius: [5, 5, 2, 2],
|
||||
},
|
||||
// emphasis: {
|
||||
// focus: "series",
|
||||
// },
|
||||
data: item.data,
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
this.myChart1 = echarts.init(this.$refs.left_center);
|
||||
let option = {
|
||||
// color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], // 设置整体颜色主题/
|
||||
title: {
|
||||
text: "年度隐患数据统计分析",
|
||||
left: "left",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// top: "20px",
|
||||
// left: "100px",
|
||||
type: "plain",
|
||||
// data: ["重大隐患", "一般隐患"], // 设置图例文字内容
|
||||
data: legendData,
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
series: dataSeries,
|
||||
};
|
||||
option && this.myChart1.setOption(option);
|
||||
// myChart.resize();
|
||||
},
|
||||
async rightBominit() {
|
||||
let res = await getDangerClass();
|
||||
this.myChart2 = echarts.init(this.$refs.right_bom);
|
||||
let option = {
|
||||
title: { text: "隐患类型分析统计" },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
// top: "5%",
|
||||
bottom: "5%",
|
||||
right: "right",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "隐患类型数量",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: "center",
|
||||
// },
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: res.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && this.myChart2.setOption(option);
|
||||
// myChart.resize();
|
||||
},
|
||||
async hylyinit() {
|
||||
let res = await getTrade();
|
||||
this.myChart3 = echarts.init(this.$refs.hyly);
|
||||
let option = {
|
||||
title: { text: "行业领域统计数量" },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
// top: "5%",
|
||||
bottom: "5%",
|
||||
right: "right",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "行业统计数量",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: "center",
|
||||
// },
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: res.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
option && this.myChart3.setOption(option);
|
||||
// myChart.resize();
|
||||
},
|
||||
async jjClassInit() {
|
||||
let res = await getEconomics();
|
||||
this.myChart4 = echarts.init(this.$refs.jjClass);
|
||||
let option = {
|
||||
title: { text: "经济类型统计数量" },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
// top: "5%",
|
||||
bottom: "5%",
|
||||
right: "right",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "经济类型统计",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: "center",
|
||||
// },
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: res.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
option && this.myChart4.setOption(option);
|
||||
// myChart.resize();
|
||||
},
|
||||
async scaleInit() {
|
||||
let res = await getScale();
|
||||
this.myChart5 = echarts.init(this.$refs.scale);
|
||||
let option = {
|
||||
title: { text: "企业规模统计数量" },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
// top: "5%",
|
||||
bottom: "5%",
|
||||
right: "right",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "企业规模统计",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: "center",
|
||||
// },
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: "bold",
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: res.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
option && this.myChart5.setOption(option);
|
||||
// window.onresize = function() {
|
||||
// this.myChart5.resize();
|
||||
// };
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// 行政
|
||||
getAdministeration()
|
||||
.then((response) => {
|
||||
if (response.code == 200) this.tableData = response.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
// 根据位置
|
||||
getPlace()
|
||||
.then((response) => {
|
||||
if (response.code == 200) this.tableDat_1 = response.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
// 上报隐患
|
||||
getDanger()
|
||||
.then((response) => {
|
||||
if (response.code == 200) {
|
||||
response.data.map((item,index)=>{
|
||||
item.index = index+1
|
||||
})
|
||||
this.tableData1 = response.data;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// this.autoScroll();自动滚动
|
||||
this.leftCenterinit(); //隐患数据
|
||||
this.rightBominit(); //隐患类型
|
||||
this.hylyinit(); // 行业领域
|
||||
this.jjClassInit(); // 经济类型
|
||||
this.scaleInit(); // 企业规模
|
||||
},
|
||||
watch: {
|
||||
"$store.state.app.sidebar.opened"(value) {
|
||||
console.log(value);
|
||||
setTimeout(() => {
|
||||
this.myChart1 && this.myChart1.resize();
|
||||
this.myChart2 && this.myChart2.resize();
|
||||
this.myChart3 && this.myChart3.resize();
|
||||
this.myChart4 && this.myChart4.resize();
|
||||
// this.myChart5 && this.myChart5.dispose();
|
||||
this.myChart5 && this.myChart5.resize();
|
||||
}, 100);
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.dap {
|
||||
padding: 12px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
.bcg {
|
||||
padding: 15px 15px 15px 15px;
|
||||
background-color: #fff;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.left_top {
|
||||
min-width: 71%;
|
||||
}
|
||||
.right_top {
|
||||
/* width: 470px; */
|
||||
min-width: 25%;
|
||||
}
|
||||
.left_center {
|
||||
position: relative;
|
||||
flex: 2;
|
||||
}
|
||||
.right_bom {
|
||||
flex: 1;
|
||||
}
|
||||
.left_center .tu {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.size {
|
||||
min-width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.hyly {
|
||||
flex: 1;
|
||||
}
|
||||
.jjClass {
|
||||
flex: 1;
|
||||
}
|
||||
.scale {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue