This commit is contained in:
cwchen 2024-04-20 15:59:02 +08:00
parent 8ed79984f4
commit 76bd06fc43
3 changed files with 252 additions and 71 deletions

View File

@ -28,14 +28,16 @@ body {
align-items: center;
justify-content: center;
} */
.layout{
.layout {
display: flex;
align-items: center;
justify-content: start;
box-sizing: border-box;
}
#left-box, #center-box, #right-box {
#left-box,
#center-box,
#right-box {
height: 100%;
}
@ -56,13 +58,21 @@ body {
background-position: center center !important;
}
.bid-pro-select {
position: absolute;
top: 5%;
left: 55%;
z-index: 100000;
}
#echarts-map {
height: 100%;
}
#map{
#map {
height: 100%;
}
.switch-btn {
width: 15%;
height: 5%;
@ -72,13 +82,15 @@ body {
background-position: center center !important;
z-index: 9999;
}
.map-p{
.map-p {
color: #000;
font-weight: normal;
margin-bottom: 10px;
font-size: 16px;
font-family: 'Alibaba PuHuiTi R';
}
#left-box {
padding-left: 15px;
}
@ -87,7 +99,8 @@ body {
padding-right: 15px;
}
#left-box, #right-box {
#left-box,
#right-box {
width: 30%;
display: flex;
flex-direction: column;
@ -130,7 +143,8 @@ body {
flex-direction: column;
}
.engineering-statistic-item:first-of-type> div, .engineering-statistic-item:last-of-type> div {
.engineering-statistic-item:first-of-type>div,
.engineering-statistic-item:last-of-type>div {
display: flex;
height: 50%;
width: 100%;
@ -141,11 +155,13 @@ body {
width: 100%;
}
.engineering-statistic-item__left > p:first-of-type, .engineering-statistic-item__right > p:first-of-type {
.engineering-statistic-item__left>p:first-of-type,
.engineering-statistic-item__right>p:first-of-type {
font-size: 14px;
}
.engineering-statistic-item__left > p:last-of-type, .engineering-statistic-item__right > p:last-of-type {
.engineering-statistic-item__left>p:last-of-type,
.engineering-statistic-item__right>p:last-of-type {
font-size: 20px;
}
@ -183,7 +199,7 @@ body {
display: flex;
}
.environment-analysis-item > div:last-of-type {
.environment-analysis-item>div:last-of-type {
width: 25px;
height: inherit;
writing-mode: vertical-rl;
@ -192,7 +208,7 @@ body {
justify-content: center;
}
.environment-analysis-item > div:first-of-type {
.environment-analysis-item>div:first-of-type {
flex: 1;
height: inherit;
display: flex;
@ -201,7 +217,7 @@ body {
text-align: right;
}
.environment-analysis-item > div:first-of-type > p {
.environment-analysis-item>div:first-of-type>p {
line-height: 25px;
font-size: 14px;
text-align: left;
@ -286,7 +302,7 @@ body {
padding-left: 3%;
}
.device-status-text > p {
.device-status-text>p {
display: inline-block;
font-size: 16px;
}
@ -299,19 +315,67 @@ body {
.quality-ranking {
padding-left: 30px !important;
background-repeat: no-repeat;
background-size: 24px 24px; /* 根据你的图标尺寸调整 */
background-size: 24px 24px;
/* 根据你的图标尺寸调整 */
background-position: left center;
line-height: 1.5; /* 根据需要调整行高 */
line-height: 1.5;
/* 根据需要调整行高 */
}
.quality-ranking-1 {
background-image: url('../image/1.png'); /* 替换 'icon.png' 为你的图标文件路径 */
background-image: url('../image/1.png');
/* 替换 'icon.png' 为你的图标文件路径 */
}
.quality-ranking-2 {
background-image: url('../image/2.png'); /* 替换 'icon.png' 为你的图标文件路径 */
background-image: url('../image/2.png');
/* 替换 'icon.png' 为你的图标文件路径 */
}
.quality-ranking-3 {
background-image: url('../image/3.png'); /* 替换 'icon.png' 为你的图标文件路径 */
background-image: url('../image/3.png');
/* 替换 'icon.png' 为你的图标文件路径 */
}
.layui-form-select {
width: 270px;
}
.layui-form-select .layui-input {
color: #fff;
background-color: #1b6b64;
}
.layui-form-selected dl {
background-color: #1b6b64;
}
.layui-form-select dl dd.layui-this {
background-color: transparent;
}
.layui-form-select dl dd:hover {
color: #16b777;
background-color: transparent;
}
.layui-form-select dl dd.layui-disabled {
background-color: transparent;
}
input::-webkit-input-placeholder {
color: rgb(153, 152, 152) !important;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgb(191, 191, 191) !important;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: rgb(191, 191, 191) !important;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgb(191, 191, 191) !important;
}

View File

@ -28,25 +28,30 @@ var loader = {
let gtList=[];
var terrainMap;
let element, layer, table;
// 选中标段工程
let checkBidCode = null;
layui.use(['form','layer', 'element', 'table'], function () {
element = layui.element;
layer = layui.layer;
table = layui.table;
form = layui.form;
//地形切换
form.on('switch(terrain)', function (data) {
if (this.checked) {
$('#echarts-map').css('display', 'none');
$('#map').css('display', 'block');
$('#multiselect').css('display', 'none');
$('.bid-pro-select').removeAttr('style')
initMap()
loadBidPro();
} else {
$('#echarts-map').css('display', 'block');
$('#map').css('display', 'none');
$('#multiselect').removeAttr('style')
$('.bid-pro-select').css('display', 'none');
}
});
getGtList();
// 工程统计
initEngineeringStatistic()
@ -75,6 +80,12 @@ layui.use(['form','layer', 'element', 'table'], function () {
// 告警提醒
initAlarmReminder()
// 标段工程下拉选监听
form.on('select(bidPro)', function (data) {
let value = data.value;
let valueArr = value.split('@');
loadBidProTower(valueArr[0],valueArr[1]);
});
});
$('#indexIframe').attr('src', './views/main.html');
@ -660,58 +671,27 @@ function initRiskData() {
initMainMap(mapPointList)
})
}
//获取杆塔坐标
function getGtList(){
// $.ajax({
// url: baseUrl + 'proteam/pot/home/getGtList?token=' + token,
// data: {
// proNo:"2222"
// },
// type: 'post',
// success: function (result) {
// gtList=result.data;
// },
// });
gtList=[
{
lat:118.07138310,
lon:31.05344367,
proName:'线路工程',
towerName:'A1',
},
{
lat:118.07050390,
lon:31.05571928,
proName:'线路工程',
towerName:'A2',
},
{
lat:118.06960770,
lon:31.05803784,
proName:'线路工程',
towerName:'A3',
},
{
lat:118.0684919,
lon:31.06092441,
proName:'线路工程',
towerName:'A4',
},
{
lat:118.07093833,
lon:31.06312931,
proName:'线路工程',
towerName:'A5',
}
]
}
function initMap(){
createMap()
addMapControl(); // 添加自定义控件
setMapEvent(); //地图控件设置
$('#allMap').css({'zIndex': 999, 'backgroundColor': 'transparent'});
// madeBoundary(); //加载区域图
// addMapControl(); // 添加自定义控件
// setMapEvent(); //地图控件设置
// $('#allMap').css({'zIndex': 999, 'backgroundColor': 'transparent'});
}
// 设置杆塔连线
function setTowerLine(gtList){
let allOverlayList = terrainMap.getOverlays();
//循坏所有点并清除指定的点
if (allOverlayList.length > 0) {
for (let i = 0; i < allOverlayList.length; i++) {
console.log(allOverlayList[i].toString());
if (allOverlayList[i].toString() == "[object Label]" || allOverlayList[i].toString() == "[object Marker]" || allOverlayList[i].toString() == "[object Polyline]") {
terrainMap.removeOverlay(allOverlayList[i]);
}
}
}
var points=[];
for(var i = 0; i < gtList.length; i++) {
var point=new Object();
@ -719,7 +699,7 @@ function initMap(){
point.lat=gtList[i].lat;
point.proName=gtList[i].proName;
point.img='../../../img/map/bdz.png';
point.place=gtList[i].towerName;
point.place=gtList[i].gtName;
points.push(point);
}
console.log(points)
@ -760,13 +740,44 @@ function initMap(){
console.log(line)
var polyline = new BMap.Polyline(line,{strokeColor:'#00aa00',strokeWeight:2,strokeOpacity:1});
terrainMap.addOverlay(polyline);
terrainMap.centerAndZoom(line[0],10); //设置中心点和缩放层级
}
function createMap(){
terrainMap = new BMap.Map("map", {});
terrainMap.centerAndZoom('合肥', 8);
madeBoundary(); //加载区域图
addMapControl(); // 添加自定义控件
setMapEvent(); //地图控件设置
$('#allMap').css({'zIndex': 999, 'backgroundColor': 'transparent'});
}
//设置区域图 start
function madeBoundary() {
let datas = new Array("安徽省-");
var bdary = new BMap.Boundary();
for (var i = 0; i < datas.length; i++) {
getBoundary(datas[i], bdary);
}
}
function getBoundary(data, bdary) {
data = data.split("-");
bdary.get(data[0], function (rs) { //获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 3,
strokeColor: "#1066FC",
fillOpacity: 1,
fillColor: data[1]
}); //建立多边形覆盖物
terrainMap.addOverlay(ply); //添加覆盖物
}
});
}
//向地图添加控件start
function addMapControl() {
var mystyleJson = [{
@ -1397,4 +1408,103 @@ function initAlarmReminder() {
$('.alarm-reminder__empty').hide()
}
})
}
/* 标段工程数据 */
function loadBidPro() {
const paramData = '';
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
const url = commonUrl + 'screen/largeScreen/scIndex/getProList?params=' + montageParam;
ajaxRequestGet(url, "GET", true, function () {
}, function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error('标段工程数据 :' + result.msg);
setData(null);
} else if (result.code === 401) {
loginout(1);
}
}, function (xhr, status, error) {
errorFn(xhr, status, error)
setData(null);
}, aqEnnable);
function setData(bidCodeList){
let html = '';
if (bidCodeList && bidCodeList.length > 0) {
$.each(bidCodeList, function (index, item) {
if(index === 0){
checkBidCode = item.bidCode;
html += '<option value="' + (item.bidCode + "@" + item.proName) + '" checked>' + item.proName + '</option>'
loadBidProTower(item.bidCode,item.proName);
}else{
html += '<option value="' + (item.bidCode + "@" + item.proName) + '">' + item.proName + '</option>'
}
})
}
$('#bidPro').empty().append(html);
layui.form.render();
}
}
/* 标段工程杆塔数据 */
function loadBidProTower(bidCode,proName) {
const paramData = 'bidCode=' + bidCode;
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
const url = commonUrl + 'screen/largeScreen/scIndex/getGtList?params=' + montageParam;
ajaxRequestGet(url, "GET", true, function () {
}, function (result) {
setData(result.data);
if (result.code === 200) {
} else if (result.code === 500) {
console.error('标段工程杆塔数据 :' + result.msg);
} else if (result.code === 401) {
loginout(1);
}
}, function (xhr, status, error) {
errorFn(xhr, status, error)
}, aqEnnable);
function setData(data){
if(data && data.length == 0){
data = [
{
lat:118.07138310,
lon:31.05344367,
proName:proName,
gtName:'A1',
},
{
lat:118.07050390,
lon:31.05571928,
proName:proName,
gtName:'A2',
},
{
lat:118.06960770,
lon:31.05803784,
proName:proName,
gtName:'A3',
},
{
lat:118.0684919,
lon:31.06092441,
proName:proName,
gtName:'A4',
},
{
lat:118.07093833,
lon:31.06312931,
proName:proName,
gtName:'A5',
}
]
}
setTimeout(() => {
setTowerLine(data);
}, 2000);
}
}

View File

@ -15,8 +15,10 @@
<script src="../../../js/publics/echarts.js"></script>
<script src="../../../plugin/layui-v2.9.7/layui/layui.js"></script>
<script src="../../../js/publics/aes.js"></script>
<script src="../../../js/publics/aescbc.js"></script>
<script src="../../../js/publics/sm3.js"></script>
<script src="http://api.map.baidu.com/getscript?v=3.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>
<script src="../../../api/commonRequest.js"></script>
<title>首页</title>
<style>
@ -31,7 +33,6 @@
<body>
<div id="main-box" class="layout">
<div id="left-box">
<div id="engineering-statistic">
<div id="engineering-statistic-bg">
@ -123,6 +124,12 @@
</div>
</div>
</div>
<div class="bid-pro-select" style="display: none;">
<form class="layui-form layout">
<select class="layui-form-select" lay-search id="bidPro" lay-filter="bidPro">
</select>
</form>
</div>
<div id="center-box">
<div class="switch-btn">
<form class="layui-form switch-form" onsubmit="return false;">