检索弹框

mods/components/3dviewConvertor/styles/index.scss

@@ -12,6 +12,7 @@
 @import './planDetail.scss';
 @import './actionbar.scss';
 @import './moduleEdit.scss';
+@import './searchpane.scss';
 
 @import './../assets/bizFont/iconfont.css';
 @import './../assets/amosFont/iconfont.css';

mods/components/3dviewConvertor/styles/searchpane.scss

+.search-pane-bg{
+    position: absolute;
+    // right: 20px;
+    // bottom: 20px;
+    top: 64px;
+    left: 10px;
+    width: 460px;
+    height: 600px;
+    background: url('./../assets//convertor//3dview//searchpane-background.png');
+    filter:blur(3px);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    z-index: 99;
+}
+
+.search-pane{
+    position: absolute !important;
+    top: 64px;
+    left: 10px;
+    // right: 20px !important;
+    // bottom: 20px !important;
+    width: 460px;
+    height: 600px;
+    color: white;
+    z-index: 999 !important;
+    border:1px solid rgba(39,85,162,0.3);
+    border-radius: 10px;
+
+
+    .search-pane-close{
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        right: 0;
+        background-image: linear-gradient(0deg, 
+            #eb0404 0%, 
+            #ff0057 100%);
+        opacity: 0.6;
+        text-align: center;
+
+        .amosicon-close{
+            font-style: normal;
+        }
+    }
+
+
+    .amos-tabs-list{
+        border: none !important;
+        height: 30px;
+
+        .amos-tabs-tabitem{
+            background-color: #2755a2;
+            margin-right: 8px;
+            border-radius: 5px;
+
+            .amos-tabs-tabitem-inner{
+                padding: 3px 15px;
+
+                .amos-tabs-tabitem-content{
+                    color: white;
+                }
+            }
+        }
+
+        .amos-tabs-tabitem-active{
+            background-color: #036fa7 !important;
+            color: white;
+        }
+
+    }
+
+
+    .params-header{
+        padding: 5px 14px;
+        height: 40px;
+        width: 100%;
+
+        .amos-group-item{
+            float: left;
+        }
+
+        .amos-select-dropdown{
+            border: none !important;
+            background-color: #13428f;
+            border-radius: 5px;
+        }
+
+        .amos-input{
+            width: 100%;
+            border: none !important;
+            background-color: #13428f;
+            border-radius: 5px;
+            float: left;
+        }
+
+        .params-input{
+            float: left;
+
+            .params-input-img{
+    
+            }
+        }
+    }
+
+    .amos-tabs .amos-tabs-panel {
+        padding-top: 0px !important;
+    }
+
+
+    .search-pane-table{
+        .ant-table-title{
+            display: none;
+        }
+
+        .ant-table-body{
+            max-height: 35rem !important;
+        }
+
+        .ant-table-thead {
+
+        } 
+
+
+        .ant-table-content {
+            height: 100%;
+
+            .ant-table-header {
+                overflow: hidden !important;
+
+            }
+        
+            .ant-table-body {
+                color: white;
+                max-height: 465px !important ;
+                min-height: 465px !important ;
+                overflow-y: auto !important; 
+                overflow-x: hidden;
+                background:transparent!important;
+                margin-top: 20px;
+                border:1px solid rgba(234,234,234,0.3);
+        
+                table {
+                    width: 300px;
+                    border-color: transparent !important;
+        
+                    td {
+                        border:1px solid rgba(234,234,234,0.3) !important;
+                        
+                    }
+
+                    th {
+                        color: white;
+                        background: #2755a2;
+                    }
+                }
+            }
+            .ant-table-placeholder{
+                background:transparent!important;
+                color: white;
+            }
+
+            .ant-table-thead > tr >th{
+                color: white;
+                background: #2755a2 !important;
+                //background: #222b51 !important;
+                border-color: transparent !important;
+                text-align: center;
+             }
+
+         
+            .ant-table-thead > tr.ant-table-row-hover > td, .ant-table-tbody > tr.ant-table-row-hover > td, .ant-table-thead > tr:hover > td, .ant-table-tbody > tr:hover > td {
+                background: rgba(255,255,255,0.3);
+            }
+
+             //滚动条样式
+            .ant-table-body{
+                &::-webkit-scrollbar {
+                    width: 10px;
+                    height: 10px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    background: rgba(39,85,162,0.8);
+                    border-radius: 10px;
+                }
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: rgba(2,11,45,0.5);
+                    border: none;
+                }
+                &::-webkit-scrollbar-corner {
+                    background: transparent;
+                }
+                &::-webkit-scrollbar-thumb:hover {
+                    background: rgba(39,85,162,1);
+                }
+            }
+  
+        }
+
+        .ant-table-pagination {
+            margin: 0 10px;
+            float: right;
+
+            .ant-select-selection{
+                display: none;
+            }
+
+            .ant-pagination-prev{
+                background-color: rgba(255,255,255,0.5);
+            }
+            .ant-pagination-next{
+                background-color: rgba(255,255,255,0.5);
+            }
+            .ant-pagination-item{
+                background-color: rgba(255,255,255,0.5);
+            }
+            .ant-pagination-item-active a, .ant-pagination-item-active:focus a, .ant-pagination-item-active:hover a {
+                color: #fff;
+            }
+        }
+    }
+}
\ No newline at end of file

