第三个看板开发

config/routes.ts

@@ -118,13 +118,13 @@ export default [
         layout: false,
         component: './kanban/paintingProcessKanban',
       },
-      // {
-      //   path: 'productionProgressKanban',
-      //   name: 'productionProgressKanban',
-      //   target: '_blank',
-      //   layout: false,
-      //   component: './kanban/ProductionProgress',
-      // },
+      {
+        path: 'productionProgressKanban',
+        name: 'productionProgressKanban',
+        target: '_blank',
+        layout: false,
+        component: './kanban/ProductionProgress',
+      },
       // {
       //   path: 'materialSynthesisKanban',
       //   name: 'materialSynthesisKanban',

src/locales/th-TH/kanban.ts

@@ -54,7 +54,11 @@ export default {
     '状态': 'สถานะ',
     '产线选择': 'การเลือกสายการผลิต',
     '日产出': 'นิสสัน',
-    '生产计划看板': 'แผนการผลิต Kanban'
+    '生产计划看板': 'แผนการผลิต Kanban',
+    '日期': 'วันที่',
+    '产品': 'ผลิตภัณฑ์',
+    '计划数': 'จำนวนแผน',
+    '工序': 'ขั้นตอนการทำงาน'
 }
 ;
   
\ No newline at end of file

src/locales/zh-CN/kanban.ts

@@ -54,6 +54,10 @@ export default {
     '状态': '状态',
     '产线选择': '产线选择',
     '日产出': '日产出',
-    '生产计划看板': '生产计划看板'
+    '生产计划看板': '生产计划看板',
+    '日期': '日期',
+    '产品': '产品',
+    '计划数': '计划数',
+    '工序': '工序'
   };
   
\ No newline at end of file

src/pages/Welcome.less

@@ -67,6 +67,11 @@
       background-image: url('./img/2.png');
     }
   }
+  &:nth-child(3) {
+    .imgWapper {
+      background-image: url('./img/3.png');
+    }
+  }
 }
 .logout {
   position: absolute;

src/pages/kanban/ProductionProgress/components/ProgressTable/index.less

@@ -52,10 +52,15 @@ div.no_right_border {
 }
 .row_segment1_section1 {
   width: 132px;
+  height: auto;
   &:extend(.row_section);
+  &>div {
+    display: flex;
+    align-items: center;
+  }
 }
 .row_segment1_section2 {
-  width: 150px;
+  width: 170px;
   &:extend(.row_section);
 }
 .row_segment1_section3 {
@@ -66,23 +71,31 @@ div.no_right_border {
   width: calc(100% - 132px) !important;
 }
 .row_segment1_section4_header {
-  width: calc(100% - 150px - 100px - 132px);
+  width: calc(100% - 160px - 100px - 132px);
   &:extend(.row_section);
 }
 .row_segment1_section4 {
-  width: calc(100% - 150px - 100px);
+  width: calc(100% - 160px - 100px);
   &:extend(.row_section);
   display: flex;
   flex-wrap: wrap;
 }
 .process_item {
   width: calc(100% / 4) !important;
+  &>div{
+    border: 1px solid #0ff;
+  }
 }
 .process_value {
   display: flex;
   width: 100%;
   &>div {
     width: calc(100% / 3) !important;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    justify-content: center;
+    border: 1px solid #0ff;
   }
 }
 
@@ -97,3 +110,13 @@ div.no_right_border {
   word-wrap: break-word;
   word-break: break-all;
 }
+
+.leftWrapper {
+  height: 100%;
+  overflow: auto;
+  -ms-overflow-style: none;  /* IE 和 Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.leftWrapper::-webkit-scrollbar {
+  display: none;  /* Chrome, Safari 和 Opera */
+}
\ No newline at end of file

src/pages/kanban/ProductionProgress/components/SettingForm/index.tsx

@@ -7,6 +7,7 @@ import ProForm, {
   ProFormRadio,
   ProFormSelect,
 } from '@ant-design/pro-form';
+import { Button } from 'antd';
 import type { ProFormInstance } from '@ant-design/pro-form';
 import { queryProductionComprehensKanbanData } from '../../services/api';
 type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
@@ -38,11 +39,38 @@ export type SettingFormProps = {
 
 const SettingForm: React.FC<SettingFormProps> = (props) => {
   const formRef = useRef<ProFormInstance>();
+  const btn = useRef<HTMLButtonElement>(null);
+  const btn1 = useRef<HTMLButtonElement>(null);
   const intl = useIntl();
   const [lineName, setLineName] = useState<
     KanbanSetting[]
   >([]);
-
+  const [lineNameFocus, setlineNameFocus] = useState(false);
+  const onPressEnter = (e) => {
+    setlineNameFocus(true)
+  };
+  const onInputKeyDown = (e) => {
+    const a = document.getElementsByClassName('ant-select-open')
+    if (e.code === "ArrowDown" && a.length === 0) {
+      e.preventDefault()
+      btn.current?.focus()
+    }
+  }
+  const cancelBtn = (e) => {
+    if (e.code === "ArrowRight") {
+      btn1.current?.focus()
+    } else if (e.code === "ArrowUp") {
+      setlineNameFocus(true)
+    }
+  }
+  const submitBtn = (e) => {
+    if (e.code === "ArrowLeft") {
+      btn.current?.focus()
+    }
+  }
+  const onBlurlineName = () => {
+    setlineNameFocus(false)
+  }
   return (
     <DrawerForm
       formRef={formRef}
@@ -52,6 +80,29 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
         searchConfig: {
           resetText: intl.formatMessage({id: '取消'}),
           submitText: intl.formatMessage({id: '确认'}),
+        },
+        render: (props1, doms) => {
+          console.log(props1);
+          return [
+            <button
+              type='button'
+              key="rest"
+              ref={btn}
+              onKeyDown={cancelBtn}
+              onClick={() => props.onVisibleChange(false)}
+            >
+              {intl.formatMessage({id: '取消'})}
+            </button>,
+            <button
+              type='button'
+              ref={btn1}
+              key="submit"
+              onKeyDown={submitBtn}
+              onClick={() => props1.form?.submit?.()}
+            >
+              {intl.formatMessage({id: '确认'})}
+            </button>,
+          ];
         }
       }}
       visible={props.visible}
@@ -61,6 +112,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
             ...props.values
           });
         }
