daimp-front/sub-operation-service/src/views/smartFarm/index.vue

<template>
  <section>
    <common>
      <template #main>
        <div>
          <el-card shadow="hover">
            <el-row>
              <el-col :span="10">
                <map-comp style="height: 300px; width: 100%; border: 0"></map-comp>
              </el-col>
              <el-col :span="1">&nbsp;</el-col>
              <el-col :span="13">
                <div class="location">
                  耿马县·孟定镇<img :src="getAssetsFile('images/smartFarm/location.png')" height="20" style="margin-left: 8px" alt="" />
                </div>
                <div style="display: flex; justify-content: space-around">
                  <el-card v-for="(item, index) in weatherData" :key="index" :body-style="{ padding: 0 }" shadow="always" class="weatherCards">
                    <div>{{ item.time }}</div>
                    <div><img :src="getAssetsFile('images/smartFarm/' + item.weather + '.png')" alt="" height="50" /></div>
                    <div>{{ item.temp }}℃</div>
                  </el-card>
                </div>
                <div class="details">
                  <div class="details-block">
                    <div class="detail">
                      <div class="leftTitle">温度</div>
                      <div class="rightValue">
                        {{ currentData.temp }}
                      </div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">PM2.5</div>
                      <div class="rightValue">{{ currentData.PM2 }}μg/m³</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">作物虫害</div>
                      <div class="rightValue">
                        {{ currentData.bugs === 0 ? '无' : '有' }}
                      </div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">土壤温度</div>
                      <div class="rightValue">{{ currentData.dustTemp }}℃</div>
                    </div>
                  </div>
                  <div class="details-block">
                    <div class="detail">
                      <div class="leftTitle">湿度</div>
                      <div class="rightValue">{{ currentData.wet }}%</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">PM10</div>
                      <div class="rightValue">{{ currentData.temp }}μg/m³</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">作物病害</div>
                      <div class="rightValue">
                        {{ currentData.sick === 0 ? '无' : '有' }}
                      </div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">土壤湿度</div>
                      <div class="rightValue">{{ currentData.dustWet }}%</div>
                    </div>
                  </div>
                  <div class="details-block">
                    <div class="detail">
                      <div class="leftTitle">风向</div>
                      <div class="rightValue">
                        {{ currentData.wind }}
                      </div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">光照度</div>
                      <div class="rightValue">{{ currentData.light }}Lux</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">风速</div>
                      <div class="rightValue">{{ currentData.temp }}m/s</div>
                    </div>
                    <div class="detail">
                      <div class="leftTitle">土壤酸碱度</div>
                      <div class="rightValue">
                        {{ currentData.PH }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card shadow="hover" style="margin-top: 10px">
            <div style="display: flex; padding: 20px">
              <div style="width: 30%">
                <div style="font-size: 18px; font-weight: bold; text-align: left">土壤数据</div>
                <div style="display: flex">
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/光照传感器.png')" alt="" />
                      光照
                    </div>
                    <div class="values">2000Lux</div>
                  </div>
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/排风.png')" alt="" />
                      排风
                    </div>
                    <div class="values">15m³/h</div>
                  </div>
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/蒸腾.png')" alt="" />
                      蒸腾
                    </div>
                    <div class="values">2000Lux</div>
                  </div>
                </div>
                <div style="display: flex">
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/土壤湿度.png')" alt="" />
                      湿度
                    </div>
                    <div class="values">26%</div>
                    <div class="values">34%</div>
                  </div>
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/土壤温度.png')" alt="" />
                      温度
                    </div>
                    <div class="values">32℃</div>
                    <div class="values">28℃</div>
                  </div>
                  <div class="dustData">
                    <div>
                      <img :src="getAssetsFile('images/smartFarm/空气.png')" alt="" />
                      空气
                    </div>
                    <div class="values">300ppm</div>
                    <div class="values">34%</div>
                  </div>
                </div>
                <div class="report">
                  <div><img :src="getAssetsFile('images/smartFarm/bell.png')" alt="" /></div>
                  <div class="warning">
                    <div>温度</div>
                    <div>36℃</div>
                  </div>
                  <div class="warning">
                    <div>超高</div>
                    <div>4℃</div>
                  </div>
                </div>
              </div>
              <div style="width: 35%">
                <map-simple style="height: 320px; width: 100%"></map-simple>
              </div>
              <div style="width: 35%">
                <div style="margin-top: 70px; display: flex; text-align: left">
                  <el-col :span="12">
                    <el-row class="dataTitle">泵压管控mpa</el-row>
                    <el-row>
                      <el-col :span="12">
                        <span style="font-size: 15px">输入</span>
                        <span class="values">11</span>
                      </el-col>
                      <el-col :span="12">
                        <span style="font-size: 15px">末端</span>
                        <span class="values">2</span>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row class="dataTitle">灌溉流量m²/h</el-row>
                    <el-row>
                      <el-col :span="12">
                        <span style="font-size: 15px">灌溉</span>
                        <span class="values">18℃</span>
                      </el-col>
                      <el-col :span="12">
                        <span style="font-size: 15px">回液</span>
                        <span class="values">18℃</span>
                      </el-col>
                    </el-row>
                  </el-col>
                </div>
                <div style="display: flex; text-align: left">
                  <el-col :span="12">
                    <el-row class="dataTitle">水肥监测</el-row>
                    <el-row>
                      <el-col :span="12">
                        <span style="font-size: 15px">PH</span>
                        <span class="values">8</span>
                      </el-col>
                      <el-col :span="12">
                        <span style="font-size: 15px">输入</span>
                        <span class="values">18℃</span>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12">&nbsp;</el-col>
                </div>
                <el-row class="dataTitle">灌溉流量m²/h</el-row>
                <charts-flow style="height: 150px; width: 100%"></charts-flow>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" style="margin-top: 10px">
            <div style="display: flex; padding: 20px">
              <div style="width: 50%">
                <div style="font-size: 18px; font-weight: bold; text-align: left">产能预测</div>
                <div style="display: flex; justify-content: flex-start; margin: 20px 0">
                  <div class="plansBlock" style="background-color: #25bf82">
                    <div style="">预计生产</div>
                    <div style="font-weight: 900">300吨</div>
                  </div>
                  <div class="plansBlock" style="background-color: #ffbe4d; margin-left: 5%">
                    <div>预计产值</div>
                    <div style="font-weight: 900">1500万元</div>
                  </div>
                </div>
                <div class="coins">
                  <div style="width: 28%">
                    <div style="text-align: left; font-size: 14px; color: #999999">水质综合评分</div>
                    <div style="display: flex; justify-content: space-between; margin-top: 5px">
                      <div style="display: flex; align-items: center; font-size: 20px">
                        <div class="shu" style="background-color: #3685fe"></div>
                        <div style="margin-left: 5px">87</div>
                      </div>
                      <div style="line-height: 30px">
                        <img :src="getAssetsFile('images/smartFarm/fall.png')" alt="" style="width: 25px; height: 25px" />
                      </div>
                    </div>
                  </div>
                  <div style="width: 28%">
                    <div style="text-align: left; font-size: 14px; color: #999999">病虫害管控评分</div>
                    <div style="display: flex; justify-content: space-between; margin-top: 5px">
                      <div style="display: flex; align-items: center; font-size: 20px">
                        <div class="shu" style="background-color: #25bf82"></div>
                        <div style="margin-left: 5px">87</div>
                      </div>
                      <div style="line-height: 30px">
                        <img :src="getAssetsFile('images/smartFarm/rise.png')" alt="" style="width: 25px; height: 25px" />
                      </div>
                    </div>
                  </div>
                  <div style="width: 28%">
                    <div style="text-align: left; font-size: 14px; color: #999999">环境综合评分</div>
                    <div style="display: flex; justify-content: space-between; margin-top: 5px">
                      <div style="display: flex; align-items: center; font-size: 20px">
                        <div class="shu" style="background-color: #ffd500"></div>
                        <div style="margin-left: 5px">87</div>
                      </div>
                      <div style="line-height: 30px">
                        <img :src="getAssetsFile('images/smartFarm/rise.png')" alt="" style="width: 25px; height: 25px" />
                      </div>
                    </div>
                  </div>
                </div>

                <div class="vars">
                  <div style="display: flex; justify-content: space-between; width: 45%">
                    <div style="color: #999999">种植面积</div>
                    <div style="color: #25bf82; font-weight: 900">500亩</div>
                  </div>
                  <div style="display: flex; justify-content: space-between; width: 45%">
                    <div style="color: #999999">水质监测</div>
                    <div style="color: #25bf82; font-weight: 900">1266次</div>
                  </div>
                </div>
                <div class="vars">
                  <div style="display: flex; justify-content: space-between; width: 45%">
                    <div style="color: #999999">病虫害监测</div>
                    <div style="color: #25bf82; font-weight: 900">367次</div>
                  </div>
                  <div style="display: flex; justify-content: space-between; width: 45%">
                    <div style="color: #999999">环境监测</div>
                    <div style="color: #25bf82; font-weight: 900">1547次</div>
                  </div>
                </div>
              </div>
              <div style="width: 50%">
                <img style="width: 100%" :src="getAssetsFile('images/smartFarm/产能预测.png')" alt="" />
              </div>
            </div>
          </el-card>
        </div>
      </template>
    </common>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Common from './components/common.vue';
import * as echarts from 'echarts';
import MapComp from '@/views/smartFarm/components/mapComp.vue';
import { getAssetsFile } from '@/utils/index.js';
import MapSimple from '@/views/smartFarm/components/mapSimple.vue';
import ChartsFlow from '@/views/smartFarm/components/charts-flow.vue';

/* --------------- data --------------- */
// #region
const weatherData = ref([
  {
    weather: 'sunny',
    time: '15:00',
    temp: '18',
  },
  {
    weather: 'sunnyToCloudy',
    time: '16:00',
    temp: '19',
  },
  {
    weather: 'thunderRain',
    time: '17:00',
    temp: '19',
  },
  {
    weather: 'rainy',
    time: '18:00',
    temp: '18',
  },
  {
    weather: 'rainy',
    time: '19:00',
    temp: '15',
  },
  {
    weather: 'windy',
    time: '20:00',
    temp: '13',
  },
]);

const currentData = ref({
  temp: 18, // 当前温度
  PM2: 80, // 空气质量 μg/m³
  bugs: 0, // 虫害
  dustTemp: 15, // 土壤温度 ℃
  wet: 56, // 湿度 %
  PM10: 120, // 空气质量 μg/m³
  sick: 0, // 病害
  dustWet: 64, // 土壤湿度%
  wind: '东南风', // 风向
  light: 500, // 光照Lux
  windSpeed: 1.5, // 风速 m/s
  PH: 6.5, // 土壤酸碱度
});
// #endregion

/* --------------- methods --------------- */
// #region

// #endregion
</script>

<style lang="scss" scoped>
.vars {
  width: 95%;
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.shu {
  width: 4px;
  height: 30px;
  border-radius: 2px;
}
.coins {
  display: flex;
  width: 95%;
  height: 60px;
  justify-content: space-between;
}
.plansBlock {
  height: 90px;
  width: 45%;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 16px;
}
.values {
  color: #25bf82;
  font-size: 15px;
  margin-left: 5px;
}
.dataTitle {
  margin: 4px 0;
  color: #999999;
}
.warning {
  div {
    margin: 4px 0;
  }
}
.report {
  height: 70px;
  width: 100%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(to left, #ffc9d4 0%, #ffffff 100% /* 底部稍深青色 */);
  img {
    height: 40px;
  }
}
.dustData {
  width: 33%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  font-size: 15px;
  margin: 20px 0;
  .values {
    color: #25bf82;
  }
  img {
    height: 20px;
    margin-right: 5px;
  }
}
.details {
  display: flex;
  justify-content: space-around;
  .details-block {
    width: 29%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .detail {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    .leftTitle {
      font-size: 15px;
      color: #999999;
    }
    .rightValue {
      font-size: 15px;
      color: #25bf82;
    }
  }
}
.location {
  padding: 20px 0;
  text-align: right;
  font-size: 15px;
  color: #000000;
}
.weatherCards {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 15px;
  color: #999999;
  text-align: center;
  height: 120px;
  width: 70px;
  background: linear-gradient(to left bottom, #cfffec 0%, /* 顶部浅青色 */ #fbfefd 70%, /* 中间渐变色 */ #ffffff 100% /* 底部稍深青色 */);
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 150, 136, 0.15);
}
</style>