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

2023-12-4 xy

Browse Source
master
xy 2 years ago
parent 20c731ce16
commit 9a0aa08b23
8 changed files with 127 additions and 434 deletions
Show Stats Download Patch File Download Diff File

15
src/views/bigScreen/bigScreen.vue
Unescape View File

@ -73,9 +73,7 @@
<!-- 第四行数据 -->
<div class="bottom-box">
<dv-border-box-13>
<div style="height: 120px;width: 100%;">123</div>
</dv-border-box-13>
<bottom></bottom>
</div>
</div>
</div>
@ -96,13 +94,14 @@ import '@/styles/scss/style.scss';
import centerLeft1 from './component/centerLeft1'
import centerLeft2 from './component/centerLeft2'
import centerRight1 from './component/centerRight1_copy'
import centerRight1 from './component/centerRight1'
import centerRight2 from './component/centerRight2'
import center from './component/center'
import bottomLeft from './component/bottomLeft'
import bottomRight from './component/bottomRight'
import drawMixin from "@/mixin/drawMixin";
import backBtn from './component/backBtn.vue'
import backBtn from './component/backBtn.vue';
import bottom from "./component/bottom.vue"
export default {
mixins: [ drawMixin ],
provide() {
@ -121,7 +120,8 @@ export default {
center,
bottomLeft,
bottomRight,
backBtn
backBtn,
bottom
},
data() {
return {
@ -136,12 +136,13 @@ export default {
}
},
mounted() {
//document.documentElement.requestFullscreen();
document.documentElement.requestFullscreen();
this.timeFn();
this.cancelLoading();
},
beforeDestroy () {
clearInterval(this.timing)
document.exitFullscreen();
},
methods: {
timeFn() {

45
src/views/bigScreen/component/bottom.vue
Unescape View File

@ -0,0 +1,45 @@
<template>
<div class="notice d-flex">
<dv-border-box-12 style="width: 10%;">
<p class="title">通知</p>
<dv-decoration-1 class="desc" />
</dv-border-box-12>
<dv-border-box-1 class="flex-1 ml-2">
<div class="pt-5 pr-5 pb-5 pl-5" style="height: 100%;width: 100%;font-size: 16px;">
xxx
</div>
</dv-border-box-1>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {},
computed: {},
}
</script>
<style scoped lang="scss">
.notice {
height: 120px;
width: 100%;
.title {
line-height: 120px;
font-size: 30px;
text-align: center;
letter-spacing: 10px;
}
.desc {
width: 40px;
height: 20px;
position: absolute;
top: 10%;
right: 10%;
}
}
</style>

2
src/views/bigScreen/component/centerLeft1.vue
Unescape View File

@ -11,7 +11,7 @@
</div>
</div>
<div class="d-flex jc-center">
<CenterLeft1Chart />
<!-- <CenterLeft1Chart />-->
</div>
<!-- 4个主要的数据 -->
<!-- <div class="bottom-data">-->

194
src/views/bigScreen/component/centerRight1.vue
Unescape View File

@ -8,50 +8,15 @@
>
<div class="board-item" >
<dv-border-box-10 class="board-item__title fw-b">待执行</dv-border-box-10>
<div class="board-item-container" ref="board-item-container">
<div
class="board-item-container-item"
v-for="(item,index) in rows"
:key="`${item.id}-${item.scroll}`"
:style="`
height: ${heights[index]}px;
line-height: ${heights[index]}px;
transition: all .2s;
`">
<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 class="board-item__top d-flex jc-between ai-center">
<dv-decoration-11 style="width: 160px;height: 38px;">待执行</dv-decoration-11>
<p class="fw-b">{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}</p>
</div>
<div class="board-item__bottom d-flex jc-between ai-start">
<div style="line-height: 1.5;">
<div class="start-time">
执行时间：{{ item.start_time }}
</div>
<div class="final-time">
倒计时：
</div>
</div>
<div @click="setTransferStatus(4,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>
</div>
</div>
</div>
</dv-border-box-13>
</div>
</div>
<transferBoard :transfers="transfers[0]" :set-transfer-status-number="4"></transferBoard>
</div>
<div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">即将执行</dv-border-box-10>
<transferBoard :transfers="transfers.slice(0,2)"></transferBoard>
<!-- <dv-scroll-board class="dv-scr-board" :config="config" />-->
<dv-border-box-10 class="board-item__title fw-b">执行中</dv-border-box-10>
<transferBoard :transfers="transfers[1]" :set-transfer-status-number="6"></transferBoard>
</div>
<div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">已完成</dv-border-box-10>
<transferBoard :transfers="transfers"></transferBoard>
<!-- <dv-scroll-board class="dv-scr-board" :config="config" />-->
<transferBoard :transfers="transfers[2]" :set-transfer-status-number="-1"></transferBoard>
</div>
</div>
</div>
@ -70,138 +35,45 @@ export default {
},
data() {
return {
dom: '',
needCalc: false,
rowNum: 4,
height: 0,
width: 0,
avgHeight: 0,
updater: 0,
animationIndex: 0,
heights: [],
animationHandler: '',
transfers: [],
rows: []
transfers: [
[],
[],
[]
],
};
},
methods: {
setTransferStatus (status,row) {
let copyRow = deepCopy(row);
copyRow.status = status;
for (let key in copyRow) {
if (/_relation/g.test(key)) {
delete copyRow[key]
}
}
console.log(copyRow)
save({
table_name: 'transfers',
...copyRow
}).then(_ => {})
},
async getTransfer() {
this.transfers = [
[],[],[]
]
const res = (
await index({
table_name: "transfers",
page: 1,
page_size: 9999,
filter: [
{
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')}`
}
]
},false)
).data;
this.transfers = res;
this.rows = res.map(i => ({ ...i, scroll: i }));
},
initWH (resize = true) {
const { $nextTick, $refs, onResize } = this
return new Promise(resolve => {
$nextTick(_ => {
const dom = this.dom = $refs['board-item-container']
this.width = dom ? dom.clientWidth : 0
this.height = dom ? dom.clientHeight : 0
if (!dom) {
console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
} else if (!this.width || !this.height) {
console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
}
if (typeof onResize === 'function' && resize) onResize()
resolve()
})
res.forEach(i => {
if (i.status === 2 || i.status === 3) {
this.transfers[0].push(i)
}
if (i.status === 4) {
this.transfers[1].push(i)
}
if (i.status === 6) {
this.transfer[2].push(i)
}
})
},
calcHeights (onresize = false) {
const { height, rowNum } = this
let allHeight = height
const avgHeight = allHeight / rowNum
this.avgHeight = avgHeight
if (!onresize) this.heights = new Array(this.transfers.length).fill(avgHeight)
},
async animation (start = false) {
const { needCalc, calcHeights } = this
if (needCalc) {
calcHeights()
this.needCalc = false;
}
let { avgHeight, animationIndex, mergedConfig, animation, updater } = this
const { waitTime, carousel, rowNum } = {
waitTime: 5000,
carousel: 'single',
rowNum: this.rowNum
}
const rowLength = this.transfers.length
if (rowNum >= rowLength) return
if (start) {
await new Promise(resolve => setTimeout(resolve, waitTime))
if (updater !== this.updater) return
}
const animationNum = carousel === 'single' ? 1 : rowNum
let rows = this.transfers.slice(animationIndex)
rows.push(...this.transfers.slice(0, animationIndex))
this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
this.heights = new Array(rowLength).fill(avgHeight)
await new Promise(resolve => setTimeout(resolve, 300))
if (updater !== this.updater) return
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
animationIndex += animationNum
const back = animationIndex - rowLength
if (back >= 0) animationIndex = back
this.animationIndex = animationIndex
this.animationHandler = setTimeout(animation, waitTime - 300)
},
stopAnimation () {
const { animationHandler, updater } = this
this.updater = (updater + 1) % 999999
if (!animationHandler) return
clearTimeout(animationHandler)
this.cancelLoading()
},
},
created() {
@ -209,14 +81,8 @@ export default {
},
async mounted() {
await this.getTransfer();
await this.initWH(false);
this.calcHeights();
await this.animation(true);
},
destroyed () {
const { stopAnimation } = this
stopAnimation();
}
};
</script>

234
src/views/bigScreen/component/centerRight1_copy.vue
Unescape View File

@ -1,234 +0,0 @@
<template>
<div id="centerRight1">
<div class="bg-color-black">
<div
style="width: 100%; height: 100%"
class="d-flex pt-2 pl-2 jc-between ai-center"
>
<div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">待执行</dv-border-box-10>
<dv-scroll-board ref="dvBoard1" class="dv-scr-board" :config="config" @click="submit"/>
</div>
<div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">即将执行</dv-border-box-10>
<dv-scroll-board class="dv-scr-board" :config="config" />
</div>
<div class="board-item">
<dv-border-box-10 class="board-item__title fw-b">已完成</dv-border-box-10>
<dv-scroll-board class="dv-scr-board" :config="config" />
</div>
</div>
</div>
</div>
</template>
<script>
const dvBorderBoxTemplate = (slot) => {
return ` <div class="dv-border-box-13">
<svg class="dv-border-svg-container" width="${385}" height="${210}">
<path
fill="transparent"
stroke="#6586ec"
d="M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
L ${385 - 20} 10 L ${385 - 5} 25
L ${385 - 5} ${210 - 5} L 20 ${210 - 5}
L 5 ${210 - 20} L 5 20"
/>
<path
fill="transparent"
stroke-width="3"
stroke-linecap="round"
stroke-dasharray="10, 5"
stroke="#6586ec"
d="M 16 9 L 61 9"
/>
<path
fill="transparent"
stroke="#2cf7fe"
d="M 5 20 L 5 10 L 12 3 L 60 3 L 68 10"
/>
<path
fill="transparent"
stroke="#2cf7fe"
d="M ${385 - 5} ${210 - 30} L ${385 - 5} ${210 - 5} L ${385 - 30} ${210 - 5}"
/>
</svg>
<div class="border-box-content">
${slot}
</div>
</div>`
}
import { index } from "@/api/system/baseForm";
export default {
data() {
return {
width: 300,
height: 100,
config: {
data: [
],
waitTime: 3000,
headerHeight: 35,
oddRowBGC: "#0000", //奇数行
evenRowBGC: "#0000", //偶数行
index: false,
rowNum: 4,
align: ["center"],
},
transfers: [],
};
},
methods: {
async getTransfer() {
const res = (
await index({
table_name: "transfers",
page: 1,
page_size: 9999,
})
).data;
console.log(res);
res.forEach(i => {
if (true) {
this.config.data.push([dvBorderBoxTemplate(`
<div class="box-content">
<div class="box-content-top">
<div>待执行</div>
<div>${i.equipment_id_equipments_id_relation?.name || ''}</div>
</div>
<div class="box-content-bottom">
<div>
<div>执行时间：<span>${this.$moment().format('YYYY-MM-DD')} ${i.start_time.split(' ')[1]}</span></div>
<div>倒计时：<span></span></div>
</div>
<div>执行</div>
</div>
</div>
`)])
}
})
this.$refs['dvBoard1'].updateRows(this.config.data)
},
submit (row) {
console.log(row)
}
},
created() {
this.getTransfer();
},
mounted() {
}
};
</script>
<style lang="scss" scoped>
$box-height: 810px;
$box-width: 100%;
#centerRight1 {
padding: 16px;
padding-top: 60px;
height: $box-height;
width: $box-width;
border-radius: 5px;
.bg-color-black {
height: $box-height - 30px - 60px;
border-radius: 10px;
}
.text {
color: #c3cbde;
}
.board-item {
width: 31%;
height: 100%;
&__title {
width: 40%;
height: 44px;
text-align: center;
font-size: 17px;
line-height: 44px;
margin: auto;
margin-top: 20px;
}
}
.dv-scr-board {
height: calc(100% - 44px - 20px - 20px);
margin-top: 20px;
}
}
::v-deep .row-item .ceil {
width: 100%;
}
::v-deep .box-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
line-height: 1;
padding: 30px 12px;
&-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px 0 10px;
& > div:nth-child(1) {
background: #eccb77;
border-radius: 30px;
color: #333;
padding: 6px 10px;
font-weight: 600;
}
& > div:nth-child(2) {
font-weight: 600;
font-size: 17px;
}
}
&-bottom {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 10px 10px 0 10px;
span {
color: $primaryColor;
}
& > div:nth-child(1) {
text-align: left;
line-height: 2;
font-size: 16px;
font-weight: 600;
}
& > div:nth-child(2) {
cursor: pointer;
line-height: 2;
font-size: 15px;
font-weight: 600;
background: $primaryColor;
border-radius: 8px;
border: 2px solid rgb(119, 232, 250);
padding: 0 8px;
}
}
}
</style>

