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 @@
<QyMapone></QyMapone>
</div>
<div class="markBox">
<div class="markbox-div">
<el-tooltip content="企业注册" placement="left" effect="light">
<div class="markbox-click" ref="qyimg" @click="mapqiye" style="position: relative;">
<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 class="markbox-div" ref="qyzc" style="margin-top: 70px;">
<div class="markbox-click" ref="qyimg" @click="mapqiye" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="15px" src="@/assets/mark/markqy.png" />
</div>
</el-tooltip>
</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 class="markbox-span" ref="zqyzc" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>企业注册<p></p>2</span>
</div>
</el-tooltip>
</div>
<div class="markbox-span">
<span>{{tjNumberObj.dangerNum}}</span>
</div>
<div class="markbox-div">
<el-tooltip content="监控监测点" placement="left" effect="light">
<div @click="mapshipin" ref="shipinimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/jiankong.png" />
<img src="@/assets/mark/selected.png" alt=""
style="position: absolute;width: 16px; top: 0;right: 0">
<div class="markbox-div" ref="wxy">
<div @click="mapwxy" class="markbox-click" ref="wxyimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="20px" src="@/assets/mark/weixianyuan.png" />
</div>
<div class="markbox-span" ref="zwxy" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>危险源<p></p>2</span>
</div>
</el-tooltip>
</div>
<div class="markbox-span">
<span>{{tjNumberObj.cameraNum}}</span>
</div>
<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 class="markbox-div" ref="jk">
<div @click="mapshipin" class="markbox-click" ref="shipinimg" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="20px" src="@/assets/mark/jiankong.png" />
</div>
</el-tooltip>
</div>
<div class="markbox-span">
<span>0</span>
<div class="markbox-span" ref="zjk" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>监控监测点<p></p>2</span>
</div>
</div>
<div class="markbox-div">
<el-tooltip content="隐患" placement="left" effect="light">
<div @click="yinhuan" ref="yhimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/yinhuan.png" />
<img src="@/assets/mark/selected.png" alt=""
style="position: absolute;width: 16px; top: 0;right: 0">
<div class="markbox-div" ref="wh">
<div ref="whimg" class="markbox-click" style="width: 30%;height: 100%;float: left;text-align: right;">
<img width="20px" src="@/assets/mark/weihaichangsuo.png" />
</div>
<div class="markbox-span" ref="zwh" style="width: 70%;height: 100%;float: left;text-align: center;line-height: 10px;padding-top: 18px;">
<span>职业危害场所<p></p>2</span>
</div>
</el-tooltip>
</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>
<el-dialog title="危险源" :visible.sync="dialogVisible1">
......@@ -691,12 +673,15 @@
if (this.qiyeVisble) {
this.Mutil.visibleMarks(false, "qiye");
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 {
this.Mutil.visibleMarks(true, "qiye");
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 @@
if (this.wxyVisble) {
this.Mutil.visibleMarks(false, "wxy");
this.wxyVisble = false;
this.$refs.wxyimg.lastChild.style.display = "none";
this.$refs.wxy.style.background = "#24BBC7";
this.$refs.zwxy.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "wxy");
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() {
if (this.shipinVisble) {
this.Mutil.visibleMarks(false, "shipin");
this.shipinVisble = false;
this.$refs.shipinimg.lastChild.style.display = "none";
this.$refs.jk.style.background = "#24BBC7";
this.$refs.zjk.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "shipin");
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() {
if (this.yinhuanVisble) {
this.Mutil.visibleMarks(false, "yh");
this.yinhuanVisble = false;
this.$refs.yhimg.lastChild.style.display = "none";
this.$refs.yh.style.background = "#24BBC7";
this.$refs.zyh.lastChild.style.color = "#013056";
} else {
this.Mutil.visibleMarks(true, "yh");
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) {
......@@ -876,37 +867,35 @@
} */
.markBox {
z-index: 30;
width: 120px;
height: 250px;
background-color: rgba(2, 40, 90, 0.5);
width: 185px;
height: 700px;
background: url('../../assets/z3.png') 100% 100%;
background-repeat: no-repeat;
position: fixed;
bottom: 10px;
top: 70px;
right: 20px;
}
.markBox .markbox-div {
float: left;
width: 50%;
height: 50px;
width: 100%;
height: 70px;
text-align: center;
/* background: url(selected.png) right top no-repeat !important;
background-size: 16px !important; */
background-color: RGBA(17, 59, 89, 0.7);
font-size: 100% 100%;
margin-top: 30px;
}
.markBox .markbox-span {
.markbox-span {
float: right;
width: 50%;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 2rem;
font-family: 'UnidreamLED';
font-size: 15px;
/* font-family: 'UnidreamLED'; */
color: #fff;
}
.markBox div img {
width: 25px;
/* margin-top: 10px; */
.markbox-click img {
width: 30px;
margin-top: 17px;
}
.show-box {
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue
View file @ 384a3b77
......@@ -31,13 +31,13 @@
</div>
<!-- </dv-border-box-1> -->
<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 -->
<div id="main2" style="width:450px;height:340px;"></div>
<div id="main2" style="width:450px;height:330px;"></div>
</div>
</dv-border-box-12>
<div class="div-table" style="width:480px;margin-top: 20px;background-color: rgb(0, 0, 0,0);">
<div style="width: 100%;height: 40px;text-align: center;font-size: 18px; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div>
<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: 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-column prop="unitName" label="企业名称" width="110"></el-table-column>
<el-table-column prop="alarmInfo" label="预警信息" width="110">
......@@ -49,6 +49,10 @@
<el-table-column prop="alarmTime" label="预警时间"></el-table-column>
</el-table>
</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>
......@@ -57,7 +61,7 @@
<script>// 引入基本模板
import { Component, Vue, Provide } from "vue-property-decorator";
import * as echarts from 'echarts/core';
import {BarChart, PieChart} from 'echarts/charts';
import {BarChart, PieChart, LineChart} from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
......@@ -78,6 +82,7 @@ echarts.use(
GridComponent,
BarChart,
PieChart,
LineChart,
LegendComponent,
DatasetComponent,
CanvasRenderer
......@@ -110,6 +115,7 @@ export default {
},
mounted(){
this.drawPieChart();
this.inPieChart();
this.getStatiData()
},
methods:{
......@@ -166,7 +172,7 @@ export default {
getData2[i] = arr;
}
myChart2.setOption({
xAxis: {
yAxis: {
data: getData2,
},
series:[{
......@@ -185,7 +191,13 @@ export default {
color: "#fff",
}
},
tooltip: {},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data:['危险源'],
textStyle: { //图例文字的样式
......@@ -193,13 +205,47 @@ export default {
}
},
xAxis: {
axisLabel: {
interval:0,
rotate:40
} ,
type: 'value',
axisLabel: {
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: [],
},
yAxis: {},
yAxis: {
type: 'category',
inverse: true, //倒叙
axisLabel:{
show: true,
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
},
series: [{
name: '危险源',
type: 'bar',
......@@ -211,6 +257,146 @@ export default {
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 {
background-color: #2c5794 !important;
}
.pie .div-table .el-table--border, .el-table--group {
height: 200px;
height: 160px;
border: 0px solid !important;
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