zs_aucma-mes-ui/src/views/board/pourInto/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="scrollTable">
      <div style="background-color: #094170">
        <div class="scrollTableItem" style="font-weight: bold;">
          编号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          生产工单
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          计划数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          实际数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          差异值
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          完成率
        </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">
              {{ item.name }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="chart11">
      <Chart ref="chart11"></Chart>
    </div>
    <div class="chart12">
      <Chart ref="chart12"></Chart>
    </div>
    <div class="chart13">
      <Chart ref="chart13"></Chart>
    </div>
    <div class="chart14">
      <Chart ref="chart14"></Chart>
    </div>
    <div class="chart15">
      <Chart ref="chart15"></Chart>
    </div>
    <div class="chart16">
      <Chart ref="chart16"></Chart>
    </div>
    <div class="chart2">
      <Chart ref="chart2"></Chart>
    </div>
    <div class="chart3">
      <Chart ref="chart3"></Chart>
    </div>
  </div>
</template>

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

export default {
  components: {
    vueSeamlessScroll,
    Chart
  },
  name: "Liner",
  data() {
    return {
      title: [
        '工单计划',
        '小时统计',
        '异常TOP',
        '合格率统计',
      ],
      titlePosition: [
        {
          top: 11.6,
          left: 5.5
        },
        {
          top: 11.6,
          left: 52.7
        },
        {
          top: 55.5,
          left: 5.5
        },
        {
          top: 55.5,
          left: 52.7
        },
      ],
      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: [
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
      ],

    }
  },
  mounted() {
    this.$refs.chart11.setData(this.option('灌注量'))
    this.$refs.chart12.setData(this.option('标准灌注量'))
    this.$refs.chart13.setData(this.option('灌注压力'))
    this.$refs.chart14.setData(this.option('真空检测时间'))
    this.$refs.chart15.setData(this.option('真空度衰减压力'))
    this.$refs.chart16.setData(this.option('灌注温度'))
    this.$refs.chart2.setData({
      grid: {
        top: "5%",
        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["错误次数", "比例"],
        top: "0%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "err1",
          "err2",
          "err3",
          "err4",
          "err5",
          "err6",
          "err7",
          "其他",
        ],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#01FCE3",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ebf8ac", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          nameTextStyle: {
            color: "#ebf8ac",
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#FFFFFF",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ebf8ac",
            },
          },
        },
        {
          type: "value",
          nameTextStyle: {
            color: "#ebf8ac",
          },
          position: "right",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: "{value} %", //右侧Y轴文字显示
            textStyle: {
              color: "#ebf8ac",
            },
          },
        },
      ],
      series: [
        {
          name: "错误次数",
          type: "bar",
          barWidth: '40%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFE3",
                },
                {
                  offset: 1,
                  color: "#4693EC",
                },
              ]),
            },
          },
          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
        },
        {
          name: "比例",
          type: "line",
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, //平滑曲线显示
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 10, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#058cff",
          },
          lineStyle: {
            color: "#058cff",
          },
          areaStyle: {
            color: "rgba(5,140,255, 0.2)",
          },
          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
        },
      ],
    })
    this.$refs.chart3.setData({
      grid: {
        top: "5%",
        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      legend: {
        data: ["次数"],
        top: "0%",
        textStyle: {
          color: "#ffffff",
        },
      },
      xAxis: {
        data: [
          "err1",
          "err2",
          "err3",
          "err4",
          "err5",
          "err6",
          "err7",
          "其他",
        ],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#01FCE3",
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#ebf8ac", //X轴文字颜色
          },
        },
      },
      yAxis: [
        {
          type: "value",
          name: "亿元",
          nameTextStyle: {
            color: "#ebf8ac",
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#FFFFFF",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ebf8ac",
            },
          },
        },
      ],
      series: [
        {
          name: "次数",
          type: "bar",
          barWidth: '40%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFE3",
                },
                {
                  offset: 1,
                  color: "#4693EC",
                },
              ]),
            },
          },
          data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
        },
      ],
    })
  },
  methods: {
    option(name) {
      return {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "进度",
            type: "gauge",
            center: ['50%', '60%'],
            radius: "65%",
            splitNumber: 0,
            axisLine: {
              lineStyle: {
                color: [
                  [44 / 100, "#468EFD"],
                  [1, "#111F42"],
                ],
                width: 8,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              formatter: function () {
                return `22m\n${name}`;
              },
              offsetCenter: [0, '90%'],
              lineHeight: 16,
              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 12,
                fontWeight: "700",
                color: "#fff",
              },
            },
            title: {
              //标题
              show: true,
              offsetCenter: [0, '100%'], // x, y，单位px
              textStyle: {
                color: "#fff",
                fontSize: 14, //表盘上的标题文字大小
                fontWeight: 400,
                fontFamily: "PingFangSC",
              },
            },
            data: [
              {
                name: " ",
                value: 44,
              },
            ],
            pointer: {
              show: true,
              length: "75%",
              radius: "70%",
              width: 5, //指针粗细
            },
            animationDuration: 4000,
          },
          {
            name: "外部刻度",
            type: "gauge",
            center: ['50%', '60%'],
            radius: "80%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 6, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: "#4d5bd1",
              distance: -14,
              formatter: function (v) {
                return v.toFixed(0)
              },
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 6,
              lineStyle: {
                color: "#468EFD", //用颜色渐变函数不起作用
                width: 1,
              },
              length: -5,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: "#468EFD", //用颜色渐变函数不起作用
              },
            }, //分隔线样式
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
        ],
      }
    }
  }
};
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/pourInto.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: 15%;
  left: 50.6%;
  width: 46%;
  height: 37.5%;
}

.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: 16.6%;
}

.chart11 {
  position: absolute;
  top: 15%;
  left: 3.6%;
  width: 15%;
  height: 15%;
}

.chart12 {
  position: absolute;
  top: 15%;
  left: 18.6%;
  width: 15%;
  height: 15%;
}

.chart13 {
  position: absolute;
  top: 15%;
  left: 33.6%;
  width: 15%;
  height: 15%;
}

.chart14 {
  position: absolute;
  top: 30%;
  left: 3.6%;
  width: 15%;
  height: 15%;
}

.chart15 {
  position: absolute;
  top: 30%;
  left: 18.6%;
  width: 15%;
  height: 15%;
}

.chart16 {
  position: absolute;
  top: 30%;
  left: 33.6%;
  width: 15%;
  height: 15%;
}

.chart2 {
  position: absolute;
  top: 58.5%;
  left: 3.5%;
  width: 46%;
  height: 36%;
}

.chart3 {
  position: absolute;
  top: 58.5%;
  left: 50.5%;
  width: 46%;
  height: 36%;
}
</style>