优化

李君
Commit dbb8ff2c authored Nov 11, 2022 by 李君
Showing 5 changed files with 169 additions and 31 deletions
src/views/Behavior/common/option/queueRecordsOption.vue
src/views/Behavior/queueRecords.vue
src/views/queueManagement/basicPassengerFlow/index.vue
src/views/queueManagement/dataPlayback/index.vue
src/views/queueManagement/queueLive/index.vue
--- a/src/views/Behavior/common/option/queueRecordsOption.vue
+++ b/src/views/Behavior/common/option/queueRecordsOption.vue
@@ -35,15 +35,24 @@
          ></el-option>
        </el-select>
      </div>
-      <!-- 日期时间 -->
      <div class="test-opt-time mr20">
+        <span class="labelName">trackType</span>
+        <el-select v-model="trackType" class="mall-opt" filterable :placeholder="$t('pholder.select')" @change="chooseTrackType">
+          <el-option value="" :label="$t('pholder.all')"></el-option>
+          <el-option v-for="item in trackTypeOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
+        </el-select>
+      </div>
+      <!-- 日期时间 -->
+      <div class="test-opt-time mr20 timeHr">
        <span class="labelName">{{$t('table.date')}}</span>
        <el-date-picker
              v-model="countDate"
              type="datetimerange"
              :range-separator="$t('dialog.to')"
              :start-placeholder="$t('table.startTime')"
-              :end-placeholder="$t('table.endTime')">
+              :end-placeholder="$t('table.endTime')"
+              :default-time="['08:00:00', '23:00:00']">
            </el-date-picker>
      </div>
      <!-- trackTime -->
