jiangxiGaizao/src/views/home/PublicSentiment.vue

<!--  -->
<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;cursor: pointer;" class="myTable"  :data="tableList"  :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>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="page"
          background
          style="padding: 10px 20px"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
                <!-- <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="舆情" v-model:visible="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'
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:[
        {
          IR_URLTITLE:'水利部来我省开展质量监督履职情况巡查及水利监督体系建设工作调研',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2022/9/28/art_27165_4160249.html',
          IR_URLTIME1:'2022-09-28'
        },
        {
          IR_URLTITLE:'江西省顺利完成水利部水资源管理和节约用水监督检查',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2022/9/14/art_27165_4141098.html',
          IR_URLTIME1:'2022-09-14'
        },
        {
          IR_URLTITLE:'胡春华在江西督导农业抗旱保丰收工作',
          IR_URLNAME:'http://www.pearlwater.gov.cn/xwzxcs/szywcs/202208/t20220830_116292.html',
          IR_URLTIME1:'2022-08-30'
        },
        {
          IR_URLTITLE:'水利部水库移民司来我省复核有关整改落实情况',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2022/8/23/art_27165_4118253.html',
          IR_URLTIME1:'2022-08-23'
        },
        {
          IR_URLTITLE:'长江委来赣调研指导长江经济带涉及水域岸线生态环境突出问题整改工作',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2022/7/25/art_27165_4078725.html',
          IR_URLTIME1:'2022-07-25'
        },
        {
          IR_URLTITLE:'水利部调研指导我省水库移民监督管理工作',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2022/7/4/art_27165_4017040.html',
          IR_URLTIME1:'2022-07-04'
        },
        {
          IR_URLTITLE:'省长叶建春一眼就看出水利工程存在安全隐患，现场要求整改',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2022/6/11/art_27165_3991100.html',
          IR_URLTIME1:'2022-06-11'
        },
        {
          IR_URLTITLE:'江西省水利厅举办水利监督技术视频培训班',
          IR_URLNAME:'http://www.mwr.gov.cn/xw/dfss/202206/t20220610_1578269.html',
          IR_URLTIME1:'2022-06-10'
        },
        {
          IR_URLTITLE:'省水利厅举办水利监督技术视频培训班',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2022/6/9/art_27165_3989125.html',
          IR_URLTIME1:'2022-06-09'
        },
        {
          IR_URLTITLE:'省委书记易炼红深入九江督导调研防汛工作',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2022/6/9/art_27165_3989049.html',
          IR_URLTIME1:'2022-06-09'
        },
        {
          IR_URLTITLE:'江西在水利部水利监督工作会上作交流发言',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2022/1/19/art_27165_3839008.html',
          IR_URLTIME1:'2022-01-19'
        },
        {
          IR_URLTITLE:'省水利厅召开中央环保督察水电站问题整改工作视频调度会',
          IR_URLNAME:'http://slt.jiangxi.gov.cn/art/2021/12/14/art_27165_3785354.html',
          IR_URLTIME1:'2021-12-14'
        }
      ],
      page:1,
      limit:10,
      total:12,
      tableList:[],
            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 this.$store?.state?.theme?.testMsg || 'light';
        },
    },
    //监控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() {
        this.page = 1;
        this.pageList();
        // 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: {
    //处理切换页码
    // handleSizeChange(val) {
    //     console.log(`每页 ${val} 条`);
    //     this.limit = val;
    //     this.pageList();
    // },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.pageList();
    },
    pageList() {
        this.tableList = this.tableResultData.filter(
            (item, index) =>
                index < this.page * this.limit &&
                index >= this.limit * (this.page - 1)
        );
        this.total = this.tableResultData.length;
    },
        showMore(){
            this.publicDialog = true;
        },
        getTrsDataList(){
            const 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)=>{
                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 scoped>
/* 透明表格样式 */
#building .el-table::before { background: none !important; }
.myTable ::-webkit-scrollbar-thumb { background-color: #cdcdcd; border-radius: 10px; }
.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; }
.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);
}
#building .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #e4e4e4; }
/* Radio 样式 */
.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; }
.myRadio .el-radio__label { font-size: 12px; }
.myRadio .el-radio__inner { width: 12px; height: 12px; }
.myRadio .el-radio-button--mini .el-radio-button__inner { background-color: transparent; }
/* 暗色主题 */
[data-theme="dark"] .myTable tr.el-table__row { color: rgba(177, 210, 254, 1); }
[data-theme="dark"] .myTable .el-table__header th, [data-theme="dark"] .el-table__header tr {
  background: rgba(37, 68, 159, 1) !important; color: rgba(255, 255, 255, 1) !important; border-bottom: none;
}
[data-theme="dark"] .myTable ::-webkit-scrollbar-thumb { background-color: rgba(70, 74, 115, 1); }
[data-theme="dark"] #building .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #25449f; }
[data-theme="dark"] .myTable tr.el-table__row { background-color: rgba(38, 44, 97, 1) !important; }
[data-theme="dark"] .myPagination .el-pager li { color: rgba(177, 210, 254, 1); }
[data-theme="dark"] .myPagination .btn-next, [data-theme="dark"] .myPagination .btn-prev { color: rgba(177, 210, 254, 1); }
[data-theme="dark"] .myPagination button:disabled { color: rgba(177, 210, 254, 1); }
</style>