{"ast":null,"code":"import * as echarts from 'echarts';\nimport { getDeviceStats } from '@/api';\nexport default {\n  name: 'DeviceStats',\n  data() {\n    return {\n      online: 0,\n      offline: 0,\n      devices: [],\n      chart: null\n    };\n  },\n  async mounted() {\n    const res = await getDeviceStats();\n    this.online = res.data.online;\n    this.offline = res.data.offline;\n    this.devices = res.data.devices;\n    this.$nextTick(() => this.initChart(res.data.onlineRate));\n  },\n  beforeDestroy() {\n    if (this.chart) this.chart.dispose();\n  },\n  methods: {\n    initChart(rate) {\n      this.chart = echarts.init(this.$refs.chart);\n      const option = {\n        series: [{\n          type: 'gauge',\n          startAngle: 225,\n          endAngle: -45,\n          radius: '88%',\n          center: ['50%', '55%'],\n          min: 0,\n          max: 100,\n          progress: {\n            show: true,\n            width: 14,\n            itemStyle: {\n              color: {\n                type: 'linear',\n                x: 0,\n                y: 1,\n                x2: 0,\n                y2: 0,\n                colorStops: [{\n                  offset: 0,\n                  color: '#144366'\n                }, {\n                  offset: 0.5,\n                  color: '#226D8E'\n                }, {\n                  offset: 1,\n                  color: '#47D7FF'\n                }]\n              }\n            }\n          },\n          axisLine: {\n            lineStyle: {\n              width: 14,\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: true,\n            offsetCenter: [0, '30%'],\n            fontSize: 12,\n            color: '#8cb8e6'\n          },\n          detail: {\n            fontSize: 28,\n            fontWeight: 'bold',\n            color: '#fff',\n            offsetCenter: [0, '-5%'],\n            formatter: '{value}%',\n            fontFamily: 'Courier New'\n          },\n          data: [{\n            value: rate,\n            name: '设备在线率'\n          }]\n        }]\n      };\n      this.chart.setOption(option);\n    }\n  }\n};","map":{"version":3,"names":["echarts","getDeviceStats","name","data","online","offline","devices","chart","mounted","res","$nextTick","initChart","onlineRate","beforeDestroy","dispose","methods","rate","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","offsetCenter","fontSize","detail","fontWeight","formatter","fontFamily","value","setOption"],"sources":["src/components/LabStats/DeviceStats.vue"],"sourcesContent":["<template>\n  <div class=\"panel-box device-stats\">\n    <div class=\"panel-title\">智能环境感知应用设备统计</div>\n    <div class=\"panel-content\">\n      <div class=\"status-row\">\n        <div class=\"status-box\">\n          <div class=\"status-label\">在线设备</div>\n          <div class=\"status-value\">{{ online }}</div>\n        </div>\n        <div class=\"status-box\">\n          <div class=\"status-label\">离线设备</div>\n          <div class=\"status-value offline\">{{ offline }}</div>\n        </div>\n      </div>\n      <div class=\"main-row\">\n        <div ref=\"chart\" class=\"gauge-area\"></div>\n        <div class=\"device-list\">\n          <div class=\"device-item\" v-for=\"item in devices\" :key=\"item.name\">\n            <span class=\"device-name\">{{ item.name }}</span>\n            <span class=\"device-count\">{{ item.count }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport * as echarts from 'echarts'\nimport { getDeviceStats } from '@/api'\n\nexport default {\n  name: 'DeviceStats',\n  data() {\n    return {\n      online: 0,\n      offline: 0,\n      devices: [],\n      chart: null\n    }\n  },\n  async mounted() {\n    const res = await getDeviceStats()\n    this.online = res.data.online\n    this.offline = res.data.offline\n    this.devices = res.data.devices\n    this.$nextTick(() => this.initChart(res.data.onlineRate))\n  },\n  beforeDestroy() {\n    if (this.chart) this.chart.dispose()\n  },\n  methods: {\n    initChart(rate) {\n      this.chart = echarts.init(this.$refs.chart)\n      const option = {\n        series: [{\n          type: 'gauge',\n          startAngle: 225,\n          endAngle: -45,\n          radius: '88%',\n          center: ['50%', '55%'],\n          min: 0,\n          max: 100,\n          progress: {\n            show: true,\n            width: 14,\n            itemStyle: {\n              color: {\n                type: 'linear',\n                x: 0, y: 1, x2: 0, y2: 0,\n                colorStops: [\n                  { offset: 0, color: '#144366' },\n                  { offset: 0.5, color: '#226D8E' },\n                  { offset: 1, color: '#47D7FF' }\n                ]\n              }\n            }\n          },\n          axisLine: {\n            lineStyle: { width: 14, color: [[1, 'rgba(255,255,255,0.06)']] }\n          },\n          axisTick: { show: false },\n          splitLine: { show: false },\n          axisLabel: { show: false },\n          pointer: { show: false },\n          title: {\n            show: true,\n            offsetCenter: [0, '30%'],\n            fontSize: 12,\n            color: '#8cb8e6'\n          },\n          detail: {\n            fontSize: 28,\n            fontWeight: 'bold',\n            color: '#fff',\n            offsetCenter: [0, '-5%'],\n            formatter: '{value}%',\n            fontFamily: 'Courier New'\n          },\n          data: [{ value: rate, name: '设备在线率' }]\n        }]\n      }\n      this.chart.setOption(option)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.device-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.status-row {\n  display: flex;\n  gap: 10px;\n  flex-shrink: 0;\n  margin-bottom: 6px;\n}\n\n.status-box {\n  flex: 1;\n  text-align: center;\n  padding: 10px 0;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.05);\n  border-radius: 4px;\n}\n\n.status-label {\n  font-size: 12px;\n  color: #7EACC8;\n  margin-bottom: 4px;\n}\n\n.status-value {\n  font-size: 28px;\n  font-weight: bold;\n  color: $accent-cyan;\n  font-family: 'Courier New', monospace;\n\n  &.offline {\n    color: #7EACC8;\n  }\n}\n\n.main-row {\n  flex: 1;\n  display: flex;\n  min-height: 0;\n}\n\n.gauge-area {\n  flex: 1;\n  min-height: 0;\n}\n\n.device-list {\n  width: 140px;\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 8px;\n}\n\n.device-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 10px;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.05);\n  border-radius: 4px;\n}\n\n.device-name {\n  font-size: 12px;\n  color: $text-secondary;\n}\n\n.device-count {\n  font-size: 18px;\n  font-weight: bold;\n  color: $accent-cyan;\n  font-family: 'Courier New', monospace;\n}\n</style>\n"],"mappings":"AA4BA,YAAAA,OAAA;AACA,SAAAC,cAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,MAAA;MACAC,OAAA;MACAC,OAAA;MACAC,KAAA;IACA;EACA;EACA,MAAAC,QAAA;IACA,MAAAC,GAAA,SAAAR,cAAA;IACA,KAAAG,MAAA,GAAAK,GAAA,CAAAN,IAAA,CAAAC,MAAA;IACA,KAAAC,OAAA,GAAAI,GAAA,CAAAN,IAAA,CAAAE,OAAA;IACA,KAAAC,OAAA,GAAAG,GAAA,CAAAN,IAAA,CAAAG,OAAA;IACA,KAAAI,SAAA,YAAAC,SAAA,CAAAF,GAAA,CAAAN,IAAA,CAAAS,UAAA;EACA;EACAC,cAAA;IACA,SAAAN,KAAA,OAAAA,KAAA,CAAAO,OAAA;EACA;EACAC,OAAA;IACAJ,UAAAK,IAAA;MACA,KAAAT,KAAA,GAAAP,OAAA,CAAAiB,IAAA,MAAAC,KAAA,CAAAX,KAAA;MACA,MAAAY,MAAA;QACAC,MAAA;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;cAAAV,KAAA;cAAAE,KAAA;YAAA;UACA;UACAS,QAAA;YAAAZ,IAAA;UAAA;UACAa,SAAA;YAAAb,IAAA;UAAA;UACAc,SAAA;YAAAd,IAAA;UAAA;UACAe,OAAA;YAAAf,IAAA;UAAA;UACAgB,KAAA;YACAhB,IAAA;YACAiB,YAAA;YACAC,QAAA;YACAf,KAAA;UACA;UACAgB,MAAA;YACAD,QAAA;YACAE,UAAA;YACAjB,KAAA;YACAc,YAAA;YACAI,SAAA;YACAC,UAAA;UACA;UACAhD,IAAA;YAAAiD,KAAA,EAAApC,IAAA;YAAAd,IAAA;UAAA;QACA;MACA;MACA,KAAAK,KAAA,CAAA8C,SAAA,CAAAlC,MAAA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}