修改危废品箱大屏

src/views/Hazardous/components/Card.vue

@@ -6,7 +6,8 @@
         <div class="card-content" :class="{ noborder,'red-bg':prop.config.value>=prop.config.limit }">
             <div v-if="prop.config.type == 1" class="type1">
                 <div class="img">
-                    <img :src="prop.config.image">
+                    <img :src="prop.config.image" v-if="prop.config.value<prop.config.limit">
+                    <img :src="prop.config.image1" v-else>
                 </div>
                 <div class="text">
                     {{ prop.config.value }}{{ prop.config.unit }}
@@ -18,7 +19,7 @@
                 </div>
                 <div class="text2">
                     <div class="text2-l " :class="[prop.config.value == 0?'grey':'green']"></div>
-                    <div class="text2-r">{{ prop.config.value == 0?'关闭':'开启' }}</div>
+                    <div class="text2-r" :class="[prop.config.value == 0?'grey':'green']">{{ prop.config.value == 0?'关闭':'开启' }}</div>
                 </div>
             </div>
             <div v-if="prop.config.type == 3" class="type3">
@@ -94,7 +95,7 @@ const porptitle = computed(() => {
     box-sizing: border-box;
 }
 .red-bg {
-    background-color: #2C273A;
+    background-color: rgba(228, 57, 97, 0.1411764705882353);
 }
 
 .noborder {
@@ -160,6 +161,15 @@ const porptitle = computed(() => {
 .text2-l.green {    
     background-color: #53FFC3;
 }
+.text2-r.grey {    
+    color: #A7A6BD;
+    /* background-color: #A7A6BD; */
+}
+
+.text2-r.green {    
+    color: #53FFC3;
+    /* background-color: #53FFC3; */
+}
 .text2-r {
     font-size: 14px;
 }

src/views/Hazardous/index.vue

@@ -40,21 +40,26 @@
                 <div class="box2">
                     <Border :title="'报警记录'">
                         <ZdScrollBoard ref="devList" :config="board_config" :style="{
-                    width: '100%',
+                            width: '100%',
-                    height: '100%',
+                            height: '100%',
-                }" />
+                        }" v-show="!isempty" />
+                        <div v-show="isempty"
+                            style="display: flex; align-items: center;width: 100%;height: 100%;justify-content: center;">
+                            <el-empty :image-size="120" />
+                        </div>
                     </Border>
                 </div>
             </div>
 
         </div>
-        <HDialog :tableData="dialogdata" :title="DialogTitle" v-model:dialogTableVisible="dialogTableVisible" :dialogLoading="dialogLoading"
+        <HDialog :tableData="dialogdata" :title="DialogTitle" v-model:dialogTableVisible="dialogTableVisible"
-            @getDialogdatafun="getDialogdatafun" :total="dialogtotal" :type="dialogType"></HDialog>
+            :dialogLoading="dialogLoading" @getDialogdatafun="getDialogdatafun" :total="dialogtotal" :type="dialogType">
+        </HDialog>
     </div>
 </template>
 
 <script setup lang='ts'>
-import { ref, reactive, onMounted, onUnmounted,computed } from 'vue';
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
 
 
 import header2 from '@/components/headerBox/header2.vue'
@@ -64,7 +69,8 @@ import LineChart from './components/LineChart.vue';
 import ZdScrollBoard from "@/components/data-view/index.vue";
 import HDialog from './components/HDialog.vue';
 
-import { getGuoJian24Trend, getAirWind,getGuoJianAlarmRecord } from '@/http/guojian/index'
+import { getGuoJian24Trend, getAirWind, getGuoJianAlarmRecord } from '@/http/guojian/index'
+import { update } from '@tweenjs/tween.js';
 
 let timer = null
 let titleTip = [
@@ -88,7 +94,7 @@ const config = reactive({
         type: 1,
         classArr: [],
         value: 0,
-        limit: 70,
+        limit: 80,
         unit: '%RH'
     },
     wendu: {
@@ -97,7 +103,7 @@ const config = reactive({
         type: 1,
         classArr: [],
         value: 0,
-        limit: 30,
+        limit: 40,
         unit: '℃'
     },
     kongtiao: {
@@ -153,6 +159,7 @@ const calc = reactive({
     xAxis: [],
 })
 let devList = ref()
+let isempty = ref(false)
 let board_config = reactive({
     header: ['报警时间', '名称', '状态', '持续时长'],
     headerBGC: '#081B56',
@@ -230,7 +237,7 @@ let DialogTitle = computed(() => {
 });
 function showDialog(type) {
     if (dialogTableVisible.value == false) {
-    dialogType.value = type;
+        dialogType.value = type;
         getDialogdatafun({
             type: type,
             pageSize: 10,
@@ -269,7 +276,12 @@ async function getGuoJianAlarmRecordList() {
                 items.sum + '分钟',
             ]
         })
-        devList.value.updateRows(updateList,board_config)
+        if (updateList.length == 0) {
+            isempty.value = true
+        } else {
+            isempty.value = false
+        }
+        devList.value.updateRows(updateList, board_config)
     }
 }
 onMounted((() => {
@@ -277,6 +289,7 @@ onMounted((() => {
     getGuoJianAlarmRecordList()
     timer = setInterval(() => {
         getGuoJian24TrendData()
+        getGuoJianAlarmRecordList()
     }, 1000 * 60)
 }))