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="chart1">
      <HighChart key="chart1" ref="chart1"></HighChart>
    </div>
    <div class="chart2">
      <HighChart key="chart2" ref="chart2"></HighChart>
    </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.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="table2">
      <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;">
          Bom分解
        </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="num1 num1_1" style="top: 11.9%;left: 13.4%;color:#5fc2f2">1</div>
    <div class="num1 num1_2" style="top: 11.9%;left:15.7%;color:#5fc2f2">0</div>
    <div class="num1 num1_3" style="top: 11.9%;left:18%;color:#5fc2f2">0</div>
    <div class="num1 num1_4" style="top: 11.9%;left:20.4%;color:#5fc2f2">0</div>

    <div class="num1 num1_5" style="top: 11.9%;left:32.2%;color:#59ee7b">1</div>
    <div class="num1 num1_6" style="top: 11.9%;left:34.6%;color:#59ee7b">0</div>
    <div class="num1 num1_7" style="top: 11.9%;left:36.9%;color:#59ee7b">0</div>
    <div class="num1 num1_8" style="top: 11.9%;left:39.2%;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 class="num1 num1_13" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
    <div class="num1 num1_14" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
    <div class="num1 num1_15" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
    <div class="num1 num1_16" style="top: 11.9%;left:93.1%;color:#f60008">0</div>

    <div class="num1 num1_17" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
    <div class="num1 num1_18" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
    <div class="num1 num1_19" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
    <div class="num1 num1_20" style="top: 11.9%;left:93.1%;color:#f60008">0</div>

  </div>
</template>

<!--// 柱状图 每个烘房耗电量 x轴 保留 - 后的 y轴 expend-->
<!--  质量接口 柱状图 +折线图 合格率和数量   -->

<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: 3.5
        },
        {
          top: 11.5,
          left: 22.5
        },
        {
          top: 11.5,
          left: 41.3
        },
        {
          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: 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({
      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: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"],
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: "Microsoft YaHei",
          },
        },
      },

      yAxis: {
        type: "value",
        max: "1200",
        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: [400, 400, 300, 300, 300, 400, 400, 400, 300],
        },
        {
          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: [400, 500, 500, 500, 500, 400, 400, 500, 500],
        },
      ],
    })

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

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


.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: 50.4%;
  width: 46%;
  height: 32%;
}


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

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

.table1 {
  position: absolute;
  top: 52.9%;
  left: 3.4%;
  width: 45.7%;
  height: 40%;
  color: #fff;
}
.table2 {
  position: absolute;
  top: 52.9%;
  left: 50.4%;
  width: 45.7%;
  height: 40%;
  color: #fff;
}

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

</style>