From 557b6d1ca42816cc690fb5b2a2dc6fd167eec0dc Mon Sep 17 00:00:00 2001
From: chenxx <398384209@qq.com>
Date: Thu, 30 Oct 2025 19:01:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=90=8E=E5=88=9D=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
cy_large_screen/src/App.vue | 2104 ++---------------
cy_large_screen/src/REFACTOR_EXAMPLE.md | 143 ++
cy_large_screen/src/REFACTOR_PLAN.md | 153 ++
cy_large_screen/src/STYLE_FIX_COLORS.md | 104 +
cy_large_screen/src/STYLE_FIX_SUMMARY.md | 153 ++
cy_large_screen/src/STYLE_FIX_SUMMARY_V2.md | 208 ++
cy_large_screen/src/STYLE_FIX_TABLE_WIDTH.md | 104 +
.../src/STYLE_MIGRATION_COMPLETE.md | 267 +++
cy_large_screen/src/STYLE_QUICK_START.md | 200 ++
cy_large_screen/src/STYLE_REFACTOR_PLAN.md | 273 +++
cy_large_screen/src/components/LeftPanel.vue | 71 +
cy_large_screen/src/main.ts | 8 +-
cy_large_screen/src/styles/animations.css | 121 +
.../src/styles/components/center-panel.css | 155 ++
.../src/styles/components/device-cards.css | 275 +++
.../src/styles/components/dialogs.css | 270 +++
.../src/styles/components/left-panel.css | 63 +
.../src/styles/components/right-panel.css | 348 +++
.../src/styles/components/sampling-barrel.css | 124 +
.../src/styles/element-plus-override.css | 179 ++
cy_large_screen/src/styles/index.css | 21 +
cy_large_screen/src/styles/layout.css | 142 ++
cy_large_screen/src/styles/reset.css | 20 +
23 files changed, 3542 insertions(+), 1964 deletions(-)
create mode 100644 cy_large_screen/src/REFACTOR_EXAMPLE.md
create mode 100644 cy_large_screen/src/REFACTOR_PLAN.md
create mode 100644 cy_large_screen/src/STYLE_FIX_COLORS.md
create mode 100644 cy_large_screen/src/STYLE_FIX_SUMMARY.md
create mode 100644 cy_large_screen/src/STYLE_FIX_SUMMARY_V2.md
create mode 100644 cy_large_screen/src/STYLE_FIX_TABLE_WIDTH.md
create mode 100644 cy_large_screen/src/STYLE_MIGRATION_COMPLETE.md
create mode 100644 cy_large_screen/src/STYLE_QUICK_START.md
create mode 100644 cy_large_screen/src/STYLE_REFACTOR_PLAN.md
create mode 100644 cy_large_screen/src/components/LeftPanel.vue
create mode 100644 cy_large_screen/src/styles/animations.css
create mode 100644 cy_large_screen/src/styles/components/center-panel.css
create mode 100644 cy_large_screen/src/styles/components/device-cards.css
create mode 100644 cy_large_screen/src/styles/components/dialogs.css
create mode 100644 cy_large_screen/src/styles/components/left-panel.css
create mode 100644 cy_large_screen/src/styles/components/right-panel.css
create mode 100644 cy_large_screen/src/styles/components/sampling-barrel.css
create mode 100644 cy_large_screen/src/styles/element-plus-override.css
create mode 100644 cy_large_screen/src/styles/index.css
create mode 100644 cy_large_screen/src/styles/layout.css
create mode 100644 cy_large_screen/src/styles/reset.css
diff --git a/cy_large_screen/src/App.vue b/cy_large_screen/src/App.vue
index 33b4328..2c5d608 100644
--- a/cy_large_screen/src/App.vue
+++ b/cy_large_screen/src/App.vue
@@ -7,6 +7,7 @@ import dayjs from 'dayjs'
// const url = 'http://112.33.111.160:8070'
const url = 'http://192.200.200.196:8070'
+// const url = 'http://127.0.0.1:8070'
// Element Plus 中文语言配置
const locale = zhCn
@@ -190,7 +191,10 @@ const canStatusDeviceMap = new Map([
['ns4;i=74', 'huancunqiguanbidaowei'], // 缓存器关闭到位反馈
['ns4;i=75', 'fengzhuangxitongjiuxu'], // 封装系统就绪反馈
['ns4;i=41', 'fengzhuangjijigouguzhang'], // 封装机机构总故障
+ ['ns4;i=59', 'caiyangxitongjiting'], // 采样系统急停
['ns4;i=60', 'fengzhuangxitongjiting'], // 封装系统急停报警
+ ['ns4;i=64', 'zhiyangkouyunxingfankui'], // 制样口运行反馈
+ ['ns4;i=70', 'liuguankouyunxingfankui'], // 溜管口运行反馈
// 其他必要状态
['ns4;i=2', 'manualAutoMode'], // 当前运行模式（上位机手自动模式）
@@ -678,6 +682,12 @@ const updateDeviceStatusOptimized = (data: any[]) => {
console.log(`⚠️ [${plcNodeId}] 封装机机构总故障: ${oldValue} → ${newValue}`)
}
break
+ case 'caiyangxitongjiting':
+ caiyangxitongjiting.value.val = newValue
+ if (debugMode.value && oldValue !== newValue) {
+ console.log(`⚠️ [${plcNodeId}] 采样系统急停: ${oldValue} → ${newValue}`)
+ }
+ break
case 'fengzhuangxitongjiting':
fengzhuangxitongjiting.value.val = newValue
@@ -685,6 +695,18 @@ const updateDeviceStatusOptimized = (data: any[]) => {
console.log(`🚨 [${plcNodeId}] 封装系统急停报警: ${oldValue} → ${newValue}`)
}
break
+ case 'zhiyangkouyunxingfankui':
+ zhiyangkouyunxingfankui.value.val = newValue
+ if (debugMode.value && oldValue !== newValue) {
+ console.log(`🚨 [${plcNodeId}] 制样口运行反馈: ${oldValue} → ${newValue}`)
+ }
+ break
+ case 'liuguankouyunxingfankui':
+ liuguankouyunxingfankui.value.val = newValue
+ if (debugMode.value && oldValue !== newValue) {
+ console.log(`🚨 [${plcNodeId}] 溜管口运行反馈: ${oldValue} → ${newValue}`)
+ }
+ break
}
// 添加到调试日志
@@ -780,7 +802,7 @@ const caiyangtoudongzuodaojishi = ref({
// 手动采样机间隔时间设置 (ns4;i=25)
const shodongcaiyangtougeshijian = ref({
id: 66,
- plcNodeId: 'ns4;i=66',
+ plcNodeId: 'ns4;i=78',
signalName: '手动采样头动作时间',
val: 0,
unit: '秒'
@@ -924,7 +946,12 @@ const fengzhuangjijigouguzhang = ref({
signalName: '封装机机构总故障',
val: ''
})
-
+//采样系统急停 59
+const caiyangxitongjiting = ref({
+ id: 7,
+ plcNodeId: 'ns4;i=59',
+ val: ''
+})
// 封装系统急停报警 (ns4;i=60)
const fengzhuangxitongjiting = ref({
id: 60,
@@ -933,6 +960,18 @@ const fengzhuangxitongjiting = ref({
val: ''
})
+const zhiyangkouyunxingfankui = ref({
+ id: 64,
+ plcNodeId: 'ns4;i=64',
+ signalName: '制样口运行反馈',
+ val: ''
+})
+const liuguankouyunxingfankui = ref({
+ id: 70,
+ plcNodeId: 'ns4;i=70',
+ signalName: '溜管口运行反馈',
+ val: ''
+})
// websocket
/// ns4;i=2 1手动，2自动，3检修
@@ -959,6 +998,7 @@ const zhiyangFangshi = ref({
plcNodeId: 'ns4;i=8',
val: '1' // 默认制样口，1=正转(制样口), 2=反转(溜管口), 3=停止
})
+
// 换桶重量 - 优化版本
const huanbuckezhongliang = ref('')
const setHuanBuckeZhongLiang = async (weight: any) => {
@@ -1722,23 +1762,23 @@ const setManualSampleInterval = async (val: any) => {
}
}
//自动采样间隔时间设置
-const setSampleHeadSampleInterval = async (val: any) => {
- console.log(val, '采样间隔时间设置')
- try {
- // 判断是修改哪个时间
- const value = val.target ? val.target.value : val
- const response = await axios.post(url + '/opc/control/sampleHeadSampleInterval?value=' + value)
- console.log(response.data, '采样间隔时间设置')
- if (response.data.code === 200) {
- ElMessage.success('采样间隔时间设置成功')
- runData()
- } else {
- ElMessage.error('指令发送失败')
- }
- } catch (error) {
- console.error('请求失败:', error)
- }
-}
+// const setSampleHeadSampleInterval = async (val: any) => {
+// console.log(val, '采样间隔时间设置')
+// try {
+// // 判断是修改哪个时间
+// const value = val.target ? val.target.value : val
+// const response = await axios.post(url + '/opc/control/sampleHeadSampleInterval?value=' + value)
+// console.log(response.data, '采样间隔时间设置')
+// if (response.data.code === 200) {
+// ElMessage.success('采样间隔时间设置成功')
+// runData()
+// } else {
+// ElMessage.error('指令发送失败')
+// }
+// } catch (error) {
+// console.error('请求失败:', error)
+// }
+// }
// 采样系统启动停止
const setcaiyangSystem = async (val: any) => {
@@ -1892,9 +1932,9 @@ const jiechu = async (item: any) => {
运行日志
-
+
-
+
{{ scope.row.val }}
@@ -1906,12 +1946,12 @@ const jiechu = async (item: any) => {
-
+
{{ scope.row.val }}
-
+
@@ -1919,9 +1959,9 @@ const jiechu = async (item: any) => {
-
+
- 解除报警
+ 解除
@@ -2020,60 +2060,7 @@ const jiechu = async (item: any) => {
查询历史
-
-
斗提机
-
-
- {{ doutiji.val == 1 ? '运行' : '停止' }}
-
-
-
-
-
-
二级皮带
-
-
- {{ erjipidai.val == 1 ? '运行' : '停止' }}
-
-
-
-
-
-
-
螺旋
输送机
-
-
- {{ luoxuanshusongji.val == 1 ? '运行' : '停止' }}
-
-
-
-
初级给料皮带
@@ -2084,26 +2071,26 @@ const jiechu = async (item: any) => {
-
- {{ zhengfan.val == 2 ? '运行' : '停止' }}
+
+ {{ zhengfan.val == 1 ? '运行' : '停止' }}
-
- {{ zhengfan.val == 1 ? '运行' : '停止' }}
+
+ {{ zhengfan.val == 2 ? '运行' : '停止' }}
@@ -2146,6 +2133,62 @@ const jiechu = async (item: any) => {
+
+
+
二级皮带
+
+
+ {{ erjipidai.val == 1 ? '运行' : '停止' }}
+
+
+
+
+
+
+
螺旋
输送机
+
+
+ {{ luoxuanshusongji.val == 1 ? '运行' : '停止' }}
+
+
+
+
+
+
斗提机
+
+
+ {{ doutiji.val == 1 ? '运行' : '停止' }}
+
+
+
+
采样模式
封装系统故障
-
+
@@ -2336,7 +2380,7 @@ const jiechu = async (item: any) => {
封装系统急停
-
+
+
+
+
+
+
+```
+
+### 迁移后（App.vue）：
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+## 优势
+
+### 1. 可维护性
+- ✅ 样式按功能模块组织
+- ✅ 快速定位和修改特定样式
+- ✅ 减少样式冲突
+
+### 2. 可复用性
+- ✅ 可以在其他项目中复用样式文件
+- ✅ 组件和样式可以独立使用
+
+### 3. 性能优化
+- ✅ 可以按需加载样式
+- ✅ 支持 CSS 代码分割
+
+### 4. 团队协作
+- ✅ 多人可以同时修改不同样式文件
+- ✅ 减少 Git 冲突
+
+### 5. 开发体验
+- ✅ 样式文件更小，编辑器性能更好
+- ✅ 支持 CSS 预处理器（Sass/Less）扩展
+
+## 下一步行动
+
+我可以帮你：
+
+1. **创建 styles/index.css** 并修改 main.ts 导入样式
+2. **创建所有组件样式文件** 并迁移对应的 CSS 代码
+3. **清理 App.vue** 删除已迁移的样式
+4. **提供完整的迁移脚本** 自动化整个过程
+
+**你希望我现在继续哪一步？**
+
diff --git a/cy_large_screen/src/components/LeftPanel.vue b/cy_large_screen/src/components/LeftPanel.vue
new file mode 100644
index 0000000..89d02e1
--- /dev/null
+++ b/cy_large_screen/src/components/LeftPanel.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
运行日志
+
+
+
+
+
+ {{ scope.row.val }}
+
+
+
+
+
+
+
+
操作记录
+
+
+
+
+
+ {{ scope.row.val }}
+
+
+
+
+
+
+
+
+
报警信息
+
+
+
+
+
+ 解除报警
+
+
+
+
+