Skip to content

X
xt-whp
Commit 2da12654 authored by jianqian's avatar jianqian
Browse files
Options

一、企业分布 

1.左侧隐藏
2.预警信息 滚动
二。企业统计
1.展示单个企业的安全生产信息
2.图表，折线图（事故数量，设备预警，近一年）

三、视频可视化
对接海康视频平台

去掉预案信息管理
一企一档
危险源、隐患、职业危害场所、监控监测点位
parent 8a3f2a3e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1191 additions and 314 deletions
dcit-hcsystem-hcsystem-master/package.json
View file @ 2da12654
......@@ -11,9 +11,11 @@
"@types/axios": "^0.14.0",
"axios": "^0.19.2",
"core-js": "^3.6.4",
"easy-player": "^2.2.7",
"echarts": "^5.1.1",
"element-ui": "^2.13.0",
"ol": "^6.4.3",
"video.js": "^7.15.4",
"vue": "^2.6.11",
"vue-amap": "^0.5.10",
"vue-class-component": "^7.2.2",
......@@ -22,6 +24,7 @@
"vue-ellipse-progress": "^1.3.0",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.5",
"vue-video-player": "^5.0.2",
"vuex": "^3.1.2",
"vuex-class": "^0.3.2"
},
......
dcit-hcsystem-hcsystem-master/src/views/Enterprises/EnterprisesQt.vue
View file @ 2da12654
<template>
<el-tabs v-model="activeName" type="border-card" >
<el-tab-pane label="图表" name="first">
<el-tab-pane label="图表" name="first" >
<div style ="display:flex;flex-direction:row;justify-content:flex-start;">
<div style="width: 24%;height:700px;" >
<div class="qiyetitle">企业列表</div>
<div class="qiyelist" style="letter-spacing:1px;" :id="item.enterpriseId" @click="showqiye(item.enterpriseId)" v-for="(item, index) in tableData.pageData" :key="index">
{{item.unitName}}
</div>
</div>
<div style="width: 75%">
<div style="width: 100%;height: 10em;">
<div class="el-tab-pane-div second-div" style="" @click="showList(1)" style="cursor:pointer;">
<div class="el-tab-pane-div second-div" style="" style="cursor:pointer;">
<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>
<p>事故总次数</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.dangerNum}}</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{totalOne}}</div>
</div>
<div class="el-tab-pane-div second-div" style="" @click="showList(2)" style="cursor:pointer;">
<div class="el-tab-pane-div second-div" style="" style="cursor:pointer;">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/z-zhuce.png" width="25%" style="margin-top: 2rem;">
<p>注册企业数量</p>
<p>设备预警总次数</p>
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.enterpriseRegNum}}</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{totalTwo}}</div>
</div>
<div class="el-tab-pane-div second-div" style="" @click="showList(3)" style="cursor:pointer;">
<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">
<img src="../../assets/z-shenhe.png" width="25%" style="margin-top: 2rem;">
<p>待审批数量</p>
<!--<div class="el-tab-pane-div second-div" style="" @click="showList(3)" style="cursor:pointer;">-->
<!--<div style="width: 40%;height: 100%; text-align: center;float: left;font-size: 15px;">-->
<!--<img src="../../assets/z-shenhe.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';">{{tjNumberObj.enterpriseCheckIngNum}}</div>-->
<!--</div>-->
</div>
<div style="width: 60%;height: 100%;text-align: center;line-height: 9rem;float: right;font-size: 3rem;font-family: 'UnidreamLED';">{{tjNumberObj.enterpriseCheckIngNum}}</div>
<EnterprisesTj></EnterprisesTj>
</div>
</div>
<EnterprisesTj></EnterprisesTj>
</el-tab-pane>
<el-tab-pane label="列表" name="second">
<div class="EnseList" style="background-color: #fff;padding: 20px;">
......@@ -239,10 +249,13 @@ export default class EnterprisesMg extends Vue {
@Provide() loading: Boolean = false;
@Provide() cityval: any = [];
@Provide() tjNumberObj: any = {};
@Provide() totalOne: string = 0;
@Provide() totalTwo: string = 0
//编辑组件
@Provide() dialogVisible1: Boolean = false;
@Provide() dialogVisible2: Boolean = false;
@Provide() dialogVisible3: Boolean = false;
@Provide() idcolor: string = "";
@Provide() zjKey: any = 0;
......@@ -255,6 +268,14 @@ export default class EnterprisesMg extends Vue {
this.dialogVisible3 = true;
}
}
showqiye(id){
if(this.idcolor!=''){
document.getElementById(this.idcolor).style.background="";
}
document.getElementById(id).style.background="#00008B";
this.idcolor= id;
this.getData();
}
getTableData() {
let that = this,
param = Object.assign({accountStatus:'0'}, that.PAGE, that.searchData);
......@@ -267,6 +288,7 @@ export default class EnterprisesMg extends Vue {
that.loading = false;
if (res.code == 0) {
that.tableData = res.data;
console.log(that.tableData.pageData)
}
}
);
......@@ -284,6 +306,24 @@ export default class EnterprisesMg extends Vue {
}
);
}
getData() {
let that = this;
var id = this.idcolor;
var param ={ enterpriseId: id, fromdate: "2021" }
METHOD.axiosPost(
that,
`/enterpriseInfo/enterpriseHistogram`,
param,
function (res: any) {
if (res.code == 0) {
that.totalOne = res.data.accident.totalNum;
that.totalTwo = res.data.alarm.totalNum;
console.log(res.data.accident)
EnterprisesTj.methods.drawPieChart(res.data)
}
}
);
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
......@@ -327,7 +367,7 @@ export default class EnterprisesMg extends Vue {
@import "@/utils/public.scss";
.second-div{
margin-top: 20px;
width: 30%;
width: 45%;
float: left;
margin-left: 2.5%;
height: 9rem;
......@@ -337,6 +377,31 @@ export default class EnterprisesMg extends Vue {
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);
}
.qiyetitle{
height: 60px;
line-height:60px;
margin-left: 20px;
text-align:center;
color:#f0c78a;
font-size: 30px;
margin-top:20px;
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);
}
.qiyelist{
height: 40px;
line-height:40px;
color: #f0f0f0;
font-size: large;
margin-left: 20px;
letter-spacing:1px;
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)!important;
......
dcit-hcsystem-hcsystem-master/src/views/Enterprises/EnterprisesTj.vue
View file @ 2da12654
<template style="">
<div class="pie" style="width:100%;height: 700px;">
<div id="pie1" style="float:left;width:50%;height: 500px;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main1" style="width:700px;height:500px;"></div>
</div>
<div id="pie2" style="float:right;width:40%;height: 500px;">
<!--<div id="pie1" style="float:left;width:50%;height: 500px;">-->
<!--&lt;!&ndash; 为 ECharts 准备一个具备大小（宽高）的 DOM &ndash;&gt;-->
<!--<div id="main1" style="width:700px;height:500px;"></div>-->
<!--</div>-->
<div style="width:100%;display:flex;flex-direction:row;justify-content:flex-start;">
<div id="pie2" style="width:45%;height: 500px;">
<div id="main2" style="width:550px;height:500px;"></div>
</div>
<div id="pie3" style="width:45%;height: 500px;">
<div id="main3" style="width:550px;height:500px;"></div>
</div>
</div>
</div>
</template>
......@@ -24,8 +30,8 @@ export default {
created(){
},
mounted(){
this.initData();
this.drawPieChart();
//this.initData();
//this.drawPieChart();
},
methods:{
//初始化数据
......@@ -62,7 +68,6 @@ export default {
})
}
});
// 绘制图表
myChart1.setOption({
title : {
......@@ -112,43 +117,95 @@ export default {
});
},
drawPieChart(){
getData(data) {
console.log(data)
let that = this;
//var id = this.idcolor;
},
drawPieChart(data){
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2'));
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();
var getData1 = data.alarm.num;
var getData2 = data.accident.num;
// myChart2.setOption({
// xAxis: {
// data: getData1,
// },
// series:[{
// data: 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].type;
obj = res.data.result[i].number;
arr = res.data.result[i].name;
getData1[i] = obj;
getData2[i] = arr;
}
// arr = res.data.result[i].name;
// getData1[i] = obj;
// getData2[i] = arr;
// }
// myChart2.setOption({
// xAxis: {
// data: getData2,
// },
// series:[{
// data: getData1,
// }]
// })
// }
// });
// 绘制图表
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',
// subtext: '柱状图',
textStyle: {
color: "#fff",
}
},
tooltip: {},
legend: {
data:['事故次数'],
textStyle: { //图例文字的样式
color: '#fff',
}
},
xAxis: {
axisLabel: {
interval:0,
rotate:40
} ,
// data: ["报警器","二氧化碳报警器","摄像头","水压探测器","摄像头","有毒气体探测器"],
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
},
yAxis: {},
series: [{
name: '事故数量',
type: 'bar',
// data: [5, 20, 36, 10, 10, 20],
data: getData2,
}],
textStyle: {
color: "#fff",
fontSize: 18
},
series:[{
data: getData1,
}]
})
}
});
// 绘制图表
myChart2.setOption({
myChart3.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: '企业危险源数量统计',//主标题
text: '企业预警次数统计',//主标题
color: '#fff',
// subtext: '柱状图',
textStyle: {
......@@ -157,7 +214,7 @@ export default {
},
tooltip: {},
legend: {
data:['危险源'],
data:['预警次数'],
textStyle: { //图例文字的样式
color: '#fff',
}
......@@ -168,14 +225,14 @@ export default {
rotate:40
} ,
// data: ["报警器","二氧化碳报警器","摄像头","水压探测器","摄像头","有毒气体探测器"],
data: [],
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
},
yAxis: {},
series: [{
name: '危险源',
name: '预警次数',
type: 'bar',
// data: [5, 20, 36, 10, 10, 20],
data: [],
data: getData1,
}],
textStyle: {
color: "#fff",
......@@ -196,6 +253,11 @@ export default {
margin-left: 20px;
margin-top: 50px;
}
.pie #pie3{
/* border:1px #000000 solid; */
margin-left: 20px;
margin-top: 50px;
}
.el-main .el-tabs .el-tabs__content{
background-image: url(../../assets/bg.png);
background-repeat: no-repeat;
......
dcit-hcsystem-hcsystem-master/src/views/Video/VideoList.vue
View file @ 2da12654
......@@ -118,6 +118,7 @@
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
@Component({
components: { }
})
......@@ -158,12 +159,22 @@
nodeClick(data: any, node: any, target: any) {
let that = this;
that.treecheckedObj = node.data;
if(node.level == "3"){
that.playerWindow = 'newplay' + that.flag;
var player = new WasmPlayer(null, that.playerWindow, null, {Height: true});
// console.log(that.playerWindow, node.data.deviceNumber)
player.play('http://27.128.189.137:18000/flv/hls/' + that.treecheckedObj.deviceNumber + '.flv', 1);
METHOD.axiosGet(
this,
`/artemis/getPreviewURLs?cameraIndexCode=`+that.treecheckedObj.deviceNumber,
function(res) {
// console.log(res.code)
if (res.code == 0) {
player.play(res.data.url, 1);
}else{
//player.play('http://live.hkstv.hk.lxdns.com/flv/hks.flv', 1);
}
});
//player.play('http://27.128.189.137:18000/flv/hls/' + that.treecheckedObj.deviceNumber + '.flv', 1);
if(that.flag < 4) {
that.flag++;
}
......
dcit-hcsystem-hcsystem-master/src/views/guarantee/qyMaptwo.vue
View file @ 2da12654
<!--
<template>
<div class="amap-page-container">
<el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
<el-amap-marker v-for="marker in markers":key="i" :position="marker.position"></el-amap-marker>
</el-amap> -->
<el-amap vid="amapDemo" :zoom="zoom" :center="center" ></el-amap>
</div>
</template>
<!-- <div class="toolbar">
<button @click="getMap()">get map</button>
</div> -->
<!-- </div>
</template>
<style>
<style>
.amap-page-container {
height: 400px;
height: 100%;
}
</style> -->
<!-- <script>
</style>
<script>
import VueAMap from 'vue-amap';
//import VueAMap from '@/utils/VamapLoad.ts';
import VueAMap from 'vue-amap';
import "@/utils/directive.js";
import {
Icon
} from "element-ui";
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 高德的keye
  key: 'cb087c0fb3b8bc56a4af064630495bb9',
  uiVersion: '1.0.11' ,// 版本号
  // 插件集合
// 高德的keye
  plugin: ['AMap.Geocoder','AMap.Autocomplete','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.Geolocation','AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
key: 'cb087c0fb3b8bc56a4af064630495bb9',
uiVersion: '1.0.11' ,// 版本号
// 插件集合
plugin: ['AMap.Geocoder','AMap.Autocomplete','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.Geolocation','AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 高德 sdk 版本，默认为 1.4.4
  // 高德 sdk 版本，默认为 1.4.4
v: '1.4.4'
  v: '1.4.4'
});
});
// import { AMapManager } from 'vue-amap';
// import { AMap } from 'vue-amap';
export default {
......@@ -52,7 +47,6 @@ import VueAMap from 'vue-amap';
position: [117.148118, 36.660223],
events: {
click: () => {
alert('click marker');
},
dragend: (e) => {
console.log('---event---: dragend')
......@@ -63,75 +57,15 @@ import VueAMap from 'vue-amap';
draggable: false,
template: '<span>1</span>',
}
],
events: {
init: (o) => {
console.log(o.getCenter())
console.log(this.$refs.map.$$getInstance())
o.getCity(result => {
console.log(result)
})
},
'moveend': () => {
},
'zoomchange': () => {
},
'click': (e) => {
let {lng,lat} = e.lnglat;
self.lng = lng;
self.lat = lat;
console.log(self.lng,self.lat)
let points = [self.lng,self.lat]
this.getAddress(points)
let marker = {
position: [self.lng, self.lat]
};
if (!this.markers.length) return;
this.markers.splice(this.markers.length - 1, 1);
this.markers.push(marker);
}
},
getAddress (points) {
let geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" })
geocoder.getAddress(points, (status, result) => {
if (status === 'complete' && result.regeocode) {
this.address = result.regeocode.formattedAddress
console.log(this.address)
}
})
},
plugin: ['ToolBar', {
pName: 'MapType',
defaultType: 0,
events: {
init(o) {
console.log(o);
}
}
}],
texts: [
{
position: [121.5273285, 31.21515044],
text: 'hello world',
offset: [0, 0],
events: {
click: () => {
alert('click text');
}
}
}
]
}
},
methods: {
getMap() {
console.log(AMapManager._componentMap);
// gaode map instance
console.log(AMapManager._map);
alert('click text');
}
}
};
</script> -->
\ No newline at end of file
</script>
\ No newline at end of file
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue
View file @ 2da12654
......@@ -127,6 +127,7 @@ export default {
that,
`/alarmInfo/getAlarmInfoList`,{},
function(res) {
console.log(res)
if (res.code == 0) {
that.$data.tableData = res.data.pageData;
}
......@@ -418,6 +419,10 @@ export default {
}
</script>
<style>
.el-table__body-wrapper::-webkit-scrollbar {
/*width: 0;宽度为0隐藏*/
width: 0px;
}
.pie-div{
width: 100%;
height: 210px;
......
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