安全隐患大屏
parent
4db7c1f325
commit
cf6b67bf5a
|
|
@ -60,6 +60,7 @@ body {
|
|||
height: 1080px;
|
||||
}
|
||||
.img-openwin {
|
||||
cursor: pointer;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
</el-col>
|
||||
</module-one-1-1>
|
||||
<module-one-2-1 label="日常巡检">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<div class="div-item-chart">
|
||||
<div class="data-item-chart">
|
||||
<div class="total-info">{{ item1Data.total }}<br />
|
||||
|
|
@ -28,26 +29,237 @@
|
|||
</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>
|
||||
:render="o => renderDataItem(1)"></my-chart>
|
||||
</div>
|
||||
<div class="div-item-info" :key="itemChartKey1">
|
||||
<div v-for="(it, idx) in item1Data.infos" :key="idx" :class="'item-info'">
|
||||
<span class="sp-name">{{ it.name }}</span>
|
||||
<span class="sp-lend" :class="'is-' + it.type"></span>
|
||||
<span class="sp-value led-number">{{ it.value }}</span>
|
||||
<span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item-data">
|
||||
<div class="glr-title">最新提交</div>
|
||||
<div class="div-item-list scroll">
|
||||
<div v-for="(it, idx) in item1Data.items" :key="idx" class="list-item">
|
||||
<el-image class="img-sm" fit="scale-down" :src="it.smarkUrl"
|
||||
:preview-src-list="[it.smarkUrl]"></el-image>
|
||||
<div class="list-item-info">
|
||||
<div class="item-row">
|
||||
<span class="sp-label">提交人:</span>
|
||||
<span class="sp-data">{{ it.createUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">整改人:</span>
|
||||
<span class="sp-data">{{ it.lordSentUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">复检人:</span>
|
||||
<span class="sp-data">{{ it.recheckSendUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">隐患描述:</span>
|
||||
<span class="sp-data">{{ it.workParts }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">整改要求:</span>
|
||||
<span class="sp-data">{{ it.changeInfo }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">状态:</span>
|
||||
<span class="sp-data">{{ getStatus(it.checkState) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ item1Data.infos }}
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
<el-col :span="18" class="h100">
|
||||
<module-one-1-3 label="隐患类别统计">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<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>
|
||||
<module-one-2-1 label="周检">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<div class="div-item-chart">
|
||||
<div class="data-item-chart">
|
||||
<div class="total-info">{{ item2Data.total }}<br />
|
||||
<span class="sp-label">问题总数</span>
|
||||
</div>
|
||||
<div class="chart-gif chart-overview-gif"></div>
|
||||
<my-chart :key="itemChartKey1" id="project-safety-check-item2" width="100%"
|
||||
height="100%" :render="o => renderDataItem(2)"></my-chart>
|
||||
</div>
|
||||
<div class="div-item-info" :key="itemChartKey1">
|
||||
<div v-for="(it, idx) in item2Data.infos" :key="idx" :class="'item-info'">
|
||||
<span class="sp-name">{{ it.name }}</span>
|
||||
<span class="sp-lend" :class="'is-' + it.type"></span>
|
||||
<span class="sp-value led-number">{{ it.value }}</span>
|
||||
<span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="div-item-data">
|
||||
<div class="glr-title">最新提交</div>
|
||||
<div class="div-item-list scroll">
|
||||
<div v-for="(it, idx) in item2Data.items" :key="idx" class="list-item">
|
||||
<el-image class="img-sm" fit="scale-down" :src="it.smarkUrl"
|
||||
:preview-src-list="[it.smarkUrl]"></el-image>
|
||||
<div class="list-item-info">
|
||||
<div class="item-row">
|
||||
<span class="sp-label">提交人:</span>
|
||||
<span class="sp-data">{{ it.createUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">整改人:</span>
|
||||
<span class="sp-data">{{ it.lordSentUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">复检人:</span>
|
||||
<span class="sp-data">{{ it.recheckSendUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">隐患描述:</span>
|
||||
<span class="sp-data">{{ it.workParts }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">整改要求:</span>
|
||||
<span class="sp-data">{{ it.changeInfo }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">状态:</span>
|
||||
<span class="sp-data">{{ getStatus(it.checkState) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<module-one-2-1 label="月检"></module-one-2-1>
|
||||
<module-one-2-1 label="月检">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<div class="div-item-chart">
|
||||
<div class="data-item-chart">
|
||||
<div class="total-info">{{ item3Data.total }}<br />
|
||||
<span class="sp-label">问题总数</span>
|
||||
</div>
|
||||
<div class="chart-gif chart-overview-gif"></div>
|
||||
<my-chart :key="itemChartKey1" id="project-safety-check-item3" width="100%"
|
||||
height="100%" :render="o => renderDataItem(3)"></my-chart>
|
||||
</div>
|
||||
<div class="div-item-info" :key="itemChartKey1">
|
||||
<div v-for="(it, idx) in item3Data.infos" :key="idx" :class="'item-info'">
|
||||
<span class="sp-name">{{ it.name }}</span>
|
||||
<span class="sp-lend" :class="'is-' + it.type"></span>
|
||||
<span class="sp-value led-number">{{ it.value }}</span>
|
||||
<span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="div-item-data">
|
||||
<div class="glr-title">最新提交</div>
|
||||
<div class="div-item-list scroll">
|
||||
<div v-for="(it, idx) in item3Data.items" :key="idx" class="list-item">
|
||||
<el-image class="img-sm" fit="scale-down" :src="it.smarkUrl"
|
||||
:preview-src-list="[it.smarkUrl]"></el-image>
|
||||
<div class="list-item-info">
|
||||
<div class="item-row">
|
||||
<span class="sp-label">提交人:</span>
|
||||
<span class="sp-data">{{ it.createUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">整改人:</span>
|
||||
<span class="sp-data">{{ it.lordSentUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">复检人:</span>
|
||||
<span class="sp-data">{{ it.recheckSendUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">隐患描述:</span>
|
||||
<span class="sp-data">{{ it.workParts }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">整改要求:</span>
|
||||
<span class="sp-data">{{ it.changeInfo }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">状态:</span>
|
||||
<span class="sp-data">{{ getStatus(it.checkState) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<module-one-2-1 label="转型检查"></module-one-2-1>
|
||||
<module-one-2-1 label="转型检查">
|
||||
<img src="images/icon2001.png" class="img-openwin" />
|
||||
<div class="div-item-chart">
|
||||
<div class="data-item-chart">
|
||||
<div class="total-info">{{ item4Data.total }}<br />
|
||||
<span class="sp-label">问题总数</span>
|
||||
</div>
|
||||
<div class="chart-gif chart-overview-gif"></div>
|
||||
<my-chart :key="itemChartKey1" id="project-safety-check-item4" width="100%"
|
||||
height="100%" :render="o => renderDataItem(3)"></my-chart>
|
||||
</div>
|
||||
<div class="div-item-info" :key="itemChartKey1">
|
||||
<div v-for="(it, idx) in item4Data.infos" :key="idx" :class="'item-info'">
|
||||
<span class="sp-name">{{ it.name }}</span>
|
||||
<span class="sp-lend" :class="'is-' + it.type"></span>
|
||||
<span class="sp-value led-number">{{ it.value }}</span>
|
||||
<span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="div-item-data">
|
||||
<div class="glr-title">最新提交</div>
|
||||
<div class="div-item-list scroll">
|
||||
<div v-for="(it, idx) in item4Data.items" :key="idx" class="list-item">
|
||||
<el-image class="img-sm" fit="scale-down" :src="it.smarkUrl"
|
||||
:preview-src-list="[it.smarkUrl]"></el-image>
|
||||
<div class="list-item-info">
|
||||
<div class="item-row">
|
||||
<span class="sp-label">提交人:</span>
|
||||
<span class="sp-data">{{ it.createUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">整改人:</span>
|
||||
<span class="sp-data">{{ it.lordSentUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">复检人:</span>
|
||||
<span class="sp-data">{{ it.recheckSendUser }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">隐患描述:</span>
|
||||
<span class="sp-data">{{ it.workParts }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">整改要求:</span>
|
||||
<span class="sp-data">{{ it.changeInfo }}</span>
|
||||
</div>
|
||||
<div class="item-row">
|
||||
<span class="sp-label">状态:</span>
|
||||
<span class="sp-data">{{ getStatus(it.checkState) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</module-one-2-1>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
|
@ -85,21 +297,25 @@ export default {
|
|||
total: 0,
|
||||
datas: [],
|
||||
infos: [],
|
||||
items: [],
|
||||
},
|
||||
item2Data: {
|
||||
total: 0,
|
||||
datas: [],
|
||||
infos: [],
|
||||
items: [],
|
||||
},
|
||||
item3Data: {
|
||||
total: 0,
|
||||
datas: [],
|
||||
infos: [],
|
||||
items: [],
|
||||
},
|
||||
item4Data: {
|
||||
total: 0,
|
||||
datas: [],
|
||||
infos: [],
|
||||
items: [],
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -161,9 +377,13 @@ export default {
|
|||
this.showChart1();//安全隐患排查
|
||||
this.showChart2();//隐患类别统计
|
||||
this.makeItemData(this.item1Data, res[2].data)
|
||||
this.item1Data.items = res[3].rows;
|
||||
this.makeItemData(this.item2Data, res[4].data)
|
||||
this.item2Data.items = res[5].rows;
|
||||
this.makeItemData(this.item3Data, res[6].data)
|
||||
this.item3Data.items = res[7].rows;
|
||||
this.makeItemData(this.item4Data, res[8].data)
|
||||
this.item4Data.items = res[9].rows;
|
||||
this.itemChartKey1++;
|
||||
});
|
||||
},
|
||||
|
|
@ -173,6 +393,13 @@ export default {
|
|||
showChart2() {
|
||||
this.chartKey2++;
|
||||
},
|
||||
getStatus(s) {
|
||||
let checkStates = [{ value: "0", label: '待整改' }, { value: "1", label: '待复检' },
|
||||
{ value: "3", label: '复检驳回' },
|
||||
{ value: "4", label: '复检通过' }];
|
||||
let objs = checkStates.filter(it => it.value == s);
|
||||
return objs.length > 0 ? objs[0].label : '';
|
||||
},
|
||||
makeItemData(item, res) {
|
||||
let labels = ['问题总数', '待整改', '待复检', '复检驳回', '整改完成', '超时整改'];
|
||||
item.total = res[0].id;
|
||||
|
|
@ -189,11 +416,13 @@ export default {
|
|||
item.infos.push({
|
||||
name: labels[i],
|
||||
value: res[i].id,
|
||||
type: res[i].projectName,
|
||||
percent: total == 0 ? 0 : (res[i].id / total * 100.0).toFixed(1)
|
||||
});
|
||||
}
|
||||
},
|
||||
renderDataItem1() {
|
||||
renderDataItem(n) {
|
||||
let objs = this._data['item' + n + 'Data'];
|
||||
let option = {
|
||||
color: ["#71BCC4", "#EEBE47", "#5EA85D", "#5B84EB", "#E76168"],
|
||||
series: [
|
||||
|
|
@ -216,11 +445,10 @@ export default {
|
|||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.item1Data.datas
|
||||
data: objs.datas
|
||||
}
|
||||
]
|
||||
};
|
||||
console.log("--->", this.item1Data.datas)
|
||||
return option;
|
||||
},
|
||||
renderChart2(opt) {
|
||||
|
|
@ -405,7 +633,8 @@ export default {
|
|||
height: 230px;
|
||||
width: 230px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
|
||||
.total-info {
|
||||
position: absolute;
|
||||
|
|
@ -430,6 +659,101 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.div-item-info {
|
||||
display: inline-block;
|
||||
width: calc(100% - 180px);
|
||||
right: -0px;
|
||||
top: 20px;
|
||||
position: absolute;
|
||||
|
||||
.item-info {
|
||||
line-height: 30px;
|
||||
|
||||
.sp-lend {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
|
||||
&.is-b {
|
||||
background-color: #71BCC4;
|
||||
}
|
||||
|
||||
&.is-c {
|
||||
background-color: #EEBE47;
|
||||
}
|
||||
|
||||
&.is-d {
|
||||
background-color: #5EA85D;
|
||||
}
|
||||
|
||||
&.is-e {
|
||||
background-color: #5B84EB;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-name {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.sp-value {
|
||||
margin-left: 8px;
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.sp-percent {
|
||||
margin-left: 8px;
|
||||
color: #5B84EB;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.div-item-data {
|
||||
height: calc(100% - 230px);
|
||||
|
||||
.div-item-list {
|
||||
height: calc(100% - 20px);
|
||||
overflow-y: auto;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
border-top: solid 1px #ccc;
|
||||
padding-top: 10px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.img-sm {
|
||||
width: calc(100% - 200px);
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.list-item-info {
|
||||
width: 200px;
|
||||
font-size: 12px;
|
||||
padding-left: 10px;
|
||||
|
||||
.item-row {
|
||||
line-height: 24px;
|
||||
|
||||
.sp-label {
|
||||
color: #8BFFD2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1921px) and (max-width: 2560px) {
|
||||
|
|
|
|||
|
|
@ -253,8 +253,8 @@ let data = reactive({
|
|||
]
|
||||
},
|
||||
checkStates: [{ value: "0", label: '待整改' }, { value: "1", label: '待复检' },
|
||||
{ value: "2", label: '复检驳回' },
|
||||
{ value: "3", label: '复检通过' }]
|
||||
{ value: "3", label: '复检驳回' },
|
||||
{ value: "4", label: '复检通过' }]
|
||||
});
|
||||
const { step2Form, step2Rules, step3Form, step3Rules } = toRefs(data);
|
||||
function validateStep2Images(rule, value, callback) {
|
||||
|
|
|
|||
|
|
@ -130,8 +130,8 @@ const data = reactive({
|
|||
activeName: 'a',
|
||||
tabInfo: {},
|
||||
checkStates: [{ value: "0", label: '待整改' }, { value: "1", label: '待复检' },
|
||||
{ value: "2", label: '复检驳回' },
|
||||
{ value: "3", label: '复检通过' }]
|
||||
{ value: "3", label: '复检驳回' },
|
||||
{ value: "4", label: '复检通过' }]
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
|
|
|||
Loading…
Reference in New Issue