Sample code
<link href="/static/css/main.min.css?v=" rel="stylesheet"/>
<link rel="stylesheet" href="/static/lib/dtree/dtree.css">
<link href="/static/css/aishow/play.min.css?v=" rel="stylesheet">
<div class="main_content">
<input id="rate" name="rate" style="position: absolute;left: -1000px;" type="text" value="3">
<a class="noFlash" href="https://get2.adobe.com/cn/flashplayer/" style="margin-left: 15px;color:red;margin-top:50px;" target="_blank">
</a>
<div id="home" v-cloak="">
<div class="big_player_wrap" v-if="popup.isShow">
<div class="popup_cid" style="position: fixed;top: 60px;left: 0px;width: 100%;height: 40px;z-index: 1050;color: #fff;text-align: center;line-height: 40px;font-size: 18px;box-sizing: border-box;" v-html="popup.cid">
</div>
<iframe class="big_player" frameborder="0" name="iframe" scrolling="no" style="width: 100%;height: 100%;background: #fff;" v-bind:src="popup.src">
</iframe>
</div>
<div class="places">
<div class="devicesGroup" v-show="menuShow">
<div id="searchMenu">
<input id="searchTree" type="text" maxlength="12" placeholder="" title="" />
<i id="searchTreeBtn"></i>
</div>
<img class="loading" src="/static/img/loading.gif" v-if="device_loading">
</img>
<div id="devices" >
</div>
</div>
<div id="devicesShow" v-show="!menuShow">
<div class="returnToDeviceGroup"></div>
<div class="deviceGroupNamestyle"><i class="img add"></i><span class="deviceGroupName"></span></div>
<ul></ul>
<img class="loading" src="/static/img/loading.gif" v-if="device_loading1">
</img>
<div class="table-pg clearfix" id="pagination" style="width: 185px;padding: 0;">
<div class="pg">
<a href="#" data-class="prev" class="prev"></a>
<input id="jumpPageInput" type="text" class="jump hide" maxlength="6" value="1"/>
<b class="pagecount" v-html="page"></b>
<a href="#" data-class="next" class="next"></a>
</div>
</div>
</div>
<div @click="hideSibebar($event,'icon1')" class="hide-icon icon1" title=" ">
</div>
</div>
<div class="playing" v-show="!noDevice">
<div class="wrap">
</div>
<div class="realTime">
<div class="title" style=" display: flex;
justify-content: space-between;align-items: center;">
<div></div>
<div>
<div class="checkbox" :class="show_person_modal ? 'on' : ''" style="margin: 0px;padding-left: 20px;background-position: left center;font-size: 12px;min-width: 100px;max-width: 150px;overflow: hidden;text-overflow: ellipsis;" title=""></div>
</div>
<span class="time">
<a class="more_captures" target="_blank">
</a>
:
<span class="number" v-html="face_number">
</span>
:
<span class="number" v-html="face_number_yesterday">
</span>
:
<span class="number added" v-html="face_number-face_number_yesterday">
</span>
</span>
</div>
<ul>
<li :data-cid="item.cid" v-for="item in captures">
<div class="box-inner">
<img :data-url="item.image_url" :src="item.face_url" onerror="this.src='/static/img/u50.png'"/>
<div v-if="item.show_temp" class="tempBox" :class="item.temperature_status===1 ? 'normalTem' : (item.temperature_status===2 ? 'highTem' : '')" v-text="item.temp_val"></div>
</div>
<div class="info">
<div :title="item.device_name" class="device_name" v-html="item.device_name">
</div>
<div :data-time="item.time" :title="item.format_time" class="time" v-html="item.format_time">
</div>
<div v-if="item.mask_status" :class="item.mask_status===2 ? 'highTem' : ''" >
<span>: </span>
<span v-if="item.mask_status===1"></span>
<span v-if="item.mask_status===2"></span>
</div>
<div :title="item.person_name" class="name" v-html="item.person_name">
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="playing" style="background: #fff;" v-if="noDevice">
<div class="blank">
<a href="/robots/aiadmin_device">
<img src="/static/img/aishow/add.png"/>
</a>
<div class="tips">
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</div>
<div class="alarm" v-if="!noDevice">
<div @click="hideSibebar($event,'icon2')" class="hide-icon icon2" title=" ">
</div>
<img class="loading" src="/static/img/loading.gif" v-if="loading">
<div class="wrap">
<div class="service" v-if="cid_in_url1==selectedDevice.cid&&cid_in_url&&ptstr!='intranet'||selectedDevice.hsr_status!=1&&selectedDevice.cid!=''&&ptstr!='intranet'">
<div class="device_info">
<div class="left">
<div class="icon-wrap">
</div>
</div>
<div class="right">
<div class="form-group">
<span>
:
</span>
<span v-html="selectedDevice.alias" :title="selectedDevice.alias">
</span>
</div>
<div class="form-group">
<span>
:
</span>
<span v-html="selectedDevice.cid" :title="selectedDevice.cid">
</span>
</div>
<div class="status" v-if="selectedDevice.hsr_status==0">
</div>
</div>
</div>
<div class="service_substr">
<div class="service_substr_title">
</div>
<div class="detail">
</div>
</div>
<button @click="freeOpen()" class="btn btn-blue free" v-if="free_status==1&&!free_end&&selectedDevice.hsr_status==0">
<span v-html="free_day">
</span>
</button>
<div class="prices">
<div :data-id="item.price_id" class="item" v-for="item in prices">
<div class="time" v-html="item.price_name">
</div>
<div class="price">
<span v-html="item.price.toFixed(2)">
</span>
<span v-html="item.currency">
</span>
</div>
<button @click="openService(item.price_id,item.num,item.price)" class="btn btn-blue open" v-if="selectedDevice.hsr_status==0">
</button>
<button @click="openService(item.price_id,item.num,item.price)" class="btn btn-blue open" v-if="selectedDevice.hsr_status!=0">
</button>
</div>
</div>
<div class="protocol">
<div class="protocol_title">
<a>
</a>
<a @click="show_service_description($event)" class="service_description down">
</a>
</div>
<ul class="detail" v-if="is_show_service_description">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="tab-filter" v-if="ptstr=='intranet'">
<ul class="tab">
<li title="" :class="{on:show_tab==1}" @click="changeTab(1)">
</li>
<li title="" :class="{on:show_tab==2}" @click="changeTab(2)" >
</li>
</ul>
</div>
<div class="tag-filter" v-if="(selectedDevice.hsr_status==1&&!cid_in_url1)&&show_tab==1||(selectedDevice.hsr_status==1&&cid_in_url1!=selectedDevice.cid)&&show_tab==1||ptstr=='intranet'&&show_tab==1">
<div @click="showTagList" class="choose_tag">
<span>
</span>
<span class="icon">
</span>
</div>
<ul class="tagList" v-if="is_taglist_show">
<li :data-id="tag.tag_id" @click="chooseTag($event)" v-for="tag in tagList">
<div class="checkbox" v-bind:class="{on:isChoosedTag(tag.tag_id)}" v-html="tag.tag_name">
</div>
</li>
<div style=" line-height: 100px;text-align: center;" v-if="tagList.length==0">
</div>
</ul>
</div>
<div class="clearfix">
</div>
<div class="noTag" v-if="(selectedDevice.hsr_status==1&&!cid_in_url&&chooseTags.length<1)&&show_tab==1||(selectedDevice.hsr_status==1&&cid_in_url1!=selectedDevice.cid&&chooseTags.length<1)&&show_tab==1||(!cid_in_url&&chooseTags.length<1)&&ptstr=='intranet'&&show_tab==1||(cid_in_url1!=selectedDevice.cid&&chooseTags.length<1&&ptstr=='intranet'&&show_tab==1)">
<div class="group" v-for="person in persons">
<div class="title tagName" :title="person.tags_name" v-if="ptstr=='intranet'">
<div class="tag" style="display:inline-block;" v-bind:style="{ background:'#'+item.colour,width:person.tagInfo.width+'px'}" v-for="item in person.tagInfo" v-html="item.tag_name">
</div>
</div>
<div class="display">
<div class="left">
<div class="box-inner">
<img :data-url="person.image_url" :src="person.face_url" class="face" onerror="this.src='/static/img/u50.png'">
</img>
<div v-if="person.show_temp" class="tempBox" :class="person.temperature_status===1 ? 'normalTem' : (person.temperature_status===2 ? 'highTem' : '')" v-text="person.temp_val"></div>
</div>
</div>
<div class="center">
<div class="info">
<div>
:
<span class="sex" v-html="person.sex">
</span>
</div>
<div>
:
<span class="age" v-html="person.age">
</span>
</div>
<div>
:
<span v-bind:title="person.person_name" v-html="person.person_name">
</span>
</div>
<div>
:
<span v-html="person.confidence">
</span>
</div>
</div>
</div>
<div class="right">
<div class="box-inner">
<img :data-url="person.image_url" :src="person.register_url" class="photo">
</img>
</div>
</div>
</div>
<div class="title">
<span class="from" v-html="person.device_name">
</span>
<span class="time">
<span v-html="person.format_time">
</span>
</span>
</div>
</div>
<div class="more">
<a @click="to_alarms()" class="more_alarms" target="_blank">
</a>
</div>
</div>
<div style="text-align: center;" v-if="selectedDevice.hsr_status==0&&show_type==1">
</div>
<div class="hasTag" v-if="(selectedDevice.hsr_status==1&&!cid_in_url&&chooseTags.length>0)&&show_tab==1||(selectedDevice.hsr_status==1&&cid_in_url1!=selectedDevice.cid&&chooseTags.length>0)&&show_tab==1||(!cid_in_url&&chooseTags.length>0&&ptstr=='intranet')&&show_tab==1||(cid_in_url1!=selectedDevice.cid&&chooseTags.length>0&&ptstr=='intranet')&&show_tab==1">
<div id="tag-filter">
<div class="result">
</div>
<ul>
</ul>
</div>
<div class="group" v-for="person in persons">
<div class="display">
<div class="left">
<div class="device_name" v-bind:title="person.device_name" v-html="person.device_name">
</div>
<div class="box-inner">
<img :data-url="person.image_url" :src="person.face_url" class="face" onerror="this.src='/static/img/u50.png'">
</img>
<div v-if="person.show_temp" class="tempBox" :class="person.temperature_status===1 ? 'normalTem' : (person.temperature_status===2 ? 'highTem' : '')" v-text="person.temp_val"></div>
</div>
</div>
<div class="right">
<div class="info">
<span v-bind:title="person.person_name" v-html="person.person_name">
</span>
<br/>
:
<span class="sex" v-html="person.sex">
</span>
<br/>
:
<span class="age" v-html="person.age">
</span>
<br/>
:
<span class="time">
<span v-html="person.format_time.split(' ')[1]">
</span>
</span>
</div>
<div>
<span class="tag_icon" v-for="item in person.tagInfo" v-if="item.icon_url!=''&&item.enable_icon==1">
<img :src="item.icon_url">
</img>
</span>
</div>
</div>
</div>
<div class="tag_info">
<div class="tag" v-bind:style="{ background:'#'+item.colour}" v-for="item in person.tagInfo" v-html="item.tag_name">
</div>
</div>
</div>
<div class="more">
<a @click="to_alarms()" class="more_alarms" target="_blank">
</a>
</div>
</div>
<div class="strangerList" v-if="show_tab==2">
<div class="group">
<ul>
<li :data-cid="item.cid" v-for="item in captures_stranger">
<div class="box-inner">
<img :data-url="item.image_url" :src="item.face_url" onerror="this.src='/static/img/u50.png'"/>
</div>
<div class="info">
<div :title="item.device_name" class="device_name" v-html="item.device_name">
</div>
<div :data-time="item.time" :title="item.format_time" class="time" v-html="item.format_time">
</div>
</div>
</li>
</ul>
</div>
<div class="more">
<a @click="to_captures()" class="more_alarms" target="_blank">
</a>
</div>
</div>
</div>
</img>
</div>
<div class="alarm" v-if="noDevice">
<div @click="hideSibebar($event,'icon2')" class="hide-icon icon2" title=" ">
</div>
<div class="wrap">
<div class="blank">
<img src="/static/img/aishow/empty_page.png">
<div class="tips">
</div>
</img>
</div>
</div>
</div>
</div>
</div>
<script src="/static/lib/video.js/video.min.js">
</script>
<script src="/static/lib/video.js/video-flash.js">
</script>
<script src="/static/lib/video.js/videojs-contrib-hls.js">
</script>
<script src="/static/lib/video.js/videojs-ie8.min.js">
</script>
<script src="/static/lib/flv.min.js">
</script>
<script src="/static/js/aishow/p2pVideo.js?v=" type="text/javascript">
</script>
<script src="/static/lib/dtree/dtree.js" type="text/javascript">
</script>
<script src="/static/js/aishow/play.js?v=">
</script>
</link>
web网关：
<template>
<div id="temRecord" v-loading="recordLoading" :element-loading-text="loadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
<Tip ref="tip"/>
<div class="content">
<div>
<div class="textLeft">
<span class="queryLabel"></span>
<el-date-picker
v-model="query_time"
unlink-panels
type="datetimerange"
range-separator="~"
:start-placeholder="$t('common.startDate')"
:end-placeholder="$t('common.endDate')"
:default-time="['00:00:00', '23:59:59']"
value-format = "timestamp" />
</div>
<div class="operateBox">
<div class="textLeft marTop10">
<span class="queryLabel"></span>
<el-select v-model="temp_selected" style="width: 400px;">
<el-option
v-for="l in tempSelection"
:key="l.value"
:label="l.label"
:value="l.value"/>
</el-select>
</div>
<div class="marTop10 textRight">
<el-button type="primary" icon="el-icon-search" @click="filter"></el-button>
</div>
</div>
<div class="textRight btnBox marTop10">
<el-tooltip :content="$t('tempRec.downloadThisPageTip')" placement="bottom-start">
<el-button type="primary" :loading="pageExporting" @click="exportTemRecord(1)"></el-button>
</el-tooltip>
<el-button type="primary" :loading="exporting" @click="exportTemRecord(0)"></el-button>
<el-button type="danger" @click="batchDelete(0)"></el-button>
<el-button type="danger" @click="batchDelete(1)"></el-button>
</div>
</div>
<div class="marTop10">
<el-table
:data="listData"
border
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="80" align='center'>
</el-table-column>
<el-table-column
type="index"
:label="$t('common.serialNum')"
width="120"
align='center'>
</el-table-column>
<el-table-column
prop="ID"
label="ID"
align='center'
show-overflow-tooltip>
</el-table-column>
<el-table-column
v-if="supportLoadLibFace == 1"
prop="Name"
:label="$t('common.personName')"
align='center'
show-overflow-tooltip>
</el-table-column>
<el-table-column
:label="$t('tempRec.faceImage')"
align='center'>
<template slot-scope="scope">
<section>
<img :src="scope.row.ImagePath" class="tabImg" >
</section>
</template>
</el-table-column>
<el-table-column
prop="temp"
:label="$t('tempRec.temp')"
show-overflow-tooltip
align='center'>
</el-table-column>
<el-table-column
prop="time"
:label="$t('common.time')"
show-overflow-tooltip
align='center'>
</el-table-column>
</el-table>
<div class="pg">
<pagination v-show="total>0" key="list" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.row" @pagination="query" />
</div>
</div>
</div>
</div>
</template>
<script>
import Tip from "../components/tip"
import Pagination from '@/components/Pagination'
import { formatTime } from '@/utils/formatDate'
function getSupport(vue){
let account=JSON.parse(localStorage.user).account
let password=JSON.parse(localStorage.user).password
vue.$http.get(vueajax_url_pre+"/ctrl.cgi?Msg=getDevInfo&user="+account+"&passwd="+password).then((response) => {
var res = response.data
vue.supportLoadLibFace = res.SupportLoadLibFace
})
}
function getTemMode (vue) {
return new Promise((resolve, reject) => {
let account = JSON.parse(localStorage.user).account
let password = JSON.parse(localStorage.user).password
vue.$http
.get(
vueajax_url_pre +
'/ctrl.cgi?Msg=GetTemMode&user=' +
account +
'&passwd=' +
password
)
.then(response => {
let res = JSON.parse(response.bodyText)
vue.tempSignal = res.temshowmode
resolve(response)
}).catch(error => {
reject(error)
})
})
}
function changeTem (val) {
var tem = val * 1.8 + 32
return tem
}
function getTemInfo (vue) {
vue.recordLoading = true
let account = JSON.parse(localStorage.user).account
let password = JSON.parse(localStorage.user).password
vue.$http
.get(
vueajax_url_pre +
'/ctrl.cgi?Msg=GetTemInfolist&user=' + account + '&passwd=' + password
+ '&Normal=' + vue.temp_selected
+ '&Offset=' + (vue.listQuery.page - 1) * vue.listQuery.row
+ '&Number=' + vue.listQuery.row
+ '&TimeFrom=' + vue.begin_time
+ '&TimeTo=' + vue.end_time
)
.then(response => {
let res = JSON.parse(response.bodyText)
vue.recordLoading = false
if (res.ret === 0 && res.RecordNumber > 0) {
res.TemRecordList.map(item => {
if (item.Time !== '') {
item.time = formatTime(item.Time)
}
if (vue.tempSignal === 0) {
item.temp = item.Tem.toFixed(1) + '℃'
} else {
item.temp = changeTem(item.Tem).toFixed(1) + '℉'
}
})
vue.listData = res.TemRecordList
vue.total = res.ConditionTotalNumber
} else {
vue.listData = []
vue.total = 0
}
})
.catch(res => {
vue.$message({
type: 'error',
message: vue.$t('common.interfaceFail')
})
vue.recordLoading = false
vue.listData = []
vue.total = 0
})
}
function delTemInfo (vue, type) {
let account = JSON.parse(localStorage.user).account
let password = JSON.parse(localStorage.user).password
vue.$http
.get(
vueajax_url_pre +
'/ctrl.cgi?Msg=DeleteTemRecord&user=' + account + '&passwd=' + password
+ '&DeleteAll=' + type
+ '&IdList=' + vue.selectedRow.join(','),
)
.then(response => {
let res = JSON.parse(response.bodyText)
if (res.ret === 0) {
getTemInfo(vue)
} else {
getTemInfo(vue)
}
})
.catch(res => {
vue.$message({
type: 'error',
message: vue.$t('common.interfaceFail')
})
})
}
export default {
name:'temRecord',
components:{
Tip,
Pagination
},
created:function(){
getSupport(this)
var _this = this
getTemMode(this).then(function() {
getTemInfo(_this)
})
},
mounted:function(){
},
data(){
return{
begin_time: 0,
end_time: 0,
query_time:'',
temp_selected: 2,
tempSelection: [
{
value: 2,
label: this.$t('common.all')
},
{
value: 1,
label: this.$t('tempRec.tempNormal')
},
{
value: 0,
label: this.$t('tempRec.tempHigh')
}
],
tempSignal: 0,
recordLoading:false,
loadingText: this.$t('common.loading'),
exporting: false,
pageExporting: false,
listData: [],
total: 0,
listQuery: {
page: 1,
row: 10
},
selectedRow:[],
supportLoadLibFace:0,
}
},
methods:{
batchDelete:function (type) {
if(type == 0 && this.selectedRow.length==0){
this.$message({
message: this.$t('faceLib.selectDelItem'),
type: 'warning',
center: true,
duration:3000,
showClose: true,
});
}else{
this.$confirm(type == 0 ? this.$t('tempRec.delTip') : this.$t('tempRec.clearTip'), this.$t('common.notice'), {
confirmButtonText: this.$t('common.confirm'),
cancelButtonText: this.$t('common.cancel'),
type: 'warning'
}).then(() => {
let vue = this
this.recordLoading = true
this.loadingText = type == 0 ? this.$t('faceLib.deleting') : this.$t('tempRec.clearing')
delTemInfo(this, type)
}).catch((e) => {
});
}
},
handleSelectionChange: function(val) {
this.selectedRow = []
if(val.length>0){
val.map(l => {
this.selectedRow.push(l.ID)
})
}else{
this.selectedRow = []
}
console.log("this.selectedRow="+JSON.stringify(this.selectedRow))
},
filter() {
this.listQuery.page = 1
this.query()
},
query(val) {
if (val && val.page !== undefined) {
this.listQuery.page = val.page
this.listQuery.row = val.limit
}
if (this.query_time && this.query_time !== '') {
this.begin_time = this.query_time[0] / 1000
this.end_time = this.query_time[1] / 1000
} else {
this.begin_time = 0
this.end_time = 0
}
getTemInfo(this)
},
exportTemRecord:function (type) {
if(type == 0){
this.$confirm(this.$t('tempRec.downloadAllTip'), this.$t('common.notice'), {
confirmButtonText: 'OK',
cancelButtonText: this.$t('common.cancel'),
type: 'warning'
}).then(() => {
this.exporting = true
let account = JSON.parse(localStorage.user).account
let password = JSON.parse(localStorage.user).password
this.$http.get(thisajax_url_pre + '/ctrl.cgi?Msg=ExportTemRecord&user=' + account + '&passwd=' + password + '&Normal=0&Offset=0&Number=0&TimeFrom=0&TimeTo=0').then(response => {
let res = JSON.parse(response.bodyText)
if (res.ret === 0) {
location.href=res.file_path
} else {
}
this.exporting = false
})
.catch(res => {
this.$message({
type: 'error',
message: this.$t('common.interfaceFail')
})
this.exporting = false
})
}).catch((e) => {
});
}else {
this.pageExporting = true
let account = JSON.parse(localStorage.user).account
let password = JSON.parse(localStorage.user).password
this.$http.get(thisajax_url_pre + '/ctrl.cgi?Msg=ExportTemRecord&user=' + account + '&passwd=' + password + '&Normal=' + this.temp_selected + '&Offset=' + (this.listQuery.page - 1) * this.listQuery.row + '&Number=' + this.listQuery.row + '&TimeFrom=' + this.begin_time + '&TimeTo=' + this.end_time).then(response => {
let res = JSON.parse(response.bodyText)
if (res.ret === 0) {
location.href=res.file_path
} else {
}
this.pageExporting = false
})
.catch(res => {
this.$message({
type: 'error',
message: this.$t('common.interfaceFail')
})
this.pageExporting = false
})
}
},
}
};
</script>
<style scoped lang="scss">
.operateBox{
display: flex;
justify-content: space-between;
}
.queryLabel {
width: 160px;
display: inline-block;
font-size: 14px;
line-height: 40px;
}
.btnBox{
align-self: flex-end;
}
.tabImg{
width: 50px;
height: 50px;
}
a{
color:#409EFF;
}
.pg{
text-align:right;
}
.textLeft{
text-align: left;
}
.textRight{
text-align: right;
}
.marTop10{
margin-top: 10px;
}
</style>