sea-warning-web/src/views/web/warning/index.vue

<template>
  <DragWindow
    v-if="show"
    @onClose="$emit('update:show', false)"
    title="预警记录(0000条)"
    v-model:layout="state.layout"
    close
    expend
  >
    <div class="warning" v-if="show" v-loading="state.loading">
      <CusForm
        labelWidth="60px"
        class="__cus-form_map"
        @handleEnter="onSearch()"
      >
        <CusFormColumn
          :span="20"
          labelWidth="0px"
          v-model:param="state.text"
        />
        <el-col :span="4" style="display: flex;">
          <div class="search-btn" @click="onSearch()" style="margin-left: auto">
            <el-icon color="#FFFFFF">
              <Search />
            </el-icon>
          </div>
          <div class="search-btn" @click="onReset()">
            <el-icon color="#FFFFFF">
              <Refresh />
            </el-icon>
          </div>
        </el-col>
      </CusForm>
      <div class="new-msg">xx条新预警，点击<span class="__hover">刷新列表</span></div>
      <div class="list">
        <div class="list-content">
          <template v-for="item in state.query.result.data">
            <div class="item">
              <div class="target">
                <SvgIcon name="warning" color="#FF0D0D"/>
                船名号
                <SvgIcon name="focus" color="#6899FA" class="__hover" style="margin-left: auto"/>
              </div>
              <div class="target">
                <SvgIcon name="warning" color="#FF0D0D"/>
                批次号
                <SvgIcon name="focus" color="#6899FA" class="__hover" style="margin-left: auto"/>
              </div>
              <div class="info">
                <div class="info-img">
                  <img src="@/assets/images/web/tools-warning.png"/>
                </div>
                <div class="info-detail">
                  <div class="info-item">预警名称：</div>
                  <div class="info-item">预警时间：</div>
                  <div class="info-item">预警区域：查看区域</div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="list-page __cus-page_map">
          <CusPage
            :page-num="state.query.page.pageNum"
            :page-size="state.query.page.pageSize"
            :page-sizes="[10, 20, 30]"
            :total="state.query.result.total"
            @page="onPage"
          />
        </div>
      </div>
    </div>
  </DragWindow>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, markRaw, onMounted, reactive, ref, watch} from "vue";
import DragWindow from '../components/drag-window.vue'
import { Search, Refresh } from "@element-plus/icons-vue";

const {proxy} = getCurrentInstance()
const props = defineProps({
  show: {},
  mapFunc: {}
})
const state: any = reactive({
  layout: {
    width: 400,
    left: 85,
    top: 110
  },
  query: {
    loading: false,
    page: {
      pageNum: 1,
      pageSize: 10
    },
    form: {},
    formReal: {},
    result: {
      total: 0,
      data: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},]
    }
  },
})
watch(() => props.show, (n) => {
  if (n) {
    initData()
  }
})
const initData = () => {
  state.loading = true
  setTimeout(() => {
    state.loading = false
  }, 1000)
}
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()
}
onMounted(() => {
  initData()
})
</script>

<style lang="scss" scoped>
$mapHeight: var(--easy-map-height);
.warning {
  height: calc($mapHeight - 250px);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  .__cus-form_map {
    margin-bottom: 10px;
    .search-btn {
      width: 28px;
      height: 28px;
      background: #0062e9;
      border-radius: 4px 4px 4px 4px;
      margin-left: 5px;
      cursor: pointer;
      text-align: center;
      line-height: 33px;
    }
  }
  .new-msg {
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    >span {
      color: #1CFEFF;
    }
  }
  .list {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .list-content {
      flex: 1;
      overflow-y: auto;
      gap: 10px;
      display: flex;
      flex-direction: column;
      .item {
        background-color: rgba(67,123,250,0.01);
        box-shadow: inset 0px 0px 10px 0px rgba(64,122,255,0.45);
        border-radius: 2px;
        border: 1px solid rgba(50,136,255,0.6);
        padding: 10px;
        display: flex;
        flex-direction: column;
        .target {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          color: #6899FA;
          background-color: rgba(23,40,75,0.5);
          border-radius: 0px 35px 35px 0px;
          padding: 4px 6px;
          &:not(&:first-child) {
            margin-top: 8px;
          }
        }
        .info {
          display: flex;
          margin-top: 8px;
          .info-img {
            width: 88px;
            height: 58px;
            margin-right: 10px;
            >img {
              width: 100%;
              height: 100%;
            }
          }
          .info-detail {
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 20px;
          }
        }
      }
    }
    .list-page {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>