| 1 |
- {"ast":null,"code":"import { getRiskWarningList } from '@/api';\nexport default {\n name: 'RiskWarning',\n data() {\n return {\n totalMonth: 0,\n list: [],\n needScroll: false,\n scrollTimer: null,\n paused: false\n };\n },\n async mounted() {\n const res = await getRiskWarningList();\n this.totalMonth = res.data.totalMonth;\n this.list = res.data.list;\n this.$nextTick(() => this.checkScroll());\n },\n beforeDestroy() {\n if (this.scrollTimer) cancelAnimationFrame(this.scrollTimer);\n },\n methods: {\n checkScroll() {\n const wrapper = this.$refs.listWrapper;\n const inner = this.$refs.listInner;\n if (!wrapper || !inner) return;\n this.needScroll = inner.offsetHeight > wrapper.offsetHeight;\n if (this.needScroll) {\n this.$nextTick(() => this.startScroll());\n }\n },\n startScroll() {\n const wrapper = this.$refs.listWrapper;\n const inner = this.$refs.listInner;\n if (!wrapper || !inner) return;\n const firstHeight = inner.offsetHeight;\n const speed = 0.4;\n const step = () => {\n if (!this.paused) {\n wrapper.scrollTop += speed;\n if (wrapper.scrollTop >= firstHeight) {\n wrapper.scrollTop -= firstHeight;\n }\n }\n this.scrollTimer = requestAnimationFrame(step);\n };\n this.scrollTimer = requestAnimationFrame(step);\n },\n pauseScroll() {\n this.paused = true;\n },\n resumeScroll() {\n this.paused = false;\n }\n }\n};","map":{"version":3,"names":["getRiskWarningList","name","data","totalMonth","list","needScroll","scrollTimer","paused","mounted","res","$nextTick","checkScroll","beforeDestroy","cancelAnimationFrame","methods","wrapper","$refs","listWrapper","inner","listInner","offsetHeight","startScroll","firstHeight","speed","step","scrollTop","requestAnimationFrame","pauseScroll","resumeScroll"],"sources":["src/components/LabStats/RiskWarning.vue"],"sourcesContent":["<template>\n <div class=\"panel-box risk-warning\">\n <div class=\"panel-title\">实验室实时风险预警</div>\n <div class=\"panel-content\">\n <div class=\"warning-summary\">\n <span class=\"summary-num\">{{ totalMonth }}</span>\n <span class=\"summary-text\">本月预警响应总数</span>\n </div>\n <div class=\"list-wrapper\" ref=\"listWrapper\" @mouseenter=\"pauseScroll\" @mouseleave=\"resumeScroll\">\n <div ref=\"listInner\" class=\"list-inner\">\n <div class=\"warning-item\" v-for=\"item in list\" :key=\"'a'+item.id\">\n <div class=\"warning-lab\">{{ item.lab }} - {{ item.dept }}</div>\n <div class=\"warning-detail\">\n 异常: <span class=\"warn-value\">{{ item.type }} {{ item.value }}</span>\n </div>\n <div class=\"warning-time\">{{ item.time }}</div>\n </div>\n </div>\n <!-- 复制一份用于无缝滚动 -->\n <div class=\"list-inner\" v-if=\"needScroll\">\n <div class=\"warning-item\" v-for=\"item in list\" :key=\"'b'+item.id\">\n <div class=\"warning-lab\">{{ item.lab }} - {{ item.dept }}</div>\n <div class=\"warning-detail\">\n 异常: <span class=\"warn-value\">{{ item.type }} {{ item.value }}</span>\n </div>\n <div class=\"warning-time\">{{ item.time }}</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport { getRiskWarningList } from '@/api'\n\nexport default {\n name: 'RiskWarning',\n data() {\n return {\n totalMonth: 0,\n list: [],\n needScroll: false,\n scrollTimer: null,\n paused: false\n }\n },\n async mounted() {\n const res = await getRiskWarningList()\n this.totalMonth = res.data.totalMonth\n this.list = res.data.list\n this.$nextTick(() => this.checkScroll())\n },\n beforeDestroy() {\n if (this.scrollTimer) cancelAnimationFrame(this.scrollTimer)\n },\n methods: {\n checkScroll() {\n const wrapper = this.$refs.listWrapper\n const inner = this.$refs.listInner\n if (!wrapper || !inner) return\n this.needScroll = inner.offsetHeight > wrapper.offsetHeight\n if (this.needScroll) {\n this.$nextTick(() => this.startScroll())\n }\n },\n startScroll() {\n const wrapper = this.$refs.listWrapper\n const inner = this.$refs.listInner\n if (!wrapper || !inner) return\n const firstHeight = inner.offsetHeight\n const speed = 0.4\n\n const step = () => {\n if (!this.paused) {\n wrapper.scrollTop += speed\n if (wrapper.scrollTop >= firstHeight) {\n wrapper.scrollTop -= firstHeight\n }\n }\n this.scrollTimer = requestAnimationFrame(step)\n }\n this.scrollTimer = requestAnimationFrame(step)\n },\n pauseScroll() { this.paused = true },\n resumeScroll() { this.paused = false }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.risk-warning {\n height: 100%;\n display: flex;\n flex-direction: column;\n\n .panel-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n}\n\n.warning-summary {\n display: flex;\n align-items: baseline;\n gap: 10px;\n margin-bottom: 10px;\n flex-shrink: 0;\n}\n\n.summary-num {\n font-size: 28px;\n font-weight: bold;\n color: #FFB020;\n font-family: 'Courier New', monospace;\n}\n\n.summary-text {\n font-size: 13px;\n color: $text-muted;\n}\n\n.list-wrapper {\n flex: 1;\n overflow: hidden;\n}\n\n.warning-item {\n padding: 10px 12px;\n margin-bottom: 8px;\n border-left: 3px solid $accent-orange;\n background: rgba(255, 152, 0, 0.04);\n border-radius: 0 4px 4px 0;\n}\n\n.warning-lab {\n font-size: 13px;\n font-weight: bold;\n color: #fff;\n margin-bottom: 4px;\n}\n\n.warning-detail {\n font-size: 12px;\n color: #FFB020;\n margin-bottom: 3px;\n\n .warn-value {\n color: #FFB020;\n font-weight: bold;\n }\n}\n\n.warning-time {\n font-size: 11px;\n color: $text-muted;\n}\n</style>\n"],"mappings":"AAkCA,SAAAA,kBAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,UAAA;MACAC,IAAA;MACAC,UAAA;MACAC,WAAA;MACAC,MAAA;IACA;EACA;EACA,MAAAC,QAAA;IACA,MAAAC,GAAA,SAAAT,kBAAA;IACA,KAAAG,UAAA,GAAAM,GAAA,CAAAP,IAAA,CAAAC,UAAA;IACA,KAAAC,IAAA,GAAAK,GAAA,CAAAP,IAAA,CAAAE,IAAA;IACA,KAAAM,SAAA,YAAAC,WAAA;EACA;EACAC,cAAA;IACA,SAAAN,WAAA,EAAAO,oBAAA,MAAAP,WAAA;EACA;EACAQ,OAAA;IACAH,YAAA;MACA,MAAAI,OAAA,QAAAC,KAAA,CAAAC,WAAA;MACA,MAAAC,KAAA,QAAAF,KAAA,CAAAG,SAAA;MACA,KAAAJ,OAAA,KAAAG,KAAA;MACA,KAAAb,UAAA,GAAAa,KAAA,CAAAE,YAAA,GAAAL,OAAA,CAAAK,YAAA;MACA,SAAAf,UAAA;QACA,KAAAK,SAAA,YAAAW,WAAA;MACA;IACA;IACAA,YAAA;MACA,MAAAN,OAAA,QAAAC,KAAA,CAAAC,WAAA;MACA,MAAAC,KAAA,QAAAF,KAAA,CAAAG,SAAA;MACA,KAAAJ,OAAA,KAAAG,KAAA;MACA,MAAAI,WAAA,GAAAJ,KAAA,CAAAE,YAAA;MACA,MAAAG,KAAA;MAEA,MAAAC,IAAA,GAAAA,CAAA;QACA,UAAAjB,MAAA;UACAQ,OAAA,CAAAU,SAAA,IAAAF,KAAA;UACA,IAAAR,OAAA,CAAAU,SAAA,IAAAH,WAAA;YACAP,OAAA,CAAAU,SAAA,IAAAH,WAAA;UACA;QACA;QACA,KAAAhB,WAAA,GAAAoB,qBAAA,CAAAF,IAAA;MACA;MACA,KAAAlB,WAAA,GAAAoB,qBAAA,CAAAF,IAAA;IACA;IACAG,YAAA;MAAA,KAAApB,MAAA;IAAA;IACAqB,aAAA;MAAA,KAAArB,MAAA;IAAA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
