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

feat：调用查询接口 查询topo 以及处理get请求的文件流为base64，删除console

Browse Source
This commit is contained in:
zhangyu
2020-08-27 15:23:52 +08:00
parent 16c2caa41b
commit cfb82c9277
7 changed files with 200 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
nezha-fronted/src/components/common/project/addLine.vue
View File

@@ -16,13 +16,13 @@
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
<el-form class="right-box-form right-box-form-left" ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="Line Name" prop="lineName" class="line-name">
<el-input v-model="form.lineName" type="small"></el-input>
<el-input v-model="form.lineName" size="small"></el-input>
</el-form-item>
<el-row class="form-title">Option</el-row>
<el-form-item label="width" prop="width" class="line-name">
<el-input v-model="form.width" type="small"></el-input>
<el-input v-model="form.width" size="small"></el-input>
</el-form-item>
<!--<el-form-item label="roundness" class="line-name">-->
<!--<el-input v-model="form.roundness"></el-input>-->
@@ -42,7 +42,7 @@
<!--</el-select>-->
<!--</el-form-item>-->
<el-form-item label="箭头方向" prop="arrows" class="arrows">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" type="small">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
<img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
<img v-if="form.arrows=='to'" src="./image/rightArrow.png" />
@@ -216,7 +216,7 @@
}
},
mounted(){
this.addExpression();
// this.addExpression();
},
methods:{
onSubmit(){
@@ -225,8 +225,8 @@
let model=Object.assign({id:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
model.width = parseInt(model.width) || 4;
model.smooth={
roundness:model.roundness,
type:model.type ,
roundness:(Math.random()*8 +1)/10 ,//获取0.1-0.9之间的随机数
type:'curvedCW',
};
model.expressions=[];
this.promqlKeys.forEach((item,index)=>{
@@ -254,7 +254,7 @@
this.promqlCount++;
},
removeExpression(index) {
if (this.promqlCount > 1) {
if (this.promqlCount >= 1) {
this.expressions.splice(index, 1);
this.legends.splice(index, 1);
this.name.splice(index, 1);
@@ -328,6 +328,7 @@
display: flex;
align-items: center;
width: calc(100% - 30px);
height: 30px;
}
.color-show-left{
width: 18px;
@@ -352,15 +353,26 @@
}
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6;
height: 41px;
height: 28px;
width: calc(100% - 30px);
}
.arrows /deep/ .el-input__inner{
display: none;
}
.arrows /deep/ .el-input__prefix{
height: 28px;
line-height: 28px;
}
/deep/ .el-select{
width: 262px;
}
.el-row {
margin-bottom: 20px;
line-height: 32px;
}
.el-row:last-child {
margin-bottom: 0;
}
.nz-btn-edit-ok{
position: absolute;
bottom: 0;
@@ -480,66 +492,3 @@
/* end--table*/
</style>
<style lang="scss">
.right-box-edit-endpoint .el-pagination__total {
float: left;
}
right-box-edit-endpoint .pagination {
padding-top: 12px;
text-align: center;
}
.endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
font-size: 13px;
min-width: 20px !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
border: 1px solid rgba(154,154,154,0.20);
border-radius: 2px;
border-radius: 2px;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
color: white !important;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #666;
}
.right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
line-height: 20px;
}
.right-box-edit-endpoint .el-pagination .el-pager .more::before {
line-height: 20px;
}
.right-box-edit-endpoint .el-pager li.number{
font-family: NotoSansSC-Regular;
color: #666666;
letter-spacing: 0;
font-weight:normal;
}
.right-box-edit-endpoint .el-pager li.number.active{
font-family: NotoSansSC-Regular;
color: #FFFFFF;
letter-spacing: 0;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: $global-text-color-active;
border-radius: 2px;
border-radius: 2px;
}
.right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
font-family: NotoSansSC-Regular;
color: #666666;
letter-spacing: 0;
font-weight:normal;
}
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
height: 20px;
border-color: rgba(154,154,154,0.20);
}
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
border-color: rgba(154,154,154,0.20);
}
</style>

232
nezha-fronted/src/components/common/project/addNode.vue
View File

@@ -32,13 +32,17 @@
<el-form-item label="Icon" prop="iconId" class="icon">
<el-select v-model="form.iconId" placeholder="" popper-class="asset-dropdown" size="small">
<div slot="prefix" class="sel-image">
<img v-if="form.iconId" :src="selImage.image" style="height: 28px"/>
<span v-if="form.iconId" class="sel-image-name">{{selImage.imageName}}</span>
</div>
<el-option
v-for="item in iconArray"
:key="item.id"
:label="item.label"
:value="item.id">
<span style="float: left;width: 50%">
<img :src="item.image" />
<img :src="item.image" style="width: 24px;height: 32px"/>
</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.imageName }}</span>
</el-option>
@@ -49,7 +53,7 @@
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
@change="onChange"
:auto-upload="true"
>
上传文件
</el-upload>
@@ -129,12 +133,6 @@
import promqlInput from "@/components/page/dashboard/explore/promqlInput";
import chartDataFormat from "@/components/charts/chartDataFormat";
import {getUUID,resetZIndex} from "@/components/common/js/common";
import a from './image/a.png'
import b from './image/b.png'
import c from './image/c.png'
import d from './image/d.png'
import e from './image/e.png'
import f from './image/f.png'
var rz = {
methods: {
rz(e) {
@@ -149,7 +147,7 @@
},
props:{
nodeData:{},
moduleDataS:{}
moduleDataS:{},
},
mixins: [rz],
watch:{
@@ -165,7 +163,16 @@
},
moduleDataS:{
handler(n){
console.log(n)
// console.log(n)
},
immediate: true,
deep: true,
},
'form.iconId':{
handler(n){
if(n){
this.selImage=this.iconArray.find(item=>item.id===n)
}
},
immediate: true,
deep: true,
@@ -177,6 +184,9 @@
moduleId:'',
iconId:'',
},
selImage:'',
file:'',
uploadFileList:[],
unitOptions: chartDataFormat.unitOptions(),
promqlKeys:[],
expressions: [],
@@ -193,21 +203,50 @@
{ required: true, message: '请选择icon', trigger: 'blur' },
],
},
iconArray:[
{id:1,image:a,imageName:"module1"},
{id:2,image:b,imageName:"module1"},
{id:3,image:c,imageName:"module1"},
{id:4,image:d,imageName:"module1"},
{id:5,image:e,imageName:"module1"},
{id:6,image:f,imageName:"module1"},
// {id:7,img:'./a.png',label:'model',},
],
iconArray:[],
}
},
mounted(){
this.addExpression()
// this.addExpression();
this.addNodeInit()
},
methods:{
addNodeInit(){
this.$get('/project/topo/icon').then(res=>{
this.iconArray=res.data.list;
this.iconArray.forEach((item,index)=>{
item.imageName=item.name;
delete item.name;
this.dealImg(`/project/topo/icon/${item.id}`).then((data)=>{
item.image=data;
if(index===this.iconArray.length-1){
setTimeout(()=>{
this.iconArray=[...this.iconArray];
})
}
})
});
})
},
dealImg(url) {
// 处理后端传过来的图片流乱码问题
if (url) {
return new Promise((resolve,reject)=>{
this.$axios
.get(url, {
responseType: "arraybuffer"
})
.then(res => {
return ("data:image/jpeg;base64," +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), "")));
})
.then(data => {
resolve(data)
})
.catch(err => {
});
})
}
},
onSubmit(){
this.$refs['form'].validate((valid) => {
if (valid) {
@@ -215,7 +254,6 @@
let img=this.iconArray.find(item=>item.id===this.form.iconId);
let model=Object.assign({...this.form},{...module},{...img},{id:this.form.moduleId,shape:'image',shapeProperties:{useImageSize:false}},);
model.label=model.name;
console.log(this.promqlKeys,this.expressions,this.promqlCount,this.legends,this.name,this.unit);
model.expressions=[];
this.promqlKeys.forEach((item,index)=>{
model.expressions.push({
@@ -243,7 +281,7 @@
this.promqlCount++;
},
removeExpression(index) {
if (this.promqlCount > 1) {
if (this.promqlCount >= 1) {
this.expressions.splice(index, 1);
this.legends.splice(index, 1);
this.name.splice(index, 1);
@@ -272,58 +310,38 @@
this.esc();
},
beforeAvatarUpload(file){
const isJPG = file.type === 'image/jpeg';
let isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
this.$message.error('上传图片只能是 JPG/png 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
console.log(file);
if(isJPG && isLt2M){
this.getBase64(file).then(res => {
const params = res.split(',')
console.log(params, 'params')
if (params.length > 0) {
this.strimagebase64 = params[1]
console.log(this.strimagebase64);
}
});
this.$message.error('上传图片大小不能超过 2MB!');
}
this.file=file;
this.upload();
return false;
},
handleAvatarSuccess(file){
handleAvatarSuccess(file,res){
console.log(res);
},
onChange(file,fileList){
this.getBase64(file.raw).then(res => {
const params = res.split(',')
console.log(params, 'params')
if (params.length > 0) {
this.strimagebase64 = params[1]
}
});
},
getBase64(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader()
let imgResult = ''
reader.readAsDataURL(file)
reader.onload = function() {
imgResult = reader.result
}
reader.onerror = function(error) {
reject(error)
}
reader.onloadend = function() {
resolve(imgResult)
upload() {
let form = new FormData();
form.append("file",this.file);
let fileName=this.file.name;
form.append("name", fileName.substring(0, fileName.lastIndexOf(".")));
this.$post('/project/topo/icon',form,{'Content-Type': 'multipart/form-data'}).then(res => {
if(res.code == 200 ){
this.form.iconId=res.data.id;
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.addNodeInit();
}else{
this.$message.error(res.msg);
}
})
}
},
},
}
@@ -341,6 +359,19 @@
vertical-align: middle;
margin-left: 5px;
}
.sel-image{
height: 28px;
line-height: 28px;
width: 300px;
text-align: left;
}
.sel-image-name{
float: right;
display: inline-block;
height: 28px;
line-height: 28px;
color: #333333;
}
.nz-btn-edit-ok{
position: absolute;
bottom: 0;
@@ -351,7 +382,18 @@
bottom: 0;
left:0;
}
.icon /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6;
height: 28px;
width: calc(100% - 30px);
}
.icon /deep/ .el-input__inner{
display: none;
}
.icon /deep/ .el-input__prefix{
height: 28px;
line-height: 28px;
}
/* begin--搜索框*/
.endpoint-asset-search {
display: inline-block;
@@ -462,6 +504,7 @@
.el-row {
margin-bottom: 20px;
line-height: 32px;
}
.el-row:last-child {
margin-bottom: 0;
@@ -513,66 +556,3 @@
z-index: 2900;
}
</style>
<style lang="scss">
.right-box-edit-endpoint .el-pagination__total {
float: left;
}
right-box-edit-endpoint .pagination {
padding-top: 12px;
text-align: center;
}
.endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
font-size: 13px;
min-width: 20px !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
border: 1px solid rgba(154,154,154,0.20);
border-radius: 2px;
border-radius: 2px;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
color: white !important;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #666;
}
.right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
line-height: 20px;
}
.right-box-edit-endpoint .el-pagination .el-pager .more::before {
line-height: 20px;
}
.right-box-edit-endpoint .el-pager li.number{
font-family: NotoSansSC-Regular;
color: #666666;
letter-spacing: 0;
font-weight:normal;
}
.right-box-edit-endpoint .el-pager li.number.active{
font-family: NotoSansSC-Regular;
color: #FFFFFF;
letter-spacing: 0;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: $global-text-color-active;
border-radius: 2px;
border-radius: 2px;
}
.right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
font-family: NotoSansSC-Regular;
color: #666666;
letter-spacing: 0;
font-weight:normal;
}
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
height: 20px;
border-color: rgba(154,154,154,0.20);
}
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
border-color: rgba(154,154,154,0.20);
}
</style>

6
nezha-fronted/src/components/common/project/popData/alertTable.vue
View File

@@ -1,6 +1,6 @@
<template>
<!--<div class="mc" @click.self="clickOutside">-->
<div class="right-box right-box-project-alert" v-clickoutside="clickOutside">
<div class="mc" @click.self="clickOutside">
<div class="right-box right-box-project-alert">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
@@ -147,7 +147,7 @@
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</div>
<!--</div>-->
</div>
</template>
<script>

6
nezha-fronted/src/components/common/project/popData/lineChart.vue
View File

@@ -708,7 +708,6 @@
let chartUnit=chartInfo.unit;
chartUnit=chartUnit?chartUnit:2;
let unit=chartDataFormat.getUnit(chartUnit);
//console.info(value, chartUnit, unit.compute(value,index))
return unit.compute(value,index);
},
},
@@ -858,7 +857,6 @@
let divHeight = legendDiv.offsetHeight;
let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
//console.log("11____00",sumHeight,divHeight,legendDiv)
self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
setTimeout(function () {
@@ -882,10 +880,8 @@
let divHeight = legendDiv.offsetHeight;
let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
//console.log("11____00",sumHeight,divHeight,legendDiv)
self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
console.log(self.seriesItemScreen,self.seriesItemArrScreen);
self.echartModalStore.off('finished');
})
}, 100);
@@ -1185,7 +1181,6 @@
}
let step = bus.getStep(startTime,endTime);
if (type === 'list') { // 普通模式,主控台使用
console.info(this.data);
axiosArr = this.data.elements.map((ele) => {
const filterItem = ele;
let query = encodeURIComponent(filterItem.expression);
@@ -1438,7 +1433,6 @@
let divHeight = legendDiv.offsetHeight;
let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
//console.log("11____00",sumHeight,divHeight,legendDiv)
this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`;
this.echartModalStore.resize({height: (sumHeight - divHeight - this.screenTitleHeight)});//图表的高度
})

1
nezha-fronted/src/components/common/project/popData/totalChart.vue
View File

@@ -703,7 +703,6 @@
},
// 关闭loading状态
loadingFalse(item){
console.log(item);
this.$set(this.dataList[item.id],'loading',false);
},
},

18
nezha-fronted/src/components/common/project/topology.vue
View File

@@ -87,6 +87,7 @@
@del="nodeDel"
:isAdd="isNodeAdd"
:moduleDataS="moduleDataS"
:projectName="allModuleInfo.basic"
></add-model>
</transition>
<transition name="right-box">
@@ -258,8 +259,19 @@
saveTopology(){
let nodes=this.formatNodes([...this.nodesArray]);
let edges=this.formatEdges([...this.edgesArray]);
console.log(nodes,edges,this.nodesArray,this.edgesArray);
this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges}),projectId:this.allModuleInfo.basic.id});
this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges}),projectId:this.allModuleInfo.basic.id}).then(res=>{
if(res.code==200){
this.$message({
message: this.$t("tip.saveSuccess"),
type: 'success'
});
}
}).catch(res=>{
this.$message({
message: res.msg,
type: 'error'
});
});
this.$emit('editVisNetworkChange',false);
},
formatNodes(arr){
@@ -398,6 +410,8 @@
});
this.$nextTick(()=>{
this_.modelTopUpdate();
this_.arrayDiff();
this_.popDataShowUpdate();
})
},
addModel(model){ // 添加model

83
nezha-fronted/src/components/common/project/visNetwork.vue
View File

@@ -24,7 +24,7 @@
<!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon&#45;&#45;right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
</span>
<span>
<i class="nz-icon nz-icon-edit float-right" @click="editVisNetworkChange(!editVisNetwork)"></i>
<i class="nz-icon nz-icon-edit float-right" @click="editVisNetworkChange(true)"></i>
<!--<i class="nz-icon nz-icon-zoomin float-right"></i>-->
<!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>-->
</span>
@@ -44,14 +44,14 @@
<div>
<span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
</div>
<div>
<!--<span>-->
<!--<span class="label">Alert state :</span>-->
<!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
<!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
<!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
<!--</span>-->
</div>
<!--<div>-->
<!--<span>-->
<!--<span class="label">Alert state :</span>-->
<!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
<!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
<!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
<!--</span>-->
<!--</div>-->
<div>
<span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
</div>
@@ -172,7 +172,9 @@
//其他
isError:false,
nodesArray:[],
nodesArrayOther:[],
edgesArray:[],
edgesArrayOther:[],
dragTitleShow:false,
dropdownMenuShow:false,
editVisNetwork:false,
@@ -190,38 +192,43 @@
},
getNetworkData(n){
this.topologyLoading=true;
console.log(n);
this.editVisNetwork=false;
this.$get('/project/topo',{projectId:n.id}).then(res=>{
console.log(res);
if(res.data.topo){
this.nodesArray=this.formatNodesArr(res.data.topo.nodes);
this.edgesArray=this.formatEdgesArr(res.data.topo.lines);
console.log(this.nodesArray,this.edgesArray)
this.nodesArray=[];
this.edgesArray=[];
this.nodesArrayOther=this.formatNodesArr(res.data.topo.nodes);
this.edgesArrayOther=this.formatEdgesArr(res.data.topo.lines);
}else{
this.nodesArray=[];
this.edgesArray=[];
setTimeout(()=>{
this.topologyLoading=false;
this.$refs['topology'].setData();
},500)
}
setTimeout(()=>{
this.topologyLoading=false;
this.$refs['topology'].setData();
},500)
this.$refs['topology'].viewsCenter={x:0,y:0};
})
},
formatNodesArr(arr){
let arr1=[];
if(!arr){return arr1}
arr.forEach((item)=>{
arr.forEach((item,index)=>{
item.shape='image';
item.id=item.moduleId;
switch(item.iconId){
case 1: item.image=a;break;
case 2: item.image=b;break;
case 3: item.image=c;break;
case 4: item.image=d;break;
case 5: item.image=e;break;
case 6: item.image=f;break;
default: item.image=a;
}
this.dealImg(`/project/topo/icon/${item.iconId}`).then((data)=>{
item.image=data;
if(index===arr.length-1){
setTimeout(()=>{
this.nodesArray=[...this.nodesArrayOther];
this.edgesArray=[...this.edgesArrayOther];
setTimeout(()=>{
this.topologyLoading=false;
this.$refs['topology'].setData();
},500)
})
}
})
});
return arr
},
@@ -232,10 +239,28 @@
item.dashes=[15,15];
item.from=item.source;
item.to=item.target;
});
return arr
},
dealImg(url) {
// 处理后端传过来的图片流乱码问题
if (url) {
return new Promise((resolve,reject)=>{
this.$axios
.get(url, {
responseType: "arraybuffer"
})
.then(res => {
return ("data:image/jpeg;base64," +btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), "")));
})
.then(data => {
resolve(data)
})
.catch(err => {
});
})
}
},
editVisNetworkChange(flag){
this.editVisNetwork=flag;
if(flag){