taicangZongzhi/src/views/privateOrder/sentiment/components/componentRight.vue

<!--
 * @Version: 1.0
 * @Author: kery.chen
 * @Description: 总体概览右侧
 * @Date: 2021-11-30 11:08:50
 * @LastEditTime: 2022-11-15 14:07:36
 * @FilePath     : \\tcingiocpro\\src\\views\\privateOrder\\sentiment\\components\\componentRight.vue
-->
<template>
  <div class="container">
    <div class="module-container">
      <div class="section">
        <module-title>词云</module-title>
        <word-cloud></word-cloud>
      </div>
      <div class="section">
        <module-title
          >舆情预警
          <div slot="operate" class="btn-warning">
            <i @click="previousWarning"></i>
            <i @click="nextWarning"></i>
          </div>
        </module-title>
        <div class="warningBox" @click="openDetailLog()">
          <div class="warningBox-BJ"></div>
          <div class="warning-title" :title="currentWarningObj.sentimentName">
            {{ currentWarningObj.sentimentName }}
          </div>
          <div
            class="warning-content"
            :title="currentWarningObj.sentimentContent"
          >
            {{ currentWarningObj.sentimentContent }}
          </div>
          <div class="warning-time">{{ currentWarningObj.publishTime }}</div>
          <div class="warning-source">
            {{ $filterDict("tc_yq_media", currentWarningObj.source) }}
          </div>
        </div>
      </div>
      <div class="section" style="padding-top: 35px">
        <module-title>舆情报告</module-title>
        <div class="report">
          <div class="report-top">
            <div
              class="Tips"
              style="cursor: pointer"
              @click="reportDetails('提示单')"
            >
              <i class="report-icon"></i>
              <div style="display: inline-block; margin: 33px 0 0 14px">
                <div class="report-title">提示单(件)</div>
                <div class="report-num">{{ tsdNum }}</div>
              </div>
            </div>
            <div
              class="Transfer"
              style="cursor: pointer"
              @click="reportDetails('转办单')"
            >
              <i class="report-icon"></i>
              <div style="display: inline-block; margin: 33px 0 0 14px">
                <div class="report-title">转办单(件)</div>
                <div class="report-num">{{ zbdNum }}</div>
              </div>
            </div>
          </div>
          <div class="report-bottom">
            <div class="Special-report" @click="reportDetails('专报')">
              <div class="Special-icon"></div>
              <div class="Special-title">专报</div>
              <div class="Special-num">{{ Transfer[0].bg }}</div>
            </div>
            <div class="Monthly-report" @click="reportDetails('月报')">
              <div class="Monthly-icon"></div>
              <div class="Monthly-title">月报</div>
              <div class="Monthly-num">{{ Transfer[1].bg }}</div>
            </div>
            <div class="depth-report" @click="reportDetails('深度报告')">
              <div class="depth-icon"></div>
              <div class="depth-title">深度报告</div>
              <div class="depth-num">{{ Transfer[2].bg }}</div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="section"
        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>
        <div v-if="currentIndex === 1">
          <div class="monitor-box">
            <div class="monitor-title">
              <span>舆情标题</span>
              <span>部门名称</span>
              <span>舆情状态</span>
            </div>
            <vue-seamless-scroll
              :data="turnDetailsList"
              :class-option="classOption"
              class="monitorScroll"
            >
              <div
                v-for="(item, idx) in turnDetailsList"
                :key="idx"
                class="monitor-list"
              >
                <!-- @click="rowClick(item.attUrl,'details')" -->
                <span :title="item.sentimentName">{{
                  item.sentimentName
                }}</span>
                <span :title="item.depName">{{ item.depName }}</span>
                <span
                  :title="item.opinionStatusName"
                  :style="activation(item.sentimentState)"
                  >{{ $filterDict("tc_yq_state", item.sentimentState) }}</span
                >
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
        <transfer-volume v-show="currentIndex === 0"></transfer-volume>
      </div>
    </div>
    <!-- 舆情转办单弹窗 -->
    <el-dialog
      v-if="dialogStatus"
      :title="dialogTitle"
      class="screen-dialog"
      :visible.sync="dialogStatus"
      width="1800px"
      :modal-append-to-body="false"
      center
      :modal="false"
    >
      <div style="height: 630px">
        <el-table
          :data="currentPageData"
          height="700"
          highlight-current-row
          @row-click="rowClick"
        >
          <el-table-column
            label="序号"
            type="index"
            :index="
              (index) => {
                return index + 1 + (currentPage - 1) * pageSize;
              }
            "
            width="80"
            align="center"
          />
          <template v-for="item in tableHeader">
            <el-table-column
              v-if="item !== '序号'"
              :key="item"
              prop="sentimentName"
              align="center"
              show-overflow-tooltip
              label="标题名称"
            >
            </el-table-column>
          </template>
        </el-table>
        <div style="text-align: right">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            popper-class="select_bottom"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <span>
          <el-button
            style="margin-top: 112px"
            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="1960px"
      :modal-append-to-body="false"
      center
      :modal="false"
    >
      <div
        style="
          height: 760px;
          overflow: auto;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <div
          v-if="fileExtension === 'docx' || fileExtension === 'doc'"
          ref="file1"
          class="file-content"
        ></div>
        <div v-if="fileExtension === 'pdf'" class="file-content">
          <!-- <pdf
            v-for="i in numPages"
            ref="pdf"
            :key="i"
            :src="pdfUrl"
            :page="i"
          ></pdf> -->
          <iframe style="height: 100%; width: 100%" :src="pdfUrl"></iframe>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <span>
          <el-button class="dialog-btn" @click="dialogDetails = false"
            >关 闭</el-button
          >
        </span>
      </span>
    </el-dialog>
    <el-dialog
      v-if="currentWarningObjShow"
      title=""
      class="screen-dialog"
      :visible.sync="currentWarningObjShow"
      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">
            {{ currentWarningObj.sentimentName }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="detail_title">内容：</el-col>
          <el-col :span="21" class="detail_text">{{
            currentWarningObj.sentimentContent
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="detail_title">来源：</el-col>
          <el-col :span="21" class="detail_text">{{
            $filterDict("tc_yq_media", currentWarningObj.source)
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="detail_title">时间：</el-col>
          <el-col :span="21" class="detail_text">{{
            currentWarningObj.publishTime
          }}</el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <span>
          <el-button class="dialog-btn" @click="currentWarningObjShow = false"
            >关 闭</el-button
          >
        </span>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";
const docx = require("docx-preview");
import axios from "axios";
window.JSZip = require("jszip");
import vueSeamlessScroll from "vue-seamless-scroll";
import ModuleTitle from "../../common/ModuleTitle.vue";
import TransferVolume from "./TransferVolume.vue";
import WordCloud from "./WordCloud.vue";
import pdf from "vue-pdf";
import { warningList } from "./warningMock";
import {
  opinionWarningList,
  opinionWarningDetail,
  getTsdNum,
  getZbdNum,
  getyqTsd,
  getyqZbd,
  getyqZbdDetails,
} from "@/api/common";
// import tableObject from '@/views/privateOrder/positiveEnergy/components/data.json'
//================
import { yuqingListA } from "@/api/consensusList";
import { yqbg } from "@/api/publicOpinion";

export default {
  components: {
    vueSeamlessScroll,
    ModuleTitle,
    TransferVolume,
    WordCloud,
    pdf,
  },
  filters: {
    commaFilter(target) {
      return String(target).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
    },
  },
  data() {
    return {
      warningChangeList: warningList,
      currentWarningObjShow: false,
      currentWarningIndex: 0,
      turnTime: null,
      tsdNum: 461,
      zbdNum: 475,
      Transfer: [
        {
          type: 1,
          bg: 0,
        },
        {
          type: 2,
          bg: 0,
        },
        {
          type: 3,
          bg: 0,
        },
      ],

      turnDetailsList: [],
      sentimeentList: {
        options: ["转办量", "转办详情"],
      },
      currentIndex: 0,
      dialogStatus: false,
      totalPage: 1, // 统共页数，默认为1
      total: 1, // 统共页数，默认为1

      currentPageData: [], // 当前页显示内容
      tableHeader: [],
      tableData: [],
      dialogTitle: "",
      dialogDetails: false,
      rowDta: {},
      // 当前选中文件类型
      fileExtension: "",
      numPages: 1,
      currentWarningObj: {},
      //===================
      pdfUrl: "",
      formData: {
        pageSize: 1,
        pageNum: 1,
      },
      //总数
      yqTotal: 0,
      bgForm: {
        pageNum: 1,
        pageSize: 10,
      },
      newbgForm: {},
      currentPage: 1, // 当前页数 ，默认为1
      pageSize: 10, // 每页显示数量
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    activation() {
      return (status) => {
        if (status === 1) {
          return { color: "#ff4c4c" };
        } else if (status === 2) {
          return { color: "#ff8839" };
        } else if (status === 3) {
          return { color: "#35ca29" };
        }
        // if (status === '待处理') {
        //   return { color: '#ff4c4c' }
        // } else if (status === '待审核') {
        //   return { color: '#ff8839' }
        // } else if (status === '待录入') {
        //   return { color: '#ffed1f' }
        // } else if (status === '待核查') {
        //   return { color: '#53edff' }
        // } else if (status === '已归档') {
        //   return { color: '#35ca29' }
        // }
        // const myMap = new Map([
        //   ["未处理", { color: "#ffed1f" }],
        //   ["待舆情专员核查", { color: "#53edff" }],
        //   ["已归档", { color: "#35ca29" }],
        // ]);
        // return myMap.get(status) || { color: "#ff8839" };
      };
    },
    activationName() {
      return (status) => {
        const myMap = new Map([
          ["待坐席员录入处理结果", "待处理"],
          ["待舆情专员核查", "待核查"],
        ]);
        return myMap.get(status) || status;
      };
    },
  },
  destroyed() {
    clearInterval(this.turnTime); // 清除定时器
  },
  mounted() {
    this.changeBtn();
    this.getDataList();
    this.getOneList();
  },
  methods: {
    getDataList() {
      yqbg().then((res) => {
        this.tsdNum = res.data.reminder;
        this.zbdNum = res.data.isturn;
        res.data.reportList.forEach((value, index) => {
          this.Transfer.forEach((value1, index1) => {
            if (value.sentimentReportType == value1.type) {
              this.Transfer[index1].bg = value.count;
              return;
            }
          });
        });
        console.log(this.Transfer);
      });
      //获取舆情列表
      yuqingListA().then((res) => {
        this.turnDetailsList = res.rows;
      });
    },
    //获取舆情预警单个列表
    getOneList() {
      yuqingListA(this.formData).then((res) => {
        console.log(res);
        this.yqTotal = res.total;
        this.currentWarningObj = res.rows[0];
      });
    },
    openDetailLog() {
      this.currentWarningObjShow = true;
    },
    // 上一条舆情预警信息
    previousWarning() {
      if (this.formData.pageNum <= 1) {
        this.formData.pageNum = this.yqTotal;
      } else if (this.formData.pageNum <= this.yqTotal) {
        this.formData.pageNum--;
      }
      this.getOneList();
    },
    // 下一条舆情预警信息
    nextWarning() {
      if (this.formData.pageNum < this.yqTotal) {
        this.formData.pageNum++;
      } else if (this.formData.pageNum == this.yqTotal) {
        this.formData.pageNum = 1;
      }
      this.getOneList();
    },
    // 鼠标经过暂停
    mouseOver() {
      clearInterval(this.turnTime);
    },
    // 鼠标离开开启
    mouseLeave() {
      this.changeBtn();
    },
    // 自动切换
    changeBtn() {
      this.turnTime = setInterval(() => {
        this.currentIndex === 0
          ? (this.currentIndex = 1)
          : (this.currentIndex = 0);
      }, 11000);
    },
    async reportDetails(val) {
      this.tableHeader = [{ label: "标题名称", prop: "attName" }];
      this.dialogTitle = val;
      if (val === "提示单") {
        this.newbgForm = {
          ...this.bgForm,
          reminder: 1,
        };
      } else if (val === "转办单") {
        this.newbgForm = {
          ...this.bgForm,
          isturn: 1,
        };
      } else if (val === "专报") {
        this.newbgForm = {
          ...this.bgForm,
          sentimentReportType: 1,
        };
      } else if (val === "月报") {
        this.newbgForm = {
          ...this.bgForm,
          sentimentReportType: 2,
        };
      } else if (val === "深度报告") {
        this.newbgForm = {
          ...this.bgForm,
          sentimentReportType: 3,
        };
      }
      this.getyqbgType();
    },
    //获取列表
    getyqbgType() {
      yuqingListA(this.newbgForm).then((res) => {
        this.currentPageData = res.rows;
        this.total = res.total;
        this.dialogStatus = true;
      });
    },
    handleSizeChange(val) {
      this.newbgForm.pageSize = val;
      this.getyqbgType();
    },
    handleCurrentChange(val) {
      this.newbgForm.pageNum = val;
      this.getyqbgType();
    },
    rowClick(row) {
      if (!row.fileName && !row.fileUrl) return;
      let str = row.fileUrl.split(',')
      let str1 = str[0].split('.')
      this.fileExtension = str1[1];
      if (this.fileExtension == "pdf") {
        this.pdfUrl = process.env.VUE_APP_BASE_API2 + str[0];
        this.dialogDetails = true;
      } else if (
        this.fileExtension === "docx" ||
        this.fileExtension === "doc"
      ) {
        axios({
          method: "get",
          responseType: "blob", // 设置响应文件格式
          url: process.env.VUE_APP_BASE_API2 + str[0],
        }).then(({ data }) => {
          if (data) {
            this.dialogDetails = true;
            this.$nextTick(() => {
              docx.renderAsync(data, this.$refs.file1); // 渲染到页面预览
            });
          }
        });
      }
    },
    // 文件流转url
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL !== undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(file);
        } catch (error) {
          console.log(error);
        }
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file);
        } catch (error) {
          console.log(error);
        }
      }
      return url;
    },
    dialogClose() {
      this.dialogStatus = false;
    },
    getData() {
      const d = new Date();
      const month =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      const day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
      const times = d.getFullYear() + "-" + month + "-" + day;
      return times;
    },
  },
};
</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;
}
.container {
  width: 100%;
  height: 960px;
  position: relative;
  .module-container {
    width: 1482px;
    height: 960px;
    margin: 120px 0 0 58px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;

    .section {
      width: 720px;
      height: 445px;
      margin-bottom: 35px;
      // 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;
      }
    }
  }
}
.btn-warning {
  width: 106px;
  height: 38px;
  display: flex;
  align-content: space-between;
  i {
    width: 38px;
    height: 38px;
    //border: 1px solid #1fb6e5;
  }
  :nth-child(1) {
    background: url("~@/assets/sentimeent/arrow-lt.png") no-repeat;
    margin-right: 10px;
    cursor: pointer;
  }
  :nth-child(2) {
    background: url("~@/assets/sentimeent/arrow-rt.png") no-repeat;
    cursor: pointer;
  }
  :nth-child(1):hover {
    background: url("~@/assets/sentimeent/arrow-lt-act.png") no-repeat;
    margin-right: 10px;
    cursor: pointer;
  }
  :nth-child(2):hover {
    background: url("~@/assets/sentimeent/arrow-rt-act.png") no-repeat;
    cursor: pointer;
  }
}
.warningBox {
  width: 712px;
  height: 392px;
  margin-top: 40px;
  background: url("~@/assets/sentimeent/舆情报警-bg.png") no-repeat;
  background-size: 100% 100%;
  .warning-title {
    text-align: center;
    width: 480px;
    font-family: SourceHanSansCN-Bold, sans-serif;
    font-size: 34px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 80px;
    letter-spacing: 0;
    color: #ffffff;
    margin: 0 auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .warning-content {
    margin: 40px 12px 0 249px;
    width: 437px;
    height: 160px;
    font-family: SourceHanSansCN-Medium;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 40px;
    letter-spacing: 0;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; // div超过三行之后出现省略号
    -webkit-box-orient: vertical;
  }
  .warning-time {
    display: inline-block;
    width: 254px;
    margin-left: 57px;
    margin-top: 27px;
    font-family: DIN-Medium;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 80px;
    letter-spacing: 0px;
    color: #68cff9;
  }
  .warning-source {
    position: absolute;
    text-align: right;
    right: 100px;
    width: 400px;
    margin-top: 28px;
    display: inline-block;
    font-family: SourceHanSansCN-Regular;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 80px;
    letter-spacing: 1px;
    color: #68cff9;
  }
}
.warningBox-BJ {
  position: absolute;
  top: 190px;
  right: 613px;
  width: 100px;
  height: 100px;
  background: url("~@/assets/sentimeent/warning.png") no-repeat 100% 100%;
}
.worldClound {
  width: 651px;
  height: 316px;
  margin: 50px 43px 0 26px;
  background: url("~@/assets/sentimeent/icon-正面.png") no-repeat center;
  position: relative;
}
.monitor-box {
  width: 720px;
  height: 410px;
  margin-top: 34px;
  overflow: hidden;
  .monitor-title {
    width: 720px;
    height: 40px;
    line-height: 40px;
    display: grid;
    grid-template-columns: 325px 230px 170px;
    span {
      font-family: SourceHanSansCN-Regular;
      font-size: 28px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0;
      color: #b7dfff;
    }
    span:nth-child(1) {
      margin-left: 28px;
    }
  }
  .monitorScroll {
    width: 720px;
    height: 360px;
    overflow: hidden;
  }
  .monitor-list {
    cursor: pointer;
    margin-top: 12px;
    width: 720px;
    height: 100px;
    line-height: 100px;
    display: grid;
    grid-template-columns: 320px 240px 170px;
    background: rgb(19, 52, 88, 0.3) url("~@/assets/sentimeent/bg-部门转办.png")
      no-repeat;
    background-size: 100% 100%;
    span {
      font-family: SourceHanSansCN-Regular;
      font-size: 28px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span:nth-child(1) {
      margin-left: 25px;
    }
    span:nth-child(2) {
      margin-left: 1px;
    }
  }
}
.report {
  width: 723px;
  margin-top: 24px;
}
.report-top {
  display: flex;
  align-content: space-between;
  > div {
    width: 344px;
    height: 160px;
    background: url("~@/assets/sentimeent/舆情报告-bg-top.png") no-repeat 100%
      100%;
  }
  :nth-child(1) {
    margin-right: 8px;
  }
}
.Tips .report-icon {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: url("~@/assets/sentimeent/icon-提示单.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 49px;
}
.Transfer .report-icon {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: url("~@/assets/sentimeent/icon-转办单.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 49px;
}
.report-title {
  font-family: SourceHanSansCN-Medium;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 54px;
  letter-spacing: 0px;
  color: #ffffff;
}
.report-num {
  font-family: DIN-Bold;
  font-size: 70px;
  font-weight: normal;
  font-stretch: normal;
  text-align: center;
  line-height: 54px;
  letter-spacing: 2px;
  color: #ffe21c;
}
.report-bottom {
  width: 696px;
  height: 214px;
  margin-top: 9px;
  background: url("~@/assets/sentimeent/舆情报告-bg-btm.png") no-repeat 100%
    100%;
  display: flex;
  align-content: space-between;
}
.Special-report {
  cursor: pointer;
  width: 230px;
  text-align: center;
  .Special-icon {
    display: inline-block;
    width: 70px;
    height: 70px;

    background: url("~@/assets/sentimeent/icon-专报.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 34px;
  }
  .Special-title {
    font-family: SourceHanSansCN-Medium;
    font-size: 32px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 54px;
    letter-spacing: 0;
    color: #68cff9;
  }
  .Special-num {
    font-family: DIN-Medium;
    font-size: 60px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 54px;
    letter-spacing: 0px;
    color: #ffffff;
  }
}
.Monthly-report {
  cursor: pointer;
  width: 230px;
  text-align: center;
  .Monthly-icon {
    display: inline-block;
    width: 70px;
    height: 70px;

    background: url("~@/assets/sentimeent/icon-月报.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 34px;
  }
  .Monthly-title {
    font-family: SourceHanSansCN-Medium;
    font-size: 32px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 54px;
    letter-spacing: 0;
    color: #68cff9;
  }
  .Monthly-num {
    font-family: DIN-Medium;
    font-size: 70px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 54px;
    letter-spacing: 0px;
    color: #ffffff;
  }
}
.depth-report {
  cursor: pointer;
  width: 230px;
  text-align: center;
  .depth-icon {
    display: inline-block;
    width: 70px;
    height: 70px;
    background: url("~@/assets/sentimeent/icon-深度报告.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 34px;
  }
  .depth-title {
    font-family: SourceHanSansCN-Medium;
    font-size: 32px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 54px;
    letter-spacing: 0;
    color: #68cff9;
  }
  .depth-num {
    font-family: DIN-Medium;
    font-size: 70px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 54px;
    letter-spacing: 0px;
    color: #ffffff;
  }
}
//.Transfer {
//  width: 696px;
//  height: 120px;
//  margin: 24px 27px 0 0;
//  background: url('~@/assets/sentimeent/bg-舆情预警.png') no-repeat center;
//  position: relative;
//  .bgImg {
//    width: 72px;
//    height: 72px;
//    background: url('~@/assets/sentimeent/icon-转办单.png') no-repeat center;
//    position: absolute;
//    left: 35px;
//    top: 24px;
//  }
//}
.TransferOrder {
  width: 130px;
  height: 26px;
  font-size: 23px;
  color: #ffffff;
  line-height: 26px;
  position: absolute;
  left: 120px;
  top: 25px;
}
.TransferOrderInfo {
  width: 131px;
  height: 36px;
  font-size: 40px;
  line-height: 36px;
  color: #fff36f;
  position: absolute;
  left: 120px;
  top: 60px;
}

.allbox {
  height: 90px;
  width: 420px;
  position: absolute;
  right: 25px;
  top: 22px;
}
.smallBox {
  height: 90px;
  width: 130px;
  display: inline-block;
}
.boxInfo {
  width: 80px;
  height: 19px;
  font-size: 20px;
  line-height: 19px;
  text-align: center;
  color: #ffffff;
  opacity: 0.5;
  margin: 10px auto;
}
.boxValue {
  width: 88px;
  height: 28px;
  font-size: 32px;
  line-height: 28px;
  text-align: center;
  margin: 10px auto;
  color: #ffffff;
}
.section-monitor-bottom {
  width: 696px;
  height: 229px;
  display: flex;
  margin-top: 15px;
  justify-content: space-around;
}
::v-deep .el-table,
.el-table__expanded-cell {
  overflow: unset;
  background-color: unset !important;
  &::before {
    background-color: unset !important;
  }

  .el-table__body-wrapper {
    overflow-y: auto;
    height: 185px;
  }
  td.el-table__cell {
    border: none !important;
  }
  th.el-table__cell.is-leaf {
    background-color: #173960 !important;
    border: none !important;
  }
  tr {
    background-color: #091f3a !important;
    color: #ccc !important;
    font-size: 20px;
    font-family: SourceHanSansCN-Regular;
  }
  tbody tr:hover > td {
    background-color: rgb(17, 43, 74) !important;
    cursor: pointer;
    color: #fff !important;
  }
}
.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: 120px;
      height: 19px;
      font-family: SourceHanSansCN-Regular;
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 19px;
      color: #ffffff;
      opacity: 0.5;
      position: absolute;
      right: 0px;
      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: 120px;
      height: 19px;
      font-family: SourceHanSansCN-Regular;
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 54px;
      letter-spacing: 0px;
      color: #ffffff;
      opacity: 0.5;
      position: absolute;
      top: -8px;
      left: 125px;
    }
    .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: 23px;
      left: 130px;
    }
  }
}
.total {
  width: 292px;
  height: 141px;
  background: url("~@/assets/sentimeent/bg-筛选.png");
  position: absolute;
  right: 64px;
  top: 230px;
  .name {
    width: 110px;
    height: 23px;
    font-family: SourceHanSansCN-Regular;
    font-size: 24px;
    line-height: 54px;
    color: #ffffff;
    opacity: 0.5;
    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: 45px;
  }
  .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: 47px;
  }
}
.right {
  width: 140px;
  height: 833px;
  background: #000;
  position: absolute;
  background: url("~@/assets/sentimeent/右.png");
  top: 50px;
  left: 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: 80px;
        height: 10px;
        position: relative;
        left: 34px;
        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 100% 100%;
    //background-size: cover;
    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 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: 800px;
    height: 960px;
    background-size: 100% 100%;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 0;
  }
  ::v-deep .el-pagination {
    margin-top: 17px;
  }
  ::v-deep .el-dialog__footer {
    // margin-top: 35px;
    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__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;
    height: 60px;
    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 th.el-table__cell {
    border: none;
  }
  ::v-deep .el-pagination span {
    font-size: 24px;
  }
  ::v-deep .el-pagination__sizes .el-input .el-input__inner {
    font-size: 24px;
  }
  ::v-deep .el-select .el-input .el-select__caret {
    font-size: 24px;
  }
  ::v-deep .el-pagination .btn-next .el-icon {
    font-size: 24px;
  }
  ::v-deep .el-pagination__editor.el-input {
    font-size: 24px;
    width: 80px;
  }
  ::v-deep .el-pager li {
    font-size: 24px;
  }
  ::v-deep .el-pagination .btn-prev .el-icon {
    font-size: 24px;
  }
  ::v-deep .el-pagination .el-select .el-input {
    width: 150px;
  }
  ::v-deep .el-pagination__sizes {
    color: #fff;
  }
}
.file-content {
  width: 930px;
  height: 370px;
  transform: scale(2);
}
.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;
}
.file-content .docx {
  width: 90% !important;
}
.file-content .docx p {
  text-align: center !important;
}
</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>
<style lang="scss">
.file-content .docx-wrapper {
  background: transparent !important;
  padding: 0;
}
.file-content .docx {
  width: 90% !important;
}
.file-content .docx p {
  text-align: center !important;
}
</style>