新增 船舶搜索组件

src/components/ShipSearch.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-autocomplete
+    v-model="value"
+    :fetch-suggestions="getSelectList"
+    :placeholder="placeholder"
+    @select="selectItem"
+    :size="size"
+    clearable
+    @clear="clear"
+    @input="handleInput"
+    style="width: 200px"
+  />
+</template>
+
+<script>
+import { onMounted, ref } from "vue";
+import api from "../apis/fetch";
+import _ from "lodash";
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: "请输入查询的船舶名称",
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    api: String,
+    params: Object,
+    value: String,
+  },
+  emits: ["input", "selectItem"],
+  setup(props, { emit }) {
+    let selectStr = ref("");
+    const getSelectList = _.debounce(
+      async (queryString, cb) => {
+        if (!queryString) return;
+        let res = await api[props.api]({
+          ...props.params,
+          term: queryString,
+        });
+        if (res.data.status == 0) {
+          cb(res.data.result);
+        }
+      },
+      1000,
+      { leading: true }
+    );
+
+    const selectItem = (item) => {
+      emit("selectItem", item);
+    };
+
+    function clear() {
+      selectStr.value = "";
+    }
+
+    function handleInput(e) {
+      emit("input", e);
+    }
+
+    onMounted(() => {});
+    return {
+      selectStr,
+      getSelectList,
+      clear,
+      selectItem,
+      handleInput,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/transportationSafetyCenter.vue

@@ -1,15 +1,25 @@
 <template>
   <div style="position: relative">
     <div id="bmap"></div>
+    <ShipSearch
+      class="ship-search"
+      style="position: absolute; top: 40px; right: 524px"
+    ></ShipSearch>
     <NumberVue style="position: absolute; top: 0; left: 0"></NumberVue>
-    <SafetyCard style="position: absolute; top: 24px; right: 34px"></SafetyCard>
+    <SafetyModule
+      style="position: absolute; top: 24px; right: 34px"
+    ></SafetyModule>
   </div>
 </template>
 
 <script>
+import ShipSearch from "comps/ShipSearch.vue";
 import router from "router/index";
 import { ref, onMounted } from "vue";
 export default {
+  components: {
+    ShipSearch,
+  },
   setup() {
     const bmap = ref({});
     function initMap() {
@@ -39,4 +49,10 @@ export default {
   background: #1d2c43;
   border-top: 1px solid grey;
 }
+:deep(.ship-search) {
+  .el-input__inner {
+    background: none;
+    color: #fff;
+  }
+}
 </style>