You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
890 lines
23 KiB
890 lines
23 KiB
<template> |
|
<basic-container> |
|
<el-row :gutter=24> |
|
<el-row :gutter=24 v-if="this.permission.departmentSearch" > |
|
<el-form ref="form" :model="form" label-width="80px"> |
|
<!-- <el-col :span="6"> |
|
<el-form-item label="日期"> |
|
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" |
|
end-placeholder="结束日期" style="width:100%"> |
|
</el-date-picker> |
|
</el-form-item> |
|
</el-col> --> |
|
<el-col :span="6"> |
|
<el-form-item label="部门"> |
|
<el-select v-model="value" placeholder="请选择部门" style="width:100%"> |
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-button type="primary" @click="onSubmit">搜索</el-button> |
|
<el-button @click="onSubmit">重置</el-button> |
|
</el-col> |
|
</el-form> |
|
</el-row> |
|
<el-col :span="12"> |
|
<div class="title">物资申请类别 |
|
</div> |
|
<div id="echarts1" style="width: 100%; height:400px"></div> |
|
</el-col> |
|
<el-col :span="12"> |
|
<div class="title">物资申请价值 |
|
</div> |
|
<div id="echarts2" style="width: 100%; height:400px"></div> |
|
</el-col> |
|
<el-col :span="12"> |
|
<div class="title">物资库存 |
|
</div> |
|
<div id="echarts3" style="width: 100%; height:400px"></div> |
|
</el-col> |
|
<el-col :span="12"> |
|
<div class="title">消耗品价值分析 |
|
<el-select v-model="value2" placeholder="请选择" style="float:right" @change="changeSelect()"> |
|
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> |
|
</el-option> |
|
</el-select> |
|
</div> |
|
<div id="echarts4" style="width: 100%; height:400px"></div> |
|
</el-col> |
|
</el-row> |
|
</basic-container> |
|
</template> |
|
<script> |
|
import * as echarts from "echarts"; |
|
import {mapGetters} from "vuex"; |
|
export default { |
|
computed: { |
|
...mapGetters(["userInfo", "permission"]), |
|
}, |
|
data() { |
|
return { |
|
options: [{ |
|
value: '部门一', |
|
label: '部门一' |
|
}, { |
|
value: '部门二', |
|
label: '部门二' |
|
}, { |
|
value: '部门三', |
|
label: '部门三' |
|
}, { |
|
value: '部门四', |
|
label: '部门四' |
|
}, { |
|
value: '部门五', |
|
label: '部门五' |
|
}], |
|
value: '', |
|
options2: [{ |
|
value: '年度', |
|
label: '年度' |
|
}, { |
|
value: '季度', |
|
label: '季度' |
|
}, { |
|
value: '月份', |
|
label: '月份' |
|
}], |
|
value2: '年度' |
|
} |
|
}, |
|
mounted() { |
|
this.initEcharts1() |
|
this.initEcharts2() |
|
this.initEcharts3() |
|
this.initEcharts4(["2022年", "2023年", "2024年", "2025年"], [23, 78, 87, 90]) |
|
}, |
|
methods: { |
|
initEcharts1() { |
|
var myChart = echarts.init(document.getElementById("echarts1")); |
|
// 指定图表的配置项和数据 |
|
var option = { |
|
|
|
title: { |
|
text: '', |
|
x: 'center' |
|
}, |
|
backgroundColor: '#fff', |
|
tooltip: { |
|
trigger: 'item', |
|
}, |
|
xAxis: { |
|
data: ["全部", "易耗品", "耐用品"], |
|
axisTick: { |
|
show: false |
|
}, |
|
axisLine: { |
|
show: false |
|
}, |
|
axisLabel: { |
|
textStyle: { |
|
color: '#888' |
|
}, |
|
margin: 20, //刻度标签与轴线之间的距离。 |
|
}, |
|
|
|
}, |
|
yAxis: { |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: '#eee', |
|
type: 'solid' |
|
} |
|
}, |
|
axisTick: { |
|
show: false |
|
}, |
|
axisLine: { |
|
show: false |
|
}, |
|
axisLabel: { |
|
textStyle: { |
|
color: '#888' |
|
}, |
|
} |
|
}, |
|
series: [ |
|
{//三个最低下的圆片 |
|
"name": "", |
|
"type": "pictorialBar", |
|
"symbolSize": [100, 30], |
|
"symbolOffset": [0, 18], |
|
"z": 12, |
|
"data": [{ |
|
"name": "", |
|
"value": "100", |
|
"itemStyle": { |
|
"normal": { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
offset: 0, |
|
color: "rgba(89,211,255,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(23,237,194,1)" |
|
} |
|
]) |
|
} |
|
} |
|
}, { |
|
"name": "", |
|
"value": "101", |
|
"itemStyle": { |
|
"normal": { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
offset: 0, |
|
color: "rgba(89,211,255,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(23,237,194,1)" |
|
} |
|
]) |
|
} |
|
} |
|
}, { |
|
"name": "", |
|
"value": "81", |
|
"itemStyle": { |
|
"normal": { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
offset: 0, |
|
color: "rgba(89,211,255,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(23,237,194,1)" |
|
} |
|
]) |
|
} |
|
} |
|
}] |
|
}, |
|
|
|
|
|
//下半截柱状图 |
|
{ |
|
name: '2020', |
|
type: 'bar', |
|
barWidth: 100, |
|
barGap: '-100%', |
|
itemStyle: {//lenged文本 |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
offset: 0, |
|
color: "rgba(55,255,249,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(0,222,215,0.2)" |
|
} |
|
]) |
|
}, |
|
|
|
data: [{ |
|
"name": "", |
|
"value": "100", |
|
"itemStyle": { |
|
"normal": { |
|
"color": { |
|
"x": 0, |
|
"y": 0, |
|
"x2": 0, |
|
"y2": 1, |
|
"type": "linear", |
|
"global": false, |
|
"colorStops": [{//第一节下面 |
|
"offset": 0, |
|
"color": "rgba(0,255,245,0.5)" |
|
}, { |
|
"offset": 1, |
|
"color": "#43bafe" |
|
}] |
|
} |
|
} |
|
} |
|
}, { |
|
"name": "", |
|
"value": "101", |
|
"itemStyle": { |
|
"normal": { |
|
"color": { |
|
"x": 0, |
|
"y": 0, |
|
"x2": 0, |
|
"y2": 1, |
|
"type": "linear", |
|
"global": false, |
|
"colorStops": [{//第二个柱状图下面 |
|
"offset": 0, |
|
"color": "rgba(0,255,245,0.5)" |
|
}, { |
|
"offset": 1, |
|
"color": "#43bafe" |
|
}] |
|
} |
|
} |
|
} |
|
}, { |
|
"name": "", |
|
"value": "81", |
|
"itemStyle": { |
|
"normal": { |
|
"color": { |
|
"x": 0, |
|
"y": 0, |
|
"x2": 0, |
|
"y2": 1, |
|
"type": "linear", |
|
"global": false, |
|
"colorStops": [{//第三个柱状图下半截 |
|
"offset": 0, |
|
"color": "rgba(0,255,245,0.5)" |
|
}, { |
|
"offset": 1, |
|
"color": "#43bafe" |
|
}] |
|
} |
|
} |
|
} |
|
}] |
|
}, |
|
|
|
{ // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20 |
|
type: 'bar', |
|
barWidth: 100, |
|
barGap: '-100%', |
|
stack: '广告', |
|
itemStyle: { |
|
color: 'transparent' |
|
}, |
|
data: [100, 102, 81] |
|
}, |
|
|
|
{ |
|
"name": "", //头部 |
|
"type": "pictorialBar", |
|
"symbolSize": [100, 45], |
|
"symbolOffset": [0, -20], |
|
"z": 12, |
|
"data": [{ |
|
"name": "", |
|
"value": "320", |
|
"symbolPosition": "end", |
|
"itemStyle": { |
|
"normal": { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
|
[{ |
|
offset: 0, |
|
color: "rgba(54,127,223,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(94,162,254,1)" |
|
} |
|
], |
|
false |
|
), |
|
} |
|
} |
|
}, { |
|
"name": "", |
|
"value": "283", |
|
"symbolPosition": "end", |
|
"itemStyle": { |
|
"normal": { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
|
[{ |
|
offset: 0, |
|
color: "rgba(54,127,223,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(94,162,254,1)" |
|
} |
|
], |
|
false |
|
), |
|
} |
|
} |
|
}, { |
|
"name": "", |
|
"value": "272", |
|
"symbolPosition": "end", |
|
"itemStyle": { |
|
"normal": { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
|
[{ |
|
offset: 0, |
|
color: "rgba(54,127,223,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(94,162,254,1)" |
|
} |
|
], |
|
false |
|
), |
|
} |
|
} |
|
}] |
|
}, |
|
|
|
{ |
|
"name": "", |
|
"type": "pictorialBar", |
|
"symbolSize": [100, 45], |
|
"symbolOffset": [0, -20], |
|
"z": 12, |
|
"data": [{ |
|
"name": "", |
|
"value": "103", |
|
"symbolPosition": "end", |
|
"itemStyle": { |
|
"normal": { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
|
[{ |
|
offset: 0, |
|
color: "rgba(89,211,255,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(23,237,194,1)" |
|
} |
|
], |
|
false |
|
), |
|
} |
|
} |
|
}, { |
|
"name": "", |
|
"value": "105", |
|
"symbolPosition": "end", |
|
"itemStyle": { |
|
"normal": { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
|
[{ |
|
offset: 0, |
|
color: "rgba(89,211,255,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(23,237,194,1)" |
|
} |
|
], |
|
false |
|
), |
|
} |
|
} |
|
}, { |
|
"name": "", |
|
"value": "84", |
|
"symbolPosition": "end", |
|
"itemStyle": { |
|
"normal": { |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, |
|
[{ |
|
offset: 0, |
|
color: "rgba(89,211,255,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(23,237,194,1)" |
|
} |
|
], |
|
false |
|
), |
|
} |
|
} |
|
}] |
|
}, |
|
|
|
{ |
|
name: '2019', |
|
type: 'bar', |
|
barWidth: 100, |
|
barGap: '-100%', |
|
stack: '广告', |
|
itemStyle: { |
|
// barBorderRadius: 20, |
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
offset: 1, |
|
color: "rgba(0,255,100,0.5)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(0,255,100,0.5)" |
|
} |
|
]) |
|
}, |
|
//上班截开始 |
|
data: [{ |
|
"name": "关井数", |
|
"value": "220", |
|
"trueVal": "22", |
|
"itemStyle": { |
|
"normal": { |
|
"color": { |
|
"x": 0, |
|
"y": 0, |
|
"x2": 0, |
|
"y2": 1, |
|
"type": "linear", |
|
"global": false, |
|
"colorStops": [{ |
|
offset: 0, |
|
color: "rgba(54,127,223,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(94,162,254,1)" |
|
}], |
|
} |
|
} |
|
} |
|
}, { |
|
"name": "开井数", |
|
"value": "182", |
|
"trueVal": "18", |
|
"itemStyle": { |
|
"normal": { |
|
"color": { |
|
"x": 0, |
|
"y": 0, |
|
"x2": 0, |
|
"y2": 1, |
|
"type": "linear", |
|
"global": false, |
|
"colorStops": [{ |
|
offset: 0, |
|
color: "rgba(54,127,223,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(94,162,254,1)" |
|
}], |
|
} |
|
} |
|
} |
|
}, { |
|
"name": "不在线", |
|
"value": "191", |
|
"trueVal": "19", |
|
"itemStyle": { |
|
"normal": { |
|
"color": { |
|
"x": 0, |
|
"y": 0, |
|
"x2": 0, |
|
"y2": 1, |
|
"type": "linear", |
|
"global": false, |
|
"colorStops": [{ |
|
offset: 0, |
|
color: "rgba(54,127,223,1)" |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(94,162,254,1)" |
|
}], |
|
} |
|
} |
|
} |
|
} |
|
|
|
] |
|
} |
|
|
|
|
|
] |
|
} |
|
; |
|
myChart.setOption(option); |
|
}, |
|
initEcharts2() { |
|
var myChart = echarts.init(document.getElementById("echarts2")); |
|
let index = 0; |
|
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'] |
|
function fun() { |
|
var timer = setInterval(function () { |
|
myChart.dispatchAction({ |
|
type: 'hideTip', |
|
seriesIndex: 0, |
|
dataIndex: index |
|
}); |
|
// 显示提示框 |
|
myChart.dispatchAction({ |
|
type: 'showTip', |
|
seriesIndex: 0, |
|
dataIndex: index |
|
}); |
|
// 取消高亮指定的数据图形 |
|
myChart.dispatchAction({ |
|
type: 'downplay', |
|
seriesIndex: 0, |
|
dataIndex: index == 0 ? 5 : index - 1 |
|
}); |
|
myChart.dispatchAction({ |
|
type: 'highlight', |
|
seriesIndex: 0, |
|
dataIndex: index |
|
}); |
|
index++; |
|
if (index > 5) { |
|
index = 0; |
|
} |
|
}, 3000) |
|
} |
|
|
|
fun() |
|
setTimeout(function () { fun() }, 5000); |
|
let option = { |
|
title: { |
|
text: '申请价值', |
|
x: 'center', |
|
y: 'center', |
|
textStyle: { |
|
fontSize: 20 |
|
} |
|
}, |
|
tooltip: { |
|
trigger: 'item' |
|
}, |
|
series: [{ |
|
type: 'pie', |
|
center: ['50%', '50%'], |
|
radius: ['24%', '45%'], |
|
clockwise: true, |
|
avoidLabelOverlap: true, |
|
hoverOffset: 15, |
|
itemStyle: { |
|
normal: { |
|
color: function (params) { |
|
return colorList[params.dataIndex] |
|
} |
|
} |
|
}, |
|
label: { |
|
show: true, |
|
position: 'outside', |
|
formatter: '{a|{b}：{d}%}\n{hr|}', |
|
rich: { |
|
hr: { |
|
backgroundColor: 't', |
|
borderRadius: 3, |
|
width: 3, |
|
height: 3, |
|
padding: [3, 3, 0, -12] |
|
}, |
|
a: { |
|
padding: [-30, 15, -20, 15] |
|
} |
|
} |
|
}, |
|
labelLine: { |
|
normal: { |
|
length: 20, |
|
length2: 30, |
|
lineStyle: { |
|
width: 1 |
|
} |
|
} |
|
}, |
|
data: [{ |
|
'name': '全部', |
|
'value': 1.45 |
|
}, { |
|
'name': '易耗品', |
|
'value': 2.93 |
|
}, { |
|
'name': '耐用品', |
|
'value': 3.15 |
|
}, |
|
], |
|
}] |
|
}; |
|
myChart.setOption(option); |
|
}, |
|
initEcharts3() { |
|
var myChart = echarts.init(document.getElementById("echarts3")); |
|
var data = ["物品1", "物品2", "物品3", "物品4"] |
|
|
|
let option = { |
|
backgroundColor: '#fff', |
|
color: [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|
offset: 0, |
|
color: "#13ace8" |
|
}, { |
|
offset: 1, |
|
color: "#0167e8" |
|
}], false)], |
|
grid: { |
|
left: '8%', |
|
right: '10%', |
|
top: '12%', |
|
bottom: '18%', |
|
containLabel: true |
|
}, |
|
tooltip: { |
|
show: "true", |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow' |
|
} |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
|
|
axisTick: { |
|
show: false |
|
}, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#ccc', |
|
} |
|
}, |
|
axisLabel: { |
|
show: true, |
|
color: "#ccc", |
|
fontSize: 18 |
|
}, |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
type: 'dashed' |
|
} |
|
}, |
|
|
|
|
|
}, |
|
xAxis: [{ |
|
axisTick: { |
|
show: false |
|
}, |
|
|
|
type: 'category', |
|
axisLine: { |
|
show: false |
|
}, |
|
axisLabel: { |
|
show: true, |
|
color: '#ccc', |
|
interval: 0, |
|
formatter: function (value) { |
|
return value.split("").join("\n"); |
|
} |
|
}, |
|
|
|
|
|
splitLine: { |
|
show: false, |
|
lineStyle: { |
|
type: 'dashed' |
|
} |
|
}, |
|
data: data, |
|
}], |
|
series: [{ |
|
name: '违规', |
|
type: 'bar', |
|
barWidth: 15, |
|
label: { |
|
normal: { |
|
show: false, |
|
position: 'right', |
|
textStyle: { |
|
color: "#ccc", |
|
fontSize: 14 |
|
} |
|
} |
|
}, |
|
itemStyle: { |
|
normal: { |
|
// barBorderRadius: [0, 0, 5, 0], |
|
} |
|
}, |
|
data: [50, 60, 70, 80] |
|
}] |
|
}; |
|
myChart.setOption(option); |
|
}, |
|
initEcharts4(xdata, ydata) { |
|
var myChart = echarts.init(document.getElementById("echarts4")); |
|
// var data = ["2022年", "2023年", "2024年", "2025年"] |
|
var data = xdata |
|
|
|
let option = { |
|
backgroundColor: '#fff', |
|
color: [new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ |
|
offset: 0, |
|
color: "#13ace8" |
|
}, { |
|
offset: 1, |
|
color: "#0167e8" |
|
}], false)], |
|
grid: { |
|
left: '8%', |
|
right: '10%', |
|
top: '12%', |
|
bottom: '18%', |
|
containLabel: true |
|
}, |
|
tooltip: { |
|
show: "true", |
|
trigger: 'axis', |
|
axisPointer: { |
|
type: 'shadow' |
|
} |
|
}, |
|
yAxis: { |
|
type: 'value', |
|
|
|
axisTick: { |
|
show: false |
|
}, |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: '#ccc', |
|
} |
|
}, |
|
axisLabel: { |
|
show: true, |
|
color: "#ccc", |
|
fontSize: 18 |
|
}, |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
type: 'dashed' |
|
} |
|
}, |
|
|
|
|
|
}, |
|
xAxis: [{ |
|
axisTick: { |
|
show: false |
|
}, |
|
|
|
type: 'category', |
|
axisLine: { |
|
show: false |
|
}, |
|
axisLabel: { |
|
show: true, |
|
color: '#ccc', |
|
interval: 0, |
|
formatter: function (value) { |
|
return value.split("").join("\n"); |
|
} |
|
}, |
|
|
|
|
|
splitLine: { |
|
show: false, |
|
lineStyle: { |
|
type: 'dashed' |
|
} |
|
}, |
|
data: data, |
|
}], |
|
series: [{ |
|
name: '价值', |
|
type: 'bar', |
|
barWidth: 15, |
|
label: { |
|
normal: { |
|
show: false, |
|
position: 'right', |
|
textStyle: { |
|
color: "#ccc", |
|
fontSize: 14 |
|
} |
|
} |
|
}, |
|
itemStyle: { |
|
normal: { |
|
// barBorderRadius: [0, 0, 5, 0], |
|
} |
|
}, |
|
data: ydata |
|
}] |
|
}; |
|
myChart.setOption(option); |
|
}, |
|
|
|
onSubmit() { |
|
this.$message({ |
|
message: '操作成功', |
|
type: 'success' |
|
}); |
|
}, |
|
changeSelect(value) { |
|
if (this.value2 == '年度') { |
|
this.initEcharts4(["2022年", "2023年", "2024年", "2025年"], [23, 78, 87, 90]) |
|
} |
|
if (this.value2 == '季度') { |
|
this.initEcharts4(["一季度", "二季度", "三季度", "四季度"], [23, 28, 97, 40]) |
|
} |
|
if (this.value2 == '月份') { |
|
this.initEcharts4(["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], [23, 28, 97, 40, 32, 56, 78, 69, 45, 32, 98, 84]) |
|
} |
|
} |
|
}, |
|
|
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
::v-deep .el-card__body { |
|
// background: #000; |
|
} |
|
|
|
.title { |
|
height: 50px; |
|
line-height: 50px; |
|
} |
|
</style>
|
|
|