【浙江蓝卓supos低代码开发】

已于 2022-08-10 10:46:39 修改
阅读量987 收藏
点赞数 1
文章标签： javascript echarts react.js
于 2022-06-08 16:12:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54219288/article/details/125186681
版权

浙江蓝卓supos低代码开发

前言

一、蓝卓supos低代码开发？

是中控的一个子公司研发的一个项目

二、使用步骤

1.引入库

// 客户端为IE11浏览器时不支持ES6脚本
// 客户端为IE11浏览器时不支持ES6脚本
import React, { PureComponent } from 'react';
import * as echarts from '../extensions/echarts.v5.3.1.min';
import { Button, DatePicker, version } from "antd";
import { Table } from 'antd';
const table = [];
const titleList = [
    '能源类型',
    '平均日消耗量',
    '平均月消耗量',
    '年消耗量',
    '高消耗工厂数目',
    '低消耗工厂数目',
    '消耗异常工厂数目',
    '运行状态'
];
const itemIndex = [
    'level',
    'loopsNumber',
    'otherloopsNumber',
    'Self_control_rate',
    'automatic_state_loopsNUmber',
    'Plateau_rate',
    'steady_state_loopsNumber',
    'state'
];
const dataParam = [
    {
        level: '原碳消耗量',
        loopsNumber: '1t',
        otherloopsNumber: '50.3t',
        Self_control_rate: '600.56t',
        automatic_state_loopsNUmber: 28,
        Plateau_rate: 97,
        steady_state_loopsNumber:0,
        state: '正常运行'
    },
    {
        level: '水能消耗量',
        loopsNumber: '9t',
        otherloopsNumber: '280t',
        Self_control_rate: '3600.56t',
        automatic_state_loopsNUmber: 8,
        Plateau_rate: 197,
        steady_state_loopsNumber:0,
        state: '正常运行'
    },
    {
        level: '电能消耗量',
        loopsNumber: '100度',
        otherloopsNumber: '1500.3度',
        Self_control_rate: '40000度',
        automatic_state_loopsNUmber: 56,
        Plateau_rate: 25,
        steady_state_loopsNumber:5,
        state: '异常'
    },
    {
        level: '天然气',
        loopsNumber: '90t',
        otherloopsNumber: '1200.3t',
        Self_control_rate: '30000t',
        automatic_state_loopsNUmber: 77,
        Plateau_rate: 2,
        steady_state_loopsNumber:0,
        state: '正常运行'
    },
    {
       level: '电能消耗量',
        loopsNumber: '100度',
        otherloopsNumber: '1500.3度',
        Self_control_rate: '40000度',
        automatic_state_loopsNUmber: 56,
        Plateau_rate: 25,
        steady_state_loopsNumber:5,
        state: '异常'
    },
    {
        level: '乙二醇消耗量',
        loopsNumber: '50t',
        otherloopsNumber: '150t',
        Self_control_rate: '3642t',
        automatic_state_loopsNUmber: 14,
        Plateau_rate: 2,
        steady_state_loopsNumber:1,
        state: '异常'
    },
    {
        level: '乙烯消耗量',
       loopsNumber: '50t',
        otherloopsNumber: '150t',
        Self_control_rate: '3642t',
        automatic_state_loopsNUmber: 14,
        Plateau_rate: 2,
        steady_state_loopsNumber:1,
        state: '异常'
    },
]

export default class PIDComponent extends PureComponent {
   constructor(props) {
        super(props),
        this.tableInit()
    };
    tableInit = () => {
        titleList.forEach((item, index) => {
            table.push({
                title: item,
                dataIndex: itemIndex[index],//已经定义过的itemIndex
                key: itemIndex[index],
            })
        })
    };
    componentDidMount = () => {
        this.ChartInit()
    };
  ChartInit = () => {
    var chartDom1 = document.getElementById('b1');
    var myChart1 = echarts.init(chartDom1);
    var option1;
    
    var chartDom2 = document.getElementById('b2');
    var myChart2 = echarts.init(chartDom2);
    var option2;
//     this.box1 = echarts.init(document.getElementById('b1'));
//     this.box2 = echarts.init(document.getElementById('b2'));
    option1=({
      title: {
        text: '节能指标',
        textStyle: {
          color: '#00CCFF',
          fontSize: 24
        }
      },
      series: [
        {
          type: 'gauge',
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.2, '#fd666d'],
                [0.8, '#37a2da'],
                [1, '#67e0e3']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          splitLine: {
            distance: -30,
            length: 10,
            lineStyle: {
              color: '#fff',
              width: 4
            }
          },
          axisLabel: {
            color: 'auto',
            distance: 60,
            fontSize: 13
          },
          detail: {
            valueAnimation: true,
            formatter: '{value} %',
            color: 'auto',
            fontSize: 24,
            offsetCenter: [0, "60%"]
          },
          data: [
            {
              value: 91.21
            }
          ]
        }
      ]
    });
    setInterval(function () {
            const random = +(Math.random() * 60).toFixed(2);
            myChart1.setOption({
                series: [
                    {
                        data: [
                            {
                                value: random
                            }
                        ]
                    }
                ]
            });
        }, 1000);
    option1 && myChart1.setOption(option1);
    
    option2=({
      title: {
        text: '能源审计',
        textStyle: {
          color: '#00CCFF',
          fontSize: 24
        }
      },
       series: [
        {
          type: 'gauge',
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.2, '#fd666d'],
                [0.8, '#37a2da'],
                [1, '#67e0e3']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          splitLine: {
            distance: -30,
            length: 10,
            lineStyle: {
              color: '#fff',
              width: 4
            }
          },
          axisLabel: {
            color: 'auto',
            distance: 60,
            fontSize: 13
          },
          detail: {
            valueAnimation: true,
            formatter: '{value} %',
            color: 'auto',
            fontSize: 24,
            offsetCenter: [0, "60%"]
          },
          data: [
            {
              value: 91.21
            }
          ]
        }
      ]
    });
    setInterval(function () {
            const random = +(Math.random() * 60).toFixed(2);
            myChart2.setOption({
                series: [
                    {
                        data: [
                            {
                                value: random
                            }
                        ]
                    }
                ]
            });
        }, 1200);
    option2 && myChart2.setOption(option2);
    
//     let chartDom = document.getElementById('app');
// 	let myChart = echarts.init(chartDom);
// 	let option;
// 	setTimeout(function () {
// 			option = {
// 				legend: {},
// 				tooltip: {
// 					trigger: 'axis',
// 					showContent: false
// 				},
// 				dataset: {
// 					source: [
// 						['产品', '2022.1', '2022.2', '2022.3', '2022.4', '2022.5', '2022.6'],
// 						['碳排放总量', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
// 						['碳排放强度', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
// 						['化石能源节省量', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
// 					]
// 				},
// 				xAxis: { type: 'category' },
// 				yAxis: { gridIndex: 0 },
// 				grid: { top: '55%' },
// 				series: [
// 					{
// 						type: 'line',
// 						smooth: true,
// 						seriesLayoutBy: 'row',
// 						emphasis: { focus: 'series' }
// 					},
// 					{
// 						type: 'line',
// 						smooth: true,
// 						seriesLayoutBy: 'row',
// 						emphasis: { focus: 'series' }
// 					},
// 					{
// 						type: 'line',
// 						smooth: true,
// 						seriesLayoutBy: 'row',
// 						emphasis: { focus: 'series' }
// 					},
// 					{
// 						type: 'line',
// 						smooth: true,
// 						seriesLayoutBy: 'row',
// 						emphasis: { focus: 'series' }
// 					},
// 					{
// 						type: 'pie',
// 						id: 'pie',
// 						radius: '30%',
// 						center: ['50%', '25%'],
// 						emphasis: {
// 							focus: 'self'
// 						},
// 						label: {
// 							formatter: '{b}: {@2012} ({d}%)'
// 						},
// 						encode: {
// 							itemName: 'product',
// 							value: '2022',
// 							tooltip: '2022'
// 						}
// 					}
// 				]
// 			};
// 			myChart.on('updateAxisPointer', function (event) {
// 				const xAxisInfo = event.axesInfo[0];
// 				if (xAxisInfo) {
// 					const dimension = xAxisInfo.value + 1;
// 					myChart.setOption({
// 						series: {
// 							id: 'pie',
// 							label: {
// 								formatter: '{b}: {@[' + dimension + ']} ({d}%)'
// 							},
// 							encode: {
// 								value: dimension,
// 								tooltip: dimension
// 							}
// 						}
// 					});
// 				}
// 			});
// 			myChart.setOption(option);
// 		});
// 	option && myChart.setOption(option);
  };
  render() {
    return (
      <div className='bg0'>
        <div className="bg1" >
          <div id="aa">
            <div className="topleftbox" />
            <div className="toprightbox" />
            <div className="bottomleftbox" />
            <div className="bottomrightbox" />
            <div id="b1" style={{ width: '90%', height: '90%' }} />
          </div>
          <div id="bb" >
            <div className="topleftbox" />
            <div className="toprightbox" />
            <div className="bottomleftbox" />
            <div className="bottomrightbox" />
            <div id="b2" style={{ width: '90%', height: '90%' }} />
          </div>
          <div className="data">
          <Table columns={table} dataSource={dataParam} rowKey={record => record.num}></Table>
          </div>
        </div>
        <div className="bg2" >
            <div id="app" style={{ width: '100%', height: '90%',backgroundColor:' rgb(157,190,255)'}} />
        </div>
      </div>
    )
  }
}

