|
|
|
@ -49,13 +49,25 @@ |
|
|
|
</ElTabs> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div v-if="isCameraMap" style="margin-left:20px">--> |
|
|
|
<!-- <div :style="'background-image:url('+imgSrc+')'" class="cameraMap">--> |
|
|
|
<!-- <img v-for="(item,index) of cameraMaps" :key="index" :src="item.status===0?item.iconUn:item.icon"--> |
|
|
|
<!-- :style="'left:'+item.left+'px;top:'+item.top+'px'"--> |
|
|
|
<!-- height="50px" width="50px" @click="showCamera(item)"/>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<div v-if="isCameraMap" style="margin-left:20px"> |
|
|
|
<div :style="'background-image:url('+imgSrc+')'" class="cameraMap"> |
|
|
|
<img v-for="(item,index) of cameraMaps" :key="index" :src="item.status===0?item.iconUn:item.icon" |
|
|
|
:style="'left:'+item.left+'px;top:'+item.top+'px'" |
|
|
|
height="50px" width="50px" @click="showCamera(item)"/> |
|
|
|
<div v-for="(item,index) of cameraMaps" :key="index" :style="'left:'+item.left+'px;top:'+item.top+'px;position:relative;'"> |
|
|
|
<img :src="item.status===0?item.iconUn:item.icon" |
|
|
|
height="50px" width="50px" @click="showCamera(item)"/> |
|
|
|
<span style="position:absolute;bottom:-60px;font-size:12px;color:black;font-weight:bold;background-color:#f0f0f0;padding:2px 4px;border-radius:4px;"> |
|
|
|
{{ item.meaPointName }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</Dialog> |
|
|
|
</template> |
|
|
|
@ -197,16 +209,89 @@ export default { |
|
|
|
if (dData.facilityName === '大学城收费站') { |
|
|
|
this.imgSrc = require('@screen/images/shoufeiz/大学城收费站.jpg') |
|
|
|
this.cameraMaps = [ |
|
|
|
{icon: icona, iconUn: icona_f, left: 50, top: 50, status: 0, iotDeviceId: '57954'}, |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 500, top: 50, status: 0, iotDeviceId: '57939'}, |
|
|
|
{icon: iconc, iconUn: iconc_f, left: 100, top: 200, status: 0, iotDeviceId: '57941'}, |
|
|
|
{icon: iconc, iconUn: iconc_f, left: 600, top: 500, status: 0, iotDeviceId: '111111'}, |
|
|
|
{icon: icone, iconUn: icone_f, left: 200, top: 400, status: 0, iotDeviceId: '222222'}, |
|
|
|
{icon: icona, iconUn: icona_f, left: 30, top: 30, status: 0, iotDeviceId: '57953'} |
|
|
|
//内广场 |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 50, top: 50, status: 0, iotDeviceId: '58452',meaPointName:'内广场'}, |
|
|
|
//内广场全景 |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 50, top: 110, status: 0, iotDeviceId: '58957',meaPointName:'内广场全景'}, |
|
|
|
//外广场 |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 50, top: 400, status: 0, iotDeviceId: '58453',meaPointName:'外广场'}, |
|
|
|
//外广场全景 |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 50, top: 460, status: 0, iotDeviceId: '58958',meaPointName:'外广场全景'}, |
|
|
|
//01亭内 |
|
|
|
{icon: icona, iconUn: icona_f, left: 500, top: 180, status: 0, iotDeviceId: '58438',meaPointName:'01亭内'}, |
|
|
|
//01车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 600, top: 400, status: 0, iotDeviceId: '58442',meaPointName:'01车道'}, |
|
|
|
//02亭内 |
|
|
|
{icon: icona, iconUn: icona_f, left: 550, top: 180, status: 0, iotDeviceId: '58439',meaPointName:'02亭内'}, |
|
|
|
//02车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 680, top: 400, status: 0, iotDeviceId: '58442',meaPointName:'02车道'}, |
|
|
|
//21车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 320, top: 40, status: 0, iotDeviceId: '58446',meaPointName:'21车道'}, |
|
|
|
//22车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 260, top: 40, status: 0, iotDeviceId: '58447', meaPointName:'22车道'}, |
|
|
|
//23亭内 |
|
|
|
{icon: icona, iconUn: icona_f, left: 240, top: 180, status: 0, iotDeviceId: '58440',meaPointName:'23亭内'}, |
|
|
|
//23车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 200, top: 40, status: 0, iotDeviceId: '58448',meaPointName:'23车道'}, |
|
|
|
//24亭内 |
|
|
|
{icon: icona, iconUn: icona_f, left: 180, top: 180, status: 0, iotDeviceId: '58441',meaPointName:'24亭内'}, |
|
|
|
//24车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 150, top: 40, status: 0, iotDeviceId: '58449',meaPointName:'24车道'}, |
|
|
|
//81车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 520, top: 400, status: 0, iotDeviceId: '58444',meaPointName:'81车道'}, |
|
|
|
//81车道-1 |
|
|
|
{icon: icona, iconUn: icona_f, left: 430, top: 40, status: 0, iotDeviceId: '58445',meaPointName:'81-1车道'}, |
|
|
|
//91车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 450, top: 400, status: 0, iotDeviceId: '58450',meaPointName:'91车道'}, |
|
|
|
//91车道-1 |
|
|
|
{icon: icona, iconUn: icona_f, left: 370, top: 40, status: 0, iotDeviceId: '58451',meaPointName:'91-1车道'}, |
|
|
|
//监控室 |
|
|
|
{icon: icona, iconUn: icona_f, left: 370, top: 180, status: 0, iotDeviceId: '58454',meaPointName:'监控室'}, |
|
|
|
//票据室 |
|
|
|
{icon: icona, iconUn: icona_f, left: 370, top: 120, status: 0, iotDeviceId: '58455',meaPointName:'票据室'}, |
|
|
|
|
|
|
|
] |
|
|
|
this.isCameraMap = true; |
|
|
|
} else if (dData.facilityName === '孝里收费站') { |
|
|
|
this.imgSrc = require('@screen/images/shoufeiz/孝里收费站.jpg') |
|
|
|
this.cameraMaps = [ |
|
|
|
//内广场 |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 250, top: 50, status: 0, iotDeviceId: '58468',meaPointName:'内广场'}, |
|
|
|
//内广场全景 |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 250, top: 110, status: 0, iotDeviceId: '58959',meaPointName:'内广场全景'}, |
|
|
|
//外广场 |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 150, top: 400, status: 0, iotDeviceId: '58469',meaPointName:'外广场'}, |
|
|
|
//外广场全景 |
|
|
|
{icon: iconb, iconUn: iconb_f, left: 150, top: 460, status: 0, iotDeviceId: '58960',meaPointName:'外广场全景'}, |
|
|
|
//01亭内 |
|
|
|
{icon: icona, iconUn: icona_f, left: 450, top: 180, status: 0, iotDeviceId: '58456',meaPointName:'01亭内'}, |
|
|
|
//01车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 480, top: 400, status: 0, iotDeviceId: '58460',meaPointName:'01车道'}, |
|
|
|
//02亭内 |
|
|
|
{icon: icona, iconUn: icona_f, left: 500, top: 180, status: 0, iotDeviceId: '58457',meaPointName:'02亭内'}, |
|
|
|
//02车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 550, top: 400, status: 0, iotDeviceId: '58461',meaPointName:'02车道'}, |
|
|
|
//21亭内 |
|
|
|
{icon: icona, iconUn: icona_f, left: 340, top: 180, status: 0, iotDeviceId: '58458',meaPointName:'21亭内'}, |
|
|
|
//21车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 320, top: 400, status: 0, iotDeviceId: '58464',meaPointName:'21车道'}, |
|
|
|
//22亭内 |
|
|
|
{icon: icona, iconUn: icona_f, left: 280, top: 180, status: 0, iotDeviceId: '58459',meaPointName:'22亭内'}, |
|
|
|
//22车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 250, top: 400, status: 0, iotDeviceId: '58465',meaPointName:'22车道'}, |
|
|
|
//81车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 420, top: 400, status: 0, iotDeviceId: '58462',meaPointName:'81车道'}, |
|
|
|
//81车道-1 |
|
|
|
{icon: icona, iconUn: icona_f, left: 420, top: 340, status: 0, iotDeviceId: '58463',meaPointName:'81-1车道'}, |
|
|
|
//91车道 |
|
|
|
{icon: icona, iconUn: icona_f, left: 370, top: 400, status: 0, iotDeviceId: '58466',meaPointName:'91车道'}, |
|
|
|
//91车道-1 |
|
|
|
{icon: icona, iconUn: icona_f, left: 370, top: 320, status: 0, iotDeviceId: '58467',meaPointName:'91-1车道'}, |
|
|
|
//监控室 |
|
|
|
{icon: icona, iconUn: icona_f, left: 390, top: 180, status: 0, iotDeviceId: '58470',meaPointName:'监控室'}, |
|
|
|
//票据室 |
|
|
|
{icon: icona, iconUn: icona_f, left: 390, top: 120, status: 0, iotDeviceId: '58471',meaPointName:'票据室'}, |
|
|
|
] |
|
|
|
this.isCameraMap = true; |
|
|
|
} |
|
|
|
} |
|
|
|
|
