{"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\statistic\\product\\components\\productInfo.vue?vue&type=style&index=0&id=3f350cf2&scoped=true&lang=scss","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\statistic\\product\\components\\productInfo.vue","mtime":1761185180198},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoub25lIHsNCiAgYmFja2dyb3VuZDogdmFyKC0tcHJldi1jb2xvci1wcmltYXJ5KTsNCn0NCi50d28gew0KICBiYWNrZ3JvdW5kOiAjMDBjMDUwOw0KfQ0KLnRocmVlIHsNCiAgYmFja2dyb3VuZDogI2ZmYWIyYjsNCn0NCi5mb3VyIHsNCiAgYmFja2dyb3VuZDogI2IzN2ZlYjsNCn0NCi51cCwNCi5lbC1pY29uLWNhcmV0LXRvcCB7DQogIGNvbG9yOiAjZjUyMjJkOw0KICBmb250LXNpemU6IDEycHg7DQogIG9wYWNpdHk6IDEgIWltcG9ydGFudDsNCn0NCg0KLmRvd24sDQouZWwtaWNvbi1jYXJldC1ib3R0b20gew0KICBjb2xvcjogIzM5YzE1YjsNCiAgZm9udC1zaXplOiAxMnB4Ow0KfQ0KLmN1clAgew0KICBjdXJzb3I6IHBvaW50ZXI7DQp9DQouaGVhZGVyIHsNCiAgJi10aXRsZSB7DQogICAgZm9udC1zaXplOiAxNnB4Ow0KICAgIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuODUpOw0KICB9DQogICYtdGltZSB7DQogICAgZm9udC1zaXplOiAxMnB4Ow0KICAgIGNvbG9yOiAjMDAwMDAwOw0KICAgIG9wYWNpdHk6IDAuNDU7DQogIH0NCn0NCg0KLmljb25mb250IHsNCiAgZm9udC1zaXplOiAxNnB4Ow0KICBjb2xvcjogI2ZmZjsNCn0NCg0KLmljb25Dcmwgew0KICB3aWR0aDogMzJweDsNCiAgaGVpZ2h0OiAzMnB4Ow0KICBib3JkZXItcmFkaXVzOiA1MCU7DQogIHRleHQtYWxpZ246IGNlbnRlcjsNCiAgbGluZS1oZWlnaHQ6IDMycHg7DQogIG9wYWNpdHk6IDAuNzsNCn0NCg0KLmxhbiB7DQogIGJhY2tncm91bmQ6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQp9DQoNCi5pY29uc2hhbmdwaW5saXVsYW5saWFuZyB7DQogIGNvbG9yOiAjZmZmOw0KfQ0KDQouaW5mb0JveCB7DQogIHdpZHRoOiAyMCU7DQogIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDEzMDBweCkgew0KICAgIHdpZHRoOiAyNSU7DQogIH0NCiAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogMTIwMHB4KSB7DQogICAgd2lkdGg6IDMzJTsNCiAgfQ0KICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA5MDBweCkgew0KICAgIHdpZHRoOiA1MCU7DQogIH0NCn0NCg0KLmluZm8gew0KICAuc3AxIHsNCiAgICBjb2xvcjogIzY2NjsNCiAgICBmb250LXNpemU6IDE0cHg7DQogICAgZGlzcGxheTogYmxvY2s7DQogIH0NCiAgLnNwMiB7DQogICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICBmb250LXNpemU6IDMwcHg7DQogICAgY29sb3I6IHJnYmEoMCwgMCwgMCwgMC44NSk7DQogICAgZGlzcGxheTogYmxvY2s7DQogIH0NCiAgLnNwMyB7DQogICAgZm9udC1zaXplOiAxMnB4Ow0KICAgIGZvbnQtd2VpZ2h0OiA0MDA7DQogICAgY29sb3I6IHJnYmEoMCwgMCwgMCwgMC40NSk7DQogICAgZGlzcGxheTogYmxvY2s7DQogIH0NCn0NCg=="},{"version":3,"sources":["productInfo.vue"],"names":[],"mappings":";AAgTA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"productInfo.vue","sourceRoot":"src/pages/statistic/product/components","sourcesContent":["<template>\r\n  <el-card :bordered=\"false\" shadow=\"never\" class=\"ivu-mt\" v-loading=\"spinShow\">\r\n    <div class=\"acea-row row-between-wrapper mb20\">\r\n      <div class=\"statics-header-title\">\r\n        <h4>商品概况</h4>\r\n        <el-tooltip width=\"500\" placement=\"right-start\">\r\n          <i class=\"el-icon-question ml10\"></i>\r\n          <div slot=\"content\">\r\n            <div>商品浏览量</div>\r\n            <div>在选定条件下，所有商品详情页被访问的次数，一个人在统计时间内访问多次记为多次</div>\r\n            <br />\r\n            <div>商品访客数</div>\r\n            <div>在选定条件下，访问任何商品详情页的人数，一个人在统计时间范围内访问多次只记为一个</div>\r\n            <br />\r\n            <div>支付件数</div>\r\n            <div>\r\n              在选定条件下，成功付款订单的商品件数之和（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入，不剔除退款订单）\r\n            </div>\r\n            <br />\r\n            <div>支付金额</div>\r\n            <div>\r\n              在选定条件下，成功付款订单的商品金额之和（拼团商品在成团之后计入，线下支付订单在后台确认支付后计入，不剔除退款订单）\r\n            </div>\r\n            <br />\r\n            <div>退款件数</div>\r\n            <div>在选定条件下，成功退款的商品件数之和</div>\r\n            <br />\r\n            <div>退款金额</div>\r\n            <div>在选定条件下，成功退款的商品金额之和</div>\r\n          </div>\r\n        </el-tooltip>\r\n      </div>\r\n      <div class=\"acea-row\">\r\n        <el-date-picker\r\n          clearable\r\n          v-model=\"timeVal\"\r\n          type=\"daterange\"\r\n          :editable=\"false\"\r\n          @change=\"onchangeTime\"\r\n          format=\"yyyy/MM/dd\"\r\n          value-format=\"yyyy/MM/dd\"\r\n          start-placeholder=\"开始日期\"\r\n          end-placeholder=\"结束日期\"\r\n          :picker-options=\"pickerOptions\"\r\n          style=\"width: 250px\"\r\n          class=\"mr20\"\r\n        ></el-date-picker>\r\n        <el-button type=\"primary\" v-db-click @click=\"onSeach\">查询</el-button>\r\n        <el-button type=\"primary\" v-db-click @click=\"excel\">导出</el-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"mb20\">\r\n      <el-row>\r\n        <el-col v-bind=\"grid\" class=\"acea-row mb30\" v-for=\"(item, index) in list\" :key=\"index\">\r\n          <div\r\n            class=\"iconCrl mr15\"\r\n            :class=\"{ one: index % 4 == 0, two: index % 4 == 1, three: index % 4 == 2, four: index % 4 == 3 }\"\r\n          >\r\n            <i :class=\"item.icon\" class=\"iconfont\"></i>\r\n          </div>\r\n          <div class=\"info\">\r\n            <span class=\"sp1\" v-text=\"item.name\"></span>\r\n            <span class=\"sp2\" v-if=\"index === list.length - 1\" v-text=\"item.list.num\"></span>\r\n            <span class=\"sp2\" v-else v-text=\"item.list.num\"></span>\r\n            <span class=\"content-time spBlock\"\r\n              >环比增长：<i class=\"content-is\" :class=\"Number(item.list.percent) >= 0 ? 'up' : 'down'\"\r\n                >{{ item.list.percent }}%</i\r\n              >\r\n              <i\r\n                :style=\"{ color: Number(item.list.percent) >= 0 ? '#F5222D' : '#39C15B' }\"\r\n                :class=\"[Number(item.list.percent) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom']\"\r\n              />\r\n            </span>\r\n          </div>\r\n        </el-col>\r\n      </el-row>\r\n    </div>\r\n    <echarts-new :option-data=\"optionData\" :styles=\"style\" height=\"100%\" width=\"100%\" v-if=\"optionData\"></echarts-new>\r\n  </el-card>\r\n</template>\r\n\r\n<script>\r\nimport { statisticBasicApi, statisticTrendApi, statisticProductExcel } from '@/api/statistic';\r\nimport echartsNew from '@/components/echartsNew/index';\r\nimport { formatDate } from '@/utils/validate';\r\nexport default {\r\n  name: 'productInfo',\r\n  components: {\r\n    echartsNew,\r\n  },\r\n  data() {\r\n    return {\r\n      spinShow: false,\r\n      grid: {\r\n        xl: 4,\r\n        lg: 8,\r\n        md: 8,\r\n        sm: 8,\r\n        xs: 24,\r\n      },\r\n      pickerOptions: this.$timeOptions,\r\n      name: '近30天',\r\n      timeVal: [],\r\n      dataTime: '',\r\n      list: [],\r\n      optionData: {},\r\n      style: { height: '400px' },\r\n    };\r\n  },\r\n  created() {\r\n    const end = new Date();\r\n    const start = new Date();\r\n    start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));\r\n    this.timeVal = [start, end];\r\n    this.dataTime = formatDate(start, 'yyyy/MM/dd') + '-' + formatDate(end, 'yyyy/MM/dd');\r\n  },\r\n  mounted() {\r\n    this.getStatistics();\r\n    this.getTrend();\r\n  },\r\n  methods: {\r\n    // 导出\r\n    excel() {\r\n      statisticProductExcel({ data: this.dataTime }).then(async (res) => {\r\n        res.data.url.map((item) => {\r\n          window.location.href = item;\r\n        });\r\n      });\r\n    },\r\n    onSeach() {\r\n      this.getStatistics();\r\n      this.getTrend();\r\n    },\r\n    // 具体日期\r\n    onchangeTime(e) {\r\n      this.timeVal = e;\r\n      this.dataTime = this.timeVal ? this.timeVal.join('-') : '';\r\n    },\r\n    // 统计\r\n    getStatistics() {\r\n      statisticBasicApi({ data: this.dataTime })\r\n        .then(async (res) => {\r\n          const cardLists = res.data;\r\n          this.list = [\r\n            {\r\n              name: '商品浏览量',\r\n              icon: 'iconshangpinliulanliang',\r\n              list: cardLists.browse,\r\n            },\r\n            {\r\n              name: '商品访客数',\r\n              icon: 'iconshangpinfangkeshu',\r\n              list: cardLists.user,\r\n            },\r\n            {\r\n              name: '支付件数',\r\n              icon: 'iconzhifujianshu',\r\n              list: cardLists.pay,\r\n            },\r\n            {\r\n              name: '支付金额',\r\n              icon: 'iconzhifujine',\r\n              list: cardLists.payPrice,\r\n            },\r\n            {\r\n              name: '退款件数',\r\n              icon: 'icontuikuanjianshu',\r\n              list: cardLists.refund,\r\n            },\r\n            {\r\n              name: '退款金额',\r\n              icon: 'icontuikuan',\r\n              list: cardLists.refundPrice,\r\n            },\r\n          ];\r\n        })\r\n        .catch((res) => {\r\n          this.$message.error(res.msg);\r\n        });\r\n    },\r\n    // 统计图\r\n    getTrend() {\r\n      this.spinShow = true;\r\n      statisticTrendApi({ data: this.dataTime })\r\n        .then(async (res) => {\r\n          let legend = res.data.series.map((item) => {\r\n            return item.name;\r\n          });\r\n          let xAxis = res.data.xAxis;\r\n          let col = ['#B37FEB', '#FFAB2B', '#1890FF', '#00C050'];\r\n          res.data.series.map((item, index) => {\r\n            item.itemStyle = {\r\n              normal: {\r\n                color: col[index],\r\n              },\r\n            };\r\n          });\r\n          this.optionData = {\r\n            tooltip: {\r\n              trigger: 'axis',\r\n              axisPointer: {\r\n                type: 'cross',\r\n                label: {\r\n                  backgroundColor: '#6a7985',\r\n                },\r\n              },\r\n            },\r\n            legend: {\r\n              x: 'center',\r\n              data: legend,\r\n            },\r\n            grid: {\r\n              left: '3%',\r\n              right: '4%',\r\n              bottom: '3%',\r\n              containLabel: true,\r\n            },\r\n            toolbox: {\r\n              feature: {\r\n                saveAsImage: {},\r\n              },\r\n            },\r\n            xAxis: {\r\n              type: 'category',\r\n              boundaryGap: true,\r\n              // axisTick:{\r\n              //     show:false\r\n              // },\r\n              // axisLine:{\r\n              //     show:false\r\n              // },\r\n              // splitLine: {\r\n              //     show: false\r\n              // },\r\n              axisLabel: {\r\n                interval: 0,\r\n                rotate: 40,\r\n                textStyle: {\r\n                  color: '#000000',\r\n                },\r\n              },\r\n              data: xAxis,\r\n            },\r\n            yAxis: [\r\n              {\r\n                type: 'value',\r\n                name: '金额',\r\n                axisLine: {\r\n                  show: false,\r\n                },\r\n                axisTick: {\r\n                  show: false,\r\n                },\r\n                axisLabel: {\r\n                  textStyle: {\r\n                    color: '#7F8B9C',\r\n                  },\r\n                },\r\n                splitLine: {\r\n                  show: true,\r\n                  lineStyle: {\r\n                    color: '#F5F7F9',\r\n                  },\r\n                },\r\n              },\r\n              {\r\n                type: 'value',\r\n                name: '数量',\r\n                axisLine: {\r\n                  show: false,\r\n                },\r\n                axisTick: {\r\n                  show: false,\r\n                },\r\n                axisLabel: {\r\n                  textStyle: {\r\n                    color: '#7F8B9C',\r\n                  },\r\n                },\r\n                splitLine: {\r\n                  show: true,\r\n                  lineStyle: {\r\n                    color: '#F5F7F9',\r\n                  },\r\n                },\r\n                // axisLabel: {\r\n                //     formatter: '{value} °C'\r\n                // }\r\n              },\r\n            ],\r\n            series: res.data.series,\r\n          };\r\n          this.spinShow = false;\r\n        })\r\n        .catch((res) => {\r\n          this.$message.error(res.msg);\r\n          this.spinShow = false;\r\n        });\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.one {\r\n  background: var(--prev-color-primary);\r\n}\r\n.two {\r\n  background: #00c050;\r\n}\r\n.three {\r\n  background: #ffab2b;\r\n}\r\n.four {\r\n  background: #b37feb;\r\n}\r\n.up,\r\n.el-icon-caret-top {\r\n  color: #f5222d;\r\n  font-size: 12px;\r\n  opacity: 1 !important;\r\n}\r\n\r\n.down,\r\n.el-icon-caret-bottom {\r\n  color: #39c15b;\r\n  font-size: 12px;\r\n}\r\n.curP {\r\n  cursor: pointer;\r\n}\r\n.header {\r\n  &-title {\r\n    font-size: 16px;\r\n    color: rgba(0, 0, 0, 0.85);\r\n  }\r\n  &-time {\r\n    font-size: 12px;\r\n    color: #000000;\r\n    opacity: 0.45;\r\n  }\r\n}\r\n\r\n.iconfont {\r\n  font-size: 16px;\r\n  color: #fff;\r\n}\r\n\r\n.iconCrl {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  text-align: center;\r\n  line-height: 32px;\r\n  opacity: 0.7;\r\n}\r\n\r\n.lan {\r\n  background: var(--prev-color-primary);\r\n}\r\n\r\n.iconshangpinliulanliang {\r\n  color: #fff;\r\n}\r\n\r\n.infoBox {\r\n  width: 20%;\r\n  @media screen and (max-width: 1300px) {\r\n    width: 25%;\r\n  }\r\n  @media screen and (max-width: 1200px) {\r\n    width: 33%;\r\n  }\r\n  @media screen and (max-width: 900px) {\r\n    width: 50%;\r\n  }\r\n}\r\n\r\n.info {\r\n  .sp1 {\r\n    color: #666;\r\n    font-size: 14px;\r\n    display: block;\r\n  }\r\n  .sp2 {\r\n    font-weight: 400;\r\n    font-size: 30px;\r\n    color: rgba(0, 0, 0, 0.85);\r\n    display: block;\r\n  }\r\n  .sp3 {\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    color: rgba(0, 0, 0, 0.45);\r\n    display: block;\r\n  }\r\n}\r\n</style>\r\n"]}]}