HwMes/hw-ui/src/views/board/warehouse/fifthFloor.vue

<template>
  <div class="app-container">
    <div class="warehouse"></div>
    <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: #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.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">
      <HighChart key="chart1" ref="chart1"></HighChart>
    </div>
    <div class="chart2">
      <HighChart key="chart2" ref="chart2"></HighChart>
    </div>
    <div class="chart3">
      <HighChart key="chart3" ref="chart3"></HighChart>
    </div>
    <div class="chart4">
      <HighChart key="chart4" ref="chart4"></HighChart>
    </div>
    <div class="chart5">
      <Chart key="chart5" ref="chart5"></Chart>
    </div>
    <div class="chart6">
      <Chart key="chart6" ref="chart6"></Chart>
    </div>

    <div class="num1 num1_1" style="top: 11.9%;left: 17.4%;color:#5fc2f2">1</div>
    <div class="num1 num1_2" style="top: 11.9%;left:20.9%;color:#5fc2f2">0</div>
    <div class="num1 num1_3" style="top: 11.9%;left:24.4%;color:#5fc2f2">0</div>
    <div class="num1 num1_4" style="top: 11.9%;left:27.9%;color:#5fc2f2">0</div>
    <div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">1</div>
    <div class="num1 num1_6" style="top: 11.9%;left:53.5%;color:#59ee7b">0</div>
    <div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">0</div>
    <div class="num1 num1_8" style="top: 11.9%;left:60.5%;color:#59ee7b">0</div>
    <div class="num1 num1_9" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
    <div class="num1 num1_10" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
    <div class="num1 num1_11" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
    <div class="num1 num1_12" style="top: 11.9%;left:93.1%;color:#f60008">0</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'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  components: {
    vueSeamlessScroll,
    Chart,
    HighChart
  },
  data() {
    return {
      title: [
        '原料库出库数量:',
        '辅料库出库数量:',
        '半成品入库数量:',
        '库存占比',
        '调度任务',
        '成品库可用库存占比',
        '成品库订单库存统计',
      ],
      titlePosition: [
        {
          top: 11.5,
          left: 7.5
        },
        {
          top: 11.5,
          left: 40
        },
        {
          top: 11.5,
          left: 72.5
        },
        {
          top: 19.4,
          left: 5.5
        },
        {
          top: 59.8,
          left: 5.5
        },
        {
          top: 59.8,
          left: 37
        },
        {
          top: 59.8,
          left: 68.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: Array(100).fill('').map(function (i, k) {
        return {
          value1: k + 1,
          value2: '出库',
          value3: '物料1',
          value4: '000' + k,
          value5: '2024.03.04',
        }
      }),
    }
  },
  mounted() {
    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: 'Browser share',
          data: [
            {
              'name': '材料1',
              y: 30.0,
              h: 30.0
            },
            {
              name: '材料2',
              y: 26.8,
              h: 26.8
            },
            {
              'name': '材料3',
              y: 15,
              h: 15
            },
            {
              name: '材料4',
              y: 12.8,
              h: 12.8
            },
            {
              'name': '材料5',
              y: 8.5,
              h: 8.5
            },
            {
              'name': '材料6',
              y: 6.2,
              h: 6.2
            },
            {
              'name': '材料7',
              y: 0.7,
              h: 0.7
            }
          ].sort((a, b) => a.y - b.y)
        }]
    })
    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: 'Browser share',
          data: [
            {
              'name': '材料1',
              y: 30.0,
              h: 30.0
            },
            {
              name: '材料2',
              y: 26.8,
              h: 26.8
            },
            {
              'name': '材料3',
              y: 15,
              h: 15
            },
            {
              name: '材料4',
              y: 12.8,
              h: 12.8
            },
            {
              'name': '材料5',
              y: 8.5,
              h: 8.5
            },
            {
              'name': '材料6',
              y: 6.2,
              h: 6.2
            },
            {
              'name': '材料7',
              y: 0.7,
              h: 0.7
            }
          ].sort((a, b) => a.y - b.y)
        }]
    })
    this.$refs.chart3.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: 'Browser share',
          data: [
            {
              'name': '材料1',
              y: 30.0,
              h: 30.0
            },
            {
              name: '材料2',
              y: 26.8,
              h: 26.8
            },
            {
              'name': '材料3',
              y: 15,
              h: 15
            },
            {
              name: '材料4',
              y: 12.8,
              h: 12.8
            },
            {
              'name': '材料5',
              y: 8.5,
              h: 8.5
            },
            {
              'name': '材料6',
              y: 6.2,
              h: 6.2
            },
            {
              'name': '材料7',
              y: 0.7,
              h: 0.7
            }
          ].sort((a, b) => a.y - b.y)
        }]
    })
    this.$refs.chart4.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: 'Browser share',
          data: [
            {
              'name': '材料1',
              y: 30.0,
              h: 30.0
            },
            {
              name: '材料2',
              y: 26.8,
              h: 26.8
            },
            {
              'name': '材料3',
              y: 15,
              h: 15
            },
            {
              name: '材料4',
              y: 12.8,
              h: 12.8
            },
            {
              'name': '材料5',
              y: 8.5,
              h: 8.5
            },
            {
              'name': '材料6',
              y: 6.2,
              h: 6.2
            },
            {
              'name': '材料7',
              y: 0.7,
              h: 0.7
            }
          ].sort((a, b) => a.y - b.y)
        }]
    })
    this.$refs.chart5.setData({
      title: {
        x: 'center',
        y: 'center',
        text: "75%",
        textStyle: {
          color: '#ccc',
          fontSize: 2 * 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.chart6.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],
        },
      ]
    })

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

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

.warehouse {
  background-image: url("../../../assets/board/warehouse1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 18%;
  height: 27.8%;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
}

.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;
}

.table1 {
  position: absolute;
  top: 62.9%;
  left: 3.4%;
  width: 30.2%;
  height: 30%;
  color: #fff;
}

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

.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: 22.5%;
  left: 49.6%;
  width: 23%;
  height: 32%;
}

.chart4 {
  position: absolute;
  top: 22.5%;
  left: 72.7%;
  width: 23%;
  height: 32%;
}

.chart5 {
  position: absolute;
  top: 60.7%;
  left: 40%;
  width: 20vw;
  height: 20vw;
}

.chart6 {
  position: absolute;
  top: 63%;
  left: 66.5%;
  width: 30%;
  height: 32%;
}

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

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