Skip to content

X
xt-whp
Commit 384a3b77 authored by yaqizhang's avatar yaqizhang
Browse files
Options

企业汇集统计

parent 89504068
Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 91 deletions
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ 384a3b77
...@@ -25,70 +25,52 @@ ...@@ -25,70 +25,52 @@
<QyMapone></QyMapone> <QyMapone></QyMapone>
</div> </div>
<div class="markBox"> <div class="markBox">
<div class="markbox-div"> <div class="markbox-div" ref="qyzc" style="margin-top: 70px;">
<el-tooltip content="企业注册" placement="left" effect="light"> <div class="markbox-click" ref="qyimg" @click="mapqiye" style="width: 30%;height: 100%;float: left;text-align: right;">
<div class="markbox-click" ref="qyimg" @click="mapqiye" style="position: relative;"> <img width="15px" src="@/assets/mark/markqy.png" />
<img width="15px" style="margin-top: 10px;" src="@/assets/mark/markqy.png" />
<img src="@/assets/mark/selected.png" alt=""
style="position: absolute;width: 16px; top: 0;right: 0">
</div> </div>
<div class="markbox-span" ref="zqyzc" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
</el-tooltip> <span>企业注册<p></p>2</span>
</div>
<div class="markbox-span">
<span>{{tjNumberObj.enterpriseRegNum}}</span>
</div>
<div class="markbox-div">
<el-tooltip content="危险源" placement="left" effect="light">
<div @click="mapwxy" ref="wxyimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/weixianyuan.png" />
<img src="@/assets/mark/selected.png" alt=""
style="position: absolute;width: 16px; top: 0;right: 0">
</div> </div>
</el-tooltip>
</div> </div>
<div class="markbox-span">
<span>{{tjNumberObj.dangerNum}}</span> <div class="markbox-div" ref="wxy">
</div> <div @click="mapwxy" class="markbox-click" ref="wxyimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<div class="markbox-div"> <img width="20px" src="@/assets/mark/weixianyuan.png" />
<el-tooltip content="监控监测点" placement="left" effect="light"> </div>
<div @click="mapshipin" ref="shipinimg" style="position: relative;"> <div class="markbox-span" ref="zwxy" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/jiankong.png" /> <span>危险源<p></p>2</span>
<img src="@/assets/mark/selected.png" alt=""
style="position: absolute;width: 16px; top: 0;right: 0">
</div> </div>
</el-tooltip>
</div> </div>
<div class="markbox-span"> <div class="markbox-div" ref="jk">
<span>{{tjNumberObj.cameraNum}}</span> <div @click="mapshipin" class="markbox-click" ref="shipinimg" style="width: 30%;height: 100%;float: left;text-align: right;">
</div> <img width="20px" src="@/assets/mark/jiankong.png" />
<div class="markbox-div">
<el-tooltip content="职业危害场所" placement="left" effect="light">
<div ref="whimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/weihaichangsuo.png" />
<!-- <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0"> -->
</div> </div>
</el-tooltip> <div class="markbox-span" ref="zjk" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
</div> <span>监控监测点<p></p>2</span>
<div class="markbox-span"> </div>
<span>0</span>
</div> </div>
<div class="markbox-div"> <div class="markbox-div" ref="wh">
<el-tooltip content="隐患" placement="left" effect="light"> <div ref="whimg" class="markbox-click" style="width: 30%;height: 100%;float: left;text-align: right;">
<div @click="yinhuan" ref="yhimg" style="position: relative;"> <img width="20px" src="@/assets/mark/weihaichangsuo.png" />
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/yinhuan.png" /> </div>
<img src="@/assets/mark/selected.png" alt="" <div class="markbox-span" ref="zwh" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
style="position: absolute;width: 16px; top: 0;right: 0"> <span>职业危害场所<p></p>2</span>
</div> </div>
</el-tooltip>
</div> </div>
<div class="markbox-span">
<span>{{tjNumberObj.troubleNum}}</span> <div class="markbox-div" ref="yh">
<div @click="yinhuan" class="markbox-click" ref="yhimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="20px" src="@/assets/mark/yinhuan.png" />
</div>
<div class="markbox-span" ref="zyh" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>隐患<p></p>2</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<el-dialog title="危险源" :visible.sync="dialogVisible1"> <el-dialog title="危险源" :visible.sync="dialogVisible1">
...@@ -691,12 +673,15 @@ ...@@ -691,12 +673,15 @@
if (this.qiyeVisble) { if (this.qiyeVisble) {
this.Mutil.visibleMarks(false, "qiye"); this.Mutil.visibleMarks(false, "qiye");
this.qiyeVisble = false; this.qiyeVisble = false;
this.$refs.qyimg.lastChild.style.display = "none"; this.$refs.qyzc.style.background = "#24BBC7";
this.$refs.zqyzc.lastChild.style.color = "#013056";
// this.$refs.qyimg.lastChild.style.display = "none";
} else { } else {
this.Mutil.visibleMarks(true, "qiye"); this.Mutil.visibleMarks(true, "qiye");
this.qiyeVisble = true; this.qiyeVisble = true;
this.$refs.qyimg.lastChild.style.display = "block"; this.$refs.qyzc.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zqyzc.lastChild.style.color = "#fff";
} }
} }
...@@ -708,33 +693,39 @@ ...@@ -708,33 +693,39 @@
if (this.wxyVisble) { if (this.wxyVisble) {
this.Mutil.visibleMarks(false, "wxy"); this.Mutil.visibleMarks(false, "wxy");
this.wxyVisble = false; this.wxyVisble = false;
this.$refs.wxyimg.lastChild.style.display = "none"; this.$refs.wxy.style.background = "#24BBC7";
this.$refs.zwxy.lastChild.style.color = "#013056";
} else { } else {
this.Mutil.visibleMarks(true, "wxy"); this.Mutil.visibleMarks(true, "wxy");
this.wxyVisble = true; this.wxyVisble = true;
this.$refs.wxyimg.lastChild.style.display = "block"; this.$refs.wxy.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zwxy.lastChild.style.color = "#fff";
} }
} }
mapshipin() { mapshipin() {
if (this.shipinVisble) { if (this.shipinVisble) {
this.Mutil.visibleMarks(false, "shipin"); this.Mutil.visibleMarks(false, "shipin");
this.shipinVisble = false; this.shipinVisble = false;
this.$refs.shipinimg.lastChild.style.display = "none"; this.$refs.jk.style.background = "#24BBC7";
this.$refs.zjk.lastChild.style.color = "#013056";
} else { } else {
this.Mutil.visibleMarks(true, "shipin"); this.Mutil.visibleMarks(true, "shipin");
this.shipinVisble = true; this.shipinVisble = true;
this.$refs.shipinimg.lastChild.style.display = "block"; this.$refs.jk.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zjk.lastChild.style.color = "#fff";
} }
} }
yinhuan() { yinhuan() {
if (this.yinhuanVisble) { if (this.yinhuanVisble) {
this.Mutil.visibleMarks(false, "yh"); this.Mutil.visibleMarks(false, "yh");
this.yinhuanVisble = false; this.yinhuanVisble = false;
this.$refs.yhimg.lastChild.style.display = "none"; this.$refs.yh.style.background = "#24BBC7";
this.$refs.zyh.lastChild.style.color = "#013056";
} else { } else {
this.Mutil.visibleMarks(true, "yh"); this.Mutil.visibleMarks(true, "yh");
this.yinhuanVisble = true; this.yinhuanVisble = true;
this.$refs.yhimg.lastChild.style.display = "block"; this.$refs.yh.style.background = "RGBA(5, 52, 82, 0.7)";
this.$refs.zyh.lastChild.style.color = "#fff";
} }
} }
// editFun(row: any) { // editFun(row: any) {
...@@ -876,37 +867,35 @@ ...@@ -876,37 +867,35 @@
} */ } */
.markBox { .markBox {
z-index: 30; z-index: 30;
width: 120px; width: 185px;
height: 250px; height: 700px;
background-color: rgba(2, 40, 90, 0.5); background: url('../../assets/z3.png') 100% 100%;
background-repeat: no-repeat;
position: fixed; position: fixed;
bottom: 10px; top: 70px;
right: 20px; right: 20px;
} }
.markBox .markbox-div { .markBox .markbox-div {
float: left; width: 100%;
width: 50%; height: 70px;
height: 50px;
text-align: center; text-align: center;
/* background: url(selected.png) right top no-repeat !important; background-color: RGBA(17, 59, 89, 0.7);
background-size: 16px !important; */ font-size: 100% 100%;
margin-top: 30px;
} }
.markBox .markbox-span { .markbox-span {
float: right; float: right;
width: 50%;
height: 50px;
text-align: center; text-align: center;
line-height: 50px; font-size: 15px;
font-size: 2rem; /* font-family: 'UnidreamLED'; */
font-family: 'UnidreamLED';
color: #fff; color: #fff;
} }
.markBox div img { .markbox-click img {
width: 25px; width: 30px;
/* margin-top: 10px; */ margin-top: 17px;
} }
.show-box { .show-box {
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue
View file @ 384a3b77
...@@ -31,13 +31,13 @@ ...@@ -31,13 +31,13 @@
</div> </div>
<!-- </dv-border-box-1> --> <!-- </dv-border-box-1> -->
<dv-border-box-12> <dv-border-box-12>
<div id="pie2" style="width:450px;height: 370px;padding: 20px 0 0 0;"> <div id="pie2" style="width:450px;height: 350px;padding: 20px 0 0 0;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main2" style="width:450px;height:340px;"></div> <div id="main2" style="width:450px;height:330px;"></div>
</div> </div>
</dv-border-box-12> </dv-border-box-12>
<div class="div-table" style="width:480px;margin-top: 20px;background-color: rgb(0, 0, 0,0);"> <div class="div-table" style="width:480px;margin-top: 20px;background-color: rgb(0, 0, 0,0);position: fixed;bottom: 0;right: 0;margin-right: 20px;">
<div style="width: 100%;height: 40px;text-align: center;font-size: 18px; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div> <div style="width: 100%;height: 38px;text-align: left;font-size: 16px; line-height: 38px;color: #fff;font-weight: 900;background: #013056;opacity: 0.8;"><span style="margin-left: 10px;">预警信息</span></div>
<el-table :data="$data.tableData" stripe border :header-cell-style="{background:'#02285a',color:'#fff',}"> <el-table :data="$data.tableData" stripe border :header-cell-style="{background:'#02285a',color:'#fff',}">
<el-table-column prop="unitName" label="企业名称" width="110"></el-table-column> <el-table-column prop="unitName" label="企业名称" width="110"></el-table-column>
<el-table-column prop="alarmInfo" label="预警信息" width="110"> <el-table-column prop="alarmInfo" label="预警信息" width="110">
...@@ -49,6 +49,10 @@ ...@@ -49,6 +49,10 @@
<el-table-column prop="alarmTime" label="预警时间"></el-table-column> <el-table-column prop="alarmTime" label="预警时间"></el-table-column>
</el-table> </el-table>
</div> </div>
<div id="pie3" style="width:450px;height: 350px;margin-left: 20px;margin-top: 15px;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main3" style="width:450px;height:330px;"></div>
</div>
</div> </div>
...@@ -57,7 +61,7 @@ ...@@ -57,7 +61,7 @@
<script>// 引入基本模板 <script>// 引入基本模板
import { Component, Vue, Provide } from "vue-property-decorator"; import { Component, Vue, Provide } from "vue-property-decorator";
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import {BarChart, PieChart} from 'echarts/charts'; import {BarChart, PieChart, LineChart} from 'echarts/charts';
import { import {
TitleComponent, TitleComponent,
TooltipComponent, TooltipComponent,
...@@ -78,6 +82,7 @@ echarts.use( ...@@ -78,6 +82,7 @@ echarts.use(
GridComponent, GridComponent,
BarChart, BarChart,
PieChart, PieChart,
LineChart,
LegendComponent, LegendComponent,
DatasetComponent, DatasetComponent,
CanvasRenderer CanvasRenderer
...@@ -110,6 +115,7 @@ export default { ...@@ -110,6 +115,7 @@ export default {
}, },
mounted(){ mounted(){
this.drawPieChart(); this.drawPieChart();
this.inPieChart();
this.getStatiData() this.getStatiData()
}, },
methods:{ methods:{
...@@ -166,7 +172,7 @@ export default { ...@@ -166,7 +172,7 @@ export default {
getData2[i] = arr; getData2[i] = arr;
} }
myChart2.setOption({ myChart2.setOption({
xAxis: { yAxis: {
data: getData2, data: getData2,
}, },
series:[{ series:[{
...@@ -185,7 +191,13 @@ export default { ...@@ -185,7 +191,13 @@ export default {
color: "#fff", color: "#fff",
} }
}, },
tooltip: {}, tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: { legend: {
data:['危险源'], data:['危险源'],
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
...@@ -193,13 +205,47 @@ export default { ...@@ -193,13 +205,47 @@ export default {
} }
}, },
xAxis: { xAxis: {
axisLabel: { type: 'value',
interval:0, axisLabel: {
rotate:40 show:true,
} , interval:0,
rotate:40
} ,
//X轴白线
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(71, 126, 171, 1)',
type: 'dashed'
},
},
data: [], data: [],
}, },
yAxis: {}, yAxis: {
type: 'category',
inverse: true, //倒叙
axisLabel:{
show: true,
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
},
series: [{ series: [{
name: '危险源', name: '危险源',
type: 'bar', type: 'bar',
...@@ -211,6 +257,146 @@ export default { ...@@ -211,6 +257,146 @@ export default {
fontSize: 18 fontSize: 18
}, },
}); });
},
inPieChart(){
// 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.init(document.getElementById('main3'));
// let that=this;
// var getData1 = [];
// var getData2 = [];
// METHOD.axiosGet(
// this,
// `/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 = res.data.result[i].number;
// // arr = res.data.result[i].type;
// obj = res.data.result[i].number;
// arr = res.data.result[i].name;
// getData1[i] = obj;
// getData2[i] = arr;
// }
// myChart2.setOption({
// yAxis: {
// data: getData2,
// },
// series:[{
// data: getData1,
// }]
// })
// }
// });
// 绘制图表
myChart3.setOption({
title: {
text: '隐患和风险控制',//主标题
color: '#fff',
// subtext: '柱状图',
textStyle: {
color: "#fff",
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
legend: {
data: ['隐患', '风险'],
textStyle: { //图例文字的样式
color: '#fff',
}
},
xAxis: [
{
type: 'category',
axisLabel: {
show:true,
interval:0,
rotate:40
} ,
//X轴白线
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
data: ['测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
axisLabel:{
show: true,
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(71, 126, 171, 1)',
type: 'dashed'
},
},
},
{
type: 'value',
interval: 5,
}
],
series: [
{
name: '隐患',
type: 'bar',
data: [
400, 1300, 700, 1000, 1500, 1800, 200, 300, 2000, 1000, 1300
]
},
{
name: '风险',
type: 'line',
// symbol:'circle',
symbolSize:6,
data: [1000,1300, 1450, 1600, 1700, 1800, 1850, 1800, 1700, 1600, 1500],
itemStyle : {normal : {color:'#00D7FE', //改变折线点的颜色
lineStyle:{color:'#00D7FE'} //改变折线颜色
},
},
}
]
})
} }
} }
} }
...@@ -256,7 +442,7 @@ export default { ...@@ -256,7 +442,7 @@ export default {
background-color: #2c5794 !important; background-color: #2c5794 !important;
} }
.pie .div-table .el-table--border, .el-table--group { .pie .div-table .el-table--border, .el-table--group {
height: 200px; height: 160px;
border: 0px solid !important; border: 0px solid !important;
background-color: rgb(0, 0, 0,0); background-color: rgb(0, 0, 0,0);
} }
......
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