xiaoy
/
water-dispatch-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2023-11-30 xy

Browse Source
master
xy 2 years ago
parent 693590784d
commit 5d828825ed
3 changed files with 893 additions and 92 deletions
Show Stats Download Patch File Download Diff File

536
src/views/order/component/createDispatch.vue
Unescape View File

@ -0,0 +1,536 @@
<template>
<div>
<div class="select">
<div class="select-item">
<div class="select-item__title">片区</div>
<el-checkbox-group size="small" v-model="select.area">
<el-checkbox-button v-for="item in areas" :label="item.value">{{
item.key
}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="select-item">
<div class="select-item__title">功能</div>
<el-checkbox-group size="small" v-model="select.type">
<el-checkbox-button v-for="item in types" :label="item.value">{{
item.key
}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="select-item">
<Button type="primary" style="margin-left: 10px" @click="clear"
>清空筛选</Button
>
</div>
<div class="date">
<p>
您正在为
<span style="color: red">{{ date }}</span>
创建
<span> {{ "排水" }} </span>
调令
</p>
<DatePicker
:value="date"
type="date"
format="yyyy-MM-dd"
:options="options"
placeholder="日期选择"
style="width: 160px; margin-left: 14px"
@on-change="(e) => (date = e)"
></DatePicker>
</div>
</div>
<Table
:columns="columns"
:data="mergeData"
stripe
:span-method="objectSpanMethod"
></Table>
<div class="btns">
<Button type="primary" @click="submit">创建调令</Button>
<Button type="primary" ghost @click="reset">重置列表</Button>
</div>
</div>
</template>
<script>
import { index, save } from "@/api/system/baseForm";
import { deepCopy } from "@/utils";
import { mergeTableRow } from "@/utils/mergeTableRow";
import { show } from "@/api/system/customFormField";
export default {
inject: ["equipments"],
props: {},
data() {
const _this = this;
return {
options: {
shortcuts: [
{
text: "今天",
onClick() {
_this.date = _this.$moment().format("YYYY-MM-DD");
},
},
{
text: "明天",
onClick() {
_this.date = _this.$moment().add(1, "days").format("YYYY-MM-DD");
},
},
{
text: "一周后",
onClick() {
_this.date = _this.$moment().add(1, "weeks").format("YYYY-MM-DD");
},
},
{
text: "一个月后",
onClick() {
_this.date = _this
.$moment()
.add(1, "months")
.format("YYYY-MM-DD");
},
},
],
},
areas: [],
types: [],
select: {
area: [],
type: [],
},
weather: [],
copyOriginalData: [],
date: this.$moment().format("YYYY-MM-DD"),
data:
this.equipmentList?.map((i) => ({
equipment_id: i.id,
start_time: "",
end_time: "",
content: "",
level: 1,
})) || [],
columns: [
// {
// width: 50,
// title: ' ',
// type: 'index',
// key: 'index'
// },
{
title: "点位",
width: 240,
key: "equipment_id",
align: "center",
render: (h, { row, index }) => {
let equipment = this.equipmentList.find(
(i) => i.id === row.equipment_id
);
let text = equipment ? equipment.name : "";
return h("div", [
h('span',text),
h('Button',{
props: {
size: 'small',
type: 'primary',
icon: 'ios-add'
},
style: {
'margin-left': '6px'
},
on: {
['click']:e => {
this.data.splice(index,0,deepCopy(row))
}
}
},'新增')
]);
},
// render: (h,{ row, index }) => {
// return h('div',{
// style: {
// display: 'flex',
// 'justify-content': 'space-between'
// }
// },[
// h('Select',{
// style: {
// width: '140px'
// },
// props: {
// value: row.equipment_id,
// filterable: true,
// size: 'small',
// transfer: true,
// disabled: true
// },
// on: {
// ['on-select']:e => {
// row.equipment_id = e.value;
// }
// }
// },this.equipments().map(i => {
// return h('Option',{
// props: {
// value: i.id,
// }
// },i.name)
// })),
// h('Button',{
// props: {
// size: 'small',
// type: 'primary'
// },
// on: {
// ['click']:e => {
// this.data.splice(index,0,deepCopy(row))
// }
// }
// },'新增')
// ])
// }
},
{
title: "开启时间",
width: 140,
align: "center",
key: "start_time",
render: (h, { row, index }) => {
return h("TimePicker", {
props: {
value: row.start_time,
type: "time",
size: "small",
transfer: true,
},
on: {
["on-change"]: (e) => (this.data[index].start_time = e),
},
});
},
},
{
title: "结束时间",
width: 140,
align: "center",
key: "end_time",
render: (h, { row, index }) => {
return h("TimePicker", {
props: {
value: row.end_time,
type: "time",
size: "small",
transfer: true,
},
on: {
["on-change"]: (e) => (this.data[index].end_time = e),
},
});
},
},
{
title: "调令内容",
minWidth: 200,
key: "content",
align: "center",
render: (h, { row, index }) => {
return h("Input", {
style: {
padding: "6px 0",
},
props: {
size: "small",
value: row.content,
type: "textarea",
},
on: {
["input"]: (e) => (this.data[index].content = e),
},
});
},
},
{
title: "调令等级",
width: 140,
key: "level",
align: "center",
render: (h, { row }) => {
return h(
"Select",
{
props: {
value: row.level,
filterable: true,
size: "small",
transfer: true,
},
on: {
["on-select"]: (e) => {
row.level = e.value;
},
},
},
[
{ label: "一般", value: 1 },
{ label: "紧急", value: 2 },
].map((i) => {
return h(
"Option",
{
props: {
value: i.value,
},
},
i.label
);
})
);
},
},
{
title: "操作",
width: 140,
key: "operate",
render: (h, { row, index }) => {
return h(
"Poptip",
{
props: {
title: "确认要删除吗？",
confirm: true,
transfer: true,
},
on: {
["on-ok"]: (e) => {
this.data.splice(index, 1);
},
},
},
[
h(
"Button",
{
props: {
type: "primary",
size: "small",
},
},
"删除"
),
]
);
},
},
],
};
},
methods: {
clear () {
this.select = {
area: [],
type: [],
};
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column["key"] + "-span";
if (row[span]) {
return row[span];
}
},
reset () {
this.clear();
this.data =
this.equipmentList?.map((i) => ({
equipment_id: i.id,
start_time: "",
end_time: "",
content: "",
level: 1,
})) || [];
},
submit () {
let verify = true;
const submitData = this.data.filter(i => (i.start_time || i.end_time || i.content));
submitData.forEach(item => {
if (!item.start_time || !item.end_time || !item.level) {
verify = false;
}
})
if (!verify) {
this.$message({
type: 'warning',
message: '请填写完整信息'
})
return
}
let promiseAll = submitData.map(i => {
delete i['equipment_id-span']
delete i['_index']
delete i['_rowKey']
i.start_time = `${this.date} ${i.start_time}`;
i.end_time = `${this.date} ${i.end_time}`;
return save({
table_name: 'transfers',
...i
},false)
})
let loadingInstance = this.$loading({
lock:true,
background:"rgba(0,0,0,0.4)",
text:"正在加载中..."
})
Promise.all(promiseAll).then(res => {
this.reset();
loadingInstance.close();
this.$message({
type: 'success',
message: `成功创建${res.length}条调令`
})
}).catch(_ => {
loadingInstance.close();
})
},
async getArea() {
const obj = (await show({ id: 4 }, false))?.select_item;
if (obj && typeof obj === "object") {
let keys = Object.keys(obj);
if (keys.length > 0) {
this.areas = keys.map((key) => {
return {
key,
value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
};
});
}
}
},
async getType() {
const obj = (await show({ id: 1 }, false))?.select_item;
if (obj && typeof obj === "object") {
let keys = Object.keys(obj);
if (keys.length > 0) {
this.types = keys.map((key) => {
return {
key,
value: /^\d*$/.test(obj[key]) ? Number(obj[key]) : obj[key],
};
});
}
}
},
},
computed: {
mergeData() {
return mergeTableRow({
data: this.data.map((i) => {
delete i["equipment_id-span"];
return i;
}),
mergeColNames: ["equipment_id"], // 需要合并的列，默认合并列相同的数据
firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
});
},
equipmentList() {
return this.equipments() || [];
},
},
watch: {
equipmentList(val) {
this.data =
val?.map((i) => ({
equipment_id: i.id,
start_time: "",
end_time: "",
content: "",
level: 1,
})) || [];
},
select: {
handler: function (val) {
if (val.area.length > 0 || val.type.length > 0) {
let list1 = [];
let list2 = [];
if (val.area.length > 0) {
list1 = this.equipments().filter(i => val.area.find(j => j === i.id))
}
if (val.type.length > 0) {
list2 = this.equipments().filter(i => val.type.find(j => j === i.id))
}
this.data = Array.from(new Set([...list1,...list2].map(JSON.stringify))).map(JSON.parse).map((i) => ({
equipment_id: i.id,
start_time: "",
end_time: "",
content: "",
level: 1,
})) || [];
} else {
this.data = this.equipments()?.map((i) => ({
equipment_id: i.id,
start_time: "",
end_time: "",
content: "",
level: 1,
})) || [];;
}
},
deep: true
}
},
mounted() {},
created() {
this.getArea();
this.getType();
},
};
</script>
<style scoped lang="scss">
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.select {
&-item {
display: flex;
align-items: center;
&__title {
width: 50px;
flex-shrink: 0;
font-weight: 600;
text-align: center;
}
& + & {
margin-top: 10px;
}
}
.date {
display: flex;
align-items: center;
padding: 10px;
}
}
.btns {
margin-top: 10px;
padding-left: 10px;
}
</style>

174
src/views/order/component/dispatchList.vue
Unescape View File

@ -0,0 +1,174 @@
<template>
<div>
<Table
:columns="columns"
:data="mergeData"
stripe
:span-method="objectSpanMethod"
></Table>
<el-pagination
class="pagination"
@size-change="e => {
select.page_size = e;
select.page = 1;
getDispatches();
}"
@current-change="e => {
select.page = e;
getDispatches();
}"
:current-page="select.page"
:page-sizes="[10, 20, 30, 40]"
:page-size="select.page_size"
layout="total, prev, pager, next, jumper, sizes"
:total="total">
</el-pagination>
</div>
</template>
<script>
import { deepCopy } from "@/utils";
import { index } from "@/api/system/baseForm";
import {mergeTableRow} from "@/utils/mergeTableRow";
export default {
inject: ["equipments"],
data() {
return {
select: {
table_name: 'transfers',
page: 1,
page_size: 10,
sort_name: 'equipment_id'
},
total: 0,
data: [],
columns: [
{
title: "点位",
width: 240,
key: "equipment_id",
align: "center",
render: (h, { row, index }) => {
let equipment = this.equipmentList.find(
(i) => i.id === row.equipment_id
);
let text = equipment ? equipment.name : "";
return h('span',text);
},
},
{
title: "开启时间",
width: 180,
align: "center",
key: "start_time",
},
{
title: "结束时间",
width: 180,
align: "center",
key: "end_time",
},
{
title: "调令内容",
minWidth: 200,
key: "content",
align: "left",
},
{
title: "调令等级",
width: 140,
key: "level",
align: "center",
render: (h, { row }) => {
let type = new Map([
[1,'一般'],
[2,'紧急']
])
return h('span',type.get(row.level));
},
},
{
title: "操作",
width: 140,
key: "operate",
render: (h, { row, index }) => {
return h(
"Poptip",
{
props: {
title: "确认要删除吗？",
confirm: true,
transfer: true,
},
on: {
["on-ok"]: (e) => {
this.data.splice(index, 1);
},
},
},
[
h(
"Button",
{
props: {
type: "primary",
size: "small",
},
},
"删除"
),
]
);
},
},
]
}
},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column["key"] + "-span";
if (row[span]) {
return row[span];
}
},
async getDispatches () {
const res = await index(this.select);
this.data = res.data;
this.total = res.total;
}
},
computed: {
mergeData() {
return mergeTableRow({
data: this.data.map((i) => {
delete i["equipment_id-span"];
return i;
}),
mergeColNames: ["equipment_id"], // 需要合并的列，默认合并列相同的数据
firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
firstMerge: "equipment_id", // 以哪列为基础进行合并，一般为第一列
});
},
equipmentList() {
return this.equipments() || [];
},
},
watch: {
},
created() {
this.getDispatches()
}
}
</script>
<style scoped lang="scss">
.pagination {
display: flex;
justify-content: center;
padding: 20px 0;
}
</style>

