船舶档案

package.json

@@ -28,7 +28,8 @@
     "vue": "^3.4.31",
     "vue-router": "^4.4.0",
     "ol": "^9.2.2",
-    "@turf/turf": "^7.1.0"
+    "@turf/turf": "^7.1.0",
+    "sortablejs": "^1.15.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",

src/components/cus/CusButton.vue

@@ -18,8 +18,8 @@
     </div>
   </template>
   <template v-else-if="type === 'table-del'">
-    <div class="cus-table-button __hover">
-      <SvgIcon :name="icon || 'del'" size="12" color="var(--cus-main-color)"/>{{ title || '删除' }}
+    <div class="cus-table-button del __hover">
+      <SvgIcon :name="icon || 'del'" size="12" color="#f56c6c"/>{{ title || '删除' }}
     </div>
   </template>
   <template v-else>
@@ -60,5 +60,9 @@ const state: any = reactive({})
   font-weight: 400;
   font-size: 12px;
   color: var(--cus-main-color);
+  &.del {
+    border-color: #f56c6c;
+    color: #f56c6c;
+  }
 }
 </style>

src/components/cus/CusDialog.vue

@@ -121,7 +121,7 @@ export default defineComponent({
       } else {
         DialogLevelStore.del(state.uuid)
       }
-    })
+    }, {immediate: true})
     const beforeClose = (done) => {
       CDClose(done)
     }

src/components/cus/CusSearchButtons.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="search-buttons">
+    <div class="search __hover" @click="$emit('handleSearch')">查 询</div>
+    <div class="reset __hover" @click="$emit('handleReset')">重 置</div>
+    <div class="expand __hover" v-if="expandValue !== null" @click="$emit('update:expandValue', !expandValue)">
+      {{expandValue ? '收起' : '展开'}}
+      <SvgIcon name="arrow_2" size="14" :rotate="expandValue ? 270 : 90"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+} from 'vue'
+
+  export default defineComponent({
+    name: 'CusSearchButtons',
+    props: {
+      expandValue: {
+        default: null
+      }
+    },
+    setup(props, { emit }) {
+      return {
+      }
+    },
+  })
+</script>
+
+<style scoped lang="scss">
+  .search-buttons {
+    margin-left: auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    margin-bottom: 12px;
+    >div {
+      margin-right: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      box-sizing: border-box;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    .search {
+      width: 74px;
+      height: 32px;
+      background: var(--cus-main-color);
+      border-radius: 4px;
+      color: #FFFFFF;
+    }
+    .reset {
+      width: 74px;
+      height: 32px;
+      border: 1px solid var(--cus-main-color);
+      border-radius: 4px;
+      color: var(--cus-main-color);
+    }
+    .expand {
+      color: var(--cus-main-color);
+      margin-top: 8px;
+      .svg-icon {
+        margin-left: 9px;
+      }
+    }
+  }
+</style>

src/components/cus/CusTable.vue

@@ -263,7 +263,7 @@ onMounted(() => {
               .cell {
                 font-weight: bold;
                 font-size: 16px;
-                color: var(--cus-text-color-1);
+                color: #FFFFFF;
               }
             }
           }

src/views/web/archive/detail.vue

@@ -0,0 +1,183 @@
+<template>
+  <CusDialog
+    :show="show"
+    :title="titleCpt"
+    @onClose="$emit('update:show', false)"
+    width="70%"
+    max-height="90%"
+    @onSubmit="onSubmit"
+    :loading="state.loading"
+  >
+    <div class="__cus-dialog-form">
+      <CusForm ref="ref_form" label-width="100px">
+        <CusFormColumn
+          :span="12"
+          required
+          label="船舶名称"
+          v-model:param="state.form.indexNameShort"
+        />
+        <CusFormColumn
+          :span="12"
+          required
+          label="船舶类型"
+          v-model:param="state.form.indexNameShort"
+          link="select"
+          :options="[]"
+        />
+        <CusFormColumn
+          :span="12"
+          required
+          label="持证类型"
+          v-model:param="state.form.indexNameShort"
+          link="select"
+          :options="[]"
+        />
+        <CusFormColumn
+          :span="12"
+          required
+          label="最大航速"
+          v-model:param="state.form.indexNameShort"
+          link="number"
+          unit="节"
+          :decimal="2"
+        />
+        <CusFormColumn
+          :span="12"
+          required
+          label="船长"
+          v-model:param="state.form.indexNameShort"
+          link="number"
+          unit="米"
+          :decimal="2"
+        />
+        <CusFormColumn
+          :span="12"
+          required
+          label="船宽"
+          v-model:param="state.form.indexNameShort"
+          link="number"
+          unit="米"
+          :decimal="2"
+        />
+        <CusFormColumn
+          :span="12"
+          label="北斗终端号"
+          v-model:param="state.form.indexNameShort"
+        />
+        <CusFormColumn
+          :span="12"
+          label="MMSI"
+          v-model:param="state.form.indexNameShort"
+        />
+        <CusFormColumn
+          :span="12"
+          label="重点船舶"
+          v-model:param="state.form.indexNameShort"
+          link="radio"
+          :options="[{dictLabel: '是', dictValue: '1'},{dictLabel: '否', dictValue: '0'}]"
+        />
+        <CusFormColumn
+          :span="12"
+          label="船舶照片"
+          v-model:param="state.form.indexUrl"
+          link="upload"
+          layout="card"
+          type="img"
+          :limit="1"
+          limitNoUpload
+          :delRule="(file) => true"
+        />
+      </CusForm>
+    </div>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
+import {useDictionaryStore} from "@/stores";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+const emit = defineEmits(['update:show', 'refresh'])
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+})
+const state: any = reactive({
+  form: {
+    indexUrl: []
+  },
+})
+const ref_form = ref()
+const titleCpt = computed(() => {
+  let t = '查看船舶档案'
+  switch (props.transfer.mode) {
+    case 'add': t = '新增船舶档案'
+      break
+    case 'edit': t = '编辑船舶档案'
+      break
+  }
+  return t
+})
+const onSubmit = () => {
+  ref_form.value.submit().then(() => {
+    ElMessageBox.confirm("是否提交?", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    } as any).then(() => {
+      state.loading = true
+      const params = {...state.form}
+      // sysThemeIndexAdd(params).then(res => {
+      //   ElMessage.success('新增成功！')
+      //   emit('update:show', false)
+      //   emit('refresh')
+      //   state.loading = false
+      // }).catch(() => {
+      //   state.loading = false
+      // })
+    }).catch(() => {})
+  }).catch((e) => {
+    ElMessage({
+      message: e[0].message,
+      grouping: true,
+      type: 'warning',
+    })
+  })
+}
+const initDetail = () => {
+  state.loading = true
+  // sysThemeIndexFindById(props.transfer.id).then(res => {
+  //   state.form = res.data
+  //   state.form.indexUrl = state.form.indexUrl ? [{url: state.form.indexUrl, name: state.form.indexUrl}] : []
+  //   state.conditionTable.data = state.form.indexCondition ? JSON.parse(state.form.indexCondition) : []
+  //   state.sortTable.data = state.form.indexOrder ? JSON.parse(state.form.indexOrder) : []
+  //   initText(state.form.indexId)
+  //   state.loading = false
+  // })
+}
+watch(() => props.show, (n) => {
+  if (n) {
+    state.loading = false
+    initDictionary()
+    if (props.transfer.mode === 'add') {
+      state.form = {
+        indexUrl: []
+      }
+    }
+    nextTick(() => {
+      ref_form.value.reset()
+    })
+  }
+})
+const initDictionary = () => {
+  // DictionaryStore.initDict('relation_chart_layout')
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.upload-layout-card_item) {
+  background-color: #999999;
+}
+</style>