+        setlineNameFocus(false)
         props.onVisibleChange(visible);
       }}
       onFinish={async (values: FormSettingDto) => {
@@ -83,12 +135,14 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
         required
         width="xl"
         min={1}
-        fieldProps={{ precision: 0 }}
+        fieldProps={{ precision: 0, onPressEnter: onPressEnter }}
       />
+      <div >
       <ProFormSelect
         name="lineName"
         label={intl.formatMessage({id: '产线选择'})}
         required
+        fieldProps={{ autoFocus: lineNameFocus, onInputKeyDown: onInputKeyDown, onBlur: () => onBlurlineName }}
         width="xl"
         request={async () => {
           const { data } = await queryProductionComprehensKanbanData();
@@ -100,7 +154,11 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
           setLineName(data);
           return data.map((a) => ({ label: a, value: a }));
         }}
-      />
+        />
+      </div>
+      
+      
+      
     </DrawerForm>
   );
 };

src/pages/kanban/ProductionProgress/index.tsx

@@ -60,6 +60,7 @@ const Main: React.FC = () => {
       <KanbanStyle
         headerText={intl.formatMessage({id:'生产计划看板'})}
         subTitle={setting?.lineName}
+        headerStyle={{fontSize: '30px'}}
         autoResize={setting.autoResize}
         onHeaderClick={() => {
           setSettingFormVisible(true);

src/pages/kanban/components/FHD1080P/Style2/index.less

@@ -28,8 +28,8 @@
 }
 
 .leftheader {
-  width: 220px;
-  padding: 26px 0 0 50px;
+  width: 245px;
+  padding: 26px 0 0 25px;
   color: #fff;
   font-size: 21px;
   text-align: center;

src/pages/kanban/paintingProcessKanban/components/SettingForm/index.tsx

@@ -7,6 +7,7 @@ import ProForm, {
   ProFormRadio,
   ProFormSelect,
 } from '@ant-design/pro-form';
+import { Button } from 'antd';
 import type { ProFormInstance } from '@ant-design/pro-form';
 import { queryProductionComprehensKanbanData } from '../../services/api';
 type KanbanSetting = KANBAN.ProductionComprehens.ProductionComprehensKanbanDataDto;
@@ -37,31 +38,39 @@ export type SettingFormProps = {
 };
 
 const SettingForm: React.FC<SettingFormProps> = (props) => {
-  const intervalTimeRef = useRef<HTMLDivElement>(null);
-  const rowMovingTimeRef = useRef<HTMLDivElement>(null);
-  const lineNameRef = useRef<HTMLDivElement>(null);
   const formRef = useRef<ProFormInstance>();
+  const btn = useRef<HTMLButtonElement>(null);
+  const btn1 = useRef<HTMLButtonElement>(null);
   const intl = useIntl();
   const [lineName, setLineName] = useState<
     KanbanSetting[]
   >([]);
-  const handleKeyDown = (e, name) => {
-    if (e.key === 'ArrowUp') {
-      if(name === 'lineName') {
-        rowMovingTimeRef.current?.children[0].focus()
-      } else if (name === 'rowMovingTime') {
-        intervalTimeRef.current?.children[0].focus()
-      }
-      // 在这里添加你的增加逻辑
-    } else if (e.key === 'ArrowDown') {
-      if(name === 'intervalTime') {
-        rowMovingTimeRef.current?.children[0].focus()
-      } else if (name === 'rowMovingTime') {
-        lineNameRef.current?.children[0].focus()
-      }
-      // 在这里添加你的减少逻辑
-    }
+  const [lineNameFocus, setlineNameFocus] = useState(false);
+  const onPressEnter = (e) => {
+    setlineNameFocus(true)
   };
+  const onInputKeyDown = (e) => {
+    const a = document.getElementsByClassName('ant-select-open')
+    if (e.code === "ArrowDown" && a.length === 0) {
+      e.preventDefault()
+      btn.current?.focus()
+    }
+  }
+  const cancelBtn = (e) => {
+    if (e.code === "ArrowRight") {
+      btn1.current?.focus()
+    } else if (e.code === "ArrowUp") {
+      setlineNameFocus(true)
+    }
+  }
+  const submitBtn = (e) => {
+    if (e.code === "ArrowLeft") {
+      btn.current?.focus()
+    }
+  }
+  const onBlurlineName = () => {
+    setlineNameFocus(false)
+  }
   return (
     <DrawerForm
       formRef={formRef}
@@ -71,6 +80,29 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
         searchConfig: {
           resetText: intl.formatMessage({id: '取消'}),
           submitText: intl.formatMessage({id: '确认'}),
+        },
+        render: (props1, doms) => {
+          console.log(props1);
+          return [
+            <button
+              type='button'
+              key="rest"
+              ref={btn}
+              onKeyDown={cancelBtn}
+              onClick={() => props.onVisibleChange(false)}
+            >
+              {intl.formatMessage({id: '取消'})}
+            </button>,
+            <button
+              type='button'
+              ref={btn1}
+              key="submit"
+              onKeyDown={submitBtn}
+              onClick={() => props1.form?.submit?.()}
+            >
+              {intl.formatMessage({id: '确认'})}
+            </button>,
+          ];
         }
       }}
       visible={props.visible}
@@ -80,6 +112,7 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
             ...props.values
           });
         }
+        setlineNameFocus(false)
         props.onVisibleChange(visible);
       }}
       onFinish={async (values: FormSettingDto) => {
@@ -88,46 +121,44 @@ const SettingForm: React.FC<SettingFormProps> = (props) => {
       }}
     >
       <ProFormCheckbox name="autoResize" label={intl.formatMessage({id: '适配窗口'})} width="xl" />
-      <div onKeyDown={(e)=>handleKeyDown(e, 'intervalTime')} ref={intervalTimeRef}>
-        <ProFormDigit
-          name="intervalTime"
-          label={intl.formatMessage({id: '刷新时间间隔（秒）'})}
-          required
-          width="xl"
-          min={10}
-          fieldProps={{ precision: 0 }}
-        />
-      </div>
-      <div onKeyDown={(e)=>handleKeyDown(e, 'rowMovingTime')} ref={rowMovingTimeRef}>
-        <ProFormDigit
-          name="rowMovingTime"
-          label={intl.formatMessage({id: '内容滚动（秒）'})}
-          required
-          width="xl"
-          min={1}
-          fieldProps={{ precision: 0 }}
-        />
-      </div>
-      <div onKeyDown={(e)=>handleKeyDown(e, 'lineName')}>
-        <ProFormSelect
-          name="lineName"
-          label={intl.formatMessage({id: '产线选择'})}
-          required
-          ref={lineNameRef}
-          width="xl"
-          request={async () => {
-            const { data } = await queryProductionComprehensKanbanData();
-            if (Array.isArray(data)) {
-              data.unshift(intl.formatMessage({
-                id: '全厂'
-              }))
-            }
-            setLineName(data);
-            return data.map((a) => ({ label: a, value: a }));
-          }}
+      <ProFormDigit
+        name="intervalTime"
+        label={intl.formatMessage({id: '刷新时间间隔（秒）'})}
+        required
+        width="xl"
+        min={10}
+        fieldProps={{ precision: 0 }}
+      />
+      <ProFormDigit
+        name="rowMovingTime"
+        label={intl.formatMessage({id: '内容滚动（秒）'})}
+        required
+        width="xl"
+        min={1}
+        fieldProps={{ precision: 0, onPressEnter: onPressEnter }}
+      />
+      <div >
+      <ProFormSelect
+        name="lineName"
+        label={intl.formatMessage({id: '产线选择'})}
+        required
+        fieldProps={{ autoFocus: lineNameFocus, onInputKeyDown: onInputKeyDown, onBlur: () => onBlurlineName }}
+        width="xl"
+        request={async () => {
+          const { data } = await queryProductionComprehensKanbanData();
+          if (Array.isArray(data)) {
+            data.unshift(intl.formatMessage({
+              id: '全厂'
+            }))
+          }
+          setLineName(data);
+          return data.map((a) => ({ label: a, value: a }));
+        }}
         />
       </div>
       
+      
+      
     </DrawerForm>
   );
 };