<template>
|
<div id="descCont" class="dark-desc">
|
<div class="des-tit">
|
<div>2022年度事故等级分布与影响一览</div>
|
<dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
|
</div>
|
<div class="des-main">
|
<div v-if="descContent[0]">
|
<h4>特别重大事故共计：{{descContent[0].count}}起</h4>
|
<p>
|
死亡人数：{{descContent[0].causeDeathCount}}人；
|
重伤人数：{{descContent[0].causeHeavyInjureCount}}人；
|
轻伤人数：{{descContent[0].causeLightInjureCount}}人；
|
直接经济损失：{{descContent[0].loss}}元</p>
|
</div>
|
<div v-if="descContent[1]">
|
<h4>重大事故共计：{{descContent[1].count}}起</h4>
|
<p>
|
死亡人数：{{descContent[1].causeDeathCount}}人；
|
重伤人数：{{descContent[1].causeHeavyInjureCount}}人；
|
轻伤人数：{{descContent[1].causeLightInjureCount}}人；
|
直接经济损失：{{descContent[1].loss}}万元</p>
|
</div>
|
<div v-if="descContent[2]">
|
<h4>较大事故共计：{{descContent[2].count}}起</h4>
|
<p>
|
死亡人数：{{descContent[2].causeDeathCount}}人；
|
重伤人数：{{descContent[2].causeHeavyInjureCount}}人；
|
轻伤人数：{{descContent[2].causeLightInjureCount}}人；
|
直接经济损失：{{descContent[2].loss}}元</p>
|
</div>
|
<div v-if="descContent[3]">
|
<h4>一般事故共计：{{descContent[3].count}}起</h4>
|
<p>
|
死亡人数：{{descContent[3].causeDeathCount}}人；
|
重伤人数：{{descContent[3].causeHeavyInjureCount}}人；
|
轻伤人数：{{descContent[3].causeLightInjureCount}}人；
|
直接经济损失：{{descContent[3].loss}}元</p>
|
</div>
|
<div v-if="descContent[4]">
|
<h4>未遂事故共计：{{descContent[4].count}}起</h4>
|
<p>
|
死亡人数：{{descContent[4].causeDeathCount}}人；
|
重伤人数：{{descContent[4].causeHeavyInjureCount}}人；
|
轻伤人数：{{descContent[4].causeLightInjureCount}}人；
|
直接经济损失：{{descContent[4].loss}}元</p>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts">
|
import screenfull from 'screenfull';
|
import {
|
toRefs,
|
reactive,
|
ref,
|
onMounted,
|
defineComponent,
|
defineAsyncComponent,
|
nextTick,
|
onUnmounted,
|
watchEffect
|
} from 'vue';
|
import '/@/theme/bigScreen.css'
|
import {useScreenTheme} from "/@/stores/screenTheme"
|
import {storeToRefs} from "pinia";
|
import {riskWarningApi} from "/@/api/riskWarning";
|
import {ElMessage} from "element-plus/es";
|
|
// 定义接口来定义对象的类型
|
interface stateType {
|
descContent: Array<any>;
|
lineColor: Array<string>;
|
}
|
|
export default defineComponent({
|
name: 'accDesc',
|
components: {},
|
props:{
|
content: Object || null
|
},
|
setup(props) {
|
const screenThemes = useScreenTheme()
|
const { screenTheme } = storeToRefs(screenThemes);
|
const state = reactive<stateType>({
|
descContent: [],
|
lineColor: ['#11FEEE'],
|
});
|
const getDataByYearId = async () => {
|
const data = {
|
depId: screenTheme.value.depId || 1,
|
beginYear: state.timeValue[0],
|
beginMonth: state.timeValue[1],
|
endYear: state.timeValue[0],
|
endMonth: state.timeValue[1]
|
}
|
if(state.timeValue[1] == '0'){
|
data.beginMonth = '1'
|
data.endMonth = '12'
|
}
|
let res = await riskWarningApi().getRiskByTimeDep(data);
|
if (res.data.code === '200') {
|
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
const getTheme =()=>{
|
if(screenTheme.value.isDark){
|
window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
|
state.lineColor = ['#11FEEE']
|
}else{
|
window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
|
state.lineColor = ['#333','#ccc']
|
}
|
}
|
|
watchEffect(() => {
|
if(props.content && props.content.accData && props.content.accData[0] && props.content.accData[1] && props.content.accData[2] && props.content.accData[3] && props.content.accData[4]){
|
state.descContent = props.content.accData
|
}
|
})
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
getTheme();
|
});
|
return {
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.dark-desc{
|
width: 100%;
|
height: 100%;
|
|
.des-tit{
|
width: 100%;
|
&>div{
|
font-size: 1.5rem;
|
height: 2.2rem;
|
line-height: 2.2rem;
|
text-align: center;
|
font-weight: bolder;
|
color: #11FEEE;
|
}
|
}
|
.des-main{
|
width: 100%;
|
height: calc(96% - 2.2rem);
|
padding: 1rem;
|
overflow: auto;
|
color: #11FEEE;
|
|
&::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
|
&::scrollbar { width: 0; height: 0; color: transparent; }
|
|
&>div{
|
margin-bottom: 1rem;
|
&>h4{
|
font-size: 1.25rem;
|
display: flex;
|
align-items: center;
|
|
span{
|
margin-right: 10px;
|
}
|
&:first-of-type{
|
margin-bottom: 10px;
|
}
|
}
|
|
&>p{
|
font-size: 1rem;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
.light-desc{
|
width: 100%;
|
height: 100%;
|
|
.des-tit{
|
width: 100%;
|
&>div{
|
font-size: 1.5rem;
|
height: 2.2rem;
|
line-height: 2.2rem;
|
text-align: center;
|
font-weight: bolder;
|
color: #333;
|
}
|
}
|
.des-main{
|
width: 100%;
|
height: calc(96% - 2.2rem);
|
padding: 1rem;
|
overflow: auto;
|
color: #333;
|
|
&::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
|
&::scrollbar { width: 0; height: 0; color: transparent; }
|
|
&>div{
|
margin-bottom: 1rem;
|
&>h4{
|
font-size: 1.25rem;
|
display: flex;
|
align-items: center;
|
|
span{
|
margin-right: 10px;
|
}
|
&:first-of-type{
|
margin-bottom: 10px;
|
}
|
}
|
|
&>p{
|
font-size: 1rem;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
</style>
|
