1.设备总览、故障提醒、状态累计时长、状态总览模块开发
This commit is contained in:
15133876896-BGG25
parent
5bc8f45a34
commit
bfe2400d46
102
src/views/Mechanics/components/DevOverview.vue
Normal file
102
src/views/Mechanics/components/DevOverview.vue
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\DevOverview.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-06-09 14:29:11
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="devItem-box">
|
||||||
|
<h2>{{props.title}}</h2>
|
||||||
|
<div class="devItem-content">
|
||||||
|
<div class="content-value" v-if="props.title=='设备总数'">
|
||||||
|
<h2>112台</h2>
|
||||||
|
</div>
|
||||||
|
<div class="content-value-cheijan " v-else>
|
||||||
|
<el-row style="margin-top: 20px;">
|
||||||
|
<el-col :span="7"> <div class="chejian-online on-status">15在线</div></el-col>
|
||||||
|
<el-col :span="17"></el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="17"></el-col>
|
||||||
|
<el-col :span="7"><div class="chejian-offline on-status">15离线</div></el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref} from "vue"
|
||||||
|
// props.value数组中下标：0为全部，1为在线，2为离线
|
||||||
|
const props=defineProps({
|
||||||
|
title:{
|
||||||
|
type:String,
|
||||||
|
default:''
|
||||||
|
},
|
||||||
|
value:{
|
||||||
|
type:Array,
|
||||||
|
default:[]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.devItem-box h2{
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
padding-left: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.devItem-box{
|
||||||
|
width: 48%;
|
||||||
|
height: 30%;
|
||||||
|
}
|
||||||
|
.devItem-content{
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.content-value{
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 2px solid;
|
||||||
|
border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;
|
||||||
|
|
||||||
|
}
|
||||||
|
.on-status{
|
||||||
|
width: 50px;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
.chejian-online{
|
||||||
|
color: #7CFFB2;
|
||||||
|
}
|
||||||
|
.chejian-offline{
|
||||||
|
color: #4992FF;
|
||||||
|
}
|
||||||
|
.content-value-cheijan{
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
border-bottom: 2px solid;
|
||||||
|
border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;
|
||||||
|
}
|
||||||
|
.content-value-cheijan::after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
border-bottom: 2px dashed #2969E8;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
margin-top: -40%;
|
||||||
|
}
|
||||||
|
.content-value>h2{
|
||||||
|
display: block;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 50px;
|
||||||
|
color: #64A1FC;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
134
src/views/Mechanics/components/devFaultTip.vue
Normal file
134
src/views/Mechanics/components/devFaultTip.vue
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\devFaultTip.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-06-12 08:52:40
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%">
|
||||||
|
<h2 class="components-header">{{title}}</h2>
|
||||||
|
<div class="components-content" :key="keynum">
|
||||||
|
<swiper-container
|
||||||
|
:slidesPerView="per_view"
|
||||||
|
:initialSlide="0"
|
||||||
|
:loop="true"
|
||||||
|
:spaceBetween="0"
|
||||||
|
direction="vertical"
|
||||||
|
:autoplay="{
|
||||||
|
delay: 3000,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
}"
|
||||||
|
@progress="onProgress"
|
||||||
|
@slidechange="onSlideChange"
|
||||||
|
>
|
||||||
|
<swiper-slide v-for="(res, index) in props.tipList" :key="index">
|
||||||
|
<div class="itemclass">
|
||||||
|
<el-row :gutter="5" class="row-flex">
|
||||||
|
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="18" class="col-flex" style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
|
||||||
|
<p><span>机架号：</span><span>{{ res.label }}</span></p>
|
||||||
|
<p><span>设备位置及名称：</span><span> {{ res.devName }}</span></p>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="4" class="col-flex" style="font-size: 25px; color: red;"> 故障 </el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, watch } from "vue";
|
||||||
|
import { register } from "swiper/element/bundle";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
let { t } = useI18n();
|
||||||
|
register();
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
tipList: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
let per_view = ref(3);
|
||||||
|
let useSwiper: any = ref(null);
|
||||||
|
let swiperRef = ref(null);
|
||||||
|
let listVal = ref([]);
|
||||||
|
let keynum = ref(0);
|
||||||
|
// space-between:幻灯片间距
|
||||||
|
// slides-per-view:每个视图幻灯片数量
|
||||||
|
// initialSlide：初始幻灯片索引
|
||||||
|
// height:框高,
|
||||||
|
// direction:滑动方向
|
||||||
|
// autoplay：{
|
||||||
|
// delay：时间
|
||||||
|
// disableOnInteraction：禁止交互
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let swiperConfig= reactive({
|
||||||
|
// perView:3,
|
||||||
|
// initialSlide:1,
|
||||||
|
// loop:true,
|
||||||
|
// spaceBetween:0,
|
||||||
|
// swiperHeight:200,
|
||||||
|
// direction:'vertical',
|
||||||
|
// autoplay:{ delay: 3000,disableOnInteraction: false,height:200}
|
||||||
|
// })
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.tipList,
|
||||||
|
(val) => {
|
||||||
|
keynum.value++;
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
const onProgress = (e) => {};
|
||||||
|
|
||||||
|
const onSlideChange = (e) => {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.components-header {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.components-content {
|
||||||
|
height: 90%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.itemclass {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: #0545a1 1px solid;
|
||||||
|
}
|
||||||
|
.row-flex{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.col-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.swiper,
|
||||||
|
swiper-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
135
src/views/Mechanics/components/devStatusTip.vue
Normal file
135
src/views/Mechanics/components/devStatusTip.vue
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\devStatusTip.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-06-12 08:52:40
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%; width: 100%">
|
||||||
|
<h2 class="components-header">{{title}}</h2>
|
||||||
|
<div class="components-content" :key="keynum">
|
||||||
|
<swiper-container
|
||||||
|
:slidesPerView="per_view"
|
||||||
|
:loop="true"
|
||||||
|
:spaceBetween="0"
|
||||||
|
direction="vertical"
|
||||||
|
:autoplay="{
|
||||||
|
delay: 3000,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
}"
|
||||||
|
autoHeight=true
|
||||||
|
observer=true
|
||||||
|
observeParents=true
|
||||||
|
@progress="onProgress"
|
||||||
|
@slidechange="onSlideChange"
|
||||||
|
>
|
||||||
|
<swiper-slide v-for="(res, index) in props.tipList" :key="index">
|
||||||
|
<div class="itemclass">
|
||||||
|
<el-row :gutter="5" class="row-flex">
|
||||||
|
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="22" class="col-flex" style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
|
||||||
|
<p><span>机架号：</span><span>{{ res.label }}</span> <span>设备位置及名称：</span><span> {{ res.devName }}</span></p>
|
||||||
|
<p><span>工作时长：</span><span>{{ res.on }}</span> <span>待机时长：</span><span>{{ res.off }}</span> <span>急停时长：</span><span>{{ res.stop }}</span></p>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, watch } from "vue";
|
||||||
|
import { register } from "swiper/element/bundle";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
let { t } = useI18n();
|
||||||
|
register();
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
tipList: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
let per_view = ref(5);
|
||||||
|
let useSwiper: any = ref(null);
|
||||||
|
let swiperRef = ref(null);
|
||||||
|
let listVal = ref([]);
|
||||||
|
let keynum = ref(0);
|
||||||
|
// space-between:幻灯片间距
|
||||||
|
// slides-per-view:每个视图幻灯片数量
|
||||||
|
// initialSlide：初始幻灯片索引
|
||||||
|
// height:框高,
|
||||||
|
// direction:滑动方向
|
||||||
|
// autoplay：{
|
||||||
|
// delay：时间
|
||||||
|
// disableOnInteraction：禁止交互
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let swiperConfig= reactive({
|
||||||
|
// perView:3,
|
||||||
|
// initialSlide:1,
|
||||||
|
// loop:true,
|
||||||
|
// spaceBetween:0,
|
||||||
|
// swiperHeight:200,
|
||||||
|
// direction:'vertical',
|
||||||
|
// autoplay:{ delay: 3000,disableOnInteraction: false,height:200}
|
||||||
|
// })
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.tipList,
|
||||||
|
(val) => {
|
||||||
|
keynum.value++;
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
const onProgress = (e) => {};
|
||||||
|
|
||||||
|
const onSlideChange = (e) => {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.components-header {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.components-content {
|
||||||
|
height: 90%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.itemclass {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: #0545a1 1px solid;
|
||||||
|
}
|
||||||
|
.row-flex{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.col-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.swiper,swiper-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
89
src/views/Mechanics/components/ringChart.vue
Normal file
89
src/views/Mechanics/components/ringChart.vue
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\ringChart.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-04-28 08:01:55
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="ring" ref="ringRef"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { ref, onMounted, onUnmounted, getCurrentInstance,watch,onUpdated } from 'vue'
|
||||||
|
const { proxy } = getCurrentInstance() as any;
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let {t} = useI18n();
|
||||||
|
let ringRef = ref();
|
||||||
|
let ringChart = null;
|
||||||
|
const prop = defineProps({
|
||||||
|
data: []
|
||||||
|
})
|
||||||
|
const init = () => {
|
||||||
|
ringChart = proxy.$echarts.init(ringRef.value, 'dark')
|
||||||
|
let option = {
|
||||||
|
title: {
|
||||||
|
text: t('messages.DevType'),
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
left:'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
type: "scroll",
|
||||||
|
bottom: "5%",
|
||||||
|
left: "center",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["20%", "50%"],
|
||||||
|
center: ["50%", "45%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 5,
|
||||||
|
// borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter: "{b}: {c}",
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: prop.data,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
ringChart.setOption(option)
|
||||||
|
}
|
||||||
|
|
||||||
|
onUpdated(() => {
|
||||||
|
ringChart.setOption({
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: prop.data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ring {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user