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

<template>
  <DragWindow
    ref="ref_warning"
    v-if="show"
    @onClose="$emit('update:show', false)"
    title="预警记录(0000条)"
    v-model:layout="state.layout"
    close
    expend
  >
    <template #buttons>
      <div class="warning-open __hover" :class="{active: ShipMapStore.warningOpen}" @click="ShipMapStore.$patch((state) => state.warningOpen = !state.warningOpen)">
        预警助手
        <div class="bg"/>
      </div>
    </template>
    <div class="warning" v-if="show" v-loading="state.loading">
      <CusForm
        labelWidth="60px"
        class="__cus-form_map"
        @handleEnter="onSearch()"
      >
        <CusFormColumn
            :span="16"
            labelWidth="0px"
            v-model:param="state.query.form.targetName"
            class="search"
        >
          <template #append>
            <div class="search-btn __hover" @click="onSearch">搜索</div>
          </template>
        </CusFormColumn>
        <div class="reset-button __hover" @click="onReset">重置</div>
        <div class="more-button __hover" @click="onMore">更多</div>
      </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">
              <template v-for="ship in item.dynamicShipList">
                <div class="target">
                  <SvgIcon name="warning" color="#FF0D0D"/>
                  {{ ship.targetName || ship.mergeTarget }}
                  <SvgIcon name="focus" color="#ffffff" class="__hover" style="margin-left: auto"/>
                </div>
              </template>
              <div class="info">
                <div class="info-img">
                  <img src="@/assets/images/web/tools-warning.png"/>
                </div>
                <div class="info-detail">
                  <div class="info-item">预警名称：{{item.ruleName}}</div>
                  <div class="info-item">预警时间：{{item.warnTime}}</div>
                  <div class="info-item">预警区域：{{item.areaName}}<span style="color: #1CFEFF; margin-left: 10px">查看区域</span></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>
  <DragWindow
      v-if="show && state.more.show"
      @onClose="state.more.show = false"
      title="船舶预警高级查询"
      v-model:layout="state.more.layout"
      close
      expend
  >
    <div class="more" v-if="show && state.more.show">
      <div class="form">
        <CusForm
            labelWidth="100px"
            class="__cus-form_map"
            @handleEnter="onSearch()"
        >
          <CusFormColumn
              :span="24"
              label="预警开始时间"
              v-model:param="state.query.form.startTime"
              link="datetime"
          />
          <CusFormColumn
              :span="24"
              label="预警结束时间"
              v-model:param="state.query.form.endTime"
              link="datetime"
          />
          <CusFormColumn
              :span="24"
              label="预警模型"
              v-model:param="state.query.form.modelId"
              link="select"
              :options="DictionaryStore.warningModelList"
          />
          <CusFormColumn
              :span="24"
              label="预警规则"
              v-model:param="state.query.form.ruleName"
          />
          <CusFormColumn
              :span="24"
              label="船名号"
              v-model:param="state.query.form.targetName"
          />
          <CusFormColumn
              :span="24"
              label="融合批次号"
              v-model:param="state.query.form.mergeTarget"
          />
          <CusFormColumn
              :span="24"
              label="北斗终端号"
              v-model:param="state.query.form.beidouId"
          />
          <CusFormColumn
              :span="24"
              label="MMSI"
              v-model:param="state.query.form.mmsi"
          />
          <CusFormColumn
              :span="24"
              label="雷达批次号"
              v-model:param="state.query.form.radarTargetId"
          />
        </CusForm>
      </div>
      <div class="more-buttons">
        <div class="cancel __hover" @click="onReset">重置</div>
        <div class="submit __hover" @click="onSearch">搜索</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 {warnModelRuleTree} from "@/api/modules/web/model";
import {useDictionaryStore, useShipMapStore} from "@/stores";
import {warnRecordList} from "@/api/modules/web/record";
import {ElMessage} from "element-plus";

const DictionaryStore = useDictionaryStore()
const ShipMapStore = useShipMapStore()
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: []
    }
  },
  more: {
    show: false,
    layout: {
      width: 400,
      left: 585,
      top: 110
    }
  }
})
const ref_warning = ref()
watch(() => props.show, (n) => {
  if (n) {
    onSearch()
  }
})
const onPage = (pageNum, pageSize) => {
  state.query.page = {
    pageNum: pageNum,
    pageSize: pageSize
  }
  const params = {
    pageNum: state.query.page.pageNum,
    pageSize: 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
  warnRecordList(params).then(res => {
    if (res.code == 0) {
      state.query.result.total = res.total
      state.query.result.data = res.rows
      state.query.loading = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}
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 onMore = () => {
  state.more.layout.top = state.layout.top
  state.more.layout.left = state.layout.width + state.layout.left + 20
  state.more.show = true
}
onMounted(() => {
  warnModelRuleTree().then(res => {
    DictionaryStore.initOtherDict('warningModel', res.data.map(v => {
      v.dictLabel = v.name
      v.dictValue = v.id
      return v
    }))
  })
})
</script>

<style lang="scss" scoped>
$mapHeight: var(--easy-map-height);
.warning {
  height: calc($mapHeight - 250px);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  .__cus-form_map {
    margin-bottom: 10px;
    :deep(.search) {
      .el-input-group__append {
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        .search-btn {
          width: 80px;
          height: 100%;
          background: linear-gradient(150deg, #2FBCCD, #2467EB);
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0px 4px 4px 0px;
        }
      }
    }
    .reset-button {
      width: 64px;
      height: 40px;
      background: #6FA2EA;
      border-radius: 4px;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
    }
    .more-button {
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 40px;
      margin: 0 auto;
    }
  }
  .new-msg {
    margin-bottom: 10px;
    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 {
        display: flex;
        flex-direction: column;
        border-bottom: 3px solid rgba(255, 255, 255, 0.2);
        padding: 24px 0;
        &:first-child {
          padding-top: 0;
        }
        .target {
          height: 48px;
          display: flex;
          align-items: center;
          background: rgba(88,148,235,0.2);
          border-radius: 8px;
          padding: 0 12px;
          font-weight: 400;
          font-size: 20px;
          color: #FFFFFF;
          .svg-icon:first-child {
            margin-right: 12px;
          }
          &:not(&:first-child) {
            margin-top: 8px;
          }
        }
        .info {
          display: flex;
          margin-top: 16px;
          .info-img {
            width: 144px;
            height: 100px;
            margin-right: 15px;
            border-radius: 4px;
            border: 1px solid #AED0FF;
            >img {
              width: 100%;
              height: 100%;
            }
          }
          .info-detail {
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            gap: 16px;
          }
        }
      }
    }
    .list-page {
      display: flex;
      justify-content: flex-end;
    }
  }
}
.more {
  padding: 26px 24px;
  .form {
    background: rgba(88, 148, 235, 0.2);
    border-radius: 8px;
    padding: 26px 54px 10px 0;
    .cus-form-column {
      margin-bottom: 16px;
    }
  }
  .more-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
    >div {
      width: 65px;
      height: 40px;
      background: #6FA2EA;
      border-radius: 4px;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      &.submit {
        background-color: #4996FF;
      }
    }
  }
}
.warning-open {
  margin-left: auto;
  width: 94px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  margin-right: 8px;
  position: relative;
  .bg {
    border-radius: 4px;
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: skew(-10deg);
    background-image: linear-gradient(0deg, rgb(255, 255, 255, 0.3), rgb(255, 255, 255, 0.3));
  }
  &.active {
    .bg {
      background-image: linear-gradient(0deg, rgba(47, 188, 205, 1), rgba(148, 214, 180, 1));
    }
  }
}
</style>