chenzhiguang
/
smartCity


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
							<!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">
          <img class="icon" src="./images/icon-jg.svg" />
          <span>井盖传感图层</span>
        </div>
        <div class="manhole">
          <img src="./images/manhole.png" alt="" />
        </div>
      </div>
      <div class="line"></div>
      <div class="card">
        <div class="s-title f-weight">
          <img class="icon" src="./images/icon-jk.svg" />
          <span>重点监控图层</span>
        </div>
        <div class="jiankong">
          <video
            id="testPlayer"
            poster=""
            controls
            playsInline
            webkit-playsinline
            autoplay="autoplay"
          >
            <source
              src="http://gz2play.95787.com/sx/gnFe37Och0oyb12RvJTMumpdG.m3u8"
              type="application/x-mpegURL"
            />
          </video>
        </div>
      </div>
      <div class="card">
        <div class="s-title f-weight">
          <img class="icon" src="./images/icon-hj.svg" />
          <span>火警探测报警</span>
        </div>
        <div id="xiaofei"></div>
      </div>
    </section>

    <script src="js/echarts.min.js"></script>
    <script src="js/ezuikit.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 = {
            series: [
              {
                textStyle: {
                    color: '#fff'
                },
                type: "gauge",
                radius: "100%",
                center: ["50%", "60%"],
                splitNumber: 15,
                min: 0,
                max: 300,
                splitNumber: 0, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 12,
                    color: [
                        [0.2, '#e78b28'],
                        [0.8, '#42b2b4'],
                        [1.0, '#e8493c']
                    ],
                  }
                },
                //分隔线样式。
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: false,
                  textStyle: {
                      color: '#fff'
                  },
                },
                axisTick: {
                  show: false
                },
                pointer: {
                    show: true,
                    width: "8%",
                    length: '70%'
                },
                itemStyle:{
                  color:'#42b2b4'
                },
                title: {
                  show: true,
                  offsetCenter: [0, "65%"], // x, y，单位px
                  textStyle: {
                    color: "#fff",
                    fontSize: 12
                  }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                  show: false,
                  offsetCenter: [0, "40%"],
                  color: "#fff",
                  formatter: function(params) {
                    return params;
                  },
                  textStyle: {
                    fontSize: 18,
                    fontWeight: "bold"
                  }
                },
                data: [
                  {
                    name: "【仪表盘】\n报警探测仪温度137℃",
                    value: 63,
                    textStyle: {
                      fontSize: 18,
                      color:"#fff"
                    }
                  }
                ]
              }
            ]
        };

        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);
      })();
      
      var player = new EZUIPlayer("testPlayer");
      player.on("error", function() {
        console.log("error");
      });
      player.on("play", function() {
        console.log("play");
      });
      player.on("pause", function() {
        console.log("pause");
      });
      
      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>