50
src/views/bigScreen/component/transferBoard.vue
Unescape View File

@ -12,7 +12,7 @@
<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 class="board-item__top d-flex jc-between ai-center">
<dv-decoration-11 style="width: 160px;height: 38px;">待执行</dv-decoration-11>
<dv-decoration-11 style="width: 160px;height: 38px;">{{typeMap.get(item.status)}}</dv-decoration-11>
<p class="fw-b">{{ item.equipment_id_equipments_id_relation ? item.equipment_id_equipments_id_relation.name : '' }}</p>
</div>
<div class="board-item__bottom d-flex jc-between ai-start">
@ -21,12 +21,12 @@
执行时间：{{ item.start_time }}
</div>
<div class="final-time">
倒计时：
倒计时：{{ $moment(new Date(item.start_time)).diff($moment(),'minutes') }}分
</div>
</div>
<div @click="setTransferStatus(4,item)">
<div v-if="setTransferStatusNumber !== -1" @click="setTransferStatus(4,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>
>{{setStatusText}}</dv-border-box-8>
</div>
</div>
</div>
@ -41,7 +41,8 @@ import {save} from "@/api/system/baseForm";
export default {
props: {
transfers: Array
transfers: Array,
setTransferStatusNumber: Number
},
data() {
return {
@ -55,20 +56,31 @@ export default {
animationIndex: 0,
heights: [],
animationHandler: '',
rows: []
copyTransfers: [],
rows: [],
typeMap: new Map([
[1,'待下发'],
[2,'已下发'],
[3,'待执行'],
[4,'执行中'],
[5,'已取消'],
[6,'已完成']
])
}
},
methods: {
setTransferStatus (status,row) {
if (!this.setTransferStatusNumber) {
console.warn('setTransferStatusNumber is required')
return
}
let copyRow = deepCopy(row);
copyRow.status = status;
copyRow.status = this.setTransferStatusNumber;
for (let key in copyRow) {
if (/_relation/g.test(key)) {
delete copyRow[key]
}
}
console.log(copyRow)
save({
table_name: 'transfers',
...copyRow
@ -108,6 +120,7 @@ export default {
this.avgHeight = avgHeight
if (!onresize) this.heights = new Array(this.transfers.length).fill(avgHeight)
},
async animation (start = false) {
const { needCalc, calcHeights } = this
@ -125,7 +138,7 @@ export default {
rowNum: this.rowNum
}
const rowLength = this.transfers.length
const rowLength = this.copyTransfers.length
if (rowNum >= rowLength) return
@ -134,10 +147,10 @@ export default {
if (updater !== this.updater) return
}
const animationNum = carousel === 'single' ? 1 : rowNum
let rows = this.transfers.slice(animationIndex)
rows.push(...this.transfers.slice(0, animationIndex))
const animationNum = carousel === 'single' ? 1 : rowNum
let rows = this.copyTransfers.slice(animationIndex)
rows.push(...this.copyTransfers.slice(0, animationIndex))
this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
this.heights = new Array(rowLength).fill(this.avgHeight)
@ -165,13 +178,20 @@ export default {
clearTimeout(animationHandler)
},
},
computed: {},
computed: {
setStatusText () {
if (this.setTransferStatusNumber === 4) return '执行';
if (this.setTransferStatusNumber === 6) return '完成';
}
},
watch: {
async transfers(val) {
if (val && val.length > 0) {
this.rows = val.map((i,index) => ({...i,scroll: index}))
this.copyTransfers = deepCopy(val);
await this.initWH(false);
this.calcHeights();
val.length > this.rowNum ? await this.animation(true) : '';
await this.animation(true);
}
}
},

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

@ -69,6 +69,7 @@
</template>
<script>
import { uuid } from "@/utils";
import { index, save } from "@/api/system/baseForm";
import { deepCopy } from "@/utils";
import { mergeTableRow } from "@/utils/mergeTableRow";
@ -382,12 +383,15 @@ export default {
return
}
const uid = uuid();
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}`;
i.no = uid;
i.status = 1;
return save({
table_name: 'transfers',

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

@ -11,7 +11,7 @@
<div class="weather panel">
<div class="title">今日信息</div>
<template v-if="weather">
<template>
<div class="weather-container">
<Card class="weather-container__card" v-for="(item,key) in weatherKv" :style="{ 'background': item.color || '#fff','color': '#fff','border-radius': '14px' }">
<template #title>
@ -21,23 +21,13 @@
</div>
</template>
<template>
<!-- <template v-if="weather[key]&&weather[key].length>15">-->
<!-- <el-tooltip placement="bottom" :content="weather[key]">-->
<!-- <div v-html="splitSpan(weather[key])"></div>-->
<!-- </el-tooltip>-->
<!-- </template>-->
<template>
<div class="text" v-html="splitSpan(weather[key])"></div>
<div class="text" v-html="splitSpan(weather ? weather[key] : '')"></div>
</template>
</template>
</Card>
</div>
</template>
<template v-else>
<Card>
<el-empty :image-size="60" description="暂无信息"></el-empty>
</Card>
</template>
</div>
<div class="point panel">
@ -222,13 +212,14 @@ export default {
computed: {
splitSpan () {
return function (text) {
if (!text) return '暂无信息'
let html = '';
let spit = text?.split(/，|；|。|,|\n/)
spit?.forEach((i,index) => {
html += ((index ? '<br>' : '') + '<span>' + i + '</span>')
})
return html;
return html || '暂无信息';
}
}
},

Write Preview
Loading…
Cancel
Save