diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index 1374963..1e34839 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -49,7 +49,7 @@ const LayOut = (props: Store) => { style={{ flex: 1, minWidth: 0 }} /> - 退出登录 + usrStore.logOut()}>退出登录 diff --git a/src/index.less b/src/index.less index afe4c74..51c671f 100644 --- a/src/index.less +++ b/src/index.less @@ -94,7 +94,7 @@ code { color: #fff; } } - .ant-modal-close{ + .ant-modal-close { color: #fff; } .ant-modal-body { @@ -110,3 +110,11 @@ code { } } } + +.text-overflow { + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; +} diff --git a/src/pages/archives/archivesFolder.tsx b/src/pages/archives/archivesFolder.tsx index 062dcfa..9477079 100644 --- a/src/pages/archives/archivesFolder.tsx +++ b/src/pages/archives/archivesFolder.tsx @@ -26,16 +26,19 @@ const ArchivesFolder = (props: Store) => { const [isModalOpen, setIsModalOpen] = useState(false); const [projectConfig, setProjectConfig] = useState([]); const formRef = React.useRef(null); - + const [tagId, setId] = useState(null); + const [tagPId, setPId] = useState(null); const [folderId, setFolderId] = useState(null); const [catList, setCatList] = useState(null); // 仓库列表 const onFinish = (values: any) => { - let data = values; + if (tagPId) { + values.pid = tagPId; + } if (!tagId) { - folderStore.add(data); + folderStore.add(values); } else { - folderStore.putItem(tagId, data); + folderStore.putItem(tagId, values); } setIsModalOpen(false); }; @@ -64,7 +67,7 @@ const ArchivesFolder = (props: Store) => { const onFinishFailed = () => {}; type DirectoryTreeProps = GetProps; - const onSelect: DirectoryTreeProps["onSelect"] = (keys, info:any) => { + const onSelect: DirectoryTreeProps["onSelect"] = (keys, info: any) => { setFolderId(info.node.identity); }; @@ -80,10 +83,10 @@ const ArchivesFolder = (props: Store) => { - + - + { { + setPId(nodeData.id); // 设置当前id 为父节点id e?.stopPropagation(); - console.log("new") + addHandler(); + console.log("new"); }} > 新建 diff --git a/src/pages/archives/file_list.tsx b/src/pages/archives/file_list.tsx index ff8c2eb..fe937ba 100644 --- a/src/pages/archives/file_list.tsx +++ b/src/pages/archives/file_list.tsx @@ -1,7 +1,8 @@ -import { Button, UploadFile } from "antd"; +import { Button, Modal, Space, UploadFile } from "antd"; import { useEffect, useState } from "react"; import { inject, observer } from "mobx-react"; import AliUpload from "@/components/ali_upload"; +import FileViewer from "@codesmith-99/react-file-preview"; interface ArchiveUploadFile extends UploadFile { file_type: string | undefined; file_url: string | undefined; @@ -9,11 +10,74 @@ interface ArchiveUploadFile extends UploadFile { const FileListPage = (props: any) => { const { folderStore, archivesStore, id } = props; const [fileList, setFileList] = useState([]); + const [isModalOpen, setIsModalOpen] = useState(false); + const [fileNmae, setFileName] = useState(""); + useEffect(() => { folderStore.getAlist(id).then((res) => { setFileList(folderStore.alist); }); }, [folderStore, id]); + const getFileTypeFromUrl = (url) => { + if (url === "" || url.length === 0) return; + // 解析URL以提取文件名 + const filename = url.split("/").pop(); + // 获取文件扩展名 + const fileExtension = filename.split(".").pop(); + // 返回文件扩展名 + return fileExtension; + }; + + const preView = (imageUrl) => { + let fileType = getFileTypeFromUrl(imageUrl); + console.log(imageUrl); + switch (fileType) { + case "jpeg": + return ; + case "jpg": + return ; + case "png": + return ; + case "pdf": + return ( +
+ + ; +
+ ); + case "mp4": + return ( +
+ +
+ ); + case "docx": + return ( +
+ { + console.log("error doc", e); + }} + /> +
+ ); + case "": + return
; + default: + return
; + } + }; const saveHandler = () => { fileList.forEach((item) => { item.file_url = item.url; @@ -21,21 +85,45 @@ const FileListPage = (props: any) => { }); archivesStore.save(id, fileList); }; + return (
-
- { - setFileList(v); - }} - maxCount={100} - /> + {fileList?.map((item: any) => { + return ( +
+ + {item?.file_name} + + + +
+ ); + })} + setIsModalOpen(false)} + > + {preView(fileNmae)} +
); }; diff --git a/src/pages/home/homeBottom/which_video.tsx b/src/pages/home/homeBottom/which_video.tsx index 6441b0c..3bb1ed3 100644 --- a/src/pages/home/homeBottom/which_video.tsx +++ b/src/pages/home/homeBottom/which_video.tsx @@ -1,10 +1,24 @@ import { Modal } from "antd"; +import { inject, observer } from "mobx-react"; import { useState } from "react"; -const WhichVideo = () => { +const WhichVideo = (props) => { + const { homeStore } = props; const [isModalOpen, setIsModalOpen] = useState(false); - const openDispatch = () => { + const [channelList, setChannelList] = useState>([]); + const openDispatch = async () => { setIsModalOpen(true); + let req = await homeStore.getVideoUrlList(); + let list: Array = []; + + for await (const item of req.EasyDarwin.Body.Devices) { + let reqs = await homeStore.getChannerUrlList(item.DeviceID); + + if (reqs?.EasyDarwin) { + list.push(...reqs?.EasyDarwin?.Body.Channels); + } + } + setChannelList(list); }; return ( <> @@ -12,7 +26,7 @@ const WhichVideo = () => { {}} onOk={() => {}} @@ -20,9 +34,20 @@ const WhichVideo = () => { onCancel={() => { setIsModalOpen(false); }} - > + > +
+ {channelList.map((item, index) => { + return ( +
+

{item.Name}

+
+ ); + })} +
+ ); }; -export default WhichVideo; +// export default WhichVideo; +export default inject("homeStore")(observer(WhichVideo)); diff --git a/src/pages/home/homeLeft/orgin.tsx b/src/pages/home/homeLeft/orgin.tsx index 3ed4cb6..43c6603 100644 --- a/src/pages/home/homeLeft/orgin.tsx +++ b/src/pages/home/homeLeft/orgin.tsx @@ -13,6 +13,7 @@ const Orgin = (props: Store) => { useEffect(() => { homeStore.getOgCount(); + homeStore.getVideoUrlList(); }, [homeStore]); const showModal = () => { setIsModalOpen(true); diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx index 2d1765e..a9be432 100644 --- a/src/pages/login/login.tsx +++ b/src/pages/login/login.tsx @@ -13,6 +13,7 @@ const Login = (props) => { userName: values.account, passWord: values.password, }); + await usrStore.loginVideo() if (status) { usrStore.closeLoginDilog(); navigate("/admin/user", { replace: true }); diff --git a/src/service/base.ts b/src/service/base.ts index ce21a34..48aadb2 100644 --- a/src/service/base.ts +++ b/src/service/base.ts @@ -6,7 +6,7 @@ axios.defaults.headers.common["Content-Type"] = "application/json; charset=utf8" axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; axios.interceptors.request.use((config) => { config.baseURL = `${Config.baseUrl}v1/`; - config.timeout = 5000; + config.timeout = 50000; let token = window.localStorage.getItem("token") config.headers.Authorization = token ?? "1" return config; @@ -32,10 +32,23 @@ axios.interceptors.response.use((res: AxiosResponse) => { return Promise.reject(err); }); class BaseHttp { + async gets(url: string, params: any) { + let res = await axios({ + method: 'get', + url: url, + headers: { + "token": window.localStorage.getItem("video-token"), + 'Content-Type': 'application/json; charset=utf-8' + }, + params + }); + return res.data; + }; async get(url: string, params: any) { let res = await axios({ method: 'get', url: url, + params }); return res.data; diff --git a/src/store/home.ts b/src/store/home.ts index a09b220..cac542a 100644 --- a/src/store/home.ts +++ b/src/store/home.ts @@ -4,6 +4,7 @@ import baseHttp from "@/service/base"; import BaseStore from "./baseStore"; import { TagDataType } from "@/model/userModel"; import MapUtl from "@/components/map/mapUtil"; +import Config from "@/util/config"; class HomeConfig { static os: string = "public/os" @@ -14,6 +15,10 @@ class HomeConfig { static ae: string = "public/ae" static newTask: string = "user/newTask" static taskulist: string = "public/taskInUser" + static deviceList: string = "api/v1/devicesconfig" //设备列表 + static channerList: string = "api/v1/channelsconfig" //设备列表 + static channelstream: string = "api/v1/channelstream" //设备包活 + } class HomeStore extends BaseStore { constructor() { @@ -49,6 +54,49 @@ class HomeStore extends BaseStore { async getAe() { return await baseHttp.get(HomeConfig.ae, {}); } + + // 获取视频推流连接 + async getVideoUrlList() { + try { + let data = await baseHttp.gets(Config.videoApi + HomeConfig.deviceList, { + start: 0, + limit: 30 + }) + return data + } catch (error) { + console.log(error) + return false + } + } + // 通道列表 + async getChannerUrlList(deviceId) { + try { + let data = await baseHttp.gets(Config.videoApi + HomeConfig.channerList, { + start: 0, + limit: 30, + device:deviceId + }) + return data; + } catch (error) { + console.log(error) + return false + } + } + // 获取通道流 + async getChannerStrem(deviceId,channel) { + try { + let data = await baseHttp.gets(Config.videoApi + HomeConfig.channelstream, { + device:deviceId, + channel:channel, + protocol:"HLS" + }) + console.log(data) + return true + } catch (error) { + console.log(error) + return false + } + } async getNewTask() { let res = await baseHttp.get(HomeConfig.newTask, {}); if (res.data?.record) { diff --git a/src/store/user.ts b/src/store/user.ts index a0cc8b9..d271e69 100644 --- a/src/store/user.ts +++ b/src/store/user.ts @@ -4,6 +4,7 @@ import baseHttp from "@/service/base"; import BaseStore from "./baseStore"; import { UserDataType, UserInfos } from "@/model/userModel"; import { message } from "antd"; +import Config from "@/util/config"; class UserConfig { static LOGINURI: string = "anth/login" static LIST: string = "user/list" @@ -15,7 +16,8 @@ class UserConfig { static per: string = "persMgmt/list" static serch: string = "user/serch" static getPatrol: string = "user/getPatrol" - + static videoLogin: string = "api/v1/login" + } class UserStore extends BaseStore { @@ -34,7 +36,7 @@ class UserStore extends BaseStore { serchUser: action, setPoverDe: action, setUserDetaul: action, - getPatrol:action, + getPatrol: action, _userinfo: observable, isNeedLogin: observable, poverDetail: observable, @@ -53,12 +55,12 @@ class UserStore extends BaseStore { return await baseHttp.get(UserConfig.pover, null) } async serchUser(params: any) { - return await baseHttp.get(UserConfig.serch, {user_name:params}) + return await baseHttp.get(UserConfig.serch, { user_name: params }) } async getPatrol() { return await baseHttp.get(UserConfig.getPatrol, {}) } - + get userInfo(): UserInfos { if (!this._userinfo.token) { let token = window.localStorage.getItem("token") @@ -71,6 +73,7 @@ class UserStore extends BaseStore { this._userinfo.token = ""; window.localStorage.clear(); this.item = ""; + window.location.href = '#/login' } async login(params: UserInfos) { let param = { @@ -92,6 +95,20 @@ class UserStore extends BaseStore { return false } } + + async loginVideo() { + try { + let data = await baseHttp.get(Config.videoApi + UserConfig.videoLogin, { + username: "easycvr", + password: "4092c09db0af030641a977d76044de4f", + }) + window.localStorage.setItem("video-token", data.EasyDarwin.Body.Token ?? ""); + return true + } catch (error) { + console.log(error) + return false + } + } openLoginDilog() { this.isNeedLogin = true; } diff --git a/src/util/config.ts b/src/util/config.ts index 50f108a..1cb0a36 100644 --- a/src/util/config.ts +++ b/src/util/config.ts @@ -1,10 +1,11 @@ class Config { static baseUrl = "https://rw.quwanya.cn/"; - static uploadUrl = "https://rw.quwanya.cn/"; + static uploadUrl = "https://rw.quwanya.cn"; static ws = "wss://rw.quwanya.cn/wsadmin?id=admin"; - // static rtc = "wss://rw.quwanya.cn/ws"; static userStatic = "https://rw.quwanya.cn/uploads/user/"; - // https://rw.quwanya.cn/uploads/user/%E5%B4%94%E6%96%87%E8%8C%9C.jpg + static videoApi = "https://sprh.hswzct.cn:4443/"; // } export default Config; +// 1、发布任务的时候选择视频列表 +// 2、人的数据区分 diff --git a/src/util/webRtc.ts b/src/util/webRtc.ts index 42e6b3b..4d63a0c 100644 --- a/src/util/webRtc.ts +++ b/src/util/webRtc.ts @@ -1,6 +1,5 @@ import SocketService from "./socket"; -import baseHttp from "@/service/base"; class WebRtc { private mediaStream: MediaStream | Blob | null = null; @@ -55,16 +54,22 @@ class WebRtc { } } async createOffer() { - let basData =await baseHttp.get('/public/webRtcConfig', { service: "11", username: "admin" }) const configuration = { iceServers: [ { - urls: basData.data.credential.uris, - username: basData.data.credential.username, - credential: basData.data.credential.password, - ttl:basData.data.credential.ttl + urls: "stun:118.114.255.222:3478", + username: "admin", + credential: "admin123456", + "ttl": 86400 }, - ] + { + urls: "turn:118.114.255.222:3478", + username: "admin", + credential: "admin123456", + "ttl": 86400 + } + ], + sdpSemantics: "unified-plan", } this.gets(configuration) } @@ -76,7 +81,6 @@ class WebRtc { const re = document.querySelector('#remoteVideo') as HTMLVideoElement; re.autoplay = true re.controls = true - console.log(event.streams[0]) re.srcObject = event.streams[0]; event.track.onmute = function (event) { re.play()