init: 工业互联网数据看板项目首次入库
XingCheng3
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.idea/
|
||||
46087
cityMultiPolygon.js
Normal file
1
echarts-gl.min.js
vendored
Normal file
95211
echarts.js
Normal file
45
echarts.min.js
vendored
Normal file
0
getPie3D.js
Normal file
230
left.html
Normal file
@@ -0,0 +1,230 @@
|
||||
<!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>
|
||||
<script src="./echarts.js"></script>
|
||||
<script src="./echarts-gl.min.js"></script>
|
||||
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script type="module" src="./getPie3D.js"></script>
|
||||
<link rel="stylesheet" href="./left.css" />
|
||||
<!-- <script type="module">
|
||||
import {getPie3D} from './getPie3D.js' //引入必须加.js后缀名
|
||||
console.log(getPie3D) // 1
|
||||
</script> -->
|
||||
<script type="module" src="./left.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content content-left">
|
||||
<div class="box">
|
||||
<div class="nobg-data-list">
|
||||
<div class="item-left">
|
||||
<div class="name">设备总采集时间</div>
|
||||
<div class="data" id="numTimeData">2,064,213</div>
|
||||
</div>
|
||||
<div class="unit">min</div>
|
||||
<div class="item-right"></div>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<div class="nobg-data-list">
|
||||
<div class="item-left">
|
||||
<div class="name">设备总采集数据</div>
|
||||
<div class="data" id="numGatherData">1,147,741</div>
|
||||
</div>
|
||||
<div class="unit">条</div>
|
||||
<div class="item-right"></div>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<div class="nobg-data-list">
|
||||
<div class="item-left">
|
||||
<div class="name">今日能源采集量</div>
|
||||
<div class="data" id="todayGather">614,500</div>
|
||||
</div>
|
||||
<div class="unit">kwh</div>
|
||||
<div class="item-right">
|
||||
<div class="name">较昨日</div>
|
||||
<div class="data" id="todayGatherOld">+145</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<div class="nobg-data-list">
|
||||
<div class="item-left">
|
||||
<div class="name">今日预警上报量</div>
|
||||
<div class="data" id="todayWarning">5,370</div>
|
||||
</div>
|
||||
<div class="unit">条</div>
|
||||
<div class="item-right">
|
||||
<div class="name">较昨日</div>
|
||||
<div class="data" id="todayWarningOld">+24</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">最新项目</div>
|
||||
<div id="new-item-box">
|
||||
<div class="new-item-list" id="new-item0">
|
||||
<div class="icon"></div>
|
||||
<div class="item-left">
|
||||
<div class="name">2022年7月</div>
|
||||
<div class="data">瑞达数字化工厂</div>
|
||||
</div>
|
||||
<div class="unit">60万</div>
|
||||
<div class="item-right"></div>
|
||||
</div>
|
||||
<div class="new-item-list" id="new-item1">
|
||||
<div class="icon"></div>
|
||||
<div class="item-left">
|
||||
<div class="name">2022年6月</div>
|
||||
<div class="data">通力系统</div>
|
||||
</div>
|
||||
<div class="unit">20万</div>
|
||||
<div class="item-right"></div>
|
||||
</div>
|
||||
<div class="new-item-list" id="new-item2">
|
||||
<div class="icon"></div>
|
||||
<div class="item-left">
|
||||
<div class="name">2022年6月</div>
|
||||
<div class="data">温岭船联网系统</div>
|
||||
</div>
|
||||
<div class="unit">20万</div>
|
||||
<div class="item-right yunwei"></div>
|
||||
</div>
|
||||
<div class="new-item-list" id="new-item3">
|
||||
<div class="icon"></div>
|
||||
<div class="item-left">
|
||||
<div class="name">2022年5月</div>
|
||||
<div class="data">中豪工业互联网</div>
|
||||
</div>
|
||||
<div class="unit">40万</div>
|
||||
<div class="item-right yunwei"></div>
|
||||
</div>
|
||||
<div class="new-item-list" id="new-item4">
|
||||
<div class="icon"></div>
|
||||
<div class="item-left">
|
||||
<div class="name">2022年5月</div>
|
||||
<div class="data">兴机电器工业互联网</div>
|
||||
</div>
|
||||
<div class="unit">60万</div>
|
||||
<div class="item-right"></div>
|
||||
</div>
|
||||
<div class="new-item-list" id="new-item5">
|
||||
<div class="icon"></div>
|
||||
<div class="item-left">
|
||||
<div class="name">2022年5月</div>
|
||||
<div class="data">兴机电器工业互联网2</div>
|
||||
</div>
|
||||
<div class="unit">60万</div>
|
||||
<div class="item-right"></div>
|
||||
</div>
|
||||
<div class="new-item-list" id="new-item6">
|
||||
<div class="icon"></div>
|
||||
<div class="item-left">
|
||||
<div class="name">2022年5月</div>
|
||||
<div class="data">兴机电器工业互联网3</div>
|
||||
</div>
|
||||
<div class="unit">60万</div>
|
||||
<div class="item-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">项目实施阶段分布</div>
|
||||
<div id="echarts1" style="height: 350px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content content-right">
|
||||
<div class="box right-top-box">
|
||||
<div class="right-top-item1 right-top-item">
|
||||
<div class="icon"></div>
|
||||
接入设备总数
|
||||
</div>
|
||||
<div class="right-top-item2">
|
||||
<div class="top-box">0</div>
|
||||
<div class="top-box">1</div>
|
||||
<div class="top-box">2</div>
|
||||
<div class="top-box">0</div>
|
||||
<div class="top-box">0</div>
|
||||
<div class="top-box">0</div>
|
||||
<div class="unit">(台)</div>
|
||||
</div>
|
||||
<div class="right-top-item3 right-top-item">
|
||||
<div class="item-left">
|
||||
<div class="icon"></div>
|
||||
服务企业总数量
|
||||
</div>
|
||||
<div class="data">215</div>
|
||||
<div class="unit">(家)</div>
|
||||
</div>
|
||||
<div class="right-top-item4 right-top-item">
|
||||
<div class="item-left">
|
||||
<div class="icon"></div>
|
||||
提前预警总量
|
||||
</div>
|
||||
<div class="data color-yellow">23</div>
|
||||
<div class="unit">(次)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box echarts2">
|
||||
<div class="box-title">企业走访、试点、签约历史趋势</div>
|
||||
<div id="echarts2" style="height: 250px"></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">项目设备数量（金额）趋势</div>
|
||||
<div id="echarts3" style="height: 250px"></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-title">服务企业行业比例</div>
|
||||
<div id="chart-panel" style="height: 400px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 滚动条数据框 -->
|
||||
<div class="roll-box">
|
||||
<div class="roll-box-select"></div>
|
||||
<div class="roll-box-move"></div>
|
||||
</div>
|
||||
<!-- 滚动条按钮框 -->
|
||||
<div class="roll-box-top">
|
||||
<!-- <div class="roll-box-select"></div> -->
|
||||
<div class="roll-item-top" id="downItem1"></div>
|
||||
<div class="roll-item-top" id="downItem2"></div>
|
||||
<div class="roll-item-top" id="openItem"></div>
|
||||
<div class="roll-item-top" id="upItem1"></div>
|
||||
<div class="roll-item-top" id="upItem2"></div>
|
||||
</div>
|
||||
|
||||
<div class="flat-box">
|
||||
<div id="next-button"></div>
|
||||
<div id="flat-box-front">
|
||||
<div class="flat-box-title">台州市瑞达机械有限公司</div>
|
||||
<div class="flat-box-data">
|
||||
<div class="data-firm-img"></div>
|
||||
<div class="data-firm-data">
|
||||
<!-- <img src="./sc/企业图片.png" alt="" > -->
|
||||
台州市瑞达机械有限公司成立于1995年，
|
||||
专注于汽车零配件行业20余年。2015年。开始给爱信宏达汽车零部件有限公司（日本独资）
|
||||
供水泵机油泵和硅油风扇离合器等产品。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="flat-box-back">
|
||||
<div class="flat-box-title">台州市瑞达机械有限公司</div>
|
||||
<div class="flat-box-data">
|
||||
<div class="data-firm-img"></div>
|
||||
<div class="data-firm-data">
|
||||
台州市瑞达机械有限公司成立于1995年，
|
||||
专注于汽车零配件行业20余年。2015年。开始给爱信宏达汽车零部件有限公司（日本独资）
|
||||
供水泵机油泵和硅油风扇离合器等产品。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="city-plan">
|
||||
<div class="box-title">标杆项目进度</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
268
right.html
Normal file
@@ -0,0 +1,268 @@
|
||||
<!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>
|
||||
<script src="./echarts.js"></script>
|
||||
<script src="./echarts-gl.min.js"></script>
|
||||
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script type="module" src="./getPie3D.js"></script>
|
||||
<link rel="stylesheet" href="./left.css">
|
||||
<script type="module" src="./right.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 内层左侧盒子 -->
|
||||
<div class="content content-left">
|
||||
<div class="box ">
|
||||
<div class="box-title">企业介绍</div>
|
||||
<div class="firm-introduce">
|
||||
<div class="data-firm-img"></div>
|
||||
<div class="data-firm-text">
|
||||
公司拥有磨超加工自动生产线、装配自动生产线和其它先进的生产加工设备600多台套，采用了套圈冷辗扩、保持架氮化处理等先进的工艺和技术，对套圈进行100%探伤检查。公司的计量分析、检测试验手段完备，被认定为二级计量单位。
|
||||
</div>
|
||||
</div>
|
||||
<div class="firm-name">台州市瑞达机械有限公司</div>
|
||||
</div>
|
||||
<div class="box item-introduce">
|
||||
<div class="box-title">项目介绍</div>
|
||||
<div class="item-img"></div>
|
||||
<div class="introduce-item-list">
|
||||
<div class="introduce-item">
|
||||
<div class="title">
|
||||
<div class="icon"></div>车间透明化
|
||||
</div>
|
||||
<div class="data">通过物联技术自动采集车间设备（压铸、机加）的生产数据</div>
|
||||
</div>
|
||||
<div class="introduce-item">
|
||||
<div class="title">
|
||||
<div class="icon"></div>生产可追溯
|
||||
</div>
|
||||
<div class="data">充分利用条码技术，实现从压铸-机加-装配全流程可追溯。</div>
|
||||
</div>
|
||||
<div class="introduce-item">
|
||||
<div class="title">
|
||||
<div class="icon"></div>数据可视化
|
||||
</div>
|
||||
<div class="data">提供全面的数据驾驶舱服务，包括综合驾驶舱车间驾驶舱、生产驾驶舱、质量驾驶舱等主题，并扩展支持自定义BI内容</div>
|
||||
</div>
|
||||
<div class="introduce-item">
|
||||
<div class="title">
|
||||
<div class="icon"></div>决策数据化
|
||||
</div>
|
||||
<div class="data">为企业后续管理优化、产能扩充、现场例会提供精准的数据支撑，并预留人工智能算法接口辅助决策制定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box scene-result">
|
||||
<div class="box-title ">现场效果</div>
|
||||
<div class="img-matrix">
|
||||
<div class="scene-img-box">
|
||||
<div class="scene-img scene-img1"></div>
|
||||
</div>
|
||||
<div class="scene-img-box">
|
||||
<div class="scene-img scene-img2"></div>
|
||||
</div>
|
||||
<div class="scene-img-box">
|
||||
<div class="scene-img scene-img3"></div>
|
||||
</div>
|
||||
<div class="scene-img-box">
|
||||
<div class="scene-img scene-img4"></div>
|
||||
</div>
|
||||
<!-- <div class="scene-img-box-one"><div class="scene-img scene-img0"></div></div> -->
|
||||
<!-- <div class="scene-img-box-two">
|
||||
<div class="scene-img scene-img01"></div>
|
||||
</div>
|
||||
<div class="scene-img-box-two">
|
||||
<div class="scene-img scene-img02"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内层右侧盒子 -->
|
||||
<div class="content content-right">
|
||||
<div class="box">
|
||||
<div class="box-title ">项目成效</div>
|
||||
<div class="item-effect">
|
||||
<div class="name">项目运行时间</div>
|
||||
<div class="hint"></div>
|
||||
<div class="data">100</div>
|
||||
<div class="unit">(天)</div>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<div class="item-effect">
|
||||
<div class="name">设备产能</div>
|
||||
<div class="hint">提升</div>
|
||||
<div class="data">40</div>
|
||||
<div class="unit">(%)</div>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<div class="item-effect">
|
||||
<div class="name">项目运行时间</div>
|
||||
<div class="hint">节约</div>
|
||||
<div class="data">12</div>
|
||||
<div class="unit">(%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box appoint-data-board">
|
||||
<div class="box-title">定制数据展板</div>
|
||||
<div class="appointBox">
|
||||
<div class="appoint-img"></div>
|
||||
<div class="appoint-data">
|
||||
<div class="title">杰克顶尖产线数字看板</div>
|
||||
<div class="text">根据杰克顶尖产线原型1:1建模，对接上数采盒子数据，实现看板上设备与现场实时同步。另外通过数采盒子，采集设备内部关键数据，实时图表展示。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appoint-point">
|
||||
<div class="point select"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内层项目实施进度 -->
|
||||
<div class="box item-plan item-implement-plan">
|
||||
<div class="box-title">项目实施进度</div>
|
||||
<div class="item-implement-plan-box">
|
||||
<div class="plan-top">
|
||||
<div class="title">本月计划完成度</div>
|
||||
<div class="title-unit">
|
||||
<div class="left">本月</div>
|
||||
<div class="right"> / 上月</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="select"></div>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="bar-left">
|
||||
<div class="left">32</div>
|
||||
<div class="right">/ 47</div>
|
||||
</div>
|
||||
<div class="bar-right">
|
||||
<div class="dot select"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-data-list">
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/30</div>
|
||||
<div class="data">二期研发实施</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/28</div>
|
||||
<div class="data">阶段性平台审核检查</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/27</div>
|
||||
<div class="data">相关车间看板定制</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/25</div>
|
||||
<div class="data">功能盒子检验</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/23</div>
|
||||
<div class="data">平台需求修改、验收打款</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/20</div>
|
||||
<div class="data">二期软件定制研发</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/14</div>
|
||||
<div class="data">开发进度汇报</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/09</div>
|
||||
<div class="data">平台需求整理</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/03</div>
|
||||
<div class="data">界面商务详谈</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="year">2022</div>
|
||||
<div class="date">09/01</div>
|
||||
<div class="data">现场错误设备勘察</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右上角日期时间 -->
|
||||
<div class="top-right-timeBox">
|
||||
<div class="time">12:02:30</div>
|
||||
<div class="dateBox">
|
||||
<div class="month">Sep</div>
|
||||
<div class="date">2022.09.22</div>
|
||||
</div>
|
||||
<div class="long-string"></div>
|
||||
<div class="img"></div>
|
||||
</div>
|
||||
<!-- 左上角企业logo -->
|
||||
<div class="top-left-firm-logo">瑞达机械项目</div>
|
||||
|
||||
<!-- 底部数据统计 -->
|
||||
<div class="bottom-data-count">
|
||||
<div class="count-left">
|
||||
<div class="title">稼动率趋势</div>
|
||||
<div id="trend"></div>
|
||||
</div>
|
||||
|
||||
<div class="count-center-left">
|
||||
<div class="top-data">
|
||||
<div class="top">
|
||||
<div class="icon"></div>工作
|
||||
</div>
|
||||
<div class="data">75</div>
|
||||
</div>
|
||||
<div class="top-data">
|
||||
<div class="top">
|
||||
<div class="icon orange"></div>故障
|
||||
</div>
|
||||
<div class="data">30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-center">
|
||||
<div class="center-top">数据统计</div>
|
||||
<div class="center-center">
|
||||
<div class="name">设备总数</div>
|
||||
<div class="data">230</div>
|
||||
</div>
|
||||
<div id="count-circle"></div>
|
||||
</div>
|
||||
<div class="count-center-left right">
|
||||
<div class="top-data">
|
||||
<div class="top">
|
||||
<div class="icon gray"></div>离线
|
||||
</div>
|
||||
<div class="data">90</div>
|
||||
</div>
|
||||
<div class="top-data">
|
||||
<div class="top">
|
||||
<div class="icon yellow"></div>待机
|
||||
</div>
|
||||
<div class="data">35</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="count-right">
|
||||
<div class="title">用电量趋势</div>
|
||||
<div id="electricityTrend"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
277
right.js
Normal file
@@ -0,0 +1,277 @@
|
||||
// 获取时间
|
||||
// 单位数字补零
|
||||
function figureAdd0(e) {
|
||||
e = e + "";
|
||||
if (e.length == 1) return "0" + e;
|
||||
return e;
|
||||
}
|
||||
|
||||
// 实时更新时间
|
||||
setInterval(function () {
|
||||
let vWeek, nowDate, year, month, day, hours, minutes, seconds, nowTime;
|
||||
vWeek = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Aug", "Jul", "Sep", "Oct", "Nov", "Dec"];
|
||||
let date = new Date();
|
||||
year = date.getFullYear(); //得到年份
|
||||
month = figureAdd0(date.getMonth() + 1); //得到月份
|
||||
day = figureAdd0(date.getDate()); //得到日期
|
||||
hours = figureAdd0(date.getHours()); //得到小时数
|
||||
minutes = figureAdd0(date.getMinutes()); //得到分钟数
|
||||
seconds = figureAdd0(date.getSeconds()); //得到秒数
|
||||
vWeek = vWeek[date.getMonth()];
|
||||
nowDate = year + "." + month + "." + day;
|
||||
nowTime = hours + ":" + minutes + ":" + seconds;
|
||||
$(".top-right-timeBox .time").text(nowTime)
|
||||
$(".top-right-timeBox .month").text(vWeek)
|
||||
$(".top-right-timeBox .date").text(nowDate)
|
||||
}, 1000);
|
||||
|
||||
var date = new Date();
|
||||
var hours = date.getHours(); //得到小时数
|
||||
var nowHoursList = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
let nowHours = figureAdd0(indexMinus(hours, i * 2, 24)) + ":00"
|
||||
// console.log(nowHours);
|
||||
nowHoursList.unshift(nowHours)
|
||||
}
|
||||
|
||||
// 渲染进度条点
|
||||
for (let i = 1; i <= 47; i++) {
|
||||
if (i <= 32) {
|
||||
$(".bar-right").append(`<div class="dot select"></div>`)
|
||||
} else {
|
||||
$(".bar-right").append(`<div class="dot"></div>`)
|
||||
}
|
||||
}
|
||||
|
||||
// trend 稼动率趋势 初始化
|
||||
var trend = document.getElementById('trend');
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color: '#ddd'
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
data: nowHoursList
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',//虚线
|
||||
color: "rgba(1,130,255,.2)"
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [70, 64, 52, 42, 35, 68, 56],
|
||||
type: 'line',
|
||||
color: '#0171E3',
|
||||
// 鼠标移上显示折点
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: "rgba(1,130,255,.3)"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// trend 渲染
|
||||
var trend = echarts.init(trend);
|
||||
trend.setOption(option);
|
||||
|
||||
// electricityTrend 用电量趋势 初始化
|
||||
var electricityTrend = document.getElementById('electricityTrend');
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['当日', '昨日'],
|
||||
left: 20,
|
||||
top: 25,
|
||||
itemHeight: 10, //图标大小
|
||||
itemWidth: 10,
|
||||
icon: 'rect',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color: '#ddd'
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
data: nowHoursList
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',//虚线
|
||||
color: "rgba(1,130,255,.2)"
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '当日',
|
||||
data: [70, 64, 52, 42, 35, 68, 56],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
color: '#0171E3',
|
||||
showSymbol: false,
|
||||
},
|
||||
{
|
||||
name: '昨日',
|
||||
data: [48, 51, 45, 69, 77, 68, 32],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
color: '#00E9ED',
|
||||
// 鼠标移上显示折点
|
||||
showSymbol: false,
|
||||
}
|
||||
]
|
||||
};
|
||||
// trend 渲染
|
||||
var electricityTrend = echarts.init(electricityTrend);
|
||||
electricityTrend.setOption(option);
|
||||
|
||||
// count-circle 数据统计 初始化
|
||||
var electricityTrend = document.getElementById('count-circle');
|
||||
option = {
|
||||
title: {
|
||||
text: '',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
// 主标题样式
|
||||
fontSize: 35
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
color: ['rgb(247,205,112)', 'rgb(235,87,7)', 'rgb(170,170,170)', 'rgb(0,128,255)',],
|
||||
itemStyle: {
|
||||
// borderRadius: 20,
|
||||
borderColor: 'rgba(0,11,47,1)',
|
||||
borderWidth: 10,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
emphasis: {
|
||||
// show: true
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
data: [{ value: 35 }, { value: 30 }, { value: 90 }, { value: 78 }]
|
||||
}
|
||||
]
|
||||
};
|
||||
// count-circle 渲染
|
||||
var electricityTrend = echarts.init(electricityTrend);
|
||||
electricityTrend.setOption(option);
|
||||
|
||||
//定制数据看板的切换
|
||||
let isShowAppointFront = true;
|
||||
var appointItemRollId = 0;
|
||||
function createBoardImgList(dataList) {
|
||||
$(`.appointBox .appoint-img`).css({ "background": `url(./sc/${dataList[0].img}.png) no-repeat`, "background-size": "100% 100%" })
|
||||
$(`.appointBox .appoint-img`).click(function () {
|
||||
window.open(dataList[0].url, "_blank");
|
||||
})
|
||||
$(`.appoint-data .title`).text(dataList[0].title)
|
||||
$(`.appoint-data .text`).text(dataList[0].text)
|
||||
|
||||
|
||||
if (dataList.length <= 1) {
|
||||
$(`.appoint-data-board .appoint-point`).html(`<div class="point select"></div>`)
|
||||
} else {
|
||||
$(`.appoint-data-board .appoint-point`).html(`<div class="point select"></div><div class="point"></div>`)
|
||||
|
||||
function appointCutData() {
|
||||
$(`.appointBox`).animate({ 'opacity': 0 }, 300, function () {
|
||||
if (isShowAppointFront) {
|
||||
//去除绑定的跳转方法
|
||||
$(`.appointBox .appoint-img`).unbind("click");
|
||||
$(`.appointBox .appoint-img`).css({ "background": `url(./sc/${dataList[1].img}.png) no-repeat`, "background-size": "100% 100%" })
|
||||
$(`.appointBox .appoint-img`).click(function () {
|
||||
window.open(dataList[1].url, "_blank");
|
||||
})
|
||||
$(`.appoint-data .title`).text(dataList[1].title)
|
||||
$(`.appoint-data .text`).text(dataList[1].text)
|
||||
$(`.appoint-data-board .appoint-point`).html(`</div><div class="point"></div><div class="point select">`)
|
||||
} else {
|
||||
//去除绑定的跳转方法
|
||||
$(`.appointBox .appoint-img`).unbind("click");
|
||||
$(`.appointBox .appoint-img`).css({ "background": `url(./sc/${dataList[0].img}.png) no-repeat`, "background-size": "100% 100%" })
|
||||
$(`.appointBox .appoint-img`).click(function () {
|
||||
window.open(dataList[0].url, "_blank");
|
||||
})
|
||||
$(`.appoint-data .title`).text(dataList[0].title)
|
||||
$(`.appoint-data .text`).text(dataList[0].text)
|
||||
$(`.appoint-data-board .appoint-point`).html(`<div class="point select"></div><div class="point"></div>`)
|
||||
}
|
||||
isShowAppointFront = !isShowAppointFront;
|
||||
$(`.appointBox , .appoint-point`).animate({ 'opacity': 1 }, 300);
|
||||
});
|
||||
}
|
||||
|
||||
appointItemRollId = setInterval(function () {
|
||||
appointCutData();
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
}
|
||||
let appointDataList = [{
|
||||
img: "八环看板2",
|
||||
title: "八环集中供水数字化看板",
|
||||
text: "对八环全厂的水电气全面进行数字化改造，实现水电气的数据实时采集和上发。通过看板全面直观了解整体能源使用状况。",
|
||||
url: "https://www.taizhouyunzao.com/lantingNewB//admin/views/boardManagement/bhBoard1.html?61977339C173AA06DACC56F4BFF8A1FA"
|
||||
}, {
|
||||
img: "八环看板",
|
||||
title: "八环企业专题看板",
|
||||
text: "为八环打造的专题宣传看板。",
|
||||
url: "http://36.134.182.98:8081/board/er/index.html"
|
||||
}];
|
||||
createBoardImgList(appointDataList);
|
||||
|
||||
// 减计算方法
|
||||
function indexMinus(nowIndex, size, max) {
|
||||
let num = nowIndex - size;
|
||||
if (num <= -1) {
|
||||
if (max == null) {
|
||||
num = citys.length + (nowIndex - size);
|
||||
} else {
|
||||
num = max + (nowIndex - size);
|
||||
}
|
||||
}
|
||||
return num;
|
||||
}
|
||||
BIN
sc/LOGO.png
Normal file
|
After Width: | Height: | Size: 8.2 KiB |
BIN
sc/logo中豪.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
sc/logo五峰.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
sc/logo八环.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
sc/logo天信.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
sc/logo杰克.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
sc/logo永球.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
sc/中豪现场1.jpg
Normal file
|
After Width: | Height: | Size: 211 KiB |
BIN
sc/中间背景框.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
sc/五峰1.png
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
sc/五峰看板.png
Normal file
|
After Width: | Height: | Size: 462 KiB |
BIN
sc/企业图片.png
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
sc/八环现场1.png
Normal file
|
After Width: | Height: | Size: 389 KiB |
BIN
sc/八环现场2.jpg
Normal file
|
After Width: | Height: | Size: 522 KiB |
BIN
sc/八环看板.png
Normal file
|
After Width: | Height: | Size: 889 KiB |
BIN
sc/八环看板2.png
Normal file
|
After Width: | Height: | Size: 962 KiB |
BIN
sc/占位图.png
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
sc/占位照片1.png
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
sc/占位照片2.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
sc/占位照片3.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
sc/占位照片4.png
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
sc/圆环背景图.png
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
sc/坐标-fill.png
Normal file
|
After Width: | Height: | Size: 262 B |
BIN
sc/天信现场1.png
Normal file
|
After Width: | Height: | Size: 1.6 MiB |
BIN
sc/小标题框.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
sc/小标题花纹.png
Normal file
|
After Width: | Height: | Size: 285 B |
BIN
sc/市下现场1.png
Normal file
|
After Width: | Height: | Size: 274 KiB |
BIN
sc/市下现场2.png
Normal file
|
After Width: | Height: | Size: 284 KiB |
BIN
sc/市下现场3.png
Normal file
|
After Width: | Height: | Size: 315 KiB |
BIN
sc/市下现场4.jpg
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
sc/弹窗框.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
sc/文字框.png
Normal file
|
After Width: | Height: | Size: 566 B |
BIN
sc/杰克现场1.png
Normal file
|
After Width: | Height: | Size: 376 KiB |
BIN
sc/杰克现场2.jpg
Normal file
|
After Width: | Height: | Size: 122 KiB |
BIN
sc/杰克现场3.jpg
Normal file
|
After Width: | Height: | Size: 149 KiB |
BIN
sc/杰克现场4.jpg
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
sc/杰克看板.png
Normal file
|
After Width: | Height: | Size: 798 KiB |
BIN
sc/照片框.png
Normal file
|
After Width: | Height: | Size: 417 B |
BIN
sc/瑞达看板.png
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
sc/聚星现场1.jpg
Normal file
|
After Width: | Height: | Size: 165 KiB |
BIN
sc/背景框1.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
sc/背景框2.png
Normal file
|
After Width: | Height: | Size: 8.6 KiB |
BIN
sc/背景蒙版.png
Normal file
|
After Width: | Height: | Size: 177 KiB |
BIN
sc/轮播图片1.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
sc/运维阶段.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
sc/进行标签.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
sc/选中框.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
sc/选中框中空.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
sc/非选择框.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
sc/项目列表点.png
Normal file
|
After Width: | Height: | Size: 304 B |
BIN
台州-改-内层.png
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
