|
@@ -1,12 +1,395 @@
|
|
|
<template>
|
|
|
- <div>大屏展示</div>
|
|
|
+ <div class="bigscreen">
|
|
|
+ <div class="head">
|
|
|
+ <div class="title">广州海关技术中心</div>
|
|
|
+ <div class="btn">
|
|
|
+ <div class="btn-tbas" :class="activeKey == '1' ? 'active' : ''" @click="activeclick('1')">全屏</div>
|
|
|
+ <div class="btn-tbas" :class="activeKey == '2' ? 'active' : ''" @click="activeclick('2')">设置</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="body">
|
|
|
+ <a-row :gutter="[18, 18]">
|
|
|
+ <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" v-for="(item, index) in listData" :key="index">
|
|
|
+ <div class="gutter-row" :class="item.state == '1' ? 'success' : 'danger'">
|
|
|
+ <!-- 条纹背景 -->
|
|
|
+ <div class="col-left"></div>
|
|
|
+
|
|
|
+ <!-- 信息 -->
|
|
|
+ <div class="col-right">
|
|
|
+ <div class="right-info">
|
|
|
+ <div class="info-left">
|
|
|
+ <div class="info-tilte">
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
+ <a-tag :bordered="false" color="success">{{ item.stateValue }}</a-tag>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <div class="label">部门:</div>
|
|
|
+ <div class="text">{{ item.bm }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <div class="label">位置:</div>
|
|
|
+ <div class="text">{{ item.wz }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <div class="label">监控点:</div>
|
|
|
+ <div class="text">{{ item.jkd }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <div class="label">温度:</div>
|
|
|
+ <div class="text">{{ item.wd }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-right">
|
|
|
+ <img src="/src/assets/images/bigscreen/img.png" alt="" srcset="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-foot">
|
|
|
+ <div>记录时间:{{ item.jlsj }}</div>
|
|
|
+ <div class="history">历史记录</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
+ const activeKey = ref('1')
|
|
|
+ const listData = [
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '2',
|
|
|
+ stateValue: '采集器闲置',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '2',
|
|
|
+ stateValue: '采集器闲置',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '医用低温保温箱',
|
|
|
+ state: '1',
|
|
|
+ stateValue: '正常',
|
|
|
+ bm: '广州海关技术中心',
|
|
|
+ wz: ' 广东省广州市天河区花城大道66号',
|
|
|
+ jkd: '监控点1',
|
|
|
+ wd: '-20℃',
|
|
|
+ jlsj: '2024-11-05 09:56:01'
|
|
|
+ }
|
|
|
+ ]
|
|
|
onMounted(() => {})
|
|
|
|
|
|
onBeforeMount(() => {})
|
|
|
|
|
|
+ // 点击标签
|
|
|
+ const activeclick = (v) => {
|
|
|
+ activeKey.value = v
|
|
|
+ }
|
|
|
+
|
|
|
// 监听
|
|
|
watch()
|
|
|
</script>
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .bigscreen {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ border: 1px solid red;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 120px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #f4f5f7;
|
|
|
+ background-color: #dcdfe5;
|
|
|
+
|
|
|
+ .btn-tbas {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ padding: 8px 0;
|
|
|
+ color: #8c95a4;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: #1677ff;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-color: #ffffff;
|
|
|
+
|
|
|
+ .ant-col {
|
|
|
+ height: 200px;
|
|
|
+ .gutter-row {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .col-left {
|
|
|
+ width: 10%;
|
|
|
+ height: 100%;
|
|
|
+ background-size: 45px 45px;
|
|
|
+ background-image: -webkit-gradient(
|
|
|
+ linear,
|
|
|
+ 0 0,
|
|
|
+ 100% 100%,
|
|
|
+ color-stop(0.25, rgba(255, 255, 255, 0.2)),
|
|
|
+ color-stop(0.25, transparent),
|
|
|
+ color-stop(0.5, transparent),
|
|
|
+ color-stop(0.5, rgba(255, 255, 255, 0.2)),
|
|
|
+ color-stop(0.75, rgba(255, 255, 255, 0.2)),
|
|
|
+ color-stop(0.75, transparent),
|
|
|
+ to(transparent)
|
|
|
+ );
|
|
|
+ background-image: -moz-linear-gradient(
|
|
|
+ -45deg,
|
|
|
+ rgba(255, 255, 255, 0.2) 25%,
|
|
|
+ transparent 25%,
|
|
|
+ transparent 50%,
|
|
|
+ rgba(255, 255, 255, 0.2) 50%,
|
|
|
+ rgba(255, 255, 255, 0.2) 75%,
|
|
|
+ transparent 75%,
|
|
|
+ transparent
|
|
|
+ );
|
|
|
+ background-image: -o-linear-gradient(
|
|
|
+ -45deg,
|
|
|
+ rgba(255, 255, 255, 0.2) 25%,
|
|
|
+ transparent 25%,
|
|
|
+ transparent 50%,
|
|
|
+ rgba(255, 255, 255, 0.2) 50%,
|
|
|
+ rgba(255, 255, 255, 0.2) 75%,
|
|
|
+ transparent 75%,
|
|
|
+ transparent
|
|
|
+ );
|
|
|
+ background-image: linear-gradient(
|
|
|
+ -45deg,
|
|
|
+ rgba(255, 255, 255, 0.2) 25%,
|
|
|
+ transparent 25%,
|
|
|
+ transparent 50%,
|
|
|
+ rgba(255, 255, 255, 0.2) 50%,
|
|
|
+ rgba(255, 255, 255, 0.2) 75%,
|
|
|
+ transparent 75%,
|
|
|
+ transparent
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-right {
|
|
|
+ width: 90%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .right-info {
|
|
|
+ width: 100%;
|
|
|
+ height: 80%;
|
|
|
+ padding: 10px 20px 10px 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .info-left {
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .info-tilte {
|
|
|
+ padding: 5px 5px 0 5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .name {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-row {
|
|
|
+ padding: 5px;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 60px;
|
|
|
+ text-align-last: justify;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-foot {
|
|
|
+ height: 20%;
|
|
|
+ color: #afafaf;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ border-top: 1px solid #e7e7e7;
|
|
|
+ .history {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #008dff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 状态为1 正常的
|
|
|
+ .success {
|
|
|
+ .col-left {
|
|
|
+ background-color: #20af61;
|
|
|
+ border: 1px solid #90deb9;
|
|
|
+ border-top-left-radius: 15px;
|
|
|
+ border-bottom-left-radius: 15px;
|
|
|
+ }
|
|
|
+ .col-right {
|
|
|
+ border: 1px solid #90deb9;
|
|
|
+ border-top-right-radius: 15px;
|
|
|
+ border-bottom-right-radius: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 状态为2 异常的
|
|
|
+ .danger {
|
|
|
+ .col-left {
|
|
|
+ background-color: #f97d1e;
|
|
|
+ border: 1px solid #fbd7af;
|
|
|
+ border-top-left-radius: 15px;
|
|
|
+ border-bottom-left-radius: 15px;
|
|
|
+ }
|
|
|
+ .col-right {
|
|
|
+ border: 1px solid #fbd7af;
|
|
|
+ border-top-right-radius: 15px;
|
|
|
+ border-bottom-right-radius: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|