zs_aucma-mes-ui/src/views/board/week/index.vue

<template>
  <div class="app-container">
    <div class="headTitle">综合安全生产平台</div>
    <div class="title" v-for="(i,k) in title"
         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
      {{ i }}
    </div>
    <!--每日人力出勤-->
    <div class="manpowerAttendance" id="manpowerAttendance">
      <Chart ref="manpowerAttendance"></Chart>
    </div>

    <!--IQC-->
    <div class="IQC" id="IQC"><
      <Chart ref="IQC"></Chart>
    </div>

    <!--生产效率-->
    <div class="productionEfficiency" id="productionEfficiency">
      <Chart ref="productionEfficiency"></Chart>
    </div>


    <!--周质量分析-->
    <div class="equipmentPowerOne" id="equipmentPowerOne">
      <Chart ref="equipmentPowerOne"></Chart>
    </div>
    <div class="equipmentPowerTwo" id="equipmentPowerTwo">
      <Chart ref="equipmentPowerTwo"></Chart>
    </div>
    <div class="equipmentPowerThree" id="equipmentPowerThree">
      <Chart ref="equipmentPowerThree"></Chart>
    </div>
    <div class="equipmentPowerFour" id="equipmentPowerFour">
      <Chart ref="equipmentPowerFour"></Chart>
    </div>
    <div class="equipmentPowerFive" id="equipmentPowerFive">
      <Chart ref="equipmentPowerFive"></Chart>
    </div>

    <!--设备功率-->
    <div class="topLeft" id="topLeft">
      <Chart ref="topLeft"></Chart>
    </div>

  </div>
</template>

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

export default {
  components: {
    vueSeamlessScroll,
    Chart
  },
  name: "Liner",
  data() {
    return {
      title: [
        '产量统计',
        '三日订单执行情况',
        '班组 6s 排行榜',
        '周生产型号统计',
        '周质量分析',
        '安全生产',
      ],
      titlePosition: [
        {
          top: 11.5,
          left: 5.5
        },
        {
          top: 11.5,
          left: 32
        },
        {
          top: 11.5,
          left: 73.5
        },
        {
          top: 55.4,
          left: 5.5
        },
        {
          top: 55.4,
          left: 32
        },
        {
          top: 55.4,
          left: 73.6
        },
      ],
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 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(){
  },
  methods: {}
};
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/week.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;
}

.manpowerAttendance{
  position: absolute;
  width: 25%;
  height: 35%;
  top: 15%;
  left: 71.5%;
}
.IQC{
  position: absolute;
  width: 40%;
  height: 35%;
  top: 15%;
  left: 30%;
}
.productionEfficiency{
  position: absolute;
  width: 25%;
  height: 35%;
  top: 60%;
  left: 3%;
}
.topLeft{
  position: absolute;
  width: 25%;
  height: 34%;
  top: 15.5%;
  left: 3.5%;
}
.equipmentPowerOne{
  position: absolute;
  width: 13%;
  height: 16%;
  top: 60%;
  left: 30.5%;
}
.equipmentPowerTwo{
  position: absolute;
  width: 13%;
  height: 16%;
  top: 60%;
  left: 43.5%;
}
.equipmentPowerThree{
  position: absolute;
  width: 13%;
  height: 16%;
  top: 60%;
  left: 56.5%;
}
.equipmentPowerFour{
  position: absolute;
  width: 19%;
  height: 16%;
  top: 76%;
  left: 30.5%;
}
.equipmentPowerFive{
  position: absolute;
  width: 19%;
  height: 16%;
  top: 76%;
  left: 49.5%;
}
</style>