feat:

工单管理页面开发

src/assets/css/index.css

@@ -1263,10 +1263,12 @@ border-radius:8px;
     background-color: #fff;
 }
 
+
+/* 
 .el-picker-panel__footer {
     border-top: 1px solid #3f4864 !important;
     background-color: #242c43 !important;
-}
+} */
 
 .el-picker-panel__icon-btn {
     color: #202531;
@@ -1294,10 +1296,7 @@ border-radius:8px;
 .el-picker-panel__body .el-input__inner {
     height: 24px !important;
     line-height: 24px !important;
-    background-color: #1a2236 !important;
     border-radius: 12px !important;
-    border: solid 1px #3f4864 !important;
-    color: #e3e5ef !important;
     font-size: 12px;
 }
 
@@ -1331,12 +1330,12 @@ border-radius:8px;
 
 .el-time-panel {
     border-radius: 8px !important;
-    border: 1px solid #3f4864 !important;
-    background-color: #242c43 !important;
+    /* border: 1px solid #3f4864 !important;
+    background-color: #242c43 !important; */
 }
 
 .el-time-panel__footer {
-    border: 1px solid #3f4864 !important;
+    /* border: 1px solid #3f4864 !important; */
 }
 
 .el-time-panel__btn.confirm {
@@ -1353,8 +1352,8 @@ border-radius:8px;
 }
 
 .el-time-spinner__item:hover:not(.disabled):not(.active) {
-    background-color: #264dd9 !important;
-    border-radius: 12px !important;
+    /* background-color: #264dd9 !important; */
+    /* border-radius: 12px !important; */
     color: #f4f7fc;
 }
 

src/components/table/bg-filter-form.vue

-<template>
-  <div
-    class="bg-filters"
-    :style="{
-      'border-bottom': showFlag ? 'none' : '',
-      'padding-bottom': showFlag ? '8px' : '16px',
-    }"
-  >
-    <div class="top-filter">
-      <div class="left-slot">
-        <slot name="left_action"></slot>
-      </div>
-      <div class="right-filter">
-        <el-input
-          v-model.trim="modelValue"
-          :placeholder="placeholder"
-          clearable
-        >
-          <template #append>
-            <div
-              class="append-btn"
-              style="margin-top: 1px"
-              @click="keywordAction"
-            >
-              <el-icon><Search /></el-icon>
-            </div>
-          </template>
-        </el-input>
-        <div
-          v-if="options.length > 0"
-          class="more-btn"
-          :class="showFlag ? 'more-btn1' : ''"
-        >
-          <el-button type="default" class="more-filter" @click="moreFilter">
-            高级搜索
-            <el-icon
-              v-if="!showFlag"
-              style="
-                font-weight: 900 !important;
-                color: #404a62;
-                margin-left: 8px;
-              "
-              ><ArrowUp
-            /></el-icon>
-            <el-icon
-              v-else
-              style="
-                font-weight: 900 !important;
-                color: #404a62;
-                margin-left: 8px;
-              "
-              ><ArrowDown
-            /></el-icon>
-          </el-button>
-        </div>
-      </div>
-    </div>
-    <div v-if="showFlag" class="filter-group">
-      <ul class="bg-flex-fs-c filters-list">
-        <li
-          v-for="(item, index) in options"
-          :key="`opt_${index}`"
-          class="bg-flex-fs-c"
-        >
-          <span v-if="item.label" class="filter-name">{{ item.label }}</span>
-          <!-- 下拉选 select -->
-          <el-select
-            v-if="item.type === 'select'"
-            v-model="filters[item.prop]"
-            :placeholder="item.placeholder || '请选择'"
-            :clearable="item.clearable !== false"
-          >
-            <el-option
-              v-for="(v, i) in item.options"
-              :key="`opt_${index}_v_${i}`"
-              :label="v.label"
-              :value="v.value"
-            />
-          </el-select>
-          <!-- 年月日  daterange-->
-          <el-date-picker
-            v-else-if="item.type === 'daterange'"
-            v-model="filters[item.prop]"
-            type="daterange"
-            start-placeholder="开始日期"
-            range-separator="至"
-            end-placeholder="结束日期"
-            value-format="yyyy-MM-DD"
-            :picker-options="{ disabledDate: item.disabledDate }"
-            :clearable="item.clearable !== false"
-          />
-          <!-- 年月日时分秒  datetimerange  :shortcuts="shortcuts"（显示快捷键）-->
-          <el-date-picker
-            v-else-if="item.type === 'datetimerange'"
-            v-model="filters[item.prop]"
-            type="datetimerange"
-            start-placeholder="开始时间"
-            range-separator="至"
-            end-placeholder="结束时间"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            :picker-options="{ disabledDate: item.disabledDate }"
-            :clearable="item.clearable !== false"
-            :shortcuts="item.shortcuts"
-          />
-          <!-- 单选 -->
-          <el-cascader
-            v-else-if="item.type === 'cascader'"
-            v-model="filters[item.prop]"
-            :options="item.options"
-            :props="item.props"
-            :placeholder="item.placeholder || '请选择'"
-            collapse-tags
-            collapse-tags-tooltip
-          />
-          <!-- 多选 -->
-          <el-cascader
-            v-else-if="item.type === 'collapse-cascader'"
-            v-model="filters[item.prop]"
-            :options="item.options"
-            :props="{
-              multiple: true,
-            }"
-            :placeholder="item.placeholder || '请选择'"
-          />
-
-          <el-input
-            v-else
-            v-model="filters[item.prop]"
-            :placeholder="item.placeholder || '请输入'"
-            :clearable="item.clearable !== false"
-            prefix-icon="Search"
-          >
-          </el-input>
-        </li>
-      </ul>
-      <div class="filters-action">
-        <el-button type="primary" @click="searchAction"> 查询 </el-button>
-        <el-button type="default" @click="resetAction"> 重置 </el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {
-  defineProps,
-  defineEmits,
-  onBeforeMount,
-  reactive,
-  watch,
-  ref,
-  computed,
-  toRefs,
-  onMounted,
-  nextTick,
-} from "vue";
-let props = defineProps({
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  immediately: {
-    type: Boolean,
-    default: true,
-  },
-  placeholder: {
-    type: String,
-    default: "请输入",
-  },
-});
-
-let emits = defineEmits([
-  "filters",
-  "filtersChange",
-  "keyword",
-  "keywordChange",
-]);
-let filters = reactive({});
-let state = reactive({
-  showFlag: false,
-  modelValue: "",
-});
-
-onBeforeMount(() => {
-  if (props.immediately) {
-    initFilters();
-  }
-});
-onMounted(() => {
-  if (props.immediately) {
-    searchAction();
-  }
-});
-watch(
-  () => state.modelValue,
-  (newValue) => {
-    emits("keywordChange", newValue);
-  }
-);
-
-watch(filters, (newVal) => {
-  emits("filtersChange", newVal);
-});
-
-const initFilters = () => {
-  props.options.forEach(({ type, prop, defaultValue }) => {
-    let value = defaultValue || "";
-
-    if ((type === "daterange" || type === "datetimerange") && value === "") {
-      value = ["", ""];
-    }
-
-    if (type === "cascader" && value === "") {
-      value = [];
-    }
-
-    filters[prop] = value;
-  });
-};
-const keywordAction = () => {
-  emits("keyword", state.modelValue, filters);
-};
-
-const resetAction = () => {
-  initFilters();
-  nextTick(() => {
-    searchAction();
-  });
-};
-const searchAction = () => {
-  emits("filters", filters, state.modelValue);
-};
-const moreFilter = () => {
-  state.showFlag = !state.showFlag;
-};
-
-const reset = () => {
-  state.modelValue = "";
-  resetAction();
-};
-
-defineExpose({ reset });
-
-const { modelValue, showFlag } = toRefs(state);
-</script>
-<style lang="scss" scoped>
-// 列表筛选
-.bg-filters {
-  width: 100%;
-  padding: 16px;
-  border-bottom: 1px solid #e6e9ef;
-
-  .top-filter {
-    width: 100%;
-    display: flex;
-    .left-slot {
-      flex: 1;
-    }
-    .right-filter {
-      width: 398px;
-      justify-content: end;
-      display: flex;
-      :deep(.el-input-group__append) {
-        padding: 0;
-        border-radius: 0;
-      }
-
-      .el-input {
-        width: 280px;
-        height: 36px;
-        .el-input-group__append {
-          border-radius: 0 4px 4px 0;
-          background-color: #f7f7f9;
-          padding: 0;
-          .append-btn {
-            padding: 0 16px;
-            cursor: pointer;
-          }
-        }
-      }
-      .more-btn {
-        margin-left: 16px;
-        width: 102px;
-        box-sizing: border-box;
-        border: 1px solid #e6e9ef;
-        border-radius: 4px;
-        height: 36px;
-        .more-filter {
-          width: 100px;
-          border: none;
-          height: 34px;
-          padding: 10px 15px;
-          line-height: 1;
-          &:active,
-          &:hover {
-            background-color: #fff;
-            color: #3759be;
-          }
-          &:focus {
-            background-color: #fff;
-          }
-        }
-      }
-      .more-btn1 {
-        height: 53px;
-        border-bottom: 1px solid #fff;
-        border-radius: 4px 4px 0 0;
-        margin-bottom: -1px;
-      }
-    }
-  }
-
-  .filter-group {
-    display: flex;
-    align-items: flex-end;
-    border-radius: 4px 0 4px 4px;
-    width: 100%;
-    border: 1px solid #e6e9ef;
-    padding: 24px 16px 8px;
-  }
-  .filters-list {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-grow: 1;
-    flex-wrap: wrap;
-    li {
-      margin: 0 48px 16px 0;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-
-      .filter-name {
-        font-size: 14px;
-        // font-weight: bolder;
-        line-height: 20px;
-        color: #202531;
-        white-space: nowrap;
-        margin-right: 8px;
-        width: 90px;
-        text-align: right;
-
-        & + * {
-          margin-left: 0;
-        }
-      }
-
-      .el-input {
-        width: 240px;
-        height: 36px;
-      }
-
-      .el-select {
-        width: 240px;
-        height: 36px;
-      }
-
-      .el-range-editor {
-        width: 320px;
-        height: 36px;
-
-        &.el-date-editor--datetimerange {
-          width: 360px;
-          height: 36px;
-        }
-      }
-    }
-  }
-
-  .filters-action {
-    flex-shrink: 0;
-    padding-bottom: 16px;
-  }
-}
-</style>

src/components/table/bg-pagination.vue

