ruoyi-miniapp/pages/index.vue

<template>
  <cs-page :selected="0" title="智慧生态" isTab>
    <view class="view-container page">
      <van-dropdown-menu safe-area-tab-bar active-color="#17C653">
        <van-dropdown-item
          :value="queryParams.dept"
          :options="getDropdownOption('dept')"
          @change="
            v => {
              querySelect(v, 'dept')
            }
          "
        />
        <van-dropdown-item
          :value="queryParams.week"
          :options="getDropdownOption('select_week')"
          @change="
            v => {
              querySelect(v, 'week')
            }
          "
        />
      </van-dropdown-menu>
      <scroll-view
        direction="vertical"
        :style="{ maxHeight: `${viewHeigth}px` }"
      >
        <ec-canvas
          id="pieChart"
          canvas-id="pieChart"
          :ec="ec"
          class="charts"
        />
      </scroll-view>
    </view>
  </cs-page>
</template>

<script>
import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js'
export default {
  data() {
    return {
      dictMap: {},
      queryParams: {
        week: '',
        dept: ''
      },
      ec: {
        options: {
          series: [
            {
              type: 'pie',
              data: [5, 6]
            }
          ]
        }
      },
      viewHeigth: 0
    }
  },
  onLoad: async function () {
    await uni.hideTabBar()
    uni.hideTabBar({
      animation: false
    })
    this.getDict()
  },
  onReady() {
    this.getPageHeight()
  },

  methods: {
    getPageHeight() {
      const query = uni.createSelectorQuery().in(this)
      query
        .select('.page')
        .boundingClientRect(data => {
          this.viewHeigth = data.height - 55
        })
        .exec()
    },
    async getDict() {
      const dict = await getDictBatchByType({
        type: ['select_week'].join(',')
      })
      const dept = await getDeptTree()
      this.dictMap = {
        ...dict.data,
        dept: dept.data
      }
    },
    getDropdownOption(key) {
      if (!this.dictMap[key]) return []
      const keyMap = {
        select_week: '周期',
        dept: '部门'
      }
      if (key == 'dept') {
        return [
          ...this.dictMap[key].map(d => {
            return {
              value: d.id,
              text: d.name
            }
          }),
          { value: '', text: keyMap[key] }
        ]
      }
      return [
        ...this.dictMap[key].map(d => {
          return {
            value: d.value,
            text: d.label
          }
        }),
        { value: '', text: keyMap[key] }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 600rpx;
  display: block;
}
::v-deep .van-dropdown-menu {
  height: 40px;
}
</style>