home.js

const trafficOptions = [
    "mall/countData",
    "floor/countData",
    "zone/countData",
    "gate/countData"
]
const faceOptions = [
    "mall/faceSta",
    "floor/faceSta",
    "zone/faceSta",
    "gate/faceSta"
]
// const TAB_API = {
//   featureRevisit: '',
//   featureLibRebuild: [],
// }
new Vue({
    el: "#app",
    data: function() {
        return {
            currentIndex6: '1',
            pickerOpts: {
                disabledDate(time) {
                    return Date.parse(time) > Date.parse(new Date())
                }
            },
            radio: "mall",
            dateFormat: "rerun",
            dateLevelList: [
                {label: 'rerun', name: '数据重跑'},
                {label: 'repair', name: '数据修补'},
                {label: 'revisitFeature', name: '特征重提'},
                {label: 'rebuildFeatureLib', name: '特征库重建'},
                {label: 'rematchPerson', name: '人员重新比对'},
                {label: 'snapGatherClass', name: '抓拍聚类'},
            ],
            UrlType: "trafficRecognition",
            compareType: "custom",
            count: null,
            dateCount: null,
            day: "",
            hour: "",
            min: "",
            startDate: "",
            endDate: "",
            sourceDate: "",
            sourceStartTime: "00:00:00",
            sourceEndTime: "23:59:59",
            aimsDate: "",
            aimsStartTime: "00:00:00",
            aimsEndTime: "23:59:59",
            referenceDate: "",
            repairDate: "",
            accountVal: [],
            mallVal: [],
            mallOpts: [],
            accountId: [],
            accoutOpts: [],
            deviceVal: "",
            gateVal: "",
            channelVal: "",
            showDiv: true,
            loading: "",
            gateOpt: [],
            deviceOpt: [],
            channelOpt: [],
            date: "",
            butShow: false,
            startShow: false,
            tafficShow: false,
            startRange: "0.85",
            endRange: "1.2",
            isMallSelAll: false,
            isAccoutSelAll: false,
            //全选
            checkedTraffic: [],
            checkAllTraffic: false,
            isIndeterminateTraffic: false,
            checkedFace: [],
            checkAllFace: false,
            isIndeterminateFace: false,
            checkTraffic: [
                {
                    name: "",
                    value: "mall/countData"
                },
                {
                    name: "",
                    value: "floor/countData"
                },
                {
                    name: "",
                    value: "zone/countData"
                },
                {
                    name: "",
                    value: "gate/countData"
                }
            ],
            checkFace: [
                {
                    name: "",
                    value: "mall/faceSta"
                },
                {
                    name: "",
                    value: "floor/faceSta"
                },
                {
                    name: "",
                    value: "zone/faceSta"
                },
                {
                    name: "",
                    value: "gate/faceSta"
                }
            ],
            progressName: {
                mallcountData: "商场客流",
                floorcountData: "楼层客流",
                zonecountData: "店铺客流",
                gatecountData: "监控点客流",
                mallfaceSta: "商场人脸",
                floorfaceSta: "楼层人脸",
                zonefaceSta: "店铺人脸",
                gatefaceSta: "监控点人脸"
            },
            startTime: "",
            endTime: "",
            traffStartTime: "00:00:00",
            traffEndTime: "23:59:59",
            webSocketObj: {},
            repairWebSocket: null,
            dateTime: [],
            progressList: [],
            repairProgList: [],
            traProgList: [],
            tipShow: false,
            tipStyle: {},
            lineDate: "",
            lineMallId: "",
            lineMallName: "",
            locationHref: false,
            /// 特征重提
            query: {
                accountVal: [],
                mallVal: [],
                dateVal: null
            },
            featureRevisitType: 0,
            featureLibRebuildType: 1,
            rematchPersonType: 1,
            featureRevisitList: [
                {label: '人脸+全身照特征', value: 0},
                {label: '人脸特征', value: 1},
                {label: '全身照特征', value: 2},
                {label: '店员特征', value: 3}
            ],
            featureLibRebuildList: [
                {label: '店员库重建', value: 1},
                {label: '顾客库重建', value: 2}
            ],
            rematchPersonList: [
                {label: '店员对比', value: 1},
                {label: '顾客对比', value: 2}
            ],
            socket: null,
            results: [],
            startTiming: 0,
            endTiming: 0,
            footerText: ''
        }
    },
    filters: {
        formatTime(val) {
            function autoPrefixZero(num) {
                return num > 10 ? num : '0' + num
            }

            const day = parseInt(val / (24 * 60 * 60 * 1000)) + 1
            const hour = parseInt(val % (24 * 60 * 60 * 1000) / (60 * 60 * 1000))
            const minutes = parseInt(val % (60 * 60 * 1000) / (60 * 1000))
            const seconds = parseInt(val % (60 * 1000) / 1000)
            if (val < 1000 || val < 60 * 1000)
            {
                return `${val % (60 * 1000) / 1000} 秒`
            }
            else if (val < 60 * 60 * 1000)
            {
                return `${autoPrefixZero(minutes)} 分钟 ${autoPrefixZero(seconds)} 秒`
            }
            else if (val < 24 * 60 * 60 * 1000)
            {
                return `${autoPrefixZero(hour)} 小时 ${autoPrefixZero(minutes)} 分钟 ${autoPrefixZero(seconds)} 秒`
            }
            else
            {
                return `${autoPrefixZero(day)} 天 ${autoPrefixZero(hour)} 小时 ${autoPrefixZero(minutes)} 分钟 ${autoPrefixZero(seconds)} 秒`
            }
        }
    },
    computed: {
        isResultsShow() {
            return this.dateFormat === 'revisitFeature' ||
                this.dateFormat === 'rebuildFeatureLib' ||
                this.dateFormat === 'rematchPerson'
        },
        isSendDateParam() {
            if (
                (this.dateFormat === 'rebuildFeatureLib'
                    && this.featureLibRebuildType === 1
                ) || (
                    this.dateFormat === 'revisitFeature'
                    && this.featureRevisitType === 3)
            )
            {
                return false
            }
            return true
        },
        totalTime() {
            const {startTiming, endTiming} = this
            return endTiming - startTiming
            // return this.formatDateToStamp(endTiming) - this.formatDateToStamp(startTiming)
        }
    },
    watch: {
        accountVal: {
            handler: function(val) {
                if (val && val.length)
                {
                    this.query.accountVal = val
                }
            },
            deep: true
        },
        mallVal: {
            handler: function(val) {
                if (val && val.length)
                {
                    this.query.mallVal = val
                }
            },
            deep: true
        },
        dateFormat: function(val) {
            var typeHandler = {
                'revisitFeature': this.featureRevisitType,
                'rebuildFeatureLib': this.featureLibRebuildType,
                'rematchPerson': this.rematchPersonType
            }
            this.footerText = val === 'compare' ? '数据对比' : this.dateLevelList.find(item => item.label === val).name
            this.socket && this.socket.close()
            this.results.length && (this.results = [])
            this.startTiming = this.endTiming = 0
            this.query.type = typeof typeHandler[val] === 'undefined'
                ? null
                : typeHandler[val]
        },
        featureRevisitType(val) {
            this.query.type = val
        },
        featureLibRebuildType(val) {
            this.query.type = val
        },
        rematchPersonType(val) {
            this.query.type = val
        }
    },
    created: function() {
        this.locationHref =
            location.href.indexOf("?super") != -1 ? true : false
        this.getAccount()
    },
    mounted: function() {
        this.query.dateVal = this.createDate()
        this.startTime = this.createDate()
        this.endTime = this.createDate()
    },
    methods: {
        createDate() {
            var nowDate = new Date()
            var day = nowDate.getDate()
            var month = nowDate.getMonth() + 1
            var year = nowDate.getFullYear()
            if (month >= 1 && month <= 9)
            {
                month = "0" + month
            }
            if (day >= 0 && day <= 9)
            {
                day = "0" + day
            }
            return year + "-" + month + "-" + day
        },
        getProgressName(val) {
            return this.progressName[val]
        },
        getProgressStyle(stepCount, status, oldStepCount) {
            if (stepCount == "stepType")
            {
                if (status == "gatecountData" || status == "gatefaceSta")
                {
                    return {"margin-left": "448px", "font-size": "18px"}
                }
                else
                {
                    return {"margin-left": "465px", "font-size": "18px"}
                }
            }
            else
            {
                return {
                    width: (stepCount - oldStepCount) * 405 + "px",
                    "background-color": status ? "#409EFF" : "#f56c6c",
                    "margin-left": oldStepCount * 405 + 50 + "px"
                }
            }
        },
        lineOver(tag, dates, mallIds, mallNames) {
            let evt = tag || window.event,
                _top,
                _left
            _top = window.innerHeight - evt.y
            _left = window.innerWidth - evt.x
            this.tipStyle = {
                top: evt.y - 50 + "px",
                left: evt.x + "px"
            }
            this.lineDate = dates
            this.lineMallId = mallIds.join(",")
            this.lineMallName = mallNames
            this.tipShow = true
        },
        lineOut() {
            this.tipShow = false
        },
        handleCheckAllChangeTraffic(val) {
            // console.log('val',val)
            this.checkedTraffic = val ? trafficOptions : []
            // console.log(this.checkedTraffic)
            this.isIndeterminateTraffic = false
        },
        handleCheckAllChangeFace(val) {
            // console.log('val',val)
            this.checkedFace = val ? faceOptions : []
            // console.log(this.checkedFace)
            this.isIndeterminateFace = false
        },
        handleCheckedCitiesChangeTraffic(value) {
            // console.log(this.checkedTraffic)
            let checkedCount = value.length
            this.checkAllTraffic = checkedCount === this.checkTraffic.length
            this.isIndeterminateTraffic =
                checkedCount > 0 && checkedCount < this.checkTraffic.length
        },
        handleCheckedCitiesChangeFace(value) {
            // console.log(this.checkedFace)
            let checkedCount = value.length
            this.checkAllFace = checkedCount === this.checkFace.length
            this.isIndeterminateFace =
                checkedCount > 0 && checkedCount < this.checkFace.length
        },
        accountchange(linkGate) {
            this.isAccoutSelAll = this.isAccoutSelAll
                ? this.accountVal.length < this.accoutOpts.length
                    ? false
                    : true
                : this.accountVal.length < this.accoutOpts.length
                    ? false
                    : true
            if (this.accountVal.length > 0)
            {
                this.getMall(linkGate)
            }
        },
        mallchange(linkGate) {
            this.isMallSelAll = this.isMallSelAll
                ? this.mallVal.length < this.mallOpts.length
                    ? false
                    : true
                : this.mallVal.length < this.mallOpts.length
                    ? false
                    : true
            if (linkGate)
            {
                this.getGate()
            }
        },
        selAllHandle(level) {
            if (level == "accout")
            {
                if (this.isAccoutSelAll)
                {
                    this.accountVal = []
                    this.isAccoutSelAll = false
                    this.getMall()
                }
                else
                {
                    this.accountVal = []
                    this.accoutOpts.forEach(item => {
                        this.accountVal.push(item.id)
                    })
                    this.isAccoutSelAll = true
                    this.getMall()
                }
            }
            else
            {
                if (this.isMallSelAll)
                {
                    this.mallVal = []
                    this.isMallSelAll = false
                }
                else
                {
                    this.mallVal = []
                    this.mallOpts.forEach(item => {
                        this.mallVal.push(item.id)
                    })
                    this.isMallSelAll = true
                }
            }
        },
        getAccount: function() {
            var _this = this
            _this.accoutOpts = []
            log(454, window._CONF_.apiUrl + API.Accounts)
            get(window._CONF_.apiUrl + API.Accounts).then(function(data) {
                _this.accoutOpts = data
                if (_this.accoutOpts.length > 0)
                {
                    _this.accountVal = [_this.accoutOpts[0].id]
                }
                _this.getMall()
            }).catch(err => {
                console.log('err', err)
            })
        },
        getMall: function() {
            var _this = this
            _this.mallOpts = []
            get(window._CONF_.apiUrl + API.Malls, {
                accountIds: _this.accountVal.join(",")
            }).then(function(data) {
                _this.mallOpts = data
                if (_this.mallOpts.length > 0)
                {
                    _this.mallVal = [_this.mallOpts[0].id]
                }
                _this.isMallSelAll =
                    _this.mallVal.length == _this.mallOpts.length ? true : false
            })
        },
        getGate: function() {
            var _this = this
            get(window._CONF_.apiUrl + API.Gates, {
                accountIds: _this.accountVal.join(","),
                mallIds: _this.mallVal.join(',')
            }).then(function(data) {
                _this.gateOpt = data
                _this.gateVal = _this.gateOpt[0].id
                // _this.getDevice()
                _this.getChannel()
            })
        },
        getDevice: function() {
            var _this = this
            get(window._CONF_.apiUrl + API.Devices, {
                // accountIds: _this.accountVal.join(","),
                // mallIds: _this.mallVal.join(','),
                gateId: this.gateVal
            }).then(function(data) {
                _this.deviceOpt = []
                _this.deviceVal = ""
                for (var i = 0; i < data.length; i++)
                {
                    var temp = {}
                    temp.name = data[i]
                    temp.value = data[i]
                    temp.id = i
                    _this.deviceOpt.push(temp)
                }
                _this.deviceVal = _this.deviceOpt[0].value
            })
        },
        //////////////////////////////////////////////////////
        dateLevel: function() {
            if (this.dateFormat == "repair")
            {
                this.getGate()
            }
            else if (this.dateFormat == "snapGatherClass")
            {
                // get(window._CONF_.apiUrl + '/face/faceRecord', {}).then(
                //     function(r) {
                //         log(r)
                //     }
                // )
            }
            else
            {
                // this.getMall();
            }
        },
        onMenuSelect: function(v) {
            this.currentIndex6 = v
        },
        //////////////////////////////////////////////////////
        getLevel: function() {
        },
        getNumber() {
            this.repairProgList = []
            if (this.UrlType == "trafficRecognition")
            {
                // this.getChannel()
            }
            else
            {
                // this.getChannel()
                // this.getDevice()
            }
        },
        getChannel() {
            var _this = this
            get(window._CONF_.apiUrl + API.Channels, {
                // accountIds: _this.accountVal.join(","),
                // mallIds: _this.mallVal.join(','),
                gateId: this.gateVal
            }).then(function(data) {
                _this.channelOpt = []
                for (var i = 0; i < data.length; i++)
                {
                    var temp = {}
                    temp.name = data[i]
                    temp.value = data[i]
                    temp.id = i
                    _this.channelOpt.push(temp)
                }
                _this.channelVal =
                    _this.channelOpt.length > 0 ? _this.channelOpt[0].value : ""
            })
        },
        clearDiv() {
            $("#showDiv").empty()
        },
        startData: function() {
            this.progressList = []
            if (this.webSocketObj)
            {
                for (var key in this.webSocketObj)
                {
                    this.webSocketObj[key].close()
                }
            }
            let params = {},
                startDate = "",
                endDate = ""
            params = {
                startDate: this.startTime + " 00:00:00",
                endDate: this.endTime + " 00:00:00",
                mallIds: this.mallVal,
                scheduleType: "",
                mark: Date.parse(new Date())
            }
            this.checkedTraffic.forEach((item, index) => {
                let _scheduleType = ""
                let websocket = item.split("/")
                websocket.forEach(item1 => {
                    _scheduleType += item1
                })
                params.scheduleType = _scheduleType
                this.openWebSock(_scheduleType, item, params)
            })
            this.checkedFace.forEach((item, index) => {
                let _scheduleType = ""
                let websocket = item.split("/")
                websocket.forEach(item1 => {
                    _scheduleType += item1
                })
                params.scheduleType = _scheduleType
                this.openWebSock(_scheduleType, item, params)
            })
        },
        openWebSock(wsUrl, url, params, processKey = 'progressList') {
            // browser 兼容
            // var wsHost =  window.location.host;
            var socketUrl = ""
            var webSock_Url = window._CONF_.webSockUrl || window.location.host
            var obj = {
                stepList: []
            }
            obj.stepType = wsUrl
            obj.mark = params.mark
            if (!webSockUrl)
            {
                webSock = window.location.host
            }
            socketUrl = "ws://" + webSock_Url + WSAPI.WSAPI + wsUrl
            this[processKey].push(obj)
            var _this = this
            if ("WebSocket" in window)
            {
                _this.webSocketObj[wsUrl] = new WebSocket(socketUrl)
            }
            else if ("MozWebSocket" in window)
            {
                _this.webSocketObj[wsUrl] = new MozWebSocket(socketUrl)
            }
            else
            {
                _this.webSocketObj[wsUrl] = new SockJS(socketUrl)
            }
            var param = JSON.parse(JSON.stringify(params))
            try
            {
                _this.webSocketObj[wsUrl].onopen = function(event) {
                    console.log("WebSocket:已连接")
                    _this.returnData(url, param)
                }
                _this.webSocketObj[wsUrl].onclosed = function() {
                    console.log("WebSocket关闭")
                }

                _this.webSocketObj[wsUrl].onmessage = function(evt) {
                    var msg = JSON.parse(evt.data)
                    _this[processKey].forEach((item, index) => {
                        if (
                            item.stepType == msg.scheduleType &&
                            item.mark == msg.mark
                        )
                        {
                            var stepObj = {}
                            stepObj.dates = msg.dates
                            stepObj.mallIds = msg.mallIds
                            stepObj.mallNames = msg.mallNames
                            stepObj.status = msg.status
                            stepObj.stepCount = msg.stepCount
                            item.stepList.push(stepObj)
                            item.precentsucess = msg.stepCount
                                ? Math.floor(msg.stepCount * 100)
                                : 0
                        }
                    })
                    // console.log('list',_this[processKey])
                }
                _this.webSocketObj[wsUrl].onerror = function(event) {
                    console.log("设备WebSocket:发生错误 ")
                    console.log(event)
                }
            }
            catch (error)
            {
            }
        },
        returnData: function(urls, params) {
            // console.log(urls,params)
            var _this = this
            post(window._CONF_.apiUrl + urls, JSON.stringify(params)).then(function(data) {
                if (data)
                {
                    _this.loading = ""
                    _this.showDiv = true
                    _this.renderResultToHtml(data)
                }
            }).catch(function(err) {
                _this.loading = ""
                alert("Sorry, The requested property could not be found.")
            })
        },
        getDateCount: function() {
            var _this = this
            this.butShow = true
            var params = {
                startTime: this.sourceDate + " " + this.sourceStartTime,
                endTime: this.sourceDate + " " + this.sourceEndTime,
                channelSerialnum: this.channelVal
            }
            get(window._CONF_.apiUrl + API.FaceRecognitionsCount, params).then(function(data) {
                _this.butShow = false
                _this.dateCount = data
            }).catch(function(err) {
                _this.butShow = false
                console.log(err)
            })
            // $.ajax({
            //   type: "get",
            //   dataType: "json",
            //   async: true,
            //   url: window._CONF_.apiUrl + urls,
            //   headers: {
            //     Authorization: Cookies.get('atoken')
            //   },
            //   data: params,
            //   success: function(data) {
            //     _this.butShow = false;
            //     _this.dateCount = data;
            //   },
            //   error: function(res) {
            //     _this.butShow = false;
            //     console.log(res);
            //   }
            // });
        },
        repairParams: function(type) {
            this.repairProgList = []
            if (this.repairWebSocket)
            {
                this.repairWebSocket.close()
            }
            var url = "",
                params = {}
            if (type == "face")
            {
                this.startShow = true
                setTimeout(() => {
                    this.startShow = false
                }, 3000)
                var url = API.SimulationFaceRecognition
                var params = {
                    sourceStartDate: this.sourceDate + " " + this.sourceStartTime,
                    sourceEndDate: this.sourceDate + " " + this.sourceEndTime,
                    targetStartDate: this.aimsDate + " " + this.aimsStartTime,
                    targetEndDate: this.aimsDate + " " + this.aimsEndTime,
                    channelSerialnum: this.channelVal,
                    count: Number(this.count),
                    scheduleType: "simulationfaceRecognition",
                    mark: Date.parse(new Date())
                }
            }
            else
            {
                this.tafficShow = true
                setTimeout(() => {
                    this.tafficShow = false
                }, 3000)
                url = API.SimulationCountData
                params = {
                    sourceStartDate: this.referenceDate + " " + this.traffStartTime,
                    sourceEndDate: this.referenceDate + " " + this.traffEndTime,
                    targetStartDate: this.repairDate + " " + this.traffStartTime,
                    targetEndDate: this.repairDate + " " + this.traffEndTime,
                    channelSerialnum: this.channelVal,
                    minFactor: this.startRange,
                    maxFactor: this.endRange,
                    scheduleType: "simulationcountData",
                    mark: Date.parse(new Date())
                }
            }
            this.openFaceTraffWebSock(url, params)
        },
        compareParams: function(type) {
            params = {
                startDate: this.startTime + " 00:00:00",
                endDate: this.endTime + " 00:00:00",
                mallIds: this.mallVal,
                scheduleType: "",
                mark: Date.parse(new Date())
            }
            var url = API.Mall + this.compareType
            this.returnData(url, params)
        },
        openFaceTraffWebSock(url, params) {
            // browser 兼容
            // var wsHost =  window.location.host;
            var socketUrl = ""
            var webSock_Url = window._CONF_.webSockUrl || window.location.host
            var obj = {
                stepList: []
            }
            obj.stepType = params.scheduleType
            obj.mark = params.mark
            socketUrl =
                "ws://" + webSock_Url + WSAPI.RecalSchedule + params.scheduleType
            this.repairProgList.push(obj)
            var _this = this
            if ("WebSocket" in window)
            {
                _this.repairWebSocket = new WebSocket(socketUrl)
            }
            else if ("MozWebSocket" in window)
            {
                _this.repairWebSocket = new MozWebSocket(socketUrl)
            }
            else
            {
                _this.repairWebSocket = new SockJS(socketUrl)
            }
            var param = JSON.parse(JSON.stringify(params))
            try
            {
                _this.repairWebSocket.onopen = function(event) {
                    console.log("WebSocket:已连接")
                    _this.repairData(url, params)
                }
                _this.repairWebSocket.onclosed = function() {
                    console.log("WebSocket关闭")
                }

                _this.repairWebSocket.onmessage = function(evt) {
                    var msg = JSON.parse(evt.data)
                    _this.repairProgList.forEach((item, index) => {
                        if (
                            item.stepType == msg.scheduleType &&
                            item.mark == msg.mark
                        )
                        {
                            var stepObj = {}
                            stepObj.counttime = msg.counttime
                            stepObj.serialnum = msg.serialnum
                            stepObj.status = msg.status
                            stepObj.stepCount = msg.stepCount
                            item.stepList.push(stepObj)
                            item.precentsucess = msg.stepCount
                                ? Math.floor(msg.stepCount * 100)
                                : 0
                        }
                    })
                }
                _this.webSocketObj[wsUrl].onerror = function(event) {
                    console.log("设备WebSocket:发生错误 ")
                    console.log(event)
                }
            }
            catch (error)
            {
            }
        },
        repairData(url, params) {
            let that = this
            post(window._CONF_.apiUrl + url, JSON.stringify(params)).then(function(data) {
                if (data)
                {
                    that.renderResultToHtml(data)
                }
            })
        },
        repairPreview: function() {
            var params = {
                sourceStartDate: this.referenceDate + " " + this.traffStartTime,
                sourceEndDate: this.referenceDate + " " + this.traffEndTime,
                targetStartDate: this.repairDate + " " + this.traffStartTime,
                targetEndDate: this.repairDate + " " + this.traffEndTime,
                channelSerialnum: this.channelVal,
                minFactor: this.startRange,
                maxFactor: this.endRange,
                scheduleType: "simulationcountData",
                mark: Date.parse(new Date())
            }
            let that = this
            post(window._CONF_.apiUrl + API.PreviewCountData, JSON.stringify(params)).then(function(data) {
                if (data)
                {
                    that.renderResultToHtml(data, true)
                }
            })
        },
        renderResultToHtml(data, hasSccessDetail) {
            let text = "本次共执行job " +
                data.total +
                " 个,成功 " +
                data.success +
                " 个,失败 " +
                data.failed +
                " 个.</br>"
            if (data.failedJob && data.failedJob.length > 0)
            {
                text += "-----失败job详情-----</br>"
                text += data.failedJob.join("</br>")
                if (data.data)
                {
                    text += "</br>" + data.data
                }
            }
            if (data.successJob && data.successJob.length > 0)
            {
                text += "-----成功job详情-----</br>"
                text += data.successJob.join("</br>")
                if (hasSccessDetail)
                {
                    if (data.data)
                    {
                        console.log(data.data)
                        data.data.forEach(item => {
                            text +=
                                "</br>" +
                                " 设备序列号: " +
                                item.deviceSerialnum +
                                " 时间: " +
                                item.counttime +
                                " 进客流: " +
                                item.innum +
                                " 出客流: " +
                                item.outnum
                        })
                    }
                }
            }
            text += "</br>-----------------------------------------------"
            text += "</br>"
            text += "</br>"
            text += "</br>"
            $("#showDiv").append(text)
        },
        onSearchClick: function() {
            /////////////////////////////特征重提////////////////////////////////////////////////
            // '/mall/feature'
            // startDate,endDate,mallIds,scheduleType,featureType
            // featureType==0 提取人体+人脸;featureType==1 提取人脸特征;featureType==2提取人体特征
            /////////////////////////////特征库重建////////////////////////////////////////////////
            // 重新建立顾客池    /mall/customPool
            // 参数 mallIds,startDate,endDate,scheduleType
            // 重建建立店员特征池 /mall/staffPool
            // 参数 mallIds,scheduleType
            /////////////////////////////人员重新对比////////////////////////////////////////////////
            // 重新匹配顾客    /mall/custom
            // 参数 mallIds,startDate,endDate,scheduleType
            // 店员重新比对 /mall/staff
            // 参数 mallIds,startDate,endDate,scheduleType
            if (this.socket)
            {
                this.socket.close()
                this.socket = null
            }
            this.results = []
            this.startTiming = 0
            this.endTiming = 0
            const TAB_API = {
                revisitFeature: (val) => {
                    return val === 3 ? API.mallStaffFeature : API.MallFeature
                },
                rebuildFeatureLib: (val) => {
                    return val === 1 ? API.MallStaffPool : API.MallCustomPool
                },
                rematchPerson: (val) => {
                    return val === 1 ? API.MallStaff : API.MallCustom
                }
            }
            const {dateFormat, query, isSendDateParam} = this
            const {
                dateVal, mallVal, type
            } = query
            var urlPath = TAB_API[dateFormat](type)
            var scheduleType = dateFormat + type
            var parameter = {
                // startDate: dateVal ? dateVal + ' 00:00:00' : null,
                // endDate: dateVal ? dateVal + ' 23:59:59' : null,
                mallIds: mallVal || null,
                scheduleType: scheduleType,
                // featureType: dateFormat === 'revisitFeature' ? type : null
            }
            if (isSendDateParam)
            {
                parameter.startDate = dateVal + ' 00:00:00'
                parameter.endDate = dateVal + ' 23:59:59'
            }
            if (dateFormat === 'revisitFeature')
            {
                parameter.featureType = type
            }
            var socketParameter = {
                scheduleType: scheduleType,
                // callback: 'fetchApi',
                callbackUrlPath: urlPath,
                callbackParam: parameter
            }
            this.onSocketConnect(socketParameter)
        },
        /**
         * websocket 连接
         * @param {string} scheduleType
         * @param {string} wsUrl
         * @param {string} callbackUrlPath
         * @param {object} callbackParam
         */
        onSocketConnect({scheduleType, callbackUrlPath, callbackParam}) {
            var self = this,
                wsUrl = window._CONF_.webSockUrl || window.location.host,
                socketUrl = "ws://" + wsUrl + WSAPI.RecalSchedule + scheduleType
            if ("WebSocket" in window)
            {
                self.socket = new WebSocket(socketUrl)
            }
            else if ("MozWebSocket" in window)
            {
                self.socket = new MozWebSocket(socketUrl)
            }
            else
            {
                self.socket = new SockJS(socketUrl)
            }
            try
            {
                self.socket.onopen = function(ev) {
                    self.startTiming = +new Date()
                    self.fetchApi(callbackUrlPath, callbackParam)
                }
                self.socket.onclosed = function() {
                    console.log('socket:onclose')
                }

                self.socket.onmessage = function(ev) {
                    var msg = JSON.parse(ev.data)
                    console.log('[onmessage]:', msg)
                    self.dealMessage(msg)
                    if (msg.stepCount === 1)
                    {
                        self.endTiming = +new Date()
                        self.socket.close()
                    }
                }
                self.socket.onerror = function(ev) {
                    console.log("设备WebSocket:发生错误 ")
                    console.log(ev)
                }
            }
            catch (error)
            {
                console.log('onSocketConnect:', error)
            }
        },
        fetchApi(urlPath, parameter) {
            const {
                dateVal, mallVal, type
            } = this.query
            var self = this
            post(window._CONF_.apiUrl + urlPath, JSON.stringify(parameter)).then(function(res) {
                console.log(res)
            })
        },
        dealMessage(msg) {
            // scheduleType
            const {dates, mallIds, mallNames, status, stepCount, scheduleType, counter} = msg
            var self = this
            var resObj = {}
            resObj.dates = dates
            resObj.mallIds = mallIds
            resObj.mallNames = mallNames
            resObj.status = status
            resObj.progress = self.floatToPercent(stepCount)
            resObj.totalNum = 0
            resObj.totalPage = 0
            resObj.current = 0
            resObj.curPageSize = 0
            resObj.currentPage = 0
            resObj.scheduleType = scheduleType
            if (counter)
            {
                // dataNum dateMallNum step totalData totalDate totalMall totalMallDateProduct allDataCount
                resObj.totalNum = counter.allDataCount
                resObj.totalPage = counter.totalMallDateProduct
                resObj.current = counter.dataNum
                resObj.curPageSize = counter.totalData
                resObj.currentPage = counter.dateMallNum
            }
            if (self.results.length)
            {
                const isSameScheduleType = self.results.some(item => item.scheduleType === scheduleType)
                isSameScheduleType
                    ? self.results.forEach(item => {
                        //
                        item.progress = self.floatToPercent(stepCount)
                        if (counter)
                        {
                            item.totalNum = counter.allDataCount
                            item.totalPage = counter.totalMallDateProduct
                            item.current = counter.dataNum
                            item.curPageSize = counter.totalData
                            item.currentPage = counter.dateMallNum
                        }
                    })
                    : self.results.push(resObj)
                resObj = {}
            }
            else
            {
                self.results.push(resObj)
                resObj = {}
            }
            // 滚动至底部
            // this.$nextTick(() => {
            //   this.$refs.scrollbarRef.wrap.scrollTop = this.$refs.scrollbarRef.wrap.scrollHeight
            // })
        },
        formatDateToStamp(date) {
            if (!date)
            {
                return false
            }
            typeof date === 'string' && (date = new Date(date.replace(/-/g, '/')))
            return date.getTime()
        },
        floatToPercent(floatNum) {
            if (!floatNum)
            {
                return 0
            }
            var formatNum = Math.floor(floatNum * 100)
            return formatNum >= 100 ? 100 : formatNum
        },
        onClearClick() {
            if (this.dateFormat === 'revisitFeature' ||
                this.dateFormat === 'rebuildFeatureLib' ||
                this.dateFormat === 'rematchPerson')
            {
                this.startTiming = 0
                this.endTiming = 0
                this.results = []
            }
            // else {
            document.getElementById('showDiv').innerHTML = ''
            // }
        }
    }
})