epmet-work-pc/src/views/modules/visual/shundeju/controlCount.vue

<template>
  <div class="warning-box">
    <cpt-card :min-full-screen="true">
      <div class="card-title">
        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
        <div class="title-label">
          访客统计分析
        </div>
      </div>
      <div class="card-left-title mt30">
        访客分析 &nbsp;&nbsp;
        <div class="title-time new-time">
          <!-- <div class="title-time-label">选择时间</div> -->
          <div class="second-select">
            <!-- <el-date-picker v-model="timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              prefix-icon="el-icon-caret-bottom"
              value-format="yyyy-MM-dd"
              >
            </el-date-picker> -->
            <el-date-picker
              v-model="lineTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="echarts-container">
        <div id="echartsBox" class="echarts-boxs"></div>
      </div>
      <div class="card-left-title mt30">
        访客记录
        &nbsp;&nbsp;
        <div class="title-time new-time">
          <!-- <div class="title-time-label">选择时间</div> -->
          <div class="second-select">
            <el-date-picker v-model="timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              prefix-icon="el-icon-caret-bottom"
              value-format="yyyy-MM-dd"
              >
            </el-date-picker>
          </div>
        </div>  
      </div>
      <div class="warning-box-bottom">
        <screen-table
          :operate="false"
          :headerStyle="headerStyle"
          :tableContentStyle="headerStyle"
          :headerList="headerList"
          :tableData="tableData"
          :visibleLoading="visibleLoading"
        ></screen-table>
        <div class="pagination">
          <el-pagination hide-on-single-page
            :current-page="pageNo"
            :page-size="pageSize"
            background
            layout="prev, pager, next"
            @size-change="pageSizeChangeHandleNew"
            @current-change="pageCurrentChangeHandleNew"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </cpt-card>
  </div>
</template>

