index.vue

<template>
  <div class="video-container clerk-wrapper aiot_content" id="fulldiv" :class="fullscreen?'fulldiv':''">
    <div style="position:relative">
      <!-- <h1>{{$t('home.queueconfig')}}</h1> -->
      <h1>Queuing Managment DashBoard</h1>
      <div style="position:absolute;right:10px;top:10px;fontSize:20px">
          <span style="margin-right:10px;fontSize:14px">{{$t('table.updateTime')}}：{{updateTime}}</span>
        <i v-if="fullscreen" @click="exitFullScreen()" class="el-icon-rank" style="cursor:pointer"></i>
        <i v-else @click="showFullScreen()" class="el-icon-full-screen" style="cursor:pointer"></i>
      </div>
      <div class="aiot_title">
        <div class="aiot_title_item">
          <!-- <div class="aiot_title_item_text">{{$t('home.customersInQueue')}}</div> -->
          <div class="aiot_title_item_text">Customers in Queue</div>
          <div class="aiot_title_item_num">{{topData.customersInQueue}}</div>
          <div class="aiot_title_item_unit">Customers</div>
        </div>
        <div class="aiot_title_item">
          <!-- <div class="aiot_title_item_text">{{$t('home.averagewaitingtime')}}</div> -->
          <div class="aiot_title_item_text">Average Waiting</div>
          <div class="aiot_title_item_num">{{topData.averageWaitingTime[0]}}<small style="marginRight:5px">min</small>{{topData.averageWaitingTime[1]}}<small style="marginLeft:4px">s</small></div>
        </div>
        <div class="aiot_title_item">
          <!-- <div class="aiot_title_item_text">{{$t('home.predictedwaiting')}}</div> -->
          <div class="aiot_title_item_text">Predicted Waiting</div>
          <div class="aiot_title_item_num">{{topData.predictedWaiting[0]}}<small style="marginRight:5px">min</small>{{topData.predictedWaiting[1]}}<small style="marginLeft:4px">s</small></div>
        </div>
        <div class="aiot_title_item">
          <!-- <div class="aiot_title_item_text">{{$t('home.customersServedTillNow')}}</div> -->
          <div class="aiot_title_item_text">Customers Served</div>
          <div class="aiot_title_item_num">{{topData.customersServedTillNow}}</div>
          <div class="aiot_title_item_unit">Customers</div>
        </div>
        <div class="aiot_title_item">
          <div class="aiot_title_item_text">Throughput</div>
          <div class="aiot_title_item_num">{{topData.throughput}}</div>
          <div class="aiot_title_item_unit">Customers/hour</div>
        </div>
        <div class="aiot_title_item">
          <div class="aiot_title_item_text">Open Counters</div>
          <div class="aiot_title_item_num">{{topData.openCounters}}/{{topData.totalCounters}}</div>
        </div>
        <div class="aiot_title_item">
          <div class="aiot_title_item_text">Store Entry</div>
          <div class="aiot_title_item_num">{{topData.storeEntry}}</div>
          <div class="aiot_title_item_unit">Customers</div>
        </div>
        <div class="aiot_title_item">
          <div class="aiot_title_item_text">Store Exit</div>
          <div class="aiot_title_item_num">{{topData.storeExit}}</div>
          <div class="aiot_title_item_unit">Customers</div>
        </div>
      </div>
    </div>
    <div class="canvasContainer">
      <canvas id='container'></canvas>
    </div>
    <div class="aiot_bottom">
      <div class="tabel">
        <div class="tabel_title">
          <!-- <span>{{$t('home.queuingmonitoring')}}</span> -->
          <span>Queue Monitoring</span>
          <div class="lenged">
            <p>
              <small>{{safeingNum}}~{{warningNum}}</small><small class="colorBox colorBox_yellow"></small>
            </p>
            <p>
              <small>>{{warningNum}}</small><small class="colorBox colorBox_red"></small>
            </p>
          </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-column prop="laneName" :label="$t('table.laneName')" width="100"></el-table-column>
          <el-table-column prop="queueLength" :label="$t('table.queueLength')" width="130"></el-table-column>
          <el-table-column prop="name" :label="$t('home.averagewaitingtime')">
            <template slot-scope="{row}">
              <span>{{Math.floor(row.averageWaitingTime/60)}}min{{row.averageWaitingTime%60}}s</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" :label="$t('home.predictedwaiting')">
            <template slot-scope="{row}">
              <span>{{Math.floor(row.predictedWaiting/60)}}min{{row.predictedWaiting%60}}s</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="laneName" label='Lane' align="center" width="100">
            <!-- <template slot-scope="{row}">
              <span v-if="row.customersInQueue>warningNum"><img style="width: 16px;" src="../../../assets/img/warning.png" alt=""></span>
              <span>{{row.laneName}}</span>
            </template> -->
          </el-table-column>
          <el-table-column prop="customersInQueue" align="center" label="Customers in Queue" width="120">
              <template slot="header">
                <p class="cell_title">Customers</p>
                <p class="cell_title">in Queue</p>
                <!-- <p class="cell_unit">Customers</p> -->
              </template>
          </el-table-column>
          <el-table-column prop="averageWaitingTime" align="center" label="AVG.Waiting Time">
              <template slot="header">
                <p class="cell_title">AVG.Waiting</p>
                <p class="cell_title">Time</p>
                <!-- <p class="cell_unit">Time</p> -->
              </template>
            <template slot-scope="{row}">
              <span>{{Math.floor(row.averageWaitingTime/60)}}min{{row.averageWaitingTime%60}}s</span>
            </template>
          </el-table-column>
          <el-table-column prop="predictedWaiting" align="center" label="Predicted Waiting Time">
              <template slot="header">
                <p class="cell_title">Predicted</p>
                <p class="cell_title">Waiting Time</p>
                <!-- <p class="cell_unit">Time</p> -->
              </template>
            <template slot-scope="{row}">
              <span>{{Math.floor(row.predictedWaiting/60)}}min{{row.predictedWaiting%60}}s</span>
            </template>
          </el-table-column>
          <el-table-column prop="customersServedTillNow" align="center" label="Customers Served" width="160">
              <template slot="header">
                <p class="cell_title">Customers Served</p>
                <!-- <p class="cell_unit">Customers</p> -->
              </template>
          </el-table-column>
          <el-table-column prop="throughput" align="center" width="120" label="Throughput">
              <template slot="header">
                <p class="cell_title">Throughput</p>
                <p class="cell_unit">Customers/hour</p>
              </template>
          </el-table-column>
          <el-table-column prop="counterType" show-overflow-tooltip align="center" label="Lane Type" :formatter="formatCounterType" :filters="counterTypeData"
            :filter-method="filterTag"></el-table-column>
        </el-table>
      </div>
      <div class="chart" v-loading='isloading'>
          <div class="chart1">
              <div class="tabel_title">
                  <span>{{laneName}} Time Predicted</span>
                </div>
              <div id="chart_top" class="chartLine"></div>
          </div>
        <div class="chart1 chart2">
            <div class="tabel_title">
              <span>Customers Overview</span>
            </div>
            <div id="chart_bottom" class="chartLine"></div>
        </div>
      </div>
      <!-- <div class="chart" v-else style="display:flex;alignItem:center;justifyContent:center;">
        <img src="../../../assets/img/no_data.png" alt="" style="width:41px;height:42px">
      </div> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";
