williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

安全管理-堆叠

Browse Source
This commit is contained in:
hh
2021-12-20 17:35:45 +08:00
parent e806ecbf54
commit 845c790070
4 changed files with 538 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/bigScreen/drivingCabin/center2.vue
View File

@ -90,22 +90,22 @@ export default {
return { return {
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4, 5, 6, 7, 8],
val: { val: {
attendanceWorker: "", attendanceWorker: "0",
completeTask: "", completeTask: "0",
equipmentRate: "", equipmentRate: "0",
expenditure: "", expenditure: "0",
id: 1, id: 1,
income: "", income: "0",
newContract: "", newContract: "0",
operatingEquipment: "", operatingEquipment: "0",
qualityProblem: "", qualityProblem: "0",
safetyProblem: "", safetyProblem: "0",
taskRate: "", taskRate: "0",
todayDate: "", todayDate: "0",
totalEquipment: "", totalEquipment: "0",
totalTask: "", totalTask: "0",
totalWorker: "", totalWorker: "0",
workerRate: "", workerRate: "0",
} }
} }
}, },

20
src/views/bigScreen/securityManage/center2.vue
View File

@ -111,9 +111,25 @@ export default {
], ],
} }
}, },
mounted() {}, mounted() {
this.$nextTick(() => {
this.getData()
})
},
beforeDestroy() {}, beforeDestroy() {},
methods: {}, methods: {
getData() {
this.request({
url: '/hx/securityManagement/dangerousWork',
method: 'get',
params: {type :1}
}).then(res => {
if (200 == res.code) {
console.log(res)
}
})
}
},
} }
</script> </script>

