Skip to content

W
whp-xl
Commit 248c894b authored by yaqizhang's avatar yaqizhang
Browse files
Options

统计图首页地图切换

parent d1172cb1
Hide whitespace changes
Inline Side-by-side
Showing with 274 additions and 43 deletions
dcit-hcsystem-hcsystem-master/src/utils/mapUtil.js
View file @ 248c894b
......@@ -279,4 +279,104 @@ export default class Mutil {
that.MAP.removeInteraction(drawPoly);
})
}
tianSlA() {
this.MAP.getLayers().getArray()[0].setVisible(true);
this.MAP.getLayers().getArray()[1].setVisible(false);
this.MAP.getLayers().getArray()[2].setVisible(false);
};
tianSlB() {
console.log("gsfdgfdhgsgfhgfdhf")
this.MAP.getLayers().getArray()[0].setVisible(false);
this.MAP.getLayers().getArray()[1].setVisible(true);
this.MAP.getLayers().getArray()[2].setVisible(false);
};
tianSlC() {
this.MAP.getLayers().getArray()[0].setVisible(false);
this.MAP.getLayers().getArray()[1].setVisible(false);
this.MAP.getLayers().getArray()[2].setVisible(true);
}
drawArea(json) {
let pointsz = []; //存储点坐标
let points = json.points; //获取点坐标
//对获取的点坐标数据进行处理，重构，得到我们需要的数据结构
for (let i = 0; i < points.length; i++) {
let region = points[i].region; //单个面
let pointArr = region.split(',');
for (let j = 0; j < pointArr.length - 1; j++) {
let p = pointArr[j];
let pArr = p.split(' ');
let pos = fromLonLat(pArr); //将坐标转为默认投影，默认投影是EPSG：3857
let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326'); //坐标系间坐标转换，由前面的坐标转为后面坐标系坐标
pointsz.push(pArr) //将转化格式后的点坐标存储起来
}
}
;
//自己造的地图数据（GeoJSON数据）
let geojsonObject = {
'type': 'FeatureCollection', //要素集合
'crs': {
'type': 'name',
'properties': { //特性
'name': 'EPSG:3857'
},
'features': [{ //要素
'type': 'Feature',
'geometry': { //几何图形
'type': 'GeometryCollection', //几何图形集合
'geometries': [{ //几何形状
'type': 'Polygon', //多边形
'coordinates': [pointsz] //坐标
}]
}
}]
}
};
let vectorSource = new VectorSource({ //提供矢量图层的数据
features: (new GeoJSON().readFeatures(geojsonObject))
});
let vectorLayer = new VectorLayer({
source: vectorSource, //来源
style: new Style({
stroke: new Stroke({
color: 'yellow',
width: 6
}),
fill: new Fill({
color: 'rgba(255,255,0,0.1)'
})
})
});
if (this.tempLayer != ' ') {
this.MAP.removeLayer(this.tempLayer);
}
this.MAP.addLayer(vectorLayer);
this.tempLayer = vectorLayer;
}
changeCenter(name) { //根据name传参
console.log("fdssffffffffffffffffffffffffffffffffffffffffffffffff")
//调取天地图返回的数据
let param = {};
param.serachWord = name;
param.serachType = '1'; //查询类型（0：根据code查询；1：根据名称）
param.needSunInfo = 'false' ; //是否需要下一级信息
param.needAll = 'false'; // 是否需要所有子节点（包括孙子节点）
param.needPolygon = 'true'; //是否需要行政区划范围
param.needPre = 'true'; //是否需要上一级所有信息
param.tk = 'd0cf74b31931aab68af181d23fa23d8d'; //自己的天地图秘钥
this.$axios.get('http://api.tianditu.gov.cn/administrative',param).then(res => {
console.log(res.data[0])
let resData = res.data[0];
let view = new View({
center: transfrom(fromLonLat([resData.lnt,resData.lat]),'EPSG:3857','EPSG:4326'), //将中心点坐标转为EPSG：4326
projection: get('EPSG:4326'), //投影坐标系 EPSG：4326
zoom: resData.level -1
});
this.MAP.setView(view);
this.drawArea(resData)
})
}
}
dcit-hcsystem-hcsystem-master/src/utils/methods.ts
View file @ 248c894b
......@@ -22,7 +22,6 @@ export default {
MenuMg: "System",
RoleMg: "System",
UserMg: "System",
VideoList: "Video"
},
deleteFun(that: any, url: any, callback: any) {
(that as any)
......@@ -55,4 +54,5 @@ export default {
callback(res)
})
},
}
\ No newline at end of file
dcit-hcsystem-hcsystem-master/src/views/Enterprises/demo.vue
View file @ 248c894b
......@@ -5,7 +5,7 @@
<div id="main1" style="width:500px;height:500px;"></div>
</div>
<div id="pie2" style="float:right;width:50%;height: 500px;">
<div id="main2" style="width:600px;height:500px;"></div>
<div id="main2" style="width:650px;height:500px;"></div>
</div>
</div>
</template>
......@@ -37,16 +37,16 @@ export default {
var getData2 = [];
METHOD.axiosGet(
this,
`/enterpriseInfo/getNumberByRegulation`,
`/enterpriseGoods/getNumberByEnterprise`,
function(res) {
if (res.code === 0) {
//先进行赋值
for(let i=0; i<res.data.result.length; i++) {
var obj = new Object();
var arr = new Object();
obj.name = res.data.result[i].type;
obj.name = res.data.result[i].name;
obj.value = res.data.result[i].number;
arr = res.data.result[i].type;
arr = res.data.result[i].name;
getData1[i] = obj;
getData2[i] = arr;
}
......@@ -64,8 +64,8 @@ export default {
// 绘制图表
myChart1.setOption({
title : {
text: '泽宏云',//主标题
subtext: '饼状图',//副标题
text: '企业按监管分类统计',//主标题
// subtext: '饼状图',//副标题
x:'center',//x轴方向对齐方式
},
tooltip : {
......@@ -105,7 +105,7 @@ export default {
var getData2 = [];
METHOD.axiosGet(
this,
`/enterpriseGoods/getNumberByEnterprise`,
`/enterpriseInfo/getNumberByRegulation`,
function(res) {
if (res.code === 0) {
//先进行赋值
......@@ -113,7 +113,7 @@ export default {
var obj = new Object();
var arr = new Object();
obj = res.data.result[i].number;
arr = res.data.result[i].name;
arr = res.data.result[i].type;
getData1[i] = obj;
getData2[i] = arr;
}
......@@ -131,8 +131,8 @@ export default {
myChart2.setOption({
// color:['rgb(8,252,7)','rgb(255,168,0)','rgb(0,121,254)','rgb(0,255,251)','rgb(3,120,251)','rgb(0,200,251)'],
title: {
text: '泽宏云',//主标题
subtext: '柱状图',
text: '企业危险源数量统计',//主标题
// subtext: '柱状图',
},
tooltip: {},
legend: {
......@@ -168,9 +168,16 @@ export default {
/* border:1px #000000 solid; */
padding: 30px;
}
.el-main .el-tabs{
background-color: #f9f9f9;
.el-main .el-tabs .el-tabs__content{
background-image: url(gif.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
/* height: 100%; */
padding: 0px !important;
}
/* .el-tabs__content .el-tab-pane .EnseList{
height: 100%;
} */
/* .pie #pie1 #main1{
width:100%;height:500px;
}
......
dcit-hcsystem-hcsystem-master/src/views/Enterprises/tongji.vue
View file @ 248c894b
<template>
<el-tabs v-model="activeName" type="border-card" >
<el-tab-pane label="列表" name="first">
<div class="EnseList">
<div class="EnseList" style="height: 700px;background-color: #fff;padding: 20px;">
<el-row class="topBar">
<el-col>
<el-form :inline="true" :model="searchData">
......@@ -34,10 +34,10 @@
<el-table-column prop="legalPerson" label="企业法人"></el-table-column>
<el-table-column prop="orgCode" label="组织机构代码"></el-table-column>
<el-table-column prop="legalPersonEmail" label="法人邮箱"></el-table-column>
<el-table-column prop="userName" label="管理员名称"></el-table-column>
<el-table-column prop="account" label="管理员账号"></el-table-column>
<el-table-column prop="status" label="账号状态">
<template slot-scope="scope">
<el-table-column prop="" label="监管分类"></el-table-column>
<el-table-column prop="" label="危险源数量"></el-table-column>
<el-table-column prop="" label="企业地址">
<!-- <template slot-scope="scope">
<font v-if="scope.row.accountStatus === '0'" class="colorM">
<i class="iconfont iconzhengchang"></i> 正常
</font>
......@@ -53,7 +53,7 @@
<font v-else-if="scope.row.accountStatus == 4" class="colorR">
<i class="iconfont iconweitongguo"></i> 审核未通过
</font>
</template>
</template> -->
</el-table-column>
<el-table-column label="操作" width="170">
<template slot-scope="scope">
......@@ -75,6 +75,29 @@
</div>
</el-tab-pane>
<el-tab-pane label="图表" name="second">
<div style="width: 100%;height: 10em;">
<div class="el-tab-pane-div second-div" style="">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/logo2.png" width="25%" style="margin-top: 2rem;">
<p>危险源数量</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">12345</div>
</div>
<div class="el-tab-pane-div second-div" style="">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/logo2.png" width="25%" style="margin-top: 2rem;">
<p>注册企业数量</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">12345</div>
</div>
<div class="el-tab-pane-div second-div" style="">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/logo2.png" width="25%" style="margin-top: 2rem;">
<p>待审批数量</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">12345</div>
</div>
</div>
<Demo></Demo>
</el-tab-pane>
</el-tabs>
......@@ -177,5 +200,32 @@ export default class EnterprisesMg extends Vue {
</script>
<style lang="scss" scoped>
@import "@/utils/public.scss";
.second-div{
margin-top: 20px;
width: 30%;
float: left;
margin-left: 2.5%;
height: 9rem;
color: #FFFFFF;
background-color: rgba(47, 96, 177, 0.1);
border-radius: 5px;
border: 2px solid rgb(22, 151, 207, 0.3);
box-shadow: 0 0 8px 8px rgba(131, 229, 255, 0.1)inset, 0 0 7px 7px rgba(22, 151, 207, 0.2);
}
main > div {
background: #ffffff;
height: calc(100vh - 120px);
padding: 0px !important;
}
main > div .el-table[data-v-350d47e5] {
min-height: calc(100% - 580px);
max-height: calc(100% - 120px);
height: auto;
}
main > div .el-table {
min-height: calc(100% - 180px) !important;
max-height: calc(100% - 120px) !important;
height: auto;
}
</style>
\ No newline at end of file
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ 248c894b
......@@ -4,25 +4,28 @@
<!-- <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search> -->
<!-- <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool> -->
<!-- <div style="width:200px;height:250px;" class="show-box" > -->
<dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<div class="markBox">
<ul>
<div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weixianyuan.png" /> 危险源 <span>{{tjNumberObj.dangerNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/jiankong.png" /> 监控监测点<span>{{tjNumberObj.cameraNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weihaichangsuo.png" /> 职业危害场所<span>2</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div>
</ul>
</div>
</dv-border-box-10>
<button @click="Mutil.tianSlA()">切换1</button>
<button @click="Mutil.tianSlB()">切换2</button>
<button @click="Mutil.tianSlC()">切换3</button>
<dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<div class="markBox">
<ul>
<div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weixianyuan.png" /> 危险源 <span>{{tjNumberObj.dangerNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/jiankong.png" /> 监控监测点<span>{{tjNumberObj.cameraNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weihaichangsuo.png" /> 职业危害场所<span>2</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div>
</ul>
</div>
</dv-border-box-10>
</div>
......@@ -31,6 +34,14 @@
<li><img width="10px" src="@/assets/mark/markqy.png" /> 企业图例</li>
</ul>
</div> -->
<!-- <div class="BoxWrap">
<div class="horn">
<div class="lt"></div>
<div class="rt"></div>
<div class="rb"></div>
<div class="lb"></div>
</div>
</div> -->
</div>
</div>
</template>
......@@ -89,7 +100,9 @@ export default class GIS extends Vue {
@Provide() toolobj: any;
@Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {};
@Provide() tjNumberObj: any = {};
getMapData() {
let that = this;
METHOD.axiosPost(
......@@ -236,6 +249,7 @@ export default class GIS extends Vue {
}
created() {
this.getMapData();
}
mounted() {
let that = this;
......@@ -246,7 +260,8 @@ export default class GIS extends Vue {
let id = evt.selected[0].get('did');
if (id) that.getPopcon(id);
})
this.getStatiData()
this.getStatiData();
this.Mutil.changeCenter("石家庄");
}
getStatiData() {
let that = this;
......@@ -275,13 +290,72 @@ export default class GIS extends Vue {
}
}
);
}
}
// tianSlA() {
// console.log("dfsddddddddddddddddddddddddddddddddd")
// this.tianSlA.setVisible(true);
// this.tianSlB.setVisible(false);
// this.tianSlC.setVisible(false);
// };
// tianSlB() {
// console.log("gsfdgfdhgsgfhgfdhf")
// this.tianSlA.setVisible(false);
// this.tianSlB.setVisible(true);
// this.tianSlC.setVisible(false);
// };
// tianSlC() {
// this.tianSlA.setVisible(false)
// this.tianSlB.setVisible(false)
// this.tianSlC.setVisible(true)
// }
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
/* // .BoxWrap{
// width: 200px;
// height: 200px;
// position: relative;
// }
// .horn{
// position: absolute;
// width: 100%;
// height: 100%;
// border:1px solid #00d3e7;
// }
// .horn>div{
// width: 10px;
// height: 10px;
// position:absolute;
// }
// .horn .lt{
// border-top: 3px solid #00d3e7;
// border-left: 3px solid #00d3e7;
// left: -2px;
// top: -2px;
// }
// .horn .rt{
// border-top: 3px solid #00d3e7;
// border-right: 3px solid #00d3e7;
// right: -2px;
// top: -2px;
// }
// .horn .rb{
// border-bottom:3px solid #00d3e7;
// border-right: 3px solid #00d3e7;
// right: -2px;
// bottom: -2px;
// }
// .horn .lb{
// border-bottom:3px solid #00d3e7;
// border-left: 3px solid #00d3e7;
// left: -2px;
// bottom: -2px;
// } */
#mapbox {
width: 100%;
height: 100%;
......
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