客户端页签控件用法


使用说明 2019-12-27 add by: liang

>


function init_web()
    local sHtml = [[<html><head><meta charset="utf-8">
    <script src="qrc:/resource/echarts.js"></script>
    <script src="qrc:/resource/qwebchannel.js"></script></head>
    <body><div id="main" style="width:100%;height:100%;"></div><script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    var optionLine = {
        title: {
            show:true,
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            itemSize:20,
            itemGap:25,
            top:'-6px',
            right:'2%',
            showTitle:false,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                dataView: {}
            }
        },
        legend: {
            show:false,
            data:['工艺数据']
        },
        grid: {
            top:'40px',
            left: '0%',
            right: '1%',
            bottom: '0%',
            containLabel: true
        },

        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: Array()
        },
        yAxis: {
            type: 'value',
            min: function(value) {
                return (value.min - (value.max-value.min)/ 10 * 2).toFixed(2);
            },
            max: function(value) {
                return (value.max + (value.max-value.min)/ 10 * 2).toFixed(2);
            }
        },
        series: [
            {
                name:'',
                type:'line',
                symbol:'circle',
                data:Array(),

                label:{
                    normal:{
                        show:true
                    }
                }
            },
            {
                name:'上下限',
                type:'line',
                show:false,
                data:Array(),
                markLine:
                {
                    label:{
                        normal:{
                            position:'middle',
                            formatter: '{b}: {c}'
                        }
                    },
                    lineStyle:
                    {
                        normal:
                        {
                            color:'#fd8f26',
                            width:2
                        }
                    },
                    data:[{name: '上限',yAxis: -999},{name: '下限',yAxis: -999}]
                }
            }
        ]
    };

    myChart.setOption(optionLine, true);
    window.onresize = myChart.resize;

    function fromItStrig(itStr)
    {
        var strs = itStr.split(String.fromCharCode(2));
        if (strs.length != 2)
            return null;
        var keys = strs[0].split(String.fromCharCode(1));
        var values = strs[1].split(String.fromCharCode(1));
        if (keys.length != values.length)
            return null;
        var map = {};
        var sTmp = '';
        for (i=0;i<keys.length ;i++ ) 
        {
            sTmp = keys[i];
            map[sTmp] = values[i];
        }
        return map;
    }

    window.onload = function()
    {
        new QWebChannel(qt.webChannelTransport, function(channel)
        {
            var pObject = channel.objects.qt_object_id;
            pObject.emitSignalToWeb.connect(function(key, v1, v2)//emit对象信号函数接收,这个相当于绑定槽函数
            {
                if (key == 'set_value')
                {
                    var it = fromItStrig(v1);
                    if (it == null)
                        return;

                    var vline = key.split(',');
                    optionLine.xAxis.data = it['x'].split(',')
                    optionLine.series[0].data = it['y'].split(',')
                    optionLine.title.text = it['title']

                    optionLine.series[0].name = it['var_name'];
                    optionLine.series[1].data = new Array(parseFloat(it['max_value']),parseFloat(it['min_value']));
                    optionLine.series[1].markLine.data[0].name = it['var_name']+'-上限'
                    optionLine.series[1].markLine.data[0].yAxis = parseFloat(it['max_value']).toFixed(3);
                    optionLine.series[1].markLine.data[1].name = it['var_name']+'-下限'
                    optionLine.series[1].markLine.data[1].yAxis = parseFloat(it['min_value']).toFixed(3);
                    myChart.setOption(optionLine, true)
                }
                else if (key == 'setValue')
                {
                    optionLine.xAxis.data = Array();
                    optionLine.series[0].data = Array();
                    optionLine.series[1].markLine.data[0].yAxis = -888;
                    optionLine.series[1].markLine.data[1].yAxis = -999;
                    myChart.setOption(optionLine, true)
                }
            });
            pObject.recvFromWeb('load_finish', '','');
        });
    }
    </script></body></html> ]]
    ui:webSetHtml('id_web', sHtml, 'file:');
end

function web_callback_event(sCid, sEventType)
    if sEventType == 'load_finish' then
        --main();
        local it = CIntent();
        ui:webSendValue('id_web', 'set_value', it:toString(), '');
    end
end

init_web()

ui:setClickEvent('id_web', 'web_callback_event');
Copyright © TouchNet 2015 all right reserved,powered by Gitbook最后修订时间: 2022-06-21 09:21:04

results matching ""

    No results matching ""