预警记录

package.json

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

src/style/cus.scss

@@ -326,4 +326,284 @@ em {
 
 .el-notification {
   width: min-content !important;
+}
+
+.__cus-form_map {
+  .cus-form-column {
+    &.__textarea-content {
+      .el-form-item {
+        margin-bottom: 4px !important;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 0;
+      &.is-error {
+        margin-bottom: 18px !important;
+      }
+      &.link_input, &.link_select, &.link_date, &.link_date_daterange, &.link_datetime, &.link_datetimerange, &.link_residentMooringPoint, &.link_radio, &.link_area {
+        height: 28px;
+        .el-form-item__label {
+          height: 28px;
+        }
+        .el-form-item__content {
+          line-height: 1;
+          .el-select__wrapper, .el-input__wrapper {
+            height: 28px;
+            min-height: 28px;
+          }
+        }
+      }
+      &.link_input {
+        .__draw-handle {
+          margin: 0 0 0 4px !important;
+        }
+      }
+      .el-form-item__label {
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 14px;
+        color: #FFFFFF !important;
+        padding: 0 !important;;
+        margin-right: 4px;
+      }
+      .el-form-item__content {
+        .feature-type {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+          >div {
+            width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &.active {
+              background-color: #0062E9;
+            }
+          }
+        }
+        .unit {
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          font-size: 14px;
+          color: #FFFFFF;
+        }
+        .el-textarea__inner, .el-input__wrapper {
+          box-shadow: unset;
+          border: 1px solid #1A56D4;
+          background-color: transparent;
+          color: #FFFFFF;
+          word-break: break-all;
+          .el-input__inner {
+            color: #FFFFFF;
+            line-height: 1;
+            height: 28px;
+          }
+        }
+        .el-select__wrapper {
+          box-shadow: unset;
+          border: 1px solid #1A56D4;
+          background-color: transparent;
+          color: #FFFFFF;
+          .el-select__selected-item {
+            &:not(&.is-transparent) {
+              color: #FFFFFF;
+            }
+            .el-select__tags-text {
+              color: #909399;
+              -webkit-text-fill-color: #909399;
+            }
+          }
+        }
+        .el-date-editor {
+          padding: 0 4px;
+          &.el-date-editor--datetimerange {
+            .el-range-input {
+              font-size: 12px;
+            }
+            .el-range-separator {
+              width: 10px;
+              flex: unset;
+            }
+          }
+          .el-range-input {
+            color: #FFFFFF;
+            flex: 1;
+          }
+          .el-range-separator {
+            color: #FFFFFF;
+          }
+        }
+        .el-color-picker {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .el-color-picker__trigger {
+            width: 14px;
+            height: 14px;
+            padding: 0;
+            border: none;
+            .el-color-picker__color {
+              border-color: #EAEBEF;
+              .el-icon {
+                display: none;
+              }
+            }
+          }
+        }
+        .el-input-number {
+          .el-input-number__increase, .el-input-number__decrease {
+            background-color: rgba(255, 255, 255, 0.1);
+            border: none;
+            .el-icon {
+              color: rgba(255, 255, 255, 0.6);
+            }
+          }
+        }
+        .el-radio-group {
+          gap: 10px;
+          .el-radio {
+            height: 28px;
+            margin-right: 0;
+            .el-radio__label {
+              color: #FFFFFF;
+              padding-left: 2px;
+            }
+            &.is-checked {
+              .el-radio__label {
+              }
+            }
+          }
+        }
+        .area-input {
+          .el-input-group__prepend {
+            background-color: transparent;
+            box-shadow: unset;
+            border: 1px solid #1A56D4;
+            border-right: none;
+            .el-dropdown {
+              color: #FFFFFF;
+            }
+          }
+        }
+        .is-disabled {
+          .el-select__selected-item:not(.is-transparent),
+          .el-input__inner,
+          .el-radio__label,
+          .el-checkbox__label,
+          .el-range-input, .el-range-separator,
+          .el-textarea__inner
+          {
+            color: #FFFFFF;
+            -webkit-text-fill-color: #FFFFFF;
+          }
+        }
+      }
+    }
+  }
+}
+
+.__cus-page_map {
+  .el-pagination {
+    margin-left: auto;
+    .el-pagination__total {
+      color: #FFFFFF;
+    }
+    .el-pagination__sizes {
+      display: flex;
+      .el-select {
+        width: 60px;
+        .el-select__wrapper {
+          box-shadow: none;
+          padding: 0;
+          background-color: transparent;
+          min-height: 20px;
+          border: 1px solid #FFFFFF;
+          border-radius: 4px;
+          .el-select__selected-item {
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #FFFFFF;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            >span {
+              line-height: 1;
+            }
+          }
+          .el-select__suffix {
+            display: none;
+          }
+        }
+      }
+    }
+    .btn-prev, .btn-next {
+      background-color: transparent;
+      color: #FFFFFF !important;
+      height: 20px;
+      padding: 0;
+      margin: 0;
+      min-width: 20px;
+      &:hover {
+        color: #1CFEFF !important;
+      }
+    }
+    .el-pager {
+      gap: 4px;
+      .number {
+        height: 20px;
+        padding: 0;
+        margin: 0;
+        min-width: unset;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 12px;
+        color: #FFFFFF !important;
+        background-color: transparent !important;
+        border: none;
+        &:hover {
+          opacity: 0.75;
+          color: #1CFEFF !important;
+        }
+        &.is-active {
+          color: #1CFEFF !important;
+          opacity: 1;
+        }
+      }
+      .more {
+        background-color: transparent;
+        color: #ffffff !important;
+        padding: 0;
+        min-width: unset;
+        &:hover {
+          color: #1CFEFF !important;
+        }
+      }
+    }
+    .el-pagination__jump {
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 12px;
+      color: #FFFFFF;
+      margin-left: 0;
+      .el-input {
+        width: fit-content;
+        .el-input__wrapper {
+          box-shadow: unset;
+          background-color: transparent;
+          padding: unset;
+          border: 1px solid #FFFFFF;
+          height: 20px;
+          .el-input__inner {
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            height: unset;
+          }
+        }
+      }
+    }
+  }
 }

src/views/web/tools/config.vue

@@ -14,7 +14,7 @@
       </div>
       <CusForm
         labelWidth="60px"
-        class="search-form"
+        class="__cus-form_map"
         @handleEnter="onSearch()"
       >
         <CusFormColumn
@@ -22,14 +22,12 @@
           labelWidth="0px"
           v-model:param="state.text"
         />
-        <el-col :span="2">
-          <div class="search-btn" @click="onSearch()">
+        <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>
-        </el-col>
-        <el-col :span="2">
           <div class="search-btn" @click="state.text = '', onSearch()">
             <el-icon color="#FFFFFF">
               <Refresh />
@@ -105,7 +103,6 @@ const props = defineProps({
 const state: any = reactive({
   layout: {
     width: 400,
-    height: '90%',
     left: 70,
     top: 10
   },
@@ -231,37 +228,15 @@ onMounted(() => {
       border-bottom: 2px solid #1cfeff;
     }
   }
-  :deep(.search-form) {
+  .__cus-form_map {
     margin-top: 16px;
     margin-bottom: 10px;
-    .el-col {
-      display: flex;
-      align-items: center;
-    }
-    .el-form-item {
-      margin-bottom: 0;
-      flex: 1;
-      .el-form-item__label {
-        padding: unset;
-        margin: 0 5px;
-        font-weight: 400;
-        font-size: 14px;
-        color: #ffffff;
-      }
-      .el-input__wrapper {
-        height: 28px;
-        background-color: unset;
-        box-shadow: unset;
-        border: 1px solid #1a56d4;
-      }
-    }
     .search-btn {
       width: 28px;
       height: 28px;
       background: #0062e9;
       border-radius: 4px 4px 4px 4px;
       margin-left: 5px;
-      margin-top: 3px;
       cursor: pointer;
       text-align: center;
       line-height: 33px;

src/views/web/index.vue

@@ -33,10 +33,10 @@
         </el-tooltip>
         <el-tooltip
           effect="light"
-          content="预警列表"
+          content="预警记录"
           placement="right"
         >
-          <div class="tools-item __hover">
+          <div class="tools-item __hover" @click="state.tools.showWarning = !state.tools.showWarning">
             <img src="@/assets/images/web/tools-warning.png"/>
           </div>
         </el-tooltip>
@@ -52,14 +52,16 @@
       </div>
       <configCom v-model:show="state.tools.showConfig" :mapFunc="state.mapFunc"/>
       <archiveCom v-model:show="state.tools.showArchive"/>
+      <warningCom v-model:show="state.tools.showWarning"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {computed, getCurrentInstance, reactive} from "vue";
-import configCom from './tools/config.vue'
+import configCom from './config/index.vue'
 import archiveCom from './archive/index.vue'
+import warningCom from './warning/index.vue'
 
 const {proxy} = getCurrentInstance()
 const state: any = reactive({
@@ -67,7 +69,8 @@ const state: any = reactive({
   mapFunc: null,
   tools: {
     showConfig: false,
-    showArchive: true,
+    showArchive: false,
+    showWarning: false,
   }
 })
 const titleCpt = computed(() => {

src/views/web/warning/index.vue

@@ -0,0 +1,242 @@
+<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: 70,
+    top: 10
+  },
+  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>
+.warning {
+  height: 790px;
+  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>

vite.config.ts

@@ -86,27 +86,27 @@ export default defineConfig({
         api: "modern-compiler" // or 'modern'
       }
     },
-    postcss: {
-      plugins: [
-        postcsspxtoviewport({
-          unitToConvert: 'px',
-          viewportWidth: 1920,
-          unitPrecision: 5, // 单位转换后保留的精度
-          propList: ['*'], // 能转化为vw的属性列表
-          viewportUnit: 'vw', // 希望使用的视口单位
-          fontViewportUnit: 'vw', // 字体使用的视口单位
-          selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
-          minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
-          mediaQuery: true, // 媒体查询里的单位是否需要转换单位
-          replace: true, //  是否直接更换属性值，而不添加备用属性
-          exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
-          include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
-          landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
-          landscapeUnit: 'vw', // 横屏时使用的单位
-          landscapeWidth: 1628, // 横屏时使用的视口宽度
-        }),
-      ]
-    }
+    // postcss: {
+    //   plugins: [
+    //     postcsspxtoviewport({
+    //       unitToConvert: 'px',
+    //       viewportWidth: 1920,
+    //       unitPrecision: 5, // 单位转换后保留的精度
+    //       propList: ['*'], // 能转化为vw的属性列表
+    //       viewportUnit: 'vw', // 希望使用的视口单位
+    //       fontViewportUnit: 'vw', // 字体使用的视口单位
+    //       selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+    //       minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+    //       mediaQuery: true, // 媒体查询里的单位是否需要转换单位
+    //       replace: true, //  是否直接更换属性值，而不添加备用属性
+    //       exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+    //       include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
+    //       landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+    //       landscapeUnit: 'vw', // 横屏时使用的单位
+    //       landscapeWidth: 1628, // 横屏时使用的视口宽度
+    //     }),
+    //   ]
+    // }
   },
   build: {
     outDir: "sea-warning-web",