Skip to content

Z
zanhuangyingji
Commit 20ace91e authored by yaqizhang's avatar yaqizhang
Browse files
Options

增加样式地图切换，添加折线图

parent fec23d5c
Hide whitespace changes
Inline Side-by-side
Showing with 459 additions and 74 deletions
ioc_frontweb/index.html
View file @ 20ace91e
......@@ -32,7 +32,6 @@
<!-- <div class="videoWindows" style="position: absolute; z-index: 100; width: 100%; height: 500px; bottom: 0; left: 0;">
</div> -->
<div id="bottomBg"></div>
<div id="btmSearch">
<input type="text" name="title" placeholder="请输入关键字搜索" class="layui-input" id="btnInput" />
......@@ -229,21 +228,43 @@
<div class="alarm" id="alarm">
</div>
<div id="" class="leftBar-legend">
<div class="echarts categoryAlarmNum" id="categoryAlarmNum" style="width: 430px;height: 260px;padding-left: 5px !important;padding-top: 3px !important;"></div>
<div id="">
<div class="legenditemout">
应急资源分类
</div>
<ul id="legend">
</ul>
<div class="leftlegend">
应急资源监控
</div>
<div class="echarts categoryAlarmNum" id="categoryAlarmNum" style="width: 430px;height: 260px;padding-left: 5px !important;padding-top: 3px !important;"></div>
<div style="background:linear-gradient(to left,#FFFFFF,#458dde,#FFFFFF);height:1px;"></div>
<ul id="legend">
</ul>
</div>
</div>
<div id="rightBar">
<!-- <div class="echarts deviceNumBar" id="deviceNumBar"></div> -->
<div class="echarts deviceNumPie" id="deviceNumPie"></div>
<div class="deviceNumPieout">
<div class="leftlegend">
事件类型统计
</div>
<div class="echarts deviceNumPie" id="deviceNumPie"></div>
</div>
<div class="deviceNumLineout">
<div class="leftlegend">
预警数量
</div>
<div class="Linebutton">
<button type="button" class="linebtn active">日</button>
<button type="button" class="linebtn">月</button>
</div>
<!-- 折线图 -->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="echarts deviceNumLine deviceNumLineday show" id="deviceNumLineday" style="width: 430px;height: 190px;margin-top: 50px;"></div>
<div class="echarts deviceNumLine deviceNumLinemouth" id="deviceNumLinemouth" style="width: 430px;height: 190px;margin-top: 50px;"></div>
</div>
<div id="alarmList" class="right-alarm">
<div class="mktit">安全生产实时预警数据</div>
<div class="listTitle">
......@@ -258,7 +279,9 @@
<!-- 值班信息 -->
<div class="msgWrap">
<h3>当前值班信息</h3>
<div class="msgWraplegend">
当前值班信息
</div>
<div class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:130px;">
<dl>
<dt>部门</dt>
......@@ -352,21 +375,9 @@
<script src="./js/map.js"></script>
<script src="./js/app.js"></script>
<script>
// function jietu(){
// console.log("000")
// html2canvas(document.querySelector("#jietu-div"),{
// useCORS: true,
// backgroundColor:null,
// }).then(canvas => {
//            document.body.appendChild(canvas)
// // let imgUri = canvas.toDataURL("image/png").replace("image/png","image/octet-stream")
// // console.log(imgUri);
//         });
//       
//       }
$(".saveImage").click(function () {
$(".saveImage").click(function () {
html2canvas(jQuery(".amap-layer")[0], {
allowTaint: true,
useCORS: true,
......@@ -377,11 +388,39 @@ $(".saveImage").click(function () {
// $("#moimg").attr("src", amap.toDataURL()); // 生成的图片
});
});
//点击空白处关闭模态框
//点击空白处关闭模态框
var span1 = document.getElementById('mo');
span1.onclick = function(){
span1.style.display = "none"
}
var linebtn = document.getElementsByClassName("linebtn");
var deviceNumLine = document.getElementsByClassName("deviceNumLine");
for (var i=0; i<linebtn.length;i++){
linebtn[i].index = i;
linebtn[i].onclick = function(){
　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
for(var j=0;j<linebtn.length;j++){
linebtn[j].className = linebtn[j].className.replace(' active', '').trim();
deviceNumLine[j].className = deviceNumLine[j].className.replace(' show', '').trim();
}
this.className = this.className + ' active';
deviceNumLine[this.index].className = deviceNumLine[this.index].className + ' show';
};
}
// 地图切换点击显示关闭
$(".mapstyleblock").click(function(){
$(".mapstyleblock").hide();
$(".map-button-out").show();
$(".close").show();
});
$(".close").click(function(){
$(".map-button-out").hide();
$(".close").hide();
$(".mapstyleblock").show();
});
</script>
<style>
#mo {
......@@ -581,6 +620,31 @@ $(".saveImage").click(function () {
opacity: 0;
}
}
.Linebutton{
width: 50%;
float: right;
}
.linebtn{
margin: 10px 5px;
width: 80px;
border: none;
outline: none;
background-color: #126f7599;
color: #00F7DE;
border-radius: 5px;
}
.deviceNumLine{
margin: 10px auto;
display: none;
}
.linebtn.active{
background-color: #00F7DE;
color: #000000;
}
.deviceNumLine.show{
display:block;
}
</style>
</body>
</html>
ioc_frontweb/js/app.js
View file @ 20ace91e
......@@ -1124,6 +1124,8 @@ $(function () {
// renderAlarmNum();
renderEventNum();
createDeviceNumPieChart('deviceNumPie');
createDeviceNumLineChartday('deviceNumLineday');
createDeviceNumLineChartmouth('deviceNumLinemouth');
renderLegendTypeNum('categoryAlarmNum');
initVideo('videoHandler');
getAlarmData();
......
ioc_frontweb/js/map.js
View file @ 20ace91e
......@@ -34,6 +34,18 @@ district.search('河北省', function (status, result) {
//与态势标绘冲突 map.on('dblclick', () => {
// map.clearMap();
// });
//绑定radio点击事件
var radios = document.querySelectorAll("#map-styles input");
// var radios = document.getElementsByClassName(".input-item");
radios.forEach(function(ratio) {
ratio.onclick = setMapStyle;
});
function setMapStyle() {
var styleName = "amap://styles/" + this.value;
map.setMapStyle(styleName);
}
//添加高度面
map.add(object3Dlayer);
......@@ -58,7 +70,7 @@ district.search('河北省', function (status, result) {
}
// 地图控件
map.plugin([ 'AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar'], function () {
map.plugin(['AMap.OverView', 'AMap.MapType', 'AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar'], function () {
// map.addControl(
// new AMap.OverView({
// // isOpen: true,
......@@ -69,6 +81,7 @@ district.search('河北省', function (status, result) {
// // })
// }),
// );
map.addControl(new AMap.MapType({defaultType: 1 ,showroad: true }));
map.addControl(new AMap.Scale({ visible: true }));
map.addControl(new AMap.ToolBar({ position: 'LT', ruler: false, direction: false }));
});
......
ioc_frontweb/js/utils.js
View file @ 20ace91e
......@@ -52,6 +52,7 @@ var apis = {
// getEnterpriseDeviceDataByEnterpriseId: apiUrl + '/ioc/frontApi/getEnterpriseDeviceDataByEnterpriseId',
// getDeviceNum: apiUrl + '/ioc/frontApi/getDeviceNum',
getEventsNum: apiUrl + '/ioc/frontApi/getEventsNum',
getDeviceReportDatasNum: apiUrl + '/ioc/frontApi/getDeviceReportDatasNum',
getSoldierTrackBySoldierId: apiUrl + '/ioc/frontApi/getSoldierTrackBySoldierId',
getEventNum: apiUrl + '/ioc/frontApi/getEventNum',
getLegendTypeNum: apiUrl + '/ioc/frontApi/getLegendTypeNum',
......@@ -194,7 +195,6 @@ function createDeviceAlarmNumBarChart(options) {
eleId: options.eleId,
opts: {
title: {
text: '应急资源统计',
left: 'left',
textStyle: {
color: '#fff',
......@@ -263,7 +263,6 @@ function createPieChart(options) {
eleId: options.eleId,
opts: {
title: {
text: '安全生产感知设备统计',
left: 'left',
textStyle: {
color: '#fff',
......@@ -311,7 +310,7 @@ function createPieChart(options) {
{
name: 'Nightingale Chart',
type: 'pie',
radius: [20, 100],
radius: [15, 80],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
......@@ -336,6 +335,93 @@ function createPieChart(options) {
createEchart(opts);
}
// 创建折线chart
function createLineChartday(options) {
var opts = {
name: options.name,
eleId: options.eleId,
opts: {
grid:{
x:50,
y:10,
x2:20,
y2:60,
borderWidth:1,
bottom:'40%'
},
xAxis: {
type: 'category',
data: options.xAxisData,
axisLabel: {
textStyle: {
color: '#ddd',
},
rotate: 60,
},
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ddd',
fontSize:'14',
},
},
},
series: [
{
data: options.seriesData,
type: 'line'
}
]
},
};
createEchart(opts);
}
// 创建折线chart
function createLineChartmouth(options) {
var opts = {
name: options.name,
eleId: options.eleId,
opts: {
grid:{
x:50,
y:10,
x2:20,
y2:40,
borderWidth:1,
bottom:'40%'
},
xAxis: {
type: 'category',
data: options.xAxisData,
axisLabel: {
textStyle: {
color: '#ddd',
fontSize:'14',
},
rotate: 60,
},
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ddd',
},
},
},
series: [
{
data: options.seriesData,
type: 'line'
}
]
},
};
createEchart(opts);
}
// 创建 chart
function createEchart(options) {
// 基于准备好的dom，初始化echarts实例
......@@ -778,6 +864,7 @@ function createDeviceNumPieChart(eleId) {
var opts = {
url: apis.getEventsNum,
success: function (res) {
console.log("11111111111",res.data)
if (res.code === 0) {
var options = {
eleId: eleId,
......@@ -808,6 +895,80 @@ function createDeviceNumPieChart(eleId) {
jQueryAjax(opts);
}
// 日期折线图接口数据
function createDeviceNumLineChartday(eleId) {
if (!eleId) {
layLayer.alert('缺少参数');
return;
}
var opts = {
url: apis.getDeviceReportDatasNum,
success: function (res) {
console.log("2222222",res.data)
if (res.code === 0) {
var options = {
eleId: eleId,
name: 'deviceNumLineday',
legendData: [],
xAxisData: [],
seriesData: [],
series: [],
};
for (var i in res.data.dayList) {
options.xAxisData.push(res.data.dayList[i].date);
options.seriesData.push(res.data.dayList[i].number);
// options.series.push({
// name: res.data[i].key,
// type: 'bar',
// stack: 'all',
// data: [res.data[i].value],
// });
}
createLineChartday(options);
}
},
};
jQueryAjax(opts);
}
// 月份折线图接口数据
function createDeviceNumLineChartmouth(eleId) {
if (!eleId) {
layLayer.alert('缺少参数');
return;
}
var opts = {
url: apis.getDeviceReportDatasNum,
success: function (res) {
console.log("2222222",res.data)
if (res.code === 0) {
var options = {
eleId: eleId,
name: 'deviceNumLinemouth',
legendData: [],
xAxisData: [],
seriesData: [],
series: [],
};
for (var i in res.data.monthList) {
options.xAxisData.push(res.data.monthList[i].date);
options.seriesData.push(res.data.monthList[i].number);
// options.series.push({
// name: res.data[i].key,
// type: 'bar',
// stack: 'all',
// data: [res.data[i].value],
// });
}
createLineChartmouth(options);
}
},
};
jQueryAjax(opts);
}
// 渲染单兵轨迹
function renderSoldierTrack(self, id) {
var soldierId = id ? id : $(self).data('soldierid') ? $(self).data('soldierid') : false;
......@@ -852,7 +1013,6 @@ function renderLegendTypeNum(eleId) {
var opts = {
url: apis.getLegendTypeNum,
success: function (res) {
console.log("2222222222222222222",res.data)
if (res.code === 0) {
var options = {
eleId: eleId,
......@@ -864,7 +1024,6 @@ function renderLegendTypeNum(eleId) {
for (var i in res.data) {
options.xAxisData.push(res.data[i].legendName);
options.seriesData.push(res.data[i].num);
// console.log("res.data[i].legendName",res.data[i].legendName)
// options.series.push({
// name: res.data[i].key,
// type: 'bar',
......
ioc_frontweb/style/style.css
View file @ 20ace91e
......@@ -162,7 +162,7 @@ table.layui-table th {
.amap-toolbar {
/* left: 350px !important; */
left: auto !important;
right: 510px !important;
right: 465px !important;
top: 70px !important;
}
/* 报警数量 */
......@@ -213,9 +213,12 @@ table.layui-table th {
}
.alarm .itemh2 {
width: 100%;
height: 35px;
font-size: 20px;
color: #fff;
height: 30px;
font-size: 18px;
line-height: 30px;
color: #03ffff;
padding-left: 10px;
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
}
.alarm .itemTitle {
color: #d8d8d8;
......@@ -269,7 +272,7 @@ table.layui-table th {
/* 图表样式 */
.echarts,
#alarmList {
width: 99%;
width: 445px;
height: 240px;
background-size: 100% 100%;
position: relative;
......@@ -324,24 +327,12 @@ iframe {
clear: both;
width: 100%;
}
.legenditemout{
width: 100%;
height: 30px;
color: #fff;
font-size: 20px;
margin-top: 10px;
margin-left: 10px;
}
.legendItem {
margin: 3px 0;
/* border-radius: 3px; */
/* background-image: url('../images/one101.png'); */
background-size: 100% 100%;
overflow: hidden;
border-bottom: 1px solid #33faf7;
cursor: pointer;
/* padding: 10px 10px; */
/* margin-top: 10px; */
}
.legendItem:last-child{
border-bottom: 0;
......@@ -462,29 +453,28 @@ iframe {
left: 828px;
/* top: 7px; */
}
#bottomBg {
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
left: 0;
background: url('../images/bbg.png') repeat-x;
z-index: 998;
}
#leftBar,
#rightBar {
width: 450px;
height: 99.9%;
position: absolute;
/* background-color: rgba(0, 0, 0, 0.2); */
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background-size: 100%;
}
.msgWraplegend{
width: 100%;
height: 30px;
font-size: 18px;
line-height: 30px;
color: #03ffff;
padding-left: 10px;
margin: 10px 0 0 0px;
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
}
#leftBar {
left: 0;
width: 450px;
......@@ -496,7 +486,7 @@ iframe {
width: 100%;
height: auto;
right: auto;
margin-top: 5px;
margin-top: 10px;
margin-left: 5px;
padding-bottom: 10px;
background: rgba(21,34,60,0.8);
......@@ -508,12 +498,19 @@ iframe {
border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
}
#deviceNumPie{
width: 436px;
height: 230px;
padding-left: 5px;
padding-top: 3px;
.leftlegend{
width: 95%;
height: 30px;
font-size: 18px;
line-height: 30px;
color: #03ffff;
padding-left: 10px;
margin: 10px 0 0 10px;
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
}
.deviceNumPieout{
width: 440px;
height: 240px;
margin-top: 80px;
-webkit-tap-highlight-color: transparent;
background: rgba(21,34,60,0.8);
......@@ -526,6 +523,25 @@ iframe {
border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
user-select: none;
}
.deviceNumLineout{
width: 440px;
height: 280px;
margin-top: 10px;
-webkit-tap-highlight-color: transparent;
background: rgba(21,34,60,0.8);
border-right: 2px solid;
border-left: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: -moz-linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
border-image: linear-gradient(#4987de,#00F7DE,#4987de) 30 30;
user-select: none;
}
.deviceNumPie{
width: 436px;
height: 190px;
}
.right-alarm{
width: 100%;
height: 270px;
......@@ -1060,30 +1076,67 @@ iframe {
outline: none;
}
.mktit {
color: #fff;
font-size: 20px;
color: #03ffff;
font-size: 18px;
text-align: left;
margin-top: 10px;
width: 100%;
width: 95%;
height: 30px;
line-height: 30px;
overflow: hidden;
position: absolute;
top: 0;
padding-left: 10px;
background-image: linear-gradient(to left,rgb(21 34 60 / 50%) 50%, rgb(0 247 222 / 40%));
}
#map-styles{
width: auto;
overflow: hidden;
position: fixed;
top: 143px;
right: 465px;
z-index: 999;
}
.mapstyleblock{
background: #fff;
width: 50px;
height: 50px;
text-align: center;
outline: none;
border-radius: 5px;
border: none;
cursor: pointer;
}
.mapstyleblock i{
font-size: 2em;
height: 38px;
line-height: 38px;
color: #2964cf;
}
.map-button-out{
width: 280px;
/* border-radius: 20px; */
background: #052145d1;
color: #ffffff;
float: left;
border: 1px solid #a7a5a5;
height: 40px;
line-height: 40px;
}
#btmSearch {
width: auto;
overflow: hidden;
position: fixed;
top: 143px;
right: 512px;
top: 135px;
right: 465px;
z-index: 999;
}
.clearBtn,
.mulitVideoBtn,
.mouseToolBtn {
position: fixed;
top: 200px;
right: 512px;
top: 195px;
right: 465px;
z-index: 999;
}
.mulitVideoBtn {
......@@ -1198,6 +1251,20 @@ iframe {
font-size: 2em;
font-weight: bold;
}
.close {
height: 40px;
width: 40px;
display: block;
float: right;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.close i {
color: #ffffff;
font-size: 2em;
font-weight: bold;
}
#btmSearch > * {
display: none;
}
......@@ -1515,3 +1582,83 @@ div[lay-id='members'] thead tr:nth-child(1) {
.iframeHandler .videoHandler {
display: none;
}
/* 卫星地图切换 */
.amap-maptype-wrap {
position: absolute;
top: 302px !important;
right: 452px !important;
width: 50px;
height: 50px;
}
.amap-maptype-con {
position: absolute;
top: 0;
right: 0;
width: 51px !important;
height: 51px !important;
/* background: #fff; */
border: solid 0px #ccc !important;
border-radius: 5px !important;
cursor: pointer;
}
.amap-maptype-win {
position: absolute;
top: 1px;
right: 1px;
width: 50px !important;
height: 50px !important;
overflow: hidden;
background: #ccc;
border: solid 0px #ccc !important;
border-radius: 5px !important;
}
.amap-maptype-title {
position: absolute;
bottom: 0;
left: 0;
width: 50px !important;
height: 20px;
color: #333;
text-align: center;
font-size: 12px;
line-height: 20px;
background: #fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.amap-maptype-list {
width: 50px !important;
border-radius: 5px !important;
display: block;
height: 20px;
position: absolute;
top: 353px !important;
right: 451px !important;
width: 100px;
background: #fff;
border: solid 1px #ccc;
overflow: hidden;
}
.amap-maptype-list p {
width: 50px !important;
height: 20px;
margin: 0;
cursor: pointer;
background: #fff;
}
.amap-maptype-check {
display: inline-block;
width: 15px;
height: 15px;
margin-left: 1px !important;
}
.amap-maptype-label {
display: inline-block;
width: 30px !important;
height: 15px;
color: #333;
font-size: 12px;
line-height: 15px;
margin-left: 3px !important;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment