Browse Source

所属者订单

dakele 3 years ago
parent
commit
7c73aad184

+ 20 - 0
src/api/data/order_belong.js

@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+// list
+export function list(params) {
+  return request({
+    url: '/orders/GetBelongOrderRank',
+    method: 'get',
+    params
+  })
+}
+
+// 导出
+export function toExport(params) {
+  return request({
+    url: '/orders/ExportBelongOrderRank',
+    method: 'get',
+    params
+  })
+}
+

+ 1 - 1
src/pages/data/order.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
   <div class="app-container">
     <div v-loading.fullscreen.lock="loadingFull" />
     <div v-loading.fullscreen.lock="loadingFull" />
     <div class="search-container">
     <div class="search-container">
-      <el-input v-model="listQuery.search_name" type="text" placeholder="下单人昵称" style="width:300px" @keyup.enter.native="listQuery.page_index = 1; getList()" />
+      <el-input v-model="listQuery.search_name" type="text" placeholder="下单人昵称/姓名/手机号" style="width:300px" @keyup.enter.native="listQuery.page_index = 1; getList()" />
       <el-select v-model="listQuery.activity_id" style="width: 400px">
       <el-select v-model="listQuery.activity_id" style="width: 400px">
         <el-option label="全部" value="" />
         <el-option label="全部" value="" />
         <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
         <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />

