|
@@ -7,12 +7,16 @@
|
|
|
<div class="warning-header">
|
|
<div class="warning-header">
|
|
|
<div class="warning-count">{{ totalMonth }}</div>
|
|
<div class="warning-count">{{ totalMonth }}</div>
|
|
|
<div class="warning-count-label">本月预警响应总数</div>
|
|
<div class="warning-count-label">本月预警响应总数</div>
|
|
|
|
|
+ <div class="warning-sub-counts">
|
|
|
|
|
+ <span class="sub-count emergency">应急 {{ emergencyCount }}</span>
|
|
|
|
|
+ <span class="sub-count violation">违规带离 {{ violationCount }}</span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="warning-scroll-wrap" ref="scrollWrap" @mouseenter="paused=true" @mouseleave="paused=false">
|
|
<div class="warning-scroll-wrap" ref="scrollWrap" @mouseenter="paused=true" @mouseleave="paused=false">
|
|
|
<div ref="scrollInner" class="warning-scroll-inner">
|
|
<div ref="scrollInner" class="warning-scroll-inner">
|
|
|
<div class="warning-item" v-for="(item, idx) in displayList" :key="idx">
|
|
<div class="warning-item" v-for="(item, idx) in displayList" :key="idx">
|
|
|
- <div class="w-lab">{{ item.lab }} - {{ item.dept }}</div>
|
|
|
|
|
- <div class="w-sensor">异常: {{ item.type }} {{ item.value }}</div>
|
|
|
|
|
|
|
+ <div class="w-lab">{{ item.lab }}</div>
|
|
|
|
|
+ <div class="w-sensor" :style="{ color: categoryColor(item.category) }">异常: {{ item.type }}</div>
|
|
|
<div class="w-time">{{ item.time }}</div>
|
|
<div class="w-time">{{ item.time }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -29,6 +33,8 @@ export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
totalMonth: 0,
|
|
totalMonth: 0,
|
|
|
|
|
+ emergencyCount: 0,
|
|
|
|
|
+ violationCount: 0,
|
|
|
list: [],
|
|
list: [],
|
|
|
paused: false,
|
|
paused: false,
|
|
|
scrollTimer: null,
|
|
scrollTimer: null,
|
|
@@ -58,6 +64,8 @@ export default {
|
|
|
try {
|
|
try {
|
|
|
const res = await getRiskWarningList()
|
|
const res = await getRiskWarningList()
|
|
|
this.totalMonth = res.data.totalMonth
|
|
this.totalMonth = res.data.totalMonth
|
|
|
|
|
+ this.emergencyCount = res.data.emergencyCount
|
|
|
|
|
+ this.violationCount = res.data.violationCount
|
|
|
this.list = res.data.list
|
|
this.list = res.data.list
|
|
|
if (!this.scrollTimer) {
|
|
if (!this.scrollTimer) {
|
|
|
this.$nextTick(() => setTimeout(() => this.startScroll(), 500))
|
|
this.$nextTick(() => setTimeout(() => this.startScroll(), 500))
|
|
@@ -66,6 +74,11 @@ export default {
|
|
|
console.error('RiskWarning:', e)
|
|
console.error('RiskWarning:', e)
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+ categoryColor(category) {
|
|
|
|
|
+ if (category === '应急预警') return '#FFB020'
|
|
|
|
|
+ if (category === '违规带离') return '#A78BFA'
|
|
|
|
|
+ return '#FFB020'
|
|
|
|
|
+ },
|
|
|
startScroll() {
|
|
startScroll() {
|
|
|
const wrap = this.$refs.scrollWrap
|
|
const wrap = this.$refs.scrollWrap
|
|
|
const inner = this.$refs.scrollInner
|
|
const inner = this.$refs.scrollInner
|
|
@@ -123,6 +136,54 @@ export default {
|
|
|
color: $text-secondary;
|
|
color: $text-secondary;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.warning-sub-counts {
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.sub-count {
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ padding: 2px 8px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ &.emergency {
|
|
|
|
|
+ color: #FFB020;
|
|
|
|
|
+ background: rgba(255, 176, 32, 0.1);
|
|
|
|
|
+ border: 1px solid rgba(255, 176, 32, 0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.violation {
|
|
|
|
|
+ color: #A78BFA;
|
|
|
|
|
+ background: rgba(167, 139, 250, 0.1);
|
|
|
|
|
+ border: 1px solid rgba(167, 139, 250, 0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.warning-sub-counts {
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ gap: 8px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.sub-count {
|
|
|
|
|
+ font-size: 11px;
|
|
|
|
|
+ padding: 2px 8px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ &.emergency {
|
|
|
|
|
+ color: #FFB020;
|
|
|
|
|
+ background: rgba(255, 176, 32, 0.12);
|
|
|
|
|
+ border: 1px solid rgba(255, 176, 32, 0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.violation {
|
|
|
|
|
+ color: #A78BFA;
|
|
|
|
|
+ background: rgba(167, 139, 250, 0.12);
|
|
|
|
|
+ border: 1px solid rgba(167, 139, 250, 0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.warning-scroll-wrap {
|
|
.warning-scroll-wrap {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|