suyiScreen/src/components/layout/header.vue

<template>
  <div
    id="headers-box"
    
  >
    <div id="headers">
      <div class="left">
        <div class="home" v-if="this.$route.path == '/'" @click="goback">
          <img src="@/assets/newimgs/shouye.png" alt="" style="width:19px;height:18px;margin-left: 15px;">
          <p style="color:#ffffff;margin-left: 6px;height:18px;">首页</p>
        </div>
        <div class="back" v-if="this.$route.path != '/'" @click="goPage"></div>
        <div class="time">
          <el-date-picker
            v-model="timeVal"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="search" v-show="searchShow1">
          <el-input
            placeholder="查询"
            prefix-icon="el-icon-search"
            v-model="searchVal">
          </el-input>
        </div>
        <div class="search1" v-show="!searchShow1">
          侵华日军南京大屠杀遇难同胞纪念馆
        </div>
      </div>
      <div class="right">
        <div class="xianchang">
          <img src="@/assets/newimgs/xianchang.png" alt="" style="width:138px;height:34px;margin-left: 15px;cursor: pointer;" @click="handle()">
        </div>
        <div class="company">
          <img src="@/assets/newimgs/人员.png" alt="" style="width:29px;height:29px;margin-left: 15px;">
          <el-select v-model="companyVal" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="news">
          <img src="@/assets/newimgs/消息.png" alt="" style="width:27px;height:32px;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "../../utils/index.js";
// import BottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
export default {
  props: {
    htStatus: {
      type: Number,
      // default: () => ({}),
    },
    searchShow: {
      type: Boolean,
      default: false,
    },
  },
  // props:['htStatus'],
  
  data() {
    return {
      name:'',
      searchShow1:true,
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
      timeVal:'2022-11-30',
      searchVal:'',
      companyVal:'1',
      options: [{
          value: '1',
          label: '国网南京供电公司 陈堃'
        }],
    };
  },
  components: {
    // BottomLeftChart,
  },
  mounted() {
    console.log(this.$route.path, "aaaa");
    this.timeFn();
    this.timeVal = new Date()
      this.searchShow1 = this.searchShow;
  },
  watch: {
  },
  methods: {
    /** 返回上一页 */
    goPage() {
      console.log(this.htStatus ,'this.htStatus ');
      if(this.htStatus == 1 ){
        this.$router.push('/');
      }else{
        this.$parent.handleHtweb()
      }
      
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy年MM月dd日");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    goback() {
      this.$router.push("/");
    },
    handle(){
      // window.parent.handledianwei();
      window.openVideo = 
      setTimeout(() => {
        // this.carChangeShow = true;
        var url  = 'https://ddns.thirdtec.cn:41127/njbd/video/index-copy.html'
         window.open(url, 
        'baidu', 
        'top=200,left=250,width=1500,height=680');
      }, 1000 * 1.5);
    }
  },
};
</script>

<style lang="scss" scoped>
$box-height: 520px;
$box-width: 100%;
::v-deep .el-input__inner{
  background: transparent;
}
#headers-box {
  width: 100%;
  background: url("../../assets/up1.png") no-repeat;
  background-size: 100% 100%;
  z-index: 999;
}
#headers {
  width: 100%;
  height: 76px;
  background: url("../../assets/newimgs/dingbu.png") no-repeat top center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 5px 10px;
  box-sizing: border-box;
  .left{
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    .home{
      width: 98px;
      height: 34px;
      background: url("../../assets/newimgs/首页-框.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .back{
      width: 98px;
      height: 34px;
      background: url("../../assets/newimgs/返回.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
    .time{
      margin-left: 5px;
      ::v-deep .el-date-editor{
        width: 176px;
        height: 34px;
        background: url("../../assets/newimgs/查询-框.png") no-repeat;
        background-size: 100% 100%;
        .el-input__prefix{
          margin-left: 10px;
        }
      }
      ::v-deep .el-input__inner{
        height: 34px;
        border: none;
        color: #ffffff;
        margin-left: 10px;
      }
      ::v-deep .el-input__icon {
          line-height: 35px;
      }
    }
    .search{
      ::v-deep .el-input{
        width: 176px;
        height: 34px;
        margin-left: 5px;
        background: url("../../assets/newimgs/查询-框.png") no-repeat;
        background-size: 100% 100%;
        .el-input__inner{
          border: none;
          height: 34px;
          margin-left: 10px;
        }
        .el-input__prefix{
          margin-left: 10px;
        }
        .el-input__icon {
          line-height: 34px;
        }
      }
    }
    .search1{
      color:#ffffff;
      margin-top: 1.5%;
     height: 52%;
     ::v-deep .el-input{
        width: 176px;
        height: 34px;
        margin-left: 5px;
        background: url("../../assets/newimgs/查询-框.png") no-repeat;
        background-size: 100% 100%;
        .el-input__inner{
          border: none;
          height: 34px;
          margin-left: 10px;
        }
        .el-input__prefix{
          margin-left: 10px;
        }
        .el-input__icon {
          line-height: 34px;
        }
      }
    }
  }
  .right{
    display: flex;
    flex-flow: row nowrap;
    .company{
      width: 292px;
      height: 34px;
      background: url("../../assets/newimgs/公司选择框.png") no-repeat;
      display: flex;
      align-items: center;
      ::v-deep .el-select{
        width: 245px;
        .el-input__inner {
          border: none;
          color: #ffffff;
        }
      }
    }
    .news{
      width: 54px;
      height: 34px;
      background: url("../../assets/newimgs/圆角矩形.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>