275
src/views/order/component/normalCreate.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<div>
<div style="padding-bottom: 10px;">
<LxHeader
icon="md-apps"
:text="$route.meta.title"
@ -8,122 +8,169 @@
>
</LxHeader>
<Card>
<div class="step">
<el-steps :active="currentStep" align-center process-status="finish" finish-status="success">
<el-step title="点位选择"></el-step>
<el-step title="调令内容"></el-step>
<el-step title="调令预览"></el-step>
<el-step title="完成"></el-step>
</el-steps>
<div class="weather panel">
<div class="title">今日信息</div>
<template v-if="weather">
<div class="weather-container">
<Card class="weather-container__card" v-for="(value,key) in weatherObj">
<template #title>
{{ value }}
</template>
<template>
<template v-if="weather[key]&&weather[key].length>15">
<el-tooltip placement="bottom" :content="weather[key]">
<span class="text">{{ weather[key] }}</span>
</el-tooltip>
</template>
<template v-else>
{{ weather[key] }}
</template>
</template>
</Card>
</div>
</template>
<template v-else>
<Card>
<el-empty :image-size="60" description="暂无信息"></el-empty>
</Card>
</template>
</div>
<div class="point panel">
<div class="title">创建调令</div>
<div class="point-container">
<Card class="point-container__card">
<createDispatch></createDispatch>
</Card>
</div>
</div>
<Divider></Divider>
<div class="content">
<step1 v-if="currentStep === 0" :original-data="data" @next="handleNext"></step1>
<step2 v-if="currentStep === 1" :original-data="data" @next="handleNext" @forward="handleForward"></step2>
<step3 v-if="currentStep === 2" :original-data="data" @next="handleNext" @forward="handleForward"></step3>
<div v-if="currentStep === 3" class="complete">
<Icon class="complete__icon" type="ios-checkmark-circle" />
<div class="dispatch panel">
<div class="title">已创建调令</div>
<p>完成</p>
<Button style="width: 180px;" type="primary" @click="$router.push('/dispatch/list')">查看调令</Button>
</div>
<div class="point-container">
<Card class="point-container__card">
<dispatchList></dispatchList>
</Card>
</div>
</Card>
</div>
</div>
</template>
<script>
import { save } from "@/api/system/baseForm";
import { index, save } from "@/api/system/baseForm";
import { uuid } from "@/utils";
import LxHeader from "@/components/LxHeader/index.vue";
import step1 from "@/views/order/component/step1.vue";
import step2 from "@/views/order/component/step2.vue";
import step3 from "@/views/order/component/step3.vue";
// import step1 from "@/views/order/component/step1.vue";
// import step2 from "@/views/order/component/step2.vue";
// import step3 from "@/views/order/component/step3.vue";
import createDispatch from "@/views/order/component/createDispatch.vue";
import dispatchList from "@/views/order/component/dispatchList.vue";
export default {
components: {
LxHeader,
step1,
step2,
step3
createDispatch,
dispatchList
},
data() {
return {
currentStep: 0,
data: []
data: [],
weather: {},
weatherObj: {
weather: '今日天气',
water: '今日水情',
rain: '降水情况',
prevent: '预警',
early_warning: '防汛等级'
}
}
},
methods: {
handleNext ({ data, step }) {
console.log(data,step)
switch (step) {
case 1:
let uid = uuid();
this.data = data.map(equipmentId => {
return {
no: uid,
equipment_id: equipmentId,
start_time: '',
end_time: '',
content: '',
level: 1,
status: 1
}
})
this.currentStep = 1;
break;
case 2:
this.data = data;
this.currentStep = 2;
break;
case 3:
let promiseAll = this.data.map(i => {
delete i['equipment_id-span']
delete i['_index']
delete i['_rowKey']
i.start_time = `${this.$moment().format('YYYY-MM-DD')} ${i.start_time}`;
i.end_time = `${this.$moment().format('YYYY-MM-DD')} ${i.end_time}`;
return save({
table_name: 'transfers',
...i
},false)
})
let loadingInstance = this.$loading({
lock:true,
background:"rgba(0,0,0,0.4)",
text:"正在加载中..."
})
Promise.all(promiseAll).then(res => {
this.data = [];
loadingInstance.close();
this.currentStep = 3;
}).catch(_ => {
loadingInstance.close();
})
break;
}
},
handleForward ({ data, step }) {
switch (step) {
case 2:
this.data = data;
this.currentStep = 0;
break;
case 3:
this.currentStep = 1;
break;
}
// handleNext ({ data, step }) {
// console.log(data,step)
// switch (step) {
// case 1:
// let uid = uuid();
// this.data = data.map(equipmentId => {
// return {
// no: uid,
// equipment_id: equipmentId,
// start_time: '',
// end_time: '',
// content: '',
// level: 1,
// status: 1
// }
// })
// this.currentStep = 1;
// break;
// case 2:
// this.data = data;
// this.currentStep = 2;
// break;
// case 3:
// let promiseAll = this.data.map(i => {
// delete i['equipment_id-span']
// delete i['_index']
// delete i['_rowKey']
// i.start_time = `${this.$moment().format('YYYY-MM-DD')} ${i.start_time}`;
// i.end_time = `${this.$moment().format('YYYY-MM-DD')} ${i.end_time}`;
//
// return save({
// table_name: 'transfers',
// ...i
// },false)
// })
// let loadingInstance = this.$loading({
// lock:true,
// background:"rgba(0,0,0,0.4)",
// text:"正在加载中..."
// })
// Promise.all(promiseAll).then(res => {
// this.data = [];
// loadingInstance.close();
// this.currentStep = 3;
// }).catch(_ => {
// loadingInstance.close();
// })
// break;
// }
// },
//
// handleForward ({ data, step }) {
// switch (step) {
// case 2:
// this.data = data;
// this.currentStep = 0;
// break;
// case 3:
// this.currentStep = 1;
// break;
// }
// },
async getWeather () {
this.weather = (await index({
table_name: 'waters',
filter: [
{
key: 'date',
op: 'eq',
value: this.$moment().format('YYYY-MM-DD')
}
]
},false)).data[0]
}
},
computed: {},
created() {
this.getWeather()
}
}
</script>
@ -131,7 +178,51 @@ export default {
::v-deep .ivu-steps .ivu-steps-title,::v-deep .ivu-steps .ivu-steps-head {
background: #0000;
}
.panel {
.title {
font-weight: 600;
font-size: 16px;
padding: 10px 20px;
position: relative;
&::before {
content: '';
width: 12px;
height: 12px;
border-radius: 100%;
transform: translateY(-50%);
background: radial-gradient(50% 50% at 50% 50%,$primaryColor 0,$primaryColor 60%,#0000 60%,#0000 80%,$primaryColor 80%,$primaryColor 100%);
position: absolute;
left: 0;
top: 50%;
}
}
& + & {
margin-top: 20px;
}
}
.weather {
&-container {
display: flex;
justify-content: space-between;
&__card {
flex: 0;
flex-basis: 19%;
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
}
}
}
.step {
width: 80%;

Write Preview
Loading…
Cancel
Save