视频监测列表和详情页

src/api/business/videoMonitor.js

@@ -0,0 +1,12 @@
+import { request } from "@/utils/request";
+
+// 视频列表查询
+export function pageQuery(param) {
+    return request({
+        url: "/service-iot/dmpDeviceInfo/page",
+        method: "POST",
+        data: param,
+    });
+}
+
+

src/pages.json

@@ -632,14 +632,14 @@
         {
           "path": "videoMonitor/videoList",
           "style": {
-            "navigationBarTitleText": "视频监控列表",
+            "navigationBarTitleText": "视频监测列表",
             "enablePullDownRefresh": false
           }
         },
         {
           "path": "videoMonitor/videoDetail",
           "style": {
-            "navigationBarTitleText": "视频详情",
+            "navigationBarTitleText": "实时监控",
             "enablePullDownRefresh": false
           }
         }

src/pages/business/videoMonitor/videoDetail.vue

@@ -1,78 +1,20 @@
 <template>
   <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
     <view class="alarmDetails-container">
-      <view class="flex bg-white p15 mb15">
-        <image style="width: 40px; height: 40px; margin: auto 15px auto 0" :src="dataArray.typeImg ? dataArray.typeImg : '/static/images/404.png'" mode="aspectFill"></image>
-
-        <view style="margin: auto auto auto 0">
-          <view style="font-size: 15px"> {{ dataArray.projectName }} </view>
-        </view>
-
-        <view style="margin: auto 0 auto 0">
-          <view style="font-size: 15px" :style="`color:${dataArray.repairStatus == 1 ? '#23dedc' : '#16bf00'}`">
-            {{ dataArray.repairStatus == 1 ? "受理中" : "处理完成" }}
-          </view>
-        </view>
-      </view>
+ 
 
       <view class="bg-white p15 mb15">
-        <uni-section class="block mb10" title="基本信息" type="line"></uni-section>
-
+        <uni-section class="block mb10" :title="'设备名称:'+deviceName" type="line"></uni-section>
+        <!-- <view class="mb15">{{ deviceName}}</view> -->
         <view class="tableType3 padding-0">
-          <u-row v-for="da in dataList" :key="da">
-            <u-col span="4">
-              <view style="text-align: right; padding: 0px 5px 0px 5px">{{ da.title }}</view>
-            </u-col>
-            <u-col span="8">
-              <view v-if="da.title !== '评分'" style="text-align: left; padding: 0px 5px 0px 5px">{{ da.value }}</view>
-              <u-rate v-else style="padding: 0" v-model="da.value" :minCount="0" :count="5" :allowHalf="true" activeColor="#ff9900" readonly></u-rate>
-            </u-col>
-          </u-row>
-        </view>
-      </view>
+          
 
-      <view class="bg-white p15 mb15">
-        <uni-section class="block mb10" title="处理内容" type="line"></uni-section>
-
-        <view>
-          <u-input placeholder="报修人（必填）" border="surround" v-model="dataArray.handleName" style="margin: 0 0 15px 0" :disabled="dataArray.repairStatus == 2"> </u-input>
-
-          <u--textarea
-            v-model="dataArray.handleContent"
-            placeholder="填报内容，最多可输入50个字"
-            :count="true"
-            maxlength="50"
-            style="margin: 0 0 15px 0"
-            :disabled="dataArray.repairStatus == 2"
-          ></u--textarea>
-        </view>
+          <video id="myVideo" :src="videoUrl" style="width:100%" loop="loop" autoplay="autoplay"></video>
 
-        <view class="flex" v-if="dataArray.repairStatus != 2">
-          <u-button
-            type="info"
-            text="取消"
-            :plain="true"
-            shape="circle"
-            :customStyle="{
-              width: '80px',
-              height: '30px',
-              marginRight: '15px',
-            }"
-            @click="handleSubmit(1)"
-          ></u-button>
-          <u-button
-            type="primary"
-            text="处理"
-            shape="circle"
-            :customStyle="{
-              width: '80px',
-              height: '30px',
-              marginLeft: '15px',
-            }"
-            @click="handleSubmit(2)"
-          ></u-button>
         </view>
       </view>
+
+     
     </view>
   </scroll-view>
 </template>
@@ -86,6 +28,8 @@ import { page, fill } from "@/api/business/fireIot/repairManage.js";
 
 const { proxy } = getCurrentInstance();
 const useStore = useStores();
