安全管理-堆叠
This commit is contained in:
hh
@ -90,22 +90,22 @@ export default {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
val: {
|
||||
attendanceWorker: "",
|
||||
completeTask: "",
|
||||
equipmentRate: "",
|
||||
expenditure: "",
|
||||
attendanceWorker: "0",
|
||||
completeTask: "0",
|
||||
equipmentRate: "0",
|
||||
expenditure: "0",
|
||||
id: 1,
|
||||
income: "",
|
||||
newContract: "",
|
||||
operatingEquipment: "",
|
||||
qualityProblem: "",
|
||||
safetyProblem: "",
|
||||
taskRate: "",
|
||||
todayDate: "",
|
||||
totalEquipment: "",
|
||||
totalTask: "",
|
||||
totalWorker: "",
|
||||
workerRate: "",
|
||||
income: "0",
|
||||
newContract: "0",
|
||||
operatingEquipment: "0",
|
||||
qualityProblem: "0",
|
||||
safetyProblem: "0",
|
||||
taskRate: "0",
|
||||
todayDate: "0",
|
||||
totalEquipment: "0",
|
||||
totalTask: "0",
|
||||
totalWorker: "0",
|
||||
workerRate: "0",
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -111,9 +111,25 @@ export default {
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
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>
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="重点危险源部门分布">
|
||||
<div style="height: 100%; width: 100%" ref="left1"></div>
|
||||
</container2>
|
||||
<container2 title="重大危险点部门分布" style="margin-top: 10px">
|
||||
<div style="height: 100%; width: 100%" ref="left2"></div>
|
||||
</container2>
|
||||
</div>
|
||||
<div>
|
||||
<container2 title="重点危险源部门分布">
|
||||
<div style="height: 100%; width: 100%" ref="left1"></div>
|
||||
</container2>
|
||||
<container2 title="重大危险点部门分布" style="margin-top: 10px">
|
||||
<div style="height: 100%; width: 100%" ref="left2"></div>
|
||||
</container2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -20,334 +20,430 @@ import colorList from '@/utils/colorPalette'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colorList,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.left1)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
// start: 0,
|
||||
// end: 50,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
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: [
|
||||
{
|
||||
name: '四级危险源',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FF9F43',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
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],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
initLine() {
|
||||
this.chart = echarts.init(this.$refs.left2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['一级危险源', '二级危险源', '三级危险源'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
// start: 0,
|
||||
// end: 50,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
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: [
|
||||
{
|
||||
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],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
colorList,
|
||||
chart1: null,
|
||||
chart2: null,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy () { },
|
||||
methods: {
|
||||
initChart () {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/dangerSource',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
|
||||
if (200 == res.code) {
|
||||
let titData = res.data.allLevel;
|
||||
let data = res.data;
|
||||
delete data.allLevel;
|
||||
let titList = [];
|
||||
let valList = [];
|
||||
for (let index = 0; index < titData.length; index++) {
|
||||
valList.push([])
|
||||
}
|
||||
// var a = {
|
||||
// titData: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
|
||||
// valData: {
|
||||
// titList:['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||
// valList:[
|
||||
// [120, 132, 101, 134, 90, 230, 210],
|
||||
// [120, 132, 101, 134, 90, 230, 210],
|
||||
// [120, 132, 101, 134, 90, 230, 210],
|
||||
// [120, 132, 101, 134, 90, 230, 210],
|
||||
// ],
|
||||
// }
|
||||
// };
|
||||
for (const key in data) {
|
||||
if (Object.hasOwnProperty.call(data, key)) {
|
||||
const item = data[key];
|
||||
titList.push(key);
|
||||
for (let i = 0; i < item.length; i++) {
|
||||
const ele = item[i];
|
||||
let index = titData.findIndex(e => e == ele.name);
|
||||
valList[index][titList.length - 1] = ele.COUNTNUMBER;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.chart1 = echarts.init(this.$refs.left1)
|
||||
this.chart1.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
|
||||
data: titData,
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titList.length, 5),
|
||||
},
|
||||
color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
// data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
|
||||
data: titList,
|
||||
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: '#FF9F43',
|
||||
// },
|
||||
// barWidth: 30,
|
||||
// data: [120, 132, 101, 134, 90, 230, 210],
|
||||
// },
|
||||
// {
|
||||
// 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],
|
||||
// },
|
||||
],
|
||||
})
|
||||
}
|
||||
})
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions () {
|
||||
|
||||
},
|
||||
initLine () {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/dangerPoint',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
let titData = res.data.allLevel;
|
||||
let data = res.data;
|
||||
delete data.allLevel;
|
||||
let titList = [];
|
||||
let valList = [];
|
||||
for (let index = 0; index < titData.length; index++) {
|
||||
valList.push([])
|
||||
}
|
||||
for (const key in data) {
|
||||
if (Object.hasOwnProperty.call(data, key)) {
|
||||
const item = data[key];
|
||||
titList.push(key);
|
||||
for (let i = 0; i < item.length; i++) {
|
||||
const ele = item[i];
|
||||
let index = titData.findIndex(e => e == ele.name);
|
||||
valList[index][titList.length - 1] = ele.COUNTNUMBER;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.chart2 = echarts.init(this.$refs.left2)
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// data: ['一级危险源', '二级危险源', '三级危险源'],
|
||||
data: titData,
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content1 {
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: normal;
|
||||
color: #91d5fe;
|
||||
vertical-align: sub;
|
||||
// margin-right: 3px;
|
||||
font-size: 30px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: normal;
|
||||
color: #91d5fe;
|
||||
vertical-align: sub;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
|
||||
.content2 {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chart2 {
|
||||
height: 100%;
|
||||
}
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chart2 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.tit::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #00ffff;
|
||||
}
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.tit::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #00ffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<container5 title="危险作业厂所压减情况">
|
||||
<el-row style="height: 80%; display: flex; align-items: center">
|
||||
<el-col :span="12">
|
||||
<div class="right1_bg right1_bg1">
|
||||
<div><span class="num">4 / 6</span></div>
|
||||
<div style="font-size: 14px">现有/原有</div>
|
||||
<div class="txt">三人以上危险作业场所</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="right1_bg right1_bg2">
|
||||
<div><span class="num">2 / 7</span></div>
|
||||
<div style="font-size: 14px">现有/原有</div>
|
||||
<div class="txt">十人以上危险作业场所</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</container5>
|
||||
</div>
|
||||
<div>
|
||||
<container5 title="危险作业厂所压减情况">
|
||||
<el-row style="height: 80%; display: flex; align-items: center">
|
||||
<el-col :span="12">
|
||||
<div class="right1_bg right1_bg1">
|
||||
<div><span class="num">{{val[0].NOWNUMBER}} / {{val[0].INITNUMBER}}</span></div>
|
||||
<div style="font-size: 14px">现有/原有</div>
|
||||
<div class="txt">{{val[0].name}}危险作业场所</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="right1_bg right1_bg2">
|
||||
<div><span class="num">{{val[1].NOWNUMBER}} / {{val[1].INITNUMBER}}</span></div>
|
||||
<div style="font-size: 14px">现有/原有</div>
|
||||
<div class="txt">{{val[1].name}}危险作业场所</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</container5>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -31,252 +31,82 @@ import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'right2',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container5,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
option: {
|
||||
legend: {
|
||||
data: ['利润', '利润预测', '利润目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
'2021-01',
|
||||
'2021-02',
|
||||
'2021-03',
|
||||
'2021-04',
|
||||
'2021-05',
|
||||
'2021-06',
|
||||
'2021-07',
|
||||
'2021-08',
|
||||
'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)
|
||||
},
|
||||
},
|
||||
mixins: [resize],
|
||||
name: 'right2',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container5,
|
||||
},
|
||||
// {"msg":"操作成功","code":200,"data":}
|
||||
data () {
|
||||
return {
|
||||
val: [
|
||||
{ "INITNUMBER": 0, "name": "三人以上", "NOWNUMBER": 0 },
|
||||
{ "INITNUMBER": 0, "name": "十人以上", "NOWNUMBER": 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
// this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/dangerPlace',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
this.val = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.right1_bg {
|
||||
position: relative;
|
||||
width: 147px;
|
||||
height: 113px;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
padding: 0 0 10px 0;
|
||||
margin: 20px auto 0 auto;
|
||||
font-size: 14px;
|
||||
.num {
|
||||
font-size: 35px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
line-height: 35px;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.txt {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
}
|
||||
position: relative;
|
||||
width: 147px;
|
||||
height: 113px;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
padding: 0 0 10px 0;
|
||||
margin: 20px auto 0 auto;
|
||||
font-size: 14px;
|
||||
.num {
|
||||
font-size: 35px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
line-height: 35px;
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.txt {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
}
|
||||
}
|
||||
.right1_bg1 {
|
||||
background-image: url(./right2-1.png);
|
||||
.num {
|
||||
color: #1098ff;
|
||||
}
|
||||
background-image: url(./right2-1.png);
|
||||
.num {
|
||||
color: #1098ff;
|
||||
}
|
||||
}
|
||||
.right1_bg2 {
|
||||
background-image: url(./right2-2.png);
|
||||
.num {
|
||||
color: #f6d97e;
|
||||
}
|
||||
background-image: url(./right2-2.png);
|
||||
.num {
|
||||
color: #f6d97e;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user