Commit 8b2729de authored by liqiuyu's avatar liqiuyu

feat(*):我的待办开发

parent b56243fa
......@@ -13,6 +13,7 @@
"echarts": "^5.6.0",
"element-plus": "^2.9.10",
"js-cookie": "^3.0.5",
"moment": "^2.30.1",
"nprogress": "^0.2.0",
"path": "^0.12.7",
"pinia": "^3.0.2",
......@@ -1893,6 +1894,15 @@
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"license": "MIT",
"engines": {
"node": "*"
}
},
"node_modules/nanoid": {
"version": "3.3.11",
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
......@@ -1928,11 +1938,6 @@
"resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
"integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
},
"node_modules/nprogress": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
},
"node_modules/nprogress": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
......
......@@ -8,7 +8,7 @@ import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { createPinia } from "pinia";
import moment from 'moment';
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
......@@ -16,5 +16,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app
.use(router)
.use(ElementPlus, { locale: zhCustom })
.use(moment)
.use(createPinia())
.mount("#app");
<template>
<el-dialog
:model-value="showDialog"
:title="title"
:width="width"
@close="closeDialog"
>
<div>
<slot name="content"></slot>
<slot></slot>
</div>
<template #footer>
<div class="dialog-footer" v-if="btnGroup.length">
<div v-for="item in btnGroup" class="real-btn" :key="item.attrKey" @click="handleBtn(item.attrKey)">
{{ item.label }}
</div>
</div>
</template>
</el-dialog>
</template>
<script setup>
import { defineProps, defineEmits, ref, reactive,watch,onMounted } from 'vue';
const props = defineProps({
showDialog: {
type: Boolean,
default: false
},
title: {
type: String,
default: '弹框标题'
},
width: {
type: String,
default: '40%'
},
btnGroup: {
type: Array,
default: () => ([])
}
});
const emit = defineEmits(['close:showDialog', 'handleBtn']);
/**
* @Description: 弹框关闭回调
* @author liqiuyu
* @date 2025/5/21
*/
const closeDialog = () => {
emit('close:showDialog', false);
};
/**
* @Description: 弹框底部按钮方法回调
* @author liqiuyu
* @date 2025/5/21
*/
const handleBtn = (key) => {
emit('handleBtn', key);
};
</script>
<style scoped lang="scss">
:deep(.el-dialog) {
background: rgb(34, 43, 69);
.el-dialog__title {
color: #f5f6f9;
}
.table {
height: calc(100vh - 420px) !important;
}
.el-dialog__body {
padding: 16px;
}
.el-dialog__footer {
padding: 0;
}
}
.dialog-footer {
display: flex;
justify-content:center;
width: 100%;
.real-btn {
width: auto;
height: 28px;
background: rgb(64, 158, 255);
border: 1px solid rgb(64, 158, 255);
border-radius: 4px;
box-shadow: 0 1px 9px 0 rgba(12, 123, 255, 0.3) inset;
text-align: center;
padding: 0 16px;
line-height: 28px;
color: rgba(255, 255, 255, 0.85);
margin-right: 16px;
cursor: pointer;
}
}
</style>
\ No newline at end of file
<template>
<div class="my-agency">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="事件名称:">
<el-select v-model="formInline.eventNameId"
placeholder="请选择"
>
<el-option
v-for="(item, index) in basicConfiguration.ticketEventName"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发生位置:">
<el-input v-model="formInline.keyword" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="所属区域:">
<el-select v-model="formInline.branchFactoryIds"
placeholder="请选择"
>
<el-option label="全部" value="" />
<el-option v-for="(item, index) in basicConfiguration.branchFactoryList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="设备类型">
<el-select v-model="formInline.deviceType">
<el-option label="全部" value="" />
<el-option
v-for="(item, index) in basicConfiguration.deviceList"
index="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="发生时间">
<el-date-picker type="daterange"
v-model="formInline.createTime"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button class="default-btn" @click="onSearch">搜索</el-button>
<el-button type="primary" class="default-btn" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<div class="table-box">
<common-table
:data="tableData"
:columns="tableColumns"
:default-page-size="20"
@pagination-change="handlePaginationChange"
:pagination-texts="{
total: '共',
sizeChange: '条/页',
prev: '前一页',
next: '后一页',
jumper: '跳至',
}"
>
<template #index="{ $index }">
{{ getIndex($index) }}
</template>
<template #level="{ row }">
<span class="level" :class="getColor(row.level)">
{{ row.level }}
</span>
</template>
<template #operation="{ row }">
<el-button type="primary" link @click="handleDone(row)">
处理
</el-button>
<span class="table-btn">|</span>
<el-button type="primary" link @click="handleDispatch(row)">
分派
</el-button>
<span class="table-btn">|</span>
<el-button type="primary" link @click="changeBag(row)">
更换布袋
</el-button>
</template>
</common-table>
</div>
<common-dialog
:showDialog="assignDialog.show"
:title="assignDialog.title"
:btnGroup="assignDialog.btnGroup"
@handleBtn="closeAssignDialog"
@close:showDialog="assignDialog.show = false"
>
<el-form :inline="true">
<el-form-item label="分派人:">
<el-select v-model="handlerPeopleId" filterable placeholder="请选择分派人">
<el-option
v-for="(item, i) in handlerPeople"
:key="i"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addPerson">新增</el-button>
</el-form-item>
<el-form-item label="已分派人:">
<el-tag
v-for="(ele,eIndex) in personTag"
:key="ele.name"
closable
@close="delPerson(eIndex)"
:type="ele.type">
{{ele.name}}
</el-tag>
</el-form-item>
</el-form>
</common-dialog>
<common-dialog
:show-dialog="rejectDialog.show"
:title="rejectDialog.title"
:btnGroup="rejectDialog.btnGroup"
@handleBtn="closeRejectDialog"
@close:visible="rejectDialog.show = false"
>
<el-form>
<el-form-item label="驳回原因">
<el-select v-model="rejectType">
<el-option v-for="(item, i) in reasonList"
:key="i"
:label="item.description"
:value="item.rejectType"
>
</el-option>
</el-select>
</el-form-item>
<el-row>
<el-col :span="21">
<el-input type="textarea" v-model="rejectReason" :autosize="{ minRows: 2, maxRows: 12 }" placeholder="请输入内容">
</el-input>
</el-col>
</el-row>
</el-form>
</common-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount,computed } from 'vue'
import CommonTable from "@/components/commonTable/index.vue";
import commonDialog from "./components/dialog.vue";
import { getDataFun } from '@/request/method.js';
import moment from 'moment';
const formInline = ref({
eventNameId: '',
keyword: '',
warnType: '',
branchFactoryIds: '',
deviceType: '',
createTime: [
moment(new Date().getTime() - 1000 * 60 * 60 * 24).format('YYYY-MM-DD HH:mm:ss'),
moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
]
});
</script>
const workTicketNo = ref('');
const rejectType = ref('');
const reasonList = ref([]);
const rejectReason = ref('');
<template>
const rejectDialog = ref({
title: '驳回申请',
show: false,
btnGroup: [
{
attrKey: 'save',
label: '保存'
},
{
attrKey: 'cancel',
label: '关闭'
}
]
});
</template>
const handlerPeopleId = ref('');
const handlerPeople = ref([]);
const assignDialog = ref({
title: '闭环控制分派',
show: false,
width: '50%',
btnGroup: [
{
attrKey: 'save',
label: '保存'
},
{
attrKey: 'cancel',
label: '关闭'
}
]
});
const personTag = ref([]);
const addPerson = ()=>{
const target = handlerPeople.value.find(item => item.id === handlerPeopleId.value);
personTag.value.push({
userId: target.id,
userName: target.name,
name: target.name,
type: 'info'
});
}
const delPerson = (index)=>{
}
const isShow = ref(true);
const getIndex = (index) => {
return (currentPage.value - 1) * pageSize.value + index + 1;
};
const basicConfiguration = reactive({
ticketEventName: [],
eventTypeList: [],
branchFactoryList: [],
deviceList: []
});
const workSheetDetail = ref(null);
const getColor = computed(()=>{
return (level) => {
if (level == 2) {
return 'red'
} else if (level == 1) {
return 'yellow'
} else {
return 'purple'
}
}
});
const onSearch = ()=> {
}
const onReset =()=> {
}
const handleDone = (data)=> {
}
const handleView = (data)=>{
}
// 拒绝
const handleReject = (data)=> {
workTicketNo.value = data.workTicketNo;
rejectDialog.value.show = true;
}
// 分派
const handleDispatch = async (data)=> {
assignDialog.value.show = true;
/*let res = await getDetail(data.workTicketNo);
personTag.value = [];
if (res.handleUsers && res.handleUsers.length > 0) {
res.handleUsers.forEach(item => {
personTag.value.push({
type: 'info',
name: item.userName,
userId: item.userId,
userName: item.userName
});
});
}*/
}
const closeAssignDialog = () => {
assignDialog.value.show = false;
}
const closeRejectDialog = ()=>{
rejectDialog.value.show = false;
}
const getDetail = (workTicketNo) => {
return new Promise((resolve,reject) => {
const url = '/transaction/doc/detail';
const params = {
workTicketNo
}
getDataFun(url,params).then(res => {
workSheetDetail.value = res.data;
resolve(res.data);
}).catch(err => {
reject();
});
});
}
const changeBag = (data)=>{
}
const tableData = [
{
id: 1,
name: '张三',
phone: '13888888888',
email: '<EMAIL>',
branchFactory: '上海分公司',
deviceType: '烟感',
eventTime: '2021-09-09 12:00:00',
eventStatus: '已处理',
eventDetail: '设备报警',
level: 1
},
{
id: 2,
name: '张三',
phone: '13888888888',
email: '<EMAIL>',
branchFactory: '上海分公司',
deviceType: '烟感',
eventTime: '2021-09-09 12:00:00',
eventStatus: '已处理',
eventDetail: '设备报警',
level: 2
},
{
id: 3,
name: '张三',
phone: '13888888888',
email: '<EMAIL>',
branchFactory: '上海分公司',
deviceType: '烟感',
eventTime: '20',
level: 3
}
];
const tableColumns = ref([
{
prop: 'workTicketNo',
label: '编号',
width: '10%'
},
{
prop: 'eventName',
label: '事件名称',
width: '10%'
},
{
prop: 'deviceName',
label: '发生位置',
width: '10%'
},
{
prop: 'deviceNo',
label: '设备编码',
width: '10%'
},
{
prop: 'deviceType',
label: '设备类型',
width: '10%'
},
{
prop: 'signalName',
label: '信号名称',
width: '10%'
},
{
prop: 'branchFactory', label: '所属区域',width: '10%' },
{ prop: 'warnTypeName', label: '类型',width: '10%' },
{ prop: 'createTime', label: '发生时间',width: '10%' },
{ prop: 'desc', label: '闭环状态',width: '10%' },
{ prop: 'person', label: '处理人',width: '10%' },
{ prop: 'level', label: '级别',width: '5%' },
{
prop: "operation",
label: "操作",
width: '15%'
},
]);
const currentPage = ref(1);
const pageSize = ref(20);
const handlePaginationChange = (pagination) => {
currentPage.value = pagination.currentPage;
pageSize.value = pagination.pageSize;
console.log("分页变化", pagination);
};
</script>
<style scoped lang="scss">
.my-agency {
width: 100%;
height: calc(100% - 14px);
box-sizing: border-box;
background: #fff;
padding: 20px;
display: flex;
flex-direction: column;
box-sizing: border-box;
&-bottom {
flex: 1;
}
.level {
width: 100%;
color: #fff;
text-align: center;
}
.yellow {
// color: #faa508;
position: relative;
&::before {
content: ' ';
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffb224;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
}
}
.red {
position: relative;
&::before {
content: ' ';
width: 8px;
height: 8px;
border-radius: 50%;
background: #db001d;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
}
}
.purple {
position: relative;
&::before {
content: ' ';
width: 8px;
height: 8px;
border-radius: 50%;
background: #aa05fa;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);
}
}
.default-btn {
width: 85px;
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
}
}
</style>
\ No newline at end of file
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