+const commonStore = commonStores();
+
 
 const dataArray = ref({});
 const dataList = ref([
@@ -115,10 +59,11 @@ const dataList = ref([
   },
 ]);
 
-const repairCode = ref("");
+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');
 
 /**
  * @页面初始化
@@ -201,11 +146,11 @@ onShow(() => {
 });
 
 onLoad((options) => {
-  if ("repairCode" in options) {
-    repairCode.value = options.repairCode;
+  if ("deviceName" in options) {
+    deviceName.value = options.deviceName;
   }
 
-  init();
+  // init();
 });
 </script>
 

src/pages/business/videoMonitor/videoList.vue

@@ -1,7 +1,7 @@
 <template>
-  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
+  <!-- <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
     <u-tabs :list="tabsList" :current="tabsCurrent" @click="tabsClick" lineColor="#333" :activeStyle="{ color: '#333' }" :inactiveStyle="{ color: '#909399' }" :scrollable="false"></u-tabs>
-  </u-sticky>
+  </u-sticky> -->
 
   <oa-scroll
     customClass="repairManage-container scroll-height"
@@ -19,21 +19,35 @@
   >
     <template #default>
       <view class="menu-list m0">
-        <view class="list-cell list-cell-arrow" style="color: #666666; line-height: 25px" v-for="(base, index) in dataList" :key="index" @click="handleToDetails(base)">
-          <view class="content-area-top menu-item">
-            <view class="content-area-top-time">
-              {{ base.repairStatus == 1 ? (base.createTime ? base.createTime.replace("T", " ") : "") : base.handleTime ? base.handleTime.replace("T", " ") : "" }}
+        <view class="list-cell list-cell-arrow" style=" line-height: 25px" v-for="(base, index) in dataList" :key="index" @click="handleToDetails(base)">
+          <view class="menu-item">
+              <image  v-if="base.deviceStatus == 1" class="image-bg" style="width: 80rpx; height: 80rpx; margin: auto 10px auto 0" src="@/static/images/videoMonitor/video-icon-on.png"></image>
+              <image  v-if="base.deviceStatus == 2" class="image-bg" style="width: 80rpx; height: 80rpx; margin: auto 10px auto 0" src="@/static/images/videoMonitor/video-icon-off.png"></image>
+              <view style="width: calc(100% - 51px); display: flex; justify-content: space-between; padding-right: 10px">
+                <view class="deviceHeader">
+                  <view class="deviceName text-ellipsis">{{ base.deviceName }}</view>
+                  
+                </view>
+                <view class="" v-if="base.deviceStatus == 1" style="color: #16bf00;margin-right:10px"> 在线 </view>
+                  <view class="" v-if="base.deviceStatus == 2" style="color: #333;margin-right:10px"> 离线 </view>
+               
+              </view>
+
+              <view>
+               
+              </view>
             </view>
-            <view class="content-area-top-status" v-if="base.repairStatus == 1" style="background-color: #23dedc"> 受理中 </view>
-            <view class="content-area-top-status" v-if="base.repairStatus == 2" style="background-color: #16bf00"> 处理完成 </view>
+          
+          
+          <!-- <view class="content-area-top menu-item">
+       
+            <view class="content-area-top-status" v-if="base.deviceStatus == 1" style="background-color: #23dedc"> 在线 </view>
+            <view class="content-area-top-status" v-if="base.deviceStatus == 2" style="background-color: #16bf00"> 离线 </view>
           </view>
           <view class="content-area-row_wrap menu-item">
-            <view class="content-area-row_wrap-view"> 项目名称：{{ base.projectName }} </view>
-            <view class="content-area-row_wrap-view"> 报修人：{{ base.reflectName }} </view>
-            <view class="content-area-row_wrap-view"> 报修人电话：{{ base.reflectPhone }} </view>
-            <view class="content-area-row_wrap-view"> 报修内容：{{ base.repairContent }} </view>
-            <view class="content-area-row_wrap-view"> 报修地址：{{ base.projectAddress }} </view>
-          </view>
+           
+            <view class="content-area-row_wrap-view"> {{ base.reflectPhone }} </view>
+          </view> -->
         </view>
       </view>
     </template>
@@ -45,7 +59,7 @@ import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, on
 import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
 import { useStores, commonStores } from "@/store/modules/index";
 
-import { page } from "@/api/business/fireIot/repairManage.js";
+import { pageQuery } from "@/api/business/videoMonitor.js";
 
 const { proxy } = getCurrentInstance();
 const commonStore = commonStores();
@@ -83,8 +97,8 @@ function init() {
  * @api接口查询
  */
 function selectListApi() {
-  page({
-    repairStatus: tabsList.value[tabsCurrent.value].value,
+  pageQuery({
+    // deviceStatus: tabsList.value[tabsCurrent.value].value,
     current: current.value,
     size: pageSize.value,
   }).then((requset) => {
@@ -99,7 +113,11 @@ function selectListApi() {
  * @跳转详情事件
  */
 function handleToDetails(e) {
-  proxy.$tab.navigateTo(`/pages/business/videoMonitor/videoDetail?repairCode=${e.repairCode}`);
+  proxy.$tab.navigateTo(`/pages/business/videoMonitor/videoDetail?deviceName=${e.deviceName}`);
+  if(e.deviceStatus==1){
+   
+  }
+  
 }
 
 /**