81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<template>
|
|
<div class="disaster-analysis">
|
|
<div class="disaster-analysis__row">
|
|
<DataField
|
|
label="灾害类型"
|
|
:value="disasterInfo.type"
|
|
:icon="DataFieldIcon1"
|
|
/>
|
|
<DataField
|
|
label="损坏方量"
|
|
:value="disasterInfo.volume"
|
|
:unit="disasterInfo.volumeUnit"
|
|
:icon="DataFieldIcon2"
|
|
/>
|
|
</div>
|
|
|
|
<div class="disaster-analysis__row">
|
|
<DataField
|
|
label="滑坡体长度"
|
|
:value="disasterInfo.length"
|
|
:unit="disasterInfo.lengthUnit"
|
|
:icon="DataFieldIcon3"
|
|
/>
|
|
<DataField
|
|
label="滑坡体宽度"
|
|
:value="disasterInfo.width"
|
|
:unit="disasterInfo.widthUnit"
|
|
:icon="DataFieldIcon4"
|
|
/>
|
|
</div>
|
|
|
|
<div class="disaster-analysis__row">
|
|
<DataField
|
|
label="人员伤亡"
|
|
:value="disasterInfo.casualties"
|
|
unit="人"
|
|
color-type="success"
|
|
:icon="DataFieldIcon5"
|
|
/>
|
|
<DataField
|
|
label="车辆损坏"
|
|
:value="disasterInfo.vehicles"
|
|
unit="台"
|
|
color-type="success"
|
|
:icon="DataFieldIcon6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { inject } from 'vue'
|
|
import DataField from '../shared/DataField.vue'
|
|
|
|
import DataFieldIcon1 from '../../assets/images/DataField/icon-1.png'
|
|
import DataFieldIcon2 from '../../assets/images/DataField/icon-2.png'
|
|
import DataFieldIcon3 from '../../assets/images/DataField/icon-3.png'
|
|
import DataFieldIcon4 from '../../assets/images/DataField/icon-4.png'
|
|
import DataFieldIcon5 from '../../assets/images/DataField/icon-5.png'
|
|
import DataFieldIcon6 from '../../assets/images/DataField/icon-6.png'
|
|
|
|
const { disasterInfo } = inject('disasterData')
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use '@/styles/mixins.scss' as *;
|
|
@use '../../assets/styles/common.scss' as *;
|
|
|
|
.disaster-analysis {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: vh(12);
|
|
}
|
|
|
|
.disaster-analysis__row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: vw(12);
|
|
}
|
|
</style>
|