123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <title>新增路段</title>
- <link rel="stylesheet" href="../../../../assets/libs/layui/css/layui.css"/>
- <link rel="stylesheet" href="../../../../assets/module/formSelects/formSelects-v4.css"/>
- <link rel="stylesheet" href="../../../../assets/module/admin.css?v=312"/>
- <link rel="stylesheet" href="../../../../assets/css/editormap.css?v=312"/>
- <style>
- .risk_point_dot {
- width: 30px;
- height: 30px;
- border-radius: 15px !important;
- text-align: center;
- color: #fff;
- vertical-align: middle;
- display: table-cell;
- }
- .level_ {
- background-color: #0b0b0b;
- }
- .level1_ {
- background-color: red;
- }
- .level2_ {
- background-color: #FB7437;
- }
- .level3_ {
- background-color: #FFDC44;
- }
- .level4_ {
- background-color: #14C2FB;
- }
- .risk_point_text {
- display: table-cell;
- vertical-align: middle;
- height: 30px;
- padding-left: 10px;
- }
- .info li {
- font-size: 15px;
- color: #222;
- line-height: 29px;
- margin-top: 10px;
- }
- .layui-layer-content {
- overflow: auto !important;
- }
- </style>
- </head>
- <body>
- <!-- 加载动画 -->
- <div class="page-loading">
- <div class="ball-loader">
- <span></span><span></span><span></span><span></span>
- </div>
- </div>
- <!-- 正文开始 -->
- <div class="layui-fluid">
- <div class="layui-card">
- <div class="layui-card-body">
- <div class="layui-card-header">添加路段信息
- <div class="layui-inline pull-right">
- <button onclick="history.back()" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal"><i
- class="layui-icon"></i>返回
- </button>
- </div>
- </div>
- <div class="layui-card-body">
- <form class="layui-form" lay-filter="layuiForm" style="max-width: 700px;margin: 40px auto;">
- <!-- <div class="layui-form-item">-->
- <!-- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>危险源:</label>-->
- <!-- <div class="layui-input-block w-m180">-->
- <!-- <select id="dangerSrcId" name="dangerSrcId" class="layui-input-block w-m180"-->
- <!-- lay-verify="required" xm-select="dangerSrcId" xm-select-search>-->
- <!-- <option value="">直接选择危险源或搜索选择危险源</option>-->
- <!-- </select>-->
- <!-- </div>-->
- <!-- </div>-->
- <div class="layui-form-item layui-row">
- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>危险源:</label>
- <div class="my-marker-box w-m180" id="myMarkerBox">
- <ul style="overflow-y: auto">
- <li class="add-subIcon" id="addMarker">+</li>
- </ul>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>养护单位:</label>
- <div class="layui-input-block w-m180">
- <input type="text" id="roadSectionMaintainGroupName" class="layui-input"
- name="roadSectionMaintainGroupName"
- value=""
- placeholder="点击选择路段养护单位"
- class="form-control" readonly>
- <input type="hidden" id="roadSectionMaintainGroupId" name="roadSectionMaintainGroupId"
- readonly>
- <div id="menuContent_" class="menuContent">
- <ul id="groupTree_" class="ztree" style="margin-top:0;"></ul>
- </div>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>安全员/责任人:</label>
- <div class="layui-input-block w-m180">
- <select id="roadSectionResponsibleId" name="personsId"
- class="layui-input-block w-m180"
- lay-verify="required" xm-select="roadSectionResponsibleId" xm-select-search>
- <option value="">直接选择责任人或搜索选择责任人</option>
- </select>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>道路编号:</label>
- <div class="layui-input-block w-m180">
- <select name="roadId" id="roadId" type="text" placeholder="请输入道路编号 例:G108 京昆线"
- class="layui-input" lay-verType="tips" xm-select="roadId" lay-verify="required"
- xm-select-search
- xm-select-radio></select>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>起点桩号:</label>
- <div class="layui-input-block w-m180">
- <input name="roadSectionBeginPegNumber" type="text" placeholder="请输入起点桩号 例:1231.700"
- class="layui-input"
- lay-verType="tips" lay-verify="required">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>终点桩号:</label>
- <div class="layui-input-block w-m180">
- <input name="roadSectionEndPegNumber" type="text" placeholder="请输入终点桩号 例:1236.700"
- class="layui-input"
- lay-verType="tips" lay-verify="required">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>长度(M): </label>
- <div class="layui-input-block w-m180">
- <input name="roadSectionLength" type="number" placeholder="请输入路段长度 例:5.2"
- class="layui-input" lay-verType="tips" min="0"/>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>公路等级: </label>
- <div class="layui-input-block w-m180">
- <select name="roadSectionLevel" xm-select-radio>
- <option value="0">高速</option>
- <option value="1">一级公路</option>
- <option value="2">二级公路</option>
- <option value="3">三级公路</option>
- <option value="4">四级公路</option>
- <option value="5">等外公路</option>
- </select>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"><span class="layui-badge-dot"></span>路段类型: </label>
- <div class="layui-input-block w-m180">
- <select name="roadSectionType" xm-select-radio>
- <option value="一般路段">一般路段</option>
- <option value="单个急弯">单个急弯</option>
- <option value="连续急弯">连续急弯</option>
- <option value="桥头接小半径曲线路段">桥头接小半径曲线路段</option>
- <option value="陡坡路段">陡坡路段</option>
- <option value="连续下坡">连续下坡</option>
- <option value="急弯陡坡">急弯陡坡</option>
- <option value="视距不足路段">视距不足路段</option>
- <option value="路侧险要路段">路侧险要路段</option>
- <option value="穿学校、集镇、村庄路段">穿学校、集镇、村庄路段</option>
- <option value="路基变化路段">路基变化路段</option>
- </select>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150">市县/村镇名称: </label>
- <div class="layui-input-block w-m180">
- <input name="districtName" type="text" placeholder="市县/村镇名称"
- class="layui-input"
- lay-verType="tips"/>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150">结构形式: </label>
- <div class="layui-input-block w-m180">
- <input name="roadSectionSurfaceType" type="text" placeholder="市县/村镇名称"
- class="layui-input"
- lay-verType="tips"/>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"></span>路面宽度(米): </label>
- <div class="layui-input-block w-m180">
- <input name="roadSectionSurfaceWidth" type="number" placeholder="请输入路面宽度 例:5.2"
- class="layui-input" lay-verType="tips" min="0"/>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"></span>路面宽度组成(米): </label>
- <div class="layui-input-block w-m180">
- <input name="roadSectionSurfaceWidthConstitute" type="number" placeholder="请输入路面宽度 例:5.2"
- class="layui-input"
- lay-verType="tips" min="0"/>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"></span>路基宽度(米): </label>
- <div class="layui-input-block w-m180">
- <input name="roadSectionSubgradeWidth" type="number" placeholder="请输入路面宽度 例:5.2"
- class="layui-input"
- lay-verType="tips" min="0"/>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150">排水设施类型: </label>
- <div class="layui-input-block w-m180">
- <select name="roadSectionDewaterType" xm-select-radio>
- <option value="浅碟式边沟">浅碟式边沟</option>
- <option value="截水沟">截水沟</option>
- <option value="渗沟(井)">渗沟(井)</option>
- <option value="急流槽">急流槽</option>
- <option value="暗沟(管)">暗沟(管)</option>
- <option value="矩形边沟">矩形边沟</option>
- <option value="跌水井">跌水井</option>
- <option value="盖板">盖板</option>
- <option value="梯形边沟">梯形边沟</option>
- <option value="蒸发池">蒸发池</option>
- <option value="检查井">检查井</option>
- <option value="其他">其他</option>
- </select>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150"></span>排水设施长度(米): </label>
- <div class="layui-input-block w-m180">
- <input name="roadSectionDewaterLength" type="number" placeholder="请输入排水设施长度"
- class="layui-input"
- lay-verType="tips" min="0"/>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150">是否实现路宅分家: </label>
- <div class="layui-input-block w-m180">
- <input type="radio" name="roadSectionIsFarawayResidence" value="1" title="是" checked="">
- <input type="radio" name="roadSectionIsFarawayResidence" value="0" title="否">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150">路宅分家型式: </label>
- <div class="layui-input-block w-m180">
- <select name="roadSectionFarawayResidenceType" xm-select-radio>
- <option value="绿篱">绿篱</option>
- <option value="花坛"> 花坛</option>
- <option value="隔离墩">隔离墩</option>
- <option value="其他"> 其他</option>
- <option value="道牙">道牙</option>
- <option value="栅栏"> 栅栏</option>
- <option value="护栏">护栏</option>
- <option value="无"> 无</option>
- </select>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150">路宅分家长度(米): </label>
- <div class="layui-input-block w-m180">
- <input name="roadSectionFarawayResidenceLength" type="number" placeholder="请输入路宅分家长度"
- class="layui-input"
- lay-verType="tips" min="0"/>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label w-width150">备注: </label>
- <div class="layui-input-block w-m180">
- <textarea type="text" name="roadSectionRemark" id="roadSectionRemark"
- autocomplete="off" class="layui-input"></textarea>
- </div>
- </div>
- <div class="layui-form-item">
- <div class="layui-input-block w-m180">
- <button class="layui-btn" lay-filter="formSubmitBas" lay-submit> 保存 </button>
- <button type="reset" class="layui-btn layui-btn-primary"> 重置 </button>
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- </div>
- <!-- js部分 -->
- <script type="text/javascript" src="../../../../assets/libs/layui/layui.js"></script>
- <script type="text/javascript" src="../../../../assets/js/common.js?v=312"></script>
- <script>
- var resultData;
- layui.use(['layer', 'form', 'table', 'util', 'zTree', 'admin', 'uParas', 'laydate', '_groupTree', '_zTree'], function () {
- var $ = layui.jquery;
- var layer = layui.layer;
- var form = layui.form;
- var util = layui.util;
- var admin = layui.admin;
- var uParas = layui.uParas;
- var laydate = layui.laydate;
- var _groupTree = layui._groupTree;
- var _zTree = layui._zTree;
- form.verify({
- uniques: function (value) {
- var checkValue = value.trim();
- var checkResult = '';
- $.ajax({
- url: uParas.baseUrl + '/ent/road/checkRoadCode',
- type: 'POST',
- data: {
- "roadCode": checkValue
- },
- datatype: 'json',
- async: false,
- success: function (result) {
- if (result > 0) {
- checkResult = '路线编号重复,请重新填写'
- }
- },
- error: function () {
- checkResult = '路线编号验证失败'
- }
- });
- return checkResult
- }
- });
- var type = uParas.getUrlParam("type");
- $("#riskPointType").val(type);
- var url = uParas.baseUrl + "/ent/dangerSource/query?limit=1000";
- admin.req(url, {riskPointType: type}, function (resp) {
- layer.closeAll('loading');
- if (resp.code == 0) {
- layui.data(uParas.tableName, {
- key: "dangerSourceList",
- value: resp.data
- });
- }
- }, 'get');
- function riskPointLevelFunc(value) {
- var opts = '<div class="riskPointLevel">';
- if (value == 1) {
- opts += "<div class='notify'><span class='heartbit'></span><span><img src='../../../../assets/images/lv/red.png' style='width: 28px;height: 28px;'/></span></div>";
- } else if (value == 2) {
- opts += "<img src='../../../../assets/images/lv/orange.png' style='width: 28px;height: 28px;'/>";
- } else if (value == 3) {
- opts += "<img src='../../../../assets/images/lv/yellow.png' style='width: 28px;height: 28px;'/>";
- } else if (value == 4) {
- opts += "<img src='../../../../assets/images/lv/blue.png' style='width: 28px;height: 28px;'/>";
- } else {
- opts += "无";
- }
- opts += "</div>";
- return opts;
- }
- /*初始化危险源数据*/
- $.getJSON(url, function (result) {
- resultData = result;
- //console.log(resultData);
- });
- $("#addMarker").click(function () {
- layerOpen();
- });
- $.extend(window, {
- iconClick: function (e) {
- $(e).toggleClass('icon-active')
- }
- });
- $(".my-marker-box>ul").on('click', 'span', function (e) {
- $(e.target).parent().remove();
- var eles = $(".my-marker-box>ul>li");
- var ids = '';
- var lv = 4;
- $.each(eles, function (index, item) {
- var id = $(item).find('img').attr('id');
- var lvSon = $(item).find('img').attr('lv');
- if (id != undefined) {
- ids += id + ",";
- if (Number(lvSon) < Number(lv)) {
- lv = lvSon;
- }
- }
- });
- $("#dangerSourceIds").remove();
- $("#riskPointMinLevelSon").remove();
- $(".layui-form").append('<input type="hidden" id="riskPointMinLevelSon" name="riskPointMinLevelSon" value="' + lv + '">');
- $(".layui-form").append('<input type="hidden" id="dangerSourceIds" name="dangerSourceIds" value="' + ids + '">');
- })
- function layerOpen() {
- var outIds = $("#dangerSourceId").val();
- if ($("#dangerSourceIds").val() != undefined) {
- outIds += "," + $("#dangerSourceIds").val();
- }
- if (outIds == undefined) {
- outIds = new Array();
- }
- var defImgPath = "";
- var jobPng = "../../../assets/images/icon/job.png";
- var facilityPng = "../../../assets/images/icon/facility.png";
- //var dangerSourceList = layui.data(uParas.tableName).dangerSourceList;
- var html = '<div class="">';
- html += '<div class="danger-src-date popup-icon-box" style="width: 550px;float: left;margin-left: 20px;"><ul>';
- $.each(resultData.data, function (i, field) {
- var type = field.riskPointType;
- var riskPointLevel = riskPointLevelFunc(field.dangerSourceLevel);
- var imgPath = field.dangerImg;
- if (type == 1) {
- defImgPath = facilityPng;
- } else {
- defImgPath = jobPng;
- }
- if (imgPath == null || imgPath == "") {
- imgPath = defImgPath;
- } else {
- imgPath = uParas.baseUrl + imgPath;
- }
- var id = field.dangerSrcId;
- if (field.riskPointType == 1) {
- if (outIds.indexOf(id) == -1) {
- if (field.parentDangerSrcId == -1) {
- if (field.riskCount == field.riskCountParent) {
- html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
- html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>✦ </span>
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
- <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- } else {
- html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
- }
- } else {
- html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>✦ </span>
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
- <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- }
- }
- }
- });
- html += '</ul></div>';
- html += '<div class="danger-src-date popup-icon-box" style="float: left;width: 550px;"><ul>';
- $.each(resultData.data, function (i, field) {
- var type = field.riskPointType;
- var riskPointLevel = riskPointLevelFunc(field.dangerSourceLevel);
- var imgPath = field.dangerImg;
- if (type == 1) {
- defImgPath = facilityPng;
- } else {
- defImgPath = jobPng;
- }
- if (imgPath == null || imgPath == "") {
- imgPath = defImgPath;
- } else {
- imgPath = uParas.baseUrl + imgPath;
- }
- var id = field.dangerSrcId;
- if (field.riskPointType == 2) {
- if (outIds.indexOf(id) == -1) {
- if (field.parentDangerSrcId == -1) {
- if (field.riskCount == field.riskCountParent) {
- html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
- html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>➢ </span>
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
- <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- } else {
- html += '<li class="iconCategory_">' + field.dangerSrcName + '</li>';
- }
- } else {
- html += `<li onclick="iconClick(this)"><a href="javascript:;" id="${field.dangerSrcId}" class="marker-icon"><span style='font-size: 18px;margin-top: 10px;'>➢ </span>
- <img src="${imgPath}" id="${field.dangerSrcId}" type="${type}" lv="${field.dangerSourceLevel}" name="${field.dangerSrcName}" style='width: 25px;height: 25px;'></a>
- <span style="margin-left: 10px;color: #0c5df1;">${field.dangerSrcName}</span>${riskPointLevel}</li>`;
- }
- }
- }
- });
- html += '</ul></div></div>';
- layer.open({
- title: '【设备设施】' + '<span style="margin-left: 470px;">【作业活动】</span>',
- btn: ['确定', '取消'],
- type: 1,
- area: ['1200px', '60%'], //宽高
- content: html,
- yes: yes
- });
- }
- function yes(index) {
- var eles = $(".popup-icon-box>ul>li");
- var li = '';
- var ids = '';
- var lv = 4;
- $.each(eles, function (index, item) {
- if ($(item).hasClass('icon-active')) {
- var imgSrc = $(item).find('img').attr('src');
- var id = $(item).find('img').attr('id');
- var title = $(item).find('img').attr('name');
- var div = $(item).find('div').html();
- var lvSon = $(item).find('img').attr('lv');
- li += '<li><img src="' + imgSrc + '" id="' + id + '"lv=' + lvSon + ' ><span>x</span><p>' + title + '</p><div class="riskPointLevel">' + div + '</div></li>';
- if (id != undefined) {
- ids += id + ",";
- if (Number(lvSon) < lv) {
- lv = lvSon;
- }
- }
- }
- });
- $("#myMarkerBox>ul").prepend(li);
- if ($("#dangerSourceIds").val() != undefined) {
- ids += $("#dangerSourceIds").val();
- }
- $("#dangerSourceIds").remove();
- $("#riskPointMinLevelSon").remove();
- $(".layui-form").append('<input type="hidden" id="dangerSourceIds" name="dangerSourceIds" value="' + ids + '">');
- layer.close(index);
- }
- // 监听表单提交
- form.on('submit(formSubmitBas)', function (data) {
- // 表格选择的数据放到data.field中
- var obj = data.field;
- obj.liablePerson = obj.personsId;
- obj.liableGroupId = obj.roadSectionMaintainGroupId;
- admin.req(uParas.baseUrl + '/ent/roadSection/save', obj, function (resp) {
- layer.load();
- if (resp.code == 1) {
- layer.closeAll('loading');
- layer.msg(resp.msg);
- location.href = "./index.html";
- } else {
- layer.msg(resp.msg)
- }
- }, 'POST');
- return false;
- });
- uParas.initFormSelects("safetyOfficer", "/ent/groupAccount/getAccountList", "accountRealName", "aId");
- uParas.initFormSelects("roadId", "/ent/road/getRoadsByGroup", "roadName", "roadId");
- let liableGroupId = $("#roadSectionMaintainGroupId").val();
- if (liableGroupId != null) {
- let inGroupNumber = {
- reload: function (obj) {
- uParas.initFormSelects("roadSectionResponsibleId", uParas.baseUrl + '/admin/common/getUsersByGroupId?gId=' + obj.where.groupId, "accountRealName", "aId");
- }
- };
- _zTree._init('/admin/common/getGroupLists', 'gId', 'groupParent', 'groupName', 'gId', 0, 'groupTree_', inGroupNumber, 'menuContent_', 'roadSectionMaintainGroupName', 'roadSectionMaintainGroupId');
- uParas.initFormSelects("roadSectionResponsibleId", uParas.baseUrl + '/admin/common/getUsersByGroupId?gId=' + liableGroupId, "accountRealName", "aId");
- }
- });
- </script>
- </body>
- </html>
|