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