|
|
@@ -53,6 +53,12 @@
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
+ .pie-chart-box {
|
|
|
+ border-top: 1px solid #d7d7d7;
|
|
|
+ border-bottom: 1px solid #d7d7d7;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
|
|
|
</style>
|
|
|
<body data-type="index">
|
|
|
@@ -349,22 +355,12 @@
|
|
|
<li><a href="#">数据中心</a></li>
|
|
|
<li class="am-active">数据汇总分析</li>
|
|
|
</ol>
|
|
|
- <!--<div class="tpl-content-scope">-->
|
|
|
- <!--<div class="note note-info">-->
|
|
|
- <!--<h3>绿建能耗监测平台-->
|
|
|
- <!--<span class="close" data-close="note"></span>-->
|
|
|
- <!--</h3>-->
|
|
|
- <!--<!– <p> Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。</p>-->
|
|
|
- <!--<p><span class="label label-danger">提示:</span> Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果。</p> –>-->
|
|
|
- <!--</div>-->
|
|
|
- <!--</div>-->
|
|
|
|
|
|
|
|
|
<div class="am-u-md-12 am-u-sm-12 right-box-class">
|
|
|
|
|
|
|
|
|
<div class="am-u-md-12 am-u-sm-12">
|
|
|
-
|
|
|
<div class="am-u-md-9 am-u-sm-12">
|
|
|
<div class="am-u-lg-2 am-u-md-6 am-u-sm-12 width-20">
|
|
|
<div class="dashboard-stat green">
|
|
|
@@ -438,20 +434,18 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="am-u-md-3 am-u-sm-12">
|
|
|
- <div class="am-u-lg-12 am-u-md-12 am-u-sm-12">
|
|
|
+ <div class="bold font-size-15">
|
|
|
数据汇总分析
|
|
|
</div>
|
|
|
<div class="am-u-lg-10 am-u-md-8 am-u-sm-8 diplay-flex-start right-light-box">
|
|
|
<img src="../assets/img/self/light.png" alt="" style="width: 30px;height: 30px;margin-right: 10px">
|
|
|
- <div>对所有接入项目单位的监测数据进行汇总统计分析、查阅</div>
|
|
|
+ <div class="font-size-15" style="color:#3AA3D3">对所有接入项目单位的监测数据进行汇总统计分析、查阅</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="am-u-md-12 am-u-sm-12">
|
|
|
-
|
|
|
<div class="am-u-md-9 am-u-sm-12">
|
|
|
<table class="width-100">
|
|
|
<tr>
|
|
|
@@ -507,11 +501,36 @@
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
- <div class="am-u-md-3 am-u-sm-12">
|
|
|
+ <div class="am-u-md-3 am-u-sm-12 font-size-15">
|
|
|
+ <div class="bold">相关资料</div>
|
|
|
+ <div style="color: #949AA0;">点击下面链接,查看相关信息</div>
|
|
|
+ <div class="display-flex-column right-list">
|
|
|
+ <a href="#" class="margin-top-20 margin-bottom-20">接入项目总览</a>
|
|
|
+ <a href="#">能耗总览</a>
|
|
|
+ <a href="#">单项能耗分析(电)</a>
|
|
|
+ <a href="#">单项能耗分析(水)</a>
|
|
|
+ <a href="#">单项能耗分析(气)</a>
|
|
|
+ <a href="#">单项能耗分析(油)</a>
|
|
|
+ <a href="#" class="margin-top-20 margin-bottom-20">碳排放</a>
|
|
|
+ <a href="#">定额分析</a>
|
|
|
+ <a href="#">超标项目名单</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
+
|
|
|
+ <div class="am-u-md-12 am-u-sm-12">
|
|
|
+ <div class="am-u-md-9 am-u-sm-12">
|
|
|
+ <!--此部分数据请在 js文件夹下中的 app.js 中的 “百度图表A” 处修改数据 插件使用的是 百度echarts-->
|
|
|
+ <div class="tpl-echarts pie-chart-box" id="chart-pie">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="am-u-md-3 am-u-sm-12">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -526,10 +545,69 @@
|
|
|
</div>
|
|
|
|
|
|
|
|
|
-<script src="../assets/js/jquery-2.1.1.js"></script>
|
|
|
-<script src="../assets/js/amazeui.min.js"></script>
|
|
|
-<script src="../assets/js/iscroll.js"></script>
|
|
|
-<script src="../assets/js/app.js"></script>
|
|
|
+<script>
|
|
|
+ let chartDom = document.getElementById('chart-pie');
|
|
|
+ let myChart = echarts.init(chartDom);
|
|
|
+ let option;
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: '辖区项目统计',
|
|
|
+ // subtext: 'Fake Data',
|
|
|
+ left: '50%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ bottom:'30%',
|
|
|
+ right:'20%',
|
|
|
+ data: ['空港新城', '沣东新城', '秦汉新城', '沣西新城', '泾河新城', '能源金融贸易区']
|
|
|
+ },
|
|
|
+ color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: '65%',
|
|
|
+ center: ['40%', '50%'],
|
|
|
+ selectedMode: 'single',
|
|
|
+ data: [
|
|
|
+ { value: 735, name: '空港新城' },
|
|
|
+ { value: 510, name: '沣东新城' },
|
|
|
+ { value: 434, name: '秦汉新城' },
|
|
|
+ { value: 335, name: '沣西新城' },
|
|
|
+ { value: 1548,name: '泾河新城' },
|
|
|
+ { value: 1548,name: '能源金融贸易区' },
|
|
|
+ ],
|
|
|
+ itemStyle:{
|
|
|
+ normal:{
|
|
|
+ label:{
|
|
|
+ show: true,
|
|
|
+ formatter: '{b} : {c} ({d}%)',
|
|
|
+ //formatter: '{c}',
|
|
|
+ },
|
|
|
+ labelLine :{show:true}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+</script>
|
|
|
+
|
|
|
+<!--<script src="../assets/js/jquery-2.1.1.js"></script>-->
|
|
|
+<!--<script src="../assets/js/amazeui.min.js"></script>-->
|
|
|
+<!--<script src="../assets/js/iscroll.js"></script>-->
|
|
|
+<!--<script src="../assets/js/app.js"></script>-->
|
|
|
|
|
|
</body>
|
|
|
</html>
|
