优化

src/views/queueManagement/cameraPositionCalibration/bindDev.vue

 <template>
   <el-dialog :title="$t('dialog.mapCoordinateTitle')" class="manage-dialog xy-dialog" :visible.sync="xyEditVisible" :show-close="false"
     @close="dialogClose">
-    <span style="margin-right: 15px;">{{$t('table.deviceNum')}}</span><el-select @change="channelChange" v-model="channelVal">
+    <!-- <span style="margin-right: 15px;">{{$t('table.deviceNum')}}</span><el-select @change="channelChange" v-model="channelVal">
       <el-option v-for="item in channelList" :key="item.id" :label="item.serialnum" :value="item.serialnum" />
-    </el-select>
+    </el-select> -->
     <div class="xy-content">
+      <el-row :gutter="20" style="margin-bottom: 15px;">
+        <el-col :span="8">
+          <el-table ref="singleTable" @row-click="setCurrent" :data="channelList" height="360" :highlight-current-row='true' style="width: 100%;" header-row-class-name="manage-tab-head">
+            <el-table-column :label="$t('table.order')" align="center" type="index" width="80"></el-table-column>
+            <el-table-column :label="$t('table.deviceNum')" align="center" prop="serialnum"></el-table-column>
+            <el-table-column label="ip" align="center" prop="localIp"></el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="16">
           <div class="xy-container1">
             <canvas id="editXycanvas1" class="xycanvas" @click="getEditXyAxis1"></canvas>
             <img :src="editChannelImg" class="editChannelImg" id="editChannelImg" style="width: 640px;height: 360px;" @click="getEditXyAxis1" />
           </div>
+        </el-col>
+      </el-row>
+      <!-- <el-button type="primary" @click='scaleFun(1)'>放大</el-button>
+      <el-button type="primary" @click='scaleFun(2)'>缩小</el-button> -->
       <div class="xy-container">
         <canvas id="editXycanvas" class="xycanvas" @click="getEditXyAxis"></canvas>
-        <img :src="editFloorImg" class="editFloorImg" id="editFloorImg" @click="getEditXyAxis" />
+        <img :src="editFloorImg" class="editFloorImg" style="height: 300px;" id="editFloorImg" @click="getEditXyAxis" />
       </div>
     </div>
     <div slot="footer" class="dialog-footer">
@@ -65,10 +78,21 @@
           type: 4
         },
         step: 1, // 步骤  1 画相机截图中心点  2 画相机边缘点  3 画相机和楼层图多个点
-        radix: 0
+        radix: 0,
+        scaleVal:1
       }
     },
     methods: {
+      scaleFun(val){
+        if(val==1){
+          this.scaleVal=this.scaleVal+0.5
+        }else{
+          this.scaleVal=this.scaleVal-0.5
+        }
+        let dom = document.getElementById('editFloorImg')
+        dom.style.transform='scale('+this.scaleVal+')'
+        this.drawFun()
+      },
       dialogInit(pic, channelList) {
         this.channelList = channelList
         this.channelVal = channelList[0].id
@@ -105,6 +129,11 @@
         this.commonInit(this.editChannelImg, 'editChannelImg', '.xy-container1', 'channel', 'editXycanvas1')
       },
       // 获取相机截图
+      setCurrent(row){
+        this.editForm = {...row}
+        this.editChannelImg = `${row.picUrl}`
+         this.drawFun()
+      },
       channelChange(val) {
         this.channelList.forEach(item => {
           if (item.id == val) {
@@ -137,8 +166,8 @@
               height = parseInt(_xy * _height / _width)
               this.radix = (_width / _xy).toFixed(0)
             } else if (_width < _xy) {
-              width = _width
-              height = _height
+              width = _width * this.scaleVal
+              height = _height * this.scaleVal
               this.radix = 1
             }
           }
@@ -467,10 +496,11 @@
 
   .xy-container {
     width: 100%;
+    height: 300px;
     /* text-align: center; */
     position: relative;
     overflow-x: auto;
-    overflow-y: hidden;
+    overflow-y: auto;
   }
 
   .xy-container1 {

src/views/queueManagement/channelManagement/addDesk.vue

@@ -12,10 +12,10 @@
                     <el-input v-model="addForm.code" :placeholder="$t('pholder.input')"></el-input>
                     <i class="error-tip">*</i>
                 </el-form-item>
-                <el-form-item :label="$t('dialog.deviceNum')" prop="deviceSerialNum">
+                <!-- <el-form-item :label="$t('dialog.deviceNum')" prop="deviceSerialNum">
                     <el-input v-model="addForm.deviceSerialNum" :placeholder="$t('pholder.input')"></el-input>
                     <i class="error-tip">*</i>
-                </el-form-item>
+                </el-form-item> -->
                 <el-form-item :label="$t('table.counterType')" prop="counterType">
                     <el-select v-model="addForm.counterType" :placeholder="$t('pholder.select')">
                         <el-option v-for="item in counterTypeData" :key="item.key" :label="item.value" :value="item.key" />
@@ -197,7 +197,7 @@ export default {
 <style scoped lang="less">
  .dialog_lj{
      /deep/.el-dialog__body{
-         height: 320px;
+         height: 300px;
      }
     /deep/.el-form-item__label{
       line-height: 30px;

src/views/queueManagement/channelManagement/index.vue

@@ -20,7 +20,7 @@
     <div class="aiot_alone_long">
       <div class="aiot_left">
         <div style="margin:0 0 10px 10px">
-          <el-button type="primary" size="mini" class="search-btn" @click="addDesk">{{$t('button.groupAdd')}}</el-button>
+          <el-button type="primary" size="mini" @click="addDesk">{{$t('button.groupAdd')}}</el-button>
         </div>
         <el-row class="manage-content">
           <el-col :span="24" class="treeMenu boxShadow">
@@ -79,8 +79,8 @@
                   <div class="dwrap">
                     <img class="dimg" :src="item.picUrl" :style="{ maxHeight: tableHeight-60 + 'px' }" />
                     <div class="label-box">
-                      <p>{{ $t('table.laneName') + ': ' + item.name }}</p>
-                      <p>{{ $t('table.deviceNum') + ': ' + item.serialnum }}</p>
+                      <!-- <p>{{ $t('table.laneName') + ': ' + item.name }}</p> -->
+                      <p style="background-color: #FAFAFA;padding: 3px 10px;">{{ $t('table.deviceNum') + ': ' + item.localIp + '—' + item.serialnum }}</p>
                     </div>
                     <div class="pview">
                       <Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>