<template>
|
<div class="liyu">
|
<div id="svgTemplate"></div>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue/dist/vue.esm.js";
|
export default {
|
name: "svg-drawing",
|
data() {
|
return {
|
/* 全局 */
|
svgUrl: "", // svg的url
|
svgDom: null, // 获取到的svg元素
|
svgSingDom: null, // 获取到的svg元素
|
/* svg的变量 */
|
photoResult: {
|
resultVal: 0, // 测试结果 - 值
|
resultMsg: "未检测", // 测试结果 - 字段
|
resultColor: "#dcdee2" // 测试结果 - 字段背景色
|
}
|
};
|
},
|
async activated() {
|
|
// 将takePhoto方法绑定到window下面，提供给外部调用
|
window["handleClick"] = (type) => {
|
this.takePhoto(type);
|
};
|
this.$nextTick(()=>{
|
this.xsMode();
|
});
|
|
},
|
created() {
|
this.getSvg();
|
},
|
methods: {
|
getAuth(){
|
let dataAuth= {
|
"661": 'henqing',
|
"668": 'qianshan',
|
"670": 'jida',
|
"671": 'xiangzhou',
|
"672": 'jinwan',
|
"673": 'doumen',
|
"677": 'lvyou',
|
};
|
let btn='zonggongsi';
|
if(!this.$store.state.companyId || this.$store.state.companyId===1){}else{
|
btn=dataAuth[this.$store.state.companyId]
|
}
|
return btn
|
},
|
// 初始化svg
|
getSvg(str) {
|
/* 创建xhr对象 */
|
let xhr = new XMLHttpRequest();
|
this.svgUrl = "./mapten.svg";
|
xhr.open("GET", this.svgUrl, true);
|
xhr.send();
|
|
/* 监听xhr对象 */
|
xhr.addEventListener("load", () => {
|
/* 1. 获取 dom */
|
let resXML = xhr.responseXML;
|
this.svgDom = resXML.documentElement.cloneNode(true);
|
/* 2.SVG对象添加click事件 */
|
this.setHiddenSvg(1);
|
this.svgDom.getElementById("area_jinwan").setAttribute("v-on:click", "this.handleClick('jinwan')");
|
this.svgDom.getElementById("area_doumen").setAttribute("v-on:click", "this.handleClick('doumen')");
|
this.svgDom.getElementById("area_jida").setAttribute("v-on:click", "this.handleClick('jida')");
|
this.svgDom.getElementById("area_qianshan").setAttribute("v-on:click", "this.handleClick('qianshan')");
|
this.svgDom.getElementById("aea_xiangzhou").setAttribute("v-on:click", "this.handleClick('xiangzhou')");
|
this.svgDom.getElementById("area_henqing").setAttribute("v-on:click", "this.handleClick('henqing')");
|
this.svgDom.getElementById("area_lvyou").setAttribute("v-on:click", "this.handleClick('lvyou')");
|
this.svgDom.getElementById("area_zonggongsi").setAttribute("v-on:click", "this.handleClick('zonggongsi')");
|
/* 4.将svgDom对象转换成vue的虚拟dom */
|
let oSerializer = new XMLSerializer();
|
let sXML = oSerializer.serializeToString(this.svgDom);
|
let Profile = Vue.extend({
|
template: "<div is='svgTemplate'>" + sXML + "</div>"
|
});
|
// 创建实例，并挂载到元素上
|
new Profile().$mount("#svgTemplate");
|
});
|
},
|
// 事件
|
takePhoto(type) {
|
if (!this.$store.state.parentCompany) {
|
return;
|
}
|
this.setHiddenSvg(2,type);
|
if(type=="doumen"){
|
document.getElementById("area_groupdoumen_sel").setAttribute("style","display:block;");
|
document.getElementById("area_groupdoumen_sel").classList.add("svgRouteClass");
|
} else if(type=="jinwan"){
|
document.getElementById("area_groupjinwan_sel").setAttribute("style","display:block;");
|
} else if(type=="qianshan"){
|
document.getElementById("area_groupqianshan_sel").setAttribute("style","display:block;");
|
} else if(type=="jida"){
|
document.getElementById("area_groupjida_sel").setAttribute("style","display:block;");
|
} else if(type=="xiangzhou"){
|
document.getElementById("area_groupxiangzhou_sel").setAttribute("style","display:block;");
|
} else if(type=="henqing"){
|
document.getElementById("area_grouphenqing_sel").setAttribute("style","display:block;");
|
document.getElementById("area_henqing").setAttribute("style","display:none;");
|
} else if(type=="lvyou"){
|
document.getElementById("area_grouplvyou_sel").setAttribute("style","display:block;");
|
document.getElementById("area_lvyou").setAttribute("style","display:none;");
|
}else if(type=="zonggongsi"){
|
document.getElementById("area_zonggongsi_sel").setAttribute("style","display:block;");
|
document.getElementById("area_zonggongsi").setAttribute("style","display:none;");
|
}
|
|
this.$emit('checkCompany',type)
|
},
|
setHiddenSvg(num,type){
|
if(num == 1){
|
//隐藏全部
|
this.ycMode();
|
} else {
|
this.xsMode(type);
|
}
|
},
|
ycMode(){
|
this.svgDom.getElementById("area_groupjinwan_sel").setAttribute("style","display:none;");
|
this.svgDom.getElementById("area_groupdoumen_sel").setAttribute("style","display:none;");
|
this.svgDom.getElementById("area_groupjida_sel").setAttribute("style","display:none;");
|
this.svgDom.getElementById("area_groupqianshan_sel").setAttribute("style","display:none;");
|
this.svgDom.getElementById("area_groupxiangzhou_sel").setAttribute("style","display:none;");
|
this.svgDom.getElementById("area_grouphenqing_sel").setAttribute("style","display:none;");
|
this.svgDom.getElementById("area_grouplvyou_sel").setAttribute("style","display:none;");
|
this.svgDom.getElementById("area_henqing").setAttribute("style","display:block;");
|
this.svgDom.getElementById("area_lvyou").setAttribute("style","display:block;");
|
this.svgDom.getElementById("area_zonggongsi").setAttribute("style","display:block;");
|
let name=this.getAuth();
|
if(name==='zonggongsi'){
|
this.svgDom.getElementById("area_zonggongsi").setAttribute("style","display:none;");
|
this.svgDom.getElementById("area_zonggongsi_sel").setAttribute("style","display:block;");
|
}else{
|
this.svgDom.getElementById("area_group"+name+"_sel").setAttribute("style","display:block;");
|
this.svgDom.getElementById("area_zonggongsi_sel").setAttribute("style","display:none;");
|
}
|
},
|
xsMode(type){
|
try {
|
document.getElementById("area_groupjinwan_sel").setAttribute("style","display:none;");
|
document.getElementById("area_groupdoumen_sel").setAttribute("style","display:none;");
|
document.getElementById("area_groupqianshan_sel").setAttribute("style","display:none;");
|
document.getElementById("area_groupjida_sel").setAttribute("style","display:none;");
|
document.getElementById("area_groupxiangzhou_sel").setAttribute("style","display:none;");
|
document.getElementById("area_grouphenqing_sel").setAttribute("style","display:none;");
|
document.getElementById("area_grouplvyou_sel").setAttribute("style","display:none;");
|
document.getElementById("area_henqing").setAttribute("style","display:block;");
|
document.getElementById("area_lvyou").setAttribute("style","display:block;");
|
document.getElementById("area_zonggongsi").setAttribute("style","display:block;");
|
document.getElementById("area_zonggongsi_sel").setAttribute("style","display:none;");
|
if(!type){
|
let name=this.getAuth();
|
if(name==='zonggongsi'){
|
document.getElementById("area_zonggongsi").setAttribute("style","display:none;");
|
document.getElementById("area_zonggongsi_sel").setAttribute("style","display:block;");
|
}else{
|
document.getElementById("area_group"+name+"_sel").setAttribute("style","display:block;");
|
document.getElementById("area_zonggongsi_sel").setAttribute("style","display:none;");
|
}
|
}
|
}catch (e) {
|
console.log('---------svg地图错误------------')
|
console.log(e)
|
console.log('---------svg地图错误------------')
|
};
|
|
}
|
|
},
|
beforeDestroy() {
|
this.svgDom = null;
|
}
|
};
|
</script>
|
<style>
|
.liyu{
|
width: 100vw;
|
height: 100vh;
|
background: url("../assets/newImg/1920bg.png") no-repeat center/cover;
|
}
|
#svgTemplate {
|
z-index: 0
|
}
|
.svgRouteClass {
|
border: 1px solid red
|
}
|
</style>
|
