admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(安全管理)：待整改布局

Browse Source
This commit is contained in:
Jack 2022-08-13 17:08:59 +08:00
parent b3b8d966d6
commit b28f3700fb
2 changed files with 69 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/projectAdmin/jlw/safeManage/index.vue
View File

@ -3,7 +3,7 @@
<div class="container"> <div class="container">
<div class="leftBox"> <div class="leftBox">
<div class="leftTop"> <div class="leftTop">
<leftTop title="问题类型" /> <leftTop title="待整改" />
</div> </div>
<div class="leftCenter"> <div class="leftCenter">
<leftCenter title="安全预警" /> <leftCenter title="安全预警" />

99
src/views/projectAdmin/jlw/safeManage/leftTop.vue
View File

@ -1,55 +1,92 @@
<template> <template>
<div class="question-type"> <Card :title="title">
<div class="title">{{ title }}</div> <!-- <JProgressChart :seriesData="seriesData" :yData="yData" /> -->
<div class="content">
<JProgressChart :seriesData="seriesData" :yData="yData" /> <div class="table">
<div class="thead">
<div class="row">
<div class="td">检查项</div>
<div class="td">检查内容</div>
<div class="td">检查时间</div>
<div class="td">整改人</div>
</div>
</div>
<div class="tbody">
<div class="row" v-for="i in 5" :key="i">
<div class="td">2022.03.05 15:23:22</div>
<div class="td">边临防护</div>
<div class="td">2022-03-05 15:23:22</div>
<div class="td">光怪陆离</div>
</div>
</div>
</div> </div>
</div> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue'
import JProgressChart from '../jChart/bar/JProgressChart.vue' import JProgressChart from '../jChart/bar/JProgressChart.vue'
export default { export default {
components: { JProgressChart }, components: { Card, JProgressChart },
props: { props: {
title: { title: {
type: String, type: String,
default: 'default title' default: ''
} }
}, },
data() { data() {
return { return {
yData: [ // yData: [
'未分类', // '未分类',
'临边防护', // '临边防护',
'洞口防护', // '洞口防护',
'悬挑式脚手架', // '悬挑式脚手架',
'被电箱与开关箱', // '被电箱与开关箱',
'扣件式钢管脚手架', // '扣件式钢管脚手架',
'现场防火', // '现场防火',
'材料管理', // '材料管理',
'施工方案' // '施工方案'
].reverse(), // ].reverse(),
seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998] // seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998]
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.question-type { .table {
width: 100%; padding: 0 6px;
height: 100%; height: 100%;
border: 1px solid #0081c3; font-size: 14px;
.title { color: #fff;
padding-left: 6px; .thead,
height: 30px; .tbody {
line-height: 30px; &.thead {
font-size: 18px; margin-bottom: 5px;
color: #6ee4f0; padding-bottom: 5px;
} color: #6ee4f0;
.content { border-bottom: 1px solid #fff;
height: calc(100% - 30px); }
.row {
width: 100%;
display: flex;
.td {
height: 30px;
line-height: 30px;
&:nth-child(1) {
width: 40%;
}
&:nth-child(2) {
flex: 1;
}
&:nth-child(3) {
width: 140px;
}
&:nth-child(4) {
width: 56px;
}
}
}
} }
} }
</style> </style>