index.vue

<template>
    <div class="clerk-wrapper queueManagementContainer">
        <div class="header manage-head-wrapper">
            <el-form class="boxShadow searchFormSocial" ref="form" label-width="90px" inline>
                <el-form-item :label="$t('table.mall')">
                    <el-select v-model="searchForm.mallId" filterable :placeholder="$t('pholder.select')" @change="mallChange">
                        <el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('table.areaName')">
                    <el-select v-model="searchForm.cashierAreaId" :placeholder="$t('pholder.areaSelect')" @change="areaChange">
                        <el-option v-for="item in areaListData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('table.date')">
                  <el-date-picker
                        v-model="searchForm.countDate"
                        type="datetimerange"
                        :range-separator="$t('dialog.to')"
                        :start-placeholder="$t('table.startTime')"
                        :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>
                <el-form-item>
                    <!-- <el-time-picker is-range v-model="searchForm.time" :range-separator="$t('dialog.to')" :start-placeholder="$t('pholder.startDate')" :end-placeholder="$t('pholder.endDate')" placeholder="选择时间范围">  </el-time-picker> -->
                </el-form-item>
                <el-form-item :label="$t('table.granularity')">
                    <el-select v-model="searchForm.granularity" :placeholder="$t('pholder.select')">
                        <el-option v-for="item in granularityListData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="search-btn" size="mini" plain @click="searchFun">{{$t('button.search')}}</el-button>
                    <el-button type="primary" class="search-btn" v-if="!playBtnShow" size="mini" plain @click="playFun">{{$t('button.play')}}</el-button>
                    <el-button type="primary" class="search-btn" v-if="playBtnShow" size="mini" plain @click="pauseFun">{{$t('button.pause')}}</el-button>
                </el-form-item>
                <el-form-item v-show="progressShow">
                  <span style="margin-left: 50px;">{{progressTime.substring(11)}}</span>
                </el-form-item>
            </el-form>
        </div>
        <div class="manage-content">
          <div >
            <div class="aiot_title">
              <div class="aiot_title_item">
                <div class="aiot_title_item_text">Customers in Queue<span class="aiot_title_item_unit">(Customers)</span></div>
                <div class="aiot_title_item_num">{{topData.customersInQueue}}</div>
              </div>
              <div class="aiot_title_item">
                <div class="aiot_title_item_text">Average Waiting Time</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">Average Service Time</div>
                <div class="aiot_title_item_num">{{topData.averageServiceTime[0]}}<small style="marginRight:5px">min</small>{{topData.averageServiceTime[1]}}<small style="marginLeft:4px">s</small></div>
              </div>
              <div class="aiot_title_item">
                <div class="aiot_title_item_text">Average Queuing Time</div>
                 <div class="aiot_title_item_num">{{topData.averageQueuingTime[0]}}<small style="marginRight:5px">min</small>{{topData.averageQueuingTime[1]}}<small style="marginLeft:4px">s</small></div>
              </div>
              <div class="aiot_title_item">
                <div class="aiot_title_item_text">Estimated Waiting Time</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">Open Counters</div>
                <div class="aiot_title_item_num">{{topData.openCounters}}/{{topData.totalCounters}}</div>
              </div>
            </div>
            <div class="aiot_title">
              <div class="aiot_title_item">
                <div class="aiot_title_item_text">Customers Served <span class="aiot_title_item_unit">(Customers)</span></div>
                <div class="aiot_title_item_num">{{topData.customersServedTillNow}}</div>
              </div>
              <div class="aiot_title_item">
                <div class="aiot_title_item_text">Customers Served Per Hour</div>
                <div class="aiot_title_item_num">{{topData.throughput}}</div>
              </div>
              <div class="aiot_title_item">
                <div class="aiot_title_item_text" style="font-size: 13px !important;"> Customers Abandoned the Queue</div>
                <div class="aiot_title_item_num">{{topData.customersAbandonedQueue}}</div>
              </div>
              <div class="aiot_title_item">
                <div class="aiot_title_item_text"> Carts & Baskets</div>
                <div class="aiot_title_item_num">{{topData.carts}} & {{topData.baskets}}</div>
              </div>
              <!-- <div class="aiot_title_item">
                <div class="aiot_title_item_text">Crowded Counters</div>
                <div class="aiot_title_item_num">0</div>
              </div> -->
              <div class="aiot_title_item">
                <div class="aiot_title_item_text">Store Entry  <span class="aiot_title_item_unit">(Customers)</span></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 <span class="aiot_title_item_unit">(Customers)</span></div>
                <div class="aiot_title_item_num">{{topData.storeExit}}</div>
              </div>
            </div>
          </div>
            <div class="asis-table-content" v-loading="loading">
                <canvas id='container' class="boxShadow"></canvas>
                <!-- <div class="time-box1" v-show="progressShow">
                    <span style="float: left;">{{startTime}}</span>
                    <span style="color: #2774e9;">{{progressTime.substring(11)}}</span>
                    <span style="float: right;">{{endTime}}</span>
                </div> -->
                <!-- <div id="colorBox" v-show="progressShow"></div> -->
            </div>
            <div class="aiot_bottom">
              <div class="tabel">
                <div class="tabel_title">
                  <!-- <span>{{$t('home.queuingmonitoring')}}</span> -->
                  <span>Queue Monitoring</span>
                  <div class="lenged" v-if="!(JSON.stringify(ruleObj) =='{}')">
                    <p>
                      <small>Customers in Queue >{{ruleObj.queueLengthThreshold}} & AVG.Waiting > {{ruleObj.waitTimeThreshold}}min</small><small class="colorBox colorBox_red"></small>
                    </p>
                  </div>
                  <div class="openBtn" @click="openDialog('table')">
                    <img src="../../../assets/sacle.png" >
                  </div>
                </div>
                <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">
                      <template slot="header">
                        <p class="cell_title">Customers</p>
                        <p class="cell_title">in Queue</p>
                      </template>
                  </el-table-column>
                  <el-table-column prop="averageWaitingTime" align="center" label="AVG.Waiting Time" width="90">
                      <template slot="header">
                        <p class="cell_title">AVG.Waiting</p>
                        <p class="cell_title">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" width="110">
                      <template slot="header">
                        <p class="cell_title">Estimated</p>
                        <p class="cell_title">Waiting 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="80">
                      <template slot="header">
                        <p class="cell_title">Customers</p>
                        <p class="cell_title">Served</p>
                      </template>
                  </el-table-column>
                  <el-table-column prop="throughput" align="center" width="160" label="Throughput">
                      <template slot="header">
                        <p class="cell_title">Customers Served</p>
                        <p class="cell_title">Per Hour</p>
                        <!-- <p class="cell_unit">Customers/hour</p> -->
                      </template>
                  </el-table-column>
                  <el-table-column prop="abandonQueue" align="center" width="180">
                      <template slot="header">
                        <p class="cell_title">Customers Abandoned</p>
                        <p class="cell_title">the Queue</p>
                      </template>
                  </el-table-column>
                  <el-table-column prop="counterType" show-overflow-tooltip align="center" width="120" 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 class="openBtn" @click="openDialog('chart1')">
                            <img src="../../../assets/sacle.png" >
                          </div>
                        </div>
                      <div id="chart_left" class="chartLine"></div>
                  </div>
                <div class="chart1 chart2">
                    <div class="tabel_title">
                      <span>Customers Overview</span>
                      <div class="openBtn" @click="openDialog('chart1')">
                        <img src="../../../assets/sacle.png" >
                      </div>
                    </div>
                    <div id="chart_right" class="chartLine"></div>
                </div>
              </div>
            </div>
        </div>
        <el-dialog :title="$t('button.details')" :visible.sync="dialogShow" v-if="dialogShow" width="80%" :close-on-click-modal='false' class="manage-dialog dialog_lj" :before-close="closeDialog">
          <div v-if="openDialogType=='table'">
            <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :height='tableHeight' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'>
              <el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" >
              </el-table-column>
              <el-table-column prop="customersInQueue" align="center" label="Customers in Queue">
                  <template slot="header">
                    <p class="cell_title">Customers</p>
                    <p class="cell_title">in Queue</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>
                  </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">Estimated</p>
                    <p class="cell_title">Waiting 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" >
                  <template slot="header">
                    <p class="cell_title">Customers</p>
                    <p class="cell_title">Served</p>
                  </template>
              </el-table-column>
              <el-table-column prop="throughput" align="center" label="Throughput">
                  <template slot="header">
                    <p class="cell_title">Customers Served</p>
                    <p class="cell_title">Per Hour</p>
                    <!-- <p class="cell_unit">Customers/hour</p> -->
                  </template>
              </el-table-column>
              <el-table-column prop="abandonQueue" align="center">
                  <template slot="header">
                    <p class="cell_title">Customers Abandoned</p>
                    <p class="cell_title">the Queue</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 v-show="openDialogType=='chart1'">
            <div class="dialogChart1" id="dialogChart1"></div>
          </div>
          <div v-show="openDialogType=='chart2'">
            <div class="dialogChart2" id="dialogChart2"></div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.close')}}</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    import * as echarts from "echarts";
    import moment from 'moment'
    export default {
        data() {
            return {
              ruleObj:{},
              dialogShow:false,
              openDialogType:'',
                laneName:'',
                laneId: null,
                isloading: false,
                tableData: [],
                chart_left: null,
                chart_right: null,
                startTime:'',
                endTime:'',
                mallListForTerm: [],
                areaListData: [],
                areaOneObj:{},
                loading: false,
                searchForm: {
                    mallId: '',
                    cashierAreaId: '',
                    countDate:  ['','' ],
                    time:[new Date(), new Date()],
                    granularity:5
                },
                canvas: null, //canvas实例
                ctx: null, //ctx画笔
                widthX: 0, //缩放比例X
                heightX: 0, //缩放比例Y
                dataList: [], //点位坐标
                pic: null,
                timeInterval:null,
                progressShow:false,
                progressTime:'',
                playBtnShow:false,
                colorBoxWidth:0,
                channelNum:0,
                pauseBtn:false,
                topData: {
                  customersInQueue: 0,
                  averageWaitingTime: [0, 0],
                  predictedWaiting: [0, 0],
                  averageServiceTime: [0, 0],
                  averageQueuingTime: [0, 0],
                  customersServedTillNow: 0,
                },
                counterTypeData:[],
                warningNum:0,
                safeingNum:0,
                granularityListData:[
                    {
                        value: 1,
                        label: '1min'
                    }, {
                      value: 5,
                      label: '5min'
                    }, {
                      value: 10,
                      label: '10min'
                    },{
                      value: 15,
                      label: '15min'
                    }
                ],
                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:'50',
                        containLabel: true
                    },
                     color: ['#3BB8FF', '#FFC62E', '#97c05c','#d83965','#9036aa'],
                    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','#d83965','#9036aa'],
                    xAxis: [{
                        type: 'category',
                        data: [],
                        boundaryGap: false,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [
                        {
                          type: 'value',
                          name: 'Customers'
                        }
                      ],
                    series: []
                }
            }
        },
        created() {
          this.searchForm.countDate = [moment().format('YYYY-MM-DD')+' 08:00:00',moment().format('YYYY-MM-DD')+' 23:00:00']
        },
        mounted() {
            this.getMallListForTerm();
            this.getCounterType()
            this.chart_left = echarts.init(document.getElementById("chart_left"));
            this.chart_right = echarts.init(document.getElementById("chart_right"));
            this.canvas = document.getElementById("container");
            this.ctx = this.canvas.getContext("2d");
            this.canvas.width = document.body.clientWidth - 255;
            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_left.resize();
              this.chart_right.resize();
            });
            this.loading = true;
            console.log(this.searchForm)
        },
        computed: {
            tableHeight() {
                let windowHeight = window.innerHeight,
                  scale = 0.24

                scale = windowHeight <= 720
                  ? 0.4
                  : windowHeight <= 768
                    ? 0.38
                    : windowHeight <= 900
                      ? 0.36
                      : windowHeight <= 1080
                        ? 0.24
                        : 0.24
                return windowHeight - windowHeight * scale
            },
        },
        beforeDestroy() {
          if (this.timeInterval) {
            clearInterval(this.timeInterval);
          }
        },
        methods: {
          // 报警规则
          getRules(){
            this.$api.queueManagementApi.getAlarmRulesList({
                mallId: this.searchForm.mallId,
                areaId: this.searchForm.cashierAreaId,
                pageNum: 1,
                pageSize: 999999
            }).then(res => {
                let result = res.data;
                if (result.code == 200) {
                  if(result.data.list && result.data.list.length>0){
                    this.ruleObj = result.data.list[0]
                  }
                }
            })
          },
          openDialog(type){
            this.dialogShow = true;
            this.openDialogType = type;
            if(type=='chart1'){
              setTimeout(()=>{
                this.dialog_chart_top = echarts.init(document.getElementById("dialogChart1"));
                this.dialog_chart_top.setOption(this.optionTopConfig, true)
              },500)
            }else if(type=='chart2'){
              setTimeout(()=>{
               this.dialog_chart_bottom = echarts.init(document.getElementById("dialogChart2"));
               this.dialog_chart_bottom.setOption(this.optionBottomConfig, true)
              },500)
            }
          },
          closeDialog(){
            this.dialogShow = false;
          },
          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(item.data != null){
                  if(item.seriesName=='Queue Length'){
                      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 != null){
                      htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('format.perNum')}</p>`;
                  }
              });
              htmls += "</div>";
              return htmls;
          },
          getCountData(time){
            this.$api.queueManagementApi.getCountData({
                mallId: this.searchForm.mallId,
                cashierAreaId: this.searchForm.cashierAreaId,
                countDate: moment(this.searchForm.countDate[0]).format('YYYY-MM-DD'),
                startCountTime: time?moment(this.progressTime).format('YYYY-MM-DD HH:mm:ss'):moment(this.searchForm.countDate[0]).format('YYYY-MM-DD HH:mm:ss')
            }).then(res => {
                let result = res.data;
                if (result.code == 200) {
                  let data = result.data
                  this.topData = data;
                  this.topData.averageWaitingTime = [ Math.floor(data.averageWaitingTime / 60), data.averageWaitingTime % 60]
                  this.topData.predictedWaiting = [ Math.floor(data.predictedWaiting / 60), data.predictedWaiting % 60 ]
                  this.topData.averageServiceTime = [ Math.floor(data.averageServiceTime / 60), data.averageServiceTime % 60 ]
                  this.topData.averageQueuingTime = [ Math.floor(data.averageQueuingTime / 60), data.averageQueuingTime % 60 ]
                  this.tableData = data.channelQueueDTOS;
                }
            })
          },
          // 获取数据回放图表
          async getchart() {
            this.isloading = true;
            let res = await this.$api.queueManagementApi.getchart({
              cashierAreaId: this.searchForm.cashierAreaId,
              mallId: this.searchForm.mallId,
              chartType: "line",
              countDate: moment(this.searchForm.countDate[0]).format('YYYY-MM-DD'),
              cashierChannelId: this.laneId,
            });

            let { code, data } = res.data;
            if (code == 200) {
                this.isloading = false;
                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_left.setOption(this.optionTopConfig, true)
            }
          },
          // 获取进出客流
          getCustomersOverview(){
            this.$api.queueManagementApi.getCustomersOverview({
                mallId: this.searchForm.mallId,
                chartType: "line",
                countDate: moment(this.searchForm.countDate[0]).format('YYYY-MM-DD'),
            }).then(res => {
                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_right.setOption(this.optionBottomConfig, true)
                }
            })
          },
            // 广场
            getMallListForTerm() {
                this.mallListForTerm = [];
                this.searchForm.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.searchForm.mallId = Number(this.getSessionLocal("mallId"));
                        } else {
                            this.searchForm.mallId = result.data[0].id;
                            this.setSessionLocal("mallId", this.searchForm.mallId);
                        }
                        // this.getOpenTime()
                        this.mallListForTerm = result.data;
                    }
                    this.getAreaList(this.searchForm.mallId);
                })
            },
            mallChange(val) {
                this.setSessionLocal("mallId", val);
                this.searchForm.cashierAreaId = ''
                // this.channelNum = 0
                // this.getOpenTime()
                this.getAreaList(val)
            },
            // 获取门店开门关闭时间
            getOpenTime(){
                this.$api.base.getOpentimeList({mallId:this.searchForm.mallId}).then(res=>{
                    let result = res.data;
                    if(result.code==200){
                        let data = result.data.list[0]
                        let endTime = data.endTime
                        if(endTime.substring(10)=='00:00:00'){
                            endTime =endTime.substring(0,10)+ '23:59:59'
                        }
                        this.searchForm.time = [moment(data.startTime).format('YYYY-MM-DD HH:mm:ss'),moment(endTime).format('YYYY-MM-DD HH:mm:ss')]
                    }
                })
            },
            // 区域
            getAreaList(val) {
                this.areaListData = [];
                this.$api.queueManagementApi.getAreaList({
                    mallId: val,
                    pageNum: 1,
                    pageSize: 999999
                }).then(res => {
                    let result = res.data;
                    if (result.code == 200) {
                        if (result.data.list && result.data.list.length > 0) {
                            this.searchForm.cashierAreaId = result.data.list[0].id
                            this.areaListData = result.data.list;
                            this.areaOneObj = result.data.list[0]
                            // this.warningNum = result.data.list[0].warnNum
                            // this.safeingNum = result.data.list[0].safeNum
                            // this.getChannelList()
                            this.getRules();
                            this.pic = new Image();
                            this.pic.src =this.areaListData[0] && window._vionConfig.picUrl + this.areaListData[0].pic;
                            this.pic.onload = () => {
                              this.drawCirlce();
                            };
                            setTimeout(()=>{
                              this.searchFun()
                            },500)
                        }
                    }
                })
            },
            areaChange(val){
                this.getRules();
                this.areaOneObj = this.areaListData.find(item=> item.id==val);
                this.pic = new Image();
                this.pic.src =this.areaOneObj && window._vionConfig.picUrl + this.areaOneObj.pic;
                this.pic.onload = () => {
                  this.drawCirlce();
                };
                // this.getChannelList()
                setTimeout(()=>{
                  this.searchFun()
                },500)
            },
            // 通道
            // getChannelList() {
            //     this.$api.queueManagementApi.getChannelList({
            //         areaId: this.searchForm.cashierAreaId,
            //         pageNum: 1,
            //         pageSize: 999999
            //     }).then(res => {
            //         let result = res.data;
            //         if (result.code == 200) {
            //             this.channelNum=result.data.list.length
            //         }
            //     })
            // },
            playFun(){
                // this.startTime = moment(this.searchForm.time[0]).format('HH:mm:ss')
                // this.endTime = moment(this.searchForm.time[1]).format('HH:mm:ss')
                let openT='',closeT='';
                if(this.pauseBtn){
                  openT = new Date(this.progressTime).getTime();
                  closeT = new Date(this.searchForm.countDate[1]).getTime();
                }else{
                  openT = new Date(this.searchForm.countDate[0]).getTime();
                  closeT = new Date(this.searchForm.countDate[1]).getTime();

                }
                this.searchFun()
                // this.getCountData(moment(openT).format('HH:mm:ss'))
                // this.getDistribution(moment(openT).format('HH:mm:ss'))
                this.playBtnShow = true
                this.progressShow = true;

                this.timeInterval = setInterval(() => {
                    openT = openT + 1000 * 60 * this.searchForm.granularity
                    if(openT > closeT){
                      this.pauseBtn = false;
                      this.playBtnShow = false
                        clearInterval(this.timeInterval);
                        return false
                    }else{
                        this.progressTime = moment(openT).format('YYYY-MM-DD HH:mm:ss')
                        this.getCountData(this.progressTime)
                        this.getDistribution(this.progressTime)
                    }
                }, 1500);
            },
            pauseFun(){
                this.pauseBtn = true;
                this.playBtnShow = false
                clearInterval(this.timeInterval);
            },
            searchFun() {
                clearInterval(this.timeInterval);
                this.playBtnShow = false;
                this.progressShow = false;
                this.pauseBtn = false
                this.progressTime = ''
                this.getDistribution()
                this.getCountData()
                this.getCustomersOverview()
                this.getchart()
            },
            // 获取主页大屏人员点位分布
            async getDistribution(time) {
                let parmas = {
                    cashierAreaId:this.searchForm.cashierAreaId,
                    countDate: time?moment(this.progressTime).format('YYYY-MM-DD HH:mm:ss'):moment(this.searchForm.countDate[0]).format('YYYY-MM-DD HH:mm:ss'),
                }
              let res = await this.$api.queueManagementApi.getdistribution(parmas);
              let { code, data } = res.data;
              if (code == 200) {
                  this.loading = false;
                let red = data.red ? data.red : [];
                let green = data.green ? data.green : [];
                let blue = data.blue ? data.blue : [];
                let orange = data.orange ? data.orange : [];
                this.dataList = [
                  ...red.map((item) => ({ ...item, status: 1 })),
                  ...green.map((item) => ({ ...item, status: 0 })),
                  ...blue.map((item) => ({ ...item, status: 2 })),
                  ...orange.map((item) => ({ ...item, status: 3 })),
                ];
                this.drawCirlce();
              }
            },
            //动态设置canvas的宽度
            setCanvasWidth() {
              this.canvas.width = document.body.clientWidth - 248;
              this.canvas.height = 350;
              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 if(item.status == 2){
                  this.ctx.fillStyle = "blue";
                }else if(item.status == 3){
                  this.ctx.fillStyle = "orange";
                } 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();
              });
            },
            tableRowClassName: function({ row, rowIndex }) {
              if ((row.customersInQueue > this.ruleObj.queueLengthThreshold)&&(row.averageWaitingTime > (this.ruleObj.waitTimeThreshold * 60))) {
                return 'danger-row';
              }
            },
            // 表格点击触发
            handleCurrentChange(row) {
              if(this.laneId == row.laneId){
                this.laneId = null;
                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 = ''
                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;
            },
        }
    }
</script>

<style scoped="scoped" lang="less">
  .queueManagementContainer{
    position: relative;
      height: 100%;
      // padding: 0 8px 0px 10px;
      overflow-x: 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: 0px;
          }
        .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;
            margin-left: 5px;
        }
      }
      .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 {
        position: absolute;
        top: 485px;
        width: 100%;
        display: flex;
        height: calc(100% - 495px);
        min-height: 390px;
        // 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: calc(45% - 18px);
          height: 100%;
          .chartLine{
              width: 100%;
              height: calc(100% - 30px);
              min-height: 160px;
          }
          .chart1{
              width: calc(100% - 5px);
              height: calc(50% - 5px);
              box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
              margin-bottom: 7px;
              background: #fff
          }
          .chart2{
              height: calc(50% - 7px);
          }
        }
      }

  }

  .aiot_title_item {}
    /deep/.el-select{
        width: 180px;
    }
    /deep/.el-date-editor{
        // width: 180px;
    }
    /deep/.el-date-editor--timerange.el-input__inner{
        width: 220px;
    }
    /deep/.el-form-item__label{
        height: 30px;
        line-height: 30px !important;
    }
    /deep/.el-form-item__content{
        height: 30px;
        line-height: 30px;
    }
    /deep/.el-date-editor .el-range-separator{
        line-height: 22px;
    }
    .time-box1{
        width: 100%;
        text-align: center;
        margin-top: 5px;
        height: 30px;
        line-height: 30px;
    }
    #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;
        }
        .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;
    }
    .openBtn{
      width: 30px;
      text-align: right;
      padding-right: 15px;
      cursor: pointer;
      float: right;
      color: #fff;
      img{
        width: 15px;
      }
    }
    .dialogChart1,.dialogChart2{
      width: 95%;
      height: 400px;
      margin: 0 auto;
    }
</style>