feat:重庆海螺水泥有限公司扁鹊设备监测与健康管理平台建设 首页研发
This commit is contained in:
parent
ce5b36b0b3
commit
2866c4d8af
@ -213,7 +213,7 @@ export default {
|
||||
"chart2",
|
||||
generateBaseOptions({
|
||||
xAxis: {
|
||||
data:xAxisData,
|
||||
data:xAxisData.reverse(),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
@ -319,7 +319,7 @@ export default {
|
||||
}
|
||||
initChartStatic('chart4', generateBaseOptions({
|
||||
xAxis: {
|
||||
data: xAxisData
|
||||
data: xAxisData.reverse()
|
||||
},
|
||||
legend: {
|
||||
// 图例配置
|
||||
|
||||
BIN
god-ui/src/views/hlsnManage/home/assets/img1.png
Normal file
BIN
god-ui/src/views/hlsnManage/home/assets/img1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
god-ui/src/views/hlsnManage/home/assets/img2.png
Normal file
BIN
god-ui/src/views/hlsnManage/home/assets/img2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
god-ui/src/views/hlsnManage/home/assets/top1.png
Normal file
BIN
god-ui/src/views/hlsnManage/home/assets/top1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 836 B |
BIN
god-ui/src/views/hlsnManage/home/assets/top2.png
Normal file
BIN
god-ui/src/views/hlsnManage/home/assets/top2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
god-ui/src/views/hlsnManage/home/assets/top3.png
Normal file
BIN
god-ui/src/views/hlsnManage/home/assets/top3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
god-ui/src/views/hlsnManage/home/assets/top4.png
Normal file
BIN
god-ui/src/views/hlsnManage/home/assets/top4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
god-ui/src/views/hlsnManage/home/assets/top5.png
Normal file
BIN
god-ui/src/views/hlsnManage/home/assets/top5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
@ -1,132 +1,313 @@
|
||||
<template>
|
||||
<div class="app-container main-outer-wrapper">
|
||||
<div class="top-card-wrapper">
|
||||
<div class="top-card-item-extra" v-for="item in topList">
|
||||
<div class="top-card-icon"></div>
|
||||
<div class="top-card-inner">
|
||||
<div class="top-card-inner-value">25种</div>
|
||||
<div class="top-card-inner-title">设备种类</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-main-wrapper">
|
||||
<div class="grid-item-wrapper" style="grid-column: span 2;">
|
||||
<div class="grid-item-title">设备基础信息</div>
|
||||
<div class="grid-item-content device-basic-wrapper">
|
||||
<div class="device-basic-item"></div>
|
||||
<div class="device-basic-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper">
|
||||
<div class="grid-item-title">XK型油泵输出流量</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="app-container main-outer-wrapper">
|
||||
<div class="top-card-wrapper">
|
||||
<div
|
||||
class="top-card-item-extra"
|
||||
v-for="(item, index) in topList"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
:class="['top-card-icon', 'top-icon-' + (index + 1).toString()]"
|
||||
></div>
|
||||
<div class="top-card-inner">
|
||||
<div class="top-card-inner-value">{{ item.value }}</div>
|
||||
<div class="top-card-inner-title">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-main-wrapper">
|
||||
<div class="grid-item-wrapper" style="grid-column: span 2">
|
||||
<div class="grid-item-title">设备基础信息</div>
|
||||
<div class="grid-item-content device-basic-wrapper">
|
||||
<div class="device-basic-item" v-for="item,index in mainList" :key="index">
|
||||
<div
|
||||
:class="['top-card-icon', 'top-img-' + (index + 1).toString()]"
|
||||
></div>
|
||||
<div style="display: flex;height: 100%; justify-content:space-around; flex-direction:column;">
|
||||
<div>{{item.name}}</div>
|
||||
<div>{{item.name2}}</div>
|
||||
<div>{{item.name3}}</div>
|
||||
<div>{{item.name4}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper footer">
|
||||
<div class="grid-item-title">XK型油泵输出流量</div>
|
||||
<div class="grid-item-content" id="chart1"></div>
|
||||
</div>
|
||||
<div class="grid-item-wrapper footer">
|
||||
<div class="grid-item-title">重型锤式破碎机进料粒度</div>
|
||||
<div class="grid-item-content" id="chart2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
generateBaseOptions,
|
||||
generatePieOptions,
|
||||
initChartStatic,
|
||||
} from "@/utils/bigscreenTool/index.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
topList: [
|
||||
{
|
||||
title: '',
|
||||
value: '',
|
||||
icon: ''
|
||||
data() {
|
||||
return {
|
||||
topList: [
|
||||
{
|
||||
title: "设备种类",
|
||||
value: "25种",
|
||||
},
|
||||
{
|
||||
title: "设备总数",
|
||||
value: "123台",
|
||||
},
|
||||
{
|
||||
title: "运行中设备",
|
||||
value: "118台",
|
||||
},
|
||||
{
|
||||
title: "停运设备",
|
||||
value: "6台",
|
||||
icon: "top4",
|
||||
},
|
||||
{
|
||||
title: "对接接口",
|
||||
value: "18种",
|
||||
},
|
||||
],
|
||||
mainList:[
|
||||
{
|
||||
name:'设备名称：齿轮油泵',
|
||||
name2:'设备型号：KCB-200',
|
||||
name3:'设备状态：良好',
|
||||
name4:'流量范围：1.1~960m³/h',
|
||||
},
|
||||
{
|
||||
name:'设备名称：板式喂料机',
|
||||
name2:'设备型号：XBW150',
|
||||
name3:'槽板宽度：1500mm',
|
||||
name4:'处理能力：61-610t/h',
|
||||
},
|
||||
]
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart1();
|
||||
this.initChart2();
|
||||
},
|
||||
methods: {
|
||||
initChart1() {
|
||||
let time = new Date().getHours();
|
||||
let xAxisData = [];
|
||||
for (let i = 0; i < 9; i++) {
|
||||
xAxisData.push(`${time - i}:00`);
|
||||
}
|
||||
initChartStatic(
|
||||
"chart1",
|
||||
generateBaseOptions({
|
||||
legend: {
|
||||
show: false,
|
||||
top: "bottom",
|
||||
left: "center",
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData.reverse(),
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
max:300,
|
||||
min:0,
|
||||
splitNumber : 7.5,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
},
|
||||
splitLine: {
|
||||
//网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: {
|
||||
//网格线样式
|
||||
color: "#0735a2", //网格线颜色
|
||||
width: 1, //网格线的加粗程度
|
||||
type: "dashed", //网格线类型
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "油泵输出流量",
|
||||
data: [84, 223, 189, 256, 187, 234, 258, 186, 272],
|
||||
type: "line",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#000",
|
||||
fontSize: 13,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
value: '',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
value: '',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
value: '',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
value: '',
|
||||
icon: ''
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
width: "90%",
|
||||
height: "65%",
|
||||
},
|
||||
})
|
||||
);
|
||||
},
|
||||
mounted() {
|
||||
this.initChart1()
|
||||
this.initChart2()
|
||||
initChart2() {
|
||||
initChartStatic(
|
||||
"chart2",
|
||||
generateBaseOptions({
|
||||
legend: {
|
||||
show: false,
|
||||
top: "bottom",
|
||||
left: "center",
|
||||
},
|
||||
xAxis: {
|
||||
data: ["PCZ1308", "PCZ1512", "PCZ1615", "PCZ1802"],
|
||||
},
|
||||
// color: ,
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
},
|
||||
splitLine: {
|
||||
//网格线
|
||||
show: true, //是否显示
|
||||
lineStyle: {
|
||||
//网格线样式
|
||||
color: "#0735a2", //网格线颜色
|
||||
width: 1, //网格线的加粗程度
|
||||
type: "dashed", //网格线类型
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "破碎机进料粒度",
|
||||
data: [800, 1000, 650, 500],
|
||||
type: "bar",
|
||||
barWidth: 40,
|
||||
itemStyle: {
|
||||
|
||||
normal: {
|
||||
color:function(params){
|
||||
var arr=["#61a4e7", "#7ece51", "#edca5f", "#9470e4"]
|
||||
return arr[params.dataIndex]
|
||||
},
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: "top", //在上方显示
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: "#000",
|
||||
fontSize: 13,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
bottom: "25%",
|
||||
left: "10%",
|
||||
width: "78%",
|
||||
height: "65%",
|
||||
},
|
||||
})
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
initChart1() {},
|
||||
initChart2() {},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import url(../../../styles/mainPage.scss);
|
||||
.top-card-wrapper {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
.top-card-item-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #25252525;
|
||||
border-radius: 6px;
|
||||
box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
padding: 0.6rem 0.8rem;
|
||||
.top-card-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.top-card-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #25252525;
|
||||
border-radius: 6px;
|
||||
box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
|
||||
border-radius: 6px;
|
||||
background-color: white;
|
||||
padding: .6rem .8rem;
|
||||
.top-card-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 1px solid #000;
|
||||
width: calc(100% - 5rem);
|
||||
.top-card-inner-title {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.top-card-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(100% - 5rem);
|
||||
.top-card-inner-title {
|
||||
font-size: .8rem;
|
||||
}
|
||||
.top-card-inner-value {
|
||||
font-family: 'BiaoTiFont';
|
||||
}
|
||||
.top-card-inner-value {
|
||||
font-family: "BiaoTiFont";
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-main-wrapper {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.grid-item-wrapper {
|
||||
box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
|
||||
border-radius: 6px;
|
||||
.grid-item-title {
|
||||
font-family: 'BiaoTiFont';
|
||||
font-weight: 500 !important;
|
||||
color: #252525B0;
|
||||
}
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.grid-item-wrapper {
|
||||
box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
|
||||
border-radius: 6px;
|
||||
.grid-item-title {
|
||||
font-family: "BiaoTiFont";
|
||||
font-weight: 500 !important;
|
||||
color: #252525b0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
height: 300px !important;
|
||||
|
||||
}
|
||||
/**设备基础信息 */
|
||||
.device-basic-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.8rem;
|
||||
.device-basic-item {
|
||||
overflow: hidden;
|
||||
border: 1px solid #25252529;
|
||||
min-height: 200px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: .8rem;
|
||||
.device-basic-item {
|
||||
border: 1px solid #25252529;
|
||||
min-height: 200px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
grid-template-columns:1fr 1fr ;
|
||||
border-radius: 6px;
|
||||
.top-card-icon {
|
||||
width: 15rem;
|
||||
height: 12.5rem;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 5 {
|
||||
.top-icon-#{$i} {
|
||||
background-image: url(./assets/top#{$i}.png);
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 2 {
|
||||
.top-img-#{$i} {
|
||||
background-image: url(./assets/img#{$i}.png);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user