Skip to content

S
so-manage-ui
Commit d972548e authored by 张耀's avatar 张耀
Browse files
Options

feat: 

对接工单管理接口和预警列表接口
parent 9de794c5
Hide whitespace changes
Inline Side-by-side
Showing with 1082 additions and 793 deletions
src/components/manual-distribution/env.js
View file @ d972548e
......@@ -3,6 +3,10 @@ export const METHODS = {
dingtalk: '钉钉',
sms: '短信'
}
export const ORDER_METHODS = {
1: '钉钉',
2: '短信'
}
// 可以新增的数量
// export const ADD_NUM = 5
......
src/components/manual-distribution/form.vue
View file @ d972548e
......@@ -8,7 +8,7 @@
style="width: 100%">
<el-form-item :label="methodLabel || '通知方式'" prop="method">
<el-checkbox-group v-model="state.form.method">
<el-checkbox v-for="(value, key) in METHODS" :key="key" :label="key">
<el-checkbox v-for="(value, key) in props.methodLists" :key="key" :label="key">
{{ value }}
</el-checkbox>
</el-checkbox-group>
......@@ -103,6 +103,10 @@ const props = defineProps({
type: String,
default: "110px",
},
methodLists: {
type: Object,
default: METHODS,
},
});
const form_ref = ref(null);
// 表单数据
......
src/components/manual-distribution/index.vue
View file @ d972548e
......@@ -4,7 +4,7 @@
<GapTitle title="手动下发"></GapTitle>
</template>
<div class="manual-distribution">
<Form :history="history" ref="form" />
<Form labelWidth="80px" :methodLists="ORDER_METHODS" :history="history" ref="form" />
</div>
<template #footer>
<el-button size="default" @click="Close">关闭</el-button>
......@@ -17,6 +17,9 @@
import GapTitle from "@/components/gap-title.vue";
import Form from "./form.vue";
import { computed, nextTick, ref, watch } from "vue";
import { ORDER_METHODS } from "@/components/manual-distribution/env.js";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
const props = defineProps({
// 显示隐藏开关
visible: {
......@@ -86,8 +89,27 @@ const Submit = async () => {
if (!form_valid) return;
let res = { ...form.value.form };
console.log("res: ", res);
await nextTick();
Close();
const params = {
id: props.row.id,
push_obj: {
push_method: res.method.length > 1 ? 3 : +res.method[0],
user_obj: res.lists.map((e) => {
return {
system_account: e.user_id,
user_name: e.user_name,
phone: e.phone,
};
}),
},
};
axios.post("/v1/api/work_order/work_order_manage/push", params).then((res) => {
if (res.data.code == 200) {
ElMessage.success("手动下发成功");
Close();
} else {
ElMessage.error(res.data.msg);
}
});
};
</script>
<style lang="scss" scoped>
......
src/components/warn-detail/index.vue
View file @ d972548e
<template>
<div class="warn-detail">
<div class="info">
<Info :labelData="labelData" :valueData="valueData" />
<Info :labelData="labelData" :valueData="valueData">
<template v-slot:[key]="{ item, valueData }" v-for="(value, key) in slots">
<slot :name="key" :item="item" :valueData="valueData"></slot>
</template>
</Info>
</div>
<div class="tabs">
<Tab :tabs="tabs" />
......@@ -10,8 +14,10 @@
</template>
<script setup>
import { useSlots, computed } from "vue";
import Info from "./info.vue";
import Tab from "./tab.vue";
const slots = useSlots();
const props = defineProps({
labelData: {
type: Array,
......@@ -33,7 +39,7 @@ const props = defineProps({
max-width: 1072px;
width: 100%;
height: 100%;
.tabs{
.tabs {
margin-top: 30px;
}
}
......
src/page/main/forewarning/list/detail/index.vue
View file @ d972548e
......@@ -3,8 +3,15 @@
<div class="breadcrumb">
<bg-breadcrumb />
</div>
<div class="content">
<warn-detail :label-data="labelData" :value-data="info" :tabs="tabs"></warn-detail>
<div class="content bg-scroll">
<warn-detail :label-data="labelData" :value-data="info" :tabs="tabs">
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ statusOptions[valueData[item.prop]] }}</span>
</span>
</template>
</warn-detail>
</div>
</div>
</template>
......@@ -12,6 +19,24 @@
<script setup>
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import warnDetail from "@/components/warn-detail/index.vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { ref, onBeforeMount } from "vue";
const route = useRoute();
const { id } = route.query;
const ruleTypeOptions = ref({});
const statusOptions = {
1: "已恢复",
2: "未恢复",
3: "已关闭",
};
const riskLevels = {
1: "低风险",
2: "一般风险",
3: "较大风险",
4: "重大风险",
};
const labelData = [
[
{
......@@ -54,16 +79,7 @@ const labelData = [
},
],
];
const info = {
warning_point: "SaaS层/数据治理系统",
warning_type: "容器集群",
warning_index: "响应时间超时",
risk_level: "一般风险",
status: "success",
warning_threshold: "10ms",
current_alarm_value: "16ms",
warning_time: "2020-01-01 00:00:00",
};
const info = ref({});
const tabs = [
{
label: "推送记录",
......@@ -104,6 +120,68 @@ const tabs = [
],
},
];
const getInfo = () => {
const params = {
id,
};
axios.get("/v1/api/alert_list", { params }).then((res) => {
if (res.data.code == 200) {
const { data } = res.data;
info.value = {
warning_point: data.alert_point,
warning_type: data.class_parent_name,
warning_index: data.class_name,
risk_level: riskLevels[data.risk_level],
status: data.status,
warning_threshold: `${data.alert_condition.thresholds_min}${
ruleTypeOptions.value[data.alert_rule_type]?.unit || ""
}-${data.alert_condition.thresholds_max}${ruleTypeOptions.value[data.alert_rule_type]?.unit || ""}`,
current_alarm_value: data.current_value + (ruleTypeOptions.value[data.alert_rule_type]?.unit || ""),
warning_time: data.alert_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
};
}
});
};
const GetRuleTypeOptions = () => {
let arr = [
{
id: "empty",
label: "空",
},
{
id: "1",
label: "百分比范围",
unit: "%",
},
{
id: "2",
label: "毫秒范围",
unit: "ms",
},
{
id: "3",
label: "秒范围",
unit: "s",
},
{
id: "4",
label: "个范围",
unit: "个",
},
{
id: "5",
label: "温度范围",
unit: "℃",
},
];
arr.forEach((e) => {
ruleTypeOptions.value[e.id] = e;
});
getInfo();
};
onBeforeMount(() => {
GetRuleTypeOptions();
});
</script>
<style lang="scss" scoped>
......@@ -122,6 +200,27 @@ const tabs = [
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px;
padding: 32px;
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
1: #48ad97,
3: #9e9e9e,
2: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
.status-body {
display: flex;
align-items: center;
}
}
}
</style>
src/page/main/forewarning/list/index.vue
View file @ d972548e
......@@ -18,47 +18,25 @@
</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.warning_type" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in warningTypes"
:key="'warningType' + 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_target" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in warningTargets"
:key="'warningTargets' + 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 riskLevels"
v-for="(value, key, index) in riskLevels"
:key="'riskLevels' + index"
:label="item.name"
:value="item.value">
:label="value"
:value="key">
</el-option>
</el-select>
</div>
<div class="filter_item">
<span class="filter_title">状态</span>
<el-select v-model="filter.state" placeholder="请选择" style="width: 300px">
<el-select v-model="filter.status" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in stateOptions"
v-for="(value, key, index) in statusOptions"
:key="'stateOptions' + index"
:label="item.name"
:value="item.value">
:label="value"
:value="key">
</el-option>
</el-select>
</div>
......@@ -91,25 +69,36 @@
:isIndex="true"
:select="true"
:stripe="true">
<template v-slot:warning_point="{ row }">
<template v-slot:alert_point="{ row }">
<span class="can_click_text" @click="goDetail(row)">
{{ row.warning_point }}
{{ row.alert_point }}
</span>
</template>
<template v-slot:warning_time="{ row }">
{{ row.warning_time ? row.warning_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
<template v-slot:risk_level="{ row }">
{{ riskLevels[row.risk_level] }}
</template>
<template v-slot:current_value="{ row }">
{{ row.current_value }}{{ ruleTypeOptions[row.alert_rule_type]?.unit || "" }}
</template>
<template v-slot:warn_threshold="{ row }">
{{ row.alert_condition.thresholds_min }}{{ ruleTypeOptions[row.alert_rule_type]?.unit || "" }}
-
{{ row.alert_condition.thresholds_max }}{{ ruleTypeOptions[row.alert_rule_type] || "" }}
</template>
<template v-slot:alert_time="{ row }">
{{ row.alert_time ? row.alert_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template>
<template v-slot:last_push_time="{ row }">
{{ row.last_push_time ? row.last_push_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template>
<template #state="{ row }">
<span :class="`circle bgc_${row.state}`"></span>
{{ ["未恢复", "已恢复", "已关闭"][row.state] }}
<template #status="{ row }">
<span :class="`circle status-${row.status}`"></span>
{{ statusOptions[row.status] }}
</template>
<template v-slot:action="{ row }">
<bg-table-btns2 :limit="3" :tableData="tableRows">
<bg-table-btn :disabled="row.state != 0" @click="pushWarning(row)">推送提醒</bg-table-btn>
<bg-table-btn :disabled="row.state != 0" @click="closeWarning(row)">关闭预警</bg-table-btn>
<bg-table-btn :disabled="row.status != 2" @click="pushWarning(row)">推送提醒</bg-table-btn>
<bg-table-btn :disabled="row.status != 2" @click="closeWarning(row)">关闭预警</bg-table-btn>
</bg-table-btns2>
</template>
</bg-table>
......@@ -199,94 +188,48 @@ const dataTable = ref(null);
const closeForm = ref(null);
const userTable = ref(null);
const pushForm = ref(null);
const statusOptions = {
"": "全部",
1: "已恢复",
2: "未恢复",
3: "已关闭",
};
const ruleTypeOptions = ref({});
const state = reactive({
warningTypes: [
{
name: "全部",
value: "",
},
{
name: "分类1",
value: 1,
},
{
name: "分类2",
value: 2,
},
], // 预警分类数据
warningTargets: [
{
name: "全部",
value: "",
},
{
name: "指标1",
value: 1,
},
{
name: "指标2",
value: 2,
},
], // 预警指标数据
riskLevels: [
{
name: "全部",
value: "",
},
{
name: "等级1",
value: 1,
},
{
name: "等级2",
value: 2,
},
], // 风险等级
stateOptions: [
{
name: "全部",
value: "",
},
{
name: "已恢复",
value: "1",
},
{
name: "未恢复",
value: "0",
},
{
name: "已关闭",
value: "2",
},
], // 状态
riskLevels: {
"": "全部",
1: "低风险",
2: "一般风险",
3: "较大风险",
4: "重大风险",
}, // 风险等级
headers: [
{
label: "预警点",
prop: "warning_point",
prop: "alert_point",
width: 180,
},
{
label: "预警时间",
prop: "warning_time",
prop: "alert_time",
width: 160,
},
{
label: "预警分类",
prop: "warning_type_name",
prop: "class_parent_name",
},
{
label: "预警指标",
prop: "warning_target_name",
prop: "class_name",
},
{
label: "风险等级",
prop: "risk_level_name",
prop: "risk_level",
},
{
label: "当前报警值",
prop: "now_warn_data",
prop: "current_value",
},
{
label: "预警阈值",
......@@ -294,12 +237,12 @@ const state = reactive({
},
{
label: "通知人数",
prop: "notice_people_num",
prop: "notification_count",
width: 80,
},
{
label: "推送次数",
prop: "push_times",
prop: "push_count",
width: 80,
},
{
......@@ -309,7 +252,7 @@ const state = reactive({
},
{
label: "状态",
prop: "state",
prop: "status",
width: 90,
},
{
......@@ -326,7 +269,7 @@ const state = reactive({
warning_type: "", // 预警类型
warning_target: "", // 预警指标
risk_level: "", // 风险等级
state: "", // 状态
status: "", // 状态
time: [],
search: "",
page: 1,
......@@ -366,7 +309,6 @@ const clearSelected = () => {
}; // 清空
const batchClose = () => {
console.log("批量关闭");
if (!state.selected || state.selected.length == 0) {
ElMessage.error("请先勾选要关闭的预警数据");
return;
......@@ -376,7 +318,6 @@ const batchClose = () => {
}; // 批量关闭
const goDetail = (row) => {
console.log("去详情");
router.push(`/forewarning/list/detail?id=${row.id}`);
}; // 查看详情
......@@ -394,7 +335,7 @@ const filterClear = () => {
warning_type: "", // 预警类型
warning_target: "", // 预警指标
risk_level: "", // 风险等级
state: "", // 状态
status: "", // 状态
time: "",
search: "",
page: 1,
......@@ -403,67 +344,19 @@ const filterClear = () => {
changePage(1);
}; // 重置筛选项
const selectable = (row, index) => {
return row.state === 0;
return row.status === 2;
};
const getTableRows = () => {
let params = { ...state.filter };
// axios
// .get(`/apaas/system/v5/dictionary/list`, {
// params,
// })
// .then((res) => {
// if (res.data.code == 200) {
// state.tableRows = res.data.data || [];
// state.tableTotal = res.data.total;
// } else {
// ElMessage.error(res.data.data);
// }
// });
state.tableTotal = 23;
state.tableRows = [
{
id: 1,
warning_point: "容器云/tyyh",
warning_time: "2020-01-01 00:00:00",
warning_type_name: "容器组",
warning_target_name: "服务中断",
risk_level_name: "重大风险",
now_warn_data: "",
warn_threshold: "",
notice_people_num: 2,
push_times: 2,
last_push_time: "2020-01-01 00:00:00",
state: 0,
},
{
id: 2,
warning_point: "容器云/kube-apiserver",
warning_time: "2020-01-01 00:00:00",
warning_type_name: "容器集群",
warning_target_name: "内存使用率",
risk_level_name: "较大风险",
now_warn_data: "66%",
warn_threshold: "60%-70%",
notice_people_num: 3,
push_times: 1,
last_push_time: "2020-01-01 00:00:00",
state: 0,
},
{
id: 3,
warning_point: "容器云/kube-apiserver",
warning_time: "2020-01-01 00:00:00",
warning_type_name: "容器集群",
warning_target_name: "内存使用率",
risk_level_name: "较大风险",
now_warn_data: "66%",
warn_threshold: "60%-70%",
notice_people_num: 3,
push_times: 1,
last_push_time: "2020-01-01 00:00:00",
state: 2,
},
];
axios.get("/v1/api/alert_list/list", { params }).then((res) => {
if (res.data.code == 200) {
let { list, total_count } = res.data.data;
state.tableRows = list || [];
state.tableTotal = total_count;
} else {
ElMessage.error(res.data.msg);
}
});
}; // 获取表格数据
const changePage = (page) => {
......@@ -597,9 +490,45 @@ const confirmClose = () => {
}
});
}; // 关闭预警弹窗确定按钮：提交表单
onBeforeMount(() => {
const GetRuleTypeOptions = () => {
let arr = [
{
id: "empty",
label: "空",
},
{
id: "1",
label: "百分比范围",
unit: "%",
},
{
id: "2",
label: "毫秒范围",
unit: "ms",
},
{
id: "3",
label: "秒范围",
unit: "s",
},
{
id: "4",
label: "个范围",
unit: "个",
},
{
id: "5",
label: "温度范围",
unit: "℃",
},
];
arr.forEach((e) => {
ruleTypeOptions.value[e.id] = e;
});
getTableRows();
};
onBeforeMount(() => {
GetRuleTypeOptions();
});
const {
......@@ -607,8 +536,6 @@ const {
tableRows,
tableTotal,
filter,
warningTypes,
warningTargets,
riskLevels,
stateOptions,
closeWarningDialog,
......@@ -660,17 +587,19 @@ const {
width: 6px;
height: 6px;
border-radius: 3px;
margin-right: 8px;
transform: translateY(-2px);
}
.bgc_0 {
background-color: #d75138;
}
.bgc_1 {
background-color: #48ad97;
}
.bgc_2 {
background-color: #9e9e9e;
.status {
$statusObj: (
1: #48ad97,
3: #9e9e9e,
2: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
}
}
......
src/page/main/forewarning/rule-set/add/index.vue
View file @ d972548e
......@@ -28,7 +28,6 @@ const add_form = ref(null);
const SaveSubmit = async () => {
let res = await add_form.value.Submit();
if (!res) return;
console.log("res: ", res);
Save(res, {}, () => {
Cancle();
});
......
src/page/main/ticket/business-ticket-list/close-ticket.vue
View file @ d972548e
<template>
<el-dialog
v-model="show"
width="774px"
top="10vh"
:before-close="beforeClose"
:close-on-click-modal="false"
>
<el-dialog v-model="show" width="774px" top="10vh" :before-close="beforeClose" :close-on-click-modal="false">
<template #header>
<GapTitle title="关闭工单"></GapTitle>
</template>
<div class="feedback-body">
<el-form
:model="state.form"
ref="form"
:rules="state.rules"
label-width="80px"
>
<el-form :model="state.form" ref="form" :rules="state.rules" label-width="80px">
<el-form-item label="关闭原因" prop="reason">
<el-input
type="textarea"
v-model="state.form.reason"
rows="5"
placeholder="请输入关闭原因"
></el-input>
<el-input type="textarea" v-model="state.form.reason" rows="5" placeholder="请输入关闭原因"></el-input>
</el-form-item>
</el-form>
</div>
......@@ -36,6 +20,8 @@
<script setup>
import { computed, reactive, ref } from "vue";
import GapTitle from "@/components/gap-title.vue";
import axios from "axios";
import { ElMessage } from "element-plus";
const props = defineProps({
visible: {
......@@ -81,6 +67,19 @@ const Submit = () => {
form.value.validate((valid) => {
if (valid) {
console.log(state.form);
//
let params = {
id: props.active_row.id,
reason_closure: state.form.reason,
};
axios.put("/v1/api/work_order/work_order_issuance/close", params).then((res) => {
if (res.data.code == 200) {
ElMessage.success("关闭工单提交成功！");
Close();
} else {
ElMessage.error(res.data.msg);
}
});
} else {
return false;
}
......
src/page/main/ticket/business-ticket-list/detail/index.vue
View file @ d972548e
......@@ -13,7 +13,7 @@
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
<span>{{ statusOptions[valueData[item.prop]] }}</span>
</span>
</template>
</Info>
......@@ -22,11 +22,8 @@
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #notification_method="{ valueData }">
<span>{{ valueData.notification_method.map((e) => METHODS[e]).join("，") }}</span>
<span>{{ valueData.notification_method?.map((e) => ORDER_METHODS[e]).join("，") }}</span>
</template>
<!-- <template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template> -->
</Info>
<div class="notification-lists">
<bg-table border ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true"> </bg-table>
......@@ -41,18 +38,20 @@
</template>
<script setup>
import { ref } from "vue";
import { onBeforeMount, ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import gapTitle from "@/components/gap-title.vue";
import feedbackDetail from "@/page/main/ticket/modules/feedback-detail/index.vue";
import goBack from "@/components/go-back/index.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
};
import { ORDER_METHODS } from "@/components/manual-distribution/env.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
const route = useRoute();
const { id } = route.query;
const ticketLevelOptions = ["", "紧急任务", "重要任务", "一般任务"];
const statusOptions = ["", "待处置", "已完成", "已关闭"];
const labelData = [
[
{
......@@ -91,16 +90,7 @@ const labelData = [
},
],
];
const info = {
ticket_name: "7月常态化运维巡检任务",
status: "finish",
ticket_level: "紧急任务",
create_by: "管理员",
description: "请进行所有系统常态化月度巡检任务（每月定期常态运维巡检），将巡检结果上报！",
create_time: "2020-01-01 00:00:00",
finish_time: "2020-01-01 00:00:00",
notification_method: ["1", "2"],
};
const info = ref({});
const notificationMethod = [
[
{
......@@ -123,37 +113,49 @@ const headers = [
label: "联系方式",
},
];
const rows = ref([
{
user_id: "11",
user_name: "1111",
phone: "13211111111",
},
{
user_id: "22",
user_name: "2222",
phone: "13222222222",
},
{
user_id: "33",
user_name: "3333",
phone: "13233333333",
},
]);
const detailInfo = ref([
{
status: "close",
target: "张三",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
{
status: "finish",
target: "李四",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
]);
const rows = ref([]);
const detailInfo = ref([]);
const getInfo = () => {
axios
.get("/v1/api/work_order/work_order_issuance/details", {
params: {
id,
},
})
.then((res) => {
if (res.data.code == 200) {
let { data } = res.data;
info.value = {
ticket_name: data.order_name,
status: data.order_state,
ticket_level: ticketLevelOptions[data.order_level],
create_by: data.create_user,
description: data.order_desc,
create_time: data.create_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
finish_time: data.complete_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
notification_method: data.push_obj.push_method == "3" ? ["1", "2"] : [data.push_obj.push_method],
};
rows.value = data.push_obj.user_obj?.map((e) => {
return {
user_id: e.system_account,
user_name: e.user_name,
phone: e.phone,
};
});
detailInfo.value = data.work_order_me?.map((e) => {
return {
status: e.order_state,
target: e.system_account,
feedback: e.result_feedback,
time: e.complete_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
};
});
}
});
};
onBeforeMount(() => {
getInfo();
});
</script>
<style lang="scss" scoped>
......@@ -192,9 +194,9 @@ const detailInfo = ref([
border-radius: 50%;
margin-right: 8px;
$statusObj: (
finish: #48ad97,
close: #9e9e9e,
info: #3759be,
2: #48ad97,
3: #9e9e9e,
1: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
......
src/page/main/ticket/business-ticket-list/index.vue
View file @ d972548e
......@@ -4,31 +4,28 @@
<bg-breadcrumb />
</div>
<div class="content">
<bg-filter-group
@search="changeSearch"
v-model="filter.key_word"
placeholder="请输入任务名称">
<bg-filter-group @search="changeSearch" v-model="filter.search" 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-select v-model="filter.order_level" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in ticketLevelOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
:key="'order_level_options' + index"
:label="item"
:value="index">
</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-select v-model="filter.order_state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in statusOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
:key="'order_state_options' + index"
:label="item"
:value="index">
</el-option>
</el-select>
</div>
......@@ -63,24 +60,36 @@
</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>
<bg-table ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true" :stripe="true">
<template #order_name="{ row }">
<div class="href" @click="goTo(row)">{{ row.order_name || "-" }}</div>
</template>
<template #order_level="{ row }">
<span>{{ ticketLevelOptions[row.order_level] }}</span>
</template>
<template #order_state="{ row }">
<span class="status-body">
<span class="status" :class="`status-${row.order_state}`"></span>
<span>{{ statusOptions[row.order_state] }}</span>
<span v-if="row.order_level != 3">({{ row.state_cnt }}/{{ row.all_cnt }})</span>
</span>
</template>
<template #create_time="{ row }">
{{ row.create_time ? row.create_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template>
<template #complete_time="{ row }">
{{ row.complete_time ? row.complete_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template>
<template #operation="{ row }">
<span class="primary-edit" @click="operation(row)"> 关闭工单 </span>
<el-button type="primary" :disabled="row.order_state != 1" link size="small" @click="operation(row)">
关闭工单
</el-button>
</template>
</bg-table>
<div class="pagination_box">
<bg-pagination
:page="filter.page"
:size="filter.limit"
:size="filter.page_size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
......@@ -88,107 +97,79 @@
</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>
// 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";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
const router = useRouter();
const filter = reactive({
ticket_level: "",
key_word: "",
order_level: 0,
search: "",
create_time: [],
finish_time: [],
status: "",
order_state: 0,
page: 1,
limit: 10,
page_size: 10,
});
const filterClear = () => {
filter.ticket_level = "";
filter.key_word = "";
filter.status = "";
filter.order_level = 0;
filter.search = "";
filter.order_state = 0;
filter.create_time = [];
filter.finish_time = [];
filter.limit = 10;
filter.page_size = 10;
filter.page = 1;
changePage(1);
}; // 重置筛选项
const tableTotal = ref(0);
const ticketLevelOptions = ref([
{
value: "",
name: "全部",
},
]);
const statusOptions = ref([
{
value: "",
name: "全部",
},
]);
const ticketLevelOptions = ["全部", "紧急任务", "重要任务", "一般任务"];
const statusOptions = ["全部", "待处置", "已完成", "已关闭"];
let headers = reactive([
{
label: "工单名称",
prop: "work_order_name",
prop: "order_name",
align: "left",
},
{
label: "工单等级",
prop: "work_order_level",
prop: "order_level",
align: "left",
},
{
label: "工单状态",
prop: "work_order_status",
prop: "order_state",
align: "left",
},
{
label: "下发对象",
prop: "distribute_target",
prop: "push_obj",
align: "left",
},
{
label: "创建人",
prop: "create_by",
prop: "create_user",
align: "left",
},
{
label: "创建时间",
prop: "create_time",
align: "left",
width: 160,
},
{
label: "完成时间",
prop: "finish_time",
prop: "complete_time",
align: "left",
width: 160,
},
{
label: "操作",
......@@ -197,13 +178,9 @@ let headers = reactive([
width: "80px",
},
]);
let rows = ref([
{ work_order_name: 11, id: 111 },
{ work_order_name: 22, id: 222 },
{ work_order_name: 33, id: 333 },
]);
let rows = ref([]);
const changeSize = (size) => {
filter.limit = size;
filter.page_size = size;
changePage(1);
};
......@@ -212,7 +189,7 @@ const changePage = (page) => {
getTableRows();
};
const changeSearch = (val) => {
filter.key_word = val;
filter.search = val;
changePage(1);
}; // 表格关键字筛选
......@@ -224,21 +201,25 @@ onMounted(() => {
});
const getTableRows = async () => {
let [createStartTime = "", createEndTime = ""] = filter.create_time || [];
let [finishStartTime = "", finishEndTime = ""] = filter.finish_time || [];
let [create_date_from = "", create_date_to = ""] = filter.create_time || [];
let [complete_time_from = "", complete_time_to = ""] = filter.finish_time || [];
let urlParams = {
...filter,
createStartTime,
createEndTime,
finishStartTime,
finishEndTime,
create_date_from,
create_date_to,
complete_time_from,
complete_time_to,
};
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;
axios.get("/v1/api/work_order/work_order_issuance/list", { params: urlParams }).then((res) => {
if (res.data.code == 200) {
rows.value = res.data.data || [];
tableTotal.value = res.data.total;
} else {
ElMessage.error(res.data.msg);
}
});
};
// 处置反馈
const visible = ref(false);
......@@ -306,9 +287,33 @@ const goTo = ({ id }) => {
}
}
}
:deep(.el-button.is-link) {
line-height: 1;
}
.bg-pagination {
bottom: unset;
}
.status-body {
display: flex;
align-items: center;
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
2: #48ad97,
3: #9e9e9e,
1: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
}
}
}
</style>
src/page/main/ticket/business-ticket-manage/add/index.vue
View file @ d972548e
......@@ -9,7 +9,7 @@
</div>
<div class="add-btns">
<el-button size="default" @click="Cancle">取消</el-button>
<el-button type="primary" size="default" @click="Save">保存</el-button>
<el-button type="primary" size="default" @click="SaveSubmit">保存</el-button>
<el-button type="primary" size="default" @click="Distribute">立即下发</el-button>
</div>
</div>
......@@ -21,20 +21,25 @@ import { ref } from "vue";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import addForm from "../modules/add-form.vue";
import { Save } from "../modules/interface.js";
const router = useRouter();
const Cancle = () => {
router.go(-1);
};
const add_form = ref(null);
const Save = async () => {
const SaveSubmit = async () => {
let res = await add_form.value.Submit();
if (!res) return;
console.log("res: ", res);
Save(res, { url: "/v1/api/work_order/work_order_manage/add" }, () => {
Cancle();
});
};
const Distribute = async () => {
let res = await add_form.value.Submit();
if (!res) return;
console.log("res: ", res);
Save(res, {}, () => {
Cancle();
});
};
</script>
......
src/page/main/ticket/business-ticket-manage/detail/index.vue
View file @ d972548e
......@@ -10,7 +10,7 @@
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
<span>{{ statusOptions[valueData[item.prop]] }}</span>
</span>
</template>
</Info>
......@@ -19,11 +19,8 @@
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #notification_method="{ valueData }">
<span>{{ valueData.notification_method.map((e) => METHODS[e]).join("，") }}</span>
<span>{{ valueData.notification_method?.map((e) => ORDER_METHODS[e]).join("，") }}</span>
</template>
<!-- <template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template> -->
</Info>
<div class="notification-lists">
<bg-table border ref="notification_table" :headers="headers" :rows="rows" height="100%" :isIndex="true">
......@@ -33,23 +30,17 @@
<gap-title :hasLine="true" title="定时规则"></gap-title>
<div class="info">
<Info :labelData="timeingRules" :valueData="info">
<template #timeing_rules="{ valueData }">
<span>{{ TIMEING_RULES[valueData.timeing_rules] }}</span>
<template #timing_rules="{ valueData }">
<span>{{ TIMEING_RULES[valueData.timing_rules] }}</span>
</template>
<!-- <template #value="{ item, valueData }">
<span>{{ TIMEING_RULES[valueData[item.prop]] }}</span>
</template> -->
</Info>
<div class="notification-lists">
<div class="notification-lists" v-if="timeingRulesRows">
<bg-table
border
ref="timeing_rules_table"
:headers="timeingRulesHeaders"
:rows="timeingRulesRows"
height="100%">
<template #daterange="{ row }">
{{ row.daterange.join(" ~ ") }}
</template>
</bg-table>
</div>
</div>
......@@ -62,37 +53,65 @@
:stripe="true"
:isIndex="true"
height="100%">
<template #status="{ row }">
<template #order_level="{ row }">
<span>{{ ticketLevelOptions[row.order_level] }}</span>
</template>
<template #order_state="{ row }">
<span class="status-body">
<span class="status" :class="`status-${row.status}`"></span>
<span>{{ ticketStatus[row.status] }}</span>
<span v-if="row.status != 3"> （{{ row.finish }}/{{ row.all }}） </span>
<span class="status" :class="`status-${row.order_state}`"></span>
<span>{{ statusOptions[row.order_state] }}</span>
<span v-if="row.order_state != 3"> （{{ row.state_cnt }}/{{ row.all_cnt }}） </span>
</span>
</template>
<template #create_time="{ row }">
{{ row.create_time ? row.create_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template>
<template #complete_time="{ row }">
{{ row.complete_time ? row.complete_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template>
<template #operation="{ row }">
<div class="table-operation">
<span class="primary-edit" @click="Detail(row)"> 详情 </span>
</div>
</template>
</bg-table>
<div class="pagination_box">
<bg-pagination
:page="page"
:size="page_size"
:total="total"
@change-page="changePage"
@change-size="changeSize">
</bg-pagination>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { onBeforeMount, ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import gapTitle from "@/components/gap-title.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
import { ORDER_METHODS } from "@/components/manual-distribution/env.js";
import { TIMEING_RULES } from "@/components/env.js";
import { useRouter } from "vue-router";
import { useRouter, useRoute } from "vue-router";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const route = useRoute();
const { id } = route.query;
const router = useRouter();
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
const ticketLevelOptions = ["", "紧急任务", "重要任务", "一般任务"];
const statusOptions = ["", "待处置", "已完成", "已关闭"];
const weekDayOptions = {
1: "周一",
2: "周二",
3: "周三",
4: "周四",
5: "周五",
6: "周六",
7: "周日",
};
const labelData = [
[
......@@ -132,17 +151,7 @@ const labelData = [
},
],
];
const info = {
ticket_name: "7月常态化运维巡检任务",
status: "finish",
ticket_level: "紧急任务",
create_by: "管理员",
description: "请进行所有系统常态化月度巡检任务（每月定期常态运维巡检），将巡检结果上报！",
create_time: "2020-01-01 00:00:00",
finish_time: "2020-01-01 00:00:00",
notification_method: ["1", "2"],
timeing_rules: "3",
};
const info = ref({});
const notificationMethod = [
[
{
......@@ -165,29 +174,12 @@ const headers = [
label: "联系方式",
},
];
const rows = ref([
{
user_id: "11",
user_name: "1111",
phone: "13211111111",
},
{
user_id: "22",
user_name: "2222",
phone: "13222222222",
},
{
user_id: "33",
user_name: "3333",
phone: "13233333333",
},
]);
const rows = ref([]);
const timeingRules = [
[
{
label: "定时规则",
prop: "timeing_rules",
prop: "timing_rules",
},
],
];
......@@ -201,49 +193,33 @@ const timeingRulesHeaders = [
label: "时间点",
},
];
const timeingRulesRows = [
{
daterange: ["2023-11-22", "2023-11-25"],
time_point: "16:00:00",
},
{
daterange: ["2023-11-22", "2023-11-25"],
time_point: "16:00:00",
},
{
daterange: ["2023-11-22", "2023-11-25"],
time_point: "16:00:00",
},
];
const ticketStatus = {
1: "已完成",
2: "待处置",
3: "已关闭",
};
const timeingRulesRows = ref([]);
const ticketHeaders = [
{
prop: "ticket_level",
prop: "order_level",
label: "工单等级",
},
{
prop: "status",
prop: "order_state",
label: "工单状态",
},
{
prop: "distribute_target",
prop: "push_obj",
label: "下发对象",
},
{
prop: "create_by",
prop: "create_user",
label: "创建人",
},
{
prop: "create_time",
label: "创建时间",
width: 160,
},
{
prop: "finish_time",
prop: "complete_time",
label: "完成时间",
width: 160,
},
{
label: "操作",
......@@ -252,11 +228,7 @@ const ticketHeaders = [
width: "80px",
},
];
const ticketRows = ref([
{ ticket_name: 11, id: 111, status: 1, finish: 10, all: 10 },
{ ticket_name: 22, id: 222, status: 2, finish: 5, all: 10 },
{ ticket_name: 33, id: 333, status: 3, finish: 0, all: 10 },
]);
const ticketRows = ref([]);
const Detail = ({ id }) => {
router.push({
path: "/ticket/business-ticket-list/detail",
......@@ -265,6 +237,85 @@ const Detail = ({ id }) => {
},
});
};
const getInfoData = () => {
const params = {
id,
};
axios.get("/v1/api/work_order/work_order_manage/details", { params }).then((res) => {
if (res.data.code == 200) {
let { data } = res.data;
if (!data) return;
info.value = {
ticket_name: data.order_name,
status: data.timing_state,
ticket_level: ticketLevelOptions[data.order_level],
create_by: data.create_user,
description: data.order_desc,
create_time: data.create_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
finish_time: data.create_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
notification_method: data.push_obj.push_method == 3 ? ["1", "2"] : [`${data.push_obj.push_method}`],
timing_rules: +data.timing_type,
};
rows.value = data.push_obj.user_obj.map((e) => {
return {
user_id: e.system_account,
user_name: e.user_name,
phone: e.phone,
};
});
let ruleObj = {
2: () => {
return [
{
daterange: data.timing_rule?.week?.map((e) => weekDayOptions[e]).join("，") || "-",
time_point: data.timing_rule?.point_time || "-",
},
];
},
3: () => {
return data.timing_rule?.map((e) => {
return {
daterange: `${e.date_from} ~ ${e.date_to}`,
time_point: e.point_time,
};
});
},
};
timeingRulesRows.value = ruleObj[`${data.timing_type}`] && ruleObj[`${data.timing_type}`]();
}
});
};
const page = ref(1);
const page_size = ref(10);
const total = ref(0);
const changeSize = (size) => {
page_size.value = size;
changePage(1);
};
const changePage = (p) => {
page.value = p;
getOrderLists();
};
const getOrderLists = () => {
const params = {
id,
page: page.value,
page_size: page_size.value,
};
axios.get("/v1/api/work_order/work_order_issuance/list", { params }).then((res) => {
if (res.data.code == 200) {
ticketRows.value = res.data.data || [];
total.value = res.data.total;
} else {
ElMessage.error(res.data.msg);
}
});
};
onBeforeMount(() => {
getInfoData();
getOrderLists();
});
</script>
<style lang="scss" scoped>
......@@ -293,33 +344,38 @@ const Detail = ({ id }) => {
&:not(:last-child) {
padding-bottom: 24px;
}
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
finish: #48ad97,
close: #9e9e9e,
info: #3759be,
1: #48ad97,
2: #e56600,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
.status-body {
display: flex;
align-items: center;
}
.notification-lists {
margin-top: 16px;
}
}
.pagination_box {
display: flex;
justify-content: flex-end;
.bg-pagination {
float: none;
}
}
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
2: #48ad97,
3: #9e9e9e,
1: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
.status-body {
display: flex;
align-items: center;
}
}
}
</style>
src/page/main/ticket/business-ticket-manage/edit/index.vue
View file @ d972548e
......@@ -18,10 +18,14 @@
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useRouter, useRoute } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import addForm from "../modules/add-form.vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const { id } = route.query;
const infoData = ref({});
const Cancle = () => {
router.go(-1);
......@@ -30,51 +34,69 @@ const add_form = ref(null);
const Save = async () => {
let res = await add_form.value.Submit();
if (!res) return;
console.log("res: ", res);
Save(res, { url: "/v1/api/work_order/work_order_manage/edit" }, () => {
Cancle();
});
};
const Distribute = async () => {
let res = await add_form.value.Submit();
if (!res) return;
console.log("res: ", res);
Save(res, { id, url: "/v1/api/work_order/work_order_manage/edit" }, () => {
Cancle();
});
};
const getInfoData = () => {
const params = {
id,
};
axios.get("/v1/api/work_order/work_order_manage/details", { params }).then((res) => {
if (res.data.code == 200) {
let { data } = res.data;
let ruleObj = {
1: {},
2: {
week_days: data.timing_weekly?.week || [],
time: data.timing_weekly?.point_time || "",
},
3: {
lists: data.timing_custom?.map((e) => {
return {
date: [e.date_from, e.date_to],
time: e.point_time,
};
}),
},
};
infoData.value = {
ticket_name: data.order_name,
id: data.id,
status: data.timing_state,
// finish: 10,
// all: 10,
history: {
method: data.push_obj.push_method == 3 ? ["1", "2"] : [`${data.push_obj.push_method}`],
lists: data.push_obj.user_obj.map((e) => {
return {
user_id: e.system_account,
user_name: e.user_name,
phone: e.phone,
};
}),
},
ticket_level: data.order_level,
ticket_desc: data.order_desc,
timing_rules: +data.timing_type,
rules: {
...ruleObj,
},
};
} else {
ElMessage.error(res.data.msg);
}
});
};
onMounted(() => {
setTimeout(() => {
infoData.value = {
ticket_name: 11,
id: 111,
status: 1,
finish: 10,
all: 10,
history: {
method: ["1", "2"],
lists: [
{
user_id: "1111",
user_name: "11111111",
phone: "13011111111",
},
],
},
ticket_name: "1",
ticket_level: 1,
ticket_desc: "1111",
timing_rules: 2,
rules: {
lists: [
{
date: ["2023-01-01", "2023-12-31"],
time: "00:00:00",
},
{
date: ["2023-01-01", "2023-12-31"],
time: "00:00:01",
},
],
week_days: [1, 2, 3, 4, 6],
time: "00:00:03",
},
};
}, 1000);
getInfoData();
});
</script>
......
src/page/main/ticket/business-ticket-manage/index.vue
View file @ d972548e
......@@ -4,7 +4,7 @@
<bg-breadcrumb />
</div>
<div class="content">
<bg-filter-group @search="changeSearch" v-model="filter.key_word" placeholder="请输入任务名称">
<bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入任务名称">
<template v-slot:left_action>
<div class="apaas_button">
<el-button type="primary" @click="AddTicket">
......@@ -24,34 +24,34 @@
<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-select v-model="filter.order_level" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in ticketLevelOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
:key="'order_level_options' + index"
:label="item"
:value="index">
</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-select v-model="filter.order_state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in statusOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
:key="'order_state_options' + index"
:label="item"
:value="index">
</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-select v-model="filter.timing_type" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in ruleOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
:key="'ruleOptions' + index"
:label="item"
:value="index">
</el-option>
</el-select>
</div>
......@@ -83,19 +83,23 @@
:isIndex="true"
:select="true"
@selectAc="selectRows"
:selectable="selectable"
:stripe="true">
<template #ticket_name="{ row }">
<div class="href" @click="goTo(row)">{{ row.ticket_name || "-" }}</div>
<template #order_name="{ row }">
<div class="href" @click="goTo(row)">{{ row.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 #order_state="{ row }">
<span>{{ ticketLevelOptions[row.order_level] }}</span>
</template>
<template #enable="{ row }">
<template #timing_type="{ row }">
<span>{{ ruleOptions[row.timing_type] }}</span>
</template>
<template #create_time="{ row }">
{{ row.create_time ? row.create_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template>
<template #timing_state="{ row }">
<el-switch
v-model="row.enable"
v-model="row.timing_state"
active-text="是"
inactive-text="否"
inline-prompt
......@@ -108,9 +112,11 @@
<div class="table-operation">
<el-button type="primary" link size="default" @click="operation(row)">手动下发</el-button>
<span class="line"></span>
<el-button type="primary" link size="default" @click="Edit(row)" :disabled="row.enable">编辑</el-button>
<el-button type="primary" link size="default" @click="Edit(row)" :disabled="row.timing_state">
编辑
</el-button>
<span class="line"></span>
<el-button type="primary" link size="default" @click="Delete(row)" :disabled="row.enable">
<el-button type="primary" link size="default" @click="Delete(row)" :disabled="row.timing_state">
删除
</el-button>
</div>
......@@ -119,7 +125,7 @@
<div class="pagination_box">
<bg-pagination
:page="filter.page"
:size="filter.limit"
:size="filter.page_size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
......@@ -130,6 +136,16 @@
<ManualDistribution v-model:visible="visible" :row="active_row" />
</div>
<!-- 删除 -->
<el-dialog class="dialog_box" title="删除" v-model="delDialog" width="420px">
<div>确定要删除吗？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="delDialog = false">取消</el-button>
<el-button type="primary" @click="delConfirm">确定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
......@@ -137,93 +153,75 @@
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";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { useRouter } from "vue-router";
const router = useRouter();
const filter = reactive({
ticket_level: "",
key_word: "",
order_level: "",
search: "",
create_time: [],
rule: [],
status: "",
timing_type: [],
order_state: "",
page: 1,
limit: 10,
page_size: 10,
});
const filterClear = () => {
filter.ticket_level = "";
filter.key_word = "";
filter.status = "";
filter.order_level = "";
filter.search = "";
filter.order_state = "";
filter.create_time = [];
filter.rule = [];
filter.limit = 10;
filter.timing_type = [];
filter.page_size = 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: "全部",
},
]);
const ticketLevelOptions = ["全部", "紧急任务", "重要任务", "一般任务"];
const statusOptions = ["全部", "待处置", "已完成", "已关闭"];
const ruleOptions = ["全部", "手动下发", "按周", "自定义时间"];
let headers = reactive([
{
label: "工单名称",
prop: "ticket_name",
prop: "order_name",
align: "left",
},
{
label: "工单等级",
prop: "ticket_level",
prop: "order_level",
align: "left",
},
{
label: "实例工单数",
prop: "example_ticket_num",
prop: "order_cnt",
align: "left",
},
{
label: "下发对象",
prop: "distribute_target",
prop: "push_obj",
align: "left",
},
{
label: "定时规则",
prop: "timing_rules",
prop: "timing_type",
align: "left",
},
{
label: "定时是否启用",
prop: "enable",
prop: "timing_state",
align: "left",
width: 150,
},
{
label: "创建人",
prop: "create_by",
prop: "create_user",
align: "left",
},
{
label: "创建时间",
prop: "create_time",
align: "left",
width: 160,
},
{
label: "操作",
......@@ -233,30 +231,12 @@ let headers = reactive([
fixed: "right",
},
]);
let rows = ref([
{
ticket_name: 11,
id: 111,
status: 1,
finish: 10,
all: 10,
history: {
method: ["1", "2"],
lists: [
{
user_id: "1111",
user_name: "11111111",
phone: "13011111111",
},
],
},
enable: true,
},
{ ticket_name: 22, id: 222, status: 2, finish: 5, all: 10, enable: false },
{ ticket_name: 33, id: 333, status: 3, finish: 0, all: 10, enable: false },
]);
let rows = ref([]);
const selectable = (row, index) => {
return !row.timing_state;
};
const changeSize = (size) => {
filter.limit = size;
filter.page_size = size;
changePage(1);
};
......@@ -265,29 +245,33 @@ const changePage = (page) => {
getTableRows();
};
const changeSearch = (val) => {
filter.key_word = val;
filter.search = val;
changePage(1);
}; // 表格关键字筛选
const filterAction = () => {
changePage(1);
}; // 查询按钮
onMounted(() => {
getTableRows();
});
const getTableRows = async () => {
let [createStartTime = "", createEndTime = ""] = filter.create_time || [];
let [create_date_from = "", create_date_to = ""] = filter.create_time || [];
let urlParams = {
...filter,
createStartTime,
createEndTime,
create_date_from,
create_date_to,
};
Reflect.deleteProperty(urlParams, "create_time");
console.log("urlParams: ", urlParams);
// const { data, total } = await instanceList(urlParams);
// rows.value = data.list || [];
// pagination.total = data.total_count;
axios.get("/v1/api/work_order/work_order_manage/list", { params: urlParams }).then((res) => {
if (res.data.code == 200) {
rows.value =
res.data.data?.map((e) => {
return { ...e, timing_state: e.timing_state == 1 };
}) || [];
tableTotal.value = res.data.total;
} else {
ElMessage.error(res.data.msg);
}
});
};
// 手动下发
const visible = ref(false);
......@@ -310,7 +294,7 @@ const Edit = (row) => {
const selectedItems = ref([]);
const Delete = (row) => {
selectedItems.value = [row];
console.log(del_ids.value);
delBatch();
};
const del_ids = computed(() => {
return selectedItems.value.map((e) => e.id) || [];
......@@ -325,6 +309,7 @@ const AddTicket = () => {
path: "/ticket/business-ticket-manage/add",
});
};
const delDialog = ref(false);
// 批量删除
const delBatch = () => {
if (del_ids.value.length == 0) {
......@@ -335,7 +320,27 @@ const delBatch = () => {
});
return;
}
console.log(del_ids.value);
delDialog.value = true;
};
// 删除确定
const delConfirm = () => {
const params = {
id: del_ids.value,
};
axios
.delete("/v1/api/work_order/work_order_manage/del", {
data: params,
})
.then((res) => {
if (res.data.code == 200) {
ElMessage.success("删除成功！");
clearSelected();
delDialog.value = false;
changePage(1);
} else {
ElMessage.error(res.data.msg);
}
});
};
// 清空选中
const listtable = ref(null);
......@@ -350,7 +355,24 @@ const goTo = ({ id }) => {
},
});
};
const Enable = (row) => {};
const Enable = (row) => {
const params = {
id: row.id,
timing_state: row.timing_state ? 1 : 0,
};
axios.put("/v1/api/work_order/work_order_manage/state", params).then((res) => {
if (res.data.code == 200) {
ElMessage.success("定时是否启用修改成功");
changePage(1);
} else {
ElMessage.error(res.data.msg);
row.timing_state = !row.timing_state;
}
});
};
onMounted(() => {
getTableRows();
});
</script>
<style lang="scss" scoped>
......@@ -430,8 +452,12 @@ const Enable = (row) => {};
display: inline-block;
}
}
:deep(.el-switch__inner) {
.is-hide {
:deep(.el-button.is-link) {
line-height: 1;
}
:deep(.el-switch) {
height: 20px;
.el-switch__inner .is-hide {
display: none;
}
}
......
src/page/main/ticket/business-ticket-manage/modules/add-form.vue
View file @ d972548e
......@@ -18,6 +18,7 @@
<ManualDistributionForm
ref="manual_distribution_form"
:noElLabel="false"
:methodLists="ORDER_METHODS"
methodLabel="推送方式"
:history="history" />
</div>
......@@ -52,6 +53,7 @@ import { computed, onMounted, reactive, ref, shallowReactive, defineExpose, watc
import ManualDistributionForm from "@/components/manual-distribution/form.vue";
import customTime from "./custom-time.vue";
import byWeek from "./by-week.vue";
import { ORDER_METHODS } from "@/components/manual-distribution/env.js";
const manual_distribution_form = ref(null);
const coms = shallowReactive({
2: byWeek,
......@@ -136,7 +138,7 @@ const Submit = async () => {
return {
...state.form,
...manual_distribution_form.value.form,
...rule_ref.value.form,
rule_ref: { ...rule_ref.value?.form } || {},
};
};
defineExpose({
......
src/page/main/ticket/business-ticket-manage/modules/interface.js 0 → 100644
View file @ d972548e
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
const setParams = (res, { id }) => {
let params = {
order_name: res.ticket_name,
order_level: +res.ticket_level,
order_desc: res.ticket_desc,
timing_type: +res.timing_rules,
push_obj: {
push_method: res.method.length > 1 ? 3 : +res.method[0],
user_obj: res.lists.map(e => {
return {
system_account: e.user_id,
user_name: e.user_name,
phone: e.phone
}
})
}
}
let ruleObj = {
1: {},
2: {
timing_weekly: {
week: res.rule_ref.week_days,
point_time: res.rule_ref.time
}
},
3: {
timing_custom: !res.rule_ref.rules ? [] : res.rule_ref.rules.map(e => {
return {
date_from: e.date[0] || '',
date_to: e.date[1] || '',
point_time: e.time
}
})
}
}
params = {
...params,
...ruleObj[res.timing_rules]
}
if (id) {
params.id = id
}
return params;
}
export const Save = (res, p, cb) => {
let params = setParams(res, p);
axios[p.id ? 'put' : 'post'](p.url, params).then(res => {
if (res.data.code == 200) {
ElMessage.success(`${p.id ? '编辑' : '新增'}成功`)
cb && cb()
} else {
ElMessage.error(res.data.data)
}
})
}
\ No newline at end of file
src/page/main/ticket/modules/feedback-detail/detail.vue
View file @ d972548e
<template>
<div class="detail-info">
<div class="status" :class="`feedback-detail-status-${info.status}`">
{{ STATUS_OBJ[info.status] }}
{{ statusOptions[info.status] }}
</div>
<div class="info-body">
<div v-for="label in infoLabel" :key="label.prop">
......@@ -13,11 +13,7 @@
</template>
<script setup>
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
};
const statusOptions = ["", "待处置", "已完成", "已关闭"];
const props = defineProps({
info: {
type: Object,
......@@ -58,9 +54,9 @@ const infoLabel = [
border-bottom: 1px solid #e3e4ef;
&.feedback-detail-status {
$statusObj: (
finish: #48ad97,
close: #242c43,
info: #3759be,
2: #48ad97,
3: #242c43,
1: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
......
src/page/main/ticket/modules/feedback.vue
View file @ d972548e
......@@ -33,6 +33,8 @@
<script setup>
import { computed, reactive, ref } from "vue";
import GapTitle from "@/components/gap-title.vue";
import axios from "axios";
import { ElMessage } from "element-plus";
const props = defineProps({
visible: {
......@@ -87,7 +89,24 @@ const beforeClose = () => {
const Submit = () => {
form.value.validate((valid) => {
if (valid) {
console.log(state.form);
let params = {
id: props.active_row.id,
};
if (!props.isWarn) {
params.order_issuance_id = props.active_row.order_issuance_id;
params.result_feedback = state.form.result;
} else {
params.order_issuance_id = props.active_row.order_issuance_id;
params.result_feedback = state.form.result;
}
axios.put(props.active_row.url, params).then((res) => {
if (res.data.code == 200) {
ElMessage.success("处置反馈提交成功！");
Close();
} else {
ElMessage.error(res.data.msg);
}
});
} else {
return false;
}
......
src/page/main/ticket/my-business-ticket/detail/index.vue
View file @ d972548e
......@@ -13,7 +13,7 @@
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
<span>{{ statusOptions[valueData[item.prop]] }}</span>
</span>
</template>
</Info>
......@@ -22,11 +22,8 @@
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #notification_method="{ valueData }">
<span>{{ valueData.notification_method.map((e) => METHODS[e]).join("，") }}</span>
<span>{{ valueData.notification_method?.map((e) => ORDER_METHODS[e]).join("，") }}</span>
</template>
<!-- <template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template> -->
</Info>
<div class="notification-lists">
<bg-table border ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true"> </bg-table>
......@@ -41,18 +38,20 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, onBeforeMount } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import gapTitle from "@/components/gap-title.vue";
import feedbackDetail from "@/page/main/ticket/modules/feedback-detail/index.vue";
import goBack from "@/components/go-back/index.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
};
import { ORDER_METHODS } from "@/components/manual-distribution/env.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
const route = useRoute();
const { id } = route.query;
const ticketLevelOptions = ["", "紧急任务", "重要任务", "一般任务"];
const statusOptions = ["", "待处置", "已完成", "已关闭"];
const labelData = [
[
{
......@@ -91,16 +90,7 @@ const labelData = [
},
],
];
const info = {
ticket_name: "7月常态化运维巡检任务",
status: "finish",
ticket_level: "紧急任务",
create_by: "管理员",
description: "请进行所有系统常态化月度巡检任务（每月定期常态运维巡检），将巡检结果上报！",
create_time: "2020-01-01 00:00:00",
finish_time: "2020-01-01 00:00:00",
notification_method: ["1", "2"],
};
const info = ref();
const notificationMethod = [
[
{
......@@ -123,37 +113,50 @@ const headers = [
label: "联系方式",
},
];
const rows = ref([
{
user_id: "11",
user_name: "1111",
phone: "13211111111",
},
{
user_id: "22",
user_name: "2222",
phone: "13222222222",
},
{
user_id: "33",
user_name: "3333",
phone: "13233333333",
},
]);
const detailInfo = ref([
{
status: "close",
target: "张三",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
{
status: "finish",
target: "李四",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
]);
const rows = ref([]);
const detailInfo = ref([]);
const getInfo = () => {
axios
.get("/v1/api/work_order/work_order_issuance/details", {
params: {
id,
},
})
.then((res) => {
if (res.data.code == 200) {
let { data } = res.data;
console.log("data: ", data);
info.value = {
ticket_name: data.order_name,
status: data.order_state,
ticket_level: ticketLevelOptions[data.order_level],
create_by: data.create_user,
description: data.order_desc,
create_time: data.create_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
finish_time: data.complete_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
notification_method: data.push_obj.push_method == "3" ? ["1", "2"] : [data.push_obj.push_method],
};
rows.value = data.push_obj.user_obj.map((e) => {
return {
user_id: e.system_account,
user_name: e.user_name,
phone: e.phone,
};
});
detailInfo.value = data.work_order_me.map((e) => {
return {
status: e.order_state,
target: e.system_account,
feedback: e.result_feedback,
time: e.complete_time?.split("+")[0].replace("T", " ").replace("Z", " ") || "-",
};
});
}
});
};
onBeforeMount(() => {
getInfo();
});
</script>
<style lang="scss" scoped>
......@@ -192,9 +195,9 @@ const detailInfo = ref([
border-radius: 50%;
margin-right: 8px;
$statusObj: (
finish: #48ad97,
close: #9e9e9e,
info: #3759be,
2: #48ad97,
3: #9e9e9e,
1: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
......
src/page/main/ticket/my-business-ticket/index.vue
View file @ d972548e
......@@ -4,28 +4,28 @@
<bg-breadcrumb />
</div>
<div class="content">
<bg-filter-group @search="changeSearch" v-model="filter.key_word" placeholder="请输入角色名称">
<bg-filter-group @search="changeSearch" v-model="filter.search" 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-select v-model="filter.order_level" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in ticketLevelOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
:key="'order_level_options' + index"
:label="item"
:value="index">
</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-select v-model="filter.order_state" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in statusOptions"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value">
:key="'order_state_options' + index"
:label="item"
:value="index">
</el-option>
</el-select>
</div>
......@@ -61,17 +61,34 @@
<div class="table_container">
<div class="table">
<bg-table ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true" :stripe="true">
<template #ticket_name="{ row }">
<div class="href" @click="goTo(row)">{{ row.ticket_name || "-" }}</div>
<template #order_name="{ row }">
<div class="href" @click="goTo(row)">{{ row.order_name || "-" }}</div>
</template>
<template #order_level="{ row }">
<span>{{ ticketLevelOptions[row.order_level] }}</span>
</template>
<template #order_state="{ row }">
<span class="status-body">
<span class="status" :class="`status-${row.order_state}`"></span>
<span>{{ statusOptions[row.order_state] }}</span>
</span>
</template>
<template #create_time="{ row }">
{{ row.create_time ? row.create_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template>
<template #complete_time="{ row }">
{{ row.complete_time ? row.complete_time.split("+")[0].replace("T", " ").replace("Z", " ") : "-" }}
</template>
<template #operation="{ row }">
<span class="primary-edit" @click="operation(row)"> 处置反馈 </span>
<el-button type="primary" :disabled="row.order_state != 1" link size="small" @click="operation(row)">
处置反馈
</el-button>
</template>
</bg-table>
<div class="pagination_box">
<bg-pagination
:page="filter.page"
:size="filter.limit"
:size="filter.page_size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
......@@ -89,74 +106,68 @@ 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";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
const router = useRouter();
const filter = reactive({
ticket_level: "",
key_word: "",
order_level: 0,
search: "",
create_time: [],
finish_time: [],
status: "",
order_state: 0,
page: 1,
limit: 10,
page_size: 10,
});
const filterClear = () => {
filter.ticket_level = "";
filter.key_word = "";
filter.status = "";
filter.order_level = 0;
filter.search = "";
filter.order_state = 0;
filter.create_time = [];
filter.finish_time = [];
filter.limit = 10;
filter.page_size = 10;
filter.page = 1;
changePage(1);
}; // 重置筛选项
const tableTotal = ref(0);
const ticketLevelOptions = ref([
{
value: "",
name: "全部",
},
]);
const statusOptions = ref([
{
value: "",
name: "全部",
},
]);
const ticketLevelOptions = ["全部", "紧急任务", "重要任务", "一般任务"];
const statusOptions = ["全部", "待处置", "已完成", "已关闭"];
let headers = reactive([
{
label: "工单名称",
prop: "ticket_name",
prop: "order_name",
align: "left",
},
{
label: "工单等级",
prop: "ticket_level",
prop: "order_level",
align: "left",
},
{
label: "工单状态",
prop: "ticket_status",
prop: "order_state",
align: "left",
},
{
label: "下发对象",
prop: "distribute_target",
prop: "push_obj",
align: "left",
},
{
label: "创建人",
prop: "create_by",
prop: "create_user",
align: "left",
},
{
label: "创建时间",
prop: "create_time",
align: "left",
width: 160,
},
{
label: "完成时间",
prop: "finish_time",
prop: "complete_time",
align: "left",
width: 160,
},
{
label: "操作",
......@@ -165,13 +176,9 @@ let headers = reactive([
width: "80px",
},
]);
let rows = ref([
{ ticket_name: 11, id: 111 },
{ ticket_name: 22, id: 222 },
{ ticket_name: 33, id: 333 },
]);
let rows = ref([]);
const changeSize = (size) => {
filter.limit = size;
filter.page_size = size;
changePage(1);
};
......@@ -180,7 +187,7 @@ const changePage = (page) => {
getTableRows();
};
const changeSearch = (val) => {
filter.key_word = val;
filter.search = val;
changePage(1);
}; // 表格关键字筛选
......@@ -192,34 +199,38 @@ onMounted(() => {
});
const getTableRows = async () => {
let [createStartTime = "", createEndTime = ""] = filter.create_time || [];
let [finishStartTime = "", finishEndTime = ""] = filter.finish_time || [];
let [create_date_from = "", create_date_to = ""] = filter.create_time || [];
let [complete_time_from = "", complete_time_to = ""] = filter.finish_time || [];
let urlParams = {
...filter,
createStartTime,
createEndTime,
finishStartTime,
finishEndTime,
create_date_from,
create_date_to,
complete_time_from,
complete_time_to,
};
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;
axios.get("/v1/api/work_order/work_order_me/list", { params: urlParams }).then((res) => {
if (res.data.code == 200) {
rows.value = res.data.data || [];
tableTotal.value = res.data.total;
} else {
ElMessage.error(res.data.msg);
}
});
};
// 处置反馈
const visible = ref(false);
const active_row = ref(null);
const operation = (row) => {
active_row.value = row;
active_row.value = { ...row, url: "/v1/api/work_order/work_order_me/feedback" };
visible.value = true;
};
const goTo = ({ id }) => {
const goTo = ({ order_issuance_id }) => {
router.push({
path: "/ticket/my-business-ticket/detail",
query: {
id,
id: order_issuance_id,
},
});
};
......@@ -273,9 +284,33 @@ const goTo = ({ id }) => {
}
}
}
:deep(.el-button.is-link) {
line-height: 1;
}
.bg-pagination {
bottom: unset;
}
.status-body {
display: flex;
align-items: center;
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
2: #48ad97,
3: #9e9e9e,
1: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
}
}
}
</style>
src/page/main/ticket/my-warn-ticket/index.vue
View file @ d972548e
......@@ -23,7 +23,7 @@
<el-select v-model="filter.warning_index" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in wainingIndexOptions"
:key="'pushOptions' + index"
:key="'warning_index_options' + index"
:label="item.name"
:value="item.value">
</el-option>
......@@ -34,9 +34,9 @@
<el-select v-model="filter.risk_level" placeholder="请选择" style="width: 300px">
<el-option
v-for="(item, index) in riskLevelOptions"
:key="'pushOptions' + index"
:key="'risk_level_options' + index"
:label="item.name"
:value="item.value">
:value="item.id">
</el-option>
</el-select>
</div>
......@@ -45,9 +45,9 @@
<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">
:key="'statusOptions' + index"
:label="item"
:value="index">
</el-option>
</el-select>
</div>
......@@ -72,17 +72,19 @@
<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 #alert_point="{ row }">
<div class="href" @click="goTo(row)">{{ row.alert_point || "-" }}</div>
</template>
<template #operation="{ row }">
<span class="primary-edit" @click="operation(row)"> 处置反馈 </span>
<el-button type="primary" :disabled="row.order_state != 1" link size="small" @click="operation(row)">
处置反馈
</el-button>
</template>
</bg-table>
<div class="pagination_box">
<bg-pagination
:page="filter.page"
:size="filter.limit"
:size="filter.page_size"
:total="tableTotal"
@change-page="changePage"
@change-size="changeSize">
......@@ -90,34 +92,12 @@
</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" :isWarn="true" />
</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 bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import FeedBack from "../modules/feedback.vue";
......@@ -131,7 +111,7 @@ const filter = reactive({
status: "",
date: [],
page: 1,
limit: 10,
page_size: 10,
});
const tableTotal = ref(0);
const filterClear = () => {
......@@ -141,10 +121,11 @@ const filterClear = () => {
filter.risk_level = "";
filter.status = "";
filter.date = [];
filter.limit = 10;
filter.page_size = 10;
filter.page = 1;
changePage(1);
}; // 重置筛选项
const statusOptions = ["全部", "待处置", "已完成", "已关闭"];
const wainingTypeOptions = ref([
{
value: "",
......@@ -159,25 +140,35 @@ const wainingIndexOptions = ref([
]);
const riskLevelOptions = ref([
{
value: "",
id: "",
name: "全部",
},
]);
const statusOptions = ref([
{
value: "",
name: "全部",
id: 4,
name: "重大风险",
},
{
id: 3,
name: "较大风险",
},
{
id: 2,
name: "一般风险",
},
{
id: 1,
name: "低风险",
},
]);
let headers = reactive([
{
label: "预警点",
prop: "warning_point",
prop: "alert_point",
align: "left",
},
{
label: "预警时间",
prop: "warning_time",
prop: "alert_point",
align: "left",
},
{
......@@ -229,12 +220,12 @@ let headers = reactive([
]);
let rows = ref([
{
warning_point: 1,
alert_point: 1,
id: 1,
},
]);
const changeSize = (size) => {
filter.limit = size;
filter.page_size = size;
changePage(1);
};
......@@ -262,10 +253,15 @@ const getTableRows = async () => {
endTime,
};
Reflect.deleteProperty(urlParams, "date");
console.log("urlParams: ", urlParams);
// const { data, total } = await instanceList(urlParams);
// rows.value = data.list || [];
// pagination.total = data.total_count;
axios.get("/v1/api/alert_list/list", { params: urlParams }).then((res) => {
if (res.data.code == 200) {
let { list, total_count } = res.data.data;
rows.value = list || [];
tableTotal.value = total_count;
} else {
ElMessage.error(res.data.msg);
}
});
};
// 处置反馈
const visible = ref(false);
......@@ -332,6 +328,9 @@ const goTo = ({ id }) => {
}
}
}
:deep(.el-button.is-link) {
line-height: 1;
}
.bg-pagination {
bottom: unset;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment