预警告警

src/components/minheader/index.vue

@@ -8,16 +8,26 @@
     </div>
     <div v-if="isBtn" class="rb">
       <template v-if="isSearch">
-        <div class="serlog">
+        <!-- <div class="serlog">
           <div class="log"></div>
-        </div>
-        <el-input
+        </div> -->
+        <!-- <el-input
           v-model="input"
           class="inputcas"
           placeholder="请输入您要搜索的内容"
           clearable
-        />
-        <el-button type="danger" size="default" class="br L12">搜索</el-button>
+        /> -->
+        <Search @clear="clear" @search="search" />
+        <!-- <el-button type="danger" size="default" class="br L12">搜索</el-button> -->
+      </template>
+      <template v-if="isPreser">
+        <el-button
+          type="danger"
+          size="default"
+          class="br L12"
+          @click="preserBtn"
+          >保存</el-button
+        >
       </template>
       <template v-if="isAuth">
         <el-button size="default" plain class="btn-white br" @click="addBbut()"
@@ -28,6 +38,8 @@
   </div>
 </template>
 <script setup lang="ts">
+import Search from "@/components/search/index.vue";
+import { ElMessage } from "element-plus";
 const props = defineProps({
   //是否显示新增按钮
   isBtn: {
@@ -54,13 +66,28 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  //是否显示保存
+  isPreser: {
+    type: Boolean,
+    default: false,
+  },
 });
 //搜索内容
 const input = ref("");
-const emits = defineEmits(["addForm"]);
+const emits = defineEmits(["addForm", "preserForm"]);
 const addBbut = () => {
   emits("addForm");
 };
+const search = (val) => {
+  ElMessage.success(`搜索成功：${val}`);
+};
+const clear = () => {
+  ElMessage.success(`清除`);
+};
+//保存
+const preserBtn = () => {
+  emits("preserForm");
+};
 </script>
 <style lang="scss" scoped>
 .data-table-btn {

src/router/routes/routes-file-four.ts

@@ -21,6 +21,13 @@ const HomeRoutes = {
       meta: { title: "预警告警策略", elSvgIcon: "Fold", icon: "table" },
       component: () => import("@/views/systemSettings/warningSet/index.vue"),
     },
+    {
+      path: "/systemSettings/warningEdit",
+      name: "WarningEdit",
+      hidden: true,
+      meta: { title: "预警告警策略编辑", elSvgIcon: "Fold", icon: "table" },
+      component: () => import("@/views/systemSettings/warningEdit/index.vue"),
+    },
     {
       path: "/systemSettings/log",
       name: "log",

src/views/systemSettings/warningEdit/index.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="airportInfo">
+    <div class="headerBox">
+      <Minheader :is-Preser="true" :is-statuser="true">
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">报警预警场景</div>
+          </div>
+        </template></Minheader
+      >
+      <div class="diacont">
+        <el-form :model="tableForm" class="w100 fw">
+          <div class="outersurface pd30">
+            <el-form-item label="策略名称">
+              <el-input v-model="tableForm.name" placeholder="请输入策略名称" />
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="航司二字码">
+              <el-input
+                v-model="tableForm.china"
+                placeholder="请输入航司二字码"
+              />
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="起飞机场">
+              <el-select
+                style="width: 100%"
+                v-model="tableForm.englin"
+                class="input-shadow"
+                size="small"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择起飞机场"
+              >
+                <el-option
+                  v-for="item in tableOptionser"
+                  :key="item.v ? item.v : item.planDepartureApt"
+                  :label="item.k ? item.k : item.planDepartureApt"
+                  :value="item.v ? item.v : item.planDepartureApt"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="outersurface pd30">
+            <el-form-item label="降落机场">
+              <el-select
+                style="width: 100%"
+                v-model="tableForm.two"
+                class="input-shadow"
+                size="small"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择降落机场"
+              >
+                <el-option
+                  v-for="item in tableOptionser"
+                  :key="item.v ? item.v : item.planDepartureApt"
+                  :label="item.k ? item.k : item.planDepartureApt"
+                  :value="item.v ? item.v : item.planDepartureApt"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="outersurface">
+            <el-form-item label="航班号">
+              <el-input v-model="tableForm.three" placeholder="请输入航班号" />
+            </el-form-item>
+          </div>
+          <div class="outertwowid pd30">
+            <el-form-item label="起止时间">
+              <el-date-picker
+                v-model="tableForm.time"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+              />
+            </el-form-item>
+          </div>
+          <div class="outerthreewid">
+            <el-form-item label="备注">
+              <el-input v-model="tableForm.text" placeholder="请输入备注" />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="centerBox">
+      <Minheader
+        :is-auth="true"
+        :is-statuser="true"
+        :is-Search="true"
+        @addForm="addForm"
+        style="margin-top: 20px"
+      >
+        <template #header>
+          <div class="status flex-wrap">
+            <div class="manageTitle">报警预警策略</div>
+          </div>
+        </template></Minheader
+      >
+    </div>
+    <div class="app-container scroll-y">
+      <DataTable
+        :tableHeader="state.list"
+        :tableData="tableData"
+        :tableBtnGroup="tableBtnGroup"
+        :tableProperty="{ rowKey: 'ID' }"
+        @btnClick="btnClick"
+      />
+    </div>
+    <Dialog
+      width="600px"
+      :flag="flag"
+      :type="type"
+      :msgTitle="msgTitle"
+      @resetForm="resetForm"
+      @delRest="delRest"
+    >
+      <div class="diacont">
+        <el-form :model="tableForms">
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-form-item label="策略名称">
+                <el-input
+                  v-model="tableForms.name"
+                  placeholder="请输入策略名称"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="计算依据">
+                <el-select
+                  style="width: 100%"
+                  v-model="tableForms.china"
+                  class="input-shadow"
+                  size="small"
+                  filterable
+                  default-first-option
+                  clearable
+                  placeholder="请选择计算依据"
+                >
+                  <el-option
+                    v-for="item in tableOptionser"
+                    :key="item.v ? item.v : item.planDepartureApt"
+                    :label="item.k ? item.k : item.planDepartureApt"
+                    :value="item.v ? item.v : item.planDepartureApt"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="预警时长">
+                <el-input
+                  v-model="tableForms.englin"
+                  placeholder="请输入预警时长"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="报警时长">
+                <el-input
+                  v-model="tableForms.two"
+                  placeholder="请输入报警时长"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="开始节点">
+                <el-select
+                  style="width: 100%"
+                  v-model="tableForms.three"
+                  class="input-shadow"
+                  size="small"
+                  filterable
+                  default-first-option
+                  clearable
+                  placeholder="请选择开始节点"
+                >
+                  <el-option
+                    v-for="item in tableOptionser"
+                    :key="item.v ? item.v : item.planDepartureApt"
+                    :label="item.k ? item.k : item.planDepartureApt"
+                    :value="item.v ? item.v : item.planDepartureApt"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="开始位置">
+                <el-select
+                  style="width: 100%"
+                  v-model="tableForms.text"
+                  class="input-shadow"
+                  size="small"
+                  filterable
+                  default-first-option
+                  clearable
+                  placeholder="请选择开始位置"
+                >
+                  <el-option
+                    v-for="item in tableOptionser"
+                    :key="item.v ? item.v : item.planDepartureApt"
+                    :label="item.k ? item.k : item.planDepartureApt"
+                    :value="item.v ? item.v : item.planDepartureApt"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="结束节点">
+                <el-select
+                  style="width: 100%"
+                  v-model="tableForms.text1"
+                  class="input-shadow"
+                  size="small"
+                  filterable
+                  default-first-option
+                  clearable
+                  placeholder="请选择结束节点"
+                >
+                  <el-option
+                    v-for="item in tableOptionser"
+                    :key="item.v ? item.v : item.planDepartureApt"
+                    :label="item.k ? item.k : item.planDepartureApt"
+                    :value="item.v ? item.v : item.planDepartureApt"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="结束位置">
+                <el-select
+                  style="width: 100%"
+                  v-model="tableForms.text2"
+                  class="input-shadow"
+                  size="small"
+                  filterable
+                  default-first-option
+                  clearable
+                  placeholder="请选择结束位置"
+                >
+                  <el-option
+                    v-for="item in tableOptionser"
+                    :key="item.v ? item.v : item.planDepartureApt"
+                    :label="item.k ? item.k : item.planDepartureApt"
+                    :value="item.v ? item.v : item.planDepartureApt"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Minheader from "@/components/minheader/index.vue";
+import DataTable from "@/components/tableTemp/index.vue";
+import Dialog from "@/components/dialog/index.vue";
+const tableForm = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  three: "",
+  text: "",
+  time: "",
+}); //报警预警场景
+const tableForms = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  three: "",
+  text: "",
+  text1: "",
+  text2: "",
+}); //弹窗内容
+const tableOptionser = ref<Array>([]); //下拉
+const flag = ref<Boolean>(false); //弹窗开关
+const type = ref<String>(""); //判断是否删除
+const msgTitle = ref<String>("新增报警预警策略"); //弹窗标题
+//列表
+const tableData = ref([
+  {
+    name: "中国国际航空",
+    china: "国航",
+    englin: "AIRCHINA",
+    two: "CA",
+    three: "CCA",
+    text: "CA国航",
+  },
+  {
+    name: "中国国际航空",
+    china: "国航",
+    englin: "AIRCHINA",
+    two: "CA",
+    three: "CCA",
+    text: "CA国航",
+  },
+  {
+    name: "中国国际航空",
+    china: "国航",
+    englin: "AIRCHINA",
+    two: "CA",
+    three: "CCA",
+    text: "CA国航",
+  },
+]);
+//表头
+const state = reactive({
+  list: [
+    { label: "名称", key: "name", width: "100px" },
+    { label: "三字码", key: "china", width: "50px" },
+    { label: "四字码", key: "englin", width: "50px" },
+    { label: "中文简称", key: "two", width: "50px" },
+    { label: "英文简称", key: "three", width: "50px" },
+    { label: "全称", key: "text", width: "50px" },
+    { label: "时区", key: "text1", width: "50px" },
+    { label: "公司名称", key: "text2", width: "50px" },
+  ],
+  listLoading: true,
+});
+const tableBtnGroup = ref([
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: 2,
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: 3,
+  },
+]);
+//新增
+const addForm = () => {
+  msgTitle.value = "新增报警预警策略";
+  flag.value = true;
+  type.value = "";
+};
+//取消
+const resetForm = () => {
+  flag.value = false;
+  tableForm.name = "";
+  tableForm.china = "";
+  tableForm.englin = "";
+  tableForm.two = "";
+  tableForm.three = "";
+  tableForm.text = "";
+};
+//删除
+const delRest = () => {
+  flag.value = false;
+};
+//编辑-删除
+const btnClick = (row, index, param) => {
+  if (param === 2) {
+    msgTitle.value = "编辑报警预警策略";
+    flag.value = true;
+    type.value = "";
+    tableForms.name = index.name;
+    tableForms.china = index.china;
+    tableForms.englin = index.englin;
+    tableForms.two = index.two;
+    tableForms.three = index.three;
+    tableForms.text = index.text;
+    tableForms.text1 = index.text1;
+    tableForms.text2 = index.text2;
+  } else if (param === 3) {
+    msgTitle.value = "删除报警预警策略";
+    flag.value = true;
+    type.value = "del";
+  } else if (param === 4) {
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.airportInfo {
+  .headerBox {
+    width: 100%;
+    min-height: 200px;
+    background: #ffffff;
+    border-radius: 4px;
+    padding: 24px;
+    .diacont {
+      width: 100%;
+      padding: 0;
+      .w100 {
+        width: 100%;
+      }
+      .fw {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      .outersurface {
+        width: 20%;
+      }
+      .pd30 {
+        padding: 0 30px 0 0;
+      }
+      .outertwowid {
+        width: 40%;
+      }
+      .outerthreewid {
+        width: 60%;
+      }
+    }
+  }
+  .centerBox {
+    padding: 0 24px;
+  }
+}
+::v-deep .el-form-item__label {
+  width: 80px;
+}
+</style>

src/views/systemSettings/warningSet/index.vue

@@ -1,19 +1,255 @@
 <template>
   <div class="airportInfo">
     <div class="wrap">
-      <Minheader :is-auth="true" :is-statuser="true" :is-Search="true">
+      <Minheader
+        :is-auth="true"
+        :is-statuser="true"
+        :is-Search="true"
+        @addForm="addForm"
+      >
         <template #header>
           <div class="status flex-wrap">
             <div class="manageTitle">告警预警维护</div>
           </div>
         </template></Minheader
       >
-      <DataTable />
+      <div class="app-container scroll-y">
+        <DataTable
+          :tableHeader="state.list"
+          :tableData="tableData"
+          :tableBtnGroup="tableBtnGroup"
+          :tableProperty="{ rowKey: 'ID' }"
+          @btnClick="btnClick"
+        />
+      </div>
+      <Dialog
+        width="600px"
+        :flag="flag"
+        :type="type"
+        :msgTitle="msgTitle"
+        @resetForm="resetForm"
+        @delRest="delRest"
+      >
+        <div class="diacont">
+          <el-form :model="tableForm">
+            <el-row :gutter="24">
+              <el-col :span="12">
+                <el-form-item label="策略名称">
+                  <el-input
+                    v-model="tableForm.name"
+                    placeholder="请输入策略名称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="航司二字码">
+                  <el-input
+                    v-model="tableForm.china"
+                    placeholder="请输入航司二字码"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="起飞机场">
+                  <el-select
+                    style="width: 100%"
+                    v-model="tableForm.englin"
+                    class="input-shadow"
+                    size="small"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="请选择起飞机场"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="降落机场">
+                  <el-select
+                    style="width: 100%"
+                    v-model="tableForm.two"
+                    class="input-shadow"
+                    size="small"
+                    filterable
+                    default-first-option
+                    clearable
+                    placeholder="请选择降落机场"
+                  >
+                    <el-option
+                      v-for="item in tableOptionser"
+                      :key="item.v ? item.v : item.planDepartureApt"
+                      :label="item.k ? item.k : item.planDepartureApt"
+                      :value="item.v ? item.v : item.planDepartureApt"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="航班号">
+                  <el-input
+                    v-model="tableForm.three"
+                    placeholder="请输入航班号"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="起止时间">
+                  <el-date-picker
+                    v-model="tableForm.time"
+                    type="daterange"
+                    range-separator="-"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col>
+                <el-form-item label="备注">
+                  <el-input
+                    type="textarea"
+                    v-model="tableForm.text"
+                    placeholder="请输入备注"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </Dialog>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import DataTable from "@/views/table/index.vue";
+import DataTable from "@/components/tableTemp/index.vue";
 import Minheader from "@/components/minheader/index.vue";
+import Dialog from "@/components/dialog/index.vue";
+const router = useRouter();
+const flag = ref<Boolean>(false); //弹窗开关
+const type = ref<String>(""); //判断是否删除
+const msgTitle = ref<String>("新增告警预警维护"); //弹窗标题
+const tableColsCopys = reactive<Object>({}); //弹窗\
+const tableOptionser = ref<Array>([]); //弹窗下拉
+const tableForm = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  three: "",
+  text: "",
+  time: "",
+}); //弹窗内容
+//列表
+const tableData = ref([
+  {
+    name: "中国国际航空",
+    china: "国航",
+    englin: "AIRCHINA",
+    two: "CA",
+    three: "CCA",
+    text: "CA国航",
+  },
+  {
+    name: "中国国际航空",
+    china: "国航",
+    englin: "AIRCHINA",
+    two: "CA",
+    three: "CCA",
+    text: "CA国航",
+  },
+  {
+    name: "中国国际航空",
+    china: "国航",
+    englin: "AIRCHINA",
+    two: "CA",
+    three: "CCA",
+    text: "CA国航",
+  },
+]);
+//表头
+const state = reactive({
+  list: [
+    { label: "名称", key: "name" },
+    { label: "中文简称", key: "china" },
+    { label: "英文简称", key: "englin" },
+    { label: "航司二字码", key: "two" },
+    { label: "航司三字码", key: "three" },
+    { label: "备注", key: "text" },
+  ],
+  listLoading: true,
+});
+const tableBtnGroup = ref([
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: 2,
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: 3,
+  },
+]);
+//新增
+const addForm = () => {
+  msgTitle.value = "新增告警预警维护";
+  flag.value = true;
+  type.value = "";
+};
+//取消
+const resetForm = () => {
+  flag.value = false;
+  tableForm.name = "";
+  tableForm.china = "";
+  tableForm.englin = "";
+  tableForm.two = "";
+  tableForm.three = "";
+  tableForm.text = "";
+};
+//编辑
+// const editDialog = (data) => {
+//   msgTitle.value = "编辑航司信息维护";
+//   flag.value = true;
+//   type.value = "";
+//   tableForm.name = data.name;
+//   tableForm.china = data.china;
+//   tableForm.englin = data.englin;
+//   tableForm.two = data.two;
+//   tableForm.three = data.three;
+//   tableForm.text = data.text;
+// };
+//编辑-删除
+const btnClick = (row, index, param) => {
+  if (param === 2) {
+    router.push({ path: "/systemSettings/warningEdit" });
+  } else if (param === 3) {
+    msgTitle.value = "删除告警预警维护";
+    flag.value = true;
+    type.value = "del";
+  } else if (param === 4) {
+  }
+};
+//删除
+const eleDialog = () => {
+  msgTitle.value = "删除告警预警维护";
+  flag.value = true;
+  type.value = "del";
+};
+//删除
+const delRest = () => {
+  flag.value = false;
+};
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep .el-form-item__label {
+  width: 90px;
+}
+</style>