print-package-H5/pages/device-production-detail/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="设备生产信息"></uni-nav-bar>
    <view class="flex-col group_5">
      <view class="flex-col section_1">
        <view class="justify-between group_6">
          <text class="text_5">生产数据</text>
          <view class="flex-row group_7">
            <qn-datetime-picker :border="false" type="daterange" @change="dateRangeChange">
              <text>{{ (dateRange ? `${dateRange[0]}～${dateRange[1]}` : '全部') | formatDate }}</text>
            </qn-datetime-picker>
            <image v-show="!dateRange" src="/static/imgs/digital-workshops/down-arrow-icon.png" class="image-icon" />
            <image v-show="dateRange" @click="dateRangeChange(null)" src="/static/imgs/general/close-icon.png" class="image-icon" />
          </view>
        </view>
        <view class="justify-between section_2">
          <text>{{ curDevice.name }}</text>
        </view>
        <view class="flex-row group_8">
          <view class="flex-col section_3">
            <text class="text_8">{{ curDevice.produceTotalNum }}</text>
            <text class="text_9">产能/件</text>
          </view>
          <view class="flex-col section_4">
            <text class="text_10">{{ curDevice.totalWorkHour | formatTime }}</text>
            <text class="text_11">工作时长/h</text>
          </view>
        </view>
      </view>
      <view class="flex-col section_5">
        <view class="flex-col items-center group_9">
          <view class="camera_bg"></view>
          <image @click="showLive" src="/static/imgs/device-info/camera-bg.png" class="image_7" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getShareDeviceInfo } from '@/apis/deviceApi'
import { getAccessToken } from '@/apis/factoryApi'
import { round } from '@/utils/index.js'
import { YINGSHI_LIVE_URL } from '@/enums/index.js'
export default {
  data() {
    return {
      id: null,
      dateRange: null,
      curDevice: {}
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.getDeviceInfo()
    }
  },
  methods: {
    go2,
    back,
    getDeviceInfo() {
      getShareDeviceInfo({
        id: this.id,
        startDate: this.dateRange ? this.dateRange[0] : null,
        endDate: this.dateRange ? this.dateRange[1] : null
      }).then((res) => {
        this.curDevice = res
      })
    },
    dateRangeChange(value) {
      if (value) {
        this.dateRange = [...value]
      } else {
        this.dateRange = null
      }
    },
    showLive() {
      if (this.curDevice) {
        getAccessToken().then((res) => {
          if (res) {
            console.log('res', res)
            this.curDevice.accessToken = res
            let url =
              YINGSHI_LIVE_URL + `accessToken=${this.curDevice.accessToken}&deviceSerial=${this.curDevice.cameraId}&channelNo=${this.curDevice.channelNum}`
            go2('page-view', { url: encodeURIComponent(url) })
          }
        })
      }
    }
  },
  watch: {
    dateRange() {
      this.getDeviceInfo()
    }
  },
  filters: {
    formatDate(time) {
      return time.replace(/-/g, '.')
    },
    formatTime(time) {
      if (time) {
        return round(time, 2)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  .text_4 {
    color: rgb(0, 122, 255);
    font-size: 28rpx;
  }
}
.group_5 {
  padding: 20rpx 32rpx;
  .section_1 {
    padding: 0 28rpx;
    background-image: url('/static/imgs/device-info/device-detail-bg.png');
    background-position: 0px 0px;
    background-size: 686rpx 380rpx;
    background-repeat: no-repeat;
    .group_6 {
      padding: 32rpx 0 18rpx;
      .text_5 {
        color: transparent;
        font-size: 34rpx;
        font-weight: 500;
        line-height: 48rpx;
        white-space: nowrap;
        background-image: linear-gradient(180deg, rgb(15, 90, 212) 0%, rgb(15, 90, 212) 0%, rgb(135, 226, 241) 155.46%, rgb(135, 226, 241) 100%);
        -webkit-background-clip: text;
      }
      .group_7 {
        margin: 6rpx 0;
        color: rgb(133, 133, 133);
        font-size: 26rpx;
        line-height: 37rpx;
        white-space: nowrap;
        .image-icon {
          margin: 0 0 5rpx 16rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
    .section_2 {
      color: rgb(51, 51, 51);
      font-size: 32rpx;
      line-height: 45rpx;
      white-space: nowrap;
    }
    .group_8 {
      padding: 28rpx 0 40rpx;
      .section_3 {
        padding: 22rpx 22rpx 36rpx;
        flex: 1 1 308rpx;
        background-image: url('/static/imgs/device-info/gear.png');
        background-position: 0px 0px;
        background-size: 308rpx 136rpx;
        background-repeat: no-repeat;
        height: 136rpx;
        .text_8 {
          color: rgb(68, 113, 189);
          font-size: 30rpx;
          font-weight: 500;
          line-height: 42rpx;
          white-space: nowrap;
        }
        .text_9 {
          margin-top: 6rpx;
          color: rgb(68, 113, 189);
          font-size: 22rpx;
          line-height: 30rpx;
          white-space: nowrap;
        }
      }
      .section_4 {
        margin-left: 14rpx;
        padding: 22rpx 22rpx 36rpx;
        flex: 1 1 308rpx;
        background-image: url('/static/imgs/device-info/clock.png');
        background-position: 0px 0px;
        background-size: 308rpx 136rpx;
        background-repeat: no-repeat;
        height: 136rpx;
        .text_10 {
          color: rgb(83, 146, 106);
          font-size: 30rpx;
          font-weight: 500;
          line-height: 42rpx;
          white-space: nowrap;
        }
        .text_11 {
          margin-top: 6rpx;
          color: rgb(83, 146, 106);
          font-size: 22rpx;
          line-height: 30rpx;
          white-space: nowrap;
        }
      }
    }
    .image_4 {
      margin-left: 17rpx;
      align-self: center;
      width: 20rpx;
      height: 13rpx;
    }
  }
  .section_5 {
    margin-top: 20rpx;
    padding: 28rpx 0;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 5rpx 22rpx 0px rgba(0, 0, 0, 0.04);
    border-radius: 14rpx;
    .group_9 {
      margin: 0 28rpx;
      border-radius: 6rpx;
      position: relative;
      .camera_bg {
        border-radius: 6rpx;
        width: 630rpx;
        height: 340rpx;
        background-color: rgb(51, 51, 51);
      }
      .image_7 {
        width: 96rpx;
        height: 96rpx;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>