guzijian / wvp-GB28181-pro · Files

<template>
  <div style="width: 2000px;">
    <el-container v-loading="loading" style="height: 100%;width: 100%" element-loading-text="拼命加载中">
      <div style="width:100%;display: flex;flex-direction: column;justify-content: space-between;">
        <div class="block" style="width: 100%;text-align:left;margin-bottom:15px;">
          <el-card class="box-card" style="width: 100%">
            <el-form>
              <el-col :span="4">
                <el-form-item label="时间类型">
                  <el-select v-model="timeType" placeholder="请选择时间类型">
                    <el-option
                      v-for="item in timeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      @change="getDatesByTimeFrame">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="time"
                    align="right"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions" v-if="timeType === 'day'"/>
                  <el-date-picker
                    v-model="time"
                    value-format="yyyy-M"
                    type="month"
                    placeholder="选择月" v-if="timeType === 'month'"/>
                  <el-date-picker
                    v-model="time"
                    value-format="yyyy"
                    type="year"
                    placeholder="选择年" v-if="timeType === 'year'"/>
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="statisticsType !== 'All'">
                <el-form-item label="车辆">
                  <car-tree-one v-model="sim_channel" />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="统计类型">
                  <el-select v-model="statisticsType" placeholder="请选择统计类型" @change="searchFlowList">
                    <el-option
                      v-for="item in statisticsList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item>
                  <el-button @click="searchFlowList()">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-card>
        </div>
        <div style="width: 100%;display:flex;flex-direction:row; justify-content:space-between;">
          <el-card class="box-card" style="width: 100%;height: 80vh">
            <el-table
              :data="tableData"
              height="250"
              border
              style="width: 100%;height: 75vh;">
              <el-table-column
                prop="time"
                label="日期"
              >
              </el-table-column>
              <el-table-column
                label="车辆自编号" v-if="statisticsType !== 'All'">
                <template slot-scope="scope">
                  <span>{{ `${scope.row.carData.nbbm}  ` }}</span>
                  <el-button type="text" @click="clickInformation(scope.row)">[详细信息]</el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="channel"
                label="通道号"
                v-if="statisticsType === 'channel'">
              </el-table-column>
              <el-table-column
                prop="count"
                label="统计车辆数"
                v-if="statisticsType === 'All'">
              </el-table-column>
              <el-table-column
                prop="flow"
                label="流量">
                <template slot-scope="scope">
                  {{ formattedBytes(scope.row.flow) }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
      <el-dialog
        :title="`${information.carData.nbbm}车辆详细信息`"
        :visible.sync="open"
        width="30%"
        :before-close="handleClose">
        <el-descriptions class="margin-top"  :column="1"  border>
          <el-descriptions-item>
            <template slot="label">
              车辆自编号
            </template>
            {{ information.carData.nbbm }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              sim卡号
            </template>
            {{ information.sim }}
          </el-descriptions-item>
          <el-descriptions-item v-if="information.carData.lineName">
            <template slot="label">
              线路名称
            </template>
            {{ information.carData.lineName }}
          </el-descriptions-item>
          <el-descriptions-item v-if="information.carData.carPlate">
            <template slot="label">
              <i class="el-icon-tickets"></i>
              车牌号
            </template>
            {{ information.carData.carPlate }}
          </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeInformation">关闭</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import player from "./common/jessibuca.vue";
import CarTree from "./JT1078Components/cascader/CarTree.vue";
import HistoricalData from "./JT1078Components/historical/HistoricalDataTree.vue";
import {parseTime} from "../../utils/ruoyi";
import CarTreeOne from "./JT1078Components/cascader/CarTreeOne.vue";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {CarTreeOne, HistoricalData, CarTree, player},
  props: {},
  data() {
    //这里存放数据"
    return {
      open: false,
      information: {
        carData: {
          nbbm: '',
          lineName: '',
          carPlate: '',
        },
      },
      tableData: [],
      historyData: [],
      //遮罩层
      loading: false,
      //sim号和通道号，格式为：sim-channel
      sim_channel: null,
      //选择时间
      time: '',
      //时间类型
      timeType: 'day',
      //统计类型
      statisticsType: 'sim',
      //时间选择下拉框
      timeList: [
        {value: 'day', label: '按天统计'},
        {value: 'month', label: '按月统计'},
        {value: 'year', label: '按年统计'},
      ],
      //统计类型
      statisticsList: [
        {value: 'sim', label: '按车辆统计'},
        {value: 'channel', label: '按通道统计'},
        {value: 'All', label: '全量统计'},
      ],
      //日期快捷选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {
    timeType() {
      this.getDatesByTimeFrame()
    }
  },
  //方法集合",
  methods: {
    /**
     * 搜索流量统计数据
     */
    searchFlowList() {
      this.loading = true
      let simChannel = this.sim_channel;
      this.tableData = []
      this.$axios({
        method: "GET",
        url: "/flow/list/" + this.timeType + "/" + this.statisticsType + "/" + this.time + "/" + simChannel,
      }).then(res => {
        this.tableData = res.data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    destroy(idx) {
      console.log(idx);
      this.clear(idx.substring(idx.length - 1))
    },
    /**
     * 获取时间
     */
    getDatesByTimeFrame() {
      const today = new Date();
      switch (this.timeType.toLowerCase()) {
        case 'day':
          this.time = parseTime(today, '{y}-{m}-{d} {h}:{i}:{s}');
          break;

        case 'month':
          let time = parseTime(today, '{y}-{m}');
          let split = time.split('-');
          this.time = split[1].substring(0, 1) === '0' ? split[0] + '-' + split[1].substring(1, 2) : time;
          break;

        case 'year':
          this.time = parseTime(today, '{y}');
          break;
        default:
          console.log('Invalid time frame provided.');
      }
      this.searchFlowList()
    },
    /**
     * 流量换算
     */
    formattedBytes(value) {
      if (value >= 1024 * 1024 * 1024) { // GB
        return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GB`;
      } else if (value >= 1024 * 1024) { // MB
        return `${(value / (1024 * 1024)).toFixed(2)} MB`;
      } else if (value >= 1024) { // KB
        return `${(value / 1024).toFixed(2)} KB`;
      } else { // Bytes
        return `${value} Bytes`;
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    /**
     * 详细信息按钮
     */
    clickInformation(val) {
      if (val) {
        this.open = true;
        this.information = val
      } else {
        this.$message.error("车辆信息有误")
      }
    },
    /**
     * 关闭框
     */
    closeInformation() {
      this.open = false;
      this.information = {
        carData: {
          nbbm: '',
          lineName: '',
          carPlate: '',
        },
      };
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getDatesByTimeFrame()
    this.searchFlowList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>
.device-tree-main-box {
  text-align: left;
}

.btn {
  margin: 0 10px;

}

.btn:hover {
  color: #409EFF;
}

.btn.active {
  color: #409EFF;

}

.redborder {
  border: 2px solid red !important;
}

.play-box {
  background-color: #000000;
  border: 2px solid #505050;
  display: flex;
  align-items: center;
  justify-content: center;
}

.historyListLi {
  width: 97%;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 3px;
  margin-bottom: 6px;
  border: 1px solid #000000;
}

.historyListDiv {
  height: 80vh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}


/* 菜单的样式 */
.rMenu {
  position: absolute;
  top: 0;
  display: none;
  margin: 0;
  padding: 0;
  text-align: left;
  border: 1px solid #BFBFBF;
  border-radius: 3px;
  background-color: #EEE;
  box-shadow: 0 0 10px #AAA;
}

.rMenu li {
  width: 170px;
  list-style: none outside none;
  cursor: default;
  color: #666;
  margin-left: -20px;
}

.rMenu li:hover {
  color: #EEE;
  background-color: #666;
}

li#menu-item-delete, li#menu-item-rename {
  margin-top: 1px;
}
</style>
<style>
.videoList {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.video-item {
  position: relative;
  width: 15rem;
  height: 10rem;
  margin-right: 1rem;
  background-color: #000000;
}

.video-item-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.video-item-img:after {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  background-image: url("../assets/loading.png");
  background-size: cover;
  background-color: #000000;
}

.video-item-title {
  position: absolute;
  bottom: 0;
  color: #000000;
  background-color: #ffffff;
  line-height: 1.5rem;
  padding: 0.3rem;
  width: 14.4rem;
}

.baidumap {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}

.baidumap > .anchorBL {
  display: none !important;
}
</style>