扫码出入库系统——UI设计

一、项目简介

本次项目为扫码出入库开发上位机控制系统，功能包括扫码、信息管理、与PLC数据交互等功能

前端部分通过C#——winform实现工业软件前端开发

项目使用外接控件sunnyUI基于.NET Framework4.0-4.8

二、UI设计

2.1 登录界面设计

效果展示

登录界面

注册界面

找回密码界面

登录界面通过txtName_TextChanged输入框控件与MySQL数据库交互匹配登录用户信息

2.1系统界面

1.出入库界面

效果展示

重要控件部分代码

相机调用接口

调用 AForge.Video.DirectShow

1
2
3
4
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
30
31
32
33
        private void uiComboBox2_SelectedIndexChanged(object sender, EventArgs e)
        {
            videodevice = new VideoCaptureDevice(videodevices[uiComboBox2.SelectedIndex].MonikerString);

            videoSourcePlayer1.VideoSource = videodevice;
            videoSourcePlayer1.SignalToStop();
            videoSourcePlayer1.WaitForStop();
            videoSourcePlayer1.Start();
        }       
//打开相机
		private void videoSourcePlayer1_Click(object sender, EventArgs e)
        {
            videodevices = new FilterInfoCollection(FilterCategory.VideoInputDevice);//得到所有接入的摄像设备
          
            if (videodevices.Count != 0)
            {
                foreach (FilterInfo device in videodevices)
                {
                   
                    uiComboBox2.Items.Add(device.Name);//把摄像设备添加到摄像列表中          
                }
            }
            else
            {
                MessageBox.Show("没有找到摄像头！");
            }

        }
//关闭相机
        private void uiSymbolButton2_Click_1(object sender, EventArgs e)
        {
            videoSourcePlayer1.Stop();
        }

2资源管理

效果展示

调用数据库，后端处理

3用户管理

效果展示

调用数据库后端处理

通过使用NavMenu菜单导航页面将系统页面进行展示

代码部分：

1
2
3
4
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
private void CreateTreeNode()
 {
     int pageIndex = 1000;
     //一级节点
    
     TreeNode parent2 = Aside.CreateNode("出库&入库", 62094, 22, pageIndex);
     Aside.CreateChildNode(parent2, "出库&入库", ++pageIndex);
     Aside.CreateChildNode(parent2, "物资管理", ++pageIndex);
     Aside.CreateChildNode(parent2, "用户管理", ++pageIndex);


 }
private void LoadForm(TabControl mainTabControl, string menuText, Type fromType)
 {
     Form frm = (Form)Activator.CreateInstance(fromType);
     frm.Text = menuText;
     frm.FormBorderStyle = FormBorderStyle.None;
     frm.TopLevel = false;
     frm.Dock = DockStyle.Fill;

     TabPage StabPage = new TabPage(menuText);
     StabPage.Font = new Font("宋体", 9F);
     StabPage.Controls.Add(frm);

     mainTabControl.Controls.Add(StabPage);
     mainTabControl.SelectedTab = StabPage;

     frm.Show();

 }
private void uiNavMenu1_MenuItemClick(TreeNode node, Sunny.UI.NavMenuItem item, int pageIndex)
 {
     if (item != null)
     {
         string menuText = item.Text;
         foreach (TabPage tab in MainTabControl2.TabPages)
         {
             if (tab.Text == menuText)
             {
                 MainTabControl2.SelectedTab = tab;
                 return;
             }
         }
         switch (menuText)
         {

             case "出库&入库":
                 LoadForm(MainTabControl2, menuText, typeof(Forms.Form4));
                 break;
             case "物资管理":
                 LoadForm(MainTabControl2, menuText, typeof(Forms.Form6));
                 break;
             case "用户管理":
                 LoadForm(MainTabControl2, menuText, typeof(Forms.Form7));
                 break;
          
             default:
                 break;
         }

     }
 }

4相机设置界面

5通讯设置界面

image-20250302012008747