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 = '石坪桥街道老旧小区改造提升平台'
|
this.title = '石坪桥街道老旧小区改造提升平台'
|
||||||
document.title = '石坪桥街道老旧小区改造提升平台'
|
document.title = '石坪桥街道老旧小区改造提升平台'
|
||||||
break;
|
break;
|
||||||
|
case '9210':
|
||||||
|
this.title = '工程机械数字服务平台'
|
||||||
|
document.title = '工程机械数字服务平台'
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
this.title = ''
|
this.title = ''
|
||||||
document.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 = '石坪桥街道老旧小区改造提升平台'
|
document.title = '石坪桥街道老旧小区改造提升平台'
|
||||||
loginDom.style.backgroundImage = 'url(/images/spq.png)'
|
loginDom.style.backgroundImage = 'url(/images/spq.png)'
|
||||||
this.redirect = '/index'
|
this.redirect = '/index'
|
||||||
break
|
break;
|
||||||
|
case '9210':
|
||||||
|
document.title = '工程机械数字服务平台'
|
||||||
|
loginDom.style.backgroundImage = 'url(/images/gongcheng-bg.png)'
|
||||||
|
this.redirect = '/index'
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
document.title = ''
|
document.title = ''
|
||||||
loginDom.style.backgroundImage = 'url(/images/gangyin-bg.png)'
|
loginDom.style.backgroundImage = 'url(/images/gangyin-bg.png)'
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user