museums-ui/src/views/Home/Index.vue

<template>
  <div class="bg">
    <el-skeleton :loading="loading" animated>
      <el-row :gutter="20">
        <el-col>
          <div class="introduce">
            <div class="introduce-num" shadow="hover">
              <div class="introduce-img">
                <img src="/@/assets/imgs/zs2.png" alt="" />
              </div>
              <div class="introduce-text">
                <div>标本总数</div>
                <div class="multiple-text-shadow">{{ totalSamples }}</div>
              </div>
            </div>
            <div class="introduce-num">
              <div class="introduce-img">
                <img src="/@/assets/imgs/kw5.png" alt="" />
              </div>
              <div class="introduce-text">
                <div>矿物</div>
                <div>{{ mineralCount }}</div>
              </div>
            </div>
            <div class="introduce-num">
              <div class="introduce-img">
                <img src="/@/assets/imgs/kw4.png" alt="" />
              </div>
              <div class="introduce-text">
                <div>岩石矿石</div>
                <div>{{ rockOreCount }}</div>
              </div>
            </div>
            <div class="introduce-num">
              <div class="introduce-img">
                <img style="width: 90px;height: 90px;" src="/@/assets/imgs/hs4.png" alt="" />
              </div>
              <div class="introduce-text">
                <div>化石</div>
                <div>{{ fossilCount }}</div>
              </div>
            </div>
            <div class="introduce-num">
              <div class="introduce-img">
                <img style="width: 90px;height: 100px;" src="/@/assets/imgs/ys5.png" alt="" />
              </div>
              <div class="introduce-text">
                <div>陨石</div>
                <div>{{ meteoriteCount }}</div>
              </div>
            </div>

          </div>

        </el-col>
      </el-row>
    </el-skeleton>
  
    <!-- 本年标本出入回库情况new -->
    <el-skeleton :loading="loading" animated>
      <el-row>
        <!-- 本年标本出库 -->
        <el-col :xl="5" :lg="5" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mr-5px mt-5px" style="height: 300px;">
            <div class="title"><img style="width: 25px;height: 25px;" src="/@/assets/imgs/ck5.png"
                alt="" /><span>本月出库数</span></div>
            <div class="specimen-month">
              <div class="month">
                <div class="month-bottom">
                  <div>{{ outNumber }}</div>
                  <div>月环比&nbsp;<span>{{ outRatio.toFixed(0) }}%</span></div>
                </div>
              </div>
              <div class="month1">
                <Echart :options="outRatioOptionsData" :height="200" :width="'140%'" />
              </div>
            </div>
          </el-card>

        </el-col>
        <!-- 本年标本入库 -->
        <el-col :xl="5" :lg="5" :md="12" :sm="24" :xs="24">

          <el-card shadow="hover" class="mr-5px mt-5px" style="height: 300px;">
            <div class="title"><img style="width: 30px;height: 30px;" src="/@/assets/imgs/rk3.png"
                alt="" /><span>本月入库数</span></div>
            <div class="specimen-month">
              <div class="month">
                <div class="month-bottom">
                  <div>{{ enterNumber }}</div>
                  <div>月环比&nbsp;<span>{{ enterRatio.toFixed(0) }}%</span></div>
                </div>
              </div>
              <div class="month1">
                <Echart :options="enterRatioOptionsData" :height="200" :width="'140%'" />
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 本年标本回库 -->
        <el-col :xl="5" :lg="5" :md="12" :sm="24" :xs="24">

          <el-card shadow="hover" class="mr-5px mt-5px" style="height: 300px;">
            <div class="title"><img style="width: 25px;height: 25px;" src="/@/assets/imgs/hk2.png"
                alt="" /><span>本月回库数</span></div>
            <div class="specimen-month">
              <div class="month">
                <div class="month-bottom">
                  <div>{{ returnNumber }}</div>
                  <div>月环比&nbsp;<span>{{ returnRatio.toFixed(0) }}%</span></div>
                </div>
              </div>
              <div class="month1">
                <Echart :options="returnRatioOptionsData" :height="200" :width="'140%'" />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="9" :lg="9" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mr-5px mt-5px" style="height: 300px;">

            <div class="title"><img src="/@/assets/imgs/tj3.png" alt="" /><span>本年标本数量统计</span></div>

            <el-skeleton :loading="loading" animated>
              <Echart :options="mouthOptionsData" :height="230" />
            </el-skeleton>
          </el-card>
          <!-- 历年标本来源增减统计 -->

        </el-col>
      </el-row>
    </el-skeleton>
    <!-- 本年标本出入回库情况2 -->
    <el-skeleton :loading="loading" animated>
      <el-row>
        <el-col :xl="9" :lg="9" :md="12" :sm="24" :xs="24">

          <el-card shadow="hover" class="mr-5px mt-5px" style="height: 410px;">
            <div class="title"><img src="/@/assets/imgs/tj3.png" alt="" /><span>历年标本数量统计</span></div>

            <el-skeleton :loading="loading" animated>
              <Echart :options="yearOptionsData" :height="340" />
            </el-skeleton>
          </el-card>
          <!-- 历年标本来源增减统计 -->

        </el-col>
        <el-col :xl="9" :lg="9" :md="12" :sm="24" :xs="24">
          <el-card shadow="hover" class="mr-5px mt-5px" style="height: 410px;">

            <div class="title"><img src="/@/assets/imgs/tj3.png" alt="" /><span>历年标本来源增减统计</span></div>

            <el-skeleton :loading="loading" animated>
              <Echart :options="originOptionsData" :height="340" />
            </el-skeleton>
          </el-card>
          <!-- 历年标本来源增减统计 -->

        </el-col>
        <!-- 本年标本回库 -->
        <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24">

          <el-card shadow="hover" class="mr-5px mt-5px" style="height: 410px;">
            <div class="title"><img src="/@/assets/imgs/tj3.png" alt="" /><span>按标本类型统计</span></div>
            <Echart :options="pieOptionsData" :height="340" />

          </el-card>
        </el-col>

      </el-row>
    </el-skeleton>
  </div>

