index.jsx 15.1 KB
Newer Older
皮倩雯's avatar
皮倩雯 committed
1 2 3
/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable default-case */
/* eslint-disable react/jsx-no-undef */
4
import React, { useState, useEffect } from 'react';
皮倩雯's avatar
皮倩雯 committed
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
import {
  Row,
  Col,
  Select,
  Spin,
  Table,
  Input,
  Button,
  Space,
  Tooltip,
  Popconfirm,
  notification,
} from 'antd';
import {
  SyncOutlined,
  PlusOutlined,
  ArrowUpOutlined,
  EditTwoTone,
  DeleteOutlined,
  VideoCameraOutlined,
  ZoomInOutlined,
  CaretUpFilled,
  CaretDownFilled,
} from '@ant-design/icons';
import voca from 'voca';
30
import styles from './index.less';
31
import { GetVideoConfigList, deleteInsertVideoConfig } from '@/services/videoManger/videoManger';
皮倩雯's avatar
皮倩雯 committed
32 33 34
import AddModal from './AddModal';
import CheckModal from './CheckModal';
import VideoModal from './VideoModal';
皮倩雯's avatar
皮倩雯 committed
35 36
import DHModal from './DHModal';
import HKModal from './HKModal';
37
import AddAllModal from './AddAllModal';
38 39

