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