-<template>
-  <el-pagination
-    layout="total,sizes ,prev, pager, next,jumper"
-    :page-size="pagination.rowsPerPage"
-    :current-page="pagination.page"
-    :total="pagination.total"
-    :page-sizes="[15, 30, 50]"
-    @current-change="handleCurrentChange"
-    @size-change="handleSizeChange"
-  ></el-pagination>
-</template>
-
-<script setup>
-  import { defineProps, defineEmits } from 'vue'
-  let props = defineProps({
-    pagination: {
-      type: Object,
-      default() {
-        return {
-          rowsPerPage: 15,
-          page: 1,
-          total: 0,
-        }
-      },
-    }, // 表格数据
-  })
-  const emits = defineEmits(['current', 'sizechange'])
-
-  const handleCurrentChange = (val) => {
-    emits('current', val)
-  }
-  const handleSizeChange = (val) => {
-    emits('sizechange', val)
-  }
-</script>

src/components/table/bg-table-href.vue

-<template>
-  <div class="href" @click="goTo">{{ label }}</div>
-</template>
-
-<script setup>
-import { computed } from "vue";
-import { useRouter } from "vue-router";
-const router = useRouter();
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: () => ({}),
-  },
-  header: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-const label = computed(() => props.row[props.header.prop]);
-const href = computed(() => {
-  const { baseurl: path, params } = props.header.href;
-  const query = {};
-  Object.keys(params).forEach((key) => {
-    query[key] = props.row[params[key]];
-  });
-  return {
-    path,
-    query,
-  };
-});
-const goTo = () => {
-  router.push(href.value);
-};
-</script>
-
-<style lang="scss" scoped>
-.href {
-  font-size: 14px;
-  color: #3759be;
-  cursor: pointer;
-}
-</style>

src/components/table/bg-table-list.vue

-<template>
-  <div class="bg-table-list" v-bind="$attrs">
-    <div v-if="$slots.tabs" class="bg-list-tabs">
-      <slot name="tabs" />
-    </div>
-
-    <!-- 筛选条件 -->
-    <div v-if="$slots.filter" class="bg-list-filters">
-      <slot name="filter" />
-    </div>
-
-    <!-- 列表 -->
-    <main v-if="$slots.main" class="bg-container-main">
-      <div>
-        <slot name="main" />
-      </div>
-    </main>
-    <!-- 分页 -->
-    <footer v-if="$slots.footer" class="bg-container-footer">
-      <slot name="footer" />
-    </footer>
-    <!-- </div> -->
-  </div>
-  <slot />
-</template>
-
-<script>
-export default {
-  name: "BgTableList",
-};
-</script>
-<style lang="scss" scoped>
-.bg-table-list {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-content: stretch;
-}
-.bg-container-main {
-  margin: 0 16px;
-  flex: 1;
-  position: relative;
-  & > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    :deep(.el-table__body-wrapper) {
-        height: calc(100% - 46px);
-    }
-  }
-}
-.bg-container-footer {
-  padding: 16px;
-  :deep(.el-pagination) {
-    justify-content: flex-end;
-  }
-}
-</style>

src/components/table/bg-table.vue

-<template>
-  <el-table
-    ref="bgTable"
-    :data="tablerows"
-    style="width: 100%"
-    class="bg-table"
-    :height="height"
-    stripe
-    tooltip-effect="light"
-    :border="border"
-    @selection-change="selectAction"
-    @sort-change="sortChange"
-  >
-    <!-- 多选框 -->
-    <el-table-column
-      v-if="isSelect"
-      type="selection"
-      :selectable="selectables"
-      width="50"
-      align="center"
-    >
-    </el-table-column>
-    <el-table-column
-      v-if="isIndex"
-      type="index"
-      :label="indexLabel"
-      width="50"
-    >
-      <!-- 序号 -->
-    </el-table-column>
-    <el-table-column
-      v-for="(header, index) in headers"
-      :key="'col_' + index"
-      :width="header.width"
-      :min-width="header.minWidth"
-      :align="header.align"
-      :show-overflow-tooltip="showOverflowTooltip"
-      :sortable="header.sortable ? 'custom' : null"
-      :prop="header.prop"
-    >
-      <template #header>
-        <p class="text-header">{{ header.label }}</p>
-      </template>
-      <template #default="scope">
-        <slot
-          v-if="$slots[header.prop]"
-          :index="scope.$index"
-          :name="header.prop"
-          :row="scope.row"
-          :header="header"
-        />
-        <template v-else>
-          {{ scope.row[header.prop] || "-" }}
-        </template>
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script setup>
-import {
-  defineProps,
-  onMounted,
-  computed,
-  defineEmits,
-  watch,
-  getCurrentInstance,
-} from "vue";
-const { proxy } = getCurrentInstance();
-
-let props = defineProps({
-  headers: { type: Array, default: () => [] }, // 表头
-  rows: { type: Array, default: () => [] }, // 表格数据
-  //标签列是要展开所有内容
-  showOverflowTooltip: {
-    type: Boolean,
-    default: true,
-  },
-  //table高度
-  height: {
-    type: String,
-    default: undefined,
-  },
-  // 是否有多选列
-  isSelect: {
-    type: Boolean,
-    default: false,
-  },
-  // 是否有border
-  border: {
-    type: Boolean,
-    default: false,
-  },
-  isIndex: {
-    type: Boolean,
-    default: false,
-  },
-  indexLabel: {
-    type: String,
-    default: "序号",
-  },
-});
-const emits = defineEmits(["select", "sortchange"]);
-
-// 权限展示列的时候计算属性
-let tablerows = computed(() => {
-  return props.rows;
-});
-
-watch(
-  props.rows,
-  (newValue) => {
-    toggleRowSelection(newValue);
-  },
-  { immediate: false, deep: true }
-);
-// ***********多选框功能start
-// 选中项
-const selectAction = (selection) => {
-  emits("select", selection);
-};
-// 后端返回数据带选中内容
-const toggleRowSelection = (rows) => {
-  rows.forEach((row) => {
-    if (row.isSelet == true) {
-      proxy.$nextTick(function () {
-        proxy.$refs.bgTable.toggleRowSelection(row, true);
-      });
-    }
-  });
-};
-// *********多选是否禁用**********
-const selectables = (row) => {
-  if (row.state !== 2) {
-    return true;
-  }
-};
-// ***********多选框功能end
-const clearSelection = () => {
-  proxy.$refs.bgTable.clearSelection();
-};
-
-const sortChange = (column) => {
-  emits("sortchange", column);
-};
-
-defineExpose({ clearSelection });
-</script>

src/components/warn-detail/env.js

+export const STATUS_OBJ = {
+    success: "已恢复",
+    error: '未恢复'
+}
+export const PUSH_STATUS = {
+    success: '成功',
+    error: '失败'
+}
\ No newline at end of file

src/components/warn-detail/index.vue

