From ce8e5c19f97cef0391828e08f5584c325abd3879 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 04 三月 2024 14:41:22 +0800
Subject: [PATCH] fix:修改路径问题

---
 src/views/index/right-bottom.vue |  193 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 189 insertions(+), 4 deletions(-)

diff --git a/src/views/index/right-bottom.vue b/src/views/index/right-bottom.vue
index 7df5872..751cbd6 100644
--- a/src/views/index/right-bottom.vue
+++ b/src/views/index/right-bottom.vue
@@ -1,13 +1,198 @@
-<script setup lang='ts'>
+<script setup lang="ts">
+import { currentGET } from "@/api";
+import SeamlessScroll from "@/components/seamless-scroll";
+import { computed, onMounted, reactive } from "vue";
+import { useSettingStore } from "@/stores";
+import { storeToRefs } from "pinia";
+import EmptyCom from "@/components/empty-com";
+const settingStore = useSettingStore();
+const { defaultOption, indexConfig } = storeToRefs(settingStore);
+const state = reactive<any>({
+  list: [],
+  defaultOption: {
+    ...defaultOption.value,
+    singleHeight: 252,
+    limitScrollNum: 3,
+    // step:3
+  },
+  scroll: true,
 
+});
+
+const getData = () => {
+  currentGET("rightBottom", { limitNum: 20 }).then((res) => {
+    console.log("鍙充笅", res);
+    if (res.success) {
+      state.list = res.data.list;
+    } else {
+      window.$message({
+        text: res.msg,
+        type: "warning",
+      });
+    }
+  });
+};
+
+const comName = computed(() => {
+  if (indexConfig.value.rightBottomSwiper) {
+    return SeamlessScroll;
+  } else {
+    return EmptyCom;
+  }
+});
+function montionFilter (val:any) {
+    // console.log(val);
+    return val ? Number(val).toFixed(2) : '--'
+}
+const handleAddress=(item:any)=>{
+  return `${ item.provinceName }/${item.cityName }/${item.countyName}`
+}
+onMounted(() => {
+  getData();
+});
 </script>
 
 <template>
-  <div class=''>
+  <div
+    class="right_bottom_wrap beautify-scroll-def"
+    :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }"
+  >
+    <component
+      :is="comName"
+      :list="state.list"
+      v-model="state.scroll"
+      :singleHeight="state.defaultOption.singleHeight"
+      :step="state.defaultOption.step"
+      :limitScrollNum="state.defaultOption.limitScrollNum"
+      :hover="state.defaultOption.hover"
+      :singleWaitTime="state.defaultOption.singleWaitTime"
+      :wheel="state.defaultOption.wheel"
+    >
+      <ul class="right_bottom">
+        <li class="right_center_item" v-for="(item, i) in state.list" :key="i">
+          <span class="orderNum">{{ i + 1 }}</span>
+          <div class="inner_right">
+            <div class="dibu"></div>
+            <div class="flex">
+              <div class="info">
+                <span class="labels">璁惧ID锛�</span>
+                <span class="text-content zhuyao"> {{ item.gatewayno }}</span>
+              </div>
+              <div class="info">
+                <span class="labels">鍨嬪彿锛�</span>
+                <span class="text-content"> {{ item.terminalno }}</span>
+              </div>
+              <div class="info">
+                <span class="labels">鍛婅鍊硷細</span>
+                <span class="text-content warning">
+                  {{  montionFilter(item.alertvalue) }}</span
+                >
+              </div>
+            </div>
 
+            <div class="flex">
+              <div class="info">
+                <span class="labels shrink-0"> 鍦板潃锛�</span>
+                <span class=" ciyao truncate" style="font-size: 12px;width: 220px;" :title="handleAddress(item)">
+                  {{ handleAddress(item)}}</span
+                >
+              </div>
+              <div class="info time shrink-0">
+                <span class="labels">鏃堕棿锛�</span>
+                <span class="text-content" style="font-size: 12px">
+                  {{ item.createtime }}</span
+                >
+              </div>
+            </div>
+            <div class="flex">
+              <div class="info">
+                <span class="labels">鎶ヨ鍐呭锛�</span>
+                <span
+                  class="text-content ciyao"
+                  :class="{ warning: item.alertdetail }"
+                >
+                  {{ item.alertdetail || "鏃�" }}</span
+                >
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </component>
   </div>
 </template>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
+.right_bottom {
+  width: 100%;
+  height: 100%;
 
-</style>
\ No newline at end of file
+  .right_center_item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+    padding: 10px;
+    font-size: 14px;
+    color: #fff;
+
+    .orderNum {
+      margin: 0 20px 0 -20px;
+    }
+
+    .inner_right {
+      position: relative;
+      height: 100%;
+      width: 400px;
+      flex-shrink: 0;
+      line-height: 1.5;
+
+      .dibu {
+        position: absolute;
+        height: 2px;
+        width: 104%;
+        background-image: url("@/assets/img/zuo_xuxian.png");
+        bottom: -12px;
+        left: -2%;
+        background-size: cover;
+      }
+    }
+
+    .info {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+
+      .labels {
+        flex-shrink: 0;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .zhuyao {
+        color: $primary-color;
+        font-size: 15px;
+      }
+
+      .ciyao {
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      .warning {
+        color: #e6a23c;
+        font-size: 15px;
+      }
+    }
+  }
+}
+
+.right_bottom_wrap {
+  overflow: hidden;
+  width: 100%;
+  height: 252px;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+</style>

--
Gitblit v1.8.0