153 lines
3.3 KiB
Vue
153 lines
3.3 KiB
Vue
<!--预警数据卡片-->
|
|
<template>
|
|
<div class="warning-data-card">
|
|
<div class="warning-state" :class="warningStateBg">
|
|
{{ warningStateValue }}
|
|
</div>
|
|
<div class="snap-img">
|
|
<img :src="dataItem.snapImgUrl" v-if="dataItem.snapImgUrl">
|
|
<img :src="noData" v-else>
|
|
</div>
|
|
<div class="warning-data-info">
|
|
<div class="warning-name" :title="dataItem.warningName">{{ dataItem.warningName }}</div>
|
|
<div class="warning-site-time">
|
|
<div class="site-icon"></div>
|
|
<div class="_value" :title="dataItem.site">{{ dataItem.site }}</div>
|
|
</div>
|
|
<div class="warning-site-time">
|
|
<div class="warning-time-icon"></div>
|
|
<div class="_value" :title="dataItem.warningTime">{{ dataItem.warningTime }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import noData from 'assets/peakCoalImages/common/no-data.png'
|
|
|
|
export default {
|
|
name: "WarningInfoItem",
|
|
props: {
|
|
dataItem: {
|
|
type: Object,
|
|
default: () => {
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
noData
|
|
}
|
|
},
|
|
computed: {
|
|
warningStateBg() {
|
|
if (this.dataItem.state === 1) {
|
|
return 'discuss-decide-bg'
|
|
} else if (this.dataItem.state === 0) {
|
|
return 'pending-approval-bg'
|
|
}
|
|
},
|
|
warningStateValue() {
|
|
if (this.dataItem.state === 1) {
|
|
return '代研判'
|
|
} else if (this.dataItem.state === 0) {
|
|
return '待审批'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "assets/styles/mixin";
|
|
|
|
.warning-data-card {
|
|
height: 202px;
|
|
width: 891px;
|
|
background: url("assets/peakCoalImages/right/warning-card-bg.png") no-repeat;
|
|
padding-left: 28px;
|
|
position: relative;
|
|
.flex-row;
|
|
|
|
.snap-img {
|
|
width: 244px;
|
|
height: 165px;
|
|
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.warning-data-info {
|
|
height: 165px;
|
|
width: 0;
|
|
flex: 1;
|
|
padding-left: 20px;
|
|
.flex-column;
|
|
justify-content: space-between;
|
|
|
|
.warning-name {
|
|
width: 100%;
|
|
font-family: MicrosoftYaHei-Bold;
|
|
font-size: 32.4px;
|
|
color: #F6B545;
|
|
letter-spacing: 0;
|
|
font-weight: 700;
|
|
.text-ellipsis;
|
|
}
|
|
|
|
.warning-site-time {
|
|
width: 100%;
|
|
.flex-row;
|
|
|
|
.site-icon {
|
|
width: 26px;
|
|
height: 34px;
|
|
background: url("assets/peakCoalImages/right/warning-site-icon.png") no-repeat;
|
|
}
|
|
|
|
.warning-time-icon {
|
|
width: 33px;
|
|
height: 33px;
|
|
background: url("assets/peakCoalImages/right/warning-time-icon.png") no-repeat;
|
|
|
|
}
|
|
|
|
._value {
|
|
width: calc(100% - 26px);
|
|
padding-left: 20px;
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 32.4px;
|
|
color: rgba(202, 244, 255, 0.9);
|
|
font-weight: 400;
|
|
.text-ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.warning-state {
|
|
width: 214px;
|
|
height: 46px;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 20px;
|
|
font-family: PingFangSC-Semibold;
|
|
font-size: 32.4px;
|
|
color: #FFFFFF;
|
|
letter-spacing: 0;
|
|
text-align: center;
|
|
line-height: 46px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.discuss-decide-bg {
|
|
background: url("assets/peakCoalImages/right/discuss-decide-bg.png") no-repeat;
|
|
}
|
|
|
|
.pending-approval-bg {
|
|
background: url("assets/peakCoalImages/right/pending-approval-bg.png") no-repeat;
|
|
}
|
|
}
|
|
</style>
|