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="leftBox">
<div class="leftTop">
<leftTop title="问题类型" />
<leftTop title="待整改" />
</div>
<div class="leftCenter">
<leftCenter title="安全预警" />

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

@ -1,55 +1,92 @@
<template>
<div class="question-type">
<div class="title">{{ title }}</div>
<div class="content">
<JProgressChart :seriesData="seriesData" :yData="yData" />
<Card :title="title">
<!-- <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>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import JProgressChart from '../jChart/bar/JProgressChart.vue'
export default {
components: { JProgressChart },
components: { Card, JProgressChart },
props: {
title: {
type: String,
default: 'default title'
default: ''
}
},
data() {
return {
yData: [
'未分类',
'临边防护',
'洞口防护',
'悬挑式脚手架',
'被电箱与开关箱',
'扣件式钢管脚手架',
'现场防火',
'材料管理',
'施工方案'
].reverse(),
seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998]
// yData: [
// '未分类',
// '临边防护',
// '洞口防护',
// '悬挑式脚手架',
// '被电箱与开关箱',
// '扣件式钢管脚手架',
// '现场防火',
// '材料管理',
// '施工方案'
// ].reverse(),
// seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998]
}
}
}
</script>
<style lang="less" scoped>
.question-type {
width: 100%;
.table {
padding: 0 6px;
height: 100%;
border: 1px solid #0081c3;
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
color: #6ee4f0;
}
.content {
height: calc(100% - 30px);
font-size: 14px;
color: #fff;
.thead,
.tbody {
&.thead {
margin-bottom: 5px;
padding-bottom: 5px;
color: #6ee4f0;
border-bottom: 1px solid #fff;
}
.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>