fj-dc-ui/.svn/pristine/d8/d8eb6a5e069c2ac230e68d09846d48d299f21b33.svn-base

<!--  -->
<template>
	<div>
		<div class="simple_header">
			<div class="simple_header_icon"></div>
			<div class="simple_header_text">舆情</div>
			<div class="simple_header_text" style="float:right;margin-right:.5vw;">
				<el-button type="text" icon="el-icon-d-arrow-right" @click="showMore()">更多</el-button>
			</div>
		</div>
		<div class="left_PublicSentiment_content" id="left_PublicSentiment_content">
			<el-radio-group  class="myRadio" v-model="activeName2" size="mini" style="margin: 0px;width: 96%;overflow-x: auto;display: flex;padding: .5vh .4vw;text-align: center;">
				<el-radio-button label="0"   style=" background-color: rgba(0,0,0,0) !important;font-size:x-large !important;">新闻</el-radio-button>
				<el-radio-button label="1"    style=" background-color: rgba(0,0,0,0) !important;font-size:x-large !important;">论坛</el-radio-button>
				<el-radio-button label="2"    style=" background-color: rgba(0,0,0,0) !important;font-size:x-large !important;">博客</el-radio-button>
				<el-radio-button label="3"  style=" background-color: rgba(0,0,0,0) !important;font-size:x-large !important;">微博</el-radio-button>
				<el-radio-button v-if="radioForPad" label="4"  style=" background-color: rgba(0,0,0,0) !important;font-size:x-large !important;">app</el-radio-button>
				<el-radio-button label="5"    style=" background-color: rgba(0,0,0,0) !important;font-size:x-large !important;">微信</el-radio-button>
				<el-radio-button v-if="radioForPad" label="6"    style=" background-color: rgba(0,0,0,0) !important;font-size:x-large !important;">电子报</el-radio-button>
			</el-radio-group>
			<div style="width: 100%;height: 77%;" id="building">
				<el-table :show-header="false" style="padding: 0 .4vw;border: none;" class="myTable"  :data="tableResultData" v-loading="loading" :height="pubListHeight"  @row-click="openTrsDetails" >
					<el-table-column prop="IR_URLTITLE" label="标题" min-width="120"  show-overflow-tooltip></el-table-column>
					<el-table-column v-if="tableMiddle" prop="IR_SITENAME" label="来源" width="70"  show-overflow-tooltip></el-table-column>
					<el-table-column prop="IR_URLTIME1" label="发布时间" width="100"  show-overflow-tooltip></el-table-column>
				</el-table>
				<!-- <div class="block" style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;">
					<el-pagination class="myPagination"
						small
						@current-change="handleCurrentChange"
						:pager-count="5"
						:current-page.sync="pageIndex"
						:page-size="pageSize"
						layout="prev, pager, next"
						:total="allcount">
					</el-pagination>
				</div> -->
			</div>
		</div>
		<el-dialog title="舆情" :visible.sync="publicDialog" :close-on-click-modal="false" width="60%">
			<PublicMore v-if="publicDialog"></PublicMore>
		</el-dialog>
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {dateFormat} from "../../utils/gw_date.js"
import request from "../../utils/gw_ajax_request.js"
import PublicMore from "./PublicMore";//更多舆情信息弹窗
import axios from 'axios'
// import theme from '../../store/theme'
export default {
  //import引入的组件需要注入到对象中才能使用
	components: {
		PublicMore
	},
	data() {
		//这里存放数据
		return {
			radioForPad:true,
			activeName2:'0',
			tableResultData:[],
			loading:true,
			pageIndex:1,
			// pageSize:12,
			allcount:0,
			// pubListHeight:window.innerHeight * 0.38,
			pubListWidth:0,
			tableClass:'myTable',
			publicDialog:false
		};
	},
	//监听属性 类似于data概念
	computed: {
		pubListHeight(){
			if(window.innerWidth >= 1920){
				return window.innerHeight * 0.4;
			}else{
				return window.innerHeight * 0.35;
			}
		},
		pageSize(){
			if(window.innerWidth >= 1920){
				return 12;
			}else{
				return 7;
			}
		},
		tableMiddle(){
			if(window.innerWidth >= 1920){
				return true;
			}else{
				return false;
			}
		},
		msg(){
			// return theme.state.testMsg;
			return this.$store.state.theme.testMsg;
		},
	},
	//监控data中的数据变化
	watch: {
		activeName2:function(n,o){
          	this.loading = true;
            this.getTrsDataList();
		},
		msg(n,o){
			if( n == 'dark' ){
				this.tableClass = 'myTable_dark';
			}else{
				this.tableClass = 'myTable';
			}
		},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		// let h = document.getElementById('left_PublicSentiment_content').offsetHeight;
    	// this.pubListHeight = h - 85;
    	// console.log('pubListHeight'+this.pubListHeight);
		this.getTrsDataList();
		if(window.innerWidth <= 1024){
			this.radioForPad = false;
		}else{
			this.radioForPad = true;
		}
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
	//方法集合
	methods: {
		showMore(){
			this.publicDialog = true;
		},
		getTrsDataList(){
            var _self = this;
            let endTime = dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss');
			let startTime = dateFormat(new Date().getTime() - 7*24*60*60*1000,'yyyy-MM-dd hh:mm:ss');
			axios.get("/trs/om/cus",{params:{
				'id':'9069e11e',
				'key':'2515505d',
				'sid':'63',
				'pageNo':_self.pageIndex,
				'pageSize':_self.pageSize,
				'tid':_self.activeName2,
				'startDate':startTime,
				'endDate':endTime,
			}}).then((res)=>{

				var results = res.data;
                _self.loading = false;
                res.data.resultData.dataList.forEach((item)=>{
                    item['IR_URLTIME1'] = item.IR_URLTIME.substring(0,10);
                })
                _self.tableResultData = res.data.resultData.dataList;
                _self.allcount = res.data.resultData.databasic.allcount;
			})
            // request({
            //     url:"/trs/om/cus?id=9069e11e&key=2515505d&sid=57&pageNo="+_self.pageIndex+"&pageSize="+_self.pageSize+
            //         "&tid="+_self.activeName2+"&startDate="+startTime+"&endDate="+endTime,
            //     method:'get',
            //     responseType:'json',
            //     params:''
            // }).then((res)=>{
            //     var results = res.data;
            //     _self.loading = false;
            //     res.data.resultData.dataList.forEach((item)=>{
            //         item['IR_URLTIME1'] = item.IR_URLTIME.substring(0,10);
            //     })
            //     _self.tableResultData = res.data.resultData.dataList;
            //     _self.allcount = res.data.resultData.databasic.allcount;
            // });
		},
		handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.loading = true;
            this.getTrsDataList();
		},
		openTrsDetails(row, event, column) {
			if(row.IR_URLNAME){
				window.open(row.IR_URLNAME);
			}
        },
	},
};
</script>
<style lang="scss">
//@import "@scss/home";
@media screen and (min-width: 960px) {
  @import "@scss/homeForPad";
}
// @media screen and (min-width: 1024px) {
//   @import "@scss/home1024";
// }
@media  screen and (min-width: 1024px) and (max-width:1920px){
  @import "@scss/home";
}
//暗色主表格字体颜色
@mixin fontColor_dark{
	[data-theme="dark"] & {
		color:rgba(177, 210, 254, 1);
	}
}
@mixin tableHeader_dark{
	[data-theme="dark"] & {
		background:rgba(37, 68, 159, 1) !important;
		color:rgba(255, 255, 255, 1) !important;
		border-bottom: none;
	}
}
//滚动条样式
@mixin scrollbarThumb{
	[data-theme="dark"] & {
		background-color: rgba(70, 74, 115, 1);
	}
}
//element表格行悬浮高亮样式修改暗色样式
@mixin tableRowHighLight{
	[data-theme="dark"] & {
		background-color: #25449f;
	}
}
//element表格行悬浮高亮样式修改
#building .el-table--enable-row-hover .el-table__body tr:hover>td {
	background-color: #e4e4e4;
	@include tableRowHighLight;
}
#building .el-table::before{
   background: none !important;
}
//浅色滚动条 滑槽样式
.myTable ::-webkit-scrollbar-thumb{
	 background-color: #cdcdcd;
	 border-radius: 10px;
	 @include scrollbarThumb;
}
.myTable ::-webkit-scrollbar-corner{
	background-color:transparent !important;
}
.myTable ::-webkit-scrollbar-track {
  	background-color:transparent !important;
}
.myTable ::-webkit-scrollbar-track-piece  {
  	background-color:transparent !important;
}
.myTable ::before{
	background-color: none !important;
}
.myTable .el-table--border td{
	padding:0;
}
/* 浅色首页表格底色 */
.myTable tr.el-table__row {
	background-color: transparent !important;
	@include fontColor_dark;
}