+ 334 - 0
src/pages/data/order_belong.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="app-container">
+    <div v-loading.fullscreen.lock="loadingFull" />
+    <div class="search-container">
+      <el-input v-model="listQuery.search_name" type="text" placeholder="所属者昵称/姓名/手机号" style="width:300px" @keyup.enter.native="listQuery.page_index = 1; getList()" />
+      <el-select v-model="listQuery.activity_id" style="width: 400px">
+        <el-option label="全部" value="" />
+        <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
+      </el-select>
+      <el-date-picker
+        v-model="listQuery.time"
+        type="datetimerange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd HH:mm"
+        format="yyyy-MM-dd HH:mm"
+      />
+      <el-button type="primary" @click="listQuery.page_index = 1; getList()">搜索</el-button>
+      <el-button type="primary" @click="toExport">导出</el-button>
+    </div>
+    <!-- <div class="total_money">
+      <span>总订货金额: <i class="red">{{ parseMoney(total.all) }}</i></span>
+      <span>总付款金额: <i class="red">{{ parseMoney(total.pay) }}</i></span>
+      <span>总未付款金额: <i class="red">{{ parseMoney(total.no_pay) }}</i></span>
+      <span>总资金账户余额: <i class="red">{{ parseMoney(total.all_money) }}</i></span>
+    </div> -->
+    <el-table
+      border
+      stripe
+      :header-cell-style="{ background: '#f8fbfc' }"
+      class="tableBorder"
+      :data="limitTable"
+      @sort-change="MoneySort"
+    >
+      <el-table-column
+        type="index"
+        :index="index"
+        label="序号"
+        width="80"
+        align="center"
+      >
+        <span slot-scope="{ row: { no_pay_account }, $index }" :class="no_pay_account > 0 ? 'red' : ''">{{ $index + 1 + Number(listQuery.page_size) * (Number(listQuery.page_index) - 1) }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="nickname"
+        label="所属者昵称"
+      >
+        <span slot-scope="{ row: { nickname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ nickname }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="realname"
+        label="所属者姓名"
+      >
+        <span slot-scope="{ row: { realname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ realname }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="level"
+        label="所属者等级"
+      >
+        <template slot-scope="{ row }">
+          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['level'] || 0 }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="mobile"
+        label="所属者手机号"
+      >
+        <span slot-scope="{ row: { mobile, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ mobile }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="u_nickname"
+        label="下单人昵称"
+      >
+        <span slot-scope="{ row: { u_nickname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ u_nickname }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="u_mobile"
+        label="下单人手机号"
+      >
+        <span slot-scope="{ row: { u_mobile, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ u_mobile }}</span>
+      </el-table-column>
+
+      <el-table-column
+        prop="精装版"
+        label="精装版"
+        sortable="custom"
+      >
+        <template slot-scope="{ row }">
+          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['精装版'] || 0 }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="简约版"
+        label="简约版"
+        sortable="custom"
+      >
+        <template slot-scope="{ row }">
+          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['简约版'] || 0 }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="老人版"
+        label="老人版"
+        sortable="custom"
+      >
+        <template slot-scope="{ row }">
+          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['老人版'] || 0 }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="纯棉老人版"
+        label="纯棉老人版"
+        sortable="custom"
+      >
+        <template slot-scope="{ row }">
+          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['纯棉老人版'] || 0 }} </span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
+        prop="account"
+        label="订货金额"
+        sortable="custom"
+      >
+        <span slot-scope="{ row: { account, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(account) }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="pay_account"
+        label="已付款金额"
+        sortable="custom"
+      >
+        <span slot-scope="{ row: { pay_account, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(pay_account) }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="no_pay_account"
+        label="未付款金额"
+        sortable="custom"
+      >
+        <span slot-scope="{ row: { no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(no_pay_account) }}</span>
+      </el-table-column> -->
+      <!-- <el-table-column
+        prop="money"
+        label="账户余额"
+        sortable="custom"
+      >
+        <span slot-scope="{ row: { money } }" :class="money > 0 ? 'red' : ''">{{ parseMoney(money) }}</span>
+      </el-table-column> -->
+    </el-table>
+    <!-- 分页 -->
+    <pagination :total="tablelist.length" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
+  </div>
+</template>
+<script>
+// api
+import { list, toExport } from '@/api/data/order_belong'
+import { parseMoney } from '@/utils/index'
+import { formatter } from '@/filters/index'
+import { activityList } from '@/api/giftB'
+export default {
+  data() {
+    return {
+      loadingFull: false,
+      listQuery: {
+        page_index: 1,
+        page_size: 50,
+        search_name: '',
+        time: '',
+        activity_id: ''
+      },
+      tablelist: [],
+      tableTotal: 0,
+      total: {
+        all: 0,
+        pay: 0,
+        no_pay: 0,
+        all_money: 0
+      },
+      activitys: []
+    }
+  },
+  computed: {
+    limitTable() {
+      const { page_index, page_size } = this.listQuery
+      return this.tablelist.slice((Number(page_index) - 1) * Number(page_size), (Number(page_index) - 1) * Number(page_size) + page_size)
+    }
+  },
+  created() {
+    this.parseMoney = parseMoney
+    this.activityList(() => {
+      this.getList()
+    })
+  },
+  methods: {
+    async getList() {
+      this.loadingFull = true
+      const { page_index, page_size, search_name, time, activity_id } = this.listQuery
+      await list({
+        page_index, page_size, search_name, activity_id,
+        start_time: (time && time.length > 0) ? time[0] : '',
+        end_time: (time && time.length > 0) ? time[1] : ''
+      }).then(res => {
+        this.total = {
+          all: 0,
+          pay: 0,
+          no_pay: 0,
+          all_money: 0
+        }
+        this.loadingFull = false
+        if (res.code === 200) {
+          this.tablelist = res.data.list.list
+          // res.data.list.map(item => {
+          //   this.total.all += item.account
+          //   this.total.pay += item.pay_account
+          //   this.total.no_pay += item.no_pay_account
+          // })
+          this.total = {
+            all: res.data.list.total[0].account,
+            pay: res.data.list.total[0].pay_account,
+            no_pay: res.data.list.total[0].account - res.data.list.total[0].pay_account,
+            all_money: res.data.list.all_money
+          }
+          this.tableTotal = res.data.total
+        } else {
+          this.$message.error(res.message)
+        }
+      }).catch(e => {
+        this.loadingFull = false
+      })
+    },
+    index(i) {
+      const { page_index: a, page_size: b } = this.listQuery
+      return (a - 1) * b + i + 1
+    },
+    // 分页页码变化
+    changePagination(data) {
+      const { page, limit } = data
+      this.listQuery.page_size = limit
+      this.listQuery.page_index = page
+      // this.getList()
+    },
+    async toExport() {
+      this.loadingFull = true
+      const { page_index, page_size, search_name, time, activity_id } = this.listQuery
+      toExport({
+        page_index, page_size, search_name, activity_id,
+        start_time: (time && time.length > 0) ? time[0] : '',
+        end_time: (time && time.length > 0) ? time[1] : ''
+      }).then(res => {
+        if (res.code === 200) {
+          if (res.data.length === 0) {
+            this.$message.error('没有可导出数据')
+            return false
+          } else {
+            const header = Object.keys(res.data[0])
+            header.unshift('序号')
+            import('@/vendor/Export2Excel').then(excel => {
+              excel.export_json_to_excel({
+                header: header,
+                data: res.data.map((listItem, i) => header.map(j => {
+                  if (j === '简约版' || j === '纯棉老人版' || j === '精装版' || j === '老人版') {
+                    listItem[j] = Number(listItem[j]) || 0
+                  }
+                  if (j === '序号') {
+                    listItem[j] = i + 1
+                  }
+                  return listItem[j]
+                })),
+                filename: `${formatter(new Date(), 'yyyy-MM-dd')}订单排名`,
+                bookType: 'xlsx'
+              })
+            })
+          }
+        }
+      }).catch(e => {
+        this.$message.error('导出失败')
+      }).finally(() => {
+        this.loadingFull = false
+      })
+    },
+    MoneySort(column) {
+      const fieldName = column.prop
+      const sortingType = column.order
+      if (sortingType === 'descending') {
+        this.tablelist.sort((a, b) => Number(b[fieldName] || 0) - Number(a[fieldName] || 0))
+      } else if (sortingType === 'ascending') {
+        this.tablelist.sort((a, b) => Number(a[fieldName] || 0) - Number(b[fieldName] || 0))
+      }
+    },
+    async activityList(cb) {
+      this.loadingFull = true
+      await activityList().then(res => {
+        this.loadingFull = false
+        if (res.code === 200) {
+          this.activitys = res.data
+          res.data.map(item => {
+            if (item.is_ing === 1) {
+              this.listQuery.activity_id = item.id
+            }
+          })
+        }
+        cb && cb()
+      }).catch(e => {
+        this.loadingFull = false
+        cb && cb()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .search-container {
+    margin-bottom: 15px;
+  }
+
+  .red {
+    color: crimson;
+  }
+
+  .total_money {
+    margin-bottom: 15px;
+
+    span {
+      display: inline-block;
+      margin-right: 15px;
+    }
+
+    .red {
+      display: inline-block;
+      color: crimson;
+      font-size: 18px;
+    }
+  }
+</style>

+ 313 - 0
src/pages/data/order_co.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="app-container">
+    <div v-loading.fullscreen.lock="loadingFull" />
+    <div class="search-container">
+      <el-input v-model="listQuery.search_name" type="text" placeholder="下单人昵称" style="width:300px" @keyup.enter.native="listQuery.page_index = 1; getList()" />
+      <el-select v-model="listQuery.activity_id" style="width: 400px">
+        <el-option label="全部" value="" />
+        <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
+      </el-select>
+      <el-date-picker
+        v-model="listQuery.time"
+        type="datetimerange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd HH:mm"
+        format="yyyy-MM-dd HH:mm"
+      />
+      <el-button type="primary" @click="listQuery.page_index = 1; getList()">搜索</el-button>
+      <el-button type="primary" @click="toExport">导出</el-button>
+    </div>
+    <div class="total_money">
+      <span>总订货金额: <i class="red">{{ parseMoney(total.all) }}</i></span>
+      <span>总付款金额: <i class="red">{{ parseMoney(total.pay) }}</i></span>
+      <span>总未付款金额: <i class="red">{{ parseMoney(total.no_pay) }}</i></span>
+      <span>总资金账户余额: <i class="red">{{ parseMoney(total.all_money) }}</i></span>
+    </div>
+    <el-table
+      border
+      stripe
+      :header-cell-style="{ background: '#f8fbfc' }"
+      class="tableBorder"
+      :data="limitTable"
+      @sort-change="MoneySort"
+    >
+      <el-table-column
+        type="index"
+        :index="index"
+        label="序号"
+        width="80"
+        align="center"
+      >
+        <span slot-scope="{ row: { no_pay_account }, $index }" :class="no_pay_account > 0 ? 'red' : ''">{{ $index + 1 + Number(listQuery.page_size) * (Number(listQuery.page_index) - 1) }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="nickname"
+        label="代理昵称"
+      >
+        <span slot-scope="{ row: { nickname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ nickname }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="realname"
+        label="代理姓名"
+      >
+        <span slot-scope="{ row: { realname, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ realname }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="mobile"
+        label="代理手机号"
+      >
+        <span slot-scope="{ row: { mobile, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ mobile }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="精装版"
+        label="精装版"
+        sortable="custom"
+      >
+        <template slot-scope="{ row }">
+          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['精装版'] || 0 }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="简约版"
+        label="简约版"
+        sortable="custom"
+      >
+        <template slot-scope="{ row }">
+          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['简约版'] || 0 }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="老人版"
+        label="老人版"
+        sortable="custom"
+      >
+        <template slot-scope="{ row }">
+          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['老人版'] || 0 }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="纯棉老人版"
+        label="纯棉老人版"
+        sortable="custom"
+      >
+        <template slot-scope="{ row }">
+          <span :class="row.no_pay_account > 0 ? 'red' : ''">{{ row['纯棉老人版'] || 0 }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="account"
+        label="订货金额"
+        sortable="custom"
+      >
+        <span slot-scope="{ row: { account, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(account) }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="pay_account"
+        label="已付款金额"
+        sortable="custom"
+      >
+        <span slot-scope="{ row: { pay_account, no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(pay_account) }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="no_pay_account"
+        label="未付款金额"
+        sortable="custom"
+      >
+        <span slot-scope="{ row: { no_pay_account } }" :class="no_pay_account > 0 ? 'red' : ''">{{ parseMoney(no_pay_account) }}</span>
+      </el-table-column>
+      <el-table-column
+        prop="money"
+        label="账户余额"
+        sortable="custom"
+      >
+        <span slot-scope="{ row: { money } }" :class="money > 0 ? 'red' : ''">{{ parseMoney(money) }}</span>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <pagination :total="tablelist.length" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
+  </div>
+</template>
+<script>
+// api
+import { list, toExport } from '@/api/data/order'
+import { parseMoney } from '@/utils/index'
+import { formatter } from '@/filters/index'
+import { activityList } from '@/api/giftB'
+export default {
+  data() {
+    return {
+      loadingFull: false,
+      listQuery: {
+        page_index: 1,
+        page_size: 50,
+        search_name: '',
+        time: '',
+        activity_id: ''
+      },
+      tablelist: [],
+      tableTotal: 0,
+      total: {
+        all: 0,
+        pay: 0,
+        no_pay: 0,
+        all_money: 0
+      },
+      activitys: []
+    }
+  },
+  computed: {
+    limitTable() {
+      const { page_index, page_size } = this.listQuery
+      return this.tablelist.slice((Number(page_index) - 1) * Number(page_size), (Number(page_index) - 1) * Number(page_size) + page_size)
+    }
+  },
+  created() {
+    this.parseMoney = parseMoney
+    this.activityList(() => {
+      this.getList()
+    })
+  },
+  methods: {
+    async getList() {
+      this.loadingFull = true
+      const { page_index, page_size, search_name, time, activity_id } = this.listQuery
+      await list({
+        page_index, page_size, search_name, activity_id,
+        start_time: (time && time.length > 0) ? time[0] : '',
+        end_time: (time && time.length > 0) ? time[1] : ''
+      }).then(res => {
+        this.total = {
+          all: 0,
+          pay: 0,
+          no_pay: 0,
+          all_money: 0
+        }
+        this.loadingFull = false
+        if (res.code === 200) {
+          this.tablelist = res.data.list.list
+          // res.data.list.map(item => {
+          //   this.total.all += item.account
+          //   this.total.pay += item.pay_account
+          //   this.total.no_pay += item.no_pay_account
+          // })
+          this.total = {
+            all: res.data.list.total[0].account,
+            pay: res.data.list.total[0].pay_account,
+            no_pay: res.data.list.total[0].account - res.data.list.total[0].pay_account,
+            all_money: res.data.list.all_money
+          }
+          this.tableTotal = res.data.total
+        } else {
+          this.$message.error(res.message)
+        }
+      }).catch(e => {
+        this.loadingFull = false
+      })
+    },
+    index(i) {
+      const { page_index: a, page_size: b } = this.listQuery
+      return (a - 1) * b + i + 1
+    },
+    // 分页页码变化
+    changePagination(data) {
+      const { page, limit } = data
+      this.listQuery.page_size = limit
+      this.listQuery.page_index = page
+      // this.getList()
+    },
+    async toExport() {
+      this.loadingFull = true
+      const { page_index, page_size, search_name, time, activity_id } = this.listQuery
+      toExport({
+        page_index, page_size, search_name, activity_id,
+        start_time: (time && time.length > 0) ? time[0] : '',
+        end_time: (time && time.length > 0) ? time[1] : ''
+      }).then(res => {
+        if (res.code === 200) {
+          if (res.data.length === 0) {
+            this.$message.error('没有可导出数据')
+            return false
+          } else {
+            const header = Object.keys(res.data[0])
+            header.unshift('序号')
+            import('@/vendor/Export2Excel').then(excel => {
+              excel.export_json_to_excel({
+                header: header,
+                data: res.data.map((listItem, i) => header.map(j => {
+                  if (j === '简约版' || j === '纯棉老人版' || j === '精装版' || j === '老人版') {
+                    listItem[j] = Number(listItem[j]) || 0
+                  }
+                  if (j === '序号') {
+                    listItem[j] = i + 1
+                  }
+                  return listItem[j]
+                })),
+                filename: `${formatter(new Date(), 'yyyy-MM-dd')}订单排名`,
+                bookType: 'xlsx'
+              })
+            })
+          }
+        }
+      }).catch(e => {
+        this.$message.error('导出失败')
+      }).finally(() => {
+        this.loadingFull = false
+      })
+    },
+    MoneySort(column) {
+      const fieldName = column.prop
+      const sortingType = column.order
+      if (sortingType === 'descending') {
+        this.tablelist.sort((a, b) => Number(b[fieldName] || 0) - Number(a[fieldName] || 0))
+      } else if (sortingType === 'ascending') {
+        this.tablelist.sort((a, b) => Number(a[fieldName] || 0) - Number(b[fieldName] || 0))
+      }
+    },
+    async activityList(cb) {
+      this.loadingFull = true
+      await activityList().then(res => {
+        this.loadingFull = false
+        if (res.code === 200) {
+          this.activitys = res.data
+          res.data.map(item => {
+            if (item.is_ing === 1) {
+              this.listQuery.activity_id = item.id
+            }
+          })
+        }
+        cb && cb()
+      }).catch(e => {
+        this.loadingFull = false
+        cb && cb()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .search-container {
+    margin-bottom: 15px;
+  }
+
+  .red {
+    color: crimson;
+  }
+
+  .total_money {
+    margin-bottom: 15px;
+
+    span {
+      display: inline-block;
+      margin-right: 15px;
+    }
+
+    .red {
+      display: inline-block;
+      color: crimson;
+      font-size: 18px;
+    }
+  }
+</style>

+ 971 - 0
src/pages/dataScreen/11.vue

@@ -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>

+ 10 - 1
src/router/auth.js

@@ -444,7 +444,16 @@ export const asyncRoutes = [
         component: '/data/order',
         component: '/data/order',
         name: 'data_order',
         name: 'data_order',
         meta: {
         meta: {
-          title: '订单排名',
+          title: '代理公司排名',
+          noCache: true
+        }
+      },
+      {
+        path: 'order_belong',
+        component: '/data/order_belong',
+        name: 'data_order_belong',
+        meta: {
+          title: '所属者排名',
           noCache: true
           noCache: true
         }
         }
       },
       },