738
src/views/bigScreen/securityManage/right1.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div> <div>
<container2 title="重点危险源部门分布"> <container2 title="重点危险源部门分布">
<div style="height: 100%; width: 100%" ref="left1"></div> <div style="height: 100%; width: 100%" ref="left1"></div>
</container2> </container2>
<container2 title="重大危险点部门分布" style="margin-top: 10px"> <container2 title="重大危险点部门分布" style="margin-top: 10px">
<div style="height: 100%; width: 100%" ref="left2"></div> <div style="height: 100%; width: 100%" ref="left2"></div>
</container2> </container2>
</div> </div>
</template> </template>
<script> <script>
@ -20,334 +20,430 @@ import colorList from '@/utils/colorPalette'
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
export default { export default {
// mixins: [resize], // mixins: [resize],
name: 'left1', name: 'left1',
components: { components: {
rocketTit, rocketTit,
container2, container2,
bigScreenTabs, bigScreenTabs,
progressBar, progressBar,
}, },
data() { data () {
return { return {
colorList, colorList,
} chart1: null,
}, chart2: null,
mounted() { }
this.$nextTick(() => { },
this.initChart() mounted () {
this.initLine() this.$nextTick(() => {
}) this.initChart()
}, this.initLine()
beforeDestroy() {}, })
methods: { },
initChart() { beforeDestroy () { },
this.chart = echarts.init(this.$refs.left1) methods: {
this.setOptions() initChart () {
}, this.request({
setOptions() { url: '/hx/securityManagement/dangerSource',
this.chart.setOption({ method: 'get',
tooltip: { }).then(res => {
trigger: 'axis',
axisPointer: { if (200 == res.code) {
type: 'shadow', let titData = res.data.allLevel;
}, let data = res.data;
}, delete data.allLevel;
legend: { let titList = [];
data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'], let valList = [];
textStyle: { for (let index = 0; index < titData.length; index++) {
color: '#fff', //legend字体颜色 valList.push([])
}, }
}, // var a = {
grid: { // titData: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
left: 20, // valData: {
right: 20, // titList:['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
top: 30, // valList:[
bottom: 50, // [120, 132, 101, 134, 90, 230, 210],
containLabel: true, // [120, 132, 101, 134, 90, 230, 210],
}, // [120, 132, 101, 134, 90, 230, 210],
dataZoom: { // [120, 132, 101, 134, 90, 230, 210],
type: 'slider', // ],
// start: 0, // }
// end: 50, // };
textStyle: { for (const key in data) {
color: '#fff', if (Object.hasOwnProperty.call(data, key)) {
}, const item = data[key];
}, titList.push(key);
xAxis: [ for (let i = 0; i < item.length; i++) {
{ const ele = item[i];
type: 'category', let index = titData.findIndex(e => e == ele.name);
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'], valList[index][titList.length - 1] = ele.COUNTNUMBER;
axisLine: { }
lineStyle: { }
color: 'rgb(255, 255, 255)', }
},
}, this.chart1 = echarts.init(this.$refs.left1)
}, this.chart1.setOption({
], tooltip: {
yAxis: [ trigger: 'axis',
{ axisPointer: {
name: '个', type: 'shadow',
splitLine: { },
show: true, },
// 改变轴线颜色 legend: {
lineStyle: { // data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
// 使用深浅的间隔色 data: titData,
color: ['rgba(255, 255, 255,.5)'], textStyle: {
}, color: '#fff', //legend字体颜色
}, },
axisLabel: { },
formatter: '{value}', grid: {
}, left: 20,
axisLine: { right: 20,
lineStyle: { top: 30,
color: 'rgb(255, 255, 255)', bottom: 50,
}, containLabel: true,
}, },
}, dataZoom: {
{ type: 'slider',
type: 'value', start: 0,
}, end: this.dataZoomEnd(titList.length, 5),
], },
series: [ color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'],
{ xAxis: [
name: '四级危险源', {
type: 'bar', type: 'category',
stack: 'Ad', // data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
emphasis: { data: titList,
focus: 'series', axisLine: {
}, lineStyle: {
itemStyle: { color: 'rgb(255, 255, 255)',
color: '#FF9F43', },
}, },
barWidth: 30, },
data: [120, 132, 101, 134, 90, 230, 210], ],
}, yAxis: [
{ {
name: '三级危险源', name: '个',
type: 'bar', splitLine: {
stack: 'Ad', show: true,
emphasis: { // 改变轴线颜色
focus: 'series', lineStyle: {
}, // 使用深浅的间隔色
itemStyle: { color: ['rgba(255, 255, 255,.5)'],
color: '#F7DC87', },
}, },
barWidth: 30, axisLabel: {
data: [220, 182, 191, 234, 290, 330, 310], formatter: '{value}',
}, },
{ axisLine: {
name: '二级危险源', lineStyle: {
type: 'bar', color: 'rgb(255, 255, 255)',
stack: 'Ad', },
emphasis: { },
focus: 'series', },
}, {
itemStyle: { type: 'value',
color: '#55C5A2', },
}, ],
barWidth: 30, series: [
data: [150, 232, 201, 154, 190, 330, 410], ...valList.map((e, index) => {
}, return {
{
name: '一级危险源', name: titData[index],
type: 'bar', type: 'bar',
stack: 'Ad', stack: 'Ad',
emphasis: { emphasis: {
focus: 'series', focus: 'series',
}, },
itemStyle: {
color: '#5B8FF9', barWidth: 30,
}, data: e,
barWidth: 30, }
data: [150, 232, 201, 154, 190, 330, 410], })
}, // {
], // name: '四级危险源',
}) // type: 'bar',
}, // stack: 'Ad',
initLine() { // emphasis: {
this.chart = echarts.init(this.$refs.left2) // focus: 'series',
this.setOptions2() // },
}, // itemStyle: {
setOptions2() { // color: '#FF9F43',
this.chart.setOption({ // },
tooltip: { // barWidth: 30,
trigger: 'axis', // data: [120, 132, 101, 134, 90, 230, 210],
axisPointer: { // },
type: 'shadow', // {
}, // name: '三级危险源',
}, // type: 'bar',
legend: { // stack: 'Ad',
data: ['一级危险源', '二级危险源', '三级危险源'], // emphasis: {
textStyle: { // focus: 'series',
color: '#fff', //legend字体颜色 // },
}, // itemStyle: {
}, // color: '#F7DC87',
grid: { // },
left: 20, // barWidth: 30,
right: 20, // data: [220, 182, 191, 234, 290, 330, 310],
top: 30, // },
bottom: 50, // {
containLabel: true, // name: '二级危险源',
}, // type: 'bar',
dataZoom: { // stack: 'Ad',
type: 'slider', // emphasis: {
// start: 0, // focus: 'series',
// end: 50, // },
textStyle: { // itemStyle: {
color: '#fff', // color: '#55C5A2',
}, // },
}, // barWidth: 30,
xAxis: [ // data: [150, 232, 201, 154, 190, 330, 410],
{ // },
type: 'category', // {
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'], // name: '一级危险源',
axisLine: { // type: 'bar',
lineStyle: { // stack: 'Ad',
color: 'rgb(255, 255, 255)', // emphasis: {
}, // focus: 'series',
}, // },
}, // itemStyle: {
], // color: '#5B8FF9',
yAxis: [ // },
{ // barWidth: 30,
name: '个', // data: [150, 232, 201, 154, 190, 330, 410],
splitLine: { // },
show: true, ],
// 改变轴线颜色 })
lineStyle: { }
// 使用深浅的间隔色 })
color: ['rgba(255, 255, 255,.5)'], this.setOptions()
}, },
}, setOptions () {
axisLabel: {
formatter: '{value}', },
}, initLine () {
axisLine: { this.request({
lineStyle: { url: '/hx/securityManagement/dangerPoint',
color: 'rgb(255, 255, 255)', method: 'get',
}, }).then(res => {
}, if (200 == res.code) {
}, let titData = res.data.allLevel;
{ let data = res.data;
type: 'value', delete data.allLevel;
}, let titList = [];
], let valList = [];
series: [ for (let index = 0; index < titData.length; index++) {
{ valList.push([])
name: '三级危险源', }
type: 'bar', for (const key in data) {
stack: 'Ad', if (Object.hasOwnProperty.call(data, key)) {
emphasis: { const item = data[key];
focus: 'series', titList.push(key);
}, for (let i = 0; i < item.length; i++) {
itemStyle: { const ele = item[i];
color: '#F7DC87', let index = titData.findIndex(e => e == ele.name);
}, valList[index][titList.length - 1] = ele.COUNTNUMBER;
barWidth: 30, }
data: [220, 182, 191, 234, 290, 330, 310], }
}, }
{ this.chart2 = echarts.init(this.$refs.left2)
name: '二级危险源', this.chart2.setOption({
type: 'bar', tooltip: {
stack: 'Ad', trigger: 'axis',
emphasis: { axisPointer: {
focus: 'series', type: 'shadow',
}, },
itemStyle: { },
color: '#55C5A2', legend: {
}, // data: ['一级危险源', '二级危险源', '三级危险源'],
barWidth: 30, data: titData,
data: [150, 232, 201, 154, 190, 330, 410], textStyle: {
}, color: '#fff', //legend字体颜色
{ },
name: '一级危险源', },
type: 'bar', grid: {
stack: 'Ad', left: 20,
emphasis: { right: 20,
focus: 'series', top: 30,
}, bottom: 50,
itemStyle: { containLabel: true,
color: '#5B8FF9', },
}, dataZoom: {
barWidth: 30, type: 'slider',
data: [150, 232, 201, 154, 190, 330, 410], start: 0,
}, end: this.dataZoomEnd(titList.length, 5),
], },
}) color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'],
}, xAxis: [
}, {
type: 'category',
data: titList,
// data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: [
{
name: '个',
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
{
type: 'value',
},
],
series: [
...valList.map((e, index) => {
return {
name: titData[index],
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
barWidth: 30,
data: e,
}
}),
// {
// name: '三级危险源',
// type: 'bar',
// stack: 'Ad',
// emphasis: {
// focus: 'series',
// },
// itemStyle: {
// color: '#F7DC87',
// },
// barWidth: 30,
// data: [220, 182, 191, 234, 290, 330, 310],
// },
// {
// name: '二级危险源',
// type: 'bar',
// stack: 'Ad',
// emphasis: {
// focus: 'series',
// },
// itemStyle: {
// color: '#55C5A2',
// },
// barWidth: 30,
// data: [150, 232, 201, 154, 190, 330, 410],
// },
// {
// name: '一级危险源',
// type: 'bar',
// stack: 'Ad',
// emphasis: {
// focus: 'series',
// },
// itemStyle: {
// color: '#5B8FF9',
// },
// barWidth: 30,
// data: [150, 232, 201, 154, 190, 330, 410],
// },
],
})
}
})
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
.box { .box {
padding: 0 0 5px 15px; padding: 0 0 5px 15px;
display: flex; display: flex;
align-items: center; align-items: center;
.num { .num {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
margin: 0 10px; margin: 0 10px;
} }
} }
} }
.content1 { .content1 {
// height: 200px; // height: 200px;
height: 100%; height: 100%;
.chart1 { .chart1 {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
height: 192px; height: 192px;
background: transparent; background: transparent;
} }
} }
.num { .num {
font-size: 30px; font-size: 30px;
font-family: Roboto-BlackItalic, Roboto; font-family: Roboto-BlackItalic, Roboto;
font-weight: normal; font-weight: normal;
color: #91d5fe; color: #91d5fe;
vertical-align: sub; vertical-align: sub;
// margin-right: 3px; // margin-right: 3px;
} }
.content2 { .content2 {
padding: 20px; padding: 20px;
flex: 1; flex: 1;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.chart2 { .chart2 {
height: 100%; height: 100%;
} }
.tit { .tit {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
line-height: 22px; line-height: 22px;
position: relative; position: relative;
padding-left: 15px; padding-left: 15px;
} }
.tit::after { .tit::after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 3px; top: 3px;
left: 0px; left: 0px;
width: 4px; width: 4px;
height: 16px; height: 16px;
background: #00ffff; background: #00ffff;
} }
} }
</style> </style>

346
src/views/bigScreen/securityManage/right2.vue
View File

@ -1,24 +1,24 @@
<template> <template>
<div> <div>
<container5 title="危险作业厂所压减情况"> <container5 title="危险作业厂所压减情况">
<el-row style="height: 80%; display: flex; align-items: center"> <el-row style="height: 80%; display: flex; align-items: center">
<el-col :span="12"> <el-col :span="12">
<div class="right1_bg right1_bg1"> <div class="right1_bg right1_bg1">
<div><span class="num">4 / 6</span></div> <div><span class="num">{{val[0].NOWNUMBER}} / {{val[0].INITNUMBER}}</span></div>
<div style="font-size: 14px">现有/原有</div> <div style="font-size: 14px">现有/原有</div>
<div class="txt">三人以上危险作业场所</div> <div class="txt">{{val[0].name}}危险作业场所</div>
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="right1_bg right1_bg2"> <div class="right1_bg right1_bg2">
<div><span class="num">2 / 7</span></div> <div><span class="num">{{val[1].NOWNUMBER}} / {{val[1].INITNUMBER}}</span></div>
<div style="font-size: 14px">现有/原有</div> <div style="font-size: 14px">现有/原有</div>
<div class="txt">十人以上危险作业场所</div> <div class="txt">{{val[1].name}}危险作业场所</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</container5> </container5>
</div> </div>
</template> </template>
<script> <script>
@ -31,252 +31,82 @@ import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from '../../dashboard/mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
name: 'right2', name: 'right2',
components: { components: {
scalseBox, scalseBox,
bigScreenHead, bigScreenHead,
rocketTit, rocketTit,
container5, container5,
}, },
data() { // {"msg":"操作成功","code":200,"data":}
return { data () {
dateRange: [], return {
chart: null, val: [
option: { { "INITNUMBER": 0, "name": "三人以上", "NOWNUMBER": 0 },
legend: { { "INITNUMBER": 0, "name": "十人以上", "NOWNUMBER": 0 }
data: ['利润', '利润预测', '利润目标完成率'], ]
textStyle: { }
color: '#fff', },
}, mounted () {
}, this.$nextTick(() => {
grid: { this.getData()
left: '3%', // this.initChart()
right: '6%', })
bottom: '3%', },
containLabel: true, beforeDestroy () {
}, if (!this.chart) {
xAxis: [ return
{ }
type: 'category', this.chart.dispose()
data: [ this.chart = null
'2021-01', },
'2021-02', methods: {
'2021-03', getData () {
'2021-04', this.request({
'2021-05', url: '/hx/securityManagement/dangerPlace',
'2021-06', method: 'get',
'2021-07', }).then(res => {
'2021-08', this.val = res.data
'2021-09', })
'2021-10', }
'2021-11', },
'2021-12',
],
axisPointer: {
type: 'shadow',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: [
{
type: 'value',
name: '万元',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
{
type: 'value',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} %',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
grid: {
containLabel: true,
width: '99%',
left: 0,
top: 50,
bottom: 50,
},
dataZoom: {},
series: [
{
name: '利润',
type: 'bar',
barWidth: 20,
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
itemStyle: {
color: 'rgb(118,196,166)',
},
},
{
name: '利润预测',
type: 'bar',
barWidth: 20,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#B5D3FE', // 0%处的颜色为红色
},
{
offset: 1,
color: '#7EA7FC', // 100%处的颜色为蓝
},
],
},
},
},
{
name: '利润目标完成率',
type: 'line',
yAxisIndex: 1,
smooth: false,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
itemStyle: {
normal: {
color: '#F6D97E',
},
},
symbol: 'none',
},
],
// yAxis: {
// type: 'value',
// splitLine: {
// show: false//不显示网格线
// },
// splitArea: {
// show: false//不显示网格区域
// },
// axisLine: {
// lineStyle: {
// color: 'rgb(255, 255, 255)'
// },
// }
// },
// series: [
// {
// name: '利润',
// type: 'bar',
// data: [
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
// ]
// },
// {
// name: '利润预测',
// type: 'bar',
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
// },
// {
// name: '利润目标完成率',
// type: 'line',
// yAxisIndex: 1,
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
// }
// ]
},
}
},
mounted() {
this.$nextTick(() => {
// this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.chart.setOption(this.option)
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.right1_bg { .right1_bg {
position: relative; position: relative;
width: 147px; width: 147px;
height: 113px; height: 113px;
background-size: cover; background-size: cover;
text-align: center; text-align: center;
padding: 0 0 10px 0; padding: 0 0 10px 0;
margin: 20px auto 0 auto; margin: 20px auto 0 auto;
font-size: 14px; font-size: 14px;
.num { .num {
font-size: 35px; font-size: 35px;
font-family: Roboto-Black, Roboto; font-family: Roboto-Black, Roboto;
font-weight: 900; font-weight: 900;
line-height: 35px; line-height: 35px;
margin-right: 3px; margin-right: 3px;
vertical-align: middle; vertical-align: middle;
} }
.txt { .txt {
position: absolute; position: absolute;
bottom: -30px; bottom: -30px;
} }
} }
.right1_bg1 { .right1_bg1 {
background-image: url(./right2-1.png); background-image: url(./right2-1.png);
.num { .num {
color: #1098ff; color: #1098ff;
} }
} }
.right1_bg2 { .right1_bg2 {
background-image: url(./right2-2.png); background-image: url(./right2-2.png);
.num { .num {
color: #f6d97e; color: #f6d97e;
} }
} }
</style> </style>