Merge branch 'feature/开门红' into release/20201210

# Conflicts:
#	src/router/ebiz/index.js

src/api/ebiz/goodStart/index.js

@@ -0,0 +1,38 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+// 开门红业绩查询机构列表查询
+export function getComList(data) {
+  return request({
+    url: getUrl('/data/performance/getComList', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 百宝箱菜单列表查询
+export function getTreasureMenus(data) {
+  return request({
+    url: getUrl('/app/code/getCodeValue', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 业绩查询
+export function getComPerformance(data) {
+  return request({
+    url: getUrl('/data/performance/getComPerformance', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 开门红方案图片查询
+export function getSchemePics(data) {
+  return request({
+    url: getUrl('/app/code/getCodeValue', 1),
+    method: 'post',
+    data
+  })
+}

src/assets/js/utils/orgShortName.js

@@ -0,0 +1,30 @@
+export const orgShortNames = [
+  { name: '北海', code: '86450501' },
+  { name: '广西八营', code: '86450168' },
+  { name: '广西二营', code: '86450162' },
+  { name: '广西六营', code: '86450166' },
+  { name: '广西七营', code: '86450167' },
+  { name: '广西三营', code: '86450163' },
+  { name: '广西四营', code: '86450164' },
+  { name: '广西五营', code: '86450165' },
+  { name: '贵港', code: '86450801' },
+  { name: '贵港一营', code: '86450861' },
+  { name: '桂林二本', code: '86450302' },
+  { name: '桂林一本', code: '86450301' },
+  { name: '桂林一营', code: '86450361' },
+  { name: '柳州一本', code: '86450201' },
+  { name: '柳州二本', code: '86450202' },
+  { name: '柳州四营', code: '86450264' },
+  { name: '柳州一营', code: '86450261' },
+  { name: '柳州鹿寨', code: '86450203' },
+  { name: '南宁民族', code: '86450103' },
+  { name: '精英项目', code: '86450102' },
+  { name: '南宁青秀', code: '86450101' },
+  { name: '南宁一营', code: '86450181' },
+  { name: '梧州', code: '86450401' },
+  { name: '梧州一营', code: '86450461' },
+  { name: '玉林二营', code: '86450962' },
+  { name: '玉林', code: '86450901' },
+  { name: '玉林三营', code: '86450963' },
+  { name: '玉林一营', code: '86450961' }
+]

src/router/ebiz/goodStart.js

@@ -0,0 +1,56 @@
+// 开门红业绩排名
+const PerformanceReport = () => import('@/views/ebiz/goodStart/PerformanceReport')
+// 开门红专区
+const Prefecture = () => import('@/views/ebiz/goodStart/Prefecture')
+const Treasure = () => import('@/views/ebiz/goodStart/Treasure')
+const TreasureDetail = () => import('@/views/ebiz/goodStart/TreasureDetail')
+const GoodStartScheme = () => import('@/views/ebiz/goodStart/GoodStartScheme')
+
+const spreadParams = function(route) {
+  const params = {}
+  for (let key in route.query) {
+    params[key] = route.query[key]
+  }
+  return params
+}
+
+export default [
+  {
+    path: '/goodStart/performanceReport',
+    name: 'PerformanceReport',
+    component: PerformanceReport,
+    meta: {
+      title: '开门红业绩排名'
+    }
+  },
+  {
+    path: '/goodStart/prefecture',
+    name: 'Prefecture',
+    component: Prefecture,
+    meta: {
+      title: '开门红专区'
+    }
+  },
+  {
+    path: '/goodStart/treasure',
+    name: 'Treasure',
+    component: Treasure,
+    meta: {
+      title: '百宝箱'
+    }
+  },
+  {
+    path: '/goodStart/treasureDetail',
+    name: 'TreasureDetail',
+    component: TreasureDetail,
+    props: route => spreadParams(route)
+  },
+  {
+    path: '/goodStart/goodStartScheme',
+    name: 'GoodStartScheme',
+    component: GoodStartScheme,
+    meta: {
+      title: '开门红方案'
+    }
+  }
+]

src/router/ebiz/index.js

@@ -23,6 +23,9 @@ import institutionalPerform from './institutionalPerform'
 import performance from './performance'
 import attendance from './attendance'
 
+// 开门红业绩
+import goodStart from './goodStart'
+
 import renewalManage from './renewalManage'
 import question from './question'
 import hgb from './hgb'
@@ -51,5 +54,6 @@ export default [
   ...congratulation,
   ...renewalManage,
   ...question,
-  ...hgb
+  ...hgb,
+  ...goodStart
 ] //根据需要进行删减

src/views/ebiz/goodStart/GoodStartScheme.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="good-start-scheme bg-white">
+    <van-grid :column-num="3">
+      <van-grid-item v-for="(pic, i) in pics" :key="i">
+        <van-image height="200" :src="$assetsUrl + pic.picUrl" @click="prevImg(pic, i)" />
+      </van-grid-item>
+    </van-grid>
+    <van-image-preview id="preview" v-model="isPrevShow" :images="images" :start-position="startPosition" @change="onPageChange" />
+    <van-button class="share-btn" v-show="isPrevShow" type="danger" block @click="shareImg">分享</van-button>
+  </div>
+</template>
+
+<script>
+import { Grid, GridItem, Image as VanImage, ImagePreview, Pagination } from 'vant'
+import { getSchemePics } from '@/api/ebiz/goodStart'
+import Vue from 'vue'
+
+// 全局注册
+Vue.use(ImagePreview)
+export default {
+  components: {
+    [Grid.name]: Grid,
+    [GridItem.name]: GridItem,
+    [VanImage.name]: VanImage,
+    [Pagination.name]: Pagination
+  },
+  data() {
+    return {
+      isPrevShow: false,
+      currentPage: 0,
+      pics: [],
+      startPosition: 0
+    }
+  },
+  computed: {
+    images() {
+      const picArr = []
+      for (let pic of this.pics) {
+        picArr.push(this.$assetsUrl + pic.picUrl)
+      }
+      return picArr
+    }
+  },
+  created() {
+    this.getSchemePics()
+    this.interceptAppBtn()
+  },
+  methods: {
+    prevChange(index) {
+      this.startPosition = index
+    },
+    interceptAppBtn() {
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('webview_left_button', {
+          intercept: '1'
+        })
+      }, 100)
+      window.appCallBack = this.appCallBack
+    },
+    appCallBack(data) {
+      if (data.trigger == 'left_button_click') {
+        if (!this.isPrevShow) {
+          this.$jump({
+            flag: 'h5',
+            extra: {
+              title: '开门红专区',
+              forbidSwipeBack: 1,
+              url: location.origin + `/#/goodStart/prefecture`
+            },
+            routerInfo: {
+              path: `/goodStart/prefecture`,
+              type: '1'
+            }
+          })
+        } else {
+          this.isPrevShow = false
+        }
+      }
+    },
+    onPageChange(page) {
+      this.currentPage = page
+    },
+    async getSchemePics() {
+      const param = { operateType: 'goodStart_scheme' }
+      const result = await getSchemePics(param)
+      if (result.result === '0') {
+        this.pics = result.content
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    },
+    prevImg(pic, i) {
+      this.isPrevShow = true
+      this.startPosition = i
+    },
+    shareImg() {
+      console.log(this.images[this.currentPage])
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('bridge', {
+        flag: 'share',
+        extra: {
+          shareType: '1',
+          img: this.images[this.currentPage]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.good-start-scheme {
+  padding-bottom: 20px;
+}
+
+/deep/ .van-grid-item__content {
+  padding: 5px;
+}
+
+.share-btn {
+  position: fixed;
+  bottom: 0;
+  z-index: 10000;
+}
+
+/deep/ .van-image-preview__image {
+  bottom: auto;
+}
+
+/deep/ .van-pagination__item {
+  color: #ff0033;
+}
+
+/deep/ .van-pagination__item--active {
+  background-color: #ff0033;
+  color: #fff;
+}
+
+#pagination {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>

src/views/ebiz/goodStart/Organization.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="organization">
+    <van-tabs v-model="active" :ellipsis="false" :line-width="20" @change="updateQueryConditon">
+      <van-tab v-for="(tab, index) in tabs" :key="index" :title="tab.name" :disabled="tab.available" />
+    </van-tabs>
+    <div class="table-wrapper">
+      <table class="myTable mb30" cellspacing="0" cellpadding="0">
+        <tr>
+          <th class="sticky th-rank">排名</th>
+          <th v-for="(column, index) in tableColumns" :key="index" :class="{ orgName: index === 0 }">
+            {{ column.name }}
+          </th>
+        </tr>
+        <tr v-for="(value, index) in values" :key="index">
+          <td class="sticky bleft bright">{{ index + 1 }}</td>
+          <td v-for="(key, i) in needGettingKey" :key="i" class="bright" :class="{ orgName: i === 0 }">{{ value[key] | blankFilter }}</td>
+        </tr>
+        <tr v-if="values.length === 0">
+          <td class="nodata bleft bright" :colspan="tableColumns.length + 1">暂无数据</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tab, Tabs } from 'vant'
+import { orgShortNames } from '@/assets/js/utils/orgShortName'
+export default {
+  name: 'Organization',
+  components: {
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs
+  },
+  props: {
+    availableLevel: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      active: 0,
+      tabs: [
+        { name: '中心支公司', available: false, level: 3 },
+        { name: '营销服务部', available: false, level: 4 },
+        { name: '下辖营业区', available: false, level: 5 },
+        { name: '下辖营业部', available: false, level: 6 },
+        { name: '下辖营业组', available: false, level: 7 }
+      ],
+      needGettingKey: ['name', 'ysbb', 'ysjs', 'bzbf', 'cbjs'],
+      tableColumns: [
+        { name: '机构', key: 'name' },
+        { name: '预收标保(万元)', key: 'ysbb' },
+        { name: '预收件数(件)', key: 'ysjs' },
+        { name: '承保标保(万元)', key: 'bzbf' },
+        { name: '承保件数(件)', key: 'cbjs' }
+      ],
+      values: []
+    }
+  },
+  watch: {
+    availableLevel(nv) {
+      this.active = nv - 3
+      for (let tab of this.tabs) {
+        if (tab.level < this.availableLevel) {
+          tab.available = true
+        }
+      }
+    }
+  },
+  methods: {
+    updateQueryConditon(index) {
+      this.$emit('updateQueryCom', index)
+    },
+    setTableData(data) {
+      data = data.filter(item => {
+        return item.name
+      })
+      data.map(item => {
+        item.bzbf = parseFloat(item.bzbf).toFixed(2)
+        item.ysbb = parseFloat(item.ysbb).toFixed(2)
+        return item
+      })
+      this.values = data
+      for (let org of this.values) {
+        for (let shortName of orgShortNames) {
+          if (org.code === shortName.code) {
+            org.name = shortName.name
+          }
+        }
+      }
+    },
+    calculate() {
+      let allPrice = this.values.reduce((prevVal, currVal) => {
+        return prevVal + Number(currVal.cbbb)
+      }, 0)
+      this.values.map(product => {
+        product.percent = ((product.cbbb / allPrice) * 100).toFixed(2)
+        return product
+      })
+    }
+  },
+  filters: {
+    blankFilter(val) {
+      return val ? val : '-'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$border: 1px solid #e4e4e4;
+$bgRed: #f03;
+$white: #fff;
+
+.th-rank {
+  width: 50px;
+}
+
+.orgName {
+  width: 8em;
+  position: sticky;
+  left: 59px;
+}
+
+.organization {
+  background-color: #fff;
+}
+
+::v-deep .van-tabs__wrap {
+  padding: 10px;
+}
+
+::v-deep .van-tabs__nav {
+  border-radius: 5px;
+  border: 1px solid #e4e4e4;
+  padding-bottom: 0;
+}
+
+::v-deep .van-tabs__line {
+  width: 50px;
+  bottom: 0;
+}
+
+::v-deep .van-tab--active {
+  // font-size: 14px;
+  font-weight: bolder;
+  transition: all 0.1s ease;
+}
+
+.table-wrapper {
+  overflow: auto;
+  margin: 0 10px;
+}
+
+.myTable {
+  text-align: center;
+  min-width: 200vw;
+}
+
+.myTable td,
+.myTable th {
+  font-size: 14px;
+  padding: 10px 5px;
+  border-bottom: $border;
+  border-collapse: collapse;
+  background-color: $white;
+}
+
+.myTable th {
+  background-color: $bgRed;
+  border: none;
+  color: $white;
+}
+
+.sticky {
+  position: sticky;
+  left: 0;
+}
+
+.bleft {
+  border-left: $border;
+}
+
+.bright {
+  border-right: $border;
+}
+
+.nodata {
+  text-align: left;
+  text-indent: 10em;
+}
+</style>

src/views/ebiz/goodStart/PerformanceReport.vue

@@ -0,0 +1,483 @@
+<template>
+  <div>
+    <div class="header">
+      <div class="header-left">
+        <van-button>
+          <img :src="point" />
+          <span class="ml5 mr5">标保</span>
+        </van-button>
+      </div>
+      <div class="header-center">
+        <van-button class="btn-gray" :class="{ activeBtn: timeType === 0 }" @click="isDayConditionShow = true">日</van-button>
+        <van-button class="btn-gray month" :class="{ activeBtn: timeType === 1 }" @click="isMonthConditionShow = true">月</van-button>
+        <van-button class="btn-gray" :class="{ activeBtn: timeType === 2 }" @click="isYearConditionShow = true">年</van-button>
+      </div>
+      <div class="header-right">
+        <van-button @click="isTimeBarShow = true">
+          <span class="mr5">{{ timeCondition }}</span>
+          <van-icon name="arrow-down" />
+        </van-button>
+      </div>
+    </div>
+    <!-- 筛选 -->
+    <div class="classification">
+      <div :style="scrollObj">
+        <span>机构名称: </span>
+        <span v-for="(level, index) in 6" :key="index" class="filter" @click="showLevelCondition(level)">
+          <span>{{ levelNames[level] }}</span>
+          <van-icon name="arrow-down" />
+        </span>
+      </div>
+    </div>
+    <div class="content">
+      <Organization ref="organization" @updateQueryCom="updateQueryCom" :availableLevel.sync="availableLevel" />
+    </div>
+    <!-- 机构筛选栏 -->
+    <van-popup v-for="(level, index) in 6" :key="index" v-model="popCondition[index]" position="bottom" :style="{ height: '40vh' }">
+      <van-picker show-toolbar :columns="columns[level]" @confirm="onLevelConditionConfirm($event, level)" @cancel="closeLevelConditionPopup(level)" />
+    </van-popup>
+    <!-- 时间筛选栏 -->
+    <van-popup v-model="isTimeBarShow" position="bottom" :style="{ height: '40vh' }">
+      <van-datetime-picker
+        v-model="dayTimeCondition"
+        type="datetime"
+        :max-date="maxDate"
+        @confirm="onDayTimeConditionConfirm"
+        @cancel="isTimeBarShow = false"
+      />
+    </van-popup>
+    <!-- 日 -->
+    <van-popup v-model="isDayConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-datetime-picker v-model="dayCondition" type="date" :max-date="maxDate" @confirm="onDayConditionConfirm" @cancel="isDayConditionShow = false" />
+    </van-popup>
+    <!-- 月 -->
+    <van-popup v-model="isMonthConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-datetime-picker
+        v-model="monthCondition"
+        type="year-month"
+        :max-date="maxDate"
+        @confirm="onMonthConditionConfirm"
+        @cancel="isMonthConditionShow = false"
+      />
+    </van-popup>
+    <!-- 年 -->
+    <van-popup v-model="isYearConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-picker show-toolbar :columns="years" @confirm="onYearConditionConfirm" @cancel="isYearConditionShow = false" />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import point from '@/assets/images/ebiz/point.png'
+import { Popup, Tab, Tabs, DatetimePicker, Picker, Toast } from 'vant'
+import Organization from './Organization.vue'
+import dateUtil from '@/assets/js/utils/date-utils.js'
+import { getComPerformance, getComList } from '@/api/ebiz/goodStart'
+import { getAgentInfo } from '@/api/ebiz/my/my'
+
+// 当前时间
+const currentDate = new Date()
+
+export default {
+  name: 'UnderOffice',
+  components: {
+    [Popup.name]: Popup,
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [DatetimePicker.name]: DatetimePicker,
+    [Picker.name]: Picker,
+    [Toast.name]: Toast,
+    Organization
+  },
+  data() {
+    return {
+      // 代理人是否是内勤
+      isInner: false,
+      availableLevel: 0,
+      scrollObj: { width: 'auto', whiteSpace: 'nowrap' },
+      popCondition: [false, false, false, false, false, false],
+      columns: {
+        1: ['全国'],
+        2: ['全部'],
+        3: ['全部'],
+        4: ['全部'],
+        5: ['全部'],
+        6: ['全部']
+      },
+      timeType: 0,
+      // 最大查询日期
+      maxDate: currentDate,
+      // 日期筛选条件
+      dayCondition: currentDate,
+      // 月份筛选条件
+      monthCondition: currentDate,
+      // 年份筛选条件
+      yearCondition: currentDate.getFullYear(),
+      // 实时筛选时间条件
+      timeCondition: dateUtil.formatDate(currentDate, 'MM-dd HH:mm'),
+      dayTimeCondition: currentDate,
+      // 0: 标保, 1: 人力, 2: 产品
+      typeIndex: 0,
+      active: 0,
+      // 日期筛选是否显示
+      isTimeBarShow: false,
+      // 日筛选是否显示
+      isDayConditionShow: false,
+      // 月筛选是否展示
+      isMonthConditionShow: false,
+      // 年筛选是否显示
+      isYearConditionShow: false,
+      point,
+      levelNames: {
+        1: '全国',
+        2: '全部',
+        3: '全部',
+        4: '全部',
+        5: '全部',
+        6: '全部'
+      },
+      level1Code: 0,
+      level1Objs: [],
+      level2Code: 0,
+      level2Objs: [],
+      level3Code: 0,
+      level3Objs: [],
+      level4Code: 0,
+      level4Objs: [],
+      level5Code: 0,
+      level5Objs: [],
+      level6Code: 0,
+      level6Objs: [],
+      provinceCode: 0,
+      provinceObjs: [],
+      cityCode: 0,
+      cityObjs: [],
+      areaCode: 0,
+      areaObjs: [],
+      years: [],
+      params: {
+        // 86: 全国
+        manageCode: '86',
+        // 01: 全国, 02: 中心支公司, 03: 营销服务部, 04: 下辖营业区
+        manageLv: '01',
+        // 日期类型: 年/月/日/实时
+        queryType: 'd',
+        date: currentDate,
+        type: 'KMH',
+        queryCom: 'z'
+      }
+    }
+  },
+  async mounted() {
+    // 判断内外勤
+    await this.judgeUserType()
+    this.initData()
+    // 设置APP右上角按钮图片
+    this.setRightBtn()
+  },
+  methods: {
+    async judgeUserType() {
+      const result = await getAgentInfo({})
+      if (result.result === '0') {
+        // 纯数字为外勤
+        const regx = /^[0-9]+$/
+        this.isInner = !regx.test(result.branchType)
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    },
+    // 显示机构下拉选
+    showLevelCondition(level) {
+      if (!this.isInner && level < this.availableLevel) return
+      this.$set(this.popCondition, level - 1, true)
+    },
+    // 隐藏机构下拉选
+    closeLevelConditionPopup(level) {
+      this.$set(this.popCondition, level - 1, false)
+    },
+    // 查询某一层级机构筛选选项
+    async getLevelFilterColumn(manageCode = '', manageLv = '') {
+      const result = await getComList({
+        bussinessType: 'kmh',
+        manageCode,
+        manageLv
+      })
+      if (result.result === '0') {
+        return result
+      } else {
+        this.$toast(result.resultMessage)
+        return false
+      }
+    },
+    // 设置下拉选数据
+    setLevelColumns(level) {
+      const columns = [level === 1 ? '全国' : '全部']
+      this[`level${level}Objs`].forEach(item => {
+        columns.push(item.name)
+      })
+      this.$set(this.columns, level, columns)
+    },
+    // 机构下拉选确定回调
+    async onLevelConditionConfirm(data, level) {
+      // 隐藏机构下拉选
+      this.closeLevelConditionPopup(level)
+      // 设置选择的机构名称
+      this.levelNames[level] = data
+      // 将当前机构下属机构设置为全部
+      for (let i = level + 1; i <= 6; i++) {
+        this.$set(this.levelNames, i, '全部')
+      }
+      // 查找选择的机构
+      const target = this[`level${level}Objs`].find(item => {
+        return item.name === data
+      })
+      // 选择的机构存在&不是最后一级时查询下级机构下拉选数据
+      if (target) {
+        // level1~3取code, level4~6取inCode
+        if (level >= 4) {
+          this[`level${level}Code`] = target.inCode
+        } else {
+          this[`level${level}Code`] = target.code
+        }
+        // 不是最后一级机构查询下级机构数据
+        if (level < 6) {
+          const data = await this.getLevelFilterColumn(target.code, `0${level + 1}`)
+          if (data) {
+            // 清空数据再设置下级机构下拉选数据
+            this[`level${level + 1}Objs`].splice(0)
+            this[`level${level + 1}Objs`].push(...data.content)
+            this.setLevelColumns(level + 1)
+          }
+        }
+      }
+      // 选择全部时取上级机构
+      if (data === '全国') {
+        this.params.manageCode = '86'
+      } else if (data === '全部') {
+        this.params.manageCode = this[`level${level - 1}Code`]
+      } else {
+        this.params.manageCode = this[`level${level}Code`]
+      }
+      if (data === '全国') {
+        this.params.manageLv = '01'
+      } else if (data === '全部') {
+        this.params.manageLv = `0${level}`
+      } else {
+        this.params.manageLv = `0${level + 1}`
+      }
+      // 发送接口查数据
+      this.getSetDate()
+    },
+    reset() {
+      location.reload()
+    },
+    async getSetDate() {
+      let result = await this.getPerformanceRankData()
+      if (result.result === '0') {
+        this.$refs.organization.setTableData(result.content.list)
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    },
+    appCallBack(data) {
+      if (data.trigger == 'right_button_click') {
+        this.reset()
+      }
+    },
+    async dataTypeChange() {
+      await this.getSetDate()
+    },
+    setRightBtn() {
+      setTimeout(() => {
+        window.EWebBridge.webCallAppInJs('webview_right_button', {
+          btns: [
+            {
+              img: this.$assetsUrl + 'images/ebiz/refresh.png'
+            }
+          ]
+        })
+      }, 1000)
+      window.appCallBack = this.appCallBack
+    },
+    async initData() {
+      // 初始化年份筛选数据
+      const currentYear = new Date().getFullYear()
+      const startYear = currentYear - 10
+      for (let year = startYear; year <= currentYear; year++) {
+        this.years.unshift(year)
+      }
+      // 查询全部分公司
+      const res = await this.getLevelFilterColumn()
+      if (res) {
+        const firsts = res.content
+        // 内勤
+        if (this.isInner) {
+          // 设置下拉选
+          this.level1Objs = firsts
+          this.setLevelColumns(1)
+          // 查询默认数据
+          await this.getSetDate()
+        }
+        // 外勤
+        else {
+          // 外勤时返回无法修改的机构列表
+          const unavailableOrgs = firsts.filter(item => item.code !== '86').reverse()
+          for (let org of unavailableOrgs) {
+            this.$set(this.levelNames, org.level - 1, org.name)
+            this[`level${org.level}Code`] = org.level > 4 ? org.inCode : org.code
+          }
+          // 外勤可以查看的最高级别机构
+          const availableOrg = firsts[0]
+          this.availableLevel = availableOrg.level
+          // 查询下级机构
+          const data = await this.getLevelFilterColumn(availableOrg.code, availableOrg.level)
+          if (data) {
+            // 清空数据再设置下级机构下拉选数据
+            this[`level${availableOrg.level}Objs`].splice(0)
+            this[`level${availableOrg.level}Objs`].push(...data.content)
+            this.setLevelColumns(availableOrg.level)
+          }
+          this.params.manageCode = this.availableLevel >= 4 ? firsts[0].inCode : firsts[0].code
+          this.params.manageLv = `0${this.availableLevel}`
+        }
+      }
+    },
+    // 查询业绩数据
+    async getPerformanceRankData() {
+      let date = null
+      switch (this.timeType) {
+        case 0:
+          date = this.dayCondition
+          this.params.queryType = 'd'
+          break
+        case 1:
+          date = this.monthCondition
+          this.params.queryType = 'm'
+          break
+        case 2:
+          date = new Date(String(this.yearCondition))
+          this.params.queryType = 'y'
+          break
+        case 3:
+          date = this.dayTimeCondition
+          this.params.queryType = 'd'
+          break
+      }
+      this.params.date = dateUtil.formatDate(date, 'yyyy-MM-dd')
+      let result = await getComPerformance(this.params)
+      return result
+    },
+    async onDayConditionConfirm() {
+      this.isDayConditionShow = false
+      this.timeType = 0
+      await this.getSetDate()
+    },
+    async onMonthConditionConfirm() {
+      this.isMonthConditionShow = false
+      this.timeType = 1
+      await this.getSetDate()
+    },
+    async onYearConditionConfirm() {
+      this.isYearConditionShow = false
+      this.timeType = 2
+      await this.getSetDate()
+    },
+    // 筛选时间确认事件
+    async onDayTimeConditionConfirm(time) {
+      this.isTimeBarShow = false
+      this.timeType = 3
+      this.timeCondition = dateUtil.formatDate(time, 'MM-dd HH:mm')
+      this.params.date = ''
+      await this.getSetDate()
+    },
+    async updateQueryCom(val) {
+      switch (val) {
+        case 0:
+          this.params.queryCom = 'z'
+          break
+        case 1:
+          this.params.queryCom = 'y'
+          break
+        case 2:
+          this.params.queryCom = 'q'
+          break
+        case 3:
+          this.params.queryCom = 'b'
+          break
+        case 4:
+          this.params.queryCom = 'zz'
+          break
+      }
+      await this.getSetDate()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  background: #f03;
+  .header-left,
+  .header-center,
+  .header-right {
+    border-radius: 5px;
+    overflow: hidden;
+  }
+  .header-center {
+    .month {
+      border-left: none;
+      border-right: none;
+    }
+    .van-button {
+      border-radius: 0;
+    }
+    .btn-gray {
+      background-color: #f2f2f2;
+    }
+    .activeBtn {
+      color: red;
+      background-color: #fff;
+    }
+  }
+}
+
+.classification {
+  font-size: 14px;
+  margin: 15px;
+  overflow: hidden;
+  overflow-x: auto;
+  .filter {
+    margin-left: 5px;
+    .van-icon {
+      vertical-align: middle;
+      margin-top: 2px;
+    }
+  }
+}
+
+span {
+  vertical-align: middle;
+}
+
+.content {
+  padding: 0 10px;
+}
+
+.van-icon {
+  font-weight: bolder;
+}
+
+::v-deep .van-button__text {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+::v-deep .van-button {
+  padding: 0 10px;
+}
+</style>

src/views/ebiz/goodStart/Prefecture.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="prefecture">
+    <div class="menu-container">
+      <van-grid :column-num="2" :border="false">
+        <van-grid-item v-for="(menu, i) in menus" :key="i" @click="onMenuClicked(menu)">
+          <img :src="$assetsUrl + menu.icon" />
+          <span class="menu-text">{{ menu.name }}</span>
+        </van-grid-item>
+      </van-grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Grid, GridItem } from 'vant'
+export default {
+  name: 'Prefecture',
+  components: {
+    [Grid.name]: Grid,
+    [GridItem.name]: GridItem
+  },
+  data() {
+    return {
+      menus: [
+        { name: '开门红业绩排名', icon: 'images/goodStart/performanceRank.png', route: '/goodStart/performanceReport' },
+        { name: '上头条', icon: 'images/goodStart/topOne.png', route: '/congratulation/congratulationTop' },
+        { name: '大单榜', icon: 'images/goodStart/bigOrder.png', route: '/congratulation/congratulationList' },
+        { name: '微信头像生成器', icon: 'images/goodStart/wechat.png', route: '/my/userWxHead2' },
+        { name: '开门红方案', icon: 'images/goodStart/goodStart.png', route: '/goodStart/goodStartScheme' },
+        { name: '百宝箱', icon: 'images/goodStart/treasure.png', route: '/goodStart/treasure' }
+      ]
+    }
+  },
+  mounted() {
+    this.changeNavigator()
+    this.interceptAppBtn()
+  },
+  methods: {
+    interceptAppBtn() {
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('webview_left_button', {
+          intercept: '1'
+        })
+      }, 100)
+      window.appCallBack = this.appCallBack
+    },
+    appCallBack(data) {
+      if (data.trigger == 'left_button_click') {
+        this.$jump({
+          flag: 'home'
+        })
+      }
+    },
+    changeNavigator() {
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        EWebBridge.webCallAppInJs('navigation_color', {
+          bar_color: 'E24B2D',
+          title_color: 'FFFFFF'
+        })
+      }, 100)
+    },
+    onMenuClicked(menu) {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#${menu.route}`
+        },
+        routerInfo: { path: `${menu.route}` }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.prefecture {
+  min-height: 100vh;
+  background-image: url('../../../assets/images/goodStart/top.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu-container {
+  width: 670px;
+  height: 783px;
+  background: rgba(255, 255, 255, 0.89);
+  box-shadow: 0px 2px 34px 0px rgba(132, 61, 52, 0.25);
+  border-radius: 12px;
+  width: 335px;
+  height: 390px;
+  margin-top: 160px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  img {
+    width: 60px;
+  }
+  .menu-text {
+    margin-top: 10px;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    line-height: 20px;
+  }
+}
+
+::v-deep .van-grid-item__content {
+  background-color: transparent;
+}
+</style>

src/views/ebiz/goodStart/Treasure.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="treasure bg-white">
+    <van-cell is-link v-for="(menu, index) in menus" :key="index" :icon="$assetsUrl + menu.iconUrl" @click="toDetail(menu)">
+      <template #title>
+        <span>{{ menu.name }}</span>
+      </template>
+    </van-cell>
+  </div>
+</template>
+
+<script>
+import { Grid, GridItem } from 'vant'
+import { getTreasureMenus } from '@/api/ebiz/goodStart'
+export default {
+  name: 'Treasure',
+  components: {
+    [Grid.name]: Grid,
+    [GridItem.name]: GridItem
+  },
+  data() {
+    return {
+      menus: []
+    }
+  },
+  methods: {
+    toDetail(menu) {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/goodStart/treasureDetail?img=${menu.detailImgUrl}&title=${menu.name}`
+        },
+        routerInfo: {
+          path: `/goodStart/treasureDetail?img=${menu.detailImgUrl}&title=${menu.name}`
+        }
+      })
+    },
+    async getMenus() {
+      const param = { operateType: 'treasure_menus' }
+      const result = await getTreasureMenus(param)
+      if (result.result === '0') {
+        this.menus = result.content
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    }
+  },
+  mounted() {
+    this.getMenus()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.treasure {
+  min-height: 100vh;
+}
+
+#app .van-cell:not(:last-child)::after {
+  border: none;
+}
+
+::v-deep .van-cell {
+  border-bottom: 1px solid #f1f1f1;
+}
+
+img {
+  max-width: 80%;
+}
+</style>

src/views/ebiz/goodStart/TreasureDetail.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <img :src="$assetsUrl + img" @click="prevImg" />
+  </div>
+</template>
+
+<script>
+import { ImagePreview } from 'vant'
+export default {
+  components: {
+    [ImagePreview.name]: ImagePreview
+  },
+  name: 'TreasureDetail',
+  props: {
+    img: {
+      type: String
+    },
+    title: {
+      type: String
+    }
+  },
+  data() {
+    return {}
+  },
+  created() {
+    document.title = this.title
+  },
+  methods: {
+    prevImg() {
+      ImagePreview([this.$assetsUrl + this.img])
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+img {
+  max-width: 100%;
+}
+</style>

src/views/ebiz/product/HomeProduct.vue

@@ -1,79 +1,232 @@
 <template>
-  <div class="home-product-container pb20">
-    <div class="home-product-content">
-      <!-- 产品中心 -->
-      <div class="home-product-pcenter">
+  <div ref="product" class="home-product-container pb20">
+    <!-- 非个险 -->
+    <template v-if="!isGoodStart">
+      <div class="home-product-content">
+        <!-- 产品中心 -->
         <div class="pcenter-title flex pt10 mr20 mb10 ml15 justify-content-s  align-items-c" style="height: 30px;">
           <h3 class="center-title fs15 pl10" style="border-left: 4px solid red;">知识社区</h3>
-          <span class="more fs13 c-gray-base" @click="checkZssqMore">查看更多</span>
+          <span class="more fs13 c-gray-base" @click="checkZssqMore"><span>查看更多</span><van-icon name="arrow"/></span>
         </div>
-        <div class="pcenter-list">
-          <div class="pcenter-title flex mt4 mb10 mr15 ml10 justify-content-s">
-            <div class="zssq zssq_1" @click="checkZssq">
-              <p class="zssq_p1">人到中年</p>
-              <p class="zssq_p2">是时候给自己填份保障了</p>
+        <div class="home-product-pcenter">
+          <div class="pcenter-list">
+            <div class="pcenter-title flex mt4 mb10 mr15 ml10 justify-content-s">
+              <div class="zssq zssq_1" @click="checkZssq">
+                <p class="zssq_p1">人到中年</p>
+                <p class="zssq_p2">是时候给自己填份保障了</p>
+              </div>
+              <div class="zssq zssq_2" @click="checkZssq">
+                <p class="zssq_p1">加班劳累</p>
+                <p class="zssq_p2">是时候给自己填份保障了</p>
+              </div>
             </div>
-            <div class="zssq zssq_2" @click="checkZssq">
-              <p class="zssq_p1">加班劳累</p>
-              <p class="zssq_p2">是时候给自己填份保障了</p>
-            </div>
-          </div>
-          <div class="pcenter-title flex mt4 mr15 mb10 ml10 justify-content-s">
-            <div class="zssq zssq_3" @click="checkZssq">
-              <p class="zssq_p1">年金保障</p>
-              <p class="zssq_p2">是时候给自己填份保障了</p>
-            </div>
-            <div class="zssq zssq_4" @click="checkZssq">
-              <p class="zssq_p1">高危工种</p>
-              <p class="zssq_p2">是时候给自己填份保障了</p>
+            <div class="pcenter-title flex mt4 mr15 mb10 ml10 justify-content-s">
+              <div class="zssq zssq_3" @click="checkZssq">
+                <p class="zssq_p1">年金保障</p>
+                <p class="zssq_p2">是时候给自己填份保障了</p>
+              </div>
+              <div class="zssq zssq_4" @click="checkZssq">
+                <p class="zssq_p1">高危工种</p>
+                <p class="zssq_p2">是时候给自己填份保障了</p>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div style="height: 10px;width: 100%;background-color: #f5f5f5;"></div>
-    <div class="home-product-content">
-      <!-- 产品中心 -->
-      <div class="home-product-pcenter">
-        <div class="pcenter-title flex pt10 mr20 mb10 ml15 justify-content-s align-items-c">
-          <h3 class="center-title fs15 pl10" style="border-left: 4px solid red;">产品中心</h3>
-          <span class="more fs13 c-gray-base" @click="getMore">查看更多</span>
+      <div style="height: 10px;width: 100%;background-color: #f5f5f5;" />
+      <div class="home-product-content">
+        <!-- 产品中心 -->
+        <div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
+          <h3 class="center-title fs15 pl10 ml15" style="border-left: 4px solid red;">产品中心</h3>
+          <span class="more fs13 c-gray-base" @click="getMore"><span>查看更多</span><van-icon name="arrow"/></span>
         </div>
-        <div class="pcenter-list mr20 mb10 ml15">
-          <div class="pcenter-item text-center">
-            <!--<img :src="$assetsUrl + 'images/home_cp_1.png'" class="w365" alt="" @click="goDetail('GFRSPRO_M0002')" />-->
-            <img src="../../../assets/images/home_cp_1.png" style="width: 100%;" alt="" @click="goDetail('GFRSPRO_M0002')" />
-          </div>
-          <div class="pcenter-item text-center">
-            <img src="../../../assets/images/home_cp_2.png" style="width: 100%;" alt="" @click="goDetail('GFRSPRO_M0001')" />
-            <!--<img :src="$assetsUrl + 'images/home_cp_2.png'"  class="w365"  alt="" @click="goDetail('GFRSPRO_M0001')" />-->
+        <div class="home-product-pcenter">
+          <div class="pcenter-list mr20 mb10 ml15">
+            <div class="pcenter-item text-center">
+              <img src="../../../assets/images/home_cp_1.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0002')" />
+            </div>
+            <div class="pcenter-item text-center">
+              <img src="../../../assets/images/home_cp_2.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0001')" />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </template>
+    <!-- 个险 -->
+    <template v-if="isGoodStart">
+      <div class="home-product-content">
+        <!-- 机构排名/业绩排名 -->
+        <div class="pcenter-title flex pt10 pb10 mr15 justify-content-s align-items-c" style="height: 30px;">
+          <img v-if="isInner" class="title-img" :src="$assetsUrl + 'images/goodStart/organizationTitle.png'" />
+          <img v-else class="title-img" :src="$assetsUrl + 'images/goodStart/performanceTitle.png'" />
+        </div>
+        <div class="home-product-pcenter performance">
+          <div class="pcenter-list">
+            <table class="myTable" style="min-width: 160vw;" cellspacing="0" cellpadding="0">
+              <tr>
+                <th v-for="(thead, index) in theads" :class="{ 'sticky-col': index <= 1 }" :key="index">{{ thead }}</th>
+              </tr>
+              <template v-if="isInner">
+                <tr v-for="(org, i) in organizationData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow }">
+                  <td class="sticky-col">{{ i + 1 }}</td>
+                  <td class="org-name sticky-col">{{ org.name | blankFilter }}</td>
+                  <td>{{ org.ysbfDay | blankFilter }}</td>
+                  <td>{{ org.ysbfMon | blankFilter }}</td>
+                  <td>{{ org.cbbfDay | blankFilter }}</td>
+                  <td>{{ org.cbbfMon | blankFilter }}</td>
+                </tr>
+                <tr v-if="organizationData.length === 0">
+                  <td :colspan="theads.length" style="text-align: left; padding-left: 25%;">
+                    <span v-if="isTableDataLoad">暂无数据</span>
+                    <van-loading v-if="!isTableDataLoad" type="spinner" />
+                  </td>
+                </tr>
+              </template>
+              <template v-else>
+                <tr v-for="(org, i) in performanceData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow }">
+                  <td class="sticky-col">{{ org.rank | blankFilter }}</td>
+                  <td class="sticky-col">{{ org.name | blankFilter }}</td>
+                  <td class="org-name">{{ org.comName | blankFilter }}</td>
+                  <td>{{ org.ysbb | blankFilter }}</td>
+                  <td>{{ org.bzbf | blankFilter }}</td>
+                </tr>
+                <tr v-if="performanceData.length === 0">
+                  <td :colspan="theads.length" style="text-align: left; padding-left: 25%;">
+                    <span v-if="isTableDataLoad">暂无数据</span>
+                    <van-loading v-if="!isTableDataLoad" type="spinner" />
+                  </td>
+                </tr>
+              </template>
+            </table>
+          </div>
+        </div>
+        <div class="ml15 mr15 mb10 mt10 more-text" @click="showMore">
+          <van-icon :class="{ arrowUp: idMoreDataShow }" color="#F65748" name="play" />
+          <span>{{ !idMoreDataShow ? '查看更多' : '收起' }}</span>
+        </div>
+      </div>
+      <div style="height: 10px;width: 100%;background-color: #f5f5f5;" />
+      <div class="home-product-content">
+        <!-- 产品中心 -->
+        <div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
+          <img class="title-img" :src="product" />
+          <span class="more fs13 c-gray-base" @click="getMore"><span>查看更多</span><van-icon name="arrow"/></span>
+        </div>
+        <div class="home-product-pcenter">
+          <div class="pcenter-list mr20 mb10 ml15">
+            <div class="pcenter-item text-center">
+              <img src="../../../assets/images/home_cp_1.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0002')" />
+            </div>
+            <div class="pcenter-item text-center">
+              <img src="../../../assets/images/home_cp_2.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0001')" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
+import { Loading } from 'vant'
+import performance from '@/assets/images/goodStart/performanceIcon.png'
+import product from '@/assets/images/goodStart/product.png'
+import { getAgentInfo } from '@/api/ebiz/my/my'
+import { getCongratulationList } from '@/api/ebiz/congratulation/congratulation.js'
+import dateUtil from '@/assets/js/utils/date-utils.js'
+import { orgShortNames } from '@/assets/js/utils/orgShortName'
 export default {
-  mounted() {
-    document.body.style.backgroundColor = '#F5F6F8'
-    // window.onload = () => {
-    //   let contentHeight = document.querySelector('#app>div').offsetHeight
-    //   console.log('页面高度', document.querySelector('#app>div').offsetHeight)
-    //   this.$jump({
-    //     flag: 'content_height',
-    //     extra: {
-    //       height: contentHeight
-    //     }
-    //   })
-    // }
+  components: {
+    [Loading.name]: Loading
   },
-  beforeRouteLeave(to, from, next) {
-    document.body.style.backgroundColor = ''
-    next()
+  data() {
+    return {
+      idMoreDataShow: false,
+      isTableDataLoad: false,
+      performance,
+      product,
+      isGoodStart: true,
+      isInner: false,
+      organizationTheads: ['排名', '机构', '当日预收(标保)', '月预收标保', '日承保标保', '月承保标保'],
+      performanceTheads: ['排名', '姓名', '营销服务部', '预收规保', '承保标保'],
+      organizationData: [],
+      performanceData: []
+    }
+  },
+  computed: {
+    theads() {
+      if (this.isInner) {
+        return this.organizationTheads
+      } else {
+        return this.performanceTheads
+      }
+    }
+  },
+  async created() {
+    await this.getAgentInfo()
+    await this.getTableData()
   },
   methods: {
+    async getTableData() {
+      let currMonth = dateUtil.formatDate(new Date(), 'yyyy-MM-dd')
+      let data = await getCongratulationList({ date: currMonth, queryType: 'm', type: 'kmh' })
+      if (this.isInner) {
+        this.organizationData = data.content
+        for (let org of this.organizationData) {
+          for (let shortName of orgShortNames) {
+            if (org.code === shortName.code) {
+              org.name = shortName.name
+            }
+          }
+        }
+      } else {
+        this.performanceData = data.content.list
+        for (let org of this.performanceData) {
+          for (let shortName of orgShortNames) {
+            if (org.comCode === shortName.code) {
+              org.comName = shortName.name
+            }
+          }
+        }
+      }
+      this.$nextTick(() => {
+        this.isTableDataLoad = true
+        const width = this.$refs.product.offsetWidth
+        const height = this.$refs.product.offsetHeight
+        console.log('after width: ', width)
+        console.log('after height: ', height)
+        window.EWebBridge.webCallAppInJs('updateWebHeight', {
+          width,
+          height,
+          isLoadMore: this.idMoreDataShow
+        })
+      })
+    },
+    async getAgentInfo() {
+      const result = await getAgentInfo({})
+      if (result.result === '0') {
+        // 纯数字为外勤
+        let reg = /^[0-9]+$/
+        this.isInner = !reg.test(result.branchType)
+        this.isGoodStart = result.showTemplate === 'KMH'
+      } else {
+        this.$toast(result.resultMessage)
+      }
+    },
+    showMore() {
+      this.idMoreDataShow = !this.idMoreDataShow
+      this.$nextTick(() => {
+        const width = this.$refs.product.offsetWidth
+        const height = this.$refs.product.offsetHeight
+        console.log('after width: ', width)
+        console.log('after height: ', height)
+        window.EWebBridge.webCallAppInJs('updateWebHeight', {
+          width,
+          height,
+          isLoadMore: this.idMoreDataShow
+        })
+      })
+    },
     //查看更多
     getMore() {
       this.$jump({
@@ -88,10 +241,8 @@ export default {
     },
     //查看详情
     goDetail(code) {
-      console.log(code)
       //将产品 code 存起来
       localStorage.productDetailCode = code
-      console.log(`/product/productDetail${code}`)
       this.$jump({
         flag: 'h5',
         extra: {
@@ -122,17 +273,39 @@ export default {
         this.$jump({
           flag: 'h5',
           extra: {
-            title: '知识社区',
+            // title: '知识社区',
             url: zssqUrl
           }
         })
       }
     }
+  },
+  filters: {
+    blankFilter(val) {
+      if (val) {
+        return val
+      } else {
+        return '-'
+      }
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+th.sticky-col:nth-of-type(1),
+td.sticky-col:nth-of-type(1) {
+  width: 50px;
+  position: sticky;
+  left: 0;
+}
+
+th.sticky-col:nth-of-type(2),
+td.sticky-col:nth-of-type(2) {
+  position: sticky;
+  left: 59px;
+}
+
 .home-product-container {
   background-color: #ffffff;
   .home-product-selected-item {
@@ -179,4 +352,74 @@ export default {
   background-size: 100% 100%;
   color: #4fa1a6;
 }
+.myTable {
+  text-align: center;
+  width: 100%;
+  border-collapse: collapse;
+  td,
+  th {
+    padding: 10px 5px;
+    background-color: #fff3f1;
+    color: #d84535;
+    font-size: 14px;
+  }
+  th {
+    border: none;
+    background: #ff8068;
+    font-weight: normal;
+    color: #ffffff;
+  }
+  tr {
+    border-top: 2px solid #ffffff;
+  }
+  tr:first-child {
+    border-bottom: 6px solid #ffffff;
+  }
+}
+
+.performance {
+  overflow: hidden;
+  overflow-x: auto;
+  margin: 0 15px;
+}
+
+.performance::-webkit-scrollbar {
+  width: 10px;
+  height: 8px;
+}
+
+.performance::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #dadada;
+}
+
+.performance::-webkit-scrollbar-track {
+  box-shadow: 0 0 1px inset #dddddd;
+}
+
+.title-img {
+  height: 40px;
+}
+
+.more-text {
+  color: #666666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .van-icon {
+    transform: rotate(90deg);
+  }
+  .arrowUp {
+    transform: rotate(270deg);
+  }
+}
+
+span,
+i {
+  vertical-align: middle;
+}
+
+.org-name {
+  width: 8em;
+}
 </style>