<template>
|
<div class="camera-main">
|
<el-row :gutter="13"><!-- 整体布局(左中右，间隔80px) -->
|
<transition :duration="3500" name="el-zoom-in-top">
|
<el-col class="cameraListCss" v-show="animeShow" :span="4"><!-- 左边整体占6/24 -->
|
<el-row>
|
<el-col :span="24">
|
<h2 style="color:white">摄像头列表</h2>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="13">
|
<el-input @keyup.enter.native="getKeyList()" @change="getKeyList()" v-model="key" placeholder="搜索"></el-input>
|
</el-col>
|
<el-col :span="1">
|
|
</el-col>
|
<el-col :span="6">
|
<el-button style="background-color:#3FA9FC;color:white;border-radius:15px;">搜索</el-button>
|
</el-col>
|
<!-- <el-col :span="3"> -->
|
<!-- <el-button @click="getKeyList()" style="color:black;border:1px solid black;margin-left:5px;background-color:rgba(0,0,0,0)">搜索</el-button> -->
|
<!-- </el-col> -->
|
</el-row>
|
|
<el-table
|
ref="table"
|
@row-click="initPlay"
|
:data="onlineList"
|
style="font-size:10px;margin-top:20px;background-color:rgba(0,0,0,0);width: 100%;"
|
v-loading="dataloading"
|
:height="documentClientHeight - 80"
|
size="mini"
|
element-loading-text="加载摄像头中"
|
element-loading-color='black'
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0)"
|
:show-header="false">
|
<el-table-column
|
prop="remark"
|
label="备注"
|
align="center"
|
width="100%">
|
</el-table-column>
|
<el-table-column
|
align="center">
|
<template slot-scope="scope">
|
<el-button
|
@click="play(scope.row.accessToken,
|
scope.row.cameraSequence,
|
scope.row.cameraVerificationcode,
|
scope.row.remark,
|
scope.row.streetlightName,
|
scope.row.streetlightId,
|
scope.row.cameraAddress)"
|
v-if="scope.row.onlineStatus === 1"
|
style="color:#409EFF"
|
slot="reference"
|
type="text"> 预览</el-button>
|
<el-button v-else slot="reference" style="color:white" type="text">详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</el-col>
|
</transition>
|
<el-col :span="1"> </el-col>
|
<el-col style="margin-top:15px" :span="14"><!-- 中间整体占用15/24 -->
|
<!-- <div style="height:40px;width:100%">
|
<el-row v-show="animeShow">
|
<i class="el-icon-camera"></i>
|
<span style="font-weight: bold;font-size:25px">摄像头云控制模式*</span>
|
<span>当前控制摄像头：{{cameraSequenceList[controlNum]}}</span>
|
</el-row>
|
</div> -->
|
<div>
|
<!-- 此处为1*1播放区域 -->
|
<div v-if="windowsCount === 1">
|
<object
|
v-if="isIE(0)"
|
classid="clsid:54FC7795-1014-4BF6-8BA3-500C61EC1A05"
|
id="EZUIKit"
|
width="100%"
|
:height='ezheight'
|
></object>
|
<iframe
|
id="compatiblePlayer"
|
v-if="isIE(1)"
|
:src="compatiblePlayerURLList[0]"
|
width="100%"
|
:height="ezheight"
|
allowfullscreen
|
></iframe>
|
</div>
|
<!---->
|
<!-- 此处为1*2播放区域 -->
|
<div v-if="windowsCount === 2">
|
<el-row>
|
<el-col :span="9">
|
<span @click="changeControl(0)" style="margin-left:5px">序列号:{{this.cameraSequenceList[0]}}</span>
|
</el-col>
|
<el-col :span="10">
|
<span @click="changeControl(0)">地址:{{this.cameraAddressList[0]}}</span>
|
</el-col>
|
<el-col :span="5">
|
<el-switch
|
v-model="playControlSwitch[0]"
|
active-text="控制"
|
inactive-text=""
|
@change="changeControl(0)">
|
</el-switch>
|
</el-col>
|
</el-row>
|
<object
|
v-if="isIE(0)"
|
classid="clsid:54FC7795-1014-4BF6-8BA3-500C61EC1A05"
|
id="EZUIKit120"
|
width="100%"
|
:height='ezheightMid'
|
></object>
|
<iframe
|
id="compatiblePlayer121"
|
v-if="isIE(1)"
|
:src="compatiblePlayerURLList[0]"
|
width="100%"
|
:height="ezheightMid"
|
allowfullscreen
|
></iframe>
|
<el-row>
|
<el-col :span="9">
|
<span @click="changeControl(1)" style="margin-left:5px;">序列号:{{this.cameraSequenceList[1]}}</span>
|
</el-col>
|
<el-col :span="10">
|
<span @click="changeControl(1)">地址:{{this.cameraAddressList[1]}}</span>
|
</el-col>
|
<el-col :span="5">
|
<el-switch
|
v-model="playControlSwitch[1]"
|
active-text="控制"
|
inactive-text=""
|
@change="changeControl(1)">
|
</el-switch>
|
</el-col>
|
</el-row>
|
<object
|
v-if="isIE(0)"
|
classid="clsid:54FC7795-1014-4BF6-8BA3-500C61EC1A05"
|
id="EZUIKit121"
|
width="100%"
|
:height='ezheightMid'
|
></object>
|
<iframe
|
id="compatiblePlayer122"
|
v-if="isIE(1)"
|
:src="compatiblePlayerURLList[1]"
|
width="100%"
|
:height="ezheightMid"
|
allowfullscreen
|
></iframe>
|
</div>
|
<!-- 此处为2*2播放区域 -->
|
<div v-if="windowsCount === 3">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-row>
|
<el-col :span="9">
|
<span @click="changeControl(0)" style="margin-left:5px">序列号:{{this.cameraSequenceList[0]}}</span>
|
</el-col>
|
<el-col :span="10">
|
<span @click="changeControl(0)">地址:{{this.cameraAddressList[0]}}</span>
|
</el-col>
|
<el-col :span="5">
|
<el-switch
|
v-model="playControlSwitch[0]"
|
active-text="控制"
|
inactive-text=""
|
@change="changeControl(0)">
|
</el-switch>
|
</el-col>
|
</el-row>
|
<iframe
|
id="compatiblePlayer0"
|
v-if="isIE(1)"
|
:src="compatiblePlayerURLList[0]"
|
width="100%"
|
:height="ezheightMid"
|
allowfullscreen
|
></iframe>
|
<object
|
v-if="isIE(0)"
|
classid="clsid:54FC7795-1014-4BF6-8BA3-500C61EC1A05"
|
id="EZUIKit0"
|
width="100%"
|
:height='ezheightMid'
|
allowfullscreen
|
></object>
|
</el-col>
|
<el-col :span="12">
|
<el-row>
|
<el-col :span="9">
|
<span @click="changeControl(1)" style="margin-left:5px;">序列号:{{this.cameraSequenceList[1]}}</span>
|
</el-col>
|
<el-col :span="10">
|
<span @click="changeControl(1)">地址:{{this.cameraAddressList[1]}}</span>
|
</el-col>
|
<el-col :span="5">
|
<el-switch
|
v-model="playControlSwitch[1]"
|
active-text="控制"
|
inactive-text=""
|
@change="changeControl(1)">
|
</el-switch>
|
</el-col>
|
</el-row>
|
<iframe
|
id="compatiblePlayer1"
|
v-if="isIE(1)"
|
:src="compatiblePlayerURLList[1]"
|
width="100%"
|
:height="ezheightMid"
|
allowfullscreen
|
></iframe>
|
<object
|
v-if="isIE(0)"
|
classid="clsid:54FC7795-1014-4BF6-8BA3-500C61EC1A05"
|
id="EZUIKit1"
|
width="100%"
|
:height='ezheightMid'
|
allowfullscreen
|
></object>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-row>
|
<el-col :span="9">
|
<span @click="changeControl(2)" style="margin-left:5px;">序列号:{{this.cameraSequenceList[2]}}</span>
|
</el-col>
|
<el-col :span="10">
|
<span @click="changeControl(2)">地址:{{this.cameraAddressList[2]}}</span>
|
</el-col>
|
<el-col :span="5">
|
<el-switch
|
v-model="playControlSwitch[2]"
|
active-text="控制"
|
inactive-text=""
|
@change="changeControl(2)">
|
</el-switch>
|
</el-col>
|
</el-row>
|
<iframe
|
id="compatiblePlayer2"
|
v-if="isIE(1)"
|
:src="compatiblePlayerURLList[2]"
|
width="100%"
|
:height="ezheightMid"
|
allowfullscreen
|
></iframe>
|
<object
|
v-if="isIE(0)"
|
classid="clsid:54FC7795-1014-4BF6-8BA3-500C61EC1A05"
|
id="EZUIKit2"
|
width="100%"
|
:height='ezheightMid'
|
allowfullscreen
|
></object>
|
</el-col>
|
<el-col :span="12">
|
<el-row>
|
<el-col :span="9">
|
<span @click="changeControl(3)" style="margin-left:5px;">序列号:{{this.cameraSequenceList[3]}}</span>
|
</el-col>
|
<el-col :span="10">
|
<span @click="changeControl(3)">地址:{{this.cameraAddressList[3]}}</span>
|
</el-col>
|
<el-col :span="5">
|
<el-switch
|
v-model="playControlSwitch[3]"
|
active-text="控制"
|
inactive-text=""
|
@change="changeControl(3)">
|
</el-switch>
|
</el-col>
|
</el-row>
|
<iframe
|
id="compatiblePlayer3"
|
v-if="isIE(1)"
|
:src="compatiblePlayerURLList[3]"
|
width="100%"
|
:height="ezheightMid"
|
allowfullscreen
|
></iframe>
|
<object
|
v-if="isIE(0)"
|
classid="clsid:54FC7795-1014-4BF6-8BA3-500C61EC1A05"
|
id="EZUIKit3"
|
width="100%"
|
:height='ezheightMid'
|
allowfullscreen></object>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 2*2结束 -->
|
</div>
|
</el-col>
|
<el-col :span="1"> </el-col>
|
<el-col v-show="animeShow" :span="4" style="margin-left:20px"><!-- 右边整体占用4/24 -->
|
<h2>控制平台</h2>
|
|
<div id="Roulette" class="Roulette-default" style="text-align:center;height:250px;">
|
<div style="height:50px;">
|
<el-row>
|
<el-col :span="4">
|
|
</el-col>
|
<el-col :span="4" @mousedown.native="startPtz(4)" @mouseup.native="stopPtz(4)" @mouseover.native="rouletteChange(4)" @mouseout.native="rouletteChange(8)">
|
<div style="height:25px;margin-top:25px">
|
</div>
|
</el-col>
|
<el-col :span="8" @mousedown.native="startPtz(0)" @mouseup.native="stopPtz(0)" @mouseover.native="rouletteChange(0)" @mouseout.native="rouletteChange(8)">
|
<div style="height:50px">
|
</div>
|
</el-col>
|
<el-col :span="4" @mousedown.native="startPtz(6)" @mouseup.native="stopPtz(6)" @mouseover.native="rouletteChange(6)" @mouseout.native="rouletteChange(8)">
|
<div style="height:25px;margin-top:25px">
|
</div>
|
</el-col>
|
<el-col :span="4">
|
|
</el-col>
|
</el-row>
|
</div>
|
|
<div style="height:50px;">
|
<el-row>
|
<el-col :span="2">
|
|
</el-col>
|
<el-col :span="7" @mousedown.native="startPtz(4)" @mouseup.native="stopPtz(4)" @mouseover.native="rouletteChange(4)" @mouseout.native="rouletteChange(8)">
|
<div style="height:50px">
|
</div>
|
</el-col>
|
<el-col :span="6" @mousedown.native="capturePicture()">
|
<div style="height:50px">
|
</div>
|
</el-col>
|
<el-col :span="7" @mousedown.native="startPtz(6)" @mouseup.native="stopPtz(6)" @mouseover.native="rouletteChange(6)" @mouseout.native="rouletteChange(8)">
|
<div style="height:50px">
|
</div>
|
</el-col>
|
<el-col :span="2">
|
|
</el-col>
|
</el-row>
|
</div>
|
|
<div style="height:60px">
|
<el-row>
|
<el-col :span="2">
|
|
</el-col>
|
<el-col :span="4" @mousedown.native="startPtz(2)" @mouseup.native="stopPtz(2)" @mouseover.native="rouletteChange(2)" @mouseout.native="rouletteChange(8)">
|
<div style="height:60px">
|
</div>
|
</el-col>
|
<el-col :span="12" @mousedown.native="capturePicture()">
|
<div style="height:60px">
|
</div>
|
</el-col>
|
<el-col :span="4" @mousedown.native="startPtz(3)" @mouseup.native="stopPtz(3)" @mouseover.native="rouletteChange(3)" @mouseout.native="rouletteChange(8)">
|
<div style="height:60px">
|
</div>
|
</el-col>
|
<el-col :span="2">
|
|
</el-col>
|
</el-row>
|
</div>
|
|
<div style="height:40px">
|
<el-row>
|
<el-col :span="2">
|
|
</el-col>
|
<el-col :span="7" @mousedown.native="startPtz(5)" @mouseup.native="stopPtz(5)" @mouseover.native="rouletteChange(5)" @mouseout.native="rouletteChange(8)">
|
<div style="height:40px">
|
</div>
|
</el-col>
|
<el-col :span="6" @mousedown.native="capturePicture()">
|
<div style="height:40px">
|
</div>
|
</el-col>
|
<el-col :span="7" @mousedown.native="startPtz(7)" @mouseup.native="stopPtz(7)" @mouseover.native="rouletteChange(7)" @mouseout.native="rouletteChange(8)">
|
<div style="height:40px">
|
</div>
|
</el-col>
|
<el-col :span="2">
|
|
</el-col>
|
</el-row>
|
</div>
|
|
<div style="height:50px">
|
<el-row>
|
<el-col :span="4">
|
|
</el-col>
|
<el-col :span="4" @mousedown.native="startPtz(5)" @mouseup.native="stopPtz(5)" @mouseover.native="rouletteChange(5)" @mouseout.native="rouletteChange(8)">
|
<div style="height:25px;margin-bottom:25px">
|
</div>
|
</el-col>
|
<el-col :span="8" @mousedown.native="startPtz(1)" @mouseup.native="stopPtz(1)" @mouseover.native="rouletteChange(1)" @mouseout.native="rouletteChange(8)">
|
<div style="height:50px">
|
</div>
|
</el-col>
|
<el-col :span="4" @mousedown.native="startPtz(7)" @mouseup.native="stopPtz(7)" @mouseover.native="rouletteChange(7)" @mouseout.native="rouletteChange(8)">
|
<div style="height:25px;margin-bottom:25px">
|
</div>
|
</el-col>
|
<el-col :span="4">
|
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
|
<div style="text-align:center;margin-top:5px">
|
<el-button size="mini" @mousedown.native="startPtz(8)" @mouseup.native="stopPtz(8)" style="background-color:rgba(0,0,0,0);border:0px">
|
<img width="60px" height="35px" src="~@/assets/img/camera/enlarge.png">
|
</el-button>
|
<span style="color:white;font-size:17px">
|
缩放
|
</span>
|
<el-button size="mini" @mousedown.native="startPtz(9)" @mouseup.native="stopPtz(9)" style="background-color:rgba(0,0,0,0);border:0px">
|
<img width="60px" height="35px" src="~@/assets/img/camera/narrow.png">
|
</el-button>
|
</div>
|
|
<div style="text-align:center">
|
<el-button size="mini" @mousedown.native="startPtz(10)" @mouseup.native="stopPtz(10)" style="background-color:rgba(0,0,0,0);border:0px">
|
<img width="60px" height="35px" src="~@/assets/img/camera/focus.png">
|
</el-button>
|
<span style="color:white;font-size:17px">
|
焦距
|
</span>
|
<el-button size="mini" @mousedown.native="startPtz(11)" @mouseup.native="stopPtz(11)" style="background-color:rgba(0,0,0,0);border:0px">
|
<img width="60px" height="35px" src="~@/assets/img/camera/defocus.png">
|
</el-button>
|
</div>
|
|
<h2 style="margin-top:5px">分屏显示</h2>
|
<div style="text-align:center">
|
<el-row>
|
<el-col :span="8">
|
<div class="bg" style="height:50px;width:80%">
|
<img @click="changeWindowCount(1)" v-if="windowsCount != 1" width="100%" height="50px" src="~@/assets/img/camera/SplitScreen11.png">
|
<img v-if="windowsCount === 1" width="110%" height="50px" src="~@/assets/img/camera/SplitScreen11o.png">
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div style="height:50px;width:80%">
|
<img @click="changeWindowCount(2)" v-if="windowsCount != 2" width="100%" height="50px" src="~@/assets/img/camera/SplitScreen12.png">
|
<img v-if="windowsCount === 2" width="110%" height="50px" src="~@/assets/img/camera/SplitScreen12o.png">
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div style="height:50px;width:80%">
|
<img @click="changeWindowCount(3)" v-if="windowsCount != 3" width="100%" height="50px" src="~@/assets/img/camera/SplitScreen22.png">
|
<img v-if="windowsCount === 3" width="110%" height="50px" src="~@/assets/img/camera/SplitScreen22o.png">
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="1">
|
|
</el-col>
|
<el-col :span="5">
|
1*1
|
</el-col>
|
<el-col :span="4">
|
|
</el-col>
|
<el-col :span="3">
|
1*2
|
</el-col>
|
<el-col :span="2">
|
|
</el-col>
|
<el-col :span="3">
|
|
</el-col>
|
<el-col :span="3">
|
2*2
|
</el-col>
|
<el-col :span="3">
|
|
</el-col>
|
</el-row>
|
</div>
|
<el-row style="margin-top:5px;">
|
<el-col :span="12">
|
<h2>角度设置</h2>
|
</el-col>
|
<el-col :span="12">
|
<el-tooltip placement="top">
|
<div slot="content">
|
<span style="color:black">当点击<span style="color:red">预设角度</span>无效时<br>点击此按钮重置</span>
|
</div>
|
<el-button size="mini" style="background-color:rgba(0,0,0,0);color:white; padding:7px 15px" @click="removeAllPoint(0)">重置</el-button>
|
</el-tooltip>
|
</el-col>
|
</el-row>
|
<el-row style="margin-top:20px">
|
|
<el-col v-if="!pic1" :span="12" @mousedown.native="addPoint()">
|
<div style="width:90%;height:100px">
|
<img width="100%" height="100px" src="~@/assets/img/camera/pointAdd.png">
|
</div>
|
</el-col>
|
|
<el-col v-if="pic1" :span="12" @mousedown.native="usePoint(1)">
|
<div style="width:90%;height:100px;position: relative;">
|
<div id="pic1">
|
<el-button style="position: absolute;right:0px;top:0;background-color:rgba(255,255,255,0.1);color:white" size="mini" @click="removePoint(1)">×</el-button>
|
<img width="100%" height="100px" :src="picUrl1">
|
</div>
|
</div>
|
</el-col>
|
|
<el-col v-if="!pic2" :span="12" @mousedown.native="addPoint()">
|
<div style="width:90%;height:100px;position: relative;">
|
<img width="100%" height="100px" src="~@/assets/img/camera/pointAdd.png">
|
</div>
|
</el-col>
|
|
<el-col v-if="pic2" :span="12" @mousedown.native="usePoint(2)">
|
<div style="width:90%;height:100px;position: relative;">
|
<div id="pic2">
|
<el-button style="position: absolute;right:0px;top:0;background-color:rgba(255,255,255,0.1);color:white" size="mini" @click="removePoint(2)">×</el-button>
|
<img width="100%" height="100px" :src="picUrl2">
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row style="margin-top:20px">
|
<el-col v-if="!pic3" :span="12" @mousedown.native="addPoint()">
|
<div style="width:90%;height:100px">
|
<img width="100%" height="100px" src="~@/assets/img/camera/pointAdd.png">
|
</div>
|
</el-col>
|
|
<el-col v-if="pic3" :span="12" @mousedown.native="usePoint(3)">
|
<div style="width:90%;height:100px;position: relative;">
|
<div id="pic3">
|
<el-button style="position: absolute;right:0px;top:0;background-color:rgba(255,255,255,0.1);color:white" size="mini" @click="removePoint(3)">×</el-button>
|
<img width="100%" height="100px" :src="picUrl3">
|
</div>
|
</div>
|
</el-col>
|
|
<el-col v-if="!pic4" :span="12" @mousedown.native="addPoint()">
|
<div style="width:90%;height:100px">
|
<img width="100%" height="100px" src="~@/assets/img/camera/pointAdd.png">
|
</div>
|
</el-col>
|
|
<el-col v-if="pic4" :span="12" @mousedown.native="usePoint(4)">
|
<div style="width:90%;height:100px;position: relative;">
|
<div id="pic4">
|
<el-button style="position: absolute;right:0px;top:0;background-color:rgba(255,255,255,0.1);color:white" size="mini" @click="removePoint(4)">×</el-button>
|
<img width="100%" height="100px" :src="picUrl4">
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
|
<!-- <br><br><br><br>
|
|
|
<el-form>
|
<el-form-item style="margin-left:20px" label="预置点">
|
<el-button :loading="addTimeFlag" @click="addPoint()" style="background-color:rgba(0,0,0,0)" size="mini">
|
添加
|
</el-button>
|
<el-button :loading="removeTimeFlag" @click="removeAllPoint(0)" style="background-color:rgba(0,0,0,0)" size="mini">
|
清空
|
</el-button>
|
</el-form-item>
|
控制台结束
|
</el-form> -->
|
|
|
<!-- <el-table
|
:data="mpicList"
|
style="margin-top:20px;background-color:rgba(0,0,0,0);width: 100%"
|
v-loading="imgDataLoading"
|
:height="tableHeight"
|
element-loading-text="加载摄像头中"
|
element-loading-color='black'
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0)">
|
<el-table-column
|
prop="picUrl"
|
label="缩略图"
|
align="center">
|
<template slot-scope="scope">
|
<img width="100px" height="80px" :src="scope.row.picUrl">
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="备注"
|
align="center">
|
<template slot-scope="scope">
|
<div>
|
<span>{{scope.row.remark}}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="left"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button style="color:black" @click="usePoint(scope.row.pointIndex)" type="text" size="small">调用</el-button>
|
<el-button style="color:black" @click="removePoint(scope.row.pointIndex,scope.$index,1)" type="text" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table> -->
|
</el-col>
|
</el-row>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
value: 0,
|
windowsCount: 0, // 窗口数量
|
controlNum: 0, // 控制窗口选择窗口号
|
key: '', // 备注搜索关键字
|
dataloading: false, // 列表加载动画
|
imgDataLoading: false, // 缩略图加载动画
|
onlineList: [],
|
saveOnlineList: [], // 保存上次请求后的列表
|
tableHeight: window.innerHeight - 230,
|
ezheight: '0px',
|
// ezheight: document.documentElement['clientHeight'].clientHeight - 260,
|
compatiblePlayerURLList: [], // 兼容模式URL.List(2*2),保存兼容模式窗口URL，在切换1*1时清空
|
ezheightMid: '390px',
|
appkey: '51a534ebadf54c31a0848dc575dfa206',
|
accessToken: '',
|
channelNo: '1',
|
speed: 2,
|
// compatiblePlayerURL: 'https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/203751922/1.live&autoplay=1&accessToken=ra.3db089bnbw0pozpi7rlub985c5eku0yo-4cixl7k3p8-1sz4ear-jrsbbsyob',
|
cameraSequenceList: [],
|
cameraVerificationcodeList: [],
|
remarkList: [],
|
streetlightNameList: [],
|
streetlightIdList: [],
|
cameraAddressList: [],
|
mpicList: [],
|
pic: '',
|
index: '',
|
mess: '',
|
addTimeFlag: false, // 增加预置点时，按钮不可多次点击
|
removeTimeFlag: false, // 清空预置点时，按钮不可多次点击
|
playControlSwitch: [],
|
animeShow: false, // 左边部分显示
|
pic1: false,
|
pic2: false,
|
pic3: false,
|
pic4: false,
|
picUrl1: '',
|
picUrl2: '',
|
picUrl3: '',
|
picUrl4: ''
|
}
|
},
|
computed: {
|
documentClientHeight: {
|
get () { return this.$store.state.common.documentClientHeight - 238 }
|
}
|
},
|
watch: {
|
documentClientHeight (curVal, oldVal) {
|
this.ezheight = curVal
|
}
|
},
|
activated () {
|
this.getOnlineList()
|
},
|
mounted () {
|
this.ezheight = this.documentClientHeight
|
},
|
methods: {
|
// 根据关键字获取列表
|
getKeyList () {
|
if (this.key !== '') {
|
var list = this.saveOnlineList
|
var keyList = []
|
for (var i = 0; i < list.length; i++) {
|
if (list[i].remark !== null) {
|
if (list[i].remark.indexOf(this.key) !== -1) {
|
keyList.push(list[i])
|
continue
|
}
|
}
|
if (list[i].cameraSequence != null) {
|
if (list[i].cameraSequence.indexOf(this.key) !== -1) {
|
keyList.push(list[i])
|
continue
|
}
|
}
|
}
|
this.onlineList = keyList
|
} else {
|
this.onlineList = this.saveOnlineList
|
}
|
},
|
// 获取在线列表
|
getOnlineList () {
|
this.dataloading = true
|
this.animeShow = false
|
let _this = this
|
setTimeout(function () {
|
_this.animeShow = true
|
if (_this.windowsCount !== 2) {
|
_this.windowsCount = 1
|
}
|
}, 500)
|
this.$http({
|
url: this.$http.adornUrl('/pole/polecamera/getOnline'),
|
method: 'get'
|
}).then(({ data }) => {
|
this.onlineList = data.list
|
this.saveOnlineList = data.list
|
this.dataloading = false
|
this.initPlay(this.onlineList[0])
|
})
|
},
|
initPlay (row) {
|
this.play(row.accessToken, row.cameraSequence, row.cameraVerificationcode, row.remark, row.streetlightName, row.streetlightId, row.cameraAddress)
|
},
|
// 播放传参 预览
|
play (
|
rowAccessToken,
|
rowCameraSequence,
|
rowCameraVerificationcode,
|
rowRemark,
|
rowStreetlightName,
|
rowStreetlightId,
|
rowAddress
|
) {
|
this.$notify({
|
message: '开始播放',
|
type: 'success'
|
})
|
this.mpicList = []
|
this.accessToken = rowAccessToken
|
this.cameraSequenceList[this.controlNum] = rowCameraSequence
|
this.cameraVerificationcodeList[this.controlNum] = rowCameraVerificationcode
|
this.remarkList[this.controlNum] = rowRemark
|
this.streetlightNameList[this.controlNum] = rowStreetlightName
|
this.streetlightIdList[this.controlNum] = rowStreetlightId
|
this.cameraAddressList[this.controlNum] = rowAddress
|
|
let _this = this
|
|
setTimeout(function () {
|
if (_this.isIE(0)) {
|
// activeX模式播放
|
_this.actXPlayer()
|
} else {
|
// 兼容模式播放
|
_this.comXPlayer()
|
}
|
// 请求获取预置点
|
_this.getCameraIndex()
|
}, 200)
|
},
|
// activeX模式播放
|
actXPlayer () {
|
var playOcx
|
if (this.windowsCount === 1) {
|
playOcx = document.getElementById('EZUIKit')
|
} else if (this.windowsCount === 2) {
|
playOcx = document.getElementById('EZUIKit12' + this.controlNum)
|
} else if (this.windowsCount === 3) {
|
playOcx = document.getElementById('EZUIKit' + this.controlNum)
|
}
|
if (!playOcx) {
|
return -1
|
}
|
// 先执行停止播放
|
playOcx.StopPlay()
|
var res1 = playOcx.InitWithAppKey(this.appkey)
|
if (res1 !== 0) {
|
alert('播放失败！错误：502，请联系管理员！') // appKey初始化错误
|
return -1
|
}
|
var res2 = playOcx.SetAccessToken(this.accessToken)
|
if (res2 !== 0) {
|
alert('播放失败！错误：501，请联系管理员！') // accessToken错误
|
return -1
|
}
|
var playURL =
|
'ezopen://' +
|
this.cameraVerificationcodeList[this.controlNum] +
|
'@open.ys7.com/' +
|
this.cameraSequenceList[this.controlNum] +
|
'/1.hd.live'
|
var res3 = playOcx.StartPlay(playURL)
|
if (res3 !== 0) {
|
alert('开始播放失败！错误：503，请联系管理员！') // 验证码错误
|
return -1
|
}
|
this.mess = '调用成功'
|
},
|
// 兼容模式播放
|
comXPlayer () {
|
var url =
|
'https://open.ys7.com/ezopen/h5/iframe?url=ezopen://' +
|
this.cameraVerificationcodeList[this.controlNum] +
|
'@open.ys7.com/' +
|
this.cameraSequenceList[this.controlNum] +
|
'/1.live&autoplay=1&accessToken=' +
|
this.accessToken
|
this.compatiblePlayerURLList[this.controlNum] = url
|
this.reflushWindows()
|
},
|
// 停止页面播放
|
stopPlay () {
|
if (this.isIE(0)) {
|
var playOcx
|
if (this.windowsCount === 1) {
|
playOcx = document.getElementById('EZUIKit')
|
} else if (this.windowsCount === 2) {
|
playOcx = document.getElementById('EZUIKit12' + this.controlNum)
|
} else if (this.windowsCount === 3) {
|
playOcx = document.getElementById('EZUIKit' + this.controlNum)
|
}
|
if (!playOcx) {
|
return -1
|
}
|
// 先执行停止播放
|
playOcx.StopPlay()
|
} else {
|
this.compatiblePlayerURLList[this.controlNum] = ''
|
}
|
this.cameraSequenceList[this.controlNum] = ''
|
this.cameraVerificationcodeList[this.controlNum] = ''
|
this.cameraAddressList[this.controlNum] = ''
|
this.streetlightNameList[this.controlNum] = ''
|
this.streetlightIdList[this.controlNum] = ''
|
this.remarkList[this.controlNum] = ''
|
},
|
// POST
|
myPost (url, params) {
|
// this params must be connection like paramA=valueA¶mB=valueB
|
// 1、创建发送异步请求的对象req
|
var req = new XMLHttpRequest()
|
// 2、准备发送
|
req.open('POST', url, true)
|
// 3、设置请求头
|
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
|
// 4、发送
|
req.send(params)
|
// let _this = this
|
// 回调参数
|
// req.onreadystatechange = function () {
|
// if (req.readyState === 4 && req.status === 200) {
|
// var arr = req.responseText.split('"')
|
// if (arr[3] === 'picUrl') {
|
// // 得到缩略图，判断index是否为空，非空则推入table，清空pic和index
|
// _this.pic = arr[5]
|
// if (_this.index !== '') {
|
// _this.postAddPoint(_this.cameraSequenceList[_this.controlNum], _this.index, _this.pic)
|
// } else {
|
// _this.pic = ''
|
// }
|
// }
|
|
// if (arr[3] === 'index') {
|
// var index = arr[4].substring(1, 2)
|
// _this.index = index
|
|
// if (_this.pic !== '') {
|
// _this.postAddPoint(_this.cameraSequenceList[_this.controlNum], _this.index, _this.pic)
|
// } else {
|
// var __this = _this
|
// setTimeout(function () {
|
// if (_this.pic !== '') {
|
// __this.postAddPoint(__this.cameraSequenceList[__this.controlNum], _this.index, _this.pic)
|
// } else {
|
// __this.postAddPoint(__this.cameraSequenceList[__this.controlNum], _this.index, '')
|
// }
|
// }, 15000)
|
// }
|
// }
|
// }
|
// }
|
},
|
// 刷新播放URL
|
reflushWindows () {
|
var wcount = this.windowsCount
|
var controlN = this.controlNum
|
this.windowsCount = 0
|
this.controlNum = 0
|
this.windowsCount = wcount
|
this.controlNum = controlN
|
},
|
// 获取摄像头预置点
|
getCameraIndex () {
|
var cs = this.cameraSequenceList[this.controlNum]
|
this.$http({
|
url: this.$http.adornUrl('/pole/polecamera/findIndex'),
|
method: 'get',
|
params: {
|
'cameraSequence': cs
|
}
|
}).then(({ data }) => {
|
this.pic1 = false
|
this.pic2 = false
|
this.pic3 = false
|
this.pic4 = false
|
this.mpicList = data.indexList
|
if (this.mpicList.length > 0) {
|
for (var i = 0; i < this.mpicList.length; i++) {
|
var pointindex = this.mpicList[i].pointIndex
|
switch (pointindex) {
|
case 1: {
|
this.picUrl1 = this.mpicList[i].picUrl
|
this.pic1 = true
|
break
|
} case 2: {
|
this.picUrl2 = this.mpicList[i].picUrl
|
this.pic2 = true
|
break
|
} case 3: {
|
this.picUrl3 = this.mpicList[i].picUrl
|
this.pic3 = true
|
break
|
} case 4: {
|
this.picUrl4 = this.mpicList[i].picUrl
|
this.pic4 = true
|
break
|
}
|
}
|
}
|
}
|
})
|
},
|
// Post请求后端添加预置点
|
postAddPoint (cameraSequence, index, picUrl) {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polecamera/addIndex'),
|
method: 'get',
|
params: {
|
'cameraSequence': cameraSequence,
|
'index': index,
|
'picUrl': picUrl
|
}
|
}).then(({ data }) => {
|
this.pic = ''
|
this.index = ''
|
this.addTimeFlag = false
|
this.$notify({
|
message: '添加预设角度成功',
|
type: 'success'
|
})
|
this.getCameraIndex()
|
})
|
let _this = this
|
setTimeout(function () {
|
if (_this.addTimeFlag === true) {
|
_this.$message({
|
message: '请求失败，请检查网络或重新提交',
|
type: 'error'
|
})
|
_this.addTimeFlag = false
|
}
|
}, 5000)
|
this.getCameraIndex()
|
},
|
|
// 云台控制按钮覆盖时添加边框特效
|
startPtzButtonHover (val, flag) {
|
if (flag === 0) {
|
switch (val) {
|
case 4: {
|
this.borderButtonHover4 = true
|
break
|
}
|
case 0: {
|
this.borderButtonHover0 = true
|
break
|
}
|
case 6: {
|
this.borderButtonHover6 = true
|
break
|
}
|
case 2: {
|
this.borderButtonHover2 = true
|
break
|
}
|
case 3: {
|
this.borderButtonHover3 = true
|
break
|
}
|
case 5: {
|
this.borderButtonHover5 = true
|
break
|
}
|
case 1: {
|
this.borderButtonHover1 = true
|
break
|
}
|
case 7: {
|
this.borderButtonHover7 = true
|
break
|
}
|
}
|
} else {
|
switch (val) {
|
case 4: {
|
this.borderButtonHover4 = false
|
break
|
}
|
case 0: {
|
this.borderButtonHover0 = false
|
break
|
}
|
case 6: {
|
this.borderButtonHover6 = false
|
break
|
}
|
case 2: {
|
this.borderButtonHover2 = false
|
break
|
}
|
case 3: {
|
this.borderButtonHover3 = false
|
break
|
}
|
case 5: {
|
this.borderButtonHover5 = false
|
break
|
}
|
case 1: {
|
this.borderButtonHover1 = false
|
break
|
}
|
case 7: {
|
this.borderButtonHover7 = false
|
break
|
}
|
}
|
}
|
},
|
rouletteChange (val) {
|
var bgImg = document.getElementById('Roulette')
|
switch (val) {
|
case 4: {
|
bgImg.className = 'Roulette-leftUp'
|
break
|
}
|
case 0: {
|
bgImg.className = 'Roulette-up'
|
break
|
}
|
case 6: {
|
bgImg.className = 'Roulette-rightUp'
|
break
|
}
|
case 2: {
|
bgImg.className = 'Roulette-left'
|
break
|
}
|
case 3: {
|
bgImg.className = 'Roulette-right'
|
break
|
}
|
case 5: {
|
bgImg.className = 'Roulette-leftDown'
|
break
|
}
|
case 1: {
|
bgImg.className = 'Roulette-down'
|
break
|
}
|
case 7: {
|
bgImg.className = 'Roulette-rightDown'
|
break
|
}
|
case 8: {
|
bgImg.className = 'Roulette-default'
|
}
|
}
|
},
|
|
// 云台控制主要涉及---》accessToken/cameraSequence
|
// 云台开始控制
|
startPtz (direction) {
|
this.myPost(
|
'https://open.ys7.com/api/lapp/device/ptz/start',
|
'accessToken=' +
|
this.accessToken +
|
'&deviceSerial=' +
|
this.cameraSequenceList[this.controlNum] +
|
'&channelNo=' +
|
this.channelNo +
|
'&direction=' +
|
direction +
|
'&speed=' +
|
this.speed
|
)
|
},
|
// 云台结束控制
|
stopPtz (direction) {
|
this.myPost(
|
'https://open.ys7.com/api/lapp/device/ptz/stop',
|
'accessToken=' +
|
this.accessToken +
|
'&deviceSerial=' +
|
this.cameraSequenceList[this.controlNum] +
|
'&channelNo=' +
|
this.channelNo +
|
'&direction=' +
|
direction
|
)
|
},
|
// 增加预置点
|
addPoint () {
|
this.$notify({
|
message: '正在添加预设角度',
|
type: 'warning',
|
duration: '4000'
|
})
|
// 将按键置为加载中
|
this.addTimeFlag = true
|
|
this.$http({
|
url: this.$http.adornUrl('/pole/polecamera/addIndex'),
|
method: 'get',
|
params: {
|
'accessToken': this.accessToken,
|
'deviceSerial': this.cameraSequenceList[this.controlNum]
|
}
|
}).then(({ data }) => {
|
this.addTimeFlag = false
|
this.$notify({
|
message: '添加预设角度成功',
|
type: 'success'
|
})
|
this.getCameraIndex()
|
})
|
|
// // 添加预置点
|
// this.myPost(
|
// 'https://open.ys7.com/api/lapp/device/preset/add',
|
// 'accessToken=' +
|
// this.accessToken +
|
// '&deviceSerial=' +
|
// this.cameraSequenceList[this.controlNum] +
|
// '&channelNo=' +
|
// this.channelNo
|
// )
|
// // 请求缩略图
|
// this.myPost(
|
// 'https://open.ys7.com/api/lapp/device/capture',
|
// 'accessToken=' +
|
// this.accessToken +
|
// '&deviceSerial=' +
|
// this.cameraSequenceList[this.controlNum] +
|
// '&channelNo=' +
|
// this.channelNo
|
// )
|
},
|
// 调用预置点
|
usePoint (val) {
|
this.myPost(
|
'https://open.ys7.com/api/lapp/device/preset/move',
|
'accessToken=' +
|
this.accessToken +
|
'&deviceSerial=' +
|
this.cameraSequenceList[this.controlNum] +
|
'&channelNo=' +
|
this.channelNo +
|
'&index=' +
|
val
|
)
|
this.$notify({
|
message: '调用预置点' + val,
|
type: 'success'
|
})
|
},
|
// 删除预置点 val 预置点index 数组下标arrIndex 删除元素数量num
|
removePoint (val) {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polecamera/cleanIndex'),
|
method: 'get',
|
params: {
|
'cameraSequence': this.cameraSequenceList[this.controlNum],
|
'index': val
|
}
|
}).then(({ data }) => {
|
this.$notify({
|
message: '删除成功',
|
type: 'success'
|
})
|
this.myPost(
|
'https://open.ys7.com/api/lapp/device/preset/clear',
|
'accessToken=' +
|
this.accessToken +
|
'&deviceSerial=' +
|
this.cameraSequenceList[this.controlNum] +
|
'&channelNo=' +
|
this.channelNo +
|
'&index=' + val
|
)
|
this.getCameraIndex()
|
})
|
},
|
// 清空所有预置点 val 0:有消息提示 1:无消息提示
|
removeAllPoint (val) {
|
this.removeTimeFlag = true
|
this.$http({
|
url: this.$http.adornUrl('/pole/polecamera/cleanAllIndex'),
|
method: 'get',
|
params: {
|
'cameraSequence': this.cameraSequenceList[this.controlNum]
|
}
|
}).then(({ data }) => {
|
if (val === 0) {
|
this.$message({
|
message: '清空预置点成功',
|
type: 'success'
|
})
|
}
|
for (var i = 1; i < 8; i++) {
|
this.myPost(
|
'https://open.ys7.com/api/lapp/device/preset/clear',
|
'accessToken=' +
|
this.accessToken +
|
'&deviceSerial=' +
|
this.cameraSequenceList[this.controlNum] +
|
'&channelNo=' +
|
this.channelNo +
|
'&index=' + i
|
)
|
}
|
this.getCameraIndex()
|
this.removeTimeFlag = false
|
})
|
},
|
// 截图
|
capturePicture () {
|
var picname = new Date().valueOf()
|
if (this.modelChecked) {
|
var playOcx = document.getElementById('EZUIKit') // 得到控件引用
|
var res = playOcx.CapturePicture(picname)
|
if (res === '') {
|
this.$message({
|
message: '截图失败，请检查是否处于预览状态',
|
center: true,
|
type: 'error'
|
})
|
} else {
|
this.$message({
|
message: '截图成功，截图保存到' + res,
|
center: true,
|
showClose: true,
|
duration: 0,
|
type: 'success'
|
})
|
}
|
} else {
|
if (this.iframeSrc !== '') {
|
var player
|
if (this.windowsCount === 1) {
|
player = document.getElementById('compatiblePlayer')
|
.contentWindow
|
} else if (this.windowsCount === 2) {
|
player = document.getElementById(
|
'compatiblePlayer12' + this.controlNum
|
).contentWindow
|
} else if (this.windowsCount === 3) {
|
player = document.getElementById(
|
'compatiblePlayer' + this.controlNum
|
).contentWindow
|
}
|
player.postMessage(
|
'capturePicture',
|
'https://open.ys7.com/ezopen/h5/iframe'
|
) /* 截图 */
|
this.$message({
|
message: '截图成功',
|
center: true,
|
type: 'success'
|
})
|
} else {
|
this.$message({
|
message: '截图失败，未处于预览状态',
|
center: true,
|
type: 'error'
|
})
|
}
|
}
|
},
|
|
changeControl (controlNum) {
|
this.changeControlSwitch(controlNum)
|
this.controlNum = controlNum
|
this.getCameraIndex()
|
},
|
|
changeWindowCount (val) {
|
this.windowsCount = val
|
this.changeControl(0)
|
if (this.windowsCount === 1) {
|
// 多窗口 --》 少窗口
|
this.getCameraIndex()
|
} else if (this.windowsCount === 2) {
|
// 少窗口 --》 多窗口
|
} else if (this.windowsCount === 3) {
|
|
}
|
},
|
changeControlSwitch (controlNum) {
|
for (var i = 0; i < 4; i++) {
|
if (i === controlNum) {
|
this.playControlSwitch[i] = true
|
} else {
|
this.playControlSwitch[i] = false
|
}
|
}
|
},
|
|
// 判断是否为IE isIE(0)
|
isIE (playerVal) {
|
var IEVersionNo = -1
|
var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
|
var isIE =
|
userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 // 判断是否IE<11浏览器
|
var isEdge = userAgent.indexOf('Edge') > -1 && !isIE // 判断是否IE的Edge浏览器
|
var isIE11 =
|
userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1
|
if (isIE) {
|
var reIE = new RegExp('MSIE (\\d+\\.\\d+);')
|
reIE.test(userAgent)
|
var fIEVersion = parseFloat(RegExp['$1'])
|
if (fIEVersion === 7) {
|
IEVersionNo = 7
|
} else if (fIEVersion === 8) {
|
IEVersionNo = 8
|
} else if (fIEVersion === 9) {
|
IEVersionNo = 9
|
} else if (fIEVersion === 10) {
|
IEVersionNo = 10
|
} else {
|
IEVersionNo = 6 // IE版本<=7
|
}
|
} else if (isEdge) {
|
IEVersionNo = 1 // edge
|
} else if (isIE11) {
|
IEVersionNo = 11 // IE11
|
}
|
// return IEVersionNo > 0?(playerVal === 0?true:false):(playerVal === 0?false:true)
|
if (IEVersionNo > 0) {
|
if (playerVal === 0) {
|
return true
|
}
|
return false
|
} else {
|
if (playerVal === 0) {
|
return false
|
}
|
return true
|
}
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
h2 {
|
margin: 1px 0px;
|
}
|
.el-table {
|
border: 0px;
|
}
|
.el-table >>> thead {
|
color: white;
|
border: 0px;
|
}
|
.el-table >>> th {
|
color: white;
|
background: rgba(0, 0, 0, 0);
|
border: 0px;
|
}
|
.el-table >>> tr {
|
color: white;
|
background: rgba(0, 0, 0, 0);
|
border: 0px;
|
}
|
.el-table >>> td,
|
.el-table >>> th.is-leaf {
|
border: 0px;
|
}
|
.el-table >>> cell {
|
font-size: 5px;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.camera-main {
|
background-image: url(~@/assets/img/camera/bg-content.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
div{
|
/deep/ .el-button--mini {
|
padding: 0px;
|
}
|
/deep/.el-slider__bar {
|
background-color: white;
|
border: 1px solid black;
|
}
|
/deep/ .el-slider__runway {
|
border: 1px solid black;
|
}
|
/deep/ .el-slider__button {
|
border: 1px solid black;
|
}
|
/deep/ [placeholder~="搜索"] {
|
border: 1px solid grey;
|
color: black;
|
background-color: rgba(0, 0, 0, 0);
|
border-radius: 25px;
|
}
|
|
.Roulette-default {
|
background-image: url(~@/assets/img/camera/direction/roulette-default.png);
|
background-size: 250px 250px;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.Roulette-up {
|
background-image: url(~@/assets/img/camera/direction/roulette-up.png);
|
background-size: 250px 250px;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.Roulette-leftUp {
|
background-image: url(~@/assets/img/camera/direction/roulette-lu.png);
|
background-size: 250px 250px;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.Roulette-rightUp {
|
background-image: url(~@/assets/img/camera/direction/roulette-ru.png);
|
background-size: 250px 250px;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.Roulette-left {
|
background-image: url(~@/assets/img/camera/direction/roulette-left.png);
|
background-size: 250px 250px;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.Roulette-right {
|
background-image: url(~@/assets/img/camera/direction/roulette-right.png);
|
background-size: 250px 250px;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.Roulette-leftDown {
|
background-image: url(~@/assets/img/camera/direction/roulette-ld.png);
|
background-size: 250px 250px;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.Roulette-down {
|
background-image: url(~@/assets/img/camera/direction/roulette-down.png);
|
background-size: 250px 250px;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
.Roulette-rightDown {
|
background-image: url(~@/assets/img/camera/direction/roulette-rd.png);
|
background-size: 250px 250px;
|
background-repeat: no-repeat;
|
background-position: center;
|
}
|
}
|
</style>
|
