|
@@ -1,4 +1,4 @@
|
|
|
-<!-- <template>
|
|
|
+<template>
|
|
|
<div class="dustGlzb">
|
|
|
<div class="safety-head">
|
|
|
<div class="safety-head-item" v-for="(item, index) in safetyHeadList" :key="index">{{
|
|
@@ -6,12 +6,12 @@
|
|
|
}}</div>
|
|
|
</div>
|
|
|
<div class="safety-content">
|
|
|
- <vue3-seamless-scroll hover-stop="true" :list="safetyList" :hover="true" :step="0.15" class="seamless-warp">
|
|
|
- <div class="safety-content-box" v-for="(ite, ind) in safetyList" :key="ind">
|
|
|
- <span>{{ ite.wd }}</span>
|
|
|
- <span>{{ ite.sd }}</span>
|
|
|
- <span>{{ ite.fs }}</span>
|
|
|
- <span>{{ ite.sy }}</span>
|
|
|
+ <vue3-seamless-scroll hover-stop="true" :list="dustZbList" :hover="true" :step="0.15" class="seamless-warp">
|
|
|
+ <div class="safety-content-box" v-for="(ite, ind) in dustZbList" :key="ind">
|
|
|
+ <span>{{ ite.label || '--' }}</span>
|
|
|
+ <span>{{ ite.temperature || '--' }}</span>
|
|
|
+ <span>{{ ite.windSpeed || '--' }}</span>
|
|
|
+ <span>{{ ite.pwList || '--' }}</span>
|
|
|
</div>
|
|
|
</vue3-seamless-scroll>
|
|
|
</div>
|
|
@@ -33,16 +33,11 @@ let props = defineProps({
|
|
|
|
|
|
let dustZbList = ref<any[]>([])
|
|
|
let safetyHeadList = ref<any[]>([
|
|
|
+ {label:'名称'},
|
|
|
{ label: '温度(°C)' },
|
|
|
- { label: '湿度(%)' },
|
|
|
+ // { label: '湿度(%)' },
|
|
|
{ label: '风速(m/s)' },
|
|
|
- { label: '水压(MPa)' },
|
|
|
-])
|
|
|
-let safetyList = ref<any[]>([
|
|
|
- { wd: 10, sd: 10, fs: 10, sy: 10 },
|
|
|
- { wd: 10, sd: 10, fs: 10, sy: 10 },
|
|
|
- { wd: 10, sd: 10, fs: 10, sy: 10 },
|
|
|
- { wd: 10, sd: 10, fs: 10, sy: 10 },
|
|
|
+ { label: '喷雾数量' },
|
|
|
])
|
|
|
|
|
|
watch(() => props.dustGlzbData, (newD, oldD) => {
|
|
@@ -148,120 +143,8 @@ watch(() => props.dustGlzbData, (newD, oldD) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style> -->
|
|
|
+</style>
|
|
|
|
|
|
|
|
|
-<template>
|
|
|
- <div class="dustGlzb">
|
|
|
- <div class="dust-gl-box" v-for="(item, index) in dustZbList" :key="index">
|
|
|
- <div class="gl-box-content">
|
|
|
- <span class="gl-label">{{ item.label }}</span>
|
|
|
- <span class="gl-val">{{ item.val }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
|
|
|
-<script lang="ts" setup>
|
|
|
-import { reactive, ref, defineProps, watch } from 'vue'
|
|
|
|
|
|
-let props = defineProps({
|
|
|
- dustGlzbData: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return []
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-let dustZbList = ref<any[]>([])
|
|
|
-
|
|
|
-watch(() => props.dustGlzbData, (newD, oldD) => {
|
|
|
- console.log(newD, 'newD--------')
|
|
|
- if (newD.length != 0) {
|
|
|
- dustZbList.value = newD
|
|
|
- }
|
|
|
-}, {
|
|
|
- immediate: true,
|
|
|
- deep: true
|
|
|
-})
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.dustGlzb {
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .dust-gl-box {
|
|
|
- display: flex;
|
|
|
- box-sizing: border-box;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 50%;
|
|
|
- height: 60px;
|
|
|
- padding-top: 10px;
|
|
|
-
|
|
|
- .gl-box-content {
|
|
|
- position: relative;
|
|
|
- width: 254px;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .gl-label {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 49px;
|
|
|
- transform: translate(0, -50%);
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .gl-val {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- right: 24px;
|
|
|
- transform: translate(0, -48%);
|
|
|
- color: #089dff;
|
|
|
- // font-family: douyuFont;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(1) .gl-box-content {
|
|
|
- background: url('../../../../../assets/images/dust/dusthome/gl-1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) .gl-box-content {
|
|
|
- background: url('../../../../../assets/images/dust/dusthome/gl-2.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(3) .gl-box-content {
|
|
|
- background: url('../../../../../assets/images/dust/dusthome/gl-3.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(4) .gl-box-content {
|
|
|
- background: url('../../../../../assets/images/dust/dusthome/gl-4.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(5) .gl-box-content {
|
|
|
- background: url('../../../../../assets/images/dust/dusthome/gl-5.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(6) .gl-box-content {
|
|
|
- background: url('../../../../../assets/images/dust/dusthome/gl-6.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|