Commit 32dd9971 authored by jianqian's avatar jianqian

企业统计更新,一起一档修改

parent 2da12654
......@@ -6,10 +6,10 @@
<!--</div>-->
<div style="width:100%;display:flex;flex-direction:row;justify-content:flex-start;">
<div id="pie2" style="width:45%;height: 500px;">
<div id="pie20" style="width:45%;height: 500px;margin-left: 5%;">
<div id="main2" style="width:550px;height:500px;"></div>
</div>
<div id="pie3" style="width:45%;height: 500px;">
<div id="pie3" style="width:45%;height: 500px;margin-left: 5%;">
<div id="main3" style="width:550px;height:500px;"></div>
</div>
</div>
......@@ -32,6 +32,7 @@ export default {
mounted(){
//this.initData();
//this.drawPieChart();
//this.drawPieChart2("1");
},
methods:{
//初始化数据
......@@ -126,7 +127,6 @@ export default {
drawPieChart(data){
// 基于准备好的dom,初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
let that=this;
var getData1 = data.alarm.num;
var getData2 = data.accident.num;
......@@ -166,57 +166,155 @@ 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: '企业事故次数统计',//主标题
color: '#fff',
text: '事故和预警',//主标题
color: '#000',
// subtext: '柱状图',
textStyle: {
color: "#fff",
color: "#000",
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
tooltip: {},
legend: {
data:['事故次数'],
data: ['事故', '预警'],
textStyle: { //图例文字的样式
color: '#fff',
color: '#000',
}
},
xAxis: {
xAxis: [
{
type: 'category',
axisLabel: {
show:true,
interval:0,
rotate:40
} ,
// data: ["报警器","二氧化碳报警器","摄像头","水压探测器","摄像头","有毒气体探测器"],
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
//X轴白线
axisLine: {
show: true,
lineStyle: {
color: '#000',
},
yAxis: {},
series: [{
name: '事故数量',
},
//data: ['测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患'],
data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
axisLabel:{
show: true,
rich: {
flag: {
fontSize: 25,
padding: 5
}
}
},
axisLine: {
show: true,
lineStyle: {
color: '#000',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(71, 126, 171, 1)',
type: 'dashed'
},
},
},
{
type: 'value',
interval: 5,
}
],
series: [
{
name: '事故',
type: 'bar',
// data: [5, 20, 36, 10, 10, 20],
data: getData2,
}],
textStyle: {
color: "#fff",
fontSize: 18
// data: [
// 400, 1300, 700, 1000, 1500, 1800, 200, 300, 2000, 1000, 1300
// ]
data:getData2,
},
});
myChart3.setOption({
{
name: '预警',
type: 'line',
// symbol:'circle',
symbolSize:6,
//data: [1000,1300, 1450, 1600, 1700, 1800, 1850, 1800, 1700, 1600, 1500],
data:getData1,
itemStyle : {normal : {color:'#00D7FE', //改变折线点的颜色
lineStyle:{color:'#00D7FE'} //改变折线颜色
},
},
}
]
})
},
drawPieChart2(data){
// 基于准备好的dom,初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main3'));
let that=this;
// myChart2.setOption({
// xAxis: {
// data: ["1","2","3","4","5"],
// },
// series:[{
// //data: [datas.cameraList.length(),datas.cameraList.length(),datas.cameraList.length(),datas.cameraList.length(),datas.cameraList.length()],
// data:[2,5,9,1,6]
// }]
// })
// 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({
// 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: '企业预警次数统计',//主标题
color: '#fff',
text: '企业危险源数量统计',//主标题
color: '#000',
// subtext: '柱状图',
textStyle: {
color: "#fff",
color: "#000",
}
},
tooltip: {},
legend: {
data:['预警次数'],
data:['危险源'],
textStyle: { //图例文字的样式
color: '#fff',
color: '#000',
}
},
xAxis: {
......@@ -224,31 +322,33 @@ export default {
interval:0,
rotate:40
} ,
// data: ["报警器","二氧化碳报警器","摄像头","水压探测器","摄像头","有毒气体探测器"],
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
data: ["监控点位","危险源","职业危害场所","隐患","设备数量"],
//data: [],
},
yAxis: {},
series: [{
name: '预警次数',
name: '危险源',
type: 'bar',
// data: [5, 20, 36, 10, 10, 20],
data: getData1,
//data: [5, 20, 36, 10, 10, 20],
data: data,
}],
textStyle: {
color: "#fff",
color: "#000",
fontSize: 18
},
});
}
}
}
//background-image: url(../../assets/bg.png);
</script>
<style>
.pie #pie1{
/* border:1px #000000 solid; */
padding: 30px;
}
.pie #pie2{
.pie #pie20{
/* border:1px #000000 solid; */
margin-left: 20px;
margin-top: 50px;
......@@ -259,7 +359,6 @@ export default {
margin-top: 50px;
}
.el-main .el-tabs .el-tabs__content{
background-image: url(../../assets/bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
/* height: 100%; */
......
<template>
<div class="gis">
<div class="gis" style="padding: 0px;">
<div id="mapbox">
<div style="position:absolute;left:-30px;top:10px">
<button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button>
......@@ -871,7 +871,7 @@
background: url('../../assets/z3.png') 100% 100%;
position: absolute;
top: -0px;
right: 10px;
right: 0px;
}
.markBox .markbox-div {
......
<template>
<div class="gis">
<div class="gis" style="padding: 0px">
<div id="mapbox" style="margin: 0">
<div style="position:absolute;left:500px;top:10px">
<button @click="Mutil.tianSlA()" id="but1" class="map-botton">卫星地图</button>
......@@ -21,12 +21,12 @@
</div>
<div style="">
<div id="bluebox"
style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;left: 10px;float: left;">
style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;float: left;">
<QyMapone></QyMapone>
</div>
<div @click="kongzhi" id="bluebox2"
style="width: 30px;height: 10%;z-index: 11;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;left: 510px;float: left;top:45%">
<img style="height: 100%;width: 100%" src="@/assets/mark/markqy.png"/>
style="width: 30px;height: 8%;z-index: 11;background-color: rgba(2, 40, 90, 0.9);position: absolute;top: 0;left: 500px;float: left;top:45%;border-radius: 5px;">
<img id ="ko" style="height: 100%;width: 100%" src="@/assets/Subtract-1.png"/>
</div>
<div class="markBox">
......@@ -477,22 +477,24 @@
}
//隐藏企业信息
kongzhi(){
// var a = document.getElementById("bluebox").style.left;
//var a = document.getElementById("bluebox").style.left;
// this.kongzhi2(10)
var a = document.getElementById("bluebox").style.left
if(a=="10px"){
if(a=="0px"||a==''){
document.getElementById('ko').src = require('@/assets/Subtract.png');
document.getElementById("bluebox").style.left="-500px"
document.getElementById("bluebox2").style.left="10px"
document.getElementById("bluebox2").style.left="0px"
document.getElementById("but1").style.left="-450px"
document.getElementById("but2").style.left="-340px"
//console.log(document.getElementsByClassName("ol-unselectable").item(1));
this.removeClass(document.getElementsByClassName('ol-zoom').item(0), 'ol-zoom');
}else {
document.getElementById("bluebox").style.left="10px"
document.getElementById("bluebox2").style.left="510px"
document.getElementById("bluebox").style.left="0px"
document.getElementById("bluebox2").style.left="500px"
document.getElementById("but1").style.left="50px"
document.getElementById("but2").style.left="160px"
this.addClass(document.getElementsByClassName('ol-unselectable').item(1), 'ol-zoom');
document.getElementById('ko').src = require('@/assets/Subtract-1.png');
//this.addClass(document.getElementsByClassName('ol-unselectable').item(0), 'ol-zoom');
}
return;
......@@ -1204,7 +1206,7 @@
background: url('../../assets/z3.png') 100% 100%;
position: absolute;
top: -67px;
right: 10px;
right: 0px;
}
.markBox .markbox-div {
......
......@@ -36,12 +36,12 @@
<div id="main2" style="width:450px;height:calc(100vh - 670px);"></div>
</div>
</dv-border-box-12>
<div class="div-table" style="width:480px;margin-top: 15px;background-color: rgb(0, 0, 0,0);position: fixed;bottom: 0;right: 0;margin-right: 20px;">
<div class="div-table" style="width:480px;margin-bottom: 20px;background-color: rgb(0, 0, 0,0);position: fixed;bottom: 0;right: 0;margin-right: 10px;">
<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" ref="tableList" 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">
<template slot-scope="scope">
<template slot-scope="scope" >
<font class="dg">{{scope.row.alarmInfo}}</font>
</template>
</el-table-column>
......@@ -96,12 +96,14 @@ echarts.use(
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
import METHOD from "@/utils/methods";
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import VueEllipseProgress from 'vue-ellipse-progress';
// Vue.prototype.$echarts = echarts;
Vue.use(VueEllipseProgress);
export default {
data(){
return{
tableData:[],
......@@ -120,18 +122,32 @@ export default {
this.getStatiData()
},
methods:{
getTableData() {
async getTableData() {
let that = this;
that.loading = true;
METHOD.axiosPost(
await METHOD.axiosPost(
that,
`/alarmInfo/getAlarmInfoList`,{},
function(res) {
console.log(res)
if (res.code == 0) {
that.$data.tableData = res.data.pageData;
that.goscroll();
}
});
},
goscroll(){
let _this = this;
let divData = this.$refs.tableList.bodyWrapper ;
console.log(divData)
this.dibiao_clear=setInterval(() => {
divData.scrollTop += 1
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
divData.scrollTop = 0
}
}, 100);
},
getStatiData() {
let that = this;
......
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