状态码释义接口联调

code/VideoAccess-VCMP/web/client/src/sections/offline/actions/statuscode.js

@@ -40,3 +40,26 @@ export function postStatusResolve(data) {
         reducer: { name: "" },
     });
 }
+export function postStatusCustom(data) {
+    return (dispatch) =>
+      basicAction({
+        type: "post",
+        dispatch: dispatch,
+        data,
+        actionType: "POST_STATUS_CUSTOM",
+        url: `${ApiTable.postStatusCustom}`,
+        msg: { option: "" }, //自定义状态码释义
+        reducer: { name: "" },
+    });
+}
+export function getStatusSimpleAll() {
+    return (dispatch) =>
+      basicAction({
+        type: "get",
+        dispatch: dispatch,
+        actionType: "GET_STATUS_SIMPLE_ALL",
+        url: `${ApiTable.getStatusSimpleAll}`,
+        msg: { option: "" }, //获取摄像头能力列表
+        reducer: { name: "" },
+    });
+}

code/VideoAccess-VCMP/web/client/src/sections/offline/components/notesModal.jsx

@@ -1,41 +1,78 @@
 import React, { useState, useRef, useEffect } from "react";
 import { connect } from "react-redux";
-import { Modal, Spin,Input,TagInput } from "@douyinfe/semi-ui";
+import { Modal, Spin,Input,TagInput ,Select} from "@douyinfe/semi-ui";
-
 function programmeModal (props) {
     const {
         close,
         rowId,
         dispatch,
         actions,
-        nodesAll
+        nodesAll,//是否批量
+        tableNews,//表格行全数据
     } = props;
-    const { equipmentWarehouse } = actions;
+    const { offline } = actions;
+    
+    const [notesValue, setNotesValue] = useState('');//释义
+    const [codeList, setCodeList] = useState([]);//状态码列表
+    const [codeIdList, setcodeIdList] = useState([]);//选中的状态码id
+    const [platform, setPlatform] = useState(['yingshi']);//选中的平台
     
-    const [notesValue, setNotesValue] = useState('');//表格设置弹框
     //初始化
     useEffect(() => {
-        
+        setNotesValue(tableNews.paraphraseCustom||'')
+        dispatch(
+            offline.getStatusSimpleAll()
+        ).then((res) => {
+            let mycodeList=[];
+            if(res.payload&&res.payload.data){
+                for (let index = 0; index < res.payload.data.length; index++) {
+                    mycodeList.push({id:res.payload.data[index].id,status:res.payload.data[index].status+' '+res.payload.data[index].describe,platform:res.payload.data[index].platform})
+                }
+            }
+            setCodeList(mycodeList)
+        })
     }, []);
 
     function handleOk () {
         //点击弹框确定  右边按钮
-        // dispatch(
+        if(nodesAll){
-        //     equipmentWarehouse.postCameraRemark({
+            dispatch(
-        //         cameraId:rowId,
+                offline.postStatusCustom({
-        //         remark:showScrollList
+                    statusId:codeIdList,
-        //     })
+                    paraphrase:notesValue
-        // ).then((res) => {
+                })
-        //     close();
+            ).then((res) => {
-        // })
+                close();
+            })
+        }
+        else{
+            dispatch(
+                offline.postStatusCustom({
+                    statusId:[rowId],
+                    paraphrase:notesValue
+                })
+            ).then((res) => {
+                close();
+            })
+        }
     }
     function handleCancel () {
         close();
         //点击弹框取消  左边按钮
     }
-    function onChange(value){
+    function onChange(value){//输入自定义释义
-        console.log('value',value);
+        if(value!==''){
-        setNotesValue(value)
+            setNotesValue(value)
+        }
+        else{
+            setNotesValue(null)
+        }
+    }
+    function onSelect(value){//选择状态码
+        setcodeIdList(value)
+    }
+    function oneSelect(value){//切换平台
+        setPlatform(value)
     }
     return (
         <>
@@ -48,26 +85,43 @@ function programmeModal (props) {
                 width={607}
                 onCancel={handleCancel}
             >
-                {/* <div style={{margin:"17px 56px 18px 31px"}}>
-                    <div style={{color:'rgba(0, 0, 0, 0.65)',}}>
-                        解决方案设置：
-                    </div>
-                    <div style={{color:'rgba(0, 0, 0, 0.45)',fontSize:12,marginTop:4}}>
-                        敲击回车键后，输入内容将成为标签
-                    </div>
-                    <div style={{marginTop:10}}>
-                        <TagInput
-                            defaultValue={['设备是否接触良好','刷新重试，检测设备网络，重启设备']}
-                            placeholder='请输入解决方案'
-                            size='large'
-                            maxLength={18}
-                            onChange={v => console.log(v)}
-                        />
-                    </div>
-                </div> */}
                 {nodesAll?(
                     <div style={{margin:"17px 32px 28px 32px"}}>
-
+                        <div style={{display: 'flex',alignItems: 'center'}}>
+                            <div style={{width:84,textAlign:'right',color: 'rgba(0,0,0,0.65)'}}>状态码：</div>
+                            <div>
+                                <Select defaultValue='yingshi' onChange={oneSelect} style={{ width: 108 }}>
+                                    <Select.Option value='yingshi'>萤石云</Select.Option>
+                                    <Select.Option value='gb'>国标摄像头</Select.Option>
+                                </Select>
+                            </div>
+                            <div style={{marginLeft:12}}>
+                                <Select filter multiple style={{ width: 300 }} onChange={onSelect} placeholder='请选择状态码' maxTagCount={1} autoClearSearchValue={false}>
+                                    {codeList.map((item) => {
+                                        return(
+                                            item.platform==platform ? (
+                                                <Select.Option key={item.id} value={item.id}>
+                                                    {item.status}
+                                                </Select.Option>
+                                            ) : (
+                                                ""
+                                            )
+                                          )
+                                    })}
+                                </Select>
+                            </div>
+                        </div>
+                        <div style={{display: 'flex',alignItems: 'center',marginTop:21}}>
+                            <div style={{width:84,textAlign:'right',color: 'rgba(0,0,0,0.65)'}}>修改释义：</div>
+                            <div style={{width:'100%'}}><Input
+                            style={{width:'100%'}}
+                            value={notesValue}
+                            onChange={onChange}
+                            maxLength={18}
+                            placeholder="请输入自定义释义"
+                            showClear>
+                            </Input></div>
+                        </div>
                     </div>
                 ):(
                     <div style={{margin:"17px 32px 28px 32px"}}>
@@ -84,12 +138,12 @@ function programmeModal (props) {
                     </div>
                 )}
                 <div style={{display:'flex',margin:'0px 20px',alignItems: 'center',justifyContent: 'space-between'}}>
-                    <div>
+                    <div style={{display:'flex',justifyContent: 'center',
-                        <img
+                                alignItems:'center', width: 240, height: 146 ,
-                            src="/assets/images/background/codeBefore.png"
+                                background: "url(/assets/images/background/codeBefore.png)",backgroundSize: "100% 100%",}}>
-                            alt="设置"
+                        <div style={{color: 'rgba(255,255,255,0.8)',textShadow: '0px 1px 1px rgba(0,0,0,0)',textAlign: 'center',width: 130}}>
-                            style={{ width: 240, height: 146 }}
+                            {tableNews.paraphrase||'初始化释义'}
-                        />
+                        </div>
                     </div>
                     <div>
                         <img
@@ -98,12 +152,12 @@ function programmeModal (props) {
                             style={{ width: 18, height: 15 }}
                         />
                     </div>
-                    <div>
+                    <div style={{ display:'flex',justifyContent: 'center',
-                        <img
+                                alignItems:'center', width: 240, height: 146 ,
-                            src="/assets/images/background/codeAfter.png"
+                                background: "url(/assets/images/background/codeAfter.png)",backgroundSize: "100% 100%",}}>
-                            alt="设置"
+                        <div style={{color: 'rgba(255,255,255,1)',textShadow: '0px 1px 1px #001969',textAlign: 'center',width: 130}}>
-                            style={{ width: 240, height: 146 }}
+                            {notesValue}
-                        />
+                        </div>
                     </div>
                 </div>
             </Modal>

code/VideoAccess-VCMP/web/client/src/sections/offline/containers/statuscode.jsx

@@ -29,14 +29,13 @@ const Statuscode = (props) => {
     const [rowId, setRowId] = useState(); //表格数据id
     const api = useRef();
     const searchData = useRef(search)
-    const limits = useRef(); //每页实际条数
     const page = useRef(query.page);
     const CODE = "code";
     const [nodesAll, setNodesAll] = useState(true);//是否批量
     const [mysorter, setMysorter] = useState(true);//排序
     const sorter = useRef(false);//排序
     const [resolve, setResolve] = useState([]);//解决方案
-    
+    const [tableNews, setTableNews] = useState([]);//表格当前行数据
     const tableList = [//表格属性
         {
             title:'状态码信息',
@@ -160,6 +159,7 @@ const Statuscode = (props) => {
                             onClick={() => {
                                 setNotes(true);
                                 setNodesAll(false);
+                                setTableNews(row);
                                 setRowId(row.id);
                             }}
                         >
@@ -319,7 +319,7 @@ const Statuscode = (props) => {
                         style={{ position: "relative", width: "100%", flex: 1 }}
                     >
                         <Form.Input
-                            label="释义搜索：                            "
+                            label="释义搜索："
                             field="keyword"
                             maxLength="36"
                             placeholder="请输入错误描述、释义或自定义释义"
@@ -452,7 +452,9 @@ const Statuscode = (props) => {
                                 borderRadius: 3,
                             }}
                             onClick={() => {
-
+                                setNotes(true);
+                                setNodesAll(true);
+                                setTableNews([]);
                             }}
                         >
                             批量设置
@@ -484,7 +486,7 @@ const Statuscode = (props) => {
                     }}
                 >
                     <span style={{ lineHeight: "30px" }}>
-                        共{StatusList.count}个设备
+                        共{StatusList.count}个状态码
                     </span>
                     <Pagination
                         total={StatusList.count}
@@ -522,9 +524,11 @@ const Statuscode = (props) => {
                 {notes&&<NotesModal
                     rowId={rowId}
                     nodesAll={nodesAll}
+                    tableNews={tableNews}
                     close={() => {
                         setNotes(false);
                         setRowId();
+                        codegetStatus();
                     }}
                 />}
             </div>

code/VideoAccess-VCMP/web/client/src/utils/webapi.js

@@ -43,6 +43,8 @@ export const ApiTable = {
    getStatus:  'status',//获取状态码
    putStatueBanned:'status/banned',//禁用状态码自定义
    postStatusResolve:'status/resolve',//编辑解决方案
+   postStatusCustom:'status/custom',//自定义状态码释义
+   getStatusSimpleAll:'status/simple_all',//获取全部状态码简略信息
 };
 
 export const VideoServeApi = {