dev/dcp-web-gate/src_old/views/helpCenter/WholeStationSearch.vue

<template>
	<div class="autoBox box">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: 'home' }">{{ $t('common.Home') }}</el-breadcrumb-item>
				<el-breadcrumb-item>{{ $t('common.SearchResults') }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- <wordcloud
		  :data="defaultWords"
		  nameKey="name"
		  valueKey="value"
		  :color="myColors"
		  :showTooltip="false"
		  :wordClick="wordClickHandler">
		</wordcloud> -->

		<div style="margin-top: 70px;width: 100%;height: 50px;position: relative;">

			<el-autocomplete
				:placeholder="$t('common.EnterContent')"
				v-model="title" @change="onInput(title)"
				class="input-with-select" maxlength="50"
				show-word-limit
				:fetch-suggestions="querySearchAsync"
				@select="handleSelect"
				style="width: 650px;position: absolute;left: 50%;top: 0;transform: translateX(-50%);">
				<template slot-scope="{ item }">
					<div class="innerHead" v-if="item.value!=='暂无匹配内容'">
						<div>
							<p style="margin:0">
								<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;">&nbsp;</span>
					</div>
				</template>
				<el-button class="cursor" slot="append" type="primary" @click="getSearchList()">
					{{ $t('common.Search') }}
				</el-button>
			</el-autocomplete>
		</div>
		<div style="margin: 20px 100px 0 100px;">
			<el-menu :default-active="activeIndex" class="el-menu-demo" style="font-size: 19px;" mode="horizontal"
			         @select="handleSelect">
				<el-menu-item index="all">{{ $t('common.All') }}</el-menu-item>
				<el-menu-item index="project">{{ $t('common.Project') }}</el-menu-item>
				<el-menu-item index="member_unit">{{ $t('common.MemberUnit') }}</el-menu-item>
				<el-menu-item index="unit">{{ $t('common.Enterprise') }}</el-menu-item>
				<el-menu-item index="information">{{ $t('common.News') }}</el-menu-item>
				<el-menu-item index="activity">{{ $t('common.Events') }}</el-menu-item>
				<el-menu-item index="meeting">{{ $t('common.Conference') }}</el-menu-item>
				<el-menu-item index="journal">{{ $t('common.Publications') }}</el-menu-item>
				<el-menu-item index="country">{{ $t('common.Country') }}</el-menu-item>
			</el-menu>
		</div>
		<div style="margin: 20px 100px 0 100px;" v-show="true">
			{{ $t('common.CorrelationResult') }} <span style="color: #00cd63;">{{ searchData.totalCount }}</span>
			{{ $t('common.aResult') }}
		</div>
		<!-- <div style="margin-top: 30px;width: 100%;">
		   <div>
			 <div class="cursor" v-for="(item,index) in initData" @click=""
				  style="padding:0 100px;margin-top:20px;">
			   <p><span style="float: left;font-weight: 700;" v-html="item.title"></span></p>
			   <p><span style="float: left;margin-right: 10px;">{{ item.content }}</span><br/></p>
			   <p><span style="float: left;margin-right: 10px;">{{$t('common.LatestUpdateTime')}}:{{formatDate(item.createDate)}}</span></p><br>
			 </div>
		   </div>
		   </div>
		 </div>-->

		<div v-loading="loading" style="min-height:200px">
			<div class="cursor" v-for="(item,index) in initData" :key="index" @click="toViewNew(item)"
			     style="padding:0 100px;margin-top:20px;">
				<div class="div1"><span style="font-weight: 700;" v-html="item.title"></span></div>
				<div class="div2">
					<!-- -webkit-box-orient: vertical; -->
					<!-- class="plate" -->
					<span v-html="item.content"


					      style="line-height: 30px;color: #333;font-size: 14px;
                          position:relative;
                          overflow: hidden;
                          display: inline-block;
                          max-height:95px;"></span></div>
				<div class="div3">{{ $t('common.LatestUpdateTime') }}: {{ formatDate(item.update_date) }}</div>
			</div>
		</div>


		<div style="width: 100%;position: relative;height: 100px;">
			<el-pagination
				style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
				background
				:index="indexMethod"
				layout="prev, pager, next"
				:page-size="pageSize"
				:current-page.sync="currentPage"
				:total="num-0"
				@current-change="handleCurrentChange"
			></el-pagination>
		</div>
	</div>
</template>
<script>
import Bus from "@/api/bus";   //注意引入
import {search} from "@/api/search";
import request from '@/utils/request'
import wordcloud from 'vue-wordcloud'
import {getDcpSearchWordsBeforeLogin, getDcpSearchWordsAfterLogin} from "@/api/dataBroadcastInfos";
import qs from 'qs'

export default {
	name: 'WholeStationSearch',
	components: {wordcloud},
	data() {
		return {
			title: this.$route.query.input,// 搜索内容
			activeIndex: this.$route.query.select || 'all', // 搜索类型
			initData: [],
			searchData: [],
			currentPage: 1,
			loading: true,
			pageSize: 10,
			num: 0,
			myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef', '#000'],
			defaultWords: [{value: 100, name: "文字"},
				{value: 400, name: "图片"},
				{value: 333, name: "参考"},
				{value: 855, name: "音视频"},
				{value: 343, name: "新媒体"},
				{value: 343, name: "测试1"},
				{value: 43, name: "测试2"},
				{value: 543, name: "测试3"},
				{value: 333, name: "测试4"},
				{value: 323, name: "测试5"},
				{value: 33, name: "测试6"},
				{value: 13, name: "测试7"},
				{value: 543, name: "测试8"},
				{value: 66, name: "测试9"},
				{value: 666, name: "测试10"},
			],
			restaurants: [],
			state: '',
			timeout: null
		}
	},
	created() {

	},
	watch: {

		'$i18n.locale'() {
			this.getSearchList();
			//区分登录与未登录的下拉框信息
			if (this.$Cookies.get('token')) {
				this.MygetDcpSearchWordsAfterLogin()
			} else {
				this.MygetDcpSearchWordsBeforeLogin();
			}
		},
	},
	mounted() {
		//区分登录与未登录的下拉框信息
		if (this.$Cookies.get('token')) {
			this.MygetDcpSearchWordsAfterLogin()
		} else {
			this.MygetDcpSearchWordsBeforeLogin();
		}
		this.getSearchList();
	},
	methods: {
		wordClickHandler(name, value, vm) {
			console.log('wordClickHandler', name, value, vm);
		},
		onInput(title) {
			this.$forceUpdate(title);
			this.getSearchList();
		},
		//获取搜索数据
		getSearchList() {
			var activeId = this.activeIndex;
			if (this.activeIndex == 'all') {
				activeId = 'project,unit,member_unit,information,activity,meeting,journal,country';
			}
			this.initData = [];
			this.loading = true;
			search(activeId, {
				pageNo: this.pageNo,
				keyword: this.title,
				pageSize: this.pageSize,
				language: this.$i18n.locale
			}).then(res => {
				if (res.data) {
          debugger
					this.searchData = res.data;
					this.num = res.data.totalCount;
					this.initData = res.data.list;
					this.loading = false;
				}
			})
		},
		handleSelect(key, keyPath) {
			console.log(key, keyPath);
			this.activeIndex = key;
			this.pageNo = 1;
			this.currentPage = 1;
			this.handleCurrentChange(1);
			this.getSearchList();
		},
		//跳到一个新的页面
		toViewNew(json) {
			//跳转路径名
			var router;
			//请求参数
			const reqParams = {};
			//判断是否为项目
			if (json.index == 'project') {
				router = 'projectPresentationDetails';
				reqParams.name = router,
					reqParams.query = {
						key: json.base_entity_id,
						screenId: 0,
						dataIndex: 0,
						cruPage: 1,
					};
			}
			//判断是否为企业
			else if (json.index == 'unit') {
				router = 'enterpriseDetails';
				reqParams.name = router,
					reqParams.query = {key: json.base_entity_id};
			}
			//判断是否为资讯
			else if (json.index == 'information') {
				router = 'realTimeInfoItemdetails';
				reqParams.name = router,
					reqParams.query = {key: json.base_entity_id};
			}
			//判断是否为活动
			else if (json.index == 'activity') {
				router = 'cooperationExchangeListDetails';
				reqParams.name = router,
					reqParams.query = {key: json.base_entity_id};
			}
			//判断是否为会议
			else if (json.index == 'meeting') {
				//存在未开始，已结束的会议
				if (json.meeting_is_enroll == '01') {
					router = 'ConferenceDetail';
					reqParams.name = router,
						reqParams.query = {key: json.id};
					// debugger
				} else {
					router = 'ConferenceResult';
					reqParams.name = router,
						reqParams.query = {key: json.id};
				}
			}
			//判断是否为期刊
			else if (json.index == 'journal') {
				//期刊数据是url链接
				router = 'RealTimeInfoJournaldetails';
				window.open(json.link, '_blank');
				return;
			}
			//判断是否为国别
			else if (json.index == 'country') {
				router = 'countryNationalSpace';
				reqParams.name = router
					reqParams.query = {key: json.base_entity_id};
			}
			//判断是否为会员单位
			else if (json.index == 'member_unit') {
				router = 'IntroductionPresentationDetails';
				reqParams.name = router
				reqParams.query = {
					key: json.id,
         // key: '3641f9b2e90111eaa9a3e454e8b99384', 
					member: JSON.stringify({
						memberNameZh: json.member_name_zh,
						memberNameEn: json.member_name_en,
						unitId: json.unit_id,
            // memberNameZh: '恒星太阳能公司',
			// 			memberNameEn: 'SunPower by Stellar Solar',
			// 			unitId: '33c097e3e91411eaa9a3e454e8b99384',

					})
				};
				console.log(json)
				console.log(reqParams)
			}
			this.$store.commit('modify', router);
			window.localStorage.setItem('router', router);
			console.log(reqParams)
			const {href} = this.$router.resolve(
				reqParams
			);
			window.open(href, '_blank');

		},
		handleCurrentChange(val) {
			this.pageNo = val;

			this.getSearchList();
		},
		//分页索引接着上一页的索引
		indexMethod(index) {
			return (this.page - 1) * 10 + index + 1;
		},
		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());
		// },
		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) {
		//   console.log('我的------------',item);
		// }
	}
}
</script>
<style scoped>
.box {
	margin-top: 10px;
	background: #fff;
	/* height: 500px; */
	padding: 20px 0;
}

.crumbs {
	margin-left: 20px;
}

.el-menu-item {
	font-size: 18px;
}

.div1 {
	font-size: 20px;
	font-family: HiraginoSansGB-W3, HiraginoSansGB;
	font-weight: normal;
	line-height: 30px;
}

.div2 {
	font-size: 18px;
	font-family: HiraginoSansGB-W3, HiraginoSansGB;
	font-weight: normal;
	color: #666666;
	line-height: 32px;

}

.div3 {
	font-size: 16px;
	font-family: HiraginoSansGB-W3, HiraginoSansGB;
	font-weight: normal;
	color: #999999;
	line-height: 30px;
}
</style>