tll

src/views/queueManagement/channelManagement/index.vue

@@ -24,7 +24,7 @@
         </div>
         <el-row class="manage-content">
           <el-col :span="24" class="treeMenu boxShadow">
-            <el-table ref="singleTable" @row-click="setCurrent" @current-change="handleCurrentChange" :data="tableData" :max-height="tableHeight-18" :highlight-current-row='true' style="width: 100%;" v-loading="loading" header-row-class-name="manage-tab-head">
+            <el-table ref="singleTable" @row-click="setCurrent" @current-change="handleCurrentChange" :data="tableData" :max-height="tableHeight-28" :highlight-current-row='true' style="width: 100%;" v-loading="loading" header-row-class-name="manage-tab-head">
               <el-table-column :label="$t('table.laneName')" align="center" prop="name"></el-table-column>
               <el-table-column width="200" :label="$t('table.counterType')" :formatter="formatCounterType" align="center" prop="counterType"></el-table-column>
               <el-table-column :label="$t('table.operate')" align="center">
@@ -43,6 +43,9 @@
         </el-row>
       </div>
       <div class="aiot_right">
+        <!-- <el-row v-if="ptype==1" :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight + 'px' }">
+     
+          </el-row> -->
         <el-col :span="24" class="personInfo">
           <ul class="legends">
             <el-button size="mini" type="danger" @click="clearDesk">{{$t('button.clear')}}</el-button>
@@ -50,16 +53,34 @@
           </ul>
           <div class="draw_desks">
             <el-row :loading="loading" class="pwraper" :style="{ maxHeight: tableHeight-18 + 'px' }">
+              <!-- <ul class="dlist" ref="dlist">
+              <li class="ditem" style="height:0;margin:0;">
+                <div class="dwrap"></div>
+              </li>
+              <li class="ditem" v-for="(item, index) in canvasList" :key="index" >
+                <div class="dwrap">
+                  <img class="dimg" :src="item.picUrl" />
+                  <div class="label-box">
+                    <p>{{ $t('table.monitorSiteName') + ': ' + item.name }}</p>
+                    <p>{{ $t('table.deviceNum') + ': ' + item.serialnum }}</p>
+                  </div>
+                  <div class="pview">
+                    <Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
+                  </div>
+                </div>
+              </li>
+            </ul> -->
+
               <ul class="dlist" ref="dlist">
                 <li class="ditem" style="height:0;margin:0;">
-                  <div class="fwrap"></div>
+                  <div class="dwrap"></div>
                 </li>
                 <li class="ditem" v-for="(item, index) in canvasList" :key="index" style="margin:10px 10px 0 0">
-                  <div class="fwrap">
+                  <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.deviceNum') + ': ' + item.serialnum }}</p>
                     </div>
                     <div class="pview">
                       <Painter :cdata="item" :isEdit="true" :desk="currentRow" :list="tableData" @gclick="groupClick" @start="startDesk" @finish="finishDesk"></Painter>
@@ -114,6 +135,8 @@ export default {
   data() {
     return {
       mallListForTerm: [],
+      areaObj: {},
+      gateList: [],
       searchForm: {
         mallId: "",
         areaId: "",
@@ -253,16 +276,62 @@ export default {
           this.loading = false;
           if (result.code == 200) {
             this.tableData = result.data.list;
+            this.areaObj = { ...this.tableData[0] };
             if (this.tableData.length > 0) {
               this.tableData.forEach((item) => {
                 item.picUrl = this.floorImg;
               });
               this.chooseList.push(result.data.list[0]);
             }
-            this.drawFloorMap();
+            this.$api.queueManagementApi
+              .getDevices({
+                areaId: this.searchForm.areaId,
+              })
+              .then((res) => {
+                console.log(res);
+                let data = res.data.data;
+                data.forEach((item) => {
+                  item.name = this.areaObj.name;
+                  item.id = item.serialnum;
+                  item.picUrl =
+                    window._vionConfig.picUrl +
+                    "/snapshot/real/" +
+                    item.serialnum +
+                    "-01.jpg?t=" +
+                    Date.parse(new Date()) / 1000;
+                  item.coordinate &&
+                    (item.coordinate = JSON.parse(item.coordinate));
+                });
+                this.gateList = data;
+                this.drawJoinMap();
+              });
+            // this.drawFloorMap();
           }
         });
     },
+    drawJoinMap() {
+      this.loading = false;
+      let that = this;
+      let canvasList = [];
+      _.each(this.gateList.reverse(), (item, index) => {
+        if (item.picUrl) {
+          let img = new Image();
+          img.src = item.picUrl;
+          img.onload = function () {
+            item.width = this.width;
+            item.height = this.height;
+            canvasList.push(item);
+            that.$nextTick(() => {
+              item.cwidth = document
+                .querySelector(".dwrap")
+                .getBoundingClientRect().width;
+              item.cheight = (item.cwidth * item.height) / item.width;
+              that.canvasList = canvasList;
+            });
+          };
+        }
+      });
+    },
     searchFun() {
       this.getTableData();
     },