This commit is contained in:
hzz 2023-06-02 18:15:21 +08:00
commit af804e3869
9 changed files with 106 additions and 69 deletions

View File

@ -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() : "";

View File

@ -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);

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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;

View File

@ -9,8 +9,9 @@
--> -->
<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="container">
<div class="box" ref="classBox1"> <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">
@ -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%;