open-platform-admin-ui/src/views/equipment/passenger/Detail.vue

<template>
  <div class="app-container">
    <el-row
      :gutter="20"
      style="
        height: 200px;
        font-size: 12px;
        color: #333333;
        margin-bottom: 20px;
      "
    >
      <el-col :span="6">
        <el-card class="card">
          <strong>天气</strong>
          <span style="color: #999999; margin-left: 34px">
            {{ getDateTime() }}
          </span>
          <div style="clear: both" />
          <div style="margin-top: 30px">
            <el-image
              src="/images/rain@3x.png"
              style="width: 30px"
              v-if="qweather.now.weatherName === '雨'"
            />
            <el-image
              src="/images/snow@3x.png"
              style="width: 30px"
              v-else-if="qweather.now.weatherName === '雪'"
            />
            <el-image
              src="/images/cloud@3x.png"
              style="width: 30px"
              v-else-if="qweather.now.weatherName === '云'"
            />
            <el-image src="/images/sun@3x.png" style="width: 30px" v-else />
            <span style="font-size: 20px; margin-left: 24px">
              {{ qweather.now.temp }}
            </span>
            <span>℃</span>
            <span style="color: #ffaa33; margin-left: 10px">
              {{ qweatherAir.now.text }}
            </span>
          </div>
          <el-divider />
          <span style="color: #666666">
            {{ qweather.now.windDir }} {{ qweather.now.windScale }}级
          </span>
          <el-divider direction="vertical" style="padding: 0 10px" />
          <span
            style="
              display: inline-block;
              background: #f37868;
              padding: 2px 8px;
              color: white;
              border-radius: 2px;
            "
          >
            体感温度&nbsp;&nbsp;{{
              sendibleTemperature(qweather.now.feelsLike)
            }}
          </span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <strong>空气质量</strong>
          <el-row style="margin-top: 40px">
            <el-col :span="11" style="text-align: center">
              <div style="color: #999999">空气质量指数</div>
              <div style="color: #45ca9d; line-height: 85px; font-size: 50px">
                {{ qweatherAir.now.aqi }}
              </div>
            </el-col>
            <el-col :span="2">
              <el-divider direction="vertical" class="vertical-divider-100" />
            </el-col>
            <el-col :span="11" class="air-quality-info">
              <div>首要污染物：{{ qweatherAir.now.primary }}</div>
              <div>PM2.5：{{ qweatherAir.now.pm2p5 }}</div>
              <div>空气质量：{{ qweatherAir.now.category }}</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <strong>交通情况</strong>
          <div
            @click="goToTraffic()"
            style="
              color: #45ca9d;
              font-size: 30px;
              line-height: 50px;
              padding: 25px 0;
              text-align: center;
            "
          >
            畅通
          </div>
          <el-row>
            <el-col :span="12">
              <div style="background: #d34400" class="sample-block" />
              严重拥挤
            </el-col>
            <el-col :span="12">
              <div style="background: #ff8b33" class="sample-block" />
              拥挤
            </el-col>
          </el-row>
          <div style="height: 10px" />
          <el-row>
            <el-col :span="12">
              <div style="background: #ffaa33" class="sample-block" />
              缓行
            </el-col>
            <el-col :span="12">
              <div style="background: #45ca9d" class="sample-block" />
              畅通
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <strong>负氧离子</strong>
          <el-row style="margin-top: 40px">
            <el-col :span="11" style="text-align: center">
              <div style="color: #999999">负氧离子(个/cm3)</div>
              <div style="color: #45ca9d; line-height: 85px; font-size: 50px">
                1688
              </div>
            </el-col>
            <el-col :span="2">
              <el-divider direction="vertical" class="vertical-divider-100" />
            </el-col>
            <el-col :span="11" class="air-quality-info">
              <div>湿度：{{ qweather.now.humidity }}%</div>
              <div>气压：{{ qweather.now.pressure }}Pa</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="8">
        <el-card>
          <div slot="header">节假日访客数量</div>
          <div id="visitorsListEchart" style="width: 100%; height: 200px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">节假日访客停留时长（分钟）</div>
          <div id="timersListEchart" style="width: 100%; height: 200px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">出入境数据</div>
          <div id="entryAndExitEchart" style="width: 100%; height: 200px"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-bottom: 20px">
      <div slot="header">实时概况</div>
      <el-row>
        <el-col :span="4">
          <p style="font-size: 14px">流入量</p>
          <p style="font-size: 20px">{{ detailData.inCount }}</p>
        </el-col>
        <el-col :span="4">
          <p style="font-size: 14px">流出量</p>
          <p style="font-size: 20px">{{ detailData.outCount }}</p>
        </el-col>
        <el-col :span="4">
          <p style="font-size: 14px">总接待人数</p>
          <p style="font-size: 20px">
            {{ Number(detailData.inCount) + Number(detailData.outCount) }}
          </p>
        </el-col>
        <el-col :span="4">
          <p style="font-size: 14px">实时容量</p>
          <p style="font-size: 20px">
            {{ detailData.inCount - detailData.outCount > 0 ? detailData.inCount - detailData.outCount : 0 }}
          </p>
        </el-col>
        <el-col :span="4">
          <p style="font-size: 14px">平均停留时长</p>
          <p style="font-size: 20px">
            {{ detailData.avgStayTime ? detailData.avgStayTime : 0 }}
          </p>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="16">
      <el-col :span="12">
        <el-card>
          <div slot="header">性别</div>
          <div id="gender-box" style="width: 100%; height: 200px" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">来源</div>
          <div id="from-source-box" style="width: 100%; height: 200px" />
        </el-card>
      </el-col>
      <!-- <el-col :span="8">
        <el-card>
          <el-row
            v-for="item in detailData.listFromSource"
            :key="item.name"
            style="margin: 12px 0"
          >
            <el-col :span="12">{{ item.name }}</el-col>
            <el-col :span="12">{{ item.value }}人次</el-col>
          </el-row>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>
