HwJyHbMes/hw-ui/src/views/board/production/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: #094170">
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
          编号
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 36%">
          生产工单
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
          计划数量
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
          实际数量
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
          差异值
        </div>
        <div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
          完成率
        </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)? "#053460":"#032d57") '>
            <div
              class="scrollTableItem" style="width: 12%"
            >
              {{ item.no }}
            </div>
            <div
              class="scrollTableItem" style="width:36%"
            >
              {{ item.orderCode }}
            </div>
            <div
              class="scrollTableItem" style="width: 14%"
            >
              {{ item.planAmount }}
            </div>
            <div
              class="scrollTableItem" style="width: 14%"
            >
              {{ item.completeAmount }}
            </div>
            <div
              class="scrollTableItem" style="width: 12%"
            >
              {{ item.quantityAmount }}
            </div>
            <div
              class="scrollTableItem" style="width: 12%"
            >
              {{ item.finishingRate }}%
            </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="num1 num1_1" style="top: 17%;left: 31.1%;color:#5fc2f2">{{ topData.planAmount[0] }}</div>
    <div class="num1 num1_2" style="top: 17%;left:34.1%;color:#5fc2f2">{{ topData.planAmount[1] }}</div>
    <div class="num1 num1_3" style="top: 17%;left:37%;color:#5fc2f2">{{ topData.planAmount[2] }}</div>
    <div class="num1 num1_4" style="top: 17%;left:40%;color:#5fc2f2">{{ topData.planAmount[3] }}</div>
    <div class="num1 num1_5" style="top: 17%;left:45.6%;color:#59ee7b">{{ topData.completeAmount[0] }}</div>
    <div class="num1 num1_6" style="top: 17%;left:48.6%;color:#59ee7b">{{ topData.completeAmount[1] }}</div>
    <div class="num1 num1_7" style="top: 17%;left:51.5%;color:#59ee7b">{{ topData.completeAmount[2] }}</div>
    <div class="num1 num1_8" style="top: 17%;left:54.5%;color:#59ee7b">{{ topData.completeAmount[3] }}</div>
    <div class="num1 num1_9" style="top: 17%;left:60%;color:#f60008">{{ topData.diff[0] }}</div>
    <div class="num1 num1_10" style="top: 17%;left:63%;color:#f60008">{{ topData.diff[1] }}</div>
    <div class="num1 num1_11" style="top: 17%;left:65.9%;color:#f60008">{{ topData.diff[2] }}</div>
    <div class="num1 num1_12" style="top: 17%;left:68.9%;color:#f60008">{{ topData.diff[3] }}</div>
    <div class="state" :style="`background-color:${LineStatus?'#ffff00':'#ff0000'}`"></div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import Chart from '@/components/board/Chart'
