mosr-web/src/views/home/index.vue

<template>
  <div class="home-container">
    <div class="home-top">
      <el-image :src="homeImage" style="width: 380px"/>
      <div class="top-right">
        <div>Admin，欢迎回来！</div>

      </div>
    </div>
    <div class="home-top-right">
      <el-image :src="coffee" style="height: 100px"/>
      <span>科研管理平台</span>
    </div>
  </div>
<!--  <el-row :gutter="10" type="flex">-->
<!--    <el-col  :span="6" :xs="8" :sm="16" :md="18" :lg="20" :xl="24" >-->
<!--      <div v-for="(item,index) in list" :key="index" class="block">-->
<!--        <div>{{item.title}}</div>-->
<!--        <div>-->
<!--          <el-icon><User/></el-icon>-->
<!--          <span>{{item.num}}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-col>-->
<!--  </el-row>-->
  <el-row :gutter="10">
    <el-col :span="6" v-for="item in 4">1</el-col>
<!--    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"-->
<!--    >2<div class="grid-content ep-bg-purple-light"-->
<!--    /></el-col>-->
<!--    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"-->
<!--    >3<div class="grid-content ep-bg-purple"-->
<!--    /></el-col>-->
<!--    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"-->
<!--    >4<div class="grid-content ep-bg-purple-light"-->
<!--    /></el-col>-->
  </el-row>
  <div class="container">
    <div id="bar1" ref="bar1"></div>
    <div id="bar2" ref="bar2"></div>
    <div id="bar3" ref="bar3"></div>
  </div>
  <div class="container">
    <div id="pie1" ref="pie1"></div>
    <div id="pie2" ref="pie2"></div>
    <div id="pie3" ref="pie3"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import homeImage from "@/assets/home/home.png"
import coffee from "@/assets/home/coffee.png"
import { useRouter } from 'vue-router';

const router = useRouter()
const list=ref([
  {
    title: '在线用户量',
    num:2142
  },
  {
    title: '在线用户量',
    num:2142
  },
  {
    title: '在线用户量',
    num:2142
  },
  {
    title: '在线用户量',
    num:2142
  }
])
const barOption = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
};

const pieOption = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 1048, name: 'Search Engine'},
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 484, name: 'Union Ads'},
        {value: 300, name: 'Video Ads'}
      ]
    }
  ]
};

const data = reactive({
  barCharts: null,
  pieCharts: null,
  bar1: null,
  bar2: null,
  bar3: null,
  pie1: null,
  pie2: null,
  pie3: null,
})

const init = () => {
  data.barCharts = echarts.init(document.getElementById('bar1')).setOption(barOption)
  data.barCharts = echarts.init(document.getElementById('bar2')).setOption(barOption)
  data.barCharts = echarts.init(document.getElementById('bar3')).setOption(barOption)
  data.pieCharts = echarts.init(document.getElementById('pie1')).setOption(pieOption)
  data.pieCharts = echarts.init(document.getElementById('pie2')).setOption(pieOption)
  data.pieCharts = echarts.init(document.getElementById('pie3')).setOption(pieOption)
}

const redirectView = () => {
  const toView = sessionStorage.getItem('toView')
  console.log(toView, 'toView');
  toView ?
  router.push({
    path: JSON.parse(toView).path,
    query: {
      ...JSON.parse(toView).query
    }
  }) :
  null
}

onMounted(() => {
  init()
  redirectView()
})

window.addEventListener('resize', () => {
  data.bar1 = null
  data.bar2 = null
  data.bar3 = null
  data.pie1 = null
  data.pie2 = null
  data.pie3 = null
  data.barCharts = null
  data.pieCharts = null
  init()
})


</script>

<style lang="scss" scoped>
.home-container {
  display: flex;
  align-items: center;

  .home-top {
    width: 1000px;
    height: 150px;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #e1eaf9;

    .top-right {
      font-size: 16px;
      margin-left: 10px;
      letter-spacing: 1.5px;

      > div:first-child {
        color: #557ad2;
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 10px;
      }
    }
  }

  .home-top-right {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}
.statistics{
  //display: flex;
  .block{

  }
}
.container {
  height: calc((100vh / 2) - 150px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  > div {
    height: 300px;
    flex: 0.9;
  }
}
</style>