+<template>
+  <div class="warn-detail">
+    <div class="info">
+      <Info :labelData="labelData" :valueData="valueData" />
+    </div>
+    <div class="tabs">
+      <Tab :tabs="tabs" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Info from "./info.vue";
+import Tab from "./tab.vue";
+const props = defineProps({
+  labelData: {
+    type: Array,
+    default: () => [],
+  },
+  valueData: {
+    type: Object,
+    default: () => ({}),
+  },
+  tabs: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.warn-detail {
+  max-width: 1072px;
+  width: 100%;
+  height: 100%;
+  .tabs{
+    margin-top: 30px;
+  }
+}
+</style>

src/components/warn-detail/info.vue

+<template>
+  <div>
+    <div class="info-list" v-for="(list, index) in labelData" :key="`warn-${index}`">
+      <div class="info-item" v-for="(item, i) in list" :key="`warn-${index}-${i}`">
+        <div class="label">
+          {{ item.label }}
+        </div>
+        <div class="value">
+          <span v-if="item.prop == 'status'">
+            <span class="status" :class="`status-${valueData.status}`"></span>
+            <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
+          </span>
+          <span v-else>
+            {{ valueData[item.prop] }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { STATUS_OBJ } from "./env.js"
+
+const props = defineProps({
+  labelData: {
+    type: Array,
+    default: () => ({}),
+  },
+  valueData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.info-list {
+  display: flex;
+  align-items: center;
+  border-top: 1px solid #dadee7;
+  border-left: 1px solid #dadee7;
+  &:last-of-type {
+    border-bottom: 1px solid #dadee7;
+  }
+  .info-item {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 48px;
+    line-height: 46px;
+    font-size: 14px;
+    color: #404a62;
+    .label {
+      height: 100%;
+      width: 144px;
+      background-color: #f7f7f9;
+      border-right: 1px solid #dadee7;
+      padding: 0 16px;
+    }
+    .value {
+      height: 100%;
+      flex: 1;
+      border-right: 1px solid #dadee7;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      .status {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-right: 8px;
+        $statusObj: (
+          success: #48ad97,
+          error: #d75138,
+        );
+        @each $status, $color in $statusObj {
+          &-#{$status} {
+            background-color: $color;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/warn-detail/tab.vue

+<template>
+  <el-tabs v-model="activeTab" tab-position="top">
+    <el-tab-pane v-for="item in tabs" :key="item.prop" :label="item.label" :name="item.prop">
+      <bg-table
+        ref="listtable"
+        :headers="headers[item.prop]"
+        :rows="item.lists"
+        height="100%"
+        :isIndex="true"
+        :stripe="true">
+        <template #person="{ row }">
+          <span>{{ row.person.join(",") }}</span>
+        </template>
+        <template #status="{ row }">
+          <span v-if="item.prop == 'push'">
+            <span class="status" :class="`status-${row.status}`"></span>
+            <span>{{ STATUS_OBJ[row.status] }}</span>
+          </span>
+          <span v-else :class="`tab-${row.status}`">
+            {{ STATUS_OBJ[row.status] }}
+          </span>
+        </template>
+      </bg-table>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { STATUS_OBJ } from "./env.js";
+const activeTab = ref("push");
+const props = defineProps({
+  tabs: {
+    type: Array,
+    default: () => [],
+  },
+});
+const headers = {
+  push: [
+    {
+      prop: "method",
+      label: "通知方式",
+    },
+    {
+      prop: "person",
+      label: "接收人员",
+    },
+    {
+      prop: "push_time",
+      label: "推送时间",
+    },
+    {
+      prop: "push_type",
+      label: "推送类型",
+    },
+    {
+      prop: "status",
+      label: "状态",
+    },
+  ],
+  dispose: [
+    {
+      prop: "status",
+      label: "状态",
+    },
+    {
+      prop: "feedback",
+      label: "处置反馈",
+    },
+    {
+      prop: "feedback_time",
+      label: "处置反馈",
+    },
+    {
+      prop: "feedback_person",
+      label: "反馈人员",
+    },
+  ],
+};
+</script>
+
+<style lang="scss" scoped>
+$statusObj: (
+  success: #48ad97,
+  error: #d75138,
+);
+.tab {
+  @each $status, $color in $statusObj {
+    &-#{$status} {
+      color: $color;
+    }
+  }
+}
+.status {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 8px;
+  @each $status, $color in $statusObj {
+    &-#{$status} {
+      background-color: $color;
+    }
+  }
+}
+</style>

src/page/main/ticket/business-ticket-list/detail/index.vue

+<template>
+  <div class="business-ticket-list">
+    <div class="breadcrumb">
+      <bg-breadcrumb />
+    </div>
+    <div class="content"></div>
+  </div>
+</template>
+
+<script setup>
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+</script>
+
+<style lang="scss" scoped>
+.business-ticket-list {
+  width: 100%;
+  height: 100%;
+  padding: 0 24px 16px;
+  .breadcrumb {
+    width: 100%;
+    height: 46px;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 46px);
+    background-color: #ffffff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+  }
+}
+</style>

src/page/main/ticket/business-ticket-list/index.vue

 <template>
-  <div>业务工单列表</div>
+  <div class="business-ticket-list">
+    <div class="breadcrumb">
+      <bg-breadcrumb />
+    </div>
+    <div class="content">
+      <bg-filter-group
+        @search="changeSearch"
+        v-model="filter.key_word"
+        placeholder="请输入任务名称">
+        <template v-slot:filter_group>
+          <div class="left-filter filter_list">
+            <div class="filter_item">
+              <span class="filter_title">工单等级</span>
+              <el-select v-model="filter.ticket_level" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in ticketLevelOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">状态</span>
+              <el-select v-model="filter.status" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in statusOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">创建时间</span>
+              <el-date-picker
+                v-model="filter.create_time"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间">
+              </el-date-picker>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">完成时间</span>
+              <el-date-picker
+                v-model="filter.finish_time"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间">
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="right-action apaas_button">
+            <el-button type="primary" @click="filterAction"> 查询 </el-button>
+            <el-button type="default" @click="filterClear"> 重置 </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <div class="table_container">
+        <div class="table">
+          <bg-table
+            ref="listtable"
+            :headers="headers"
+            :rows="rows"
+            height="100%"
+            :isIndex="true"
+            :stripe="true">
+            <template #work_order_name="{ row }">
+              <div class="href" @click="goTo(row)">{{ row.work_order_name || "-" }}</div>
+            </template>
+            <template #operation="{ row }">
+              <span class="primary-edit" @click="operation(row)"> 关闭工单 </span>
+            </template>
+          </bg-table>
+          <div class="pagination_box">
+            <bg-pagination
+              :page="filter.page"
+              :size="filter.limit"
+              :total="tableTotal"
+              @change-page="changePage"
+              @change-size="changeSize">
+            </bg-pagination>
+          </div>
+        </div>
+      </div>
+      <!-- <el-button type="primary" size="default" @click="feedback">
+        处置反馈
+      </el-button> -->
+      <!-- <ManualDistributionForm ref="form" :disabled="true" /> -->
+      <CloseTicket v-model:visible="visible" :active_row="active_row" />
+      <!-- <ManualDistribution v-model:visible="visible" /> -->
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+// import { nextTick, onBeforeMount, onMounted, ref } from "vue";
+// import ManualDistribution from "@/components/manual-distribution/index.vue";
+// import ManualDistributionForm from "@/components/manual-distribution/form.vue";
+// const form = ref(null);
+// onMounted(async () => {
+//   await nextTick();
+//   form.value.init({
+//     method: ["1", "2"],
+//     lists: [
+//       {
+//         user_id: 1,
+//         user_name: 1111,
+//         phone: "13011111111",
+//       },
+//     ],
+//   });
+// });
+import { ref, reactive, onMounted, nextTick } from "vue";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import FeedBack from "../modules/feedback.vue";
+import CloseTicket from "./close-ticket.vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const filter = reactive({
+  ticket_level: "",
+  key_word: "",
+  create_time: [],
+  finish_time: [],
+  status: "",
+  page: 1,
+  limit: 10,
+});
+const filterClear = () => {
+  filter.ticket_level = "";
+  filter.key_word = "";
+  filter.status = "";
+  filter.create_time = [];
+  filter.finish_time = [];
+  filter.limit = 10;
+  filter.page = 1;
+  changePage(1);
+}; // 重置筛选项
+const tableTotal = ref(0);
+const ticketLevelOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+const statusOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+let headers = reactive([
+  {
+    label: "工单名称",
+    prop: "work_order_name",
+    align: "left",
+  },
+  {
+    label: "工单等级",
+    prop: "work_order_level",
+    align: "left",
+  },
+  {
+    label: "工单状态",
+    prop: "work_order_status",
+    align: "left",
+  },
+  {
+    label: "下发对象",
+    prop: "distribute_target",
+    align: "left",
+  },
+  {
+    label: "创建人",
+    prop: "create_by",
+    align: "left",
+  },
+  {
+    label: "创建时间",
+    prop: "create_time",
+    align: "left",
+  },
+  {
+    label: "完成时间",
+    prop: "finish_time",
+    align: "left",
+  },
+  {
+    label: "操作",
+    prop: "operation",
+    align: "left",
+    width: "80px",
+  },
+]);
+let rows = ref([
+  { work_order_name: 11, id: 111 },
+  { work_order_name: 22, id: 222 },
+  { work_order_name: 33, id: 333 },
+]);
+const changeSize = (size) => {
+  filter.limit = size;
+  changePage(1);
+};
 
-<style lang="scss" scoped></style>
+const changePage = (page) => {
+  filter.page = page;
+  getTableRows();
+};
+const changeSearch = (val) => {
+  filter.key_word = val;
+  changePage(1);
+}; // 表格关键字筛选
+
+const filterAction = () => {
+  changePage(1);
+}; // 查询按钮
+onMounted(() => {
+  getTableRows();
+});
+
+const getTableRows = async () => {
+  let [createStartTime = "", createEndTime = ""] = filter.create_time || [];
+  let [finishStartTime = "", finishEndTime = ""] = filter.finish_time || [];
+  let urlParams = {
+    ...filter,
+    createStartTime,
+    createEndTime,
+    finishStartTime,
+    finishEndTime,
+  };
+  Reflect.deleteProperty(urlParams, "create_time");
+  Reflect.deleteProperty(urlParams, "finish_time");
+  console.log("urlParams: ", urlParams);
+  //   const { data, total } = await instanceList(urlParams);
+  //   rows.value = data.list || [];
+  //   pagination.total = data.total_count;
+};
+// 处置反馈
+const visible = ref(false);
+const active_row = ref(null);
+const operation = (row) => {
+  active_row.value = row;
+  visible.value = true;
+};
+const goTo = ({ id }) => {
+  router.push({
+    path: "/ticket/business-ticket-list/detail",
+    query: {
+      id,
+    },
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.business-ticket-list {
+  width: 100%;
+  height: 100%;
+  padding: 0 24px 16px;
+  .breadcrumb {
+    width: 100%;
+    height: 46px;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 46px);
+    background-color: #ffffff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    :deep(.bg-filter-group) {
+      padding: 0;
+    }
+    .filter-group {
+      .left-filter {
+        display: flex;
+        justify-content: start;
+        flex-wrap: wrap;
+      }
+      .right-action {
+        white-space: nowrap;
+      }
+    }
+    .table_container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      .table {
+        position: absolute;
+        position: absolute;
+        flex: 1;
+        width: 100%;
+        height: calc(100% - 48px);
+        .href {
+          font-size: 14px;
+          color: #3759be;
+          cursor: pointer;
+        }
+      }
+    }
+    .bg-pagination {
+      bottom: unset;
+    }
+  }
+}
+</style>

src/page/main/ticket/business-ticket-manage/detail/index.vue

+<template>
+  <div class="business-manage-detail">
+    <div class="breadcrumb">
+      <bg-breadcrumb />
+    </div>
+    <div class="content"></div>
+  </div>
+</template>
+
+<script setup>
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+</script>
+
+<style lang="scss" scoped>
+.business-manage-detail {
+  width: 100%;
+  height: 100%;
+  padding: 0 24px 16px;
+  .breadcrumb {
+    width: 100%;
+    height: 46px;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 46px);
+    background-color: #ffffff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+  }
+}
+</style>

src/page/main/ticket/business-ticket-manage/index.vue

 <template>
-  <div>业务工单管理</div>
+  <div class="my-alert">
+    <div class="breadcrumb">
+      <bg-breadcrumb />
+    </div>
+    <div class="content">
+      <bg-filter-group
+        @search="changeSearch"
+        v-model="filter.key_word"
+        placeholder="请输入任务名称">
+        <template v-slot:left_action>
+          <div class="apaas_button">
+            <el-button type="primary" @click="AddWorkOrder">
+              <bg-icon
+                style="font-size: 12px; color: #fff; margin-right: 8px"
+                icon="#bg-ic-add"></bg-icon>
+              新增
+            </el-button>
+            <el-button type="primary" @click="delBatch"> 批量删除 </el-button>
+            <div class="select_text">
+              <span>已选择</span>
+              <span class="num">{{ selectedItems.length }}</span>
+              <span>项</span>
+              <span class="can_click_text" @click="clearSelected">清空</span>
+            </div>
+          </div>
+        </template>
+        <template v-slot:filter_group>
+          <div class="left-filter filter_list">
+            <div class="filter_item">
+              <span class="filter_title">工单等级</span>
+              <el-select v-model="filter.ticket_level" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in ticketLevelOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">状态</span>
+              <el-select v-model="filter.status" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in statusOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">定时规则</span>
+              <el-select v-model="filter.rule" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in ruleOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">创建时间</span>
+              <el-date-picker
+                v-model="filter.create_time"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间">
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="right-action apaas_button">
+            <el-button type="primary" @click="filterAction"> 查询 </el-button>
+            <el-button type="default" @click="filterClear"> 重置 </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <div class="table_container">
+        <div class="table">
+          <bg-table
+            ref="listtable"
+            :headers="headers"
+            :rows="rows"
+            height="100%"
+            :isIndex="true"
+            :select="true"
+            @selectAc="selectRows"
+            :stripe="true">
+            <template #work_order_name="{ row }">
+              <div class="href" @click="goTo(row)">{{ row.work_order_name || "-" }}</div>
+            </template>
+            <template #status="{ row }">
+              <span>
+                <span>{{ status[row.status] }}</span>
+                <span v-if="row.status != 3"> （{{ row.finish }}/{{ row.all }}） </span>
+              </span>
+            </template>
+            <template #operation="{ row }">
+              <div class="table-operation">
+                <span class="primary-edit" @click="operation(row)"> 手动下发 </span>
+                <span class="line"></span>
+                <span class="primary-edit" @click="Edit(row)"> 编辑 </span>
+                <span class="line"></span>
+                <span class="primary-edit" @click="Delete(row)"> 删除 </span>
+              </div>
+            </template>
+          </bg-table>
+          <div class="pagination_box">
+            <bg-pagination
+              :page="filter.page"
+              :size="filter.limit"
+              :total="tableTotal"
+              @change-page="changePage"
+              @change-size="changeSize">
+            </bg-pagination>
+          </div>
+        </div>
+      </div>
+
+      <ManualDistribution v-model:visible="visible" :active_row="active_row" />
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, reactive, onMounted, nextTick, computed } from "vue";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import ManualDistribution from "@/components/manual-distribution/index.vue";
+const status = {
+  1: "已完成",
+  2: "待处置",
+  3: "已关闭",
+};
+import { useRouter } from "vue-router";
+const router = useRouter();
+const filter = reactive({
+  ticket_level: "",
+  key_word: "",
+  create_time: [],
+  rule: [],
+  status: "",
+  page: 1,
+  limit: 10,
+});
+const filterClear = () => {
+  filter.ticket_level = "";
+  filter.key_word = "";
+  filter.status = "";
+  filter.create_time = [];
+  filter.rule = [];
+  filter.limit = 10;
+  filter.page = 1;
+  changePage(1);
+}; // 重置筛选项
+const tableTotal = ref(0);
+const ticketLevelOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+const statusOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+const ruleOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+let headers = reactive([
+  {
+    label: "工单名称",
+    prop: "work_order_name",
+    align: "left",
+    href: {
+      baseurl: "/ticket/business-ticket-manage/detail",
+      params: { id: "id", name: "work_order_name" },
+    },
+  },
+  {
+    label: "工单等级",
+    prop: "work_order_level",
+    align: "left",
+  },
+  {
+    label: "实例工单数",
+    prop: "example_work_order_num",
+    align: "left",
+  },
+  {
+    label: "下发对象",
+    prop: "distribute_target",
+    align: "left",
+  },
+  {
+    label: "定时规则",
+    prop: "timing_rules",
+    align: "left",
+  },
+  {
+    label: "定时是否启用",
+    prop: "status",
+    align: "left",
+    width: 150,
+  },
+  {
+    label: "创建人",
+    prop: "create_by",
+    align: "left",
+  },
+  {
+    label: "创建时间",
+    prop: "create_time",
+    align: "left",
+  },
+  {
+    label: "操作",
+    prop: "operation",
+    align: "left",
+    width: "200px",
+  },
+]);
+let rows = ref([
+  { work_order_name: 11, id: 111, status: 1, finish: 10, all: 10 },
+  { work_order_name: 22, id: 222, status: 2, finish: 5, all: 10 },
+  { work_order_name: 33, id: 333, status: 3, finish: 0, all: 10 },
+]);
+const changeSize = (size) => {
+  filter.limit = size;
+  changePage(1);
+};
+
+const changePage = (page) => {
+  filter.page = page;
+  getTableRows();
+};
+const changeSearch = (val) => {
+  filter.key_word = val;
+  changePage(1);
+}; // 表格关键字筛选
+
+const filterAction = () => {
+  changePage(1);
+}; // 查询按钮
+onMounted(() => {
+  getTableRows();
+});
+
+const getTableRows = async () => {
+  let [createStartTime = "", createEndTime = ""] = filter.create_time || [];
+  let urlParams = {
+    ...filter,
+    createStartTime,
+    createEndTime,
+  };
+  Reflect.deleteProperty(urlParams, "create_time");
+  console.log("urlParams: ", urlParams);
+  //   const { data, total } = await instanceList(urlParams);
+  //   rows.value = data.list || [];
+  //   pagination.total = data.total_count;
+};
+// 手动下发
+const visible = ref(false);
+const active_row = ref(null);
+const operation = (row) => {
+  active_row.value = row;
+  visible.value = true;
+};
+// 编辑调用
+const Edit = (row) => {
+  active_row.value = row;
+};
+// 删除调用
+const selectedItems = ref([]);
+const Delete = (row) => {
+  selectedItems.value = [row];
+  console.log(del_ids.value);
+};
+const del_ids = computed(() => {
+  return selectedItems.value.map((e) => e.id) || [];
+});
+// 表格选中
+const selectRows = ({ selection }) => {
+  selectedItems.value = selection;
+};
+// 新增
+const AddWorkOrder = () => {};
+// 批量删除
+const delBatch = () => {
+  console.log(del_ids.value);
+};
+// 清空选中
+const listtable = ref(null);
+const clearSelected = () => {
+  listtable.value.clearTable();
+};
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.my-alert {
+  width: 100%;
+  height: 100%;
+  padding: 0 24px 16px;
+  .breadcrumb {
+    width: 100%;
+    height: 46px;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 46px);
+    background-color: #ffffff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    :deep(.bg-filter-group) {
+      padding: 0;
+    }
+    .select_text {
+      display: inline-block;
+      margin-left: 40px;
+      font-size: 14px;
+      color: #404a62;
+      .num {
+        color: #202531;
+        font-weight: 700;
+        margin: 0 3px;
+      }
+      .can_click_text {
+        margin-left: 24px;
+        cursor: pointer;
+      }
+    }
+    .filter-group {
+      .left-filter {
+        display: flex;
+        justify-content: start;
+        flex-wrap: wrap;
+      }
+      .right-action {
+        white-space: nowrap;
+      }
+    }
+    .table_container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      .table {
+        position: absolute;
+        flex: 1;
+        width: 100%;
+        height: calc(100% - 48px);
+        .href {
+          font-size: 14px;
+          color: #3759be;
+          cursor: pointer;
+        }
+      }
+    }
+    .bg-pagination {
+      bottom: unset;
+    }
+    .table-operation {
+      display: flex;
+      align-items: center;
+      .line {
+        width: 1px;
+        height: 14px;
+        background-color: #c1c7d7;
+        margin: 0 16px;
+        display: inline-block;
+      }
+    }
+  }
+}
+</style>

src/page/main/work-order/business-work-order-manage/detail.vue → src/page/main/ticket/modules/warn-detail.vue

 <template>
-    <div>
-business-manage-detail
+    <div class="warn-detail">
+        <div class="detail-info">
+
+        </div>
     </div>
 </template>
 
@@ -9,5 +11,9 @@ business-manage-detail
 </script>
 
 <style lang="scss" scoped>
-
+.warn-detail{
+    max-width: 1072px;
+    width: 100%;
+    height: 100%;
+}
 </style>
\ No newline at end of file

src/page/main/ticket/my-business-ticket/detail/index.vue

+<template>
+  <div class="my-business-detail">
+    <div class="breadcrumb">
+      <bg-breadcrumb />
+    </div>
+    <div class="content"></div>
+  </div>
+</template>
+
+<script setup>
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+</script>
+
+<style lang="scss" scoped>
+.my-business-detail {
+  width: 100%;
+  height: 100%;
+  padding: 0 24px 16px;
+  .breadcrumb {
+    width: 100%;
+    height: 46px;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 46px);
+    background-color: #ffffff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+  }
+}
+</style>

src/page/main/ticket/my-business-ticket/index.vue

 <template>
-  <div>我的业务工单</div>
+  <div class="my-business-ticket">
+    <div class="breadcrumb">
+      <bg-breadcrumb />
+    </div>
+    <div class="content">
+      <bg-filter-group
+        @search="changeSearch"
+        v-model="filter.key_word"
+        placeholder="请输入角色名称">
+        <template v-slot:filter_group>
+          <div class="left-filter filter_list">
+            <div class="filter_item">
+              <span class="filter_title">工单等级</span>
+              <el-select v-model="filter.ticket_level" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in ticketLevelOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">状态</span>
+              <el-select v-model="filter.status" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in statusOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">创建时间</span>
+              <el-date-picker
+                v-model="filter.create_time"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间">
+              </el-date-picker>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">完成时间</span>
+              <el-date-picker
+                v-model="filter.finish_time"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间">
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="right-action apaas_button">
+            <el-button type="primary" @click="filterAction"> 查询 </el-button>
+            <el-button type="default" @click="filterClear"> 重置 </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <div class="table_container">
+        <div class="table">
+          <bg-table
+            ref="listtable"
+            :headers="headers"
+            :rows="rows"
+            height="100%"
+            :isIndex="true"
+            :stripe="true">
+            <template #work_order_name="{ row }">
+              <div class="href" @click="goTo(row)">{{ row.work_order_name || "-" }}</div>
+            </template>
+            <template #operation="{ row }">
+              <span class="primary-edit" @click="operation(row)"> 处置反馈 </span>
+            </template>
+          </bg-table>
+          <div class="pagination_box">
+            <bg-pagination
+              :page="filter.page"
+              :size="filter.limit"
+              :total="tableTotal"
+              @change-page="changePage"
+              @change-size="changeSize">
+            </bg-pagination>
+          </div>
+        </div>
+      </div>
+      <!-- <el-button type="primary" size="default" @click="feedback">
+        处置反馈
+      </el-button> -->
+      <!-- <ManualDistributionForm ref="form" :disabled="true" /> -->
+      <FeedBack v-model:visible="visible" :active_row="active_row" />
+      <!-- <ManualDistribution v-model:visible="visible" /> -->
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+// import { nextTick, onBeforeMount, onMounted, ref } from "vue";
+// import ManualDistribution from "@/components/manual-distribution/index.vue";
+// import ManualDistributionForm from "@/components/manual-distribution/form.vue";
+// const form = ref(null);
+// onMounted(async () => {
+//   await nextTick();
+//   form.value.init({
+//     method: ["1", "2"],
+//     lists: [
+//       {
+//         user_id: 1,
+//         user_name: 1111,
+//         phone: "13011111111",
+//       },
+//     ],
+//   });
+// });
+import { ref, reactive, onMounted, nextTick } from "vue";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import FeedBack from "../modules/feedback.vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const filter = reactive({
+  ticket_level: "",
+  key_word: "",
+  create_time: [],
+  finish_time: [],
+  status: "",
+  page: 1,
+  limit: 10,
+});
+const filterClear = () => {
+  filter.ticket_level = "";
+  filter.key_word = "";
+  filter.status = "";
+  filter.create_time = [];
+  filter.finish_time = [];
+  filter.limit = 10;
+  filter.page = 1;
+  changePage(1);
+}; // 重置筛选项
+const tableTotal = ref(0);
+const ticketLevelOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+const statusOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+let headers = reactive([
+  {
+    label: "工单名称",
+    prop: "work_order_name",
+    align: "left",
+  },
+  {
+    label: "工单等级",
+    prop: "ticket_level",
+    align: "left",
+  },
+  {
+    label: "工单状态",
+    prop: "work_order_status",
+    align: "left",
+  },
+  {
+    label: "下发对象",
+    prop: "distribute_target",
+    align: "left",
+  },
+  {
+    label: "创建人",
+    prop: "create_by",
+    align: "left",
+  },
+  {
+    label: "创建时间",
+    prop: "create_time",
+    align: "left",
+  },
+  {
+    label: "完成时间",
+    prop: "finish_time",
+    align: "left",
+  },
+  {
+    label: "操作",
+    prop: "operation",
+    align: "left",
+    width: "80px",
+  },
+]);
+let rows = ref([
+  { work_order_name: 11, id: 111 },
+  { work_order_name: 22, id: 222 },
+  { work_order_name: 33, id: 333 },
+]);
+const changeSize = (size) => {
+  filter.limit = size;
+  changePage(1);
+};
 
