diff --git a/README.md b/README.md index 622979a..6e1e95c 100644 --- a/README.md +++ b/README.md @@ -20,17 +20,97 @@ yarn dev # 前端访问地址 http://localhost:80 ``` - -td: 68px +未完成任务： +1.左侧菜单栏：刷新状态不保存 +2.左侧二级菜单选中的时候 一级菜单无背景色 +超图地图开发使用基础 +1、前期准备工作熟悉超图地图服务以及基本的操作。 +2、熟悉Openlayers以及Leaflet相关操作 +具体代码操作： +1、定义一个地图渲染承载框
+2、定义一个地图实例 map: null, 定义一个渲染位置图层 layer: null +3、初始化地图 +// 初始化地图 +initMap() { + ol.proj.setProj4(proj4); + proj4.defs("EPSG:4528","+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"); + var projection = new ol.proj.Projection({ + code: 'EPSG:4528',// 地图坐标系 + }); + this.map = new ol.Map({ + target: 'replay_map',//第一步设置的地图承载框 + controls: ol.control.defaults({ + attribution: false, + rotate: false + }), + view: new ol.View({ + center: [40507885.133754 , 4025694.476392],//地图中心点 + zoom: 12,//初始时的缩放比例 + projection: projection,//坐标系等的设置 + rotation: 0.3 + }), +//图层，这个是后期所有自定义的展示层 + layers: [ + new ol.layer.Tile({ + source: new ol.source.TileSuperMapRest({ + crossOrigin: 'anonymous', + url: this.$map_url, + extent: [40347872.25,2703739.74,40599933.05,5912395.20] + }), + projection: projection, + }) + ] + }); + // 添加位置图层 + this.layer = new ol.layer.Vector({ + source: new ol.source.Vector(), + zIndex: 2, + }); +//把自定义展示的图层放到地图中 + this.map.addLayer(this.layer); +}, +3、图层自定义内容 +//创建一个Feature +const feature = new ol.Feature({ +//以一个点作为示例，可以是点、线、面 + geometry: new ol.geom.Point([item.longitude, item.latitude]), +}); +//定义样式 +feature.setStyle(() => { + //自定义样式 + const style = []; + style.push(this.getStyle(type, item)); + return style; +} +//这个layer就是已开始定义的渲染图层 +this.layer.getSource().addFeature(feature); -1.新增弹窗的label驾驶证类型没有占一行2.人像的矩形右上角的计数器位置与编辑一致 \ No newline at end of file +// 得到style实例 +getStyle(type, item, status) { + return new ol.style.Style({ + image: new ol.style.Icon({ + src: getImage(type, item, status), + rotateWithView: true, + scale: this.getScale(type), + rotation: 0, + }), + zIndex: 3, + text: new ol.style.Text({ + font: '12px 微软雅黑', + text: this.getText(type, item), + offsetY: -15, + fill: new ol.style.Fill({ + color: '#515a71', + }), + }), + }); +}, + + + + + +实现功能计划： +1.我目前需要脱离后台进行页面展示，给增加完善的模拟数据； +2.找一个线上地址测试地图的平台概览页面显示 +3.添加新图层、绘制路线，引入绘制线、绘制面、绘制点 \ No newline at end of file diff --git a/package.json b/package.json index 1a32c17..bf3b1d1 100644 --- a/package.json +++ b/package.json @@ -15,14 +15,18 @@ }, "dependencies": { "@element-plus/icons-vue": "2.0.10", + "@supermap/iclient-ol": "^11.1.1", "@vueuse/core": "9.5.0", "axios": "0.27.2", + "ol": "6.15.1", + "proj4": "^2.17.0", "echarts": "5.4.0", "element-plus": "2.2.21", "file-saver": "2.0.5", "fuse.js": "6.6.2", "js-cookie": "3.0.1", "jsencrypt": "3.3.1", + "leaflet-minimap": "^3.6.1", "nprogress": "0.2.0", "pinia": "2.0.22", "vue": "3.2.45", diff --git a/src/assets/images/btn_left.png b/src/assets/images/btn_left.png new file mode 100644 index 0000000..9996ab7 Binary files /dev/null and b/src/assets/images/btn_left.png differ diff --git a/src/assets/images/btn_right.png b/src/assets/images/btn_right.png new file mode 100644 index 0000000..9ac4349 Binary files /dev/null and b/src/assets/images/btn_right.png differ diff --git a/src/assets/images/car.png b/src/assets/images/car.png new file mode 100644 index 0000000..13e1259 Binary files /dev/null and b/src/assets/images/car.png differ diff --git a/src/assets/images/car1.png b/src/assets/images/car1.png new file mode 100644 index 0000000..9cf0cc1 Binary files /dev/null and b/src/assets/images/car1.png differ diff --git a/src/assets/images/car2.png b/src/assets/images/car2.png new file mode 100644 index 0000000..5c7a95e Binary files /dev/null and b/src/assets/images/car2.png differ diff --git a/src/assets/images/car3.png b/src/assets/images/car3.png new file mode 100644 index 0000000..a7359e3 Binary files /dev/null and b/src/assets/images/car3.png differ diff --git a/src/assets/images/car4.png b/src/assets/images/car4.png new file mode 100644 index 0000000..896b957 Binary files /dev/null and b/src/assets/images/car4.png differ diff --git a/src/assets/images/carIcon.png b/src/assets/images/carIcon.png new file mode 100644 index 0000000..48f6ce2 Binary files /dev/null and b/src/assets/images/carIcon.png differ diff --git a/src/assets/images/carIcon1.png b/src/assets/images/carIcon1.png new file mode 100644 index 0000000..6deca78 Binary files /dev/null and b/src/assets/images/carIcon1.png differ diff --git a/src/assets/images/carIcon2.png b/src/assets/images/carIcon2.png new file mode 100644 index 0000000..55cf8c7 Binary files /dev/null and b/src/assets/images/carIcon2.png differ diff --git a/src/assets/images/carIcon3.png b/src/assets/images/carIcon3.png new file mode 100644 index 0000000..6a7e4d8 Binary files /dev/null and b/src/assets/images/carIcon3.png differ diff --git a/src/assets/images/carIcon4.png b/src/assets/images/carIcon4.png new file mode 100644 index 0000000..9d643a7 Binary files /dev/null and b/src/assets/images/carIcon4.png differ diff --git a/src/assets/images/carIcon5.png b/src/assets/images/carIcon5.png new file mode 100644 index 0000000..bde9b44 Binary files /dev/null and b/src/assets/images/carIcon5.png differ diff --git a/src/assets/images/fault_car.png b/src/assets/images/fault_car.png new file mode 100644 index 0000000..89b9f2e Binary files /dev/null and b/src/assets/images/fault_car.png differ diff --git a/src/assets/images/layerActive.png b/src/assets/images/layerActive.png new file mode 100644 index 0000000..adbaeb5 Binary files /dev/null and b/src/assets/images/layerActive.png differ diff --git a/src/assets/images/list_bg.png b/src/assets/images/list_bg.png new file mode 100644 index 0000000..c2ea219 Binary files /dev/null and b/src/assets/images/list_bg.png differ diff --git a/src/assets/images/map.png b/src/assets/images/map.png new file mode 100644 index 0000000..10ce951 Binary files /dev/null and b/src/assets/images/map.png differ diff --git a/src/assets/images/offline_car.png b/src/assets/images/offline_car.png new file mode 100644 index 0000000..bd3038a Binary files /dev/null and b/src/assets/images/offline_car.png differ diff --git a/src/assets/images/online_car.png b/src/assets/images/online_car.png new file mode 100644 index 0000000..1f637eb Binary files /dev/null and b/src/assets/images/online_car.png differ diff --git a/src/assets/images/znz.png b/src/assets/images/znz.png new file mode 100644 index 0000000..82f36d7 Binary files /dev/null and b/src/assets/images/znz.png differ diff --git a/src/assets/images/znzActive.png b/src/assets/images/znzActive.png new file mode 100644 index 0000000..3272f53 Binary files /dev/null and b/src/assets/images/znzActive.png differ diff --git a/src/assets/images/zoomIn.png b/src/assets/images/zoomIn.png new file mode 100644 index 0000000..a76445a Binary files /dev/null and b/src/assets/images/zoomIn.png differ diff --git a/src/assets/images/zoomInActive.png b/src/assets/images/zoomInActive.png new file mode 100644 index 0000000..4f49a8c Binary files /dev/null and b/src/assets/images/zoomInActive.png differ diff --git a/src/assets/images/zoomOut.png b/src/assets/images/zoomOut.png new file mode 100644 index 0000000..4e0acb1 Binary files /dev/null and b/src/assets/images/zoomOut.png differ diff --git a/src/assets/images/zoomOutActive.png b/src/assets/images/zoomOutActive.png new file mode 100644 index 0000000..1deb9b5 Binary files /dev/null and b/src/assets/images/zoomOutActive.png differ diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue index ac1d2e5..bd2d988 100644 --- a/src/components/TopNav/index.vue +++ b/src/components/TopNav/index.vue @@ -182,5 +182,6 @@ onMounted(() => { color: #999093 !important; padding: 0 5px !important; margin: 0 10px !important; + border-radius: 4px !important; } diff --git a/src/components/car/CarBreadcrumb.vue b/src/components/car/CarBreadcrumb.vue new file mode 100644 index 0000000..aa6fe3b --- /dev/null +++ b/src/components/car/CarBreadcrumb.vue @@ -0,0 +1,51 @@ + + + + + \ No newline at end of file diff --git a/src/components/car/VehicleSearchFilter.vue b/src/components/car/VehicleSearchFilter.vue new file mode 100644 index 0000000..cba163b --- /dev/null +++ b/src/components/car/VehicleSearchFilter.vue @@ -0,0 +1,220 @@ + + + + + \ No newline at end of file diff --git a/src/components/car/VehicleStats copy.vue b/src/components/car/VehicleStats copy.vue new file mode 100644 index 0000000..1e3d070 --- /dev/null +++ b/src/components/car/VehicleStats copy.vue @@ -0,0 +1,149 @@ + + + + + + \ No newline at end of file diff --git a/src/components/car/VehicleStats.vue b/src/components/car/VehicleStats.vue new file mode 100644 index 0000000..f255dab --- /dev/null +++ b/src/components/car/VehicleStats.vue @@ -0,0 +1,202 @@ + + + + + + \ No newline at end of file diff --git a/src/components/car/VehicleTable.vue b/src/components/car/VehicleTable.vue new file mode 100644 index 0000000..9f81a51 --- /dev/null +++ b/src/components/car/VehicleTable.vue @@ -0,0 +1,521 @@ + + + + + \ No newline at end of file diff --git a/src/components/car/detail/BatteryOverview.vue b/src/components/car/detail/BatteryOverview.vue new file mode 100644 index 0000000..d34ef46 --- /dev/null +++ b/src/components/car/detail/BatteryOverview.vue @@ -0,0 +1,243 @@ + + + + + + \ No newline at end of file diff --git a/src/components/car/detail/ChargingStats.vue b/src/components/car/detail/ChargingStats.vue new file mode 100644 index 0000000..5c25ed0 --- /dev/null +++ b/src/components/car/detail/ChargingStats.vue @@ -0,0 +1,167 @@ + + + + + + diff --git a/src/components/car/detail/FaultAlarm.vue b/src/components/car/detail/FaultAlarm.vue new file mode 100644 index 0000000..bc60ee1 --- /dev/null +++ b/src/components/car/detail/FaultAlarm.vue @@ -0,0 +1,319 @@ + + + + + + diff --git a/src/components/car/detail/TrackPlayback.vue b/src/components/car/detail/TrackPlayback.vue new file mode 100644 index 0000000..0e99fe4 --- /dev/null +++ b/src/components/car/detail/TrackPlayback.vue @@ -0,0 +1,149 @@ + + + + + + diff --git a/src/components/car/detail/VideoMonitoring.vue b/src/components/car/detail/VideoMonitoring.vue new file mode 100644 index 0000000..a2f7178 --- /dev/null +++ b/src/components/car/detail/VideoMonitoring.vue @@ -0,0 +1,95 @@ + + + + + + diff --git a/src/components/map/OpenLayersMap.vue b/src/components/map/OpenLayersMap.vue new file mode 100644 index 0000000..2794d2c --- /dev/null +++ b/src/components/map/OpenLayersMap.vue @@ -0,0 +1,487 @@ + + + + + diff --git a/src/components/map/controls/OpenLayersMapInfo.vue b/src/components/map/controls/OpenLayersMapInfo.vue new file mode 100644 index 0000000..e916ac4 --- /dev/null +++ b/src/components/map/controls/OpenLayersMapInfo.vue @@ -0,0 +1,120 @@ + + + + + \ No newline at end of file diff --git a/src/components/map/controls/OpenLayersMiniMap.vue b/src/components/map/controls/OpenLayersMiniMap.vue new file mode 100644 index 0000000..abcc50c --- /dev/null +++ b/src/components/map/controls/OpenLayersMiniMap.vue @@ -0,0 +1,23 @@ + + + \ No newline at end of file diff --git a/src/components/map/controls/OpenLayersScaleControl.vue b/src/components/map/controls/OpenLayersScaleControl.vue new file mode 100644 index 0000000..5f6944b --- /dev/null +++ b/src/components/map/controls/OpenLayersScaleControl.vue @@ -0,0 +1,170 @@ + + + + + \ No newline at end of file diff --git a/src/components/map/controls/OpenLayersZoomControl.vue b/src/components/map/controls/OpenLayersZoomControl.vue new file mode 100644 index 0000000..78577c4 --- /dev/null +++ b/src/components/map/controls/OpenLayersZoomControl.vue @@ -0,0 +1,131 @@ + + + + + \ No newline at end of file diff --git a/src/components/map/info/carClarm.vue b/src/components/map/info/carClarm.vue new file mode 100644 index 0000000..d50591a --- /dev/null +++ b/src/components/map/info/carClarm.vue @@ -0,0 +1,164 @@ + + + + + diff --git a/src/components/map/info/eventlist.vue b/src/components/map/info/eventlist.vue new file mode 100644 index 0000000..6298793 --- /dev/null +++ b/src/components/map/info/eventlist.vue @@ -0,0 +1,479 @@ + + + + + diff --git a/src/composables/useVehicle.js b/src/composables/useVehicle.js new file mode 100644 index 0000000..d3ebc04 --- /dev/null +++ b/src/composables/useVehicle.js @@ -0,0 +1,309 @@ +import { ref, computed } from 'vue'; +import car1 from '../assets/images/car1.png'; +import car2 from '../assets/images/car2.png'; +import car3 from '../assets/images/car3.png'; +import car4 from '../assets/images/car4.png'; + +export function useVehicle() { + // 车辆数据 + const vehicleData = ref([ + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + }, + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + }, + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + }, + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + }, + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + }, + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + }, + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + }, + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + }, + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + }, + { + id: 1, + carId: 'QN001', + type: '驱动车', + brand: '特斯拉', + organization: '物流管理公司', + routeStatus: '任务中', + status: '在线', + chargeStatus: '停车充电', + voltage: '360V', + current: '200A', + soc: '90%', + lastTime: '2024-08-17 15:48:30', + batteryLevel: 'T3高位', + location: '张三', + contactPhone: '12345678920', + battery: 85, + runningStatus: '任务中' + } + + ]); + + // 过滤条件 + const filters = ref({ + searchText: '', + vehicleType: '', + vehicleStatus: '' + }); + + // 统计数据 + const vehicleStats = computed(() => [ + { + title: '车辆总数', + value: vehicleData.value.length.toString().padStart(5, '0'), + icon: car1, + change: 30 + }, + { + title: '在线', + value: vehicleData.value.filter(v => v.status === '在线').length.toString().padStart(5, '0'), + icon: car2, + change: 30 + }, + { + title: '离线', + value: vehicleData.value.filter(v => v.status === '离线').length.toString().padStart(5, '0'), + icon: car3, + change: 30 + }, + { + title: '故障', + value: vehicleData.value.filter(v => v.status === '故障').length.toString().padStart(5, '0'), + icon: car4, + change: 30 + } + ]); + + // 筛选后的数据 + const filteredVehicleData = computed(() => { + let filtered = [...vehicleData.value]; + + if (filters.value.searchText) { + const searchText = filters.value.searchText.toLowerCase(); + filtered = filtered.filter(item => + item.id?.toString().toLowerCase().includes(searchText) || + item.carId?.toLowerCase().includes(searchText) || + item.type?.toLowerCase().includes(searchText) || + item.organization?.toLowerCase().includes(searchText) + ); + } + + if (filters.value.vehicleStatus) { + filtered = filtered.filter(item => item.status === filters.value.vehicleStatus); + } + + if (filters.value.vehicleType) { + filtered = filtered.filter(item => item.type === filters.value.vehicleType); + } + + return filtered; + }); + + // 获取行驶状态对应的类型 + function getRouteStatusType(status) { + switch (status) { + case '任务中': + return 'success'; + case '待命中': + return ''; + case '充电中': + return 'warning'; + case '等待中': + return 'info'; + default: + return ''; + } + } + + // 更新过滤条件 + function updateFilters(newFilters) { + filters.value = { ...filters.value, ...newFilters }; + } + + // 重置过滤条件 + function resetFilters() { + filters.value = { + searchText: '', + vehicleType: '', + vehicleStatus: '' + }; + } + + // 导出数据 + function exportData() { + // 实现导出逻辑 + console.log('导出数据', filteredVehicleData.value); + } + + return { + vehicleData, + vehicleStats, + filters, + filteredVehicleData, + getRouteStatusType, + updateFilters, + resetFilters, + exportData + }; +} \ No newline at end of file diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 91233cc..4b4b423 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -22,7 +22,7 @@ - +