Skip to content

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

赞皇样式修改

parent d3c6430a
Expand all 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/saomiao1.servasoft.gif 0 → 100644
View file @ fec23d5c
This diff is collapsed.
ioc_frontweb/images/saomiao2.gif 0 → 100644
View file @ fec23d5c
This diff is collapsed.
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
This diff is collapsed.
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