tcZz-big/src/views/privateOrder/security/components/ReportingStatistics.vue

<!--
 * @Author: lough11
 * @Date: 2021-12-24 13:17:50
 * @LastEditors: lough
 * @LastEditTime: 2022-11-15 22:38:43
 * @Description:
-->
<template>
  <div>
    <!-- 饼图 -->
    <div v-show="announceCurrentIndex === 0">
      <div style="display: flex">
        <div class="countpie">
          <div id="pie1" />
        </div>
        <div class="moduleCount">
          <div v-for="(item, idx) in piedata" :key="idx" class="smallIcon">
            <img class="leftIcon" alt="" :src="item.img" />
            <div class="right_msg" @click="clickFunc(item)">
              <div class="Top_msg">{{ item.name }}</div>
              <div class="bottom_msg">{{ item.percent }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 通报 -->
    <div v-show="announceCurrentIndex === 1">
      <div class="table_outside">
        <div class="table_title">
          <span class="title_one">部门名称</span>
          <span class="title_two">通报次数</span>
        </div>
        <div class="table_ctn">
          <div
            v-for="(item, index) in notificationList"
            :key="index"
            class="ctn_item"
            @click="clickTop4(item)"
          >
            <div class="item_icon">
              {{ index + 1 }}
            </div>
            <div class="item_name" :title="item.depName">
              {{ item.depName }}
            </div>
            <div class="item_num">{{ item.count }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="dialogStatus"
      :title="dialogTitle"
      class="screen-dialog"
      :visible.sync="dialogStatus"
      width="1560px"
      :modal-append-to-body="false"
      center
      :modal="false"
    >
      <div>
        <div class="dangerTitle">
          <span>通报文件</span>
        </div>
        <div style="height: 659px; overflow: auto">
          <div
            v-for="(item, idx) in dangerList"
            :key="idx"
            class="dangerText"
            @click="rowClick(item)"
          >
            <span>{{ item.fileName }}</span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <span>
          <el-button class="dialog-btn" @click="dialogStatus = false"
            >关 闭</el-button
          >
        </span>
      </span>
    </el-dialog>
    <el-dialog
      v-if="dialogStatus2"
      :title="'通报详情'"
      class="screen-dialog"
      :visible.sync="dialogStatus2"
      width="1920px"
      :modal-append-to-body="true"
      center
      :modal="false"
    >
      <div
        style="
          height: 740px;
          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"
          style="height: 430px"
        >
          <!-- <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="dialogStatus2 = 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 pdf from "vue-pdf";
import { echartsJump } from "../../../../../public/static/echartsJump";
// import { queryReportNumber, querySecurityByName } from '@/api/common'
import { departmentList, territorialTB, departmentTB } from "@/api/wlSafe";
export default {
  components: {
    pdf,
  },
  props: {
    announceCurrentIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      dialogTitle: "",
      status: "",
      dialogStatus2: false,
      notificationList: [],
      piedata: [],
      dialogStatus: false,
      dangerList: [],
      rowDta: {},
      // 当前选中文件类型
      fileExtension: "",
      numPages: 1,
      pdfUrl: "",
      //=========
      queryData: {
        pageSize: 20,
        pageNum: 1,
        areaId: "",
      },
    };
  },
  mounted() {
    this.getBMData();
    this.getSDData();
  },
  methods: {
    inItPie() {
      const myChartPieFirst = this.$echarts.init(
        document.getElementById("pie1")
      );
      myChartPieFirst.on("click", this.clickFunc);
      const optionFirst = {
        color: [
          "#326FDC",
          "#ffffff",
          "#7dfa9f",
          "#fbe84f",
          "#ff9315",
          "#4b9ff8",
          "#7efbe6",
          "#95ff03",
          "#9999FF",
          "#33CCFF",
          "#FFFF77",
          "#FF8888",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
          textStyle: {
            fontSize: 28,
          },
        },
        title: {
          text: "总模块",
          subtext: `{fz41|${this.piedata.length}}{fz24|个}`,
          top: "37%",
          itemGap: 20,
          textStyle: {
            fontFamily: "SourceHanSansCN-Regular",
            color: "#8edcf7",
            fontWeight: "normal",
            fontStretch: "normal",
            fontSize: 28,
          },
          subtextStyle: {
            color: "#ffffff",
            fontWeight: "normal",
            letterSpacing: 0,
            rich: {
              fz41: {
                fontSize: 41,
                padding: [0, 5, 0, 0],
              },
              fz24: {
                fontSize: 24,
              },
            },
          },
          x: "center",
          y: "center",
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "88%"],
            label: {
              show: false,
              position: "center",
            },
            data: this.piedata,
          },
        ],
      };
      myChartPieFirst.setOption(optionFirst, true);
      echartsJump(myChartPieFirst, optionFirst);
    },
    clickFunc(val) {
      this.queryData.areaId = val.area || val.data.area;
      console.log(this.queryData);
      //点击之后弹出框显示列表
      this.dangerList = [];
      departmentList(this.queryData).then((res) => {
        res.rows.forEach((value) => {
          //看看是每条数据的所有文件都拉出来
          //还是只取一条
          //或者是只能上传一条
          if (value.fileName) {
            let arr1 = value.fileName.split(",");
            let arr2 = value.fileUrl.split(",");
            this.dangerList.push({
              fileName: arr1[0],
              fileUrl: arr2[0],
            });
          }
          // if (value.fileName && value.fileUrl) {
          //   this.dangerList.push({
          //     fileName: value.fileName,
          //     fileUrl: value.fileUrl,
          //   });
          // }
        });
        this.dialogStatus = true;
      });
    },
    rowClick(row) {
      let str = row.fileUrl.split(",");
      let str1 = str[0].split(".");
      this.fileExtension = str1[1];
      if (this.fileExtension == "pdf") {
        this.getNumPages(process.env.VUE_APP_BASE_API2 + str[0]);
        this.dialogStatus2 = 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.dialogStatus2 = true;
            this.$nextTick(() => {
              docx.renderAsync(data, this.$refs.file1); // 渲染到页面预览
            });
          }
        });
      }
    },
    getNumPages(url) {
      axios({
        method: "GET",
        url: url, // 后台接口
        paramsSerializer: function (params) {
          return qs.stringify(params.data, { arrayFormat: "brackets" });
        },
        headers: {
          "Content-Type":
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        },
        responseType: "blob",
      }).then((response) => {
        this.pdfUrl = this.getObjectURL(response.data);
        const loadingTask = pdf.createLoadingTask(this.pdfUrl);
        loadingTask.promise
          .then((pdf) => {
            this.numPages = pdf.numPages;
            this.dialogStatus2 = true;
          })
          .catch((err) => {
            console.error("pdf 加载失败", err);
          });
      });
    },
    // 文件流转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;
    },
    // 部门通报
    getBMData() {
      departmentTB().then((res) => {
        this.notificationList = res.data;
      });
    },
    //属地通报
    getSDData() {
      territorialTB().then((res) => {
        res.data.forEach((value, index) => {
          this.piedata.push({
            name: this.$filterDict("1", `[${value.areaId}]`, true),
            value: value.count,
            percent: value.pt,
            area: value.area,
            img: require(`@/assets/privateOrder/general/${
              index + 1 > 8 ? 1 : index + 1
            }.png`),
          });
        });
        this.inItPie();
      });
    },
    // top4部门点击
    clickTop4(name) {
      this.status = "top4";
      // querySecurityByName({ deptName: name }).then((res) => {
      //   this.dialogStatus = true
      //   this.dialogTitle = name
      //   this.dangerList = res.data
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
::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;
  }
}
//饼图
#pie1 {
  width: 306px;
  height: 307px;
  transform: translate(11%, 11%);
}
.countpie {
  width: 374px;
  height: 374px;
  text-align: center;
  margin-top: 18px;
  background: url("~@/assets/privateOrder/general/饼图-bg2.png");
  background-size: 100% 100%;
}
.moduleCount {
  height: 381px;
  overflow: auto;
  margin-left: 33px;
  width: 310px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: space-between;
  align-content: start;
  .smallIcon {
    margin-top: 28px;
    height: 61px;
    width: 143px;

    display: flex;
    .leftIcon {
      margin-right: 5px;
    }
    .right_msg {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      height: 77px;
      .Top_msg {
        font-family: SourceHanSansCN-Medium;
        font-size: 26px;
        color: #b7dfff;
      }
      .bottom_msg {
        font-family: DIN-Medium;
        font-size: 30px;
        color: #ffffff;
      }
    }
  }
}
//部门
.table_outside {
  width: 720px;
  height: 350px;
  margin-top: 18px;
  .table_title {
    width: 718px;
    height: 55px;
    background-color: #4da3f825;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: SourceHanSansCN-Regular;
    font-size: 28px;
    line-height: 20px;
    color: #a6d5ff;
    .title_one {
      margin-left: 77px;
    }
    .title_two {
      margin-right: 25px;
    }
  }
  .table_ctn {
    width: 100%;
    height: 280px;
    margin-top: 15px;
    .ctn_item {
      display: flex;
      align-items: center;
      width: 720px;
      height: 60px;
      margin-bottom: 15px;
      background: url("~@/assets/privateOrder/general/first/部门通报tr-bg.png");
      .item_icon {
        width: 38px;
        height: 38px;
        margin-left: 18px;
        font-size: 26px;
        color: #fff;
        line-height: 38px;
        text-align: center;
      }
      .item_name {
        width: 500px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: SourceHanSansCN-Medium;
        font-size: 28px;
        margin-left: 20px;
        color: #ffffff;
      }
      .item_num {
        font-family: PangMenZhengDao-3;
        font-size: 32px;
        font-style: italic;
        line-height: 72px;
        letter-spacing: 2px;
        color: #ffec5c;
        flex: 1;
        margin-right: 60px;
        text-align: right;
      }
    }
  }
}
.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);
  }
  ::v-deep .el-dialog {
    background: url("~@/assets/dialog/弹窗背景-一般.png") no-repeat;
    //width: 1260px;
    height: 930px;
    //padding-top:20px;
    background-size: 100% 100%;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 0;
  }
  ::v-deep .el-dialog__footer {
    background: rgba(255, 255, 255, 0);
  }
  .dialogClose {
    text-align: center;
    width: 160px;
    height: 50px;
    position: absolute;
    bottom: 40px;
    left: 900px;
    background: url("~@/assets/dialog/btn-bg.png") no-repeat 100% 100%;
    font-family: SourceHanSansCN-Regular;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 50px;
    letter-spacing: 2px;
    color: #ffffff;
    cursor: pointer;
  }
  .dialogClose:hover {
    background: url("~@/assets/dialog/btn-bg-act.png") no-repeat 100% 100%;
  }
}
//隐患处置
.dangerTitle {
  //width: 720px;
  height: 55px;
  line-height: 55px;
  margin-top: 13px;
  background-color: #143458;
  span {
    font-family: SourceHanSansCN-Regular;
    font-size: 26px;
    color: #b7dfff;
  }
  span:nth-child(1) {
    padding-left: 13px;
    width: 510px;
  }
  span:nth-child(2) {
    padding-left: 300px;
  }
  span:nth-child(3) {
    padding-left: 300px;
  }
  span:nth-child(4) {
    padding-left: 150px;
  }
}
.dangerText {
  //width: 719px;
  height: 85px;
  margin-top: 22px;
  background-color: #6bb8ff21;
  /* background-image: url("~@/assets/privateOrder/general/隐患处置-td-bg.png");
    background-size: 100% 100%; */
  span {
    float: left;
    font-family: SourceHanSansCN-Regular;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    line-height: 85px;
    font-size: 26px;
    color: #ffffff;
  }
  span:nth-child(1) {
    font-size: 26px;
    padding-left: 16px;
    font-size: 26px;
    width: 1460px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  span:nth-child(2) {
    padding-left: 100px;
  }
  span:nth-child(3) {
    padding-left: 260px;
  }
  span:nth-child(4) {
    color: #fff36f;
    padding-left: 180px;
  }
}
.dialog-title {
  text-align: center;
  width: 956px;
  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;
}
.file-content {
  width: 1220px;
  height: 370px;
  transform: scale(1.5);
}
.screen-dialog ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: rgba(#1fb6e5, 0.06);
}
</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>