轨迹图实时查询逻辑更新(去除过滤)

hanbaoshan

2021-01-19 a53f3b0645e3b0455a8c9a4a1cd0f061a8106c8d

轨迹图实时查询逻辑更新(去除过滤)

 src/pages/panoramicView/components/TracePlot.vue

@@ -125,6 +125,7 @@
        });
        return;
      }
      clearInterval(this.timer);
      //判断是否是查历史数据
      if (Date.parse(this.searchTime[1]) < Date.now()) {
        this.filterData()
@@ -140,6 +141,7 @@
        page: 1,
        size: 5000,
        searchTime: this.searchTime,
        timeMark: null,
        alarmlevel: [],
        inputValue: '',
        tabs: [],
@@ -147,7 +149,7 @@
        treeNodes: [],
        isAll: false
      };
      clearInterval(this.timer);
      //clearInterval(this.timer);
      getSearchList(param).then(res => {
        _this.actObjs = [];
        if (!res.data.datalist) {
@@ -222,6 +224,7 @@
      })
    },
    drawTracePath () {
      console.log(this.actObjs)
      let canvas = this.$refs['trackArea'];
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -266,9 +269,14 @@
        treeNodes: [],
        isAll: false
      };
      if((new Date() - _this.timeMark)<_this.intervalTime){
        return
      }
      getSearchList(param).then(res => {
        _this.activeObjHashMap = {};
        _this.actObjs = [];
        if (!res.data.datalist) {
          _this.activeObjHashMap = {};
          //_this.activeObjHashMap = {};
          //_this.actObj = {};
          _this.actObjs = [];
          this.$notify({
@@ -298,7 +306,8 @@
          //filterArr.push(obj)
        });

        filterArr.forEach(item => {
        //filterArr.forEach(item => {
        res.data.datalist.forEach(item => {
          item.activeObject.targetInfo.forEach(target => {
            if (target.targetType == 'UniquelID') {
              let attribute = JSON.parse(target.attribute);
@@ -323,15 +332,6 @@
        _this.searchStartTimeStamp = Date.parse(_this.searchTime[0]);
        _this.searchEndTimeStamp = Date.parse(_this.searchTime[1]);

        // for (var target in _this.actObj) {
        //   _this.actObj[target] = _this.actObj[target].filter(item =>
        //     item.timeStamp >= _this.searchStartTimeStamp && item.timeStamp <= _this.searchEndTimeStamp
        //   )
        //   if (_this.actObj[target].length == 0) {
        //     delete _this.actObj[target]
        //   }
        // }

        for (var i = 0; i < _this.actObjs.length; i++) {
          _this.actObjs[i].posInfo = _this.actObjs[i].posInfo.filter(item => item.timeStamp >= _this.searchStartTimeStamp && item.timeStamp <= _this.searchEndTimeStamp)

@@ -343,14 +343,8 @@
        }
        console.log(new Date(), _this.actObjs);

        // var keyArr = Object.keys(_this.actObj);
        // for (var i = 0; i < keyArr.length; i++) {
        //   _this.actObj[keyArr[i]].forEach(dot => {
        //     dot.color = _this.colorArr[i % 10];
        //   })
        // }
        // console.log(new Date(), _this.actObj)
        _this.drawTracePath();
        _this.timeMark = new Date();
        _this.timer = setTimeout(() => {
          _this.searchData()
        }, _this.intervalTime)

 src/pages/shuohuangMonitorAnalyze/components/charts/line.vue

New file
@@ -0,0 +1,27 @@
<template>
  <div ref="lineChart"></div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object
    }
  },
  mounted(){
    this.initLineChart();
  },
  methods:{
    initLineChart(){
      this.$$nextTick(()=>{
        let dom = this.$echarts.init(this.$refs['lineChart']);
        dom.setOption(this.options);
      })
    }
  }
}
</script>

<style>
</style>

 src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue

@@ -1,5 +1,5 @@
<template>
  <div ref="pieChart" style="width: 100%; height: 100%;"></div>
  <div ref="pieChart" style="width: 600px; height: 300px;"></div>
</template>

<script>

 src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue

@@ -130,6 +130,32 @@
            </div>
          </div>
        </div>
        <div class="statics">
          <div class="lt">
            <div class="statics-part">
              <div class="statics-header">
                <span class="title">乘务员违规统计</span>
                <time-shortcut @actPickerChange="irregularStatistic"></time-shortcut>
              </div>
              <div class="chart-area flex-box">
                <div class="lt">
                  <div class="chart-theme">乘务员总人数</div>
                  <div class="sum">
                    <span class="val">8846</span>
                    <span class="ratio">17.1%</span>
                  </div>
                  <Line :options="optionsOfIrregularSum"></Line>
                </div>
                <div class="gt">
                  <div class="chart-theme">人均违规次数</div>
                  <div class="sum">
                    <span class="val">8846</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@@ -139,8 +165,9 @@
import timeShortcut from './timeShortcut';
import Bar from './charts/bar';
import Pie from './charts/pie';
import Line from './charts/line';
export default {
  components: { timeShortcut, Bar, Pie },
  components: { timeShortcut, Bar, Pie, Line },
  data () {
    return {
      actCardTab: 'dataStatistic',
@@ -183,44 +210,79 @@
        ]
      },
      optionsOfHidDangerPie: {
        tooltip:{
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          right: 10,
          y: 'center',
          data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答']
        },
        series: [
          {
            name:'异常事件',
            type:'pie',
            color: [],
            radius: ['50%','70%'],
            name: '异常事件',
            type: 'pie',
            color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
            radius: ['70%', '90%'],
            //center: ['40%','60%'],
            avoidLabelOverlap: false,
            label:{
            label: {
              show: false,
              position: 'center'
            },
            emphasis:{
              label:{
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine:{
            labelLine: {
              show: false
            },
            data: [
              {value: 270,name:'未鸣笛'},
              {value: 500,name:'未手比'},
              {value: 300,name:'未呼唤'},
              {value: 430,name:'运行中睡觉'},
              {value: 620,name:'未检查'},
              {value: 540,name:'未应答'},
              { value: 270, name: '未鸣笛' },
              { value: 500, name: '未手比' },
              { value: 300, name: '未呼唤' },
              { value: 430, name: '运行中睡觉' },
              { value: 620, name: '未检查' },
              { value: 540, name: '未应答' },
            ]
          }
        ]
      },
      optionsOfIrregularSum: {
        animation: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          label: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          label: {
            show: false
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',

          }
        ]
      }
@@ -228,8 +290,11 @@
  },
  methods: {
    timeShortChange (time) {
      debugger

    },
    irregularStatistic (time) {

    }
  }
}
</script>
@@ -336,16 +401,16 @@
              font-weight: bold;
            }
          }
          .rank-list{
          .rank-list {
            padding: 10px 0;
            .rank-item{
            .rank-item {
              height: 36px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 14px;
              color: #666;
              .rank-index{
              .rank-index {
                width: 20px;
                height: 20px;
                line-height: 20px;
@@ -354,8 +419,8 @@
                border-radius: 50%;
                text-align: center;
              }
              .name{
                width:200px;
              .name {
                width: 200px;
              }
            }
          }