新建德森项目分支

skyouc

2024-12-21 c635d78b479510ebe2556a420948effcd30a0731

 zy-asrs-admin/src/views/HomeView.vue

@@ -1,268 +1,268 @@
<script setup>
import { getCurrentInstance, ref, onMounted, reactive } from 'vue';
import { get, post } from '@/utils/request.js'
import * as echarts from "echarts";
const context = getCurrentInstance()?.appContext.config.globalProperties;

let chartPie = null;
const chartPieContainer = ref(null);
let chartLine = null;
const chartLineContainer = ref(null);

function getPieOptions() {
  post('/api/charts/loc/use', {}).then(resp => {
    let result = resp.data;
    if (result.code == 200) {
      let data = result.data;

      let pieOptions = {
        title: {
          text: '库位使用比例',
          left: 'center',
          top: '0%'
        },
        tooltip: {
          trigger: 'item',
          top: '0%'
        },
        grid: {
          top: '0%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            type: 'pie',
            radius: '70%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      chartPie.setOption(pieOptions);

    }
  })
}

function getLineOptions() {
  post('/api/charts/loc/line', {}).then(resp => {
    let result = resp.data;
    if (result.code == 200) {
      let data = result.data;

      let lineOptions = {
        title: {
          text: '日出入库数量',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入库数量', '出库数量'],
          top: '10%'
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.days
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '入库数量',
            type: 'line',
            data: data.in.value,
            smooth: true
          },
          {
            name: '出库数量',
            type: 'line',
            data: data.out.value,
            smooth: true
          }
        ]
      }

      chartLine.setOption(lineOptions);

    }
  })
}

function initChart() {
  chartPie = echarts.init(chartPieContainer.value);
  chartPie.setOption({
    type: Object,
    required: true
  })

  chartLine = echarts.init(chartLineContainer.value);
  chartLine.setOption({
    type: Object,
    required: true
  })
}

const information = reactive({
  inCount: 0,
  outCount: 0,
  totalCount: 0,
  matCount: 0,
});
function getInformation() {
  post('/api/charts/information', {}).then(resp => {
    let result = resp.data;
    if (result.code == 200) {
      let data = result.data;
      information.inCount = data.inCount;
      information.outCount = data.outCount;
      information.totalCount = data.totalCount;
      information.matCount = data.matCount;
    }
  })
}

const informationTop = reactive({
  topIn: [],
  topOut: [],
});
function getInformationTop() {
  post('/api/charts/information/top', {}).then(resp => {
    let result = resp.data;
    if (result.code == 200) {
      let data = result.data;
      informationTop.topIn = data.topIn;
      informationTop.topOut = data.topOut;
    }
  })
}

onMounted(() => {
  initChart()
  getPieOptions()
  getLineOptions()
  getInformation()
  getInformationTop()
})

</script>

<script>
export default {
  name: '主页'
}
</script>

<template>
  <div style="display: flex;">
    <div style="width: 24%;margin-right: 20px;">
      <a-card>
        <a-statistic title="今日入出库" :value="information.totalCount" :value-style="{ color: '#3f8600' }"
          style="margin-right: 50px">
          <template #prefix>
            <!-- <arrow-up-outlined /> -->
          </template>
        </a-statistic>
      </a-card>
    </div>
    <div style="width: 24%;margin-right: 20px;">
      <a-card>
        <a-statistic title="今日入库" :value="information.inCount" :value-style="{ color: '#3f8600' }"
          style="margin-right: 50px">
          <template #prefix>
            <!-- <arrow-up-outlined /> -->
          </template>
        </a-statistic>
      </a-card>
    </div>
    <div style="width: 24%;margin-right: 20px;">
      <a-card>
        <a-statistic title="今日出库" :value="information.outCount" :value-style="{ color: '#3f8600' }"
          style="margin-right: 50px">
          <template #prefix>
            <!-- <arrow-up-outlined /> -->
          </template>
        </a-statistic>
      </a-card>
    </div>
    <div style="width: 24%;margin-right: 20px;">
      <a-card>
        <a-statistic title="商品总数" :value="information.matCount" :value-style="{ color: '#3f8600' }"
          style="margin-right: 50px">
          <template #prefix>
            <!-- <arrow-up-outlined /> -->
          </template>
        </a-statistic>
      </a-card>
    </div>
  </div>
  <div style="display: flex;margin-top: 20px;">
    <div style="width: 49%;margin-right: 20px;">
      <a-card title="今日入库Top10">
        <div v-if="informationTop.topIn.length == 0">
          <a-empty />
        </div>
        <div v-else v-for="(item, index) in informationTop.topIn" :key="index"
          style="display: flex;justify-content: space-between;margin-top: 10px;">
          <div>{{ item.matnr }} - {{ item.maktx }}</div>
          <div>
            <a-tag v-if="index == 0" color="#87d068">{{ item.count }}</a-tag>
            <a-tag v-else color="#2db7f5">{{ item.count }}</a-tag>
          </div>
        </div>
      </a-card>
    </div>
    <div style="width: 49%;margin-right: 20px;">
      <a-card title="今日出库Top10">
        <div v-if="informationTop.topOut.length == 0">
          <a-empty />
        </div>
        <div v-else v-for="(item, index) in informationTop.topOut" :key="index"
          style="display: flex;justify-content: space-between;margin-top: 10px;">
          <div>{{ item.matnr }} - {{ item.maktx }}</div>
          <div>
            <a-tag v-if="index == 0" color="#87d068">{{ item.count }}</a-tag>
            <a-tag v-else color="#2db7f5">{{ item.count }}</a-tag>
          </div>
        </div>
      </a-card>
    </div>
  </div>
  <div style="display: flex;margin-top: 20px;">
    <div style="width: 49%;margin-right: 20px;">
      <a-card>
        <div ref="chartPieContainer" style="width: 100%;height: 400px;"></div>
      </a-card>
    </div>
    <div style="width: 49%;">
      <a-card>
        <div ref="chartLineContainer" style="width: 90%;height: 400px;"></div>
      </a-card>
    </div>
    <!-- <EChartView ref="chartChild2" /> -->
  </div>
</template>
<script setup>

import { getCurrentInstance, ref, onMounted, reactive } from 'vue';

import { get, post } from '@/utils/request.js'

import * as echarts from "echarts";

const context = getCurrentInstance()?.appContext.config.globalProperties;



let chartPie = null;

const chartPieContainer = ref(null);

let chartLine = null;

const chartLineContainer = ref(null);



function getPieOptions() {

  post('/api/charts/loc/use', {}).then(resp => {

    let result = resp.data;

    if (result.code == 200) {

      let data = result.data;



      let pieOptions = {

        title: {

          text: '库位使用比例',

          left: 'center',

          top: '0%'

        },

        tooltip: {

          trigger: 'item',

          top: '0%'

        },

        grid: {

          top: '0%',

          left: '3%',

          right: '4%',

          bottom: '3%',

          containLabel: true

        },

        // legend: {

        //   orient: 'vertical',

        //   left: 'left'

        // },

        series: [

          {

            type: 'pie',

            radius: '70%',

            data: data,

            emphasis: {

              itemStyle: {

                shadowBlur: 10,

                shadowOffsetX: 0,

                shadowColor: 'rgba(0, 0, 0, 0.5)'

              }

            }

          }

        ]

      }



      chartPie.setOption(pieOptions);



    }

  })

}



function getLineOptions() {

  post('/api/charts/loc/line', {}).then(resp => {

    let result = resp.data;

    if (result.code == 200) {

      let data = result.data;



      let lineOptions = {

        title: {

          text: '日出入库数量',

          left: 'center',

        },

        tooltip: {

          trigger: 'axis'

        },

        legend: {

          data: ['入库数量', '出库数量'],

          top: '10%'

        },

        grid: {

          top: '20%',

          left: '3%',

          right: '4%',

          bottom: '3%',

          containLabel: true

        },

        xAxis: {

          type: 'category',

          boundaryGap: false,

          data: data.days

        },

        yAxis: {

          type: 'value'

        },

        series: [

          {

            name: '入库数量',

            type: 'line',

            data: data.in.value,

            smooth: true

          },

          {

            name: '出库数量',

            type: 'line',

            data: data.out.value,

            smooth: true

          }

        ]

      }



      chartLine.setOption(lineOptions);



    }

  })

}



function initChart() {

  chartPie = echarts.init(chartPieContainer.value);

  chartPie.setOption({

    type: Object,

    required: true

  })



  chartLine = echarts.init(chartLineContainer.value);

  chartLine.setOption({

    type: Object,

    required: true

  })

}



const information = reactive({

  inCount: 0,

  outCount: 0,

  totalCount: 0,

  matCount: 0,

});

function getInformation() {

  post('/api/charts/information', {}).then(resp => {

    let result = resp.data;

    if (result.code == 200) {

      let data = result.data;

      information.inCount = data.inCount;

      information.outCount = data.outCount;

      information.totalCount = data.totalCount;

      information.matCount = data.matCount;

    }

  })

}



const informationTop = reactive({

  topIn: [],

  topOut: [],

});

function getInformationTop() {

  post('/api/charts/information/top', {}).then(resp => {

    let result = resp.data;

    if (result.code == 200) {

      let data = result.data;

      informationTop.topIn = data.topIn;

      informationTop.topOut = data.topOut;

    }

  })

}



onMounted(() => {

  initChart()

  getPieOptions()

  getLineOptions()

  getInformation()

  getInformationTop()

})



</script>



<script>

export default {

  name: '主页'

}

</script>



<template>

  <div style="display: flex;">

    <div style="width: 24%;margin-right: 20px;">

      <a-card>

        <a-statistic title="今日入出库" :value="information.totalCount" :value-style="{ color: '#3f8600' }"

          style="margin-right: 50px">

          <template #prefix>

            <!-- <arrow-up-outlined /> -->

          </template>

        </a-statistic>

      </a-card>

    </div>

    <div style="width: 24%;margin-right: 20px;">

      <a-card>

        <a-statistic title="今日入库" :value="information.inCount" :value-style="{ color: '#3f8600' }"

          style="margin-right: 50px">

          <template #prefix>

            <!-- <arrow-up-outlined /> -->

          </template>

        </a-statistic>

      </a-card>

    </div>

    <div style="width: 24%;margin-right: 20px;">

      <a-card>

        <a-statistic title="今日出库" :value="information.outCount" :value-style="{ color: '#3f8600' }"

          style="margin-right: 50px">

          <template #prefix>

            <!-- <arrow-up-outlined /> -->

          </template>

        </a-statistic>

      </a-card>

    </div>

    <div style="width: 24%;margin-right: 20px;">

      <a-card>

        <a-statistic title="商品总数" :value="information.matCount" :value-style="{ color: '#3f8600' }"

          style="margin-right: 50px">

          <template #prefix>

            <!-- <arrow-up-outlined /> -->

          </template>

        </a-statistic>

      </a-card>

    </div>

  </div>

  <div style="display: flex;margin-top: 20px;">

    <div style="width: 49%;margin-right: 20px;">

      <a-card title="今日入库Top10">

        <div v-if="informationTop.topIn.length == 0">

          <a-empty />

        </div>

        <div v-else v-for="(item, index) in informationTop.topIn" :key="index"

          style="display: flex;justify-content: space-between;margin-top: 10px;">

          <div>{{ item.matnr }} - {{ item.maktx }}</div>

          <div>

            <a-tag v-if="index == 0" color="#87d068">{{ item.count }}</a-tag>

            <a-tag v-else color="#2db7f5">{{ item.count }}</a-tag>

          </div>

        </div>

      </a-card>

    </div>

    <div style="width: 49%;margin-right: 20px;">

      <a-card title="今日出库Top10">

        <div v-if="informationTop.topOut.length == 0">

          <a-empty />

        </div>

        <div v-else v-for="(item, index) in informationTop.topOut" :key="index"

          style="display: flex;justify-content: space-between;margin-top: 10px;">

          <div>{{ item.matnr }} - {{ item.maktx }}</div>

          <div>

            <a-tag v-if="index == 0" color="#87d068">{{ item.count }}</a-tag>

            <a-tag v-else color="#2db7f5">{{ item.count }}</a-tag>

          </div>

        </div>

      </a-card>

    </div>

  </div>

  <div style="display: flex;margin-top: 20px;">

    <div style="width: 49%;margin-right: 20px;">

      <a-card>

        <div ref="chartPieContainer" style="width: 100%;height: 400px;"></div>

      </a-card>

    </div>

    <div style="width: 49%;">

      <a-card>

        <div ref="chartLineContainer" style="width: 90%;height: 400px;"></div>

      </a-card>

    </div>

    <!-- <EChartView ref="chartChild2" /> -->

  </div>

</template>