<template>
    <div id="ztfx">
        <div class="left-part">
            <div class="left-part-button">
                <div class="button-management" @click="managementTheme()">主题管理</div>
            </div>
            <div class="left-part-top">
                <el-tree :data="data" :props="defaultProps" ref="popularTree" @node-click="handleNodeClick" default-expand-all :highlight-current="true" node-key="id" :current-node-key="currentNodekey"></el-tree>
            </div>

        </div>
        <div class="right-part" v-if="part == 1">
            <div class="ztfx-list">
                <div class="ztfx-list-title">
                    <span>为您提供<span class="new-num" v-text="total"></span>条数据</span>
                    <div class="button-discuss" @click="discuss()">研判</div>
                    <div class="button-preview" @click="analyse()">分析</div>
                </div>
                <div class="ztfx-list-content">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane :label="'新闻'+'('+totalType.totalNews+')'" name="1" v-if="isShow[0]">
                            <div class="content">
                                <div class="content-news" v-for="(item, index) in getNews" @click="show_newsInfo(item,index)">
                                    <div class="content-news-first">
                                        <div class="news-title" v-text="item.title_zh"></div>
                                    </div>
                                    <div class="news-content" v-text="item.txt_zh" :title="item.txt_zh"></div>
                                    <div class="news-info">
                                        <span class="news-info-sitename">来自：<span v-text="item.site_name"></span></span>
                                        <span class="news-info-pubdate">发布时间：<span v-text="item.pubdate"></span></span>
                                        <span class="news-info-snatchtime">抓取时间：<span v-text="item.snatch_time"></span></span>
                                        <div class="news-info-tool">
                                            <i class="el-icon-more" title="详情"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pagination-div">
                                <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage" :total="this.totalType.totalNews" @current-change="handleCurrentChange" @size-change="handleSizeChangeNews" :page-size="everySizeNews" :page-sizes="[10,20,50,100]">
                                </el-pagination>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane :label="'FACEBOOK'+'('+totalType.totalFacebook+')'" name="2" v-if="isShow[1]">FACEBOOK
                        </el-tab-pane>
                        <el-tab-pane :label="'TWITTER'+'('+totalType.totalTwitter+')'" name="3" v-if="isShow[2]">
                            <div class="content">
                                <div class="content-news" v-for="(item, index) in getTwitter" @click="show_newsInfo(item,index)">
                                    <div class="content-news-first">
                                        <div class="news-title" v-text="item.site_name"></div>
                                    </div>
                                    <div class="news-content" v-text="item.txt" :title="item.txt"></div>
                                    <div class="news-info">
                                        <span class="news-info-sitename">来自：<span v-text="item.site_name"></span></span>
                                        <span class="news-info-pubdate">发布时间：<span v-text="item.pubdate"></span></span>
                                        <span class="news-info-snatchtime">抓取时间：<span v-text="item.snatch_time"></span></span>
                                        <div class="news-info-tool">
                                            <i class="el-icon-more" title="详情"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pagination-div">
                                <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage3" :total="this.totalType.totalTwitter" @current-change="handleCurrentChange3" @size-change="handleSizeChangeTwitter" :page-size="everySizeTwitter" :page-sizes="[10,20,50,100]">
                                </el-pagination>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane :label="'智库'+'('+totalType.totalThinkTank+')'" name="4" v-if="isShow[3]">智库</el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <div class="right-part" v-if="part == 2">
            <div class="left-part1">
                <div class="center-part-top-chart">
                    <table>
                        <tr>
                            <td v-for="(item, index) in table_data">
                                <img @click="check(index)" :src="item" alt="" :style="{
                    border: index == index1 ? '1px solid white' : 'none',
                    boxShadow: index == index1 ? '0 2px 12px 0 white' : '',
                  }" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="center-part-top">
                    <div class="center-part-top-one">
                        <span>话题：</span>
                        <el-select class="public-input" v-model="topicValue" placeholder="" @change="onChangeTopic">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    &emsp;&emsp;
                    <div class="center-part-top-two">
                        <span>维度：</span>
                        <el-select class="public-input" v-model="dimensionValue" placeholder="输入类型" @change="onChangeDimension">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    &emsp;&emsp;
                    <div class="center-part-top-three">
                        <span>网格线：</span>
                        <el-switch v-model="value1" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </div>
                    &emsp;&emsp;
                    <div class="center-part-top-four">
                        <span>显示数据：</span>
                        <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </div>
                </div>
                <div id="myecharts" class="center-part-center"></div>
                <div class="center-part-bottom">
                    <table>
                        <tr>
                            <td>图表标题</td>
                            <td>
                                <el-input v-model="obj.title" placeholder="请输入内容"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>图表描述</td>
                            <td>
                                <el-input v-model="obj.attribution" placeholder="请输入内容"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div @click="define" class="button">添加</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="right-part1">
                <!-- <div class="right-part-top">
                    <el-select class="public-input" v-model="value4" placeholder="请选择模板">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
                <div class="right-part-center">
                    <div class="right-part-center-img" v-for="(item, index) in img_list">
                        <div class="right-part-center-img-title" v-text="item.title"></div>
                        <el-image :src="item.img" fit="contain"></el-image>
                        <i @click="edit_img(index)" class="el-icon-delete-edit"></i>
                        <i @click="delete_img(index)" class="el-icon-delete-solid"></i>
                    </div>
                </div>
                <div class="right-part-bottom">
                    <div class="button-preview" @click="preview_report">预览报告</div>
                    <div class="button-cancel" @click="cancel_report">取消</div>
                </div>
            </div>
        </div>
        <div class="right-part" v-if="part == 3">
            <div class="discuss-detail">
                <div class="discuss-detail-choice">
                    <!-- <span>话题：</span>
                    <el-select class="public-input" v-model="topicValue" placeholder="">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select> -->
                    <img class="back-img" :src="back" alt="" @click="goBack()" />
                </div>
                <div class="discuss-detail-title">
                    <div class="discuss-detail-title-div">
                        <div class="pub-div-top1">
                            <span>事件描述</span>
                        </div>
                        <div class="pub-div-bottom1">
                            在<span style="color:orange">({{descriptionInfo.period}})</span>时间范围内，本次事件监测互联网信息<span style="color:orange">{{descriptionInfo.num}}</span>条。全网声量最高峰出现在<span style="color:orange">{{descriptionInfo.maxNumDay}}</span>，当天
                            共产生<span style="color:orange">{{descriptionInfo.maxNum}}</span>条相关信息。最热时间发生于<span style="color:orange">{{descriptionInfo.hotPubTime}}</span>,发布在<span style="color:orange">{{descriptionInfo.hotSite}}</span>上，题名为<span style="color:orange">"{{descriptionInfo.hotTitle}}"</span>。后续报道主要来源于<span style="color:orange">{{descriptionInfo.sites?descriptionInfo.sites.join('、'):''}}</span>等几大站点。
                        </div>
                    </div>
                    <div class="discuss-detail-title-pub">
                        <div class="discuss-detail-title-left">
                            <div class="pub-div-top">
                                <span>节点分析</span>
                            </div>
                            <div class="pub-div-bottom">
                                <ul id="jd_ul">
                                    <li v-for="(item,index) in jd_data">
                                        <div class="div-top">
                                            <span :title="item.title">{{item.title}}</span>
                                        </div>
                                        <div class="div-center">
                                            <span :title="item.source">{{'来源：'+item.source}}</span>
                                        </div>
                                        <div class="div-bottom">
                                            <span>{{item.time}}</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="discuss-detail-title-right">
                            <div class="pub-div-top">
                                <span>数据分布</span>
                            </div>
                            <div class="pub-div-bottom">
                                <div style="width:100%;height:100%" id="echatrs_sjfb"></div>
                            </div>
                        </div>
                    </div>
                    <div class="discuss-detail-title-pub">
                        <div class="discuss-detail-title-left">
                            <div class="pub-div-top">
                                <span>舆论走势</span>
                            </div>
                            <div class="pub-div-bottom">
                                <div style="width:100%;height:100%" id="echatrs_ylqs"></div>
                            </div>
                        </div>
                        <div class="discuss-detail-title-right">
                            <div class="pub-div-top">
                                <span>评价分析</span>
                            </div>
                            <div class="pub-div-bottom">
                                <div style="width:100%;height:100%" id="echatrs_pjfx"></div>
                            </div>
                        </div>
                    </div>
                    <div class="discuss-detail-title-pub">
                        <div class="discuss-detail-title-left">
                            <div class="pub-div-top">
                                <span>影响力分析（前20名）</span>
                            </div>
                            <div class="pub-div-bottom">
                                <el-table
                                    style="width: 100%"
                                    height="calc(100% - 0px)"
                                    class="table-div"
                                    :data="yxl_table"
                                >
                                    <el-table-column type="index" width="55" label="序号"> </el-table-column>
                                    <el-table-column prop="plnr" label="评论内容"> </el-table-column>
                                    <el-table-column prop="num" width="100" label="热力值"> </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="discuss-detail-title-right">
                            <div class="pub-div-top">
                                <span>热门词云</span>
                            </div>
                            <div class="pub-div-bottom">
                                <div style="width:100%;height:100%" id="echatrs_rmcy"></div>
                            </div>
                        </div>
                    </div>
                    <div class="discuss-detail-title-pub">
                        <div class="discuss-detail-title-left">
                            <div class="pub-div-top">
                                <span>相关事件</span>
                            </div>
                            <div class="pub-div-bottom">
                                <el-table
                                    style="width: 100%"
                                    height="calc(100% - 0px)"
                                    class="table-div"
                                    :data="xgsj_table"
                                >
                                    <el-table-column type="index" width="55" label="序号"> </el-table-column>
                                    <el-table-column prop="title" label="新闻标题"> </el-table-column>
                                    <el-table-column prop="tag" label="新闻类别">
                                        <template slot-scope="scope">
                                            <span v-for="(item) in scope.row.tag">{{item+'、'}}</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="discuss-detail-title-right">
                            <div class="pub-div-top">
                                <span>内部数据</span>
                            </div>
                            <div class="pub-div-bottom">
                                <el-tabs v-model="activeName_dqxx">
                                    <el-tab-pane label="人物" name="rwxx">
                                        <el-table :data="dataDqxxRwxx" stripe style="width: 100%" class="table-div">
                                            <el-table-column prop="baseProperty.姓名" label="姓名" show-overflow-tooltip>
                                            </el-table-column>
                                            <el-table-column prop="baseProperty.军衔等级" label="军衔等级" show-overflow-tooltip>
                                            </el-table-column>
                                            <el-table-column prop="baseProperty.行政职务" label="行政职务" show-overflow-tooltip>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                    <el-tab-pane label="机构" name="jgxx">
                                        <el-table :data="dataDqxxJgxx" stripe style="width: 100%" class="table-div">
                                            <el-table-column prop="baseProperty.部队番号" label="名称" show-overflow-tooltip>
                                            </el-table-column>
                                            <el-table-column prop="baseProperty.国家地区" label="国家" width="100" show-overflow-tooltip>
                                            </el-table-column>
                                        </el-table>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </div>
                    </div>
                    <div class="discuss-detail-title-pub">
                        <div class="discuss-detail-title-left">
                            <div class="pub-div-top">
                                <span>措施建议</span>
                            </div>
                            <div class="pub-div-bottom">
                                <div style="font-size: 14px;padding: 0px 10px;overflow-y: auto;width: calc(100% - 20px);height: 100%;">
                                    <span v-html="csjy" ></span>
                                </div>
                            </div>
                        </div>
                        <div class="discuss-detail-title-right">
                            <div class="pub-div-top">
                                <span>信息制品</span>
                            </div>
                            <div class="pub-div-bottom">
                                <el-table
                                    style="width: 100%"
                                    height="calc(100% - 0px)"
                                    class="table-div"
                                    :data="xxzp_table"
                                >
                                    <el-table-column type="index" width="55" label="序号"> </el-table-column>
                                    <el-table-column prop="nr" label="标题"> </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
                <el-backtop target=".discuss-detail " :bottom="100">
                </el-backtop>
            </div>

        </div>
        <!-- 预览报告弹框 -->
        <el-dialog title="报告详情" :visible.sync="dialogVisible" width="60%">
            <div class="report-info">
                <div class="report-info-name">
                    <el-input v-model="reportInfo.title" placeholder="请输入报告名称（必填项）"></el-input>
                </div>
                <div class="report-info-title">
                    <el-input :disabled="true" value="一、网上基本情况"></el-input>
                </div>
                <div class="report-info-content">
                    <el-input v-model="reportInfo.content" type="textarea" :rows="2" placeholder="请输入内容(不输入即不显示)">
                    </el-input>
                </div>
                <div class="report-info-title">
                    <el-input :disabled="true" value="二、图表内容"></el-input>
                </div>
                <div class="report-info-chart" v-for="(item, index) in reportInfo.img_list">
                    <div class="report-info-chart-title">
                        <el-input v-model="item.title"></el-input>
                    </div>
                    <div class="report-info-chart-content">
                        <el-image :src="item.img" fit="contain"></el-image>
                        <div class="img-title">图<span v-text="index + 1"></span></div>
                        <el-input v-model="item.attribution" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="export_report">导出报告</el-button>
                <el-button type="success" @click="send_report">发送报告</el-button>
            </span>
        </el-dialog>
        <!-- 主题管理弹出框 -->
        <el-dialog title="主题管理" center :visible.sync="dialogVisibleZtgl" width="85%" top="5%" class="dialogZtgl"  append-to-body>
            <div style="width:100%;height:70%">
                <ztgl  @closeMoule="closeMoule"></ztgl>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import img from "../../assets/img/yqjc/42.png";
