Skip to content

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

赞皇样式修改

parent d3c6430a
Hide whitespace changes
Inline Side-by-side
Showing with 770 additions and 245 deletions
ioc_frontweb/images/bbg.png
View replaced file @ d3c6430a View file @ fec23d5c
ioc_frontweb/images/bbg.png

259 Bytes | W: | H:

ioc_frontweb/images/bbg.png

281 Bytes | W: | H:

ioc_frontweb/images/bbg.png
ioc_frontweb/images/bbg.png
ioc_frontweb/images/bbg.png
ioc_frontweb/images/bbg.png
  • 2-up
  • Swipe
  • Onion skin
ioc_frontweb/images/index.html 0 → 100644
View file @ fec23d5c
<!--
* @Author: your name
* @Date: 2022-01-15 09:05:22
* @LastEditTime: 2022-01-15 10:21:53
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/Users/apple/Desktop/index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="radar">
<div class="saomiao"></div>
</div>
<style>
body {
background-color: black;
}
.radar {
background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
width: 300px;
height: 300px;
max-height: 300px;
max-width: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 0.2rem solid #20ff4d;
overflow: hidden;
}
.saomiao {
width: 100%;
height: 10px;
/* border: 1px solid #fff; */
background-image: linear-gradient(rgba(0, 255, 51, 0) 50%, #00ff33 100%);
animation: saomiao 5s infinite;
animation-timing-function: linear;
animation-delay: 1s;
position: absolute;
z-index: 99;
top: -50px;
box-shadow: 0px 1px 0px linear-gradient(rgba(0, 255, 51, 0) 50%, #00ff33 100%);;
}
.radar:before {
content: ' ';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation: blips 5s infinite;
animation-timing-function: linear;
animation-delay: 1.4s;
}
.radar:after {
content: ' ';
display: block;
background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
animation: radar-beam 5s infinite;
animation-timing-function: linear;
transform-origin: bottom right;
border-radius: 100% 0 0 0;
}
@keyframes saomiao {
0% {
top: -50px;
}
100% {
top: 100%;
}
}
@keyframes radar-beam {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes blips {
14% {
background: radial-gradient(1vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
14.0002% {
background: radial-gradient(1vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(1vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
25% {
background: radial-gradient(1vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(1vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(1vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
26% {
background: radial-gradient(1vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(1vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(1vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
opacity: 1;
}
100% {
background: radial-gradient(1vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(1vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(1vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
}
}
</style>
</body>
</html>
\ No newline at end of file
ioc_frontweb/images/one1.png
View replaced file @ d3c6430a View file @ fec23d5c
ioc_frontweb/images/one1.png

3.42 KB | W: | H:

ioc_frontweb/images/one1.png

3.53 KB | W: | H:

ioc_frontweb/images/one1.png
ioc_frontweb/images/one1.png
ioc_frontweb/images/one1.png
ioc_frontweb/images/one1.png
  • 2-up
  • Swipe
  • Onion skin
ioc_frontweb/images/one10.png
View replaced file @ d3c6430a View file @ fec23d5c
ioc_frontweb/images/one10.png

6 KB | W: | H:

ioc_frontweb/images/one10.png

8.66 KB | W: | H:

ioc_frontweb/images/one10.png
ioc_frontweb/images/one10.png
ioc_frontweb/images/one10.png
ioc_frontweb/images/one10.png
  • 2-up
  • Swipe
  • Onion skin
ioc_frontweb/images/one11.png
View replaced file @ d3c6430a View file @ fec23d5c
ioc_frontweb/images/one11.png

1.76 KB | W: | H:

ioc_frontweb/images/one11.png

3.07 KB | W: | H:

ioc_frontweb/images/one11.png
ioc_frontweb/images/one11.png
ioc_frontweb/images/one11.png
ioc_frontweb/images/one11.png
  • 2-up
  • Swipe
  • Onion skin
ioc_frontweb/images/one2.png
View replaced file @ d3c6430a View file @ fec23d5c
ioc_frontweb/images/one2.png

36.1 KB | W: | H:

ioc_frontweb/images/one2.png

40.7 KB | W: | H:

ioc_frontweb/images/one2.png
ioc_frontweb/images/one2.png
ioc_frontweb/images/one2.png
ioc_frontweb/images/one2.png
  • 2-up
  • Swipe
  • Onion skin
ioc_frontweb/images/one6.png
View replaced file @ d3c6430a View file @ fec23d5c
ioc_frontweb/images/one6.png

92.9 KB | W: | H:

ioc_frontweb/images/one6.png

101 KB | W: | H:

ioc_frontweb/images/one6.png
ioc_frontweb/images/one6.png
ioc_frontweb/images/one6.png
ioc_frontweb/images/one6.png
  • 2-up
  • Swipe
  • Onion skin
ioc_frontweb/images/top-banner.png
View replaced file @ d3c6430a View file @ fec23d5c
ioc_frontweb/images/top-banner.png

22.6 KB | W: | H:

ioc_frontweb/images/top-banner.png

26.2 KB | W: | H:

ioc_frontweb/images/top-banner.png
ioc_frontweb/images/top-banner.png
ioc_frontweb/images/top-banner.png
ioc_frontweb/images/top-banner.png
  • 2-up
  • Swipe
  • Onion skin
ioc_frontweb/index.html
View file @ fec23d5c
......@@ -22,25 +22,18 @@
</div>
<div id="mainTitle">
<img src="images/top-banner.png" alt="">
<img src="images/top-banner01.png" alt="">
</div>
<div id="topBg"></div>
<div id="weather">
<iframe frameborder="0" scrolling="no" seamless="seamless" src="./weather.html"></iframe>
</div>
<!-- <div id="topBg"></div> -->
<!-- <div class="videoWindows" style="position: absolute; z-index: 100; width: 100%; height: 500px; bottom: 0; left: 0;">
</div> -->
<div id="bottomBg"></div>
<div id="bottomMenu">
<img src="./images/newmenu1.png" alt="" />
<!--<button class="btn">GIS调度</button>-->
<button class="btn">事件态势分析</button>
<button class="btn">值守通讯</button>
<!--<button class="btn">当前事件</button>-->
<button class="btn">事件回顾</button>
<button class="btn">综合保障</button>
<button class="btn">应急预案</button>
<!--<button class="btn">知识库</button>-->
</div>
<div id="btmSearch">
<input type="text" name="title" placeholder="请输入关键字搜索" class="layui-input" id="btnInput" />
<button class="serBtn activebtn" id="btmSerBtn"><i class="layui-icon layui-icon-search"></i></button>
......@@ -105,20 +98,19 @@
</div>
<div id="escbox">
<div class="escbox-tip">
<div class="escbox-tip-a" style="width: 100%">
<div class="escbox-tip-a escbox-tip-b" style="width: 100%;height: 90px;">
<div class="loadingio-spinner-ripple-h9py4n9xxvv" style="display: inline">
<div class="ldio-2q89h75hfq5">
<div></div>
<div></div>
<div class="radar"><img src="images/out.png" ></div>
</div>
</div>
<!-- <img src="images/u517.gif" alt="" /> -->
<span class="escbox-txt">事件接报中.....</span>
<span class="escbox-txt item">事件接报中.....</span>
</div>
<div class="escbox-tip-b alarm" style="clear: both">
<!-- <div class="escbox-tip-b alarm" style="clear: both">
<div class="item"><span class="num currEvNum">0</span><span class="itemTitle">当前事件</span></div>
<div class="item"><span class="num hisEvNum">0</span><span class="itemTitle">历史事件</span></div>
</div>
</div> -->
</div>
<div class="escbox-top">
<div class="escbox-tit">应急事件</div>
......@@ -195,10 +187,64 @@
</div>
</div>
</div>
<div id="leftBar">
<!-- <div class="echarts deviceNumBar" id="deviceNumBar"></div> -->
<div class="alarm" id="alarm"></div>
<div id="alarmList">
<div id="bottomMenu">
<a href="#" class="btn span1">
<div>态势分析</div>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<a href="#" class="btn span2">
<div>值守通讯</div>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<a href="#" class="btn span3">
<div>事件回顾</div>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<a href="#" class="btn span4">
<div>综合保障</div>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<a href="#" class="btn span5">
<div>应急预案</div>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</div>
<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>
</div>
</div>
<div id="rightBar">
<!-- <div class="echarts deviceNumBar" id="deviceNumBar"></div> -->
<div class="echarts deviceNumPie" id="deviceNumPie"></div>
<div id="alarmList" class="right-alarm">
<div class="mktit">安全生产实时预警数据</div>
<div class="listTitle">
<div style="width: 20%; overflow: hidden">所属单位</div>
......@@ -209,8 +255,7 @@
</div>
<div class="listContent"></div>
</div>
<div class="echarts categoryAlarmNum" id="categoryAlarmNum" style="width: 445px;height: 260px;padding: 20px !important;padding-right: 35px !important;"></div>
<div class="echarts deviceNumPie" id="deviceNumPie" style="width: 470px;height: 230px;padding: 20px 10px 30px 20px;"></div>
<!-- 值班信息 -->
<div class="msgWrap">
<h3>当前值班信息</h3>
......@@ -223,13 +268,6 @@
</div>
</div>
</div>
<div id="rightBar">
<div id="weather">
<iframe frameborder="0" scrolling="no" seamless="seamless" src="./weather.html"></iframe>
</div>
<ul id="legend"></ul>
</div>
<div class="hide videoHome">
<div class="videoHandler"></div>
</div>
......@@ -387,6 +425,162 @@ $(".saveImage").click(function () {
}
}
.btn{
position: relative;
width: 300px;
height: 80px;
border: 2px solid #00F7DE;
text-align: center;
line-height: 40px;
text-transform: uppercase;
text-decoration: none;
transform: skewX(-35deg);
font-size: 15px;
color: aqua;
overflow: hidden;
-webkit-box-reflect: below 1px linear-gradient( transparent,rgba(34, 239, 239, 0.3));
}
.btn > div{
transform: skewX(35deg);
}
.btn:hover{
background-color: aqua;
box-shadow:0 0 5px aqua,
0 0 75px aqua,
0 0 155px aqua;
color: black;
}
.btn span:nth-of-type(1){
position: absolute;
left: -100%;
width: 100%;
height: 3px;
}
@keyframes shang{
0%{
left:-100%;
}
50%,100%{
left:100%;
}
}
.btn span:nth-of-type(2){
position: absolute;
top: -100%;
right: 0;
width: 3px;
height: 100%;
}
@keyframes you{
0%{
top:-100%;
}
50%,100%{
top:100%;
}
}
.btn span:nth-of-type(3){
position: absolute;
right: -100%;
bottom: 0;
width: 100%;
height: 3px;
}
@keyframes xia{
0%{
right:-100%;
}
50%,100%{
right:100%;
}
}
.btn span:nth-of-type(4){
position: absolute;
bottom: -100%;
left: 0;
width: 3px;
height: 100%;
}
@keyframes zuo{
0%{
bottom:-100%;
}
50%,100%{
bottom:100%;
}
}
.radar {
/* background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
background */: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
width: 80px;
height: 80px;
position: relative;
left: 48%;
top: 45%;
padding: 1px;
transform: translate(-50%, -50%);
/* border-radius: 50%;
border: 0.2rem solid */#20ff4d;
overflow: hidden;
}
.radar img{
width: 100%;
height: 100%;
}
.radar:before {
content: ' ';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation: blips 5s infinite;
animation-timing-function: linear;
animation-delay: 1.4s;
}
.radar:after {
content: ' ';
display: block;
background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
animation: radar-beam 5s infinite;
animation-timing-function: linear;
transform-origin: bottom right;
border-radius: 100% 0 0 0;
}
@keyframes radar-beam {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes blips {
14% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
14.0002% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
25% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
26% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
opacity: 1;
}
100% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
}
}
</style>
</body>
</html>
ioc_frontweb/js/app.js
View file @ fec23d5c
......@@ -1040,7 +1040,7 @@ $(function () {
for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: '#0088ff',
strokeColor: '#22eae4',
strokeWeight: 5,
strokeOpacity: 7,
map: map,
......
ioc_frontweb/js/map.js
View file @ fec23d5c
var opts = {
var opts = {
subdistrict: 0,
extensions: 'all',
level: 'city',
......@@ -50,7 +50,7 @@ district.search('河北省', function (status, result) {
for (var i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: '#0088ff',
strokeColor: '#3edfe1',
strokeWeight: 5,
strokeOpacity: 7,
map: map,
......@@ -58,17 +58,17 @@ district.search('河北省', function (status, result) {
}
// 地图控件
map.plugin(['AMap.OverView', 'AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar'], function () {
map.addControl(
new AMap.OverView({
isOpen: true,
visible: true,
// tileLayer: new AMap.TileLayer({
// //显示的是google上显示的图层
// tileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil', //图块取图地址
// })
}),
);
map.plugin([ 'AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar'], function () {
// map.addControl(
// new AMap.OverView({
// // isOpen: true,
// // visible: true,
// // tileLayer: new AMap.TileLayer({
// // //显示的是google上显示的图层
// // tileUrl: 'http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil', //图块取图地址
// // })
// }),
// );
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 @ fec23d5c
// var videoPlatUrl = 'http://27.128.189.131:8089';
// var apiUrl = 'http://47.104.61.232:8902';
// var pushUrl = 'http://47.104.61.232:8905';
// var wsUrl = 'ws://47.104.61.232:8905/iocdata/websocket';
// var iocUrl = 'http://47.104.61.232:8902/ioc';
// var iocWsUrl = 'ws://47.104.61.232:8902/ioc/websocket';
var videoPlatUrl = 'http://27.128.189.131:8089';
var apiUrl = 'http://47.104.61.232:8902';
var pushUrl = 'http://47.104.61.232:8905';
var wsUrl = 'ws://47.104.61.232:8905/iocdata/websocket';
var iocUrl = 'http://47.104.61.232:8902/ioc';
var iocWsUrl = 'ws://47.104.61.232:8902/ioc/websocket';
var apiUrl = 'http://36.148.23.59:8901';
var pushUrl = 'http://36.148.23.59:8901';
var wsUrl = 'ws://36.148.23.59:8901/iocdata/websocket';
var iocUrl = 'http://36.148.23.59:8901/ioc';
var iocWsUrl = 'ws://36.148.23.59:8901/ioc/websocket';
// var apiUrl = 'http://localhost:8902';
// var pushUrl = 'http://localhost:8905';
......@@ -42,7 +50,8 @@ var apis = {
getMapData: apiUrl + '/ioc/frontApi/getMapData',
getZHDeviceData: apiUrl + '/ioc/frontApi/getZHDeviceData',
// getEnterpriseDeviceDataByEnterpriseId: apiUrl + '/ioc/frontApi/getEnterpriseDeviceDataByEnterpriseId',
getDeviceNum: apiUrl + '/ioc/frontApi/getDeviceNum',
// getDeviceNum: apiUrl + '/ioc/frontApi/getDeviceNum',
getEventsNum: apiUrl + '/ioc/frontApi/getEventsNum',
getSoldierTrackBySoldierId: apiUrl + '/ioc/frontApi/getSoldierTrackBySoldierId',
getEventNum: apiUrl + '/ioc/frontApi/getEventNum',
getLegendTypeNum: apiUrl + '/ioc/frontApi/getLegendTypeNum',
......@@ -189,7 +198,7 @@ function createDeviceAlarmNumBarChart(options) {
left: 'left',
textStyle: {
color: '#fff',
fontSize: '14',
fontSize: '20',
lineHeight: '36',
},
},
......@@ -221,6 +230,7 @@ function createDeviceAlarmNumBarChart(options) {
show: true,
position: 'inside',
},
barWidth: 20,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
......@@ -257,65 +267,70 @@ function createPieChart(options) {
left: 'left',
textStyle: {
color: '#fff',
fontSize: '14',
fontSize: '20',
lineHeight: '36',
},
},
legend: {
orient: 'vertical',
top: 35,
left: 6,
formatter: function (name) {
var index = 0;
var clientlabels = options.legendData;
var clientcounts = options.seriesData;
for (var i = 0; i < clientlabels.length; ++i) {
if (clientlabels[i] == name) {
index = i;
}
}
return '[ ' + clientcounts[index].value + ' ] ' + name;
},
textStyle: {
color: '#ddd',
fontSize: 14,
lineHeight: 12,
},
inactiveColor: '#555',
itemWidth: 12,
itemHeight: 12,
itemGap: 9,
data: options.legendData,
},
// legend: {
// top: 'bottom'
// orient: 'vertical',
// top: 35,
// left: 6,
// formatter: function (name) {
// var index = 0;
// var clientlabels = options.legendData;
// var clientcounts = options.seriesData;
// for (var i = 0; i < clientlabels.length; ++i) {
// if (clientlabels[i] == name) {
// index = i;
// }
// }
// return '[ ' + clientcounts[index].value + ' ] ' + name;
// },
// textStyle: {
// color: '#ddd',
// fontSize: 14,
// lineHeight: 12,
// },
// inactiveColor: '#555',
// itemWidth: 12,
// itemHeight: 12,
// itemGap: 9,
// data: options.legendData,
// },
toolbox: {
show: true,
feature: {
mark: { show: true },
// dataView: { show: true, readOnly: false },
// restore: { show: true },
// saveAsImage: { show: true }
}
},
series: [
{
name: '设备数量',
type: 'pie',
radius: ['40%', '85%'],
center: ['70%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center',
},
emphasis: {
formatter: '{b}\n({d}%)\n{c}',
show: true,
textStyle: {
fontSize: '16',
fontWeight: 'bold',
color: '#fff',
},
},
},
labelLine: {
length: 6,
length2: 10,
},
data: options.seriesData,
},
name: 'Nightingale Chart',
type: 'pie',
radius: [20, 100],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: options.seriesData,
//[
// { value: 40, name: 'rose 1' },
// { value: 38, name: 'rose 2' },
// { value: 32, name: 'rose 3' },
// { value: 30, name: 'rose 4' },
// { value: 28, name: 'rose 5' },
// { value: 26, name: 'rose 6' },
// { value: 22, name: 'rose 7' },
// { value: 18, name: 'rose 8' }
// ]
}
],
},
};
createEchart(opts);
......@@ -761,7 +776,7 @@ function createDeviceNumPieChart(eleId) {
return;
}
var opts = {
url: apis.getDeviceNum,
url: apis.getEventsNum,
success: function (res) {
if (res.code === 0) {
var options = {
......@@ -774,8 +789,10 @@ function createDeviceNumPieChart(eleId) {
for (var i in res.data) {
options.legendData.push(res.data[i].typeName);
options.seriesData.push({
name: res.data[i].typeName,
value: res.data[i].deviceNum,
// name: res.data[i].typeName,
// value: res.data[i].deviceNum,
name: res.data[i].eventType,
value: res.data[i].eventNum,
});
options.series.push({
name: res.data[i].key,
......@@ -835,6 +852,7 @@ function renderLegendTypeNum(eleId) {
var opts = {
url: apis.getLegendTypeNum,
success: function (res) {
console.log("2222222222222222222",res.data)
if (res.code === 0) {
var options = {
eleId: eleId,
......@@ -846,6 +864,7 @@ 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',
......@@ -867,15 +886,21 @@ function renderLegendTypeNum(eleId) {
function renderAlarmList(obj) {
if (obj.pageData.length > 0) {
var totalTmpHtml = `
<div class="item">
<span class="num">${obj.totalNum}</span><span class="itemTitle">预警总数</span>
</div>
<div class="item">
<span class="num">${obj.handledNum}</span><span class="itemTitle">已处理</span>
</div>
<div class="item">
<span class="num">${obj.noHandeldNum}</span><span class="itemTitle">未处理</span>
</div>`;
<div class="itemh2">
预警监控
</div>
<div class="itemout">
<div class="item">
<span class="num">${obj.totalNum}</span><span class="itemTitle">预警总数</span>
</div>
<div class="item">
<span class="num">${obj.handledNum}</span><span class="itemTitle">已处理</span>
</div>
<div class="item">
<span class="num">${obj.noHandeldNum}</span><span class="itemTitle">未处理</span>
</div>
</div>
`;
$('#alarm').html(totalTmpHtml);
var tmpHtml = '<ul>';
......
ioc_frontweb/style/style.css
View file @ fec23d5c
......@@ -53,8 +53,8 @@ table.layui-table th {
*display: inline;
*zoom: 1;
vertical-align: top;
border-color: #1e9fff;
background-color: #1e9fff;
/* border-color: #1e9fff;
background-color: #1e9fff; */
color: #fff;
}
......@@ -139,17 +139,17 @@ table.layui-table th {
padding: 5px 0 !important;
}
.amap-overviewcontrol {
/* .amap-overviewcontrol {
right: 20px !important;
bottom: 20px !important;
border-radius: 5px;
}
} */
.amap-overview-main {
/* .amap-overview-main {
border-radius: 5px;
left: 0;
top: 0;
}
} */
.amap-overview-button {
display: none;
......@@ -167,15 +167,29 @@ table.layui-table th {
}
/* 报警数量 */
.alarm {
display: flex;
/* display: flex; */
/* width: 100%; */
height: auto !important;
padding: 10px;
margin-top: 20px;
margin-top: 80px;
margin-left: 5px;
width: 454px;
background: rgba(21,34,60,0.8);
overflow: hidden;
box-sizing: border-box;
justify-content: space-between;
/* justify-content: space-between; */
border-right: 2px solid ;
border-left: 2px solid;
border-top: 2px solid;
border-bottom: 2px solid;
border-image: -webkit-linear-gradient(#123c7f,#00F7DE,#123c7f,#00F7DE) 30 30;
border-image: -moz-linear-gradient(#123c7f,#00F7DE,#123c7f,#00F7DE) 30 30;
border-image: linear-gradient(#123c7f,#00F7DE,#123c7f,#00F7DE) 30 30;
}
.alarm .itemout{
display: flex;
justify-content: space-between;
}
.alarm .item {
width: auto;
height: 55px;
......@@ -197,7 +211,12 @@ table.layui-table th {
width: auto;
display: inline-block;
}
.alarm .itemh2 {
width: 100%;
height: 35px;
font-size: 20px;
color: #fff;
}
.alarm .itemTitle {
color: #d8d8d8;
font-size: 12px;
......@@ -250,16 +269,15 @@ table.layui-table th {
/* 图表样式 */
.echarts,
#alarmList {
width: 100%;
height: 270px;
background-image: url('../images/one2.png');
width: 99%;
height: 240px;
background-size: 100% 100%;
position: relative;
margin-top: -20px;
/* margin-top: -20px; */
}
#alarmList {
padding: 40px 20px 30px 20px;
padding: 25px 10px 0px 10px;
}
.deviceNumBar {
height: 70px;
......@@ -268,11 +286,16 @@ table.layui-table th {
/* 天气样式 */
#weather {
margin: 10px auto 0;
position: fixed;
top: 0;
right: 0;
margin-top: 30px;
z-index: 999;
}
#weather,
iframe {
height: 140px;
height: 50px;
width: 480px;
}
......@@ -280,22 +303,20 @@ iframe {
#legend {
overflow: hidden;
margin: 0;
width: 480px;
padding: 0 10px;
width: 94%;
margin-left: 3%;
color: #ddd;
}
#legend a {
display: inline-block;
/* height: 40px; */
/* line-height: 40px; */
/* width: 33.333333%; */
text-align: center;
color: #ccc;
padding: 4px 12px 10px 12px;
margin: 5px;
background-image: url(../images/one8.png);
background-size: 100% 100%;
display: inline-block;
text-align: center;
color: #ccc;
padding: 3px 6px;
margin: 5px;
background-size: 100% 100%;
border-radius: 5px;
border: 1px solid #00F7DE;
}
#legend div {
......@@ -303,21 +324,29 @@ 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/one10.png');
/* 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;
/* padding: 10px 10px; */
/* margin-top: 10px; */
}
.legendItem:last-child{
border-bottom: 0;
}
/* .legendItem a:hover {
background-color: rgba(0, 0, 0, 0.8) !important;
} */
.legendItem a.selected {
background: rgb(34 62 107) url('../images/legend/selected.png') right top no-repeat !important;
......@@ -350,7 +379,7 @@ iframe {
#mainTitle {
width: 100%;
max-width: 2089px;
height: 80px;
height: 70px;
position: fixed;
top: 0;
z-index: 999;
......@@ -382,51 +411,56 @@ iframe {
#bottomMenu {
display: block;
position: fixed;
bottom: 0;
position: fixed;
top: 0;
left: calc((100% - 1083px) / 2);
width: 1083px;
height: 112px;
margin: 0 auto;
/* margin: 0 auto; */
margin-top: 30px;
text-align: center;
z-index: 999;
}
#bottomMenu .btn {
width: 60px;
height: 50px;
/* width: 100px;
height: 50px; */
position: absolute;
opacity: 0;
opacity: 0;
/* opacity: 0;
opacity: 0; */
cursor: pointer;
}
#bottomMenu .btn:nth-child(1) {
left: 0;
/* top: 8px; */
}
#bottomMenu .btn:nth-child(2) {
left: 194px;
top: 8px;
left: 125px;
/* top: 8px; */
}
#bottomMenu .btn:nth-child(3) {
left: 300px;
top: 16px;
left: 250px;
/* top: 16px; */
}
#bottomMenu .btn:nth-child(4) {
left: 406px;
top: 24px;
left: 375px;
/* top: 24px; */
}
#bottomMenu .btn:nth-child(5) {
left: 512px;
top: 30px;
left: 500px;
/* top: 30px; */
}
#bottomMenu .btn:nth-child(6) {
left: 617px;
top: 23px;
/* top: 23px; */
}
#bottomMenu .btn:nth-child(7) {
left: 722px;
top: 15px;
/* top: 15px; */
}
#bottomMenu .btn:nth-child(8) {
left: 828px;
top: 7px;
/* top: 7px; */
}
#bottomBg {
width: 100%;
......@@ -440,7 +474,7 @@ iframe {
#leftBar,
#rightBar {
width: 500px;
width: 450px;
height: 99.9%;
position: absolute;
/* background-color: rgba(0, 0, 0, 0.2); */
......@@ -453,10 +487,60 @@ iframe {
#leftBar {
left: 0;
width: 500px;
width: 450px;
height: 99.9%;
right: auto;
}
.leftBar-legend{
left: 0;
width: 100%;
height: auto;
right: auto;
margin-top: 5px;
margin-left: 5px;
padding-bottom: 10px;
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;
}
#deviceNumPie{
width: 436px;
height: 230px;
padding-left: 5px;
padding-top: 3px;
margin-top: 80px;
-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;
}
.right-alarm{
width: 100%;
height: 270px;
background-size: 100% 100%;
position: relative;
margin-top: 10px;
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;
}
/* 云台 */
.controlBtn {
display: flex;
......@@ -640,17 +724,25 @@ iframe {
width: 300px;
overflow: hidden;
position: absolute;
left: 510px;
top: 110px;
left: 470px;
top: 120px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-image: url('../images/one11.png');
/* background-image: url('../images/one11.png'); */
max-height: calc(100vh - 100px);
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;
}
.escbox-txt {
line-height: 90px;
display: inline;
margin-left: 120px;
/* margin-left: 120px; */
float: left;
}
.escbox-bottom .escbox-top {
......@@ -675,9 +767,9 @@ iframe {
#esc-tit {
width: auto;
position: absolute;
left: 50%;
left: 53%;
transform: translateX(-50%);
top: 65px;
top: 120px;
overflow: hidden;
display: none;
z-index: 999;
......@@ -891,21 +983,24 @@ iframe {
line-height: 2;
}
.msgWrap {
width: 480px;
height: auto;
padding: 0px 30px 20px 30px;
/* background-image: url(../images/one11.png); */
/* background-size: 100% 100%; */
/* background-repeat: no-repeat; */
border: 1px solid #203b68 !important;
background: #1d2c4e;
box-shadow: 0px 0px 35px #305287 inset !important;
overflow: hidden;
box-sizing: border-box;
margin-left: 10px;
width: 99%;
height: auto;
margin-top: 10px;
padding: 0px 10px 10px 10px;
overflow: hidden;
box-sizing: border-box;
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;
}
.msgWrap .dutyinfo {
background: transparent;
margin-top: 10px;
overflow: hidden;
text-align: center;
width: 100%;
......@@ -937,7 +1032,7 @@ iframe {
border-radius: 10px;
}
.msgWrap h3 {
font-size: 14px;
font-size: 20px;
color: #fff;
line-height: 36px;
text-align: left;
......@@ -966,10 +1061,9 @@ iframe {
}
.mktit {
color: #fff;
font-size: 14;
font-size: 20px;
text-align: left;
margin-top: 35px;
margin-left: 5px;
margin-top: 10px;
width: 100%;
overflow: hidden;
position: absolute;
......@@ -1297,23 +1391,15 @@ div[lay-id='members'] thead tr:nth-child(1) {
}
}
.ldio-2q89h75hfq5 div {
.ldio-2q89h75hfq5{
position: absolute;
border-width: 4px;
border-style: solid;
/* border-width: 4px; */
/* border-style: solid; */
opacity: 1;
border-radius: 50%;
animation: ldio-2q89h75hfq5 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
/* border-radius: 50%; */
/* animation: ldio-2q89h75hfq5 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; */
}
.ldio-2q89h75hfq5 div:nth-child(1) {
border-color: #e90c59;
}
.ldio-2q89h75hfq5 div:nth-child(2) {
border-color: #46dff0;
animation-delay: -0.5s;
}
.loadingio-spinner-ripple-h9py4n9xxvv {
width: 100px;
......@@ -1348,7 +1434,7 @@ div[lay-id='members'] thead tr:nth-child(1) {
#bottomMenu {
width: 800px;
height: 93px;
left: calc((100% - 800px) / 2);
left: 29%;
padding-bottom: 5px;
}
#bottomMenu img {
......@@ -1356,8 +1442,8 @@ div[lay-id='members'] thead tr:nth-child(1) {
height: auto;
}
#bottomMenu .btn {
width: 45px;
height: 41px;
width: 100px;
height: 40px;
}/*
#bottomMenu .btn:nth-child(2) {
left: 144px;
......@@ -1387,7 +1473,7 @@ div[lay-id='members'] thead tr:nth-child(1) {
left: 612px;
top: 4px;
}*/
#bottomMenu .btn:nth-child(2) {
/* #bottomMenu .btn:nth-child(2) {
left: 202px;
top: 14px;
}
......@@ -1406,7 +1492,7 @@ div[lay-id='members'] thead tr:nth-child(1) {
#bottomMenu .btn:nth-child(6) {
left: 570px;
top: 14px;
}
} */
}
.videoHandler {
height: 100%;
......
ioc_frontweb/weather.html
View file @ fec23d5c
......@@ -13,61 +13,142 @@
#he-plugin-standard {
padding-bottom: 5px !important;
border: 1px solid #203b68 !important;
border: 1px solid #3ab1b2 !important;
border-radius: 2px !important;
background-color: rgb(24 35 62) !important;
box-shadow: 0px 0px 35px #305287 inset !important;
/* background-color: rgb(24 35 62) !important; */
box-shadow: 0px 0px 35px #49c4c4 inset !important;
}
.wv-lt-refresh a {
display: none !important;
}
.wv-v-h-col-left[data-v-e38785c2] {
width: 80% !important;
margin-left: 10px !important;
margin-top: -10px !important;
}
.wv-n-h-now-tmp[data-v-5f4c0628] {
font-size: 1.7em;
position: relative;
padding-top: 0em !important;
}
.wv-n-h-col-10[data-v-5f4c0628] {
margin-left: 0px !important;
width: 85% !important;
margin-top: 15px !important;
}
#he-plugin-standard[data-v-75e43ed3] {
background: rgba(0,0,0,0) !important;
box-shadow: none !important;
}
.wv-v-v-location {
display: none !important;
}
.wv-lt-col-7[data-v-4b9dcab4] {
display: none !important;
}
.wv-v-v-line {
border-color: #333 !important;
}
#weather-view-he {
height: 325px !important;
width: 290px !important;
padding: 5px !important;
border: 1px solid #183158 !important;
background-color: rgba(0, 0, 0, 0) !important;
margin: 10px auto !important;
border-radius: 3px !important;
}
.wv-v-v-forecast {
padding: 1em 0.5em 1em !important;
border-top: 1px #333 solid;
margin: 10px 0;
}
.wv-v-h-row{
padding: 15px 0 !important;
}
.wv-n-h-now-img{
display: block !important;
}
.wv-n-h-now-tmp{
display: block !important;
}
.wv-n-h-now-rain-text{
display: none !important;
}
.wv-f-a{
display: none !important;
}
.wv-f-forecast-img > .wv-f-a{
display: none !important;
}
.wv-n-h-now-img>img[data-v-5f4c0628] {
width: 2em !important;
margin: .7em 1em .2em 0;
}
.wv-lt-location>span[data-v-4b9dcab4] {
display: none;
}
span.wv-f-forecast-aqi-2[data-v-66693262] {
display: none;
}
span.wv-f-forecast-aqi-3[data-v-66693262] {
display: none;
}
#he-plugin-standard[data-v-75e43ed3] {
margin-left: -15px !important;
border: none !important;
}
/* #he-plugin-standard {
border: none !important;
} */
.wv-v-v-copyright,
.wv-v-v-lifestyle,
.wv-v-v-line,
.wv-v-h-location {
display: none;
display: none !important;
}
#top-right{
position: relative;
right: -160px;
margin-top: -7px;
}
#item{
position: relative;
width: 215px;
height: 40px;
float: left;
padding-bottom: 10px;
margin-left: 5px;
border-right: 2px solid #00F7DE;
transform: skewX(-30deg);
text-align: center;
line-height: 3px;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
color: aqua;
overflow: hidden;
}
#item > div{
width: 195px;
height: 40px;
transform: skewX(30deg);
}
#itemone{
transform: skewX(30deg);
}
#itemtwo{
transform: skewX(30deg);
}
#item1{
border-right: none;
}
</style>
</head>
<body>
<div id="he-plugin-standard"></div>
<div id="top-right">
<div id="item">
<p id="itemone"></p>
<p id="itemtwo"></p>
</div>
<div id="item item1">
<div id="he-plugin-standard"></div>
</div>
</div>
<!-- <div id="he-plugin-standard"></div> -->
<script>
WIDGET = {
CONFIG: {
layout: 1,
width: '480',
height: '130',
width: '140',
height: '40',
background: 4,
dataColor: 'FFFFFF',
backgroundColor: '000000',
......@@ -76,6 +157,8 @@
key: '61b7aa520cb34e62a9eee4644a689fcf',
},
};
setInterval("document.getElementById('itemone').innerHTML=new Date().toLocaleString();",1000);
document.getElementById("itemtwo").innerHTML = "星期"+"日一二三四五六".charAt(new Date().getDay());
</script>
<script src="https://widget.heweather.net/standard/static/js/he-standard-common.js?v=1.1"></script>
<!-- <div id="he-plugin-standard"></div>
......
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