let css = document.createElement('style');
css.innerHTML = `
 .bg0 {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            background-color: rgb(15,32,64);
  }
  .bg0 .bg1 {
            height: 50%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color:  rgb(24,68,110);
//             background-color: aqua;
  }
  .bg0 .bg1 #aa {
            height: 90%;
            width: 20%;
            border-radius: 20px;
             background-color:  rgb(15,32,62);
  }
  .bg0 .bg1 #bb {
            height: 90%;
            width: 20%;
            border-radius: 20px;
             background-color: rgb(15,32,62);
  }
   .bg0 .bg1 .data {
            height: 90%;
            width: 55%;
            border-radius: 20px;
             background-color:  rgb(216,216,216);;
  }
  
  .bg0 .data .ant-table .ant-table-tbody > tr {
    color: black;
  }
  .bg0 .data .ant-table,
  .bg0 .data .ant-input,
  .bg0 .data .ant-form,
  .bg0 .data .ant-form label,
  .bg0 .data .ant-form-item,
  .bg0 .data .ant-select,
  .bg0 .data .ant-upload,
  .bg0 .data .ant-radio-wrapper,
  .bg0 .data .ant-checkbox-wrapper,
  .bg0 .data .ant-btn {
   font-size: 24px;
  }
  .bg0 .data .ant-table thead.ant-table-thead > tr > th {
    min-width: 50px;
    max-width: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 11px 0 11px 8px;
    height: 44px;
    color: #000;
    background: pink;
    border-bottom: 0px solid #e6eaee;
  }
  .bg0 .data td {
    text-align: center;
  }
  .bg0 .data div {
    text-align: center;
  }
  .bg0 .data .ant-table .ant-table-tbody > tr:hover > td,
  .mainContent .dataTable .ant-table .ant-table-tbody > tr.expand-parent > td {
    background:yellowgreen;
  }
  .bg0 .data .ant-table .ant-table-tbody > tr > td {
    min-width: 50px;
    max-width: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 2px solid #05495a;
    border-right: 2px solid #05495a;
    padding: 7px 0 7px 8px;
    height: 44px;
    color: yellow;
  }
  
  .bg0 .bg1  #aa .topleftbox {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 5px;
    top: 5px;
    border-top: 5px solid #116bb7;
    border-left: 5px solid #116bb7;
  }
  .bg0 .bg1  #aa .toprightbox {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
    border-top: 5px solid #116bb7;
    border-right: 5px solid #116bb7;
  }
  .bg0 .bg1  #aa  .bottomleftbox {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 5px;
    bottom: 5px;
    border-bottom: 5px solid #116bb7;
    border-left: 5px solid #116bb7;
  }
  .bg0 .bg1  #aa  .bottomrightbox {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-bottom: 5px solid #116bb7;
    border-right: 5px solid #116bb7;
  }
  
  .bg0 .bg1  #bb .topleftbox {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 5px;
    top: 5px;
    border-top: 5px solid #116bb7;
    border-left: 5px solid #116bb7;
  }
  .bg0 .bg1  #bb .toprightbox {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
    border-top: 5px solid #116bb7;
    border-right: 5px solid #116bb7;
  }
  .bg0 .bg1  #bb  .bottomleftbox {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 5px;
    bottom: 5px;
    border-bottom: 5px solid #116bb7;
    border-left: 5px solid #116bb7;
  }
  .bg0 .bg1  #bb  .bottomrightbox {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-bottom: 5px solid #116bb7;
    border-right: 5px solid #116bb7;
  }
  
  .bg0 .bg2{
            display: flex;
            align-items: center;
            height: 50%;
            width: 100%;
            flex-direction: row;
            justify-content: space-around;
            background-color:  rgb(24,68,110);
//             background-color:  rgba(15,32,64,.5);
  }
  .bg0 .bg2 #app {
      border-radius: 20px;
  }
`
document.getElementsByTagName('head')[0].appendChild(css)

