|
@@ -16,6 +16,7 @@ const videoIcon = require('@/assets/air-conditioner.png');
|
|
const DeviceManager = () => {
|
|
const DeviceManager = () => {
|
|
const { projectId } = useParams();
|
|
const { projectId } = useParams();
|
|
const [tab, setTab] = useState(localStorage.safeTab || '1');
|
|
const [tab, setTab] = useState(localStorage.safeTab || '1');
|
|
|
|
+ const [selected, setSelected] = useState();
|
|
|
|
|
|
//门禁接口
|
|
//门禁接口
|
|
const { data, run, loading } = useRequest(
|
|
const { data, run, loading } = useRequest(
|
|
@@ -53,8 +54,22 @@ const DeviceManager = () => {
|
|
UnityAction.sendMsg('camData', JSON.stringify(dataVList?.list));
|
|
UnityAction.sendMsg('camData', JSON.stringify(dataVList?.list));
|
|
}, [data, dataVList]);
|
|
}, [data, dataVList]);
|
|
|
|
|
|
|
|
+ const onHandleSelect = (name) => {
|
|
|
|
+ setSelected(name);
|
|
|
|
+ UnityAction.sendMsg('safetyItem', name);
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ UnityAction.addEventListener('safetyItem', (name) => {
|
|
|
|
+ setSelected(name);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ return () => UnityAction.off('safetyItem');
|
|
|
|
+ }, []);
|
|
|
|
+
|
|
const handleTabChange = (tab) => {
|
|
const handleTabChange = (tab) => {
|
|
setTab(tab);
|
|
setTab(tab);
|
|
|
|
+ setSelected(null);
|
|
if (tab == '1') {
|
|
if (tab == '1') {
|
|
runVideo();
|
|
runVideo();
|
|
runVOnLine();
|
|
runVOnLine();
|
|
@@ -81,6 +96,8 @@ const DeviceManager = () => {
|
|
key: '1',
|
|
key: '1',
|
|
children: (
|
|
children: (
|
|
<Video
|
|
<Video
|
|
|
|
+ selected={selected}
|
|
|
|
+ setSelected={onHandleSelect}
|
|
data={dataVList?.list}
|
|
data={dataVList?.list}
|
|
dataOnline={dataVOnline}
|
|
dataOnline={dataVOnline}
|
|
loading={loadingVList}
|
|
loading={loadingVList}
|
|
@@ -93,6 +110,8 @@ const DeviceManager = () => {
|
|
key: '2',
|
|
key: '2',
|
|
children: (
|
|
children: (
|
|
<Door
|
|
<Door
|
|
|
|
+ selected={selected}
|
|
|
|
+ setSelected={onHandleSelect}
|
|
data={data?.list}
|
|
data={data?.list}
|
|
dataOver={dataOver}
|
|
dataOver={dataOver}
|
|
loading={loading || loadingOver}
|
|
loading={loading || loadingOver}
|
|
@@ -106,6 +125,7 @@ const DeviceManager = () => {
|
|
);
|
|
);
|
|
};
|
|
};
|
|
const Video = ({ data, dataOnline, loading }) => {
|
|
const Video = ({ data, dataOnline, loading }) => {
|
|
|
|
+ const [selected, setSelected] = useState();
|
|
const renderRed = (item) => {
|
|
const renderRed = (item) => {
|
|
return (
|
|
return (
|
|
<div className={styles.cardItem}>
|
|
<div className={styles.cardItem}>
|
|
@@ -147,7 +167,10 @@ const Video = ({ data, dataOnline, loading }) => {
|
|
{data?.map((item, idx) => (
|
|
{data?.map((item, idx) => (
|
|
<div
|
|
<div
|
|
key={`video_${idx}`}
|
|
key={`video_${idx}`}
|
|
- className={`card-box ${styles.listItem}`}
|
|
|
|
|
|
+ onClick={() => setSelected(idx)}
|
|
|
|
+ className={`card-box ${styles.listItem} ${
|
|
|
|
+ selected == item.Name || selected == idx ? 'card-select' : ''
|
|
|
|
+ }`}
|
|
>
|
|
>
|
|
{renderRed(item)}
|
|
{renderRed(item)}
|
|
</div>
|
|
</div>
|
|
@@ -158,7 +181,14 @@ const Video = ({ data, dataOnline, loading }) => {
|
|
</Spin>
|
|
</Spin>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
-const Door = ({ data, dataOver, loading, projectId }) => {
|
|
|
|
|
|
+const Door = ({
|
|
|
|
+ data,
|
|
|
|
+ dataOver,
|
|
|
|
+ loading,
|
|
|
|
+ projectId,
|
|
|
|
+ selected,
|
|
|
|
+ setSelected,
|
|
|
|
+}) => {
|
|
const navigate = useNavigate();
|
|
const navigate = useNavigate();
|
|
|
|
|
|
const handleClick = () => {
|
|
const handleClick = () => {
|
|
@@ -222,7 +252,10 @@ const Door = ({ data, dataOver, loading, projectId }) => {
|
|
{data?.map((item, idx) => (
|
|
{data?.map((item, idx) => (
|
|
<div
|
|
<div
|
|
key={`door_${idx}`}
|
|
key={`door_${idx}`}
|
|
- className={`card-box ${styles.listItem}`}
|
|
|
|
|
|
+ onClick={() => setSelected(idx)}
|
|
|
|
+ className={`card-box ${styles.listItem} ${
|
|
|
|
+ selected == item.name || selected == idx ? 'card-select' : ''
|
|
|
|
+ }`}
|
|
>
|
|
>
|
|
{renderRed(item)}
|
|
{renderRed(item)}
|
|
</div>
|
|
</div>
|