usky-web-mobile/src/pages/business/videoMonitor/videoDetail.vue

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <view class="alarmDetails-container">
 

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" :title="'设备名称:'+deviceName" type="line"></uni-section>
        <!-- <view class="mb15">{{ deviceName}}</view> -->
        <view class="tableType3 padding-0">
          

          <video id="myVideo" :src="videoUrl" style="width:100%" loop="loop" autoplay="autoplay"></video>

        </view>
      </view>

     
    </view>
  </scroll-view>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import { page, fill } from "@/api/business/fireIot/repairManage.js";

const { proxy } = getCurrentInstance();
const useStore = useStores();
const commonStore = commonStores();


const dataArray = ref({});
const dataList = ref([
  {
    title: "报修日期",
    value: "",
  },
  {
    title: "项目名称",
    value: "",
  },
  {
    title: "报修人",
    value: "",
  },
  {
    title: "报修电话",
    value: "",
  },
  {
    title: "问题描述",
    value: "",
  },
  {
    title: "报修地址",
    value: "",
  },
]);

const deviceName = ref("");
const pageSize = ref(20);
const current = ref(1);
const total = ref(0);
const videoUrl=ref('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8');

/**
 * @页面初始化
 */
function init() {
  selectListApi();
}

/**
 * @列表查询
 * @api接口查询
 */
function selectListApi() {
  page({
    repairCode: repairCode.value,
    current: current.value,
    size: pageSize.value,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataArray.value = requset.data.records[0];
      dataArray.value.handleName = requset.data.records[0].handleName ? requset.data.records[0].handleName : useStore.nickName ? useStore.nickName : "";
      dataArray.value.handleContent = requset.data.records[0].handleContent ? requset.data.records[0].handleContent : "";

      dataList.value[0].value = requset.data.records[0].createTime ? requset.data.records[0].createTime.replace("T", " ") : requset.data[0].createTime;
      dataList.value[1].value = requset.data.records[0].projectName;
      dataList.value[2].value = requset.data.records[0].reflectName;
      dataList.value[3].value = requset.data.records[0].reflectPhone;
      dataList.value[4].value = requset.data.records[0].repairContent;
      dataList.value[5].value = requset.data.records[0].projectAddress;

      if (requset.data.records[0].repairStatus === 2) {
        dataList.value.push(
          {
            title: "评分",
            value: 0,
          },
          {
            title: "评分内容",
            value: "",
          }
        );
        dataList.value[6].value = requset.data.records[0].score ? requset.data.records[0].score : 0;
        dataList.value[7].value = requset.data.records[0].appraiseContent;
      }

      total.value = requset.data.total;
    }
  });
}

/**
 * @提交
 */
function handleSubmit(type) {
  if (type == 1) {
    proxy.$tab.navigateBack(1);
  } else {
    if (!dataArray.value.handleName) {
      proxy.$modal.msg("请输入报修人");
      return;
    }

    fill({
      id: dataArray.value.id,
      handleName: dataArray.value.handleName,
      handleContent: dataArray.value.handleContent,
    }).then((res) => {
      if (requset.status === "SUCCESS") {
        proxy.$tab.navigateTo(`/pages/common/success/index?codeName=提交成功`);
      }
    });
  }
}

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onLoad((options) => {
  if ("deviceName" in options) {
    deviceName.value = options.deviceName;
  }

  // init();
});
</script>

<style lang="scss" scoped>
:deep(.u-input__content__field-wrapper__field) {
  font-size: 13px !important;
}

:deep(.u-textarea__field) {
  font-size: 13px;
}
</style>