安全隐患大屏

dev_xd
haha 2025-03-15 00:12:16 +08:00
parent 4db7c1f325
commit cf6b67bf5a
4 changed files with 338 additions and 13 deletions

View File

@ -60,6 +60,7 @@ body {
height: 1080px; height: 1080px;
} }
.img-openwin { .img-openwin {
cursor: pointer;
width: 26px; width: 26px;
height: 26px; height: 26px;
} }

View File

@ -21,6 +21,7 @@
</el-col> </el-col>
</module-one-1-1> </module-one-1-1>
<module-one-2-1 label="日常巡检"> <module-one-2-1 label="日常巡检">
<img src="images/icon2001.png" class="img-openwin" />
<div class="div-item-chart"> <div class="div-item-chart">
<div class="data-item-chart"> <div class="data-item-chart">
<div class="total-info">{{ item1Data.total }}<br /> <div class="total-info">{{ item1Data.total }}<br />
@ -28,26 +29,237 @@
</div> </div>
<div class="chart-gif chart-overview-gif"></div> <div class="chart-gif chart-overview-gif"></div>
<my-chart :key="itemChartKey1" id="project-safety-check-item1" width="100%" height="100%" <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> </div>
{{ item1Data.infos }}
</div> </div>
</module-one-2-1> </module-one-2-1>
</el-col> </el-col>
<el-col :span="18" class="h100"> <el-col :span="18" class="h100">
<module-one-1-3 label="隐患类别统计"> <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%" <my-chart :key="chartKey2" id="project-safety-check-chart2" width="100%" height="100%"
:render="renderChart2"></my-chart> :render="renderChart2"></my-chart>
</module-one-1-3> </module-one-1-3>
<el-row class="el-right"> <el-row class="el-right">
<el-col :span="8"> <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>
<el-col :span="8"> <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>
<el-col :span="8"> <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-col>
</el-row> </el-row>
</el-col> </el-col>
@ -85,21 +297,25 @@ export default {
total: 0, total: 0,
datas: [], datas: [],
infos: [], infos: [],
items: [],
}, },
item2Data: { item2Data: {
total: 0, total: 0,
datas: [], datas: [],
infos: [], infos: [],
items: [],
}, },
item3Data: { item3Data: {
total: 0, total: 0,
datas: [], datas: [],
infos: [], infos: [],
items: [],
}, },
item4Data: { item4Data: {
total: 0, total: 0,
datas: [], datas: [],
infos: [], infos: [],
items: [],
} }
} }
}, },
@ -161,9 +377,13 @@ export default {
this.showChart1();// this.showChart1();//
this.showChart2();// this.showChart2();//
this.makeItemData(this.item1Data, res[2].data) this.makeItemData(this.item1Data, res[2].data)
this.item1Data.items = res[3].rows;
this.makeItemData(this.item2Data, res[4].data) this.makeItemData(this.item2Data, res[4].data)
this.item2Data.items = res[5].rows;
this.makeItemData(this.item3Data, res[6].data) this.makeItemData(this.item3Data, res[6].data)
this.item3Data.items = res[7].rows;
this.makeItemData(this.item4Data, res[8].data) this.makeItemData(this.item4Data, res[8].data)
this.item4Data.items = res[9].rows;
this.itemChartKey1++; this.itemChartKey1++;
}); });
}, },
@ -173,6 +393,13 @@ export default {
showChart2() { showChart2() {
this.chartKey2++; 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) { makeItemData(item, res) {
let labels = ['问题总数', '待整改', '待复检', '复检驳回', '整改完成', '超时整改']; let labels = ['问题总数', '待整改', '待复检', '复检驳回', '整改完成', '超时整改'];
item.total = res[0].id; item.total = res[0].id;
@ -189,11 +416,13 @@ export default {
item.infos.push({ item.infos.push({
name: labels[i], name: labels[i],
value: res[i].id, value: res[i].id,
type: res[i].projectName,
percent: total == 0 ? 0 : (res[i].id / total * 100.0).toFixed(1) percent: total == 0 ? 0 : (res[i].id / total * 100.0).toFixed(1)
}); });
} }
}, },
renderDataItem1() { renderDataItem(n) {
let objs = this._data['item' + n + 'Data'];
let option = { let option = {
color: ["#71BCC4", "#EEBE47", "#5EA85D", "#5B84EB", "#E76168"], color: ["#71BCC4", "#EEBE47", "#5EA85D", "#5B84EB", "#E76168"],
series: [ series: [
@ -216,11 +445,10 @@ export default {
labelLine: { labelLine: {
show: false show: false
}, },
data: this.item1Data.datas data: objs.datas
} }
] ]
}; };
console.log("--->", this.item1Data.datas)
return option; return option;
}, },
renderChart2(opt) { renderChart2(opt) {
@ -405,7 +633,8 @@ export default {
height: 230px; height: 230px;
width: 230px; width: 230px;
display: inline-block; display: inline-block;
position: relative; position: absolute;
left: -30px;
.total-info { .total-info {
position: absolute; 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) { @media (min-width: 1921px) and (max-width: 2560px) {

View File

@ -253,8 +253,8 @@ let data = reactive({
] ]
}, },
checkStates: [{ value: "0", label: '待整改' }, { value: "1", label: '待复检' }, 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); const { step2Form, step2Rules, step3Form, step3Rules } = toRefs(data);
function validateStep2Images(rule, value, callback) { function validateStep2Images(rule, value, callback) {

View File

@ -130,8 +130,8 @@ const data = reactive({
activeName: 'a', activeName: 'a',
tabInfo: {}, tabInfo: {},
checkStates: [{ value: "0", label: '待整改' }, { value: "1", label: '待复检' }, 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); const { queryParams, form, rules } = toRefs(data);