xy 2 years ago
parent 49a46b2836
commit 7f8f826384

@ -35,6 +35,7 @@
"vue": "2.6.10", "vue": "2.6.10",
"vue-awesome": "^4.5.0", "vue-awesome": "^4.5.0",
"vue-count-to": "^1.0.13", "vue-count-to": "^1.0.13",
"vue-esign": "^1.1.4",
"vue-router": "3.0.6", "vue-router": "3.0.6",
"vuedraggable": "^2.24.3", "vuedraggable": "^2.24.3",
"vuex": "3.1.0", "vuex": "3.1.0",

@ -12,5 +12,16 @@ module.exports = {
* @type {boolean} true | false * @type {boolean} true | false
* @description Whether show the logo in sidebar * @description Whether show the logo in sidebar
*/ */
sidebarLogo: false sidebarLogo: false,
/**
* @type {number}
* @description 通知刷新分钟间隔
*/
refreshNoticeTime: 2 * 60 * 1000,
/**
* @type {number}
* @description 调令列表刷新分钟间隔
*/
refreshTransferTime: 2 * 60 * 1000,
} }

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4329577 */ font-family: "iconfont"; /* Project id 4329577 */
src: url('iconfont.woff2?t=1699943620567') format('woff2'), src: url('iconfont.woff2?t=1704262099598') format('woff2'),
url('iconfont.woff?t=1699943620567') format('woff'), url('iconfont.woff?t=1704262099598') format('woff'),
url('iconfont.ttf?t=1699943620567') format('truetype'); url('iconfont.ttf?t=1704262099598') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-shengchanhejiagongqingkuang:before {
content: "\e9b8";
}
.icon-shenpi1:before { .icon-shenpi1:before {
content: "\e77e"; content: "\e77e";
} }

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -130,8 +130,8 @@
// //
.content-box { .content-box {
display: grid; //display: grid;
grid-template-columns: 2fr 5fr; //grid-template-columns: 2fr 5fr;
} }
// //

@ -179,3 +179,18 @@ export function uuid() {
return v.toString(16); return v.toString(16);
}); });
} }
export function base64toFile (dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
}