-<style lang="scss" scoped></style>
+const changePage = (page) => {
+  filter.page = page;
+  getTableRows();
+};
+const changeSearch = (val) => {
+  filter.key_word = val;
+  changePage(1);
+}; // 表格关键字筛选
+
+const filterAction = () => {
+  changePage(1);
+}; // 查询按钮
+onMounted(() => {
+  getTableRows();
+});
+
+const getTableRows = async () => {
+  let [createStartTime = "", createEndTime = ""] = filter.create_time || [];
+  let [finishStartTime = "", finishEndTime = ""] = filter.finish_time || [];
+  let urlParams = {
+    ...filter,
+    createStartTime,
+    createEndTime,
+    finishStartTime,
+    finishEndTime,
+  };
+  Reflect.deleteProperty(urlParams, "create_time");
+  Reflect.deleteProperty(urlParams, "finish_time");
+  console.log("urlParams: ", urlParams);
+  //   const { data, total } = await instanceList(urlParams);
+  //   rows.value = data.list || [];
+  //   pagination.total = data.total_count;
+};
+// 处置反馈
+const visible = ref(false);
+const active_row = ref(null);
+const operation = (row) => {
+  active_row.value = row;
+  visible.value = true;
+};
+const goTo = ({ id }) => {
+  router.push({
+    path: "/ticket/my-business-ticket/detail",
+    query: {
+      id,
+    },
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.my-business-ticket {
+  width: 100%;
+  height: 100%;
+  padding: 0 24px 16px;
+  .breadcrumb {
+    width: 100%;
+    height: 46px;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 46px);
+    background-color: #ffffff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    :deep(.bg-filter-group) {
+      padding: 0;
+    }
+    .filter-group {
+      .left-filter {
+        display: flex;
+        justify-content: start;
+        flex-wrap: wrap;
+      }
+      .right-action {
+        white-space: nowrap;
+      }
+    }
+    .table_container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      .table {
+        position: absolute;
+        flex: 1;
+        width: 100%;
+        height: calc(100% - 48px);
+        .href {
+          font-size: 14px;
+          color: #3759be;
+          cursor: pointer;
+        }
+      }
+    }
+    .bg-pagination {
+      bottom: unset;
+    }
+  }
+}
+</style>

