|
@@ -0,0 +1,193 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="search-box backgroundBox">
|
|
|
|
+ <div class="iconBtnBox">
|
|
|
|
+ <div class="iconBtn backBtn" @click="goBack" v-if="goBackVisible"></div>
|
|
|
|
+ <div class="iconBtn mapBtn" @click="modeChange"></div>
|
|
|
|
+ <div class="iconBtn homeBtn" @click="goHome"></div>
|
|
|
|
+ <div class="iconBtn squareBtn" @click="goSquare"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <span
|
|
|
|
+ class="search-input"
|
|
|
|
+ ></span>
|
|
|
|
+ <!-- <div v-show="show" @click="onBlur" class="el-icon-close closeBtn"></div> -->
|
|
|
|
+ <div class="jumpBtnBox">
|
|
|
|
+ <div class="jumpBtn" @click="goKpm">K</div>
|
|
|
|
+ <div class="jumpBtn" @click="goMantis">M</div>
|
|
|
|
+ <div class="jumpBtn" @click="goAutoGo">A</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import bus from "../../service/bus";
|
|
|
|
+export default {
|
|
|
|
+ props: {},
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ value: "",
|
|
|
|
+ show: false,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ goBackVisible: () => {
|
|
|
|
+ return window.location.href.indexOf("ordinaryPage") == -1;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ onFocus() {
|
|
|
|
+ this.show = true;
|
|
|
|
+ this.$emit("focus");
|
|
|
|
+ },
|
|
|
|
+ onInput(event) {
|
|
|
|
+ this.value = event.target.value;
|
|
|
|
+ this.$emit("input", this.value);
|
|
|
|
+ },
|
|
|
|
+ onBlur(e) {
|
|
|
|
+ // this.show = false;
|
|
|
|
+ // console.log('=======-------======', e.currentTarget.classList)
|
|
|
|
+ // this.$emit("blur");
|
|
|
|
+ },
|
|
|
|
+ goBack() {
|
|
|
|
+ if (window.location.href.indexOf("ordinaryPage") == -1) {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: '/ordinaryPage',
|
|
|
|
+ query:{
|
|
|
|
+ m: '8b934420_ZJUb_b6f9'
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else if (window.location.href.indexOf("ordinaryPage") !== -1) {
|
|
|
|
+ this.$store.dispatch('common/setSquareStatus', true)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ modeChange() {
|
|
|
|
+ if (window.location.href.indexOf("ordinaryPage") !== -1) {
|
|
|
|
+ window.location.href = "/home?m=8b934420_ZJUb_b6f9";
|
|
|
|
+ //this.$router.push({
|
|
|
|
+ // path: '/home',
|
|
|
|
+ // query:{
|
|
|
|
+ // m: '8b934420_ZJUb_b6f9'
|
|
|
|
+ // }
|
|
|
|
+ //})
|
|
|
|
+ } else {
|
|
|
|
+ this.$store.dispatch('common/setSquareStatus', false)
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: '/',
|
|
|
|
+ query:{
|
|
|
|
+ m: '8b934420_ZJUb_b6f9'
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ goMantis() {
|
|
|
|
+ window.open("http://139.196.158.57:8080/mantis_test/#/dashboard", "_blank");
|
|
|
|
+ },
|
|
|
|
+ goKpm() {
|
|
|
|
+ window.open("http://106.14.237.165/kpm/#/list/kpm-list", "_blank");
|
|
|
|
+ },
|
|
|
|
+ goAutoGo() {
|
|
|
|
+ window.open("http://139.196.158.57/#/Overview", "_blank");
|
|
|
|
+ },
|
|
|
|
+ goHome() {
|
|
|
|
+ bus.emit("goHome");
|
|
|
|
+ // this.$router.push({
|
|
|
|
+ // path: '/',
|
|
|
|
+ // query:{
|
|
|
|
+ // m: '8b934420_ZJUb_b6f9'
|
|
|
|
+ // }
|
|
|
|
+ // })
|
|
|
|
+ },
|
|
|
|
+ goSquare(){
|
|
|
|
+ this.$store.dispatch("common/setSquareStatus", true);
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: '/ordinaryPage',
|
|
|
|
+ query:{
|
|
|
|
+ m: '8b934420_ZJUb_b6f9'
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+.search-box {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ align-items: center;
|
|
|
|
+ /* background-image: url(../../images/search.png); */
|
|
|
|
+ /* background-color: transparent; */
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ /* padding-right: 1.56vw; */
|
|
|
|
+ height: 55px;
|
|
|
|
+ padding: 0 30px;
|
|
|
|
+ margin-left: -400px;
|
|
|
|
+ left:50%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ width: 800px;
|
|
|
|
+ top: 50px;
|
|
|
|
+ position: absolute;
|
|
|
|
+}
|
|
|
|
+.closeBtn {
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ float: right;
|
|
|
|
+}
|
|
|
|
+.search-input {
|
|
|
|
+ width: calc(100% - 350px);
|
|
|
|
+ border: 0;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 0 20px;
|
|
|
|
+ height: 3.5vh;
|
|
|
|
+ color: #dfdfdf;
|
|
|
|
+ border-radius: 1.75vh;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.iconBtnBox,
|
|
|
|
+.jumpBtnBox {
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.iconBtn {
|
|
|
|
+ height: 25px;
|
|
|
|
+ width: 25px;
|
|
|
|
+ margin: 0 10px;
|
|
|
|
+ background-size: contain;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.backBtn {
|
|
|
|
+ background-image: url(../../assets/back.png);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.mapBtn {
|
|
|
|
+ background-image: url(../../assets/3d.png);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.homeBtn {
|
|
|
|
+ height: 22px;
|
|
|
|
+ width: 22px;
|
|
|
|
+ background-image: url(../../assets/home.png);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.squareBtn{
|
|
|
|
+ height: 22px;
|
|
|
|
+ width: 22px;
|
|
|
|
+ background-image: url(../../assets/square.png);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.jumpBtn {
|
|
|
|
+ margin: 0 6px;
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ border-radius: 15px;
|
|
|
|
+ background-color: #ddd;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+</style>
|