kd-aiot-frontend-vis/src/views/bpm/vis-page/equipmentOperation.vue

<template>
  <vue-fullscreen
    class="box-container"
    v-model="isFullscreen"
    fullscreenClass="box-container"
    :exit-on-click-wrapper="false"
    v-cloak
  >
    <div class="box-container">
      <div class="box-header">
        <div class="logo">
          <!-- <img src="../../../assets/logo_1.png" alt="" />
          <span>株硬集团型材分公司</span> -->
        </div>
        <div class="title"> 设备运维看板 </div>
        <div class="time">
          <span
            style="color: #7fa7ce; margin: 5px 10px 15px 0; cursor: pointer"
            @click.passive="onFullscreen"
          >
            <i
              v-if="isFullscreen"
              title="取消全屏"
              class="el-icon-_screen-restore"
            ></i>
            <i v-else title="全屏" class="el-icon-_screen-full"></i>
          </span>
          <div style="margin-right: 10px">
            <span style="color: #7fa7ce">{{ date }}</span>
            <span style="color: rgb(210 215 221); padding: 0 5px">{{
              time
            }}</span>
            <span style="color: #7fa7ce">{{ week }} </span>
          </div>
        </div>
      </div>
      <div class="top_bar">
        <div class="runDeviceInfo">
          <div
            >运行<span style="">{{ totalData.runNum }}</span
            >台</div
          >
        </div>
        <div class="repaireInfo">
          <div
            >计划维修<span style="">{{ totalData.planMaintenanceNum }}</span
            >台</div
          >
        </div>
        <div class="repaireInfo1">
          <div
            >保养<span style="">{{ totalData.maintenanceNum }}</span
            >台</div
          >
        </div>
        <div class="faultDeviceInfo">
          <div
            >故障维修<span>{{ totalData.malfunctionNum }}</span
            >台</div
          >
        </div>
      </div>
      <div class="list_item margin-bt20">
        <div class="table_bar">
          <div class="title">
            <div>
              <span>巡点检：</span>
              <span class="blue">{{
                getSalesFinishListLength('xdjList')
              }}</span>
            </div>
          </div>
          <div class="table"> </div>
          <dv-scroll-board
            v-if="isFlag"
            :config="xdjListConfig"
            style="width: 90%; height: 87%; transform: translate(5%, 1%)"
          />
        </div>
        <div class="table_bar">
          <div class="title">
            <div>
              <span>保养：</span>
              <span class="blue">{{ getSalesFinishListLength('byList') }}</span>
            </div>
          </div>
          <div class="table"> </div>
          <dv-scroll-board
            v-if="isFlag"
            :config="byListConfig"
            style="width: 90%; height: 87%; transform: translate(5%, 1%)"
          />
        </div>
      </div>
      <div class="list_item">
        <div class="table_bar">
          <div class="title">
            <div>
              <span>故障维修：</span>
              <span class="blue">{{
                getSalesFinishListLength('gzwxList')
              }}</span>
            </div>
          </div>
          <div class="table"> </div>
          <dv-scroll-board
            v-if="isFlag"
            :config="gzwxListConfig"
            style="width: 90%; height: 87%; transform: translate(5%, 1%)"
          />
        </div>
        <div class="table_bar">
          <div class="title">
            <div>
              <span>计划性维修：</span>
              <span class="blue">{{
                getSalesFinishListLength('jhwxList')
              }}</span>
            </div>
          </div>
          <div class="table"> </div>
          <dv-scroll-board
            v-if="isFlag"
            :config="jhwxListConfig"
            style="width: 90%; height: 87%; transform: translate(5%, 1%)"
          />
        </div>
      </div>
    </div>

    <!--    <button type="button" @click="toggle">{{ fullscreen?"退出":"进入" }}全屏</button>-->
  </vue-fullscreen>
</template>

<script>
  import dvBorderContent from './dv-border-content.vue';
  import { component } from 'vue-fullscreen';
  import { screenSubstanceGroupQuery } from '@/api/equipment';
  export default {
    name: 'index',
    components: {
      dvBorderContent,
      VueFullscreen: component
    },
    computed: {
      contentWidth() {
        return this.$store.state.theme.contentWidth;
      },
      getSalesFinishListLength() {
        return (key) => this.totalData[key]?.length;
      },
      getSalesFinishList() {
        return (key) => {
          return {
            header: this.tableHeader.map(
              (item) =>
                `<div style="color: #0577FF;font-size: 1.3rem;font-weight: bold">${item}</div>`
            ),
            data:
              this.totalData[key]?.map((item) => {
                let list = [];
                for (let i in item) {
                  let div = '';
                  if (i === 'workOrderNo') {
                    div = `<div class="white ellipsis" style="font-size: 1.3rem;" title='${item[i]}'>${item[i]}</div>`;
                    list[0] = div;
                  }
                  if (i === 'deviceName') {
                    div = `<div class="white ellipsis" style="font-size: 1.3rem;" title='${item[i]}'>${item[i]}</div>`;
                    list[1] = div;
                  }
                  if (i === 'repairUserName') {
                    div = `<div class="white" style="font-size: 1.3rem;">${item[i]}</div>`;
                    list[2] = div;
                  }
                  if (i === 'orderStatusString') {
                    div = `<div class="${this.getColor(
                      item[i]
                    )}" style="font-size: 1.3rem;">${item[i]}</div>`;
                    list[3] = div;
                  }
                  if (i === 'delayTime') {
                    div = `<div class="white" style="font-size: 1.3rem;">${item[i]}</div>`;
                    list[4] = div;
                  }
                }
                return list;
              }) ?? []
          };
        };
      }
    },
    watch: {
      isFullscreen: {
        handler() {
          this.isFlag = false;
          this.$nextTick(() => {
            let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
              document.documentElement;
            let eleAdminHeaderHeight =
              (!this.isFullscreen &&
                document.getElementsByClassName('ele-admin-header')[0]
                  ?.offsetHeight) ||
              0;
            let eleAdminSidebarWidth =
              (!this.isFullscreen &&
                document.getElementsByClassName('ele-admin-sidebar')[0]
                  ?.offsetWidth) ||
              0;
            let eleAdminTabsWidth =
              (!this.isFullscreen &&
                document.getElementsByClassName('ele-admin-tabs')[0]
                  ?.offsetHeight) ||
              0;

            const setContainerSize = (item) => {
              item.style.height =
                deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
              item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
            };
            let boxContainer = [
              ...document.getElementsByClassName('box-container')
            ];
            boxContainer.forEach(setContainerSize);

            document.documentElement.style.fontSize = this.isFullscreen
              ? '18px'
              : '16px';
            this.isFlag = true;
          });
        },
        immediate: true
      },
      contentWidth: {
        handler() {
          this.isFlag = false;
          this.$nextTick(() => {
            let { clientWidth: deviceWidth, clientHeight: deviceHeight } =
              document.documentElement;
            let eleAdminHeaderHeight =
              (!this.isFullscreen &&
                document.getElementsByClassName('ele-admin-header')[0]
                  ?.offsetHeight) ||
              0;
            let eleAdminSidebarWidth =
              (!this.isFullscreen &&
                document.getElementsByClassName('ele-admin-sidebar')[0]
                  ?.offsetWidth) ||
              0;
            let eleAdminTabsWidth =
              (!this.isFullscreen &&
                document.getElementsByClassName('ele-admin-tabs')[0]
                  ?.offsetHeight) ||
              0;
            const setContainerSize = (item) => {
              item.style.height =
                deviceHeight - eleAdminHeaderHeight - eleAdminTabsWidth + 'px';
              item.style.width = deviceWidth - eleAdminSidebarWidth + 'px';
            };
            let boxContainer = [
              ...document.getElementsByClassName('box-container')
            ];
            boxContainer.forEach(setContainerSize);
            document.documentElement.style.fontSize = this.isFullscreen
              ? '18px'
              : '16px';
            this.isFlag = true;
          });
        },
        immediate: true
      }
    },
    deactivated() {
      clearInterval(this.updateTimer);
    },
    data() {
      return {
        totalData: {},
        isFullscreen: false, // 是否是全屏
        isFlag: false, // 是否展示图表
        date: '',
        time: '',
        week: '',
        signedTotal: 0,
        deliveryTotal: 0,
        salesTotal: 0,
        WeightGainTotal: 0,
        WeightStorageTotal: 0,
        salesChart: null,
        outputChart: null,
        tableHeader: ['工单号', '设备名称', '负责人', '状态', '响应时间'],
        config: {
          align: ['center', 'center', 'center', 'center', 'center', 'center'],
          headerBGC: '#031d42',
          columnWidth: [220, 250, 150, 100, 200],
          headerHeight: 30,
          oddRowBGC: '#031d42',
          evenRowBGC: '#031d42',
          waitTime: 5000,
          rowNum: 8
        },
        xdjListConfig: {},
        byListConfig: {},
        gzwxListConfig: {},
        jhwxListConfig: {}
      };
    },
    created() {
      // window.isFullscreen = false

      this.updateTimer = setInterval(this.updateTime, 1000);
    },
    mounted() {
      // this.getSalesFinishList();
      // setInterval(() => {
      //   this.getSalesFinishList();
      // }, 3600000);
      screenSubstanceGroupQuery().then((data) => {
        this.totalData = data;

        this.xdjListConfig = {
          ...this.config,
          ...this.getSalesFinishList('xdjList')
        };
        this.byListConfig = {
          ...this.config,
          ...this.getSalesFinishList('byList')
        };
        this.gzwxListConfig = {
          ...this.config,
          ...this.getSalesFinishList('gzwxList')
        };
        this.jhwxListConfig = {
          ...this.config,
          ...this.getSalesFinishList('jhwxList')
        };
        // { ..., ...config }
      });
    },
    methods: {
      getColor(val) {
        // 0: '待接收',
        //   1: '已接收',
        //   2: '执行中',
        //   3: '待验收',
        //   4: '已完成'
        if (val == '待接收') {
          return 'white';
        }
        if (val == '已接收') {
          return 'yellow';
        }
        if (val == '执行中') {
          return 'green';
        }
        if (val == '待验收') {
          return 'red';
        }
      },
      fomatFloat(num, n) {
        var f = parseFloat(num);
        if (isNaN(f)) {
          return false;
        }
        f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
        var s = f.toString();
        var rs = s.indexOf('.');
        //判定如果是整数，增加小数点再补0
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + n) {
          s += '0';
        }
        return s;
      },
      /* 全屏切换 */
      onFullscreen() {
        this.isFullscreen = !this.isFullscreen;
      },
      //
      // async getSalesFinishList() {
      //   this.totalData
      //   this.config = {

      //   };
      // },
      //实时更新日期
      updateTime() {
        let now = new Date();
        let hours = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();
        this.time =
          hours.toString().padStart(2, '0') +
          ':' +
          minutes.toString().padStart(2, '0') +
          ':' +
          seconds.toString().padStart(2, '0');

        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        this.date = year + '年' + month + '月' + day + '日';

        let weekInfo = {
          1: '一',
          2: '二',
          3: '三',
          4: '四',
          5: '五',
          6: '六',
          0: '日'
        };
        this.week = '星期' + weekInfo[now.getDay()];
      }
    }
  };
