{"remainingRequest":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\thread-loader\\dist\\cjs.js!D:\\jenkins\\workspace\\yhxt-web\\node_modules\\babel-loader\\lib\\index.js!D:\\jenkins\\workspace\\yhxt-web\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!D:\\jenkins\\workspace\\yhxt-web\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\yhxt-web\\src\\views\\bigScreen\\components\\pieChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\yhxt-web\\src\\views\\bigScreen\\components\\pieChart.vue","mtime":1736792007287},{"path":"D:\\jenkins\\workspace\\yhxt-web\\babel.config.js","mtime":1667326389982},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\thread-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\babel-loader\\lib\\index.js","mtime":456789000000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\yhxt-web\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["import \"core-js/modules/es7.object.get-own-property-descriptors\";\nimport \"core-js/modules/es6.object.keys\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.function.name\";\nimport _defineProperty from \"D:/jenkins/workspace/yhxt-web/node_modules/@babel/runtime/helpers/esm/defineProperty.js\";\nimport \"core-js/modules/es6.number.constructor\";\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport * as echarts from 'echarts'; // 引入charts\nexport default {\n  name: 'pieCharts',\n  props: {\n    id: {\n      type: String,\n      require: true\n    },\n    data: {\n      type: Array,\n      require: true\n    },\n    config: {\n      type: Object,\n      default: function _default() {}\n    },\n    key_: {\n      type: Number,\n      default: 0\n    }\n  },\n  data: function data() {\n    return {\n      myChart: null,\n      option: null,\n      timerPie: null,\n      curIndex: 0,\n      offlineRate: 0,\n      onlineRate: 0\n    };\n  },\n  mounted: function mounted() {\n    if (this.data && this.data[0].value) {\n      this.init();\n    }\n  },\n  watch: {\n    data: {\n      deep: true,\n      handler: function handler(val) {\n        if (val[0].value != undefined) {\n          var total = val[0].value + val[1].value;\n          if (total != 0) {\n            this.offlineRate = (val[1].value / total * 100).toFixed(2);\n            this.onlineRate = (val[0].value / total * 100).toFixed(2);\n          } else {\n            this.offlineRate = 0;\n            this.onlineRate = 0;\n          }\n          if (this.option) {\n            this.option.series[0].data = val;\n            this.myChart.setOption(this.option);\n          } else {\n            this.init();\n          }\n        }\n      }\n    }\n  },\n  methods: {\n    init: function init() {\n      var _this = this;\n      var chartDom = document.getElementById(this.id);\n      this.myChart = echarts.init(chartDom);\n      this.option = _objectSpread(_objectSpread({\n        color: this.color,\n        tooltip: {\n          trigger: 'item',\n          formatter: function formatter(params) {\n            // params 包含了关于当前鼠标悬停的数据项的所有信息\n            return \"\".concat(params.name, \": \").concat(params.value);\n          }\n        },\n        title: {\n          text: this.data[0].value,\n          subtext: this.data[0].name + '个',\n          left: '23%',\n          x: 'center',\n          y: '35%',\n          textAlign: 'center',\n          textStyle: {\n            color: '#fff',\n            fontSize: 16\n          },\n          subtextStyle: {\n            color: '#fff',\n            fontSize: 14,\n            lineHeight: 18\n          }\n        },\n        // graphic: {\n        //   type: 'text',\n        //   left: 'center',\n        //   top: '48%',\n        //   style: {\n        //     text: '74.5%',\n        //     textAlign: 'center',\n        //     fill: '#fff',\n        //     fontSize: 12,\n        //   },\n        // },\n        legend: {\n          show: false,\n          bottom: '40%',\n          left: '50%',\n          icon: 'circle',\n          formatter: function formatter(name) {\n            // 添加\n            var total = 0;\n            var target;\n            var color = '#55EDB0';\n            for (var i = 0; i < _this.data.length; i++) {\n              total += _this.data[i].value;\n              if (_this.data[i].name === name) {\n                target = _this.data[i].value;\n              }\n              if (name === '在线设备') {\n                color = '#55EDB0';\n              }\n              if (name == '离线设备') {\n                color = '#00D4F';\n              }\n            }\n            var arr = ['{a|' + name + '}', '{b|' + (target / total * 100).toFixed(2) + '%}'];\n            return arr.join('');\n          },\n          textStyle: {\n            // 添加\n            // padding: [8, 0, 0, 0],\n            rich: {\n              a: {\n                fontSize: 14,\n                width: 70,\n                color: '#fff'\n              },\n              b: {\n                fontSize: 16,\n                width: 50,\n                color: ['#55EDB0', '#00D4FF']\n              }\n            }\n          }\n        }\n      }, this.config), {}, {\n        series: [_objectSpread(_objectSpread({\n          name: '设备信息',\n          type: 'pie',\n          radius: ['40%', '50%'],\n          center: ['25%', '46%'],\n          avoidLabelOverlap: false,\n          label: {\n            show: false\n            // show: true,\n            // position: 'center',\n            // formatter: (a) => {\n            //     // if (this.key_ == 1) {\n            //     //     return a.percent.toFixed(2) + '%'\n            //     // } else {\n            //     //     return (100 - a.percent).toFixed(2) + '%'\n            //     // }\n            //     return a.value + '个'\n            // }, //'{d}%',\n            // color: '#fff',\n            // fontSize: 16,\n          },\n\n          emphasis: {\n            label: {\n              show: false\n            }\n          },\n          labelLine: {\n            show: false\n          }\n        }, this.config.series), {}, {\n          data: this.data\n        })]\n      });\n      this.option && this.myChart.setOption(this.option);\n      window.addEventListener('resize', function () {\n        return _this.myChart.resize();\n      });\n      if (this.data.length) {\n        this.intervalPie();\n      }\n      this.myChart.on('click', this.handleClick);\n    },\n    // 饼图动效\n    intervalPie: function intervalPie() {\n      var _this2 = this;\n      if (this.timerPie) clearInterval(this.timerPie);\n      this.timerPie = setInterval(function () {\n        if (!_this2.data.length) return;\n        _this2.highLightPie(_this2.curIndex);\n        _this2.curIndex++;\n        if (_this2.curIndex >= _this2.data.length) {\n          _this2.curIndex = 0;\n        }\n      }, 3000);\n    },\n    highLightPie: function highLightPie(index) {\n      var _this3 = this;\n      var dataIndexes = this.data.map(function (_, i) {\n        return i;\n      }); // 获取所有数据索引\n\n      // 对所有项执行downplay动作\n      dataIndexes.forEach(function (idx) {\n        _this3.myChart.dispatchAction({\n          type: 'downplay',\n          seriesIndex: 0,\n          dataIndex: idx\n        });\n      });\n\n      // 对当前项执行highlight动作\n      this.myChart.dispatchAction({\n        type: 'highlight',\n        seriesIndex: 0,\n        dataIndex: index\n      });\n\n      // 更新标题文本\n      this.option.title.text = this.data[index].value;\n      this.option.title.subtext = this.data[index].name;\n      this.myChart.setOption(this.option);\n    },\n    //弹窗数据传递\n    handleClick: function handleClick(params) {\n      // params 包含了关于点击事件的信息，包括点击的是哪个数据项\n      if (params.seriesType === 'pie') {\n        // 根据点击的扇区名称或值决定展示哪个弹窗\n        var popupContent;\n        switch (params.name) {\n          case '在线设备':\n            popupContent = this.getOnlineDevices();\n            break;\n          case '离线设备':\n            popupContent = this.getOfflineDevices();\n            break;\n          default:\n            return;\n          // 如果不是预期的扇区，则不执行任何操作\n        }\n\n        // 展示弹窗\n        // this.showPopup(popupContent);\n      }\n    },\n    //在线设备获取\n    getOnlineDevices: function getOnlineDevices() {\n      // 获取并返回在线设备信息\n\n      this.$emit('getDevicesDetail', 1);\n      return; /* 在线设备信息 */\n    },\n    //离线设备获取\n    getOfflineDevices: function getOfflineDevices() {\n      // 获取并返回离线设备信息\n      this.$emit('getDevicesDetail', 0);\n      return; /* 离线设备信息 */\n    },\n    //仿图例\n    dispatchSel: function dispatchSel(name) {\n      switch (name) {\n        case '在线设备':\n          break;\n        case '离线设备':\n          break;\n          this.nameD = !this.nameD;\n          break;\n        default:\n          break;\n      }\n      this.myChart.dispatchAction({\n        type: 'legendToggleSelect',\n        // 图例名称\n        name: name\n      });\n    },\n    dispatchHov: function dispatchHov(name, type) {\n      this.myChart.dispatchAction({\n        type: type,\n        // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项\n        // dataIndex?: number | number[],\n        // 可选，数据项名称，在有 dataIndex 的时候忽略\n        name: name\n      });\n    }\n  },\n  beforeDestroy: function beforeDestroy() {\n    if (this.timerPie) clearInterval(this.timerPie);\n  }\n};",null]}