import * as echarts from 'echarts'
import {
  deviceTimeCount,
  dustAnalysis,
  getDayProduction,
  getHourProduction, getLineStatus, selectLatestWorkOrder,
  workOrderProgress
} from '@/api/board/secondFloorProduction'
import { parseTime } from '@/utils/ruoyi'

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  name: 'Board1',
  components: {
    vueSeamlessScroll,
    Chart
  },
  data() {
    return {
      LineStatus: true,
      topData: {
        planAmount: [0, 0, 0, 0],
        completeAmount: [0, 0, 0, 0],
        diff: [0, 0, 0, 0]
      },
      title: [
        '工单计划',
        '小时产量',
        '七日产量对比',
        '粉尘数据走势',
        '设备时长统计',
        '计划数量:',
        '完成数量:',
        '差异值:',
        '产线状态:'
      ],
      titlePosition: [
        {
          top: 11.3,
          left: 5.5
        },
        {
          top: 11.3,
          left: 75
        },
        {
          top: 63,
          left: 5.5
        },
        {
          top: 63,
          left: 30.5
        },
        {
          top: 63,
          left: 75
        },
        {
          top: 11.3,
          left: 30.5
        },
        {
          top: 11.3,
          left: 45
        },
        {
          top: 11.3,
          left: 59.5
        },
        {
          top: 25,
          left: 44
        }
      ],
      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: []
    }
  },
  mounted() {
    this.getData()

    window.onresize = () => {
      this.$refs.chart1.chart.resize()
      this.$refs.chart2.chart.resize()
      this.$refs.chart3.chart.resize()
      this.$refs.chart4.chart.resize()
    }
  },
  methods: {
    getData() {
      workOrderProgress().then(e => {
        this.scrollTableData = e.data.map((v, k) => {
          return {
            no: k + 1,
            orderCode: v.orderCode,
            planAmount: v.planAmount,
            completeAmount: v.completeAmount,
            quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
            finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
          }
        })
      })
      selectLatestWorkOrder().then(e => {
        this.topData.planAmount = [...[0, 0, 0, 0], ...(e.data.planAmount || 0).toString().split('')].slice(-4)
        this.topData.completeAmount = [...[0, 0, 0, 0], ...(e.data.completeAmount || 0).toString().split('')].slice(-4)
        this.topData.diff = [...[0, 0, 0, 0], ...Math.abs((parseFloat(e.data.planAmount) - parseFloat(e.data.completeAmount)) || 0).toString().split('')].slice(-4)
      })
      getLineStatus().then(e => {
        this.LineStatus = e.msg === 'True'
      })
      getHourProduction().then(e => {
        this.$refs.chart1.setData({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '0',
            right: '4%',
            bottom: '0',
            top: 20,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: e.data.map(v => v.hour),
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              textStyle: {
                fontFamily: 'Microsoft YaHei'
              }
            }
          },

          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {}
          },
          series: [
            {
              name: '数量',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#a8aab0',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 0.75 * vw
                  }
                }
              },
              type: 'bar',
              barWidth: '30%',
              barMaxWidth: 50,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#39ffff'
                    },
                    {
                      offset: 1,
                      color: '#5affa6'
                    }
                  ])
                }
              },
              data: e.data.map(v => v.amount)
            }
          ]
        })
      })
      getDayProduction().then(e => {
        this.$refs.chart2.setData({
          grid: {
            top: 30,
            left: '2%',
            right: '5%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: e.data.map(v => v.day),
            axisLabel: {
              margin: 10,
              color: '#ffffff63'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#ffffff1f'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#ffffff1f'
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                margin: 10,
                color: '#ffffff63'
              },

              axisTick: {
                show: true,
                lineStyle: {
                  color: '#ffffff1f'
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  type: 'dashed',
                  color: '#ffffff1f'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              }
            }
          ],
          series: [
            {
              name: '产量',
              type: 'line',
              smooth: true, //是否平滑曲线显示
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#fff' // 线条颜色
                }
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                color: 'red',
                borderColor: '#fff',
                borderWidth: 3
              },
              tooltip: {
                show: false
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#eb64fb'
                      },
                      {
                        offset: 1,
                        color: '#3fbbff0d'
                      }
                    ],
                    false
                  )
                }
              },
              data: e.data.map(v => v.instock_amount)
            }
          ]
        })
      })
      dustAnalysis().then(e => {
        this.$refs.chart3.setData({
          grid: {
            top: 30,
            left: '2%',
            right: '5%',
            bottom: '2%',
            containLabel: true
          },
          legend: {
            textStyle: {
              color: '#fff'
            }
          },

          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: e.data.map(v => parseTime(v.recodeTime)),
            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: '#fff',
                  width: 2
                }
              }
            }
          ],
          series: [
            {
              name: 'pm1',
              type: 'line',
              smooth: true, //是否平滑曲线显示
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#fff' // 线条颜色
                }
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                color: 'red',
                borderColor: '#fff',
                borderWidth: 3
              },
              tooltip: {
                // show: false,
              },
              data: e.data.map(v => v.pm1)
            },
            {
              name: 'pm2',
              type: 'line',
              smooth: true, //是否平滑曲线显示
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#f0f' // 线条颜色
                }
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                color: 'red',
                borderColor: '#fff',
                borderWidth: 3
              },
              tooltip: {
                // show: false,
              },
              data: e.data.map(v => v.pm2)
            },
            {
              name: 'pm10',
              type: 'line',
              smooth: true, //是否平滑曲线显示
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#ff0' // 线条颜色
                }
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                color: 'red',
                borderColor: '#fff',
                borderWidth: 3
              },
              tooltip: {
                // show: false,
              },
              data: e.data.map(v => v.pm10)
            }
          ]
        })
      })
      deviceTimeCount().then(e => {
        console.log(e)
        this.$refs.chart4.setData({
          grid: {
            top: 30,
            left: '2%',
            right: '5%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: e.data.map(v => parseTime(v.hour)),
            axisLabel: {
              margin: 10,
              color: '#ffffff63'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#ffffff1f'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: 'dashed',
                color: '#ffffff1f'
              }
            }
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                margin: 10,
                color: '#ffffff63'
              },

              axisTick: {
                show: true,
                lineStyle: {
                  color: '#ffffff1f'
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  type: 'dashed',
                  color: '#ffffff1f'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: 2
                }
              }
            }
          ],
          series: [
            {
              name: '产量',
              type: 'line',
              smooth: true, //是否平滑曲线显示
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#fff' // 线条颜色
                }
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                color: 'red',
                borderColor: '#fff',
                borderWidth: 3
              },
              tooltip: {
                show: false
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: '#eb64fb'
                      },
                      {
                        offset: 1,
                        color: '#3fbbff0d'
                      }
                    ],
                    false
                  )
                }
              },
              data: e.data.map(v => v.timeCount)
            }
          ]
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>

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

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

.table1 {
  position: absolute;
  top: 14.5%;
  left: 3.3%;
  width: 23.8%;
  height: 45.5%;
  color: #fff;
  font-size: 0.8vw
}

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

.chart1 {
  position: absolute;
  top: 14.5%;
  left: 73%;
  width: 23.8%;
  height: 45.5%;
}

.chart2 {
  position: absolute;
  top: 66%;
  left: 3.3%;
  width: 23.8%;
  height: 29%;

}

.chart3 {
  position: absolute;
  top: 66%;
  left: 28.4%;
  width: 43.1%;
  height: 29%;

}

.chart4 {
  position: absolute;
  top: 66%;
  left: 73%;
  width: 23.8%;
  height: 29%;

}

.state {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 25%;
  left: 50%;
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
  background-color: #ffff00;
}
</style>