projects/mes-test #133
							
								
								
									
										3
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										3
									
								
								.env.dev
									
									
									
									
									
								
							@@ -14,10 +14,11 @@ VUE_APP_TITLE = MES系统
 | 
			
		||||
# 芋道管理系统/开发环境
 | 
			
		||||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 | 
			
		||||
VUE_APP_BASE_API = 'http://192.168.4.173:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48080'
 | 
			
		||||
VUE_APP_BASE_API = 'http://192.168.1.56:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.56:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.2.159:48080'
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -35,34 +35,39 @@
 | 
			
		||||
      <el-tabs v-model="activeName" @tab-click="toggleTab">
 | 
			
		||||
        <el-tab-pane label="数据列表" name="dataList">
 | 
			
		||||
          <!-- 列表 -->
 | 
			
		||||
          <base-table
 | 
			
		||||
            :page="queryParams.pageNo"
 | 
			
		||||
            :limit="queryParams.pageSize"
 | 
			
		||||
            :table-props="tableProps"
 | 
			
		||||
            :table-data="tableData"
 | 
			
		||||
            :max-height="tableH"
 | 
			
		||||
          >
 | 
			
		||||
            <method-btn
 | 
			
		||||
              v-if="tableBtn.length"
 | 
			
		||||
              slot="handleBtn"
 | 
			
		||||
              :width="150"
 | 
			
		||||
              label="操作"
 | 
			
		||||
              :method-list="tableBtn"
 | 
			
		||||
              @clickBtn="viewDetDetail"
 | 
			
		||||
          <div v-if="activeName === 'dataList'">
 | 
			
		||||
            <base-table
 | 
			
		||||
              :page="queryParams.pageNo"
 | 
			
		||||
              :limit="queryParams.pageSize"
 | 
			
		||||
              :table-props="tableProps"
 | 
			
		||||
              :table-data="tableData"
 | 
			
		||||
              :max-height="tableH"
 | 
			
		||||
            >
 | 
			
		||||
              <method-btn
 | 
			
		||||
                v-if="tableBtn.length"
 | 
			
		||||
                slot="handleBtn"
 | 
			
		||||
                :width="150"
 | 
			
		||||
                label="操作"
 | 
			
		||||
                :method-list="tableBtn"
 | 
			
		||||
                @clickBtn="viewDetDetail"
 | 
			
		||||
              />
 | 
			
		||||
            </base-table>
 | 
			
		||||
            <pagination
 | 
			
		||||
              :page.sync="queryParams.pageNo"
 | 
			
		||||
              :limit.sync="queryParams.pageSize"
 | 
			
		||||
              :total="total"
 | 
			
		||||
              @pagination="getList"
 | 
			
		||||
            />
 | 
			
		||||
          </base-table>
 | 
			
		||||
          <pagination
 | 
			
		||||
            :page.sync="queryParams.pageNo"
 | 
			
		||||
            :limit.sync="queryParams.pageSize"
 | 
			
		||||
            :total="total"
 | 
			
		||||
            @pagination="getList"
 | 
			
		||||
          />
 | 
			
		||||
          </div>
 | 
			
		||||
        </el-tab-pane>
 | 
			
		||||
        <el-tab-pane label="环形图" name="barChart">
 | 
			
		||||
          <div 
 | 
			
		||||
            id="logDetPieBar"
 | 
			
		||||
            style="width: 182px; height: 180px;"
 | 
			
		||||
          ></div>
 | 
			
		||||
          <div v-if="activeName === 'barChart'">
 | 
			
		||||
            <div 
 | 
			
		||||
              id="logDetPieBar"
 | 
			
		||||
              style="width: 100%"
 | 
			
		||||
              :style="{ height: chartHeight + 'px' }"
 | 
			
		||||
            ></div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </el-tab-pane>
 | 
			
		||||
      </el-tabs>
 | 
			
		||||
    </div>
 | 
			
		||||
@@ -110,6 +115,8 @@
 | 
			
		||||
<script>
 | 
			
		||||
import { deliveryLogPage, deliveryLogDetPage } from '@/api/base/delivery'
 | 
			
		||||
import { parseTime } from '@/utils/ruoyi'
 | 
			
		||||
