安全隐患大屏
parent
cf6b67bf5a
commit
b22316d993
|
|
@ -25,8 +25,6 @@ const listCountForBG = (data) => {
|
|||
};
|
||||
|
||||
const listForBG = (data) => {
|
||||
data.pageSize = 5;
|
||||
data.pageNum = 1;
|
||||
return request({
|
||||
url: `/manage/problemmodify/listForBG`,
|
||||
method: "get",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,293 @@
|
|||
<template>
|
||||
<MyDialog v-if="show" v-model="show" width="60vw" height="75vh" class="safety-check-dialog">
|
||||
<template slot="title">
|
||||
{{ title }}
|
||||
</template>
|
||||
<div class="head-title-tab" style="padding: 10px 0px;">
|
||||
<div :class="nav == 6 ? 'head-nav active' : 'head-nav'" @click="doNav(6)">待整改{{ counts[0] }}</div>
|
||||
<div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">待复检{{ counts[1] }}</div>
|
||||
<div :class="nav == 7 ? 'head-nav active' : 'head-nav'" @click="doNav(7)">复检驳回{{ counts[2] }}</div>
|
||||
<div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">复检通过{{ counts[3] }}</div>
|
||||
<div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">整改超时{{ counts[4] }}</div>
|
||||
</div>
|
||||
<div class="scroll data-list" :key="dataKey">
|
||||
<div v-if="rows.length == 0" style="text-align: center;" class="div-no-data">
|
||||
<img src="images/nodata.png" style="width: 120px;">
|
||||
<div style="text-align: center;font-size: 12px;color:#888;">暂无数据</div>
|
||||
</div>
|
||||
<div v-for="(it, idx) in rows" :key="idx" class="data-item">
|
||||
<div class="left-image">
|
||||
<div class="left-header">
|
||||
<span class="sp-nav" :class="it.imgSel == 0 ? 'active' : ''" @click="it.imgSel = 0">整改前</span>
|
||||
<span class="sp-nav" :class="it.imgSel == 1 ? 'active' : ''" v-if="it.checkState == 4"
|
||||
@click="it.imgSel = 1">整改后</span>
|
||||
</div>
|
||||
<el-image class="img-sm" fit="scale-down" :src="it.smarkUrl" v-if="it.imgSel == 0"
|
||||
:preview-src-list="[it.smarkUrl]"></el-image>
|
||||
<el-image class="img-sm" fit="scale-down" :src="it.marksPicture" v-if="it.imgSel == 1"
|
||||
:preview-src-list="[it.marksPicture]"></el-image>
|
||||
</div>
|
||||
<div class="right-data">
|
||||
<el-col :span="12">
|
||||
<span class="sp-label">隐串类型:</span>
|
||||
<span class="sp-value">{{ getDict(it.dangerType) }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="sp-label">提交时间:</span>
|
||||
<span class="sp-value">{{ it.createTime }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="sp-label">提交人:</span>
|
||||
<span class="sp-value">{{ it.createUser }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="sp-label">整改人:</span>
|
||||
<span class="sp-value">{{ it.lordSentUser }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="sp-label">抄送人:</span>
|
||||
<span class="sp-value">{{ it.copySendUser }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="sp-label">截止时间:</span>
|
||||
<span class="sp-value">{{ it.nickedTime }}</span>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<span class="sp-label">隐患描述:</span>
|
||||
<span class="sp-value">{{ it.workParts }}</span>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<span class="sp-label">整改要求:</span>
|
||||
<span class="sp-value">{{ it.changeInfo }}</span>
|
||||
</el-col>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-pagination v-if="rows.length > 0" layout="total,prev, pager, next" @current-change="handleCurrentChange"
|
||||
:total="total" :page-size="pageSize" :current-page.sync="pageNum" class="bg-pagination"></el-pagination>
|
||||
</MyDialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
title: "安全隐患排查",
|
||||
prjInfo: {},
|
||||
nav: 6,
|
||||
problemType: null,
|
||||
counts: [],
|
||||
pageNum: 0,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
rows: [],
|
||||
dataKey: 0,
|
||||
dangerTypeDict: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCurrentChange(n) {
|
||||
this.pageNum = n;
|
||||
this.loadData();
|
||||
},
|
||||
getDict(n) {
|
||||
let tmps = this.dangerTypeDict.filter(d => d.value == n);
|
||||
return tmps.length > 0 ? tmps[0].label : '';
|
||||
},
|
||||
doNav(n) {
|
||||
this.nav = n;
|
||||
this.loadData();
|
||||
},
|
||||
showDialog(prj, n, dangerTypeDict) {
|
||||
this.dangerTypeDict = dangerTypeDict;
|
||||
this.problemType = n == 0 ? null : n;
|
||||
this.prjInfo = prj;
|
||||
this.title = ["安全隐患排查", "日常巡检", "周检", "月检", "转型检查"][n];
|
||||
this.pageNum = 0;
|
||||
this.show = true;
|
||||
this.getCount(n);
|
||||
this.loadData();
|
||||
},
|
||||
getCount(n) {
|
||||
let postData = {
|
||||
projectId: this.prjInfo.id,
|
||||
comId: this.prjInfo.comId,
|
||||
infoType: 0
|
||||
};
|
||||
if (n > 0) {
|
||||
postData.problemType = n;
|
||||
}
|
||||
this.$api.safety.listCountForBG(postData).then(d => {
|
||||
this.counts = d.data.filter(it => it.projectName != 'a').map(it => it.id)
|
||||
});
|
||||
},
|
||||
loadData() {
|
||||
let postData = {
|
||||
projectId: this.prjInfo.id,
|
||||
comId: this.prjInfo.comId,
|
||||
infoType: 0,
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize,
|
||||
problemType: this.problemType,
|
||||
projectName: this.nav
|
||||
};
|
||||
this.$api.safety.listForBG(postData).then(d => {
|
||||
this.total = d.total;
|
||||
this.rows = (d.rows || []).map(it => {
|
||||
it.imgSel = 0;
|
||||
return it;
|
||||
});
|
||||
this.dataKey++;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.safety-check-dialog {
|
||||
.popup-project-introduction-min {
|
||||
transform: translateY(20%);
|
||||
}
|
||||
|
||||
.bg-pagination {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.data-list {
|
||||
max-height: calc(75vh - 150px);
|
||||
overflow-y: auto;
|
||||
|
||||
.div-no-data {
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
background: #060f239d;
|
||||
padding: 10px;
|
||||
border: solid 1px #cccccc33;
|
||||
margin-top: 20px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.left-image {
|
||||
width: 160px;
|
||||
box-shadow: 1px 1px 10px 1px #ffffff3b;
|
||||
|
||||
.left-header {
|
||||
margin-bottom: 8px;
|
||||
background: #fff;
|
||||
|
||||
.sp-nav {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
color: #5B84EB;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background: #5B84EB;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.el-image {
|
||||
width: 160px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-data {
|
||||
flex-grow: 1;
|
||||
padding: 0px 20px;
|
||||
line-height: 30px;
|
||||
|
||||
.sp-label {
|
||||
color: #8BFFD2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||||
.safety-check-dialog {
|
||||
.bg-pagination {
|
||||
margin-top: 5px;
|
||||
|
||||
* {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
button,
|
||||
li {
|
||||
height: 28px !important;
|
||||
line-height: 28px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.data-list {
|
||||
max-height: calc(75vh - 180px);
|
||||
|
||||
.data-item {
|
||||
|
||||
|
||||
|
||||
.right-data {
|
||||
font-size: 18px;
|
||||
|
||||
.sp-label {
|
||||
color: #8BFFD2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2561px) {
|
||||
.safety-check-dialog {
|
||||
.bg-pagination {
|
||||
margin-top: 15px;
|
||||
|
||||
* {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
button,
|
||||
li {
|
||||
height: 32px !important;
|
||||
line-height: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.data-list {
|
||||
max-height: calc(75vh - 180px);
|
||||
|
||||
.data-item {
|
||||
|
||||
|
||||
|
||||
.right-data {
|
||||
font-size: 24px;
|
||||
|
||||
.sp-label {
|
||||
color: #8BFFD2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</el-col>
|
||||
</module-one-1-1>
|
||||
<module-one-2-1 label="日常巡检">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(1)" />
|
||||
<div class="div-item-chart">
|
||||
<div class="data-item-chart">
|
||||
<div class="total-info">{{ item1Data.total }}<br />
|
||||
|
|
@ -79,14 +79,14 @@
|
|||
</el-col>
|
||||
<el-col :span="18" class="h100">
|
||||
<module-one-1-3 label="隐患类别统计">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(0)" />
|
||||
<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="周检">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(2)" />
|
||||
<div class="div-item-chart">
|
||||
<div class="data-item-chart">
|
||||
<div class="total-info">{{ item2Data.total }}<br />
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
</el-col>
|
||||
<el-col :span="8">
|
||||
<module-one-2-1 label="月检">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(3)" />
|
||||
<div class="div-item-chart">
|
||||
<div class="data-item-chart">
|
||||
<div class="total-info">{{ item3Data.total }}<br />
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
</el-col>
|
||||
<el-col :span="8">
|
||||
<module-one-2-1 label="转型检查">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(4)" />
|
||||
<div class="div-item-chart">
|
||||
<div class="data-item-chart">
|
||||
<div class="total-info">{{ item4Data.total }}<br />
|
||||
|
|
@ -263,13 +263,19 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<safetyCheckDialog ref="dlg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import safetyCheckDialog from './safety/safetyCheckDialog.vue'
|
||||
export default {
|
||||
components: {
|
||||
safetyCheckDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dangerTypeDict: [],
|
||||
chartKey2: 0,
|
||||
itemChartKey1: 0,
|
||||
dpi: '',
|
||||
|
|
@ -333,10 +339,17 @@ export default {
|
|||
if (this.dpi != this.$dpi()) {
|
||||
this.dpi = this.$dpi();
|
||||
this.chartKey++;
|
||||
this.chartKey2++;
|
||||
}
|
||||
});
|
||||
this.$api.dict("ssp_proble_sub_type").then((d) => {
|
||||
this.dangerTypeDict = d || [];
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
showDlg(n) {
|
||||
this.$refs.dlg.showDialog(this.selProject, n, this.dangerTypeDict);
|
||||
},
|
||||
init() {
|
||||
if (!this.selProject) {
|
||||
return;
|
||||
|
|
@ -349,13 +362,13 @@ export default {
|
|||
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.listForBG({ ...postData, problemType: 1, infoType: 0, pageNum: 1, pageSize: 5 }),
|
||||
this.$api.safety.listCountForBG({ ...postData, problemType: 2, infoType: 0 }),
|
||||
this.$api.safety.listForBG({ ...postData, problemType: 2, infoType: 0 }),
|
||||
this.$api.safety.listForBG({ ...postData, problemType: 2, infoType: 0, pageNum: 1, pageSize: 5 }),
|
||||
this.$api.safety.listCountForBG({ ...postData, problemType: 3, infoType: 0 }),
|
||||
this.$api.safety.listForBG({ ...postData, problemType: 3, infoType: 0 }),
|
||||
this.$api.safety.listForBG({ ...postData, problemType: 3, infoType: 0, pageNum: 1, pageSize: 5 }),
|
||||
this.$api.safety.listCountForBG({ ...postData, problemType: 4, infoType: 0 }),
|
||||
this.$api.safety.listForBG({ ...postData, problemType: 4, infoType: 0 }),
|
||||
this.$api.safety.listForBG({ ...postData, problemType: 4, infoType: 0, pageNum: 1, pageSize: 5 }),
|
||||
];
|
||||
this.$api.http.all(ajaxs).then(res => {
|
||||
this.chart1Data = (res[0].data || []).map(it => {
|
||||
|
|
@ -422,6 +435,8 @@ export default {
|
|||
}
|
||||
},
|
||||
renderDataItem(n) {
|
||||
let is1K = this.$dpi() == "1K";
|
||||
let is2K = this.$dpi() == "2K";
|
||||
let objs = this._data['item' + n + 'Data'];
|
||||
let option = {
|
||||
color: ["#71BCC4", "#EEBE47", "#5EA85D", "#5B84EB", "#E76168"],
|
||||
|
|
@ -485,9 +500,9 @@ export default {
|
|||
type: "category",
|
||||
data: this.chart2Data.map(it => it.name.replace(/[“”]/g, "'")),
|
||||
axisLabel: {
|
||||
width: 60,
|
||||
width: is1K ? 60 : is2K ? 140 : 220,
|
||||
rotate: 15,
|
||||
fontSize: is1K ? 12 : is2K ? 14 : 24,
|
||||
fontSize: is1K ? 12 : is2K ? 14 : 22,
|
||||
overflow: "break",
|
||||
color: "#a2c8f9"
|
||||
},
|
||||
|
|
@ -726,7 +741,7 @@ export default {
|
|||
.list-item {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
border-top: solid 1px #ccc;
|
||||
border-top: solid 1px #cccccc88;
|
||||
padding-top: 10px;
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -735,12 +750,12 @@ export default {
|
|||
}
|
||||
|
||||
.img-sm {
|
||||
width: calc(100% - 200px);
|
||||
width: calc(100% - 300px);
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.list-item-info {
|
||||
width: 200px;
|
||||
width: 300px;
|
||||
font-size: 12px;
|
||||
padding-left: 10px;
|
||||
|
||||
|
|
@ -789,6 +804,101 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.div-item-chart {
|
||||
position: relative;
|
||||
height: 260px;
|
||||
|
||||
.data-item-chart {
|
||||
height: 260px;
|
||||
width: 260px;
|
||||
left: -30px;
|
||||
|
||||
.total-info {
|
||||
font-size: 24px;
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50% - 50px);
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
|
||||
.sp-label {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-overview-gif {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: calc(50% - 40px);
|
||||
left: calc(50% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
.div-item-info {
|
||||
width: calc(100% - 230px);
|
||||
right: -0px;
|
||||
top: 20px;
|
||||
|
||||
.item-info {
|
||||
line-height: 30px;
|
||||
|
||||
.sp-lend {
|
||||
margin-left: 8px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.sp-name {
|
||||
width: 90px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sp-value {
|
||||
margin-left: 8px;
|
||||
font-size: 32px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.sp-percent {
|
||||
font-size: 20px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.div-item-data {
|
||||
height: calc(100% - 260px);
|
||||
|
||||
.glr-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.div-item-list {
|
||||
height: calc(100% - 20px);
|
||||
|
||||
.list-item {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
|
||||
.img-sm {
|
||||
width: calc(100% - 400px);
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.list-item-info {
|
||||
width: 400px;
|
||||
font-size: 16px;
|
||||
padding-left: 10px;
|
||||
|
||||
.item-row {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2561px) {
|
||||
|
|
@ -823,7 +933,105 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.div-item-chart {
|
||||
position: relative;
|
||||
height: 320px;
|
||||
|
||||
.data-item-chart {
|
||||
height: 320px;
|
||||
width: 320px;
|
||||
left: -30px;
|
||||
|
||||
.total-info {
|
||||
font-size: 32px;
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50% - 60px);
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
|
||||
.sp-label {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-overview-gif {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: calc(50% - 40px);
|
||||
left: calc(50% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
.div-item-info {
|
||||
width: calc(100% - 300px);
|
||||
right: -0px;
|
||||
top: 20px;
|
||||
|
||||
.item-info {
|
||||
line-height: 40px;
|
||||
|
||||
.sp-lend {
|
||||
margin-left: 8px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.sp-name {
|
||||
width: 120px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.sp-value {
|
||||
margin-left: 8px;
|
||||
font-size: 36px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.sp-percent {
|
||||
font-size: 24px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.div-item-data {
|
||||
height: calc(100% - 320px);
|
||||
|
||||
.glr-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.div-item-list {
|
||||
height: calc(100% - 20px);
|
||||
|
||||
.list-item {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
|
||||
.img-sm {
|
||||
width: calc(100% - 600px);
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.list-item-info {
|
||||
width: 600px;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
|
||||
.item-row {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -456,6 +456,12 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|||
<if test="projectName==5">
|
||||
and a.checkState not in (4) and date(nickedTime) <= curdate()
|
||||
</if>
|
||||
<if test="projectName==6">
|
||||
and a.checkState in (0)
|
||||
</if>
|
||||
<if test="projectName==7">
|
||||
and a.checkState in (3)
|
||||
</if>
|
||||
<include refid="countUserWhere"></include>
|
||||
<if test="isNew!=null and isNew!=0">
|
||||
order by a.id desc
|
||||
|
|
|
|||
Loading…
Reference in New Issue