ruoyi-miniapp/pages/index.vue

<template>
  <cs-page :selected="0" title="智慧生态" isTab>
    <view class="view-container">
      <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
        :scroll-y="true"
        :style="{ maxHeight: `${viewHeigth}px` }"
        class="view"
      >
        <view class="box row-1">
          <view class="wd-flex" style="justify-content: space-around">
            <view
              class="wd-flex wd-flex-col wd-flex-center"
              style="gap: 4px"
              v-for="item in 3"
              :key="item"
            >
              <u-count-to
                :start-val="0"
                :end-val="200"
                bold
                font-size="24"
                color="#071437"
              ></u-count-to>
              <view class="">标题</view>
            </view>
          </view>
          <qiun-data-charts
            type="ring"
            :opts="opts"
            :chartData="chartData"
          ></qiun-data-charts>
          <view class="wd-flex" style="gap: 12px; flex-wrap: wrap">
            <view
              class="wd-flex wd-flex-col wd-flex-center"
              v-for="item in 5"
              :key="item"
              style="
                border: 1px solid #f9f9f9;
                width: calc(100% / 3 - 8px);
                padding: 12px;
                gap: 4px;
                border-radius: 4px;
              "
            >
              <view class="wd-flex wd-flex-col" style="gap: 4px">
                <view
                  class="wd-flex"
                  style="align-items: center; gap: 4px"
                >
                  <view
                    :style="{
                      width: '8px',
                      height: '4px',
                      borderRadius: '4px',
                      backgroundColor: 'red'
                    }"
                  ></view>
                  <view class="">部门名称</view>
                </view>
                <view class="wd-flex wd-flex-center">
                  <u-count-to
                    :start-val="0"
                    :end-val="200"
                    bold
                    font-size="16"
                    color="#071437"
                  ></u-count-to>
                  %
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="box row-1">
          <view
            class="wd-flex"
            style="margin-top: 12px; justify-content: center"
          >
            <view
              style="
                background-color: #f9f9f9;
                display: inline-flex;
                padding: 4px;
              "
            >
              <view
                class="tab"
                v-for="(item, index) in tabs"
                :key="index"
                :style="{ '--index': queryParams.enterprise }"
                @tap="queryParams.enterprise = index"
              >
                <view
                  class="name"
                  :style="{
                    color:
                      queryParams.enterprise == index
                        ? '#071437'
                        : '#78829d'
                  }"
                >
                  {{ item.name }}
                </view>
              </view>
            </view>
          </view>
          <view class="">
            <view
              v-for="item in 10"
              :key="item"
              class="wd-flex"
              style="justify-content: space-between; padding: 12px"
            >
              <view class="wd-font-800">企业名称</view>
              <view class="wd-font-800" style="color: #ff6f1e">
                <view>
                  <u-count-to
                    :start-val="0"
                    :end-val="200"
                    bold
                    font-size="14"
                    color="#FF6F1E"
                  ></u-count-to>
                  <text>天</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </cs-page>
</template>

<script>
import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js'
export default {
  data() {
    return {
      dictMap: {},
      queryParams: {
        week: '',
        dept: '',
        enterprise: 0
      },
      opts: {},
      chartData: {},
      viewHeigth: 0,
      tabs: [
        {
          name: '资质逾期'
        },
        {
          name: '整改次数'
        }
      ]
    }
  },
  onLoad: async function () {
    await uni.hideTabBar()
    uni.hideTabBar({
      animation: false
    })
    this.getDict()
  },
  onReady() {
    this.$nextTick(() => {
      this.getPageHeight()
    })
    this.init()
  },
  methods: {
    getPageHeight() {
      const query = uni.createSelectorQuery().in(this)
      query
        .select('.view-container')
        .boundingClientRect(data => {
          console.log(data)
          this.viewHeigth = data.height - 40 - 25
        })
        .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] }
      ]
    },
    init() {
      this.opts = {
        legend: {
          show: false
        },
        color: ['#1B84FF', '#7239EA', '#F6B100', '#F8285A', '#17C653'],
        rotate: false,
        rotateLock: false,
        padding: [5, 5, 5, 5],
        dataLabel: false,
        enableScroll: false,
        title: {
          name: '70%',
          fontSize: 24,
          color: '#071437',
          fontWeight: 'bold'
        },
        subtitle: {
          name: '完成率',
          fontSize: 14,
          color: '#78829D'
        },
        extra: {
          ring: {
            ringWidth: 20,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 90,
            labelWidth: 15,
            border: false,
            customRadius: 80,
            borderColor: '#FFFFFF',
            linearType: 'none'
          }
        }
      }
      this.chartData = {
        series: [
          {
            data: [
              { name: '一班', value: 50 },
              { name: '二班', value: 30 },
              { name: '三班', value: 20 },
              { name: '四班', value: 18 },
              { name: '五班', value: 8 },
              { name: '', value: 2, color: '#fff' }
            ]
          }
        ]
      }
    },
    sectionChange(index) {
      this.queryParams.enterprise = index
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  height: 100%;
}
.view {
  padding: 0 12px;
  padding-bottom: 12px;
  display: flex;
  gap: 12px;
  flex-flow: column nowrap;
  .box {
    padding: 12px;
    background-color: #fff;
    border: 1px solid #f9f9f9;
    border-radius: 12px;
    margin-top: 12px;
    &:last-child {
      margin-bottom: 12px;
    }
  }
  .row-1 {
    display: flex;
    flex-flow: column nowrap;
    gap: 12px;
  }
  .tab {
    position: relative;
    padding: 4px 16px;
    .name {
      z-index: 2;
      position: inherit;
      font-weight: bold;
    }
    &:first-child::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: #fff;
      border-radius: 2px;
      transform: translateX(calc(var(--index) * 100%));
      transition: 0.2s all;
      z-index: 1;
    }
  }
}
::v-deep .van-dropdown-menu {
  height: 40px !important;
}
</style>