.myTable td {
	border-bottom:1px solid rgba(109, 118, 236, 0.2);
	padding:4px 0;
}
/* 这个样式是修改透明表格背景的关键 */
.myTable, .el-table__expanded-cell {
    background-color: transparent;
}
.myTable .el-table__header th,.el-table__header tr{
	/* 浅色表头 */
	padding:2px 0;
    background:rgba(176, 230, 255, 1) !important;
	color: rgba(49, 63, 102, 1);
	@include tableHeader_dark;
}
.myRadio .el-radio-button__orig-radio:checked+.el-radio-button__inner {
	padding:.8vh .5vw;
	background-color: #409EFF;
}
.myRadio .el-radio-button--mini .el-radio-button__inner {
    padding: .8vh .38vw;
    font-size: 12px;
}

.myRadio .el-radio-button__inner{
    border: 1px solid #409EFF;
    border-left: none;
    color: #409EFF;
}
.myRadio .el-radio{
    margin-right: 1vw;
}
.myTable_dark tr.el-table__row {
	background-color:rgba(38, 44, 97, 1) !important;
}

.myRadio .el-radio__label{
    font-size: 12px;
}
.myRadio .el-radio__inner{
    width:12px;
    height:12px;
}
/* 浅色分页 */
.myPagination .el-pager li{
	background-color: transparent;
	@include fontColor_dark;
}
.myPagination .btn-next{
	background-color: transparent;
	@include fontColor_dark;
}
.myPagination .btn-prev{
	background-color: transparent;
	@include fontColor_dark;
}
.myPagination button:disabled{
	background-color: transparent;
	@include fontColor_dark;
}
.myRadio .el-radio-button--mini .el-radio-button__inner {
	background-color: transparent;
}
</style>
<style>

@media screen and (min-width: 1920px) {
@import "../../assets/sass/home1920.scss";
  .myRadio .el-radio-button--mini .el-radio-button__inner {
		padding: .8vh .69vw;
		font-size: 12px;
	}
}
</style>