|
@@ -1,19 +1,43 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="p-2">
|
|
<div class="p-2">
|
|
|
- <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
|
|
- <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
|
|
|
|
|
- <div style="width: 75%;">
|
|
|
|
|
- <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
|
|
|
|
|
|
+ <transition
|
|
|
|
|
+ :enter-active-class="proxy?.animate.searchAnimate.enter"
|
|
|
|
|
+ :leave-active-class="proxy?.animate.searchAnimate.leave"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="search" v-show="showSearch" style="display: flex; flex-direction: row">
|
|
|
|
|
+ <div style="width: 75%">
|
|
|
|
|
+ <el-form
|
|
|
|
|
+ :model="queryParams"
|
|
|
|
|
+ ref="queryFormRef"
|
|
|
|
|
+ :inline="true"
|
|
|
|
|
+ label-width="68px"
|
|
|
|
|
+ >
|
|
|
<el-form-item label="车牌" prop="carNum">
|
|
<el-form-item label="车牌" prop="carNum">
|
|
|
- <el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px" @keyup.enter="handleQuery" />
|
|
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model="queryParams.carNum"
|
|
|
|
|
+ placeholder="请输入车牌号"
|
|
|
|
|
+ clearable
|
|
|
|
|
+ style="width: 160px"
|
|
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
|
|
+ />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="站点" prop="station">
|
|
<el-form-item label="站点" prop="station">
|
|
|
- <el-input v-model="queryParams.station" placeholder="请输入站点" clearable style="width: 160px" @keyup.enter="handleQuery" />
|
|
|
|
|
|
|
+ <el-input
|
|
|
|
|
+ v-model="queryParams.station"
|
|
|
|
|
+ placeholder="请输入站点"
|
|
|
|
|
+ clearable
|
|
|
|
|
+ style="width: 160px"
|
|
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
|
|
+ />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="日期" prop="queryParams.params.scheduleDate">
|
|
<el-form-item label="日期" prop="queryParams.params.scheduleDate">
|
|
|
- <el-date-picker v-model="queryParams.params.scheduleDate" type="date" placeholder="选择日期" />
|
|
|
|
|
|
|
+ <el-date-picker
|
|
|
|
|
+ v-model="queryParams.params.scheduleDate"
|
|
|
|
|
+ type="date"
|
|
|
|
|
+ placeholder="选择日期"
|
|
|
|
|
+ />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="司机" prop="carNum">
|
|
<!-- <el-form-item label="司机" prop="carNum">
|
|
|
<el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
|
|
<el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable style="width: 160px"
|
|
@@ -25,7 +49,7 @@
|
|
|
</el-form-item> -->
|
|
</el-form-item> -->
|
|
|
</el-form>
|
|
</el-form>
|
|
|
</div>
|
|
</div>
|
|
|
- <div style="width: 25%;">
|
|
|
|
|
|
|
+ <div style="width: 25%">
|
|
|
<el-form-item>
|
|
<el-form-item>
|
|
|
<!-- <el-button type="primary" @click="goadd">新增</el-button> -->
|
|
<!-- <el-button type="primary" @click="goadd">新增</el-button> -->
|
|
|
<el-button type="primary" @click="resetQuery">查询</el-button>
|
|
<el-button type="primary" @click="resetQuery">查询</el-button>
|
|
@@ -33,46 +57,79 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</transition>
|
|
</transition>
|
|
|
- <div style="text-align: center;margin-bottom:10px">
|
|
|
|
|
|
|
+ <div style="text-align: center; margin-bottom: 10px">
|
|
|
<el-tag type="success" effect="dark" round>正常作业</el-tag>
|
|
<el-tag type="success" effect="dark" round>正常作业</el-tag>
|
|
|
- <el-tag style="margin-left: 40px;" type="danger" effect="dark" round>异常作业</el-tag>
|
|
|
|
|
|
|
+ <el-tag style="margin-left: 40px" type="danger" effect="dark" round
|
|
|
|
|
+ >异常作业</el-tag
|
|
|
|
|
+ >
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="reloadData">
|
|
<div v-if="reloadData">
|
|
|
<div v-for="(item, index) in carScheduleList" :key="index">
|
|
<div v-for="(item, index) in carScheduleList" :key="index">
|
|
|
<el-card shadow="never">
|
|
<el-card shadow="never">
|
|
|
- <div class="carDiv" style="position: relative;">
|
|
|
|
|
|
|
+ <div class="carDiv" style="position: relative">
|
|
|
<div
|
|
<div
|
|
|
- style="width: 18%;background: #7BC932;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items:center;"
|
|
|
|
|
|
|
+ style="
|
|
|
|
|
+ width: 18%;
|
|
|
|
|
+ background: #7bc932;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ "
|
|
|
>
|
|
>
|
|
|
<div class="carDetail">{{ item.carNum }}</div>
|
|
<div class="carDetail">{{ item.carNum }}</div>
|
|
|
- <div class="carFont" style="font-size: 12px;">{{ getTimeFormat(item.pathInfo) }}</div>
|
|
|
|
|
- <div class="carFont" style="font-size: 12px;margin-top:8px;">{{ getAddr(item.pathInfo) }}</div>
|
|
|
|
|
|
|
+ <div class="carFont" style="font-size: 12px">
|
|
|
|
|
+ {{ getTimeFormat(item.pathInfo) }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="carFont" style="font-size: 12px; margin-top: 8px">
|
|
|
|
|
+ {{ getAddr(item.pathInfo) }}
|
|
|
|
|
+ </div>
|
|
|
<!-- <div class="carFont">{{ JSON.parse(item.pathInfo).driver_info.nickName }}</div> -->
|
|
<!-- <div class="carFont">{{ JSON.parse(item.pathInfo).driver_info.nickName }}</div> -->
|
|
|
- <div class="carFont" style="font-size: 12px;margin-top:8px;color:rgba(255,255,255,0.9)">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="carFont"
|
|
|
|
|
+ style="font-size: 12px; margin-top: 8px; color: rgba(255, 255, 255, 0.9)"
|
|
|
|
|
+ >
|
|
|
司机:{{ getUserName(JSON.parse(item.pathInfo).driverInfo) }}
|
|
司机:{{ getUserName(JSON.parse(item.pathInfo).driverInfo) }}
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="carFont" style="font-size: 12px;margin-top:8px">{{ getCatInfo(item.carNum) }}</div>
|
|
|
|
|
|
|
+ <div class="carFont" style="font-size: 12px; margin-top: 8px">
|
|
|
|
|
+ {{ getCatInfo(item.carNum) }}
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div style="width: 80%;">
|
|
|
|
|
|
|
+ <div style="width: 80%">
|
|
|
<el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
|
|
<el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
|
|
|
- <timeLineDiv :list="JSON.parse(item.pathInfo).pathLine" :parentdata="item" :stationInfo="JSON.parse(item.stationInfo)"></timeLineDiv>
|
|
|
|
|
|
|
+ <timeLineDiv
|
|
|
|
|
+ :list="JSON.parse(item.pathInfo).pathLine"
|
|
|
|
|
+ :parentdata="item"
|
|
|
|
|
+ :stationInfo="JSON.parse(item.stationInfo)"
|
|
|
|
|
+ ></timeLineDiv>
|
|
|
</el-scrollbar>
|
|
</el-scrollbar>
|
|
|
</div>
|
|
</div>
|
|
|
- <div style="position:absolute;top:10px;right:6px">
|
|
|
|
|
- <div style="width: 30px;height: 30px; cursor: pointer;" @click="openMapDiv(item)">
|
|
|
|
|
- <img style="width: 28px;height: 28px;" src="@/assets/images/icon/map1.png" />
|
|
|
|
|
|
|
+ <div style="position: absolute; top: 10px; right: 6px">
|
|
|
|
|
+ <div
|
|
|
|
|
+ style="width: 30px; height: 30px; cursor: pointer"
|
|
|
|
|
+ @click="openMapDiv(item)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <img
|
|
|
|
|
+ style="width: 28px; height: 28px"
|
|
|
|
|
+ src="@/assets/images/icon/map1.png"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
- <div style="width: 30px;height: 20px; cursor: pointer;" @click="openVideo(item)">
|
|
|
|
|
- <img style="width: 28px;height: 28px;" src="@/assets/images/icon/cam.png" />
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ style="width: 30px; height: 20px; cursor: pointer"
|
|
|
|
|
+ @click="openVideo(item)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <img
|
|
|
|
|
+ style="width: 28px; height: 28px"
|
|
|
|
|
+ src="@/assets/images/icon/cam.png"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div style="position:absolute;bottom:10px;right:6px;font-size:15px">
|
|
|
|
|
|
|
+ <div style="position: absolute; bottom: 10px; right: 6px; font-size: 15px">
|
|
|
<span>客流:{{ gettotalpeople(item, 11) }}人 </span>
|
|
<span>客流:{{ gettotalpeople(item, 11) }}人 </span>
|
|
|
- <span style="margin-left: 10px;"
|
|
|
|
|
- >乘客:{{
|
|
|
|
|
- gettotalpeople(item, 0)
|
|
|
|
|
- }}人
|
|
|
|
|
|
|
+ <span style="margin-left: 10px"
|
|
|
|
|
+ >乘客:{{ gettotalpeople(item, 0) }}人
|
|
|
</span>
|
|
</span>
|
|
|
<!-- <span style="margin-left: 10px;">货物:11个</span> -->
|
|
<!-- <span style="margin-left: 10px;">货物:11个</span> -->
|
|
|
</div>
|
|
</div>
|
|
@@ -81,167 +138,218 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <el-dialog v-if="dialogMap.visible" :title="dialogMap.title" v-model="dialogMap.visible" width="40vw" append-to-body>
|
|
|
|
|
- <mapDiv style="width:40vw;height:40vh;" ref="mapElmDiv"></mapDiv>
|
|
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ v-if="dialogMap.visible"
|
|
|
|
|
+ :title="dialogMap.title"
|
|
|
|
|
+ v-model="dialogMap.visible"
|
|
|
|
|
+ width="40vw"
|
|
|
|
|
+ append-to-body
|
|
|
|
|
+ >
|
|
|
|
|
+ <mapDiv style="width: 40vw; height: 40vh" ref="mapElmDiv"></mapDiv>
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
|
|
|
|
- <el-dialog :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body before-close="destoryVideo">
|
|
|
|
|
- <video style="width: 99%;margin-left: 0.5%;" ref="videoElement" class="centeredVideo" controls autoplay muted></video>
|
|
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ :title="dialog.title"
|
|
|
|
|
+ v-model="dialog.visible"
|
|
|
|
|
+ width="40vw"
|
|
|
|
|
+ append-to-body
|
|
|
|
|
+ before-close="destoryVideo"
|
|
|
|
|
+ >
|
|
|
|
|
+ <video
|
|
|
|
|
+ style="width: 99%; margin-left: 0.5%"
|
|
|
|
|
+ ref="videoElement"
|
|
|
|
|
+ class="centeredVideo"
|
|
|
|
|
+ controls
|
|
|
|
|
+ autoplay
|
|
|
|
|
+ muted
|
|
|
|
|
+ ></video>
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup name="CarInfo" lang="ts">
|
|
<script setup name="CarInfo" lang="ts">
|
|
|
-import api from "@/api/system/user"
|
|
|
|
|
-import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
|
|
|
|
|
-import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
|
|
|
|
|
-import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
|
|
|
|
|
|
|
+import api from "@/api/system/user";
|
|
|
|
|
+import { UserForm, UserQuery, UserVO } from "@/api/system/user/types";
|
|
|
|
|
+import {
|
|
|
|
|
+ listCarInfo,
|
|
|
|
|
+ getCarInfo,
|
|
|
|
|
+ delCarInfo,
|
|
|
|
|
+ addCarInfo,
|
|
|
|
|
+ updateCarInfo,
|
|
|
|
|
+} from "@/api/carInfo";
|
|
|
|
|
+import { CarInfoVO, CarInfoQuery, CarInfoForm } from "@/api/carInfo/types";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
import timeLineDiv from "@/components/Public/timeline";
|
|
import timeLineDiv from "@/components/Public/timeline";
|
|
|
-import { getDicts } from '@/api/system/dict/data'
|
|
|
|
|
-import useTagsViewStore from '@/store/modules/tagsView';
|
|
|
|
|
-import mapDiv from "@/components/Map/index.vue"
|
|
|
|
|
-import { listCarSchedule, getCarSchedule, delCarSchedule, addCarSchedule, updateCarSchedule } from '@/api/carSchedule';
|
|
|
|
|
-import { CarScheduleVO, CarScheduleQuery, CarScheduleForm } from '@/api/carSchedule/types';
|
|
|
|
|
-import moment from 'moment';
|
|
|
|
|
-import { getCountData } from '@/api/gpsData';
|
|
|
|
|
-import { countData } from '@/api/gpsData/type';
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
|
|
+import { getDicts } from "@/api/system/dict/data";
|
|
|
|
|
+import useTagsViewStore from "@/store/modules/tagsView";
|
|
|
|
|
+import mapDiv from "@/components/Map/index.vue";
|
|
|
|
|
+import {
|
|
|
|
|
+ listCarSchedule,
|
|
|
|
|
+ getCarSchedule,
|
|
|
|
|
+ delCarSchedule,
|
|
|
|
|
+ addCarSchedule,
|
|
|
|
|
+ updateCarSchedule,
|
|
|
|
|
+} from "@/api/carSchedule";
|
|
|
|
|
+import {
|
|
|
|
|
+ CarScheduleVO,
|
|
|
|
|
+ CarScheduleQuery,
|
|
|
|
|
+ CarScheduleForm,
|
|
|
|
|
+} from "@/api/carSchedule/types";
|
|
|
|
|
+import moment from "moment";
|
|
|
|
|
+import { getCountData } from "@/api/gpsData";
|
|
|
|
|
+import { countData } from "@/api/gpsData/type";
|
|
|
|
|
|
|
|
import flvjs from "flv.js";
|
|
import flvjs from "flv.js";
|
|
|
import { values } from "video.js/dist/types/utils/obj";
|
|
import { values } from "video.js/dist/types/utils/obj";
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
|
|
|
|
|
-const carInfoList = ref <CarInfoVO[]> ([]);
|
|
|
|
|
|
|
+const carInfoList = ref<CarInfoVO[]>([]);
|
|
|
// const videoElement = ref(video)
|
|
// const videoElement = ref(video)
|
|
|
const buttonLoading = ref(false);
|
|
const buttonLoading = ref(false);
|
|
|
const loading = ref(true);
|
|
const loading = ref(true);
|
|
|
const showSearch = ref(true);
|
|
const showSearch = ref(true);
|
|
|
-const ids = ref < Array < string | number >> ([]);
|
|
|
|
|
|
|
+const ids = ref<Array<string | number>>([]);
|
|
|
const single = ref(true);
|
|
const single = ref(true);
|
|
|
const multiple = ref(true);
|
|
const multiple = ref(true);
|
|
|
const total = ref(0);
|
|
const total = ref(0);
|
|
|
-const value2 = ref('')
|
|
|
|
|
|
|
+const value2 = ref("");
|
|
|
const flvPlayer = ref(null);
|
|
const flvPlayer = ref(null);
|
|
|
-const carScheduleList = ref < CarScheduleVO[] > ([]);
|
|
|
|
|
|
|
+const carScheduleList = ref<CarScheduleVO[]>([]);
|
|
|
const timer = ref(null);
|
|
const timer = ref(null);
|
|
|
const mapTimer = ref(null);
|
|
const mapTimer = ref(null);
|
|
|
|
|
|
|
|
-const queryFormRef = ref < ElFormInstance > ();
|
|
|
|
|
-const carInfoFormRef = ref < ElFormInstance > ();
|
|
|
|
|
-
|
|
|
|
|
|
|
+const queryFormRef = ref<ElFormInstance>();
|
|
|
|
|
+const carInfoFormRef = ref<ElFormInstance>();
|
|
|
|
|
|
|
|
const gettotalpeople = (item, type) => {
|
|
const gettotalpeople = (item, type) => {
|
|
|
- if (item.peoplecount != undefined && item.peoplecount != null) {
|
|
|
|
|
- var totalpeople = item.peoplecount['total'];
|
|
|
|
|
- if (type == 1) {
|
|
|
|
|
- return totalpeople.totalin - totalpeople.totalout > 0 ? totalpeople.totalin - totalpeople.totalout : 0;
|
|
|
|
|
- }
|
|
|
|
|
- if (type == 0) {
|
|
|
|
|
- return totalpeople.totalin;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
|
|
+ if (item.peoplecount != undefined && item.peoplecount != null) {
|
|
|
|
|
+ var totalpeople = item.peoplecount["total"];
|
|
|
|
|
+ if (type == 1) {
|
|
|
|
|
+ return totalpeople.totalin - totalpeople.totalout > 0
|
|
|
|
|
+ ? totalpeople.totalin - totalpeople.totalout
|
|
|
|
|
+ : 0;
|
|
|
}
|
|
}
|
|
|
- return 0;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ if (type == 0) {
|
|
|
|
|
+ return totalpeople.totalin;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ return 0;
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const flvLoad = (url) => {
|
|
const flvLoad = (url) => {
|
|
|
- console.log(flvjs.isSupported())
|
|
|
|
|
- if (flvjs.isSupported()) {
|
|
|
|
|
- let videoElement = proxy.$refs.videoElement;
|
|
|
|
|
- flvPlayer.value = flvjs.createPlayer(
|
|
|
|
|
- {
|
|
|
|
|
- type: "flv", //媒体类型
|
|
|
|
|
- url: url || '', //flv格式媒体URL
|
|
|
|
|
- isLive: true, //数据源是否为直播流
|
|
|
|
|
- hasAudio: false, //数据源是否包含有音频
|
|
|
|
|
- hasVideo: true, //数据源是否包含有视频
|
|
|
|
|
- enableStashBuffer: false, //是否启用缓存区
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- enableWorker: false, // 是否启用分离的线程进行转换
|
|
|
|
|
- enableStashBuffer: false, //关闭IO隐藏缓冲区
|
|
|
|
|
- autoCleanupSourceBuffer: true, //自动清除缓存
|
|
|
|
|
- }
|
|
|
|
|
- );
|
|
|
|
|
- flvPlayer.value.attachMediaElement(videoElement); //将播放实例注册到节点
|
|
|
|
|
- flvPlayer.value.load(); //加载数据流
|
|
|
|
|
- flvPlayer.value.play(); //播放数据流
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ console.log(flvjs.isSupported());
|
|
|
|
|
+ if (flvjs.isSupported()) {
|
|
|
|
|
+ let videoElement = proxy.$refs.videoElement;
|
|
|
|
|
+ flvPlayer.value = flvjs.createPlayer(
|
|
|
|
|
+ {
|
|
|
|
|
+ type: "flv", //媒体类型
|
|
|
|
|
+ url: url || "", //flv格式媒体URL
|
|
|
|
|
+ isLive: true, //数据源是否为直播流
|
|
|
|
|
+ hasAudio: false, //数据源是否包含有音频
|
|
|
|
|
+ hasVideo: true, //数据源是否包含有视频
|
|
|
|
|
+ enableStashBuffer: false, //是否启用缓存区
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ enableWorker: false, // 是否启用分离的线程进行转换
|
|
|
|
|
+ enableStashBuffer: false, //关闭IO隐藏缓冲区
|
|
|
|
|
+ autoCleanupSourceBuffer: true, //自动清除缓存
|
|
|
|
|
+ }
|
|
|
|
|
+ );
|
|
|
|
|
+ flvPlayer.value.attachMediaElement(videoElement); //将播放实例注册到节点
|
|
|
|
|
+ flvPlayer.value.load(); //加载数据流
|
|
|
|
|
+ flvPlayer.value.play(); //播放数据流
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const openVideo = (item) => {
|
|
const openVideo = (item) => {
|
|
|
- var findVideo = false
|
|
|
|
|
- for (var index in carInfoList.value) {
|
|
|
|
|
- if (carInfoList.value[index].carNum == item.carNum) {
|
|
|
|
|
- if (carInfoList.value[index].deviceInfos != null && carInfoList.value[index].deviceInfos != '') {
|
|
|
|
|
- var drivesInfo = JSON.parse(carInfoList.value[index].deviceInfos)
|
|
|
|
|
- console.log(drivesInfo)
|
|
|
|
|
- for(var j in drivesInfo){
|
|
|
|
|
- if(drivesInfo[j].type == "摄像头"){
|
|
|
|
|
- findVideo = true
|
|
|
|
|
- dialog.visible = true;
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- flvLoad(drivesInfo[j].code)
|
|
|
|
|
- }, 1000);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ var findVideo = false;
|
|
|
|
|
+ for (var index in carInfoList.value) {
|
|
|
|
|
+ if (carInfoList.value[index].carNum == item.carNum) {
|
|
|
|
|
+ if (
|
|
|
|
|
+ carInfoList.value[index].deviceInfos != null &&
|
|
|
|
|
+ carInfoList.value[index].deviceInfos != ""
|
|
|
|
|
+ ) {
|
|
|
|
|
+ var drivesInfo = JSON.parse(carInfoList.value[index].deviceInfos);
|
|
|
|
|
+ console.log(drivesInfo);
|
|
|
|
|
+ for (var j in drivesInfo) {
|
|
|
|
|
+ if (drivesInfo[j].type == "摄像头") {
|
|
|
|
|
+ findVideo = true;
|
|
|
|
|
+ dialog.visible = true;
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ flvLoad(drivesInfo[j].code);
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- if (!findVideo) {
|
|
|
|
|
- ElMessage({
|
|
|
|
|
- message: '该车辆未配置摄像头',
|
|
|
|
|
- type: 'warning',
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!findVideo) {
|
|
|
|
|
+ ElMessage({
|
|
|
|
|
+ message: "该车辆未配置摄像头",
|
|
|
|
|
+ type: "warning",
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const destoryVideo = () => {
|
|
const destoryVideo = () => {
|
|
|
- if (flvPlayer.value) {
|
|
|
|
|
- flvPlayer.value.pause();
|
|
|
|
|
- flvPlayer.value.unload();
|
|
|
|
|
- flvPlayer.value.detachMediaElement();
|
|
|
|
|
- flvPlayer.value.destroy();
|
|
|
|
|
- flvPlayer.value = null;
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-const dialogMap = reactive < DialogOption > ({
|
|
|
|
|
- visible: false,
|
|
|
|
|
- title: '地图'
|
|
|
|
|
|
|
+ if (flvPlayer.value) {
|
|
|
|
|
+ flvPlayer.value.pause();
|
|
|
|
|
+ flvPlayer.value.unload();
|
|
|
|
|
+ flvPlayer.value.detachMediaElement();
|
|
|
|
|
+ flvPlayer.value.destroy();
|
|
|
|
|
+ flvPlayer.value = null;
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const dialogMap = reactive<DialogOption>({
|
|
|
|
|
+ visible: false,
|
|
|
|
|
+ title: "地图",
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-const dialog = reactive < DialogOption > ({
|
|
|
|
|
- visible: false,
|
|
|
|
|
- title: '在线视频'
|
|
|
|
|
|
|
+const dialog = reactive<DialogOption>({
|
|
|
|
|
+ visible: false,
|
|
|
|
|
+ title: "在线视频",
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-const mapElmDiv = ref(mapDiv)
|
|
|
|
|
|
|
+const mapElmDiv = ref(mapDiv);
|
|
|
|
|
|
|
|
const columns = ref([
|
|
const columns = ref([
|
|
|
- // {label: '上层位置', prop: 'v', visible: true},
|
|
|
|
|
- { label: '姓名', prop: 'carNum', visible: true, isTemplate: false },
|
|
|
|
|
- { label: '身份证', prop: 'workTime', visible: true, isTemplate: false, },
|
|
|
|
|
- { label: '手机号', prop: 'workName', pprop: "ext1", visible: true, isTemplate: false },
|
|
|
|
|
- { label: '设备号', prop: 'type', pprop: "ext1", visible: true, isTemplate: false, },
|
|
|
|
|
- { label: '车辆', prop: 'wangge', pprop: "ext1", visible: true, isTemplate: false, },
|
|
|
|
|
- { label: '工作小组', prop: 'gpeople', pprop: "ext1", visible: true, isTemplate: false, },
|
|
|
|
|
- { label: '类型', prop: 'people', pprop: "ext1", visible: true, isTemplate: false, },
|
|
|
|
|
-])
|
|
|
|
|
-
|
|
|
|
|
-const reloadData = ref(true)
|
|
|
|
|
|
|
+ // {label: '上层位置', prop: 'v', visible: true},
|
|
|
|
|
+ { label: "姓名", prop: "carNum", visible: true, isTemplate: false },
|
|
|
|
|
+ { label: "身份证", prop: "workTime", visible: true, isTemplate: false },
|
|
|
|
|
+ { label: "手机号", prop: "workName", pprop: "ext1", visible: true, isTemplate: false },
|
|
|
|
|
+ { label: "设备号", prop: "type", pprop: "ext1", visible: true, isTemplate: false },
|
|
|
|
|
+ { label: "车辆", prop: "wangge", pprop: "ext1", visible: true, isTemplate: false },
|
|
|
|
|
+ { label: "工作小组", prop: "gpeople", pprop: "ext1", visible: true, isTemplate: false },
|
|
|
|
|
+ { label: "类型", prop: "people", pprop: "ext1", visible: true, isTemplate: false },
|
|
|
|
|
+]);
|
|
|
|
|
+
|
|
|
|
|
+const reloadData = ref(true);
|
|
|
|
|
|
|
|
const initFormData: CarInfoForm = {
|
|
const initFormData: CarInfoForm = {
|
|
|
- id: undefined,
|
|
|
|
|
|
|
+ id: undefined,
|
|
|
|
|
+ carNum: undefined,
|
|
|
|
|
+ carType: undefined,
|
|
|
|
|
+ deviceInfos: undefined,
|
|
|
|
|
+ repairInfo: undefined,
|
|
|
|
|
+ maintenanceInfo: undefined,
|
|
|
|
|
+ insuranceInfo: undefined,
|
|
|
|
|
+ inspectionInfo: undefined,
|
|
|
|
|
+ trafficAccidentInfo: undefined,
|
|
|
|
|
+ violationInfo: undefined,
|
|
|
|
|
+ changeInfo: undefined,
|
|
|
|
|
+ ext1: undefined,
|
|
|
|
|
+ ext2: undefined,
|
|
|
|
|
+};
|
|
|
|
|
+const data = reactive<PageData<CarInfoForm, CarInfoQuery>>({
|
|
|
|
|
+ form: { ...initFormData },
|
|
|
|
|
+ queryParams: {
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 10,
|
|
|
carNum: undefined,
|
|
carNum: undefined,
|
|
|
carType: undefined,
|
|
carType: undefined,
|
|
|
deviceInfos: undefined,
|
|
deviceInfos: undefined,
|
|
@@ -253,410 +361,382 @@ const initFormData: CarInfoForm = {
|
|
|
violationInfo: undefined,
|
|
violationInfo: undefined,
|
|
|
changeInfo: undefined,
|
|
changeInfo: undefined,
|
|
|
ext1: undefined,
|
|
ext1: undefined,
|
|
|
- ext2: undefined
|
|
|
|
|
-}
|
|
|
|
|
-const data = reactive <PageData<CarInfoForm, CarInfoQuery>> ({
|
|
|
|
|
- form: { ...initFormData },
|
|
|
|
|
- queryParams: {
|
|
|
|
|
- pageNum: 1,
|
|
|
|
|
- pageSize: 10,
|
|
|
|
|
- carNum: undefined,
|
|
|
|
|
- carType: undefined,
|
|
|
|
|
- deviceInfos: undefined,
|
|
|
|
|
- repairInfo: undefined,
|
|
|
|
|
- maintenanceInfo: undefined,
|
|
|
|
|
- insuranceInfo: undefined,
|
|
|
|
|
- inspectionInfo: undefined,
|
|
|
|
|
- trafficAccidentInfo: undefined,
|
|
|
|
|
- violationInfo: undefined,
|
|
|
|
|
- changeInfo: undefined,
|
|
|
|
|
- ext1: undefined,
|
|
|
|
|
- ext2: undefined,
|
|
|
|
|
- params: {
|
|
|
|
|
- scheduleDate:moment().format('YYYY-MM-DD')
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ ext2: undefined,
|
|
|
|
|
+ params: {
|
|
|
|
|
+ scheduleDate: moment().format("YYYY-MM-DD"),
|
|
|
},
|
|
},
|
|
|
- rules: {
|
|
|
|
|
- id: [
|
|
|
|
|
- { required: true, message: "编号不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- carNum: [
|
|
|
|
|
- { required: true, message: "车牌号不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- carType: [
|
|
|
|
|
- { required: true, message: "车类型不能为空", trigger: "change" }
|
|
|
|
|
- ],
|
|
|
|
|
- deviceInfos: [
|
|
|
|
|
- { required: true, message: "所有车载设备信息不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- repairInfo: [
|
|
|
|
|
- { required: true, message: "维修信息不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- maintenanceInfo: [
|
|
|
|
|
- { required: true, message: "保养信息不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- insuranceInfo: [
|
|
|
|
|
- { required: true, message: "保险信息不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- inspectionInfo: [
|
|
|
|
|
- { required: true, message: "年检信息不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- trafficAccidentInfo: [
|
|
|
|
|
- { required: true, message: "交通事故信息不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- violationInfo: [
|
|
|
|
|
- { required: true, message: "违章信息不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- changeInfo: [
|
|
|
|
|
- { required: true, message: "车辆变更信息不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- ext1: [
|
|
|
|
|
- { required: true, message: "扩展1不能为空", trigger: "blur" }
|
|
|
|
|
- ],
|
|
|
|
|
- ext2: [
|
|
|
|
|
- { required: true, message: "扩展2不能为空", trigger: "blur" }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ rules: {
|
|
|
|
|
+ id: [{ required: true, message: "编号不能为空", trigger: "blur" }],
|
|
|
|
|
+ carNum: [{ required: true, message: "车牌号不能为空", trigger: "blur" }],
|
|
|
|
|
+ carType: [{ required: true, message: "车类型不能为空", trigger: "change" }],
|
|
|
|
|
+ deviceInfos: [
|
|
|
|
|
+ { required: true, message: "所有车载设备信息不能为空", trigger: "blur" },
|
|
|
|
|
+ ],
|
|
|
|
|
+ repairInfo: [{ required: true, message: "维修信息不能为空", trigger: "blur" }],
|
|
|
|
|
+ maintenanceInfo: [{ required: true, message: "保养信息不能为空", trigger: "blur" }],
|
|
|
|
|
+ insuranceInfo: [{ required: true, message: "保险信息不能为空", trigger: "blur" }],
|
|
|
|
|
+ inspectionInfo: [{ required: true, message: "年检信息不能为空", trigger: "blur" }],
|
|
|
|
|
+ trafficAccidentInfo: [
|
|
|
|
|
+ { required: true, message: "交通事故信息不能为空", trigger: "blur" },
|
|
|
|
|
+ ],
|
|
|
|
|
+ violationInfo: [{ required: true, message: "违章信息不能为空", trigger: "blur" }],
|
|
|
|
|
+ changeInfo: [{ required: true, message: "车辆变更信息不能为空", trigger: "blur" }],
|
|
|
|
|
+ ext1: [{ required: true, message: "扩展1不能为空", trigger: "blur" }],
|
|
|
|
|
+ ext2: [{ required: true, message: "扩展2不能为空", trigger: "blur" }],
|
|
|
|
|
+ },
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
|
|
|
|
|
|
const carTypeList = ref([]);
|
|
const carTypeList = ref([]);
|
|
|
-const energyTypeList = ref([])
|
|
|
|
|
-const bussinessTypeList = ref([])
|
|
|
|
|
|
|
+const energyTypeList = ref([]);
|
|
|
|
|
+const bussinessTypeList = ref([]);
|
|
|
|
|
|
|
|
-const userList = ref < UserVO[] > ();
|
|
|
|
|
|
|
+const userList = ref<UserVO[]>();
|
|
|
|
|
|
|
|
const goadd = () => {
|
|
const goadd = () => {
|
|
|
- useTagsViewStore().delView(route);
|
|
|
|
|
- router.push("/car/work/addWork")
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ useTagsViewStore().delView(route);
|
|
|
|
|
+ router.push("/car/work/addWork");
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getScheduleList = async () => {
|
|
const getScheduleList = async () => {
|
|
|
- var startTime = moment(value2.value[0]).format('YYYY-MM-DD')
|
|
|
|
|
- var endTime = moment(value2.value[1]).format('YYYY-MM-DD')
|
|
|
|
|
- reloadData.value = false;
|
|
|
|
|
- var date = new Date();
|
|
|
|
|
- var param = {
|
|
|
|
|
- carNum: queryParams.value.carNum,
|
|
|
|
|
- params: {
|
|
|
|
|
- scheduleDate: moment(queryParams.value.params.scheduleDate).format('YYYY-MM-DD'),
|
|
|
|
|
- station: queryParams.value.station,
|
|
|
|
|
- // carNum: queryParams.value.carNum,
|
|
|
|
|
- // station: queryParams.value.station
|
|
|
|
|
- // starttime:startTime,
|
|
|
|
|
- // endtime:endTime
|
|
|
|
|
- // scheduleDate: '2024-03-16'
|
|
|
|
|
- },
|
|
|
|
|
- pageSize: "1000"
|
|
|
|
|
- }
|
|
|
|
|
- carScheduleList.value = [];
|
|
|
|
|
- const res = await listCarSchedule(param);
|
|
|
|
|
- console.log(res)
|
|
|
|
|
|
|
+ var startTime = moment(value2.value[0]).format("YYYY-MM-DD");
|
|
|
|
|
+ var endTime = moment(value2.value[1]).format("YYYY-MM-DD");
|
|
|
|
|
+ reloadData.value = false;
|
|
|
|
|
+ var date = new Date();
|
|
|
|
|
+ var param = {
|
|
|
|
|
+ carNum: queryParams.value.carNum,
|
|
|
|
|
+ params: {
|
|
|
|
|
+ scheduleDate: moment(queryParams.value.params.scheduleDate).format("YYYY-MM-DD"),
|
|
|
|
|
+ station: queryParams.value.station,
|
|
|
|
|
+ // carNum: queryParams.value.carNum,
|
|
|
|
|
+ // station: queryParams.value.station
|
|
|
|
|
+ // starttime:startTime,
|
|
|
|
|
+ // endtime:endTime
|
|
|
|
|
+ // scheduleDate: '2024-03-16'
|
|
|
|
|
+ },
|
|
|
|
|
+ pageSize: "1000",
|
|
|
|
|
+ };
|
|
|
|
|
+ carScheduleList.value = [];
|
|
|
|
|
+ const res = await listCarSchedule(param);
|
|
|
|
|
+ console.log(res);
|
|
|
// carScheduleList.value = res.rows;
|
|
// carScheduleList.value = res.rows;
|
|
|
|
|
|
|
|
- res.rows.map(i => {
|
|
|
|
|
- var pathLine = JSON.parse(i.pathInfo).pathLine
|
|
|
|
|
- var endTime = moment(date).format('YYYY-MM-DD') + ' ' + pathLine[pathLine.length - 1].planInTime
|
|
|
|
|
- // console.log(new Date().getTime() )
|
|
|
|
|
- // console.log(new Date(endTime).getTime())
|
|
|
|
|
- console.log(endTime);
|
|
|
|
|
- if (new Date().getTime() < new Date(endTime).getTime()) {
|
|
|
|
|
- if (i.ext1 != undefined && i.ext1 != null) {
|
|
|
|
|
- var datajson = JSON.parse(i.ext1)
|
|
|
|
|
- var times = Object.values(datajson).map(j => {
|
|
|
|
|
- return j.intime + "|" + j.outtime
|
|
|
|
|
- }).join("$");
|
|
|
|
|
- times += "$" + i.scheduleDate + "|" + moment().format("YYYY-MM-DD HH:mm:ss")
|
|
|
|
|
- getCountData({ "params[times]": `${times}` }).then(res1 => {
|
|
|
|
|
- var pcount = {}
|
|
|
|
|
- var index = 0;
|
|
|
|
|
- Object.keys(datajson).map(j => {
|
|
|
|
|
- pcount[j] = res1.data[index++]
|
|
|
|
|
- })
|
|
|
|
|
- pcount['total'] = res1.data[index]
|
|
|
|
|
- i['peoplecount'] = pcount;
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- carScheduleList.value.push(i)
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- //测试用
|
|
|
|
|
- // carScheduleList.value = res.rows;
|
|
|
|
|
- reloadData.value = true
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ res.rows.map((i) => {
|
|
|
|
|
+ var pathLine = JSON.parse(i.pathInfo).pathLine;
|
|
|
|
|
+ var endTime =
|
|
|
|
|
+ moment(date).format("YYYY-MM-DD") + " " + pathLine[pathLine.length - 1].planInTime;
|
|
|
|
|
+ // console.log(new Date().getTime() )
|
|
|
|
|
+ // console.log(new Date(endTime).getTime())
|
|
|
|
|
+ console.log(endTime);
|
|
|
|
|
+ if (new Date().getTime() < new Date(endTime).getTime()) {
|
|
|
|
|
+ if (i.ext1 != undefined && i.ext1 != null) {
|
|
|
|
|
+ var datajson = JSON.parse(i.ext1);
|
|
|
|
|
+ var times = Object.values(datajson)
|
|
|
|
|
+ .map((j) => {
|
|
|
|
|
+ if (j.intime == undefined || j.outtime == undefined) return "";
|
|
|
|
|
+ return j.intime + "|" + j.outtime;
|
|
|
|
|
+ })
|
|
|
|
|
+ .filter((i) => i != "")
|
|
|
|
|
+ .join("$");
|
|
|
|
|
+ times += "$" + i.scheduleDate + "|" + moment().format("YYYY-MM-DD HH:mm:ss");
|
|
|
|
|
+ getCountData({ "params[times]": `${times}` }).then((res1) => {
|
|
|
|
|
+ var pcount = {};
|
|
|
|
|
+ var index = 0;
|
|
|
|
|
+ Object.keys(datajson).map((j) => {
|
|
|
|
|
+ pcount[j] = res1.data[index++];
|
|
|
|
|
+ });
|
|
|
|
|
+ pcount["total"] = res1.data[index];
|
|
|
|
|
+ i["peoplecount"] = pcount;
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ carScheduleList.value.push(i);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ //测试用
|
|
|
|
|
+ // carScheduleList.value = res.rows;
|
|
|
|
|
+ reloadData.value = true;
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getTimeFormat = (data) => {
|
|
const getTimeFormat = (data) => {
|
|
|
- var value = JSON.parse(data).pathLine
|
|
|
|
|
- if (value.length > 0) {
|
|
|
|
|
- if (value[0].planInTime && value[value.length - 1].planInTime) {
|
|
|
|
|
- return value[0].planInTime + '-' + value[value.length - 1].planInTime
|
|
|
|
|
- } else {
|
|
|
|
|
- return "请填写路线时间"
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ var value = JSON.parse(data).pathLine;
|
|
|
|
|
+ if (value.length > 0) {
|
|
|
|
|
+ if (value[0].planInTime && value[value.length - 1].planInTime) {
|
|
|
|
|
+ return value[0].planInTime + "-" + value[value.length - 1].planInTime;
|
|
|
} else {
|
|
} else {
|
|
|
- return "请填写路线时间"
|
|
|
|
|
|
|
+ return "请填写路线时间";
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return "请填写路线时间";
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getAddr = (data) => {
|
|
const getAddr = (data) => {
|
|
|
- var value = JSON.parse(data).pathLine
|
|
|
|
|
- if (value.length > 0) {
|
|
|
|
|
- return value[0].stationName + '-' + value[value.length - 1].stationName
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ var value = JSON.parse(data).pathLine;
|
|
|
|
|
+ if (value.length > 0) {
|
|
|
|
|
+ return value[0].stationName + "-" + value[value.length - 1].stationName;
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getList = async () => {
|
|
const getList = async () => {
|
|
|
- console.log(value2.value)
|
|
|
|
|
- // queryParams.value.starttime = value2.value
|
|
|
|
|
- const res = await listCarInfo({ pageSize: 1000 });
|
|
|
|
|
- carInfoList.value = res.rows
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ console.log(value2.value);
|
|
|
|
|
+ // queryParams.value.starttime = value2.value
|
|
|
|
|
+ const res = await listCarInfo({ pageSize: 1000 });
|
|
|
|
|
+ carInfoList.value = res.rows;
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getDictsData = (param, obj) => {
|
|
const getDictsData = (param, obj) => {
|
|
|
- getDicts(param).then(res => {
|
|
|
|
|
- obj.value = res.data;
|
|
|
|
|
- })
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ getDicts(param).then((res) => {
|
|
|
|
|
+ obj.value = res.data;
|
|
|
|
|
+ });
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 取消按钮 */
|
|
/** 取消按钮 */
|
|
|
const cancel = () => {
|
|
const cancel = () => {
|
|
|
- reset();
|
|
|
|
|
- dialog.visible = false;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ reset();
|
|
|
|
|
+ dialog.visible = false;
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getUserList = () => {
|
|
const getUserList = () => {
|
|
|
- api.listUser({ pageSize: 1000 }).then(res => {
|
|
|
|
|
- userList.value = res.rows;
|
|
|
|
|
- });
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ api.listUser({ pageSize: 1000 }).then((res) => {
|
|
|
|
|
+ userList.value = res.rows;
|
|
|
|
|
+ });
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getUserName = (value) => {
|
|
const getUserName = (value) => {
|
|
|
- for (var index in userList.value) {
|
|
|
|
|
- if (value == userList.value[index].userId) {
|
|
|
|
|
- return userList.value[index].nickName
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ for (var index in userList.value) {
|
|
|
|
|
+ if (value == userList.value[index].userId) {
|
|
|
|
|
+ return userList.value[index].nickName;
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 表单重置 */
|
|
/** 表单重置 */
|
|
|
const reset = () => {
|
|
const reset = () => {
|
|
|
- form.value = { ...initFormData };
|
|
|
|
|
- carInfoFormRef.value?.resetFields();
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ form.value = { ...initFormData };
|
|
|
|
|
+ carInfoFormRef.value?.resetFields();
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 搜索按钮操作 */
|
|
/** 搜索按钮操作 */
|
|
|
const handleQuery = () => {
|
|
const handleQuery = () => {
|
|
|
- queryParams.value.pageNum = 1;
|
|
|
|
|
- getList();
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ queryParams.value.pageNum = 1;
|
|
|
|
|
+ getList();
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const openMapDiv = (data) => {
|
|
const openMapDiv = (data) => {
|
|
|
- dialogMap.visible = true;
|
|
|
|
|
- const info = getCatInfoData(data.carNum);
|
|
|
|
|
- console.log(info)
|
|
|
|
|
- var deviceInfo = JSON.parse(info.deviceInfos)
|
|
|
|
|
- console.log(deviceInfo)
|
|
|
|
|
- var code = '';
|
|
|
|
|
- for (var index in deviceInfo) {
|
|
|
|
|
- if (deviceInfo[index].type == 'gps') {
|
|
|
|
|
- code = deviceInfo[index].code
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ dialogMap.visible = true;
|
|
|
|
|
+ const info = getCatInfoData(data.carNum);
|
|
|
|
|
+ console.log(info);
|
|
|
|
|
+ var deviceInfo = JSON.parse(info.deviceInfos);
|
|
|
|
|
+ console.log(deviceInfo);
|
|
|
|
|
+ var code = "";
|
|
|
|
|
+ for (var index in deviceInfo) {
|
|
|
|
|
+ if (deviceInfo[index].type == "gps") {
|
|
|
|
|
+ code = deviceInfo[index].code;
|
|
|
}
|
|
}
|
|
|
- var value = JSON.parse(data.pathInfo).pathLine
|
|
|
|
|
- var date = moment(new Date()).format('YYYY-MM-DD')
|
|
|
|
|
- if (value[0].planInTime && value[value.length - 1].planInTime) {
|
|
|
|
|
- var param = {
|
|
|
|
|
- devicecode: code,
|
|
|
|
|
- params: {
|
|
|
|
|
- starttime: date + ' ' + value[0].planInTime,
|
|
|
|
|
- endtime: date + ' ' + value[value.length - 1].planInTime,
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ var value = JSON.parse(data.pathInfo).pathLine;
|
|
|
|
|
+ var date = moment(new Date()).format("YYYY-MM-DD");
|
|
|
|
|
+ if (value[0].planInTime && value[value.length - 1].planInTime) {
|
|
|
|
|
+ var param = {
|
|
|
|
|
+ devicecode: code,
|
|
|
|
|
+ params: {
|
|
|
|
|
+ starttime: date + " " + value[0].planInTime,
|
|
|
|
|
+ endtime: date + " " + value[value.length - 1].planInTime,
|
|
|
|
|
+ },
|
|
|
|
|
+ };
|
|
|
|
|
+ // console.log(mapElm.value);
|
|
|
|
|
+ // mapElm.value.getGpsDataList(param);
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ mapElmDiv.value.getGpsDataList(param);
|
|
|
|
|
+ mapTimer.value = setInterval(() => {
|
|
|
|
|
+ console.log(2222222222222);
|
|
|
|
|
+ console.log(dialogMap.visible);
|
|
|
|
|
+ if (dialogMap.visible) {
|
|
|
|
|
+ console.log(222222);
|
|
|
|
|
+ mapElmDiv.value.getGpsDataList(param);
|
|
|
}
|
|
}
|
|
|
- // console.log(mapElm.value);
|
|
|
|
|
- // mapElm.value.getGpsDataList(param);
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- mapElmDiv.value.getGpsDataList(param);
|
|
|
|
|
- mapTimer.value = setInterval(() => {
|
|
|
|
|
- console.log(2222222222222)
|
|
|
|
|
- console.log(dialogMap.visible)
|
|
|
|
|
- if (dialogMap.visible) {
|
|
|
|
|
- console.log(222222)
|
|
|
|
|
- mapElmDiv.value.getGpsDataList(param);
|
|
|
|
|
- }
|
|
|
|
|
- }, 30000);
|
|
|
|
|
- }, 1000);
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ }, 30000);
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 重置按钮操作 */
|
|
/** 重置按钮操作 */
|
|
|
const resetQuery = () => {
|
|
const resetQuery = () => {
|
|
|
- //queryFormRef.value?.resetFields();
|
|
|
|
|
- //handleQuery();
|
|
|
|
|
- getScheduleList();
|
|
|
|
|
- // reloadData.value = false;
|
|
|
|
|
- // setTimeout(() => {
|
|
|
|
|
- // reloadData.value = true;
|
|
|
|
|
- // }, 500);
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ //queryFormRef.value?.resetFields();
|
|
|
|
|
+ //handleQuery();
|
|
|
|
|
+ getScheduleList();
|
|
|
|
|
+ // reloadData.value = false;
|
|
|
|
|
+ // setTimeout(() => {
|
|
|
|
|
+ // reloadData.value = true;
|
|
|
|
|
+ // }, 500);
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 多选框选中数据 */
|
|
/** 多选框选中数据 */
|
|
|
const handleSelectionChange = (selection: CarInfoVO[]) => {
|
|
const handleSelectionChange = (selection: CarInfoVO[]) => {
|
|
|
- ids.value = selection.map(item => item.id);
|
|
|
|
|
- single.value = selection.length != 1;
|
|
|
|
|
- multiple.value = !selection.length;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ ids.value = selection.map((item) => item.id);
|
|
|
|
|
+ single.value = selection.length != 1;
|
|
|
|
|
+ multiple.value = !selection.length;
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 新增按钮操作 */
|
|
/** 新增按钮操作 */
|
|
|
const handleAdd = () => {
|
|
const handleAdd = () => {
|
|
|
- reset();
|
|
|
|
|
- dialog.visible = true;
|
|
|
|
|
- dialog.title = "添加车辆信息";
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ reset();
|
|
|
|
|
+ dialog.visible = true;
|
|
|
|
|
+ dialog.title = "添加车辆信息";
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 修改按钮操作 */
|
|
/** 修改按钮操作 */
|
|
|
const handleUpdate = async (row?: CarInfoVO) => {
|
|
const handleUpdate = async (row?: CarInfoVO) => {
|
|
|
- reset();
|
|
|
|
|
- const _id = row?.id || ids.value[0]
|
|
|
|
|
- const res = await getCarInfo(_id);
|
|
|
|
|
- Object.assign(form.value, res.data);
|
|
|
|
|
- dialog.visible = true;
|
|
|
|
|
- dialog.title = "修改车辆信息";
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ reset();
|
|
|
|
|
+ const _id = row?.id || ids.value[0];
|
|
|
|
|
+ const res = await getCarInfo(_id);
|
|
|
|
|
+ Object.assign(form.value, res.data);
|
|
|
|
|
+ dialog.visible = true;
|
|
|
|
|
+ dialog.title = "修改车辆信息";
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 提交按钮 */
|
|
/** 提交按钮 */
|
|
|
const submitForm = () => {
|
|
const submitForm = () => {
|
|
|
- carInfoFormRef.value?.validate(async (valid: boolean) => {
|
|
|
|
|
- if (valid) {
|
|
|
|
|
- buttonLoading.value = true;
|
|
|
|
|
- if (form.value.id) {
|
|
|
|
|
- await updateCarInfo(form.value).finally(() => buttonLoading.value = false);
|
|
|
|
|
- } else {
|
|
|
|
|
- await addCarInfo(form.value).finally(() => buttonLoading.value = false);
|
|
|
|
|
- }
|
|
|
|
|
- proxy?.$modal.msgSuccess("修改成功");
|
|
|
|
|
- dialog.visible = false;
|
|
|
|
|
- await getList();
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ carInfoFormRef.value?.validate(async (valid: boolean) => {
|
|
|
|
|
+ if (valid) {
|
|
|
|
|
+ buttonLoading.value = true;
|
|
|
|
|
+ if (form.value.id) {
|
|
|
|
|
+ await updateCarInfo(form.value).finally(() => (buttonLoading.value = false));
|
|
|
|
|
+ } else {
|
|
|
|
|
+ await addCarInfo(form.value).finally(() => (buttonLoading.value = false));
|
|
|
|
|
+ }
|
|
|
|
|
+ proxy?.$modal.msgSuccess("修改成功");
|
|
|
|
|
+ dialog.visible = false;
|
|
|
|
|
+ await getList();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 删除按钮操作 */
|
|
/** 删除按钮操作 */
|
|
|
const handleDelete = async (row?: CarInfoVO) => {
|
|
const handleDelete = async (row?: CarInfoVO) => {
|
|
|
- const _ids = row?.id || ids.value;
|
|
|
|
|
- await proxy?.$modal.confirm('是否确认删除车辆信息编号为"' + _ids + '"的数据项?').finally(() => loading.value = false);
|
|
|
|
|
- await delCarInfo(_ids);
|
|
|
|
|
- proxy?.$modal.msgSuccess("删除成功");
|
|
|
|
|
- await getList();
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ const _ids = row?.id || ids.value;
|
|
|
|
|
+ await proxy?.$modal
|
|
|
|
|
+ .confirm('是否确认删除车辆信息编号为"' + _ids + '"的数据项?')
|
|
|
|
|
+ .finally(() => (loading.value = false));
|
|
|
|
|
+ await delCarInfo(_ids);
|
|
|
|
|
+ proxy?.$modal.msgSuccess("删除成功");
|
|
|
|
|
+ await getList();
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
/** 导出按钮操作 */
|
|
/** 导出按钮操作 */
|
|
|
const handleExport = () => {
|
|
const handleExport = () => {
|
|
|
- proxy?.download('system/carInfo/export', {
|
|
|
|
|
- ...queryParams.value
|
|
|
|
|
- }, `carInfo_${new Date().getTime()}.xlsx`)
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ proxy?.download(
|
|
|
|
|
+ "system/carInfo/export",
|
|
|
|
|
+ {
|
|
|
|
|
+ ...queryParams.value,
|
|
|
|
|
+ },
|
|
|
|
|
+ `carInfo_${new Date().getTime()}.xlsx`
|
|
|
|
|
+ );
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const initData = async () => {
|
|
const initData = async () => {
|
|
|
- await getDictsData('tbl_car_type', carTypeList);
|
|
|
|
|
- await getDictsData('energy_type', energyTypeList);
|
|
|
|
|
- await getDictsData('business_type', bussinessTypeList);
|
|
|
|
|
- await getList();
|
|
|
|
|
- await getUserList();
|
|
|
|
|
- getScheduleList();
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ await getDictsData("tbl_car_type", carTypeList);
|
|
|
|
|
+ await getDictsData("energy_type", energyTypeList);
|
|
|
|
|
+ await getDictsData("business_type", bussinessTypeList);
|
|
|
|
|
+ await getList();
|
|
|
|
|
+ await getUserList();
|
|
|
|
|
+ getScheduleList();
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getDictLabel = (value, list) => {
|
|
const getDictLabel = (value, list) => {
|
|
|
- for (var index in list.value) {
|
|
|
|
|
- // console.log(list[index])
|
|
|
|
|
- if (list.value[index].dictValue == value) {
|
|
|
|
|
- return list.value[index].dictLabel
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ for (var index in list.value) {
|
|
|
|
|
+ // console.log(list[index])
|
|
|
|
|
+ if (list.value[index].dictValue == value) {
|
|
|
|
|
+ return list.value[index].dictLabel;
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getCatInfo = (value) => {
|
|
const getCatInfo = (value) => {
|
|
|
- for (var index in carInfoList.value) {
|
|
|
|
|
- if (carInfoList.value[index].carNum == value) {
|
|
|
|
|
- var data = JSON.parse(carInfoList.value[index].ext1)
|
|
|
|
|
- return getDictLabel(data.energyType, energyTypeList).replaceAll("车", "") + getDictLabel(data.bussinessType, bussinessTypeList)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ for (var index in carInfoList.value) {
|
|
|
|
|
+ if (carInfoList.value[index].carNum == value) {
|
|
|
|
|
+ var data = JSON.parse(carInfoList.value[index].ext1);
|
|
|
|
|
+ return (
|
|
|
|
|
+ getDictLabel(data.energyType, energyTypeList).replaceAll("车", "") +
|
|
|
|
|
+ getDictLabel(data.bussinessType, bussinessTypeList)
|
|
|
|
|
+ );
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const getCatInfoData = (value) => {
|
|
const getCatInfoData = (value) => {
|
|
|
- for (var index in carInfoList.value) {
|
|
|
|
|
- if (carInfoList.value[index].carNum == value) {
|
|
|
|
|
- return carInfoList.value[index]
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ for (var index in carInfoList.value) {
|
|
|
|
|
+ if (carInfoList.value[index].carNum == value) {
|
|
|
|
|
+ return carInfoList.value[index];
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
|
|
-
|
|
|
|
|
-})
|
|
|
|
|
|
|
+onUnmounted(() => {});
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
onBeforeUnmount(() => {
|
|
|
- clearInterval(timer.value)
|
|
|
|
|
- clearInterval(mapTimer.value)
|
|
|
|
|
- timer.value = null;
|
|
|
|
|
- mapTimer.value = null;
|
|
|
|
|
-})
|
|
|
|
|
|
|
+ clearInterval(timer.value);
|
|
|
|
|
+ clearInterval(mapTimer.value);
|
|
|
|
|
+ timer.value = null;
|
|
|
|
|
+ mapTimer.value = null;
|
|
|
|
|
+});
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
- initData();
|
|
|
|
|
- //每5s刷新数据
|
|
|
|
|
- timer.value = setInterval(() => {
|
|
|
|
|
- console.log(11111)
|
|
|
|
|
- getScheduleList();
|
|
|
|
|
- reloadData.value = false;
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- reloadData.value = true;
|
|
|
|
|
- }, 500);
|
|
|
|
|
- }, 30000);
|
|
|
|
|
- // mapTimer.value = setInterval(() => {
|
|
|
|
|
- // console.log(2222222222222)
|
|
|
|
|
- // console.log(dialog.visible)
|
|
|
|
|
- // if (dialog.visible) {
|
|
|
|
|
- // console.log(222222)
|
|
|
|
|
- // mapElmDiv.value.getGpsDataList(param);
|
|
|
|
|
- // }
|
|
|
|
|
- // }, 2000);
|
|
|
|
|
|
|
+ initData();
|
|
|
|
|
+ //每5s刷新数据
|
|
|
|
|
+ timer.value = setInterval(() => {
|
|
|
|
|
+ console.log(11111);
|
|
|
|
|
+ getScheduleList();
|
|
|
|
|
+ reloadData.value = false;
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ reloadData.value = true;
|
|
|
|
|
+ }, 500);
|
|
|
|
|
+ }, 30000);
|
|
|
|
|
+ // mapTimer.value = setInterval(() => {
|
|
|
|
|
+ // console.log(2222222222222)
|
|
|
|
|
+ // console.log(dialog.visible)
|
|
|
|
|
+ // if (dialog.visible) {
|
|
|
|
|
+ // console.log(222222)
|
|
|
|
|
+ // mapElmDiv.value.getGpsDataList(param);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // }, 2000);
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
.carDiv {
|
|
.carDiv {
|
|
|
- border-radius: 7px;
|
|
|
|
|
- opacity: 1;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- border: 1px solid #7BC932;
|
|
|
|
|
- height: 25vh;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: row;
|
|
|
|
|
|
|
+ border-radius: 7px;
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ border: 1px solid #7bc932;
|
|
|
|
|
+ height: 25vh;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: row;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.carDetail {
|
|
.carDetail {
|
|
|
- width: 135px;
|
|
|
|
|
- padding: 5px 10px;
|
|
|
|
|
- border-radius: 22px;
|
|
|
|
|
- opacity: 1;
|
|
|
|
|
- background: #FFFFFF;
|
|
|
|
|
- font-family: 思源黑体;
|
|
|
|
|
- font-size: 18px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- margin-bottom: 6px;
|
|
|
|
|
- color: #7BC932;
|
|
|
|
|
|
|
+ width: 135px;
|
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
|
+ border-radius: 22px;
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ font-family: 思源黑体;
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ color: #7bc932;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.carFont {
|
|
.carFont {
|
|
|
- font-family: 思源黑体;
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- line-height: normal;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- letter-spacing: 0px;
|
|
|
|
|
- font-feature-settings: "kern" on;
|
|
|
|
|
- color: #FFFFFF;
|
|
|
|
|
|
|
+ font-family: 思源黑体;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ line-height: normal;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ letter-spacing: 0px;
|
|
|
|
|
+ font-feature-settings: "kern" on;
|
|
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|