kd-aiot-frontend-vis/src/views/bpm/vis-page/moldPressingWorkshop.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="list_item margin-bt20">
        <div ref="pie" class="table_bar"></div>
        <div class="table_bar">
          <div class="title">
            <div>
              <span>选点检：</span>
              <span class="blue">25</span>
            </div>
          </div>
          <div class="table"> </div>
          <dv-scroll-board
            v-if="isFlag"
            :config="config"
            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">25</span>
            </div>
          </div>
          <div class="table"> </div>
          <dv-scroll-board
            v-if="isFlag"
            :config="config"
            style="width: 90%; height: 87%; transform: translate(5%, 1%)"
          />
        </div>
        <div class="table_bar">
          <div class="title">
            <div>
              <span>维修：</span>
              <span class="blue">25</span>
            </div>
          </div>
          <div class="table"> </div>
          <dv-scroll-board
            v-if="isFlag"
            :config="config"
            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 * as echarts from 'echarts';
  import { component } from 'vue-fullscreen';
  import { getRepairWorkList, statisticsDeviceStatus } from '@/api/equipment';
  export default {
    name: 'index',
    components: {
      dvBorderContent,
      VueFullscreen: component
    },
    computed: {
      contentWidth() {
        return this.$store.state.theme.contentWidth;
      }
    },
    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;

            this.$nextTick(() => {
              statisticsDeviceStatus().then((data) => {
                this.totalData = data;
              });
            });
          });
        },
        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;
            this.$nextTick(() => {
              statisticsDeviceStatus().then((data) => {
                this.totalData = data;
              });
            });
          });
        },
        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,
        orderStatusOptions: {
          0: '待接收',
          1: '已接收',
          2: '执行中',
          3: '待验收',
          4: '已完成'
        },
        tableHeader: ['工单号', '负责人', '状态', '响应时间'],
        config: {
          header: [],
          data: [],
          align: ['center', 'center', 'center', 'center'],
          headerBGC: '#031d42',
          columnWidth: [110, 120],
          headerHeight: 20,
          oddRowBGC: '#031d42',
          evenRowBGC: '#031d42',
          waitTime: 5000,
          rowNum: 12
        },
        optionData: [
          {
            code: '3',
            name: '运行数量',
            cws: 80,
            zcs: 20,
            zcl: '25%',
            value: 80,
            startRatio: 0,
            endRatio: 0.34782608695652173,
            itemStyle: {
              color: '#5089F2',
              opacity: 1
            }
          },
          {
            code: '1',
            name: '故障检修数量',
            cws: 40,
            zcs: 30,
            zcl: '75%',
            value: 40,
            startRatio: 0.8260869565217391,
            endRatio: 1,
            itemStyle: {
              color: '#FF736A',
              opacity: 1
            }
          }
        ]
      };
    },
    created() {
      // window.isFullscreen = false
      this.updateTimer = setInterval(this.updateTime, 1000);
    },
    mounted() {
      this.getSalesFinishList();
      setInterval(() => {
        this.getSalesFinishList();
      }, 3600000);
      statisticsDeviceStatus().then((data) => {
        this.totalData = data;
        this.initCircle(this.$refs.pie);
      });
    },
    methods: {
      initCircle(ref) {
        let rightChart2 = echarts.init(ref);
        let option = {
          tooltip: {
            trigger: 'item'
          },
          graphic: {
            //图形中间图片
            elements: [
              {
                type: 'image',
                style: {
                  image: require('../../../assets/circle_bg.png'), //你的图片地址
                  width: 200,
                  height: 200
                },
                left: '13%',
                top: '23%'
              },
              {
                type: 'text', //通过不同top值可以设置上下显示
                left: '21.5%',
                top: '44%',
                style: {
                  text: '100',
                  fill: '#fff', //文字的颜色
                  width: 30,
                  height: 30,
                  fontSize: 30,
                  color: '#fff',
                  fontFamily: 'Microsoft YaHei'
                }
              },
              {
                type: 'text', //通过不同top值可以设置上下显示
                left: '21%',
                top: '53%',
                style: {
                  text: '总数(台)',
                  fill: '#fff', //文字的颜色
                  width: 30,
                  height: 30,
                  fontSize: 18,
                  color: '#fff',
                  fontFamily: 'Microsoft YaHei'
                }
              }
            ]
          },
          legend: {
            top: 'center',
            right: '25%',
            type: 'scroll',
            orient: 'vertical',
            itemGap: 30,
            textStyle: {
              rich: {
                // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
                oneone: {
                  // 设置文字、数学、英语这一列的样式
                  width: 70,
                  color: '#fff',
                  fontSize: 18,
                  fontWeight: 'bolder'
                },
                twotwo: {
                  // 设置10分、20分、30分这一列的样式
                  width: 35,
                  color: '#0577F9',
                  fontSize: 18
                },
                threethree: {
                  // 设置百分比这一列的样式
                  width: 20,
                  color: '#EE6666',
                  fontSize: 18
                }
              }
            },
            formatter: (name) => {
              return `{oneone|${name}}  {twotwo|40}   {threethree|40%}`;
            }
          },
          series: [
            {
              name: '工单',
              type: 'pie',
              radius: ['60%', '70%'],
              center: ['25%', '50%'], //图的位置，距离左跟上的位置
              avoidLabelOverlap: false,
              padAngle: 5,
              itemStyle: {
                borderRadius: 5
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 12, name: '已报工' },
                { value: 33, name: '已指派' },
                { value: 44, name: '处理中' },
                { value: 22, name: '待接单' }
              ]
            }
          ]
        };
        rightChart2.setOption(option);
      },
      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() {
        /*customerMark	客户代号	string
deliveryStatus	交付状态 1未交付2提前3按时4延期	integer(int32)
produceStatus	生产状态 1未生产2已生产3已完成	integer(int32)
purchaseStatus	采购状态 1未采购2已采购3已入库	integer(int32)
saleOrderCode	销售订单号	string
scheduleStatus	排产状态 1待排产2已排产	integer(int32)*/
        let HeaderFiled = [
          'customerMark',
          'saleOrderCode',
          'purchaseStatus',
          'scheduleStatus',
          'produceStatus',
          'deliveryStatus'
        ];
        let data = await getRepairWorkList();
        console.log(data);
        this.config = {
          header: this.tableHeader.map(
            (item) =>
              `<div style="color: #0577FF;font-size: 1.3rem;font-weight: bold">${item}</div>`
          ),
          data:
            data.map((item) => {
              let list = [];
              for (let i in item) {
                let div = '';
                if (i === 'executeGroupName') {
                  div = `<div class="white" style="font-size: 1.3rem;">${item[i]}</div>`;
                  list[0] = div;
                }
                if (i === 'executeUserName') {
                  div = `<div class="white" style="font-size: 1.3rem;">${item[i]}</div>`;
                  list[1] = div;
                }
                if (i === 'orderStatus') {
                  if (item[i] > -1) {
                    switch (item[i]) {
                      case '0':
                        div = `<div class="white" style="font-size: 1.3rem;">${
                          this.orderStatusOptions[item[i]]
                        }</div>`;
                        break;
                      case '1':
                        div = `<div class="yellow" style="font-size: 1.3rem;">${
                          this.orderStatusOptions[item[i]]
                        }</div>`;
                        break;
                      case '2':
                        div = `<div class="green" style="font-size: 1.3rem;">${
                          this.orderStatusOptions[item[i]]
                        }</div>`;
                        break;
                      default:
                        div = `<div class="red" style="font-size: 1.3rem;">${
                          this.orderStatusOptions[item[i]]
                        }</div>`;
                        break;
                    }

                    list[2] = div;
                  } else {
                    div = `<div class="white" style="font-size: 1.3rem;"></div>`;
                    list[2] = div;
                  }
                }
              }
              return list;
            }) ?? [],
          align: ['center', 'center', 'center', 'center', 'center', 'center'],
          headerBGC: '#031d42',
          columnWidth: [140, 250, 170, 150],
          headerHeight: 30,
          oddRowBGC: '#031d42',
          evenRowBGC: '#031d42',
          waitTime: 5000,
          rowNum: 8
        };
      },
      //实时更新日期
      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;
      }
    }
    .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;
  }
</style>