HwJyHbMes/hw-ui/src/views/board/warehouse/firstFloor.vue

<template>
  <div class="app-container">
    <div class="headTitle">京源智能仓储监控平台</div>
    <div v-for="(i,k) in title"
         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
         class="title"
    >
      {{ i }}
    </div>
    <div class="chart3">
      <Chart key="chart3" ref="chart3"></Chart>
    </div>

    <div class="table1">
      <div style="background-color: #1077bc19">
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          任务编号
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          任务类型
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          物料名称
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          库位编号
        </div>
        <div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
          时间
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="scrollTableOption"
        :data="scrollTableData"
        class="case-item"
        style="height: calc(100% - 30px);overflow: hidden;"
      >
        <div
          v-for="(item, index) in scrollTableData"
          :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
            <div
              class="scrollTableItem"
            >
              {{ item.taskCode }}
            </div>
            <div
              class="scrollTableItem"
            >
              入库
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.materialName }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.locationCode }}
            </div>
            <div
              class="scrollTableItem"
            >
              {{ item.applylate }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>


  </div>
</template>


<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart'
import HighChart from '@/components/board/HighChart'
import * as echarts from 'echarts'
import {
  bomInfo,
  inAndOutInfo,
  productInAndOutInfo,
  purchaseInfo,
  stockPercentage
} from '@/api/board/firstFloorWarehouse'
import { parseTime } from '@/utils/ruoyi'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  components: {
    vueSeamlessScroll,
    Chart,
    HighChart
  },
  data() {
    return {
      topData: {
        num1: [0, 0, 0, 0],
        num2: [0, 0, 0, 0],
        num3: [0, 0, 0, 0]
      },
      title: [
        ' ',
        ' ',
        ' ',
        '  ',
        '  ',
        '库存占比'
      ],
      titlePosition: [
        {
          top: 11.5,
          left: 7.5
        },
        {
          top: 11.5,
          left: 40.3
        },
        {
          top: 11.5,
          left: 72.8
        },
        {
          top: 11.5,
          left: 60.3
        },
        {
          top: 11.5,
          left: 79.1
        },
        {
          top: 19.4,
          left: 5.5
        }
      ],
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 22, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0
      },
      scrollTableData: [],
      scrollTableData1: []
    }
  },
  mounted() {
    this.getData()

    window.onresize = () => {
      this.$refs.chart1.resize()
      this.$refs.chart2.resize()
      this.$refs.chart3.resize()
    }
  },
  methods: {
    getData() {
      inAndOutInfo().then(e => {
        console.log(e)
        this.topData.num1= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
        this.topData.num2= [...[0, 0, 0, 0], ...(e.data.rawOutstocks?.find(v=>v.warehouseId===111)?.outstockAmount || 0).toString().split('')].slice(-4)
        this.topData.num3= [...[0, 0, 0, 0], ...(e.data.inStocks.find(v=>v.warehouseId===131)?.outstockAmount || 0).toString().split('')].slice(-4)
      })
      stockPercentage().then(e => {
        let num1 = e.data.nostockAmount + e.data.stockAmount
        let num2 = e.data.stockAmount
        let num2_1
        let num3 = e.data.nostockAmount
        let num3_1
        if (num1 === 0) {
          num2_1 = 50
          num3_1 = 50
        } else {
          num2_1 = parseFloat(((num2 / num1) * 100).toFixed(2))
          num3_1 = parseFloat(((num3 / num1) * 100).toFixed(2))
        }
        this.$refs.chart1.setData({
          title: {
            text: '原料库存占比',
            style: {
              color: '#fff'
            }
          },
          credits: {
            enabled: false
          },
          chart: {
            type: 'pie',
            animation: false,
            backgroundColor: null,
            events: {
              load: function() {
                let each = Highcharts.each,
                  points = this.series[0].points
                each(points, function(p, i) {
                  p.graphic.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side1.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side2.attr({
                    translateY: -p.shapeArgs.ran
                  })
                })
              }
            },
            options3d: {
              enabled: true,
              alpha: 60,
              beta: 0
            }
          },
          legend: {
            reversed: true,
            itemStyle: {
              color: '#fff'
            }
          },
          plotOptions: {
            pie: {
              allowPointSelect: false,
              cursor: 'pointer',
              depth: 35,
              startAngle: 45,
              size: 200,
              dataLabels: {
                enabled: true,
                formatter: function() {
                  return this.point.options.name + '<br>' + this.point.options.h + '%'
                }
              },
              showInLegend: false,
              point: {
                events: {
                  legendItemClick: function(e) {
                    return false // 直接 return false 即可禁用图例点击事件
                  }
                }
              }
            }
          },
          series: [
            {
              type: 'pie',
              name: '占比',
              data: [
                {
                  'name': '已使用',
                  y: num2_1,
                  h: Math.min(num2_1, 50)
                },
                {
                  name: '未使用',
                  y: num3_1,
                  h: Math.min(num3_1, 50)
                }
              ].sort((a, b) => a.y - b.y)
            }]
        })
        let num11 = e.data.noProductstockAmount + e.data.productstockAmount
        let num12 = e.data.productstockAmount
        let num12_1
        let num13 = e.data.noProductstockAmount
        let num13_1
        if (num11 === 0) {
          num12_1 = 50
          num13_1 = 50
        } else {
          num12_1 = parseFloat(((num12 / num11) * 100).toFixed(2))
          num13_1 = parseFloat(((num13 / num11) * 100).toFixed(2))
        }
        this.$refs.chart2.setData({
          title: {
            text: '成品库存占比',
            style: {
              color: '#fff'
            }
          },
          credits: {
            enabled: false
          },
          chart: {
            type: 'pie',
            startAngle: Math.PI / 6,
            animation: false,
            backgroundColor: null,
            events: {
              load: function() {
                let each = Highcharts.each,
                  points = this.series[0].points
                each(points, function(p, i) {
                  p.graphic.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side1.attr({
                    translateY: -p.shapeArgs.ran
                  })
                  p.graphic.side2.attr({
                    translateY: -p.shapeArgs.ran
                  })
                })
              }
            },
            options3d: {
              enabled: true,
              alpha: 60,
              beta: 0
            }
          },
          legend: {
            reversed: true,
            itemStyle: {
              color: '#fff'
            }
          },
          plotOptions: {
            pie: {
              allowPointSelect: false,
              cursor: 'pointer',
              depth: 35,
              startAngle: 45,
              size: 200,
              dataLabels: {
                enabled: true,
                formatter: function() {
                  return this.point.options.name + '<br>' + this.point.options.h + '%'
                }
              },
              showInLegend: false,
              point: {
                events: {
                  legendItemClick: function(e) {
                    return false // 直接 return false 即可禁用图例点击事件
                  }
                }
              }
            }
          },
          series: [
            {
              type: 'pie',
              name: '占比',
              data: [
                {
                  'name': '已使用',
                  y: num12_1,
                  h: num12_1
                },
                {
                  name: '未使用',
                  y: num12_1,
                  h: num12_1
                }
              ].sort((a, b) => a.y - b.y)
            }]
        })
      })
      purchaseInfo().then(e => {
        this.scrollTableData = e.data
      })
      bomInfo().then(e => {
        this.scrollTableData1 = e.data
      })
      productInAndOutInfo().then(e => {
        this.$refs.chart3.setData({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '14%',
            top: '16%',
            containLabel: true
          },
          legend: {
            x: 'center',
            top: 12,
            textStyle: {
              color: '#fff'
            },
            itemWidth: 12,
            itemHeight: 10
            // itemGap: 35
          },
          xAxis: {
            type: 'category',
            data: e.data.map(v => parseTime(v.day, '{m}-{d}')),
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              textStyle: {
                fontFamily: 'Microsoft YaHei'
              }
            }
          },

          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.3)'
              }
            },
            axisLabel: {}
          },
          series: [
            {
              name: '入库',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#fccb05'
                    },
                    {
                      offset: 1,
                      color: '#f5804d'
                    }
                  ])
                }
              },
              data: e.data.map(v => v.instockAmount)
            },
            {
              name: '出库',
              type: 'bar',
              barWidth: '15%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#8bd46e'
                    },
                    {
                      offset: 1,
                      color: '#09bcb7'
                    }
                  ])
                }
              },
              data: e.data.map(v => v.outStockAmount)
            }
          ]
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>

