gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：添加蜂窝图组件

Browse Source
This commit is contained in:
zhangyu
2020-12-10 15:41:29 +08:00
parent 2ea0b88989
commit c493efd6aa
4 changed files with 754 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
nezha-fronted/package-lock.json generated
View File

@@ -4,11 +4,54 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/runtime": {
"version": "7.12.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
"requires": {
"regenerator-runtime": "^0.13.4"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.13.7",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
}
}
},
"@riophae/vue-treeselect": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
"integrity": "sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==",
"requires": {
"@babel/runtime": "^7.3.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"easings-css": "^1.0.0",
"fuzzysearch": "^1.0.3",
"is-promise": "^2.1.0",
"lodash": "^4.0.0",
"material-colors": "^1.2.6",
"watch-size": "^2.0.0"
}
},
"@sindresorhus/is": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
"integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow=="
},
"@svgdotjs/svg.js": {
"version": "3.0.16",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.0.16.tgz",
"integrity": "sha512-yZ4jfP/SeLHEnCi9PIrzienKCrA4vW9+jm5uUV3N5DG2e9zgXLY5FgywK2u8/gMFIeKO0HuqTLFFfWJj+MfMLA=="
},
"@svgdotjs/svg.panzoom.js": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@svgdotjs/svg.panzoom.js/-/svg.panzoom.js-2.1.1.tgz",
"integrity": "sha512-fsGP+i64jcpaG1UXOmNDUWq2ZLpiMf+EwfHZn5NNnYp5K7J2gk96NcPhzMtgmCUZtu61Ro8Z5D2P3RdzBzpc3g==",
"requires": {
"@svgdotjs/svg.js": "^3.0.16"
}
},
"@types/q": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
@@ -3576,6 +3619,11 @@
"stream-shift": "^1.0.0"
}
},
"easings-css": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/easings-css/-/easings-css-1.0.0.tgz",
"integrity": "sha512-7Uq7NdazNfVtr0RNmPAys8it0zKCuaqxJStYKEl72D3j4gbvXhhaM7iWNbqhA4C94ygCye6VuyhzBRQC4szeBg=="
},
"ecc-jsbn": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -4461,8 +4509,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@@ -4483,14 +4530,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -4505,20 +4550,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -4635,8 +4677,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -4648,7 +4689,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -4663,7 +4703,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -4671,14 +4710,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -4697,7 +4734,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -4778,8 +4814,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -4791,7 +4826,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -4877,8 +4911,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4914,7 +4947,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4934,7 +4966,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4978,14 +5009,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
@@ -5005,6 +5034,11 @@
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
},
"fuzzysearch": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
"integrity": "sha1-3/yA9tawQiPyImqnndGUIxCW0Ag="
},
"gauge": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -5942,6 +5976,11 @@
"isobject": "^3.0.1"
}
},
"is-promise": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
},
"is-regex": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
@@ -6371,6 +6410,11 @@
"object-visit": "^1.0.0"
}
},
"material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
},
"math-expression-evaluator": {
"version": "1.2.17",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -12354,6 +12398,11 @@
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
"integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
},
"watch-size": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/watch-size/-/watch-size-2.0.0.tgz",
"integrity": "sha512-M92R89dNoTPWyCD+HuUEDdhaDnh9jxPGOwlDc0u51jAgmjUvzqaEMynXSr3BaWs+QdHYk4KzibPy1TFtjLmOZQ=="
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

3
nezha-fronted/package.json
View File