import img1 from "../../assets/img/yqjc/30.png";
import img2 from "../../assets/img/yqjc/32.png";
import img3 from "../../assets/img/yqjc/35.png";
import img4 from "../../assets/img/yqjc/37.png";
import img5 from "../../assets/img/yqjc/38.png";
import img6 from "../../assets/img/yqjc/1.jpeg";
import img7 from "../../assets/img/yqjc/1.jpg";
import back from "../../assets/img/setting/back.png";
import ztgl from "./ztgl.vue";
import * as echarts from "echarts";
import { get, post, startLoading, endLoading } from "../../util/http_util";
import exportWord from "../../util/export_doc_util";
import msgType from "../../constant/msgtype";

import {
    queryFzjcTree,
    queryDynamicCharacter,
    queryDynamicOrganization,
    queryDoc
} from "../../api/index";

import {
    queryResult
} from "../../api/decision"

import {option_hot_word, option_pie} from "../../constant/echart-options"
export default {
    name: "ztfx",
    components: {
        ztgl: ztgl,
    },
    data() {
        return {
            modalZtgl: false,
            activeName: "1",
            currentPage: 1, //分页插件 当前所在的页数
            currentPage3: 3,
            back: back,
            part: 1,
            checked: true,
            dialogVisible: false,
            defaultProps: {
                children: "children",
                label: "label",
            },
            data: [
            ],
            table_data: [img, img1, img2, img3, img4, img5],
            options: [
                {
                    value: "媒体类型",
                    label: "媒体类型",
                },
                {
                    value: "行业",
                    label: "行业",
                },
                {
                    value: "情感",
                    label: "情感",
                },
                {
                    value: "关键词",
                    label: "关键词",
                },
                {
                    value: "时间",
                    label: "时间",
                },
                {
                    value: "国家",
                    label: "国家",
                },
                 {
                    value: "大洲",
                    label: "大洲",
                },
            ],
            options1: [
                {
                    value: "全部",
                    label: "全部",
                },
                {
                    value: "国际国内热点",
                    label: "国际国内热点",
                },
                {
                    value: "美盟涉华舆情",
                    label: "美盟涉华舆情",
                },
                {
                    value: "台海潮声",
                    label: "台海潮声",
                },
                {
                    value: "中日交锋",
                    label: "中日交锋",
                },
                {
                    value: "半岛风云",
                    label: "南海观澜",
                },
                {
                    value: "国际大势",
                    label: "国际大势",
                },
            ],
            dimensionValue: "媒体类型",
            value1: "",
            value2: "",
            topicValue: "",
            value4: "",
            index1: 0,
            type: "radar",
            myChart: "",
            obj: {
                title: "",
                attribution: "",
                img: "",
            },
            img_list: [],
            reportInfo: {
                title: "",
                content: "",
                img_list: [],
            },
            total: 0,
            totalType: {
                totalNews: 0,
                totalFacebook: 0,
                totalTwitter: 0,
                totalThinkTank: 0,
            },
            condition: {
                stTime: null,
                edTime: null,
                siteName: null,
                author: null,
                title: null,
                txt: null,
            },
            getNews: [],
            getTwitter: [],
            click_id: 1,
            isShow: [false, false, false, false],
            themeNode: null,
            newsDimension: [],
            dialogVisibleZtgl: false,
            everySizeTwitter: 10,
            everySizeNews: 10,
            myChart_sjfb:'',
            myChart_ylqs:'',
            myChart_pjfx:'',
            myChart_rmcy:'',
            yxl_table:[
            ],
            xgsj_table:[],
            csjy:'',
            xxzp_table:[
                {nr:'新建文档.docx'},
              
            ],
            activeName_dqxx: "rwxx",
            dataDqxxRwxx:[
                {
                    baseProperty:{'姓名':'Donald O. Myrick','军衔等级':'军士长','行政职务':'部长'}
                },
              
            ],
            dataDqxxJgxx:[
                {
                    baseProperty:{'名称':'美国国防部','国家':'美国'}
                },
               
            ],
            jd_data:[],
            descriptionInfo:{},
            currentKey:'',
            currentNodekey:'',
        };
    },
    watch: {
        value1(val, old) {
            this.myChart.setOption({
                xAxis: [
                    {
                        splitLine: { show: val }, //去除网格线、
                    },
                ],
                yAxis: [
                    {
                        splitLine: { show: val }, //去除网格线、
                    },
                ],
            });
        },
        value2(val, old) {
            this.myChart.setOption({
                series: [
                    {
                        label: { show: val }, //去除标签
                    },
                ],
            });
        },
    },
    methods: {
        onChangeDimension(e){
            if(e == "国家"){
                this.themeNode.dimensionRegion = "COUNTRY";
            }else if(e == "大洲"){
                this.themeNode.dimensionRegion = "CONTINENT";
            }else if(e == "媒体类型"){
                this.themeNode.dimensionRegion = "MEDIA";
            }
            this.analyseInfo();
        },
        onChangeTopic(e){
            e= e=="全部"?null:e;
            this.themeNode.topic = e;
            this.analyseInfo();
        },
        check(index) {
            this.myChart.dispose();
            this.index1 = index;
            this.value1 = true;
            this.value2 = true;
            this.obj.title = "";
            this.obj.attribution = "";
            switch (index) {
                case 0:
                    this.type = "radar";
                    break;
                case 1:
                    this.type = "line";
                    break;
                case 2:
                    this.type = "bar1";
                    break;
                case 3:
                    this.type = "bar";
                    break;
                case 4:
                    this.type = "pie";
                    break;
                case 5:
                    this.type = "pie1";
                    break;
            }
            this.myChart = echarts.init(document.getElementById("myecharts"));
            this.creat_echarts(this.newsDimension, this.type);
        },
        creat_echarts(data, type) {
            if (this.myChart == "") {
                this.myChart = echarts.init(document.getElementById("myecharts"));
            }
            let option = {},
                data_tmp = [],
                obj_tmp = {},
                data_all = [];
            if (type == "radar") {
                for (let i = 0; i < data[0].length; i++) {
                    obj_tmp = {};
                    obj_tmp["text"] = data[0][i];
                    data_all.push(obj_tmp);
                }
                option = {
                    backgroundColor: "#1d2d46",
                    radar: [
                        {
                            indicator: data_all,
                            center: ["50%", "50%"],
                            radius: 120,
                            startAngle: 90,
                            splitNumber: 4,
                            shape: "circle",
                            axisName: {
                                formatter: "【{value}】",
                                color: "#72ACD1",
                            },
                            splitArea: {
                                areaStyle: {
                                    color: [
                                        "rgba(114, 172, 209, 0.2)",
                                        "rgba(114, 172, 209, 0.4)",
                                        "rgba(114, 172, 209, 0.6)",
                                        "rgba(114, 172, 209, 0.8)",
                                        "rgba(114, 172, 209, 1)",
                                    ],
                                    shadowColor: "rgba(0, 0, 0, 0.3)",
                                    shadowBlur: 10,
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "rgba(255, 255, 255, 0.5)",
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "rgba(255, 255, 255, 0.5)",
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            type: "radar",
                            emphasis: {
                                lineStyle: {
                                    width: 4,
                                },
                            },
                            data: data[1]
                        },
                    ],
                };
            } else if (type == "bar" || type == "line") {
                option = {
                    backgroundColor: "#1d2d46",
                    xAxis: {
                        type: "category",
                        data: data[0],
                        triggerEvent: true,
                        axisLabel: {
                            show: true,
                            color: "white",
                            fontSize: 10,
                            interval: 0,
                            rotate: "15",
                        },
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            show: true,
                            color: "white",
                            fontSize: 15,
                        },
                    },
                    grid: {
                        bottom: "15%",
                    },
                    series: [
                        {
                            data: data[1],
                            type: type,
                            label: {
                                show: true,
                            },
                        },
                    ],
                };
            } else if (type == "bar1") {
                option = {
                    backgroundColor: "#1d2d46",
                    xAxis: {
                        type: "value",
                        axisLabel: {
                            show: true,
                            color: "white",
                            fontSize: 10,
                        },
                    },
                    yAxis: {
                        type: "category",
                        data: data[0],
                        axisLabel: {
                            show: true,
                            color: "white",
                            fontSize: 10,
                            interval: 0,
                            rotate: "45",
                        },
                    },
                    grid: {
                        left: "13%",
                    },
                    series: [
                        {
                            data: data[1],
                            type: "bar",
                            label: {
                                show: true,
                            },
                        },
                    ],
                };
            } else if (type == "pie") {
                for (let i = 0; i < data[0].length; i++) {
                    obj_tmp = {};
                    obj_tmp.name = data[0][i];
                    obj_tmp.value = data[1][i];
                    data_all.push(obj_tmp);
                }
                option = {
                    backgroundColor: "#1d2d46",
                    tooltip: {
                        trigger: "item",
                    },
                    series: [
                        {
                            type: "pie",
                            radius: "50%",
                            data: data_all,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                };
            } else if (type == "pie1") {
                for (let i = 0; i < data[0].length; i++) {
                    obj_tmp = {};
                    obj_tmp.name = data[0][i];
                    obj_tmp.value = data[1][i];
                    data_all.push(obj_tmp);
                }
                option = {
                    backgroundColor: "#1d2d46",
                    tooltip: {
                        trigger: "item",
                    },
                    series: [
                        {
                            type: "pie",
                            radius: ["40%", "70%"],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: "#fff",
                                borderWidth: 2,
                            },
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: "40",
                                    fontWeight: "bold",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            data: data_all,
                        },
                    ],
                };
            }
            this.myChart.clear();
            this.myChart.setOption(option);
        },
        define() {
            this.obj.img = this.myChart.getDataURL({
                backgroundColor: "transparent",
            });
            let obj = JSON.parse(JSON.stringify(this.obj));
            this.img_list.push(obj);
            this.reportInfo.img_list = this.img_list;
        },
        delete_img(index) {
            this.img_list.splice(index, 1);
        },
        preview_report() {
            this.dialogVisible = true;
            this.reportInfo.img_list.forEach((item, index) => {
                this.reportInfo.img_list[index]["index"] = index + 1;
            });
        },
        queryNewsByTheme(pageNum, pageSize, data, isAddNum) {
            post(
                "api/rest/fulltext/queryNewsByTheme?pageNum=" +
                pageNum +
                "&pageSize=" +
                pageSize,
                data
            ).then((data) => {
                if (isAddNum == 1) {
                    this.total = this.total + data.totals;
                }
                this.totalType.totalNews = data.totals;
                this.getNews = data.list;
                this.currentPage = pageNum;
            }).catch((err)=>{
                this.$message.warning(err.message);
            });
        },
        queryTwitterByTheme(pageNum, pageSize, data, isAddNum) {
            post(
                "api/rest/fulltext/queryTwitterByTheme?pageNum=" +
                pageNum +
                "&pageSize=" +
                pageSize,
                data
            ).then((data) => {
                if (isAddNum == 1) {
                    this.total = this.total + data.totals;
                }
                this.totalType.totalTwitter = data.totals;
                let arr_news_twitter = [];
                data.list.forEach((item) => {
                    arr_news_twitter.push({
                        title: "", //标题
                        txt: item.tweets_content, //内容
                        site_name: item.fullname, //来自
                        pubdate: item.timestr, //发布时间
                        snatch_time: item.input_time, //抓取时间
                        highLight: null, //高亮
                        cmtcnt: item.cmtcnt, //评论数
                        rpscnt: item.rpscnt, //转发数
                        atdcnt: item.atdcnt, //点赞数
                        isori: item.isori, //是否原创
                    });
                });
                this.getTwitter = arr_news_twitter;
                this.currentPage3 = pageNum;
            }).catch((err)=>{
                this.$message.warning(err.message);
            });
        },
        handleNodeClick(node) {
            this.total = 0;
            this.activeName = "1";
            this.click_id = 1;
            this.part = 1;
            this.isShow.forEach((item, index) => {
                this.isShow[index] = false;
            });
            if (node.children == undefined) {
                let listAll = JSON.parse(JSON.stringify(node)),
                    tmp = [],
                    tmp1 = [];
                node.characterClassify.forEach((item) => {
                    tmp.push(item.id);
                });
                node.source.forEach((item) => {
                    tmp1.push(item.id);
                });
                listAll.characterClassify = tmp;
                listAll.source = tmp1;
                this.themeNode = listAll;

                node.source.forEach((item) => {
                    if (item.name == "新闻") {
                        this.queryNewsByTheme(1, this.everySizeNews, listAll, 1);
                        this.isShow[0] = true;
                    }
                    //  else if (item.name == "TWITTER") {
                    //     this.queryTwitterByTheme(1, this.everySizeTwitter, listAll, 1);
                    //     this.isShow[2] = true;
                    // }
                });

            } else {
                this.isShow.forEach((item, index) => {
                    this.isShow[index] = false;
                });
                this.newsDimension = [];
            }
            this.obj =  {
                title: "",
                attribution: "",
                img: "",
            };
            this.img_list =  [];
        },
        analyse() {
            if(this.themeNode == null){
                return;
            }
            this.themeNode.dimensionRegion = "MEDIA";
            this.analyseInfo();
        },
        analyseInfo(){
            this.newsDimension = [[],[]];
            this.themeNode.sentimentType = "NEWS";
            post(
                "api/rest/fulltext/statisticsNewsRegion",
                this.themeNode
            )
            .then((res) => {
                if (res.length > 0) {
                    let listTmp = [[], []];
                    res.forEach((item) => {
                        listTmp[0].push(item.title);
                        listTmp[1].push(item.count);
                    });
                    this.newsDimension = listTmp;
                }
                 this.part = 2;
                    setTimeout(() => {
                    this.myChart = echarts.init(document.getElementById("myecharts"));
                    this.creat_echarts(this.newsDimension, this.type);
                }, 1000);
            }).catch((err)=>{
                this.$message.warning(err.message);
            });
        },
        discuss() {
            let _this = this;
            if(_this.getNews.length == 0){
                return;
            }
         
            _this.part = 3;

            //主题研判
            post("api/rest/fulltext/themeStudyDetermine", this.themeNode).then(res=>{
                this.descriptionInfo = res.descriptionInfo;
                _this.echatrs_ylqs(res.consensusTrend);
                _this.echatrs_sjfb(res.dataDistribute);
                _this.echatrs_rmcy(res.wordCloud);
                _this.echatrs_pjfx(res.evaluationAnalysis);
                this.jd_data = res.nodeAnalysisList.map(e=>{
                    let data = JSON.parse(e.meta);
                    return{
                        title: data.title,
                        source: data.site_name,
                        time: data.pubdate
                    }
                });
                this.yxl_table = res.influenceAnalysis.map(e=>{
                    return{
                        plnr: e.title,
                        num: e.score, 
                    }
                });
            }).catch(err=>{
                this.$message.warning(err.message);
            });

            //敌方资源
            this.dataDqxxRwxx = [];
            queryDynamicCharacter(1, 5, {
                mould: "敌方外网资源",
            })
            .then((res) => {
                this.dataDqxxRwxx = res.list;
            })
            .catch((err) => {
                console.log(err);
            });
            this.dataDqxxJgxx = [];
            queryDynamicOrganization(1, 5, {
                mould: "敌方外网资源机构",
            })
            .then((res) => {
                this.dataDqxxJgxx = res.list;
            })
            .catch((err) => {
                this.$message.warning(err.message);
            });

            //信息制品
            this.xxzp_table = [];
            queryFzjcTree('辅助决策文档').then(res => {
                for(let index = 0; index < res.length; index++){
                    const item = res[index];
                    let obj = {};
                    if(item.label == "信息制品"){
                        queryDoc(1, 10, { treeName: item.label, recursion: true, treeId: item.id }).then((data) => {
                           this.xxzp_table = data.list.map(e=>{
                               return{
                                   nr:e.name
                               }
                           });
                        });
                        break;
                    }
                }
            }).catch(e=>{
                this.$message.warning(e.message);
            });

            //措施建议
            this.csjy = "";
            queryResult(1, 1, JSON.parse(this.themeNode.keyword)[0]).then(res => {
                if(res.list.length >= 1){
                    let tmp = res.list[0].result;
                    this.csjy = JSON.parse(tmp).csjy.reduce((p,e)=>{p+=e.data.map(e=>e.content).join();return p},"");
                }
            });
            this.xgsj_table = this.getNews;

        },
        cancel_report() {
            this.part = 1;
            this.myChart.dispose();
        },
        goBack() {
            this.part = 1;
        },
        export_report() {
            if (this.reportInfo.title == "") {
                this.$message.error("标题不能为空！");
                return false;
            }
            exportWord(
                "static/word/report.docx",
                this.reportInfo,
                this.reportInfo.title,
                1
            );
            // this.dialogVisible = false;
        },
        handleCurrentChange(pageNum) {
            this.queryNewsByTheme(pageNum, this.everySizeNews, this.themeNode, 0);
            this.currentPage = pageNum;
        },
        handleCurrentChange3(pageNum) {
            this.queryTwitterByTheme(pageNum, this.everySizeTwitter, this.themeNode, 0);
            this.currentPage3 = pageNum;
        },
        send_report() {
            exportWord(
                "static/word/report.docx",
                this.reportInfo,
                this.reportInfo.title,
                0
            )
            .then((res) => {
                let condition = {
                    name: this.reportInfo.title,
                    description: this.reportInfo.content,
                    path: res,
                    type: "docx",
                };
                return post("api/rest/sentiment/addReport", condition);
            })
            .then((res) => {
                // let x = msgType
                return post("api/rest/user/sendNotification", {
                    type: msgType.REPORT,
                    text: "主题研判分析报告推送"
                });
            })
            .then(res=>{
                this.$message.success("发送成功！");
                this.dialogVisible = false;
            })
            .catch((err) => {
                this.$message.error(err);
            });
        },
        handleClick(tab, event) {
            this.click_id = tab.name;
        },
        show_newsInfo(item, index) {
            if (this.click_id == 1) {
                this.$router.push({ name: "新闻详情" + this.$route.meta.type_name, params: { key: item.id } });
            } else if (this.click_id == 3) {
                this.$router.push({
                    name: "Twitter详情" + this.$route.meta.type_name,
                    params: this.getTwitter[index],
                });
            }
        },
        managementTheme() {
            this.dialogVisibleZtgl = true;
        },
        handleSizeChangeNews(val) {
            this.everySizeNews = val;
            this.currentPage = 1;
            this.queryNewsByTheme(1, this.everySizeNews, this.themeNode, 0);
        },
        handleSizeChangeTwitter(val) {
            this.everySizeTwitter = val;
            this.currentPage3 = 1;
            this.queryTwitterByTheme(1, this.everySizeTwitter, this.themeNode, 0);
        },
        query_ztgl(){
            let _this = this;
            post("api/rest/sentiment/queryFolder").then((data) => {
                this.data = data;
                if(this.$route.params.zt_id!=undefined){
                    if(this.$route.params.zt_id.id!=undefined&&this.$route.params.zt_id.id!=''){
                        this.currentNodekey = this.$route.params.zt_id.id;
                        this.$nextTick(()=>{
                            this.$refs['popularTree'].setCurrentKey(this.currentNodekey+'');
                        });
                        this.handleNodeClick(this.$route.params.zt_id);
                    }
                }
            }).catch((err)=>{
                this.$message.warning(err.message);
            });
        },
        closeMoule(e){
            this.query_ztgl();
        },
        //数据分布
        echatrs_sjfb(data){
            let _this = this;
            _this.myChart_sjfb = echarts.init(document.getElementById("echatrs_sjfb"));
            let option = option_pie;
            option.series[0].data = data.map(e=>{return{name:e.title,value:e.count}});
            _this.myChart_sjfb.setOption(option);
            window.addEventListener("resize", function () {
                _this.myChart_sjfb.resize();
            });
        },
        //舆论趋势
        echatrs_ylqs(data){
            let _this = this;
            _this.myChart_ylqs = echarts.init(document.getElementById("echatrs_ylqs"));
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: "3%",
                    left: "center",
                    itemWidth:10,
                    itemHeight:10,
                    textStyle: {
                        fontSize: 12,
                        color: "#fff",
                    },
                   
                },
                grid: {
                    top: "25%",
                    left: "5%",
                    right: "5%",
                    bottom: "6%",
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.map(e=>e.title),
                    axisLabel: {
                        color: "#fff",
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "#fff",
                    },
                    splitLine:{
                        show:false
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'line',
                        stack: 'Total',
                        data: data.map(e=>e.count),
                    },
                     
                ]
            };
            _this.myChart_ylqs.setOption(option);
            window.addEventListener("resize", function () {
                _this.myChart_ylqs.resize();
            });

        },
        //评价分析
        echatrs_pjfx(data){
            let _this = this;
            this.myChart_pjfx = echarts.init(document.getElementById("echatrs_pjfx"));
            let option = option_pie;
            option.series[0].data = data.map(e=>{
                return{
                    value: e.count,
                    name: e.title
            } });
            _this.myChart_pjfx.setOption(option);
            window.addEventListener("resize", function () {
                _this.myChart_pjfx.resize();
            });
        },
        //热门词云
        echatrs_rmcy(data){
            let _this = this;
            if (_this.myChart_rmcy == null ||_this.myChart_rmcy == "" ||_this.myChart_rmcy == undefined){
                _this.myChart_rmcy = echarts.init(document.getElementById("echatrs_rmcy"));
            }
            let option = option_hot_word;
            let datas = [];
            if (data.length > 0) {
                data.forEach((item) => {
                    if(item.title != '' && item.title.length > 1){
                        datas.push(item);
                    }
                });
                let data_all = datas.slice(0,40);
                datas = [];
                data_all.forEach((item) => {
                    datas.push({ name: item.title, value: item.count });
                });
            }
            option.series[0].data = datas;
            _this.myChart_rmcy.setOption(option);
            window.addEventListener("resize", function () {
                _this.myChart_rmcy.resize();
            });
        },
        
    },
    mounted() {
        // this.query_ztgl();
    },
    activated(){
        let _this = this;
        _this.part = 1;
        _this.obj =  {
            title: "",
            attribution: "",
            img: "",
        };
        _this.img_list =  [];
        _this.query_ztgl();
    }
};
</script>

<style lang="scss">
#ztfx {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px;
    display: -webkit-box;
    box-sizing: border-box;
    .left-part {
        width: 17%;
        height: 100%;
        padding: 30px 10px;
        box-sizing: border-box;
        .left-part-button {
            width: 100%;
            height: 50px;
            text-align: center;
            .button-management {
                width: 100px;
                height: 30px;
                line-height: 30px;
                float: left;
                margin-left: calc(50% - 50px);
                margin-top: 10px;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/yqjc/40.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }
        .left-part-top {
            width: 100%;
            height: calc(99% - 50px);
            padding: 10px;
            overflow-y: auto;
            box-sizing: border-box;
            .el-tree {
                color: white;
                background: transparent;
                .el-tree-node__content {
                    height: 40px;
                }
            }
            .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
                background-color: #263b5d;
            }

            .el-tree > .el-tree-node > .el-tree-node__content {
                height: 40px;
                // background-color: #263b5d !important;
                background-image: url(../../assets/img/yqjc/24.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                .el-tree-node__label {
                    margin-left: calc(50% - 45px);
                }
            }
            .el-tree
                > .el-tree-node
                > .el-tree-node__content
                > .el-tree-node__label {
                font-size: 16px !important;
            }
            .el-tree > .el-tree-node > .el-tree-node__children {
                background-color: #1d2d46 !important;
            }
            .el-tree-node:focus > .el-tree-node__content {
                background-color: #263b5d !important;
            }

            .el-tree-node__content:hover,
            .el-tree-node__content:focus {
                background-color: #00648a96 !important;
            }
        }
    }
    .right-part {
        width: 83%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        display: -webkit-box;
        .ztfx-list {
            width: 100%;
            height: 100%;
            background: url('../../assets/img/yqjc/02.png') no-repeat;
            background-size: 100% 100%;
            .ztfx-list-title {
                width: 100%;
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                box-sizing: border-box;
                background: #263b5d;
                .new-num {
                    color: #09c69c;
                }
                .button-discuss {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    float: right;
                    margin-top: 5px;
                    font-size: 14px;
                    margin-right: 20px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/40.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                .button-preview {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    float: right;
                    margin-top: 5px;
                    font-size: 14px;
                    margin-right: 20px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/40.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
            }
            .ztfx-list-content {
                width: 100%;
                height: calc(100% - 40px);
                padding: 10px;
                color: white;
                overflow-y: auto;
                box-sizing: border-box;
                .el-tabs {
                    width: 100%;
                    height: 100%;
                    .el-tabs__header {
                        margin: 0px;
                        .el-tabs__nav-wrap::after {
                            background-color: #09c69c;
                        }
                        .el-tabs__item {
                            min-width: 100px;
                            padding: 0px;
                            text-align: center;
                            color: white;
                        }
                        // .el-tabs__item:focus,
                        // .el-tabs__item:focus:active {
                        //   color: red !important;
                        // }
                        .el-tabs__item.is-active {
                            background-color: #09c69c;
                        }
                        .el-tabs__active-bar {
                            background-color: #09c69c;
                        }
                    }
                    .el-tabs__content {
                        width: 100%;
                        height: calc(100% - 40px);
                        .el-tab-pane {
                            width: 100%;
                            height: 100%;
                            .content {
                                width: 100%;
                                height: calc(100% - 50px);
                                overflow-y: auto;
                                .content-news {
                                    border-bottom: 1px solid #156677;
                                    .content-news-first {
                                        display: flex;
                                        .news-title {
                                            width: 100%;
                                            height: 40px;
                                            line-height: 40px;
                                            font-size: 18px;
                                            padding-left: 20px;
                                            cursor: pointer;
                                            box-sizing: border-box;
                                            word-break: break-all;
                                            text-overflow: ellipsis;
                                            display: -webkit-box;
                                            -webkit-box-orient: vertical;
                                            -webkit-line-clamp: 1;
                                            overflow: hidden;
                                            color: #ffc800;
                                        }
                                    }
                                    .news-content {
                                        font-size: 18px;
                                        text-indent: 25px;
                                        margin-top: 10px;
                                        cursor: pointer;
                                        word-break: break-all;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-box-orient: vertical;
                                        -webkit-line-clamp: 2;
                                        overflow: hidden;
                                    }
                                    .news-info {
                                        width: 100%;
                                        height: 30px;
                                        margin-top: 10px;
                                        .news-info-sitename,
                                        .news-info-pubdate,
                                        .news-info-snatchtime {
                                            margin-left: 20px;
                                            span {
                                                color: #09c69c;
                                            }
                                        }
                                        .news-info-tool {
                                            width: 100px;
                                            float: right;
                                            i {
                                                cursor: pointer;
                                            }
                                            i:hover {
                                                color: #09c69c;
                                            }
                                        }
                                    }
                                }
                            }
                            .pagination-div {
                                width: 100%;
                                height: 50px;
                                .el-pagination {
                                    margin-top: 9px;
                                    text-align: right;
                                    .el-pagination__total {
                                        color: white;
                                    }
                                    .el-pagination__jump {
                                        color: white;
                                    }
                                }
                                .myPagination.is-background
                                    .el-pager
                                    li:not(.disabled).active {
                                    color: #fff;
                                    border: 1px solid #146a80;
                                    box-shadow: 0 0 10px #1b6097;
                                    background-color: #1d2d46;
                                }
                            }
                        }
                    }
                }
            }

            .button-preview {
                width: 100px;
                height: 30px;
                line-height: 30px;
                margin-left: calc(50% - 110px);
                margin-top: 10px;
                font-size: 14px;
                text-align: center;
                cursor: pointer;
                background-image: url(../../assets/img/yqjc/40.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
        }
        .left-part1 {
            width: 75%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            background-image: url(../../assets/img/yqjc/39.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .center-part-top-chart {
                width: 100%;
                height: 60px;
                // padding: 30px;
                box-sizing: border-box;
                // background-image: url(../../assets/img/yqjc/25.png);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                table {
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    td {
                        cursor: pointer;
                    }
                }
            }
            .center-part-top {
                width: 100%;
                height: 80px;
                line-height: 80px;
                padding-left: 40px;
                box-sizing: border-box;
                display: -webkit-box;
                // .el-input {
                //     background-image: url(../../assets/img/yqjc/24.png);
                //     background-repeat: no-repeat;
                //     background-size: 100% 100%;
                // }
                input {
                    width: 150px;
                    border: none;
                    background: transparent;
                }
            }
            .center-part-center {
                width: 100%;
                height: calc(100% - 290px);
            }
            .center-part-bottom {
                width: 100%;
                height: 150px;
                table {
                    width: 80%;
                    height: 100%;
                    color: white;
                    tr td {
                        text-align: center;
                        input {
                            height: 30px;
                            color: white;
                            border: 1px solid #137888;
                            background: transparent;
                        }
                        .button {
                            width: 100px;
                            height: 30px;
                            line-height: 30px;
                            margin-left: calc(50% - 50px);
                            cursor: pointer;
                            background-image: url(../../assets/img/yqjc/40.png);
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }
            }
        }
        .right-part1 {
            width: 25%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            .right-part-top {
                width: 100%;
                height: 50px;
                line-height: 50px;
                .el-input {
                    // width: 80%;
                    margin-left: 10%;
                    // background-image: url(../../assets/img/yqjc/24.png);
                    // background-repeat: no-repeat;
                    // background-size: 100% 100%;
                }
                input {
                    // width: 150px;
                    border: none;
                    background: transparent;
                }
            }
            .right-part-center {
                width: 100%;
                height: calc(100% - 100px);
                padding: 10px;
                overflow-y: auto;
                box-sizing: border-box;
                .right-part-center-img {
                    width: 100%;
                    height: 130px;
                    margin-top: 5px;
                    .right-part-center-img-title {
                        width: 80%;
                        height: 30px;
                        text-align: center;
                    }
                    .el-image {
                        width: 80%;
                        height: 100px;
                        box-shadow: 0 2px 12px 0 #ddd;
                    }
                    i {
                        float: right;
                        margin-top: 40px;
                        margin-right: 8px;
                        font-size: 25px;
                        color: #5470c6;
                    }
                }
            }
            .right-part-bottom {
                width: 100%;
                height: 50px;
                display: -webkit-box;
                .button-preview {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    margin-left: calc(50% - 110px);
                    margin-top: 10px;
                    font-size: 14px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/40.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                .button-cancel {
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    margin-left: 20px;
                    margin-top: 10px;
                    text-align: center;
                    cursor: pointer;
                    background-image: url(../../assets/img/yqjc/41.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
        .discuss-detail {
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
            .discuss-detail-choice {
                width: 100%;
                input {
                    width: 150px;
                    border: none;
                    background: transparent;
                }
            }
            .back-img {
                width: 40px;
                height: 40px;
                // float: right;
                // margin-top: -10px;
                // margin-right: 25px;
                cursor: pointer;
                position: fixed;
                right: 100px;
                top: 100px;
            }
            .discuss-detail-title{
                
                .discuss-detail-title-div{
                    width: 100%;
                    height: 140px;
                    float: left;
                    background-image: url(../../assets/img/yqjc/69.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                .discuss-detail-title-pub{
                    height: 300px;
                    float: left;
                    width: 100%;
                    .discuss-detail-title-left{
                        width: 70%;
                        height: 100%;
                        float: left;
                        background-image: url(../../assets/img/yqjc/70.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                    }
                    .discuss-detail-title-right{
                        width: calc(30% - 20px);
                        height: 100%;
                        float: left;
                        margin-left: 20px;;
                        background-image: url(../../assets/img/yqjc/71.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;

                    }
                }
                .pub-div-top1{
                    height: 42px;
                    line-height: 52px;
                    padding-left: 15px;
                    color: #42c5f2;
                    font-size: 14px;
                    font-weight: 900;
                    border-bottom: 2px solid #156674;
                }
                .pub-div-bottom1{
                    height: calc(100% - 66px);
                    padding: 10px 15px;
                    font-size: 15px;
                }
                .pub-div-top{
                    height: 55px;
                    line-height: 75px;
                    padding-left: 15px;
                    color: #42c5f2;
                    font-size: 14px;
                    font-weight: 900;
                    border-bottom: 2px solid #156674;
                }
                .pub-div-bottom{
                    height: calc(100% - 70px);
                    padding: 5px;
                    width: calc(100% - 10px);
                    overflow-x: auto;
                    ul{
                        height: calc(100% - 32px);
                        white-space: nowrap;
                        padding: 0;
                        li{
                            list-style: none;
                            width: 220px;
                            height: 200px;
                            display: inline-block;
                            font-size: 14px;
                            background-image: url(../../assets/img/yqjc/72.png);
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            color: #c9f8ff;
                            .div-top{
                                width: 68%;
                                margin-left: 17%;
                                font-size: 12px;
                                height: 65px;
                                margin-top: 24px;
                                white-space: break-spaces;
                                word-break: break-all;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 4;
                                overflow: hidden;
                            }
                            .div-center{
                                width: 68%;
                                margin-left: 17%;
                                font-size: 12px;
                                height: 21px;
                                line-height: 28px;
                                white-space: break-spaces;
                                word-break: break-all;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                                overflow: hidden;
                            }
                            .div-bottom{
                                width: 68%;
                                margin-left: 17%;
                                font-size: 12px;
                                height:20px;
                                line-height: 20px;
                                white-space: break-spaces;
                            }
                        }
                    }
                    .table-div {
                        width: 100%;
                        margin-left: 0px;
                        background: #ff000000;
                        .el-table__body-wrapper {
                            // height: 452px;
                            overflow-y: auto;
                        }
                        .cell {
                            text-align: center;
                        }
                        tr {
                            background-color: #1d2d46 !important;
                            color: #ffffff;
                        }
                        .el-table__header-wrapper{
                            div{
                                font-size: 14px;
                                font-weight: 900;
                            }
                        }
                        .el-table__body tr:hover > td{
                            background-color: #1d2d46 !important;
                        }
                        th{
                            padding: 6px 0;
                            background-color: #164d7a;
                            border-bottom: 1px solid #505152;
                        }
                        td{
                            border-bottom: 1px solid #505152;
                            div{
                                
                                font-size: 12px;
                            }
                        }
                        .el-table--enable-row-hover .el-table__body tr:hover > td {
                            background-color: #82848a78;
                        }
                        .el-table--fit {
                            background: none !important;
                            border: unset;
                        }
                        .el-table--group::after,
                        .el-table--border::after,
                        .el-table::before {
                            background-color: unset;
                        }
                    }
                    .el-table::before{
                        background-color: #ffffff00;
                    }
                    .el-tabs {
                        .el-tabs__header {
                            margin: 0;
                        }
                        .el-tabs__nav-wrap::after {
                            background-color: unset;
                        }
                        .el-table__body-wrapper {
                            height: calc(100% - 25px);
                            overflow-y: auto;
                            tr {
                                color: #7dcfff;
                                td {
                                    border-bottom: none;
                                    font-size: 12px;
                                }
                            }
                            .el-table__row--striped {
                                background: #68929e57;
                            }
                        }
                        .el-tabs__nav {
                            width: 180px;
                            margin-left: 5px;
                            .el-tabs__item {
                                width: calc(100% / 2);
                                color: #46ca9a;
                                text-align: center;
                                padding: 0;
                                font-size: 12px;
                                font-weight: 800;
                                letter-spacing: 2px;
                                height: 25px;
                                line-height: 26px;
                            }

                            .el-tabs__active-bar {
                                display: none;
                            }
                            .el-tabs__item:hover {
                                color: white;
                            }
                            .el-tabs__item.is-active {
                                color: white;
                                font-style: unset;
                                text-shadow: 0px 0px 10px #fff;
                                background-color: #29b783;
                                border-radius: 5px;
                            }
                        }
                        .el-tabs__content > div {
                            margin: 5px;
                            height: calc(100% - 36px);
                        }
                    }
                    .el-table--striped .el-table__body tr.el-table__row--striped td{
                        background: #1d2d46;
                    }
                }
            }
        }
    }

    //报告弹出框样式
    .report-info-name {
        text-align: center;
        input {
            width: 20%;
        }
    }

    .report-info-title {
        margin-top: 20px;
    }
    .report-info-content {
        height: 100px;
        margin-top: 20px;
        textarea {
            height: 100%;
        }
    }

    .report-info-chart {
        margin-top: 20px;
    }

    .report-info-chart-title {
        margin-top: 20px;
    }
    .report-info-chart-content {
        margin-top: 20px;
        text-align: center;
        border: 1px solid #ddd;
        img {
            width: 100%;
            height: 45%;
            margin-top: 20px;
        }
        .img-title {
            position: relative;
            top: -33px;
            color: white;
        }
        textarea {
            width: 90%;
            height: 100px;
            margin-left: 5%;
            margin-bottom: 20px;
        }
    }

    .dialogZtgl {
        & > .el-dialog {
            height: 60%;
            color: white;
            background: url(../../assets/img/main/background.png) no-repeat;
            background-size: 100% 100%;
        }
        .el-dialog__body{
            padding: 0px;
        }
    }
}
</style>
