chenzhiguang
/
smartCity


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
							<!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/manhole.css" />
    <link rel="stylesheet" href="font/iconfont.css" />
    <title>Document</title>
  </head>

  <body>
    <section class="s1">
      <div class="s-title">
        <h2>设备概况</h2>
        <span class="tag">丰乐社区</span>
      </div>
      <div class="s1-title">总计设备数量 <span>200台</span></div>
      <div class="e-con">
        <div>
          <div id="con1"></div>
          <div class="con-txt">掀翻</div>
        </div>
        <div>
          <div id="con2"></div>
          <div class="con-txt">抬起</div>
        </div>
        <div>
          <div id="con3"></div>
          <div class="con-txt">水浸</div>
        </div>
        <div>
          <div id="con4"></div>
          <div class="con-txt">正常</div>
        </div>
      </div>
    </section>
    <div class="line"></div>

    <section class="s2">
      <div class="s-title">
        <h2>设备趋势</h2>
        <span class="tag">丰乐社区</span>
      </div>
      <div class="s2-con">
        <div class="s2-left">
          <div class="sl-title">设备报警时间</div>
          <div class="sl-sub" style="color:#fe2a2a">1分钟前</div>
          <div class="sl-title">区域负责人值班电话</div>
          <div class="sl-sub">13417787373</div>
          <div class="sl-title">丰乐社区消防大队值班电话</div>
          <div class="sl-sub">0750-8555199</div>
        </div>
        <div class="s2-right" id="s2-e"</div>
      </div>
    </section>
    <div class="line"></div>

    <section class="s3">
      <div class="s-title">
        <h2>设备列表</h2>
        <span class="tag">丰乐社区</span>
      </div>
      <div class="s3-select">
        <div>井盖传感器</div>
        <div>
          <select value="0" name="全部" id="select">
              <option value="0">全部</option>
              <option value="1">掀翻</option>
              <option value="2">抬起</option>
              <option value="3">水浸</option>
              <option value="4">正常</option>
          </select>
        </div>
      </div>
      <div class="jiaotong">
        <div class="jiaotong-table">
          <div class="t-header">
            <span>更新时间</span>
            <span>状态</span>
            <span>信号强度</span>
            <span>电量</span>
            <span>详情</span>
          </div>
          <div class="t-main">
          </div>
        </div>
      </div>
    </section>
    <div class="line"></div>

    <section class="s4">
      <div class="s-title">
        <h2>设备详情</h2>
        <span class="tag">AGE86ioj-35</span>
      </div>
      <div class="s4-con">
        <div class="s4-left" id="map"></div>
        <div class="s4-right">
        </div>
      </div>
    </section>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.10&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=e661b00bdf2c44cccf71ef6070ef41b8"></script>
    <script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

    <script>
      let equipment = [{
        time:"19.03.27 21.23.27",
        status:'掀翻',
        temperature:"强",
        quantity:'99%',
        id:1,
        detail:{
          name:"AGE67ioj-49",
          lanlat:[113.0842709541, 22.5944937320],
          xinghao:"AllRange1",
          status:"掀翻",
          color:'#fe2a2a',
          update:"1分钟前",
          xinhao:"强",
          quantity:'99%',
          position:"丰乐社区沂水街南段东城街路口"
        }
      },{
        time:"19.03.27 21.23.27",
        status:'抬起',
        temperature:"强",
        quantity:'99%',
        id:2,
        detail:{
          name:"AGE67ioj-49",
          lanlat:[113.0842709541, 22.5944937320],
          xinghao:"AllRange1",
          status:"抬起",
          color:'#04cd0d',
          update:"1分钟前",
          xinhao:"强",
          quantity:'99%',
          position:"丰乐社区沂水街南段东城街路口"
        }
      },{
        time:"19.03.27 21.23.27",
        status:'水浸',
        temperature:"强",
        quantity:'99%',
        id:3,
        detail:{
          name:"AGE67ioj-49",
          lanlat:[113.0842709541, 22.5944937320],
          xinghao:"AllRange1",
          status:"水浸",
          color:'#fdca3a',
          update:"1分钟前",
          xinhao:"强",
          quantity:'99%',
          position:"丰乐社区沂水街南段东城街路口"
        }
      },{
        time:"19.03.27 21.23.27",
        status:'正常',
        temperature:"弱",
        quantity:'99%',
        id:0,
        detail:{
          name:"AGE67ioj-49",
          lanlat:[113.0842709541, 22.5944937320],
          xinghao:"AllRange1",
          color:'#479eff',
          status:"正常",
          update:"1分钟前",
          xinhao:"弱",
          quantity:'99%',
          position:"丰乐社区沂水街南段东城街路口"
        }
      }];
      let fixStatus={
        0:'正常',
        1:'掀翻',
        2:'水浸',
        3:'抬起',
      }

      let fixColor={
        0:'#479eff',
        1:'#fe2a2a',
        2:'#fdca3a',
        3:'#04cd0d',
      }
      console.log(fixStatus[111]);

      (function() {
        let c1 = "#fe2a2a";
        let c2 = "#04cd0d";
        let c3 = "#fdca3a";
        let c4 = "#479eff";

        let con1 = {
          color: [c1, "#a3a3a3"],
          title: {
            text: "25%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              fontWeight: "normal"
            },
            subtext: "50台",
            subtextStyle: {
              color: c1,
              fontSize: 14
            },
            x: "center",
            y: "30%"
          },
          series: [
            {
              name: "50台",
              type: "pie",
              textStyle: {
                color: "#999"
              },
              radius: ["80%", "65%"],
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
            }
          ]
        };

        let con2 = {
          color: [c2, "#a3a3a3"],
          title: {
            text: "25%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              fontWeight: "normal"
            },
            subtext: "50台",
            subtextStyle: {
              color: c2,
              fontSize: 14
            },
            x: "center",
            y: "30%"
          },
          series: [
            {
              name: "50台",
              type: "pie",
              textStyle: {
                color: "#999"
              },
              radius: ["80%", "65%"],
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
            }
          ]
        };

        let con3 = {
          color: [c3, "#a3a3a3"],
          title: {
            text: "25%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              fontWeight: "normal"
            },
            subtext: "50台",
            subtextStyle: {
              color: c3,
              fontSize: 14
            },
            x: "center",
            y: "30%"
          },
          series: [
            {
              name: "50台",
              type: "pie",
              textStyle: {
                color: "#999"
              },
              radius: ["80%", "65%"],
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
            }
          ]
        };

        let con4 = {
          color: [c4, "#a3a3a3"],
          title: {
            text: "25%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              fontWeight: "normal"
            },
            subtext: "50台",
            subtextStyle: {
              color: c4,
              fontSize: 14
            },
            x: "center",
            y: "30%"
          },
          series: [
            {
              name: "50台",
              type: "pie",
              textStyle: {
                color: "#999"
              },
              radius: ["80%", "65%"],
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{ value: 25, name: "报警" }, { value: 75, name: "未报警" }]
            }
          ]
        };

        let option = {
            title: {
              textStyle:{
                color:'#fff'
              }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日'],
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: "#ffffff"
                  }
                },
                splitLine: {
                show: false
              },
            },
            series: [
                {
                    name:'邮件营销',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'直接访问',
                    type:'line',
                    stack: '总量',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    stack: '总量',
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        let optionChart = echarts.init(document.querySelector("#s2-e"));

        let con1Chart = echarts.init(document.querySelector("#con1"));
        let con2Chart = echarts.init(document.querySelector("#con2"));
        let con3Chart = echarts.init(document.querySelector("#con3"));
        let con4Chart = echarts.init(document.querySelector("#con4"));

        optionChart.setOption(option);

        con1Chart.setOption(con1);
        con2Chart.setOption(con2);
        con3Chart.setOption(con3);
        con4Chart.setOption(con4);
        var map = new AMap.Map('map', {
                resizeEnable: true,
                zoom:14,
                center: [113.0842709541, 22.5944937320]
        });

        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("equipmentClickHandle", index);
            window.equipmentClickHandle && window.equipmentClickHandle(index);
          });
        });
    })();

     

      function getItemHtml(item) {
        return `<div class="s4-item">
            <div class="s4i-l">设备状态</div>
            <div class="s4i-r" style="color:${item.color};">${item.status}</div>
          </div>
          <div class="s4-item">
            <div class="s4i-l">更新时间</div>
            <div class="s4i-r">${item.update}</div>
          </div>
          <div class="s4-item">
            <div class="s4i-l">设备位置</div>
            <div class="s4i-r">${item.position}</div>
          </div>`
      }

      let arr = []
      function getDeviceList(fn) {
        $.ajax({
          url: "http://139.159.231.141:8182/api/device/list",
          type: "get",
          success: function(data) {
            let callback = JSON.parse(data)
            fn(callback)
          }
        });
      }

      getDeviceList(function (data) {
        arr = data.data.filter(item=>item.deviceType === "JG")
        update(arr)
      })

      function update(arr) {
        arr = arr.map(item=>{
          let status = fixStatus[item.status]
          let color = fixColor[item.status]
          console.log(status);
          return {
            time:item.updateTime,
            status:item.status,
            id:item.id,
            detail:{
              name:item.deviceId,
              lanlat:[item.longitude, item.latitude],
              color:color,
              status:status,
              update:item.updateTime,
              position:item.address
            }
          }
        })
        let htmlTemp = ""
        arr.forEach((item,idx)=>{
          htmlTemp+=`<div class="t-body ${idx===0?'active':''}" data-detail="${item.id}">
              <span>${item.time}</span>
              <span>${fixStatus[item.status]}</span>
              <span>强</span>
              <span>66%</span>
              <span>...</span>
            </div>`
        })

        let firstItem = arr[0].detail
        
        let htmlItem = getItemHtml(firstItem)
          
        $('.s4-right').html(htmlItem)

        $('.t-main').html(htmlTemp)

        $("#select").unbind('change').change(function(e){
          htmlTemp = ""
          let val = $("#select").find("option:selected").text();
          console.log(val);
          if (val!=="全部") {
            arr.forEach(item=>{
              if (fixStatus[item.status] === val) {
                htmlTemp+=`<div class="t-body" data-detail="${item.id}">
                  <span>${item.time}</span>
                  <span>${fixStatus[item.status]}</span>
                  <span>强</span>
                  <span>66%</span>
                  <span>...</span>
                </div>`
              }
            })
          }
          else{
            arr.forEach(item=>{
              htmlTemp+=`<div class="t-body" data-detail="${item.id}">
                    <span>${item.time}</span>
                    <span>${fixStatus[item.status]}</span>
                    <span>强</span>
                    <span>66%</span>
                    <span>...</span>
                  </div>`
            })
          }
          $('.t-main').html(htmlTemp)
      });
    
        $('.t-main').unbind('click').on("click",".t-body",function (e) {
            let that = $(this)
            let id = that.data('detail')
            $('.t-main .t-body').removeClass('active')
            that.addClass('active')
            arr.forEach(item=>{
              if (item.id === id) {
                let html = getItemHtml(item.detail)
                $('.s4-right').html(html)
              }
            })
          })
        
      }

      // 建立连接对象（还未发起连接）
      if (socket) {
          socket = null
        }
      var socket = new SockJS("http://139.159.231.141:8182/webSocketServer");

      // 获取 STOMP 子协议的客户端对象
      var stompClient = Stomp.over(socket);

      // 向服务器发起websocket连接并发送CONNECT帧
      stompClient.connect(
        {},
        function connectCallback(frame) {
          
          subscribe1()
          console.log('连接成功');

        },
        function errorCallBack(error) {
         
        }
      );

      //订阅消息
      function subscribe1() {
        stompClient.subscribe("/topic/device", function(response) {
          // setMessageInnerHTML("已成功订阅/topic/device");
          var returnData = JSON.parse(response.body);
          let {id,status} = returnData
          arr = arr.map(item=> {
            if (item.id === id) {
              switch (status) {
                case 'ERC52':
                  item.status = 2
                  break;
                case 'ERC51':
                  item.status = 1
                  break;
                case 'ERC50':
                  item.status = 3

                  break;
                default:
                  item.status = 0
                  break;
              }
            }
            return item
          })
          update(arr)
        });
      }
    </script>
  </body>
</html>