@@ -10,6 +10,9 @@
"build": "node build/build.js"
},
"dependencies": {
"@riophae/vue-treeselect": "^0.4.0",
"@svgdotjs/svg.js": "^3.0.16",
"@svgdotjs/svg.panzoom.js": "^2.1.1",
"axios": "^0.19.0",
"cytoscape": "^3.15.2",
"echarts": "^4.7.0",

659
nezha-fronted/src/components/common/Honeycomb/hexagonFigureD3.vue Normal file
View File

@@ -0,0 +1,659 @@
<template>
<div ref="box" class="box-hexagon" v-clickoutside="hexagonSvgClearScale" v-if="boxhexagonShow">
<!--<div class="hexagon-text" :style="{top:hexagonTextPos.top,left:hexagonTextPos.left}" v-show="hexagonTextPos.show">-->
<!--<span v-if="hexagonTextPos.data">-->
<!--{{hexagonTextPos.data?hexagonTextPos.data.alertName:''}}-->
<!--{{hexagonTextPos.data?hexagonTextPos.data.nums:''}}-->
<!--</span>-->
<!--</div>-->
<div id="hexagonSvg">
</div>
</div>
</template>
<script>
import {SVG} from '@svgdotjs/svg.js'
import '@svgdotjs/svg.panzoom.js'
let hexagonSvg=null; //Svg的实例
let domSvg=null; //Svg的dom 用来控制缩放
let svgPolyline=null // Svg hexagon的边框
let allHexagonText=[];
function hexagonEnter(){// 移入六边形
let level=this.first().data('level');
let color = level==='P1'?'#FFCDCD':(level==='P2'?'#FFE0B8':'#B2ECD9');
this.first().animate(100).stroke({width:3,color: '#909090'}).fill(color);
this.animate(100).transform({scale: 1.1});
svgPolyline.animate(100).stroke({ color: '#909090'})
}
function hexagonLeave(){// 移出六边形
let level=this.first().data('level');
let color = level ==='P1'?'#FAAFAF':(level==='P2'?'#FFCF92':'#99D7C2');
this.first().animate(100).stroke({width:0,color: '#909090'}).fill(color);
this.animate(100).transform({scale: 1});
svgPolyline.animate(100).stroke({ color: '#DADADA'})
}
function hexagonPoint(x,y,edge){ // 根据左上角坐标点生成六边的六个点的坐标 通过 svg画出
return new Promise(resolve=>{
let arr;
let x1,x2,x3,x4,x5,x6;
let y1,y2,y3,y4,y5,y6;
let MathSqrt3=Math.sqrt(3);
x1=x;
y1=y+edge/2;
x2=x+MathSqrt3*edge/2;
y2=y;
x3=x+MathSqrt3*edge;
y3=y+edge/2;
x4=x+MathSqrt3*edge;
y4=y+edge/2+edge;
x5=x+MathSqrt3*edge/2;
y5=y+edge*2;
x6=x;
y6=y+edge/2+edge;
arr=[{x:x1,y:y1},{x:x2,y:y2},{x:x3,y:y3},{x:x4,y:y4},{x:x5,y:y5},{x:x6,y:y6}];
let svgStrPoint='';
arr.forEach((item)=>{
svgStrPoint+=item['x']+','+item['y']+' '
});
let center=[x+MathSqrt3*edge/2,y+edge];
resolve({
point:arr,
svgStrPoint,
center
})
})
}
function midpoint(point1,point2){//计算中点
return {
x:(point1.x+point2.x)/2,
y:(point1.y+point2.y)/2,
}
}
function borderMove(left,top,borderSize,type){//left,top, 坐标 borderSize 长度,type 外层边框线从哪走到那
let point=[null,null];
let MathSqrt3=Math.sqrt(3);
let arr = svgPolyline.array();
switch(type){
case 1: //从左到右的斜上方运动
point[0]=left+MathSqrt3*borderSize/2;
point[1]=top-borderSize/2;
break;
case 2: //从左到右的斜下方运动
point[0]=left+MathSqrt3*borderSize/2;
point[1]=top+borderSize/2;
break;
case 3: //从上到下的正下方运动
point[0]=left;
point[1]=top+borderSize;
break;
case 4: //从右到左的斜下方运动
point[0]=left-MathSqrt3*borderSize/2;
point[1]=top+borderSize/2;
break;
case 5: //从右到左的斜上方运动
point[0]=left-MathSqrt3*borderSize/2;
point[1]=top-borderSize/2;
break;
case 6: //从右到左的斜上方运动
point[0]=left;
point[1]=top-borderSize;
break;
}
arr.push(point);
svgPolyline.plot(arr);
return point
}
export default {
name:"hexagonFigureSvg",
props:{
hexData:{},
col:{},
length:{}
},
watch:{
hexData:{
immediate: false,
deep: true,
handler() {
this.init();
}
},
col:{
immediate: false,
deep: true,
handler() {
this.init();
}
},
length:{
immediate: false,
deep: true,
handler() {
this.init();
}
},
},
data(){
return {
allHexagon:[],
allGroup:[],
hexagonEdge:90,
// col:5,
row:5,
boxPadLeft:360,
boxPadTop:180,
hexagonData:[],
textAll:[],
hexSize:'',
MathSqrt3:Math.sqrt(3),
hexagonTextPos:{
top:0,
left:0,
show:false,
data:null
},
timer:null,
boxhexagonShow:false,
pan:false,//是否移动
}
},
computed:{
interspace(){
return (this.hexagonEdge*this.MathSqrt3/5)*0.5;
}
},
mounted(){
// this.init()
},
methods:{
init(){ //创建svg实例
this.boxhexagonShow=false;
this.clearData();
setTimeout(()=>{
this.boxhexagonShow=true;
this.$nextTick(()=>{
this.hexagonData = JSON.parse(JSON.stringify(this.hexData.concat(this.hexData,this.hexData)));
localStorage.setItem('hexagonData',JSON.stringify(this.hexData.concat(this.hexData,this.hexData,this.hexData,this.hexData,this.hexData,this.hexData)));
this.hexagonData = JSON.parse(localStorage.getItem('hexagonData'));
this.hexagonData=this.hexagonData.slice(0,this.length);
hexagonSvg=SVG().addTo('#hexagonSvg').size('100%','100%')
.panZoom({zoomMin:0.5,zoomMax:3,zoomFactor:0.3,pinchZoom:false,wheelZoom:false})
.attr('id','SvgHex')
.attr('viewBox',`0 0 ${this.$refs.box.offsetWidth} ${this.$refs.box.offsetHeight}`); //svg实例
domSvg=document.getElementById('SvgHex');//svg dom
hexagonSvg.on('click',this.hexagonSvgClearScale);
hexagonSvg.on('panStart',this.hexagonSvgPanStart);
hexagonSvg.on('panEnd',this.hexagonSvgPanEnd);
this.getPadding().then(()=>{
this.getDataPoint();
});//获取到上方和左方的距离;
})
},100)
},
getPadding(){//确定到上方和下方的距离 保持居中
return new Promise(resolve=>{
let hexagonWidth = this.MathSqrt3*this.hexagonEdge+this.interspace;
let hexagonHeight = this.hexagonEdge*2+this.interspace;
if(this.hexagonData.length<this.col){
// boxPadLeft:200, boxPadTop:75,
this.boxPadLeft=(this.$refs.box.offsetWidth-this.hexagonData.length*hexagonWidth)/2;
this.boxPadTop=(this.$refs.box.offsetHeight - hexagonHeight)/2
}else{
this.boxPadLeft=(this.$refs.box.offsetWidth-this.col*hexagonWidth)/2;
this.boxPadTop=(this.$refs.box.offsetHeight - hexagonHeight*(Math.round(this.hexagonData.length/(this.col*2-1))+1))/2
}
this.row=(Math.round(this.hexagonData.length/(this.col*2-1))+1)*2
resolve();
})
},
getDataPoint(){ // 确定所有坐标点的位置
let col=this.col;//确定列数
let row=this.row;//确定列数
let paddingTop=this.boxPadTop; // 到上方的距离
let paddingLeft=this.boxPadLeft; //整体到左侧的距离
let arrIndex=0;
this.hexSize=this.MathSqrt3*this.hexagonEdge/2;
for(let i=0;i<row;i++){// 确定 所有 坐标点
if(arrIndex>this.hexagonData.length-1){break}
for(let j=0;j<col;j++){
if(arrIndex>this.hexagonData.length-1){break}
if(i===0){
this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft;
this.hexagonData[arrIndex].top=i*(this.hexSize*2) + paddingTop;
this.hexagonData[arrIndex].sub=i+'-'+j
} else if(i%2===0) {
// if(i===2&&( j===1 || j==2)){
// this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft;
// this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8)+ paddingTop;
// }else{
// continue;
// }
this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace)+ paddingLeft;
this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2*this.MathSqrt3 - this.hexSize*2/8)+ paddingTop;
this.hexagonData[arrIndex].sub=i+'-'+j
}else{
if(j===col-1) {break}
// if(i!==3){
// this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
// this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
// } else if(i==3&&(j===1)){
// this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
// this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2 - this.hexSize*2*1/8) + paddingTop;
// }else{
// continue;
// }
this.hexagonData[arrIndex].left=j*(this.hexSize*2 + this.interspace ) + this.hexSize*2/2 + this.interspace/2+ paddingLeft;
this.hexagonData[arrIndex].top=i*(this.hexSize*2 + this.interspace/2*this.MathSqrt3 - this.hexSize*2/8) + paddingTop;
this.hexagonData[arrIndex].sub=i+'-'+j
}
arrIndex++;
}
}
this.renderSomeHexagonAll();
},
renderSomeHexagonAll(){// 遍历所有数据 绘画六边形 之后画边框
this.hexagonData.forEach(item=>{
this.renderHexagon(item)
});
setTimeout(()=>{
this.borderHex();
hexagonSvg.zoom(0.33)
})
},
renderHexagon(item){ // 绘画六边形
hexagonPoint(item.left,item.top,this.hexagonEdge).then(data=>{
let color = item.level==='P1'?'#FAAFAF':(item.level==='P2'?'#FFCF92':'#99D7C2');
let gruop=hexagonSvg.group();
let polygon=gruop.polygon(data.svgStrPoint).fill(color);
// let polygon=gruop.polygon(data.svgStrPoint).attr('class',item.level+' hexagon_child_child').attr('style','fill:lime;stroke:purple;stroke-width:1');
polygon.data({
...data,
...item
});
gruop.on('mouseenter',hexagonEnter);
gruop.on('mouseleave',hexagonLeave);
gruop.on('click',this.hexagonSvgScale.bind(this, polygon.data('center'),item,data));
this.allHexagon.push(polygon);
this.allGroup.push(gruop)
// 向六边形内 添加文本 本质是根据六边形的中心点确定各个文本位置
let rgbColor='0,0,0';
let rect1=gruop.rect(this.hexagonEdge, this.hexagonEdge/3)
.attr({
x: data.center[0]-this.hexagonEdge/2,
y: data.center[1]-this.hexagonEdge/2
}).fill({ color: `rgba(${rgbColor},0)`}).data({level:item.level,color:rgbColor});
gruop.text()
allHexagonText.push(rect1);
let rect2=gruop.rect(this.hexagonEdge, this.hexagonEdge/3
).attr({
x: data.center[0]-this.hexagonEdge/2,
y: data.center[1]-this.hexagonEdge/2 + this.hexagonEdge/3 +5
}).fill({ color: `rgba(${rgbColor},0)`}).data({level:item.level,color:rgbColor});
allHexagonText.push(rect2);
let rect3=gruop.rect(this.hexagonEdge, this.hexagonEdge/3)
.attr({
x: data.center[0]-this.hexagonEdge/2,
y: data.center[1]-this.hexagonEdge/2+ this.hexagonEdge/3*2 + 10
}).fill({ color: `rgba(${rgbColor},0)`}).data({level:item.level,color:rgbColor});
allHexagonText.push(rect3);
});
},
hexagonSvgScale(center,item1,data,e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
if(!this.pan){
hexagonSvg.animate(300).zoom(1,{ x: center[0], y: center[1] });
allHexagonText.forEach(item=>{
let rgbColor = item.data('color')
item.fill({ color: `rgba(${rgbColor},0.05)`})
})
}
},
hexagonSvgClearScale(){
if(!this.pan){
hexagonSvg.animate(300).zoom(0.33);
allHexagonText.forEach(item=>{
item.fill({ color: 'rgba(115,205,175,0)'})
})
}
},
hexColorToRgb(color){
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
if (reg.test(color)) {
// 如果只有三位的值，需变成六位，如：#fff => #ffffff
if (color.length === 4) {
let colorNew = "#";
for (let i = 1; i < 4; i += 1) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorNew;
}
// 处理六位的颜色值，转为RGB
let colorChange = [];
for (let i = 1; i < 7; i += 2) {
colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
}
return colorChange.join(",");
} else {
return color;
}
},
hexagonSvgPanStart(ev){ // 实例移动开始 解绑点击函数
ev.preventDefault();
setTimeout(()=>{
this.pan=true;
},100)
},
hexagonSvgPanEnd(ev){ // 实例移动结束 重新绑定点击函数
ev.preventDefault();
setTimeout(()=>{
this.pan=false;
},100)
},
borderHex(){//外层边框 数组点
let length = this.allHexagon.length;
let k={x:-this.interspace,y:-(this.interspace*2)*this.MathSqrt3/6};//边框对起点的偏移量
let item=this.allHexagon[0].data('point')[0];
let endItemSub=this.allHexagon[length-1].data('sub').split('-');
let borderCol=endItemSub[1];
let borderRow=endItemSub[0];
let borderPoint=[item.x+k.x,item.y+k.y];
let borderSize = this.hexagonEdge*1.2;
svgPolyline=hexagonSvg.polyline(borderPoint[0]+','+borderPoint[1]).fill('none').stroke({ color: '#DADADA', width: 1 , linecap: 'round', linejoin: 'round'});//边框 起点
//先从左到右划线 应该是 col的长度
let borderColTop=0;
if(borderRow==0){
borderColTop=borderCol;
} else{
borderColTop=this.col-1;
}
for(let i=0;i<=borderColTop*2;i++){
if(i===1){
borderSize = this.hexagonEdge*1.1
}
if(i%2===0){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1);
}else{
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
}
}
borderSize = this.hexagonEdge*1.2
// 从上到下 应该是row的长度 分情况
let borderRowRight=0;//右边循环次数
// 情况1 borderCol<=this.col && row==0时
if((borderCol<=this.col-1)&&borderRow==0){
borderRowRight=3;
for(let i=0;i<borderRowRight-1;i++){
if(i===1){
// borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,true);
borderSize = this.hexagonEdge*1.2
}
if(i===2){
// borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,true);
borderSize = this.hexagonEdge*1.1
}
if(i%4===0){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
}else if(i%4===1){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
else if(i%4===2){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
}else if(i%4===3){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
}
}
// 情况2 border==this.col&& row>0时 且row 为奇数事
if(borderCol==this.col-2&&borderRow>0&&borderRow%2==1){
borderRowRight=2*(Number(borderRow)+1);
for(let i=0;i<borderRowRight;i++){
if(i%4===0){
borderSize = this.hexagonEdge*1.1;
if(i==0){
borderSize = this.hexagonEdge*1.2;
}
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
}else if(i%4===1){
borderSize = this.hexagonEdge*1.2;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
else if(i%4===2){
borderSize = this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
}else if(i%4===3){
borderSize = this.hexagonEdge*1.03;
if(i===borderRowRight-1){
borderSize = this.hexagonEdge*1.1;
}
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
}
}
// 情况3 borderCol==this.col && row>0 且 row 为偶数事
if(borderCol==this.col-1&&borderRow>0&&borderRow%2==0){
borderRowRight=2*(Number(borderRow)+1)+1;
for(let i=0;i<borderRowRight-1;i++){
if(i%4===0){
borderSize = this.hexagonEdge*1.1
if(i==0){
borderSize = this.hexagonEdge*1.2
}
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
}else if(i%4===1){
borderSize = this.hexagonEdge*1.2;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
else if(i%4===2){
borderSize = this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
}else if(i%4===3){
borderSize = this.hexagonEdge*1.03;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
}
}
// 情况4 border<this.col&& row>0时 且row 为奇数事
if(borderCol<this.col-2&&borderRow>0&&borderRow%2==1){
borderRowRight=2*(Number(borderRow-1)+1);
for(let i=0;i<borderRowRight;i++){
if(i%4===0){
borderSize = this.hexagonEdge*1.1
if(i==0){
borderSize = this.hexagonEdge*1.2
}
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
}else if(i%4===1){
borderSize = this.hexagonEdge*1.2;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
else if(i%4===2){
borderSize = this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
}else if(i%4===3){
borderSize = this.hexagonEdge*1.03;
if(i===borderRowRight-1){
borderSize = this.hexagonEdge*1.1;
}
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
}//向下移动
borderSize = this.hexagonEdge*1.2
for(let i=0;i<(this.col-borderCol-1)*2-1;i++){//向左移动
if(i===1){
borderSize = this.hexagonEdge*1.1
}
if(i==(this.col-borderCol-1)*2-2){
borderSize = this.hexagonEdge
}
if(i%2===0){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
}else{
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
}
}
borderSize = this.hexagonEdge*1.1
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
// 情况5 borderCol<this.col && row>0 且 row 为偶数事
if(borderCol<this.col-1&&borderRow>0&&borderRow%2==0){
borderRowRight=2*(Number(borderRow-1)+1)+1;
for(let i=0;i<borderRowRight-1;i++){
if(i%4===0){
borderSize = this.hexagonEdge*1.1
if(i==0){
borderSize = this.hexagonEdge*1.2
}
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2);
}else if(i%4===1){
borderSize = this.hexagonEdge*1.2;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
else if(i%4===2){
borderSize = this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
}else if(i%4===3){
borderSize = this.hexagonEdge*1.03;
if(i===borderRowRight-2){
borderSize = this.hexagonEdge*1.15;
}
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
}
borderSize = this.hexagonEdge*1.2
for(let i=0;i<(this.col-borderCol-1)*2-1;i++){//向左移动
if(i==1){
borderSize = this.hexagonEdge*1.1
}
if(i==(this.col-borderCol-1)*2-2){
borderSize = this.hexagonEdge*1
}
if(((Number(borderCol)+2)==this.col)&&(i==0)){
borderSize = this.hexagonEdge*1.1
}
if(i%2===0){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
}else{
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
}
}
borderSize = this.hexagonEdge*1.1
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,3);
}
// 从右到左 就是结束时的列数
borderSize = this.hexagonEdge*1.2
for(let i=0;i<=borderCol*2+1;i++){
if(i===1){
// borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,2,true);
borderSize = this.hexagonEdge*1.1
}
if(i==borderCol*2+1) {
borderSize = this.hexagonEdge*1.2
}
if(i%2===0){
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,4);
}else{
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
}
}
// 从下向上的移动
// 分兩種情況
borderSize = this.hexagonEdge*1.2;
if(borderRow%2==1){
for(let i=0;i<=borderRow*2;i++){
if(i%4===0){
borderSize = this.hexagonEdge*1.1;
if(i!== 0){
borderSize = this.hexagonEdge*1.03;
}
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6);
}else if(i%4===1){
borderSize = this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
}
else if(i%4===2){
borderSize = this.hexagonEdge*1.2;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6);
}else if(i%4===3){
borderSize = this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1);
}
}
}
if(borderRow%2==0){
for(let i=0;i<=borderRow*2;i++){
if(i%4===0){
borderSize = this.hexagonEdge*1.2
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6);
}else if(i%4===1){
borderSize = this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,1);
}
else if(i%4===2){
borderSize = this.hexagonEdge*1.03;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,6);
}else if(i%4===3){
borderSize = this.hexagonEdge*1.1;
borderPoint = borderMove(borderPoint[0],borderPoint[1],borderSize,5);
}
}
}
},
clearData(){// 清除数据 以及解绑事件 防止内存崩溃
if(hexagonSvg){
this.allHexagon.forEach((item)=>{
item.off('mouseenter',hexagonEnter);
item.off('mouseleave',hexagonLeave);
item.off('click',this.hexagonSvgScale);
// item.clear();
})
this.allHexagon=[];
this.hexagonData=[];
hexagonSvg.off('click',this.hexagonSvgClearScale);
// svgPolyline.clear();
// hexagonSvg.clear();
hexagonSvg=null; //Svg的实例
svgPolyline=null // Svg hexagon的边框
}
},
},
beforeDestroy(){
this.clearData()
}
}
</script>
<style scoped>
.box-hexagon, #hexagonSvg {
width: 100%;
height: 100%;
position: relative;
min-width: 200px;
min-height: 200px;
}
.hexagon-text{
position: absolute;
z-index: 1;
font-size: 10px;
}
</style>
<style>
#SvgHex{
transition: transform .25s linear;
transform-origin: 0 0;
}
#SvgHex.hexagonSvgBox{
transition: .25s linear;
}
</style>

13
nezha-fronted/src/components/common/overView/messageRule.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name:"messageRule"
}
</script>
<style scoped>
</style>