123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321 |
- <template>
- <div>
- <div class="box1">
- <div class="box2">
- <div class="title">
- <!-- <div class="statistics">-->
- <!-- {{ $t('common.Searchin')}}-->
- <!-- <span> {{informationTotal}} </span>-->
- <!-- {{ $t('common.SearchInInformation')}}-->
- <!-- </div>-->
- <div class="input-box">
- <el-autocomplete
- class="input-with-select"
- :placeholder="$t('common.LookingSearch')"
- maxlength="50"
- show-word-limit
- @keyup.enter.native="toView('WholeStationSearch',select,homeInput)"
- v-model="homeInput"
- :fetch-suggestions="querySearchAsync"
- @select="handleSelect"
- >
- <template slot-scope="{ item }">
- <div class="innerHead" v-if="item.value!=='暂无匹配内容'">
- <div>
- <p>
- <span v-html="item.nameStr"/>
- </p>
- </div>
- </div>
- <div v-else>
- <!--<span v-if="$i18n.locale=='zh'">暂无匹配内容</span>
- <span v-if="$i18n.locale=='en'">No match is found</span> -->
- <span style="display: inline-block;"> </span>
- </div>
- </template>
- <el-select v-model="select" slot="prepend" style="text-align: center !important;">
- <el-option class="beforecontent" :label="$t('common.WholeStation')" value="all"></el-option>
- <el-option class="beforecontent" :label="$t('common.Project')" value="project"></el-option>
- <el-option class="beforecontent" :label="$t('common.MemberUnit')" value="member_unit"></el-option>
- <el-option class="beforecontent" :label="$t('common.Enterprise')" value="unit"></el-option>
- <el-option class="beforecontent" :label="$t('common.News')" value="information"></el-option>
- <el-option class="beforecontent" :label="$t('common.Events')" value="activity"></el-option>
- <el-option class="beforecontent" :label="$t('common.Conference')" value="meeting"></el-option>
- <el-option class="beforecontent" :label="$t('common.Publications')" value="journal"></el-option>
- <el-option class="beforecontent" :label="$t('common.Country')" value="country"></el-option>
- </el-select>
- <!-- <el-button slot="append" >搜索</el-button> -->
- <!-- <template slot="prepend">{{serch}}</template> -->
- </el-autocomplete>
- <!-- <ul class="quick-search-list">-->
- <!-- <li v-for="(item,index) in hotSerch" @click="toView('WholeStationSearch',select,item.label,2)">-->
- <!-- {{$t(item.label)}}-->
- <!-- </li>-->
- <!-- </ul>-->
- </div>
- <el-button type="warning" @click="toView('WholeStationSearch',select,homeInput)">{{$i18n.locale=='en'? 'Search': '搜索'}}</el-button>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import Bus from "@/api/bus"; //注意引入
- import { getDcpSearchWordsBeforeLogin,getDcpSearchWordsAfterLogin } from "@/api/dataBroadcastInfos";
- export default {
- name: "Search",
- data() {
- return {
- title: "项目资源",
- serch: "项目",
- select: "all",
- homeInput: "",
- placeHolder: "",
- label: "",
- hotSerch:[{
- label:'common.cleanenergy'
- },{
- label:'common.Smartgrid'
- },{
- label:'common.Energystorage'
- },{
- label:'common.UHV'
- },{
- label:'common.GEI'
- }],
- restaurants: [],
- state: '',
- timeout: null
- };
- },
- watch: {
- "$i18n.locale"() {
- //区分登录与未登录的下拉框信息
- if(this.$Cookies.get('token')){
- this.MygetDcpSearchWordsAfterLogin()
- }else{
- this.MygetDcpSearchWordsBeforeLogin();
- }
- },
- videoUrl: function (val) {
- // const myPlayer = this.$refs.videoPlayer.player
- if (val !== "") {
- this.$refs.videoPlayer.player.src(val);
- }
- },
- state: function (val) {
- if (val) {
- this.$refs.videoPlayer.player.pause();
- }
- },
- },
- created() {
- // this.lookingChange();
- Bus.$on("title", (val) => {
- this.title = val.label;
- });
- Bus.$on("serch", (val) => {
- this.serch = val.label;
- });
- // let that = this;
- // document.onkeypress = (e) =>{
- // var keycode = document.all ? event.keyCode : e.which;
- // if (keycode == 13) {
- // that.toView('WholeStationSearch',that.select,that.homeInput)
- // return false;
- // }
- // };
- //区分登录与未登录的下拉框信息
- if(this.$Cookies.get('token')){
- this.MygetDcpSearchWordsAfterLogin()
- }else{
- this.MygetDcpSearchWordsBeforeLogin();
- }
- },
- props: {
- informationTotal: {
- type: String,
- default: "",
- },
- },
- methods: {
- // lookingChange(){
- // this.placeHolder=$t('common.LookingSearch');
- // }
- toView(router, select, input,num) {
- if(num){
- input=this.$t(input);
- }
- if (!input) {
- this.$message({
- message: this.$t("common.Theinputboxcannotbeempty"),
- type: "warning",
- });
- } else {
- this.$store.commit("modify", router);
- window.localStorage.setItem("router", router);
- const { href } = this.$router.resolve({
- name: router,
- query: {
- select: select,
- input: input,
- },
- });
- window.open(href, "_blank");
- }
- },
- MygetDcpSearchWordsBeforeLogin(){
- getDcpSearchWordsBeforeLogin(this.$i18n.locale).then((res)=>{
- this.restaurants = res.data.dcpSearchWordsBeforeLogin;
- // this.restaurants = this.loadAll();
- var arr = [];
- res.data.dcpSearchWordsBeforeLogin.forEach(element => {
- arr.push({"value":element.searchWordsName})
- });
- this.restaurants = arr;
- })
- },
- MygetDcpSearchWordsAfterLogin(){
- getDcpSearchWordsAfterLogin().then((res)=>{
- var arr = [];
- res.data.dcpSearchWordsAfterLogin.forEach(element => {
- arr.push({"value":element.searchName})
- });
- this.restaurants = arr;
- })
- },
- // querySearchAsync(queryString, cb) {
- // var restaurants = this.restaurants;
- // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
- // clearTimeout(this.timeout);
- // this.timeout = setTimeout(() => {
- // cb(results);
- // }, 500 * Math.random());
- // console.log('111111111111111111',queryString)
- // },
- querySearchAsync(queryString, cb) {
- var restaurants = this.restaurants;
- var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
- clearTimeout(this.timeout);
- this.timeout = setTimeout(() => {
- results = results.map(res => {
- res.nameStr = res.value.replace(queryString, `<span style="color: red;">${queryString}</span>`)
- return res
- })
- if (results.length === 0) {
- results[0] = {
- value: '暂无匹配内容'
- }
- }
- console.log(results);
- cb(results);
- }, 500 * Math.random());
- },
- createStateFilter(queryString) {
- return (state) => {
- return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
- };
- },
- handleSelect(item) {
- this.toView('WholeStationSearch',this.select,item.value)
- }
- },
- };
- </script>
-
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- *{
- box-sizing: border-box;
- padding: 0;
- margin: 0;
- }
- .box1 {
- width:100%;
- background: #0E4891;
- height: 60px;
- }
- .box2 {
- width: 1180px;
- margin: 0 auto;
- padding-top: 11px;
- }
- .box1 .title {
- font-size: 15px;
- font-weight: 700;
- height: 50px;
- line-height: 50px;
- color: #666;
- width: 1180px;
- display: flex;
- margin-top: 2px;
- }
- .box1 .statistics{
- font-size: 16px;
- font-weight: 600;
- color: #FFFFFF;
- line-height: 40px;
- }
- .box1 .statistics span{
- font-size: 24px;
- color: #FFAA05;
- }
- .box1 .input-box{
- flex: 1;
- margin: 0 10px 0 20px;
- margin-top: -8px;
- }
- .box1 >>> .el-input--suffix .el-input__inner {
- text-align: center;
- }
- .box2>>>.el-input__inner {
- height: 36px;
- }
- .box1 .title >>> .el-input-group__prepend {
- width: 70px;
- background: #fff;
- font-size: 16px;
- font-weight: bold;
- color: #2573E0;
- line-height: 22px;
- }
- .box1 >>>.el-button{
- height: 36px;
- width: 80px;
- font-size: 16px;
- }
- .box1 .header1 >>> .el-input-group__prepend {
- background-color: #fff;
- color: #000;
- }
- .box1 .title >>> .el-input-group {
- border-radius: 20px;
- }
- .quick-search-list{
- font-size: 12px;
- color: #fff;
- line-height: 26px;
- margin-left: 87px;
- }
- .quick-search-list li{
- display: inline-block;
- margin-right: 20px;
- cursor: pointer;
- }
- .quick-search-list li:hover{
- color: #dd531b;
- }
- .beforecontent {
- padding-left: 20px;
- }
- .el-autocomplete{
- width: 100%;
- }
- </style>
-
|