index.jsx 17 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
import {
  Row,
  Col,
  Select,
  Spin,
  Table,
  Input,
  Button,
  Space,
  Tooltip,
  Popconfirm,
  notification,
17 18 19
  Upload,
  Modal,
  message,
皮倩雯's avatar
皮倩雯 committed
20 21 22 23 24 25 26 27 28 29 30
} from 'antd';
import {
  SyncOutlined,
  PlusOutlined,
  ArrowUpOutlined,
  EditTwoTone,
  DeleteOutlined,
  VideoCameraOutlined,
  ZoomInOutlined,
  CaretUpFilled,
  CaretDownFilled,
31 32 33
  ExportOutlined,
  ImportOutlined,
  DownloadOutlined,
皮倩雯's avatar
皮倩雯 committed
34 35
} from '@ant-design/icons';
import voca from 'voca';
36
import styles from './index.less';
37 38 39 40 41
import {
  GetVideoConfigList,
  deleteInsertVideoConfig,
  ImportVideoConfig,
} from '@/services/videoManger/videoManger';
皮倩雯's avatar
皮倩雯 committed
42 43 44
import AddModal from './AddModal';
import CheckModal from './CheckModal';
import VideoModal from './VideoModal';
皮倩雯's avatar
皮倩雯 committed
45 46
import DHModal from './DHModal';
import HKModal from './HKModal';
47
import AddAllModal from './AddAllModal';
48

49 50
const path = require('path');

51
const videoManager = () => {
皮倩雯's avatar
皮倩雯 committed
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
  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
67 68
  const [addDHVisible, setAddDHVisible] = useState(false);
  const [addHKVisible, setAddHKVisible] = useState(false);
皮倩雯's avatar
皮倩雯 committed
69
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
70
  const [addAllVisible, setAddAllVisible] = useState(false);
71

皮倩雯's avatar
皮倩雯 committed
72 73 74 75 76
  const columns = [
    {
      title: '名称',
      dataIndex: 'Name',
      key: 'Name',
77
      // width: 200,
皮倩雯's avatar
皮倩雯 committed
78
      align: 'center',
79 80 81 82 83 84 85 86 87 88 89 90 91 92
      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
93 94 95 96 97 98 99 100 101 102 103 104
    },
    {
      title: '视频厂商',
      dataIndex: 'VideoManufacturer',
      key: 'VideoManufacturer',
      width: 150,
      align: 'center',
    },
    {
      title: '登录名',
      dataIndex: 'LoginName',
      key: 'LoginName',
105
      // width: 350,
皮倩雯's avatar
皮倩雯 committed
106
      align: 'center',
皮倩雯's avatar
皮倩雯 committed
107
      render: item => searchStyle(item),
皮倩雯's avatar
皮倩雯 committed
108
    },
109 110 111 112 113 114 115
    // {
    //   title: '登录密码',
    //   dataIndex: 'LoginPwd',
    //   key: 'LoginPwd',
    //   width: 350,
    //   align: 'center',
    // },
皮倩雯's avatar
皮倩雯 committed
116 117 118 119
    {
      title: '设备编码',
      dataIndex: 'EquipmentCode',
      key: 'EquipmentCode',
120
      width: 200,
皮倩雯's avatar
皮倩雯 committed
121
      align: 'center',
皮倩雯's avatar
皮倩雯 committed
122
      render: item => searchStyle(item),
皮倩雯's avatar
皮倩雯 committed
123 124 125 126 127
    },
    {
      title: '通道ID',
      dataIndex: 'PassageId',
      key: 'PassageId',
128
      // width: 150,
皮倩雯's avatar
皮倩雯 committed
129
      align: 'center',
130 131 132 133 134 135 136 137 138 139 140 141 142 143
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: item => (
        <Tooltip placement="topLeft" title={item}>
          {item}
        </Tooltip>
      ),
皮倩雯's avatar
皮倩雯 committed
144 145 146 147 148
    },
    {
      title: '刻录机名称',
      dataIndex: 'RecorderName',
      key: 'RecorderName',
149
      width: 150,
皮倩雯's avatar
皮倩雯 committed
150
      align: 'center',
151 152 153 154 155 156 157 158 159 160 161 162 163 164
      onCell: () => ({
        style: {
          maxWidth: 150,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: item => (
        <Tooltip placement="topLeft" title={item}>
          {item}
        </Tooltip>
      ),
皮倩雯's avatar
皮倩雯 committed
165 166 167 168 169
    },
    {
      // title: '录入时间',
      dataIndex: 'CreateTime',
      key: 'CreateTime',
170
      // width: 150,
皮倩雯's avatar
皮倩雯 committed
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 196 197 198 199 200 201 202 203 204 205 206 207
      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="编辑">
208
            <EditTwoTone onClick={() => edit(record)} style={{ fontSize: '16px' }} />
皮倩雯's avatar
皮倩雯 committed
209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226
          </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>
227
                  即将删除 <span className={styles.redText}>{voca.stripTags(record.Name)}</span>
皮倩雯's avatar
皮倩雯 committed
228 229 230 231 232 233 234 235 236 237 238 239 240 241
                  ,是否确认删除?
                </p>
              }
              okText="确认"
              cancelText="取消"
              onConfirm={() => delete1(record)}
            >
              <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
            </Popconfirm>
          </Tooltip>
        </Space>
      ),
    },
  ];
242

皮倩雯's avatar
皮倩雯 committed
243 244 245 246
  // 模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
247
      n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
皮倩雯's avatar
皮倩雯 committed
248 249 250 251 252 253
    } else {
      n = val;
    }
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

皮倩雯's avatar
皮倩雯 committed
254
  const edit = record => {
皮倩雯's avatar
皮倩雯 committed
255 256 257 258 259 260 261 262
    if (type == '大华') {
      setAddDHVisible(true);
    } else if (type == '海康ISC') {
      setAddHKVisible(true);
    } else {
      setAddVisible(true);
    }

皮倩雯's avatar
皮倩雯 committed
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 317 318 319 320 321 322 323 324 325 326 327 328
    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
329

皮倩雯's avatar
皮倩雯 committed
330 331 332
  useEffect(() => {
    setLoading(true);
    getData();
皮倩雯's avatar
皮倩雯 committed
333
    setShowSearchStyle(false);
皮倩雯's avatar
皮倩雯 committed
334
  }, [type, flag]);
皮倩雯's avatar
皮倩雯 committed
335

皮倩雯's avatar
皮倩雯 committed
336 337 338 339 340
  const getData = () => {
    GetVideoConfigList({
      VideoType: type,
      pageIndex: 1,
      pageSize: 1000,
341
      QueryWhere: searchWord,
皮倩雯's avatar
皮倩雯 committed
342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367
    }).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
368 369 370 371 372 373
      case '5':
        setType('大华');
        break;
      case '6':
        setType('海康ISC');
        break;
374
    }
皮倩雯's avatar
皮倩雯 committed
375
  };
376

皮倩雯's avatar
皮倩雯 committed
377 378 379 380 381 382 383 384 385 386 387 388 389
  // 获取搜索框的值
  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
390
        setShowSearchStyle(true);
皮倩雯's avatar
皮倩雯 committed
391 392 393 394 395 396 397 398 399 400 401 402
        setTableData(res.data.list);
      }
    });
  };
  // 重置
  const handleReset = () => {
    setConfigurationType('1');
    setSearchWord('');
    setType('萤石云');
    setType1('bb');
    setFlag(flag + 1);
  };
403

皮倩雯's avatar
皮倩雯 committed
404 405
  // 新增
  const addVideo = () => {
皮倩雯's avatar
皮倩雯 committed
406 407 408 409 410 411 412 413 414
    console.log(type);
    if (type == '大华') {
      setAddDHVisible(true);
    } else if (type == '海康ISC') {
      console.log(1212);
      setAddHKVisible(true);
    } else {
      setAddVisible(true);
    }
皮倩雯's avatar
皮倩雯 committed
415 416
    setKind('add');
  };
417

418 419 420 421
  const addAll = () => {
    setAddAllVisible(true);
  };

皮倩雯's avatar
皮倩雯 committed
422
  const onSubmit = () => {
423
    setAddAllVisible(false);
皮倩雯's avatar
皮倩雯 committed
424 425
    setAddDHVisible(false);
    setAddHKVisible(false);
皮倩雯's avatar
皮倩雯 committed
426 427 428
    setAddVisible(false);
    setFlag(flag + 1);
  };
429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462
  // 导入
  const beforeUpload = val => {
    const formData = new FormData();
    formData.append('file', val);
    console.log(formData, val, 'OK');
    ImportVideoConfig(formData).then(response => {
      if (response.code === 0) {
        setFlag(flag + 1);
        message.success('导入成功');
      } else {
        message.error(response.msg);
      }
    });
    return false;
  };
  const downLoadObj = {
    '1': '萤石云-视频导入模板',
    '2': '海康-视频导入模板',
    '3': '海康1-2-视频导入模板',
    '4': '海康NVR-视频导入模板',
    '5': '大华-视频导入模板',
    '6': '海康ISC-视频导入模板',
  };
  // 下载模板
  const downloadFile = () => {
    let downloadLink = document.createElement('a');
    downloadLink.href = path.join(__dirname, `/civmanage/${downLoadObj[configurationType]}.xlsx`);
    downloadLink.download = downLoadObj[configurationType];

    document.body.appendChild(downloadLink);
    downloadLink.click();

    document.body.removeChild(downloadLink);
  };