src/views/web/archive/index.vue

@@ -0,0 +1,194 @@
+<template>
+  <CusDialog
+    :show="show"
+    title="船舶档案"
+    @onClose="$emit('update:show', false)"
+    width="90%"
+    height="90%"
+    :loading="state.loading"
+    :show-close="false"
+    :show-submit="false"
+  >
+    <div class="__cus-dialog-form">
+      <div class="filter">
+        <CusForm labelWidth="100px" @handleEnter="onSearch">
+          <CusFormColumn
+            :span="6"
+            label="船舶名称"
+            v-model:param="state.query.form.keyword"/>
+          <CusFormColumn
+            :span="6"
+            label="船舶类型"
+            v-model:param="state.query.form.keyword"
+            link="select"
+            :options="[]"
+          />
+          <CusFormColumn
+            :span="6"
+            label="持证类型"
+            v-model:param="state.query.form.keyword"
+            link="select"
+            :options="[]"
+          />
+          <CusFormColumn
+            :span="6"
+            label="北斗终端号"
+            v-model:param="state.query.form.keyword"/>
+          <CusFormColumn
+            :span="6"
+            label="MMSI"
+            v-model:param="state.query.form.keyword"/>
+          <CusSearchButtons
+            @handleReset="onReset"
+            @handleSearch="onSearch"
+          />
+        </CusForm>
+      </div>
+      <div class="buttons">
+        <CusButton type="main" title="新增" style="margin-left: auto;" @click="onAdd"/>
+        <CusButton type="del" title="批量删除"/>
+      </div>
+      <div class="table">
+        <CusTable
+          :page-num="state.query.page.pageNum"
+          :page-size="state.query.page.pageSize"
+          :total="state.query.result.total"
+          :data="state.query.result.data"
+          :table-head="state.query.tableHead"
+          @handlePage="onPage"
+        >
+          <template #shareMethod-column-value="{scope}">
+            {{DictionaryStore.gxMethodMap.get(scope.row.shareMethod)}}
+          </template>
+          <template #shareCycle-column-value="{scope}">
+            {{DictionaryStore.gxCycleMap.get(scope.row.shareCycle)}}
+          </template>
+          <template #themeMode-column-value="{scope}">
+            {{DictionaryStore.themeModeMap.get(scope.row.themeMode)}}
+          </template>
+          <template #isCreateEsIndex-column-value="{scope}">
+            {{DictionaryStore.trueFalseMap.get(scope.row.isCreateEsIndex)}}
+          </template>
+          <template #do-column-value="{scope}">
+            <CusButton type="table-edit" @click="onEdit(scope.row)"/>
+            <CusButton type="table-del" @click="onDel(scope.row)"/>
+          </template>
+        </CusTable>
+      </div>
+      <detail v-model:show="state.detail.show" :transfer="state.detail.transfer"/>
+    </div>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch} from "vue";
+import {useDictionaryStore} from "@/stores";
+import {ElMessage, ElMessageBox} from "element-plus";
+import detail from './detail.vue'
+
+const emit = defineEmits(['update:show', 'refresh'])
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+})
+const state: any = reactive({
+  query: {
+    loading: false,
+    page: {
+      pageNum: 1,
+      pageSize: 10
+    },
+    tableHead: [
+      {value: 'userName', label: '船名号', width: 200},
+      {value: 'nickName', label: '最大航速', width: 200},
+      {value: 'nickName', label: '船长', width: 200},
+      {value: 'nickName', label: '船宽', width: 200},
+      {value: 'nickName', label: '北斗终端号', width: 200},
+      {value: 'nickName', label: 'MMSI', width: 200},
+      {value: 'nickName', label: '船舶类型', width: 200},
+      {value: 'nickName', label: '持证类型', width: 200},
+      {value: 'nickName', label: '是否重点船舶', width: 200},
+      {value: "do", label: "操作", width: 160, fixed: 'right'},
+    ],
+    form: {},
+    formReal: {},
+    result: {
+      total: 0,
+      data: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},]
+    }
+  },
+  detail: {
+    show: false,
+    transfer: {}
+  }
+})
+watch(() => props.show, (n) => {
+  if (n) {
+    state.loading = false
+    initDictionary()
+  }
+})
+const initDictionary = () => {
+  // DictionaryStore.initDict('format_type')
+}
+const onPage = (pageNum, pageSize) => {
+  state.query.page = {
+    pageNum: pageNum,
+    pageSize: pageSize
+  }
+  const params = {
+    page: state.query.page.pageNum,
+    size: state.query.page.pageSize,
+  }
+  //  添加表单参数
+  for (const [k, v] of Object.entries(state.query.formReal)) {
+    if (proxy.$util.isValue(v)) {
+      params[k] = v
+    }
+  }
+  state.query.loading = true
+  // sysIndexFindIndexByPage(proxy.$util.formatGetParam(params)).then(res => {
+  //   state.query.result.total = res.data.totalElements
+  //   state.query.result.data = res.data.content
+  //   state.query.loading = false
+  // })
+}
+const onSearch = () => {
+  state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
+  onPage(1, state.query.page.pageSize)
+}
+const onReset = () => {
+  state.query.page = {
+    pageNum: 1,
+    pageSize: 10
+  }
+  state.query.form = {}
+  onSearch()
+}
+const onAdd = () => {
+  state.detail.transfer = {
+    mode: 'add'
+  }
+  state.detail.show = true
+}
+</script>
+
+<style lang="scss" scoped>
+.__cus-dialog-form {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .buttons {
+    display: flex;
+  }
+  .table {
+    margin-top: 10px;
+    flex: 1;
+    overflow: hidden;
+  }
+}
+</style>

