2111 lines
58 KiB
Vue
2111 lines
58 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="header">
|
||
<div class="title"/>
|
||
<div class="options">
|
||
<div class="time">{{ time }}</div>
|
||
<div>|</div>
|
||
<div class="date">{{ date }}</div>
|
||
<div class="week">{{ week }}</div>
|
||
<div v-if="!isFullScreen" class="on-fullscreen" @click="handleFullScreen(undefined)">
|
||
<svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 6L16 15.8995" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path
|
||
d="M6 41.8995L16 32"
|
||
stroke="#2aa7d3"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"/>
|
||
<path
|
||
d="M42.0001 41.8995L32.1006 32"
|
||
stroke="#2aa7d3"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"/>
|
||
<path
|
||
d="M41.8995 6L32 15.8995"
|
||
stroke="#2aa7d3"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"/>
|
||
<path d="M33 6H42V15" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M42 33V42H33" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M15 42H6V33" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M6 15V6H15" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div v-if="isFullScreen" class="off-fullscreen" @click="handleFullScreen(undefined)">
|
||
<svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M33 6V15H42" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M15 6V15H6" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M15 42V33H6" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path
|
||
d="M33 42V33H41.8995"
|
||
stroke="#2aa7d3"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<!-- <div class="logout" @click="$router.push('/map')">-->
|
||
<!-- <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">-->
|
||
<!-- <path-->
|
||
<!-- d="M24 44.0002C35.0457 44.0002 44 35.0459 44 24.0002C44 12.9545 35.0457 4.00024 24 4.00024C12.9543 4.00024 4 12.9545 4 24.0002C4 35.0459 12.9543 44.0002 24 44.0002Z"-->
|
||
<!-- stroke="#2aa7d3"-->
|
||
<!-- stroke-width="3"/>-->
|
||
<!-- <path-->
|
||
<!-- d="M6 30.9856C8.63192 32.041 10.5266 32.041 11.6839 30.9856C13.4199 29.4025 11.9219 24.5978 14.3532 23.2727C16.7844 21.9476 20.4886 27.8214 23.9508 25.8887C27.4129 23.9559 23.6246 18.8023 26.0272 16.713C28.4298 14.6237 31.554 16.98 32.1001 13.4865C32.6462 9.99304 29.5521 11.5082 28.9584 8.20693C28.5625 6.00611 28.5625 4.84884 28.9584 4.73511"-->
|
||
<!-- stroke="#2aa7d3"-->
|
||
<!-- stroke-width="3"-->
|
||
<!-- stroke-linecap="round"/>-->
|
||
<!-- <path-->
|
||
<!-- d="M29.0209 43.3505C27.1468 41.4325 26.4721 39.6497 26.9969 38.0019C27.7841 35.5303 29.0826 35.6764 29.6488 34.1482C30.2149 32.6199 28.6156 30.4433 32.1643 28.5826C34.5301 27.3421 37.783 28.7794 41.9228 32.8944"-->
|
||
<!-- stroke="#2aa7d3"-->
|
||
<!-- stroke-width="3"-->
|
||
<!-- stroke-linecap="round"/>-->
|
||
<!-- </svg>-->
|
||
<!-- </div>-->
|
||
<div class="logout" @click="$router.push('/index')">
|
||
<svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M23.9917 6H6V42H24"
|
||
stroke="#2aa7d3"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"/>
|
||
<path
|
||
d="M33 33L42 24L33 15"
|
||
stroke="#2aa7d3"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"/>
|
||
<path d="M16 23.9917H42" stroke="#2aa7d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main">
|
||
<div class="left">
|
||
<div class="top">
|
||
<div class="title">
|
||
<div>分级管控</div>
|
||
<!-- <el-button @click="visibleDialog = true">示意图</el-button>-->
|
||
<a @click="visibleDialog = true">示意图</a>
|
||
</div>
|
||
<div class="content">
|
||
<div>
|
||
<div class="count">{{ regulatoryDepartmentCount }}</div>
|
||
<div>股份公司部门数量</div>
|
||
</div>
|
||
<div>
|
||
<div class="count">{{ corpCount }}</div>
|
||
<div>分子公司数</div>
|
||
</div>
|
||
<div>
|
||
<div class="count">{{ unitCorpCount }}</div>
|
||
<div>相关方单位数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<div class="title">客户数据</div>
|
||
<div class="content">
|
||
<div>
|
||
<div>监管端人员数</div>
|
||
<div class="count">{{ regulatoryUserCount }}</div>
|
||
</div>
|
||
<div>
|
||
<div>分子公司人数</div>
|
||
<div class="count">{{ corpUserCount }}</div>
|
||
</div>
|
||
<div>
|
||
<div>相关方人员数</div>
|
||
<div class="count">{{ unitUserCount }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="title">分公司使用统计</div>
|
||
<div class="content">
|
||
<div class="tabs">
|
||
<div
|
||
v-for="(item,index) in tabsList"
|
||
:key="index"
|
||
:class="['tab',{active:tabsIndex === index}]"
|
||
@click="tabsIndex = index">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
<div v-if="tabsIndex === 0" class="table">
|
||
<div>
|
||
<span>名次</span>
|
||
<span>企业名称</span>
|
||
<span>人员数</span>
|
||
</div>
|
||
<div v-for="(item,index) in staffUsageList" :key="index">
|
||
<span>{{ index + 1 }}</span>
|
||
<span>{{ item.name }}</span>
|
||
<span>{{ item.count }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-if="tabsIndex === 1" class="table">
|
||
<div>
|
||
<span>企业名称</span>
|
||
<span>部门数</span>
|
||
<span>班组数</span>
|
||
</div>
|
||
<div v-for="(item,index) in DepartmentUsageList" :key="index">
|
||
<span>{{ item.corpName }}</span>
|
||
<span>{{ item.deptCount }}</span>
|
||
<span>{{ item.baozuCount }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<div class="top">
|
||
<div class="title">
|
||
<div>秦皇岛港区</div>
|
||
<img src="../../assets/BI/map.png" alt="" width="24" height="24" style="cursor:pointer;" @click="$router.push('/map')">
|
||
</div>
|
||
<div class="content">
|
||
<!-- <div class="map">-->
|
||
<!-- <img src="../../assets/BI/ditu.jpg" class="baidu-map">-->
|
||
<!-- <baidu-map :zoom="10" :scroll-wheel-zoom="true" class="baidu-map" @ready="handler">-->
|
||
<!-- <bm-marker v-for="(item,index) in map.points" :key="index" :position="item" :clicking="false"/>-->
|
||
<!-- </baidu-map>-->
|
||
<!-- </div>-->
|
||
<div class="block1">
|
||
<div class="subtitle">安全动态</div>
|
||
<div class="text">本质安全：通过消除隐患减少并杜绝事故</div>
|
||
<div class="trapezoid one">消除{{ hiddenAllCount1 }}<br>起严重事故</div>
|
||
<div class="trapezoid two">避免{{ hiddenAllCount2 }}次轻微事故</div>
|
||
<div class="trapezoid three">避免{{ hiddenAllCount3 }}次未遂事故征兆</div>
|
||
<div class="trapezoid four">消除{{ hiddenAllCount4 }}次安全隐患</div>
|
||
<div class="content_title">海因里希法则 1000∶300∶29∶1法则</div>
|
||
<div class="text">每1起严重事故背后都存在着29次轻微事故,300次未遂事故征兆(事故险情)和1000次事故隐患</div>
|
||
</div>
|
||
<div class="line"/>
|
||
<div class="block2">
|
||
<div class="subtitle">安全隐患</div>
|
||
<div id="main1"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="left">
|
||
<div class="title">秦港股份</div>
|
||
<div class="content">
|
||
<div id="main2"/>
|
||
<div id="main3"/>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="title">秦港股份检查类型</div>
|
||
<div class="content">
|
||
<div id="main4"/>
|
||
<div class="table">
|
||
<div>
|
||
<span>检查名称</span>
|
||
<span>检查时间</span>
|
||
</div>
|
||
<div v-for="(item,index) in safetyEnvironmentalInspectionList" :key="index">
|
||
<span>{{
|
||
item.INSPECTION_PLACE.length > 6 ? item.INSPECTION_PLACE.substr(0, 6) + '...' : item.INSPECTION_PLACE
|
||
}}</span>
|
||
<span>{{
|
||
item.INSPECTION_TIME_START.length > 10 ? item.INSPECTION_TIME_START.substr(0, 10) + '...' : item.INSPECTION_TIME_START
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="top">
|
||
<div class="title">隐患来源</div>
|
||
<div class="content">
|
||
<div>
|
||
<div>隐患排查</div>
|
||
<div class="count">{{ richang }}</div>
|
||
</div>
|
||
<div>
|
||
<div>安全环保检查</div>
|
||
<div class="count">{{ anquan }}</div>
|
||
</div>
|
||
<div>
|
||
<div>隐患快报</div>
|
||
<div class="count">{{ kuaibao }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center1">
|
||
<div class="title">隐患处置情况统计</div>
|
||
<div id="main5"/>
|
||
</div>
|
||
<div class="center2">
|
||
<div class="title">安全环保检查情况统计</div>
|
||
<div id="main6"/>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="title">危险作业占比</div>
|
||
<div id="main7"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bi-different-dialog">
|
||
<el-dialog :visible.sync="visibleDialog" :close-on-click-modal="false" width="70%">
|
||
<img src="../../assets/BI/fenjiguankong.png" class="baidu-map" width="100%">
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from 'moment'
|
||
import * as echarts from 'echarts'
|
||
import fullScreenMixins from '@/assets/mixins/fullScreen'
|
||
import { requestFN } from '@/utils/request'
|
||
|
||
let myChart1 = null
|
||
let myChart2 = null
|
||
let myChart3 = null
|
||
let myChart4 = null
|
||
let myChart5 = null
|
||
let myChart6 = null
|
||
let myChart7 = null
|
||
export default {
|
||
mixins: [fullScreenMixins],
|
||
data() {
|
||
return {
|
||
visibleDialog: false,
|
||
week: '',
|
||
time: moment().format('HH:mm:ss'),
|
||
timer: '',
|
||
date: moment().format('YYYY-MM-DD'),
|
||
tabsList: ['人员使用情况', '部门使用情况'],
|
||
tabsIndex: 0,
|
||
staffUsageList: [],
|
||
DepartmentUsageList: [],
|
||
safetyEnvironmentalInspectionList: [],
|
||
map: {
|
||
BMap: '',
|
||
map: '',
|
||
pointLngLat: {},
|
||
points: []
|
||
},
|
||
corpUserCount: 0,
|
||
superUserCount: 0,
|
||
richang: 0,
|
||
anquan: 0,
|
||
kuaibao: 0,
|
||
regulatoryUserCount: 0,
|
||
supeCount: 0,
|
||
corpCount: 0,
|
||
regulatoryDepartmentCount: 0,
|
||
unitCorpCount: 0,
|
||
allHiddenCount: 0,
|
||
regulatoryHiddenCount: 0,
|
||
corpHiddenCount: 0,
|
||
supeHiddenCount: 0,
|
||
unitUserCount: 0,
|
||
hiddenAllCount1: 0,
|
||
hiddenAllCount2: 0,
|
||
hiddenAllCount3: 0,
|
||
hiddenAllCount4: 0
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getWeek()
|
||
this.getTime()
|
||
this.addPoints()
|
||
|
||
// this.initEcharts2()
|
||
// this.initEcharts3()
|
||
// this.initEcharts4()
|
||
// this.initEcharts5()
|
||
// this.initEcharts6()
|
||
// this.initEcharts7()
|
||
window.onresize = function() {
|
||
myChart1 && myChart1.resize()
|
||
myChart2 && myChart2.resize()
|
||
myChart3 && myChart3.resize()
|
||
myChart4 && myChart4.resize()
|
||
myChart5 && myChart5.resize()
|
||
myChart6 && myChart6.resize()
|
||
myChart7 && myChart7.resize()
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
this.timer && clearInterval(this.timer)
|
||
},
|
||
created() {
|
||
this.getCountInsByCorpSource()
|
||
this.getHiddenCountByHiddenType()
|
||
this.getUserCount()
|
||
this.getUserCountBuCorpinfo()
|
||
this.getCorpDeptCountTop10()
|
||
this.getSuperInsCountAndHiddeCount()
|
||
this.getSuperInsBySubjectAndTop()
|
||
this.getHiddenCountBySubject()
|
||
this.getHiddenCountByHiddenLevel()
|
||
// this.getHiddenCountByCorpInfoHandle()
|
||
this.getHighriskworkCount()
|
||
this.getregulatoryUserCount()
|
||
this.getCorpCount()
|
||
this.getRegulatoryDepartmentCount()
|
||
this.getUnitCorpCount()
|
||
this.getUnitUserInfo()
|
||
this.getHeinrichData()
|
||
},
|
||
|
||
methods: {
|
||
getHeinrichData() {
|
||
requestFN(
|
||
'/biTongji/getHiddenCountByHeinrich',
|
||
{}
|
||
).then((data) => {
|
||
var hiddenAllCount = data.pd.HIDDEN_COUNT
|
||
this.hiddenAllCount4 = hiddenAllCount
|
||
this.hiddenAllCount3 = (hiddenAllCount / 3).toFixed(0)
|
||
this.hiddenAllCount2 = Math.floor(hiddenAllCount * (29 / 1000))
|
||
this.hiddenAllCount1 = Math.floor(hiddenAllCount * (1 / 1000))
|
||
}).catch((e) => {})
|
||
},
|
||
getUnitUserInfo() {
|
||
requestFN(
|
||
'/xgf/user/unitUserCount',
|
||
{}
|
||
).then((data) => {
|
||
console.log(data)
|
||
this.unitUserCount = data.unitUserCount
|
||
})
|
||
},
|
||
// 相关方单位数
|
||
getUnitCorpCount() {
|
||
requestFN(
|
||
'/xgf/corp/unitCorpCount',
|
||
{}
|
||
).then((data) => {
|
||
this.unitCorpCount = data.unitCorpCount
|
||
})
|
||
},
|
||
getRegulatoryDepartmentCount() {
|
||
requestFN(
|
||
'/biTongji/getRegulatoryDepartmentCount',
|
||
{}
|
||
).then((data) => {
|
||
this.regulatoryDepartmentCount = data.regulatoryDepartmentCount
|
||
})
|
||
},
|
||
getCorpCount() {
|
||
requestFN(
|
||
'/biTongji/getCorpCount',
|
||
{}
|
||
).then((data) => {
|
||
this.corpCount = data.corpCount
|
||
})
|
||
},
|
||
getCountInsByCorpSource() {
|
||
var xAxis = []
|
||
var xYxis1 = []
|
||
var xYxis2 = []
|
||
var xYxis3 = []
|
||
var xYxis4 = []
|
||
requestFN(
|
||
'/biTongji/getCountInsByCorpSource',
|
||
{}
|
||
).then((data) => {
|
||
data.varList.forEach((item, index) => {
|
||
xAxis.push(item.corpinfName) // 安全环保统计图名称
|
||
xYxis1[index] = Number(item.supeCount) // 港股公司环保检查
|
||
xYxis2[index] = Number(item.corpCount) // 分子公司环保检查
|
||
xYxis3[index] = Number(item.supeHiddenCount) // 港股公司发现隐患数
|
||
xYxis4[index] = Number(item.corpHiddenCount) // 分子公司发现隐患数
|
||
})
|
||
this.initEcharts6(xAxis, xYxis1, xYxis2, xYxis3, xYxis4)
|
||
})
|
||
},
|
||
getHiddenCountByHiddenType() {
|
||
requestFN(
|
||
'/api/biTongji/getHiddenCountByHiddenType',
|
||
{ }
|
||
).then((data) => {
|
||
let count = 0
|
||
data.varList.forEach((item) => {
|
||
count += item.HIDDEN_COUNT
|
||
})
|
||
this.initEcharts1(data.varList, count)
|
||
})
|
||
},
|
||
getUserCount() {
|
||
requestFN(
|
||
'/biTongji/getcorpUserCount',
|
||
{}
|
||
).then((data) => {
|
||
this.corpUserCount = data.corpUserCount
|
||
})
|
||
},
|
||
getregulatoryUserCount() {
|
||
requestFN(
|
||
'/biTongji/getRegulatoryUserCount',
|
||
{}
|
||
).then((data) => {
|
||
this.regulatoryUserCount = data.regulatoryUserCount
|
||
})
|
||
},
|
||
getUserCountBuCorpinfo() {
|
||
requestFN(
|
||
'/biTongji/getCorpUserCountTop10',
|
||
{}
|
||
).then((data) => {
|
||
data.corpUserCountTop10.forEach((item, index) => {
|
||
const map = {}
|
||
map.name = item.CORP_NAME
|
||
map.count = item.count
|
||
this.staffUsageList.push(map)
|
||
})
|
||
})
|
||
},
|
||
getCorpDeptCountTop10() {
|
||
requestFN(
|
||
'/biTongji/getCorpDeptCount',
|
||
{}
|
||
).then((data) => {
|
||
data.valList.forEach((item, index) => {
|
||
const map = {}
|
||
map.corpName = item.corpName
|
||
map.deptCount = (item.departmentLevel0002 - 0) + (item.departmentLevel0001 - 0)
|
||
map.baozuCount = item.departmentLevel0003
|
||
this.DepartmentUsageList.push(map)
|
||
})
|
||
})
|
||
},
|
||
getSuperInsCountAndHiddeCount() {
|
||
requestFN(
|
||
'/biTongji/getSuperInsCountAndHiddeCount',
|
||
{}
|
||
).then((data) => {
|
||
this.initEcharts2(data.superInsCount)
|
||
this.initEcharts3(data.superHiddenCount)
|
||
})
|
||
},
|
||
getSuperInsBySubjectAndTop() {
|
||
requestFN(
|
||
'/biTongji/getSuperInsBySubjectAndTop',
|
||
{}
|
||
).then((data) => {
|
||
let count1, count2, count3
|
||
data.count.forEach((item, index) => {
|
||
if (item.INSPECTION_SUBJECT == '安全') {
|
||
count1 = item.count
|
||
} else if (item.INSPECTION_SUBJECT == '环保') {
|
||
count2 = item.count
|
||
} else if (item.INSPECTION_SUBJECT == '综合') {
|
||
count3 = item.count
|
||
}
|
||
})
|
||
this.safetyEnvironmentalInspectionList = data.insList.length > 4 ? data.insList.splice(0,4) : data.insList
|
||
this.initEcharts4(count1, count2, count3)
|
||
})
|
||
},
|
||
getHiddenCountBySubject() {
|
||
requestFN(
|
||
'/biTongji/getHiddenCountBySubject',
|
||
{}
|
||
).then((data) => {
|
||
var richang = 0
|
||
var anquan = 0
|
||
var kuaibao = 0
|
||
data.valList.forEach((item, index) => {
|
||
if (item.SOURCE == '1') {
|
||
kuaibao += item.count
|
||
} else if (item.SOURCE == '4' || item.SOURCE == '5') {
|
||
anquan += item.count
|
||
} else if (item.SOURCE == '2') {
|
||
richang += item.count
|
||
}
|
||
})
|
||
this.richang = richang
|
||
this.anquan = anquan
|
||
this.kuaibao = kuaibao
|
||
})
|
||
},
|
||
getHiddenCountByHiddenLevel() {
|
||
requestFN(
|
||
'/biTongji/getHiddenCountByHiddenLevel',
|
||
{}
|
||
).then((data) => {
|
||
var yinhuanCount = []
|
||
data.valList.forEach((item, index) => {
|
||
// if (item.HIDDENLEVEL == 'hiddenLevel1001') { // 忽略
|
||
// yinhuanCount[0] = item.count
|
||
// } else if (item.HIDDENLEVEL == 'hiddenLevel1002') { // 一般隐患
|
||
// yinhuanCount[1] = item.count
|
||
// } else if (item.HIDDENLEVEL == 'pecial') { // 特殊处置
|
||
// yinhuanCount[2] = item.count
|
||
// } else if (item.HIDDENLEVEL == 'jdyh001') { // 较大隐患
|
||
// yinhuanCount[3] = item.count
|
||
// } else if (item.HIDDENLEVEL == 'hiddenLevel2002') { // 重大隐患
|
||
// yinhuanCount[4] = item.count
|
||
// }
|
||
if (item.HIDDENLEVEL == 'hiddenLevel1004') { // 轻微隐患
|
||
yinhuanCount[0] = item.count
|
||
}else if (item.HIDDENLEVEL == 'hiddenLevel1002') { // 一般隐患
|
||
yinhuanCount[1] = item.count
|
||
} else if (item.HIDDENLEVEL == 'jdyh001') { // 较大隐患
|
||
yinhuanCount[2] = item.count
|
||
} else if (item.HIDDENLEVEL == 'hiddenLevel2002') { // 重大隐患
|
||
yinhuanCount[3] = item.count
|
||
}
|
||
})
|
||
this.initEcharts5(yinhuanCount)
|
||
})
|
||
},
|
||
getHiddenCountByCorpInfoHandle() {
|
||
requestFN(
|
||
'/biTongji/getHiddenCountByCorpInfoHandle',
|
||
{}
|
||
).then((data) => {
|
||
var corpinfNames = []
|
||
var findHiddenCounts = []
|
||
var checkHiddenCounts = []
|
||
data.valList.forEach((item, index) => {
|
||
if (item.CORP_NAME) { //
|
||
corpinfNames[index] = item.CORP_NAME
|
||
}
|
||
if (item.countAll) { //
|
||
findHiddenCounts[index] = item.countAll
|
||
}
|
||
if (item.countRec) { //
|
||
checkHiddenCounts[index] = item.countRec
|
||
}
|
||
})
|
||
this.initEcharts6(corpinfNames, findHiddenCounts, checkHiddenCounts)
|
||
})
|
||
},
|
||
getHighriskworkCount() {
|
||
requestFN(
|
||
'/biTongji/getHighriskworkCount',
|
||
{}
|
||
).then((data) => {
|
||
const highriskworkCounts = [0, 0, 0, 0, 0, 0]
|
||
console.info(data)
|
||
if (data.valList[0].hotwork) {
|
||
highriskworkCounts[0] = data.valList[0].hotwork
|
||
}
|
||
if (data.valList[0].electricity) {
|
||
highriskworkCounts[1] = data.valList[0].electricity
|
||
}
|
||
if (data.valList[0].hoisting) {
|
||
highriskworkCounts[2] = data.valList[0].hoisting
|
||
}
|
||
if (data.valList[0].blindboard) {
|
||
highriskworkCounts[3] = data.valList[0].blindboard
|
||
}
|
||
if (data.valList[0].highwork) {
|
||
highriskworkCounts[4] = data.valList[0].highwork
|
||
}
|
||
if (data.valList[0].confinedspace) {
|
||
highriskworkCounts[5] = data.valList[0].confinedspace
|
||
}
|
||
|
||
this.initEcharts7(highriskworkCounts)
|
||
})
|
||
},
|
||
getWeek() {
|
||
let week = ''
|
||
switch (moment().day()) {
|
||
case 1:
|
||
week = '星期一'
|
||
break
|
||
case 2:
|
||
week = '星期二'
|
||
break
|
||
case 3:
|
||
week = '星期三'
|
||
break
|
||
case 4:
|
||
week = '星期四'
|
||
break
|
||
case 5:
|
||
week = '星期五'
|
||
break
|
||
case 6:
|
||
week = '星期六'
|
||
break
|
||
case 0:
|
||
week = '星期日'
|
||
break
|
||
}
|
||
this.week = week
|
||
},
|
||
getTime() {
|
||
this.timer = setInterval(() => {
|
||
this.time = moment().format('HH:mm:ss')
|
||
}, 1000)
|
||
},
|
||
handler({ BMap, map }) {
|
||
this.map.BMap = BMap
|
||
this.map.map = map
|
||
const geolocation = new BMap.Geolocation()
|
||
const $this = this
|
||
geolocation.getCurrentPosition(function(r) {
|
||
const myGeo = new BMap.Geocoder()
|
||
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
|
||
if (result) {
|
||
$this.$set($this.map, 'pointLngLat', { lng: result.point.lng, lat: result.point.lat })
|
||
map.enableScrollWheelZoom(true)
|
||
$this.setCenter({ BMap, map })
|
||
}
|
||
})
|
||
})
|
||
},
|
||
setCenter({ BMap, map }) {
|
||
var point = new BMap.Point(this.map.pointLngLat.lng, this.map.pointLngLat.lat)
|
||
const zoom = map.getZoom()
|
||
setTimeout(() => {
|
||
map.centerAndZoom(point, zoom)
|
||
}, 0)
|
||
},
|
||
addPoints() {
|
||
// for (let i = 0; i < 50; i++) {
|
||
// this.map.points.push({ lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21 })
|
||
// }
|
||
},
|
||
|
||
initEcharts1(data, all) {
|
||
myChart1 = echarts.init(document.querySelector('#main1'))
|
||
// var data = [
|
||
// { station: '人的不安全因素', value: 20 },
|
||
// { station: '物的不安全状态', value: 60.8 },
|
||
// { station: '环境的不安全因素', value: 70.2 },
|
||
// { station: '管理的缺陷', value: 30.8 },
|
||
// { station: '其他安全隐患', value: 40.6 }
|
||
// ]
|
||
var stationData = []
|
||
var values = []
|
||
for (let i = 0; i < data.length; i++) {
|
||
stationData.push(data[i].LABEL)
|
||
values.push(data[i].HIDDEN_COUNT)
|
||
}
|
||
var MaxData = new Array(data.length).fill(all)
|
||
var seriesName = ['当前', '总计']
|
||
var attackSourcesColor = [
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#ffae00' },
|
||
{ offset: 1, color: '#f4d504' }
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#48a883' },
|
||
{ offset: 1, color: '#00f0ff' }
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#06ff00' },
|
||
{ offset: 1, color: '#eaff00' }
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#00d2ff' },
|
||
{ offset: 1, color: '#bcf0ff' }
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#55c49f' },
|
||
{ offset: 1, color: '#fff080' }
|
||
])
|
||
]
|
||
function dataFormat(data) {
|
||
var arr = []
|
||
data.forEach(function(item, i) {
|
||
arr.push({
|
||
value: item,
|
||
itemStyle: {
|
||
color: attackSourcesColor[i]
|
||
}
|
||
})
|
||
})
|
||
return arr
|
||
}
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '2%',
|
||
bottom: '3%',
|
||
top: '2%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
inverse: true,
|
||
axisTick: 'none',
|
||
axisLine: 'none',
|
||
show: true,
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '13'
|
||
},
|
||
formatter: (value) => {
|
||
if (value != 0) {
|
||
return ((value / all) * 100).toFixed(2) + '%'
|
||
} else {
|
||
return '0%'
|
||
}
|
||
}
|
||
},
|
||
data: dataFormat(values)
|
||
},
|
||
{
|
||
type: 'category',
|
||
inverse: true,
|
||
position: 'left',
|
||
axisTick: 'none',
|
||
axisLine: 'none',
|
||
show: true,
|
||
axisLabel: {
|
||
interval: 0,
|
||
inside: true,
|
||
color: '#fff',
|
||
align: 'left',
|
||
verticalAlign: 'bottom',
|
||
lineHeight: 42,
|
||
fontSize: 14
|
||
},
|
||
data: dataFormat(stationData)
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
zlevel: 1,
|
||
name: seriesName[0],
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
data: dataFormat(values),
|
||
align: 'center',
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 10
|
||
}
|
||
},
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
name: seriesName[1],
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: '-100%',
|
||
data: MaxData,
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(200,200,200,.3)',
|
||
fontSize: 12,
|
||
barBorderRadius: 30
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart1.setOption(option)
|
||
},
|
||
|
||
initEcharts2(superInsCount) {
|
||
myChart2 = echarts.init(document.querySelector('#main2'))
|
||
const option = {
|
||
title: [
|
||
{
|
||
text: '安全环保检查次数',
|
||
left: '43%',
|
||
bottom: '0%',
|
||
textAlign: 'center',
|
||
backgroundColor: 'rgba(6,21,141,0.7)',
|
||
borderWidth: 1,
|
||
borderRadius: 30,
|
||
padding: [5, 10],
|
||
borderColor: '#0f3286',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: '12',
|
||
color: '#fff',
|
||
textAlign: 'center'
|
||
}
|
||
}
|
||
],
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
left: 'center',
|
||
show: false
|
||
},
|
||
graphic: [{
|
||
show: true,
|
||
type: 'text',
|
||
left: 'center',
|
||
top: '25%',
|
||
style: {
|
||
text: superInsCount[0].COUNT + superInsCount[1].COUNT + superInsCount[2].COUNT,
|
||
textAlign: 'center',
|
||
fill: '#ffffff',
|
||
fontSize: '20px'
|
||
}
|
||
}, {
|
||
show: true,
|
||
type: 'text',
|
||
left: 'center',
|
||
top: '30%',
|
||
style: {
|
||
text: '\n\n次',
|
||
fill: '#ffffff',
|
||
textAlign: 'center',
|
||
fontSize: '12px',
|
||
textDecoration: 'underline'
|
||
}
|
||
}],
|
||
series: [
|
||
{
|
||
name: '发起检查数',
|
||
type: 'pie',
|
||
center: ['50%', '40%'],
|
||
radius: ['75%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 0,
|
||
borderColor: '#031845',
|
||
borderWidth: 3
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{
|
||
value: superInsCount[0].COUNT,
|
||
name: superInsCount[0].INSPECTION_SUBJECT,
|
||
itemStyle: { color: superInsCount[0].ITEMCOLOR }
|
||
},
|
||
{
|
||
value: superInsCount[1].COUNT,
|
||
name: superInsCount[1].INSPECTION_SUBJECT,
|
||
itemStyle: { color: superInsCount[1].ITEMCOLOR }
|
||
},
|
||
{
|
||
value: superInsCount[2].COUNT,
|
||
name: superInsCount[2].INSPECTION_SUBJECT,
|
||
itemStyle: { color: superInsCount[2].ITEMCOLOR }
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
myChart2.setOption(option)
|
||
},
|
||
initEcharts3(superHiddenCount) {
|
||
myChart3 = echarts.init(document.querySelector('#main3'))
|
||
const option = {
|
||
title: [
|
||
{
|
||
text: '发现隐患数',
|
||
left: '43%',
|
||
bottom: '0%',
|
||
textAlign: 'center',
|
||
backgroundColor: 'rgba(6,21,141,0.7)',
|
||
borderWidth: 1,
|
||
borderRadius: 30,
|
||
padding: [5, 10],
|
||
borderColor: '#0f3286',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: '14',
|
||
color: '#fff',
|
||
textAlign: 'center'
|
||
}
|
||
}
|
||
],
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
left: 'center',
|
||
show: false
|
||
},
|
||
graphic: [{
|
||
show: true,
|
||
type: 'text',
|
||
left: 'center',
|
||
top: '25%',
|
||
style: {
|
||
text: superHiddenCount[0].COUNT + superHiddenCount[1].COUNT + superHiddenCount[2].COUNT,
|
||
textAlign: 'center',
|
||
fill: '#ffffff',
|
||
fontSize: '20px'
|
||
}
|
||
}, {
|
||
show: true,
|
||
type: 'text',
|
||
left: 'center',
|
||
top: '30%',
|
||
style: {
|
||
text: '\n\n项',
|
||
fill: '#ffffff',
|
||
textAlign: 'center',
|
||
fontSize: '12px',
|
||
textDecoration: 'underline'
|
||
}
|
||
}],
|
||
series: [
|
||
{
|
||
name: '发起检查数',
|
||
type: 'pie',
|
||
center: ['50%', '40%'],
|
||
radius: ['75%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 0,
|
||
borderColor: '#031845',
|
||
borderWidth: 3
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{
|
||
value: superHiddenCount[0].COUNT,
|
||
name: superHiddenCount[0].INSPECTION_SUBJECT,
|
||
itemStyle: { color: superHiddenCount[0].ITEMCOLOR }
|
||
},
|
||
{
|
||
value: superHiddenCount[1].COUNT,
|
||
name: superHiddenCount[1].INSPECTION_SUBJECT,
|
||
itemStyle: { color: superHiddenCount[1].ITEMCOLOR }
|
||
},
|
||
{
|
||
value: superHiddenCount[2].COUNT,
|
||
name: superHiddenCount[2].INSPECTION_SUBJECT,
|
||
itemStyle: { color: superHiddenCount[2].ITEMCOLOR }
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
myChart3.setOption(option)
|
||
},
|
||
initEcharts4(count1, count2, count3) {
|
||
myChart4 = echarts.init(document.querySelector('#main4'))
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b} : {c} <br/> {d}%'
|
||
},
|
||
legend: {
|
||
data: ['安全', '环保', '综合'],
|
||
icon: 'circle',
|
||
left: 'center',
|
||
bottom: 15,
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['50', '70'],
|
||
center: ['50%', '40%'],
|
||
color: ['#f8b62c', '#f53f8c', '#28b1ff'],
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 5,
|
||
borderColor: '#031845'
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
value: count1,
|
||
name: '安全'
|
||
},
|
||
{
|
||
value: count2,
|
||
name: '环保'
|
||
},
|
||
{
|
||
value: count3,
|
||
name: '综合'
|
||
}
|
||
],
|
||
labelLine: {
|
||
normal: {
|
||
show: true,
|
||
length: 1,
|
||
length2: 1
|
||
}
|
||
},
|
||
label: {
|
||
normal: {
|
||
formatter: '{d}%',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
myChart4.setOption(option)
|
||
},
|
||
initEcharts5(yinhuanCount) {
|
||
myChart5 = echarts.init(document.querySelector('#main5'))
|
||
const option = {
|
||
color: ['#10baf8', '#f49545', '#91ee7c', '#ffc602 ', '#fe0000'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b} : {c}<br/>{d}%'
|
||
},
|
||
legend: {
|
||
right: '0%',
|
||
bottom: '15%',
|
||
data: [
|
||
// '忽略'
|
||
// '一般',
|
||
// '特殊处置',
|
||
// '较大隐患',
|
||
// '重大隐患'
|
||
'轻微隐患',
|
||
'一般隐患',
|
||
'较大隐患',
|
||
'重大隐患'
|
||
],
|
||
width: '20',
|
||
height: '10',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
calculable: true,
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
startAngle: 0,
|
||
radius: [35, 100],
|
||
center: ['40%', '30%'],
|
||
roseType: 'area',
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
formatter: '{d}%',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: true,
|
||
length1: 10,
|
||
length2: 10
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
value: yinhuanCount[0],
|
||
name: '轻微隐患'
|
||
},
|
||
{
|
||
value: yinhuanCount[1],
|
||
name: '一般隐患'
|
||
},
|
||
{
|
||
value: yinhuanCount[2],
|
||
name: '较大隐患'
|
||
},
|
||
{
|
||
value: yinhuanCount[3],
|
||
name: '重大隐患'
|
||
},
|
||
{
|
||
value: 0,
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'transparent'
|
||
}
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
value: 0,
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'transparent'
|
||
}
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
value: 0,
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'transparent'
|
||
}
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
value: 0,
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'transparent'
|
||
}
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
value: 0,
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'transparent'
|
||
}
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
myChart5.setOption(option)
|
||
},
|
||
// initEcharts6(corpinfoNames, findHiddenCounts, checkHiddenCounts) {
|
||
// myChart6 = echarts.init(document.querySelector('#main6'))
|
||
// const option = {
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// axisPointer: {
|
||
// type: 'shadow'
|
||
// }
|
||
// },
|
||
// grid: {
|
||
// left: '0%',
|
||
// right: '0%',
|
||
// bottom: '8%',
|
||
// top: '30%',
|
||
// containLabel: true
|
||
// },
|
||
// legend: {
|
||
// data: ['发现隐患数', '已处理隐患数'],
|
||
// right: 10,
|
||
// top: '10%',
|
||
// textStyle: {
|
||
// color: '#fff'
|
||
// },
|
||
// itemWidth: 24,
|
||
// itemHeight: 10
|
||
// },
|
||
// xAxis: {
|
||
// type: 'category',
|
||
// data: corpinfoNames,
|
||
// axisLine: {
|
||
// lineStyle: {
|
||
// color: 'white'
|
||
// }
|
||
// },
|
||
// axisLabel: {
|
||
// textStyle: {
|
||
// color: '#02cafd'
|
||
// }
|
||
// }
|
||
// },
|
||
// yAxis: {
|
||
// type: 'value',
|
||
// axisLine: {
|
||
// show: false,
|
||
// lineStyle: {
|
||
// color: 'white'
|
||
// }
|
||
// },
|
||
// splitLine: {
|
||
// show: true,
|
||
// lineStyle: {
|
||
// color: 'rgba(255,255,255,0.3)'
|
||
// }
|
||
// }
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: '发现隐患数',
|
||
// type: 'bar',
|
||
// barWidth: '15%',
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
// {
|
||
// offset: 0,
|
||
// color: '#cc976b'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#ccea34'
|
||
// }
|
||
// ])
|
||
// }
|
||
// },
|
||
// data: findHiddenCounts
|
||
// },
|
||
// {
|
||
// name: '已处理隐患数',
|
||
// type: 'bar',
|
||
// barWidth: '15%',
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
// {
|
||
// offset: 0,
|
||
// color: '#78de95'
|
||
// },
|
||
// {
|
||
// offset: 1,
|
||
// color: '#16b3f8'
|
||
// }
|
||
// ])
|
||
// }
|
||
// },
|
||
// data: checkHiddenCounts
|
||
// }
|
||
// ]
|
||
// }
|
||
// myChart6.setOption(option)
|
||
// },
|
||
initEcharts6(xAxis, xYxis1, xYxis2, xYxis3, xYxis4) {
|
||
myChart6 = echarts.init(document.querySelector('#main6'))
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
// title: {
|
||
// text: '安全环保检查情况统计',
|
||
// textStyle: {
|
||
// color: '#33dcfd',
|
||
// fontSize: 16
|
||
// },
|
||
// left: '0',
|
||
// top: '-4'
|
||
// },
|
||
grid: {
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: '5%',
|
||
top: '35%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
data: ['股份安全环保检查', '分子公司安全环保自查', '股份发现隐患数量', '分子公司自查发现问题'],
|
||
right: 0,
|
||
top: 20,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
itemWidth: 24,
|
||
itemHeight: 10
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xAxis,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'white'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#02cafd'
|
||
}
|
||
// rotate: 45
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'white'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.3)'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '港股公司安全环保统计',
|
||
type: 'bar',
|
||
barWidth: '15%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#cc976b'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#ccea34'
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: xYxis1
|
||
},
|
||
{
|
||
name: '分子公司安全环保统计',
|
||
type: 'bar',
|
||
barWidth: '15%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#78de95'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#16b3f8'
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: xYxis2
|
||
},
|
||
{
|
||
name: '港股公司检查发现隐患数',
|
||
type: 'bar',
|
||
barWidth: '15%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#FF0066'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#F73809'
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: xYxis3
|
||
},
|
||
{
|
||
name: '分子公司检查发现隐患数',
|
||
type: 'bar',
|
||
barWidth: '15%',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#421AE6'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#E61AE6'
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: xYxis4
|
||
}
|
||
]
|
||
}
|
||
myChart6.setOption(option)
|
||
},
|
||
initEcharts7(highriskworkCounts) {
|
||
myChart7 = echarts.init(document.querySelector('#main7'))
|
||
const dataValue = highriskworkCounts
|
||
let max = 0
|
||
max = Math.max(...dataValue.map(Number))
|
||
const option = {
|
||
title: {
|
||
left: 'center'
|
||
},
|
||
tooltip: {
|
||
// trigger: 'item',
|
||
formatter: '{b}：{c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'bottom'
|
||
},
|
||
color: ['#F14040', '#41F040', '#F1F040',
|
||
'#4140F0', '#41F0F0', '#F140F0'],
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['50%', '80%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 5,
|
||
borderColor: '#fff',
|
||
borderWidth: 0
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 30,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: dataValue[0], name: '动火作业' },
|
||
{ value: dataValue[1], name: '临时用电' },
|
||
{ value: dataValue[2], name: '吊装作业' },
|
||
{ value: dataValue[3], name: '盲板作业' },
|
||
{ value: dataValue[4], name: '高处作业' },
|
||
{ value: dataValue[5], name: '有限空间作业' }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
myChart7.setOption(option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@mixin title {
|
||
position: relative;
|
||
.title {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
color: #33dcfb;
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
div{
|
||
margin-right: 10px;
|
||
}
|
||
.el-button{
|
||
background-color: rgba(65, 106, 234, 0.38);
|
||
border: 1px solid rgba(15, 185, 247, 0.55);
|
||
color: #fff;
|
||
font-size: 12px;
|
||
padding: 5px 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-image: url("../../assets/BI/bodybg.jpg");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
color: #c2d8e5;
|
||
font-size: 14px;
|
||
|
||
.header {
|
||
width: 100vw;
|
||
height: 84px;
|
||
background-image: url("../../assets/BI/topbg.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
|
||
.title {
|
||
width: 470px;
|
||
height: 48px;
|
||
background-image: url("../../assets/BI/title.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 7px;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.options {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
right: 30px;
|
||
top: 37px;
|
||
height: 18px;
|
||
line-height: 18px;
|
||
font-size: 16px;
|
||
|
||
.time {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.date {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.logout, .on-fullscreen, .off-fullscreen {
|
||
cursor: pointer;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
padding: 0 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 492px;
|
||
|
||
.top {
|
||
width: 492px;
|
||
height: 162px;
|
||
background-image: url("../../assets/BI/leftbg1.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
@include title;
|
||
|
||
.content {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-basis: 100%;
|
||
|
||
> div {
|
||
flex: 1;
|
||
text-align: center;
|
||
|
||
.count {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
&:nth-child(1) .count {
|
||
color: #fec72c;
|
||
}
|
||
|
||
&:nth-child(2) .count {
|
||
color: #8dee7b;
|
||
}
|
||
|
||
&:nth-child(3) .count {
|
||
color: #0fb9f7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.center {
|
||
margin-top: 15px;
|
||
width: 492px;
|
||
height: 204px;
|
||
background-image: url("../../assets/BI/leftbg2.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
@include title;
|
||
|
||
.content {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-basis: 100%;
|
||
|
||
> div {
|
||
flex-basis: 32%;
|
||
text-align: center;
|
||
background-color: #051e57;
|
||
margin-left: 15px;
|
||
padding: 30px 30px;
|
||
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.count {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
padding-top: 10px;
|
||
color: #0fb9f7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
margin-top: 15px;
|
||
width: 492px;
|
||
height: 446px;
|
||
background-image: url("../../assets/BI/leftbg3.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
@include title;
|
||
|
||
.content {
|
||
padding: 30px 25px 15px 25px;
|
||
|
||
.tabs {
|
||
display: flex;
|
||
|
||
.tab {
|
||
width: 118px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
background-image: url("../../assets/BI/tab_on.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
margin-left: 15px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
|
||
&.active {
|
||
background-image: url("../../assets/BI/tab.png");
|
||
}
|
||
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table {
|
||
text-align: center;
|
||
margin-top: 22px;
|
||
height: 342px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
overflow-y: auto;
|
||
|
||
div {
|
||
padding: 7px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
&:nth-child(odd) {
|
||
background-color: rgba(29, 55, 124, 0.5);
|
||
}
|
||
|
||
&:first-child {
|
||
color: #12a7df;
|
||
}
|
||
|
||
span {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.center {
|
||
width: 822px;
|
||
|
||
.top {
|
||
width: 822px;
|
||
height: 546px;
|
||
background-image: url("../../assets/BI/midbg1.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 25px 20px;
|
||
@include title;
|
||
|
||
//.map {
|
||
// width: 100%;
|
||
//
|
||
// .baidu-map {
|
||
// width: 100%;
|
||
// height: 244px;
|
||
// }
|
||
//}
|
||
.content {
|
||
display: flex;
|
||
|
||
.block1 {
|
||
width: calc(50% - 0.5px);
|
||
padding-right: 5%;
|
||
|
||
.subtitle {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
border-bottom: 1px solid #103e6b;
|
||
padding-bottom: 13px;
|
||
padding-top: 10px;
|
||
padding-left: 5px;
|
||
margin-left: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
.trapezoid {
|
||
margin-left: 15px;
|
||
width: calc(100% - 15px);
|
||
height: 75px;
|
||
margin-top: 2px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 75px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
z-index: 0;
|
||
&:hover {
|
||
transform: scale(1.05);
|
||
transition: 0.3s;
|
||
z-index: 1;
|
||
}
|
||
|
||
&.one {
|
||
margin-top: 20px;
|
||
clip-path: polygon(50% 0%, 50% 0%, 62.5% 100%, 37.5% 100%);
|
||
line-height: unset;
|
||
padding-top: 37px;
|
||
background-color: #ef4545;
|
||
}
|
||
|
||
&.two {
|
||
font-size: 13px;
|
||
clip-path: polygon(37.5% 0%, 62.5% 0%, 75% 100%, 25% 100%);
|
||
background-color: #f97a1d;
|
||
}
|
||
|
||
&.three {
|
||
font-size: 17px;
|
||
clip-path: polygon(25% 0%, 75% 0%, 87.5% 100%, 12.5% 100%);
|
||
background-color: #fac858;
|
||
}
|
||
|
||
&.four {
|
||
font-size: 25px;
|
||
clip-path: polygon(12.5% 0%, 87.5% 0%, 100% 100%, 0% 100%);
|
||
background-color: #416aea;
|
||
}
|
||
}
|
||
.content_title{
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
padding-top: 10px;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
margin-top: 47px;
|
||
width: 1px;
|
||
height: 410px;
|
||
background-color: #334774;
|
||
}
|
||
|
||
.block2 {
|
||
width: calc(50% - 0.5px);
|
||
padding-left: 5%;
|
||
|
||
.subtitle {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
border-bottom: 1px solid #103e6b;
|
||
padding-bottom: 13px;
|
||
padding-top: 10px;
|
||
padding-left: 5px;
|
||
margin-left: 10px;
|
||
color: #fff;
|
||
}
|
||
#main1 {
|
||
margin-top: 9px;
|
||
width: 100%;
|
||
height: 429px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 207px;
|
||
height: 285px;
|
||
background-image: url("../../assets/BI/midbg2.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 35px 20px 0 20px;
|
||
@include title;
|
||
|
||
#main2, #main3 {
|
||
width: 100%;
|
||
height: 112px;
|
||
}
|
||
|
||
#main3 {
|
||
margin-top: 9px;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 580px;
|
||
height: 285px;
|
||
background-image: url("../../assets/BI/midbg3.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 20px;
|
||
@include title;
|
||
|
||
.content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
#main4 {
|
||
width: 48%;
|
||
height: 240px;
|
||
}
|
||
|
||
.table {
|
||
width: 48%;
|
||
text-align: center;
|
||
margin: 22px 0 0 22px;
|
||
height: 150px;
|
||
|
||
div {
|
||
margin-top: 1px;
|
||
padding: 7px 0;
|
||
background-color: rgba(29, 55, 124, 0.5);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
&:first-child {
|
||
color: #12a7df;
|
||
}
|
||
|
||
span {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 492px;
|
||
|
||
.top {
|
||
width: 492px;
|
||
height: 88px;
|
||
background-image: url("../../assets/BI/rightbg1.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
@include title;
|
||
|
||
.content {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
text-align: center;
|
||
|
||
> div {
|
||
flex: 1;
|
||
|
||
.count {
|
||
color: #02cafd;
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.center1 {
|
||
margin-top: 15px;
|
||
width: 492px;
|
||
height: 187px;
|
||
background-image: url("../../assets/BI/rightbg2.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 0 20px;
|
||
@include title;
|
||
|
||
#main5 {
|
||
width: 100%;
|
||
height: 187px;
|
||
}
|
||
}
|
||
|
||
.center2 {
|
||
margin-top: 15px;
|
||
width: 492px;
|
||
height: 186px;
|
||
background-image: url("../../assets/BI/rightbg3.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 0 20px;
|
||
@include title;
|
||
|
||
#main6 {
|
||
width: 100%;
|
||
height: 186px;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
margin-top: 15px;
|
||
width: 492px;
|
||
height: 335px;
|
||
background-image: url("../../assets/BI/rightbg4.png");
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 0 20px;
|
||
@include title;
|
||
|
||
#main7 {
|
||
width: 100%;
|
||
height: 335px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.bi-different-dialog {
|
||
.el-dialog__wrapper {
|
||
overflow: visible;
|
||
}
|
||
|
||
.el-dialog {
|
||
border: 1px solid rgba(64, 156, 255, 0.3);
|
||
border-radius: 10px;
|
||
background-color: rgba(2, 30, 81, 0.851);
|
||
padding: 22px 34px;
|
||
|
||
.el-dialog__header {
|
||
border-bottom: 2px solid #316b8b;
|
||
padding: 0 0 10px;
|
||
|
||
.el-dialog__title {
|
||
color: #fff;
|
||
}
|
||
|
||
.el-dialog__headerbtn .el-dialog__close {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.el-dialog__body {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
overflow-y: auto;
|
||
max-height: 60vh;
|
||
|
||
//设置滚动条样式
|
||
&::-webkit-scrollbar {
|
||
width: 5px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
border-radius: 5px;
|
||
background: rgba(2, 30, 81, 0.851);
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
border-radius: 5px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|