add：实时库存分析

mes/qd/src/views/wms/stata_manage/realtimeivt/PieChart.vue

@@ -0,0 +1,101 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    chartData: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler() {
+        this.setOptions()
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHandler)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHandler)
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        title: {
+          text: '统计',
+          subtext: '',
+          subtextStyle: {
+            'color': '#333'
+          },
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left'
+        },
+        // color: ['#e0a803', '#27aa0f', '#d2d1d1'], // 修改图饼颜色
+        series: [
+          {
+            name: '百分比',
+            type: 'pie',
+            radius: '70%',
+            data: this.chartData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0,0,0,0.5)'
+              }
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

mes/qd/src/views/wms/stata_manage/realtimeivt/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-form
+          :inline="true"
+          class="demo-form-inline"
+          label-position="right"
+          label-width="80px"
+          label-suffix=":"
+        >
+          <el-form-item label="所属仓库">
+            <label slot="label">仓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;库:</label>
+            <el-select
+              v-model="query.stor_id"
+              size="mini"
+              placeholder="所属仓库"
+              class="filter-item"
+              @change="crud.toQuery"
+            >
+              <el-option
+                v-for="item in storlist"
+                :key="item.stor_id"
+                :label="item.stor_name"
+                :value="item.stor_id"
+              />
+            </el-select>
+          </el-form-item>
+
+         <!-- <el-form-item label="物料编码">
+            <el-input
+              v-model="query.material_code"
+              size="mini"
+              clearable
+              placeholder="物料编码、名称、规格"
+              @keyup.enter.native="crud.toQuery"
+            />
+          </el-form-item>-->
+          <rrOperation />
+        </el-form>
+      </div>
+      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
+      <crudOperation :permission="permission" />
+      <!--表格渲染-->
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <el-table
+            ref="table"
+            v-loading="crud.loading"
+            size="mini"
+            :data="crud.data"
+            highlight-current-row
+            style="width: 100%;"
+            @selection-change="crud.selectionChangeHandler"
+          >
+            <el-table-column show-overflow-tooltip min-width="120" prop="material_code" label="物料编码" />
+            <el-table-column show-overflow-tooltip min-width="120" prop="material_name" label="物料名称" />
+            <el-table-column show-overflow-tooltip min-width="120" prop="material_spec" label="物料规格" />
+            <el-table-column show-overflow-tooltip prop="canuse_qty" label="库存" :formatter="crud.formatNum3" />
+            <el-table-column show-overflow-tooltip prop="unit_name" label="单位" />
+            <el-table-column show-overflow-tooltip prop="pro" label="占比(%)" />
+          </el-table>
+          <!--分页组件-->
+          <pagination />
+        </el-col>
+      </el-row>
+      <hr/>
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <div class="chart-wrapper">
+            <pie-chart :chart-data="ivtList" />
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import CRUD, { crud, header, presenter } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker/index'
+import crudStorattr from '@/views/wms/storage_manage/basedata/basedata'
+import Realtimeivt, { autoWeb } from '@/views/wms/stata_manage/realtimeivt/realtimeivt'
+import PieChart from '@/views/wms/stata_manage/realtimeivt/PieChart'
+
+export default {
+  name: 'RealTimeIvt',
+  components: { crudOperation, rrOperation, PieChart, udOperation, pagination, DateRangePicker },
+  cruds() {
+    return CRUD({
+      title: '实时库存分析',
+      optShow: { add: false, reset: true },
+      idField: 'stockrecord_id',
+      url: '/api/realtimeivt',
+      crudMethod: { ...Realtimeivt }
+    })
+  },
+  mixins: [presenter(), header(), crud()],
+  // 数据字典
+  data() {
+    return {
+      query_flag: true,
+      permission: {},
+      storlist: [],
+      ivtList: []
+    }
+  },
+  mounted: function() {
+    const that = this
+    window.onresize = function temp() {
+      that.height = document.documentElement.clientHeight - 180 + 'px;'
+    }
+    this.init()
+  },
+  beforeDestroy() {
+    // js提供的clearInterval方法用来清除定时器
+    console.log('定时器销毁')
+    clearInterval(this.timer)
+  },
+  created() {
+    crudStorattr.getStor({ 'stor_type': '' }).then(res => {
+      this.storlist = res.content
+    })
+  },
+  methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+      if (this.query_flag) {
+        this.crud.query.stor_id = '1528627995269533696'
+        this.query_flag = false
+      }
+    },
+    init: function() {
+      this.initStageData()
+    },
+    initStageData() {
+      this.timer = setInterval(() => { // 定时刷新
+        console.log('定时器启动')
+        this.initStatus()
+      }, 4000)
+    },
+    initStatus() {
+      autoWeb(this.crud.query).then(res => {
+        this.ivtList = res.ivtList
+      })
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-dialog__body {
+  padding-top: 10px;
+}
+</style>

mes/qd/src/views/wms/stata_manage/realtimeivt/realtimeivt.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: '/api/realtimeivt',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: '/api/realtimeivt/delete',
+    method: 'post',
+    data: ids
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: '/api/realtimeivt/update',
+    method: 'post',
+    data
+  })
+}
+
+export function autoWeb(data) {
+  return request({
+    url: 'api/realtimeivt/autoWeb',
+    method: 'post',
+    data
+  })
+}
+
+export default {
+  add,
+  edit,
+  del,
+  autoWeb
+}