展会设备大屏，组件开发

src/assets/img/title_bg.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="68px" height="30px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="15" x2="68" y2="15" id="LinearGradient47">
+      <stop id="Stop48" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
+      <stop id="Stop49" stop-color="#00ffff" offset="1" />
+    </linearGradient>
+  </defs>
+  <g transform="matrix(1 0 0 1 -910 -863 )">
+    <path d="M 1 29.80000000000001  L 1 0.19999999999998863  L 60.811428571428486 0.19999999999998863  L 67 7.800000000000012  L 67 29.80000000000001  L 1 29.80000000000001  Z " fill-rule="nonzero" fill="url(#LinearGradient47)" stroke="none" transform="matrix(1 0 0 1 910 863 )" />
+  </g>
+</svg>

src/views/MicroExhibition/components/BarChart.vue

@@ -0,0 +1,43 @@
+<template>
+    <div ref="LChartRef"></div>
+</template>
+
+<script setup lang='ts'>
+import { ref, getCurrentInstance, onMounted } from 'vue'
+let LChartRef = ref(null);
+const { proxy } = getCurrentInstance() as any;
+let charts = null;
+const setCharts = () => {
+    charts = proxy.$echarts.init(LChartRef.value, 'dark')
+    let option = {
+        title:{
+            text:'工作时间'
+        },
+        xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+                data: [120, 200, 150, 80, 70, 110, 130],
+                type: 'bar'
+            }
+        ]
+    };
+
+    charts.setOption(option);
+}
+onMounted(() => {
+    setCharts()
+})
+</script>
+
+<style scoped>
+.cc {
+    width: 400px;
+    height: 400px;
+}
+</style>

src/views/MicroExhibition/components/Card.vue

