Game-Backstage-Management-System/src/components/dataAnalysis/StatisticText.vue

<!--
 * @Author: fxs bjnsfxs@163.com
 * @Date: 2024-08-26 13:57:37
 * @LastEditors: fxs bjnsfxs@163.com
 * @LastEditTime: 2024-10-10 09:04:54
 * @FilePath: \Game-Backstage-Management-System\src\components\dataAnalysis\StatisticText.vue
 * @Description: 用于展示统计数据，如总览页面上方的总览数据
 * 
-->

<script setup lang="ts">
import type { StaticDataInfo, StaticField } from '@/types/dataAnalysis'
import { decimalToPercentage } from '@/utils/common'
import { onMounted, reactive, ref, watch } from 'vue'
import axiosInstance from '@/utils/axios/axiosInstance'
const props = defineProps<StaticDataInfo>()
const dataList = reactive<Array<StaticField>>([])
const dataState = ref(false) // 数据是否加载成功
/**
 * @description: 用于获取数据
 * @tip  这里暂时只请求当日的数据，没有比较
 * @return {*}
 */
const getData = () => {
  try {
    if (props.requestConfig) {
      axiosInstance
        .post(props.requestConfig.url, props.requestConfig.otherOptions)
        .then((info) => {
          dataList.splice(0, dataList.length) // 清空一下
          let data = info.data
          props.fieldsInfo.map((item) => {
            dataList.push({
              name: item.name,
              cnName: item.cnName,
              value: data[item.name]
            })
          })

          dataState.value = true
        })
        .catch(() => {
          dataState.value = false
        })
    } else {
      let hasNull = props.fieldsInfo.every((item) => item.value !== '')

      if (hasNull) {
        dataList.splice(0, dataList.length) // 清空一下
        props.fieldsInfo.map((item) => {
          dataList.push({
            name: item.name,
            cnName: item.cnName,
            value: item.value
          })
        })
        dataState.value = true
      } else {
        dataState.value = false
      }
    }
  } catch (err) {
    console.log(err)
    throw new Error('数据获取失败')
  }
}

/**
 * @description: 监听requesconfig的变化，一旦变化就重新请求
 * @return {*}
 */
watch(
  () => [
    props.requestConfig?.otherOptions.gid,
    props.requestConfig?.otherOptions.pf,
    props.fieldsInfo
  ],
  () => {
    getData()
  }
)

onMounted(() => {
  getData()
})

defineExpose({})
</script>

<template>
  <div class="dataBox">
    <div class="dataBody" v-if="dataState">
      <div class="dataItem" v-for="item in dataList">
        <div class="header">
          <span :class="titleClass ? titleClass : 'dataTitle'">{{ item.cnName }}</span>
        </div>
        <div class="body">
          <span :class="valueClass ? valueClass : 'value'">{{ item.value }}</span>
          <span class="compare" v-if="item.compareVal">
            <span>
              {{ decimalToPercentage((item.value - item.compareVal) / item.compareVal) }}
              <el-icon v-if="(item.value - item.compareVal) / item.compareVal >= 0" color="#5fbb5d">
                <CaretTop />
              </el-icon>
              <el-icon v-else color="#ed4014">
                <CaretBottom />
              </el-icon>
            </span>
          </span>
        </div>
      </div>
    </div>
    <div v-else>
      <span>加载失败</span>
    </div>
  </div>
</template>

<style scoped>
.dataBox {
  width: 100%;

  padding: 20px 24px;
  box-sizing: border-box;
}

.dataBody {
  display: flex;
  width: 100%;

  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.02),
    0 1px 3px 0 rgba(0, 0, 0, 0.02);
}

.dataItem {
  margin-right: 32px;
}

.dataTitle {
  min-width: 48px;
  font-size: 12px;
  color: #657180;
  line-height: 16px;
}

.value {
  font-size: 28px;
  padding-right: 12px;
  line-height: 48px;
}

.chartStaticValue {
  font-size: 24px;
  color: #1c2438;
  font-weight: 500;
}

.compare {
  font-size: 12px;
  box-sizing: border-box;
  margin-left: 8px;
}
</style>