aucma-mes-ui/src/views/board/finalAssembly/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="title1">班组</div>
    <div class="title2">上线数量</div>

    <div class="nowClass">{{ info.bz }}</div>
    <div class="num">{{ info.sxsl }}</div>

    <div class="info1Title">产品条码： <span style="color: #697bbb"> {{ info.tm }} </span></div>
    <div class="info2Title">扫描时间： <span style="color: #697bbb"> {{ info.sj }} </span></div>
    <div class="info3Title">产品型号： <span style="color: #697bbb"> {{ info.xh }} </span></div>
    <div class="info4Title">订单编号： <span style="color: #697bbb"> {{ info.bh }} </span></div>
    <div class="info5Title">订单数量： <span style="color: #697bbb"> {{ info.ddsl }} </span></div>
    <div class="info6Title">上线数量： <span style="color: #697bbb"> {{ info.sxsl2 }} </span></div>
    <div class="info7Title">提示信息： <span style="color: #0fbc7b"> {{ info.tsxx }} </span></div>

    <div class="scrollTable">
      <div style="background-color: #094170">
        <div class="scrollTableItem" style="font-weight: bold;width:5%">
          序号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width:15%">
          订单号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width:17.5%">
          产品型号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width:12.5%">
          订单数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width:12.5%">
          订单上线数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width:12.5%">
          当日上线数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width:12.5%">
          上线进度
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width:12.5%">
          计划时间
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="scrollTableOption"
        :data="scrollTableData"
        class="case-item"
        style="height: 84%;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:5%">
              {{ index + 1 }}
            </div>
            <div
              class="scrollTableItem" style="width:15%">
              {{ item.value1 }}
            </div>
            <div
              class="scrollTableItem" style="width:17.5%">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem" style="width:12.5%">
              {{ item.value3 }}
            </div>
            <div
              class="scrollTableItem" style="width:12.5%">
              {{ item.value4 }}
            </div>
            <div
              class="scrollTableItem" style="width:12.5%">
              {{ item.value7 }}
            </div>
            <div
              class="scrollTableItem" style="width:12.5%">
              {{ item.value5 }}
            </div>
            <div
              class="scrollTableItem" style="width:12.5%">
              {{ item.value6 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>

    <div class="chart1">
      <Chart ref="chart1"></Chart>
    </div>
    <div class="chart2">
      <Chart ref="chart2"></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";
import {mixData} from "@/api/board/mixData";

export default {
  components: {
    vueSeamlessScroll,
    Chart
  },
  name: "Liner",
  data() {
    return {
      title: [
        '总装上线小时统计',
        '总装上线型号统计',
        '生产统计',
      ],
      titlePosition: [
        {
          top: 31.3,
          left: 5.5
        },
        {
          top: 31.3,
          left: 52.8
        },
        {
          top: 62.2,
          left: 5.5
        },
      ],
      info: {},
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 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: [],
      RequestDataSet: [
        {
          e: 'zzsc-01',
          i: "",
          f: (e) => {
            this.info = e
          }
        },
        {
          e: 'zzsc-02',
          i: "",
          f: (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.x,
                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: "数量",
                  type: "bar",
                  label: {
                    normal: {
                      show: true,
                      formatter: (e) => {
                        if (e.data === 0) {
                          return ''
                        } else {
                          return e.data
                        }
                      },
                      fontSize: 12,
                      fontWeight: "bold",
                      color: "#ffffff",
                      position: "top",
                    },
                  },
                  barWidth: "30%",
                  barMaxWidth: 50,
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "#0bca98",
                        },
                        {
                          offset: 1,
                          color: "#16a144",
                        },
                      ]),
                    },
                  },
                  data: e.y.data,
                },
              ],
            })
          }
        },
        {
          e: 'zzsc-03',
          i: "",
          f: (e) => {
            this.$refs.chart2.setData({
              grid: {
                left: "0",
                right: "4%",
                bottom: '2%',
                top: "10%",
                containLabel: true,
              },
              xAxis: {
                data: e.x,
                axisLine: {
                  lineStyle: {
                    color: "#3d5269",
                  },
                },
                axisLabel: {
                  interval: 0,
                  color: "#fff",
                  fontSize: 14,
                },
              },
              yAxis: {
                nameTextStyle: {
                  color: "#fff",
                  fontSize: 16,
                },
                axisLine: {
                  lineStyle: {
                    color: "#3d5269",
                  },
                },
                axisLabel: {
                  color: "#fff",
                  fontSize: 10,
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#2d3d53",
                  },
                },
                interval: 500,
              },
              series: [
                {
                  type: "bar",
                  barWidth: '40%',
                  barMaxWidth: 50,
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: "#5ef3ff",
                          },
                          {
                            offset: 1,
                            color: "#06a4f4",
                          },
                        ],
                        false
                      ),
                    },
                  },
                  label: {
                    normal: {
                      show: true,
                      fontSize: 12,
                      fontWeight: "bold",
                      color: "#ffffff",
                      position: "top",
                    },
                  },
                  data: e.y.data,
                },
              ],
            })
          }
        },
        {
          e: 'zzsc-04',
          i: "",
          f: (e) => {
            this.scrollTableData = e
          }
        },
      ]

    }
  },
  mounted() {
    this.RequestDataSet.forEach(val => {
      mixData(val)
    })
  },
  methods: {}
};
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/finalAssembly.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;
}


