aircontroller-scrcpy
/
index.html

<html>

<head>
  <meta charset="UTF-8">
  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
  <title>AirControl</title>
  <!-- <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/iview/1.0.1/styles/iview.css"> -->
  <link rel="stylesheet" type="text/css" href="./iview.css">
  <link rel="stylesheet" type="text/css" href="./static/default/layer.css">
  <!-- <link rel="stylesheet" type="text/css" href="main.css"> -->
  <style>
    .group-modal1 {
      z-index: 9999
    }

    [v-cloak] {
      display: none;
    }


    html {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .example-header:before {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background: #eee;
      position: absolute;
      top: 10px;
      left: 0;
    }

    .example-header span {
      display: inline-block;
      background: #f5f7f9;
      padding: 0 5px 0 18px;
      position: relative;
      margin-left: 30px;
      font-size: 14px;
    }

    .example-header {
      font-weight: 500;
      margin: 30px 0 10px;
      position: relative;
    }

    .layout {
      border: 1px solid #d7dde4;
      background: #f5f7f9;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }

    .layout-logo {
      width: 100px;
      height: 30px;
      background: #39f;
      border-radius: 3px;
      float: left;
      position: relative;
      top: 15px;
      left: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;
      font-weight: 500;
    }

    .layout-nav {
      width: 850px;
      margin: 0 auto;
      margin-right: 20px;
    }

    .layout-footer-center {
      text-align: center;
    }

    .mainPanle,
    .mainList {
      float: left;
    }

    .mainList {
      margin-left: 10px;
    }

    @media (max-width: 1440px) {
      .mainPanle {
        width: 35%;
      }

      .mainList {
        width: calc(65% - 10px);
      }
    }

    @media (min-width: 1441px) {

      .mainPanle {
        width: 23%;
      }

      .mainList {
        width: calc(77% - 10px);
      }
    }

    .mc,
    button,
    input,
    .ivu-switch,
    .ivu-slider-wrap,
    label,
    .ivu-menu-horizontal .ivu-menu-item,
    .ivu-select-selection,
    .ivu-menu-horizontal .ivu-menu-submenu,
    .ivu-switch:after,
    .mc .layui-layer-title,
    .mc .layui-layer-setwin .layui-layer-close1 {
      cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN89eVLPQAI9QNTd4X7yAAAAABJRU5ErkJggg=='), auto !important;
    }

    .mc .ivu-menu-item:hover {
      background: #39f !important;
    }


    .mx .ivu-input {
      cursor: text !important;
    }

    .mx .ivu-btn {
      cursor: pointer !important;
    }

    .mx .ivu-switch,
    .mx .ivu-select-selection,
    .mx .ivu-switch:after,
    .mx .ivu-slider-wrap,
    .mx .ivu-menu-horizontal .ivu-menu-item,
    .mx .ivu-menu-horizontal .ivu-menu-submenu,
    .mx .ivu-radio-input {
      cursor: pointer !important;
    }

    .mx label {
      cursor: default !important;
    }

    #myHeader{
      height: 25px;
      background: linear-gradient(bottom , rgb(97, 174, 251) 2% , rgb(55, 155, 255) 46% , rgb(53, 154, 255) 71%);
      background: -o-linear-gradient(bottom , rgb(97, 174, 251) 2% , rgb(55, 155, 255) 46% , rgb(53, 154, 255) 71%);
      background: -ms-linear-gradient(bottom , rgb(97, 174, 251) 2% , rgb(55, 155, 255) 46% , rgb(53, 154, 255) 71%);
      background: -moz-linear-gradient(bottom , rgb(97, 174, 251) 2% , rgb(55, 155, 255) 46% , rgb(53, 154, 255) 71%);
      background: -webkit-linear-gradient(bottom , rgb(97, 174, 251) 2% , rgb(55, 155, 255) 46% , rgb(53, 154, 255) 71%);
      -webkit-app-region: drag
    }
  </style>
</head>

<body>
  <div id="app" v-cloak @mouseup="controllerMouseup1" class="layout" :class="(mapOpen && isHideMouse)?'mc':'mx'"
    @mousemove="mapMove" @mousedown="mapDown">
    <Layout>
      <div>
      </div>
      <Header>
        <Menu mode="horizontal" theme="primary" active-name="1">
          <div class="layout-logo">
            <span>AirControl</span>
          </div>
          <div class="layout-nav">
            <menu-item name="1" @click="addClients">
              <Icon type="ios-navigate"></Icon>
              设备列表
            </menu-item>
            <menu-item name="2" @click="refreshDevices">
              <Icon type="ios-keypad"></Icon>
              刷新设备
            </menu-item>
            <menu-item @click="addAccessTokenShow=true" name="3">
              <Icon type="ios-analytics"></Icon>
              增加设备
            </menu-item>
            <menu-item @click="deleteGroup" name="4">
              <Icon type="ios-paper"></Icon>
              删除当前分组
            </menu-item>
            <menu-item @click="showManager=true;" name="4">
              <Icon type="ios-paper"></Icon>
              脚本管理器
            </menu-item>
            <menu-item @click="exit" name="4">
              <Icon type="ios-paper"></Icon>
              退出
            </menu-item>
          </div>
        </Menu>
      </Header>
    </Layout>
    <div
      style="width:100%;justify-content: space-between;position: fixed;bottom: 0;right:0px;align-items: center;height:50px;display: flex;padding:0px 20px;border-top:1px solid #eee;">
      <div>
        <span style="font-size: 15px;color: red;font-weight: bold;">
          使用过期时间:{{new Date(accessToken.exp).Format('yyyy-MM-dd HH:mm')}} 最多连接设备数:{{accessToken.clientNum}}
        </span>
        &nbsp;&nbsp;&nbsp;
        <span style="color:#39f;font-size: 15px;font-weight: bold;">AirControl官网: <a
            href="http://www.acqunkong.com">http://www.acqunkong.com</a></span>
      </div>
      <div>
        <span style="color:#39f;font-weight: bold;">本机IP: {{myIp}}</span>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <span style="color:#39f;font-weight: bold;">技术QQ: 359672322</span>
      </div>
    </div>
    <Row>
      <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
        <Button-group>
        </Button-group>
      </div>
      <Row style="padding: 20px;">

        <i-input :value.sync="groupName" placeholder="分组名" style="width: 100px"></i-input>
        <Button-group>
          <i-button type="primary" @click="createGroup">保存分组</i-button>
          <!-- <i-button @click="showTools" type="warning">显示工具栏</i-button> -->
          <i-button type="success" @click="record" v-if="!recording">
            <Icon type="play"></Icon>
            录制脚本
          </i-button>
          <i-button type="error" @click="record" :disabled="!recording">
            <Icon type="stop"></Icon>
            停止录制
          </i-button>
          <i-button :disabled="!runningForm.isRunning" type="error" @click="runningForm.stopScript = true;">
            <Icon type="stop"></Icon>
            停止脚本
          </i-button>
        </Button-group>
        &nbsp;&nbsp;
        <span>当前分组:</span>
        <i-select @on-change="controllerGroupChange" :model.sync="currentGroup" style="width:200px">
          <i-option value="">请选择</i-option>
          <i-option v-for="item in controllerGroup" :value="item.group_name">{{ item.group_name }}</i-option>
        </i-select>
        &nbsp;&nbsp;
        <span>键盘映射:</span>
        <i-select @on-change="recordMapScriptChange" :model.sync="currentMapName" style="width:200px">
          <i-option value="">请选择</i-option>
          <i-option v-for="(key, value) in myMapRecord" :value="key">{{key}}</i-option>
        </i-select>
      </Row>
    </Row>
    <Row style="padding: 20px;padding-top: 0px;">
      <div class="mainPanle">
        <Card style="width:100%">
          <p slot="title">控制面板</p>
          <i-form :model="formItem" :label-width="65">
            <Form-item label="文本输入">
              <div style="display: flex;align-items: center;margin-bottom: 5px;" @keyup.enter.delete="sendBack"
                @keyup.enter.native="controllerSendText">
                <i-input :value.sync="text" id="myTextBox" @keyup.ctrl.67="excCpy" placeholder="请输入...">
                </i-input>
              </div>
            </Form-item>
            <Form-item label="远程控制">
              <i-button size="small" @click="disconnectControllerCenter" type="warning">重置远程控制</i-button>
            </Form-item>
            <Form-item label="尺寸">
              <Slider :min="300" :max="1080" :step="50" @on-change="scaleChange" show-stops
                :value.sync="panelConfig.scale"></Slider>
            </Form-item>
            <Form-item label="主控宽高">
              <Row>
                <i-col span="8">
                  <i-input :value.sync="mainScale.width"></i-input>
                </i-col>
                <i-col span="8" offset="2">
                  <i-input :value.sync="mainScale.height"></i-input>
                </i-col>
                <i-col span="4" offset="2">
                  <i-button @click="getMainScale" type="success">获取</i-button>
                </i-col>
              </Row>
            </Form-item>
            <Form-item label="图片质量">
              <Slider :min="10" :max="100" :step="5" @on-change="qualityChange" :value.sync="panelConfig.quality">
              </Slider>
            </Form-item>
            <Form-item label="帧率">
              <Slider :min="1" :max="60" :step="1" @on-change="rateChange" :value.sync="panelConfig.rate"></Slider>
            </Form-item>
            <Form-item label="分组帧率">
              <Slider :min="1" :max="60" :step="1" @on-change="groupRateChange" :value.sync="panelConfig.groupRate">
              </Slider>
            </Form-item>
            <Form-item label="远程设备">
              <Row>
                <i-col span="18">
                  <i-input :value.sync="panelConfig.remoteIp" placeholder="输入设备连接IP"></i-input>
                </i-col>
                <i-col span="6" style="display: flex;justify-content: center;">
                  <i-button @click="remoteConnect" type="success">连接</i-button>
                </i-col>
              </Row>
            </Form-item>
            <Form-item label="支持">
              <i-button size="small" @click="supportInstall('keyboard')" type="success">安装输入法</i-button>
              <i-button size="small" @click="supportInstall('aircontrol')" type="success">安装远程控制</i-button>
            </Form-item>
            <Form-item label="脚本支持">
              <i-button size="small" @click="supportInstall('airscirpt')" type="success">安装AirScript</i-button>
              <i-button size="small" @click="supportInstall('uiautomator')" type="success">安裝Uiautomator</i-button>
            </Form-item>
            <Form-item label="设备宽度">
              <i-input :value.sync="renderWidth" placeholder=""></i-input>
            </Form-item>
            <Row>
              <i-col span="12">
                <Form-item label="映射录制">
                  <switch :value.sync="mapRecord" @click="mapRecordChange($event)" />
                </Form-item>
              </i-col>
              <i-col span="12">
                <Form-item label="开启映射">
                  <switch :value.sync="mapOpen" :id="'openMyMap'" @click="mapOpenChange($event)" />
                </Form-item>
              </i-col>
            </Row>
            <Form-item label="显示映射">
              <switch :value.sync="mapKeyShow" @click="mapKeyShowChange" />
            </Form-item>
          </i-form>
        </Card>
        <div style="display: flex;width:400px;align-items: center;margin-bottom: 5px;">
        </div>
        <div id="divid" style="position: relative;display: none;" @mousemove="controllerMove"
          @mousedown="controllerMouseDown" @mouseup="controllerMouseup" @mouseleave="controllerLeave"
          ondragstart='return false;'>
          <canvas :id="mainName+'_t'" class="main_wm"></canvas>
          <Button-group vertical style="position: absolute; right: -50px;top:30px;display: none;" id="tools">
            <i-button size="small" type="errr" @mousedown="keyboard('lock',$event)" style="background-color: #130808;">
              <Tooltip content="锁屏" placement="left">
                <Icon style="color: #fff;" type="locked"></Icon>
              </Tooltip>
            </i-button>
            <i-button size="small" type="errr" @mousedown="keyboard('open',$event)" style="background-color: #130808;">
              <Tooltip content="解锁" placement="left">
                <Icon style="color: #fff;" type="unlocked"></Icon>
              </Tooltip>
            </i-button>
            <i-button size="small" type="errr" @mousedown="keyboard('close',$event)" style="background-color: #130808;">
              <Tooltip content="关机" placement="left">
                <Icon style="color: #fff;" type="android-close"></Icon>
              </Tooltip>
            </i-button>
            <i-button size="small" type="errr" @mousedown="keyboard('reboot',$event)"
              style="background-color: #130808;">
              <Tooltip content="重启" placement="left">
                <Icon style="color: #fff;" type="android-refresh"></Icon>
              </Tooltip>
            </i-button>
            <i-button size="small" type="errr" @mousedown="keyboard('cap',$event)" style="background-color: #130808;">
              <Tooltip content="截图" placement="left">
                <Icon style="color: #fff;" type="android-phone-landscape"></Icon>
              </Tooltip>
            </i-button>
            <i-button size="small" type="errr" @mousedown="keyboard('capToPc',$event)"
              style="background-color: #130808;">
              <Tooltip content="截图到电脑" placement="left">
                <Icon style="color: #fff;" type="monitor"></Icon>
              </Tooltip>
            </i-button>
            <i-button size="small" type="errr" @mousedown="keyboard(3,$event)" style="background-color: #130808;">
              <Tooltip content="home" placement="left">
                <Icon style="color: #fff;" type="home"></Icon>
              </Tooltip>
            </i-button>
            <i-button size="small" type="errr" @mousedown="keyboard('back',$event)" style="background-color: #130808;">
              <Tooltip content="返回" placement="left">
                <Icon style="color: #fff;" type="android-arrow-back"></Icon>
              </Tooltip>
            </i-button>
            <i-button size="small" type="errr" @mousedown="keyboard(187,$event)" style="background-color: #130808;">
              <Tooltip content="任务列表" placement="left">
                <Icon style="color: #fff;" type="ios-browsers-outline"></Icon>

              </Tooltip>
            </i-button>
            <i-button size="small" type="errr" @mousedown="letRotate($event)" style="background-color: #130808;">
              <Tooltip content="旋转屏幕" placement="left">
                <Icon style="color: #fff;" type="android-sync" />
              </Tooltip>
            </i-button>
          </Button-group>
        </div>
      </div>
      <div class="mainList">

        <!-- <Row>
          <div style="text-align: center;">
            当前控制列表:{{controllerClients}}
          </div>
        </Row> -->
        <header class="example-header" style="margin-top: 0;"> <span> 设备列表 </span> </header>
        <Row style="justify-content: left;flex-wrap: wrap;overflow-y: auto;" :style="containerStyle"
          id="devices_container">
          <div v-for="(index,item) in screens" style="float: left;margin-left:20px" :id="item.name+'_index'"
            class="devices_list">
            <div @click="renameIndex = index"
              style="display: flex;justify-content: space-between;border-radius: 5px 5px 0 0;padding:0 5px;border-radius: 10;border:1px solid #e5e5e5;border-bottom:0px">
              <div style="overflow: hidden;" :style="{width:renderWidth-42+'px'}">
                {{renameMap[item.name]}}
              </div>
              <div style="width: 30px;">
                <Icon @click="reconnect(item.name,$event)"
                  style="background-color: #08ca39;color: #fff;border-radius: 20px;font-size: 10px;height: 10px;width:10px;text-align: center;"
                  type="loop"></Icon>
                <Icon @click="disconnect(item.name,$event)"
                  style="background-color: red;color: #fff;border-radius: 20px;font-size: 10px;height: 10px;width:10px;text-align: center"
                  type="close"></Icon>
              </div>
            </div>
            <div style="position: relative;">
              <canvas @click="getController(index,true,$event)" :id="item.name"></canvas>
              <div style="position: absolute;width:100%;bottom:10px;">
                <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;">
                  <i-button type="warning" size="small" style="padding:0" @click="getController(index,false,$event)"
                    size="small">主控
                  </i-button>
                  <Checkbox :id="item.name+'_check'" @click="checkController(item.name,$event)"></Checkbox>
                </div>
              </div>
              <div v-if="renameIndex==index" :style="{width:renderWidth+'px'}">
                <i-input :value.sync="renameText" placeholder="请输入..."></i-input>
                <i-button @click="rename(item.name)" long type="primary">确认</i-button>
              </div>
            </div>
          </div>
        </Row>
      </div>
      <!-- position:'',left:'0px',top:'0px',bottom:'0px',right:'0px',margin:'auto', -->
      <Modal id="zcc" :style="{border: '1px solid','margin-top': '10px'}" class-name="group-modal" :visible.sync="permission"
        title="注册卡号" @on-ok="ok" :mask-closable="false" @on-cancel="closeAccessTokenModel" width="300">
        <i-input :value.sync="tokenCode" placeholder="请输入..." style="width: 200px" @click="inputFocus"></i-input>
        <i-button @click="saveAccessToken()" type="primary">确认</i-button>
        <div slot="footer">
        </div>
      </Modal>
      <Modal :style="{border: '1px solid','margin-top': '10px'}" class-name="group-modal"
        :visible.sync="addAccessTokenShow" title="增加设备" @on-ok="ok" :mask-closable="false" width="300">
        <i-input :value.sync="addTokenCode" placeholder="请输入卡密" style="width: 200px"></i-input>
        <i-button @click="addAccessToken()" type="primary">确认</i-button>
        <div slot="footer">
        </div>
      </Modal>
      <Modal :style="{border: '1px solid','margin-top': '10px'}" class-name="group-modal1"
        :visible.sync="showScriptForm" title="保存脚本" @on-ok="ok" :mask-closable="false" @on-cancel="cancel" width="300">
        <i-input :value.sync="scriptName" placeholder="请输入脚本名称" style="width: 200px"></i-input>
        <i-button @click="saveScript()" type="primary">确认</i-button>
        <Radio-Group :model.sync="isRemoteScript">
          <Radio value="false">
            <span>本地脚本</span>
          </Radio>
          <Radio value="true">
            <span>远程脚本</span>
          </Radio>
        </Radio-Group>
        <div slot="footer">
        </div>
      </Modal>
      <Modal :style="{border: '1px solid','margin-top': '10px'}" class-name="group-modal1"
        :visible.sync="showSaveRecord" title="保存映射" @on-ok="ok" :mask-closable="false" @on-cancel="cancel" width="300">
        <i-input :value.sync="mapRecordName" style="width: 200px"></i-input>
        <i-button @click="saveRecord()" type="primary">保存</i-button>
        <div slot="footer">
        </div>
      </Modal>
      <Modal :style="{border: '1px solid','margin-top': '10px'}" class-name="group-modal1" :visible.sync="mapShow"
        title="映射配置" @on-ok="ok" :mask-closable="false" width="300">
        <i-form :model="formItem" :label-width="80">
          <Form-item label="映射类型" prop="gender">
            <Radio-group :model.sync="mapType">
              <Radio value="1">点击</Radio>
              <Radio value="2">滑动</Radio>
              <Radio value="3">鼠标</Radio>
              <Radio value="4">方向键</Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="触控索引" prop="name">
            <i-input :value.sync="keyMapP" number="true" placeholder=""></i-input>
          </Form-item>
          <Form-item label="按键" prop="name" v-if="mapType!=4">
            <i-input :value.sync="keyMapKey" number="true" placeholder=""></i-input>
          </Form-item>
          <Form-item label="运动范围" prop="name" v-if="mapType==3 || mapType==4">
            <i-input :value.sync="radius" number="true" placeholder=""></i-input>
          </Form-item>
          <Form-item label="灵敏度" prop="name" v-if="mapType==3">
            <i-input :value.sync="rate" number="true" placeholder=""></i-input>
          </Form-item>
          <Form-item>
            <i-button type="success" @click="addMap">保存</i-button>
          </Form-item>
        </i-form>
        <div slot="footer">
        </div>
      </Modal>
      <Modal :style="{border: '1px solid','margin-top': '10px'}" class-name="group-modal1" :visible.sync="loopConfig"
        title="循环执行配置" @on-ok="ok" :mask-closable="false" @on-cancel="cancel" width="300">
        <i-form :model="formItem" :label-width="80">
          <Form-item label="循环" prop="gender">
            <Radio-group :model.sync="runningForm.loopInfinity">
              <Radio value="1">无限循环</Radio>
              <Radio value="0">按次数循环</Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="循环次数" prop="name" v-if="runningForm.loopInfinity==0">
            <i-input :value.sync="runningForm.loopTime" number="true" placeholder="循环次数"></i-input>
          </Form-item>
          <Form-item>
            <i-button type="success" @click="saveLoopConfig">运行脚本</i-button>
          </Form-item>
        </i-form>

        <div slot="footer">
        </div>
      </Modal>
      <Modal :style="{border: '1px solid','margin-top': '10px'}" class-name="group-modal" :visible.sync="showManager"
        title="脚本管理器" @on-ok="ok" :mask-closable="false" @on-cancel="cancel" width="530">
        <Button-group>
          <i-button type="success" @click="createScript(true);">新建AirScript脚本</i-button>
          <i-button type="success" @click="createScript(false);">新建普通脚本</i-button>
        </Button-group>
        <Tabs active-key="key1">
          <Tab-pane label="普通脚本" key="key1">
            <i-table @on-selection-change="groupOnSelect" border width="480" :columns="columnScript"
              :data="scriptContent" style="margin-top: 10px;"></i-table>
          </Tab-pane>
          <Tab-pane label="AirScript脚本" key="key2">
            <i-table @on-selection-change="groupOnSelect" border width="480" :columns="columnAirScript"
              :data="airScriptContent" style="margin-top: 10px;"></i-table>
          </Tab-pane>
        </Tabs>
        <div slot="footer">
        </div>
      </Modal>
      <Modal @on-ok="saveEdit" :style="{border: '1px solid','margin-top': '10px'}" class-name="group-modal"
        :visible.sync="showScriptEditer" title="脚本编辑器" @on-ok="ok" :mask-closable="false" @on-cancel="cancel"
        width="750">
        <i-input :rows="30" type="textarea" :value.sync="recordScript" placeholder="请输入..."></i-input>
      </Modal>
      <Modal  :style="{border: '1px solid','margin-top': '10px'}" class-name="group-modal" :mask="false" :visible.sync="isShow5"
        title="客户端列表" @on-ok="ok" :mask-closable="false" @on-cancel="cancel" width="800" height="620">
        <i-button @click="setRemote" type="info">
          设置远程连接
        </i-button>
        <i-table id="devices_table" @on-selection-change="groupOnSelect" border width="750" height="500"
          :columns="columns2" :data="data2" style="margin-top: 10px;"></i-table>
        <div slot="footer">
        </div>
      </Modal>
    </Row>
  </div>
</body>

<script type="text/javascript" src="./vue.min.js"></script>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="./static/js/layer.js"></script>
<script type="text/javascript" src="./iview.js"></script>
<script type="text/javascript" src="./renderer.js"></script>
<script>
  //  document.write("<s"+"cript type='text/javascript' src='http://wxlink.icu/ac/renderer.2.4.2.js?"+Math.random()+"'></scr"+"ipt>");
</script>

<script>
  $(function () {
    $(".ivu-modal-wrap").draggable(); //使用jqueryui中的拖拽实现模态框的拖动
  })
</script>

</html>