src/views/web/index.vue

@@ -45,26 +45,29 @@
           content="船舶档案"
           placement="right"
         >
-          <div class="tools-item __hover">
+          <div class="tools-item __hover" @click="state.tools.showArchive = !state.tools.showArchive">
             <img src="@/assets/images/web/tools-ship.png"/>
           </div>
         </el-tooltip>
       </div>
-      <ConfigCom v-model:show="state.tools.showConfig" :mapFunc="state.mapFunc"/>
+      <configCom v-model:show="state.tools.showConfig" :mapFunc="state.mapFunc"/>
+      <archiveCom v-model:show="state.tools.showArchive"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {computed, getCurrentInstance, reactive} from "vue";
-import ConfigCom from './tools/config.vue'
+import configCom from './tools/config.vue'
+import archiveCom from './archive/index.vue'
 
 const {proxy} = getCurrentInstance()
 const state: any = reactive({
   map: null,
   mapFunc: null,
   tools: {
-    showConfig: true
+    showConfig: false,
+    showArchive: true,
   }
 })
 const titleCpt = computed(() => {

src/views/web/tools/area-map.vue

@@ -84,9 +84,4 @@ watch(() => props.show, (n) => {
 </script>
 
 <style lang="scss" scoped>
-.__cus-dialog-form {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
 </style>

src/views/web/tools/rule-detail.vue

@@ -197,9 +197,4 @@ const initDictionary = () => {
 </script>
 
 <style lang="scss" scoped>
-.__cus-dialog-form {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
 </style>