[add-description]：Added Viewing Information

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -112,6 +112,13 @@ class ToolbarRow extends Component {
       icon: 'th-large',
       bottomLabel: this.props.t('Series'),
     });
+
+    //查看元信息
+    this.buttonGroups.right.unshift({
+      value: 'look-info',
+      icon: 'search-plus',
+      bottomLabel: this.props.t('查看信息'),
+    });
   }
 
   componentDidMount() {
@@ -145,6 +152,7 @@ class ToolbarRow extends Component {
       prevProps.activeContexts !== this.props.activeContexts;
 
     const prevStudies = prevProps.studies;
+
     const prevActiveViewport = prevProps.activeViewport;
     const activeViewport = this.props.activeViewport;
     const studies = this.props.studies;

platform/viewer/src/connectedComponents/Viewer.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import OHIF, { MODULE_TYPES, DICOMSR } from '@ohif/core';
 import { withDialog } from '@ohif/ui';
 import moment from 'moment';
+import LookInfo from './lookInfo.js';
 
 import ConnectedHeader from './ConnectedHeader.js';
 import ToolbarRow from './ToolbarRow.js';
@@ -298,6 +299,8 @@ class Viewer extends Component {
           VisiblePanelRight = comp.component;
         } else if (comp.id === this.state.selectedLeftSidePanel) {
           VisiblePanelLeft = comp.component;
+        } else if ('look-info' === this.state.selectedRightSidePanel) {
+          VisiblePanelRight = props => <LookInfo {...props} />;
         }
       });
     });

platform/viewer/src/connectedComponents/lookInfo.css

@@ -0,0 +1,53 @@
+.measurementTableHeader {
+  padding-left: 0px;
+}
+
+.measurementTableHeaderItem {
+  display: inline-block;
+  margin-top: 9px;
+  margin-left: 9px;
+  padding-left: 9px;
+  width: 90px;
+  font-size: 14px;
+  line-height: 20px;
+  border-left: 1px solid var(--text-secondary-color);
+  color: var(--text-primary-color);
+}
+.timepointLabel {
+  color: var(--text-secondary-color);
+  font-size: 12px;
+}
+
+.info-item {
+  display: flex;
+  background-color: var(--ui-gray-darker);
+  color: var(--text-secondary-color);
+  display: flex;
+  height: 63px;
+  line-height: 63px;
+  margin-top: 10px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.info-item-title {
+  color: var(--text-secondary-color);
+  /* max-width: 230px; */
+  font-size: 17px;
+  font-weight: 300;
+  line-height: 63px;
+  padding: 0 10px;
+  text-align: left;
+  flex: 1;
+}
+
+.info-item-items {
+  color: var(--ui-sky-blue);
+  flex: 2;
+  float: right;
+  font-weight: 300;
+  font-size: 17px;
+  /* max-width: 54px; */
+  height: 63px;
+  line-height: 66px;
+}

platform/viewer/src/connectedComponents/lookinfo.js

@@ -0,0 +1,107 @@
+/*
+ * @Description:
+ * @Author: Devin
+ * @Date: 2022-12-16 11:44:33
+ */
+import React from 'react';
+import './lookInfo.css';
+// import { Input, Tree } from 'antd';
+
+const LookInfo = props => {
+  console.log('props: ', props);
+  const renderItem = studies => {
+    const list = [
+      { key: 'PatientID', label: '患者ID' },
+      { key: 'PatientName', label: '患者姓名' },
+      { key: 'BirthDay', label: '出生日期' },
+      { key: 'Sex', label: '性别' },
+      { key: 'StudyDate', label: '检查日期' },
+      { key: 'StudyTime', label: '检查时间' },
+      { key: 'Modality', label: '成像设备' },
+      { key: 'series', label: '序列数量' },
+    ];
+
+    const newList = [
+      { key: 'ContentDate', label: '检查日期' },
+      { key: 'ContentTime', label: '检查时间' },
+    ];
+
+    return list
+      .map(item => {
+        let value = studies[item.key];
+        if (item.key == 'series') {
+          value = studies[item.key].length;
+        }
+        if (item.key == 'Modality') {
+          value = studies['series'][0].Modality;
+        }
+
+        if (item.key == 'StudyDate') {
+          value =
+            studies[item.key].slice(0, 4) +
+            '年' +
+            studies[item.key].slice(4, 6) +
+            '月' +
+            studies[item.key].slice(6, 8) +
+            '日';
+        }
+        if (item.key == 'StudyTime') {
+          value =
+            studies[item.key].slice(0, 2) +
+            ':' +
+            studies[item.key].slice(2, 4) +
+            ':' +
+            studies[item.key].slice(4, 6);
+        }
+        if (!value) {
+          return false;
+        }
+        return getCustomHeader({ ...item, value });
+      })
+      .filter(i => !!i);
+  };
+
+  const treeData = [
+    {
+      title: '1',
+      key: '1',
+    },
+    {
+      title: '2',
+      key: '2',
+    },
+  ];
+
+  const getCustomHeader = info => {
+    return (
+      <React.Fragment key={info.key}>
+        <div className="info-item">
+          <div className="info-item-title">
+            {/* {this.props.t(measureGroup.groupName)} */}
+            <span>{info.label} ：</span>
+          </div>
+          <div className="info-item-items">
+            {/* {measureGroup.measurements.length} */}
+            <span>{info.value}</span>
+          </div>
+          {/* <Tree treeData></Tree> */}
+        </div>
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <div className="look-info">
+      <div className="measurementTableHeader">
+        <div className="measurementTableHeaderItem">
+          <div className="timepointLabel">患者信息</div>
+        </div>
+      </div>
+      {props.studies && (
+        <div className="info">{renderItem(props.studies[0])}</div>
+      )}
+    </div>
+  );
+};
+
+export default LookInfo;