拆分组件

src/operation/moduleNormal/pressureControl/modules/devices.vue

@@ -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>