|
|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <base-panel-right>
|
|
|
+ <div class="sand-monitor-right-container">
|
|
|
+ <base-header title="采砂地磅数据">
|
|
|
+ <div class="header-tool">
|
|
|
+ <el-select v-model="selectedVal1" size="mini">
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button type="text" size="mini" class="more-btn">更多</el-button>
|
|
|
+ </div>
|
|
|
+ </base-header>
|
|
|
+ <div class="card-item">
|
|
|
+ <ul class="table-list">
|
|
|
+ <li class="table-list-title">
|
|
|
+ <span>车牌号码</span>
|
|
|
+ <span>地磅数据</span>
|
|
|
+ <span>上报时间</span>
|
|
|
+ </li>
|
|
|
+ <li class="table-list-item" v-for="item in tableListData" :key="item.id">
|
|
|
+ <span>{{ item.carNum }}</span>
|
|
|
+ <span>{{ item.weight }}</span>
|
|
|
+ <span>{{ item.time }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <base-header title="采砂过车数据">
|
|
|
+ <div class="header-tool">
|
|
|
+ <el-select v-model="selectedVal2" size="mini">
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button type="text" size="mini" class="more-btn">更多</el-button>
|
|
|
+ </div>
|
|
|
+ </base-header>
|
|
|
+ <div class="card-item">
|
|
|
+ <div class="info-container">
|
|
|
+ <div class="info-panel">
|
|
|
+ <img src="@/assets/image/sand-monitor/采砂车.png" />
|
|
|
+ <ul>
|
|
|
+ <li><span>采砂区</span> <span>1#采砂区</span></li>
|
|
|
+ <li><span>车型</span> <span>大型卡车</span></li>
|
|
|
+ <li><span>车牌号</span><span>陕A32658</span></li>
|
|
|
+ <li><span>载重</span><span>15吨</span></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="date-panel">
|
|
|
+ <div class="date-item">
|
|
|
+ <span>进场日期</span>
|
|
|
+ <span>2025-08-02 08:12:34</span>
|
|
|
+ </div>
|
|
|
+ <div class="date-item">
|
|
|
+ <span>出场日期</span>
|
|
|
+ <span>2025-08-20 15:34:45</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tool-panel">
|
|
|
+ <img class="tool-img" src="@/assets/image/sand-monitor/arrow-left.png" />
|
|
|
+ <img class="tool-img" src="@/assets/image/sand-monitor/arrow-right.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <base-header title="采砂预警信息">
|
|
|
+ <div class="header-tool">
|
|
|
+ <el-select v-model="selectedVal3" size="mini">
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button type="text" size="mini" class="more-btn">更多</el-button>
|
|
|
+ </div>
|
|
|
+ </base-header>
|
|
|
+ <div class="card-item">
|
|
|
+ <div class="warning-container">
|
|
|
+ <div class="warning-list-tools">
|
|
|
+ <el-radio-group v-model="typeRadio" size="mini">
|
|
|
+ <el-radio-button label="禁采取采砂"></el-radio-button>
|
|
|
+ <el-radio-button label="超限预警"></el-radio-button>
|
|
|
+ <el-radio-button label="超量预警"></el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-radio-group v-model="dateRadio" size="mini">
|
|
|
+ <el-radio-button label="日"></el-radio-button>
|
|
|
+ <el-radio-button label="周"></el-radio-button>
|
|
|
+ <el-radio-button label="月"></el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="warning-list">
|
|
|
+ <div class="warning-list-item">
|
|
|
+ <img src="@/assets/image/sand-monitor/采砂车2.png" />
|
|
|
+ <ul>
|
|
|
+ <li><span>预警信息</span> <span>3#采砂区非采砂</span></li>
|
|
|
+ <li><span>预警类型</span> <span>非采砂时间采砂</span></li>
|
|
|
+ <li><span>预警时间</span><span>01-15 14:00:00</span></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="warning-list-item">
|
|
|
+ <img src="@/assets/image/sand-monitor/采砂车2.png" />
|
|
|
+ <ul>
|
|
|
+ <li><span>预警信息</span> <span>3#采砂区非采砂</span></li>
|
|
|
+ <li><span>预警类型</span> <span>非采砂时间采砂</span></li>
|
|
|
+ <li><span>预警时间</span><span>01-15 14:00:00</span></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </base-panel-right>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import BasePanelRight from '@/components/base-panel/base-panel-right'
|
|
|
+import BaseHeader from '@/components/base-header/base-header'
|
|
|
+export default {
|
|
|
+ name: 'sandMonitorRight',
|
|
|
+ components: { BasePanelRight, BaseHeader },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectedVal1: '',
|
|
|
+ selectedVal2: '',
|
|
|
+ selectedVal3: '',
|
|
|
+ tableListData: [
|
|
|
+ { id: 1, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
|
|
|
+ { id: 2, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
|
|
|
+ { id: 3, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
|
|
|
+ { id: 4, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' },
|
|
|
+ { id: 5, carNum: '陕A32658', weight: '38.9T', time: '2025.08.04' }
|
|
|
+ ],
|
|
|
+ typeRadio: '禁采取采砂',
|
|
|
+ dateRadio: '日'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+@import url('@/assets/scss/px-to-rem.scss');
|
|
|
+.sand-monitor-right-container {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ .header-tool {
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: px-to-rem(10);
|
|
|
+ :deep(.el-input__inner) {
|
|
|
+ background: transparent;
|
|
|
+ border-color: #4f9fff;
|
|
|
+ width: px-to-rem(100);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .more-btn {
|
|
|
+ font-size: px-to-rem(14);
|
|
|
+ margin-left: px-to-rem(10);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-item {
|
|
|
+ position: relative;
|
|
|
+ width: 3.68rem;
|
|
|
+ padding: px-to-rem(10);
|
|
|
+ margin-bottom: px-to-rem(10);
|
|
|
+ background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
|
|
|
+ }
|
|
|
+ .table-list {
|
|
|
+ &-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #f2f6ff;
|
|
|
+ font-size: px-to-rem(16);
|
|
|
+ padding: 0 px-to-rem(10);
|
|
|
+ height: px-to-rem(35);
|
|
|
+ line-height: px-to-rem(35);
|
|
|
+ background: #244e81;
|
|
|
+ }
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #fff;
|
|
|
+ font-size: px-to-rem(16);
|
|
|
+ padding: px-to-rem(4) px-to-rem(10);
|
|
|
+ margin-bottom: px-to-rem(1.8);
|
|
|
+ height: px-to-rem(35);
|
|
|
+ line-height: px-to-rem(35);
|
|
|
+ background: #153057;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .info-panel {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: px-to-rem(10);
|
|
|
+ img {
|
|
|
+ height: px-to-rem(115);
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ flex: 1;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: px-to-rem(14);
|
|
|
+ color: #c4c6c8;
|
|
|
+ line-height: px-to-rem(30);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .date-panel {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: px-to-rem(6) 0;
|
|
|
+ background: rgba(79, 159, 255, 0.2);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #4f9fff;
|
|
|
+ color: #c4c6c8;
|
|
|
+ .date-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ span {
|
|
|
+ font-size: px-to-rem(14);
|
|
|
+ margin-bottom: px-to-rem(4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tool-panel {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: px-to-rem(10);
|
|
|
+ .tool-img {
|
|
|
+ cursor: pointer;
|
|
|
+ height: px-to-rem(30);
|
|
|
+ margin-left: px-to-rem(6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .warning-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .warning-list-tools {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ :deep(.el-radio-button__inner) {
|
|
|
+ background: transparent;
|
|
|
+ color: #4487d8;
|
|
|
+ border-color: #4487d8;
|
|
|
+ padding: px-to-rem(5);
|
|
|
+ font-size: px-to-rem(14);
|
|
|
+ }
|
|
|
+ :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .warning-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .warning-list-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: rgba(79, 159, 255, 0.2);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #4f9fff;
|
|
|
+ margin-top: px-to-rem(10);
|
|
|
+ padding: px-to-rem(6);
|
|
|
+ img {
|
|
|
+ height: px-to-rem(85);
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ flex: 1;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: px-to-rem(14);
|
|
|
+ color: #fff;
|
|
|
+ line-height: px-to-rem(30);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
