Skip to content

X
xt-whp
Commit 32dd9971 authored by jianqian's avatar jianqian
Browse files
Options

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

parent 2da12654
Expand all Show whitespace changes
Inline Side-by-side
Showing with 473 additions and 232 deletions
dcit-hcsystem-hcsystem-master/src/views/Enterprises/EnterprisesTj.vue
View file @ 32dd9971
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
<!--</div>--> <!--</div>-->
<div style="width:100%;display:flex;flex-direction:row;justify-content:flex-start;"> <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 id="main2" style="width:550px;height:500px;"></div>
</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 id="main3" style="width:550px;height:500px;"></div>
</div> </div>
</div> </div>
...@@ -32,6 +32,7 @@ export default { ...@@ -32,6 +32,7 @@ export default {
mounted(){ mounted(){
//this.initData(); //this.initData();
//this.drawPieChart(); //this.drawPieChart();
//this.drawPieChart2("1");
}, },
methods:{ methods:{
//初始化数据 //初始化数据
...@@ -126,7 +127,6 @@ export default { ...@@ -126,7 +127,6 @@ export default {
drawPieChart(data){ drawPieChart(data){
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2')); var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
let that=this; let that=this;
var getData1 = data.alarm.num; var getData1 = data.alarm.num;
var getData2 = data.accident.num; var getData2 = data.accident.num;
...@@ -166,57 +166,155 @@ export default { ...@@ -166,57 +166,155 @@ export default {
// }); // });
// 绘制图表 // 绘制图表
myChart2.setOption({ 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: { title: {
text: '企业事故次数统计',//主标题 text: '事故和预警',//主标题
color: '#fff', color: '#000',
// subtext: '柱状图', // subtext: '柱状图',
textStyle: { textStyle: {
color: "#fff", color: "#000",
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
} }
}, },
tooltip: {},
legend: { legend: {
data:['事故次数'], data: ['事故', '预警'],
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
color: '#fff', color: '#000',
} }
}, },
xAxis: { xAxis: [
{
type: 'category',
axisLabel: { axisLabel: {
show:true,
interval:0, interval:0,
rotate:40 rotate:40
} , } ,
// data: ["报警器","二氧化碳报警器","摄像头","水压探测器","摄像头","有毒气体探测器"], //X轴白线
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], axisLine: {
show: true,
lineStyle: {
color: '#000',
}, },
yAxis: {}, },
series: [{ //data: ['测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患', '测试隐患'],
name: '事故数量', 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', type: 'bar',
// data: [5, 20, 36, 10, 10, 20], // data: [
data: getData2, // 400, 1300, 700, 1000, 1500, 1800, 200, 300, 2000, 1000, 1300
}], // ]
textStyle: { data:getData2,
color: "#fff",
fontSize: 18
}, },
}); {
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)'], // 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: { title: {
text: '企业预警次数统计',//主标题 text: '企业危险源数量统计',//主标题
color: '#fff', color: '#000',
// subtext: '柱状图', // subtext: '柱状图',
textStyle: { textStyle: {
color: "#fff", color: "#000",
} }
}, },
tooltip: {}, tooltip: {},
legend: { legend: {
data:['预警次数'], data:['危险源'],
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
color: '#fff', color: '#000',
} }
}, },
xAxis: { xAxis: {
...@@ -224,31 +322,33 @@ export default { ...@@ -224,31 +322,33 @@ export default {
interval:0, interval:0,
rotate:40 rotate:40
} , } ,
// data: ["报警器","二氧化碳报警器","摄像头","水压探测器","摄像头","有毒气体探测器"], data: ["监控点位","危险源","职业危害场所","隐患","设备数量"],
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], //data: [],
}, },
yAxis: {}, yAxis: {},
series: [{ series: [{
name: '预警次数', name: '危险源',
type: 'bar', type: 'bar',
// data: [5, 20, 36, 10, 10, 20], //data: [5, 20, 36, 10, 10, 20],
data: getData1, data: data,
}], }],
textStyle: { textStyle: {
color: "#fff", color: "#000",
fontSize: 18 fontSize: 18
}, },
}); });
} }
} }
} }
//background-image: url(../../assets/bg.png);
</script> </script>
<style> <style>
.pie #pie1{ .pie #pie1{
/* border:1px #000000 solid; */ /* border:1px #000000 solid; */
padding: 30px; padding: 30px;
} }
.pie #pie2{ .pie #pie20{
/* border:1px #000000 solid; */ /* border:1px #000000 solid; */
margin-left: 20px; margin-left: 20px;
margin-top: 50px; margin-top: 50px;
...@@ -259,7 +359,6 @@ export default { ...@@ -259,7 +359,6 @@ export default {
margin-top: 50px; margin-top: 50px;
} }
.el-main .el-tabs .el-tabs__content{ .el-main .el-tabs .el-tabs__content{
background-image: url(../../assets/bg.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
/* height: 100%; */ /* height: 100%; */
......
dcit-hcsystem-hcsystem-master/src/views/guarantee/dangerMap.vue
View file @ 32dd9971
<template> <template>
<div class="gis"> <div class="gis" style="padding: 0px;">
<div id="mapbox"> <div id="mapbox">
<div style="position:absolute;left:-30px;top:10px"> <div style="position:absolute;left:-30px;top:10px">
<button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button> <button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button>
...@@ -871,7 +871,7 @@ ...@@ -871,7 +871,7 @@
background: url('../../assets/z3.png') 100% 100%; background: url('../../assets/z3.png') 100% 100%;
position: absolute; position: absolute;
top: -0px; top: -0px;
right: 10px; right: 0px;
} }
.markBox .markbox-div { .markBox .markbox-div {
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ 32dd9971
<template> <template>
<div class="gis"> <div class="gis" style="padding: 0px">
<div id="mapbox" style="margin: 0"> <div id="mapbox" style="margin: 0">
<div style="position:absolute;left:500px;top:10px"> <div style="position:absolute;left:500px;top:10px">
<button @click="Mutil.tianSlA()" id="but1" class="map-botton">卫星地图</button> <button @click="Mutil.tianSlA()" id="but1" class="map-botton">卫星地图</button>
...@@ -21,12 +21,12 @@ ...@@ -21,12 +21,12 @@
</div> </div>
<div style=""> <div style="">
<div id="bluebox" <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> <QyMapone></QyMapone>
</div> </div>
<div @click="kongzhi" id="bluebox2" <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%"> 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 style="height: 100%;width: 100%" src="@/assets/mark/markqy.png"/> <img id ="ko" style="height: 100%;width: 100%" src="@/assets/Subtract-1.png"/>
</div> </div>
<div class="markBox"> <div class="markBox">
...@@ -477,22 +477,24 @@ ...@@ -477,22 +477,24 @@
} }
//隐藏企业信息 //隐藏企业信息
kongzhi(){ kongzhi(){
// var a = document.getElementById("bluebox").style.left; //var a = document.getElementById("bluebox").style.left;
// this.kongzhi2(10) // this.kongzhi2(10)
var a = document.getElementById("bluebox").style.left 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("bluebox").style.left="-500px"
document.getElementById("bluebox2").style.left="10px" document.getElementById("bluebox2").style.left="0px"
document.getElementById("but1").style.left="-450px" document.getElementById("but1").style.left="-450px"
document.getElementById("but2").style.left="-340px" document.getElementById("but2").style.left="-340px"
//console.log(document.getElementsByClassName("ol-unselectable").item(1)); //console.log(document.getElementsByClassName("ol-unselectable").item(1));
this.removeClass(document.getElementsByClassName('ol-zoom').item(0), 'ol-zoom'); this.removeClass(document.getElementsByClassName('ol-zoom').item(0), 'ol-zoom');
}else { }else {
document.getElementById("bluebox").style.left="10px" document.getElementById("bluebox").style.left="0px"
document.getElementById("bluebox2").style.left="510px" document.getElementById("bluebox2").style.left="500px"
document.getElementById("but1").style.left="50px" document.getElementById("but1").style.left="50px"
document.getElementById("but2").style.left="160px" document.getElementById("but2").style.left="160px"
this.addClass(document.getElementsByClassName('ol-unselectable').item(1), 'ol-zoom'); 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'); //this.addClass(document.getElementsByClassName('ol-unselectable').item(0), 'ol-zoom');
} }
return; return;
...@@ -1204,7 +1206,7 @@ ...@@ -1204,7 +1206,7 @@
background: url('../../assets/z3.png') 100% 100%; background: url('../../assets/z3.png') 100% 100%;
position: absolute; position: absolute;
top: -67px; top: -67px;
right: 10px; right: 0px;
} }
.markBox .markbox-div { .markBox .markbox-div {
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue
View file @ 32dd9971
...@@ -36,12 +36,12 @@ ...@@ -36,12 +36,12 @@
<div id="main2" style="width:450px;height:calc(100vh - 670px);"></div> <div id="main2" style="width:450px;height:calc(100vh - 670px);"></div>
</div> </div>
</dv-border-box-12> </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> <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="unitName" label="企业名称" width="110"></el-table-column>
<el-table-column prop="alarmInfo" label="预警信息" width="110"> <el-table-column prop="alarmInfo" label="预警信息" width="110">
<template slot-scope="scope"> <template slot-scope="scope" >
<font class="dg">{{scope.row.alarmInfo}}</font> <font class="dg">{{scope.row.alarmInfo}}</font>
</template> </template>
</el-table-column> </el-table-column>
...@@ -96,12 +96,14 @@ echarts.use( ...@@ -96,12 +96,14 @@ echarts.use(
// require('echarts/lib/component/tooltip') // require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title') // require('echarts/lib/component/title')
import METHOD from "@/utils/methods"; import METHOD from "@/utils/methods";
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import VueEllipseProgress from 'vue-ellipse-progress'; import VueEllipseProgress from 'vue-ellipse-progress';
// Vue.prototype.$echarts = echarts; // Vue.prototype.$echarts = echarts;
Vue.use(VueEllipseProgress); Vue.use(VueEllipseProgress);
export default { export default {
data(){ data(){
return{ return{
tableData:[], tableData:[],
...@@ -120,18 +122,32 @@ export default { ...@@ -120,18 +122,32 @@ export default {
this.getStatiData() this.getStatiData()
}, },
methods:{ methods:{
getTableData() { async getTableData() {
let that = this; let that = this;
that.loading = true; that.loading = true;
METHOD.axiosPost( await METHOD.axiosPost(
that, that,
`/alarmInfo/getAlarmInfoList`,{}, `/alarmInfo/getAlarmInfoList`,{},
function(res) { function(res) {
console.log(res) console.log(res)
if (res.code == 0) { if (res.code == 0) {
that.$data.tableData = res.data.pageData; 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() { getStatiData() {
let that = this; 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