| package-lock.json | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/App.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/main.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/view/car-manage/components/detailModal.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/view/car-manage/detail.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/view/car-manage/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/view/complaint/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/view/early-warning/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/view/order/component/detailModal.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
package-lock.json
Diff too large src/App.vue
@@ -27,9 +27,9 @@ autofit.init({ dh: 1080, dw: 1920, el: "body", el: "#app", resize: true, }, true); }, false); }, methods: {
@@ -16,7 +16,7 @@ /* 全局TableHeight */ Vue.prototype.$baseTableHeight = (formType) => { let height = window.innerHeight let paddingHeight = 400 let paddingHeight = 200 const formHeight = 50 if ('number' == typeof formType) { src/view/car-manage/components/detailModal.vue
New file @@ -0,0 +1,63 @@ <template> <div> <el-dialog title="车辆基础信息" :visible.sync="dialogVisible" width="80%" :modal-append-to-body="false"> <el-descriptions title="" :column="3"> <el-descriptions-item label="公司名称">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="车牌号码">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆颜色">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="核定载客位">14725836902</el-descriptions-item> <el-descriptions-item label="车辆厂牌">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="车辆型号">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆类型">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="所属车主">14725836902</el-descriptions-item> <el-descriptions-item label="车身颜色">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="发动机号">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆VIN码">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="车辆注册日期">14725836902</el-descriptions-item> <el-descriptions-item label="车辆燃料类型">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="发动机排量">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆运输证发证机构">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="车辆经营区域">14725836902</el-descriptions-item> <el-descriptions-item label="运输证字号">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="车辆运输证有效期起">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆运输证有效期止">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="车辆初次登记日期">14725836902</el-descriptions-item> <el-descriptions-item label="车辆检修状态">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="车辆年度审验状态">91510922769973987B</el-descriptions-item> <el-descriptions-item label="卫星定位装置品牌">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="卫星定位装置型号">14725836902</el-descriptions-item> <el-descriptions-item label="卫星定位装置IMEI号">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="卫星定位设备安装日期">91510922769973987B</el-descriptions-item> <el-descriptions-item label="注册日期">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="营运类型">14725836902</el-descriptions-item> <el-descriptions-item label="运价类型编码">射洪洪达出租车有限公司</el-descriptions-item> </el-descriptions> </el-dialog> </div> </template> <script> export default { components: {}, props: {}, data() { return { dialogVisible: false }; }, computed: {}, watch: {}, created() { }, mounted() { }, methods: { closeClick() { this.dialogVisible = false } }, }; </script> <style scoped lang="less"> ::v-deep .el-descriptions .el-descriptions-item__cell { padding-bottom: 20px; } </style> src/view/car-manage/detail.vue
@@ -1,18 +1,214 @@ <template> <div class="container"> <div class=""></div> <div class="containers"> <div class="info-content flex"> <div class="info-left flex3 flex"> <div class="info-back flex shrink0"> <span class="back-size"><i class="el-icon-back"></i>返回</span> </div> <div class="info-content-left ml--100"> <el-descriptions :column="2"> <el-descriptions-item label="公司名称">kooriookami</el-descriptions-item> <el-descriptions-item label="车牌号码">18100000000</el-descriptions-item> <el-descriptions-item label="车牌颜色">苏州市</el-descriptions-item> <el-descriptions-item label="车辆营运类型">kooriookami</el-descriptions-item> <el-descriptions-item label="所属车主">18100000000</el-descriptions-item> <el-descriptions-item label="联系电话">苏州市</el-descriptions-item> <el-descriptions-item label="经营区域">kooriookami</el-descriptions-item> <el-descriptions-item label="车辆年度审验">18100000000</el-descriptions-item> <el-descriptions-item label="驾驶证"> <img class="img-size" src="../../assets/homeImg/img1.png"></img> </el-descriptions-item> <el-descriptions-item label="行驶证"> <img class="img-size" src="../../assets/homeImg/img2.png"></img> </el-descriptions-item> </el-descriptions> <div class="info-btn" @click="showDetail"> 车辆详细信息<i class="el-icon-arrow-right"></i> </div> </div> </div> <div class="info-right flex2"> <video style="width: 100%;height: 100%;" src="../../assets/homeImg/QQ20241223-103023.mp4"></video> </div> </div> <div class="tab-content ml--100 mr--30"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane label="订单记录" name="first"> <div class="table-box mt--23"> <el-table :data="tableData" border stripe style="width: 100%"> <el-table-column prop="date" label="序号"></el-table-column> <el-table-column prop="name" label="订单编号"></el-table-column> <el-table-column prop="name" label="车牌号"></el-table-column> <el-table-column prop="name" label="车辆颜色"></el-table-column> <el-table-column prop="name" label="车辆所属公司"></el-table-column> <el-table-column prop="name" label="上车地点"></el-table-column> <el-table-column prop="name" label="下车地点"></el-table-column> <el-table-column prop="name" label="载客里程"></el-table-column> <el-table-column prop="name" label="驾驶员姓名"></el-table-column> <el-table-column prop="name" label="驾驶员电话"></el-table-column> <el-table-column prop="name" label="派单时间"></el-table-column> <el-table-column prop="name" label="订单金额"></el-table-column> <el-table-column prop="name" label="操作"> <template slot-scope="scope"> <el-button type="text" @click="handle(scope.$index, scope.row)">详情</el-button> </template> </el-table-column> </el-table> <div class="pagination-box relative mt--23 flex j-end"> <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total"> </el-pagination> </div> </div> </el-tab-pane> <el-tab-pane label="预警记录" name="second"> <div class="table-box mt--23"> <el-table :data="tableData" border stripe style="width: 100%"> <el-table-column prop="date" label="序号" fixed width="80"></el-table-column> <el-table-column prop="name" label="车辆名称" width="120" fixed></el-table-column> <el-table-column prop="name" label="车牌号码" width="120" fixed></el-table-column> <el-table-column prop="name" label="持续报警" width="120"></el-table-column> <el-table-column prop="name" label="近15分钟情况" width="120"></el-table-column> <el-table-column prop="name" label="驾驶员名称" width="120"></el-table-column> <el-table-column prop="name" label="所属公司" width="120"></el-table-column> <el-table-column prop="name" label="终端编号" width="120"></el-table-column> <el-table-column prop="name" label="开始报警时间" width="120"></el-table-column> <el-table-column prop="name" label="结束报警时间" width="120"></el-table-column> <el-table-column prop="name" label="持续时长" width="120"></el-table-column> <el-table-column prop="name" label="持续里程数" width="120"></el-table-column> <el-table-column prop="name" label="报警类型" width="120"></el-table-column> <el-table-column prop="name" label="报警次数" width="120"></el-table-column> <el-table-column prop="name" label="处理状态" width="120"></el-table-column> <el-table-column prop="name" label="处理人" width="120"></el-table-column> <el-table-column prop="name" label="处理时间" width="120"></el-table-column> <el-table-column prop="name" label="处理描述" width="240"></el-table-column> </el-table> <div class="pagination-box relative mt--23 flex j-end"> <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total"> </el-pagination> </div> </div> </el-tab-pane> <el-tab-pane label="行驶轨迹" name="third"> <div class="form flex j-between mt--23" style="align-items: end;"> <div class="form-left ml--30"> <el-form :inline="true" :model="searchForm" class="demo-form-inline"> <el-form-item label="选择轨迹时间范围:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-date-picker v-model="searchForm.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" > </el-date-picker> </el-form-item> </el-form> </div> <div class="form-right shrink0 mr--24 mb--23"> <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small" @click="search">查询</el-button> <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14" size="small">重置</el-button> </div> </div> <div class="mapContainer" id="mapContainer"></div> </el-tab-pane> </el-tabs> </div> <DetailModal ref="detailModal" /> </div> </template> <script> import AMapLoader from "@amap/amap-jsapi-loader"; import DetailModal from "./components/detailModal.vue"; export default { name: "detail", components: { DetailModal }, data() { return { id: '' id: '', tableData: [], searchForm: { date: '', type: '', level: '', name: '', total: 40, page: 1, pageSize: 10 }, activeName: 'first' } }, mounted() { this.initMap(); }, methods: { handleClick(){ }, search(){}, reset() { }, showDetail() { this.$refs.detailModal.dialogVisible = true }, initMap() { window._AMapSecurityConfig = { securityJsCode: this.$secretKey, }; AMapLoader.load({ key: this.$mapKey, version: "2.0", plugins: [ "AMap.ToolBar", ], }) .then((AMap) => { this.map = new AMap.Map("mapContainer", { center: [105.574542, 30.5061493], zoom: 15, }); this.map.addControl(new AMap.ToolBar()); let path = [ new AMap.LngLat(105.57, 30.51), new AMap.LngLat(116.382122, 39.901176), new AMap.LngLat(116.387271, 39.912501), new AMap.LngLat(116.398258, 39.9046), ] const content = `<div class="custom-content-marker"> <img src="${require("@/assets/logo.png")}"> </div>`; const marker = new AMap.Marker({ content: content, //自定义点标记覆盖物内容 position: [105.57, 30.51], //基点位置 offset: new AMap.Pixel(-30, -15), //相对于基点的偏移位置 }); this.map.add(marker); let polyline = new AMap.Polyline({ path: path, strokeWeight: 2, //线条宽度 strokeColor: "red", //线条颜色 lineJoin: "round", //折线拐点连接处样式 }); this.map.add(polyline); }) .catch((e) => { }); }, handleSizeChange(e) { this.searchForm.pageSize = e }, handleCurrentChange(e) { this.searchForm.page = e }, // getDetail() { // this.$axios.get(`/api/complaint/detail/${this.id}`).then(res => { // console.log(res); @@ -24,5 +220,66 @@ } </script> <style scoped lang="less"> .containers { height: 100vh; overflow-y: auto; } .info-back { cursor: pointer; // flex-shrink: ; } .info-content { padding: 30px; } ::v-deep .el-descriptions-item__container { font-size: 18px; .el-descriptions-item__label { font-weight: 600; } .el-descriptions-item__content { width: 200px; } } .img-size { width: 169px; height: 99px; } .info-btn { display: flex; align-items: center; justify-content: center; } .info-btn { font-size: 18px; color: #0E6EFD; cursor: pointer; margin-top: 60px; } .flex3 { flex: 3; } .flex2 { flex: 2; } .back-size { font-size: 24px; color: #0E6EFD; cursor: pointer; } #mapContainer { width: 100%; height: 600px; } </style> src/view/car-manage/index.vue
@@ -31,6 +31,10 @@ </el-form-item> </el-form-item> <el-form-item label="车辆运营类型:" prop="type" class="unset_m" style="margin-right: 15px;"> <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择"> <el-option label="全部" value=""></el-option> <el-option label="预警" value="1"></el-option> src/view/complaint/index.vue
@@ -40,7 +40,7 @@ @click="exportExcell">导出</el-button> </div> <div class="table-box ml--30 mt--23 mr--30"> <el-table :data="tableData" border stripe style="width: 100%" :height="height"> <el-table :data="tableData" border stripe style="width: 100%"> <el-table-column prop="date" label="序号"></el-table-column> <el-table-column prop="name" label="车辆名称"></el-table-column> <el-table-column prop="name" label="车牌号码"></el-table-column> @@ -93,11 +93,6 @@ }, tableData: [], }; }, computed: { height() { return this.$baseTableHeight() }, }, methods: { reset() { src/view/early-warning/index.vue
@@ -1,23 +1,278 @@ <template> <div> <p>当前路径：{{ $route.path }}</p> <div class="form flex a-center j-between mt--23"> <div class="form-left ml--30"> <el-form :inline="true" :model="searchForm" class="demo-form-inline"> <el-form-item label="预警类型:" prop="type" class="unset_m" style="margin-right: 15px;"> <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择"> <el-option label="全部" value=""></el-option> <el-option label="预警" value="1"></el-option> <el-option label="报警" value="2"></el-option> </el-select> </el-form-item> <el-form-item label="车辆号牌:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.level" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="驾驶员姓名:" prop="name" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.name" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="公司名称:" prop="companyName" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.companyName" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="预警时间:" prop="date" class="unset_m" style="margin-right: 15px;"> <el-date-picker :append-to-body="false" v-model="searchForm.date" type="daterange" range-separator=" " start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-form-item> <el-form-item label="处理类型:" prop="type" class="unset_m" style="margin-right: 15px;"> <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择"> <el-option label="全部" value=""></el-option> <el-option label="预警" value="1"></el-option> <el-option label="报警" value="2"></el-option> </el-select> </el-form-item> </el-form> </div> <div class="form-right mr--24 mb--22 shrink0"> <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-search" type="primary" size="small" @click="search">查询</el-button> <el-button @click="reset" icon="el-icon-refresh-right" class="reset-button h--40 w--90 fs--14" size="small">重置</el-button> </div> </div> <div class="table-box-btn mt--23 ml--30"> <el-button class="search-button h--40 w--90 fs--14" icon="el-icon-top" type="primary" size="small" @click="exportExcell">导出</el-button> </div> <div class="table-box ml--30 mt--23 mr--30"> <el-table :data="tableData" border stripe style="width: 100%"> <!-- 固定前三列 --> <el-table-column prop="date" label="序号" fixed="left"></el-table-column> <el-table-column prop="name" label="车辆名称" fixed="left"></el-table-column> <el-table-column prop="name" label="车牌号码" fixed="left"></el-table-column> <!-- 其余列不固定，可滚动 --> <el-table-column prop="name" label="近15分钟情况"></el-table-column> <el-table-column prop="name" label="驾驶员名称"></el-table-column> <el-table-column prop="name" label="所属公司"></el-table-column> <el-table-column prop="name" label="终端编号"></el-table-column> <el-table-column prop="name" label="开始报警时间"></el-table-column> <el-table-column prop="name" label="结束报警时间"></el-table-column> <el-table-column prop="name" label="持续时长"></el-table-column> <el-table-column prop="name" label="持续里程数"></el-table-column> <el-table-column prop="name" label="报警类型"></el-table-column> <el-table-column prop="name" label="报警等级"></el-table-column> <el-table-column prop="name" label="报警次数"></el-table-column> <el-table-column prop="name" label="报警来源"></el-table-column> <el-table-column prop="name" label="处理状态"></el-table-column> <el-table-column prop="name" label="处理人"></el-table-column> <el-table-column prop="name" label="处理时间"></el-table-column> <el-table-column prop="name" label="处理描述"></el-table-column> </el-table> <div class="pagination-box relative mt--23 flex j-end"> <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page" background layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total"> </el-pagination> </div> <el-drawer :visible.sync="drawer" append-to-body :size="450"> <div class="flex j-between a-center fs--20 pl--15 pr--15"> <!-- 使用 Tailwind CSS 的内联十六进制颜色类 --> 黑A03343D（5）<i class="el-icon-s-unfold color1 pointer"></i> </div> <hr class="mt--10" /> <div class="pl--15 pr--15"> <div class="flex mt--15"> <div class="w--100 shrink0 color1">当前司机：</div> <div class="color2">宫劲爆</div> </div> <div class="flex mt--15"> <div class="w--100 shrink0 color1">当前车速：</div> <div class="color2">22km/h</div> </div> <div class="flex mt--15"> <div class="w--100 shrink0 color1">当前位置：</div> <div class="color2">黑龙江哈尔滨市双城区双城镇团结大街441号和兴家园陈根村供电局住宅楼</div> </div> <div class="flex mt--15"> <div class="w--100 shrink0 color1">抓拍照片：</div> <el-image style="height: 100px" :src="require('@/assets/logo.png')" :preview-src-list="[require('@/assets/logo.png')]"> </el-image> </div> </div> <hr class="mt--10" /> <div class="flex j-between a-center fs--15 pl--15 pr--15 mt--15 color2"> 近15分钟报警 </div> <div class="block pl--15 pr--15 mt--15"> <el-timeline> <el-timeline-item color='#0E6EFD' timestamp="2018/4/12" placement="top"> <el-card class="pointer"> <h4>视频信号遮挡报警</h4> <p class="color1">22km/h</p> </el-card> </el-timeline-item> <el-timeline-item timestamp="2018/4/3" placement="top" color='#0E6EFD'> <el-card class="pointer"> <h4>视频信号遮挡报警</h4> <p class="color1">22km/h</p> </el-card> </el-timeline-item> <el-timeline-item color='#0E6EFD' timestamp="2018/4/2" placement="top"> <el-card class="pointer"> <h4>视频信号遮挡报警</h4> <p class="color1">22km/h</p> </el-card> </el-timeline-item> </el-timeline> </div> <div class="fixed"> <div class="card"> <div class="title fs--18 color2">视频信号遮挡报警</div> <div id="mapContainer"></div> <div class=""> <div class="flex mt--15"> <div class="w--100 shrink0 color1">司机：</div> <div class="color2">宫劲爆</div> </div> <div class="flex mt--15"> <div class="w--100 shrink0 color1">车速：</div> <div class="color2">22km/h</div> </div> <div class="flex mt--15"> <div class="w--100 shrink0 color1">时间：</div> <div class="color2">2024-08-08 14:52:51</div> </div> <div class="flex mt--15"> <div class="w--100 shrink0 color1">地点：</div> <div class="color2">黑龙江哈尔滨市双城区双城镇团结大街441号和兴家园陈根村供电局住宅楼</div> </div> </div> </div> </div> </el-drawer> </div> </div> </template> <script> import { search } from 'core-js/fn/symbol'; import AMapLoader from "@amap/amap-jsapi-loader"; export default { data() { return { activeIndex: '1', activeIndex2: '1' drawer: true, searchForm: { date: '', type: '', level: '', name: '', companyName: '', total: 40, page: 1, pageSize: 10 }, tableData: [], }; }, mounted() { this.initMap() }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } // 初始化地图 initMap() { window._AMapSecurityConfig = { securityJsCode: "37ce61ae86efa5ad82b649a277f5097c", }; AMapLoader.load({ key: "67968c82f27c7e2cb9f40c1a9aa3042b", version: "2.0", plugins: [ "AMap.ToolBar", "AMap.AutoComplete", "AMap.Geocoder", "AMap.MarkerCluster", ], }) .then((AMap) => { this.map = new AMap.Map("mapContainer", { center: [105.574542, 30.5061493], zoom: 15, }); }) .catch((e) => { console.log(e); }); }, reset() { }, search() { }, exportExcell() { }, handleSizeChange(e) { this.searchForm.pageSize = e }, handleCurrentChange(e) { this.searchForm.page = e }, } } </script> <style></style> <style scoped lang="less"> .color1 { color: #0E6EFD; } .color2 { color: rgb(52, 52, 52); } #mapContainer { width: 100%; height: 500px; margin: 20px 0; } ::v-deep .el-drawer__body { position: relative; .fixed { right: 470px; top: 0; bottom: 0; margin: auto; display: flex; align-items: center; .card { background: #fff; width: 500px; max-height: 1000px; padding: 15px; } } } ::v-deep .pagination-popper { position: fixed !important; transform: scale(calc(1 / var(--scale))) translate(calc(100px * (1 - 1 / var(--scale))), calc(5px * (1 - 1 / var(--scale)))) !important; transform-origin: right top !important; right: calc(30px * (1 - 1 / var(--scale))) !important; margin-top: 5px; min-width: 100px !important; } </style> src/view/order/component/detailModal.vue
@@ -119,6 +119,6 @@ #mapContainer { width: 100%; height: 600px; height: 300px; } </style>
