地级大屏页面初始化
This commit is contained in:
parent
883805c498
commit
1ee6c36361
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
|
|
@ -8,7 +8,7 @@ import { isRelogin } from "@/utils/request";
|
|||
|
||||
NProgress.configure({ showSpinner: false });
|
||||
|
||||
const whiteList = ["/login", "/register", "/qrCode/qrCodePage"];
|
||||
const whiteList = ["/login", "/register", "/qrCode/qrCodePage","/screen/cityScreen"];
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="title">
|
||||
装备状态
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../../../../assets/cityScreen/engineerUsingBg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.content-title{
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
position: relative;
|
||||
color: #78D6FF;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 23%;
|
||||
left: 8%;
|
||||
}
|
||||
.content-view{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<img src="../../../../../assets/cityScreen/equiQuantityBg.png" style="width: 100%;height: 100%;" />
|
||||
<div class="title">
|
||||
装备数量价值
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
<div class="content-view-item">
|
||||
<div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
|
||||
<img src="../../../../../assets/cityScreen/quantityIcon1.png" style="width: 90%;height: 80%;" />
|
||||
</div>
|
||||
<div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
|
||||
<div class="item-title">
|
||||
<span class="title2">线路装备</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view-item">
|
||||
<div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
|
||||
<img src="../../../../../assets/cityScreen/quantityIcon2.png" style="width: 90%;height: 80%;" />
|
||||
</div>
|
||||
<div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
|
||||
<div class="item-title">
|
||||
<span class="title2">变电装备</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view-item">
|
||||
<div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
|
||||
<img src="../../../../../assets/cityScreen/quantityIcon3.png" style="width: 90%;height: 80%;" />
|
||||
</div>
|
||||
<div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
|
||||
<div class="item-title">
|
||||
<span class="title2">电缆装备</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content-title{
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
position: relative;
|
||||
color: #78D6FF;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
left: 15%;
|
||||
}
|
||||
.content-view{
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
.content-view-item{
|
||||
width: 100%;
|
||||
height: 32%;
|
||||
margin-bottom: 1%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.item-title{
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background-image: url("../../../../../assets/cityScreen/equiQuantityTitle.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.title2{
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
.title2{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
.title2{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="title">
|
||||
装备状态
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../../../../assets/cityScreen/equiStatusBg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.content-title{
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
position: relative;
|
||||
color: #78D6FF;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
left: 18%;
|
||||
}
|
||||
.content-view{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
left: 18%;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
left: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="title">
|
||||
装备周转率
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../../../../assets/cityScreen/equiTurnoverBg.png");
|
||||
background-size: 110% 100%;
|
||||
|
||||
}
|
||||
.content-title{
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
position: relative;
|
||||
color: #78D6FF;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 18%;
|
||||
}
|
||||
.content-view{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="title">
|
||||
装备在用率
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../../../../assets/cityScreen/equiUseBg.png");
|
||||
background-size: 110% 100%;
|
||||
|
||||
}
|
||||
.content-title{
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
position: relative;
|
||||
color: #78D6FF;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 18%;
|
||||
}
|
||||
.content-view{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="title">
|
||||
维保预警
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../../../../assets/cityScreen/maintenanceBg.png");
|
||||
background-size: 110% 100%;
|
||||
|
||||
}
|
||||
.content-title{
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
position: relative;
|
||||
color: #78D6FF;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 18%;
|
||||
}
|
||||
.content-view{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="title">
|
||||
退役预警
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../../../../assets/cityScreen/retireBg.png");
|
||||
background-size: 110% 100%;
|
||||
|
||||
}
|
||||
.content-title{
|
||||
width: 100%;
|
||||
height: 18%;
|
||||
position: relative;
|
||||
color: #78D6FF;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 18%;
|
||||
}
|
||||
.content-view{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="iconItem">
|
||||
<div class="item-box" style="right: -8%;">
|
||||
<div class="title">装备总量</div>
|
||||
<div class="num">
|
||||
<span style="font-weight: 600;">73</span>
|
||||
<span class="unit">台</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="iconItem">
|
||||
<div class="item-box" style="right: -10%;">
|
||||
<div class="title">装备总价值</div>
|
||||
<div class="num">
|
||||
<span style="font-weight: 600;">0.027</span>
|
||||
<span class="unit">亿元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iconItem">
|
||||
<div class="item-box" style="right: -8%;">
|
||||
<div class="title">装备配置率</div>
|
||||
<div class="num">
|
||||
<span style="font-weight: 600;">100</span>
|
||||
<span class="unit">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../../../../assets/cityScreen/topIconsBg.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
// border: 1px solid red;
|
||||
|
||||
}
|
||||
.iconItem{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
margin-right: 6%;
|
||||
// border: 1px solid red;
|
||||
position: relative;
|
||||
}
|
||||
.item-box{
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
margin-right: 15%;
|
||||
|
||||
}
|
||||
.num{
|
||||
color: #FCFAC4;
|
||||
font-size: 32px;
|
||||
margin-right: 25%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.unit{
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 12px;
|
||||
}
|
||||
.num{
|
||||
font-size: 12px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 10px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 32px;
|
||||
}
|
||||
.num{
|
||||
font-size: 32px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 24px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="iconItem">
|
||||
<div class="item-box" style="right: -12%;">
|
||||
<div class="title">今日入库</div>
|
||||
<div class="num">
|
||||
<span style="font-weight: 600;">5</span>
|
||||
<span class="unit">台</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iconItem">
|
||||
<div class="item-box" style="right: 8%;">
|
||||
<div class="title">今日出库</div>
|
||||
<div class="num">
|
||||
<span style="font-weight: 600;">10</span>
|
||||
<span class="unit">台</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../../../../assets/cityScreen/topIconsBg2.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.iconItem{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin-right: 6%;
|
||||
// border: 1px solid red;
|
||||
position: relative;
|
||||
}
|
||||
.item-box{
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.title{
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
margin-right: 15%;
|
||||
|
||||
}
|
||||
.num{
|
||||
color: #FCFAC4;
|
||||
font-size: 32px;
|
||||
margin-right: 25%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
.unit{
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 12px;
|
||||
}
|
||||
.num{
|
||||
font-size: 12px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 10px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 32px;
|
||||
}
|
||||
.num{
|
||||
font-size: 32px;
|
||||
}
|
||||
.unit{
|
||||
font-size: 24px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,211 +1,111 @@
|
|||
<template>
|
||||
<div style="width: 100%">
|
||||
<div style="width: 100%; padding: 10px">
|
||||
<div class="item-box">
|
||||
<div>设备类型:</div>
|
||||
<div style="margin-left: 10px; color: blue">{{
|
||||
queryParams.deviceType
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>规格型号:</div>
|
||||
<div style="margin-left: 10px">
|
||||
{{ queryParams.specificationType }}</div
|
||||
>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>二维码编码:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.qrCode }}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>设备编码:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.maCode }}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>设备状态:</div>
|
||||
<div style="margin-left: 10px">{{
|
||||
queryParams.maStatusName
|
||||
}}</div>
|
||||
</div>
|
||||
<!-- <div class="item-box">
|
||||
<div >本次检修人员:</div>
|
||||
<div style="margin-left: 10px;">{{queryParams.checkMan}}</div>
|
||||
</div> -->
|
||||
<div class="item-box">
|
||||
<div>本次检修时间:</div>
|
||||
<div style="margin-left: 10px; color: blue">{{
|
||||
queryParams.thisCheckTime
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>下次检修时间:</div>
|
||||
<div style="margin-left: 10px; color: blue">{{
|
||||
queryParams.nextCheckTime
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>检验人员:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.checkMan }}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>检验结论:</div>
|
||||
<div style="margin-left: 10px; color: blue">{{
|
||||
queryParams.inspectStatus || '合格'
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>联系电话:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.phone }}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>生产厂家:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.maVender }}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>出厂日期:</div>
|
||||
<div style="margin-left: 10px">{{
|
||||
queryParams.outFacTime
|
||||
}}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>出入库次数:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.inOutNum }}</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>领料单位:</div>
|
||||
<div style="margin-left: 10px"
|
||||
>{{ queryParams.leaseUnit }}
|
||||
<div class="page">
|
||||
<div class="main-view">
|
||||
<div class="left_view">
|
||||
<TopIcons style="width: 96%;height: 13%;margin: 0 auto;"></TopIcons>
|
||||
<div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
|
||||
<EquiQuantity style="width: 50%;height: 100%;"></EquiQuantity>
|
||||
<EquiStatus style="width: 50%;height: 100%;"></EquiStatus>
|
||||
</div>
|
||||
<div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
|
||||
<Maintenance style="width: 50%;height: 100%;"></Maintenance>
|
||||
<Retire style="width: 50%;height: 100%;"></Retire>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>领料工程:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.leasePro }} </div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>领料时间:</div>
|
||||
<div style="margin-left: 10px"
|
||||
>{{ queryParams.leaseTime }}
|
||||
<div class="center_view"></div>
|
||||
<div class="right_view">
|
||||
<TopIconsTwo style="width: 96%;height: 13%;margin: 0 auto;"></TopIconsTwo>
|
||||
<div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
|
||||
<EquiUse style="width: 50%;height: 100%;"></EquiUse>
|
||||
<EquiTurnover style="width: 50%;height: 100%;"></EquiTurnover>
|
||||
</div>
|
||||
<div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
|
||||
<EngineerUsing style="width: 100%;height: 100%;"></EngineerUsing>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>退料单位:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.backUnit }} </div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>退料工程:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.backPro }} </div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div>退料时间:</div>
|
||||
<div style="margin-left: 10px">{{ queryParams.backTime }} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
color: green;
|
||||
margin-top: 10px;
|
||||
"
|
||||
>
|
||||
检 验 合 格 证
|
||||
</div>
|
||||
<div style="width: 50%; display: flex; margin-bottom: 10px">
|
||||
<div style="color: green">名 称：</div>
|
||||
<div style="border-bottom: 1px solid green">{{
|
||||
queryParams.deviceType
|
||||
}}</div>
|
||||
</div>
|
||||
<div style="width: 50%; display: flex; margin-bottom: 10px">
|
||||
<div style="color: green">检验结论：</div>
|
||||
<div style="color: red; font-size: 18px; font-weight: 600">{{
|
||||
queryParams.inspectStatus || '合格'
|
||||
}}</div>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; margin-bottom: 10px">
|
||||
<div style="color: green">型 号：</div>
|
||||
<div style="border-bottom: 1px solid green">{{
|
||||
queryParams.specificationType
|
||||
}}</div>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; margin-bottom: 10px">
|
||||
<div style="color: green">编 号：</div>
|
||||
<div style="border-bottom: 1px solid green">{{
|
||||
queryParams.maCode
|
||||
}}</div>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; margin-bottom: 10px">
|
||||
<div style="color: green">本次检验日期：</div>
|
||||
<div style="border-bottom: 1px solid green">{{
|
||||
queryParams.thisCheckTime
|
||||
}}</div>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; margin-bottom: 10px">
|
||||
<div style="color: green">下次检验日期：：</div>
|
||||
<div style="border-bottom: 1px solid green">{{
|
||||
queryParams.nextCheckTime
|
||||
}}</div>
|
||||
</div>
|
||||
<div style="position: absolute; top: 0%; left: 25%">
|
||||
<canvas id="canvas" width="180" height="180"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopIcons from './components/topIcons/index'
|
||||
import TopIconsTwo from './components/topIconsTwo/index'
|
||||
import EquiQuantity from './components/equiQuantity/index'
|
||||
import EquiStatus from './components/equiStatus/index'
|
||||
import Maintenance from './components/maintenance/index'
|
||||
import Retire from './components/retire/index'
|
||||
import EquiTurnover from './components/equiTurnover/index'
|
||||
import EquiUse from './components/equiUse/index'
|
||||
import EngineerUsing from './components/engineerUsing/index'
|
||||
export default {
|
||||
name: 'cityScreen',
|
||||
components: {
|
||||
TopIcons,
|
||||
TopIconsTwo,
|
||||
EquiQuantity,
|
||||
EquiStatus,
|
||||
Maintenance,
|
||||
Retire,
|
||||
EquiTurnover,
|
||||
EquiUse,
|
||||
EngineerUsing
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qrCode: '',
|
||||
queryParams: {
|
||||
deviceType: '', //设备类型
|
||||
specificationType: '', //规格型号
|
||||
qrCode: '', //二维码
|
||||
maCode: '', //设备编码
|
||||
maStatusName: '', //设备状态
|
||||
checkMan: '', //本次检验人
|
||||
thisCheckTime: '', //本次检验日期
|
||||
nextCheckTime: '', //下次检验日期
|
||||
// maStatusName:'',//设备状态
|
||||
inspectMan: '', //检验人员
|
||||
inspectStatus: '', //检验结论
|
||||
phone: '', //联系电话
|
||||
maVender: '', //厂家名称
|
||||
outFacTime: '', //出厂日期
|
||||
inOutNum: '', //出入库次数
|
||||
leaseUnit: '', // 领料单位
|
||||
leasePro: '', // 领料工程
|
||||
leaseTime: '', // 领料时间
|
||||
backUnit: '', // 退料单位
|
||||
backPro: '', // 退料工程
|
||||
backTime: '', // 退料时间
|
||||
},
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item-box {
|
||||
.page{
|
||||
background: #333;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid green;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.bottom-box {
|
||||
.main-view{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: url("../../../assets/cityScreen/mainBg.png");
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
width: 99%;
|
||||
border: 4px solid rgb(2, 196, 2);
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
.main-view {
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 3300px) {
|
||||
.main-view {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.left_view{
|
||||
width: 32%;
|
||||
height: 100%;
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
.center_view{
|
||||
width: 36%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right_view{
|
||||
width: 32%;
|
||||
height: 100%;
|
||||
padding: 2%;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-title">
|
||||
<div class="title">
|
||||
装备数量价值
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-view">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content-title{
|
||||
width: 105%;
|
||||
height: 20%;
|
||||
margin-top: -4%;
|
||||
margin-left: -8%;
|
||||
position: relative;
|
||||
color: #78D6FF;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
left: 18%;
|
||||
}
|
||||
.content-view{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
.title{
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
left: 18%;
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (min-width: 3000px) {
|
||||
.title{
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
top: 42%;
|
||||
left: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue