Merge branch 'master' of https://codeup.aliyun.com/645deca397d94d909e439238/iotplatform_sourcecode/screenFront into dismap
This commit is contained in:
commit
af804e3869
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<dv-border-box-13 ref="boder">
|
<dv-border-box-13 ref="boder" :color="color">
|
||||||
<div class="slot">
|
<div class="slot">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
@ -8,6 +8,12 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch } from "vue";
|
||||||
|
const prop = defineProps({
|
||||||
|
color: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
});
|
||||||
let boder = ref();
|
let boder = ref();
|
||||||
const resetWH = () => {
|
const resetWH = () => {
|
||||||
boder ? boder.value.initWH() : "";
|
boder ? boder.value.initWH() : "";
|
||||||
|
@ -33,11 +33,12 @@ import { onBeforeMount, onMounted, onUnmounted, ref } from "vue";
|
|||||||
// import { Swiper, SwiperSlide } from 'swiper/vue';
|
// import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||||
import { register } from "swiper/element/bundle";
|
import { register } from "swiper/element/bundle";
|
||||||
import index from "./main/index.vue";
|
import index from "./main/index.vue";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute,useRouter } from "vue-router";
|
||||||
import { gatDeviceStatusOfMF } from "@/http/Mechanics";
|
import { gatDeviceStatusOfMF } from "@/http/Mechanics";
|
||||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||||
import { useMechanicsStore } from "@/store/module/Mechanics";
|
import { useMechanicsStore } from "@/store/module/Mechanics";
|
||||||
const route=useRoute()
|
const route=useRoute()
|
||||||
|
const router=useRouter()
|
||||||
const store = useMechanicsStore();
|
const store = useMechanicsStore();
|
||||||
register();
|
register();
|
||||||
let page = ref();
|
let page = ref();
|
||||||
@ -49,9 +50,12 @@ const onProgress = (e) => {
|
|||||||
|
|
||||||
const onSlideChange = (e) => {
|
const onSlideChange = (e) => {
|
||||||
// console.log(e.detail[0].activeIndex
|
// console.log(e.detail[0].activeIndex
|
||||||
|
// console.log(e, "e");
|
||||||
|
|
||||||
store.changePage(e.detail[0].activeIndex + 1);
|
store.changePage(e.detail[0].activeIndex + 1);
|
||||||
|
router.replace(`/Mechanics/${e.detail[0].activeIndex+1}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
async function gatDeviceStatusOfMFfun() {
|
async function gatDeviceStatusOfMFfun() {
|
||||||
let result: any = await gatDeviceStatusOfMF();
|
let result: any = await gatDeviceStatusOfMF();
|
||||||
store.changeloading(true);
|
store.changeloading(true);
|
||||||
|
@ -110,13 +110,13 @@ let powerOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -153,13 +153,13 @@ let ProductionOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -189,9 +189,9 @@ function setcontentData(val) {
|
|||||||
monthData.push(key)
|
monthData.push(key)
|
||||||
powerMonth.push(val.power[key])
|
powerMonth.push(val.power[key])
|
||||||
}
|
}
|
||||||
powerOption.option.xAxis.data = []
|
powerOption.option.yAxis.data = []
|
||||||
powerOption.option.series = []
|
powerOption.option.series = []
|
||||||
powerOption.option.xAxis.data = monthData.reverse()
|
powerOption.option.yAxis.data = monthData.reverse()
|
||||||
powerOption.option.series.push({
|
powerOption.option.series.push({
|
||||||
data: powerMonth.reverse(),
|
data: powerMonth.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
@ -233,9 +233,9 @@ function setcontentData(val) {
|
|||||||
monthData2.push(key)
|
monthData2.push(key)
|
||||||
powerMonth2.push(val.rate[key])
|
powerMonth2.push(val.rate[key])
|
||||||
}
|
}
|
||||||
ProductionOption.option.xAxis.data = []
|
ProductionOption.option.yAxis.data = []
|
||||||
ProductionOption.option.series = []
|
ProductionOption.option.series = []
|
||||||
ProductionOption.option.xAxis.data = monthData2.reverse()
|
ProductionOption.option.yAxis.data = monthData2.reverse()
|
||||||
ProductionOption.option.series.push({
|
ProductionOption.option.series.push({
|
||||||
data: powerMonth2.reverse(),
|
data: powerMonth2.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
@ -110,13 +110,13 @@ let powerOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -153,13 +153,13 @@ let ProductionOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -186,9 +186,9 @@ function setcontentData(val) {
|
|||||||
monthData.push(key)
|
monthData.push(key)
|
||||||
powerMonth.push(val.power[key])
|
powerMonth.push(val.power[key])
|
||||||
}
|
}
|
||||||
powerOption.option.xAxis.data = []
|
powerOption.option.yAxis.data = []
|
||||||
powerOption.option.series = []
|
powerOption.option.series = []
|
||||||
powerOption.option.xAxis.data = monthData.reverse()
|
powerOption.option.yAxis.data = monthData.reverse()
|
||||||
powerOption.option.series.push({
|
powerOption.option.series.push({
|
||||||
data: powerMonth.reverse(),
|
data: powerMonth.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
@ -229,9 +229,9 @@ function setcontentData(val) {
|
|||||||
monthData2.push(key)
|
monthData2.push(key)
|
||||||
powerMonth2.push(val.rate[key])
|
powerMonth2.push(val.rate[key])
|
||||||
}
|
}
|
||||||
ProductionOption.option.xAxis.data = []
|
ProductionOption.option.yAxis.data = []
|
||||||
ProductionOption.option.series = []
|
ProductionOption.option.series = []
|
||||||
ProductionOption.option.xAxis.data = monthData2.reverse()
|
ProductionOption.option.yAxis.data = monthData2.reverse()
|
||||||
ProductionOption.option.series.push({
|
ProductionOption.option.series.push({
|
||||||
data: powerMonth2.reverse(),
|
data: powerMonth2.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
@ -110,13 +110,13 @@ let powerOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -153,13 +153,13 @@ let ProductionOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -187,9 +187,9 @@ function setcontentData(val) {
|
|||||||
monthData.push(key)
|
monthData.push(key)
|
||||||
powerMonth.push(val.power[key])
|
powerMonth.push(val.power[key])
|
||||||
}
|
}
|
||||||
powerOption.option.xAxis.data = []
|
powerOption.option.yAxis.data = []
|
||||||
powerOption.option.series = []
|
powerOption.option.series = []
|
||||||
powerOption.option.xAxis.data = monthData.reverse()
|
powerOption.option.yAxis.data = monthData.reverse()
|
||||||
powerOption.option.series.push({
|
powerOption.option.series.push({
|
||||||
data: powerMonth.reverse(),
|
data: powerMonth.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
@ -230,9 +230,9 @@ function setcontentData(val) {
|
|||||||
monthData2.push(key)
|
monthData2.push(key)
|
||||||
powerMonth2.push(val.rate[key])
|
powerMonth2.push(val.rate[key])
|
||||||
}
|
}
|
||||||
ProductionOption.option.xAxis.data = []
|
ProductionOption.option.yAxis.data = []
|
||||||
ProductionOption.option.series = []
|
ProductionOption.option.series = []
|
||||||
ProductionOption.option.xAxis.data = monthData2.reverse()
|
ProductionOption.option.yAxis.data = monthData2.reverse()
|
||||||
ProductionOption.option.series.push({
|
ProductionOption.option.series.push({
|
||||||
data: powerMonth2.reverse(),
|
data: powerMonth2.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
@ -110,13 +110,13 @@ let powerOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -153,13 +153,13 @@ let ProductionOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -187,9 +187,9 @@ function setcontentData(val) {
|
|||||||
monthData.push(key)
|
monthData.push(key)
|
||||||
powerMonth.push(val.power[key])
|
powerMonth.push(val.power[key])
|
||||||
}
|
}
|
||||||
powerOption.option.xAxis.data = []
|
powerOption.option.yAxis.data = []
|
||||||
powerOption.option.series = []
|
powerOption.option.series = []
|
||||||
powerOption.option.xAxis.data = monthData.reverse()
|
powerOption.option.yAxis.data = monthData.reverse()
|
||||||
powerOption.option.series.push({
|
powerOption.option.series.push({
|
||||||
data: powerMonth.reverse(),
|
data: powerMonth.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
@ -231,9 +231,9 @@ function setcontentData(val) {
|
|||||||
monthData2.push(key)
|
monthData2.push(key)
|
||||||
powerMonth2.push(val.rate[key])
|
powerMonth2.push(val.rate[key])
|
||||||
}
|
}
|
||||||
ProductionOption.option.xAxis.data = []
|
ProductionOption.option.yAxis.data = []
|
||||||
ProductionOption.option.series = []
|
ProductionOption.option.series = []
|
||||||
ProductionOption.option.xAxis.data = monthData2.reverse()
|
ProductionOption.option.yAxis.data = monthData2.reverse()
|
||||||
ProductionOption.option.series.push({
|
ProductionOption.option.series.push({
|
||||||
data: powerMonth2.reverse(),
|
data: powerMonth2.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
@ -110,13 +110,13 @@ let powerOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -153,13 +153,13 @@ let ProductionOption = reactive({
|
|||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'value',
|
||||||
data: [
|
|
||||||
],
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
],
|
],
|
||||||
@ -187,9 +187,9 @@ function setcontentData(val) {
|
|||||||
monthData.push(key)
|
monthData.push(key)
|
||||||
powerMonth.push(val.power[key])
|
powerMonth.push(val.power[key])
|
||||||
}
|
}
|
||||||
powerOption.option.xAxis.data = []
|
powerOption.option.yAxis.data = []
|
||||||
powerOption.option.series = []
|
powerOption.option.series = []
|
||||||
powerOption.option.xAxis.data = monthData.reverse()
|
powerOption.option.yAxis.data = monthData.reverse()
|
||||||
powerOption.option.series.push({
|
powerOption.option.series.push({
|
||||||
data: powerMonth.reverse(),
|
data: powerMonth.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
@ -231,9 +231,9 @@ function setcontentData(val) {
|
|||||||
monthData2.push(key)
|
monthData2.push(key)
|
||||||
powerMonth2.push(val.rate[key])
|
powerMonth2.push(val.rate[key])
|
||||||
}
|
}
|
||||||
ProductionOption.option.xAxis.data = []
|
ProductionOption.option.yAxis.data = []
|
||||||
ProductionOption.option.series = []
|
ProductionOption.option.series = []
|
||||||
ProductionOption.option.xAxis.data = monthData2.reverse()
|
ProductionOption.option.yAxis.data = monthData2.reverse()
|
||||||
ProductionOption.option.series.push({
|
ProductionOption.option.series.push({
|
||||||
data: powerMonth2.reverse(),
|
data: powerMonth2.reverse(),
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="numBox1" :key="keynum" :style="{ height: '100%', width: '97%' }">
|
<div ref="numBox1" :key="keynum" :style="{ height: '100%', width: '97%' }">
|
||||||
<border6 ref="refborder3" >
|
<border6 ref="refborder3" :color="borderColor">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<div class="box" ref="classBox1">
|
<div class="box" ref="classBox1">
|
||||||
<div class="icontip">
|
<div class="icontip">
|
||||||
@ -69,6 +69,15 @@ let item:any = computed(() => {
|
|||||||
let iconcolor = computed(() => {
|
let iconcolor = computed(() => {
|
||||||
return props.value[i.value].status?props.value[i.value].val > props.limit ? "icon-red" : "icon-blue":"icon-grey";
|
return props.value[i.value].status?props.value[i.value].val > props.limit ? "icon-red" : "icon-blue":"icon-grey";
|
||||||
});
|
});
|
||||||
|
let borderColor = computed(() => {
|
||||||
|
let type = props.value.find((items: any) => {
|
||||||
|
if (+items.val > +props.limit&&items.status) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return type ? ["#E43961","#E43961"] : [];
|
||||||
|
});
|
||||||
let props = defineProps<{
|
let props = defineProps<{
|
||||||
title: string;
|
title: string;
|
||||||
icon: string;
|
icon: string;
|
||||||
|
@ -9,9 +9,10 @@
|
|||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div ref="numBox1" :style="{height:boxSize.height,width:boxSize.width,marginBottom:'10px'}">
|
<div ref="numBox1" :style="{height:boxSize.height,width:boxSize.width,marginBottom:'10px'}">
|
||||||
<border6 ref="refborder3">
|
<border6 ref="refborder3" :color="borderColor">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<div class="box" ref="classBox1">
|
<div class="container">
|
||||||
|
<div class="box" ref="classBox1">
|
||||||
<div class="icontip">
|
<div class="icontip">
|
||||||
<div v-for="items in value.data" style="margin: auto 5px;" v-show="(+items.val > +value.quota)&&items.status">
|
<div v-for="items in value.data" style="margin: auto 5px;" v-show="(+items.val > +value.quota)&&items.status">
|
||||||
<el-popover placement="bottom" :width="250" trigger="hover" effect="dark"
|
<el-popover placement="bottom" :width="250" trigger="hover" effect="dark"
|
||||||
@ -54,7 +55,7 @@
|
|||||||
<p class="num">{{item.val}}</p>
|
<p class="num">{{item.val}}</p>
|
||||||
<span>{{ value.unit }}</span>
|
<span>{{ value.unit }}</span>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</border6>
|
</border6>
|
||||||
@ -74,9 +75,17 @@ let props = defineProps<{
|
|||||||
}>();
|
}>();
|
||||||
let i =ref(0)
|
let i =ref(0)
|
||||||
let item = computed(() => {
|
let item = computed(() => {
|
||||||
|
|
||||||
return value.data[i.value]||{"name":"","val":"0","type":"","field":"","ts":0,"status":false};
|
return value.data[i.value]||{"name":"","val":"0","type":"","field":"","ts":0,"status":false};
|
||||||
});
|
});
|
||||||
|
let borderColor = computed(() => {
|
||||||
|
let type = value.data.find((items: any) => {
|
||||||
|
if (+items.val > +value.quota&&items.status) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return type ? ["#E43961","#E43961"] : [];
|
||||||
|
});
|
||||||
let iconcolor = computed(() => {
|
let iconcolor = computed(() => {
|
||||||
//开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
|
//开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
|
||||||
if (value.data[i.value]) {
|
if (value.data[i.value]) {
|
||||||
@ -145,6 +154,15 @@ defineExpose({
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@import "@/assets/css/iconfont.css";
|
@import "@/assets/css/iconfont.css";
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
.box {
|
.box {
|
||||||
height: 50%;
|
height: 50%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
Loading…
Reference in New Issue
Block a user