chenzhiguang
/
smartCity


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style/reset.css" />
    <link rel="stylesheet" href="style/public.css" />
    <link rel="stylesheet" href="style/security.css" />
    <link rel="stylesheet" href="font/iconfont.css" />
    <title>Document</title>
  </head>

  <body>
    <header class="title">
      <i class="iconfont iconanquanbaozhang"></i>
      安全保障
    </header>
    <div class="line"></div>
    <section class="s1">
      <div class="card" id="gongshang"></div>
      <div class="card">
        <div class="s-title"><h2>本日信息安全形势 *</h2></div>
        <div class="f-item">
          <span>公安治安</span>
          <span class="emphasize">2(起)</span>
        </div>
        <div class="f-item">
          <span>交通事故</span>
          <span class="emphasize">4(起)</span>
        </div>
        <div class="f-item">
          <span>火灾事故</span>
          <span class="emphasize">0(起)</span>
        </div>
        <div class="f-item">
          <span>刑事案件</span>
          <span class="emphasize">2(起)</span>
        </div>
      </div>
    </section>
    <div class="line"></div>

    <section class="s2">
      <div class="card jiaotong">
        <div class="s-title"><h2>实时事件推送 *</h2></div>
        <div class="jiaotong-table">
          <div class="t-header">
            <span>单位</span>
            <span>情况</span>
            <span>巡查日期</span>
            <span>巡查部门</span>
            <span>整改期限</span>
          </div>
          <div class="t-main">
            <div class="t-body">
              <span>江门市东湖影剧院</span>
              <span>公共设施损坏</span>
              <span>2019-03-24</span>
              <span>蓬江城管大队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>江门市体育场</span>
              <span>群体斗殴事件</span>
              <span>2019-03-24</span>
              <span>市公安局</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>东湖公园</span>
              <span>公共设施损坏</span>
              <span>2019-03-24</span>
              <span>蓬江城管大队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>迎宾大道中</span>
              <span>交通拥堵</span>
              <span>2019-03-24</span>
              <span>蓬江交警支队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>东城街</span>
              <span>交通事故</span>
              <span>2019-03-24</span>
              <span>蓬江交警支队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>港口一号</span>
              <span>交通事故</span>
              <span>2019-03-24</span>
              <span>蓬江交警支队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>东湖广场</span>
              <span>公共设施损坏</span>
              <span>2019-03-24</span>
              <span>蓬江城管大队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>东城苑</span>
              <span>群体斗殴事件</span>
              <span>2019-03-24</span>
              <span>市公安局</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>丰乐社区</span>
              <span>公共设施损坏</span>
              <span>2019-03-24</span>
              <span>蓬江城管大队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>五邑大学台山楼</span>
              <span>公共设施损坏</span>
              <span>2019-03-24</span>
              <span>蓬江城管大队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>蓬莱路</span>
              <span>交通拥堵</span>
              <span>2019-03-24</span>
              <span>蓬江交警支队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>江门市老干部大学</span>
              <span>公共设施损坏</span>
              <span>2019-03-24</span>
              <span>蓬江城管大队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>江门公汽中心站</span>
              <span>群体斗殴事件</span>
              <span>2019-03-24</span>
              <span>市公安局</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>金山大厦</span>
              <span>公共设施损坏</span>
              <span>2019-03-24</span>
              <span>蓬江城管大队</span>
              <span>2019-03-30</span>
            </div>
            <div class="t-body">
              <span>欧胜利啤酒餐吧</span>
              <span>餐饮卫生异常</span>
              <span>2019-03-24</span>
              <span>市市场监督局</span>
              <span>2019-03-30</span>
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="card" id="gdp"></div>
      <div class="card" id="outIn">
        <div class="s-title f-weight">隐患分类统计 *</div>
        <div class="yinhuan">
          <div class="yinhuan-l">火灾（80%）</div>
          <div class="yinhuan-r">
            <div class="yinhuan-1">
              爆炸、中毒和窒息、水害、机械伤害等（10%）
            </div>
            <div class="yinhuan-2">交通事故（5%）</div>
            <div class="yinhuan-3">其他（5%）</div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="card" id="addVal"></div>
      <div class="card" id="xiaofei"></div>
    </section>

    <script src="js/echarts.min.js"></script>
    <script>
      (function() {
        let gdpOption = {
          title: {
            text: "监控设备数量分布",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ffffff", "#ffe354", "#ff9a32","#95d94c", "#fd022f",],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          series: [
            {
              name: "火灾发生数",
              type: "pie",
              radius: "50%",
              center: ["50%", "60%"],
              data: [
                { value: 2, name: "井盖\n监控" },
                { value: 4, name: "人流\n监控" },
                { value: 8, name: "公交\nGPS" },
                { value: 20, name: "车流\n监控" },
                { value: 12, name: "烟感\n探测" }
              ],
              label: {
                normal: {
                  show: true,
                  // position: 'center',
                  fontSize: 12
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              }
            }
          ]
        };

        let addValOption = {
          title: {
            text: "消防事故数量统计 *",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ffe354", "#ff9a32"],
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["事故次数"],
            x: "0%",
            y: "85%",
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: "2%",
            right: "4%",
            bottom: "15%",
            top: "20%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              data: ["2013", "2014", "2015", "2016", "2017"],
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#ffffff"
                }
              }
            }
          ],
          series: [
            {
              name: "事故次数",
              type: "bar",
              data: [100, 120, 160, 200, 130]
            }
          ]
        };

        let xiaofeiOption = {
          title: {
            text: "火灾事故成因分类 *",
            textStyle: {
              color: "#fff"
            }
          },
          color: ["#ffffff", "#ffe354", "#ff9a32", "#fd022f"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          series: [
            {
              name: "火灾发生数",
              type: "pie",
              radius: "50%",
              center: ["50%", "60%"],
              data: [
                { value: 2, name: "重大火灾\n发生数2\n（起）" },
                { value: 4, name: "较大火灾\n发生数4\n（起）" },
                { value: 1, name: "特大火灾\n发生数1\n（起）" },
                { value: 12, name: "一般火灾\n发生数12\n（起）" }
              ],
              label: {
                normal: {
                  show: true,
                  // position: 'center',
                  fontSize: 12
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              }
            }
          ]
        };

        let gongshangOption = {
          title: {
            text: "公共安全指数 *",
            textStyle: {
              color: "#fff"
            }
          },
          series: [
            {
              type: "gauge",
              radius: "100%",
              center: ["50%", "68%"],

              splitNumber: 0, //刻度数量
              startAngle: 220,
              endAngle: -40,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 20,
                  color: [[0.68, "#ffe354"], [1, "#ccc"]]
                }
              },
              //分隔线样式。
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              pointer: {
                show: false
              },
              title: {
                show: true,
                offsetCenter: [0, "20%"], // x, y，单位px
                textStyle: {
                  color: "#01d4ea",
                  fontSize: 10
                }
              },
              //仪表盘详情，用于显示数据。
              detail: {
                show: true,
                offsetCenter: [0, "-20%"],
                color: "#fff",
                formatter: function(params) {
                  return params;
                },
                textStyle: {
                  fontSize: 18,
                  fontWeight: "bold"
                }
              },
              data: [
                {
                  name: "温馨提示：可以正常在\n户外运动，易敏感人群减\n少外出",
                  value: 90.6,
                  textStyle: {
                    fontSize: 18
                  }
                }
              ]
            }
          ]
        };

        let gdpChart = echarts.init(document.querySelector("#gdp"));
        let addValChart = echarts.init(document.querySelector("#addVal"));
        let xiaofeiChart = echarts.init(document.querySelector("#xiaofei"));
        let gongshangChart = echarts.init(document.querySelector("#gongshang"));

        gdpChart.setOption(gdpOption);
        addValChart.setOption(addValOption);
        xiaofeiChart.setOption(xiaofeiOption);
        gongshangChart.setOption(gongshangOption);
      })();
      let arr = Array.from(document.querySelectorAll(".s1 .card")).concat(
        Array.from(document.querySelectorAll(".s2 .card"))
      );
      arr.forEach((dom, index) => {
        dom.addEventListener("click", e => {
          console.log("securityClickHandle", index);
          window.securityClickHandle && window.securityClickHandle(index);
        });
      });

      let $scroll = document.querySelector(".t-main");
      let last;
      setInterval(() => {
        if ($scroll.scrollTop === last) {
          $scroll.scrollTop = 0;
        }
        last = $scroll.scrollTop;
        $scroll.scrollTop += 1;
      }, 50);
    </script>
  </body>
</html>