Skip to content

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

赞皇样式修改

parent d3c6430a
Expand all Show 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 @@
</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 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="alarm" id="alarm"></div>
<div id="alarmList">
<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;
}
// 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 }
}
return '[ ' + clientcounts[index].value + ' ] ' + name;
},
textStyle: {
color: '#ddd',
fontSize: 14,
lineHeight: 12,
},
inactiveColor: '#555',
itemWidth: 12,
itemHeight: 12,
itemGap: 9,
data: options.legendData,
},
series: [
{
name: '设备数量',
name: 'Nightingale Chart',
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,
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,6 +886,10 @@ function renderLegendTypeNum(eleId) {
function renderAlarmList(obj) {
if (obj.pageData.length > 0) {
var totalTmpHtml = `
<div class="itemh2">
预警监控
</div>
<div class="itemout">
<div class="item">
<span class="num">${obj.totalNum}</span><span class="itemTitle">预警总数</span>
</div>
......@@ -875,7 +898,9 @@ function renderAlarmList(obj) {
</div>
<div class="item">
<span class="num">${obj.noHandeldNum}</span><span class="itemTitle">未处理</span>
</div>`;
</div>
</div>
`;
$('#alarm').html(totalTmpHtml);
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 @@
#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-n-h-now-img{
display: block !important;
}
.wv-v-v-forecast {
padding: 1em 0.5em 1em !important;
border-top: 1px #333 solid;
margin: 10px 0;
.wv-n-h-now-tmp{
display: block !important;
}
.wv-v-h-row{
padding: 15px 0 !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="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