import * as echarts from 'echarts'
 | 
			
		||||
import resize from '@/utils/chartMixins/resize'
 | 
			
		||||
const tableProps = [
 | 
			
		||||
  {
 | 
			
		||||
    prop: 'deliveryTime',
 | 
			
		||||
@@ -182,6 +189,7 @@ const tableProps2 = [
 | 
			
		||||
]
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'DeliveryLogDetDetail',
 | 
			
		||||
  mixins: [resize],
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      centervisible: false,
 | 
			
		||||
@@ -195,6 +203,7 @@ export default {
 | 
			
		||||
      orderMsg: {},
 | 
			
		||||
      tableProps,
 | 
			
		||||
      tableData: [],
 | 
			
		||||
      total: 0,
 | 
			
		||||
      tableH: this.tableHeight(350),
 | 
			
		||||
      tableBtn: [
 | 
			
		||||
        this.$auth.hasPermi('base:group-team:update')
 | 
			
		||||
@@ -215,9 +224,18 @@ export default {
 | 
			
		||||
      tableData2: [],
 | 
			
		||||
      tableH2: this.tableHeight(275),
 | 
			
		||||
      total2: 0,
 | 
			
		||||
      logCode: ''
 | 
			
		||||
      logCode: '',
 | 
			
		||||
      // 图
 | 
			
		||||
      chartDom: '',
 | 
			
		||||
      chart: '',
 | 
			
		||||
      chartHeight: this.tableHeight(300)
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  // watch: {
 | 
			
		||||
  //   chartData: function () {
 | 
			
		||||
  //     this.getChart()
 | 
			
		||||
  //   }
 | 
			
		||||
  // },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH = this.tableHeight(350)
 | 
			
		||||
@@ -225,6 +243,9 @@ export default {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH2 = this.tableHeight(275)
 | 
			
		||||
    })
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.chartHeight = this.tableHeight(300)
 | 
			
		||||
    })
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    init(params) {
 | 
			
		||||
@@ -236,13 +257,87 @@ export default {
 | 
			
		||||
    getList() {
 | 
			
		||||
      deliveryLogPage({...this.queryParams}).then(res => {
 | 
			
		||||
        this.tableData = res.data.list || []
 | 
			
		||||
        this.taotal = res.data.total || 0
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    toggleTab() {
 | 
			
		||||
 | 
			
		||||
      if (this.activeName  === 'barChart') {
 | 
			
		||||
        this.$nextTick(() => {
 | 
			
		||||
          this.getBar()
 | 
			
		||||
        })
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    getBar() {
 | 
			
		||||
      
 | 
			
		||||
      if (
 | 
			
		||||
        this.chart !== null &&
 | 
			
		||||
        this.chart !== '' &&
 | 
			
		||||
        this.chart !== undefined
 | 
			
		||||
      ) {
 | 
			
		||||
        this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例
 | 
			
		||||
      }
 | 
			
		||||
      this.chartDom = document.getElementById('logDetPieBar')
 | 
			
		||||
      this.chart = echarts.init(this.chartDom)
 | 
			
		||||
      let seriesData = []
 | 
			
		||||
      let sumData = 0
 | 
			
		||||
      this.tableData && this.tableData.map(item =>{
 | 
			
		||||
        let obj = {}
 | 
			
		||||
        obj.value = item.rate
 | 
			
		||||
        obj.name = item.name
 | 
			
		||||
        seriesData.push(obj)
 | 
			
		||||
        sumData+=item.rate
 | 
			
		||||
      })
 | 
			
		||||
      if (sumData < 100) {
 | 
			
		||||
        let obj = {}
 | 
			
		||||
        obj.value = 100 - sumData
 | 
			
		||||
        obj.name = "未发货"
 | 
			
		||||
        seriesData.push(obj)
 | 
			
		||||
      }
 | 
			
		||||
      var option = {
 | 
			
		||||
        color: ['#B0EB42', '#FF9747', '#FF6860', '#7164FF', '#288AFF', '#63BDFF', '#73DE93', '#FFCE6A'],
 | 
			
		||||
        tooltip: {
 | 
			
		||||
          trigger: 'item',
 | 
			
		||||
          formatter: function(params) {
 | 
			
		||||
            let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${params.color};"></span>`
 | 
			
		||||
            return `<span>
 | 
			
		||||
                <span style="color:rgba(0,0,0,0.85);">${str}${params.name}</span>
 | 
			
		||||
                <span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${params.percent}</span>
 | 
			
		||||
              </span>`
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        legend: {
 | 
			
		||||
          bottom: '5%',
 | 
			
		||||
          left: 'center',
 | 
			
		||||
          icon: 'rect',
 | 
			
		||||
          itemHeight: 8,
 | 
			
		||||
          itemWidth: 8
 | 
			
		||||
        },
 | 
			
		||||
        series: [
 | 
			
		||||
          {
 | 
			
		||||
            type: 'pie',
 | 
			
		||||
            radius: ['60%', '80%'],
 | 
			
		||||
            avoidLabelOverlap: false,
 | 
			
		||||
            label: {
 | 
			
		||||
              show: false,
 | 
			
		||||
              position: 'center'
 | 
			
		||||
            },
 | 
			
		||||
            emphasis: {
 | 
			
		||||
              label: {
 | 
			
		||||
                show: true,
 | 
			
		||||
                fontSize: 40,
 | 
			
		||||
                fontWeight: 'bold'
 | 
			
		||||
              },
 | 
			
		||||
              scale: true ,
 | 
			
		||||
              scaleSize: 20 ,
 | 
			
		||||
            },
 | 
			
		||||
            labelLine: {
 | 
			
		||||
              show: false
 | 
			
		||||
            },
 | 
			
		||||
            data: seriesData
 | 
			
		||||
          }
 | 
			
		||||
        ]
 | 
			
		||||
      };
 | 
			
		||||
 | 
			
		||||
      option && this.chart.setOption(option);
 | 
			
		||||
    },
 | 
			
		||||
    viewDetDetail(val) {
 | 
			
		||||
      this.logCode = val.data.code
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,6 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div>
 | 
			
		||||
    <el-drawer title="参数绑定" :visible.sync="visible" size="70%" @close='closeD'>
 | 
			
		||||
    <el-drawer :title="drawerTitle" :visible.sync="visible" size="70%" @close='closeD'>
 | 
			
		||||
      <div class="box">
 | 
			
		||||
        <el-form :inline="true">
 | 
			
		||||
          <el-form-item label="关联表名">
 | 
			
		||||
@@ -94,6 +94,7 @@ export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      visible: false,
 | 
			
		||||
      drawerTitle: '',
 | 
			
		||||
      tableProps,
 | 
			
		||||
      tableData: [],
 | 
			
		||||
      tableBtn: [],
 | 
			
		||||
@@ -131,9 +132,11 @@ export default {
 | 
			
		||||
      this.objName = data.objName
 | 
			
		||||
      this.getList()
 | 
			
		||||
      if (title === 'detail') {
 | 
			
		||||
        this.drawerTitle = '查看参数'
 | 
			
		||||
        this.showBtn = false
 | 
			
		||||
        this.tableBtn = []
 | 
			
		||||
      } else {
 | 
			
		||||
        this.drawerTitle = '参数绑定'
 | 
			
		||||
        this.showBtn = true
 | 
			
		||||
        this.tableBtn = [
 | 
			
		||||
          {
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,6 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div>
 | 
			
		||||
    <el-drawer title="参数绑定" :visible.sync="visible" size="70%" @close='closeD'>
 | 
			
		||||
    <el-drawer :title="drawerTitle" :visible.sync="visible" size="70%" @close='closeD'>
 | 
			
		||||
      <div class="box">
 | 
			
		||||
        <el-form :inline="true">
 | 
			
		||||
          <el-form-item label="方案名称">
 | 
			
		||||
@@ -85,6 +85,7 @@ export default {
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      visible: false,
 | 
			
		||||
      drawerTitle: '',
 | 
			
		||||
      tableProps,
 | 
			
		||||
      tableData: [],
 | 
			
		||||
      tableBtn: [],
 | 
			
		||||
@@ -125,9 +126,11 @@ export default {
 | 
			
		||||
      this.energyTypeId = data.energyTypeId
 | 
			
		||||
      this.getList()
 | 
			
		||||
      if (title === 'detail') {
 | 
			
		||||
        this.drawerTitle = '查看参数'
 | 
			
		||||
        this.showBtn = false
 | 
			
		||||
        this.tableBtn = []
 | 
			
		||||
      } else {
 | 
			
		||||
        this.drawerTitle = '参数绑定'
 | 
			
		||||
        this.showBtn = true
 | 
			
		||||
        this.tableBtn = [
 | 
			
		||||
          {
 | 
			
		||||
 
 | 
			
		||||
@@ -60,31 +60,31 @@ export default {
 | 
			
		||||
			this.chart = echarts.init(this.$el, 'macarons');
 | 
			
		||||
 | 
			
		||||
			this.chart.setOption({
 | 
			
		||||
				title: {
 | 
			
		||||
					text: this.title
 | 
			
		||||
						? '{space|}{tip|}{space|}{value|' + this.title + '}'
 | 
			
		||||
						: '',
 | 
			
		||||
					left: '0%',
 | 
			
		||||
					top: '0%',
 | 
			
		||||
					textStyle: {
 | 
			
		||||
						rich: {
 | 
			
		||||
							tip: {
 | 
			
		||||
								width: 4,
 | 
			
		||||
								height: 18,
 | 
			
		||||
								backgroundColor: '#0B58FF',
 | 
			
		||||
								marginRight: 6,
 | 
			
		||||
							},
 | 
			
		||||
							space: {
 | 
			
		||||
								width: 8,
 | 
			
		||||
							},
 | 
			
		||||
							value: {
 | 
			
		||||
								fontSize: 16,
 | 
			
		||||
								fontWeight: 'bold',
 | 
			
		||||
								color: 'black',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
				// title: {
 | 
			
		||||
				// 	text: this.title
 | 
			
		||||
				// 		? '{space|}{tip|}{space|}{value|' + this.title + '}'
 | 
			
		||||
				// 		: '',
 | 
			
		||||
				// 	left: '0%',
 | 
			
		||||
				// 	top: '0%',
 | 
			
		||||
				// 	textStyle: {
 | 
			
		||||
				// 		rich: {
 | 
			
		||||
				// 			tip: {
 | 
			
		||||
				// 				width: 4,
 | 
			
		||||
				// 				height: 18,
 | 
			
		||||
				// 				backgroundColor: '#0B58FF',
 | 
			
		||||
				// 				marginRight: 6,
 | 
			
		||||
				// 			},
 | 
			
		||||
				// 			space: {
 | 
			
		||||
				// 				width: 8,
 | 
			
		||||
				// 			},
 | 
			
		||||
				// 			value: {
 | 
			
		||||
				// 				fontSize: 16,
 | 
			
		||||
				// 				fontWeight: 'bold',
 | 
			
		||||
				// 				color: 'black',
 | 
			
		||||
				// 			},
 | 
			
		||||
				// 		},
 | 
			
		||||
				// 	},
 | 
			
		||||
				// },
 | 
			
		||||
				color: ['#288AFF', '#8EF0AB', '#FFDC94'],
 | 
			
		||||
				tooltip: {
 | 
			
		||||
					trigger: 'axis',
 | 
			
		||||
@@ -148,6 +148,7 @@ export default {
 | 
			
		||||
				yAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						gridIndex: 0,
 | 
			
		||||
						name: '库存数量',
 | 
			
		||||
						axisTick: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
@@ -160,6 +161,7 @@ export default {
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						gridIndex: 1,
 | 
			
		||||
						name: '剩余使用天数',
 | 
			
		||||
						axisTick: {
 | 
			
		||||
							show: false,
 | 
			
		||||
						},
 | 
			
		||||
 
 | 
			
		||||
@@ -59,7 +59,7 @@ export default {
 | 
			
		||||
					zlevel: 2, // 控制圆环图中间的字的层级
 | 
			
		||||
					text: '总数',
 | 
			
		||||
					subtext: totalNumber,
 | 
			
		||||
					top: '42%', // 控制位置
 | 
			
		||||
					top: '35%', // 控制位置
 | 
			
		||||
					left: '50%', // 控制位置
 | 
			
		||||
					textAlign: 'center', // 让文字居中
 | 
			
		||||
					textStyle: {
 | 
			
		||||
@@ -72,7 +72,7 @@ export default {
 | 
			
		||||
				tooltip: {
 | 
			
		||||
					trigger: 'item',
 | 
			
		||||
					show: true, // 控制鼠标悬浮是否显示数据
 | 
			
		||||
					formatter: '产品: {b}<br/>数量: {c}<br/>占比: {d}%',
 | 
			
		||||
					formatter: '{b}<br/>数量: {c}<br/>占比: {d}%',
 | 
			
		||||
				},
 | 
			
		||||
				legend: {
 | 
			
		||||
					orient: 'vartical',
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 16:32:13
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:12:00
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 14 : 24">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库存总览</div>
 | 
			
		||||
				<div class="sub-title">产品总数量
 | 
			
		||||
          <div style="color: black;">{{ totalNum }}</div>
 | 
			
		||||
        </div>
 | 
			
		||||
				<barChart
 | 
			
		||||
					ref="barChart"
 | 
			
		||||
					height="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 10 : 0">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库位占用率</div>
 | 
			
		||||
				<pieChart
 | 
			
		||||
					ref="pieChart"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库位占用率"
 | 
			
		||||
					v-if="rateList.length"
 | 
			
		||||
					:pie-data="rateList" />
 | 
			
		||||
				<!-- 没有数据 -->
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
        </div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 2,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 2
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.allURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.overviewList = response.data;
 | 
			
		||||
          this.overviewList.forEach(item=>{
 | 
			
		||||
            this.totalNum += item.num
 | 
			
		||||
          })
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.barChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
			this.urlOptions.rateURL(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	padding: 16px;
 | 
			
		||||
	border-radius: 8px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	line-height: 16px;
 | 
			
		||||
  margin-bottom: 10px;
 | 
			
		||||
	color: #000;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
}
 | 
			
		||||
.title::before {
 | 
			
		||||
	content: '';
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	vertical-align: top;
 | 
			
		||||
	width: 4px;
 | 
			
		||||
	height: 16px;
 | 
			
		||||
	border-radius: 1px;
 | 
			
		||||
  margin-right: 5px;
 | 
			
		||||
	background-color: #0b58ff;
 | 
			
		||||
}
 | 
			
		||||
.sub-title{
 | 
			
		||||
	font-size: 16px;
 | 
			
		||||
	line-height: 18px;
 | 
			
		||||
	color: #888686;
 | 
			
		||||
  min-width: 80px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
  margin-right: 30px;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
  float: right;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:25:34
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 2) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 16:11:36
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:11:50
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 14 : 24">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库存总览</div>
 | 
			
		||||
				<div class="sub-title">产品总数量
 | 
			
		||||
          <div style="color: black;">{{ totalNum }}</div>
 | 
			
		||||
        </div>
 | 
			
		||||
				<barChart
 | 
			
		||||
					ref="barChart"
 | 
			
		||||
					height="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 10 : 0">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库位占用率</div>
 | 
			
		||||
				<pieChart
 | 
			
		||||
					ref="pieChart"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库位占用率"
 | 
			
		||||
					v-if="rateList.length"
 | 
			
		||||
					:pie-data="rateList" />
 | 
			
		||||
				<!-- 没有数据 -->
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
        </div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 5,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 5
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.allURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.overviewList = response.data;
 | 
			
		||||
          this.overviewList.forEach(item=>{
 | 
			
		||||
            this.totalNum += item.num
 | 
			
		||||
          })
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.barChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
			this.urlOptions.rateURL(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	padding: 16px;
 | 
			
		||||
	border-radius: 8px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	line-height: 16px;
 | 
			
		||||
  margin-bottom: 10px;
 | 
			
		||||
	color: #000;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
}
 | 
			
		||||
.title::before {
 | 
			
		||||
	content: '';
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	vertical-align: top;
 | 
			
		||||
	width: 4px;
 | 
			
		||||
	height: 16px;
 | 
			
		||||
	border-radius: 1px;
 | 
			
		||||
  margin-right: 5px;
 | 
			
		||||
	background-color: #0b58ff;
 | 
			
		||||
}
 | 
			
		||||
.sub-title{
 | 
			
		||||
	font-size: 16px;
 | 
			
		||||
	line-height: 18px;
 | 
			
		||||
	color: #888686;
 | 
			
		||||
  min-width: 80px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
  margin-right: 30px;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
  float: right;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:32:23
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 5) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 16:06:10
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:11:37
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 14 : 24">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库存总览</div>
 | 
			
		||||
				<div class="sub-title">产品总数量
 | 
			
		||||
          <div style="color: black;">{{ totalNum }}</div>
 | 
			
		||||
        </div>
 | 
			
		||||
				<barChart
 | 
			
		||||
					ref="barChart"
 | 
			
		||||
					height="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 10 : 0">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库位占用率</div>
 | 
			
		||||
				<pieChart
 | 
			
		||||
					ref="pieChart"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库位占用率"
 | 
			
		||||
					v-if="rateList.length"
 | 
			
		||||
					:pie-data="rateList" />
 | 
			
		||||
				<!-- 没有数据 -->
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
        </div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 3,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 3
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.allURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.overviewList = response.data;
 | 
			
		||||
          this.overviewList.forEach(item=>{
 | 
			
		||||
            this.totalNum += item.num
 | 
			
		||||
          })
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.barChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
			this.urlOptions.rateURL(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	padding: 16px;
 | 
			
		||||
	border-radius: 8px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	line-height: 16px;
 | 
			
		||||
  margin-bottom: 10px;
 | 
			
		||||
	color: #000;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
}
 | 
			
		||||
.title::before {
 | 
			
		||||
	content: '';
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	vertical-align: top;
 | 
			
		||||
	width: 4px;
 | 
			
		||||
	height: 16px;
 | 
			
		||||
	border-radius: 1px;
 | 
			
		||||
  margin-right: 5px;
 | 
			
		||||
	background-color: #0b58ff;
 | 
			
		||||
}
 | 
			
		||||
.sub-title{
 | 
			
		||||
	font-size: 16px;
 | 
			
		||||
	line-height: 18px;
 | 
			
		||||
	color: #888686;
 | 
			
		||||
  min-width: 80px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
  margin-right: 30px;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
  float: right;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(3).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:31:52
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 3) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(3).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 16:24:11
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:11:24
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 14 : 24">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库存总览</div>
 | 
			
		||||
				<div class="sub-title">产品总数量
 | 
			
		||||
          <div style="color: black;">{{ totalNum }}</div>
 | 
			
		||||
        </div>
 | 
			
		||||
				<barChart
 | 
			
		||||
					ref="barChart"
 | 
			
		||||
					height="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 10 : 0">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库位占用率</div>
 | 
			
		||||
				<pieChart
 | 
			
		||||
					ref="pieChart"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库位占用率"
 | 
			
		||||
					v-if="rateList.length"
 | 
			
		||||
					:pie-data="rateList" />
 | 
			
		||||
				<!-- 没有数据 -->
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
        </div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 4,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 4
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.allURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.overviewList = response.data;
 | 
			
		||||
          this.overviewList.forEach(item=>{
 | 
			
		||||
            this.totalNum += item.num
 | 
			
		||||
          })
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.barChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
			this.urlOptions.rateURL(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	padding: 16px;
 | 
			
		||||
	border-radius: 8px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	line-height: 16px;
 | 
			
		||||
  margin-bottom: 10px;
 | 
			
		||||
	color: #000;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
}
 | 
			
		||||
.title::before {
 | 
			
		||||
	content: '';
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	vertical-align: top;
 | 
			
		||||
	width: 4px;
 | 
			
		||||
	height: 16px;
 | 
			
		||||
	border-radius: 1px;
 | 
			
		||||
  margin-right: 5px;
 | 
			
		||||
	background-color: #0b58ff;
 | 
			
		||||
}
 | 
			
		||||
.sub-title{
 | 
			
		||||
	font-size: 16px;
 | 
			
		||||
	line-height: 18px;
 | 
			
		||||
	color: #888686;
 | 
			
		||||
  min-width: 80px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
  margin-right: 30px;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
  float: right;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:31:14
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 4) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(this.listQuery.storageType).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,20 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-22 15:01:54
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 15:18:38
 | 
			
		||||
 * @LastEditTime: 2023-11-07 14:11:10
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
	<el-row :gutter="10" class="chart-container">
 | 
			
		||||
		<el-col :span="14">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 14 : 24">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库存总览</div>
 | 
			
		||||
				<div class="sub-title">产品总数量
 | 
			
		||||
          <div style="color: black;">{{ totalNum }}</div>
 | 
			
		||||
        </div>
 | 
			
		||||
				<barChart
 | 
			
		||||
					ref="barChart"
 | 
			
		||||
					height="500px"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库存总览"
 | 
			
		||||
					v-if="overviewList.length"
 | 
			
		||||
					:histogram="overviewList" />
 | 
			
		||||
@@ -19,16 +23,18 @@
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
		<el-col :span="10">
 | 
			
		||||
		<el-col :span="wareType === 1 ? 10 : 0">
 | 
			
		||||
			<div class="chart-card">
 | 
			
		||||
				<div class="title">库位占用率</div>
 | 
			
		||||
				<pieChart
 | 
			
		||||
					ref="pieChart"
 | 
			
		||||
					height="600px"
 | 
			
		||||
					title="库位占用率"
 | 
			
		||||
					v-if="rateList.length"
 | 
			
		||||
					:pie-data="rateList" />
 | 
			
		||||
				<!-- 没有数据 -->
 | 
			
		||||
				<div class="no-data-bg" v-else></div>
 | 
			
		||||
        </div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-col>
 | 
			
		||||
	</el-row>
 | 
			
		||||
</template>
 | 
			
		||||
@@ -36,46 +42,62 @@
 | 
			
		||||
<script>
 | 
			
		||||
import barChart from '../../chart/BarChart.vue';
 | 
			
		||||
import pieChart from '../../chart/PieChart.vue';
 | 
			
		||||
import {
 | 
			
		||||
	getOverview,
 | 
			
		||||
	getRate,
 | 
			
		||||
} from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getOverview, getRate } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
				allURL: getOverview,
 | 
			
		||||
        rateURL: getRate
 | 
			
		||||
				rateURL: getRate,
 | 
			
		||||
			},
 | 
			
		||||
			listQuery: {
 | 
			
		||||
				storageType: 1,
 | 
			
		||||
			},
 | 
			
		||||
			wareType: 1,
 | 
			
		||||
      totalNum: 0,
 | 
			
		||||
			overviewList: [],
 | 
			
		||||
      rateList: []
 | 
			
		||||
			rateList: [],
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	components: {
 | 
			
		||||
		barChart,
 | 
			
		||||
    pieChart
 | 
			
		||||
		pieChart,
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.getDataList();
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					this.wareType = item.type;
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 获取数据列表
 | 
			
		||||
		getDataList() {
 | 
			
		||||
      const data = {
 | 
			
		||||
        storageType : 1
 | 
			
		||||
      }
 | 
			
		||||
			this.urlOptions.allURL(data).then((response) => {
 | 
			
		||||
				this.overviewList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.barChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.allURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.overviewList = response.data;
 | 
			
		||||
          this.overviewList.forEach(item=>{
 | 
			
		||||
            this.totalNum += item.num
 | 
			
		||||
          })
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.barChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
			this.urlOptions.rateURL(data).then((response) => {
 | 
			
		||||
				this.rateList = response.data;
 | 
			
		||||
				this.$nextTick(() => {
 | 
			
		||||
					this.$refs.pieChart.initChart();
 | 
			
		||||
				});
 | 
			
		||||
			this.urlOptions.rateURL(this.listQuery).then((response) => {
 | 
			
		||||
				if (response.data && response.data.length) {
 | 
			
		||||
					this.rateList = response.data;
 | 
			
		||||
					this.$nextTick(() => {
 | 
			
		||||
						this.$refs.pieChart.initChart();
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@@ -93,4 +115,33 @@ export default {
 | 
			
		||||
	padding: 16px;
 | 
			
		||||
	border-radius: 8px;
 | 
			
		||||
}
 | 
			
		||||
.title {
 | 
			
		||||
	font-size: 18px;
 | 
			
		||||
	line-height: 16px;
 | 
			
		||||
  margin-bottom: 10px;
 | 
			
		||||
	color: #000;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
}
 | 
			
		||||
.title::before {
 | 
			
		||||
	content: '';
 | 
			
		||||
	display: inline-block;
 | 
			
		||||
	vertical-align: top;
 | 
			
		||||
	width: 4px;
 | 
			
		||||
	height: 16px;
 | 
			
		||||
	border-radius: 1px;
 | 
			
		||||
  margin-right: 5px;
 | 
			
		||||
	background-color: #0b58ff;
 | 
			
		||||
}
 | 
			
		||||
.sub-title{
 | 
			
		||||
	font-size: 16px;
 | 
			
		||||
	line-height: 18px;
 | 
			
		||||
	color: #888686;
 | 
			
		||||
  min-width: 80px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
	font-weight: 500;
 | 
			
		||||
  margin-right: 30px;
 | 
			
		||||
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
 | 
			
		||||
  float: right;
 | 
			
		||||
  }
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -58,7 +58,7 @@ import {
 | 
			
		||||
	getWarehouseLocationHisPage,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
@@ -179,8 +179,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(1).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2023-08-21 14:26:23
 | 
			
		||||
 * @LastEditors: zwq
 | 
			
		||||
 * @LastEditTime: 2023-11-04 14:46:59
 | 
			
		||||
 * @LastEditTime: 2023-11-06 11:30:20
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -93,7 +93,8 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listByWarehouse, listAll } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
@@ -129,7 +130,10 @@ export default {
 | 
			
		||||
				there: [],
 | 
			
		||||
				four: [],
 | 
			
		||||
			}),
 | 
			
		||||
				listAll(1).then((response) => {
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === 1) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
					response.data.forEach((a, b) => {
 | 
			
		||||
						if (b % 4 === 0) {
 | 
			
		||||
							this.wareData.one.push(a);
 | 
			
		||||
@@ -142,7 +146,10 @@ export default {
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
					this.total = Math.ceil(response.data.length / 40);
 | 
			
		||||
				});
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
		},
 | 
			
		||||
		buttonClick(val) {
 | 
			
		||||
			switch (val.btnName) {
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ import {
 | 
			
		||||
	outWarehouseRealtimeLocation,
 | 
			
		||||
} from '@/api/warehouse/warehouseRealtimeLocation';
 | 
			
		||||
import { listByWarehouse } from '@/api/warehouse/warehouseLocation';
 | 
			
		||||
 | 
			
		||||
import { getWarehouseList } from '@/api/warehouse/warehouse-info';
 | 
			
		||||
import { listData } from '@/api/system/dict/data';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import { mapGetters } from 'vuex';
 | 
			
		||||
@@ -175,7 +175,7 @@ export default {
 | 
			
		||||
					label: '入库时间',
 | 
			
		||||
					dateType: 'daterange',
 | 
			
		||||
					format: 'yyyy-MM-dd',
 | 
			
		||||
          valueFormat: "timestamp",
 | 
			
		||||
					valueFormat: 'timestamp',
 | 
			
		||||
					rangeSeparator: '-',
 | 
			
		||||
					startPlaceholder: '开始时间',
 | 
			
		||||
					endPlaceholder: '结束时间',
 | 
			
		||||
@@ -203,8 +203,14 @@ export default {
 | 
			
		||||
		listData(queryParams).then((response) => {
 | 
			
		||||
			this.formConfig[2].selectOptions = response.data.list;
 | 
			
		||||
		});
 | 
			
		||||
		listByWarehouse(1).then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		getWarehouseList().then((response) => {
 | 
			
		||||
			response.data.forEach((item) => {
 | 
			
		||||
				if (item.storageType === this.listQuery.storageType) {
 | 
			
		||||
					listByWarehouse(item.id).then((response) => {
 | 
			
		||||
						this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
					});
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		});
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
@@ -216,7 +222,7 @@ export default {
 | 
			
		||||
					this.listQuery.locationId = val.name;
 | 
			
		||||
					this.listQuery.palletCode = val.code;
 | 
			
		||||
					this.listQuery.status = val.status;
 | 
			
		||||
					this.listQuery.inTime = val.searchTime?val.searchTime:null;
 | 
			
		||||
					this.listQuery.inTime = val.searchTime ? val.searchTime : null;
 | 
			
		||||
					this.getDataList();
 | 
			
		||||
					break;
 | 
			
		||||
				default:
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user