sstt-archives-web/src/views/dashboard/index.vue

<template>
  <div style="padding:20px 0">

    <el-row :gutter="20" class='elrows'>
      <el-col :span="24">
        <PanelGroup :totaldata="list"></PanelGroup>
      </el-col>

      <el-col :span="12" class="chartSize">
        <div style="padding:10px;color:#b3241d;font-size:18px">月度上传档案统计</div>
        <myecharts :width="'100%'" :height="'300px'" :data="overall_month_data"></myecharts>
      </el-col>
      <el-col :span="12" class="chartSize">
        <div style="padding:10px;color:#b3241d;font-size:18px">组织档案统计</div>
        <myecharts :width="'100%'" :height="'300px'" :data="overall_originze_data"></myecharts>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import myecharts from '@/components/myecharts';
  import PanelGroup from './components/PanelGroup';
  import {
    home
  } from "@/api/home"
  import {
    index
  } from "@/api/system/baseForm.js"
  export default {
    components: {
      myecharts,
      PanelGroup
    },
    data() {
      return {
        list: {
          recordsTotal: 0,
          organizesTotal: 0,
          areasTotal: 0,
          dateTotal:0
        },
        nowDate:'',
        overall_month_data: {},
        overall_originze_data: {}
      }
    },
    watch: {

    },
    created() {
      this.listHome()
      this.init()
      this.getList()
    },
    mounted() {

    },
    methods: {
      async getList() {
        this.nowDate = this.$moment().format("YYYY-MM-DD")
        this.startDate = this.$moment('1900-01-01').format("YYYY-MM-DD")
        console.log("this.nowDate",this.nowDate,this.startDate)
        const res = await index({
          page_size: 9999,
          page: 1,
          table_name: 'records',
          is_auth: 1,
          catalogs_id: '',
          filter:[{
            key:'end_date',
            op:'range',
            value:[this.startDate,this.nowDate]
          },{
            key:'status',
            op:'eq',
            value:0
          }]
        })
        this.list.dateTotal = res.total
      },
      async listHome() {
        const res = await home()
        this.list.recordsTotal = res?.recordsTotal
        this.list.organizesTotal = res?.organizesTotal
        this.list.areasTotal = res?.areasTotal
        let xMonth = []
        let dMonth = []
        res.list.map(item => {
          xMonth.push(item.month)
          dMonth.push(item.count)
        })
        this.overall_month_data.x = xMonth
        this.overall_month_data.list[0].data = dMonth
        let oData = []
        res.organizesList.map(o => {
          oData.push({
            value: o.total,
            name: o.name
          })
        })
        this.overall_originze_data.list[0].data = oData
      },
      init() {
        this.overall_month_data = {
          xShow: true,
          yShow: true,
          rotate: 20,
          // formatter:function(params){
          //   return that.chartFomatter(params)
          // },
          xAxis: {
            axisLabel: {
              show: true,
              rotate: 35, //35度角倾斜显示
            },
          },

          x: [],
          list: [{
            name: "上传数",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            type: 'bar',
            barGap: '0%',
          }]
        }
        this.overall_originze_data = {
          trigger: 'item',
          xShow: false,
          yShow: false,
          list: [{
            name: '档案数',
            type: 'pie',
            radius: '80%',
            // center:['20%','20%'],
            data: [],
            label: {
              show: false,
              position: 'center'
            },
          }]
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .elrows {
    // margin: 0 !important;

    .el-col {
      padding: 10px !important
    }

    .chartSize {
      width: calc(50% - 20px) !important;
      margin: 10px !important;
      background: #fff;
    }
  }
</style>