j1ack 2 years ago
parent
commit
6ad216fc75
  1. BIN
      src/assets/images/data-view-table-header-parta.png
  2. BIN
      src/assets/images/data-view-table-header-partb.png
  3. 11
      src/views/data-view/components/data-view-layout.vue
  4. 25
      src/views/data-view/components/data-view-table.vue
  5. 2
      src/views/data-view/data-view.vue

BIN
src/assets/images/data-view-table-header-parta.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

BIN
src/assets/images/data-view-table-header-partb.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

11
src/views/data-view/components/data-view-layout.vue

@ -8,12 +8,12 @@
class="data-view-header"
:style="{backgroundImage: `url(${DataViewHeaderBg})`}"
>
<div class="identifier">
<div class="identifier data-view-header-item">
<img style="width: 23px; height: 23px;" :src="icon" alt="">
<span style="padding-left: 10px;">{{identifier}}</span>
</div>
<h1 class="YouSheBiaoTiHei data-view-header-title">{{ title }}</h1>
<div class="data-view-header-time">
<h1 class="YouSheBiaoTiHei data-view-header-title data-view-header-item" style="text-align: center;">{{ title }}</h1>
<div class="data-view-header-time data-view-header-item">
<img @click="$emit('leave')" style="width: 26px; height: 26px; cursor: pointer;" :src="ICUNFullscreen" alt="">
<div style="width: 26px;"/>
<span>{{date}}</span>
@ -104,6 +104,10 @@ export default {
height: 6vw;
padding: 0 20px 0 20px;
.data-view-header-item {
width: 33%;
}
.identifier {
font-family: 'PingFang SC';
font-style: normal;
@ -126,6 +130,7 @@ export default {
display: flex;
flex-direction: row;
margin-top: 14px;
justify-content: flex-end;
}
.data-view-header-title {

25
src/views/data-view/components/data-view-table.vue

@ -48,6 +48,8 @@
<script>
import DataViewTableHeaderBGLarge from '@/assets/images/data-view-table-header-bg-large.png'
import DataViewTableHeaderBGMiddle from '@/assets/images/data-view-table-header-bg-middle.png'
import DataViewTableHeaderBGPartA from '@/assets/images/data-view-table-header-parta.png'
import DataViewTableHeaderBGPartB from '@/assets/images/data-view-table-header-partb.png'
export default {
components: {},
@ -70,6 +72,8 @@ export default {
return {
DataViewTableHeaderBGLarge,
DataViewTableHeaderBGMiddle,
DataViewTableHeaderBGPartA,
DataViewTableHeaderBGPartB,
timer: null,
}
},
@ -110,9 +114,9 @@ export default {
const remainScrollTop = tbody.scrollHeight - (tbody.clientHeight + tbody.scrollTop)
tbody.scrollTop += 1
if (tbody.scrollTop >= remainScrollTop) {
clearInterval(this.timer)
tbody.scrollTop = 0;
}
}, 100)
}, 50)
}
}
@ -124,13 +128,26 @@ export default {
.data-view-table {
.data-view-table-header {
background-size: cover;
background-repeat: no-repeat;
height: 51px;
align-items: center;
padding-left: 28px;
display: flex;
flex-direction: row;
background-size: cover;
background-repeat: no-repeat;
.data-view-table-header-parta {
width: 350px;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.data-view-table-header-partb {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.header-title {
font-size: 22px;

2
src/views/data-view/data-view.vue

@ -163,7 +163,7 @@ export default {
},
methods: {
connectWS() {
this.ws = new WebSocket(`ws://192.168.31.129:18997/websocket`)
this.ws = new WebSocket(`ws://kaka-qws.weirui0755.com/websocket`)
this.ws.onopen = () => {
this.ws.send(JSON.stringify({ 'type': 'add_push' }))
}

Loading…
Cancel
Save