@ -61,11 +61,11 @@
<div class="body-box"> <div class="body-box">
<!-- 第三行数据 --> <!-- 第三行数据 -->
<div class="content-box"> <div class="content-box">
<div> <!-- <div>-->
<dv-border-box-11 title="调令统计数据"> <!-- <dv-border-box-11 title="调令统计数据">-->
<centerLeft1 /> <!-- <centerLeft1 />-->
</dv-border-box-11> <!-- </dv-border-box-11>-->
</div> <!-- </div>-->
<div> <div>
<dv-border-box-11 title="调令实时看板"> <dv-border-box-11 title="调令实时看板">
<centerRight1 /> <centerRight1 />
@ -109,7 +109,8 @@ export default {
provide() { provide() {
return { return {
load: this.load, load: this.load,
cancelLoading: this.cancelLoading cancelLoading: this.cancelLoading,
showModal: this.showModal
} }
}, },
components: { components: {
@ -141,18 +142,25 @@ export default {
this.timeFn(); this.timeFn();
this.cancelLoading(); this.cancelLoading();
setTimeout(() => {
this.$alert('时间2023-01-02', '收到一条紧急条令', {
confirmButtonText: '确定',
customClass: "big-screen-modal",
type: "warning"
});
},3000)
}, },
beforeDestroy () { beforeDestroy () {
clearInterval(this.timing) clearInterval(this.timing)
}, },
methods: { methods: {
showModal (isEmergent = false, message) {
let modal = this.$alert('', `收到一条${isEmergent ? '紧急': ''}信息`, {
message,
confirmButtonText: '确定',
customClass: isEmergent ? "big-screen-modal big-screen-modal-warning" : "big-screen-modal",
iconClass: "el-icon-message-solid"
});
if (!isEmergent) {
setTimeout(() => {
modal.close()
},10 * 10000)
}
},
fullscreen () { fullscreen () {
document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen() document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen()
}, },
@ -193,4 +201,32 @@ export default {
div:has(.big-screen-modal) { div:has(.big-screen-modal) {
z-index: 9999999 !important; z-index: 9999999 !important;
} }
.big-screen-modal-warning {
filter: drop-shadow(0 0 1px rgb(200,0,0))
drop-shadow(0 0 3px rgb(215, 9, 9))
drop-shadow(0 0 4px rgb(224, 40, 40))
drop-shadow(0 0 5px rgb(225, 91, 91));
animation: warning 1.5s ease-in-out infinite alternate;
}
@keyframes warning {
to {
filter: drop-shadow(0 0 3px rgb(200,0,0))
drop-shadow(0 0 9px rgb(215, 9, 9))
drop-shadow(0 0 12px rgb(224, 40, 40))
drop-shadow(0 0 20px rgb(225, 91, 91));
}
}
.big-screen-modal-warning .el-message-box__status {
color: rgb(200, 0 ,0);
transform-origin: 50% 0;
//animation: wobble 4s infinite;
}
@keyframes wobble {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
</style> </style>

@ -1,57 +1,98 @@
<template> <template>
<div class="notice d-flex"> <div class="notice">
<dv-border-box-12 style="width: 10%;"> <div>
<dv-border-box-12>
<p class="title">通知</p> <p class="title">通知</p>
<dv-decoration-1 class="desc" /> <dv-decoration-1 class="desc" />
</dv-border-box-12> </dv-border-box-12>
<dv-border-box-1 class="flex-1 ml-2"> </div>
<div class="pt-5 pr-5 pb-5 pl-5 d-flex ai-center" style="height: 100%;width: 96%;overflow: hidden;margin: auto;"> <div style="overflow: hidden">
<div class="word-scroll"> <dv-border-box-1>
<span v-for="(item, index) in notice" :key="item.id"> <div class="pt-5 pr-5 pb-5 pl-5 d-flex ai-center word-container">
{{index+1}}. {{ item.shifoujinji == 1 ? '收到紧急调令:' : '' }}{{item.content}}{{item.created_at}} <div class="word-scroll">
</span> <span v-for="(item, index) in notice" :key="item.id">
{{index+1}}. {{ item.shifoujinji == 1 ? '收到紧急通知:' : '' }}{{item.content}}{{item.created_at}}
</span>
</div>
</div> </div>
</div> </dv-border-box-1>
</dv-border-box-1> </div>
</div> </div>
</template> </template>
<script> <script>
import { refreshNoticeTime } from "@/settings"
import { index } from "@/api/system/baseForm"; import { index } from "@/api/system/baseForm";
export default { export default {
inject: ['showModal'],
data() { data() {
return { return {
notice: [], notice: [],
timer: null,
forwardRefreshTime: '',
} }
}, },
methods: { methods: {
async getNotice () { async getNotice (isFirst = false) {
const res = await index({ if (isFirst) {
table_name: "notices", this.forwardRefreshTime = this.$moment()
page: 1, const res = await index({
page_size: 999, table_name: "notices",
filter: [ page: 1,
{ page_size: 999,
key: "created_at", filter: [
op: "like", {
value: this.$moment().format('YYYY-MM-DD') key: "created_at",
} op: "like",
] value: this.$moment().format('YYYY-MM-DD')
},false) }
console.log(res) ]
this.notice = res.data; },false)
this.notice = res.data;
} else {
const res = await index({
table_name: "notices",
page: 1,
page_size: 999,
filter: [
{
key: "created_at",
op: "range",
value: `${this.forwardRefreshTime.format('YYYY-MM-DD HH:mm:ss')},${this.$moment().format('YYYY-MM-DD HH:mm:ss')}`
}
]
},false)
if (res.data.length > 0) {
this.notice.push(...res.data)
res.data.forEach(i => {
this.showModal(i.shifoujinji,i.content)
})
}
this.forwardRefreshTime = this.$moment()
}
} }
}, },
computed: {}, computed: {},
created() { created() {
this.getNotice() this.getNotice(true)
},
mounted() {
this.timer = setInterval(() => {
this.getNotice()
},refreshNoticeTime)
},
beforeDestroy() {
clearInterval(this.timer)
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.notice { .notice {
display: grid;
grid-template-columns: 140px 1fr;
grid-gap: 10px;
height: 120px; height: 120px;
width: 100%; width: 100%;
.title { .title {
@ -72,19 +113,32 @@ export default {
} }
} }
.word-container {
height: 100%;
width: 96%;
overflow: hidden;
margin: auto;
&:hover {
.word-scroll {
animation-play-state: paused;
}
}
}
.word-scroll { .word-scroll {
font-size: 25px; font-size: 25px;
word-break: keep-all; word-break: keep-all;
white-space: nowrap; white-space: nowrap;
text-shadow: 1px 1px #fff8; text-shadow: 1px 1px #fff8;
animation: word-scroll 24s infinite linear; animation: word-scroll 24s infinite linear;
} }
@keyframes word-scroll { @keyframes word-scroll {
from { from {
transform: translateX(-100%); transform: translateX(1650px);
} }
to { to {
transform: translateX(1650px); transform: translateX(-100%);
} }
} }
</style> </style>

@ -10,44 +10,62 @@
<dv-border-box-10 class="board-item__title fw-b">待执行</dv-border-box-10> <dv-border-box-10 class="board-item__title fw-b">待执行</dv-border-box-10>
<transferBoard :transfers="transfers1" <transferBoard :transfers="transfers1"
:set-transfer-status-number="4" :set-transfer-status-number="4"
@refresh="getTransfer" :content-l-k="{
@showModal="d => ($refs['detailTransfer'].setData(d),$refs['detailTransfer'].show())"></transferBoard> start_time: '开启时间',
end_time: '关闭时间'
}"
@refresh="getTransfer(true)"
@showDetail="d => ($refs['detailTransfer'].setData(d),$refs['detailTransfer'].show())"></transferBoard>
</div> </div>
<div class="board-item"> <div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">执行中</dv-border-box-10> <dv-border-box-10 class="board-item__title fw-b">执行中</dv-border-box-10>
<transferBoard :transfers="transfers2" <transferBoard :transfers="transfers2"
:set-transfer-status-number="6" :set-transfer-status-number="6"
@refresh="getTransfer" :content-l-k="{
@showModal="d => ($refs['detailTransfer'].setData(d),$refs['detailTransfer'].show())"></transferBoard> start_time: '开启时间',
act_start_time: '开启执行时间',
end_time: '关闭时间',
}"
@refresh="getTransfer(true)"
@showDetail="d => ($refs['detailTransfer'].setData(d),$refs['detailTransfer'].show())"></transferBoard>
</div> </div>
<div class="board-item"> <div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">已完成</dv-border-box-10> <dv-border-box-10 class="board-item__title fw-b">已完成</dv-border-box-10>
<transferBoard :transfers="transfers3" <transferBoard :transfers="transfers3"
:set-transfer-status-number="-1" :set-transfer-status-number="-1"
@refresh="getTransfer" :content-l-k="{
@showModal="d => ($refs['detailTransfer'].setData(d),$refs['detailTransfer'].show())"></transferBoard> start_time: '开启时间',
act_start_time: '开启执行时间',
end_time: '关闭时间',
act_end_time: '关闭执行时间',
}"
@refresh="getTransfer(true)"
@showDetail="d => ($refs['detailTransfer'].setData(d),$refs['detailTransfer'].show())"></transferBoard>
</div> </div>
</div> </div>
</div> </div>
<detailTransfer ref="detailTransfer"></detailTransfer> <detailTransfer ref="detailTransfer" @refresh="getTransfer(true)"></detailTransfer>
</div> </div>
</template> </template>
<script> <script>
import { index, save } from "@/api/system/baseForm"; import { index, save } from "@/api/system/baseForm";
import { deepCopy } from "@/utils"; import { deepCopy } from "@/utils";
import { refreshTransferTime } from "@/settings";
import detailTransfer from "@/views/bigScreen/component/detailTransfer.vue"; import detailTransfer from "@/views/bigScreen/component/detailTransfer.vue";
import transferBoard from "@/views/bigScreen/component/transferBoard.vue"; import transferBoard from "@/views/bigScreen/component/transferBoard.vue";
export default { export default {
inject: ['load','cancelLoading'], inject: ['load','cancelLoading','showModal'],
components: { components: {
transferBoard, transferBoard,
detailTransfer detailTransfer
}, },
data() { data() {
return { return {
forwardRefreshTime: '',
timer: null,
transferObj: [ transferObj: [
{ {
status: 4, status: 4,
@ -68,37 +86,79 @@ export default {
}; };
}, },
methods: { methods: {
async getTransfer() { async getTransfer(isFirst = false) {
this.transfers1 = []; if (isFirst) {
this.transfers2 = []; this.forwardRefreshTime = this.$moment();
this.transfers3 = []; this.transfers1 = [];
const res = ( this.transfers2 = [];
await index({ this.transfers3 = [];
table_name: "transfers", const res = (
page: 1, await index({
page_size: 9999, table_name: "transfers",
filter: [ page: 1,
{ page_size: 9999,
key: 'start_time', filter: [
op: 'range', {
value: `${this.$moment().startOf('days').format('YYYY-MM-DD HH:mm:ss')},${this.$moment().endOf('days').format('YYYY-MM-DD HH:mm:ss')}` key: 'start_time',
op: 'range',
value: `${this.$moment().startOf('days').format('YYYY-MM-DD HH:mm:ss')},${this.$moment().endOf('days').format('YYYY-MM-DD HH:mm:ss')}`
},
{
key: 'status',
op: 'neq',
value: 1
}
]
},false)
).data;
res.forEach(i => {
if (i.status === 2 || i.status === 3) {
this.transfers1.push(i)
}
if (i.status === 4) {
this.transfers2.push(i)
}
if (i.status === 6) {
this.transfers3.push(i)
}
})
} else {
const res = (
(await index({
table_name: "transfers",
page: 1,
page_size: 9999,
filter: [
{
key: "created_at",
op: "range",
value: `${this.forwardRefreshTime.format('YYYY-MM-DD HH:mm:ss')},${this.$moment().format('YYYY-MM-DD HH:mm:ss')}`
},
{
key: "status",
op: "range",
value: "2,3"
}
]
},false)
).data);
if (res.length > 0) {
const h = this.$createElement;
this.transfers1.push(...res)
res.forEach(item => {
if (item.level === 2) {
this.showModal(true,h('div',[
h('p',item.equipment_id_equipments_id_relation?.name),
h('p',item.content),
h('p',`计划时间:${this.$moment(item.start_time).format('YYYY-MM-DD HH:mm')}~${this.$moment(item.end_time).format('HH:mm')}`)
]))
} }
] })
},false)
).data;
res.forEach(i => {
if (i.status === 2 || i.status === 3) {
this.transfers1.push(i)
} }
if (i.status === 4) { this.forwardRefreshTime = this.$moment()
this.transfers2.push(i) }
}
if (i.status === 6) {
this.transfers3.push(i)
}
})
this.$bus.$emit('cdata',[this.transfers1.length,this.transfers2.length,this.transfers3.length])
this.cancelLoading() this.cancelLoading()
}, },
}, },
@ -106,10 +166,15 @@ export default {
}, },
async mounted() { async mounted() {
await this.getTransfer(); await this.getTransfer(true);
this.timer = setInterval(() => {
this.getTransfer()
},refreshTransferTime)
},
beforeDestroy() {
clearInterval(this.timer)
}, },
destroyed () {
}
}; };
</script> </script>

@ -1,13 +1,18 @@
<template> <template>
<div> <div>
<transition name="fade"> <transition name="fade">
<div v-show="isShow" class="modal" @click="hide"> <div v-show="isShow" class="modal">
<dv-border-box-10 style="width: 100%;height: 100%;"> <dv-border-box-10 style="width: 100%;height: 100%;">
<div style="padding: 20px;width: 100%;height: 100%;"> <div style="padding: 20px;width: 100%;height: 100%;">
<table> <table>
<thead> <thead>
<tr> <tr>
<th colspan="2" style="height: 74px;font-size: 26px;letter-spacing: 4px;font-weight: 600;">{{ data.equipment_id_equipments_id_relation ? data.equipment_id_equipments_id_relation.name : '' }}</th> <th colspan="2" style="height: 74px;font-size: 26px;letter-spacing: 4px;font-weight: 600;">
<div style="position: relative;">
<p>{{ data.equipment_id_equipments_id_relation ? data.equipment_id_equipments_id_relation.name : '' }}</p>
<Button style="position: absolute;top: 50%;right: 20px;transform: translateY(-50%)" type="primary" ghost @click="hide"></Button>
</div>
</th>
</tr> </tr>
<tr style="height: 54px;"> <tr style="height: 54px;">
<th>时间</th> <th>时间</th>
@ -18,21 +23,56 @@
<tr> <tr>
<td> <td>
<div> <div>
<div>{{ $moment(data.start_time).format('YYYY-MM-DD HH:mm:ss') }}</div> <div>{{ $moment(data.start_time).format('YYYY-MM-DD HH:mm') }}</div>
<div style="padding: 10px 0;">~</div> <div style="padding: 10px 0;">~</div>
<div>{{ $moment(data.end_time).format('YYYY-MM-DD HH:mm:ss') }}</div> <div>{{ $moment(data.end_time).format('YYYY-MM-DD HH:mm') }}</div>
</div> </div>
</td> </td>
<td> <td>
<div style="text-align: left;padding: 20px;height: 100%;display: flex;flex-direction: column;justify-content: space-between;"> <div style="line-height: 1.2;text-align: left;padding: 20px;height: 100%;display: flex;flex-direction: column;justify-content: space-between;">
{{ data.content }} <p>发令人{{ data.admin ? data.admin.name : '' }}</p>
<p>发令时间{{ $moment(data.created_at).format("YYYY-MM-DD HH:mm") }}</p>
<p>接收人</p>
<p>开启时间{{ $moment(data.start_time).format("YYYY-MM-DD HH:mm") }}</p>
<p>关闭时间{{ $moment(data.end_time).format("YYYY-MM-DD HH:mm") }}</p>
指令内容{{ data.content }}
<p style="padding: 10px 0;">执行状态{{ typeMap.get(data.status) }}</p> <p style="padding: 10px 0;">执行状态{{ typeMap.get(data.status) }}</p>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>签名板</td> <td>执行状态</td>
<td>xxx</td> <td>
<template v-if="data.status !== 6">
<div class="sign-container">
<div v-if="data.act_start_time">
<div>
<p style="text-align: left;">开启时间{{ $moment(data.act_start_time).format("YYYY-MM-DD HH:mm") }}</p>
<img style="height: 50px;" class="d-flex" :src="data.start_sign_uploads_id_relation ? data.start_sign_uploads_id_relation.url : ''" alt="">
</div>
</div>
<vEsign style="flex: 1;" ref="esign" line-color="#eee" bg-color="" :line-width="5"></vEsign>
<div class="btns">
<Button type="primary" ghost @click="$refs['esign'].reset()"></Button>
<Button type="primary" @click="esignConfirm"></Button>
</div>
</div>
</template>
<template v-else>
<div style="padding: 20px;height: 100%;" class="d-flex flex-column">
<div class="flex-1">
<p style="text-align: left;">开启时间{{ $moment(data.act_start_time).format("YYYY-MM-DD HH:mm") }}</p>
<img style="height: 50px;" class="d-flex" :src="data.start_sign_uploads_id_relation ? data.start_sign_uploads_id_relation.url : ''" alt="">
</div>
<div style="margin-top: 20px;" class="flex-1">
<p style="text-align: left;">关闭时间{{ $moment(data.act_end_time).format("YYYY-MM-DD HH:mm") }}</p>
<img style="height: 50px;" class="d-flex" :src="data.end_sign_uploads_id_relation ? data.end_sign_uploads_id_relation.url : ''" alt="">
</div>
</div>
</template>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -44,7 +84,15 @@
</template> </template>
<script> <script>
import axios from 'axios'
import vEsign from "vue-esign";
import { base64toFile, deepCopy } from "@/utils"
import { getToken } from "@/utils/auth";
import { save } from "@/api/system/baseForm";
export default { export default {
components: {
vEsign
},
data() { data() {
return { return {
isShow: false, isShow: false,
@ -68,6 +116,54 @@ export default {
}, },
setData (data) { setData (data) {
this.data = data this.data = data
},
async esignConfirm () {
const base64 = await this.$refs['esign'].generate({ format:'image/png', quality: 0.7 });
const file = base64toFile(base64,`${new Date().getTime()}.png`)
const form = new FormData();
form.append('file',file)
const fileInfo = await axios.post(process.env.VUE_APP_UPLOAD_API,form,{
headers: {
Authorization: "Bearer " + getToken()
}
})
let copyData = deepCopy(this.data)
if (this.data.status === 2) {
copyData.status = 4;
copyData.start_sign = fileInfo.data?.id;
copyData.act_start_time = this.$moment().format('YYYY-MM-DD HH:mm');
for (let key in copyData) {
if (/_relation/g.test(key)) {
delete copyData[key]
}
}
save({
table_name: 'transfers',
...copyData
}).then(_ => {
this.$emit('refresh')
})
}
if (this.data.status === 4) {
copyData.status = 6;
copyData.end_sign = fileInfo.data?.id;
copyData.act_end_time = this.$moment().format('YYYY-MM-DD HH:mm');
for (let key in copyData) {
if (/_relation/g.test(key)) {
delete copyData[key]
}
}
save({
table_name: 'transfers',
...copyData
}).then(_ => {
this.$emit('refresh')
})
}
this.$refs['esign'].reset()
this.hide()
} }
}, },
computed: {}, computed: {},
@ -75,14 +171,15 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$width: 1300px;
$height: 860px;
.modal { .modal {
width: 1000px; width: $width;
height: 560px; height: $height;
background: #0d111f; background: #0d111f;
position: fixed; position: fixed;
top: calc(50% - 280px); top: calc(50% - (#{$height} / 2));
left: calc(50% - 500px); left: calc(50% - (#{$width} / 2));
table { table {
text-align: center; text-align: center;
@ -95,5 +192,15 @@ export default {
border: 2px solid #d6e1f6; border: 2px solid #d6e1f6;
} }
} }
.sign-container {
height: 100%;
display: flex;
flex-direction: column;
padding: 20px;
.btns {
}
}
} }
</style> </style>

@ -9,7 +9,7 @@
line-height: ${heights[index]}px; line-height: ${heights[index]}px;
transition: all .2s; transition: all .2s;
`" `"
@click="showModal(item)"> @click="showDetail(item)">
<dv-border-box-13 style="width: 100%;height: 100%;min-height: .5px;" :style="{ 'opacity': heights[index] ? 1 : 0}"> <dv-border-box-13 style="width: 100%;height: 100%;min-height: .5px;" :style="{ 'opacity': heights[index] ? 1 : 0}">
<div style="width: 100%;height: 100%;padding: 30px 20px;line-height: 1;" class="d-flex flex-column jc-between flex-1"> <div style="width: 100%;height: 100%;padding: 30px 20px;line-height: 1;" class="d-flex flex-column jc-between flex-1">
<div class="board-item__top d-flex jc-between ai-center"> <div class="board-item__top d-flex jc-between ai-center">
@ -17,15 +17,15 @@
<p class="fw-b equipment-name">{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}</p> <p class="fw-b equipment-name">{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}</p>
</div> </div>
<div class="board-item__bottom d-flex jc-between ai-start"> <div class="board-item__bottom d-flex jc-between ai-start">
<div style="line-height: 1.5;"> <div class="time-info">
<div class="start-time"> <div v-for="(label,key) in contentLK" style="display: inline-block;">
执行时间{{ item.start_time }} {{label}}{{ $moment(item[key]).format('YYYY-MM-DD HH:mm') || '-' }}
</div> </div>
<div class="final-time"> <div v-if="setTransferStatusNumber === 4" :style="{ 'color': lastTimeColor($moment(new Date(item.start_time)).diff($moment(time),'minutes')) }">
倒计时{{ $moment(new Date(item.start_time)).diff($moment(),'minutes') > 0 ? $moment(new Date(item.start_time)).diff($moment(),'minutes') : '-' }} 倒计时{{ $moment(new Date(item.start_time)).diff($moment(time),'minutes') }}
</div> </div>
</div> </div>
<div v-if="setTransferStatusNumber !== -1" @click.stop="setTransferStatus(4,item)"> <div v-if="setTransferStatusNumber !== -1" @click.stop="showDetail(item)">
<dv-border-box-8 reverse class="fw-b text-center" style="width: 64px;height: 38px;line-height: 38px;cursor: pointer;" <dv-border-box-8 reverse class="fw-b text-center" style="width: 64px;height: 38px;line-height: 38px;cursor: pointer;"
>{{setStatusText}}</dv-border-box-8> >{{setStatusText}}</dv-border-box-8>
</div> </div>
@ -42,12 +42,15 @@ import { deepCopy } from "@/utils";
import { save } from "@/api/system/baseForm"; import { save } from "@/api/system/baseForm";
export default { export default {
inject: ['showModal'],
props: { props: {
transfers: Array, transfers: Array,
setTransferStatusNumber: Number setTransferStatusNumber: Number,
contentLK: Object,
}, },
data() { data() {
return { return {
nowRow: {},
dom: '', dom: '',
needCalc: false, needCalc: false,
rowNum: 4, rowNum: 4,
@ -67,21 +70,31 @@ export default {
[4,'执行中'], [4,'执行中'],
[5,'已取消'], [5,'已取消'],
[6,'已完成'] [6,'已完成']
]) ]),
time: new Date(),
timer: null
} }
}, },
methods: { methods: {
showModal (item) { showDetail (item) {
this.$emit('showModal',item) this.nowRow = deepCopy(item);
console.log(this.nowRow)
this.$emit('showDetail',item)
}, },
setTransferStatus (status,row) { setTransferStatus (data) {
if (!this.setTransferStatusNumber) { const { status, start_sign, end_sign } = data;
console.warn('setTransferStatusNumber is required')
return let copyRow = deepCopy(this.nowRow);
if (status === 4) {
copyRow.act_start_time = this.$moment().format('YYYY-MM-DD HH:mm')
copyRow.start_sign = start_sign
}
if (status === 6) {
copyRow.act_end_time = this.$moment().format('YYYY-MM-DD HH:mm')
copyRow.end_sign = end_sign
} }
let copyRow = deepCopy(row); copyRow.status = status;
copyRow.status = this.setTransferStatusNumber;
for (let key in copyRow) { for (let key in copyRow) {
if (/_relation/g.test(key)) { if (/_relation/g.test(key)) {
delete copyRow[key] delete copyRow[key]
@ -189,11 +202,23 @@ export default {
computed: { computed: {
setStatusText () { setStatusText () {
if (this.setTransferStatusNumber === 4) return '执行'; if (this.setTransferStatusNumber === 4) return '执行';
if (this.setTransferStatusNumber === 6) return '完成'; if (this.setTransferStatusNumber === 6) return '关闭';
} },
lastTimeColor () {
return function (min) {
if (min <= 0) {
return "red"
} else if (min > 0 && min <= 5) {
return "orange"
} else {
return "#eee"
}
}
},
}, },
watch: { watch: {
async transfers(val) { async transfers(val) {
const h = this.$createElement;
if (val && val.length > 0) { if (val && val.length > 0) {
this.rows = val.map((i,index) => ({...i,scroll: index})) this.rows = val.map((i,index) => ({...i,scroll: index}))
this.copyTransfers = deepCopy(val); this.copyTransfers = deepCopy(val);
@ -201,6 +226,33 @@ export default {
await this.initWH(false); await this.initWH(false);
this.calcHeights(); this.calcHeights();
await this.animation(true); await this.animation(true);
this.timer = setInterval(() => {
this.time = new Date()
this.rows.forEach(item => {
if (item.status === 2) {
let lastMins = this.$moment(new Date(item.start_time)).diff(this.$moment(),'minutes')
if (lastMins === 3) {
this.showModal(true,h('div',[
h('p',item.equipment_id_equipments_id_relation?.name),
h('p',item.content),
h('p',`开始时间:${this.$moment(item.start_time).format('YYYY-MM-DD HH:mm')}`)
]))
}
}
if (item.status === 4) {
let lastMins = this.$moment(new Date(item.end_time)).diff(this.$moment(),'minutes')
if (lastMins === 3) {
this.showModal(true,h('div',[
h('p',item.equipment_id_equipments_id_relation?.name),
h('p',item.content),
h('p',`结束时间:${this.$moment(item.end_time).format('YYYY-MM-DD HH:mm')}`)
]))
}
}
})
},1000 * 60)
} else { } else {
this.rows = [] this.rows = []
this.copyTransfers = [] this.copyTransfers = []
@ -214,6 +266,8 @@ export default {
async mounted() { async mounted() {
}, },
destroyed () { destroyed () {
clearInterval(this.timer)
this.$bus.$off('transferSave')
const { stopAnimation } = this const { stopAnimation } = this
stopAnimation(); stopAnimation();
@ -253,6 +307,14 @@ export default {
width: 100%; width: 100%;
} }
} }
.time-info {
line-height: 1.5;
width: 86%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 10px;
grid-row-gap: 5px;
}
} }
::v-deep .row-item .ceil { ::v-deep .row-item .ceil {
width: 100%; width: 100%;

@ -43,10 +43,10 @@
<span style="color: red;"> {{ abilities.find(i => i.value === ability) ? abilities.find(i => i.value === ability).key : '' }} </span> <span style="color: red;"> {{ abilities.find(i => i.value === ability) ? abilities.find(i => i.value === ability).key : '' }} </span>
调令 调令
</p> </p>
<el-radio-group size="small" style="margin-left: 14px;" v-model="createType"> <!-- <el-radio-group size="small" style="margin-left: 14px;" v-model="createType">-->
<el-radio-button :label="1"></el-radio-button> <!-- <el-radio-button :label="1"></el-radio-button>-->
<el-radio-button :label="2"></el-radio-button> <!-- <el-radio-button :label="2"></el-radio-button>-->
</el-radio-group> <!-- </el-radio-group>-->
<el-date-picker <el-date-picker
size="small" size="small"
v-model="date" v-model="date"
@ -56,6 +56,7 @@
placeholder="日期选择" placeholder="日期选择"
:format="createType === 1 ? 'yyyy-MM-dd' : 'yyyy第WW周'" :format="createType === 1 ? 'yyyy-MM-dd' : 'yyyy第WW周'"
style="width: 160px; margin-left: 14px" style="width: 160px; margin-left: 14px"
@input="pickDate"
></el-date-picker> ></el-date-picker>
</div> </div>
</div> </div>
@ -82,7 +83,9 @@ import { mergeTableRow } from "@/utils/mergeTableRow";
import { show } from "@/api/system/customFormField"; import { show } from "@/api/system/customFormField";
export default { export default {
inject: ["equipments"], inject: ["equipments"],
props: {}, props: {
},
data() { data() {
return { return {
createType: 1, createType: 1,
@ -168,16 +171,15 @@ export default {
{ {
title: '机组运行状态', title: '机组运行状态',
width: 200, width: 200,
render: (h) => { render: (h,{ row }) => {
let num = Math.round(Math.random() * 8)
const create = () => { const create = () => {
let dom = []; let dom = [];
for (let i = 0;i<=num;i++) { for (let i = 0;i<=row._random;i++) {
dom.push(h('div',{ dom.push(h('div',{
style: { style: {
width: '14px', width: '14px',
height: '14px', height: '14px',
background: i === num-1 ? 'red' : 'green', background: i === row._random-1 ? 'red' : 'green',
'border-radius': '100%', 'border-radius': '100%',
'margin-left': '6px' 'margin-left': '6px'
} }
@ -211,6 +213,7 @@ export default {
type: "time", type: "time",
size: "small", size: "small",
transfer: true, transfer: true,
format: "HH:mm"
}, },
on: { on: {
["on-change"]: (e) => (this.data[index].start_time = e), ["on-change"]: (e) => (this.data[index].start_time = e),
@ -230,6 +233,7 @@ export default {
type: "time", type: "time",
size: "small", size: "small",
transfer: true, transfer: true,
format: "HH:mm"
}, },
on: { on: {
["on-change"]: (e) => (this.data[index].end_time = e), ["on-change"]: (e) => (this.data[index].end_time = e),
@ -263,7 +267,7 @@ export default {
width: 140, width: 140,
key: "level", key: "level",
align: "center", align: "center",
render: (h, { row }) => { render: (h, { row, index }) => {
return h( return h(
"Select", "Select",
{ {
@ -276,6 +280,7 @@ export default {
on: { on: {
["on-select"]: (e) => { ["on-select"]: (e) => {
row.level = e.value; row.level = e.value;
this.data[index].level = e.value;
}, },
}, },
}, },
@ -473,6 +478,10 @@ export default {
} }
} }
this.$bus.$emit('yinpaishui',this.abilities) this.$bus.$emit('yinpaishui',this.abilities)
},
pickDate () {
this.$bus.$emit('pickDate',this.date)
} }
}, },
computed: { computed: {
@ -501,7 +510,8 @@ export default {
end_time: "", end_time: "",
content: "", content: "",
level: 1, level: 1,
leibie: this.ability leibie: this.ability,
_random: Math.round(Math.random() * 8)
})) || []; })) || [];
}, },
select: { select: {

@ -1,7 +1,16 @@
<template> <template>
<div> <div>
<div class="select-content"> <div class="select-content">
<Select clearable v-model="select.filter[2].value" placeholder="请选择类别" style="width: 140px;"> <el-date-picker
size="small"
:clearable="false"
v-model="date"
value-format="yyyy-MM-dd"
placeholder="日期选择"
format="yyyy-MM-dd"
style="width: 130px;"
></el-date-picker>
<Select clearable v-model="select.filter[2].value" placeholder="请选择类别" style="width: 140px;margin-left: 6px;">
<Option v-for="item in abilities" :value="item.value">{{ item.key }}</Option> <Option v-for="item in abilities" :value="item.value">{{ item.key }}</Option>
</Select> </Select>
<Select clearable v-model="select.filter[1].value" placeholder="请选择范围" style="width: 140px;margin-left: 6px;"> <Select clearable v-model="select.filter[1].value" placeholder="请选择范围" style="width: 140px;margin-left: 6px;">
@ -21,23 +30,23 @@
:span-method="objectSpanMethod" :span-method="objectSpanMethod"
></Table> ></Table>
<el-pagination <!-- <el-pagination-->
class="pagination" <!-- class="pagination"-->
@size-change="e => { <!-- @size-change="e => {-->
select.page_size = e; <!-- select.page_size = e;-->
select.page = 1; <!-- select.page = 1;-->
getDispatches(); <!-- getDispatches();-->
}" <!-- }"-->
@current-change="e => { <!-- @current-change="e => {-->
select.page = e; <!-- select.page = e;-->
getDispatches(); <!-- getDispatches();-->
}" <!-- }"-->
:current-page="select.page" <!-- :current-page="select.page"-->
:page-sizes="[10, 20, 30, 40]" <!-- :page-sizes="[10, 20, 30, 40]"-->
:page-size="select.page_size" <!-- :page-size="select.page_size"-->
layout="total, prev, pager, next, jumper, sizes" <!-- layout="total, prev, pager, next, jumper, sizes"-->
:total="total"> <!-- :total="total">-->
</el-pagination> <!-- </el-pagination>-->
</div> </div>
</template> </template>
@ -53,10 +62,11 @@ export default {
loading: false, loading: false,
areas: [], areas: [],
abilities: [], abilities: [],
date: this.$moment().format("YYYY-MM-DD"),
select: { select: {
table_name: 'transfers', table_name: 'transfers',
page: 1, page: 1,
page_size: 10, page_size: 999,
sort_name: 'equipment_id', sort_name: 'equipment_id',
filter: [ filter: [
{ {
@ -79,16 +89,6 @@ export default {
total: 0, total: 0,
data: [], data: [],
columns: [ columns: [
{
title: "点位",
width: 240,
key: "equipment_id",
align: "center",
render: (h, { row, index }) => {
let text = row.equipment_id_equipments_id_relation ? row.equipment_id_equipments_id_relation.name : "";
return h('span',text);
},
},
{ {
title: "范围", title: "范围",
width: 140, width: 140,
@ -100,6 +100,16 @@ export default {
return h('span',text) return h('span',text)
} }
}, },
{
title: "点位",
width: 240,
key: "equipment_id",
align: "center",
render: (h, { row, index }) => {
let text = row.equipment_id_equipments_id_relation ? row.equipment_id_equipments_id_relation.name : "";
return h('span',text);
},
},
{ {
title: '类别', title: '类别',
width: 100, width: 100,
@ -195,6 +205,11 @@ export default {
async getDispatches () { async getDispatches () {
try { try {
this.loading = true; this.loading = true;
this.select.filter.push({
key: "start_time",
op: "like",
value: this.date
})
const res = await index(this.select); const res = await index(this.select);
this.data = res.data; this.data = res.data;
this.total = res.total; this.total = res.total;
@ -225,11 +240,13 @@ export default {
}, },
created() { created() {
this.getDispatches() this.getDispatches()
this.$bus.$on('pickDate',e => (this.date = e))
this.$bus.$on('yinpaishui',e => (this.abilities = e)) this.$bus.$on('yinpaishui',e => (this.abilities = e))
this.$bus.$on('areas',e => (this.areas = e)) this.$bus.$on('areas',e => (this.areas = e))
this.$bus.$on('createdTransfer',_ => (this.getDispatches())) this.$bus.$on('createdTransfer',_ => (this.getDispatches()))
}, },
destroyed() { destroyed() {
this.$bus.$off('pickDate')
this.$bus.$off('areas') this.$bus.$off('areas')
this.$bus.$off('yinpaishui') this.$bus.$off('yinpaishui')
this.$bus.$off('createdTransfer') this.$bus.$off('createdTransfer')
@ -240,6 +257,8 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.select-content { .select-content {
width: 100%; width: 100%;
display: flex;
align-items: center;
} }
.pagination { .pagination {
display: flex; display: flex;

@ -122,9 +122,13 @@ export default {
color: 'linear-gradient(150deg, #89c3f7, #4497fd)' color: 'linear-gradient(150deg, #89c3f7, #4497fd)'
}, },
early_warning: { early_warning: {
label: '汛情', label: '工情',
icon: `<svg viewBox="0 0 1105 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"> icon: `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="M763.574886 989.92128l-40.81664-30.6176a38.0928 38.0928 0 0 0-45.95712 0l-40.81664 30.59712a119.33696 119.33696 0 0 1-73.50272 23.79776 119.5008 119.5008 0 0 1-72.31488-24.20736l-39.69024-30.18752a38.0928 38.0928 0 0 0-45.95712 0l-40.81664 30.59712a120.03328 120.03328 0 0 1-144.50688 0L178.522726 959.30368a38.0928 38.0928 0 0 0-45.93664 0l-52.75648 39.95648a40.83712 40.83712 0 0 1-57.15968-7.80288 40.83712 40.83712 0 0 1 7.80288-57.15968l52.75648-39.95648a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a40.83712 40.83712 0 0 1-8.04864 71.14752 40.83712 40.83712 0 0 1-41.1648-6.18496l-40.83712-30.59712a38.0928 38.0928 0 0 0-45.95712 0l-40.81664 30.59712A119.76704 119.76704 0 0 1 835.869286 1014.08768a119.76704 119.76704 0 0 1-72.2944-24.1664zM490.351206 833.86368l-40.83712-30.59712a38.0928 38.0928 0 0 0-45.93664 0L362.740326 833.86368a120.03328 120.03328 0 0 1-144.50688 0l-40.83712-30.59712a38.0928 38.0928 0 0 0-45.93664 0l-52.75648 39.936a40.83712 40.83712 0 0 1-57.1392-7.7824 40.83712 40.83712 0 0 1 7.7824-57.18016l52.75648-39.936a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.57664a38.0928 38.0928 0 0 0 45.95712 0l40.81664-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a38.0928 38.0928 0 0 0 45.93664 0l40.83712-30.59712a120.03328 120.03328 0 0 1 144.50688 0l40.83712 30.59712a40.83712 40.83712 0 0 1 7.80288 57.15968 40.83712 40.83712 0 0 1-57.1392 7.82336l-40.8576-30.59712a38.0928 38.0928 0 0 0-45.93664 0L906.832486 833.86368a120.03328 120.03328 0 0 1-144.50688 0l-40.81664-30.59712a38.0928 38.0928 0 0 0-45.95712 0L634.714726 833.86368a119.52128 119.52128 0 0 1-72.04864 24.18688h-0.2048a119.52128 119.52128 0 0 1-72.11008-24.18688z m34.26304-127.52896a158.65856 158.65856 0 0 0-16.83456-10.89536V400.5888h88.76032v310.08768l-33.1776 25.16992-38.74816-29.51168z m-203.48928 5.85728V436.0192h88.76032V673.91488a159.66208 159.66208 0 0 0-79.11424 32.50176l-8.43776 6.38976-1.20832-0.6144z m376.97536-38.33856V435.95776h88.76032v265.09312a160.23552 160.23552 0 0 0-88.80128-27.19744h0.04096z m202.81344-461.1072H207.604326V681.90208a161.5872 161.5872 0 0 0-81.67424-5.71392V131.15392h154.8288V10.56768h546.63168v120.58624h154.97216v542.26944a161.1776 161.1776 0 0 0-81.67424 15.07328l0.2048-475.7504zM362.433126 131.09248h383.488V92.09856H362.453606v38.99392z" <path d="M345.2 664.2c0-42.9 8.4-84.5 25-123.7 16-37.9 38.9-71.8 68.1-101s63.1-52.1 101-68.1c39.2-16.6 80.8-25 123.7-25s84.5 8.4 123.7 25c12.1 5.1 23.7 10.9 35 17.4v-264c0-13.7-11.1-24.8-24.8-24.8H559.3c0.5 2.3 0.7 4.6 0.7 7v133.2c0 19.2-15.6 34.8-34.8 34.8H395.1c-19.2 0-34.8-15.6-34.8-34.8V107.1c0-2.4 0.2-4.7 0.7-7H123.4c-13.7 0-24.8 11.1-24.8 24.8v676.6c0 13.7 11.1 24.8 24.8 24.8h266.2c-7.3-12.3-13.8-25.1-19.4-38.3-16.6-39.3-25-80.9-25-123.8z"
fill="#fff"></path>
<path d="M663 406.4c-142.4 0-257.8 115.4-257.8 257.8S520.6 922 663 922s257.8-115.4 257.8-257.8S805.4 406.4 663 406.4z m112.2 293.4c-29 29-70.9 37.4-107.3 25.2l-68.5 68.5c-18.1 18.1-47.6 18.1-65.7 0s-18.1-47.6 0-65.7l68.5-68.5C590 622.9 598.3 581 627.4 552c31.3-31.3 77.4-38.6 115.6-22l-67.1 67.1 10.9 42.9 43.3 11.3 67.1-67.1c16.6 38.3 9.2 84.4-22 115.6z"
fill="#fff"></path>
<path d="M576 751.2m-20.9 0a20.9 20.9 0 1 0 41.8 0 20.9 20.9 0 1 0-41.8 0Z"
fill="#fff"></path> fill="#fff"></path>
</svg>`, </svg>`,
color: 'linear-gradient(150deg, #6bc8cf, #3db9c5)' color: 'linear-gradient(150deg, #6bc8cf, #3db9c5)'

Loading…
Cancel
Save