mods/components/3dviewConvertor/view/MaskContent.js

@@ -11,6 +11,7 @@ import LayerPool from './LayerPool';
 import TopMsg from './sideControl/TopMsg';
 import ActionBar from './actionbar';
 import ModelHeader from './common/ModelHeader';
+import SearchPane from './searchPane';
 
 const eventConnect = Connect.eventConnect;
 
@@ -21,7 +22,8 @@ class MaskContent extends Component {
     super(props);
     this.state = {
       planStarted: false,
-      activeAction: 'panoramic'
+      activeAction: 'panoramic',
+      searchPaneVisible: false
     };
   }
 
@@ -49,10 +51,19 @@ class MaskContent extends Component {
   };
 
   actionBarClick = ({ singleClick, type, label, showLabel }) => {
+    
     if (!singleClick){//设置选中状态
       this.setState({ activeAction: type });
     }
     this.props.onActionItemClick && this.props.onActionItemClick(type, label, showLabel);
+    if(type === "search"){
+      this.changeSearchPaneVisible();
+    }
+  }
+
+  changeSearchPaneVisible = () => {
+    const { searchPaneVisible } = this.state;
+    this.setState({ searchPaneVisible: !searchPaneVisible });
   }
 
   handleExceptModel =(type)=>{
@@ -65,7 +76,7 @@ class MaskContent extends Component {
   }
 
   render() {
-    const { planStarted, activeAction } = this.state;
+    const { planStarted, activeAction, searchPaneVisible } = this.state;
     const {
       multiple,
       onItemClick,
@@ -110,6 +121,7 @@ class MaskContent extends Component {
         <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
         { sideControlShow && <SideControl multiple={multiple} onItemClick={onItemClick} layerConfig={layerConfig} animationProps={controlAnimation} />}
         { sideControlShow && <DataPane animationProps={datapaneAnim} />}
+        <SearchPane visible={searchPaneVisible} changeSearchPaneVisible={() => this.changeSearchPaneVisible}/>
         <TopMsg alarmStart={alarmStart} />
         {!isShowActionBar && <ModelHeader headerName={headerName} handleExceptModel={this.handleExceptModel} />}
         {isShowActionBar && <ActionBar activeAction={activeAction} onActionItemClick={(e) => this.actionBarClick(e)} animationProps={controlAnimation}/> }

mods/components/3dviewConvertor/view/View3D.js

@@ -1279,9 +1279,9 @@ class View3D extends Component {
   }
 
   getExceptionAreaList = () => {
-    exceptionRegionListAction().then(data=>{
-      this.setState({ exceptionAreas: data });
-    });
+    // exceptionRegionListAction().then(data=>{
+    //   this.setState({ exceptionAreas: data });
+    // });
   }
 
   renderPolygonRegion = (exceptionAreas)=> {

mods/components/3dviewConvertor/view/conf.js

@@ -83,7 +83,8 @@ export const actionBars = [
   { key: 'panoramic-action', icon: 'panoramic', type: 'panoramic', singleClick: false, label: '全景', showLabel: true },
   { key: 'burst-action', icon: 'burst', type: 'burst', singleClick: true, label: '分解' , showLabel: false },
   { key: 'fitview-action', icon: 'fitview', type: 'fitview', singleClick: true, label: '初始视图' , showLabel: false },
-  { key: 'edit-action', icon: 'editMode', type: 'editMode', singleClick: false, label: '编辑' , showLabel: true }
+  { key: 'edit-action', icon: 'editMode', type: 'editMode', singleClick: false, label: '编辑' , showLabel: true },
+  { key: 'search-action', icon: 'editMode', type: 'search', singleClick: true, label: '检索' , showLabel: true }
 ];
 
 /**

mods/components/3dviewConvertor/view/searchPane/index.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { SidePane, Tabs } from 'amos-framework';
+import Icon from 'amos-icon';
+import ParamsHeader from './paramsHeader';
+import AmosGridTable from './../common/tableComponent/table/AmosGridTable';
+import {
+  searchAction
+} from './../../services/3dService';
+
+const { TabList, Tab, TabPanel } = Tabs;
+
+const getColumns = (self,retrieveType) => {
+  switch (retrieveType) {
+    case 'riskSource':
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '25%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '25%'},
+        {title: '等级',dataIndex: 'level',key: 'level',width: '25%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '25%'}
+      ];
+    case 'patrol':
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '16.5%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '16.5%'},
+        {title: '路线',dataIndex: 'routeName',key: 'level',width: '16.5%'},
+        {title: '状态',dataIndex: 'title',key: 'level',width: '16.5%'},
+        {title: '责任人',dataIndex: 'person',key: 'level',width: '16.5%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '16.5%'}
+      ];
+    case 'monitorEquipment':
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '25%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '25%'},
+        {title: '监控对象',dataIndex: 'level',key: 'protectObjName',width: '25%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '25%'}
+      ]
+    case 'video':
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '25%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '25%'},
+        {title: '监控对象',dataIndex: 'level',key: 'protectObjName',width: '25%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '25%'}
+      ]
+    default:
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '33%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '33%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '33%'}
+      ];
+  }
+};
+
+const tabs = [
+  { id: '1', key: 'search', closable: false, title: '检索' },
+  { id: '2', key: 'message', closable: false, title: '消息' },
+  { id: '3', key: 'contingency', closable: false, title: '预案' },
+];
+
+class SearchPane extends Component {
+
+  constructor(props){
+    super(props);
+    this.pageConfig = {
+      current: 0,
+      pageSize: 10
+    },
+    this.state = {
+      activeKey: 'search',
+      filter: [],
+      dataList: [],
+      retrieveType: undefined,
+      totalCount: 0,
+      filter: []
+    };
+  }
+
+  componentDidMount() {
+    const { type } = this.props;
+    const { activeKey } = this.state;
+    this.fetchRetrieveData();
+  }
+
+  // onSearch = (page) => {
+    
+  //   searchAction(inputText, dataLevel, orgCode, nodeState, protectObjName, routeName, type, page || 0, pageSize).then(d => {
+  //     // 填充列表数据
+  //     this.listRef.setData(d, this);
+  //   });
+  // }
+
+  retrieveOnChange = (filter) => {
+    // const { pageSize } = this.state;
+    this.setState({filter},this.fetchRetrieveData);
+    
+  }
+
+  
+    /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+          this.setState({ selectedRows: [], selectedRowKeys: [] });
+        }
+      },
+      r()
+    );
+  };
+
+  onTabClick = (value) =>{
+    console.log(value)
+    if(value === 'search'){
+      this.fetchRetrieveData();
+    }else if(value === 'search'){
+
+    }else{
+
+    }
+    this.setState({ activeKey:value });
+  }
+
+  getPanelHeight = () => {
+    return 700;
+  };
+
+  fetchRetrieveData = ()=> {
+    const { filter } = this.state;
+    let inputText = '';
+    let dataLevel = '';
+    let orgCode = '';
+    let nodeState = '';
+    let type = '';
+    let routeName = '';
+    let protectObjName = '';
+    ( filter || [] ).forEach((item, i) => {
+      if (item.name === 'type') {
+        type = item.value;
+        this.setState({ retrieveType: type })
+      } else if (item.name === 'dataLevel') {
+        dataLevel = item.value;
+      } else if (item.name === 'nodeState') {
+        nodeState = item.value;
+      } else if (item.name === 'inputText'){
+        inputText = item.value;
+      } else if (item.name === 'route'){
+        routeName = item.value;
+      }  else if (item.name === 'impEquipment'){
+        protectObjName = item.value;
+      }
+    });
+
+    searchAction(inputText, dataLevel, orgCode, nodeState, protectObjName, routeName, type,  this.pageConfig.current, this.pageConfig.pageSize).then(d => {
+      this.setState({ 
+        dataList: d.content ,
+        totalCount: d.totalElements,
+       })
+    });
+  }
+
+  setPageConfig = ({ pageSize, current }) => {
+    if (pageSize !== undefined) {
+      this.pageConfig.pageSize = pageSize;
+    }
+    if (current !== undefined) {
+      this.pageConfig.current = current - 1;
+    }
+  };
+
+  render() {
+    const { dataList,activeKey,retrieveType,totalCount } = this.state;
+    return (
+      <div>
+        { this.props.visible && <div className="search-pane-bg"/> }
+        <SidePane className="search-pane" animateName="zoom-right"  visible={ this.props.visible }>
+          <div className="search-pane-close" onClick={this.props.changeSearchPaneVisible}>
+            <Icon icon="close" />
+          </div>
+          <Tabs 
+            activeKey={activeKey}
+            onChange={(index, key) => this.onTabClick(key)}
+          >
+            <TabList>
+              {tabs.map((item, i) => (
+                <Tab key={item.key} activeKey={item.key} closable={item.closable}>{item.title}</Tab>)
+              )}
+            </TabList>
+            <ParamsHeader retrieveOnChange={this.retrieveOnChange} retrieveType='search'/>
+            <TabPanel activeKey="search">
+              <div className="search-pane-table">
+                <AmosGridTable
+                  columns={getColumns(this,retrieveType)}
+                  getTableDataAction={()=>{}} 
+                  callBack={this.reload}
+                  isPageable = {true}
+                  setPageConfig={this.setPageConfig}
+                  isChecked = {false}
+                  // getPanelHeight={this.getPanelHeight}
+                  dataList={dataList}
+                  totals={totalCount}
+                  getTableDataAction={this.fetchRetrieveData}
+                /> 
+              </div>
+            </TabPanel>
+            <TabPanel activeKey="message">消息</TabPanel>
+            <TabPanel activeKey="contingency">预案</TabPanel>
+          </Tabs>
+        </SidePane>
+      </div>
+    );
+  }
+}
+
+SearchPane.propTypes = {
+};
+
+export default SearchPane;

mods/components/3dviewConvertor/view/searchPane/paramsHeader.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Select, Group } from 'amos-framework';
+import { trim } from 'amos-tool';
+import imgStatic from './../../consts/imgStatic';
+import {
+  getImpEquipmentAction
+} from './../../services/3dService';
+
+import { bizControlsTypes, riskSourceLevel } from './../conf';
+
+const Option = Select.Option;
+
+const enterkey = 13;
+/**
+ *
+ * @class paramsHeader
+ * @extends {Component}
+ */
+class paramsHeader extends Component {
+
+  static defaultProps = {
+    retrieveType: 'input'
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: '',
+      textValue: undefined,
+      showRiskLevel: false,
+      showImpEquiList: false,
+      impEquiList: [],
+      filter: []
+    };
+  }
+
+  componentDidMount() {
+    getImpEquipmentAction().then(d => this.setState({ impEquiList: d }));
+  }
+
+  onChange = (e) => {
+    this.setState({ value: e.target.value });
+  }
+
+  onSearchTypeChange = (value) => {
+    let showRiskLevel = false;
+    let showImpEquiList = false;
+
+    if(value === 'riskSource'){
+      showRiskLevel = true;
+    }else if(value === 'monitorEquipment'){
+      showImpEquiList = true;
+    }
+    this.setState({ showRiskLevel, showImpEquiList });
+    this.onPamarmsChange('type',value);
+  }
+
+  onPamarmsChange = (name,value) => {
+    let { filter } = this.state;
+    if(name === 'inputText'){
+      value = value.target.value;
+      this.setState({ textValue: value })
+    }
+    if (value) {
+      const flag = filter.some(e => {
+        if (e.name === name) {
+          e.value = value;
+          return true;
+        }
+      });
+      !flag && filter.push({ name, value });
+    } else {
+      filter = filter.filter(e => e.name !== name);
+    }
+    this.setState({ filter }, this.props.retrieveOnChange(filter));
+  }
+
+  getSearchContent = () => {
+    const { retrieveType } = this.props;
+    const { showRiskLevel, showImpEquiList, impEquiList  } = this.state;
+    if (retrieveType === 'input') {
+      return (<Input
+        value={this.state.value}
+        onChange={this.onChange}
+        // onKeyPress={this.keypress}
+      />);
+    } else if (retrieveType === 'select') {
+      return (
+        <Select
+          data={bizControlsTypes}
+          renderOption={item => <Option value={item.key}>{item.label}</Option>}
+          defaultOption={<Option>请选择</Option>}
+          onChange={this.onSelectChange}
+        />);
+    } else if (retrieveType === 'search') {
+      let groupStyle = { display: 'unset', width: '70%' };
+      let selectStyle = { width: '25%', minWidth: '20%', marginRight:'14px' };
+      let inputStyle = { width: '30%', minWidth: '20%', height: '28px', marginRight:'14px' };
+      let levelStyle = { width: '20%', minWidth: '15%', height: '28px', marginRight:'14px' };
+      let implStyle = { width: '35%', minWidth: '20%', height: '28px', marginRight:'14px' };
+      return (<Group style={groupStyle}>
+        <Select
+          style={selectStyle}
+          data={bizControlsTypes}
+          renderOption={item => <Option value={item.key}>{item.label}</Option>}
+          defaultOption={<Option>全部</Option>}
+          onChange={this.onSearchTypeChange}
+        />
+        <div className="params-input" style={inputStyle}>
+          <Input
+            value={this.state.textValue}
+            onChange={(v) => this.onPamarmsChange('inputText',v)}
+            // onKeyPress={this.keypress}
+            placeholder="输入关键字"
+          />
+          <img className="params-input-img" src={imgStatic.datapane.search} alt="" />
+        </div>
+        {
+          showRiskLevel && 
+          <Select
+            style={levelStyle}
+            data={riskSourceLevel}
+            renderOption={item => <Option value={item.key}>{item.label}</Option>}
+            defaultOption={<Option>全部</Option>}
+            onChange={(v) => this.onPamarmsChange('dataLevel',v)}
+        />
+        }
+        {
+          showImpEquiList && 
+          <Select
+            style={implStyle}
+            data={impEquiList}
+            renderOption={item => <Option value={item.name}>{item.name}</Option>}
+            defaultOption={<Option>全部</Option>}
+            onChange={(v) => this.onPamarmsChange('impEquipment',v)}
+        />
+        }
+      </Group>);
+    }
+  }
+
+  // keypress = (e) => {
+  //   if (e.which === enterkey ){
+  //     this.props.onSearch(trim(this.state.value || ''));
+  //   }
+  //   return;
+  // }
+
+  render() {
+    return (
+      <div className="params-header">
+        {
+          this.getSearchContent()
+        }
+        
+      </div>
+    );
+  }
+}
+
+paramsHeader.propTypes = {
+  width: PropTypes.any,
+  onSearch: PropTypes.func,
+  retrieveOnChange: PropTypes.func,
+  dataList: PropTypes.array,
+  searchType: PropTypes.string
+};
+
+export default paramsHeader;