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

<script src="../../../router/index.js"></script>
<template>
  <div class="app-container">
    <div class="headTitle">数字化注塑车间管控中心</div>
    <div class="centerDevice"></div>
    <div class="text1" style="top: 14.7%;left: 5.5%;">今日计划数: <span style="color: #6ACBFD">432</span></div>
    <div class="text1" style="top: 14.7%;left: 16.8%;">今日完成数: <span style="color: #68FD82">432</span></div>
    <div class="text1" style="top: 24%;left: 5.5%;">今日差异数: <span style="color: #FEF16A">432</span></div>
    <div class="text1" style="top: 24%;left: 16.8%;">今日完成率: <span style="color: #69CBFE">98%</span></div>
    <div class="text1" style="top: 12%;left: 29%;">今日用水(t):</div>
    <div class="text1" style="top: 12%;left: 44%;">今日用电(kwh):</div>
    <div class="text1" style="top: 12%;left: 59%;">今日用气(m³):</div>
    <div class="text1" style="top: 19.1%;left: 75%;">正常: <span style="color: #6AFD81">300</span></div>
    <div class="text1" style="top: 19.1%;left: 82.4%;">告警: <span style="color: #FFF46C">01</span></div>
    <div class="text1" style="top: 19.1%;left: 89.8%;">停机: <span style="color: #F9241F">01</span></div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 30.05%;">1</div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 32.55%;">2</div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 35.05%;">3</div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 37.55%;">4</div>
    <div class="num1" style="color:#63CDFA;top: 17%;left: 40.05%;">5</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 45.05%;">6</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 47.55%;">7</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 50.05%;">8</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 52.55%;">9</div>
    <div class="num1" style="color:#69FD80;top: 17%;left: 55.05%;">0</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 60.05%;">1</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 62.55%;">2</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 65.05%;">3</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 67.55%;">4</div>
    <div class="num1" style="color:#FEF26A;top: 17%;left: 70.05%;">5</div>
    <div class="text2" style="top: 12.7%;left: 84.7%;">设备总数: <span style="color: #68CBFF">320</span></div>
    <div class="text2" style="top: 41%;left: 84.7%;">总维修次数: <span style="color: #EF241E">257</span></div>
    <div class="text3" style="top: 35.15%;left: 5.5%;">工单进度</div>
    <div class="text3" style="top: 35.15%;left: 75%;">维修分析</div>
    <div class="text3" style="top: 63.05%;left: 5.5%;">质量追溯</div>
    <div class="text3" style="top: 63.05%;left: 30.2%;">设备分析</div>
    <div class="text3" style="top: 63.05%;left: 75%;">告警趋势</div>
    <div class="deviceError">
      <div class="icon"></div>
      <div class="text" style="left: 18%">设备1#</div>
      <div class="text" style="left: 42%;color: #F42223">产品未顶出</div>
      <div class="text" style="left: 75%">66:66:66</div>
    </div>

    <div class="scrollTable">
      <div style="background-color: #05346044">
        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
          型号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
          计划数
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
          完成数
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
          差异数
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
          执行进度
        </div>
      </div>
      <vue-seamless-scroll
          :class-option="scrollTableOption"
          :data="scrollTableData"
          class="case-item"
          style="height: calc(100% - 20px - 1vw - 0.4vw);overflow: hidden;"
      >
        <div
            v-for="(item, index) in scrollTableData"
            :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#05346022":"#05346044") '>
            <div
                class="scrollTableItem" style="width: 25%">
              {{ item.value1 }}
            </div>
            <div
                class="scrollTableItem" style="width: 16.66%">
              {{ item.value2 }}
            </div>
            <div
                class="scrollTableItem" style="width: 16.66%">
              {{ item.value3 }}
            </div>
            <div
                class="scrollTableItem" style="width: 16.66%">
              {{ item.value4 }}
            </div>
            <div
                class="scrollTableItem" style="width: 25%">
              {{ item.value5 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="repairTimes">
      <div class="item" v-for="i in 3">
        <div class="num">{{ i }}</div>
        <div class="deviceName">SC-228NE</div>
        <div class="schedule">
          <div class="progressBar" :style="{width: 100 - ((i-1) * 10) + '%'}"></div>
        </div>
        <div class="times">{{ 10 - i + 1 }}次</div>
      </div>
    </div>
    <div class="chart1">
      <Chart ref="chart1"></Chart>
    </div>
    <div class="chart4">
      <Chart ref="chart4"></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.vue";
import * as echarts from "echarts";

const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  components: {
    vueSeamlessScroll, Chart
  },
  name: "Liner",
  data() {
    return {
      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,
      },
    }
  },
  mounted() {
    const dataMap = {
      '合格数': 100,
      '不合格数': 100
    }
    this.$refs.chart1.setData({
      title: {
        y: 'center',
        left: '60%',
        text: `{dot1|●} {name|合格数} ：{value|1000}\n\n\n{dot2|●} {name|不合格数} ：{value|100}`,
        textStyle: {
          color: '#ffffff',
          rich: {
            dot1: {
              fontSize: 0.9 * vw,
              color: '#ffffff',
            },
            dot2: {
              fontSize: 0.9 * vw,
              color: '#4E97FF',
            },
            name: {
              color: '#fff',
              fontSize: 1 * vw,
            },
            value: {
              color: '#fff',
              fontSize: 1.1 * vw,
              fontWeight: '800',
            }
          }
        }
      },
      series: [
        {
          type: "pie",
          center: ["30%", "50%"],
          radius: ['57%', '63%'],
          itemStyle: {
            color: '#fff4'
          },
          labelLine: {
            show: false
          },
          data: [1]
        },
        {
          type: "pie",
          label: {
            show: false,
          },
          center: ["30%", "50%"],
          radius: ['54%', '66%'],
          clockwise: false,
          labelLine: {
            show: false
          },
          itemStyle: {
            color: '#4E97FF'
          },
          data: [
            {
              value: 15,
              name: '不合格数',
              itemStyle: {
                color: '#4E97FF',
                borderColor: '#000',
                borderWidth: 2
              },
            },
            {
              value: 85,
              name: '合格数',
              itemStyle: {
                color: '#0000',
              },
            },
          ]
        },
      ]
    })
    this.$refs.chart4.setData({
      radar: {
        center: ["30%", "50%"],
        radius: '40%',
        shape: 'circle',
        splitNumber: 1,
        splitLine: {
          lineStyle: {
            color: '#fff4',
            width: 1
          }
        },
        splitArea: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisNameGap: 3,
        axisName: {
          rotation: 90,
          rotate: 90,
          fontSize: 8,
          color: '#ddd',
        },
        indicator: Array(8).fill(0).map((item, index) => {
          return {name: '产品' + (index + 1), index, max: 100}
        }),
      },
      series: [
        {
          name: ' ',
          type: 'radar',
          symbolSize: 3,
          itemStyle: {
            color: '#FBFCFC'
          },
          lineStyle: {
            color: '#478EEE',
            width: 1,
          },
          data: [
            {
              value: Array(8).fill(0).map((item, index) => {
                return 90 + Math.floor(Math.random() * 10);
              }),
              name: 'Allocated Budget',
              areaStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {offset: 0, color: '#fff0'},
                    {offset: 1, color: '#4C92F266'}
                  ]
                },
              }
            }
          ]
        }
      ]
    })
    let barData = Array(8).fill(0).map((item, index) => {
      return 5 + Math.floor(Math.random() * 8);
    })
    this.$refs.chart2.setData({
      xAxis: {
        data: Array(8).fill(0).map((item, index) => 'SC-228NE'),
        axisLine: {
          lineStyle: {
            color: '#377097',
          }
        },
        axisLabel: {
          fontSize: 14,
          interval: 0,
          color: '#4C95C1',
        },
        axisTick: {
          lineStyle: {
            color: '#37709799',
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#37709799',
            type: 'dashed',
          }
        }
      },
      yAxis: {
        max: 25,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#377097',
          }
        },
        axisLabel: {
          fontSize: 14,
          color: '#4C95C1',
        },
        axisTick: {
          show: true,
          alignWithLabel: true,
          lineStyle: {
            color: '#37709799',
          }
        },
        splitLine: {
          show: true,
          alignWithLabel: true,
          lineStyle: {
            color: '#37709799',
            type: 'dashed',
          }
        }
      },
      grid: {
        top: 20,
        right: 20,
        bottom: 40,
        left: 50
      },
      series: [
        {
          name: " ",
          type: "bar",
          barWidth: '50%',
          barMaxWidth: '34',
          barMinWidth: '20',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#2B90D1CC'},
                  {offset: 1, color: '#0D2DD7'}
                ]
            ),
            borderColor: '#fff6',
            borderWidth: 1
          },
          tooltip: {
            show: false,
          },
          label: {
            show: true,

            distance: 10,
            fontSize: 16,
            color: '#66C7FA',
            position: 'top',
          },
          data: barData,
        },
        {
          type: 'pictorialBar',
          symbol: 'circle',           // 👈 圆形（通过拉伸变成椭圆）
          barWidth: '50%',
          barMaxWidth: '34',
          barMinWidth: '20',
          symbolSize: ['100%', 4],        // [宽, 高] → 椭圆
          symbolPosition: 'end',       // 在柱体顶部
          symbolOffset: [0, -2],       // 微调位置（向上）
          z: 10,
          itemStyle: {
            color: '#0D2DD7'
          },
          data: barData,
        }
      ],
    })
    this.$refs.chart3.setData({
      xAxis: {
        data: ["13:00:00", "13:01:00", "13:02:00", "13:03:00", "13:04:00", '13:05:00'],
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: '#377097',
          }
        },
        axisLabel: {
          fontSize: 12,
          interval: 0,
          color: '#4C95C1',
        },
        axisTick: {
          alignWithLabel: true,
          lineStyle: {
            color: '#37709799',
          }
        },
        splitLine: {
          show: true,
          alignWithLabel: true,
          lineStyle: {
            color: '#37709799',
            type: 'dashed',
          }
        }
      },
      yAxis: {
        max: 10,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#377097',
          }
        },
        axisLabel: {
          fontSize: 14,
          color: '#4C95C1',
        },
        axisTick: {
          show: true,
          alignWithLabel: true,
          lineStyle: {
            color: '#37709799',
          }
        },
        splitLine: {
          show: true,
          alignWithLabel: true,
          lineStyle: {
            color: '#37709799',
            type: 'dashed',
          }
        }
      },
      grid: {
        top: 20,
        right: 20,
        bottom: 40,
        left: 50
      },
      series: [
        {
          type: "line",
          symbolSize: 5,
          symbol: 'circle',
          itemStyle: {
            color: '#FBFFFA',      // 点填充颜色
            borderColor: '#D8080C',   // 点边框颜色
            borderWidth: 2         // 边框宽度
          },
          lineStyle: {
            color: '#CE0F06',      // 折线颜色
            width: 2
          },
          label: {
            show: false,
          },
          data: Array(6).fill(0).map((item, index) => {
            let num = Math.floor(Math.random() * 2) + 2
            return Math.max(num, 0)
          })
        },
      ],
    })
  },
  methods: {},
  computed: {
    scrollTableData() {
      return Array(222).fill(0).map(i => {
        return {
          value1: Math.ceil(Math.floor(Math.random() * 100)) + 'WD',
          value2: Math.ceil(Math.floor(Math.random() * 100)),
          value3: Math.ceil(Math.floor(Math.random() * 100)),
          value4: Math.ceil(Math.floor(Math.random() * 100)),
          value5: Math.ceil(Math.floor(Math.random() * 100)) + '%',
        }
      })
    }
  },
  beforeDestroy() {
  }
};