src/page/main/ticket/my-warn-ticket/detail/index.vue

+<template>
+  <div class="my-warn-detail">
+    <div class="breadcrumb">
+      <bg-breadcrumb />
+    </div>
+    <div class="content">
+      <warn-detail :label-data="labelData" :value-data="info" :tabs="tabs"></warn-detail>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import warnDetail from "@/components/warn-detail/index.vue";
+const labelData = [
+  [
+    {
+      label: "预警点",
+      prop: "warning_point",
+    },
+  ],
+  [
+    {
+      label: "预警指标",
+      prop: "warning_index",
+    },
+    {
+      label: "风险等级",
+      prop: "risk_level",
+    },
+  ],
+  [
+    {
+      label: "状态",
+      prop: "status",
+    },
+    {
+      label: "预警阀值",
+      prop: "warning_threshold",
+    },
+  ],
+  [
+    {
+      label: "当前报警值",
+      prop: "current_alarm_value",
+    },
+    {
+      label: "预警时间",
+      prop: "warning_time",
+    },
+  ],
+];
+const info = {
+  warning_point: "SaaS层/数据治理系统",
+  warning_index: "响应时间超时",
+  risk_level: "一般风险",
+  status: "success",
+  warning_threshold: "10ms",
+  current_alarm_value: "16ms",
+  warning_time: "2020-01-01 00:00:00",
+};
+const tabs = [
+  {
+    label: "推送记录",
+    prop: "push",
+    lists: [
+      {
+        method: "短信",
+        person: [11, 22, 33, 44],
+        push_time: "2022-07-29 10:23:59",
+        push_type: "自动推送",
+        status: "success",
+      },
+      {
+        method: "钉钉",
+        person: [11, 33, 44],
+        push_time: "2022-07-29 10:23:59",
+        push_type: "自动推送",
+        status: "error",
+      },
+    ],
+  },
+  {
+    label: "处置记录",
+    prop: "dispose",
+    lists: [
+      {
+        status: "error",
+        feedback: "暂时无法处理，需要时间",
+        feedback_time: "2022-07-29 10:23:59",
+        feedback_person: "张三",
+      },
+      {
+        status: "success",
+        feedback: "暂时无法处理，需要时间",
+        feedback_time: "2022-07-29 10:23:59",
+        feedback_person: "张三",
+      },
+    ],
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+.my-warn-detail {
+  width: 100%;
+  height: 100%;
+  padding: 0 24px 16px;
+  .breadcrumb {
+    width: 100%;
+    height: 46px;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 46px);
+    background-color: #ffffff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    padding: 32px;
+  }
+}
+</style>

src/page/main/ticket/my-warn-ticket/index.vue

 <template>
-  <div>我的预警工单</div>
+  <div class="my-warn-ticket">
+    <div class="breadcrumb">
+      <bg-breadcrumb />
+    </div>
+    <div class="content">
+      <bg-filter-group
+        @search="changeSearch"
+        v-model="filter.key_word"
+        placeholder="请输入角色名称">
+        <template v-slot:filter_group>
+          <div class="left-filter filter_list">
+            <div class="filter_item">
+              <span class="filter_title">预警分类</span>
+              <el-select v-model="filter.warning_type" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in wainingTypeOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">预警指标</span>
+              <el-select v-model="filter.warning_index" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in wainingIndexOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">风险等级</span>
+              <el-select v-model="filter.risk_level" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in riskLevelOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">状态</span>
+              <el-select v-model="filter.status" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in statusOptions"
+                  :key="'pushOptions' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">预警时段</span>
+              <el-date-picker
+                v-model="filter.date"
+                type="datetimerange"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                range-separator="-"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间">
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="right-action apaas_button">
+            <el-button type="primary" @click="filterAction"> 查询 </el-button>
+            <el-button type="default" @click="filterClear"> 重置 </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <div class="table_container">
+        <div class="table">
+          <bg-table
+            ref="listtable"
+            :headers="headers"
+            :rows="rows"
+            height="100%"
+            :isIndex="true"
+            :stripe="true">
+            <template #warning_point="{ row }">
+              <div class="href" @click="goTo(row)">{{ row.warning_point || "-" }}</div>
+            </template>
+            <template #operation="{ row }">
+              <span class="primary-edit" @click="operation(row)"> 处置反馈 </span>
+            </template>
+          </bg-table>
+          <div class="pagination_box">
+            <bg-pagination
+              :page="filter.page"
+              :size="filter.limit"
+              :total="tableTotal"
+              @change-page="changePage"
+              @change-size="changeSize">
+            </bg-pagination>
+          </div>
+        </div>
+      </div>
+      <!-- <el-button type="primary" size="default" @click="feedback">
+        处置反馈
+      </el-button> -->
+      <!-- <ManualDistributionForm ref="form" :disabled="true" /> -->
+      <!-- <ManualDistribution v-model:visible="visible" /> -->
+    </div>
+    <FeedBack v-model:visible="visible" :active_row="active_row" />
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+// import { nextTick, onBeforeMount, onMounted, ref } from "vue";
+// import ManualDistribution from "@/components/manual-distribution/index.vue";
+// import ManualDistributionForm from "@/components/manual-distribution/form.vue";
+// const form = ref(null);
+// onMounted(async () => {
+//   await nextTick();
+//   form.value.init({
+//     method: ["1", "2"],
+//     lists: [
+//       {
+//         user_id: 1,
+//         user_name: 1111,
+//         phone: "13011111111",
+//       },
+//     ],
+//   });
+// });
+import { ref, reactive, onMounted, nextTick } from "vue";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import FeedBack from "../modules/feedback.vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const filter = reactive({
+  warning_type: "",
+  key_word: "",
+  warning_index: "",
+  risk_level: "",
+  status: "",
+  date: [],
+  page: 1,
+  limit: 10,
+});
+const tableTotal = ref(0);
+const filterClear = () => {
+  filter.warning_type = "";
+  filter.key_word = "";
+  filter.warning_index = "";
+  filter.risk_level = "";
+  filter.status = "";
+  filter.date = [];
+  filter.limit = 10;
+  filter.page = 1;
+  changePage(1);
+}; // 重置筛选项
+const wainingTypeOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+const wainingIndexOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+const riskLevelOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+const statusOptions = ref([
+  {
+    value: "",
+    name: "全部",
+  },
+]);
+let headers = reactive([
+  {
+    label: "预警点",
+    prop: "warning_point",
+    align: "left",
+  },
+  {
+    label: "预警时间",
+    prop: "warning_time",
+    align: "left",
+  },
+  {
+    label: "预警分类",
+    prop: "warning_type",
+    align: "left",
+  },
+  {
+    label: "预警指标",
+    prop: "warning_index",
+    align: "left",
+  },
+  {
+    label: "风险等级",
+    prop: "risk_level",
+    align: "left",
+  },
+  {
+    label: "当前报警值",
+    prop: "current_alarm_value",
+    align: "left",
+  },
+  {
+    label: "预警阀值",
+    prop: "warning_threshold",
+    align: "left",
+  },
+  {
+    label: "推送次数",
+    prop: "push_num",
+    align: "left",
+  },
+  {
+    label: "最近推送时间",
+    prop: "push_time",
+    align: "left",
+  },
+  {
+    label: "状态",
+    prop: "status",
+    align: "left",
+  },
+  {
+    label: "操作",
+    prop: "operation",
+    align: "left",
+    width: "80px",
+  },
+]);
+let rows = ref([
+  {
+    warning_point: 1,
+    id: 1,
+  },
+]);
+const changeSize = (size) => {
+  filter.limit = size;
+  changePage(1);
+};
 