</script>
<style lang="scss" scoped>
  .box-container {
    font-size: 16px;
    font-family: 'AlibabaPuHuiTi';

    background: #031d42;
    display: flex;
    flex-direction: column;

    .box-header {
      background-image: url('@/assets/border2.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      width: 100% !important;
      height: 10%;
      justify-content: space-between;

      .title {
        font-family: '优设标题黑';
        font-size: 2.75rem;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        transform: translateY(-10%);
        letter-spacing: 0.4rem;
      }

      .logo {
        display: inline-block;
        width: 20%;
        display: flex;
        align-items: center;
        > img {
          width: 6.48rem;
          height: 3rem;
        }
        > span {
          color: #fff;
          font-size: 1rem;
          font-weight: bold;
        }
      }

      .time {
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        font-size: 0.8rem;
      }
    }

    .top_bar {
      height: 8.625rem;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: space-around;
      > div {
        width: 25.77rem;
        max-width: 24%;
        height: 6.27rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        line-height: 6.27rem;
        display: flex;
        align-items: center;
        justify-content: center;
        > div {
          font-family: '优设标题黑';
          font-size: 2.3rem;
          color: #fff;
          > span {
            color: #00c1fd;
          }
        }
      }
      .runDeviceInfo {
        background-image: url('@/assets/successInfo.png');
      }
      .repaireInfo {
        background-image: url('@/assets/runDevice.png');
      }
      .repaireInfo1 {
        background-image: url('@/assets/runDevice.png');
      }
      .faultDeviceInfo {
        background-image: url('@/assets/faultDevice.png');
        > div {
          span {
            color: #f26e6c;
          }
        }
      }
    }
    .list_item {
      flex: 1;
      display: flex;
      .table_bar {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .title {
          background: linear-gradient(90deg, #1f385e 0%, #021f4b 55%);
          height: 2.2rem;
          > div {
            height: 2.2rem;
            line-height: 2.2rem;
            width: 17.3125rem;
            padding-left: 2.8rem;
            background-image: url('@/assets/title_bg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            > span {
              font-size: 1.3rem;
              font-weight: bold;
              color: #fff;
            }
          }
        }
        .table {
          flex: 1;
        }
      }
    }
    .margin-bt20 {
      margin-bottom: 1rem;
    }
  }

  [v-cloak] {
    display: none;
  }
</style>
<style>
  .white {
    color: #ffffff;
  }

  .yellow {
    color: #ffd16c;
  }

  .green {
    color: green;
  }

  .red {
    color: red;
  }
  .blue {
    color: #0577ff !important;
  }
  .row-item {
    margin-bottom: 0.3rem;
  }
  .ellipsis {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
</style>