<script>
import { requestPost, requestGet } from "@/js/dai/request";
import screenTable from "./screen-table";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";
import * as echarts from 'echarts';
export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable
  },
  data() {
    return {
      headerStyle: [
        {
          'max-width': '100px'
        },
        {
          'min-width': '150px'
        },
        {
          'min-width': '210px'
        },
        {
          'min-width': '20px'
        },
        {
          'min-width': '20px'
        },
        {
          'min-width': '20px'
        },
        {
          'min-width': '210px'
        },
        {
          'min-width': '400px',
          'white-space':'pre-wrap'
        },
        {
          'min-width': '50px'
        },
        {
          'min-width': '50px'
        },
        {
          'min-width': '50px'
        },
        {
          'min-width': '50px'
        }
      ],
      headerList: [
        { title: "姓名", coulmn: 'name' },
        { title: "人脸", coulmn: 'faceImg' },
        { title: "身份证", coulmn: 'idCard' },
        { title: "性别", coulmn: 'gender' },
        { title: "手机号", coulmn: 'mobile' },
        { title: "类型", coulmn: 'type' },
        { title: "出入时间", coulmn: 'createdTime' },
        { title: "进入原因", coulmn: 'visitReason' },
        { title: "小区", coulmn: 'residential' },
        { title: "楼号", coulmn: 'building' },
        { title: "单元", coulmn: 'unit' },
        { title: "房间", coulmn: 'room' },
      ],
      timeRange: '',
      tableData: [],
      visibleLoading: true,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      startTime: '',
      endTime: '',
      lineTime: new Date()
    };
  },
  watch: {
    timeRange(val) {
      console.log('val-www', JSON.stringify(val))
      if (!val) return false
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.startTime = val[0]
      this.endTime = val[1]
      this.getVisitVisitorPage()
    },
    lineTime  (val) {
      if (val) {
        this.getChartTraffic()
      }
    },
  },
  async mounted() {
    this.initTime()
    await nextTick(100);
    await this.getChartTraffic()
    await this.getVisitVisitorPage()
  },
  methods: {
    // 从这里开始写
    async getChartTraffic () {
      const url = "/pli/power/visitVisitor/chart/traffic";
      let params = {
        date: this.timeFormat(this.lineTime)
      };
      const { data, code, msg } = await requestPost(url, params);
        if (code === 0) {
        console.log('pie-data', data)
        let xData = []
        let yData = []
        if (data && data.length > 0) {
          data.forEach(item => {
            xData.push(item.hour)
            yData.push(item.num)
          });
        }
        this.initCharts(xData, yData)
      } else {
      }
    },
    async getVisitVisitorPage () {
      const url = "/pli/power/visitVisitor/page";
      let params = {
        page: this.pageNo,
        limit: this.pageSize,
        startTime: this.startTime + ' 00:00:00',
        endTime: this.endTime + ' 23:59:59'
      };
      const { data, code, msg } = await requestGet(url, params);
      if (code === 0) {
        this.tableData = data.list.map((item, index) => {
          if (item.gender == "0") {
            item.gender = '女'
          } else if (item.gender == "1") {
            item = '男'
          } else {
            item = '未知'
          }
          return {
            ...item,
            index: index + 1
          }
        })
        this.total = data.total
        
      } else {
      }
      this.visibleLoading = false;
    },
    initCharts(xData, yData) {
      const eId = document.getElementById('echartsBox')
      let _charts = echarts.init(eId)

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          },
          backgroundColor: 'transprant',
          borderColor: 'transprant',
          textStyle: {
            color: '#fff'
          },
          formatter: params => {
              const total = params[0].data
              const xName = params[0].axisValue
              let title = `<div style='margin-bottom: 10px;'><span>${xName} 时 -- </span>${total}人</div>`
              return title
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#8ec7dc',
            fontSize: 16
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#0c4b59'
            }
          },
          data: xData
        },
        yAxis: {
          nameTextStyle: {
            color: '#8ec7dc',
            fontSize: 18
          },
          splitNumber: 4,
          minInterval: 1,
          show: true,
          type: 'value',
          axisLabel: {
            color: '#8ec7dc',
            fontSize: 18
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['#145968'],
              type: 'dotted'
            }
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'],
            symbolOffset: [0, 15],
            lineStyle: {
              color: '#0c4b59'
            }
          }
        },
        series: [
          {
            name: '数量',
            type: 'line',
            smooth: true,
            barWidth: 15,
            areaStyle: {},
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 1, 0, 0,
                [
                  { offset: 0, color: 'rgba(121, 55, 255, 0)' },
                  { offset: 1, color: '#6339FF' }
                ]
              )
            }
          },
          {
            data: yData,
            type: 'line',
            areaStyle: {}
          }
        ]
      };

      option && _charts.setOption(option);
    },
    initTime() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      console.log('time-rtt', this.timeFormat(start), this.timeFormat(end))
      this.timeRange = [this.timeFormat(start), this.timeFormat(end)]
    },
    timeFormat(date) {
      if (!date || typeof date === 'string') {
        return false
      }
      var y = date.getFullYear() //年
      var m = date.getMonth() + 1 //月
      if (m < 10) m = '0' + m
      var d = date.getDate() //日
      if (d < 10) d = '0' + d

      return y + '-' + m + '-' + d
    },

    handleCascader(val) {
      console.log('val-vvv', val)
      if (val.length > 0) {
        const _arr = val[val.length - 1].split('-')
        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
        // this.getServicePie(_arr[0], orgType)
      }
    },
    pageSizeChangeHandleNew(val) {
      this.pageNo = 1;
      this.pageSize = val;
      this.getVisitVisitorPage()
    },
    pageCurrentChangeHandleNew(val) {
      this.pageNo = val;
      this.getVisitVisitorPage()
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>
<style lang="scss" scoped>
.new-time{
  display: flex;
  align-items: center;
}
.warning-box-bottom {
  margin-top: 10px;
}
.card-title {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 4px 2px;

  .title-icon {
    display: block;
    // width: 46px;
    // height: 34px;
    box-sizing: border-box;
    margin-right: 5px;
  }
  ::v-deep .el-dropdown {
    font-size: 16px;
    color: #fff;
    font-weight: 800;
  }
  .title-time {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-left: 10px;
    font-size: 14px;
    color: #fff;
    .title-time-label {
      margin-right: 10px;
    }
    ::v-deep .el-date-editor--month {
      width: 100px;
      .el-input__inner {
        width: 100px;
        height: 24px;
        box-sizing: border-box;
        padding: 0;
        font-size: 14px;
        color: #fff;
        line-height: 24px;
        text-align: center;
        background: #06186D;
        border: 1px solid #1A64CC;
        border-radius: 2px;
      }
      .el-input__prefix {
        display: none;
      }
      .el-input__suffix {
        right: 0;
        .el-input__icon {
          line-height: 24px;
        }
      }
      
    }
  }

  .title-label {
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 800;
    ::v-deep .el-input {
      width: 180px;
      .el-input__inner {
        font-size: 18px;
        // font-weight: 800;
        color: #fff;
        background: #06186d;
        border: 1px solid #1a64cc;
      }
      .el-icon-arrow-down::before {
          content: "\e790";
      }
    }
  }
}
.card-left-title {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.card-left-title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  margin-top: -6px;
  background: #2865FA;
  border-radius: 50%;
}
.second-select {
    margin: 0 10px 0 0;
    ::v-deep .el-input {
      width: 180px;
      height: 36px;
      .el-input__inner {
        height: 100%;
        padding: 0 10px;
        color: #fff;
        line-height: 36px;
        background: #06186d;
        border: 1px solid #1a64cc;
      }

      .el-icon-arrow-up:before {
        content: "\e78f";
      }
      // .el-select__caret:before {
      //   content: '\E790'
      // }
    }
    ::v-deep .el-date-editor {
      width: 360px;
      position: relative;
      background: #06186d;
      border: 1px solid #1a64cc;
      .el-range-input {
        color: #fff;
        background: #06186d;
      }
      .el-range-separator {
        color: #fff;
      }
      .el-range__icon {
        position: absolute;
        right: 5px;
        // float: right;
      }
      .el-input__prefix {
        left: unset;
        right: 5px;
      }
    }
  }
.card-echart {
  display: flex;
  margin-top: 40px;
  .card-left {
    position: relative;
    flex: 1;
    display: flex;
    
  }
}
.echart-wr {
  position: relative;
  flex-shrink: 0;
  width: 50%;
  height: 320px;
  box-sizing: border-box;
  .echart-org {
    width: 100%;
    height: 100%;
  }
  .echart-cicle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 240px;
    box-sizing: border-box;
    margin-top: -120px;
    margin-left: -120px;
    border: 1px dashed rgba(0, 96, 240, 1);
    border-radius: 50%;
  }
}

