| widgets/FloodAnalysis/Widget.html | ●●●●● patch | view | raw | blame | history | |
| widgets/FloodAnalysis/Widget.js | ●●●●● patch | view | raw | blame | history | |
| widgets/FloodAnalysis/css/style.css | ●●●●● patch | view | raw | blame | history |
widgets/FloodAnalysis/Widget.html
@@ -1,90 +1,92 @@ <div> <div class="flood-top"> <input class="analysis-button" type="button" value="洪水淹没分析" /> <input class="history-button" type="button" value="历史风险图" /> </div> <div class="flood-middle"> <div class="flood-analysis"> <div class="select-box"> <div class="hd"> <label for="hd-select">河段：</label> <select id="hd-select" class="hd-select" name="hd" > </select> <!--做模糊查询选择框时使用--> <!-- <input type="text" name="hd-input" id="hd-input" class="hd-input" placeholder="请选择或输入" />--> <!-- <select name="hd-select" id="hd-select" size="10" style="display:none;">--> <!-- </select>--> </div> <div class="smx"> <label for="smx-select">水面线：</label> <select id="smx-select" class="smx-select" name="smx"> </select> </div> <div class="sw"> <label for="sw-input">水位：</label> <div style="display: flex;flex-direction: column"> <input id="sw-input" class="sw-input" type="text" name="word" autocomplete="off" maxlength="256"/> <span class="tip">正数为水位上涨，负数为水位下降</span> </div> </div> </div> <div class="radio-box"> <input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时 <input id="forecast" type="radio" name="middleRadio" value="forecast">预测 </div> <div class="table-box"> <table> <thead class="flood-table-thead table-thead"> <tr> <th> <div>位置</div> </th> <th> <div>起点距</div> </th> <th> <div>经度</div> </th> <th> <div>纬度</div> </th> <th> <div>水面线</div> </th> <th> <div>水位</div> </th> </tr> </thead> <tbody id="flood-tbody" class="table-tbody flood-tbody"></tbody> </table> <div class="flood-analysis-pagination Pagination" id="analysis-pagination"></div> </div> </div> <div class="flood-history"> <div class="search-box"> <label for="search-name">名称：</label> <input id="search-name" class="search-name-input" type="text" name="word" autocomplete="off" maxlength="256" placeholder="请输入筛选名称"/> <input class="search-button" type="button" value="查 询" /> </div> <div class="table-box"> <table> <thead class="flood-table-thead table-thead"> <tr> <th style="width: 85px;"> <div class="flood-top"> <input class="analysis-button" type="button" value="洪水淹没分析"/> <input class="history-button" type="button" value="历史风险图"/> </div> <div class="flood-middle"> <div class="flood-analysis"> <div class="select-box"> <div class="hd"> <label for="hd-select">河段：</label> <!-- <select id="hd-select" class="hd-select" name="hd" >--> </select> <!--做模糊查询选择框时使用--> <input type="text" name="hd-input" id="hd-input" class="hd-input" placeholder="请选择或输入"/> <select name="hd-select" id="hd-select" size="10"> </select> </div> <div class="smx"> <label for="smx-select">水面线：</label> <select id="smx-select" class="smx-select" name="smx"> </select> </div> <div class="sw"> <label for="sw-input">水位：</label> <div style="display: flex;flex-direction: column"> <input id="sw-input" class="sw-input" type="text" name="word" autocomplete="off" maxlength="256"/> <span class="tip">正数为水位上涨，负数为水位下降</span> </div> </div> </div> <div class="radio-box"> <input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时 <input id="forecast" type="radio" name="middleRadio" value="forecast">预测 </div> <div class="table-box"> <table> <thead class="flood-table-thead table-thead"> <tr> <th> <div>位置</div> </th> <th> <div>起点距</div> </th> <th> <div>经度</div> </th> <th> <div>纬度</div> </th> <th> <div>水面线</div> </th> <th> <div>水位</div> </th> </tr> </thead> <tbody id="flood-tbody" class="table-tbody flood-tbody"></tbody> </table> <div class="flood-analysis-pagination Pagination" id="analysis-pagination"></div> </div> </div> <div class="flood-history"> <div class="search-box"> <label for="search-name">名称：</label> <input id="search-name" class="search-name-input" type="text" name="word" autocomplete="off" maxlength="256" placeholder="请输入筛选名称"/> <input class="search-button" type="button" value="查 询"/> </div> <div class="table-box"> <table> <thead class="flood-table-thead table-thead"> <tr> <th style="width: 85px;"> </th> <th> <div>名称</div> </th> </tr> </thead> <tbody id="flood-history-tbody" class="table-tbody flood-tbody"></tbody> </table> <div class="flood-analysis-pagination Pagination" id="history-pagination"></div> </div> </div> </div> <div class="flood-bottom"> </div> </th> <th> <div>名称</div> </th> </tr> </thead> <tbody id="flood-history-tbody" class="table-tbody flood-tbody"></tbody> </table> <div class="flood-analysis-pagination Pagination" id="history-pagination"></div> </div> </div> </div> <div class="flood-bottom"> </div> </div> widgets/FloodAnalysis/Widget.js
@@ -23,15 +23,15 @@ //河段下拉列表 hdDataList: [], //洪水分析表格数据 analysisTableList:[], currentHdId:"", currentSmxcode:"", analysisTableList: [], currentHdId: "", currentSmxcode: "", //api接口 url:{ riverwaySelectName:"http://192.168.0.200:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4", waterlineSelectName:"http://192.168.0.200:82/blade-ycreal/waterline/selectName", childpage:"http://192.168.0.200:82/blade-ycreal/water/childpage", getCzByGlCodeByGlQdj:"http://192.168.0.200:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj" url: { riverwaySelectName: "http://192.168.0.200:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4", waterlineSelectName: "http://192.168.0.200:82/blade-ycreal/waterline/selectName", childpage: "http://192.168.0.200:82/blade-ycreal/water/childpage", getCzByGlCodeByGlQdj: "http://192.168.0.200:82/blade-ycreal/waterline/getCzByGlCodeByGlQdj" }, startup: function startup() { var self = this @@ -63,44 +63,49 @@ }) //河段输入框聚焦、失焦、值改变事件 $('#hd-input').focus(function () { $("#hd-select").show() }) // $('#hd-input').focus(function () { // $("#hd-select").css({"display": ""}); // }) // // $('#hd-input').blur(function () { // $("#hd-select").css({"display": "none"}); // }) // // $('#hd-select').change(function () { // console.log($('#hd-select').find("option:selected").text(), "----") // $("#hd-input").val($('#hd-select').find("option:selected").text()); // $("#hd-select").css({"display": "none"}); // }) // $('#hd-input').blur(function () { //隐藏域触发改变事件需要手动触发 $("#hd-select").val().change() $("#hd-select").hide() }) $('#hd-input').on("input", function () { var searchString = $('#hd-input').val() var filterArray = self.hdDataList.filter(e => { return e.riverway.indexOf(searchString) != -1 }) self.hdSelect.find("option").remove();//添加新值 删除旧值 filterArray.forEach(e => { self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>"); }) }) this.hdSelect.change(function () { $("#hd-input").val($(this).find("option:selected").text()); var selected = JSON.parse($(this).val()) self.currentHdId = selected.id $('#sw-input').val("") self.getSmxData(selected.river_code,selected.default_smx) self.getSmxData(selected.river_code, selected.default_smx) self.hdSelect.hide() }) this.smxSelect.change(function () { var selected =$(this).val() var selected = $(this).val() self.getPointData(selected) }) $('#sw-input').keypress(function (event) { if (event.which == 13){ if (event.which == 13) { let sw = $('#sw-input').val() self.analysisTableList.forEach(e=>{ e.sw = self.calculateSw(e.water,sw) self.analysisTableList.forEach(e => { e.sw = self.calculateSw(e.water, sw) }) self.loadPagination(self.analysisTableList,"analysis-pagination") self.loadPagination(self.analysisTableList, "analysis-pagination") } }) @@ -134,6 +139,7 @@ $('#hd-select option').remove() $('#smx-select option').remove() $('#sw-input').val("") $('#hd-input').val("") $('#flood-tbody').html("") $('#analysis-pagination').hide() @@ -218,7 +224,8 @@ this.spanTip.css('visibility', 'hidden') this.divFloodHistory.hide() this.divFloodAnalysis.show() $("input[type=radio][name=middleRadio][value='realtime']").prop('checked','checked') $("input[type=radio][name=middleRadio][value='realtime']").prop('checked', 'checked') this.hdSelect.hide() this.analysisBtn.addClass('choose-button') this.analysisBtn.removeClass('unchoose-button') @@ -240,8 +247,8 @@ data: {}, success: function (res) { let data = res.data self.hdDataList = data self.hdSelect.find("option").remove();//添加新值 删除旧值 self.hdSelect.prepend("<option value=''>请选择</option>");//添加第一个option值 data.forEach(e => { self.hdSelect.append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>"); }) @@ -250,7 +257,7 @@ }, //获取水面线数据 getSmxData(hdid,defaultId) { getSmxData(hdid, defaultId) { const self = this $.ajax({ url: self.url.waterlineSelectName, @@ -259,17 +266,22 @@ jsonp: 'callback', jsonpCallback: 'data', data: { hdid:hdid hdid: hdid }, success: function (res) { let data = res.data self.smxSelect.find("option").remove();//添加新值 删除旧值 data.forEach(e => { // $("#chapterName").prepend("<option value='无'>无</option>");//添加第一个option值 self.smxSelect.append("<option value="+ e.smxcode +">" + e.waterline + "</option>"); if (data.length <= 0) { $('#flood-tbody').html("") $('#analysis-pagination').hide() } if (e.smxcode == defaultId){ $("#smx-select option[value="+e.smxcode + "] ").attr("selected",true) data.forEach(e => { self.smxSelect.append("<option value=" + e.smxcode + ">" + e.waterline + "</option>"); if (e.smxcode == defaultId) { $("#smx-select option[value=" + e.smxcode + "] ").attr("selected", true) self.smxSelect.trigger("change") } }) @@ -279,7 +291,7 @@ }, //获取点数据 getPointData(smxcode){ getPointData(smxcode) { this.currentSmxcode = smxcode const self = this $.ajax({ @@ -289,14 +301,14 @@ jsonp: 'callback', jsonpCallback: 'data', data: { parentId:smxcode, size:9999999 parentId: smxcode, size: 9999999 }, success: function (res) { if (res.code == 200){ if (res.code == 200) { let data = res.data.records self.analysisTableList = data self.getSub(self.currentHdId,self.currentSmxcode) self.getSub(self.currentHdId, self.currentSmxcode) } } }); @@ -308,11 +320,13 @@ * @param pageElementId 分页html的id * @param tableElementId tbody id */ loadPagination(tableData,pageElementId) { if (tableData.length < 0) return loadPagination(tableData, pageElementId) { if (tableData.length <= 0) { $('#analysis-pagination').hide() } var count = Math.ceil(tableData.length / 10); var self = this $('#'+pageElementId).pagination({ $('#' + pageElementId).pagination({ mode: 'fixed', jump: true, coping: false, @@ -350,9 +364,9 @@ * @param listData 需要加载的数据 * @param elementId 需要加载的表格的tbody id */ loadAnalysisTable(listData,elementId) { loadAnalysisTable(listData, elementId) { var table = "" listData.forEach(e=>{ listData.forEach(e => { table += '<tr>' + '<td><div>' + e.location + '</div></td>' + '<td><div>' + e.origin + '</div></td>' + @@ -370,15 +384,14 @@ * @param waterline 水面线高度 * @param number 差值 */ calculateSw(waterline,sub){ let sw = this.floatAdd(Number(waterline) , Number(sub)) calculateSw(waterline, sub) { let sw = this.floatAdd(Number(waterline), Number(sub)) return sw }, //获取差值 getSub(hdid,smxcode){ getSub(hdid, smxcode) { const self = this console.log(hdid,smxcode) $.ajax({ url: self.url.getCzByGlCodeByGlQdj, type: 'get', @@ -386,22 +399,22 @@ jsonp: 'callback', jsonpCallback: 'data', data: { hdId:hdid, smxcode:smxcode hdId: hdid, smxcode: smxcode }, success: function (res) { if (res.code == 200){ if (res.code == 200) { let sub = res.data self.analysisTableList.forEach(e=>{ self.analysisTableList.forEach(e => { e.lng = Number(e.lng).toFixed(4) e.lat = Number(e.lat).toFixed(4) e.sw = self.calculateSw(e.water,sub) e.sw = self.calculateSw(e.water, sub) e.water = Number(e.water).toFixed(4) e.sw = Number(e.sw).toFixed(4) }) self.loadPagination(self.analysisTableList,"analysis-pagination") self.loadPagination(self.analysisTableList, "analysis-pagination") } } }); widgets/FloodAnalysis/css/style.css
@@ -1,15 +1,15 @@ .jimu-widget-FloodAnalysis { width: 60% !important; height: 100%; position: fixed !important; left: 30px !important; top: 75px !important; border: 1px solid rgb(69, 154, 251); border-radius: 5px; background: rgba(31, 39, 48, .7); z-index: 41 !important; color: rgb(255, 255, 255); font-size: 22px; width: 60% !important; height: 100%; position: fixed !important; left: 30px !important; top: 75px !important; border: 1px solid rgb(69, 154, 251); border-radius: 5px; background: rgba(35, 36, 58, 1); z-index: 41 !important; color: rgb(255, 255, 255); font-size: 22px; } .jimu-widget-FloodAnalysis div, @@ -19,250 +19,239 @@ .jimu-widget-FloodAnalysis span, .jimu-widget-FloodAnalysis input, .jimu-widget-FloodAnalysis h2 { margin: 0; padding: 0; margin: 0; padding: 0; } .flood-top{ text-align: center; display: inline-flex; margin-left: 41% !important; .flood-top { text-align: center; display: inline-flex; margin-left: 41% !important; } .flood-middle .select-box{ display: flex; margin: 1% 0 0 1%; .flood-middle .select-box { display: flex; margin: 1% 0 0 1%; } .select-box>div{ display: flex; margin-right: 3%; .select-box > div { display: flex; margin-right: 3%; } .flood-top input{ width: 100px; height: 25px; cursor: pointer; .flood-top input { width: 100px; height: 25px; cursor: pointer; } .flood-top .choose-button{ background-color: #1f81e0; border: none; color: white; .flood-top .choose-button { background-color: #1f81e0; border: none; color: white; } .flood-top .unchoose-button{ background-color: white; border: none; color: #1f81e0; .flood-top .unchoose-button { background-color: white; border: none; color: #1f81e0; } .search-button{ width: 50px; height: 28px; background-color: white; border: none; cursor: pointer; .search-button { width: 50px; height: 28px; background-color: white; border: none; cursor: pointer; } .flood-middle .select-box select,.flood-middle .select-box input,.search-name-input{ height: 30px; width: 260px; .flood-middle .select-box select, .flood-middle .select-box input, .search-name-input { height: 30px; width: 260px; } .flood-middle .radio-box{ text-align: center; margin-top: -1%; .flood-middle .radio-box { text-align: center; margin-top: -1%; } .flood-middle .tip{ font-size: 1px; color: #ff3737; .flood-middle .tip { font-size: 1px; color: #ff3737; } .select-box label{ display: inline-block; /*width: 80px;*/ height: 30px; line-height: 30px; vertical-align: middle; text-align: justify; text-align-last: justify; .select-box label { display: inline-block; /*width: 80px;*/ height: 30px; line-height: 30px; vertical-align: middle; text-align: justify; text-align-last: justify; } /**表格**/ .flood-middle .table-box{ margin-top: 1%; .flood-middle .table-box { margin-top: 1%; } .flood-middle .table-box table{ width: 100%; .flood-middle .table-box table { width: 100%; } .flood-table-thead tr th { text-align: center; border-top: 1px solid #CFCFCF; border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; color: #ffffff; background: rgb(39, 118, 172); text-align: center; border-top: 1px solid #CFCFCF; border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; color: #ffffff; background: rgb(39, 118, 172); } .flood-tbody tr td { text-align: center; border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; color: #ffffff; text-align: center; border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; color: #ffffff; } .flood-history .search-box{ text-align: center; margin-top: 1%; .flood-history .search-box { text-align: center; margin-top: 1%; } /**模糊查询**/ .hd { position: relative; } .hd input { width: 167px; /* top: 9px; */ outline: none; border: 0pt; /* position: absolute; */ line-height: 30px; /* left: 8px; */ height: 30px; border: 1px solid #999; } .hd select { position: absolute; left: 66px; width: 167px; height: 106px !important; outline: none; border: 1px solid #999; margin-top: 31px; } /*!**模糊查询**!*/ /*.hd {*/ /* position: relative;*/ /*}*/ /*.hd input {*/ /* width: 167px;*/ /* !* top: 9px; *!*/ /* outline: none;*/ /* border: 0pt;*/ /* !* position: absolute; *!*/ /* line-height: 30px;*/ /* !* left: 8px; *!*/ /* height: 30px;*/ /* border: 1px solid #999;*/ /*}*/ /*.hd select {*/ /* position: absolute;*/ /* left: 66px;*/ /* width: 167px;*/ /* height: 106px !important;*/ /* outline: none;*/ /* border: 1px solid #999;*/ /* margin-top: 31px;*/ /*}*/ /*.hd select option:hover {*/ /* background: #1388ff;*/ /* color: white;*/ /*}*/ .hd select option:hover { background: #1388ff; color: white; } /**分页器**/ .flood-analysis-pagination { position: relative; text-align: center; zoom: 1; display: flex; width: 92%; justify-content: flex-end; position: relative; text-align: center; zoom: 1; display: flex; width: 92%; justify-content: flex-end; } .flood-analysis-pagination:before, .flood-analysis-pagination:after { content: ""; display: table; content: ""; display: table; } .flood-analysis-pagination:after { clear: both; overflow: hidden; clear: both; overflow: hidden; } .flood-analysis-pagination span { float: left; margin: 0 5px; width: 25px; height: 25px; line-height: 25px; color: #bdbdbd; font-size: 14px; float: left; margin: 0 5px; width: 25px; height: 25px; line-height: 25px; color: #bdbdbd; font-size: 14px; } .flood-analysis-pagination .active { float: left; margin: 3px 5px; width: 25px; height: 25px; line-height: 25px !important; background: #e91e63; color: #fff; font-size: 14px; border: 1px solid #e91e63; float: left; margin: 3px 5px; width: 25px; height: 25px; line-height: 25px !important; background: #e91e63; color: #fff; font-size: 14px; border: 1px solid #e91e63; } .flood-analysis-pagination a { float: left; margin: 3px 5px; width: 25px; height: 25px; line-height: 25px !important; background: rgb(39, 118, 172); border: 1px solid #ebebeb; color: #ffffff; font-size: 14px; float: left; margin: 3px 5px; width: 25px; height: 25px; line-height: 25px !important; background: rgb(39, 118, 172); border: 1px solid #ebebeb; color: #ffffff; font-size: 14px; } .flood-analysis-pagination a:hover { color: #fff; background: #e91e63; color: #fff; background: #e91e63; } .flood-analysis-pagination .next, .flood-analysis-pagination .prev { font-family: "Simsun"; font-size: 16px; font-weight: bold; font-family: "Simsun"; font-size: 16px; font-weight: bold; } .now, .count { padding: 0 5px; color: #f00; padding: 0 5px; color: #f00; } .eg img { max-width: 800px; min-height: 500px; max-width: 800px; min-height: 500px; } .flood-analysis-pagination input { float: left; margin: 3px 5px; width: 25px; height: 25px; line-height: 25px !important; text-align: center; background: #fff; border: 1px solid #ebebeb; outline: none; color: #bdbdbd; font-size: 14px; float: left; margin: 3px 5px; width: 25px; height: 25px; line-height: 25px !important; text-align: center; background: #fff; border: 1px solid #ebebeb; outline: none; color: #bdbdbd; font-size: 14px; } #analysis-pagination,#history-pagination { /*position: absolute;*/ margin-top: 5px; margin-bottom: 5px; #analysis-pagination, #history-pagination { /*position: absolute;*/ margin-top: 5px; margin-bottom: 5px; } .flood-analysis-pagination .jump-btn { width: 38px !important; width: 38px !important; }
