1133 lines
40 KiB
Vue
1133 lines
40 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div class="top bg-white margin-bottom_0">
|
||
<div class="topLeft whiteBlock2">
|
||
<div class="blockInner">
|
||
<!-- 数据统计 -->
|
||
<div class="box-between">
|
||
<div>检查统计</div>
|
||
<el-date-picker value-format="yyyy-MM-dd" v-model="examineTime" type="daterange"
|
||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini">
|
||
</el-date-picker>
|
||
</div>
|
||
<div class="show-pointer">
|
||
<div class="green-bg">
|
||
<div class="green-num">{{ examineInfo.totalNum }}</div>
|
||
<div>检查总数</div>
|
||
</div>
|
||
<div class="org-bg">
|
||
<div class="org-num">{{ examineInfo.dangerNum }}</div>
|
||
<div>隐患总数</div>
|
||
</div>
|
||
<div class="red-bg">
|
||
<div class="red-num">{{ examineInfo.greatFaultLevelNum }}</div>
|
||
<div>重大隐患</div>
|
||
</div>
|
||
<div class="red-bg2">
|
||
<div class="red-num">{{ examineInfo.overdueNotCloseNum }}</div>
|
||
<div>超期未闭合</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="topRight whiteBlock3">
|
||
<div class="blockInner">
|
||
<!-- 分包单位 -->
|
||
<div class="box-between">
|
||
<div>分包单位质量隐患统计</div>
|
||
|
||
<div class="flex">
|
||
<!-- <el-radio-group v-model="radio">
|
||
<el-radio :label="3">分包单位</el-radio>
|
||
<el-radio :label="6">队伍</el-radio>
|
||
<el-radio :label="9">班组</el-radio>
|
||
</el-radio-group> -->
|
||
<el-date-picker value-format="yyyy-MM-dd" v-model="enterpriseTime" type="daterange"
|
||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini">
|
||
</el-date-picker>
|
||
<!-- <div class="detail-right">详情 <i class="el-icon-arrow-right"></i></div> -->
|
||
</div>
|
||
</div>
|
||
<div style="position: relative;height:100%">
|
||
<div v-show="enterpriseList.length > 0" class="chart" ref="BarGraphChartOne"></div>
|
||
<div v-if="enterpriseList.length == 0">
|
||
<div class="placeholderBox">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="chart" ref="carTypeChart"></div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top bg-white top-plus">
|
||
<div class="topLeft whiteBlock4">
|
||
<div class="blockInner">
|
||
<!-- 数据统计 -->
|
||
<div class="box-between">
|
||
<div>风险统计</div>
|
||
</div>
|
||
<div class="identification-info">
|
||
<div>{{ examineInfo2.dangerNum }}</div>
|
||
<div class="flex">
|
||
<img width="108px" height="90px" src="@/assets/images/safetyAnalysis/riskIdentLeft.png"
|
||
alt="">
|
||
<div class="flex-center relative">
|
||
<div class="absolute">风险总数</div>
|
||
<img width="130px" height="90px"
|
||
src="@/assets/images/safetyAnalysis/riskIdentCenter.png" alt="">
|
||
</div>
|
||
<img width="108px" height="90px" src="@/assets/images/safetyAnalysis/riskIdentRight.png"
|
||
alt="">
|
||
</div>
|
||
<div class="identification-bottom">
|
||
<div class="bg-ff0 color-white">
|
||
<div>{{ examineInfo2.greatFaultLevelNum }}</div>
|
||
<div>重大风险</div>
|
||
</div>
|
||
<div class="bg-ff9 color-white">
|
||
<div>{{ examineInfo2.largerRiskNum }}</div>
|
||
<div>较大风险</div>
|
||
</div>
|
||
<div class="bg-fff">
|
||
<div>{{ examineInfo2.generalRiskNum }}</div>
|
||
<div>一般风险</div>
|
||
</div>
|
||
<div class="bg-00f color-white">
|
||
<div class="red-num">{{ examineInfo2.lowRiskNum }}</div>
|
||
<div>低风险</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="topLeft whiteBlock4">
|
||
<div class="blockInner">
|
||
<!-- 隐患分析 -->
|
||
<div class="box-between">
|
||
<div>隐患分析</div>
|
||
</div>
|
||
<div style="position: relative;height:100%">
|
||
<div class="chart" ref="radarCharts"></div>
|
||
<div v-if="!examineInfo2.investigateNum">
|
||
<div class="placeholderBox">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="topRight whiteBlock3">
|
||
<div class="blockInner">
|
||
<!-- 分包单位 -->
|
||
<div class="box-between">
|
||
<div>风险走势图（{{ riskCount }}{{ riskCount == '-' ? '' : '%' }}<span :style="riskCount > 0 ? 'color:green' : 'color:red'">{{
|
||
riskCount > 0 ? '↑' : '↓' }}</span>比上月（{{ riskName }}））</div>
|
||
<!-- <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||
end-placeholder="结束日期" size="mini">
|
||
</el-date-picker> -->
|
||
</div>
|
||
<div style="position: relative;height:100%">
|
||
<div class="chart" ref="lineCharts"></div>
|
||
<div v-if="riskList.length == 0">
|
||
<div class="placeholderBox">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="chart" ref="carTypeChart"></div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="topLeft whiteBlock3 bg-white">
|
||
<div class="blockInner">
|
||
<div class="box-between">
|
||
<div>隐患数量展示</div>
|
||
<el-date-picker value-format="yyyy-MM-dd" v-model="dangerLevelTime" type="daterange"
|
||
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini">
|
||
</el-date-picker>
|
||
</div>
|
||
<div class="flex sub-container_box">
|
||
<div class="sub-container">
|
||
<div>隐患超期未整改</div>
|
||
<div>重大隐患超期未整改<span>{{ this.dangerLevelInfo1.data ? this.dangerLevelInfo1.data[0].count :
|
||
'0'
|
||
}}</span>个，占比<span>{{ this.dangerLevelInfo1.data ?
|
||
this.dangerLevelInfo1.data[0].percent : '0' }}</span>%</div>
|
||
<div>严重隐患超期未整改<span>{{ this.dangerLevelInfo1.data ? this.dangerLevelInfo1.data[1].count :
|
||
'0'
|
||
}}</span>个，占比<span>{{ this.dangerLevelInfo1.data
|
||
? this.dangerLevelInfo1.data[1].percent : '0' }}</span>%</div>
|
||
<div class="chart" ref="annulusChartOne"></div>
|
||
</div>
|
||
<div class="sub-container">
|
||
<div>未销项隐患</div>
|
||
<div>重大隐患未销项<span>{{ this.dangerLevelInfo2.data ? this.dangerLevelInfo2.data[0].count : '0'
|
||
}}</span>个，占比<span>{{ this.dangerLevelInfo2.data ?
|
||
this.dangerLevelInfo2.data[0].percent : '0' }}</span>%</div>
|
||
<div>严重隐患未销项<span>{{ this.dangerLevelInfo2.data ? this.dangerLevelInfo2.data[0].count : '0'
|
||
}}</span>个，占比<span>{{ this.dangerLevelInfo2.data ?
|
||
this.dangerLevelInfo2.data[0].percent : '0' }}</span>%</div>
|
||
<div class="chart" ref="annulusChartTwo"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="topRight whiteBlock2 bg-white">
|
||
<div class="blockInner">
|
||
<!-- 责任区域问题统计 -->
|
||
<div class="box-between">
|
||
<div>责任区域问题统计TOP10</div>
|
||
<div class="flex align-center">
|
||
<div>
|
||
<el-radio-group v-model="inspectionRadio" size="small">
|
||
<el-radio-button label="">全部</el-radio-button>
|
||
<el-radio-button label="1">重大</el-radio-button>
|
||
<el-radio-button label="2">较大</el-radio-button>
|
||
<el-radio-button label="3">一般</el-radio-button>
|
||
<el-radio-button label="4">低</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<!-- <i class="el-icon-full-screen"></i> -->
|
||
</div>
|
||
</div>
|
||
<div class="sub-container_box">
|
||
<div style="position: relative;height:100%">
|
||
<div class="chart" ref="barGraphFallCharts"></div>
|
||
<div v-if="inspectionList.length == 0">
|
||
<div class="placeholderBox">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';
|
||
|
||
import {
|
||
getSelectQualityStatisticsNumApi,
|
||
getStatsByEnterpriseApi,
|
||
getRiskChartApi,
|
||
getCountDangerLevelApi,
|
||
getcountQualityInspectionRecordRegionApi
|
||
} from "@/assets/js/api/quality";
|
||
export default {
|
||
data() {
|
||
return {
|
||
pagInfo: {
|
||
pageNo: 1, //页数
|
||
pageSize: 10, //条数
|
||
total: 0, //总条数
|
||
},
|
||
carCompareList: [],
|
||
totalNum: {
|
||
innum: 0,
|
||
outnum: 0,
|
||
temporarynum: 0,
|
||
whitenum: 0,
|
||
},
|
||
value1: "",
|
||
radio: "",
|
||
radio3: "",
|
||
|
||
projectSn: "",
|
||
examineTime: "",
|
||
examineInfo: {
|
||
dangerNum: 0,
|
||
totalNum: 0,
|
||
greatFaultLevelNum: 0,
|
||
overdueNotCloseNum: 0,
|
||
},
|
||
examineInfo2: {
|
||
dangerNum :0,
|
||
generalRiskNum :0,
|
||
largerRiskNum :0,
|
||
greatFaultLevelNum :0,
|
||
lowRiskNum:0,
|
||
},
|
||
examineInfoFlag: true,
|
||
|
||
enterpriseTime: "",
|
||
enterpriseList: [],
|
||
riskList: [],
|
||
|
||
dangerLevelTime: "",
|
||
dangerLevelInfo1: {},
|
||
dangerLevelInfo2: {},
|
||
|
||
inspectionRadio: "",
|
||
inspectionList: [],
|
||
|
||
riskCount: 0,
|
||
riskName: "暂无",
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getRiskChart();
|
||
},
|
||
|
||
watch: {
|
||
examineTime: {
|
||
handler(newVal) {
|
||
console.log(newVal);
|
||
this.getSelectQualityStatisticsNum(newVal);
|
||
},
|
||
immediate: true,
|
||
},
|
||
"enterpriseTime": {
|
||
handler(newVal) {
|
||
console.log(newVal);
|
||
this.getStatsByEnterprise(newVal);
|
||
},
|
||
immediate: true,
|
||
},
|
||
dangerLevelTime: {
|
||
handler(newVal) {
|
||
console.log(newVal);
|
||
this.getCountDangerLevel(newVal, 0, 1);
|
||
this.getCountDangerLevel(newVal, 1, 0);
|
||
},
|
||
immediate: true,
|
||
},
|
||
inspectionRadio: {
|
||
handler(newVal) {
|
||
console.log(newVal);
|
||
this.getcountQualityInspectionRecordRegion();
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
methods: {
|
||
getSelectQualityStatisticsNum(time) {
|
||
// if(time && time.length > 0 && time && (time[0] == time[1])) {
|
||
// time[0] = time[0] + ' 24:00:00'
|
||
// time[1] = time[1] + ' 23:59:59'
|
||
// }
|
||
getSelectQualityStatisticsNumApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
inspectStartTime: time && time.length > 0 ? time[0] : "",
|
||
inspectEndTime: time && time.length > 0 ? time[1] : "",
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log('检查统计', res);
|
||
this.examineInfo = res.result;
|
||
if (this.examineInfoFlag) {
|
||
this.examineInfo2 = res.result;
|
||
this.radarCharts(this.$refs.radarCharts);
|
||
this.examineInfoFlag = false;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getStatsByEnterprise(time) {
|
||
getStatsByEnterpriseApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
pageNo: 1,
|
||
pageSize: 99999,
|
||
inspectTime_begin: time && time.length > 0 ? time[0] : "",
|
||
inspectTime_end: time && time.length > 0 ? time[1] : "",
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log('分包单位', res);
|
||
this.enterpriseList = res.result.records;
|
||
this.$nextTick(() => {
|
||
this.barGraphCharts(this.$refs.BarGraphChartOne);
|
||
})
|
||
}
|
||
});
|
||
},
|
||
// 风险走势图
|
||
getRiskChart() {
|
||
getRiskChartApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log('风险走势图', res);
|
||
|
||
this.riskList = res.result;
|
||
if (this.riskList.length > 0) {
|
||
// this.riskCount = this.riskList[this.riskList.length - 2].dangerNum == 0 ? (this.riskList[this.riskList.length - 1].dangerNum).toFixed(2) : ((this.riskList[this.riskList.length - 1].dangerNum - this.riskList[this.riskList.length - 2].dangerNum) / this.riskList[this.riskList.length - 2].dangerNum).toFixed(2);
|
||
this.riskCount = this.riskList[this.riskList.length - 1].monthlyBasis;
|
||
this.riskName = this.riskList[this.riskList.length - 1].lastMonth;
|
||
}
|
||
|
||
this.lineCharts(this.$refs.lineCharts);
|
||
// this.barGraphCharts(this.$refs.BarGraphChartOne);
|
||
}
|
||
});
|
||
},
|
||
// 隐患数量
|
||
getCountDangerLevel(time, isNotQualified, isOverdueRectification) {
|
||
getCountDangerLevelApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
isNotQualified: isNotQualified,
|
||
isOverdueRectification: isOverdueRectification,
|
||
inspectTime_begin: time && time.length > 0 ? time[0] : "",
|
||
inspectTime_end: time && time.length > 0 ? time[1] : "",
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log('隐患数量展示', res);
|
||
let arr = res.result.data.length > 0 ? res.result.data : [{ value: 0, name: '重大隐患' },
|
||
{ value: 0, name: '较大隐患' },
|
||
{ value: 0, name: '一般隐患' },
|
||
{ value: 0, name: '低隐患' },]
|
||
if (isOverdueRectification == 1) {
|
||
this.dangerLevelInfo1 = res.result;
|
||
this.annulusChart(this.$refs.annulusChartOne, arr, 0, res.result.count);
|
||
} else {
|
||
this.dangerLevelInfo2 = res.result;
|
||
this.annulusChart(this.$refs.annulusChartTwo, arr, 1, res.result.count);
|
||
}
|
||
// this.enterpriseList = res.result.records;
|
||
// this.barGraphCharts(this.$refs.BarGraphChartOne);
|
||
}
|
||
});
|
||
},
|
||
// 责任区域问题统计
|
||
getcountQualityInspectionRecordRegion(time) {
|
||
getcountQualityInspectionRecordRegionApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
enumType: this.inspectionRadio,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
console.log('责任区域问题统计', res);
|
||
|
||
this.inspectionList = res.result;
|
||
this.barGraphFallCharts(this.$refs.barGraphFallCharts);
|
||
// this.barGraphCharts(this.$refs.BarGraphChartOne);
|
||
}
|
||
});
|
||
},
|
||
SizeChange(val) {
|
||
this.pagInfo.pageSize = val;
|
||
this.getCarCompareList();
|
||
},
|
||
CurrentChange(val) {
|
||
this.pagInfo.pageNo = val;
|
||
this.getCarCompareList();
|
||
},
|
||
getCarCompareList() { },
|
||
// 柱状图
|
||
barGraphCharts(el) {
|
||
console.log(el);
|
||
let ageChart = echarts.init(el);
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，鼠标放上时变阴影，而不是线
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
},
|
||
xAxis: {
|
||
name: '分包单位', //X轴标题
|
||
type: 'category',
|
||
data: this.enterpriseList.map(item => item.enterpriseName),
|
||
//设置文本过长超出隐藏...表示
|
||
axisLabel: {
|
||
formatter: function (params) {
|
||
var val = "";
|
||
if (params.length > 4) {
|
||
val = params.substr(0, 4) + '...';
|
||
return val;
|
||
} else {
|
||
return params;
|
||
}
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: '数量', //Y轴标题
|
||
type: 'value',
|
||
axisTick: {
|
||
// 轴刻度
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
// 轴线
|
||
show: false,
|
||
color: '#268C8C',
|
||
},
|
||
nameTextStyle: {
|
||
padding: [0, 0, 0, -30] // 四个数字分别为上右下左与原位置距离
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
data: this.enterpriseList.map(item => item.totalNum),
|
||
type: 'bar',
|
||
barWidth: '20%',
|
||
color: "#268dff"
|
||
}
|
||
]
|
||
|
||
|
||
};
|
||
ageChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
ageChart.resize();
|
||
})
|
||
},
|
||
// 雷达图
|
||
radarCharts(el) {
|
||
let ageChart = echarts.init(el);
|
||
let option = {
|
||
legend: {
|
||
icon: 'roundRect',
|
||
data: ['质量检查'],
|
||
itemStyle: { //颜色 默认灰色
|
||
color: 'rgba(84,112,198,1)',
|
||
},
|
||
top: '10%',
|
||
},
|
||
radar: {
|
||
radius: 115,
|
||
center: ['55%', '60%'],
|
||
// shape: 'circle',
|
||
indicator: [
|
||
{
|
||
name: '排查记录',
|
||
max: parseInt(this.examineInfo2.investigateNum) + 10,
|
||
},
|
||
{
|
||
name: '未闭合',
|
||
max: parseInt(this.examineInfo2.notCloseNum) + 10,
|
||
},
|
||
{
|
||
name: '超期未关闭',
|
||
max: parseInt(this.examineInfo2.overdueNotCloseNum) + 10,
|
||
},
|
||
{
|
||
name: '待整改',
|
||
max: parseInt(this.examineInfo2.rectificationNum) + 10,
|
||
},
|
||
{
|
||
name: '待复查',
|
||
max: parseInt(this.examineInfo2.reviewNum) + 10,
|
||
},
|
||
{
|
||
name: '待核验',
|
||
max: parseInt(this.examineInfo2.verificationNum) + 10,
|
||
},
|
||
]
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
series: [
|
||
{
|
||
name: '质量检查',
|
||
type: 'radar',
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
data: [
|
||
{
|
||
value: [
|
||
this.examineInfo2.investigateNum,
|
||
this.examineInfo2.notCloseNum,
|
||
this.examineInfo2.overdueNotCloseNum,
|
||
this.examineInfo2.rectificationNum,
|
||
this.examineInfo2.reviewNum,
|
||
this.examineInfo2.verificationNum],
|
||
name: '质量检查',
|
||
itemStyle: { //颜色 默认灰色
|
||
color: 'rgba(84,112,198,1)',
|
||
},
|
||
},
|
||
]
|
||
}
|
||
]
|
||
};
|
||
ageChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
ageChart.resize();
|
||
})
|
||
},
|
||
// 折线图
|
||
lineCharts(el) {
|
||
let ageChart = echarts.init(el);
|
||
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
icon: 'roundRect',
|
||
top: "5%",
|
||
data: ['全部', '重大风险', '较大风险', '一般风险', '低风险']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '5%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
// toolbox: {
|
||
// feature: {
|
||
// saveAsImage: {}
|
||
// }
|
||
// },
|
||
xAxis: {
|
||
name: '月份', //X轴标题
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: this.riskList.map(item => item.yearMonth),
|
||
},
|
||
yAxis: {
|
||
name: '数量', //Y轴标题
|
||
type: 'value',
|
||
axisTick: {
|
||
// 轴刻度
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
// 轴线
|
||
show: true,
|
||
|
||
},
|
||
itemStyle: { //颜色 默认灰色
|
||
color: 'rgba(197,196,196,1)',
|
||
},
|
||
nameTextStyle: {
|
||
padding: [0, 0, 0, -30] // 四个数字分别为上右下左与原位置距离
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '全部',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: this.riskList.map(item => item.dangerNum),
|
||
itemStyle: { //颜色 默认灰色
|
||
color: 'rgba(5,193,179,1)',
|
||
},
|
||
symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
|
||
symbolSize: 5, //小圆点的大小
|
||
},
|
||
{
|
||
name: '重大风险',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: this.riskList.map(item => item.greatFaultLevelNum),
|
||
itemStyle: { //颜色 默认灰色
|
||
color: 'rgba(255,0,0,1)',
|
||
},
|
||
symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
|
||
symbolSize: 5, //小圆点的大小
|
||
},
|
||
{
|
||
name: '较大风险',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: this.riskList.map(item => item.largerRiskNum),
|
||
itemStyle: { //颜色 默认灰色
|
||
color: 'rgba(255,153,1,1)',
|
||
},
|
||
symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
|
||
symbolSize: 5, //小圆点的大小
|
||
},
|
||
{
|
||
name: '一般风险',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: this.riskList.map(item => item.generalRiskNum),
|
||
itemStyle: { //颜色 默认灰色
|
||
color: 'rgba(255,255,2,1)',
|
||
},
|
||
symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
|
||
symbolSize: 5, //小圆点的大小
|
||
},
|
||
{
|
||
name: '低风险',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: this.riskList.map(item => item.lowRiskNum),
|
||
itemStyle: { //颜色 默认灰色
|
||
color: 'rgba(0,0,255,1)',
|
||
},
|
||
symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
|
||
symbolSize: 5, //小圆点的大小
|
||
}
|
||
]
|
||
};
|
||
ageChart.setOption(option);
|
||
ageChart.on('mousemove', (params) => {
|
||
if(params.dataIndex == 0){
|
||
this.riskCount = 0;
|
||
this.riskName = "暂无";
|
||
return
|
||
}
|
||
// this.riskCount = this.riskList[params.dataIndex - 1].dangerNum == 0 ? (this.riskList[params.dataIndex].dangerNum).toFixed(2) : ((this.riskList[params.dataIndex].dangerNum - this.riskList[params.dataIndex - 1].dangerNum) / this.riskList[params.dataIndex - 1].dangerNum).toFixed(2);
|
||
this.riskCount = this.riskList[params.dataIndex].monthlyBasis;
|
||
this.riskName = this.riskList[params.dataIndex].lastMonth;
|
||
});
|
||
|
||
window.addEventListener("resize", () => {
|
||
ageChart.resize();
|
||
})
|
||
},
|
||
// 圆环图
|
||
annulusChart(el, data, flag, count) {
|
||
let ageChart = echarts.init(el);
|
||
let option = {
|
||
title: {
|
||
subtext: `${flag == 0 ? '超期未整改' : '未销项'}\n${count}个`,//副标题文本
|
||
left: 'center',
|
||
top: '40%',
|
||
subtextStyle: {
|
||
fontFamily: "微软雅黑",
|
||
fontSize: 16,
|
||
color: '#333333',
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (params) {
|
||
return params.value + '个' + params.name + "\n" + '占比' + params.percent + "%";
|
||
},
|
||
},
|
||
// legend: {
|
||
// top: '5%',
|
||
// left: 'center'
|
||
// },
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['40%', '60%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
// position: 'center',
|
||
position: 'outer',
|
||
alignTo: 'labelLine',
|
||
bleedMargin: 5,
|
||
color: "#333333",
|
||
formatter: function (params) {
|
||
return params.name.slice(0, 4) + "\n" + params.name.slice(4, params.name.length);
|
||
},
|
||
},
|
||
itemStyle: {
|
||
color: function (colors) {
|
||
var colorList = [
|
||
'#ff0000',
|
||
'#ffff02',
|
||
'#00f',
|
||
'#ff9901',
|
||
];
|
||
return colorList[colors.dataIndex];
|
||
}
|
||
},
|
||
avoidLabelOverlap:true,
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true,
|
||
// fontSize: 40,
|
||
// fontWeight: 'bold'
|
||
// }
|
||
// },
|
||
labelLine: {
|
||
show: true,
|
||
length: 15, // 指示线宽度
|
||
},
|
||
data: data.map(item => {
|
||
return {
|
||
value: item.count,
|
||
name: item.name
|
||
}
|
||
})
|
||
// [
|
||
// { value: 0, name: '重大隐患超期未整改' },
|
||
// { value: 735, name: '严重隐患超期未整改' },
|
||
// { value: 580, name: '其它隐患超期未整改' },
|
||
// { value: 484, name: '一般隐患超期未整改' },
|
||
// ]
|
||
}
|
||
]
|
||
};
|
||
ageChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
ageChart.resize();
|
||
})
|
||
},
|
||
// 柱状图 倒
|
||
barGraphFallCharts(el) {
|
||
console.log(el);
|
||
let ageChart = echarts.init(el);
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，鼠标放上时变阴影，而不是线
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '8%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
name: '数量', //X轴标题
|
||
type: 'value',
|
||
axisTick: {
|
||
// 轴刻度
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
// 轴线
|
||
show: false,
|
||
color: '#268C8C',
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: this.inspectionList.map(item => item.x),
|
||
axisTick: {
|
||
// 轴刻度
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
// 轴线
|
||
show: false,
|
||
color: '#268C8C',
|
||
},
|
||
//设置文本过长超出隐藏...表示
|
||
axisLabel: {
|
||
formatter: function (params) {
|
||
var val = "";
|
||
if (params.length > 5) {
|
||
val = params.substr(0, 5) + '...';
|
||
return val;
|
||
} else {
|
||
return params;
|
||
}
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: this.inspectionList.map(item => item.y),
|
||
type: 'bar',
|
||
barWidth: '35%',
|
||
color: "#268dff"
|
||
}
|
||
]
|
||
|
||
|
||
};
|
||
ageChart.setOption(option);
|
||
window.addEventListener("resize", () => {
|
||
ageChart.resize();
|
||
})
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||
background-color: #268dff;
|
||
}
|
||
|
||
.align-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.el-icon-full-screen {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.sub-container_box {
|
||
height: 100%;
|
||
border-top: 1px solid #dddddd;
|
||
margin-top: 5px
|
||
}
|
||
|
||
.sub-container {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.sub-container:first-child::before {
|
||
content: "";
|
||
height: 60%;
|
||
border-left: 1px dashed #dddddd;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%)
|
||
}
|
||
|
||
.sub-container>div:first-child {
|
||
margin-top: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.top-plus {
|
||
height: calc(60% - 7.5px) !important;
|
||
}
|
||
|
||
.identification-info {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.identification-info>div:first-child {
|
||
color: #fa2a31;
|
||
font-size: 24px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.identification-bottom {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.identification-bottom>div {
|
||
width: 48%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30px 0;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.show-pointer {
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-center {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.relative {
|
||
position: relative;
|
||
}
|
||
|
||
.absolute {
|
||
position: absolute;
|
||
}
|
||
|
||
.margin-bottom_0 {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.show-pointer>div {
|
||
height: 180px;
|
||
width: 150px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.show-pointer>div>div:first-child {
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.show-pointer>div>div:last-child {
|
||
font-size: 14px;
|
||
padding-top: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.green-bg {
|
||
background-color: #ecf8f7;
|
||
}
|
||
|
||
.org-bg {
|
||
background-color: #fcf8e8;
|
||
}
|
||
|
||
.red-bg {
|
||
background-color: #ffeded;
|
||
}
|
||
|
||
.red-bg2 {
|
||
background-color: rgb(207, 150, 195);
|
||
}
|
||
|
||
.green-num {
|
||
color: #45c0b9;
|
||
}
|
||
|
||
.org-num {
|
||
color: #e8bc21;
|
||
}
|
||
|
||
.red-bg {
|
||
color: #fa2a31;
|
||
}
|
||
|
||
.bg-ff9 {
|
||
background-color: #ff9901;
|
||
}
|
||
|
||
.bg-fff {
|
||
background-color: #ffff02;
|
||
}
|
||
|
||
.bg-ff0 {
|
||
background-color: #ff0000;
|
||
}
|
||
|
||
.bg-00f {
|
||
background: #00f;
|
||
}
|
||
|
||
.color-white {
|
||
color: white;
|
||
}
|
||
|
||
.bg-white {
|
||
background-color: white
|
||
}
|
||
|
||
.el-radio-group {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.el-radio {
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.detail-right {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 6px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
color: #268dff;
|
||
}
|
||
|
||
.blockInner {
|
||
padding: 15px;
|
||
height: calc(100% - 30px);
|
||
}
|
||
|
||
.whiteBlock {
|
||
float: left;
|
||
width: calc(50% - 7.5px);
|
||
}
|
||
|
||
.whiteBlock2 {
|
||
float: left;
|
||
width: calc(40% - 7.5px);
|
||
}
|
||
|
||
.whiteBlock3 {
|
||
float: left;
|
||
width: calc(60% - 7.5px);
|
||
}
|
||
|
||
.whiteBlock4 {
|
||
float: left;
|
||
width: calc(20% - 7.5px);
|
||
}
|
||
|
||
.chart {
|
||
height: calc(100% - 40px);
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.top {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.blockContent {
|
||
height: calc(100% - 40px);
|
||
}
|
||
|
||
.top,
|
||
.bottom {
|
||
height: calc(50% - 7.5px);
|
||
|
||
.whiteBlock,
|
||
.whiteBlock2,
|
||
.whiteBlock3,
|
||
.whiteBlock4 {
|
||
height: 100%;
|
||
|
||
&:first-child {
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.tables {
|
||
min-height: auto;
|
||
}
|
||
|
||
.numBox {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
width: 50%;
|
||
height: 40%;
|
||
|
||
.dataBox {
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.num {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
// color: #7C829E;
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.box-between {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
</style> |