feat: 攀枝花煤业智慧矿山ETM设备知识管理平台项目 首页
This commit is contained in:
parent
30c9c7b591
commit
72f7fa63b8
@ -24,7 +24,7 @@ export const initChartStatic = (id = '', option = {}) => {
|
||||
* @param {object} Options
|
||||
* @returns
|
||||
*/
|
||||
export const generateBaseOptions = (Options = {}) => {
|
||||
export const generateBaseOptions = (Options = {}, dark = true) => {
|
||||
return merge({
|
||||
title: {
|
||||
text: "",
|
||||
@ -33,7 +33,7 @@ export const generateBaseOptions = (Options = {}) => {
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: dark ? '#fff' : '#000'
|
||||
},
|
||||
color: [
|
||||
'#306fff',
|
||||
@ -91,7 +91,7 @@ export const generateBaseOptions = (Options = {}) => {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
color: dark ? '#ffffff66' : '#00000026'
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -119,7 +119,7 @@ export const generateBaseOptions = (Options = {}) => {
|
||||
itemHeight: 10, // 图例图形高度
|
||||
borderRadius: 10,
|
||||
textStyle: {
|
||||
color: "#d7d8db",
|
||||
color: dark ? '#d7d8db' : '#00000026',
|
||||
fontSize: 9,
|
||||
},
|
||||
lineStyle: {
|
||||
|
||||
BIN
god-ui/src/views/pzhmyManage/home/assets/top1.png
Normal file
BIN
god-ui/src/views/pzhmyManage/home/assets/top1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
god-ui/src/views/pzhmyManage/home/assets/top2.png
Normal file
BIN
god-ui/src/views/pzhmyManage/home/assets/top2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
god-ui/src/views/pzhmyManage/home/assets/top3.png
Normal file
BIN
god-ui/src/views/pzhmyManage/home/assets/top3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
god-ui/src/views/pzhmyManage/home/assets/top4.png
Normal file
BIN
god-ui/src/views/pzhmyManage/home/assets/top4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
god-ui/src/views/pzhmyManage/home/assets/top5.png
Normal file
BIN
god-ui/src/views/pzhmyManage/home/assets/top5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
407
god-ui/src/views/pzhmyManage/home/index.vue
Normal file
407
god-ui/src/views/pzhmyManage/home/index.vue
Normal file
@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="app-container main-outer-wrapper">
|
||||
<div class="top-card-wrapper">
|
||||
<div
|
||||
class="top-card-item-extra basic-shadow"
|
||||
v-for="(item, index) in topCardList"
|
||||
:key="index"
|
||||
>
|
||||
<div :class="[
|
||||
'top-card-item-icon',
|
||||
'top-icon-' + (index + 1)
|
||||
]"></div>
|
||||
<div class="top-card-item-inner">
|
||||
<div class="top-card-inner-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="top-card-inner-value">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid-main-wrapper"
|
||||
>
|
||||
<div class="grid-item-wrapper basic-shadow">
|
||||
<div class="grid-item-title">设备资料查询</div>
|
||||
<div class="grid-item-content" id="chart1"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper basic-shadow" style="grid-column: span 2;">
|
||||
<div class="grid-item-title">作业质量管理</div>
|
||||
<div class="grid-item-content work-equ-wrapper">
|
||||
<div class="work-equ-item" style="background-color: #25252512;">
|
||||
<div class="num-wrapper">序号</div>
|
||||
<div class="device-wrapper">设备名</div>
|
||||
<div class="info-wrapper">SOP内容</div>
|
||||
<div class="time-wrapper">时间</div>
|
||||
</div>
|
||||
<div
|
||||
class="work-equ-item"
|
||||
v-for="(item, index) in workDataList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="num-wrapper">{{ (index + 1) }}</div>
|
||||
<div class="device-wrapper">{{ item.device }}</div>
|
||||
<div class="info-wrapper">{{ item.info }}</div>
|
||||
<div class="time-wrapper">{{ item.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid-main-wrapper"
|
||||
style="grid-template-columns: 1fr 1fr;"
|
||||
>
|
||||
<div class="grid-item-wrapper basic-shadow">
|
||||
<div class="grid-item-title">作业工时管理</div>
|
||||
<div class="grid-item-content" id="chart2"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper basic-shadow">
|
||||
<div class="grid-item-title">当月培训统计</div>
|
||||
<div class="grid-item-content" id="chart3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
generatePieOptions,
|
||||
generateBaseOptions,
|
||||
initChartStatic
|
||||
} from '@/utils/bigscreenTool/index.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const add0 = (val) => {
|
||||
const numVal = parseInt(val)
|
||||
return numVal < 10 ? ('0' + numVal) : numVal.toString()
|
||||
}
|
||||
const formatter = (offset = 0, date = new Date()) => {
|
||||
const d = new Date(date.getTime() - offset)
|
||||
return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(d.getDate())} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`
|
||||
}
|
||||
return {
|
||||
topCardList: [
|
||||
{
|
||||
title: '设备总数量',
|
||||
value: '286台'
|
||||
},
|
||||
{
|
||||
title: '在线设备',
|
||||
value: '251台'
|
||||
},
|
||||
{
|
||||
title: '工作中设备',
|
||||
value: '189台'
|
||||
},
|
||||
{
|
||||
title: '人员培训',
|
||||
value: '25次'
|
||||
},
|
||||
{
|
||||
title: 'SOP文件',
|
||||
value: '56个'
|
||||
},
|
||||
],
|
||||
workDataList: [
|
||||
{
|
||||
device: '运皮带',
|
||||
info: '检查电机和减速箱，调整皮带张力，清理表面灰尘，检查输送带磨损情况',
|
||||
time: formatter(115454812)
|
||||
},
|
||||
{
|
||||
device: '采煤机',
|
||||
info: '检查液压系统，更换磨损零件，清洗设备表面灰尘',
|
||||
time: formatter(125454812)
|
||||
},
|
||||
{
|
||||
device: '水泵',
|
||||
info: '检查电机和水泵，检查密封圈和轴承，清理表面灰尘，检查泵的磨损情况',
|
||||
time: formatter(235454812)
|
||||
},
|
||||
{
|
||||
device: '掘进机',
|
||||
info: '检查液压系统，更换磨损零件，清理表面灰尘，检查切割头磨损情况',
|
||||
time: formatter(245454812)
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart1();
|
||||
this.initChart2();
|
||||
this.initChart3();
|
||||
},
|
||||
methods: {
|
||||
initChart1() {
|
||||
initChartStatic(
|
||||
"chart1",
|
||||
generateBaseOptions({
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['投资部', '生产部', '后勤部', '运营部'],
|
||||
},
|
||||
legend: {
|
||||
top: "bottom",
|
||||
left: "center",
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
max: 100
|
||||
},
|
||||
color: ["#609dd5", "#ec7d31"],
|
||||
series: [
|
||||
{
|
||||
data: [85, 98, 62, 54],
|
||||
type: "bar",
|
||||
barWidth: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#00000074",
|
||||
fontSize: 13,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
bottom: '17%',
|
||||
top: '11%',
|
||||
}
|
||||
}, false),
|
||||
);
|
||||
},
|
||||
initChart2() {
|
||||
initChartStatic(
|
||||
"chart2",
|
||||
generateBaseOptions({
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
legend: {
|
||||
x: "right", // 水平安放位置
|
||||
y: "top", // 垂直安放位置
|
||||
textStyle: {
|
||||
color: '#252525'
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
data: ['采矿设备', '运输设备', '通风设备', '水利设备'],
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
max: 20
|
||||
},
|
||||
color: ["#e3935d", "#7fcf52"],
|
||||
series: [
|
||||
{
|
||||
name: '实际工时',
|
||||
data: [12, 7.2, 8.5, 4.5],
|
||||
type: "bar",
|
||||
barWidth: 25,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#00000074",
|
||||
fontSize: 13,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '标准工时',
|
||||
data: [15, 8, 10, 5],
|
||||
type: "line",
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#00000074",
|
||||
fontSize: 13,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
bottom: '15%',
|
||||
top: '11%',
|
||||
}
|
||||
}, false)
|
||||
);
|
||||
},
|
||||
initChart3() {
|
||||
initChartStatic('chart3', generatePieOptions({
|
||||
color: [
|
||||
'#61a5e8',
|
||||
'#7ecf51',
|
||||
'#eecb5f',
|
||||
'#e3935d',
|
||||
'#e16757',
|
||||
'#9c9071',
|
||||
'#3380a5'
|
||||
],
|
||||
legend: {
|
||||
// 图例配置
|
||||
orient: "vertical",
|
||||
right: 50,
|
||||
itemGap: 10,
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#252525'
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "数据详情",
|
||||
type: "pie",
|
||||
radius: ["36%", "60%"],
|
||||
center: ["37%", "50%"],
|
||||
data: [
|
||||
{
|
||||
name: '消防安全',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: '人员疏散',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
name: '自动化控制',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
name: '定位设备使用',
|
||||
value: 1
|
||||
},
|
||||
],
|
||||
label: {
|
||||
formatter: "{c|{c}} , {per|{d}%}",
|
||||
rich: {
|
||||
c: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
per: {
|
||||
color: "#252525",
|
||||
fontSize: 12,
|
||||
lineHeight: 33,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
}))
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import url(../../../styles/mainPage.scss);
|
||||
.basic-shadow {
|
||||
border-radius: 8px;
|
||||
box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
|
||||
}
|
||||
.top-card-wrapper {
|
||||
grid-template-columns: repeat(5, 1fr) !important;
|
||||
gap: 16px !important;
|
||||
.top-card-item-extra {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
background-color: white;
|
||||
padding: 1rem 0;
|
||||
|
||||
.top-card-item-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.top-card-item-inner {
|
||||
width: 6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.top-card-inner-title {
|
||||
font-size: .9rem;
|
||||
}
|
||||
.top-card-inner-value {
|
||||
font-size: 1.2rem;
|
||||
font-family: 'TitleFont';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-main-wrapper {
|
||||
margin-top: 16px;
|
||||
gap: 16px !important;
|
||||
.grid-item-title {
|
||||
font-family: 'TitleFont';
|
||||
font-weight: 500 !important;
|
||||
color: #25252525;
|
||||
}
|
||||
}
|
||||
|
||||
.work-equ-wrapper {
|
||||
padding: 10px;
|
||||
.work-equ-item {
|
||||
display: flex;
|
||||
align-items:flex-start;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #25252525;
|
||||
padding: .6rem 0;
|
||||
.num-wrapper {
|
||||
width: 2rem;
|
||||
font-family: 'TitleFont';
|
||||
text-align: center;
|
||||
}
|
||||
.device-wrapper {
|
||||
width: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.info-wrapper {
|
||||
width: calc(100% - 19rem);
|
||||
padding: .5rem;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.time-wrapper {
|
||||
width: 12rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#chart1, #chart2, #chart3 {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
.top-icon-#{$i} {
|
||||
background-image: url(./assets/top#{$i}.png);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user