皮倩雯's avatar
皮倩雯 committed
463 464 465 466 467 468
  return (
    <div className={styles.videoManagerContainer}>
      <Row className={styles.head}>
        <Col span={24}>
          <span>配置类型:</span>
          <Select
469
            defaultValue="萤石云"
皮倩雯's avatar
皮倩雯 committed
470 471 472 473
            value={configurationType}
            onChange={selectChange}
            className={styles.sel}
          >
474
            <Option value="1">萤石云</Option>
皮倩雯's avatar
皮倩雯 committed
475 476 477
            <Option value="2">海康</Option>
            <Option value="3">海康1.2</Option>
            <Option value="4">海康NVR</Option>
皮倩雯's avatar
皮倩雯 committed
478 479
            <Option value="5">大华</Option>
            <Option value="6">海康ISC</Option>
皮倩雯's avatar
皮倩雯 committed
480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498
          </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
499
            重置
皮倩雯's avatar
皮倩雯 committed
500
          </Button>
501
          {/* <Button
皮倩雯's avatar
皮倩雯 committed
502 503 504
            icon={<PlusOutlined className={styles.icon} />}
            onClick={addVideo}
            style={{
皮倩雯's avatar
皮倩雯 committed
505
              float: 'right',
皮倩雯's avatar
皮倩雯 committed
506
              verticalAlign: 'middle',
皮倩雯's avatar
皮倩雯 committed
507
              // marginTop: '-3px',
皮倩雯's avatar
皮倩雯 committed
508 509
            }}
          >
皮倩雯's avatar
皮倩雯 committed
510
            新增
511
          </Button> */}
512 513 514 515 516 517 518 519 520 521
          <div style={{ float: 'right' }}>
            <Upload showUploadList={false} accept=".xlsx" beforeUpload={beforeUpload}>
              <Button style={{ marginLeft: '10px' }} type="primary" ghost>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <ImportOutlined style={{ marginRight: '5px' }} />
                  <div>导入</div>
                </div>
              </Button>
            </Upload>
          </div>
522 523 524 525 526 527 528 529 530 531
          <Button
            icon={<PlusOutlined className={styles.icon} />}
            onClick={addAll}
            style={{
              float: 'right',
              verticalAlign: 'middle',
              // marginTop: '-3px',
            }}
          >
            新增
皮倩雯's avatar
皮倩雯 committed
532
          </Button>
533 534 535 536 537 538 539 540 541 542 543
          <Button
            icon={<DownloadOutlined className={styles.icon} />}
            onClick={downloadFile}
            style={{
              float: 'right',
              verticalAlign: 'middle',
              marginRight: '10px',
            }}
          >
            下载模板
          </Button>
皮倩雯's avatar
皮倩雯 committed
544 545
        </Col>
      </Row>
546 547 548

      <div className={styles.tablebox}>
        <Spin spinning={loading} tip="loading">
549 550 551 552 553 554 555
          {tableData.length > 0 ? (
            <Table
              size="small"
              bordered
              rowKey={record => record.Id}
              columns={columns}
              dataSource={tableData}
邓超's avatar
邓超 committed
556
              scroll={{ y: 'calc(100% - 50px)', x: 'max-content' }}
557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593
              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,
              }}
            />
          )}
594 595 596
        </Spin>
      </div>

皮倩雯's avatar
皮倩雯 committed
597 598 599 600 601 602 603 604 605 606 607
      <AddModal
        visible={addVisible}
        onCancel={() => {
          setAddVisible(false);
        }}
        okText="确认"
        cancelText="取消"
        type={type}
        type1={type1}
        kind={kind}
        obj={obj}
608 609 610 611 612 613 614 615 616 617 618 619 620
        callBackSubmit={onSubmit}
      />
      <AddAllModal
        visible={addAllVisible}
        onCancel={() => {
          setAddAllVisible(false);
        }}
        okText="确认"
        cancelText="取消"
        type={type}
        type1={type1}
        kind={kind}
        obj={obj}
皮倩雯's avatar
皮倩雯 committed
621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640
        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
641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664
      <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
665 666
    </div>
  );
667 668
};

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