Skip to content

Z
zanhuangyingji
Commit 96ca3366 authored by yaqizhang's avatar yaqizhang
Browse files
Options

图例鼠标滑入滑出时间点击事件

parent 2772c65b
Show whitespace changes
Inline Side-by-side
Showing with 150 additions and 61 deletions
ioc_frontweb/images/gr.svg 0 → 100644
View file @ 96ca3366
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="7" fill="url(#paint0_radial_113_233)"/>
<circle cx="7" cy="7" r="6.85" stroke="#DFB73E" stroke-width="0.3"/>
<defs>
<radialGradient id="paint0_radial_113_233" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7 7) rotate(90) scale(7)">
<stop stop-color="#DFB73E"/>
<stop offset="1" stop-color="#DFB73E" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>
ioc_frontweb/index.html
View file @ 96ca3366
......@@ -182,7 +182,7 @@
<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tb&skin=pitaya&color=64FEFF" frameborder="0" width="350" height="24" allowtransparency="true"></iframe>
</div>
<div style="width: 40%;text-align: center;">
<img src="../ioc_frontweb/images/topban.png" alt="" style="width: 80%;margin-top: 10px;">
<img src="images/topban.png" alt="" style="width: 80%;margin-top: 10px;">
</div>
<div class="righttime" style="width: 30%;padding-right: 50px;text-align: right;">
<div id="top-right">
......@@ -198,7 +198,12 @@
</div>
</div>
<div id="border"></div>
<div id="border">
<img src="images/borderbantop.png" alt="" class="bordertop">
<img src="images/borderbanleft.png" alt="" class="borderleft">
<img src="images/borderbanright.png" alt="" class="borderright">
<img src="images/borderbanbottom.png" alt="" class="borderbottom">
</div>
<div id="leftBar">
<!-- <div id="bottomMenu">
<a href="#" class="btn span1">
......@@ -262,7 +267,7 @@
</div>
<ul id="legend">
<ul id="legend" class="legendcss">
</ul>
</div>
......@@ -342,13 +347,13 @@
预警数量
</div>
<div class="Linebutton">
<button type="button" class="linebtn active">日统计</button>
<button type="button" class="linebtn">月统计</button>
<button type="button" class="linebtn">日统计</button>
<button type="button" class="linebtn active">月统计</button>
</div>
<!-- 折线图 -->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="echarts deviceNumLine deviceNumLineday show" id="deviceNumLineday" style="width: 370px;height: 200px;margin-top: 50px;"></div>
<div class="echarts deviceNumLine deviceNumLinemouth" id="deviceNumLinemouth" style="width: 370px;height: 200px;margin-top: 50px;"></div>
<div class="echarts deviceNumLine deviceNumLineday" id="deviceNumLineday" style="width: 380px;height: 200px;margin-top: 50px;"></div>
<div class="echarts deviceNumLine deviceNumLinemouth show" id="deviceNumLinemouth" style="width: 380px;height: 200px;margin-top: 50px;"></div>
</div>
<div style="background: linear-gradient(to left,#111a2e,#64FEFF,#111a2e);height:1px;margin-bottom: 30px;margin-left: 10px;width: 90%;margin-top: 15px;"></div>
......@@ -361,7 +366,7 @@
<img src="images/vector7.png" alt="" style="width: 14px;margin-left: 10px;">
当前值班信息
</div>
<div class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:130px;">
<div class="dutyinfo" id="tbmsg"style="overflow-y: auto;height:150px;">
<dl>
<dt>部门</dt>
<dt>当班人员</dt>
......
ioc_frontweb/js/app.js
View file @ 96ca3366
......@@ -177,12 +177,26 @@ $(function () {
// 监听图例点击事件
$('#legend').on('click', function (ev) {
let isJkelected = $('.layui-layer-btn .jkBtn').hasClass('selected');
if (isJkelected) {
removeMaker('jk');
$('.layui-layer-btn .jkBtn').removeClass('selected');
}
if (ev.target.tagName.toLowerCase() !== 'a') {
$(ev.target).closest('li').find('a').click();
if( $(ev.target).closest('li').find(".legendchild").css("display")=="block"){
$(ev.target).closest('li').find(".legendchild").css({display:"none"});
$(ev.target).closest('li').css({"backgroundImage":"url(images/re.png)"});
}else{
$("#legend").find("li .legendchild").css({display:"none"});
// $("#legend").find("li").css({"backgroundImage":"url(images/re.png)"});
$(ev.target).closest('li').find(".legendchild").css({display:"block"});
$(ev.target).closest('li').css({"backgroundImage":"url(images/vectorbot.png)"})
}
} else {
if ($(ev.target)[0].classList.toString().indexOf('selected') === -1) {
removeMaker($(ev.target).data('id'));
......@@ -194,6 +208,30 @@ $(function () {
}
});
$('.legendcss').on('mouseover', function (ev) {
console.log(ev.target.className);
if (ev.target.tagName.toLowerCase() !== 'ul' &&ev.target.tagName.toLowerCase()!=="a"&& ev.target.className !=="legendchild" ) {
$("#legend").find("li .legendchild").hide();
$(ev.target).closest('li').find(".legendchild").show();
$(ev.target).closest('li').css({"backgroundImage":"url(images/vectorbot.png)"})
}else{
}
// if(ev.target.tagName.toLowerCase()=="a" || ev.target.className =="legendchild"){
// $(ev.target).closest('li').css({"backgroundImage":"url(images/re.png)"});
// }
})
$('.legendcss').on('mouseout', function (ev) {
// if (ev.target.tagName.toLowerCase()=="a" || ev.target.className =="legendchild") {
// $("#legend").find("li .legendchild").hide();
// $(e.target).closest('li').find(".legendchild").hide();
// }else{
// }
})
/*全局变量*/
var currentEventObj = {}; //点击评估处理时当前事件obj
(currEventsArr = []), //当前事件Arrary
......
ioc_frontweb/js/utils.js
View file @ 96ca3366
......@@ -346,13 +346,13 @@ function createLineChartday(options) {
x2:20,
y2:60,
borderWidth:1,
top: '15%',
bottom:'15%'
top: '10%',
bottom:'35%'
},
xAxis: {
type: 'category',
// data: options.xAxisData,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: options.xAxisData,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
textStyle: {
color: '#ddd',
......@@ -371,10 +371,21 @@ function createLineChartday(options) {
},
series: [
{
// data: options.seriesData,
data: [120, 200, 150, 80, 70, 110, 130],
data: options.seriesData,
// data: [50, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 12, //柱图宽度
markPoint: {
symbol:'image://../ioc_frontweb/images/gr.svg',//url替换成你的图片地址
symbolSize:15,//图片大小
symbolOffset:[0,'-50%'],//图片相对于柱形图x,y轴偏移量，注意要往上移y要是负的
data:[{
coord:[0,40]//需要展示图片的柱型索引，y轴的value
}],
label:{
show:false,//顶部默认会展示y轴的值，可以设置false,不展示
}
},
barWidth: 8, //柱图宽度
itemStyle: {
normal: {
label: {
......@@ -414,12 +425,12 @@ function createLineChartmouth(options) {
y2:60,
borderWidth:1,
top: '15%',
bottom:'15%'
bottom:'25%'
},
xAxis: {
type: 'category',
// data: options.xAxisData,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: options.xAxisData,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
textStyle: {
color: '#ddd',
......@@ -438,10 +449,21 @@ function createLineChartmouth(options) {
},
series: [
{
// data: options.seriesData,
data: [120, 200, 150, 80, 70, 110, 130],
data: options.seriesData,
// data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 12, //柱图宽度
markPoint: {
symbol:'image://../ioc_frontweb/images/gr.svg',//url替换成你的图片地址
symbolSize:15,//图片大小
symbolOffset:[0,'-50%'],//图片相对于柱形图x,y轴偏移量，注意要往上移y要是负的
data:[{
coord:[0,40]//需要展示图片的柱型索引，y轴的value
}],
label:{
show:false,//顶部默认会展示y轴的值，可以设置false,不展示
}
},
barWidth: 8, //柱图宽度
itemStyle: {
normal: {
label: {
......@@ -605,7 +627,7 @@ function createLegendList() {
tmpLi +=
'<li data-id="' +
items[i].id +
'" class="legendItem active"><div><img class="legendPic" style="padding: 7px 0;" src="./images/legend/' +
'" class="legendItem"><div><img class="legendPic" style="padding: 7px 0;" src="./images/legend/' +
items[i].legendCode +
'.png" alt=""/><span class="legendTitle">' +
items[i].legendName +
......@@ -622,33 +644,15 @@ function createLegendList() {
var legenditem=document.getElementsByClassName("legendItem");
var legendchild=document.getElementsByClassName("legendchild");
for (var i=0; i<legenditem.length;i++){
legenditem[i].index = i;
// legenditem[i].index = i;
legenditem[i].onclick = function(){
// alert()
// var lc = this.lastChild;
// this.lastChild.style.display = "none";
for(var j=0;j<legenditem.length;j++){
legenditem[j].className = legenditem[j].className.replace(' active', '').trim();
// deviceNumLine[j].className = deviceNumLine[j].className.replace(' show', '').trim();
if(this.lastChild.style.display = "none"){
if(this.lastChild.style.display == "none"){
this.style.backgroundImage="url(images/vectorbot.png)";
this.lastChild.style.display = "block";
}else{
this.style.backgroundImage="url(images/re.png)";
this.lastChild.style.display = "none";
}
}
this.className = this.className + ' active';
　　　　　　　　　　//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
// for(var j=0;j<legenditem.length;j++){
// // console.log(legenditem[j],"fasdfdsaffdsfdsfdsafds",legenditem[j].className)
// // legenditem[j].className = legenditem[j].className.replace(' active', '').trim();
// console.log(legenditem[j])
// var aa =
// }
// this.className = this.className + ' active';
// legendchild[this.index].className = legendchild[this.index].className + ' show';
};
}
// 默认显示视频监控设备
......
ioc_frontweb/style/style.css
View file @ 96ca3366
......@@ -246,7 +246,7 @@ table.layui-table th {
}
#alarmList .listContent {
height: 150px;
height: 200px;
overflow: hidden;
}
......@@ -291,6 +291,14 @@ table.layui-table th {
color: #ddd;
}
/* .legendcss li:hover{
background-image:url(../images/vectorbot.png);
} */
/* .legendcss li:hover .legendchild{
display: block !important;
} */
#legend a {
display: inline-block;
text-align: center;
......@@ -317,10 +325,6 @@ table.layui-table th {
padding: 0 5px;
margin-left: 10px;
}
.legendItem .active{
background: url(../images/vectorbot.png) no-repeat;
background-size: 100% 100%;
}
.legendchild{
display: none;
width: auto;
......@@ -449,28 +453,52 @@ table.layui-table th {
/* top: 7px; */
}
#border{
width: 100%;
height: 100%;
z-index: 2;
min-width: 1000px;
background: url(../images/borderban.png) no-repeat;
background-size: 100% 100%;
/* background: url(../images/borderban.png) no-repeat;
background-size: 100% 100%; */
position: absolute;
top: 0;
}
.bordertop{
position: fixed;
width: 100%;
top: 0;
height: 90px;
}
.borderleft{
position: fixed;
height: 100%;
top: 0;
left: 0;
width: 60px;
}
.borderright{
position: fixed;
height: 100%;
top: 0;
right: 0;
width: 60px;
}
.borderbottom{
position: fixed;
width: 100%;
bottom: 0;
height: 30px;
}
#leftBar{
/* background: url(../images/mapleft1.png); */
background-repeat: no-repeat;
background-size: 100%;
width: 22%;
height: 89%;
height: 89.1%;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 2;
background-size: 100% 100%;
margin-top: 4.5%;
margin-top: 4.4%;
margin-left: 1%;
background: url(../images/mapl.png)no-repeat;
background-size: 100% 100%;
......@@ -480,14 +508,14 @@ table.layui-table th {
background-repeat: no-repeat;
background-size: 100%;
width: 22%;
height: 89%;
height: 89.1%;
position: fixed;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background-size: 100% 100%;
margin-top: 4.5%;
margin-top: 4.4%;
margin-right: 1%;
background: url(../images/mapr.png)no-repeat;
background-size: 100% 100%;
......@@ -1038,12 +1066,16 @@ table.layui-table th {
height: 40px;
width: 100%;
}
.dutyinfo dl dl:nth-child(odd){
background: rgb(0 0 0 / 50%);
}
.msgWrap .dutyinfo dl dt{
color: #64FEFF;
box-sizing: border-box;
width: 33%;
font-size: 0.9rem;
border-bottom: 1px solid #fff;
background: rgba(255, 255, 255, 0);
float: left;
}
.msgWrap .dutyinfo dl dd {
......
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