-<style lang="scss" scoped></style>
+const changePage = (page) => {
+  filter.page = page;
+  getTableRows();
+};
+const changeSearch = (val) => {
+  filter.key_word = val;
+  changePage(1);
+}; // 表格关键字筛选
+
+const filterAction = () => {
+  changePage(1);
+}; // 查询按钮
+onMounted(() => {
+  getTableRows();
+});
+
+const getTableRows = async () => {
+  let [startTime = "", endTime = ""] = filter.date || [];
+  let urlParams = {
+    ...filter,
+    startTime,
+    endTime,
+  };
+  Reflect.deleteProperty(urlParams, "date");
+  console.log("urlParams: ", urlParams);
+  //   const { data, total } = await instanceList(urlParams);
+  //   rows.value = data.list || [];
+  //   pagination.total = data.total_count;
+};
+// 处置反馈
+const visible = ref(false);
+const active_row = ref(null);
+const operation = (row) => {
+  active_row.value = row;
+  visible.value = true;
+};
+const goTo = ({ id }) => {
+  router.push({
+    path: "/ticket/my-warn-ticket/detail",
+    query: {
+      id,
+    },
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.my-warn-ticket {
+  width: 100%;
+  height: 100%;
+  padding: 0 24px 16px;
+  .breadcrumb {
+    width: 100%;
+    height: 46px;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 46px);
+    background-color: #ffffff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    :deep(.bg-filter-group) {
+      padding: 0;
+    }
+    .filter-group {
+      .left-filter {
+        display: flex;
+        justify-content: start;
+        flex-wrap: wrap;
+      }
+      .right-action {
+        white-space: nowrap;
+      }
+    }
+    .table_container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      .table {
+        position: absolute;
+        flex: 1;
+        width: 100%;
+        height: calc(100% - 48px);
+        .href {
+          font-size: 14px;
+          color: #3759be;
+          cursor: pointer;
+        }
+      }
+    }
+    .bg-pagination {
+      bottom: unset;
+    }
+  }
+}
+</style>

src/page/main/work-order/business-work-order-list/index.vue

-<template>
-  <div class="my-alert">
-    <div class="breadcrumb"></div>
-    <div class="content">
-      <bg-table-list>
-        <template #filter>
-          <bg-filter-form
-            :keyword="search"
-            placeholder="请输入任务名称"
-            :options="filter_data"
-            @keyword="keywordAction"
-            @filters="get_filter_list"
-          >
-          </bg-filter-form>
-        </template>
-
-        <template #main>
-          <bg-table
-            ref="listtable"
-            :headers="headers"
-            :rows="rows"
-            height="100%"
-            :isIndex="true"
-            :stripe="true"
-          >
-            <template #work_order_name="{ row, header }">
-              <BgTableHref
-                :row="row"
-                :header="header"
-              ></BgTableHref>
-            </template>
-            <template #operation="{ row }">
-              <span class="primary-edit" @click="operation(row)">
-                关闭工单
-              </span>
-            </template>
-          </bg-table>
-        </template>
-        <template #footer>
-          <bg-pagination
-            :pagination="pagination"
-            @sizechange="sizechange"
-            @current="current"
-          >
-          </bg-pagination>
-        </template>
-      </bg-table-list>
-      <!-- <el-button type="primary" size="default" @click="feedback">
-        处置反馈
-      </el-button> -->
-      <!-- <ManualDistributionForm ref="form" :disabled="true" /> -->
-      <CloseWorkOrder v-model:visible="visible" :active_row="active_row" />
-      <!-- <ManualDistribution v-model:visible="visible" /> -->
-    </div>
-  </div>
-</template>
-
-<script setup>
-// import { nextTick, onBeforeMount, onMounted, ref } from "vue";
-// import ManualDistribution from "@/components/manual-distribution/index.vue";
-// import ManualDistributionForm from "@/components/manual-distribution/form.vue";
-// const form = ref(null);
-// onMounted(async () => {
-//   await nextTick();
-//   form.value.init({
-//     method: ["1", "2"],
-//     lists: [
-//       {
-//         user_id: 1,
-//         user_name: 1111,
-//         phone: "13011111111",
-//       },
-//     ],
-//   });
-// });
-import { ref, reactive, onMounted, nextTick } from "vue";
-import bgTableList from "@/components/table/bg-table-list.vue";
-import BgTableHref from "@/components/table/bg-table-href.vue";
-import bgFilterForm from "@/components/table/bg-filter-form.vue";
-import bgPagination from "@/components/table/bg-pagination.vue";
-import bgTable from '@/components/table/bg-table.vue'
-import CloseWorkOrder from "./close-work-order.vue";
-let search = ref("");
-let filter_data = reactive([
-  {
-    label: "工单等级",
-    prop: "work_order_level",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "状态",
-    prop: "status",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "创建时间",
-    prop: "create_time",
-    type: "datetimerange",
-  },
-  {
-    label: "完成时间",
-    prop: "finish_time",
-    type: "datetimerange",
-  },
-]);
-let headers = reactive([
-  {
-    label: "工单名称",
-    prop: "work_order_name",
-    align: "left",
-    href: {
-      baseurl: "/work-order/my-business-detail",
-      params: { id: "id", name: "work_order_name" },
-    },
-  },
-  {
-    label: "工单等级",
-    prop: "work_order_level",
-    align: "left",
-  },
-  {
-    label: "工单状态",
-    prop: "work_order_status",
-    align: "left",
-  },
-  {
-    label: "下发对象",
-    prop: "distribute_target",
-    align: "left",
-  },
-  {
-    label: "创建人",
-    prop: "create_by",
-    align: "left",
-  },
-  {
-    label: "创建时间",
-    prop: "create_time",
-    align: "left",
-  },
-  {
-    label: "完成时间",
-    prop: "finish_time",
-    align: "left",
-  },
-  {
-    label: "操作",
-    prop: "operation",
-    align: "left",
-    width: "80px",
-  },
-]);
-let rows = ref([
-  { work_order_name: 11, id: 111 },
-  { work_order_name: 22, id: 222 },
-  { work_order_name: 33, id: 333 },
-]);
-const pagination = reactive({
-  rowsPerPage: 15,
-  page: 1,
-  total: 0,
-});
-let searchData = reactive({
-  create_time: [],
-  finish_time: [],
-  work_order_level:"",
-  status: "",
-});
-// *********分页start
-const sizechange = (val) => {
-  pagination.page = 1;
-  pagination.rowsPerPage = val;
-  init();
-};
-const current = (val) => {
-  pagination.page = val;
-  init();
-};
-onMounted(() => {
-  init();
-});
-//搜索内容
-const get_filter_list = (
-  { create_time, finish_time, work_order_level, status },
-  val
-) => {
-  pagination.rowsPerPage = 15;
-  pagination.page = 1;
-  searchData.create_time = create_time || [];
-  searchData.finish_time = finish_time || [];
-  searchData.work_order_level = work_order_level;
-  searchData.status = status;
-  search.value = val.value;
-  init();
-};
-
-const init = async () => {
-  let [createStartTime, createEndTime] = searchData.create_time;
-  let [finishStartTime, finishEndTime] = searchData.finish_time;
-  let urlParams = {
-    keyword: search.value || "",
-    createStartTime,
-    createEndTime,
-    finishStartTime,
-    finishEndTime,
-    work_order_level: searchData.work_order_level,
-    status: searchData.status,
-    page: pagination.page,
-    limit: pagination.rowsPerPage,
-  };
-  //   const { data, total } = await instanceList(urlParams);
-  //   rows.value = data.list || [];
-  //   pagination.total = data.total_count;
-};
-const keywordAction = async (val) => {
-  search.value = val;
-  init();
-};
-// 处置反馈
-const visible = ref(false);
-const active_row = ref(null);
-const operation = (row) => {
-  active_row.value = row;
-  visible.value = true;
-};
-</script>
-
-<style lang="scss" scoped>
-.my-alert {
-  width: 100%;
-  height: 100%;
-  padding: 0 24px 16px;
-  .breadcrumb {
-    width: 100%;
-    height: 46px;
-  }
-  .content {
-    width: 100%;
-    height: calc(100% - 46px);
-    background-color: #ffffff;
-    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
-    border-radius: 6px;
-  }
-}
-</style>

src/page/main/work-order/business-work-order-manage/index.vue

-<template>
-  <div class="my-alert">
-    <div class="breadcrumb"></div>
-    <div class="content">
-      <bg-table-list>
-        <template #filter>
-          <bg-filter-form
-            :keyword="search"
-            placeholder="请输入任务名称"
-            :options="filter_data"
-            @keyword="keywordAction"
-            @filters="get_filter_list"
-          >
-            <template #left_action>
-              <div class="left_action">
-                <el-button type="primary" @click="AddWorkOrder">
-                  新增
-                </el-button>
-                <el-button type="danger" @click="delBatch">
-                  批量删除
-                </el-button>
-                <span class="select-num">
-                  已选择
-                  <span>{{ selectedItems.length }}</span>
-                  项
-                </span>
-                <el-button type="primary" link @click="clearSelected"
-                  >清空</el-button
-                >
-              </div>
-            </template>
-          </bg-filter-form>
-        </template>
-
-        <template #main>
-          <bg-table
-            ref="listtable"
-            :headers="headers"
-            :rows="rows"
-            height="100%"
-            :isIndex="true"
-            :isSelect="true"
-            :stripe="true"
-            @select="selectRows"
-          >
-            <template #work_order_name="{ row, header }">
-              <BgTableHref :row="row" :header="header"></BgTableHref>
-            </template>
-            <template #status="{ row }">
-              <span>
-                <span>{{ status[row.status] }}</span>
-                <span v-if="row.status != 3">
-                  （{{ row.finish }}/{{ row.all }}）
-                </span>
-              </span>
-            </template>
-            <template #operation="{ row }">
-              <div class="table-operation">
-                <span class="primary-edit" @click="operation(row)">
-                  手动下发
-                </span>
-                <span class="line"></span>
-                <span class="primary-edit" @click="Edit(row)"> 编辑 </span>
-                <span class="line"></span>
-                <span class="primary-edit" @click="Delete(row)"> 删除 </span>
-              </div>
-            </template>
-          </bg-table>
-        </template>
-        <template #footer>
-          <bg-pagination
-            :pagination="pagination"
-            @sizechange="sizechange"
-            @current="current"
-          >
-          </bg-pagination>
-        </template>
-      </bg-table-list>
-      <ManualDistribution v-model:visible="visible" :active_row="active_row" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, nextTick, computed } from "vue";
-import bgTableList from "@/components/table/bg-table-list.vue";
-import BgTableHref from "@/components/table/bg-table-href.vue";
-import bgFilterForm from "@/components/table/bg-filter-form.vue";
-import bgPagination from "@/components/table/bg-pagination.vue";
-import bgTable from "@/components/table/bg-table.vue";
-import ManualDistribution from "@/components/manual-distribution/index.vue";
-const status = {
-  1: "已完成",
-  2: "待处置",
-  3: "已关闭",
-};
-let search = ref("");
-let filter_data = reactive([
-  {
-    label: "工单等级",
-    prop: "work_order_level",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "状态",
-    prop: "status",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "创建时间",
-    prop: "create_time",
-    type: "datetimerange",
-  },
-  {
-    label: "完成时间",
-    prop: "finish_time",
-    type: "datetimerange",
-  },
-]);
-let headers = reactive([
-  {
-    label: "工单名称",
-    prop: "work_order_name",
-    align: "left",
-    href: {
-      baseurl: "/work-order/business-manage-detail",
-      params: { id: "id", name: "work_order_name" },
-    },
-  },
-  {
-    label: "工单等级",
-    prop: "work_order_level",
-    align: "left",
-  },
-  {
-    label: "实例工单数",
-    prop: "example_work_order_num",
-    align: "left",
-  },
-  {
-    label: "下发对象",
-    prop: "distribute_target",
-    align: "left",
-  },
-  {
-    label: "定时规则",
-    prop: "timing_rules",
-    align: "left",
-  },
-  {
-    label: "定时是否启用",
-    prop: "status",
-    align: "left",
-    width: 150,
-  },
-  {
-    label: "创建人",
-    prop: "create_by",
-    align: "left",
-  },
-  {
-    label: "创建时间",
-    prop: "create_time",
-    align: "left",
-  },
-  {
-    label: "操作",
-    prop: "operation",
-    align: "left",
-    width: "200px",
-  },
-]);
-let rows = ref([
-  { work_order_name: 11, id: 111, status: 1, finish: 10, all: 10 },
-  { work_order_name: 22, id: 222, status: 2, finish: 5, all: 10 },
-  { work_order_name: 33, id: 333, status: 3, finish: 0, all: 10 },
-]);
-const pagination = reactive({
-  rowsPerPage: 15,
-  page: 1,
-  total: 0,
-});
-let searchData = reactive({
-  create_time: [],
-  finish_time: [],
-  work_order_level: "",
-  status: "",
-});
-// *********分页start
-const sizechange = (val) => {
-  pagination.page = 1;
-  pagination.rowsPerPage = val;
-  init();
-};
-const current = (val) => {
-  pagination.page = val;
-  init();
-};
-//搜索内容
-const get_filter_list = (
-  { create_time, finish_time, work_order_level, status },
-  val
-) => {
-  pagination.rowsPerPage = 15;
-  pagination.page = 1;
-  searchData.create_time = create_time || [];
-  searchData.finish_time = finish_time || [];
-  searchData.work_order_level = work_order_level;
-  searchData.status = status;
-  search.value = val.value;
-  init();
-};
-
-const init = async () => {
-  let [createStartTime, createEndTime] = searchData.create_time;
-  let [finishStartTime, finishEndTime] = searchData.finish_time;
-  let urlParams = {
-    keyword: search.value || "",
-    createStartTime,
-    createEndTime,
-    finishStartTime,
-    finishEndTime,
-    work_order_level: searchData.work_order_level,
-    status: searchData.status,
-    page: pagination.page,
-    limit: pagination.rowsPerPage,
-  };
-  //   const { data, total } = await instanceList(urlParams);
-  //   rows.value = data.list || [];
-  //   pagination.total = data.total_count;
-};
-const keywordAction = async (val) => {
-  search.value = val;
-  init();
-};
-// 手动下发
-const visible = ref(false);
-const active_row = ref(null);
-const operation = (row) => {
-  active_row.value = row;
-  visible.value = true;
-};
-// 编辑调用
-const Edit = (row) => {
-  active_row.value = row;
-};
-// 删除调用
-const selectedItems = ref([]);
-const Delete = (row) => {
-  selectedItems.value = [row];
-  console.log(del_ids.value);
-};
-const del_ids = computed(() => {
-  return selectedItems.value.map((e) => e.id) || [];
-});
-// 表格选中
-const selectRows = (items) => {
-  selectedItems.value = items;
-};
-// 新增
-const AddWorkOrder = () => {};
-// 批量删除
-const delBatch = () => {
-  console.log(del_ids.value);
-};
-// 清空选中
-const listtable = ref(null);
-const clearSelected = () => {
-  listtable.value.clearSelection();
-};
-onMounted(() => {
-  init();
-});
-</script>
-
-<style lang="scss" scoped>
-.my-alert {
-  width: 100%;
-  height: 100%;
-  padding: 0 24px 16px;
-  .breadcrumb {
-    width: 100%;
-    height: 46px;
-  }
-  .content {
-    width: 100%;
-    height: calc(100% - 46px);
-    background-color: #ffffff;
-    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
-    border-radius: 6px;
-    .select-num {
-      margin: 0 40px 0 24px;
-      font-size: 14px;
-      color: #404a62;
-      span {
-        font-weight: bold;
-      }
-    }
-    .table-operation {
-      display: flex;
-      align-items: center;
-      .line {
-        width: 1px;
-        height: 14px;
-        background-color: #c1c7d7;
-        margin: 0 16px;
-        display: inline-block;
-      }
-    }
-  }
-}
-</style>

src/page/main/work-order/my-alert-work-order/detail.vue

-<template>
-    <div>
-my-alert-detail
-    </div>
-</template>
-
-<script setup>
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file

src/page/main/work-order/my-alert-work-order/index.vue

-<template>
-  <div class="my-alert">
-    <div class="breadcrumb"></div>
-    <div class="content">
-      <bg-table-list>
-        <template #filter>
-          <bg-filter-form
-            :keyword="search"
-            placeholder="请输入预警点"
-            :options="filter_data"
-            @keyword="keywordAction"
-            @filters="get_filter_list"
-          >
-          </bg-filter-form>
-        </template>
-
-        <template #main>
-          <bg-table
-            ref="listtable"
-            :headers="headers"
-            :rows="rows"
-            height="100%"
-            :isIndex="true"
-            :stripe="true"
-          >
-            <template #warning_point="{ row, header }">
-              <BgTableHref :row="row" :header="header"></BgTableHref>
-            </template>
-            <template #operation="{ row }">
-              <span class="primary-edit" @click="operation(row)">
-                处置反馈
-              </span>
-            </template>
-          </bg-table>
-        </template>
-        <template #footer>
-          <bg-pagination
-            :pagination="pagination"
-            @sizechange="sizechange"
-            @current="current"
-          >
-          </bg-pagination>
-        </template>
-      </bg-table-list>
-      <!-- <el-button type="primary" size="default" @click="feedback">
-        处置反馈
-      </el-button> -->
-      <!-- <ManualDistributionForm ref="form" :disabled="true" /> -->
-      <FeedBack v-model:visible="visible" :active_row="active_row" />
-      <!-- <ManualDistribution v-model:visible="visible" /> -->
-    </div>
-  </div>
-</template>
-
-<script setup>
-// import { nextTick, onBeforeMount, onMounted, ref } from "vue";
-// import ManualDistribution from "@/components/manual-distribution/index.vue";
-// import ManualDistributionForm from "@/components/manual-distribution/form.vue";
-// const form = ref(null);
-// onMounted(async () => {
-//   await nextTick();
-//   form.value.init({
-//     method: ["1", "2"],
-//     lists: [
-//       {
-//         user_id: 1,
-//         user_name: 1111,
-//         phone: "13011111111",
-//       },
-//     ],
-//   });
-// });
-import { ref, reactive, onMounted, nextTick } from "vue";
-import bgTableList from "@/components/table/bg-table-list.vue";
-import BgTableHref from "@/components/table/bg-table-href.vue";
-import bgFilterForm from "@/components/table/bg-filter-form.vue";
-import bgPagination from "@/components/table/bg-pagination.vue";
-import bgTable from '@/components/table/bg-table.vue'
-import FeedBack from "../modules/feedback.vue";
-let search = ref("");
-let filter_data = reactive([
-  {
-    label: "预警分类",
-    prop: "waining_type",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "预警指标",
-    prop: "warning_index",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "风险等级",
-    prop: "risk_level",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "状态",
-    prop: "status",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "预警时段",
-    prop: "date",
-    type: "datetimerange",
-  },
-]);
-let headers = reactive([
-  {
-    label: "预警点",
-    prop: "warning_point",
-    align: "left",
-    href: {
-      baseurl: "/work-order/my-alert-detail",
-      params: { id: "warning_point" },
-    },
-  },
-  {
-    label: "预警时间",
-    prop: "warning_time",
-    align: "left",
-  },
-  {
-    label: "预警分类",
-    prop: "warning_type",
-    align: "left",
-  },
-  {
-    label: "预警指标",
-    prop: "warning_index",
-    align: "left",
-  },
-  {
-    label: "风险等级",
-    prop: "risk_level",
-    align: "left",
-  },
-  {
-    label: "当前报警值",
-    prop: "current_alarm_value",
-    align: "left",
-  },
-  {
-    label: "预警阀值",
-    prop: "warning_threshold",
-    align: "left",
-  },
-  {
-    label: "推送次数",
-    prop: "push_num",
-    align: "left",
-  },
-  {
-    label: "最近推送时间",
-    prop: "push_time",
-    align: "left",
-  },
-  {
-    label: "状态",
-    prop: "status",
-    align: "left",
-  },
-  {
-    label: "操作",
-    prop: "operation",
-    align: "left",
-    width: "80px",
-  },
-]);
-let rows = ref([{
-    warning_point:1
-}]);
-const pagination = reactive({
-  rowsPerPage: 15,
-  page: 1,
-  total: 0,
-});
-let searchData = reactive({
-  date: [],
-  waining_type: "",
-  warning_index: "",
-  risk_level: "",
-  status: "",
-});
-// *********分页start
-const sizechange = (val) => {
-  pagination.page = 1;
-  pagination.rowsPerPage = val;
-  init();
-};
-const current = (val) => {
-  pagination.page = val;
-  init();
-};
-onMounted(() => {
-  init();
-});
-//搜索内容
-const get_filter_list = (
-  { date, waining_type, warning_index, risk_level, status },
-  val
-) => {
-  pagination.rowsPerPage = 15;
-  pagination.page = 1;
-  searchData.date = date || [];
-  searchData.waining_type = waining_type;
-  searchData.warning_index = warning_index;
-  searchData.risk_level = risk_level;
-  searchData.status = status;
-  search.value = val.value;
-  init();
-};
-
-const init = async () => {
-  let [startTime, endTime] = searchData.date;
-  let urlParams = {
-    keyword: search.value || "",
-    startTime,
-    endTime,
-    waining_type: searchData.waining_type,
-    warning_index: searchData.warning_index,
-    risk_level: searchData.risk_level,
-    status: searchData.status,
-    page: pagination.page,
-    limit: pagination.rowsPerPage,
-  };
-  //   const { data, total } = await instanceList(urlParams);
-  //   rows.value = data.list || [];
-  //   pagination.total = data.total_count;
-};
-const keywordAction = async (val) => {
-  search.value = val;
-  init();
-};
-// 处置反馈
-const visible = ref(false);
-const active_row = ref(null);
-const operation = (row) => {
-  active_row.value = row;
-  visible.value = true;
-};
-</script>
-
-<style lang="scss" scoped>
-.my-alert {
-  width: 100%;
-  height: 100%;
-  padding: 0 24px 16px;
-  .breadcrumb {
-    width: 100%;
-    height: 46px;
-  }
-  .content {
-    width: 100%;
-    height: calc(100% - 46px);
-    background-color: #ffffff;
-    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
-    border-radius: 6px;
-  }
-}
-</style>

src/page/main/work-order/my-business-work-order/detail.vue

-<template>
-  <div>my-business-detail</div>
-</template>
-
-<script setup></script>
-
-<style lang="scss" scoped></style>

src/page/main/work-order/my-business-work-order/index.vue

-<template>
-  <div class="my-alert">
-    <div class="breadcrumb"></div>
-    <div class="content">
-      <bg-table-list>
-        <template #filter>
-          <bg-filter-form
-            :keyword="search"
-            placeholder="请输入任务名称"
-            :options="filter_data"
-            @keyword="keywordAction"
-            @filters="get_filter_list"
-          >
-          </bg-filter-form>
-        </template>
-
-        <template #main>
-          <bg-table
-            ref="listtable"
-            :headers="headers"
-            :rows="rows"
-            height="100%"
-            :isIndex="true"
-            :stripe="true"
-          >
-            <template #work_order_name="{ row, header }">
-              <BgTableHref
-                :row="row"
-                :header="header"
-              ></BgTableHref>
-            </template>
-            <template #operation="{ row }">
-              <span class="primary-edit" @click="operation(row)">
-                处置反馈
-              </span>
-            </template>
-          </bg-table>
-        </template>
-        <template #footer>
-          <bg-pagination
-            :pagination="pagination"
-            @sizechange="sizechange"
-            @current="current"
-          >
-          </bg-pagination>
-        </template>
-      </bg-table-list>
-      <!-- <el-button type="primary" size="default" @click="feedback">
-        处置反馈
-      </el-button> -->
-      <!-- <ManualDistributionForm ref="form" :disabled="true" /> -->
-      <FeedBack v-model:visible="visible" :active_row="active_row" />
-      <!-- <ManualDistribution v-model:visible="visible" /> -->
-    </div>
-  </div>
-</template>
-
-<script setup>
-// import { nextTick, onBeforeMount, onMounted, ref } from "vue";
-// import ManualDistribution from "@/components/manual-distribution/index.vue";
-// import ManualDistributionForm from "@/components/manual-distribution/form.vue";
-// const form = ref(null);
-// onMounted(async () => {
-//   await nextTick();
-//   form.value.init({
-//     method: ["1", "2"],
-//     lists: [
-//       {
-//         user_id: 1,
-//         user_name: 1111,
-//         phone: "13011111111",
-//       },
-//     ],
-//   });
-// });
-import { ref, reactive, onMounted, nextTick } from "vue";
-import bgTableList from "@/components/table/bg-table-list.vue";
-import BgTableHref from "@/components/table/bg-table-href.vue";
-import bgFilterForm from "@/components/table/bg-filter-form.vue";
-import bgPagination from "@/components/table/bg-pagination.vue";
-import bgTable from '@/components/table/bg-table.vue'
-import FeedBack from "../modules/feedback.vue";
-let search = ref("");
-let filter_data = reactive([
-  {
-    label: "工单等级",
-    prop: "work_order_level",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "状态",
-    prop: "status",
-    type: "select",
-    options: [
-      {
-        value: "",
-        label: "全部",
-      },
-    ],
-  },
-  {
-    label: "创建时间",
-    prop: "create_time",
-    type: "datetimerange",
-  },
-  {
-    label: "完成时间",
-    prop: "finish_time",
-    type: "datetimerange",
-  },
-]);
-let headers = reactive([
-  {
-    label: "工单名称",
-    prop: "work_order_name",
-    align: "left",
-    href: {
-      baseurl: "/work-order/my-business-detail",
-      params: { id: "id", name: "work_order_name" },
-    },
-  },
-  {
-    label: "工单等级",
-    prop: "work_order_level",
-    align: "left",
-  },
-  {
-    label: "工单状态",
-    prop: "work_order_status",
-    align: "left",
-  },
-  {
-    label: "下发对象",
-    prop: "distribute_target",
-    align: "left",
-  },
-  {
-    label: "创建人",
-    prop: "create_by",
-    align: "left",
-  },
-  {
-    label: "创建时间",
-    prop: "create_time",
-    align: "left",
-  },
-  {
-    label: "完成时间",
-    prop: "finish_time",
-    align: "left",
-  },
-  {
-    label: "操作",
-    prop: "operation",
-    align: "left",
-    width: "80px",
-  },
-]);
-let rows = ref([
-  { work_order_name: 11, id: 111 },
-  { work_order_name: 22, id: 222 },
-  { work_order_name: 33, id: 333 },
-]);
-const pagination = reactive({
-  rowsPerPage: 15,
-  page: 1,
-  total: 0,
-});
-let searchData = reactive({
-  date: [],
-  waining_type: "",
-  warning_index: "",
-  risk_level: "",
-  status: "",
-});
-// *********分页start
-const sizechange = (val) => {
-  pagination.page = 1;
-  pagination.rowsPerPage = val;
-  init();
-};
-const current = (val) => {
-  pagination.page = val;
-  init();
-};
-onMounted(() => {
-  init();
-});
-//搜索内容
-const get_filter_list = (
-  { create_time, finish_time, work_order_level, status },
-  val
-) => {
-  pagination.rowsPerPage = 15;
-  pagination.page = 1;
-  searchData.create_time = create_time || [];
-  searchData.finish_time = finish_time || [];
-  searchData.work_order_level = work_order_level;
-  searchData.status = status;
-  search.value = val.value;
-  init();
-};
-
-const init = async () => {
-  let [createStartTime, createEndTime] = searchData.create_time;
-  let [finishStartTime, finishEndTime] = searchData.finish_time;
-  let urlParams = {
-    keyword: search.value || "",
-    createStartTime,
-    createEndTime,
-    finishStartTime,
-    finishEndTime,
-    work_order_level: searchData.work_order_level,
-    status: searchData.status,
-    page: pagination.page,
-    limit: pagination.rowsPerPage,
-  };
-  //   const { data, total } = await instanceList(urlParams);
-  //   rows.value = data.list || [];
-  //   pagination.total = data.total_count;
-};
-const keywordAction = async (val) => {
-  search.value = val;
-  init();
-};
-// 处置反馈
-const visible = ref(false);
-const active_row = ref(null);
-const operation = (row) => {
-  active_row.value = row;
-  visible.value = true;
-};
-</script>
-
-<style lang="scss" scoped>
-.my-alert {
-  width: 100%;
-  height: 100%;
-  padding: 0 24px 16px;
-  .breadcrumb {
-    width: 100%;
-    height: 46px;
-  }
-  .content {
-    width: 100%;
-    height: calc(100% - 46px);
-    background-color: #ffffff;
-    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
-    border-radius: 6px;
-  }
-}
-</style>

src/router/index.js

@@ -2,63 +2,7 @@
 //不用新增父路由的文件，父路由全部由parent/parent.vue来支撑
 import { createRouter, createWebHashHistory } from "vue-router";
 import store from "../store";
-let work_order = [{
-    path: '/work-order',
-    name: 'work-order',
-    component: () =>
-        import ("../page/parent/parent.vue"),
-    redirect: "/work-order/my-alert",
-    children: [{
-            path: '/work-order/my-alert',
-            name: 'my-alert',
-            show: true,
-            component: () =>
-                import ("../page/main/work-order/my-alert-work-order/index.vue")
-        },
-        {
-            path: '/work-order/my-alert-detail',
-            name: 'my-alert-detail',
-            show: true,
-            component: () =>
-                import ("../page/main/work-order/my-alert-work-order/detail.vue")
-        },
-        {
-            path: '/work-order/my-business',
-            name: 'my-business',
-            show: true,
-            component: () =>
-                import ("../page/main/work-order/my-business-work-order/index.vue")
-        },
-        {
-            path: '/work-order/my-business-detail',
-            name: 'my-business-detail',
-            show: true,
-            component: () =>
-                import ("../page/main/work-order/my-business-work-order/detail.vue")
-        },
-        {
-            path: '/work-order/business-list',
-            name: 'business-list',
-            show: true,
-            component: () =>
-                import ("../page/main/work-order/business-work-order-list/index.vue")
-        },
-        {
-            path: '/work-order/business-manage',
-            name: 'business-manage',
-            show: true,
-            component: () =>
-                import ("../page/main/work-order/business-work-order-manage/index.vue")
-        },
-        {
-            path: '/work-order/business-manage-detail',
-            name: 'business-manage-detail',
-            show: true,
-            component: () =>
-                import ("../page/main/work-order/business-work-order-manage/detail.vue")
-        },
-    ]
-}]
+
 
 //写入初始必须有的路由
 //或者隐藏式路由，不会表现在菜单上，但是需要存在的路由
@@ -95,7 +39,6 @@ const routes = [{
         component: () =>
             import ("../page/404.vue"),
     },
-    ...work_order
 ];
 
 //重新创建router
@@ -181,7 +124,6 @@ export function generateRoutes() {
         redirect: '/404'
     })
 
-    console.log(router.getRoutes());
 
 }