| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.iterator.constructor.js\";\nimport \"core-js/modules/es.iterator.map.js\";\nimport * as echarts from 'echarts';\nimport { getPersonStats } from '@/api';\nexport default {\n name: 'PersonStats',\n data() {\n return {\n todayTotal: [0, 0, 0, 0, 0],\n currentLab: [0, 0, 0, 0],\n chart: null\n };\n },\n async mounted() {\n const res = await getPersonStats();\n this.todayTotal = res.data.todayTotal;\n this.currentLab = res.data.currentLab;\n this.$nextTick(() => this.initChart(res.data.hourlyData));\n },\n beforeDestroy() {\n if (this.chart) this.chart.dispose();\n },\n methods: {\n initChart(data) {\n this.chart = echarts.init(this.$refs.chart);\n const option = {\n tooltip: {\n trigger: 'axis',\n backgroundColor: 'rgba(13,34,71,0.9)',\n borderColor: '#1a3a6a',\n textStyle: {\n color: '#fff',\n fontSize: 12\n }\n },\n legend: {\n top: 0,\n right: 0,\n textStyle: {\n color: '#8cb8e6',\n fontSize: 11\n },\n itemWidth: 16,\n itemHeight: 2,\n itemGap: 16\n },\n grid: {\n left: 36,\n right: 12,\n top: 28,\n bottom: 22\n },\n xAxis: {\n type: 'category',\n data: data.map(d => d.hour),\n boundaryGap: false,\n axisLine: {\n lineStyle: {\n color: '#1a3a6a'\n }\n },\n axisLabel: {\n color: '#5a7da8',\n fontSize: 10\n },\n axisTick: {\n show: false\n }\n },\n yAxis: {\n type: 'value',\n max: 150,\n interval: 30,\n splitLine: {\n lineStyle: {\n color: 'rgba(26,58,106,0.3)',\n type: 'dashed'\n }\n },\n axisLine: {\n show: false\n },\n axisLabel: {\n color: '#5a7da8',\n fontSize: 11\n },\n axisTick: {\n show: false\n }\n },\n series: [{\n name: '进入人数',\n type: 'line',\n smooth: true,\n symbol: 'none',\n lineStyle: {\n color: '#2196f3',\n width: 2\n },\n areaStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: 'rgba(33,150,243,0.25)'\n }, {\n offset: 1,\n color: 'rgba(33,150,243,0.02)'\n }])\n },\n data: data.map(d => d.enter)\n }, {\n name: '实验人数',\n type: 'line',\n smooth: true,\n symbol: 'none',\n lineStyle: {\n color: '#00e5ff',\n width: 2\n },\n areaStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: 'rgba(0,229,255,0.15)'\n }, {\n offset: 1,\n color: 'rgba(0,229,255,0.02)'\n }])\n },\n data: data.map(d => d.lab)\n }]\n };\n this.chart.setOption(option);\n }\n }\n};","map":{"version":3,"names":["echarts","getPersonStats","name","data","todayTotal","currentLab","chart","mounted","res","$nextTick","initChart","hourlyData","beforeDestroy","dispose","methods","init","$refs","option","tooltip","trigger","backgroundColor","borderColor","textStyle","color","fontSize","legend","top","right","itemWidth","itemHeight","itemGap","grid","left","bottom","xAxis","type","map","d","hour","boundaryGap","axisLine","lineStyle","axisLabel","axisTick","show","yAxis","max","interval","splitLine","series","smooth","symbol","width","areaStyle","graphic","LinearGradient","offset","enter","lab","setOption"],"sources":["src/components/LabStats/PersonStats.vue"],"sourcesContent":["<template>\n <div class=\"panel-box person-stats\">\n <div class=\"panel-title\">实验室进入人数统计及走势</div>\n <div class=\"panel-content\">\n <div class=\"counter-row\">\n <div class=\"counter-group\">\n <span class=\"counter-label\">今日总进入人数</span>\n <div class=\"digit-boxes\">\n <div class=\"digit-box\" v-for=\"(d, i) in todayTotal\" :key=\"'t'+i\">\n <span class=\"digit\">{{ d }}</span>\n </div>\n </div>\n </div>\n <div class=\"counter-group\">\n <span class=\"counter-label\">当前正在实验人数</span>\n <div class=\"digit-boxes\">\n <div class=\"digit-box\" v-for=\"(d, i) in currentLab\" :key=\"'c'+i\">\n <span class=\"digit\">{{ d }}</span>\n </div>\n </div>\n </div>\n </div>\n <div ref=\"chart\" class=\"chart-area\"></div>\n </div>\n </div>\n</template>\n\n<script>\nimport * as echarts from 'echarts'\nimport { getPersonStats } from '@/api'\n\nexport default {\n name: 'PersonStats',\n data() {\n return {\n todayTotal: [0, 0, 0, 0, 0],\n currentLab: [0, 0, 0, 0],\n chart: null\n }\n },\n async mounted() {\n const res = await getPersonStats()\n this.todayTotal = res.data.todayTotal\n this.currentLab = res.data.currentLab\n this.$nextTick(() => this.initChart(res.data.hourlyData))\n },\n beforeDestroy() {\n if (this.chart) this.chart.dispose()\n },\n methods: {\n initChart(data) {\n this.chart = echarts.init(this.$refs.chart)\n const option = {\n tooltip: {\n trigger: 'axis',\n backgroundColor: 'rgba(13,34,71,0.9)',\n borderColor: '#1a3a6a',\n textStyle: { color: '#fff', fontSize: 12 }\n },\n legend: {\n top: 0,\n right: 0,\n textStyle: { color: '#8cb8e6', fontSize: 11 },\n itemWidth: 16,\n itemHeight: 2,\n itemGap: 16\n },\n grid: { left: 36, right: 12, top: 28, bottom: 22 },\n xAxis: {\n type: 'category',\n data: data.map(d => d.hour),\n boundaryGap: false,\n axisLine: { lineStyle: { color: '#1a3a6a' } },\n axisLabel: { color: '#5a7da8', fontSize: 10 },\n axisTick: { show: false }\n },\n yAxis: {\n type: 'value',\n max: 150,\n interval: 30,\n splitLine: { lineStyle: { color: 'rgba(26,58,106,0.3)', type: 'dashed' } },\n axisLine: { show: false },\n axisLabel: { color: '#5a7da8', fontSize: 11 },\n axisTick: { show: false }\n },\n series: [\n {\n name: '进入人数',\n type: 'line',\n smooth: true,\n symbol: 'none',\n lineStyle: { color: '#2196f3', width: 2 },\n areaStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: 'rgba(33,150,243,0.25)' },\n { offset: 1, color: 'rgba(33,150,243,0.02)' }\n ])\n },\n data: data.map(d => d.enter)\n },\n {\n name: '实验人数',\n type: 'line',\n smooth: true,\n symbol: 'none',\n lineStyle: { color: '#00e5ff', width: 2 },\n areaStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: 'rgba(0,229,255,0.15)' },\n { offset: 1, color: 'rgba(0,229,255,0.02)' }\n ])\n },\n data: data.map(d => d.lab)\n }\n ]\n }\n this.chart.setOption(option)\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.person-stats {\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.counter-row {\n display: flex;\n justify-content: space-between;\n gap: 16px;\n flex-shrink: 0;\n margin-bottom: 8px;\n}\n\n.counter-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.counter-label {\n font-size: 12px;\n color: $text-secondary;\n}\n\n.digit-boxes {\n display: flex;\n gap: 6px;\n}\n\n.digit-box {\n width: 36px;\n height: 44px;\n background: linear-gradient(180deg, rgba(13,34,71,0.9), rgba(10,26,58,0.9));\n border: 1px solid rgba(30, 144, 255, 0.25);\n border-radius: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.digit {\n font-size: 26px;\n font-weight: bold;\n color: $accent-cyan;\n font-family: 'Courier New', monospace;\n text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);\n}\n\n.chart-area {\n flex: 1;\n min-height: 0;\n width: 100%;\n}\n</style>\n"],"mappings":";;AA4BA,YAAAA,OAAA;AACA,SAAAC,cAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,UAAA;MACAC,UAAA;MACAC,KAAA;IACA;EACA;EACA,MAAAC,QAAA;IACA,MAAAC,GAAA,SAAAP,cAAA;IACA,KAAAG,UAAA,GAAAI,GAAA,CAAAL,IAAA,CAAAC,UAAA;IACA,KAAAC,UAAA,GAAAG,GAAA,CAAAL,IAAA,CAAAE,UAAA;IACA,KAAAI,SAAA,YAAAC,SAAA,CAAAF,GAAA,CAAAL,IAAA,CAAAQ,UAAA;EACA;EACAC,cAAA;IACA,SAAAN,KAAA,OAAAA,KAAA,CAAAO,OAAA;EACA;EACAC,OAAA;IACAJ,UAAAP,IAAA;MACA,KAAAG,KAAA,GAAAN,OAAA,CAAAe,IAAA,MAAAC,KAAA,CAAAV,KAAA;MACA,MAAAW,MAAA;QACAC,OAAA;UACAC,OAAA;UACAC,eAAA;UACAC,WAAA;UACAC,SAAA;YAAAC,KAAA;YAAAC,QAAA;UAAA;QACA;QACAC,MAAA;UACAC,GAAA;UACAC,KAAA;UACAL,SAAA;YAAAC,KAAA;YAAAC,QAAA;UAAA;UACAI,SAAA;UACAC,UAAA;UACAC,OAAA;QACA;QACAC,IAAA;UAAAC,IAAA;UAAAL,KAAA;UAAAD,GAAA;UAAAO,MAAA;QAAA;QACAC,KAAA;UACAC,IAAA;UACAhC,IAAA,EAAAA,IAAA,CAAAiC,GAAA,CAAAC,CAAA,IAAAA,CAAA,CAAAC,IAAA;UACAC,WAAA;UACAC,QAAA;YAAAC,SAAA;cAAAlB,KAAA;YAAA;UAAA;UACAmB,SAAA;YAAAnB,KAAA;YAAAC,QAAA;UAAA;UACAmB,QAAA;YAAAC,IAAA;UAAA;QACA;QACAC,KAAA;UACAV,IAAA;UACAW,GAAA;UACAC,QAAA;UACAC,SAAA;YAAAP,SAAA;cAAAlB,KAAA;cAAAY,IAAA;YAAA;UAAA;UACAK,QAAA;YAAAI,IAAA;UAAA;UACAF,SAAA;YAAAnB,KAAA;YAAAC,QAAA;UAAA;UACAmB,QAAA;YAAAC,IAAA;UAAA;QACA;QACAK,MAAA,GACA;UACA/C,IAAA;UACAiC,IAAA;UACAe,MAAA;UACAC,MAAA;UACAV,SAAA;YAAAlB,KAAA;YAAA6B,KAAA;UAAA;UACAC,SAAA;YACA9B,KAAA,MAAAvB,OAAA,CAAAsD,OAAA,CAAAC,cAAA,cACA;cAAAC,MAAA;cAAAjC,KAAA;YAAA,GACA;cAAAiC,MAAA;cAAAjC,KAAA;YAAA,EACA;UACA;UACApB,IAAA,EAAAA,IAAA,CAAAiC,GAAA,CAAAC,CAAA,IAAAA,CAAA,CAAAoB,KAAA;QACA,GACA;UACAvD,IAAA;UACAiC,IAAA;UACAe,MAAA;UACAC,MAAA;UACAV,SAAA;YAAAlB,KAAA;YAAA6B,KAAA;UAAA;UACAC,SAAA;YACA9B,KAAA,MAAAvB,OAAA,CAAAsD,OAAA,CAAAC,cAAA,cACA;cAAAC,MAAA;cAAAjC,KAAA;YAAA,GACA;cAAAiC,MAAA;cAAAjC,KAAA;YAAA,EACA;UACA;UACApB,IAAA,EAAAA,IAAA,CAAAiC,GAAA,CAAAC,CAAA,IAAAA,CAAA,CAAAqB,GAAA;QACA;MAEA;MACA,KAAApD,KAAA,CAAAqD,SAAA,CAAA1C,MAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