.app-container {
  background-image: url("../../../assets/board/energy.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
}

.num1 {
  position: absolute;
  font-size: 1.5vw;
  transform: translate(-50%, -50%);
}

.title {
  position: absolute;
  transform: translateY(-50%);
  color: #dddddd;
  font-size: 1vw;
  letter-spacing: 2px;
}


.chart1 {
  position: absolute;
  top: 22.5%;
  left: 3.4%;
  width: 23%;
  height: 32%;
}

.chart2 {
  position: absolute;
  top: 22.5%;
  left: 26.5%;
  width: 23%;
  height: 32%;
}

.chart3 {
  position: absolute;
  top: 58.8%;
  left: 3.4%;
  width: 93.2%;
  height: 36%;
}


.span {
  position: absolute;
  transform: translateY(-50%);
}

.span1 {
  position: absolute;
  transform: translate(-50%, -50%);
}

.table1 {
  position: absolute;
  top: 14.9%;
  left: 3.4%;
  width: 93.3%;
  height: 35.9%;
  color: #fff;
}

.table2 {
  position: absolute;
  top: 62.9%;
  left: 50.4%;
  width: 45.7%;
  height: 32%;
  color: #fff;
}

.scrollTableItem {
  display: inline-block;
  width: calc(100% / 5);
  text-align: center;
  padding: 14px 0;
  color: #4e99c5
}

</style>