{"version":3,"sources":["webpack:///./src/views/statistics/components/progress.vue?71f5","webpack:///src/views/statistics/components/progress.vue","webpack:///./src/views/statistics/components/progress.vue?c189","webpack:///./src/views/statistics/components/progress.vue","webpack:///./src/views/statistics/components/progress.vue?03a7"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_l","item","key","angle","class","isActive","style","transform","offset","_v","_s","percents","staticRenderFns","props","type","Number","default","data","ticks","activedIndexAngle","mounted","init","watch","val","methods","activedIndex","tickAngle","toFixed","push","component"],"mappings":"2HAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,4BAA4B,CAACF,EAAG,MAAM,CAACE,YAAY,sBAAsB,CAACF,EAAG,MAAM,CAACE,YAAY,0BAA0B,CAACF,EAAG,MAAM,CAACE,YAAY,sBAAsBN,EAAIO,GAAIP,EAAS,OAAE,SAASQ,GAAM,OAAOJ,EAAG,OAAO,CAACK,IAAID,EAAKE,MAAMJ,YAAY,OAAOK,MAAM,CAAC,QAAWH,EAAKI,UAAUC,MAAM,CAAGC,UAAY,UAAaN,EAAU,MAAI,oBAAsBR,EAAIe,OAAS,YAAc,GAAGX,EAAG,MAAM,CAACE,YAAY,8BAA8B,CAACF,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAACF,EAAG,IAAI,CAACE,YAAY,YAAY,CAACN,EAAIgB,GAAGhB,EAAIiB,GAAIjB,EAAIkB,SAAW,QAASd,EAAG,IAAI,CAACE,YAAY,OAAO,CAACN,EAAIgB,GAAG,qBAC3rBG,EAAkB,GCyBtB,G,UAAA,CACEC,MAAO,CACLF,SAAU,CACRG,KAAMC,OACNC,QAAS,IAGbC,KAPF,WAQI,MAAO,CACLC,MAAO,GACPV,OAAQ,EACRW,kBAAmB,OAGvBC,QAdF,WAeI1B,KAAK2B,QAEPC,MAAO,CACLX,SADJ,SACA,GAEUY,GACF7B,KAAK2B,SAIXG,QAAS,CACPH,KADJ,WAEM3B,KAAKwB,MAAQ,GAEb,IAAN,MACA,KACA,kBAGA,oCAEMxB,KAAKyB,mBAAqBM,EAAeC,GAAWC,QAAQ,GAAK,GACjE,IAAK,IAAX,oBACQ,IAAR,IACA,+CAEQjC,KAAKwB,MAAMU,KAAK,CAAxB,0BCnEgX,I,wBCQ5WC,EAAY,eACd,EACArC,EACAoB,GACA,EACA,KACA,WACA,MAIa,aAAAiB,E,2CCnBf,W","file":"js/warehouse-space695.8e1e0c5e.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"statistics-progress-wrap\"},[_c('div',{staticClass:\"progress-container\"},[_c('div',{staticClass:\"progress-circular-mark\"},[_c('div',{staticClass:\"progress-tick-wrap\"},_vm._l((_vm.ticks),function(item){return _c('span',{key:item.angle,staticClass:\"tick\",class:{'actived': item.isActive},style:({ transform: (\"rotate(\" + (item.angle) + \"deg) translateY(-\" + _vm.offset + \"px)\") })})}),0),_c('div',{staticClass:\"progress-msg-circular-mark\"},[_c('div',{staticClass:\"progress-msg\"},[_c('p',{staticClass:\"percents\"},[_vm._v(_vm._s((_vm.percents + \"%\")))]),_c('p',{staticClass:\"tis\"},[_vm._v(\"任务进度\")])])])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"statistics-progress-wrap\">\n    <div class=\"progress-container\">\n      <div class=\"progress-circular-mark\">\n        <div class=\"progress-tick-wrap\">\n          <span\n            class=\"tick\"\n            v-for=\"item of ticks\"\n            :key=\"item.angle\"\n            :class=\"{'actived': item.isActive}\"\n            :style=\"{ transform: `rotate(${ item.angle }deg) translateY(-${ offset }px)` }\"\n          ></span>\n        </div>\n        <div class=\"progress-msg-circular-mark\">\n          <div class=\"progress-msg\">\n            <p class=\"percents\">{{ `${ percents }%` }}</p>\n            <p class=\"tis\">任务进度</p>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    percents: {\n      type: Number,\n      default: 0\n    }\n  },\n  data() {\n    return {\n      ticks: [],\n      offset: 0, // 偏移量\n      activedIndexAngle: null, // 最后终止的刻度角度\n    }\n  },\n  mounted() {\n    this.init()\n  },\n  watch: {\n    percents(val) {\n      // console.log(val, 111)\n      if (val) {\n        this.init()\n      }\n    }\n  },\n  methods: {\n    init() {\n      this.ticks = []\n\n      const angle = 240 // 这里是分240度\n      const tickNum = 42 // 刻度的条数\n      const tickAngle = Math.floor( angle / tickNum )// 每一个刻度递增的角度\n\n      // 获取已经达到的刻度的索引，用完成任务的百分比来除以（100 / 42(刻度的条数)），向下取整\n      const activedIndex = Math.floor(this.percents / (100 / tickNum))\n      // 获取已达到的刻度的角度值，由于是从-90度开始计算的，所以得减去90\n      this.activedIndexAngle = (activedIndex * tickAngle).toFixed(2) - 90\n      for (let i = -108; i <= 108; i += tickAngle) {\n        const angle = i // 刻度的角度\n        const isActive = Number(i.toFixed(2)) <= this.activedIndexAngle\n        // console.log(i.toFixed(2),  activedIndexAngle)\n        this.ticks.push({ angle, isActive })\n      }\n    }\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import \"@/assets/scss/mixin.scss\";\n.statistics-progress-wrap {\n  position: relative;\n  width: 132px;\n  height: 88px;\n  .progress-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    border-radius: 66px 66px 0 0;\n    overflow: hidden;\n    .progress-circular-mark {\n      width: 132px;\n      height: 132px;\n      border-radius: 50%;\n      overflow: hidden;\n      position: absolute;\n      left: 0;\n      top: 0;\n    }\n    .progress-tick-wrap {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n      transform-origin: center center;\n      &::before {\n        content: \"\";\n        background: linear-gradient(to right, #ff0000, #00ff00); /* 刻度的渐变颜色 */\n      }\n      .tick {\n        position: absolute;\n        left: 50%;\n        top: -22px;\n        display: block;\n        width: 2px;\n        height: 88px;\n        transform-origin: bottom center;\n        @include bgColorOpacity(.16);\n        &.actived {\n          background: #2682FF;\n        }\n      }\n    }\n    .progress-msg-circular-mark {\n      width: 102px;\n      height: 102px;\n      border-radius: 50%;\n      overflow: hidden;\n      position: absolute;\n      left: 15px;\n      top: 15px;\n    }\n    .progress-msg {\n      // position: absolute;\n      // left: 0;\n      // top: 0;\n      width: 102px;\n      height: 73px;\n      border-radius: 73px 73px 0 0;\n      background: #fff;\n      padding-top: 20px;\n      box-sizing: border-box;\n      p {\n        text-align: center;\n        &.percents {\n          font-size: 20px;\n          font-weight: bold;\n          @include fontColorOpacity(1);\n          line-height: 20px;\n          margin-bottom: 8px;\n        }\n        &.tis {\n          font-size: 14px;\n          font-family: PingFangSC-Regular, PingFang SC;\n          @include fontColorOpacity(.6);\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./progress.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./progress.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./progress.vue?vue&type=template&id=18a45ba6&scoped=true&\"\nimport script from \"./progress.vue?vue&type=script&lang=js&\"\nexport * from \"./progress.vue?vue&type=script&lang=js&\"\nimport style0 from \"./progress.vue?vue&type=style&index=0&id=18a45ba6&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"18a45ba6\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./progress.vue?vue&type=style&index=0&id=18a45ba6&lang=scss&scoped=true&\""],"sourceRoot":""}