|
|
@@ -1,43 +1,177 @@
|
|
|
<template>
|
|
|
<!-- 中控大屏 -->
|
|
|
<div class="center_control">
|
|
|
- <el-dialog title="提示" :visible.sync="controlVisible" :show-close="false" fullscreen>
|
|
|
+ <el-dialog title="提示" :visible.sync="controlVisible" :show-close="false" fullscreen @closed="dialogClose">
|
|
|
<template slot="title">
|
|
|
- <div class="head_control">
|
|
|
- <div class="fun_btn">
|
|
|
- <div>实时监控</div>
|
|
|
- <div>历史轨迹</div>
|
|
|
- </div>
|
|
|
- <div class="fun_btn">
|
|
|
- <i class="el-icon-full-screen icon_fun"></i>
|
|
|
- <i class="el-icon-switch-button icon_fun" @click="close"></i>
|
|
|
+ <!--Waves Container-->
|
|
|
+ <div class="header">
|
|
|
+ <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
+ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
|
|
+ <defs>
|
|
|
+ <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
|
|
+ </defs>
|
|
|
+ <g class="parallax">
|
|
|
+ <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
|
|
|
+ <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
|
|
|
+ <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ <div class="head_control">
|
|
|
+ <div class="fun_btn1">
|
|
|
+ <div class="title_head_rol center_in" :class="item.flag ? 'active_bgcolor' : ''"
|
|
|
+ v-for="(item,index) in list" :key="index" @click="selectRol(item)">{{item.title}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="fun_btn">
|
|
|
+ <i class="el-icon-full-screen icon_fun" @click="experMode"></i>
|
|
|
+ <i class="el-icon-switch-button icon_fun" @click="close"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--Waves end-->
|
|
|
</template>
|
|
|
<div class="card_control">
|
|
|
<div class="map_card">
|
|
|
<div id="container"></div>
|
|
|
</div>
|
|
|
- <div class="card_bottom_control"></div>
|
|
|
+ <div class="card_bottom_control" :class="logisticsFlag ? 'height_300' : 'height_30'">
|
|
|
+ <div style="cursor: pointer;" class="center_in" @click="clickImg">
|
|
|
+ <el-image :class="logisticsFlag ? '' : 'overturn'" style="height: 29px;width: 40px;flex: none;"
|
|
|
+ :src="require('@/assets/images/unfold.png')"></el-image>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;height: calc(100% - 30px);" v-if="logisticsFlag">
|
|
|
+ <div class="card_unpack_control">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div style="width: 260px;margin-right: 10px;">
|
|
|
+ <el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
|
+ </div>
|
|
|
+ <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card_table_grid">
|
|
|
+ <div class="item_index1 center_in">序号</div>
|
|
|
+ <div class="item_grid center_in" v-for="(item,index) in headerList" :key="index">
|
|
|
+ {{item.title}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <vue-seamless-scroll ref="vueSeamlessScroll" :data="tableData" :class-option="classOption" class="warp"
|
|
|
+ @mousewheel.native="handleScroll">
|
|
|
+ <div class="card_table_grid" v-for="(item, index) in tableData" :key="index">
|
|
|
+ <div class="item_index center_in">{{index + 1}}</div>
|
|
|
+ <div class="item_each center_in">{{item.name}}</div>
|
|
|
+ <div class="item_each center_in">{{item.sn}}</div>
|
|
|
+ <div class="item_each center_in">{{item.status}}</div>
|
|
|
+ <div class="item_each center_in">{{item.deviceData.T_t}}</div>
|
|
|
+ <div class="item_each center_in">{{item.deviceData.T_time}}</div>
|
|
|
+ </div>
|
|
|
+ </vue-seamless-scroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
export default {
|
|
|
name: 'centerControl',
|
|
|
- components: {},
|
|
|
+ props: {
|
|
|
+ // 表格label数据
|
|
|
+ tableData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ vueSeamlessScroll,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ fullScreen: false,
|
|
|
+ input: '',
|
|
|
+ value1: '',
|
|
|
+ unpackFlag: true,
|
|
|
+ logisticsFlag: true,
|
|
|
+ list: [{
|
|
|
+ id: 1,
|
|
|
+ flag: true,
|
|
|
+ title: '实时监控',
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ flag: false,
|
|
|
+ title: '历史轨迹',
|
|
|
+ }],
|
|
|
controlVisible: false,
|
|
|
map: null,
|
|
|
+ headerList: [{
|
|
|
+ title: '名称'
|
|
|
+ }, {
|
|
|
+ title: 'SN'
|
|
|
+ }, {
|
|
|
+ title: '状态'
|
|
|
+ }, {
|
|
|
+ title: '最新温度'
|
|
|
+ }, {
|
|
|
+ title: '最新记录时间'
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ classOption() {
|
|
|
+ return {
|
|
|
+ limitMoveNum: 10,
|
|
|
+ singleHeight: 30,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ tableData: {
|
|
|
+ handler() {
|
|
|
+ // 数据更改时也要加
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs.vueSeamlessScroll.reset()
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
mounted() {
|
|
|
// this.keyUpSearch()
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 滚动代码
|
|
|
+ handleScroll(e) {
|
|
|
+ if (this.tableData.length > 10) {
|
|
|
+ // 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
|
|
|
+ // e.deltaY是滚动的距离
|
|
|
+ this.$refs.vueSeamlessScroll.yPos = this.$refs.vueSeamlessScroll.yPos - e.deltaY
|
|
|
+ // 如果是正数 说明是往上滚
|
|
|
+ if (this.$refs.vueSeamlessScroll.yPos > 0) {
|
|
|
+ this.$refs.vueSeamlessScroll.yPos = 0
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 如果yPos超过内部实际高度的一半则重新到顶部滚动
|
|
|
+ // 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
|
|
|
+ if (Math.abs(this.$refs.vueSeamlessScroll.yPos) > this.$refs.vueSeamlessScroll.realBoxHeight / 2) {
|
|
|
+ this.$refs.vueSeamlessScroll.yPos = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectRol(event) {
|
|
|
+ this.list.forEach(item => {
|
|
|
+ if (item.id == event.id) {
|
|
|
+ item.flag = true
|
|
|
+ } else {
|
|
|
+ item.flag = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 展开收起
|
|
|
+ getUnpack() {
|
|
|
+ this.unpackFlag = false
|
|
|
+ },
|
|
|
close() {
|
|
|
this.controlVisible = false
|
|
|
},
|
|
|
@@ -61,6 +195,55 @@
|
|
|
destroyMap() {
|
|
|
this.map && this.map.destroy();
|
|
|
},
|
|
|
+ clickImg() {
|
|
|
+ if (this.logisticsFlag) {
|
|
|
+ this.logisticsFlag = false
|
|
|
+ } else {
|
|
|
+ this.logisticsFlag = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 全屏
|
|
|
+ experMode() {
|
|
|
+ const full = localStorage.getItem('fullScreen')
|
|
|
+ if (full == 'true' || full == true) {
|
|
|
+ this.fullScreen = false
|
|
|
+ localStorage.setItem("fullScreen", this.fullScreen);
|
|
|
+ this.exitFullscreen()
|
|
|
+ } else {
|
|
|
+ this.fullScreen = true
|
|
|
+ localStorage.setItem("fullScreen", this.fullScreen);
|
|
|
+ let element = document.documentElement;
|
|
|
+ this.launchFullscreen(element);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 全屏
|
|
|
+ launchFullscreen(element) {
|
|
|
+ if (element.requestFullscreen) {
|
|
|
+ element.requestFullscreen();
|
|
|
+ } else if (element.webkitRequestFullscreen) {
|
|
|
+ element.webkitRequestFullscreen();
|
|
|
+ } else if (element.mozRequestFullscreen) {
|
|
|
+ element.mozRequestFullscreen();
|
|
|
+ } else if (element.msRequestFullscreen) {
|
|
|
+ element.msRequestFullscreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 推出全屏
|
|
|
+ exitFullscreen() {
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen();
|
|
|
+ } else if (document.webkitExitFullscreen) {
|
|
|
+ document.webkitExitFullscreen();
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 弹窗关闭
|
|
|
+ dialogClose() {
|
|
|
+ this.logisticsFlag = true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -81,19 +264,59 @@
|
|
|
}
|
|
|
|
|
|
.head_control {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- height: 80px;
|
|
|
+ align-items: flex-end;
|
|
|
+ height: 50px;
|
|
|
padding: 0px 20px;
|
|
|
+ z-index: 2025;
|
|
|
+ border-bottom: 1px solid #ffffff;
|
|
|
+ // background-image: linear-gradient(to top, #209cff 0%, #68e0cf 100%);
|
|
|
+ background: linear-gradient(60deg, rgba(32, 156, 255, .5) 0%, rgba(0, 172, 193, .5) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .fun_btn1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.fun_btn {
|
|
|
+ height: 50px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
+ .title_head_rol {
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ border-top-left-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0px 15px;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ /* Safari */
|
|
|
+ -moz-user-select: none;
|
|
|
+ /* Firefox */
|
|
|
+ -ms-user-select: none;
|
|
|
+ /* IE/Edge */
|
|
|
+ user-select: none;
|
|
|
+ /* 标准语法 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .active_bgcolor {
|
|
|
+ // background-color: #18a966;
|
|
|
+ // background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
|
|
|
+ background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
|
|
|
+ }
|
|
|
+
|
|
|
.icon_fun {
|
|
|
+ color: #fff;
|
|
|
cursor: pointer;
|
|
|
font-size: 30px;
|
|
|
margin-left: 10px;
|
|
|
@@ -102,70 +325,142 @@
|
|
|
.card_control {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 80px);
|
|
|
+ height: calc(100% - 50px);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.map_card {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ // height: 100%;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.card_bottom_control {
|
|
|
+ position: relative;
|
|
|
+ border-top: 1px solid #DCDFE6;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .height_300 {
|
|
|
height: 300px;
|
|
|
- background-color: #409eff;
|
|
|
}
|
|
|
|
|
|
- .bubble-container {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- z-index: 1; /* Ensure content is above bubbles */
|
|
|
+ .height_30 {
|
|
|
+ height: 30px;
|
|
|
}
|
|
|
|
|
|
- .bubble-container::before,
|
|
|
- .bubble-container::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: transparent;
|
|
|
- pointer-events: none;
|
|
|
- z-index: -1; /* Place bubbles behind content */
|
|
|
+ .card_unpack_control {
|
|
|
+ padding: 0px 10px;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #DCDFE6;
|
|
|
}
|
|
|
|
|
|
- .bubble-container::before {
|
|
|
- animation: bubble-animation 5s infinite linear;
|
|
|
+ .warp {
|
|
|
+ height: calc(100% - 81px);
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
- .bubble-container::after {
|
|
|
- animation: bubble-animation 7s infinite linear;
|
|
|
+ .overturn {
|
|
|
+ transform: rotate(180deg);
|
|
|
}
|
|
|
|
|
|
- @keyframes bubble-animation {
|
|
|
- 0% {
|
|
|
- background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: 0% 100%;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
|
|
- background-size: 200% 200%;
|
|
|
- background-position: 100% -100%;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
|
|
|
- background-size: 100% 100%;
|
|
|
- background-position: 0% 100%;
|
|
|
- }
|
|
|
+ .card_table_grid {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ border-bottom: 1px solid #DCDFE6;
|
|
|
+ padding: 0px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_index1 {
|
|
|
+ width: 40px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_index {
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_grid {
|
|
|
+ flex: 1;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_each {
|
|
|
+ flex: 1;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .waves {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ margin-bottom: -7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .parallax>use {
|
|
|
+ animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .parallax>use:nth-child(1) {
|
|
|
+ animation-delay: -2s;
|
|
|
+ animation-duration: 7s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .parallax>use:nth-child(2) {
|
|
|
+ animation-delay: -3s;
|
|
|
+ animation-duration: 10s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .parallax>use:nth-child(3) {
|
|
|
+ animation-delay: -4s;
|
|
|
+ animation-duration: 13s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .parallax>use:nth-child(4) {
|
|
|
+ animation-delay: -5s;
|
|
|
+ animation-duration: 20s;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes move-forever {
|
|
|
+ 0% {
|
|
|
+ transform: translate3d(-90px, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translate3d(85px, 0, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*Shrinking for mobile*/
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .waves {
|
|
|
+ height: 40px;
|
|
|
+ min-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 30vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
unknown