|
@@ -0,0 +1,971 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="data-screen2">
|
|
|
|
+ <template v-if="dataInfo.base">
|
|
|
|
+ <el-backtop />
|
|
|
|
+ <div class="s_top">
|
|
|
|
+ <p class="s_top_title">活动订货数据实时追踪</p>
|
|
|
|
+ <p class="s_top_name">{{ dataInfo.base.activity_title }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_money">
|
|
|
|
+ <p class="s_money_value"> {{ dataInfo.base.money }}</p>
|
|
|
|
+ <div class="s_money_spec s_money_ly">
|
|
|
|
+ <p>临沭体验店金额: {{ dataInfo.base['临沭体验店'] }}</p>
|
|
|
|
+ <p>占比: {{ (Math.floor(dataInfo.base['临沭体验店'] / dataInfo.base.money * 10000)/100).toFixed(1) + '%' }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_money_spec s_money_wq">
|
|
|
|
+ <p>吴桥体验店金额: {{ dataInfo.base['吴桥体验店'] }}</p>
|
|
|
|
+ <p>占比: {{ (Math.floor(dataInfo.base['吴桥体验店'] / dataInfo.base.money * 10000)/100).toFixed(1) + '%' }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_module_title">
|
|
|
|
+ <p>产品区</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_all" :style="`background-image: url(${require('@/assets/data_display/all.png')})`">
|
|
|
|
+ <p class="s_all_num">{{ dataInfo.base.hard * 3 + dataInfo.base.simple * 12 + dataInfo.base.old * 12 + dataInfo.base.newold * 18 }}</p>
|
|
|
|
+ <p class="s_all_text">总条数</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_goods">
|
|
|
|
+ <div class="s_goods_item" :style="`background-image: url(${require('@/assets/data_display/s_good_0.png')})`">
|
|
|
|
+ <div class="item_title">
|
|
|
|
+ <div class="item_title_icon" :style="`background-image: url(${require('@/assets/data_display/s_good_item_0.png')})`" />
|
|
|
|
+ <p>大卫博士精装版</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data">
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.hard }}</p>
|
|
|
|
+ <p>数量</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.hard_money }}</p>
|
|
|
|
+ <p>金额/元</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.hard_today }}</p>
|
|
|
|
+ <p>新增</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ getPer(dataInfo.base.hard_money) }}%</p>
|
|
|
|
+ <p>金额占比</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_goods_item" :style="`background-image: url(${require('@/assets/data_display/s_good_1.png')})`">
|
|
|
|
+ <div class="item_title">
|
|
|
|
+ <div class="item_title_icon" :style="`background-image: url(${require('@/assets/data_display/s_good_item_1.png')})`" />
|
|
|
|
+ <p>大卫博士简约版</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data">
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.simple }}</p>
|
|
|
|
+ <p>数量</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.simple_money }}</p>
|
|
|
|
+ <p>金额/元</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.simple_today }}</p>
|
|
|
|
+ <p>新增</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ getPer(dataInfo.base.simple_money) }}%</p>
|
|
|
|
+ <p>金额占比</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_goods_item" :style="`background-image: url(${require('@/assets/data_display/s_good_2.png')})`">
|
|
|
|
+ <div class="item_title">
|
|
|
|
+ <div class="item_title_icon" :style="`background-image: url(${require('@/assets/data_display/s_good_item_2.png')})`" />
|
|
|
|
+ <p>大卫博士老人版</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data">
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.old }}</p>
|
|
|
|
+ <p>数量</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.old_money }}</p>
|
|
|
|
+ <p>金额/元</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.old_today }}</p>
|
|
|
|
+ <p>新增</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ getPer(dataInfo.base.old_money) }}%</p>
|
|
|
|
+ <p>金额占比</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_goods_item" :style="`background-image: url(${require('@/assets/data_display/s_good_3.png')})`">
|
|
|
|
+ <div class="item_title">
|
|
|
|
+ <div class="item_title_icon" :style="`background-image: url(${require('@/assets/data_display/s_good_item_3.png')})`" />
|
|
|
|
+ <p>大卫博士纯棉老人版</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data">
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.newold }}</p>
|
|
|
|
+ <p>数量</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.newold_money }}</p>
|
|
|
|
+ <p>金额/元</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ dataInfo.base.newold_today }}</p>
|
|
|
|
+ <p>新增</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item_data_child">
|
|
|
|
+ <p>{{ getPer(dataInfo.base.newold_money) }}%</p>
|
|
|
|
+ <p>金额占比</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_module_title">
|
|
|
|
+ <p>荣誉区</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_honor">
|
|
|
|
+ <div
|
|
|
|
+ v-for="(v, k, i) in dataInfo.base.honor_num"
|
|
|
|
+ :key="k"
|
|
|
|
+ class="s_honor_item"
|
|
|
|
+ :style="`background-image: url(${require(`@/assets/data_display/s_honor_${i % 3}.png`)})`"
|
|
|
|
+ @click="toSeeHonorUser(v.user, '大礼包名单')"
|
|
|
|
+ >
|
|
|
|
+ <p>{{ v.count }}</p>
|
|
|
|
+ <p>{{ k }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_module_title">
|
|
|
|
+ <p>赠品区</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_honor s_gift">
|
|
|
|
+ <div
|
|
|
|
+ v-for="(v, k, i) in dataInfo.base.gifts_num"
|
|
|
|
+ :key="`${k}_${i}`"
|
|
|
|
+ class="s_honor_item s_gift_item"
|
|
|
|
+ >
|
|
|
|
+ <p :style="`color: ${i % 3 === 0 ? '#3394F8' : i % 3 === 1 ? '#F76454' : '#FF9E00' }`">{{ v }}</p>
|
|
|
|
+ <p />
|
|
|
|
+ <p>{{ k }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_module_title">
|
|
|
|
+ <p>达标情况</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_standard">
|
|
|
|
+ <div
|
|
|
|
+ class="s_standard_item"
|
|
|
|
+ :style="`background-image: url(${require(`@/assets/data_display/standard_0.png`)})`"
|
|
|
|
+ @click="toSeeHonorUser(dataInfo.base.down_user.up, '达标名单')"
|
|
|
|
+ >
|
|
|
|
+ <p>{{ dataInfo.base.down_info.up }}</p>
|
|
|
|
+ <p>达标</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ class="s_standard_item"
|
|
|
|
+ :style="`background-image: url(${require(`@/assets/data_display/standard_1.png`)})`"
|
|
|
|
+ @click="toSeeHonorUser(dataInfo.base.down_user.down, '未达标名单')"
|
|
|
|
+ >
|
|
|
|
+ <p>{{ dataInfo.base.down_info.down }}</p>
|
|
|
|
+ <p>未达标</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_module_title s_map_title">
|
|
|
|
+ <p>全国数据情况</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_map">
|
|
|
|
+ <div v-if="dataInfo.base.list" class="s_map_container">
|
|
|
|
+ <div id="china4" style="width:100%;height:100%;" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="s_table_nav">
|
|
|
|
+ <p
|
|
|
|
+ v-for="item in moduleListNav"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :class="showDataType === item.value ? 'active' : ''"
|
|
|
|
+ @click="showDataType = item.value"
|
|
|
|
+ >
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ <template v-if="+showDataType === 0">
|
|
|
|
+ <div id="table-wrapper" class="table-wrapper">
|
|
|
|
+ <el-table :key="showDataType" ref="table" :data="dataInfo.base.list" style="width: 100%" border @expand-change="openProvinceTeam">
|
|
|
|
+ <el-table-column label="排名" width="40" type="index" align="center" />
|
|
|
|
+ <el-table-column label="地区" :width="width / 9" prop="name" align="center" />
|
|
|
|
+ <el-table-column label="精" :width="width / 8" prop="hard" align="center" />
|
|
|
|
+ <el-table-column label="简" :width="width / 8" prop="simple" align="center" />
|
|
|
|
+ <el-table-column label="老" :width="width / 8" prop="old" align="center" />
|
|
|
|
+ <el-table-column label="棉老" :width="width / 8" prop="newold" align="center" />
|
|
|
|
+ <el-table-column label="合计" prop="value" align="center" :width="width / 7" />
|
|
|
|
+ <el-table-column type="expand" width="20">
|
|
|
|
+ <template slot-scope="{ row }">
|
|
|
|
+ <el-table v-if="row.list && row.list.length > 0" :data="row.list" border style="width: 100%;margin:20px 0">
|
|
|
|
+ <el-table-column label="昵称" prop="nickname" align="center" :width="width / 6" />
|
|
|
|
+ <el-table-column label="精" prop="hard" align="center" :width="width / 7" />
|
|
|
|
+ <el-table-column label="简" prop="simple" align="center" :width="width / 7" />
|
|
|
|
+ <el-table-column label="老" prop="old" align="center" :width="width / 7" />
|
|
|
|
+ <el-table-column label="棉老" prop="cold" align="center" :width="width / 7" />
|
|
|
|
+ <el-table-column label="合计" prop="acc" align="center" :width="width / 6" />
|
|
|
|
+ </el-table>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else-if="+showDataType === 1 ">
|
|
|
|
+ <el-table :key="showDataType" :data="dataInfo.crown" border>
|
|
|
|
+ <el-table-column label="排名" width="40" type="index" align="center" />
|
|
|
|
+ <el-table-column label="代理公司" prop="nickname" align="center" :width="width / 6.5" />
|
|
|
|
+ <el-table-column label="精" prop="hard" align="center" :width="width / 7" />
|
|
|
|
+ <el-table-column label="简" prop="simple" align="center" :width="width / 7" />
|
|
|
|
+ <el-table-column label="老" prop="old" align="center" :width="width / 7" />
|
|
|
|
+ <el-table-column label="棉老" prop="newold" align="center" :width="width / 7" />
|
|
|
|
+ <el-table-column label="金额" prop="money" align="center" :width="width / 6.5" />
|
|
|
|
+ </el-table>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else-if="+showDataType === 2">
|
|
|
|
+ <el-table :key="showDataType" :data="dataInfo.size" border>
|
|
|
|
+ <el-table-column label="商品名称" prop="goods_name" align="center" />
|
|
|
|
+ <el-table-column label="商品类型" prop="goods_size" align="center" />
|
|
|
|
+ <el-table-column label="销量" prop="num" align="center" sortable :sort-method="sizeNumSort" />
|
|
|
|
+ </el-table>
|
|
|
|
+ </template>
|
|
|
|
+ </template>
|
|
|
|
+ <div v-if="dataPasswordVis" class="data_password">
|
|
|
|
+ <el-input v-model="dataPassword" type="text" style="width: 300px;margin-bottom: 20px;" placeholder="请输入密码" />
|
|
|
|
+ <el-button type="primary" @click="checkDataPassword">确定</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 已达标/未达标 -->
|
|
|
|
+ <el-dialog
|
|
|
|
+ :title="dialogUser.title"
|
|
|
|
+ :visible.sync="dialogUser.vis"
|
|
|
|
+ width="90%"
|
|
|
|
+ top="50px"
|
|
|
|
+ >
|
|
|
|
+ <template v-if="dataInfo.base">
|
|
|
|
+ <el-table
|
|
|
|
+ :data="dialogUser.list"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column
|
|
|
|
+ type="index"
|
|
|
|
+ label="序号"
|
|
|
|
+ align="center"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="nickname"
|
|
|
|
+ label="昵称"
|
|
|
|
+ align="center"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="realname"
|
|
|
|
+ label="真实姓名"
|
|
|
|
+ align="center"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ prop="account"
|
|
|
|
+ label="总金额"
|
|
|
|
+ align="center"
|
|
|
|
+ />
|
|
|
|
+ <!-- <el-table-column
|
|
|
|
+ prop="pay_account"
|
|
|
|
+ label="已支付"
|
|
|
|
+ align="center"
|
|
|
|
+ /> -->
|
|
|
|
+ </el-table>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { isPC } from '@/utils'
|
|
|
|
+import { getSizeList, provinceTeam, baseData, crownList } from '@/api/datascreen'
|
|
|
|
+export default {
|
|
|
|
+ name: 'DataScreen4',
|
|
|
|
+ props: {},
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ showDataType: 0,
|
|
|
|
+ width: document.body.offsetWidth,
|
|
|
|
+ moduleListNav: [
|
|
|
|
+ { value: 0, name: '各省排名' },
|
|
|
|
+ { value: 1, name: '代理公司排名' },
|
|
|
|
+ { value: 2, name: '尺码明细' }
|
|
|
|
+ ],
|
|
|
|
+ dataPasswordVis: true,
|
|
|
|
+ dataPassword: '',
|
|
|
|
+ dataInfo: {
|
|
|
|
+ base: null,
|
|
|
|
+ crown: [],
|
|
|
|
+ size: []
|
|
|
|
+ },
|
|
|
|
+ dialogUser: {
|
|
|
|
+ list: [],
|
|
|
|
+ title: '',
|
|
|
|
+ vis: false
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ dataPasswordVis(a) {
|
|
|
|
+ a ? null : this.init()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ if (isPC()) {
|
|
|
|
+ this.$router.replace({ path: '/1' })
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ beforeDestroy() {
|
|
|
|
+ clearInterval(this.timer)
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ toSeeHonorUser(list, title) {
|
|
|
|
+ this.dialogUser.list = list
|
|
|
|
+ this.dialogUser.title = title
|
|
|
|
+ this.dialogUser.vis = true
|
|
|
|
+ },
|
|
|
|
+ init() { // 初始话
|
|
|
|
+ this.mergeAllData()
|
|
|
|
+ this.timer = setInterval(() => {
|
|
|
|
+ this.mergeAllData()
|
|
|
|
+ }, 1000 * 30)
|
|
|
|
+ },
|
|
|
|
+ mergeAllData() { // 统一请求
|
|
|
|
+ const loading = this.$loading()
|
|
|
|
+ Promise.all([this.getBaseData(), this.getCrownData(), this.getSizeData()]).then(res => {
|
|
|
|
+ loading.close()
|
|
|
|
+ this.dataInfo.base = res[0]
|
|
|
|
+ this.dataInfo.crown = res[1]
|
|
|
|
+ this.dataInfo.size = res[2]
|
|
|
|
+ this.baseDataChange(res[0])
|
|
|
|
+ }).catch(e => {
|
|
|
|
+ console.log(e)
|
|
|
|
+ loading.close()
|
|
|
|
+ this.$message.error(e || '获取数据失败')
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getBaseData() { // 基础数据
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ baseData().then(res => {
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ res.data.down_user.up = res.data.down_user.up.sort((a, b) => b.account - a.account)
|
|
|
|
+ res.data.down_user.down = res.data.down_user.down.sort((a, b) => b.account - a.account)
|
|
|
|
+ Object.keys(res.data.honor_num).forEach(k => {
|
|
|
|
+ res.data.honor_num[k]['user'] = res.data.honor_num[k]['user'].sort((a, b) => b.account - a.account)
|
|
|
|
+ })
|
|
|
|
+ resolve(res.data)
|
|
|
|
+ } else {
|
|
|
|
+ reject(res.message)
|
|
|
|
+ }
|
|
|
|
+ }).catch(e => {
|
|
|
|
+ reject(e)
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getCrownData() { // 皇冠数据
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ crownList().then(res => {
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ resolve(res.data.list.sort((a, b) => b.money - a.money))
|
|
|
|
+ } else {
|
|
|
|
+ reject(res.message)
|
|
|
|
+ }
|
|
|
|
+ }).catch(e => {
|
|
|
|
+ reject(e)
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getSizeData() { // 尺码数据
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ getSizeList().then(res => {
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ resolve(res.data.list.sort((a, b) => b.num - a.num))
|
|
|
|
+ } else {
|
|
|
|
+ reject(res.message)
|
|
|
|
+ }
|
|
|
|
+ }).catch(e => {
|
|
|
|
+ reject(e)
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ baseDataChange(data) { // 地图处理
|
|
|
|
+ let max = 0
|
|
|
|
+ let maxIndex = 0
|
|
|
|
+ data.list.forEach((e, i) => {
|
|
|
|
+ if (e.value > max) {
|
|
|
|
+ max = e.value
|
|
|
|
+ maxIndex = i
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ const step = Math.floor(max / 6)
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.echarts = window.echarts.init(document.getElementById('china4'))
|
|
|
|
+ this.echarts.setOption({
|
|
|
|
+ backgroundColor: '#FFFFFF',
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 6
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'item',
|
|
|
|
+ enterable: true,
|
|
|
|
+ alwaysShowContent: false,
|
|
|
|
+ formatter: params => {
|
|
|
|
+ this.$emit('renderDetail', params.dataIndex)
|
|
|
|
+ return `
|
|
|
|
+ <div id="s_map_tip">
|
|
|
|
+ <div id="TooltipInfo">
|
|
|
|
+ <div>${params.name}</div>
|
|
|
|
+ <div>排名: <span>${params.dataIndex + 1}</span></div>
|
|
|
|
+ <div>总金额: <span>${params.value}</span></div>
|
|
|
|
+ <div>精装版:<span>${data.list[params.dataIndex].hard}</span></div>
|
|
|
|
+ <div>简约版:<span>${data.list[params.dataIndex].simple}</span></div>
|
|
|
|
+ <div>老人版:<span>${data.list[params.dataIndex].old}</span></div>
|
|
|
|
+ <div>棉老版:<span>${data.list[params.dataIndex].newold}</span></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ `
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ visualMap: {
|
|
|
|
+ show: true,
|
|
|
|
+ x: 'left',
|
|
|
|
+ y: 'bottom',
|
|
|
|
+ splitList: [
|
|
|
|
+ { start: step * 6, end: step * 7, label: `${step * 6} - ${step * 7} 元` },
|
|
|
|
+ { start: step * 5, end: step * 6, label: `${step * 5} - ${step * 6} 元` },
|
|
|
|
+ { start: step * 4, end: step * 5, label: `${step * 4} - ${step * 5} 元` },
|
|
|
|
+ { start: step * 3, end: step * 4, label: `${step * 3} - ${step * 4} 元` },
|
|
|
|
+ { start: step * 2, end: step * 3, label: `${step * 2} - ${step * 3} 元` },
|
|
|
|
+ { start: step * 1, end: step * 2, label: `${step * 1} - ${step * 2} 元` },
|
|
|
|
+ { start: 1, end: step * 1, label: `${1} - ${step * 1} 元` },
|
|
|
|
+ { start: 0, end: 0, label: '0 元' }
|
|
|
|
+ ],
|
|
|
|
+ itemGap: 0,
|
|
|
|
+ itemWidth: 8,
|
|
|
|
+ itemHeight: 5.6,
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 8
|
|
|
|
+ },
|
|
|
|
+ color: ['#FF4C4C', '#FF6666', '#FF7F7F', '#FF9999', '#FFB2B2', '#FFCCCC', '#FFE5E5', '#EFEFEF']
|
|
|
|
+ },
|
|
|
|
+ series: [{
|
|
|
|
+ name: '销售套数',
|
|
|
|
+ type: 'map',
|
|
|
|
+ mapType: 'china',
|
|
|
|
+ aspectScale: 1,
|
|
|
|
+ zoom: 1.23,
|
|
|
|
+ label: {
|
|
|
|
+ normal: { show: true },
|
|
|
|
+ emphasis: { show: true }
|
|
|
|
+ },
|
|
|
|
+ data: data.list
|
|
|
|
+ }],
|
|
|
|
+ animation: true
|
|
|
|
+ })
|
|
|
|
+ if (!this.click) {
|
|
|
|
+ this.click = true
|
|
|
|
+ this.echarts.on('click', params => {
|
|
|
|
+ console.log(params)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ this.echarts.dispatchAction({
|
|
|
|
+ type: 'showTip',
|
|
|
|
+ seriesIndex: 0,
|
|
|
|
+ dataIndex: maxIndex
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getPer(num) { // 百分比
|
|
|
|
+ const { hard_money, old_money, simple_money, newold_money } = this.dataInfo.base
|
|
|
|
+ const all = hard_money + old_money + simple_money + newold_money
|
|
|
|
+ const per = Math.floor(num / all * 10000) / 100
|
|
|
|
+ const last = per.toFixed(1)
|
|
|
|
+ return last
|
|
|
|
+ },
|
|
|
|
+ checkDataPassword() { // 密码检测
|
|
|
|
+ if (this.dataPassword === '000') {
|
|
|
|
+ this.dataPasswordVis = false
|
|
|
|
+ } else {
|
|
|
|
+ if (!this.dataPassword) {
|
|
|
|
+ this.$message.error('请输入密码')
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error('密码错误')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ async openProvinceTeam(row, v) { // 省排名展开
|
|
|
|
+ if (row.list === undefined) {
|
|
|
|
+ this.loading = this.$loading()
|
|
|
|
+ const res = await provinceTeam({ province: row.name })
|
|
|
|
+ this.loading.close()
|
|
|
|
+ row.list = res.data.sort((a, b) => b.acc - a.acc)
|
|
|
|
+ this.$refs.table.toggleRowExpansion(row) // 收取折叠表格
|
|
|
|
+ this.$refs.table.toggleRowExpansion(row) // 再次展开强制渲染
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ sizeNumSort(a, b) { // 尺码排序
|
|
|
|
+ return a.num - b.num
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ .data-screen2 {
|
|
|
|
+ background:#f9f9fb;
|
|
|
|
+ /deep/ .el-dialog__wrapper {
|
|
|
|
+ z-index: 999999999 !important;
|
|
|
|
+ }
|
|
|
|
+ p {
|
|
|
|
+ margin: 0;
|
|
|
|
+ }
|
|
|
|
+ .s_top {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 174px;
|
|
|
|
+ background-image: url(../../assets/data_display/top_bg.png);
|
|
|
|
+ background-size: 100% auto;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: 50% 50%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ padding: 20px 15px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .s_top_title {
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ .s_top_name {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .s_money {
|
|
|
|
+ width: calc(100% - 30px);
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ margin-top: -80px;
|
|
|
|
+ height: 163px;
|
|
|
|
+ background-position: 0% 50%;
|
|
|
|
+ background-size: 100% auto;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ border-radius: 12px;
|
|
|
|
+ position: relative;
|
|
|
|
+ .s_money_value {
|
|
|
|
+ background:#EA4A41;
|
|
|
|
+ text-align: center;
|
|
|
|
+ width:92%;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ height:70px;
|
|
|
|
+ line-height:70px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 44px;
|
|
|
|
+ left: 50%;
|
|
|
|
+ top: 20px;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ }
|
|
|
|
+ .s_money_unit {
|
|
|
|
+ position: absolute;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ left: 50%;
|
|
|
|
+ top: 100px;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ }
|
|
|
|
+ .s_money_spec{
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ width: calc(100% - 70px);
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ color: #333333;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ &.s_money_ly{
|
|
|
|
+ bottom: 42px;
|
|
|
|
+ };
|
|
|
|
+ &.s_money_wq{
|
|
|
|
+ bottom: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .s_module_title {
|
|
|
|
+ height: 52px;
|
|
|
|
+ width: calc(100% - 30px);
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ p{
|
|
|
|
+ color: #333333;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+ &::before {
|
|
|
|
+ content: "";
|
|
|
|
+ display: block;
|
|
|
|
+ width: 14px;
|
|
|
|
+ height: 8px;
|
|
|
|
+ background-image: url(../../assets/data_display/s_module_icon.png);
|
|
|
|
+ background-size: 100%;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .s_goods {
|
|
|
|
+ width: calc(100% - 30px);
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ .s_goods_item {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 120px;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-size: 100%;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
+ padding: 15px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .item_title {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
+ .item_title_icon{
|
|
|
|
+ width: 18px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ background-size: contain;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: 50% 50%;
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ }
|
|
|
|
+ p {
|
|
|
|
+ color: #333333;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .item_data {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ flex: 1;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ padding-left: 12px;
|
|
|
|
+ .item_data_child {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 100%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ &:nth-of-type(1) {
|
|
|
|
+ p:nth-of-type(1) {
|
|
|
|
+ color: #3394F8 !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &:nth-of-type(2) {
|
|
|
|
+ p:nth-of-type(1) {
|
|
|
|
+ color: #EA4A41 !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &:nth-of-type(3) {
|
|
|
|
+ p:nth-of-type(1) {
|
|
|
|
+ color: #FF9E00 !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &:nth-of-type(4) {
|
|
|
|
+ p:nth-of-type(1) {
|
|
|
|
+ color: #333333 !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ p {
|
|
|
|
+ &:nth-of-type(1) {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
|
+ color: #999999;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .s_honor {
|
|
|
|
+ width: calc(100% - 30px);
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ .s_honor_item {
|
|
|
|
+ width: 105px;
|
|
|
|
+ height: 105px;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ background-position: 50% 50%;
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ border-radius: 12px;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+ &:nth-of-type(3n) {
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ position: relative;
|
|
|
|
+ p {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 15px;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ &:nth-of-type(1) {
|
|
|
|
+ bottom: 32px;
|
|
|
|
+ font-size:24px;
|
|
|
|
+ }
|
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
|
+ bottom: 12px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .s_all {
|
|
|
|
+ width: calc(100% - 30px);
|
|
|
|
+ height: 120px;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-size: 100%;
|
|
|
|
+ background-position: 50% 50%;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+ position: relative;
|
|
|
|
+ .s_all_num {
|
|
|
|
+ position: absolute;
|
|
|
|
+ font-size: 32px;
|
|
|
|
+ color: #333333;
|
|
|
|
+ left: 67px;
|
|
|
|
+ bottom: 50px;
|
|
|
|
+ }
|
|
|
|
+ .s_all_text {
|
|
|
|
+ color: #999999;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 67px;
|
|
|
|
+ bottom: 30px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .s_gift{
|
|
|
|
+ .s_gift_item {
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ padding: 18px 0;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ &:nth-of-type(1) {
|
|
|
|
+ p:nth-of-type(2) {
|
|
|
|
+ background: linear-gradient(to right, #A3CFF9, #487FE5)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &:nth-of-type(2) {
|
|
|
|
+ p:nth-of-type(2) {
|
|
|
|
+ background: linear-gradient(to right, #FF7801, #FE1F00)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ &:nth-of-type(3) {
|
|
|
|
+ p:nth-of-type(2) {
|
|
|
|
+ background: linear-gradient(to right, #FBA753, #FA803C)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ p{
|
|
|
|
+ text-align: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: initial;
|
|
|
|
+ &:nth-of-type(1) {
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ }
|
|
|
|
+ &:nth-of-type(2) {
|
|
|
|
+ width: 22px;
|
|
|
|
+ height: 4px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ }
|
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
|
+ color: #333333;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .s_map_title {
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 0 15px;
|
|
|
|
+ }
|
|
|
|
+ .s_map {
|
|
|
|
+ width: 100%;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+ padding: 15px;
|
|
|
|
+ margin-bottom: 2px;
|
|
|
|
+ .s_map_container {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ height: 254px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .s_table_nav {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 15px;
|
|
|
|
+ padding-bottom: 30px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
+ p {
|
|
|
|
+ color: #999999;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
|
+ margin-right: 0;
|
|
|
|
+ }
|
|
|
|
+ position: relative;
|
|
|
|
+ &.active {
|
|
|
|
+ color: #333333 !important;
|
|
|
|
+ &::after {
|
|
|
|
+ position: absolute;
|
|
|
|
+ content: "";
|
|
|
|
+ display: block;
|
|
|
|
+ left: 50%;
|
|
|
|
+ margin-top: 5px;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ width: 17px;
|
|
|
|
+ height: 4px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ background: linear-gradient(to right, #F97C55, #F44545);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .s_standard {
|
|
|
|
+ width: calc(100% - 30px);
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+ .s_standard_item {
|
|
|
|
+ width: 165px;
|
|
|
|
+ height: 97px;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-size: cover;
|
|
|
|
+ background-position: 50% 50%;
|
|
|
|
+ position: relative;
|
|
|
|
+ p{
|
|
|
|
+ position: absolute;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ left: 15px;
|
|
|
|
+ &:nth-of-type(1) {
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ bottom: 40px;
|
|
|
|
+ }
|
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ bottom: 15px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .header {
|
|
|
|
+ height: 60px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: #43464D;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 0 8px;
|
|
|
|
+ background: #F5F5F5;
|
|
|
|
+ .el-select {
|
|
|
|
+ width: 160px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .table-wrapper {
|
|
|
|
+ width: 100vw;
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+ .table-wrapper5 {
|
|
|
|
+ >.el-table {
|
|
|
|
+ >>> td[class^="el-table_6_column_"] {
|
|
|
|
+ padding: 0;
|
|
|
|
+ display: table-cell;
|
|
|
|
+ }
|
|
|
|
+ >>> .cell {
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+ .merge-item-item {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ line-height: 36px;
|
|
|
|
+ border-bottom: 1px solid rgb(223, 230, 236);
|
|
|
|
+ }
|
|
|
|
+ .merge-item-item:last-child {
|
|
|
|
+ border-bottom: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .el-table >>> .el-table__header-wrapper {
|
|
|
|
+ font-size: 3.11vw;
|
|
|
|
+ }
|
|
|
|
+ .el-table >>> .el-table__expanded-cell {
|
|
|
|
+ padding: 0 8px 8px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ /deep/ #s_map_tip {
|
|
|
|
+ padding: 6px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ #TooltipInfo{
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 100%;
|
|
|
|
+ font-size: 8px;
|
|
|
|
+ line-height: 12px;
|
|
|
|
+ div{
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
+ &:nth-of-type(1) {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ span {
|
|
|
|
+ color: #F2F204;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .data_password {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ z-index: 99;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ background: #fff;
|
|
|
|
+ }
|
|
|
|
+</style>
|