123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227 |
- <template>
- <div
- class="lastMonth"
- :class="[screenType === 'hor' ? 'horiLastMonth' : 'verticalLastMonth']"
- >
- <div class="subhead-title"><span>上月数据</span></div>
- <div class="itemWrap">
- <div class="item" v-for="(item, index) in lastDataArr" :key="index">
- <div class="item-left">
- <img :src="item.img" />
- </div>
- <div class="item-right">
- <div class="item-value">
- <span>{{ item.value }}</span
- ><span>{{ item.unit }}</span>
- </div>
- <div class="item-content">
- <div class="item-content-right">
- <div class="max">
- <span>{{ item.maxName }}</span>
- <span>{{ item.max }}</span>
- <span>{{ item.unit }}</span>
- </div>
- <div class="min">
- <span>{{ item.minName }}</span>
- <span>{{ item.min }}</span>
- <span>{{ item.unit }}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import { ref, defineComponent, reactive, toRefs, onMounted } from "vue";
- import { queryEnvHistory } from "@/api/index";
- import { dapingImage } from "@/utils/dapingImage";
- export default defineComponent({
- props: {
- screenType: {
- type: String,
- },
- },
- setup(props, contx) {
-
- const { lastco2, lasthumidity, lastmethanal, lastpm25, lasttemp } =
- dapingImage;
- const allData = reactive({
- lastDataArr: [],
- });
- onMounted(() => {
- queryEnvHistory()
- .then((res) => {
- var lastMonthData = res.data.data || [];
- var lastMonthInit = [
- {
- id: "temp",
- name: "温度",
- code: "Tdb",
- unit: "℃",
- maxName: "最高温",
- minName: "最低温",
- img: lasttemp,
- fixed: 1,
- },
- {
- id: "humidity",
- name: "湿度",
- code: "RH",
- unit: "%",
- maxName: "最大值",
- max: 50,
- minName: "最小值",
- min: 20,
- img: lasthumidity,
- fixed: 0,
- },
- {
- id: "co2",
- name: "CO2",
- code: "CO2",
- value: 2600,
- unit: "ppm",
- maxName: "最大值",
- max: 2600,
- minName: "最小值",
- min: 300,
- img: lastco2,
- fixed: 0,
- },
- {
- id: "methanal",
- name: "甲醛",
- code: "HCHO",
- value: 0.03,
- unit: "mg/m³",
- maxName: "最大值",
- max: 0.01,
- minName: "最小值",
- min: 0.07,
- img: lastmethanal,
- fixed: 2,
- },
- {
- id: "pm25",
- name: "PM2.5",
- code: "PM2d5",
- value: 120,
- unit: "ug/m³",
- maxColor: "#C4E34F",
- minColor: "#7ed874",
- maxName: "最大值",
- max: 340,
- minName: "最小值",
- min: 20,
- img: lastpm25,
- fixed: 0,
- },
- ];
- lastMonthInit.forEach((item) => {
- var filterRes = lastMonthData.filter((ele) => {
- return ele.code == item.code;
- });
- var filterObj = filterRes[0] || {};
- item.value = filterObj.avgData
- ? Number(filterObj.avgData.toFixed(item.fixed))
- : filterObj.avgData;
- item.max = filterObj.maxData
- ? Number(filterObj.maxData.toFixed(item.fixed))
- : filterObj.maxData;
- item.min = filterObj.minData
- ? Number(filterObj.minData.toFixed(item.fixed))
- : filterObj.minData;
- });
- // debugger;
- allData.lastDataArr = lastMonthInit;
- })
- .catch((err) => {});
- });
- return { ...toRefs(allData) };
- },
- });
- </script>
- <style scoped lang="scss">
- .lastMonth {
- .item {
- padding-top: 60px;
- display: flex;
- align-items: center;
- .item-left {
- width: 86px;
- height: 86px;
- margin-right: 20px;
- background: rgba(100, 108, 130, 0.3);
- backdrop-filter: blur(10px);
- border-radius: 12px;
- img {
- width: 86px;
- }
- }
- .item-value {
- font-family: Persagy;
- font-weight: 700;
- font-size: 24px;
- line-height: 30px;
- color: #f7e6cd;
- }
- .item-content {
- display: flex;
- align-items: center;
- padding-top: 8px;
- font-weight: 500;
- font-size: 14px;
- }
- .item-content-right {
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- color: #f7e6cd;
- white-space: nowrap;
- .min {
- padding-top: 8px;
- }
- }
- }
- }
- .horiLastMonth {
- height: 100%;
- padding-left: 35px;
- .item {
- padding-top: 0;
- }
- .itemWrap {
- height: calc(100% - 30px);
- display: flex;
- flex-direction: column;
- justify-content: space-evenly;
- }
- }
- .verticalLastMonth {
- height: 400px;
- padding: 0 36px;
- background: rgba(149, 162, 194, 0.1);
- backdrop-filter: blur(40px);
- border-radius: 20px;
- .itemWrap {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- // justify-content:space-around;
- .item {
- width: 33.33%;
- // justify-content: center;
- .item-content-right {
- font-size: 14px;
- white-space: nowrap;
- }
- }
- }
- }
- </style>
|