@@ -0,0 +1,46 @@
+<template>
+    <Border13>
+        <div class="card-container">
+            <h2 class="title">
+                <DecorationFadeOut>
+                    &nbsp;{{ title }}&nbsp;
+                </DecorationFadeOut>
+            </h2>
+            <div class="card-content">
+                <slot ></slot>
+            </div>
+            
+        </div>
+    </Border13>
+</template>
+
+<script setup lang='ts'>
+import Border13 from '@/components/border/Border13.vue'
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+
+const prop = defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+})
+</script>
+
+<style scoped>
+.card-container {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+.title {
+    height: 30px;
+    color: #fff;
+    font-size: 20px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+.card-content {
+    width: 100%;
+    height: calc(100% - 40px);
+}
+</style>

src/views/MicroExhibition/components/DevCard.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="dev-card">
+    <div class="dev-left">
+                <slot></slot>
+    </div>
+    <div class="dev-right">
+        <div class="dev-box">
+            <div class="dev-content dev-title">
+                <div class="key" v-for="item in dev_title">{{ item }}</div>
+            </div>
+            <div class="dev-content" v-for="(item,index) in dev_value">
+                <div>{{ item.a }}</div>
+                <div>{{ item.b }}</div>
+                <div>{{ item.c }}</div>
+                <div>{{ item.d }}</div>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+
+const prop = defineProps({
+    dev_title: {
+        type: Array,
+        default: ['机架号','状态','布料层数','裁片数量']
+    },
+    dev_value: {
+        type: [Object],
+        default: [{a:102014422,b:'待机',c:'40层',d:'1000片'}]
+    },
+})
+</script>
+
+<style scoped>
+.dev-card {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+}
+.dev-left,.dev-right {
+    width: 50%;
+    height: 100%;
+    box-sizing: border-box;
+}
+.dev-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.dev-title {
+    color: #FFF;
+}
+.dev-box {
+    height: 100%;
+    width: 100%;
+    font-size: 16px;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+.dev-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    font-weight: bold;
+}
+
+.key {
+    width: 75px;
+    height: 35px;
+    line-height: 35px;
+    text-align: center;
+    background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; 
+}
+</style>

src/views/MicroExhibition/components/LineChart.vue

@@ -26,11 +26,6 @@ const setCharts = ()=>{
             bottom: '3%',
             containLabel: true
         },
-        toolbox: {
-            feature: {
-                saveAsImage: {}
-            }
-        },
         xAxis: {
             type: 'category',
             boundaryGap: false,

src/views/MicroExhibition/components/ringChart.vue

@@ -0,0 +1,85 @@
+<!--
+ * @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 ref="ringRef" class="ring" ></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'
+import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
+let { t } = useI18n();
+let ringRef = ref();
+let ringChart = null;
+const prop = defineProps({
+    data: []
+})
+const init = () => {
+    ringChart = proxy.$echarts.init(ringRef.value, 'dark')
+    let option = {
+        tooltip: {
+            trigger: "item",
+        },
+        legend: {
+            type: "scroll",
+            bottom: "0",
+            left: "center",
+            textStyle: {
+                color: "#fff",
+                fontSize: 16,
+            },
+        },
+        series: [
+            {
+                name: "",
+                type: "pie",
+                radius: ["40%", "70%"],
+                center: ["50%", "45%"],
+                avoidLabelOverlap: false,
+                label: {
+                    show: true,
+                    formatter(params) {
+                        return `${params.name}:${params.value}台`
+                    },
+                    fontSize: 20
+                },
+                labelLine: {
+                    show: true,
+                },
+                top: '5%',
+                data: prop.data,
+            },
+        ],
+    }
+    ringChart.setOption(option)
+}
+
+onUpdated(() => {
+    ringChart.setOption({
+        series: [
+            {
+                data: prop.data
+            }
+        ]
+    })
+})
+onMounted(() => {
+    init()
+})
+</script>
+
+<style scoped>
+
+.ring {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/MicroExhibition/components/scrollBoard.vue

@@ -0,0 +1,118 @@
+<!--
+ * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\scrollBoard.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-06-13 08:33:37
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+        <div class="box-body">
+            <ZdScrollBoard ref="devList" @click="dvClick" :config="prop.config" @mouseover="dvMouseover"
+                @mouseend="dvmouseleave" :style="{
+                    width: '100%',
+                    height: '100%',
+                }" />
+            <el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
+                popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
+        </div>
+</template>
+
+<script setup lang='ts'>
+import { getCurrentInstance, onMounted, reactive, ref } from "vue";
+import ZdScrollBoard from "@/components/data-view/index.vue";
+import { useRouter } from "vue-router"
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+const prop = defineProps({
+    config: Object,
+})
+const router = useRouter()
+//弹窗文本
+let tipcontent = ref(null)
+//弹窗显示与隐藏
+let visible = ref(false)
+//存储弹窗dom
+let triggerRef = ref(null)
+/**
+ * @函数功能: 鼠标移入组件方法
+ * @param {*} value 
+ * @出口参数: 
+ * @函数备注: 
+ */
+const dvMouseover = (value) => {
+    if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
+        triggerRef.value = value.toElement
+        tipcontent.value = value.toElement.innerText
+        visible.value = true
+    }
+
+};
+/**
+ * 点击表格事件
+ */
+const dvClick = (value) => {
+    if (value.row) {
+        let id = {
+            '精加车间': 1,
+            '机加车间': 2,
+            '大件车间': 3,
+            '精饰车间': 4,
+            '焊接车间': 5,
+        }
+
+        prop.config.rawData.forEach((res, index) => {
+
+            if (index == value.row[0] - 1) {
+                router.push({
+                    name: "Mechanicsson",
+                    params: {
+                        id: id[value.row[2]],
+                        dev: res.id
+                    },
+                });
+            }
+        });
+    }
+
+}
+/**
+ * @函数功能:  鼠标移出组件方法
+ * @出口参数: 
+ * @函数备注: 
+ */
+const dvmouseleave = () => {
+    triggerRef.value = null
+    tipcontent.value = null
+    visible.value = false
+};
+
+</script>
+
+<style scoped>
+
+.box-body {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+:deep(.dv-scroll-board .rows .ceil) {
+    overflow: auto;
+    white-space: pre-wrap;
+    text-overflow: none
+}
+
+:deep(.dv-scroll-board .rows .row-item) {
+    font-size: 16px;
+}
+</style>
+<style>
+.el-popper.tooltip-class {
+    color: #fff !important;
+}
+</style>

src/views/MicroExhibition/index.vue

@@ -2,21 +2,21 @@
     <div class="container">
         <div class="header">
             <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.微工厂环境实时监测系统')"
+                <header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'设备大屏展示系统'" :titleTip="titleTip"
-                    :titleTip="titleTip" :typeFun="['time']" :alarmType="[]"></header2>
+                    :typeFun="['time']" :alarmType="[]"></header2>
             </div>
         </div>
         <div class="content">
             <div class="left">
                 <div class="lt">
-                    <Border13>
+                    <Card title="设备状态总览">
-
+                        <ringChart :data="ringData"></ringChart>
-                    </Border13>
+                    </Card>
                 </div>
                 <div class="lb">
-                    <Border13>
+                    <Card title="设备列表">
-
+                        <scrollBoard :config="scrollBoardConfig"></scrollBoard>
-                    </Border13>
+                    </Card>
                 </div>
             </div>
             <div class="center">
@@ -32,25 +32,49 @@
                         <h2>网关状态</h2>
                         <div class="div_p">
                             <i :class="true
-                                    ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
+                                ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
-                                    : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
+                                : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
                                 "></i>
                         </div>
                     </div>
                 </div>
                 <LineChart class="cc"></LineChart>
-                <div class="cb"></div>
+                <div class="cb">
+                    <Card title="富 怡 全 自 动 裁 床">
+                        <DevCard>
+                            <div class="progress">
+                                <dv-water-level-pond :config="pond_config" style="width:120px;height:120px" />
+                                <div class="progress-title">工作时间</div>
+                            </div>
+                        </DevCard>
+                    </Card>
+                </div>
+            </div>
+            <div class="right">
+                <div class="rt">
+                    <Card title="富 怡 全 自 动 铺 布 机 (梭 织)"></Card>
+                </div>
+                <div class="rb">
+                    <Card title="缝纫设备">
+                        <DevCard :dev_title="dev_title" :dev_value="dev_value">                            
+                        <BarChart style="width: 100%;height: 100%;"></BarChart>
+                        </DevCard>
+                    </Card>
+                </div>
             </div>
-            <div class="right"></div>
         </div>
     </div>
 </template>
 
 <script setup lang='ts'>
 import header2 from '@/components/headerBox/header2.vue'
-import Border13 from '@/components/border/Border13.vue'
+import Card from './components/Card.vue';
 import LineChart from './components/LineChart.vue'
-import {ref,getCurrentInstance} from 'vue'
+import BarChart from './components/BarChart.vue'
+import ringChart from "./components/ringChart.vue";
+import DevCard from "./components/DevCard.vue";
+import scrollBoard from "./components/scrollBoard.vue";
+import { ref, reactive, getCurrentInstance } from 'vue'
 
 import { useI18n } from 'vue-i18n'
 let { t } = useI18n();
@@ -68,7 +92,44 @@ let titleTip = [
         name: t('messages.disconnection'),
     },
 ];
+let ringData = ref([]);
+ringData.value = [
+    { name: '工作', value: 7 },
+    { name: '停机', value: 6 },
+    { name: '待机', value: 3 },
+]
+let scrollBoardConfig = reactive({
+    header: ['序号', '设备名称', '机架号', '工作时长', '状态'],//, '故障率'
+    headerBGC: 'rgb(52, 105, 243)',
+    oddRowBGC: '#100c2a',
+    evenRowBGC: '#100c2a',
+    wrap: [false, true, false, false, false],
+    columnWidth: [80, 290, 120, 120, 120, 120],
+    align: ['center', 'center', 'center', 'center', 'center', 'center'],
+    data: [
+        [1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+        [10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
+    ],
+    rawData: []
+})
+let dev_title = ['机架号', '设备状态', '剪线次数', '压脚次数']
+let dev_value = [
+    { a: 102014422, b: '待机', c: '40层', d: '1000片' },
+    { a: 102014422, b: '待机', c: '40层', d: '1000片' },
+]
 
+let pond_config = reactive({
+    data: [55],
+    shape: 'round'
+})
 </script>
 
 <style scoped>
@@ -82,13 +143,11 @@ let titleTip = [
 .header {
     height: 150px;
     width: 1920px;
-    background-color: #100c2a;
 }
 
 .content {
     height: 930px;
     width: 1920px;
-    background-color: #100c2a;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -98,7 +157,6 @@ let titleTip = [
 .right {
     height: 930px;
     width: 600px;
-    background-color: #100c2a;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -107,7 +165,6 @@ let titleTip = [
 .center {
     flex: 1;
     height: 930px;
-    background-color: #100c2a;
     margin: 0 20px;
     display: flex;
     flex-direction: column;
@@ -131,45 +188,71 @@ let titleTip = [
     flex-direction: row;
     justify-content: space-around;
 }
+
 .top-item {
-  width: 30%;
+    width: 30%;
-  height: 100%;
+    height: 100%;
-  background-image: url(@/assets/img/u8.png);
+    background-image: url(@/assets/img/u8.png);
-  background-size: 100% 100%;
+    background-size: 100% 100%;
-  box-sizing: border-box;
+    box-sizing: border-box;
-  padding: 5px;
+    padding: 5px;
-}
-.top-item .div_p {
-  height: 60%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-.div_p .div-p-tip {
-  position: absolute;
-  font-size: 1.5rem;
-  top: 10%;
-  left: 20%;
-}
-h2 {
-  /* color: #fff; */
-  font-size: 18px;
-  line-height: 1.5rem;
-}
-.on {
-  color: #20AEC5;
-  font-size: 3.5rem;
-}
-.off {
-  color: #797979;
-  font-size: 3.5rem;
-}
-.cc,.cb {
-    width: 100%;
-    height: 400px;
-    background-color: #100c2a;
 }
 
+.top-item .div_p {
+    height: 60%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.div_p .div-p-tip {
+    position: absolute;
+    font-size: 1.5rem;
+    top: 10%;
+    left: 20%;
+}
+
+h2 {
+    /* color: #fff; */
+    font-size: 18px;
+    line-height: 1.5rem;
+}
+
+.on {
+    color: #20AEC5;
+    font-size: 3.5rem;
+}
+
+.off {
+    color: #797979;
+    font-size: 3.5rem;
+}
+
+.cc,
+.cb {
+    width: 100%;
+    height: 400px;
+}
+
+.rt,
+.rb {
+    width: 100%;
+    height: 455px;
+}
+
+.progress {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+.progress-title {
+    margin-top: 20px;
+    font-size: 16px;
+    color: #fff;
+}
 </style>