视频监控

weapp/src/app.config.js

@@ -10,7 +10,8 @@ export default {
       'patrol/index',
       'patrolView/index',
       'changePassword/index',
-      'changePassword/success/index'
+      'changePassword/success/index',
+      'video/index',
     ]
   }],
   permission: {

weapp/src/config.js

@@ -8,9 +8,10 @@ const baseConfig = {
 };
 
 const development = {
-  baseUrl: 'https://c5a6-117-90-37-10.ap.ngrok.io',
-  webUrl: 'https://smartwater.anxinyun.cn',
-  pcode: 'fce4afe2-5b6a-408a-ab18-a2afa7fa027c',
+  baseUrl: 'http://221.230.55.29:31919',
+  // baseUrl: 'https://c5a6-117-90-37-10.ap.ngrok.io',
+  // webUrl: 'https://smartwater.anxinyun.cn',
+  // pcode: 'fce4afe2-5b6a-408a-ab18-a2afa7fa027c',
   imgUrl: 'http://test.resources.anxinyun.cn/',
   // requestCache: true,    //开启异步请求缓存
   ...baseConfig

weapp/src/packages/video/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '视频监控'
+}

weapp/src/packages/video/index.jsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
+import { View, Image, Input, Picker, LivePlayer } from '@tarojs/components'
+import request from '@/services/request'
+import './index.scss'
+import '../patrolView/index.scss'
+import patrolIcon from '../../static/img/patrolView/patrol.svg'
+import patrolActiveIcon from '../../static/img/patrolView/patrol-active.svg'
+import conserveIcon from '../../static/img/patrolView/conserve.svg'
+import conserveActiveIcon from '../../static/img/patrolView/conserve-active.svg'
+import chevronDown from '../../static/img/patrolView/chevron-down.png'
+import searchIcon from '../../static/img/patrolView/search.png'
+
+function Index() {
+  const [isBus, setIsBus] = useState(true)
+  const [filterText, setFilterText] = useState('')
+  const [videoList, setVideoList] = useState([])
+  
+  useEffect(() => {
+    getVideoList()
+  }, [])
+
+  const getVideoList = () => {
+    let nextVideoList = []
+    for (let i = 0; i < 10; i++) {
+      nextVideoList.push({ title: '视频' + i, url: '链接' + i })
+    }
+    setVideoList(nextVideoList)
+  }
+
+  const onTypeChange = bool => {
+    setIsBus(bool)
+  }
+
+  const handleConfirm = e => {
+
+  }
+
+  const handleInput = e => {
+
+  }
+
+  return (
+    <View>
+      <View className='type-box'>
+        <View className='item' onClick={() => onTypeChange(true)}>
+          <Image className='type-img' src={isBus ? patrolActiveIcon : patrolIcon} />
+          <View style={{ color: isBus ? '#346FC2' : '#999999' }}>公交</View>
+        </View>
+        <View className='line'></View>
+        <View className='item' onClick={() => onTypeChange(false)}>
+          <Image className='type-img' src={isBus ? conserveIcon : conserveActiveIcon} />
+          <View style={{ color: isBus ? '#999999' : '#346FC2' }}>道路</View>
+        </View>
+      </View>
+      <View className='filter-box'>
+        <View className='filter-item'>
+          <View style={{ float: 'left', marginLeft: '20rpx', color: '#333' }}>路段：</View>
+          <Picker>
+            <View className='filter-name'>{'请选择'}</View>
+            <Image className='filter-img' src={chevronDown} />
+          </Picker>
+        </View>
+        <View class='head-search'>
+          <Image className='search-img' src={searchIcon} />
+          <Input class='heard-search-input' value={filterText} placeholder='请输入道路名称' onConfirm={handleConfirm} onInput={handleInput} />
+        </View>
+      </View>
+      <View className='video-box'>
+        {
+          videoList && videoList.map(v => {
+            return (
+              <View className='video-card'>
+                <View className='title'>{v.title}</View>
+                  <LivePlayer className='video' src={v.url} mode='live' />
+              </View>
+            )
+          })
+        }
+      </View>
+    </View>
+  )
+}
+
+export default Index

weapp/src/packages/video/index.scss

@@ -0,0 +1,28 @@
+page {
+  background-color: #f6f6f6;
+
+  .video-box {
+    padding-top: 180px;
+
+    .video-card {
+      background-color: #fff;
+      height: 488px;
+      margin-bottom: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+  
+      .title {
+        height: 88px;
+        margin-left: 30px;
+        display: flex;
+        align-items: center;
+      }
+  
+      .video {
+        height: 400px;
+        width: 100%;
+      }
+    }
+  }
+}

weapp/src/pages/home/index.jsx

@@ -38,7 +38,9 @@ const Index = () => {
   }
 
   function toVideo() {
-
+    Taro.navigateTo({
+      url: '/packages/video/index'
+    })
   }
 
   return (