|
|
|
@ -2,7 +2,7 @@
|
|
|
|
<ContentWrap>
|
|
|
|
<ContentWrap>
|
|
|
|
<el-row :gutter="20">
|
|
|
|
<el-row :gutter="20">
|
|
|
|
<!-- 左侧区域 -->
|
|
|
|
<!-- 左侧区域 -->
|
|
|
|
<el-col :span="7">
|
|
|
|
<el-col :span="12">
|
|
|
|
<!-- 左上:统计信息 -->
|
|
|
|
<!-- 左上:统计信息 -->
|
|
|
|
<el-card style="height: 250px" shadow="always" class="mb-20px">
|
|
|
|
<el-card style="height: 250px" shadow="always" class="mb-20px">
|
|
|
|
<template #header>
|
|
|
|
<template #header>
|
|
|
|
@ -29,31 +29,8 @@
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 中间区域 -->
|
|
|
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
|
|
|
<!-- 中上和中中:选择相机直播 -->
|
|
|
|
|
|
|
|
<el-card shadow="always">
|
|
|
|
|
|
|
|
<template #header>
|
|
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
|
|
|
<span>选择相机</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<el-select v-model="selectedCamera" placeholder="请选择相机" style="width: 100%">
|
|
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
|
|
v-for="camera in cameraList"
|
|
|
|
|
|
|
|
:key="camera.id"
|
|
|
|
|
|
|
|
:label="camera.name"
|
|
|
|
|
|
|
|
:value="camera.id"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
<div style="height: 420px; background-color: #555555" class="mt-20px">
|
|
|
|
|
|
|
|
<Camera v-if="selectedCamera" :cameraId="selectedCamera" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 右侧区域 -->
|
|
|
|
<!-- 右侧区域 -->
|
|
|
|
<el-col :span="7">
|
|
|
|
<el-col :span="12">
|
|
|
|
<!-- 右上:快捷方式 -->
|
|
|
|
<!-- 右上:快捷方式 -->
|
|
|
|
<el-card style="height: 250px" shadow="always" class="mb-20px">
|
|
|
|
<el-card style="height: 250px" shadow="always" class="mb-20px">
|
|
|
|
<template #header>
|
|
|
|
<template #header>
|
|
|
|
@ -105,7 +82,7 @@
|
|
|
|
<Echart style="width: 100%; height: 200px" :options="stockPieOptions" />
|
|
|
|
<Echart style="width: 100%; height: 200px" :options="stockPieOptions" />
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="10">
|
|
|
|
<el-col :span="17">
|
|
|
|
<el-card shadow="always">
|
|
|
|
<el-card shadow="always">
|
|
|
|
<template #header>
|
|
|
|
<template #header>
|
|
|
|
<div class="card-header">
|
|
|
|
<div class="card-header">
|
|
|
|
@ -115,25 +92,7 @@
|
|
|
|
<Echart style="width: 100%; height: 200px" :options="laneInventoryLineOptions" />
|
|
|
|
<Echart style="width: 100%; height: 200px" :options="laneInventoryLineOptions" />
|
|
|
|
</el-card>
|
|
|
|
</el-card>
|
|
|
|
</el-col>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="7">
|
|
|
|
|
|
|
|
<!-- 左下:实时滚动信息 -->
|
|
|
|
|
|
|
|
<el-card shadow="always">
|
|
|
|
|
|
|
|
<template #header>
|
|
|
|
|
|
|
|
<div class="card-header">
|
|
|
|
|
|
|
|
<span>实时滚动信息</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<el-scrollbar height="200px">
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
v-for="(item, index) in realTimeLogs.slice().reverse()"
|
|
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
class="log-item"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{{ item }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
</ContentWrap>
|
|
|
|
</ContentWrap>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|