From 89d57baac18111b9d82c0858c0c680f2d481b8c9 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Fri, 17 Feb 2023 14:23:10 +0800
Subject: [PATCH] 洪水淹没-修改展示样式
---
widgets/FloodAnalysis/Widget copy3.html | 123 +++++++
widgets/FloodAnalysis/Widget.html | 161 +++------
widgets/FloodAnalysis/css/style.css | 276 +++++++--------
widgets/FloodAnalysis/manifest.json | 1
widgets/FloodAnalysis/css/style cpoy3.css | 307 ++++++++++++++++++
widgets/FloodAnalysis/Widget.js | 98 +++-
themes/FoldableTheme/panels/FoldablePanel/Panel.js | 3
themes/FoldableTheme/panels/FoldablePanel/FoldableDijit.js | 2
8 files changed, 675 insertions(+), 296 deletions(-)
diff --git a/themes/FoldableTheme/panels/FoldablePanel/FoldableDijit.js b/themes/FoldableTheme/panels/FoldablePanel/FoldableDijit.js
index 9d4afac..956de48 100644
--- a/themes/FoldableTheme/panels/FoldablePanel/FoldableDijit.js
+++ b/themes/FoldableTheme/panels/FoldablePanel/FoldableDijit.js
@@ -92,4 +92,4 @@
onFoldStateChanged: function(){}
});
- });
\ No newline at end of file
+ });
diff --git a/themes/FoldableTheme/panels/FoldablePanel/Panel.js b/themes/FoldableTheme/panels/FoldablePanel/Panel.js
index 8c9b71d..6d5c034 100644
--- a/themes/FoldableTheme/panels/FoldablePanel/Panel.js
+++ b/themes/FoldableTheme/panels/FoldablePanel/Panel.js
@@ -30,7 +30,6 @@
startup: function() {
this.titleHeight = 35;
this.inherited(arguments);
-
html.addClass(this.titleNode, 'jimu-panel-title jimu-main-background');
this.createCloseBtn();
this.createMaxBtn();
@@ -260,4 +259,4 @@
}
}
});
- });
\ No newline at end of file
+ });
diff --git a/widgets/FloodAnalysis/Widget copy3.html b/widgets/FloodAnalysis/Widget copy3.html
new file mode 100644
index 0000000..ab6cd2a
--- /dev/null
+++ b/widgets/FloodAnalysis/Widget copy3.html
@@ -0,0 +1,123 @@
+<div>
+ <div class="fold-btn"></div>
+ <div class="content">
+ <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>
+ <div class="hd">
+ <label for="hd-select">河段：</label>
+ <!--做模糊查询选择框时使用-->
+ <input type="text" name="hd-search" id="hd-input" class="hd-input" autocomplete="off" placeholder="请选择或输入"/>
+ <select name="hd-select-name" 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>
+ <div style="margin-top: 1%">
+ <div class="sw" style="display: flex">
+ <label for="sw-input">水位：</label>
+ <div style="display: flex;flex-direction: column;margin-left: 6px;">
+ <input id="sw-input" class="sw-input" name="word" autocomplete="off"
+ maxlength="10" value="0" disabled />
+ <span class="tip">正数为水位上涨，负数为水位下降</span>
+ </div>
+ </div>
+ <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>
+ </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>
+ </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 id="search-button" class="search-button" type="button" value="查 询"/>
+ </div>
+ <div class="table-box">
+ <table>
+ <thead class="flood-table-thead table-thead">
+ <tr>
+ <th style="width: 30px;">
+
+ </th>
+ <th>
+ <div>名称</div>
+ </th>
+ </tr>
+ </thead>
+ <tbody id="flood-history-tbody" class="table-tbody flood-tbody">
+ <tr>
+ <td>
+ <div><input type="radio" name="tableRadio" value="1"></div>
+ </td>
+ <td>
+ <div>5年洪水淹没图</div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div><input type="radio" name="tableRadio" value="2"></div>
+ </td>
+ <td>
+ <div>10年洪水淹没图</div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div><input type="radio" name="tableRadio" value="3"></div>
+ </td>
+ <td>
+ <div>15年洪水淹没图</div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ <div class="flood-bottom">
+ <div class="flood-analysis-pagination" id="analysis-pagination"></div>
+ <div class="flood-analysis-pagination" id="history-pagination"></div>
+ </div>
+ </div>
+</div>
diff --git a/widgets/FloodAnalysis/Widget.html b/widgets/FloodAnalysis/Widget.html
index 14e0072..ccfffd5 100644
--- a/widgets/FloodAnalysis/Widget.html
+++ b/widgets/FloodAnalysis/Widget.html
@@ -1,123 +1,64 @@
<div>
- <div class="fold-btn"></div>
- <div class="content">
- <div class="flood-top">
- <input class="analysis-button" type="button" value="洪水淹没分析"/>
- <input class="history-button" type="button" value="历史风险图"/>
+ <div id="tab">
+ <div class="tabul">
+ <ul>
+ <li id ="analysis-button" class="analysis-button">洪水淹没分析</li>
+ <li class="history-button">历史风险图</li>
+ </ul>
</div>
- <div class="flood-middle">
- <div class="flood-analysis">
- <div class="select-box">
- <div>
- <div class="hd">
- <label for="hd-select">河段：</label>
- <!--做模糊查询选择框时使用-->
- <input type="text" name="hd-search" id="hd-input" class="hd-input" placeholder="请选择或输入"/>
- <select name="hd-select-name" 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>
- <div style="margin-top: 1%">
- <div class="sw" style="display: flex">
- <label for="sw-input">水位：</label>
- <div style="display: flex;flex-direction: column;margin-left: 6px;">
- <input id="sw-input" class="sw-input" name="word" autocomplete="off"
- maxlength="10" value="0" disabled />
- <span class="tip">正数为水位上涨，负数为水位下降</span>
+ <div id="tablist" style="height: 100%">
+ <div class="flood-middle" style="height: 100%">
+ <div class="flood-analysis" style="height: 100%">
+ <div class="select-box">
+ <div>
+ <div class="hd">
+ <label for="hd-select">河段：</label>
+ <!--做模糊查询选择框时使用-->
+ <input type="text" name="hd-search" id="hd-input" class="hd-input" placeholder="请选择或输入"/>
+ <select name="hd-select-name" 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>
- <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>
+ <div style="margin-top: 1%">
+ <div class="sw" style="display: flex">
+ <label for="sw-input">水位：</label>
+ <div style="display: flex;flex-direction: column;margin-left: 6px;">
+ <input id="sw-input" class="sw-input" name="word" autocomplete="off" maxlength="10" value="0" disabled />
+ <span class="tip">正数为水位上涨，负数为水位下降</span>
+ </div>
+ <input id="start-analysis-btn" class="start-analysis-btn" type="button" value="开始分析"/>
+
+ </div>
+
+ </div>
+
</div>
-
+ <div class="radio-box" style="text-align: center">
+ <input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时
+ <input id="forecast" type="radio" name="middleRadio" value="forecast">预测
+ </div>
+ <div style="height: 71%" class="location-box-list" id="analysis-tab1-grid" data-dojo-attach-point="analysis-tab1-grid">
+ </div>
+ <div class="flood-analysis-pagination" id="analysis-pagination"></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>
- </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 id="search-button" class="search-button" type="button" value="查 询"/>
- </div>
- <div class="table-box">
- <table>
- <thead class="flood-table-thead table-thead">
- <tr>
- <th style="width: 30px;">
-
- </th>
- <th>
- <div>名称</div>
- </th>
- </tr>
- </thead>
- <tbody id="flood-history-tbody" class="table-tbody flood-tbody">
- <tr>
- <td>
- <div><input type="radio" name="tableRadio" value="1"></div>
- </td>
- <td>
- <div>5年洪水淹没图</div>
- </td>
- </tr>
- <tr>
- <td>
- <div><input type="radio" name="tableRadio" value="2"></div>
- </td>
- <td>
- <div>10年洪水淹没图</div>
- </td>
- </tr>
- <tr>
- <td>
- <div><input type="radio" name="tableRadio" value="3"></div>
- </td>
- <td>
- <div>15年洪水淹没图</div>
- </td>
- </tr>
- </tbody>
- </table>
+ <div class="flood-history" style="height: 100%">
+ <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 id="search-button" class="search-button" type="button" value="查 询"/>
+ </div>
+ <div style="height: 100%" class="location-box-list" id="history-tab2-grid" data-dojo-attach-point="history-tab2-grid">
+ </div>
+ <div class="flood-analysis-pagination" id="history-pagination"></div>
</div>
</div>
</div>
<div class="flood-bottom">
- <div class="flood-analysis-pagination" id="analysis-pagination"></div>
- <div class="flood-analysis-pagination" id="history-pagination"></div>
</div>
</div>
</div>
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 18cf964..ceb931e 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -2,7 +2,24 @@
// Copyright © 2022 guoshilong. All Rights Reserved.
// 模块描述:洪水淹没分析
///////////////////////////////////////////////////////////////////////////
-define(['dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/_base/html', "dojo/topic", 'jimu/BaseWidget', 'dojo/on', 'dstore/Memory', 'dstore/Trackable', 'dgrid/Grid', 'dgrid/Keyboard', 'dgrid/Selection', 'dstore/RequestMemory', 'dgrid/test/data/createSyncStore', "libs/echarts/v4/echarts.min", 'libs/layer/layer.js', 'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection, RequestMemory, createSyncStore, echarts, layer, turf) {
+define(['dojo/_base/declare',
+ 'dojo/_base/lang',
+ 'dojo/_base/array',
+ 'dojo/_base/html',
+ "dojo/topic",
+ 'jimu/BaseWidget',
+ 'dojo/on',
+ 'dstore/Memory',
+ 'dstore/Trackable',
+ 'dgrid/Grid',
+ 'dgrid/Keyboard',
+ 'dgrid/Selection',
+ 'dgrid/Editor',
+ 'dstore/RequestMemory',
+ 'dgrid/test/data/createSyncStore',
+ "libs/echarts/v4/echarts.min",
+ 'libs/layer/layer.js',
+ 'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection,Editor, RequestMemory, createSyncStore, echarts, layer, turf) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-FloodAnalysis',
name: 'FloodAnalysis',
@@ -105,16 +122,12 @@
}
})
- //历史风险图表格单选框改变事件
- $('input[type=radio][name=tableRadio]').change(function () {
- console.log(this.value)
- })
-
//洪水淹没分析按钮点击事件
this.analysisBtn.click(function () {
self.analysisBtn.addClass('choose-button')
self.analysisBtn.removeClass('unchoose-button')
self.historyBtn.addClass('unchoose-button')
+ self.historyBtn.removeClass('choose-button')
self.divFloodHistory.hide()
self.divFloodAnalysis.show()
$('#history-pagination').hide()
@@ -128,6 +141,7 @@
self.historyBtn.addClass('choose-button')
self.historyBtn.removeClass('unchoose-button')
self.analysisBtn.addClass('unchoose-button')
+ self.analysisBtn.removeClass('choose-button')
self.divFloodAnalysis.hide()
self.divFloodHistory.show()
$('#analysis-pagination').hide()
@@ -146,7 +160,6 @@
setTimeout(function(){//有bug 需要延迟执行隐藏
$("#hd-select").hide()
},300)
-
})
// 河道输入事件
$('#hd-input').on("input", function () {
@@ -238,7 +251,8 @@
$('#smx-select option').remove()
$('#sw-input').val("")
$('#hd-input').val("")
- $('#flood-tbody').html("")
+ //清空表格数据
+ $('.location-box-list').empty();
$('#analysis-pagination').hide()
this.analysisTableList = []
@@ -283,6 +297,7 @@
$('.fold-btn').removeClass('close')
$('.content').show()
$("#sw-input").prop('disabled', true);
+ $('#search-name').val("")
this.isOpen = true
this.analysisBtn.addClass('choose-button')
@@ -292,7 +307,10 @@
this.currentHd = null
this.currentSmxcode = ""
+ //获取河段数据
this.getHdData()
+ //获取历史数据
+ this.getHistoryList()
},
//获取河段下拉数据
@@ -450,7 +468,7 @@
if (tableData.length <= 0 && pageElementId == "history-pagination") {
$('#history-pagination').hide()
}
- let pageSize = 19
+ let pageSize = 10
var count = Math.ceil(tableData.length / pageSize);
var self = this
$('#' + pageElementId).pagination({
@@ -469,7 +487,7 @@
}
}
- pageElementId == "analysis-pagination" ? self.loadAnalysisTable(listdata) : self.loadHistoryTable(listdata)
+ pageElementId == "analysis-pagination" ? self.createList(listdata,"洪水淹没分析") : self.createList(listdata,"历史风险图")
}
});
@@ -485,26 +503,7 @@
startData.push(tableData[i]);
}
}
- pageElementId == "analysis-pagination" ? self.loadAnalysisTable(startData) : self.loadHistoryTable(startData)
- },
-
- /**
- * 加载淹没分析表格
- * @param listData 需要加载的数据
- */
- loadAnalysisTable(listData) {
- var table = ""
- listData.forEach(e => {
- table += '<tr>' +
- '<td><div>' + e.location + '</div></td>' +
- '<td><div>' + e.origin + '</div></td>' +
- '<td><div>' + e.lng + '</div></td>' +
- '<td><div>' + e.lat + '</div></td>' +
- '<td><div>' + e.water + '</div></td>' +
- '<td><div>' + e.sw + '</div></td>' +
- '</tr>'
- })
- $('#flood-tbody').html(table)
+ pageElementId == "analysis-pagination" ? self.createList(startData,"洪水淹没分析") : self.createList(startData,"历史风险图")
},
/**
@@ -617,13 +616,13 @@
return (arg1 * m + arg2 * m) / m;
},
+ //删除地图上的标注点位
deleteEntities(entities) {
entities.forEach(e => {
this.map.entities.remove(e)
})
entities = []
},
-
//评估分析弹窗
evaluatePopup() {
@@ -648,6 +647,43 @@
});
},
+ //http://dgrid.io/tutorials/1.0/hello_dgrid/ 创建表格
+ createList: function (dataList, txt) {
+ $('.location-box-list').empty();
+ var CustomGrid = declare([Grid, Keyboard, Selection,Editor]);
+ var column, tab, moon, dauy;
+ if (txt == "洪水淹没分析") {
+ column = {
+ location: '位置',
+ origin: '起点距',
+ water: '水面线',
+ sw: '水位',
+ lng:'经度',
+ lat:'纬度',
+ }
+ tab = 'analysis-tab1-grid'
+ } else if (txt == "历史风险图") {
+ column = {
+ radio:{ label: "", field: "radio", editor: 'radio' },
+ name: '名称',
+ }
+ tab = 'history-tab2-grid'
+ }
+ var grid = new CustomGrid({
+ columns: column,
+ selectionMode: 'none', // for Selection; only select a single row at a time
+ cellNavigation: false, // for Keyboard; allow only row-level keyboard navigation
+ }, tab);
+ grid.startup();
+
+ //点击事件
+ grid.on("dgrid-datachange", function(evt){
+ //获取行数据
+ let data = evt.cell.row.data
+ });
+ grid.renderArray(dataList);
+ },
+
});
});
diff --git a/widgets/FloodAnalysis/css/style cpoy3.css b/widgets/FloodAnalysis/css/style cpoy3.css
new file mode 100644
index 0000000..e260e50
--- /dev/null
+++ b/widgets/FloodAnalysis/css/style cpoy3.css
@@ -0,0 +1,307 @@
+.jimu-widget-FloodAnalysis {
+ width: 38% !important;
+ height: 100%;
+ position: fixed !important;
+ /*left: 30px !important;*/
+ top: 45px !important;
+ border: 1px solid rgb(69, 154, 251);
+ border-radius: 5px;
+ background: rgba(35, 36, 58, .7);
+ z-index: 41 !important;
+ color: rgb(255, 255, 255);
+ font-size: 22px;
+}
+
+.jimu-widget-FloodAnalysis div,
+.jimu-widget-FloodAnalysis i,
+.jimu-widget-FloodAnalysis ul,
+.jimu-widget-FloodAnalysis li,
+.jimu-widget-FloodAnalysis span,
+.jimu-widget-FloodAnalysis input,
+.jimu-widget-FloodAnalysis h2 {
+ margin: 0;
+ padding: 0;
+}
+
+.fold-btn {
+ width: 50px;
+ height: 30px;
+ position: fixed;
+ cursor: pointer;
+ background-color: rgb(39, 118, 172);
+ background-image: url(../images/fold_up.png);
+ border-radius: 5px;
+ opacity: 1;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.open {
+ background-image: url(../images/fold_up.png);
+}
+
+.close {
+ background-image: url(../images/fold_down.png);
+}
+
+.content{
+ height: 92vh;
+}
+
+.flood-top {
+ text-align: center;
+ display: inline-flex;
+ margin-left: 35% !important;
+}
+
+.flood-middle{
+ height: 90%;
+}
+
+.flood-middle .select-box {
+ margin: 1% 0 0 1%;
+}
+
+.select-box > div {
+ display: flex;
+ margin-right: 3%;
+}
+
+.smx{
+ margin-left: 13px !important;
+}
+
+.flood-top input {
+ width: 100px;
+ height: 25px;
+ cursor: pointer;
+}
+
+.flood-top .choose-button {
+ background-color: #1f81e0;
+ border: none;
+ color: white;
+}
+
+.flood-top .unchoose-button {
+ background-color: white;
+ border: none;
+ color: #1f81e0;
+}
+
+.start-analysis-btn {
+ width: 10% !important;
+ height: 29px !important;
+ margin-left: 2% !important;
+ background: white;
+ border: none;
+ background-color: #1f81e0;
+ color: white;
+ cursor: pointer;
+}
+
+.search-button, .save-button {
+ width: 66px;
+ line-height: 0px;
+ height: 30px;
+ background-color: white;
+ border: none;
+ cursor: pointer;
+}
+
+.search-button:hover, .save-button:hover {
+ background-color: #1388ff;
+ color: white;
+}
+
+.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 .tip {
+ font-size: 1px;
+ color: #ff3737;
+}
+
+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 table {
+ width: 100%;
+}
+
+.flood-table-thead tr th {
+ text-align: left;
+ 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: left;
+ border-right: 1px solid #CFCFCF;
+ border-bottom: 1px solid #CFCFCF;
+ color: #ffffff;
+ font-size: 20px;
+}
+
+.flood-history .search-box {
+ margin-top: 1%;
+ margin-left: 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: 72px;
+ width: 167px;
+ height: 106px !important;
+ outline: none;
+ border: 1px solid #999;
+ margin-top: 31px;
+}
+
+.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;
+}
+
+.flood-analysis-pagination:before,
+.flood-analysis-pagination:after {
+ content: "";
+ display: table;
+}
+
+.flood-analysis-pagination:after {
+ 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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.flood-analysis-pagination a:hover {
+ color: #fff;
+ background: #e91e63;
+}
+
+.flood-analysis-pagination .next,
+.flood-analysis-pagination .prev {
+ font-family: "Simsun";
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.now,
+.count {
+ padding: 0 5px;
+ color: #f00;
+}
+
+.eg img {
+ 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;
+}
+
+#analysis-pagination, #history-pagination {
+ /*position: absolute;*/
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.flood-analysis-pagination .jump-btn {
+ width: 38px !important;
+}
diff --git a/widgets/FloodAnalysis/css/style.css b/widgets/FloodAnalysis/css/style.css
index e260e50..ee9729e 100644
--- a/widgets/FloodAnalysis/css/style.css
+++ b/widgets/FloodAnalysis/css/style.css
@@ -1,200 +1,129 @@
.jimu-widget-FloodAnalysis {
- width: 38% !important;
+ width: 100%;
height: 100%;
- position: fixed !important;
- /*left: 30px !important;*/
- top: 45px !important;
- border: 1px solid rgb(69, 154, 251);
- border-radius: 5px;
- background: rgba(35, 36, 58, .7);
- z-index: 41 !important;
- color: rgb(255, 255, 255);
- font-size: 22px;
+ overflow: hidden;
+ background: #fff;
}
-.jimu-widget-FloodAnalysis div,
-.jimu-widget-FloodAnalysis i,
.jimu-widget-FloodAnalysis ul,
.jimu-widget-FloodAnalysis li,
-.jimu-widget-FloodAnalysis span,
+.jimu-widget-FloodAnalysis div,
.jimu-widget-FloodAnalysis input,
-.jimu-widget-FloodAnalysis h2 {
+.jimu-widget-FloodAnalysis img,
+.jimu-widget-FloodAnalysis table,
+.jimu-widget-FloodAnalysis tr,
+.jimu-widget-FloodAnalysis td,
+.jimu-widget-FloodAnalysis th,
+.jimu-widget-FloodAnalysis tbody,
+.jimu-widget-FloodAnalysis thead{
margin: 0;
padding: 0;
}
-.fold-btn {
- width: 50px;
- height: 30px;
- position: fixed;
- cursor: pointer;
- background-color: rgb(39, 118, 172);
- background-image: url(../images/fold_up.png);
- border-radius: 5px;
- opacity: 1;
- background-position: center;
- background-repeat: no-repeat;
+.jimu-widget-FloodAnalysis a {
+ text-decoration: none;
+ color: black;
}
-.open {
- background-image: url(../images/fold_up.png);
+.jimu-widget-FloodAnalysis a:hover {
+ text-decoration: none;
+ color: #336699;
}
-.close {
- background-image: url(../images/fold_down.png);
+.jimu-widget-FloodAnalysis #tab {
+ position: absolute;
+ width: 100%;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ height: 100%;
+ /*margin: 1px 3px 1px 3px;*/
+ /*z-index: 9;*/
}
-.content{
- height: 92vh;
-}
-
-.flood-top {
- text-align: center;
- display: inline-flex;
- margin-left: 35% !important;
-}
-
-.flood-middle{
- height: 90%;
-}
-
-.flood-middle .select-box {
- margin: 1% 0 0 1%;
-}
-
-.select-box > div {
- display: flex;
- margin-right: 3%;
-}
-
-.smx{
- margin-left: 13px !important;
-}
-
-.flood-top input {
- width: 100px;
- height: 25px;
- cursor: pointer;
-}
-
-.flood-top .choose-button {
- background-color: #1f81e0;
- border: none;
- color: white;
-}
-
-.flood-top .unchoose-button {
- background-color: white;
- border: none;
- color: #1f81e0;
-}
-
-.start-analysis-btn {
- width: 10% !important;
- height: 29px !important;
- margin-left: 2% !important;
- background: white;
- border: none;
- background-color: #1f81e0;
- color: white;
- cursor: pointer;
-}
-
-.search-button, .save-button {
- width: 66px;
- line-height: 0px;
- height: 30px;
- background-color: white;
- border: none;
- cursor: pointer;
-}
-
-.search-button:hover, .save-button:hover {
- background-color: #1388ff;
- color: white;
-}
-
-.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 .tip {
- font-size: 1px;
- color: #ff3737;
-}
-
-label {
- display: inline-block;
- /*width: 80px;*/
+.jimu-widget-FloodAnalysis #tab .tabul {
height: 30px;
line-height: 30px;
- vertical-align: middle;
- text-align: justify;
- text-align-last: justify;
}
-/**表格**/
-.flood-middle .table-box {
- margin-top: 1%;
+.jimu-widget-FloodAnalysis #tab ul {
+ list-style: none;
+ line-height: 30px;
+ height: 30px;
}
-.flood-middle .table-box table {
- width: 100%;
+.jimu-widget-FloodAnalysis #tab .tabul ul li {
+ cursor: pointer;
+ float: left;
+ list-style: none;
+ text-align: center;
+ padding: 0px 5px;
+ margin-right: 4px;
+ width: 90px;
+ height: 30px;
+ line-height: 30px;
+ background: rgb(187, 186, 186);
+ border-radius: 4px;
+ color: #fff;
}
-.flood-table-thead tr th {
- text-align: left;
- border-top: 1px solid #CFCFCF;
- border-right: 1px solid #CFCFCF;
- border-bottom: 1px solid #CFCFCF;
- color: #ffffff;
- background: rgb(39, 118, 172);
+.jimu-widget-FloodAnalysis #tab ul li.on {
+ /*border-top: 2px solid Saddlebrown;*/
+ background: #094895;
}
-.flood-tbody tr td {
- text-align: left;
- border-right: 1px solid #CFCFCF;
- border-bottom: 1px solid #CFCFCF;
- color: #ffffff;
- font-size: 20px;
+.jimu-widget-FloodAnalysis #tab div {
+ /*width: 100%;*/
+ line-height: 24px;
+ /*border-top: none;*/
+ /*border: 1px solid #336699;*/
}
-.flood-history .search-box {
- margin-top: 1%;
- margin-left: 1%;
+.choose-button {
+ background: #094895 !important;
+ border: none;
+ color: white;
+}
+
+.unchoose-button {
+ background: rgb(187, 186, 186) !important;
+ border: none;
+ color: white;
}
-/**模糊查询**/
+#tablist{
+ margin-top: 10px;
+}
+
+.select-box , .search-box{
+ border: 1px solid #d2d2d0;
+}
+
+/**河段选择框**/
.hd {
position: relative;
+ margin-bottom: 1% !important;
}
.hd input {
- width: 167px;
- /* top: 9px; */
+ width: 230px;
outline: none;
border: 0pt;
- /* position: absolute; */
line-height: 30px;
- /* left: 8px; */
- height: 30px;
- border: 1px solid #999;
+ height: 26px;
+ border: 1px solid rgba(160, 160, 156, 1);
+ margin-left: 12px;
}
.hd select {
position: absolute;
- left: 72px;
- width: 167px;
+ left: 51px;
+ top: -9px;
+ width: 230px;
height: 106px !important;
outline: none;
- border: 1px solid #999;
+ border: 1px solid rgba(160, 160, 156, 1);
margin-top: 31px;
}
@@ -203,6 +132,40 @@
color: white;
}
+/**水面线选择框**/
+.smx-select{
+ width: 230px;
+ height: 26px;
+ border: 1px solid rgba(160, 160, 156, 1);
+}
+
+/**水位输入框**/
+.sw-input{
+ width: 160px;
+ height: 26px;
+ margin-left: 9px !important;
+ border: 1px solid rgba(160, 160, 156, 1);
+}
+
+.start-analysis-btn{
+ height: 26px;
+ border: none;
+ cursor: pointer;
+}
+
+/**水位提示**/
+.flood-middle .tip {
+ font-size: 1px;
+ color: #ff3737;
+ margin-left: 7px;
+}
+
+/**历史风险搜索框**/
+.search-name-input{
+ width: 230px;
+ height: 26px;
+ border: 1px solid rgba(160, 160, 156, 1);
+}
/**分页器**/
.flood-analysis-pagination {
@@ -305,3 +268,14 @@
.flood-analysis-pagination .jump-btn {
width: 38px !important;
}
+
+/**洪水淹没分析表格宽度**/
+#analysis-tab1-grid .dgrid-cell {
+ width: 80px; /* force all columns to have SOME width */
+}
+#analysis-tab1-grid .field-col1 {
+ width: 500px;
+}
+#analysis-tab1-grid .field-col4 {
+ width: 300px;
+}
diff --git a/widgets/FloodAnalysis/manifest.json b/widgets/FloodAnalysis/manifest.json
index 6404634..84ce44f 100644
--- a/widgets/FloodAnalysis/manifest.json
+++ b/widgets/FloodAnalysis/manifest.json
@@ -11,7 +11,6 @@
"license": "",
"properties": {
"hasConfig": false,
- "inPanel": false,
"hasVersionManager": false
}
}
--
Gitblit v1.9.3