{"remainingRequest":"D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\cli-plugin-babel\\node_modules\\babel-loader\\lib\\index.js!D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\vue-loader-v15\\lib\\index.js??vue-loader-options!D:\\guoan\\ts-bigscreen-vue\\src\\components\\CardOverview.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\guoan\\ts-bigscreen-vue\\src\\components\\CardOverview.vue","mtime":1741250924096},{"path":"D:\\guoan\\ts-bigscreen-vue\\babel.config.js","mtime":1740967860001},{"path":"D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\cli-plugin-babel\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1740984332670},{"path":"D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\cli-plugin-babel\\node_modules\\babel-loader\\lib\\index.js","mtime":1740984332280},{"path":"D:\\guoan\\ts-bigscreen-vue\\node_modules\\@vue\\vue-loader-v15\\lib\\index.js","mtime":1740984469533}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:aW1wb3J0IF90b0NvbnN1bWFibGVBcnJheSBmcm9tICJEOi9ndW9hbi90cy1iaWdzY3JlZW4tdnVlL25vZGVfbW9kdWxlcy9AYmFiZWwvcnVudGltZS9oZWxwZXJzL2VzbS90b0NvbnN1bWFibGVBcnJheS5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLmFycmF5LmNvbmNhdC5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLmFycmF5Lm1hcC5qcyI7CmltcG9ydCAiY29yZS1qcy9tb2R1bGVzL2VzLml0ZXJhdG9yLmNvbnN0cnVjdG9yLmpzIjsKaW1wb3J0ICJjb3JlLWpzL21vZHVsZXMvZXMuaXRlcmF0b3IubWFwLmpzIjsKaW1wb3J0ICJjb3JlLWpzL21vZHVsZXMvZXMub2JqZWN0LnRvLXN0cmluZy5qcyI7CmltcG9ydCB7IGNhcmREYXRhIH0gZnJvbSAiLi4vZGF0YS9kYXNoYm9hcmREYXRhIjsKaW1wb3J0IHsgZm9ybWF0TnVtYmVyIH0gZnJvbSAiLi4vdXRpbHMvZm9ybWF0IjsKZXhwb3J0IGRlZmF1bHQgewogIG5hbWU6ICJDYXJkT3ZlcnZpZXciLAogIGNvbXBvbmVudHM6IHt9LAogIGRhdGE6IGZ1bmN0aW9uIGRhdGEoKSB7CiAgICByZXR1cm4gewogICAgICBjYXJkRGF0YTogY2FyZERhdGEKICAgIH07CiAgfSwKICBtZXRob2RzOiB7CiAgICBmb3JtYXROdW1iZXI6IGZvcm1hdE51bWJlciwKICAgIGdldFNjZW5lSWNvbjogZnVuY3Rpb24gZ2V0U2NlbmVJY29uKG5hbWUpIHsKICAgICAgdmFyIGljb25NYXAgPSB7CiAgICAgICAg6aOf5aCCOiAiZWwtaWNvbi1mb29kIiwKICAgICAgICDlm77kuabppoY6ICJlbC1pY29uLXJlYWRpbmciLAogICAgICAgIOWuv+iIjTogImVsLWljb24taG91c2UiLAogICAgICAgIOaVmeWtpualvDogImVsLWljb24tc2Nob29sIiwKICAgICAgICDotoXluII6ICJlbC1pY29uLXNob3BwaW5nLWNhcnQtZnVsbCIsCiAgICAgICAg5YW25LuWOiAiZWwtaWNvbi1tb3JlIgogICAgICB9OwogICAgICByZXR1cm4gaWNvbk1hcFtuYW1lXSB8fCAiZWwtaWNvbi1wbGFjZSI7CiAgICB9LAogICAgZ2V0U2NlbmVDb2xvcjogZnVuY3Rpb24gZ2V0U2NlbmVDb2xvcihpbmRleCkgewogICAgICB2YXIgY29sb3JzID0gWyIjNGE5MGUyIiwKICAgICAgLy8g5Lqu6JOdCiAgICAgICIjMDBDRUQxIiwKICAgICAgLy8g5aSp6Z2SCiAgICAgICIjOTU2MWUyIiwKICAgICAgLy8g57Sr6ImyCiAgICAgICIjNjRCNUY2IiwKICAgICAgLy8g5aSp6JOdCiAgICAgICIjZmY5ZjQzIiwKICAgICAgLy8g5Lqu5qmZCiAgICAgICIjNENBRjUwIiAvLyDnu7/oibIKICAgICAgXTsKICAgICAgcmV0dXJuIGNvbG9yc1tpbmRleCAlIGNvbG9ycy5sZW5ndGhdOwogICAgfSwKICAgIGdldFNjZW5lU3R5bGU6IGZ1bmN0aW9uIGdldFNjZW5lU3R5bGUoaW5kZXgpIHsKICAgICAgdmFyIGNvbG9yID0gdGhpcy5nZXRTY2VuZUNvbG9yKGluZGV4KTsKICAgICAgcmV0dXJuIHsKICAgICAgICBiYWNrZ3JvdW5kOiAibGluZWFyLWdyYWRpZW50KDEzNWRlZywgIi5jb25jYXQoY29sb3IsICIyMiwgIikuY29uY2F0KGNvbG9yLCAiNDQpIiksCiAgICAgICAgYm9yZGVyQ29sb3I6ICIiLmNvbmNhdChjb2xvciwgIjY2IikKICAgICAgfTsKICAgIH0sCiAgICBnZXRQZXJjZW50YWdlOiBmdW5jdGlvbiBnZXRQZXJjZW50YWdlKGNvdW50KSB7CiAgICAgIHZhciBtYXggPSBNYXRoLm1heC5hcHBseShNYXRoLCBfdG9Db25zdW1hYmxlQXJyYXkodGhpcy5jYXJkRGF0YS51c2FnZVNjZW5lcy5tYXAoZnVuY3Rpb24gKHNjZW5lKSB7CiAgICAgICAgcmV0dXJuIHNjZW5lLmNvdW50OwogICAgICB9KSkpOwogICAgICByZXR1cm4gY291bnQgLyBtYXggKiAxMDA7CiAgICB9CiAgfQp9Ow=="},{"version":3,"names":["cardData","formatNumber","name","components","data","methods","getSceneIcon","iconMap","食堂","图书馆","宿舍","教学楼","超市","其他","getSceneColor","index","colors","length","getSceneStyle","color","background","concat","borderColor","getPercentage","count","max","Math","apply","_toConsumableArray","usageScenes","map","scene"],"sources":["src/components/CardOverview.vue"],"sourcesContent":["<template>\r\n  <div class=\"card-overview\">\r\n    <div class=\"content\">\r\n      <div class=\"statistics\">\r\n        <div class=\"stat-item\">\r\n          <div class=\"icon-wrapper\">\r\n            <i class=\"el-icon-bank-card\"></i>\r\n          </div>\r\n          <div class=\"stat-content\">\r\n            <div class=\"value\">{{ formatNumber(cardData.totalCards) }}</div>\r\n            <div class=\"label\">发卡总量</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"stat-item\">\r\n          <div class=\"icon-wrapper\">\r\n            <i class=\"el-icon-data-line\"></i>\r\n          </div>\r\n          <div class=\"stat-content\">\r\n            <div class=\"value\">{{ formatNumber(cardData.dailyUsage) }}</div>\r\n            <div class=\"label\">日均使用量</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"usage-scenes\">\r\n        <div class=\"scene-header\">\r\n          <i class=\"el-icon-place\"></i>\r\n          <h4>使用场景分布</h4>\r\n        </div>\r\n        <div class=\"scene-list\">\r\n          <div\r\n            class=\"scene-item\"\r\n            v-for=\"(item, index) in cardData.usageScenes\"\r\n            :key=\"index\"\r\n          >\r\n            <div class=\"scene-info\">\r\n              <div class=\"icon-box\" :style=\"getSceneStyle(index)\">\r\n                <i :class=\"getSceneIcon(item.name)\"></i>\r\n              </div>\r\n              <div class=\"scene-details\">\r\n                <span class=\"name\">{{ item.name }}</span>\r\n                <el-progress\r\n                  :percentage=\"getPercentage(item.count)\"\r\n                  :color=\"getSceneColor(index)\"\r\n                  :show-text=\"false\"\r\n                  :stroke-width=\"4\"\r\n                />\r\n              </div>\r\n            </div>\r\n            <span class=\"value\">{{ formatNumber(item.count) }}次</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { cardData } from \"../data/dashboardData\";\r\nimport { formatNumber } from \"../utils/format\";\r\n\r\nexport default {\r\n  name: \"CardOverview\",\r\n  components: {},\r\n  data() {\r\n    return {\r\n      cardData,\r\n    };\r\n  },\r\n  methods: {\r\n    formatNumber,\r\n    getSceneIcon(name) {\r\n      const iconMap = {\r\n        食堂: \"el-icon-food\",\r\n        图书馆: \"el-icon-reading\",\r\n        宿舍: \"el-icon-house\",\r\n        教学楼: \"el-icon-school\",\r\n        超市: \"el-icon-shopping-cart-full\",\r\n        其他: \"el-icon-more\",\r\n      };\r\n      return iconMap[name] || \"el-icon-place\";\r\n    },\r\n    getSceneColor(index) {\r\n      const colors = [\r\n        \"#4a90e2\", // 亮蓝\r\n        \"#00CED1\", // 天青\r\n        \"#9561e2\", // 紫色\r\n        \"#64B5F6\", // 天蓝\r\n        \"#ff9f43\", // 亮橙\r\n        \"#4CAF50\", // 绿色\r\n      ];\r\n      return colors[index % colors.length];\r\n    },\r\n    getSceneStyle(index) {\r\n      const color = this.getSceneColor(index);\r\n      return {\r\n        background: `linear-gradient(135deg, ${color}22, ${color}44)`,\r\n        borderColor: `${color}66`,\r\n      };\r\n    },\r\n    getPercentage(count) {\r\n      const max = Math.max(\r\n        ...this.cardData.usageScenes.map((scene) => scene.count)\r\n      );\r\n      return (count / max) * 100;\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.card-overview {\r\n  height: 100%;\r\n  color: #fff;\r\n\r\n  .content {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    padding: 5px;\r\n\r\n    .statistics {\r\n      display: flex;\r\n      justify-content: space-around;\r\n      gap: 20px;\r\n\r\n      .stat-item {\r\n        flex: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n        // padding: 15px;\r\n        // background: rgba(74, 144, 226, 0.05);\r\n        // border-radius: 10px;\r\n        // border: 1px solid rgba(74, 144, 226, 0.1);\r\n        backdrop-filter: blur(5px);\r\n        transition: all 0.3s ease;\r\n\r\n        &:hover {\r\n          transform: translateY(-2px);\r\n          border-color: rgba(74, 144, 226, 0.2);\r\n          box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1);\r\n\r\n          .icon-wrapper {\r\n            i {\r\n              transform: scale(1.1);\r\n              background: linear-gradient(135deg, #4a90e2, #36d1dc);\r\n              -webkit-background-clip: text;\r\n              -webkit-text-fill-color: transparent;\r\n            }\r\n          }\r\n        }\r\n\r\n        .icon-wrapper {\r\n          width: 48px;\r\n          height: 48px;\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          // border-radius: 12px;\r\n          // background: rgba(74, 144, 226, 0.1);\r\n\r\n          i {\r\n            font-size: 24px;\r\n            color: #4a90e2;\r\n            transition: all 0.3s ease;\r\n          }\r\n        }\r\n\r\n        .stat-content {\r\n          flex: 1;\r\n\r\n          .value {\r\n            font-size: 22px;\r\n            font-weight: bold;\r\n            background: linear-gradient(135deg, #4a90e2, #36d1dc);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            transition: all 0.3s ease;\r\n          }\r\n\r\n          .label {\r\n            font-size: 13px;\r\n            color: rgba(255, 255, 255, 0.7);\r\n            margin-top: 4px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .usage-scenes {\r\n      flex: 1;\r\n      background: rgba(74, 144, 226, 0.05);\r\n      border-radius: 10px;\r\n      border: 1px solid rgba(74, 144, 226, 0.1);\r\n      backdrop-filter: blur(5px);\r\n      padding: 15px;\r\n\r\n      .scene-header {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        margin-bottom: 20px;\r\n        padding-bottom: 10px;\r\n        border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n\r\n        i {\r\n          font-size: 18px;\r\n          background: linear-gradient(135deg, #4a90e2, #36d1dc);\r\n          -webkit-background-clip: text;\r\n          -webkit-text-fill-color: transparent;\r\n        }\r\n\r\n        h4 {\r\n          font-size: 14px;\r\n          font-weight: 500;\r\n          color: rgba(255, 255, 255, 0.9);\r\n          margin: 0;\r\n        }\r\n      }\r\n\r\n      .scene-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 15px;\r\n\r\n        .scene-item {\r\n          display: flex;\r\n          justify-content: space-between;\r\n          align-items: center;\r\n          padding: 12px;\r\n          // background: rgba(255, 255, 255, 0.03);\r\n          // border-radius: 8px;\r\n          transition: all 0.3s ease;\r\n\r\n          &:hover {\r\n            background: rgba(255, 255, 255, 0.05);\r\n            transform: translateX(2px);\r\n\r\n            .icon-box {\r\n              transform: scale(1.05);\r\n            }\r\n\r\n            .value {\r\n            }\r\n          }\r\n\r\n          .scene-info {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            flex: 1;\r\n\r\n            .icon-box {\r\n              width: 36px;\r\n              height: 36px;\r\n              display: flex;\r\n              align-items: center;\r\n              justify-content: center;\r\n              border-radius: 8px;\r\n              border: 1px solid;\r\n              transition: all 0.3s ease;\r\n\r\n              i {\r\n                font-size: 16px;\r\n                color: rgba(255, 255, 255, 0.9);\r\n              }\r\n            }\r\n\r\n            .scene-details {\r\n              flex: 1;\r\n              min-width: 0;\r\n\r\n              .name {\r\n                display: block;\r\n                font-size: 13px;\r\n                color: rgba(255, 255, 255, 0.9);\r\n                margin-bottom: 6px;\r\n              }\r\n\r\n              .el-progress {\r\n                margin-top: 4px;\r\n              }\r\n            }\r\n          }\r\n\r\n          .value {\r\n            font-size: 13px;\r\n            background: linear-gradient(135deg, #4a90e2, #36d1dc);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            transition: all 0.3s ease;\r\n            margin-left: 8px;\r\n            white-space: nowrap;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style> "],"mappings":";;;;;;AA0DA,SAAAA,QAAA;AACA,SAAAC,YAAA;AAEA;EACAC,IAAA;EACAC,UAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAJ,QAAA,EAAAA;IACA;EACA;EACAK,OAAA;IACAJ,YAAA,EAAAA,YAAA;IACAK,YAAA,WAAAA,aAAAJ,IAAA;MACA,IAAAK,OAAA;QACAC,EAAA;QACAC,GAAA;QACAC,EAAA;QACAC,GAAA;QACAC,EAAA;QACAC,EAAA;MACA;MACA,OAAAN,OAAA,CAAAL,IAAA;IACA;IACAY,aAAA,WAAAA,cAAAC,KAAA;MACA,IAAAC,MAAA,IACA;MAAA;MACA;MAAA;MACA;MAAA;MACA;MAAA;MACA;MAAA;MACA;MAAA,CACA;MACA,OAAAA,MAAA,CAAAD,KAAA,GAAAC,MAAA,CAAAC,MAAA;IACA;IACAC,aAAA,WAAAA,cAAAH,KAAA;MACA,IAAAI,KAAA,QAAAL,aAAA,CAAAC,KAAA;MACA;QACAK,UAAA,6BAAAC,MAAA,CAAAF,KAAA,UAAAE,MAAA,CAAAF,KAAA;QACAG,WAAA,KAAAD,MAAA,CAAAF,KAAA;MACA;IACA;IACAI,aAAA,WAAAA,cAAAC,KAAA;MACA,IAAAC,GAAA,GAAAC,IAAA,CAAAD,GAAA,CAAAE,KAAA,CAAAD,IAAA,EAAAE,kBAAA,CACA,KAAA5B,QAAA,CAAA6B,WAAA,CAAAC,GAAA,WAAAC,KAAA;QAAA,OAAAA,KAAA,CAAAP,KAAA;MAAA,GACA;MACA,OAAAA,KAAA,GAAAC,GAAA;IACA;EACA;AACA","ignoreList":[]}]}