.echarts-tips {
  width: 40%;
  // flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.echarts-tips-wd50 {
  width: 50%;
}
.tips-list, .tips-item, .tips-lists, .tips-items-num {
  display: flex;
  align-items: center;
}
.tips-list {
  // width: 100%;
  // height: 100%;
  flex-wrap: wrap;
  // justify-content: center;
  .tips-item {
    // flex: 1;
    width: 50%;
    margin-top: 20px;
    // margin-right: 40px;
    cursor: pointer;
    .tips-item-icon {
      width: 20px;
      height: 10px;
      box-sizing: border-box;
      margin-right: 8px;
      background: #1B51FF;
      border-radius: 2px;
    }
    .tips-item-text {
      font-size: 16px;
      color: #D2E7FF;
    }
  }
}
.tips-lists {
  width: 100%;
  flex-wrap: wrap;
  .tips-items {
    margin-bottom: 30px;
    width: 50%;
    .tips-items-title {
      font-size: 16px;
    }
    .tips-items-num {
      justify-content: space-between;
      box-sizing: border-box;
      margin-top: 20px;
      padding-right: 30px;
      font-size: 20px;
      .tips-item-has {
        font-size: 14px;
      }
    }
  }
}


.echarts-boxs {
  width: 100%;
  height: 400px;
}

.ecahrts-button {
  width: 100%;
  text-align: right;
  ::v-deep .el-button--warning {

    background: linear-gradient(90deg, #0863EA, #3B9FFC);
    border: 0;
  }
}
.mt30 {
  margin-top: 30px;
  display: flex;
  align-items: center;
}
</style>