505 lines
16 KiB
Vue
505 lines
16 KiB
Vue
|
<template>
|
||
|
|
<div class="project-safety-check main-page">
|
||
|
|
<el-col :span="6" class="h100">
|
||
|
|
<module-one-1-1 label="安全隐患排查" class="chart1-module">
|
||
|
|
<el-col :span="12" v-for="(it, idx) in chart1Data" :key="idx">
|
||
|
|
<div
|
||
|
|
class="equipment-list-min equipment-list-min_div quality-target-index-min quality-target-index-min_div">
|
||
|
|
|
||
|
|
<div class="czz-number-img czz-number-img-blue">
|
||
|
|
<svg-icon icon-class="notesearch"></svg-icon>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="equipment-list-data equipment-list-data_div_top">
|
||
|
|
<span>{{ it.name }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="equipment-list-data equipment-list-data_div_bottom">
|
||
|
|
<span class="sp-data">{{ it.value || 0 }}</span><span class="sp-unit">条</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</module-one-1-1>
|
||
|
|
<module-one-2-1 label="日常巡检">
|
||
|
|
<div class="div-item-chart">
|
||
|
|
<div class="data-item-chart">
|
||
|
|
<div class="total-info">{{ item1Data.total }}<br />
|
||
|
|
<span class="sp-label">问题总数</span>
|
||
|
|
</div>
|
||
|
|
<div class="chart-gif chart-overview-gif"></div>
|
||
|
|
<my-chart :key="itemChartKey1" id="project-safety-check-item1" width="100%" height="100%"
|
||
|
|
:render="o => renderDataItem1(1)"></my-chart>
|
||
|
|
</div>
|
||
|
|
{{ item1Data.infos }}
|
||
|
|
</div>
|
||
|
|
</module-one-2-1>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="18" class="h100">
|
||
|
|
<module-one-1-3 label="隐患类别统计">
|
||
|
|
<my-chart :key="chartKey2" id="project-safety-check-chart2" width="100%" height="100%"
|
||
|
|
:render="renderChart2"></my-chart>
|
||
|
|
</module-one-1-3>
|
||
|
|
<el-row class="el-right">
|
||
|
|
<el-col :span="8">
|
||
|
|
<module-one-2-1 label="周检"></module-one-2-1>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<module-one-2-1 label="月检"></module-one-2-1>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<module-one-2-1 label="转型检查"></module-one-2-1>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-col>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chartKey2: 0,
|
||
|
|
itemChartKey1: 0,
|
||
|
|
dpi: '',
|
||
|
|
selProject: null,
|
||
|
|
legendOpt1: {
|
||
|
|
icon: "rect",
|
||
|
|
textStyle: {
|
||
|
|
color: "#c3dbfd",
|
||
|
|
fontSize: 14,
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
color: "#c3dbfd",
|
||
|
|
padding: [0, 20, 0, 0],
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
color: "#4676FD"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
overviewText: '问题数',
|
||
|
|
chart1Data: [],
|
||
|
|
chart2Data: [],
|
||
|
|
item1Data: {
|
||
|
|
total: 0,
|
||
|
|
datas: [],
|
||
|
|
infos: [],
|
||
|
|
},
|
||
|
|
item2Data: {
|
||
|
|
total: 0,
|
||
|
|
datas: [],
|
||
|
|
infos: [],
|
||
|
|
},
|
||
|
|
item3Data: {
|
||
|
|
total: 0,
|
||
|
|
datas: [],
|
||
|
|
infos: [],
|
||
|
|
},
|
||
|
|
item4Data: {
|
||
|
|
total: 0,
|
||
|
|
datas: [],
|
||
|
|
infos: [],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
window.safetyApp = this;
|
||
|
|
this.$store.dispatch('ChangeNav', 301);
|
||
|
|
this.$bus.$on('projectChange', prj => {
|
||
|
|
this.selProject = prj;
|
||
|
|
this.init();
|
||
|
|
});
|
||
|
|
this.selProject = this.$store.getters.selProject;
|
||
|
|
this.init();
|
||
|
|
this.dpi = this.$dpi();
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
if (this.dpi != this.$dpi()) {
|
||
|
|
this.dpi = this.$dpi();
|
||
|
|
this.chartKey++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
if (!this.selProject) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let postData = {
|
||
|
|
projectId: this.selProject.id,
|
||
|
|
comId: this.selProject.comId
|
||
|
|
};
|
||
|
|
let ajaxs = [
|
||
|
|
this.$api.safety.groupByProblemType(postData),
|
||
|
|
this.$api.safety.groupByDangerType(postData),
|
||
|
|
this.$api.safety.listCountForBG({ ...postData, problemType: 1, infoType: 0 }),
|
||
|
|
this.$api.safety.listForBG({ ...postData, problemType: 1, infoType: 0 }),
|
||
|
|
this.$api.safety.listCountForBG({ ...postData, problemType: 2, infoType: 0 }),
|
||
|
|
this.$api.safety.listForBG({ ...postData, problemType: 2, infoType: 0 }),
|
||
|
|
this.$api.safety.listCountForBG({ ...postData, problemType: 3, infoType: 0 }),
|
||
|
|
this.$api.safety.listForBG({ ...postData, problemType: 3, infoType: 0 }),
|
||
|
|
this.$api.safety.listCountForBG({ ...postData, problemType: 4, infoType: 0 }),
|
||
|
|
this.$api.safety.listForBG({ ...postData, problemType: 4, infoType: 0 }),
|
||
|
|
];
|
||
|
|
this.$api.http.all(ajaxs).then(res => {
|
||
|
|
this.chart1Data = (res[0].data || []).map(it => {
|
||
|
|
return {
|
||
|
|
id: it.nickedInfo,
|
||
|
|
value: it.id,
|
||
|
|
name: it.problemType,
|
||
|
|
data: it
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.chart2Data = (res[1].data || []).map(it => {
|
||
|
|
return {
|
||
|
|
id: it.nickedInfo,
|
||
|
|
name: it.dangerType,
|
||
|
|
value1: it.id,
|
||
|
|
value2: it.comId,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.showChart1();//安全隐患排查
|
||
|
|
this.showChart2();//隐患类别统计
|
||
|
|
this.makeItemData(this.item1Data, res[2].data)
|
||
|
|
this.makeItemData(this.item2Data, res[4].data)
|
||
|
|
this.makeItemData(this.item3Data, res[6].data)
|
||
|
|
this.makeItemData(this.item4Data, res[8].data)
|
||
|
|
this.itemChartKey1++;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
showChart1(n) {
|
||
|
|
|
||
|
|
},
|
||
|
|
showChart2() {
|
||
|
|
this.chartKey2++;
|
||
|
|
},
|
||
|
|
makeItemData(item, res) {
|
||
|
|
let labels = ['问题总数', '待整改', '待复检', '复检驳回', '整改完成', '超时整改'];
|
||
|
|
item.total = res[0].id;
|
||
|
|
let total = res[0].id;
|
||
|
|
item.datas = [];
|
||
|
|
for (let i = 1; i < 5; i++) {
|
||
|
|
item.datas.push({
|
||
|
|
name: labels[i],
|
||
|
|
value: res[i].id
|
||
|
|
});
|
||
|
|
}
|
||
|
|
item.infos = [];
|
||
|
|
for (let i = 0; i < res.length; i++) {
|
||
|
|
item.infos.push({
|
||
|
|
name: labels[i],
|
||
|
|
value: res[i].id,
|
||
|
|
percent: total == 0 ? 0 : (res[i].id / total * 100.0).toFixed(1)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
renderDataItem1() {
|
||
|
|
let option = {
|
||
|
|
color: ["#71BCC4", "#EEBE47", "#5EA85D", "#5B84EB", "#E76168"],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['40%', '70%'],
|
||
|
|
padAngle: 1,
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 5
|
||
|
|
}, emphasis: {
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: this.item1Data.datas
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
console.log("--->", this.item1Data.datas)
|
||
|
|
return option;
|
||
|
|
},
|
||
|
|
renderChart2(opt) {
|
||
|
|
let is1K = this.$dpi() == "1K";
|
||
|
|
let is2K = this.$dpi() == "2K";
|
||
|
|
let option = {
|
||
|
|
grid: {
|
||
|
|
left: "5%",
|
||
|
|
right: "5%",
|
||
|
|
bottom: "0%",
|
||
|
|
top: "15%",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
valueFormatter: (v) => { return v },
|
||
|
|
textStyle: {
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: is1K ? '0%' : is2K ? '0%' : '0%',
|
||
|
|
left: 'center',
|
||
|
|
itemWidth: is1K ? 25 : is2K ? 30 : 40,
|
||
|
|
itemHeight: is1K ? 14 : is2K ? 20 : 20,
|
||
|
|
itemGap: is1K ? 20 : is2K ? 30 : 40,
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: "category",
|
||
|
|
data: this.chart2Data.map(it => it.name.replace(/[“”]/g, "'")),
|
||
|
|
axisLabel: {
|
||
|
|
width: 60,
|
||
|
|
rotate: 15,
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
||
|
|
overflow: "break",
|
||
|
|
color: "#a2c8f9"
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 0.1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: "value",
|
||
|
|
minInterval: 1,
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}',
|
||
|
|
color: "#2ec2b3",
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 0.1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '问题数',
|
||
|
|
type: "bar",
|
||
|
|
barGap: '0%',
|
||
|
|
barWidth: '20%',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: "top",
|
||
|
|
color: "#4DAAFC",
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: "#7ddff2",
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: { areaStyle: { type: "default", color: "#7ddff2", opacity: 0.1 } },
|
||
|
|
},
|
||
|
|
data: this.chart2Data.map(it => it.value1),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '待改数',
|
||
|
|
type: "bar",
|
||
|
|
barGap: '0%',
|
||
|
|
barWidth: '20%',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: "top",
|
||
|
|
color: "#4DAAFC",
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: "#006594",
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: { areaStyle: { type: "default", color: "#006594", opacity: 0.1 } },
|
||
|
|
},
|
||
|
|
data: this.chart2Data.map(it => it.value2),
|
||
|
|
}
|
||
|
|
],
|
||
|
|
};
|
||
|
|
return option;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.project-safety-check {
|
||
|
|
.screen-one-1-3 {
|
||
|
|
height: calc(33% - 20px) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-right {
|
||
|
|
height: calc(66% - 20px) !important;
|
||
|
|
|
||
|
|
.el-col-8 {
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.screen-one-2-1 {
|
||
|
|
margin: 0px 20px;
|
||
|
|
height: calc(100% - 0px) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart1-module {
|
||
|
|
.el-col-12 {
|
||
|
|
height: 50%;
|
||
|
|
width: 50%;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.czz-number-img {
|
||
|
|
display: flex;
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 30px !important;
|
||
|
|
height: 30px !important;
|
||
|
|
fill: #00aaff59 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_top {
|
||
|
|
span {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #cbdaff;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_bottom {
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
.sp-data {
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-unit {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #cbdaff;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-chart {
|
||
|
|
position: relative;
|
||
|
|
height: 230px;
|
||
|
|
|
||
|
|
.data-item-chart {
|
||
|
|
height: 230px;
|
||
|
|
width: 230px;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.total-info {
|
||
|
|
position: absolute;
|
||
|
|
font-size: 20px;
|
||
|
|
top: calc(50% - 20px);
|
||
|
|
left: calc(50% - 50px);
|
||
|
|
display: inline-block;
|
||
|
|
width: 100px;
|
||
|
|
height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
.sp-label {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-overview-gif {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
top: calc(50% - 40px);
|
||
|
|
left: calc(50% - 40px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1921px) and (max-width: 2560px) {
|
||
|
|
.chart1-module {
|
||
|
|
.el-col-12 {
|
||
|
|
.czz-number-img {
|
||
|
|
display: flex;
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 40px !important;
|
||
|
|
height: 40px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_top {
|
||
|
|
span {
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_bottom {
|
||
|
|
margin-top: 20px;
|
||
|
|
|
||
|
|
.sp-data {
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-unit {
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 2561px) {
|
||
|
|
.chart1-module {
|
||
|
|
.el-col-12 {
|
||
|
|
.czz-number-img {
|
||
|
|
display: flex;
|
||
|
|
width: 160px;
|
||
|
|
height: 160px;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 60px !important;
|
||
|
|
height: 60px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_top {
|
||
|
|
span {
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_bottom {
|
||
|
|
margin-top: 20px;
|
||
|
|
|
||
|
|
.sp-data {
|
||
|
|
font-size: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-unit {
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|