@@ -103,6 +112,25 @@ export default {
      pageLimit: 45,
      typeList: [],
      accountId: this.$cookie.get('accountId'),
+      trackType:'',
+      trackTypeOpt:[
+        {
+          name:'complete',
+          id:0,
+        },
+        {
+          name:'abandonQueue',
+          id:1,
+        },
+        {
+          name:'disappearInMid',
+          id:2,
+        },
+        {
+          name:'appearInMid',
+          id:3,
+        }
+      ]
    }
  },
  computed: {
@@ -209,6 +237,10 @@ export default {
    chooseType() {
      this.clickHandle()
    },
+    chooseTrackType(){
+      this.$forceUpdate()
+      this.clickHandle()
+    },
    chooseTime() {
      this.clickHandle()
    },
@@ -230,6 +262,7 @@ export default {
        serviceTimeEnd:this.serviceTimeEnd,
        queueTimeStart:this.queueTimeStart,
        queueTimeEnd:this.queueTimeEnd,
+        trackType:this.trackType
      }
      Object.keys(_params).forEach(item=>{
        if (_params[item] === '' || _params[item] === undefined || _params[item] === null || _params[item] === 'null')

--- a/src/views/Behavior/queueRecords.vue
+++ b/src/views/Behavior/queueRecords.vue
@@ -72,11 +72,30 @@
      :close-on-click-modal="false"
      class="manage-dialog"
      :before-close="closeDialog"
-      width="1000"
      :title="$t('button.showTrack')"
    >
-      <div v-loading='canvasLoading' style="width: 100%;text-align: center;padding: 40px 0;height: 100%;">
+      <div v-loading='canvasLoading' style="width: 100%;padding: 40px 0;height: 100%;">
        <canvas id="cameraCanvas" class="xycanvas"></canvas>
+        <ul class="recordDetail">
+          <li class="info">
+            <span class="info_name">{{$t('table.personTypeName')}}</span><span class="info_value">{{personTypeFormatter(recordObj.personType)}}</span>
+          </li>
+          <li class="info">
+            <span class="info_name">trackType</span><span class="info_value">{{trackTypeFormatter(recordObj.trackType)}}</span>
+          </li>
+          <li class="info">
+            <span class="info_name">{{$t('table.date')}}</span><span class="info_value">{{recordObj.counttime}}</span>
+          </li>
+          <li class="info">
+            <span class="info_name">trackTime</span><span class="info_value">{{Math.floor(recordObj.trackTime/60)}}min{{recordObj.trackTime%60}}s</span>
+          </li>
+          <li class="info">
+            <span class="info_name">serviceTime</span><span class="info_value">{{Math.floor(recordObj.serviceTime/60)}}min{{recordObj.serviceTime%60}}s</span>
+          </li>
+          <li class="info">
+            <span class="info_name">queueTime</span><span class="info_value">{{Math.floor(recordObj.queueTime/60)}}min{{recordObj.queueTime%60}}s</span>
+          </li>
+        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
          <el-button @click="isShowAll = false" class="dialog-btn">{{ $t('dialog.close') }}</el-button>
@@ -98,6 +117,25 @@ export default {
  },
  data() {
    return {
+      trackTypeOpt:[
+        {
+          name:'complete',
+          id:0,
+        },
+        {
+          name:'abandonQueue',
+          id:1,
+        },
+        {
+          name:'disappearInMid',
+          id:2,
+        },
+        {
+          name:'appearInMid',
+          id:3,
+        }
+      ],
+      recordObj:{},
      canvasLoading:true,
      cmeraImage:'',
      canvasDevice: null, //canvas实例
@@ -204,12 +242,17 @@ export default {
      const matched = this.personTypeList.find(item => item.id === personType)
      return matched && matched.name || (visibleNew ? this.$t('table.newCustomer') : this.$t("dictionary.custom"))
    },
+    trackTypeFormatter(personType, visibleNew) {
+      const matched = this.trackTypeOpt.find(item => item.id === personType)
+      return matched && matched.name
+    },
    showAllImg(item) {
+      this.recordObj = item;
      let picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.channelSerialnum + ".jpg?t=" + Date.parse(new Date()) / 1000;
      this.isShowAll = true;
      this.canvasLoading = true;
      this.$api.queueManagementApi.getTrajectory({
-        personId:item.personUnid,
+        id:item.id,
        countTime:item.counttime
      }).then(res => {
        let result = res.data;
@@ -227,20 +270,35 @@ export default {
    drawCirlceDevice(result){
      this.ctxDevice.clearRect(0, 0, this.canvasDevice.width, this.canvasDevice.height);
      this.ctxDevice.drawImage(this.cmeraImage, 0, 0, this.canvasDevice.width, this.canvasDevice.height);
-      let dataList = result.data;
+      let dataList = result.data.track;
      this.canvasLoading = false
-      dataList.forEach((item) => {
+      if(dataList.length<2){
-        this.ctxDevice.fillStyle = "red";
+        dataList.forEach((item) => {
+          this.ctxDevice.fillStyle = "red";
+          this.ctxDevice.beginPath();
+          this.ctxDevice.arc(
+            (item.x / 1920) * this.canvasDevice.width,
+            (item.y / 1080) * this.canvasDevice.height,
+            5,
+            0,
+            2 * Math.PI
+          );
+          this.ctxDevice.fill();
+        });
+      }else{
        this.ctxDevice.beginPath();
-        this.ctxDevice.arc(
+        this.ctxDevice.strokeStyle = 'red';
-          (item.x / 1920) * this.canvasDevice.width,
+        this.ctxDevice.lineWidth = 5
-          (item.y / 1080) * this.canvasDevice.height,
+        dataList.forEach((item,index)=>{
-          5,
+          if(index==0){
-          0,
+            this.ctxDevice.moveTo((item.x / 1920) * this.canvasDevice.width, (item.y / 1080) * this.canvasDevice.height)
-          2 * Math.PI
+          }else{
-        );
+            this.ctxDevice.lineTo((item.x / 1920) * this.canvasDevice.width, (item.y / 1080) * this.canvasDevice.height)
-        this.ctxDevice.fill();
+          }
-      });
+        })
+        this.ctxDevice.closePath();
+        this.ctxDevice.stroke();
+      }
    },
    closeDialog() {
      this.isShowAll = false;
@@ -257,10 +315,10 @@ export default {
    },
    handleCurrentChange(val) {
      if (this.currentPage != val) {
-        this.emitData.page = val;
+        this.emitData.pageNum = val;
        this.currentPage = val;
      } else {
-        this.emitData.page = val;
+        this.emitData.pageNum = val;
        this.currentPage = val;
        // this.loading = true;
      }
@@ -278,7 +336,7 @@ export default {
    },
    getPatams(param) {
      this.pageSize = param.pageSize;
-      this.currentPage = param.page;
+      this.currentPage = param.pageNum;
      this.emitData = Object.assign('',param)
      this.getTableData();
    },
@@ -287,9 +345,27 @@ export default {
 </script>
 <style scoped lang="less">
+  .recordDetail,.xycanvas{
+    display: inline-block;
+    vertical-align: top;
+  }
+  .recordDetail{
+    width: 300px;
+    font-size: 14px;
+    margin-left: 20px;
+    .info{
+      margin-bottom: 8px;
+      .info_name,.info_value{
+        display: inline-block;
+      }
+      .info_name{
+        width: 120px;
+      }
+    }
+  }
  .manage-dialog{
    /deep/.el-dialog{
-      width: 1200px;
+      width: 1400px;
      height: 700px;
    }
  }

--- a/src/views/queueManagement/basicPassengerFlow/index.vue
+++ b/src/views/queueManagement/basicPassengerFlow/index.vue
@@ -24,7 +24,7 @@
                </span>
            </h3>
            <div class="asis-table-content" v-loading="loading">
-                <el-table v-show="isTabChart" class="asis-table baseasis-table" id="domBaseTrafficFlow" :data="tabOps" header-row-class-name="asis-table-head" style="width: 100%" :max-height="tableHeight">
+                <el-table show-summary v-show="isTabChart" class="asis-table baseasis-table" id="domBaseTrafficFlow" :data="tabOps" header-row-class-name="asis-table-head" style="width: 100%" :max-height="tableHeight">
                    <el-table-column v-if="tabOps.length" type="index" :label="$t('table.order')" align="center" width="80">
                        <template slot-scope="scope">
                            <span>{{ indexFormatter(scope) }}</span>

--- a/src/views/queueManagement/dataPlayback/index.vue
+++ b/src/views/queueManagement/dataPlayback/index.vue
@@ -18,7 +18,9 @@
                        type="datetimerange"
                        :range-separator="$t('dialog.to')"
                        :start-placeholder="$t('table.startTime')"
-                        :end-placeholder="$t('table.endTime')">
+                        :end-placeholder="$t('table.endTime')"
+                        :default-time="['08:00:00', '23:00:00']"
+                        >
                      </el-date-picker>
                    <!-- <el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate"></el-date-picker> -->
                </el-form-item>
@@ -126,7 +128,7 @@
                    <img src="../../../assets/sacle.png" >
                  </div>
                </div>
-                <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" height='calc(100% - 30px)' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'>
+                <el-table :data="tableData" ref="laneTable" style="width: 100%" :row-class-name="tableRowClassName" height='calc(100% - 30px)' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'>
                  <el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" width="100">
                  </el-table-column>
                  <el-table-column prop="customersInQueue" align="center" label="Customers in Queue" width="80">
@@ -785,9 +787,16 @@
            },
            // 表格点击触发
            handleCurrentChange(row) {
-              this.laneId = row.laneId;
+              if(this.laneId == row.laneId){
-              this.laneName = row.laneName;
+                this.laneId = null;
-              this.getchart();
+                this.laneName = null;
+                this.$refs.laneTable.setCurrentRow()
+                this.getchart();
+              }else{
+                this.laneId = row.laneId;
+                this.laneName = row.laneName;
+                this.getchart();
+              }
            },
            formatCounterType(row, column, cellValue){
                let result = ''
@@ -983,6 +992,12 @@
    #container{
      margin-bottom: 7px;
    }
+    /deep/tr.current-row{
+      background-color: #3bb8ff  !important;
+      td.el-table__cell{
+        background-color: #3bb8ff  !important;
+      }
+    }
    /deep/.el-table{
        .el-table__cell{
            padding: 5px 0 !important;

--- a/src/views/queueManagement/queueLive/index.vue
+++ b/src/views/queueManagement/queueLive/index.vue
@@ -86,7 +86,7 @@
            <img src="../../../assets/sacle.png" >
          </div>
        </div>
-        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" height='calc(100% - 30px)' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'>
+        <el-table :data="tableData" ref="laneTable" style="width: 100%" :row-class-name="tableRowClassName" height='calc(100% - 30px)' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'>
          <el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" width="100">
          </el-table-column>
          <el-table-column prop="customersInQueue" align="center" label="Customers in Queue" width="80">
@@ -704,9 +704,17 @@ export default {
    },
    // 表格点击触发
    handleCurrentChange(row) {
-      this.laneId = row.laneId;
+      if(this.laneId == row.laneId){
-      this.laneName = row.laneName;
+        this.laneId = null;
-      this.getchart();
+        this.laneName = null;
+        this.$refs.laneTable.setCurrentRow()
+        this.getchart();
+      }else{
+        this.laneId = row.laneId;
+        this.laneName = row.laneName;
+        this.getchart();
+      }
    },
    //动态设置canvas的宽度
    setCanvasWidth() {
@@ -755,6 +763,12 @@ export default {
  // padding: 0;
  box-sizing: border-box;
 }
+/deep/tr.current-row{
+  background-color: #3bb8ff  !important;
+  td.el-table__cell{
+    background-color: #3bb8ff  !important;
+  }
+}
 .dialogChart1,.dialogChart2{
  width: 95%;
  height: 400px;