lcw

src/views/home/components/deployControlItem.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="warning-card ">
+    <div class="warning-image flex">
+      <img :src="item.yjTp" width="65" height="70" />
+      <div class="ml10 warning-info">
+        <div class="flex just-between align-center">
+          <div class="flex align-center mt4" v-if="item.yjLx == 2">
+          <span >{{ item.yjClcph }}</span>
+        </div>
+          <div class="flex align-center mt4" v-else>
+            <span>{{ item.yjRyxm }}</span>
+            <span class="gapline mr10 ml10"></span>
+            <span>{{ IdCard(item.yjRysfzh, 2) }}</span>
+            <span class="gapline mr10 ml10"></span>
+            <span>{{ IdCard(item.yjRysfzh, 3) }}</span>
+          </div>
+          <span class="tag" v-if="item.yjbqmc">{{ item.yjbqmc }}</span>
+        </div>
+        <div  v-if="item.yjLx == 2" class="flex">车牌类型：
+        <DictTag :tag="false" :value="item.yjHplx" color="#fff" :options="dict.D_BZ_HPZL"/>
+      </div>
+        <div class="mt4" v-else>身份证：{{ item.yjRysfzh }}</div>
+        <div class="mt4 two_text_detail">预警时间：{{ item.yjSj }}</div>
+      </div>
+    </div>
+    <div class="warning-info warning-boder pb5">
+      <div class="mt4 two_text_detail">预警内容：{{ item.yjNr }}</div>
+    </div>
+    <div class="warning-info pt5 pb5 warning-boder">
+      <div class="mt4 two_text_detail">处置结果：{{ item.yjNr }}</div>
+    </div>
+    <div class="warning-info pt5 ">
+      <div class="two_text_detail flex lh25"><img src="@/assets/images/ddtb.png" width="20" height="25" alt="" srcset="">{{ item.yjNr }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { IdCard } from '@/utils/validate.js'
+import { reactive, ref } from "vue";
+const props = defineProps({
+  item: {
+    type: Object,
+    default: {}
+  }, dict: {
+    tupe: Object,
+    default: {}
+  }
+});
+
+const changeBG = (str) => {
+  switch (str) {
+    case "10":
+      return "red";
+    case "20":
+      return "orange";
+    case "30":
+      return "yellow";
+    default: return "blue";
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.warning-card {
+  background: url("~@/assets/images/xxxxxx.png") no-repeat center center;
+  background-size: 100% 100%;
+  gap: 12px;
+  margin-bottom: 4px;
+  padding: 10px;
+  box-sizing: border-box;
+
+  .warning-image {
+    // 
+    // width: 80px;
+    // height: 100px;
+
+    // img {
+    //   width: 100%;
+    //   height: 100%;
+    //   object-fit: cover;
+    // }
+  }
+
+  .warning-info {
+    flex: 1;
+ 
+    .tag {
+      padding: 1px 6px;
+      background: #0072FF;
+      border-radius: 2px 2px 2px 2px;
+      font-size: 12px;
+    }
+
+    .gapline {
+      width: 2px;
+      height: 14px;
+      background: #e9e9e9;
+    }
+  }
+  .warning-boder{
+    border-bottom: 2px dashed  #0958b2;
+  }
+}
+
+.red {
+  background: url("~@/assets/images/GroupRed.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+.orange {
+  background: url("~@/assets/images/GroupOrange.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+.yellow {
+  background: url("~@/assets/images/GroupYellow.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+.blue {
+  background: url("~@/assets/images/GroupBlue.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+</style>