.scrollTable {
  position: absolute;
  top: 66%;
  left: 3.7%;
  width: 92.5%;
  height: 30%;
}


.scrollTableItem {
  color: rgb(185, 186, 192);
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: calc(100% / 8);
}

.chart1 {
  position: absolute;
  top: 34.5%;
  left: 3.6%;
  width: 45.5%;
  height: 22.5%;
}

.chart2 {
  position: absolute;
  top: 34.5%;
  left: 51%;
  width: 45.5%;
  height: 22.5%;
}

.title1 {
  position: absolute;
  top: 12.1%;
  left: 11.3%;
  transform: translate(-50%, -50%);
  font-size: 1.2vw;
  color: #d6eaed;
}

.title2 {
  position: absolute;
  top: 12.1%;
  left: 88.5%;
  transform: translate(-50%, -50%);
  font-size: 1.2vw;
  color: #d6eaed;
  white-space: nowrap;
}

.nowClass {
  position: absolute;
  top: 21%;
  left: 11.3%;
  font-size: 1.8vw;
  letter-spacing: 4px;
  transform: translate(-50%, -50%);
  color: #d6eaed;
}

.num {
  position: absolute;
  top: 21%;
  left: 88.5%;
  transform: translate(-50%, -50%);
  font-size: 3.6vw;
  letter-spacing: 4px;
  color: #d6eaed;
  font-weight: 600;
}

.info1Title {
  position: absolute;
  top: 11.1%;
  left: 23%;
  width: 24%;
  font-size: 1.2vw;
  color: #fff9;
  text-align: left;
}


.info2Title {
  position: absolute;
  top: 11.1%;
  left: 52.7%;
  width: 24%;
  font-size: 1.2vw;
  color: #fff9;
  text-align: left;
}


.info3Title {
  position: absolute;
  top: 14.8%;
  left: 23%;
  width: 24%;
  font-size: 1.2vw;
  color: #fff9;
  text-align: left;
}


.info4Title {
  position: absolute;
  top: 14.8%;
  left: 52.7%;
  width: 24%;
  font-size: 1.2vw;
  color: #fff9;
  text-align: left;
}


.info5Title {
  position: absolute;
  top: 18.4%;
  left: 23%;
  width: 24%;
  font-size: 1.2vw;
  color: #fff9;
  text-align: left;
}

.info6Title {
  position: absolute;
  top: 18.3%;
  left: 52.7%;
  width: 24%;
  font-size: 1.2vw;
  color: #fff9;
  text-align: left;
}


.info7Title {
  position: absolute;
  top: 22%;
  left: 23%;
  width: 24%;
  font-size: 1.2vw;
  color: #fff9;
  text-align: left;
}

</style>