2.需要在extension里面安装echart、antd插件

下面是echart引入react方法

https://blog.csdn.net/hahahhahahahha123456/article/details/80390151
下面是antd的引入方式
https://blog.csdn.net/qq_42672798/article/details/108095775?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-108095775-blog-120652263.pc_relevant_antiscanv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-108095775-blog-120652263.pc_relevant_antiscanv3&utm_relevant_index=10

总结

提示：这里对文章进行总结：
以上就是今天要讲低代码开发的内容

supOS工业操作系统——介绍与创建APP
GZM888888的博客
10-22 1757
字段命名采用小驼峰，诸如objName、propName； 服务以及服务中的函数命名采用大驼峰，诸如GetList()、GetDailyData()； 完成APPs开发后，所有log.debug、console.log都需要注释或删除； 代码列依层次对齐，区块的括号对齐； 表单控件要横竖对齐，页面整体看起来比较协调。
supOS APP开发者课程练习册
weixin_42132177的博客
12-02 558
supOS APP开发者课程练习册
学习SupOS第一天
xiuweiyin的博客
08-25 1147
蓝卓云SupOS是国内领先的工业互联网平台和解决方案提供商——浙江蓝卓工业互联网信息技术公司所打造的工业操作系统。SupOS是集工业大数据全集成平台、工业智能APP组态开发平台、工业大数据分析平台、工业人工智能引擎服务、工业智能APPs等为一体的综合性工业操作系统，旨在为企业数字化转型提供核心引擎。
蓝卓supOS轻度集成
bluetroncloud的博客
06-17 407
主要提供给蓝卓的销售、解决方案、产品同事进行使用，销售会使用supOS平台+APP应用进行项目的演示使用，解决方案和产品的同事会根据APP应用功能与supOS平台进行融合评估，落地解决方案需求等。生态伙伴的APP应用提供外网演示环境地址开发一个免登录操作或接入蓝卓supOS的单点登录能力，已iframe的模式嵌入supOS平台，其他任何东西都不用改动，包括LOGO、菜单栏、业务等。采用本方式进行开发，生态伙伴对前端进行改造，如无兼容问题，预计用时在1天以内。三、轻度集成研发工作。
supOS数据采集及接入-IoT网关接入操作
bluetroncloud的博客
06-25 3039
IOT网关接入是基于supOS提供的数据接入开放协议作为业务层协议，以MQTT作为数据传输协议，来实现将IOT网关里的位号元数据、实时数据、缓存的历史数据接入至supOS平台。点击展开控件库，先点击左侧趋势图控件，再点击右侧空白区将趋势图控件添加进来，单击右侧的选择数据源，将要组态的数据选择进来最多选8个；接下来就可以上传实时数据了，注意实时数据要和刚才上传的元数据一一对应，否则可能会导致解析失败或者数据缺失。平台提供历史数据存储及查看能力，在之前查看数据的页面，点击标签，选择要保存历史数据的位号。
蓝卓Supos的安装部署
05-12 1387
中控下面整个蓝卓supos，专为工厂设计，成为工业版安卓系统。最近尝试在liunx系统中尝试安装部署了一下，记录一下遇到的问题。
SupOS工业操作系统之对象实例-实体模板代码部分2
GZM888888的博客
11-02 370
SupOS工业操作系统之对象实例-实体模板代码部分2
蓝卓工业互联网(工业操作系统研发商,浙江蓝卓工业互联网信息技术有限公司)创投信息
01-23
蓝卓工业互联网的核心产品是自主开发的supOS工业操作系统，该系统拥有自主知识产权，是中国为数不多的具备完全知识产权的工业操作系统。该平台被描述为制造业的“智慧大脑”，旨在为企业构建一个从过程监控到生产...
蓝卓云supos基础能力理论考试
10-26
蓝卓云supos基础能力理论考试是一项由蓝卓云公司组织的考试，旨在评估考生在该领域的基础能力。这项考试广泛涵盖了supos系统的相关知识和技能，并且考察了考生在这些方面的理解和应用能力。 考试的内容包括但不限于...
supOS工业互联网与iNeuOS工业互联网操作系统对比
最新发布
03-27
最近有一个企业正在调研工业互联网平台，其中调研的是supOS蓝卓工业互联网和iNeuOS工业互联网操作系统。让我们给出一个对比情况表，我们自己总结了一份，由于不太了解supOS，于是也问了deepseek。
蓝卓重磅发布supOS年费和NEO版，加快工业操作系统大规模应用！
BLUETRON的博客
04-29 671
从企业发展的角度来看，年费制可满足企业灵活多变的需求以及企业快速发展的需要，在该模式中，企业可以根据业务需求自由选择增减年费量，打造符合企业发展阶段的系统，规避了企业数据迁移，新旧系统切换带来的额外成本。年费制下，企业只需少量初始投入成本，就能享受完全版的体验，不占用过多的营运资金，从而缓解企业资金不足的压力，尤其中小企业，可以把更多的流动资金用于市场推广、项目运营、团队建设等，风险极小。在蓝卓的第一个五年战略期，蓝卓专注技术创新，持续打磨产品能力，经历五个大版本的迭代，supOS工业操作系统的。
永久免费！蓝卓邀您体验supOS-Neo版
BLUETRON的博客
05-06 581
安装vue项目和配置
qq_45768050的博客
05-13 162
安装vue项目和配置 1.安装 npm install -g @vue/cli vue create projectName //项目名称 cd projectName npm run serve //运行 2.配置vue.config.js文件 module.exports = { lintOnSave:false //关闭保存代码错误提示 }
基于Echarts+Vue3的低代码可视化数据大屏拖拽设计器 vue拖拽设计大屏
dsyuan001的博客
10-30 3984
本产品是一款基于Vue3开发的可视化数据大屏拖拽设计器。提供一种简单易用的拖拽式数据可视化大屏设计方案，可帮助用户快速创建和定制自己的数据大屏，通过拖拽组件、调整布局和设置属性，实现数据展示的自由组合和个性化定制。
Methodot低代码实战教程（一）——熟悉可视化Echart组件
StarOS_Test的博客
02-01 1738
强大的Echart集成到Methodot的低代码中了，来搭建你的可视化数据看板吧
基于 Vue3 + ECharts 的拖拽式低代码数据可视化开发平台
MMKJSH的博客
09-22 1447
基于 Vue3 + ECharts 的拖拽式低代码数据可视化开发平台
低代码与 Echarts 融合：开启智能可视化的创新浪潮
葡萄城技术团队博客
05-21 804
随着技术的不断演进，低代码与Echarts的融合将引领智能可视化领域的创新浪潮，为企业和组织提供更高效、智能的数据分析和决策支持。上面使用一个 Echarts 插件简单地设计一个折线图的例子，除此之外，小编还用 Echarts 插件设计了很多的模板，如热力图、关系图、漏斗图、3D地图等，感兴趣的同学可以点击这里查看。创建完数据表之后，在页面上随便选一片区域设置成 Echarts 单元格，并且设置数据源，起名字【销售数据信息】，数据源中选择销售数据表的【年份】和【销售额】这2列。
低代码（三）低代码平台前端技术组件选型1.0(前端)
飞天代码的博客
04-04 1749
技术选型
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值