{"ast":null,"code":"import * as echarts from 'echarts';\nimport { getComplianceRate } from '@/api';\nexport default {\n  name: 'ComplianceRing',\n  data() {\n    return {\n      chart: null,\n      passed: 0,\n      total: 0\n    };\n  },\n  async mounted() {\n    const res = await getComplianceRate();\n    this.passed = res.data.details.passed;\n    this.total = res.data.details.total;\n    this.$nextTick(() => this.initChart(res.data));\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        series: [{\n          type: 'gauge',\n          startAngle: 225,\n          endAngle: -45,\n          radius: '90%',\n          center: ['50%', '52%'],\n          min: 0,\n          max: 100,\n          progress: {\n            show: true,\n            width: 16,\n            itemStyle: {\n              color: {\n                type: 'linear',\n                x: 0,\n                y: 0,\n                x2: 1,\n                y2: 0,\n                colorStops: [{\n                  offset: 0,\n                  color: '#1e88e5'\n                }, {\n                  offset: 0.5,\n                  color: '#00e5ff'\n                }, {\n                  offset: 1,\n                  color: '#4caf50'\n                }]\n              }\n            }\n          },\n          axisLine: {\n            lineStyle: {\n              width: 16,\n              color: [[1, 'rgba(255,255,255,0.06)']]\n            }\n          },\n          axisTick: {\n            show: false\n          },\n          splitLine: {\n            show: false\n          },\n          axisLabel: {\n            show: false\n          },\n          pointer: {\n            show: false\n          },\n          title: {\n            show: false\n          },\n          detail: {\n            fontSize: 42,\n            fontWeight: 'bold',\n            color: '#fff',\n            offsetCenter: [0, 0],\n            formatter: '{value}%',\n            fontFamily: 'Courier New'\n          },\n          data: [{\n            value: data.rate\n          }]\n        }]\n      };\n      this.chart.setOption(option);\n    }\n  }\n};","map":{"version":3,"names":["echarts","getComplianceRate","name","data","chart","passed","total","mounted","res","details","$nextTick","initChart","beforeDestroy","dispose","methods","init","$refs","option","series","type","startAngle","endAngle","radius","center","min","max","progress","show","width","itemStyle","color","x","y","x2","y2","colorStops","offset","axisLine","lineStyle","axisTick","splitLine","axisLabel","pointer","title","detail","fontSize","fontWeight","offsetCenter","formatter","fontFamily","value","rate","setOption"],"sources":["src/components/LabStats/ComplianceRing.vue"],"sourcesContent":["<template>\n  <div class=\"panel-box compliance-ring\">\n    <div class=\"panel-title\">安全合规率</div>\n    <div class=\"panel-content\">\n      <div ref=\"chart\" class=\"chart-area\"></div>\n      <div class=\"ring-info\">\n        <span class=\"ring-desc\">实验室安全达标率</span>\n        <span class=\"ring-detail\">已达标 <em>{{ passed }}</em> / 共 <em>{{ total }}</em></span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport * as echarts from 'echarts'\nimport { getComplianceRate } from '@/api'\n\nexport default {\n  name: 'ComplianceRing',\n  data() {\n    return {\n      chart: null,\n      passed: 0,\n      total: 0\n    }\n  },\n  async mounted() {\n    const res = await getComplianceRate()\n    this.passed = res.data.details.passed\n    this.total = res.data.details.total\n    this.$nextTick(() => this.initChart(res.data))\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        series: [\n          {\n            type: 'gauge',\n            startAngle: 225,\n            endAngle: -45,\n            radius: '90%',\n            center: ['50%', '52%'],\n            min: 0,\n            max: 100,\n            progress: {\n              show: true,\n              width: 16,\n              itemStyle: {\n                color: {\n                  type: 'linear',\n                  x: 0, y: 0, x2: 1, y2: 0,\n                  colorStops: [\n                    { offset: 0, color: '#1e88e5' },\n                    { offset: 0.5, color: '#00e5ff' },\n                    { offset: 1, color: '#4caf50' }\n                  ]\n                }\n              }\n            },\n            axisLine: {\n              lineStyle: {\n                width: 16,\n                color: [[1, 'rgba(255,255,255,0.06)']]\n              }\n            },\n            axisTick: { show: false },\n            splitLine: { show: false },\n            axisLabel: { show: false },\n            pointer: { show: false },\n            title: { show: false },\n            detail: {\n              fontSize: 42,\n              fontWeight: 'bold',\n              color: '#fff',\n              offsetCenter: [0, 0],\n              formatter: '{value}%',\n              fontFamily: 'Courier New'\n            },\n            data: [{ value: data.rate }]\n          }\n        ]\n      }\n      this.chart.setOption(option)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.compliance-ring {\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.chart-area {\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n}\n\n.ring-info {\n  text-align: center;\n  padding-bottom: 4px;\n  flex-shrink: 0;\n}\n\n.ring-desc {\n  display: block;\n  font-size: 13px;\n  color: $text-secondary;\n  margin-bottom: 4px;\n}\n\n.ring-detail {\n  font-size: 12px;\n  color: $text-muted;\n\n  em {\n    font-style: normal;\n    color: $accent-cyan;\n    font-weight: bold;\n    font-family: 'Courier New', monospace;\n  }\n}\n</style>\n"],"mappings":"AAcA,YAAAA,OAAA;AACA,SAAAC,iBAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,KAAA;MACAC,MAAA;MACAC,KAAA;IACA;EACA;EACA,MAAAC,QAAA;IACA,MAAAC,GAAA,SAAAP,iBAAA;IACA,KAAAI,MAAA,GAAAG,GAAA,CAAAL,IAAA,CAAAM,OAAA,CAAAJ,MAAA;IACA,KAAAC,KAAA,GAAAE,GAAA,CAAAL,IAAA,CAAAM,OAAA,CAAAH,KAAA;IACA,KAAAI,SAAA,YAAAC,SAAA,CAAAH,GAAA,CAAAL,IAAA;EACA;EACAS,cAAA;IACA,SAAAR,KAAA,OAAAA,KAAA,CAAAS,OAAA;EACA;EACAC,OAAA;IACAH,UAAAR,IAAA;MACA,KAAAC,KAAA,GAAAJ,OAAA,CAAAe,IAAA,MAAAC,KAAA,CAAAZ,KAAA;MACA,MAAAa,MAAA;QACAC,MAAA,GACA;UACAC,IAAA;UACAC,UAAA;UACAC,QAAA;UACAC,MAAA;UACAC,MAAA;UACAC,GAAA;UACAC,GAAA;UACAC,QAAA;YACAC,IAAA;YACAC,KAAA;YACAC,SAAA;cACAC,KAAA;gBACAX,IAAA;gBACAY,CAAA;gBAAAC,CAAA;gBAAAC,EAAA;gBAAAC,EAAA;gBACAC,UAAA,GACA;kBAAAC,MAAA;kBAAAN,KAAA;gBAAA,GACA;kBAAAM,MAAA;kBAAAN,KAAA;gBAAA,GACA;kBAAAM,MAAA;kBAAAN,KAAA;gBAAA;cAEA;YACA;UACA;UACAO,QAAA;YACAC,SAAA;cACAV,KAAA;cACAE,KAAA;YACA;UACA;UACAS,QAAA;YAAAZ,IAAA;UAAA;UACAa,SAAA;YAAAb,IAAA;UAAA;UACAc,SAAA;YAAAd,IAAA;UAAA;UACAe,OAAA;YAAAf,IAAA;UAAA;UACAgB,KAAA;YAAAhB,IAAA;UAAA;UACAiB,MAAA;YACAC,QAAA;YACAC,UAAA;YACAhB,KAAA;YACAiB,YAAA;YACAC,SAAA;YACAC,UAAA;UACA;UACA9C,IAAA;YAAA+C,KAAA,EAAA/C,IAAA,CAAAgD;UAAA;QACA;MAEA;MACA,KAAA/C,KAAA,CAAAgD,SAAA,CAAAnC,MAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}