1、调整车间看板页面设备编号背景色随设备状态变化 2、调整车间看板页面设备编号与设备图片之间的距离 3、调整车间看板页面布局方式，将左侧图表区域宽度固...

zhaowei

2025-03-10 4dda1f6c996b493477dd7e48714b87e84e25063c

 src/views/mdc/base/WorkshopSignage.vue

@@ -169,7 +169,6 @@

<style lang="less">
  .full-screen {
    width: 100%;
    height: 1080px;
    background-color: #000;
    display: flex;
@@ -181,12 +180,15 @@
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      /*justify-content: space-between;*/
      align-items: center;
      overflow: auto;
      flex-wrap: nowrap;

      .left-col {
        flex: 1;
        width: 412px;
        flex-shrink: 0;
        /*flex: 1;*/
        height: 100%;
        display: flex;
        padding: 0.5%;
@@ -234,95 +236,14 @@

      .right-col {
        position: relative;
        flex-shrink: 0;
        width: 1500px;
        height: 1080px;
        height: 100%;
        /*background-image: url("../../../assets/WorskhopSignage/103.png");*/
        background-color: #000;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;

        .single-device {
          position: absolute;
          border: 1px solid transparent;
          padding: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          cursor: default;

          &:active {
            border: 1px solid #1890ff;
          }

          .device-status {
            width: 100%;
            height: 100%;
            display: flex;
            -webkit-align-items: flex-end;
            -moz-align-items: flex-end;
            -ms-align-items: flex-end;

            .device-image {
              background-size: 100% 100%;
              background-repeat: no-repeat;
              width: 100%;
              height: 100%;
              position: relative;
              margin-bottom: 10px;

              .status-image {
                position: absolute;
                top: 25%;
                left: 25%;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 50%;
                height: 50%;
              }
            }
          }

          & > div:last-child {
            color: #fff;
            font-weight: bold;
            font-size: 0.6vw;
          }
        }

        .guideline {
          position: absolute;
          border: 1px dashed #fff;
        }

        .guidelineX {
          width: 9999px;
          left: 0;
        }

        .guidelineY {
          top: 0;
          height: 9999px;
        }

        form {
          position: absolute;
          right: 0;
          bottom: 0.5%;

          label {
            color: #fff;
          }

          .ant-switch {
            background-color: #999;
          }

          .ant-switch-checked {
            background-color: #1890FF;
          }
        }
      }
    }
  }