Browse Source

feat:tablePlus配置重构

ananzhusen 10 tháng trước cách đây
mục cha
commit
60ecd8d5ee
1 tập tin đã thay đổi với 353 bổ sung331 xóa
  1. 353 331
      src/services/defaults.ts

+ 353 - 331
src/services/defaults.ts

@@ -1670,47 +1670,54 @@ export const formComponents = [
           stripeColor: '#407FFF1F', //'#15181c',
           // hasHeader: false,
           textColor: '#FFFFFF',
+          columns:[
+            {},
+            {},
+            {},
+            { 
+              fnJs:`if(data==='一级告警'){
+                  return {
+                    text:data,
+                    textColor: '#FF5D3CFF',
+                  }
+                }else if(data==='二级告警'){
+                  return {
+                    text:data,
+                    textColor: '#E6A82EFF',
+                  }
+                }else if(data==='三级告警'){
+                  return {
+                    text:data,
+                    textColor: '#58CC84FF',
+                  }
+                }`
+            }
+          ],
           data: [
             ['设备 ID', '设备名称', '数据协议', '级别'],
             [
               '1',
               '200',
               'MQTT',
-              {
-                text: '一级告警',
-                // background: '#650b09',
-                textColor: '#FF5D3CFF',
-              },
+              '一级告警',
             ],
             [
               '2',
               '湿度传感器',
               'MQTT',
-              {
-                text: '二级告警',
-                // background: '#4d2a02',
-                textColor: '#E6A82EFF',
-              },
+              '二级告警'
             ],
             [
               '3',
               '物联网设备',
               'MQTT',
-              {
-                text: '一级告警',
-                // background: '#650b09',
-                textColor: '#FF5D3CFF',
-              },
+              '一级告警'
             ],
             [
               '4',
               '物联网设备/智能家居/智慧城市',
               'MQTT',
-              {
-                text: '三级告警',
-                textColor: '#58CC84FF',
-                // background: '#042617;',
-              },
+              '三级告警'
             ],
           ],
           styles: [
@@ -1718,19 +1725,19 @@ export const formComponents = [
               row: 0,
               textColor: '#ffffff66',
             },
-            {
-              col: 3,
-              pens: [
-                {
-                  name: 'rectangle',
-                  width: 56,
-                  height: 20,
-                  fontSize: 0.6,
-                  disableAnchor: true,
-                  lineWidth: 0,
-                },
-              ],
-            },
+            // {
+            //   col: 3,
+            //   pens: [
+            //     {
+            //       name: 'rectangle',
+            //       width: 56,
+            //       height: 20,
+            //       fontSize: 0.6,
+            //       disableAnchor: true,
+            //       lineWidth: 0,
+            //     },
+            //   ],
+            // },
           ],
           props: {
             custom: [
@@ -1779,72 +1786,72 @@ export const formComponents = [
           realTimes: [
             {
               label: '自定义',
-              key: 'data.1.3.text',
+              key: 'data.1.3',
               type: 'string',
               mock: '{一级告警,二级告警,三级告警}',
               enableMock: true,
-              triggers: [
-                {
-                  name: '触发器1',
-                  conditionType: 'and',
-                  conditions: [
-                    {
-                      type: '',
-                      operator: '=',
-                      valueType: '',
-                      value: '一级告警',
-                    },
-                  ],
-                  actions: [
-                    {
-                      action: 5,
-                      value:
-                        "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#FF5D3CFF'},{doEvent:false,render:true})",
-                      params: '',
-                    },
-                  ],
-                },
-                {
-                  name: '触发器2',
-                  conditionType: 'and',
-                  conditions: [
-                    {
-                      type: '',
-                      operator: '=',
-                      valueType: '',
-                      value: '二级告警',
-                    },
-                  ],
-                  actions: [
-                    {
-                      action: 5,
-                      value:
-                        "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#E6A82EFF'},{doEvent:false,render:true})",
-                      params: '',
-                    },
-                  ],
-                },
-                {
-                  name: '触发器3',
-                  conditionType: 'and',
-                  conditions: [
-                    {
-                      type: '',
-                      operator: '=',
-                      valueType: '',
-                      value: '三级告警',
-                    },
-                  ],
-                  actions: [
-                    {
-                      action: 5,
-                      value:
-                        "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#58CC84FF'},{doEvent:false,render:true})",
-                      params: '',
-                    },
-                  ],
-                },
-              ],
+              // triggers: [
+              //   {
+              //     name: '触发器1',
+              //     conditionType: 'and',
+              //     conditions: [
+              //       {
+              //         type: '',
+              //         operator: '=',
+              //         valueType: '',
+              //         value: '一级告警',
+              //       },
+              //     ],
+              //     actions: [
+              //       {
+              //         action: 5,
+              //         value:
+              //           "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#FF5D3CFF'},{doEvent:false,render:true})",
+              //         params: '',
+              //       },
+              //     ],
+              //   },
+              //   {
+              //     name: '触发器2',
+              //     conditionType: 'and',
+              //     conditions: [
+              //       {
+              //         type: '',
+              //         operator: '=',
+              //         valueType: '',
+              //         value: '二级告警',
+              //       },
+              //     ],
+              //     actions: [
+              //       {
+              //         action: 5,
+              //         value:
+              //           "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#E6A82EFF'},{doEvent:false,render:true})",
+              //         params: '',
+              //       },
+              //     ],
+              //   },
+              //   {
+              //     name: '触发器3',
+              //     conditionType: 'and',
+              //     conditions: [
+              //       {
+              //         type: '',
+              //         operator: '=',
+              //         valueType: '',
+              //         value: '三级告警',
+              //       },
+              //     ],
+              //     actions: [
+              //       {
+              //         action: 5,
+              //         value:
+              //           "meta2d.setValue({id:pen.id,'data.1.3.textColor':'#58CC84FF'},{doEvent:false,render:true})",
+              //         params: '',
+              //       },
+              //     ],
+              //   },
+              // ],
             },
           ],
         },
@@ -1869,6 +1876,26 @@ export const formComponents = [
           hasHeader:true,
           textColor: '#FFFFFF',
           maxNum:5,
+          columns:[{},{},{},{
+            fnJs:`
+            if(data==='处理中'){
+              return {
+                text:data,
+                textColor: "#05CFF9FF",
+              }
+            }else if(data==='已完成'){
+              return {
+                text:data,
+                textColor: '#B3D1FFFF',
+              }
+            }else if(data==='待处理'){
+              return {
+                text:data,
+                textColor: "#E6A82EFF",
+              }
+            }
+          `
+          }],
           data: [
             [
                 "序号",
@@ -1877,136 +1904,76 @@ export const formComponents = [
                 "处理状态"
             ],
             [
-                {
-                    "text": "1"
-                },
+               "1",
                 "2023-06-17 13:50",
                 "事件内容",
-                {
-                    "text": "处理中",
-                    "textColor": "#05CFF9FF"
-                }
+                "处理中"
             ],
             [
-                {
-                    "text": "2"
-                },
+                 "2",
                 "2023-06-17 13:51",
                 "事件内容",
-                {
-                    "text": "已完成",
-                    "textColor": "#B3D1FFFF"
-                }
+                "已完成"
             ],
             [
-                {
-                    "text": "3"
-                },
+                "3",
                 "2023-06-17 13:52",
                 "事件内容",
-                {
-                    "text": "待处理",
-                    "textColor": "#E6A82EFF"
-                }
+                "待处理",
             ],
             [
-                {
-                    "text": "4"
-                },
+                "4",
                 "2023-06-17 13:53",
                 "事件内容",
-                {
-                    "text": "已完成",
-                    "textColor": "#B3D1FFFF"
-                }
+                "已完成"
             ],
             [
-                {
-                    "text": "5"
-                },
+                "5",
                 "2023-06-17 13:54",
                 "事件内容",
-                {
-                    "text": "处理中",
-                    "textColor": "#05CFF9FF"
-                }
+                "处理中"
             ],
             [
-                {
-                    "text": "6"
-                },
+                 "6",
                 "2023-06-17 13:55",
                 "事件内容",
-                {
-                    "text": "处理中",
-                    "textColor": "#05CFF9FF"
-                }
+                "处理中",
             ],
             [
-                {
-                    "text": "7"
-                },
+                 "7",
                 "2023-06-17 13:57",
                 "事件内容",
-                {
-                    "text": "处理中",
-                    "textColor": "#05CFF9FF"
-                }
+                "待处理"
             ],
             [
-                {
-                    "text": "8"
-                },
+                "8",
                 "2023-06-17 13:58",
                 "事件内容",
-                {
-                    "text": "处理中",
-                    "textColor": "#05CFF9FF"
-                }
+                "处理中"
             ],
             [
-                {
-                    "text": "9"
-                },
+                "9",
                 "2023-06-17 13:59",
                 "事件内容",
-                {
-                    "text": "处理中",
-                    "textColor": "#05CFF9FF"
-                }
+                "处理中"
             ],
             [
-                {
-                    "text": "10"
-                },
+                "10",
                 "2023-06-17 14:00",
                 "事件内容",
-                {
-                    "text": "处理中",
-                    "textColor": "#05CFF9FF"
-                }
+                "已完成"
             ],
             [
-                {
-                    "text": "11"
-                },
+                "11",
                 "2023-06-17 14:01",
                 "事件内容",
-                {
-                    "text": "处理中",
-                    "textColor": "#05CFF9FF"
-                }
+                "处理中"
             ],
             [
-                {
-                    "text": "12"
-                },
+                "12",
                 "2023-06-17 13:02",
                 "事件内容",
-                {
-                    "text": "处理中",
-                    "textColor": "#05CFF9FF"
-                }
+                "已完成"
             ]
         ],
           styles: [
@@ -2112,12 +2079,33 @@ export const formComponents = [
             size: "small",
             total: 88
           },
+          columns:[{},{},{},
+            {
+              fnJs:` 
+              let link = 'https://view.le5le.com/2d?id='+data;
+              return  {
+                "events": [
+                  {
+                    "actions": [
+                      {
+                        "action": 0,
+                        "params": "_blank",
+                        "value": link
+                      }
+                    ],
+                    "conditions": [],
+                    "name": "click"
+                  }
+                ]
+              }`
+            }
+          ],
           events: [
             {
               "actions": [
                 {
                   "action": 15,
-                  "callback": " let _data = [['场景','图纸id','名称','操作']]; \r\n      let data1 = JSON.parse(data);\r\n      pen.pagination.total = data1.total;\r\n      pen.calculative.paginationPen.total = data1.total;\r\n      data1.list.forEach((item)=>{\r\n        let _item = [item.case?item.case:'无',item.id,item.name,{events:[\r\n            {\r\n                \"actions\": [\r\n                    {\r\n                        \"action\": 0,\r\n                        \"params\":\"_blank\",\r\n                        \"value\": `https://view.le5le.com/2d?id=${item.id}`\r\n                    }\r\n                ],\r\n                \"conditions\": [],\r\n                \"name\": \"click\"\r\n            }\r\n        ]}];\r\n        _data.push(_item);\r\n      });\r\n      context.meta2d.setValue({id:pen.id,data:_data},{doEvent:false,history:false});",
+                  "callback": " let _data = [['场景','图纸id','名称','操作']]; \r\n      let data1 = JSON.parse(data);\r\n      pen.pagination.total = data1.total;\r\n      pen.calculative.paginationPen.total = data1.total;\r\n      data1.list.forEach((item)=>{\r\n        let _item = [item.case?item.case:'无',item.id,item.name,item.id];\r\n        _data.push(_item);\r\n      });\r\n      context.meta2d.setValue({id:pen.id,data:_data},{doEvent:false,history:false});",
                   "input": "",
                   "network": {
                     "httpTimeInterval": 1000,
@@ -2160,201 +2148,61 @@ export const formComponents = [
               "智慧物联",
               "01840e23-efb8-70d4-804b-9402de84d2d7",
               "冷源群控系统",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=01840e23-efb8-70d4-804b-9402de84d2d7"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "01840e23-efb8-70d4-804b-9402de84d2d7"                      
             ],
             [
               "智慧园区",
               "01871289-7110-708d-80f2-c654ea652d7e",
               "中央空调模拟演示台系统",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=01871289-7110-708d-80f2-c654ea652d7e"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "01871289-7110-708d-80f2-c654ea652d7e"
             ],
             [
               "智慧物联",
               "01864ef5-f3b8-7046-8062-680466d5157b",
               "换热站远程监控系统",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=01864ef5-f3b8-7046-8062-680466d5157b"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "01864ef5-f3b8-7046-8062-680466d5157b"
             ],
             [
               "无",
               "018f94fe-12f4-7e6e-90c2-e7354270e7e1",
               "RTO ",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=018f94fe-12f4-7e6e-90c2-e7354270e7e1"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "018f94fe-12f4-7e6e-90c2-e7354270e7e1",
             ],
             [
               "电力能源",
               "01831702-3460-7028-808d-77e4cee1a1bd",
               "变电站主接线图",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=01831702-3460-7028-808d-77e4cee1a1bd"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "01831702-3460-7028-808d-77e4cee1a1bd",
             ],
             [
               "智慧物联",
               "01840e82-bd40-70d4-804b-9402de84d2f1",
               "制冷站",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=01840e82-bd40-70d4-804b-9402de84d2f1"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "01840e82-bd40-70d4-804b-9402de84d2f1",
             ],
             [
               "智慧水务",
               "0186531b-a898-7046-8062-680466d51d97",
               "废水处理",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=0186531b-a898-7046-8062-680466d51d97"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "0186531b-a898-7046-8062-680466d51d97",
             ],
             [
               "电信机房",
               "01840e6f-9ad0-70d4-804b-9402de84d2e8",
               "数据中心",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=01840e6f-9ad0-70d4-804b-9402de84d2e8"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "01840e6f-9ad0-70d4-804b-9402de84d2e8",
             ],
             [
               "智慧工厂",
               "018fc8e1-6ccb-734c-a438-72a1c51dd2cb",
               "破碎筛分监控",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=018fc8e1-6ccb-734c-a438-72a1c51dd2cb"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "018fc8e1-6ccb-734c-a438-72a1c51dd2cb",
             ],
             [
               "电力能源",
               "01840e78-7c40-70d4-804b-9402de84d2eb",
               "光伏系统",
-              {
-                "events": [
-                  {
-                    "actions": [
-                      {
-                        "action": 0,
-                        "params": "_blank",
-                        "value": "https://view.le5le.com/2d?id=01840e78-7c40-70d4-804b-9402de84d2eb"
-                      }
-                    ],
-                    "conditions": [],
-                    "name": "click"
-                  }
-                ]
-              }
+              "01840e78-7c40-70d4-804b-9402de84d2eb",
             ],
           ],
           styles: [
@@ -2423,6 +2271,180 @@ export const formComponents = [
           }
         },
       },
+      {
+        name: '多功能表格',
+        icon: 'l-biaoge',
+        data: {
+          name: 'tablePlus',
+          width: 0,
+          height: 0,
+          disableAnchor: true,
+          disableSize: true,
+          bordered:true,
+          hLine:true,
+          vLine:true,
+          colWidth: 180,
+          rowHeight: 30,
+          color: "#bdc7db",
+          stripe: true,
+          stripeColor: "#407FFF1F",
+          ellipsis: true,
+          whiteSpace: "break-all",
+          columns:[{
+            type: 'select',
+            dropdownList: [{text:'选项一'},{text:'选项二'},{text:'选项三'}]
+          },{
+            type: 'numeric'
+          },{
+            fnJs:`
+              if(data==='一级告警'){
+                return {
+                  text:data,
+                  textColor: '#FF5D3CFF',
+                }
+              }else if(data==='二级告警'){
+                return {
+                  text:data,
+                  textColor: '#E6A82EFF',
+                }
+              }else if(data==='三级告警'){
+                return {
+                  text:data,
+                  textColor: '#58CC84FF',
+                }
+              }
+            `
+          },
+          ,{
+            // fnJs:`
+            //   if(data==='一级告警'){
+            //     return {
+            //       text:data,
+            //       textColor: '#FF5D3CFF',
+            //     }
+            //   }else if(data==='二级告警'){
+            //     return {
+            //       text:data,
+            //       textColor: '#E6A82EFF',
+            //     }
+            //   }else if(data==='三级告警'){
+            //     return {
+            //       text:data,
+            //       textColor: '#58CC84FF',
+            //     }
+            //   }
+            // `
+          }],
+          data: [
+            [
+              "场景",
+              "图纸id",
+              "名称",
+              "操作"
+            ],
+            [
+              "智慧物联",
+              "01840e23-efb8-70d4-804b-9402de84d2d7",
+              "一级告警",
+             "1"
+            ],
+            [
+              "智慧园区",
+              "01871289-7110-708d-80f2-c654ea652d7e",
+              "一级告警",
+              "2"
+            ],
+            [
+              "智慧物联",
+              "01864ef5-f3b8-7046-8062-680466d5157b",
+              "二级告警",
+              "3"
+            ],
+            [
+              "无",
+              "018f94fe-12f4-7e6e-90c2-e7354270e7e1",
+              "三级告警",
+           ""
+            ],
+            [
+              "电力能源",
+              "01831702-3460-7028-808d-77e4cee1a1bd",
+              "二级告警",
+             ""
+            ],
+            [
+              "智慧物联",
+              "01840e82-bd40-70d4-804b-9402de84d2f1",
+              "三级告警",
+             ""
+            ]
+          ],
+          styles: [
+            {
+              "row": 0,
+              "textColor": "#ffffff66"
+            },{
+              "col": 3,
+              "pens": [
+                  {
+                      "background": "#4583FF33",
+                      "disableAnchor": true,
+                      "height": 20,
+                      "isBottom": false,
+                      "lineWidth": 1,
+                      "name": "rectangle",
+                      "width": 20
+                  }
+              ],
+              "width": 40
+          }
+          ],
+          props: {
+            custom: [
+              {
+                key: 'stripe',
+                label: '显示斑马纹',
+                type: 'bool',
+              },
+              {
+                key: 'stripeColor',
+                label: '斑马纹颜色',
+                type: 'color',
+              },
+              {
+                key: 'bordered',
+                label: '外边框',
+                type: 'bool',
+              },
+              {
+                key: 'hLine',
+                label: '水平线',
+                type: 'bool',
+              },
+              {
+                key: 'vLine',
+                label: '垂直线',
+                type: 'bool',
+              },
+              {
+                key: 'pagination',
+                label: '分页配置',
+                type: 'code',
+              },
+              {
+                key: 'data',
+                label: '数据',
+                type: 'code',
+              },
+              {
+                key: 'styles',
+                label: '样式',
+                type: 'code',
+              },
+            ],
+          }
+        },
+      },
       {
         name: '树',
         icon: 'l-shu', //l-shu