</script>
<style scoped lang="less">
.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 0.3vw;
}

.app-container {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../../../assets/board/boardBg3.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}

.text1 {
  position: absolute;
  transform: translateY(-50%);
  letter-spacing: 0.1vw;
  font-size: 0.9vw;
  color: #fff;
}

.text2 {
  position: absolute;
  transform: translate(-50%, -50%);
  letter-spacing: 0.1vw;
  font-size: 1.1vw;
  color: #fff;
}

.text3 {
  position: absolute;
  transform: translateY(-50%);
  letter-spacing: 0.1vw;
  font-size: 1.1vw;
  color: #fff;
}

.num1 {
  position: absolute;
  transform: translate(-50%, -50%);
  letter-spacing: 0.1vw;
  font-size: 1.3vw;
  color: #eee;
}

.centerDevice {
  position: absolute;
  top: 22%;
  left: 28.6%;
  width: 42.9%;
  height: 24.13vw;
  background-image: url("../../../assets/board/device.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.deviceError {
  position: absolute;
  top: 24.5%;
  left: 74%;
  width: 21.5vw;
  height: 2.275vw;
  background-image: url("../../../assets/board/errorBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .icon {
    position: absolute;
    top: 50%;
    left: 9%;
    transform: translate(-50%, -50%);
    width: 1.32vw;
    height: 1.2vw;
    background-image: url("../../../assets/board/errorIcon.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 0.1vw;
    font-size: 0.8vw;
    color: #fff;
  }
}

.scrollTable {
  position: absolute;
  top: 38%;
  left: 3.3%;
  width: 23.8%;
  height: 20%;
}

.scrollTableItem {
  color: #65CDF9;
  margin: auto 0px;
  padding: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: 10%;
  font-size: 1vw;
}

.repairTimes {
  position: absolute;
  top: 44%;
  left: 72.8%;
  width: 23.8%;
  height: 14.3%;

  .item {
    width: 100%;
    height: 33.33%;
    position: relative;

    .num {
      position: absolute;
      top: 50%;
      left: 8%;
      width: 1vw;
      height: 1vw;
      font-size: 0.8vw;
      text-align: center;
      transform: translate(-50%, -50%);
      line-height: calc(1vw - 2px);
      color: #1B61D8;
      background-color: #092C52;
      border: 1px solid #0D598F;
    }

    .deviceName {
      position: absolute;
      top: 50%;
      left: 15%;
      font-size: 0.8vw;
      transform: translateY(-50%);
      color: #fff;
    }

    .schedule {
      position: absolute;
      top: 50%;
      left: 35%;
      transform: translateY(-50%);
      width: 50%;
      height: 8px;
      border-radius: 4px;
      background-color: #172B47;
      overflow: hidden;

      .progressBar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(to right, #1068E4, #4E99FF);
      }
    }

    .times {
      position: absolute;
      top: 50%;
      left: 87%;
      font-size: 0.8vw;
      transform: translateY(-50%);
      color: #60BAEA;
    }
  }
}

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

.chart2 {
  position: absolute;
  top: 66%;
  left: 28%;
  width: 44%;
  height: 29%;
}

.chart3 {
  position: absolute;
  top: 66%;
  left: 72.8%;
  width: 23.8%;
  height: 29%;
}

.chart4 {
  position: absolute;
  top: 66%;
  left: 3.3%;
  width: 23.8%;
  height: 29%;
}
</style>