</template>
<script lang="ts" setup>
import { EChartsOption } from 'echarts'
import type { WorkplaceTotal } from './types'
import { pieOptions,  yearOptions, enterRatioOptions, originOptions, mouthOptions, outRatioOptions, returnRatioOptions } from './echarts-data'
defineOptions({ name: 'Home' })


//获取标本类型数
import * as WorkbenchApi from '@/api/workbench'
// const workbenchList = ref([] as WorkbenchApi.WorkbenchVO[]) //标本列表
const totalSamples = ref(0);
const mineralCount = ref(0);
const fossilCount = ref(0);
const meteoriteCount = ref(0);
const rockOreCount = ref(0);
const enterNumber = ref(0);
const outNumber = ref(0);
const returnNumber = ref(0);
const enterNumber1 = ref(0);
const outNumber1 = ref(0);
const returnNumber1 = ref(0);
const enterRatio = ref(0);
const outRatio = ref(0);
const returnRatio = ref(0);

//初始化
onMounted(async () => {
  const { samples } = await WorkbenchApi.getSpecimenTypeList();
  totalSamples.value = samples['标本总数'];
  mineralCount.value = samples['矿物'];
  fossilCount.value = samples['化石'];
  meteoriteCount.value = samples['陨石'];
  rockOreCount.value = samples['岩石矿石'];
  
  const month = `${new Date().getMonth() + 1}月`
  console.log('month', month);
  const enterSpecimen = ref();
  const outSpecimen = ref();
  const returnSpecimen = ref();
  const year = new Date().getFullYear()
  //本月出、入、回库数
  enterSpecimen.value = await WorkbenchApi.getEnterSpecimenList(year);
  outSpecimen.value = await WorkbenchApi.getOutSpecimenList(year);
  returnSpecimen.value = await WorkbenchApi.getReturnSpecimenList(year);
  const enter = enterSpecimen.value.data
  const out = outSpecimen.value.data
  const return1 = returnSpecimen.value.data
  enterNumber.value = enter[enter.length - 1].number;
  outNumber.value = out[out.length - 1].number;
  returnNumber.value = return1[return1.length - 1].number;
  enterNumber1.value = enter[enter.length - 2].number;
  outNumber1.value = out[out.length - 2].number;
  // TODO 这里
  console.log(return1)
  returnNumber1.value = return1[return1.length - 2].number;
  enterRatio.value = (enterNumber.value - enterNumber1.value) / enterNumber.value * 100;
  outRatio.value = (outNumber.value - outNumber1.value) / outNumber.value * 100;
  returnRatio.value = (returnNumber.value - returnNumber1.value) / returnNumber.value * 100;
})


