index.vue

<template>
	<div>
		<div class="eibs-toolbar">
			<el-popover placement="left-start" trigger="click" :offset="80" popper-class="toolbars-popover">
				<div class="toolbar-detail">
					<ul>
						<li :id="item.id" tabIndex="1" v-for="(item,index) in list" :key="index" :class="[item.name  === active ? 'toolbar-active-item' : '']" class="toolbar-hover" @click="openTool(item)">
							<!-- <span class="before-icon" style="width: 8px;height: 8px;background: #707070;display: inline-block;margin-right: 10px;"></span>{{item.name}}</li> -->
							<img :src="item.src" style="width: 15px;height: 15px;display: inline-block;margin-right: 10px;">{{item.name}}</li>
					</ul>
				</div>
				<div class="toolbar-core" slot="reference">工具条</div>
			</el-popover>
		</div>
		<el-dialog :visible.sync="dialogVisible" :title="toolTitle" width="70%" center destroy-on-close :before-close="beforeClose" :modal-append-to-body="false" v-if="dialogVisible">
			<component :is="currentItem.component" style="width:100%; height:100%"></component>
		</el-dialog>
    <!-- 旧影像控件组件加载 -->
		<scan :visible.sync="scanVisible" mode="scan" :ip="ip" :port="port"></scan>
    <!-- 新影像控件组件加载 -->
    <el-dialog  :visible.sync="newScanVisible" :title="toolTitle"  center destroy-on-close :before-close="beforeClose"  width='80%' style="min-height: 600px;">
      <iframe :src="JumpUrl" frameborder="0" width="100%" height="100%" style="display: block;"></iframe>
    </el-dialog>
	</div>
</template>

