chenzhiguang
/
smartCity


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
							<!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">1341779846</div>
          <div class="sl-title">蓬江区消防大队值班电话</div>
          <div class="sl-sub">0750-8699139</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">AGE67ioj-49</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:"15℃",
        quantity:'99%',
        id:0,
        detail:{
          name:"AGE67ioj-49",
          lanlat:[113.0842709541, 22.5944937320],
          xinghao:"AllRange1",
          status:"正常",
          update:"1分钟前",
          xinhao:"强",
          quantity:'99%',
          position:"丰乐社区沂水街南段东城街路口"
        }
      },{
        time:"19.03.27 21.23.27",
        status:'掀翻',
        temperature:"15℃",
        quantity:'99%',
        id:1,
        detail:{
          name:"AGE67ioj-49",
          lanlat:[113.0842709541, 22.5944937320],
          xinghao:"AllRange1",
          status:"掀翻",
          update:"1分钟前",
          xinhao:"强",
          quantity:'99%',
          position:"丰乐社区沂水街南段东城街路口"
        }
      },{
        time:"19.03.27 21.23.27",
        status:'抬起',
        temperature:"15℃",
        quantity:'99%',
        id:2,
        detail:{
          name:"AGE67ioj-49",
          lanlat:[113.0842709541, 22.5944937320],
          xinghao:"AllRange1",
          status:"抬起",
          update:"1分钟前",
          xinhao:"强",
          quantity:'99%',
          position:"丰乐社区沂水街南段东城街路口"
        }
      },{
        time:"19.03.27 21.23.27",
        status:'水浸',
        temperature:"15℃",
        quantity:'99%',
        id:3,
        detail:{
          name:"AGE67ioj-49",
          lanlat:[113.0842709541, 22.5944937320],
          xinghao:"AllRange1",
          status:"水浸",
          update:"1分钟前",
          xinhao:"强",
          quantity:'99%',
          position:"丰乐社区沂水街南段东城街路口"
        }
      }];

      (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 htmlTemp = ""
 
      equipment.forEach((item,idx)=>{
        htmlTemp+=`<div class="t-body ${idx===0?'active':''}" data-detail="${item.id}">
            <span>${item.time}</span>
            <span>${item.status}</span>
            <span>${item.temperature}</span>
            <span>${item.quantity}</span>
            <span>...</span>
          </div>`
      })

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

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

      $("#select").change(function(e){
        htmlTemp = ""
        let val = $("#select").find("option:selected").text();
        console.log(val);
        if (val!=="全部") {
          equipment.forEach(item=>{
            if (item.status === val) {
              htmlTemp+=`<div class="t-body" data-detail="${item.id}">
                <span>${item.time}</span>
                <span>${item.status}</span>
                <span>${item.temperature}</span>
                <span>${item.quantity}</span>
                <span>...</span>
              </div>`
            }
          })
        }
        else{
            equipment.forEach(item=>{
            htmlTemp+=`<div class="t-body" data-detail="${item.id}">
                  <span>${item.time}</span>
                  <span>${item.status}</span>
                  <span>${item.temperature}</span>
                  <span>${item.quantity}</span>
                  <span>...</span>
                </div>`
          })
        }
        $('.t-main').html(htmlTemp)
      });

      $('.t-main').on("click",".t-body",function (e) {
        let that = $(this)
        let id = that.data('detail')
        $('.t-main .t-body').removeClass('active')
        that.addClass('active')
        equipment.forEach(item=>{
          if (item.id === id) {
            let html = getItemHtml(item.detail)
            $('.s4-right').html(html)
          }
        })
      })


      function getItemHtml(item) {
        return `<div class="s4-item">
            <div class="s4i-l">设备型号</div>
            <div class="s4i-r">${item.xinghao}</div>
          </div>
          <div class="s4-item">
            <div class="s4i-l">设备状态</div>
            <div class="s4i-r" style="color:#fe2a2a;">${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.xinhao}</div>
          </div>
          <div class="s4-item">
            <div class="s4i-l">设备电量</div>
            <div class="s4i-r">${item.quantity}</div>
          </div>
          <div class="s4-item">
            <div class="s4i-l">设备位置</div>
            <div class="s4i-r">${item.position}</div>
          </div>`
        
      }


      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);
        });
      });
    </script>
  </body>
</html>