const videoManager = () => {
皮倩雯's avatar
皮倩雯 committed
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
  const [configurationType, setConfigurationType] = useState('1');
  const [loading, setLoading] = useState(false); // 加载
  const [searchWord, setSearchWord] = useState(''); // 关键字
  const { Search } = Input;
  const [addVisible, setAddVisible] = useState(false);
  const [checkVisible, setCheckVisible] = useState(false);
  const [videoVisible, setVideoVisible] = useState(false);
  const [type, setType] = useState('萤石云'); // 视频厂商类型
  const [type1, setType1] = useState('bb'); // 表单样式
  const [kind, setKind] = useState('');
  const [tableData, setTableData] = useState('');
  const [flag, setFlag] = useState(0);
  const [obj, setObj] = useState({});
  const [show1, setShow1] = useState('block');
  const [show2, setShow2] = useState('none');
皮倩雯's avatar
皮倩雯 committed
55 56
  const [addDHVisible, setAddDHVisible] = useState(false);
  const [addHKVisible, setAddHKVisible] = useState(false);
皮倩雯's avatar
皮倩雯 committed
57
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
58
  const [addAllVisible, setAddAllVisible] = useState(false);
59

皮倩雯's avatar
皮倩雯 committed
60 61 62 63 64
  const columns = [
    {
      title: '名称',
      dataIndex: 'Name',
      key: 'Name',
65
      // width: 200,
皮倩雯's avatar
皮倩雯 committed
66
      align: 'center',
67 68 69 70 71 72 73 74 75 76 77 78 79 80
      onCell: () => ({
        style: {
          maxWidth: 200,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: item => (
        <Tooltip placement="topLeft" title={item}>
          {searchStyle(item)}
        </Tooltip>
      ),
皮倩雯's avatar
皮倩雯 committed
81 82 83 84 85 86 87 88 89 90 91 92
    },
    {
      title: '视频厂商',
      dataIndex: 'VideoManufacturer',
      key: 'VideoManufacturer',
      width: 150,
      align: 'center',
    },
    {
      title: '登录名',
      dataIndex: 'LoginName',
      key: 'LoginName',
93
      // width: 350,
皮倩雯's avatar
皮倩雯 committed
94
      align: 'center',
皮倩雯's avatar
皮倩雯 committed
95
      render: item => searchStyle(item),
皮倩雯's avatar
皮倩雯 committed
96
    },
97 98 99 100 101 102 103
    // {
    //   title: '登录密码',
    //   dataIndex: 'LoginPwd',
    //   key: 'LoginPwd',
    //   width: 350,
    //   align: 'center',
    // },
皮倩雯's avatar
皮倩雯 committed
104 105 106 107
    {
      title: '设备编码',
      dataIndex: 'EquipmentCode',
      key: 'EquipmentCode',
108
      width: 200,
皮倩雯's avatar
皮倩雯 committed
109
      align: 'center',
皮倩雯's avatar
皮倩雯 committed
110
      render: item => searchStyle(item),
皮倩雯's avatar
皮倩雯 committed
111 112 113 114 115
    },
    {
      title: '通道ID',
      dataIndex: 'PassageId',
      key: 'PassageId',
116
      // width: 150,
皮倩雯's avatar
皮倩雯 committed
117
      align: 'center',
118 119 120 121 122 123 124 125 126 127 128 129 130 131
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: item => (
        <Tooltip placement="topLeft" title={item}>
          {item}
        </Tooltip>
      ),
皮倩雯's avatar
皮倩雯 committed
132 133 134 135 136
    },
    {
      title: '刻录机名称',
      dataIndex: 'RecorderName',
      key: 'RecorderName',
137
      width: 150,
皮倩雯's avatar
皮倩雯 committed
138
      align: 'center',
139 140 141 142 143 144 145 146 147 148 149 150 151 152
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: item => (
        <Tooltip placement="topLeft" title={item}>
          {item}
        </Tooltip>
      ),
皮倩雯's avatar
皮倩雯 committed
153 154 155 156 157
    },
    {
      // title: '录入时间',
      dataIndex: 'CreateTime',
      key: 'CreateTime',
158
      // width: 150,
皮倩雯's avatar
皮倩雯 committed
159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195
      align: 'center',
      title: (
        <div>
          录入时间
          <Tooltip title="点击降序">
            <CaretUpFilled
              style={{
                display: show1,
                color: '#1890ff',
                marginTop: '-13px',
                marginLeft: '60%',
              }}
              onClick={() => shengxu()}
            />
          </Tooltip>
          <Tooltip title="点击升序">
            <CaretDownFilled
              style={{
                display: show2,
                color: '#1890ff',
                marginTop: '-13px',
                marginLeft: '60%',
              }}
              onClick={() => jiangxu()}
            />
          </Tooltip>
        </div>
      ),
    },
    {
      title: '操作',
      dataIndex: '',
      key: '',
      align: 'center',
      render: record => (
        <Space size="middle">
          <Tooltip title="编辑">
196
            <EditTwoTone onClick={() => edit(record)} style={{ fontSize: '16px' }} />
皮倩雯's avatar
皮倩雯 committed
197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
          </Tooltip>
          <Tooltip title="预览">
            <VideoCameraOutlined
              onClick={() => preView(record)}
              style={{ fontSize: '16px', color: '#1890FF' }}
            />
          </Tooltip>
          <Tooltip title="查看">
            <ZoomInOutlined
              onClick={() => check(record)}
              style={{ fontSize: '16px', color: '#1890FF' }}
            />
          </Tooltip>
          <Tooltip title="删除">
            <Popconfirm
              placement="bottomRight"
              title={
                <p>
215
                  即将删除 <span className={styles.redText}>{voca.stripTags(record.Name)}</span>
皮倩雯's avatar
皮倩雯 committed
216 217 218 219 220 221 222 223 224 225 226 227 228 229
                  ,是否确认删除?
                </p>
              }
              okText="确认"
              cancelText="取消"
              onConfirm={() => delete1(record)}
            >
              <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
            </Popconfirm>
          </Tooltip>
        </Space>
      ),
    },
  ];
230

皮倩雯's avatar
皮倩雯 committed
231 232 233 234
  // 模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
235
      n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
皮倩雯's avatar
皮倩雯 committed
236 237 238 239 240 241
    } else {
      n = val;
    }
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

皮倩雯's avatar
皮倩雯 committed
242
  const edit = record => {
皮倩雯's avatar
皮倩雯 committed
243 244 245 246 247 248 249 250
    if (type == '大华') {
      setAddDHVisible(true);
    } else if (type == '海康ISC') {
      setAddHKVisible(true);
    } else {
      setAddVisible(true);
    }

皮倩雯's avatar
皮倩雯 committed
251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316
    setKind('edit');
    setObj(record);
  };
  const preView = record => {
    setVideoVisible(true);
    setObj(record);
  };
  const check = record => {
    setCheckVisible(true);
    setObj(record);
    console.log(record);
  };
  const delete1 = record => {
    deleteInsertVideoConfig({ Id: record.Id }).then(res => {
      if (res.msg === 'Ok') {
        notification.success({
          message: '提示',
          duration: 3,
          description: '删除成功',
        });
        setFlag(flag + 1);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };
  const shengxu = () => {
    setShow1('none');
    setShow2('block');
    setLoading(true);
    GetVideoConfigList({
      VideoType: type,
      pageIndex: 1,
      pageSize: 1000,
      IsAsc: true,
    }).then(res => {
      setLoading(false);
      if (res.msg === 'Ok') {
        setTableData(res.data.list);
      }
    });
  };
  const jiangxu = () => {
    setShow2('none');
    setShow1('block');
    setLoading(true);
    GetVideoConfigList({
      VideoType: type,
      pageIndex: 1,
      pageSize: 1000,
      IsAsc: false,
    }).then(res => {
      setLoading(false);
      if (res.msg === 'Ok') {
        setTableData(res.data.list);
      }
    });
  };
  useEffect(() => {
    setLoading(true);
    getData();
  }, []);
皮倩雯's avatar
皮倩雯 committed
317

皮倩雯's avatar
皮倩雯 committed
318 319 320
  useEffect(() => {
    setLoading(true);
    getData();
皮倩雯's avatar
皮倩雯 committed
321
    setShowSearchStyle(false);
皮倩雯's avatar
皮倩雯 committed
322
  }, [type, flag]);
皮倩雯's avatar
皮倩雯 committed
323

皮倩雯's avatar
皮倩雯 committed
324 325 326 327 328
  const getData = () => {
    GetVideoConfigList({
      VideoType: type,
      pageIndex: 1,
      pageSize: 1000,
329
      QueryWhere: searchWord,
皮倩雯's avatar
皮倩雯 committed
330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355
    }).then(res => {
      setLoading(false);
      if (res.msg === 'Ok') {
        setTableData(res.data.list);
      }
    });
  };
  const selectChange = value => {
    setConfigurationType(value);
    switch (value) {
      case '1':
        setType('萤石云');
        setType1('bb');
        break;
      case '2':
        setType('海康');
        setType1('bb');
        break;
      case '3':
        setType('海康1.2');
        setType1('aa');
        break;
      case '4':
        setType('海康NVR');
        setType1('aa');
        break;
皮倩雯's avatar
皮倩雯 committed
356 357 358 359 360 361
      case '5':
        setType('大华');
        break;
      case '6':
        setType('海康ISC');
        break;
362
    }
皮倩雯's avatar
皮倩雯 committed
363
  };
364

皮倩雯's avatar
皮倩雯 committed
365 366 367 368 369 370 371 372 373 374 375 376 377
  // 获取搜索框的值
  const handleSearch = e => {
    setSearchWord(e.target.value);
  };
  // 搜索
  const submitSearchUser = () => {
    GetVideoConfigList({
      VideoType: type,
      pageIndex: 1,
      pageSize: 1000,
      QueryWhere: searchWord,
    }).then(res => {
      if (res.msg === 'Ok') {
皮倩雯's avatar
皮倩雯 committed
378
        setShowSearchStyle(true);
皮倩雯's avatar
皮倩雯 committed
379 380 381 382 383 384 385 386 387 388 389 390
        setTableData(res.data.list);
      }
    });
  };
  // 重置
  const handleReset = () => {
    setConfigurationType('1');
    setSearchWord('');
    setType('萤石云');
    setType1('bb');
    setFlag(flag + 1);
  };
391

皮倩雯's avatar
皮倩雯 committed
392 393
  // 新增
  const addVideo = () => {
皮倩雯's avatar
皮倩雯 committed
394 395 396 397 398 399 400 401 402
    console.log(type);
    if (type == '大华') {
      setAddDHVisible(true);
    } else if (type == '海康ISC') {
      console.log(1212);
      setAddHKVisible(true);
    } else {
      setAddVisible(true);
    }
皮倩雯's avatar
皮倩雯 committed
403 404
    setKind('add');
  };
405

406 407 408 409
  const addAll = () => {
    setAddAllVisible(true);
  };

皮倩雯's avatar
皮倩雯 committed
410
  const onSubmit = () => {
411
    setAddAllVisible(false);
皮倩雯's avatar
皮倩雯 committed
412 413
    setAddDHVisible(false);
    setAddHKVisible(false);
皮倩雯's avatar
皮倩雯 committed
414 415 416 417 418 419 420 421 422
    setAddVisible(false);
    setFlag(flag + 1);
  };
  return (
    <div className={styles.videoManagerContainer}>
      <Row className={styles.head}>
        <Col span={24}>
          <span>配置类型:</span>
          <Select
423
            defaultValue="萤石云"
皮倩雯's avatar
皮倩雯 committed
424 425 426 427
            value={configurationType}
            onChange={selectChange}
            className={styles.sel}
          >
428
            <Option value="1">萤石云</Option>
皮倩雯's avatar
皮倩雯 committed
429 430 431
            <Option value="2">海康</Option>
            <Option value="3">海康1.2</Option>
            <Option value="4">海康NVR</Option>
皮倩雯's avatar
皮倩雯 committed
432 433
            <Option value="5">大华</Option>
            <Option value="6">海康ISC</Option>
皮倩雯's avatar
皮倩雯 committed
434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452
          </Select>
          <span style={{ marginLeft: '50px' }}>快速搜索:</span>
          <Search
            style={{ width: 260 }}
            placeholder="请输入名称,登录名,设备编码查询"
            onSearch={submitSearchUser}
            onChange={e => handleSearch(e)}
            enterButton
            value={searchWord}
          />
          <Button
            icon={<SyncOutlined className={styles.icon} />}
            onClick={handleReset}
            style={{
              marginLeft: '30px',
              verticalAlign: 'middle',
              marginTop: '-3px',
            }}
          >
皮倩雯's avatar
皮倩雯 committed
453
            重置
皮倩雯's avatar
皮倩雯 committed
454
          </Button>
455
          {/* <Button
皮倩雯's avatar
皮倩雯 committed
456 457 458
            icon={<PlusOutlined className={styles.icon} />}
            onClick={addVideo}
            style={{
皮倩雯's avatar
皮倩雯 committed
459
              float: 'right',
皮倩雯's avatar
皮倩雯 committed
460
              verticalAlign: 'middle',
皮倩雯's avatar
皮倩雯 committed
461
              // marginTop: '-3px',
皮倩雯's avatar
皮倩雯 committed
462 463
            }}
          >
皮倩雯's avatar
皮倩雯 committed
464
            新增
465 466 467 468 469 470 471 472 473 474 475
          </Button> */}
          <Button
            icon={<PlusOutlined className={styles.icon} />}
            onClick={addAll}
            style={{
              float: 'right',
              verticalAlign: 'middle',
              // marginTop: '-3px',
            }}
          >
            新增
皮倩雯's avatar
皮倩雯 committed
476 477 478 479 480
          </Button>
        </Col>
      </Row>
      <Spin spinning={loading} tip="loading">
        <div className={styles.table}>
481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525
          {tableData.length > 0 ? (
            <Table
              size="small"
              bordered
              rowKey={record => record.Id}
              columns={columns}
              dataSource={tableData}
              scroll={{ y: 'calc(100vh - 210px)', x: 'max-content' }}
              onRow={record => ({
                onDoubleClick: event => {
                  event.stopPropagation();
                  edit(record);
                }, // 双击
              })}
              pagination={{
                showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                pageSizeOptions: [10, 20, 50, 100],
                defaultPageSize: 20,
                showQuickJumper: true,
                showSizeChanger: true,
              }}
            />
          ) : (
            <Table
              size="small"
              bordered
              rowKey={record => record.Id}
              columns={columns}
              dataSource={tableData}
              scroll={{ y: 'calc(100vh - 116px)', x: 'max-content' }}
              onRow={record => ({
                onDoubleClick: event => {
                  event.stopPropagation();
                  edit(record);
                }, // 双击
              })}
              pagination={{
                showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                pageSizeOptions: [10, 20, 50, 100],
                defaultPageSize: 20,
                showQuickJumper: true,
                showSizeChanger: true,
              }}
            />
          )}
526
        </div>
皮倩雯's avatar
皮倩雯 committed
527 528 529 530 531 532 533 534 535 536 537 538
      </Spin>
      <AddModal
        visible={addVisible}
        onCancel={() => {
          setAddVisible(false);
        }}
        okText="确认"
        cancelText="取消"
        type={type}
        type1={type1}
        kind={kind}
        obj={obj}
539 540 541 542 543 544 545 546 547 548 549 550 551
        callBackSubmit={onSubmit}
      />
      <AddAllModal
        visible={addAllVisible}
        onCancel={() => {
          setAddAllVisible(false);
        }}
        okText="确认"
        cancelText="取消"
        type={type}
        type1={type1}
        kind={kind}
        obj={obj}
皮倩雯's avatar
皮倩雯 committed
552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571
        callBackSubmit={onSubmit}
      />
      <CheckModal
        visible={checkVisible}
        onCancel={() => {
          setCheckVisible(false);
        }}
        okText="确认"
        cancelText="取消"
        type={type}
        type1={type1}
        obj={obj}
      />
      <VideoModal
        visible={videoVisible}
        onCancel={() => {
          setVideoVisible(false);
        }}
        obj={obj}
      />
皮倩雯's avatar
皮倩雯 committed
572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595
      <DHModal
        visible={addDHVisible}
        onCancel={() => {
          setAddDHVisible(false);
        }}
        okText="确认"
        cancelText="取消"
        type={type}
        kind={kind}
        obj={obj}
        callBackSubmit={onSubmit}
      />
      <HKModal
        visible={addHKVisible}
        onCancel={() => {
          setAddHKVisible(false);
        }}
        okText="确认"
        cancelText="取消"
        type={type}
        kind={kind}
        obj={obj}
        callBackSubmit={onSubmit}
      />
皮倩雯's avatar
皮倩雯 committed
596 597
    </div>
  );
598 599
};

皮倩雯's avatar
皮倩雯 committed
600
export default videoManager;