lcw

src/views/home/components/beonDuty.vue

@@ -1,22 +1,29 @@
 <template>
   <div class="checkpoint-list noScollLine">
     <el-timeline style="max-width: 375px">
-      <el-timeline-item
-        v-for="(item, index) in warningList.listData"
-        :key="index"
-        :timestamp="item.yjSj"
-        placement="top"
-        :hollow="true"
-        color="#061b44"
-      >
+      <el-timeline-item v-for="(item, index) in warningList.listData" :key="index" :timestamp="item.yjSj"
+        placement="top" :hollow="true" color="#061b44">
         <div class="item_card">
           <div style="line-height: 18px">
             {{ item.yjNr }}
           </div>
           <el-divider border-style="dashed" class="dashed" />
-          <div class="flex">
+          <div class="flex" @click="sendCommand(item)">
             <div class="warning-image">
-              <img :src="item.yjTp" alt="预警图片" />
+              <!-- <img :src="item.yjTp" alt="预警图片" /> -->
+              <template v-if="!item.yjTp || item.yjTp.includes('baidu')">
+                <img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjLx == 2" />
+                <img src="@/assets/images/default_male.png" width="65" height="70" v-else />
+              </template>
+              <el-image v-else :preview-teleported="true" style="width: 80px; height: 110px" :src="item.yjTp"
+                :preview-src-list="[item.yjTp]" show-progress>
+                <template #error>
+                  <div class="image-slot error">
+                    <img src="@/assets/images/car.png" width="65" height="80" v-if="item.yjLx == 2" />
+                    <img src="@/assets/images/default_male.png" width="80" height="110" v-else />
+                  </div>
+                </template>
+              </el-image>
             </div>
             <div class="inform">
               <div class="flex align-center">
@@ -39,12 +46,14 @@
     </el-timeline>
     <Empty :show="warningList.listData.length == 0" />
   </div>
+  <FzDialog v-model="dialogVisible" :list="dataList"/>
 </template>
 
 <script setup>
-import { reactive } from "vue";
+import { reactive ,ref} from "vue";
 import { tbGjYjgetPageList } from "@/api/mosty-zhgj.js";
 import Empty from "@/components/Empty/index.vue";
+import FzDialog from "../components/fqzl.vue";
 const warningList = reactive({
   listData: [],
   total: 0
@@ -68,6 +77,13 @@ const scroll = () => {
     linQuery.pageCurrent++;
   }
 };
+// 发送指令
+const dialogVisible = ref(false);
+const dataList=ref({})
+const sendCommand = (item) => {
+  dialogVisible.value = true;
+  dataList.value=item
+}
 gettbGjclselectPage();
 </script>
 
@@ -80,6 +96,7 @@ gettbGjclselectPage();
   overflow-y: auto;
   padding: 4px;
   box-sizing: border-box;
+
   .item_card {
     font-size: 14px;
     color: #fff;
@@ -91,22 +108,26 @@ gettbGjclselectPage();
     opacity: 0.86;
     background: url("~@/assets/images/bi/jmk.png") no-repeat center center;
     background-size: 100% 100%;
+
     .dashed {
       width: 100%;
       border-top: 1px #0468e1 dashed;
       margin: 10px 0px 9px;
     }
+
     .warning-image {
       border: 1px solid #0468e1;
       padding: 10px 10px 10px 14px;
       width: 103px;
       height: 99px;
+
       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }
+
     .inform {
       box-sizing: border-box;
       margin-left: 11px;
@@ -115,9 +136,11 @@ gettbGjclselectPage();
       font-weight: 400;
       font-size: 14px;
       color: #ffffff;
+
       .inform_name {
         width: 120px;
       }
+
       .inform_tag {
         font-family: "Source Han Sans CN";
         font-weight: 300;
@@ -135,12 +158,15 @@ gettbGjclselectPage();
 ::v-deep .el-timeline-item__node {
   border-color: rgb(13, 216, 37);
 }
+
 ::v-deep .el-timeline-item__tail {
   border-left: 2px solid #06366d;
 }
+
 ::v-deep .el-timeline-item__wrapper {
   padding-left: 10px;
 }
+
 ::v-deep .is-top {
   margin-bottom: 12px;
   padding-top: 2px;