HwJyHbMes/hw-ui/src/views/board/warehouse/secondFloor.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="table1">
      <div style="background-color: #094170aa">
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
          任务编号
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
          任务类型
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
          物料名称
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
          库位编号
        </div>
        <div class="scrollTableItem" style="color:#fff;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)? "#053460aa":"#032d57aa") '>
            <div
              class="scrollTableItem">
              {{ item.value1 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value3 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value4 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value5 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="chart1">
      <Chart key="chart1" ref="chart1"></Chart>
    </div>
    <div class="chart2">
      <Chart key="chart2" ref="chart2"></Chart>
    </div>
    <div class="chart3">
      <Chart key="chart3" ref="chart3"></Chart>
    </div>
    <div class="chart4">
      <Chart key="chart4" ref="chart4"></Chart>
    </div>
    <div class="chart5">
      <Chart key="chart5" ref="chart5"></Chart>
    </div>
    <div class="span1">可用库位占比</div>
    <div class="span2">库存占用率</div>
    <div class="info1">
      <div class="infoSpan">当日入库量:</div>
      <div class="infoSum" style="color:#bbc2c6;">1122</div>
    </div>
    <div class="info2">
      <div class="infoSpan">当日入库量:</div>
      <div class="infoSum" style="color:#a68b19;">1122</div>
    </div>
    <div class="info3">
      <div class="infoSpan">当日入库量:</div>
      <div class="infoSum" style="color:#01c038;">1122</div>
    </div>
    <div class="info4">
      <div class="infoSpan">当日入库量:</div>
      <div class="infoSum" style="color:#c0070c;">1122</div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from '@/components/board/Chart'
import * as echarts from 'echarts'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  components: {
    vueSeamlessScroll,
    Chart
  },
  data() {
    return {
      title: [
        '库存总量统计',
        '库位动态',
        '物料时效统计',
        '库位原理统计',
      ],
      titlePosition: [
        {
          top: 19.7,
          left: 5.5
        },
        {
          top: 19.7,
          left: 35.2
        },
        {
          top: 59.8,
          left: 5.5
        },
        {
          top: 59.8,
          left: 35.2
        },
      ],
      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: Array(4).fill('').map(function (i, k) {
        return {
          value1: k + 1,
          value2: '出库',
          value3: '物料1',
          value4: '000' + k,
          value5: '2024.03.04',
        }
      }),
    }
  },
  mounted() {
    this.$refs.chart1.setData({
      tooltip: {
        trigger: "item",
      },
      grid: {
        borderWidth: 0,
        top: "10%",
        left: "10%",
        right: "10%",
        bottom: "10%",
      },
      yAxis: {
        type: "category",
        axisLabel: {
          margin: 10,
          color: "#ffffff63",
        },

        axisTick: {
          show: true,
          lineStyle: {
            color: "#ffffff1f",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: "#ffffff1f",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#fff3",
            width: 2,
          },
        },
        data: ['物料1', '物料2', '物料3'],
      },
      xAxis: {
        type: "value",
        axisLabel: {
          margin: 10,
          color: "#ffffff63",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#ffffff1f",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: "#ffffff1f",
          },
        },
      },
      series: [
        {
          name: "",
          type: "bar",
          barWidth: "40%",
          itemStyle: {

            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: "#0a2ad7",
                },
                {
                  offset: 1,
                  color: "#138dd7",
                },
              ],
              false
            ),
          },
          data: [1, 2, 3],
        },
        {
          name: "",
          type: "pictorialBar",
          barWidth: "40%",
          symbolSize: [5, '100%'],
          symbolPosition: 'end',
          symbolOffset: [3, 0],
          barGap: '-100%',
          itemStyle: {
            color: '#138dd7'
          },
          data: [1, 2, 3],
        },
      ]
    })
    this.$refs.chart2.setData({
      grid: {
        top: "10%",
        left: "5%",
        right: "5%",
        bottom: "10%",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["出库", "入库"],
        top: "0%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "物料1",
          "物料2",
          "物料3",
          "物料4",
          "物料5",
          "物料6",
          "物料7",
          "物料8",
        ],
        axisLabel: {
          margin: 10,
          color: "#ffffff63",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#ffffff1f",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: "#ffffff1f",
          },
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          margin: 10,
          color: "#ffffff63",
        },

        axisTick: {
          show: true,
          lineStyle: {
            color: "#ffffff1f",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: "#ffffff1f",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#fff3",
            width: 2,
          },
        },
      },
      series: [
        {
          name: "出库",
          type: "bar",
          barWidth: '25%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#0a2ad7",
                  },
                  {
                    offset: 1,
                    color: "#138dd7",
                  },
                ],
                false
              ),
            },
          },
          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
        },
        {
          name: "入库",
          type: "bar",
          barWidth: '25%',
          barGap: '20%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#159d40",
                  },
                  {
                    offset: 1,
                    color: "#0bcb98",
                  },
                ],
                false
              ),
            },
          },
          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
        },
        {
          name: "",
          tooltip: {
            show: false
          },
          type: "pictorialBar",
          barWidth: "25%",
          symbolSize: ['100%', 5],
          symbolPosition: 'end',
          symbolOffset: ['-60%', -3],
          itemStyle: {
            color: '#138dd7'
          },
          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
        },
        {
          name: "",
          type: "pictorialBar",
          tooltip: {
            show: false
          },
          barWidth: "25%",
          symbolSize: ['100%', 5],
          symbolPosition: 'end',
          symbolOffset: ['60%', -3],
          itemStyle: {
            color: '#0bcb98'
          },
          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
        },
      ],
    })
    this.$refs.chart3.setData({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        left: "70%",
        align: "left",
        top: "middle",
        textStyle: {
          color: "#8C8C8C",
        },
        height: 250,
      },
      series: [
        {
          name: "库存情况",
          type: "pie",
          radius: ["20%", "70%"],
          center: ["35%", "50%"],
          clockwise: false,
          data: [
            {
              value: 45,
              name: "已过期",
            },
            {
              value: 25,
              name: "半年内",
            },
            {
              value: 15,
              name: "三个月内",
            },
            {
              value: 8,
              name: "一个月内",
            },
          ],
          label: {
            normal: {
              position: "inner",
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
              formatter: (e) => {
                return e.percent.toFixed(2) + '%'
              }
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
        },
      ],
    })
    this.$refs.chart4.setData({
      title: {
        x: 'center',
        y: 'center',
        text: "75%",
        textStyle: {
          color: '#ccc',
          fontSize: 1.5 * vw,
        },
      },
      series: [
        {
          type: "pie",
          radius: ["47.5%", "55%"],
          center: ["50%", "50%"],
          startAngle: 225,
          endAngle: -45,
          color: ['#fa9800', "transparent"],
          data: [
            {
              value: 75,
              name: ''
            },
            {
              value: 25,
              name: ''
            },
          ],
          label: {
            show: false
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
        },
      ],
    })
    this.$refs.chart5.setData({
      title: {
        x: 'center',
        y: 'center',
        text: "75%",
        textStyle: {
          color: '#ccc',
          fontSize: 1.5 * vw,
        },
      },
      series: [
        {
          type: "pie",
          radius: ["47.5%", "55%"],
          center: ["50%", "50%"],
          startAngle: 225,
          endAngle: -45,
          color: ['#00f79e', "transparent"],
          data: [
            {
              value: 75,
              name: '',
            },
            {
              value: 25,
              name: ''
            },
          ],
          label: {
            // show: false
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
        },
      ],
    })

    window.onresize = () => {
      this.$refs.chart1.chart.resize()
      this.$refs.chart2.chart.resize()
      this.$refs.chart3.chart.resize()
      this.$refs.chart4.chart.resize()
      this.$refs.chart5.chart.resize()
    }
  },
  methods: {}
}
</script>
<style lang="less" scoped>

.app-container {
  background-image: url("../../../assets/board/warehouseBg1.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;
}

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

.table1 {
  position: absolute;
  top: 66.5%;
  left: 67.3%;
  width: 27.8%;
  height: 27.5%;
  color: #fff
}

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

.chart1 {
  position: absolute;
  top: 23%;
  left: 3.8%;
  width: 27.8%;
  height: 32%;
}

.chart2 {
  position: absolute;
  top: 23%;
  left: 33%;
  width: 63.8%;
  height: 32%;

}

.chart3 {
  position: absolute;
  top: 63%;
  left: 3.8%;
  width: 27.8%;
  height: 32%;

}

.chart4 {
  position: absolute;
  top: 64.6%;
  left: 33.9%;
  width: 16vw;
  height: 16vw;

}

.chart5 {
  position: absolute;
  top: 64.6%;
  left: 48.8%;
  width: 16vw;
  height: 16vw;

}

.span1 {
  position: absolute;
  top: 86.3%;
  left: 41.9%;
  transform: translate(-50%, -50%);
  color: #dddddd;
  font-size: 1vw;
}

.span2 {
  position: absolute;
  top: 86.3%;
  left: 56.8%;
  transform: translate(-50%, -50%);
  color: #dddddd;
  font-size: 1vw;
}

.info1, .info2, .info3, .info4 {
  position: absolute;
  top: 11.9%;
  width: 19.6%;
  height: 5.8%;
  transform: translate(-50%, -50%);

  .infoSpan {
    position: absolute;
    transform: translate(-100%, -50%);
    top: 50%;
    left: 45%;
    color: #ccc;
    font-size: 1.1vw;
  }

  .infoSum {
    position: absolute;
    transform: translate(100%, -50%);
    top: 50%;
    left: 47%;
    font-size: 1.1vw;
  }
}

.info1 {
  left: 13.1%;
}

.info2 {
  left: 37.7%;
}

.info3 {
  left: 62.3%;
}

.info4 {
  left: 86.9%;
}

</style>