Merge remote-tracking branch 'origin/main' into main

main
13233904609 12 months ago
commit 98d5e47094

@ -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…
Cancel
Save