qgb-process 0.1.52 → 0.1.53

package/src/components/public/components/Userinfo.vue

@@ -1,383 +0,0 @@
-<template>
-  <div class="topbar">
-    <div class="header font12">
-      <div class="page-left" :class="{'hover-area':areaBox}">
-        <div @mouseenter="showArea" @mouseleave="areaBoxHoverOut">
-          <div class="areaBox-shade" v-if="areaBox"></div>
-          <span class="area line-city">{{monitorId.shortName}}</span>
-          &nbsp;
-        </div>
-
-        <div class="areaBox" v-show="areaBox" @mouseenter="showArea" @mouseleave="areaBoxHoverOut">
-          <div class="tc-10"></div>
-          <div class="areaBoxInner">
-            <div v-for="(item,index) in data1" :key="index">
-              <a
-                @click="selectArea(item,index)"
-                :class="{'colorClass': colorClass = item.checked,'a-hover':!item.checked}"
-              >{{item.shortName}}</a>
-            </div>
-          </div>
-          <div class="tc-5 clearboth"></div>
-        </div>
-      </div>
-
-      <div class="page-left header-tel">
-        <span class="color66">客服电话：</span>
-        <span class="orange-color">400-001-0051</span>
-      </div>
-
-      <div class="cursor image1-hover page-left">
-        <div class="icon">
-          <img src="@/assets/public/phone.png" alt />
-        </div>
-        <div class="image1">
-          <div class="tc-10"></div>
-          <div class="image-box">
-            <img src="@/assets/public/think-change.png" alt />
-          </div>
-          <div class="image-font color02">手机版下载</div>
-          <div class="image-font">扫一扫，立即下载！</div>
-        </div>
-      </div>
-
-      <div class="cursor image2-hover page-left">
-        <div class="icon">
-          <img src="@/assets/public/weixin.png" alt />
-        </div>
-        <div class="image2">
-          <img src="@/assets/public/gzh_apple.jpg" alt />
-        </div>
-      </div>
-
-      <div class="right page-right normal">
-        <ul>
-          <li>
-            <span
-              class="color02 user cursor"
-              @click="$router.push({path:'/'})"
-            >您好！{{this.$store.state.user.accountName}}</span>
-            <span class="cursor color96" @click="quit">
-              &nbsp;&nbsp;
-              <span class="color66">|</span>&nbsp;&nbsp; 退出
-            </span>
-          </li>
-          <li class="cursor color66" @click="toIndex">首页</li>
-          <li class="cursor color66" @click="$router.push({path:'/'})">会员中心</li>
-          <li class="cursor color66 my-mess" @click="$router.push({path:'/myMessage'})">
-            我的消息
-            <div v-if="this.$store.state.user.msgNum>0"></div>
-          </li>
-          <li class="cursor color66" @click="$router.push({path:'/HelpCenter'})">帮助中心</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import link from "@/public/link.js"
-import cookie from "@/storage/cookies"
-import localStorage from "@/storage/localStorage"
-export default {
-  name: "Userinfo",
-  data() {
-    return {
-      isShow: true,
-      areaBox: false,
-      colorClass: "",
-      data1: [],
-      shake: false
-    }
-  },
-  components: {},
-  inject: ["reload"],
-  methods: {
-    showArea() {
-      if (this.data1.length === 0) {
-        this.data1 = JSON.parse(localStorage.read("areaAll"))
-      }
-      this.areaBox = true
-      this.shake = true
-    },
-    areaBoxHoverOut() {
-      const that = this
-      this.shake = false
-      setTimeout(function() {
-        if (!that.shake) {
-          that.areaBox = false
-        }
-      }, 50)
-    },
-
-    selectArea(val, index) {
-      this.colorClass = index
-      this.data1.forEach(item => {
-        item.checked = false
-      })
-      val.checked = true
-      this.areaBox = false
-      cookie.cookieSet("area", JSON.stringify(val))
-      localStorage.set("areaAll", JSON.stringify(this.data1))
-      this.$store.commit("SET_AREA", val)
-      // this.$store.dispatch("SET_AREA");
-      this.reload() // 重载
-    },
-    quit() {
-      // LOGIN_OUT
-      this.$confirm("确认退出？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(res => {
-          this.$store.commit("LOGIN_OUT")
-        })
-        .catch(() => {})
-    },
-    toIndex() {
-      link.index()
-    }
-  },
-  watch: {},
-  computed: {
-    monitorId() {
-      const area = cookie.cookieRead("area")
-      const res = JSON.parse(area)
-      return res
-    }
-  },
-  mounted() {},
-  created() {
-    if (this.$store.state.loginType) {
-      this.isShow = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-.orange-color {
-  color: #ff6600;
-}
-//
-$font_color: #737373;
-// width: 1200px;
-// @media screen and (max-width: 768px)
-// @media screen and (min-width: 768px)
-
-@media screen and (min-width: 1218px) {
-  .topbar {
-    .header {
-      width: 1200px;
-    }
-  }
-}
-@media screen and (max-width: 1217px) {
-  .topbar {
-    .header {
-      width: 100%;
-      > div:nth-child(1) {
-        margin: 0 0 0 20px;
-      }
-    }
-    .right {
-      margin-right: 20px;
-    }
-  }
-}
-@media screen and (max-width: 992px) {
-  .topbar {
-    .header {
-      width: 992px;
-    }
-  }
-}
-* {
-  padding: 0;
-  margin: 0;
-}
-.topbar {
-  background: #f5f5f5;
-  width: 100%;
-  height: 30px;
-  .hover-area {
-    padding: 0 !important;
-    border: 1px solid #e4e7ed;
-    border-bottom: none;
-    background: #fff;
-    height: 29px;
-    // line-height: 30px;
-  }
-
-  .header {
-    margin: 0 auto;
-    height: 30px;
-    line-height: 30px;
-    position: relative;
-    > div {
-      &:nth-child(1) {
-        padding: 1px 1px 0;
-        text-indent: 10px;
-        position: relative;
-        line-height: 29px;
-        .areaBox-shade {
-          position: absolute;
-          height: 5px;
-          z-index: 1000;
-          width: 100%;
-          background: #fff;
-          left: 0px;
-          bottom: -2px;
-        }
-      }
-    }
-    .header-inner {
-      margin-right: 25px !important;
-    }
-  }
-  .icon {
-    display: inline-block;
-    width: 40px;
-    height: 100%;
-    text-align: center;
-    &:hover {
-      background: #fff;
-    }
-    > img {
-      padding-top: 6px;
-    }
-  }
-  .header-tel {
-    margin-left: 20px;
-    margin-right: 20px;
-  }
-  .image1-hover:hover .image1 {
-    display: block;
-  }
-  .image2-hover:hover .image2 {
-    display: block;
-  }
-  .image1-hover,
-  .image2-hover {
-    position: relative;
-  }
-  .image2-hover {
-    margin-left: 5px;
-  }
-  .image1 {
-    line-height: 30px;
-    width: 162px;
-    height: 183px;
-    position: absolute;
-    bottom: -183px;
-    left: 0;
-    z-index: 100;
-    background: #fff;
-    text-align: center;
-    display: none;
-    .image-box {
-      margin: 0 auto;
-      width: 120px;
-      height: 120px;
-      > img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .image-font {
-      height: 20px;
-    }
-  }
-  .image2 {
-    width: 120px;
-    height: 120px;
-    position: absolute;
-    bottom: -120px;
-    left: 0;
-    > img {
-      width: 100%;
-      height: 100%;
-    }
-    z-index: 100;
-    display: none;
-  }
-  .right {
-    ul {
-      li {
-        float: left;
-        margin-right: 30px;
-        position: relative;
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-      .my-mess {
-        padding-right: 8px;
-        > div {
-          position: absolute;
-          width: 6px;
-          height: 6px;
-          background: rgba(253, 83, 83, 1);
-          border-radius: 50%;
-          right: 0px;
-          top: 8px;
-        }
-      }
-    }
-  }
-  .area {
-    background: url("../../../assets/public/locat.png") no-repeat left 6px;
-    text-indent: 20px;
-  }
-  .normal {
-    font-weight: normal;
-  }
-  .areaBox {
-    left: -1px;
-    top: 28px;
-    width: 318px;
-    min-height: 200px;
-    border: 1px solid #e4e7ed;
-    position: absolute;
-    background-color: #ffffff;
-    z-index: 999;
-    .areaBoxInner {
-      width: 300px;
-      margin: 0 auto;
-      > div {
-        margin-bottom: 3px;
-        width: 60px;
-        display: inline-block;
-        float: left;
-        height: 24px;
-        line-height: 24px;
-        a {
-          text-indent: 0px;
-          display: inline-block;
-          padding: 0 6px;
-          cursor: pointer;
-          outline: none;
-          color: #666666;
-        }
-        .a-hover {
-          &:hover {
-            background: #f5f5f5;
-            color: #0286df;
-          }
-        }
-      }
-    }
-  }
-
-  .colorClass {
-    background-color: #0286df;
-    color: #ffffff !important;
-  }
-
-  .line-city {
-    display: inline-block;
-    color: #0286df;
-    cursor: pointer;
-  }
-}
-</style>

package/src/components/utils/pdf.js

@@ -1,254 +0,0 @@
-// // 导出页面为PDF格式
-// import html2Canvas from 'html2canvas'
-// import JsPDF from 'jspdf'
-// export default{
-// 	install (Vue, options) {
-// 		Vue.prototype.getPdf = function (title) {
-// 			var title = this.htmlTitle
-// 			html2Canvas(document.querySelector('#pdfDom'), {
-// 				allowTaint: true
-// 			}).then(function (canvas) {
-// 					let contentWidth = canvas.width
-// 					let contentHeight = canvas.height
-// 					let pageHeight = contentWidth / 592.28 * 841.89
-// 					let leftHeight = contentHeight
-// 					let position = 0
-// 					let imgWidth = 595.28
-// 					let imgHeight = 592.28 / contentWidth * contentHeight
-// 					let pageData = canvas.toDataURL('image/jpeg', 1.0)
-// 					let PDF = new JsPDF('', 'pt', 'a4')
-// 					if (leftHeight < pageHeight) {
-// 						PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-// 					} else {
-// 						while (leftHeight > 0) {
-// 							PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
-// 							leftHeight -= pageHeight
-// 							position -= 841.89
-// 							if (leftHeight > 0) {
-// 								PDF.addPage()
-// 							}
-// 						}
-// 					}
-// 					PDF.save(title + '.pdf')
-// 				}
-// 			)
-// 		}
-// 	}
-// }
-import jsPDF from "jspdf";
-import html2canvas from "html2canvas";
-
-const A4_WIDTH = 592.28;
-const A4_HEIGHT = 841.89;
-
-jsPDF.API.output2 = function(outputType = "save", filename = "document.pdf") {
-  let result = null;
-  switch (outputType) {
-    case "file":
-      result = new File([this.output("blob")], filename, {
-        type: "application/pdf",
-        lastModified: Date.now()
-      });
-      break;
-    case "save":
-      result = this.save(filename);
-      break;
-    default:
-      result = this.output(outputType);
-  }
-  return result;
-};
-
-jsPDF.API.addBlank = function(x, y, width, height) {
-  this.setFillColor(255, 255, 255);
-  this.rect(x, y, Math.ceil(width), Math.ceil(height), "F");
-};
-
-jsPDF.API.toCanvas = async function(element, width) {
-  const canvas = await html2canvas(element);
-  const canvasWidth = canvas.width;
-  const canvasHeight = canvas.height;
-  const height = (width / canvasWidth) * canvasHeight;
-  const canvasData = canvas.toDataURL("image/jpeg", 1.0);
-  return { width, height, data: canvasData };
-};
-
-jsPDF.API.addHeader = async function(x, width, header) {
-  if (!(header instanceof HTMLElement)) return;
-  let __header;
-  if (this.__header) {
-    __header = this.__header;
-  } else {
-    __header = await this.toCanvas(header, width);
-    this.__header = __header;
-  }
-  const { height, data } = __header;
-  this.addImage(data, "JPEG", x, 0, width, height);
-};
-
-jsPDF.API.addFooter = async function(x, width, footer) {
-  if (!(footer instanceof HTMLElement)) return;
-  let __footer;
-  if (this.__footer) {
-    __footer = this.__footer;
-  } else {
-    __footer = await this.toCanvas(footer, width);
-    this.__footer = __footer;
-  }
-  const { height, data } = __footer;
-  this.addImage(data, "JPEG", x, A4_HEIGHT - height, width, height);
-};
-
-/**
- * 生成pdf(处理多页pdf截断问题)
- * @param {Object} param
- * @param {HTMLElement} param.element - 需要转换的dom根节点
- * @param {number} [param.contentWidth=550] - 一页pdf的内容宽度，0-592.28
- * @param {number} [param.contentHeight=800] - 一页pdf的内容高度，0-841.89
- * @param {string} [param.outputType='save'] - 生成pdf的数据类型，添加了'file'类型，其他支持的类型见http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html#output
- * @param {string} [param.filename='document.pdf'] - pdf文件名
- * @param {number} param.x - pdf页内容距页面左边的高度，默认居中显示，为(A4宽度 - contentWidth) / 2)
- * @param {number} param.y - pdf页内容距页面上边的高度，默认居中显示，为(A4高度 - contentHeight) / 2)
- * @param {HTMLElement} param.header - 页眉dom元素
- * @param {HTMLElement} param.footer - 页脚dom元素
- * @param {boolean} [param.headerOnlyFirst=true] - 是否只在第一页添加页眉
- * @param {boolean} [param.footerOnlyLast=true] - 是否只在最后一页添加页脚
- * @param {string} [param.mode='adaptive'] - 生成pdf的模式，支持'adaptive'、'fixed'，'adaptive'需给dom添加标识，'fixed'需固定布局。
- * @param {string} [param.itemName='item'] - 给dom添加元素标识的名字，'adaptive'模式需在dom中设置
- * @param {string} [param.groupName='group'] - 给dom添加组标识的名字，'adaptive'模式需在dom中设置
- * @returns {Promise} 根据outputType返回不同的数据类型
- */
-async function outputPdf({
-	                          element, contentWidth = 550, contentHeight = 800,
-	                          outputType = "save", filename = "document.pdf", x, y,
-	                          header, footer, headerOnlyFirst = true, footerOnlyLast = true,
-	                          mode = "adaptive", itemName = "item", groupName = "group"
-}) {
-  if (!(element instanceof HTMLElement)) {
-    throw new Error("The root element must be HTMLElement.");
-  }
-
-  const pdf = new jsPDF({
-    unit: "pt",
-    format: "a4",
-    orientation: "p"
-  });
-  const { width, height, data } = await pdf.toCanvas(element, contentWidth);
-  const baseX = x == null ? (A4_WIDTH - contentWidth) / 2 : x;
-  const baseY = y == null ? (A4_HEIGHT - contentHeight) / 2 : y;
-  async function addHeader(isFirst) {
-    if (isFirst || !headerOnlyFirst) {
-      await pdf.addHeader(baseX, contentWidth, header);
-    }
-  }
-  async function addFooter(isLast) {
-    if (isLast || !footerOnlyLast) {
-      await pdf.addFooter(baseX, contentWidth, footer);
-    }
-  }
-  function addImage(_x, _y) {
-    pdf.addImage(data, "JPEG", _x, _y, width, height);
-  }
-
-  const params = {
-    element, contentWidth, contentHeight, itemName, groupName,
-    pdf, baseX, baseY, width, height, addImage, addHeader, addFooter
-  };
-  switch (mode) {
-    case "adaptive":
-      await outputWithAdaptive(params);
-      break;
-    case "fixed":
-    default:
-      await outputWithFixedSize(params);
-  }
-  return pdf.output2(outputType, filename);
-}
-
-async function outputWithFixedSize({
-	                                    pdf, baseX, baseY, height, addImage, addHeader, addFooter, contentHeight
-}) {
-  const pageNum = Math.ceil(height / contentHeight); // 总页数
-  const arr = Array.from({ length: pageNum }).map((_, i) => i);
-  for await (const i of arr) {
-    addImage(baseX, baseY - i * contentHeight);
-    const isFirst = i === 0;
-    const isLast = i === arr.length - 1;
-    if (!isFirst) {
-      // 用空白遮挡顶部需要隐藏的部分
-      pdf.addBlank(0, 0, A4_WIDTH, baseY);
-    }
-    if (!isLast) {
-      // 用空白遮挡底部需要隐藏的部分
-      pdf.addBlank(0, baseY + contentHeight, A4_WIDTH, A4_HEIGHT - (baseY + contentHeight));
-    }
-    await addHeader(isFirst);
-    await addFooter(isLast);
-    if (!isLast) {
-      pdf.addPage();
-    }
-  }
-}
-
-async function outputWithAdaptive({
-	                                   element, contentWidth, itemName, groupName,
-	                                   pdf, baseX, baseY, addImage, addHeader, addFooter, contentHeight
-}) {
-  // 从根节点遍历dom，计算出每页应放置的内容高度以保证不被截断
-  const splitElement = () => {
-    const res = [];
-    let pos = 0;
-    const elementWidth = element.offsetWidth;
-    function updatePos(height) {
-      if (pos + height <= contentHeight) {
-        pos += height;
-        return;
-      }
-      res.push(pos);
-      pos = height;
-    }
-    function traversingNodes(nodes) {
-      if (nodes.length === 0) return;
-      nodes.forEach(one => {
-        if (one.nodeType !== 1) return;
-        const { [itemName]: item, [groupName]: group } = one.dataset;
-        if (item != null) {
-          const { offsetHeight } = one;
-          // dom高度转换成生成pdf的实际高度
-          // 代码不考虑dom定位、边距、边框等因素，需在dom里自行考虑，如将box-sizing设置为border-box
-          updatePos(contentWidth / elementWidth * offsetHeight);
-        } else if (group != null) {
-          traversingNodes(one.childNodes);
-        }
-      });
-    }
-    traversingNodes(element.childNodes);
-    res.push(pos);
-    return res;
-  };
-
-  const elements = splitElement();
-  let accumulationHeight = 0;
-  let currentPage = 0;
-  for await (const elementHeight of elements) {
-    addImage(baseX, baseY - accumulationHeight);
-    accumulationHeight += elementHeight;
-    const isFirst = currentPage === 0;
-    const isLast = currentPage === elements.length - 1;
-    if (!isFirst) {
-      pdf.addBlank(0, 0, A4_WIDTH, baseY);
-    }
-    if (!isLast) {
-      pdf.addBlank(0, baseY + elementHeight, A4_WIDTH, A4_HEIGHT - (baseY + elementHeight));
-    }
-    await addHeader(isFirst);
-    await addFooter(isLast);
-    if (!isLast) {
-      pdf.addPage();
-    }
-    currentPage++;
-  }
-}
-
-export default outputPdf;
-