const loading = ref(true)
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  project: 0,
  access: 0,
  todo: 0
})

const getCount = async () => {
  const data = {
    project: 40,
    access: 2340,
    todo: 10
  }
  totalSate = Object.assign(totalSate, data)
}



const getAllApi = async () => {
  await Promise.all([
    getCount(),
  ])
  loading.value = false
}




//历年标本数量统计
const yearOptionsData = reactive<EChartsOption>(yearOptions) as EChartsOption
//本月入库数
const enterRatioOptionsData = reactive<EChartsOption>(enterRatioOptions) as EChartsOption
//本月出库数
const outRatioOptionsData = reactive<EChartsOption>(outRatioOptions) as EChartsOption
//本月回库数
const returnRatioOptionsData = reactive<EChartsOption>(returnRatioOptions) as EChartsOption
//历年标本来源增减统计
const originOptionsData = reactive<EChartsOption>(originOptions) as EChartsOption
//本年标本数量统计
const mouthOptionsData = reactive<EChartsOption>(mouthOptions) as EChartsOption
//按标本类型统计
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption

getAllApi()



</script>
<style scoped>
.bg {
  background-image: url("/@/asset/imgs/bg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: #f8f3e0; */
}

.el-card {
  --el-card-border-color: #fff !important;
  margin: 0 10px 20px 10px;
  --el-card-border-radius: .625rem;
}

.title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.title img {
  width: 30px;
  height: 30px;
}

.title span {
  margin-left: 10px;
}

.specimen-month {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 5%;
}

.month {
  width: 40%;
  /* padding: 0 10px; */
}

.month1 {
  width: 60%;
  padding: 0 10px;
}


.month-bottom div:nth-child(1) {

  font-size: 40px;
  font-weight: bold;
}

.month-bottom span {
  font-size: 20px;
  font-weight: bold;
  color: #f7cb6b;
  /* color: #e7a13f; */
}

.introduce {
  display: flex;
  margin: 0 10px 20px 10px;
  justify-content: space-between;

}

.introduce-num {
  width: 19%;
  padding: 20px 0;
  display: flex;
  align-items: center;
  /* background-color: antiquewhite; */
  /* background-color: #fdf5e1; */
  background-color: #f9f2ec;

  justify-content: space-around;
  border-radius: .625rem;
  border: 3px solid #fff;
  /* background-image:url("/@/assets/imgs/introduce.jpg"); */
}

.introduce-img img {
  width: 80px;
  height: 80px;
  /* margin-top: 10%; */
}


.introduce-text div:nth-child(1) {
  font-size: 1.4rem;
}

.introduce-text div:nth-child(2) {
  font-size: 2.8rem;
  color: rgba(143, 53, 36, 0.7);
  /* color: #deb887; */
  font-weight: bold;
}

@media (min-width: 100px) {
  .introduce {
    flex-direction: column;
  }

  .introduce-num {
    width: 100%;
    margin-bottom: 20px;
  }

}

@media (min-width: 400px) {
  .introduce {
    flex-direction: column;
  }

  .introduce-num {
    width: 100%;
    margin-bottom: 20px;
  }

}


@media (min-width: 800px) {
  .introduce {
    flex-direction: column;
  }

  .introduce-num {
    width: 100%;
  }

  .introduce-num:nth-child(5) {
    width: 100%;
    margin-bottom: 0px;
  }
}

@media (min-width:1000px) {
  .introduce {
    flex-direction: row;
  }

  .introduce-num {
    width: 19%;
    margin-bottom: 0px;
  }

  .introduce-num:nth-child(5) {
    width: 19%;
    margin-bottom: 0px;
  }
}


@media (min-width:2560px) {
  .introduce {
    flex-direction: row;
  }

  .introduce-num {
    width: 19%;
    margin-bottom: 0px;
  }

  .introduce-num:nth-child(5) {
    width: 19%;
    margin-bottom: 0px;
  }
}

</style>