|
|
@@ -35,49 +35,63 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
- <el-card shadow="never">
|
|
|
- <div class="carDiv">
|
|
|
- <div
|
|
|
- style="width: 18%;background: #7BC932;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items:center;">
|
|
|
- <div class="carDetail">苏A xxxxx</div>
|
|
|
- <div class="carFont">07:00-10:00</div>
|
|
|
- <div class="carFont">白下/新港</div>
|
|
|
- <div class="carFont">张三</div>
|
|
|
- <div class="carFont">小型电动吊桶车</div>
|
|
|
- </div>
|
|
|
- <div style="width: 80%;">
|
|
|
- <timeLineDiv></timeLineDiv>
|
|
|
- </div>
|
|
|
- <div style="padding-top:1%">
|
|
|
- <div style="width: 30px;height: 30px;border: 1px solid #000000;border-radius: 20%;" @click="dialogMap.visible = true">
|
|
|
- <img style="width: 28px;height: 28px;" src='@/assets/images/icon/map.png' />
|
|
|
+ <div v-for="(item, index) in carScheduleList">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <div class="carDiv">
|
|
|
+ <div
|
|
|
+ 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="carFont">{{ getTimeFormat(item.pathInfo) }}</div>
|
|
|
+ <div class="carFont">{{ getAddr(item.pathInfo) }}</div>
|
|
|
+ <!-- <div class="carFont">{{ JSON.parse(item.pathInfo).driver_info.nickName }}</div> -->
|
|
|
+ <div class="carFont">{{ getUserName(JSON.parse(item.pathInfo).driverInfo) }}</div>
|
|
|
+ <div class="carFont">{{ getCatInfo(item.carNum) }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 80%;">
|
|
|
+ <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
|
|
|
+ <timeLineDiv :list="JSON.parse(item.pathInfo).pathLine" :stationInfo="JSON.parse(item.stationInfo)"></timeLineDiv>
|
|
|
+ </el-scrollbar>
|
|
|
</div>
|
|
|
- <div style="width: 30px;height: 30px;border: 1px solid #000000;border-radius: 20%;margin-top: 5px" @click="dialog.visible = true">
|
|
|
- <img style="width: 28px;height: 28px;" src='@/assets/images/icon/video.png' />
|
|
|
+ <div style="padding-top:1%">
|
|
|
+ <div style="width: 30px;height: 30px;border: 1px solid #000000;border-radius: 20%;"
|
|
|
+ @click="dialogMap.visible = true">
|
|
|
+ <img style="width: 28px;height: 28px;" src='@/assets/images/icon/map.png' />
|
|
|
+ </div>
|
|
|
+ <div style="width: 30px;height: 30px;border: 1px solid #000000;border-radius: 20%;margin-top: 5px"
|
|
|
+ @click="dialog.visible = true">
|
|
|
+ <img style="width: 28px;height: 28px;" src='@/assets/images/icon/video.png' />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
|
|
|
<el-dialog :title="dialogMap.title" v-model="dialogMap.visible" width="40vw" append-to-body>
|
|
|
- <mapDiv style="width:40vw;height:40vh;" @childToParent='childrenClick'></mapDiv>
|
|
|
+ <mapDiv style="width:40vw;height:40vh;"></mapDiv>
|
|
|
</el-dialog>
|
|
|
|
|
|
<el-dialog :title="dialog.title" v-model="dialog.visible" width="40vw" append-to-body>
|
|
|
<video v-for="item in 1" style="width: 99%;margin-left:0.5%" controls="controls" :autoplay="false"
|
|
|
- muted="muted" :ref="`videoref${item}`"></video>
|
|
|
+ muted="muted" :ref="`videoref${item}`"></video>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<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 tableElm from "@/components/Public/table.vue";
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
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 videojs from "video.js"
|
|
|
import "video.js/dist/video-js.css"
|
|
|
@@ -98,6 +112,7 @@ const single = ref(true);
|
|
|
const multiple = ref(true);
|
|
|
const total = ref(0);
|
|
|
const value2 = ref('')
|
|
|
+const carScheduleList = ref<CarScheduleVO[]>([]);
|
|
|
|
|
|
const queryFormRef = ref<ElFormInstance>();
|
|
|
const carInfoFormRef = ref<ElFormInstance>();
|
|
|
@@ -206,49 +221,56 @@ const data = reactive<PageData<CarInfoForm, CarInfoQuery>>({
|
|
|
|
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
|
|
|
|
+const carTypeList = ref([]);
|
|
|
+const energyTypeList = ref([])
|
|
|
+const bussinessTypeList = ref([])
|
|
|
+
|
|
|
+const userList = ref<UserVO[]>();
|
|
|
+
|
|
|
const goadd = () => {
|
|
|
useTagsViewStore().delView(route);
|
|
|
router.push("/car/work/addWork")
|
|
|
}
|
|
|
|
|
|
-/** 查询车辆信息列表 */
|
|
|
-const getList = async () => {
|
|
|
- // loading.value = true;
|
|
|
- // const res = await listCarInfo(queryParams.value);
|
|
|
- var res = {
|
|
|
- rows: [
|
|
|
- {
|
|
|
- carNum: '张林',
|
|
|
- workTime: "320902198711957841",
|
|
|
- workName: "13898219932",
|
|
|
- type: "xxxxx",
|
|
|
- wangge: "苏A51972",
|
|
|
- gpeople: "仙林",
|
|
|
- people: "司机"
|
|
|
+const getScheduleList = async () => {
|
|
|
+ var date = new Date();
|
|
|
+ var param = {
|
|
|
+ params: {
|
|
|
+ scheduleDate: moment(date).format('YYYY-MM-DD')
|
|
|
+ },
|
|
|
+ pageSize: "1000"
|
|
|
+ }
|
|
|
+ const res = await listCarSchedule(param);
|
|
|
+ carScheduleList.value = res.rows;
|
|
|
+ console.log(carScheduleList.value)
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
- ],
|
|
|
- total: 12
|
|
|
+const getTimeFormat = (data) => {
|
|
|
+ var value = JSON.parse(data).pathLine
|
|
|
+ console.log(value)
|
|
|
+ if (value[0].planInTime && value[value.length - 1].planOutTime) {
|
|
|
+ return value[0].planInTime + '-' + value[value.length - 1].planOutTime
|
|
|
+ } else {
|
|
|
+ return "请填写路线时间"
|
|
|
}
|
|
|
- table.value.setDataList(res.rows);
|
|
|
- total.value = res.total;
|
|
|
- loading.value = false;
|
|
|
}
|
|
|
|
|
|
-const activities = [
|
|
|
- {
|
|
|
- content: 'Event start',
|
|
|
- timestamp: '2018-04-15',
|
|
|
- },
|
|
|
- {
|
|
|
- content: 'Approved',
|
|
|
- timestamp: '2018-04-13',
|
|
|
- },
|
|
|
- {
|
|
|
- content: 'Success',
|
|
|
- timestamp: '2018-04-11',
|
|
|
- },
|
|
|
-]
|
|
|
+const getAddr = (data) => {
|
|
|
+ var value = JSON.parse(data).pathLine
|
|
|
+ return value[0].stationName + '-' + value[value.length - 1].stationName
|
|
|
+}
|
|
|
+
|
|
|
+const getList = async () => {
|
|
|
+ const res = await listCarInfo({ pageSize: 1000 });
|
|
|
+ carInfoList.value = res.rows
|
|
|
+ // console.log(res);
|
|
|
+}
|
|
|
+
|
|
|
+const getDictsData = (param, obj) => {
|
|
|
+ getDicts(param).then(res => {
|
|
|
+ obj.value = res.data;
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
/** 取消按钮 */
|
|
|
const cancel = () => {
|
|
|
@@ -256,6 +278,22 @@ const cancel = () => {
|
|
|
dialog.visible = false;
|
|
|
}
|
|
|
|
|
|
+const getUserList = () => {
|
|
|
+ api.listUser({ pageSize: 1000 }).then(res => {
|
|
|
+ console.log(res.rows)
|
|
|
+ userList.value = res.rows;
|
|
|
+ console.log(userList.value)
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const getUserName = (value) => {
|
|
|
+ for (var index in userList.value) {
|
|
|
+ if (value == userList.value[index].userId) {
|
|
|
+ return userList.value[index].nickName
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/** 表单重置 */
|
|
|
const reset = () => {
|
|
|
form.value = { ...initFormData };
|
|
|
@@ -331,8 +369,39 @@ const handleExport = () => {
|
|
|
}, `carInfo_${new Date().getTime()}.xlsx`)
|
|
|
}
|
|
|
|
|
|
+const initData = async () => {
|
|
|
+ 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) => {
|
|
|
+ for (var index in list.value) {
|
|
|
+ // console.log(list[index])
|
|
|
+ if (list.value[index].dictValue == value) {
|
|
|
+ return list.value[index].dictLabel
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const getCatInfo = (value) => {
|
|
|
+ console.log(value)
|
|
|
+ console.log(carInfoList.value);
|
|
|
+ for (var index in carInfoList.value) {
|
|
|
+ console.log(carInfoList.value[index].carNum)
|
|
|
+ if (carInfoList.value[index].carNum == value) {
|
|
|
+ console.log(carInfoList.value[index]);
|
|
|
+ var data = JSON.parse(carInfoList.value[index].ext1)
|
|
|
+ return getDictLabel(data.energyType, energyTypeList).replaceAll("车", "") + getDictLabel(data.bussinessType, bussinessTypeList)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
- getList();
|
|
|
+ initData();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -342,7 +411,7 @@ onMounted(() => {
|
|
|
opacity: 1;
|
|
|
box-sizing: border-box;
|
|
|
border: 1px solid #7BC932;
|
|
|
- height: 20vh;
|
|
|
+ height: 25vh;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
}
|
