HwJyHbMes/hw-ui/src/views/board/production/secondFloor.vue

<template>
  <div class="app-container">
    <div class="headTitle">京源生产监控平台</div>
    <div class="time">{{
        time
      }}
    </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">
      <Chart key="chart1" ref="chart1"></Chart>
    </div>
    <div class="chart2">
      <div v-for="(i,k) in 10" class="item">
        <div style="top: 25%;left:5%" class="block">人员{{ k }}</div>
        <div style="top: 50%;left:5%" class="block">工序：切割</div>
        <div style="top: 75%;left:5%" class="block">产品计划数量：10000</div>
        <div style="text-align: right;top: 25%;right:5%" class="block">8888</div>
        <div style="text-align: right;top: 50%;right:5%" class="block">88%</div>
        <div style="text-align: right;top: 75%;right:5%;width: 50%;height: 0.8vw" class="block">
          <el-progress :format="()=>{return ''}" :percentage="88"></el-progress>
        </div>
      </div>
    </div>
    <div class="chart3">
      <Chart key="chart3" ref="chart3"></Chart>
    </div>
    <div class="chart4">
      <Chart key="chart4" ref="chart4"></Chart>
    </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]
      },
      time: parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}'),
      title: [
        '工序生产进度',
        '工序名称对比',
        '七日产量对比',
        ' ',
        ' ',
        ' ',
        ' ',
        ' ',
        ' '
      ],
      titlePosition: [
        {
          top: 11.3,
          left: 5.5
        },
        {
          top: 11.3,
          left: 75
        },
        {
          top: 70.3,
          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() {
    setInterval(() => {
      this.time = parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}')
    }, 1000)
    this.getData()

    window.onresize = () => {
      this.$refs.chart1.chart.resize()
      this.$refs.chart3.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
          }
        })
      })
      this.$refs.chart1.setData({
        tooltip: {},
        radar: {
          indicator: [
            { name: '打磨', max: 6500 },
            { name: '折弯', max: 16000 },
            { name: '组装', max: 30000 },
            { name: '下料', max: 38000 },
            { name: '机加', max: 52000 },
            { name: '1', max: 25000 }
          ]
        },
        series: [
          {
            name: '时间',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '时间'
              }
            ]
          }
        ]
      })
      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: [1, 2, 3],
          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: '1',
            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: [1, 2, 3]
          }
        ]
      })

    }
  }
}
</script>
<style lang="less" scoped>

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

.time {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vw;
  color: #eee;
}

.centerImg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 23.96vw;
  background-image: url("../../../assets/board/center.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  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: 51%;
}

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

  position: absolute;
  top: 14.5%;
  left: 3.3%;
  width: 23.8%;
  height: 51%;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

}

.chart3 {
  position: absolute;
  top: 74%;
  left: 3.3%;
  width: 92.8%;
  height: 21%;

}


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

.status {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vw;
  color: #eee;
}

.item {
  position: relative;
  width: 100%;
  height: 5vw;
  border-bottom: 1px solid #ccc2;

  .block {
    position: absolute;
    color: #ccc;
    transform: translateY(-50%);
  }
}
</style>