alarm_model_footer.html 4.56 KB
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
      <title>设备类型选择</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/home.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/element.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/style.css"/>

      <style>
          html,
          body{
            background: rgba(0,0,0,0.4);
            height: 100%;
            width: 100%;
          }
      </style>
  </head>
  <body>
    <div id="app">
      <template>
        <div style="height: 41.6875rem;width:100%;z-index:10;" tapmode @click="closeSelecter"></div>
          <div style="bottom: 0;width:100%;position:fixed;background-color: #FFFFFF;z-index:11;max-height: 40%;overflow:auto;">
            <div style="margin-left:15px;margin-right:15px;">
              <div class="imei-selecter-title">设备类型</div>
              <div class="page-line"></div>
              <div class="device-imei-list" id="device_imei_list">
                <div>
                  <div class="imei-list" tapmode @click="selectProductType('', '所有类型')">
                    <div class="aui-row aui-row-flex">
                      <div class="aui-col aui-col-span-2 aui-row-flex-start">
                        <div class="imei-dot" id="imei_dot_all"></div>
                      </div>
                      <div class="aui-col aui-col-span-22 aui-row-flex-start">
                        <span class="imei-address" id="imei_device_all">全部</span>
                      </div>
                    </div>
                  </div>
                  <div class="page-line"></div>
                </div>
                <div v-for="(product_list_d, product_list_i) in productTypes">
                  <div class="imei-list" tapmode @click="selectProductType(product_list_d.data[0].model, product_list_d.name)">
                    <div class="aui-row aui-row-flex">
                      <div class="aui-col aui-col-span-2 aui-row-flex-start">
                        <div class="imei-dot" id="imei_dot_all"></div>
                      </div>
                      <div class="aui-col aui-col-span-22 aui-row-flex-start">
                        <span class="imei-address" id="imei_device_all">{{ product_list_d.name }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="page-line"></div>
                </div>
              </div>
            </div>
        </div>
      </template>        
    </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/element.js"></script>
  <script type="text/javascript" src="../../script/ctrl.js"></script>
  <script type="text/javascript" src="../../script/fastclick.js "></script>
  <script type="text/javascript">
      var vm;
      apiready = function(){
      api.parseTapmode();
      $(function() {
                FastClick.attach(document.body);
      }); 

        //---------初始化vue
        vm = new Vue({
          el: '#app',
          data: {
            productTypes: api.pageParam.list
          },
          mounted() {
            //window.chooseProduct = this.chooseProduct;
          },
          created() {
          },
          methods: {
            selectProductType(model, name) {
              if (api.pageParam.from === 'add_device_to_group') {
                api.sendEvent({
                name: 'change_group_device_model',
                extra: {model: model,
                        name: name}
                });
              }else if (api.pageParam.from === 'alarm_frm') {
                api.sendEvent({
                name: 'change_alarm_device_model',
                extra: {model: model,
                        name: name}
                });
              }
              
              this.closeSelecter()
            },
            closeSelecter() {
              api.closeFrame();
            }
          }
        })
      };
  </script>
</html>