<style>
.card {
  width: 100%;
  height: 200px;
  float: left;
}

.card strong {
  font-size: 24px;
}

.vertical-divider-100 {
  height: 88px;
}

.air-quality-info {
  font-size: 12px;
  color: #999999;
  line-height: 30px;
}

.sample-block {
  width: 20px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
</style>
<script>
import * as echarts from 'echarts'
import { findDetail, qweatherGet, qweatherAir, ambitusRoadConditions } from '@/api/equipment/equipment_passenger'
import { passenger } from '@/api/bz/monitor'

export default {
  components: {},
  data() {
    return {
      detailData: {},
      qweather: { now: {} },
      qweatherAir: { now: {} }
    }
  },
  computed: {},
  mounted() {
    const id = this.$route.params.id
    const queryForm = this.$route.query;
    findDetail(id, queryForm.orgId).then(detailData => {
      if (detailData.latLng) {
        const latLng = detailData.latLng.split(/,/g);
        detailData.lat = latLng[0];
        detailData.lng = latLng[1];
      }
      this.detailData = detailData
      this.buildVisitorsList('visitorsListEchart', this.detailData.visitorsList);
      this.buildVisitorsList('timersListEchart', this.detailData.visitorsList.map(r => {
        r.value = r.value > 10000 ? 113 : 96;
        return r;
      }));
      this.loadQweather();


      const crj = [{ label: '出境', value: detailData.outCount }, { label: '入境', value: detailData.inCount }]
      this.buildVisitorsList('entryAndExitEchart', crj);

      this.buildFromSource(detailData.listFromSource.map(r => {
        r.name = r.label;
        return r;
      }));

      let gender = [{ name: '男', value: 0 }, { name: '女', value: 0 }]
      const genderBox = detailData.listGenders;
      if (genderBox) gender = [{ name: '男', value: genderBox.male }, { name: '女', value: genderBox.female }];
      this.buildGender(gender);
    })

    // passenger({ orgId: queryForm.orgId }).then(data => {
    //   let gender = [{ name: '男', value: 0 }, { name: '女', value: 0 }]
    //   const genderList = data.spot;
    //   if (genderList != null && genderList.length > 0) {
    //     gender = gender.map(r => {
    //       const filter = genderList.filter(l => l.name === r.label);
    //       if (filter != null && filter.length > 0) {
    //         r.value = filter[0].value;
    //       }
    //       return r;
    //     });
    //   }
    //   this.buildGender(gender);
    // })
  },
  methods: {
    loadQweather() {
      qweatherGet(this.detailData.lat, this.detailData.lng).then(data => {
        this.qweather = data;
      });
      qweatherAir(this.detailData.lat, this.detailData.lng).then(data => {
        this.qweatherAir = data;
      });
      ambitusRoadConditions(this.detailData.lat, this.detailData.lng).then(data => {
        console.log(data);
      });
    },
    sendibleTemperature(temperature) {
      if (temperature < 8) {
        return '冷';
      } else if (temperature < 18 && temperature >= 8) {
        return '凉爽';
      } else if (temperature < 29 && temperature >= 18) {
        return '舒适';
      } else if (temperature >= 29) {
        return '热';
      } else {
        return '正常';
      }
    },
    goToTraffic() {
      const lat = this.detailData.lat;
      const lng = this.detailData.lng;
      this.$router.push(`/equipment/passenger/traffic?lat=${lat}&lng=${lng}`)
    },
    dateFilter: function (date) {
      if (date < 10) {
        return "0" + date;
      }
      return date;
    },
    getDateTime() {
      var dateObj = new Date(); //表示当前系统时间的Date对象
      var year = dateObj.getFullYear(); //当前系统时间的完整年份值
      var month = dateObj.getMonth() + 1; //当前系统时间的月份值
      var date = dateObj.getDate(); //当前系统时间的月份中的日
      var day = dateObj.getDay(); //当前系统时间中的星期值
      var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
      var hour = dateObj.getHours(); //当前系统时间的小时值
      var timeValue = "" + ((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午"); //当前时间属于上午、晚上还是下午

      return this.dateFilter(month) + "月" + this.dateFilter(date) + "日 " + " " + week + " " + timeValue;
    },
    buildVisitorsList(chartId, visitorsList) {
      const chart = echarts.init(document.getElementById(chartId));
      const data = visitorsList.map(v => v.label);
      const series = { name: '', type: 'bar', data: visitorsList.map(v => v.value) };
      chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10px',
          left: '80px',
          right: '25px',
          bottom: '20px'
        },
        xAxis: {
          type: 'category',
          data: data
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        series: series
      });
    },
    buildGender(listGenders) {
      const chart = echarts.init(document.getElementById('gender-box'))
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: '0',
          orient: 'vertical'
        },
        grid: {
          left: '8%',
          right: '10%',
          bottom: '1%',
          containLabel: true
        },
        series: [
          {
            name: '客流性别',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: listGenders
          }
        ]
      })
    },
    buildFromSource(listFromSource) {
      const chart = echarts.init(document.getElementById('from-source-box'))
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: '0',
          orient: 'vertical'
        },
        grid: {
          left: '8%',
          right: '10%',
          bottom: '1%',
          containLabel: true
        },
        series: [
          {
            name: '客流来源地',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: listFromSource
          }
        ]
      })
    }
  }
}
</script>