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 {
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",
}
}
},

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

@ -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>

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

@ -31,6 +31,8 @@ export default {
data () {
return {
colorList,
chart1: null,
chart2: null,
}
},
mounted () {
@ -42,135 +44,211 @@ export default {
beforeDestroy () { },
methods: {
initChart () {
this.chart = echarts.init(this.$refs.left1)
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 () {
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({
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: {
@ -178,7 +256,8 @@ export default {
},
},
legend: {
data: ['一级危险源', '二级危险源', '三级危险源'],
// data: ['一级危险源', '二级危险源', '三级危险源'],
data: titData,
textStyle: {
color: '#fff', //legend字体颜色
},
@ -192,16 +271,15 @@ export default {
},
dataZoom: {
type: 'slider',
// start: 0,
// end: 50,
textStyle: {
color: '#fff',
},
start: 0,
end: this.dataZoomEnd(titList.length, 5),
},
color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'],
xAxis: [
{
type: 'category',
data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
data: titList,
// data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
@ -234,48 +312,66 @@ export default {
},
],
series: [
{
name: '三级危险源',
...valList.map((e, index) => {
return {
name: titData[index],
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],
},
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>
@ -340,7 +436,7 @@ export default {
padding-left: 15px;
}
.tit::after {
content: '';
content: "";
display: block;
position: absolute;
top: 3px;

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

@ -4,16 +4,16 @@
<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><span class="num">{{val[0].NOWNUMBER}} / {{val[0].INITNUMBER}}</span></div>
<div style="font-size: 14px">现有/原有</div>
<div class="txt">三人以上危险作业场所</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">2 / 7</span></div>
<div><span class="num">{{val[1].NOWNUMBER}} / {{val[1].INITNUMBER}}</span></div>
<div style="font-size: 14px">现有/原有</div>
<div class="txt">十人以上危险作业场所</div>
<div class="txt">{{val[1].name}}危险作业场所</div>
</div>
</el-col>
</el-row>
@ -39,192 +39,18 @@ export default {
rocketTit,
container5,
},
// {"msg":"操作成功","code":200,"data":}
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]
// }
// ]
},
val: [
{ "INITNUMBER": 0, "name": "三人以上", "NOWNUMBER": 0 },
{ "INITNUMBER": 0, "name": "十人以上", "NOWNUMBER": 0 }
]
}
},
mounted () {
this.$nextTick(() => {
this.getData()
// this.initChart()
})
},
@ -236,10 +62,14 @@ export default {
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.chart.setOption(this.option)
},
getData () {
this.request({
url: '/hx/securityManagement/dangerPlace',
method: 'get',
}).then(res => {
this.val = res.data
})
}
},
}
</script>