|
|
|
@ -6,21 +6,21 @@ |
|
|
|
|
|
|
|
<div class="flex flex-col flex-1 con"> |
|
|
|
<div class="flex justify-between floor1"> |
|
|
|
<!-- 温度 --> |
|
|
|
<Temperature /> |
|
|
|
<!-- 湿度 --> |
|
|
|
<Humidity /> |
|
|
|
<!-- 大事记 --> |
|
|
|
<Memorabilia /> |
|
|
|
<!-- 饱和量 --> |
|
|
|
<Saturate /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="flex-1 iframe-wrap"> |
|
|
|
<iframe src="https://www.tall.wiki/wl/2"></iframe> |
|
|
|
<iframe src="https://www.tall.wiki/wl/1"></iframe> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="flex justify-between floor3"> |
|
|
|
<!-- 吞土量实时统计 --> |
|
|
|
<Amount /> |
|
|
|
<!-- 仓库热力图 --> |
|
|
|
<Heat /> |
|
|
|
<!-- 仓库吞吐量对比图 --> |
|
|
|
<Throughput /> |
|
|
|
</div> |
|
|
|
<!-- 曲线对比图 --> |
|
|
|
<div class="floor4"> |
|
|
|
@ -37,57 +37,80 @@ |
|
|
|
v-for="(item, index) in urls" |
|
|
|
>{{ item.name }}</div> |
|
|
|
</div> |
|
|
|
<!-- 悬浮监控 --> |
|
|
|
<img @click="show = true" class="monitor" src="../assets/monitor.png" style /> |
|
|
|
<!-- 悬浮监控1 --> |
|
|
|
<img @click="getWarehouses('show1')" class="monitor" src="../assets/monitor.png" style /> |
|
|
|
<div class="vedio" v-show="show"> |
|
|
|
<div class="head"> |
|
|
|
<div class="camera">摄像头监控视频</div> |
|
|
|
<img @click="show = false" class="close" src="../assets/close.png" /> |
|
|
|
</div> |
|
|
|
<div class="frame"> |
|
|
|
<!-- <img class="frame1" src="../assets/vedio-img.png" /> --> |
|
|
|
<div class="frame1"> |
|
|
|
<iframe |
|
|
|
frameborder="0" |
|
|
|
height="100%" |
|
|
|
scrolling="no" |
|
|
|
src="https://www.tall.wiki/kangfu-v1/?key=230659446" |
|
|
|
width="100%" |
|
|
|
></iframe> |
|
|
|
<!-- 生产 https://www.tall.wiki/kangfu-v1/?key=E83239936 --> |
|
|
|
<!-- 测试 https://www.tall.wiki/kangfu-v1/?key=230659446 --> |
|
|
|
<iframe :src="iframeSrc1" frameborder="0" height="100%" scrolling="no" width="100%"></iframe> |
|
|
|
<div class="screen"> |
|
|
|
<img @click="$router.push('/vs')" class="frame2" src="../assets/fullScreen.png" /> |
|
|
|
<img @click="showScreen = true" class="frame2" src="../assets/fullScreen.png" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 全屏监控 --> |
|
|
|
<vedio-screen :iframeSrc="iframeSrc1" @closeScreen="closeScreen" v-if="showScreen" /> |
|
|
|
|
|
|
|
<!-- 悬浮监控2 --> |
|
|
|
<img |
|
|
|
@click="getWarehouses('show2')" |
|
|
|
class="monitor monitor2" |
|
|
|
src="../assets/monitor-left.png" |
|
|
|
style |
|
|
|
/> |
|
|
|
<div class="vedio" v-show="show2"> |
|
|
|
<div class="head"> |
|
|
|
<div class="camera">摄像头监控视频</div> |
|
|
|
<img @click="show2 = false" class="close" src="../assets/close.png" /> |
|
|
|
</div> |
|
|
|
<div class="frame"> |
|
|
|
<div class="frame1"> |
|
|
|
<iframe :src="iframeSrc2" frameborder="0" height="100%" scrolling="no" width="100%"></iframe> |
|
|
|
<div class="screen"> |
|
|
|
<img @click="showScreen = true" class="frame2" src="../assets/fullScreen.png" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 全屏监控 --> |
|
|
|
<vedio-screen :iframeSrc="iframeSrc2" @closeScreen="closeScreen" v-if="showScreen" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
import { defineComponent } from 'vue' |
|
|
|
import Memorabilia from 'comp/memorabilia.vue' |
|
|
|
import Toolbar from 'comp/toolbar.vue' |
|
|
|
import Temperature from 'comp/temperature.vue' |
|
|
|
import Humidity from 'comp/humidity.vue' |
|
|
|
import Saturate from 'comp/saturate.vue' |
|
|
|
import Throughput from 'comp/throughput.vue' |
|
|
|
import Amount from 'comp/amount.vue' |
|
|
|
import Heat from 'comp/heat.vue' |
|
|
|
import Curve from 'comp/curve.vue' |
|
|
|
import VedioScreen from 'comp/vedioScreen.vue' |
|
|
|
import { getWarehouses } from 'api/api' |
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
components: { |
|
|
|
Toolbar, |
|
|
|
Temperature, |
|
|
|
Humidity, |
|
|
|
Saturate, |
|
|
|
Amount, |
|
|
|
Heat, |
|
|
|
Curve, |
|
|
|
VedioScreen, |
|
|
|
Memorabilia, |
|
|
|
Throughput, |
|
|
|
}, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
show: false, |
|
|
|
show2: false, |
|
|
|
showScreen: false, |
|
|
|
urls: [ |
|
|
|
{ |
|
|
|
path: '/jht', |
|
|
|
@ -114,17 +137,37 @@ export default defineComponent({ |
|
|
|
active: false, |
|
|
|
}, |
|
|
|
], |
|
|
|
iframeSrc1: '', |
|
|
|
iframeSrc2: '', |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
this.getWarehouses() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 关闭大屏 |
|
|
|
closeScreen() { |
|
|
|
this.showScreen = false |
|
|
|
}, |
|
|
|
|
|
|
|
// 获取仓库信息 |
|
|
|
async getWarehouses() { |
|
|
|
async getWarehouses(value) { |
|
|
|
try { |
|
|
|
if (value === 'show1') { |
|
|
|
if (this.show2) { |
|
|
|
this.show2 = false |
|
|
|
} |
|
|
|
this.show = true |
|
|
|
} |
|
|
|
if (value === 'show2') { |
|
|
|
if (this.show) { |
|
|
|
this.show = false |
|
|
|
} |
|
|
|
this.show2 = true |
|
|
|
} |
|
|
|
const data = await getWarehouses({ parkId: 2 }) |
|
|
|
if (data && data.parkEquipment && data.parkEquipment.length) { |
|
|
|
this.iframeSrc1 = data.parkEquipment[0].equipmentLocation |
|
|
|
this.iframeSrc2 = data.parkEquipment[1].equipmentLocation |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.log('error: ', error) |
|
|
|
} |
|
|
|
@ -135,4 +178,7 @@ export default defineComponent({ |
|
|
|
|
|
|
|
<style> |
|
|
|
@import './style.css'; |
|
|
|
.monitor2 { |
|
|
|
top: 15%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
