addScence_frm.html 15.5 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">
      <meta name="referrer" content="no-referrer">
      <title>添加设备联动</title>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/api.css"/>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/aui.css"/>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/home.css"/>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/element.css"/>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/style.css"/>
      <link rel="stylesheet" type="text/css" href="../../../css/aui.popdownmenu.css"/>

      <style>
          html,
          body{
            background-color: #F4F6F9;
          }
      </style>
  </head>
  <body>
    <div id="app">
      <template>
        <div class="repair-info-panel">
          <div class="repair-info-inside-panel">
            <div class="aui-row aui-row-flex padding-top-21" style="margin-bottom: 25px;">
              <div class="aui-col aui-col-span-7 aui-row-flex-start">
                <span class="repair-measure-obj">联动名称</span>
              </div>
              <div class="aui-col aui-col-span-17 aui-row-flex-end">
                <input id="detail_address" class="aui-input" placeholder="请输入名称" type="text" maxlength="15" style="height:1.26rem;text-align:right;font-weight:500;color:rgba(91,127,248,1);font-size:14px;" >
              </div>
            </div>
            <div style="height: 1px;background-color: #F0F5FF;"></div>

            <div v-if="userType === 2" class="aui-row aui-row-flex padding-top-21" style="margin-bottom: 25px;">
              <div class="aui-col aui-col-span-12 aui-row-flex-start">
                <span class="repair-measure-obj">项目名称</span>
              </div>
              <div class="aui-col aui-col-span-12 aui-row-flex-end" tapmode @click="chooseProject();">
                <span class="repair-measure-obj" style="color:rgba(174,184,206,1);margin-right:0.5rem;" id="device_model_inputed">{{ chooseProjectName }}</span>
                <i class="repair-down-sign"></i>
              </div>
            </div>
            <div v-if="userType === 2" style="height: 1px;background-color: #F0F5FF;"></div>

            <div class="aui-row aui-row-flex padding-top-21" style="margin-bottom: 25px;">
              <div class="aui-col aui-col-span-12 aui-row-flex-start">
                <span class="repair-measure-obj">设备型号</span>
              </div>
              <div class="aui-col aui-col-span-12 aui-row-flex-end" tapmode @click="choosePrducts();">
                <span class="repair-measure-obj" style="color:rgba(174,184,206,1);margin-right:0.5rem;" id="device_model_inputed">{{ chooseProductName }}</span>
                <i class="repair-down-sign"></i>
              </div>
            </div>
            <div style="height: 1px;background-color: #F0F5FF;"></div>

            <div class="aui-row aui-row-flex padding-top-21" style="margin-bottom: 25px;">
              <div class="aui-col aui-col-span-12 aui-row-flex-start">
                <span class="repair-measure-obj">设备编号</span>
              </div>
              <div class="aui-col aui-col-span-12 aui-row-flex-end" tapmode @click="chooseDevices();">
                <span class="repair-measure-obj" style="color:rgba(174,184,206,1);margin-right:0.5rem;" id="device_model_inputed">{{ chooseDevice }}</span>
                <i class="repair-down-sign"></i>
              </div>
            </div>
            <div style="height: 1px;background-color: #F0F5FF;"></div>
          </div>
        </div>
        <span style="margin-left: 15px;
        margin-right: 15px;
        margin-top: 15px;
        color: #37394E;
        font-size: 16px;
        font-weight: bold;">{{ temp_link }}</span>
        <div class="repair-info-panel">
          <!-- <div class="repair-info-inside-panel"> -->
            <el-row style="line-height: 44px;">
              <el-col :span=1>&nbsp;</el-col>
              <el-col :span=2>
                <img src="http://iot.uccc.cc:9090/product/06001/icon-if.png" style="height: 24px;width: 24px;margin: 10px auto;" />
              </el-col>
              <el-col :span=10 >
                <span style="font-size: 14px;color: #37394E;">如果:<span style="font-weight: bold;">大于等于</span></span>
              </el-col>
              <el-col :span=9>
                <input id="detail_address" class="aui-input" placeholder="请输入值" type="text" maxlength="2" style="height:1.26rem;text-align:center;font-weight:500;color:rgba(91,127,248,1);font-size:14px;margin-top: 10px;" >
              </el-col>
              <el-col :span=1></el-col>
              
            </el-row>
            <el-row>
              <el-col :span=1>&nbsp;</el-col>
              <el-col :span=2>
                <img src="http://iot.uccc.cc:9090/product/06001/icon-todo.png" style="height: 24px;width: 24px;margin: 10px auto;" />
              </el-col>
              <el-col :span=21 style="line-height: 44px;">
                <span style="font-size: 12px;color: #37394E;">执行:<span style="font-weight: bold;">xxx</span></span>
              </el-col>
            </el-row>
          <!-- </div> -->
        </div>
      </template>
    </div>
  </body>
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/api.js"></script>
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/vue.min.js"></script>
  <!-- <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/common.js"></script> -->
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/element.js"></script>
  <!-- <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/ctrl.js"></script> -->
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/fastclick.js "></script>
  <script type="text/javascript" src="../../../script/common.js"></script>
  <script type="text/javascript" src="../../../script/ctrl.js"></script>
  <script type="text/javascript">
      var vm, that;
      apiready = function(){
        api.parseTapmode();
        $(function() {
                  FastClick.attach(document.body);
        });

        //---------初始化vue
        vm = new Vue({
          el: '#app',
          data: {
            userType: Number(api.getPrefs({sync: true,key: 'userType'})),
            temp_link: '温度联动',
            rh_link: '湿度联动',
            uIActionSelector: api.require('UIActionSelector'),
            queryParam: {
              limit: 50,
              page: 1,
              userId: api.getPrefs({sync: true,key: 'userID'}),
              parentId: 9999,
            },
            token: api.getPrefs({sync: true,key: 'userToken'}),
            projects:[],//项目名称
            chooseProjectName: '请选择',
            chooseProjectId: '',
            products:[], //设备型号
            chooseProduct: 'all',
            chooseProductName: '请选择',
            chooseProductId: '',
            userType: Number(api.getPrefs({sync: true,key: 'userType'})),
            devicesParamsForApp: {
              store_type: '',
              user_id: api.getPrefs({sync: true,key: 'userID'}),
              token: api.getPrefs({sync: true,key: 'userToken'}),
              userType: Number(api.getPrefs({sync: true,key: 'userType'}))
            },
            devicesParamsForEnterprise: {
              store_type: '',
              user_id: api.getPrefs({sync: true,key: 'userID'}),
              token: api.getPrefs({sync: true,key: 'userToken'}),
              group_id: '',
              userType: Number(api.getPrefs({sync: true,key: 'userType'}))
            },
            devices:[],
            chooseDevice : '请选择',
            temp_max: 0,
            temp_max_action: '',
            temp_min: 0,
            temp_min_action: '',
            rh_max: 0,
            rh_max_action: '',
            rh_min: 0,
            rh_min_action: '',


          },
          mounted() {
          },
          created() {
            that = this
            api.addEventListener({
              name: 'choose_product_type'
            }, function(ret, err){
              console.log(ret.value.selectedName);
              if (ret.value.selectedName != '') {
                that.chooseProductName = ret.value.selectedName                
              }else {
                that.chooseProductName = '请选择'
              }
              that.chooseProductId = ret.value.selected

            });
            this.initProjects()
          },
          methods: {
            async initProjects() {
              api.showProgress({
                  style: 'default',
                  animationType: 'fade',
                  title: '加载中...',
                  text: '',
                  modal: false
              });
              let dataRes = await get_enterprise_tree_single_node(this.queryParam, this.token)
              this.projects = []
              if (dataRes.code === 0) {
                let projects_ = dataRes.data.list.rows
                if (projects_.length > 0) {
                  console.log(111);
                  projects_.forEach(json => {
                    let addProject = {
                      name: json.name,
                      project_id: json.id
                    }
                    this.projects.push(addProject)
                  });
                }
              }
              api.hideProgress();
            },
            async chooseDevices() {
              this.devices = []
              if (this.userType === 2 && this.chooseProjectId === '') {api.toast({msg: '请选择项目!',duration: 2000,location: 'bottom'});return}
              if (this.chooseProductId === '') { api.toast({msg: '请选择产品!',duration: 2000,location: 'bottom'}); return}
              console.log(this.chooseProductId);
              let params = {}
              if (this.userType === 1) {
                params = this.devicesParamsForApp

              }else if (this.userType === 2) {
                params = this.devicesParamsForEnterprise
                params.group_id = this.chooseProjectId
              }
              params.store_type = this.chooseProductId
              api.showProgress({
                  style: 'default',
                  animationType: 'fade',
                  title: '加载中...',
                  text: '',
                  modal: false
              });
              let deviceList = await get_imei_list(params)
              console.log(JSON.stringify(deviceList));
              if (deviceList.data.length > 0) {
                devices1_ = deviceList.data
                devices2_ = []
                devices1_.forEach(d => {
                  devices2_.push({
                    name: d.imei
                  })
                });
                this.devices = devices2_
              }else {
                api.toast({msg: '暂无数据!',duration: 2000,location: 'bottom'});
                api.hideProgress();
                return;
              }
              api.hideProgress();
              this.uIActionSelector.open({
                  datas: this.devices,
                  layout: {
                      row: 5,
                      col: 1,
                      height: 30,
                      size: 12,
                      sizeActive: 14,
                      rowSpacing: 5,
                      colSpacing: 10,
                      maskBg: 'rgba(0,0,0,0.2)',
                      bg: '#fff',
                      color: '#888',
                      colorActive: '#f00',
                      colorSelected: '#f00'
                  },
                  animation: true,
                  cancel: {
                      text: '取消',
                      size: 12,
                      w: 90,
                      h: 35,
                      bg: '#5B7FF8',
                      bgActive: '#ccc',
                      color: '#FFFFFF',
                      colorActive: '#fff'
                  },
                  ok: {
                      text: '确定',
                      size: 12,
                      w: 90,
                      h: 35,
                      bg: '#5B7FF8',
                      bgActive: '#ccc',
                      color: '#FFFFFF',
                      colorActive: '#fff'
                  },
                  title: {
                      text: '设备列表',
                      size: 14,
                      h: 44,
                      bg: '#eee',
                      color: '#000000'
                  },
                  fixedOn: api.frameName
              }, function(ret, err) {
                if (ret && ret['eventType'] == "ok") {
                  that.chooseDevice = ret.selectedInfo[0].name
                }
              });
              
            },
            choosePrducts() {
              api.openFrame({
                name: 'deviceTypeFooter',
                url: './device_type_footer.html',
                bounces: false,
                rect: {
                  x: 0,
                  y: 0,
                  w: api.winWidth,
                  h: api.winHeight
                },
                pageParam: {
                  selectedProductId: this.chooseProduct
                }
              });
            },
            chooseProject() {
              if (this.projects.length === 0) return;
              this.uIActionSelector.open({
                  datas: this.projects,
                  layout: {
                      row: 5,
                      col: 1,
                      height: 30,
                      size: 12,
                      sizeActive: 14,
                      rowSpacing: 5,
                      colSpacing: 10,
                      maskBg: 'rgba(0,0,0,0.2)',
                      bg: '#fff',
                      color: '#888',
                      colorActive: '#f00',
                      colorSelected: '#f00'
                  },
                  animation: true,
                  cancel: {
                      text: '取消',
                      size: 12,
                      w: 90,
                      h: 35,
                      bg: '#5B7FF8',
                      bgActive: '#ccc',
                      color: '#FFFFFF',
                      colorActive: '#fff'
                  },
                  ok: {
                      text: '确定',
                      size: 12,
                      w: 90,
                      h: 35,
                      bg: '#5B7FF8',
                      bgActive: '#ccc',
                      color: '#FFFFFF',
                      colorActive: '#fff'
                  },
                  title: {
                      text: '项目名称',
                      size: 14,
                      h: 44,
                      bg: '#eee',
                      color: '#000000'
                  },
                  fixedOn: api.frameName
              }, function(ret, err) {
                if (ret && ret['eventType'] == "ok") {
                  that.chooseProjectName = ret.selectedInfo[0].name
                  that.chooseProjectId = ret.selectedInfo[0].project_id
                  console.log(JSON.stringify(ret.selectedInfo[0]));
                }
              });
            }
          },

        })
      };
  </script>
</html>