粉尘监测走势图根据需求添加上限标记

添加智能货架大屏文件

src/components/borderBox/border14.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="">123</div>
+</template>
+
+<script setup lang='ts'>
+</script>
+
+<style scoped></style>

src/locales/lang/en.ts

@@ -309,5 +309,6 @@ export default {
         '微工厂缝纫设备看板':'微工厂缝纫设备看板',
         '工作时间':'工作时间',
         '空闲时间':'空闲时间',
+        '智能货架物联管理系统':'智能货架物联管理系统'
       }
   }

src/locales/lang/zh.ts

@@ -309,5 +309,6 @@ export default {
         '微工厂缝纫设备看板':'微工厂缝纫设备看板',
         '工作时间':'工作时间',
         '空闲时间':'空闲时间',
+        '智能货架物联管理系统':'智能货架物联管理系统'
       }
   }

src/router/index.ts

@@ -258,6 +258,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "TrendChart",
         component: () => import("../views/TrendChart/index.vue"),
       },
+      {
+        path: "/intelligentShelves",
+        name: "intelligentShelves",
+        component: () => import("../views/intelligentShelves/index.vue"),
+      },
 
 
 

src/views/TrendChart/index.vue

@@ -25,6 +25,7 @@ let { t } = useI18n();
 let route = useRoute()
 let ids = route.query.ids as string
 let unit = route.query.unit as string
+let limit = route.query.limit as string
 let timer = null
 document.title = t('messages.传感器监测走势图')
 type calcType = {
@@ -67,13 +68,38 @@ async function ajax() {
         item.name = item.name + '(' + unit + ')'
       }
       if (tempData.hasOwnProperty(item.id)) {
-        tempData[item.id].data.push({
+        let seriesData:any = {
           name: item.type,
           type: 'line',
           showSymbol: false,
           data: item.date.map((key, value) => [key, item.value[value]]),
           smooth: true,
-        })
+        }
+        if (limit&&limit!=='{}') {
+          let arrLimit:object = JSON.parse(limit)
+          let markLineData = []
+          for(let i in arrLimit) {
+            markLineData.push({
+              name: i,
+              yAxis: arrLimit[i],
+              label: {
+                formatter: `${i}上限值：` + arrLimit[i] + unit,
+                position: "middle",
+              },
+              lineStyle: {
+                color: "red", // 这儿设置安全基线颜色
+              },
+            })
+            
+          }
+          seriesData.markLine = {
+          // 设置最大值和最小值
+          silent: true, //基线显示 隐藏
+          symbol: "none", // 不显示箭头和圆点
+          data: markLineData
+        }
+        }
+        tempData[item.id].data.push(seriesData)
         tempData[item.id].math.push({
           key: item.type,
           value: {

src/views/generalEnvironmentMechanical/index.vue

@@ -13,7 +13,7 @@
                     <verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon"
                         :limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
                 </div>
-                <div class="top-box-item" @click="gotoTrendChart(store.pm, 'μg/m3')">
+                <div class="top-box-item" @click="gotoTrendChart(store.pm, 'μg/m3',{PM25:75,PM10:150})">
                     <pm :pm10limit="150" :pm25limit="75"></pm>
                 </div>
                 <div class="top-box-item" @click="gotoTrendChart(store.humiture, '℃/%RH')">
@@ -117,7 +117,7 @@ let humidityBottom = ref({})
 /**
  * 跳转到趋势图
  */
-function gotoTrendChart(value, unit) {
+function gotoTrendChart(value, unit, limit={}) {
     let ids = value.map((item) => item.devId).toString();
     ElMessageBox.confirm(
         '即将跳转到传感器监测走势图页面，是否继续？',
@@ -128,8 +128,9 @@ function gotoTrendChart(value, unit) {
             type: 'info',
         }
     )
+
         .then(() => {
-            router.push({ path: '/TrendChart', query: { ids: ids, unit: unit } })
+            router.push({ path: '/TrendChart', query: { ids: ids, unit: unit,limit:JSON.stringify(limit) } })
         })
         .catch(() => {
 

src/views/index.vue

@@ -289,7 +289,7 @@ let routerList = [
   {
     id: 31,
     path: "/MicrofactoryDevOnline",
-    title: '南门水房物联大屏',
+    title: '微工厂缝纫设备看板',
     url: require("../assets/indexImg/MicrofactoryDevOnline.png"),
   },
 ];

src/views/intelligentShelves/components/ShelfPanel.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="" :style="{width:config.width+'px',height:config.height+'px'}">
+    asdasd
+  </div>
+</template>
+
+<script setup lang='ts'>
+defineProps({
+  config: {
+    type: Object,
+    default: () => {
+      return {
+        width: 421,
+        height: 218
+      }
+    }
+  }
+})
+</script>
+
+<style scoped></style>

src/views/intelligentShelves/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :class="$style['container']">
+    <div class="header">
+      <div class="title">
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.智能货架物联管理系统')" :titleTip="''"
+          :typeFun="['time']" :alarmType="[]">
+        </header2>
+      </div>
+    </div>
+    <div class="content" ref="Acontent">
+      <ShelfPanel :config="panelConfig"></ShelfPanel>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import {ref} from "vue";
+import header2 from "@/components/headerBox/header2.vue";
+import ShelfPanel from "./components/ShelfPanel.vue";
+import { useI18n } from 'vue-i18n'
+let { t } = useI18n();
+
+let panelConfig = ref({
+  width:421,
+  height:218
+})
+</script>
+
+
+<style module>
+.container {
+  height: 1080px;
+  width: 1920px;
+  color: #20aec5;
+  background-color: #100c2a;
+}
+</style>
+<style scoped>
+.content {
+  width: 100%;
+  --header: 100px;
+  height: calc(1080px - var(--header));
+}
+</style>