From 20b0ce2db27b64a60de60aee05dedd448099e330 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Mon, 08 Jul 2024 10:12:16 +0800
Subject: [PATCH] xiugai
---
src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue | 442 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 294 insertions(+), 148 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue
index c350ec4..490f6e1 100644
--- a/src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue
@@ -1,52 +1,31 @@
<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>
+ <div class="tit">
+ <div class="title">事故等级分布</div>
</div>
+ <div class="chart-cont">
+ <div class="chart">
+ <accident :size="2.5" ref="accRef" @getData="getData"></accident>
+ </div>
+ <div class="chart-right">
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
+ <div class="charts-des">
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>事故等级分布一览</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div v-for="(item,index) in descContent" :key="index">
+ <h4>{{item.accidentGrade}}：{{item.count}}起</h4>
+ </div>
+ </div>
+ </div>
+ </div>
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
+ </div>
+ </div>
+</div>
</template>
<script lang="ts">
import screenfull from 'screenfull';
@@ -75,7 +54,9 @@
export default defineComponent({
name: 'accDesc',
- components: {},
+ components: {
+ accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue'))
+ },
props:{
content: Object || null
},
@@ -86,28 +67,33 @@
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') {
+ // 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
+ // });
+ // }
+ // }
- } else {
- ElMessage({
- type: 'warning',
- message: res.data.msg
- });
- }
+ const getData = (data:Array)=>{
+ state.descContent = data
}
+
const getTheme =()=>{
if(screenTheme.value.isDark){
window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
@@ -118,17 +104,18 @@
}
}
- 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
- }
- })
+ // 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 {
+ getData,
...toRefs(state)
};
}
@@ -136,98 +123,257 @@
</script>
<style scoped lang="scss">
- .dark-desc{
+.dark-page{
+ width: 100%;
+ height: 100%;
+ border:1px #5a5959 solid;
+ background: url('../../../../../assets/warningScreen/body-bg.jpg');
+ padding: 4%;
+ .btns{
+ position: fixed;
+ width: 8%;
+ height: 6%;
+ right: 5%;
+ top: 1.25rem;
+ font-size: 1.125rem;
+ color: rgb(17, 254, 238);
+ cursor: pointer;
+ }
+ .tit{
width: 100%;
- height: 100%;
+ height: 122px;
+ background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
+ background-size: 100% 100%;
- .des-tit{
+
+ .title{
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;
- }
- }
+ height: 122px;
+ line-height: 112px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ font-size: 2.8rem;
+ color: #11feee;
+ font-weight: bolder;
+ text-align: center;
+ letter-spacing: 5px;
}
}
- .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;
+ .chart-cont{
+ width: 100%;
+ padding: 20px;
+ height: calc(92vh - 122px);
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+
+ .chart{
+ width: calc((100% - 20px) * 0.63);
+ height: 100%;
+ padding: 3%;
+ background: url("../../../../../assets/warningScreen/pagebg-l.png") no-repeat center;
+ background-size: 100% 100%;
+ position: relative;
+ .selector-2{
+ position: absolute;
+ top: 5%;
+ right: 10%;
+ width: 20%;
+ font-size: 1.25rem;
+ color: #fff;
+ }
+ .main-chart{
+ width: 100%;
+ height: 100%;
}
}
- .des-main{
+ .chart-right{
+ width: calc((100% - 20px) * 0.37);
+ height: 100%;
+ .charts-des{
+ height: 90%;
+ padding: 4%;
+ background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
+ background-size: 100% 100%;
+
+ .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-page{
+ width: 100%;
+ height: 100%;
+ border:1px #5a5959 solid;
+ background: #F0F0F0;
+ padding: 4%;
+ .btns{
+ position: fixed;
+ width: 8%;
+ height: 6%;
+ right: 5%;
+ top: 1.25rem;
+ font-size: 1.125rem;
+ color: #333;
+ cursor: pointer;
+ }
+ .tit{
+ width: 100%;
+ height: 122px;
+ background: url("../../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
+ background-size: 100% 100%;
+
+
+ .title{
width: 100%;
- height: calc(96% - 2.2rem);
- padding: 1rem;
- overflow: auto;
+ height: 122px;
+ line-height: 112px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ font-size: 2.8rem;
color: #333;
+ font-weight: bolder;
+ text-align: center;
+ letter-spacing: 5px;
+ }
+ }
- &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
- &::scrollbar { width: 0; height: 0; color: transparent; }
+ .chart-cont{
+ width: 100%;
+ padding: 20px;
+ height: calc(92vh - 122px);
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
- &>div{
- margin-bottom: 1rem;
- &>h4{
- font-size: 1.25rem;
- display: flex;
- align-items: center;
+ .chart{
+ width: calc((100% - 20px) * 0.63);
+ height: 100%;
+ padding: 3%;
+ background: url("../../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
+ background-size: 100% 100%;
+ position: relative;
+ .selector-2{
+ position: absolute;
+ top: 5%;
+ right: 10%;
+ width: 20%;
+ font-size: 1.25rem;
+ color: #fff;
+ }
+ .main-chart{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .chart-right{
+ width: calc((100% - 20px) * 0.37);
+ height: 100%;
- span{
- margin-right: 10px;
+ .charts-des{
+ height: 90%;
+ padding: 4%;
+ background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
+ background-size: 100% 100%;
+
+ .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;
+ }
}
- &:first-of-type{
- margin-bottom: 10px;
- }
- }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
- &>p{
- font-size: 1rem;
- margin-top: 10px;
+ &::-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>
\ No newline at end of file
--
Gitblit v1.9.2