export default {
  data() {
    return {
      laneName:'',
      isloading: false,
      fullscreen: false, // 是否全屏
      mallId: null,
      laneId: null,
      regionId: 0,
      updateTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      pic: null,
      topData: {
        customersInQueue: 0,
        averageWaitingTime: [0, 0],
        predictedWaiting: [0, 0],
        customersServedTillNow: 0,
      }, //顶部数据
      canvas: null, //canvas实例
      ctx: null, //ctx画笔
      widthX: 0, //缩放比例X
      heightX: 0, //缩放比例Y
      dataList: [], //点位坐标
      chart_top: null,
      chart_bottom: null,
      time1: null,
      time2: null,
      tableData: [],
      counterTypeData:[],
      warningNum:0,
      safeingNum:0,
      optionTopConfig: {
          tooltip: {
              trigger: 'axis',
              backgroundColor: "rgba(255,255,255,0.8)",
              borderWidth: "2", //边框宽度设置1
              borderColor: "gray", //设置边框颜色
              textStyle: {
                  color: "#333" //设置文字颜色
              },
              formatter:this.tooltipFormat
          },
          legend: {
              data: [],
              padding:[10,0,0,80],
              x:'100',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              top:'40',
              containLabel: true
          },
          color: ['#3BB8FF', '#FFC62E', '#97c05c'],
          xAxis: [{
              type: 'category',
              data: [],
              boundaryGap: false,
              axisPointer: {
                  type: 'shadow'
              }
          }],
          yAxis: [
              {
                type: 'value',
                name: 'Time(s)',
              },
              {
                type: 'value',
                name: 'Customers'
              },
            ],
          series: []
      },
      optionBottomConfig: {
          tooltip: {
              trigger: 'axis',
              backgroundColor: "rgba(255,255,255,0.8)",
              borderWidth: "2", //边框宽度设置1
              borderColor: "gray", //设置边框颜色
              textStyle: {
                  color: "#333" //设置文字颜色
              },
              formatter:this.tooltipFormat1
          },
          legend: {
              data: [],
              padding:[10,0,0,150],
              x:'100',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              top:'40',
              containLabel: true
          },
          color: ['#3BB8FF', '#FFC62E', '#97c05c'],
          xAxis: [{
              type: 'category',
              data: [],
              boundaryGap: false,
              axisPointer: {
                  type: 'shadow'
              }
          }],
          yAxis: [
              {
                type: 'value',
                name: 'Customers'
              }
            ],
          series: []
      }
    };
  },
  mounted() {
    this.getCounterType();
    this.getMallListForTerm();
    this.chart_top = echarts.init(document.getElementById("chart_top"));
    this.chart_bottom = echarts.init(document.getElementById("chart_bottom"));
    this.canvas = document.getElementById("container");
    this.ctx = this.canvas.getContext("2d");
    this.canvas.width = document.body.clientWidth - 248;
    this.canvas.height = 280;
    this.widthX = (1920 / this.canvas.width).toFixed(2);
    this.heightX = (1080 / this.canvas.height).toFixed(2);
    window.addEventListener("resize", () => {
      this.setCanvasWidth();
      this.chart_top.resize();
      this.chart_bottom.resize();
    });
    this.time1 = setInterval(() => {
        this.updateTime = moment().format("YYYY-MM-DD HH:mm:ss");
        this.getStatistics();
        this.getDistribution();
    }, 1000);
    this.time2 = setInterval(() => {
      this.getchart(false);
      this.getCustomersOverview()
    }, 60000);
  },
  beforeDestroy() {
    if (this.time1) {
      clearInterval(this.time1);
    }
    if (this.time2) {
      clearInterval(this.time2);
    }
  },
  deactivated() {
    if (this.time1) {
      clearInterval(this.time1);
    }
    if (this.time2) {
      clearInterval(this.time2);
    }
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return windowInnerHeight - windowInnerHeight * 0.24;
    },
  },
  methods: {
      tooltipFormat(parmas){
          let htmls = "";
          htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`;
          parmas.forEach((item,index) => {
              if(index==0){
                  htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('format.perNum')}</p>`;
              }else{
                  let count = item.data
                  if(count>60){
                     count = parseInt(count/60) + 'min' + count%60+'s'
                  }else{
                      count = count +'s'
                  }
                  htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${count}</p>`;
              }
          });
          htmls += "</div>";
          return htmls;
      },
      tooltipFormat1(parmas){
          let htmls = "";
          htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`;
          parmas.forEach((item,index) => {
              // if(item.data){
                  htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('format.perNum')}</p>`;
              // }
          });
          htmls += "</div>";
          return htmls;
      },
      formatCounterType(row, column, cellValue){
          let result = ''
          this.counterTypeData.forEach(item=>{
            if(item.key==cellValue){
              result = item.value
            }
          })
          return result
      },
      getCounterType(){
          this.$api.base.dataDic({
            type: 'counterType'
          }).then(res => {
            this.counterTypeData = res.data.data.map(item=>{
                 if(localStorage.getItem('lang') == 'en_US'){
                    item.value = item.valueEn;
                 }
                 item.text = item.value
                 return item;
              });
          })
      },
      filterTag(value, row, column){
          let result = ''
          this.counterTypeData.forEach(item=>{
            if(item.value==value){
              result = item.key
            }
          })
          const property = column['property'];
          return row[property] === result;
      },
    showFullScreen() {
      this.fullscreen = true;
      var full = document.getElementById("fulldiv");
      this.launchIntoFullscreen(full);
    },
    exitFullScreen() {
      this.fullscreen = false;
      this.exitFullscreen();
    },
    //div标签全屏方法
    launchIntoFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    //退出div标签全屏方法
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    getMallListForTerm() {
      this.mallId = "";
      this.$api.base
        .mall({
          accountId: this.$cookie.get("accountId"),
          status_arr: "1,3",
        })
        .then((data) => {
          let result = data.data;
          if (result.data.length) {
            if(this.getSessionLocal("mallId")){
              this.mallId = Number(this.getSessionLocal("mallId"));
            }else{
              this.mallId = result.data[0].id;
            }
            this.getRegionId();
          }
        });
    },
    // 获取顶部指标和按通道统计排队情况
    async getStatistics() {
      try {
        let res = await this.$api.queueManagementApi.getStatistics({
          cashierAreaId: this.regionId,
          mallId: this.mallId,
        });
        let { code, data } = res.data;
        if (code == 200) {
          this.topData = {
            customersInQueue: data.customersInQueue,
            averageWaitingTime: [
              Math.floor(data.averageWaitingTime / 60),
              data.averageWaitingTime % 60,
            ],
            predictedWaiting: [
              Math.floor(data.predictedWaiting / 60),
              data.predictedWaiting % 60,
            ],
            customersServedTillNow: data.customersServedTillNow,
            customersServedTillNow: data.customersServedTillNow,
            throughput: data.throughput,
            openCounters: data.openCounters,
            totalCounters: data.totalCounters,
            storeEntry: data.storeEntry,
            storeExit: data.storeExit,
          };
          this.tableData = data.channelQueueDTOS;
        }
      } catch (error) {}
    },
    // 获取主页大屏人员点位分布
    async getDistribution() {
      try {
        let res = await this.$api.queueManagementApi.getdistribution({
          cashierAreaId: this.regionId,
        });
        let { code, data } = res.data;
        if (code == 200) {
          let red = data.red ? data.red : [];
          let green = data.green ? data.green : [];
          this.dataList = [
            ...red.map((item) => ({ ...item, status: 1 })),
            ...green.map((item) => ({ ...item, status: 0 })),
          ];

          this.drawCirlce();
        }
      } catch (error) {}
    },
    // 获取数据回放图表
    async getchart(ishave = true) {
      try {
        if (ishave) {
          this.isloading = true;
        }
        let res = await this.$api.queueManagementApi.getchart({
          cashierAreaId: this.regionId,
          mallId: this.mallId,
          chartType: "line",
          countDate: moment().format("YYYY-MM-DD"),
          cashierChannelId: this.laneId,
        });
        this.isloading = false;
        let { code, data } = res.data;
        if (code == 200) {
            this.optionTopConfig.xAxis[0].data = data.xaxis.data;
            this.optionTopConfig.series = data.series;
            this.optionTopConfig.legend.data = []
            data.series.forEach((item,index)=>{
                this.optionTopConfig.legend.data.push(item.name)
                item.smooth=0.6;
                item.symbol='none';
                if(index==0){
                    item.yAxisIndex = 1;
                }
            })
            this.chart_top.setOption(this.optionTopConfig, true)
        }
      } catch (error) {
        this.isloading = false;
      }
    },
    // 获取进出客流
    getCustomersOverview(){
      this.$api.queueManagementApi.getCustomersOverview({
          mallId: this.mallId,
          chartType: "line",
          countDate: moment().format("YYYY-MM-DD"),
      }).then(res => {
          this.loading = false;
          if(res.data.code==200){
              let resData = res.data.data;
              this.optionBottomConfig.xAxis[0].data = resData.xaxis.data;
              this.optionBottomConfig.series = resData.series;
              this.optionBottomConfig.legend.data = []
              resData.series.forEach((item,index)=>{
                  item.smooth=0.6;
                  item.symbol='none';
                  this.optionBottomConfig.legend.data.push(item.name)
              })
              this.chart_bottom.setOption(this.optionBottomConfig, true)
          }
      })
    },
    // 获取区域id
    getRegionId() {
      this.$api.queueManagementApi
        .getAreaList({ mallId: this.mallId })
        .then((res) => {
          let result = res.data;
          if (result.code == 200) {
            this.regionId = result.data.list[0] && result.data.list[0].id;
            this.warningNum = result.data.list[0].warnNum
            this.safeingNum = result.data.list[0].safeNum
            this.pic = new Image();
            this.pic.src =
              result.data.list[0] &&
              window._vionConfig.picUrl + result.data.list[0].pic;
            this.pic.onload = () => {
              this.drawCirlce();
            };

            this.getAllData();
          }
        });
    },
    // 获取页面所有数据
    getAllData() {
      this.getStatistics();
      this.getDistribution();
      this.getchart();
      this.getCustomersOverview()
    },
    tableRowClassName: function({ row, rowIndex }) {
      if (row.customersInQueue > this.warningNum) {
        return 'danger-row';
      }else if(row.customersInQueue >this.safeingNum && row.customersInQueue <= this.warningNum){
          return 'warn-row';
      }else{
          return 'safe-row';
      }
    },
    // 表格点击触发
    handleCurrentChange(row) {
      this.laneId = row.laneId;
      this.laneName = row.laneName;
      this.getchart();
    },
    //动态设置canvas的宽度
    setCanvasWidth() {
      if (this.fullscreen) {
        this.canvas.width = document.body.clientWidth - 20;
        this.canvas.height = 300;
      } else {
        this.canvas.width = document.body.clientWidth - 248;
        this.canvas.height = 280;
      }
      this.widthX = (1920 / this.canvas.width).toFixed(2);
      this.heightX = (1080 / this.canvas.height).toFixed(2);
      this.drawCirlce();
    },
    // 画圆点
    drawCirlce() {
      if (!this.pic) return false;
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.ctx.drawImage(this.pic, 0, 0, this.canvas.width, this.canvas.height);
      this.dataList.forEach((item) => {
        if (item.status == 1) {
          this.ctx.fillStyle = "red";
        } else {
          this.ctx.fillStyle = "green";
        }
        this.ctx.beginPath();
        this.ctx.arc(
          (item.x / 100) * this.canvas.width,
          (item.y / 100) * this.canvas.height,
          5,
          0,
          2 * Math.PI
        );
        this.ctx.fill();
      });
    },
  },
};
</script>

<style scoped="scoped" lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.fulldiv{
    padding-bottom: 35px !important;
}
#fulldiv {
  background: #fff;
}
.canvasContainer{
    width: calc(100% - 5px);
    text-align:center;
    box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
    margin-bottom: 7px;
}
.aiot_content {
  height: 100%;
  padding: 0 8px 0px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  color: #555;
  .aiot_title {
    display: flex;
    justify-content: space-around;
  }
  .aiot_title_item {
      text-align: center;
      padding: 5px 12px;
      box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
      margin-right: 10px;
      margin-bottom: 10px;
      flex: 1;
      &:last-child{
          margin-right: 5px;
      }
    .aiot_title_item_text {
      font-size: 14px;
      font-weight: 700;
      margin-right: 10px;
    }
    .aiot_title_item_num {
      font-size: 26px;
      font-weight: 700;
      color: #2774e9;
      min-width: 110px;
      margin: 0 0 5px 0;
    }
    .aiot_title_item_unit{
        font-size: 12px;
        font-weight: 700;
        color: #2774e9;
    }
  }
  .tabel_title {
    // display: flex;
    // justify-content: space-between;
    height: 30px;
    color: #fff;
    padding-left: 10px;
    line-height: 30px;
    background-color: #2774e9;
    position: relative;
    span {
      display: inline-block;
      font-size: 14px;
      font-weight: 700;
    }
    .lenged{
      position: absolute;
      left: 300px;
      top: 0;
      p{
        display: inline-block;
        margin-right: 30px;
        small{
          display: inline-block;
        }
        .colorBox{
           margin-left: 10px;
          width: 25px;
          height: 15px;
          vertical-align: middle;
        }
        .colorBox_yellow{
          background-color: #FF9631;
        }
        .colorBox_red{
          background-color: #FF4040;
        }
      }
    }
  }
  .aiot_bottom {
    display: flex;
    height: calc(100% - 435px);
    // margin-top: 5px;
    .tabel {
      width: calc(55% - 10px);
      height: calc(100% - 5px);
      margin-right: 10px;
      box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
      .cell-title{
          font-weight: 700 !important;
      }
      .cell_unit{
          font-size: 12px;
          font-weight: normal !important;
      }
    }
    .chart {
      // overflow: hidden;
      width: 45%;
      height: 100%;;
      .chartLine{
          width: 100%;
          height: calc(100% - 30px);
      }
      .chart1{
          width: calc(100% - 5px);
          height: calc(50% - 5px);
          box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
          margin-bottom: 7px;
      }
      .chart2{
          height: calc(50% - 7px);
      }
    }
  }
}
/deep/.el-table{
    .el-table__cell{
        padding: 5px 0;
    }
    .cell{
        text-overflow:ellipsis !important
    }
    .el-table__column-filter-trigger i{
        color: #333;
        margin-left: 10px;
        font-size: 16px;
    }
    th.el-table__cell{
        background-color: #f5f7fa !important;
        color: #333;
    }
    tr.danger-row{
        background-color: #FF4040 !important;
        color: #fff;
    }
    tr.warn-row{
        background-color: #FF9631 !important;
        color: black;
    }
    tr.el-table__row.danger-row{
      &:hover{
        color: #333 !important;
      }
    }
    tr.el-table__row.warn-row{
      &:hover{
        color: #333 !important;
      }
    }
}

h1 {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding: 10px 0;
}

</style>