123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- <template>
- <div class="mineWind">
- <div class="mine-title">{{ mineTitle }}</div>
- <div class="mine-content">
- <div class="content-label">
- <div class="label-t" v-for="(ite, ind) in labelList" :key="ind">{{ ite.name }}</div>
- </div>
- <div class="content-text">
- <div class="text" v-for="(item, index) in mineData" :key="index">
- <span>{{ item.deviceName }}</span>
- <span>{{ filterBadValue(item.jf) }}</span>
- <span>{{ filterBadValue(item.hf) }}</span>
- <span>{{ filterBadValue(item.xf) }}</span>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- import { ref, reactive, watch, defineProps } from 'vue';
- let props = defineProps({
- airKjStatus: {
- type: Array,
- default: () => {
- return [];
- },
- },
- });
- let mineTitle = ref('矿井通风状态监测');
- let labelList = reactive([{ name: '矿井名称' }, { name: '总进风量' }, { name: '总回风量' }, { name: '总需风量' }]);
- let mineData = ref<any[]>([]);
- // 过滤不合法的值,小于5000的视为传感器出错
- function filterBadValue(val: number | string) {
- const valid = parseInt(val) > 5000;
- return valid ? val : '/';
- }
- watch(
- () => props.airKjStatus,
- (newA, oldA) => {
- console.log(newA, 'airKjStatus-----------');
- if (newA.length != 0) {
- mineData.value = newA;
- }
- },
- {
- immediate: true,
- deep: true,
- }
- );
- </script>
- <style lang="less" scoped>
- @font-face {
- font-family: 'douyuFont';
- src: url('../../../../assets/font/douyuFont.otf');
- }
- .mineWind {
- position: relative;
- width: 100%;
- height: 100%;
- .mine-title {
- position: absolute;
- left: 50px;
- top: 12px;
- color: #fff;
- font-family: 'douyuFont';
- font-size: 14px;
- }
- .mine-content {
- height: 100%;
- padding: 62px 0px 28px 0px;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- align-items: center;
- .content-label {
- width: 366px;
- height: 32px;
- display: flex;
- justify-content: space-around;
- align-items: center;
- background: url('../../../../../assets/images/company/content-label.png') no-repeat;
- .label-t {
- color: #3df6ff;
- text-align: center;
- font-size: 14px;
- &:nth-child(1) {
- width: 31%;
- }
- &:nth-child(2) {
- width: 23%;
- }
- &:nth-child(3) {
- width: 23%;
- }
- &:nth-child(4) {
- width: 23%;
- }
- }
- }
- .content-text {
- height: calc(100% - 32px);
- width: 378px;
- display: flex;
- flex-direction: column;
- // justify-content: space-around;
- justify-content: flex-start;
- padding: 5px 0px;
- box-sizing: border-box;
- overflow-y: auto;
- .text {
- width: 100%;
- height: 28px;
- display: flex;
- justify-content: space-around;
- align-items: flex-start;
- background: url('../../../../../assets/images/company/content-text.png') no-repeat;
- color: #fff;
- margin-bottom: 5px;
- span {
- display: inline-block;
- text-align: center;
- &:nth-child(1) {
- width: 31%;
- }
- &:nth-child(2) {
- width: 23%;
- }
- &:nth-child(3) {
- width: 23%;
- }
- &:nth-child(4) {
- width: 23%;
- }
- }
- }
- }
- }
- }
- </style>
|