添加组件 应急时间查询(弹窗类)

src/components/common-comp-emergency-events-inquiry/demo/basic.demo.vue

@@ -0,0 +1,25 @@
+<markdown>
+  # 应急事件查询
+</markdown>
+
+<markdown-code>
+  <d-emergency-events-inquiry />
+</markdown-code>
+
+<template>
+  <div>
+    <n-image width="100%" height="100%" :src="url" />
+  </div>
+</template>
+
+<script>
+import iShot from './screens/emergency-events-inquiry.png'
+
+export default {
+  data() {
+    return {
+      url: iShot
+    }
+  }
+}
+</script>

src/components/common-comp-emergency-events-inquiry/demo/index.demo-entry.md

@@ -0,0 +1,13 @@
+# 应急事件查询
+
+应急事件查询
+
+## 代码演示
+
+```demo
+basic.vue
+```
+
+### EvnetBus 事件
+
+无

src/components/common-comp-emergency-events-inquiry/index.js

@@ -0,0 +1,7 @@
+import EmergencyEventsInquiry from './src/entry/EmergencyEventsInquiry.vue'
+
+EmergencyEventsInquiry.install = function (Vue) {
+  Vue.component(EmergencyEventsInquiry.name, EmergencyEventsInquiry)
+}
+
+export default EmergencyEventsInquiry

src/components/common-comp-emergency-events-inquiry/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@component-gallery/emergency-events-inquiry",
+  "version": "0.0.1",
+  "description": "应急事件查询",
+  "dependencies": {
+    "@component-gallery/assets": "workspace:^",
+    "@component-gallery/utils": "workspace:^",
+    "@component-gallery/base-components": "workspace:^",
+    "@component-gallery/theme-chalk": "workspace:^",
+    "@component-gallery/build-event-bus-path": "workspace:^",
+    "@component-gallery/map": "workspace:^"
+  }
+}

src/components/common-comp-emergency-events-inquiry/src/assets/styles/eventCommon.scss

@@ -0,0 +1,494 @@
+@import '~@component-gallery/theme-chalk/src/mixins/px-to-rem';
+@import '~@component-gallery/theme-chalk/src/mixins/mixins';
+@import '~@component-gallery/theme-chalk/src/mixins/theme-mixins';
+
+// 以通用为基础建立各行业通用样式
+@mixin common-class() {
+  .event-confirm {
+    position: relative;
+    z-index: 2;
+    overflow: visible !important;
+    padding: 0 !important;
+    width: auto !important;
+    min-width: px-to-rem(368);
+    max-width: px-to-rem(368);
+    background: none !important;
+    border: 0 !important;
+    border-radius: px-to-rem(8) !important;
+    box-shadow: none !important;
+    cursor: default;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      background: rgb(23 37 55 / 90%);
+      border-radius: inherit;
+      content: '';
+    }
+
+    .el-message-box__header {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+      height: px-to-rem(48);
+      background: linear-gradient(
+        180deg,
+        rgb(132 180 250 / 70%) 0%,
+        rgb(132 180 250 / 24%) 100%
+      );
+      border-radius: px-to-rem(8) px-to-rem(8) 0 0;
+
+      &::before {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: px-to-rem(116);
+        height: 100%;
+        content: '';
+        transform: translateX(-50%);
+        pointer-events: none;
+      }
+
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: px-to-rem(1);
+        content: '';
+        pointer-events: none;
+      }
+
+      .el-message-box__title {
+        color: #e8f3fe;
+        font-size: px-to-rem(16);
+        text-align: center;
+        font-weight: 500;
+      }
+
+      .el-message-box__headerbtn {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 12;
+        width: px-to-rem(38);
+        height: px-to-rem(38);
+        background: url('../images/common/close.png') no-repeat center / 100%
+          100%;
+        transform: translate(50%, -50%);
+        cursor: pointer;
+
+        .el-icon-close {
+          display: none;
+        }
+      }
+    }
+
+    .el-message-box__content {
+      padding: px-to-rem(24) px-to-rem(26);
+
+      .el-message-box__message {
+        color: #e8f3fe;
+        font-size: px-to-rem(14);
+        text-align: center;
+
+        p {
+          line-height: px-to-rem(20);
+        }
+      }
+    }
+
+    .el-message-box__btns {
+      display: flex !important;
+      justify-content: center !important;
+      padding: 0 px-to-rem(12) px-to-rem(12) !important;
+      flex-direction: row-reverse !important;
+
+      .el-button {
+        position: relative;
+        padding: 0;
+        margin: 0 0 0 px-to-rem(12) !important;
+        width: px-to-rem(108);
+        height: px-to-rem(32);
+        background: rgb(79 159 255 / 20%);
+        border: 0;
+        border-radius: px-to-rem(4);
+        color: #e8f3fe;
+        font-size: px-to-rem(14);
+        line-height: px-to-rem(32);
+
+        &:last-child {
+          margin-left: 0 !important;
+        }
+
+        &.el-button--primary {
+          background: linear-gradient(90deg, #4f9fff 0%, #1373e6 100%);
+        }
+
+        &:hover {
+          opacity: 0.6;
+        }
+
+        &:active {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+  .event-pagination-popper {
+    border: none;
+    border-radius: px-to-rem(8);
+    box-shadow: none;
+    background: #0f1926;
+    .popper__arrow {
+      display: none;
+    }
+    .el-scrollbar {
+      border-radius: px-to-rem(8);
+    }
+    .el-select-dropdown__wrap {
+      color: #e8f3fe;
+      overflow: hidden;
+      width: px-to-rem(120);
+      border: none;
+      border-radius: px-to-rem(8);
+    }
+    .el-select-dropdown__item {
+      color: #e8f3fe;
+      background-color: transparent;
+      position: relative;
+      overflow: hidden;
+      padding: 0 px-to-rem(20) 0 px-to-rem(10);
+      height: px-to-rem(34);
+      font-size: px-to-rem(14);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: px-to-rem(34);
+    }
+    .el-select-dropdown__item:hover {
+      background: rgba(79, 159, 255, 0.4);
+      color: #e8f3fe;
+    }
+    .el-select-dropdown__item.selected {
+      background: rgba(79, 159, 255, 0.4);
+      color: #4f9fff;
+    }
+  }
+  .event-date {
+    .el-time-spinner__item {
+      height: 32px !important;
+      line-height: 32px !important;
+    }
+    .el-time-panel__content::after,
+    .el-time-panel__content::before {
+      height: 32px !important;
+    }
+    .el-time-panel {
+      left: auto !important;
+      right: 0 !important;
+    }
+  }
+}
+
+[data-theme='theme-wiseblue'] {
+  // 睿智蓝
+  @include common-class;
+}
+
+[data-theme='theme-aquamarine'] {
+  // 碧山绿
+  @include common-class;
+
+  .event-confirm {
+    background: linear-gradient(
+      180deg,
+      rgb(0 19 30 / 70%) 0%,
+      #00131e 100%
+    ) !important;
+    border: px-to-rem(1) solid !important;
+    border-image: linear-gradient(
+        360deg,
+        rgb(7 91 74 / 75%),
+        rgb(7 91 74 / 30%)
+      )
+      1 1 !important;
+    border-radius: 0 !important;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: auto;
+      bottom: px-to-rem(-1);
+      left: auto;
+      z-index: 2;
+      width: px-to-rem(21);
+      height: px-to-rem(25);
+      background: url('../images/common/footer-left.png') center / 100% 100%;
+      border-radius: 0;
+      content: '';
+      pointer-events: none;
+    }
+
+    &::before {
+      left: px-to-rem(-1);
+    }
+
+    &::after {
+      right: px-to-rem(-1);
+      transform: rotateY(180deg);
+    }
+
+    .el-message-box__header {
+      background: linear-gradient(
+        90deg,
+        rgb(2 137 109 / 0%) 0%,
+        rgb(2 137 109 / 20%) 51%,
+        rgb(2 137 109 / 0%) 100%
+      );
+
+      &::before {
+        width: 100%;
+        height: calc(100% + 1px);
+        background: url('../images/common/singleTabSel-ly.png') no-repeat bottom
+            center,
+          url('../images/common/popup-header-xx.png') no-repeat center / auto
+            100%,
+          url('../images/common/popup-header-k.png') no-repeat top center;
+        pointer-events: none;
+      }
+
+      &::after {
+        background: linear-gradient(
+          270deg,
+          rgb(255 255 255 / 0%) 0%,
+          #fff 50%,
+          rgb(255 255 255 / 0%) 100%
+        );
+      }
+
+      .el-message-box__title {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        text-shadow: 0 0 18px rgb(0 245 193 / 70%);
+        color: #fff;
+
+        &::before {
+          position: absolute;
+          top: px-to-rem(-1);
+          left: px-to-rem(-1);
+          width: px-to-rem(8);
+          height: px-to-rem(1);
+          background: #00fff8;
+          content: '';
+        }
+      }
+
+      .el-message-box__headerbtn {
+        background: url('../images/common/close-ly.png') no-repeat center / 100%
+          100%;
+      }
+    }
+
+    .el-message-box__content {
+      .el-message-box__message {
+        color: #fff;
+      }
+    }
+
+    .el-message-box__btns {
+      .el-button {
+        position: relative;
+        z-index: 3;
+        background: none;
+        border: px-to-rem(1) dotted rgb(2 137 109 / 15%);
+        border-radius: 0;
+        color: #fff;
+        line-height: px-to-rem(30);
+
+        &::after {
+          position: absolute;
+          top: px-to-rem(1);
+          left: px-to-rem(1);
+          z-index: -1;
+          width: calc(100% - px-to-rem(2));
+          height: calc(100% - px-to-rem(2));
+          background: rgb(2 137 109 / 10%);
+          box-shadow: inset 0 0 3px 0 rgb(2 137 109 / 60%);
+          content: '';
+        }
+
+        &.el-button--primary {
+          background: none;
+
+          &::before {
+            position: absolute;
+            top: px-to-rem(1);
+            left: px-to-rem(1);
+            z-index: -2;
+            overflow: hidden;
+            width: calc(100% - px-to-rem(2));
+            height: calc(100% - px-to-rem(2));
+            background: url('../images/common/popup-header-xx.png') no-repeat
+              center;
+            opacity: 0.25;
+            content: '';
+          }
+
+          &::after {
+            background: rgb(2 137 109 / 30%);
+            box-shadow: inset 0 0 13px 0 rgb(0 255 248 / 60%);
+          }
+
+          span {
+            display: block;
+            background: url('../images/common/btn-lt.png') no-repeat left top,
+              url('../images/common/btn-lb.png') no-repeat left bottom,
+              url('../images/common/btn-rt.png') no-repeat right top,
+              url('../images/common/btn-rb.png') no-repeat right bottom;
+          }
+        }
+      }
+    }
+  }
+
+  .event-pagination-popper {
+    background: linear-gradient(
+      180deg,
+      rgba(0, 67, 63, 0.85),
+      rgba(0, 19, 30, 0.74) 21%,
+      #00131e
+    );
+    .el-select-dropdown__wrap {
+      color: #fff;
+    }
+    .el-select-dropdown__item {
+      color: #fff;
+    }
+    .el-select-dropdown__item:hover {
+      background: rgba(2, 137, 109, 0.4);
+      color: #fff;
+    }
+    .el-select-dropdown__item.selected {
+      background: rgba(2, 137, 109, 0.4);
+      color: #f9ff6c;
+    }
+  }
+}
+
+[data-theme='theme-terracotta'] {
+  // 赤土黄
+  @include common-class;
+
+  .event-confirm {
+    &::after {
+      background: linear-gradient(
+          180deg,
+          rgb(163 144 69 / 53%) 0%,
+          rgb(105 95 42 / 18%) 10%,
+          rgb(98 88 38 / 0%) 13%
+        )
+        rgb(0 0 0 / 70%);
+      border: px-to-rem(1) solid rgb(110 103 78 / 90%);
+    }
+
+    .el-message-box__header {
+      background: none;
+
+      &::before {
+        background: url('../images/common/singleTabSel.png') no-repeat bottom
+          center / 100% auto;
+      }
+
+      &::after {
+        background: linear-gradient(
+          90deg,
+          rgb(228 231 193 / 0%),
+          rgb(228 231 193 / 100%),
+          rgb(228 231 193 / 0%)
+        );
+      }
+
+      .el-message-box__title {
+        text-shadow: px-to-rem(1) 0 px-to-rem(4) #dcd277;
+        color: #fff;
+      }
+
+      .el-message-box__headerbtn {
+        background: url('../images/common/close-gt.png') no-repeat center / 100%
+          100%;
+      }
+    }
+
+    .el-message-box__content {
+      .el-message-box__message {
+        color: #e4e7c1;
+      }
+    }
+
+    .el-message-box__btns {
+      .el-button {
+        background: rgb(100 86 46 / 71%);
+        border: px-to-rem(0.5) solid rgb(100 86 46 / 100%);
+        color: #e4e7c1;
+        line-height: px-to-rem(30);
+
+        &.el-button--primary {
+          background: radial-gradient(
+              circle at 50% -250%,
+              rgb(255 219 117 / 81%) 0%,
+              rgb(0 0 0 / 0%) 89%
+            ),
+            linear-gradient(
+              180deg,
+              rgb(255 224 72 / 34%) 0%,
+              rgb(255 241 126 / 10%) 100%
+            );
+          border: 0;
+          text-shadow: 0 px-to-rem(2) px-to-rem(7) rgb(255 225 44 / 50%);
+          line-height: px-to-rem(32);
+
+          &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('../images/common/btn_l_t.png') no-repeat left top,
+              url('../images/common/btn_l_b.png') no-repeat left bottom,
+              url('../images/common/btn_r_t.png') no-repeat right top,
+              url('../images/common/btn_r_b.png') no-repeat right bottom;
+            content: '';
+            pointer-events: none;
+          }
+        }
+      }
+    }
+  }
+  .event-pagination-popper {
+    background: rgba(23, 20, 11, 0.9);
+    .el-select-dropdown__wrap {
+      color: #e4e7c1;
+    }
+    .el-select-dropdown__item {
+      color: #e4e7c1;
+    }
+    .el-select-dropdown__item:hover {
+      background: rgba(122, 113, 61, 0.36);
+      color: #e4e7c1;
+    }
+    .el-select-dropdown__item.selected {
+      background: rgba(122, 113, 61, 0.36);
+      color: #fffa28;
+    }
+  }
+}

src/components/common-comp-emergency-events-inquiry/src/components/AddOrEditEmergencyEvent.vue

@@ -0,0 +1,901 @@
+<!--  新增、编辑事件  -->
+<template>
+  <base-dialog
+    class="alarm-transfer-event-add-box"
+    v-model="dialogShow"
+    :title="isEdit ? '编辑事件' : '新增事件'"
+    :width="860"
+    :height="852"
+    v-loading="dialogLoading"
+  >
+    <div class="popup-form-box">
+      <el-form
+        class="emergency-event-form"
+        :label-width="pxToRem(80)"
+        ref="addEventForm"
+        :rules="rules"
+        :model="eventForm"
+        :inline-message="true"
+      >
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="事件名称" prop="eventName">
+              <base-input
+                class="event-input-margin-jp"
+                v-model="eventForm.eventName"
+                placeholder="请输入"
+                :maxlength="20"
+              ></base-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="8">
+          <el-col :span="12">
+            <el-form-item label="事件等级" prop="eventGrade">
+              <base-select
+                class="event-level-select-jp"
+                v-model="eventForm.eventGrade"
+                :configs="{
+                  optionKey: 'dictValue',
+                  optionLabel: 'dictLabel'
+                }"
+                :options="enumeration.evenLevelList"
+                :popperToBody="true"
+              ></base-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="事发时间" prop="eventTime">
+              <base-datepicker
+                class="event-time-margin-jp"
+                type="datetime"
+                selfClass="event-time"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="请选择"
+                v-model="eventForm.eventTime"
+                :clearable="false"
+                disabledDate="future"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="事件类型" prop="eventType">
+              <base-select
+                class="event-type-select-jp"
+                popperClass="event-address-popper"
+                v-model="eventForm.eventTypeOne"
+                :configs="{
+                  optionKey: 'id',
+                  optionLabel: 'typeName'
+                }"
+                :options="enumeration.eventTypeOneList"
+                :popperToBody="true"
+              ></base-select>
+              <base-select
+                class="event-type-select-jp"
+                popperClass="event-address-popper"
+                v-model="eventForm.eventTypeTwo"
+                :configs="{
+                  optionKey: 'id',
+                  optionLabel: 'typeName'
+                }"
+                :options="enumeration.eventTypeTwoList"
+                :disabled="enumeration.eventTypeTwoList.length === 0"
+                :popperToBody="true"
+              ></base-select>
+              <base-select
+                class="event-type-select-right-jp"
+                popperClass="event-address-popper"
+                v-model="eventForm.eventTypeThree"
+                :configs="{
+                  optionKey: 'id',
+                  optionLabel: 'typeName'
+                }"
+                :options="enumeration.eventTypeThreeList"
+                :disabled="enumeration.eventTypeThreeList.length === 0"
+                :popperToBody="true"
+              ></base-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="事发地点" prop="eventAddress">
+              <base-select
+                class="event-address-select-jp"
+                v-model="province"
+                :configs="{
+                  optionKey: 'areaCode',
+                  optionLabel: 'areaName'
+                }"
+                :options="provinceList"
+                :popperToBody="true"
+              ></base-select>
+              <base-select
+                class="event-address-select-jp"
+                v-model="city"
+                :configs="{
+                  optionKey: 'areaCode',
+                  optionLabel: 'areaName'
+                }"
+                :options="cityList"
+                :popperToBody="true"
+              ></base-select>
+              <base-select
+                class="event-address-select-jp"
+                v-model="district"
+                :configs="{
+                  optionKey: 'areaCode',
+                  optionLabel: 'areaName'
+                }"
+                :options="districtList"
+                :popperToBody="true"
+              ></base-select>
+              <base-input
+                v-model="address"
+                placeholder="请输入"
+                class="event-address-input-jp"
+                v-c-tip="address"
+              ></base-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="经纬度" prop="eventPosition">
+              <base-input
+                class="event-position-input-jp"
+                v-model="longitude"
+                placeholder="经度"
+                @input="handleInput($event, 'longitude')"
+                @blur="getAddress"
+              ></base-input>
+              <base-input
+                class="event-position-input-jp"
+                v-model="latitude"
+                placeholder="纬度"
+                @input="handleInput($event, 'latitude')"
+                @blur="getAddress"
+              ></base-input>
+              <div class="event-position-btn">
+                <ct-icon
+                  name="location-active"
+                  color="inherit"
+                  size="18"
+                  @click="doMapShow"
+                ></ct-icon>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="事件描述" prop="eventDescribe">
+              <el-input
+                size="medium"
+                class="c-input c-textarea"
+                type="textarea"
+                maxlength="200"
+                show-word-limit
+                placeholder="请输入"
+                v-model="eventForm.eventDescribe"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input
+                size="medium"
+                class="c-input c-textarea"
+                type="textarea"
+                maxlength="200"
+                show-word-limit
+                placeholder="请输入"
+                v-model="eventForm.remark"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24" v-for="(item, index) in fileItems" :key="index">
+            <el-form-item
+              :label="item.label"
+              :prop="item.prop"
+              :class="item.class"
+            >
+              <template v-slot:label>
+                <i :class="item.iconClass" v-c-tip:top="item.tooltipContent" />
+                <span
+                  class="item-label"
+                  style="font-weight: 400"
+                  :style="item.labelStyle"
+                  >{{ item.label }}</span
+                >
+              </template>
+              <div :class="item.contentClass">
+                <base-upload
+                  :ref="item.ref"
+                  :fileType="item.fileType"
+                  :fileTypeMessage="item.fileTypeMessage"
+                  :limit="item.limit"
+                  v-model="eventForm[item.prop]"
+                ></base-upload>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="event-submit-btns">
+      <base-button
+        class="event-sub-btn-jp"
+        type="primary"
+        :height="32"
+        :width="108"
+        @click="confirm"
+      >
+        确定
+      </base-button>
+      <base-button :height="32" :width="108" @click="closeClick(false)">
+        取消
+      </base-button>
+    </div>
+    <!--  地图选点  -->
+    <map-selection
+      v-show="mapShow"
+      ref="mapSelection"
+      :show="mapShow"
+      :lng="longitude ? longitude : defaultCenter[1]"
+      :lat="latitude ? latitude : defaultCenter[0]"
+      @doMapOk="closeMapShow"
+      @mapBack="getMapBackData"
+    />
+  </base-dialog>
+</template>
+<script>
+import MapSelection from '../components/map/MapSelection.vue'
+import {
+  getMultipleDicts,
+  getRegion,
+  saveEvent,
+  updateEvent,
+  getEventType,
+  getEventDetail
+} from '../service/index'
+import { getNowDate } from '../utils/index'
+import { Input } from 'element-ui'
+import BaseDialog from '@component-gallery/base-components/base-dialog/BaseDialog.vue'
+import BaseInput from '@component-gallery/base-components/base-form-inner/base-input/BaseInput.vue'
+import BaseDatepicker from '@component-gallery/base-components/base-form-inner/base-datepicker/BaseDatepicker.vue'
+import BaseSelect from '@component-gallery/base-components/base-form-inner/base-select/BaseSelect.vue'
+import BaseButton from '@component-gallery/base-components/base-button/BaseButton.vue'
+import BaseUpload from '@component-gallery/base-components/base-form-inner/base-upload/BaseUpload.vue'
+import CommonMessage from '@component-gallery/utils/funCommon/message/common-message'
+import '@component-gallery/utils/funCommon/tooltip/directive'
+import { fileItems } from '../utils/data'
+export default {
+  name: 'add-or-edit-emergency-event',
+  components: {
+    [Input.name]: Input,
+    BaseDialog,
+    BaseInput,
+    BaseDatepicker,
+    BaseSelect,
+    BaseButton,
+    BaseUpload,
+    MapSelection
+  },
+  props: {
+    isEdit: {
+      type: Boolean, // 告警信息
+      default: false
+    },
+    eventCode: {
+      type: String, // 告警信息
+      default: ''
+    }
+  },
+  computed: {
+    //表单校验规则
+    rules() {
+      return {
+        eventName: [
+          { required: true, message: '事件名称不能为空', trigger: 'blur' }
+        ],
+        eventGrade: [
+          { required: true, message: '事件等级不能为空', trigger: 'change' }
+        ],
+        eventTime: [
+          { required: true, message: '事发时间不能为空', trigger: 'blur' }
+        ],
+        eventType: [
+          {
+            validator: (r, v, clb) => {
+              let cond1 =
+                !this.eventForm.eventTypeOne &&
+                this.enumeration.eventTypeOneList.length > 0
+              let cond2 =
+                !this.eventForm.eventTypeTwo &&
+                this.enumeration.eventTypeTwoList.length > 0
+              let cond3 =
+                !this.eventForm.eventTypeThree &&
+                this.enumeration.eventTypeThreeList.length > 0
+              if (cond1 || cond2 || cond3) {
+                clb('事件类型不能为空')
+              }
+              clb()
+            },
+            trigger: ['blur', 'change'],
+            required: true
+          }
+        ],
+        eventAddress: [
+          {
+            validator: (r, v, clb) => {
+              if (!this.address) {
+                clb('事件地址不能为空')
+              }
+              clb()
+            },
+            trigger: ['blur', 'change'],
+            required: true
+          }
+        ],
+        eventPosition: [
+          {
+            validator: (r, v, clb) => {
+              if (!this.longitude || !this.latitude) {
+                clb('经纬度不能为空')
+              }
+              const latitudeReg =
+                /^([-+])?([0-8]?\d\.\d{0,6}|90\.0{0,6}|[0-8]?\d|90)$/
+              if (!latitudeReg.test(this.latitude)) {
+                clb('纬度范围为-90到90，最多6位小数')
+              }
+              const longitudeReg =
+                /^([-+])?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/
+              if (!longitudeReg.test(this.longitude)) {
+                clb('经度范围为-180到180，最多6位小数')
+              }
+              clb()
+            },
+            trigger: ['blur', 'change'],
+            required: true
+          }
+        ],
+        eventDescribe: [
+          { required: true, message: '事件描述不能为空', trigger: 'blur' }
+        ],
+        imgList: [{ message: '请上传图片', required: true }],
+        videoList: [{ message: '请上传视频', required: true }]
+      }
+    }
+  },
+  data() {
+    return {
+      dialogLoading: false,
+      dialogShow: true,
+      //附件数据
+      fileItems: fileItems,
+      // 新增事件表单数据
+      eventForm: {
+        eventName: '', //事件名称
+        eventGrade: '', //事件等级
+        eventTime: '', //发生时间
+        eventTypeOne: '', //事件类型1
+        eventTypeTwo: '', //事件类型2
+        eventTypeThree: '', //事件类型3
+        eventDescribe: '', //事件描述
+        remark: '', //备注
+        imgList: [], //图片
+        videoList: [], //视频
+        audioList: [], //音频
+        fileList: [] //文档
+      },
+      eventTypeTree: [], //类型树
+      //事件等级枚举
+      enumeration: {
+        //事件等级
+        evenLevelList: [],
+        //事件类型1
+        eventTypeOneList: [],
+        //事件类型2
+        eventTypeTwoList: [],
+        //事件类型3
+        eventTypeThreeList: []
+      },
+      //地址
+      areaCodes: [],
+      provinceList: [], //省份列表
+      province: '', //选择的省份
+      provinceBack: '', //回填的省份
+      cityList: [], //地市列表
+      city: '', //选择的地市
+      cityBack: '', //回填的地市
+      districtList: [], //区县列表
+      district: '', //选择的区县
+      districtBack: '', //回填的区县
+      longitude: '',
+      latitude: '',
+      address: '', //详细地址
+      defaultCenter: [39.907759, 116.391185],
+      mapShow: false,
+      detailInfo: null, // 用于保存事件详情数据
+      eventTypeTwoback: '', //事件类型2回显数据
+      eventTypeThreeback: '' //事件类型3回显数据
+    }
+  },
+  watch: {
+    /**
+     * 监听dialog关闭
+     */
+    'dialogShow'(val) {
+      if (!val) {
+        this.closeClick()
+      }
+    },
+    /**
+     * 监听选择省份
+     */
+    'province'(val) {
+      this.cityList = []
+      this.city = ''
+      this.districtList = []
+      this.district = ''
+      if (val) {
+        this.getCity(val)
+      }
+    },
+    /**
+     * 监听选择地市
+     */
+    'city'(val) {
+      this.districtList = []
+      this.district = ''
+      if (val) {
+        this.getdistrict(val)
+      }
+    },
+    'eventForm.eventTypeOne': {
+      handler(val) {
+        if (val) {
+          this.eventForm.eventTypeTwo = ''
+          this.eventForm.eventTypeThree = ''
+          this.enumeration.eventTypeTwoList = []
+          this.enumeration.eventTypeThreeList = []
+          this.getEventTypeList(1, val)
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    'eventForm.eventTypeTwo': {
+      handler(val) {
+        if (val) {
+          this.eventForm.eventTypeThree = ''
+          this.enumeration.eventTypeThreeList = []
+          this.getEventTypeList(2, val)
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    'eventForm.imgList': {
+      handler(val) {
+        if (val) {
+          this.$refs.addEventForm.validateField('imgList')
+        }
+      },
+      deep: true // 深度监听
+    },
+    'eventForm.videoList': {
+      handler(val) {
+        if (val) {
+          this.$refs.addEventForm.validateField('videoList')
+        }
+      },
+      deep: true // 深度监听
+    }
+  },
+  mounted() {
+    this.eventForm.eventTime = getNowDate()
+    this.getEventLevel() //获取事件等级
+    this.getProvince() //获取省份
+    if (this.isEdit && this.eventCode) {
+      this.dialogLoading = true
+    }
+    this.getEventTypeTree() //获取事件类型树
+  },
+  methods: {
+    /**
+     * 获取事件详情（编辑事件时使用）
+     */
+    getEventDetail() {
+      getEventDetail(this.eventCode)
+        .then((res) => {
+          if (res.code === 200 && res.data) {
+            this.detailInfo = res.data
+            // 处理事件详情数据回显
+            this.getEventData(res.data)
+          }
+        })
+        .catch((err) => {
+          CommonMessage.error(err?.msg || '请求失败')
+          this.dialogLoading = false
+        })
+    },
+    /**
+     * 获取事件等级
+     */
+    getEventLevel() {
+      getMultipleDicts(['emergency_event_grade']).then((res) => {
+        this.enumeration.evenLevelList = res.data['emergency_event_grade']
+      })
+    },
+    /**
+     * 获取事件类型
+     */
+    getEventTypeTree() {
+      let type = 2
+      getEventType(type)
+        .then((res) => {
+          if (res.code === 200) {
+            this.eventTypeTree = res.data
+            this.enumeration.eventTypeOneList = []
+            this.enumeration.eventTypeTwoList = []
+            this.enumeration.eventTypeThreeList = []
+            this.getEventTypeList(0)
+            if (this.isEdit && this.eventCode) {
+              //编辑获取详情
+              this.getEventDetail()
+            } else {
+              this.eventTypeTwoback = ''
+              this.eventTypeThreeback = ''
+            }
+          }
+        })
+        .catch((err) => {
+          CommonMessage.error(err?.msg || '请求失败')
+          this.dialogLoading = false
+        })
+    },
+    /**
+     * 经纬度输入限制
+     * 经度：-180~180  纬度 -90~90
+     * 小数点后六位校验
+     */
+    handleInput(value, type) {
+      let reg = /^([-+])?([0-8]?\d\.\d{0,6}|90\.0{0,6}|[0-8]?\d|90)$/
+      if (type === 'longitude') {
+        reg =
+          /^([-+])?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/
+      }
+      if (reg.test(value) || value === '' || value === '-') {
+        //符合正则校验
+        this.$data[type] = value
+        this.$data[`${type}_old`] = value
+      } else {
+        // 本次输入不符合正则校验，则还原为上一次输入正确的值
+        this.$data[type] = this.$data[`${type}_old`] || ''
+      }
+    },
+    /**
+     * 获取三层级联事件类型
+     * todo 优化使用switch
+     */
+    getEventTypeList(index, parentId) {
+      let list = this.dealLevelTreeToList(this.eventTypeTree)[index]
+      const filteredList = list.filter((item) => item.parentId === parentId)
+      switch (index) {
+        case 0:
+          //第一层级联
+          this.enumeration.eventTypeOneList = list
+          break
+        case 1:
+          //第二层级联
+          this.enumeration.eventTypeTwoList = filteredList
+          this.eventTypeTwoBackFun()
+          break
+        case 2:
+          //第三层级联
+          this.enumeration.eventTypeThreeList = filteredList
+          this.eventTypeThreeBackFun()
+          break
+      }
+    },
+    /**
+     * 二级类型编辑回显
+     */
+    eventTypeTwoBackFun() {
+      if (this.eventTypeTwoback !== '') {
+        this.eventForm.eventTypeTwo = this.detailInfo?.eventTypeMiddleCategory
+        this.eventTypeTwoback = ''
+      }
+    },
+    /**
+     * 三级类型编辑回显
+     */
+    eventTypeThreeBackFun() {
+      if (this.eventTypeThreeback !== '') {
+        this.eventForm.eventTypeThree = this.detailInfo?.eventTypeSmallCategory
+        this.eventTypeThreeback = ''
+      }
+    },
+    /**
+     * 处理树型结构数据 tree => {[],[],[]}
+     */
+    dealLevelTreeToList(tree, levels = [], level = 0) {
+      if (!levels[level]) {
+        levels[level] = []
+      }
+      for (const node of tree) {
+        levels[level].push(node)
+        if (node.children?.length > 0) {
+          this.dealLevelTreeToList(node.children, levels, level + 1)
+        }
+      }
+      return levels
+    },
+    /**
+     * 查询行政区划 省份
+     */
+    getProvince() {
+      this.province = ''
+      getRegion({ areaLevel: '2' }).then((resp) => {
+        if (resp.code !== 200) {
+          return
+        }
+        this.provinceList = resp.data || []
+        if (this.provinceBack) {
+          for (let i in this.provinceList) {
+            if (this.provinceList[i].areaName === this.provinceBack) {
+              this.province = this.provinceList[i].areaCode
+              this.areaCodes = []
+              this.areaCodes.push(this.province)
+              break
+            }
+          }
+        }
+      })
+    },
+    /**
+     * 查询行政区划 地市
+     */
+    getCity(parentCode) {
+      getRegion({ areaLevel: '3', areaParentCode: parentCode }).then((resp) => {
+        if (resp.code !== 200) {
+          return
+        }
+        this.cityList = resp.data || []
+        if (this.cityBack) {
+          for (let i in this.cityList) {
+            if (this.cityList[i].areaName === this.cityBack) {
+              this.city = this.cityList[i].areaCode
+              this.areaCodes.push(this.city)
+              break
+            }
+          }
+        }
+      })
+    },
+    /**
+     * 查询行政区划 区县
+     */
+    getdistrict(parentCode) {
+      getRegion({ areaLevel: '4', areaParentCode: parentCode }).then((resp) => {
+        if (resp.code !== 200) {
+          return
+        }
+        this.districtList = resp.data || []
+        if (this.districtBack) {
+          for (let i in this.districtList) {
+            if (this.districtList[i].areaName === this.districtBack) {
+              this.district = this.districtList[i].areaCode
+              this.areaCodes.push(this.district)
+              break
+            }
+          }
+        }
+      })
+    },
+    /**
+     * 处理事件详情数据
+     */
+    getEventData(data) {
+      this.eventForm.eventName = data.eventName
+      this.eventForm.eventTime = data.eventTime
+      this.eventForm.eventGrade = data.eventGradeDict.toString()
+      this.eventForm.eventDescribe = data.eventDescribe
+      this.eventForm.eventTypeOne = data.eventTypeLargeCategory
+      // 用于类别2、3回显
+      this.eventTypeTwoback = data.eventTypeMiddleCategory
+      this.eventTypeThreeback = data.eventTypeSmallCategory
+      this.eventForm.remark = data.remark
+      this.province = data.provinceCode
+      this.city = data.cityCode
+      this.district = data.countryCode
+      // 用于省市区回显
+      this.provinceBack = data.province
+      this.cityBack = data.city
+      this.districtBack = data.country
+      this.address = data.specificLocation
+      this.longitude = data.longitude
+      this.latitude = data.latitude
+      // 处理附件回显
+      this.eventForm.imgList = this.getAccessoryList(data.imgUrlList || [])
+      this.eventForm.videoList = this.getAccessoryList(data.videoUrlList || [])
+      this.eventForm.audioList = this.getAccessoryList(data.audioUrlList || [])
+      this.eventForm.fileList = this.getAccessoryList(data.fileUrlList || [])
+      this.dialogLoading = false
+    },
+    /**
+     * 获取附件数据（图片、视频、音频、文档）
+     */
+    getAccessoryList(list) {
+      let arr = []
+      list.forEach((item) => {
+        let it = {
+          fileUrl: item.originUrl,
+          fileName: item.fileName,
+          fileSuffix: item.fileSuffix,
+          originUrl: item.originUrl
+        }
+        arr.push(it)
+      })
+      return arr
+    },
+    /**
+     * 显示地图
+     */
+    doMapShow() {
+      this.mapShow = true
+    },
+    /**
+     * 经纬度失焦获取地址信息
+     */
+    getAddress() {
+      if (this.longitude && this.latitude) {
+        this.$refs.mapSelection.getAddress(this.longitude, this.latitude, true)
+      }
+    },
+    /**
+     * 接收地图返回信息
+     */
+    getMapBackData(backData) {
+      this.provinceBack = backData.provinceBack
+      this.cityBack = backData.cityBack
+      this.districtBack = backData.districtBack
+      this.address = backData.address
+      this.longitude = backData.longitude
+      this.latitude = backData.latitude
+      this.getProvince()
+      this.closeMapShow()
+    },
+    /**
+     * 关闭地图
+     */
+    closeMapShow() {
+      this.mapShow = false
+    },
+    /**
+     * 新增事件弹窗关闭，取消
+     */
+    closeClick() {
+      this.$emit('closeDialog')
+    },
+    /**
+     * 提交表单
+     */
+    confirm() {
+      let params = {
+        eventName: this.eventForm.eventName,
+        eventGradeDict: this.eventForm.eventGrade,
+        eventTime: this.eventForm.eventTime,
+        eventTypeLargeCategory: this.eventForm.eventTypeOne,
+        eventTypeMiddleCategory: this.eventForm.eventTypeTwo,
+        eventTypeSmallCategory: this.eventForm.eventTypeThree,
+        eventDescribe: this.eventForm.eventDescribe,
+        remark: this.eventForm.remark,
+        imgUrlList: this.eventForm.imgList,
+        videoUrlList: this.eventForm.videoList,
+        audioUrlList: this.eventForm.audioList,
+        fileUrlList: this.eventForm.fileList,
+        provinceCode: this.province,
+        cityCode: this.city,
+        countryCode: this.district,
+        specificLocation: this.address,
+        longitude: this.longitude,
+        latitude: this.latitude,
+        status: 1 // 默认1 未处置
+      }
+      if (this.isEdit) {
+        params.eventCode = this.eventCode
+      }
+      let isUploading = false
+      const hasFileUrl = (list) => list.some((item) => !item.fileUrl)
+      isUploading =
+        hasFileUrl(this.eventForm.imgList) ||
+        hasFileUrl(this.eventForm.videoList) ||
+        hasFileUrl(this.eventForm.audioList) ||
+        hasFileUrl(this.eventForm.fileList)
+      // 校验附件是否全部上传完成
+      if (isUploading) {
+        CommonMessage.error('附件上传中，请稍后再试')
+        return false
+      }
+      // todo 优化
+      this.$refs.addEventForm.validate((valid) => {
+        if (!valid) {
+          return
+        }
+        this.isEdit ? this.uploadSubmit(params) : this.saveSubmit(params)
+      })
+    },
+    /**
+     * 新增事件
+     */
+    saveSubmit(params) {
+      saveEvent(params)
+        .then((res) => {
+          if (res.code === 200) {
+            CommonMessage.success(res.msg)
+            this.$emit('updateTableData')
+            this.closeClick()
+          }
+        })
+        .catch((err) => {
+          CommonMessage.error(err?.msg)
+        })
+    },
+    /**
+     * 编辑事件
+     */
+    uploadSubmit(params) {
+      updateEvent(params)
+        .then((res) => {
+          if (res.code === 200) {
+            CommonMessage.success(res.msg)
+            this.$emit('updateTableData')
+            this.closeClick()
+          }
+        })
+        .catch((err) => {
+          CommonMessage.error(err?.msg)
+        })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '~@component-gallery/theme-chalk/src/emergency-events-inquiry/add-or-edit-emergency-event.scss';
+</style>
+<style lang="scss">
+@import '~@component-gallery/theme-chalk/src/mixins/px-to-rem';
+
+.common-iw-s.event-time.el-date-picker.el-picker-panel.el-popper[x-placement^='top'] {
+  width: px-to-rem(248) !important;
+  .el-date-picker__time-header {
+    border-bottom: px-to-rem(1) solid
+      var(--common-base-data-picker__border-bottom-color) !important;
+  }
+}
+.event-time {
+  .el-time-spinner__item {
+    height: 32px !important;
+    line-height: 32px !important;
+  }
+  .el-time-panel__content::after,
+  .el-time-panel__content::before {
+    height: 32px !important;
+  }
+}
+.event-address-popper.el-select-dropdown {
+  .iclass-text-ellipsis {
+    max-width: px-to-rem(230);
+  }
+}
+</style>

src/components/common-comp-emergency-events-inquiry/src/components/map/AmapSearchBox.vue

@@ -0,0 +1,380 @@
+<template>
+  <div
+    class="el-vue-search-box"
+    :style="{
+      'border-radius':
+        searchSize === 'normal' || searchSize === 'newNormal'
+          ? pxToRem(4)
+          : pxToRem(2)
+    }"
+    @keydown.up="selectTip('up')"
+    @keydown.down="selectTip('down')"
+  >
+    <div
+      class="search-box-wrapper"
+      :style="{
+        'height':
+          searchSize === 'normal'
+            ? pxToRem(40)
+            : searchSize === 'newNormal'
+            ? pxToRem(32)
+            : pxToRem(24),
+        'border-radius':
+          searchSize === 'normal' || searchSize === 'newNormal'
+            ? pxToRem(4)
+            : pxToRem(2)
+      }"
+    >
+      <el-input
+        type="text"
+        v-model="keyword"
+        @keyup.enter="autoComplete"
+        class="search-input-new"
+        :style="{
+          'font-size':
+            searchSize === 'normal' || searchSize === 'newNormal'
+              ? pxToRem(14)
+              : pxToRem(12),
+          'line-height': 1
+        }"
+        @input="autoComplete"
+        @change="changeInput"
+        @clear="clearInput"
+        @blur="blurInput"
+        clearable
+        placeholder="请输入关键字"
+      />
+      <div
+        class="search-btn iconfont icon-sousuo"
+        :style="{
+          'width':
+            searchSize === 'normal' || searchSize === 'newNormal'
+              ? pxToRem(48)
+              : pxToRem(29),
+          'font-size':
+            searchSize === 'normal' || searchSize === 'newNormal'
+              ? pxToRem(16)
+              : pxToRem(14),
+          'border-radius':
+            searchSize === 'normal' || searchSize === 'newNormal'
+              ? `0 ${pxToRem(4)} ${pxToRem(4)} 0`
+              : `0 ${pxToRem(2)} ${pxToRem(2)} 0`
+        }"
+        @click="autoComplete"
+      ></div>
+    </div>
+    <div
+      class="search-tips"
+      :style="{ 'max-height': pxToRem(maxHeight.split('px')[0] || 0) }"
+      v-if="tips.length"
+    >
+      <ul>
+        <li
+          v-for="(item, index) in tips"
+          :key="index"
+          @mousedown="changeTip(item)"
+          @mouseover="selectedTip = index"
+          :c-tip="item.alias"
+          class="search-tips-li"
+          :class="{ 'autocomplete-selected': index === selectedTip }"
+          v-html="searchName(item.alias)"
+        >
+          <span
+            class="auto-item-span"
+            v-if="item.region?.province === item.region?.city"
+            :c-tip="item.region?.province + item.region?.county"
+            >{{ item.region?.province + item.region?.county }}</span
+          >
+          <span
+            class="auto-item-span"
+            v-if="item.region?.province !== item.region?.city"
+            :c-tip="
+              item.region?.province + item.region?.city + item.region?.county
+            "
+            >{{
+              item.region?.province + item.region?.city + item.region?.county
+            }}</span
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import CTMapOl from '@ct/ct_map_ol'
+import { keyWordQueryPoi, poiContraryGeocodingQuery } from '../../service'
+import $ from 'jquery'
+import CommonMessage from '@component-gallery/utils/funCommon/message/common-message'
+import { Input } from 'element-ui'
+
+export default {
+  name: 'amap-search-box',
+  components: {
+    [Input.name]: Input
+  },
+  props: {
+    onSearchResult: {
+      type: Function, // 指定类型为函数
+      default: () => {
+        // 设置默认值为一个空函数
+        console.log('onSearchResult default')
+      }
+    },
+    adCode: {
+      type: String, // 指定类型为字符串
+      default: '' // 设置默认值为字符串
+    },
+    maxHeight: {
+      type: String,
+      default: '400px'
+    },
+    searchSize: {
+      type: String,
+      default: 'normal'
+    },
+    mapId: {
+      type: String,
+      default: ''
+    },
+    mapRef: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      keyword: '',
+      tips: [],
+      selectedTip: -1
+    }
+  },
+  computed: {
+    searchName() {
+      return function (name) {
+        console.log(name)
+        if (!name) {
+          return ''
+        } else {
+          let targetName = this.keyword
+          let index = name.indexOf(targetName)
+          if (index !== -1 && targetName !== '') {
+            return name.replace(
+              targetName,
+              `<span class='key-words'>${targetName}</span>`
+            )
+          }
+          return name
+        }
+      }
+    }
+  },
+  methods: {
+    /**
+     * 检索
+     */
+    autoComplete() {
+      if (!this.keyword) {
+        return
+      }
+      const mapRef = this.mapRef.getMapRef(this.mapId)
+      const mapViewerStatus = CTMapOl.ViewControl.common.getViewerStatus({
+        mapRef
+      })
+      const center = mapViewerStatus.center
+      poiContraryGeocodingQuery({ location: `${center[0]},${center[1]}` }).then(
+        (resp) => {
+          console.log('经纬度转地址的返回', resp)
+          const cityCode = resp?.data[0]?.region?.cityCode
+          this.getkeyWordQueryPoi(cityCode)
+        }
+      )
+    },
+    getkeyWordQueryPoi(cityCode) {
+      keyWordQueryPoi({
+        keyWord: this.keyword,
+        pageSize: '10',
+        pageNum: '1',
+        adCode: cityCode
+      }).then((resp) => {
+        this.tips = resp.data?.list || []
+        console.log(this.tips)
+        if (this.tips.length > 0) {
+          let a = $('#map').height() - 100
+          console.log('mapde高度-------------', a)
+          $('.search-tips').css({ height: a })
+          $('.search-tips').css({ display: 'block' })
+        }
+      })
+    },
+    getAddress(lng, lat) {
+      let location = lng + ',' + lat
+      poiContraryGeocodingQuery({ location: location }).then((resp) => {
+        console.log('经纬度转地址的返回', resp)
+        if (resp.code === 200 && resp.data.length > 0) {
+          const LngLats = {
+            lng: lng,
+            lat: lat,
+            name: resp.data[0].address,
+            address: resp.data[0].address
+          }
+          this.onSearchResult(LngLats)
+          this.keyword = resp.data[0].address
+          this.tips = []
+        } else {
+          CommonMessage.error(resp)
+        }
+      })
+    },
+    /**
+     * 定位
+     */
+    changeTip(tip) {
+      let lng = tip?.pois[0]?.location.split(',')[0]
+      let lat = tip?.pois[0]?.location.split(',')[1]
+      this.getAddress(lng, lat)
+    },
+    selectTip(type) {
+      if (type === 'up' && this.selectedTip > 0) {
+        this.selectedTip -= 1
+        this.keyword = this.tips[this.selectedTip].alias
+      } else {
+        if (type === 'down' && this.selectedTip + 1 < this.tips.length) {
+          this.selectedTip += 1
+          this.keyword = this.tips[this.selectedTip].alias
+        }
+      }
+    },
+    changeInput() {
+      this.$emit('changeInput')
+    },
+
+    clearInput() {
+      $('.search-tips').css({ display: 'none' })
+      console.log('%c █░░░░░░░░░░░░█ ,清空回调', 'color: #FAC800')
+      this.$emit('clearInput')
+    },
+    blurInput() {
+      $('.search-tips').css({ display: 'none' })
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '@component-gallery/theme-chalk/src/mixins/px-to-rem';
+
+.el-vue-search-box {
+  position: relative !important;
+  z-index: 10;
+  background: transparent;
+
+  .search-box-wrapper {
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: #fff;
+    box-shadow: 0 1px px-to-rem(4) 0 rgb(0 0 0 / 8%);
+    box-sizing: border-box;
+    line-height: 100%;
+
+    input {
+      height: px-to-rem(20);
+      border: none;
+      outline: none;
+      font-size: px-to-rem(14);
+      text-indent: px-to-rem(10);
+      flex: 1;
+      line-height: px-to-rem(20);
+      letter-spacing: 0.5px;
+      box-sizing: border-box;
+    }
+
+    ::v-deep .el-input__inner {
+      text-indent: 0 !important;
+    }
+
+    .el-input__suffix {
+      top: px-to-rem(-5);
+    }
+
+    .search-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: px-to-rem(48);
+      height: 100%;
+      background: #ff6a6c !important;
+      border-radius: 0 px-to-rem(4) px-to-rem(4) 0;
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+
+  .search-tips {
+    top: 100%;
+    overflow: hidden auto;
+    margin-top: px-to-rem(4);
+    width: 100%;
+    background: #fff;
+    border-radius: px-to-rem(4);
+    box-shadow: 0 px-to-rem(2) px-to-rem(5) rgb(0 0 0 / 15%);
+
+    ul {
+      padding: 0;
+      margin: 0;
+
+      li {
+        overflow: hidden;
+        padding: 0 px-to-rem(10);
+        height: px-to-rem(40);
+        box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: px-to-rem(40);
+        cursor: pointer;
+
+        &.autocomplete-selected {
+          background: #eee;
+        }
+      }
+    }
+  }
+
+  .auto-item-span {
+    padding-left: px-to-rem(4);
+    color: #c1c1c1 !important;
+  }
+
+  .search-box-wrapper .el-icon-circle-close {
+    line-height: px-to-rem(32) !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+@import '@component-gallery/theme-chalk/src/mixins/px-to-rem';
+
+::v-deep input::placeholder,
+textarea::placeholder {
+  opacity: 0.7 !important;
+  color: #fff !important;
+}
+
+.search-input-new {
+  line-height: 1;
+}
+
+.search-box-wrapper ::v-deep .search-input-new .el-input__inner {
+  padding-left: 0;
+  font-size: px-to-rem(14);
+}
+
+.search-box-wrapper ::v-deep .search-input-new input {
+  &::placeholder {
+    color: #909399 !important;
+    font-size: px-to-rem(14);
+  }
+}
+</style>

src/components/common-comp-emergency-events-inquiry/src/components/map/MapSelection.vue

@@ -0,0 +1,412 @@
+<!--  告警转事件  -->
+<template>
+  <div class="alarm-transfer-event-map-box">
+    <!--  地图选点  -->
+    <div class="c-popup">
+      <div class="popup-body">
+        <i class="popup-close" @click="doMapOk()"></i>
+        <div class="popup-header"><span>经纬度</span></div>
+        <div class="popup-content map-height">
+          <div class="map-div">
+            <amap-search-box
+              :on-search-result="onMapSearchResult"
+              class="search-box"
+              :maxHeight="pxToRem(320)"
+              :mapId="mapId"
+              :mapRef="mapRef"
+            ></amap-search-box>
+            <d-map
+              :mapId="mapId"
+              :defaultTileMode="0"
+              :resolveEventName="mapEvent"
+              :listenGlobalEvent="false"
+              :tileModes="[0, 1]"
+              ondragstart="return false"
+            />
+          </div>
+          <!--       确定/取消       -->
+          <div class="event-submit-btns" style="z-index: 12">
+            <div class="item main c-button on" @click="doMapOk(1)">
+              <b />
+              确定
+              <b />
+            </div>
+            <div class="item secondary c-button" @click="doMapOk()">
+              <b />
+              取消
+              <b />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import CTMapOl from '@ct/ct_map_ol'
+import DMap from '@component-gallery/map'
+import AmapSearchBox from './AmapSearchBox.vue'
+import positionIcon from '../../assets/images/position-one.png' //点标记图标
+import CommonMessage from '@component-gallery/utils/funCommon/message/common-message'
+import { poiContraryGeocodingQuery, getRegion } from '../../service/index'
+import eventPath from '@component-gallery/build-event-bus-path'
+
+let mapMark = null
+
+export default {
+  name: 'map-selection',
+  inject: ['mapRef'],
+  components: {
+    [DMap.name]: DMap,
+    AmapSearchBox
+  },
+  props: {
+    lng: {
+      type: [String, Number],
+      default: ''
+    },
+    lat: {
+      type: [String, Number],
+      default: ''
+    },
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      //地图相关
+      mapId: 'eventMapSelection',
+      mapEvent: `${eventPath.commonCompMap}__init-event-map-selection`,
+      map: null,
+      defaultProps: {
+        value: 'areaCode',
+        label: 'areaName',
+        level: 'areaLevel',
+        lazy: true,
+        lazyLoad(node, resolve) {
+          setTimeout(() => {
+            if (node && node.data && node.data.areaLevel) {
+              getRegion({
+                areaLevel: parseInt(node.data.areaLevel) + 1,
+                areaParentCode: node.data.areaCode
+              }).then((res) => {
+                if (res.code === 200) {
+                  const nodes = res.data.map((item) => ({
+                    areaCode: item.areaCode,
+                    areaName: item.areaName,
+                    areaLevel: item.areaLevel,
+                    leaf: item.areaLevel >= 4
+                  }))
+                  resolve(nodes)
+                }
+              })
+            }
+          }, 200)
+        }
+      },
+      provinceBack: '', //回填的省份
+      cityBack: '', //回填的地市
+      districtBack: '', //回填的区县
+      address: '', //详细地址
+      longitude: '',
+      latitude: '',
+      centers: [116.384587, 39.910934], //高德地图默认中心点
+      mapSearchOption: {
+        city: '全国',
+        citylimit: true
+      },
+      placeSearch: null,
+      geocoder: {
+        lng: null,
+        lat: null
+      }, //坐标点转地址
+      backReady: false, //是否成功获取到地址信息
+      adCode: ''
+    }
+  },
+  watch: {
+    /**
+     * 监听地图开启状态
+     */
+    show(b) {
+      if (b) {
+        this.initDefaultMarker()
+      }
+    }
+  },
+  mounted() {
+    this.$globalEventBus.$on(this.mapEvent, this.initData)
+  },
+  beforeDestroy() {
+    this.$globalEventBus.$off(this.mapEvent, this.initData)
+  },
+  methods: {
+    /**
+     * 初始化地图数据
+     * @param payload
+     */
+    initData(payload) {
+      const { status, mapId } = payload
+      if (this.mapId === mapId) {
+        if (status) {
+          this.openClickMap()
+        }
+      }
+    },
+    /**
+     * 初始化默认点位
+     */
+    initDefaultMarker() {
+      if (this.lng && this.lat) {
+        let e = {
+          lng: this.lng,
+          lat: this.lat
+        }
+        this.onMapSearchResult(e)
+      }
+    },
+    lnglatTofixed6() {
+      if (this.longitude) {
+        this.longitude = Number(this.longitude).toFixed(6)
+      }
+      if (this.latitude) {
+        this.latitude = Number(this.latitude).toFixed(6)
+      }
+    },
+    onMapSearchResult(e) {
+      this.setZoomAndCenter(Number(e.lng), Number(e.lat), 16)
+      this.doMarker(e.lng, e.lat)
+    },
+
+    /**
+     * 地图确定
+     */
+    doMapOk(type) {
+      if (type) {
+        if (this.backReady) {
+          this.addressBack()
+        } else {
+          CommonMessage.error('地图信息加载中，请稍候')
+          console.log('/gis/gis/poi/poiContraryGeocodingQuery 接口调用失败')
+        }
+      } else {
+        this.$emit('doMapOk')
+      }
+    },
+    /**
+     * 地址选点打点
+     */
+    doMarker(lng, lat) {
+      this.clearMarker()
+      const ele = document.querySelector('.search-tips')
+      if (ele) {
+        ele.style.display = 'none'
+      }
+      if (!lng || !lat) {
+        return false
+      }
+      this.showOneMark(lng, lat)
+      this.getAddress(lng, lat)
+    },
+    showOneMark(longitude, latitude) {
+      let map = this.mapRef.getMapRef(this.mapId)
+      let marker = CTMapOl.DataSourceControl.common.addSingleMarkerDataSource(
+        {
+          mapRef: map,
+          coord: [Number(+longitude), Number(+latitude)]
+        },
+        {
+          normalstyle: {
+            textstyle: {
+              text: '',
+              font: '',
+              scale: 0,
+              textAlign: '',
+              offset: [0, 0],
+              fontstyle: {
+                fillColor: '',
+                fillTransparency: 0,
+                strokeColor: '',
+                strokeWidth: 0,
+                strokeTransparency: 0
+              },
+              backgroundstyle: {
+                fillColor: '',
+                fillTransparency: 0,
+                strokeColor: '',
+                strokeWidth: 0,
+                strokeTransparency: 0
+              }
+            },
+            imagestyle: {
+              src: positionIcon,
+              width: 32,
+              height: 32,
+              opacity: 1,
+              rotation: 0,
+              anchorOrigin: '',
+              offset: [0, -16]
+            }
+          },
+          selectlstyle: {
+            textstyle: {
+              text: '',
+              font: '',
+              scale: 0,
+              textAlign: '',
+              offset: [0, 0],
+              fontstyle: {
+                fillColor: '',
+                fillTransparency: 0,
+                strokeColor: '',
+                strokeWidth: 0,
+                strokeTransparency: 0
+              },
+              backgroundstyle: {
+                fillColor: '',
+                fillTransparency: 0,
+                strokeColor: '',
+                strokeWidth: 0,
+                strokeTransparency: 0
+              }
+            },
+            imagestyle: {
+              src: positionIcon,
+              width: 32,
+              height: 32,
+              opacity: 1,
+              rotation: 0,
+              anchorOrigin: '',
+              offset: [0, -16]
+            }
+          },
+          props: { id: '1', type: 'point', name: 'point' },
+          zIndex: 9000,
+          selectzIndex: 9100,
+          onSelectFunc: () => {
+            console.log('1')
+          },
+          onUnselectFunc: () => {
+            console.log('2')
+          }
+        }
+      )
+      // this.setZoomAndCenter(longitude, latitude, 13)
+      mapMark = marker
+    },
+    /**
+     * 删除打点
+     */
+    clearMarker() {
+      if (!mapMark) {
+        return
+      }
+      let map = this.mapRef.getMapRef(this.mapId)
+      CTMapOl.DataSourceControl.common.removeSingleDataSource(
+        { mapRef: map },
+        mapMark
+      )
+      mapMark = null
+    },
+    /**
+     * 坐标获取地址
+     */
+    getAddress(lon, lat, type) {
+      if (!lon || !lat) {
+        return false
+      }
+      this.backReady = false
+      const params = {
+        location: lon + ',' + lat
+      }
+      poiContraryGeocodingQuery(params).then((res) => {
+        if (res.code === 200) {
+          this.backReady = true
+          this.geocoder = res.data
+          console.log(
+            '%c 坐标获取地址 %c geocoder ',
+            'background:linear-gradient(to right, #345678, #567879); padding: 4px; color:#FFF',
+            'background:#23D4FD; padding:4px; color:#FFF',
+            this.geocoder
+          )
+          this.geocoder.lng = lon
+          this.geocoder.lat = lat
+          this.adCode = res.data[0].region.cityCode
+          if (type) {
+            this.addressBack()
+          }
+        } else {
+          CommonMessage.auto(res)
+        }
+      })
+    },
+
+    /**
+     * 地图地址 格式化
+     */
+    addressBack() {
+      this.provinceBack = this.geocoder[0].region.province
+      this.cityBack =
+        this.geocoder[0].region.city || this.geocoder[0].region.county
+      this.districtBack = this.geocoder[0].region.county
+      this.address = this.geocoder[0].address
+      this.longitude = this.geocoder[0].location.split(',')[0] || ''
+      this.latitude = this.geocoder[0].location.split(',')[1] || ''
+      this.lnglatTofixed6()
+      this.$nextTick(() => {
+        let backData = {
+          provinceBack: this.provinceBack,
+          cityBack: this.cityBack,
+          districtBack: this.districtBack,
+          address: this.address,
+          longitude: this.longitude,
+          latitude: this.latitude
+        }
+        this.$nextTick(() => {
+          this.$emit('mapBack', backData)
+        })
+      })
+    },
+    setZoomAndCenter(lng, lat, zoom) {
+      let map = this.mapRef.getMapRef(this.mapId)
+      CTMapOl.ViewControl?.common?.setZoomAndCenter(
+        { mapRef: map },
+        { center: [lng, lat], zoom, duration: 1000, offset: [0, 0] }
+      )
+    },
+    /**
+     * 开启监听地图点击事件
+     */
+    openClickMap() {
+      try {
+        let map = this.mapRef.getMapRef(this.mapId)
+        CTMapOl.InteractionControl.common.getCoordByClick(
+          { mapRef: map },
+          {
+            onmouseclick: (mapRef, type, opt) => {
+              this.clickMap(opt)
+            }
+          }
+        )
+      } catch (e) {
+        console.log('监听地图事件失败', e)
+      }
+    },
+    /**
+     * 地图点击事件
+     */
+    clickMap(opt) {
+      console.log('clickMap=======================', opt)
+      let clicklng = opt.lonlat[0],
+        clicklat = opt.lonlat[1]
+      this.doMarker(clicklng, clicklat)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '~@component-gallery/theme-chalk/src/alarmTransferEvent/map-selection.scss';
+</style>
+<style lang="scss"></style>

src/components/common-comp-emergency-events-inquiry/src/entry/EmergencyEventsInquiry.vue

@@ -0,0 +1,600 @@
+<!--  应急事件查询  -->
+<template>
+  <div :class="[bem.root]">
+    <div class="search-box">
+      <el-form :label-width="pxToRem(72)" ref="queryform">
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <el-form-item label="事件编号">
+              <base-input placeholder="请输入" v-model="params.eventCode">
+              </base-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="事件类型">
+              <base-select-tree
+                class="event-select"
+                ref="selectTree"
+                v-model="params.eventType"
+                :multiple="true"
+                filterable
+                :data="eventTypeTree"
+                :props="{
+                  children: 'children',
+                  name: 'typeName',
+                  id: 'id'
+                }"
+                :treeOptions="{
+                  showCheckbox: true,
+                  defaultExpandAll: true,
+                  itemSize: 32,
+                  expandOnClickNode: false,
+                  indent: 6
+                }"
+                @input="selectTreeChange"
+                :clearable="true"
+              >
+                <template #default="{ node }">
+                  <span class="custom-tree-node">
+                    <span>{{ node.label }}</span>
+                  </span>
+                </template>
+              </base-select-tree>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="事发时间">
+              <base-datepicker
+                class="event-picker"
+                type="datetimerange"
+                selfClass="event-date"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                :default-time="['00:00:00', '23:59:59']"
+                v-model="params.time"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                :clearable="true"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10">
+          <el-col :span="8">
+            <el-form-item label="事件等级" prop="eventGradeDict">
+              <base-select
+                class="event-select"
+                :multiple="true"
+                v-model="params.eventGradeDict"
+                :configs="{
+                  optionKey: 'dictValue',
+                  optionLabel: 'dictLabel'
+                }"
+                :options="dictOptions['emergency_event_grade']"
+                :popperToBody="true"
+              ></base-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="事件状态" prop="status">
+              <base-select
+                class="event-select"
+                :multiple="true"
+                v-model="params.status"
+                :configs="{
+                  optionKey: 'dictValue',
+                  optionLabel: 'dictLabel'
+                }"
+                :options="dictOptions['emergency_event_state']"
+                :popperToBody="true"
+              ></base-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="btn-line">
+      <div class="item">
+        <base-button :heightStyle="32" :width="108" @click="addClick">
+          新增
+        </base-button>
+        <base-button :heightStyle="32" :width="108" @click="delectClick">
+          删除
+        </base-button>
+      </div>
+      <div class="item">
+        <base-button
+          type="primary"
+          :heightStyle="32"
+          :width="108"
+          @click="searchClick"
+        >
+          查询
+        </base-button>
+        <base-button :heightStyle="32" :width="108" @click="resetClick">
+          重置
+        </base-button>
+      </div>
+    </div>
+    <div class="event-table">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        @selection-change="selectionChange"
+        v-loading="loading"
+        :highlight-current-row="false"
+        ref="table"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          v-for="item in column"
+          align="left"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+          :show-overflow-tooltip="item.tooltip"
+          :sort-orders="item.sortOrders"
+          :min-width="item.minWidth"
+        >
+          <template v-slot="scope">
+            <template v-if="item.prop === 'type'">
+              {{ getRowEventType(scope.row) }}
+            </template>
+            <template v-else-if="item.prop === 'eventGradeDict'">
+              <div class="tags">
+                <div
+                  class="tag"
+                  :class="{
+                    'very-important': scope.row.eventGradeDict === 4,
+                    'important': scope.row.eventGradeDict === 3,
+                    'large': scope.row.eventGradeDict === 2,
+                    'normal': scope.row.eventGradeDict === 1
+                  }"
+                >
+                  {{
+                    rangeFormat(
+                      dictOptions['emergency_event_grade'],
+                      scope.row.eventGradeDict
+                    )
+                  }}
+                </div>
+              </div>
+            </template>
+            <template v-else-if="item.prop === 'status'">
+              <div
+                class="state"
+                :class="{
+                  todo: scope.row.status === 1,
+                  doing: scope.row.status === 2,
+                  done: scope.row.status === 3,
+                  archive: scope.row.status === 4
+                }"
+              >
+                {{
+                  rangeFormat(
+                    dictOptions['emergency_event_state'],
+                    scope.row.status
+                  )
+                }}
+              </div>
+            </template>
+            <!-- 默认列内容 -->
+            <template v-else>{{ scope.row[item.prop] }}</template>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="left" min-width="100">
+          <template v-slot="scope">
+            <div class="btn-box">
+              <span
+                class="text-btn"
+                :class="{
+                  disable: scope.row.status === 3 || scope.row.status === 4
+                }"
+                @click="editClick(scope.row)"
+                >编辑</span
+              >
+              <span class="text-btn" @click="detailClick(scope.row)">详情</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="pagination-box">
+      <el-pagination
+        class="page"
+        small
+        popper-class="event-pagination-popper"
+        layout="total, sizes, prev, pager, next, jumper"
+        :page-size="params.pageSize"
+        :current-page="params.pageNum"
+        :total="total"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+        background
+      ></el-pagination>
+      <div class="fd-pagination-text">
+        当前第{{ params.pageNum }}/{{ Math.ceil(total / params.pageSize) }}页
+      </div>
+    </div>
+
+    <!--  新增应急事件弹窗  -->
+    <add-or-edit-emergency-event
+      v-if="showAddEventDialog"
+      :isEdit="isEdit"
+      :eventCode="toDetailEventCode"
+      @closeDialog="closeDialogClick"
+      @updateTableData="searchClick"
+    />
+  </div>
+</template>
+<script>
+import { createNameSpace } from '@component-gallery/utils/bem/create'
+import {
+  getMultipleDicts,
+  getEventList,
+  getEventTypeTree,
+  deleteEvent
+} from '../service/index'
+import { selectDictLabel } from '../utils/index'
+import AddOrEditEmergencyEvent from '../components/AddOrEditEmergencyEvent.vue'
+import BaseButton from '@component-gallery/base-components/base-button/BaseButton.vue'
+import BaseInput from '@component-gallery/base-components/base-form-inner/base-input/BaseInput.vue'
+import BaseDatepicker from '@component-gallery/base-components/base-form-inner/base-datepicker/BaseDatepicker.vue'
+import BaseSelect from '@component-gallery/base-components/base-form-inner/base-select/BaseSelect.vue'
+import BaseSelectTree from '@component-gallery/base-components/base-form-inner/base-select-tree/BaseSelectTree.vue'
+import CommonMessage from '@component-gallery/utils/funCommon/message/common-message'
+import { postMsgUtil } from '@ct/iframe-connect-sdk'
+
+const root = createNameSpace('emergency-events-inquiry-box common-iw-s')
+// todo 提出data.js
+import { column } from '../utils/data'
+
+export default {
+  name: 'd-emergency-events-inquiry',
+  components: {
+    AddOrEditEmergencyEvent,
+    BaseInput,
+    BaseDatepicker,
+    BaseSelect,
+    BaseSelectTree,
+    BaseButton
+  },
+  data() {
+    return {
+      showAddEventDialog: false, // 显示新增事件弹窗
+      total: 0,
+      loading: false,
+      tableData: [], //表格数据
+      column: column,
+      params: {
+        eventCode: '',
+        eventType: [],
+        time: '',
+        //“特别重大 4”、“重大 3”、“较大 2”、“一般 1”
+        eventGradeDict: [],
+        //“未处置1”、“处置中2”、“已完成3”、“已归档4”
+        status: [],
+        large: [], //事件类型一
+        middle: [], //事件类型二
+        small: [], //事件类型三
+        pageNum: 1, // 当前页码
+        pageSize: 10 // 每页条数
+      },
+      //事件等级,事件状态的枚举
+      dictOptions: [],
+      //事件类型（数结构）
+      eventTypeTree: [],
+      //事件类型（数组）
+      eventTypeList: [],
+      delectIds: [], // 需要删除的事件
+      isEdit: false, //是否是编辑
+      toDetailEventCode: '' //详情页的应急事件编号
+    }
+  },
+  mounted() {
+    // 监听事件
+    this.listenEventBus()
+    this.getDicts()
+    // 获取事件类型树
+    this.getEventTypeTree()
+  },
+  computed: {
+    bem() {
+      return {
+        root: root.b('')
+      }
+    }
+  },
+  methods: {
+    /**
+     * 监听事件（从告警事件跳转过来）
+     */
+    listenEventBus() {
+      postMsgUtil.listen('open-emergency', () => {
+        // 刷新列表
+        this.getEventList()
+      })
+    },
+    /**
+     * 查询枚举(事件等级，事件状态)
+     */
+    getDicts() {
+      getMultipleDicts(['emergency_event_grade', 'emergency_event_state']).then(
+        (res) => {
+          this.dictOptions = res.data
+        }
+      )
+    },
+    /**
+     * 处理表格数据（枚举值回显）
+     */
+    rangeFormat(dict, val) {
+      return selectDictLabel(dict, val)
+    },
+    /**
+     * 获取应急事件列表
+     */
+    getEventList() {
+      let data = {
+        eventCode: this.params.eventCode,
+        pageSize: this.params.pageSize,
+        pageNum: this.params.pageNum,
+        largeCategoryList: this.params.large?.join(',') || undefined,
+        middleCategoryList: this.params.middle?.join(',') || undefined,
+        smallCategoryList: this.params.small?.join(',') || undefined,
+        eventGradeDictList: this.params?.eventGradeDict.join(',') || undefined,
+        statusList: this.params?.status.join(',') || undefined
+      }
+      if (this.params.time) {
+        data.eventTimeStart = this.params.time[0]
+        data.eventTimeEnd = this.params.time[1]
+      }
+      getEventList(data)
+        .then((res) => {
+          if (res.code == 200) {
+            this.tableData = res.rows || []
+            this.total = res.total
+          }
+        })
+        .catch((res) => {
+          console.log(res)
+        })
+    },
+    /**
+     * 获取应急事件类型树
+     */
+    getEventTypeTree() {
+      getEventTypeTree({}).then((res) => {
+        if (res.code == 200) {
+          this.eventTypeTree.push({
+            id: 0,
+            typeName: '全部',
+            children: this.recursionTree(res.data)
+          })
+          // 将类型树结构格式化成数组
+          this.eventTypeList = this.dealLevelTreeToList(res.data)
+          //获取事件列表
+          this.getEventList()
+        }
+      })
+    },
+    /**
+     * 格式化事件类型 添加level 参数
+     */
+    recursionTree(treeData, level = 1) {
+      return treeData.map((t) => {
+        return {
+          ...t,
+          level: level,
+          children: this.recursionTree(t.children, level + 1)
+        }
+      })
+    },
+    /**
+     * 处理树型结构数据 tree => {[],[],[]}
+     */
+    dealLevelTreeToList(tree, levels = [], level = 0) {
+      if (!levels[level]) {
+        levels[level] = []
+      }
+      for (const node of tree) {
+        levels[level].push(node)
+        if (node.children?.length > 0) {
+          this.dealLevelTreeToList(node.children, levels, level + 1)
+        }
+      }
+      return levels
+    },
+    /**
+     * 类型树选中改变（按照三级传递参数）
+     */
+    selectTreeChange() {
+      this.params.large = []
+      this.params.middle = []
+      this.params.small = []
+      let nodes = this.$refs.selectTree.$refs.treeRef.store.nodesMap
+      if (!Object.values(nodes).find((item) => !item.checked)) {
+        return false
+      }
+      if (this.params.eventType && this.params.eventType.length) {
+        // 获取所以选中节点
+        const selectedNodes =
+          this.$refs.selectTree.$refs.treeRef.getCheckedNodes(true)
+        //todo 使用一个循环优化
+        selectedNodes.forEach((t) => {
+          switch (t.level) {
+            case 1:
+              this.params.large.push(t.id)
+              break
+            case 2:
+              this.params.middle.push(t.id)
+              break
+            case 3:
+              this.params.small.push(t.id)
+              break
+          }
+        })
+      }
+    },
+    /**
+     * 表格处理事件类型
+     * todo 优化
+     */
+    getRowEventType(item) {
+      const large = this.eventTypeList[0].find(
+        (it) => it.id === item.eventTypeLargeCategory
+      )
+      const middle = this.eventTypeList[1].find(
+        (it) => it.id === item.eventTypeMiddleCategory
+      )
+      const small = this.eventTypeList[2].find(
+        (it) => it.id === item.eventTypeSmallCategory
+      )
+      return `${large?.typeName || '-'}${middle ? '/' + middle.typeName : ''}${
+        small ? '/' + small.typeName : ''
+      }`
+    },
+    /**
+     * 切换页码回调
+     */
+    handleCurrentChange(pageNum) {
+      this.params.pageNum = pageNum
+      this.getEventList()
+    },
+    /**
+     * 切换分页数目回调
+     */
+    handleSizeChange(val) {
+      this.params.pageSize = val
+      this.getEventList()
+    },
+    /**
+     * 列表删除点击
+     */
+    delectClick() {
+      if (this.delectIds.length == 0) {
+        CommonMessage.warning('请选择事件后进行事件删除。')
+        return
+      } else {
+        let params = {
+          eventCodes: this.delectIds
+        }
+        this.$confirm('确定要删除当前选择的应急事件吗？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          customClass: 'event-confirm'
+        }).then(() => {
+          this.deleteSubmit(params)
+        })
+      }
+    },
+    /**
+     * 删除
+     */
+    deleteSubmit(params) {
+      deleteEvent(params)
+        .then((res) => {
+          if (res.code === 200) {
+            CommonMessage.success(res.msg)
+            this.getEventList()
+          }
+        })
+        .catch((err) => {
+          CommonMessage.error(err.msg)
+        })
+    },
+    /**
+     * 新增
+     */
+    addClick() {
+      //多次打开 先关闭再打开
+      if (this.showAddEventDialog) {
+        this.showAddEventDialog = false
+      }
+      this.$nextTick(() => {
+        this.showAddEventDialog = true
+      })
+    },
+    /**
+     * 搜索
+     */
+    searchClick() {
+      this.params.pageNum = 1
+      this.getEventList()
+    },
+    /**
+     * 重置
+     */
+    resetClick() {
+      this.params = {
+        eventCode: '',
+        eventType: [],
+        time: '',
+        eventGradeDict: [],
+        large: [], //事件类型一
+        middle: [], //事件类型二
+        small: [], //事件类型三
+        status: [],
+        pageNum: 1, // 当前页码
+        pageSize: 10 // 每页条数
+      }
+      this.getEventList()
+    },
+    /**
+     * 编辑
+     */
+    editClick(item) {
+      // “已完成 3”/“已归档 4” 状态不支持编辑
+      if (item.status === 3 || item.status === 4) {
+        return
+      }
+      //多次打开 先关闭再打开
+      if (this.showAddEventDialog) {
+        this.showAddEventDialog = false
+      }
+      this.$nextTick(() => {
+        this.isEdit = true
+        this.toDetailEventCode = item.eventCode
+        this.showAddEventDialog = true
+      })
+    },
+    /**
+     * 详情，跳转应急指挥调度大屏
+     */
+    detailClick(item) {
+      console.log('跳转应急指挥调度大屏', item)
+      let data = {
+        eventCodeToDetail: item.eventCode
+      }
+      postMsgUtil.trigger(null, 'jumpToEmergencyCommand', data)
+    },
+    /**
+     * 列表多选回调
+     */
+    selectionChange(val) {
+      this.delectIds = val.map((a) => {
+        return a.eventCode
+      })
+    },
+    /**
+     * 关闭新增事件弹窗回调
+     */
+    closeDialogClick() {
+      this.isEdit = false
+      this.toDetailEventCode = ''
+      this.showAddEventDialog = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '~@component-gallery/theme-chalk/src/emergency-events-inquiry/event-table.scss';
+@import '~@component-gallery/theme-chalk/src/emergency-events-inquiry/emergency-events-inquiry';
+</style>
+<style lang="scss">
+@import '../assets/styles/eventCommon.scss';
+</style>

src/components/common-comp-emergency-events-inquiry/src/service/index.js

@@ -0,0 +1,132 @@
+import { request } from '@component-gallery/utils/request/API/index'
+/**
+ * 查询字典值
+ */
+export function getMultipleDicts(dictType) {
+  return request({
+    url: '/admin/base/system/dict/data/dictType/multiple/' + dictType,
+    method: 'get'
+  })
+}
+
+/**
+ * 1.6.	逆地理编码接口
+ * location	地图经纬度(“经度,维度”)	String	是	经纬度用逗号拼接
+ * poiTypes	POI数据类型	String	否	基于天地图的POI数据类型（离线地图时需确认与天地图差异）
+ * radius	搜索半径，单位米，默认1000米	String	否
+ */
+export function poiContraryGeocodingQuery(data) {
+  return request({
+    url: '/gis/gis/poi/poiContraryGeocodingQuery',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 1.2.	POI-关键字搜索接口
+ * 字段描述	    字段名称	                                            类型	必填	  字段说明
+ * keyWord	    搜索的关键字	                                        String	是	  无
+ * location	    地图经纬度(“经度,纬度”)	                              String	否	  经纬度用逗号拼接 和行政编码二选一必填
+ * adCode	      指定行政区的国标码（行政区划编码表）严格按照sys_area表	  String	否	  基于天地图的行政区划编码表 和经纬度二选一必填
+ * level	      目前查询的级别	                                      String	否	  1-18级
+ * queryType	  搜索类型	                                            String	必填	1:普通搜索（含地铁公交） 7：地名搜索
+ * pageSize	    分页参数	                                            String	必填	分页参数
+ * pageNum	    分页参数	                                            String	必填	分页参数
+ * poiTypes	    POI数据类型	                                        String	否	  基于天地图的POI数据类型（离线地图时需确认与天地图差异）
+ * @returns {*}
+ */
+export function keyWordQueryPoi(data) {
+  return request({
+    url: '/gis/gis/poi/keyWordQuery',
+    method: 'post',
+    data
+  })
+}
+export function getRegion(query) {
+  return request({
+    url: '/admin/video/getRegion',
+    method: 'post',
+    data: query
+  })
+}
+
+/**
+ * 事件类型查询
+ */
+// export function getEventType(query) {
+//   return request({
+//     url: '/video-video/arTagsInfo/listType',
+//     method: 'post',
+//     data: query
+//   })
+// }
+/**
+ * 查询应急事件列表
+ */
+export function getEventList(query) {
+  return request({
+    url: '/video-emergency/event/eventList',
+    method: 'get',
+    data: query
+  })
+}
+
+/**
+ * 新增事件
+ */
+export function saveEvent(query) {
+  return request({
+    url: '/video-emergency/event/saveEvent',
+    method: 'post',
+    data: query
+  })
+}
+/**
+ * 编辑事件
+ */
+export function updateEvent(query) {
+  return request({
+    url: '/video-emergency/event/update',
+    method: 'post',
+    data: query
+  })
+}
+/**
+ * 事件详情
+ */
+export function getEventDetail(data) {
+  return request({
+    url: 'video-emergency/event/getEventDetail/' + data,
+    method: 'get'
+  })
+}
+/**
+ * 删除事件支持多个{'',''}
+ */
+export function deleteEvent(query) {
+  return request({
+    url: '/video-emergency/event/deleteEvent',
+    method: 'post',
+    data: query
+  })
+}
+/**
+ * 获取事件类型树
+ */
+export function getEventTypeTree() {
+  return request({
+    url: '/video-video/arTagsInfo/arTagsTypeTreeForEvent/2',
+    method: 'get'
+  })
+}
+
+/**
+ * 事件类型查询
+ */
+export function getEventType(type) {
+  return request({
+    url: '/video-video/arTagsInfo/arTagsTypeTreeForEvent/' + type,
+    method: 'get'
+  })
+}

src/components/common-comp-emergency-events-inquiry/src/utils/data.js

@@ -0,0 +1,97 @@
+export const column = [
+  {
+    prop: 'eventCode',
+    label: '事件编号',
+    tooltip: true
+  },
+  { prop: 'eventName', label: '事件名称', tooltip: true },
+  {
+    prop: 'eventTime',
+    label: '事发时间',
+    minWidth: 120,
+    tooltip: true
+  },
+  {
+    prop: 'type',
+    label: '事件类型',
+    minWidth: 180,
+    tooltip: true
+  },
+  {
+    prop: 'eventGradeDict',
+    label: '事件等级',
+    minWidth: 120,
+    tooltip: false,
+    custom: true
+  },
+  {
+    prop: 'specificLocation',
+    label: '事发地点',
+    minWidth: 120,
+    tooltip: true
+  },
+  {
+    prop: 'status',
+    label: '事件状态',
+    tooltip: false,
+    minWidth: 120,
+    custom: true
+  }
+]
+
+// 四个附件的数据驱动
+export const fileItems = [
+  {
+    label: '图片',
+    prop: 'imgList',
+    class: 'file-form-item',
+    tooltipContent: '支持上传 png、jpg、jpeg格式，单个图片大小不超过 10M。',
+    iconClass: 'event-file-tip iconfont_tools icon-tongyong_icon_wenhao',
+    labelStyle: { fontWeight: 400 },
+    contentClass: 'file-form-item-content-div',
+    ref: 'imgList',
+    fileType: 'image/png,image/jpg,image/jpeg',
+    fileTypeMessage: 'png,jpg,jpeg',
+    limit: 10
+  },
+  {
+    label: '视频',
+    prop: 'videoList',
+    class: 'file-form-item',
+    tooltipContent: '支持上传 mp4 格式，单个视频大小不超过 10M。',
+    iconClass: 'event-file-tip iconfont_tools icon-tongyong_icon_wenhao',
+    labelStyle: { fontWeight: 400 },
+    contentClass: 'file-form-item-content-div file-form-item-content-video',
+    ref: 'videoList',
+    fileType: 'video/mp4',
+    fileTypeMessage: 'mp4',
+    limit: 10
+  },
+  {
+    label: '音频',
+    prop: 'audioList',
+    class: 'file-form-item',
+    tooltipContent: '支持上传 mp3 和 wav 格式，单个音频大小不超过 10M。',
+    iconClass: 'event-file-tip iconfont_tools icon-tongyong_icon_wenhao',
+    labelStyle: { fontWeight: 400 },
+    contentClass: 'file-form-item-content-div file-form-item-content-video',
+    ref: 'audioList',
+    fileType: '.mp3,.wav',
+    fileTypeMessage: 'mp3,wav',
+    limit: 10
+  },
+  {
+    label: '文档',
+    prop: 'fileList',
+    class: 'file-form-bottom-item',
+    tooltipContent:
+      '支持上传 txt、doc、docx、pdf、ppt、pptx 格式，单个文档大小不超过 10M。',
+    iconClass: 'event-file-tip iconfont_tools icon-tongyong_icon_wenhao',
+    labelStyle: { fontWeight: 400 },
+    contentClass: 'file-form-item-content-bottom',
+    ref: 'fileList',
+    fileType: '.txt,.doc,.docx,.pdf,.ppt,.pptx',
+    fileTypeMessage: 'txt,doc,docx,pdf,ppt,pptx',
+    limit: 10
+  }
+]

src/components/common-comp-emergency-events-inquiry/src/utils/index.js

@@ -0,0 +1,31 @@
+/** 回显数据字典 */
+export function selectDictLabel(datas, value) {
+  value = '' + value
+  if (datas && value) {
+    let actions = []
+    Object.keys(datas).map((key) => {
+      if (datas[key].dictValue === value) {
+        actions.push(datas[key].dictLabel)
+        return false
+      }
+    })
+    return actions.join('')
+  }
+  return ''
+}
+
+export function getNowDate() {
+  let date = new Date()
+  let year = date.getFullYear()
+
+  let month =
+    date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+  let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+  let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+  let minutes =
+    date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+  let seconds =
+    date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+  // 拼接
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}

webpack.config.js

@@ -159,6 +159,7 @@ module.exports = {
       "@component-gallery/lib": path.join(__dirname, 'src/components/lib'),
       "@component-gallery/one-key-alarm": path.join(__dirname, 'src/components/common-comp-one-key-alarm/src/entry/CommonOneKeyAlarm.vue'),
       "@component-gallery/alarm-list": path.join(__dirname, 'src/components/common-comp-alarm-list'),
+      "@component-gallery/emergency-events-inquiry": path.join(__dirname, 'src/components/common-comp-emergency-events-inquiry'),
       "@component-gallery/alarm-detail": path.join(__dirname, 'src/components/common-comp-alarm-detail/src/entry/CommonAlarmDetail.vue'),
       "@component-gallery/horn-tree": path.join(__dirname, 'src/components/common-comp-horn-tree/src/entry/CommonHornTree.vue'),
       "@component-gallery/horn-broadcast": path.join(__dirname, 'src/components/common-comp-horn-broadcast/src/entry/CommonHornBroadcast.vue'),