1.设备总览、故障提醒、状态累计时长、状态总览模块开发

src/views/Mechanics/components/DevOverview.vue

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

src/views/Mechanics/components/devFaultTip.vue

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

src/views/Mechanics/components/devStatusTip.vue

@@ -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> &nbsp; <span>设备位置及名称：</span><span> {{ res.devName }}</span></p>
+                  <p><span>工作时长：</span><span>{{ res.on }}</span> &nbsp; <span>待机时长：</span><span>{{ res.off }}</span> &nbsp; <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>
+  

src/views/Mechanics/components/ringChart.vue

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