|
@@ -37,7 +37,7 @@
|
|
|
<i :class="getStatusClass()"></i>
|
|
|
<div class="text-box">
|
|
|
<div class="text1">当前最高预警等级</div>
|
|
|
- <div :class="getStatusClass2()">{{ hazardousChemicals.nowWarningLevelName }}</div>
|
|
|
+ <div :class="getStatusClass2()">{{ hazardousChemicals.nowWarningLevel }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<i class="line" />
|
|
@@ -119,31 +119,30 @@ const riskList = ref([
|
|
|
// 危化品
|
|
|
const hazardousChemicals = reactive({
|
|
|
nowWarningLevel: '',
|
|
|
- nowWarningLevelName: '',
|
|
|
highRiskArea: '',
|
|
|
warningLevelData: []
|
|
|
});
|
|
|
const getStatusClass = () => {
|
|
|
const level = hazardousChemicals.nowWarningLevel;
|
|
|
- if (level === 1) {
|
|
|
+ if (level === '低风险') {
|
|
|
return 'icon1 lowRisk1';
|
|
|
- } else if (level === 2) {
|
|
|
+ } else if (level === '一般风险') {
|
|
|
return 'icon1 normalRisk1';
|
|
|
- } else if (level === 3) {
|
|
|
+ } else if (level === '较大风险') {
|
|
|
return 'icon1 moreRisk1';
|
|
|
- } else if (level === 4) {
|
|
|
+ } else if (level === '重大风险') {
|
|
|
return 'icon1 significantRisk1';
|
|
|
}
|
|
|
};
|
|
|
const getStatusClass2 = () => {
|
|
|
const level = hazardousChemicals.nowWarningLevel;
|
|
|
- if (level === 1) {
|
|
|
+ if (level === '低风险') {
|
|
|
return 'lowRiskText1';
|
|
|
- } else if (level === 2) {
|
|
|
+ } else if (level === '一般风险') {
|
|
|
return 'normalRiskText1';
|
|
|
- } else if (level === 3) {
|
|
|
+ } else if (level === '较大风险') {
|
|
|
return 'moreRiskText1';
|
|
|
- } else if (level === 4) {
|
|
|
+ } else if (level === '重大风险') {
|
|
|
return 'significantRiskText1';
|
|
|
}
|
|
|
};
|
|
@@ -206,13 +205,13 @@ const getStatusClass5 = () => {
|
|
|
};
|
|
|
const getStatusClass6 = (level: string) => {
|
|
|
if (level === '较低危险') {
|
|
|
- return 'lowRiskBox';
|
|
|
+ return 'forestFire1';
|
|
|
} else if (level === '较高危险') {
|
|
|
- return 'normalRiskBox';
|
|
|
+ return 'forestFire2';
|
|
|
} else if (level === '高度危险') {
|
|
|
- return 'moreRiskBox';
|
|
|
+ return 'forestFire3';
|
|
|
} else if (level === '极度危险') {
|
|
|
- return 'significantRiskBox';
|
|
|
+ return 'forestFire4';
|
|
|
}
|
|
|
};
|
|
|
const getStatusClass7 = (level: string) => {
|
|
@@ -233,14 +232,7 @@ const getStatusClass7 = (level: string) => {
|
|
|
const initData = () => {
|
|
|
if (active.value === '0') {
|
|
|
getMaxHazardous().then((res) => {
|
|
|
- const levelList = {
|
|
|
- 1: '低风险',
|
|
|
- 2: '一般风险',
|
|
|
- 3: '较大风险',
|
|
|
- 4: '重大风险'
|
|
|
- };
|
|
|
hazardousChemicals.nowWarningLevel = res.data.max_level;
|
|
|
- hazardousChemicals.nowWarningLevelName = levelList[res.data.max_level];
|
|
|
});
|
|
|
getHazardousWarrning().then((res) => {
|
|
|
hazardousChemicals.highRiskArea = res.data.result;
|
|
@@ -562,6 +554,7 @@ onMounted(() => {
|
|
|
color: #fff;
|
|
|
font-size: 38px;
|
|
|
line-height: 70px;
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
.data-box5 {
|
|
|
width: 1892px;
|
|
@@ -634,6 +627,8 @@ onMounted(() => {
|
|
|
margin: 0 72px;
|
|
|
}
|
|
|
.box-right {
|
|
|
+ height: 170px;
|
|
|
+ overflow-y: auto;
|
|
|
font-size: 38px;
|
|
|
line-height: 76px;
|
|
|
color: #edfaff;
|
|
@@ -652,69 +647,68 @@ onMounted(() => {
|
|
|
display: flex;
|
|
|
font-size: 38px;
|
|
|
color: #edfaff;
|
|
|
- .lowRiskBox {
|
|
|
+ .forestFire1 {
|
|
|
background: url('@/assets/images/routineCommandMap/riskMonitor/dataBox1.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
.icon {
|
|
|
width: 76px;
|
|
|
height: 82px;
|
|
|
- background: url('@/assets/images/routineCommandMap/riskMonitor/lowRisk2.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 25px;
|
|
|
+ background: url('@/assets/images/routineCommandMap/riskMonitor/forestFire1.png') no-repeat;
|
|
|
}
|
|
|
.text {
|
|
|
background-image: linear-gradient(to bottom, #ffffff 25%, #247dff 100%);
|
|
|
}
|
|
|
}
|
|
|
- .normalRiskBox {
|
|
|
+ .forestFire2 {
|
|
|
background: url('@/assets/images/routineCommandMap/riskMonitor/dataBox2.png') no-repeat;
|
|
|
.icon {
|
|
|
width: 76px;
|
|
|
height: 82px;
|
|
|
- background: url('@/assets/images/routineCommandMap/riskMonitor/normalRisk2.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 25px;
|
|
|
+ background: url('@/assets/images/routineCommandMap/riskMonitor/forestFire2.png') no-repeat;
|
|
|
}
|
|
|
.text {
|
|
|
background-image: linear-gradient(to bottom, #ffffff 25%, #ffda00 100%);
|
|
|
}
|
|
|
}
|
|
|
- .moreRiskBox {
|
|
|
+ .forestFire3 {
|
|
|
background: url('@/assets/images/routineCommandMap/riskMonitor/dataBox3.png') no-repeat;
|
|
|
.icon {
|
|
|
width: 76px;
|
|
|
height: 83px;
|
|
|
- background: url('@/assets/images/routineCommandMap/riskMonitor/moreRisk2.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 25px;
|
|
|
+ background: url('@/assets/images/routineCommandMap/riskMonitor/forestFire3.png') no-repeat;
|
|
|
}
|
|
|
.text {
|
|
|
background-image: linear-gradient(to bottom, #ffffff 25%, #ff8400 100%);
|
|
|
}
|
|
|
}
|
|
|
- .significantRiskBox {
|
|
|
+ .forestFire4 {
|
|
|
background: url('@/assets/images/routineCommandMap/riskMonitor/dataBox4.png') no-repeat;
|
|
|
.icon {
|
|
|
width: 76px;
|
|
|
height: 83px;
|
|
|
- background: url('@/assets/images/routineCommandMap/riskMonitor/significantRisk2.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 25px;
|
|
|
+ background: url('@/assets/images/routineCommandMap/riskMonitor/forestFire4.png') no-repeat;
|
|
|
}
|
|
|
.text {
|
|
|
background-image: linear-gradient(to bottom, #ffffff 25%, #ff2b34 100%);
|
|
|
}
|
|
|
}
|
|
|
- .lowRiskBox,
|
|
|
- .normalRiskBox,
|
|
|
- .moreRiskBox,
|
|
|
- .significantRiskBox {
|
|
|
+ .forestFire1,
|
|
|
+ .forestFire2,
|
|
|
+ .forestFire3,
|
|
|
+ .forestFire4 {
|
|
|
width: 365px;
|
|
|
height: 124px;
|
|
|
background-size: 100% 100%;
|
|
|
padding-left: 30px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ .icon {
|
|
|
+ width: 70px;
|
|
|
+ height: 73px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 25px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
.text {
|
|
|
color: transparent;
|
|
|
-webkit-background-clip: text;
|