Commit 3e954d3c authored by yaqizhang's avatar yaqizhang

Merge branch 'master' of ssh://111.61.77.35:15/yaqizhang/xt-whp into master

parents 27e9c1fc 77435e7c
...@@ -339,6 +339,36 @@ export const defalutRouterMap = [ ...@@ -339,6 +339,36 @@ export const defalutRouterMap = [
}, },
component: () => import('@/views/EnseList/EnseList.vue') component: () => import('@/views/EnseList/EnseList.vue')
}, },
{
path: '/Guaranteebise',
name: 'Guaranteebise',
component: Layout,
redirect: '/guarantee',
meta: {
title: '应急综合保障',
icon: 'iconfont iconqiye',
},
children: [
{
path: '/guarantee',
name: 'guarantee',
meta: {
title: '应急资源管理',
icon: '',
},
component: () => import('@/views/guarantee/guarantee.vue')
},
{
path: '/dangerMap',
name: 'dangerMap',
meta: {
title: '应急资源可视化',
icon: '',
},
component: () => import('@/views/guarantee/dangerMap.vue')
}
]
},
] ]
}, },
{ {
......
export default { export default {
// URL:'http://192.168.1.104:60018/danger', URL:'http://36.148.1.253:8901/danger',
// URL:'http://127.0.0.1:60018/danger', //URL:'http://127.0.0.1:60018/danger',
URL:'http://36.148.23.59:8901/danger', //URL:'http://36.148.23.59:8901/danger',
titleArray: [], titleArray: [],
enterpriseId:'', enterpriseId:'',
componentUrl: { componentUrl: {
...@@ -25,7 +25,9 @@ export default { ...@@ -25,7 +25,9 @@ export default {
MenuMg: "System", MenuMg: "System",
RoleMg: "System", RoleMg: "System",
UserMg: "System", UserMg: "System",
VideoList: "Video" VideoList: "Video",
guarantee: "guarantee",
dangerMap: "guarantee",
}, },
deleteFun(that: any, url: any, callback: any) { deleteFun(that: any, url: any, callback: any) {
(that as any) (that as any)
......
<template>
<div class="gis">
<div id="mapbox">
<div style="position:absolute;left:-30px;top:10px">
<button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button>
<button @click="Mutil.tianSlB()" class="map-botton">全景地图</button>
</div>
<div v-show="isShowVideo" v-drag
style="display: none;position:absolute;left:1000px;top:10px;z-index: 30;padding: 5px; background-color: rgba(2, 40, 90, 0.8);width: 400px;height: 255px;border-radius: 5px;border: 1px solid #000;">
<!--<div style="width: 100%;height: 30px;">-->
<!--<span style="float: left;color: #fff;font-size: 1rem;">{{deviceVideo.deviceName}}</span>-->
<!--<span @click="closeVideo" style="float: right;margin-right: 10px;font-size: 1.5rem;color: #fff;"-->
<!--class="el-icon-close"></span>-->
<!--</div>-->
<div id="div_video"></div>
</div>
</div>
<div style="">
<div class="markBox">
<div @click="mapma" class="markbox-div" ref="material" style="margin-top: 50px;">
<div class="markbox-click" ref="maimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="30px" src="@/assets/mark/tongxin.png" />
</div>
<div class="markbox-span" ref="zma" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>通信保障机构<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum0}}</span></span>
</div>
</div>
<div @click="mapma1" class="markbox-div" ref="material1">
<div class="markbox-click" ref="maimg1" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="30px" src="@/assets/mark/wuzi.png" />
</div>
<div class="markbox-span" ref="zma1" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>救援物资<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum1}}</span></span>
</div>
</div>
<div @click="mapma2" class="markbox-div" ref="material2">
<div class="markbox-click" ref="maimg2" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="30px" src="@/assets/mark/zhuanjia.png" />
</div>
<div class="markbox-span" ref="zma2" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>专家资源<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum2}}</span></span>
</div>
</div>
<div @click="mapma3" class="markbox-div" ref="material3">
<div class="markbox-click" ref="maimg3" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="30px" src="@/assets/mark/jiuyuan.png" />
</div>
<div class="markbox-span" ref="zma3" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>救援队伍<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum3}}</span></span>
</div>
</div>
<div @click="mapma4" class="markbox-div" ref="material4">
<div class="markbox-click" ref="maimg4" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="30px" src="@/assets/mark/binan.png" />
</div>
<div class="markbox-span" ref="zma4" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>避难场所<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum4}}</span></span>
</div>
</div>
<div @click="mapma5" class="markbox-div" ref="material5">
<div class="markbox-click" ref="maimg5" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="30px" src="@/assets/mark/fanghu.png" />
</div>
<div class="markbox-span" ref="zma5" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>防护目标<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum5}}</span></span>
</div>
</div>
<div @click="mapma6" class="markbox-div" ref="material6">
<div class="markbox-click" ref="maimg6" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="30px" src="@/assets/mark/yiliao.png" />
</div>
<div class="markbox-span" ref="zma6" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>医疗卫生单位<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{DataNum6}}</span></span>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide
} from "vue-property-decorator";
import METHOD from "@/utils/methods";
import "@/utils/directive.js";
import {
Icon
} from "element-ui";
import "@/utils/VamapLoad.ts";
import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
import METHOD from "@/utils/methods";
import QyMaptwo from './qyMaptwo.vue';
import vueDrag from 'vue-dragging'
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
Vue.use(vueDrag)
@Component({
components: {
DrawTool,
Search,
QyMaptwo
},
})
export default class GIS extends Vue {
@Provide() Mutil: any;
@Provide() mapLoadDone = false;
@Provide() MAP: any;
@Provide() isShowVideo: boolean = false;
@Provide() player: any;
@Provide() mapOption = {
plugin: [{
pName: "MapType",
defaultType: 1,
},
{
pName: "ToolBar",
},
],
center: [115, 28],
zoom: 10,
events: {},
};
@Provide() searchData: any = {
type: "0",
};
/* 地图 */
@Provide() markers: any = [];
@Provide() markers0: any = [];
@Provide() markers1: any = [];
@Provide() markers2: any = [];
@Provide() markers3: any = [];
@Provide() markers4: any = [];
@Provide() markers5: any = [];
@Provide() markers6: any = [];
@Provide() mapData: any = [];
@Provide() windowsArr: any = [];
@Provide() windowsArr0: any = [];
@Provide() windowsArr1: any = [];
@Provide() windowsArr2: any = [];
@Provide() windowsArr3: any = [];
@Provide() windowsArr4: any = [];
@Provide() windowsArr5: any = [];
@Provide() windowsArr6: any = [];
@Provide() DataNum0: any = 0;
@Provide() DataNum1: any = 0;
@Provide() DataNum2: any = 0;
@Provide() DataNum3: any = 0;
@Provide() DataNum4: any = 0;
@Provide() DataNum5: any = 0;
@Provide() DataNum6: any = 0;
@Provide() currentWindow: any = "";
// @Provide() searchOption: any = {
// city: "石家庄",
// citylimit: true,
// };
@Provide() PAGE: any = {
page: 1,
size: 1000
};
@Provide() materialData: any = [];
@Provide() lastVideoPlayId: any = "";
@Provide() markersB: any = [];
@Provide() dialogVisible1: Boolean = false;
@Provide() dialogVisible2: Boolean = false;
@Provide() toolobj: any;
@Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {};
@Provide() deviceVideo: any = {};
@Provide() qiyeVisble: boolean = true;
@Provide() wxyVisble: boolean = true;
@Provide() shipinVisble: boolean = true;
@Provide() maVisble: boolean = true;
@Provide() ma1Visble: boolean = true;
@Provide() ma2Visble: boolean = true;
@Provide() ma3Visble: boolean = true;
@Provide() ma4Visble: boolean = true;
@Provide() ma5Visble: boolean = true;
@Provide() ma6Visble: boolean = true;
@Provide() weihaiVisble: boolean = true;
@Provide() yinhuanVisble: boolean = true;
@Provide() treecheckedObj: any = {};
@Provide() goods: any = {};
@Provide() trouble: any = {};
getMaterial(){
let that = this;
var param = Object.assign({}, that.PAGE, );
METHOD.axiosPost(
that,
`/material/materialInfoList`,
param,
function (res: any) {
that.materialData = res.data;
if (res.code == 0&& res.data.pageData.length > 0) {
that.matermapData = res.data.pageData;
var matermapData0 =[];
var matermapData1 =[];
var matermapData2 =[];
var matermapData3 =[];
var matermapData4 =[];
var matermapData5 =[];
var matermapData6 =[];
let latSum = 0;
let lngSum = 0;
that.matermapData.forEach((ele: any, index: any) => {
if(ele.materialType=="救援物资"){
that.addMaterialMark1(ele, index);
matermapData1.push(ele)
}else if(ele.materialType=="专家资源"){
that.addMaterialMark2(ele, index);
matermapData2.push(ele)
}else if(ele.materialType=="救援队伍"){
that.addMaterialMark3(ele, index);
matermapData3.push(ele)
}else if(ele.materialType=="避难场所"){
that.addMaterialMark4(ele, index);
matermapData4.push(ele)
}else if(ele.materialType=="防护目标"){
that.addMaterialMark5(ele, index);
matermapData5.push(ele)
}else if(ele.materialType=="医疗卫生单位"){
that.addMaterialMark6(ele, index);
matermapData6.push(ele)
}else {
that.addMaterialMark(ele, index);
matermapData0.push(ele)
}
//that.addMark(ele,index);
lngSum += ele.longitude;
latSum += ele.latitude;
});
that.matermapData0 = matermapData0;
that.matermapData1 = matermapData1;
that.matermapData2 = matermapData2;
that.matermapData3 = matermapData3;
that.matermapData4 = matermapData4;
that.matermapData5 = matermapData5;
that.matermapData6 = matermapData6;
that.DataNum0 = matermapData0.length;
that.DataNum1 = matermapData1.length;
that.DataNum2 = matermapData2.length;
that.DataNum3 = matermapData3.length;
that.DataNum4 = matermapData4.length;
that.DataNum5 = matermapData5.length;
that.DataNum6 = matermapData6.length;
let center = [
lngSum / that.matermapData.length,
latSum / that.matermapData.length,
];
that.Mutil.setViewF({
center: center
})
}
}
);
}
getMaterialWindow(id: string) {
let that = this;
console.log('----------------------'+id);
(window as any).checkDetail = function (param: string) {
that.$router.push({
path: "/EnDetail",
query: {
enterpriseId: param
}
});
};
let obj = that.materialData.pageData[id-1],
html =
`<div class="windowDg"><h3>应急资源详细信息</h3>` +
`<p><span>资源名称:</span>${obj.materialName}</p>` +
`<p><span>资源类型:</span>${obj.materialType}</p>` +
`<p><span>数量:</span>${obj.num}</p>` +
`<p><span>地址:</span>${obj.address}</p>` +
`<p><span>联系人:</span>${obj.contacts}</p>` +
`<p><span>联系方式:</span>${obj.phone}</p>` +
`</div>`;
that.Mutil.addPopup(html, obj.id, obj.longitude, obj.latitude)
}
//关闭视频方法
closeVideo() {
if (this.lastVideoPlayId != "") {
this.player.stop('http://27.128.189.137:18000/flv/hls/' + this.lastVideoPlayId + '.flv', 1);
}
this.isShowVideo = false;
}
addMaterialMark(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/tongxin1.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.materialName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr0.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr0[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'material',
obj.materialName,
icon,
[obj.longitude, obj.latitude],
0.4,
index+1
);
}
addMaterialMark1(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/wuzi1.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.materialName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr1.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr1[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'material1',
obj.materialName,
icon,
[obj.longitude, obj.latitude],
0.4,
index+1
);
}
addMaterialMark2(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/zhuanjia1.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.materialName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr2.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr2[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'material2',
obj.materialName,
icon,
[obj.longitude, obj.latitude],
0.4,
index+1
);
}
addMaterialMark3(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/jiuyuan1.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.materialName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr3.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr3[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'material3',
obj.materialName,
icon,
[obj.longitude, obj.latitude],
0.4,
index+1
);
}
addMaterialMark4(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/binan1.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.materialName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr4.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr4[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'material4',
obj.materialName,
icon,
[obj.longitude, obj.latitude],
0.4,
index+1
);
}
addMaterialMark5(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/fanghu1.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.materialName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr5.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr5[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'material5',
obj.materialName,
icon,
[obj.longitude, obj.latitude],
0.4,
index+1
);
}
addMaterialMark6(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/yiliao1.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.materialName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr6.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr6[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'material6',
obj.materialName,
icon,
[obj.longitude, obj.latitude],
0.4,
index+1
);
}
addMark(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/markqy.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.unitName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'qiye',
obj.unitName,
icon,
[obj.longitude, obj.latitude],
0.4,
obj.enterpriseId
);
}
change(v: any) {
let that = this;
that.matermapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers0[index].visible = true;
} else {
that.markers0[index].visible = false;
}
});
that.matermapData1.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers1[index].visible = true;
} else {
that.markers1[index].visible = false;
}
});
that.matermapData2.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers2[index].visible = true;
} else {
that.markers2[index].visible = false;
}
});
that.matermapData3.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers3[index].visible = true;
} else {
that.markers3[index].visible = false;
}
});
that.matermapData4.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers4[index].visible = true;
} else {
that.markers4[index].visible = false;
}
});
that.matermapData5.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers5[index].visible = true;
} else {
that.markers5[index].visible = false;
}
});
that.matermapData6.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers6[index].visible = true;
} else {
that.markers6[index].visible = false;
}
});
}
/* 搜索 */
getMaterialinfo(maid: any) {
let that = this;
that.getMaterialWindow(maid);
}
created() {
this.getMaterial();
}
cancel(){
this.goods={};
this.trouble={};
this.dialogVisible1 = false;
this.dialogVisible2 = false;
}
mounted() {
let that = this;
that.player = new WasmPlayer(null, "div_video", null);
that.mapLoadDone = true;
that.Mutil = new Mutil("mapbox");
that.MAP = that.Mutil.MAP;
that.Mutil.mapSelectBind((evt: any) => {
//这是地图marker点击回调监听
/*if (evt.selected[0].get('type') === 'qiye') {
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getPopcon(id);
} */
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getMaterialinfo(id);
})
this.getStatiData();
this.Mutil.getBoundaries("新乐");
}
mapma(){
if (this.maVisble) {
this.Mutil.visibleMarks(false, "material");
this.maVisble = false;
this.$refs.material.style.background = "#24BBC7";
this.$refs.zma.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "material");
this.maVisble = true;
this.$refs.material.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zma.lastChild.style.color = "#fff";
}
}
mapma1(){
if (this.ma1Visble) {
this.Mutil.visibleMarks(false, "material1");
this.ma1Visble = false;
this.$refs.material1.style.background = "#24BBC7";
this.$refs.zma1.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "material1");
this.ma1Visble = true;
this.$refs.material1.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zma1.lastChild.style.color = "#fff";
}
}
mapma2(){
if (this.ma2Visble) {
this.Mutil.visibleMarks(false, "material2");
this.ma2Visble = false;
this.$refs.material2.style.background = "#24BBC7";
this.$refs.zma2.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "material2");
this.ma2Visble = true;
this.$refs.material2.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zma2.lastChild.style.color = "#fff";
}
}
mapma3(){
if (this.ma3Visble) {
this.Mutil.visibleMarks(false, "material3");
this.ma3Visble = false;
this.$refs.material3.style.background = "#24BBC7";
this.$refs.zma3.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "material3");
this.ma3Visble = true;
this.$refs.material3.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zma3.lastChild.style.color = "#fff";
}
}
mapma4() {
if (this.ma4Visble) {
this.Mutil.visibleMarks(false, "material4");
this.ma4Visble = false;
this.$refs.material4.style.background = "#24BBC7";
this.$refs.zma4.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "material4");
this.ma4Visble = true;
this.$refs.material4.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zma4.lastChild.style.color = "#fff";
}
}
mapma5() {
if (this.ma5Visble) {
this.Mutil.visibleMarks(false, "material5");
this.ma5Visble = false;
this.$refs.material5.style.background = "#24BBC7";
this.$refs.zma5.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "material5");
this.ma5Visble = true;
this.$refs.material5.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zma5.lastChild.style.color = "#fff";
}
}
mapma6() {
if (this.ma6Visble) {
this.Mutil.visibleMarks(false, "material6");
this.ma6Visble = false;
this.$refs.material6.style.background = "#24BBC7";
this.$refs.zma6.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "material6");
this.ma6Visble = true;
this.$refs.material6.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zma6.lastChild.style.color = "#fff";
}
}
// mapbox(){
// let that = this;
// that.Mutil.closeAllOverlays();
// }
// editFun(row: any) {
// this.dialogTit = "编辑";
// this.formData = Object.assign({}, row);
// this.zjKey++;
// this.dialogVisible = true;
// }
getStatiData() {
let that = this;
METHOD.axiosPost(
that,
`/dataStatistics/managerDataStatistics`,
{ cityId: "", countyId: "", provinceId: "" },
function (res: any) {
if (res.code == 0) {
if (res.code == 0 && res.data.goodsList.length > 0) {
that.wxymapData = res.data.goodsList;
let wxylatSum = 0;
let wxylngSum = 0;
that.wxymapData.forEach((ele: any, index: any) => {
wxylngSum += ele.longitude;
wxylatSum += ele.latitude;
});
let center = [
wxylngSum / that.wxymapData.length,
wxylatSum / that.wxymapData.length,
];
that.Mutil.setViewF({
center: center
})
}
}
}
);
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.map-botton {
width: 100px;
height: 50px;
outline: none;
z-index: 10;
position: absolute;
}
.gengxin {
text-align: center;
color: #fff;
}
.map-botton:nth-child(1) {
left: 50px;
}
.map-botton:nth-child(2) {
left: 160px;
}
.map-botton:nth-child(3) {
left: 270px;
}
#mapbox {
width: 100%;
height: 100%;
position: relative;
}
.gis {
position: relative;
overflow: hidden;
}
/* .div-isShowVideo{
width: 200px;
height: 350px;
} */
/* .div-isShowVideo .divspan{
width: 100%;
height: 20px;
} */
.markBox {
z-index: 30;
width: 185px;
height: 100%;
background: url('../../assets/z3.png') 100% 100%;
position: absolute;
top: -0px;
right: 10px;
}
.markBox .markbox-div {
width: 100%;
height: 70px;
text-align: center;
background-color: RGBA(17, 59, 89, 0.7);
font-size: 100% 100%;
margin-top: 30px;
cursor:pointer;
}
.markbox-span {
float: right;
text-align: center;
font-size: 15px;
/* font-family: 'UnidreamLED'; */
color: #fff;
}
.markbox-click img {
/* width: 30px; */
margin-top: 17px;
}
.show-box {
position: absolute !important;
z-index: 9;
/* background: rgba(204, 204, 204, 0.7); */
top: 4px;
right: 10px;
}
.search-box {
position: absolute !important;
top: 14px;
left: 80px;
}
.ol-zoom {
top: 10px;
left: 250px !important;
}
</style>
\ No newline at end of file
<template>
<div class="EnseList">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
<el-form-item label="">
<el-select v-model="searchData.materialType" placeholder="请选择资源类型">
<el-option label="救援物资" value="救援物资"></el-option>
<el-option label="专家资源" value="专家资源"></el-option>
<el-option label="救援队伍" value="救援队伍"></el-option>
<el-option label="避难场所" value="避难场所"></el-option>
<el-option label="防护目标" value="防护目标"></el-option>
<el-option label="医疗卫生单位" value="医疗卫生单位"></el-option>
<el-option label="通信保障机构" value="通信保障机构"></el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-input v-model="searchData.materialName" placeholder="请输入资源名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchFun()">
<i class="el-icon-search"></i> 搜索
</el-button>
<el-button type="primary" @click="resetFun()">
<i class="el-icon-refresh"></i> 重置
</el-button>
</el-form-item>
<el-form-item class="fr">
<el-button plain type="primary" @click="addFun()">
<i class="el-icon-plus"></i> 新增资源
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe border style="width:100%;" :loading="loading">
<el-table-column width="50" type="index" label="序号"></el-table-column>
<el-table-column prop="materialName" label="资源名称"></el-table-column>
<el-table-column prop="materialType" label="资源类型">
</el-table-column>
<el-table-column prop="num" label="资源数量"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="contacts" label="联系人"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<!-- <el-table-column prop="stockNum" label="库存数量"></el-table-column> -->
<!-- <el-table-column prop="dangerGrade" label="危险等级"></el-table-column> -->
<el-table-column label="操作" width="220" align="center">
<template slot-scope="scope">
<el-button @click="editFun(scope.row)" size="small">编辑</el-button>
<el-button type="danger" @click="delFun(scope.row)" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="total,sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PAGE.page" :page-size="PAGE.size"></el-pagination>
<SafetyDeviceMgEdit :dialogVisible="dialogVisible" :editForm="formData" :title="dialogTit" @dialogFun="closeDialog" @refreshTableData="getTableData" :key="zjKey"></SafetyDeviceMgEdit>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide
} from "vue-property-decorator";
import SafetyDeviceMgEdit from "./guaranteeEdit.vue";
import METHOD from "@/utils/methods";
@Component({
components: {
SafetyDeviceMgEdit
}
})
export default class SafetyDeviceMg extends Vue {
@Provide() tableData: Object = {
pageData: [],
total: 0
};
@Provide() PAGE: any = {
page: 1,
size: 10
};
@Provide() searchData: any = {
deviceName: "",
deviceNumber: "",
shortNum: "",
dataType: '',
};
@Provide() loading: Boolean = false;
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() dialogTit: String = "新增";
@Provide() formData: any = {
dataType: "",
enterpriseId: ""
};
@Provide() zjKey: any = 0;
@Provide() enterpriseId: string = "all";
@Provide() dataType: string = "";
getTableData() {
let that = this,
param = Object.assign({}, that.PAGE, that.searchData);
that.enterpriseId="all";
that.loading = true;
METHOD.axiosPost(
that,
`/material/materialInfoList`,
param,
function (res: any) {
that.loading = false;
if (res.code == 0) {
that.tableData = res.data;
console.log(res.data)
}
}
);
}
searchFun() {
this.PAGE = {
page: 1,
size: 10
};
this.getTableData();
}
resetFun() {
this.PAGE = {
page: 1,
size: 10
};
this.searchData = {
deviceName: "",
deviceNumber: "",
shortNum: "",
dataType: ''
};
this.getTableData();
}
addFun() {
this.zjKey++;
this.dialogVisible = true;
//this.formData.dataType = this.searchData.dataType;
if(METHOD.enterpriseId){
this.formData.enterpriseId = METHOD.enterpriseId;
}
}
editFun(row: any) {
this.dialogTit = "编辑";
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
delFun(row: any) {
let that = this as any;
METHOD.deleteFun(
this,
`/material/deleteMaterial/${row.id}`,
function () {
that.getTableData();
}
);
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
selectChange(val: any) {
this.searchData.dataType = val;
this.getTableData();
}
created() {
this.enterpriseId = METHOD.enterpriseId;
this.getTableData();
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
<template>
<div class="wrapper editwrap">
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:show-close="false"
:close-on-click-modal="false"
>
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="106px">
<el-form-item label="资源名称" prop="materialName">
<el-input v-model="editForm.materialName"></el-input>
</el-form-item>
<!--<el-form-item label="资源类型" prop="materialType">-->
<!--<el-input v-model="editForm.materialType"></el-input>-->
<!--</el-form-item>-->
<el-form-item label="资源类型" prop="materialType">
<el-select v-model="editForm.materialType" placeholder="请选择资源类型">
<el-option label="救援物资" value="救援物资"></el-option>
<el-option label="专家资源" value="专家资源"></el-option>
<el-option label="救援队伍" value="救援队伍"></el-option>
<el-option label="避难场所" value="避难场所"></el-option>
<el-option label="防护目标" value="防护目标"></el-option>
<el-option label="医疗卫生单位" value="医疗卫生单位"></el-option>
<el-option label="通信保障机构" value="通信保障机构"></el-option>
</el-select>
</el-form-item>
<el-form-item label="资源数量" prop="num">
<el-input v-model="editForm.num"></el-input>
</el-form-item>
<p style="color: #F56C6C;float: left;position: relative;left: 45px;">*</p>
<el-form-item label="经纬度">
<el-row>
<el-col :span="8">
<!--<el-input v-model="editForm.longitude"></el-input>-->
<el-form-item prop="longitude" style="margin-right: 9px">
<el-input v-model="editForm.longitude"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="latitude" style="margin-right: 9px">
<el-input v-model="editForm.latitude"></el-input>
</el-form-item>
<!--<el-input v-model="editForm.latitude"></el-input>-->
</el-col>
<el-col :span="6">
<el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-input v-model="editForm.address"></el-input>
</el-form-item>
<el-form-item label="联系人" prop="contacts">
<el-input v-model="editForm.contacts"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="editForm.phone"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
<el-button @click="$emit('dialogFun')" size="small">取消</el-button>
</span>
</el-dialog>
<Mapdialog
v-if="loadmap"
:dialogTableVisible="dialogTableVisible"
@dialogcancelFun="dialogcancelFun"
:slat="editForm.latitude"
:slng="editForm.longitude"
@confirm="qrFun"
/>
</div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import Mapdialog from "@/components/maplnglat.vue";
import METHOD from "@/utils/methods";
@Component({
components: { Mapdialog }
})
export default class SafetyDeviceMgEdit extends Vue {
//属性或参数中使用!:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop
@Prop(Boolean) dialogVisible!: Boolean;
@Provide() loading: Boolean = false;
@Prop(Object) editForm!: {
deviceName: String;
longitude: Number;
latitude: Number;
dataType: String;
enterpriseId: String;
};
@Prop(String) title!: String;
// @Provide() editForm: any = {};
@Provide() enterpriseList: any = [];
@Provide() qvvalue: any = []; //区域值
@Provide() signsArr: any = []; //图例list
@Provide() dialogTableVisible: Boolean = false;
@Provide() rules: any = {
materialName: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
materialType: [
{ required: true, trigger: "blur", message: "该项为必填项!" }
],
contacts: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
num: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
/*isBigDanger: [
{ required: true, trigger: "blur", message: "该项为必填项!" }
],
dangerGrade: [
{ required: true, trigger: "blur", message: "该项为必填项!" }
],*/
phone: [
{ required: true, trigger: "blur", message: "该项为必填项!" }
],
longitude: [{ required: true, trigger: "blur", message: "该项为必填项!" }],
latitude: [{ required: true, trigger: "blur", message: "该项为必填项!" }]
};
@Provide() loadmap: Boolean = false;
@Provide() play: Boolean = false;
@Provide() enterpriseId: string = "dbe0c3268a3c4911913f35a2fdcd0e3e";
qrFun(v: any) {
//确认选择经纬度
this.editForm.longitude = v.lng;
this.editForm.latitude = v.lat;
}
MapdialogFun() {
this.loadmap = false;
this.$nextTick(() => {
this.loadmap = true;
});
this.dialogTableVisible = true;
}
dialogcancelFun() {
this.dialogTableVisible = false;
}
//取消事件要在父级取消是所以用到 $emit
confirmFun(formName: string) {
let that = this,
params = that.editForm;
(that as any).$refs[formName].validate((valid: boolean) => {
if (valid) {
METHOD.axiosPost(
that,
`/material/addMaterInfo`,
params,
function(res: any) {
if (res.code == 0) {
(that as any).$emit("dialogFun");
(that as any).$message({
message: "操作成功!",
type: "success"
});
that.$emit("refreshTableData"); //刷新表格
}
}
);
} else {
return false;
}
});
}
getnterpriseListInfo() {
let that = this,
param ={accountStatus:'0'};
that.loading = true;
METHOD.axiosPost(
that,
`/enterpriseInfo/queryEnterpriseListInfo`,
param,
function(res: any) {
that.loading = false;
if (res.code == 0) {
that.enterpriseList = res.data;
}
}
);
}
getnterpriseListInfo() {
let that = this,
param ={accountStatus:'0'};
that.loading = true;
METHOD.axiosPost(
that,
`/enterpriseInfo/queryEnterpriseListInfo`,
param,
function(res: any) {
that.loading = false;
if (res.code == 0) {
that.enterpriseList = res.data;
}
}
);
}
seletChange(enterpriseId: any) {
let that = this,
arr;
arr = that.enterpriseList.filter((ele: any) => enterpriseId == ele.enterpriseId);
that.editForm.enterpriseListId = arr[0].enterpriseId;
}
created() {
//this.editForm = this.editFormData;
if(METHOD.enterpriseId){
this.enterpriseId = METHOD.enterpriseId;
}else{
//政府用户
this.play = true;
this.getnterpriseListInfo();
}
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>
<!--
<template>
<div class="amap-page-container">
<el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
<el-amap-marker v-for="marker in markers":key="i" :position="marker.position"></el-amap-marker>
</el-amap> -->
<!-- <div class="toolbar">
<button @click="getMap()">get map</button>
</div> -->
<!-- </div>
</template>
<style>
.amap-page-container {
height: 400px;
}
</style> -->
<!-- <script>
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 高德的keye
  key: 'cb087c0fb3b8bc56a4af064630495bb9',
  uiVersion: '1.0.11' ,// 版本号
  // 插件集合
  plugin: ['AMap.Geocoder','AMap.Autocomplete','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.Geolocation','AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 高德 sdk 版本,默认为 1.4.4
  v: '1.4.4'
});
// import { AMapManager } from 'vue-amap';
// import { AMap } from 'vue-amap';
export default {
data () {
return {
zoom: 15,
center: [117.148118, 36.660223],
markers: [
{
position: [117.148118, 36.660223],
events: {
click: () => {
alert('click marker');
},
dragend: (e) => {
console.log('---event---: dragend')
this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
}
},
visible: true,
draggable: false,
template: '<span>1</span>',
}
],
events: {
init: (o) => {
console.log(o.getCenter())
console.log(this.$refs.map.$$getInstance())
o.getCity(result => {
console.log(result)
})
},
'moveend': () => {
},
'zoomchange': () => {
},
'click': (e) => {
let {lng,lat} = e.lnglat;
self.lng = lng;
self.lat = lat;
console.log(self.lng,self.lat)
let points = [self.lng,self.lat]
this.getAddress(points)
let marker = {
position: [self.lng, self.lat]
};
if (!this.markers.length) return;
this.markers.splice(this.markers.length - 1, 1);
this.markers.push(marker);
}
},
getAddress (points) {
let geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" })
geocoder.getAddress(points, (status, result) => {
if (status === 'complete' && result.regeocode) {
this.address = result.regeocode.formattedAddress
console.log(this.address)
}
})
},
plugin: ['ToolBar', {
pName: 'MapType',
defaultType: 0,
events: {
init(o) {
console.log(o);
}
}
}],
texts: [
{
position: [121.5273285, 31.21515044],
text: 'hello world',
offset: [0, 0],
events: {
click: () => {
alert('click text');
}
}
}
]
}
},
methods: {
getMap() {
console.log(AMapManager._componentMap);
// gaode map instance
console.log(AMapManager._map);
alert('click text');
}
}
};
</script> -->
\ No newline at end of file
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
<QyMapone></QyMapone> <QyMapone></QyMapone>
</div> </div>
<div class="markBox"> <div class="markBox">
<div @click="mapqiye" class="markbox-div" ref="qyzc" style="margin-top: 100px;"> <div @click="mapqiye" class="markbox-div" ref="qyzc" style="margin-top: 100px;">
<div class="markbox-click" ref="qyimg" style="width: 30%;height: 100%;float: left;text-align: right;"> <div class="markbox-click" ref="qyimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="27px" src="@/assets/mark/markqy.png" /> <img width="27px" src="@/assets/mark/markqy.png" />
...@@ -33,7 +34,7 @@ ...@@ -33,7 +34,7 @@
<span>企业注册<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.enterpriseRegNum}}</span></span> <span>企业注册<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{tjNumberObj.enterpriseRegNum}}</span></span>
</div> </div>
</div> </div>
<div @click="mapwxy" class="markbox-div" ref="wxy"> <div @click="mapwxy" class="markbox-div" ref="wxy">
<div class="markbox-click" ref="wxyimg" style="width: 30%;height: 100%;float: left;text-align: right;"> <div class="markbox-click" ref="wxyimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="35px" src="@/assets/mark/weixianyuan.png" style="margin-top: 20px;"/> <img width="35px" src="@/assets/mark/weixianyuan.png" style="margin-top: 20px;"/>
...@@ -70,7 +71,15 @@ ...@@ -70,7 +71,15 @@
</div> </div>
</div> </div>
<!--<div @click="mapma" class="markbox-div" ref="material">-->
<!--<div class="markbox-click" ref="maimg" style="width: 30%;height: 100%;float: left;text-align: right;">-->
<!--<img width="30px" src="@/assets/mark/markjk.png" />-->
<!--</div>-->
<!--<div class="markbox-span" ref="zma" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">-->
<!--<span>应急物资<p></p><span style="font-family: 'UnidreamLED';font-size: 1.5rem;">{{materialData.total}}</span></span>-->
<!--</div>-->
<!--</div>-->
</div> </div>
</div> </div>
<el-dialog title="危险源" :visible.sync="dialogVisible1"> <el-dialog title="危险源" :visible.sync="dialogVisible1">
...@@ -184,16 +193,23 @@ ...@@ -184,16 +193,23 @@
@Provide() markers1: any = []; @Provide() markers1: any = [];
@Provide() markers2: any = []; @Provide() markers2: any = [];
@Provide() markers3: any = []; @Provide() markers3: any = [];
@Provide() markers4: any = [];
@Provide() mapData: any = []; @Provide() mapData: any = [];
@Provide() windowsArr: any = []; @Provide() windowsArr: any = [];
@Provide() windowsArr1: any = []; @Provide() windowsArr1: any = [];
@Provide() windowsArr2: any = []; @Provide() windowsArr2: any = [];
@Provide() windowsArr3: any = []; @Provide() windowsArr3: any = [];
@Provide() windowsArr4: any = [];
@Provide() currentWindow: any = ""; @Provide() currentWindow: any = "";
// @Provide() searchOption: any = { // @Provide() searchOption: any = {
// city: "石家庄", // city: "石家庄",
// citylimit: true, // citylimit: true,
// }; // };
@Provide() PAGE: any = {
page: 1,
size: 1000
};
@Provide() materialData: any = [];
@Provide() lastVideoPlayId: any = ""; @Provide() lastVideoPlayId: any = "";
@Provide() markersB: any = []; @Provide() markersB: any = [];
@Provide() dialogVisible1: Boolean = false; @Provide() dialogVisible1: Boolean = false;
...@@ -206,6 +222,7 @@ ...@@ -206,6 +222,7 @@
@Provide() qiyeVisble: boolean = true; @Provide() qiyeVisble: boolean = true;
@Provide() wxyVisble: boolean = true; @Provide() wxyVisble: boolean = true;
@Provide() shipinVisble: boolean = true; @Provide() shipinVisble: boolean = true;
@Provide() maVisble: boolean = true;
@Provide() weihaiVisble: boolean = true; @Provide() weihaiVisble: boolean = true;
@Provide() yinhuanVisble: boolean = true; @Provide() yinhuanVisble: boolean = true;
@Provide() treecheckedObj: any = {}; @Provide() treecheckedObj: any = {};
...@@ -242,6 +259,36 @@ ...@@ -242,6 +259,36 @@
} }
); );
} }
getMaterial(){
let that = this;
var param = Object.assign({}, that.PAGE, );
METHOD.axiosPost(
that,
`/material/materialInfoList`,
param,
function (res: any) {
that.materialData = res.data;
if (res.code == 0&& res.data.pageData.length > 0) {
that.matermapData = res.data.pageData;
let latSum = 0;
let lngSum = 0;
that.matermapData.forEach((ele: any, index: any) => {
that.addMaterialMark(ele, index);
//that.addMark(ele,index);
lngSum += ele.longitude;
latSum += ele.latitude;
});
let center = [
lngSum / that.matermapData.length,
latSum / that.matermapData.length,
];
that.Mutil.setViewF({
center: center
})
}
}
);
}
getWindowInfo(enterpriseId: string) { getWindowInfo(enterpriseId: string) {
let that = this; let that = this;
(window as any).checkDetail = function (param: string) { (window as any).checkDetail = function (param: string) {
...@@ -287,6 +334,31 @@ ...@@ -287,6 +334,31 @@
} }
); );
} }
getMaterialWindow(id: string) {
let that = this;
console.log('----------------------'+id);
(window as any).checkDetail = function (param: string) {
that.$router.push({
path: "/EnDetail",
query: {
enterpriseId: param
}
});
};
let obj = that.materialData.pageData[id-1],
html =
`<div class="windowDg"><h3>应急资源详细信息</h3>` +
`<p><span>资源名称:</span>${obj.materialName}</p>` +
`<p><span>资源类型:</span>${obj.materialType}</p>` +
`<p><span>数量:</span>${obj.num}</p>` +
`<p><span>地址:</span>${obj.address}</p>` +
`<p><span>联系人:</span>${obj.contacts}</p>` +
`<p><span>联系方式:</span>${obj.phone}</p>` +
`</div>`;
that.Mutil.addPopup(html, obj.id, obj.longitude, obj.latitude)
}
getWxyWindowInfo(goodsId: string) { getWxyWindowInfo(goodsId: string) {
let that = this; let that = this;
(window as any).dialogVisible1Change = function () { (window as any).dialogVisible1Change = function () {
...@@ -365,6 +437,42 @@ ...@@ -365,6 +437,42 @@
} }
this.isShowVideo = false; this.isShowVideo = false;
} }
addMaterialMark(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/markjk.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.materialName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr4.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr4[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'material',
obj.materialName,
icon,
[obj.longitude, obj.latitude],
0.4,
index+1
);
}
addMark(obj: any, index: any) { addMark(obj: any, index: any) {
let icon, let icon,
that = this; that = this;
...@@ -512,6 +620,13 @@ ...@@ -512,6 +620,13 @@
that.markers[index].visible = false; that.markers[index].visible = false;
} }
}); });
that.matermapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers4[index].visible = true;
} else {
that.markers4[index].visible = false;
}
});
that.wxymapData.forEach((ele: any, index: any) => { that.wxymapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) { if (ele.dataType == v || v == 0) {
that.markers1[index].visible = true; that.markers1[index].visible = true;
...@@ -568,12 +683,17 @@ ...@@ -568,12 +683,17 @@
let that = this; let that = this;
that.getshipinWindowInfo(shipinid); that.getshipinWindowInfo(shipinid);
} }
getMaterialinfo(maid: any) {
let that = this;
that.getMaterialWindow(maid);
}
getyinhuanPopcon(yinhuanid: any) { getyinhuanPopcon(yinhuanid: any) {
let that = this; let that = this;
that.getyinhuanWindowInfo(yinhuanid); that.getyinhuanWindowInfo(yinhuanid);
} }
created() { created() {
this.getMapData(); this.getMapData();
//this.getMaterial();
} }
cancel(){ cancel(){
this.goods={}; this.goods={};
...@@ -668,6 +788,10 @@ ...@@ -668,6 +788,10 @@
that.Mutil.closeAllOverlays(); that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did'); let id = evt.selected[0].get('did');
if (id) that.getyinhuanPopcon(id); if (id) that.getyinhuanPopcon(id);
}else if(evt.selected[0].get('type') === 'material'){
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getMaterialinfo(id);
} }
...@@ -693,6 +817,20 @@ ...@@ -693,6 +817,20 @@
this.$refs.zqyzc.lastChild.style.color = "#fff"; this.$refs.zqyzc.lastChild.style.color = "#fff";
} }
}
mapma(){
if (this.maVisble) {
this.Mutil.visibleMarks(false, "material");
this.maVisble = false;
this.$refs.material.style.background = "#24BBC7";
this.$refs.zma.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "material");
this.maVisble = true;
this.$refs.material.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zma.lastChild.style.color = "#fff";
}
} }
// mapbox(){ // mapbox(){
// let that = this; // let that = this;
......
...@@ -106,7 +106,8 @@ export default { ...@@ -106,7 +106,8 @@ export default {
return{ return{
tableData:[], tableData:[],
enterpriseRegNum:"", enterpriseRegNum:"",
enterpriseCheckIngNum:"" enterpriseCheckIngNum:"",
company:["aa","bb"]
} }
}, },
...@@ -271,7 +272,6 @@ export default { ...@@ -271,7 +272,6 @@ export default {
}, },
inPieChart(){ inPieChart(){
// 基于准备好的dom,初始化echarts实例 // 基于准备好的dom,初始化echarts实例
var myChart3 = echarts.init(document.getElementById('main3'));
// let that=this; // let that=this;
// var getData1 = []; // var getData1 = [];
// var getData2 = []; // var getData2 = [];
...@@ -301,105 +301,118 @@ export default { ...@@ -301,105 +301,118 @@ export default {
// }) // })
// } // }
// }); // });
// 绘制图表 let that = this;
myChart3.setOption({ //that.loading = true;
title: { METHOD.axiosPost(
text: '隐患和风险控制',//主标题 that,
color: '#fff', `/enterpriseInfo/enterpriseRiskInfo`,{},
// subtext: '柱状图', function(res) {
textStyle: { var myChart3 = echarts.init(document.getElementById('main3'));
color: "#fff",
} // 绘制图表
}, myChart3.setOption({
tooltip: { title: {
trigger: 'axis', text: '隐患和风险控制',//主标题
axisPointer: { color: '#fff',
type: 'cross', // subtext: '柱状图',
crossStyle: { textStyle: {
color: '#999' color: "#fff",
} }
} },
}, tooltip: {
legend: { trigger: 'axis',
data: ['隐患', '风险控制'], axisPointer: {
textStyle: { //图例文字的样式 type: 'cross',
color: '#fff', crossStyle: {
} color: '#999'
}, }
xAxis: [ }
{ },
type: 'category', legend: {
axisLabel: { data: ['隐患', '风险控制'],
show:true, textStyle: { //图例文字的样式
interval:0, color: '#fff',
rotate:40 }
} , },
//X轴白线 xAxis: [
axisLine: { {
show: true, type: 'category',
lineStyle: { axisLabel: {
color: '#fff', show:true,
}, interval:0,
}, rotate:40
data: ['测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患'], } ,
axisPointer: { //X轴白线
type: 'shadow' axisLine: {
} show: true,
lineStyle: {
} color: '#fff',
], },
yAxis: [ },
{ //data: ['测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患'],
type: 'value', data:res.data.company,
axisLabel:{ axisPointer: {
show: true, type: 'shadow'
rich: { }
flag: {
fontSize: 25, }
padding: 5 ],
} yAxis: [
} {
}, type: 'value',
axisLine: { axisLabel:{
show: true, show: true,
lineStyle: { rich: {
color: '#fff', flag: {
}, fontSize: 25,
}, padding: 5
splitLine: { }
show: true, }
lineStyle: { },
color: 'rgba(71, 126, 171, 1)', axisLine: {
type: 'dashed' show: true,
}, lineStyle: {
}, color: '#fff',
}, },
{ },
type: 'value', splitLine: {
interval: 5, show: true,
} lineStyle: {
], color: 'rgba(71, 126, 171, 1)',
series: [ type: 'dashed'
{ },
name: '隐患', },
type: 'bar', },
data: [ {
400, 1300, 700, 1000, 1500, 1800, 200, 300, 2000, 1000, 1300 type: 'value',
] interval: 5,
}, }
{ ],
name: '风险控制', series: [
type: 'line', {
// symbol:'circle', name: '隐患',
symbolSize:6, type: 'bar',
data: [1000,1300, 1450, 1600, 1700, 1800, 1850, 1800, 1700, 1600, 1500], // data: [
itemStyle : {normal : {color:'#00D7FE', //改变折线点的颜色 // 400, 1300, 700, 1000, 1500, 1800, 200, 300, 2000, 1000, 1300
lineStyle:{color:'#00D7FE'} //改变折线颜色 // ]
}, data:res.data.trouble,
}, },
} {
] name: '风险控制',
}) type: 'line',
// symbol:'circle',
symbolSize:6,
//data: [1000,1300, 1450, 1600, 1700, 1800, 1850, 1800, 1700, 1600, 1500],
data:res.data.risk,
itemStyle : {normal : {color:'#00D7FE', //改变折线点的颜色
lineStyle:{color:'#00D7FE'} //改变折线颜色
},
},
}
]
})
});
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment