|
@@ -0,0 +1,196 @@
|
|
|
+<template>
|
|
|
+ <div class="device-wrapper" v-load-directive="deviceLoad">
|
|
|
+ <div class="device-list" v-if="deviceList.length">
|
|
|
+ <ContentBox
|
|
|
+ v-for="(item, index) in deviceList"
|
|
|
+ :key="index"
|
|
|
+ bgColor="rgb(255,255,255,0.25)"
|
|
|
+ color="#16FFF6"
|
|
|
+ @click="deviceClick(item)"
|
|
|
+ >
|
|
|
+ <div style="height: 30rem"></div>
|
|
|
+ <div class="siteinfo">
|
|
|
+ <div class="siteinfo-wrapper">
|
|
|
+ <EnvironmentOutlined />
|
|
|
+ <span>{{ item.sitename || "暂无站点" }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="device-title"
|
|
|
+ :style="[
|
|
|
+ { '--bg': item.eventstatus ? 'red' : 'rgba(255, 164, 6)' },
|
|
|
+ { '--icon': item.status == '离线' ? '#cccccc' : '#27AD00' },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <i class="used"></i>
|
|
|
+ <a-tooltip>
|
|
|
+ <template #title>
|
|
|
+ <span>{{ item.devicename }}</span>
|
|
|
+ </template>
|
|
|
+ <span>{{ item.devicename }}</span>
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
+ <img style="width: 100%" :src="item.attinfos[0].url" alt="" />
|
|
|
+ </ContentBox>
|
|
|
+ </div>
|
|
|
+ <a-empty :image="simpleImage" v-else>
|
|
|
+ <template #description>
|
|
|
+ <span style="color: #ffffff">暂无数据</span>
|
|
|
+ </template>
|
|
|
+ </a-empty>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, defineProps, onMounted } from "vue";
|
|
|
+import Api from "@/api/api";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+import ContentBox from "./Box.vue";
|
|
|
+import { EnvironmentOutlined } from "@ant-design/icons-vue";
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+let DeviceTotalPage = ref(0);
|
|
|
+let deviceList = ref([]);
|
|
|
+let deviceParam = ref({
|
|
|
+ id: 20230914133302,
|
|
|
+ content: {
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: 15,
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+let deviceLoad = () => {
|
|
|
+ if (deviceParam.value.content.pageNumber == DeviceTotalPage.value) return;
|
|
|
+ deviceParam.value.content.pageNumber += 1;
|
|
|
+ console.log(deviceParam.value);
|
|
|
+ getDeviceData();
|
|
|
+};
|
|
|
+
|
|
|
+let getDeviceData = async () => {
|
|
|
+ let res = await Api.requested(deviceParam.value);
|
|
|
+ deviceList.value =
|
|
|
+ deviceParam.value.content.pageNumber == 1
|
|
|
+ ? res.data
|
|
|
+ : deviceList.value.concat(res.data);
|
|
|
+ DeviceTotalPage.value = res.pageTotal;
|
|
|
+};
|
|
|
+
|
|
|
+let deviceClick = (data) => {
|
|
|
+ router.push({
|
|
|
+ path: "/" + (data.dashboardpath || "baseDevice"),
|
|
|
+ query: {
|
|
|
+ id: data.w_deviceid,
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ getDeviceData();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scope>
|
|
|
+* {
|
|
|
+ box-sizing: border-box;
|
|
|
+ --color1: #16fff6;
|
|
|
+ --color2: rgba(255, 164, 6);
|
|
|
+}
|
|
|
+
|
|
|
+.device-wrapper {
|
|
|
+ display: flex;
|
|
|
+ overflow-y: scroll;
|
|
|
+ height: calc(100% - 180rem);
|
|
|
+ margin-top: 40rem;
|
|
|
+}
|
|
|
+.device-wrapper .device-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.device-wrapper .device-list .content_box {
|
|
|
+ flex: 1 !important;
|
|
|
+ max-width: 212rem;
|
|
|
+ margin: 0 18rem;
|
|
|
+}
|
|
|
+
|
|
|
+.device-wrapper .device-list .used {
|
|
|
+ display: inline-block;
|
|
|
+ width: 10rem;
|
|
|
+ height: 10rem;
|
|
|
+ border-radius: 10rem;
|
|
|
+ background: var(--icon);
|
|
|
+ margin-right: 10rem;
|
|
|
+}
|
|
|
+.device-wrapper .device-list .device-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 44rem;
|
|
|
+ font-size: 14rem;
|
|
|
+}
|
|
|
+.device-wrapper .device-list .device-title,
|
|
|
+img,
|
|
|
+.status {
|
|
|
+ margin-bottom: 10rem;
|
|
|
+ font-size: 14rem;
|
|
|
+}
|
|
|
+.device-wrapper .device-list .device-title span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 140rem;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+.device-wrapper .device-list .content_box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ margin-bottom: 15rem;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0rem 25rem;
|
|
|
+ width: auto !important;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.device-wrapper .device-list .content_box:hover {
|
|
|
+ --color: red !important;
|
|
|
+}
|
|
|
+.device-wrapper .device-list .content_box:hover img {
|
|
|
+ transition: all 0.2s;
|
|
|
+ transform: scale(1.2);
|
|
|
+}
|
|
|
+.device-wrapper .device-list .i {
|
|
|
+ border-radius: 20rem;
|
|
|
+ background: red;
|
|
|
+}
|
|
|
+.device-wrapper .device-list img {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 70rem;
|
|
|
+}
|
|
|
+.device-wrapper .device-list .status {
|
|
|
+ color: var(--color2);
|
|
|
+}
|
|
|
+
|
|
|
+.siteinfo {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.siteinfo .siteinfo-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ align-self: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ background: #40a9ff;
|
|
|
+}
|
|
|
+.siteinfo span {
|
|
|
+ margin-left: 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14rem;
|
|
|
+}
|
|
|
+</style>
|