SafetyScreen-ui/src/components/home/rightTwo.vue

145 lines
3.7 KiB
Vue

<template>
<div class="build-risk-page">
<div class="inner-tit">
<div>
<img src="../../assets/img/lef-badge.png" alt="" />
施工风险实时预警
</div>
<span style="cursor: pointer" @click="toggleDialog(13)">更多</span>
</div>
<div class="build-table">
<el-table
:data="tableList"
stripe
style="width: 100%"
:show-header="false"
:row-style="rowStyle"
>
<el-table-column prop="devName" label="" align="center">
</el-table-column>
<el-table-column prop="warnTime" label="" align="center">
</el-table-column>
<el-table-column prop="warnType" label="" align="center">
<template slot-scope="scope">
{{ scope.row.warnType }}异常
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {
queryRiskInfoApi
} from '@/api/home/home'
export default {
name: 'buildRiskPage',
components: {
},
data() {
return {
tableList: [
/* {
date: 'xxx工程',
name: '2024.1.1 12:23',
address: '环境检测异常',
isNormal: false,
},
{
date: 'xxx工程',
name: '2024.1.1 12:23',
address: '环境检测正常',
isNormal: true,
},
{
date: 'xxx工程',
name: '2024.1.1 12:23',
address: '环境检测正常',
isNormal: true,
},
{
date: 'xxx工程',
name: '2024.1.1 12:23',
address: '环境检测异常',
isNormal: false,
}, */
],
}
},
mounted() {
this.getRiskData()
},
destroyed() {
},
methods: {
async getRiskData() {
let res = await queryRiskInfoApi()
this.tableList = res.data
},
toggleDialog(v) {
this.$emit('openDialog', { order: v })
},
rowStyle(scope) {
if (scope.rowIndex % 2 === 0) {
return {
background: '#EAF5FF',
}
} else {
return {
background: '#E1EEFF',
}
}
},
},
}
</script>
<style lang="scss" scoped>
@font-face {
font-family: 'YouShe';
src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
}
.build-risk-page {
height: 100%;
background-color: #f3f7ff;
box-sizing: border-box;
padding: 15px 20px;
border-radius: 5px;
border: 1px solid #eff2fc;
box-shadow: 2px 2px 2px #d9e0f3;
overflow-y: auto;
.inner-tit {
width: 100%;
box-sizing: border-box;
padding: 10px 20px;
background-color: #eff4fe;
display: flex;
justify-content: space-between;
align-items: center;
color: #000;
font-size: 20px;
font-family: 'YouShe', sans-serif;
box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
-2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
margin-bottom: 15px;
span {
color: #757b87;
}
}
.build-table {
height: 80%;
width: 100%;
overflow-y: auto;
}
}
</style>