| 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 { getLabBasicStats } from '@/api';\nexport default {\n name: 'BasicStats',\n data() {\n return {\n stats: {\n totalLabs: 0,\n keyLabs: 0,\n specialLabs: 0\n },\n chart: null\n };\n },\n async mounted() {\n const res = await getLabBasicStats();\n this.stats = res.data;\n this.$nextTick(() => this.initChart(res.data.yearlyData));\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 }\n },\n legend: {\n top: 0,\n right: 0,\n textStyle: {\n color: '#8cb8e6',\n fontSize: 11\n },\n itemWidth: 12,\n itemHeight: 8\n },\n grid: {\n left: 40,\n right: 10,\n top: 30,\n bottom: 24\n },\n xAxis: {\n type: 'category',\n data: data.map(d => d.year),\n axisLine: {\n lineStyle: {\n color: '#1a3a6a'\n }\n },\n axisLabel: {\n color: '#8cb8e6',\n fontSize: 11\n }\n },\n yAxis: {\n type: 'value',\n splitLine: {\n lineStyle: {\n color: 'rgba(26,58,106,0.4)'\n }\n },\n axisLine: {\n show: false\n },\n axisLabel: {\n color: '#8cb8e6',\n fontSize: 11\n }\n },\n series: [{\n name: '实验室总数',\n type: 'bar',\n barWidth: 14,\n data: data.map(d => d.total),\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: '#2196f3'\n }, {\n offset: 1,\n color: 'rgba(33,150,243,0.3)'\n }])\n }\n }, {\n name: '重点实验室',\n type: 'bar',\n barWidth: 14,\n data: data.map(d => d.key),\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: '#ff9800'\n }, {\n offset: 1,\n color: 'rgba(255,152,0,0.3)'\n }])\n }\n }, {\n name: '特种实验室',\n type: 'bar',\n barWidth: 14,\n data: data.map(d => d.special),\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n offset: 0,\n color: '#f44336'\n }, {\n offset: 1,\n color: 'rgba(244,67,54,0.3)'\n }])\n }\n }]\n };\n this.chart.setOption(option);\n }\n }\n};","map":{"version":3,"names":["echarts","getLabBasicStats","name","data","stats","totalLabs","keyLabs","specialLabs","chart","mounted","res","$nextTick","initChart","yearlyData","beforeDestroy","dispose","methods","init","$refs","option","tooltip","trigger","backgroundColor","borderColor","textStyle","color","legend","top","right","fontSize","itemWidth","itemHeight","grid","left","bottom","xAxis","type","map","d","year","axisLine","lineStyle","axisLabel","yAxis","splitLine","show","series","barWidth","total","itemStyle","graphic","LinearGradient","offset","key","special","setOption"],"sources":["src/components/LabStats/BasicStats.vue"],"sourcesContent":["<template>\n <div class=\"panel-box basic-stats\">\n <div class=\"panel-title\">实验室基本情况统计</div>\n <div class=\"panel-content\">\n <div class=\"stat-cards\">\n <div class=\"stat-card\">\n <div class=\"stat-value\" style=\"color: #2196f3\">{{ stats.totalLabs }}<span class=\"stat-unit\">+</span></div>\n <div class=\"stat-label\">实验室总数</div>\n </div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" style=\"color: #ff9800\">{{ stats.keyLabs }}</div>\n <div class=\"stat-label\">重点实验室</div>\n </div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" style=\"color: #f44336\">{{ stats.specialLabs }}</div>\n <div class=\"stat-label\">特种实验室</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 { getLabBasicStats } from '@/api'\n\nexport default {\n name: 'BasicStats',\n data() {\n return {\n stats: { totalLabs: 0, keyLabs: 0, specialLabs: 0 },\n chart: null\n }\n },\n async mounted() {\n const res = await getLabBasicStats()\n this.stats = res.data\n this.$nextTick(() => this.initChart(res.data.yearlyData))\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' }\n },\n legend: {\n top: 0,\n right: 0,\n textStyle: { color: '#8cb8e6', fontSize: 11 },\n itemWidth: 12,\n itemHeight: 8\n },\n grid: { left: 40, right: 10, top: 30, bottom: 24 },\n xAxis: {\n type: 'category',\n data: data.map(d => d.year),\n axisLine: { lineStyle: { color: '#1a3a6a' } },\n axisLabel: { color: '#8cb8e6', fontSize: 11 }\n },\n yAxis: {\n type: 'value',\n splitLine: { lineStyle: { color: 'rgba(26,58,106,0.4)' } },\n axisLine: { show: false },\n axisLabel: { color: '#8cb8e6', fontSize: 11 }\n },\n series: [\n {\n name: '实验室总数',\n type: 'bar',\n barWidth: 14,\n data: data.map(d => d.total),\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: '#2196f3' },\n { offset: 1, color: 'rgba(33,150,243,0.3)' }\n ])\n }\n },\n {\n name: '重点实验室',\n type: 'bar',\n barWidth: 14,\n data: data.map(d => d.key),\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: '#ff9800' },\n { offset: 1, color: 'rgba(255,152,0,0.3)' }\n ])\n }\n },\n {\n name: '特种实验室',\n type: 'bar',\n barWidth: 14,\n data: data.map(d => d.special),\n itemStyle: {\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: '#f44336' },\n { offset: 1, color: 'rgba(244,67,54,0.3)' }\n ])\n }\n }\n ]\n }\n this.chart.setOption(option)\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.basic-stats {\n height: 100%;\n}\n\n.stat-cards {\n display: flex;\n gap: 16px;\n margin-bottom: 12px;\n}\n\n.stat-card {\n flex: 1;\n text-align: center;\n padding: 8px;\n background: rgba(255, 255, 255, 0.03);\n border-radius: 4px;\n border: 1px solid rgba(255, 255, 255, 0.05);\n}\n\n.stat-value {\n font-size: 28px;\n font-weight: bold;\n font-family: 'Courier New', monospace;\n}\n\n.stat-unit {\n font-size: 16px;\n margin-left: 2px;\n}\n\n.stat-label {\n font-size: 12px;\n color: $text-secondary;\n margin-top: 4px;\n}\n\n.chart-area {\n width: 100%;\n height: 200px;\n}\n</style>\n"],"mappings":";;AAwBA,YAAAA,OAAA;AACA,SAAAC,gBAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,KAAA;QAAAC,SAAA;QAAAC,OAAA;QAAAC,WAAA;MAAA;MACAC,KAAA;IACA;EACA;EACA,MAAAC,QAAA;IACA,MAAAC,GAAA,SAAAT,gBAAA;IACA,KAAAG,KAAA,GAAAM,GAAA,CAAAP,IAAA;IACA,KAAAQ,SAAA,YAAAC,SAAA,CAAAF,GAAA,CAAAP,IAAA,CAAAU,UAAA;EACA;EACAC,cAAA;IACA,SAAAN,KAAA,OAAAA,KAAA,CAAAO,OAAA;EACA;EACAC,OAAA;IACAJ,UAAAT,IAAA;MACA,KAAAK,KAAA,GAAAR,OAAA,CAAAiB,IAAA,MAAAC,KAAA,CAAAV,KAAA;MACA,MAAAW,MAAA;QACAC,OAAA;UACAC,OAAA;UACAC,eAAA;UACAC,WAAA;UACAC,SAAA;YAAAC,KAAA;UAAA;QACA;QACAC,MAAA;UACAC,GAAA;UACAC,KAAA;UACAJ,SAAA;YAAAC,KAAA;YAAAI,QAAA;UAAA;UACAC,SAAA;UACAC,UAAA;QACA;QACAC,IAAA;UAAAC,IAAA;UAAAL,KAAA;UAAAD,GAAA;UAAAO,MAAA;QAAA;QACAC,KAAA;UACAC,IAAA;UACAjC,IAAA,EAAAA,IAAA,CAAAkC,GAAA,CAAAC,CAAA,IAAAA,CAAA,CAAAC,IAAA;UACAC,QAAA;YAAAC,SAAA;cAAAhB,KAAA;YAAA;UAAA;UACAiB,SAAA;YAAAjB,KAAA;YAAAI,QAAA;UAAA;QACA;QACAc,KAAA;UACAP,IAAA;UACAQ,SAAA;YAAAH,SAAA;cAAAhB,KAAA;YAAA;UAAA;UACAe,QAAA;YAAAK,IAAA;UAAA;UACAH,SAAA;YAAAjB,KAAA;YAAAI,QAAA;UAAA;QACA;QACAiB,MAAA,GACA;UACA5C,IAAA;UACAkC,IAAA;UACAW,QAAA;UACA5C,IAAA,EAAAA,IAAA,CAAAkC,GAAA,CAAAC,CAAA,IAAAA,CAAA,CAAAU,KAAA;UACAC,SAAA;YACAxB,KAAA,MAAAzB,OAAA,CAAAkD,OAAA,CAAAC,cAAA,cACA;cAAAC,MAAA;cAAA3B,KAAA;YAAA,GACA;cAAA2B,MAAA;cAAA3B,KAAA;YAAA,EACA;UACA;QACA,GACA;UACAvB,IAAA;UACAkC,IAAA;UACAW,QAAA;UACA5C,IAAA,EAAAA,IAAA,CAAAkC,GAAA,CAAAC,CAAA,IAAAA,CAAA,CAAAe,GAAA;UACAJ,SAAA;YACAxB,KAAA,MAAAzB,OAAA,CAAAkD,OAAA,CAAAC,cAAA,cACA;cAAAC,MAAA;cAAA3B,KAAA;YAAA,GACA;cAAA2B,MAAA;cAAA3B,KAAA;YAAA,EACA;UACA;QACA,GACA;UACAvB,IAAA;UACAkC,IAAA;UACAW,QAAA;UACA5C,IAAA,EAAAA,IAAA,CAAAkC,GAAA,CAAAC,CAAA,IAAAA,CAAA,CAAAgB,OAAA;UACAL,SAAA;YACAxB,KAAA,MAAAzB,OAAA,CAAAkD,OAAA,CAAAC,cAAA,cACA;cAAAC,MAAA;cAAA3B,KAAA;YAAA,GACA;cAAA2B,MAAA;cAAA3B,KAAA;YAAA,EACA;UACA;QACA;MAEA;MACA,KAAAjB,KAAA,CAAA+C,SAAA,CAAApC,MAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
