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 18:40:55 +08:00
parent 008f92cd0a
commit 799264f561
2 changed files with 69 additions and 66 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

@ -6,7 +6,7 @@
<leftTop title="待整改" /> <leftTop title="待整改" />
</div> </div>
<div class="leftCenter"> <div class="leftCenter">
<leftCenter title="安全预警" /> <leftCenter title="问题占比" />
</div> </div>
<div class="leftBottom"> <div class="leftBottom">
<leftBottom title="整改动态" /> <leftBottom title="整改动态" />

133
src/views/projectAdmin/jlw/safeManage/leftCenter.vue
View File

@ -1,88 +1,91 @@
<template> <template>
<div class="safety-warning"> <Card :title="title">
<div class="title">{{ title }}</div> <!-- <div class="table">
<div class="content"> <div class="thead">
<div class="table"> <div class="row">
<div class="thead"> <div class="td">预警时间</div>
<div class="row"> <div class="td">预警类型</div>
<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">详情</div>
</div>
</div> </div>
</div> </div>
</div> <div class="tbody">
</div> <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">详情</div>
</div>
</div>
</div> -->
<JNestedRingChart :title="{ text: 654, subTitle: '问题总数', y: '35%' }" :series="series" />
</Card>
</template> </template>
<script> <script>
import JRingChart from '../jChart/pie/JRingChart.vue' import Card from '../components/Card.vue'
import { getNewestSecurityManageDataList2Api } from '@/assets/js/api/dataBoard'
import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
export default { export default {
components: { JRingChart }, components: { Card, JNestedRingChart },
props: { props: {
title: { title: {
type: String, type: String,
default: 'default title' default: ''
} }
}, },
mounted() {
getNewestSecurityManageDataList2Api({ projectSn: this.projectSn }).then(res => {
this.alarmList = res.result || []
})
},
data() { data() {
return {} return {
projectSn: this.$store.state.projectSn,
series: [
{
color: ['#FE6C7F', '#786FF0', '#5CE2F6'],
data: [
{ value: 45, name: '周检' },
{ value: 5, name: '月检' },
{ value: 15, name: '其他' }
]
}
]
}
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.safety-warning { .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); }
.table { .row {
padding: 0 6px; width: 100%;
height: 100%; display: flex;
font-size: 14px; .td {
color: #fff; height: 30px;
.thead, line-height: 30px;
.tbody { &:nth-child(1) {
&.thead { width: 40%;
margin-bottom: 5px;
padding-bottom: 5px;
color: #6ee4f0;
border-bottom: 1px solid #fff;
} }
.row { &:nth-child(2) {
width: 100%; flex: 1;
display: flex; }
.td { &:nth-child(3) {
height: 30px; margin-right: 10px;
line-height: 30px; color: #6ee4f0;
&:nth-child(1) { cursor: pointer;
width: 40%;
}
&:nth-child(2) {
flex: 1;
}
&:nth-child(3) {
margin-right: 10px;
color: #6ee4f0;
cursor: pointer;
}
}
} }
} }
} }