1662 lines
44 KiB
Vue
1662 lines
44 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('/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 class="content">
|
||
|
|
<div>
|
||
|
|
<div class="count">{{ regulatoryDepartmentCount }}</div>
|
||
|
|
<div class="corlor058">股份公司部门数量</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="count">{{ corpCount }}</div>
|
||
|
|
<div class="corlor058">分子公司数</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="count">{{ unitCorpCount }}</div>
|
||
|
|
<div class="corlor058">相关方单位数</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="center">
|
||
|
|
<div class="title">客户数据</div>
|
||
|
|
<div class="content">
|
||
|
|
<div>
|
||
|
|
<div class="corlor058">集团用户</div>
|
||
|
|
<div class="count">{{ superUserCount }}</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="corlor058">分公司用户</div>
|
||
|
|
<div class="count">{{ corpUserCount }}</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 class="content">
|
||
|
|
<div class="map">
|
||
|
|
<img src="../../assets/BI/ditu.png" 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 id="main1"/>
|
||
|
|
</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 class="corlor058">日常检查</div>
|
||
|
|
<div class="count">{{ richang }}</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="corlor058">安全环保检查</div>
|
||
|
|
<div class="count">{{ anquan }}</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="corlor058">隐患快报</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>
|
||
|
|
</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 {
|
||
|
|
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,
|
||
|
|
corpCount: 0,
|
||
|
|
regulatoryDepartmentCount: 0,
|
||
|
|
unitCorpCount: 0,
|
||
|
|
kuaibao: 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.getUserCount()
|
||
|
|
this.getCorpCount()
|
||
|
|
this.getRegulatoryDepartmentCount()
|
||
|
|
this.getUnitCorpCount()
|
||
|
|
this.getUserCountBuCorpinfo()
|
||
|
|
this.getCorpDeptCountTop10()
|
||
|
|
this.getSuperInsCountAndHiddeCount()
|
||
|
|
this.getSuperInsBySubjectAndTop()
|
||
|
|
this.getHiddenCountBySubject()
|
||
|
|
this.getHiddenCountByHiddenLevel()
|
||
|
|
this.getHiddenCountByCorpInfoHandle()
|
||
|
|
this.getHighriskworkCount()
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
// 相关方单位数
|
||
|
|
getUnitCorpCount() {
|
||
|
|
requestFN(
|
||
|
|
'/api/biTongji/unitCorpCount',
|
||
|
|
{ }
|
||
|
|
).then((data) => {
|
||
|
|
this.unitCorpCount = data.unitCorpCount
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getRegulatoryDepartmentCount() {
|
||
|
|
requestFN(
|
||
|
|
'/api/biTongji/getRegulatoryDepartmentCount',
|
||
|
|
{ }
|
||
|
|
).then((data) => {
|
||
|
|
this.regulatoryDepartmentCount = data.regulatoryDepartmentCount
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getCorpCount() {
|
||
|
|
requestFN(
|
||
|
|
'/api/biTongji/getCorpCount',
|
||
|
|
{ }
|
||
|
|
).then((data) => {
|
||
|
|
this.corpCount = data.corpCount
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getCountInsByCorpSource() {
|
||
|
|
var xAxis = []
|
||
|
|
var xYxis1 = []
|
||
|
|
var xYxis2 = []
|
||
|
|
requestFN(
|
||
|
|
'/api/biTongji/getCountInsByCorpSource',
|
||
|
|
{ }
|
||
|
|
).then((data) => {
|
||
|
|
data.varList.forEach((item, index) => {
|
||
|
|
xAxis.push(item.corpinfName)
|
||
|
|
xYxis1[index] = Number(item.supeCount)
|
||
|
|
xYxis2[index] = Number(item.corpCount)
|
||
|
|
})
|
||
|
|
this.initEcharts1(xAxis, xYxis1, xYxis2)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getUserCount() {
|
||
|
|
requestFN(
|
||
|
|
'/api/biTongji/getUserCount',
|
||
|
|
{ }
|
||
|
|
).then((data) => {
|
||
|
|
this.corpUserCount = data.corpUserCount
|
||
|
|
this.superUserCount = data.superUserCount
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getUserCountBuCorpinfo() {
|
||
|
|
requestFN(
|
||
|
|
'/api/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(
|
||
|
|
'/api/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(
|
||
|
|
'/api/biTongji/getSuperInsCountAndHiddeCount',
|
||
|
|
{ }
|
||
|
|
).then((data) => {
|
||
|
|
this.initEcharts2(data.superInsCount)
|
||
|
|
this.initEcharts3(data.superHiddenCount)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getSuperInsBySubjectAndTop() {
|
||
|
|
requestFN(
|
||
|
|
'/api/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
|
||
|
|
this.initEcharts4(count1, count2, count3)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getHiddenCountBySubject() {
|
||
|
|
requestFN(
|
||
|
|
'/api/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(
|
||
|
|
'/api/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
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.initEcharts5(yinhuanCount)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getHiddenCountByCorpInfoHandle() {
|
||
|
|
requestFN(
|
||
|
|
'/api/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(
|
||
|
|
'/api/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(xAxis, xYxis1, xYxis2) {
|
||
|
|
myChart1 = echarts.init(document.querySelector('#main1'))
|
||
|
|
const option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: '安全环保检查情况统计',
|
||
|
|
textStyle: {
|
||
|
|
color: '#05488c',
|
||
|
|
fontSize: 16
|
||
|
|
},
|
||
|
|
left: '0',
|
||
|
|
top: '0'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '0%',
|
||
|
|
right: '0%',
|
||
|
|
bottom: '0%',
|
||
|
|
top: '20%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ['港股公司', '分子公司'],
|
||
|
|
right: 10,
|
||
|
|
top: 12,
|
||
|
|
textStyle: {
|
||
|
|
color: '#05488c'
|
||
|
|
},
|
||
|
|
itemWidth: 24,
|
||
|
|
itemHeight: 10
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: xAxis,
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#05488c'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#02cafd'
|
||
|
|
}
|
||
|
|
// rotate: 45
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'white'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#05488c'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
myChart1.setOption(option)
|
||
|
|
},
|
||
|
|
initEcharts2(superInsCount) {
|
||
|
|
myChart2 = echarts.init(document.querySelector('#main2'))
|
||
|
|
const option = {
|
||
|
|
title: [
|
||
|
|
{
|
||
|
|
text: '安全环保检查次数',
|
||
|
|
left: '48%',
|
||
|
|
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'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
hoverAnimation: false,
|
||
|
|
radius: ['70%', '80%'],
|
||
|
|
center: ['50%', '40%'],
|
||
|
|
startAngle: 225,
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: superInsCount,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#3775fe'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#5da7ff'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
formatter: [
|
||
|
|
'{a|{c}}',
|
||
|
|
'{b|次}'
|
||
|
|
].join('\n'),
|
||
|
|
position: 'center',
|
||
|
|
show: true,
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
fontSize: '24',
|
||
|
|
fontWeight: 'normal',
|
||
|
|
color: '#00aaff'
|
||
|
|
},
|
||
|
|
b: {
|
||
|
|
fontSize: '16',
|
||
|
|
fontWeight: 'normal',
|
||
|
|
padding: [0, 0, 0, 0],
|
||
|
|
color: '#00aaff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 25,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
color: 'rgba(0,0,0,0)',
|
||
|
|
borderWidth: 0
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: 'rgba(0,0,0,0)',
|
||
|
|
borderWidth: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
myChart2.setOption(option)
|
||
|
|
},
|
||
|
|
initEcharts3(superHiddenCount) {
|
||
|
|
myChart3 = echarts.init(document.querySelector('#main3'))
|
||
|
|
const option = {
|
||
|
|
title: [
|
||
|
|
{
|
||
|
|
text: '发现隐患数',
|
||
|
|
left: '48%',
|
||
|
|
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'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
hoverAnimation: false,
|
||
|
|
radius: ['70%', '80%'],
|
||
|
|
center: ['50%', '40%'],
|
||
|
|
startAngle: 225,
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: superHiddenCount,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#3775fe'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#5da7ff'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
formatter: [
|
||
|
|
'{a|{c}}',
|
||
|
|
'{b|项}'
|
||
|
|
].join('\n'),
|
||
|
|
position: 'center',
|
||
|
|
show: true,
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
fontSize: '24',
|
||
|
|
fontWeight: 'normal',
|
||
|
|
color: '#00aaff'
|
||
|
|
},
|
||
|
|
b: {
|
||
|
|
fontSize: '16',
|
||
|
|
fontWeight: 'normal',
|
||
|
|
padding: [0, 0, 0, 0],
|
||
|
|
color: '#00aaff'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 25,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
color: 'rgba(0,0,0,0)',
|
||
|
|
borderWidth: 0
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
color: 'rgba(0,0,0,0)',
|
||
|
|
borderWidth: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
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: 15,
|
||
|
|
length2: 15
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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: '#05488c'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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: '#05488c'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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: yinhuanCount[4],
|
||
|
|
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: '#05488c'
|
||
|
|
},
|
||
|
|
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: '05488c'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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)
|
||
|
|
},
|
||
|
|
initEcharts7(highriskworkCounts) {
|
||
|
|
myChart7 = echarts.init(document.querySelector('#main7'))
|
||
|
|
const dataValue = highriskworkCounts
|
||
|
|
let max = 0
|
||
|
|
max = Math.max(...dataValue.map(Number))
|
||
|
|
const option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
radar: {
|
||
|
|
indicator: [
|
||
|
|
{ name: '动火作业', max },
|
||
|
|
{ name: '临时用电', max },
|
||
|
|
{ name: '吊装作业', max },
|
||
|
|
{ name: '盲板作业', max },
|
||
|
|
{ name: '高处作业', max },
|
||
|
|
{ name: '有限空间作业', max }
|
||
|
|
],
|
||
|
|
radius: '70%',
|
||
|
|
center: ['50%', '55%'],
|
||
|
|
shape: 'circle',
|
||
|
|
splitNumber: 3,
|
||
|
|
name: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#02cafd'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitArea: {
|
||
|
|
areaStyle: {
|
||
|
|
color: 'transparent'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#073593',
|
||
|
|
width: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: {
|
||
|
|
name: '高危作业占比',
|
||
|
|
type: 'radar',
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: dataValue
|
||
|
|
}
|
||
|
|
],
|
||
|
|
symbol: 'circle',
|
||
|
|
symbolSize: 12,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(249,181,44,0.8)',
|
||
|
|
borderColor: 'rgba(249,181,44,0.2)',
|
||
|
|
borderWidth: 12
|
||
|
|
}
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(10,56,108,0.67)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
normal: {
|
||
|
|
color: 'rgba(249,181,44,1)',
|
||
|
|
width: 2
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
myChart7.setOption(option)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
@mixin title {
|
||
|
|
position: relative;
|
||
|
|
.title {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
color: #05488c;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.corlor058{
|
||
|
|
color: #05488c;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
// background-image: url("../../assets/BI/bodybg.jpg");
|
||
|
|
// background-size: 100% 100%;
|
||
|
|
background: #f0f3fa;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
color: #4d94dc;
|
||
|
|
font-size: 14px;
|
||
|
|
|
||
|
|
.header {
|
||
|
|
width: 100vw;
|
||
|
|
height: 8.965vh;
|
||
|
|
background-image: url("../../assets/BI/topbg.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: 470px;
|
||
|
|
height: 5.123vh;
|
||
|
|
background-image: url("../../assets/BI/title.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 0.747vh;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.options {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
right: 30px;
|
||
|
|
top: 3.915vh;
|
||
|
|
height: 1.921vh;
|
||
|
|
line-height: 1.921vh;
|
||
|
|
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: 17.277vh;
|
||
|
|
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: 1.067vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(1) .count {
|
||
|
|
color: #fec72c;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(2) .count {
|
||
|
|
color: #8dee7b;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(3) .count {
|
||
|
|
color: #0fb9f7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.center {
|
||
|
|
margin-top: 1.601vh;
|
||
|
|
width: 492px;
|
||
|
|
height: 21.760vh;
|
||
|
|
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: 40%;
|
||
|
|
text-align: center;
|
||
|
|
background-color: rgba(184, 219, 255, 0.7);
|
||
|
|
margin-left: 15px;
|
||
|
|
padding: 3.202vh 30px;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.count {
|
||
|
|
font-size: 36px;
|
||
|
|
font-weight: bold;
|
||
|
|
padding-top: 1.067vh;
|
||
|
|
color: #0fb9f7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom {
|
||
|
|
margin-top: 1.601vh;
|
||
|
|
width: 492px;
|
||
|
|
height: 47.587vh;
|
||
|
|
background-image: url("../../assets/BI/leftbg3.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
@include title;
|
||
|
|
|
||
|
|
.content {
|
||
|
|
padding: 3.202vh 25px 1.601vh 25px;
|
||
|
|
|
||
|
|
.tabs {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.tab {
|
||
|
|
width: 118px;
|
||
|
|
height: 3.415vh;
|
||
|
|
line-height: 3.415vh;
|
||
|
|
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: 2.377vh;
|
||
|
|
height: 36.5vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
overflow-y: auto;
|
||
|
|
|
||
|
|
div {
|
||
|
|
padding: 0.747vh 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
&:nth-child(odd) {
|
||
|
|
background-color: rgba(99, 162, 256, 0.4);
|
||
|
|
}
|
||
|
|
&:first-child {
|
||
|
|
color: #05488c;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.center {
|
||
|
|
width: 822px;
|
||
|
|
|
||
|
|
.top {
|
||
|
|
width: 822px;
|
||
|
|
height: 58.769vh;
|
||
|
|
background-image: url("../../assets/BI/midbg1.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
padding: 3.735vh 20px;
|
||
|
|
@include title;
|
||
|
|
|
||
|
|
.map {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.baidu-map {
|
||
|
|
width: 100%;
|
||
|
|
height: 26vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#main1 {
|
||
|
|
margin-top: 1vh;
|
||
|
|
width: 100%;
|
||
|
|
height: 26vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom {
|
||
|
|
margin-top: 1.067vh;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.left {
|
||
|
|
width: 207px;
|
||
|
|
height: 30.377vh;
|
||
|
|
background-image: url("../../assets/BI/midbg2.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
padding: 3.735vh 20px 0 20px;
|
||
|
|
@include title;
|
||
|
|
|
||
|
|
#main2, #main3 {
|
||
|
|
width: 100%;
|
||
|
|
height: 12vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
#main3 {
|
||
|
|
margin-top: 1vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
width: 580px;
|
||
|
|
height: 30.377vh;
|
||
|
|
background-image: url("../../assets/BI/midbg3.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
padding: 0 20px;
|
||
|
|
@include title;
|
||
|
|
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
#main4 {
|
||
|
|
width: 48%;
|
||
|
|
height: 27vh;
|
||
|
|
margin-top: 3.377vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table {
|
||
|
|
width: 48%;
|
||
|
|
text-align: center;
|
||
|
|
margin: 2.377vh 0 0 4%;
|
||
|
|
height: 25vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
div {
|
||
|
|
padding: 0.747vh 0;
|
||
|
|
background-color: rgba(99, 162, 256, 0.4);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
color: #05488c;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
width: 492px;
|
||
|
|
|
||
|
|
.top {
|
||
|
|
width: 492px;
|
||
|
|
height: 9.419vh;
|
||
|
|
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: 1.601vh;
|
||
|
|
width: 492px;
|
||
|
|
height: 19.985vh;
|
||
|
|
background-image: url("../../assets/BI/rightbg2.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
padding: 0 20px;
|
||
|
|
@include title;
|
||
|
|
|
||
|
|
#main5 {
|
||
|
|
width: 100%;
|
||
|
|
height: 19.985vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.center2 {
|
||
|
|
margin-top: 1.601vh;
|
||
|
|
width: 492px;
|
||
|
|
height: 19.878vh;
|
||
|
|
background-image: url("../../assets/BI/rightbg3.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
padding: 0 20px;
|
||
|
|
@include title;
|
||
|
|
|
||
|
|
#main6 {
|
||
|
|
width: 100%;
|
||
|
|
height: 19.878vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom {
|
||
|
|
margin-top: 1.601vh;
|
||
|
|
width: 492px;
|
||
|
|
height: 35.780vh;
|
||
|
|
background-image: url("../../assets/BI/rightbg4.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
padding: 0 20px;
|
||
|
|
@include title;
|
||
|
|
|
||
|
|
#main7 {
|
||
|
|
width: 100%;
|
||
|
|
height: 35.780vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|