safesite/safesite/templates/areadetail.html

            <div id="tt" class="easyui-tabs" border=false data-options="fit:true" >
                <div title="隐患" style="height:100%;">
                    <table id="yhtable" style="width:100%;height:100%"></table>  
                </div>
                <div title="作业" style="height:100%;">
                    <table id="zytable" style="width:100%;height:100%"></table>  
                </div>
                <div title="未遂" style="height:100%;">
                        <table id="wstable" style="width:100%;height:100%"></table>  
                    </div>
                <div title="风险" style="height:100%;">
                    <table id="fxtable" style="width:100%;height:100%"></table>  
                </div>
            </div>

    <script>
        var id = {{id}};
        $('#zytable').datagrid({
        url: 'api/operation?a=listall&zyqy='+id,
        rownumbers: true,
        singleSelect: true,
        striped: true,
        fitColumns: true,
        method: 'get',
        pagination: 'true',
        pageSize: 20,
        toolbar: '#zytablebar',
        border:false,
        columns: [[
            { field: 'zyid', title: 'ID', hidden: true },
            { field: 'zynum', title: '编号', width: 120  },
            { field: 'zyzt', title: '作业状态', width: 120 ,formatter: function (value, row, index) {
                        return value.zyzt;                
                } },
            { field: 'zylx__dickeyname', title: '作业类型', width: 120 },
            { field: 'zyfzr__name', title: '作业负责人', width: 120 },
            { field: 'zynr', title: '作业内容', width: 200 },
            { field: 'submittime', title: '提交时间', width: 100 },
        ]]
    });
        $('#wstable').datagrid({
        url: 'api/miss?a=listall&missqy='+id,
        rownumbers: true,
        singleSelect: true,
        striped: true,
        fitColumns: true,
        method: 'get',
        pagination: 'true',
        pageSize: 20,
        toolbar: '#wstablebar',
        border:false,
        columns: [[
            { field: 'missid', title: 'ID', hidden: true },
            { field: 'missnum', title: '编号', width: 150 },
            { field: 'missplace', title: '发生地点', width: 80 },
            { field: 'misstime', title: '发生时间', width: 200 },
            { field: 'description', title: '简要描述', width: 400 },
            { field: 'missimg', title: '现场图片', width: 150, formatter:showImg },

        ]]
    });
        $('#fxtable').datagrid({
        url: 'api/riskact?a=listall&area='+id,
        rownumbers: true,
        singleSelect: true,
        fitColumns: true,
        striped: true,
        method: 'get',
        toolbar: '',
        pagination: 'true',
        pageSize: 20,
        columns: [[
            { field: 'id', title: 'ID', hidden: true },
            { field: 'area__name', title: '区域', width: 100 },
            { field: 'type__dickeyname', title: '类型', width: 80 },
            { field: 'name', title: '名称', width: 100 },
            { field: 'level', title: '级别', width: 80 , styler: function (value, row, index) {
                    switch (value) {
                        case '低风险': return 'background-color:blue;'; break;
                        case '一般风险': return 'background-color:yellow;'; break;
                        case '较大风险': return 'background-color:orange;'; break;
                        case '重大风险': return 'background-color:red;'; break;
                    }
                }},
        ]],
    })
        $('#yhtable').datagrid({
        rownumbers: true,
        singleSelect: true,
        striped: true,
        method: 'get',
        url: 'troublehandle?a=listarea&yhqy='+id,
        fitColumns: true,
        pagination: 'true',
        pageSize: 20,
        border:false,
        columns: [[
            { field: 'troubleid', hidden: true },
            { field: 'yhnum', title: '编号', width: 100 },
            {
                field: 'yhzt', title: '流程状态', width: 100, styler: function (value, row, index) {
                    switch (value) {
                        case 0: return 'background-color:yellow;'; break;
                        case 1: return 'background-color:yellow;'; break;
                        case 2: return 'background-color:yellow;'; break;
                        case 3: return 'background-color:yellow;'; break;
                        case 4: return 'background-color:yellow;'; break;
                        case 5: return 'background-color:yellow;'; break;
                        case 6: return 'background-color:green;'; break;
                        case 7: return 'background-color:yellow;'; break;
                    }
                    if(row.zgqx){
                        
                    }
                }, formatter: function (value, row, index) {
                    switch (value) {
                        case 0: return '待新增'; break;
                        case 1: return '待评估'; break;
                        case 2: return '措施/方案待确认'; break;
                        case 3: return '待整改'; break;
                        case 4: return '待审核'; break;
                        case 5: return '待复查'; break;
                        case 6: return '已归档'; break;
                        case 7: return '措施/方案待提交'; break;
                    }
                }
            },
            { field: 'todouser__name', title: '下一步处理人', width: 80 },
            { field: 'yhlb__dickeyname', title: '隐患类别', width: 80 },
            { field: 'yhpg__dickeyname', title: '隐患评估', width: 80 },
            { field: 'fxr__name', title: '发现人', width: 80 },
            { field: 'yhms', title: '隐患描述', width: 150 },
            { field: 'yhtp', title: '隐患图片', width: 150, formatter:showImg },

        ]]
    });
    function showImg(value, row, index){
        var x = value.split('?')
        if(x[0]!=''){
            return "<img style='width:80px;height:80px;' onclick='bigger(this)' src='"+x[0]+"'/>";
        }

    }
    </script>
</div>