master
parent
1cc34fc78f
commit
50c6034ba1
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
computed: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">苏州河道处调度指令看板</h1>
|
||||||
|
|
||||||
|
<div class="bottom">
|
||||||
|
<div>{{ $moment(time).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
||||||
|
<div>查看已完成调令 <i class="el-icon-d-arrow-right"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
inject: ['nowTime'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
time () {
|
||||||
|
return this.nowTime()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
line-height: 2.67rem;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
padding: 2.87rem 0 0 1.33rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FBFBFF;
|
||||||
|
line-height: 2.92rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
|
||||||
|
padding: 0 5.73rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="square1 square-big"></div>
|
||||||
|
<div class="square2"></div>
|
||||||
|
<div class="square3 square-big"></div>
|
||||||
|
<div class="square4"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {},
|
||||||
|
computed: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
$r: 300rem;
|
||||||
|
.container {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
width: calc(2 * #{$r});
|
||||||
|
height: calc(2 * #{$r});
|
||||||
|
border-radius: 100%;
|
||||||
|
background: linear-gradient(to right,#76cff5, #76cff5 calc(#{$r} * 0.3), #577cd7 calc(#{$r} + #{$r} * 0.2), #577cd7);
|
||||||
|
transform: translateY(calc(-50% - calc(#{$r} * 0.938)));
|
||||||
|
|
||||||
|
z-index: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: calc(50% - #{$r});
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin square {
|
||||||
|
width: 5.3rem;
|
||||||
|
height: 5.3rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
opacity: 0.23;
|
||||||
|
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
&-big {
|
||||||
|
width: 7.03rem;
|
||||||
|
height: 7.03rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.square1 {
|
||||||
|
@include square;
|
||||||
|
|
||||||
|
left: 44.33rem;
|
||||||
|
top: 2rem;
|
||||||
|
}
|
||||||
|
.square2 {
|
||||||
|
@include square;
|
||||||
|
|
||||||
|
left: 47.2rem;
|
||||||
|
top: 5.47rem;
|
||||||
|
}
|
||||||
|
.square3 {
|
||||||
|
@include square;
|
||||||
|
|
||||||
|
right: 37.07rem;
|
||||||
|
top: 2rem;
|
||||||
|
}
|
||||||
|
.square4 {
|
||||||
|
@include square;
|
||||||
|
|
||||||
|
right: 36rem;
|
||||||
|
top: 5.47rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<div id="big-screen" ref="appRef">
|
||||||
|
<topBackground></topBackground>
|
||||||
|
<Title></Title>
|
||||||
|
<toDo></toDo>
|
||||||
|
<doing></doing>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import topBackground from "@/views/bigScreen1/component/topBackground.vue";
|
||||||
|
import Title from "@/views/bigScreen1/component/title.vue";
|
||||||
|
import toDo from "@/views/bigScreen1/component/toDo.vue";
|
||||||
|
import doing from "@/views/bigScreen1/component/doing.vue";
|
||||||
|
import { index } from "@/api/system/baseForm";
|
||||||
|
import { refreshTransferTime } from "@/settings";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
topBackground,
|
||||||
|
Title,
|
||||||
|
toDo,
|
||||||
|
doing
|
||||||
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
transfers: (status="toDo") => {
|
||||||
|
switch (status) {
|
||||||
|
case "toDo":
|
||||||
|
return this.transfers1;
|
||||||
|
case "doing":
|
||||||
|
return this.transfers2;
|
||||||
|
case "done":
|
||||||
|
return this.transfers3;
|
||||||
|
default:
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
nowTime: () => this.time,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
forwardRefreshTime: '',
|
||||||
|
transfers1: [],
|
||||||
|
transfers2: [],
|
||||||
|
transfers3: [],
|
||||||
|
|
||||||
|
time: this.$moment(),
|
||||||
|
timer: null,
|
||||||
|
transferTimer: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
startTime () {
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.time = this.$moment()
|
||||||
|
},1000)
|
||||||
|
},
|
||||||
|
|
||||||
|
setRem () {
|
||||||
|
const baseSize = 15;
|
||||||
|
const scale = document.documentElement.clientWidth / 1920;
|
||||||
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";
|
||||||
|
|
||||||
|
window.requestAnimationFrame(this.setRem)
|
||||||
|
},
|
||||||
|
|
||||||
|
async getTransfer(isFirst = false) {
|
||||||
|
if (isFirst) {
|
||||||
|
this.forwardRefreshTime = this.$moment();
|
||||||
|
this.transfers1 = [];
|
||||||
|
this.transfers2 = [];
|
||||||
|
this.transfers3 = [];
|
||||||
|
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')}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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 || i.status === 5) {
|
||||||
|
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) {
|
||||||
|
this.transfers1.push(...res)
|
||||||
|
}
|
||||||
|
this.forwardRefreshTime = this.$moment()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
this.setRem();
|
||||||
|
window.onresize = this.setRem;
|
||||||
|
this.getTransfer(true);
|
||||||
|
this.transferTimer = setInterval(() => {
|
||||||
|
this.getTransfer()
|
||||||
|
},refreshTransferTime)
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.startTime()
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
window.onscroll = null;
|
||||||
|
document.documentElement.style.fontSize = "15px";
|
||||||
|
clearInterval(this.timer);
|
||||||
|
clearInterval(this.transferTimer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
#big-screen {
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
#app:has(#big-screen) {
|
||||||
|
.app-main {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.app-wrapper {
|
||||||
|
overflow: hidden!important;
|
||||||
|
}
|
||||||
|
.main-container {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.sidebar-container,.fixed-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue