<!--
 * @Version: 1.0
 * @Author: kery.chen
 * @Description: 总体概览左侧
 * @Date: 2021-11-30 11:08:50
-->
<template>
  <div class="container">
    <div class="module-container">
      <div class="section">
        <module-title>舆情走势图</module-title>
        <div id="lineBox"></div>
      </div>
      <div class="section section-superviseObject">
        <module-title>舆情信息量统计</module-title>
        <div class="Statistics">
          <div
            v-for="item in Statistics"
            :key="item.value"
            class="StatisticsInfo"
          >
            <img :src="item.url" alt="" />
            <span
              style="cursor: pointer"
              @click="clickDetails(item.name, item.type)"
            >
              {{ item.name }}</span
            >
            <!-- <el-progress
              :percentage="item.value || 0"
              :color="item.color"
            ></el-progress> -->
            <el-progress
              :percentage="Number(item.info) || 0"
              :color="item.color"
            ></el-progress>
            <div class="StatisticsText">
              {{ item.info | commaFilter }}
              <div class="StatisticsText-2">条</div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="section section-securityMonitor"
        style="padding-top: 35px"
        @mouseover="mouseOver"
        @mouseleave="mouseLeave"
      >
        <module-title
          >舆情分类
          <div slot="operate" class="btn-wrap">
            <div
              v-for="(item, idx) in sentimeentList.options"
              :key="idx"
              class="btn"
              :class="{ active: currentIndex === idx }"
              @click="currentIndex = idx"
            >
              {{ item }}
              <div :class="[idx === 0 ? 'topIP' : 'distributed']" />
            </div>
          </div>
        </module-title>
        <media-pie v-show="currentIndex === 0"></media-pie>
        <sentimentPie v-show="currentIndex === 1"></sentimentPie>
      </div>
      <div class="section section-attackRanking" style="padding-top: 35px">
        <module-title>动态筛选</module-title>
        <div style="padding-top: 35px">
          <div class="left-box">
            <div class="yellow"></div>
            <div class="blue"></div>
            <div class="sx"></div>
          </div>
          <div class="right_box">
            <div class="yellow_box">
              <div class="yI">监测信息总量</div>
              <!-- :value="newsCount"
                :step="oldNewsCount" -->
              <NumberGrow
                class="yV"
                :value="dtsx.jcxxCount"
                :step="oldNewsCount"
              ></NumberGrow>
            </div>
            <div class="blue_box">
              <div class="bI">排除信息量</div>
              <!-- :value="newsCount - warningCount" -->
              <NumberGrow
                class="bV"
                :value="dtsx.pcxxCount"
                :step="oldNewsCount - oldWarningCount"
              ></NumberGrow>
            </div>
            <div class="total">
              <div class="name">舆情预警</div>
              <div class="warn">
                {{ dtsx.yqyjCount || 0 }}
              </div>
              <div class="total_info">
                <!-- :value="warningCount" -->
                <NumberGrow
                  :value="dtsx.yqyjZb"
                  :step="oldWarningCount"
                ></NumberGrow>
              </div>
              <div class="percent">%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 舆情信息量统计 -->
    <el-dialog
      v-if="dialogStatus"
      :title="dialogTitle"
      class="screen-dialog"
      :visible.sync="dialogStatus"
      width="1820px"
      :modal-append-to-body="false"
      center
      :modal="false"
    >
      <div style="height: 760px">
        <el-table
          :data="currentPageData"
          height="740"
          highlight-current-row
          @row-click="rowClick"
        >
          <el-table-column
            label="序号"
            type="index"
            width="80"
            align="center"
          />
          <template v-for="item in tableHeader">
            <el-table-column
              v-if="item.key !== '序号'"
              :key="item.value"
              :prop="item.value"
              :style="item.width ? 'width:' + item.width + 'px' : ''"
              show-overflow-tooltip
              :label="item.key"
            >
            </el-table-column>
          </template>
        </el-table>
        <div style="text-align: right">
          <paginations
            v-show="total > 0"
            :total="total"
            :page.sync="queryData.pageNum"
            :limit.sync="queryData.pageSize"
            @pagination="showAttack"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <span>
          <el-button class="dialog-btn" @click="dialogClose">关 闭 </el-button>
        </span>
      </span>
    </el-dialog>
    <el-dialog
      v-if="dialogDetails"
      :title="dialogTitle"
      class="screen-dialog"
      :visible.sync="dialogDetails"
      width="1260px"
      :modal-append-to-body="false"
      center
      :modal="false"
    >
      <div style="padding: 0 0 0 80px; height: 730px; overflow: auto">
        <el-row>
          <el-col :span="3" class="detail_title">标题：</el-col>
          <el-col :span="21" class="detail_text">{{ rowDta.title }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="detail_title">内容：</el-col>
          <el-col :span="21" class="detail_text">{{
            rowDta.content || ""
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="detail_title">来源：</el-col>
          <el-col :span="21" class="detail_text">{{ rowDta.source }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="detail_title">时间：</el-col>
          <el-col :span="21" class="detail_text">{{ rowDta.dateTime }}</el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <span>
          <el-button class="dialog-btn" @click="dialogDetails = false"
            >关 闭</el-button
          >
        </span>
      </span>
    </el-dialog>
    <!-- <div class="left"></div> -->
  </div>
</template>

<script>
import { echartsJump } from "../../../../../public/static/echartsJump";
import ModuleTitle from "../../common/ModuleTitle.vue";
import sentimentPie from "./sentimentPie.vue";
import mediaPie from "./mediaPie.vue";
import NumberGrow from "./NumberGrow.vue";
import {
  publicOpinionTrendChart,
  statisticsOfPublicOpinionInformation,
  allProjects,
  newsList,
  opinionWarningDetail,
  newswarningList,
  loaclMedia,
} from "@/api/common";
import { title } from "../../../../settings";
//=======
import { yuqingChart, yuqingMsgStats, dtsxListGet } from "@/api/publicOpinion";
import { yuqingListA, getWlyq } from "@/api/consensusList";
import {
  listYqzs,
  listYqxxlnum,
  listYqxxltj,
  getYqxxltj,
} from "@/api/netWorkYq";

export default {
  components: {
    ModuleTitle,
    sentimentPie,
    mediaPie,
    NumberGrow,
  },
  filters: {
    commaFilter(target) {
      return String(target).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
    },
  },
  data() {
    return {
      currentIndex: 0,
      percentage: 40,
      Statistics: [
        // {
        //   value: 1,
        //   name: '监测信息量',
        //   info: '2454',
        //   color: '#47c4f9',
        //   url: require('@/assets/sentimeent/舆情icon-1.png')
        // },
        {
          value: 0,
          name: "本地相关信息量",
          info: "0",
          color: "#4799f8",
          url: require("@/assets/sentimeent/舆情icon-2.png"),
          type: 1,
        },
        {
          value: 0,
          name: "本地敏感信息量",
          info: "0",
          color: "#ff5432",
          url: require("@/assets/sentimeent/舆情icon-5.png"),
          type: 2,
        },
        {
          value: 0,
          name: "推送预警信息量",
          info: "0",
          color: "#ffed61",
          url: require("@/assets/sentimeent/舆情icon-4.png"),
          type: 3,
        },
        {
          value: 0,
          name: "聚焦本地媒体量",
          info: "0",
          color: "#20b028",
          url: require("@/assets/sentimeent/舆情icon-3.png"),
          type: 4,
        },
      ],
      Warning: [
        {
          value: 1,
          name: "舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情",
          time: "2021-12-13 13:30:20",
          from: "舆情来源",
        },
        {
          value: 2,
          name: "舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情",
          time: "2021-12-13 13:30:20",
          from: "舆情来源",
        },
        {
          value: 3,
          name: "舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情",
          time: "2021-12-13 13:30:20",
          from: "舆情来源",
        },
        {
          value: 4,
          name: "舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情",
          time: "2021-12-13 13:30:20",
          from: "舆情来源",
        },
      ],
      sentimeentList: {
        options: ["媒体类型", "涉事类型"],
      },
      dialogStatus: false,
      totalPage: 1, // 统共页数，默认为1
      total: 1, // 统共页数，默认为1
      currentPage: 1, // 当前页数 ，默认为1
      pageSize: 10, // 每页显示数量
      currentPageData: [], // 当前页显示内容
      tableHeader: [],
      tableData: [],
      dialogTitle: "",
      dialogDetails: false,
      rowDta: {},
      opinionTime: [],

      obj: {
        locNewsTotal: "本地相关信息量",
        // '监测信息量': '监测信息量',
        locNegTotal: "本地敏感信息量",
        推送预警量: "推送预警信息量",
        本地媒体量: "聚焦本地媒体量",
      },
      newsCount: 0,
      warningCount: 0,
      oldNewsCount: 0,
      oldWarningCount: 0,
      filterTime: "",
      //=================
      jcMsgData: {},
      queryData: {
        pageNum: 1,
        pageSize: 10,
        type: "",
        isStatus: 1,
      },
      //将敏感和非敏感区分开来
      positiveOpinion: [],
      negativeOpinion: [],
      allDate: [],
      date: [],
      newDate: [],
      dtsx: {},
    };
  },
  computed: {},
  watch: {
    newsCount(newVal, oldVal) {
      this.oldNewsCount = oldVal;
    },
    warningCount(newVal, oldVal) {
      this.oldWarningCount = oldVal;
    },
  },
  created() {
    // 获取舆情信息量统计
    this.getyqMsgStats();
  },
  destroyed() {
    clearInterval(this.attackTime); // 清除定时器
  },
  mounted() {
    this.changeBtn();
    // this.getFilterData();
    //舆情走势图
    this.getyqData();
  },
  beforeDestroy() {
    clearInterval(this.filterTime);
  },
  methods: {
    initTime() {
      const timeArr = [];
      for (let i = 0; i < 7; i++) {
        const time = new Date(new Date().setDate(new Date().getDate() + i - 7));
        const month = `${time.getMonth() + 1}`.slice(-2);
        const strDate = `${time.getDate()}`.slice(-2);
        timeArr.push(`${month}.${strDate}`);
      }
      return timeArr;
    },
    // getFilterData() {
    //   this.filterTime = setInterval(() => {
    //     this.getData();
    //   }, 600000);
    // },
    // getData() {
    //   statisticsOfPublicOpinionInformation().then((res) => {
    //     res["T_GET_PARAMETER[]"].forEach((item) => {
    //       if (item.NAME === "newsCount") {
    //         this.newsCount = item.CODE;
    //       }
    //       if (item.NAME === "warningCount") {
    //         this.warningCount = item.CODE;
    //       }
    //     });
    //   });
    // },
    // 自动切换
    // 鼠标经过暂停
    mouseOver() {
      clearInterval(this.attackTime);
    },
    // 鼠标离开开启
    mouseLeave() {
      this.changeBtn();
    },
    // 自动切换
    changeBtn() {
      this.attackTime = setInterval(() => {
        this.currentIndex === 0
          ? (this.currentIndex = 1)
          : (this.currentIndex = 0);
      }, 11000);
    },
    // 获取舆情走势图的数据
    getyqData() {
      listYqzs().then((res) => {
        console.log(res);
        this.allDate = res.rows;
        //已经排序过的数组
        this.allDate.sort(function (a, b) {
          return new Date(a.dateTime) - new Date(b.dateTime);
        });
        this.allDate.forEach((value) => {
          //把日期存储起来
          this.newDate.push(this.$moment(value.dateTime).format("MM-DD"));
          this.positiveOpinion.push(value.count1);
          this.negativeOpinion.push(value.count2);
        });
        this.lineBox();
      });
    },
    // 获取舆情信息量统计
    getyqMsgStats() {
      listYqxxlnum().then((res) => {
        this.Statistics[0].info = res.rows[0].count1;
        this.Statistics[1].info = res.rows[0].count2;
        this.Statistics[2].info = res.rows[0].count3;
        this.Statistics[3].info = res.rows[0].count4;
      });

      dtsxListGet({ isStatus: 1 }).then((res) => {
        this.dtsx = res.rows[0];
      });
    },
    // 折线图
    lineBox() {
      const myChart = this.$echarts.init(document.getElementById("lineBox"));
      const options = {
        grid: {
          top: "20%",
          bottom: "15%",
          left: "17%",
          right: "1%",
        },
        legend: {
          data: ["非敏感", "敏感"],
          top: "3%",
          right: "2%",
          itemHeight: 10,
          itemWidth: 10,
          textStyle: {
            padding: [10, 30, 10, 14],
            color: "rgba(250,250,250,1)",
            fontSize: 28,
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ",
          axisPointer: {
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: "#fff",
          textStyle: {
            color: "#5c6c7c",
          },
        },
        xAxis: {
          data: this.newDate,
          // data: ['7.23', '7.24', '7.25', '7.26', '7.27', '7.28', '7.29'],
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: "rgb(119,123,132,1)",
              width: 1,
            },
          },
          axisTick: {
            show: true, // 隐藏X轴刻度
            length: 0.2,
          },
          axisLabel: {
            show: true,
            interval: 0, // 强制显示文字
            // rotate: 40,
            padding: [20, 0, 0, 0],
            // margin: 15,
            // position: [100, 100],
            textStyle: {
              color: "#6ddefb", // X轴文字颜色
              fontSize: 28,
            },
          },
          grid: {
            left: "50%",
            bottom: "35%",
          },
          // splitArea: {
          //   interval: 0,
          //   show: true,
          //   areaStyle: {
          //     color: ['rgba(250,250,250,0.1)', 'rgba(250,250,250,0)']
          //   }
          // }
        },
        yAxis: [
          {
            name: "单位:件",
            min: 0,
            // max: 3500,
            splitNumber: 7,
            type: "value",
            nameTextStyle: {
              padding: [10, 0, 10, 0],
              color: "rgb(255,255,255,1)",
              fontSize: 28,
              left: 20,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(77, 128, 254, 0.4)",
                width: 1,
              },
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(250,250,250,1)",
                fontSize: 28,
              },
            },
          },
        ],
        series: [
          {
            name: "非敏感",
            type: "bar",
            barWidth: 12,
            itemStyle: {
              normal: {
                color: "#38c5ff",
              },
            },
            data: this.positiveOpinion,
            // data: [70, 50, 70, 60, 30, 40, 70]
          },
          {
            name: "敏感",
            type: "bar",
            barWidth: 12,
            itemStyle: {
              color: "#fc6a31",
            },
            data: this.negativeOpinion,
            // data: [30, 10, 70, 64, 60, 10, 20]
          },
        ],
      };
      myChart.setOption(options, true);
      echartsJump(myChart, options);
    },
    //点击显示弹出框列表
    clickDetails(val, type) {
      this.tableHeader = [
        { key: "标题", value: "title" },
        { key: "来源", width: 120, value: "source" },
        { key: "时间", width: 200, value: "dateTime" },
      ];
      this.queryData = {
        pageNum: 1,
        pageSize: 10,
        type,
        isStatus: 1,
      };
      this.dialogTitle = val;
      this.wlyqList();
    },
    // 获取网络舆情list表
    wlyqList() {
      listYqxxltj(this.queryData).then((res) => {
        this.currentPageData = res.rows;
        this.total = res.total;
        this.dialogStatus = true;
      });
    },
    //更换页数页码
    showAttack(e) {
      console.log(e);
      this.queryData.pageNum = e.page;
      this.queryData.pageSize = e.limit;
      this.wlyqList();
    },
    rowClick(row) {
      this.dialogDetails = true;
      getYqxxltj(row.id).then((res) => {
        this.rowDta = res.data;
      });
    },
    dialogClose() {
      this.dialogStatus = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.detail_title {
  font-size: 28px;
  font-family: SourceHanSansCN-Regular;
  color: #fff;
  margin: 20px 0;
}
.detail_text {
  font-size: 28px;
  font-family: SourceHanSansCN-Regular;
  color: #fff;
  margin: 20px 0;
}
::v-deep .el-progress-bar__outer {
  width: 531px;
  height: 12px;
  border-radius: 6px;
}
::v-deep .el-progress__text {
  display: none;
}
.container {
  width: 100%;
  height: 960px;
  position: relative;
  .module-container {
    width: 1482px;
    height: 960px;
    margin: 120px 0 0 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;

    .section {
      width: 720px;
      height: 415px;
      margin-bottom: 63px;
      // border: 1px solid #ddd;

      .txtPinyin {
        font-family: ConthraxSb-Regular;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 32px;
        letter-spacing: 1px;
        color: rgba(#fff, 0.5);
        margin-left: 10px;
      }
    }
  }
}
.left-box {
  position: relative;
}
.sx {
  width: 300px;
  height: 400px;
  background: url("~@/assets/sentimeent/筛选效果.png") no-repeat center;
  position: absolute;
  top: 0px;
  left: 95px;
}

.yellow {
  width: 400px;
  height: 60px;
  background: url("~@/assets/sentimeent/黄网.png") no-repeat center;
  position: absolute;
  left: 50px;
  top: 40px;
}

.blue {
  width: 313px;
  height: 47px;
  background: url("~@/assets/sentimeent/蓝网.png") no-repeat center;
  position: absolute;
  left: 100px;
  top: 130px;
}
.right_box {
  position: relative;
  .yellow_box {
    width: 243px;
    height: 54px;
    background: url("~@/assets/sentimeent/黄备注.png") no-repeat left;
    position: absolute;
    top: 21px;
    right: 40px;

    .yI {
      width: 200px;
      height: 19px;
      font-family: SourceHanSansCN-Regular;
      font-size: 32px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 19px;
      color: #ffffff;
      opacity: 0.9;
      position: absolute;
      right: 0px;
      left: 110px;
      top: 5px;
    }

    .yV {
      width: 83px;
      height: 23px;
      font-family: DIN-Medium;
      font-size: 32px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 23px;
      letter-spacing: 0px;
      color: #ffffff;
      position: absolute;
      right: 20px;
      top: 35px;
    }
  }

  .blue_box {
    width: 223px;
    height: 54px;
    background: url("~@/assets/sentimeent/蓝备注.png") no-repeat left;
    position: absolute;
    top: 110px;
    right: 90px;
    .bI {
      width: 160px;
      height: 19px;
      font-family: SourceHanSansCN-Regular;
      font-size: 32px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 54px;
      letter-spacing: 0px;
      color: #ffffff;
      opacity: 0.9;
      position: absolute;
      top: -8px;
      left: 130px;
    }
    .bV {
      width: 83px;
      height: 23px;
      font-family: DIN-Medium;
      font-size: 32px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 54px;
      letter-spacing: 0px;
      color: #ffffff;
      position: absolute;
      top: 36px;
      left: 150px;
    }
  }
}
.total {
  width: 292px;
  height: 141px;
  background: url("~@/assets/sentimeent/bg-筛选.png");
  position: absolute;
  right: 64px;
  top: 230px;
  .name {
    width: 120px;
    height: 23px;
    font-family: SourceHanSansCN-Regular;
    font-size: 28px;
    line-height: 54px;
    color: #ffffff;
    opacity: 0.8;
    position: absolute;
    left: 42px;
    top: 10px;
  }
  .warn {
    width: 106px;
    height: 43px;
    font-family: DIN-Medium;
    font-size: 60px;
    line-height: 54px;
    color: #ffe21c;
    position: absolute;
    top: 66px;
    left: 38px;
  }
  .total_info {
    width: 31px;
    height: 23px;
    font-size: 32px;
    line-height: 54px;
    color: #ffffff;
    position: absolute;
    top: 10px;
    right: 75px;
  }
  .percent {
    width: 21px;
    height: 18px;
    font-family: SourceHanSansCN-Regular;
    font-size: 24px;
    line-height: 54px;
    color: #ffffff;
    opacity: 0.5;
    position: absolute;
    top: 72px;
    right: 77px;
  }
}
.right {
  width: 140px;
  height: 833px;
  background: #000;
  position: absolute;
  background: url("~@/assets/sentimeent/右.png");
  top: 50px;
  left: 0px;
}
#lineBox {
  width: 720px;
  height: 400px;
  background: url("~@/assets/sentimeent/柱状-12月-bg.png") no-repeat;
}
.Statistics {
  width: 652px;
  height: 348px;
  margin: 39px 49px 0px 19px;
}
.StatisticsInfo {
  font-family: SourceHanSansCN-Regular;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  color: #ffffff;
  // opacity: 0.5;
  position: relative;
  margin-bottom: 24px;
}
.StatisticsText {
  text-align: right;
  width: 78px;
  font-family: DIN-Medium;
  font-size: 32px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #ffffff;
  position: absolute;
  right: 20px;
  top: 30px;
}
.StatisticsText-2 {
  font-family: SourceHanSansCN-Regular;
  font-size: 25px;
  font-weight: normal;
  font-stretch: normal;
  position: absolute;
  // opacity: 0.5;
  right: -30px;
  top: 5px;
}
.line {
  width: 642px;
  height: 348px;
  margin: 27px 0 0 30px;
  position: relative;
}
.lineInfo {
  width: 646px;
  height: 80px;
  background: url("~@/assets/sentimeent/bg-舆情预警.png") no-repeat center;
  position: relative;
  margin-bottom: 20px;
}
.lineText {
  width: 563px;
  height: 20px;
  margin: 0 28px 0 51px;
  font-family: SourceHanSansCN-Regular;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 20px;
  color: #fff27f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: 14px;
}
.lineIcon {
  width: 22px;
  height: 22px;
  position: absolute;
  background: url("~@/assets/sentimeent/icon-预警.png");
  top: 11px;
  left: 20px;
  z-index: 9999;
}
.lineTime {
  width: 202px;
  height: 16px;
  font-family: SourceHanSansCN-Regular;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  color: #ffffff;
  line-height: 16px;
  opacity: 0.5;
  position: absolute;
  bottom: 16px;
  left: 21px;
}
.lineFrom {
  width: 100px;
  height: 19px;
  font-family: SourceHanSansCN-Regular;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 19px;
  letter-spacing: 1px;
  color: #ffffff;
  opacity: 0.5;
  position: absolute;
  bottom: 14px;
  right: 21px;
}
.all {
  position: relative;
}
.left {
  width: 140px;
  height: 833px;
  background: #000;
  position: absolute;
  background: url("~@/assets/sentimeent/左.png") no-repeat center;
  top: 50px;
  right: 0px;
}

.btn-wrap {
  display: flex;
  cursor: pointer;
  .btn {
    width: 157px;
    height: 43px;
    text-align: center;
    line-height: 43px;
    font-size: 28px;
    color: rgba(#fff, 1);
    &.active {
      color: #fff;
      font-weight: bolder;
      .topIP {
        width: 104px;
        height: 10px;
        position: relative;
        left: 20px;
        top: -19px;
        // background: url('~@/assets/sentimeent/tab-选中.png');
        // background-size: 100% 100%;
      }
      .distributed {
        width: 107px;
        height: 10px;
        position: relative;
        left: 24px;
        top: -19px;
        // background: url('~@/assets/sentimeent/tab-选中.png');
        // background-size: 100% 100%;
      }
    }
  }
}
.screen-dialog {
  .dialog-btn {
    background: url("~@/assets/dialog/btn-bg.png") no-repeat;
    background-size: 100% 100%;
    width: 160px;
    height: 50px;
    font-family: SourceHanSansCN-Regular;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 10px;
    letter-spacing: 2px;
    color: #ffffff;
  }
  ::v-deep .el-button {
    border: none;
  }
  .dialog-footer :hover {
    .dialog-btn {
      background: url("~@/assets/dialog/btn-bg-act.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  ::v-deep .el-dialog__header {
    background: rgba(255, 255, 255, 0);
    text-align: left;
    padding-left: 40px;
    .el-dialog__title {
      font-family: SourceHanSansCN-Bold, san-serif;
      font-size: 24px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 38px;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }
  ::v-deep .el-dialog {
    background: url("../../../../assets/dialog/弹窗背景-一般.png") no-repeat;
    width: 1820px;
    height: 950px;
    background-size: 100% 100%;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 0;
  }
  ::v-deep .el-dialog__footer {
    background: rgba(255, 255, 255, 0);
  }
  ::v-deep .el-table th.el-table__cell {
    background-color: rgba(0, 0, 0, 0);
  }
  ::v-deep .el-table {
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    border: none;
  }
  ::v-deep.el-table::before {
    display: none;
  }
  ::v-deep .el-table tr {
    background-color: rgba(0, 0, 0, 0);
  }
  ::v-deep .el-table .cell {
    font-size: 26px;
    height: 40px;
    line-height: 40px;
  }
  ::v-deep .el-table__header {
    background-color: rgba(76, 162, 248, 0.2);
    color: #fff;
  }
  ::v-deep .el-table__row {
    font-family: SourceHanSansCN-Regular, sans-serif;
    font-size: 26px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #b7dfff;
    background-color: rgba(106, 184, 255, 0.2);
    border: solid 1px #6ab8ff;
  }
  ::v-deep .el-table {
    tbody tr {
      &:hover {
        td {
          background-color: rgba(228, 223, 223, 0.3) !important;
        }
      }
    }
  }
  ::v-deep .el-table td.el-table__cell {
    border: none;
  }
  ::v-deep .el-table .cell {
    color: #fff;
  }
  ::v-deep .el-table th.el-table__cell {
    border: none;
  }
}
.screen-dialog ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: rgba(#1fb6e5, 0.06);
}
::v-deep .el-pagination__total {
  color: #fff;
}
::v-deep .el-input .el-input--mini .el-input--suffix {
  background: transparent;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner {
  background: transparent;
  border: none;
  color: #fff;
}
::v-deep .el-select-dropdown__list {
  background: #000;
}
::v-deep .el-pagination button:disabled {
  background-color: transparent;
}
::v-deep .el-pagination .btn-next {
  background-color: transparent;
  color: #fff;
}
::v-deep .el-pager {
  color: #fff !important;
}
::v-deep .el-pager li {
  background-color: transparent;
}
::v-deep .el-pagination__editor.el-input .el-input__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}
::v-deep .el-pagination__jump {
  color: #fff;
}
::v-deep .el-select-dropdown .el-popper {
  background-color: #132d56 !important;
}
.dialog-title {
  text-align: center;
  width: 756px;
  margin: 0 auto;
  font-family: SourceHanSansCN-Bold;
  font-size: 36px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 38px;
  letter-spacing: 0;
  color: #ffe850;
}
.dialog-explain {
  margin-top: 39px;
  height: 125px;
  background: url("~@/assets/dialog/信息-bg.png") no-repeat 100% 100%;
}
.dialog-content {
  width: 1073px;
  max-height: 500px;
  margin: 20px auto;
  font-family: SourceHanSansCN-Medium;
  font-size: 30px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 50px;
  letter-spacing: 2px;
  color: #ffffff;
}
</style>
<style lang="scss">
.select_bottom {
  border: none !important;
  .el-scrollbar {
    background-color: rgb(0, 23, 53);
  }
  .el-select-dropdown__item {
    //background: red;
    color: #fff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: rgb(12, 46, 97);
    color: #fff;
  }
}
</style>
