feat: 工程机械数字服务平台登录页和数据分析
This commit is contained in:
parent
4cb0f914bf
commit
5abfb48715
BIN
god-ui/public/images/gongcheng-bg.png
Normal file
BIN
god-ui/public/images/gongcheng-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 502 KiB |
@ -64,6 +64,10 @@ export default {
|
||||
this.title = '石坪桥街道老旧小区改造提升平台'
|
||||
document.title = '石坪桥街道老旧小区改造提升平台'
|
||||
break;
|
||||
case '9210':
|
||||
this.title = '工程机械数字服务平台'
|
||||
document.title = '工程机械数字服务平台'
|
||||
break;
|
||||
default:
|
||||
this.title = ''
|
||||
document.title = ''
|
||||
|
||||
709
god-ui/src/views/dataAnalysis/anal/index.vue
Normal file
709
god-ui/src/views/dataAnalysis/anal/index.vue
Normal file
@ -0,0 +1,709 @@
|
||||
<template>
|
||||
<div class="app-container main-outer-wrapper">
|
||||
<div class="grid-main-wrapper">
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">设备类型分布</div>
|
||||
<div class="grid-item-content" id="chart1"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">设备状态</div>
|
||||
<div class="grid-item-content" id="chart2"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">设备归属</div>
|
||||
<div class="grid-item-content" id="chart3"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">设备工作时长(h)</div>
|
||||
<div class="grid-item-content" id="chart4"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">各区域设备指数</div>
|
||||
<div class="grid-item-content" id="chart5"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">日均油耗(L)</div>
|
||||
<div class="grid-item-content" id="chart6"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">日均开工率</div>
|
||||
<div class="grid-item-content" id="chart7"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">设备平均使用效率</div>
|
||||
<div class="grid-item-content" id="chart8"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">今日工作设备</div>
|
||||
<div class="grid-item-content">
|
||||
<el-table :data="todayDevice" height="270px">
|
||||
<el-table-column label="设备编号" align="center" prop="num" />
|
||||
<el-table-column label="名称" align="center" prop="name" />
|
||||
<el-table-column label="设备类型" align="center" prop="type" />
|
||||
<el-table-column label="设备状态" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #62cfa2;">{{ scope.row.status }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
generateBaseOptions,
|
||||
generatePieOptions,
|
||||
initChartStatic
|
||||
} from '@/utils/bigscreenTool/index.js'
|
||||
import { merge } from 'lodash'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
todayDevice: [
|
||||
{
|
||||
num: 'MED09011',
|
||||
name: '推土机911',
|
||||
type: '铲土运输',
|
||||
status: '在线'
|
||||
},
|
||||
{
|
||||
num: 'MED09012',
|
||||
name: '推土机912',
|
||||
type: '铲土运输',
|
||||
status: '在线'
|
||||
},
|
||||
{
|
||||
num: 'YSQ75031',
|
||||
name: '夯实机031',
|
||||
type: '压实机器',
|
||||
status: '在线'
|
||||
},
|
||||
{
|
||||
num: 'WJJ40710',
|
||||
name: '轮胎式挖掘机710',
|
||||
type: '挖掘机械',
|
||||
status: '在线'
|
||||
},
|
||||
{
|
||||
num: 'QZJ007810',
|
||||
name: '塔式起重机810',
|
||||
type: '起重机械',
|
||||
status: '在线'
|
||||
},
|
||||
{
|
||||
num: 'QZJ007945',
|
||||
name: '塔式起重机945',
|
||||
type: '起重机械',
|
||||
status: '在线'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart1();
|
||||
this.initChart2();
|
||||
this.initChart3();
|
||||
this.initChart4();
|
||||
this.initChart5();
|
||||
this.initChart6();
|
||||
this.initChart7();
|
||||
this.initChart8();
|
||||
},
|
||||
methods: {
|
||||
getxAxisData(length = 7) {
|
||||
const baseDate = new Date(), series = [];
|
||||
for (let i = 0; i < length; i++) {
|
||||
const middleDate = new Date();
|
||||
middleDate.setTime(baseDate.getTime() - i * 1000 * 60 * 60 * 24)
|
||||
series.unshift(`${middleDate.getMonth()}-${middleDate.getDate()}`)
|
||||
}
|
||||
return series
|
||||
},
|
||||
initChart1() {
|
||||
initChartStatic('chart1', this.currentPieOption({
|
||||
color: [
|
||||
'#5b9ad4',
|
||||
'#ec7d31',
|
||||
'#a4a4a4',
|
||||
'#febf00',
|
||||
'#4472c3',
|
||||
],
|
||||
legend: {
|
||||
// 图例配置
|
||||
orient: "vertical",
|
||||
right: 20,
|
||||
itemGap: 20,
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#252525'
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "数据详情",
|
||||
type: "pie",
|
||||
radius: ["36%", "60%"],
|
||||
center: ["37%", "50%"],
|
||||
data: [
|
||||
{
|
||||
name: '挖掘机',
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
name: '铲土机械',
|
||||
value: 11
|
||||
},
|
||||
{
|
||||
name: '起重机械',
|
||||
value: 8
|
||||
},
|
||||
{
|
||||
name: '压实机械',
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
name: '桩工机械',
|
||||
value: 22
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
value: 3 * 3
|
||||
},
|
||||
],
|
||||
label: {
|
||||
formatter: "{c|{c}} , {per|{d}%}",
|
||||
rich: {
|
||||
c: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
per: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
}));
|
||||
},
|
||||
initChart2() {
|
||||
initChartStatic('chart2', this.currentPieOption({
|
||||
color: [
|
||||
'#5b9ad4',
|
||||
'#ec7d31',
|
||||
'#a4a4a4',
|
||||
'#febf00',
|
||||
'#4472c3',
|
||||
],
|
||||
legend: {
|
||||
// 图例配置
|
||||
orient: "vertical",
|
||||
right: 20,
|
||||
itemGap: 20,
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#252525'
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "数据详情",
|
||||
type: "pie",
|
||||
radius: ["0%", "60%"],
|
||||
center: ["37%", "50%"],
|
||||
data: [
|
||||
{
|
||||
name: '在线',
|
||||
value: 96
|
||||
},
|
||||
{
|
||||
name: '离线',
|
||||
value: 4
|
||||
},
|
||||
],
|
||||
label: {
|
||||
formatter: "{per|{d}%}",
|
||||
rich: {
|
||||
c: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
per: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
}));
|
||||
},
|
||||
initChart3() {
|
||||
initChartStatic('chart3', this.currentBaseOption({
|
||||
color: ['#1b7080'],
|
||||
yAxis: {
|
||||
data: ['九龙坡工地', '渝中区工地', '江北区工地'],
|
||||
name: "",
|
||||
nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
|
||||
nameTextStyle: {
|
||||
// 坐标轴名称的样式
|
||||
color: "#252525D0",
|
||||
},
|
||||
nameGap: 15, // 坐标轴名称与轴线的距离
|
||||
inverse: false, // 是否反向坐标轴
|
||||
axisLabel: {
|
||||
// 刻度标签的样式
|
||||
hideOverlap: true, // 隐藏重叠的标签
|
||||
color: "#252525D0",
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
position: "bottom",
|
||||
offset: 0, // 相对正常位置的偏移
|
||||
type: "category", // 类目轴，也可以是time， value， 对数轴log
|
||||
},
|
||||
xAxis: {
|
||||
name: '',
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
// 坐标轴名称的样式
|
||||
color: "#252525D0",
|
||||
},
|
||||
axisLabel: {
|
||||
// 刻度标签的样式
|
||||
hideOverlap: true, // 隐藏重叠的标签
|
||||
color: "#252525D0",
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
minorTick: {
|
||||
// 坐标轴刻度线相关配置
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
// 坐标轴在grid区域中的分割线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#25252525'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [21, 18, 29],
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: '{c}'
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
left: '14%',
|
||||
top: '8%',
|
||||
right: '8%',
|
||||
bottom: '13%'
|
||||
}
|
||||
}))
|
||||
},
|
||||
initChart4() {
|
||||
initChartStatic('chart4', this.currentBaseOption({
|
||||
xAxis: {
|
||||
data: this.getxAxisData(7),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
itemHeight: 10,
|
||||
itemGap: 4,
|
||||
},
|
||||
yAxis: {
|
||||
name: '',
|
||||
splitLine: {
|
||||
// 坐标轴在grid区域中的分割线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '推土机901',
|
||||
data: [8, 6, 9, 11, 5, 6, 9]
|
||||
},
|
||||
{
|
||||
name: '推土机902',
|
||||
data: [4, 5, 8, 6, 2, 11, 5]
|
||||
},
|
||||
{
|
||||
name: '塔式起重机910',
|
||||
data: [6, 7, 4, 9, 11, 7, 10]
|
||||
},
|
||||
{
|
||||
name: '塔式起重机911',
|
||||
data: [2, 8, 10, 4, 6, 7, 5]
|
||||
},
|
||||
{
|
||||
name: '夯实机031',
|
||||
data: [1, 5, 4, 8, 6, 7, 9]
|
||||
},
|
||||
{
|
||||
name: '轮胎式挖掘机710',
|
||||
data: [3, 8, 9, 6, 7, 4, 2]
|
||||
},
|
||||
].map(item => ({
|
||||
...item,
|
||||
type: 'line',
|
||||
smooth: true
|
||||
})),
|
||||
grid: {
|
||||
bottom: '23%'
|
||||
}
|
||||
}));
|
||||
},
|
||||
initChart5() {
|
||||
initChartStatic('chart5', this.currentBaseOption({
|
||||
xAxis: {
|
||||
data: ['挖掘机', '铲土机械', '起重机械', '压实机械', '桩工机械'],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '',
|
||||
splitLine: {
|
||||
// 坐标轴在grid区域中的分割线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '九龙坡工地',
|
||||
data: [7, 3, 2, 5, 8],
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
stack: 'all'
|
||||
},
|
||||
{
|
||||
name: '渝中区工地',
|
||||
data: [3, 4, 3, 4, 9],
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
stack: 'all'
|
||||
},
|
||||
{
|
||||
name: '江北区工地',
|
||||
data: [5, 4, 3, 3, 5],
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
stack: 'all'
|
||||
},
|
||||
].map(item =>({
|
||||
...item,
|
||||
label: {
|
||||
show: true,
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
position: ['50%', '50%'],
|
||||
}
|
||||
})),
|
||||
grid: {
|
||||
bottom: '20%'
|
||||
}
|
||||
}));
|
||||
},
|
||||
initChart6() {
|
||||
initChartStatic('chart6', this.currentBaseOption({
|
||||
color: ['#4472c3',],
|
||||
xAxis: {
|
||||
data: this.getxAxisData(6),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: 'L',
|
||||
max: 300,
|
||||
splitLine: {
|
||||
// 坐标轴在grid区域中的分割线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '挖掘机',
|
||||
data: [23.3, 22.7, 23.6, 24.1, 22.8, 23.0, 22.4],
|
||||
type: 'bar',
|
||||
stack: 'all',
|
||||
},
|
||||
{
|
||||
name: '铲土机械',
|
||||
data: [55.6, 56.8, 60.0, 61.2, 57.0, 58.4, 59.0],
|
||||
type: 'bar',
|
||||
stack: 'all',
|
||||
},
|
||||
{
|
||||
name: '起重机械',
|
||||
data: [63.0, 60.5, 55.0, 57.0, 58.5, 61.3, 62.0],
|
||||
type: 'bar',
|
||||
stack: 'all',
|
||||
},
|
||||
{
|
||||
name: '压实机械',
|
||||
data: [44.0, 38.0, 41.0, 36.0, 32.0, 37.0, 42.0],
|
||||
type: 'bar',
|
||||
stack: 'all',
|
||||
},
|
||||
{
|
||||
name: '桩工机械',
|
||||
data: [90.0, 88.0, 92.0, 95.0, 89.0, 84.0, 87.0],
|
||||
type: 'bar',
|
||||
stack: 'all',
|
||||
},
|
||||
].map(item =>({
|
||||
...item,
|
||||
label: {
|
||||
show: true,
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
position: ['50%', '50%'],
|
||||
}
|
||||
})),
|
||||
grid: {
|
||||
bottom: '20%'
|
||||
}
|
||||
}));
|
||||
},
|
||||
initChart7() {
|
||||
initChartStatic('chart7', this.currentBaseOption({
|
||||
xAxis: {
|
||||
data: this.getxAxisData(6),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 120,
|
||||
splitLine: {
|
||||
// 坐标轴在grid区域中的分割线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '九龙坡工地',
|
||||
data: [97, 82, 77, 69, 66, 71, 73],
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name: '渝中区工地',
|
||||
data: [86, 91, 82, 79, 76, 81, 70],
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name: '江北区工地',
|
||||
data: [79, 67, 81, 70, 84, 82, 72],
|
||||
type: 'line',
|
||||
},
|
||||
].map(item => ({
|
||||
...item,
|
||||
smooth: true
|
||||
})),
|
||||
}));
|
||||
},
|
||||
initChart8() {
|
||||
initChartStatic('chart8', this.currentBaseOption({
|
||||
xAxis: {
|
||||
data: this.getxAxisData(7),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
max: 150,
|
||||
splitLine: {
|
||||
// 坐标轴在grid区域中的分割线
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#25252545'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '挖掘机',
|
||||
data: [60, 68, 71, 84, 92, 81, 99],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: '铲土机械',
|
||||
data: [73, 66, 82, 94, 67, 91, 67],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: '起重机械',
|
||||
data: [59, 61, 84, 66, 97, 83, 64],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: '压实机械',
|
||||
data: [92, 57, 84, 67, 84, 69, 88],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: '桩工机械',
|
||||
data: [86, 67, 97, 73, 80, 90, 74],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
},
|
||||
],
|
||||
}));
|
||||
},
|
||||
currentBaseOption(Options = {}) {
|
||||
return merge(merge(
|
||||
generateBaseOptions(),
|
||||
{
|
||||
legend: {
|
||||
// 图例配置
|
||||
orient: "horizontal",
|
||||
itemGap: 20,
|
||||
top: 'bottom',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#252525'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '8%',
|
||||
top: '11%',
|
||||
right: '2%',
|
||||
bottom: '20%'
|
||||
}
|
||||
}
|
||||
), Options)
|
||||
},
|
||||
currentPieOption(Options = {}) {
|
||||
return merge(merge(
|
||||
generatePieOptions(),
|
||||
{
|
||||
legend: {
|
||||
itemGap: 1,
|
||||
padding: [0,0,0,0]
|
||||
}
|
||||
}
|
||||
), Options)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import url(../../../assets/styles/mainPage.scss);
|
||||
.grid-main-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 16px !important;
|
||||
}
|
||||
.grid-item-wrapper {
|
||||
border-radius: 6px;
|
||||
box-shadow: 2px 2px 3px #25252534;
|
||||
.grid-item-title {
|
||||
font-family: 'TitleFont';
|
||||
font-weight: 500 !important;
|
||||
color: #252525d2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#chart1, #chart2, #chart3 {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
#chart4, #chart5, #chart6 {
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
#chart7, #chart8 {
|
||||
height: 270px;
|
||||
}
|
||||
</style>
|
||||
@ -152,7 +152,12 @@ export default {
|
||||
document.title = '石坪桥街道老旧小区改造提升平台'
|
||||
loginDom.style.backgroundImage = 'url(/images/spq.png)'
|
||||
this.redirect = '/index'
|
||||
break
|
||||
break;
|
||||
case '9210':
|
||||
document.title = '工程机械数字服务平台'
|
||||
loginDom.style.backgroundImage = 'url(/images/gongcheng-bg.png)'
|
||||
this.redirect = '/index'
|
||||
break;
|
||||
default:
|
||||
document.title = ''
|
||||
loginDom.style.backgroundImage = 'url(/images/gangyin-bg.png)'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user