<script>
import Api from "~/service/Api";
import { getIpAndPort } from "~/service/business/common";
import VueDraggableResizable from "vue-draggable-resizable";
// import calculator from "./components/Calculator"
import account from "./components/Account";
import swiftcode from "./components/SwiftCode";
import trn from "./components/Trn";
import xrt from "./components/Xrt";
import zmqxrt from "./components/Zmqxrt";
import tdh from "./components/Tdh";
import scan from "@/components/business/webscan";
import feecalculation from "./components/FeeCalculation";
import dustbin from "~/page/Dustbin";
// import conres from "~/page/Business/Conres/views";
// import finishedtask from "./components/Business"
// import feetype from "./components/Fee"
// import sendMessageQuery from "./components/MsgSent"
// import receiveMessageQuery from "./components/MsgReceived"
export default {
  data() {
    return {
      list: [
        // {
        // 	id: 'tool-caculate',
        //   name: "计算器",
        //   src: require("~/assets/home/icon-SVG/计算器.svg")
        // },
        // {
        // 	id: 'tool-search',
        //   name: "大额支付行号查询",
        //   src: require("~/assets/home/icon-SVG/支付.svg")
        // },
        // {
        // 	id: 'tool-telexCode',
        //   name: "电报码查询",
        //   src: require("~/assets/home/icon-SVG/DFH.svg")
        // },
        {
          id: "tool-account",
          name: "账户查询",
          src: require("~/assets/home/icon-SVG/账户查询.svg"),
          isDialog: true,
          component: "account"
        },
        {
          id: "tool-swiftcode",
          name: "SWIFT代码查询",
          src: require("~/assets/home/icon-SVG/im credit-0.svg"),
          isDialog: true,
          component: "swiftcode"
        },
        {
          id: "tool-finishedtask",
          name: "业务查询",
          src: require("~/assets/home/icon-SVG/sale credit-0.svg"),
          isDialog: true,
          component: "trn"
        },
        {
          id: "tool-exchangerate",
          name: "即期牌价查询",
          src: require("~/assets/home/icon-SVG/other-0.svg"),
          isDialog: true,
          component: "xrt"
        },
        {
          id: "tool-forwardexchangerate",
          name: "远期牌价查询",
          src: require("~/assets/home/icon-SVG/other-0.svg"),
          isDialog: true,
          component: "zmqxrt"
        },
        {
          id: "tool-holiday",
          name: "节假日查询",
          src: require("~/assets/home/icon-SVG/节假日查询.svg"),
          isDialog: true,
          component: "tdh"
        },
        {
          id: "tool-scan",
          name: "影像批扫",
          src: require("~/assets/home/icon-SVG/buy credit-0.svg")
        },
        {
          id: "tool-feecalculation",
          name: "费用计算",
					src: require("~/assets/home/icon-SVG/计算器.svg"),
					isDialog: true,
          component: "feecalculation"
        },
         {
          id: "tool-dustbin",
          name: "垃圾篓",
					src: require("~/assets/home/icon-SVG/垃圾篓.svg"),
					isDialog: true,
          component: "dustbin"
        }

        // {
        // 	id: 'tool-interestrate',
        //   name: "利率查询",
        //   src: require("~/assets/home/icon-SVG/利率查询.svg")
        // },
        // {
        // 	id: 'tool-businessoffer',
        //   name: "贸易金融业务报价查询",
        //   src: require("~/assets/home/icon-SVG/DFH.svg")
        // },
        // {
        // 	id: 'tool-accttradedetails',
        //   name: "账户交易明细查询",
        //   src: require("~/assets/home/icon-SVG/账户交易明细查询.svg")
        // },
        // {
        // 	id: 'tool-feetype',
        //   name: "费用查询",
        //   src: require("~/assets/home/icon-SVG/费用查询.svg")
        // },
        // {
        // 	id: 'tool-sendMessageQuery',
        //   name: "发报查询",
        //   src: require("~/assets/home/icon-SVG/报文信息查询.svg")
        // },
        // {
        // 	id: 'tool-receiveMessageQuery',
        //   name: "收报查询",
        //   src: require("~/assets/home/icon-SVG/报文信息查询.svg")
        // },
        // {
        // 	id: 'tool-innerAccountBal',
        //   name: "内部户可用余额查询",
        //   src: require("~/assets/home/icon-SVG/余额查询.svg")
        // }
      ],
      active: "",
      dialogVisible: false,
      toolTitle: "",
      currentItem: "",
      scanVisible: false,
      newScanVisible: false,
			isOpen: false,
			ip:"",
      port:"",
      JumpUrl:'',
      scanstyle:'N'
    };
  },
  components: {
    // calculator,
    account,
    swiftcode,
    trn,
    xrt,
    zmqxrt,
    tdh,
		scan,
    feecalculation,
    dustbin
    // finishedtask,
    // feetype,
    // sendMessageQuery,
    // receiveMessageQuery,
    // "vue-draggable-resizable": VueDraggableResizable
  },
  created() {
    this.getScanType()
  },
  methods: {
    async openTool(cur) {
      this.currentItem = cur;
      this.active = cur.name;
      if (cur.isDialog) this.dialogVisible = true;
      // 显示工具栏标题
      if (cur.id === "tool-caculate") {
        this.toolTitle = "计算器";
      } else if (cur.id === "tool-search") {
        this.toolTitle = "大额支付行号查询";
      } else if (cur.id === "tool-telexCode") {
        this.toolTitle = "电报码查询";
      } else if (cur.id === "tool-account") {
        this.toolTitle = "账户查询";
      } else if (cur.id === "tool-swiftcode") {
        this.toolTitle = "SWIFT代码查询";
      } else if (cur.id === "tool-finishedtask") {
        this.toolTitle = "业务查询";
      } else if (cur.id === "tool-exchangerate") {
        this.toolTitle = "即期牌价查询";
      } else if (cur.id === "tool-holiday") {
        this.toolTitle = "节假日查询";
      } else if (cur.id === "tool-interestrate") {
        this.toolTitle = "利率查询";
      } else if (cur.id === "tool-vatinvoic") {
        this.toolTitle = "增值税发票查询";
      } else if (cur.id === "tool-accttradedetails") {
        this.toolTitle = "账户交易明细查询";
      } else if (cur.id === "tool-forwardexchangerate") {
        this.toolTitle = "远期牌价查询";
      } else if (cur.id === "tool-feetype") {
        this.toolTitle = "费用查询";
      } else if (cur.id === "tool-txSerialNo") {
        this.toolTitle = "交易流水号查询";
      } else if (cur.id === "tool-sendMessageQuery") {
        this.toolTitle = "发报查询";
        this.sendMessageQuery = "发报查询";
      } else if (cur.id === "tool-receiveMessageQuery") {
        this.toolTitle = "收报查询";
        this.receiveMessageQuery = "收报查询";
      } else if (cur.id === "tool-innerAccountBal") {
        this.toolTitle = "内部户可用余额查询";
      } else if (cur.id === "tool-conres") {
        this.toolTitle = "预领保函编号";
        this.$router.push("/business/conres");
      } else if (cur.id === "tool-feecalculation"){
        this.toolTitle = "费用计算";
			} else if (cur.id === "tool-dustbin"){
        this.toolTitle = "垃圾篓";
			} else if (cur.id === "tool-scan") {
        if(this.scanstyle == 'N') this.openNewScan()
        if(this.scanstyle == 'O') this.openScan()
      }
    },
    // 打开新的影像控件
    async openNewScan(){
      this.toolTitle = "影像批扫";
			let isGet = await this.queryIpPort();
      if (!isGet) return;
			let token = sessionStorage.getItem("j_session_id");
			let s= "separator";
			let orgId = JSON.parse(window.sessionStorage.currentOrg).id;
			let userName = window.sessionStorage.userName;
      let branch = JSON.parse(window.sessionStorage.currentOrg).departmentNumber;
      this.JumpUrl = `http://${window.location.host}/webscan?mode=scan&scanType=new&token=${token
				}&orgId=${orgId
				}&userName=${userName
				}&ip=${this.ip
				}&port=${this.port
				}&org=${branch}`
        console.log(this.JumpUrl)
      this.newScanVisible = true;
    },
    // 打开旧版影像控件
    async openScan(){
      if (!this.isOpen) {
				let isGet = await this.queryIpPort();
        if (!isGet) return;
        this.scanVisible = true;
      } else {
				let isGet = await this.queryIpPort();
        if (!isGet) return;
				let token = sessionStorage.getItem("j_session_id");
				let s= "separator";
				let orgId = JSON.parse(window.sessionStorage.currentOrg).id;
				let userName = window.sessionStorage.userName;
				let branch = JSON.parse(window.sessionStorage.currentOrg).departmentNumber;
        window.open(
					`alert:http://${window.location.host}/static/sunscan.html?mode=scan${s}scanType=old${s}token=${token
					}${s}orgId=${orgId
					}${s}userName=${userName
					}${s}ip=${this.ip
					}${s}port=${this.port
					}${s}org=${branch
					}`, "_self"
				);
      }
    },
    isWebScanOpen() {
      let isWin = this.isWinFunc();
      let isIE = this.isIEFunc();
      this.isOpen = isWin && !isIE;
    },
    isWinFunc() {
      let platform = navigator.platform;
      let isWin = false;
      if (platform.indexOf("Win") > -1) isWin = true;
      return isWin;
    },
    //获取打开新旧影像版本
    getScanType () {
      // Api.post("/public/ad/img").then(res => {
      //   if (res.respCode == "AAAAAA") {
      //     this.scanstyle = res.data
      //     console.log(res, '我查看一下结果')
      //   }
      // });
    },
    isIEFunc() {
      let reg_Trident = /Trident/;
      let appVesion = navigator.appVersion;
      let isIE = reg_Trident.test(appVesion);
      return isIE;
    },
    beforeClose(done) {
      this.dialogVisible = false;
      done();
    },
    closeDialog(){
      this.dialogVisible = false;
    },
		async queryIpPort() {
      let data = { appid: "GJ01" };
      let ret = false;
      await getIpAndPort(data).then(res => {
        if (res.data.ERRMSG == "SUCCESS") {
          this.ip = res.data.ip;
          this.port = res.data.port + "";
          ret = true;
        } else {
          this.$alert("端口获取失败！");
        }
      });
      return ret;
    },
  },
  mounted() {
    this.isWebScanOpen();
    const that = this;
		const dom = this.$el.querySelector('.eibs-toolbar');
    const minTop = 60,
      maxTop = document.body.clientHeight - dom.offsetHeight - 40;
    dom.onmousedown = e => {
      const disY = e.clientY - dom.offsetTop;
      document.onmousemove = function(e) {
        let top = e.clientY - disY;
        if (top > maxTop) {
          top = maxTop;
        } else if (top < minTop) {
          top = minTop;
        }
        dom.style.top = top + "px";
      };
      document.onmouseup = function(e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
};
</script>

<style scoped lang="less">
::v-deep .el-dialog {
  height: 90vh;
  margin: 5vh auto!important;
  .el-dialog__body {
    position: relative;
    height: calc(100% - 54px);
  }
}
.eibs-toolbar {
  z-index: 1000;
  user-select: auto;
  width: 32px;
  height: 68px;
  position: fixed;
  top: 200px;
  right: 0;
}
.toolbars-popover {
  padding: 0 !important;
}
.toolbar-core {
  background: var(--error-color);
  border-radius: 4px;
  width: 28px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.toolbar-detail {
  font-size: 12px;
  ul {
    margin: 0;
    padding: 5px;
    background: #fff;
    cursor: pointer;
    li {
      display: flex;
      list-style: none;
      padding: 8px 15px;
      cursor: pointer;
    }
    .active-item {
      color: #000000;
      .before-icon {
        background: var(--error-color) !important;
      }
    }
  }
}
.m-draggable {
  border-radius: 2px;
  border: 1px solid #ccc;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  z-index: 10000 !important;
  // position: absolute;
  // top: 0;
  /* left: 200px; */
  padding: 10px;
  background-color: #f7fbfd;
}

.m-draggable-header {
  height: 26px;
  width: 100%;
  text-align: right;
}
.m-enable-draggable-header {
  margin: -10px;
  height: 35px;
  width: 1000;
  padding: 10px 20px 10px 20px;
  z-index: 10000 !important;
  background-color: #1561e0;
  /* border:0px; */
  border: 1px solid #1561e0;
}
.m-draggable-content {
  height: calc(100% - 37px);
  overflow-y: auto;
  margin-top: 10px;
  .c-page-container {
    height: 100%;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    padding: 20px 20px 0;
  }
}
.m-draggable-content-large {
  height: 720px;
  overflow-y: auto;
}
.m-draggable-header .el-icon-minus {
  cursor: pointer;
  color: #fff;
}
.m-enable-draggable-header-min {
  padding: 10px 20px 0 20px;
}
.m-enable-draggable-header .el-icon-close {
  cursor: pointer;
  color: #fff;
}
.m-enable-draggable-header .el-icon-full-screen {
  cursor: pointer;
  color: #fff;
}
.m-enable-draggable-header .el-icon-copy-document {
  cursor: pointer;
  color: #fff;
}
.m-toolbar {
  position: fixed;
  top: 200px;
  right: 0;
  z-index: 10000;
}

.m-toolbar-core {
  background: var(--themecolor);
  border-radius: 4px;
  width: 12px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.m-toolbar-detail {
  padding: 0px;
  font-size: 12px;
  position: absolute;
  top: -20px;
  right: 32px;
  width: 150px;
  z-index: 10000;
}

.m-toolbar-detail ul {
  margin-left: 5px;
  margin-right: 5px;
  padding: 0;
  padding: 5px 0;
  border-radius: 2px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #fff;
  cursor: pointer;
}

.m-toolbar-detail li {
  list-style: none;
  padding: 8px 15px;
}

.m-toolbar-detail li:hover {
  background: var(--themecolor);
  color: #fff;
}

.m-toolbar .m-toolbar-detail {
  display: none;
}
.m-tool-title {
  color: #fff;
  text-align: left;
  float: left;
}
.m-toolbar:hover .m-toolbar-detail {
  display: block;
}
</style>